@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@font-face {
    font-family: 'Tungsten' ;
    src: url(Fonts/AnyConv.com__Tungsten-Medium.ttf);
}
@font-face {
    font-family: 'Myriad';
    src: url(Fonts/AnyConv.com__MyriadPro-Regular.ttf);
}
@font-face {
    font-family: 'Keepcalm';
    src: url(Fonts/KeepCalm-Medium.ttf);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    
}
/* width */
::-webkit-scrollbar {
   
    background: #FF9E00; 
    width: .3em;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #252128; 
  }
   
  ::-webkit-scrollbar-thumb {
    background-color: #FF9E00; 

    border-radius: 3px;
    
  }
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #d68401; 
 
  }
body{
   overflow-x: hidden; 
   background-color: var(--colorbackground);
}

.main__bienvenida{
    height: 100vh;
    width: 100vw;
    background-color: var(--colorbackground);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -10px;
}

.p__bienvenida{
    font-size: var(--fonttitlesize);
    color: white;
    font-family: var(--fontfamilydestacado);
    position: absolute;
    
    display: block;
    height: auto;
    animation: fade 3.5s ease-out;
    z-index: 10;
}

.p__bienvenida::after{
    content: "";
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vw;
    height: 30vh;
    border-top:  1.5px solid var(--fontcolordestacado);
    display: block;
    background-color: var(--colorbackground);
    animation: arriba 1.5s ease-out;
    animation-delay: 2s;
    visibility: hidden;
    
}
/*abajo*/
.p__bienvenida::before{
    content: "";
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 30vh;
    width: 40vw;
    display: block;
    background-color: var(--colorbackground);
    border-bottom:  1.5px solid var(--fontcolordestacado);
    animation: abajo 1.5s ease-in-out;
    animation-delay: 2s;
    visibility: hidden;
}

.primary{
    z-index: 100;
    width: 50%;
    text-align: center;
}

.secondary{
    animation: fadeout 1.5s linear;
    z-index: 10;
    padding: 0 15px;
    text-align: center;
    max-width: 70%;
}


.zindex{
    z-index: 100;
}
.hidden{
    visibility: hidden;
   
}
.trick{
    width: 100%;
    height: 50%;
    display: block;
    background-color: var(--colorbackground);
    animation: trick 6s ;
    animation-delay: 3.5s;
    z-index: 40;
}

.line{
    height: 0;
    width: 50%;
    display: block;
    position: fixed;
    background-color: var(--colorbackground);
    left: 50%;
   z-index: 30;
}

.izquierda{
    border-left: 1.5px solid #FF9E00;
    animation: left 2s ;
    animation-delay: 4.5s;
    left: 50%;
    margin-right: auto;
    
}

.derecha{
    border-right: 1.5px solid #FF9E00;
    animation: right 2s ;
    animation-delay: 4.5s;
    margin-left: auto;
    right: 50%;
}

.bienvenida__bg{
    background-color: #252128;
    position: fixed;
    top: 10px;
    width: 100vw;
    height: calc(100vh - var(--heightnav));
    visibility: hidden; 
    z-index: 15;
}

.fadeout{
    animation: fadeout 2s;
    animation-delay: 5.3s;
}
@keyframes left {
    0%{
        height: 0px;
        left: 50%;
    }
    
    25%{
        height: 40%;
        left: 50%;
    }
    80%{
        height: 40%;
        left: 90%;
        
    }
    100%{
        height: 0px;
        left: 90%;
        
    }
}
@keyframes right {
    0%{
        height: 0px;
        right: 50%;
    }
    25%{
        height: 40%;
        right: 50%;
    }
    80%{
        height: 40%;
        right: 90%;
    }
    100%{
        height: 0px;
        right: 90%;
    }
}
@keyframes trick {
    0%{
        
    }
    50%{
        
        z-index: 0;
    }
    100%{
        z-index: 0; 
    }
}
@keyframes arriba{
    0%{
        opacity: 0;
       visibility: visible;
       top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
       width: 0%;
    }
    
    30%{
        opacity: 1;
        visibility: visible;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
    }
   
    100%{
        top: 50%;
        left: 50%;
        transform: translate(-50%, calc(-50% + 15vh));
        width: 60%;
    }
}

@keyframes abajo{
    0%{
       visibility: visible;
       top: 20%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 0;
       
       opacity: 0;
    }
    30%{
        visibility: visible;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        opacity: 1;
     }
    
    100%{
        top: 50%;
        left: 50%;
        transform: translate(-50%, calc(-50% - 15vh));
        width: 60%;
    }
}

@keyframes fade{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 1;
    }
    
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}