@import url("https://awesome.satag.co.za/deco/normalise.css");
@import url("https://awesome.satag.co.za/deco/paint.css");
@import url("https://awesome.satag.co.za/deco/typography.css");
@import url("https://awesome.satag.co.za/deco/width.css");
@import url("https://awesome.satag.co.za/deco/height.css");
@import url("https://awesome.satag.co.za/deco/padding.css");
@import url("https://awesome.satag.co.za/deco/margin.css");
@import url("https://awesome.satag.co.za/deco/position.css");
@import url("api/mycss/media.css");
@import url("https://awesome.satag.co.za/deco/media.css");
@import url("https://awesome.satag.co.za/deco/finishes.css");
@import url("https://awesome.satag.co.za/deco/heads.css");

/*@import url("https://awesome.satag.co.za/deco/template.css");*/
/*@import url("https://awesome.satag.co.za/deco/bxstyle.css");*/
/*
===============================================
****************	PAGE PREP 	***************
===============================================
*/
#cart input[type=checkbox]:checked ~ #cart { background: #757678;}
/*#cart { width: 300px; height: 300px; z-index: 23233232323; background: #757678; }*/

/*
===============================================
****************   	CUSTOM 		***************
===============================================
*/

body 			{ font-family: avenir;    background-color: #fefefe; color: #222; overflow-x: hidden;   }

/*
===============================================
****************   	HAIR / CART		***************
===============================================
*/
button 						{ cursor: pointer; }
#hair, #hair .logo			{ height: 120px; min-width: 260px; z-index: 400; }
#hair .cart 				{ position: fixed; right: 0px; }
#cart>span 					{ padding: 0px 20px; color:#fff; height: 50px; line-height: 50px; }
#hair .logo 				{ height: 120px; }
#head 						{ height: 50px; line-height: 50px; box-shadow:2px 0px 5px #444; }
#logo 						{ display: inline-block; width: 30vw; height: 50px; background-color: #fff;  }

.cover1f, .cover2f, .cover3f, .cover4f, .cover5f, .cover6f, .cover7f, .cover8f, .cover9f,  .cover10f
{ background-attachment: fixed; }


#landing p 			{ font-size: 20px; }

.paginate 			{ background: #111; color: #fff; border: 0px; padding: 10px 15px;}
.paginate3 			{ margin: auto; }

.pull 				{ margin: auto; width: 90vw; }
.product 			{ position: relative; display: inline-block;  width: 25vw; text-align: center; margin: 20px 9px; overflow: hidden; line-height: 25px; border-bottom: 2px solid rgba(255,255,255,1);/* box-shadow: 2px 3px 10px rgba(10,10,10,0.2); border-radius: 3px;*/ }
.product:hover 		{ /*border-bottom: 2px solid rgba(220,162,250,1); */border-radius: 4px;}
.product header 	{ font-weight: lighter; font-size: 1vw; height: 4vw; padding: 0px 10px; line-height: 4vw; overflow: hidden; background-color: #fff;   }
.product main 		{ height: 30px; overflow: hidden; /*color: rgb(116, 209, 227);*/ color: #777; background-color: #fff; padding: 0px 10px; }
.product figure 	{ height: 30vw; width: 25vw; overflow: hidden; background-color: #e3e3e3; background-size: cover; background-repeat: no-repeat;}
.product img 		{ height: 30vw; margin: auto; }
.product footer 	{ position: absolute; top: 12vw; left: 0px; right: 0px; margin: auto; display: none; text-align: center;}
.product:hover footer { display: block; }
.product:hover figure { filter: brightness(80%); }

.entice 			{ min-height: 20vw; background-color: #fff; color: rgb(16, 19, 17);}
.entice .message 	{ padding: 30px; width: 40vw; position: relative; right: 0px; left: 0px; margin: auto; background-color: rgba(2555,255,255,0.8); outline-offset: 15px;   outline: #fff solid thick;  min-height: 15vw; }
.entice p 			{ line-height: 50px; font-size: 20px;  }
/*
===============================================
****************   	HEADER		***************
===============================================
*/

#head 			{  background: rgba(14,32,88,1); }
/*#logo 			{ overflow: hidden; z-index: 20; height: 250px; width: 450px; color: #ccc; background: url('logo.png') no-repeat center; background-size: contain; position: absolute; left: -40px; top: -100px;	}*/
#eyes li		{ padding: 0px 20px;  } 
#eyes ul a 		{ text-transform: uppercase; color: rgb(212, 175, 55); font-size: 15px;  letter-spacing: 2px; font-family: headfont;  }	
#eyes a:hover 	{ color: rgb(116, 229, 247);	} /*.nav a:hover::before { content: "[ "; } .nav a:hover::after { content: " ]"; }*/
.nav li ul  	{ background: rgba(250,250,250,1); color: #333; width: 200px;}
.nav li li 		{ display: block; text-align: left; border-bottom: 2px transparent solid; width: 180px;  } 
.nav li li:hover { border-bottom: 2px rgba(0,0,0,0.3) solid;  }
.nav>li:hover ul { visibility: visible; }
.sticky 		{ position: absolute; top: 120px; left: 0px; right: 0px; } .sticky #logo2 { visibility: hidden; }  .sticky a { color: #fff;   }
.fix-head 		{ position: fixed;  top: 0px; left: 0px; right: 0px; text-align: left; } .fix-head #logo2 { visibility: visible; }


.btn-skeleton 	{ padding: 10px 40px; display: inline-block; margin: auto; background: transparent; color: rgba(212, 175, 55,1); border:solid 2px rgba(212, 175, 55,1); font-size: 17px; font-weight: bold; }
/*
===============================================
****************   	MAIN 		***************
===============================================
*/
#body>section 	{ padding: 50px 20px; }

#landing 		{ width: 100vw; padding-top: 40vh; height: 60vh; position: relative; z-index: 8; }
#landing header { font-size: 80px; color: rgba(14,32,88,1);  }
#landing main 	{ max-width: 800px; padding: 20px; margin: auto; font-size: 18px; line-height: 25px;}

#landing2 		{ width: 100vw; padding-top: 20vh; height: 30vh; position: relative; z-index: 8; }
#landing2 header { font-size: 80px; color: rgba(14,32,88,1);  }
#landing2 main 	{ max-width: 800px; padding: 20px; margin: auto; font-size: 18px; line-height: 25px;}


#contact                { color: #222; padding: 80px 0px; max-width: 1200px; margin: auto; } 
#contact header 		{ font-size: 30px; }

#contact .sendme { margin-left: 10px; }
#contactform            { padding: 0px 20px;  max-width: 760px; position: relative; font-size: 13px;  }
#contactform .inputme   { margin:25px 10px;  height: 40px; line-height: 40px; width: 350px; text-indent: 10px; border-bottom: 1px #888 solid;  background: transparent; color: #222;}
#contactform .msgme   	{ width: 720px; min-height: 250px; margin: 20px 10px; line-height: 25px; text-indent: 10px; background: transparent; border: 1px #222 solid; border-radius: 5px; color: #222;  }
#contactform ::-webkit-input-placeholder  { /* Chrome/Opera/Safari */  color: #222;}
#contactform ::-moz-placeholder       { /* Firefox 19+ */  color: #222; }
#contactform :-ms-input-placeholder     { /* IE 10+ */  color: #222;}
#contactform :-moz-placeholder        { /* Firefox 18- */  color: #222; }
.sendme         { height: 40px; padding: 0px 100px; background: #007a96; color: #fff; font-weight: bold; border-radius: 5px; }
#contact p 				{ font-size: 20px; line-height: 25px;}
.socials   		{ padding: 30px;  }
.socials a 		{ color: #333; padding: 10px; font-size: 25px;  }
/*
===============================================
****************   	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; }


/* Mobile first queries */

/* Larger than mobile */


/* Larger than phablet */
@media (max-width: 720px) {
    #contactform {padding: 0px;}
    #contactform .msgme         {  width: 94%;   }
    .three-loose-P, .three-loose-PS>section, .three-loose-PA>article, .three-loose-PD>div {
        width: 96%;
    }
}

/* Larger than tablet */


/* Larger than desktop */











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

/*
===============================================
****************   	HEADER		***************
===============================================
*/
#smartcart 					{ width: 100vw; }

#head 			{ padding: 0px; position: fixed; top: 0px;  margin: 0px; left:0px; right: 0px;  display: block; width: 100%; overflow: auto; z-index: 300; background: rgb(250,250,250,0.0); border: 0; font-size: 100%; font: inherit;   }
.nav-icon 		{ display: inline-block;    position: fixed;    left: 5px;    top: 0;    width: 60px; height: 50px; font-size: 60px; line-height: 50px;  visibility: visible;  z-index: 200; }
#eyes 			{  background-color: rgb(0, 0, 0); color: #fff;   position: fixed; top: 0px;  left: 0px; right: 0px; height: auto;  }
#nav 			{  background-color: rgba(0, 0, 0,0.8); color: #fff;   padding-top: 0px;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;  }
#eyes 			{ height: 50px; text-align: left; }   
.nav a			{ display: block; color: #fff;   text-align: center; height: 10px; padding:50px 20px; line-height: 50px; margin: 0;   }
.nav a:hover 	{ background-color: #333; height: 50px; line-height: 50px; }
#eyes ul		{ position: static;		display: none; padding-top: 50px;	} /*Make dropdown links appear inline*/	
#eyes  li, #eyes li a {		width: 100%; color: #fff; text-align: left;	}
#region 		{ display: none; }
.fix-head #logo { top:0px; } 

/*
===============================================
****************   	MAIN 		***************
===============================================
*/
.cover3			{ background: url('../gallery/cover3.jpeg') no-repeat; background-size: cover; background-position: 80% 20%;}
.intro 			{ background: rgba(48, 0, 53,0.7); height: 110px; line-height: 25px; font-size: 15px; font-weight: lighter; color: #999; position: absolute; bottom: 50px; left: 50px; right: 50px; padding: 20px; text-align: center; }
#body>section 	{ width: 100%;  height: auto; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px;  }
#about2  		{ height: auto; display: block; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; margin-top: 0px; padding-top: 50px;  } #about2 .leftgallery, #about2 .rightgallery { visibility: hidden; display: none; height: 0px; width: 0px;  }
#snippet, #swiperslide 		{ height: auto; height: 180px; margin: 0 5%; } #about2 .centergallery{ width: 90%; height: auto; float: none; padding: 20px 0px; }
.form1 { width: 80%;  } .form1 input, .form1 textarea, .form1 .submission { width: 90%;  }

.t1 			{ width: 80%;  }
.job 			{ width: 90%; height: auto; margin: 50px auto; position: relative; display: block; }
 .job>main, .job>div, .job>footer, .job>a, .job nav { width: 100%; height: auto; margin: 0px auto; position: relative; display: block; overflow: hidden; top: 0px; left: auto; right: auto;    }
 .job footer { text-align: left; }


#services tr td 		{ text-align: center; line-height: 100%; vertical-align: middle; }
#services tr td:nth-of-type(1) { text-align: left; line-height: 100%; vertical-align: top;}
.cover11f			{ background: url('../gallery/cover11.jpg') no-repeat center fixed; background-size: cover; background-position: 70% 30%;  }
/*
===============================================
****************   	FOOTER 		***************
===============================================
*/


}


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