File: D:/HostingSpaces/SBogers10/rentman.komma.pro/wwwroot/css/partials/_introRow.sass
.home
.intro-row
padding-top: 80px
.support_center .intro-row
margin-bottom: 0
.intro-row
margin-bottom: -60px
overflow: hidden
.content-container
position: relative
padding-bottom: 60px
.image-container
position: absolute
width: $contentGrid*8
top: 0
left: $contentGrid*-1
height: 100%
>span
position: absolute
height: 100%
width: 100%
top: 0
left: 0
background-size: cover
background-position: 50%
opacity: 0
+transition(all 0.3s)
&.medium
display: none
&.large
display: block
&.active
opacity: 1
.label
&.hide
display: none
span
position: absolute
left: 0
bottom: 0
padding: 0 50px
background-color: rgba(255, 129, 0, 0.85)
+font-semi-bold()
line-height: 60px !important
font-size: 18px !important
color: white
display: none
&.active
display: block
.nav
position: absolute
background-image: url('/img/vertical_small_shadow.png')
background-position: right top
background-repeat: repeat-y
background-color: $darkerBlue
height: 60px
width: calc(100% / 8)
right: calc(100% / 8 * -1)
bottom: 0
+flex(center, center)
ul
list-style: none
padding: 0
margin: 0
display: inline-block
+flex(center, center)
li
+sprite(-105px -15px, 15px, 15px)
display: block
position: relative
margin-right: 5px
cursor: pointer
&:last-of-type
margin-right: 0
&.active
background: none
&:before
content: ''
display: block
position: absolute
left: 0
top: 0
+sprite(-90px -15px, 15px, 15px)
.content
padding: 40px $contentGrid/2 80px $contentGrid
margin-left: $contentGrid*7
background-color: white
h1
+font-light(34px, 40px)
color: $darkBlue
margin-bottom: 30px
h2
+font-light(28px, 34px)
color: $darkBlue
margin-bottom: 20px
p, ul, li, em ,strong
+font-light(21px, 32px)
font-size: 18px
line-height: 30px
color: $lightBlue
margin-bottom: 40px
strong
+font-semi-bold(21px, 32px)
font-size: 18px
line-height: 30px
.button
width: 100%
max-width: 300px
margin-top: 15px
background: $orange
+transition(all .3s)
border-radius: 4px
display: inline-block
a
+font-semi-bold(21px, 21px)
font-size: 18px
color: white
padding: 15px 25px
+flex(space-between, center)
&:after
content: ''
+arrowWhite
+translate3d(0,0,0)
+transition(all .3s)
&:hover
background-color: $fellOrange
a:after
+translate3d( 5px, 0, 0)
.home-intro
.trail-text
+font-light(28px, 38px)
font-size: 24px
line-height: 36px
color: $lightBlue
margin-bottom: 8px
.footerForm
padding: 0
text-align: center
.input
border-radius: 5px
border: 2px solid $gray
display: inline-block
width: calc(100% - 4px)
min-width: 260px
height: 50px
position: relative
input
+appearance(none)
background-color: transparent !important
width: calc(100% - 105px)
padding: 0 10px 0 20px
display: block
border: none
+font-light()
font-size: 16px !important
line-height: 50px !important
color: $lightBlue
&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
+transition(9999s background-color)
border-radius: 5px
-webkit-text-fill-color: $lightBlue
+transition-delay(9999s)
&:focus
box-shadow: none
border: none
border-radius: 0
outline: none
input[type=submit]
display: none
.submit
background-color: $orange
width: 100px
height: calc(100% + 4px)
position: absolute
padding: 0
right: -2px
text-align: center
top: -2px
cursor: pointer
border-radius: 0 5px 5px 0
+transition(all .2s)
p
color: white
+font-semi-bold()
font-size: 16px !important
line-height: 50px !important
margin: 0
&:after
content: ''
+arrowWhite
margin-left: 10px
+translate3d(0, 0, 0)
+transition(all .3s)
&:hover
background-color: $fellOrange
p:after
+translate3d(5px, 0, 0)
&.image-right
.image-container
left: auto
right: $contentGrid*-1
.label
.nav
right: auto
left: calc(100% / 8 * -1)
span
position: absolute
right: 0
left: auto
.content
padding: 40px $contentGrid 80px $contentGrid
width: $contentGrid*5
margin-left: 0
&.customers
.image-container
z-index: 2
.customers-icons
+flex(space-between, flex-start)
+flex-rows
p
+font-semi-bold(22px, 22px)
font-size: 20px
line-height: 20px
color: $orange
margin: 0 0 45px
width: 50%
+flex(flex-start, center)
span.placeholder
width: 60px
+flex(center, center)
margin-right: 15px
span.icon
display: inline-block
&.audio
span.icon
+sprite(-435px -45px, 35px, 56px)
&.video
span.icon
+sprite(-50px -155px, 49px, 60px)
&.lighting
span.icon
+sprite(-155px -155px, 53px, 60px)
&.events
span.icon
+sprite(-582px -0px, 58px, 53px)
+media-query(1680px)
.intro-row
.content-container
.image-container
left: $contentGrid*-0.5
width: $contentGrid*7.5
&.image-right
.content-container
.image-container
left: auto
right: $contentGrid*-0.5
+media-query(1440px)
.intro-row
.content-container
width: 100%
.image-container
left: 0
width: $contentGrid*7
&.image-right
.content-container
width: 95%
.image-container
right: -2.5%
+media-query(1180px)
.intro-row
.content-container
.content
margin-left: $contentGrid*6
padding-top: 0
padding-bottom: 40px
.image-container
left: 0
width: $contentGrid*6
&.image-right
.content-container
.content
width: 50%
margin-left: 0
+media-query(1050px)
.intro-row
margin-bottom: 0
.content-container
+flex(center, center)
+flex-rows
.content
+order(1)
width: 100%
margin-left: 0
padding: 40px $contentGrid*2 80px
.image-container
position: relative
+order(2)
width: 100%
height: 500px
.label span
width: 100%
text-align: center
bottom: -60px
&.image-right
.content-container
width: 100%
.image-container
left: 0
right: 0
.content
width: 100%
+media-query(740px)
.home
.intro-row
padding-top: 20px
+media-query(650px)
.intro-row
.content-container
.image-container
height: 400px
+media-query(550px)
.intro-row
.content-container
padding-bottom: 50px
.image-container
height: 325px
.label span
bottom: -50px
line-height: 50px !important
font-size: 16px !important
.content
padding: 40px $contentGrid 80px
+media-query(450px)
.intro-row
.content-container
.image-container
height: 275px
&.customers
.customers-icons
+flex(center, flex-start)
p
width: 100%
+flex(center, center)
span.placeholder
margin-left: -60px
margin-right: 30px
&.events
margin-bottom: 0
+media-query(400px)
.intro-row
.content-container
.image-container
height: 225px