@import url("../../deco/normalise.css");
@import url("../../deco/paint.css");
@import url("../../deco/typography.css");
@import url("../../deco/width.css");
@import url("../../deco/height.css");
@import url("../../deco/padding.css");
@import url("../../deco/margin.css");
@import url("../../deco/position.css");
@import url("../../deco/media.css");
@import url("../api/common/media.css");
@import url("../../deco/finishes.css");
@import url("../../deco/heads.css");
/*@import url("../../deco/template.css");*/
/*@import url("../../deco/bxstyle.css");*/
/*
===============================================
****************	PAGE PREP 	***************
===============================================
*/
#cart input[type=checkbox]:checked ~ #cart { background: #757678;}
#cart>span 		{ padding: 0px 20px; color:#fff; height: 50px; line-height: 50px; }
body 			{ font-family: avenir;   font-size: 16px; background-color: #fefefe; color: #222; overflow-x: hidden;   }
p { line-height: 25px;  }
h2 { color: rgb(0,31,63); text-transform: uppercase;  }
/*
===============================================
****************   	HAIR / HEADER	& WELCOME	***************
===============================================
*/
#hair			{ height: 50px; line-height: 50px; font-size: 23px;padding: 0px 60px; z-index: 10; background-color: rgba(255,255,255,0.7);}
#head 			{ line-height: 50px; height: 50px; text-transform: uppercase; }
.sticky #logo 	{ width: 220px; height: 150px; }
.fix-head #logo { height: 50px; width: 100px;  }
.sticky 		{ top: 50px;  }
.fix-head 		{ top: 0px; }
#landing 		{ width: 100%; padding-top: 30vh; height: 70vh; position: relative; z-index: 8; }
#landing2 		{ width: 100%; padding-top: 20vh; height: 40vh; position: relative; z-index: 8; }
#landing2 #logo 	{ width: 220px; height: 150px; margin: auto;}

#landing article { width: 600px; background-color: rgba(0,0,0,0.4); color: #fff; margin: auto; padding: 30px; border-left: 3px solid #f3f7f3; border-right: 3px solid #f3f7f3;     }
#landing header { font-size: 40px; line-height: 60px; font-family: headfont; }
#landing main 	{ max-width: 800px; padding: 20px; margin: auto; font-size: 18px; line-height: 25px;}
#landing footer a  { display: inline-block; line-height: 40px;     background-color: rgb(255,105,180); color: #fff; width: 200px;  }
/*
===============================================
****************   	MAIN 		***************
===============================================
*/
#services, #contact, #products	{ padding: 50px 0px; }
#services figure { width: 18vw; height: 18vw; border: 1vw solid #eee;  border-radius: 10vw; margin: 10px auto; }
#about { background-color: #eee; }
.cover2s div { width: 23vw; height: 33vw;  }
#testimonials { padding: 60px 10px;  }
#testimonials article { padding: 30px 0px 10px;  }
#testimonials article main { min-height: 160px; line-height: 20px; width: 420px; margin: auto; }

#about hr { width: 120px;  }
#contactform 	{ padding: 20px 10px; box-shadow: none;}
#contact { position: relative; }
#contact h2 { color: #fff; }
#services header { font-size: 20px; color: #FF66CC; }
.darken { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0,0,0,0.8); z-index: -1; }
label.inputme { height: 40px; line-height: 40px;  width: 44%; margin: 10px 0px; padding: 0px 2%; color: #fff; }
#contactform input, #contactform select { height: 40px; line-height: 40px; background-color: rgba(255,255,255,0.6); width: 44%; margin: 10px 0px; padding: 0px 2%;  }
#contactform select { width: 48%; }
#contactform a { color: #fff; font-size: 15px; font-style: italic; }
#contactform textarea 					{ background-color: rgba(255,255,255,0.6); width: 96%; margin: 10px 0px; padding: 0px 2%; border: 0px; }
#contactform .sendme { background-color: #983980; }
#contactform .socials { text-align: center; }
#contactform .socials a { background-color: #233; font-style: normal; line-height: 30px; text-align: center; height: 30px; width: 20px; padding: 0px 0px 0px 10px; display: inline-block; border-radius: 15px;  }
.emailsent { color: #fff; font-size: 25px; padding: 100px 20px; }
/*
===============================================
****************   	FOOTER 		***************
===============================================
*/
#feet 		{ position: relative; padding: 20px; 	} #feet a { color: #333; }
#copyright 	{ max-width:750px; text-align: center; font-size: 12px; margin: 20px auto; line-height: 20px; }



@media screen and (max-width:950px) {

#body>section 	{ width: 100%;  height: auto; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px;  }
#snippet, #swiperslide 		{ height: auto; height: 180px; margin: 0 5%; }
#contact .two { width: 98%; }
#contact .two-tight { width: 94%;  }
#contactform input, #contactform select { width: 96%;  }
#nav 			{ z-index: 20; }
#nav 			{  background-color: rgba(0, 0, 0,0.8); color: #fff;   padding-top: 50px;left: 0px; right: 0px;  }

#logo 			{ position: fixed; top: 0px; left: 20px; max-height: 50px; right: 50px; font-size: 40px; padding: 0px; margin: 0px; text-align: left; line-height: 50px; background-position: 20px 0px;  }
#landing article 		{ width: 94%; padding: 2%;  }
.three-H, .three-HS>section, .three-HA>article, .three-HD>div { height: auto; }
.four-loose, .four-loose-S>section, .four-loose-A>article, .four-loose-D>div { width: 96%; padding: 2%; }
#contact label { display: none; }
.two-tight, .two-tight-S>section, .two-tight-A>article, .two-tight-D>div { width: 96%; padding: 2%;  }
.disc-large { width: 300px; height: 300px; border-radius: 150px;  }


}


@media screen and (max-width:500px) { 
	#smartcart 					{ width: 100vw; }
}