@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700,900&display=swap');
:root { --font-family: 'Titillium Web', sans-serif; --black-bg: #313434; --white-bg: #ffffff; --red-bg: #f03a37;
}
.parallax-slider { font-family: var(--font-family);
}
.parallax-slider .swiper-slide { position: relative; overflow: hidden;
}
.parallax-slider .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-position: center; background-size: cover;
}
.parallax-slider .img-container::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(8, 8, 8, 0.5)), to(rgba(218, 15, 45, 0.5)) ); background-image: linear-gradient(rgba(8, 8, 8, 0.5), rgba(218, 15, 45, 0.5));
}
.parallax-slider .swiper-slide .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; padding-top: 15rem; padding-bottom: 15rem;
}
.parallax-slider .content { color: var(--white-bg); text-align: center;
}
.parallax-slider .content .title { font-weight: 900; text-transform: uppercase; font-size: 3.5rem;
}
.parallax-slider .content .title .title-wrapper { text-decoration: underline; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 0.1rem 2rem;
}
.parallax-slider .content .description { font-weight: 600; font-size: 1.2rem; margin-top: 1rem; margin-bottom: 1rem;
}
/*nav controls*/
.parallax-slider .swiper-nav-ctrl { background-image: none; height: 100%; top: 0; bottom: 0; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1rem; color: var(--white-bg); width: 30px; outline: 0;
}
.parallax-slider .swiper-nav-ctrl.next-ctrl { right: 0;
}
.parallax-slider .swiper-nav-ctrl.prev-ctrl { left: 0;
}
.parallax-slider .pagination-ctrl { max-width: calc(100% - 60px); left: 0; right: 0; margin: auto;
}
.parallax-slider .pagination-ctrl .swiper-pagination-bullet { background-color: var(--white);
}
.parallax-slider .img-container.one { background-image: url('https://raw.githubusercontent.com/frontendfunn/parallax-image-slider-2/master/images/captain.jpg');
}
.parallax-slider .img-container.two { background-image: url('https://raw.githubusercontent.com/frontendfunn/parallax-image-slider-2/master/images/hulk.jpg');
}
.parallax-slider .img-container.three { background-image: url('https://raw.githubusercontent.com/frontendfunn/parallax-image-slider-2/master/images/thor.jpg');
}
.with-love { position: fixed; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; background-color: #212121; padding: 8px; color: #ffffff;
}
.with-love a { color: #ffffff;
}