*{
        margin:0;
        padding:0;
    }
    .active{
        background-color: #fff;
    }
    .deep_background{
        display:flex;
        width:100%;
        z-index: -1000;
        position: fixed;
        top:0px;
    }
    .footer_btn_to_top{
        display: block;
        position: fixed;
        width:40px;
        height:40px;
        background: black;
        z-index: 1000;  
        right: 0px;
        bottom: 0px;
        margin: 0px 15px 15px 0px;
    }
    .footer_btn_to_top_arrow{
        position: absolute;
        text-align: center;
    }
    .footer_btn_to_top_arrow::before, .footer_btn_to_top_arrow::after{
        position: absolute;
        content:'';
        top:5px;
        left:10px;
        border-top: 10px transparent dashed;
        border-left: 10px transparent dashed;
        border-right: 10px transparent dashed;
        border-bottom: 10px #fff solid;
    }
    .footer_btn_to_top_arrow::before a, .footer_btn_to_top_arrow::after a{
        text-decoration: none;
    }
    .footer_btn_to_top_arrow::before{
        border-bottom: 10px #fff solid;
    }
    .footer_btn_to_top_arrow::after{
        top:7px;
        border-bottom:10px #000 solid;
    }
    #menu_control{
        position:absolute;
        z-index: -1;
        display: none;
    }
    .header{
        position: fixed;
        top: 0px;
        width: 100%;
        background: #fff0;
        z-index: 500;
        padding-top: 22px;
        padding-bottom: 0px;
    }

    .logo{
        background-image: url(images/2x/logo.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 130px;
        height: 62px;
        margin: 0px auto 0px;
        transform: translateZ(100px);
    }

    .menu_btn{
        width:50px;
        height:50px;
        position:fixed;
        top: 10px;
        right: 0;
    }
    .menu_btn_dots::before{
        content: "";
        border-radius: 50%;
        width:6px;
        height:6px;
        background:#868686;
        top:0;
        bottom:0;
        left:20px;
        margin: auto;
        position: absolute;
        box-shadow: 10px 0px 0px #868686,
                    -10px 0px 0px #868686;
    }
    .menu{
        width:100%;
        top:-300%;
        background: #fff0;
        position: absolute;
        transition: .5s;
        z-index: -1;
        text-transform:uppercase;
    }
    .menu li{
        list-style: none;
/*        height: 40px;*/
    }
    .menu li:hover{
/*
        list-style-type: "\25CF";
        font-size: 18px;
*/
        background-image: url(images/arrows/dot.png);
        background-repeat: no-repeat;
        background-size: 8px;
         background-position: left center;
    }
    .menu ul{
        background: #fff;
        padding: 0px 47px 0px;
    }
    .menu a{
        display:block;
        color:#868686;
        text-decoration: none;
        padding:5px 0px 5px 22px;
        border-bottom:0.5px solid #D8D8D8;
        font-size: 14px;
        font-family: Montserrat;
        letter-spacing: 1px;
    }
    .menu a:hover{
        color:black;
    }
    #menu_control:checked ~  .menu{
        top:69px;
    }
    .menu a:click ~ .menu{
        top: -250px;
    }
    .protfolio_menu a{
        color:black; 
    }
    .menu .protfolio_menu{
/*
        list-style-type: "\25CF";
        font-size: 18px;
*/
        background-image: url(images/arrows/dot.png);
        background-repeat: no-repeat;
        background-size: 8px;
        background-position: left center;
    }
@media screen and (min-width:1024px){
    .header{
        padding-bottom: 22px;
    }
}
@media screen and (min-width:768px) and (max-width:1023px){
    .footer_btn_to_top{      
        margin-left: 122vw;
        margin-top:124vh;   
    } 
    .menu{
        top: none;
    }
    .menu a:hover {
        color:#000000;       
        }
    .menu li:hover{
/*        list-style: disc;*/
        }
    .logo{
        width:127px;
    }
    .logo:hover{
        background-color: aquamarine;
    }
} 
@media screen and (min-width:1024px){
    .footer_btn_to_top{      
        margin-left: 93vw;
        margin-top:95vh;   
    }
 
    .menu_btn{
        right: 0px;
        margin-right: 20px;
    }
    .logo{
        width: 130px;
        height: 48px;
    }
    .menu_btn_dots::before{
        content: "";
        border-radius: 50%;
        width:6px;
        height:6px;
        background:#868686;
        top:0;
        bottom:0;
        left:20px;
        margin: auto;
        position: absolute;
        box-shadow: 10px 0px 0px #868686,
                    -10px 0px 0px #868686;
    }
    .menu{
        width:100%;
        top:-300%;
        background: #fff0;
        position: absolute;
        transition: .5s;
        z-index: -1;
        text-transform:uppercase;
    }
}

@media screen and (min-width:1440px){
    .header{
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .footer_btn_to_top{      
        margin-left: 86vw;
        margin-top:94vh;   
    }
    .deep_background{
        display:flex;
        width:100%;
        z-index: -1000;
        position: absolute;
    } 
    .menu_btn{
        display: none;
    }
/*from index3*/
    .logo{
        position: fixed;
        margin: 22px auto 0px 44px;
        width: 130px;
        height: 66px;
    }
    .menu{
        width:100%;
        height:30px;
        position: absolute;
        top:100px;
        transition: .5s;
        z-index: -1;
        text-transform:uppercase;
    }  
    .menu li{
/*        height: 35px;*/
        }

    .menu ul{
        background: #fff0;
        padding: 0px 53px 0px;
        position: fixed;
        top: 300px;
    }   
    .menu a{
        border-bottom: none;
    }
    .protfolio_menu a{
        color:black;
    }
    .menu .protfolio_menu{
/*
        list-style-type: "\25CF";
        font-size: 18px;
*/
        background-image: url(images/arrows/dot.png);
        background-repeat: no-repeat;
        background-size: 8px;
        background-position: left center;
    }
}
@media screen and (min-width:1920px){
    .top{
        width:160px;
    }
}