/* Resets
------ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
display: block;
}
.clear:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
a img{border:0}
a,input,select,textarea{outline:none}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Typography presets
------------------ */
body {
font: 16px/24px Georgia, serif;
}
/* Selection colours (easy to forget) */
::selection {background: rgb(255,255,158);}
::-moz-selection {background: rgb(255,255,158);}
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}
/* Default Layout
-------------------------------------------------------------------------------
*/
body {
background:#0f0f0f;
-webkit-text-size-adjust: 100%;-moz-text-size-adjust:100% /* Stops Mobile Safari from auto-adjusting font-sizes */
}
.page-wrap{clear: both; width:100%; margin:0 auto; overflow:hidden}
.slider-wrap{clear:both;width:100%;background:#fffffe;position:relative;z-index:1;}
.overlay-layer{
width:100%;
height:100%;
background:url(../images/fancybox_overlay.png) repeat;
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);
zoom: 1;
position:absolute;
left:0;
top:0;
z-index:20;
display:table-cell;
display:none
}
.overlay-layer:nth-child(n) {
filter: none;
}
.overlay-contents{
width:690px;
margin:0 auto;
padding-top:90px;
color:#fff;
position:relative
}
.overlay-contents h1{padding:10px 0 5px;font:300 50px/56px 'Exo', sans-serif,Arial;}
.overlay-contents h2{padding:0;font:700 20px/26px 'Exo', sans-serif,Arial;}
.overlay-contents p{clear:both;padding:5px 0 10px;font-size:16px;line-height:22px}
.overlay-link{display:block;float:left;width:auto;margin-top:10px;font:18px/26px 'Exo', sans-serif,Arial;;color:#cad638;text-decoration:none}
.overlay-link:hover{text-decoration:underline}
.overlay-close-btn{width:26px;height:26px;background:url(../images/fancybox_sprite.png) no-repeat 0 -200px;position:absolute;top:85px;right:0;cursor:pointer}
.header-wrap{position:relative;clear:both; min-height:160px; background:#0f0f0f url(../images/header-bg.jpg) repeat center top; z-index:6}
.logo-menu-block{ float:left; padding-left:100px}
.logo-link{float:left; width:201px; height:125px; margin:22px 43px 0 0}
.logo-link img{float:left; margin:0}
.logo-menu-block nav{float:left; margin-top:119px}
.logo-menu-block ul{float:left; /*position:absolute;*/ left:360px; /*top:120px;*/ margin:0; padding:0; list-style:none}
.logo-menu-block ul li{float:left; margin-right:27px; height:41px; font:normal 16px/22px 'Exo', sans-serif,Arial;}
.logo-menu-block ul li a{float:left; text-decoration:none; color:#b4b4b4}
.logo-menu-block ul li a:hover,.logo-menu-block ul li.active a,.logo-menu-block ul li.dropdown a,.logo-menu-block ul li.dropdown a:hover{color:#00b1b0}
.logo-menu-block li ul{position:absolute; width:100%; height:48px; padding-top:18px; background:url(../images/subnav-bgh.png) repeat-x 0 0; left:-99999px; top:157px; z-index:9}
.logo-menu-block li.dropdown ul{left:0}
.logo-menu-block li.dropdown li a{color:#b4b4b4}
.logo-menu-block li li{height:auto}
.logo-menu-block li li:first-child{margin-left:345px}
.social-block{float:right; padding-right:100px; margin-top:108px}
.social-block a{float:left; width:35px; height:34px; margin-right:9px; background:url(../images/social-links.png) no-repeat 0 0; text-indent:-99999px}
.social-block a:first-child{margin-left:0}
.social-block a.facebook{background-position:-43px 0}
.social-block a.pinterest{background-position:-87px 0}
.social-block a.vimeo{background-position:-131px 0; margin-right:0}
.social-block a:hover{background-position:0 -44px;}
.social-block a.facebook:hover{background-position:-43px -44px}
.social-block a.pinterest:hover{background-position:-87px -44px}
.social-block a.vimeo:hover{background-position:-131px -44px; margin-right:0}
.common-wrap{position:relative; clear:both; width:100%; *overflow:hidden}
#gallery-wrap{clear:both; width:100%; background:#FFFFFE; overflow:hidden}
#gallery-wrap{padding-bottom:1px; overflow:hidden}
/*
#gallery-wrap > div.itemSelector{position:relative; float:left; width:476px; height:477px; margin:1px 1px 0 1px}
#gallery-wrap > div.itemSelector p{clear:both; margin:30px 0 0; padding:0 42px; font:normal 28px/34px 'Exo', sans-serif,Arial}
#gallery-wrap > div.itemSelector em{clear:both; margin:20px 0 0; font-style:normal; font:normal 22px/26px 'Exo', sans-serif,Arial; padding:0 42px; color:#00b1b0; display:block}
#gallery-wrap > div.itemSelector em span{display:block; font-weight:normal}
#gallery-wrap > div.itemSelector img{float:left; width:100%; height:auto; margin:0}
.overlay{position:absolute;width:476px;height:477px;font-family:'Exo', sans-serif,Arial; background:rgba(0,0,0,.7);left:0;top:0; display:none; cursor:pointer;z-index:6}
*/
.mid-container{clear:both; padding-bottom:85px; background:#FFFFFE}
.left-col{float:left; width:415px; margin:60px 0 0 100px; display:inline;}
.work-left{
width:876px;
}
.left-col h1,.left-col h2,.left-col h3{clear:both; margin:0; font:normal 30px/34px 'Exo', sans-serif,Arial}
.left-col h2{margin-top:30px; font:normal 16px/20px 'Exo', sans-serif,Arial; text-transform:uppercase}
.left-col h3{margin-top:25px; font:bold 14px/18px 'Exo', sans-serif,Arial; color:#000}
.left-col em{clear:both; margin:3px 0 0; font:normal 20px/24px 'Exo', sans-serif,Arial; color:#00b1b0; display:block}
.left-col p,.left-col address{clear:both; margin:11px 0 0; font:normal 14px/18px 'Exo', sans-serif,Arial; color:#666; display:block}
.left-col address{font-style:normal}
.left-col blockquote{clear:both; margin:25px 0 0; font:italic 14px/18px 'Exo', sans-serif,Arial; color:#666; display:block}
.left-col blockquote span{margin-top:8px; font-style:normal; display:block}
.left-col ul{clear:both; margin:8px 0 0; padding:0; list-style:none}
.left-col ul li{clear:both; padding-left:9px; background:url(../images/bullet.gif) no-repeat 0 6px; font:normal 14px/18px 'Exo', sans-serif,Arial; color:#666}
.left-col ul li a{text-decoration:none; color:#666}
.left-col ul li a:hover{text-decoration:underline}
.left-col ul.list-set-1{margin:25px 0 0}
.left-col ul.list-set-1 li{font-weight:bold; background:none; padding-left:0}
.contact-form-wrap{float:left; width:100%; margin-top:15px;}
.contact-form-wrap form{margin:0; padding:0}
.contact-form-wrap input.txt,.contact-form-wrap textarea{float:left; width:396px; height:50px; padding:15px 19px; margin-top:6px; font:normal 14px/20px 'Exo', sans-serif,Arial; color:#000; background:#e7e7e7; border:none}
.contact-form{clear:both; width:400px; margin-top:10px; overflow:hidden;}
.contact-form-wrap textarea{height:80px; width:396px;}
.contact-form-wrap input.submit{float:right; width:79px; height:14px; margin-top:22px; background:url(../images/btn-submit.gif) no-repeat 0 0; border:none; cursor:pointer}
.mid-col{float:left; width:400px; margin:42px 0 0 61px; display:inline;}
.mid-col img{float:left; width:100%; height:auto; margin:22px 0 0}
.right-col{float:left; width:180px; margin:63px 0 0 64px; display:inline;}
.right-col ul{clear:both; margin:0; padding:0; list-style:none}
.right-col ul li{float:left; width:162px; padding:15px 0 14px 18px; margin-top:1px; font:normal 14px/18px 'Exo', sans-serif,Arial; background:#e7e7e7}
.right-col ul li a{text-decoration:none; color:#000}
.right-col ul li a:hover{text-decoration:underline}
.right-col h2{padding:10;padding-left:15;font:700 20px/26px 'Exo', sans-serif,Arial}
.footer-wrap{clear:both; min-height:247px; background:#0f0f0f url(../images/footer-bg.jpg) repeat center top}
.footer-wrap em{float:left; padding-left:100px; margin-top:50px; font:normal 30px/43px 'Exo', sans-serif,Arial; color:#FFF}
.get-in-touch{float:left; padding-right:19px; margin-top:5px; text-decoration:none; color:#FFF; font:bold 13px/16px 'Exo', sans-serif,Arial; background:url(../images/bullet-arrow.png) no-repeat right 0}
.get-in-touch:hover{text-decoration:underline}
.footer-wrap cite{float:right; padding-right:100px; margin-top:62px; font:normal 12px/16px 'Exo', sans-serif,Arial; color:#999}
/* Mobile Layout: 320px and 480px and more but less than or equal to 767px.
----------------------------------------------------------------------------------
*/
@media only screen and (min-width: 320px) and (max-width: 479px) {
.slide-caption{ width:auto; max-width:100%; font-size:13px; font-family:'Exo',sans-serif,Arial; line-height:18px; height:auto; padding:5px 15px 30px; background:#fff; overflow:hidden;}
.slide-caption a{ width:auto; padding:0 18px 5px 0; font-size:13px; font-family:'Exo',sans-serif,Arial; line-height:18px;}
.flex-control-nav{ float:none; clear:both; padding:0 15px; width:auto; left:30%; max-width:100%; height:16px;}
.logo-menu-block{ float:none; padding:0; margin:0 auto;}
.logo-link{ margin:0 auto; padding:15px 0 25px; width:201px; display:block; float:none;}
.logo-menu-block nav{ float:none; clear:both; margin:0; height:150px; padding:93px 10px 0;}
.logo-menu-block ul{ left:auto; min-width:320px; margin:0 auto; float:none;}
.logo-menu-block ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.logo-menu-block ul li{float: left; font: 14px/20px 'Exo',sans-serif,Arial; height: 41px; margin:0; padding:0 10px; position:relative;}
.logo-menu-block li li:first-child{ margin:0;}
.logo-menu-block li ul{min-width:160px; width:160px; top:30px; padding:7px 10px; background:#000; height:auto;}
.logo-menu-block li ul li{ float:none; height:auto; padding:2px 0; font:normal 12px/20px 'Exo', sans-serif,Arial;}
.logo-menu-block li ul li a{float:none;}
.social-block{ margin:0 auto; width:180px; float:none; clear:both; height:190px; padding:95px 0 0;}
.ri-grid ul li p{font-size:38%; font-size:50%\9;font-size:50%\0/; line-height:120%;}
.ri-grid ul li em{font-size:38%; font-size:50%\9;font-size:50%\0/; line-height:110%;}
.footer-wrap em{ margin:0; padding:50px; font:normal 20px/26px 'Exo', sans-serif,Arial;}
.footer-wrap cite{ display:block; clear:both; margin:0; float:none; padding:15px 50px;}
}
/* Wide Mobile Layout: 480px.
------------------------------------------------------------
*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.slide-caption{ width:auto; max-width:100%; font-size:13px; font-family:'Exo',sans-serif,Arial; line-height:18px; height:auto; padding:5px 15px 30px; background:#fff; overflow:hidden;}
.slide-caption a{ width:auto; padding:0 18px 5px 0; font-size:13px; font-family:'Exo',sans-serif,Arial; line-height:18px;}
.flex-control-nav{ float:none; clear:both; padding:0 15px; width:auto; left:30%; max-width:100%; height:16px;}
.logo-menu-block{ float:none; padding:0; margin:0 auto;}
.logo-link{ margin:0 auto; padding:15px 0 25px; width:201px; display:block; float:none;}
.logo-menu-block nav{ float:none; clear:both; margin:0; height:150px; padding:93px 10px 0;}
.logo-menu-block ul{ left:auto; min-width:320px; margin:0 auto; float:none;}
.logo-menu-block ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.logo-menu-block ul li{float: left; font: 14px/20px 'Exo',sans-serif,Arial; height: 41px; margin:0; padding:0 10px; position:relative;}
.logo-menu-block li li:first-child{ margin:0;}
.logo-menu-block li ul{min-width:160px; width:160px; top:30px; padding:7px 10px; background:#000; height:auto;}
.logo-menu-block li ul li{ float:none; height:auto; padding:2px 0; font:normal 12px/20px 'Exo', sans-serif,Arial;}
.logo-menu-block li ul li a{float:none;}
.social-block{ margin:0 auto; width:180px; float:none; clear:both; height:190px; padding:95px 0 0;}
.ri-grid ul li p{font-size:38%; font-size:50%\9;font-size:50%\0/; line-height:120%;}
.ri-grid ul li em{font-size:38%; font-size:50%\9;font-size:50%\0/; line-height:110%;}
.footer-wrap em{ margin:0; padding:50px; font:normal 20px/26px 'Exo', sans-serif,Arial;}
.footer-wrap cite{ display:block; clear:both; margin:0; float:none; padding:0 50px 20px;}
}
/* Tablet Layout: 768px.
-----------------------------------------------------------------
*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.slide-caption{ width:auto; max-width:100%; height:auto; background:#fff; overflow:hidden; padding-left:15px;}
.logo-menu-block{ float:none; padding:0; margin:0 auto;}
.logo-link{ margin:0 auto; padding:15px 0 25px; width:201px; display:block; float:none;}
.logo-menu-block nav{ float:none; margin:0; height:90px; padding:65px 0 0; width:100%;}
.logo-menu-block ul{ left:auto; min-width:320px; margin:0 auto; float:none; width:100%; position:relative;}
.logo-menu-block ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.logo-menu-block ul li{float: left; font: 14px/20px 'Exo',sans-serif,Arial; height: 41px; margin:0; padding:0 10px;}
.logo-menu-block li li:first-child{ margin:0;}
.logo-menu-block li ul{ min-width:160px; width:100%; top:30px; padding:7px 10px; background:#000; height:auto;}
.logo-menu-block li ul li{ height:auto; font:normal 12px/20px 'Exo', sans-serif,Arial;}
.social-block{ margin:0 auto; width:180px; float:none; height:91px; padding:50px 0;}
.ri-grid ul li p{font-size:38%; font-size:50%\9;font-size:50%\0/; line-height:120%;}
.ri-grid ul li em{font-size:38%; font-size:50%\9;font-size:50%\0/; line-height:110%;}
.footer-wrap em{ margin:0; padding:50px; font:normal 20px/26px 'Exo', sans-serif,Arial;}
.footer-wrap cite{ display:block; clear:both; margin:0; float:none; padding:0 50px 20px;}
}
/* Retina media query.
Overrides styles for devices with a
device-pixel-ratio of 2+, such as iPhone 4.
----------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
}
/*
box-sizing:
==========================
*/
/*
div.header-wrap {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*/
/* Mobile Layout: 320px and 480px and more but less than or equal to 767px.
----------------------------------------------------------------------------------
*/
@media only screen and (min-width: 320px) and (max-width: 479px) {
.left-col {margin-left:10px;width:auto}
.contact-form{width:auto;}
.contact-form input.txt{width:285px}
.contact-form-wrap input.submit{margin-right:10px; clear:left;}
.contact-form textarea{width:285px}
.mid-col{width:auto; margin-left:10px; margin-right:10px;}
.right-col{margin-left:10px;}
.work-left p img{width:100%; height:auto;}
}
/* Wide Mobile Layout: 480px.
------------------------------------------------------------
*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.left-col {margin-left:10px;width:auto}
.contact-form{width:auto;}
.contact-form input.txt{width:445px}
.contact-form-wrap input.submit{margin-right:10px; clear:left;}
.contact-form textarea{width:445px}
.mid-col{width:auto; margin-left:10px; margin-right:10px;}
.right-col{margin-left:10px;}
.work-left p img{width:100%; height:auto;}
}
/* Tablet Layout: 768px.
-----------------------------------------------------------------
*/
/* MD's Tweaks for images in left column
MD's Tweaks for images in left column
MD's Tweaks for images in left column
MD's Tweaks for images in left column
-----------------------------------------------------------------
*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.left-col {margin-left:10px;width:auto}
.mid-col{width:auto; margin-left:10px; margin-right:10px;}
.right-col{margin-left:10px;}
}
@media only screen and (max-width: 767px) {
.mid-container{
padding:15px;
}
.left-col{
display:block;
float:none;
margin:0;
width:100%;
}
.mid-col {
display: block;
float: none;
margin: 0;
width: 100%;
}
.right-col {
display: block;
margin: 20px 0 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.mid-container{
padding:15px;
}
.left-col{
display:block;
float:none;
margin:0;
width:100%;
}
.mid-col {
display: block;
float: none;
margin: 0;
width: 100%;
}
.right-col {
display: block;
margin: 20px 0 0;
}
}