﻿.image_slider {
    height: 50vw;
    max-height: 625px;
    overflow: hidden;
    background: rgb(227,227,227);
    font-family: proxima-nova;
}

    .image_slider .slide_wrapper {
        display: flex;
        height: 100%;
        position: relative;
        top: 0;
        left: 0;
        -webkit-transition: left 0.5s; /* Safari */
        transition: left 0.5s
    }
        .image_slider .slide_wrapper .slide {
            width: 100%;
        }
            .image_slider .slide_wrapper .slide img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .image_slider .slide_wrapper .slide .label,
            .image_slider .slide_wrapper .slide .title {
                display: flex;
                flex-direction: column;
                position: relative;
                top: -100%;
                height: 100%;
                justify-content: flex-start;
                align-content: center
            }
            .image_slider .slide_wrapper .slide .label {
                justify-content: flex-start;
            }
            .image_slider .slide_wrapper .slide .title {
                justify-content: center;
            }

            .image_slider .slide_wrapper .slide .label div {
                margin: 0 auto;
                margin-top: 20px;
                padding: 5px 10px;
                background: rgb(255,255,255);
                font-weight: 700;
            }

            .image_slider .slide_wrapper .slide .title div {
                margin: 0 auto;
                padding: 10px 20px;
                color: rgb(255,255,255);
                border: solid 10px rgb(255,255,255);
                background: rgba(84,88,90,0.5);
                text-transform: uppercase;
                font-size: 4rem;
                font-weight: 700;
                max-width: 70%;
                text-align: center
            }

    .image_slider .slider_navigation {
        display: flex;
        justify-content: space-between;
        height: 100%;
        position: relative;
        top: -100%;
        left: 0;
    }

        .image_slider .slider_navigation .slider_picker {
            align-self: flex-end;
            margin: 20px
        }
        .image_slider .slider_navigation .slider_prev,
        .image_slider .slider_navigation .slider_next {
            align-self: center;
            margin: 20px
        }
    .image_slider button {
        cursor: pointer;
        border: none;
        outline: none
    }
        
        .image_slider .slider_navigation .slider_picker > button {
            background: rgb(255,255,255);
            border-radius: 15px;
            width: 30px;
            height: 30px;
            overflow: hidden;
            opacity: 0.6;
            -webkit-transition: opacity 0.5s; /* Safari */
            transition: opacity 0.5s
        }
    .image_slider .slider_navigation .slider_picker > button:not(:last-child) {
        margin-right: 15px;
    }

            .image_slider .slider_navigation .slider_picker > .current, 
            .image_slider .slider_navigation .slider_picker > button:hover {
                opacity: 1;
                -webkit-transition: none; /* Safari */
                transition: none
            }

            .image_slider .slider_navigation .slider_prev > button {
                background: url(/images/left-arrow.png);
            }
            .image_slider .slider_navigation .slider_next > button {
                background: url(/images/right-arrow.png);
            }

                .image_slider .slider_navigation .slider_prev > button,
                .image_slider .slider_navigation .slider_next > button {
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    width: 30px;
                    height: 30px;
                    margin: 0 2.5px;
                    overflow: hidden;
                    opacity: 0.6;
                    -webkit-transition: opacity 0.5s; /* Safari */
                    transition: opacity 0.5s
                }

                .image_slider .slider_navigation .slider_prev > button:hover,
                .image_slider .slider_navigation .slider_next > button:hover {
                    opacity: 1;
                    -webkit-transition: none; /* Safari */
                    transition: none
                }

@media screen and (max-width: 800px) {
    .image_slider .slider_navigation, 
    .image_slider .slide_wrapper .slide .title {
        display: none
    }
}

@media screen and (min-width: 801px) and (max-width: 900px) {
    .image_slider .slider_navigation button,
    .image_slider .slide_wrapper .slide .title div {
        transform: scale(0.55)
    }
}

@media screen and (min-width: 901px) and (max-width: 1000px) {
    .image_slider .slider_navigation button,
    .image_slider .slide_wrapper .slide .title div {
        transform: scale(0.7)
    }
}

@media screen and (min-width: 1001px) and (max-width: 1100px) {
    .image_slider .slider_navigation button,
    .image_slider .slide_wrapper .slide .title div {
        transform: scale(0.85)
    }
}
