.rotator-page {
  	max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cycle-slideshow {
	border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
    background-color: var(--neutral-color-white);
  	height: auto;
  	margin:0;
  	overflow: hidden;
  	padding: 0;
  	position: relative;
  	width: 100%
}

.cycle-slideshow img {
  	border-radius: 4px;
  	display: block;
  	height: auto;
  	margin-bottom: 0!important;
  	width: 100%
}

div.bottom-caption {
  	position: absolute;
  	bottom: 0;
  	text-wrap: wrap;
  	width: 100%;
}

div.bottom-caption > p {
  	padding: 10px;
 	margin: 0;
    font-family: 'WorkSansRg';
  	font-size: .875rem;
    background-color: var(--primary-color);
    color: var(--neutral-color-white);
    text-wrap: wrap;
}

div.caption > p {
  	padding: 10px;
 	margin: 0;
}

.pager {
  	background-color: rgba(0,0,0,.4);
  	bottom: 50%;
  	padding: 20px;
  	position: absolute;
  	transform: translateY(50%);
  	z-index: 999
}

.pager-prev{
  	left: 0
}

.pager-next {
  	right: 0
}

.pager > span {
  	color: var(--neutral-color-white);
  	font-size: 2rem
}

@media screen and (max-width:425px){
  .pager {
  		padding: 10px
  }
  
  .pager > span {
    	color: var(--neutral-color-white);
    	font-size: 1rem
  }
}

.pager > span:hover {
  	cursor: pointer
}

/*Timeline*/
h2.date {
	border-left: 10px solid var(--accent-color-blue);
	padding-left: 10px;
}

.cycle-slideshow .col-one-half {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
  
}

.cycle-slideshow.timeline .caption {
  	padding: 20px;
	width: auto;
}

.cycle-slideshow.timeline .caption > p {
  	white-space: break-spaces;
  	width: 87.5%;
}

/*Pagination*/
.cycle-pager {
  	bottom: 0; 
  	overflow: hidden; 
  	position: absolute; 
  	right: 20%; 
  	text-align: center; 
  	z-index: 500;
}

.cycle-pager span {
  	color: rgba(0,0,0,.4); 
 	cursor: pointer; 
  	display: inline-block;
  	font-size: 3rem; 
  	line-height: 1.5rem;
  	padding: 0 1px;
}

.cycle-pager span.cycle-pager-active {
  	color: var(--accent-color-blue);
}

.cycle-pager > * {
  	cursor: pointer;
}

@media screen and (max-width: 768px){
  	.cycle-pager {
      	right: 50%;
        transform: translateX(50%);
  	}
  
  	.cycle-slideshow.timeline .caption {
      	min-height: 300px;
    }
  
  	.cycle-slideshow.timeline .caption > p, .cycle-slideshow.timeline .caption > h2 {
  		width: 75%;
      	margin-left: auto;
      	margin-right: auto;
	}
}