@font-face {
  font-family: LatoRegular; src: url(fonts/Lato-Regular.otf);
} 
@font-face {
  font-family: LatoLight; src: url(fonts/Lato-Light.ttf);
}

@font-face {
  font-family: wahuwahu; src: url(fonts/wahuwahu.otf);
}

@font-face {
  font-family: LatoBold; src: url(fonts/Lato-Bold.otf);
}

@font-face {
  font-family: RobotoMedium; src: url(fonts/roboto/Roboto-Medium.ttf);
}


html, body{
  height: 100%;
  width: 100%;
  background-color: #F7F7F7; 
}

.col-12{
}

.col-lg-1 {
}

.row {
}

:root {
  --primary: #E4ECEF;
  --secondary: #FFFFFF; 
  --third: #F7F7F7; 
  --link_color: #E8CE4F;
  --action_color_two: #E8CE4F;
  --action_color: #253B4D;
  --footer_color: #253B4D;
  --footer_background_color: #F7F7F7;
  --padding: 3%;
  --small_padding: 1%;
  --small_bottom_padding: 1.5%;
  --medium_screen_window_reduction: 0%;
  --large_screen_window_reduction: 2%;
  --xl_screen_window_reduction: 3%;
  --xxl_screen_window_reduction: 6%;
  --xxxl_screen_window_reduction: 10%;
  --header_font: RobotoMedium;
  --content_font: LatoRegular; 
  --content_font_bold: LatoBold; 
  --secondary_content_font: LatoLight; 
}

td, p, li{
  font-family: var(--content_font);
  color: #253B4D;
}

a p{
  font-family: var(--content_font_bold);
  color: #253B4D;
}

th, h1, h2, h3, h4, h5, h6{
  font-family: var(--header_font);
}

h1{
}

h2{
}

.field-name{
    font-family: LatoBold;
}

footer{
  background-color: var(--footer_background_color);
  color: var(--footer_color);
  font-family: var(--content_font_bold)
}

footer a{
  color: var(--footer_color);
}

footer a:hover{
  text-decoration: none;
}

footer a:hover >p{
  color: var(--action_color_two);
}

#home-banner{
    height: 100%;
    background-repeat: no-repeat; 
    background-position: center;
    background-size: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.no-webp #home-banner{
     background-image: url('resources/images/banners/home-page.jpg') 
 }


.webp #home-banner{
     background-image: url('resources/images/banners/home-page.webp') 
}

.banner-text{
    padding-top: 10%;
}


.cbw-padding{
  padding-top: var(--padding);
  padding-bottom: var(--padding);
}

.cbw-small-padding{
  padding-top: var(--small_padding);
}

.cbw-small-bottom-padding{
  padding-bottom: var(--small_bottom_padding);
}

#cbw-footer-logo{
  width: 35%; 
}

textarea, option, small, label, input{
  border-radius: 0px !important;
  font-family: var(--content_font);
}

.card{
    border-radius: 0;
    background-color: inherit;
    border: none;
    /*
  border: none;
  */
}

.cbw-primary-container{
  background-color: var(--primary);
}

.cbw-secondary-container{
  background-color: var(--secondary);
}

.cbw-third-container{
  background-color: var(--third);
}


.cbw-action-container{
  background-color: var(--action_color);
}

.cbw-button {
  border-radius: 0;
  font-family: var(--content_font_bold);
  background-color: #253B4D;
  color: var(--secondary);
}

.cbw-button:hover{
    /*
  color: #ffffff !important;
  */
  color: var(--action_color_two);

}

.cbw-footer-button{
  color: var(--footer_color);
  background: var(--footer_background_color);
  border-color: var(--footer_color);
}

.cbw-form{
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}

.auto-complete-search{
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
  background-color: white;
}

.cbw-form-shadow{
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
  background-color: var(--third);
}

.cbw-shadow{
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
  background-color: var(--third);
}


.navbar-light .navbar-nav .nav-link{
    /*
    color: var(--action_color);
    text-decoration: underline;
    */
    color: #253B4D;
}
.navbar-light .navbar-nav .nav-link:hover{
    /*
    color: #E8CE4F;
    */
    color: var(--action_color_two);
}

.nav-link{
    font-family: LatoBold;
}

