/* =======================
fonts

titles
    font-family: meno-banner, serif; 
    font-family: smoosh-4, serif;
body
    font-family: roboto, sans-serif;
========================= */

:root {
  --primary-color-app:#C6A542;
  --primary-dark-color-app:#8D6F39;
  --primary-light-color-app:#E7CC97;
  --primary-gradient-color-app: linear-gradient(45deg, #C6A542, #E7CC97, #E7CC97, #C6A542);

  --light-color-app: #f7f7f7;
  --dark-color-app:#111111;

  --base-light-color-app:#FFFFFF;
  --base-dark-color-app:#000000;

  --primary-font-app:roboto, sans-serif;
  --secondary-font-app:meno-banner, sans-serif;

  --light-weight-app:300;
  --regular-weight-app:400;
  --semibold-weight-app:500;
  --bold-weight-app:600;

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
  --step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
  --step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
  --step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
  --step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);

  --lspace-n-app: -.15rem;
  --lspace-n-s-app: 1px;
  --lspace-n-m-app: -.05rem;
  --lspace-n-l-app: -.15rem;
  --lspace-p-app:  .15rem;
  --lspace-p-s-app:  1px;
  --lspace-p-m-app:  .05rem;
  --lspace-p-l-app:  .15rem;

  --line-s-app:1.1;
  --line-m-app:1.25;
  --line-l-app:1.5;

  --border-xxs-app:0.5px;
  --border-xs-app:1px;
  --border-s-app:2px;
  --border-m-app:4px;
  --border-l-app:6px;
  --border-xl-app:8px;

  --spacer-xxs-app:0.5rem;
  --spacer-xs-app:1rem;
  --spacer-s-app:2rem;
  --spacer-m-app:4rem;
  --spacer-l-app:6rem;
  --spacer-xl-app:8rem;

  --spacer-vm-xxs-app:0.5vmin;
  --spacer-vm-xs-app:1vmin;
  --spacer-vm-s-app:2vmin;
  --spacer-vm-m-app:4vmin;
  --spacer-vm-l-app:6vmin;
  --spacer-vm-xl-app:8vmin;

  --spacer-vh-xs-app:1vh;
  --spacer-vh-s-app:2vh;
  --spacer-vh-m-app:4vh;
  --spacer-vh-l-app:6vh;
  --spacer-vh-xl-app:8vh;

  --spacer-vw-xs-app:1vw;
  --spacer-vw-s-app:2vw;
  --spacer-vw-m-app:4vw;
  --spacer-vw-l-app:6vw;
  --spacer-vw-xl-app:8vw;
  
  --text-width-s-app:60ch;
  --text-width-m-app:75ch;
  --text-width-l-app:90ch;

  --box-shadow-s-app:rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  --box-shadow-m-app:rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  --box-shadow-l-app:rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;

  --text-shadow-dark-app:0 2px 8px rgba(0, 0, 0, .5);
  --text-shadow-light-app:0 2px 8px rgba(255, 255, 255, .5);
}

/* glabal */

.u-square-padding--xxs {
    padding: 10px;
}

.c-phone--margin {
    margin-right: 15px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 200px;
}

body {
    background-color: var(--base-light-color-app);
    color: var(--dark-color-app);
    font-family: var(--primary-font-app);
    font-optical-sizing: auto;
    font-size: var(--step-0);
    font-style: normal;
    font-weight: var(--light-weight-app);
    line-height: var(--line-l-app);
    text-wrap: pretty;
}

main {
    flex: 1;
}

p {
    margin-top: var(--spacer-xs-app);
    margin-bottom: var(--spacer-s-app);
}

.u-h1, 
.u-h2, 
.u-h3, 
.u-h4, 
.u-h5, 
.u-h6, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    font-family: var(--secondary-font-app);
    font-style: normal;
    font-weight: var(--light-weight-app);
    letter-spacing: var(--lspace-p-s-app);
    line-height: var(--line-s-app);
    text-wrap: balance;
/*    white-space: unset; */
    margin-bottom: var(--spacer-xs-app);
    margin-top:  var(--spacer-s-app) ;
}

h1>strong,
h2>strong,
h3>strong,
h4>strong,
h5>strong,
h6>strong {
    text-transform: uppercase;
    font-weight: var(--regular-weight-app);
    color: var(--primary-dark-color-app);
}

    .u-text--san-serif{
        font-family: var(--primary-font-app); 
        line-height:1.5}
    .u-text--kern{
        letter-spacing: .45rem;
    }
    .u-text--blue{
        color:#007C9E;
    }

