/*css para video inicio y contacto*/
/*inicio valores comunes*/

/* // === Variables ===== */

/* 
----
EFECTO SPLIT EN EL TEXTO "MENU" (Dentro del div glitch)
----
 */
 body {
  background-color: #070b12;
 }

.glitch .Menu-list-item::before {
	background: black;
}

.glitch .Mask {
	color: black;
}

.glitch .Menu-list-item:hover .Mask,
.glitch .Menu-list-item:active .Mask {
  color: black;
  
}

.glitch .Menu-list-item {
  width: 50vw;
}

.glitch .Menu-list {
  position: relative;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  align-items: unset;
  font-size: 12vw;
}

/* Tamaño letra header con efecto para pagina de metodologia */

.titleMet .Menu-list {
  font-size: 8vw;
}

.Menu-list {
  font-size: 10vw;
  text-transform: uppercase;
  text-align: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
}


/* // === Menu item ===== */
.Menu-list-item {
  position: relative;
  color: transparent;
  cursor: pointer;
  /* // === Split Line ===== */ }
  .Menu-list-item::before {
    content: '';
    display: block;
    position: absolute;
    top: 49%;
    left: -10%;
    right: -10%;
    height: 4px;
    border-radius: 4px;
    margin-top: -2px;
    background: white;
    transform: scale(0);
    transition: transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
    z-index: 1; }

/* // === Top/bottom mask ===== */
.Mask {
  display: block;
  position: absolute;
  overflow: hidden;
  color: white;
  top: 0;
  height: 49%;
  transition: all 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98); }
  .Mask span {
    display: block; }

/* // === Bottom mask specific ===== */
.Mask + .Mask {
  top: 48.9%;
  height: 51.1%; }
  .Mask + .Mask span {
    transform: translateY(-49%); }

/* // === Where the fun stuff happens ===== */
.Menu-list-item:hover .Mask,
.Menu-list-item:active .Mask {
  color: #FFF;
  transform: skewX(12deg) translateX(5px); }

.Menu-list-item:hover .Mask + .Mask,
.Menu-list-item:active .Mask + .Mask {
  transform: skewX(12deg) translateX(-5px); }

.Menu-list-item:hover::before,
.Menu-list-item:active::before {
  transform: scale(1); 
}



.img {
  position: absolute;
  left: 0;
  height: auto;
  top: 0vh;
  background: #000000;
  width: 100%
}


.section {
  position: relative;
}

.imgfondo {
  display: none;
  width: 100%;
  height: 100%;
  background-repeat:no-repeat;  
  opacity:0;
  transition: opacity 1s;
}

.buttonentrar {
  display: none;
  position: absolute;
  top: 81%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.entrarBtn {
  font-size: 22px;
  font-family: 'Roboto', sans-serif;
  background-color: transparent;
  color: white;
  border: 2px solid transparent;
  background-size: cover;
}

#hideb {
  opacity:0;
  transition: opacity 3s;
}

/*video valores minimos*/
@media only screen and (max-width:1096px) {
  .imgfondo {
    width: 100vw;
    height: auto;
  }
}

.header {
  background-color: #252525;
  position: relative;
  height: 440px;
}

.enviarBtn {
  font-family: 'Roboto', sans-serif;
  color: white;
  background-color: black;
  border: 8px solid transparent;
}

