/**
 * Default Variables.
 *
 * Modify this file to provide default Bootstrap Framework variables. The
 * Bootstrap Framework will not override any variables defined here because it
 * uses the `!default` flag which will only set their default if not already
 * defined here.
 *
 * You can copy existing variables directly from the following file:
 * ./THEMENAME/bootstrap/assets/stylesheets/bootstrap/_variables.scss
 */
.paragraph {
  overflow: hidden;
}

.statement-video-swiper {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  right: 50%;
  width: 100vw;
}
.statement-video-swiper .swiper-slide {
  margin-right: 24px;
  width: 270px;
}
.statement-video-swiper .play-btn {
	background: url(/sites/default/files/img/play.svg) no-repeat;
	background-size: cover;
}
.statement-video-swiper .play-btn:hover {
	background: url(/sites/default/files/img/play_hover.svg) no-repeat;
	background-size: cover;
}

.statement-video-swiper .views-field-field-name {
	font-size: 26px;
	line-height: 42px;
	font-family: ApercuBold;
	text-align: center;
	margin: 10px auto;
}
.statement-video-swiper .views-field-field-slogan {
	font-size: 12px;
	line-height: 13px;
	color: gray;
	text-align: center;
}
.statement-video-swiper .views-field-body {
	font-size: 16px;
	line-height: 22px;
	text-align: center;
	padding: 0 20px;
}



@media (min-width: 768px) {
  .statement-video-swiper .swiper-slide {
    width: 445px;
  }
}
@media (min-width: 1200px) {
  .statement-video-swiper .swiper-slide {
    width: 560px;
  }
}
.statement-video-swiper .swiper-slide:first-child {
  margin-left: 15px;
}
@media (min-width: 768px) {
  .statement-video-swiper .swiper-slide:first-child {
    margin-left: calc((100vw - 750px + 30px + 15px) / 2);
  }
}
@media (min-width: 992px) {
  .statement-video-swiper .swiper-slide:first-child {
    margin-left: calc((100vw - 970px + 30px + 15px) / 2);
  }
}
@media (min-width: 1200px) {
  .statement-video-swiper .swiper-slide:first-child {
    margin-left: calc((100vw - 1170px + 30px + 15px) / 2);
  }
}
@media (min-width: 1270px) {
  .statement-video-swiper .swiper-slide:first-child {
    margin-left: calc((100vw - 1230px + 30px + 15px) / 2);
  }
}
.statement-video-swiper .swiper-slide video {
  border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}

.statement-video-swiper-button-prev {
  display: none;
  height: 45px;
  left: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  width: 45px;
  z-index: 1;
}
@media (min-width: 992px) {
  .statement-video-swiper-button-prev {
    left: 22px;
  }
  .statement-video-swiper-button-prev.show-prev {
    display: block;
  }
}
@media (min-width: 1200px) {
  .statement-video-swiper-button-prev {
    height: 110px;
    width: 110px;
  }
}

.statement-video-swiper-button-next {
  height: 45px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  z-index: 1;
}
@media (max-width: 992px) {
  .statement-video-swiper-button-next {
    display: none;
  }
}
@media (min-width: 992px) {
  .statement-video-swiper-button-next {
    right: 22px;
  }
}
@media (min-width: 1200px) {
  .statement-video-swiper-button-next {
    height: 110px;
    width: 110px;
  }
}