/* ----------------------------------------- MIN 320 px --------------- */
@media only screen and (max-width: 319px) {
    body {display: none;}
}

@media only screen and (min-width: 320px) {
  .container {
    width: 94%;
  }
  
  #header {
    position: fixed;
  }

  #header .container {
    padding: 15px 0 0 0;;
  }

  #header .img-container {
    height: calc(211px * 0.25);
    width: calc(647px * 0.25);
  }

  #header .img-container-rhs {
    width: 39vw;
  }

  .section-divider {
    height: 5px;
    margin: 15px auto 30px auto;
  }

  #main {
    position: relative;
    top: 80px;
  }

  #mobile-menu .outer-border {
    height: 21vw;
    margin: 0 2px;
    border-radius: 10px;
  }
  
  #mobile-menu .inner-border {
    height: calc(100% - 5px); 
    width: calc(100% - 5px);
    border-radius: 8px 8px 50px 8px;
    font-size: 1.0rem;
  }
  
  #mobile-menu .responsive-icon {
    width: 1.8rem;
    height: auto;
  }

  #mobile-services .service-button span {
    font-size: 0.75rem;
    padding-top: 10px;
  }

  .section-header span {
    font-size: 1.3rem;
  }
  
  .section-header img {
    float: right;
    width: 2rem;
    bottom: -1px;
  }

  .services-list a {
    font-size: 0.75rem;
  }

  #faq .faq-question {
    font-size: 0.9rem;
    background-size: 1.2rem;
    padding-left: 20px;
    padding-bottom: 1px;
  }
  
  .faq-answer {
    font-size: 0.9rem;
    background-size: 1.2rem;
    padding-left: 20px;
    margin-left: 5px;
    padding-bottom: 1px;
  }

  #news .news-row {
    font-size: 0.8rem;
  }

  #news .news-date {
    margin-right: 5px;
  }

  #outcomeDiv {
    font-size: 0.8rem;
  }

  #footer .container { 
    padding-left: 7.5%;
    padding-right: 7.5%;
    display: block;
  }

  #footer .company-details span a { 
    font-size: 0.9rem;
    padding-bottom: 3px;
  }

  #copyright {
    padding: 5px 0px 5px 0px;
    font-size: 0.8rem;
  }

  /* -- SUBPAGES STYLING ----------------------------------- */ 
  /* .subpage-section-header {
    padding: 0.5rem 0.5rem;
  }

  .subpage-section-container {
    padding: 0.5rem 0.5rem;
  }

  .subpage-section-service-details {
    margin-right: 10px;
    padding-top: 5px;
  }

  .subpage-section-service-photo-vertical {
    flex: 35;
  }

  .subpage-section-service-photo-horizontal { flex: 50; }
  .subpage-section-service-photo-horizontal img { height: auto; }

  .subpage-section-service-details-row {
    padding-bottom: 5px;
    font-size: calc(7px + 0.5vw);
  } */

  /* -- SERVICE PAGE STYLING --------------------------------------------- */
  .service-page-section { 
    margin-top: 1rem; 
  }

  .service-page-section-header {
    padding: 0.5rem;
    font-size: calc(10px + 1vw); 
  }

  .service-page-section-container {
    padding: 0.5rem; 
  }

  .service-page-section-service-header { 
    font-size: calc(10px + 0.75vw); 
  }

  .service-page-section-service-details {
    flex: 1 1 68%;
    padding-top: 10px;
  }

  .service-page-section-service-gap {
    flex: 1 1 2%;
  }

  .service-page-section-service-photo {
    flex: 1 1 30%;
  }

  .service-page-section-service-details-h {
    flex: 1 1 60%;
    padding-top: 10px;
  }

  .service-page-section-service-photo-h {
    flex: 1 1 38%;
  }

  .service-page-section-service-details-row-h { 
    font-size: calc(9px + 0.15vw);
    padding-bottom: 5px;
  }
  
  .service-page-section-service-details-row { 
    font-size: calc(9px + 0.15vw);
    padding-bottom: 5px;
  }

  .service-page-navigation { font-size: 0.65rem; }
}

