/*   disop.es   disop.com   */
/*   13.5.2017   */

/* Se usan las Flex boxes de CSS-3. Compatibles con navegadores desde 2013. */
/* 2013 Chrome 29.0, 2013 Firefox 22.0, 2013 Safari 6.1, 2013 Internet Explorer 11.0 */

/* ––– Algunos criterios ––– */
/* Saltos: 0 Móviles 580 Retrato 810 Apaisada. Para cambiarlos en esta hoja hay que buscar la palabra saltosVistas */
/* Ancho del papel 1200 px, ancho del contenido 1000 px */
/* Márgenes a los lados de los textos 9px */

/* ––– Estructura de las páginas ––– */
body {
	margin: 0;
	border: 0;
	padding: 0;
	background-color: #FFFFFF;   /* blanco */
}

.contenido {	
	max-width: 1000px;
	margin: 0 auto;
	border: 0;
	padding: 0;
	background-color: #FFFFFF;   /* blanco */
}

.fondo {   /* Para cuando queremos cambiar el color de Fondo */
}

.papel {	
	max-width: 1200px;
	margin: 0 auto;
	border: 0;
	padding: 0;
	background-color: #FFFFFF;   /* blanco */
}

.pie {   /* La parte de abajo de todas las páginas */
	height: 150px;
}

