@media only screen and (min-device-width: 300px) and (max-device-width: 400px) and (orientation: portrait) {
#blockOne{

}
#dateTitle{
    color:#fea863; margin-top:10px; margin-left: 10px;
}

#bookingTitle{
    width: 190px; text-align: center; margin-left: 30px;
}

#bookingSubHeading{
    display: inline-block; margin-left: 30px;
}
#completedButton{
    width:120px;
        text-align: center; margin-left: 70px;
                        border: 2px solid  red; color: red; border-radius: 5px;
}
#bookingInfo{
        width: 270px;
        box-shadow: -1px 3px 5px 16px rgba(231,234,240,0.71);
        margin: 30px;
    }
    .card-a {
      
        display: none;
        height: auto;
        width: 363px;
    }
    .mask {
        background: rgba(0,0,0,0.8);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 303%;
      }
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
    .box {
        margin-left: -20px;
        margin-top: -10px;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    .card-a {
      margin-top: -10px;
        display: none;
        height: auto;
        width: 363px;
    }
    #bookingInfo{
        width: 300px;
           display: inline-block;
           box-shadow: -1px 3px 5px 16px rgba(231,234,240,0.71);
    }
    .card-b {
        margin-top: -20px;
        display: inline-block;
        height: auto;
        width: auto;
      
    }
    
    .card-c {
        display: inline-block;
        height: auto;
        width: auto;
        margin-left:50px;
    }
    
.box::-webkit-scrollbar {
    display: none;
}
    #dateTitle{
        color:#fea863; margin-top:10px; margin-left: 10px;
    }
    
    #bookingTitle{
        width: 190px; text-align: center; margin-left: 30px;
    }
    
    #bookingSubHeading{
        display: inline-block; margin-left: 30px;
    }
    #completedButton{
        width:120px;
            text-align: center; margin-left: 70px;
                            border: 2px solid  red; color: red; border-radius: 5px;
    }
    #class1{
        display: inline-block;
    }
    
    #class2{
        display: inline-block;
    }
      
    .card-d {
        display: inline-block;
        height: auto;
        width: auto;
        margin-left:50px;
    }
    .mask {
        background: rgba(0,0,0,0.8);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 279%;
      }

}
@media only screen and (min-device-height: 1000px) and (max-device-width: 1100px) and (orientation: portrait) {
       
    .card-d {
        display: inline-block;
        height: auto;
        width: auto;
        margin-left:50px;
    }
    .box {
        margin-left: -20px;
        margin-top: -10px;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    .card-a {
      margin-top: -10px;
        display: none;
        height: auto;
        width: 363px;
    }
    #bookingInfo{
        width: 300px;
           display: inline-block;
           box-shadow: -1px 3px 5px 16px rgba(231,234,240,0.71);
    }
    .card-b {
        margin-top: -20px;
        display: inline-block;
        height: auto;
        width: auto;
      
    }
    
    .card-c {
        display: inline-block;
        height: auto;
        width: auto;
        margin-left:50px;
    }
    
.box::-webkit-scrollbar {
    display: none;
}
    #dateTitle{
        color:#fea863; margin-top:10px; margin-left: 10px;
    }
    
    #bookingTitle{
        width: 190px; text-align: center; margin-left: 30px;
    }
    
    #bookingSubHeading{
        display: inline-block; margin-left: 30px;
    }
    #completedButton{
        width:120px;
            text-align: center; margin-left: 70px;
                            border: 2px solid  red; color: red; border-radius: 5px;
    }
    #class1{
        display: inline-block;
    }
    
    #class2{
        display: inline-block;
    }
    
    .mask {
        background: rgba(0,0,0,0.8);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
}

@media only screen and (min-device-width: 1000px) and (max-device-width: 1100px) and (orientation: landscape) {

 
    .box {
        margin-left: -20px;
        margin-top: -10px;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    .card-a {
      margin-top: -10px;
        display: none;
        height: auto;
        width: 363px;
    }
    #bookingInfo{
        width: 300px;
           display: inline-block;
           box-shadow: -1px 3px 5px 16px rgba(231,234,240,0.71);
    }
    .card-b {
        margin-top: -20px;
        display: inline-block;
        height: auto;
        width: auto;
      
    }
    
    .card-c {
        display: inline-block;
        height: auto;
        width: auto;
        margin-left:50px;
    }

        
    .card-d {
        display: inline-block;
        height: auto;
        width: auto;
        margin-left:50px;
    }
    
    
.box::-webkit-scrollbar {
    display: none;
}
    #dateTitle{
        color:#fea863; margin-top:10px; margin-left: 10px;
    }
    
    #bookingTitle{
        width: 190px; text-align: center; margin-left: 30px;
    }
    
    #bookingSubHeading{
        display: inline-block; margin-left: 30px;
    }
    #completedButton{
        width:120px;
            text-align: center; margin-left: 70px;
                            border: 2px solid  red; color: red; border-radius: 5px;
    }
    #class1{
        display: inline-block;
    }
    
    #class2{
        display: inline-block;
    }
    .mask {
        background: rgba(0,0,0,0.8);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 130%;
      }
}