/* ----------------------------------------- MIN 375 px --------------- */
@media only screen and (min-width: 375px) { 
  #mobile-menu .inner-border {
    border-radius: 8px 8px 50px 8px;
    font-size: 1.15rem;
  }
  
  #mobile-menu .responsive-icon {
    width: 1.9rem;
  }

  #mobile-services .service-button span {
    font-size: 0.90rem;
    padding-top: 10px;
  }

  .section-header span {
    font-size: 1.5rem;
  }
  
  .section-header img {
    width: 2.2rem;
    bottom: -2px;
  }

  .services-list a {
    font-size: 0.90rem;
  }

  #faq .faq-question {
    font-size: 1.0rem;
    background-size: 1.3rem;
    padding-left: 25px;
  }
  
  .faq-answer {
    font-size: 1.0rem;
    background-size: 1.3rem;
    padding-left: 25px;
    margin-left: 6px;
  }

  #copyright {
    padding: 5px 0px 10px 0px;
    font-size: 0.9rem;
  }

  /* .subpage-section-service-photo-horizontal { flex: 80; }
  .subpage-section-service-photo-horizontal img { height: auto; }
  .subpage-navigation { font-size: 0.70rem; } */

  /* -- SERVICE PAGE STYLING --------------------------------------------- */
  .service-page-section { 
    margin-top: 1rem; 
  }

  .service-page-section-header {
    padding: 0.5rem;
    font-size: calc(10px + 1vw); 
  }

  .service-page-section-container {
    padding: 0.5rem; 
  }

  .service-page-section-service-header { 
    font-size: calc(10px + 0.75vw); 
  }

  .service-page-section-service-details {
    flex: 1 1 68%;
    padding-top: 10px;
  }

  .service-page-section-service-gap {
    flex: 1 1 2%;
  }

  .service-page-section-service-photo {
    flex: 1 1 30%;
  }

  .service-page-section-service-details-row { 
    font-size: calc(9px + 0.15vw);
  }
}

/* ----------------------------------------- MIN 390 px --------------- */
@media only screen and (min-width: 390px) {
  #mobile-menu .inner-border {
    border-radius: 8px 8px 55px 8px;
    font-size: 1.20rem;
  }
  
  #mobile-menu .responsive-icon {
    width: 2.0rem;
  }

}

/* ----------------------------------------- MIN 414 px --------------- */
@media only screen and (min-width: 414px) {
  #mobile-menu .inner-border {
    height: calc(100% - 6px); 
    width: calc(100% - 6px);
    border-radius: 8px 8px 60px 8px;
    font-size: 1.25rem;
  }

  #page-intro .container h1 {
    font-size: 2.5rem;
  }

  /* #mobile-services .service-button-gap {
    flex: 0.4;
  } */

  #mobile-services .service-button span {
    font-size: 1rem;
  }

  #copyright {
    padding: 10px 0px 20px 0px;
    font-size: 1rem;
  }

  /* -- SUBPAGES STYLING ----------------------------------- */ 
   /* .subpage-section-header {
    padding: 0.75rem 0.75rem;
  }

   .subpage-section-container {
    padding: 0.75rem 0.75rem;
  }

  .subpage-section-service-details {
    margin-right: 15px;
    padding-top: 5px;
  }

  .subpage-section-service-photo-vertical {
    flex: 40;
  }

  .subpage-section-service-photo-horizontal { flex: 55; }
  .subpage-section-service-photo-horizontal img { height: auto; }

  .subpage-section-service-details-row {
    padding-bottom: 5px;
    font-size: calc(8px + 0.75vw);
  }

  .subpage-navigation { font-size: 0.8rem; } */

  /* -- SERVICE PAGE STYLING --------------------------------------------- */
  .service-page-section-service-details-row { 
    font-size: calc(9px + 0.165vw);
  } 

  .service-page-navigation { font-size: 0.8rem; }
}

.service-page-section-service-details-h {
  flex: 1 1 68%;
  padding-top: 10px;
}

.service-page-section-service-photo-h {
  flex: 1 1 30%;
}

.service-page-section-service-details-row-h { 
  font-size: calc(9px + 0.15vw);
  padding-bottom: 5px;
}

