*{
    box-sizing: border-box;
}
body{
	background: url(img/bg_dym.jpg) no-repeat #456094;
    background-position: center top;
	width: 100%;
	padding: 0px;
	margin: 0px;

	font-family: Open Sans;
	font-weight: 400;
}

nav.menu{
	width: 100%;
	height: 50px;
	color: white;
	font-size: 10px;
}
nav.menu ul{
	width: 100%;
    height: 45px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px 0px;
    padding: 0px;
}
nav.menu ul li{
	width: 33%;
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
    flex-grow: 0;

}
/*
nav.menu ul li:nth-of-type(4){
	display: flex;
	justify-content: flex-end;
}
*/
nav.menu ul li figure{
	margin: 4px;
    padding: 0px;
}
nav.menu ul li a {
    color: white;
    text-decoration: none;;
}
nav.menu ul li span {
    display: none;
}
nav ul li figure img{
	height: 36px;
	width: 36px;
}

div.logo{
	width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 50px;
}
div.logo figure{
	height: 60%;
}
div.logo figure img{
	height: 100%;
}

div.introduction{
	color: white;
	width: 100%;
    display: flex;
    justify-content: center;
}
div.introduction p{
	width: 70%;
	text-align: center;
}

section#content{
	width: 100%;
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.nav{
	display: none;
}

section#content aside{
	width: 80%;
	background: white;
	border-radius: 20px;
	font-size: 12px;
	margin-top: 5%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

aside#quienes-somos div.text{
	width: 80%;
}
aside#quienes-somos div.text h2{
	font-family: Open Sans;
	font-size: 36px;
	font-weight: 300;
	margin: 0px 0px 10px;
}
aside#quienes-somos div.text h3{
	font-family: Open Sans;
	font-size: 24px;
	font-weight: 300;
	margin: 0px 0px 10px;
}
aside#quienes-somos div.img-quienes-somos{
	width: 90%;
	margin: 0px;
}
aside#quienes-somos div.img-quienes-somos figure{
	width: 100%;
	margin: 0px;
}
aside#quienes-somos div.img-quienes-somos figure img{
	width: 100%;
}

aside div.opciones{
	display: none;
}
aside div.title-mobile h3{
	color: #1B2C70;
	font-weight: 600;
	font-size: 28px;
}

aside div.desc{
	width: 80%;
}
aside div.desc h2{
	color: #456094;
	font-size: 36px;
	font-weight: 300;
	margin-top: 0px;
}
aside div.desc p{
	font-size: 16px;
}

