/*=============================================
FOOTER
=============================================*/
a{
	color: #FFF;
	text-decoration: none;
}
a:hover{color:#0D5363;}

.flex{
	display: flex;
	justify-content: space-between;
}
.flex>li{
	flex:1;
	margin-right:16px;
}
.white{ 
	display: block;
	padding: 10px 0;
	color: #fff; 
	font-weight: 500;
}

.title{
	display: block;
	margin-bottom: 8px;
	color: #FFF;
	font-family: 'Anton', sans-serif;
	font-size: 22px;
	letter-spacing: 1.4px;
}
button{
	color: #fff;
	font-size: 14px;
	background-color:#F28705;
	border:none;
	transition: all 0.3s;
	cursor: pointer;
	border-radius: 20px
}

footer{
	width: 100%;
	height: 100%;
	color: #8d9293;
	background-color:#038C8C;
	margin-top:10px;
}

footer .wrap{
	width: 900px;
	margin: auto;
	padding: 40px 0;
}
footer .wrap .upper_side ul.flex li{
	padding: 4px 0;
}

/* mid box */
footer .wrap .mid_side{
	margin: 50px 0;
}
footer .wrap .mid_side ul.second_depth li p{
	margin:12px 0;
	color: #FFF;
}
footer .wrap .mid_side ul.second_depth li button.store{
	width: 200px;
	line-height: 3;
	background-color: #F28705;
}

a.store{
	width: 200px;
	line-height: 3;
	background-color: #F28705;
	padding: 12px 52px;
    border-radius: 20px;
}

a.store:hover{
	background-color: #0D5363;
	color:#FFF;
}

footer .wrap .mid_side ul.second_depth li button.store:hover{
	background-color: #0D5363;
	color:#FFF;
}
footer .wrap .mid_side ul.sns{
	width: 160px;
}
footer .wrap .mid_side ul.sns li{ margin-right:4px;}
footer .wrap .mid_side ul.sns li a{
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	padding: 8px;
	background-color: #3e3e3e;
	transition: all 0.3s;
}
footer .wrap .mid_side ul.sns li:nth-child(1):hover a{
	background-color: #3b5998;
}
footer .wrap .mid_side ul.sns li:nth-child(2):hover a{
	background-color: #00aced;
}
footer .wrap .mid_side ul.sns li:nth-child(3):hover a{
	background-color: #b00;;
}
footer .wrap .mid_side ul.sns li:nth-child(4):hover a{
	background-color: #517fa4;
}

footer .wrap .mid_side ul.sns li a i{
	color: #fff;
	font-size: 18px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

footer .wrap .mid_side ul li .input_box{
	width: 300px;
}
footer .wrap .mid_side ul li .input_box input{
	width: 250px;
	padding-left: 10px;
	height: 40px;
	background-color: #FFFFFF;
}
footer .wrap .mid_side ul li .input_box button{
	width: 50px;
	height: 36px;
}
footer .wrap .mid_side ul li .input_box button:hover{
	background-color: #0D5363;
}
/* last box */
footer .wrap .lower_side{
	position: relative;
	width: 466px;
}
footer .wrap .lower_side ul.flex{
	align-items: flex-end;
}
footer .wrap .lower_side ul.flex li{
	margin-bottom:-1px;
	flex: none;
}
footer .wrap .lower_side li.logo{
	display: block;
    width: 140px;
    height: 78px;
	margin-bottom:0px!important;
    background: url(../img/logobyn.png) no-repeat center;
    background-size: cover;
}

/*suscribirse*/
.ss-subscribe-container {
	overflow: hidden;
	width: 100%;	
	margin-top:0px;
	border-top: 1px solid #396;
}

.ss-subscribe-container p {	
	font-size:14px; 
	color:#FFF; 
	text-align:center;
}

.ss-subscribe-container p.ss-title{
	text-transform: uppercase;
	line-height: 50px;
}

.ss-subscribe-container input.ss-input {
	display: inline-block;
	padding: 5px 7px;
	background-color: #dbd8d8;
	color:#333;
	text-decoration:none;
	border: solid 1px #dbd8d8;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin: 0;
	line-height: 18px;
	width: 300px;
}

.ss-subscribe-container a.ss-btn {
	display: inline-block;
	padding: 5px 7px;
	background-color: #F28705;
	color:#FFF;
	text-decoration:none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin: 0;
	line-height: 28px;
    width: 40px;
    height: 39px;
}

/*.ss-subscribe-container a:hover.ss-btn {
	color:#000;
}*/

.ss-subscribe-container a:hover.ss-btn {
	background-color:#0D5363;
}

.ss-subscribe-container p.ss-error-container{
	display: none;
	color: #FFFFFF;
	line-height: 40px;	
}

.caret {
		position: relative;
		color: #F28705
	}

	.caret:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  border-left: 20px solid #FFFFFF;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      margin: -13px -37px 10px -3px;	  
	}

	.caret:after {
	  content: '';
	  position: absolute;
	  left: 0;
	  top: 10px;
	  border-left: 0px solid #fff;
	  border-top: 0px solid transparent;
	  border-bottom: 0px solid transparent;
	}
/*suscribirse*/

/*MODAL CONTACTENOS*/

#modalCero .modal-content {
    width: 381px;
    margin: 35px 473px;
    background-color: #038C8C;
    border-radius: 30px
}

