/****************** video  *****************/


body {
    width: 100%;
    margin: 0 auto;
}

.banner-video {
    width: 100%;
    height: 790px;
    margin: 0 auto;
}

.banner-video video {
    width: 100%;
    height: 100%;
}

#movil {
    display: none;
}

/*******************************************/


#time-line {
    width: 100%;
    height: 4000px;
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

#time-line .container-time { 
    width: 800px;
    height: auto;
    margin: 0 auto;

}


/************ left ************/

#time-line .container-time .trop-left { 
    width: 100%;
    display: flex;
    height: 250px;
}

#time-line .container-time .trop-left .trophi { 
     margin: 0 auto;
     width: 300px;
}

#time-line .container-time .trop-left .trophi img {
    transform: translateX(-50px);
}

#time-line .container-time .trop-left .line-red { 
    margin: 0 auto;
    width: 0px;
    height: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    border-left: 10px solid red;
    border-right: 10px solid red;
    border-bottom: 5px solid transparent;
}

#time-line .container-time .trop-left .line-red img { 
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
     left: 0;
     animation: directo 5s infinite;
     -webkit-animation: directo 5s infinite;
} 

@keyframes directo {
    0% {
        left:0;
    }
    3% {
        left:30px;
    }

    6% {
        left:0;
    }

    9% {
        left:30px;
    }

    12% {
        left:0;
    }

    100% {
        left:0;
    }
}

#time-line .container-time .trop-left .line-red::after { 
    position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    left: -19px;
    top: 0;
    border: 4px solid #fff;
    bottom: 0;
    margin: auto;
    background: red;
    border-radius: 50%;
}

#time-line .container-time .trop-left .line-red::before { 
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    left: -10px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    border-radius: 50%;
    z-index: 2;
}

#time-line .container-time .trop-left .info-contents {
    margin: 0 auto;
    width: 300px;
    text-align: left;
    margin-left: 10%;
    transform: translateX(50px) ;
 }

 #time-line .container-time .trop-left .info-contents h4 {
    font-family: 'RalewayRegular';
    font-size: 25px;
    color: #2c2c37;
    font-weight: 100;
 }

 #time-line .container-time .trop-left .info-contents h3 {
    font-family: 'RalewayMedium';
    font-size: 25px;
    color: #2c2c37;
 }


 /************ right ************/

#time-line .container-time .trop-right { 
    width: 100%;
    display: flex;
    height: 250px;
    margin: 1% auto;
}

#time-line .container-time .trop-right .trophi { 
     margin: 0 auto;
     width: 300px;
     margin-left: 10%;
     text-align: left;
}



#time-line .container-time .trop-right .line-red { 
    margin: 0 auto;
    width: 0px;
    height: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    border-left: 10px solid red;
    border-right: 10px solid red;
    border-bottom: 5px solid transparent;
}

#time-line .container-time .trop-right .line-red img { 
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    transform: rotate(180deg);
    animation: indirecto 5s infinite;
    -webkit-animation: indirecto 5s infinite;
}

@keyframes indirecto {
    0% {
        right:0px;
    }
    50% {
        right: 0px;
    }

    53% {
        right: 30px;
    }

    56% {
        right: 0px;
    }

    59% {
        right:30px;
    }

    62% {
        right:0px;
    }

    100% {
        right:0px;
    }
}

#time-line .container-time .trop-right .line-red::after { 
    position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    left: -19px;
    top: 0;
    border: 4px solid #fff;
    bottom: 0;
    margin: auto;
    background: red;
    border-radius: 50%;
}

#time-line .container-time .trop-right .line-red::before { 
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    left: -10px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    border-radius: 50%;
    z-index: 2;
}

