File: D:/HostingSpaces/SBogers75/roost-interieurbouw.nl/wwwroot/css/partials/subPartials/_mobile.sass
.mobile
display: none
.blue
color: $fontRed
p
color: $background
@media screen and (max-width: 840px)
.mobile
display: block
position: fixed
top: 0
left: 0
z-index: 10000
width: 100%
a
text-decoration: none
color: $fontRed
.subscribe-button2
margin: 40px auto
background-color: $darkRed
width: 100%
cursor: pointer
text-align: center
p
font-size: 18px
padding: 10px 0
line-height: 30px
color: black
font-weight: 100
.mobile .header
position: relative
width: 100%
height: 60px
margin-top: 0
background: $darkRed
text-align: center
+transition(all 2s)
+transition-delay(3s)
&.intro
margin-top: -60px
.mobile .mobile_btn
position: relative
width: 60px
height: 100%
cursor: pointer
.mobile .mobile_btn .icon
display: block
position: absolute
top: 50%
left: 50%
background: url('/images/structure/mobile_sprite.png')
.mobile .mobile_btn.nav
float: left
border-right: 1px solid #A91B19
.mobile .mobile_btn.nav .icon
margin: -7px 0 0 -9px
width: 18px
height: 15px
background-position: -10px -40px
.mobile .mobile_btn.nav:hover:not(.selected)
background: #fff
.mobile .mobile_btn.nav:hover:not(.selected) .icon
background-position: -10px -10px
.mobile .mobile_btn.contact
float: right
border-left: 1px solid #A91B19
.mobile .mobile_btn.contact .icon
margin: -10px 0 0 -10px
width: 20px
height: 20px
background-position: -70px -40px
.mobile .mobile_btn.contact:hover:not(.selected)
background: #fff
.mobile .mobile_btn.contact:hover:not(.selected) .icon
background-position: -70px -10px
.mobile .mobile_btn.selected
background: #fff
.mobile .mobile_btn.selected .icon
background-position: -40px -10px
margin-top: -6px
.mobile .mobile_btn.selected .icon:hover .icon
background-position: -40px -10px
margin-top: -6px
.mobile .logo
background: url('/images/structure/logo_mobile.png') no-repeat 50% 50%
display: inline-block
margin-top: 8.5px
background-size: contain
height: 35px
width: 65%
.mobile .mb_content
position: relative
overflow-y: scroll
.mobile .mb_content nav
position: relative
overflow: hidden
height: 0
.mobile .mb_content nav ul
display: block
margin: 0
padding: 0
width: 100%
background: $background
.mobile .mb_content nav ul.inner
padding-bottom: 80px
.mobile .mb_content nav ul li
display: block
position: relative
width: 100%
.mobile .mb_content nav ul li .title
display: block
position: relative
padding: 0 0 0 60px
width: 100%
height: 59px
text-transform: capitalize
border-bottom: 1px solid rgba(255, 255, 255, 0.9)
color: black
line-height: 60px
box-sizing: border-box
-moz-box-sizing: border-box
cursor: pointer
.mobile .mb_content nav ul li .title:hover
background: #CCCCCC
.mobile .mb_content nav ul li .title .dd_arrow
display: block
position: absolute
left: 30px
top: 50%
margin: -2px 0 0 -5px
width: 10px
height: 6px
background: url('/images/structure/mobile_sprite.png') -100px -10px
.mobile .mb_content nav ul li.selected .title
color: $darkRed
.mobile .mb_content nav ul li.selected .title .dd_arrow
background-position: -100px -24px
.mobile .mb_content nav ul li.mb_dropdown
display: block
+font-bold
span
+font-bold
.mobile .mb_content nav ul li.mb_dropdown ul
display: block
position: relative
overflow: hidden
padding: 0
height: 0
.mobile .mb_content nav ul li.mb_dropdown ul li .title
padding-left: 90px
background: $background
color: white
&.special
color: white
background-color: $darkRed
.mobile .mb_content nav ul li.mb_dropdown ul li .title .dd_arrow
left: 65px
background-position: -100px -10px
.mobile .mb_content nav ul li.mb_dropdown ul li .title:hover
background: #33353d
.mobile .mb_content nav ul li.mb_dropdown ul li .title.special:hover
background-color: #1077D4
.mobile .mb_content nav ul li.mb_dropdown ul li.selected .title
color: $darkRed
.mobile .mb_content nav ul li.mb_dropdown ul li.selected .title .dd_arrow
background-position: -100px -24px
.mobile .mb_content nav ul li.mb_dropdown ul li.mb_dropdown
display: block
.mobile .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul
display: block
position: relative
overflow: hidden
padding: 0
height: 0
.mobile .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title
padding-left: 120px
height: 39px
border-bottom: 1px solid #cccccc
background: #EAEAEA
color: #575765
line-height: 40px
.mobile .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title:hover
background: $background
.mobile .mb_content #mobile_contact
position: relative
overflow: hidden
height: 0
background: #fff
.mobile .mb_content #mobile_contact .inner
padding: 30px
box-sizing: border-box
-moz-box-sizing: border-box
.mobile .mb_content #mobile_contact .inner .title
display: block
margin-bottom: 1em
color: $darkRed
.mobile .mb_content #mobile_contact .inner .data_title
display: inline-block
width: 50%
max-width: 150px
color: $fontRed
text-transform: uppercase
.mobile .blur
display: none
position: fixed
top: 0
left: 0
z-index: -1
width: 100%
background: $darkRed
opacity: 0
filter: alpha(opacity=0)
.mobile.phone .mb_content nav ul li .title:hover
background: none
.mobile.phone .mb_content nav ul li.mb_dropdown ul li .title:hover
background: #33353d
.mobile.phone .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title:hover
background: #33353d !important