@media screen and (max-width: 1700px)
{
    #header div.inner{margin: 0 2%;}
}

@media screen and (max-width: 1200px)
{
    #header{height: 80px;}
    #header a.logo{display: none;}
    #header a.logo-mobile{display: block;}
}

@media screen and (max-width: 1180px)
{
    #content.inside{margin: 0 2%;}
    div.private-main{width: calc(100% - 290px)}
    
    form.filters{flex-wrap: wrap;}
    form.filters div.filter-name{width: 100%; margin-bottom: 15px;}
    form.filters div.filter-date{width: calc(100% - 260px)}
    form.filters input.autocomplete-input{width: 100%;}
}

@media screen and (max-width: 950px)
{
    form.filters #filter-date-from{margin-bottom: 10px;}
    div.materials div.left a{display: inline-block;}
}

@media screen and (max-width: 1050px)
{
    div.private-main div.top-section{width: 100%; flex-wrap: wrap;}
    div.private-main div.top-section > h1{font: 35px/35px "Calibri-Light"; width: 100%; margin-bottom: 12px;}
}

@media screen and (max-width: 850px)
{
    #header div.data a, #content div.private-menu{display: none;}
    #menu-button{display: block;}
    
    div.private-main{width: 100%;}
}

@media screen and (max-width: 580px)
{
    #header{margin-bottom: 20px;}
    h1{font: 35px/35px "Calibri-Light"; margin-bottom: 15px;}
    div.registration-block{border-radius: 0; margin-top: -20px; padding: 25px 4% 25px 4%; max-width: 100%;}
    div.registration-block form div.fields{flex-direction: column;}
    div.registration-block form div.field-name{height: 35px;}
    div.registration-block form input.form-text-input{width: 100%;}
    div.registration-block div.bottom{margin-left: 0; width: 100%;}
    div.registration-block div.form-buttons{margin-left: 0px; width: 100%; display: flex; justify-content: center;}
    
    div.private-main div.top-section > a{padding: 8px 11px 8px 32px; background-position: left 8px center;}
    
    div.materials > div{flex-wrap: wrap;}
    div.materials div.left{width: 100%; margin-bottom: 5px; padding: 0;}
    div.materials div.left a{display: block;}
    div.materials div.right{margin-left: 33px;}
    
    form.private div.fields{flex-direction: column;}
    form.private div.fields div.field-name{height: 35px; width: 100%;}
    form.private div.fields div.field-input{margin-bottom: 15px; width: 100%;}
    form.private div.fields div.field-input input[type="password"]{max-width: 100%;}
    form.private div.fields.two-passwords input[type="text"]{max-width: 100%;}
    form.private div.fields div.field-input span.eye{left: auto; right: 9px;}

    .form-errors, .form-success{margin-bottom: 12px;}
}

@media screen and (max-width: 500px)
{
    form.filters{margin-bottom: 18px; padding: 15px 2%;}
    form.filters div.filter-name, form.filters div.filter-date{width: 100%; margin-bottom: 10px;}
    form.filters div.filter-date{justify-content: space-between; display: flex; align-items: center;}
    form.filters #filter-date-from{margin-bottom: 0;}
    form.filters input.interval{width: calc(50% - 15px)}
    
    #custom-modal-window{width: 100%; left: 0; transform: none;}
    div.materials{margin-bottom: 25px;}
    div.pager{justify-content: center;}
    
    #content iframe.video{height: 350px !important;}
}