$purple: #9b50ba;
$blue:   #3498db;
$green:  #2ecc71;
$yellow: #f1c40f;

*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

.nav{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	padding: 40px;
	color: red;
	
	h1{
		font-weight: 300;
		font-size: 3rem;
	}
	
	.author{
		text-align: right;
	}
}

.loading{
	background-color: $green;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 600px;
	line-height: 600px;
	text-align: center;
	color: red;
	font-size: 2rem;
}

.slider{
	background-color: white;
	position: relative;
	top: 97;
	width: 100%;
	height: 400px;
	overflow: hidden;
	z-index: 2;
	// display: none;
}

.slider-inner{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	
	transition-timing-function: cubic-bezier(.22,1.61,.65,1);
	transition-duration: 1s;
	background-visibility: hidden;
	transition-delay: .75s;
	
	transform: translateZ(0);
}

.slide{
	position: absolute;
	top: 0;
	height: 100%;
	background-color: $yellow;
	background-visibility: hidden;
	
	transition-timing-function: cubic-bezier(.25,.5,.25,1.25);
	transform: translateZ(0) scale(.8, .8);
	transition-duration: .5s;
	
	text-align: center;
	line-height: 600px;
	font-size: 5rem;
	color: red;
	
	&.active{
		transform: scale(1, 1);
		transition-delay: 2s;
	}
	
	&:nth-child(2n){
		background-color: $green;
	}
	
	&:nth-child(3n){
		background-color: $blue;
	}
	
	&:nth-child(4n){
		background-color: $purple;
	}
}

.slider-nav{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	padding: 20px;
	text-align: center;
	
	div{
		float: left;
		width: 10px;
		height: 10px;
		border: 1px solid red;
		z-index: 2;
		display: inline-block;
		margin: 0 10px;
		cursor: pointer;
		border-radius: 50%;
		opacity: .5;
		
		transition-duration: .25s;
		background-color: transparent;
		
		&:hover{
			opacity: 1;
		}
		
		&.active{
			background-color: red;
			transform: scale(2);
			opacity: 1;
		}
	}
}
@media (max-width: 768px) {
	.slider {
	  display: block !important;
	  top: 120px !important;
	  height: auto !important;
	  overflow: visible !important;
	}
  
	.slider img {
	  width: 100% !important;
	  height: auto !important;
	  display: block !important;
	  object-fit: cover; /* optional: maintain image style */
	}
  }