/* CSS Document */

#slider-container { position: relative; width: 100%; max-width: 1056px; height: 362px; margin: 0 auto; overflow: hidden; background: transparent; color: #fff;border-radius: 4px;}

#slider-container .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out;}

#slider-container .slide.active {opacity: 1; z-index: 2;}

#slider-container img { width: 100%; height: 100%; object-fit: cover;}

#slider-container .text-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.45); padding: 0.8em 1.2em 2em 1.2em; font-size: 1.1em; line-height: 1.4;}

#slider-container .controls { position: absolute; bottom: 10px; right: calc(50% - 1em); display: flex; gap: 0.4em; z-index: 3;}

#slider-container .dot { width: 12px; height: 12px; border-radius: 50%; /*background: rgba(51,126,51,1);  */border: none; cursor: pointer;}

#slider-container .dot.active { background: #fff;}

#slider-container .btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #fff;  border: none; padding: 0.2em 0.5em; cursor: pointer; z-index: 3; font-size: 1.4em;}

#slider-container .btn:hover, #slider-container .btn:focus { background: rgba(0,0,0,0.7);}

#slider-container .btn.prev { left: 5px; }
#slider-container .btn.next { right: 5px; }

#slider-container .pauseplay { position: absolute; top: 24px; right: 5px; background: rgba(0,0,0,0.4); border: none; color: #fff; cursor: pointer; z-index: 3;}

#slider-container .pauseplay[aria-pressed="false"] { padding: 0.1em 0.5em;}

#slider-container .pauseplay[aria-pressed="true"] { padding: 0.1em 0.4em;}

#slider-container .loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 1em;}


#slider-container {font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:14px;}

#slider-container .text-overlay a { color: #fff; text-decoration: none; display: inline-block; width: calc(100% - 2.5em); }
#slider-container .text-overlay a:hover,
#slider-container .text-overlay a:focus {text-decoration: underline;}
/*
 @media screen and ( max-width:970px ){#slider-container {font-size:20px}
 
 }
*/