@charset "utf-8";
/* CSS Document */

/* Shared
----------------------------------------------------*/
.desktop #main { margin-top:500px; position:relative; z-index:10; }
.section {
	padding:50px 0;
	border-bottom:1px solid #ccc; background-color:#f5f5f5; 
	background-image: -moz-linear-gradient(top, #eeeeee 0%, #f5f5f5 15%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(15%,#f5f5f5)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #eeeeee 0%,#f5f5f5 15%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, #eeeeee 0%,#f5f5f5 15%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top, #eeeeee 0%,#f5f5f5 15%); /* IE10+ */
	background-image: linear-gradient(to bottom, #eeeeee 0%,#f5f5f5 15%); /* W3C */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.heading { text-align:center; width:90%; max-width:1000px; margin-bottom:40px; margin-left:auto; margin-right:auto; }

/* self clear */
.clearself:before, .clearself:after { content:" "; display:block; height:0; overflow:hidden; }
.clearself:after { clear:both; }
.clearself { zoom:1; } /* IE < 8 */

.center { display:block; margin-left:auto; margin-right:auto; }

/* flexible images */
figure { margin:0; padding:0; border:none; display:block; }
figure img { display:block; max-width:100%; padding:0; margin:0; border:none; }

/* highlight colors */
::-moz-selection{ background:#333; color:#fff; text-shadow:none; }
::selection { background:#333; color:#fff; text-shadow:none; }

/* button */
.button { text-align:center; position:relative; z-index:10; -webkit-transform:translateZ(0); }
.button a {
	position:relative; z-index:10;
	text-align:center;
	display:block; cursor:pointer;
	padding:10px 0;
	background:#222;
	font-family: 'Arvo', serif; color:#efefef; text-transform:uppercase; letter-spacing:2px; font-size:16px;
	-webkit-transition:all .2s;
	-moz-transition:all .2s;
	transition:all .2s;
}
.button a .arrow {
	content:''; position:absolute; z-index:9; left:50%; bottom:0px;
	width:0; height:0; margin-left:-12px;
	border-left:12px solid transparent;
	border-right:12px solid transparent;
	border-top:12px solid #222;
	-webkit-transition:all .2s;
	-moz-transition:all .2s;
	transition:all .2s;
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	transform:translateY(0px);
}
.button.active a .arrow { -webkit-transform:translateY(12px); -moz-transform:translateY(12px); transform:translateY(12px); }
.desktop .button a:hover { background:#00c0ff; color:#efefef; }
.desktop .button a:hover .arrow { border-top:12px solid #00c0ff; }



/* Typography
----------------------------------------------------*/
body { font-family:'brandon-grotesque', 'Century Gothic', sans-serif; font-weight:150; font-style:normal; color:#888; font-size:16px; }
h1 {
	font-size:18px; line-height:140%; letter-spacing:2px; margin-bottom:10px; color:#444;
	font-family: 'Century Gothic', sans-serif; font-weight:400; font-style:normal; text-transform:uppercase;
}
h2 { font-size:18px; line-height:30px; font-weight:normal; margin-bottom:10px; font-style:normal; }
h3 { font-weight:normal; }
p { text-shadow:1px 1px 0 #fff; letter-spacing:1px; font-size:12px; line-height:140%; }
a { color:#888; text-decoration:none; }
.desktop a:hover { color:#00c0ff; }



/* Header Hero
----------------------------------------------------*/
#hero {
	clear:both;
	/* [disabled]position:relative; */
	z-index:1;
	background:#222 url(../images/texture.jpg);
	height:500px;
}
.desktop #hero { position:fixed; z-index:1; top:0; left:0; width:100%; padding:0; }
.device #hero { padding:30px 0; height:auto; }

#hero .logo { width:90px; margin:80px auto 20px; }
.desktop #hero .logo { width:295px; margin:80px auto 20px; }
.device #hero .logo { width:250px; margin:0px auto 10px; }


#hero .salon { text-align:center; }
#hero .salon h1 {margin-bottom:0px;font-size:22px;font-weight:lighter;}
#hero .salon h2 { margin-bottom:0px; font-family: 'brandon-grotesque', sans-serif; font-weight:300; text-transform:uppercase; font-size:14px; letter-spacing:1px; }
#hero .salon h3 { font-family:'brandon-grotesque', sans-serif; font-weight:300; font-style:normal; font-size:10px; letter-spacing:2px; }



/* Navigation
----------------------------------------------------*/
#navi {
	position:relative; z-index:11; width:100%;
	font-family: 'Arvo', serif; font-weight:400; text-transform:uppercase;
	box-shadow:0 0 3px rgba(0,0,0,.7);
}
.desktop #navi { top:500px; left:0; }
.desktop #navi.fixed { position:fixed; top:0px; z-index:11; }

#navi ul { background:#fff; text-align:center; }
#navi ul li { display:inline-block; }
#navi ul li a { display:block; padding:20px 5px 20px; text-decoration:none; color:#777; font-size:12px; letter-spacing:1px; -webkit-transition:all .2s; }
.desktop #navi ul li a:hover { color:#00c0ff; }

/* logo and arrow navi button */
#navi ul li#arrow { display:none; }



/* Lookbook
----------------------------------------------------*/
#looks { overflow:hidden; padding-bottom:100px; }

/* flexslider */
#looks .flexslider { position:relative; z-index:10; padding:0; margin-bottom:30px; }
#looks .flexslider .slides > li { margin-right:12px; display:none; -webkit-backface-visibility:hidden; }
#looks .flexslider .slides img { width:100%; display:block; }
.no-js .slides > li:first-child { display:block; }

/* clearfix for the .slides element */
.slides:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } 
html[xmlns] .slides { display:block; } 
* html .slides { height:1%; }

/* control navi */
#looks .flex-control-navi { position:absolute; padding:20px 0; bottom:-50px; width:100%; text-align:center; }
#looks .flex-control-navi li { margin:0 3px; display:inline-block; zoom:1; *display:inline; }
#looks .flex-control-paging li a {
	width:10px; height:10px; display:block; background:#ccc; cursor:pointer; text-indent:-9999px;
	-webkit-transition:-webkit-transform .2s;
	-moz-transition:-webkit-transform .2s;
	transition:-webkit-transform .2s;
	-webkit-transform:translateZ(0) rotate(0deg);
	-moz-transform:translateZ(0) rotate(0deg);
	transform:translateZ(0) rotate(0deg);
}
#looks .flex-control-paging li a:hover { background:#aaa; }
#looks .flex-control-paging li a.flex-active {
	background:#777; cursor:default;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}

/* direction navi */
#looks .flex-direction-navi { display:none; }



/* Shop
----------------------------------------------------*/
#shop { text-align:center; padding-bottom:0; }

/* size chart toggle button */
#shop #chart-btn ul { width:240px; list-style-type:none;}

/* test
#shop #chart-btn li { width:118px; float:left;}
#shop #chart-btn li:last-child { float:right; }
#shop #chart-btn li a { background:#222; }
#shop #chart-btn li a .arrow { border-top:12px solid #222; }
.desktop #shop #chart-btn li a:hover { background:#00c0ff; }
.desktop #shop #chart-btn li a:hover .arrow { border-top:12px solid #00c0ff; }
#shop #chart-btn li a.active { background:#666; }
#shop #chart-btn li a.active .arrow { bottom:-12px; border-top:12px solid #666; }
.desktop #shop #chart-btn li a.active:hover { background:#666; cursor:default; }
.desktop #shop #chart-btn li a.active:hover .arrow { border-top:12px solid #666; }
*/


/* size chart */
#shop #chart { background:#fff; display:none; font-family: 'Arvo', serif; font-size:12px; text-align:left; }
#shop #chart .chart-wrapper { padding:20px 0 30px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
#shop #chart table { width:100%; max-width:1000px; margin:0px auto; border-bottom:1px solid #ddd; }
#shop #chart table th { padding:10px 4px; }
#shop #chart table td { padding:10px 4px; border-top:1px solid #ddd; border-left:1px solid #ddd; }
#shop #chart table td.first { text-align:left; font-weight:bold; border-left:none; padding-left:8px;}
#shop sup { font-size:.8em; }

/* shirts */
#threads { width:100%; overflow:hidden; /*padding-top:100px;*/ }
#threads li.column { position:relative; z-index:10; padding-bottom:170px; }
/*#threads li.column img { max-width:110%; }*/
#threads li# img { float:right; }
#threads li#white img { float:left; }

#threads .purchase { position:absolute; z-index:11; width:100%; max-width:830px; margin-top:-90px; top:67%; text-align:center; }
#threads li# .purchase { right:0; }
#threads li#white .purchase { left:0; }

#threads .purchase h2 { color:#444; font-size:20px; margin-bottom:0px; font-family: 'Arvo', serif; font-weight:300; text-transform:uppercase; letter-spacing:1px; }
#threads .purchase p { color:#888; font-style:italic; font-weight:300; font-size:16px; }

/* buy button */
#threads .buy { font-family: 'Arvo', serif; font-weight:300; text-transform:uppercase; width:140px; margin:0 auto; padding:30px 0 30px; }
#threads .buy .buy-btn {
	width:140px; margin:0; padding:8px 0px; background:#222; border:none; border-radius:0;
	font-family: 'Arvo', serif; font-size:16px; font-weight:300; line-height:20px; letter-spacing:2px; color:#efefef; font-style:normal;
	cursor:pointer;
	-webkit-transition:background-color .2s;
	-moz-transition:background-color .2s;
	transition:background-color .2s;
}
#threads .buy .buy-btn:hover { background:#00c0ff; }
#threads .buy .buy-btn.sold-out { width:210px; cursor:default; }
#threads .buy .buy-btn.sold-out:hover { background:#222; }

#threads .buy .size { float:left; }

/* size dropdown  */
#threads .buy .dk_container { background-color:#eee; font-size:16px; line-height:20px; text-align:left; }
#threads .buy .dk_container:focus { outline:0; }
#threads .buy .dk_container a { cursor:pointer; text-decoration:none; }

/* opens the dropdown and holds the menu label */
#threads .buy .dk_toggle {
width:54px;
background:url('../images/small_arrow.png') no-repeat 80% center;;
border:1px solid #ccc;
color:#444;
padding:7px 10px 7px 10px;
text-shadow:#fff 1px 1px 0;
}
#threads .buy .dk_toggle:hover,
#threads .buy .dk_focus .dk_toggle { border-color: #ccc; }

/* applied whenever the dropdown is open */
#threads .buy .dk_open { z-index:10; }
#threads .buy .dk_open .dk_toggle { background-color:#eee; color:#ccc; }
#threads .buy .dk_open .dk_toggle:hover { border-color:#ccc; }

/* the outer container of the options */
#threads .buy .dk_options a { background-color:#fff; border-bottom:1px solid #ccc; padding:4px 10px; }
#threads .buy .dk_options li { width:100%; }
#threads .buy .dk_options li:last-child a { border-bottom:none; }
#threads .buy .dk_options a:hover { background-color:#fff; color:#00c0ff; }

/* inner container for options */
#threads .buy .dk_options_inner { border:1px solid #cccccc; color:#444; }


/* Details
----------------------------------------------------*/
#team .heading { max-width:760px; }

/* team toggle button */
#team #team-btn { width:240px; }
#team #team-btn li { width:118px; float:left; }
#team #team-btn li:last-child { float:right; }
#team #team-btn li a { background:#222; }
#team #team-btn li a .arrow { border-top:12px solid #222; }
.desktop #team #team-btn li a:hover { background:#00c0ff; }
.desktop #team #team-btn li a:hover .arrow { border-top:12px solid #00c0ff; }
#team #team-btn li a.active { background:#666; }
#team #team-btn li a.active .arrow { bottom:-12px; border-top:12px solid #666; }
.desktop #team #team-btn li a.active:hover { background:#666; cursor:default; }
.desktop #team #team-btn li a.active:hover .arrow { border-top:12px solid #666; }

/* team grid */
#team .four-col { padding:20px 10px 20px 10px; text-align:center; }
#team .four-col li { max-width:400px; margin:0 auto; }
#team .four-col li figure { margin-bottom:10px; position:relative; -webkit-transform:translateZ(0); }
#team .four-col li figure img { border:1px solid #ccc; }
#team .four-col li figure .caption {
	position:absolute; top:10%; left:8%; height:80%; width:84.5%; background:#222; background:rgba(0,0,0,.7); opacity:0;
	-webkit-transition:opacity .2s;
	-moz-transition:opacity .2s;
	transition:opacity .2s;
}
#team .four-col li figure .caption span {
	position:absolute; display:block; top:40%; text-align:center; width:100%; color:#eee;
	font-family: 'Arvo', serif; sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:1px; font-size:14px; 
}
.desktop #team .four-col li:hover figure .caption { opacity:1; }

#team #team-white { display:none; }



/* Details
----------------------------------------------------*/
#retailers .heading { max-width:760px; }

/* retailers toggle button */
#retailers #retailers-btn { width:240px; }
#retailers #retailers-btn li { width:118px; float:left; }
#retailers #retailers-btn li:last-child { float:right; }
#retailers #retailers-btn li a { background:#222; }
#retailers #retailers-btn li a .arrow { border-top:12px solid #222; }
.desktop #retailers #retailers-btn li a:hover { background:#00c0ff; }
.desktop #retailers #retailers-btn li a:hover .arrow { border-top:12px solid #00c0ff; }
#retailers #retailers-btn li a.active { background:#666; }
#retailers #retailers-btn li a.active .arrow { bottom:-12px; border-top:12px solid #666; }
.desktop #retailers #retailers-btn li a.active:hover { background:#666; cursor:default; }
.desktop #retailers #retailers-btn li a.active:hover .arrow { border-top:12px solid #666; }

/* retailers grid */
#retailers .four-col { padding:20px 10px 20px 10px; text-align:center; }
#retailers .four-col li { max-width:400px; margin:0 auto; }
#retailers .four-col li figure { margin-bottom:10px; position:relative; -webkit-transform:translateZ(0); }
#retailers .four-col li figure img { border:1px solid #ccc; }
#retailers .four-col li figure .caption {
	position:absolute; top:10%; left:8%; height:80%; width:84.5%; background:#222; background:rgba(0,0,0,.7); opacity:0;
	-webkit-transition:opacity .2s;
	-moz-transition:opacity .2s;
	transition:opacity .2s;
}
#retailers .four-col li figure .caption span {
	position:absolute; display:block; top:35%; text-align:center; width:100%; color:#eee;
	font-family: 'Arvo', serif; sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:1px; font-size:14px; 
}
.desktop #retailers .four-col li:hover figure .caption { opacity:1; }

#retailers #retailers-white { display:none; }



/* Contact
----------------------------------------------------*/
#contact { padding-bottom:0; }
#contact .heading li { margin-bottom:8px; }

#contact h2 { font-family: 'Arvo', serif; font-weight:300; text-transform:uppercase; color:#444; letter-spacing:2px; margin-bottom:0; }
#contact p.handle { margin-bottom:40px; color:#888; font-weight:300; font-size:16px; }
#contact .facebook p.handle { margin-bottom:40px; -webkit-transition:color .2s; -moz-transition:color .2s; transition:color .2s; }

#contact .three-col { padding-top:0px; }
#contact .three-col li { text-align:center; }
#contact .three-col li a.block {
	border-top:4px solid #fff;
	display:block; background:#fff; padding:60px 20px;
	-webkit-transition:background-color .2s, border .2s;
	-moz-transition:background-color .2s, border .2s;
	transition:background-color .2s, border .2s;
}
.desktop #contact .three-col li a.block:hover { background:#fff; color:#888; border-top:4px solid #ec1f27; }
.desktop #contact .three-col li a.block:hover .handle { color:#ec1f27; }

