@charset "UTF-8";
/* CSS Document */

/* google fonts
font-family: 'Chivo', sans-serif;
font-family: 'Overpass', sans-serif;
font-family: 'Permanent Marker', cursive;
font-family: 'Roboto', sans-serif;
*/

body {
  font-family: 'Chivo', sans-serif;
  color: #7c6424;
}

.bg-tan {
  background: rgba(241, 229, 205, 0.6);
}
.bg-tan-100 {
  background: rgba(241, 229, 205, 1.0);
}

.b-bottom {
    border-bottom: 4px solid #7c6424;
}
.b-top {
    border-top: 2px solid #7c6424;
}
.text-brown {
    color: #201c1e;
}

.text-white {
    color: #ffffff;
}

a,
body.promo #photos a,
body.promo #posters a{
    color: #ffffff;
}

a:hover,
body.promo #photos a:hover,
body.promo #posters a:hover {
  cursor: pointer;
  color: #ffffff;
}

body.promo footer a:hover{
  cursor: pointer;
  color: #ffffff;
}

body.promo #contact a {
    color: #7c6424;
}

body.promo #contact a:hover {
    color: #7c6424;
}




h1, h2, h3, h4 {
font-family: 'Roboto', sans-serif;
    font-weight:600;
        font-size: 30px;
    text-transform: uppercase;
}

h2.page-title {
    font-family: 'Roboto', sans-serif;
    font-weight:600;
    font-size: 25px;
    text-transform: uppercase;
}
@media only screen and (min-width : 768px) {
    h2.page-title {
    font-family: 'Roboto', sans-serif;
    font-weight:600;
    font-size: 40px;
    text-transform: uppercase;
}
}

h1 {
  font-size: 28px;
font-family: 'Roboto', sans-serif;
  color: rgba(46, 29, 11, 1.0);
  margin-bottom: 15px;
}

@media only screen and (min-width : 768px) {
  h1 {
    font-size: 40px;
    text-transform: uppercase;
    color: rgba(46, 29, 11, 1.0);
    margin-bottom: 30px;
  }
}
.navbar-brand span {
font-family: 'Roboto', sans-serif;
    font-weight:700;
        font-size: 22px;
    text-transform: uppercase;
}
@media only screen and (min-width : 768px) {
  .navbar-brand span {
font-family: 'Roboto', sans-serif;
    font-weight:700;
        font-size: 30px;
    text-transform: uppercase;
}
}

.offcanvas-header .navbar-brand span {
font-family: 'Roboto', sans-serif;
    font-weight:700;
        font-size: 22px;
    text-transform: uppercase;
    color: #7c6424;
}

/* Define the new class */
.btn-close-custom {
  background-color: #7c6424; /* This changes the background color of the button */
  border: none; /* Removes any border if present */
  color: white; /* Changes the text color, if applicable */
}

.offcanvas-dk-brown {
    background-color: #100e0f;
}

h1.heading {
  position: relative;
  color: #fff;
  width: 100%;
  margin: 0;
  margin-top: 30px;
  padding: 0;
}

h1.heading:before {
  display: inline-block;
  margin: 0;
  content: " ";
  text-shadow: none;
  background: url("../images/header-left.png") no-repeat right center;
  width: 30%;
  height: 87px;
  left: 0;
  vertical-align:middle;
}
h1.heading:after {
  display: inline-block;
  margin: 0;
  content: " ";
  text-shadow: none;
  background: url("../images/header-right.png") no-repeat left center;
  width: 30%;
  height: 87px;
  vertical-align:middle;
}

h1.heading span {
  display:inline-block;
  vertical-align:middle;
  background: #000000;
  padding: 13px 10px;
}

.intro {
    font-size: 24px;
    line-height: 1.75em;
}
.contact h2 {
  margin-bottom: 0;
}.contact p {
  font-weight: 700;
  line-height: 1.5em !important;
}
b {
  font-weight: 700;
}
.modal-body p {
  font-family: 'Roboto', sans-serif;
}

