@media only screen (max-width:1170px)
{
    .container { width: 100%; }
}

@media only screen and (min-width: 1024px) and (max-width:1170px)
{
    .container { width: 100%; }
    
    .btn-up-page { display: none; }
    
    .box-person .picture { width: 35%; height: auto; }
    .box-person .text { width: 65%; height: auto; }
    
    .article-box {}

    #realization { padding-left: 30px; padding-right: 30px; }
}

@media only screen and (min-width: 768px) and (max-width:1023px)
{
    body { padding-top: 0px; }
    .container { width: 100%; }

    header { height: auto !important; position: static !important; }
    .box-contact { text-align: center;  }
    .box-contact-menu { width: 100%; padding: 0px;}
    header.affix .box-logo a img { width: 140px; }
    header.affix .box-wb a img { width: 140px; }
    .box-logo a img { position: static; width: 140px; }
    .box-wb a img { position: static; width: 140px; }
    header.affix .box-contact { display: block; }
    header.affix .menu { padding-top: 15px; }
     header.affix .box-logo { padding: 15px 0; }
     header.affix .box-wb { padding: 15px 0; }
    
    .section-page.bg-start { background-position: 55% top;}

    .flex-container {
        flex-direction: column;
    }

    #head { padding-top: 60px; padding-bottom: 60px; }
     .section-page { padding-top: 60px; margin-top: 0;padding-bottom: 60px; }
    .section-page:last-of-type { padding-bottom: 60px; }

    .box-info { position: relative; left: auto; bottom: auto; margin-top: 25px; float: left; }

    .menu { width: 100%; padding-top: 15px; padding-bottom: 15px; }
    .menu .navbar-horizontal .navbar-nav { float: none; margin: auto; display: table;}
    
    .article-box {}
    
    .btn-up-page { display: none; }

    .heading-special { font-size: 30px; margin-top: 0px;  }
    .heading-menu { padding-top: 8px;}

    #head .max-btn { width: 100%; }
    #head .max-btn .btn { margin-top: 15px; }

    #realization { padding-left: 30px; padding-right: 30px; }

}

