@charset "utf-8";

/* Mobile Screens
-------------------------------------------------------------- */
@media (max-width: 639px) {
  /* Header
    -------------------------------------------------------------- */
  #header,
  #header .title-bar,
  #header .top-bar,
  #header .top-bar-left,
  #header .top-bar-right {
    width: 100%;
  }
}

/* Medium Screens
-------------------------------------------------------------- */
@media (min-width: 640px) {
  /* Layout
    -------------------------------------------------------------- */
  .grid-margin-x > .medium-1 {
    width: calc(8.33333% - 40px);
  }
  .grid-margin-x > .medium-2 {
    width: calc(16.66667% - 40px);
  }
  .grid-margin-x > .medium-3 {
    width: calc(25% - 40px);
  }
  .grid-margin-x > .medium-4 {
    width: calc(33.33333% - 40px);
  }
  .grid-margin-x > .medium-5 {
    width: calc(41.66667% - 40px);
  }
  .grid-margin-x > .medium-6 {
    width: calc(50% - 40px);
  }
  .grid-margin-x > .medium-7 {
    width: calc(58.33333% - 40px);
  }
  .grid-margin-x > .medium-8 {
    width: calc(66.66667% - 40px);
  }
  .grid-margin-x > .medium-9 {
    width: calc(75% - 40px);
  }
  .grid-margin-x > .medium-10 {
    width: calc(83.33333% - 40px);
  }
  .grid-margin-x > .medium-11 {
    width: calc(91.66667% - 40px);
  }
  .grid-margin-x > .medium-12 {
    width: calc(100% - 40px);
  }

  .grid-margin-x.medium-up-1 > .cell {
    width: calc(100% - 40px);
  }
  .grid-margin-x.medium-up-2 > .cell {
    width: calc(50% - 40px);
  }
  .grid-margin-x.medium-up-3 > .cell {
    width: calc(33.33333% - 40px);
  }
  .grid-margin-x.medium-up-4 > .cell {
    width: calc(25% - 40px);
  }
  .grid-margin-x.medium-up-5 > .cell {
    width: calc(41.66667% - 40px);
  }

  .medium-gutter-wide.grid-margin-x {
    margin-left: -40px;
    margin-right: -40px;
  }

  .medium-gutter-wide.grid-margin-x > .cell {
    margin-left: 40px;
    margin-right: 40px;
  }

  .medium-gutter-wide.grid-margin-x.medium-up-1 > .cell {
    width: calc(100% - 80px);
  }
  .medium-gutter-wide.grid-margin-x.medium-up-2 > .cell {
    width: calc(50% - 80px);
  }
  .medium-gutter-wide.grid-margin-x.medium-up-3 > .cell {
    width: calc(33.33333% - 80px);
  }
  .medium-gutter-wide.grid-margin-x.medium-up-4 > .cell {
    width: calc(25% - 80px);
  }

  /* Forms
    -------------------------------------------------------------- */
  /* Quote Form */
  form#quoteform,
  form#contactform,
  form#storageform,
  .storagebookings {
    border-radius: 5px;
  }

  /* Footer
    -------------------------------------------------------------- */
  #footer .footer-left li {
    width: auto;
    border-bottom: none;
  }

  #footer .footer-left li a.menu-item {
    padding: 0;
    margin: 0 20px;
  }

  #footer .footer-left li a.menu-item:after {
    display: none;
  }

  #footer .footer-left ul.menu {
    text-align: center;
  }

  #footer .footer-left li.menu-logo {
    width: 100%;
  }

  /* Sections
    -------------------------------------------------------------- */
  .section .sidebar {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }

  .section .sidebar form#quoteform,
  .section .sidebar form#contactform {
    border: 1px solid #d6d6d6;
    padding: 20px;
    margin: 0;
  }

  .section .sidebar form#storageform {
    border: 1px solid #d6d6d6;
    padding: 0;
    margin: 0;
  }

  .section .sidebar form#storageform .form-container {
    padding: 20px;
  }

  form#storageform img {
    margin-bottom: 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  /* Bookings */
  .section .sidebar .storagebookings {
    border: 1px solid #d6d6d6;
    padding: 0;
    margin: 0;
  }

  .section .sidebar .storagebookings .bookings-container {
    padding: 20px;
  }

  .storagebookings img {
    margin-bottom: 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  /* Quote */
  #quote,
  #quote .grid-x {
    min-height: calc(100vh - 144px);
  }

  #quote .hero-wrapper {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
  }

  /* Experience */
  #experience p {
    display: block;
  }

  #experience p span {
    margin-right: 0;
  }

  /* Locations */
  #locations .accordion {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 40px;
  }

  #locations li.accordion-item {
    width: 100%;
    border-bottom: 0;
    white-space: nowrap;
    break-inside: avoid;
  }

  #locations .accordion-title {
    cursor: default;
    pointer-events: none;
  }

  #locations .accordion-title::before {
    display: none;
  }

  #locations .accordion-content {
    display: block !important;
  }

  #locations .accordion-content p {
    font-size: 14px;
    margin-bottom: 10px;
  }

  #locations .accordion-content p:last-child {
    margin-bottom: 0;
  }

  #locations .accordion-content a {
    cursor: default;
    pointer-events: none;
  }

  /* Contact */
  #contact,
  #contact .grid-x {
    min-height: calc(100vh - 144px);
  }

  /* Error 404 */
  #error,
  #error .grid-x {
    min-height: calc(100vh - 144px);
  }
}