#contact .icon { width:80px; margin:0 auto; position:relative; z-index:10; background:#222; padding:18px 0; margin-bottom:25px;
  -webkit-animation-name: Meditation;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -moz-animation-name: Meditation;
  -moz-animation-duration: 3s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running; }
  
#contact .icon .arrow {
	content:''; position:absolute; z-index:9; left:50%; bottom:-12px;
	width:0; height:0; margin-left:-12px;
	border-left:12px solid transparent;
	border-right:12px solid transparent;
	border-top:12px solid #222;
}

#contact #instagram,
#contact .blog figure { max-width:240px; margin:0 auto; }

#contact #footer { background:#222; color:#ccc; padding:20px 0; text-align:center; border-top:4px solid #aaa; }
#contact #footer p { text-shadow:none; font-size:10px; font-family: 'Arvo', serif; font-weight:300; text-transform:uppercase; letter-spacing:2px; }



/* Animations
----------------------------------------------------*/
@-webkit-keyframes fade-in {
	0% { opacity:0; -webkit-transform:translateZ(0); }
	100% { opacity:1; -webkit-transform:translateZ(0); }
}


/* Media Queries
----------------------------------------------------*/
@media only screen and (min-width : 500px) {
	/* Shared
	----------------------------------------------------*/
	.section { padding:80px 0; }
	.button .title { font-size:18px; }


	/* Typography
	----------------------------------------------------*/
	body { font-size:16px; }
	h1 { font-size:18px; letter-spacing:2px; margin-bottom:12px; }
	h2 { font-size:16px; margin-bottom:8px; }
	p { font-size:14px; }


	/* Hero 
	-------------------------------*/
	.device #hero { padding:120px 0; }
	#hero .salon h1 { margin-bottom:70px; font-size:16px; }
	#hero .salon h2 { margin-bottom:4px; font-size:16px; letter-spacing:2px; }
	#hero .salon h3 { font-size:12px; letter-spacing:3px; }


	/* Nav 
	-------------------------------*/
	#navi ul li a { padding:24px 5px; width:80px; font-size:12px; }

	/* logo and arrow navi button */
	#navi ul li#arrow { display:inline-block; width:30px; padding:0 24px; opacity:.6; }
	#navi ul li#arrow a { display:block; padding:0; margin-bottom:-8px; height:30px; width:30px; background:url(../images/crown_navi.png); -webkit-transition:background-position .2s; }
	#navi.fixed ul li#arrow a { background-position:0 32px; }


	/* Looks 
	-------------------------------*/
	/* flexslider control navi */
	#looks .flex-control-navi { bottom:-60px; }
	#looks .flex-control-navi li { margin:0 6px; }

	/* flexslider direction navi */
	.desktop #looks .flex-direction-navi { display:block; position:absolute; z-index:15; top:50%; margin-top:-35px; width:100%; overflow:hidden; }
	#looks .flex-direction-navi li a {
		display:block; width:40px; height:70px; text-indent:-9999em;
		background:#f5f5f5 url(../images/arrows_lr.png) no-repeat 5px -80px;
		-webkit-transition:-webkit-transform .2s;
	}
	#looks .flex-direction-navi li a.flex-prev { background-position:0px 0px; float:left; -webkit-transform:translateX(-50px); }
	#looks .flex-direction-navi li a.flex-next { float:right; -webkit-transform:translateX(50px); }
	#looks .flexslider:hover .flex-direction-navi li a.flex-prev.flex-disabled { -webkit-transform:translateX(-50px); }
	#looks .flexslider:hover .flex-direction-navi li a.flex-next.flex-disabled { -webkit-transform:translateX(50px); }
	#looks .flexslider:hover .flex-direction-navi li a.flex-prev,
	#looks .flexslider:hover .flex-direction-navi li a.flex-next { -webkit-transform:translateX(0px); }

	/* Shop 
	-------------------------------*/
	#shop #chart { font-size:14px; }
	#shop #chart table { border-bottom:1px solid #ddd; }
	#shop #chart table th { padding:15px 10px; }
	#shop #chart table td { padding:15px 10px; }
	#shop #chart table td.first { padding-left:20px; }

	#threads li.column { padding-bottom:100px; }
	#threads .purchase { top:73%; text-align:center; }

	/* Contact 
	-------------------------------*/
	#contact #footer p { text-shadow:none; font-size:14px; padding:20px 0; }
}



