/*-----------------------------------------------------------
  SLIDER STYLES
-------------------------------------------------------------

/*-----------------------------------------------------------
  TABLE OF CONTENTS:
-------------------------------------------------------------
 Slider
   Slider -> dark background
   Slider -> numbers
   Slider -> images
   Slider -> post headlines
   Slider -> arrow buttons
   Slider -> dots
   Slider -> hover effects
   Slider ----------> viewport 1023px
   Slider ----------> viewport 800px
   Slider ----------> viewport 600px
/*------------------------------------------------------------
# Slider
------------------------------------------------------------*/
.content-block-part__slider {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: 0 0 10px;
  background-color: var(--grey3);
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab
}
.content-block-part__slider:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing
}
.automatron-slider__slideshow {
  width: 100%;
  position: relative;
  margin: auto;
  height: 400px;
  overflow: hidden;
  border-radius: 3px
}
.slide--flex {
  display: block
}
.slide--none {
  display: none
}

/*  Slider -> dark background
------------------------------------------------------------*/
.slider-item__dark-background {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: .7;
  z-index: 1;
  background-color: var(--black2)
}

/*  Slider -> numbers
------------------------------------------------------------*/
.slider-item__slide-numbers {
  position: absolute;
  z-index: 1;
  padding: 0 var(--fontSize);
  top: 0;
  left: 0;
  opacity: .5;
  font-size: 12px;
  line-height: 25px;
  background-color: var(--black2);
  color: var(--white)
}

/*  Slider -> images
------------------------------------------------------------*/
.slider-item__post-img-section {
  display: block;
  height: 400px;
  width: 100%
}
.content-block-part__slider .news-block__post-image {
  width: 100%;
  position: relative;
  height: 400px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}
.slider-item__post-img-section img {
	position: absolute;
	margin: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: unset;
}

/* if post has no image */
.slider-item__post-img-section .post-image__svg-post-thumbnail,
.slider-item__post-img-section .svg-background-icon {
  height: 100%;
  width: 100%
}

.slider-item__post-img-section .svg-background-icon {
	background-size: 1500px 148%;
  -webkit-background-size: 1500px 148%;
  -o-background-size: 1500px 148%;
  background-position: 18% 62%;
  height: 1000px;
  width: 1000px
}

/*  Slider -> post headlines
------------------------------------------------------------*/
.slider-item__slide-title .slider-link__title-post-headline {
  position: absolute;
  top: 40px;
  left: 30px;
  z-index: 2;
  padding: 3px var(--fontSize);
  max-height: 346px;
  max-width: 450px;
  font-size: 40px;
  font-weight: 600;
  line-height: 35px;
  overflow: hidden;
  letter-spacing: 2px;
  color: var(--white)
}

/*  Slider -> arrow buttons
------------------------------------------------------------*/
.slider-grid__navigation-block {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  color: var(--white)
}
.slider-navigation-block__buttons {
  position: relative;
  margin: auto;
  height: 100%;
  max-height: 400px;
  width: 100%;
  overflow: hidden;
  font-size: 0.0001px
}
.slider-buttons__prev,
.slider-buttons__next {
  position: relative;
  height: 100%;
  width: 31px;
  overflow: hidden
}
.slider-buttons__prev {
  float: left;
  left: 0px
}
.slider-btn-icons__svg-icon {
  width: 13px;
  fill: var(--white);
}
.slider-buttons__prev .slider-btn-icons__svg-icon {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  right: 11px
}
.slider-buttons__next {
  float: right;
  right: 0px
}
.slider-buttons__next .slider-btn-icons__svg-icon {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  left: 11px
}
.slider-btn-icons__buttons-block {
  display: block;
  position: relative;
  width: 31px;
  height: 400px;
  cursor: pointer;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}
.slider-btn-icons__svg-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 10px
}
.slider-buttons__prev:focus,
.slider-buttons__next:focus {
  background-color: var(--green)
}
.slider-buttons__prev:hover,
.slider-buttons__next:hover {
  background-color: var(--red);
  fill: var(--white)
}
.slide--active,
.slider-dots-block__dot:hover {
  background-color: var(--white)
}

/*  Slider -> dots
------------------------------------------------------------*/
.automatron-slider__dots-block {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0 auto;
  z-index: 2;
  width: 52px;
  font-size: 0.0001px
}
.slider-dots-block__dot {
  display: inline-block;
  margin-right: 5px;
  height: 13px;
  width: 13px;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid var(--white)
}
.slider-dots-block__dot:last-child {
  margin-right: 0
}
.slideshow--fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s
}
@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  
  to {
    opacity: 1
  }
}
@keyframes fade {
  from {
    opacity: .4
  }
  
  to {
    opacity: 1
  }
}

/*  Slider -> hover effects
------------------------------------------------------------*/
.content-block-part__slider:hover .slider-item__dark-background {
  opacity: .8
}
.content-block-part__slider:hover .slider-navigation-block__button-prev,
.content-block-part__slider:hover .slider-navigation-block__button-next {
  display: block;
  z-index: 2
}
.content-block-part__slider:hover .slider-link__title-post-headline {
  display: block
}

/* Slider Focus Styles */
.slider-buttons__prev:focus {
  left: 0;
  padding: 0;
  border-radius: inherit;
  fill: var(--black3);
  background-color: var(--green);
}
.slider-buttons__next:focus {
  right: 0;
  padding: 0;
  border-radius: inherit;
  fill: var(--black3);
}
.slider-title-block__link:focus-within .slider-link__title-post-headline {
  background-color: var(--green);
  border-radius: 4px;
  padding: 10px;
  color: var(--black3);
}
.slider-dots-block__dot:focus,
.slide--active:focus {
  border-radius: 50%;
  background-color: var(--green);
  box-shadow: inherit;
  padding: 0
}

.slider-dots-block__dot:active,
.slide--active:active {
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: inherit;
  padding: 0
}

/*  Slider ----------> viewport 1023px
------------------------------------------------------------*/
@media screen and (min-width:1px) and (max-width:1023px) {
  .content-block-part__slider {
    width: 100%;
    margin: 0 auto 40px
  }
}

/*  Slider ----------> viewport 800px
------------------------------------------------------------*/
@media screen and (min-width:1px) and (max-width:800px) {
  .oldschool_slider__img--landscape {
    min-height: 400px;
    font-size: 0.001px
  }
  
  .oldschool_slider__img--square,
  .oldschool_slider__img--portrait {
    display: block;
    left: -50%;
    min-height: 400px;
    height: auto;
    min-width: 762px;
    width: 100%;
    font-size: 0.001px
  }
  
  .automatron-slider__dots-block {
    width: 86px
  }
  
  .slider-dots-block__dot {
    height: 25px;
    width: 25px
  }
  
  .slider-item__post-img-section .svg-background-icon {
		background-size: 1500px 148%;
    -webkit-background-size: 1500px 148%;
    -o-background-size: 1500px 148%;
    background-position: 20% 62%;
    height: 1000px;
    width: 1000px
  }
}

/*  Slider ----------> viewport 600px
------------------------------------------------------------*/
@media screen and (min-width:1px) and (max-width:600px) {
  .content-block-part__slider {
    background: none
  }
  
  .slider-img-section__img {
    min-width: 600px;
    height: 325px
  }
}