#main {
/*    background-image: url(../img/fondoculturaagua.webp);*/
    background: 
    linear-gradient(to top, rgb(0 0 0 / 36%), rgb(0 0 0 / 43%)), 
        url('../img/fondoinstalaciones.webp') top/cover no-repeat; /* Imagen de fondo */
}
.texto-vertical {
    writing-mode: sideways-lr;
    text-orientation: mixed;
    text-align: center;
}
.divflex{
    margin-left: -3rem;
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    padding-top: 3rem;
/*    height: calc(100vh - 450px);*/
}
.flextitle{
    width: 20%;
    display: flex;
    align-items: self-end;
    justify-content: center;
}
.msdb{
    margin-bottom: 6%;
}
.flextext{
    width: 62%;
}
/* .texto-vertical{
    margin-bottom: -3.5rem!important;
} */
.azul{
    color: #0166a8!important;
}
.titlewhite{
    text-align: center;
    margin-bottom:0px;
	width: fit-content;
}
.msj{
    text-align: left;
	margin-top: 24px;
	width: 80%;
    margin-right: auto;
    margin-left: 0;
}
.msj a{
	color: #fff;
	text-decoration: none;
}
.msj a:hover{
	color: #fff;
	text-decoration: none;
}
.moodmovil{
    display: none;
}
#logocab{
    margin-bottom: 0;
    margin-top: 0px;
    width: 170px;
}
.divflexmenu{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.divflexmenusos{
    justify-content: center;
    width: 66%;
}
.divflexmenulogo{
    justify-content: right;
    width: 34%;
}
#socialtop{
    list-style: none;
    margin: 0;
    padding: 0;
}
#socialtop li {
    display: inline-block;
}
#socialtop a img {
    width: 25px;
    margin-left: 5px;
}
.logomovil{
	display: none!important;
}
#divcontentmovil{
	display: none;
}
.brmovil{
    display: none;
}
@media only screen and (max-width: 1300px) {
    .flextitle {
/*        width: 25%;*/
    }
    .flextext {
        width: 75%;
    }
    .divflex{
    	padding-top: 0rem;
    }
    .msj {
        margin-top: 10px; 
    }
    
}
@media only screen and (max-width: 1250px) {
    .flextext {
/*        width: 64%;*/
    }
    .flextitle {
/*        width: 26%;*/
    }
}
@media only screen and (max-width: 1050px) {
    #logocab{
        width: 160px;
    }
    .divflex{
        padding-top: 3.5rem;
    }
  
}
@media only screen and (max-width: 991px) {
    .divflex {
        padding-top: 4rem;
    }
    .flextext {
        width: 70%;
    }
}
@media only screen and (max-width: 951px) {
    .flextitle {
        width: 29%;
    }
}
@media only screen and (max-width: 851px) {
    .divflex {
        padding-top: 2rem;
    }
    #socialtop a img{
        width: 20px;
        margin-left: 4px;
    }
    #logocab {
        width: 145px;
    }
    .divflex {
        margin-left: -1rem;
    }
}
@media only screen and (max-width: 774px) {
    .divflex{
        padding-top: 0.5rem;
        margin-left: 0rem;
    }
    #logocab {
/*        width: 130px;*/
        width: auto;
        padding-right: 35px;
        height: 57px;
        z-index: 9;
    }

    .logodeskop{
    	display: none!important;
    }
    .logomovil{
		display: block!important;
	}
	#main{
