/*!
 * Start Bootstrap - Business Casual v5.0.9 (https://startbootstrap.com/template-overviews/business-casual)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-business-casual/blob/master/LICENSE)
 */

 html,
 body{
  overflow: hidden;
  overflow-y: auto;
  /*scroll-behavior: smooth;*/
}



body {
  font-family: 'Century Gothic';
  background-image: url("../img/content_bg.png");
  /*background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65)), url(../img/main_bg.jpg);*/
  /*background-attachment: fixed;*/
  background-position: center;
  background-size: cover;
  background-color: #ffffff;
  overflow-x: hidden !important;
}




@font-face {
  font-family: 'Megadeth';
  src: url('../vendor/Megadeth/Megadeth.ttf'); /* IE9 Compat Modes */
}

@font-face {
  font-family: 'Copperplate Gothic Light';
  src: url('../vendor/font/COPRGTL.TTF'); /* IE9 Compat Modes */
}


@font-face {
  font-family: 'Copperplate Gothic Bold';
  src: url('../vendor/font/COPRGTB.TTF'); /* IE9 Compat Modes */
}

@font-face {
  font-family: 'Century Gothic';
  src: url('../vendor/font/GOTHIC.TTF'); /* IE9 Compat Modes */
}



.sticky {
  position: sticky;
  top: 0;
  width: 100%;

}

.bg_black{
  background: #000000 !important;
}

/*.sticky + .content {
  padding-top: 60px;
  }*/

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Copperplate Gothic Light';
    color: #f4a203;
  }

  p {
    line-height: 1.5;
  }

  .text-faded {
    color: rgba(255, 255, 255, 0.3);
  }

  .site-heading {
  padding-top: 11rem;
  padding-bottom: 0;
  padding-left: 5rem;
  padding-right: 5rem;
  text-transform: uppercase;
  line-height: 1;
  font-family: 'Raleway';
}

.site-heading_support {
  padding-top: 7rem;
  padding-bottom: 0rem;
  padding-left: 12rem;
  padding-right: 12rem;
  text-transform: uppercase;
  line-height: 1;
  font-family: 'Raleway';
}

.site-heading .to_bottom{
  transform: rotate(90deg);
}

.site-heading .to_bottom img{
  max-width: 50px;-webkit-animation: pulse 2s infinite;animation: pulse 2s infinite;
}

.site-heading .site-heading-upper {
  display: block;
  font-size: 2rem;
  font-weight: 800;
}

.site-heading .site-heading-lower {
  font-size: 5rem;
  font-weight: 100;
  line-height: 4rem;
}

.page-section {
  margin-top: 25rem;
  margin-bottom: 0;
}

.section-heading {
  text-transform: uppercase;
}

.section-heading .section-heading-upper {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.section-heading .section-heading-lower {
  display: block;
  font-size: 3rem;
  font-weight: 100;
}

.bg-faded {
  background-color: rgba(255, 255, 255, 0.85);
}

#mainNav {
  /*background-color: rgba(16,20,24, 0.9);*/
  background-image: linear-gradient( rgba(0,0,0, 1), rgba(0,0,0,0));
  font-family: 'Century Gothic';
  /*background:none; */
  /*box-shadow: 0 3px 10px #000; */
  margin-bottom: -4.5rem; 
  z-index: 9999;
}

#mainNav .navbar-collapse{
  text-align: center;
}

#mainNav .navbar-brand {
  color: #e6a756;
}

#mainNav .navbar-nav .nav-item .nav-link {
  color: #d8a55e;
  font-weight: normal;
  letter-spacing: 1px;
}

#mainNav .navbar-nav .nav-item.active .nav-link {
  color: #e6a756;
}


#mainNav .nav-link{
  padding: 0.3rem 0.5rem;
}