.section {
  padding: 30px 0;
}

.home .section {
  padding: 20px 0;
}
@media only screen and (min-width : 480px) {
  .home .section {
    padding: 30px 0;
  }
}

.section-68 {
    margin-top: 68px !important;
}

.section-pad {
   padding-top: 30px; 
}
@media only screen and (min-width : 992px) {
 .section-pad {
   padding-top: 100px; 
}   
}


.section-da-home {
    background: url("../images/The-Driftless-Area-Website-Cover-2024.jpg") no-repeat center center;
    background-size: cover;
    height: 100%;
    min-height: 300px;
    margin-top: 0px;
}

.section-da-shows {
    background: url("../images/The-Driftless-Area-Website-Cover-2024.jpg") no-repeat center center;
    background-size: cover;
    height: 100%;
    min-height: 300px;
    margin-top: 0px;
}


  .section-album-art {
    background: url(../images/The-Driftless-Area-Website-Cover-2024.jpg) no-repeat top center;
    background-size: cover;
    min-height: 300px;  
    padding-top: 20px;
    padding-bottom: 50px;
    color: #ffffff;

} 
.section-top {
   background: url(../images/The-Driftless-Area-Website-Cover-2024.jpg) no-repeat top center;
    background-size: cover;
    min-height: 300px;  
    padding-top: 20px;
    padding-bottom: 50px;
    color: #ffffff;
    margin-top: -80px;  

}

.section-two {
  background-color: #e2ddd7;
}

.section-brown {
  background-color: #bd901d;
    color: #ffffff;
}

.section-lt-brown {
  background-color: #ece9dc;
}

.section-dk-brown {
  background-color: #201c1e  ;
}
.section-left {

}

.section-right {
  background-color: #000000;
}

.section-home-video {
  background-color: #000000;

}


@media only screen and (min-width : 992px) {
    .section-da-home {
    min-height: 580px;
    margin-top: 0px;
  }
   
  .section-album-art {
    background: url(../images/The-Driftless-Area-Website-Cover-2024.jpg) center fixed repeat-y;
    background-size: 100%;
    padding-top: 20px;
    padding-bottom: 50px;
    color: #ffffff;
    margin-top: -80px;  
}    
  .section-top {
    background: url(../images/The-Driftless-Area-Website-Cover-2024.jpg) no-repeat top center;
    background-size: cover;
    min-height: 450px;
    padding: 40px 0;
    margin-top: -80px !important;
  }
}

@media only screen and (min-width : 992px) {
    .section-da-home {
    min-height: 750px;
    margin-top: 0px;
  }
  .section-tda-live {
    background: url(../images/Live/Solsta-3.jpg) no-repeat top center;
    background-size: cover;
    min-height: 450px;
    padding: 40px 0;
    margin-top: 25px !important;

  }
}

.section-no-image {
  margin-top: 70px !important;
}

.section-intro {
  margin-top: 50px;
}

.section-intro h1 {
  text-align: center;
}

.section-intro p {
  font-size: 18px;
  line-height: 2em;
}
.section-home-intro h1 {
  line-height: 1.5em;
  margin-bottom: 0;
}
.section-home-intro h1 span {
  display: block;
}

.section-home-intro p {
  font-size: 18px;
  line-height: 2em;
}

.section-tda {
  background: url("../images/promo-DSC_2154.jpg") no-repeat center center;
  background-size: cover;
  min-height: 300px;
  padding: 40px 0;
}

.section-dk {
  color: #ffffff;
  text-shadow: 2px 2px #2e2522;
  background: #2e1d0b;
}

