File: D:/HostingSpaces/PDeckers/opelkapitan.nl/wwwroot/css/partials/_imageSlider.sass
.image-slider
height: 1200px
margin-top: 25px
margin-bottom: 20px
min-height: 425px
position: relative
.images
position: relative
height: 100%
span
position: absolute
width: 100%
height: 100%
top: 0
left: 0
background-size: cover
background-position: 50%
opacity: 0
z-index: 1
+transition(opacity 0.3s)
&.active
opacity: 1
z-index: 2
&.small
display: none
.content
position: absolute
width: 100%
height: 100%
z-index: 5
top: 0
left: 0
+flex(center, center)
.brand
+sprite(-384px 0, 428px, 207px)
margin-bottom: -15%
min-width: 428px
display: none
.controllers
position: absolute
width: calc(100% - 120px)
height: 100%
top: 0
left: 60px
+flex(space-between, center)
.left, .right
width: 53px
height: 53px
+flex(center, center)
cursor: pointer
position: relative
.background
position: absolute
left: 0
top: 0
+sprite(-500px -270px, 53px, 53px)
+transform(rotate(0deg))
+transition(all 8s)
+transition-timing-function(linear)
&:before
content: ''
+sprite(-341px -105px, 11px, 15px)
+translate3dRotate(3px,0,0,0deg)
+transition(all 0.3s)
position: relative
z-index: 5
&:hover
.background
+transform(rotate(360deg))
&:before
background-position: -330px -105px
.left
&:before
+translate3dRotate(-3px,0,0,180deg)
+media-query(1920px)
.image-slider
margin-top: 42px
margin-bottom: 38px
+media-query(1680px)
.image-slider
margin-bottom: 55px
+media-query(1450px)
.image-slider
margin-top: 75px
margin-bottom: 70px
+media-query(1100px)
.image-slider
margin-top: 100px
margin-bottom: 94px
.content
.brand
+transform(scale(0.8))
+media-query(850px)
.image-slider
margin-top: 116px
.images
span.active
&.large
display: none
&.small
display: block
+media-query(780px)
.image-slider
margin-top: 120px
.content
.brand
+transform(scale(0.65))
+media-query(600px)
.image-slider
.content
.controllers
display: none
+media-query(550px)
.image-slider
margin-top: 135px
+media-query(400px)
.image-slider
margin-top: 145px
.content
.brand
margin-bottom: -30%
+transform(scale(0.5))