/*
Theme Name:Avanti
Author:CODE8
Author URI:http://code8.cz/
Description:The 2013 theme for Avanti Architects
Version:1.0
License:GNU General Public License
License URI:license.txt
Tags:custom, fixed, parker-lepla

*/

/*-------------------------------------------
		Reset
-------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
html {font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-weight:400}
html,body{clear:both;float:left;width:100%}
html,button,input,select,textarea{font-family:"Lato",Arial,Helvetica,sans-serif}
body{font-size:1em;line-height:1.7}
object,img{vertical-align:middle;border:0}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
address{font-style:normal}
caption,th,td{text-align:left;font-weight:300}
blockquote:before,blockquote:after,q:before,q:after{content:""}
strong{font-weight:700}
img{border:0px none;-ms-interpolation-mode:bicubic}
small {font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
audio,canvas,video {display:inline-block;*display:inline;*zoom:1}
/* FORMS */
button,input,select,textarea{font-size:100%;margin:0;vertical-align:middle}
button,input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;overflow:visible}
textarea{resize:vertical;overflow:auto;vertical-align:top}
input[type=checkbox],input[type=radio]{box-sizing:border-box;height:13px;padding:0;width:13px}
fieldset{border:0;padding:0;margin:0}
label{cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}


/*-------------------------------------------
		Self-clearing Floats
-------------------------------------------*/
.clearfix:after,#wrapper:after,#main:after{clear:both;content:'.';height:0;width:0;visibility:hidden;display:block}
.clearfix,#wrapper,#main{zoom:1}

