/*
Theme Name: The Plate Specialist
Author: Seven Hills Creative
Author URI: https://www.sevenhillscreative.co.uk/
Description: Another custom theme for a happy customer!
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2024.1
Requires at least: 5.2
Requires PHP: 7.0
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

@font-face {
  font-family: 'UKNumberPlate';
  src: url('/wp-content/uploads/UKNumberPlate.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* BASE */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    color: #1B1C1F;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    line-height: 1.5em;
    /* transition: all 0.4s ease; */
    /* outline: 1px solid red !important; */
}

html{
  overflow-x: hidden !important;
}

body{
  font-family: "Inter", sans-serif;
  overflow-x: hidden !important;
  position: relative;
  display: grid;

}

img {
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
}

@media only screen and (max-width: 1100px) {}
@media only screen and (max-width: 960px) {}
@media only screen and (max-width: 760px) {}
@media only screen and (max-width: 660px) {}
@media only screen and (max-width:  560px) {}
@media only screen and (max-width: 460px) {}
@media only screen and (max-width: 360px) {}
@media only screen and (max-width: 320px) {

    body, header, main, section, footer {
    width: 320px;
    
    }

}


/* LAYOUT */

section, article, main, nav, header {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-column: 1 / 17;
  justify-self: center;
  max-width: 2000px;
  width: 100%;
}

footer {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-column: 1 / 17;
  justify-self: center;
  max-width: 2000px;
  width: 100%;
  background-color: #0F5761;
}



/* TEXT */

h1, h2, h3, h4, h5, h6{
  color: #B18E59;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 40px;
  text-transform: uppercase;
}

h1{
  font-size: 2.25em;
  line-height: 1.2em;
}

h2{
  font-size: 2.25em;
  font-style: italic;
  font-weight: 700;
}

.entry-content h2{
  margin: 0.3em 0;
}

h3{
  font-size: 2.25em;
}

.entry-content h3{
  margin: 0.3em 0;
}

h4{
  font-size: 1.4em;
}

h5{
  font-size: 1.2em;
}

h6{
  font-size: 1.1em;
}


p{
  color: #1E1E1E;
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  font-size: 1em;
  font-weight: 400;
  margin-bottom: 0.3em;
  width: 100%;
}

ul,ol{
  font-family: "Inter", sans-serif;
  margin: 1.2em 0;
  padding: 0 6%;
}

ul {
  list-style: none;
}

ul.post-categories{
  margin: 0;
  padding: 0;
}

ul.post-categories li::before, ul.main-nav li::before, footer li::before {
  content: "";
  width: 0;
  margin-left: 0;
}

ul.main-nav{
  padding: 0;
}

ol{
  list-style-type: decimal;
}

li{
  color: #1E1E1E;
  font-family: "Inter", sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  width: 100%;
}

strong{
  font-weight: 700;
}

em{
  font-style: italic;
}

.underline{
  text-decoration: underline;
}

a{
  color: #B18E59;
  cursor: pointer !important;
  display: inline-block;
  text-decoration: none;
}

section.entry-content{
  justify-self: center;
  max-width: 1100px;
}

hr{
  background-color: #B18E59;
  border: 0;
  height: 1px;
  justify-self: center;
  margin: 2em 0;
  width: 80%;
}

table{
  margin: 2em 0;
}

td{
  line-height: 1.5;
}

blockquote{
  display: grid;
  width: 100%;
}

blockquote p{
  color: #B18E59;
  font-size: 2.2em;
  font-weight: 900;
  line-height: 1.2;
  max-width: 800px;
  text-align: center;
  justify-self: center;
}

blockquote cite{
  font-weight: 900;
  text-align: center;
  justify-self: center;
}

@media only screen and (max-width: 780px) {

h2{
  font-size: 1.25em;
}

h3{
  font-size: 1.25em;
}

h4{
  font-size: 0.875em;
}

h5{
 
}

h6{

}

}



/* SHARED ELEMENTS */


/* OVERALL BUTTON */
a.button {
  position: relative; 
  color: black;
  font-weight: 700;
  justify-self: start;
  padding: 1em 2em;
  border: 2px solid transparent;
  transition: all 0.3s;
  z-index: 2 !important;
  text-decoration: none;
  cursor: pointer;
}


/* YELLOW BUTTON */
a.button-yellow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180.3deg, rgba(242, 211, 9, 0.9) 5.36%, rgba(159, 139, 6, 0.9) 157.77%);
  transform: skewX(-20deg); 
  border-radius: 5px;
  z-index: -1
}

a.button-yellow:hover::before {
  background: transparent; 
  border: 1px solid black;
}



/* GREY BUTTON */
a.button-grey::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #D9D9D9 -11.9%, #737373 169.05%);
  transform: skewX(-20deg); 
  border-radius: 5px;
  z-index: -1
}

a.button-grey:hover::before {
  background: transparent; 
  border: 2px solid #D9D9D9E5;
}




@media only screen and (max-width: 760px) {

  /* OVERALL BUTTON */
  a.button {
    font-size: 14px;
  }

}




/* FORMS */

.wpcf7-form input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], select, textarea {width:100% !important;}

.mobile-blue-section {
  background: #296065;
  padding: 2em 0;
}

.mobile-blue-section-mobile {
  display: grid;
  gap: 1em;
}

.call-us {
    justify-content: center;
    /* max-width: 280px; */
    justify-self: center;
}

.call-us-mobile {
    display: grid;
    grid-column: 1 / 17;
    gap: 1em;
}

.call-us-mobile a {
  padding: 0.5em !important;
}

.call-us a{
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  padding: 0.5em;    
  gap: 0.5em;   
  position: relative;
}

.call-us a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(14.99deg, #737373 -52.92%, #D9D9D9 98.29%);
  transform: skewX(-20deg);
  border-radius: 5px;
}

.call-us a, .call-us a p, .call-us a i, .call-us a label {
  color: #1E1E1E;
  margin-bottom: 0;
  z-index: 3;
  text-align: center;
}