/*valores comunes*/
@media only screen and (min-width:768px) {
  
  .sectionContacto {
    position: relative;
    height: auto;
    display: grid;      
    grid-template-columns: auto;
    grid-template-rows: 15vw auto;
    
  }

  .icons {
    width: 4vw;
    height: auto;
  }

  .title {
    position: relative;
    color: white;
    font-family: 'Michroma', sans-serif;
    font-size: 10vw;
    top: 50%;
    transform: translate(0%, -50%);
  }

  .sectionSubContanco {
    /*grid 2*/
    grid-column: 1/-1;    
    text-align: center;
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 3.7vw;
    padding-top: 5vw;        
  }


  .grid2 {
    display: grid;
    grid-row: 2/3;
    grid-template-columns: 5fr 5fr 2fr;
    grid-template-rows: auto;
  }

  .infoContacto {
    /*grid 3*/
    display: grid;
    grid-template-columns: 5fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;   
    font-family: 'Roboto', sans-serif;
    font-size: 1.6vw;    
    padding-bottom: 4vw;    
    padding-left: 5vw;
  }

  .phone, .adress, .dEmail {
    justify-self: end;
  }

  .iconMarcador {
    border-left: 1px solid black;
    height: 4vw;    
    margin-bottom: 3.6vw;    
    margin-left: 1vw;
  }
  .iconPhone {
    border-left: 1px solid black;
    height: 4vw;    
    margin-bottom: 3.6vw;    
    margin-left: 1vw;
  }
    .iconMail {
    border-left: 1px solid black;
    height: 4vw;    
  }

  .inputCorto {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid black;
    width: 12vw;
    outline: none;
    font-size: 20px;
  }

  .inputMedio {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid black;
    width: 25.5vw;
    outline: none;
    font-size: 20px; 
  }

  .inputLargo {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid black;
    width: 40vw;
    outline: none;
    font-size: 20px;
  }

  .contactoForm {
    /*grid 4*/
    display: grid;
    grid-template-columns: 27vw 13vw;
    grid-template-rows: repeat( 9, 40px);
    font-family: 'Roboto', sans-serif;
    font-size: 1.3vw;
    margin-bottom: 10vw;
    margin-left: 5vw;
  }

  .mensajeContacto {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3vw;      
  }

  .tMess {
    position: relative;    
    width: 100%;
    text-align: center;
    font-size: 2vw;    
  }

  .redes {
    /*grid 5*/
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat( 6, 1fr);
    margin-left: 2vw;
    padding-bottom: 15vw;
  }

  #name {
    grid-column: 1/2;
    grid-row: 2/3;
    height: auto;
    margin-bottom: 20px;
  }
  #email {
    grid-column: 1/3;
    grid-row: 4/5;
    height: auto;
    margin-bottom: 20px;
  }
  #telefono {
    grid-column: 2/3;
    grid-row: 2/3;
    height: auto;
    margin-bottom: 20px;
  }
  #asunto {
    grid-column: 1/3;
    grid-row: 6/7;
    height: auto;
    margin-bottom: 20px;
  }
  #mensaje {
    grid-column: 1/3;
    grid-row: 8/9; 
    height: auto;
    margin-bottom: 20px;
  }

  #telefonol {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  #namel {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  #asuntol {
    grid-column: 1/3;
    grid-row: 5/6;
  } 
  #mensajel {
    grid-column: 1/3;
    grid-row: 7/8;
  }
  #emaill {
    grid-column: 1/3;
    grid-row: 3/4;
  }

  #botonFormu {
    grid-column: 1/2;
    grid-row: 9/10;
    width: 30%;
  }

}

