/*!
Theme Name: ETTA
Theme URI: http://underscores.me/
Author: Richie Hiney
Author URI: https://funinelkcity.com
Description: ETTA Productions custom theme by Fun in Elk City
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: etta
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ETTA is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#wpadminbar {
  top:80px;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Roboto", sans-serif;
  color: #3d3536;
  background-color: white;
}

p,
.row p {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:1.6rem;
  line-height: 2rem;
}

.smallp,
.row .smallp {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:1.2rem;
}

a,
.row a {
  color: #ffffff;
  text-decoration: none;
  margin-right:20px;
}
a:hover,
.row a:hover {
  color: #ffffff;
  text-decoration: underline;
}

h1,
.row h1 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5rem;
}

h2,
.row h2 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem;
}

h3,
.row h3 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
}

h4,
.row h4 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
}

.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}

.dm-serif-display-regular-italic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}

@media only screen and (max-width: 576px) {
h1,
.row h1 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5rem;
}

h2,
.row h2 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3.5rem;
}

h3,
.row h3 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
}

h4,
.row h4 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
}
}


/* -------------------------------- 

Alternate Fixed & Scroll Backgrounds

-------------------------------- */
.rh-main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 3;
}

.rh-main-header:after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

.rh-main-header__logo {
  float: left;
  margin: 13px 0 0 5%;
}

.rh-main-header__logo img {
  display: block;
}

@media only screen and (min-width: 768px) {
  .rh-main-header {
    height: 70px;
  }
  .rh-main-header__logo {
    margin: 23px 0 0 5%;
  }
}




@media (max-width: 3000px) {
  .offcanvas-collapse {
    position: fixed;
    top: 78px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.navbar-dark .navbar-toggler-icon {
  background-image:url("/wp-content/themes/etta/img/etta-nav-toggle.svg")!important;
  width:2.5em;
}

.navbar {
  height:80px;
  background-color: #000;
}

.navbar-nav {
  margin-top:100px;
}

.header-logo {
  height:60px;
  width:auto;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

#bignav {
background: rgb(0,0,0);
background: linear-gradient(45deg, rgba(0,0,0,1) 20%, rgba(34,34,34,1) 100%);
text-align: center;
font-size:5rem;
font-family: "DM Serif Display", serif;
font-weight: 400;
font-style: normal;
}

.bg-purple { background-color: #6f42c1; }

.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }

.menu {
  list-style: none;
  padding:0;
}

.menu a {
  margin:0!important;
}






.rh-fixed-bg {
  position: relative;
  min-height: 70vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}

@media only screen and (max-width: 576px) {
.rh-fixed-bg {
  min-height: 60vh;
}
}

.rh-fixed-bg__content, .rh-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 0;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  font-size: 5rem;
  z-index: 99;
}

.rh-fixed-bg h1, .rh-fixed-bg h2 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 5rem;
}

.rh-fixed-bg.rh-fixed-bg--1 {
  background-image: url("/wp-content/themes/etta/img/the-walk-in-hero.jpg");
}

.rh-fixed-bg.rh-fixed-bg--1:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height:40vh;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
opacity: 1;
z-index:1;
}

@media only screen and (min-width: 768px) {
  .rh-fixed-bg h1, .rh-fixed-bg h2 {
    font-size: 5rem;
  }
}

@media only screen and (min-width: 1170px) {
  .rh-fixed-bg h1, .rh-fixed-bg h2 {
    font-size: 5rem;
    font-weight: 300;
  }
  @supports (background-attachment: fixed) {
    /* fix bug on IE11 and below */
    .rh-fixed-bg {
      background-attachment: fixed;
    }
  }
}

.rh-scrolling-bg {
  position: relative;
  min-height: 100%;
  padding: 2em 0;
  line-height: 1.6;
  -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.rh-scrolling-bg.rh-scrolling-bg--color-1 {
  background-color: #000000;
  color: #ffffff;
}

.rh-scrolling-bg.rh-scrolling-bg--color-2 {
  background: rgb(0,0,0);
  background: linear-gradient(45deg, rgba(0,0,0,1) 20%, rgba(34,34,34,1) 100%);
  color: #ffffff;
}

.rh-scrolling-bg__content {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .rh-scrolling-bg {
    padding: 4em 0;
    font-size: 2rem;
    line-height: 2;
    font-weight: 300;
  }
}

  .ctabtn {
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      -webkit-appearance: none;
      padding: 0 20px;
      font-size: 16px;
      line-height: 30px;
      font-weight: 900;
      border-radius: 1px;
      background-color: #1F1F1F;
      border: 2px solid #FFF;
      color: #EDEDED!important;
      white-space: nowrap;
      -webkit-transition: color 0.15s linear 0s, background-color 0.15s linear 0s;
      transition: color 0.15s linear 0s, background-color 0.15s linear 0s;
      position: relative;
      text-align: center;
      opacity: 1;
      max-width: 100%;
      text-overflow: ellipsis;
      text-transform: none;
      text-decoration: none!important;
      z-index: 99999;
      margin-right:0!important;
  }

.ctabtn:hover {
  background-color: #EDEDED;
  text-decoration: none;
  border: 2px solid #1F1F1F;
  color: #1F1F1F!important;
  opacity:1;    
}

.gallery-title {
    color: #EDEDED;
    position:absolute;
    bottom:0;
    left: auto;
    padding:20px;
    width:90%;
    height: 100%;
}

.gallery_product {
    width:100%;
    min-height:400px;
    background-size: cover;
    background-position: center;
}

.gallery_product:before {
    content: "";
    position: absolute;
    width: 100%;
    overflow:hidden;    
    bottom: 0;
    left:0;
    height: 50%;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 20%, rgba(34,34,34,0) 100%);
    opacity: 1;    
}


.cta-title {
    color: #EDEDED;
    position:absolute;
    bottom:0;
    left: auto;
    padding:20px;
    width:60%;
    height: 100%;
}

.cta_product {
    width:100%;
    min-height:400px;
    background-size: cover;
    background-position: center;
}

.cta_product:before {
    content: "";
    position: absolute;
    width: 100%;
    overflow:hidden;    
    bottom: 0;
    left:0;
    height: 100%;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 20%, rgba(34,34,34,0) 100%);
    opacity: 1;    
}

@media only screen and (max-width: 576px) {
.cta-title {
    color: #EDEDED;
    position:absolute;
    bottom:0;
    left: 0;
    padding:0px;
    width:90%;
    height: 100%;
}
}

.footer-logo {
  max-width:300px;
  margin-bottom:50px;
}

.linebreak {
  border-bottom:1px solid #222222;
}

.spacer {
  margin:60px auto; 
}
.spacer-top {
  margin-top:60px; 
}
.spacer-btm {
  margin:0 auto 60px; 
}

@media only screen and (max-width: 576px) {
.spacer {
  margin:20px auto; 
}
}

#carouselHero {
  margin-top:80px;
  width:100%;
}

.carousel-item img {
margin-left:auto;
margin-right:auto;
}

.img-fill {
  width:100%;
  height:auto;
}

@media only screen and (max-width: 1070px) {
.img-fill {
  width:120%;
  height:auto;
  overflow: hidden;
}
}

@media only screen and (max-width: 890px) {
.img-fill {
  width:150%;
  height:auto;
  overflow: hidden;
}
}

@media only screen and (max-width: 710px) {
.img-fill {
  width:200%;
  height:auto;
  overflow: hidden;
}
}