/*
   ======================================

   Written by: Steve Beeston
   Date:       10th July 2024
   Changes:    (none)
   Purpose:    Style sheet for Wareside Cattery

   ======================================
*/


/*
   =====
   FONTS
   =====
*/


/* raleway-200 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/raleway-v27-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v27-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v27-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v27-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v27-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v27-latin-200.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v27-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v27-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v27-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v27-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-500 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/raleway-v27-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v27-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v27-latin-500.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* great-vibes-regular - latin */
@font-face {
  font-family: 'RampartOne';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/RampartOne-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}





@import url(grid.css);
@import url(menu.css);



html {
   font-size: 62.5%;
   height: 100%;
}

body {
   height: 100%;
   background: #d6e9c0;
   font-family: Raleway, serif;
}


* {
   padding: 0;
   margin: 0;
}


/* For debugging only */
.column, .columns {border: 0px solid red;}

/* Dropped SRB 2024
.fancy {
   font-family: Raleway, Georgia, 'times new roman', serif;
   }
*/

/*
   ===========================
   G E N E R A L   L A Y O U T
   ===========================
*/

.outer-wrapper {
   position: relative;
   float: left;
   width: 100%;
   /*  background: #ECE7E0; dropped SRB 2024 */
}

header, footer {
   position: relative;
   float: left;
   width: 100%;
}

header {
   z-index: 2;
   opacity: 0.95;
   border-bottom: 1px solid #709d3c;
   /* border-bottom: 1px solid #655c4b; /* experimental SRB 14/1/21 */
}

footer {
    border-top: 1px solid #ad9f82;
}

.top-row .columns {
   padding-top: 0;
}

.inner-wrapper {
   position: relative;
	margin: 0 auto;
   width: 100%;
   max-width: 1000px; /* Note: banner and carousel images are currently 1000px wode so this cannot be larger without compromising quality */
}

.header .columns {
   padding-bottom: 5px;
}

footer .row {
   margin-bottom: 10px;
}

a.footer-social-icon img {
   max-width: 48px;
   text-decoration: none;
}

a.footer-social-icon {
   border-width: 0;
   margin-left: 3px;
}


#footer ul,
footer ul {
    list-style-type: none;
    margin-left: 0;
}

footer .column,
footer .columns {
   padding-bottom: 5px;
}

.top-bar {
   padding: 0;
}

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

.text-right {
   text-align: right;
}

.text-left {
   text-align: left;
}

.center {
   text-align: center;
}

.more-padding {
   padding: 15px 110px;
}

.no-padding-top {
   padding-top: 0;
}

img {
   vertical-align: middle;
}

#prices table {
   text-align: left;
   width: 100%;
   max-width: 800px;
   margin: 20px auto;
   padding-left: 20px;
   border-left: 2px solid silver;
}

#prices table tr td:first-child {
   width: 240px;
}

#prices table tr td {
   vertical-align: top;
}

/* -----------
   Blockquotes
   ----------- */

blockquote {
  /* background: #f9f9f9;*/
   font-style: italic;
   border-left: 10px solid #C2B59B;
   margin: 4rem 0;
   padding: 0.5em 30px;
   quotes: "\201C""\201D""\2018""\2019";
}
blockquote p:before {
   color: #C2B59B;
   content: open-quote;
   line-height: 0.1em;
   margin-right: 0.25em;
   vertical-align: -0.4em;
   font-size: 7rem;
}

blockquote p:after {
   color: #C2B59B;
   content: close-quote;
   line-height: 0.1em;
   margin-right: 0.25em;
   vertical-align: -0.4em;
   font-size: 7rem;
}

blockquote p {
   display: inline;
}


/* -----------------
   Images & captions
   ----------------- */

.caption {
   display: block;
   font-size: 16px; 
   background-color: #C2B59B; 
   border: 0px solid silver; 
   border-top-width: 0px;
   line-height: 24px; 
   padding: 3px;
}

figure {
   margin: 20px auto 20px;
}

figure.vertical {
   max-width: 400px; 
   margin: auto; 
   margin-bottom: 20px;
}

#first-choice-image img {
   width: 100%;
}

/*
   =================
   HERO IMAGE & TEXT
   =================
*/

.hero-image {
   background-image: url(../img/wood1600x900.jpg);
   height: 100%;
   background-attachment: scroll;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
}

.hero-text {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: rgba(0,0,0,0.4);
   padding: 20px;
   border-radius: 10px;
}

.hero-text p {
   font-family: 'Cormorant Garamond', serif;
   font-size: 3rem;
   color: white;
   line-height: 4rem;
}

