@media screen and (max-width: 1180px){
    #main-content {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
    .train-table,
    #calendar .listof-calendars,
    #contacts .contact-form,
    #block_form {
        width: 728px;
        margin-left: auto;
        margin-right: auto;
    }
    #right-sidebar {
        margin-top: 40px;
        width: auto;
        text-align: center;
    }
}
@media screen and (max-width: 960px){
    #popular-stations ul.flex {
        justify-content: space-around;
    }
    #popular-stations .station-wrapper .overlay {
        opacity: 1;
        background: none; 
    }
}

@media screen and (max-width: 768px){
    
    #map{
        height: 250px;
    }
    .copy_h{
        display: none;
    }    
    .copy_v{
        display: block;
    }     
    #header #toggler-wrapper {
        display: block;
        margin-right: 10px;
    }
    #header .nav {
        display: none;
    }

    #footer .flex {
        justify-content: space-around;
    }
    #footer .nav {
        display: block;
        margin-top: 20px;
    }
    #footer .nav li {
        margin-left: 20px;
        margin-right: 20px;
    }
    .train-table, #calendar .listof-calendars, #contacts .contact-form, #block_form {
        width: 700px;
    }
    #block_form .tabs .tab-item {
        width: 350px;
        height: 41px;
        line-height: 41px;
        background-size: 350px auto;
    }
    .train-table .train-info {
        width: 100%;
        max-width: 100%;
    }
    #block_form .forms {
        background-size: auto 101%;
        border: 1px solid #ccc;
        background-position: center -2px;
    }
    #block_form .forms .row-input input {
        height: 41px;
    }
    #block_form .forms .row {
        margin-bottom: 32px;
    }
    .train-table .train-info {
        margin-bottom: 10px;
        padding-bottom: 15px;
        border-bottom: 1px solid #d9effd;
    }
    .train-table .train-info .minfo {
        margin-bottom: 8px;
    }
    .train-table .train-info .minfo > div {
        display: inline-block;
        vertical-align: bottom;
        margin-bottom: 0;
        line-height: 1.4;
    }
    .train-table .train-ad .hidden-duration {
        display: block;
        margin-bottom: 7px;
    }
    #train .train-table .train-ad .departures .label,
    .train-table .train-ad .departures .label {
        background: url(../images/arrow.png) no-repeat right 22px center;
    }
    
    #train .train-table .train-ad .departures,
    .train-table .train-ad .departures {
        width: 410px;
    }
    .train-table .train-ad .waiting {
        display: none;
    }
    .train-table .result-row {
        padding-top: 13px;
        padding-bottom: 13px;
    }
    .train-table {
        max-width: 100%;
    }
    #calendar .listof-calendars .calendar-item table tbody td {
        padding: 1px;
    }
    #calendar .listof-calendars .calendar-item {
        width: 346px;
    }
    #contacts .contact-form .text {
        width: 49%
    }
    #contacts .contact-form .text input {
        width: 100%;
    }
    .field-stationform-date, .field-routeform-date {
        width: 200px;
    }
    .forms .fm4 {
        float: right;
        margin-top: 56px !important;
        margin-left: 0 !important;
    }
}
@media screen and (max-width: 720px){
    #block_form .tabs .tab-item {
        width: 50%;
        background-size: 100% 100%;
    }
    #block_form {
        width: 100%;
    }
    #block_form .forms .row:nth-child(1) > div {
        width: 100%;
    }
    #block_form .forms .row-input input {
        width: 100%;
    }
    #nearest-stations .links-of-roads li {
        width: 49%;
    }
    #calendar .listof-calendars {
        max-width: 100%;
    }
    #calendar .listof-calendars .flex {
        justify-content: space-around;
    }
    #contacts .contact-form {
        max-width: 100%;
    }
    #train .train-table .no-arrow .train-ad .departures .label {
        background: none;
    }
    
}
@media screen and (max-width: 560px){
    #hot-roads .links-of-roads li {
        width: 48%;
    }
    #block_form .tabs .tab-item {
        width: 228px;
        background-image: url("../images/pas_btn_sm.png");
        position: relative;
        z-index: 1;
    }
    #block_form .tabs .tab-item.tab-2 {
        margin-left: -6px;
        z-index: 0;
    }
    #block_form .forms .row > div.search {
        text-align: center;
        width: 100%;
        margin-top: 34px;
    }
    #block_form .forms .row {
        margin-bottom: 23px;
    }
    #block_form .tabs .tab-item.active {
        background-image: url("../images/act_btn_sm.png");
    }
    
    #block_form .forms {
        padding: 32px 10px 1px; 
    }
    .refresh-button {
        margin-bottom: 4px;
        padding-left: 6px;
    }
    .helpfull-information .description .about_img, 
    .article.about .description .about_img, 
    .article.news-detail .description .about_img {
        display: block;
        margin: 0 auto 20px;
        float: none !important ;
        max-width: 100%
    }
    #popular-stations .station-wrapper {
        width: 220px;
    }
    #popular-stations .station-wrapper img {
        max-width: 100%;
    }
    #toggler.open {
        display: none;
    }
    .forms-similar .departures-list, .forms-similar .arrivals-list{        
        width: 100%;
        margin-top: 30px;
        margin-bottom: 30px;        
    }
   
    
}
@media screen and (max-width: 500px){
    #train .train-table .train-ad .departures .label, 

    #footer .nav li a {
        font-size: 14px;
        margin-bottom: 10px;
    }
    #block_form .forms .label span {
        font-size: 12px;
    }
    #block_form .forms {
        padding: 20px 10px 1px;
    }
    #block_form .forms .row-input input {
        height: 39px;
    }
    #block_form .tabs .tab-item {
        width: calc(50% + 3px);
    }
    #block_form .forms .refresh-button {
        text-align: center;
        margin-bottom: 15px;
    }
    #block_form .forms .row > div.search {
        margin-top: 14px;
    }
    #block_form .forms .row .checkboxes {
        width: 220px;
        margin: 0 auto;
        margin-top: 30px;
    }
    #block_form .forms .row-input input {
        font-size: 14px;
    }
    #block_form .tabs .tab-item {
        font-size: 13px;
    }
    #block_form .tabs .tab-item:nth-child(2){
        margin-left: -6px;
    }
    #contacts .contact-form .text:nth-child(1) {
        margin-bottom: 22px;
    }
    #contacts .contact-form .text {
        width: 100%;
    }
    .train-table .train-ad .departures .label {
        background-position: right 6px center;
    }
    #train .train-table .train-ad .departures .label {
        background-position: right 16px center;
    }
    #train .train-table .train-ad .departures,
    .train-table .train-ad .departures {
        width: 160px;
    }
    .train-table .train-ad .arrivals {
        width: 116px;
    }
    #train .train-table .train-ad .departures .label, 
    .train-table .train-ad .departures .label {
        background-image: url("../images/arrow-small2.png");
    }
    #footer .nav li {
        margin-left: 10px;
        margin-right: 10px;
    }
    #copy .flex {
        justify-content: space-around;
    }
    #copy .social li {
        margin-left: 10px;
        margin-right: 10px;
    }
    #copy .social {
        order: 1;
       
        margin-bottom: 20px;
    }
    #copy .copyright {
        order: 2;
        text-align: center;
        width: 100%;
    }
    #header .logo img {
        width: 230px;
    }

    .train-table .train-ad .arrivals {
        width: 120px;
    }
    .train-table .result-row {
        padding: 10px 6px; 
    }
    #nearest-stations .links-of-roads li {
        width: 100%;
    }
    #right-sidebar img,
    #right-sidebar {
        max-width: 100%
    }
    .title {
        font-size: 24px;
    }
    #hot-roads .links-of-roads li {
        width: 100%;
    }
    #hot-roads.popular-roads .links-of-roads li {
        width: 100%;        
    }
    
}
@media screen and (max-width: 400px){
    {}
    #block_form .tabs .tab-item > div {
        width: 98px;
        margin: 0 auto;
    }
    #block_form .tabs .tab-item {
        height: auto;
        line-height: 1.2;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
}
@media screen and (max-width: 380px){
    #footer .nav li {
        margin-left: 6px;
        margin-right: 6px;
    }
    #popular-stations .station-wrapper {
        width: 235px;
    }
    
    #footer .nav li:first-child {
        margin-left: 0px;
    }
    #footer .nav li:last-child {
        margin-right: 0px;
    }
    #calendar .listof-calendars .calendar-item {
        width: 320px;
    }
    #calendar .listof-calendars .calendar-item table tbody td > div {
        width: 36px
    }
    #calendar .listof-calendars .calendar-item table {
        padding: 0 2px 6px;
    }
    #news .lists-of-news .news-row .news-title a {
        font-size: 16px;
    }
    #header .logo img { 
        width: 210px;
    }
}
@media screen and (max-width: 340px){
    #block_form .tabs .tab-item {
        background-image: url("../images/pas_btn_sm2.png");
    }
 
    
    #block_form .tabs .tab-item.active {
        background-image: url("../images/act_btn_sm2.png");
    }
}