@media only screen and (min-width : 600px) {
	/* Nav 
	-------------------------------*/
	#navi ul li a { font-size:16px; letter-spacing:2px; width:80px;  }

	/* Shop 
	-------------------------------*/
	#shop #chart { font-size:18px; }
	#shop #chart .chart-wrapper { padding:40px 0 60px; }
	#shop #chart table { width:90%; }
	#shop #chart table th { padding:10px 20px; }
	#shop #chart table td { padding:10px 20px; }
	#shop sup { font-size:.6em; }

	#threads li.column { padding-bottom:60px; }
	#threads .purchase { top:76%; text-align:center; }

	/* Details 
	-------------------------------*/
	#retailers .four-col { max-width:800px; margin:0 auto; }
	#retailers .four-col li { float:left; width:50%; margin:0; }
	#retailers .four-col li figure { margin:10px; }
	
	/* Details 
	-------------------------------*/
	#team .four-col { max-width:800px; margin:0 auto; }
	#team .four-col li { float:left; width:50%; margin:0; }
	#team .four-col li figure { margin:10px; }
}



@media only screen and (min-width : 700px) {
	/* Typography
	----------------------------------------------------*/
	body { font-size:20px; }
	h1 { font-size:26px; letter-spacing:2px; margin-bottom:15px; }
	h2 { font-size:22px; margin-bottom:10px; }
	p { font-size:16px; }

	/* Nav 
	-------------------------------*/
	#navi ul li a { width:100px; }

}



