*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@media screen and (min-width: 601px){
body{
    background-color: rgb(255, 255, 255);
    color: #272727;
    }
.main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 12%;

}

/* The first frame */


.frame01{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
.frame01 div{
    width: 77%;
    margin: 1% 0 0 ;
    
}
.title{
    width: 100%;
    display: flex;  
    justify-content: center;
    align-items: center;
    padding: 0 1%;
    margin: 1% 0;
}
#REP{
    width: 100%;
}
 a{
    font-family: liberation-sans, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    color: #272727;
    text-decoration: none;
}
#REPLICA{
    width: 100%;
    fill: #272727;
    }
.names {
    width: 100%;
    display: flex;  
    flex-direction: row;
    justify-content: space-between;
    padding: 0 1%;
    margin: 1% 0;
   }
.names a{
    font-size: 20px;
    font-weight: 500;
    
}
.background{
    overflow: hidden;
    display: flex;              
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left:0;
    transition: 1s;

    z-index: -3;
}
.background img{
    width: 300%;
    opacity: 0.2;
    animation: back 40s ease infinite;
    filter: blur(5px);
}


/*background animation*/

@keyframes back {
    0%, 100%{
        opacity: 0.15;
    }
    50%{
        opacity: 0.7;
    }
}

/* The second frame - text */

.frame02{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}
.text{
    width: 77%;
    margin: 1% 0 0;
    display: flex;  
    justify-content: center;
    align-items: center;
    padding: 0 1%;
    
}
.text p{
    font-family: liberation-sans, sans-serif;
    text-transform: uppercase;
    font-size: 1.1vw;
    line-height: 120%;
}

/*videos*/

.frame03{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}
.video-block{
    width: 77%;
    height: 100vh;
    margin: 10% 0 0;
    display: flex;  
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1%;
}
video{
    width: 80%;
    height: 80%;
    opacity: 1;
    transition: 0.5s;
}
video:hover{
    opacity: 1;
}
.link{
    width: 80%;
    margin-top: 3%;
    display: flex;
    justify-content: center ;
    font-family: liberation-sans, sans-serif;
    font-weight: 600;
    font-size: 0.9vw;
    
    
}
/* Footer */
.footer{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: liberation-sans, sans-serif;
    font-size: 1.2vw;
    font-weight: 500;
}
}

/* mobile styles */

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

    .main{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 12%;
    }

    .frame01{
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }
    .frame01 div{
        width: 95%;
        margin: 1% 0 0 ;
        
    }
    .title{
        width: 100%;
        display: flex;  
        justify-content: center;
        align-items: center;
        padding: 0 1%;
        margin: 1% 0;
    }
    #REP{
        width: 100%;
    }
     a{
        font-family: liberation-sans, sans-serif;
        font-style: normal;
        text-transform: uppercase;
        color: #272727;
        text-decoration: none;
    }
    #REPLICA{
        width: 100%;
        fill: #272727;
        }
    .names {
        width: 100%;
        display: flex;  
        flex-direction: row;
        justify-content: space-between;
        padding: 0 1%;
        margin: 1% 0;
       }
    .names a{
        font-size: 20px;
        font-weight: 500;
        
    }
    .background{
        overflow: hidden;
        display: flex;              
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left:0;
        transition: 1s;
    
        z-index: -3;
    }
    .background img{
        width: 300%;
        opacity: 0.2;
        animation: back 40s ease infinite;
        filter: blur(5px);
    }
    
    
    /*background animation*/
    
    @keyframes back {
        0%, 100%{
            opacity: 0.15;
        }
        50%{
            opacity: 0.7;
        }
    }

    /* text mobile */

    .frame02{
        width: 100%;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }
    .text{
        width: 95%;
        margin: 1% 0 0;
        display: flex;  
        justify-content: center;
        align-items: center;
        padding: 0 1%;
        
    }
    .text p{
        font-family: liberation-sans, sans-serif;
        text-transform: uppercase;
        font-size: 4vw;
        
    }
    /*videos mobile*/

.frame03{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}
.video-block{
    width: 95%;
    height: 70vh;
    margin: 10% 0 0;
    display: flex;  
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1%;
}
video{
    width: 100%;
    height: 100%;
}

.link{
    width: 100%;
    margin-top: 5%;
    display: flex;
    justify-content: center ;
    font-family: liberation-sans, sans-serif;
    font-weight: 600;
    font-size: 5vw;  
    opacity: 0.9;
    
}

.footer{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: liberation-sans, sans-serif;
    font-size: 6vw;
    font-weight: 600;
}


}