body{
 font-size:40px;
 font-family: 'Roboto Condensed', sans-serif;
   text-align: left;
 margin:0px;
padding:0px;
 background:#f6f6e8;
}


#width-temp{
 position:fixed;
 color:red;
 top:0px;
 left:opx;
 font-size:15px; 
 z-index:1100;
}

h2{
 font-family: 'Roboto Condensed', sans-serif;
 font-size: 36px;
 font-weight: bold;
 line-height: 60px;
 text-align:left;
}

h2.dark{
 text-align:center;
}

h2.products{
 text-align:left;
 font-size: 35px;
 color:#d10938;
}

h3{
 font-family: 'Roboto Condensed', sans-serif;
 font-size: 25px;
 font-weight: bold;
}

.normal-text, .normal-text a:link, .normal-text a:active,.normal-text a:visited{
 font-family: 'Roboto', sans-serif;
 font-size: 18px;
 font-weight: 600;
 line-height: 30px;
  text-align: left;
  	color: #ddddb6;
   text-decoration:none;
   z-index:100;
}

	


#main-menu-container{
 position:fixed;
 top:0px;
 bottom:0px;
 right:0px;
 width:340px;
 opacity: .97;
  background:#1b1911;
 z-index:1000;
 display:none;
}


.nav-overlay-inner {
        padding: 102px 32px 54px 32px;
        height: calc(100% - 176px);
}


.nav-link {
    font-size: 25px;
	color: #ddddb6;
    text-transform: uppercase;
    line-height: 1em;
    font-weight: 600;
    display: inline-block;
    float: right;
    clear: right;
    margin-bottom: 40px;
    position: relative;
	text-decoration:none;
}

.nav-link:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: red;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.nav-link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.nav-link:hover {
 color:#d10938;
}

#close-icon{
 position:fixed;
 width:32px;
 height:auto;
 top:20px;
 right:20px;
 cursor: pointer;
}

#main-container-1{ 
 background: white url("img/bg-light.png") repeat;
 width:100%;
}

#header{
  margin: auto;
  width: auto;
  max-width:1022px;
}


.logo{
  padding-top: 20px;
  float:left;
 }
 
.burger{
  padding-top: 38px;
  float:right;
  text-align: right;
  cursor:pointer;
 }


#header-image{
  margin: auto;
  background: url("img/header-photo-gr.png") no-repeat;
  margin-top:-80px;
  background-size: contain;
  width: 100%;
  height: 0px;
max-height: 700px;
  background-size: contain;  
  max-width:1022px;
background-repeat:no-repeat;
background-size:contain;
background-size: 100%;
background-position:center;
padding-bottom:69%;
max-height: 700px;
}


#container-1{
 position:relative;
 width: 100%;
 height: auto;
   padding-bottom:50px;
}



#s-container-1{
position:relative; 
 padding-top:60px;
  padding-bottom:90px;
  margin: auto;
  width: 100%;
  height:auto;
  max-width: 1022px;
}


.sketch-1{
  position: absolute;
  margin-left:-100px;
  margin-top:0px;
}

.sketch-2{
  position: absolute;
  margin-left:-5%;
  margin-top:20px;
}

.sketch-3{
  position: absolute;
  right: 2%;
  margin-top:440px;
}

.sketch-5{
  position: absolute;
  left: 1%;
  margin-top:140px;
  max-width:100%;
  height:auto;
  
}

.col-1{
 width:50%;
 float: left; 
}

.col-2{
 width:50%;
 float: left;
}

.col-2 img{
 padding-top:50px;
 padding-left:20px;
}

.col-3{
 width:50%;
 float: left;
 padding-bottom:5px;
}

.col-3 img{
 padding-top:20px;
 padding-left:0px;
 max-width:98%;
 height:auto;
}



.col-5{
 width:50%;
 float: left; 
}

.col-6{
 width:50%;
 float: left;
}

#clear {
    clear: both;
}


#main-container-2{
 position:relative;
 width:100%;
 background: #000000 url("img/bg-dark.png") repeat;
}


#menu-products{
 position:relative;
 width:601px;
 height:126px;
 margin: 0 auto;
 text-align:center;

}

#center-wrapper{
 margin:auto;
 display: inline-block;
}

#m-product-1{
 background: url("img/menu-1-active.png") no-repeat;
   width: calc(331px*0.7); 
   height: calc(160px*0.7);
   background-size: calc(331px*0.7) calc(160px*0.7);

 float:left;
 cursor:default; 
}
#m-product-2{
 background: url("img/menu-2-inactive.png") no-repeat;
   width: calc(214px*0.7); 
   height: calc(166px*0.7);
   background-size: calc(214px*0.7) calc(166px*0.7);
   margin-top:9px;
  float:left;
   cursor:pointer; 
}
#m-product-3{
 background: url("img/menu-3-inactive.png") no-repeat;
 width: calc(313px*0.7); 
 height: calc(159px*0.7);
 background-size: calc(313px*0.7) calc(159px*0.7);
 cursor:pointer; 
 float:left;
}

