@media only screen and (min-width: 0px) and (max-width: 1220px){

header div{
    width: 800px;
}
.slicknav_menu{
    display: table;
    background-color: transparent;
    border-bottom: none;
    position: absolute;
    right: 50px;
    top: 40px;
    z-index: 50;
}
.menu_slick{
    display: none;
}
.mainpage_img_section{
    width: 800px;
}
.mainpage_light_section{
    width: 800px;
}
.mainpage_light_section article figure{
    margin: 0 -70px 0 0;
}
.mainpage_light_section article h1{
    margin: 100px 50px 10px auto;
}
.mainpage_light_section article p{
    width: 450px;
}
.mainpage_dark_section{
    width: 800px;
}
.mainpage_dark_section figure {
    margin: 0 0 0 -110px;
}
.mainpage_dark_section p{
    width: 450px;
}
footer div{
    width: 800px;
}
footer div div.cnt_social{
    width: 560px;
}
.kontakt_btn{
    margin: 40px auto 0 80px;
}
.osnovna{
    width: 800px;
}
.osnovna article{
    width: 95%;
}
.osnovna article:nth-of-type(2) p:last-of-type iframe{
    width: 750px;
}
.main_services{
    width: 800px;
}
.product_container{
    width: 750px;
}
.basic_site_inner_content_contact{
    width: 800px;
}
.basic_site_inner_content_contact article{
    width: 300px;
    margin: 50px 20px 0 0;
}
.right_column_contact{
    width: 480px;
}
.contact_form div{
    width: 230px;
}
.contact_form dd textarea{
    width: 450px;
}
.basic_site_inner_content_contact p{
    font-size: 14px;
}
}
@media only screen and (min-width: 600px) and (max-width: 800px){
    
    header div{
        width: 600px;
    }
    .mainpage_img_section{
        width: 600px;
    }
    .mainpage_light_section{
        width: 600px;
    }
    .mainpage_light_section article figure{
        margin: 0 -100px 0 0;
    }
    .mainpage_light_section article h1{
        font-size: 22px;
    }
    .mainpage_dark_section figure {
        margin: 0 0 0 -180px;
    }
    .mainpage_light_section article p{
        width: 320px;
    }
    .mainpage_dark_section{
        width: 600px;
    }
    .mainpage_dark_section h1{
        padding: 0 0 0 10px;
        font-size: 22px;
    }
    .mainpage_dark_section p{
        width: 340px;
        padding: 0 0 0 10px;
    }
    .btn_b{
        margin: 20px 0 0 10px;
    }
    footer {
        width: 600px;
    }
    footer figure{
        margin: 10px;
    }
    footer div{
        width: 680px
    }
    footer div div.cnt_social{
        width: 680px;
    }
    .kontakt_btn{
        padding: 10px 30px;
        margin: 40px auto 0 50px;
    }
    footer .social .fa{
        font-size: 24px;
    }
    #toTop{
        bottom: 24px;
        right: 20px;
    }
    .osnovna{
        width: 600px;
        padding: 10px;
        box-sizing: border-box;
    }
    .osnovna article{
        width: 95%;
        margin: 0 auto;
    }
    .osnovna article:nth-of-type(2) p:last-of-type iframe{
        width: 550px;
        height: 400px;
    }
    .osnovna article h1{
        margin: 20px 10px 0 0;
    }
    .osnovna article em{
        margin: 20px 10px 20px 0;   
    }
    .osnovna article figure img{
        width: 200px;
    }
    .osnovna article p{
        display: block;
        font-size: 16px;
    }
    .gallery{
        width: 100%;
    }
    .main_services {
        width: 600px;
    }
    .detail_article p{
        display: block;
    }
    .product_container {
        box-sizing: border-box;
        width: 600px
    }
    .basic_site_inner_content_contact {
        width: 600px;
    }
    .basic_site_inner_content_contact article{
        float: none;
        margin: 0 auto 40px auto; 
        width: 100%;
    }
    .right_column_contact{
        float: none;
        margin: 0 auto;

    }
}
@media only screen and (min-width: 0px) and (max-width: 599px){
    
    header div{
        width: 100%;
    }
    header figure{
        margin: 16px 10px;
    }
    .mainpage_img_section{
        width: 100%;
    }
    .mainpage_light_section{
        padding: 20px 0;
        width: 100%;
    }
    .mainpage_light_section article figure{
        display: table;
        float: none; 
        margin: 0 auto;
    }
    .mainpage_light_section article figure img{
        clip-path: circle(60% at 50% 30%);
        width: 100%;
        height: auto;
    }
    .mainpage_light_section article h1 {
        display: table;
        margin: -40px auto 10px auto;
        text-align: center;
    }
    .mainpage_light_section article p{
        display: table;
        width: 95%;
        margin: 0 auto;
        text-align: center;
    }
    .btn{
        margin: 20px auto;
    }
    .mainpage_dark_section{
        width: 100%;
        padding: 20px 0;
    }
    .mainpage_dark_section figure{
        display: table;
        float: none;
        margin: 0 auto;
    }
    .mainpage_dark_section figure img{
        clip-path: circle(60% at 50% 30%);
        width: 100%;
        height: auto;
    }
    .mainpage_dark_section h1{
        display: table; 
        margin: 0 auto;
        width: 95%;
        padding: 0; 
        text-align: center;
    }
    .mainpage_dark_section p{
        display: table;
        margin: 0 auto;
        width: 95%;
        padding: 0;
        text-align: center;
    }
    .btn_b{
        margin: 20px auto;
    }
    footer{
        width: 100%;
    }
    footer figure{
        float: none;
        margin: 20px auto;
    }
    footer div{
        width: 100%;
    }
    footer div div.cnt_social{
    width: 100%;
  }
    .kontakt_btn{
        float: none;
        margin: 0 auto;
    }
    .social{
        float: none;
        margin: 20px auto;
    }
    .osnovna {
        width: 100%;
        padding: 0; 
    }
    .osnovna article{
        width: 95%;
        margin: 0 auto;
    }
    .osnovna article h1{
        margin: 20px auto;
        text-align: center; 
    }
    .osnovna article em{
        width: 95%;
        margin: 0 auto;
        text-align: center;
    }
    .osnovna article figure{
        width: 100%;
        float: none !important;
        margin: 20px auto;
    }
    .osnovna article figure img{
        width: 100%;
    }
    .osnovna article p{
        width: 95%;
        margin: 0 auto 20px auto;
        text-align: center;
        font-size: 16px;
    }
    .osnovna article:nth-of-type(2) p:last-of-type iframe{
        width: 90%;
        height: 200px;
    }
    .ecms_gallery_box .group{
        float: none; 
        margin: 10px auto;
    }
    .ecms_gallery_box .group img{
        width: 280px;
        height: 140px;
    }
    #toTop{
        right: 30px;
        bottom: 35px;
    }
    .main_services{
        width: 100%;
    }
    .main_services nav{
        float: none;
        margin: 20px auto;
        width: 95%;
    }
    .main_services nav ul{
        width: 95%;
    }
    .main_services nav ul li{
        width: 100%;
    }
    .product_container{
        width: 100%;
        padding: 0;
    }
    .detail_article h1{
        width: 100%;
        text-align: center;
    }
    .detail_article em{
        width: 95%;
        text-align: center;
    }
    .detail_article figure{
        display: table;
        float: none;
        width: 100%;
        margin: 0 auto;
    }
    .detail_article figure img{
        width: 100%;
    }
    .detail_article p{
        width: 95%;
        text-align: center;
        margin: 20px auto;
    }
    .basic_site_inner_content_contact{
        width: 100%;
        padding: 0; 
    }
    .basic_site_inner_content_contact article{
        display: table;
        margin: 0 auto;
        width: 95%;
        float: none;
    }
    .basic_site_inner_content_contact h1{
        text-align: center;
    }
    .basic_site_inner_content_contact em{
        display: table;
        width: 95%;
        text-align: center;
    }
    .basic_site_inner_content_contact p{
        display: table;
        width: 95%;
        text-align: center;
    }
    .right_column_contact{
        width: 100%;
        margin: 20px 0 0;
    }
    .contact_form dl{
        width: 95%;
        margin: 0 auto;
    }
    .contact_form div{
        display: table;
        width: 100%;
    }
    .contact_form dd textarea{
        width: 100%;
    }
    .contact_form div.consent_data dd, .consent_data dd{
        width: 90% !important;
    }
    .contact_form dd.buttons_action{
        margin: 0 auto !important;
        width: 70% !important;
    }
}