/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


body{font-family:"museo-sans-rounded","museo-sans",sans-serif;font-size:14px;color:#232c28;}
b {font-weight:bold}
h1, h2 {color:#5bbdb1;text-transform:uppercase;border-bottom:1px solid #5bbdb1;font-size:30px;line-height:50px;margin-bottom:20px}
p {margin-bottom:10px;line-height:1.4em}
hr {border: 0;height: 1px;background: #232c28;margin:20px 0}
a {color:#232c28;text-decoration:none}
a:hover {text-decoration:underline}

/* Home */
body#home{background:-moz-radial-gradient(circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), url(/assets/visual/home_bg.jpg);background:-webkit-gradient(radial, circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.65))), url(/assets/visual/home_bg.jpg);background:-webkit-radial-gradient(circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), url(/assets/visual/home_bg.jpg);background:-o-radial-gradient(circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), url(/assets/visual/home_bg.jpg);background:-ms-radial-gradient(circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), url(/assets/visual/home_bg.jpg);background:radial-gradient(circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), url(/assets/visual/home_bg.jpg)}
#home span{visibility:hidden}
#home img{max-width:100%}
#home > div{position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:465px;text-align:center;height:200px;text-transform:uppercase}
#home div a{margin-top:20px;display:inline-block;width:32%;text-align:center;text-decoration:none;color:#fff;letter-spacing:3px}
#home div a object {max-height:101px; max-width:93px}
#home div a.portfolio object {max-width:108px;margin-right:2px}
#home div a img, #home div a object{margin-bottom:10px;-moz-transition: all ease  0.25s;-o-transition: all ease  0.25s;-webkit-transition: all ease  0.25s;transition: all ease  0.25s;-moz-transform: scale(0.95);-ms-transform: scale(0.95);-o-transform: scale(0.95);-webkit-transform: scale(0.95);transform: scale(0.95);}
#home div a:hover img, #home div a:hover object  {-moz-transition: all ease 0.125s;-o-transition: all ease 0.125s;-webkit-transition: all ease 0.125s;transition: all ease 0.125s;-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);-webkit-transform: scale(1);transform: scale(1);}

header > a {padding-top:30px}
header{position:relative;margin:15px 50px;height:95px;vertical-align:bottom;background:url(/assets/visual/header_bg.png) center bottom no-repeat;text-align:center}
header .logo {margin-right:2px;max-width: 100%; width:258px}
a.svg {position: relative;display: inline-block;}
a.svg:after { content: "";  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}
#menu{position:absolute;top:0;right:0}
#menu a{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;margin-left:30px;text-transform:uppercase;display:inline-block;text-align:center;text-decoration:none;color:#222c28;letter-spacing:1px;transition: opacity 0.5s linear;-webkit-transition: opacity 0.5s linear;-moz-transition: opacity 0.5s linear;-o-transition: opacity 0.5s linear;}
#menu a object {max-width:52px; max-height:59px;}
#menu a.about object {margin-left:7px}
#menu a.contact object {margin-right:7px}
#menu a img, #menu a object{margin-bottom:6px;-moz-transition: all ease  0.25s;-o-transition: all ease  0.25s;-webkit-transition: all ease  0.25s;transition: all ease  0.25s;-moz-transform: scale(0.95);-ms-transform: scale(0.95);-o-transform: scale(0.95);-webkit-transform: scale(0.95);transform: scale(0.95);}
#menu a:hover img, #menu a:hover object {-moz-transition: all ease 0.125s;-o-transition: all ease 0.125s;-webkit-transition: all ease 0.125s;transition: all ease 0.125s;-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);-webkit-transform: scale(1);transform: scale(1);}
#menu a:hover,#menu a.active{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity: 1;}


body{background:url(/assets/visual/portfolio_bg.jpg);}

a.hidden {position: absolute;left: -999px;}
a.hidden:focus {left: 50px;}

a#usermap {position: absolute;left: -999px;bottom:-16px}
a#usermap:focus {left: 0px;}

#sitemap section{max-width:920px;margin:0 auto;padding:20px;font-size:16px;}
#sitemap ul {margin-left:20px}
#sitemap li {margin:10px}

#about section{max-width:920px;margin:0 auto;padding:20px;font-size:16px;}
#about .column{width:48%;display:inline-block;vertical-align:top}
#about .spacer{width:2%;display:inline-block}

#contact section{position: absolute;top: 105px;bottom: 0;left: 0;right: 0;color:#fff;padding:70px 0;margin:50px;background:-moz-radial-gradient(circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), url(/assets/visual/home_bg.jpg);background:-webkit-gradient(radial, circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.65))), url(/assets/visual/home_bg.jpg);background:-webkit-radial-gradient(circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), url(/assets/visual/home_bg.jpg);background:-o-radial-gradient(circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), url(/assets/visual/home_bg.jpg);background:-ms-radial-gradient(circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), url(/assets/visual/home_bg.jpg);background:radial-gradient(circle, rgba(0, 9, 4, 0.1), rgba(0, 9, 4, 0.3), rgba(0, 9, 4, 0.5)), url(/assets/visual/home_bg.jpg)}
#contact section > div {position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%);max-width:642px;margin:0 auto;text-align:center;font-size:19px}
#contact section div div {color:#e06b72;border:1px solid #e06b72;border-width: 1px 0px;margin:20px 5px;padding:20px 0}
#contact section span {color:#e06b72;}

#portfolio section{margin:50px;text-align:center;position:relative;}
#portfolio section.port{margin:50px auto;max-width:1200px}
#portfolio section a.preview {width:275px;height:275px;display:inline-block;margin:8px;border:3px solid #8ac9bf;transition: background 0.5s linear;-webkit-transition: background 0.5s linear;-moz-transition: background 0.5s linear;-o-transition: background 0.5s linear;}
#portfolio section a:hover {text-decoration:none}
#portfolio section a.preview div, #portfolio section a.preview span {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-moz-opacity: 0;-khtml-opacity: 0;opacity:0;transition: opacity 0.5s linear;-webkit-transition: opacity 0.5s linear;-moz-transition: opacity 0.5s linear;-o-transition: opacity 0.5s linear;}
#portfolio section a.preview:hover div, #portfolio section a.preview:hover span, #portfolio section a.preview.active div, #portfolio section a.preview.active span {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity:1}
#portfolio section a.preview div {height:50%;vertical-align:baseline;border-bottom:2px solid #8ac9bf; margin: 0 15px;position:relative}
#portfolio section a.preview div h3 {position:absolute;bottom:10px;width:100%;text-transform:uppercase;font-size:30px}
#portfolio section a.preview span {color:#fff;padding:20px 18px;display:block;font-family: 'Sacramento', cursive;font-size:35px}
#portfolio section > div {background-color:#fff; color:#858887} 
#portfolio section > div div {padding:35px 50px; max-width:2020px; margin: 0 auto;}
#portfolio section > div div.top {padding-bottom:0;background:#212a25; max-width:100%}
#portfolio section > div img {max-width:100%}
#portfolio section > div h3 {font-size:30px;text-transform:uppercase;padding:0 40px 10px;display:inline-block}
#portfolio section > div span {padding:10px;font-family: 'Sacramento', cursive;font-size:35px;display:inline-block;margin:10px 0;}
#portfolio section > div span a {color:#fff;}
.prev, .next {position:absolute;top:60px}
.prev {left:-25px}
.next {right:-25px}

/* Mobile */
@media screen and (max-width:1300px){
	#portfolio section.port {max-width:600px}
}
@media screen and (max-width:465px){
	#home > div {width:300px}
	#home div a{letter-spacing:2px}
	header { margin: 15px 15px;}
}
@media screen and (max-height:500px){
	#home > div {height:285px}
}
@media screen and (max-height:285px){
	#home > div {position:relative}
}
@media screen and (max-width:1000px){
	#menu a img, #menu a object {display:none;}
	#menu a {display:block;text-align:right;margin:0}
}
@media screen and (max-width:560px){
	#menu a {display:inline-block;margin:0 5px}
	#menu {top:0;width:100%;}
	#contact section{margin:50px 10px}
	#portfolio section{margin:50px 10px}
	#portfolio section div div{padding:15px 10px;}
	.prev {left:4px;top: -39px;}
	.next {right:4px;top: -39px;}
	header {margin: 15px 10px;}
}
@media screen and (max-width:400px){
	header{background-image:none}
	header > a img {margin-top: 42px;}
}
@media screen and (max-width:730px){
	#about .column{width:100%;}
	#about .spacer{display:none}
}
@media screen and (max-height: 670px), screen and (max-width: 850px) {
#contact section > div {position: relative; top: 0; left:0; transform: translate(0, 0);}
#contact section {position:relative;top:0}
}