/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}


.cycle-slideshow {
    height: 100%; /* Full viewport height */
    max-width: 1600px;
    position: relative;
    overflow: hidden;
    margin: 0 auto; /* Center the slideshow if it's less than 1600px wide */
}

.index {
	max-width:1920px;
}

.cycle-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
	z-index:700:
    /* Add any other desired styling for your slides */
}

.cycle-slide::after{
		content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05)); /* Adjust gradient direction and opacity */
			}

/* overlay */


.cycle-overlay { 
    font-family: "Times New Roman", serif;
    position: absolute; 
	bottom: 0; 
	left:0;
	margin:0 auto;
	margin-bottom:3rem;
	margin-left:8%;
	right:0;
	z-index: 600;
	width:100%;
	background:transparent;
	color: white; 
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 1); /* Horizontal offset, vertical offset, blur radius, color with opacity */
	padding: .5rem 3rem .5rem 3rem; 
	font-size:2rem;
	text-align:left;
	text-transform:none;
	}

@media only screen and (max-width:960px) {
	.cycle-overlay {
		padding: 0 .5rem .5rem 1rem;
		font-size:1.5rem;
		margin-left:1rem;
		margin-bottom:1rem;
	
	}
}



/* prev / next links */
.cycle-prev, .cycle-next { border: none;position:absolute;bottom: 0; width:100px; opacity: 0.7; filter: alpha(opacity=70); z-index: 800; height: 100%; cursor: pointer;}
.cycle-prev { left: 0; text-align: center; background: url('../images/slide-arrow-left.png') 50% 50% no-repeat; z-index=1000}
.cycle-next { right: 0; text-align: center; background: url('../images/slide-arrow-right.png') 50% 50% no-repeat; z-index=1000}
.cycle-prev:hover, .cycle-next:hover { opacity: 1; filter: alpha(opacity=100) }

@media only screen and (max-width:1200px){
.cycle-prev {width: 12%; background: url('../images/slide-arrow-left.png') 50% 50% no-repeat; z-index=1000}
.cycle-next {width: 12%; background: url('../images/slide-arrow-right.png') 50% 50% no-repeat;}
}


.disabled { opacity: .5; filter:alpha(opacity=50); }


/******************************MOBILE*******************************************/

.mobile {
	width:100%;
	height:auto;
	aspect-ratio:4/3;
}