我想划分滑块空间并制作2 div标签。我尝试这样做,但是由于某些原因,图像被另一个div标签覆盖。
第二个:-我还想对此进行更改,在移动宽度中,图像被剪切,但仅保留内容,我想保留图像(最小化,最小化,完整或中心部分),并在那时其他div标签应在此图片下方移动。 现在,我有:
其代码如下:
<body>
<!-- start header -->
<header>
<!-- start navigation -->
<nav class="navbar navbar-default bootsnav navbar-fixed-top header-dark bg-transparent nav-box-width padding-four-lr">
<div class="container-fluid nav-header-container">
<div class="row">
<!-- start logo -->
<div class="col-lg-2 col-md-2 col-xs-5">
<a href="./index.html" title="Pooo" class="logo"><img src="./images/logo.png" data-at2x="images/logo@2x.png" class="logo-dark default" alt="Poo" /><img src="./images/logo_w.png" data-at2x="images/logo-full-white@2x.png" alt="Poo" class="logo-light" /></a>
</div>
<!-- end logo -->
<div class="col-lg-8 col-md-8 col-xs-2 accordion-menu">
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar-collapse-toggle-1">
<span class="sr-only">toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse pull-right" id="navbar-collapse-toggle-1">
<ul class="nav navbar-nav navbar-left panel-group no-margin alt-font font-weight-700">
<li><a href="#home" title="Home" class="inner-link">Home</a></li>
<li><a href="#creative" title="About" class="inner-link">About</a></li>
<li><a href="#our" title="Services" class="inner-link">Treatment</a></li>
<li><a href="#Aliments" title="Work" class="inner-link">Aliments</a></li>
<li><a href="#Therapy" title="Team" class="inner-link">Therapy</a></li>
<li><a href="#testi" title="Blog" class="inner-link">Testimonials</a></li>
<li><a href="#faq" title="Clients" class="inner-link">FAQ</a></li>
<li><a href="#us" title="Contact" class="inner-link">Contact US</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-xs-5 sm-width-auto text-right sm-no-padding-left">
<div class="header-searchbar no-border-left">
<a href="#search-header" class="header-search-form text-white"><i class="fa fa-search search-button"></i></a>
<!-- search input-->
<form id="search-header" method="post" action="search-result.html" name="search-header" class="mfp-hide search-form-result" />
<div class="search-form position-relative">
<button type="submit" class="fa fa-search close-search search-button"></button>
<input type="text" name="search" class="search-input" placeholder="Enter your keywords..." autocomplete="off" />
</div>
</form>
</div>
<div class="header-social-icon xs-display-none">
<a href="https://www.facebook.com/" title="Facebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="https://twitter.com/" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="https://dribbble.com/" title="Dribbble" target="_blank"><i class="fa fa-dribbble"></i></a>
</div>
</div>
</div>
</div>
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- start slider section -->
<section class="no-padding main-slider height-100 mobile-height wow fadeIn ">
<div class="swiper-full-screen swiper-container height-100 width-100 black-move">
<div class="swiper-wrapper">
<!-- start slider item -->
<div class="swiper-slide cover-background" style="background-image:url('./images/homepage-8-slider-img-3.jpg');">
<div class="container position-relative full-screen">
<div class="col-md-12 slider-typography text-left xs-text-center">
<div class="slider-text-middle-main">
<div class="slider-text-middle">
<p class="text-extra-dark-gray text-large margin-four-bottom width-40 md-width-50 sm-width-60 xs-width-100 xs-margin-15px-bottom"></p>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
<!-- start slider item -->
<div class="swiper-slide cover-background" style="background-image:url('./images/homepage-8-slider-img-2.jpg');">
<div class="container position-relative full-screen">
<div class="col-md-12 slider-typography text-left xs-text-center">
<div class="slider-text-middle-main">
<div class="slider-text-middle">
<p class="text-extra-dark-gray text-large margin-four-bottom width-40 md-width-50 sm-width-60 xs-width-100 xs-margin-15px-bottom"></p>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
<!-- start slider item -->
<div class="swiper-slide cover-background" style="background-image:url('./images/homepage-8-slider-img-1.jpg');">
<div class="container position-relative full-screen">
<div class="col-md-12 slider-typography text-left xs-text-center">
<div class="slider-text-middle-main">
<div class="slider-text-middle">
<p class="text-extra-dark-gray text-large margin-four-bottom width-40 md-width-50 sm-width-60 xs-width-100 xs-margin-15px-bottom"></p>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
<!-- start slider item -->
<div class="swiper-slide cover-background" style="background-image:url('./images/homepage-8-slider-img-1.jpg');">
<div class="container position-relative full-screen">
<div class="col-md-12 slider-typography text-left xs-text-center">
<div class="slider-text-middle-main">
<div class="slider-text-middle">
<p class="text-extra-dark-gray text-large margin-four-bottom width-40 md-width-50 sm-width-60 xs-width-100 xs-margin-15px-bottom"></p>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
</div>
<!-- start slider pagination -->
<div class="swiper-pagination"></div>
<div class="swiper-button-next swiper-button-black-highlight display-none"></div>
<div class="swiper-button-prev swiper-button-black-highlight display-none"></div>
<!-- end slider pagination -->
</div>
</section>
<!-- end slider section -->
是的,下面的图像看起来很完美,但是实际上我必须在这一侧编辑图像,使其更小以完全适合它们,它不会自动调整大小。我想使它看起来像这样:
这是它的主要CSS:
/* ===================================
Swiper carousel
====================================== */
.swiper-container {
overflow: hidden;
position: relative
}
.swiper-pagination-bullet-active {
background: #232323
}
.swiper-pagination {
width: 100%
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 35px;
width: 100%
}
.swiper-pagination-bullet {
height: 9px;
width: 9px
}
.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px
}
.swiper-pagination-bottom .swiper-wrapper {
margin: 0 0 35px 0
}
.swiper-pagination-bottom.swiper-container-horizontal .swiper-wrapper {
margin: 0 0 95px 0
}
.swiper-slider-second {
text-align: center;
}
/* swiper bottom scrollbar full */
.swiper-bottom-scrollbar-full.swiper-container {
height: 100%;
margin: 0 auto;
overflow: hidden;
position: absolute;
top: 0;
transition: all 0.3s ease-in-out 0.7s;
-webkit-transition: all 0.3s ease-in-out 0.7s;
-moz-transition: all 0.3s ease-in-out 0.7s;
-ms-transition: all 0.3s ease-in-out 0.7s;
-o-transition: all 0.3s ease-in-out 0.7s;
width: 100%;
}
.swiper-bottom-scrollbar-full .swiper-scrollbar {
left: 0;
opacity: 1;
position: absolute;
width: 100%;
bottom: 0;
border-radius: 0;
height: 2px
}
.swiper-bottom-scrollbar-full .swiper-scrollbar-drag {
border-radius: 0;
background: #ff214f
}
.swiper-bottom-scrollbar-full .swiper-scrollbar {
background: rgba(255, 255, 255, .2)
}
.swiper-bottom-scrollbar-full .swiper-slide img {
max-height: 450px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
opacity: .8;
-webkit-filter: grayscale(1);
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
-o-filter: grayscale(1);
}
.swiper-bottom-scrollbar-full .swiper-slide .hover-title-box {
visibility: hidden;
}
.swiper-bottom-scrollbar-full .swiper-slide:hover .hover-title-box {
right: -160px;
opacity: 1;
visibility: visible;
}
/* swiper vertical pagination */
.swiper-vertical-pagination {
width: 100%;
height: 100%;
position: absolute;
}
.swiper-vertical-pagination .swiper-slide {
text-align: center;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-vertical-pagination>.swiper-pagination-bullets {
right: 60px;
}
.swiper-vertical-pagination .swiper-pagination {
width: auto
}
.swiper-vertical-pagination .swiper-slide .swiper-bottom-content {
opacity: 0;
transform: translate3d(0px, 150px, 0px);
-webkit-transform: translate3d(0px, 150px, 0px);
-moz-transform: translate3d(0px, 150px, 0px);
-ms-transform: translate3d(0px, 150px, 0px);
-o-transform: translate3d(0px, 150px, 0px);
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
.swiper-vertical-pagination .swiper-slide-active .swiper-bottom-content {
opacity: 1;
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
transition: all 0.3s ease-in-out 0.3s;
-webkit-transition: all 0.3s ease-in-out 0.3s;
-moz-transition: all 0.3s ease-in-out 0.3s;
-ms-transition: all 0.3s ease-in-out 0.3s;
-o-transition: all 0.3s ease-in-out 0.3s;
}
.swiper-vertical-pagination .box-arrow {
position: absolute;
right: -45px;
width: 90px;
height: 90px;
}
/* swiper auto width */
.swiper-auto-width .swiper-slide {
width: 60%;
}
.swiper-auto-width.swiper-container {
height: calc(100% - 200px);
top: 100px;
margin: 0 auto;
overflow: visible;
position: absolute;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transition: all 0.3s ease-in-out 0.7s;
-webkit-transition: all 0.3s ease-in-out 0.7s;
-moz-transition: all 0.3s ease-in-out 0.7s;
-ms-transition: all 0.3s ease-in-out 0.7s;
-o-transition: all 0.3s ease-in-out 0.7s;
width: 100%;
}
.swiper-auto-width .swiper-scrollbar {
left: 20%;
opacity: 1;
position: absolute;
width: 60%;
bottom: -50px;
border-radius: 0;
height: 1px
}
.swiper-auto-width .swiper-scrollbar-drag {
border-radius: 0;
background: transparent;
}
.swiper-auto-width .swiper-scrollbar-drag:before {
cursor: move;
position: absolute;
content: "";
background: #ff214f;
width: 13px;
height: 13px;
border-radius: 100%;
top: -6px;
left: calc(50% - 13px);
}
.swiper-auto-width .swiper-slide {
filter: contrast(130%);
-webkit-filter: contrast(130%);
-moz-filter: contrast(130%);
-ms-filter: contrast(130%);
-o-filter: contrast(130%);
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
-o-filter: grayscale(1);
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
.swiper-auto-width .swiper-slide.swiper-slide-active {
filter: contrast(0);
-webkit-filter: contrast(0);
-moz-filter: contrast(0);
-ms-filter: contrast(0);
-o-filter: contrast(0);
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.swiper-auto-width .swiper-slide .absolute-middle-center h2 {
opacity: 0;
margin-bottom: 10px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transform: translateY(-60px);
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
-ms-transform: translateY(-60px);
-o-transform: translateY(-60px);
}
.swiper-auto-width .swiper-slide.swiper-slide-active .absolute-middle-center h2 {
opacity: 1;
transition: all 0.3s ease-in-out 0.7s;
-webkit-transition: all 0.3s ease-in-out 0.7s;
-moz-transition: all 0.3s ease-in-out 0.7s;
-ms-transition: all 0.3s ease-in-out 0.7s;
-o-transition: all 0.3s ease-in-out 0.7s;
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
}
.swiper-auto-width .swiper-slide span {
opacity: 0;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.swiper-auto-width .swiper-slide.swiper-slide-active span {
opacity: 1;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
/* arrow pagination black and white */
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("");
right: 10px;
left: auto;
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("");
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("");
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("");
}
.swiper-button-prev.swiper-button-white-highlight,
.swiper-container-rtl .swiper-button-next.swiper-button-white-highlight {
background-image: url("");
}
.swiper-button-next.swiper-button-white-highlight,
.swiper-container-rtl .swiper-button-prev.swiper-button-white-highlight {
background-image: url("");
}
.swiper-button-next.swiper-button-white-highlight,
.swiper-button-prev.swiper-button-white-highlight {
background-color: #000;
background-size: 28% auto;
border-radius: 3px;
height: 30px;
width: 30px;
margin: -15px 10px 0;
top: 50%;
}
.swiper-button-next.swiper-button-black-highlight,
.swiper-container-rtl .swiper-button-prev.swiper-button-black-highlight {
background-image: url("");
}
.swiper-button-prev.swiper-button-black-highlight,
.swiper-container-rtl .swiper-button-next.swiper-button-black-highlight {
background-image: url("");
}
.swiper-button-next.swiper-button-black-highlight,
.swiper-button-prev.swiper-button-black-highlight {
background-color: #fff;
background-size: 28% auto;
border-radius: 3px;
height: 30px;
width: 30px;
margin: -15px 10px 0;
top: 50%;
}
.swiper-button-next,
.swiper-button-prev {
background-size: inherit;
height: 22px;
width: 50px;
top: 51%
}
.swiper-fullscreen-next {
background-image: url("");
}
.swiper-fullscreen-prev {
background-image: url("");
}
.swiper-fullscreen-next,
.swiper-fullscreen-prev {
background-color: #fff;
background-size: 28% auto;
border-radius: 3px;
height: 30px;
width: 30px;
margin: 10px;
top: 47.5%
}
/* blog swiper */
.swiper-blog .swiper-slide .slide-content {
opacity: 0;
transform: translateY(100px);
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
}
.swiper-blog .swiper-slide.swiper-slide-active .slide-content {
opacity: 1;
transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
/* long arrow */
.swiper-button-prev.slider-long-arrow-white,
.swiper-container-rtl .swiper-button-next.slider-long-arrow-white {
background-image: url('../images/arrow-prev-light-dark.png');
left: 0
}
.swiper-button-next.slider-long-arrow-white,
.swiper-container-rtl .swiper-button-prev.slider-long-arrow-white {
background-image: url('../images/arrow-next-light-dark.png');
right: 0
}
/* next prev button style 2 */
.swiper-next-style2,
.swiper-prev-style2 {
position: absolute;
bottom: -60px;
cursor: pointer;
text-transform: uppercase
}
.swiper-next-style2 {
right: 15%;
}
.swiper-prev-style2 {
left: 15%;
}
/* portfolio next prev button */
.swiper-portfolio-prev,
.swiper-portfolio-next {
position: absolute;
top: 50%;
z-index: 1;
background: #fff;
color: #232323;
padding: 15px;
font-size: 18px;
cursor: pointer;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.swiper-portfolio-prev.swiper-button-disabled,
.swiper-portfolio-next.swiper-button-disabled {
opacity: 0;
visibility: hidden;
}
.swiper-portfolio-prev {
left: 15px;
}
.swiper-portfolio-next {
right: 15px;
}
/* next prev button style 3 */
.swiper-button-prev.swiper-prev-style3,
.swiper-button-next.swiper-next-style3 {
background-image: none;
position: absolute;
cursor: pointer;
left: 41.1%;
top: inherit;
text-align: center;
font-size: 16px;
line-height: 40px;
width: 40px;
height: 40px;
background-color: #ff214f;
color: #fff;
z-index: 9;
}
.swiper-button-prev.swiper-prev-style3 {
bottom: 141px
}
.swiper-button-next.swiper-next-style3 {
bottom: 100px;
}
/* next prev button style 4 */
.navigation-area {
position: absolute;
bottom: 0;
display: inline-block;
width: 40px;
height: 82px;
}
.swiper-button-prev.swiper-prev-style4,
.swiper-button-next.swiper-next-style4 {
background-image: none;
background: #ff214f;
color: #fff;
text-align: center;
line-height: 40px;
height: 40px;
width: 40px;
display: block;
float: left;
position: relative;
left: auto;
right: auto;
top: 0;
margin: 0 auto;
}
.swiper-button-next.swiper-next-style4 {
margin-bottom: 1px
}
/* next prev button style 5 */
.swiper-button-prev.swiper-prev-style5,
.swiper-button-next.swiper-next-style5 {
position: absolute;
top: 22px;
bottom: 0;
height: 100%;
width: 15%;
background-image: none;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
.swiper-button-prev.swiper-prev-style5 {
opacity: 0;
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent);
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent);
background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
}
.swiper-button-next.swiper-next-style5 {
opacity: 0;
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent);
background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent);
background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
}
.swiper-button-prev.swiper-prev-style5:hover,
.swiper-button-next.swiper-next-style5:hover {
opacity: 1;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
.swiper-button-prev.swiper-prev-style5 {
left: 0;
cursor: url('../images/arrow-prev-light-dark.png'), pointer;
}
.swiper-button-next.swiper-next-style5 {
right: 0;
cursor: url('../images/arrow-next-light-dark.png'), pointer;
}
/* dot pagination white */
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff
}
.swiper-pagination-square-bottom.swiper-pagination-bullets {
bottom: -50px
}
/* square pagination */
.swiper-pagination-square .swiper-pagination-bullet {
height: 3px;
width: 30px;
border-radius: 0
}
/* square pagination */
.white-move .swiper-slide {
cursor: url("../images/icon-move-light.png"), move;
}
.black-move .swiper-slide {
cursor: url("../images/icon-move-black.png"), move;
}
/* number pagination */
.swiper-number {
left: auto !important;
right: 0!important;
width: 35px !important;
text-align: right!important;
top: 38% !important;
bottom: inherit !important;
}
.swiper-number .swiper-pagination-bullet {
background: transparent;
color: #939393;
display: block;
font-size: 20px;
height: 45px;
line-height: 20px;
opacity: .7;
padding: 14px 0 0;
text-align: center;
width: 23px;
border-radius: 0;
margin: 0 0 5px 0;
}
.swiper-number .swiper-pagination-bullet.swiper-pagination-bullet-active {
border-bottom: 1px solid rgba(0, 0, 0, .5);
opacity: 1;
}
.swiper-number .swiper-pagination-bullet-active {
color: #000;
background: transparent;
}
/* revolution slider bullet */
.tp-bullet {
border-radius: 100%;
background: transparent;
border: 1px solid #fff;
}
.tp-bullet.selected,
.tp-bullet:hover {
background: #fff
}
.hermes .tp-bullet {
box-shadow: 0 0 0 0 #fff;
height: 12px;
width: 12px;
border: 2px solid #fff;
}
.hermes .tp-bullet::after {
box-shadow: 0 0 0 0 #fff inset;
}
/* slider height */
.slider-half-small-screen {
min-height: 630px
}
.slider-half-screen {
min-height: 765px
}
.slider-medium-screen {
min-height: 898px
}
/* scroll down */
.scroll-down {
bottom: 0px;
position: absolute;
text-align: center;
width: 100%;
z-index: 11
}
.scroll-down a {
background: #232323;
display: inline-block;
height: 57px;
width: 57px;
text-align: center
}
.scroll-down a i.scroll-arrow-down {
vertical-align: top;
background-image: url('../images/scroll-down-icon.png');
width: 17px;
height: 30px;
display: inline-block
}
.scroll-down a:hover {
background: #fff;
}
.scroll-to-down {
cursor: url("../images/arrow-down.png"), pointer;
}
.scroll-to-down-white {
cursor: url("../images/arrow-down-white.png"), pointer;
}
.background-slider-text {
position: absolute;
width: 100%
}
/* cursor */
.cursor-default {
cursor: default
}
/* ===================================
Slider and parallax typography
====================================== */
.slider-text-middle-main {
display: table;
height: 100%;
width: 100%
}
.slider-text-middle {
display: table-cell;
vertical-align: middle;
}
.slider-typography {
width: 100%;
height: 100%;
position: absolute;
right: 0;
left: 0;
}
.slider-text-bottom {
display: table-cell;
vertical-align: bottom;
}
.slider-text-top {
display: table-cell;
vertical-align: top;
}
.down-section {
position: absolute;
width: 100%;
bottom: 50px;
left: 0;
right: 0
}
.blog-slider .swiper-slide .slider-typography {
padding: 60px;
}