.contact-form .close{
	margin-top:-25px;
}

#form_c {
    background-color: #038C8C;
    width: 365px;
    text-align: center;
    border-radius: 25px;
    padding: 0px 10px 10px 10px;
    margin: -20px 10px 10px 10px;
}

#form_c h1{
	color:#FFF;
	padding: 0px 0px 5px 0px;
}

#form_c p{
	color:#FFF;
}

#form_c button {
    color: #fff;
    font-size: 14px;
    background-color: #F28705;
    border: none;
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 20px;
    height: 35px;
    width: 230px;
}

#form_c button:hover {
	background-color: #0D5363;
}

/*MODAL RECOMENDAR UN PROVEEDOR*/
#modalRecomendaciones .modal-content {
    width: 390px;
    margin: 10px 466px;
    background-color: #038C8C;
    border-radius: 30px
}

.contact-form .close{
	margin-top:-25px;
}

#form_cdado {
    background-color: #038C8C;
    width: 365px;
    text-align: center;
    border-radius: 25px;
    padding: 0px 10px 10px 10px;
    margin: 30px 10px 10px 10px;
}

#form_cdado h1{
  color:#FFF;
  padding: 10px 0;
  font-size: 26px;
}

#form_cdado p{
	color:#FFF;
}

#form_cdado button {
    color: #fff;
    font-size: 14px;
    background-color: #F28705;
    border: none;
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 20px;
    height: 35px;
    width: 230px;
}
#form_cdado button:hover {
	background-color: #0D5363;
}
/*==================================================================*/
@media (max-width: 320px) {
	/* common css */
	.flex{
		flex-direction:column;
	}
	.title{
		font-size: 18px;
	}
	footer .wrap{
		width: 90%;
/*		min-width:320px;*/
	}
	footer .wrap .upper_side ul.flex li{
		position: relative;
		padding:8px 0;
	}
	.caretj {
	    position: relative;
	    width: 60px;
	    margin-left: 267px;
	    cursor: pointer;
	  }
	.caretj:before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    border-top: 10px solid #FFFFFF;
	    border-left: 10px solid transparent;
	    border-right: 10px solid transparent;
	}
	.caretj:after {
	    content: '';
	    position: absolute;
	    left: 10px;
	    top: 0;
	    border-top: 0px solid #eeeeee;
	    border-left: 0px solid transparent;
	    border-right: 0px solid transparent;
	}

	/*caret suscribirse*/
	.caret {
		position: relative;
	}

	.caret:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  border-left: 10px solid #FFFFFF;
	  border-top: 10px solid transparent;
	  border-bottom: 10px solid transparent;
	  margin: -13px -37px 10px -5px;
	}

	.caret:after {
	  content: '';
	  position: absolute;
	  left: 0;
	  top: 10px;
	  border-left: 0px solid #fff;
	  border-top: 0px solid transparent;
	  border-bottom: 0px solid transparent;
	}

	footer .wrap .upper_side ul.second_depth{
		height: 0;
		display:none;
	}
	footer .wrap .upper_side li.first_depth.on ul.second_depth{
		height: auto;
		display: block;
	}
/* mid box */
	footer .wrap .mid_side{
		margin: 30px 0;
	}
	footer .wrap .mid_side ul.flex > li{
		margin: 10px 0;
	}
	footer .wrap .mid_side ul.second_depth li p{
		display:none;
	}
	footer .wrap .mid_side ul.second_depth li button.store{
		width: 100%;
		margin-top: 8px;
	}
	footer .wrap .mid_side ul.sns{
		flex-direction: row;
	}
	footer .wrap .mid_side ul li .input_box{
		width: 100%;
		flex-direction: row;
		margin-top: 12px;
	}
	footer .wrap .mid_side ul li .input_box input{
		width: 80%;
	}
	footer .wrap .mid_side ul li .input_box button{
		width: 20%;
	}