@media only screen and (min-width : 820px) {
	/* Shop 
	-------------------------------*/
	#threads li.column { float:left; width:50%; padding-bottom:160px; }
	#threads .purchase { top:70%; }
}



@media only screen and (min-width : 900px) {
	/* Nav 
	-------------------------------*/
	#navi ul li a { width:130px; }

	/* Shop 
	-------------------------------*/
	#threads li.column { padding-bottom:140px; }
	#threads .purchase { top:73%; }
}



@media only screen and (min-width : 1000px) {
	/* Contact 
	-------------------------------*/
	#contact .three-col { padding-top:30px; }
	#contact .three-col li { float:left; width:33.3333%; }
	#contact .three-col li a.block { min-height:300px; padding-bottom:100px; }
	#contact .facebook p.handle { margin-bottom:100px; }

}



@media only screen and (min-width : 1260px) {
	/* Details 
	-------------------------------*/
	#retailers .four-col { max-width:1680px; }
	#retailers .four-col li { width:25%; }
	#team .four-col { max-width:1680px; }
	#team .four-col li { width:25%; }
}



@media only screen and (min-width : 1500px) {
	/* Shop 
	-------------------------------*/
	#threads li.column { padding-bottom:0px; }
	#threads .purchase { top:80%; }
}



@-webkit-keyframes Meditation {
  0% {
    -webkit-transform: translate(0, -5);
  }
  50% {
    -webkit-transform: translate(0, 5px);
  }
  100% {
    -webkit-transform: translate(0, -5);
  }
}

@-moz-keyframes Meditation {
  0% {
    -moz-transform: translate(0, -5);
  }
  50% {
    -moz-transform: translate(0, 5px);
  }
  100% {
    -moz-transform: translate(0, -5);
  }
}