/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
    
    
}
  
  /* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
  
@media (min-width: 1025px) and (max-width: 1280px) {
    
    
    
}
  
  /* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
  
@media (min-width: 768px) and (max-width: 1024px) {
    
    
    
}
  
  /* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */
  
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    body {
        height: 100%;
        overflow: auto;
    }
    section,#top-bar {
        height: 100%;
    }
    footer {
        position: fixed;
        bottom: 0;
    }
    #header-brand, .header-brand {
        height: 35px;
        width: auto;
    }
    #header-title {
        font-size: 1rem;
    }
    #top-bar {
        padding: 1.0rem 2rem;
        height: auto;
    }
    #greeting-text, #service-title, #service-title-detail {
        font-size: 1.8rem;
    }
    #greeting, #greeting-service, #rate-option, #rate-option-rating, #service-header, #rate-option-service-detail, .rate-option {
        padding: 1.25rem 2rem;
    }
    #greeting-text, #service-title, #service-title-detail {
        margin-top: 1.0rem;
    }
    #greeting-text-description, #service-title-description, #greeting-service-description, #service-title-description-detail, #greeting-service-description, .btn-rate {
        font-size: 0.875rem;
    }
    #rate-option, #rate-option-service, #rate-option-service-detail, #rate-option-rating {
        gap:1rem;
    }
    .btn-rate {
        padding: 1.25rem;
    }
    .icon-bar, .topbar-title label {
        font-size: 1.4rem;
    }
    .box-rate {
        padding: 1.5rem;
    }
    
}

@media (max-width: 900px) and (orientation: landscape) {
    #greeting-text, #service-title, #service-title-detail {
        font-size: 1.4rem;
    }
    #service-subtitle {
        text-transform: uppercase;
        font-size: 1.2rem;
    }
    #greeting, #greeting-service, #rate-option, #rate-option-rating, #service-header, #rate-option-service-detail, .rate-option {
        padding: 0.75rem 2rem;
    }
    .box-rate-wrapper label {
        font-size: 1.2rem;
    }
    .rate-icon {
        width: 64px;
        height: 64px;
    }
}
  
  /* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
@media (min-width: 481px) and (max-width: 767px) {
    body {
        height: 100%;
        overflow: auto;
    }
    #header-brand, .header-brand {
        height: 35px;
        width: auto;
    }
    #header-title {
        font-size: 1rem;
    }
    #top-bar {
        padding: 1.0rem 2rem;
        height: auto;
    }
    #greeting-text, #service-title, #service-title-detail {
        font-size: 1.8rem;
    }
    #greeting, #greeting-service, #rate-option, #rate-option-rating, #service-header, #rate-option-service-detail, .rate-option {
        padding: 1.25rem 2rem;
    }
    #greeting-text, #service-title, #service-title-detail {
        margin-top: 1.0rem;
    }
    #greeting-text-description, #service-title-description, #greeting-service-description, #service-title-description-detail, #greeting-service-description, .btn-rate {
        font-size: 0.875rem;
    }
    #rate-option, #rate-option-service, #rate-option-service-detail, #rate-option-rating {
        gap:1rem;
    }
    .btn-rate {
        padding: 1.25rem;
    }
    .icon-bar, .topbar-title label {
        font-size: 1.4rem;
    }
    .box-rate {
        padding: 1rem;
        width: 120px;
        height: 120px;
    }
    .rate-icon {
        width: 64px;
        height: 64px;
        margin-top: 10px;
    }
    footer {
        text-align: center;
    }
    
}
  
  /* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
  
@media (min-width: 320px) and (max-width: 480px) {
    #header-brand, .header-brand {
        height: 35px;
        width: auto;
    }
    #header-title {
        font-size: 1rem;
    }
    #top-bar {
        padding: 1.0rem 2rem;
        height: auto;
    }
    #greeting-text, #service-title, #service-title-detail {
        font-size: 1.8rem;
    }
    #greeting, #greeting-service, #rate-option, #rate-option-rating, #service-header, #rate-option-service-detail, .rate-option {
        padding: 1.25rem 2rem;
    }
    #greeting-text, #service-title, #service-title-detail {
        margin-top: 1.0rem;
    }
    #greeting-text-description, #service-title-description, #greeting-service-description, #service-title-description-detail, #greeting-service-description, .btn-rate {
        font-size: 0.875rem;
    }
    #rate-option, #rate-option-service, #rate-option-service-detail, #rate-option-rating {
        gap:1rem;
    }
    .btn-rate {
        padding: 1.25rem;
    }
    .icon-bar, .topbar-title label {
        font-size: 1.4rem;
    }
    .box-rate {
        padding: 1rem;
        width: 120px;
        height: 120px;
    }
    .rate-icon {
        width: 64px;
        height: 64px;
        margin-top: 10px;
    }
    footer {
        text-align: center;
    }
}