/*
    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 */
}

/* overlay */
.cycle-overlay { 
    font-family: "Trebuchet", serif;
    position: absolute; 
	bottom: 0; 
	left:0;
	margin:0 auto;
	margin-bottom:3rem;
	margin-left:20%;
	right:0;
	z-index: 600;
	width:100%;
	background:transparent;
	color: white; 
	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;
}