html {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: sans-serif;
    padding: 0;
    margin: 0;
}

*, *:before, *:after {
    box-sizing: inherit;
    list-style: none;
    text-decoration: none;
    
}

[class*='caja']{
    width: 100%;
    float: left;
    min-height: 1px;
}

.caja {
    padding: 0;
    margin: 0;
    background: transparent;
}

.texto-centro{
	text-align: center;
}
.texto-centro img{
    width: 80%;
}

.texto-izq{
	text-align: left;
}

.texto-der{
	text-align: right;
}

.texto-70{
    text-align: left;
}

.texto-70 img{
    width: 60%; 
    margin-right: 20px;
}

.texto-30{
    text-align: left;
}

.texto-30 img{
    width: 25%;
}

.responsivo{
	max-width: 100%;
}

.responsivo-total{
    width: 100%;
    height: 100%;
}

.relativo{
    position: relative;
}

.responsivo-150{
    max-width: 150px;
}

.responsivo-200{
    max-width: 200px;
}

.responsivo-250{
    max-width: 250px;
}

.responsivo-300{
    max-width: 300px;
}

.responsivo-350{
    max-width: 350px;
}

.responsivo-400{
    max-width: 400px;
}

.responsivo-450{
    max-width: 450px;
}

.responsivo-500{
    max-width: 500px;
}

.responsivo-550{
    max-width: 550px;
}

.responsivo-600{
    max-width: 600px;
}

.centrado{
    margin: auto;
}

