@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:300,500,700,900|Open+Sans:300,500,700&display=swap');
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}

/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	y Golden Grid System de Joni Korpi
	http://goldengridsystem.com/
*/

/* Diseño móvil: 480 px e inferior. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

#head {
	clear: both;
	float: left;
	margin-left: 0;
	width: 90%;
	display: block;
	color: #FFF;
	background-color: darkgoldenrod;
	margin-bottom: 2%;
	background-attachment: fixed;
	background-size: 100%;
	padding-top: 2%;
	padding-right: 5%;
	padding-bottom: 5%;
	padding-left: 5%;
}
#logo{ 
float: left;
clear: none;
width: auto;
}
.codigo {
	clear: both;
	float: left;
	width: 80%;
	marign-left: 20%;
	margin-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	padding-bottom: 10px;
	
	}
	.elcodigo {
		float: left;
		}
	.subcodigo {
	font-size: 16px;
	padding-bottom: 2px;
	margin-left: 0px;
	float: right;
	line-height: 8px;

		}
	.selector { border-radius: 2px;
		font-size: 16px;

	float: left;}	
#comerce{
	float: right;
	clear: none;
	width: auto;
	}
#cuerpo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 90%;
	display: block;
	padding-right: 5%;
	padding-left: 5%;
	margin-bottom: 150px;
}
.boxes {
	clear: none;
	float: left;
	margin-left: 0;
	width: 48%;
	display: block;
	padding: 1%;
	color: #03045e;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 25px;
}
.box_img{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 10px;
}
.box_titulo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 60px;
}
.box_add{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #caf0f8;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 5px;
}
.boton{
	clear: none;
	float: left;
	
	width: 100%;
	display: block;
	color: #03045e;
	text-align: center;
	border: 1px solid #03045e;
	padding-top: 2%;

	padding-bottom: 2%;
	
	font-size: 18px;
	border-radius: 3px;
	margin-top: 25px;
	
}
.botonnav{
	clear: none;
	float: left;
	margin-left: 2%;
	width: 40%;
	display: block;
	background-color: #03045e;
	color: #FFF;
	text-align: center;
	border: 1px solid #03045e;
	font-size: 18px;
	border-radius: 3px;
	margin-right: 2%;
	padding: 2%;
	margin-bottom: 5%;
}
.botonnev{
	clear: none;
	float: left;
	margin-left: 2%;
	width: 40%;
	display: block;
	background-color: #FFF;
	text-align: center;
	border: 1px solid #FFF;
	font-size: 18px;
	border-radius: 3px;
	margin-right: 2%;
	padding: 2%;
	margin-bottom: 5%;
}
.botonmenu{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	clear: both;
	float: left;
	margin-left: 0;
	width: auto;
	display: block;
	color: #FFF;
	text-align: center;
	padding-top: 3%;
	padding-right: 40px;
	padding-bottom: 3%;
	padding-left: 40px;
	font-size: 18px;
	border-radius: 3px;
	margin-top: 35px;
	margin-bottom: 35px;
	background-color: #03045e;
	text-decoration: none;
	margin-left: 35px;

}
.botonpedido {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	clear: none;
	float: left;
	margin-left: 0;
	width: auto;
	display: block;
	color: #FFF;
	text-align: center;
	padding-top: 3%;
	padding-right: 20px;
	padding-bottom: 3%;
	padding-left: 20px;
	font-size: 14px;
	border-radius: 3px;
	margin-top: 35px;
	margin-bottom: 35px;
	background-color: #03045e;
	text-decoration: none;

}
.borrarpedido {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	clear: none;
	float: left;
	margin-left: 0;
	width: auto;
	display: block;
	color: #FFF;
	text-align: center;
	padding-top: 3%;
	padding-right: 20px;
	padding-bottom: 3%;
	padding-left: 20px;
	font-size: 14px;
	border-radius: 3px;
	margin-top: 35px;
	margin-bottom: 35px;
	background-color: #FF0000;
	text-decoration: none;
	margin-right: 15px;

}

#pedido{
	clear: both;
	float: left;
	width: 80%;
	display: block;
	background-color: #caf0f8;
	margin: 5%;
	padding: 5%;
	font-size: 12px;
}
#menu{
	clear: both;
	float: left;
	margin-left: 0;
	width: 90%;
	display: block;
	background-color: #230846;
	padding-top: 3%;
	padding-right: 5%;
	padding-bottom: 3%;
	padding-left: 5%;
	color: #1ce0dc;
}
#volver{
	clear: both;
	float: left;
	margin-left: 0;
	width: 96%;
	display: block;
	background-color: #FFF;
	padding: 3%;
	margin-bottom: 30px;
}
.prod_boton{
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #303;
	text-align: center;
	text-align: left;
	border-bottom: 1px solid #DADADA;
	padding-bottom: 5px;
}
/*REDES*/
.anterior {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: -40px; /* Establecemos la barra en la izquierda */
	top: 300px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
	.anterior ul {
		list-style: none;
	}
 
	.anterior ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		padding: 5px 8px;
		
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.anterior ul li .icon-facebook {background:#03045e;} /* Establecemos los colores de cada red social, aprovechando su class */
	
 
	.anterior ul li a:hover {
		background: #131877; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 2px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}
.siguiente {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	right: 0px; /* Establecemos la barra en la izquierda */
	top: 300px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
	.siguiente ul {
		list-style: none;
	}
 
	.siguiente ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		padding: 5px 8px;
		
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.siguiente ul li .icon-facebook {background:#03045e;} /* Establecemos los colores de cada red social, aprovechando su class */
	
 
	.siguiente ul li a:hover {
		background: #131877; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 2px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}
/*FIN REDES*/
#agregar {
		font-family: 'M PLUS Rounded 1c', sans-serif;

	border-radius: 3px;
	clear: none;
	float: left;
	width: 36%;
	display: block;
	font-weight: 700;
	color: #FFF;
	text-align: center;
	cursor: pointer;
	font-size: 18px;
	background-color: #00842f;
	padding-top: 2%;
	padding-right: 5%;
	padding-bottom: 2%;
	padding-left: 5%;
	margin-top: 5%;
	margin-right: 2%;
	margin-bottom: 5%;
	margin-left: 2%;
	text-decoration: none;
	border: none;
}
#revisar {
	border-radius: 3px;
	clear: none;
	float: right;
	width: 36%;
	display: block;
	font-weight: 700;
	color: #FFF;
	text-align: center;
	cursor: pointer;
	font-size: 18px;
	background-color: #00842f;
	padding-top: 2%;
	padding-right: 5%;
	padding-bottom: 2%;
	padding-left: 5%;
	margin-top: 5%;
	margin-right: 2%;
	margin-bottom: 5%;
	margin-left: 2%;
}
.botonera {
	float:left;
	margin-top: 25px;
	width: 100%;
	clear: both;
	
	}
.control {
            display: block;
            position: relative;
            
            margin-bottom: 5px;
            padding-top: 3px;
            cursor: pointer;
        }
            .control input {
                position: absolute;
                z-index: -1;
                opacity: 0;
            }
        .control_indicator {
            position: absolute;
            top: 2px;
            left: 0;
            height: 20px;
            width: 20px;
            background: #e6e6e6;
            border: 0px solid #000000;
            border-radius: 0px;
        }
        .control:hover input ~ .control_indicator,
        .control input:focus ~ .control_indicator {
            background: #cccccc;
        }
        
        .control input:checked ~ .control_indicator {
            background: #00842f;
        }
        .control:hover input:not([disabled]):checked ~ .control_indicator,
        .control input:checked:focus ~ .control_indicator {
            background: #0e6647d;
        }
        .control input:disabled ~ .control_indicator {
            background: #e6e6e6;
            opacity: 0.6;
            pointer-events: none;
        }
        .control_indicator:after {
            box-sizing: unset;
            content: '';
            position: absolute;
            display: none;
        }
        .control input:checked ~ .control_indicator:after {
            display: block;
        }
        .control-checkbox .control_indicator:after {
            left: 8px;
            top: 4px;
            width: 3px;
            height: 8px;
            border: solid #ffffff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        .control-checkbox input:disabled ~ .control_indicator:after {
            border-color: #7b7b7b;
        }
        .control-checkbox .control_indicator::before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 4.5rem;
            height: 4.5rem;
            margin-left: -1.3rem;
            margin-top: -1.3rem;
            background: #2aa1c0;
            border-radius: 3rem;
            opacity: 0.6;
            z-index: 99999;
            transform: scale(0);
        }
        @keyframes s-ripple {
            0% {
                transform: scale(0);
            }
            20% {
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(1);
            }
        }
        @keyframes s-ripple-dup {
           0% {
               transform: scale(0);
            }
           30% {
                transform: scale(1);
            }
            60% {
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(1);
            }
        }
        .control-checkbox input + .control_indicator::before {
            animation: s-ripple 250ms ease-out;
        }
        .control-checkbox input:checked + .control_indicator::before {
            animation-name: s-ripple-dup;
        }

		
/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 97.5%;
	padding-left: 1.25%;
	padding-right: 1.25%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#head {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#cuerpo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.boxes {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.box_img{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.box_titulo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.box_add{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.boton{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 25px;
}
#pedido{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu{
	clear: both;
	float: left;
	margin-left: 0px;
	width: 90%;
	display: block;
}
#volver{
	clear: both;
	float: left;
	margin-left: 0;
	width: 94%;
	display: block;
	background-color: #FFF;
	padding: 3%;
	margin-bottom: 25px;
	text-align: center;
}
.prod_boton{
	clear: none;
	float: left;
	margin-left: 0;
	width: 44%;
	display: block;
	font-size: 18px;
	font-weight: 500;
	color: #303;
	text-align: center;
	padding: 3%;
	margin-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #303;
}
}