/* EXPERIMENTAL HERO STUFF ++ SRB 26/11/20 */
.hero-text {
   top: 45%;
   left: 20%;
   width: 60%;
   transform: none;
}

.hero {
	display:table;
	height:100%;
	width:100%;
	margin:auto;
	background:url(img/wood1600x900.jpg) no-repeat 50% 50%;
	background-size:cover;
   /* Create the parallax scrolling effect SRB 2/10/20 */
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
}

.hero .inner {
	display:table-cell;
	vertical-align:middle;
	width:100%;
	max-width:none;
}



/*
   ===========================
   HOME PAGE NAVIGATION PANELS
   ===========================
*/

nav#panel a {
   text-decoration: none;
      /* SRB 29/12/20 */
      display: block;
      height: 100%;
      padding: 0;
}

nav#panel h1,
nav#panel div.title {
   background-color: #C2B59B;
   font-family: 'open sans', arial, sans-serif;
   font-weight: 400;
   font-size: 1.6rem;
   line-height: 2.4rem;
   padding: 8px;
   text-shadow: none;
   text-transform: capitalize;
}

nav#panel a h1,
nav#panel a div.title,
nav#panel a img,
nav#panel .flex-item {
   transition: 0.5s;
}

nav#panel a:hover h1,
nav#panel a:hover div.title,
nav#panel .flex-item:hover {
   background-color: #ded4bf;
}

nav#panel a:hover img {
   opacity: 0.9;
}

/* SRB 29/12/20
#contact nav#panel h1 {
   font-size: 1.6rem;
}
*/


/*
   ==========
   FLEX STUFF
   ==========
*/

.flex-container {
   padding: 0;
   margin: 0;
   list-style: none;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   -webkit-flex-flow: row wrap;
   justify-content: flex-start;
   list-style: none;
}

.flex-item {
   padding: 0 5px;
   width: 20%;
   height: 100%;
   margin-top: 10px;
   /* SRB 28/11/20 for full height panels */
   background-color: #C2B59B;
   background-clip: content-box;
   height: auto;
}

#contact .flex-item {
   width: 33.3%;
   font-size: 1.7rem;
}





.span-tag {
   text-decoration: none;
}

/*
   ==========
   TYPOGRAPHY
   ==========
*/

h1, h2, h3, h4, p, a, li, td, label, .site-subtitle {
   color: #111; 
}

p, a {
   padding: 10px 0;
}

h1, h2, h3, h4 {
   font-family: Raleway, georgia, 'times new roman', serif; 
   font-weight: 300; 
}

h1 {
   font-size: 3.5rem; 
   margin: 0;
   padding: 10px 0;
}

h2 {
   font-family: Raleway, Georgia, 'times new roman', serif;
   font-size: 2.7rem;
   font-weight: 300;
   padding: 10px 0;
}

h3 {
   font-size: 2.4rem; 
   padding: 10px 0;
}

h4 {
   font-size: 2.2rem; 
   padding: 16px 0;
}


p, a, li, td, label, input, .input, blockquote, figcaption, .success, .failure {
   font-family: Raleway, Georgia, 'times new roman', serif;
   font-size: 1.8rem;
   line-height: 2.9rem;
   color: #444;
}

h1, h2 {
   color: #444;
   /* text-transform: capitalize; -- SRB 14/1/21 feedback */
}

nav a {
   /* font-family: 'Cormorant Garamond', serif; */
   font-family: 'Open Sans', arial, serif; /* SRB 20/12/20 */
   font-size: 2.1rem;
   font-size: 1.8rem; /* SRB 20/12/20 */
   /* text-shadow: 0 0 0.1px #000; --- disabled SRB 20/12/20 */
   line-height: 2.8rem;
   text-decoration: none;
}

figcaption {
   display: block;
   font-size: 1.6rem; 
   font-style: italic;
   line-height: 2.9rem; 
   font-style: italic; 
   background-color: #C2B59B; 
   background-color: #DED2BA; /* SRB 11/11/20 */ 
   border: 0px solid silver; 
   border-top-width: 0px;
   padding: 6px 3px;
   padding-left: 10px; 
}

/* This is used for the panels at the bottom of each page detailing the fonts used
   Can probably be removed after going live */
p.note {
   font-style: italic;
   background-color: cadetblue;
   color: white;
   padding: 10px;
   font-size: 1.6rem;
}

p.logo {
   background-color: #BD1E2C;
   background-color: #9B0000;
   color: #ECE7E0;
   text-align: center;
   padding: 0;
   line-height: 176px;
   font-size: 150px;
   transition: 0.5s;
}

