.img-container {
    max-width: 100%;
	width: 1000px; 
	height: 700px;
    margin: 0 auto;
    overflow: hidden;
    
    position: relative;
    
    border: 4px solid #8DC584;
	box-shadow: 8px 6px 16px #1E3A24;
	
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    border-radius: .2em;
}

.prev, .next {
    position: absolute;
    cursor: pointer;
    width: auto;
    height: auto;
    top: 50%;
    padding: 15px 20px;
    margin-top: -22px;
    user-select: none;
    font-weight: bold;
    font-size: 18px;
    color: wheat;
    border: 2px dotted wheat;
	opacity: 0.3;
    border-radius: 50%;
    transition: 0.5s ease;
}

.prev {left: 10px;}
.next {right: 10px;}

.prev:hover, .next:hover {
    background-color: rgba(30, 58, 36, 1);
    color: white;
}

.slide {
    position: absolute;
    
    width: 100%;
    height: 100%;
    
    overflow: hidden;
    
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.image {
    -o-object-fit: fill;
    object-fit: fill;
    
    width: 100%;
    height: 100%;
}

.control-container {
    margin-top: .3em;
    display: flex;
    justify-content: center;
}

.control {
    margin: .3em;
    border: none;
    outline: none;
    cursor: pointer;
}


/* Media queries */
@media only screen and (max-width: 768px) {
    main { margin-top: 2em; }
    
    h1 { margin: 0; }
    
    .img-container { height: 11em; }
    
    @media only screen and (orientation: landscape) {
        .img-container { width: 23em; }
    }
}