audio,canvas,video{display:inline;zoom:1;}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
html,button,input,select,textarea{font-family:sans-serif;color:#222;}
body{font-size:62.5%;line-height:1.5;margin:0;padding:0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:700;}
blockquote{margin:1em 40px;}
dfn{font-style:italic;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
ins{background:#ff9;color:#000;text-decoration:none;}
mark{background:#ff0;color:#000;font-style:italic;font-weight:700;}
pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;}
pre{white-space:pre-wrap;word-wrap:break-word;}
q{quotes:none;}
q:before,q:after{content:none;}
small{font-size:85%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-.5em;}
sub{bottom:-.25em;}
ul,ol{margin:1em 0;padding:0 0 0 40px;}
dd{margin:0 0 0 40px;}
nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0;}
img{-ms-interpolation-mode:bicubic;vertical-align:middle;border:0;}
svg:not(:root){overflow:hidden;}
fieldset{border:0;margin:0;padding:0;}
label{cursor:pointer;}
legend{border:0;margin-left:-7px;white-space:normal;padding:0;}
button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0;}
button,input{line-height:normal;}
button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button;overflow:visible;}
button[disabled],input[disabled]{cursor:default;}
input[type=checkbox],input[type=radio]{box-sizing:border-box;width:13px;height:13px;padding:0;}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;resize:vertical;}
input:invalid,textarea:invalid{background-color:#f0dddd;}
table{border-collapse:collapse;border-spacing:0;}
td{vertical-align:top;}
h1,h2,h3,h4,h5,h6,p,ul,li,fieldset,form,nav{border:none;font-weight:400;margin:0;padding:0;}
ul,nav{list-style:none;}
a{text-decoration:none;}
.fRight{float:right;}
.fLeft{float:left;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
.clearfix{display:inline-block;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,a img,.block{display:block;}
audio:not([controls]),[hidden]{display:none;}
figure,form{margin:0;}

/*****************  END Boilerplate RESETS  *********************/

::-moz-selection { background: #EB8C26; color: #fff; text-shadow: none; }
::selection { background: #EB8C26; color: #fff; text-shadow: none; }

a { color: #00e; }
/*a:visited { color: #551a8b; }*/
a:hover { color: #be6e19; }
a:focus { outline: none; }
a:hover, a:active { outline: 0; }

/**** CSS ****/
*{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{
	font-family:georgia, serif;
	background: url(../images/bg_body.jpg) repeat;
}

#wrapper{
    margin-top: 153px;
    overflow: auto;
}
.container{
    max-width: 980px;
    position: relative;
    padding: 0 2%;
    margin: 0 auto;
}
.topBar{
    height: 7px;
    border-bottom: 2px solid #FFF;
    width: 100%;
    background: #eb8c26;
    position: fixed;
    top: 0;
}
/************** header **************/
header{
    height: 146px;
    border-bottom: 2px solid #fff;
    background-color: rgba(5, 123, 184, .65);
    width: 100%;
    -webkit-box-shadow:  0 2px 3px 0 #888;
    box-shadow:  0 2px 3px 0 #888;
    position: fixed;
    z-index: 20;
    top: 7px;
}
.mod-no-rgba header{
    background-color: rgb(5, 123, 184);
    opacity: .9;
}
header > div{
    height: 146px;
}
#logo {
    padding: 42px 0 0;
    display: block;
}
	.svglogo, .mod-svg .nosvg {
        width: 294px;
        height: 58px;
        display: none;
	}
    .mod-svg .svglogo{
        display: block;
    }

    header h1{
        position: absolute;
        text-align: center;
        bottom: 2px;
        right: 5px;
        font-family: 'Wire One', sans-serif;
        color: #FFF;
        background: url("../images/coljung.png") no-repeat right bottom;
        height: 120px;
        padding-right: 90px;
        letter-spacing: 0.05em;
        font-size: 3.8em;
        line-height: 1.2;
    }

 #myTab{
     position: fixed;
     background: #fff;
     width: 150px;
     height: 30px;
     left: 600px;
     top: 151px;
     z-index: 30;
     -webkit-border-radius: 0 0 12px 12px;
     border-radius: 0 0 12px 12px;
     -webkit-box-shadow:  0 2px 3px 0 #888;
     box-shadow:  0 2px 3px 0 #888;
 }
/************** banner **************/
#banner{
	
}

/************** content **************/

.content{
    color: #616161;
}
	.content h1{
		
	}
	.content h2{
        margin-bottom: 15px;
        font-family: 'Wire One', sans-serif;
        font-size: 5em;
	}
	.content h3{
        margin-bottom: 8px;
        font-size: 1.5em;
	}
	.content p{
		color: #616161;
        font-size: 2.8em;
        line-height: 2;
        margin-bottom: 20px;
	}
	.content a{
		color: #EB8C26;
        display: inline-block;
	}
    a{
        /*text-decoration: underline;*/
    }
    .content a:hover{
        color: #be6e19;
    }
section{
    padding: 30px 0;
}
.box_portfolio{
    width: 30%;
    margin: 0 3% 25px 0;
    float: left;
}
.port_block{
    width: 100%;
    border: 5px solid #fff;
    position: relative;
    padding-bottom: 0;
    overflow: hidden;
    margin-bottom: 5px;
    -webkit-box-shadow:  0 0 1px 0 #333;
    box-shadow:  0 0 1px 0 #333;
}
.port_block:hover{
    cursor: pointer;
}
    .box_portfolio:hover .port_block{
        -webkit-box-shadow:  0 0 3px 2px #777;
        box-shadow:  0 0 3px 2px #777;
    }
.img_block{
    display: block;
    width: 100%;
    border: 1px solid #ddd;
    height: 185px;
    overflow: hidden;
}
    .img_block img{
        display: block;
        max-width: 100%;
    }
.text_block{
    font-size: 1.25em;
    padding-left: 10px;
    /*height: 28px;*/
    position: relative;
    line-height:28px;
    margin: 0;
}
.text_block h3{
    font-size: 1.5em;
    line-height: 1.8;
    color: #999;
}
.text_block p{
    font-size: 1em;
    line-height: 1.8;
    color: #999;
}
.text_block a{
    font-style: italic;
    position: absolute;
    top: 0;
    right: 0;
}
.box_portfolio:hover .text_block p,
.box_portfolio:hover .text_block h3{
    color: #333;
}
.mod-no-csstransitions .previewLink{
    display: none;
}
.mod-csstransitions .previewLink{
    position: absolute;
    top: -185px;
    height: 185px;
    padding-top: 62px;
    font-size: 3em;
    background: #EB8C26;
    opacity: .8;
    width: 100%;
    text-align: center;
    display: block;
    text-decoration: none;
    color: #fff;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
}
.previewLink:hover{
    color: #fff;
}
.port_block:hover .previewLink{
    transform:translate(0, 185px);
    -moz-transform:translate(0, 185px);
    -webkit-transform:translate(0, 185px);
    -ms-transform:translate(0, 185px);
    animation-direction:alternate;
    -moz-animation-direction:alternate; /* Firefox */
    -webkit-animation-direction:alternate; /* Safari and Chrome */
    -o-animation-direction:alternate; /* Opera */
}

#flickr_gal{}
    #flickr_gal li{
        float: left;
        margin: 0 20px 20px 0;
    }
    .flickr_link{
        border: 5px solid #fff;
        -webkit-box-shadow:  0 0 1px 1px #ddd;
        box-shadow:  0 0 1px 1px #ddd;
    }
    .flickr_link:hover{
        -webkit-box-shadow:  0 0 3px 2px #777;
        box-shadow:  0 0 3px 2px #777;
    }
/************** footer **************/

footer{

}

/************** navigations **************/
nav {
    line-height: 38px;
    height: 40px;
    border-top: 2px solid #FFF;
    width: 100%;
    background: #eb8c26;
    position: fixed;
    bottom: 0;
    -webkit-box-shadow:  0 0 3px 0 #888;
    box-shadow:  0 0 3px 0 #888;
}
nav .container{display: block;}
    .navLink {
        float: left;
        color: #FFF;
        font-size: 3em;
        margin-right: 15px;
        padding: 0 10px;
        display: inline-block;
        font-family: 'Wire One', sans-serif;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-decoration: none;
    }
    .navLink:first-child{padding-left: 0}
    .navLink.symbol{
        font-size: 2em;
        line-height: 35px;
    }

    .socialLink{
        text-decoration: none;
        font-size: 2em;
        padding-left: 30px;
        display: inline-block;
        position: relative;
        margin-bottom: 3px;
    }
    .socialLink .symbol{
        position: absolute;
        left: 0;
        top: -2px;
    }


.symbol{
    font-family: 'WebSymbolsRegular';
}

@media screen and (max-width: 899px) {
    .topBar, header, nav{
        position: relative;
    }
    header{
        top: auto;
    }
    nav{
        bottom: auto;
        margin-top: -1px;
    }
    #wrapper{
        overflow: inherit;
        margin-top: 0;
        height: auto;
    }
    #wrapper .container{
        padding: 0 10%;
    }
}

@media screen and (max-width: 700px) {

    #logo img{
        width: 200px;
    }
}

@media screen and (max-width: 500px) {

    header{
        height: auto;
    }
    header h1{
        position: relative;
        height: auto;
        background: none;
        font-size:3.2em;
        padding-right: 0;
    }
    #logo{
        padding-top: 4px;
    }
    #logo img{
        margin: 0 auto;
        width: 150px;
    }
    .navLink{
        font-size: 2.4em;
        padding: 0 2px;
    }
    .box_portfolio{
        float: none;
        width: 100%;
    }
    .content p{
        font-size: 1.8em;
    }
    .flickr_link img{
        width: 100px;
    }

}