@media only screen and (max-width:767px) {

  .sectionContacto {
    position: relative;
    height: auto;
    display: grid;      
    grid-template-columns: auto;
    grid-template-rows: 35vw auto;
    
  }

  .icons {
    width: 7vw;
    height: auto;
  }

  .title {
    position: relative;
    color: white;
    font-family: 'Michroma', sans-serif;
    font-size: 10vw;
    top: 50%;
    transform: translate(0%, -50%);
  }

  .sectionSubContanco {
    /*grid 2*/
    grid-column: 1/-1;
    grid-row: 1/2;    
    text-align: center;
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 7vw;
    padding-top: 14vw;        
  }


  .grid2 {
    display: grid;
    grid-row: 2/3;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
  }

  .infoContacto {
    /*grid 3*/
    display: grid;
    grid-template-columns: 3fr 1fr 3fr 1fr;
    grid-template-rows: 1fr 1fr;
    font-family: 'Roboto', sans-serif;
    font-size: 4vw; 
    padding-right: 2vw;
    padding-left: 2vw;
    margin-bottom: 15vw;    
  }

  .phone{
    border-right: 1px solid black;
    padding-right: 1vw;
    grid-row: 1/2;
    grid-column: 1/2;
    padding-bottom: 2vw;
    justify-self: end;
  }
  .adress {
    justify-self: end;
    border-right: 1px solid black;
    padding-right: 1vw;
    padding-bottom: 2vw;
  }
  .dEmail {
    padding-right: 1vw;
    grid-column: 1/4;
    justify-self: center;
    margin-top: 2vw;
  }

  .iconMarcador {
    
    height: 4vw;    
    margin-bottom: 3.6vw;    
    margin-left: 1vw;    
  }
  .iconPhone {
    
    height: 4vw;    
    margin-bottom: 3.6vw;    
    margin-left: 1vw;
  }
    .iconMail {
    
    height: 6vw;    
    border-left: 1px solid black;     
    margin-top: 2vw;  
  }

  .inputCorto {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid black;
    width: 24vw;
    outline: none;
    font-size: 20px;
  }

  .inputMedio {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid black;
    width: 51vw;
    outline: none;
    font-size: 20px; 
  }

  .inputLargo {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid black;
    width: 80vw;
    outline: none;
    font-size: 20px;
  }

  .contactoForm {
    /*grid 4*/
    display: grid;
    grid-template-columns: 56vw 25vw;
    grid-template-rows: repeat( 9, 40px);
    font-family: 'Roboto', sans-serif;
    font-size: 4vw;
    margin-bottom: 10vw;
    margin-left: 8vw;
  }

  .mensajeContacto {
    position: absolute;
    font-family: 'Roboto', sans-serif;
    font-size: 1.3vw;      
  }

  .tMess {
    position: relative;    
    width: 100%;
    text-align: center;
    font-size: 2vw;    
  }

  .redes {
    /*grid 5*/
    display: grid;
    grid-template-columns: repeat( 3, 1fr);
    grid-template-rows: auto auto;
    margin-left: 2vw;
    padding-bottom: 10vw;
    justify-self: center;
  }

  #name {
    grid-column: 1/2;
    grid-row: 2/3;
    height: auto;
    margin-bottom: 20px;
  }
  #email {
    grid-column: 1/3;
    grid-row: 4/5;
    height: auto;
    margin-bottom: 20px;
  }
  #telefono {
    grid-column: 2/3;
    grid-row: 2/3;
    height: auto;
    margin-bottom: 20px;
  }
  #asunto {
    grid-column: 1/3;
    grid-row: 6/7;
    height: auto;
    margin-bottom: 20px;
  }
  #mensaje {
    grid-column: 1/3;
    grid-row: 8/9; 
    height: auto;
    margin-bottom: 20px;
  }

  #telefonol {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  #namel {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  #asuntol {
    grid-column: 1/3;
    grid-row: 5/6;
  } 
  #mensajel {
    grid-column: 1/3;
    grid-row: 7/8;
  }
  #emaill {
    grid-column: 1/3;
    grid-row: 3/4;
  }

  #botonFormu {
    grid-column: 1/2;
    grid-row: 9/10;
    width: 30%;
    justify-self: end;
    font-size: 3vw;
  }

  .aNoMarg {
    margin: 0;
  }

  #linkedin, #facebook, #instagram, #whatsapp, #vimeo, #youtube {
    margin-right: 6vw;
    margin-left: 6vw;
    margin-bottom: 2vw;
    margin-top: 2vw;
    height: 10vw;
    width: auto;
  }
}