aside div.img{
	width: 60%;
	border-radius: 20px;
}
aside div.img button{
	background: linear-gradient(180deg, #456094 0%, #151E2E 100%);
	width: 80%;
	border-radius: 10px;
	color: white;
	border: none;
	margin-bottom: 5%;
	position: relative;
	left: 10%;
	top: 85%;
}

/*CONTROL DE OPCIONES CON DISPLAYS*/

aside div.desc,
aside div.img{
	display: none;
}
aside div.activo{
	display: block;
}

    /*FONDOS DE SEGUROS PERSONALES*/
    aside#seguros-personales div#img-autos{
        background: url(img/auto_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-motos{
        background: url(img/motos_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-embarcaciones{
        background: url(img/embarcaciones_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-hogar{
        background: url(img/hogar_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-vida{
        background: url(img/vida_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-accidentes{
        background: url(img/accidentes_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-viajes{
        background: url(img/viajes_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-bolso-protegido{
        background: url(img/bolsoprotegido_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }

    /*FONDOS DE SEGUROS COMERCIALES*/
    aside#seguros-comerciales div#img-integral-de-comercio{
        background: url(img/integralcomercio_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-incendio{
        background: url(img/incendio_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-caucion{
        background: url(img/caucion_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-vida-colectivo{
        background: url(img/vidacolectivo_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-art{
        background: url(img/art_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-responsabilidad-civil{
        background: url(img/responsabilidadcivil_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-equipos-y-seguro-tecnico{
        background: url("img/equipamiento_mobile.jpg");
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-flota-automotor{
        background: url(img/flotaautomotor_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-transporte{
        background: url(img/transporte_mobile.jpg);
        background-position: center top;
        background-size: cover;
    }

section#contacto{
	width: 100%;
	height: 50%;
	background: #FFFFFF80;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 5%;
	padding-bottom: 5%;
}
section#contacto h3{
	margin-top: 5%;
	font-family: Open Sans;
	font-size: 48px;
	font-weight: 300;
	color: #1B2C70;
	text-align: center;
}
section#contacto form{
	width: 80%;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
section#contacto input,
section#contacto select,
section#contacto textarea{
	height: 50px;
	border-radius: 10px;
	border: none;
	color: #666;
	font-size: 18px;
	margin: 0.5%;
	padding-left: 10px;
}

section#contacto form input#nombre,
section#contacto form input#empresa,
section#contacto form input#telefono,
section#contacto form input#email
{
	width: 49%;
}
section#contacto form select#producto,
section#contacto form input#motivo,
section#contacto form textarea#mensaje
{
	width: 99%;
}
section#contacto form textarea#mensaje{
	height: 100px;
}
section#contacto form input#button{
	background: #456094;
	color: white;
	width: 50%;
}

footer{
	background: white;
	width: 100%;
	padding: 5% 5% 70px 5%;
	display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    color: #666;
}
footer *{
	align-items: center;
	justify-content: center;
}
footer a{
	color: #666;
    text-decoration: none;
}
footer div#datos-contacto,
footer div#informar,
footer div#logo{
	width: 90%;
	display: flex;
	flex-direction: column;
    align-items: center;
    font-size: medium;
}
div#datos-contacto *{
	margin: 5px 2px;
}
div#ubicacion,
div#llamar,
div#redes
{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}
div#ubicacion a{
	display: flex;
	flex-direction: row;
}
footer figure{
	margin: 0px;
}

.mensaje-status {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    display: none; /* Oculto por defecto */
}
.mensaje-status.success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}
.mensaje-status.error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

@media screen and (min-width: 480px){
	nav.menu{
		font-size: 13px;
	}
	div.introduction p{
		width: 80%;
	}
}

@media screen and (min-width: 767px){
	nav.menu{
		font-size: 21px;
	}
	nav.menu ul li figure{
    margin: 4px 10px;
	}

	footer{
    	background: white;
    	width: 100%;
    	padding: 5% 5% 70px 5%;
    	display: flex;
        justify-content: space-between;
        flex-direction: row;
        color: #666;
    }
    footer a{
    	color: #666;
        text-decoration: none;
    }
    footer a:hover{
    	font-weight: bold;
    }
    footer div#datos-contacto,
    footer div#informar,
    footer div#logo{
    	width: 24%;
    	display: flex;
    	flex-direction: column;
        align-items: center;
        font-size: medium;
    }
    div#informar{
    	text-align: center;
    }
    div#datos-contacto{
    	justify-content: flex-start;
    }

    div#datos-contacto *{
    	margin: 5px 2px;
     	justify-content: normal;
	}
    div#ubicacion,
    div#llamar,
    div#redes
    {
    	width: 100%;
    	display: flex;
    	flex-direction: row;
    }
    div#ubicacion a{
    	display: flex;
    	flex-direction: row;
    }
    footer figure{
    	margin: 0px;
    }

}

@media screen and (min-width: 1150px){
    nav.menu ul li{
        width: 30%;
    }
    nav.menu ul li figure{
        margin: 20px;
        cursor: pointer;
    }

    nav.menu ul li span {
        display: block;
    }

    div.logo{
        margin-top: 0px;
    }

    div.introduction{
        margin-top: 200px;
    }
    div.introduction p{
        width: 39%;
    }

    div.nav{
		display: block;
		position: sticky;
		top: 0;
		background: rgba(27, 44, 112, 1);
        border-radius: 10px;
        width: fit-content;
		margin: 0 auto;
        padding: 10px 30px;
        color: white;
        z-index: 109;
		opacity: 1;
    }
    div.nav a{
        text-decoration: none;
        color: white;
        cursor: pointer;
        padding: 3px;
    }
    div.nav a:hover{
        font-weight: bold;
    }
    div.nav a:focus{
        font-weight: bolder;
    }

    section#content aside{
        height: 553px;
        font-size: 16px;
        
        display: flex;
        flex-direction: row;
    }
    section#content aside:nth-of-type(1){
        margin-top: -1%;
        padding: 20px;
    }

	aside#quienes-somos {
		height: auto !important;
		align-content: flex-start;
		align-items: flex-start;
	}
	
    aside#quienes-somos div.text{
        width: 55%;
		padding: 0 20px;
    }
    aside#quienes-somos div.img-quienes-somos{
        width: 42%;
    }
    aside#quienes-somos div.img-quienes-somos figure{
        width: 100%;
    }


    aside div.title-mobile{
        display: none;
    }
    aside div.opciones{
    	display: block;
        background: #1B2C7033;
        width: 25%;
        border-radius: 20px;
        padding: 3%;
        height: inherit;
    }
    aside div.opciones h3{
        color: #1B2C70;
        font-weight: 600;
    }
    aside div.opciones nav ul{
        margin-top: 15%;
        padding-left: 0px;
    }
    aside div.opciones nav ul li{
        list-style: none;
        margin-top: 5%;
        cursor: pointer;
        color: #333333;
    }
    aside div.opciones nav ul li:hover,
    aside div.opciones nav ul li:focus{
        font-weight: bolder;
    }

    aside div.desc{
        width: 45%;
        padding: 3%;
    }

    aside div.img{
        width: 30%;
    }
    aside div.img button{
        height: 10%;
        cursor: pointer;
    }


    /*FONDOS DE SEGUROS PERSONALES*/
    aside#seguros-personales div#img-autos{
        background: url(img/auto_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-motos{
        background: url(img/motos_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-embarcaciones{
        background: url(img/embarcaciones_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-hogar{
        background: url(img/hogar_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-vida{
        background: url(img/vida_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-accidentes{
        background: url(img/accidentes_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-viajes{
        background: url(img/viajes_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-personales div#img-bolso-protegido{
        background: url(img/bolsoprotegido_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }

    /*FONDOS DE SEGUROS COMERCIALES*/
    aside#seguros-comerciales div#img-integral-de-comercio{
        background: url(img/integralcomercio_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-incendio{
        background: url(img/incendio_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-caucion{
        background: url(img/caucion_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-vida-colectivo{
        background: url(img/vidacolectivo_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-art{
        background: url(img/art_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-responsabilidad-civil{
        background: url(img/responsabilidadcivil_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-equipos-y-seguro-tecnico{
        background: url("img/equipamiento_desktop.jpg");
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-flota-automotor{
        background: url(img/flotaautomotor_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }
    aside#seguros-comerciales div#img-transporte{
        background: url(img/transporte_desktop.jpg);
        background-position: center top;
        background-size: cover;
    }

    /*CONTROL DE OPCIONES CON DISPLAYS*/

    aside div.desc,
    aside div.img{
        display: none;
        height: inherit;
    }
    aside div.activo{
        display: block;
    }

    section#contacto form{
        width: 75%;
    }
    
    section#contacto form input#button{
        width: 25%;
        cursor: pointer;
    }
}