/*______________________________________________________normalización de la css*/ 
*{box-sizing: border-box;margin:0;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin: 0;padding: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
ol, ul {list-style: none;}
address, caption, cite, code, dfn, em, th, var {font-style: normal;font-weight: normal;}
table {border-collapse: collapse;border-spacing: 0;}
fieldset, img {border: 0;}
caption, th {text-align: left;}
.negrita{font-weight:bold;}
a:link, a:visited{color:#333;text-decoration:underline;}
a:hover{}

h1{font-family: "Trebuchet MS";font-size: 22px;font-weight: normal;}
h2{font-size:16px;}
h3 {color:#bb0103; font-size:16px;margin-bottom:5px;}
p{margin-bottom:10px;line-height:21px;}

/*estilos propios*/
.marginRight10{margin-right:10px;}
.marginRight15{margin-right:15px;}
.marginLeft20{margin-left:20px;}
.marginTop2{margin-top:2px;}
.marginTop5{margin-top:5px;}
.marginTop15{margin-top:15px;}
.marginTop20{margin-top:20px;}
.marginTop30{margin-top:30px;}
.marginBot5{margin-bottom:5px;}
.marginBot2{margin-bottom:5px;}
.marginBot10{margin-bottom:10px;}
.marginBot15{margin-bottom:15px;}
.paddingTop10{padding-top:10px;}
.padding24{padding:24px;}
.paddingLeftRight12{padding: 0 12px;}
.h160{height:160px;}
.border{border:2px solid #cdcdcd}
.borderTop_dotted{border-top:1px dotted #999}

.float_left{float:left;}
.float_right{float:right;}
.w100por{ width:100%}
.clear{clear:both}

/*______________________________________________________body*/ 
body {
    background: url("../images/bg_body.jpg") no-repeat scroll 50% 0 #C7C8C3;font-size:15px;font-family:Tahoma, Arial, Helvetica, sans-serif; color:#555; line-height: 20px; }
	
/*______________________________________________________container*/ 
.container{position:relative;margin:0 auto;max-width:1024px; width:90%;overflow: hidden;}

/*______________________________________________________header*/ 
.header{float:left;width:100%;position:relative;margin-bottom: 10px}
.header .logo{float:left; margin:10px 0 0;width: 33%}
.header .logo img{width: 100%;display: block}
.header h1{color: #FFFFFF;position: absolute; bottom: 5px; right: 0;width: 63%}


/*______________________________________________________content*/ 
.content{float:left;width:100%;margin:0 0 0 0;background: url("../images/bg_content.png") repeat scroll 0 0 transparent;}
.content:after{content:"";display:table;clear:both;}

/*content total*/
.content_total{float:left;width:100%;}

/*columna izquierda*/
.content_left{float:left;width:68%;}
.content_left:after{content:"";display:table;clear:both;}
.home .content .content_left{width:30%;}

/*columna derecha*/
.content_right{float:right;width:30%;}
.content_right:after{content:"";display:table;clear:both;}
.home .content .content_right{width:68%;}

/*slider*/

.slider > div {text-align: center}
.slider > div > img {width: 100%; display: inline-block;box-shadow: 0 0 5px #ccc;border: 5px solid #fff;}
.home .slider img{height: 400px;}
.cocinas .bx-wrapper .bx-pager.bx-default-pager a {width: 8px; height: 8px;}

/*slider banner*/
.banner {width: 100%;}
.banner img {width:100%;border:3px solid #ccc;}
.banner_2column { display: flex; align-items: stretch; justify-content: space-between;}
.banner_2column img:nth-child(1) {width: 60%}
.banner_2column img:nth-child(2) {width: 35%}

/*menu*/
.menu ul{background: url("../images/bg_menu.png") repeat-x scroll 0 0 transparent;width:100%; float:left;}
.menu ul li{float:left;}
.menu ul li a:link, .menu ul li a:visited{text-decoration:none; padding:27px 0 15px;float:left; background: url("../images/separador_menu.gif") no-repeat scroll right bottom transparent; width:100px; text-align:center;color: #555;}
.menu ul li.active a{background: url("../images/bg_menu_selected.gif") repeat-x scroll 0 0 transparent;color:#fff} 
.menu ul li a:hover{background: url("../images/bg_menu_hover.gif") repeat-x scroll 0 0 transparent;color:#fff}

/*contacto*/
.contacto {border-top: 3px solid #CDCDCD;margin-top: 9px;padding: 19px 0 0;float:left; width:100%}
.contacto img {height: 15px; width: auto; vertical-align: middle; margin-right: 7px;}
.contacto .telefono,
.contacto .mail{color:#000; font-size: 15px;}
.contacto .whatsapp {float: none;height: 20px; vertical-align: bottom; margin: 0 0 0 5px;}
.contacto .horario span{font-weight:bold;color:#666;}

.home .contacto p{width:100%; margin-bottom:auto;}
.content_right .contacto{border-bottom: 3px solid #CDCDCD;margin:20px 0; padding:15px;}
.contacto_page .content_right .contacto{border:none;margin-top: 0}
.content_right .contacto p{line-height:20px;margin-bottom:0;width:100%; float:left;}
.content_right .contacto p span{float:left; width:89%;}
.content_right .contacto .horario {border-top: 1px dotted #999;margin-top: 15px; padding-top:10px;}


/*mapa google*/
.mapa iframe{border:1px solid #cdcdcd}
.mapa small {display: block;margin: 5px 0; width: 100%;}
.mapa small a:link, .mapa small a:visited{text-align:right}

/*destacados*/
.destacados {display: flex; align-items: stretch;padding-bottom: 25px; padding-top:25px;}
.destacados .columna {width: 33.3%;padding:0 12px;}
.destacados .caja{
background: #c6c6c7; /* Old browsers */
background: -moz-linear-gradient(top, #c6c6c7 0%, #e5e5e3 100%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #c6c6c7 0%,#e5e5e3 100%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #c6c6c7 0%,#e5e5e3 100%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c7', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

/*background: url("../images/bg_destacados.png") repeat-x scroll 0 0 transparent;*/
box-shadow: 1px 1px 4px #cdcdcd;
padding: 20px 15px;
height: 98%
}
.destacados .caja .subcaja{display: table;}
.destacados .caja .subcaja + .subcaja { margin-top: 20px; }
.destacados .caja .subcaja .icono{display: table-cell; padding-right: 15px; width: 30%}
.destacados .caja .subcaja img{width: 100%}
.destacados .caja .subcaja p{line-height:16px;}
.destacados .caja .subcaja .texto{display: table-cell; vertical-align: top}
.destacados_cocinas .caja{ min-height:315px;}
.destacados_cocinas .caja img{margin-top:10px;width: 100%}

/*cajas en interior*/
.cajas_content{width:48%;margin-top:5px;}
.cajas_content img {width: 100%}
.cajas_content p {font-size: 14px}

/*______________________________________________________footer*/ 
.footer{float:left;width:100%; padding:30px 0px 20px; }
.footer ul{text-align: center}
.footer ul li{ display: inline-block}
.footer a:link, .footer a:visited{color:#666; font-size:12px;  padding:0 10px;}
.footer ul li span{color:#777;}





@media (max-width: 1024px) {

	/*______________________________________________________content*/ 
	.content .content_left,
	.content .content_right,
	.home .content .content_contacto{ width: 100% }
	.subhome .content_right { margin: 30px 0;padding: 20px 0; border-top: 3px solid #cdcdcd; border-bottom: 3px solid #cdcdcd;}
	.home .slider img{height: auto;}

	/*slider*/
	.slider > div > img {width: auto; height: 380px;}

	/*contacto*/
	.home .contacto {display: flex;}
	.home .contacto div{width: 50%}
	
	.subhome .mapa{width: 45%; float: left;}
	.content_right .contacto {width: 50%; float: right;margin:0;border:none;}
	.contacto_page .content_right .contacto{width: 100%;padding: 20px 0 30px 0; border-top: 3px solid #cdcdcd;margin-top:20px;}

	.contacto .telefono, 
	.contacto .mail { font-size: 17px }

	/*destacados*/
	.destacados .caja .subcaja .icono{display: block; padding-right: 0; width: 100%; text-align: center}
	.destacados .caja .subcaja img{width: auto}
	.destacados .caja .subcaja .texto{display: block; text-align: center;} 
	 
  
}

@media (max-width: 768px) {

	body.open{overflow: hidden;}

	/*______________________________________________________header*/ 
	.header {margin-bottom: 20px}
	.header .logo {width: 45%;float: left; display: block;}
	.header h1 {position: static; width: 100%; clear:both; padding-top:10px;}

	/*icono menu*/
	.menu-toggle{height:35px;position:relative;cursor:pointer;width:30px;float: right;z-index: 3;
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-o-transform:rotate(0deg);transform:rotate(0deg);
		-webkit-transition:.5s ease-in-out;
		-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;
	}
	.menu-toggle:hover{color:#999}
	.menu-toggle i,
	.menu-toggle i:after,
	.menu-toggle i:before{display:block;position:absolute;height:3px;width:100%;right:0;background:#555;border-radius:2px;
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		transform:rotate(0deg);
		-webkit-transition:.25s ease-in-out;
		-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;
		transition:.25s ease-in-out
	}
	.menu-toggle i:after,
	.menu-toggle i:before{content:''}
	.menu-toggle i:after{top:-20px}
	.menu-toggle i:before{top:-10px}
	.menu-toggle i {top:32px}
	.open .menu-toggle i:after{ 
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);top:-17px}
	.open .menu-toggle i:before {
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);top:-17px
	}

	/*menu*/
	.menu { position: fixed; right: 0; background: white; height: 100vh;z-index: 2;transform: translateX(100%);transition: 0.45s;}
	.open .menu {transform: translateX(0);}
	.menu ul{background: none}
	.menu ul, 
	.menu ul li, 
	.menu ul li a:link, 
	.menu ul li a:visited {float:none; width: 100%;}
	.menu ul li a:link, 
	.menu ul li a:visited {display: block}
	.menu ul li a:hover{color:initial;}


	.fixed .header {margin:0;position: fixed;left: 0; height: 50px; background: white; z-index: 3; opacity: 0.8;}
	.fixed .logo,
	.fixed h1{display: none}
	.fixed .menu-toggle {right: 5%; }
	.fixed.open .header{ width: 45px;right: 5%;left: auto;background: none}



	/*______________________________________________________content*/ 
	.home .content .content_left, 
	.home .content .content_right { width: 100% }

	/*slider*/
	.slider > div > img {height: 300px;}

	/*banner*/
	.banner_2column {height: 300px}
	

	/*contacto*/

	.content_right .mapa,
	.content_right .contacto {width: 100%;}
	.content_right .mapa {margin-bottom: 25px; border-bottom: 1px solid #cdcdcd; padding-bottom: 20px;}
	.content_right .contacto {display: flex;padding:0;}
	.content_right .contacto div{width: 50%}
	.content_right .content_right {border: none;padding: 0;}
	.content_right .contacto .horario {border:none;margin: 0; padding-top:0;}

	/*destacados*/
	.destacados {display: block; }
	.destacados .columna {width: 100%;}
	.home .destacados .caja .subcaja .icono{display: table-cell; padding-right: 15px; width: 15%; text-align: left}
	.home .destacados .caja .subcaja img{width: 100%}
	.home .destacados .caja .subcaja .texto{display: table-cell; text-align: left;} 

	.destacados_cocinas .caja{text-align: center;margin-bottom: 24px;}
	.destacados_cocinas .caja img{width: auto;}
  
  
}

@media (max-width: 600px) {

	/*______________________________________________________header*/ 
	.header .logo {width: 65%;}

	/*______________________________________________________content*/ 
	.content.padding24 { padding:15px; }

	/*slider*/
	.slider > div > img {height: auto;width: 100%}
	.bx-wrapper{margin-bottom: 0}
	.bx-wrapper .bx-pager{display: none}

	/*banner*/
	.banner_2column {height: 200px}
	.bx-wrapper .bx-pager.bx-default-pager a { width: 8px; height: 8px;}

	/*contacto*/
	.home .contacto,
	.content_right .contacto {display: block}
	.home .contacto div,
	.content_right .contacto div {width: 100%}
	.home .contacto .horario,
	.content_right .contacto .horario{border-top: 1px dotted #999;margin-top: 15px; padding-top:10px;}

	/*cajas en interior*/
	.cajas_content{width:100%;}

	/*destacados*/
	.home .destacados .columna { padding: 0 }
	.home .destacados > div:first-child {border-top: 3px solid #CDCDCD;}
	.home .destacados .caja {background: none;box-shadow: none;padding: 0}
	.home .destacados .caja .subcaja {padding-top:20px; border-top: 1px solid #cdcdcd}
	.home .destacados > div:first-child > .caja > div:first-child {border:none;}
	.home .destacados .caja .subcaja .icono{display: block; padding-right: 0; width: 100%; text-align: center}
	.home .destacados .caja .subcaja img{width: auto}
	.home .destacados .caja .subcaja .texto{display: block; text-align: center;} 
	.destacados_cocinas .caja img{width: 100%; max-width: 275px}

}