/* Reset ======================================================================================= */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td { margin: 0; padding: 0; } #site { width: 960px; margin: auto; position: relative; z-index: 5; height: 100%; max-width:100% } #site a { position: absolute; left: 0px; top: 50%; margin-top: -140px; display:block; cursor:pointer; transition:all .3s ease-out; -o-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -webkit-transition:all .3s ease-out } #site a img { position:relative;display:block; margin:auto; } #site h1 { position: absolute; top: 0px; left: 0px; } #site h1 a { background: url(../img/skin/logo.png) 0px 0px; width: 93px; height: 92px; display: block; text-indent: -999px; overflow: hidden; position: relative } #bg { background: url(../img/skin/bg.png); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2 } #bg3 { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 4; overflow:hidden } #bg2 { background: url(../img/bg222.jpg); display:none; overflow:hidden; -webkit-background-size: cover; /*for webKit*/ -moz-background-size: cover; /*Mozilla*/ -o-background-size: cover; /*opera*/ background-size: cover; /*generic*/ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1 } #loader { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:100; background: #161616; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #161616 0%, #000000 50%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#161616), color-stop(50%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #161616 0%,#000000 50%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #161616 0%,#000000 50%,#000000 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #161616 0%,#000000 50%,#000000 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #161616 0%,#000000 50%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } #loader-img {height:100%; width:100%; position:fixed; top:0px; left:0px; z-index:103; display:block; text-align:center} #loader-img img { position:absolute; top:-5%; margin-top:-5px; margin-left:-8px; left:50%; cursor:pointer} #loader-bg {height:100%; width:100%; background:#000; position:fixed; top:0px; left:0px; z-index:102;} #loader-spin {height:100%; width:100%; position:fixed; top:0px; left:0px; z-index:101; } #loader-spin img { position:absolute; top:50%; margin-top:-18px; margin-left:-18px; left:50%; cursor:pointer} #header { background:rgba(0,0,0,.8); height:50px; position: absolute; z-index:50; width:100%; max-width:100%; top:0px; left:0px; } #header h1 { float:left;} #header h1 a { display:block; padding:0px; height:50px} #header h1 img { opacity: 1} #audio { cursor:pointer; position:relative} #audio span { color:#fff; font-size:10px; text-transform:uppercase; font-family:Verdana, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", sans-serif; position:absolute; top:18px; left:11px; text-align:center; z-index:2; color:#fff} #header ul.main { padding-left:12px; float:left} #header li { display:block; float:left; position:relative} #header li a { display:block; float:left; color:#fff; padding:16px 12px; font-family:'pxreg'; text-transform:uppercase; font-size:16px; transition:all .3s ease-out; -o-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -webkit-transition:all .3s ease-out} #header li a:hover{ color:#47C5EF} #header li a.active{ color:#47C5EF} #header li a:active{ color:#2144E4 } #header p { display:block; color:#fff; padding:17px; font-family:'pxreg'; line-height:100%; font-size:16px} #header p.left {position:relative;} #header strong { font-weight:normal; color:#fff} #header span { color:#0eaadf} #header p a { color:#fff; text-transform:none; border-bottom:1px solid #0eaadf; transition:all .3s ease-out; -o-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -webkit-transition:all .3s ease-out} #header p a:hover { border-bottom:1px solid #fff;} #theFrame { top:0px; left:0px; position: fixed; z-index:4; margin-top:40px} /* Drop Down Menu */ #header li ul { display:none ; position:absolute; top:47px !important; left:0px !important; z-index:100; background:rgba(0,0,0,.8); width:200px !important } #header li:hover ul { display:block;} #header li ul li { background:none; display:block; float: none !important } #header li ul a { position:relative; background: none; text-align:left; float: none !important; color: #fff; padding:10px;} #header li ul a:hover { background:none;} /* Global ======================================================================================= */ body, html { height: 100% !important; width: 100% !important; } body { background: #000 url(../img/home.jpg) top center fixed no-repeat; font-family: Arial, Helvetica, sans-serif; font-size: 75%; -webkit-background-size: cover; /*for webKit*/ -moz-background-size: cover; /*Mozilla*/ -o-background-size: cover; /*opera*/ background-size: cover; /*generic*/ } body.top { background: #000 url(../img/ho2me.jpg) left top fixed no-repeat; font-family: Arial, Helvetica, sans-serif; font-size: 75%; -webkit-background-size: cover; /*for webKit*/ -moz-background-size: cover; /*Mozilla*/ -o-background-size: cover; /*opera*/ background-size: cover; /*generic*/ } body.nobg { background: #000 url(../img/skin/home22.jpg) bottom right fixed no-repeat; font-family: Arial, Helvetica, sans-serif; font-size: 75%; -webkit-background-size: cover; /*for webKit*/ -moz-background-size: cover; /*Mozilla*/ -o-background-size: cover; /*opera*/ background-size: cover; /*generic*/ } img { border: 0px; } p { line-height: 1.5em; text-align: justify; font-size: 1em; } li { list-style: none; } a { text-decoration: none; } .right { float:right;} .left { float:left;} .hide { display:none; visibility:hidden;} @font-face { font-family: 'pxbold'; src: local('☺'); src: url('font/pxbold.eot'); src: url('font/pxbold.eot?#iefix') format('embedded-opentype'), url('font/pxbold.woff') format('woff'), url('font/pxbold.ttf') format('truetype'), url('font/pxbold.svg#proxima_nova_rgregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'pxreg'; src: local('☺'); src: url('font/pxreg.eot'); src: url('font/pxreg.eot?#iefix') format('embedded-opentype'), url('font/pxreg.woff') format('woff'), url('font/pxreg.ttf') format('truetype'), url('font/pxreg.svg#proxima_nova_rgregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'pxthin'; src: local('☺'); src: url('font/pxthin.eot'); src: url('font/pxthin.eot?#iefix') format('embedded-opentype'), url('font/pxthin.woff') format('woff'), url('font/pxthin.ttf') format('truetype'), url('font/pxthin.svg#proxima_nova_rgregular') format('svg'); font-weight: normal; font-style: normal; } #header i { font-style:normal;} @media only screen and (min-width: 1001px) { body {background: #000 url(../img/home.jpg) center center no-repeat; -webkit-background-size: cover; /*for webKit*/ -moz-background-size: cover; /*Mozilla*/ -o-background-size: cover; /*opera*/ background-size: cover; /*generic*/ } } @media only screen and (max-width: 1000px) { #site a { text-align:center; width:100%;} #bg { display:none; visibility:hidden} } @media only screen and (max-width: 610px) { #header p.left { display:none;} #site a { display:none;} #loader-bg { background-color:#161616 !important;} #loader { background-color:#161616 !important;} } @media only screen and (max-width: 380px) { #header p strong, #header p span { display:none;} span.spacer { display:none;} #header i { display:block; font-style:normal;} #header p.right { text-align:center; clear:both; display:block; float:none;} } @media only screen and (max-width: 9000px) { #work li { width:6.25%;} } @media only screen and (max-width: 4150px) { #work li { width:11.111%;} } @media only screen and (max-width: 2800px) { #work li { width:14.28571%;} } @media only screen and (max-width: 2250px) { #work li { width:20%;} } @media only screen and (max-width: 1800px){ #banner2 h2 { padding:8% 10% 6%;} #work li { width:25%;} } @media only screen and (max-width: 1356px){ #work li { width:33.3333%;} } @media only screen and (max-width: 960px) { #work li { width:50%;} } @media only screen and (max-width: 465px) { #work li { width:100%;} }