#time-line .container-time .trop-right .info-contents {
    margin: 0 auto;
    width: 300px;
    text-align: right;
    transform: translateX(-120px) ;
 }

 #time-line .container-time .trop-right .info-contents h4 {
    font-family: 'RalewayRegular';
    font-size: 25px;
    color: #2c2c37;
    font-weight: 100;
 }

 #time-line .container-time .trop-right .info-contents h3 {
    font-family: 'RalewayMedium';
    font-size: 25px;
    color: #2c2c37;
 }


 /****************** media queries************/ 


 @media screen and (max-width: 420px) {

    .banner-video {
        width: 100%;
        height: 400px;
    }

    #desktop {
        display: none;
    }

    #movil {
        display: block;
    }


    #time-line {
        width: 100%;
        height: 2400px;
        margin: 0 auto;
        
    }


    #time-line .container-time { 
        width: 350px;
        height: auto;
        margin: 0 auto;
    
    }

    #time-line .container-time .trop-left { 
        width: 100%;
        display: flex;
        height: 150px;
    }


    #time-line .container-time .trop-left .trophi { 
        margin: 0 auto;
        width: 150px;
    }

    
   #time-line .container-time .trop-left .trophi img {
    transform: translateX(0px);
    width: 90%
   }

   #time-line .container-time .trop-left .line-red { 
    margin: 0 auto;
    width: 0px;
    height: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    border-left: 5px solid red;
    border-right: 5px solid red;
    border-bottom: 5px solid transparent;
    transform: translateX(10px);
}


#time-line .container-time .trop-left .line-red img { 
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    animation: directo 5s infinite;
    -webkit-animation: directo 5s infinite;
    width: 50px;
    transform: translate();
}


#time-line .container-time .trop-left .line-red::after { 
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    left: -13px;
    top: 0;
    border: 3px solid #fff;
    bottom: 0;
    margin: auto;
    background: red;
    border-radius: 50%;
}

#time-line .container-time .trop-left .line-red::before { 
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    left: -5px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    border-radius: 50%;
    z-index: 2;
}

#time-line .container-time .trop-left .info-contents {
    margin: 0 auto;
    width: 150px;
    text-align: left;
    margin-left: 5%;
    transform: translateX(50px) ;
 }

 #time-line .container-time .trop-left .info-contents img {
    width: 80px;
 }

 #time-line .container-time .trop-left .info-contents h4 {
    font-family: 'RalewayRegular';
    font-size: 15px;
    color: #2c2c37;
    font-weight: 100;
 }

 #time-line .container-time .trop-left .info-contents h3 {
    font-family: 'RalewayMedium';
    font-size: 15px;
    color: #2c2c37;
 }


 /************ right ************/

 #time-line .container-time .trop-right { 
    width: 100%;
    display: flex;
    height: 150px;
    margin: 1% auto;
}

#time-line .container-time .trop-right .trophi { 
     margin: 0 auto;
     width: 150px;
     margin-left: 0%;
     text-align: left;
}

#time-line .container-time .trop-right .trophi img { 
    width: 90%;
    position: relative;
    left: 30px;
}



#time-line .container-time .trop-right .line-red { 
    margin: 0 auto;
    width: 0px;
    height: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    border-left: 5px solid red;
    border-right: 5px solid red;
    border-bottom: 5px solid transparent;
}

#time-line .container-time .trop-right .line-red img { 
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    transform: rotate(180deg);
    animation: indirecto 5s infinite;
    -webkit-animation: indirecto 5s infinite;
    width: 50px;
}

#time-line .container-time .trop-right .line-red::after { 
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    left: -13px;
    top: 0;
    border: 3px solid #fff;
    bottom: 0;
    margin: auto;
    background: red;
    border-radius: 50%;
}

#time-line .container-time .trop-right .line-red::before { 
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    left: -5px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    border-radius: 50%;
    z-index: 2;
}


#time-line .container-time .trop-right .info-contents {
    margin: 0 auto;
    width: 150px;
    text-align: right;
    transform: translateX(-50px) ;
 }

 #time-line .container-time .trop-right .info-contents img {
    width: 70px;
 }

 #time-line .container-time .trop-right .info-contents h4 {
    font-family: 'RalewayRegular';
    font-size: 15px;
    color: #2c2c37;
    font-weight: 100;
 }

 #time-line .container-time .trop-right .info-contents h3 {
    font-family: 'RalewayMedium';
    font-size: 15px;
    color: #2c2c37;
 }

    
 }