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

Project Name: Pacific Coast Kitchens
Creation date: 26 May 2024
Last modified: 25 July 2024
Version: 1.0
Author: Steve Hopper | steve@xeno.co.nz
Company: xeno web development
Company URI: https://xeno.co.nz

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

/*
font-family: 'Open-Sans', sans-serif;
*/


body { font-family: "Open Sans", sans-serif;color:#4d4d4d;font-weight:300; }
h1, h2, h3, h4 { letter-spacing:-1px; }
h1 { font-family: "Open Sans", sans-serif;font-weight: 300; }
h2 { font-size:1.8rem; }
h3 {  }
a { transition: 0.3s;color:rgb(0,114,188); }
.fa { color:#333;font-size:1.1rem; }
	
h1, h2, h3, .nav-item, .item-title, .category-title, .breadcrumb { font-family: "Open Sans", sans-serif;font-weight: 300; }

.open-sans-light {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.open-sans-normal {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.noto-serif-italic {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}

.breadcrumb-item a, .bordered-link { text-decoration:none;border-bottom:1px dotted rgb(0,114,188); }
.text-yellow { color:#FFDD78; }
.border-yellow { border-color:#FFDD78!important; }
.bg-yellow { background-color:#faf4e1; }

.bg-dark { background-color:#000; }
.bg-warning { background-color:#FFDD78!important; }
.bg-primary { background-color:#0099ff!important; }
.text-grey { color:#cbcbcb!important; }
.text-primary { color:#0099ff!important; }
.btn-primary { background-color:#68c3ff;border-color:#68c3ff; }
.text-smaller { font-size:1rem!important; }

.navbar { margin-top:0px; }
.navbar-brand { width:auto;border: none;text-align:center;padding:1rem; }

.dropdown-menu { background-color:#FFF!important;border:none;border-radius:0; }
.dropdown-item { color:#666666;font-family: "Open Sans", sans-serif;font-weight: 300;font-size:.9rem; }
.dropdown-item:focus, .dropdown-item:hover {color:#333;background:transparent!important; }

.wrapper { margin:0px auto; }
.overlay {height: 100%;width: 0;position: fixed;z-index: 11;left: 0;top: 0;background-color: rgb(0,0,0);background-color: rgba(0,0,0, 0.9);overflow-x: hidden;transition: 0.5s;}
.overlay-content {position: relative;top: 20%;width: 100%;text-align: center;/* margin-top: 30px; */}
.overlay-content ul { padding-left:0; }
.overlay a {padding: 8px;text-decoration: none;font-size:1.6rem!important;color: #818181;display: block;transition: 0.3s;border:none;}
.overlay a:hover, .overlay a:focus {color: #f1f1f1;}
.overlay .closebtn {position: absolute;top: 15px;right: 15px;font-size: 60px!important;padding: 0;line-height: 1;}
.overlay .navbar-nav li.active .nav-link { color: #fded18; }
.menu-bar { position:fixed;z-index:1050;bottom:0;left:0;right:0;height:60px;background-color:#000; }

.hamburger {padding: 15px 15px;display: inline-block;cursor: pointer;transition-property: opacity, filter;transition-duration: 0.15s;transition-timing-function: linear;font: inherit;color: inherit;text-transform: none;background-color: transparent;border: 0;margin: 0;overflow: visible; /* margin-top:5px; */margin-left: auto;margin-right: auto;}
.hamburger:hover {opacity: 0.7; } 
.hamburger.is-active:hover {opacity: 0.7; } 
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {background-color: #000; }
.hamburger-box { width: 40px;height: 24px;display: inline-block;position: relative; }
.hamburger-inner { display: block;top: 50%;margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px;height: 4px;background-color: #0072bd;border-radius: 4px;position: absolute;transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after { content: "";display: block; }
.hamburger-inner::before {top: -10px; }
.hamburger-inner::after {bottom: -10px; }
.hamburger--spin .hamburger-inner {transition-duration: 0.22s;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin .hamburger-inner::before {transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after {transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin.is-active .hamburger-inner {transform: rotate(225deg);transition-delay: 0.12s;transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.is-active .hamburger-inner::before {top: 0;opacity: 0;transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after {bottom: 0;transform: rotate(-90deg);transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

.head { font-size:2.8rem;color:#FFF !important;bottom:12rem;left:5rem;}
.hero .head, .gallery-hero .head { position:absolute;font-size:2.8rem;color:#FFF !important;bottom:8rem;left:5rem;}
.gallery-image { position:relative;margin-bottom:25px; }
.gallery-title { position:absolute;bottom:1.0rem;left:0;right:0;color:#FFF;font-size:1.5rem;text-align:center;}
.gradient, .fade { position:absolute;left:0;top:0;bottom:0;right:0;background-size:contain; }
.gallery-hero { max-height:520px;overflow:hidden; }
.mobile-hero { max-height:300px;overflow:hidden; }
.gallery-hero .head { bottom:5rem;left:5rem; }
.ms-caption { bottom:7rem; }
.ms-gradient { margin-left:-250px !important; }

.carousel-inner { background-image:url(/images/carousel-bg.png);background-repeat:no-repeat;background-position:center center; }
.carousel-item { height:500px; }
.carousel img { margin: auto; }

/* #process_carousel { max-height:600px; } */
/* .carousel-caption .badge { font-size:10rem;font-weight:700;background-color:transparent !important;} */
/* .carousel-caption { left:25%;right:25%;bottom: 9rem; } */
/* .carousel-caption h2 { font-size:1.6rem; } */

.testimonial { margin-top:3rem;margin-bottom:3rem;font-style: italic;font-size:1.5rem; }
.staff-title { position:absolute;bottom:2.1rem;left:0;right:0;color:#FFF;font-size:1.5rem;text-align:center;}
.posi { position: absolute;bottom:1rem;left:0;right:0;margin-top:1rem;text-align:center;color:#FFF;}

#footer { padding-top:2.4rem;padding-bottom:1.2rem;padding-left:1rem; }
.black-foot { padding-top:1.4rem;padding-bottom:1.8rem;margin-bottom:70px; }
.footer-logo { width:200px; }
.xeno { text-align:right; }
.xeno a { color:#FFF;text-transform: uppercase;font-size:10px; }
.xeno a:hover { text-decoration:none; }
.message-area-one {margin-left: -3000px;height: 1px;}

.ms-skin-default .ms-nav-next, .ms-skin-default .ms-nav-prev {
    width: 54px;
    background-image: url(/images/hero-arrow-left.png);
    height: 107px;
    cursor: pointer;
    top: 50%;
    left: 15px;
    margin-top: -70px;
    position: absolute;
    z-index: 110
}

.ms-skin-default .ms-nav-next {
    background-image: url(/images/hero-arrow-right.png);
    right: 15px;
    left: auto
}

@media (min-width: 768px) {
  .navbar { margin-top:0px; }
  .navbar-brand { width:250px;border: none;padding:0; }
}

@media (min-width: 992px) {
  .navbar-expand-sm .navbar-nav .nav-link { font-size:1rem; }
  .head { font-size:2.8rem;color:#FFF !important;bottom:12rem;left:5rem;}
  .hero .head, .gallery-hero .head { position:absolute;font-size:2.8rem;color:#FFF !important;bottom:8rem;left:5rem;}
  .gallery-image { position:relative;margin-bottom:25px; }
  .gallery-title { position:absolute;bottom:1.5rem;left:0;right:0;color:#FFF;font-size:1.5rem;text-align:center;}
  .gradient { position:absolute;left:0;top:0;bottom:0;right:0;}
  .gallery-hero .head { bottom:5rem;left:5rem;}
  
}

@media (min-width: 1200px) {
  .wrapper { max-width:1800px;margin:0px auto; }
  .visual-break { max-height:550px;overflow:hidden;}
  .hero { max-height:520px;overflow:hidden;}
  .gallery-hero { height:550px;height:340px;overflow:hidden;}
  .carousel-caption { left:25%;right:25%; }
  /* .carousel-caption .badge { font-size:10rem;font-weight:700;background-color:transparent !important;}
  .carousel-caption { left:25%;right:25%;bottom: 9rem; }
  .carousel-caption h2 { font-size:2.0rem; } */
}