/*valores minimos*/
@media only screen and (max-device-width:767px) {

  .sectionContacto {
    position: relative;
    height: auto;
    display: grid;      
    grid-template-columns: auto;
    grid-template-rows: 35vw auto;
    
  }

  .img{
    top:15vh;
  }

  .entrarBtn{
    font-size: 45px;
  }

  .icons {
    width: 7vw;
    height: auto;
  }

  .title {
    position: relative;
    color: white;
    font-family: 'Michroma', sans-serif;
    font-size: 10vw;
    top: 50%;
    transform: translate(0%, -50%);
  }

  .sectionSubContanco {
    /*grid 2*/
    grid-column: 1/-1;
    grid-row: 1/2;    
    text-align: center;
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 7vw;
    padding-top: 14vw;        
  }


  .grid2 {
    display: grid;
    grid-row: 2/3;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
  }

  .infoContacto {
    /*grid 3*/
    display: grid;
    grid-template-columns: 3fr 1fr 3fr 1fr;
    grid-template-rows: 1fr 1fr;
    font-family: 'Roboto', sans-serif;
    font-size: 4vw; 
    padding-right: 2vw;
    padding-left: 2vw;
       
  }

  .phone{
    border-right: 1px solid black;
    padding-right: 1vw;
    grid-row: 1/2;
    grid-column: 1/2;
    padding-bottom: 2vw;
    justify-self: end;
    font-size: 2vw;
  }
  .adress {

    justify-self: end;
    border-right: 1px solid black;
    padding-right: 1vw;
    padding-bottom: 2vw;
    font-size: 2vw;
  }
  .dEmail {
    grid-column: 1/4;
    padding-left: 2vw;
    justify-self: center;
    margin-top: 2vw;
    font-size: 2vw;
  }

  .iconMarcador {
    border-left: 0px;
    height: 4vw;    
    margin-bottom: 3.6vw;    
    margin-left: 1vw;    
  }
  .iconPhone {
    border-left: 0px;
    height: 4vw;   
    margin-bottom: 3.6vw;    
    margin-left: 1vw;
  }
    .iconMail {
    height: 100%;
    margin-left: 0;
    padding-left: 10px;
    margin-top: 0;
    border-left: 1px solid black;
  }

  .inputCorto {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid black;
    width: 80vw;
    outline: none;
    font-size: 50px;
  }

  .inputMedio {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid black;
    width: 80vw;
    outline: none;
    font-size: 50px; 
  }

  .inputLargo {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid black;
    width: 80vw;
    outline: none;
    font-size: 50px;
  }

  .contactoForm {
    /*grid 4*/
    display: grid;
    grid-template-columns: 56vw 25vw;
    grid-template-rows: repeat( 11, 105px);
    font-family: 'Roboto', sans-serif;
    font-size: 60px;
    margin-bottom: 10vw;
    margin-left: 8vw;
  }
  #contactoEnviado {
    width: 100%;
  }

  .mensajeContacto {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3vw;  
    padding-right: 33px;
    padding-left: 33px    
  }

  .tMess {
    position: relative;    
    width: 100%;
    text-align: center;
    font-size: 2vh;    
  }

  .redes {
    /*grid 5*/
    display: grid;
    grid-template-columns: repeat( 3, 1fr);
    grid-template-rows: auto auto;
    margin-left: 2vw;
    padding-bottom: 10vw;
    justify-self: center;
  }

  #name {
    grid-column: 1/2;
    grid-row: 2/3;
    height: 70px;
    /* margin-bottom: 20px; */
    border: solid;
    border-radius: 26px;
    padding-left: 25px;
  }
  #email {
    grid-column: 1/3;
    grid-row: 6/7;
    height: 70px;
    /* margin-bottom: 20px; */
    border: solid;
    border-radius: 26px;
    padding-left: 25px;
  }
  #telefono {
    grid-column: 1/3;
    grid-row: 4/5;
    height: 70px;
    /* margin-bottom: 20px; */
    border: solid;
    border-radius: 26px;
    padding-left: 25px;
  }
  #asunto {
    grid-column: 1/3;
    grid-row: 8/9;
    height: 70px;
    /* margin-bottom: 20px; */
    border: solid;
    border-radius: 26px;
    padding-left: 25px;
  }
  #mensaje {
    grid-column: 1/3;
    grid-row: 10/11; 
    height: 70px;
    /* margin-bottom: 20px; */
    border: solid;
    border-radius: 26px;
    padding-left: 25px;
  }

  #telefonol {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  #namel {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  #asuntol {
    grid-column: 1/3;
    grid-row: 7/8;
  } 
  #mensajel {
    grid-column: 1/3;
    grid-row: 9/10;
  }
  #emaill {
    grid-column: 1/3;
    grid-row: 5/6;
  }

  #botonFormu {
    grid-column: 1/2;
    grid-row: 11/12;
    width: 50%;
    font-size: 50px;
    justify-self: end;
    margin-top: 15px;
  }

  #linkedin, #facebook, #instagram, #whatsapp, #vimeo, #youtube {
    margin-right: 6vw;
    margin-left: 6vw;
    margin-bottom: 3vw;
    margin-top: 3vw;
    height: 10vw;
    width: auto;
  }
  
	.copyright>p {
		margin-bottom: 0;
		color: rgb(255, 251, 251);
		text-align: center;
		font-family: Bahnschrift;
		font-size: 25px;
		}
		.credits {
		  font-size: 12px;
		}

}