/*		background-image: url(../img/fondoinstalacionesmovil.webp);*/
		background-color: #DFF1F8;
	}
	#divcontentmovil{
		display: flex;
        padding: 0;
	}
	#divcontentdeskop, #divcontentdeskop2{
		display: none;
	}
    .divtextbluemovil{
        background-color: #0066A9;
        border-top-left-radius: 3rem;
        border-top-right-radius: 3rem;
        margin-top: -13rem;
    }
	.scrollmovil{
		
        height: auto;
/*        margin-top: 261px;*/
        
        /*margin-top: -18px;
        z-index: 2;
        position: relative;*/
	}
	.msj {
	    margin-top: 0rem;
	}
	.texto-vertical{
		text-align: center;
        width: auto;
	}
	.textwhite {
        text-align: center;
    }
}
@media only screen and (max-width: 770px) {
    .mooddesktop{
        display: none;
    }
    .moodmovil{
        display: inherit;
    }
    .azul{
        text-shadow: 1px 2px 3px #ffffff;
        text-align: left !important;
    }
    .flextext {
        width: 100%;
    }
    .flextitle {
        width: 100%;
    }
    .texto-vertical {
        transform: none;
        margin-bottom: 1rem;
        margin-top: 5px;
        writing-mode: horizontal-tb;
        text-orientation: initial;
/*        font-size: 2.5rem;*/
        width: 68%;
        margin-left: auto;
        margin-right: auto;
        text-shadow: 7px 8px 6px rgba(0, 0, 0, 0.5);
        margin-bottom: 7px !important;

    }
    .flextext p {
        margin-bottom: 0rem !important;
        padding-left: 7px;
    }
    #main{
/*    	display: flex;*/
        background: none;
/*    	flex-wrap: wrap;*/
        background-color: #DFF1F8;

        padding-left: 0px;
        padding-right: 0px;
    }
    .contentlogomovil{
    	display: block;
    	width: 100%;
        /*width: 112%;
        margin-left: -35px;
        margin-right: -35px;*/
        
        /*margin-top: 0;
        z-index: 3;
        position: relative;*/
    }
    .scrollmovil{
    	display: block;
    	width: 100%;
        margin-top: -1.9rem;

        /*margin-top: -18px;
        z-index: 2;
        position: relative;*/
        height: calc(100dvh - 115px) !important;
    }
    .divtextbluemovil > div{
        width: 90%;
        margin: auto;
    }
    .fondoinstalaciones{
        width: 100%;
    }
    .textwhite {
        text-align: justify;
    }
    .brmovil{
        display: block;
    }
    /*.contentMenu{
        z-index: 3;
    }
    footer{
        z-index: 3;
    }*/
    .texto-vertical {
        margin-bottom: 0;
    }
    .divtextbluemovil {
        height: 100dvh;
    }
    .tesmod {
        text-align: center;
        font-weight: 200;
    }
    .textwhite  a{
        font-weight: 600;
        color: white;
        text-shadow: none !important;
    }
}
@media only screen and (max-width: 680px) {
    .divtextbluemovil{
        margin-top: -10rem;
    }
}
@media only screen and (max-width: 600px) {
    .divtextbluemovil{
        margin-top: -9rem;
    }
}
@media only screen and (max-width: 570px) {
    .divtextbluemovil{
        margin-top: -7rem;
    }
}
@media only screen and (max-width: 550px) {
    .divtextbluemovil{
        margin-top: -6.5rem;
    }
}
@media only screen and (max-width: 500px) {
    .divtextbluemovil{
        margin-top: -5rem;
    }
}
@media only screen and (max-width: 480px) {
    .divtextbluemovil{
        margin-top: -4rem;
    }
}
@media only screen and (max-width: 450px) {
    .divtextbluemovil{
        margin-top: -6rem;
    }
}
@media only screen and (max-width: 430px) {
    .divtextbluemovil{
        margin-top: -2.8rem;
    }
}
@media only screen and (max-width: 390px) {
    .divtextbluemovil{
        margin-top: -7rem;
    }
}
@media only screen and (max-width: 380px) {
    .divtextbluemovil{
        margin-top: -6.7rem;
    }
}
@media only screen and (max-width: 370px) {
    .divtextbluemovil{
        margin-top: -8rem;
    }
}
@media only screen and (max-width: 360px) {
    .divtextbluemovil{
        margin-top: -7rem;
    }
}
@media only screen and (max-width: 350px) {
    .divtextbluemovil{
        margin-top: -9rem;
    }
}