styles.css

/* general parameters */


:root {
    --hex-height: 15vmin;
    --hex-width:  calc(var(--hex-height) * 1.73);
    --hex-width-half: calc(var(--hex-width) / 2);
    --hex-height-half: calc(var(--hex-height) / 2);
    --logo-height: 15vmin;
    --hex-color: #7F5283;
  }


@font-face {
 
    font-family: 'Alliance';
    src: url('./fonts/AllianceNo1-SemiBold.eot');
    src:url('./fonts/AllianceNo1-Bold.woff2') format('woff2'),
        url('./fonts/AllianceNo1-Bold.woff') format('woff'),
        url('./fonts/AllianceNo1-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Alliance';
    src: url('./fonts/AllianceNo1-SemiBold.eot');
    src: url('./fonts/AllianceNo1-SemiBold.woff2') format('woff2'),
    url('./fonts/AllianceNo1-SemiBold.woff') format('woff'),
    url('./fonts/AllianceNo1-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Alliance';
    src: url(./fonts/AllianceNo1-Regular.eot);
    src: url('./fonts/AllianceNo1-Regular.woff2') format('woff2'),
    url('./fonts/AllianceNo1-Regular.woff') format('woff'),
    url('./fonts/AllianceNo1-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

*{
    border: 0;
    margin: 0;
    padding: 0;
}




/* Intro slide */
.slide_1 {
    display: flex;
    background: linear-gradient(219deg, #7776ff, #ae2cf1);
    background-size: 400% 400%;
    width: 100%;
    height: 200vmin;
    -webkit-animation: AnimationName 6s ease infinite;
    -moz-animation: AnimationName 6s ease infinite;
    animation: AnimationName 6s ease infinite;
    position: fixed;
    flex-direction: column;
    align-items: center;
    
}

.blank{
    display: flex;
    height: 100vmin;
    width: 100%;
    position: relative;
}


 
#loading-box{

    width: 100%;
    background-color: #1F4690;
    -webkit-transition: max-height 2s; 
    -moz-transition: max-height 2s; 
    -ms-transition: max-height 2s; 
    -o-transition: max-height 2s; 
    transition: all 2s;  
    overflow: hidden;
    max-height: 100%;
    
}




#scroll-down{
    margin-top: 20vmin;
    width: 10vmin;
    filter: invert(100%) sepia(67%) saturate(1%) hue-rotate(96deg) brightness(105%) contrast(100%);
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}



}


.slide_1 h1{
    font-family: "Alliance";
    font-weight: bold;
    font-size: 10vmin;
    color: white;
    margin-top: 10vmin;
    flex-wrap: wrap;
    
}

.slide_1 p{
    font-family: "Alliance";
    font-weight: 600;
    font-size: 3vmin;
    color: #dcdada;
    text-align: center;
    width: 50%;
    margin-top: 1vmin;
    
}


.slide_2{
    display: flex;
    width: 100%;
    position: relative;
    height: 100vmin;
    background-color: #2C3333;
    flex-direction: row;
    
}

.image-container2{
    height: 100%;
    max-width: 50%;
}

.image-container2 img{
    object-fit: cover;
    width: 40vw;
    height: 100%;
    
    transition: all 2s ease;
}
.text_section{
    
    flex-direction: column;
    height: 100vmin;
    min-width: 50%;
    transition: all 1.5s ease;
    transition-delay: 0.5s;
    
}

.text_container{
    flex-direction: column;
    width: 70%;
    margin-left: 5vmin;
    margin-top: 5vmin;
}
.text_section h2{
    font-family: "Alliance";
    font-weight: bold; 
    font-size: 2vmin; 
    color: #7776ff;
    
}
.text_section h1{
    font-family: "Source Code Pro";
    font-weight: bold;  
    font-size: 6vmin;
    color: white;
}
.text_section p{
    color:whitesmoke;
    font-family: "Alliance";
    font-weight: normal;  
    margin-top: 4vmin;
    font-size: 2.5vmin;
    text-align: justify;
    
}


.timeline-banner{
    position: relative;
    height: 100vmin;
    background-color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.timeline-banner h1{
    font-family: "Alliance";
    font-weight: bold; 
    font-size: 5vmin; 
    color: black;
    transition: all 1s ease;
    
}

.timeline-banner p{
    font-family: "Alliance";
    font-weight: bold; 
    font-size: 2vmin; 
    color: black;
    transition: all 1s ease;
}
.slide_3{
    
    position: relative;
    height: 240vmin;
    background-color: #18978F;
    display: flex;
    flex-direction: row;
    width: 100%;
}



.fade-in{
    position: relative;
    opacity: 0;
    transform: translate(0,10vmin);
    -webkit-transform: translate(0,10vmin); /** Chrome & Safari **/
    -o-transform: translate(0,10vmin); /** Opera **/
    -moz-transform: translate(0,10vmin); 
}

.custom-shape-divider-bottom-1658180740 {
    
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1658180740 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 83px;
}

.custom-shape-divider-bottom-1658180740 .shape-fill {
    fill: #FFFFFF;
}




.slide_3 div{
    display: flex;
    flex-direction: column;
}

.left-section{
    display: flex;
    margin-top: 5vmin;
    gap: 30px;
    width: 49.5%;
}
.right-section{
    display: flex;
    margin-top: 5vmin;
    gap: 30px;
    width: 49.5%;
}



.container-years{
    
    
    background-color: #54BAB9;
    border-radius: 5vmin;
    padding: 3vmin;
    
    width: 70%;
    transition: all 1s ease;
    align-self: center;
    gap: 10px;
}

.slide_3 h1{
    font-family: "Source Code Pro";
    font-weight: bold;  
    font-size: 5vmin;
    color: white;
    margin-bottom: 0;
}

.slide_3 p{
    color:whitesmoke;
    font-family: "Alliance";
    font-weight: normal;  
    
    font-size: 2.5vmin;
}
.timeline{
    width: 0.5%;
    height: 100%;
    align-self:flex-start;
    position: relative;
    background-color: white;

    
}

.timeline-point{
    position: absolute;
    top: 5vmin;
    left: 50%;
    transform: translateX(-50%);
    width: 3vmin;
    height: 3vmin;
    background: white;
    border-radius: 50%;
   
}

.slide_3 h2{
    font-family: "Alliance";
    font-weight: 600;
    font-size: 3vmin;
    color: white;
}

q{
    font-style: italic;
}

#s2016{
    position: relative;
    top: 40vmin;  
    height: auto;
}

#s2017{
    position: relative;
    top: 40vmin;  
    height: auto;
}

#s2018{
    position: relative;
    top: 85vmin;  
    height: auto;
}