.call-us a {
  font-weight: 700;
}

.call-us a i {
  font-size: 1.78em;
  color: #0F5761;
}


/* MENU */

@media only screen and (min-width: 4000px) {

  #hamburger-input:checked, #hamburger-menu #sidebar-menu{
      display: none;
  }

  .grid-header-section {
      display: grid;      
      z-index: 2;
      background-color: #1E1E1E;
      margin: 2em 0;
  }

  .grid-header-outer {
      display: grid;
      grid-template-columns: auto 1fr 25%;
      grid-column: 2 / 16;
      align-items: center;    
  }

  .grid-header-outer a img{
      max-width: 93px;
      width: 100%;
      display: grid;
      height: auto;
  }

  .header-menu {
      display: grid;
  }

  .header-menu-logo img {
    position: absolute;
    top: 0.8em;
  }

  .header-menu ul{
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      text-align: center;
      align-items: center;
      justify-self: end;
  }

  .header-menu ul li {
      list-style: none;
      padding: 0 1em;
  }

  .header-menu ul a span {
    color: #fff;
  }

  .header-menu a {
      font-size: 1em;
      font-weight: 400;
  }
  
  #hamburger-input, .overlay, #hamburger-menu, #sidebar-menu, .header-bar  {
      display: none;
  }

  .menu-button {
      justify-self: end;
  }




  /* SUB MENU */

  .menu-item .sub-menu {
      display: none;
  }

  .menu-item .sub-menu .menu-item .sub-menu {
      display: none;
  }

  .menu-item .sub-menu .menu-item a {
      color:#fff;
      font-size: 1em;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: 0.05em;
  }

  .menu-item .sub-menu .menu-item a:hover {
      font-weight: 700;
      color:#B8BE62;
  }

  /* .menu-item .sub-menu { */
  .menu-item:hover .sub-menu {
      display: grid;
      grid-template-columns: 1fr;
      width: 15%;
      gap: 1em;
      background-color: #374456;
      padding: 2em;
      text-align: left;
      z-index: 50 !important;    
      justify-self: center;
      margin: auto;
      border-top: 1.39em white solid;   
      position: absolute; 
  }

  .menu-item .sub-menu  {
      position: relative;
  }
  
  .menu-item .sub-menu :before {
      content: '';
      position: absolute;
      top: -19px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 10px;
      border-style: solid;
      border-color: transparent transparent #374456 transparent; 
      z-index: 20;
  }

  .menu-item .sub-menu .menu-item {
      padding: 1em;
  }

  .logo {
      z-index: 21;
      justify-self: center;
  }



/* SUB SUB MENU */

.menu-item .sub-menu .menu-item .sub-menu li{
  padding: 0;
  justify-self: left;
  display: grid;
}

.menu-item .sub-menu .menu-item .sub-menu a span {
  font-size: 1em;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0em;
}

.menu-item:hover .sub-menu .menu-item .sub-menu{
  border-top: none;
}

/* .menu-item .sub-menu .menu-item:hover .sub-menu {  */
.menu-item .sub-menu .menu-item .sub-menu {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0em;
      padding: 0;
      top: 0;
      align-content: center;
      border-top: none;
      position: relative;
      margin: 0;
      padding-left: 1em;
  }

.menu-item .sub-menu .menu-item .sub-menu .menu-item a span{
    display: grid;
    justify-items: left;
    padding: 1em 0;
  }

}


  

/* RESPONSIVE MENU UNCLICKED */
@media only screen and (max-width: 4000px) {

  .grid-header-outer{
      display: none;
  }

  .outer-header-bar {
    display: grid;
    grid-template-columns: repeat(16,1fr);
    grid-column:  1 / 17;
    background-color: #1E1E1E;
    margin: 2em 0;
    z-index: 10;
  }

  .header-bar {
      display:grid;
      grid-template-columns: 60% auto auto;
      grid-column:  2 / 16; 
      align-self: center;
      margin: 1em 0;
  }

  .header-menu-logo img {
    position: absolute;
    top: 1.1em;
  }

  .header-tel {
    justify-self: right !important;
    color: #B18E59 !important;
    font-family: "Inter", sans-serif;
    font-size: 22px;
  }


  .header-bar i {
    color: #B18E59;
    align-self: center;
    font-size: 22px;
  }

  .header-bar-tel i {
    margin-right: 1em;
  }

  .header-bar a {
      justify-self: left;
  }
  
  .header-bar img{
      max-width: 75px;
      width: 100%;
      object-fit: contain;
      height: auto;
  }

  .responsive-menu {
      align-self: center;
  }

  #sidebar-menu ul li a span {
      color: #fff;
  }

  .menu-icon {
      width: 33px;
      height: 2px;
      background-color: #B18E59;
      margin: 3px 0;
  }

  .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity .35s, visibility .35s, height .35s;
      overflow: hidden;
      background: #B18E59;
  }
  
  #hamburger-input{
      display: none;
  }
  
  #hamburger-menu {
      display: flex;
      align-items: end;
      flex-direction: column;
  }

  #hamburger-menu #sidebar-menu {
      grid-template-columns: 1fr;
      visibility: hidden;
      position: fixed;
      top: 0;
      right: -100%;
      width: 50%;
      background-color: #B18E59;
      transition: 0.3s;
      box-sizing: border-box;
      z-index: 20;
  }

  #hamburger-menu ul {
      margin: 3em 0;
      width: 100%;
  }

  #hamburger-menu ul .sub-menu{
      margin: 1em 0 1em 1em;
  }

  #hamburger-menu ul .sub-menu li {
      border-bottom: none;
  }

  #hamburger-menu li {
      list-style-type: none;
      padding: 0.5em 0;
      border-bottom: 1px solid white;
  }

  #hamburger-menu a {
      color: white;
      text-decoration: none;
      transition: transform 0.5s;
      align-items: center;
      display: grid;
      padding: 0.5em 0;
  }

  .flyout-menu-logo{
    background-color: #1E1E1E;
    height: 60px;
    margin: 1em 0 0 0;
  }

  .flyout-menu-logo img{
    position: absolute;
    top: 1.2em;
    left: 1em;
  }

  .side-menu-button {
      padding: 12px 26px !important;
      display: grid !important;
  }

  #hamburger-menu a:active{
      -ms-transform: translateX(30px);
      -webkit-transform: translateX(30px);
      transform: translateX(3px);
  }

  #hamburger-input:checked + #hamburger-menu #sidebar-menu {
      visibility: visible;
      right: 0;
  }

  .side-bar-contacts {
      display: grid;
      width: 100%;
      margin-bottom: 10em;
  }

  /* Scroll Side Menu */
  #sidebar-menu {
      height: 100vh;
      overflow-y: auto;
  }

}



