/* body
------------------------------------------------------------------------------------------------------  */
body {
    margin: 0 auto;
    width: 100%;
    padding: 0px;
    font-size: 16px;
/*	font-family: 'Raleway'; */
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	background-color: #fff;
	background-image: url('../img/background.jpg');
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}


	/* row
	------------------------------------------------------------------------------------------------------  */
	.row{
		width: 100%;
		margin: 0 auto;
		padding: 0px;
	}


	/* cols
	------------------------------------------------------------------------------------------------------  */
	.col_100    { float: left; margin: 0px; padding: 0px; width: 100%; }
	.col_90     { float: left; margin: 0px; padding: 0px; width: 90%; }
	.col_75     { float: left; margin: 0px; padding: 0px; width: 75%; }
	.col_70     { float: left; margin: 0px; padding: 0px; width: 70%; }
	.col_66     { float: left; margin: 0px; padding: 0px; width: 66.66%; }
	.col_60     { float: left; margin: 0px; padding: 0px; width: 60%; }
	.col_55     { float: left; margin: 0px; padding: 0px; width: 55%; }
	.col_50     { float: left; margin: 0px; padding: 0px; width: 50%; }
	.col_40     { float: left; margin: 0px; padding: 0px; width: 40%; }
	.col_33     { float: left; margin: 0px; padding: 0px; width: 33.33%; }
	.col_30     { float: left; margin: 0px; padding: 0px; width: 30%; }
	.col_25     { float: left; margin: 0px; padding: 0px; width: 25%; }
	.col_20     { float: left; margin: 0px; padding: 0px; width: 20%; }
	.col_10     { float: left; margin: 0px; padding: 0px; width: 10%; }


	/* content
	------------------------------------------------------------------------------------------------------  */
	.content{
		margin: 0 auto;
		width: 90%;
	    max-width: 1300px;
	}


	/* h
	------------------------------------------------------------------------------------------------------  */
	h1{
		font-size: 36px;
		line-height: 80px;
	}
	h2{
		font-size: 34px;
		font-weight: 600;
	}
	h3{
		font-size: 32px;
	}


	/* tools
	------------------------------------------------------------------------------------------------------  */
	.text-center{
		text-align: center;
	}
	.text-right{
		text-align: right;
	}
	.text_color_white{
		color: #ffffff !important;
	}
	.text_color_yellow{
		color: #ffd24d !important;
	}
	.text_color_bocrem{
		color: #ed2349 !important;
	}
	.back_color_yellow{
		float: left;
		height: 385px;
		background-color: #ffd24d;
	}
	.back_color_black{
		float: left;
		height: 385px;
		background-color: #000000;
	}
	.back_color_bocrem{
		float: left;
		width: 100%;
		height: 386px;
		background-color: #ed2349;
	}
	.back_color_blue{
		float: left;
		height: 385px;
		margin-top: -386px;
		background-color: #0a214f;
	}
	.back_color_white{
		float: left;
		height: 385px;
		background-color: #fff;
	}
	.text_color_blue{
		color: #0a214f !important;
	}
	.text_color_marron{
		color: #3d1116 !important;
	}
	.btn{
		display: inline-block;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 50px;
		text-decoration: none;
		padding:15px 20px;
		font-size: 20px;
		color: #fff;
		font-weight: 800;
	}
	.btn:hover{
		background: rgba(0, 0, 0, 0.8);
	}
	.btn-blue{
		background-color:#0a214f;
	}
	.btn-yellow{
		background-color:#ffd24d;
	}
	.btn-bocrem{
		background-color: #ed2349;
	}
	.item-img{
		width: 80%;
	}
	.link{
		text-decoration: none;
		color:#0a214f;
	}
	.link:hover{
		text-decoration: underline;
	}

	.back_bocrem_chica{
		float: left;
		width: 100%;
		height: 800px;
/*		border: 8px solid #fff; */	
		background-image: url('../img/bocrem-chica.jpg');
		background-position: center center;
		background-repeat: none;
		background-size: cover;
	}

	.back_profiteroles{
		float: left;
		width: 100%;
		height: 800px;
/*		border: 8px solid #fff; */	
		background-image: url('../img/back-profiteroles.jpg');
		background-position: center center;
		background-repeat: none;
		background-size: cover;
	}
	
	.back_lyonesas{
		float: left;
		width: 100%;
		height: 800px;
/*		border: 8px solid #fff; */
		background-image: url('../img/back-lyonesas.jpg');
		background-position: center center;
		background-repeat: none;
		background-size: cover;
	}

	.box-producto{
		display: table;
	}
	.box-nosotros{
		padding:60px 0px;
	}
	.box-producto .box-content-producto{
		display: table-cell;
		vertical-align: middle;		
	}
	.box-producto .box-content-producto .items{
		margin: 0 auto;
		width: 65%;
	}
	.box-producto .box-content-producto .items h2{
		color: #fff;
		line-height: 27px
	}
	.box-producto .box-content-producto .items .txt{
		display: inline-block;
		font-size: 22px;
		font-weight: 700px;
		margin-top: -20px;
		margin-bottom: 20px;
	}

	.box-form{
		display: table;
		width: 100%;
		height: 800px;
		background-color: #fff;
	}
	.box-form .box-content-form{
		display: table-cell;
		vertical-align: middle;		
	}
	.box-form .box-content-form .items{
		margin: 0 auto;
		width: 65%;
	}
	.box-form .box-content-form .items h2{
		color: #000000;
		line-height: 27px
	}
	.box-form .box-content-form .items .txt{
		display: inline-block;
		font-size: 22px;
		font-weight: 700px;
		margin-top: 0px;
		color: #888;
		margin-bottom: 20px;
	}
	.content-img{
		float: left;
		width: 100%;
		background-color: #fff;		
		text-align: center;
		height: 385px;
	}
	.content-img img{
		width: 60%;
	}

	.content-img-nosotros{
		float: left;
		width: 100%;
		background-color: #fff;		
		text-align: center;
		height: 385px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}


	#home .cab_seccion{
		display: inline-block;
		width: 100%;
		height: auto;
	}
	#home .cab_seccion h1{
		color: #fff;
		margin-left: 40px;
	}
	.legal{
		float: left;
		width: 90%;
		padding: 50px 5%;
		font-weight: 400;
		height: auto;
		line-height: 23px;
	}
	#canvio_psw{
		float: right;
		margin-top: -82px;
		margin-right: 40px;
		font-size: 15px;
	}

	


	/* form
	------------------------------------------------------------------------------------------------------  */
	form{
		float:left;
		width: 100%;
		margin-bottom: 50px;
	}

	form input, textarea{
		float:left;
		width: 90%;
		background-color: #f0f0f0;
		padding:12px 5%;
		border:0px;
		font-size: 16px;
		color: #000;
		border-radius: 4px;
		margin-bottom: 10px;
		outline-style: none;
	}
	form textarea{
		height:120px;
	}
	.loschecks{
		float: left;
		width: 100%;
		margin: 10px 0px;
	}

	.msgs_form{
		float:left; 
		clear:both; 
		display: none; 
		text-align:left; 
		margin-top:5px; 
		color:#fff; 
		padding:5px 10px; 
		background-color:#c00;
		font-size: 13px;
		font-weight: 300;
	}
	.msgs_send{
		float:left; 
		clear: left; 
		width: auto; 
		display: none; 
		margin-top: 5px;
		font-size:15px;
		background-color: #5cac20;
		color: #fff;
		padding: 10px 10px;
		text-transform: uppercase;
		font-weight: 700;
	}
	#msg_alerta{
		float:left;
		width: 100%;
		padding: 20px 0px;
		color: #c00;
	}
	#nombre_msj, #telefono_msj, #email_msj, #lopd_msj, #recaptcha_msj, #confirm_send{
		float:left;
		display: none;
		width: 89.5%;
		font-size: 14px;
		line-height: 13px;
		background-color: #c00;
		padding: 5px 5%;
		color: #fff;
		margin-top: -13px;
		margin-bottom: 10px;
		border: 1px solid #c00;
	}
	#confirm_send{
		float: left !important;
		margin-top: 15px !important;
		padding: 20px 5% !important;
		font-size: 16px;
		line-height: 20px;
	}




	/* menu
	------------------------------------------------------------------------------------------------------  */
	#menu{
		display: inline-block;
		width: 100%;
		padding: 10px 0px;
		padding-bottom: 20px;
		background: rgba(0, 0, 0, 1);
		margin-bottom: 4px;
	}
	#menu ul{
		list-style: none;
	}
	#menu ul li a{
		float: left;
		color: #fff;
		opacity: 0.7;
		font-size: 13px;
		font-weight: 600;
		margin-right: 12px;
		text-decoration: none;
	}
	#menu ul li a:hover{
		opacity: 1;
	}
	.link_acceso_distribuidores{
		float:right !important; 
		margin-right:35px !important;
		color: #ffd24d !important;
	}
	#menu #logo{
		position: absolute;
		left: 35%;
		top:9px;
		text-align: center;
	}
	#menu #logo img{
		width:250px;
		margin-top:-60px;
		margin-left:35px;
	}


	

	/* header
	------------------------------------------------------------------------------------------------------  */
	#header{
		width: 100%;
		padding: 30px 0px;
		padding-bottom: 40px;
	}
	#header .dato{
		display: inline-block;
		color: #666;
	}
	.ico-locate{
		background-image: url('../img/ico-locate.png');
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 10px;
		padding-left: 17px
	}
	.ico-mail{
		background-image: url('../img/ico-mail.png');
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 12px;
		padding-left: 19px
	}
	.ico-tel{
		background-image: url('../img/ico-tel.png');
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 12px;
		padding-left: 19px
	}
	.mleft{
		margin-left: 15px;
	}
	.mright{
		margin-right: 15px;
	}


	/* header-responsive
	------------------------------------------------------------------------------------------------------  */
	#header-responsive{
		width: 100%;
		padding: 30px 0px;
		padding-bottom: 40px;
		margin-bottom: 15px;
	}
	#header-responsive .dato{
		float: right;
		clear: both;
		color: #666;
	}

	/* menu-responsive
	------------------------------------------------------------------------------------------------------  */
	#menu-responsive{
		display: inline-block;
		width: 100%;
		padding: 10px 0px;
		padding-bottom: 16px;
		background: rgba(0, 0, 0, 1);
		margin-bottom: 4px;
	}
	#menu-responsive #menures{
		float:left;
		list-style: none;
		width:85%;
	}
	#menu-responsive #menures li a{
		float: left;
		width: 100%;
		text-align: center;
		color: #fff;
		opacity: 0.7;
		font-weight: 600;
		margin-right: 0px;
		padding:10px 0px;
		text-decoration: none;
	}
	#menu-responsive #menures li a:hover{
		opacity: 1;
	}
	#menu-responsive #logo{
		position: absolute;
		left: 0px;
		top:37px;
		text-align: center;
	}
	#menu-responsive #logo img{
		width:100px;
	}	
	#menu-responsive .pull{
		float: right !important;
		margin-right: 20px;
	}
	#menu-responsive .pull img{
		float:right;
		margin-top: 7px;
		width: 30px;
	}


	/* login
	------------------------------------------------------------------------------------------------------  */
	#login{
		display: inline-block;
		margin-top: -2px;
		width: 100%;
		text-align: center;
		padding: 50px 0px;
		background-color: #ffffff;		
	}
	#login .presen{
		margin: 0 auto;
		width: 60%;
		color:#888;
		font-size: 22px;
		margin-bottom: 20px;
	}
	#login .box-login{
		display: inline-block;
		text-align: left;
		padding: 40px 40px;
		margin: 0 auto;
		border: 1px solid #ccc;
		width: 300px;
	}
	#login .box-login .btn{
		margin-top:10px;
	}
	#login .box-login form{
		margin-bottom: 0px;
	}
	#login .remember-psw{
		display: inline-block;
		width: 100%;
		margin-top:20px;
		background-image: url('../img/ico-psw.png');
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 10px;
		padding-left: 16px;
		color: #0a214f;
		text-decoration: none;
		opacity: 0.7;
	}
	#login .remember-psw:hover{
		opacity: 1;
	}


	
	/* pedidos
	------------------------------------------------------------------------------------------------------  */
	#pedidos{
		display: inline-block;
		margin-top: -2px;
		width: 90%;
		text-align: center;
		padding: 50px 5%;
		background-color: #ffffff;		
	}
	#pedidos table{
		display:inline-block;
		width:100%;
		font-size:17px;
		border-collapse: collapse;
	}
	#pedidos table th{
		border:1px solid #ccc;
		padding:20px 2%;
		width:96%;
		text-align: center;
		color: #888;
	}
	#pedidos table th .total_compra{
		float: left;
		width: 50%;
		color: #888;
		font-size:26px;
		text-align: left;
		margin-top:10px;
	}
	#pedidos table th #total_compra_text{
		float: right;
		width: 50%;
		padding:0px;
		font-size:26px;
		background-color:#fff;
	}
	#pedidos table td{
		padding:10px 0px;
	}
	#pedidos .boton-realizar-pedido{
		float: left;
		width: 100%;
		text-align: center;
		margin-top: 50px;
	}
	#pedidos .c60{
		width: 60%;
		text-align: left;
	}
	#pedidos .c15{
		width: 15%;
		text-align: center;
	}
	#pedidos .c10{
		width: 10%;
		text-align: center;
	}
	#pedidos input{
		background-color: #f0f0f0;
		border-radius: 4px;
		border:0px;
		width:80%;
		font-size:17px;
		padding: 5px 5%;
		outline: none;
		text-align: right;
	}
	#resumen_pedido{
		display: none;
		margin: 0 auto;
		width: 70%;	
		font-size: 20px;	
		padding: 60px 0px;
	}
	#resumen_pedido h2{
		float:left;
		width: 100%;
		font-size: 28px;		
	}






	/* news
	------------------------------------------------------------------------------------------------------  */
	#news{
		display: inline-block;
		margin-top: -2px;
		width: 100%;
		text-align: center;
		padding: 50px 0px;
		background-color: #f0f0f0;
		background: rgba(255, 255, 255, 0.6);
		border-top: 10px solid #fff;
	}
	#news span{
		font-size: 12px;
		color: #000;
	}
	#news h3{
		margin: 0 auto;
		width: 100%;
		padding: 15px 0px;
	}
	#news .txt{
		margin: 0 auto;
		width: 70%;
		font-size: 22px;
		line-height: 22px;
		margin-bottom: 20px;
	}

	.descripcion{
		font-size: 20px;
		line-height: 26px;
	}
	.descripcion p{
		font-size: 20px;
		line-height: 26px;
	}
	.descripcion p p{
		font-size: 20px;
		line-height: 26px;
	}

	/* contacto
	------------------------------------------------------------------------------------------------------  */
	#contacto{
		display: inline-block;
		width: 90%;
		text-align: left;
		padding: 20px 5%;
		padding-bottom: 60px;
		background-color: #fff;
	}
	#contacto #formulario{
		margin-top: 106px;	
		
	}


	/* descargas
	------------------------------------------------------------------------------------------------------  */
	#descargas{
		display: inline-block;
		width: 100%;
		text-align: center;
		padding: 15px 0px;
		background-color: #999;
	}
	#descargas a{
		padding: 20px 0px;
		background-image: url('../img/ico-pdf.png');
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 25px;
		padding-left: 40px;
		color: #ccc;
		font-weight: 600;
		text-decoration: none;
	}
	#descargas a:hover{
		color: #fff;
	}

	
	/* footer
	------------------------------------------------------------------------------------------------------  */
	#footer{
		float: left;
		display: inline-block;
		width: 90%;
		padding: 30px 5%;
		background-color: #333;
		border-top: 10px solid #fff;
		color: #ccc;
	}
	#footer .cap{
		padding:15px 0px;
	}
	#footer #copy{
		margin-top: 30px;
		color: #666;
	}
	#footer a{
		display: inline-block;
		width: 100%;
		color: #ccc;
		text-decoration: none;
		font-size: 18px;
		line-height: 25px;
	}
	#footer a:hover{
		color: #fff;
	}

	
	

	/* Cookies
	------------------------------------------------------------------------------------------------------  */

	#container_cookies {
	    z-index: 999;
	    width: 100%;
	    background-color: rgba(0,0,0,0.9);
	    text-align: center;
	    position: fixed;
	    bottom: 0px;
	    padding: 20px 0px;
	}
	#container_cookies .mensaje {
	    margin: 0 auto;
	    width: 80%;
	    max-width: 1000px;
	    text-align: left;
	    font-size: 15px;
	    color: #fff;
	    padding: 16px 10%;
	}
	#container_cookies .mensaje a {
	    color: #ffd24d;
	    text-decoration: none;
	}
	#container_cookies .mensaje a:hover {
	    text-decoration: underline;
	}
	#container_cookies .acepto {
	    float: right;            
	    padding: 10px 20px;
	    background-color: #eee;
	    cursor: pointer;
	    padding: 2px;
	    margin-left: 15px;
	    color: #000;	    
	}

	.btn-aceptar{
	  cursor: pointer !important;
	  padding: 10px 25px !important;
	  background-color: #0a214f !important;
	  color: #fff !important;
	  text-decoration: none !important;
	  font-weight: 600 !important;
	  border-radius: 50px;
	}
	.btn-aceptar:hover{
		/*background-color: #ffd24d !important;*/
		opacity: 0.8 !important;
	}

	  .btn-rechazar{
	  cursor: pointer !important;
	  padding: 10px 25px !important;
	  background-color: #bb2d3b !important;
	  color: #fff !important;
	  text-decoration: none !important;
	  font-weight: 600 !important;
	  border-radius: 50px;
	}
	.btn-rechazar:hover{
		opacity: 0.8 !important;
	}

  	.btn-configurar{
	  cursor: pointer !important;
	  padding: 10px 25px !important;
	  background-color: #ffca2c !important;
	  color: #000 !important;
	  text-decoration: none !important;
	  font-weight: 600 !important;
	  border-radius: 50px;
	}
	.btn-configurar:hover{
		opacity: 0.8 !important;
	}

	.opacity1{
	  opacity: 1 !important;
	}



	


	/* responsive
	------------------------------------------------------------------------------------------------------  */
	@media only screen and (max-width: 1200px) {

		#div-header, #div-menu{
			display: none;
		}
		#div-header-responsive, #div-menu-responsive{
			display: inline-block !important;
		}
		#menu-responsive .col_70 {
			width: 100%;
		}
		#menu-responsive #logo img {
			width: 120px;
			margin-left: 0px;
			margin-top: -20px;
		}

	}


	@media only screen and (max-width: 880px) {
	
		h2{
			font-size: 26px;
		}
		h3{
			font-size: 23px;
		}
		.box-producto .box-content-producto .items .txt{
			font-size: 18px;
		}
		.btn{
			font-size: 16px;
		}
		.back_profiteroles{
			height: 400px;
		}
		.back_lyonesas{
			height: 400px;
		}	

	}

	@media only screen and (max-width: 800px) {
	
		#contacto .col_70, #contacto .col_30{
			width:100%;
		}

	}


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

		#home .col_50{
			width: 100%;
		}
		.back_profiteroles{
			height: 300px;
		}
		.back_lyonesas{
			height: 300px;
			margin-top: 8px;
		}	
		.back_color_yellow{
			height: auto;
			padding:40px 0px;
		}
		.back_color_blue{
			height: auto;
			margin-top: 0px;
			padding:40px 0px;
		}
		#news .txt{
			font-size: 16px;
			line-height: 20px;
		}
		#footer .col_33{
			width:100%;
			margin-bottom: 30px;
		}
		#footer .col_33 a{
			font-size: 16px;
		}
		#footer #copy strong{
			float:left;
			width:100%;
			margin-bottom: 5px;
		}
	}