/*==========  Desktop First Method  ==========*/


        /* Large Devices, Wide Screens */

        @media only screen and (max-width: 1599px) {}

        @media only screen and (max-width: 1200px) {
            section.information .fon {
                display: none;
            }
            .modal_form {
                top: 12% !important;
                left: 26%;
            }
            .main_footer .spisok li {
                padding-right: 5%;
            }
            .plus18 {
                margin-top: -13%;
                width: 90%;
            }
            .main_footer .soc li {
                margin-top: 2.7%;
            }
            .video_pobeda_one{
                width: 152% !important;
            }
            .game h2 {
                font-size: 24px;
            }
            .sky_game {
                right: 13%;
                top: 23%;
            }
            .text_game-1 {
                top: 30%;
                right: 26%;
            }
            .text_game-2 {
                top: 29%;
                font-size: 20px;
                right: 24%;
            }
            .text_game-3 {
                top: 30%;
                right: 22%;
            }
            .game {
                text-align: center;
            }
            #answer {
                margin-top: -12.3%;
                margin-left: 6%;
            }
            #question {
                left: 18%;
            }
        }


        /* Medium Devices, Desktops */

        @media only screen and (max-width: 992px) {
            .information .news {
                margin-top: 0;
            }
            .first .video_pobeda {
                margin-top: 2em;
            }
            .modal_form {
                top: 13% !important;
                left: 25%;
            }
            .main_footer .spisok {
                margin-top: -1.7%;
            }
            .main_footer .spisok li {
                padding-right: 3%;
                margin-top: 4.5%;
            }
            .main_footer .soc li {
                margin-top: 4.7%;
                padding-right: 10%;
            }
            .soc {
                margin: 0;
            }
            .bg_game {
                width: 100%;
            }
            .bg_inner {
                width: 86%;
                margin-top: -48%;
                margin-left: -2%;
            }
            #answer {
                margin-top: -17.5%;
            }
        }


        /* Small Devices, Tablets */

        @media only screen and (max-width: 768px) {
            .carousel-indicators {
                display: none;
            }
            .modal_form {
                top: 10% !important;
                left: 20%;
            }
            .main_footer .soc li {
                padding-right: 5%;
                margin-top: 7.7%;
            }
            .main_footer .logo img {
                margin-top: -15%;
                margin-left: 60%;
            }
            .main_footer .logo img {
                width: 28%;
            }
            .main_footer .spisok li {
                font-size: 11px;
            }
            .plus18 {
                width: 70%;
            }
            .main_footer .soc li {
                margin-top: 5.7%;
            }
            .lower {
                width: 100%;
            }
        }


        /* Extra Small Devices, Phones */

        @media only screen
        and (min-device-width : 320px) 
        and (max-device-width : 480px) {
            .modal_form {
                top: 15% !important;
                left: -6% !important;
            }
            .modal_form {
                width: 400px !important;
            }
            .modal_form p {
                font-size: 14px !important;
            }
            .lower {
                width: 100% !important;
            }
            .carousel-inner .item img {
                width: 200% !important;
                margin-left: -50% !important;
            }
            .img-top-romb {
                position: relative !important;
                width: 125% !important;
                margin-top: -48% !important;
                margin-left: 6% !important;
            }
            .img-logo {
                margin-top: -132% !important;
                margin-left: 63% !important;
                width: 50% !important;
            }
            .big_device {
                display: none !important;
            }
            .small_device {
                display: block !important;
            }
            .plus18 {
                width: 7% !important;
            }
            .viezd, .viezd:hover {
                left: 30% !important;
            }
            .viezd {
                width: 48% !important;
            }
            .info-panel {
                padding-top: 1% !important;
            }
            .partners ul {
                text-align: center !important;
            }
            .partners ul li {
                margin-right: 10% !important;
            }
            .spravka {
                margin-left: 16% !important;
            }
            .fg-gray {
                padding-bottom: 0 !important;
            }
            .text_vhod {
                padding-left: 2% !important;
            }
            .text_vhod .btn-circle.btn-lg {
                margin-top: 7% !important;
                margin-right: 3% !important;
            }
            .modal_form #modal_close {
                right: 6% !important;
            }
            .video_pobeda_one{
                width: 110% !important;
                height: 17em !important;
            }
            .bg_game {
                width: 115% !important;
                margin-left: -20px !important;
            }
            .bg_inner {
                width: 100% !important;
                margin-top: -56% !important;
                margin-left: 0% !important;
            }
            #question {
                position: absolute !important;
                top: -4% !important;
                text-align: center !important;
                left: 12% !important;
                width: 75% !important;
            }
            #question h2 {
                font-size: 14px !important;
                margin-top: 13px !important;
            }
            #answer {
                position: relative !important;
                margin-top: -21.5% !important;
                margin-left: -3% !important;
            }
            .silka {
                left: 33% !important;
                margin-top: 35% !important;
                font-size: 14px !important;
            }
            .silka a{
                font-weight: 600 !important;
            }
            .btn-answer {
                background-image: url(../img/game/button_mob.png) !important;
                width: 100px !important;
                height: 20px !important;
                margin: 6px !important;
                color: white !important;
                padding: 3px !important;
                font-size: 12px !important;
            }
            #answer {
                margin-top: -18.5% !important;
                margin-left: 9% !important;
            }
            #question {
                top: 17% !important;
            }
            .man_game, .oblacko {
                display: none !important;
            }
            .ava-vk{
                display: none !important;
            }
            .vk{
                padding: 0 !important;
            }
            .avatar{
                width: 100% !important;
            }
            .avatar img.user-ava {
                width: 43% !important;
                height: 120px !important;
            }
            img.edit {
                width: 10% !important;
                margin-top: 4% !important;
                margin-left: 47% !important;
            }
            p.personal {
                color: #7b0046 !important;
                font-weight: 600 !important;
                top: 0;
                margin-top: 5% !important;
                font-size: 17px !important;
                margin-left: 20% !important;
                line-height: 14px !important;
            }
            ul.ul-rewards li {
                width: 55% !important;
            }
            .rewards {
                margin-left: 0 !important;
            }
            .main-box ul.ul-rewards {
                width: 75% !important;
            }
            img.personal-area-gos,
            img.main-box-gos {
                position: relative !important;
                left: 11% !important;
                width: 77% !important;
            }
            img.main-box-gos{
                left: -11% !important;
            }
            #countdown_dashboard{
                position: relative !important;
                margin-left: 11% !important;
            }
            #countdown_dashboard {
                margin-left: 15% !important;
            }
            .dash_title {
                position: absolute !important;
                display: block !important;
                bottom: 0px !important;
                right: 10% !important;
                font-size: 8px !important;
                color: #555 !important;
                text-transform: uppercase !important;
                letter-spacing: 2px !important;
            }
            #countdown_dashboard {
                margin-left: 15% !important;
                position: absolute !important;
            }
            .dash_title {
                bottom: -4px !important;
                font-size: 7px !important;
            }
            .dash .digit{
                font-size: 22px !important;
                width: 19px !important;
            }
            img.bg_game1 {
                width: 100% !important;
            }
            div#question1 h2{
                width: 75% !important;
                margin-top: 12% !important;
                font-size: 14px !important;
            }
            div#answer1 {
                margin-top: 24.3% !important;
            }
            div.game1 a.btn-answer {
                background-image: url(../img/game/button_mob.png) !important;
                width: 100px !important;
                height: 20px !important;
                margin: 6px !important;
                color: white !important;
                padding: 3px !important;
                font-size: 12px !important;
            }
            div.game1 div#answer1 {
                width: 100% !important;
            }
            div.static ul.list-static {
                margin-top: 80px;
                margin-left: 20px;
            }
            div.bye{
                width: 315px;
                height: 315px;
            }
            div.bye p {
                width: 212px;
                margin-left: 50px;
                font-size: 14px;
                margin-top: 65px;
                line-height: 13px;
            }
        }
        @media only screen
        and (min-device-width : 375px) 
        and (max-device-width : 413px) {
            .avatar img.user-ava {
                width: 44% !important;
                height: 148px !important;
            }
            div.static ul.list-static {
                margin-top: 25%;
                margin-left: 7%;
            }
        }
        @media only screen
        and (min-device-width : 414px) 
        and (max-device-width : 736px) {
            .avatar img.user-ava {
                width: 45% !important;
                height: 162px !important;
            }
            div.static ul.list-static {
                font-size: 22px;
                margin-top: 27%;
                margin-left: 7%;
            }
        }

        /* iPads (landscape) ----------- */
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
        and (orientation : landscape) {
            #question {
                top: 10%;
            }
            .bg_game {
                width: 100%;
            }
            .bg_inner {
                width: 87%;
                margin-top: -46%;
                margin-left: -3%;
            }
            #question {
                top: 30%;
                left: 10%;
                width: 75%;
            }
            #question h2{
                font-size: 26px;
            }
            #answer {
                margin-top: -14.5%;
            }
            .stack {
                width: 190px;
                height: 142px;
            }
            .stack img {
                width: 100%;
            }
            .silka {
                left: 70%;
                margin-top: 17%;
            }
            .silka a{
                font-weight: 600;
            }
            .man_game, .oblacko {
                display: none;
            }
            .vk {
                padding: 4%;
                padding-left: 13%;
            }        
            #countdown_dashboard {
                top: 65%;
                margin-left: 22%;
            }   
            .avatar img.user-ava {
                width: 42% !important;
                height: 90px !important;
            }
        }

        /* iPads (portrait) ----------- */
        @media only screen
        and (min-device-width : 768px) 
        and (max-device-width : 1024px) 
        and (orientation : portrait) {
            .spravka {
                margin-left: 17% !important;
            }
            .fg-gray {
                padding-bottom: 3% !important;
            }
            .text_vhod {
                padding-left: 0 !important;
            }
            .text_vhod .btn-circle.btn-lg {
                margin-top: 7% !important;
                margin-right: 3% !important;
            }
            .modal_form {
                top: 18% !important;
                left: 19%;
            }
            .with-shadow.css3-shadow {
                margin-bottom: 16%;
            }
            .video_pobeda_one{
                width: 239% !important;
                height: 30em;
            }
            #question {
                top: 10%;
            }
            .bg_game {
                width: 100%;
            }
            .bg_inner {
                width: 87%;
                margin-top: -46%;
                margin-left: -3%;
            }
            #question {
                top: 25%;
                left: 10%;
                width: 75%;
            }
            #question h2{
                font-size: 26px;
            }
            #answer {
                margin-top: -15.5%;
            }
            .stack {
                margin: 50px 35px 0 55px;
            }
            .silka {
                left: 65%;
                margin-top: 16%;
            }
            .man_game, .oblacko {
                display: none;
            }
            .vk{
                padding: 20% !important;
            }        
            #countdown_dashboard {
                top: 61%;
                margin-left: 15%;
            }
            .dash .digit {
                width: 52px;
            }
            img.bg_game1 {
                width: 100%;
            }
            div#question1 h2{
                width: 75%;
                margin-top: 12%;
            }
            div#answer1 {
                margin-top: 24.3%;
            }
            .avatar img.user-ava {
                width: 42% !important;
                height: 60px !important;
            }
            div.static ul.list-static {
                position: absolute;
                list-style: none;
                margin-top: 24% !important;
                margin-left: 16% !important;
                font-size: 9px;
                padding: 0;
            }
        }
        /* Custom, iPhone Retina */

        @media only screen and (max-width: 320px) {
            .modal_form {
                top: -10% !important;
                left: 10%;
            }
            .modal_form {
                width: 400px;
            }
            .modal_form p {
                font-size: 14px;
            }
            .man_game, .oblacko {
               display: none;
           }

       }


       /*==========  Mobile First Method  ==========*/


       /* Custom, iPhone Retina */

       @media only screen and (min-width: 320px) {
        .carousel {
            width: 200%;
            left: -50%;
        }
        .img-top-romb {
            width: 130%;
        }        
        .img-logo {
            position: relative;
            z-index: 20;
            margin-top: -140%;
            margin-left: 41%;
            width: 75%;
        }
        .viezd {
            width: 70%;
            height: 52%;
            left: 27%;
        }
        .btn-answer {
            background-image: url(../img/game/button_mob.png);
        }
        .btn-answer:hover {
            background-image: url(../img/game/button_mob.png);
        }
        .btn-answer {
            width: 100px;
            height: 10px;
            line-height: 9px;
            font-size: 14px;
        }
        img.man_game,
        div.oblacko{
            display: none;
        }
        .game h2 {
            font-size: 11px;
            margin-top: 0;
        }
        .avatar {
            margin-left: 26%;
        }

        .avatar img.user-ava {
            width: 40%;
            height: 117px;
        }
        img.edit {
            width: 12% !important;
        }

        .personal-area{
            float: right;
        }
        div.bye{
            width: 315px;
            height: 315px;
        }
        div.bye p {
            width: 212px;
            margin-left: 50px;
            font-size: 14px;
            margin-top: 65px;
            line-height: 13px;
        }
    }
    @media only screen and (min-width: 360px){
        .avatar img.user-ava {
            width: 44%;
            height: 140px;
        }
        div.static ul.list-static {
            font-size: 19px;
        }
    }
    @media only screen and (min-width: 400px) {
        .avatar img.user-ava {
            width: 44%;
            height: 156px;
        }
        img.edit {
            margin-left: 68%;
        }
    }
    @media only screen and (min-width: 430px) {
      .avatar img.user-ava {
        width: 45%;
        height: 181px;
    }
}


