:root {
	
	--col001hex: #6285E3;
	--col001rgb: 98, 133, 227;
	--col002hex: #889DED;
	--col002rgb: 136, 157, 237;
	--col003hex: #A5B3F4;
	--col003rgb: 165, 179, 244;
	
	--background: #6285E3;/*#f4d8d5;*/
	--backgroundRGB: 98, 133, 227;/*244, 216, 213;*/
	--backgroundOpacity: 0.5;
	--cajaRGB: 255, 204, 204;/*244, 216, 213;*/
	--cajaOpacity: 0.6;
	--rosa: #f0f;
	--azul: #00f;
	--negro: #000;
	--white: #fff;
	--colorNeon: #deff00;
	--colorNeonRGB: 222, 255, 0;
	--text: #fff; 
	--solid: #fff;
	--link: #00f;
	--marker: #f00;
  
}

* {
	
	box-sizing: border-box;
	
}

html {
	
    height: 100%;
    width: 100%;
	
}

body {
	
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: var( --col001hex );
	
}

h1, h2, h3, h4, h5, p, a, button {
	
	font-weight: normal;
	color: var( --text );
	
}

h1, h2, h3, h4, h5 {
	
	font-family: 'Orator Standard', arial, sans-serif;
	
}

h2, h3, h4 {
	
	text-align: left;
	
}

h5 {
	
	margin: 0;
	text-align: left;
	font-size: 37px;
	
}

h1 {
	
	margin: 0;
	text-align: center;
	font-size: 26px;
	
}

h2 {
	
	margin: 0;
	font-size: 22px;
	
}

h3 {
	
	margin: 0;
	line-height: 20px;
	font-size: 18px;
	
}

h4 {
	
	margin: 0;
	font-size: 18px;
	
}

p {
	
	text-align: justify;
	text-justify: inter-character;
	text-decoration: none;
	text-shadow: 1px 1px 1px var( --col001hex );
	
	font-family: 'Roboto Light', arial, sans-serif;
	font-size: 20px;
	
}

a, button {
	
	cursor: pointer;
	
}

button {
	
	width: 100%;
	text-align: center;
	border: 2px solid var( --colorNeon );
	border-radius: 32px;
	background-color: rgba( var( --colorNeonRGB ), 0.75 );
	
}

button  .centro {
	
	width: 75%;
	
}

a:hover, a:active {
	
	color: var( --colorNeon );
	
}

button:hover {
	
	background-color: rgba( var( --colorNeonRGB ), 0.4 );
	
}

/* --- --- --- --- --- --- --- --- --- --- --- --- --- ---  CLASES GENÉRICAS */

.columna {
	
	position: relative;
	width: 100%;
	float: left;
	
}

.texto {
	
	margin: 0;
	
}

.alturaBotones {
	
	height: 70px;
	white-space: nowrap;
	overflow: hidden;
	
}

.renglon {
	
	width: 100%;
	float: left;
	
}

.espacioMitad {
	
	padding-top: 50vh;
	
}

.espacio30 {
	
	padding-top: 33.3vh;
	
}

.espacio15 {
	
	padding-top: 15vh;
	
}

.videoFondo {
	
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	
}

.youtubeCanvas {
	
	position : relative;
	width: 90vw;
	height : 50vw; 
	
}

.descripcionVideo p {
	
	font-size: 18px;
	
}

.noDesktop {
		
	display: block;
	
}

.noMobile {
		
	display: none;
	
}

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- ID */

#threejsFondo {
	
	position: fixed;
	width: 100%;
	height: 100%;
	border: none;
	overflow: hidden;
	z-index: 0;
	
}

#main {
	
	width: 100%;
	transition: 0.4s;
	position: absolute;
	z-index: 101;

}

#cambiarIdioma {
	
	position: fixed;
	margin-top: 20px;
	margin-right: 20px;
	width: 95%;
	z-index: 102;
	
}

#cambiarIdioma h2 {
	
	text-align: right;
	
}

#cabecera {
	
	width: 90%;
	height: 120px;
	margin: 20px;
	transition: 0.4s;
	position: fixed;
	
}

#menuLogo {
	
	width: 35%;
	display: inline-block;
	
}

#menuTabs {
	
	width: 50%;
	margin: 20px;
	display: inline-block;
	
}

#menuTabs h2 {
	
	text-align: right;
	
}

#pagina {
	
	height: 100%;
	margin: 260px 20px;
	transition: 0.4s;
	position: fixed;
	scrollbar-color: rgba( 0, 0, 0, 0 ) rgba( 0, 0, 0, 0 );
	overflow-y: auto;
	
}

#fixedColumn {
	
	position: relative;
	
}

#logoHover {
	
	height: 180px;
	transition: 0.4s;
	
}

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- - fuentes */

@font-face {
    font-family: "Orator Standard";
	src: url("./fonts/OratorStd.ttf");
}

@font-face {
	font-family:"Roboto Light";
	src: url("./fonts/Roboto-Light.ttf");
}

@font-face {
	font-family:"Roboto Medium";
	src: url("./fonts/Roboto-Medium.ttf");
}


/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- responsividad */

@media only screen and (min-width: 600px) {
	
	
	
}

/* iPad Mini */
@media only screen and (min-width: 768px) {
	
	
	
}

/* iPad Pro 1024px */
@media only screen and (min-width: 992px) {
	
	.noDesktop {
		
		display: none;
		
	}

	.noMobile {
		
		display: block;
		
	}
	
	h5 {
		
		font-size: 47px;
		
	}
	
	.columna {
		
		width: 49.9%;
		padding: 0 30px;
		
	}
	
	.youtubeCanvas {
		
		width: 33vw;
		height : 18vw; 
		
	}
	
	/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- ID */
	
	#fixedColumn {
		
		position: fixed;
		
	}
	
	.renglon {
		
		margin: 0;
		
	}
	
	#main {
		
		padding-left: 30px;
		
	}
	
	#cabecera {
		
		width: 90%;
		height: 180px;
		margin: 60px;
		transition: 0.4s;
		position: fixed;
		z-index: 99;
		
	}
	
	#menuLogo {
		
		width: auto;
		
	}

	#menuTabs {
		
		width: auto;
		
	}
	
	#menuTabs h2 {
		
		text-align: left;
		
	}
	
	#pagina {
		
		margin: 260px 193px;
		
	}
	
}

/* Nest Hub Max 1280px */
@media only screen and (min-width: 1200px) {
	
	
	
}

@media only screen and (min-width: 1600px) {
	

	
} 

@media only screen and (max-height: 600px) {
	
	
	
}