.cbw-search-bar{
    color: #253B4D;
    font-family: LatoBold;
}

.card-numbers{
}

.products-navbar-item{
}

.products-navbar> .nav-item >a:hover{
    background-color: var(--action_color);
    color: white;
}

.products-navbar> .nav-item >a.active{
    background-color: var(--action_color);
    color: white;
}

.product-detail-nav> .nav-item >a.active{
    color: #253B4D;
}

.product-detail-nav> .nav-item >a{
    color: var(--action_color_two);
}


.products-nav-link{
    color: var(--action_color_two);
}


.quote-form-nav-link{
  font-family: var(--content_font_bold);
  background-color: #253B4D;
  color: var(--secondary);
}


.quote-navbar> .nav-item >a:hover{
    color: var(--action_color_two);
}

.quote-navbar> .nav-item >a.active{
    color: black;
    background-color: white;
}


.product-card-link{
    color: black;
}

.product-card-link:hover{
    color: black;
}

.error {
    color: red !important;
}

.cbw-link{
    color: var(--link_color) !important;
    font-family: var(--content_font_bold);
}

.cbw-product-link{
    text-decoration: none !important;
    color: var(--action_color) !important;
    font-family: var(--content_font_bold);
}


.cbw-link:hover{
    color: var(--action_color_two);
}

.cbw-border{
    border-bottom: solid 2px var(--action_color);
}
.dropdown-menu>a:hover{
    background-color: var(--action_color);
    color: white;
}

.text-cbw-action{
    color: var(--action_color);
}

.dropdown-item:hover{
    background-color: var(--secondary);
    color: var(--action_color);
}


.cbw-thumbnail{
    cursor: pointer;
}


.main-product-card{
    text-decoration: none !important;
}

.main-product-card:hover{
  color: #253B4D;
}

.product-card-title{
}

.estimatedPrice{
    font-family: var(--content_font_bold);
    color: #253B4D;
}


 .bootstrap-select>.dropdown-toggle{
     background-color: white !important;
     border: .1em solid #ced4da !important;
 }

 .blog-page-item{
    cursor: pointer;
 }

.pagination > .active > a
{
    color: white;
    background-color: var(--action_color) !Important;
    border: none;
}

.pagination > .active > a:hover
{
    color: white;
    background-color: var(--action_color) !important;
    cursor: auto !important;
}


.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}


.cart-delete{
    font-size: 1.2rem;
    cursor: pointer
}

#design-checkout{
    color: white;
}

#design-checkout:hover{
    cursor: pointer;
    color: var(--action_color_two);
}
/*---Media Queries --*/

@media (max-width: 3000px) {
  #home-banner-row{
      min-height: 75vh;
  }



  #box-model{
    height: 800px !important;
  }
  .cbw-form{
    max-width: 25%;
  }

  .container{
      max-width: 1550px;
  }

}

@media (max-width: 2000px) {
  .cbw-form{
    max-width: 30%;
  }

}


@media (max-width: 1600px) {
  .cbw-form{
    max-width: 90%;
  }
}

@media (max-width: 1200px) {
  #home-banner-row{
      height: 50vh;
  }


  #box-model{
    height: 700px !important;
  }
  .cbw-form{
    max-width: 100%;
  }
}

@media (max-width: 992px) {
  #home-banner-row{
      height: 70vh;
  }

  #box-model{
    height: 500px !important;
  }
  .cbw-form{
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  #home-banner-row{
      height: 100%;
  }

  #box-model{
    height: 400px !important;
  }
   .cbw-form{
    margin: 10%;
    padding: 5%;
  }

}
@media (max-width: 576px) {
  .shadow-lg{
    box-shadow: none !important;
  }

  #box-model{
    height: 300px !important;
  }
  .cbw-form{
    box-shadow: none;
    margin: 3%;
    padding: 3%;
  }



  .banner-text{
      padding-top: 0%;
  }

  .non-mobile-container{
      display: none;
  }
}


/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}





/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/


/*
 * Changing other libraries
 * */

.g-recaptcha{
 transform:scale(0.80);
 -webkit-transform:scale(0.80);
 transform-origin:0 0;
 -webkit-transform-origin:0 0;
}