File: D:/HostingSpaces/SBogers10/mohn.komma.pro/wwwroot/wp-content/themes/mohn/assets/css/style.css
/*/////////////// */
/*//// RESET //// */
/*/////////////// */
body, html {
padding: 0;
margin: 0; }
* {
box-sizing: border-box; }
a {
text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
margin: 0; }
/*//////////////// */
/*//// CONFIG //// */
/*//////////////// */
body {
font-family: "Lato", sans-serif; }
input {
font-family: "Lato", sans-serif; }
/*////////////// */
/*//// BASE //// */
/*////////////// */
.container {
width: 1400px;
margin: 0 auto; }
.container:after {
content: "";
display: block;
clear: both; }
nav {
position: fixed;
width: 100%;
height: 60px;
top: 0;
z-index: 999; }
nav .inner-nav {
width: 100%;
height: 100%; }
nav .inner-nav .filter-nav {
display: none;
position: absolute;
width: 100%;
height: 60px;
top: 0;
left: 0;
padding: 0;
margin: 0;
list-style: none;
text-align: center; }
nav .inner-nav .filter-nav .filter {
display: inline-block;
margin: 10px 15px; }
nav .inner-nav .filter-nav .filter .filter-btn {
display: inline-block;
text-align: center; }
nav .inner-nav .filter-nav .filter .filter-btn .icon {
display: inline-block;
width: 25px;
height: 25px; }
nav .inner-nav .filter-nav .filter .filter-btn .icon svg {
width: 100%;
height: 100%; }
nav .inner-nav .filter-nav .filter .filter-btn .icon svg path, nav .inner-nav .filter-nav .filter .filter-btn .icon svg polygon, nav .inner-nav .filter-nav .filter .filter-btn .icon svg rect {
fill: #cccccc; }
nav .inner-nav .filter-nav .filter .filter-btn .label {
display: block;
width: 100%;
text-align: center;
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #cccccc; }
nav .inner-nav .filter-nav .filter .filter-btn:hover .icon svg path, nav .inner-nav .filter-nav .filter .filter-btn:hover .icon svg polygon, nav .inner-nav .filter-nav .filter .filter-btn:hover .icon svg rect {
fill: #000000; }
nav .inner-nav .filter-nav .filter .filter-btn:hover .label {
color: #000000; }
nav .inner-nav .logo-con {
float: left;
position: relative;
width: 40px;
height: 40px;
margin: 10px 15px;
z-index: 9; }
nav .inner-nav .logo-con svg {
width: 100%;
height: 100%; }
nav .inner-nav .logo-con svg path, nav .inner-nav .logo-con svg polygon, nav .inner-nav .logo-con svg rect {
fill: #dbb1bd; }
nav .inner-nav .logo-con:hover svg path, nav .inner-nav .logo-con:hover svg polygon, nav .inner-nav .logo-con:hover svg rect {
fill: #000000; }
nav .inner-nav .menu {
float: right;
position: relative; }
nav .inner-nav .menu .menu-item {
display: inline-block;
margin-right: 30px;
font-size: 11px;
line-height: 60px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #dbb1bd; }
nav .inner-nav .menu .menu-item:hover {
color: #000000; }
nav.scrolling {
z-index: 999;
background: #ffffff; }
nav.scrolling .filter-nav {
display: block; }
nav.sticky {
z-index: 999;
background: #ffffff; }
.home-nav {
position: relative;
width: 100%;
margin: 60px 0;
z-index: 99; }
.home-nav h1 {
width: 100%;
padding: 60px 0;
font-size: 120px;
line-height: 120px;
letter-spacing: 10px;
text-align: center; }
.home-nav .nav-row .filter-nav {
float: left;
width: 100%;
height: 60px;
padding: 0;
margin: 0;
list-style: none;
text-align: center; }
.home-nav .nav-row .filter-nav .filter {
display: inline-block;
margin: 10px 15px; }
.home-nav .nav-row .filter-nav .filter .filter-btn {
display: inline-block;
text-align: center; }
.home-nav .nav-row .filter-nav .filter .filter-btn .icon {
display: inline-block;
width: 25px;
height: 25px; }
.home-nav .nav-row .filter-nav .filter .filter-btn .icon svg {
width: 100%;
height: 100%; }
.home-nav .nav-row .filter-nav .filter .filter-btn .icon svg path, .home-nav .nav-row .filter-nav .filter .filter-btn .icon svg polygon, .home-nav .nav-row .filter-nav .filter .filter-btn .icon svg rect {
fill: #cccccc; }
.home-nav .nav-row .filter-nav .filter .filter-btn .label {
display: block;
width: 100%;
text-align: center;
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #cccccc; }
.home-nav .nav-row .filter-nav .filter .filter-btn:hover .icon svg path, .home-nav .nav-row .filter-nav .filter .filter-btn:hover .icon svg polygon, .home-nav .nav-row .filter-nav .filter .filter-btn:hover .icon svg rect {
fill: #000000; }
.home-nav .nav-row .filter-nav .filter .filter-btn:hover .label {
color: #000000; }
.page {
position: relative;
width: 100%;
min-height: 100vh;
padding: 60px 0; }
.page-blog {
background: #eaeff1; }
.page-blog .white-fold {
position: absolute;
width: 100%;
height: 210px;
top: 0;
background: #ffffff; }
.page-blog .home-column {
position: relative;
float: left; }
.page-blog .home-column.left-column {
width: calc(100% - 360px); }
.page-blog .home-column.right-column {
width: 360px; }
.page-blog .home-column.right-column.absolute {
position: absolute;
right: calc( (100vw - 1200px) / 2 ); }
.page-blog .home-column.right-column.sticky-down, .page-blog .home-column.right-column.sticky-up {
position: fixed; }
.page-blog .home-column .article-con {
width: 100%; }
.page-blog .home-column .article-con .blog-post {
float: left;
width: calc((100% - 60px) / 2);
height: 480px;
margin: 0 30px 30px 0; }
.page-blog .home-column .article-con .blog-post .blog-thumb {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
background: #000000; }
.page-blog .home-column .article-con .blog-post .blog-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s cubic-bezier(0.47, 0.18, 0.31, 0.93);
-webkit-transition: opacity 0.3s cubic-bezier(0.47, 0.18, 0.31, 0.93);
-moz-transition: opacity 0.3s cubic-bezier(0.47, 0.18, 0.31, 0.93);
-ms-transition: opacity 0.3s cubic-bezier(0.47, 0.18, 0.31, 0.93);
-o-transition: opacity 0.3s cubic-bezier(0.47, 0.18, 0.31, 0.93); }
.page-blog .home-column .article-con .blog-post .blog-content {
height: 240px;
padding: 30px;
background: #ffffff; }
.page-blog .home-column .article-con .blog-post .blog-content .date {
font-size: 16px;
line-height: 16px;
font-weight: 300;
color: #cccccc; }
.page-blog .home-column .article-con .blog-post .blog-content .date ul {
display: inline-block;
padding: 0;
margin: 0;
list-style: none; }
.page-blog .home-column .article-con .blog-post .blog-content .date ul li {
display: inline-block; }
.page-blog .home-column .article-con .blog-post .blog-content .date ul li:after {
display: inline-block;
content: ",";
margin-right: 5px; }
.page-blog .home-column .article-con .blog-post .blog-content .date ul li:last-child:after {
content: ""; }
.page-blog .home-column .article-con .blog-post .blog-content h3 {
margin: 15px 0;
font-size: 30px;
line-height: 40px;
font-weight: 700;
color: #000000; }
.page-blog .home-column .article-con .blog-post .blog-content h4 {
font-size: 20px;
line-height: 30px;
font-weight: 300;
color: #000000; }
.page-blog .home-column .article-con .blog-post.large {
width: calc(100% - 30px);
height: 720px; }
.page-blog .home-column .article-con .blog-post.large .blog-thumb {
height: 480px; }
.page-blog .home-column .article-con .blog-post.large .blog-content .date {
font-size: 16px;
line-height: 16px; }
.page-blog .home-column .article-con .blog-post.large .blog-content h3 {
font-size: 40px;
line-height: 48px; }
.page-blog .home-column .article-con .blog-post.large .blog-content h4 {
font-size: 24px;
line-height: 36px; }
.page-blog .home-column .article-con .blog-post:hover .blog-thumb img {
opacity: 0.9; }
.page-blog .home-column .extra-con {
width: 100%;
padding: 30px;
margin-bottom: 30px;
background: #ffffff; }
.page-blog .home-column .extra-con h2 {
margin-bottom: 25px;
font-size: 26px;
line-height: 26px;
color: #000000; }
.page-blog .home-column .extra-con p {
font-size: 18px;
line-height: 30px;
font-weight: 300;
color: #000000; }
.page-blog .home-column .extra-con hr {
width: 100%;
height: 1px;
margin: 15px 0 20px;
border: 0;
background: #eaeff1; }
.page-blog .home-column .extra-con .links {
margin-bottom: 15px; }
.page-blog .home-column .extra-con .links .img-link {
display: inline-block;
margin-right: 10px; }
.page-blog .home-column .extra-con .links .img-link svg {
width: 25px;
height: 25px; }
.page-blog .home-column .extra-con .links .img-link svg path, .page-blog .home-column .extra-con .links .img-link svg rect, .page-blog .home-column .extra-con .links .img-link svg polygon {
fill: #dbb1bd; }
.page-blog .home-column .extra-con .links .img-link:hover {
opacity: 0.8; }
.page-blog .home-column .extra-con .links .list-link {
display: block;
position: relative;
padding-left: 30px;
font-size: 18px;
line-height: 30px;
color: #000000; }
.page-blog .home-column .extra-con .links .list-link .bullet {
display: block;
position: absolute;
left: 0;
font-size: 18px;
line-height: 30px;
font-weight: 500;
color: #dbb1bd; }
.page-blog .home-column .extra-con .links .list-link:hover {
color: #dbb1bd; }
.page-blog .home-column .extra-con.featured-con ul {
padding: 0;
margin: 0;
list-style: none; }
.page-blog .home-column .extra-con.featured-con ul .blog-post {
position: relative;
padding: 0 0 10px 30px; }
.page-blog .home-column .extra-con.featured-con ul .blog-post a .number {
display: block;
position: absolute;
left: 0;
font-size: 18px;
line-height: 30px;
font-weight: 500;
color: #dbb1bd; }
.page-blog .home-column .extra-con.featured-con ul .blog-post a h3 {
display: inline;
font-size: 18px;
line-height: 30px;
font-weight: 300;
color: #000000; }
.page-blog .home-column .extra-con.featured-con ul .blog-post a:hover .number {
color: #dbb1bd; }
.page-blog .home-column .extra-con.featured-con ul .blog-post a:hover h3 {
color: #dbb1bd; }
.page-blog .home-column .extra-con form .input {
width: 65%;
height: 45px;
padding: 0 15px;
border: 1px solid #eaeff1;
border-right: 0;
outline: none;
background: none;
font-size: 14px;
line-height: 30px;
color: #cccccc; }
.page-blog .home-column .extra-con form .submit {
float: right;
width: 35%;
height: 45px;
border: 0;
outline: none;
background: #dbb1bd;
font-size: 14px;
line-height: 30px;
color: #ffffff;
cursor: pointer; }
.page-blog .home-column .extra-con form .submit:hover {
opacity: 0.8; }
.page-blog .home-column .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; }
.page-hero .shade-fold {
position: absolute;
width: 100%;
height: 50vh;
left: 0;
bottom: 0;
background: #eaeff1; }
.page-hero .image {
position: relative;
width: 100%;
height: calc(100vh - 120px); }
.page-hero .image img {
width: 100%;
height: 100%;
object-fit: cover; }
.page-hero .title {
display: table;
position: absolute;
width: 100%;
height: calc(100vh - 120px);
top: 0;
left: 0;
padding: 0 120px; }
.page-hero .title .title-con {
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle; }
.page-hero .title .title-con h1 {
margin-bottom: 15px;
font-size: 60px;
line-height: 60px;
color: #ffffff; }
.page-hero .title .title-con h2 {
font-size: 30px;
line-height: 30px;
color: #ffffff; }
.page-hero .title .title-con.black h1, .page-hero .title .title-con.black h2 {
color: #000000; }
.page-intro {
margin-bottom: 60px;
background: #eaeff1; }
.page-intro .intro {
padding: 0 240px;
text-align: center; }
.page-intro .intro .date {
display: inline-block;
margin-bottom: 20px;
font-size: 16px;
line-height: 16px;
font-weight: 300;
color: #999999; }
.page-intro .intro .date ul {
display: inline-block;
padding: 0;
margin: 0;
list-style: none; }
.page-intro .intro .date ul li {
display: inline-block; }
.page-intro .intro .date ul li:after {
display: inline-block;
content: ",";
margin-right: 5px; }
.page-intro .intro .date ul li:last-child:after {
content: ""; }
.page-intro .intro .date ul li a {
color: #000000; }
.page-intro .intro p {
font-size: 24px;
line-height: 42px;
color: #000000; }
.page-intro .intro p a {
color: #dbb1bd; }
.page-text .content {
padding: 0 180px; }
.page-text .content h3 {
font-size: 18px;
line-height: 36px;
font-weight: 700;
color: #000000; }
.page-text .content p {
font-size: 18px;
line-height: 36px;
font-weight: 300;
color: #000000; }
.page-text .content p a {
color: #dbb1bd; }
.page-text-image .content {
padding: 0 180px; }
.page-text-image .content .image-con {
position: relative;
width: 60%; }
.page-text-image .content .image-con img {
width: 100%;
margin-bottom: 30px; }
.page-text-image .content h3 {
font-size: 18px;
line-height: 36px;
font-weight: 700;
color: #000000; }
.page-text-image .content p {
margin: 0;
font-size: 18px;
line-height: 36px;
font-weight: 300;
color: #000000; }
.page-text-image .content p a {
color: #dbb1bd; }
.page-text-image.text-right .image-con {
float: left;
left: -60px; }
.page-text-image.text-left .image-con {
float: right;
right: -60px; }
.page-image .image-con {
padding: 0 120px; }
.page-image .image-con img {
width: 100%;
margin-bottom: 60px; }
.page-image .image-con img:last-child {
margin: 0; }
.page-image.image-fullwidth .image-con {
padding: 0; }
.page-advertorial .advertorial {
width: 240px;
padding: 5px;
margin: 0 auto;
background: #dbb1bd; }
.page-advertorial .advertorial .icon {
float: left;
width: 50px;
height: 100%;
padding: 10px;
margin: -5px 10px 0 0; }
.page-advertorial .advertorial .icon svg {
width: 100%;
height: 100%; }
.page-advertorial .advertorial .icon svg path {
fill: #ffffff; }
.page-advertorial .advertorial .label {
display: block;
font-size: 12px;
line-height: 20px;
color: #ffffff; }
.page-share {
position: relative;
width: 100%;
text-align: center; }
.page-share .title-con {
margin: 60px 0 30px; }
.page-share .title-con h2 {
font-size: 30px;
line-height: 40px;
color: #000000; }
.page-share .title-con h3 {
font-size: 20px;
line-height: 36px;
font-weight: 300;
color: #000000; }
.page-share .share-con {
margin-bottom: 60px; }
.page-share .share-con .share-link {
display: inline-block;
width: 25px;
height: 25px;
margin: 0 5px; }
.page-share .share-con .share-link svg {
width: 100%;
height: 100%; }
.page-share .share-con .share-link svg path, .page-share .share-con .share-link svg polygon, .page-share .share-con .share-link svg rect {
fill: #dbb1bd; }
.page-share .share-con .share-link:hover {
opacity: 0.8; }
.page-share hr {
width: 80px;
height: 1px;
border: 0;
background: #cccccc; }
.page-related {
position: relative;
width: 100%; }
.page-related .shade-fold {
position: absolute;
width: 100%;
height: calc(240px + 60px + 120px);
left: 0;
bottom: 0;
background: #eaeff1; }
.page-related .title-con {
margin-bottom: 60px;
text-align: center; }
.page-related .title-con h2 {
font-size: 30px;
line-height: 40px;
color: #000000; }
.page-related .title-con h3 {
font-size: 20px;
line-height: 36px;
font-weight: 300;
color: #000000; }
.page-related .post-con {
position: relative; }
.page-related .post-con .blog-post {
float: left;
width: calc((1200px - 60px) / 3);
height: 480px;
margin-right: 30px; }
.page-related .post-con .blog-post .blog-thumb {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
background: #000000; }
.page-related .post-con .blog-post .blog-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s cubic-bezier(0.47, 0.18, 0.31, 0.93);
-webkit-transition: opacity 0.3s cubic-bezier(0.47, 0.18, 0.31, 0.93);
-moz-transition: opacity 0.3s cubic-bezier(0.47, 0.18, 0.31, 0.93);
-ms-transition: opacity 0.3s cubic-bezier(0.47, 0.18, 0.31, 0.93);
-o-transition: opacity 0.3s cubic-bezier(0.47, 0.18, 0.31, 0.93); }
.page-related .post-con .blog-post .blog-content {
height: 240px;
padding: 30px;
background: #ffffff; }
.page-related .post-con .blog-post .blog-content .date {
font-size: 16px;
line-height: 16px;
font-weight: 300;
color: #cccccc; }
.page-related .post-con .blog-post .blog-content .date ul {
display: inline-block;
padding: 0;
margin: 0;
list-style: none; }
.page-related .post-con .blog-post .blog-content .date ul li {
display: inline-block; }
.page-related .post-con .blog-post .blog-content .date ul li:after {
display: inline-block;
content: ",";
margin-right: 5px; }
.page-related .post-con .blog-post .blog-content .date ul li:last-child:after {
content: ""; }
.page-related .post-con .blog-post .blog-content h3 {
margin: 15px 0;
font-size: 30px;
line-height: 40px;
font-weight: 700;
color: #000000; }
.page-related .post-con .blog-post .blog-content h4 {
font-size: 20px;
line-height: 30px;
font-weight: 300;
color: #000000; }
.page-related .post-con .blog-post:last-child {
margin-right: 0; }
.page-related .post-con .blog-post:hover .blog-thumb img {
opacity: 0.9; }
.page-related .post-con:after {
content: "";
display: block;
clear: both; }
.page-about {
position: absolute;
width: 100%;
height: 100vh;
padding: 0 60px 60px; }
.page-about .shade-fold {
position: absolute;
width: 100%;
height: 75vh;
left: 0;
bottom: 0;
background: #eaeff1; }
.page-about .content {
position: relative;
width: 100%;
top: 25vh; }
.page-about .content .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; }
.page-about .content .content-con {
width: 100%;
height: 100%;
padding: 0 180px;
text-align: center; }
.page-about .content .content-con h1 {
margin-bottom: 60px;
font-size: 60px;
line-height: 60px;
color: #000000; }
.page-about .content .content-con p {
font-size: 18px;
line-height: 36px;
font-weight: 300;
color: #000000; }
.page-about .content .content-con p a {
color: #dbb1bd; }
.page-contact {
position: absolute;
width: 100%;
height: 100vh;
padding: 0 60px 60px; }
.page-contact .shade-fold {
position: absolute;
width: 100%;
height: 75vh;
left: 0;
bottom: 0;
background: #eaeff1; }
.page-contact .content {
position: relative;
width: 100%;
top: 25vh; }
.page-contact .content .content-con {
width: 100%;
height: 100%;
padding: 0 180px;
text-align: center; }
.page-contact .content .content-con h1 {
margin: -30px 0 60px;
font-size: 60px;
line-height: 60px;
color: #000000; }
.page-contact .content .content-con p {
font-size: 18px;
line-height: 36px;
font-weight: 300;
color: #000000; }
.page-contact .content .content-con p a {
color: #dbb1bd; }
.page-contact .content .content-con .wpcf7 {
width: 600px;
margin: 60px auto 0; }
.page-contact .content .content-con .wpcf7 p:after {
content: "";
display: block;
clear: both; }
.page-contact .content .content-con .wpcf7 br {
display: none; }
.page-contact .content .content-con .wpcf7 .wpcf7-form-control-wrap {
float: left;
display: block;
width: 50%;
padding: 0 5px;
margin-bottom: 10px; }
.page-contact .content .content-con .wpcf7 .wpcf7-form-control-wrap.your-message {
float: right;
margin-bottom: 0; }
.page-contact .content .content-con .wpcf7 .wpcf7-form-control-wrap .wpcf7-text {
float: left;
width: 100%;
height: 45px;
padding: 0 15px;
border: 0;
background: #ffffff;
outline: none;
font-size: 14px;
color: #000000; }
.page-contact .content .content-con .wpcf7 .wpcf7-form-control-wrap .wpcf7-textarea {
width: 100%;
height: 100px;
padding: 15px;
border: 0;
background: #ffffff;
outline: none;
resize: none;
font-size: 14px;
color: #000000; }
.page-contact .content .content-con .wpcf7 .wpcf7-form-control-wrap .wpcf7-not-valid {
border: 1px solid #dbb1bd; }
.page-contact .content .content-con .wpcf7 .wpcf7-submit {
height: 45px;
padding: 0 45px;
margin: 0 auto;
border: 0;
background: #000000;
outline: none;
font-size: 14px;
color: #ffffff; }
.page-contact .content .content-con .wpcf7 .wpcf7-not-valid-tip {
display: none; }
.page-contact .content .content-con .wpcf7 .wpcf7-validation-errors, .page-contact .content .content-con .wpcf7 .wpcf7-mail-sent-ok {
border: 0; }
.page-contact .content .content-con .wpcf7 .ajax-loader {
display: none; }
/*//////////////////// */
/*//// RESPONSIVE //// */
/*//////////////////// */
@media only screen and (max-width: 1500px) {
.container {
width: 1200px; } }
@media only screen and (max-width: 1300px) {
.container {
width: 1000px; }
.page-blog .home-column.right-column.absolute {
right: calc( (100vw - 1000px) / 2 ); }
.page-blog .home-column .article-con .blog-post {
height: 380px; }
.page-blog .home-column .article-con .blog-post .blog-thumb {
height: 180px; }
.page-blog .home-column .article-con .blog-post .blog-content {
height: 200px;
padding: 20px; }
.page-blog .home-column .article-con .blog-post .blog-content h3 {
font-size: 24px;
line-height: 30px; }
.page-blog .home-column .article-con .blog-post .blog-content h4 {
font-size: 18px;
line-height: 26px; }
.page-blog .home-column .article-con .blog-post.large {
height: 600px; }
.page-blog .home-column .article-con .blog-post.large .blog-thumb {
height: 400px; }
.page-blog .home-column .article-con .blog-post.large .blog-content h3 {
font-size: 36px;
line-height: 42px; }
.page-blog .home-column .article-con .blog-post.large .blog-content h4 {
font-size: 22px;
line-height: 34px; }
.page-blog .home-column .extra-con {
padding: 20px; }
.page-blog .home-column .extra-con h2 {
margin-bottom: 15px;
font-size: 22px;
line-height: 22px; }
.page-blog .home-column .extra-con p {
font-size: 16px;
line-height: 26px; }
.page-blog .home-column .extra-con .links .list-link {
font-size: 16px;
line-height: 26px; }
.page-blog .home-column .extra-con.featured-con ul .blog-post a .number, .page-blog .home-column .extra-con.featured-con ul .blog-post a h3 {
font-size: 16px;
line-height: 26px; }
.page-intro .intro p {
font-size: 22px;
line-height: 36px; }
.page-related .shade-fold {
height: calc(220px + 60px + 120px); }
.page-related .post-con .blog-post {
width: calc((1000px - 60px) / 3);
height: 440px; }
.page-related .post-con .blog-post .blog-thumb {
height: 200px; }
.page-related .post-con .blog-post .blog-content h3 {
font-size: 24px;
line-height: 34px; } }
@media only screen and (max-width: 1100px) {
.container {
width: 900px; }
nav .inner-nav .menu .menu-item {
margin-right: 20px; }
nav .inner-nav .filter-nav .filter {
margin: 10px 10px; }
.home-nav .nav-row .filter-nav .filter {
margin: 10px 10px; }
.page-blog .home-column.left-column {
width: calc( 100% - 300px ); }
.page-blog .home-column.right-column {
width: 300px; }
.page-blog .home-column.right-column.absolute {
right: calc( (100vw - 900px) / 2 ); }
.page-blog .home-column .article-con .blog-post {
height: 360px; }
.page-blog .home-column .article-con .blog-post .blog-thumb {
height: 160px; }
.page-blog .home-column .article-con .blog-post .blog-content {
height: 200px;
padding: 20px; }
.page-blog .home-column .article-con .blog-post .blog-content h3 {
font-size: 21px;
line-height: 28px; }
.page-blog .home-column .article-con .blog-post .blog-content h4 {
font-size: 16px;
line-height: 24px; }
.page-blog .home-column .article-con .blog-post.large {
height: 560px; }
.page-blog .home-column .article-con .blog-post.large .blog-thumb {
height: 360px; }
.page-blog .home-column .article-con .blog-post.large .blog-content h3 {
font-size: 32px;
line-height: 38px; }
.page-blog .home-column .article-con .blog-post.large .blog-content h4 {
font-size: 20px;
line-height: 30px; }
.page-blog .home-column .portrait {
height: 180px; }
.page-intro .intro {
padding: 0 180px; }
.page-intro .intro p {
font-size: 20px;
line-height: 32px; }
.page-text .content {
padding: 0 180px; }
.page-text-image .content {
padding: 0 180px; }
.page-image .image-con {
padding: 0 120px; }
.page-related .shade-fold {
height: calc(200px + 60px + 120px); }
.page-related .post-con .blog-post {
width: calc((900px - 60px) / 3);
height: 400px; }
.page-related .post-con .blog-post .blog-thumb {
height: 180px; }
.page-related .post-con .blog-post .blog-content {
height: 220px; }
.page-related .post-con .blog-post .blog-content h3 {
font-size: 21px;
line-height: 28px; }
.page-related .post-con .blog-post .blog-content h4 {
font-size: 18px;
line-height: 26px; }
.page-about .content .content-con {
padding: 0 120px; }
.page-contact .content .content-con {
padding: 0 120px; } }
@media only screen and (max-width: 1000px) {
.container {
width: 700px; }
nav .inner-nav .menu .menu-item {
margin-right: 10px; }
nav .inner-nav .filter-nav .filter {
margin: 10px 5px; }
nav .inner-nav .filter-nav .filter .filter-btn .label {
font-size: 7px; }
.home-nav .nav-row .filter-nav .filter {
margin: 10px 5px; }
.home-nav .nav-row .filter-nav .filter .filter-btn .label {
font-size: 7px; }
.page-blog .home-column.left-column {
width: calc( 100% - 215px ); }
.page-blog .home-column.right-column {
width: 215px; }
.page-blog .home-column.right-column.absolute {
right: calc( (100vw - 700px) / 2 ); }
.page-blog .home-column .article-con .blog-post {
height: 320px;
width: calc( (100% - 40px) / 2 );
margin: 0 20px 20px 0; }
.page-blog .home-column .article-con .blog-post .blog-thumb {
height: 120px; }
.page-blog .home-column .article-con .blog-post .blog-content h3 {
font-size: 20px;
line-height: 28px; }
.page-blog .home-column .article-con .blog-post .blog-content h4 {
font-size: 15px;
line-height: 24px; }
.page-blog .home-column .article-con .blog-post.large {
height: 500px;
width: calc(100% - 20px); }
.page-blog .home-column .article-con .blog-post.large .blog-thumb {
height: 300px; }
.page-blog .home-column .extra-con {
margin-bottom: 20px; }
.page-blog .home-column .extra-con form .input {
width: 100%;
border-right: 1px solid #eaeff1;
border-bottom: 0;
text-align: center; }
.page-blog .home-column .extra-con form .submit {
float: none;
width: 100%; }
.page-blog .home-column .portrait {
height: 130px; }
.page-intro .intro {
padding: 0 120px; }
.page-intro .intro p {
font-size: 20px;
line-height: 32px; }
.page-text .content {
padding: 0 120px; }
.page-text-image .content {
padding: 0 120px; }
.page-image .image-con {
padding: 0 60px; }
.page-related .shade-fold {
height: calc(130px + 60px + 120px); }
.page-related .post-con .blog-post {
width: calc((700px - 60px) / 3);
height: 320px; }
.page-related .post-con .blog-post .blog-thumb {
height: 140px; }
.page-related .post-con .blog-post .blog-content {
height: 180px;
padding: 20px; }
.page-related .post-con .blog-post .blog-content .date {
font-size: 14px;
line-height: 14px; }
.page-related .post-con .blog-post .blog-content h3 {
font-size: 16px;
line-height: 24px; }
.page-related .post-con .blog-post .blog-content h4 {
font-size: 16px;
line-height: 24px; }
.page-about .content .content-con {
padding: 0 60px; }
.page-contact .content .content-con {
padding: 0 60px; } }
@media only screen and (max-width: 768px) {
.container {
width: 100%;
padding: 0 30px; }
nav {
background: #ffffff; }
nav .inner-nav .filter-nav {
display: none; }
nav .inner-nav .menu .menu-item {
margin-right: 30px; }
.page-blog .home-column.left-column {
width: calc(100% + 20px); }
.page-blog .home-column.right-column {
display: none; }
.page-blog .home-column .article-con .blog-post {
height: calc(25vw + 200px); }
.page-blog .home-column .article-con .blog-post .blog-thumb {
height: 25vw; }
.page-blog .home-column .article-con .blog-post.large {
height: calc(50vw + 200px); }
.page-blog .home-column .article-con .blog-post.large .blog-thumb {
height: 50vw; }
.page-hero .title .title-con h1 {
font-size: 50px;
line-height: 50px; }
.page-intro .intro {
padding: 0 60px; }
.page-intro .intro p {
font-size: 18px;
line-height: 28px; }
.page-text .content {
padding: 0 60px; }
.page-text .content p {
font-size: 16px;
line-height: 30px; }
.page-text-image .content {
padding: 0 60px; }
.page-text-image .content p {
font-size: 16px;
line-height: 30px; }
.page-text-image.text-right .image-con {
left: -30px; }
.page-text-image.text-left .image-con {
right: -30px; }
.page-image .image-con {
padding: 0 30px; }
.page-related .shade-fold {
height: calc(12vw + 120px + 120px); }
.page-related .post-con .blog-post {
width: calc((100% - 30px) / 2);
height: calc(25vw + 180px); }
.page-related .post-con .blog-post .blog-thumb {
height: 25vw; }
.page-related .post-con .blog-post .blog-content {
height: 180px;
padding: 20px; }
.page-related .post-con .blog-post .blog-content .date {
font-size: 14px;
line-height: 14px; }
.page-related .post-con .blog-post .blog-content h3 {
font-size: 16px;
line-height: 24px; }
.page-related .post-con .blog-post .blog-content h4 {
font-size: 16px;
line-height: 24px; }
.page-related .post-con .blog-post:nth-child(2) {
margin: 0; }
.page-related .post-con .blog-post:last-child {
display: none; }
.page-about .shade-fold {
height: 100%;
bottom: auto;
top: 25vh; }
.page-about .content .portrait {
margin-bottom: 30px; }
.page-about .content .content-con {
padding: 0; }
.page-about .content .content-con h1 {
margin-bottom: 30px;
font-size: 40px;
line-height: 40px; }
.page-about .content .content-con p {
font-size: 16px;
line-height: 30px; }
.page-contact .shade-fold {
height: 100%;
bottom: auto;
top: 25vh; }
.page-contact .content .content-con {
padding: 0; }
.page-contact .content .content-con .wpcf7 {
width: 100%; }
.page-contact .content .content-con .wpcf7 .wpcf7-form-control-wrap {
width: 100%; } }
@media only screen and (max-width: 580px) {
.page-blog .home-column.left-column {
width: 100%; }
.page-blog .home-column.right-column {
display: none; }
.page-blog .home-column .article-con .blog-post {
width: 100%;
height: auto;
margin: 0 0 20px 0; }
.page-blog .home-column .article-con .blog-post .blog-thumb {
height: 50vw; }
.page-blog .home-column .article-con .blog-post .blog-content {
height: auto; }
.page-blog .home-column .article-con .blog-post .blog-content h3 {
font-size: 26px;
line-height: 36px; }
.page-blog .home-column .article-con .blog-post .blog-content h4 {
font-size: 18px;
line-height: 24px; }
.page-blog .home-column .article-con .blog-post.large {
width: 100%;
height: auto; }
.page-blog .home-column .article-con .blog-post.large .blog-content {
height: auto; }
.page-blog .home-column .article-con .blog-post.large .blog-content h3 {
font-size: 26px;
line-height: 36px; }
.page-blog .home-column .article-con .blog-post.large .blog-content h4 {
font-size: 18px;
line-height: 24px; }
.page-hero {
height: calc(60vw + 60px);
padding: 0 30px 60px; }
.page-hero .shade-fold {
height: calc(50% + 30px); }
.page-hero .image {
height: 60vw; }
.page-hero .title {
height: 60vw;
padding: 0 60px; }
.page-hero .title .title-con h1 {
font-size: 40px;
line-height: 40px; }
.page-hero .title .title-con h2 {
font-size: 24px;
line-height: 34px; }
.page-intro .intro {
padding: 0; }
.page-text .content {
padding: 0; }
.page-text-image .content {
padding: 0; }
.page-text-image .content .image-con {
width: 100%; }
.page-text-image.text-right .image-con {
left: 0; }
.page-text-image.text-left .image-con {
right: 0; }
.page-image .image-con {
padding: 0; }
.page-related .shade-fold {
height: calc(100% - 135px - 25vw); }
.page-related .post-con .blog-post {
width: 100%;
height: auto;
margin: 0 0 30px; }
.page-related .post-con .blog-post .blog-thumb {
height: 50vw; }
.page-related .post-con .blog-post .blog-content {
height: auto;
padding: 20px; }
.page-related .post-con .blog-post .blog-content .date {
font-size: 14px;
line-height: 14px; }
.page-related .post-con .blog-post .blog-content h3 {
font-size: 16px;
line-height: 24px; }
.page-related .post-con .blog-post .blog-content h4 {
font-size: 16px;
line-height: 24px; }
.page-related .post-con .blog-post:last-child {
display: block; } }
/*# sourceMappingURL=style.css.map */