#products-container-1 img, #products-container-2 img, #products-container-3 img{
    max-width: 98%;
    height: auto;
}


#products-container-1{
   position:relative;
   width: auto;
   height: auto;
   max-width:1022px;    
   margin: 0 auto;
    text-align:center;
	   padding-left:15px;
   padding-right:15px;
}


#products-container-2, #products-container-3{
   position:relative;
   width: auto;
   height: auto;
   max-width:1022px;
   margin: 0 auto;
   text-align:center;
   padding-left:15px;
   padding-right:15px;

   display:none;
}





#contact-title{
 max-width:1022px;
 width:100%;
 height:auto;
 margin:0 auto;
 text-align:center;
}


#footer-line{
 width:100%;
 height:1px;
 background:white;
 opacity:0.2;

}



.formWrapp {
  position:relative;	
  padding:20px;
}

.formWrapp input[type="text"], .formWrapp input[type="email"], .formWrapp textarea {
	font-size:18px;
	height: 40px;
	background-color: transparent;
	border: 2px solid #ddddb6;
	color: #ddddb6;
	width:98%;
	margin-bottom:30px;
	padding-left:5px;

	font-family: 'Roboto Condensed', sans-serif;
}

.formWrapp textarea {
height: 90px;
resize: none; 
}

.formWrapp input[type="submit"] {
	font-family: 'Roboto Condensed', sans-serif;
font-size:18px;
font-weight:bold;
	float: right;
	background-color: #ddddb6;
	border: 2px solid #ddddb6;
	color: #252220;
	text-transform: uppercase;
	width: 200px;
	height: 50px;
	text-align: left;
	padding-left: 25px;
	letter-spacing: 4px;

	background-image: url(img/sendmail.png);
	background-repeat: no-repeat;
	background-position: 90% center;
}


.formWrapp input[type="text"]:hover , .formWrapp input[type="email"]:hover , .formWrapp textarea:hover {
 background-color: rgba(255, 255, 255, 0.1);
}
.formWrapp input[type="text"]:focus , .formWrapp input[type="email"]:focus , .formWrapp textarea:focus {
  border: 2px solid #d10938;
 background-color: rgba(255, 255, 255, 0.2);
}

.formWrapp input[type="submit"]:hover {
  border: 2px solid #d10938;
  background-color: #d10938;
  cursor:pointer;
}

.socialWrapp{
	  padding:20px;
}	


.socialWrappMenu{
	  padding:20px;
	 
}	

#footer-social{
  position:static;
  width:68px;height:68px;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out; 
 }
 
  #footer-social:hover{ 
moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

#footer-social a{
  position:absolute;
  width:68px;height:68px;

}
 
#footer-social.facebook{background: url(img/social-facebook.png) no-repeat;padding-left:10px;float:left;cursor:pointer;}
#footer-social.instagram{background: url(img/social-instagram.png) no-repeat;padding-left:10px;float:left;cursor:pointer;}
#footer-social.youtube{background: url(img/social-youtube.png) no-repeat;padding-left:10px;float:left;cursor:pointer;}

#footer-img img{
   opacity:0.2;	
}
#footer-img img:hover{
   opacity:0.9;	
}

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

.col-1{
 width:auto;
 padding-left:15px;
 padding-right:15px;
}

.col-2{
 width:100%;
 text-align:center;
}


.col-3{
 padding-top:20px;	
 padding-bottom:40px;	
 width:100%;
 text-align:center;
 
}

.col-3 img{
 padding-top:0px;
   max-width:90%;
   height:auto;

}


.col-5{
 width:100%;

}

.col-6{
 width:100%;
 text-align:center;
}

.sketch-5{
   -webkit-transform: scale(0.6); /* Saf3.1+, Chrome */
    -moz-transform: scale(0.6); /* FF3.5+ */
    -ms-transform: scale(0.6); /* IE9 */
    -o-transform: scale(0.6); /* Opera 10.5+ */
    transform: scale(0.6);
	  margin-top:0px;
	left:-90px;
}

}










/* ------------------MOBILE--640------------------ */

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

h2{
 font-size: 24px;
 line-height: 32px;
}

h2.products{
 font-size:18px;
}

h3{
 font-size: 17px;
   text-align: left;
}