.section-board-dk {
background-image: url("../images/dk-board.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #ffffff;
}


.section-feature {
  background-color: transparent;
  color: #ffffff;
  text-shadow: 2px 2px #2e2522;
  padding: 60px 0;
  background: #2e1d0b;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
    /* background: url("../images/field.jpg") no-repeat center center;
    background-size: cover; */

}

.featured-album-img {
    max-width: 100%;
    position: relative;
}

@media only screen and (min-width: 768px) {
.featured-album-img {
    /* max-width: 300px; */
    max-width: 100%;

}
}

.featured-album-img img {
    position: relative;
    top: 0;
    margin-top: 20px;
}

@media only screen and (min-width: 768px) {
  .featured-album-img img {
      position: absolute;
      left: 0;
      top: -75px;
  }
}

.body-bathroom {
  background: url("../images/Bathroom-Wall.jpg") no-repeat center center;
  background-attachment: fixed;
}


.section-feature h2{
  font-family: 'Chivo', sans-serif;
  color: #ffffff;
  text-transform: uppercase;

}

.section-feature h2 span{
  font-family: 'Chivo', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
}


/* override toggle border */
.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 1.0);
    border-color: rgba(0, 0, 0, 0.0);
}

.navbar-driftlessarea-hsla .navbar-toggler {
    color: rgba(255, 255, 255, 1.0);
}

.navbar-light .navbar-toggler-icon {
    font-size: 1.2em;
}
.fixed-top.scrolled {
  /* background-color: rgba(255, 255, 255, 0.8) !important; */
  background-color: rgba(120, 87, 56, 0.9) !important;
  transition: background-color 200ms linear;
}
.navbar.activated {
   background: rgba(120, 87, 56, 0.9) !important;
}
.navbar-driftlessarea-hsla {
/*
  background-color:hsla(44,71%,49%,0.3); 
  border-color: hsla(44,71%,49%,0.1);
*/background-color: rgba(32, 28, 30, 0.2);
  border-bottom: 4px solid #201c1e;
    
}

.navbar-driftlessarea {
  background: rgba(255, 255, 255, 1.0);
}



.navbar-driftlessarea .navbar-nav .nav-link {
    color: rgba(124, 100, 36, 1.0);
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight:700;
}

.navbar-driftlessarea .navbar-nav .nav-link:hover,
.navbar-driftlessarea .navbar-nav .nav-link.active {
    color: rgba(0, 0, 0, 1.0);
}

@media only screen and (min-width : 992px) {
.navbar-driftlessarea .navbar-nav .nav-link:hover,
.navbar-driftlessarea .navbar-nav .nav-link.active {
    color: rgba(0, 0, 0, 1.0);
}
}


.navbar-driftlessarea-hsla .navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight:700;
    color: #7c6424;
}

.navbar-driftlessarea-hsla .navbar-nav .nav-link:hover,
.navbar-driftlessarea-hsla .navbar-nav .nav-link.active {
    color: #7c6424;
}
@media only screen and (min-width : 992px) {
    .navbar-driftlessarea-hsla .navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight:700;
    color: #ffffff;
}
    
.navbar-driftlessarea-hsla .navbar-nav .nav-link:hover,
.navbar-driftlessarea-hsla .navbar-nav .nav-link.active {
    color: #201c1e;
}
}

.navbar-driftlessarea a.navbar-brand {
  display: block;
}

@media only screen and (min-width : 768px) {
  .navbar-driftlessarea a.navbar-brand {
    display: block;
  }
}

.navbar-driftlessarea a.navbar-brand img {
  max-width: 100%;
  margin: 0 auto;
}

.navbar-nav.social {
  display: block;
}
@media only screen and (min-width : 992px) {
  .navbar-nav.social {
    display: flex;
  }
}
.social {
	    background-color: #231f1c;
	    margin-bottom: 0;
}

.social.nav>li>a{
	position: relative;
    display: inline-block;
    padding: 10px 18px 20px 18px;
    float: left;
	}
  .social.nav>li>a:hover {
      color: #0056b3;
      text-decoration: none;
    }