/* ----------------------------------------- MIN 428 px --------------- */
@media only screen and (min-width: 428px) {

  /* -- SERVICE PAGE STYLING --------------------------------------------- */
  .service-page-section-service-details {
    flex: 1 1 70%;
    padding-top: 10px;
  }

  .service-page-section-service-gap {
    flex: 1 1 2%;
  }

  .service-page-section-service-photo {
    flex: 1 1 28%;
  }
  
  .service-page-section-service-details-row { 
    font-size: calc(9px + 0.23vw);
  }

  .service-page-section-service-details-h {
    flex: 1 1 68%;
    padding-top: 10px;
  }

  .service-page-section-service-photo-h {
    flex: 1 1 30%;
  }

  .service-page-section-service-details-row-h { 
    font-size: calc(9px + 0.15vw);
    padding-bottom: 5px;
  }

}


/* ----------------------------------------- MIN 430 px --------------- */
@media only screen and (min-width: 430px) {
  #mobile-menu .inner-border {
    border-radius: 8px 8px 65px 8px;
    font-size: 1.40rem;
  }
  
  #mobile-menu .responsive-icon {
    width: 2.1rem;
  }
}

/* ----------------------------------------- MIN 470 px --------------- */
@media only screen and (min-width: 470px) {
  #mobile-menu .inner-border {
    height: calc(100% - 6px); 
    width: calc(100% - 6px);
    border-radius: 8px 8px 70px 8px;
    font-size: 1.50rem;
  }
  
  #mobile-menu .responsive-icon {
    width: 2.2rem;
  }

  #faq .faq-question {
    font-size: 1.1rem;
    background-size: 1.4rem;
    padding-left: 27px;
  }
  
  .faq-answer {
    font-size: 1.1rem;
    background-size: 1.4rem;
    padding-left: 27px;
    margin-left: 7px;
  }

  #news .news-row {
    font-size: 0.90rem;
  }

  #news .news-date {
    margin-right: 7px;
  }
}

/* ----------------------------------------- MAX 480 px --------------- */
@media only screen and (max-width: 480px) {
  
}

/* ----------------------------------------- MIN 480 px --------------- */
@media only screen and (min-width: 480px) {
  #mobile-services .service-button span {
    font-size: 1.2rem;
    font-weight: 600;
  }

  .section-header span {
    font-size: 1.8rem;
  }
  
  .section-header img {
    width: 2.5rem;
    bottom: -3px;
  }

  #page-intro .container h1 {
    font-size: 2.8rem;
  }

  .services-list a {
    font-size: 1.3rem;
  }

  #footer .container { 
    padding-left: 0%;
    padding-right: 0%;
    display: flex;
  }

  #footer .company-details span a { 
    font-size: 1rem;
    padding-bottom: 3px;
  }
}

/* ----------------------------------------- MIN 500 px --------------- */
@media only screen and (min-width: 500px) {
  #mobile-menu .inner-border {
    height: calc(100% - 6px); 
    width: calc(100% - 6px);
    border-radius: 8px 8px 80px 8px;
    font-size: 1.65rem;
  }

  #mobile-menu .responsive-icon {
    width: 2.5rem;
  }

  .calendarWeekDays { margin: 0.75rem 1.25rem 0; }
  .calendarMonth { margin: 0 1.25rem 1.25rem; }
  #calendarDays div { padding: 1rem 0; }
  #calendarDays div.today::before { top: 65%; width: 30%; }
  /* #mobile-services .service-button-gap {
    flex: 0.7;
  } */
}

/* ----------------------------------------- MIN 550 px --------------- */
@media only screen and (min-width: 550px) {
  #mobile-menu .inner-border {
    height: calc(100% - 7px); 
    width: calc(100% - 7px);
    border-radius: 10px 10px 95px 10px;
    font-size: 1.80rem;
  }

  #mobile-menu .responsive-icon {
    width: 2.75rem;
  }

  #mobile-services .service-button span {
    font-size: 1.4rem;
    font-weight: 600;
  }
}

