@media (max-width: 991px) {
    .navbar > .container > .search-item {
        display: none;
    }
    .ui-widget.ui-widget-content.ui-autocomplete {
        width: 280px !important;
    }

    .navbar-main  > .container,
    .header-title-wrap  > .container,
    .main-wrap > .section {
        width: 700px;
        margin-left: calc((100% - 700px) / 2);
        margin-right: calc((100% - 700px) / 2);
    }

}
@media (max-width: 768px) {
    #map {
        height: calc(100vh - 250px);
    }

    #home-mobile {
        display: block;
    }

    .lang-switch {
        float: left;
    }
}
@media (max-width: 767px) {
    .mobile-visible {
        display: inherit !important;
    }
    .mobile-invisible {
        display: none !important;
    }
    .navbar-header > .search-item {
        display: none;
    }
    .navbar-main .navbar-header {
        margin-bottom: 0;
    }
    .navbar-main .header-logo {
        margin-left: 15px;
    }
}
@media (max-width: 780px) {
    .card-label {
        display: block;
        margin-left: 0;
    }
    .home-navigation > ul li {
        padding: 10px 0;
    }
    .map-container#forecast-maps .map-header .map-controls button img {
        float: none;
    }
    .maps-container #snow_map,
    .maps-container #water_map,
    #forecast-maps .maps #balkan_map,
    #forecast-maps .maps #europe_map,
    #forecast-maps .maps #europe_near_map,
    #forecast-maps .maps #country_map {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
        height: 400px;
    }
    .navbar-main  > .container,
    .header-title-wrap  > .container,
    .main-wrap > .section {
        width: 650px;
        margin-left: calc((100% - 650px) / 2);
        margin-right: calc((100% - 650px) / 2);
    }

    .header-title-wrap.image {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .header-title-wrap.image .page-title {
        min-width: 134px;
    }
    .weather-container ul li:first-child {
        width: 134px !important;
    }
    .register-page .panel.panel-default, .login-page .panel.panel-default {
        padding: 0 110px;
    }
    .range-labels li {
        width: 46px;
    }
    .main-navigation > li > a {
        padding: 15px 4px;
        font-size: 13px;
    }
    .forecast-chart .chart-control {
        display: none;
    }
    .forecast-chart .container {
        width: 100%;
        left: 0;
    }
    .maps-container .map-details {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
    }

    .gesture-helper { display: block;}
}
@media (max-width: 680px) {
    .map-container .map-header .map-controls.right a#last {
        margin-left: 15px;
    }
    .map-container .map-header .map-controls.right a#play,
    .map-container .map-header .map-controls.right a#pause {
        margin-right: 15px;
    }
    .navbar-main  > .container,
    .header-title-wrap  > .container,
    .main-wrap > .section {
        width: 550px;
        margin-left: calc((100% - 550px) / 2);
        margin-right: calc((100% - 550px) / 2);
    }
    .header-title-wrap.image .page-title {
        min-width: 110px;
    }

    .weather-card .committee-info .details {
        width: 100%;
    }
    .weather-card .weather-conditions {
        width: 100%;
    }
    .weather-conditions > li {
        width: 183px;
        float: left;
    }
    .weather-container ul li,
    .weather-container ul li:first-child {
        width: 110px !important;
    }
    .register-page .panel.panel-default, .login-page .panel.panel-default {
        padding: 0 60px;
    }
    .range-labels {
        line-height: 1.5;
    }
    .range-labels li {
        width: 39px;
        font-size: 13px;
    }
    .page-header h2.page-title {
        margin: 15px 0;
    }
    .water-widget .widget-left {
        width: 100%;
        max-height: none;
    }
    .water-widget .widget-body {
        width: 100%;
        float: none;
    }
    footer .left-menu {
        width: 100%;
        text-align: center;
    }
    footer .menu {
        margin-right: 50px;
    }

    .map-container .map-header .map-controls.left {
        display: none;
    }
    .map-container .map-header .map-controls.right {
        float: none;
        width: 100%;
        text-align: left;
        margin-left: 0;
    }
    .map-container .map-header .map-controls.right a {
        width: 150px;
        padding: 0;
        line-height: 40px;
        margin-left: 0;
    }
    .map-container .map-header .map-controls.right a#pause,
    .map-container .map-header .map-controls.right a#play {
        float: right;
    }
    .map-container .map-header .map-controls.right .text {
        display: inline;
    }
    div#app {
        overflow: hidden;
    }
    .map-container .map-footer {
        width: 100%;
        margin-top: 0;
    }
    .map-container .map-header #time {
        display: none;
    }
    .map-container .map-footer .map-controls {
        display: block;
    }
    .radar-box div.table-vremenko.table-inline {
        margin-top: 0 !important;
    }
    .map-container .map-header .map-controls {
        float: none;
        margin-left: 0;
        text-align: center;
    }
    .map-container .map-header .map-controls a {
        /*background: #D8D4C8;*/
        /*padding: 5px 30px;*/
        /*line-height: 40px;*/
    }
    .map-container .map-footer .range,
    .map-container .map-footer .range-labels {
        display: none;
    }
    .map-container .map-controls {
        display: block;
    }
    .map-container .map-header .map-speed-controls {
        display: none;
    }
    .map-container .map-header {
        /*margin-bottom: 36px;*/
        /*border-bottom: 2px solid #336C9C;*/
        padding-bottom: 3px;
    }
    .map-container .map-header .map-speed-controls {
        width: 300px;
        bottom: -33px;
    }
    .map-container .map-header .map-speed-controls a {
        margin-left: 24px;
    }
    .map-container .map-header .map-speed-controls a:first-child {
        margin-left: 0;
    }

    .legend-vremenko.radar-legend {
        margin-top: 0 !important;
    }
    .legend-vremenko.radar-legend .color-badge {
        width: 30px;
    }
    .legend-vremenko.radar-legend table tr td:first-child {
        display: none;
    }
}
@media (max-width: 580px) {
    #ajax_window h2 {
        font-size: 14pt;
    }
    /*.radar-box div.table-vremenko table tr td,*/
    /*#ajax_window div.table-vremenko table tr td {*/
        /*font-size: 8pt;*/
    /*}*/
    #water_map .vremenko-gmarker #temp .unit {
        display: none;
    }
    #snow_map .vremenko-gmarker #temp,
    #water_map .vremenko-gmarker #temp,
    #water_map .water-label {
        font-size: 6pt;
    }
    #forecast-maps .map-location-marker {
        transform: scale(.8);
        bottom: 0;
    }
    #radar #napoved-radarske-slike {
        width: 450px;
        margin-left: calc((100% - 450px) / 2);
        margin-right: calc((100% - 450px) / 2);
    }
    #radar .main-wrap > .section.section-padding,
    #home .main-wrap > .section.section-padding {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
    .navbar-main  > .container,
    .header-title-wrap  > .container,
    .main-wrap > .section {
        width: 450px;
        margin-left: calc((100% - 450px) / 2);
        margin-right: calc((100% - 450px) / 2);
    }
    .header-title-wrap.image .page-title {
        min-width: 450px;
    }
    .weather-conditions > li {
        width: 150px;
    }
    .header-title-wrap.image .page-title {
        min-width: 300px;
        height: 90px;
        line-height: 110px;
        width: calc(100% + 80px);
        margin-left: -32px;
    }

    .weather-container ul li:first-child {
        width: 100% !important;
        height: 176px;
        padding: 15px 140px;
        margin-bottom: 15px;
    }
    .weather-container ul li {
        width: 112.5px !important;
    }

    .weather-container ul li:nth-child(2) {
        border-left: none;
    }
    .register-page .panel.panel-default, .login-page .panel.panel-default {
        padding: 0px;
    }

    div#app {
        overflow: hidden;
    }
    .map-container .map-footer {
        width: 100%;
        margin-top: 0;
        padding-left: 15px;
        padding-right: 15px;
    }
    .map-container .map-header #time {
        display: none;
    }
    .map-container .map-footer .map-controls {
        display: block;
    }
    .map-container .map-header .map-controls {
        float: none;
        margin-left: 0;
        text-align: center;
    }
    .map-container .map-header .map-controls a {
        /*background: #D8D4C8;*/
        padding: 5px 30px;
        line-height: 40px;
    }
    .maps-container .map-container .map-footer .range,
    .maps-container .map-container .map-footer .range-labels {
        display: block;
    }
    .maps-container .map-container .map-footer #country_map_controls {
        width: 800px;
    }
    .maps-container .map-container .map-footer {
        padding: 0;
        /*padding-top: 10px;*/
        overflow-x: scroll;
    }
    .maps-container .map-container .map-footer > div .range-labels {
        margin-left: -3px;
    }
    .maps-container .map-container .map-footer .range,
    .maps-container .map-container .map-footer .range-label {
        display: block;
    }
    .map-container .map-controls {
        display: block;
    }
    .map-container .map-header .map-speed-controls {
        width: 300px;
    }
    .map-container .map-header {
        margin-bottom: 0;
        padding-bottom: 0;
        /*border-bottom: 2px solid #336C9C;*/
    }
    .map-container .map-header .map-speed-controls {
        width: 300px;
        bottom: -33px;
    }
    .map-container .map-header .map-speed-controls a {
        margin-left: 24px;
    }
    .map-container .map-header .map-speed-controls a:first-child {
        margin-left: 0;
    }

    .page-header h2.page-title {
        font-size: 35px;
        margin: 15px 0;
    }
    .breadcrumb {
        padding-left: 0;
    }
    footer .menu {
        margin-right: 0;
    }

    #radarska-slika .legend-vremenko table {
        width: calc(100% - 30px);
    }

    #radarska-slika .legend-vremenko table tr td {
        width: 6%;
    }

    .legend-vremenko.water-legend {
        margin-top: 0!important;
    }
    .legend-vremenko.water-legend table {
        width: 100%;
    }

    .maps-container .map-details {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    /*#ajax_window .maps-container .map-details h2 {*/
        /*margin-top: 2px;*/
        /*color: #fff;*/
    /*}*/

    .home-navigation {
        border-top: 1px solid #fff;
    }

    .page-header h2.no-suptitle,
    .page-header h1.no-suptitle,
    .header-title-wrap.image .page-header h2,
    .header-title-wrap.image .page-header h1 {
        font-size: 18pt;
        margin: 18px 0;
    }
}
@media (max-width: 480px) {
    .home-navigation > ul li {
        padding-bottom: 5px;
        padding-left: 2px;
        padding-right: 2px;
    }
    .home-navigation > ul > a > li .card-label {
        font-size: 12px;
    }
    .map-container .map-footer .map-controls button,
    .map-container .map-footer .map-controls a {
        line-height: 42px;
        border: none;
    }

    #radar #napoved-radarske-slike {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    #forecast-maps .map-location-marker {
        transform: scale(.7);
        left: -6px;
    }
    /*.radar-box div.table-vremenko table tr td,*/
    /*#ajax_window div.table-vremenko table tr td {*/
        /*font-size: 6pt;*/
    /*}*/
    h2 {
        font-size: 14pt;
    }
    .page-header h2.no-suptitle,
    .page-header h1.no-suptitle,
    .header-title-wrap.image .page-header h2,
    .header-title-wrap.image .page-header h1 {
        font-size: 15pt;
        margin: 18px 0;
    }

    .main-wrap > .section {
        width: 350px;
        margin-left: calc((100% - 350px) / 2);
        margin-right: calc((100% - 350px) / 2);
    }
    .navbar-main  > .container,
    .header-title-wrap  > .container {
        width: calc(100% - 40px);
        margin: 0 20px;
    }
    .header-title-wrap.image .page-title {
        min-width: 350px;
    }

    .weather-container ul li:first-child {
        padding: 15px 100px !important;
    }

    .weather-container ul li {
        width: 87.5px !important;
        height: 110px;
    }
    .weather-container ul li:not(:first-child) .temp {
        font-size: 1em;
        top: -85px;
    }
    .weather-container ul li:not(:first-child) .icon-container {
        transform: scale(.4);
        left: -32px;
        top: -36px;
        width: 150px;
    }
    .weather-container ul li:not(:first-child) .icon-container .weather-type {
        display: none;
    }
    .weather-conditions > li {
        width: 175px;
    }
    .map-container .gmnoprint {
        display: none;
    }

    .page-header h2.page-title {
        font-size: 30px;
        margin: 15px 0;
    }
    .breadcrumb {
        padding-left: 0;
    }

    .maps-container {
        /*display: none;*/
    }

    article .table-vremenko {
        width: 100%;
    }
    footer .menu > ul > li {
        width: 50%;
        margin-left: 0;
        float: left;
    }
    footer .menu > ul > li:nth-child(2n) {
        float: right;
    }
    .legend-vremenko.radar-legend .color-badge {
        width: 100%;
    }

    .radar-box h2 {
        display: none;
    }

    #radarska-slika .map-container {
        margin-top: 10px;
    }
}
@media (max-width: 425px) {
    .home-navigation > ul > a > li .card-label {
        font-size: 11px;
    }
}
@media (max-width: 380px) {
    .radar-box h2 {
        padding: 15px;
    }
    .navbar-main  > .container,
    .header-title-wrap  > .container,
    .main-wrap > .section {
        width: 300px;
        margin-left: calc((100% - 300px) / 2);
        margin-right: calc((100% - 300px) / 2);
    }
    .main-wrap > .section {
        /*padding-top: 30px;*/
        padding-top: 10px;
    }

    .header-title-wrap  > .container {
        width: 300px;
        margin-left: calc((100% - 300px) / 2);
        margin-right: calc((100% - 300px) / 2);
    }

    .weather-container ul li {
        width: 75px !important;
    }
    .weather-container ul li:not(:first-child) .icon-container {
        transform: scale(0.35);
        left: -36px;
        top: -35px;
        width: 150px;
    }
    .weather-container ul li:not(:first-child) .temp {
        font-size: 0.9em;
        top: -82px;
    }
    .weather-conditions {
        margin-top: 10px;
        margin-bottom: 30px;
    }
    .weather-conditions > li {
        width: 150px;
    }

    ul.review-images li {
        height: 50px;
        width: 50px;
    }

    ul.range-labels li {
        font-size: 12px;
    }

    .page-header h2.page-title {
        font-size: 25px;
    }
    footer .menu > ul > li {
        width: 100%;
        text-align: center;
    }.map-container .map-header .map-controls.right a {
         width: 100%;
     }
    .map-container .map-header .map-controls.right a#last {
        margin-left: 15px;
        margin-right: 5px;
    }
    .map-container .map-header .map-controls.right a#pause,
    .map-container .map-header .map-controls.right a#play {
        /*margin-top: 3px;*/
        margin-left: 5px;
        margin-right: 15px;
    }
    .map-container .map-header .map-controls.right a#last,
    .map-container .map-header .map-controls.right a#pause,
    .map-container .map-header .map-controls.right a#play {
        /*margin-left: 15px;*/
        /*margin-right: 15px;*/
        /*width: calc(100% - 30px);*/
        /*margin: 0 15px;*/
        width: calc(50% - 20px);
        float: left;
    }

    .legend-vremenko.radar-legend .color-badge {
        width: 17px;
    }
    
    .legend-vremenko.radar-legend table tr:last-child {
        display: none
    }
}