/* ––– Logotipo ––– */
@media all and (min-width: 810px) {   /* saltosVistas */
	.logotipo {	
		width: 100px;
		height: 100px;
		margin: 0px auto;
		border: 0;
		padding: 20px 0;
	}
	.logotipo a {	
		display: block;
		height: 100%;
		margin: 0;
		border: 0;
		padding: 0;
		background-image: url('disop-logo-1.jpg');
	    background-size: 100px;   /* Tamaño de la imagen: 200 x 200 */
	    background-position: center;
	    background-repeat: no-repeat;
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.logotipo {	
		width: 100px;
		height: 100px;
		margin: 0px auto;
		border: 0;
		padding: 20px 0;
	}
	.logotipo a {
		display: block;
		height: 100%;
		margin: 0;
		border: 0;
		padding: 0;
		background-image: url('disop-logo-1.jpg');
	    background-size: 100px;   /* Tamaño de la imagen: 200 x 200 */
	    background-position: center;
	    background-repeat: no-repeat;
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.logotipo {	
		width: 80px;
		height: 80px;
		margin: 0px auto;
		border: 0;
		padding: 10px 0;
	}
	.logotipo a {
		display: block;
		height: 100%;
		margin: 0;
		border: 0;
		padding: 0;
		background-image: url('disop-logo-3.jpg');
	    background-size: 80px;   /* Tamaño de la imagen: 160 x 160 */
	    background-position: center;
	    background-repeat: no-repeat;
	}
}

/* ––– Menús ––– */
.colorMenus {
	background-color: #E9EAEA;   /* gris */
}

nav.menus {
	display: -webkit-flex;   /* Para Safari */
    display: flex;
	border: 0;
	padding: 0;
}

nav.menus a {
	margin: 0;
	border: 0;
	padding: 9px;
	text-align: left;
}

nav.menus a:hover {
    text-decoration: none;   
	color: #000000;   /* negro */
	background-color: #C4C4C4;   /* gris más oscuro */
}

@media all and (min-width: 810px) {   /* saltosVistas */
	nav.menus {
		flex-flow: row wrap;   /* shorthand flex-direction and flex-wrap */
		justify-content: space-between;
	}
	nav.menus a {
		font-size: 19px;
		font-weight: 400;   /* 400 normal, 700 negrita */
	    width: auto;
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	nav.menus {
		flex-flow: row wrap;   /* shorthand flex-direction and flex-wrap */
		justify-content: flex-start;
	}
	nav.menus a {
		font-size: 18px;
		font-weight: 400;   /* 400 normal, 700 negrita */
	    width: 45%;    /* En 2 columnas. No puede ser 50% debido al padding 9px */
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	nav.menus {
		flex-flow: column nowrap;   /* shorthand flex-direction and flex-wrap */
		justify-content: flex-start;
	}
	nav.menus a {
		font-size: 17px;
		font-weight: 400;   /* 400 normal, 700 negrita */
	    width: auto;
	}
}

/* ––– Menús con botones ––– */
.menusBotones {
	max-width: 800px;
	margin: 0 auto;
	border: 0;
	padding: 0;
	line-height: 36px;   /* ––– Aquí se define la altura de los botones (menos padding de a) ––– */
	text-align: center;
}

.menusBotones a {
	display: inline-block;
	margin: 0 3px;
	padding: 6px 24px;
	margin-bottom: 13px;
	border-radius: 5px;
	background-color: #81C0EC;   /* azulito */
	color: #535355;
	text-decoration: none;
	text-align: left;
}

.menusBotones a:hover {
    text-decoration: none;   
	color: #000000;   /* negro */
	background-color: #77A0BC;   /* azulito más oscuro */
}

.menusBotones img {
	display: inline-block;
	height: 36px;   /* ––– Igual que line-height ––– */
	margin-right: 6px;
	vertical-align: bottom;   /* ––– Con Middle no chuta ––– */
}

@media all and (min-width: 810px) {   /* saltosVistas */
	.menusBotones a {
		font-size: 19px;
		font-weight: 500;   /* 400 normal, 700 negrita */
	    width: 40%; 
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.menusBotones a {
		font-size: 18px;
		font-weight: 500;   /* 400 normal, 700 negrita */
	    width: 38%; 
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.menusBotones a {
		font-size: 17px;
		font-weight: 500;   /* 400 normal, 700 negrita */
	    width: 80%;
	}
}

/* ––– Tipografías ––– */
a {
	color: #00659B;   /* azul */
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

body {
	margin: 0;
	border: 0;
	padding: 0;
	font-family: Helvetica, sans-serif;   /* La tipografía por defecto la ponemos en Body */
	color:#493B3B;
	text-align: center;
}

h1 {
	margin: 0;
	border: 0;
	font-family: Helvetica, sans-serif;
	color: #000000;   /* negro */
}

h2 {
	margin: 0;
	border: 0;
	font-family: Helvetica, sans-serif;
	color: #000000;   /* negro */
}

h3 {
	margin: 0;
	border: 0;
	font-family: Helvetica, sans-serif;
	color: #000000;   /* negro */
}

.texto {   /* Para meter dentro texto que ocupe todo el ancho disponible */
	margin: 0;
	border: 0;
	color: #000000;   /* negro */
	text-align: left;
}

@media all and (min-width: 810px) {   /* saltosVistas */
	body {
		font-size: 21px;
		font-weight: 200;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	h1 {
		padding: 4px 0 10px;
		font-size: 33px;
		font-weight: 600;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	.peque h1 {
		font-size: 29px;
		line-height: 1.3;
	}
	h2 {
		padding: 24px 0 4px;
		font-size: 29px;
		font-weight: 300;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	.peque h2 {
		font-size: 26px;
		font-weight: 500;   /* 400 normal, 700 negrita */
		line-height: 1.3;
	}
	h3 {
		padding: 20px 0 4px;
		font-size: 24px;
		font-weight: 500;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	.peque h3 {
		font-size: 21px;
	}
	p {
		margin: 0;
		border: 0;
		padding: 4px 0 16px;
	}
	ul, ol {
		padding-top: 0;	
		padding-bottom: 12px;	
	}
	.texto {   /* Para meter dentro texto que ocupe todo el ancho disponible */
		padding: 0 9px;   /* Dejando un poco de margen a los lados*/
	}
	.texto.peque {  
		font-size: 18px;
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	body {
		font-size: 20px;
		font-weight: 200;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	h1 {
		padding: 2px 0 8px;
		font-size: 32px;
		font-weight: 600;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	.peque h1 {
		font-size: 28px;
		line-height: 1.3;
	}
	h2 {
		padding: 18px 0 0;
		font-size: 28px;
		font-weight: 300;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	.peque h2 {
		font-size: 25px;
		font-weight: 500;   /* 400 normal, 700 negrita */
		line-height: 1.2;
	}
	h3 {
		padding: 18px 0 0;
		font-size: 23px;
		font-weight: 500;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	.peque h3 {
		font-size: 20px;
	}
	p {
		margin: 0;
		border: 0;
		padding: 4px 0 16px;
	}
	ul, ol {
		padding-top: 0;	
		padding-bottom: 12px;	
	}
	.texto {  
		padding: 0 9px; 
	}
	.texto.peque {  
		font-size: 18px;
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	body {
		font-size: 17px;
		font-weight: 200;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	h1 {
		padding: 2px 0 6px;
		font-size: 26px;
		font-weight: 600;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	.peque h1 {
		font-size: 23px;
		line-height: 1.3;
	}
	h2 {
		padding: 10px 0 0;
		font-size: 22px;
		font-weight: 300;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	.peque h2 {
		font-size: 20px;
		font-weight: 500;   /* 400 normal, 700 negrita */
		line-height: 1.2;
	}
	h3 {
		padding: 10px 0 0;
		font-size: 19px;
		font-weight: 500;   /* 400 normal, 700 negrita */
		line-height: 1.4;
	}
	.peque h3 {
		font-size: 18px;
	}
	p {
		margin: 0;
		border: 0;
		padding: 4px 0 16px;
	}
	ul, ol {
		padding-top: 0;	
		padding-bottom: 10px;	
	}
	.texto {  
		padding: 0 9px;  
	}
	.texto.peque {  
		font-size: 17px;
	}
}

/* ––– Imágenes ––– */
.foto img {   /* Para meter dentro una foto que ocupe todo el ancho disponible */
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	padding: 0;
}

.fotoCentrada img {   /* Para meter dentro una foto de ancho fijo. Al usarlo hay que definir Width px en Img */
	display: block;
	margin: 0 auto;
	border: 0;
	padding: 0;
}

.fotosLinea img {   /* Una línea con fotos ajustadas por su altura */
	display: inline-block;
	height:40px;
}

/* ––– Marcas ––– */
.marca img {   /* Para mostrar logos de marcas */
	display: block;
	margin: 0;
	border: 0;
	padding: 0 9px;   /* Mismo margen que Texto Peque */
}

@media all and (min-width: 810px) {   /* saltosVistas */
	.marca img { 
		width: 150px;
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.marca img { 
		width: 150px;
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.marca img { 
		width: 120px;
		margin: 0 auto;
	}
}

/* ––– Mostrar y ocultar elementos, normalmente imágenes ––– */
@media all and (min-width: 810px) {   /* saltosVistas */
	.vistaRetrato {
		display: none;	
	}
	.vistaMoviles {
		display: none;	
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.vistaApaisada {
		display: none;	
	}
	.vistaMoviles {
		display: none;	
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.vistaApaisada {
		display: none;	
	}
	.vistaRetrato {
		display: none;	
	}
}

/* ––– Franja ––– */
/* Para poner una separación entre módulos manteniendo el color del fondo. */
@media all and (min-width: 810px) {   /* saltosVistas */
	.franja {
		height: 150px;	
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.franja {
		height: 100px;	
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.franja {
		height: 60px;	
	}
}

/* ––– Anchos de los elementos para los distintos módulos ––– */
@media all and (min-width: 810px) {   /* saltosVistas */
	.ancho25 {
		width: 25%;	
	}
	.ancho40 {
		width: 40%;	
	}
	.ancho50 {
		width: 50%;	
	}
	.ancho60 {
		width: 60%;	
	}
	.ancho75 {
		width: 75%;	
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.ancho25 {
		width: 25%;	
	}
	.ancho25.crece {
		width: 40%;	
	}
	.ancho25.mengua {
		width: 20%;	
	}
	.ancho40 {
		width: 40%;	
	}
	.ancho40.crece {
		width: 50%;	
	}
	.ancho40.mengua {
		width: 25%;	
	}
	.ancho50 { 
		width: 50%;	
	}
	.ancho50.crece { 
		width: 60%;	
	}
	.ancho50.mengua { 
		width: 40%;	
	}
	.ancho60 {
		width: 60%;	
	}
	.ancho60.crece {
		width: 75%;	
	}
	.ancho60.mengua {
		width: 50%;	
	}
	.ancho75 {
		width: 75%;	
	}
	.ancho75.crece {
		width: 80%;	
	}
	.ancho75.mengua {
		width: 60%;	
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.ancho25 {
		width: 100%;	
	}
	.ancho40 {
		width: 100%;	
	}
	.ancho50 { 
		width: 100%;	
	}
	.ancho60 {
		width: 100%;	
	}
	.ancho75 {
		width: 100%;	
	}
}

/* ––– Módulo 60/40 ––– */
/* Contenedor para meter dos elementos en él. Hay que designar el ancho% de los elementos */
/* usando las clases Ancho40, Ancho50 y Ancho60. */
/* Se pueden usar las clases Crece y Mengua para designar qué módulo se ensancha un poco en */
/* la vista Retrato. */
/* En la vista Móviles todo se muestra en una única columna colocándose en primer lugar el */
/* elemento que se haya marcado con la clase Primero. */

.elemento {   /* Por ahora no hay nada que definir aquí */
}

@media all and (min-width: 810px) {   /* saltosVistas */
	.modulo6040 {   
		display: -webkit-flex;   /* Para Safari */
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	.primero { 
		order: 0;
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.modulo6040 {   
		display: -webkit-flex;   /* Para Safari */
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	.primero { 
		order: 0;
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.modulo6040 {   
		display: -webkit-flex;   /* Para Safari */
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
	}
	.primero { 
		order: -1;   /* Ponlo en primer lugar */
	}
}

.abajo {   /* Para alinear los Elementos en la parte baja del Módulo 6040 */
	-webkit-align-items: flex-end;
	align-items: flex-end;
}

/* ––– Módulo de varias columnas ––– */
.columna {   /* Para componer a varias columnas. Al usarlo hay que fijar Width % */
	float: left;
	margin: 0;
	border: 0;
	padding: 0;
}

.variasColumnas {
	display: inline-block;
	width: 100%;
}

/* ––– Flex box ––– */
/* Para ir mostrando cosas en una línea y que salten cuando ya no quepan. */
/* Casi lo mismo que display: inline-block */
.cajaFlex {
	display: -webkit-flex;   /* Para Safari */
    display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin: 0;
	border: 0;
	padding: 0;
}

.cajaFlex.centrada {
	justify-content: center;
}

/* ––– Botón para PDF ––– */
/* Tiene su propia tipografía independiente de dónde se ponga el botón */
.colorBotones {   /* Por si fuera necesario igualar el color de los botones en algún sitio */
	background-color: #E9EAEA;   /* gris */
}

.botonPDF a {
	margin: 10px;
	border: 0;
	padding: 10px 20px 10px 56px;
	background-color: #E9EAEA;   /* gris */
	background-image: url('pdf-1.png');
    background-size: 38px;   /* Tamaño de la imagen: 200 x 200 */
    background-position: 6px center;
    background-repeat: no-repeat;
	text-align: left;
}

.botonPDF a:hover {
    text-decoration: none;   
	color: #000000;   /* negro */
	background-color: #C4C4C4;   /* gris más oscuro */
}

@media all and (min-width: 810px) {   /* saltosVistas */
	.botonPDF a {
		font-size: 19px;
		font-weight: 400;   /* 400 normal, 700 negrita */
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.botonPDF a {
		font-size: 18px;
		font-weight: 400;   /* 400 normal, 700 negrita */
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.botonPDF a {
		font-size: 17px;
		font-weight: 400;   /* 400 normal, 700 negrita */
	}
}

/* ––– Botón para foto de producto ––– */
.botonProducto:hover {
	background-color: #C4C4C4;   /* gris más oscuro */
}

.botonProducto img {
	display: block;
	margin: 0;
	border: 0;
}

.botonProducto a:hover {
	text-decoration: none;
}

@media all and (min-width: 810px) {   /* saltosVistas */
	.botonProducto img {
		width: 150px;
		padding: 10px;
	}
	.botonProducto.grande img {
		width: 260px;
		padding: 10px;
	}
	.botonProducto {
		font-size: 16px;
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.botonProducto img {
		width: 150px;
		padding: 10px;
	}
	.botonProducto.grande img {
		width: 260px;
		padding: 10px;
	}
	.botonProducto {
		font-size: 16px;
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.botonProducto img {
		width: 130px;
		padding: 8px;
	}
	.botonProducto.grande img {
		width: 220px;
		padding: 8px;
	}
	.botonProducto {
		font-size: 16px;
	}
}

/* ––– Flecha ––– */
@media all and (min-width: 810px) {   /* saltosVistas */
	.flecha {
		padding: 4px 9px 0 0;   /* Separamos un poco las líneas entre si */
	}
	.flecha a {
		padding: 0 0 0 42px;
	}
	.flecha a:hover {   /* Muestra una flecha al pasar el ratón por encima */
		background-image: url('flecha-enlace.png');
	    background-size: 32px;   /* Tamaño de la flecha: 97 x 59 */
	    background-position: left center;
	    background-repeat: no-repeat;
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.flecha {
		padding: 6px 9px 0 0;
	}
	.flecha a {
		padding: 0 0 0 42px;
	}
	.flecha a:hover {   /* Muestra una flecha al pasar el ratón por encima */
		background-image: url('flecha-enlace.png');
	    background-size: 32px;   /* 97 x 59 */
	    background-position: left center;
	    background-repeat: no-repeat;
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.flecha {
		padding: 6px 9px 0 0;
	}
	.flecha a {
		padding: 0;
	}
}

/* ––– Borde ––– */
/* Área con un margen alrededor en la que normalmente se meterá un módulo 6040 con color de fondo */
@media all and (min-width: 810px) {   /* saltosVistas */
	.borde {
	  	padding: 3%;
	}
}

@media all and (min-width: 580px) and (max-width: 809px) {   /* saltosVistas */
	.borde {
	  	padding: 2%;
	}
}

@media all and (max-width: 579px) {   /* saltosVistas */
	.borde {
	  	padding: 1%;
	}
}

/* ––– Al final ––– */
/* Las clases siguientes modifican alguna cualidad ya establecida y tienen que estar al final del documento */

.centrado {
	text-align: center;
}

.gris {   /* Para dar color a Fondo, Papel o Contenido */
	background-color: #E9EBEA;   /* gris */
}

.margenIzquierda {   /* Para separar un texto de una foto */
	padding-left: 10px;
}