p.logo:hover {
   opacity: 0.9;
}

ul {
   margin: 10px 20px 10px;
}

li {
   margin: 2px 0;
}

p.highlight {
   border-left: 2px solid #58595B;
   padding-left: 30px;
   margin-bottom: 30px;
}

#footer a,
footer a {
   border-bottom: none;
   text-decoration: none;
}

#footer a:hover, footer a:hover {
   text-decoration: underline;
}


footer p,
footer a {
   font-size: 1.6rem;
   color: #333;
   line-height: 2.6rem;
}

header.social-icons {
   text-align: right;
}

#site-title h1,
#site-title h2 {
   font-family: 'Great Vibes', serif;
}

#site-title h1 {
   font-size: 7rem;
   font-weight: 400;
   line-height: 4rem;
   padding: 10px 0;
   text-decoration: none;
   border-width: 0;
   display: block;
   text-shadow: none;
}

#site-title h2 {
   font-size: 3rem;
}

a#site-title {
   text-decoration: none;
}

#site-subtitle {
   font-size: 3rem; 
   font-weight: 600;
   padding: 10px 0;
   font-smoothing: antialiased !important;
   color: #BD1E2C;
   text-shadow: none;
   display: block;
   line-height: 28px;
}

form p,
form a {
   font-size: 1.4rem; 
   line-height: 2rem; 
}

/*
   ============
   CONTACT FORM
   ============
*/

label {
   margin-top: 5px;
   margin-right:10px;
   text-align: center;
   width: 80px;
   line-height: 25px;
}
		
.input {
   padding: 5px;
   margin: 5px 0px;
   border: 1px solid #b9bdc1;
   width: 400px;
   background: #eee;
   margin-bottom: 15px;
}

input[type="submit"] {
   padding: 5px 15px;
}   

input[type="submit"]:hover {
   background: #fff;
   transition-duration: 200ms;
}   


div.url {
   display: none;
}



/*
   =================
   NAVIGATION PANELS
   =================
*/

div.nav-panel {
   position: relative;
   width: 100%;
}

div.nav-panel h2 {
   position: absolute;
   top: 40%;
   width: 100%;
   color: rgba(255, 255, 255, 0.8);
   font-size: 35px;
   text-transform: uppercase;
   text-shadow: #444 3px 3px 3px;
}



/* 
   ================================
   BUTTONS
   ================================
*/

button,
a.button {
   padding-top: 0.875rem;
   padding-right: 1.75rem;
   padding-bottom: 0.9375rem;
   padding-left: 1.75rem;
   transition: background-color 300ms ease-out;
   border-width: 0;
   text-decoration: none;
   border: 2px solid gray;
   margin-top: 20px;
   margin-bottom: 20px;
   display: inline-block;
}

button,
a.button:hover {
   background: #f7ead1;
}

input[type=submit].button {
   background: #d6e9c0;
   padding: 10px 20px;
   color: gray;
   border: #709d3c 2px solid;
   border-radius: 5px;
   cursor: pointer;
}

input[type=submit].button:hover {
   background: #709d3c;
   color: white;
}



/* 
   ================================
   MESSAGES 
   ================================
*/

.success, 
.failure {
   /* font-weight: bold;*/
   font-size: 18px;
   display: inline; 
   padding: 6px; 
   border-radius: 4px; 
   border-width: 2px; 
   border-style: solid; 
   margin: 3px;
   background: #066;
}

.success {
   color: white; 
}

.failure {
   color: white; 
   background-color: #BD1E2C;
}

.error {
   font-family: verdana, arial, sans-serif;
   font-size: 11px;
   color: white; 
   background-color: #BD1E2C; 
   margin: 0 5px; 
   padding: 2px 10px; 
   border-radius: 10px;
}



/* 
   ================================
   GO TO TOP BUTTON
   Added by SRB 19/9/20 00621
   Source: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
   ================================
*/

#topBtn {
   visibility: hidden; /* Hidden by default */
   position: fixed; /* Fixed/sticky position */
   bottom: 20px; /* Place the button at the bottom of the page */
   right: 30px; /* Place the button 30px from the right */
   z-index: 99; /* Make sure it does not overlap */
   border: none; /* Remove borders */
   outline: none; /* Remove outline */
   background-color: #96886a; /* Set a background color */
   color: white; /* Text color */
   cursor: pointer; /* Add a mouse pointer on hover */
   padding: 8px 14px; /* Some padding */
   border-radius: 0px; /* Rounded corners */
   font-size: 14px; /* Increase font size */
   opacity: 0;
   transition: ease 0.5s;
}