.navbar{
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.dropdown-toggle::after {
  display: none;
}

.dropdown-menu {
  top: 2.6rem;
  left: 1.5rem;
  
  background-color: rgba(0,0,0,0.8);
  background-clip: padding-box;
  border-top: 1px solid #e6a756;
  border-bottom: 1px solid #e6a756;
  border-radius: 0;
}

.dropdown-item{
  font-size: 0.8rem;
  color: #e6a756;
  padding:0.5rem 1.5rem;
}





/*new design*/

/*main page starts*/
.main_banner,
.main_banner1 {
  background-image: none;
  background-size: cover; 
  background-position: center;
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: bottom; 
  margin-bottom: 15rem;
}
.main_banner:before,
.main_banner1:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 61rem;
  z-index: -10;
  background: url(../img/banner_bg1.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}
.main_banner2 {
  background-image: none;
  background-size: cover; 
  background-position: center;
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: bottom; 
  margin-bottom: 7rem;
}
.main_banner2_2nd:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 51rem;
  z-index: -2;
  background: url(../img/row2_bg.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}
.main_banner2_3rd:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 45rem;
  top: 173rem;
  z-index: -3;
  background: url(../img/row3_bg.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}
.main_banner2_3rd .carousel-inner .carousel-item .image img{
  width: 153% !important;
  position: relative;
  left: -4rem;
}
.main_banner2.main_banner2_3rd #demo .main_item a p{
  text-align: left;
  color: #d8a55e;
  text-shadow: 1px 1px 6px #f06a08;
  font-size: 1rem;
  text-decoration: underline;
  width: 100%; 
}
.main_banner2_4th .slider_content:before,
.main_banner2_4th .slider_content1:before,
.main_banner2_4th .slider_content2:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 44rem;
  z-index: -5;
  overflow-x: hidden;
}
.main_banner2_4th .slider_content:before{
  background: url(../img/row4_map1.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.main_banner2_4th .slider_content1:before{
  background: url(../img/row4_map2.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.main_banner2_4th .slider_content2:before{
  background: url(../img/row4_map3.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.main_banner2_4th .slider_content,
.main_banner2_4th .slider_content1,
.main_banner2_4th .slider_content2{
  height: 50rem;
  padding:0 1.5rem;
}
.main_banner2_5th:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 57rem;
  top: 236rem;
  z-index: -5;
  background: url(../img/the_making_bg.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}
.footer:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 30rem;
  z-index: -4;
  background: url(../img/footer_bg.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}
video {
  object-fit: cover;
  width: 100%;
  height: 52rem;
  position: absolute;
  top: 92rem;
  left: 0;
  z-index: -5;
}
/*main page ends*/


/*characters page starts*/
.main_banner.characters{
  background: url(../img/banner_title.png) no-repeat center bottom;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
  position: relative;
  margin: 0 !important;
  padding: 0rem 0 !important;
  padding-bottom: 6rem !important;
  margin-bottom: -9rem !important;
}
.main_banner.characters:before{
  content: "";
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20rem;
  z-index: -1;
  background: url(../img/banner_title.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}
.main_banner.characters .site-heading{
  padding-top: 4rem;
}
.main_banner2_1st.characters{
  margin-top: -6rem !important;
  margin-bottom: -15rem !important;
}
.main_banner2_1st.characters:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 90rem;
  z-index: -10;
  background: url(../img/character_bg.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}
.main_banner2_1st.characters img{
  width: 100%;
  position: relative;
  z-index: -9; 
  margin-bottom: 2rem;
}
.main_banner2_1st.characters h2{
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 6px #f06a08;
  font-size: 2.5rem;
  font-family: 'Copperplate Gothic Bold';
  z-index: -9;
  left: 0;
  width: 100%; 
  position: absolute;top: 65%;
}
/*characters page ends*/


/*the making page starts*/
.main_banner2_1st.characters.themaking:before{
  display: none;
}
.main_banner2.main_banner2_1st.characters.themaking a:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -8;
  background: rgba(0,0,0,0.5);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}
.main_banner2_1st.characters.themaking img{
  margin-bottom: 0;
}
.main_banner2_1st.characters.themaking h2{
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 6px #f06a08;
  font-size: 1.2rem;
  font-family: 'Copperplate Gothic Light';
  z-index: -8;
  left: 0;
  width: 100%; 
  position: absolute;
  top: 49%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.main_banner2_1st.characters.themaking p{
  text-align: center;
  color: #d8a55e;
  text-shadow: 1px 1px 6px #f06a08;
  font-size: 1rem;
  text-decoration: underline;
  z-index: -8;
  left: 0;
  width: 100%; 
  position: absolute;
  top: 38%;
}
/*the making page ends*/


/*support page starts*/
.main_banner2_1st.characters.support:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 93rem;
  z-index: -12;
  background: url(../img/character_bg.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}
/*support page end*/


/*changelog page starts*/
.main_banner2.main_banner2_1st.characters.changelog{
  position: relative; 
  margin: 0 !important;  
  padding: 9rem 0 !important; 
  padding-bottom: 11rem !important;
  margin-bottom: -13rem !important;
}
.main_banner2_1st.characters.changelog:before{
  height: 100% !important;
}
.main_banner2.main_banner2_1st.characters.changelog a:before{
  content: "";
  display: none; 
}
.main_banner2_1st.characters.changelog .thumb img{
  margin-bottom: 0;
  width: 150%;
  z-index: 0;
}
.main_banner2_1st.characters.changelog h2{
  text-align: right;
  color: #ffffff;
  text-shadow: 1px 1px 6px #f06a08;
  font-size: 1.2rem;
  font-family: 'Copperplate Gothic Light';
  z-index: 1;
  left: 0;
  width: 100%; 
  position: absolute;
  top: 49%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.main_banner2_1st.characters.changelog .thumb h2{
  text-align: left;
  font-family: 'Copperplate Gothic Bold';
  font-size: 2rem;
  top: 67%;
}
.main_banner2_1st.characters.changelog .view{
  text-align: right;
  color: #fff;
  text-shadow: 1px 1px 6px #f06a08;
  font-size: 1rem;
  text-decoration: underline;
  z-index: -8;
  left: 0;
  background: rgba(110,102,12,0.7);
  width: 100%;
  margin: 0;
  padding: 1rem 2rem;
  position: absolute;
  bottom: 0;
}
.main_banner2_1st.characters.changelog .date{
  text-align: right;
  color: #d8a55e;
  text-shadow: 1px 1px 6px #f06a08;
  font-size: 1rem;
  z-index: -8;
  left: 0;
  background: rgba(110,72,12,0.4);
  width: 100%;
  margin: 0;
  padding: 1rem 2rem;
  position: absolute;
  top: 0;
}
.main_banner2_1st.characters.changelog .details a{
  display: block;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  width: 100%;
  right;padding: 1.7rem 0;
}
.main_banner2_1st.characters.changelog .details{
  overflow: hidden;
}
.main_banner2_1st.characters.changelog .details:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -7rem;
  width: 100%;
  height: 44rem;
  z-index: -10;
  background: url(../img/row3_bg.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}
/*changelog page ends*/



/*heroes page starts*/
.main_banner.characters.heroes{
  background: url(../img/hero_top_bg.png) no-repeat center bottom; 
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1 !important;
  position: relative;
  margin: 0 !important;
  padding: 0rem 0 !important;
  padding-bottom: 29rem !important;
  margin-bottom: -9rem !important;
}
.main_banner2.main_banner2_1st.characters.heroes{
  margin-top: -23rem !important;
  padding-bottom: 10rem; 
  position: relative;
  margin-bottom: -13rem !important;
}
.main_banner2.main_banner2_1st.characters.heroes:before{
  height: 100% !important;
}
.main_banner2.main_banner2_1st.characters.heroes img{
  width: 130%;
}

.main_banner2.main_banner2_1st.characters.heroes img[src="img/hero_main7.png"]{
  width: 117%;
}
/*heroes page ends*/


/*themaking details page starts*/
.main_banner.characters.heroes.making_details{
  padding-bottom: 6rem !important;
  margin-bottom: -9rem !important;
}

.main_banner2.main_banner2_1st.characters.heroes.making_details{
  margin-top: 0 !important;
  padding-top:10rem;
}

.main_banner2.main_banner2_1st.characters.heroes.making_details .thumb{
  max-height: 20rem;
  overflow: hidden;
}
.main_banner2.main_banner2_1st.characters.heroes.making_details a img{
  margin-bottom: 0 !important;
}
.main_banner2.main_banner2_1st.characters.heroes.making_details h2,
.main_banner2.main_banner2_1st.characters.heroes.making_details p{
  color: #ffffff;
  text-shadow: 1px 1px 6px #f06a08; 
  font-family: 'Century Gothic'; 
  padding: 1rem;
  padding-top:0;
  margin:0;
  position: relative;
  top: 0;
}
.main_banner2.main_banner2_1st.characters.heroes.making_details h2{
  font-size: 1.5rem;
}
.main_banner2.main_banner2_1st.characters.heroes.making_details p{
  font-size: 1rem;
}
/*themaking details page starts*/


/*changelog details page starts
*/.main_banner2.main_banner2_1st.characters.heroes.making_details.patch_details{
  padding-top: 5rem;
}
.main_banner2.main_banner2_1st.characters.heroes.making_details.patch_details .thumb{
  max-height: 100%;
  overflow-y: auto;
}
.main_banner2.main_banner2_1st.characters.heroes.making_details.patch_details .row2_support ul{
  color: #ffffff;
  text-shadow: 1px 1px 6px #f06a08;
}
/*changelog details page ends*/


/*tnc page starts*/
.main_banner2.main_banner2_1st.characters.heroes.making_details.patch_details.tnc .thumb{
  max-height: 100%;
  overflow-y: auto;
}
.main_banner2.main_banner2_1st.characters.heroes.making_details.patch_details.tnc .row2_support{
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}
/*tnc page ends*/



.modal-body img{
  z-index: 1 !important;
  margin-bottom: 0 !important;
}








.main_banner .site-heading img,
.main_banner .site-heading_support img{
  width: 100%;
}

.main_banner .site-heading .col-12{
  margin: 0 auto; 
  display: flex; 
  justify-content: space-evenly;
}

.main_banner .site-heading .col-12 img{
  width: 80%;
}






.no_style{
  list-style: none;
}



.nav_wrapper{
  position: absolute;
  width: 100%;
}







.page-section:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 41rem;
  width: 100%;
  height: 51rem;
  z-index: -11;
  background: url(../img/row0_bg.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}


.row2{
  top: 0rem;
}


.row2 .main_text{
  position: relative;

}

.row2 .main_text p{
  padding: 0 5rem;
  padding-top: 5rem;
  color: #ffffff; 
  text-align: justify;
}



footer .main_text6 .col-10{
  color: #ffffff;
  text-align: center;
  margin: 0 auto;
}

footer .main_text6 {
  margin-top: 7rem;
  margin-bottom: 2rem;
}

footer .main_text6 img{
  width: 100%;
}

footer .main_text6  .footer_main{
  padding-top: 5rem;
}

footer .main_text6  .col-3,
footer .main_text6  .col-6{
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
}

footer .main_text6 .col-6{
  border-top: 1px solid #666666;
  border-bottom: 1px solid #666666;
  margin-top: 1.5rem;
  padding-bottom: 1rem;
}

footer .main_text6  img{
  width: auto;
  max-width: 40px;
}






.row2_support {
  top: 0; 
}
.row2_support .main_text {
  position: relative;
  padding: 3rem 5rem;
  margin: 10rem 0;
  margin-top: 4rem;
}
.row2_support .main_text p,
.row2_support .main_text label {
  text-align: center;color: #ffffff;
  text-shadow: 1px 1px 6px #f06a08; 
  font-size: 1rem;
  font-family: 'Copperplate Gothic Light'; 
  text-align: left;
}

.row2_support .main_text ul{
  color: #fc0404;
}

.row2_support .help-block{
  color: #f00;
  margin-top: 0.5rem;
}

.row2_support input,
.row2_support textarea,
.row2_support select {
  font-weight: 300;
  max-width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border .12s ease-in-out;
  border: 1px solid #a48226;
  border-radius: 4px;
  padding: 10px;
  background-color: rgba(255,255,255,0.7);
  width: 100%;
  box-shadow: inset 0px 0px 12px 0px #333;
}

.row2_support select option{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.row2_support textarea{
  min-height: 150px;
}

.text-muted{
  color: #f9f9f9 !important;
}

.row2_support label:after {
  content: "*";
  color: #f00;
  margin-left: 2px;
  font-size: 1.5rem;
  line-height: 0.5rem;
}

.row2_support label[for="form_attachment"]:after {
  display: none;
}
.row2_support .main_text6 .col-10{
  margin-top: 7rem;
  margin-bottom: 5rem;
  margin-left:auto;
  margin-right:auto;
}

.row2_support .main_text6 .col-10 img{
  width: 100%;
}

.row2_support .main_text6 .col-10 .footer_main{
  padding-top: 5rem;
  text-align:center;
}

.row2_support .main_text6 .col-10 .footer_main .col-6{
  margin: 0 auto;
  padding-top: 2rem;
  display: flex;
  justify-content: space-evenly;
}

.row2_support .main_text6 .col-10 .footer_main .col-6 img{
  width: auto;
  max-width: 50px;
}

.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #6c6c6c;
  border-color: #6c6c6c;
}

.row2_support .button-large, input[type="submit"] {
  background-color: #248b09;
  border: 0;
  border-radius: 4px;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: 400;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}


.playpause {
  background-image:url(../img/video_play_thumb.png);
  background-repeat:no-repeat;
  width:100%;
  height:100%;
  position:absolute;
  left:0%;
  right:0%;
  top:0%;
  bottom:0%;
  margin:auto;
  background-size:cover;
  background-position: center;
  z-index: 702;
}


@keyframes pulse {
 0% {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

50% {
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);
}
100% {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
}

@media (min-width: 992px) {
  #mainNav .navbar-nav .nav-item .nav-link {
    font-size: 0.8rem;
  }
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: rgba(255, 255, 255, 0.4);
  }
  #mainNav .navbar-nav .nav-item.active .nav-link:hover {
    color: #e6a756;
  }
}

.btn-xl {
  font-weight: 700;
  font-size: 0.8rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.intro {
  position: relative;
}

@media (min-width: 992px) {
  .intro .intro-img {
    width: 75%;
    float: right;
  }
  .intro .intro-text {
    left: 0;
    width: 60%;
    margin-top: 3rem;
    position: absolute;
  }
  .intro .intro-text .intro-button {
    width: 100%;
    left: 0;
    position: absolute;
    bottom: -2rem;
  }
}

@media (min-width: 1200px) {
  .intro .intro-text {
    width: 45%;
  }
}

.cta {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: rgba(230, 167, 86, 0.9);
}

.cta .cta-inner {
  position: relative;
  padding: 3rem;
  margin: 0.5rem;
  background-color: rgba(255, 255, 255, 0.85);
}

.cta .cta-inner:before {
  border-radius: 0.5rem;
  content: '';
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.85);
}

@media (min-width: 992px) {
  .about-heading .about-heading-img {
    position: relative;
    z-index: 0;
  }
  .about-heading .about-heading-content {
    margin-top: -5rem;
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 992px) {
  .product-item .product-item-title {
    position: relative;
    z-index: 1;
    margin-bottom: -3rem;
  }
  .product-item .product-item-img {
    position: relative;
    z-index: 0;
    max-width: 60vw;
  }
  .product-item .product-item-description {
    position: relative;
    z-index: 1;
    margin-top: -3rem;
    max-width: 50vw;
  }
}

.list-hours {
  font-size: 0.9rem;
}

.list-hours .list-hours-item {
  border-bottom: 1px solid rgba(230, 167, 86, 0.5);
  padding-bottom: .25rem;
  margin-bottom: 1rem;
  font-style: italic;
}

.list-hours .list-hours-item.today {
  font-weight: bold;
  color: #e6a756;
}

@media (min-width: 992px) {
  .list-hours {
    width: 50%;
    font-size: 1.1rem;
  }
}

.address strong {
  font-size: 1.2rem;
}


.text-primary {
  color: #e6a756 !important;
}

.bg-primary {
  background-color: #e6a756 !important;
}

.btn {
  box-shadow: 0px 3px 3px 0px rgba(33, 37, 41, 0.1);
}

.btn-primary {
  background-color: #e6a756;
  border-color: #e6a756;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #df902a;
  border-color: #df902a;
}

.font-weight-light {
  font-weight: 100 !important;
}


@media (max-width: 768px) {
  #recipeCarousel .carousel-inner .carousel-item > div {
    display: none !important;
  }
  #recipeCarousel .carousel-inner .carousel-item > div:first-child,
  #recipeCarousel .carousel-inner .carousel-item > div:nth-child(2){
    display: flex !important;
  }
}

@media (max-width: 430px) {
  #recipeCarousel .carousel-inner .carousel-item > div,
  #recipeCarousel .carousel-inner .carousel-item > div:nth-child(2) {
    display: none !important;
  }
  #recipeCarousel .carousel-inner .carousel-item > div:first-child {
    display: flex !important;
  }
}

#recipeCarousel .carousel-inner .carousel-item.active,
#recipeCarousel .carousel-inner .carousel-item-next,
#recipeCarousel .carousel-inner .carousel-item-prev {
  display: flex;
}

@media (min-width: 768px) {

  #recipeCarousel .carousel-inner .carousel-item-right.active,
  #recipeCarousel .carousel-inner .carousel-item-next {
    transform: translateX(33.333%);
  }

  #recipeCarousel .carousel-inner .carousel-item-left.active, 
  #recipeCarousel .carousel-inner .carousel-item-prev {
    transform: translateX(-33.333%);
  }
}

@media (max-width: 767px) {

  #recipeCarousel .carousel-inner .carousel-item-right.active,
  #recipeCarousel .carousel-inner .carousel-item-next {
    transform: translateX(50%);
  }

  #recipeCarousel .carousel-inner .carousel-item-left.active, 
  #recipeCarousel .carousel-inner .carousel-item-prev {
    transform: translateX(-50%);
  }
}

#recipeCarousel .carousel-inner .carousel-item-right,
#recipeCarousel .carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}