/* 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;-webkit-appearance:none;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:before,:after{box-sizing:inherit}.cf{clear: both;}.cf:after{content:"";display:table;clear:both}.table{display:table;}.td{display:table-cell;vertical-align:middle;}.vc{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}.flex-wrapper{width:100%;text-align:justify;}.flex-wrapper:after{content:'';display:inline-block;width:100%;}.flex{display:inline-block;}


/* Fonts 

@font-face {font-family: 'px';font-style: normal;font-weight: normal;src: url('../fonts/proximanova-regular-webfont.eot') format("embedded-opentype"), url('../fonts/proximanova-regular-webfont.ttf') format("truetype"), url('../fonts/proximanova-regular-webfont.woff') format("woff"), url('../fonts/proximanova-regular-webfont.svg') format("svg");}
@font-face {font-family: 'px';font-style: normal;font-weight: bold;src: url('../fonts/proximanova-semibold-webfont.eot') format("embedded-opentype"), url('../fonts/proximanova-semibold-webfont.ttf') format("truetype"), url('../fonts/proximanova-semibold-webfont.woff') format("woff"), url('../fonts/proximanova-semibold-webfont.svg') format("svg");}
@font-face {font-family:'museo-slab';src:url('../fonts/museo_slab_300-webfont.eot');src:url('../fonts/museo_slab_300-webfont.eot?#iefix') format("embedded-opentype"),url('../fonts/museo_slab_300-webfont.woff') format("woff"),url('../fonts/museo_slab_300-webfont.ttf') format("truetype"),url('../fonts/museo_slab_300-webfont.svg') format("svg");font-weight:400;font-style:normal}
*/

body {font-size: 14px; font-family: 'proxima-nova'; line-height: 1.5; font-weight: normal;}
.rukou { font-family: 'rukou', serif;}
.px { font-family: 'px', sans-serif;}
.slab,.tk-museo-slab { font-family: 'museo-slab', serif; font-weight: 300;}
.c {width: 95%; max-width: 1140px;margin: 0px auto;}
a {color: inherit;text-decoration: none;}
.btn { background: rgba(255,255,255,.25); border: 1px solid black; padding: 10px; color: black; display: inline-block; -webkit-transition: all .25s ease-out;-moz-transition: all .25s ease-out;-ms-transition: all .25s ease-out;-o-transition: all .25s ease-out;transition: all .25s ease-out;line-height: 1;}
.btn:hover { background: black; color: white; }
hr { border: 0; background: 0; border-bottom: 1px solid black; }
h1,h2,h3,h4 { font-weight: 200;}

.fade-in { opacity: 0;}

.header { text-align: center;}
.header svg { width: 162px; margin: 10px auto; vertical-align: top;}

#inner-header nav { border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; font-family: 'museo-slab'; position: relative; background: url('../images/cross-bg-trans.png'); }
#menu-main-menu li { display: inline-block; margin-right: -4px; padding: 10px 0; font-weight: 300; font-size: 13px;}
#menu-main-menu li a { display: block; padding: 5px 40px 3px; text-transform: uppercase; line-height: 1;}
#menu-main-menu >  li:not(:first-child) >  a { border-left: 1px solid #d6d6d6; }

/*.menu-item-has-children:hover .sub-menu { display: block; opacity: 1;}*/
.sub-menu { position: absolute; top: 100%; left: 0; width: 100%; opacity: 1; display: none; z-index: 100; background: rgba(255,255,255,.9); padding: 0px 0;border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6;transition: opacity 0.2s ease-out;-moz-transition: opacity: 0.2s ease-out;}