@media only screen and (min-width: 480px) and (max-width:767px)
{
    .article .article-date { width: 100%; float: none; text-align: left; display: block; }
    .article .article-main-image { width: 50%; }
    .article .article-gallery-list .photo-item { width: 33.33333333%; }
    .article .article-text-content { float: none; width: 100%; }
    
    .article .article-main-image.format-2 { padding: 0 15px; }
    .article .article-main-image.format-3 { padding: 0 15px; }
    .article .article-main-image-page { padding: 0 15px 0 0; width: 40%; }
    
    .article-box {}
    
    .album .album-item { width: 50%; }
    
    .nav-tabs { border-bottom: 0px }
    .nav-tabs > li { width: 50%; margin-left: 0px !important;}
    .nav-tabs > li > a { border:1px solid #f4f4f4; border-radius: 8px; }
    .nav-tabs .nav-link {border:1px solid #f4f4f4; border-radius: 8px; }
    
}

@media only screen and (min-width: 320px) and (max-width:479px)
{    
    .article .article-date { width: 100%; float: none; text-align: left; display: block; }
    
    .form-content .form-recaptcha { float: none; display: table; margin: auto; width: auto; }
    .form-content .alert-bottom { text-align: center; margin-top: 20px; }
    .form-content .submit-bottom { text-align: center; margin-top: 20px;  }
    
    .article .article-main-image.format-2 { padding: 0 15px; }
    .article .article-main-image.format-3 { padding: 0 15px; }
    .article .article-main-image-page { padding: 0 15px; }
    
    .article-box {}
    
    .nav-tabs { border-bottom: 0px }
    .nav-tabs > li { width: 100%; margin-left: 0px !important;}
    .nav-tabs > li > a { border:1px solid #f4f4f4; border-radius: 8px; }
    .nav-tabs .nav-link {border:1px solid #f4f4f4; border-radius: 8px; }
    
    .cart-process-buttons-fv { width: 100%; margin:10px 0; }
    .cart-process-buttons-adress { width: 100%; margin:10px 0; }
     
    .modal:before { display: block; height: auto; vertical-align: top; }
    .modal-dialog { display: block; vertical-align: top; }

    .neptun-gallery { flex-wrap: wrap; }
    .neptun-gallery .item { width: 100%; margin-bottom: 30px }
    .neptun-gallery .item:last-of-type { margin-bottom: 0; }
}

/*----------------------------------------------/
    [1] Menu - Navbar-horizontal or 1023 if 768 to 1023 slide menu
-----------------------------------------------*/
@media only screen and (max-width: 767px)
{
    body { padding-top: 0px; }
    .container { width: 100%; }
    
    header { height: auto !important; position: static !important; }
    .box-contact { display: none; }
    .box-contact-menu { width: 100%; padding: 0px;}
    header.affix .box-logo a img { width: 160px; }
    header.affix .box-wb a img { width: 160px; }
     .box-logo a img { width: 160px; position: static; }
     .box-wb a img { width: 160px; position: static; margin-left: 15px; }

    .flex-container {
        flex-direction: column;
    }

   #head { padding-top: 60px; padding-bottom: 60px; }
   
    .section-page { padding-top: 60px; margin-top: 0;padding-bottom: 60px; }
    .section-page:last-of-type { padding-bottom: 60px; }
    
    .bg-xs {  }
    
    .bg-max { margin-top: -60px; position: relative; margin-left: -100%; width: 300%; max-width: none; }

    .box-info { position: relative; left: auto; bottom: auto; margin-top: 25px; float: left; }
    
    .menu { position: static; padding-top: 0px }
    .menu .navbar-horizontal .navbar-header { cursor: pointer; text-transform: uppercase; border-top:1px solid #ccc; }
    .menu .navbar-horizontal .navbar-brand  { display: inline; padding-left: 0;}
    .menu .navbar-horizontal .navbar-toggle { border: 0px; margin: 7px 0px 7px 0; padding-right: 0px; }
    .menu .navbar-horizontal .navbar-toggle:hover { background: none; }
    .menu .navbar-horizontal .navbar-toggle:focus { background: none; }
    .menu .navbar-horizontal .navbar-collapse { border:0px; box-shadow: none; }
    .menu .navbar-horizontal .navbar-nav { margin: 0px; float: left; width: 100%; padding-bottom: 15px; }
    .menu .navbar-horizontal .navbar-nav > li { margin-left: 0px; }
    .menu .navbar-horizontal .navbar-nav > li > a { padding: 5px 0; }
    .menu .navbar-horizontal .dropdown { width: 100%; }
    .menu .navbar-horizontal .dropdown-menu { padding: 0 0 20px 0; }
    .menu .navbar-horizontal .dropdown-menu > li > a { padding: 10px 15px 10px 30px; }
    .menu .navbar-horizontal .navbar-nav .open  .dropdown-menu > li > a {  }
    .menu .navbar-horizontal .navbar-nav .open  .dropdown-menu > li > a:hover {  }
    .menu .navbar-horizontal .navbar-nav .open  .dropdown-menu > li > a:focus {  }
    .menu .navbar-horizontal .navbar-nav .open  .dropdown-menu > li.active > a {  }
    .menu .navbar-horizontal .navbar-nav .open  .dropdown-menu > li.active > a:hover {  }
    .menu .navbar-horizontal .navbar-nav .open  .dropdown-menu > li.active > a:focus {  }
    
    .dropdown-menu.multi-column { min-width: 240px !important; overflow-x: hidden; }
    
    .btn-up-page { display: none; }
    
    .cart-process-buttons { display: table; margin: auto; float: none; }
    .cart-process-buttons-left { text-align: center; float: none; display: table-footer-group; }
    .cart-process-buttons-left .btn { margin-top: 20px;}
    .cart-process-buttons-right { text-align: center; float: none; display: table-header-group; }
    
    .left-sidebar { width: 100%; }
    .center-sidebar { width: 100%; }
    .right-sidebar { width: 100%; }
    .center-sidebar-mini { width: 100%; }
    .center-sidebar-micro { width: 100%; }

    #realization { padding-left: 30px; padding-right: 30px; }
    
    .section-page.bg-start { background: #ececec; overflow: hidden; }

    #head .btn { margin-top: 15px; }
    #section-1 .col-xs-12 { margin-bottom: 30px; }

    .heading-special { font-size: 24px; margin-top: 0px;  }
    .heading-menu { display: none; }

    .box-copyright { text-align: center; }
    .box-counter { margin-left: 0; display:block; margin-top: 5px; }
    .box-powered { text-align: center; margin-top: 5px; }

    .section-cookie .button { margin-top: 15px; }
    
    .box .box-title { margin-bottom: 40px; }
}

@media only screen and (min-width: 480px) and (max-width:767px)
{
   .max-btn { width: 50%; }
}

@media only screen and (min-width: 320px) and (max-width:479px)
{
   .max-btn { width: 50%; }
}

/*----------------------------------------------/
    [2] INPUTS
-----------------------------------------------*/
@media only screen and (max-width: 1024px)
{
    input[type="checkbox"], input[type="radio"] { margin-top: 2px; }
}

@media only screen and (min-width: 320px) and (max-width:639px)
{    
    .account .account-shipping .tabs-left  { width: 100%; }
    .account .account-shipping .tabs-left > li > a.active { border-color: #ddd #ddd #ddd #ddd;}
    .account .account-shipping .tabs-left > li > a:hover { border-color: #ddd #ddd #ddd #ddd;}
    .account .account-shipping .tab-content-left { padding: 15px;border: 1px solid #e2e2e2; }
}