body {
        background-image: url(kartinki/seriyphon.jpg);
        background-size: cover;
        display: flex;
        justify-content: center;
    }
    .container {
        width: 1120px;
        background-color: #c3c3c3;
    }

    /* HEADER */
    header {
        background-image: url(kartinki/back_header.png);
        display: flex;
        justify-content: space-around;
    }
    
    .burger{
        border: 2px solid black;
        border-radius: 5px;
        margin: auto;
        display: none;
        background-color: grey;
        width: 55px;
        height:55px;
    }
    .polosa {
        width: 52px;
        height: 5px;
        display: block;
        margin: auto;
        margin-top: 10px;
        background-color: black;
        border-radius: 10px;
    }
    .logo {
        background-color: grey; 
        display: flex;
        justify-content: space-around;
        align-items: center;
        width:30%;
        height: 150px;
        margin: auto;
        margin-top: 40px;
    }
    .logo img {
        height:100%;
    }
    .logo.text {
        text-align: center;
    }
    .logo p{
        font-family: 'Inter';
        font-weight: 800;
        font-size: 24px;
    }

    nav {
        width: 60%;
        /* margin:auto; */
        margin-top: 80px;
    }
    nav ul {
        
        display: flex;
        justify-content: space-between;

    }
    nav li {display: flex;
        justify-content: center;
        background-color: grey;
        width: 150px;
        height: 90px;
    }
    nav a {
        width: 50%;
        height: 100%;
    }
    nav a img{
        width: 100%;
        height:100%;
    }

    button img{
        height:100%;
    }
    button {
        background-color: grey;
        width:100%;
        cursor: pointer;
    }
    #search_text {
        width: 80%;
    }
    #myFancySEARCH {
        display: none;

    }
    #myFancySEARCH button {
        margin-top: 15px;
    }
    
    #myFancyTEMS{
        display: none;
        
    }
    #myFancyTEMS button {
        margin-top: 10px;
    }

    #myFancyIST {
        display: none;
    }
    /*  */

    /* MAIN */
    .h1 {
        background-color: black;
        height: 82px;
        margin-top: 20px;
    }
    .helpik {
        height: 27%;
    }
    h1{
        text-align: center;
        font-family: 'Inter';
        font-weight: 800;
        font-size: 32px;
        color: white;
        margin: auto;
    }

    main .maintext {
        padding: 10px;
    }
    
    main .maintext p{
        text-indent: 25px;
        width: auto;
        font-family: 'Inter';
    }

    main video {
        margin: auto;
        width:100%;
    }

    #controls {
        display: block;
        text-align: center;
        justify-content: space-between;
    }
    #currentTime{
        width: 72%;
    }

    #volumeControl {
        width: 17%;
    }

    .barContainer #volume {
        transform: scale(-1, 1);
        color: white;
    }

    #controls button {
        width: 15%;
    }
    #positionBar {
        height: 30px;
        color: white;
        font-weight: bold;
        
        text-align: center;
     }
     .barContainer {
        display: flex;
        align-items: center;
     }

    .video_bar {
        position: relative;
    }

    .barContainer {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        width: 100%;
        bottom: 10px;
    }

     #positionBar span {
        display: inline-block;
        margin-top: 5px;
     }
     
     #durationBar {
        margin-left: 5px;
        width: 5%;
     }
    main img {
        width: 100%;
    }

    .videoandaudio p{
        margin: 0;
        margin-bottom: 10px;
        text-align: center;
        font-weight: 800;
    }
    .otziv {
        width: 100%;
        background-color: darkgray;
        border-radius: 10px;
    }
    .otziv h2{
        text-align: center;
        font-family: "inter";
    }
    #otziv {
        width: 98%;
    }
    footer{
        margin-top: 25px;
        background-color: darkgray;
        display: flex;
        justify-content: space-between;
    }
    footer a {
        margin: auto;
        text-align: end;
        width: 10%;
    }

    footer p{
        margin: auto;
        height: 100%;
    }
    .nomerstr {
        text-align: center;
        font-family: 'Inter';
        font-weight: 800;
        font-size: 16px;
    }

@media(max-width:1120px) {
    header{
        height: 190px;
    }
    .logo{
        width:336px;
        margin: 0;
        margin-top:40px;
    }
    .burger {
        display: block;
        margin-right: 10px;
    }

    .MENU{
        width: 100%;    
        margin: 0;
        margin-top: 200px;
        position: absolute;
        float: right;
    }

    nav ul {
        float: right;
        z-index: 10;
        display: flex;
        flex-direction: column;
    }

    .container {
        width: 100%;
    }
    
}

@media(max-width:700px){
    #currentTime{
        width:50%;
        margin-left:15px;
    }
}

@media(max-width:520px){
    .prava {
        display: none;
    }


}
@media(max-width:400px) {
    .text{
        display: none;
    }
    .logo {
        width: 150px;
    }
}

@media(max-width: 296px){
    .h1 {
        height: 100%;
    }
}