.sub-menu > li:not(:first-child) > a { border-left: 1px solid #d6d6d6;}

@media screen and (min-width: 769px) {
    .page-template-default #inner-content { padding: 40px 0;}
}

#hero{height:500px;background:#1A1C29 center center repeat-x;position:relative; /*background-size: cover;*/}
#hero .c{position:relative}
#hero-animations{position:absolute;top:0;left:0;width:100%;height:536px}
#right-eyes{position:absolute;right:245px;top:148px}
#left-eyes{left:247px;position:absolute;top:148px}
#madewithlove{left:516px;position:absolute;top:295px}
#sun-moon{left:128px;position:absolute;top:77px}
#moon-sun{right:125px;position:absolute;top:77px}

#welcome {text-align: center;padding: 20px 0 20px;  position: relative; }
#welcome b {font-weight: 700;}

#welcome h1 { font-size: 55px; margin-bottom: -20px; margin-top: 0px;}
#welcome h2 { font-size: 48px; text-transform: uppercase; font-weight: 100;}
#welcome p { font-size: 15px; padding: 0 10%;}
.paper-airplane { margin-top: 30px; display: inline-block;}
.paper-airplane svg { width: 115px; }
#welcome-whales { width: 100%; position: absolute; top: 100px; left: 0; z-index:0;}

#featured-stores { text-align: center;}
#featured-stores > h2 { font-size: 65px; text-align: center;}

h1.rukou { font-size: 65px; vertical-align: middle;}
h1.rukou img { vertical-align: middle; }

.line-through { position: relative; text-align: center; width: 100%;}
.line-through:after { content: ''; border-bottom: 1px solid black; position: absolute; top: 50%; left: 0; width: 100%;}
.line-through b { display: inline-block; padding: 0 20px; text-align: center; position: relative; z-index: 10; background: white;line-height: 1;}

hr.triangles {border: none;height: 16px;width: 100%;background: url('../images/triangles.svg') center left repeat-x;margin: 20px 0;}

.team-member{width:237px;height:358px;float:left;margin-left:20px;position:relative}
.team-image img{width:100%;height:auto}
.team-name{font-family:'museo-slab';text-align:center;text-transform:uppercase;width:100%}
.team-name em{font-style:italic;text-transform:lowercase;display:block;margin-top:0}
.team-member:first-child{margin-left:0}
#services{background:url(../images/services-bg.jpg) left 47px;padding:0 0 24px; margin-top: 60px; text-align: center;}
#services-header{margin:0 auto;text-align:center}
#sb1,#sb2,#sb3{text-align:left}
#services-header{margin-bottom:20px}
#services h1 { text-transform: none;}
#services .block div{display:inline-block}
#sb1,#sb2,#sb3{display:inline-block;vertical-align:top; padding: 0 5%; width: 27%;}
/*#sb1 { padding-right: 7%;}
#sb2 { border-left: 1px solid #d6d6d6; border-right: 1px solid #d6d6d6; padding: 0 10%;}
#sb3 { padding-left: 7%;}
#services .block{text-align:justify}
#services .block:after{content:'';width:100%;display:inline-block}*/
#sb1 { padding-left: 10%; width: 30%;}
#sb2 { border-left: 1px solid #d6d6d6; border-right: 1px solid #d6d6d6;}

#services{font-family:'museo-slab';font-style:none;text-transform:uppercase}
#services h2{text-transform:uppercase;font-size:15px;font-style:normal;font-family:'museo-slab'}
#services h1 { position: relative; top: -48px; margin-bottom: -48px;}
#services li{font-weight:100;font-size:13px;list-style:disc;list-style-position:outside;margin-left:15px; padding: 3px 0;}

.panel{float:left;width:25%;height:290px;margin:0 0 10px 20px;position:relative;-webkit-perspective:600px;-moz-perspective:600px;text-align:center;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.first{margin-left:0}
.panel:first-child{margin-left:0}
.panel .front{float:none;position:absolute;top:0;left:0;z-index:900;width:inherit;height:inherit;width:237px;height:290px;-webkit-transform:rotateX(0deg) rotateY(0deg);-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-transform:rotateX(0deg) rotateY(0deg);-moz-transform-style:preserve-3d;-moz-backface-visibility:hidden;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.panel.flip .front{z-index:900;border-color:#eee;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-box-shadow:0 0 5px 2px rgba(0,0,0,.2);box-shadow:0 0 5px 2px rgba(0,0,0,.2)}
.panel .back{float:none;position:absolute;top:0;left:0;z-index:800;width:inherit;height:inherit;width:237px;height:290px;-webkit-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-transform:rotateY(-180deg);-moz-transform-style:preserve-3d;-moz-backface-visibility:hidden;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;font-size:15px;text-align:justify}
.panel p{padding:25px 18px 14px 16px;line-height:1.4;font-weight:300;text-align:center;font-size:12px;color:#000;font-family:'museo-slab'}
.panel .back a{color:#000;font-weight:500;text-decoration:none;display:block}
.panel h3{font-family:'ProxBold',sans-serif;font-weight:400;font-size:15px;text-transform:uppercase;margin-top:100px}
.panel h2{font-size:17px;font-weight:400;font-family:"Palatino",serif;text-transform:uppercase}
.panel.flip .back{z-index:1000;background:url(../images/team-back.png) center top no-repeat;-webkit-transform:rotateX(0deg) rotateY(0deg);-moz-transform:rotateX(0deg) rotateY(0deg);text-align:center;color:#fff;width:237px;height:380px}
/*.panel .back p { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); margin-top: -25%;}*/

.shopify-item img { vertical-align: top; width: 100%; height: auto;}
.shopify-item { position: relative;}
.shopify-info { position: absolute; top: 50%;  width: 30%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);text-align: center;}
.shopify-item.odd .shopify-info { left: 5%; }
.shopify-item.even .shopify-info { right: 5%; }
.shopify-info .entry { margin-bottom: 20px;}

.shopify-info h2 { font-size: 24px; text-transform: uppercase;}
.shopify-info hr { width: 20%; margin: 20px auto;}

.shopify-clients { text-align: center;}
.shopify-clients h3 { font-size: 24px; text-transform: uppercase; }
@media screen and (min-width: 769px) {
    .shopify-clients-columns { 
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
        padding: 30px 0 40px;

    }
}

.branding-info { width:100%;position:absolute;text-align:center;top: 50%;transform: translateY(-50%);width: 100%;text-align: center;}
.branding-logo { display: inline-block;}

#sloane-tate .shopify-info,
#boys-arrows .shopify-info { width: 30%; }
#serapian .shopify-info{ width: 25%; margin-top: -5%; margin-right: 5%;}
#pop-motif .shopify-info,
#styled-by-noir .shopify-info,
#atelier-faust .shopify-info{ width: 25%;}


.page-id-7 #content,
.page-id-11 #content { background: url('../images/cross-bg-trans.png'); }
#post-7, #post-11 { text-align: center; padding: 80px 0;}
#post-7 h2, #post-11 h2 { font-size: 24px; font-family: 'museo-slab'; text-transform: uppercase;}
#post-7 hr, #post-11 hr { max-width: 100px; margin: 60px auto;}
#post-7 .btn, #post-11 .btn { padding: 5px 20px; margin: 20px 0 0;}


.footer { padding-top: 30px; border-top: 1px solid #d6d6d6; text-align: center; padding-bottom: 20px;}
.footer-social svg { height: 24px; }
.footer-social a { display: inline-block; padding: 0 10px;}

#mobile-nav-wrapper {text-align: center;}
#mobile-nav { text-transform: uppercase; font-size: 15px; border-top: 1px solid #d6d6d6; display: none;}
#mobile-nav a { display: block; border-bottom: 1px solid #d6d6d6; padding: 5px 0; }
#nav-toggle { cursor: pointer; padding: 10px 26px 16px 0px; z-index: 600; display: inline-block;}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {cursor: pointer;border-radius: 1px;height: 1px;width: 25px;background: black;position: absolute;display: block;content: '';}
#nav-toggle span:before {top: -7px;}
#nav-toggle span:after {bottom: -7px;}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {transition: all 500ms ease-in-out;-moz-transition: all 500ms ease-in-out;-webkit-transition: all 500ms ease-in-out;}
#nav-toggle.active span {background-color: transparent;}
#nav-toggle.active span:before, #nav-toggle.active span:after {top: 0;}
#nav-toggle.active span:before {transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);}
#nav-toggle.active span:after {transform: rotate(-45deg);-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}

#back-to-top { width: 50px; position: fixed; bottom: 20px; right: 20px; opacity: 0;transition: opacity 0.2s ease-out;cursor: pointer;}
#back-to-top.show {opacity: 1;}
#back-to-top svg {  }

@media screen and (min-width: 769px) {
    .footer nav li { display: inline-block; margin-right: -4px;  padding: 10px 20px 20px; font-size: 16px; text-transform: uppercase; position: relative;}
    .footer nav li:not(:first-child):after { content: '\2022'; position: absolute; top: 9px; left: 0px;}
}
.copyright { font-size: 12px; }

.showmobile { display: none; }

@media screen and (max-width: 1420px) {
    #hero-animations { display: none; }
    #hero { background-size: cover;}
}
@media screen and (max-width: 769px) {
    .hidemobile { display: none; }
    .showmobile { display: inherit; }
    .mobile-break { display: block;}
    .c { width: 95%;}
    #logo svg { width: 80px; margin: 20px auto;}
    
    #welcome h1 { font-size: 35px;}
    #welcome h2 { font-size: 30px;}
    #welcome { background: 0;}
    #welcome p { padding: 0;}
    .mobile-welcome { margin: 20px 0 10px;}
    .mobile-welcome svg { width: 100%;}
    #featured-stores h2 { font-size: 40px;}
    
    .footer { padding-bottom: 40px;}
    .footer nav { margin-top: 20px; }
    .footer nav li { text-transform: uppercase; }
    
    .shopify-item { border-bottom: 1px solid #999; }
    
    #content .shopify-item .shopify-info,
    .branding-info { position: relative; top: auto; left: auto !important; right: auto !important; bottom: auto; width: 100%; transform: translateY(0); padding: 40px 5%;}
    .branding-info .branding-logo { max-width: 100%; }
    .shopify-clients { padding: 20px 0;}
    
    
}