* {
    box-sizing: border-box;
}

body {
    /* font-family: Verdana, sans-serif;*/
}

.mySlides {
    display: none;
}

img {
    vertical-align: middle;
}

#slider {
    position: relative;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

    #slider .slide-left, #slider .slide-right {
        position: absolute;
        display: flex;
        top: calc(50% - 100px);
        width: 60px;
        height: 200px;
        background-color: gray;
        opacity: 0.2;
        color: white;
        justify-content: center;
        align-items: center;
    }

        #slider .slide-left img, #slider .slide-right img {
            height:80px; 
        }

        #slider .slide-left:hover, #slider .slide-right:hover {
            opacity: 0.6;
        }

    #slider .slide-left { 
        left:10px;
        border-top-left-radius:10px; 
        border-bottom-left-radius:10px; 
    }

    #slider .slide-right {
        right:10px;
        border-top-right-radius:10px;
        border-bottom-right-radius: 10px; 
    }




/* Slideshow container */
    .slideshow-container {
    position: relative;
    margin: auto;
    }


        .slideshow-container .slide, .slideshow-container .poster {
            width: 100%;
        }

        .slideshow-container .poster {
            display:none;
        }

        .slideshow-container .text {
            position: absolute; 
            color: white;
            width: 40%;
            top: 0px;
            height: 100%;
            padding:80px;
            padding-top:10%;
            animation:fadeInUp;
            animation-duration: 1.2s; 
        }
            .slideshow-container .text .title {
                font-size: 34px;
                margin-bottom: 30px;
                line-height: 1;
            }

            .slideshow-container .text .title b {
                font-size: 38px;
                font-weight:700; 
            }

            .slideshow-container .text .subtitle {
                font-size: 18px;
                font-style: normal;
                font-weight: 100;
                line-height: 1.5;
            }

            .slideshow-container .bar {
                position:absolute; 
                background-color: transparent;
                bottom: 0;
                width:100%; 
            }

#slider .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

#slider .active {
    background-color: #717171;
}


#slider .fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}