@font-face {
    font-family: 'FreeCheese'; /* Укажите имя для вашего шрифта */
    src: url('./pics/BelepotanRusItalic.otf') format('opentype'); /* Путь к файлу шрифта */
}
body
    {
        background-color: #000;margin: 0;padding: 0;color: #fff;font-family: 'Roboto Condensed', Tahoma, Arial;overflow: hidden;}

body:after{
    display:none; 
    content:url('pics/bg_2.jpg')url('pics/bg_1.jpg')url('pics/bg_3.jpg')
}

.links-block {
    max-width: 420px;
}
.links-block a {
    font-family: FreeCheese;
    display: block;
    margin: 60px 0;
    padding: 10px;
    color: #ffffff;
    background-color: #ff3530;
    font-size: 3em;
    text-decoration: none;
}
.links-block a:hover {
    -webkit-box-shadow: -5px 6px 31px -1px rgba(171, 34, 34, 0.41);
    -moz-box-shadow: -5px 6px 31px -1px rgba(171, 34, 34, 0.41);
    box-shadow: -5px 6px 31px -1px rgba(171, 34, 34, 0.41);
}
a
    {color: #fff;}
a:hover{
    font-weight: 400;
}
#wrapper{
    background-image: url('pics/bg_2.jpg');
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-attachment:fixed;
    overflow: hidden;
    background-position: left top;
}

@media (max-height: 600px){
    #wrapper{height: 760px;}
}
.content{
    width: 500px;
    position: absolute;
    top: 7%;
    left: 10%;
}
.logo{
    margin-bottom: 60px;
}
.soc-block{
    height: 51px;
}
.soc-block a{
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url('pics/social-icons.png');
    margin-right: 3px;
}
.soc-block a.youtube{
    background-position: 0 0;
}
.soc-block a.fb{
    background-position: -51px 0;
}
.soc-block a.vk{
    background-position: -101px 0;
}
.soc-block a.inst{
    background-position: -151px 0;
}
.soc-block a.tg{
    background-position: -457px 0;
}
.soc-block a.tt{
    background-position: -507px 0;
}
.soc-block a.dzen{
    background-position: -558px 0;
}
.soc-block a.itunes{
    background-position: -201px 0;
}
.soc-block a.google-play{
    background-position: -251px 0;
}
.soc-block a.ya-music{
    background-position: -301px 0;
}
.soc-block a.amazon{
    background-position: -351px 0;
}
.soc-block a.litres{
    background-position: -401px 0;
}
.contacts{
    font-size: 22px;
    font-weight: 300;
    margin: 30px 0 10px 0;
}

@-webkit-keyframes hvr-icon{
    10%{
        -webkit-transform: translateX(3px) rotate(2deg); 
        transform: translateX(3px) rotate(2deg);
    }
    20%{
        -webkit-transform: translateX(-3px) rotate(-2deg); 
        transform: translateX(-3px) rotate(-2deg);
    }
    30%{
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);}
    40%{
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    50%{
        -webkit-transform: translateX(2px) rotate(1deg); 
        transform: translateX(2px) rotate(1deg);
    }
    60%{
        -webkit-transform: translateX(-2px) rotate(-1deg); 
        transform: translateX(-2px) rotate(-1deg);
    }
    70%{
        -webkit-transform: translateX(2px) rotate(1deg); 
        transform: translateX(2px) rotate(1deg);
    }
    80%{
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    90%{
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }
    100%{
        -webkit-transform: translateX(-1px) rotate(0); 
        transform: translateX(-1px) rotate(0);
    }
}
@keyframes hvr-icon{
    10%{
        -webkit-transform: translateX(3px) rotate(2deg); 
        transform: translateX(3px) rotate(2deg);
    }
    20%{
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    30%{
        -webkit-transform: translateX(3px) rotate(2deg); 
        transform: translateX(3px) rotate(2deg);
    }
    40%{
        -webkit-transform: translateX(-3px) rotate(-2deg); 
        transform: translateX(-3px) rotate(-2deg);
    }
    50%{
        -webkit-transform: translateX(2px) rotate(1deg); 
        transform: translateX(2px) rotate(1deg);
    }
    60%{
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    70%{
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    80%{
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    90%{
        -webkit-transform: translateX(1px) rotate(0); 
        transform: translateX(1px) rotate(0);
    }
    100%{
        -webkit-transform: translateX(-1px) rotate(0); 
        transform: translateX(-1px) rotate(0);
    }
}
.soc-block a:hover, 
.soc-block a:focus, 
.soc-block a:active{
    -webkit-animation-name: hvr-icon; 
    animation-name: hvr-icon; 
    -webkit-animation-duration: 0.75s; 
    animation-duration: 0.75s; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
    -webkit-animation-iteration-count: 1; 
    animation-iteration-count: 1;
}
.loaderArea{
    background: #000; 
    overflow: hidden; 
    position: fixed; 
    left: 0; 
    top: 0; 
    right:0; 
    bottom:0; 
    z-index: 100000;
}
.loader{
    height: 40px; 
    width: 40px; 
    position: absolute; 
    left: 50%; 
    margin-left: -20px; 
    top: 50%; 
    margin-top: -20px;
}
.loader:before, 
.loader:after{
    content: ""; 
    height: 40px; 
    width: 40px; 
    border: 8px solid rgba(255, 255, 255, 0.5); 
    border-radius: 10px; 
    position: absolute; 
    top: 0;
}
.loader:before{
    -webkit-animation: animate 2s infinite linear; 
    animation: animate 2s infinite linear;
}
.loader:after{
    -webkit-animation: animate2 2s infinite linear; 
    animation: animate2 2s infinite linear;
}
@-webkit-keyframes animate{
    100%{
        -webkit-transform: rotate(180deg) skew(360deg); 
        transform: rotate(180deg) skew(360deg);
    }
}
@keyframes animate{
    100%{
        -webkit-transform: rotate(180deg) skew(360deg);
        transform: rotate(180deg) skew(360deg);
    }
}
@-webkit-keyframes animate2{
    100%{
        -webkit-transform: rotate(-180deg) skew(-360deg); 
        transform: rotate(-180deg) skew(-360deg);
    }
}
@keyframes animate2{
    100%{
        -webkit-transform: rotate(-180deg) skew(-360deg); 
        transform: rotate(-180deg) skew(-360deg);
    }
}
p{display: none;}