@import url(reset.css);
/*@import url('https://fonts.googleapis.com/css2?family=Andika&display=swap'); 'Andika', sans-serif*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&display=swap');'Merriweather', serif;*/
/*@import url('https://fonts.googleapis.com/css2?family=Bellota+Text:wght@400;700&display=swap');'Bellota Text', cursive;*/
/*@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500;700;800;900&display=swap');'Alegreya Sans', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap');

html {
}

body {
    background: url(img/bcg.jpg);
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}

main,
footer {
    margin: 0 auto;
    max-width: 65vh;
}

a {
    color: #000;
}

main {
}
/*
footer {
    position: absolute;
    bottom: 0;
    width: 100vw;
}
*/
#contact {
    font-size: 2.5vh;
    color: #555555;
}

#contact p {
    padding-bottom: 0.5vh;
}
#contact a {
    color: #555555;
}

#of_site,
#contact,
.social_block,
.badge_block {
    margin: 0 4vh;
}

h1 {
    font-family: 'Ubuntu', sans-serif; 
    font-size: 4.2vh;
    /*margin: 0 0 0 4vh;*/
    font-weight: 300;
    text-align: center;
    color: #aaa;
    letter-spacing: 0.5vh;
    padding-top: 22vh;
}

#of_site {
    font-size: 2.5vh;
    padding-left: .5vh;
    font-weight: 300;
    text-align: center;
    color: #c6c6c6;
    letter-spacing: 0.3vh;
}

#of_site,
#contact {
    font-family: 'Ubuntu', sans-serif;
}

#contact {
    text-shadow: 0 0 3px #c9c4b9;
    font-weight: 400;
    text-align: center;
    margin-top: 0.4vh;
}


#preloader {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.social_block {
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    padding-top: 43vh;
    
}

.social_icon {
    width: 5vh;
    height: 5vh;
    margin-right: 1.5vh;
    background-size: cover;
}

#vkontakte {
    background-image: url(img/icon_vk.png); 
}

#vkontakte:hover {
    background-image: url(img/icon_vk_hover.png);
}

#instagram {
    background-image: url(img/icon_insta.png);
}

#instagram:hover {
    background-image: url(img/icon_insta_hover.png);
}

#ok {
    background-image: url(img/icon_ok.png); 
}

#ok:hover {
    background-image: url(img/icon_ok_hover.png);
}

#youtube {
    background-image: url(img/icon_youtube.png);
}

#youtube:hover {
    background-image: url(img/icon_youtube_hover.png);
}

#fb {
    background-image: url(img/icon_f.png); 
}

#fb:hover {
    background-image: url(img/icon_f_hover.png);
}


.badge_block {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

.badge_icon {
    height: 5vh;
    width: 18vh;
    background-size: cover;
    margin: 2vh 0;
}

.badge_icon_link {
    width: 18vh;
}

#spotify {
    background-image: url(img/badge_spotify_nn.png)
}

#spotify:hover {
    background-image: url(img/badge_spotify_n_h.png)
}

#itunce {
    background-image: url(img/badge_itunce_nn.png)
}

#itunce:hover {
    background-image: url(img/badge_itunce_n_h.png)
}

#yandex {
    background-image: url(img/badge_yandex_nn.png)
}

#yandex:hover {
    background-image: url(img/badge_yandex_n_h.png)
}

/* Large desktops and laptops */
@media only screen and (min-width: 1200px) {
    
}

/* Portrait tablets and medium desktops */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    
}

@media only screen and (min-width: 992px) and (max-width: 1199px) and (orientation:landscape)  {
   /* h1 {
        font-size: 7.9vh;
        margin: 0 0 0 4vh;
    }*/
}

/* Portrait tablets and small desktops */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    /*
    h1 {
        font-size: 9.6vw;
    }*/
}

@media only screen and (min-width: 768px) and (max-width: 991px) and (orientation:landscape) {
/*
    h1 {
        font-size: 7.9vh;
        margin: 0 0 0 4vh;
    }*/
}

@media only screen and (max-width: 767px) {
/*
    h1 {
        font-size: 9.6vw;
    }*/
}

@media only screen and (max-width: 767px) and (orientation:landscape) {
/*
    h1 {
        font-size: 7.9vh;
        margin: 0 0 0 4vh;
    }*/
}


/* Landscape phones and smaller */
@media only screen and (max-width: 480px) and (orientation : portrait) {
    /*
    main {
        background-image: url(img/bcg.jpg);
        width: 100vw;
        height: 130vw;
    }

    #of_site,
    .social_block,
    .badge_block {
        margin: 0 6vw;
    }
    */
    h1 {
        font-size: 6vw;
    }
    
    #of_site {
        font-size: 3.7vw;
    }
    /*
    #of_site {
        padding-top: 6vw;
        padding-left: 1vw;
        padding-bottom: 1.5vw;
    }
    */
    .social_block {
        padding-top: 41vh;
    }
    /*
    
    .social_icon {
        width: 7vw;
        height: 7vw;
        margin: 0;
        margin-right: 3vw;
    }
    
    .badge_block {
        flex-flow: column;
    }
    */
    .badge_icon {
        margin: 10px 0;
        height: 7vw;
        width: 25.2vw;
        
    }
    
    .badge_icon_link {
        width: 25.2vw;
    }
    
    
    
    #spotify {
        width: 25.2vw;
    }
    
    #itunce {
        width: 25.2vw;
    }
    
    #yandex {
        width: 25.2vw;
    }
    

    
}

@media only screen and (max-width: 480px) and (orientation:landscape) {
}