@media only screen and (max-width: 1350px) {

  #hamburger-menu #sidebar-menu {
    width: 100%;
  }

}



@media only screen and (max-width: 800px) {

    .header-main-tel {
      grid-template-columns: 25% auto auto;
}

.header-main-tel .header-bar-tel {
  font-size: 16px;
}



  .header-bar-tel i {
    margin: 0;
  }

  .call-us a, .call-us a p, .call-us a i, .call-us a label {
    font-size: 18px;
  }
  
}



/* BANNER */

section.banner{
  grid-template-columns: 1fr;
  min-height: 100vh;
  max-width: 100%;
  padding: 0;
  position: relative;
  width: 100%;
  margin-top: -10em;
}

div.overlay-banner{
  background: rgba(177, 142, 89, 0.9);
  justify-self: center;
  width: 50%;
  height: 100%;
  max-width: 364px;
  padding: 5em 1em;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}

div.overlay-banner h1 {
  color: #fff;
  text-align: center;
  align-self: end;
  font-style: italic;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.6em;
}

div.overlay-banner h1 strong {
  font-weight: 700;
  color: #fff;
  font-size: 36px;
}

div.overlay-banner-links {
  align-self: end;
  justify-self: center;
}

.overlay-banner-links .single-cpt strong {
  font-weight: 900;
}

.banner-overlay {
  position: relative;
}

.banner-car-reg-overlay {
  position: absolute;
  align-self: center;
  margin-top: 12.5%;
  left: 19.5%;
  background: #fff;
  padding: 0.7em 0;
  border-radius: 5px;
  width: 12%;
  text-align: center;
}

.banner-car-reg-overlay h3 {
  font-family: 'UKNumberPlate';
  line-height: 1;
}


@media only screen and (max-width: 2100px) {

  .banner-car-reg-overlay {
    padding: 0.6em 0;
  }
}

@media only screen and (max-width: 1500px) {

  .banner-car-reg-overlay {
    padding: 0.3em 0;
  }

  .banner-car-reg-overlay h3 {
    font-size: 2em;
  }
}


@media only screen and (max-width: 1100px) {

  .banner-car-reg-overlay {
    padding: 0.5em 0;
    width: 13%;
    left: 19.5%;
  }

  .banner-car-reg-overlay h3 {
    font-size: 1em;
  }
}



@media only screen and (max-width: 760px) {

  section.banner {
    z-index: 1;
  }

  div.overlay-banner{
    width: 179px;
    padding: 5em 0.5em;
  }

  div.overlay-banner h1 {
    font-size: 1em;
  }
  
  div.overlay-banner h1 strong {
    font-size: 1.25em;
  }

  
div.overlay-banner-links {
  display: grid;
}

}


@media only screen and (max-width: 650px) {

  .banner-car-reg-overlay {
    left: auto;
    justify-self: center;
    margin-left: -18em;
    width: 5em;
    margin-top: 5em;
  }

  .banner-car-reg-overlay h3 {
    line-height: 0.5em;
  }

}


/* SEARCH */


div.site-search{
  display: grid;
  grid-template-columns: 1fr;;
  gap: 1.5em;
  position: relative;
  border-radius: 10px;
  align-self: center;
  margin-top: -4em;
}

section.site-search h2 {
  display: grid;
  grid-column: 2 / 16;
  text-align: center;
  padding-bottom: 1em;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.2em;
}

.search-form {
  display: flex;
  border: none;
  border-radius: 10px;
  min-width: 584px;
  justify-self: center;
  width: 100%;
  justify-content: right;
  position: absolute;
  z-index: 1;
}

.search-form input[type="text"]::placeholder {   
  text-align: left;
  font-family: 'UKNumberPlate';
}

