* {
    box-sizing: border-box
}

.image-slideshow {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

img {
  width: 100%
}

.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade-out {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
}

@keyframes slide-in {
	from {

	transform: translateX(-50%);
	}
	to {

	transform: translateX(0%);
	}
}

@keyframes slide-out {
	from {

	transform: translateX(50%);
	}
	to {

	transform: translateX(0%);
	}
}

@keyframes spin {
    from {
      transform: rotate(0turn);
    }
    to {
      transform: rotate(1turn);
    }
  }
  
  .spinner {
    animation: spin 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

.box_slide-fade-outs {
	animation: fade-out 2000ms;
}

.box_slide-fade-out:hover {
	animation: fade-out 1000ms;
}

.box_slide-in {
	animation: fade-out 1000ms, slide-in 1000ms;
	opacity: 1;
}

.box_slide-out {
	animation: fade-out 1000ms, slide-out 1000ms;
	opacity: 1;
}

.mfp-move-horizontal {
  
	/* start state */
	.mfp-with-anim {
	  opacity: 0;
	  transition: all 0.3s;
	  
	  transform: translateX(-50px);
	}
	
	&.mfp-bg {
	  opacity: 0;
		transition: all 0.3s;
	}
	
	/* animate in */
	&.mfp-ready {
	  .mfp-with-anim {
		opacity: 1;
		transform: translateX(0);
	  }
	  &.mfp-bg {
		opacity: 0.8;
	  }
	}
	
	/* animate out */
	&.mfp-removing {
	  
	  .mfp-with-anim {
		transform: translateX(50px);
		opacity: 0;
	  }
	  &.mfp-bg {
		opacity: 0;
	  }
	  
	}
	
  }
  
  .mfp-zoom-in {
  
	/* start state */
	.mfp-with-anim {
	  opacity: 0;
	  transition: all 0.2s ease-in-out; 
	  transform: scale(0.8); 
	}
	
	&.mfp-bg {
	  opacity: 0;
		transition: all 0.3s ease-out;
	}
	
	/* animate in */
	&.mfp-ready {
	  .mfp-with-anim {
		opacity: 1;
		transform: scale(1); 
	  }
	  &.mfp-bg {
		opacity: 0.8;
	  }
	}
	
	/* animate out */
	&.mfp-removing {
	  
	  .mfp-with-anim {
		transform: scale(0.8); 
		opacity: 0;
	  }
	  &.mfp-bg {
		opacity: 0;
	  }
	  
	}
	
  }

.Ranking:hover {
	background-color: #251f57;
}