.normal-text, .normal-text a:link, .normal-text a:active,.normal-text a:visited{
 font-size: 15px;
 line-height: 20px;
}

#main-menu-container{
 width:100%;
}

  #header{
   width:100%;
   margin-top:-10px;
  }
  
  #header-image{
   width: 100%;
   height: 0px;
   padding-bottom: 69%;
   background-size: contain;
  }

.logo img{
    -webkit-transform: scale(0.7); /* Saf3.1+, Chrome */
    -moz-transform: scale(0.7); /* FF3.5+ */
    -ms-transform: scale(0.7); /* IE9 */
    -o-transform: scale(0.7); /* Opera 10.5+ */
    transform: scale(0.7);
	margin-left: -20px;
}

.burger img{
    -webkit-transform: scale(0.8); /* Saf3.1+, Chrome */
    -moz-transform: scale(0.8); /* FF3.5+ */
    -ms-transform: scale(0.8); /* IE9 */
    -o-transform: scale(0.8); /* Opera 10.5+ */
    transform: scale(0.8);
	margin-right: 5px;
	padding-top:10px;
}

#container-1{
   padding-bottom:10px;	
}	

#s-container-1{
  width:100%;
  padding-top:10px;
  padding-bottom:20px;
  text-align:center;
  
}

.col-1{
 width:auto;

}

.col-2{
 width:100%;
}
.col-2 img{
   width:271px;
   height:304px;
  padding-bottom:40px;

}

.col-3{
 padding-top:10px;	
 padding-bottom:10px;	
 text-align:center;
  
}


.col-3 img{
   max-width:60%;
   height:auto;
}

.col-5{
 width:100%;
}

.col-6{
 width:100%;
}

.sketch-1{
  margin-left:-200px;
}

.sketch-2{
   -webkit-transform: scale(0.6); /* Saf3.1+, Chrome */
    -moz-transform: scale(0.6); /* FF3.5+ */
    -ms-transform: scale(0.6); /* IE9 */
    -o-transform: scale(0.6); /* Opera 10.5+ */
    transform: scale(0.6);
	margin-left:-40px;
}

.sketch-3{
   -webkit-transform: scale(0.4); /* Saf3.1+, Chrome */
    -moz-transform: scale(0.4); /* FF3.5+ */
    -ms-transform: scale(0.4); /* IE9 */
    -o-transform: scale(0.4); /* Opera 10.5+ */
    transform: scale(0.4);
	  margin-top:300px;
	right:-30px;
}

.sketch-5{
   -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
    -moz-transform: scale(0.5); /* FF3.5+ */
    -ms-transform: scale(0.5); /* IE9 */
    -o-transform: scale(0.5); /* Opera 10.5+ */
    transform: scale(0.5);
	  margin-top:0px;
	left:-140px;
}

#main-container-2{
 width:auto;
}

#menu-products{
 width:97%;
 height: auto; 
 margin: 0 auto;

}

#center-wrapper{
  margin:auto;
}


#m-product-1{
   width: calc(331px*0.45); 
   height: calc(160px*0.45);
   background-size: calc(331px*0.45) calc(160px*0.45);
}

#m-product-2{
   width: calc(214px*0.45); 
   height: calc(166px*0.45);
   background-size: calc(214px*0.45) calc(166px*0.45);
   margin-top:6px;
}
#m-product-3{
   width: calc(313px*0.45); 
   height: calc(159px*0.45);
   background-size: calc(313px*0.45) calc(159px*0.45);
}

#products-container-1, #products-container-2, #products-container-3{
 width:auto;
 padding-left:8px;
 padding-right:8px;
}


#products-container-1 img{
 width:259px;
 height:250px;
}

/* ------------------------------------------------------------------------------- */



/* ------------------MOBILE--440------------------ */

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


.sketch-3{
 margin-top:200px;

}

#m-product-1{
   width: calc(331px*0.33); 
   height: calc(160px*0.33);
   background-size: calc(331px*0.33) calc(160px*0.33);
   background-size: calc(331px*0.33) calc(160px*0.33);
}

#m-product-2{
   width: calc(214px*0.33); 
   height: calc(166px*0.33);
   background-size: calc(214px*0.33) calc(166px*0.33);
   margin-top:4px;
}
#m-product-3{
   width: calc(313px*0.33); 
   height: calc(159px*0.33);
   background-size: calc(313px*0.33) calc(159px*0.33);
}

#products-container-1 img{
 width:207px;
 height:200px;
}

#products-container-1, #products-container-2, #products-container-3{
 width:auto;
 padding-left:4px;
 padding-right:4px;
}



}


/* ------------------------------------------------------------------------------- */

@media screen and (max-width: 640px) {
  body {
   font-size:20px;
  }
 
}