.search-form input[type="text"] { 
  margin: 0 0.2em 0 0;
  background: linear-gradient(180deg, #F2D309 0%, #8C7A05 143.24%);
  box-shadow: 0px 4px 4px 0px #00000040;
  border-radius: 10px 0 0 10px;
  height: 102px;
  font-family: 'UKNumberPlate';
}

.search-field {
  flex: 1;
  border: none !important;
  padding: 10px !important;
  outline: none;
  font-size: 2em;
  font-weight: 400;
  width: 10px;
}

.search-field::placeholder {
  color: #1E1E1E;
}

.search-submit {
  background: linear-gradient(180deg, #F2D309 0%, #8C7A05 143.24%);
  box-shadow: 0px 4px 4px 0px #00000040;
  border: none;
  cursor: pointer;
  padding: 0 2em;
  border-radius: 0 10px 10px 0;
}

.search-submit i {
  font-size: 2.87em;
  color: #1E1E1E;
}


@media only screen and (max-width: 760px) {
  .search-form {
    min-width: 362px;
    z-index: 90;
  }

  .search-field {
    padding: 10px;
    font-size: 1em;
  }

}

@media only screen and (max-width: 460px) {
  .search-form {
    min-width: 294px;
  }

  .search-form input[type="text"] {
    height: 63px;
  }

  .search-submit i {
    font-size: 2.0625em;
    color: #1E1E1E;
  }

  .search-submit {
    padding: 0 0.5em;
  }

}





/* ///// WP ///// */

.has-text-align-left{
  text-align: left !important;
}

.has-text-align-right{
  text-align: right !important;
}

.has-text-align-center{
  text-align: center !important;
}




/* FEATURED PLATES */

section.featured-plates {
  margin: 5em 0;
}

section.featured-plates h2, section.featured-plates p, .featured-link {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 2 / 16;
  text-align: center;
  justify-self: center;
  margin-bottom: 1em;
}

section.featured-plates p {
  max-width: 660px;
}

.outer-featured-plates {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column: 2 / 16;
  gap: 1em;
}

div.featured-plates-box {
  margin: 2em 0;
}

div.plate-title {
  border-radius: 10px;
  background-color: #F2D309;
  width: 100%;
  min-width: 250px;
}

div.plate-title h3 {
  font-size: 2.5em;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
  color: #1E1E1E;
  padding: 0.5em;
  font-family: 'UKNumberPlate';
}

div.featured-box-content {
  display: grid;
  grid-template-columns: auto;
  text-align: left;
  }

div.featured-box-content h4 {
  font-size: 14px;
  font-weight: 400;
  color: #0F5761;
}

.featured-price {
  /* justify-self: end; */
  font-size: 32px;
  font-weight: 700;
  padding: 1em 0;
}

.outer-featured-plates .featured-price{
  font-size: 22px;
}



@media only screen and (max-width: 1600px) {

  .outer-featured-plates {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media only screen and (max-width: 1350px) {

  .outer-featured-plates {
    grid-template-columns: repeat(4, 1fr);
  }

  section.featured-plates {
    margin: 3em 0;
  }
}



@media only screen and (max-width: 1050px) {

  .outer-featured-plates {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media only screen and (max-width: 780px) {

  .outer-featured-plates {
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
  }

  div.featured-plates-box {
    margin: 1em 0;
  }

  div.plate-title {
    width: 0;
    justify-self: center;
    min-width: 130px;
  }

  div.plate-title h3 {
    padding: 0;
    font-size: 24px;
}

div.featured-box-content {

  text-align: center;
  }


  .featured-price {
    font-size: 16px;
  }

  .outer-featured-plates .featured-price {
    font-size: 16px;
  }
}






/* 50 / 50 TEXT IMAGE CTA */

.opening-banner {
  background-color: #1E1E1E;
}

.opening-banner h3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 2 / 16;
  text-align: center;
  font-size: 1.5em;
  font-style: italic;
  font-weight: 700;
  color: #fff;
  padding: 0.5em 0;
}

.text-image-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / 17;
}

.text-image-cta img {
  aspect-ratio: 1 / 1;
}

.cta-content {
  background-color: #B18E59;
  display: grid;
}

.cta-content a{
  color: #fff;
  font-weight: 700;
}

.inner-cta-content {
  align-self: center;
  justify-self: center;
  display: grid;
  gap: 1em;
  padding: 5em;
}

.inner-cta-content p label {
  display: grid;
  font-size: 1.5em;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  justify-items: center;
}

.inner-cta-content h2 {
  text-align: center;
  color: #fff;
  text-transform: uppercase;
}

.inner-cta-content h2 strong {
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  color: #1E1E1E;
  line-height: 100px;
  text-transform: uppercase;
}

.cta-button {
  justify-self: center !important;
}




@media only screen and (max-width: 1150px) {

  .text-image-cta {
    grid-template-columns: 1fr;
  }

  /* .text-image-cta img {
    max-height: 290px;
  } */

  .inner-cta-content {
    margin: 5em 0;
  }
  
  .inner-cta-content p label {
    font-size: 1.25em;
  }

  .inner-cta-content h2 {
    font-size: 2.25em;
  }

  .inner-cta-content h2 strong {
    font-size: 2em;
  }

  .opening-banner h3 {
    grid-column: 1 / 17;
    font-size: 1.25em;
  }

}







/* SELLING YOUR PLATES */

.sell-plates {
  margin: 5em 0;
}

.sell-plates span {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 2 / 16;
}

.sell-plates span h2 {
  text-align: center;
  line-height: 40px;
}

.sell-plates span p {
  font-size: 1.5em;
  font-style: italic;
  text-align: center;
  color: #B18E59E5;
  max-width: 100%;
  text-transform: uppercase;
}

.inner-sell-plates {
  background-color: #0F5761;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column: 3 / 15;
  gap: 3em;
  border-radius: 10px;
  padding: 3em;
  margin: 2em 0;
}

.sell-area p, .sell-area li{
  color: #fff;
  margin-bottom: 1em;
}

.sell-area ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sell-area li {
  position: relative;
  padding-left: 10px;
}

.sell-area ul li::before {
  content: '\f068'; 
  font-family: "Font Awesome 5 Free";
  position: absolute; 
  left: 0;
  top: 10px;
  color: #F2D309E5;
  font-size: 2em;
  transform: rotate(120deg);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}




@media only screen and (max-width: 900px) {

  .sell-plates {
    margin: 3em 0;
  } 

  .inner-sell-plates {
    grid-template-columns: 1fr;
    grid-column: 2 / 16;
    padding: 3em 1em;
    gap: 1em;
  }

  .sell-area li::before {
    left: 0.5em;
  }

  .sell-area li {
    padding-left: 1.5em;
  }

  .sell-plates span p {
    font-size: 1em;
  }

  .sell-area ul li::before {
    left: 0.5em;
  }
  
}









/* 50 / 50 TEXT */

.image-grid-display {
  margin: 0 0 4em 0;
}

.image-grid-display h2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 3 / 15;
  text-align: center;
  margin-bottom: 1em;
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column: 3 / 15;
  gap: 2em;
}

.image-grid img {
  width: 100%;
  max-height: 437px;
  object-fit: cover;
  border-radius: 10px;
}

.inner-text-container {
  display: grid;
  align-self: center;
  row-gap: 2em;
}


@media only screen and (max-width: 860px) {

  .image-grid {
    grid-template-columns: 1fr;
    grid-column: 2 / 16;
    gap: 1em;
  }

  .image-grid img {
    max-height: 312px;
  }

  .inner-text-container {
    row-gap: 1em;
  }

}



/* WHY CHOOSE US */

.inner-cta-content-why-us h2, .inner-cta-content-why-us p label{
  text-align: left;
  justify-items: left;
}

.inner-cta-content-why-us h2 {
    font-size: 2em;
  }


.why-us-links {
  justify-self: left !important;
  display: block !important;
}


@media only screen and (max-width: 860px) {
  .text-image-cta .cta-content {
    display: flex;
    flex-direction: column;
    order: 2;
  }

  .inner-cta-content, .inner-cta-content-why-us {
    margin: 1em 0;
    padding: 2em 1em;
    /* text-align: center; */
  
  }

  .inner-cta-content-why-us img {
    order: 1;
  }
}








/* REVIEW AND BLOG SLIDER */

.reviews, .blogs-mobile {
  text-align: center;
  padding: 8em 0;
}

.google-reviews {
  padding: 4em 0;
}

.google-reviews h2 {
  grid-column: 2 / 16;
  text-align: center;
}

.reviews-outer {
  display: grid;
  grid-column: 2 / 16;
  padding: 4em 0;
}

.blogs-outer {
  display: grid;
  grid-column: 2 / 16;
  background: #D9D9D9;
  border-radius: 10px;
}

.reviews-outer h2 {
  margin-bottom: 2em;
}

.review-slider, .blog-slider {
  overflow: hidden;
  position: relative;
  display: flex;
}

.reviews-container, .blog-container {
  display: flex;
  flex: 0 0 33.3%;
  transition: transform 0.5s ease-in-out;
}

.review, .blog-boxm {
  margin-right: 2em;
  width: 400px;
  text-align: left;
  display: grid;
  gap: 1em;
}

.review h5 {
  font-size: 1em;
  font-weight: 700;
  color: #11271A;
  text-transform: capitalize;
}

.review-stars i{
  font-size: 23px;
  color: #B18E59E5;
}

.slider-arrows {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.blog-slider-arrows {
  display: flex;
  justify-content: end;
  margin: 0 0 20px 0;
  padding-right: 1em;
}


.prev-arrow, .prev-arrowb {
  margin-right: 10px;
}

.next-arrow, .next-arrowb {
  margin-left: 10px;
}

.prev-arrow,
.next-arrow,
.prev-arrowb,
.next-arrowb  {
  font-size: 33px;
  cursor: pointer;
}

.prev-arrow i,
.next-arrow i,
.prev-arrowb i,
.next-arrowb i  {
  color: #0F5761;
}


@media only screen and (max-width: 900px) {

    .blogs-mobile{
      padding: 0;
    }

    .reviews {
      padding: 2em 0;
    }

    .reviews-outer h2 {
      margin-bottom: 0;
    }

    .reviews-outer  {
      grid-column: 3 / 15;
      gap: 1em;
      padding: 2em 0 0;
  }

  .google-reviews {
    padding: 3em 0;
  }


  .blogs-outer {
    grid-column: 2 / 16;
    gap: 0em;
  }
  
    .reviews-container, .blog-container {
      flex: 0 0 100%;
    }

    .review {
      width: 240px;
      margin-right: 0.5em;
    }

    .blog-boxm {
      width: 280px;
      margin-right: 0.5em;
      padding: 1em;
    }


    .prev-arrow i, .next-arrow i, .prev-arrowb i, .next-arrowb i {
      font-size: 25px;
    }
}


@media only screen and (max-width: 360px) {

  .review {
    margin-right: 0em;

  } 
  
  .blog-boxm {
    margin-right: 0em;

  }
 
}








/* PROCESS */

section.process {
  padding: 4em 0;
}

section.process h2, section.process p {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 2 / 16;
  text-align: center;
  padding-bottom: 1em;
  color: #fff;
}

section.process h2 {
  font-size: 2em;
}

section.process p {
  padding-bottom: 0
}

section.process p label {
  font-size: 1.25em;
  font-style: italic;
  justify-self: center;
  color: #fff;
}

.packages-sub {
  margin: 0 0 8em 0;
}

.outer-process-boxes {
  display: grid;
  grid-template-columns: 1fr 8em 1fr 8em 1fr 8em 1fr;
  grid-column: 2 / 16;
  z-index: 20;
}

.process-box {
  text-align: center;
  display: grid;
  gap: 1em;
}

.dashes {
  border-bottom: 10px dashed #0F5761;
  align-self: start;
  margin-top: 5em;
}

.dashes:nth-last-child(1) {
  display: none;
}

.process-box-icon {
  width: 160px;
  height: 160px;
  border: 10px solid #0F5761;
  border-radius: 50em;
  justify-self: center;
  align-content: center;
}

.process-box-icon i {
  font-size: 64px;
  min-height: 2em;
  align-content: center;
  color: #fff;
}

.process-box-content h4 {
  font-size: 1.5em;
  font-weight: 600;
  color: #fff;
  font-style: italic;
}

.process-box-content p {
  font-size: 1em !important;
  font-weight: 400 !important;
  text-align: center !important;
  color: #fff !important;
  font-style: normal !important;
}


@media only screen and (max-width: 1300px) {

  .outer-process-boxes {
    grid-template-columns: 1fr 4em 1fr 4em 1fr 4em 1fr;
  }

}


@media only screen and (max-width: 1000px) {
  .outer-process-boxes {
    grid-template-columns: 1fr;
    grid-column: 3 / 15;
    gap: 1em
  }

  .dashes {
    border-right: 10px dashed #0F5761;
    align-self: start;
    margin-top: 0;
    height: 8em;
    border-bottom: 0;
    justify-self: center;
  }
}










/* FEATURED BLOG */

.featured-blog {
  margin: 3em 0;
}

section.featured-blog h2, section.featured-blog h3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 3 / 15;
  text-align: left;
  max-width: 100%;
  /* margin-bottom: 2em; */
}

section.featured-blog h3 {
  margin-bottom: 0;
}

.featured-title {
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 40px;
  text-transform: uppercase;
  color: #B18E59;
}

section.featured-blog span {
  font-weight: 700;
  color: #B18E59;
}

.outer-blog-boxes {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 3 / 15;
  gap: 1em;
}

.featured-blog-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3em;
}

.blog-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1em;
}

.blog-details ul {
  justify-self: end;
}

.blog-details ul li a {
  color: #1E1E1E;
}

.featured-blog-box img {
  border-radius: 10px;
  height: 100%;
}

.featured-blog-box h4 {
  font-size: 2.25em;
  font-weight: 700;
  line-height: 43.57px;
  letter-spacing: 0.15em;
}

.featured-blog-contents {
  align-self: center;
}


@media only screen and (max-width: 960px) { 

  .outer-blog-boxes, section.featured-blog h2, section.featured-blog h3 {
    grid-column: 2 / 16;
  }

  section.featured-blog h3 {
    display: block;
    line-height: 1.5;
    margin-bottom: 1em;
  }

  .featured-blog-box {
    grid-template-columns: 1fr;
    gap: 1em;
  }

  .featured-blog-box img {
    order: 1;
    max-height: 200px;
  }

  .featured-blog-contents {
    order: 2;
  }

  .featured-blog-box h4 {
    font-size: 1.5em;
    line-height: 29.05px;
    letter-spacing: 0.15em;
  }

  section.featured-blog label {
    font-size: 1em;   
  }
  
  
}




/* BLOG */

.blogs-mobile {
  display: none;
}

.blog-grid {
  grid-column: 3 / 15;
  background-color: #D9D9D9E5;
  border-radius: 10px;
  padding: 2em;
  margin: 0 0 3em 0;
}

.blog-grid h2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1 / 17;
  margin-bottom: 1em;
}

