.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;
		}

		table.bt.tabla-listado-cursos,
		table.bt.tabla-listado-ofertas {
			display: block;
			width: 100%;
			overflow: visible;
			white-space: normal;
			border-collapse: separate;
			border-spacing: 0 12px;
		}

		table.bt.tabla-listado-cursos tbody,
		table.bt.tabla-listado-ofertas tbody {
			display: block;
			width: 100%;
		}

		table.bt.tabla-listado-cursos tbody tr:first-child,
		table.bt.tabla-listado-ofertas tbody tr:first-child {
			display: none;
		}

		table.bt.tabla-listado-cursos tbody tr,
		table.bt.tabla-listado-ofertas tbody tr {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin-bottom: 12px;
			overflow: hidden;
			border: 1px solid #ddd;
			border-radius: 10px;
			background: #fff;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
			box-sizing: border-box;
		}

		table.bt.tabla-listado-cursos tbody td,
		table.bt.tabla-listado-ofertas tbody td {
			float: none;
			width: 100%;
			margin-top: 0;
			padding: 6px 12px;
			box-sizing: border-box;
			overflow-wrap: anywhere;
		}

		table.bt.tabla-listado-cursos tbody td.celda-destacada,
		table.bt.tabla-listado-ofertas tbody td.celda-destacada {
			order: -1;
			border-bottom: 1px solid #eee;
			background: #f7f7f7;
			font-size: 16px;
			font-weight: bold;
		}

		table.bt.tabla-listado-cursos tbody td.celda-destacada::before,
		table.bt.tabla-listado-ofertas tbody td.celda-destacada::before {
			display: none;
		}

		table.bt.tabla-listado-cursos tbody td.celda-destacada .bt-content,
		table.bt.tabla-listado-ofertas tbody td.celda-destacada .bt-content {
			min-width: 0;
			padding-top: 0;
		}

		table.bt.tabla-listado-cursos tbody td.celda-destacada a,
		table.bt.tabla-listado-ofertas tbody td.celda-destacada a {
			color: var(--color-ppal);
			text-decoration: none;
			overflow-wrap: anywhere;
		}

		.migas{margin-bottom: 10px;}
		
		.row {flex-wrap: wrap;}

		.contenedor > .wrapper > .row {
			margin-left: 0;
			margin-right: 0;
		}

		.column.contenido > .cont_contenido {
			padding-left: 20px;
			padding-right: 20px;
		}

		.cmxform fieldset {
			width: 100%;
			max-width: 100%;
			min-width: 0;
			box-sizing: border-box;
		}

		.cmxform fieldset input,
		.cmxform fieldset select,
		.cmxform fieldset textarea,
		.cmxform fieldset .select2-container {
			max-width: 100%;
			box-sizing: border-box;
		}

		.cmxform input[type=email],
		.cmxform input[type=number],
		.cmxform input[type=password],
		.cmxform input[type=text],
		.cmxform select,
		.cmxform textarea {
			max-width: 100%;
			box-sizing: border-box;
		}

		div.divBtnSoporteTeleformacion {
			float: none;
			clear: both;
			margin: 12px 0;
		}

		
        .header-menu-e-idiomas{
			height: 44px;
        }

        .sel_idiomas{
            float:right;
        }

		.boton_menu{
			position: relative;
			top: 0px;
			left: 5px;

            display: inline-flex;
            align-items: center;
            justify-content: center;
			width: 44px;
			height: 44px;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: transparent;
			color: #333;
            font-size: 24px;
			box-shadow: none;
			cursor: pointer;
            z-index: 10;
		}

		.pildora-entorno {
			left: auto;
			right: 8px;
			top: 8px;
			max-width: calc(100% - 64px);
			overflow-wrap: anywhere;
		}
		
		.column.aside{
			flex:1 100%;
			order: 2;
		}
		
		.column.contenido{
			flex:1 100%;
			order: 1;
			width: 100%;
		}
		
		/* The side navigation menu */
		#navegacion {
		  height: 100vh;
		  height: 100dvh;
		  position: fixed;
		  z-index: 1000;
		  top: 0;
		  width: 100%;
		  left: -100%;
		  margin: 0;
		  padding: calc(64px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
		  box-sizing: border-box;
		  background-color: #FFFFFF;
		  color: #333;
		  overflow-x: hidden;
		  overflow-y: auto;
		  overscroll-behavior: contain;
		}
		
		#navegacion .closebtn {
		  position: fixed;
		  top: calc(8px + env(safe-area-inset-top, 0px));
		  right: max(12px, env(safe-area-inset-right, 0px));
		  width: 44px;
		  height: 44px;
		  margin: 0;
		  border: 1px solid #ddd;
		  border-radius: 4px;
		  background: #fff;
		  font-size: 22px;
		  display: none;
		  color: #333;
		  z-index: 1;
		  cursor: pointer;
		}

		.mobile-menu-active #navegacion {
			left: 0;
		}

		#navegacion[hidden] {
			display: none !important;
		}

		#navegacion.is-open .closebtn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

		html.mobile-menu-open {
			overflow: hidden;
		}

		body.mobile-menu-open {
			position: fixed;
			left: 0;
			width: 100%;
			overflow: hidden;
		}

		body.mobile-menu-open .qc-cmp2-persistent-link {
			visibility: hidden;
		}

		#btn-compartir {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 44px !important;
			height: 44px;
			padding: 0 !important;
		}

		#share-page {
			margin: 0;
		}

		#btn-compartir span {
			display: none;
		}

		#navegacion #cc-edit-preferences {
			position: static;
			z-index: auto;
			min-height: 44px;
			max-width: 100%;
			text-align: left;
			white-space: normal;
		}

		#navegacion .mobile-menu-section.has-content {
			display: block;
			padding: 16px 0;
			border-bottom: 1px solid #ddd;
		}

		#navegacion .mobile-menu-section:first-of-type {
			padding-top: 0;
		}

		#navegacion .header-menu-block {
			display: block;
		}

		#navegacion .menu-navigation {
			padding: 16px 0;
		}

		#navegacion .topnav a {
			display: flex;
			align-items: center;
			min-height: 44px;
			box-sizing: border-box;
		}

		#navegacion a,
		#navegacion button {
			overflow-wrap: anywhere;
		}

		#navegacion a:focus-visible,
		#navegacion button:focus-visible,
		.boton_menu:focus-visible {
			outline: 2px solid var(--color-ppal);
			outline-offset: 2px;
		}

		#navegacion #formlogin,
		#navegacion .btn-ir-login {
			float: none;
			width: 100%;
			margin: 0;
			padding: 0;
			border: 0;
		}

		#navegacion #formlogin {
			color: #333 !important;
		}

		#navegacion #td-boton-porcentaje-finalizacion {
			color: #555;
		}

		#navegacion #td-boton-porcentaje-finalizacion a {
			color: #333;
		}

		#navegacion .btn-ir-login {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 44px;
			padding: 8px 12px;
			box-sizing: border-box;
			white-space: normal;
		}

		#navegacion #tabla-estado-login-logout {
			float: none;
			table-layout: fixed;
		}

		#navegacion #tabla-estado-login-logout td {
			text-align: left;
		}

		#navegacion .td-btn-salir {
			width: 80px;
			text-align: right !important;
		}

		#navegacion #formlogin .btn,
		#navegacion #td-boton-porcentaje-finalizacion a {
			min-height: 44px;
			display: inline-flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 4px;
		}

		#navegacion .sp-email-logueado {
			overflow-wrap: anywhere;
		}

		#navegacion .servicios_interactivos {
			border: 0;
			height: auto;
			margin: 0;
			padding: 0;
			background: none;
		}

		#navegacion .servicios_interactivos ul li a {
			color: #333 !important;
		}

		#navegacion .servicios_interactivos ul {
			margin: 0;
			padding: 0;
		}

		#navegacion .servicios_interactivos ul li {
			display: block;
			max-width: none;
			padding: 0;
		}

		#navegacion .servicios_interactivos .btn-icono {
			display: flex;
			align-items: center;
			gap: 12px;
			min-height: 44px;
			padding: 8px 0;
			box-sizing: border-box;
			text-align: left;
			white-space: normal;
		}

		#navegacion .servicios_interactivos .btn-icono img,
		#navegacion .servicios_interactivos .btn-icono i {
			flex: 0 0 24px;
			width: 24px;
			max-height: 28px;
			margin: 0;
			object-fit: contain;
			font-size: 20px;
			text-align: center;
		}

		#navegacion .servicios_interactivos .btn-icono span {
			font-size: 15px;
			line-height: 1.4;
			text-decoration: none;
		}

		#navegacion .sel_idiomas,
		#navegacion .social {
			float: none;
			height: auto;
			margin: 0;
			padding: 0;
			text-align: left;
		}

		#navegacion .sel_idiomas ul,
		#navegacion .social .ul_links_social {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			float: none;
			margin: 0;
			text-align: left;
		}

		#navegacion .sel_idiomas li,
		#navegacion .social li {
			float: none;
			height: auto;
			margin: 0;
		}

		#navegacion .sel_idiomas a,
		#navegacion .social a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 44px;
			min-height: 44px;
			box-sizing: border-box;
		}

		#navegacion .sel_idiomas a {
			padding: 8px 12px 8px 28px;
			background-position: 8px center;
		}

		#navegacion .sel_idiomas a.seleccionado {
			background-color: #f2f3f4;
			border-radius: 4px;
		}

		#navegacion .sel_idiomas a span {
			font-size: 14px;
		}

		#navegacion .social > span {
			display: block;
			margin: 0 0 8px;
		}

		#navegacion .social img {
			width: 24px;
			height: 24px;
			object-fit: contain;
		}
		
	    #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;
			    width:auto;
			    max-width:100%;
			    text-align:left;
			}
			
			.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-bottom:0px;
			    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 .logo {
				padding: 0 16px 12px;
				text-align: center;
			}

			.header .logo h1 > a {
				display: block;
			}

			.header .escudo_centro{
				display: block;
				width: auto;
				height: auto;
				max-height: 70px;
				max-width: 100%;
				margin: 0 auto;
				object-fit: contain;
			}

			.header.escudo_centro_unico {
				min-height: 0;
			}

			.header.escudo_centro_unico .logo {
				padding: 0;
			}
			
			.header .escudo_centro_unico{
				max-height: none;
				width: 100%;
				max-width: 100%;
			}
			
		    .header #logo_derecha {
				display: none;
			}
		
			.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; margin-bottom:15px;}
			.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: var(--font-primary);
		    color: #999;
		}
		
		div.itemBanner{width: 33%  !important; display: inline-block  !important;}
		
	}

/**
 *	Hasta 768px
 */
	@media only screen and (max-width: 768px){
		fieldset {
			padding: 18px 16px 20px;
		}

		fieldset legend {
			padding: 0 8px;
		}
	}
	
/**
 *	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;
		}
	}
