/* font reset etc.. */

@font-face {
 font-family: menus_nav;
 src: url("../font/DidactGothic-Regular.ttf") 
}

@font-face {
 font-family: headlines1;
 src: url("../font/VarelaRound-Regular.ttf") 
}


 @font-face {
 font-family: headlines3;
 src: url("../font/vag-rounded-lt-black.woff") 
}




span, div, a, h1, h2, h3, h4, p, html, form, body, dl,ul, img, object {margin: 0; border: 0; padding: 0; text-decoration: none; color: #393939; list-style-type: none; font-family:regular; font-size:14px; font-weight:normal;   }

h1 {font-family:headlines3; font-size:18pt; color:#04b0da; margin: 0 0 25px 0;   }
h2 {font-family:headlines3; font-size:18pt; color:#000;   }
h3 {font-family:headlines3; font-size:12pt; color:#04b0da;   }

#top_menu { position:sticky; z-index: 50; padding: 20px 100px 0 100px; top: 0;  display: block; width:auto; background: #fff;}
 
a.logo { position:relative;   width:64px; height:106px; display:block;    background:url(../img/logo.png) no-repeat ; text-indent:-9999px; z-index:1; float: left;}
a.logo_res { position:relative;   width:86px; height:54px; display:block; background:url(../img/iqlak_logo_blue.png) no-repeat ; text-indent:-9999px; z-index:1; float: left; margin: 15px 0 0 15px;}



 

#menu {  position: relative; width:auto; margin: 50px 0 0 80px;          }
#menu a {font-family:menus_nav; font-size: 16pt; color: #bcbec0; padding: 0 20px 0 0;   }

#menu_bottom a {font-family:menus_nav; font-size: 16pt; color: #bcbec0; padding: 0 20px 0 0;   }

#menuresponsive {  background: url(../img/navi.png) no-repeat;   display: block; height: 250px; width:300px; left: 1%;  position: fixed;   top: -180px;  z-index: 20; padding:10px 0 0 20px;
transition-duration:1s, 1s, 1s, 1s, 1s, 1s, 1s; 
transition-property:all; 
-webkit-transition-duration:1s, 1s, 1s, 1s, 1s, 1s, 1s; 
-webkit-transition-property:all;
-ms-transition-duration:1s, 1s, 1s, 1s, 1s, 1s, 1s; 
-ms-transition-property:all;
 }


#menuresponsive a {font-family:menus_nav; font-size: 16pt; color: #bcbec0; padding: 0 20px 0 0;   }

#menuresponsive:hover { top:0px;}
 
 

.width70 { width: 331px; }




a.blue {  color: #000; }

#clip  {  width:100%; height: 15px;   display:block; overflow:hidden;  }

#content_wrap_1  { width:auto;  display:block; overflow:hidden; float:left; padding:1%;}
#content_wrap_2  { width:47%;   display:block; overflow:hidden; float:left; padding:1%; text-align: center; }
#content_wrap_3  { width:32%;   display:block; overflow:hidden; float:left; padding:1%;}
#content_wrap_4  { width:24%;   display:block; overflow:hidden; float:left; padding:1%; }


p.text {font-family:menus_nav; font-size:18pt; color:#000; margin: 15px 0; }
p.text2 {font-family:menus_nav; font-size:15pt; color:#000; margin: 15px 0; }
p.text3 {font-family:menus_nav; font-size:15pt; color:#000; margin: 0; }
p.copy {font-family:headlines3; font-size:8pt; color:#000; margin: 15px 0; }

p.menu_foot a{font-family:headlines3; font-size:10pt; color:#04b0da; margin: 15px 0; }
 

p.product_name {font-family:headlines3; font-size:25pt; color:#000;  }
p.benefits {font-family:headlines3; font-size:20pt; color:#a7a9ac;}
label.txt  {font-family:menus_nav; font-size:15pt; color:#000; margin: 15px 0; }
p.ingredients {font-family:headlines3; font-size:20pt; color:#000;}
p.slogan {font-family:headlines3; font-size:30pt; color:#a7a9ac; margin: 30% 0 0 0; }
p.slogan1 {font-family:headlines3; font-size:20pt; color:#a7a9ac; margin: 10% 0 0 0; }
ul.slogan2 {font-family:headlines3; font-size:18pt; color:#04b0da; margin: 10% 0 0 0; }

#bkg { width:100%;  background:#f8f8f8; display: block; overflow: hidden;padding: 30px 0; }

a.button {font-family:headlines3; font-size:30pt; color:#fff; background:#04b0da; padding: 5px 20px; -webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;}


a.button1 {font-family:headlines3; font-size:30pt; color:#fff; background:#a7a9ac; padding: 5px 20px; -webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;}


#boxl { width: 85%; position: relative; margin: 40px auto;}
#boxll  { width: 350px; float: left;  }


#boxr { width: 85%; position: relative; margin: 40px auto;}
#boxrl  { width: 300px; float: right; margin-left: 70px; margin-bottom: 30px; }



.column { display:block;}


#menu_bottom { display: none;}



 


@media only screen and (max-width: 1200px) { 
	
 
	#content_wrap_2  { width:100%; text-align: center;}
	#boxll, #boxrl { width: 100%;  }

}

@media only screen and (max-width: 900px) { 
	
	img { width: 100%;}
	.width70 { width: 50%; }

}


@media only screen and (max-width: 700px) { 
	.width70 { width: 60%; }

#top_menu { display: none;}
#menu_bottom { display: block;}
#off { display: none;}	
	
	
h1 { font-size:12pt; }
h2 { font-size:12pt; }
h3 { font-size:10pt; }
	
	
p.text {font-size:12pt; }
p.text2 { font-size:12pt;  }
p.text3 { font-size:12pt;  }
p.copy { font-size:8pt;  }
p.product_name {font-size:12pt;  }
p.benefits {font-size:12pt;}
label.txt  {font-size:12pt; c }
p.ingredients {font-size:15pt; }
p.slogan {font-size:16pt; }
p.slogan1 {font-size:14pt; }
ul.slogan2 {font-size:12pt; }	
	
	
a.button { font-size:15pt;  padding: 5px 10px; -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;}


a.button1 { font-size:15pt; padding: 5px 10px; -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;}
	
}