.blog-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column: 1/ 17;
  gap: 2em; 
}

.blog-box {
  display: grid;
  gap: 1em
}

.blog-box-img a {
  width: 100%;
}

.blog-box-img img{
  height: 179px;
  border-radius: 10PX;
}

.blog-content {
  display: grid;
  gap: 0.5em;
}

.blog-content H3 {
  font-size: 1EM;
  font-weight: 700;
  line-height: 19.36px;
  letter-spacing: 0.15em;
  color: #1B1C1F;
}

.blog-content ul li a {
  color: #1E1E1E;
}


@media only screen and (max-width: 1000px) { 

  .blog-boxes {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media only screen and (max-width: 750px) { 

  .blog-grid {
    display: none;
  }
  
  .blogs-mobile {
    display: grid;
    margin: 0 0 3em 0;
  }

}



/* BLOG ARCHIVE */

.blog-archive {
  margin: 5em 0;
}

.post-details-blog {
  display: grid;
  gap: 0.5em;
}

@media only screen and (max-width: 600px) { 

  .blog-boxes-archive {
  
    grid-template-columns: 1fr;

  }

}






/* SINGLE POST */

.inner-single-post {
  display: grid;
  grid-column: 2 / 16;
  max-width: 800px;
  width: 100%;
  justify-self: center;
  margin: 4em 0;
}

.single-blog-details {
  display: flex;
  background-color: #B18E59;
  padding: 0.5em 0;
  margin-bottom: 2em;
}

.single-blog-details, .single-blog-details .date-blog, .single-blog-details .category-blog a, .single-blog-details .category-blog{
  color: white;
  padding-left: 0.5em;
  align-items: center;
}

.inner-single-post li{
  list-style: disc;
}

.category-blog .post-categories li{
  list-style: none;
}

.inner-single-post .wp-block-image {
  margin: 2em 0;
}

.inner-single-post li{
  font-size: 1em;
  font-weight: 400;
  margin-left: 1em;
}












/* FAQs */
.faq-contact {
  margin: 5em 0;
}

.inner-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column: 3 / 15;
  gap: 2em;
}

.faq-image {
  align-self: center;
}

.faq-image img{
  border-radius: 10px;
  max-height: 555px;
}

.faq-container {
  display: grid;
  align-self: center;
}

.faq-container h2 {
  display: grid;
  grid-template-columns: 1fr;
  text-align: left;
  color: #B18E59;
  margin-bottom: 0.5em;
  border-radius: 10px 10px 0 0;
  background: #D9D9D9;
  padding: 0.5em;
  font-size: 32px;
  font-style: italic;
  font-weight: 700;
  line-height: 40px;
}

.faq-one {
  margin-bottom: 1em;
  background: #D9D9D9;
  border-radius: 10px;
  border: none;
}

.faq-one h3 p {
  font-size: 14px;
  font-weight: 700;
  line-height: 16.94px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.faq-page {
  color:white;
  cursor: pointer;
  padding: 1em;
  outline: none;
  transition: 0.4s;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  align-items: center;
  text-transform: capitalize;
  word-break: break-word;
  display: flex;
}

.faq-body {
  display: none;
  overflow: hidden;
  padding: 1em;
}

.faq-body p, .faq-body p a {
  color: white;
  margin-bottom: 1em;
}

.faq-body ul li {
  color: white;
  margin-bottom: 1em;
  margin-left: 2em;
  list-style: disc;
}

.faq-page:after {
  color: #0F5761;
  font-family: 'FontAwesome';
  content: '\f055';
  float: right;
}

.faq-page.active:after {
  color: #0F5761;
  content: '\f056';
}


@media only screen and (max-width: 960px) {

  .inner-faq {
    grid-template-columns: 1fr;
    grid-column: 2 / 16;
    margin: 3em 0;
  }

  .faq-image{
    display: none;
  }


}


.inner-enquiry-form {
  position: relative;
}

.wpcf7 form.sent .wpcf7-response-output {
  bottom: -1em;
  background: #b18e59;
  width: 100%;
  color: #fff;
  padding: 3em 5em !important;
  z-index: 9999;
  margin: 0 !important;
  border: 1px solid #fff !important;
  border-radius: 5px;
}









/* FOOTER */

.mobile-footer {
  display: none;
}

.footer h3 {
  display: grid;
  grid-column: 2 / 16;
  text-align: center;
}

.footer-areas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column: 2 / 16;
  padding: 5em 0;
}

.footer-box {
  justify-self: left;
  display: grid;
  align-self: start;
}

.footer-box .copy-right {
  color: #fff;
}

.footer-box-menu {
  justify-self: center;
}

.footer-logo img {
  width: 93px;
  height: 91px;
}

.footer-box li {
  padding: 0.5em 0;
  list-style: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  letter-spacing: 0.15em;
}

.footer-box ul, .footer-box ol {
  padding: 0;
  list-style: none;
}

.footer-box label{
  color: #8C7A05;
  font-size: 14px;
  font-weight: 700;
  line-height: 16.94px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer-box li a span {
  color: #fff;
}

.footer-box h5 {
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  letter-spacing: 0.15em;
  color: #fff;
}

.footer-box-content {
  display: grid;
  gap: 2em;
}

.social-link i{
  color: #fff;
  font-size: 30px;
  padding: 0 0.2em;
}




@media only screen and (max-width: 860px) {

  .mobile-footer {
      display: grid;
      grid-template-columns: 1fr;
      align-self: center;
      padding: 3em 2em;
      border-radius: 5px;
  }

  .footer {
      display: none;
  }

  .footer-logo img {
    width: 82px;
    height: 80px;
  }
  

  .footer-one {
      margin-bottom: 0.5em;
      background: transparent;
      border: none;
      display: grid;
      border-bottom: 1px solid #fff;
  }
  
  .footer-page {     
      cursor: pointer;
      padding: 1em 0;
      outline: none;
      transition: 0.4s;
      color: #8C7A05;
      font-size: 14px;
      font-weight: 700;
      line-height: 16.94px;
      letter-spacing: 0.15em;
      text-transform: uppercase;      
  }
  
  .footer-body {
      display: none;
      overflow: hidden;
  }
  
  .footer-body p, .footer-body a label, .footer-body label {
      color: #0B233B;
      margin-bottom: 1em;
      font-size: 16px;
      font-weight: 400;
  }
  
  .footer-page:after {
      color: #fff;
      content: '\2304\fe0e';
      float: right;
  }
  
  .active:after {
      color: #fff;
      content: "\2303\fe0e"; 
  }

  .footer-one li {
      margin-bottom: 1em;
  }

  .footer-box-content {
    display: grid;
    gap: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid #fff;
    width: 100%;
  }

  .footer-body li a span {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 16.94px;
    letter-spacing: 0.15em;
  }


  .footer-body ul {
    padding: 0;
  }
  
}





/* SEARCH PAGE */

/* SEARCH BAR */

section.search-results {
  background: #0F5761;
  margin-top: -3em;
  padding: 3em 0 2em 0;
}

div.site-search-results{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5em;
  border-radius: 10px;
  align-self: center;
  grid-column: 2 / 16;
}

.search-form-search {
  display: flex;
  border: none;
  border-radius: 10px;
  min-width: 584px;
  justify-self: center;
}

.search-form-search input[type="text"] { 
  margin: 0 0.1em 0 0;
  background: linear-gradient(180deg, #F2D309 0%, #8C7A05 143.24%);
  box-shadow: 0px 4px 4px 0px #00000040;
  border-radius: 10px 0 0 10px;
  height: 84px;
  font-family: 'UKNumberPlate';
}

.search-form-search input[type="text"]::placeholder {   
  text-align: left;
  font-family: 'UKNumberPlate';
}


@media only screen and (max-width: 700px) {
  .search-form-search {
    min-width: 450px;
  }  

  .search-form-search input[type="text"] { 
    height: 60px;
  }
}

@media only screen and (max-width: 550px) {
  .search-form-search {
    min-width: 350px;
  }  
}

@media only screen and (max-width: 450px) {
  .search-form-search {
    min-width: 270px;
  }  
}

/* PLATES RESULTS */

section.plate-cat h1 {
  grid-template-columns: 1fr;
  grid-column: 2 / 16;
}

div.plate-cat-outer {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-column: 1 / 17;
  align-items: center;
  padding: 5em 0;
}

 div.plate-cat-inner{
  grid-column: 2 / 16;
  display: grid;
  gap: 1em;
}

div.plate-cat-inner p {
  text-transform: uppercase;
}

section.plate-cat header {
  margin-top: 2em;
}

section.plate-cat h1 {
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 40px;
}

.search-plates-box {
  grid-template-columns: repeat(5, auto);
  grid-column: 1 / 17;
  display: grid;
  gap: 2em;
  align-items: center;
}

.search-plates-box a {
  justify-self: end;
}

.search-plate-link {
  text-decoration: underline;
  color: #fff;
}

.plate-price {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 40px;
}

body.plates-template-default .plate-price {
  font-size: 32px;
}

.similar-not-found {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-column: 1 / 17;
  justify-self: center;
  max-width: 2000px;
  width: 100%;
  margin: 2em 0;
}

.similar-not-found p {
    grid-column: 2/16;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 40px;color: #B18E59;
    text-transform: uppercase;
}


@media only screen and (max-width: 1250px) {

  div.featured-plates-box {
    margin: 0;
  }

}

@media only screen and (max-width: 1125px) {

  .search-plates-box {
    grid-template-columns: 1fr;   
    margin: 4em 0;
    column-gap: 0.5em;
    align-items: center;
    row-gap: 1em;
    text-align: center;
  }

  .search-plate-image, .search-plates-box .divtest{
    grid-column-start: span 2;
  }

  .search-plate-link {
    justify-self: center !important;
  }

}

@media only screen and (max-width: 450px) {

  section.plate-cat header {
    margin-top: 4em;
  }

}



/* SIMILAR PLATES */

.similar-items {
  margin: 5em 0;
  gap: 2em;
}

.similar-items h2 {
    grid-template-columns: 1fr;
    grid-column: 3 / 15;
}

.outer-plate-box {
    grid-column: 2 / 16;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    margin: 2em 0;
}

.load-more-button {
  grid-column: 3 / 15;
  justify-self: center;
}

.loadmorebutton {
  position: relative;
  color: black;
  font-weight: 700;
  justify-self: start;
  padding: 1em 2em;
  border: 2px solid transparent;
  transition: all 0.3s;
  z-index: 2 !important;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
}

.loadmorebutton::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #D9D9D9 -11.9%, #737373 169.05%);
  transform: skewX(-20deg); 
  border-radius: 5px;
  z-index: -1
}

.loadmorebutton:hover::before {
  background: transparent; 
  border: 2px solid #D9D9D9E5;
}



@media only screen and (max-width: 1050px) {

  .similar-items {
    gap: 0;
  }

  .similar-items h2 {
    grid-column: 2 / 16;
  }

  .outer-plate-box {
    justify-content: left;
  }


}





/* SEARCH FAQs */

.faq-search {
  margin: 0 0 4em 0;
}





/* SINGLE PLATES PAGE */

/* .single-plates {
  margin: 4em 0;
} */

.plate-image img {
  max-width: 276px;
  height: auto;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.single-plate-image img {
  height: 100%;
}

.inner-plate-single-content .single-price {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
}

.inner-plate-single-content p {
  color: #fff;
  text-align: center;
  margin-top: 2em;
}

.inner-plate-single-content p strong {
  color: #fff;
}

.single-center {
  text-align: center;
}

.plate-info {
  margin: 4em 0;
  display: grid;
  gap: 1em;
}

.plate-info h2 {
  grid-column: 2/16;
  text-align: center;
}

.plate-info p {
  grid-column: 2/16;
  text-align: center;
  max-width: 660px;
  justify-self: center;
}

.reg-dates-info {
  border-top: 1px solid black;
  margin-top: 2em;
}


/* ENQUIRY FORM */

.enquiry-form {
  display: grid;
  gap: 1em;
  padding: 2em 0;
}

.enquiry-form-sub {
  margin: 4em 0;
}

.enquiry-form h2 {
  grid-column: 2 / 16;
  text-align: center;
}

.inner-enquiry-form {
  grid-column: 2 / 16;
  text-align: center;
  justify-self: center;
}

.inner-enquiry-form form {
  max-width: 386px;
}

.inner-enquiry-form form input[type=text], 
.inner-enquiry-form form input[type=email], 
.inner-enquiry-form form input[type=tel], 
.inner-enquiry-form form select, 
.inner-enquiry-form form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #fff;
  border-radius: 2px;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background: transparent;
  color: #fff;
  border-radius: 5px;
}

.inner-enquiry-form form input[type=text]::placeholder,
.inner-enquiry-form form input[type=email]::placeholder,
.inner-enquiry-form form input[type=tel]::placeholder,
.inner-enquiry-form form textarea::placeholder {
  font-size: 16px;
  font-weight: 300;
  line-height: 18px;
  letter-spacing: 0.05em;
  text-align: center;
  color:#fff;
}


/* GREY SUBMIT BUTTON */

.submit-button-wrapper {
  position: relative;
  display: inline-block;
  max-width: 164px;
}

.submit-button-wrapper::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 27px;
  background: linear-gradient(180deg, #D9D9D9 -11.9%, #737373 169.05%);
  transform: skewX(-20deg);
  border-radius: 5px;
  z-index: 0;
  border: none;

}

.submit-button-wrapper input {
  position: relative;
  z-index: 1;
  padding: 1em 2em;
  color: black;
  font-weight: 700;
  border: 2px solid transparent;
  background: none;
  transition: all 0.3s;
  cursor: pointer;
}






/* SUB PAGE */

.sub-banner h1{
    align-self: center !important;
    font-weight: 700 !important;
    color: #fff !important;
    font-size: 2.25em !important;
}

div.sub-banner{
  background: rgba(177, 142, 89, 0.9);
  justify-self: center;
  width: 50%;
  height: auto;
  max-width: 364px;
  padding: 2em 1em;
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-self: center;
  margin-top: -15em;
}












/* .plate-title {
  position: relative;
  display: inline-block;
} */

.reg-overlay {
  position: absolute;
  top: 72%;
  left: 51%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8);
  padding: 4px 19px;
  border-radius: 5px;
  font-size: 12px;
  color: #000;
  text-align: center;
  background: linear-gradient(180deg, rgba(240, 240, 238, 0.7) 0%, #FFFFFF 18%, rgba(245, 245, 243, 0.9) 56.5%) !important;
  min-width: 200px;
  width: auto !important;
}

.reg-overlay h3 {
  padding: 0 !important;
}

.plate-full-image {
  position: relative;
}

.hidden {
  display: none;
}


@media only screen and (max-width: 1150px) {
  .reg-overlay {
    top: 72%;
  }
}

@media only screen and (max-width: 780px) {
  .reg-overlay h3 {
    font-size: 35px !important;
    line-height: 30px !important;
  }

  .reg-overlay {
    min-width: 175px;
    padding: 0;
  }
}

@media only screen and (max-width: 580px) {
  .reg-overlay h3 {
    font-size: 24px !important;
  }

  .reg-overlay {
    min-width: 150px;
    top: 73%;
  }
}

@media only screen and (max-width: 380px) {
  .reg-overlay h3 {
    font-size: 20px !important;
  }

  .reg-overlay {
    min-width: 95px;
    top: 75%;
  }
}





/* 404 PAGE */

section.error{
  min-height: 60vh;
  align-content: center;
  grid-column: 2 / 16;
}

section.error h1{
  color: #313537;
  text-align: center;
  grid-column: 2 / 16;
}

section.error p{
  text-align: center;
  grid-column: 2 / 16;
}