/* last box */
	footer .wrap .lower_side{
		width: 100%;
		color: #FFF;
	}
	footer .wrap .lower_side ul.flex{
		flex-direction: row;
		flex-wrap:wrap;
		color: #FFF;
	}

	#modalCero .modal-content {
	    margin: 15px 15px;
	}

	#modalRecomendaciones .modal-content {
	    margin: 15px 15px;
	}
}/*end 320*/
/*Aplica a dispositivos con un ancho de pantalla mínimo de 320 píxeles y un ancho de pantalla máximo de 576 píxeles.*/
@media (min-width: 321px) and (max-width: 576px) {
	.caretj {
	    position: relative;
	    cursor: pointer;
	    float: right;
	  }
}

/*Aplica a dispositivos con un ancho de pantalla mínimo de 577 píxeles y un ancho de pantalla máximo de 768 píxeles.*/
@media (min-width: 577px) and (max-width: 768px) {
	.caretj {
	    position: relative;
	    cursor: pointer;
	    float: right;
	  }
	
}

@media all and (max-width:639px){
	
/* common css */
	.flex{
		flex-direction:column;
	}
	.title{
		font-size: 18px;
	}
	footer .wrap{
		width: 90%;
/*		min-width:320px;*/
	}
	footer .wrap .upper_side ul.flex li{
		position: relative;
		padding:8px 0;
	}
	.caretj {
	    /*position: relative;
	    width: 60px;
	    margin-left: 540px;
	    cursor: pointer;*/
	  }
	.caretj:before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    border-top: 10px solid #FFFFFF;
	    border-left: 10px solid transparent;
	    border-right: 10px solid transparent;
	}
	.caretj:after {
	    content: '';
	    position: absolute;
	    left: 10px;
	    top: 0;
	    border-top: 0px solid #eeeeee;
	    border-left: 0px solid transparent;
	    border-right: 0px solid transparent;
	}

	/*caret suscribirse*/
	.caret {
		position: relative;
	}

	.caret:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  border-left: 10px solid #FFFFFF;
	  border-top: 10px solid transparent;
	  border-bottom: 10px solid transparent;
	  margin: -13px -37px 10px -5px;
	}

	.caret:after {
	  content: '';
	  position: absolute;
	  left: 0;
	  top: 10px;
	  border-left: 0px solid #fff;
	  border-top: 0px solid transparent;
	  border-bottom: 0px solid transparent;
	}

	footer .wrap .upper_side ul.second_depth{
		height: 0;
		display:none;
	}
	footer .wrap .upper_side li.first_depth.on ul.second_depth{
		height: auto;
		display: block;
	}
/* mid box */
	footer .wrap .mid_side{
		margin: 30px 0;
	}
	footer .wrap .mid_side ul.flex > li{
		margin: 10px 0;
	}
	footer .wrap .mid_side ul.second_depth li p{
		display:none;
	}
	footer .wrap .mid_side ul.second_depth li button.store{
		width: 100%;
		margin-top: 8px;
	}
	footer .wrap .mid_side ul.sns{
		flex-direction: row;
	}
	footer .wrap .mid_side ul li .input_box{
		width: 100%;
		flex-direction: row;
		margin-top: 12px;
	}
	footer .wrap .mid_side ul li .input_box input{
		width: 80%;
	}
	footer .wrap .mid_side ul li .input_box button{
		width: 20%;
	}
/* last box */
	footer .wrap .lower_side{
		width: 100%;
		color: #FFF;
	}
	footer .wrap .lower_side ul.flex{
		flex-direction: row;
		flex-wrap:wrap;
		color: #FFF;
	}

	#modalCero .modal-content {
	    margin: 15px 15px;
	}

	#modalRecomendaciones .modal-content {
	    margin: 15px 15px;
	}

}

@media all and (max-width:1023px) and (min-width:640px){
	
	footer .wrap{
		width: 90%;
	}
	
/* mid box */
	footer .wrap .mid_side ul.second_depth{
		margin-top: 14px;
	}	
	footer .wrap .mid_side ul.second_depth li p{
		display:none;
	}
	footer .wrap .mid_side ul.second_depth li button.store{
		width: 160px;
	}
	footer .wrap .mid_side ul li .input_box{
		width: 230px;
	}

	footer .wrap .mid_side ul li .input_box input {
      width: 190px;
    }

    .ss-subscribe-container a.ss-btn {
	  display: inline-block;
	  padding: 5px 7px;
	  background-color: #F28705;
	  color: #FFF;
	  text-decoration: none;
	  -moz-border-radius: 4px;
	  -webkit-border-radius: 4px;
	  border-radius: 4px;
	  margin: 0;
	  line-height: 29px;
	  width: 35px;
	  height: 39px;
	}
	
}