@media only screen and (min-width : 768px) {
	.social {
	    background-color: transparent;
}

	.social.nav>li>a{
		position: relative;
		display: block;
		padding: 10px 7px;

	}
}
.navbar-nav i.fa {
	display: block;
    width: 1em;
    height: 1em;
    border-radius: 100%;
    text-align: center;
    padding: .1em;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: transparent;
    /* color: rgba(241, 229, 205, 1.0); */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
	line-height: 25px;
}

 @media only screen and (min-width : 992px) {
	.navbar-nav i.fa {
			line-height: 25px;
	 }
 .social.nav>li>a{
   position: relative;
   display: block;
   padding: 10px 4px;
 }
 .social.nav>li:first-child a{
   padding: 10px 0px 10px 10px;
 }
}

footer {
  font-family: 'Roboto', sans-serif;
  margin-top: 0;
}

.footer-social {
    display: blo    
 

   width: 100%;
    margin: 19px 0;
    margin-bottom: 10px;
    vertical-align: middle;
    text-align: center;
    padding-left: 0px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.footer-social li {
    display: inline-block;
    padding: 0px;
	padding-bottom: 0;
}

.footer-social li a {
    height: 24px;
    width: 24px;
    margin-right: 0;
	font-size: 24px;
    text-align: center;
	text-indent: 0px;
    display: block;
	text-decoration: none;
  color: rgba(124, 100, 36, 1.0)
}

.footer-social li a:hover {
	    color: rgba(124, 100, 36, 0.7);
}

/* Style all font awesome icons */
.fa {
	display: block;
    width: 1em;
    height: 1em;
    border-radius: 100%;
    text-align: center;
    padding: 4px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: /*#604a24*/ rgba(0,0,0,.0);
    color: #000000;
}


/* Add a hover effect if you want */
.fa:hover, .fa:focus {
	color: #000000;
    background: rgba(0,0,0,.0);
}

p.download, span.download {
  margin-top: 10px;
  text-transform: uppercase;
}

p.download a, span.download a {
  font-weight: 700;
  color: rgba(0,0,0,1.0);
}

p.download a:hover, span.download a:hover {
  font-weight: 700;
  color: rgba(0,0,0,0.7);
  text-decoration: none;
}

.btn-tda {
  color: #7c6424;
    border-color: #7c6424;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 5px 0 10px 0;
}

.btn-tda:hover {
  background-color: #7c6424; /* #d5a10f; */
  border-color: #7c6424; /* #c9a679; */
}

.btn-white {
    background-color: #ffffff; /* #d5a10f; */
    color:#7c6424;
    border-color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 5px 0 10px 0;
}

.btn-white:hover {
  background-color: #ffffff; /* #d5a10f; */
  border-color: #ffffff; /* #c9a679; */
  color:#7c6424;
}

.btn-white-outlined {
  color: #ffffff;
    border-color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 5px 0 10px 0;
}

.btn-white-outlined:hover {
  background-color: #ffffff; /* #d5a10f; */
  border-color: #ffffff; /* #c9a679; */
    color:#7c6424;
}
.thumbnail  {
  object-fit: cover;
  object-position: center;
  height: 110px;
  width: 100%;
 }

 .thumbnail-shows{
   height: 150px;
    width: 50%;
    object-position: top;
 }

 a img:hover {
   opacity: 0.7;
   cursor: pointer;
 }

 .product-container {
   padding: 20px;
   background: rgba(241, 229, 205, 0.8);
   color: #000000;
 }

 /* lyrics hover cards */
 .hovereffect {
     width: 100%;
     height: 100%;
     float: left;
     overflow: hidden;
     position: relative;
     text-align: center;
     cursor: default;
 }
 .hovereffect .overlay {
     width: 100%;
     position: absolute;
     overflow: hidden;
     left: 0;
 	top: auto;
 	bottom: 0;
 	padding: 1em;
 	height: 4.75em;
 	background: #79FAC4;
 	color: #3c4a50;
 	-webkit-transition: -webkit-transform 0.35s;
 	transition: transform 0.35s;
 	-webkit-transform: translate3d(0,100%,0);
 	transform: translate3d(0,100%,0);
 	visibility: hidden;

 }

 .hovereffect img {
     display: block;
     position: relative;
 	-webkit-transition: -webkit-transform 0.35s;
 	transition: transform 0.35s;
 }

 .hovereffect:hover img {
 -webkit-transform: translate3d(0,-10%,0);
 	transform: translate3d(0,-10%,0);
 }

 .hovereffect h2 {
     text-transform: uppercase;
     color: #fff;
     text-align: center;
     position: relative;
     font-size: 17px;
     padding: 10px;
     background: rgba(0, 0, 0, 0.6);
 	float: left;
 	margin: 0px;
 	display: inline-block;
 }

 .hovereffect a.info {
     display: inline-block;
     text-decoration: none;
     padding: 7px 14px;
     text-transform: uppercase;
 	color: #fff;
 	border: 1px solid #fff;
 	margin: 50px 0 0 0;
 	background-color: transparent;
 }
 .hovereffect a.info:hover {
     box-shadow: 0 0 5px #fff;
 }


 .hovereffect p.icon-links a {
 	float: right;
 	color: #3c4a50;
 	font-size: 1.4em;
 }

 .hovereffect:hover p.icon-links a:hover,
 .hovereffect:hover p.icon-links a:focus {
 	color: #252d31;
 }

 .hovereffect h2,
 .hovereffect p.icon-links a {
 	-webkit-transition: -webkit-transform 0.35s;
 	transition: transform 0.35s;
 	-webkit-transform: translate3d(0,200%,0);
 	transform: translate3d(0,200%,0);
 	visibility: visible;
 }

 .hovereffect p.icon-links a span:before {
 	display: inline-block;
 	padding: 8px 10px;
 	speak: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }


 .hovereffect:hover .overlay,
 .hovereffect:hover h2,
 .hovereffect:hover p.icon-links a {
 	-webkit-transform: translate3d(0,0,0);
 	transform: translate3d(0,0,0);
 }

 .hovereffect:hover h2 {
 	-webkit-transition-delay: 0.05s;
 	transition-delay: 0.05s;
 }

 .hovereffect:hover p.icon-links a:nth-child(3) {
 	-webkit-transition-delay: 0.1s;
 	transition-delay: 0.1s;
 }

 .hovereffect:hover p.icon-links a:nth-child(2) {
 	-webkit-transition-delay: 0.15s;
 	transition-delay: 0.15s;
 }

 .hovereffect:hover p.icon-links a:first-child {
 	-webkit-transition-delay: 0.2s;
 	transition-delay: 0.2s;
 }

 /* product wrap and hover */
 .product-wrap .product-info {
    background-color: rgba(46, 29, 11, 0.7);
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    visibility: hidden;
    color: #e3ded8;
    margin: 0 15px;
}

.product-wrap:hover .product-info {
    visibility: visible;
}

.product-wrap .product-info-innner {
    display: table;
    width: 100%;
    height: 100%;
}
.product-wrap .product-info-inner-item {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}


.btn-main {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    padding: 10px 16px;
    font-size: 20px;
    line-height: 1.33333;
    border-radius: 0;
    font-weight: bold;
    display: table;
    text-decoration: none;
    margin: 0 auto;
}
.btn-main:hover {
    /* background-color: #e3ded8; */
    color: #464646;
}

a.btn-main {
  color: rgba(227, 222, 216, 1.0)
}

a.btn-main:hover {
  text-decoration: none;
  color: rgba(227, 222, 216, 0.8);
}

.product-info-inner-item .footer-social {
    margin: 5px 0;
  }

.product-info-inner-item .footer-social li a {
  color: rgba(227, 222, 216, 1.0)
}

.product-info-inner-item .footer-social li a:hover {
	    color: rgba(227, 222, 216, 0.7);
}

.modal-content {
    background-color: #f1e5cd;
  }

  .modal-header {
    border-bottom: none;
    padding-bottom: 0;
  }

.modal-content .by-line {
  font-size: 80%;
}

#videoModal .modal-content {
    background-color: #000000;
}