.u-h1, .u-text--xxl, h1 {
    font-size: var(--step-5);
}

    .u-text--subtitle {
        font-family: var(--primary-font-app);
        font-size: var(--step-0);
        font-weight: var(--semibold-weight-app);
        letter-spacing: var(--lspace-p-app);
        margin-bottom: var(--spacer-s-app);
        text-transform: uppercase;
    }
    
.u-h2, .u-text--xl, h2 {
    font-size: var(--step-4);
}
    h2 em{
        font-size: var(--step-2);
        font-size: italic;
    }

.u-h3, .u-text--lg, h3 {
    font-size: var(--step-3);
    letter-spacing: var(--lspace-p-m-app);
}

h4, h5, h6,
.u-h4, .u-h5, .u-h6 {
        font-weight: var(--regular-weight-app);
    line-height: var(--line-m-app);

}
.u-h4, .u-text--md, h4 {
    font-size: var(--step-2);
    letter-spacing: var(--lspace-p-m-app);
}

.u-h5, .u-text--sm, h5 {
    font-size: var(--step-1);
    letter-spacing: var(--lspace-p-s-app);
}

.u-h6, .u-text--xs, h6 {
    font-size: var(--step-0);
    letter-spacing: var(--lspace-p-s-app);
}

.u-text--xxs, small {
    font-size: var(--step--1);
    letter-spacing: var(--lspace-p-s-app);

}

@media (max-width:767px) {
    h1, .c-theme--light h1 {
        margin-top: 0;
    }
    h2, h3, h4, h5, h6,
    .u-h1, .u-h2, .u-h3, .u-h4, .u-h5, .u-h6 {
        margin-top: calc(var(--spacer-vm-s-app) * 0.5);
        margin-bottom: var(--spacer-vm-m-app);
/*        font-weight: var(--semibold-weight-app);*/
    }
    p, ul, ol {
        margin-top:  var(--spacer-xs-app);
        margin-bottom: var(--spacer-xs-app);
    }
}


.u-color--primary {
    color: var(--primary-color-app);
}
.u-color--primary-dark {
    color: var(--primary-dark-color-app);
}
/*================================================*/
/*text content sizes */
/*================================================*/

.u-text--content {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacer-s-app);
    margin-top: var(--spacer-xs-app);

    &.u-text--content-sm {
        max-width: var(--text-width-s-app);
    }

    &.u-text--content-md {
        max-width: var(--text-width-m-app);
    }

    &.u-text--content-lg {
        max-width: var(--text-width-l-app);
    }
}
@media (min-width:1024px) {
    .u-text--content-odd{
        margin-right:1.5em;
    }
    .u-text--content-even{
        margin-left:1.5em;
    }
}

.u-text--columns {
    column-count: 3;
    column-width: 25rem;
    orphans: 3;
    widows: 3;
    gap: var(--spacer-s-app);
    & p{
        margin-bottom: calc(var(--spacer-xs-app) * 1.5);
        margin-top: 0;
    }
}

/*h1,.u-h1,h2,.u-h2,h3,.u-h3,h4,.u-h4,h5,.u-h5,h6,.u-h6 {
    line-height:1;
    font-family: meno-banner,serif; 
    font-weight: 300;
}*/
        /*.u-h1, h1 {
            font-size:4.5rem;
            font-style: italic; 
            line-height:5rem;}
        .u-h2, h2 {
            font-size:2.6rem ;}
        .u-h3, h3 {
            font-size:2.1rem;}
        .u-h4, h4 {
            font-size:1.5rem; }
        .u-h5, h5 {
            font-size:1rem;}
        .u-h6, h6 {
            font-size:.8rem;}*/

        /* ˘˘˘not sure if I am keeping˘˘˘ */
        /* .u-text-home-title{font-size: 6vw;} */

.c-btn {
    font-family: var(--primary-font-app);
    font-weight: var(--semibold-weight-app);
    font-style: normal;
    font-size:var(--step--1);
    letter-spacing: .15rem;
    text-transform: uppercase;
    background-color:var(--primary-color-app);
    background-image:var(--primary-gradient-color-app);
    color:#000;
    border-radius: .2rem;
}

.c-btn:hover {
    background-color:var(--dark-color-app);
    color:#fefffe;
}

