@charset "UTF-8"; /*LENGUAJE DE ESTILOS DEL SITIO*/

/*GENERAL*/
.classIcon{display:flex; align-items:center; justify-content:center; font-family:softicon;}

.sectionPadding{ padding:3% 13% 0% 13%; width: 74%;}
.sectionMargin{ margin: 7% 13% 0% 13%; }
.sectionMarginSimple{ margin: 7% 0% 0% 0%; }
.sectionMarginInvested{ margin: 0% 13% 0% 13%; width: 74%;}
.sectionMarginPadding{ margin: 7% 0% 0% 0%; padding: 5% 13% 0% 13%; }


.button{background-color: var(--color-prim); color: var(--color-white); font-family: bold; font-size: 1em; padding: 10px 20px; margin: 10px 0px; border-radius: 0px; cursor: pointer; transition:0.2s Ease-in-out;
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);}
.button:hover{background-color: var(--color-white); color: var(--color-prim); padding: 10px 25px;
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);}

.backColorGradient{ background: linear-gradient(152deg, var(--color-prim) 0%, var(--color-ter) 100%);}

.linkFile{background-color: var(--color-prim); color:var(--color-white); font-family: bold; padding: 4px 7px; border-radius:10px; font-size:0.7em; }
/*PÁGINA PRINCIPAL*/

    /*SECCION DE PREGUNTAS FRECUENTES*/
    .sectionInformation{width: 33%;}
        .infImgen{text-align: center; padding-bottom: 30px; width: 100%;}

        .infReference{ font-family: bold; font-size: 0.6em; color: var(--color-prim);}
        .infTitle{ font-family: bold; font-size: 1.7em; opacity: 0.9; padding:5px 0px 30px 0px;}
        .infDescription{opacity: 0.5; font-size: 0.8em; /*margin-bottom: 20px;*/ color: var(--color-black);}


        .infSeparator{border-top: 2px dotted #aaa; margin: 20px 0px 30px 0px;}
		.infButton{padding: 10px; cursor: pointer; transition:0.2s Ease-in-out;}
			.infButton:hover{padding: 20px 10px; background-color: var(--color-sec);}
				.infButtonTitle{font-family: bold; font-size: 0.8em; color: var(--color-prim); padding-bottom: 5px;}

        .inflistTitle{font-family: black; font-size: 4em; opacity: 0.2; line-height: 0.5;}
        .inflistElement{background-color: var(--color-sec); color: var(--color-white); border-radius: 10px; padding: 3px 5px; margin: 5px;}
			
		.infSectionImagen{position: relative; width: 100%; height: 450px; margin-top: 30px; background-color: var(--color-prim);}
			.infsecImInf{position: absolute; bottom: 0px; left: 0px; width: 70%; padding: 30px; background-color: var(--color-white); cursor: pointer; transition:0.2s Ease-in-out;}
			.infsecImInf:hover{padding: 50px 30px; background-color: var(--color-sec);}

    .sectionIntContent{width: 65%;}
        .rowInformation{padding: 30px 0px; border-bottom: 1px solid #ddd;}
            .celInformation{font-size: 0.8em; color: var(--color-prim); flex-grow: 1; min-width: 150px;}
                /*variante de boton*/
                .cellButton{cursor: pointer; transition:0.2s Ease-in-out;}
                .cellButton:hover{font-family: bold; letter-spacing: 1px; border-left: 3px solid #777; padding-left: 5px;}
            .celDescription{ flex-grow: 3; width: 90%;}
                .celDescription a{cursor: pointer;}
                /*variante de informes*/
                .celParrafo{font-size: 1.2em; /*text-align: justify;*/}

    /*PHONE*/
    @media only screen and (max-width : 539px){
        .sectionInformation{width: 100%;}
        .sectionIntContent{width: 100%;}
        } 


/*LEY DE TRANSPARENCIA*/
    .secondpage{position: relative; height: 85%; width: 100%; background-color: var(--color-white); overflow: hidden;}
        .sheaderCube{position: absolute; background-color: var(--color-prim); height: 50px; width: 50px; top:0px; left: 0px;}
        .sheadEscudos{position: absolute; left: 13%; top: 50px;}
            .sheadEscudos img:first-child{margin-right: 30px;}

        .sheadTitleMain{padding-left:13%; width: 50%;}
            .shtitleOrigen{font-family: bold; font-size: 0.8em; color: var(--color-prim); padding-bottom: 10px;}
            .shtitleTitle{font-family: light; font-size: 3em;}
            .shtitleDescription{position: relative; margin-top: 30px; width: 60%;}
                .shtitleDescrip{opacity: 0.5; padding-left: 70px;}

        .sheadInfoButtons{position: absolute; bottom: 50px; left: 13%;}
		.sheadInfoButtons ul{list-style: none;}
		.sheadInfoButtons ul li{margin-right: 20px; font-size: 0.8em; font-family: bold; }
		.sheadInfoButtons ul li a{opacity: 0.3; text-decoration: none; color: var(--color-black); cursor: pointer; transition:0.2s Ease-in-out; }
		.sheadInfoButtons ul li a:hover{letter-spacing: 1px; padding: 0px 5px; color: var(--color-prim); opacity: 1;}

        .sheadRighgtBox{position: absolute; right: 0px; top: 0px; height: 100%; width: 40%; background-color: var(--color-prim); }
			.sheadRighgtBox img{height: 100%; width: auto; position: absolute; right: 0px;}

		.sectionImagen{position: relative; width: 100%; height: auto; overflow: hidden;}
		.sectionImagen img{width: 100%; height: auto;}
			.sectionImagenInf{position: absolute; margin-left: 13%; top: 10%; width: 40%;}
				.sImagenTitle{font-family: light; font-size: 3em;}
				.sImagenDetails{font-size: 0.9em; width: 80%; padding: 20px 20% 30px 0px; line-height: 1.5;}
					
    /*TABLET*/
    @media only screen and (max-width : 898px){
        .sheadRighgtBox{display: none;}
        .sheadTitleMain{ width: 80%;}
        .sheadInfoButton{width: 80%;}
        }        

    /*PHONE*/
    @media only screen and (max-width : 539px){
        .sheadEscudos img:last-child{display: none;}
        .shtitleTitle{font-size: 2em;}
        .shtitleDescription{ width: 80%;}
            .shtitleDescrip{padding-left: 60px; font-size: 0.8em; }

            .sImagenTitle{font-family: light; font-size: 1.5em;}
			.sImagenDetails{display:none;}
        }            



/*PIE DE PAGINA */
	.footerPage{position: relative; height: 80%; /*background-color: var(--color-prim);*/ color: var(--color-white); overflow: hidden; text-align: center;}

		.footerName{font-family: light; font-size: 2.7em; width: 80%; line-height: 1.3;}
		.footerDescription{font-size: 0.8em; opacity: 0.5; padding-top: 20px; width: 50%;}
		.footerImg{padding: 20px 0px 50px 0px;}
		.footerSocialMedia{position: absolute; left: 13%; bottom: 50px;}
			.footerSMInf{font-size: 0.7em; writing-mode: vertical-lr; transform: rotate(180deg); margin: 0px 0px 15px 10px; opacity: 0.3;}
			.btoSm{ color: var(--color-white); margin: 5px 0px 5px 0px; opacity: 0.5; font-size: 1.5em; cursor: pointer; transition:0.2s Ease-in-out;}
			.btoSm:hover{ margin: 10px 0px 10px 0px; opacity: 1;}
		.footerInfoWeb{position: absolute; right: 13%; bottom: 50px; text-align: right; opacity: 0.3; font-size: 0.7em;}
			.footerInfoWeb a{color: var(--color-white);}
		.footerSectionMenu{position: absolute; bottom: 0px; background-color:transparent; height: 40px; width: 74%;
							box-shadow: 0px 0px 33px 0px rgba(0,0,0,0.5);}
			.footerButton{color: var(--color-white); margin: 0px 10px; opacity: 0.5; font-family: bold; font-size: 0.8em; cursor: pointer; transition:0.2s Ease-in-out;}
			.footerButton:hover{margin: 0px 20px; opacity: 1;}

    /*PHONE*/
    @media only screen and (max-width : 539px){
        .footerName{font-size: 1.5em; width: 90%;}
		.footerDescription{width: 75%;}
        .footerSocialMedia{display: none;}
        }      							

/* ERROR 404 PAGINA NO ENCONTRADA /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.error404{width: 100%; height: 100%; background: var(--color-prim); color: var(--color-white); }
    .err404_Icon{font-size: 7em; color: var(--color-sec); animation-name: err404_icon; animation-duration: 2s; animation-iteration-count: infinite;}    
    @keyframes err404_icon {
        0%   {transform: scale(1); color: var(--color-sec);}
        50% {transform: scale(1.2); color: var(--color-white);}
        100% {transform: scale(1); color: var(--color-sec);}
        }
    .err404_Err{font-size: 10em; font-family: bold; line-height: 1; }
    .err404_Details{opacity: 0.6; font-size: 0.9em; padding-bottom: 5px; color: var(--color-white);}
        #err404_infoURL{opacity: 1; font-family: bold; color: var(--color-sec);}
        .err404_Details a{text-decoration: none; color: var(--color-white); font-family: bold;}
    .err404_img{ padding-top: 30px; color: var(--color-white); font-family: bold;}
    
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/