/* Fonts */
@font-face {
    font-family: 'Azonix';
    src: url(./azonix/Azonix.otf);
}
@font-face {
    font-family: 'Mandalore1';
    src: url(.mandalore/mandalore.ttf);
}
@font-face {
    font-family: 'qualy';
    src: url(./qualy/Qualy_Bold.ttf);
}
@font-face {
    font-family: 'QuickSilver3';
    src: url(./quicksilver_3/Quicksilver.ttf);
}

body {
  background-image: url("../Images/Background_Smol.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 80%;
  margin: 0;

}



main {
  /* display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; */
  /* min-height: 100vh; */

}



/* Rayas */
.vline{
  width: 0.3vw;
  height: 60vw;
  background: white;
  box-shadow: 0px 0px 7px 1px #0402f0 ;
  border-radius: 7px;
  z-index: 10;
  position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);

}
.hline{
  width: 60vw;
  height: 0.3vw;
  background: white;
  box-shadow: 0px 0px 7px 1px #0402f0 ;
  border-radius: 7px;
  z-index: 10;
  position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

.cross{
  width: 3px;
  height: 140%;
  background: white;
  box-shadow: 0px 0px 7px 1px #0402f0 ;
  border-radius: 7px;
  z-index: 10;
  position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.raya1{
    transform: translateX(-50%) translateY(-50%) rotate(60deg);
    animation: movraya1 1.5s ease-out 3s 1  forwards;
    /*    animationName  duration timing-funciton delay repeat count*/
}
.raya2{
    transform: translateX(-50%) translateY(-50%) rotate(-60deg);
    animation: movraya2 1.5s ease-out 3s 1  forwards;
}

lettersBox{
  /* border: green 2px solid; */
  height: 40vw;
  width: 60vw;
  position: absolute;
  right:50%;
  top: 50%;
  transform: translate(50%, -50%);
  font-family: qualy;
  font-size: 12vw;
  display: inline;
  /* line-height: -1vw; */
  text-decoration: none;
  color: white;
  text-shadow: 0px 5px 5px  black !important;
  animation: finalPulse 7s ease 4s infinite ;

}

letters {
  /* border: 1px red solid;

  width: auto; */

  /* animation: finalPulse 7s ease 4s infinite ; */
  /* top: 50%;
  right:50%;
  transform: translate(50%,-50%); */
  /* transform: translateX(50%) translateY(-50%); */
  /* transform: translate(-50%, -50%); */
}



smallLetters {
  font-size: 3vw;
  margin-left: -2%;
  animation: fadeIn 2s ease-in 4s 1 forwards;
  opacity: 0;

  /* display: hidden; */
  /* animation:fadeInOut 4s linear 5; */
  }

.navLetters{
  font-family: qualy;
  font-size: 3vw;
  text-decoration: none;
  color: white;
  text-shadow: 0px 5px 5px  black !important;
  width: 100%;
  height: 100%;
}


.char {
  /* font-size: 10vw; */
}


.letterA {
/* opacity: 0.5; */
width: 57%;
height: 33%;
float: right;
text-align: left;
animation: fadeLetter 1s ease-out .5s 1  forwards;
}

.letterL {
width: 60%;
height: 45%;
float: right;
text-align: left;
padding-left: 25%;
padding-top: 10%;
line-height: 5%;
transform:translateX(45%);
animation: fadeLetter 1s ease-out 1.0s 1  forwards;
}

.letterH {
  width: 25%;
  height: 33%;
  float:right;
  text-align: left;
  transform:translateX(119%);
  animation: fadeLetter 1s ease-out 1.5s 1  forwards;
}

.letterG {
height: 34%;
width:40%;
float: left;
text-align: left;
animation: fadeLetter 1s ease-out 2s 1  forwards;
}

.letterA, .letterL, .letterH, .letterG {
  /* border: white 1px solid; */
  opacity: 0;
}



.name{
  display: block;
  /* line-height: 1vw; */
}
.links{
  display: none;
  line-height: 1vw;
}

.triDivs{
  animation:  moveMenu 1s ease 1 forwards;
  /* animation: shrinkMenu 0.5s ease 1 forwards; */
}

.fadeOutclass{
  animation: fadeOut 0.5s ease 1 forwards !important;
}

  .slideAnim {
  animation-name: shrinkAndMove;
  animation-duration: 1s;
}

.trianguloa{
  width:60vw;
  height:25vw;
  /* -webkit-clip-path: polygon(0 0, 50% 80%, 100% 15%); */
  clip-path: polygon(50% 82%, 0 13%, 0 0, 100% 0, 100% 13%);

  z-index: 4
  left:-9999px;
  /* transform: translateY(-55%); */
}

.triangulol{
    width:44vw;
    height:35vw;
    /* -webkit-clip-path: polygon(100% 0, 33% 50%, 100% 100%); */
    clip-path: polygon(100% 0, 33% 50%, 100% 100%);
/* transform: translate(36%, -31%); */
transform: translate(36%, 8%);
    z-index: 2
    left:-9999px;
    }

.trianguloh{
    width:60vw;
    height:33vw;
    /* -webkit-clip-path: polygon(0 100%, 50% 50%, 100% 100%); */
    clip-path: polygon(50% 39%, 100% 90%, 100% 100%, 0 100%, 0 90%);
    transform: translateY(22%);
    z-index: 4
    left:-9999px;
    }

.triangulog{
    width:40vw;
    height:35vw;
    /* -webkit-clip-path: polygon(0 0, 67% 50%, 0 100%); */
    clip-path: polygon(0 0, 75% 50%, 0 100%);
    transform: translateY(8%);
    z-index: 2

    }
.trianguloa, .triangulol, .trianguloh, .triangulog {
 /* background-color: grey;
 opacity: 0.5; */
 position: absolute;

 /* animation: delayedDivActivate 0s 3s 1 backwards; */
  }

.trianguloa:hover,.triangulog:hover ,.trianguloh:hover ,.triangulol:hover {
  /* left:9999px; */
  /* animation: delayedDivActivate 0 7 1; */
  /* background: rgba(255, 255, 255, 0.02); */
}



.enLang{
  display:block;
}
.esLang{
  display:none;
}

.sectionTitle{
  color: white;
  font-size: 3vw;
  font-family: Azonix;
  float: center;
  text-align: center;
  text-shadow: 0px 5px 5px  black !important;

}

  * {
    box-sizing: border-box;
  }

  /* Create three equal columns that floats next to each other */
  .column {
    float: left;
    width: 33.33%;
    padding: 10px;
    margin-top: 3vw;
    height: 30vw; /* Should be removed. Only for demonstration */
  }
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  float: center;
  text-align: center;
  
}

.flex-container{
  display: flex;
  flex-wrap: wrap;
  height: 50%;
  margin-top:20px;

}

.cell{
  padding: 20px;
  background-color: #ccc;
  border-radius: 5%;
  margin: 10px;
}
.flex-item-left {
  flex: 28%;
  text-align: left;
}



.flex-item-right{
  flex: 28%;
  text-align: right;
}

.flex-item-center {
  flex: 41%;
  text-align: center;
  margin-top: 10px;
}

img {
  height: 55vh;
  width:100%;
}
.image-cropper {
  object-fit: cover;
  overflow: hidden;
  border-radius: 5%;
}
 #imageRotator{
/* opacity: 0; */
}

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;

  }

.pageText {
  color: white;
  font-size: 1vw;
}


cycler {
  color: white;
  font-size: 3vw;
}

.whiteText {
  color: white;
  font-size: 2vw;
}