/* ----------------------------------------- MAX 574 px --------------- */
@media only screen and (max-width: 574px) {
  .input-label::before {
    font-size: 0.8rem;
    padding: 3px 5px;
    margin-right: 10px;
  }

  .no-before {
    padding-right: 42px;
  }

  .no-before::before {
    content: '' !important;
    padding: 0px;
    margin-left: 0px;
  }

  .checkboxes-container {
    padding: 0 5px 0 10px;
  }
}


/* ----------------------------------------- MIN 575 px --------------- */
@media only screen and (min-width: 575px) {
  #mobile-menu .inner-border {
    border-radius: 10px 10px 100px 10px;
    font-size: 1.90rem;
  }

  #mobile-menu .responsive-icon {
    width: 3.0rem;
  }

  .checkboxes-container {
    padding: 0 5px 0 200px;
  }
}


/* ----------------------------------------- MAX 600 px --------------- */
@media only screen and (max-width: 600px) {
  #header {
    /* background-image: linear-gradient(#0099ff,#ffffff00); */
    border: none;
  }
  
  #main .container {
    padding-top: 0px;
  }

  .slider-container {
    display: none;
  }

  .free-dial-banner {
    margin: 30px 0;
  }

  .free-quote-banner {
    margin: 30px 0;
  }

  .corona-banner {
    margin: 30px 0;
  }

  #page-intro .container {
    margin-bottom: 30px;
  }
  #bookings iframe {
    height: 400px;
  }
}

/* ----------------------------------------- MIN 601 px --------------- */
@media only screen and (min-width: 601px) {
  .container {
    width: 85%;
  }

  #header {
    position: relative;
    background-image: none;
  }
  
  #header .img-container {
    height: calc(211px * 0.45);
    width: calc(647px * 0.45);
    /* margin: 10px 0; */
  }

  #header .img-container-rhs {
    width: 30vw;
    height: 100%;
  }

  #quick-quote-popup {
    top: 114px !important;
    width: 30vw;
    left: unset;
    right: 7.5%;
  }

  #main {
    position: relative;
    top: 2px;
  }

  .slider-container {
    display: flex;
  }

  .slider-side-image {
    height: 31.5vw !important;
  }

  .touch-slider-wrap {
    display: none;
  }

  /* .touch-slide-wrapper {
    height: 52vw !important;
  } */

  .section-divider {
    width: 85%;
    background-color: #d5d5d5;
    height: 7px;
    margin: 15px auto 45px auto;
    max-width: 992px;
  }
  
  #mobile-services {
    display: none;
  }

  #desktop-services {
    display: unset;
  }

  .services-list a {
    font-size: 0.9rem;
  }

  /* #mobile-services .service-button span {
    font-size: 1.4rem;
  } */

  #page-intro .container h1 {
    font-size: 3.0rem;
  }

  #faq .faq-question {
    font-size: inherit;
    background-size: 1.45rem;
    padding-left: 30px;
    padding-bottom: 0px;
  }
  
  .faq-answer {
    font-size: inherit;
    background-size: 1.45rem;
    padding-left: 30px;
    margin-left: 30px;
    padding-bottom: 0px;
  }

  .datepicker-modal {
    max-width: 400px;
  }

  #news .news-row {
    font-size: inherit;
  }

  #news .news-date {
    margin-right: 15px;
  }

  .input-label::before {
    font-size: 0.8rem;
    padding: 3px 5px;
    margin-right: 10px;
  }

  .no-before {
    padding-right: 42px;
  }

  .no-before::before {
    content: '' !important;
    padding: 0px;
    margin-left: 0px;
  }

  .checkboxes-container {
    padding: 0 5px 0 10px;
  }

  #outcomeDiv {
    font-size:inherit;
  }

  /* -- SUBPAGES STYLING ----------------------------------- */ 
  /* .subpage-section-container {
    padding: 1.0rem 1.0rem;
  }

  .subpage-section-service-details {
    margin-right: 30px;
    padding-top: 10px;
  }

  .subpage-section-service-photo-vertical {
    flex: 20;
  }

  .subpage-section-service-photo-horizontal { flex: 70; }
  .subpage-section-service-photo-horizontal img { height: 90%; }

  .subpage-section-service-details-row {
    padding-bottom: 10px;
    font-size: calc(7px + 0.5vw);
  }

  .subpage-navigation { font-size: 1.0rem; } */

  /* -- SERVICE PAGE STYLING --------------------------------------------- */
  .service-page-section-header {
    padding: 0.5rem 0.8rem; 
  }
  
  .service-page-section-container {
    padding: 0.8rem; 
  }

  .service-page-section-service-details {
    flex: 1 1 70%;
    padding-top: 10px;
  }

  .service-page-section-service-gap {
    flex: 1 1 5%;
  }

  .service-page-section-service-photo {
    flex: 1 1 25%;
  }
  
  .service-page-section-service-details-row { 
    font-size: calc(10px + 0.25vw);
    padding-bottom: 10px;
  }

  .service-page-section-service-details-h {
    flex: 1 1 60%;
    padding-top: 10px;
  }

  .service-page-section-service-photo-h {
    flex: 1 1 35%;
  }

  .service-page-section-service-details-row-h { 
    font-size: calc(9px + 0.15vw);
    padding-bottom: 5px;
  }

  .service-page-navigation { font-size: 1.0rem; }
}

