/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* 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;
}


/* ==================== Purpose ====================
/* The purpose of the style is to achive a full screen image slideshow


/* ==================== 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;     /* with this property an element with a width of 200px and a border of 2px will have a width on the interface equal with 200px and not 204px : 200px(from width) + 4px(left border + right border)*/
    user-select: none;          /* prevent items to be selected */
}

/* 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;           /* remove unwanted scroll bar */
}

/* set the slides full screen */
.slider {
    width: 100%;
    height: 100%;
    position: absolute;
}

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

/* set each slide as absolute so they overlap one on top of each other  */
.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;          /* use diplay:flex to set dots inline rather than block */
    position: absolute;     /* use absolute to place the dots at the bottom of the page */
    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 {
    background-color: #d6d6d6;
}

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

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