#s2022{
    position: relative;
    top: 95vmin;  
    height: auto; 
}

#s2023{
    position: relative;
    top: 120vmin;  
    height: auto; 
}

#p2016{
    top: 40vmin;

}

#p2017{
    top: 75vmin;
}

#p2018{
    top: 120vmin;
}

#p2022{
    top: 175vmin;
}



.slide_4{
        display: flex;
        align-items: center;
        flex-direction: row;
        position: relative;
        min-height: 140vmin;
        background-color: #2C3333;
        width: 100%;
       
}


.programs-text{
    display: flex;
    max-width: 50%;
    order: 2;
    
}


.logo{
    height: var(--logo-height);
    display: inline-block;
    position: relative;
    /* Move the element to the right by 50% of the container's width */
    left: 50%; 
    /* Calculates 50% of the element's width, and moves it by that */ 
    /* amount across the X-axis to the left */
    transform: translateX(-50%);
    top: 20%;
    

}


.main {
    align-self: flex-start;
    margin-top: 3vmin;
    margin-left: 3vmin;
    display:flex;
    --s: 25vmin;  /* size  */
    --m: 4px;    /* margin */
    --f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px); 
    max-width: 50%;
  }
  
  .container {
    font-size: 0; /* disable white space between inline block element */
  }
  
  .logo-container {
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s) * 1.1547);
    display: inline-block;
    max-height: 200vw;
    font-size:initial;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    margin-bottom: calc(var(--m) - var(--s) * 0.2885);
    background-color: var(--hex-color);
    /* perspective: 1000px; */
    transition: all 0.5s ease;
  }
  
  .container::before {
    content: "";
    width: calc(var(--s) / 2 + var(--m));
    float: left;
    height: 120%; 
    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));
  }

