.wrapper {
  margin: 0 10px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.column.aside{
	flex:1;
}

.column.contenido{
	flex:3;
}

.boton_menu{
	display: none;
}

#navegacion .closebtn {
	display: none;
}

.img-responsive{max-width: 100%;, height: auto;}

#wizard-normal{display: block;}
#wizard-movil{display: none;}

/**
 *	Hasta 1024px
 * 	Luego iré sobreescribiendo los tamaños más pequeños (por ejemplo, tamaño banners)
 */
	@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
	
		.tabla_responsive{
			display: block;
		    overflow-x: auto;
		    white-space: nowrap;
		}
		
		.row {flex-wrap: wrap;}
		
        .header-menu-e-idiomas{
            height: 25px;
        }

        .sel_idiomas{
            float:right;
        }

		#wizard-normal{display: none;}
		#wizard-movil{display: block;}
		
		#wizard-movil .list-type1{
			margin: 0 0 0 20px;
		}
		
		.boton_menu{
			/* display: inline-block;*/
			position: absolute;
			top: 0px;
			left: 5px;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 35px;
            height: 35px;
            border-radius: 50%;       
            background-color: var(--color-ppal);
            color: var(--text-color-ppal);
            font-size: 24px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            transition: transform 0.2s ease;
            position: relative;
            z-index: 10;
		}
		
		.column.aside{
			flex:1 100%;
			order: 2;
		}
		
		.column.contenido{
			flex:1 100%;
			order: 1;
			width: 100%;
		}
		
		/* The side navigation menu */
		#navegacion {
		  height: 100%; /* 100% Full-height */
		  position: fixed; /* Stay in place */
		  z-index: 1; /* Stay on top */
		  top: 0; /* Stay at the top */
		  width: 100%;
		  left: -100%;
		  background-color: #FFFFFF;
		  overflow-x: hidden; /* Disable horizontal scroll */
		}
		
		#navegacion .closebtn {
		  position: absolute;
		  top: 0;
		  right: 25px;
		  font-size: 36px;
		  margin-left: 50px;
		  display: block;
		  color: #000;
		}
		
	    #datepicker_div, .datepicker_inline,
	    .add li .frame .text p,
	    .imagen_seccion,
	    .buscador,
	    .pie-sne{
	        display:none !important;
	    }
	    
		    #formlogin{
		        display:block;
		        position:relative;
		        clear:both;
		        width:100%;
		          border-top:1px dashed #ddd;
		    }
			.cmxform label{
			    display:block;
			    float:none;
			    clear:both;
			}
			
			.spAyuda{margin:0;}
			
			em.error{margin-left:0;}
			
			.listado_eventos{
			    clear:both;
			    overflow:hidden;
			    padding-top:5px;
			}
			
			.servicios_interactivos{
				clear: both;
			}
			
			.servicios_interactivos ul li{
				display: inline-block;
	    		padding: 1px 6px;
	    		max-width: 32%;
			}
			
			.servicios_interactivos img{
			    display: block;
			    margin:1px 5px 0 0;
			}
			.header{
			    height:auto;
			    overflow:hidden;
			}
			.contenedor{
			    padding-top:15px;
			}
			.buscador{
			    display:block;
			    clear:both;
			    float:none;
			    position:relative;
			    right:0;
			    top:0;
			    margin:0;
			    padding:6px 0;
			    background:#555;
			}
			.buscador form{
			    padding-left:15px;
			}
			.buscador .input_google{
			    border:none;
			    border-radius:4px;
			}
			.buscador .env_google{
			    border:1px solid #aaa;
			    margin-left:7px;
			    border-radius:5px;
			    background:#999;
			    padding:2px 0;
			}
			.add{
			    margin:0;
			    padding:0;
			}
			
			.add .box-icon{
				float: left;
				display: inline-block;
				margin: 0;
			}
			
			.add .box-icon em{
				display: inline;
			}
			
			.add li .frame .wrap-text{
				float: right;
	    		display: inline-block;
	    		width: 74%;
			}
			
			.add li .frame .text{
	    		width: 100%;
			}
			
			.aside .areas_tematicas{
			    display:block;
			    margin-bottom:0;
			}
			.contenido .areas_tematicas{
			    margin-top:10px;
			    margin-bottom: 0px;
			}    
			    .add li{
			        width:100%;
			        margin:0;
			        margin-bottom:5px;
			    }
			    .add li .frame{
			        min-height:52px;
			    }
			    
			    .add li .frame1 h2,
			    .add li .frame2 h2,
			    .add li .frame3 h2,
			    .add li .frame4 h2{
			        border:none;
			        font-size:16px;
			        letter-spacing:0;
			        line-height:19px;
			    }
			    .add li .frame{
			        padding:4px;
			    }
			    .aside{
			        display:block;
			        float:none;
			        width:auto;
			        padding: 0 22px;
			    }
			    #navegacion{
			        margin-left:0;
			    }
			    .contenido{
			        padding-left:0;
			    }
			.cont_portada_izq {
			    padding-right: 0;
			}
			.cont_portada_der {
			    float: none;
			    width:100%;
			}
			.aside{
			    padding:0 15px;
			}
			.contenido_editor h2{
			    margin-top:10px;
			    margin-bottom:10px;
			    line-height:33px;
			    font-size:31px;
			}
			.contenido_portada{
			    margin-top:20px;
			}
			.cont_contenido {
			    padding: 0 15px;
			}
			.contenido_editor img{
			    max-width:100%;
			}
			.titulo_noticias{
			    margin-top: 20px;
			}
		    #formlogin{
		       	padding:6px 6px !important;
		    	float: none;
		    }
			#formlogin input{
			    width:55px !important;
			}
			
			.header .escudo_centro{
				max-height: 70px;
				max-width: 45%;
			}
			
			.header .escudo_centro_unico{
				max-height: 100%;
				width: 100%;
				max-width: 100%;
			}
			
		    .header #logo_derecha {
			    max-height: 115px;
				width: 45%;
			    top: auto;
			    /* margin:10px 0; */
			}
		    .header #logo_derecha img{
			    max-width:100% !important;
			    max-height:70px !important;
			    height:auto !important;
			}
		
			.pie-logo,
			.info-agencia,
			.pie-sne,
			.pie-telefono,
			.pie-direccion
			{
			    display:block;
			    float:none;
			    width:90%;
			    padding:0px;
			    border:none;
			}
			
			.banner_registro {margin-top: 5px;}
			.banner_registro span.titulo{font-size: 20px;}
			.banner_registro span.texto{font-size: 16px;}
	
		.divSeleccionPerfilLogin{
			margin: 0px 0 20px 0;
			font-size:16px;
		}
		
		.divSeleccionPerfilLogin label{
			font-size: 16px!important;
		}
		
		.divSeleccionPerfilLogin ul{
		}
		
		.ficha label{width: 100%; margin-top: 15px;}
		
		.banners div.itemBanner.imagen-izquierda span.titulo{
			width: 63%;
		    top: 5px;
		    left: 35%;
		}
		
		select + .select2-container {
			  width: 86% !important;
		}
		/* Si no pongo esto, cuando se pinta el <em> de error del validator entre el select y el span del select2, perdía el width 100% */
		.select2-container {
		  width: 86% !important;
		}
		
		.div-banner_horizontal_destacado{
			padding-top: 22px;
		}
		
		.div-banner_horizontal_destacado img{
			width: 100%;
		}
		
		div.itemBanner{width: 49%  !important; display: inline-block  !important; overflow: hidden;}
		
		.row-datos-agencia-y-logo-sne{padding:20px;}
		.colPieCentro{
			border-right: none;
			border-bottom: 1px solid #eeeeee;
			padding: 15px;
		}
		
		.col-datos-agencia{
			padding-bottom:30px;
		}
	}