/*-------------------------------------------
		Base
-------------------------------------------*/
h1,h2,h3,h4,h5,p,table,ol,ul,dl,menu{margin:0 0 6px}
h1{font-size:28px;font-weight:300}
h2{font-size:20px;font-weight:300}
h3{font-size:18px;font-weight:300}
h4{font-size:14px;font-weight:700}
h5{font-size:13px;font-weight:700}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
a{color:#333;text-decoration:none}
a:hover{text-decoration:underline}
a:hover,a:active{color:#000;outline:0}
a:focus {outline:thin dotted}
::-moz-selection{background:#655c5d;color:#fff;text-shadow:none}
::selection{background:#655c5d;color:#fff;text-shadow:none}

/*-------------------------------------------
		Helper classes
-------------------------------------------*/
.inline{display:inline-block !important;zoom:1;*display:inline}
.fl{float:left !important}
.fr{float:right !important}
.tar{text-align:right}
.tac{text-align:center}
.tal{text-align:left}
.hide{display:none}
.show{display:block}
.noMargin{margin:0!important}
.noPaddingTop{padding-top:0!important}
.marginTop30{margin-top:30px!important}
.paddingTop42{padding-top:42px!important}

/*-------------------------------------------
		Layout
-------------------------------------------*/
body{background:#FFF;color:#333;font-size:12px;line-height:1.7;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#page{clear:both;float:left;width:100%}
#main.home,
body.home #page,
body.category #page,
body.tag #page,
body.search #page,
body.page-id-3296 #page,
body.page-template-page-templatesour-practice-php #page{
background:#ffffff;
background:-moz-linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, #F3EEEA 50%, #F3EEEA 50%, #FFF 100%) repeat scroll 248px 0 transparent;
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop(50%,#f3eeea), color-stop(100%,#f3eeea));
background:-webkit-linear-gradient(left,  #ffffff 0%,#ffffff 50%,#f3eeea 50%,#f3eeea 50%,#FFF 100%)  repeat scroll 248px 0 transparent;
background:-o-linear-gradient(left,  #ffffff 0%,#ffffff 50%,#f3eeea 50%,#f3eeea 50%,#FFF 100%)  repeat scroll 248px 0 transparent;
background:-ms-linear-gradient(left,  #ffffff 0%,#ffffff 50%,#f3eeea 50%,#f3eeea 50%,#FFF 100%)  repeat scroll 248px 0 transparent;
background:linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, #F3EEEA 50%, #F3EEEA 50%, #FFF 100%) repeat scroll 248px 0 transparent;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3eeea',GradientType=0 );
} 
body.no-sidebar #page{background:#FFF none !important}

@media (max-width: 767px) {
    #main.home{
        background: none;
    }
}

#wrapper{clear:both;float:left;width:100%;padding:0 0 60px}
#main{float:left;width:100%;clear:both;margin-top:120px}
#main.home{margin-top:0;position: relative;padding-top: 30px;margin-top: -30px;}
#primary{float:left;width:100%;margin:0 0 0 0}
#primary.contact{padding-top:30px}
#content{float:left;width:700px;margin:0 20px 0 0}
#content.noCarousel,
#content.noCarousel + #sidebar{padding-top:30px !important}
#sidebar{float:right;width:196px;padding:79px 0 0 24px}
.col-940{width:940px;margin:0 auto}
.grid-100{clear:both;float:left;width:100%}
.grid-50{float:left;width:50%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.grid-25{float:left;width:25%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
#leftpanel{display:none}

/*-------------------------------------------
        General
-------------------------------------------*/
#sidebar h2{margin-bottom:16px}
#content h1{line-height:1;font-weight:300;text-align:right;border-bottom:1px solid #cacaca;padding:27px 0;text-transform:uppercase}
#content.work h1,
#content.now h1,
#content.studio h1,
#content.search h1{margin-bottom:30px}
.blackLabel{background:#000;color:#FFF;padding:0 6px;text-transform:uppercase;font-size:18px;font-weight:400}
.showMobile,
.hideSidebar{display:none}
.hideMobile{display:block}
.pageContent{width:100%;float:left;clear:both}
.pageContent h3 .blackLabel{font-size:14px}
.pageContent h3{margin-bottom:26px}

/*-------------------------------------------
		Headers
-------------------------------------------*/
#header{width:100%;height:120px;background:#FFF;position:fixed;z-index:100}
#header .logo{background:url(img/logo-header.png) no-repeat;display:block;width:198px;height:55px;line-height:999px;overflow:hidden;margin:10px 0 10px -32px;float:left}

/*-------------------------------------------
		Navigation
-------------------------------------------*/
#nav{clear:both;float:left;width:100%;height:auto;background:#000;height:45px}
#nav > div{height:45px}
#nav ul.navMenu{display:inline-block;padding:0;margin:0 0 0 180px}
#nav ul.navMenu li{float:left;border-left:1px solid #000;border-right:1px solid #000;text-align:center}
#nav ul.navMenu li a{padding:11px 28px;clear:both;float:none;color:#FFF;line-height:20px;text-decoration:none;font-size:14px;font-weight:400;text-transform:uppercase;outline:0 none;display:inline-block}
#nav ul.navMenu li.search-item a,
#nav ul.navMenu li.menu-item-296 a,
#nav ul.navMenu li.menu-item-300 a{display:block;padding:0;line-height:999px;overflow:hidden;background:url(img/menu-search.png) no-repeat 50% 11px;height:45px}
#nav ul.navMenu li.search-item,
#nav ul.navMenu li.menu-item-296,
#nav ul.navMenu li.menu-item-300{margin-left:-20px}
#nav ul.navMenu li.search-item a:hover,
#nav ul.navMenu li.menu-item-296 a:hover,
#nav ul.navMenu li.menu-item-300 a:hover,
#nav ul.navMenu li.clicked.search-item a,
#nav ul.navMenu li.clicked.menu-item-296 a,
#nav ul.navMenu li.clicked.menu-item-300 a,
#nav ul.navMenu li.current-menu-item.search-item a,
#nav ul.navMenu li.current-menu-item.menu-item-296 a,
#nav ul.navMenu li.current-menu-item.menu-item-300 a{background-position:50% -27px}

#nav ul.navMenu li.clicked a:after{background:#1aee8e}

#nav ul.navMenu > li:first-child > a:hover,
#nav ul.navMenu > li.clicked:first-child a,
#nav ul.navMenu > li.current-menu-item:first-child > a,
#nav ul.navMenu > li.current-menu-parent:first-child > a,
#leftpanel > ul.panelNav > li:nth-child(2) > a{color:#1aee8e}
#nav ul.navMenu > li:first-child a:hover:after,
#nav ul.navMenu > li.clicked:first-child a:after,
#nav ul.navMenu > li.current-menu-item:first-child a:after,
#nav ul.navMenu > li.current-menu-parent:first-child a:after{background:#1aee8e}

#nav ul.navMenu > li:nth-child(2){width:158px}
#nav ul.navMenu > li:nth-child(2) > a:hover,
#nav ul.navMenu > li.clicked:nth-child(2) a,
#nav ul.navMenu > li.current-menu-item:nth-child(2) > a,
#nav ul.navMenu > li.current-menu-parent:nth-child(2) > a,
#leftpanel > ul.panelNav > li:nth-child(3) > a{color:#a1a9f4}
#nav ul.navMenu > li:nth-child(2) a:hover:after,
#nav ul.navMenu > li.clicked:nth-child(2) a:after,
#nav ul.navMenu > li.current-menu-item:nth-child(2) a:after,
#nav ul.navMenu > li.current-menu-parent:nth-child(2) a:after{background:#a1a9f4}

#nav ul.navMenu > li:nth-child(3){width:auto}
#nav ul.navMenu > li:nth-child(3) > a:hover,
#nav ul.navMenu > li.clicked:nth-child(3) a,
#nav ul.navMenu > li.current-menu-item:nth-child(3) > a,
#nav ul.navMenu > li.current-menu-parent:nth-child(3) > a,
/*#nav ul.navMenu > li.current-category-ancestor:nth-child(3) a,*/
#leftpanel > ul.panelNav > li:nth-child(4) > a{color:#ff1a54}
#nav ul.navMenu > li:nth-child(3) a:hover:after,
#nav ul.navMenu > li.clicked:nth-child(3) a:after,
#nav ul.navMenu > li.current-menu-item:nth-child(3) a:after,
/*#nav ul.navMenu > li.current-category-ancestor:nth-child(3) a:after,*/
#nav ul.navMenu > li.current-menu-parent:nth-child(3) a:after{background:#ff1a54}

#nav ul.navMenu > li:nth-child(4){width:160px}
#nav ul.navMenu > li:nth-child(4) > a:hover,
#nav ul.navMenu > li.clicked:nth-child(4) a,
#nav ul.navMenu > li.current-menu-item:nth-child(4) a,
#leftpanel > ul.panelNav > li:nth-child(5) a,
.activeMobileItem.yellow{color:#faf05f}
#nav ul.navMenu > li:nth-child(4) a:hover:after,
#nav ul.navMenu > li.clicked:nth-child(4) a:after,
#nav ul.navMenu > li.current-menu-item:nth-child(4) a:after{background:#faf05f}
#nav ul.navMenu > li.border{border-left:1px solid #444;border-right:1px solid #444;padding-bottom:1px;background:#000}

.panelNav .sub-menu{display: none}
.panelNav .current-menu-item > a{text-decoration: underline}

#nav .navMenu > li.menu-item-has-children:hover .sub-menu{display: block;}
#nav .navMenu > li > .sub-menu{display: none;position: absolute;top: 120px;left: 0;width: 100%;background-color: #000;padding: 0;text-align: left;padding: 26px 30px;margin: 0;}
#nav .navMenu > li > .sub-menu:before{content: '';float: left;width: calc(50vw - 480px);height: 20px;}
#nav .navMenu > li > .sub-menu > li{width: 180px;padding: 0;text-align: left;border: 0;border-right:1px solid #444;padding-left: 40px;padding-right: 20px;min-height: 380px;position: relative;}
#nav .navMenu > li > .sub-menu li:first-child{padding-left: 0;width: 180px;}
#nav .navMenu > li > .sub-menu li:last-child{border-right: 0;}
#nav .navMenu > li > .sub-menu a:after{display: none;}
#nav .navMenu > li > .sub-menu a:hover{text-decoration: underline;color: #fff;}
#nav .navMenu > li > .sub-menu > li > a{font-size:16px;text-transform:uppercase;margin:0 0 18px;font-weight:400;padding: 0;display: block;}
#nav .navMenu > li > .sub-menu .sub-menu{padding: 0;margin: 0;}
#nav .navMenu > li > .sub-menu .sub-menu li{float: none;display: block;padding: 0;border: 0;width: 100%;text-align: left;margin-bottom: 6px;}
#nav .navMenu > li > .sub-menu .sub-menu li a{color:#FFF;font-size:13px;font-weight:400;padding: 0;text-transform: none;}

#nav .navMenu > li > .sub-menu .sub-menu .sub-menu {
    position: absolute !important;
    left: 260px;
    top: 0;
    width: 300px;
    display: none;
}
#nav .navMenu > li > .sub-menu .sub-menu .sub-menu a.back{
    padding: 3px 8px;
}

#leftpanel > ul.panelNav.status > li > a{color:#fff !important;}

#nav.status{text-align: right;}
@media (max-width: 767px) {
    #nav.status .right{display: none;}
}
#nav.status .right a{
    padding: 11px 14px;
    clear: both;
    float: none;
    color: #FFF;
    line-height: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    outline: 0 none;
    display: inline-block;
}#nav.status .right a:last-child{padding-right: 0;}
.userInfo{
    float: right;
    text-align: right;
    text-transform: uppercase;
    margin-top: 40px;
}
@media (max-width: 767px) {
    .userInfo{
        float: none;
        margin-top: 0;
        margin-bottom: 10px;
        padding-left: 10px;
        text-align: left;
        display: inline-block;
    }
}
.userInfo .sep{
    display: inline-block;
    margin: 0 10px;
}
.userInfo a{
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    outline: 0 none;
    display: inline-block;
}

/*LANGUAGES*/
#nav ul.lang{display:inline-block;padding:0;margin:0;float:right}
#nav ul.lang li{float:left}
#nav ul.lang li a{padding:11px 12px;clear:both;float:left;color:#FFF;line-height:20px;text-decoration:none;font-size:14px;font-weight:400;text-transform:uppercase}
#nav ul li a:after{content:"";display:block;width:100%;height:3px}
#nav ul li a:hover:after,
ul li.menu-item-18 a:after,
ul.lang li.clicked > a:first-child:after{background:#FFF}

/*SUBNAV*/
.subNav{color:#FFF;position:fixed;top:120px;width:100%;float:left;background:repeat-x /*url(img/submenu.png) 0 0*/ #000;z-index:99;border-top:1px solid #444;padding:26px 0;display:none;max-height:528px;overflow:hidden}
.subNav .subCol{margin:20px 0 0 200px}
/*.subNav{top:120px;display:block}*/
.subNav .col{width:240px;float:left;border-right:1px solid #444;padding:0 0 0 44px;margin-right:-1px;min-height:380px;position:relative;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.subNav .col:first-child{padding-left:6px;width:200px}
.subNav .col:last-child,
.subNav .col-50:last-child{border-width:0px}
.subNav ul.big .col{border-width:1px !important;padding-left:44px !important}
.subNav ul{margin:0;padding:0;position:relative}
.subNav ul.big a{text-transform:uppercase;font-size:16px;font-weight:400}
.subNav ul.big.low a{text-transform:none;font-size:16px;font-weight:400}
.subNav ul.big li{margin: 0}
.subNav ul li{margin:0 0 6px;padding:0}
.subNav a{color:#FFF;font-size:13px;font-weight:300}
.subNav a:hover{text-decoration:underline}
.subNav li.active a{font-weight:400}
.subNav h3,
.subNav h3 a{font-size:16px;text-transform:uppercase;margin:0 0 18px;font-weight:400}
.subNav .col-50{width:50%;float:left;border-right:1px solid #444;padding:0 0 0 36px;margin-right:-1px;min-height:310px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.subNav .col-50:first-child{padding-right:70px}
.subNav .col-50:last-child{padding-left:70px}
.subNav #textarea{padding:6px 3px 6px;margin:0;background:#FFF;border:1px solid #525252;resize:none;min-height:26px;line-height:15px;height:auto;width:325px;overflow:hidden;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.subNav #seachMenuSubmit{background:#FFF url(img/input-search.png) no-repeat 0 0;border:0 none;width:18px;height:17px;text-indent:-9000px;margin:-43px 0 0;position:relative;left:-46px;z-index:110;float:right}
.subNav .taField{margin:0 0 20px}
.subNav ul.wp-tag-cloud li{float:left;width:50%}

.submenu-languages{margin:0;float:left;padding:0}

.subNav .sub-menu{position:absolute !important;left:237px;top:0;width:300px;display: none;}
.sub-menu .back{display:inline-block;padding:3px 8px;border:1px solid #666;margin:20px 0 0}
.activeMobileItem{display:none}

#menu-en-ir li.current-menu-item a:after{background:#fff}

/*-------------------------------------------
        Foot
-------------------------------------------*/
#footer{clear:both;float:left;width:100%;background:#000;padding:30px 0;margin:0 0}
#footer .footerLogo{margin-left:-22px;float:left}
#footer ul.bottomMenu{display:inline-block;padding:0;margin:0 0 0 48px}
#footer ul.bottomMenu li{float:left}
#footer ul.bottomMenu li a{padding:11px 28px;clear:both;float:left;color:#FFF;line-height:20px;text-decoration:none;font-size:14px;font-weight:300;text-transform:uppercase}

#footer ul.lang{display:inline-block;padding:0;margin:0;float:right}
#footer ul.lang li{float:left}
#footer ul.lang li a{padding:11px 12px;clear:both;float:left;color:#FFF;line-height:20px;text-decoration:none;font-size:14px;font-weight:300;text-transform:uppercase}

#footer ul li a:after{content:"";display:block;width:100%;height:3px}
#footer ul li a:hover:after,
#footer ul li.current-menu-item a:after{background:#FFF}

/*-------------------------------------------
    Work / Education
-------------------------------------------*/

/* Colors */
.page-id-3296 .carouselNav .pagination a:hover,
.page-id-3296 .carouselNav .pagination a.active,
.home .carouselNav .pagination a:hover,
.home .carouselNav .pagination a.active,
.work .carouselNav .pagination a:hover,
.work .carouselNav .pagination a.active{background:#00ec81}
.work .workDetails .workTestimonial .green,
.activeMobileItem.green{color:#00d474}

/* Section header */
#primary .sectionHeader{clear:both;float:left;width:100%;padding:0 0 30px;border-bottom:1px solid #cacaca;margin:0 0 30px}
#primary.contact .sectionHeader{padding-bottom:0;border:0}

#primary .sectionHeader h1{font-size:28px;font-weight:300;text-transform:uppercase;margin:0}
#primary .sectionHeader strong{font-size:18px;text-transform:uppercase}
.pageOptions{float:right}
.pageOptions .social{text-align:right}
.pageOptions .social ul{margin:0;padding:0;display:inline-block}
.pageOptions .social ul li{float:left;margin:0 0 0 6px}
.pageOptions .social ul li a{width:26px;height:26px;line-height:999px;float:left;overflow:hidden;background:url(img/sprite.png) no-repeat}
.pageOptions .social ul li.fb a{background-position:0px -31px}
.pageOptions .social ul li.tw a{background-position:-31px -31px}
.pageOptions .social ul li.li a{background-position:-62px -31px}
.pageOptions .social ul li.mail a{background-position:-93px -31px}
#primary .sectionHeader .pageOptions .breadcrumbs{text-transform:uppercase;margin:7px 0 10px;text-align:right}
#primary .sectionHeader .pageOptions .breadcrumbs a{color:#333}
#primary .sectionHeader .pageOptions .breadcrumbs a:hover{text-decoration:underline}

/* Content */
.workDetails{clear:both;float:left;width:100%;margin:0 0 30px;font-weight:400}
.workDetails .workDesc{float:left;width:460px;margin:0 20px 0 0}
.workDetails .workDesc.col-75{width:650px;float:left;clear:both;margin-right:40px}
.workDetails .workDesc.col-100{float:left;width:100%;margin:0}
.workDetails .workDesc .tags{text-transform:uppercase}
.workDetails .workDesc .tags a:hover{text-decoration:underline}
.workDetails .workDesc.col-100 .theContent{width:100%;float:left;clear:both;margin-bottom:20px;
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;
    -moz-column-gap:30px; /* Firefox */
    -webkit-column-gap:30px; /* Safari and Chrome */
    column-gap:30px;
}
.workDetails .workTestimonial{float:left;width:220px;margin:0 20px 0 0}
.workDetails .workTestimonial .strapline{font-size:20px;font-weight:300;text-transform:uppercase}
.workDetails .workLocation{float:left;width:220px}
.workDetails .workLocation strong{min-width:85px;display:inline-block}
.workDetails .workLocation .mapArea{border-top:1px solid #cacaca;padding:22px 0 0;margin:18px 0 0}
.workDetails .workLocation #map{width:220px; height:200px; }

.workRelated{clear:both;float:left;width:100%}
.workRelated h5{margin:50px 0 -34px;font-size:13px}
.workRelated .relatedWrap{clear:both;float:left;width:100%}
.workRelated .relatedBox{float:left;width:220px;border-top:1px solid #cacaca;padding:45px 0 30px;margin:0 0 0 20px}
.workRelated .relatedBox:first-child{margin-left:0}
.workRelated .relatedBox h3{font-size:18px;font-weight:300;text-transform:uppercase;line-height:1.1;margin:0 0 2px}
.workRelated .relatedBox strong{font-size:13px;text-transform:uppercase}

.workMore{clear:both;float:left;width:100%;border-top:1px solid #cacaca;border-bottom:1px solid #cacaca;padding:30px 0 0}
.workMore .next{background:#6d6e71;color:#FFF;float:right;line-height:18px;padding:0 6px;font-size:14px}
.workMore .blackLabel{line-height:18px;font-size:14px;display:inline-block}
.workMore .moreWrap{clear:both;float:left;width:100%}
.workMore .moreBox{float:left;width:220px;padding:12px 0 30px;margin:0 0 0 20px}
.workMore .moreBox:nth-child(4n+1){margin-left:0}
.workMore .moreBox h3{font-size:18px;font-weight:300;text-transform:uppercase;line-height:1.1;margin:0 0 2px}
.workMore .moreBox h3.twoLines{overflow: hidden;height: 40px;}
.workMore .moreBox strong{font-size:13px;text-transform:uppercase}
.workMore .moreBox strong.twoLines{overflow: hidden;height: 40px;display: block;}
.workMore .moreBox img{margin:0 0 20px}

.exploreCircles{width:100%;float:left;clear:both;padding:30px 0 0;margin:0 0 70px}
.exploreCircle{width:143px;height:143px;border-radius:143px;float:left;margin:0 0 16px 16px;overflow:hidden;position:relative}
.exploreCircle img{border-radius:143px}
.exploreCircle:nth-child(6n+1){margin-left:0}
.exploreCircle .hoverBox{background:rgba(0,0,0,.6);position:absolute;top:0px;height:100%;width:100%;text-align:center;color:#FFF;font-size:13;font-weight:400;display:block;opacity:0;top:0;left:0;border-radius:143px;
    -webkit-transition:opacity .4s ease-in-out;
    -moz-transition:opacity .4s ease-in-out;
    -ms-transition:opacity .4s ease-in-out;
    -o-transition:opacity .4s ease-in-out;
    transition:opacity .4s ease-in-out;
}

@media (max-width: 766px) {
    .loadNewRelatedPosts .moreBox:nth-child(n+4){
        display: none;
    }

}
@media (min-width: 767px) {
    .loadNewRelatedPosts{
        overflow: hidden;
        height: 360px;
    }
}
.loadNewRelatedPosts .scrollable{
    -webkit-transition: transform .25s ease-in-out;
       -moz-transition: transform .25s ease-in-out;
        -ms-transition: transform .25s ease-in-out;
         -o-transition: transform .25s ease-in-out;
            transition: transform .25s ease-in-out;
}

.exploreCircle .hoverBox:hover{
    opacity:1;
    -webkit-transition:opacity .4s ease-in-out;
    -moz-transition:opacity .4s ease-in-out;
    -ms-transition:opacity .4s ease-in-out;
    -o-transition:opacity .4s ease-in-out;
    transition:opacity .4s ease-in-out;
}
.exploreCircle .hoverBox span{display:inline-block;margin:65px 0 0;border-bottom:2px solid #FFF;padding:0 0 2px}
.exploreContent{width:100%;float:left;clear:both;margin:30px 0 0}
.exploreContent em{font-family:'Crimson Text', serif;font-size:24px;color:#000;border-bottom:2px solid #000}
.exploreContent h2{width:74%;margin:10px 0 20px}
.exploreContent h2 span{font-size:48px}
.exploreContent h3 span{font-size:48px;color:#ffee4a}
.exploreTags{width:100%;float:left;clear:both;padding:30px 0;border-top:1px solid #cacaca;margin:20px 0 0}
.exploreTags ul{width:100%;float:left;clear:both;padding:0;margin:0}
.exploreTags ul li{float:left;width:25%}
.exploreTags ul li a:hover{text-decoration:underline}

/*-------------------------------------------
        People
-------------------------------------------*/
.peopleDetail{width:100%;float:left;clear:both;padding:20px 0 30px;border-bottom:1px solid #cacaca;margin-bottom:30px;position:relative}
.peopleDetail .next{background:#6d6e71;color:#FFF;float:right;line-height:18px;padding:0 6px;font-size:14px;margin-top:30px;position:absolute;bottom:15px;right:0}
.peopleCircles .name{text-transform:uppercase;display:inline-block}
.peopleDetail .mainImage{float:left;width:310px;overflow:hidden;margin:0 20px 0 0}
.peopleDetail .peopleHeader{float:left;width:610px;position:relative;border-bottom:1px solid #cacaca;padding:0 0 18px;margin:0 0 26px}
.peopleDetail .peopleHeader h1{font-size:30px;text-transform:uppercase;margin:0}
.peopleDetail .peopleHeader strong{font-size:24px;text-transform:uppercase}
.peopleDetail .peopleHeader .short{font-size:17px;text-transform:uppercase;margin:12px 0}
.peopleDetail .peopleHeader .pageOptions{float:right}
/*.peopleDetail .peopleHeader .pageOptions .social{text-align:right;position:absolute;bottom:0px;right:0;margin-bottom:30px}
.peopleDetail .peopleHeader .pageOptions .social ul{margin:0;padding:0;display:inline-block}
.peopleDetail .peopleHeader .pageOptions .social ul li{float:left;margin:0 0 0 6px}
.peopleDetail .peopleHeader .pageOptions .social ul li a{width:24px;height:24px;line-height:999px;float:left;overflow:hidden;background:url(img/sprite.png) no-repeat}
.peopleDetail .peopleHeader .pageOptions .social ul li.fb a{background-position:0px -30px}
.peopleDetail .peopleHeader .pageOptions .social ul li.tw a{background-position:-29px -30px}
.peopleDetail .peopleHeader .pageOptions .social ul li.li a{background-position:-58px -30px}
.peopleDetail .peopleHeader .pageOptions .social ul li.mail a{background-position:-87px -30px}*/
.peopleDetail .peopleHeader .pageOptions .breadcrumbs{text-transform:uppercase;margin:7px 0 10px;width:170px;text-align:right}
.peopleDetail .peopleHeader .pageOptions .breadcrumbs a{color:#333}

.peopleDetails{width:610px;float:left}
.peopleDetails .peopleDesc{width:355px;float:left;margin:0 30px 0 0;font-size:13px;font-weight:300}
.peopleDetails .workTestimonial{width:225px;float:left}
.peopleDetails .workTestimonial .viola{font-size:20px;color:#a1a9f3;font-weight:300;text-transform:uppercase}
.peopleCircles{width:100%;float:left;clear:both;padding:0 0}
.peopleCircles .peopleCircle{float:left;width:143px;font-weight:300;margin:0 0 20px 16px}
.peopleCircles .peopleCircle:nth-child(6n+1){margin-left:0}
.peopleCircles .peopleCircle .img{float:left;width:143px;height:143px;border-radius:143px;overflow:hidden; }
.peopleCircles .peopleCircle img{border-radius:143px}
.peopleCircles .peopleCircle .name{text-transform:uppercase;font-size:12px;}
.peopleCircles .peopleCircle .role{text-transform:uppercase;font-size:12px;font-weight:400}
.roleBar .blackLabel{float:left;font-size:14px;margin-bottom:30px}
.roleBar .next{background:#6d6e71;color:#FFF;float:right;line-height:18px;padding:0 6px;font-size:14px}

/*-------------------------------------------
        Now
-------------------------------------------*/
.now .breadcrumbs{text-align:right;width:100%;float:left;clear:both;margin:20px 0;text-transform:uppercase}

/* Colors */
.now .carouselNav .pagination a:hover,
.now .carouselNav .pagination a.active{background:#ff1a54}
.now .workDetails .workTestimonial .red,
.activeMobileItem.red{color:#ff1a54}

/*-------------------------------------------
        Studio
-------------------------------------------*/

/* Colors */
.studio .carouselNav .pagination a:hover,
.studio .carouselNav .pagination a.active{background:#A1A9F4}
.studio .workDetails .workTestimonial .purple,
.activeMobileItem.purple{color:#A1A9F4}
.studio .active{text-decoration:underline}

.studioContent h3{margin-bottom:18px}
.studioContent h3 .blackLabel{font-size:14px;padding:1px 6px}
.studioContent .careerTitle{font-size:13px;text-transform:uppercase}
.studioContent .careerItem{margin-bottom:18px}
.studioContent .grid-25,
.studioContent .grid-50{padding-left:30px}
.studioContent .grid-25:first-child,
.studioContent .grid-50:first-child{padding-left:0}
.studioContent h4{font-size:13px;margin:24px 0 6px;text-transform:uppercase;font-weight:400}
.studioContent.border{border-bottom:1px solid #cacaca;padding:0 0 20px;margin:0 0 30px}
.studioContent .country .active a{text-decoration:underline}
.studioContent .grid-50.country{padding:0;text-align:right}
.studioContent .fourColumns,
.peopleCircles.fourColumns{width:100%;float:left;clear:both;
    column-fill:balance;
    columns:4 auto;
    column-gap:30px;
    -moz-column-fill:balance;
    -moz-columns:4 auto;
    -moz-column-gap:30px;
    -webkit-column-fill:balance;
    -webkit-columns:4 auto;
    -webkit-column-gap:30px;    
}
.ie7 .peopleCircles.fourColumns p,
.ie8 .peopleCircles.fourColumns p,
.ie9 .peopleCircles.fourColumns p{float:left;width:25%}
/*.studioContent .fourColumns .awardProject{float:left;width:190px;margin:0 20px 0 20px}*/
.studioContent .fourColumns .awardProject{display:inline-block;margin:0 0 20px}
/*.studioContent .fourColumns .awardProject:nth-child(4n+1){margin-left:0}*/
.studioContent .fourColumns .awardProject .hr{display:inline-block;margin-bottom:20px}
.studioContent .awards h4{font-size:13px;margin:0 0 12px}
.studioContent .countries{border-top:1px solid #CACACA;width:100%;float:left;clear:both;padding-top:26px;margin-top:22px}

/*Contact*/
.contactContent{width:100%;float:left;clear:both}
.contactContent h2{font-size:26px;text-transform:uppercase}
.contactContent p{font-size:13px;margin-bottom:12px}
.contactContent .office{width:460px;float:left;margin-left:20px;border-top:1px solid #cacaca;padding:30px 0;min-height:420px}
.contactContent .office h2 + .grid-50{padding-right:20px}
.contactContent .office:first-child{margin-left:0px}
.contactContent .mapArea{width:460px;height:250px;margin:0 0 30px}

/*-------------------------------------------
        Carousels
-------------------------------------------*/

.carouselRoot li .label{font-family:'Crimson Text', serif;font-size:20px;background:#000;color:#FFF;line-height:30px;padding:0 6px;font-style:italic;text-decoration:underline;display:inline-block;margin:120px 0 4px;text-transform:lowercase}
.carouselRoot li h2{font-size:46px;color:#FFF;line-height:60px;padding:0;margin:0px 0 6px;max-width:500px;text-transform:uppercase}
.carouselRoot li h2 span{background:#000}
.carouselRoot li .btnMore{background:url("img/more-info.png") no-repeat 0 0;width:125px;height:125px;float:right;line-height:999px;overflow:hidden;position:absolute;right:30px;top:160px}

.carouselRoot{clear:both;float:left;width:5500em;margin:0;padding:0;position:absolute}
.carouselRoot li{float:left}

/*homepage*/
.hpCarousel{clear:both;float:left;width:100%;height:620px;position:relative;overflow:hidden;margin:120px 0 0}
.noHpCarousel#main{margin-top:160px}
.hpCarousel .slideLink{display: block;height: 100%;}
.hpCarousel .hpCarouselWrap{position:relative}
.hpCarousel .carouselRoot{height:540px;background:#EFEFEF}
.hpCarousel .carouselRoot li{width:100%;height:540px;background-repeat:no-repeat;background-position:0 0;background-size:cover;display:none}

/*page*/
.pageCarousel{clear:both;float:left;width:100%;width:940px;overflow:hidden;position:relative;height:440px;margin-bottom:10px}
.pageCarousel .carouselRoot{height:380px;background:#EFEFEF}
.pageCarousel .carouselRoot li{width:940px;background-repeat:no-repeat}
.pageCarousel.empty{height:20px}
.pageCarousel.single{height:420px}

/*page big*/
.pageBigCarousel{clear:both;float:left;width:100%;width:940px;overflow:hidden;position:relative;height:540px}
.pageBigCarousel .carouselRoot{height:480px;background:#EFEFEF}
.pageBigCarousel .carouselRoot li{width:940px}
.pageBigCarousel.empty{height:20px}
.pageBigCarousel.single{height:500px}
.pageBigCarousel .carouselRoot .fullAreaLink{height:480px}

.postThumbnail{width:100%;float:left;clear:both;margin:0 0 20px;overflow:hidden}
.postThumbnail.margins{margin:20px 0 70px}
.postThumbnail img{min-width:940px}
/*work details*/
.workDetailCarousel{clear:both;float:left;width:100%;width:940px;overflow:hidden;position:relative;height:640px}
.workDetailCarousel.empty{height:20px}
.workDetailCarousel.single{height:600px}
.workDetailCarousel .carouselRoot{height:580px}
.workDetailCarousel:not(.single) li img{cursor:pointer}
/*now*/
.carouselRoot .fullAreaLink{width:100%;float:left;clear:both;height:380px;overflow:hidden;line-height:999px}
/*navigation*/
.carouselNav{clear:both;float:left;width:100%;position:relative;text-align:center;height:60px;overflow:hidden;position:absolute;bottom:0;left:0}
.carouselNav.hp{height:80px;width:100%;margin:0;float:left;text-align:center}
.carouselNav.hp .col-940{position:relative}
/*.carouselNav.page{height:80px}*/
.carouselNav .prev{width:22px;height:30px;background:url("img/sprite.png") no-repeat 5px 5px;overflow:hidden;line-height:999px;position:absolute;top:15px;left:-5px}
.carouselNav .next{width:22px;height:30px;background:url("img/sprite.png") no-repeat -14px 5px;overflow:hidden;line-height:999px;position:absolute;top:15px;right:-5px}
.carouselNav.hp .prev{top:25px}
.carouselNav.hp .next{top:25px}
.carouselNav .pagination{margin:23px 0 0;padding:0;display:inline-block}
.carouselNav.hp .pagination{margin-top:32px}
.carouselNav .pagination a{display:inline-block;margin:0 6px;border-radius:8px;background:#bdbfbf;line-height:999px;width:8px;height:8px;overflow:hidden}

/*-------------------------------------------
        FEED - TAG List, Homepage
-------------------------------------------*/
.feedList{clear:both;float:left;width:100%}
.feedList .feedPost{border-bottom:1px solid #cacaca;clear:both;float:left;margin:0 0 30px;padding:0 0 34px;position:relative;width:100%}
.feedList .feedPost .postContent{float:left;margin:0 20px 0 0;width:220px}
.feedList .feedPost .postContent h2{font-size:26px;font-weight:300;line-height:25px;margin:-4px 0 1px;text-transform:uppercase}
.feedList .feedPost .postContent h2 a{outline:0}
.feedList .feedPost .postContent strong{font-size:16px;font-weight:700;text-transform:uppercase}
.feedList .feedPost .postContent .perex{border-top:1px solid #cacaca;clear:both;float:left;margin:26px 0 0;padding-top:26px;width:100%}
.feedList .feedPost .postContent .perex p:first-child{margin-bottom:30px}
.feedList .feedPost .postContent .perex .more{border-bottom:2px solid #000;bottom:34px;float:right;font-weight:700;left:148px;position:absolute;text-transform:uppercase}
.feedList .feedPost .postContent .perex .more:hover{text-decoration:none}
.feedList .feedPost .postItemImage{float:right;width:460px}
.feedList .loadMore{display:block;font-family:'Crimson Text', serif;font-size:14px;font-style:italic;margin:-18px 0 0;text-align:center;text-decoration:underline;text-transform:lowercase}

/*-------------------------------------------
        FEATURED - Sidebar
-------------------------------------------*/
.featuredPost{clear:both;float:left;margin:0 0 20px;width:100%}
.featuredPost h3{color:#FFF;font-size:14px;font-weight:300;line-height:19px;margin:0 0 8px;text-transform:uppercase}
.featuredPost h3 a,
.featuredPost h3 a:hover{color:#FFF}
.featuredPost h3 span{background:#000;padding:0 6px}
.featuredPost .img{border-radius:170px;height:170px;margin-top:14px;overflow:hidden;width:170px}
.featuredPost .img .bgimg{display: block;background-repeat: no-repeat;-webkit-background-size: contain;background-size: cover;width: 100%;height: 100%;}
.featuredPost .img img{height:170px;min-width:170px;width: auto;}
.featuredPost .more{color:#333;font-family:'Crimson Text', serif;font-style:italic}


.twoColumns{width:100%;float:left;clear:both;
    column-fill:balance;
    columns:2 auto;
    column-gap:30px;
    -moz-column-fill:balance;
    -moz-columns:2 auto;
    -moz-column-gap:30px;
    -webkit-column-fill:balance;
    -webkit-columns:2 auto;
    -webkit-column-gap:30px;    
}
#primary.page{padding-top:30px}

.sitemap{font-size:18px}
.sitemap{list-style-type:none}
.sitemap ul li{list-style-type:decimal}
.sitemap ul li li{list-style-type:disc}
.sitemap ul li li li{list-style-type:square}
.sitemap ul li li li li{list-style-type:disc}
.sitemap ul li li li li li{list-style-type:square}

/*-------------------------------------------
        SEARCH
-------------------------------------------*/
.search-form .screen-reader-text{font-size:16px;display:block;margin:12px 0}
.search-form .search-field{font-size:16px;min-width:240px;height:30px;border:1px solid #cacaca;padding:0 6px}
.search-form .search-submit{font-size:16px;padding:0 20px;background:#000;color:#FFF;border:1px solid #000;height:32px;font-weight:200;margin:0 6px}


/* ==========================================================================
   Responsive design.
   Tablet portrait.
   ========================================================================== */

@media screen and (min-width:768px) and (max-width:959px){
    .showMobile{display:none}
    .hideMobile{display:block}

    #main.home,
    body.home #page,
    body.category #page,
    body.tag #page,
    body.search #page,
    body.page-template-page-templatesour-practice-php #page{
    background:#ffffff;
    background:-moz-linear-gradient(to left, #F3EEEA 0%, #F3EEEA 27%, #FFF 27%, #FFF 100%) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, right top, left top, color-stop(0%,#F3EEEA), color-stop(26%,#F3EEEA), color-stop(26%,#FFF), color-stop(100%,#FFF));
    background:-webkit-linear-gradient(right,  #F3EEEA 0%, #F3EEEA 26%, #FFF 26%, #FFF 100%)  repeat scroll 0 0 transparent;
    background:-o-linear-gradient(right,  #F3EEEA 0%, #F3EEEA 27%, #FFF 27%, #FFF 100%)  repeat scroll 0 0 transparent;
    background:-ms-linear-gradient(right,  #F3EEEA 0%, #F3EEEA 27%, #FFF 27%, #FFF 100%)  repeat scroll 0 0 transparent;
    background:linear-gradient(to left, #F3EEEA 0%, #F3EEEA 27%, #FFF 27%, #FFF 100%) repeat scroll 0 0 transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3eeea',GradientType=0 );
    }    
    /*general*/
    .col-940{width:100%;padding:0 50px;margin:0;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    #content{width:74%;margin:0;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    #sidebar{width:26%;padding:79px 0 0 34px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box; 
    }
    /*header*/
    #header .logo{margin-left:0}
    /*nav*/
    #nav ul.navMenu{margin:0}
    #nav ul.navMenu li{width:auto !important}
    #nav ul.navMenu li:first-child a{margin-left:0}
    #nav ul.navMenu li.search-item a{margin-left:0}
    #nav ul.navMenu li.search-item{margin-left:50px}

    .subNav .col{width:23.5% !important;padding:0 6px 0 30px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box; 
    }
    .subNav .col:first-child{padding:0 10px 0 0;width:28%}
    /*footer*/
    #footer .footerLogo{margin:0 20px 0 0}
    #footer ul.bottomMenu{margin:0}
    #footer ul.bottomMenu li{width:auto !important}
    #footer ul.bottomMenu li a{padding-left:0;padding-right:0;margin-left:30px;text-align:left}
    /*carousel*/
    .home .carouselNav .prev{left:50px}
    .home .carouselNav .next{right:50px}
    .pageCarousel{width:100%;height:440px}
    .pageCarousel .carouselRoot li{background-size:100% auto}
    .pageBigCarousel{width:100%;height:520px}
    /*.pageBigCarousel li,*/
    .pageBigCarousel .carouselRoot{height:460px}
    .pageBigCarousel .carouselNav.page{height:60px}
    .pageBigCarousel li{background-size:100% auto}
    .workDetailCarousel{width:100%}
    .workDetailCarousel li img{width:100%;height:auto}
    .workDetailCarousel.single,
    .workDetailCarousel.single .carouselRoot{height:520px;width:100%;position:static}
    .workDetailCarousel.single img{width:100%;height:auto}
    .workDetailCarousel.single, .workDetailCarousel.single .carouselRoot{height:auto;margin-bottom:20px}
    .postThumbnail img{min-width:100%;width:100%;height:auto}
    .pageCarousel.now li{background-position:right}
    /*posts feed*/
    .feedList .feedPost .postContent .perex{padding-top:16px;margin-top:16px}
    .feedList .feedPost .postContent{width:35%;margin:0;padding-right:20px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .feedList .feedPost .postItemImage{width:65%}
    .feedList .feedPost .postItemImage img{width:100%;height:auto}
    .feedList .feedPost .postContent h2{word-wrap:break-word;font-size:20px}
    .feedList .feedPost .postContent strong{font-size:14px}
    .feedList .feedPost .postContent .perex{position:relative}
    .feedList .feedPost .postContent .perex .more{left:auto;right:10px;bottom:0}
    /*project*/
    .workDetails .workDesc{width:50%;margin-left:0;margin-right:0;padding-right:20px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box}
    .workDetails .workTestimonial{padding-right:20px}
    .workDetails .workTestimonial,
    .workDetails .workLocation{width:25%;margin-left:0;margin-right:0;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box}
    .workDetails .workLocation #map{width:100%}
    .workRelated .relatedBox{width:23%;margin-left:2.666%}
    .workMore .moreBox{width:23%;margin-left:2.666%}
    .workMore .moreBox img{width:100%;height:auto}
    
    /*explore*/
    .exploreCircle{margin:0 0 18px 20px}
    .exploreCircle:nth-child(6n+1){margin-left:20px}
    .exploreCircles{margin-bottom:30px}
    /*contact*/
    .contactContent .office{width:48%;margin:0}
    .contactContent .office:first-child{width:48%;margin-right:4%}
    .contactContent .mapArea{width:100%}
    /*people*/
    .peopleDetail .mainImage{width:30%;margin-right:3%}
    .peopleDetail .mainImage img{width:100%;height:auto}
    .peopleDetail .peopleHeader,
    .peopleDetails{width:67%}
    .peopleDetails .peopleDesc{width:67%;margin-right:3%}
    .peopleDetails .workTestimonial{width:30%}
}

@media screen and (min-width:768px) and (max-width:800px){
    .col-940{padding:0 30px}
    #footer ul.bottomMenu li a{margin-left:20px}
    .home .carouselNav .prev{left:30px}
    .home .carouselNav .next{right:30px}
    .subNav #textarea{width:290px}
    .subNav #seachMenuSubmit{left:35px}
}

/* ==========================================================================
   Responsive design.
   Mobile Landscape.
   ========================================================================== */

@media screen and (min-width:320px) and (max-width:767px){
    .showMobile{display:block}
    .hideMobile{display:none}
    .hideSidebar{display:block;float:right;background:#FFF;margin-right:-30px}
    .hideSidebar a{display:inline-block;padding:0 30px 0 12px;font-size:16px;line-height:32px;text-decoration:none}
    .activeMobileItem{display:block}
    .subNav.search-item{position:absolute;top:156px !important}
    .subNav.search-item p{display:none}
    .subNav.search-item .col-50:first-child{padding-top:0}

    #nav ul.lang{position:relative;z-index:10}
    #nav ul.lang.on{position:relative;z-index:10;background:#FFF}
    #nav ul.lang.on a{color:#000;border-top:10px solid #000;border-bottom:6px solid #000;padding-top:10px;padding-bottom:10px}
    #nav ul li a:hover:after, ul li.menu-item-18 a:after, ul.lang li.clicked > a:first-child:after{background:#FFF}

    body{font-size:14px}
    body.home #page,
    body.category #page,
    body.tag #page,
    body.page-template-page-templatesour-practice-php #page{background:none transparent}    
    /*general*/
    .col-940{width:100%;padding:0;margin:0;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    #wrapper{padding-bottom:30px}
    #content{width:100%;margin:0;padding:42px 30px 20px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    #content.frontpage{padding-top:0}
    #sidebar{width:100%;margin:0;padding:30px;background:#f3eeea;display:none;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box; 
    }
    #primary{width:100%;margin:0;padding:30px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box; 
    }
    #main{margin-top:157px}
    /*format*/
    .blackLabel{font-size:22px;padding-top:4px;;padding-bottom:4px}
    .studioContent .fourColumns, 
    .peopleCircles.fourColumns,
    .twoColumns{
    column-fill:balance;
    columns:1 auto;
    column-gap:30px;
    -moz-column-fill:balance;
    -moz-columns:1 auto;
    -moz-column-gap:30px;
    -webkit-column-fill:balance;
    -webkit-columns:1 auto;
    -webkit-column-gap:30px;         
    }
    .postThumbnail.margins,
    .postThumbnail{margin-bottom:0px}
    .pageContent .grid-25{width:100%;float:left;clear:both;margin-bottom:30px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box; 
    }
    /*header*/
    #header{position:absolute}
    #header .col-940{padding:0 10px}
    #header .logo{margin-left:0;background-image:url(img/logo-header-mobile.png);height:65px;width:251px}
    /*footer*/
    #footer{padding:0;line-height:50px}
    #footer .top{margin:0}
    #footer .top a{color:#FFF;font-weight:400;float:right;margin:0 20px}
    #footer .top a:after{content:"";display:inline-block;background:url(img/sprite.png) no-repeat -41px -7px;width:17px;height:11px;float:right;margin:21px 0 0 12px }
    /*nav*/
    .toggleMenu{width:50px;height:72px;float:left;background:url(img/mobile-hamburger.png) no-repeat 50% 50%;overflow:hidden;line-height:999px;margin:0 10px 0 -10px}
    .activeMobileItem{width:auto;height:72px;float:left;font-size:18px;font-weight:400;line-height:72px}
    #nav{position:relative}
    #nav ul.navMenu{margin: 0}
    #nav .navMenu li{display:none}
    #nav .navMenu li:nth-child(5){display: block;position:absolute;right:175px}
    #nav .navMenu li.border{border-color:#000 !important;}
    #nav{height:72px}
    #nav ul.lang li a{font-size:18px;padding-top:22px;padding-bottom:22px;line-height:26px}
    /*carousel*/
    .hpCarousel{margin-top:157px}
    .hpCarousel .hpCarouselWrap{min-height:380px}
    .hpCarousel .carouselRoot li{background-position:center}
    .pageCarousel{width:100%;height:440px}
    .pageCarousel .carouselRoot li{background-size:100% auto}
    .workDetailCarousel,.pageBigCarousel{width:100%;height:320px}
    .workDetailCarousel .carouselNav,
    .pageBigCarousel .carouselNav{background:transparent}
    .workDetailCarousel .carouselRoot,
    .pageBigCarousel .carouselRoot{height:260px}
    .workDetailCarousel.single{height:auto}
    .workDetailCarousel.single .carouselRoot{width:100%;position:static;height:auto}
    .workDetailCarousel .carouselRoot img,
    .pageBigCarousel .carouselRoot img{height:auto;width:100%}
    .carouselNav .prev{left:30px}
    .carouselNav .next{right:30px}
    .carouselRoot .col-940{padding:0 10px}
    .carouselRoot li h2{font-size:42px}
    .carouselRoot li .label{margin-top:25px}
    .carouselRoot li .btnMore{top:auto;bottom:30px;right:30px;left:auto}
    /* .carouselNav{background:#f3eeea} */
    .carouselNav.white{background:transparent}
    .pageBigCarousel .carouselRoot li{background-size:cover}
    .pageBigCarousel .carouselRoot .fullAreaLink{height:260px}
    .pageBigCarousel .carouselNav.page{height:60px}

    .postThumbnail img{min-width:100%;width:100%;height:auto}
    /*feed*/
    .featuredPost{position:relative}
    .featuredPost .excerpt.attach{float:right;position:absolute;padding-left:200px;left:0px;top:48px}
    .featuredPost h3{margin-bottom:20px;font-size:16px}
    /*featured*/
    .feedList .feedPost .postItemImage{float:left;width:100%;margin:0 0 30px}
    .feedList .feedPost .postItemImage img{width:100%;height:auto}
    .feedList .feedPost .postContent{float:left;width:100%;margin:0}
    .feedList .feedPost .postContent .perex .more{float:none;position:static}
    .feedList .feedPost .postContent .perex p:first-child{margin-bottom:20px}

    /*leftpanel*/
    #leftpanel{position:absolute;left:-280px;top:0;width:280px;min-height:100%;background:black;display:block}
    #page{position:absolute;left:0;top:0}
    #leftpanel ul{margin:0;padding:0}
    #leftpanel ul li a{font-size:20px;color:#FFF;display:block}
    #leftpanel ul li a:hover{background:#1a1a1a;text-decoration:none}
    #leftpanel > ul > li > a{border-bottom:1px solid #3e3e3e;line-height:38px;padding:0 0 0 15px;font-weight:400;text-transform:uppercase}
    #leftpanel .col{border-bottom:1px solid #3e3e3e}
    #leftpanel .col h3{font-size:18px;font-weight:400;color:#FFF;margin:0;padding:0;line-height:36px}
    #leftpanel .col h3:not(a){padding-left:35px}
    #leftpanel .col h3 a{padding-left:0}
    #leftpanel .sub-menu{padding-left: 15px;}
    /* #leftpanel .col h3 a{padding-left:0} */
    #leftpanel .col a{font-size:18px;line-height:26px;display:block;padding:5px 35px}
    /*search*/
    .subNav .col-50{display:none;min-height:10px;border:none}
    .subNav .col-50:first-child{width:100%;padding:30px 30px 0;display:block;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box; 
    }
    .subNav #seachMenuSubmit{left:-12px}
    .subNav #textarea,
    .text-core .text-wrap{width:100%}

    /*project*/
    .pageOptions{width:100%;float:left;clear:both;position:relative}
    .pageOptions .social{min-height:61px}
    .pageOptions .social ul li{margin:0;position:absolute}
    .pageOptions .social ul li a{width:61px;height:61px}
    .pageOptions .social ul li.fb{left:0}
    .pageOptions .social ul li.tw{left:30px;margin-left:25%}
    .pageOptions .social ul li.li{left:30px;margin-left:50%}
    .pageOptions .social ul li.mail{right:0}
    .pageOptions .social ul li.fb a{background-position:0px -97px}
    .pageOptions .social ul li.tw a{background-position:-80px -97px}
    .pageOptions .social ul li.li a{background-position:-157px -97px}
    .pageOptions .social ul li.mail a{background-position:-236px -97px}
    #primary .sectionHeader .pageOptions .breadcrumbs,
    .pageOptions .social{text-align:left}
    .workDetails .workTestimonial,
    .workDetails .workDesc,
    .workDetails .workLocation,
    .workRelated .relatedBox,
    .workMore .moreBox,
    .workDetails .workDesc.col-75{width:100%;margin:0}
    .workDetails .workLocation #map{width:100%;min-height:300px }
    .workRelated{border-top:1px solid #CACACA}
    .workRelated h5{margin:30px 0 0px}
    .workRelated .relatedBox{border-top:none;padding:18px 0}
    .workMore{border-bottom:none}
    .workMore .next{display:none}
    .workMore .moreBox img{width:100%;height:auto}
    /*contact*/
    .contactContent .office{width:100%;margin:0;word-wrap:break-word;min-height:50px}
    .contactContent .mapArea{width:100%}
    .contactContent #map4{display:none}
    /*carrer*/
    .studioContent .grid-25, .studioContent .grid-50{width:100%;margin-left:0;margin-right:0;padding:0;margin-bottom:20px}
    /*international*/
    .studioContent .grid-50.country{text-align:left}
    .studioContent .grid-50.country{margin-bottom:0}
    /*people*/
    .roleBar .next,
    .peopleDetail .next{display:none}
    .peopleDetail{padding-top:0}
    .peopleDetail .mainImage img{width:100%;height:auto}
    .peopleDetail .peopleHeader,
    .peopleDetails,
    .peopleDetails .peopleDesc,
    .peopleDetails .workTestimonial,
    .peopleDetail .mainImage{width:100%;margin-left:0;margin-right:0}
    .peopleDetail .peopleHeader .pageOptions .breadcrumbs{width:100%;margin:0;text-align:left}
    .peopleHeader .pageOptions .social{min-height:80px}
    .peopleHeader .pageOptions .social ul li.tw{left:0}
    .peopleHeader .pageOptions .social ul li.li{left:30%}
    .peopleHeader .pageOptions .social ul li.mail{left:60%}
    .peopleDetails .workTestimonial br{display:none}
    .peopleDetails .peopleDesc,
    .peopleDetail .mainImage{margin-bottom:20px}
    /*studio*/
    .workDetails .workDesc.col-100 .theContent{
        column-fill:balance;
        columns:1 auto;
        column-gap:30px;
        -moz-column-fill:balance;
        -moz-columns:1 auto;
        -moz-column-gap:30px;
        -webkit-column-fill:balance;
        -webkit-columns:1 auto;
        -webkit-column-gap:30px; 
        }
    /*now*/
   #primary.now .sectionHeader .pageOptions .breadcrumbs{width:100%;float:none;margin-bottom:0}
   /*explore*/
   .exploreCircle:nth-child(6n+1){margin:0}
   .exploreCircle{margin:0 12px 12px 0 !important}
   .exploreCircles{margin-bottom:0}
   .exploreContent h2 span,
   .exploreContent h3 span{font-size:28px}
   .exploreTags ul li{width:100%;margin:0}
}

/* ==========================================================================
   Responsive design.
   Mobile Portrait.
   ========================================================================== */

@media screen and (min-width:320px) and (max-width:479px){
    /*general*/
    #primary{padding-left:10px;padding-right:10px}

    .featuredPost .excerpt.attach{float:left;width:100%;position:static;padding:0}
    /*leftpanel*/
    /*#page.on .toggleMenu{margin-left:-25px}*/
    /*nav*/
    .submenu-languages{display:none}
    #nav #menu-main-menu li:nth-child(5){right:75px}
    /*carousel*/
    .carouselRoot li h2{font-size:31px;line-height:42px}
    .carouselRoot li .btnMore{bottom:20px;right:20px;width:110px;height:110px;background-size:110px auto}
    /*content*/
    #content h1{padding-top:0}
    #content,
    #sidebar{padding-left:10px;padding-right:10px}
    /*project*/
    .pageOptions .social ul li.fb{left:0}
    .pageOptions .social ul li.tw{left:25%;margin-left:0}
    .pageOptions .social ul li.li{left:50%;margin-left:0}
    .pageOptions .social ul li.mail{left:75%;right:auto}
    /*footer*/
    #footer{padding-bottom:54px}
}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection:h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background:transparent !important;
        color:#000 !important; /* Black prints faster:h5bp.com/s */
        box-shadow:none !important;
        text-shadow:none !important;
    }

    a,
    a:visited {
        text-decoration:underline;
    }

    a[href]:after {
        content:" (" attr(href) ")";
    }

    abbr[title]:after {
        content:" (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content:"";
    }

    pre,
    blockquote {
        border:1px solid #999;
        page-break-inside:avoid;
    }

    thead {
        display:table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside:avoid;
    }

    img {
        max-width:100% !important;
    }

    @page {
        margin:0.5cm;
    }

    p,
    h2,
    h3 {
        orphans:3;
        widows:3;
    }

    h2,
    h3 {
        page-break-after:avoid;
    }
}


.videoWrap{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 61.70%;
}
.videoWrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* WP MEMBERS */
#wpmem_login *{
    box-sizing: border-box;
}
.twoColumns #wpmem_login {
    column-fill:balance;
    columns:1 auto;
    column-gap:0;
    -moz-column-fill:balance;
    -moz-columns:1 auto;
    -moz-column-gap:0;
    -webkit-column-fill:balance;
    -webkit-columns:1 auto;
    -webkit-column-gap:0; 
}
#wpmem_login {
    max-width: 440px;
    font-size: 15px !important;
}
#wpmem_login fieldset {
    margin: 20px 0 !important;
}
#wpmem_login legend{display: none;}
#wpmem_login input.buttons{
    border: none;
    background-color: #fff;
    border: 1px solid #3e3e3e;
    width: 160px;
    text-align: center;
    padding: 8px;
    text-transform: uppercase;
}
#wpmem_reg .button_div, #wpmem_login .button_div,
#wpmem_login .div_text, #wpmem_reg .div_text, #wpmem_reg .div_textarea, #wpmem_reg .div_select, #wpmem_reg .div_checkbox, #wpmem_reg .div_multiselect, #wpmem_reg .div_multicheckbox, #wpmem_reg .div_radio, #wpmem_reg .div_image, #wpmem_reg .div_file, #wpmem_reg .div_url{
    width: 100% !important;
}
#wpmem_reg input[type="text"], #wpmem_reg input[type="password"], #wpmem_reg input[type="email"], #wpmem_reg input[type="url"], #wpmem_reg textarea, #wpmem_login input[type="text"], #wpmem_login input[type="password"]{
    box-sizing: border-box;
}
.logged-in .staffContent{
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid #cacaca;
   
}
table.staff{
    width: 100%;
}
table.staff th{font-weight: 700;}
table.staff td,
table.staff th{
    padding: 8px 12px;
    border: 1px solid #c1c1c1;
}
.logged-in .staffContent, .staffContent, table.staff {font-size:15px!important;}