.slider { position: relative; width: 100%; overflow: hidden; transition: all .3s; perspective: 100px; transform-style: preserve-3d; } .slider .previous, .slider .next { font-family: "FontAwesome"; font-size: 20px; position: absolute; top: 50%; color: white; padding: 20px; text-decoration: none; margin-top: -34px; transition: all .3s; opacity: 0; } .slider .next { right: -100px; content: "\f054"; left: auto; } .slider:hover .next, .previous { font-size: 20px; } .slider:hover .previous { left: 0; } .slider:hover .next { right: 0; } .slider .slides { height: 100%; } .slide { width: 100vw; text-align: center; position: absolute; opacity: 0; height: 100%; transition: all 1s; } .slide.first { background-image: url("../../../assets/images/girls_front_page.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; color: white; } .slide .ovrly{ background: rgba(0, 0, 0, 0.5); overflow: hidden; height: 100%; width: 100%; z-index: 2; padding: 0% 7%; display: table; } .ovrly div{ display: table-cell; vertical-align: middle; } /* .ovrly h2{ display: inline-block; } .ovrly p{ display: inline-block; } */ .slide div h2 strong{ font-size:4vw !important; } .slide div p{ font-size:2vw !important; } .slide.second { background-image: url("../../../assets/images/techin_deal.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; text-align: left; color: white; } .slide.third { background-image: url("../../../assets/images/photo-2021-01-25-13-55-12-1280x899.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; text-align: right; color: white; } .slide.active { z-index: 1; left: 0; opacity: 1; } .slide.inactiveLeft { left: -100vw; z-index: 11; } .slide.inactiveRight { left: 100vw; z-index: 11; } .slide a { color: inherit; border: 2px solid; padding: 10px; font-size: 1.3vw; margin-top: 20px; display: inline-block; transition: all .3s; text-transform: uppercase; letter-spacing: 1px; position: relative; } .slide a:hover { background: rgba(255, 255, 255, 0.2); border: 2px solid transparent; text-decoration: none; letter-spacing: 2px; padding-right: 30px; } .slide a:after { content: " \f105"; font-family: "FontAwesome"; position: absolute; margin-left: -10px; transition: all .3s; opacity: 0; } .slide a:hover:after { margin-left: 10px; opacity: 1; } .slider .bullets { text-align: center; position: absolute; bottom: 10px; width: 100%; } .slider .bullets .bullet { position: relative; display: inline-block; background: rgba(255, 255, 255, .4); border-radius: 50%; width: 8px; height: 8px; z-index: 14; margin: 0 5px; /* cursor: pointer; */ border: 2px solid transparent; transition: all .3s; } .slider .bullets .bullet.active { background: rgba(255, 255, 255); } .slider .bullets .bullet:hover { /* border: 2px solid rgba(255, 255, 255, .8); background: transparent; */ }