/**
 *	De 700px a 1024px
 */
	@media only screen and (min-width: 700px) and (max-width: 1024px) {
		.add li {
			width: 33% !important;
		}
		
		.add li a{
			  display: flex;
  			align-items: center;
  			justify-content: center;
 		}		
		
		.pie-logo{
			float:left;
			width: 40%;
		}
		
		.info-agencia{
		    display: inline-block; 
		    width: 55%;
		    text-align:center;
		    font-family: Arial,sans-serif;
		    color: #999;
		}
		
		div.itemBanner{width: 33%  !important; display: inline-block  !important;}
		
	}

/**
 *	Hasta 768px
 */
	@media only screen and (max-width: 768px){
	}
	
/**
 *	Hasta 700px
 */
	@media only screen and (max-width: 700px){
		.add li a{
			  display: flex;
  			align-items: center;
  			justify-content: center;
 		}	
		
		body{padding-bottom: 50px;}
		
		div.slideshow-image-caption{
		    max-width: 90%;
		} 
		
		.text-center-xs{text-align: center;}
		
		
		.pie .logos-kit-digital img{width: 75%;}
	}
	
/**
 *	Hasta 575 (Bootstrap extra-small)
 */
	@media only screen and (max-width: 575px){
 		.logos-kit-digital > div:first-of-type{
				margin-bottom: 30px;
			}
			
		.grid_ofertas_portada .col-item{height: 210px; margin-bottom: 20px;}	
	}
	
/**
 *	De 480px a 700px
 */
 	@media only screen and (min-width: 480px) and (max-width: 700px) {
 		.add li .frame .wrap-text{max-width: 60%;}
 		.add li{
 			width: 48%;
 		}
	}
 
/**
 *	Hasta 480px
 */
	@media only screen and (max-width: 480px){
		body{padding-bottom: 50px;}
		
		div.slideshow-image-caption{
		    max-width: 90%;
		} 
		
		.add li .frame .wrap-text{max-width: 70%;}
				
 		.add li{
 			width: 98%;
 		}

		.add li p{
			margin: 0 0 20px 0;
		}
	}