/*Обнуление*/
 * {
     padding: 0;
     margin: 0;
     border: 0;
}
 *, *:before, *:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 :focus, :active {
     outline: none;
}
 a:focus, a:active {
     outline: none;
}
 nav, footer, header, aside {
     display: block;
}
 html, body {
     height: 100%;
     width: 100%;
     font-size: 100%;
     line-height: 1;
     font-size: 14px;
     -ms-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
}
 input, button, textarea {
     font-family: inherit;
}
 input::-ms-clear {
     display: none;
}
 button {
     cursor: pointer;
}
 button::-moz-focus-inner {
     padding: 0;
     border: 0;
}
 a, a:visited {
     text-decoration: none;
}
 a:hover {
     text-decoration: none;
}
 ul li {
     list-style: none;
}
 img {
     vertical-align: top;
}
 h1, h2, h3, h4, h5, h6 {
     font-size: inherit;
     font-weight: 400;
}
/*--------------------*/


body {
    background-color: #fefaf2;
}
.wrapper {
    position: relative;
    width: 100%;
    min-width: 100vw;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom, #248ee6 50%, #ffffff 50%);
}

.content_wrapper{
    background-color: #248ee6;
}

.content{
    position: absolute;
    background-color: #248ee6;
}
.content_wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}

.content_container{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fone,
.corner,
.logo,
.title,
.telegram,
.tel{
    position: absolute;
}

.fone{
    width: 135.93%;
    height: 83.54%;
    right: -10.28%;
    top: 18.59%;
    background: url(../img/fone.jpg?v=2026.03.001) 50% 50%/100% no-repeat;
}

/*.fone{
    width: 393.89%;
    height: 201.51%;
    right: -197.22%;
    top: -55.31%;
    background: url(../img/fone_2.jpg?v=2026.03.001) 50% 50%/100% no-repeat;
}*/
.corner{
    width: 164.07%;
    height: 398.44%;
    left: -98.7%;
    top: -206.15%;
    background: url(../img/corner_p.svg?v=2026.03.001) 50% 50%/100% no-repeat;
    /*filter: drop-shadow( 5.09vw 5.095vw 5.09vw rgba(255, 255, 255, .3));*/
}
.title{
    width: 64.26%;
    height: 17.86%;
    left: 10.09%;
    top: 13.44%;
}


.landscape {
    display: none;
}

.logo img,
.title img,
.telegram img,
.tel img{
    width: 100%;
}



.logo_wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}
.logo{
    width: 16.48%;
    height: 6.15%;
    left: 78.24%;
    top: 2.92%;
}

.telegram{
/*    width: 28.24%;
    height: 2.55%;
    left: 66.48%;
    top: 90.47%;
    */
    width: 42.87%;
    height: 3.91%;
    left: 51.85%;
    top: 83.65%;
}

.tel{
    /*width: 27.22%;
    height: 2.66%;
    left: 66.48%;
    top: 94.22%;
    */
    width: 42.87%;
    height: 4.22%;
    left: 51.85%;
    top: 89.17%;
}

.main-player{
    position: absolute;
    width: 23.61%;
    height: 13.28%;
    left: 13.7%;
    top: 39.48%;
}

.player{
    height: 100%;
    width: 100%;
    position: absolute;
}

.player img{
    height: 100%;
    width: 100%;
}



/*

.fly-block{
    opacity: 0;
    pointer-events: none;
}


.fly{
    animation-duration: .3s;
    animation-name: fly-out;
    animation-iteration-count: 1;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@keyframes fly-out {
    0% {
        opacity: 0.5;
        width: 100%;
    }
    100% {
        top: -50%;
        width: 300%;
        opacity: 0;
    }
}
*/

.fly-block{
    pointer-events: none;
}

.fly{
    animation: rotate 7s linear infinite;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#ivastop.player {
    /*opacity: 0.4;*/
}

#ivaplay{
    -webkit-animation: play_pulse 2s  linear infinite;
            animation: play_pulse 2s  linear infinite;
}
@-webkit-keyframes play_pulse{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}
@keyframes play_pulse{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}

@media(orientation: portrait) {
    .content{
        width: 100vw;
        height: 177.8vw;
        left: 50%;
        margin-right: -50%;
        transform: translateX(-50%);
        /*background: url(../img/car.png?v=2025.12.001) 0/100% no-repeat;*/
    }
}

@media (orientation: landscape), (aspect-ratio: 1/1) {
    .wrapper {
        height: 100%;
        min-height: 100vh;
        /*background: #0e1316;*/
    }

    .landscape {
        display: block;
    }
    .portrait {
        display: none;
    }

    .fone{
        width: 89.74%;
        height: 174.35%;
        right: -3.7%;
        top: -67.41%;
        background: url(../img/fone.jpg?v=2026.03.001) 50% 50%/100% no-repeat;
    }
    /*.fone{
        width: 260.42%;
        height: 421.11%;
        right: -123.49%;
        top: -222.69%;
    }*/

    .corner{
        width: 125.16%;
        height: 700.83%;
        left: -74.22%;
        top: -287.96%;
        background: url(../img/corner_l.svg?v=2025.12.001) 50% 50%/100% no-repeat;
        /*filter: drop-shadow( 3.3vh 3.3vh 3.3vh rgba(255, 255, 255, .3));*/
    }
    .title{
        width: 30.36%;
        height: 26.67%;
        left: 5.36%;
        top: 9.81%;
    }

    .logo{
        width: 11.51%;
        height: 13.52%;
        left: 83.96%;
        top: 3.89%;
    }

    .telegram{
        width: 18.02%;
        height: 5.09%;
        left: 2.86%;
        top: 81.3%;
    }

    .tel{
        width: 17.34%;
        height: 3.97%;
        left: 2.86%;
        top: 88.89%;
    }

    .main-player{
        width: 13.28%;
        height: 23.61%;
        left: 12.45%;
        top: 45.56%;
    }

}


/* Уже 1080/1920 */
@media (max-aspect-ratio: 1080/1920) {
    .content{
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
    /*.fone{
        width: 135.93%;
        height: 83.54%;
        right: -10.28%;
        top: 18.59%;
    }*/
    .fone{
        width: 135.93%;
        height: 83.54%;
        top: auto;
        bottom: calc(50% - 50vh);
    }
}


/* Между 1080/1920 и 1/1 */
@media (min-aspect-ratio: 1080/1920) and (max-aspect-ratio: 1/1) {
    .wrapper {
        height: 100%;
        min-height: 100vh;
    }
    .content_wrapper{
        background-color: #248ee6;
    }
    .content{
        width: 56.25vh;
        height: 100vh;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
    .fone{
        right: calc(50% - 50vw);
    }
}


/* Между 1/1 и 1920/1080 */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 1919/1080) {
    .content{
        width: 100vw;
        height: 56.25vw;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
    .fone{
        top: auto;
        bottom: calc(50% - 50vh);
    }
}

/*@media (orientation: landscape) and (max-aspect-ratio: 1920/1080){
    .content{
        width: 177.78vh;
        height: 100vh;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
}*/

/* Шире 16/9 */
@media (min-aspect-ratio: 1920/1080) {
    .wrapper {
        height: 100%;
        min-height: 100vh;
        background: #dd3022;
    }
    .content{
        width: 177.78vh;
        height: 100vh;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
}