@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300&display=swap');

* {
    font-family: "Work Sans";
}

@media screen and (min-width: 1201px) {

body {
    text-align: center;
    background-color: black;
}

.logo {
    background-color: black;
    padding-top: 30px;
}
.logo a {
    text-align: center;
    text-decoration: none;
    color: whitesmoke;
    font-size: 60px;
    letter-spacing: 5px;
    opacity: 0.8;
    transition: 0.5s;
}
.logo a:hover {
    letter-spacing: 10px;
    opacity: 1;
}

.links {
    background-color: black;
    padding-top: 30px;
}
.links a {
    text-align: center;
    text-decoration: none;
    text-transform: lowercase;
    color: whitesmoke;
    font-size: 20px;
    letter-spacing: 1px;
    opacity: 0.8;
    transition: 0.5s;
    padding: 30px;
}
.links a:hover {
    letter-spacing: 2px;
    opacity: 1;
}

.protocol1 h2  a {
    color: white;
}

main {
    background-color: black;
    padding: 30px;
}

.content1 {
    background: url(media/bg6.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 30px;
    opacity: 0.8;
    transition: 0.5s;
}
.content1:hover {
    opacity: 1;
}

.content1 p {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: whitesmoke;
    font-size: 150px;
    font-weight: bolder;
    letter-spacing: 5px;
    opacity: 0.9;
    transition: 0.5s;
    padding: 250px 50px 250px 50px;
}
.content1 p:hover {
    letter-spacing: 6px;
    opacity: 1;
} 

.info1 h1 {
    text-align: center;
    text-decoration: none;
    color: whitesmoke;
    font-size: 15px;
    font-weight: lighter;
    letter-spacing: 1px;
    padding: 50px 35px 50px 35px;
    opacity: 0.8;
    transition: 0.5s;
}
.info1 h1:hover {
    letter-spacing: 2px;
    opacity: 1;
}
.info1 h2 {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: whitesmoke;
    font-size: 10px;
    font-weight: lighter;
    padding: 50px 35px 50px 35px;
}

.button p {
    background-color: whitesmoke; 
    border: none;
    position: relative;
    color: black;
    font-size: 40px;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 20px;
    padding: 20px 40px 20px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 15px;
    opacity: 0.8;
    transition: 0.5s;
}
.button a:hover {
    letter-spacing: 33px;
    opacity: 1;
}

.content2 {
    background: url(media/bg7.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 30px;
    opacity: 0.8;
    transition: 0.5s;
}
.content2:hover {
    opacity: 1;
}

.content2 p {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: whitesmoke;
    font-size: 80px;
    font-weight: bolder;
    letter-spacing: 5px;
    opacity: 0.9;
    transition: 0.5s;
    padding: 250px 50px 250px 50px;
}
.content2 p:hover {
    letter-spacing: 6px;
    opacity: 1;
}

.info2 h1 {
    color: whitesmoke;
    font-size: 40px;
    font-weight: lighter;
    text-transform: uppercase;
    letter-spacing: 5px;
    opacity: 0.8;
    transition: 0.5s;
}
.info2 h1:hover {
    letter-spacing: 6px;
    opacity: 1;
}
.info2 h2 {
    text-align: center;
    text-decoration: none;
    color: whitesmoke;
    font-size: 15px;
    font-weight: lighter;
    letter-spacing: 1px;
    padding: 50px 35px 50px 35px;
    opacity: 0.8;
    transition: 0.5s;
}
.info2 h3 {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: whitesmoke;
    font-size: 10px;
    font-weight: lighter;
}
.info2 h4 {
    color: whitesmoke;
    font-weight: lighter;
    opacity: 0.8;
}

.content3 {
    background: url(media/bg8.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 30px;
    opacity: 0.8;
    transition: 0.5s;
}
.content3:hover {
    opacity: 1;
}

.content3 p {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: whitesmoke;
    font-size: 80px;
    font-weight: bolder;
    letter-spacing: 5px;
    opacity: 0.9;
    transition: 0.5s;
    padding: 250px 50px 250px 50px;
}
.content3 p:hover {
    letter-spacing: 6px;
    opacity: 1;
}

.count h1 {
    color: whitesmoke;
    font-size: 10px;
    font-weight: lighter;
    opacity: 0.5;
}

.protocol1 {
    padding: 200px 100px;
}
.protocol1 h1 {
    color: whitesmoke;
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 30px;
}
.protocol1 h2 {
    color: whitesmoke;
    font-size: 20px;
    font-weight: lighter;
}

}






























/** TABLET **/
@media screen and (min-width: 481px) {
    
    body {
        text-align: center;
        background-color: black;
    }
    
    .logo {
        background-color: black;
        padding-top: 30px;
    }
    .logo a {
        text-align: center;
        text-decoration: none;
        color: whitesmoke;
        font-size: 60px;
        letter-spacing: 5px;
        opacity: 0.8;
        transition: 0.5s;
    }
    
    .links {
        background-color: black;
        padding-top: 30px;
    }
    .links a {
        text-align: center;
        text-decoration: none;
        text-transform: lowercase;
        color: whitesmoke;
        font-size: 20px;
        letter-spacing: 1px;
        opacity: 0.8;
        transition: 0.5s;
        padding: 30px;
    }
    .protocol1 h2  a {
        color: white;
    }

    main {
        background-color: black;
        padding: 30px;
    }
    
    .content1 {
        background: url(media/bg6.jpg);
        background-position: center;
        background-size: cover;
        border-radius: 30px;
        opacity: 0.8;
        transition: 0.5s;
    }
    .content1 p {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: whitesmoke;
        font-size: 50px;
        font-weight: bolder;
        letter-spacing: 5px;
        opacity: 0.9;
        transition: 0.5s;
        padding: 250px 50px 250px 50px;
    }
    
    .info1 h1 {
        text-align: center;
        text-decoration: none;
        color: whitesmoke;
        font-size: 15px;
        font-weight: lighter;
        letter-spacing: 1px;
        opacity: 0.8;
        transition: 0.5s;
    }
    .info1 h2 {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: whitesmoke;
        font-size: 10px;
        font-weight: lighter;
    }
    
    .button a {
        background-color: whitesmoke; 
        border: none;
        color: black;
        font-size: 40px;
        font-weight: bolder;
        text-transform: uppercase;
        letter-spacing: 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        border-radius: 5px;
    }

    .content2 {
        background: url(media/bg7.jpg);
        background-position: center;
        background-size: cover;
        border-radius: 30px;
        opacity: 0.8;
        transition: 0.5s;
    } 
    .content2 p {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: whitesmoke;
        font-size: 50px;
        font-weight: bolder;
        letter-spacing: 5px;
        opacity: 0.9;
        transition: 0.5s;
        padding: 250px 50px 250px 50px;
    }
    
    .info2 h1 {
        color: whitesmoke;
        font-size: 40px;
        font-weight: lighter;
        text-transform: uppercase;
        letter-spacing: 5px;
        opacity: 0.8;
        transition: 0.5s;
    }
    .info2 h2 {
        text-align: center;
        text-decoration: none;
        color: whitesmoke;
        font-size: 15px;
        font-weight: lighter;
        letter-spacing: 1px;
        padding: 50px 35px 50px 35px;
        opacity: 0.8;
        transition: 0.5s;
    }
    .info2 h3 {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: whitesmoke;
        font-size: 10px;
        font-weight: lighter;
    }
    .info2 h4 {
        color: whitesmoke;
        font-weight: lighter;
        opacity: 0.8;
    }
    
    .content3 {
        background: url(media/bg8.jpg);
        background-position: center;
        background-size: cover;
        border-radius: 30px;
        opacity: 0.8;
        transition: 0.5s;
    }
    
    .content3 p {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: whitesmoke;
        font-size: 50px;
        font-weight: bolder;
        letter-spacing: 5px;
        opacity: 0.9;
        transition: 0.5s;
        padding: 250px 50px 250px 50px;
    }

    .protocol1 {
        padding-left: 10px;
        padding-right: 10px;
    }
    .protocol1 h1 {
        color: whitesmoke;
        text-transform: uppercase;
        font-weight: lighter;
        font-size: 30px;
    }
    .protocol1 h2 {
        color: whitesmoke;
        font-size: 20px;
        font-weight: lighter;
    }
}






/** SMARTPHONE **/
@media screen and (max-width: 480px) {

    body {
        text-align: center;
        background-color: black;
    }
    
    .logo {
        background-color: black;
        padding-top: 30px;
    }
    .logo a {
        text-align: center;
        text-decoration: none;
        color: whitesmoke;
        font-size: 30px;
        letter-spacing: 5px;
        opacity: 0.8;
        transition: 0.5s;
    }
    
    .links {
        background-color: black;
        padding-top: 30px;
    }
    .links a {
        text-align: center;
        text-decoration: none;
        text-transform: lowercase;
        color: whitesmoke;
        font-size: 15px;
        letter-spacing: 1px;
        opacity: 0.8;
        transition: 0.5s;
        padding: 10px;
    }
    .protocol1 h2  a {
        color: white;
    }
    
    main {
        background-color: black;
        padding-top: 50px;
    }
    
    .content1 {
        background: url(media/bg6.jpg);
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        opacity: 0.8;
        transition: 0.5s;;
    }
    .content1 p {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: whitesmoke;
        font-size: 20px;
        font-weight: bolder;
        letter-spacing: 5px;
        transition: 0.5s;
        padding: 25px 50px 25px 50px;
    }
    
    .info1 h1 {
        text-align: center;
        text-decoration: none;
        color: whitesmoke;
        font-size: 10px;
        font-weight: lighter;
        letter-spacing: 1px;
        padding: 50px 35px 50px 35px;

    }
    .info1 h2 {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: whitesmoke;
        font-size: 10px;
        font-weight: lighter;
        padding: 50px 35px 50px 35px;
    }
    
    .button a {
        background-color: whitesmoke; 
        border: none;
        color: black;
        font-size: 40px;
        font-weight: bolder;
        text-transform: uppercase;
        letter-spacing: 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        border-radius: 5px;
    }

    .botton a {
        text-align: center;
    }

    .content2 {
        background: url(media/bg7.jpg);
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        opacity: 0.8;
        transition: 0.5s;
    } 
    .content2 p {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: whitesmoke;
        font-size: 20px;
        font-weight: bolder;
        letter-spacing: 5px;
        transition: 0.5s;
        padding: 25px 50px 25px 50px;
    }
    
    .info2 h1 {
        color: whitesmoke;
        font-size: 40px;
        font-weight: lighter;
        text-transform: uppercase;
        letter-spacing: 5px;
        opacity: 0.8;
        transition: 0.5s;
    }
    .info2 h2 {
        text-align: center;
        text-decoration: none;
        color: whitesmoke;
        font-size: 15px;
        font-weight: lighter;
        letter-spacing: 1px;
        padding: 50px 35px 50px 35px;
        opacity: 0.8;
        transition: 0.5s;
    }
    .info2 h3 {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: whitesmoke;
        font-size: 10px;
        font-weight: lighter;
    }
    .info2 h4 {
        color: whitesmoke;
        font-weight: lighter;
        opacity: 0.8;
    }
    
    .content3 {
        background: url(media/bg8.jpg);
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        opacity: 0.8;
        transition: 0.5s;
    }
    
    .content3 p {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: whitesmoke;
        font-size: 20px;
        font-weight: bolder;
        letter-spacing: 5px;
        transition: 0.5s;
        padding: 25px 50px 25px 50px;
    }

    .wrapper {
        border-bottom: solid 30px black;
    }

    .wrapper2 {
        border-bottom: solid 80px black;
    }

    .protocol1 h1 {
        color: whitesmoke;
        text-transform: uppercase;
        font-weight: lighter;
        font-size: 25px;
    }
    .protocol1 h2 {
        color: whitesmoke;
        font-size: 15px;
        font-weight: lighter;
        text-align: left;
    }

}