#videoModal .close {
    color: #fff;
  }

  /* lazyload youtube videos for video page */
  .wrapper {
      max-width: 680px;
      margin: 10px auto;
      padding: 0 20px;
  }

  .youtube {
      background-color: #000;
      margin-bottom: 10px;
      position: relative;
      padding-top: 56.25%;
      overflow: hidden;
      cursor: pointer;
  }
  .youtube img {
      width: 100%;
      top: -16.82%;
      left: 0;
      opacity: 0.7;
  }
  .youtube .play-button {
      width: 90px;
      height: 60px;
      background-color: #333;
      box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
      z-index: 1;
      opacity: 0.8;
      border-radius: 6px;
  }
  .youtube .play-button:before {
      content: "";
      border-style: solid;
      border-width: 15px 0 15px 26.0px;
      border-color: transparent transparent transparent #fff;
  }
  .youtube img,
  .youtube .play-button {
      cursor: pointer;
  }
  .youtube img,
  .youtube iframe,
  .youtube .play-button,
  .youtube .play-button:before {
      position: absolute;
  }
  .youtube .play-button,
  .youtube .play-button:before {
      top: 50%;
      left: 50%;
      transform: translate3d( -50%, -50%, 0 );
  }
  .youtube iframe {
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
  }

.show-details {
  text-align: center;
  padding: 10px;
}

