/* Custom slider css */
.slider-content {
	position: relative;
    width: 100%;
	height: 100%;
    display: block;
}

.slider a {
	position: relative;
    padding: 0px;
    text-decoration: none;
	font-family: 'arial', sans-serif;
    font-size: 20px;
    color: white;
    transition: all 0.5s;
	text-transform:uppercase;
	font-weight:normal;
	flex:1 100%;
    display: block;
}

.slider span.machine-title {
	position: absolute;
	left: 20px;
	bottom: 15px;
	transform: rotate(0deg);
	transform-origin: left top;
    z-index: 1000 !important;
}


.machines{
    height: 30vh;
    z-index: -1 !important;
    position: relative;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}


.slider a {
    flex:1 auto;
    font-size: 20px;
    border:2px solid white;
    border-top:1px solid white;
    border-bottom:1px solid white;
}
.slider a:first-child {
    border-top:2px solid white;
}
.slider a:last-child {
    border-bottom:2px solid white;
}


/* Make roman numerals */
.slider-content{
    counter-reset: item;
}
.slider-content a:hover:before{
   color:white;
    
}

.slider-content a:before{
    content: counter(item, upper-roman);
    counter-increment: item;
    position: absolute;
    right: 1em;
    top:1em;
    color: white;
    background-color: #2E3A48;
    padding: 5px 10px;
    border-radius: 10px;
    
}

@media only screen and (min-width: 800px){
    /* slider css */
    .slider a:hover, .slider a:focus {
        color:#2E3A48;
        background: transparent !important;
    }
    .slider a:hover, .slider a:focus {
        flex:2 auto;
    }
    .slider-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row wrap;
        height: 100vh;
    }

    .machines{
        height: 99.5vh;
    }
    .slider a {
        flex:1 auto;
        font-size: 20px;
        border:1px solid white;
        border-top:2px solid white;
        border-bottom:2px solid white;
    }
    .slider a:first-child {
        border-left:2px solid white;
    }
    .slider a:last-child {
        border-right:2px solid white;
    }


}