File: D:/HostingSpaces/SBogers10/mohn.komma.pro/wwwroot/wp-content/themes/mohn/assets/css/style.sass
@import reset
@import config
@import base
@import nav
.home-nav
position: relative
width: 100%
margin: 60px 0
z-index: 99
h1
width: 100%
padding: 60px 0
font-size: 120px
line-height: 120px
letter-spacing: 10px
text-align: center
.nav-row
.filter-nav
float: left
width: 100%
height: 60px
padding: 0
margin: 0
list-style: none
text-align: center
.filter
display: inline-block
margin: 10px 15px
.filter-btn
display: inline-block
text-align: center
.icon
display: inline-block
width: 25px
height: 25px
svg
width: 100%
height: 100%
path, polygon, rect
fill: $color-gray
.label
display: block
width: 100%
text-align: center
font-size: 9px
font-weight: 700
letter-spacing: 1px
text-transform: uppercase
color: $color-gray
&:hover
.icon
svg
path, polygon, rect
fill: $color-black
.label
color: $color-black
.page
position: relative
width: 100%
min-height: 100vh
padding: 60px 0
.page-blog
background: $color-light
.white-fold
position: absolute
width: 100%
height: 210px
top: 0
background: $color-white
.home-column
position: relative
float: left
&.left-column
width: calc(100% - 360px)
&.right-column
width: 360px
&.absolute
position: absolute
right: calc( (100vw - 1200px) / 2 )
&.sticky-down, &.sticky-up
position: fixed
.article-con
width: 100%
.blog-post
float: left
width: calc((100% - 60px) / 2)
height: 480px
margin: 0 30px 30px 0
.blog-thumb
position: relative
width: 100%
height: 240px
overflow: hidden
background: $color-black
img
width: 100%
height: 100%
object-fit: cover
@include animate(opacity, 0.3s)
.blog-content
height: 240px
padding: 30px
background: $color-white
.date
font-size: 16px
line-height: 16px
font-weight: 300
color: $color-gray
ul
display: inline-block
padding: 0
margin: 0
list-style: none
li
display: inline-block
&:after
display: inline-block
content: ","
margin-right: 5px
&:last-child
&:after
content: ""
h3
margin: 15px 0
font-size: 30px
line-height: 40px
font-weight: 700
color: $color-black
h4
font-size: 20px
line-height: 30px
font-weight: 300
color: $color-black
&.large
width: calc(100% - 30px)
height: 720px
.blog-thumb
height: 480px
.blog-content
.date
font-size: 16px
line-height: 16px
h3
font-size: 40px
line-height: 48px
h4
font-size: 24px
line-height: 36px
&:hover
.blog-thumb
img
opacity: 0.9
.extra-con
width: 100%
padding: 30px
margin-bottom: 30px
background: $color-white
h2
margin-bottom: 25px
font-size: 26px
line-height: 26px
color: $color-black
p
font-size: 18px
line-height: 30px
font-weight: 300
color: $color-black
hr
width: 100%
height: 1px
margin: 15px 0 20px
border: 0
background: $color-light
.links
margin-bottom: 15px
.img-link
display: inline-block
margin-right: 10px
svg
width: 25px
height: 25px
path, rect, polygon
fill: $color-main
&:hover
opacity: 0.8
.list-link
display: block
position: relative
padding-left: 30px
font-size: 18px
line-height: 30px
color: $color-black
.bullet
display: block
position: absolute
left: 0
font-size: 18px
line-height: 30px
font-weight: 500
color: $color-main
&:hover
color: $color-main
&.featured-con
ul
padding: 0
margin: 0
list-style: none
.blog-post
position: relative
padding: 0 0 10px 30px
a
.number
display: block
position: absolute
left: 0
font-size: 18px
line-height: 30px
font-weight: 500
color: $color-main
h3
display: inline
font-size: 18px
line-height: 30px
font-weight: 300
color: $color-black
&:hover
.number
color: $color-main
h3
color: $color-main
&.subscribe-con
form
.input
width: 65%
height: 45px
padding: 0 15px
border: 1px solid $color-light
border-right: 0
outline: none
background: none
font-size: 14px
line-height: 30px
color: $color-gray
.submit
float: right
width: 35%
height: 45px
border: 0
outline: none
background: $color-main
font-size: 14px
line-height: 30px
color: $color-white
cursor: pointer
&:hover
opacity: 0.8
.portrait
width: 100%
height: 210px
background: url(../../assets/img/portrait.jpg)
background-size: cover
background-position: center center
.page-article
padding-bottom: 0
.page-block
width: 100%
padding-bottom: 60px
.page-hero
position: relative
width: 100%
height: calc(100vh - 60px)
padding: 0 60px 60px
.shade-fold
position: absolute
width: 100%
height: 50vh
left: 0
bottom: 0
background: $color-light
.image
position: relative
width: 100%
height: calc(100vh - 120px)
img
width: 100%
height: 100%
object-fit: cover
.title
display: table
position: absolute
width: 100%
height: calc(100vh - 120px)
top: 0
left: 0
padding: 0 120px
.title-con
display: table-cell
width: 100%
height: 100%
text-align: center
vertical-align: middle
h1
margin-bottom: 15px
font-size: 60px
line-height: 60px
color: $color-white
h2
font-size: 30px
line-height: 30px
color: $color-white
&.black
h1, h2
color: $color-black
.page-intro
margin-bottom: 60px
background: $color-light
.intro
padding: 0 240px
text-align: center
.date
display: inline-block
margin-bottom: 20px
font-size: 16px
line-height: 16px
font-weight: 300
color: $color-dark
ul
display: inline-block
padding: 0
margin: 0
list-style: none
li
display: inline-block
&:after
display: inline-block
content: ","
margin-right: 5px
&:last-child
&:after
content: ""
a
color: $color-black
p
font-size: 24px
line-height: 42px
color: $color-black
a
color: $color-main
.page-text
.content
padding: 0 180px
h3
font-size: 18px
line-height: 36px
font-weight: 700
color: $color-black
p
font-size: 18px
line-height: 36px
font-weight: 300
color: $color-black
a
color: $color-main
.page-text-image
.content
padding: 0 180px
.image-con
position: relative
width: 60%
img
width: 100%
margin-bottom: 30px
h3
font-size: 18px
line-height: 36px
font-weight: 700
color: $color-black
p
margin: 0
font-size: 18px
line-height: 36px
font-weight: 300
color: $color-black
a
color: $color-main
&.text-right
.image-con
float: left
left: -60px
&.text-left
.image-con
float: right
right: -60px
.page-image
.image-con
padding: 0 120px
img
width: 100%
margin-bottom: 60px
&:last-child
margin: 0
&.image-fullwidth
.image-con
padding: 0
.page-advertorial
.advertorial
width: 240px
padding: 5px
margin: 0 auto
background: $color-main
.icon
float: left
width: 50px
height: 100%
padding: 10px
margin: -5px 10px 0 0
svg
width: 100%
height: 100%
path
fill: $color-white
.label
display: block
font-size: 12px
line-height: 20px
color: $color-white
.page-share
position: relative
width: 100%
text-align: center
.title-con
margin: 60px 0 30px
h2
font-size: 30px
line-height: 40px
color: $color-black
h3
font-size: 20px
line-height: 36px
font-weight: 300
color: $color-black
.share-con
margin-bottom: 60px
.share-link
display: inline-block
width: 25px
height: 25px
margin: 0 5px
svg
width: 100%
height: 100%
path, polygon, rect
fill: $color-main
&:hover
opacity: 0.8
hr
width: 80px
height: 1px
border: 0
background: $color-gray
.page-related
position: relative
width: 100%
.shade-fold
position: absolute
width: 100%
height: calc(240px + 60px + 120px)
left: 0
bottom: 0
background: $color-light
.title-con
margin-bottom: 60px
text-align: center
h2
font-size: 30px
line-height: 40px
color: $color-black
h3
font-size: 20px
line-height: 36px
font-weight: 300
color: $color-black
.post-con
position: relative
.blog-post
float: left
width: calc((1200px - 60px) / 3)
height: 480px
margin-right: 30px
.blog-thumb
position: relative
width: 100%
height: 240px
overflow: hidden
background: $color-black
img
width: 100%
height: 100%
object-fit: cover
@include animate(opacity, 0.3s)
.blog-content
height: 240px
padding: 30px
background: $color-white
.date
font-size: 16px
line-height: 16px
font-weight: 300
color: $color-gray
ul
display: inline-block
padding: 0
margin: 0
list-style: none
li
display: inline-block
&:after
display: inline-block
content: ","
margin-right: 5px
&:last-child
&:after
content: ""
h3
margin: 15px 0
font-size: 30px
line-height: 40px
font-weight: 700
color: $color-black
h4
font-size: 20px
line-height: 30px
font-weight: 300
color: $color-black
&:last-child
margin-right: 0
&:hover
.blog-thumb
img
opacity: 0.9
&:after
content: ""
display: block
clear: both
.page-about
position: absolute
width: 100%
height: 100vh
padding: 0 60px 60px
.shade-fold
position: absolute
width: 100%
height: 75vh
left: 0
bottom: 0
background: $color-light
.content
position: relative
width: 100%
top: 25vh
.portrait
position: relative
width: 180px
height: 180px
margin: -90px auto 60px
border-radius: 50%
background: url(../../assets/img/portrait.jpg)
background-size: cover
background-position: center center
.content-con
width: 100%
height: 100%
padding: 0 180px
text-align: center
h1
margin-bottom: 60px
font-size: 60px
line-height: 60px
color: $color-black
p
font-size: 18px
line-height: 36px
font-weight: 300
color: $color-black
a
color: $color-main
.page-contact
position: absolute
width: 100%
height: 100vh
padding: 0 60px 60px
.shade-fold
position: absolute
width: 100%
height: 75vh
left: 0
bottom: 0
background: $color-light
.content
position: relative
width: 100%
top: 25vh
.content-con
width: 100%
height: 100%
padding: 0 180px
text-align: center
h1
margin: -30px 0 60px
font-size: 60px
line-height: 60px
color: $color-black
p
font-size: 18px
line-height: 36px
font-weight: 300
color: $color-black
a
color: $color-main
.wpcf7
width: 600px
margin: 60px auto 0
p
&:after
content: ""
display: block
clear: both
br
display: none
.wpcf7-form-control-wrap
float: left
display: block
width: 50%
padding: 0 5px
margin-bottom: 10px
&.your-message
float: right
margin-bottom: 0
.wpcf7-text
float: left
width: 100%
height: 45px
padding: 0 15px
border: 0
background: $color-white
outline: none
font-size: 14px
color: $color-black
.wpcf7-textarea
width: 100%
height: 100px
padding: 15px
border: 0
background: $color-white
outline: none
resize: none
font-size: 14px
color: $color-black
.wpcf7-not-valid
border: 1px solid $color-main
.wpcf7-submit
height: 45px
padding: 0 45px
margin: 0 auto
border: 0
background: $color-black
outline: none
font-size: 14px
color: $color-white
.wpcf7-not-valid-tip
display: none
.wpcf7-validation-errors, .wpcf7-mail-sent-ok
border: 0
.ajax-loader
display: none
@import responsive