.event-info-venue{
  line-height: 1;
  font-size: 22px;
}
.event-info-location{}
.event-date-day{
  display: block;
    line-height: 1;
    text-align: center;
    padding: 10px;
    color: #2e1d0b;
}

  @media only screen and (min-width: 768px) {
    .show-details {
    	padding-top: 20px;
  }
      .event-info-venue  {
      font-size: 28px;
    }
  }


  @media only screen and (min-width: 768px) {
  .show-details {
  	padding-top: 20px;
  	}}
  .event-info-venue {
      line-height: 1;
      font-size: 22px;
  }
  @media only screen and (min-width: 768px) {
  .event-info-venue  {
      font-size: 28px;
  	}}


  .event-date {
  	display: block;
      line-height: 1;
      text-align: center;
      padding: 10px;
  	background: rgba(20,20,20,0.7);
  }

  .event-poster{}

  @media only screen and (min-width: 768px){
  .event-date {
  }
  .event-poster {
  	max-width: 200px;
  }}

  .heading-m-compact {
      margin: 0!important;
  }

  .heading {
      text-transform: uppercase;
      letter-spacing: .05em;
      line-height: 1;
  }

  .event-date-month {
      text-transform: uppercase;
  	font-size: 22px;

  }

  .event-date-day {
      font-size: 24px;
      font-weight: 700;
  	text-transform: uppercase;
  }

  .event-date-date {
      font-size: 26px;
      font-weight: 700;
  	text-transform: uppercase;
  }

  .event-time {
      font-size: 24px;
      font-weight: 700;
  	letter-spacing: 0;
  }
  @media only screen and (min-width: 768px){

  .event-info a {
      color: #df0505;
  }

  .event-info-location a, .event-info-venue a {
      display: block;
  }

  .event-info a {
      word-break: break-word;
      text-decoration: none;
  }
  .event-date-year {
      color: #2e1d0b;
  }


  .event-info-location {
      color: #2e1d0b;
  	text-transform: uppercase;
  	padding-top: 5px;
  	    font-size: 20px;
      margin-bottom: 10px;
  }


  .event-info-location {
      font-size: 20px;
  	}


  .event-info-venue {
      text-transform: uppercase;
  }

  .event-actions {
      width: 300px;
      text-align: right;
    }
}

#more {display: none;}

