@media (min-width: 480px) and (max-width: 768px) {
    .reservation-block .column-item {
        -o-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        -o-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        transform-origin: 0 100%;
        opacity: 1;
        width: 100%;
    }

    .reservation-block .hidden {
        -o-transform: scaleX(0);
        -ms-transform: scaleX(0);
        -moz-transform: scaleX(0);
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        width: 0;
        display: block !important;
        opacity: 0;
    }

}

[name="order"] h2 {
    display: none;
}

.main .reservations-field .reservations-table-wrapper .day-reservations-table td .day-reservations-table-area td a {
    z-index: 2;
    display: inline;
    width: 100%;
}

.main .reservations-field .reservations-table-wrapper .day-reservations-table td .day-reservations-table-area td .period-time-button a {

    display: inline-block;
}

.main .content-block.reservation-block h2 {
    display: none;
}

@media(max-width: 480px) {
    .main .text-mess {
        margin: 0;
    }
}

div.main .button.mobile {
    display: none;
}

div.main .button.pc {
    display: block;
}

.left-date {
    background: white url("../../common/images/icon/direct.svg") no-repeat center;
    width: 40px;
    height: 40px;
    display: block;
    margin-right: 5px;
    cursor: pointer;
    background-size: 30px;
}

.right-date {
    background: white url("../../common/images/icon/direct.svg") no-repeat center;
    width: 40px;
    height: 40px;
    display: block;
    margin-left: 5px;
    cursor: pointer;
    transform: rotate(180deg);
    background-size: 30px;
}

.reserv-title-mobile {
    display: none;
}

@media (max-width: 1023px) {

    div.main .button.pc {
        display: none;
    }

    div.main .button.mobile {
        display: block;
    }
    
    .main .tab-field .tennis-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .tennis-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/tennis_w.svg);
    }
   
    
    .main .tab-field .squash-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .squash-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/squash_w.svg);
    }
    
    
     .main .tab-field .badminton-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .badminton-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/badminton_w.svg);
    }
    
     .main .tab-field .basketball-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .basketball-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/basketball_w.svg);
    }
    
     .main .tab-field .beach-volley-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .beach-volley-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/beach-volley_w.svg);
    }
    
     .main .tab-field .boule-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .boule-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/boule_w.svg);
    }
    
     .main .tab-field .football-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .football-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/football_w.svg);
    }
    
     .main .tab-field .gym-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .gym-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/gym_w.svg);
    }
    
     .main .tab-field .hockey-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .hockey-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/hockey_w.svg);
    }
    
     .main .tab-field .mcarena-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .mcarena-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/mcarena_w.svg);
    }
    
     .main .tab-field .padel-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .padel-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/padel_w.svg);
    }
    
     .main .tab-field .schusskreis-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .schusskreis-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/schusskreis_w.svg);
    }
    
     .main .tab-field .soccer-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .soccer-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/soccer_w.svg);
    }
    
     .main .tab-field .tischtennis-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .tischtennis-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/tischtennis_w.svg);
    }
    
     .main .tab-field .volley-tab.tab-item-active .sport-icon,
    .main .tab-field .tab-item:hover .volley-tab.tab-item-active .sport-icon{
    background-image: url(../../common/images/icon/sport/volley_w.svg);
    }
    
    .main .tab-field .tab-item .tab-item-active span {
    color: white;  
    }
    .main .tab-field .tab-item .tab-item-active {
        background-color: #91C3DA;
    }
}

@media (max-width: 768px) {

    .reserv-title-pc {
        display: none;
    }

    .reserv-title-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
    }
}

@media (max-width: 574px) {
    .main .tab-field {
        margin-top: 10px;
    }


    .main .content-block.reservation-block {
        margin-top: 0;
    }

    .main .content-block {
        margin-top: 10px;
    }

    .main .text-mess {
        margin: 23px 0 0px;
    }
}