/* Diseño escritorio: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#head {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding-right: 0px;
	padding-left: 0px;
	background-attachment: fixed;
	background-image: url(../img/bg_promodesaf.png);
}
#cuerpo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding-right: 0px;
	padding-left: 0px;
}
.boxes {
	clear: none;
	float: left;
	margin-left: 0;
	width: 290px;
	display: block;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 25px;
	padding-left: 5px;
	margin-bottom: 75px;
}
.box_img{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.box_titulo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-size: 18px;
}
.box_add {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-size: 14px;
	margin-top: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 14px;
}
.boton {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.box {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	
	}
#pedido {
	clear: both;
	float: none;
	margin-left: auto;
	width: 500px;
	display: block;
	margin-right: auto;
	overflow: hidden;
	
	}
#menu {
	clear: both;
	float: left;
	margin-left: 0;
	width: 90%;
	display: block;
	background-color: #1ce0dc;
	padding-top: 3%;
	padding-right: 5%;
	padding-bottom: 3%;
	padding-left: 5%;
	
	}
#volver {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	
	}
.prod_boton {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	
	}
}

.text_t {font-size: 16px; margin-bottom: 5px; margin-top: 0px; color: #303; float: left; width: 100%;
	
}

.box_t { padding: 2% 10% 2% 10%; width: 80%; background-color: gainsboro; font-size: 16px; float: left; text-decoration: none; border: none; margin-top: 5px; border-radius: 2px; margin-bottom: 5px;
}

.contenedor_general { float: left; width: 80%; margin-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #303;
	margin: 5% 10% 5% 10%;
	
	
}

.avisotalles {
	color: white;
	background-color: darkgoldenrod;
	margin: 10% 5% ;
	padding: 10% 5%;
	font-size: 18px;
	width: 80%;
	border-radius: 5px;
	line-height: 18px;
	
}