/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {
    .viezd {
        width: 47%;
        height: 40%;
        left: 33%;
    }
    .game h2 {
        font-size: 18px;
    }
    .btn-answer {
        width: 100px;
        height: 10px;
        line-height: 9px;
        font-size: 16px;
    } 
    .avatar img.user-ava {
        width: 45%;
        height: 191px;
    }
    p.personal {
        margin-left: 8%;
    }
    p.personal {
        font-size: 23px;
        line-height: 22px;
    }
    img.edit {
        width: 12% !important;
        margin-left: 78%;
    }

    div.static ul.list-static {
        margin-top: 27%;
        margin-left: 8%;
        font-size: 25px;
    }
}
@media only screen and (min-width: 500px) {
    .avatar img.user-ava {
        height: 198px;
    }
}
@media only screen and (min-width: 550px) {
    .avatar img.user-ava {
        height: 227px;
    }
}
@media only screen and (min-width: 600px){
    .avatar img.user-ava {
        height: 247px;
    }
}
@media only screen and (min-width: 650px){
    .avatar img.user-ava {
        height: 273px;
    }
}
@media only screen and (min-width: 700px){
    .avatar img.user-ava {
        height: 290px;
    }
}
@media only screen and (min-width: 750px){
    .avatar img.user-ava {
        height: 318px;
    }
}
/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
    .carousel {
        width: 100%;
        left: 0;
    }
    .img-top-romb {
        width: 100%;
    } 
    .img-logo {
        position: relative;
        z-index: 20;
        margin-top: -91%;
        margin-left: 56%;
        width: 30%;
    }
    .viezd {
        width: 31%;
        height: 35%;
        left: 9%;
    }
    .btn-answer {
        background-image: url(../img/game/button.png);
        width: 175px;
        height: 43px;
        margin: 6px;
        color: white;
        padding: 9px;
        font-size: 22px;
    }
    .btn-answer:hover {
        background-image: url(../img/game/button_hover.png);
    }
    img.man_game,
    div.oblacko{
        display: block;
    }
    .game h2 {
        font-size: 24px;
        margin-top: 0;
    }
    p.personal {
        font-size: 15px;
        line-height: 13px;
    }
    .avatar img.user-ava {
        width: 42%;
        height: 66px;
    }
    p.personal {
        font-size: 12px;
        line-height: 10px;
    }
    .personal-area{
        float: none;
    }

    p.personal {
        margin-left: 24%;
    }
    div.static ul.list-static {
        margin-top: 21%;
        margin-left: -7%;
        font-size: 11px;
    }
    div.bye{
        width: 500px;
        height: 500px;
        margin-top: 7%;
    }
    div.bye p{
        width: 375px;
        margin-left: 63px;
        font-size: 20px;
        margin-top: 120px;
        line-height: 23px;
    }
}


/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {
    .game h2 {
        margin-top: 25px;
    }
    a.btn-answer{
        line-height: 21px;
    }
    .avatar img.user-ava {
        width: 42%;
        height: 88px;
    }
    img.edit {
        margin-left: 61%;
    }
    p.personal {
        font-size: 15px;
        line-height: 13px;
    }
    div.static ul.list-static {
        margin-top: 24%;
        margin-left: -2%;
        font-size: 14px;
    }
}


/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) {
    .avatar img.user-ava {
        width: 44%;
        height: 113px;
    }
    div.static ul.list-static {
        margin-top: 24%;
        margin-left: 2%;
        font-size: 16px;
    }
}

@media only screen and (min-width: 1600px) {}

@media only screen and (min-width: 1920px) {}

@media screen and (max-width: 767px) {
    .masonry[data-columns]::before {
        content: '1 .col-xs-12';
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .masonry[data-columns]::before {
        content: '1 .col-xs-12';
    }
}

@media screen and (min-width: 992px) {
    .masonry[data-columns]::before {
        content: '2 .col-xs-6';
    }