/* ------------------------------- 3. Slider Styles ------------------------------- */
#fwslider {
    position: relative;
    width:100%;
}
#fwslider .slide {
    display: none;
    position: absolute;
    top:0;
    left:0;
    z-index: 0;
    width:100%;
}
#fwslider .slide img {
    width:100%;
}
#fwslider .slidePrev {
  	position: absolute;
    top:50%;
    left:-50px;
    z-index: 10;
}
#fwslider .slidePrev span {
	background-image: url("../images/img-sprite.png");
	width: 72px;
	height: 128px;
	float: left;
	background-position:-10px -243px;
	background-repeat: no-repeat;
	cursor: pointer;
}
#fwslider .slideNext {
   	position: absolute;
    top:50%;
    right:-50px;
   	z-index: 10;
}
#fwslider .slideNext span {
 	background-image: url("../images/img-sprite.png");
	width: 72px;
	height: 128px;
	float: left;
	background-position:-105px -243px;
	background-repeat: no-repeat;
	cursor: pointer;
}
#fwslider .timers {
    height:4px;
    position: absolute;
    bottom:15px;
    right:0;
    z-index: 3;
}
#fwslider .timer {
    height:4px;
    width:40px;
    background-color: #000;
    float:left;
    margin-right: 10px;
}
#fwslider .progress {
    height:4px;
    width:0%;
    background-color:#4cb1ca;
    float:left;
}
#fwslider .slide_content {
    top:0;
    left:0;
    position: absolute;
    width:100%;
    height:100%;
}
#fwslider .slide_content_wrap { /* Slider Text Content Container Style */
    max-width: 1100px;
	margin: 10% auto;
}

#fwslider .title {  /* Slider Title Style */
	color: #ffffff;
    font-family: "nemesis grant";
	font-size: 5em;
	padding-top: 5%;
	font-style: normal;
	text-transform: uppercase;
	border: none;
	font-weight: 800;
	line-height: 1.3em;
	margin-bottom: 5%;
}
/* ------------------------------- 4. Media Query Max Width 1300, Min Width 720 ------------------------------- */
/* ------------------------------- 5. Media Query Max Width 719 ------------------------------- */

/* --- Mobile captions: show + scale --- */
@media (max-width: 800px) {
    #fwslider .slide_content_wrap{
      display:block;              /* was none */
      position:absolute;
      left:4%; right:4%; bottom:10%;
      margin:0; max-width:none;
      text-align:left;
    }
    #fwslider .title{
      font-size: clamp(24px, 7.5vw, 36px);
      line-height:1.1;
      margin:0 0 8px;
      padding-top:0;
      text-shadow: 0 2px 8px rgba(0,0,0,.6);
    }
    #fwslider .button{
      display:inline-block;
      margin:10px 10px 0 0;
    }
    #fwslider .timers{ display:none; }
  }
  
  /* --- Fix broken media rule (add braces or remove) --- */
  @media (max-width:1366px){
    #fwslider .title { margin-left:8%; font-size:4em; }
  }
  @media (max-width:768px){
    /* optional: tweak if you still want a shift/size on small tablets */
    #fwslider .title { margin-left:6%; font-size:2.4em; }
  }
  
/* Mobile: smaller slider arrows */
@media (max-width: 800px) {
    #fwslider .slidePrev,
    #fwslider .slideNext {
      top: 50%;
      transform: translateY(-50%);
    }
    #fwslider .slidePrev { left: 8px; }   /* was -50px */
    #fwslider .slideNext { right: 8px; }  /* was -50px */
  
    /* visually shrink the sprite arrows */
    #fwslider .slidePrev span,
    #fwslider .slideNext span {
      transform: scale(.45);
      transform-origin: center;
    }
  }
  
  /* Extra-small phones */
  @media (max-width: 420px) {
    #fwslider .slidePrev span,
    #fwslider .slideNext span { transform: scale(.35); }
  }
  
  /* Mobile arrows: smaller, at edges, below caption */
@media (max-width:800px){
    #fwslider .slidePrev, #fwslider .slideNext{
      top:50%; transform:translateY(-50%);
      width:36px; height:36px;              /* smaller hit area */
      z-index:25;                           /* below caption */
    }
    #fwslider .slidePrev{ left:4px; }
    #fwslider .slideNext{ right:4px; }
    #fwslider .slidePrev span, #fwslider .slideNext span{
      transform:scale(.35); transform-origin:center;
    }
    #fwslider .slide_content{ z-index:30; } /* caption above arrows */
  }