/* Slides container */
.slideshow, .slide { position: relative; }

/* Slideshow's buttons */
.prev-slide-button, .next-slide-button
{
    position: absolute;
    width: auto;
    background-color: white;
    color: black;
    padding: 3px;
    top: 30%;
    font-weight: bold;
    transition: 0.3s ease;
	border-style: none;
	font-size: 70%;
}

.prev-slide-button
{
	left: 0;
	border-radius: 0 4px 4px 0;
}

.next-slide-button
{
	right: 0;
	border-radius: 4px 0 0 4px;
}

.prev-slide-button:hover, .next-slide-button:hover
{
	background-color: #c2c0c0;
	cursor: pointer;
}

/* Slide selectors */
.slide-selectors
{
	text-align: center;
}

.dot, .selected-dot
{
  	height: 14px;
  	width: 14px;
  	margin: 0px 2px;
	border-width: 2px;
	border-color: #717171;
	border-style: solid;
	border-radius: 50%;
    background-color: white;
	display: inline-block;
	transition: .4s ease;
}

.selected-dot, .dot:hover
{
	cursor: pointer;
	background-color: #717171;
}

/* Medium screens */
@media only screen and (min-width: 420px)
{
    .prev-slide-button, .next-slide-button
	{
		padding: 10px;
		top: 40%;
		font-size: 100%;
	}

	.dot, .selected-dot
	{
	  	height: 18px;
	  	width: 18px;
	}
}

/* Big screens */
@media only screen and (min-width: 768px)
{
    .prev-slide-button, .next-slide-button {  top: 43%;  }
	.next-slide-button { right: 7px; }
}