/*_____----____---___--__-_____  INICIO ESTILOS DE CONTENEDOR   _____-__--___---____----_____*/
/*CONTENEDOR NORMAL*/
.contenedor {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.contenedor:before, .contenedor:after, .grupo:before, .grupo:after {
    content: " ";
    display: table;
}

.contenedor:after, .grupo:after {
	clear: both;
}

/*CONTENEDOR FULL*/
.contenedor-full{
    width: 100%;
    margin: 0 auto;
}

.contenedor-full:before, .contenedor-full:after{
    content: " ";
    display: table;
}

.contenedor-full:after{
	clear: both;
}

/*CONTENEDOR 320PX*/
.contenedor-320{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.contenedor-320:before, .contenedor-320:after{
    content: " ";
    display: table;
}

.contenedor-320:after{
	clear: both;
}

/*CONTENEDOR 480PX*/
.contenedor-480{
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.contenedor-480:before, .contenedor-480:after{
    content: " ";
    display: table;
}

.contenedor-480:after{
	clear: both;
}

/*CONTENEDOR 640PX*/
.contenedor-640{
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.contenedor-640:before, .contenedor-640:after{
    content: " ";
    display: table;
}

.contenedor-640:after{
	clear: both;
}

/*CONTENEDOR 960PX*/
.contenedor-960{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.contenedor-960:before, .contenedor-960:after{
    content: " ";
    display: table;
}

.contenedor-960:after{
	clear: both;
}

/*CONTENEDOR 1366PX*/
.contenedor-1366{
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
}

.contenedor-1366:before, .contenedor-1366:after{
    content: " ";
    display: table;
}

.contenedor-1366:after{
	clear: both;
}
/*_____----____---___--__-_____  FIN ESTILOS DE CONTENEDOR   _____-__--___---____----_____*/


/*_____----____---___--__-_____  INICIO MODO DESARROLLO   _____-__--___---____----_____*/
/*CONTENEDORES*/
body.desarrollo .contenedor {
    background-color: #f1f1ff;
    border: 2px solid #C3C3DE;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-full {
    background-color: #f1f1ff;
    border: 2px solid #C3C3DE;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-320 {
    background-color: #f1f1ff;
    border: 2px solid #C3C3DE;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-480 {
    background-color: #f1f1ff;
    border: 2px solid #C3C3DE;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-640 {
    background-color: #f1f1ff;
    border: 2px solid #C3C3DE;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-960 {
    background-color: #f1f1ff;
    border: 2px solid #C3C3DE;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-1366 {
    background-color: #f1f1ff;
    border: 2px solid #C3C3DE;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-320::before {
    content: "Contenedor-320 (max-width: 320px)";
    background-color: #d7d7e0;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #c3c3dc;
    color: #6363e0;
    display: block;
}

body.desarrollo .contenedor-480::before {
    content: "Contenedor-480 (max-width: 480px)";
    background-color: #d7d7e0;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #c3c3dc;
    color: #6363e0;
    display: block;
}

body.desarrollo .contenedor-640::before {
    content: "Contenedor-640 (max-width: 640px)";
    background-color: #d7d7e0;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #c3c3dc;
    color: #6363e0;
    display: block;
}

body.desarrollo .contenedor-960::before {
    content: "Contenedor-960 (max-width: 960px)";
    background-color: #d7d7e0;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #c3c3dc;
    color: #6363e0;
    display: block;
}

body.desarrollo .contenedor-1366::before {
    content: "Contenedor-1366 (max-width: 1366px)";
    background-color: #d7d7e0;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #c3c3dc;
    color: #6363e0;
    display: block;
}

body.desarrollo .contenedor::before {
    content: "Contenedor NORMAL (max-width: 960px)";
    background-color: #d7d7e0;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #c3c3dc;
    color: #6363e0;
    display: block;
}

body.desarrollo .contenedor-full::before {
    content: "Contenedor-full (width: 100%)";
    background-color: #d7d7e0;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #c3c3dc;
    color: #6363e0;
    display: block;
}
/*GRUPOS*/
body.desarrollo .contenedor .grupo {
    background-color: #ffefe4;
    border: 2px solid #fbdac3;
    padding: 0px 0px 10px 0px;
    margin: 5px;
}

body.desarrollo .contenedor-full .grupo {
    background-color: #ffefe4;
    border: 2px solid #fbdac3;
    padding: 0px 0px 10px 0px;
    margin: 5px;
}

body.desarrollo .contenedor-320 .grupo {
    background-color: #ffefe4;
    border: 2px solid #fbdac3;
    padding: 0px 0px 10px 0px;
    margin: 5px;
}

body.desarrollo .contenedor-480 .grupo {
    background-color: #ffefe4;
    border: 2px solid #fbdac3;
    padding: 0px 0px 10px 0px;
    margin: 5px;
}

body.desarrollo .contenedor-640 .grupo {
    background-color: #ffefe4;
    border: 2px solid #fbdac3;
    padding: 0px 0px 10px 0px;
    margin: 5px;
}

body.desarrollo .contenedor-960 .grupo {
    background-color: #ffefe4;
    border: 2px solid #fbdac3;
    padding: 0px 0px 10px 0px;
    margin: 5px;
}

body.desarrollo .contenedor-1366 .grupo {
    background-color: #ffefe4;
    border: 2px solid #fbdac3;
    padding: 0px 0px 10px 0px;
    margin: 5px;
}

body.desarrollo .contenedor-320 .grupo::before {
    content: "GRUPO";
    background-color: #f9e7db;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #fbdac3;
    color: #e8a372;
    display: block;
}

body.desarrollo .contenedor-480 .grupo::before {
    content: "GRUPO";
    background-color: #f9e7db;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #fbdac3;
    color: #e8a372;
    display: block;
}

body.desarrollo .contenedor-640 .grupo::before {
    content: "GRUPO";
    background-color: #f9e7db;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #fbdac3;
    color: #e8a372;
    display: block;
}

body.desarrollo .contenedor-960 .grupo::before {
    content: "GRUPO";
    background-color: #f9e7db;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #fbdac3;
    color: #e8a372;
    display: block;
}

body.desarrollo .contenedor-1366 .grupo::before {
    content: "GRUPO";
    background-color: #f9e7db;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #fbdac3;
    color: #e8a372;
    display: block;
}

body.desarrollo .contenedor .grupo::before {
    content: "GRUPO";
    background-color: #f9e7db;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #fbdac3;
    color: #e8a372;
    display: block;
}

body.desarrollo .contenedor-full .grupo::before {
    content: "GRUPO";
    background-color: #f9e7db;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #fbdac3;
    color: #e8a372;
    display: block;
}

/*CAJAS*/
body.desarrollo .contenedor .caja {
    background-color: #dffbd9;
    border: 2px solid #cdfbc4;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-full .caja {
    background-color: #dffbd9;
    border: 2px solid #cdfbc4;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-320 .caja {
    background-color: #dffbd9;
    border: 2px solid #cdfbc4;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-480 .caja {
    background-color: #dffbd9;
    border: 2px solid #cdfbc4;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-640 .caja {
    background-color: #dffbd9;
    border: 2px solid #cdfbc4;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-960 .caja {
    background-color: #dffbd9;
    border: 2px solid #cdfbc4;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-1366 .caja {
    background-color: #dffbd9;
    border: 2px solid #cdfbc4;
    padding: 0px 0px 10px 0px;
}

body.desarrollo .contenedor-320 .caja::before {
    content: "CAJA";
    background-color: #c4f1bc;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #cdfbc4;
    color: #74d462;
    display: block;
}

body.desarrollo .contenedor-480 .caja::before {
    content: "CAJA";
    background-color: #c4f1bc;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #cdfbc4;
    color: #74d462;
    display: block;
}

body.desarrollo .contenedor-640 .caja::before {
    content: "CAJA";
    background-color: #c4f1bc;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #cdfbc4;
    color: #74d462;
    display: block;
}

body.desarrollo .contenedor-960 .caja::before {
    content: "CAJA";
    background-color: #c4f1bc;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #cdfbc4;
    color: #74d462;
    display: block;
}

body.desarrollo .contenedor-1366 .caja::before {
    content: "CAJA";
    background-color: #c4f1bc;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #cdfbc4;
    color: #74d462;
    display: block;
}

body.desarrollo .contenedor .caja::before {
    content: "CAJA";
    background-color: #c4f1bc;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #cdfbc4;
    color: #74d462;
    display: block;
}

body.desarrollo .contenedor-full .caja::before {
    content: "CAJA";
    background-color: #c4f1bc;
    width: 100%;
    text-align: center;
    padding: 2px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #cdfbc4;
    color: #74d462;
    display: block;
}
/*_____----____---___--__-_____  FIN MODO DESARROLLO   _____-__--___---____----_____*/

/*_____----____---___--__-_____  QUERYS DE ANCHURA  _____-__--___---____----_____*/
@media screen and (min-width:320px){
    .s-1 {width: 8.33333%;}
    .s-2 {width: 16.66667%;}
    .s-3 {width: 25%;}
    .s-4 {width: 33.33333%;}
    .s-5 {width: 41.66667%;}
    .s-6 {width: 50%;}
    .s-7 {width: 58.33333%;}
    .s-8 {width: 66.66667%;}
    .s-9 {width: 75%;}
    .s-10 {width: 83.33333%;}
    .s-11 {width: 91.66667%;}
    .s-12 {width: 100%;}
}

@media screen and (min-width:480px){
    .m-1 {width: 8.33333%;}
    .m-2 {width: 16.66667%;}
    .m-3 {width: 25%;}
    .m-4 {width: 33.33333%;}
    .m-5 {width: 41.66667%;}
    .m-6 {width: 50%;}
    .m-7 {width: 58.33333%;}
    .m-8 {width: 66.66667%;}
    .m-9 {width: 75%;}
    .m-10 {width: 83.33333%;}
    .m-11 {width: 91.66667%;}
    .m-12 {width: 100%;}
}

@media screen and (min-width:640px){
    .l-1 {width: 8.33333%;}
    .l-2 {width: 16.66667%;}
    .l-3 {width: 25%;}
    .l-4 {width: 33.33333%;}
    .l-5 {width: 41.66667%;}
    .l-6 {width: 50%;}
    .l-7 {width: 58.33333%;}
    .l-8 {width: 66.66667%;}
    .l-9 {width: 75%;}
    .l-10 {width: 83.33333%;}
    .l-11 {width: 91.66667%;}
    .l-12 {width: 100%;}
}

@media screen and (min-width:960px){
    .web-1 {width: 8.33333%;}
    .web-2 {width: 16.66667%;}
    .web-3 {width: 25%;}
    .web-4 {width: 33.33333%;}
    .web-5 {width: 41.66667%;}
    .web-6 {width: 50%;}
    .web-7 {width: 58.33333%;}
    .web-8 {width: 66.66667%;}
    .web-9 {width: 75%;}
    .web-10 {width: 83.33333%;}
    .web-11 {width: 91.66667%;}
    .web-12 {width: 100%;}
}

@media screen and (min-width:1366px){
    .hd-1 {width: 8.33333%;}
    .hd-2 {width: 16.66667%;}
    .hd-3 {width: 25%;}
    .hd-4 {width: 33.33333%;}
    .hd-5 {width: 41.66667%;}
    .hd-6 {width: 50%;}
    .hd-7 {width: 58.33333%;}
    .hd-8 {width: 66.66667%;}
    .hd-9 {width: 75%;}
    .hd-10 {width: 83.33333%;}
    .hd-11 {width: 91.66667%;}
    .hd-12 {width: 100%;}
}