/* ----------------------------------------- MIN 634 px --------------- */
@media only screen and (min-width: 634px) {
  .input-label::before {
    content: '必須';
    background-color: red;
    color: #ffffff;
    line-height: 1rem;
    font-size: 1rem;
    padding: 3px 10px;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 140px;
  }

  .no-before {
    padding-right: 0px;
  }

  .no-before::before {
    content: '　　' !important;
    background-color: transparent !important;
  }

  .checkboxes-container {
    padding: 0 10px 0 200px;
  }

  #page-intro .container h1 {
    font-size: 3.2rem;
  }
}  

/* ----------------------------------------- MIN 700 px --------------- */
@media only screen and (min-width: 700px) { 
  .calendarWeekDays { margin: 0.75rem 1.25rem 0; }
  .calendarMonth { margin: 0 1.25rem 1.25rem; }
  #calendarDays div { padding: 1.5rem 0; }
  #calendarDays div.today::before { top: 70%; width: 20%; }
}

/* ----------------------------------------- MAX 767 px --------------- */
@media only screen and (max-width: 767px) {  
  .price-category .enhanced-letter {
    font-size: 2.0rem;
  }
  
  .price-category .normal-letter {
    font-size: 1.3rem;
  }

  .price-category img {
    bottom: -20px;
  }

  .price-item a {
    font-size: 1.0;
  }

  .price-item span {
    font-size: 0.9;
  }


  .underlined-cat-mizu::after, .underlined-cat-aircon::after, .underlined-cat-highpressure::after,
  .underlined-cat-other::after, .underlined-cat-diy::after, .underlined-cat-lawn::after, .underlined-cat-exterior::after {
    height: 6px;
    margin-top: -11px;
    border-radius: 30px;
  }
}

/* ----------------------------------------- MIN 768 px --------------- */
@media only screen and (min-width: 768px) { 
  .section-header span {
    font-size: 2.5rem;
  }
  
  .section-header img {
    width: 3.0rem;
    bottom: -12px;
  }

  .text-indent {
    text-indent: 25%;
  }

  .services-list a {
    font-size: 1.1rem;
  }

  .price-item a {
    font-size: initial;
  }

  .price-item span {
    font-size: initial;
  }

  #page-intro .container h1 {
    font-size: 3.5rem;
  }
  
  .slider-side-image {
    height: 32vw !important;
  }

  /* -- SUBPAGES STYLING ----------------------------------- */ 
  /* .subpage-section-service-details {
    margin-right: 50px;
  }

  .subpage-section-service-details-row {
    font-size: calc(7px + 0.65vw);
  }

  .subpage-section-service-photo-horizontal { flex: 60; }
  .subpage-section-service-photo-horizontal img { height: auto; } */

  /* -- SERVICE PAGE STYLING --------------------------------------------- */
  .service-page-section-container {
    padding: 0.8rem; 
  }

  .service-page-section-service-details {
    flex: 1 1 70%;
    padding-top: 10px;
  }

  .service-page-section-service-gap {
    flex: 1 1 5%;
  }

  .service-page-section-service-photo {
    flex: 1 1 25%;
  }
  
  .service-page-section-service-details-row { 
    font-size: calc(11px + 0.50vw);
    padding-bottom: 10px;
  }

  .service-page-section-service-details-h {
    flex: 1 1 60%;
    padding-top: 10px;
  }

  .service-page-section-service-photo-h {
    flex: 1 1 35%;
  }

  .service-page-section-service-details-row-h { 
    font-size: calc(10px + 0.25vw);
    padding-bottom: 5px;
  }

}

