* {box-sizing: border-box; margin: 0; padding: 0;}
@font-face {
    font-family: Montserrat;
    src: url("family/Montserrat-Black.ttf");
    font-style: bold;
}
@font-face {
    font-family: Montserrat;
    src: url("family/Montserrat-Medium.ttf");
    font-style: normal;
}
@font-face {
    font-family: Rubik;
    src: url("family/Rubik-Black.ttf");
    font-style: bold;
}
@font-face {
    font-family: Rubik;
    src: url("family/Rubik-Regular.ttf");
    font-style: normal;
}
body {
    width: 100vw;
    background-color: #212121;
    color: #fff;
    font-family: Montserrat;
}
    .header {width: 100vw;}
        .header_nav {
            max-width: 80.5vw;
            margin: 3.25rem auto 1rem;
            display: flex;
            align-items: center;
        }
            .logo {
                width: 31.5rem;
                display: flex; 
                align-items: center;
            }
                .logo img {max-width: 20%; margin-right: 7%;}
                .logo h1 {font-size: 1.3rem; text-transform: uppercase;}
        .hiddNav {display: block;}
            .nav_ul {
                max-width: 37rem;
                display: flex;
                justify-content: end; 
                list-style-type: none; 
                font-size: 1.1rem;
                margin: auto;
            }
                .ul_item {margin: auto 1.1rem;}
                .ul_item:last-child {margin-right: 0;}
                .ul_item a {text-decoration: none; color: #fff;}
                .ul_item a:hover {color: #dade1eff;}
        .showMenu {display: none;}
    .sandwich { 
        display: none;
    }
        .b1 {
            width: 23px;
            height: 3px;
            background-color: #fff;
            margin: 5px;
        }
    .show_sertificate {
        display: none;
        position: fixed;
        width: 54vw;
        height: 40vw;
        top: 1vw;
        left: 15vw;
        background-color: #fff;
        z-index: 20;
    }
        .button_hidden {

            width: 2.5rem;
            height: 2.5rem;
            background-color: coral;
            border-radius: 20px;
            color: #fff;
            font-size: 2rem;
            text-align: center;
            margin:  1% 91%;
        }
        .button_hidden:hover {cursor: pointer; width: 2.6rem; height: 2.6rem;}
        .sert_image {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url("sertificates/sololearnHTML.png");
            margin: 1% auto;
        }
    .main {max-width: 80.5vw; margin: auto;}
            .greeting {display: flex; margin: 1.5rem auto;}
                .greet_photo {
                    max-width: 36.25rem; 
                    margin: 0 5rem 1rem 0;
                }
                .greet_content {margin: auto;}
                    .greet_content h2 {font-size: 2.75rem; margin-bottom: 1.5rem;}
                    .greet_content h3 {font-size: 1.39rem;}
                    .greet_content p {font-size: 1.1rem; max-width: 35rem; margin-bottom: 4rem;}
                    .greet_content p a{text-decoration: none; color: #fff; font-size: 1.5rem;}
                    .greet_content a:hover {color: #dade1eff;}
            .line {
                display: block;
                max-width: 80.5vw;
                height: 2px;
                background-color: #fff;
                margin: auto;
            }
            .portpholio {width: 100%;}
                .port_head {font-size: 3.125rem; margin: 3rem auto; font-family: Rubik;}
                .port_label {
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;
                    list-style-type: none;
                }
                    .label_item {margin: 1rem auto;}
                    .label_item a :hover {outline: 1px solid #dade1eff;}
                .portfo_butt {
                    display: block;
                    border: none;
                    width: 18rem;
                    height: 4rem;
                    border: 2px solid #fff;
                    background-color: #212121;
                    color: #fff;
                    font-size: 1.2rem;
                    margin: 2.5rem auto 4rem;
                    cursor: pointer;
                }
                .portfo_butt:hover {border: 2px solid #dade1eff; color: #dade1eff;}
            .services {
                width: 100%; 
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: 3rem auto 2rem;
            }
                .serv_head { font-size: 1.3rem; text-transform: uppercase; font-family: Rubik;}
                .serv_content {width: 32.7rem;}
                .serv_content_item {font-size: 1.1rem; margin: 0 auto 2.5rem;}
            .certificates, .reviews {width: 100%; margin: 3rem auto 2rem;}
                .rev_content {text-align: right;}
                    .rev_content_item img {width: 20vw;}
                    .rev_content_item img:hover {cursor: pointer; border: 2px solid #dade1eff;}
                .cert_head, .rev_head {
                    width: max-content;
                    font-size: 1.3rem; 
                    text-transform: uppercase; 
                    font-family: Rubik;
                    font-weight: 900;
                    margin: 0 auto 3rem;
                }
                .same {
                    width: 100%; 
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    margin: 3rem auto 2rem;
                    align-items: center;
                }
                    .same_head {width: 11rem; font-size: 1.3rem;}
                    .same_cont {font-size: 1.1rem; text-align: right;}
                        .same_cont p {margin-bottom: 1.5rem;}
                        .hr {height: 2px; background-color: #fff; color: #fff;}
                        .same_cont p:hover {color: #dade1eff; cursor: pointer; text-decoration: underline;}
    .footer {max-width: 100vw; margin: auto; background-color: #252525; padding: 1rem 0;}
        .footer_mail { width: 29.2rem; margin: auto; font-size: 2.875rem;}
            .footer_mail a {text-decoration: none; color: #fff;}
            .footer_mail a:hover {color: #dade1eff;}
        .footer_ul {
            display: flex;
            width: 20rem;
            list-style-type: none;
            margin: 3.7rem auto;
        }
            .footer_ul_item {margin: 0 2.5%;}
            .footer_ul_item a {text-decoration: none; color: #fff;}
                .foot_link:hover {width: 3.2rem; height: 3.2rem; background-size: 3.2rem;}
                .foot_link {
                    display: block;
                    width: 3rem;
                    height: 3rem;
                    background-repeat: no-repeat;
                    background-size: 3rem;
                    background-position: center;
                }
                .telegrem {background-image: url("svg/telegram.svg");}
                .whatsApp {background-image: url("svg/whatsApp.svg");}
                .skype {background-image: url("svg/skype.svg");}
                .ok {background-image: url("svg/Odnoklassniki.svg");}
                .vk {background-image: url("svg/VK.com.svg");}
                 .foot_link_text {
                    position:absolute;
                    width:1px;
                    height:1px;
                    clip:rect(1px,1px,1px,1px);
                 }
        .dizaine {width: 19.7rem; margin: 1rem auto; font-size: 1rem;}
                .dizaine a {text-decoration: none; color: #9e9b9b;}
                .dizaine a:hover {color: #dade1eff;}
        .button_top {position: fixed; right: 1.5rem; bottom: 3.5rem;}
                .but_top {
                    display: block;
                    width: 3rem;
                    height: 3rem;
                    background-image: url("svg/arrowTop.svg");
                    background-repeat: no-repeat;
                    background-size: 3rem;
                    background-position: center; 
                }
                .but_top:hover {width: 3.2rem; height: 3.2rem; background-size: 3.2rem;}

@media (max-width: 1300px) {
    .greet_content h2 {font-size: 2.4rem;}
}
@media (max-width: 1060px){
    .ul_item {margin: auto 0.5rem;}
    .logo h1 {font-size: 1.1rem;}
    .greet_content h2 {font-size: 2.1rem;}
    .greet_content p {font-size: 0.9rem;}
}
@media (max-width: 910px) {
    .hiddNav {display: none;}
    .nav_ulm {
        list-style-type: none;
        width: 12rem;
        background-color: #9e9b9b;
        position: fixed;
        top: 7.5rem;
        right: 2%;
        text-align: center;
        padding: 1rem 0;
        border-radius: 5px;
        font-size: 1.1rem;
    }
        .ul_item {margin: 1rem auto; font-size: 1.3rem;}
    .sandwich {display: block; position: absolute; right: 2%;}
        .sandwich:hover {outline: 1px solid #dade1eff;}
        .sandwich:hover .b1{background-color: #dade1eff; cursor: pointer;}
    .greeting {flex-wrap: wrap;}
        .greet_photo {margin: 1rem auto;}
            .greet_content h2 {font-size: 1.8rem; width: 90%; margin: 1rem auto; text-align: center;}
            .greet_content p {width: 90%; margin: 1rem auto; text-align: center;}
    .show_sertificate {width: 70vw; height: 56vw; left: 15vw;}
}
@media (max-width: 868px) {
    .main {max-width: 100vw;}
            .port_head{width: 18.2rem;}
        .services {width: 95vw; text-align: center;}
            .cert_head, .rev_head {width: 15rem; margin: auto;}
        .certificates, .reviews {width: 90%;}
}
@media (max-width: 730px) {
        .serv_head {width: 9rem; margin: 0 auto 1rem;}
        .serv_content {width: 90vw; margin: auto;}
    }
@media(max-width: 677px) {
    .same_head {margin: 0 auto 2rem;}
    .same_cont {margin: auto; text-align: center;}
    .footer_mail {font-size: 1.8rem; width: 18.5rem;}
    .show_sertificate {width: 100vw; height: 80vw; left: 0vw;}
}
@media (max-width: 440px) {
    .logo h1 {font-size: 0.9rem;}
}