/* Large Screens
-------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Layout
    -------------------------------------------------------------- */
  .grid-margin-x > .large-1 {
    width: calc(8.33333% - 40px);
  }
  .grid-margin-x > .large-2 {
    width: calc(16.66667% - 40px);
  }
  .grid-margin-x > .large-3 {
    width: calc(25% - 40px);
  }
  .grid-margin-x > .large-4 {
    width: calc(33.33333% - 40px);
  }
  .grid-margin-x > .large-5 {
    width: calc(41.66667% - 40px);
  }
  .grid-margin-x > .large-6 {
    width: calc(50% - 40px);
  }
  .grid-margin-x > .large-7 {
    width: calc(58.33333% - 40px);
  }
  .grid-margin-x > .large-8 {
    width: calc(66.66667% - 40px);
  }
  .grid-margin-x > .large-9 {
    width: calc(75% - 40px);
  }
  .grid-margin-x > .large-10 {
    width: calc(83.33333% - 40px);
  }
  .grid-margin-x > .large-11 {
    width: calc(91.66667% - 40px);
  }
  .grid-margin-x > .large-12 {
    width: calc(100% - 40px);
  }

  .grid-margin-x.large-up-1 > .cell {
    width: calc(100% - 40px);
  }
  .grid-margin-x.large-up-2 > .cell {
    width: calc(50% - 40px);
  }
  .grid-margin-x.large-up-3 > .cell {
    width: calc(33.33333% - 40px);
  }
  .grid-margin-x.large-up-4 > .cell {
    width: calc(25% - 40px);
  }

  .large-gutter-wide.grid-margin-x {
    margin-left: -40px;
    margin-right: -40px;
  }

  .large-gutter-wide.grid-margin-x > .cell {
    margin-left: 40px;
    margin-right: 40px;
  }

  .large-gutter-wide.grid-margin-x.large-up-1 > .cell {
    width: calc(100% - 80px);
  }
  .large-gutter-wide.grid-margin-x.large-up-2 > .cell {
    width: calc(50% - 80px);
  }
  .large-gutter-wide.grid-margin-x.large-up-3 > .cell {
    width: calc(33.33333% - 80px);
  }
  .large-gutter-wide.grid-margin-x.large-up-4 > .cell {
    width: calc(25% - 80px);
  }

  /* Text
    -------------------------------------------------------------- */
  h1 {
    font-size: 38px;
  }
  h2 {
    font-size: 34px;
  }
  h3 {
    font-size: 28px;
  }
  h4 {
    font-size: 24px;
  }
  h5 {
    font-size: 20px;
  }
  h6 {
    font-size: 18px;
  }

  p,
  label,
  li {
    font-size: 16px;
  }

  .large-text {
    font-size: 18px;
  }
  .small-text {
    font-size: 14px;
  }

  /* Inputs
    -------------------------------------------------------------- */
  [type="submit"],
  [type="button"],
  button,
  .button-main {
    font-size: 16px;
  }

  /* Forms
    -------------------------------------------------------------- */
  /* Quote Form */
  form#quoteform,
  form#contactform,
  form#storageform,
  .storagebookings {
    max-width: 500px;
    border-radius: 10px;
  }

  /* Header
    -------------------------------------------------------------- */
  #header .top-bar {
    border-top: none;
  }

  #header .button-line {
    border: none;
    padding-right: 0;
  }

  #header .button-line,
  #header .button-line:focus,
  #header .button-line:hover {
    background: transparent;
    border: none;
    padding-right: 0;
  }

  /* Sections
    -------------------------------------------------------------- */
  .section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .section .sidebar form#quoteform,
  .section .sidebar form#contactform {
    padding: 40px;
    max-width: 500px;
  }

  .section .sidebar form#storageform {
    max-width: 500px;
  }

  .section .sidebar form#storageform .form-container {
    padding: 40px;
  }

  form#storageform img {
    margin-bottom: 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  /* Bookings */
  .section .sidebar .storagebookings {
    max-width: 500px;
  }

  .section .sidebar .storagebookings .bookings-container {
    padding: 40px;
  }

  .storagebookings img {
    margin-bottom: 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  /* Quote */
  #quote .hero-wrapper .hero-image {
    background-image: url(https://glennremovals.co.uk/wp-content/themes/glennremovals/assets/images/hero-home-1600x1200.jpg);
  }

  /* Experience */
  #experience p {
    display: inline-block;
  }

  #experience p span {
    font-size: 38px;
    margin-right: 10px;
  }

  /* Locations */
  #locations .accordion {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 40px;
  }

  /* Services */
  #services img.thumb,
  #services img.feature {
    border-radius: 10px;
  }

  #services img.feature {
    margin-bottom: 40px;
  }

  #services a.card:hover {
    transform: translateY(-10px);
  }

  /* Process */
  #process .process-item {
    margin-top: 40px;
  }

  /* Contact */
  #contact .hero-image {
    background-image: url(https://glennremovals.co.uk/wp-content/themes/glennremovals/assets/images/hero-contact-2700x1600.jpg);
  }

  /* Error 404 */
  #error .hero-image {
    background-image: url(https://glennremovals.co.uk/wp-content/themes/glennremovals/assets/images/hero-contact-2700x1600.jpg);
  }

  #error .text-box {
    max-width: 500px;
  }
}