#topBtn.show {
   visibility: visible;
   opacity: 0.8;
}

#topBtn:hover {
   background-color: #C2B59B; /* Add a dark-grey background on hover */  
}



/*
   ============
   TESTIMONIALS
   ============
*/



.testimonial {
   padding: 30px 10%;
   font-family: georgia, serif;
   font-size: 26px;
   font-style: italic;
   width: 80%;
   border: 1px solid #666;
   border-radius: 20px;
   color: #bbb;
   line-height: 40px;
   margin: 20px auto;
}








/*
   ===============================

   R E S P O N S I V E   S T U F F

   ===============================
*/




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

   #first-choice-image img {
      height: 100%;
      object-fit: cover
   }

   #first-choice-image {
      height: 380px;
   }

}

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


   .featurebox {
      width: 100%;
      text-align: center;
   }

   #site-title {
      font-size: 2.5rem;
   }

}



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

   #contact nav#panel h1 {
      font-size: 1.7rem;
      line-height: 2.2rem;
   }

   div.nav-panel h2 {
      font-size: 25px;
   }

   .more-padding {
      padding: 15px;
   }

   footer p,
   footer a {
      font-size: 1.4rem;
      line-height: 2.2rem;
   }
}


/* SRB 8/4/22 */
@media only screen and (max-width: 860px) {

   #site-title h1 {
      line-height: 6rem;
   }
}


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

   h4 {
      font-size: 22px;
   }

   #site-title {
      line-height: 3rem;
   }

   #site-title h1 {
      line-height: 6rem;
   }

}



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

   .flex-item {
      width: 50%;
   }
   
   h4 {
      font-size: 22px;
   }

   /* Centre the last panel - assuming there are an odd number of panels
      Disable this if there are an even number of panels */
   nav#panel li.flex-item:nth-last-child(1):nth-child(odd) {
      margin: 10px auto;
   }

}



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


   .text-right,
   .text-left,
   .social-icons {
      text-align: center;
   }

   li {
      list-style-type: none;
   }

   #contactform {
      width: 100%;
      max-width: none;
   }

   .testimonial {
      padding: 20px 4%;
      font-size: 22px;  
      line-height: 32px;
      width: 94%;
      margin: 10px auto;
   }

   h2 {
      font-size: 28px;
   }

   h3{
      font-size: 24px;
   }

   p.bio {
      text-align: left;
   }

   #kiln-menu a {
      width: 100%;
   }

   blockquote {
      text-align: left;
   }

   .hero-text {
      top: 60%;
      left: 20%;
      transform: translate(-12%,-50%);
   }

   #contact .flex-item {
      width: 50%;
   }

   /* EXPERIMENTAL HERO STUFF ++ SRB 26/11/20 */
   .hero-text {
      top: 30%;
      left: 10%;
      width: 80%;
      transform: none;
   }

   header .columns {
      padding-top: 5px;
      padding-bottom: 5px;
   }

   header .large-2 {
      width: 16.66%;
      padding: 5px;
   }

   header .large-8 {
      width: 66.66%;
      padding: 5px;
   }

   #site-title {
      font-size: 1.7rem;
      line-height: 2.2rem;
   }

   .menu-link {
      font-size: 1.2rem;
      line-height: 1.5rem;
      padding: 13px 7px 7px 7px;
   }
}



@media only screen and (max-width: 530px) {
   label {
      text-align: center;
      width: 100%;
   }

   .input {
      width: 100%;
   }

}



@media only screen and (max-width: 420px) {
   
   .hero-text p {
      font-size: 2.5rem;
      line-height: 3.5rem;
   }

}



@media only screen and (max-width: 375px) {
   
   .hero-text {
      top: 70%;
      left: 10%;
      transform: translate(-6%,-50%);
   }

   /* EXPERIMENTAL HERO STUFF ++ SRB 26/11/20 */
   .hero-text {
      top: 45%;
      left: 10%;
      width: 80%;
      transform: none;
   }


}



@media only screen and (max-width: 320px) {
   
   .hero-text p {
      font-size: 2rem;
      line-height: 3rem;
   }

}



/*
   ===================================
   FOR LANDSCAPE ASPECT RATIO DISPLAYS
   ===================================
*/

@media only screen and (max-width: 749px) and (max-height: 559px){

  .hero-text {
      top: 40%;
      left: 10%;
      width: 80%;
      transform: none;;
   }

   .hero-text p {
      font-size: 2.5rem;
      line-height: 3.5rem;
      line-height: 3.5rem;
   }

}