@media screen and (max-width: 768px){
    {}
    .field-routeform-from, .field-routeform-to {
        width: calc(50% - 34px);
    }
    .field-routeform-from span, .field-routeform-to span {
        display: block !important;
    }
    .forms .form-group input[type="text"] {
        width: 100%;
    }
    .field-routeform-from .example span, .field-routeform-to .example span {
        display: inline-block!important;
    }
     .field-stationform-date {
        width: 200px;
     }
     .forms .fm4 {
        margin-left: calc(100% - 600px);
     }
    #block_form .forms .refresh-button {
        padding-top: 0;
    }
    
}
@media screen and (max-width: 720px){
    {}
    .forms .fm4 {
        margin: 0 auto;
  
        margin-top: 30px;
        display: block;
     }
    .field-stationform-date {
        width: 49%;
     }
     
     .field-stationform-from,
     .field-stationform-from span {
        display: block !important;
        max-width: 100%;
     }
     #block_form .forms .example span {
        display: inline-block !important;
     }
     #block_form .forms .refresh-button {
        width: auto;
        margin-top: 10px;
        margin-bottom: 10px;
     }
     .forms .form-group input#stationform-from[type="text"],
     .field-routeform-from, .field-routeform-to {
        width: 100%;
     }
     .thanks {
        padding: 22px 20px 0;
     }
     .thanks .title {
        font-size: 22px;
         
     }
     .fancybox-close {
        top: 0 !important;
        left: 0 !important;
     }
}
@media screen and (max-width: 680px){
    {}
    .field-stationform-checkboxlist, .field-routeform-checkboxlist {
        width: 50%;
     }
     .forms .fm4 {
        float: none;
        margin: 0 auto;
        margin-top: 20px !important;
        display: block;
        margin-left: calc(50% - 90px) !important;
     }
}
@media screen and (max-width: 460px){
    {}
    .field-stationform-checkboxlist, .field-routeform-checkboxlist {
        width: 100%;
        margin-top: 30px;
        text-align: center;
    }
    .forms .fm4 {
        margin-top: 16px;
    }
    #block_form .forms .refresh-button {
        width: 100%;
        text-align: center;
    }
    .field-stationform-date {
        width: auto;
    }
    .field-stationform-checkboxlist >div > div, .field-routeform-checkboxlist >div > div {
        display: inline-block;
        padding: 0 21px; 
        width: auto !important;
    }
}