
/******************** 
TWEENMAX SLIDER STYLES 
************************************/
main.main-slideshow-wrap {width: 90%; margin: 0 auto; max-width: 1400px; position: relative; z-index: 1;}

.main-slideshow-wrap .slideshow {overflow: hidden; position: relative; width: 100%; height: 55vh; /*max-height: 666px;*/ min-height: 555px; z-index: 1;}
.main-slideshow-wrap .slideshow .main-slideshow-wrap .slideshow-inner {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.main-slideshow-wrap .slideshow .slides {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;}
.main-slideshow-wrap .slideshow .slide {display: none; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%;  height: 100%; z-index: 1; opacity: 0; transition: opacity 0.3s ease;}

.main-slideshow-wrap .slideshow .slide.is-active {display: block;}
.main-slideshow-wrap .slideshow .slide.is-loaded {opacity: 1;}

.main-slideshow-wrap .slideshow .slide .img-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  z-index: 1;
  background-size: cover;
  image-rendering: optimizeQuality;
}
.main-slideshow-wrap .slideshow .slide .img-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, transparent, #222);
}
.main-slideshow-wrap .slideshow .slide img {width: 100%; object-fit: cover; height: 100%;}

.main-slideshow-wrap .slideshow .slide-content {
  position: absolute;
  top: 0;
  right: 0!important;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 5;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.main-slideshow-wrap .slideshow .slide .caption {padding: 5%; font-family: 'Barlow', sans-serif;}
.main-slideshow-wrap .slideshow .slide .caption hr {border: 4px solid #d4af37; width: 100%; max-width: 10%; margin: 15px 0; display: inline-block;}
.main-slideshow-wrap .slideshow .slide .caption h1 {font-size: 48px; line-height: 1.2; text-transform: uppercase; font-weight: 600; letter-spacing: 2px;}
.main-slideshow-wrap .slideshow .slide .caption a button {color: #fff; background: none; padding: .75em 5%; cursor: pointer; font-weight: 600; transition: 0.2s ease-in; margin-top: 1em; width: 100%; max-width: 300px; border-radius: 30px; line-height: 1.2; border: .5px solid #fff; letter-spacing: 1px;}
.main-slideshow-wrap .slideshow .slide .caption a button:hover {color: #fff; border: .5px solid #016a41; background: #016a41; letter-spacing: 2px;}


/* BUTTONS */ 
.btn button .btn-inner {position: relative; z-index: 2;}
.btn button {
  display: inline-block;
  padding: 13px 20px;
  color: #fff;
  text-decoration: none;
  position: relative;
  background: transparent;
  border: .5px solid #e1e1e1;
  font: 12px/1.2 'Barlow', sans-serif;
  letter-spacing: 2px;
  text-align: center;
  text-indent: 2px;
  text-transform: uppercase;
  transition: color 0.1s linear 0.05s;
  cursor: pointer;
}
.btn button::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
  z-index: 1;
  opacity: 0;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn button::after {transition: border 0.1s linear 0.05s;}

.btn button:hover {color: #373737; transition: color 0.1s linear 0s;}
.btn button:hover::before {top: 0; height: 100%; opacity: 1; transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;}
.btn button:hover::after {border-color: #373737; transition: border 0.1s linear 0s;} 

.main-slideshow-wrap .slideshow .slide .btn button {margin: 15px 0 0; border-color: #fff; color: #fff;}
.main-slideshow-wrap .slideshow .slide .btn button::before {background: #000; font-weight: bold;}


/* PAGINATION + ARROWS */
.main-slideshow-wrap .slideshow .pagination {
  position: absolute;
  bottom: 50px;
  text-align: center;
  width: 100%;
  height: 12px;
  cursor: default;
  z-index: 10;
}
.main-slideshow-wrap .slideshow .pagination .item {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 15px;
  cursor: pointer;
  text-indent: -999em;
  z-index: 10;
}
.main-slideshow-wrap .slideshow .pagination .item + .page {margin-left: -5px;}
.main-slideshow-wrap .slideshow .pagination .item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 20px;
  height: 15px;
  background: rgba(235, 235, 235, 0.85);
  transition: background 0.2s ease;
}
.main-slideshow-wrap .slideshow .pagination .item::after {width: 0; background: #fff; z-index: 2; transition: width 0.2s ease;}
.main-slideshow-wrap .slideshow .pagination .item:hover::before, .main-slideshow-wrap .slideshow .pagination .item.is-active::before {background-color: #004225;}

.main-slideshow-wrap .slideshow .arrows .arrow {margin: -33px 0 0; padding: 20px; position: absolute; top: 50%; cursor: pointer; z-index: 3;}
.main-slideshow-wrap .slideshow .arrows .prev {left: 30px;}
.main-slideshow-wrap .slideshow .arrows .prev:hover .svg {left: -10px;}
.main-slideshow-wrap .slideshow .arrows .next {right: 30px;}
.main-slideshow-wrap .slideshow .arrows .next:hover .svg {left: 10px;}
.main-slideshow-wrap .slideshow .arrows .svg {position: relative; left: 0; width: 14px; height: 26px; fill: #fff; transition: left 0.2s ease;}


/***************** 
MEDIA QUERIES 
******************/
@media screen and (max-width: 1200px) {
	main.main-slideshow-wrap {width: 100%;}
	.main-slideshow-wrap .slideshow {height: 50vh;}
}
@media screen and (max-width: 1000px) {	
	.main-slideshow-wrap .slideshow .slide .caption h1 {font-size: 40px;}
}
@media screen and (max-width: 785px) {
	.main-slideshow-wrap .slideshow .slide-content {justify-content: center;}
	.main-slideshow-wrap .slideshow .slide .caption {padding: 10%;}
	.main-slideshow-wrap .slideshow .slide .caption a button {max-width: none; margin-top: .75em;}
	.main-slideshow-wrap .slideshow .pagination {display: none;}
}