@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
    background: url(images/rose2.jpg);
    background-size: cover;
    /* background-repeat: no-repeat; */
    /* background-color: #09131f;  */
    overflow-x: hidden; 
    font-family: roboto; 
    -webkit-font-smoothing: antialiased; 
    margin: 0;
}
.flex { 
    display: -webkit-flex;
    display: flex; 
    -webkit-flex-direction: row;  
    flex-direction: row; 
    -webkit-justify-content: flex-start; 
    justify-content: flex-start;
}

.slider-wrapper div {
    position: relative;
}
.slider-wrapper {
    /* margin-top: 5vw;   */
    margin-left: 25vw;
}
.slide-image {
    height: 20vw;
}
.slide-image img {
    width: 20vw; 
    cursor: pointer;
    border-radius: 50%;

}
.slide-content {
    width: 30vw; 
    color: rgb(161, 18, 18); 
    padding: 3vw 15vw 3vw 3vw;
}
.slide-date {
    color: #0A8ACB; 
    font-size: 1.1vw; 
    font-weight: 500; 
    letter-spacing: 0.1vw; 
    padding-bottom: 1.4vw;
}
.slide-title {
    font-style: italic;
    /* font-family: 'Cursive Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-family: cursive;
    font-size: 1.5vw; 
    font-weight: 500; 
    letter-spacing: 0.1vw; 
    line-height: 1vw; 
    padding-bottom: 1.2vw;
}
.slide-text {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.2vw; 
    font-weight: 300;
    line-height: 1.2vw; 
    opacity: 0.8; 
    padding-bottom: 2vw;
}
.slide-more {
    font-weight: 400;
    letter-spacing: 0.1vw; 
    float: left; 
    font-size: 0.9vw;
}
.slide-bullet {
    width: 0.5vw; 
    height: 0.5vw; 
    background-color: #0b8bcc; 
    border-radius: 200%; 
    position: relative; 
    margin-left: 1.2vw;
}
.slide-nav {
    margin-left: 64vw; 
    /* margin-top: -5.5vw; */
}

div.overlay-blue {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    transition: 0.5s ease all;
}
div.overlay-blue:hover {
    background-color: rgba(13, 27, 43, 0.5)
}

.arrows{
    width: 3.5vw; 
    /* margin-top: -5.8vw;  */
    margin-left: 72vw; 
    position: relative;
}
.arrow {
    display: inline-block; 
    position: absolute; 
    width: 1.2vw; 
    height: 1.2vw; 
    background: transparent; 
    text-indent: -9999px; 
    border-top: 0.15vw solid rgb(107, 18, 18); 
    border-left: 0.15vw solid rgb(153, 17, 17); 
    transition: all .1s ease-in-out; 
    text-decoration: none; 
    color: transparent;
}
.arrow:hover {
    border-color: #0A8ACB; 
    border-width: 0.25vw;
}
.arrow:before {
    display: block; 
    height: 200%; width: 200%; 
    margin-left: -50%; 
    /* margin-top: -50%;  */
    content: ""; 
    transform: rotate(45deg);
}
.arrow.prev {
    transform: rotate(-45deg); 
    left: 0;
}
.arrow.next {
    transform: rotate(135deg);
    right: 0;
}