/* html5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ==================== General Style ====================
/* make body,html to be full screen(width = 100% of viewport - which is device width, and same with height */
body, html {
    width: 100%;
    height: 100%;
}

/* set all elements to include border and padding in their width and height */
* {
    box-sizing: border-box;
    user-select: none;
}

/* classes to center elements */
.center_y {
    position: relative;
    top: 50%;
    transform: translate(-50%)
}

.center_x {
    position: relative;
    left: 50%;
    transform: translate(-50%)
}

/* ==================== Slider Style ==================== */
/* set slider container full screen */
#slider-container {
    width: 100%;
    height: 100%;
    position: relative;
  
    overflow: hidden;
}
/* set the slides full screen */
.slide-slider {
    width: 100%;
    height: 100%;
    position: absolute;
}

/* set image to occupy the whole width and height of the screen(like a background cover image)*/
.slide-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* set each slide as absolute so they overlap one on top of each other  */
.slide-slider {
    position: absolute;
}

/* set general style for each arrow */
.slider-arrow {
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    position: absolute;
}

/* use position absolute to move the prev arrow to the left of the screen */
#arrow-prev {
    left: 20px;;
}

/* use position absolute to move the next arrow to the right of the screen*/
#arrow-next {
    right: 20px;
}

#dots-wrapper {
    display: flex;
    position: absolute;
    bottom: 30px;
}

/* general style for dots */
.dot-navigation {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    cursor: pointer;
    margin: 0 8px;
    border: 2px solid #d6d6d6;
    transition: .5s background-color;
}

.dot-navigation:hover {
    background-color: #d6d6d6;
}

/* style for active dot which indicates the index of current image */
.active-dot-slider {
    background-color: #d6d6d6;
}

/* fading animation */
.fadeon {
    animation-name: fade;
    animation-duration: .5s;
}

/* #image-slider {
    position: absolute;
} */

.message {
    width: 100%;
    position: absolute;
    color: #fff;
    font-size: 30px;
    text-align: center;
    top: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.msg {
    width: 50% !important;
    font-size: 20px;
    text-align: center;
}

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