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

*, body{font-family: "din-2014", sans-serif; margin: 0; padding: 0; }
body{max-width: 100%; overflow-x: hidden;}
span h1, h3 span, h2 span {display: block}
h3 span, h2 span {color: #929292}
h3, h2{color: #000000}
h1, h2, h3, h4{font-weight: 800}
.btn-primary{background-color: #666; border: #666;}
.btn-primary:hover{background-color: #000;}
.btn-secondary{    color: #fff; display: block;   width: fit-content; margin: 20px auto; }

iframe{ margin:20px 0!important; min-height: 450px!important; box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;}

header{color: #ffffff; background: url("../images/back-header.jpg") no-repeat center bottom; background-size: cover  }
header h1{color: #fff; margin-bottom: 45px!important; font-size: 35px; text-transform: uppercase; width: 70%!important;}
header h2, header h3{color: #fff; font-weight: normal}
header h1 span{display: block; font-weight: 400; color: #eee; font-size: 20px}
header .brand {text-align: center}
header .brand .logo-header{margin: 0 auto; margin-bottom:45px; width: 300px}
header .brand .social {position: absolute; top: 1%; right: 5%;}
header .brand .social a{padding: 10px; margin: 5px; display: inline-block}


header form input, header form textarea{ padding: 10px; margin-bottom: .8%; color: #666}
header form .full-width{width: 100%}
header form .half-width{width: 49%}
header form .half-width.first{margin-right: .8%}
header form input[type='submit']{background:#000; color:#fff; text-align: center; width: 100%; border: 1px solid #fff;  }

#intro{background:#eeeeee; padding: 25px; text-align: center; padding-bottom: 0}
.arrow-down { margin-top: -18px; width: 100px; height: 0;  border-left: 49vw solid transparent; border-right: 49vw solid transparent;   border-top: 50px solid #eee; margin-bottom: 30px}

#productos{position: relative; z-index: 100}

.gray-skewed-back:before{background: url("../images/gray-skewed-before.jpg") top no-repeat; height: 316px;content: ''; display: block; background-size: 100% 100%}
.gray-skewed-back:after{background: url("../images/gray-skewed-after.jpg") bottom no-repeat; height:  316px; content: ''; display: block; background-size:100% 100%; margin-top: -120px}
.gray-skewed-back{background:#ebebeb; margin-top:-250px; margin-bottom:0px}



footer{background: url("../images/back-bottom.jpg") no-repeat top; padding-top: 350px; height: 550px; background-size: cover; text-align: center; color: #ffffff; margin-top: -120px; position: relative; font-size: 14px}
footer img.logo-footer{display: block; width: 176px; margin: 35px auto}
footer  .social {position: absolute; bottom: 50px; right: 5%;}
footer .social a{padding: 10px; margin: 5px; display: inline-block}
footer .social a img{height: 22px}


/*whatsapp pie*/
.wa_cta {
    position: fixed;
    left: 1px;
    bottom: 1px;
    z-index: 1000;
    color: #fff;
}
.wa_button.fixed_corner {
    margin: 10px;
    padding: 10px ;
    border-radius: 50px;
    background: rgba(0,133,86,.8);
    display: block;
}

.wa_cta .fa {
    font-size: 45px!important;
	color:#ffffff
}


@media (max-width: 700px) {
	
	header .brand .social{position: relative; margin-bottom: 25px }
	header h1{ font-size: 26px; text-align: center; width: 100%!important}
	header .brand .logo-header{margin-bottom: 10px}
	header .col-4 {text-align: center}
	header .col-4 img{max-height: 150px; margin:10px auto; max-width: 90%}
	header h2, header h3, header span, header span {text-align: center; width: 100%; display: block}
	.img-small{float: right; display: inline-block; margin-right: 10px; margin-bottom: 10px}
	header form {margin-bottom: 25px}
	header form .half-width{width: 100%}
	header form input{padding: 5px}
	footer{padding-top: 200px}
	footer  .social{ display: block; position: relative; margin:5px; bottom: unset; top:unset}
	#bond{margin-top: -150px}

	
}