/* ----------------------------------------- MIN 815 px --------------- */
@media only screen and (min-width: 815px) { 
  .calendarWeekDays { margin: 0.75rem 1.25rem 0; }
  .calendarMonth { margin: 0 1.25rem 1.25rem; }
  #calendarDays div { padding: 1.75rem 0; }
  #calendarDays div.today::before { top: 70%; width: 20%; }
}

/* ----------------------------------------- MIN 992 px --------------- */
@media only screen and (min-width: 992px) {
  .checkboxes-container {
    padding: 0 200px 0 200px;
  }

  #desktop-services .service-button-gap {
    flex: 0.3;
  }

  .text-indent {
    text-indent: 33%;
  }

  /* .subpage-section-service-photo-horizontal { flex: 50; }
  .subpage-section-service-photo-horizontal img { height: auto; } */

  /* -- SERVICE PAGE STYLING --------------------------------------------- */
  .service-page-section { 
    margin-top: 2rem;
  }

  .service-page-section-header {
    padding: 0.8rem 1.5rem;
    font-size: calc(10px + 1vw); 
  }

  .service-page-section-container {
    padding: 1.5rem; 
  }

  .service-page-section-service-header { 
    font-size: calc(10px + 0.75vw); 
  }


  .service-page-section-service-details {
    flex: 1 1 75%;
    padding-top: 15px;
  }

  .service-page-section-service-gap {
    flex: 1 1 5%;
  }

  .service-page-section-service-photo {
    flex: 1 1 20%;
  }

  .service-page-section-service-details-row { 
    font-size: calc(10px + 0.375vw);
    padding-bottom: 15px;
  }

  .service-page-section-service-details-h {
    flex: 1 1 60%;
    padding-top: 10px;
  }

  .service-page-section-service-photo-h {
    flex: 1 1 35%;
  }

  .service-page-section-service-details-row-h { 
    font-size: calc(10px + 0.375vw);
    padding-bottom: 10px;
  }

} 

/* ----------------------------------------- MAX 1024 px --------------- */
@media only screen and (max-width: 1024px){
  .entry-row textarea {
    width: 280px;
  }
}

@media only screen and (min-width: 1024px) {
  .calendarWeekDays { margin: 0.75rem 1.25rem 0; }
  .calendarMonth { margin: 0 1.25rem 1.25rem; }
  #calendarDays div { padding: 2.5rem 0; }
  #calendarDays div.today::before { top: 60%; width: 15%; }
}

@media only screen and (min-width: 1168px) {
  #quick-quote-popup {
    right: calc(50% - 496px);
  }
}




/* ----------------------------------------- MIN 1180 px --------------- */
@media only screen and (min-width: 1180px) {
  #header .img-container-rhs {
    width: 360px;
  }

  #quick-quote-popup {
    width: 360px !important;
  }

  .slider-side-image {
    height: 381px !important;
  }
}

/* ----------------------------------------- MIN 1200 px --------------- */
@media only screen and (min-width: 1200px) {
  #mobile-services .service-button span {
    font-size: 30px;
  }

  /* -- SUBPAGES STYLING ----------------------------------- */ 
  /* .subpage-section-service-details {
    margin-right: 50px;
  }

  .subpage-section-service-photo-vertical {
    flex: 18;
  }
  .subpage-section-service-details-row {
    font-size: calc(7px + 0.60vw);
  } */


}

@media only screen and (min-width: 1200px) {
  #calendarDays div:focus::after {
    border: 1px solid #678311;
    height: 2.0rem;
    width: 18%;
  }
}