/*Обнуление*/
 * {
     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: #eb651d;*/
    background-color: #000;
}
.wrapper {
    position: relative;
    width: 100%;
    min-width: 100vw;
    height: 100%;
    min-height: 100vh;
    /*background-color: #fe5000;*/
    /*background: linear-gradient(135deg, rgba(235, 101, 29, 1) 0%, rgba(230, 95, 32, 1) 51%, rgba(200, 64, 49, 1) 70%, rgba(199, 63, 50, 1) 100%);*/
    /*background: url(../img/fone.jpg?v=2025.12.001) 50% 50% / cover no-repeat;*/
    overflow: hidden;
}

.content_wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}

.content{
    position: absolute;
    width: 100vw;
    height: 177.78vw;
}

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


.fone{
    position: absolute;
    width: 292.69%;
    height: 51.09%;
    left: -96.3%;
    top: 0%;
    background: url(../img/fone_v3.jpg?v=2025.12.001) 50% 50%/100% no-repeat;
}

.square{
    position: absolute;
    width: 94.07%;
    height: 100%;
    left: 3.06%;
    top: 47.4%;
    background-color: #fe5000;
}

.banner{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.header-text{
    position: absolute;
    width: 58.43%;
    height: 10.89%;
    left: 6.94%;
    top: 49.84%;
}

.text_h {
    display: none;
}

.header-text img,
.telegram img,
.tel img{
    width: 100%;
}

.logo,
.telegram,
.tel{
    position: absolute;
}


.telegram{
    width: 34.63%;
    height: 2.45%;
    left: 6.39%;
    top: 67.19%;
}

.tel{
    width: 39.35%;
    height: 2.45%;
    left: 6.39%;
    top: 73%;
}

.logo{
    position: absolute;
    width: 29.72%;
    height: 10.43%;
    left: 67.41%;
    bottom: 2%;
    background: url(../img/logo.svg?v=2025.12.001) 0/100% no-repeat;
}

.circle {
    pointer-events: none;
}

.circles,
.main-player{
    position: absolute;
    width: 16.2%;
    height: 9.11%;
    left: 71.94%;
    top: 62.6%;
}

.circle-container {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s;
}

.circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
    opacity: 0.2;
}

/*
.circle:nth-child(1) { transform: scale(1.24); }
.circle:nth-child(2) { transform: scale(1.59); }
.circle:nth-child(3) { transform: scale(2.27); }
.circle:nth-child(4) { transform: scale(3.12); }
*/

.circle-container.fly{
    opacity: 1;
}
.fly > .circle {
    animation: pulse 4s infinite ease-out;
    transform: scale(0);
}

.circle:nth-child(1) { animation-delay: 0s; }
.circle:nth-child(2) { animation-delay: 1.06s; }
.circle:nth-child(3) { animation-delay: 2.12s; }
.circle:nth-child(4) { animation-delay: 3.2s; }

@keyframes pulse {
    0% {
        transform: scale(0);
        opacity: 0.2;
    }
    100% {
        transform: scale(6);
        opacity: 0.1;
    }
}

.player{
    height: 100%;
}

.player img{
    width: 100%;
}


#ivastop.player {
    opacity: 1;
}

#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.8;
    }
    100%{
        opacity: 1;
    }
}

@media(orientation: :portrait){
    .content{
        left: 50%;
        margin-right: -50%;
        transform: translateX(-50%);
    }
}


/*Экран уже чем отношение когда x=1080 y=1920*/
@media (orientation: portrait) and (max-aspect-ratio: 1080/1920) {
    /*.content{
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }*/
}


/*Экран уже чем отношение когда x=1080 y=1448*/
@media (orientation: portrait) and (min-aspect-ratio: 1080/1920) and (max-aspect-ratio: 1080/1448) {
    .content{
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
}

/*Экран уже чем отношение когда x=1080 y=1080*/
@media (orientation: portrait) and (min-aspect-ratio: 1080/1448){
    .content{
        height: 100vw;
        width: 100vw;
        top: 0;
        left: 50%;
        margin-right: -50%;
        transform: translateX(-50%);
    }

    .fone{
        width: 260.83%;
        height: 81.02%;
        left: -80.28%;1
        top: -5.65%;
    }

    .square{
        width: 93.52%;
        height: 100%;
        left: 3.24%;
        top: 62.59%;
    }

    .header-text{
        width: 53.06%;
        height: 16.76%;
        left: 6.67%;
        top: 65.83%;
    }

    .main-player,
    .circles{
        width: 17.31%;
        height: 17.31%;
        left: 71.3%;
        top: 60.19%;
    }

    .telegram{
        width: 26.76%;
        height: 3.33%;
        left: 6.48%;
        top: 94.35%;
    }

    .tel{
        width: 30.19%;
        height: 3.43%;
        left: 63.43%;
        top: 94.26%;
    }
}


@media (orientation: landscape){
    .content{
        width: 100vw;
        height: 56.25vw;
        right: 0;
        top: 50%;
        margin-right: 0;
        transform: translate(0, -50%);
    }

    .fone{
        width: 187.4%;
        height: 103.33%;
        left: -43.65%;
        top: -17.22%;
    }

    .square{
        width: 94.79%;
        height: 100%;
        left: 2.71%;
        top: 69.81%;
    }

    .text_p {
        display: none;
    }

    .text_h {
        display: block;
    }

    .header-text{
        width: 47.97%;
        height: 11.85%;
        left: 4.95%;
        top: 74.26%;
    }

    .telegram{
        width: 15%;
        height: 3.43%;
        left: 5.05%;
        top: 93.06%;
    }

    .tel{
        width: 17.03%;
        height: 3.33%;
        left: 35.94%;
        top: 93.06%;
    }

    .logo{
        width: 19.94%;
        height: 13.89%;
        left: 34.87%;
        bottom: 3.33%;
    }

    .circles,
    .main-player{
        width: 15%;
        height: 26.67%;
        left: 75.52%;
        top: 60.56%;
    }
}



/*Экран уже чем x=1610 y=1080 (orientation: landscape) and */
/*@media (orientation: landscape) and (max-aspect-ratio: 1610/1080) {*/
@media (orientation: landscape) and (max-aspect-ratio: 1080/818){
    .fone{
        width: 235vw;
        height: 77.73vw;
        left: -68vw;
        top: -24vw;
    }
}


/*Экран шире чем отношение когда x=1920 y=1080*/
@media (orientation: landscape) and (min-aspect-ratio: 1920/1080) {
    .content{
        width: 177.78vh;
        height: 100vh;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .square{
        width: 94.79vw;
        height: 100%;
        top: 69.81%;
        left: 50%;
        margin-right: -50%;
        transform: translateX(-50%);
    }

}