/* Horizontal line */
.collapsible-link::before {
  content: '';
  width: 14px;
  height: 2px;
  background: #333;
  position: absolute;
  top: calc(50% - 1px);
  right: 1rem;
  display: block;
  transition: all 0.3s;
}

/* Vertical line */
.collapsible-link::after {
  content: '';
  width: 2px;
  height: 14px;
  background: #333;
  position: absolute;
  top: calc(50% - 7px);
  right: calc(1rem + 6px);
  display: block;
  transition: all 0.3s;
}

.collapsible-link[aria-expanded='true']::after {
  transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded='true']::before {
  transform: rotate(180deg);
}

img.promo-image {
  max-height: 150px;
}

img.promo-image-med {
  max-height: 250px;
}

#summary,
#summary-2 {
  font-size: 16px;
  line-height: 24px;
}

#summary div.collapse:not(.show),
#summary-2 div.collapse:not(.show) {
    height: 54px !important;
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#summary div.collapsing,
#summary-2 div.collapsing
 {
    min-height: 54px !important;
}

@media only screen and (min-width: 768px){
  #summary div.collapse:not(.show),
  #summary-2 div.collapse:not(.show) {
      height: 84px !important;
      overflow: hidden;

      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }

  #summary div.collapsing,
  #summary-2 div.collapsing
   {
      min-height: 84px !important;
  }
}

#summary p,
#summary-2 p {
  margin-bottom: .5em;
}

#summary a.collapsed:after,
#summary-2 a.collapsed:after  {
    content: '+ Read More';
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
}

#summary a:not(.collapsed):after,
#summary-2 a:not(.collapsed):after  {
    content: '- Read Less';
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
}

.news-item {
  display: table;
  padding: 20px 0;
  border-bottom:1px solid #2e1d0b;
  width: 100%;
}
.news-content {
width: 100%;
display: block;
 vertical-align: top;
}

.news-image {
  width: 100%;
  display: block;
  vertical-align: top;
  text-align: center;
}

@media only screen and (min-width: 480px){
  .news-content {
  width: 59%;
  display: table-cell;
   vertical-align: top;
  }

  .news-image {
    width: 41%;
    display: table-cell;
    vertical-align: top;
    text-align: center;
  }
}

.news-image img {
  width: 220px;
  height: auto;
}
.size-select {
    margin: 0 auto 20px auto;
    font-size: 16px;
    color: #000000;
    font-weight: 600;
}
.size-select select {
    width: 100%;
    padding: 5px;
    font-size: 14px;
    line-height: 1;
    border-radius: 0;
    height: 34px;
}

.photos h2, .home .section-video h4 {
  color: #ffffff;
}
@media only screen and (min-width: 480px){
  .photos h2, .home .section-video h4 {
    color: #2e1d0b
  }
}

.alert-success {
    color: #ffffff;
    background-color: #785738;
    border-color: #785738;
}

.section-video h3 {
  font-size: 18px;
  margin-top: 5px;
}

.navbar-toggler:focus {
    /*Below line will remove the border from the icon
    I have used bootstrap icon here */
    /* This will only remove the shadow effect */
    /* Border is still there */
    /* if you don't want any border then set the property equals to zero */
    border: 0 !important;
    box-shadow: none !important;
  
    /* This will remove the rounded corner(radious-border)
    and give square border */
    /* border-radius: 0 !important; */    
}

.navbar-toggler {
    /* This will completely remove border from the icon */
    /* If you need border for the icon then comment this code */
     border: 0 !important;

    /* if you want to check the border please uncomment below code */
    /* border-color: yellow !important; */
}

/*for promo page readmore*/
.more-text {
      display: none;
    }

.read-more-link {
      cursor: pointer;
      color: #ffffff; /* Bootstrap link color */
      text-decoration: none; /* Remove underline */
    }
    .read-more-link:hover {
      text-decoration: underline; /* Add underline on hover */
    }