/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

  @font-face {
    font-family: "newfont";
    src:url("font.woff");
  }
  @font-face {
    font-family: "Brickfont";
    src:url("Brick.woff");
  }
  @font-face {
    font-family: "Piratefont";
    src: url("Pirate_Scroll.otf");
  }
  body {
  height: 100vh;
  padding: 0;
  margin: 0px;
}
body {
  min-height: 100vh;
  padding: 0;
  transition: background-color 0.5s ease-in-out;
}



@keyframes slideInFromUp {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromDown {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.scrollscreen{
    width:100%; 
    height:100%; 
    overflow-x: scroll; 
    overflow-y: hidden;
    background-color: inherit;
  }

  .scrollscreenmain{
    width:100%; 
    height:100%; 
    background-color: inherit;
  }

.logo{
  width:150px;
  height:82px;
  transition: all 0.4s ease-in-out;
}

.logomain {
  height:85px;
  transition: all 0.4s ease-in-out;
}

.videotrailer {
  width:100%;
  height:315px;
}
.logo:hover{
 scale:1.07; 
}

.logomain:hover{
  scale:1.15; 
 }

.contac{
 position:relative; 
}

.contac:hover{
 cursor:pointer;
}

.contac::after{
    content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0px;
  left: 0;
  background-color: black;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.contac:hover::after{
  transform: scaleX(1);
  transform-origin: bottom left;
}

.teaser-card-image {
   animation: 1s ease-out 0s 1 slideInFromRight;
  margin: 150px auto auto auto;
  display: block;
  width: 9.5%;
  height: 70%;
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
  transform-origin: center center;
  transition: all 0.4s ease-in-out;
  text-decoration: none;
  color: black;
}

.teaser-card-imagemain {
  animation: 1s ease-out 0s 1 slideInFromRight;
 display: block;
 width: 100%;
 height: 100%;
 margin-left: -10.1%;
 overflow: hidden;
 transform-origin: center center;
 transition: all 0.4s ease-in-out;
 text-decoration: none;
 color: black;
 clip-path: polygon(25% 0, 100% 0, 75% 100%, 0% 100%);
 background-position: top;
}

.teaser-card-image-firstmain {
 animation: 1s ease-out 0s 1 slideInFromRight;
 display: block;
 width: 100%;
 height: 100%;
 overflow: hidden;
 transform-origin: center center;
 transition: all 0.4s ease-in-out;
 text-decoration: none;
 color: black;
 clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
 background-position-x: -50px;
 background-position: top;
}

.teaser-card-image-lastmain {
  animation: 1s ease-out 0s 1 slideInFromRight;
  margin-left: -10.1%;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-origin: center center;
  transition: all 0.4s ease-in-out;
  text-decoration: none;
  color: black;
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
  background-position: top;
  text-align-last: right;
 }

.teaser-card-image:hover {
  background-size: 150px;
}
.equipo{
  font-family:Brickfont;
   font-size: 4vh;
   padding-top: 5vh;
   margin: auto;
   text-align: center;
}

 .icon-worker{
   list-style: none;
   padding-top: 30px;
   position: relative;
   align-self: center;
   overflow: hidden;
   display:flex;
    margin: auto;
      width: 440px;
 }

 .icon-worker li{
   padding-right: 70px;
 }

#sub {
  list-style-image: url('assets/arrow.png');
  margin: auto;
      width: 100px;

 }


img{
  border-radius: 16px;
}
li{
  font-family: Brickfont;
}
.cards {
  width: 450vh;
  display: flex;
  height: 100%;
}

.cardsmain {
  width: 100%;
  display: flex;
  height: 100%;
}

.DescriptionText{
  animation: 1s ease-out 0s 1 slideInFromLeft;
  margin-left: 50px;
  display: block;
  width: 80vh;
  max-height: 90%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
  transform-origin: center center;
  transition: all 0.4s ease-in-out;
  text-decoration: none;
  color: black;
}

.DescriptionText2{
  margin-left: 50px;
  display: block;
  width: 168vh;
  max-height: 90%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
  transform-origin: center center;
  transition: all 0.4s ease-in-out;
  text-decoration: none;
  color: black;
}

.Subtitle{
  font-size:2.2vh;
  font-family: newfont;
  width:60vh;
  margin-left: 10px;
}

.Announce{
  width: 60vh;
  font-size: 4.3vh;
  font-family: newfont;
  text-align: center;
  margin-top: 100px;
}
.Announce2{
  font-size: 4.3vh;
  font-family: newfont;
  text-align: center;
  margin-top: 100px;
}
.navigationmenu{
    animation: 1s ease-out 0s 1 slideInFromUp;
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: 20px;
  position: fixed;
  z-index: 10;
}

.navigationmenumain{
  animation: 1s ease-out 0s 1 slideInFromDown;
list-style: none;
display: flex;
align-items: center;
position: fixed;
z-index: 10;
margin: auto;
border-top-left-radius: 15px;
bottom: 0;
right: 0;
background: rgb(255, 255, 255);
}

.navigationmenumain li{
  display: inline-block;
  position: relative;
}

.navigationmenu li{
  margin-top: -15px;
  margin-right: 50px;
  font-family: newfont;
  font-size: 23px;
  display: inline-block;
  position: relative;
}
.navigationmenu li a{
    text-decoration: none;
    color: black;
    overflow: hidden;
}

.subra a::after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: black;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.subra a:hover::after{
  transform: scaleX(1);
  transform-origin: bottom left;
  
}
.footertext{
  animation: 1s ease-out 0s 1 slideInFromDown;
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: -65px;
  position: fixed;
  background-color: inherit;
  height:3.5vh;
  width: 100%;
  justify-content: center;
}

.footertext li{
  margin-top: 0px;
  margin-right: 50px;
  font-family: Brickfont;
  font-size: 2.5vh;
}
.cardstext{
  font-family: newfont;
  Font-Size:2.5vh;
  text-shadow: 2px 2px 3px black;
  text-align: center;
}

.cardstext_center{
  margin-top: 25%;
  margin-left: 10%;
  Font-Size: 7.0vh; 
  color: rgb(0, 0, 0);
  text-shadow: 2px 2px 3px rgb(228, 72, 61);
}

.cardstext_first{
  margin-top: 25%; 
  Font-Size: 7.0vh; 
  color: black;     
  text-shadow: 2px 2px 3px rgb(98, 191, 228);
}

.cardstext_last{
  margin-top: 25%; Font-Size: 7.0vh; 
  color: black;
  text-shadow: 2px 2px 3px rgb(221, 171, 79); 
  margin-left: 25%;
}

.about_us_main_div{
  
  width: 100%;
  height: 100%;

}
  
/*Movil*/
@media (max-width:480px){
  .videotrailer{
    width:100%;
  }
        body{
                width:100%;
                margin:auto;
        }
    .navigationmenu{
          display:none;
    }


    .cardstext_center{
      margin-top: 50%;
      margin-left: 0%;
    }
    
    .cardstext_first{
      margin-top: 25%; 
    }
    
    .cardstext_last{
      font-size: 6.25vh;
      margin-top: 25%;
      margin-left: 0%;
    }

    .navigationmenumain{
      height: 50px;
      width: 90%;
      margin-top: 0px;
      margin-bottom: 0px;
      place-content: center;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
     }
     .navigationmenumain li{
      font-size: 15px;
      margin-right: 20px;
      margin-top: 5px;
    }

		.cards {
		 display: block;
		 width: 100%;
		 margin: auto;
		}

    .cardsmain {
      display: block;
      width: 100%;
      margin: auto;
     }

		.teaser-card-image{
		 margin: 20px auto 0px auto;
		 padding-top: 0px;
		 width: auto;
		}

		.teaser-card-imagemain{
      margin-left: 0.0%;
      margin-bottom: -120px;
      height: 500px;
      clip-path: polygon(0% 0%, 100% 25%, 100% 100%, 0% 75%);
      width: auto;
     }

     .teaser-card-image-firstmain {
      margin-bottom: -120px;
      width: auto;
      height: 500px;
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 75%);
     }
     
     .teaser-card-image-lastmain {
      margin-left: 0.0%;
      margin-bottom: -120px;
      width: auto;
      height: 500px;
       clip-path: polygon(0% 0%, 100% 25%, 100% 100%, 0% 100%);
       text-align-last: center;
      }

		.DescriptionText2{
		 width: 100%;
		 margin: auto;
		 font-size: 35px;
		}
		.DescriptionText{
		 width: 100%;
		 margin: auto;
		 max-height: none;
		}
		.Announce2{
		 width: 100%;
		 font-size: 35px;
		}
		.Announce{
		 width: 100%;
		 font-size: 35px;
		}
		.Subtitle{
		  width: 100%;
		 text-align:center;
     font-size: 25px;
     margin:auto;
		}
		.icon-worker{
		  padding: 0px;
      width:320px;
      margin: auto auto 100px auto;
		}
    .icon-worker li{
      padding-right: 10px;
    }
    .equipo{
      padding-top:0px;
    }
		#sub{
		  padding-left:0px;
      margin: auto;
      width: 100px;
}
.scrollscreen{
    overflow-x: scroll; 
    overflow-y: scroll;
  }

  .scrollscreenmain{
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .footertext{
      justify-content: space-evenly;
      padding: 0px;
     margin: auto;
      position: fixed;
      z-index: 1000;
      bottom: 0;
      height: 40px;
    }
    .footertext li{
  margin-top: 0px;
  font-family: Brickfont;
  font-size: 10px;
  margin-right: 0px;
    }

    .logomain {
      height:61px;
    }
}

/*Tabletas*/
@media only screen and (min-width:481px) and (max-width:1050px){
 
        body{
                width:100%;
                margin:auto;
        }
        .navigationmenu{
         width: 100%; 
         margin-top: 0px;
         margin-bottom: 0px;
        }
        .cardstext_center{
          margin-top: 50%;
          margin-left: 0%;
        }
        
        .cardstext_first{
          margin-top: 25%; 
        }
        
        .cardstext_last{
          margin-top: 50%;
          margin-left: 0%;
        }
        ::-webkit-scrollbar {
          width: 0px;
        }

        .navigationmenumain{
          height: 50px;
          width: 100%;
          margin-top: 0px;
          margin-bottom: 0px;
          place-content: center;
         }
         .navigationmenumain li{
          font-size: 15px;
          margin-right: 20px;
          margin-top: 5px;
        }
		.navigationmenu li{
      font-size: 15px;
      margin-right: 20px;
      margin-top: 5px;
    }
    .footertext{
      justify-content: space-evenly;
      padding: 0px;
      height: 50px;
      margin-top: -50px;
      }
    .footertext li{
  margin-top: 0px;
  font-family: Brickfont;
  font-size: 12px;
  margin-right: 0px;
    }
    .logo {
      width:112px;
      height:61px;
    }

    .logomain {
      height:61px;
    }

		.cards {
		 display: block;
		 width: 100%;
		 margin: auto;
		}

    .cardsmain {
      display: block;
      margin: auto;
     }

		.teaser-card-imagemain{
      margin-left: 0.0%;
     margin-bottom: -245px;
     height: 1000px;
     clip-path: polygon(0% 0%, 100% 25%, 100% 100%, 0% 75%);
     width: auto;
		}

    .teaser-card-image-firstmain {
      margin-bottom: -245px;
      width: auto;
      height: 1000px;
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 75%);
     }
     
     .teaser-card-image-lastmain {
      margin-left: 0.0%;
      margin-bottom: -245px;
      width: auto;
      height: 1000px;
       clip-path: polygon(0% 0%, 100% 25%, 100% 100%, 0% 100%);
       text-align-last: center;
       align-content: center;
      }

		.DescriptionText2{
		 width: 100%;
		 margin: auto;
		 padding-bottom: 100px;
		}
		.DescriptionText{
		 width: 100%;
		 margin: auto;
     max-height: none;
		}
		.Announce2{
		 width: 100%;
		}
		.Announce{
		 width: 100%;
		 margin-top:80px;
		}
		.Subtitle{
		  width: 100%;
		 text-align:center;
		 margin:auto;
		}
		.icon-worker{
		  padding: 0px;
      width:440px;
      margin: auto;
		}
    .equipo{
      padding-top:0px;
    }
		#sub{
		  padding-left:80px;
		}
		.scrollscreen{
    overflow-x: hidden; 
    overflow-y: scroll;
  }
  .scrollscreenmain{
    overflow-x: hidden; 
    overflow-y: scroll;
  }

}

/*Pantalla*/
@media only screen and (min-width:1050px){
  
}