@font-face {
  font-family: 'main-oyefilms';
  src: url('../fonts/ostrich-regular.ttf');
}

/*ANIMACIONES CSS*/
@keyframes menu-animation {
  0%{
    color: #000000;
    background-color: #FFFFFF;
  }
  100%{
    color: #FFFFFF;
    background-color: #71C5BA;
  }
}

*{
  font-family: 'main-oyefilms';
  color: #727373;
}

body{
  margin: 0px;
  text-align: center;
  font-size: 2.5vw;
}

body p{
  padding: 0px 50px 0px 50px;
}

/*DISEÑO DEL HEADER DE LA PÁGINA*/
header{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 150px;
  position: fixed;
  overflow: hidden;
}

.logo{
  width: 50%;
  margin-top: -1%;
}

.logo img{
  width: 20%;
  margin-left: -80%;

}

.language{
  width: 50%;
}

.language a{
  color: white;
  text-decoration: none;
  background-color: #77C5B9;
  padding: 10px 10px 5px 10px;
  border-radius: 30px 30px 0px 0px;
  opacity: 0.5;
}

.language a:hover{
  opacity: 1;
  transition: all 300ms ;
}

.language div{
  display: none;
  width: 20%;
  padding: 10px 0px 10px 0px;
  margin-left: 86%;
  margin-top: 50px;
  -webkit-transform: rotate(270deg);

}

/* DISEÑO DEL CUERPO DE LA PÁGINA */
#content{
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}

#content > #video-principal {
  display: flex;
  flex-direction: column;
}

#content > #video-principal > .text{
  width: 100%;
  background: black;
  padding: 0px;
  margin: 2% 0px;
}

#video-principal > video{
  background-color: black;
  width: 100%;
}

#content > .image-section{
  width: 100%;
}

#content > .image-section > img{
  width: 100%;
}

#content > .image-section p{
  padding: 30px 0px;
}

#portafolio > img:hover{
  content: url("../images/portafolio_seleccion.png");
}

#portafolioImg{
    width: 50%;
}


#clientes{
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 6vw;
  margin-bottom: 30px;
  margin-top: 20px;
}

#clientes > img{
  align-self: center;
  /*margin-top: -90px !important;*/
  width: 90% !important;
}

.green-text{
  color: rgb(113,197,186);
}

/*DISEÑO DEL PIE DE LA PÁGINA*/
footer{
  font-size: 2vw;
  display: flex;
  flex-direction: row;
  text-align: justify;
  padding: 0%;
  background: #3F3F3F;
  color: #F3F3F3;
  text-transform: uppercase;
}

footer > p{
  width: 100%;
  color: #FFFFFF;
  text-align: center;
  align-self: center;
}

footer > p > a{
  text-decoration: none;
  color: rgb(113,197,186);
}

#social a > img{
  margin-top: 5px;
  width: 10%;
}

#vimeo:hover{
  content: url("../images/Social_Vimeo.png")
}

#facebook:hover{
  content: url("../images/Social_Facebook.png")
}

#youtube:hover{
  content: url("../images/Social_Youtube.png")
}


/*DISEÑO PARA MOVILES Y TABLETAS*/
@media (max-width:414px) {

  /*DISEÑO DEL HEADER DE LA PÁGINA*/
  header a{
    margin-left: 0px;
  }

  header img{
    width: 25%;
  }

  /* DISEÑO DEL CUERPO DE LA PÁGINA */
  #clientes{
    margin-bottom: 0px;
    margin-top: 10px !important;
  }

  #clientes > img{
    margin-top: 50px !important;
    width: 100% !important;
  }

  /*DISEÑO DEL PIE DE LA PÁGINA*/
  footer{
    font-size: 5vw;
    flex-direction: column;
  }

  footer > p > a > img{
    width: 10%;
  }

}