// Custom Fonts @font-face { font-family: "MontserratVar"; src: url( '../fonts/Montserrat-VariableFont_wght.ttf' ); } @font-face { font-family: "OpenSansVar"; src: url( '../fonts/OpenSans-VariableFont_wdth_wght.ttf' ); } .verua-slider-wrapper { position: relative; height: 100vh; width: 100%; color: #fff; } .verua-slider-wrapper .verua-slider { position: relative; height: 100vh; width: 100%; } .verua-slider-wrapper .verua-slider .slides { position: absolute; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; opacity: 0; transition: 0.3s ease-in-out; } .verua-slider-wrapper .verua-slider .slides.current { z-index: 1; opacity: 1; } .verua-slider-wrapper .verua-slider .slides:nth-child(1) { background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2339009/pexels-photo-2339009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; } .verua-slider-wrapper .verua-slider .slides:nth-child(2) { background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2303337/pexels-photo-2303337.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; } .verua-slider-wrapper .verua-slider .slides:nth-child(3) { background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2346091/pexels-photo-2346091.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; } .verua-slider-wrapper .verua-slider .slides:nth-child(4) { background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/1168764/pexels-photo-1168764.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; } .verua-slider-wrapper .verua-slider .slides:nth-child(5) { background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; } .verua-slider-wrapper .verua-slider .slides h1 { font-family: "MontserratVar" !important; font-weight:700; color: white; text-shadow: 0px 0.5px 12px rgba(0, 0, 0, 0.9); transition: 0.3s linear; } .verua-slider-wrapper .verua-slider .slides.current h1 { animation: animateHeading 0.3s linear forwards 1; animation-delay: 0.2s; opacity: 0; } @keyframes animateHeading { to { opacity: 1; } } .verua-slider-wrapper .verua-slider .slides p { text-shadow: 0px 0.5px 5px rgba(0, 0, 0, 0.5); transition: 0.3s linear; opacity: 0; } .verua-slider-wrapper .verua-slider .slides.current p { animation: animateparagraph 0.3s linear forwards 1; animation-delay: 0.2s; } @keyframes animateparagraph { to { opacity: 1; } } .verua-slider-wrapper .prev { position: fixed; color: #fff; top: 50%; left: 5%; transform: translateY(-50%); z-index: 99; font-size: 1.5em; font-weight: 600; border: 2px solid #fff; padding: 10px 17px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.2s ease-in-out; cursor: pointer; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.9); } .verua-slider-wrapper .next { position: fixed; color: #fff; top: 50%; right: 5%; transform: translateY(-50%); z-index: 99; font-size: 1.5em; font-weight: 600; border: 2px solid #fff; padding: 10px 17px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.2s ease-in-out; cursor: pointer; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } .verua-slider-wrapper .prev:hover, .verua-slider-wrapper .next:hover { background: #16a085; border-color: #16a085; } .verua-slider-wrapper a { position: fixed; color: #fff; bottom: 15%; left: 50%; transform: translateX(-50%); z-index: 99; font-size: 1em; font-weight: 500; border: 1px solid #16a; padding: 10px 17px; line-height: 1.2em; display: flex; align-items: center; justify-content: center; border-radius: 2px; transition: 0.2s ease-in-out; cursor: pointer; text-decoration: none; background: #16a; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } .verua-slider-wrapper a:hover { background: #017f }