/**********************************************************

RESPONSIVE

***********************************************************/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .container {width: 960px;}
    #mainnav .navigation li a {margin: 0 16px;}
    #box-ads .box-inner {padding: 0 115px 0 32px;}
    #box-ads .box-inner.box-ze { padding-right: 104px;}
    
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .container {width: 700px;}
    #header-wrap {min-height: 381px;}
    #mainnav .navigation {height: 30px;}
    #mainnav .navigation ul li {line-height: 29px;}
    #mainnav .navigation li a {font-size: 14px; margin: 0 6px;}
    #box-ads .box-inner {padding: 0 32px 0 32px;}
    #box-ads .box-inner.box-ze { padding-right: 26px;}
    #foottop-inner > .box-col5 {width: 100%;}
    #foottop-inner > .box-col5:last-child {margin-bottom: 0;}
    
    #senatbox img {display:none;}
    #senatbox #senatcontent {float:none;width:100%;display:block;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .container {width: 100%;}
    body.subpage #main .container {padding:0 30px;box-sizing:border-box;}    
    #header-wrap {min-height: 311px;}
    .cc-slogan {margin-left: 30px;}
    #cc-btn-navbar {display: block; cursor: pointer;}
    #main {padding: 0px 0 30px;}
    #mainnav {display: none;}
    #mainnav .navigation {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#545454+0,2e2e2e+50,010101+100 */
        background: #545454; /* Old browsers */
        background: -moz-linear-gradient(top,  #545454 0%, #2e2e2e 50%, #010101 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#545454), color-stop(50%,#2e2e2e), color-stop(100%,#010101)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #545454 0%,#2e2e2e 50%,#010101 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #545454 0%,#2e2e2e 50%,#010101 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #545454 0%,#2e2e2e 50%,#010101 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #545454 0%,#2e2e2e 50%,#010101 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#010101',GradientType=0 ); /* IE6-9 */
        height: auto;
        border-radius: 0;
    }
    #mainnav .navigation ul li {display: block; line-height: 39px;}
    #mainnav .navigation li a {font-size: 16px; margin: 0 8px;}
    #box-description .box-col4,#box-description .box-col8 {width: 100%; margin: 0;}
    #box-description .box-col8 {margin-bottom: 10px;}
    #box-ads .box-three {margin: 0 0 0px; width: 100%; float: none;}
    #box-ads .box-three:last-child {margin-bottom: 0;}
    #box-ads .box-inner {padding-left: 30px;}
    .box-col4 .box-inner, .box-col8 .box-inner, #foottop-inner > .box-col5 > .box-inner {padding: 0 30px;}
    .section-inner .box-four {width: 43%; margin: 0 0px 20px 5%;}
    #footer #footbtm #foot-texpro {margin-right: 30px;}
    #footer #footbtm #foot-copy {padding: 35px 0 30px 35px; line-height: 14px;}
    
    #senatbox {border-right:none;border-left:none;}
    #senatbox a {font-size:22px;padding-left:130px;background-position:-30px 0 !important;}
    
    #zdravaskola .inner {padding-left:30px;padding-right:30px;padding-bottom:30px;width:100%;float:none;box-sizing:border-box;}
}

@media only screen and (max-width : 568px) {
    #header-wrap > .container {background-image: url(../images/sutu.png); background-position: right top;}
    #main-logo {margin-left: 30px; margin-bottom: 20px; width: 350px; background-size: contain;}
    #sub-logo {margin-left: 30px; margin-bottom: 15px; float: none;}
    .cc-slogan {margin-top: 0; float: none;}
    #section-bottom .section-inner {overflow: hidden;}
    
    #senatbox a {display:block;width:100%;margin:5px 0;float:none;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
    .section-inner .box-four {width: 100%; margin: 0 0px 20px 0;}
    .section-inner .box-four .box-inner {padding: 0 30px; text-align: center;}
    .cc-slogan {margin-bottom: 20px; float: none;}
    .box-col5, .box-col4, .box-col8, .box-three, .box-four {width: 100%; margin: 0;}
    #footer #footbtm #foot-copy {
        padding: 20px 0 30px 35px;
        line-height: 14px;
    }
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    #cc-btn-navbar {top: 291px;}
    #main-logo {margin-left: 30px; margin-bottom: 20px; width: 265px; background-size: contain;}
    
}