.inner{
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.logo-container:hover {
    transform: rotateY(180deg);
    

  }
.text-container{
    padding-right: 20px;
}
  .text-container h1{
    font-family: "Source Code Pro";
    font-weight: bold;  
    font-size: 6vmin;
    color: white;
  }

  .text-container p {
    color:whitesmoke;
    font-family: "Alliance";
    font-weight: normal;  
    margin-top: 4vmin;
    font-size: 2.5vmin;
    text-align: justify;
  }

  .text-container h2{
    font-family: "Alliance";
    font-weight: bold; 
    font-size: 2vmin; 
    color: #7776ff;
  }

  .slide_5{
    position: relative;
    
    
    width: 100%;
    height: 50vmin;
    
    background-color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .slide_5 h1{
    font-family: "Alliance";
    font-weight: bold; 
    font-size: 5vmin; 
    color: black;
    transition: all 1s ease;
    align-self: center;
    left: 50%;
    
  }


  .slide_6 {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height:33.33333%;
    background-color: #18978F;
    flex-wrap: wrap;
    
    
  }


.proyect-container{
    flex: 0 0 33.333333%;
    height: 33.33333vw;
    width: 33.33333%;
    transition: all 0.5s ease;
   
}


.proyect-text-container{
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    

}
.proyect-container h1{
    text-align: center;
   margin-top: 25%;
    left: 50%;
    transform: translateX(-50%);
  
    font-family: "Alliance";
    font-weight: bold;
    font-size: 9vmin;
    color: white;
   
    flex-wrap: wrap;
}

.proyect-container p{
    text-align: center;
    
    left: 50%;
    transform: translateX(-50%);
  
    font-family: "Alliance";
    font-weight: regular;
    font-size: 3vmin;
    color: white;
   
    flex-wrap: wrap;
}
.proyect-container a{
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
    text-decoration: none;
    z-index: 1;
  
    /* fixes overlap error in IE7/8, 
       make sure you have an empty gif */
}
.background-filter::after {
    -webkit-backdrop-filter: blur(10px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
    backdrop-filter: blur(10px); /* Supported in Chrome 76 */
    filter: brightness(20%);
    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    top: 0;
    transition: 0.5s ease;
  }
  
  .background-filter {
    position: relative;
  }
  
  #car{
    background-image: url('/photos/carProyect.png');
  
    background-position: center;
    background-size: cover;
  }
  

  .background-filter:hover::after {
    -webkit-backdrop-filter: blur(0px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
    backdrop-filter: blur(0px);
    filter: brightness(100%);
    transition: 0.5s ease;

  }

  .background:hover > .proyect-text-container h1 {
    opacity: 0;
    transition: 1s ease;
  }
  
  .background:hover > .proyect-text-container p {
    opacity: 0;
    transition: 1s ease;
  }
  /* Use for content that should not be blurred */
  .u-non-blurred {
    position: relative;
    z-index: 1;
  }



#red{
    width: 100%;
    background-color: #003865;
}

#printers{
    background-image: url('/photos/3dLogo.png');
    background-position: center;
    background-size: cover;
}

#blue{
    width: 100%;
    background-color: #EF5B0C;
}

#league{
    background-image: url('/photos/leagueProyect.png');
    background-position: center;
    background-size: cover;
}

#color3{
    width: 100%;
    background-color: #D4F6CC;
}

#arm{
    background-image: url('/photos/armProyect.png');
    background-position: center;
    background-size: cover;
}

#color4{
    width: 100%;
    background-color: #3CCF4E;
}

#ai{
    background-image: url('/photos/aiProyect.png');
    background-position: center;
    background-size: cover;
}

@media (max-width: 1000px) {
    .slide_2 img {
      display: none;
    }

    .slide_1 h1{
        font-size: 6vmin;
    }

    .slide_3{
        height: 240vw;
    }
    .slide_3 h1{
        font-family: "Source Code Pro";
        font-weight: bold;  
        font-size: 3vmin;
        color: white;
        margin-bottom: 0;
    }
    
    .slide_3 p{
        color:whitesmoke;
        font-family: "Alliance";
        font-weight: normal;  
        
        font-size: 2.5vmin;
    }

   

    #s2016{
        position: relative;
        top: 35vw;  
        height: auto;
    }
    
    #s2017{
        position: relative;
        top: 16vw; 
        height: auto;
    }
    
    #s2018{
        position: relative;
        top: 67vw;  
        height: auto;
    }
    
    
    #s2022{
        position: relative;
        top: 50vw;  
        height: auto; 
    }
    
    
    
    #p2016{
        top: 40vmin;
    
    }
    
    #p2017{
        top: 75vmin;
    }
    
    #p2018{
        top: 120vmin;
    }
    
    #p2022{
        top: 175vmin;
    }
    .blank{
        display: flex;
        height: 100vmin;
        width: 100%;
        position: relative;
        background-color: none;
    }
    .logo-container{
        display: none;
    }
    .text-container{
        
        
    transform: translateX(-10%);
    }
    .proyect-container{
        flex: 0 0 33.333333%;
        
        transition: all 0.5s ease;
        height: 33.33333vw;
        width: 33.33333%;
    }
    .proyect-container h1{
        font-size: 5vmin;
    }

    .proyect-text-container p{
        font-size: 2vmin;
    }
    
    
  }