/*=============================================
	FUENTES
=============================================*/

@font-face {
	font-family: 'montserrat-bold';
	src: url('../fonts/Montserrat-Bold.ttf');
}

@font-face {
	font-family: 'montserrat-Medium';
	src: url('../fonts/Montserrat-Medium.ttf');
}

@font-face {
	font-family: 'montserrat-Regular';
	src: url('../fonts/Montserrat-Regular.ttf');
}

@font-face {
	font-family: 'montserrat-Thin';
	src: url('../fonts/Montserrat-Thin.ttf');
}
@font-face {
	font-family: 'SansSerifFLF-Demibold';
	src: url('../fonts/SansSerifFLF-Demibold.otf');
}
@font-face {
	font-family: 'SansSerifFLF';
	src: url('../fonts/SansSerifFLF.otf');
}

.header-personalizado{
	margin: 0px 10.4140%;
}
/*=============================================
	FUENTES
=============================================*/


.body_new{
    display: none;
}


/* Redimensionar las imagenes */
.resized{
	width: 100%;
	margin: auto;
}
.font_bold{
	font-family: 'SansSerifFLF-Demibold';
}

a{
	cursor: pointer;
}

.resized img{
	width: 100%;
}
/* Conetenedor de la imagen principal para la página */
.ctn-red, .contenedor-general{
    width: 100%;
	position: absolute;
    background-color: rgba(244, 237, 239, 0.9);
	/* Vamos a mirar como solucionar los espacios */
	margin-top: -83px;
    padding-top: 83px;
    height: 100vh;
}
/*=============================================
	CONTENEDOR DER
=============================================*/
.contenedor-informacion{
	width: 44.064708%;
	height: 100vh;
	/* position: relative;
	float: right; */
	position: fixed;
	right:0%;
	margin-top: -80px;
	z-index: 4;
	transform: translateY(-100vh);
	/* transform: translate(44.064708%); */
	/* visibility: collapse; */
	transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.contenedor-informacion ul {
	/* margin-top: 100px;
	margin-right: 14%; */
	margin-top: 14vh;
    margin-right: 7vh;
}

.contenedor-informacion-large{
	width: 44.064708%;
	height: 100vh;
	position: relative;
	margin-top: -80px;
	z-index: 4;
	float: right;
	transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.caja-texto{
	width: 100%;
	color: white;
	height: 100px;
	overflow-y: scroll;	
}
.titulo-texto, .section-name{
	text-align: right;
	color: white;
}
.section-name{
	/* padding-right: 75px; */
	/* font-size: 13px; */
	padding-right: 14%;
	font-size: 1.5vh;
	letter-spacing: 3px;
}
.contenedor-texto{
	/* padding: 0px 100px 10px 40px; */
	padding: 0px 16vh 10px 10vh;
}
.contenedor-texto{
	font-size: 2vh;
}
.titulo-texto{
	font-size: 6vh;
}
.sub-menu a{
	color: white;
	text-decoration: none;
}
.sub-menu a h2{
	text-align: center;
	/* font-size: 15px; */
	font-size: 2.3vh;
	color: white;
}

hr {
	color: white;
}


/*=============================================
	ESTILOS PERSONALIZADOS
=============================================*/
.cnt-menu{
	background-color: rgba(244, 237, 239, 0.9);
}

.cnt-menu h1{
	font-size: 3.3vh;
    text-align: end;
    margin-top: 35px;
    margin-right: 45px;
	text-decoration: none;
}

.cnt-menu ul li{
	list-style: none;
}

/*=============================================
	SECTOR PUBLICO
=============================================*/
.cnt-publico{
	background-color: rgba(86, 62,104, 1);
}
#section-name{
	position: relative;
	z-index: 5;
	margin-top: -20px;
}

/*=============================================
	COLLAPSE MENU
=============================================*/

.m-fadeOut {
	/* visibility: hidden; */
	transform: translateY(-100vh);
	/* transition: transform 0s ease-in 300ms, opacity 300ms; */
	transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.m-fadeIn-menu {	
	visibility: visible;
	transform: translateY(0px);
	transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.contenedor-botones-hidde{
	display: none;
}

.m-fadeIn-cont {
	display: block;
}

.m-fadeIn {
	/* visibility: visible; */
	transform: translateY(-100vh);
	transition: width 2s, height 2s, background-color 2s, transform 2s;
}

/*=============================================
	SCROLL MENU
=============================================*/


.caja-texto::-webkit-scrollbar{
    
    width: 8px;
    border-radius: 20px;
    border-style: solid;
    border-width: 1px;
    border-color: white;

}
.caja_texto::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #CCCCCC;
}
.caja-texto::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: white;
}


/*=============================================
	FONTS DEL TEXTO
=============================================*/
.sub-menu a h2, .titulo-texto,.caja-texto {
	font-family: 'montserrat-Thin';
}



.cnt-menu a{
	text-decoration: none;
}
.cnt-menu a h1{
	color: #563E68;
	font-family: 'SansSerifFLF';
}


.btn-multicolor{
	width: 120px;
	margin-right: 11vh;
    margin-top: 4px;
}

/*=============================================
	TAMAÑO BOTONES
=============================================*/

/* .btn-circular{
	width: 50px;
} */

/*=============================================
	Tamaño de la imagen de cada sección
=============================================*/
.img-section{
	width: 90%;
}

/*=============================================
	Responsive menu vertical
=============================================*/

@media screen and (max-height: 2000px) {
	.contenedor-informacion-large{
		height: 100vh;
	}
	/* .caja-texto{
		height: 250px;
	} */
}

/*=============================================
	RESPONSIVE MOVILE
=============================================*/

@media screen and (max-width: 425px){
	.header{
		z-index: 8;
	}

	.contenedor-general{
		/* display: none; */
		width: 100%;
	}

	#pot img{
		width: 1400px;
	}
	#pot {
		/* bottom: 15%; */
		position: absolute;
		-webkit-animation: linear infinite;
		-webkit-animation-name: run;
		-webkit-animation-duration: 18s;
	}
	@-webkit-keyframes run {
		0% {
			right: 0px;
		}
		50% { 
			right: calc(100% - 100px); 
			}
		100% {
			right: 600px;
			display: none;       
		}
	}

	.contenedor-informacion{
		/* display: none; */
		text-align: center;
		width: 100%;
		height: 100vh;
		/* position: fixed; */
		/* transform: translateY(-100vh); */
		right: 0%;
		z-index: 8;
		/* transition: width 2s, height 2s, background-color 2s, transform 2s; */
	}

	.hidden_btn_menu {
		opacity: 100%;
	}

	.contenedor-informacion-large{
		width: 100%;
		height: 100vh;
	}

	.img-contenedor{
		margin-top: 50px;
	}
	.contenedor-texto{
		padding: 0px 5vh 10px 5vh;
	}
	.section-name{
		padding-right: 5%;
	}

	.titulo-texto {
        font-size: 4vh;
    } 

	.sub-menu a h2 {
        font-size: 1.8vh;
    }

	.caja-texto{
		padding-right: 40px;
	}

}