.c-logo img{
    max-width:36%;
}

/* Other */

.c-carousel__caption {
    position: absolute;
    top: auto;
    bottom: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    padding: 4rem 3rem;
    width: 60%;
    border-radius: 8px 8px 0 0 ;
}

.c-header__inside {flex-wrap: nowrap !important;}

.c-header__phone {font-family: roboto, sans-serif;}

.c-header__phone:hover, .fab:hover{color:#E8BC4A;}


.fab {transition-duration: .5s;}
.fab:hover{color:#E8BC4A; transition-duration: .5s;}



.c-carousel__block {height:50vh;}
@media (min-width: 768px) {
    .c-hero {
        padding-top: 280px;
        padding-bottom: 0;
    }
}
.c-theme--light {
    background-color:rgba(255,255,255,.1);
} 

.u-paddingtop--10{padding-top:10px;}

.c-social__list {font-size:1.5rem;}

.c-background--blend {
    background-blend-mode:hard-light;
    background-color:#8ea1a5;
}

.c-background--fixed {background-attachment:fixed;}

.js-toggle {
    background-color:rgba(255,255,255,0);
    border: 0 solid #fff;
  
}

/*================================================*/
/*Hero full block */
/*================================================*/

.c-hero-full {
    background-color: var(--base-dark-color-app);

    & .c-btn {
        margin: 0;
    }

    .c-hero-full__spacing {
        padding: var(--spacer-vh-s-app);
    }
        @media (max-width:767px) {
        .c-hero-full__spacing {
            text-align: center;
        }
}
        @media (max-width:1023px) {
            .o-col--xxs-12>.c-hero-full__spacing {
                padding: var(--spacer-vh-s-app) calc(var(--spacer-vh-s-app) - 15px);
            }
        }

    .c-hero-full__text {
        max-width: 100%;

    }
    @media (max-width:767px) {

        .c-hero-full--lg {
            padding-top: calc(420px + 50%);
        }
        .c-hero-full__wrapper {
        /*        height:50vh;*/

            & video {
                width: 150%;
                height: 150%;
                /*                left: 20%;*/
                -webkit-transform: translate(-20%, 0%);
                transform: translate(-20%, 0%);
            }
        }
    }
}
/* Small screens */

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

    body{overflow-x:hidden;}
    
/*    .u-h1, h1 {font-size:3.5rem; font-style: italic; line-height:5rem;}
    .u-h2, h2 {font-size:2.1rem; ;}
    .u-h3, h3 {font-size:1.8rem; ;}
    .u-h4, h4 {font-size:1.2rem; }
    .u-h5, h5 {font-size:1rem; ;}
    .u-h6, h6 {font-size:.8rem; ;}*/
    
    .c-carousel__caption {
        position:relative;
        top:0%;
        bottom:0%;
        left:0%;
        transform:none;
        -webkit-transform:none;
        padding:5px;
        width:100%;
    }

    .c-carousel__block {height: 50vh;}

    .u-text-home-title{
        font-size: 10.8vw;
        margin-bottom:-20px;
    }

.c-center--align {margin:0 auto;}

}

@media screen and (max-width:1111px) { 
    .u-text-home-title{
        font-size: 7vw;
        margin-bottom:-20px;
    }

    
}

/*˘˘˘ this code is breaking the footer content. I need to figure out what this was for. ˘˘˘ */

/* @media (min-width: 1200px){
.o-col--offset-lg-1 {
    margin-left: 0;
} */


/* interior pages */

.c-hero .c-theme--light {background-color:rgba(255,255,255,0.5);}

.c-carousel__item .c-carousel__block{
    background-color:rgba(255,255,255,0.1);
}

.c-logo {
    max-width: 30%;
    & img {
        max-width: 100%;
        margin: 0;
    }
}
@media (min-width: 1024px) {
    .c-logo {
        max-width: 20%;
        & img {
            max-width: 100%;
            margin: 0;
        }
    }
}

@media (min-width: 768px) {
    body {
        flex-wrap: nowrap;
    }
}

.c-disclaimer {
    color: var(--light-color-app);
    font-size: calc(var(--step--2) * 1.0);
    font-weight: var(--semibold-weight-app);
    opacity: 0.7;
    background-color:var(--dark-color-app);
    padding:calc(var(--spacer-xs-app) * 0.2) calc(var(--spacer-xs-app) * 0.4);
}

.c-drawer__form-header {
    text-align: left;
}