/* XLarge Screens
-------------------------------------------------------------- */
@media (min-width: 1100px) {
  /* Header
    -------------------------------------------------------------- */
  #header .top-bar-left li.menu-logo img {
    height: 55px;
  }

  #header .button-main,
  #header .top-bar-left .dropdown.menu > li > a.menu-item {
    line-height: 55px;
  }

  #header .top-bar-left li.menu-logo.removals img {
    height: 50px;
  }

  #header .button-main,
  #header .top-bar-left .dropdown.menu.removals > li > a.menu-item {
    line-height: 50px;
  }

  /* Footer
    -------------------------------------------------------------- */
  #footer .footer-left,
  #footer .footer-right,
  #footer ul {
    width: auto;
  }

  #footer .footer-left li.menu-logo {
    width: auto;
    padding: 0;
  }

  #footer .footer-left li.menu-logo img {
    height: 50px;
  }

  #footer .footer-left,
  #footer .footer-right {
    padding: 40px 20px;
  }
}

/* XXLarge Screens
-------------------------------------------------------------- */
@media (min-width: 1800px) {
  /* Text
    -------------------------------------------------------------- */
  h1 {
    font-size: 48px;
  }
  h2 {
    font-size: 42px;
  }

  /* Sections
    -------------------------------------------------------------- */
  .section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}