/* Hoja de estilos base */
/* ESTILOS ESTANDAR */

html {
/* Paul Irish - rem-pix conversion */
	font-size: 62.5%; /*Código para eficientar el uso de rems  */
	box-sizing: border-box; /* Paul Irish                      */
	scroll-snap-type: y mandatory; /* Scroll Snap Control */
}

*, *:before, *:after {
	box-sizing: inherit; /* Paul Irish                         */
}

/* Scroll-Snap properties */
.cls-scroll-snap {
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* Propiedades Generales CSS */
body {
	font-size: 16px; /* Eficientar uso de rems - Paul Irish */
	font-family: 'Source Sans Pro', sans-serif;
	color: #ffffff;
	background-color: #000000;
}

a {
	text-decoration: none;
}

h1 {
	font-size: 4rem;
	font-family: 'Orbitron', sans-serif;
	font-weight: 400;
	color: #ffB612;
}

h2 {
	font-size: 2rem;
	font-family: 'IBM Plex Sans', sans-serif;
	color: #daa520;
	font-weight:400;
    margin: 0;
}

h3 {
	font-size: 1.2rem;
}

h1, h2, h3 {
	text-align: center;
}

p {
	font-family: 'Roboto', sans-serif;
	color: #ffffff;
}
/*  */
.cls-container {
    max-width: 100%;
    margin: 0 auto; /** Lo mismo que el anterior **/
}

.cls-video {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    border: solid;
	border-width: .1rem;
	border-color:#009DC4;
}

.cls-vid-content {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    background-size: cover;
    color: #f1f1f1;
    width: 100vw;
    height: 100vh;
    /*padding: 20px;*/
    text-align: center;
}

.cls-vid-content h1{
    width: 25%;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.2rem;
    font-size: 4rem;
    background: rgba(0, 0, 0, 0.3);
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    background-blend-mode: darken;
    /*text-transform: uppercase;*/
}

.cls-vid-content h2 {
    width: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    color:red;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 2rem;
    background-blend-mode: darken;
}

.cls-vid-content p {
    font-size: 1.7rem;
    font-weight: 300;
	font-style: italic;
	letter-spacing: 1rem;
    margin: 0;
    margin-top: 1rem;
    padding-top: .5rem;
    padding-bottom: 1.5rem;
    color: #daa520;
}


.cls-vid-content h4 {
    display: inline-block;
    width: 40rem;
    font-family: 'Roboto', sans-serif;
    font-weight:100;
    font-size: 2rem;
    color: var(--amarillo);
    margin-bottom: 1rem;
}


/*.cls-p-tools {
    font-size: 1rem;
    margin-top: 2rem;
    font-weight: 100;
    font-style: normal;
}*/

.cls-logotipo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    height: 10rem;
	width: 10rem;
    border-radius: 2rem;
    transition: background-color 1s;
}

.cls-logotipo:hover {
    background-color: black;
}

.cls-btn-aboutus {
    display: inline-block;
    background-color: #000000;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    margin-left: .5rem;
    margin-right: .5rem;
    margin-top: 2.5rem;
    padding: .5rem;
    font-weight:500;
	border-width: .1rem;
	border-color: #ffffff;
	padding: 1.5rem;
    width: 15rem;
}

.cls-btn-aboutus:hover {
    cursor: pointer;
    background-color:#4a4e5a;;
    color: #ffd700;
    font-weight:300;
    font-size: 1.7rem;
    border-width: .1rem;
	border-color:#ffffff;
}

/** FONTS AWESOMEE - Redes Sociales **/

.cls-social-ntw {
    margin-top: 2rem;
}

.fa {
    font-size: 2.5rem;
    width: 4rem;
    text-align: center;
    text-decoration: none;
    margin-top: 3.5rem;
  }
  .fa:hover {
    color: #ffd700;
  }
  .fa-facebook {
    color: #ffffff;
  }
  .fa-twitter {
    color: #ffffff;
  }
  
  .fa-linkedin {
    color: #ffffff;
  }  
  .fa-instagram {
    color: #ffffff;
  }
  .fa-github {
    color: #ffffff;
  }
  /*--------------------------------------------------*/