File: D:/HostingSpaces/SBogers85/dale-int.com/wwwroot/css/partials/_servicesRow.sass
.services-wrapper
+flex(center, center)
flex-direction: column
position: relative
background-image: url('/img/structure/bg_pattern.png')
padding: 100px 0px
.block-title
color: white
// Temporarily active/unactive for front-end speeding
.dienst-wrapper
+flex(flex-start, flex-start)
overflow-x: hidden
background-color: $blue
width: $contentGrid*10
height: 600px
max-width: 1400px
transition: height 0.4s ease
.dienst-outer
+flex(center, center)
width: 70%
height: 100%
background: white
padding: 50px
align-self: stretch
+respond-to(small)
width: 100%
+order(2)
.dienst-menu
width: 30%
min-width: 360px
//min-height: 400px
height: 100%
align-self: stretch
ul
margin: 0
padding: 0
height: 100%
+flex(space-around, flex-start)
flex-direction: column
li
+font-semi-bold(22px, 30px)
+flex(flex-start, center)
margin: 0
padding-left: $iconSpace
width: 100%
height: 100%
color: white
list-style-type: none
cursor: pointer
transition: background-color 0.7s ease
&:hover
background: darken($blue, 2%)
+respond-to(small)
height: 50px
.active
background: $lightBlue
&:hover
background: $lightBlue
+respond-to(small)
width: 100%
min-height: auto
+order(1)
.icon
width: 25px
height: 25px
margin-right: $iconSpace
display: inline-block
img
width: 100%
+respond-to(small)
flex-direction: column
.dienst-block
max-width: $maxContentWidth
opacity: 0
display: none
&.active
display: block
opacity: 1
animation: grow .4s ease-in-out
@keyframes grow
0%
display: none
opacity: 0
1%
display: block
opacity: 0
100%
opacity: 1