File: D:/HostingSpaces/SBogers10/honger7.komma.pro/wwwroot/css/style.css
/* ==========================================================================
Config settings
@mixin ========================================================================= */
/**
* Define grid columns
*
* The inner grid is the section where the content is
* The outer grid is the inner grid with extra margin columns on each side
*/
/**
* Define breakpoint for given formats
*/
/* Bourbon 4.0.2
* http://bourbon.io
* Copyright 2011-2014 thoughtbot, inc.
* MIT License */
/* ==========================================================================
Font related functions
@mixin ========================================================================= */
/**
* Add some functions for readability
* Return font-weight based on name
*/
/* ==========================================================================
Functions used in grid calculation
@mixin ========================================================================= */
/**
* This is where the magic happens
* Return percentage based on amount of columns
* Use parent column size to adjust the origin
*/
/**
* Default function for columns
* Return as percentage
*/
/**
* Return as viewport width
*/
/* ==========================================================================
Basic style settings
@mixin ========================================================================= */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*
* Set up the body
*
* 1. This is the base for al rem units
*/
html {
font-size: 18px;
line-height: 1.6;
}
/**
* Default display for images is block to lose the extra margin below the image
*/
img {
display: block;
}
/**
* Set default animation for placeholder
*/
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
transition: opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s;
transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1;
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
transition: opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s;
transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
opacity: 1;
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
transition: opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s;
transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
opacity: 1;
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
transition: opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s;
transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s, -webkit-transform 0.3s;
}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
opacity: 0;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
opacity: 0;
transform: translate3d(20px, 0, 0);
}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
opacity: 0;
transform: translate3d(20px, 0, 0);
}
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
opacity: 0;
transform: translate3d(20px, 0, 0);
}
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 0.5;
}
/* ==========================================================================
Grid
@mixin ========================================================================= */
/**
* Grid row
*
* 1. Remove inter-cell whitespace
* 2. Force no-wrap
*/
.contained-layout {
position: relative;
width: 100%;
max-width: 1680px;
margin: 0 auto;
font-size: 0;
white-space: nowrap;
}
.contained-layout .spacer {
width: 100%;
height: 0;
margin-bottom: 7.14285714%;
}
@media screen and (max-width: 768px) {
.contained-layout {
white-space: normal;
}
}
/* Columns
@mixin ========================================================================= */
/*
* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-1 {
width: 7.14285714%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-1 {
font-size: 20px;
}
}
.col-1.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-1 > .col-1 {
width: 100%;
}
.col-1 > .col-2 {
width: 200%;
}
.col-1 > .col-3 {
width: 300%;
}
.col-1 > .col-4 {
width: 400%;
}
.col-1 > .col-5 {
width: 500%;
}
.col-1 > .col-6 {
width: 600%;
}
.col-1 > .col-7 {
width: 700%;
}
.col-1 > .col-8 {
width: 800%;
}
.col-1 > .col-9 {
width: 900%;
}
.col-1 > .col-10 {
width: 1000%;
}
.col-1 > .col-11 {
width: 1100%;
}
.col-1 > .col-12 {
width: 1200%;
}
.col-1 > .col-13 {
width: 1300%;
}
.col-1 > .col-14 {
width: 1400%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-2 {
width: 14.28571429%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-2 {
font-size: 20px;
}
}
.col-2.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-2 > .col-1 {
width: 50%;
}
.col-2 > .col-2 {
width: 100%;
}
.col-2 > .col-3 {
width: 150%;
}
.col-2 > .col-4 {
width: 200%;
}
.col-2 > .col-5 {
width: 250%;
}
.col-2 > .col-6 {
width: 300%;
}
.col-2 > .col-7 {
width: 350%;
}
.col-2 > .col-8 {
width: 400%;
}
.col-2 > .col-9 {
width: 450%;
}
.col-2 > .col-10 {
width: 500%;
}
.col-2 > .col-11 {
width: 550%;
}
.col-2 > .col-12 {
width: 600%;
}
.col-2 > .col-13 {
width: 650%;
}
.col-2 > .col-14 {
width: 700%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-3 {
width: 21.42857143%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-3 {
font-size: 20px;
}
}
.col-3.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-3 > .col-1 {
width: 33.33333333%;
}
.col-3 > .col-2 {
width: 66.66666667%;
}
.col-3 > .col-3 {
width: 100%;
}
.col-3 > .col-4 {
width: 133.33333333%;
}
.col-3 > .col-5 {
width: 166.66666667%;
}
.col-3 > .col-6 {
width: 200%;
}
.col-3 > .col-7 {
width: 233.33333333%;
}
.col-3 > .col-8 {
width: 266.66666667%;
}
.col-3 > .col-9 {
width: 300%;
}
.col-3 > .col-10 {
width: 333.33333333%;
}
.col-3 > .col-11 {
width: 366.66666667%;
}
.col-3 > .col-12 {
width: 400%;
}
.col-3 > .col-13 {
width: 433.33333333%;
}
.col-3 > .col-14 {
width: 466.66666667%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-4 {
width: 28.57142857%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-4 {
font-size: 20px;
}
}
.col-4.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-4 > .col-1 {
width: 25%;
}
.col-4 > .col-2 {
width: 50%;
}
.col-4 > .col-3 {
width: 75%;
}
.col-4 > .col-4 {
width: 100%;
}
.col-4 > .col-5 {
width: 125%;
}
.col-4 > .col-6 {
width: 150%;
}
.col-4 > .col-7 {
width: 175%;
}
.col-4 > .col-8 {
width: 200%;
}
.col-4 > .col-9 {
width: 225%;
}
.col-4 > .col-10 {
width: 250%;
}
.col-4 > .col-11 {
width: 275%;
}
.col-4 > .col-12 {
width: 300%;
}
.col-4 > .col-13 {
width: 325%;
}
.col-4 > .col-14 {
width: 350%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-5 {
width: 35.71428571%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-5 {
font-size: 20px;
}
}
.col-5.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-5 > .col-1 {
width: 20%;
}
.col-5 > .col-2 {
width: 40%;
}
.col-5 > .col-3 {
width: 60%;
}
.col-5 > .col-4 {
width: 80%;
}
.col-5 > .col-5 {
width: 100%;
}
.col-5 > .col-6 {
width: 120%;
}
.col-5 > .col-7 {
width: 140%;
}
.col-5 > .col-8 {
width: 160%;
}
.col-5 > .col-9 {
width: 180%;
}
.col-5 > .col-10 {
width: 200%;
}
.col-5 > .col-11 {
width: 220%;
}
.col-5 > .col-12 {
width: 240%;
}
.col-5 > .col-13 {
width: 260%;
}
.col-5 > .col-14 {
width: 280%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-6 {
width: 42.85714286%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-6 {
font-size: 20px;
}
}
.col-6.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-6 > .col-1 {
width: 16.66666667%;
}
.col-6 > .col-2 {
width: 33.33333333%;
}
.col-6 > .col-3 {
width: 50%;
}
.col-6 > .col-4 {
width: 66.66666667%;
}
.col-6 > .col-5 {
width: 83.33333333%;
}
.col-6 > .col-6 {
width: 100%;
}
.col-6 > .col-7 {
width: 116.66666667%;
}
.col-6 > .col-8 {
width: 133.33333333%;
}
.col-6 > .col-9 {
width: 150%;
}
.col-6 > .col-10 {
width: 166.66666667%;
}
.col-6 > .col-11 {
width: 183.33333333%;
}
.col-6 > .col-12 {
width: 200%;
}
.col-6 > .col-13 {
width: 216.66666667%;
}
.col-6 > .col-14 {
width: 233.33333333%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-7 {
width: 50%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-7 {
font-size: 20px;
}
}
.col-7.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-7 > .col-1 {
width: 14.28571429%;
}
.col-7 > .col-2 {
width: 28.57142857%;
}
.col-7 > .col-3 {
width: 42.85714286%;
}
.col-7 > .col-4 {
width: 57.14285714%;
}
.col-7 > .col-5 {
width: 71.42857143%;
}
.col-7 > .col-6 {
width: 85.71428571%;
}
.col-7 > .col-7 {
width: 100%;
}
.col-7 > .col-8 {
width: 114.28571429%;
}
.col-7 > .col-9 {
width: 128.57142857%;
}
.col-7 > .col-10 {
width: 142.85714286%;
}
.col-7 > .col-11 {
width: 157.14285714%;
}
.col-7 > .col-12 {
width: 171.42857143%;
}
.col-7 > .col-13 {
width: 185.71428571%;
}
.col-7 > .col-14 {
width: 200%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-8 {
width: 57.14285714%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-8 {
font-size: 20px;
}
}
.col-8.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-8 > .col-1 {
width: 12.5%;
}
.col-8 > .col-2 {
width: 25%;
}
.col-8 > .col-3 {
width: 37.5%;
}
.col-8 > .col-4 {
width: 50%;
}
.col-8 > .col-5 {
width: 62.5%;
}
.col-8 > .col-6 {
width: 75%;
}
.col-8 > .col-7 {
width: 87.5%;
}
.col-8 > .col-8 {
width: 100%;
}
.col-8 > .col-9 {
width: 112.5%;
}
.col-8 > .col-10 {
width: 125%;
}
.col-8 > .col-11 {
width: 137.5%;
}
.col-8 > .col-12 {
width: 150%;
}
.col-8 > .col-13 {
width: 162.5%;
}
.col-8 > .col-14 {
width: 175%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-9 {
width: 64.28571429%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-9 {
font-size: 20px;
}
}
.col-9.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-9 > .col-1 {
width: 11.11111111%;
}
.col-9 > .col-2 {
width: 22.22222222%;
}
.col-9 > .col-3 {
width: 33.33333333%;
}
.col-9 > .col-4 {
width: 44.44444444%;
}
.col-9 > .col-5 {
width: 55.55555556%;
}
.col-9 > .col-6 {
width: 66.66666667%;
}
.col-9 > .col-7 {
width: 77.77777778%;
}
.col-9 > .col-8 {
width: 88.88888889%;
}
.col-9 > .col-9 {
width: 100%;
}
.col-9 > .col-10 {
width: 111.11111111%;
}
.col-9 > .col-11 {
width: 122.22222222%;
}
.col-9 > .col-12 {
width: 133.33333333%;
}
.col-9 > .col-13 {
width: 144.44444444%;
}
.col-9 > .col-14 {
width: 155.55555556%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-10 {
width: 71.42857143%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-10 {
font-size: 20px;
}
}
.col-10.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-10 > .col-1 {
width: 10%;
}
.col-10 > .col-2 {
width: 20%;
}
.col-10 > .col-3 {
width: 30%;
}
.col-10 > .col-4 {
width: 40%;
}
.col-10 > .col-5 {
width: 50%;
}
.col-10 > .col-6 {
width: 60%;
}
.col-10 > .col-7 {
width: 70%;
}
.col-10 > .col-8 {
width: 80%;
}
.col-10 > .col-9 {
width: 90%;
}
.col-10 > .col-10 {
width: 100%;
}
.col-10 > .col-11 {
width: 110%;
}
.col-10 > .col-12 {
width: 120%;
}
.col-10 > .col-13 {
width: 130%;
}
.col-10 > .col-14 {
width: 140%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-11 {
width: 78.57142857%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-11 {
font-size: 20px;
}
}
.col-11.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-11 > .col-1 {
width: 9.09090909%;
}
.col-11 > .col-2 {
width: 18.18181818%;
}
.col-11 > .col-3 {
width: 27.27272727%;
}
.col-11 > .col-4 {
width: 36.36363636%;
}
.col-11 > .col-5 {
width: 45.45454545%;
}
.col-11 > .col-6 {
width: 54.54545455%;
}
.col-11 > .col-7 {
width: 63.63636364%;
}
.col-11 > .col-8 {
width: 72.72727273%;
}
.col-11 > .col-9 {
width: 81.81818182%;
}
.col-11 > .col-10 {
width: 90.90909091%;
}
.col-11 > .col-11 {
width: 100%;
}
.col-11 > .col-12 {
width: 109.09090909%;
}
.col-11 > .col-13 {
width: 118.18181818%;
}
.col-11 > .col-14 {
width: 127.27272727%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-12 {
width: 85.71428571%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-12 {
font-size: 20px;
}
}
.col-12.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-12 > .col-1 {
width: 8.33333333%;
}
.col-12 > .col-2 {
width: 16.66666667%;
}
.col-12 > .col-3 {
width: 25%;
}
.col-12 > .col-4 {
width: 33.33333333%;
}
.col-12 > .col-5 {
width: 41.66666667%;
}
.col-12 > .col-6 {
width: 50%;
}
.col-12 > .col-7 {
width: 58.33333333%;
}
.col-12 > .col-8 {
width: 66.66666667%;
}
.col-12 > .col-9 {
width: 75%;
}
.col-12 > .col-10 {
width: 83.33333333%;
}
.col-12 > .col-11 {
width: 91.66666667%;
}
.col-12 > .col-12 {
width: 100%;
}
.col-12 > .col-13 {
width: 108.33333333%;
}
.col-12 > .col-14 {
width: 116.66666667%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-13 {
width: 92.85714286%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-13 {
font-size: 20px;
}
}
.col-13.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-13 > .col-1 {
width: 7.69230769%;
}
.col-13 > .col-2 {
width: 15.38461538%;
}
.col-13 > .col-3 {
width: 23.07692308%;
}
.col-13 > .col-4 {
width: 30.76923077%;
}
.col-13 > .col-5 {
width: 38.46153846%;
}
.col-13 > .col-6 {
width: 46.15384615%;
}
.col-13 > .col-7 {
width: 53.84615385%;
}
.col-13 > .col-8 {
width: 61.53846154%;
}
.col-13 > .col-9 {
width: 69.23076923%;
}
.col-13 > .col-10 {
width: 76.92307692%;
}
.col-13 > .col-11 {
width: 84.61538462%;
}
.col-13 > .col-12 {
width: 92.30769231%;
}
.col-13 > .col-13 {
width: 100%;
}
.col-13 > .col-14 {
width: 107.69230769%;
}
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
*/
.col-14 {
width: 100%;
position: relative;
vertical-align: top;
display: inline-block;
margin: 0 auto;
white-space: normal;
font-size: 18px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/
}
@media screen and (min-width: 1601px) {
.col-14 {
font-size: 20px;
}
}
.col-14.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.col-14 > .col-1 {
width: 7.14285714%;
}
.col-14 > .col-2 {
width: 14.28571429%;
}
.col-14 > .col-3 {
width: 21.42857143%;
}
.col-14 > .col-4 {
width: 28.57142857%;
}
.col-14 > .col-5 {
width: 35.71428571%;
}
.col-14 > .col-6 {
width: 42.85714286%;
}
.col-14 > .col-7 {
width: 50%;
}
.col-14 > .col-8 {
width: 57.14285714%;
}
.col-14 > .col-9 {
width: 64.28571429%;
}
.col-14 > .col-10 {
width: 71.42857143%;
}
.col-14 > .col-11 {
width: 78.57142857%;
}
.col-14 > .col-12 {
width: 85.71428571%;
}
.col-14 > .col-13 {
width: 92.85714286%;
}
.col-14 > .col-14 {
width: 100%;
}
/* Column offset
@mixin ========================================================================= */
.offset-1 {
margin-left: 7.14285714%;
}
.offset-2 {
margin-left: 14.28571429%;
}
.offset-3 {
margin-left: 21.42857143%;
}
.offset-4 {
margin-left: 28.57142857%;
}
.offset-5 {
margin-left: 35.71428571%;
}
.offset-6 {
margin-left: 42.85714286%;
}
.offset-7 {
margin-left: 50%;
}
.offset-8 {
margin-left: 57.14285714%;
}
.offset-9 {
margin-left: 64.28571429%;
}
.offset-10 {
margin-left: 71.42857143%;
}
.offset-11 {
margin-left: 78.57142857%;
}
.offset-12 {
margin-left: 85.71428571%;
}
.offset-13 {
margin-left: 92.85714286%;
}
.offset-14 {
margin-left: 100%;
}
/* Media queries
@mixin ========================================================================= */
/*
* Define widths for different screen sizes
*/
@media screen and (min-width: 1601px) {
.col-xl-0 {
width: 0%;
}
.offset-xl-0 {
margin-left: 0%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-0 {
width: 0%;
}
.offset-lg-0 {
margin-left: 0%;
}
}
@media screen and (max-width: 1080px) {
.col-md-0 {
width: 0%;
}
.offset-md-0 {
margin-left: 0%;
}
}
@media screen and (max-width: 768px) {
.col-sm-0 {
width: 0%;
}
.offset-sm-0 {
margin-left: 0%;
}
}
@media screen and (max-width: 500px) {
.col-xs-0 {
width: 0%;
}
.offset-xs-0 {
margin-left: 0%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-1 {
width: 8.33333333%;
}
.offset-xl-1 {
margin-left: 8.33333333%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-1 {
width: 8.33333333%;
}
.offset-lg-1 {
margin-left: 8.33333333%;
}
}
@media screen and (max-width: 1080px) {
.col-md-1 {
width: 8.33333333%;
}
.offset-md-1 {
margin-left: 8.33333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-1 {
width: 8.33333333%;
}
.offset-sm-1 {
margin-left: 8.33333333%;
}
}
@media screen and (max-width: 500px) {
.col-xs-1 {
width: 8.33333333%;
}
.offset-xs-1 {
margin-left: 8.33333333%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-2 {
width: 16.66666667%;
}
.offset-xl-2 {
margin-left: 16.66666667%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-2 {
width: 16.66666667%;
}
.offset-lg-2 {
margin-left: 16.66666667%;
}
}
@media screen and (max-width: 1080px) {
.col-md-2 {
width: 16.66666667%;
}
.offset-md-2 {
margin-left: 16.66666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-2 {
width: 16.66666667%;
}
.offset-sm-2 {
margin-left: 16.66666667%;
}
}
@media screen and (max-width: 500px) {
.col-xs-2 {
width: 16.66666667%;
}
.offset-xs-2 {
margin-left: 16.66666667%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-3 {
width: 25%;
}
.offset-xl-3 {
margin-left: 25%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-3 {
width: 25%;
}
.offset-lg-3 {
margin-left: 25%;
}
}
@media screen and (max-width: 1080px) {
.col-md-3 {
width: 25%;
}
.offset-md-3 {
margin-left: 25%;
}
}
@media screen and (max-width: 768px) {
.col-sm-3 {
width: 25%;
}
.offset-sm-3 {
margin-left: 25%;
}
}
@media screen and (max-width: 500px) {
.col-xs-3 {
width: 25%;
}
.offset-xs-3 {
margin-left: 25%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-4 {
width: 33.33333333%;
}
.offset-xl-4 {
margin-left: 33.33333333%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-4 {
width: 33.33333333%;
}
.offset-lg-4 {
margin-left: 33.33333333%;
}
}
@media screen and (max-width: 1080px) {
.col-md-4 {
width: 33.33333333%;
}
.offset-md-4 {
margin-left: 33.33333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
width: 33.33333333%;
}
.offset-sm-4 {
margin-left: 33.33333333%;
}
}
@media screen and (max-width: 500px) {
.col-xs-4 {
width: 33.33333333%;
}
.offset-xs-4 {
margin-left: 33.33333333%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-5 {
width: 41.66666667%;
}
.offset-xl-5 {
margin-left: 41.66666667%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-5 {
width: 41.66666667%;
}
.offset-lg-5 {
margin-left: 41.66666667%;
}
}
@media screen and (max-width: 1080px) {
.col-md-5 {
width: 41.66666667%;
}
.offset-md-5 {
margin-left: 41.66666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-5 {
width: 41.66666667%;
}
.offset-sm-5 {
margin-left: 41.66666667%;
}
}
@media screen and (max-width: 500px) {
.col-xs-5 {
width: 41.66666667%;
}
.offset-xs-5 {
margin-left: 41.66666667%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-6 {
width: 50%;
}
.offset-xl-6 {
margin-left: 50%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-6 {
width: 50%;
}
.offset-lg-6 {
margin-left: 50%;
}
}
@media screen and (max-width: 1080px) {
.col-md-6 {
width: 50%;
}
.offset-md-6 {
margin-left: 50%;
}
}
@media screen and (max-width: 768px) {
.col-sm-6 {
width: 50%;
}
.offset-sm-6 {
margin-left: 50%;
}
}
@media screen and (max-width: 500px) {
.col-xs-6 {
width: 50%;
}
.offset-xs-6 {
margin-left: 50%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-7 {
width: 58.33333333%;
}
.offset-xl-7 {
margin-left: 58.33333333%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-7 {
width: 58.33333333%;
}
.offset-lg-7 {
margin-left: 58.33333333%;
}
}
@media screen and (max-width: 1080px) {
.col-md-7 {
width: 58.33333333%;
}
.offset-md-7 {
margin-left: 58.33333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-7 {
width: 58.33333333%;
}
.offset-sm-7 {
margin-left: 58.33333333%;
}
}
@media screen and (max-width: 500px) {
.col-xs-7 {
width: 58.33333333%;
}
.offset-xs-7 {
margin-left: 58.33333333%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-8 {
width: 66.66666667%;
}
.offset-xl-8 {
margin-left: 66.66666667%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-8 {
width: 66.66666667%;
}
.offset-lg-8 {
margin-left: 66.66666667%;
}
}
@media screen and (max-width: 1080px) {
.col-md-8 {
width: 66.66666667%;
}
.offset-md-8 {
margin-left: 66.66666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-8 {
width: 66.66666667%;
}
.offset-sm-8 {
margin-left: 66.66666667%;
}
}
@media screen and (max-width: 500px) {
.col-xs-8 {
width: 66.66666667%;
}
.offset-xs-8 {
margin-left: 66.66666667%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-9 {
width: 75%;
}
.offset-xl-9 {
margin-left: 75%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-9 {
width: 75%;
}
.offset-lg-9 {
margin-left: 75%;
}
}
@media screen and (max-width: 1080px) {
.col-md-9 {
width: 75%;
}
.offset-md-9 {
margin-left: 75%;
}
}
@media screen and (max-width: 768px) {
.col-sm-9 {
width: 75%;
}
.offset-sm-9 {
margin-left: 75%;
}
}
@media screen and (max-width: 500px) {
.col-xs-9 {
width: 75%;
}
.offset-xs-9 {
margin-left: 75%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-10 {
width: 83.33333333%;
}
.offset-xl-10 {
margin-left: 83.33333333%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-10 {
width: 83.33333333%;
}
.offset-lg-10 {
margin-left: 83.33333333%;
}
}
@media screen and (max-width: 1080px) {
.col-md-10 {
width: 83.33333333%;
}
.offset-md-10 {
margin-left: 83.33333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-10 {
width: 83.33333333%;
}
.offset-sm-10 {
margin-left: 83.33333333%;
}
}
@media screen and (max-width: 500px) {
.col-xs-10 {
width: 83.33333333%;
}
.offset-xs-10 {
margin-left: 83.33333333%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-11 {
width: 91.66666667%;
}
.offset-xl-11 {
margin-left: 91.66666667%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-11 {
width: 91.66666667%;
}
.offset-lg-11 {
margin-left: 91.66666667%;
}
}
@media screen and (max-width: 1080px) {
.col-md-11 {
width: 91.66666667%;
}
.offset-md-11 {
margin-left: 91.66666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-11 {
width: 91.66666667%;
}
.offset-sm-11 {
margin-left: 91.66666667%;
}
}
@media screen and (max-width: 500px) {
.col-xs-11 {
width: 91.66666667%;
}
.offset-xs-11 {
margin-left: 91.66666667%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-12 {
width: 100%;
}
.offset-xl-12 {
margin-left: 100%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-12 {
width: 100%;
}
.offset-lg-12 {
margin-left: 100%;
}
}
@media screen and (max-width: 1080px) {
.col-md-12 {
width: 100%;
}
.offset-md-12 {
margin-left: 100%;
}
}
@media screen and (max-width: 768px) {
.col-sm-12 {
width: 100%;
}
.offset-sm-12 {
margin-left: 100%;
}
}
@media screen and (max-width: 500px) {
.col-xs-12 {
width: 100%;
}
.offset-xs-12 {
margin-left: 100%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-13 {
width: 108.33333333%;
}
.offset-xl-13 {
margin-left: 108.33333333%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-13 {
width: 108.33333333%;
}
.offset-lg-13 {
margin-left: 108.33333333%;
}
}
@media screen and (max-width: 1080px) {
.col-md-13 {
width: 108.33333333%;
}
.offset-md-13 {
margin-left: 108.33333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-13 {
width: 108.33333333%;
}
.offset-sm-13 {
margin-left: 108.33333333%;
}
}
@media screen and (max-width: 500px) {
.col-xs-13 {
width: 108.33333333%;
}
.offset-xs-13 {
margin-left: 108.33333333%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-14 {
width: 116.66666667%;
}
.offset-xl-14 {
margin-left: 116.66666667%;
}
}
@media screen and (max-width: 1366px) {
.col-lg-14 {
width: 116.66666667%;
}
.offset-lg-14 {
margin-left: 116.66666667%;
}
}
@media screen and (max-width: 1080px) {
.col-md-14 {
width: 116.66666667%;
}
.offset-md-14 {
margin-left: 116.66666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-14 {
width: 116.66666667%;
}
.offset-sm-14 {
margin-left: 116.66666667%;
}
}
@media screen and (max-width: 500px) {
.col-xs-14 {
width: 116.66666667%;
}
.offset-xs-14 {
margin-left: 116.66666667%;
}
}
/*
* This class is used when element contains .col-elements
* Mostly we use it in combination with another class, f.e. an .col-element
*/
.column-container {
white-space: nowrap;
}
@media screen and (max-width: 1080px) {
.column-container {
white-space: normal;
}
}
@media screen and (max-width: 500px) {
.col-12 {
width: 100%;
}
}
/* ==========================================================================
Flex Grid
@mixin ========================================================================= */
/**
* Flex row
*/
.flexable-layout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
white-space: normal;
}
.flexable-layout.contained {
max-width: 85.71428571%;
margin: 0 auto;
}
.flexable-layout.contained.full-row {
max-width: 1680px;
}
/**
* Flex row
*
* Note: flex-grow 1, flex-shrink 1 and flex-bases 0 can be shorthanded to flex: 1
* 1. Reset font-size
*/
.flex-col {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
font-size: 18px;
}
/* ==========================================================================
This grid can be turned on and off when you want to check
if everything is nice in place.
@mixin ========================================================================= */
.visible-grid-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/**
* 1. Makes it able to control the website while grid is shown
*/
.visible-grid {
display: block;
position: fixed;
z-index: 10000;
pointer-events: none;
}
.visible-grid .grid-col {
background: rgba(0, 255, 255, 0.6);
height: 100vh;
}
.visible-grid .grid-col:nth-child(2n) {
background: rgba(0, 255, 255, 0.3);
}
.visible-grid .grid-col:nth-child(1),
.visible-grid .grid-col:nth-child(14) {
background: rgba(0, 255, 0, 0.5);
}
.breakpoint {
position: fixed;
right: 0;
bottom: 0;
width: 20px;
height: 20px;
z-index: 10000;
background: #0ABEFF;
}
@media screen and (min-width: 1601px) {
.breakpoint {
background: red;
}
}
@media screen and (max-width: 1366px) {
.breakpoint {
background: blue;
}
}
@media screen and (max-width: 1080px) {
.breakpoint {
background: green;
}
}
@media screen and (max-width: 768px) {
.breakpoint {
background: yellow;
}
}
@media screen and (max-width: 500px) {
.breakpoint {
background: pink;
}
}
/* ==========================================================================
Expend Config settings
@mixin ========================================================================= */
/* ==========================================================================
Expend Basic style settings
@mixin ========================================================================= */
/*
* Set up the html
*
* 1. This is the base for al rem units
*/
html {
font-size: 18px;
}
@media screen and (min-width: 1601px) {
html {
font-size: 20px;
}
}
/*
* Set up the body
*
* 1. Set font to lining figures
*/
body {
margin: 0;
color: #5D696E;
font-family: 'freight-sans-pro', sans-serif;
font-weight: 400;
line-height: 1.6;
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
}
@media screen and (max-width: 768px) {
body {
padding-top: 60px;
}
}
/**
* 1. Correct the extra rendered space on the top with a negative margin
*/
h2 {
margin: -15px 0 40px 0;
color: #646464;
font-size: 1.5rem;
font-weight: 300;
line-height: 1.2;
}
h2 a {
color: #646464;
text-decoration: none;
}
@media screen and (max-width: 500px) {
h2 {
margin-top: 0;
margin-bottom: 40px;
}
}
/**
* All margin is at the bottom of a paragraph
* This way a paragraph can be better aligned with non-paragraph objects
*
* 1. Optical correction
*/
p {
margin-top: 0;
}
p:last-child {
margin-bottom: -4px;
}
p.inline {
display: inline;
margin-bottom: 0;
}
/**
* Set font weight to semibold
*/
strong {
font-weight: 600;
}
a {
color: #0000FF;
}
ol {
padding-left: 1em;
}
h3 {
color: #1E2433;
}
/* ==========================================================================
Helper classes
@mixin ========================================================================= */
/**
* Use on elements from where the children should not wrap
*/
.nowrap {
white-space: nowrap;
}
/**
* Hide elements on different screen sizes
*/
@media screen and (max-width: 1600px) {
.hide-on-xl-or-smaller {
display: none;
}
}
@media screen and (min-width: 1601px) {
.hide-on-xl-or-larger {
display: none;
}
}
@media screen and (max-width: 1366px) {
.hide-on-lg-or-smaller {
display: none;
}
}
@media screen and (min-width: 1367px) {
.hide-on-lg-or-larger {
display: none;
}
}
@media screen and (max-width: 1080px) {
.hide-on-md-or-smaller {
display: none;
}
}
@media screen and (min-width: 1081px) {
.hide-on-md-or-larger {
display: none;
}
}
@media screen and (max-width: 768px) {
.hide-on-sm-or-smaller {
display: none;
}
}
@media screen and (min-width: 769px) {
.hide-on-sm-or-larger {
display: none;
}
}
@media screen and (max-width: 500px) {
.hide-on-xs-or-smaller {
display: none;
}
}
@media screen and (min-width: 501px) {
.hide-on-xs-or-larger {
display: none;
}
}
/* ==========================================================================
Mixin used to give the cases their custom colors
@mixin ========================================================================= */
/* ==========================================================================
Partial CSS
@mixin ========================================================================= */
/**
* Global CSS
*/
/* ==========================================================================
Buttons
@mixin ========================================================================= */
/*
* Main settings for each button
*
* 1. Reset default link property
*/
.button {
position: relative;
display: inline-block;
min-width: 200px;
height: 50px;
padding: 0 20px;
border-radius: 4px;
line-height: 45px;
font-size: .9rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
/* Sizes
@mixin ========================================================================= */
/* Color types
@mixin ========================================================================= */
/* Icons
@mixin ========================================================================= */
}
.button.small {
min-width: 0;
}
.button.stroked.white {
border: 2px solid #fff;
color: #fff;
}
.button.stroked.white:hover {
border-color: #0000FF;
color: #fff;
background: #0000FF;
}
.button.stroked.blue {
border: 2px solid #0000FF;
color: #0000FF;
}
.button.stroked.blue:hover {
border-color: #fff;
color: #fff;
background: #0000FF;
}
.button.stroked.black {
border: 2px solid #5D696E;
color: #1D2433;
}
.button.stroked.black:hover {
border-color: #fff;
color: #fff;
background: #1D2433;
}
.button.stroked.light-blue {
border: 2px solid #c3cfe6;
color: #c3cfe6;
}
.button.stroked.light-blue:hover {
border-color: #fff;
color: #fff;
}
.button.stroked.footer {
border: 2px solid #92A6B2;
color: #92A6B2;
}
.button.stroked.footer:hover {
border-color: #fff;
color: #fff;
}
.button.like {
padding-left: 52px;
}
.button.like:before {
position: absolute;
top: 9px;
left: 14px;
width: 25px;
height: 24px;
content: '';
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -45px -60px;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}
.button.like:hover:before {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.button.arrow {
padding-right: 52px;
}
.button.arrow:before {
position: absolute;
top: 17px;
right: 23px;
width: 14px;
height: 14px;
content: '';
-webkit-transition: right 200ms ease-out;
transition: right 200ms ease-out;
}
.button.arrow.small:before {
top: 17px;
}
.button.arrow:hover:before {
right: 18px;
}
.button.arrow.stroked.white:before {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -40px -35px;
}
.button.arrow.stroked.blue:before {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -20px -35px;
}
.button.arrow.stroked.blue:hover:before {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -40px -35px;
}
.button.arrow.stroked.black:before {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -80px -20px;
}
.button.arrow.stroked.black:hover:before {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -40px -35px;
}
.button.arrow.stroked.blue.down:before {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -20px -20px;
}
.button.arrow.stroked.light-blue:before {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -60px -40px;
}
.button.arrow.stroked.light-blue:hover:before {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -40px -35px;
}
.button.arrow.stroked.footer:before {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -40px -20px;
}
.button.arrow.stroked.footer:hover:before {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -40px -35px;
}
.back-to-grid {
display: inline-block;
position: relative;
color: #1D2433;
font-size: .9rem;
font-weight: 500;
text-decoration: none;
padding-left: 42px;
}
.back-to-grid:before {
position: absolute;
top: 6px;
left: 0;
content: '';
width: 16px;
height: 16px;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -100px -40px;
}
.back-to-grid:after {
position: absolute;
top: 8px;
left: 23px;
content: '';
width: 14px;
height: 14px;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -100px -20px;
}
/* ==========================================================================
All global image related sass
@mixin ========================================================================= */
/**
* Preload images
*/
img {
opacity: 1;
-webkit-transition: opacity 300ms ease-out;
transition: opacity 300ms ease-out;
}
img.preload {
opacity: 0;
}
img.content,
img.stretch {
width: 100%;
}
img.cover {
-o-object-fit: cover;
object-fit: cover;
}
/**
* Used for divs with background-images
*/
.image-cover {
background-size: cover;
}
/* Images on grid
@mixin ========================================================================= */
.image-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.image-grid.with-gaps {
grid-gap: 60px 7.14285714%;
}
/* ==========================================================================
Lists
@mixin ========================================================================= */
/**
* Services list
*/
ul.services-list {
padding: 0;
margin: -9px 0 0;
list-style: none;
/**
* 1. make sure display is block to make clickable over the full width
*/
}
ul.services-list a {
position: relative;
display: block;
color: #96A6B2;
text-decoration: none;
cursor: pointer;
/**
* Arrow at the end of a list item
*/
}
ul.services-list a:after {
position: absolute;
top: 10px;
right: 0;
width: 15px;
height: 15px;
content: '';
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -59px -20px;
}
ul.services-list a:hover {
color: #0000FF;
}
ul.services-list a:hover:after {
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -59px 0;
}
ul.services-list li.active a {
color: #1D2433;
font-weight: 600;
}
ul.services-list li.active a:after {
background-image: none;
}
@media screen and (max-width: 500px) {
ul.services-list {
line-height: 2;
}
}
/* ==========================================================================
Text blocks
@mixin ========================================================================= */
.text-block {
padding: 7.14285714%;
font-size: 18px;
/**
* Buttons in a text block are usually at the bottom,
* so they can use a little margin top
*/
}
.col-12 .text-block {
padding: 8.33333333%;
}
@media screen and (max-width: 1366px) {
.text-block {
padding: 7.14285714% 3.57142857%;
}
.col-12 .text-block {
padding: 8.33333333% 4.16666667%;
}
}
.col-6 .text-block {
padding: 16.66666667%;
}
@media screen and (max-width: 1366px) {
.col-6 .text-block {
padding: 16.66666667% 8.33333333%;
}
}
.text-block p {
-webkit-transform: translateY(-9px);
transform: translateY(-9px);
}
.text-block.top-indent .h2-spacer {
display: block;
margin: -15px 0 40px 0;
font-size: 1.5rem;
}
.text-block .button {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.text-block .button {
margin-top: 16px;
}
}
@media screen and (max-width: 500px) {
.text-block .button {
margin-top: 0;
}
}
@media screen and (max-width: 500px) {
.text-block {
line-height: 1.4;
}
}
/**
* Specific partials
*/
/* Account managers
@mixin ========================================================================= */
.account-managers-holder {
white-space: nowrap;
}
.account-managers-holder .account-manager {
display: inline-block;
width: 40%;
margin-right: 10%;
font-size: .8rem;
line-height: 1.2;
white-space: normal;
}
.account-managers-holder .account-manager .portrait {
position: relative;
overflow: hidden;
border-radius: 500px;
margin-bottom: 20px;
}
.account-managers-holder .account-manager .portrait img {
width: 100%;
}
.account-managers-holder .account-manager .name {
display: block;
font-weight: 600;
white-space: nowrap;
}
.account-managers-holder .account-manager .function {
display: block;
color: rgba(255, 255, 255, 0.8);
white-space: nowrap;
}
.account-managers-holder .account-manager a {
text-decoration: none;
color: #0000FF;
}
@media screen and (max-width: 768px) {
.account-managers-holder .account-manager .function {
font-size: .9rem;
}
}
/* ==========================================================================
Call to action bar with account manager
@mixin ========================================================================= */
.call-to-action-bar {
position: relative;
display: block;
background: #0000FF;
color: #fff;
/**
* Left side with the call-to-action and contact details
*
* 1. center the content vertically
* 2. make sure the contact-details go over the account manager
*/
/**
* Right side with the photo of the account manager
*/
/**
* Responsive rules
*/
/*
* Small breakpoint:
* Set account manager to background and set contact details over full width
*/
/*
* Small breakpoint:
* Put the text at the bottom for more readability
*/
}
.call-to-action-bar .call-to-action {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-preferred-size: auto;
flex-basis: auto;
width: 50%;
z-index: 10;
}
.call-to-action-bar .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-left: 16.66666667%;
max-height: 600px;
}
.call-to-action-bar .streamer {
display: block;
margin-bottom: 2rem;
line-height: 1;
font-size: 2rem;
font-weight: 600;
}
.call-to-action-bar .name {
display: block;
font-size: 1.4rem;
line-height: 1;
}
.call-to-action-bar .function {
display: block;
margin-bottom: 1.8rem;
color: rgba(255, 255, 255, 0.7);
}
.call-to-action-bar .contact-details {
font-size: 1.4rem;
font-weight: 500;
white-space: nowrap;
}
.call-to-action-bar .phone,
.call-to-action-bar .email {
display: inline-block;
position: relative;
text-decoration: none;
}
.call-to-action-bar .phone {
color: #fff;
}
.call-to-action-bar .separator {
display: inline-block;
margin: 0 10px;
}
.call-to-action-bar .email {
color: #00C7FF;
}
.call-to-action-bar .phone,
.call-to-action-bar .email {
padding: 0 5px;
}
.call-to-action-bar .phone:before,
.call-to-action-bar .email:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 50%;
opacity: 0.2;
background: #fff;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.call-to-action-bar .phone:hover:before,
.call-to-action-bar .email:hover:before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.call-to-action-bar .account-manager {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
width: 50%;
}
.call-to-action-bar .account-manager img {
max-width: 100%;
}
@media screen and (max-width: 1080px) {
.call-to-action-bar .streamer {
font-size: 1.8rem;
}
.call-to-action-bar .contact-details {
font-size: 1.2rem;
}
}
@media screen and (max-width: 768px) {
.call-to-action-bar .call-to-action {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 56.25vw;
}
.call-to-action-bar .container {
padding-left: 0;
}
.call-to-action-bar .streamer {
font-size: 1.4rem;
margin-bottom: 1rem;
}
.call-to-action-bar .contact-details {
font-size: 1rem;
line-height: 1.2;
white-space: normal;
}
.call-to-action-bar .contact-details a {
display: block;
}
.call-to-action-bar .separator {
display: none;
}
.call-to-action-bar .account-manager {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.call-to-action-bar .account-manager img {
height: 100%;
}
}
@media screen and (max-width: 500px) {
.call-to-action-bar .call-to-action {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
height: 440px;
}
.call-to-action-bar .call-to-action .streamer,
.call-to-action-bar .call-to-action .function {
margin-bottom: 10px;
}
.call-to-action-bar .container {
padding-bottom: 40px;
}
}
/* ==========================================================================
Black centered call to action block
@mixin ========================================================================= */
/**
* Main block styling
*
* 1. Reset default block quote margins
* except the left for which this is already set
*/
.call-to-action-block {
padding: 7.14285714%;
margin-top: 0;
margin-right: 0;
margin-bottom: 7.14285714%;
background: #1D2433;
color: #fff;
font-size: 1.1rem;
font-weight: 500;
line-height: 1.2727272727;
/**
* The block is divided in two flex columns
*
* 1. Reset inherit from .call-to-action-block
*/
/**
* Large heavy letters on the left side
*/
/**
* Small Comment
*/
}
.call-to-action-block .flex-row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.call-to-action-block .flex-col {
white-space: normal;
}
.call-to-action-block .flex-col:first-child {
margin-right: 25%;
}
.call-to-action-block .flex-col:nth-child(2) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
/*
* Add margin-top 'auto' to align .button-holder
* to the bottom of the parent flex box
*/
}
.call-to-action-block .flex-col:nth-child(2) .button-holder {
margin-top: auto;
}
.call-to-action-block h2 {
margin: 0;
color: #fff;
font-size: 4rem;
font-weight: 900;
line-height: 0.875;
text-transform: uppercase;
}
.call-to-action-block h3 {
margin-top: 0;
}
.call-to-action-block a {
color: #00C7FF;
text-decoration: none;
}
.call-to-action-block .comment {
display: block;
margin: 10px 0;
font-size: 0.8rem;
line-height: 1.375;
}
@media screen and (max-width: 1366px) {
.call-to-action-block .flex-col:first-child {
margin-right: 16.66666667%;
}
}
@media screen and (max-width: 960px) {
.call-to-action-block h2 {
font-size: 3rem;
}
.call-to-action-block .flex-col:first-child {
margin-right: 0;
}
}
@media screen and (max-width: 768px) {
.call-to-action-block .flexable-layout {
display: block;
}
.call-to-action-block h2 {
font-size: 1.5rem;
margin-bottom: .5rem;
}
.call-to-action-block h2 br {
display: none;
}
.call-to-action-block .button {
margin-top: 1.5rem;
}
.call-to-action-block .flex-col:nth-child(2) {
max-width: 400px;
}
}
@media screen and (max-width: 500px) {
.call-to-action-block {
margin-bottom: 0;
}
}
@media screen and (max-width: 500px) {
#call-to-action-block {
width: 100%;
}
}
/* ==========================================================================
Case row on overview page (/cases)
@mixin ========================================================================= */
/**
* 1. Align the half grid-row to the right
*/
.case-layout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 35vw;
text-decoration: none;
/* Responsive case row
@mixin ========================================================================= */
}
.case-layout .case-info-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
width: 50%;
}
.case-layout .case-info-container .contained-layout {
max-width: 840px;
margin: 0;
}
.case-layout .case-info-container .info {
width: 42.85714286%;
margin-left: 42.85714286%;
margin-bottom: 14.28571429%;
color: rgba(255, 255, 255, 0.7);
font-size: 18px;
white-space: normal;
line-height: 1.4;
}
.case-layout .case-info-container h2 {
display: inline-block;
position: relative;
z-index: 2;
margin: -8px 0 10px -8px;
padding: 0 8px;
color: #fff;
font-size: 1.6rem;
font-weight: 600;
}
.case-layout .case-info-container h2:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 50%;
opacity: 0.2;
background: #fff;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.case-layout .case-info-container .arrow {
display: inline-block;
width: 32px;
height: 14px;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: 0 0;
}
.case-layout .case-info-container .cta {
display: inline-block;
position: relative;
top: -2px;
margin-right: 10px;
font-weight: 600;
-webkit-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}
.case-layout .case-image {
position: relative;
overflow: hidden;
width: 50%;
}
.case-layout .case-image .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.case-layout:hover .case-info-container h2:before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.case-layout:hover .case-info-container .tags .tag {
border-color: rgba(255, 255, 255, 0.6);
}
.case-layout:hover .case-info-container .arrow {
-webkit-transform: translate3D(20px, 0, 0);
transform: translate3D(20px, 0, 0);
}
.case-layout:hover .case-info-container .cta {
color: #fff;
}
.case-layout:hover .case-image .image {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
@media screen and (max-width: 1080px) {
.case-layout .case-info-container h2 {
font-size: 1.2rem;
}
}
@media screen and (max-width: 768px) {
.case-layout {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.case-layout .case-info-container {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
width: 100%;
height: 200px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.case-layout .case-info-container .info {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-left: 0;
margin-bottom: 0;
width: 100%;
padding: 0 30px;
}
.case-layout .case-image {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
width: 100%;
height: 71.42857143vw;
}
}
html.ie .case-layout {
min-height: 0;
}
html.ie .case-layout .case-info-container,
html.ie .case-layout .case-image {
min-height: 500px;
}
.tags {
display: block;
margin-left: -5px;
margin-bottom: 40px;
}
.tags .tag {
display: inline-block;
padding: 2px 5px;
margin-right: 5px;
margin-bottom: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
font-size: 18px;
white-space: nowrap;
-webkit-transition: border-color 0.2s;
transition: border-color 0.2s;
cursor: pointer;
}
.tags .tag:hover {
border-color: rgba(255, 255, 255, 0.6);
}
/* ==========================================================================
Two featured cases next to each other.
For example as found at the bottom of the about page.
@mixin ========================================================================= */
.featured-cases {
/*
* Small breakpoint:
* Default is flex, place below each other with display block
*/
}
.featured-cases .featured-case {
position: relative;
}
.featured-cases .featured-case:hover .tags .tag {
border-color: rgba(255, 255, 255, 0.6);
}
.featured-cases .color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.featured-cases a {
color: #fff;
}
.featured-cases .text-overlay {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.featured-cases .title {
display: inline-block;
position: relative;
z-index: 2;
margin: -8px 0 10px -8px;
padding: 0 8px;
color: #fff;
font-size: 1.6rem;
font-weight: 600;
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
.featured-cases .tags {
opacity: 0;
}
.featured-cases .arrow {
display: inline-block;
width: 14px;
height: 14px;
opacity: 0;
-webkit-transition: right 200ms ease-out;
transition: right 200ms ease-out;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -40px -35px;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
@media screen and (max-width: 768px) {
.featured-cases {
display: block;
}
}
/* ==========================================================================
Scrollable website component on case-detail
@mixin ========================================================================= */
.scrollable-website {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 7.14285714%;
background: #2475CE;
}
.scrollable-website .frame {
position: relative;
overflow: hidden;
width: 100%;
padding-bottom: 60%;
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.scrollable-website .frame .image-holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scrollable-website .frame img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/* HTML and navigation
@mixin ========================================================================= */
html.has-cookie-dialog {
padding-top: 60px;
}
html.has-cookie-dialog nav.main,
html.has-cookie-dialog .navigation-drip {
top: 60px;
}
@media screen and (max-width: 1080px) {
html.has-cookie-dialog {
padding-top: 120px;
}
html.has-cookie-dialog nav.main,
html.has-cookie-dialog .navigation-drip {
top: 120px;
}
}
/* Dialog
@mixin ========================================================================= */
.cookie-consent {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 60px;
width: 100%;
border-bottom: 1px solid #eaeaea;
background: #fff;
color: #1D2433;
font-size: 16px;
}
.cookie-consent .message {
display: block;
padding: 0 20px;
max-width: 75%;
}
.cookie-consent .message a {
display: inline-block;
color: #0000FF;
text-decoration: none;
}
.cookie-consent .message a:hover {
text-decoration: underline;
}
.cookie-consent .button {
margin-left: 40px;
width: auto;
min-width: 0;
height: 40px;
line-height: 36px;
font-size: 16px;
}
@media screen and (max-width: 1080px) {
.cookie-consent {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
height: 120px;
}
.cookie-consent .message {
max-width: none;
}
.cookie-consent .button {
margin-left: 0;
margin-top: 10px;
position: relative;
top: 0;
right: 0;
}
}
/* ==========================================================================
Drip animation
@mixin ========================================================================= */
/**
* Container holding al the drips
* For now this is for simulation only
*/
.drip-container {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
}
.drip-container .drip {
position: fixed;
top: -100vh;
left: 0;
width: 100vw;
height: 100vh;
background: #0000FF;
background: -webkit-gradient(linear, left top, left bottom, from(#00C7FF), to(#0000FF));
background: linear-gradient(to bottom, #00C7FF 0%, #0000FF 100%);
}
/* ==========================================================================
Contains styling for drip transition between pages
@mixin ========================================================================= */
.drip-transition-container {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
pointer-events: none;
}
.drip-transition-container .drip {
position: relative;
/**
* Body defines the height
*
* 1. Applying a very large border radius to create round bottom (50% doesn't work here)
*/
/**
* The tail contains the inverted circle
*
* 1. Use padding-bottom 100% to create a square shape
* 2. Mask the top part with the inverted circle svg
*/
/**
* Create one gradient over all the drips
*
* 1. Make sure the gradient expands to viewport's size
* todo: background attachment fixed doesn't work with transform,
*/
}
.drip-transition-container .drip .drip-body {
width: 101%;
margin-left: -.5%;
border-radius: 0 0 500px 500px;
}
.drip-transition-container .drip .drip-tail {
width: 100%;
padding-bottom: 100%;
-webkit-mask-image: url(/img/komma/structure/drip_top.svg);
mask-image: url(/img/komma/structure/drip_top.svg);
}
.drip-transition-container .drip .drip-body,
.drip-transition-container .drip .drip-tail {
position: relative;
background: #00C7FF;
}
.drip-transition-container .drip:nth-child(2n) .drip-body {
border-radius: 500px 500px 0 0;
}
.drip-transition-container .drip:nth-child(2n) .drip-tail {
-webkit-mask-image: url(/img/komma/structure/drip_bottom.svg);
mask-image: url(/img/komma/structure/drip_bottom.svg);
}
.input-holder {
margin-bottom: 10px;
}
.input-holder input,
.input-holder textarea {
padding: 0 10px;
width: 100%;
background: none;
border: 1px solid #B5C1C7;
font-family: 'freight-sans-pro', sans-serif;
-webkit-font-feature-settings: 'lnum';
font-feature-settings: 'lnum';
font-size: 18px;
font-weight: 400;
-webkit-appearance: none;
}
.input-holder input[type="text"],
.input-holder textarea[type="text"] {
height: 40px;
}
.input-holder input::-webkit-input-placeholder,
.input-holder textarea::-webkit-input-placeholder {
color: #d0d7e5;
}
.input-holder input:-ms-input-placeholder,
.input-holder textarea:-ms-input-placeholder {
color: #d0d7e5;
}
.input-holder input::-ms-input-placeholder,
.input-holder textarea::-ms-input-placeholder {
color: #d0d7e5;
}
.input-holder input::placeholder,
.input-holder textarea::placeholder {
color: #d0d7e5;
}
.input-holder textarea {
padding: 5px 10px;
resize: vertical;
height: 200px;
min-height: 200px;
}
.input-holder label {
display: block;
color: #5D696E;
font-weight: 600;
font-size: .8rem;
}
.input-holder.error input,
.input-holder.error textarea {
border-color: #ffb600;
}
.input-holder.error label {
display: none;
}
.input-holder.error .message {
display: block;
color: #ffb600;
}
.input-holder.honing {
display: none;
}
input[type="submit"] {
position: relative;
display: inline-block;
min-width: 240px;
height: 60px;
padding: 0 20px;
margin-top: 20px;
background: #fff;
border-radius: 4px;
border: 2px solid #0000FF;
color: #0000FF;
font-family: 'freight-sans-pro', sans-serif;
font-size: 18px;
line-height: 55px;
font-weight: 600;
cursor: pointer;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
-webkit-appearance: none;
}
input[type="submit"]:hover {
border-color: #fff;
color: #fff;
background: #0000FF;
}
input[type="submit"]:hover:before {
right: 18px;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -40px -35px;
}
input[type="submit"]:before {
position: absolute;
top: 22px;
right: 23px;
width: 14px;
height: 14px;
content: '';
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -20px -35px;
-webkit-transition: right 200ms ease-out;
transition: right 200ms ease-out;
}
/* ==========================================================================
Main footer
@mixin ========================================================================= */
footer.main {
width: 100%;
background: #1D2433;
color: #92A6B2;
/*
* Small breakpoint
* Align footer in column direction
*/
}
footer.main a {
color: #92A6B2;
text-decoration: none;
-webkit-transition: color 100ms ease-out;
transition: color 100ms ease-out;
}
footer.main a:hover {
color: #fff;
}
footer.main .flexable-layout {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 6.25%;
}
footer.main .footer-col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-preferred-size: initial;
flex-basis: initial;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 33.33333%;
font-size: 18px;
}
footer.main .footer-col.logo-container {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
footer.main .footer-col.logo-container .logo {
width: 60%;
max-width: 250px;
fill: #92A6B2;
-webkit-transition: fill 100ms ease-out;
transition: fill 100ms ease-out;
}
footer.main .footer-col.logo-container .logo:hover {
fill: #fff;
}
@media screen and (max-width: 1080px) {
footer.main .footer-col.logo-container .logo {
width: 75%;
}
}
footer.main .footer-col.button-container {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
footer.main .footer-col.button-container .streamer {
display: inline-block;
text-align: center;
margin-bottom: 30px;
font-size: 1.5rem;
line-height: 1.4;
}
footer.main .footer-col.contact-container {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
line-height: 1.6;
text-align: right;
}
footer.main nav.footer {
border-top: 1px solid #262F3E;
margin-top: 6.25%;
text-align: center;
width: 100%;
}
footer.main nav.footer ul {
padding: 0;
margin: 0;
list-style: none;
}
footer.main nav.footer li {
padding: 3.33333333% 0;
display: inline-block;
margin-right: 50px;
}
footer.main nav.footer li:last-child {
margin-right: 0;
}
footer.main .social-media .icon {
display: inline-block;
height: 24px;
margin-left: 10px;
}
footer.main .social-media .icon.facebook {
width: 14px;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: 0 -60px;
}
footer.main .social-media .icon.linkedIn {
width: 22px;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -20px -60px;
}
footer.main .less-important-stuff {
background: #141826;
width: 100%;
}
footer.main .less-important-stuff .col-6 {
font-size: .8rem;
line-height: 40px;
color: #606D7A;
}
footer.main .less-important-stuff .col-6 a {
color: #606D7A;
}
footer.main .less-important-stuff .col-6 a:hover {
color: #788795;
}
footer.main .less-important-stuff .col-6:nth-child(2) {
text-align: right;
}
footer.main .less-important-stuff .col-6:nth-child(2) a {
margin-left: 20px;
}
@media screen and (max-width: 1080px) {
footer.main .footer-col.button-container .button {
height: 50px;
line-height: 45px;
}
footer.main .footer-col.button-container .button:before {
top: 17px;
}
footer.main nav.footer li {
margin-right: 20px;
}
}
@media screen and (max-width: 768px) {
footer.main .flexable-layout {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
footer.main .footer-col {
width: 100%;
margin-bottom: 30px;
}
footer.main .footer-col.button-container {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
footer.main .footer-col.contact-container {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
padding-top: 0;
text-align: left;
}
footer.main .footer-col.contact-container .social-media .icon {
margin-left: 0;
margin-right: 10px;
}
footer.main .footer-col.logo-container {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
margin: 6.25% 0;
}
footer.main nav.footer {
margin: 0 0 6.25%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
border-top: none;
text-align: left;
}
footer.main nav.footer li {
display: block;
padding: 0;
}
footer.main .less-important-stuff {
padding: 20px 0;
}
footer.main .less-important-stuff .col-6 {
line-height: 1.2;
display: block;
margin: 0 0 0 8.33333333%;
}
footer.main .less-important-stuff .col-6:nth-child(2) {
text-align: left;
}
footer.main .less-important-stuff .col-6:nth-child(2) a {
margin: 0;
}
footer.main .less-important-stuff .col-6 a {
display: block;
margin: 0;
}
}
@media screen and (max-width: 500px) {
footer.main {
padding-top: 30px;
}
footer.main .flexable-layout {
padding: 0 20px;
}
}
/* ==========================================================================
Big blue header
specific CSS for the Cases header can be found in case.sass
@mixin ========================================================================= */
/**
* Main header
*
* 1. Set up the height on 70% of viewport for now, maybe adjust later
*/
header.main {
position: relative;
z-index: 1;
margin-bottom: 3.57142857vw;
background: #0000FF;
/**
* Large intro text
*/
/* Responsive header
@mixin ========================================================================= */
}
header.main .intro {
position: relative;
padding: 14.28571429% 0;
color: #fff;
font-size: 2rem;
font-weight: 500;
line-height: 1.25;
/**
* Page title
*/
}
header.main .intro h1 {
margin: 0 0 60px 0;
color: #4D6EFF;
font-size: .9rem;
font-weight: 700;
text-transform: uppercase;
}
header.main .intro p {
margin: 0;
}
header.main .intro a {
color: #00C7FF;
text-decoration: none;
}
header.main .intro .arrow {
position: absolute;
bottom: 14.28571429%;
left: 50%;
display: block;
width: 14px;
height: 32px;
margin-left: -7px;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: 0 -20px;
cursor: pointer;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}
header.main .intro .arrow:hover {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
@media screen and (max-width: 1080px) {
header.main .intro {
width: 78.57142857%;
}
}
@media screen and (max-width: 768px) {
header.main h1 {
margin-bottom: 30px;
}
header.main .intro {
font-size: 1.5rem;
}
header.main .intro .arrow {
display: none;
}
}
@media screen and (max-width: 500px) {
header.main .intro {
width: 100%;
padding: 30px 20px 40px;
}
header.main .intro p {
font-size: 1.2rem;
line-height: 1.3;
}
}
/* Header drips
@mixin ========================================================================= */
.header-drip {
position: absolute;
top: 0;
left: 0;
background: #0066FF;
}
.header-drip.top {
width: 100%;
height: 3.57142857vw;
max-height: 60px;
}
.header-drip.left,
.header-drip.right {
top: 0;
width: 3.57142857%;
max-width: 60px;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0000FF));
background: linear-gradient(to bottom, #0066FF 0%, #0000FF 100%);
border-bottom-left-radius: 500px;
border-bottom-right-radius: 500px;
}
.header-drip.right {
left: auto;
right: 0;
}
@media screen and (max-width: 768px) {
.header-drip.top {
height: 0;
}
}
@media screen and (max-width: 500px) {
.header-drip {
display: none;
}
}
/* ==========================================================================
Navigation
@mixin ========================================================================= */
/**
* Logo and burger container
* Ratio = 1 : 2
*
* 1. Applying a very large border radius to create round bottom (50% doesn't work here)
*/
.navigation-drip {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 7.14285714%;
max-width: 120px;
height: 14.28571429vw;
max-height: 240px;
background: #0066FF;
border-radius: 0 0 500px 500px;
}
.navigation-drip .logo {
display: block;
width: 50%;
margin: 25%;
}
.navigation-drip .logo .landscape {
display: none;
}
.navigation-drip .logo .portrait {
width: 100%;
}
.navigation-drip .burger-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.navigation-drip .burger-button {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
padding-bottom: 50%;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.navigation-drip .burger-button svg {
position: absolute;
top: 36%;
left: 30%;
width: 40%;
fill: #0000FF;
overflow: hidden;
-webkit-transition: fill 200ms ease-out;
transition: fill 200ms ease-out;
}
html.ie .navigation-drip .burger-button svg {
top: 0;
}
.navigation-drip .burger-button svg .line1,
.navigation-drip .burger-button svg .line2,
.navigation-drip .burger-button svg .line3 {
-webkit-transition: width 200ms ease-out;
transition: width 200ms ease-out;
}
.navigation-drip .burger-button:hover svg {
fill: #1D2433;
}
.navigation-drip .burger-button:hover svg .line2 {
width: 60%;
}
.navigation-drip .burger-button:hover svg .line3 {
width: 70%;
}
@media screen and (max-width: 768px) {
.navigation-drip {
width: 100%;
max-width: none;
height: 60px;
max-height: none;
background: #0066FF;
border-radius: 0;
}
.navigation-drip .burger-container {
width: 60px;
height: 60px;
padding-bottom: 0;
border-radius: 50%;
}
.navigation-drip .burger-button {
top: 10px;
left: 10px;
padding-bottom: 0;
width: 40px;
height: 40px;
}
.navigation-drip .logo {
margin: 10px auto;
width: 124px;
}
.navigation-drip .logo .landscape {
display: block;
}
.navigation-drip .logo .portrait {
display: none;
}
}
/* Main navigation
@mixin ========================================================================= */
.close {
display: none;
position: fixed;
top: 0;
right: 0;
z-index: 510;
width: 60px;
height: 60px;
cursor: pointer;
}
.close:after {
content: '';
position: absolute;
top: 25px;
right: 25px;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -80px -40px;
width: 10px;
height: 10px;
}
.navigation-is-open .close {
display: block;
}
/*
* White plane on the right side
*
* 1. Don't use vw for it will include the scroll bar in its calculations
*/
nav.main {
position: fixed;
top: 0;
right: 0;
z-index: 500;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
width: 50%;
height: 100vh;
padding: 10vh 7.14285714%;
background: #fff;
color: #0000FF;
/* Mobile view
@mixin ========================================================================= */
}
nav.main ul {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 60vh;
padding: 0;
margin: 0;
list-style: none;
}
nav.main li {
/* Services sub list
@mixin ========================================================================= */
}
nav.main li a {
text-decoration: none;
-webkit-transition: color 200ms ease-out;
transition: color 200ms ease-out;
}
nav.main li.active > a {
text-decoration: line-through;
}
nav.main li:not(.active) a:hover {
color: #00C7FF;
}
nav.main li > a {
display: block;
color: #0000FF;
font-size: 1.4rem;
font-weight: 600;
line-height: 1;
}
nav.main li > ul {
display: inline-block;
width: 50%;
height: auto;
margin-top: 1.36903571vw;
}
nav.main li > ul li {
padding-bottom: 10px;
}
nav.main li > ul a {
display: block;
color: #96A6B2;
font-size: 1.1rem;
font-weight: 300;
}
nav.main li.offer {
position: absolute;
top: 0;
right: 0;
}
nav.main li.offer .button {
font-size: 1rem;
line-height: 45px;
}
nav.main footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 30vh;
}
nav.main footer .footer-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
nav.main footer svg.logo-web-branding-agency {
width: 40%;
fill: #D5DCE0;
}
nav.main footer .jobs {
text-align: right;
line-height: 1.3;
color: #96A6B2;
}
nav.main footer .jobs a {
color: #0000FF;
text-decoration: none;
}
@media screen and (max-width: 1366px) {
nav.main {
width: 57.14285714%;
}
}
@media screen and (max-width: 1080px) {
nav.main {
width: 71.42857143%;
}
}
@media screen and (max-width: 768px) {
nav.main {
padding: 0;
width: 85.71428571%;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
nav.main ul {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
height: auto;
}
nav.main li:not(.offer) a {
display: block;
padding: 20px;
font-size: 1.1rem;
border-bottom: 1px solid #eaeaea;
}
nav.main li:not(.offer):not(.active) a:hover {
color: #0000FF;
}
nav.main li.offer {
position: relative;
padding: 20px;
}
nav.main li > ul {
display: none;
}
nav.main footer {
display: block;
}
nav.main footer .footer-content {
display: block;
}
nav.main footer .jobs {
padding: 20px;
text-align: left;
}
nav.main svg.logo-web-branding-agency {
display: none;
}
}
/* Navigation overlay
@mixin ========================================================================= */
.navigation-overlay-container {
position: fixed;
z-index: 499;
top: 0;
left: 0;
}
.navigation-overlay-container .drip {
position: fixed;
top: -100vh;
left: 0;
width: 100vw;
height: 100vh;
background: #0000FF;
background: -webkit-gradient(linear, left top, left bottom, from(#00C7FF), to(#0000FF));
background: linear-gradient(to bottom, #00C7FF 0%, #0000FF 100%);
opacity: .8;
}
.post-grid {
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 5%;
}
@media screen and (max-width: 1080px) {
.post-grid {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 500px) {
.post-grid {
grid-template-columns: 1fr;
}
}
.post-grid .post-thumb {
-ms-flex-item-align: start;
align-self: start;
margin-bottom: 16.66666667%;
text-align: center;
}
.post-grid .post-thumb .link-to-post,
.post-grid .post-thumb .category {
color: inherit;
text-decoration: none;
}
.post-grid .post-thumb .link-to-post {
display: block;
}
.post-grid .post-thumb figure {
width: 100%;
margin: 0;
padding-bottom: 56%;
background: #1D2433 center center;
background-size: cover;
}
.post-grid .post-thumb .title {
display: block;
margin: 11.111% auto 15px;
color: #0000FF;
font-size: 1.2rem;
line-height: 1.4;
}
.post-grid .post-thumb .category {
display: inline-block;
margin-top: 30px;
color: rgba(100, 100, 100, 0.3);
font-size: 16px;
font-weight: 600;
}
.post-grid .post-thumb .category:hover {
color: #00C7FF;
}
/* ==========================================================================
Holder with mouse icon that tells the user he can scroll
@mixin ========================================================================= */
.scroll-hinter {
position: absolute;
z-index: 15;
top: 0;
left: 67.85714286%;
width: 10.71428571%;
height: 0;
}
@media screen and (max-width: 768px) {
.scroll-hinter {
display: none;
}
}
.scroll-hinter .sizer {
width: 100%;
padding-bottom: 75%;
background: #0000FF;
border-top-left-radius: 500px;
border-top-right-radius: 500px;
-webkit-transform: translateY(-99%);
transform: translateY(-99%);
}
.scroll-hinter .icon {
position: absolute;
top: 30%;
left: 38%;
width: 24%;
cursor: pointer;
}
.scroll-hinter .icon .mouse-body,
.scroll-hinter .icon .mouse-wheel,
.scroll-hinter .icon .arrow {
fill: #fff;
}
.scroll-hinter .icon .arrow {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}
.scroll-hinter .icon:hover .arrow {
-webkit-transform: translate3D(0, 30%, 0);
transform: translate3D(0, 30%, 0);
}
.scroll-hinter .mouse-wheel {
-webkit-animation: moveUpDown 1s ease-out infinite;
animation: moveUpDown 1s ease-out infinite;
}
@-webkit-keyframes moveUpDown {
0% {
-webkit-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
50% {
-webkit-transform: translate3D(0, 5%, 0);
transform: translate3D(0, 5%, 0);
}
100% {
-webkit-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
}
@keyframes moveUpDown {
0% {
-webkit-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
50% {
-webkit-transform: translate3D(0, 5%, 0);
transform: translate3D(0, 5%, 0);
}
100% {
-webkit-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
}
/* ==========================================================================
Team portraits
@mixin ========================================================================= */
.grid-layout.about-our-team {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
max-width: 1680px;
margin: 0 auto;
}
.grid-layout.about-our-team .text {
grid-area: 1 / 1 / auto / span 2;
}
.grid-layout.about-our-team .text-block {
padding: 16.66666667%;
padding-top: 3.57142857vw;
}
@media screen and (max-width: 1080px) {
.grid-layout.about-our-team {
grid-template-columns: 1fr 1fr 1fr;
}
.grid-layout.about-our-team .text-block {
padding: 6.25%;
}
}
@media screen and (max-width: 768px) {
.grid-layout.about-our-team .text {
grid-area: 1 / 1 / auto / span 3;
}
.grid-layout.about-our-team .text-block {
padding: 8.33333333%;
}
}
@media screen and (max-width: 640px) {
.grid-layout.about-our-team {
grid-template-columns: 1fr 1fr;
}
.grid-layout.about-our-team .text {
grid-area: 1 / 1 / auto / span 2;
}
}
@media screen and (max-width: 500px) {
.grid-layout.about-our-team .text-block {
padding: 30px 20px 40px;
}
@supports not (display: grid) {
.grid-layout.about-our-team::after {
clear: both;
content: "";
display: table;
}
}
}
html.ie .grid-layout.about-our-team::after {
clear: both;
content: "";
display: table;
}
/**
* A team member portrait
*
* 1. Base the margin on the view width
* so you get equal spacing vertically and horizontally
*/
.team-portrait {
position: relative;
overflow: hidden;
/**
* Photo
*/
/**
* Name and function
*/
}
.team-portrait .portrait {
position: relative;
overflow: hidden;
padding-bottom: 138.889%;
}
.team-portrait .portrait img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
.team-portrait .caption {
position: relative;
z-index: 10;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 120px;
padding-left: 16.66666667%;
margin-bottom: 33.33333333%;
background: #1D2433;
color: #fff;
line-height: 1.22222;
}
.team-portrait .caption .name,
.team-portrait .caption .function {
display: block;
font-size: .9rem;
}
.team-portrait .caption .name {
font-weight: 600;
}
.team-portrait .caption .function {
color: #6C6C80;
}
html.ie .team-portrait {
width: 33%;
float: left;
}
html.ie .team-portrait .portrait {
padding-bottom: 130%;
}
@media screen and (max-width: 500px) {
.team-portrait .caption {
margin-bottom: 0;
height: 80px;
}
@supports not (display: grid) {
.team-portrait {
width: 50%;
float: left;
}
.team-portrait .portrait {
padding-bottom: 130%;
}
.team-portrait.job-offer {
width: 100%;
}
}
}
/* ==========================================================================
Easily change the order of all the sections on a page
@mixin ========================================================================= */
.section-sorter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.section-sorter .video {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.section-sorter .intro-section {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.section-sorter .award {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.section-sorter .featured-cases {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.section-sorter .about-our-company {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.section-sorter .featured-testimonials {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.section-sorter .about-our-team {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.section-sorter .call-to-action-bar {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
@media screen and (max-width: 768px) {
.section-sorter .intro-section {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.section-sorter .video {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
.response-40x header.main .intro .arrow {
display: none;
}
/* ==========================================================================
Specific CSS for the about page
@mixin ========================================================================= */
.about #team-grid-md {
white-space: normal;
}
@media screen and (max-width: 768px) {
.about #services-list {
margin-left: 0;
}
}
.about .team-portrait.job-offer {
display: block;
text-decoration: none;
}
.about .team-portrait.job-offer .portrait,
.about .team-portrait.job-offer .caption {
background: #cad2db;
}
.about .team-portrait.job-offer .content {
position: absolute;
top: 0;
left: 0;
padding: 60px;
font-size: .9rem;
color: #fff;
line-height: 1.4;
}
.about .team-portrait.job-offer .title {
display: block;
margin: 0 0 60px;
color: #fff;
font-size: 3rem;
font-weight: 900;
line-height: 0.875;
text-transform: uppercase;
}
.about .team-portrait.job-offer .caption {
padding-left: 60px;
padding-right: 60px;
}
.about .team-portrait.job-offer .button {
max-width: none;
min-width: 0;
}
.about .team-portrait.job-offer:hover .button {
border-color: #0000FF;
color: #fff;
background: #0000FF;
}
@media screen and (max-width: 768px) {
.about header.main .intro {
width: 71.42857143%;
}
.about .why-us .text-block {
padding: 7.14285714%;
}
.about .team-portrait.job-offer {
grid-area: auto / auto / auto / span 2;
}
.about .team-portrait.job-offer .title {
margin-bottom: 10px;
}
.about .team-portrait.job-offer .portrait {
padding-bottom: 69.4445%;
}
}
@media screen and (max-width: 768px) {
.about .call-to-action-block {
margin-bottom: 0;
}
.about .image-grid.with-gaps {
grid-gap: 0;
}
}
@media screen and (max-width: 500px) {
.about header.main {
margin-bottom: 0;
}
.about header.main .intro {
width: 100%;
padding: 30px 20px 40px;
}
.about .team-portrait.job-offer .content {
padding: 20px;
}
.about .team-portrait.job-offer .caption {
padding: 0 20px;
height: 100px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
.alaaf .call-to-action-block h2 {
font-size: 3rem;
}
.alaaf .puzzle {
margin-bottom: 10%;
}
/* ==========================================================================
Specific CSS for the cases page
@mixin ========================================================================= */
/* ==========================================================================
Specific CSS for the cases page
@mixin ========================================================================= */
/* Case themes
@mixin ========================================================================= */
/* ==========================================================================
Mixin used to give the cases their custom colors
@mixin ========================================================================= */
/* ==========================================================================
Contains color configuration and add
@mixin ========================================================================= */
/* BullWave
@mixin ========================================================================= */
/* Dale
@mixin ========================================================================= */
/* Een en al oor
@mixin ========================================================================= */
/* Fitale
@mixin ========================================================================= */
/* i.kapper
@mixin ========================================================================= */
/* Kiekeboe
@mixin ========================================================================= */
/* Promic
@mixin ========================================================================= */
/* Rentman
@mixin ========================================================================= */
/* Tandarts Maas
@mixin ========================================================================= */
/* TOPS WTW-filters
@mixin ========================================================================= */
/* Zuiderbos
@mixin ========================================================================= */
.case.bullWave .navigation-drip {
background: #463CE6;
}
.case.bullWave .navigation-drip .burger-container svg {
fill: #463CE6;
}
.case.bullWave header.main {
background: #463CE6;
}
.case.bullWave header.main .header-drip {
background: #463CE6;
}
.case.bullWave .scroll-hinter .sizer {
background: #3F3BC8;
}
.case.bullWave .intro-section {
background: #3F3BC8;
}
.case.bullWave .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#ff8485), to(#FF5153));
background: linear-gradient(to bottom, #ff8485 0%, #FF5153 100%);
}
.case.bullWave .testimonial {
background-color: #3F3BC8;
}
.testimonial-container.bullWave {
background-color: #3F3BC8;
}
.featured-cases .featured-case.bullWave .color-overlay {
background-color: #463CE6;
}
.case.dale .navigation-drip {
background: #233176;
}
.case.dale .navigation-drip .burger-container svg {
fill: #233176;
}
.case.dale header.main {
background: #233176;
}
.case.dale header.main .header-drip {
background: #233176;
}
.case.dale .scroll-hinter .sizer {
background: #2750FB;
}
.case.dale .intro-section {
background: #2750FB;
}
.case.dale .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#2c3f8e), to(#202E67));
background: linear-gradient(to bottom, #2c3f8e 0%, #202E67 100%);
}
.case.dale .testimonial {
background-color: #2750FB;
}
.testimonial-container.dale {
background-color: #2750FB;
}
.featured-cases .featured-case.dale .color-overlay {
background-color: #2750FB;
}
.case.eenenaloor .navigation-drip {
background: #5546A9;
}
.case.eenenaloor .navigation-drip .burger-container svg {
fill: #5546A9;
}
.case.eenenaloor header.main {
background: #5546A9;
}
.case.eenenaloor header.main .header-drip {
background: #5546A9;
}
.case.eenenaloor .scroll-hinter .sizer {
background: #002350;
}
.case.eenenaloor .intro-section {
background: #002350;
}
.case.eenenaloor .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#8378bd), to(#6456AC));
background: linear-gradient(to bottom, #8378bd 0%, #6456AC 100%);
}
.case.eenenaloor .testimonial {
background-color: #5546A7;
}
.testimonial-container.eenenaloor {
background-color: #5546A7;
}
.featured-cases .featured-case.eenenaloor .color-overlay {
background-color: #6456AC;
}
.case.fitale .navigation-drip {
background: #0ABEFF;
}
.case.fitale .navigation-drip .burger-container svg {
fill: #0ABEFF;
}
.case.fitale header.main {
background: #0ABEFF;
}
.case.fitale header.main .header-drip {
background: #0ABEFF;
}
.case.fitale .scroll-hinter .sizer {
background: #FF6EA4;
}
.case.fitale .intro-section {
background: #FF6EA4;
}
.case.fitale .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#ffa1c4), to(#FF6EA4));
background: linear-gradient(to bottom, #ffa1c4 0%, #FF6EA4 100%);
}
.case.fitale .testimonial {
background-color: #0ABEFF;
}
.testimonial-container.fitale {
background-color: #0ABEFF;
}
.featured-cases .featured-case.fitale .color-overlay {
background-color: #FF6EA4;
}
.case.iKapper .navigation-drip {
background: #385675;
}
.case.iKapper .navigation-drip .burger-container svg {
fill: #385675;
}
.case.iKapper header.main {
background: #385675;
}
.case.iKapper header.main .header-drip {
background: #385675;
}
.case.iKapper .scroll-hinter .sizer {
background: #F09775;
}
.case.iKapper .intro-section {
background: #F09775;
}
.case.iKapper .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#496f97), to(#385675));
background: linear-gradient(to bottom, #496f97 0%, #385675 100%);
}
.case.iKapper .testimonial {
background-color: #F09775;
}
.testimonial-container.iKapper {
background-color: #F09775;
}
.featured-cases .featured-case.iKapper .color-overlay {
background-color: #F09775;
}
.case.kiekeboe .navigation-drip {
background: #9064D8;
}
.case.kiekeboe .navigation-drip .burger-container svg {
fill: #9064D8;
}
.case.kiekeboe header.main {
background: #9064D8;
}
.case.kiekeboe header.main .header-drip {
background: #9064D8;
}
.case.kiekeboe .scroll-hinter .sizer {
background: #FFAACD;
}
.case.kiekeboe .intro-section {
background: #FFAACD;
}
.case.kiekeboe .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#ddea9d), to(#CEE173));
background: linear-gradient(to bottom, #ddea9d 0%, #CEE173 100%);
}
.case.kiekeboe .testimonial {
background-color: #FFD346;
}
.testimonial-container.kiekeboe {
background-color: #FFD346;
}
.featured-cases .featured-case.kiekeboe .color-overlay {
background-color: #9064D8;
}
.case.promic .navigation-drip {
background: #ff8f00;
}
.case.promic .navigation-drip .burger-container svg {
fill: #ff8f00;
}
.case.promic header.main {
background: #ff8f00;
}
.case.promic header.main .header-drip {
background: #ff8f00;
}
.case.promic .scroll-hinter .sizer {
background: #161b26;
}
.case.promic .intro-section {
background: #161b26;
}
.case.promic .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#ff7333), to(#ff5000));
background: linear-gradient(to bottom, #ff7333 0%, #ff5000 100%);
}
.case.promic .testimonial {
background-color: #ff7800;
}
.testimonial-container.promic {
background-color: #ff7800;
}
.featured-cases .featured-case.promic .color-overlay {
background-color: #FE8D26;
}
.case.rentman .navigation-drip {
background: #ff7800;
}
.case.rentman .navigation-drip .burger-container svg {
fill: #ff7800;
}
.case.rentman header.main {
background: #ff7800;
}
.case.rentman header.main .header-drip {
background: #ff7800;
}
.case.rentman .scroll-hinter .sizer {
background: #4C627A;
}
.case.rentman .intro-section {
background: #4C627A;
}
.case.rentman .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#607b99), to(#4C627A));
background: linear-gradient(to bottom, #607b99 0%, #4C627A 100%);
}
.case.rentman .testimonial {
background-color: #ff7800;
}
.testimonial-container.rentman {
background-color: #ff7800;
}
.featured-cases .featured-case.rentman .color-overlay {
background-color: #ff7800;
}
.case.tandartsMaas .navigation-drip {
background: #ffab8f;
}
.case.tandartsMaas .navigation-drip .burger-container svg {
fill: #ffab8f;
}
.case.tandartsMaas header.main {
background: #ffab8f;
}
.case.tandartsMaas header.main .header-drip {
background: #ffab8f;
}
.case.tandartsMaas .scroll-hinter .sizer {
background: #97CFE7;
}
.case.tandartsMaas .intro-section {
background: #97CFE7;
}
.case.tandartsMaas .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#febfab), to(#FE9978));
background: linear-gradient(to bottom, #febfab 0%, #FE9978 100%);
}
.case.tandartsMaas .testimonial {
background-color: #95CFE7;
}
.testimonial-container.tandartsMaas {
background-color: #95CFE7;
}
.featured-cases .featured-case.tandartsMaas .color-overlay {
background-color: #95CFE7;
}
.case.topsWtwFilters .navigation-drip {
background: #00A1F7;
}
.case.topsWtwFilters .navigation-drip .burger-container svg {
fill: #00A1F7;
}
.case.topsWtwFilters header.main {
background: #00A1F7;
}
.case.topsWtwFilters header.main .header-drip {
background: #00A1F7;
}
.case.topsWtwFilters .scroll-hinter .sizer {
background: #0086f7;
}
.case.topsWtwFilters .intro-section {
background: #0086f7;
}
.case.topsWtwFilters .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#2bb5ff), to(#00A1F7));
background: linear-gradient(to bottom, #2bb5ff 0%, #00A1F7 100%);
}
.case.topsWtwFilters .testimonial {
background-color: #00A1F7;
}
.testimonial-container.topsWtwFilters {
background-color: #00A1F7;
}
.featured-cases .featured-case.topsWtwFilters .color-overlay {
background-color: #00A1F7;
}
.case.zuiderbos .navigation-drip {
background: #1F76D0;
}
.case.zuiderbos .navigation-drip .burger-container svg {
fill: #1F76D0;
}
.case.zuiderbos header.main {
background: #1F76D0;
}
.case.zuiderbos header.main .header-drip {
background: #1F76D0;
}
.case.zuiderbos .scroll-hinter .sizer {
background: #12469F;
}
.case.zuiderbos .intro-section {
background: #12469F;
}
.case.zuiderbos .dynamic aside {
background: -webkit-gradient(linear, left top, left bottom, from(#f493b3), to(#EF6593));
background: linear-gradient(to bottom, #f493b3 0%, #EF6593 100%);
}
.case.zuiderbos .testimonial {
background-color: #1F76D0;
}
.testimonial-container.zuiderbos {
background-color: #1F76D0;
}
.featured-cases .featured-case.zuiderbos .color-overlay {
background-color: #1F76D0;
}
/* Other case styles
@mixin ========================================================================= */
.case {
/* Dynamic content section
@mixin ========================================================================= */
/* Case closing image
@mixin ========================================================================= */
/* Case testimonial
@mixin ========================================================================= */
/* Case pagination
@mixin ========================================================================= */
/* Other cases
@mixin ========================================================================= */
}
.case header.main {
margin-bottom: 0;
padding: 3.57142857% 3.57142857% 0 3.57142857%;
}
@media screen and (max-width: 500px) {
.case header.main {
display: none;
}
}
.case header.main .scroll-hinter {
top: auto;
bottom: 0;
}
.case header.main .height-controller {
position: relative;
overflow: hidden;
max-height: 87vh;
min-height: 600px;
}
@media screen and (max-width: 1080px) {
.case header.main .height-controller {
max-height: none;
min-height: 0;
}
}
.case header.main .ratio-controller {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
@media screen and (min-width: 1981px) {
.case header.main .ratio-controller {
padding-bottom: 52%;
}
}
.case header.main .ratio-controller .wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.case header.main .ratio-controller img {
position: absolute;
top: 0;
right: 0;
width: 100%;
}
.case header.main .hero-text-layout {
position: relative;
z-index: 10;
height: 100%;
color: #fff;
}
.case header.main .hero-text-layout .hero-text-flex-column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 auto;
width: 76.92307692%;
height: 45%;
}
@media screen and (min-width: 1801px) {
.case header.main .hero-text-layout .hero-text-flex-column {
width: 71.42857143%;
}
}
@media screen and (min-width: 1981px) {
.case header.main .hero-text-layout .hero-text-flex-column {
width: 100%;
}
}
@media screen and (max-width: 1080px) {
.case header.main .hero-text-layout .hero-text-flex-column {
width: 92.30769231%;
}
}
.case header.main .hero-text-layout .title {
margin-top: 7.14285714%;
font-size: 6rem;
font-weight: 700;
line-height: 1;
}
.case header.main .hero-text-layout .arrow {
display: block;
width: 14px;
height: 32px;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: 0 -20px;
cursor: pointer;
}
@media screen and (min-width: 1681px) {
.case header.main {
padding: 60px 60px 0;
}
}
@media screen and (max-width: 1080px) {
.case header.main .hero-text-layout .title {
font-size: 4rem;
margin-bottom: 30px;
}
}
@media screen and (max-width: 768px) {
.case header.main .hero-text-layout .title {
font-size: 3rem;
}
}
@media screen and (max-width: 500px) {
.case header.main .hero-text-layout .title {
font-size: 1rem;
}
}
.case .intro-section .intro {
padding: 7.14285714% 0 14.28571429%;
color: #fff;
}
.case .intro-section p {
margin: 0;
font-size: 2rem;
font-weight: 500;
line-height: 1.33333;
}
.case .intro-section .breadcrumb {
display: block;
margin-top: -0.5em;
margin-bottom: 4.64285714vw;
color: rgba(255, 255, 255, 0.5);
font-size: .8rem;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
white-space: nowrap;
}
@media screen and (max-width: 1366px) {
.case .intro-section .intro p {
font-size: 1.8rem;
}
}
@media screen and (max-width: 1080px) {
.case .intro-section .intro {
width: 85.71428571%;
}
.case .intro-section .intro p {
font-size: 1.6rem;
}
}
@media screen and (max-width: 768px) {
.case .intro-section .intro p {
font-size: 1.3rem;
}
}
.case .dynamic {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* Progress bar
@mixin ========================================================================= */
/* Content section
@mixin ========================================================================= */
}
.case .dynamic aside.progress-container {
position: absolute;
top: 0;
left: 0;
max-width: 120px;
height: 100%;
z-index: 10;
}
.case .dynamic aside.progress-container .fixable {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
.case .dynamic aside.progress-container .fixable.fixed {
position: fixed;
width: 7.14285714%;
max-width: 120px;
}
.case .dynamic aside.progress-container .fixable.sunk {
top: auto;
bottom: 0;
}
.case .dynamic aside.progress-container .progress {
position: absolute;
top: 33vh;
left: 50%;
height: 60vh;
width: 50%;
}
.case .dynamic aside.progress-container .label {
cursor: pointer;
}
.case .dynamic aside.progress-container .line {
position: absolute;
right: 0;
bottom: 0;
overflow: hidden;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.25);
}
.case .dynamic aside.progress-container .line span {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: #fff;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.case .dynamic aside.progress-container ul {
position: absolute;
bottom: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 60vh;
padding: 0;
margin: 0;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
list-style: none;
}
.case .dynamic aside.progress-container li {
position: relative;
color: #fff;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-size: 1.5vh;
text-align: right;
}
@media screen and (max-width: 1080px) {
.case .dynamic aside.progress-container {
display: none;
}
}
.case .dynamic .dynamic-content {
width: 100%;
font-size: 0;
}
.case .dynamic .dynamic-content .title-container,
.case .dynamic .dynamic-content .content-container {
position: relative;
vertical-align: top;
display: inline-block;
padding: 7.14285714% 0;
font-size: 18px;
white-space: normal;
}
.case .dynamic .dynamic-content .title-container {
width: 50%;
padding-left: 14.28571429%;
}
.case .dynamic .dynamic-content .content-container {
font-size: 18px;
width: 35.71428571%;
}
.case .dynamic .dynamic-content .content-container p:first-child {
margin-top: -.45em;
}
.case .dynamic .dynamic-content .content-container .button {
margin-top: 1rem;
}
.case .dynamic .dynamic-content .image-container {
position: relative;
overflow: hidden;
}
.case .dynamic .dynamic-content .spacer {
width: 100%;
height: 0;
margin-bottom: 7.14285714%;
}
@media screen and (max-width: 1600px) {
.case .dynamic .dynamic-content .spacer:not(.keep) {
margin-bottom: 0;
}
}
@media screen and (max-width: 1080px) {
.case .dynamic .dynamic-content .title-container {
padding-left: 7.14285714%;
}
.case .dynamic .dynamic-content .content-container {
width: 42.85714286%;
}
}
@media screen and (max-width: 768px) {
.case .dynamic .dynamic-content .title-container {
width: 85.71428571%;
margin-left: 7.14285714%;
padding-left: 0;
padding-bottom: 0;
}
.case .dynamic .dynamic-content .content-container {
margin-left: 7.14285714%;
padding-top: 0;
width: 85.71428571%;
}
.case .dynamic .dynamic-content .image-grid {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 500px) {
.case .dynamic .dynamic-content .col-10 {
width: 100%;
}
.case .dynamic .dynamic-content .keep.spacer {
display: none;
}
}
.case .closing-image img {
width: 100%;
}
.case .testimonial {
min-height: 800px;
padding: 7.14285714vw 0;
margin-bottom: 7.14285714vw;
background-repeat: no-repeat;
background-size: contain;
background-position-y: bottom;
background-position-x: 20%;
color: #fff;
}
.case .testimonial .story-container {
width: 35.71428571%;
margin-left: 50%;
white-space: normal;
}
.case .testimonial .description {
font-size: 18px;
}
.case .testimonial.story {
font-size: .9rem;
}
.case .testimonial.story h2 {
color: rgba(255, 255, 255, 0.7);
font-size: 3.2rem;
font-weight: 300;
line-height: 1.15625;
}
.case .testimonial.story h2 .name {
display: block;
color: #fff;
font-weight: 400;
}
@media screen and (max-width: 1080px) {
.case .testimonial .story-container {
width: 42.85714286%;
}
.case .testimonial .story-container h2 {
font-size: 2rem;
}
}
@media screen and (max-width: 768px) {
.case .testimonial {
background-size: auto 400px;
background-position: center bottom;
padding-bottom: 400px;
min-height: 0;
}
.case .testimonial .story-container {
width: 85.71428571%;
margin-left: 7.14285714%;
}
}
.case .cases-pagination .flex-col {
overflow: hidden;
}
.case .other-cases {
margin-bottom: 7.14285714%;
}
.case .featured-cases .featured-case:first-child .arrow {
-webkit-transform: rotate(180deg) translateX(-10px);
transform: rotate(180deg) translateX(-10px);
}
/* ==========================================================================
Specific CSS for the contact page
@mixin ========================================================================= */
.contact {
/* Basic structure
@mixin ========================================================================= */
/* Company details
@mixin ========================================================================= */
/* Social media
@mixin ========================================================================= */
/* Form
@mixin ========================================================================= */
/* Maps
@mixin ========================================================================= */
}
.contact header.main {
margin-bottom: 7.14285714%;
padding-bottom: 7.14285714%;
}
.contact header.main .intro {
padding-bottom: 7.14285714%;
}
.contact header.main .phone-holder .phone {
display: block;
color: #fff;
text-decoration: none;
font-size: 1.4rem;
margin-bottom: 7.14285714%;
}
.contact header.main .company-details,
.contact header.main .account-managers-holder {
color: #fff;
}
.contact header.main .company-details a,
.contact header.main .account-managers-holder a {
color: #00C7FF;
text-decoration: none;
}
.contact header.main .flexable-layout {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin: 0 auto;
padding-bottom: 3.57142857%;
width: 71.42857143%;
}
@media screen and (max-width: 1080px) {
.contact header.main .phone-holder,
.contact header.main .flexable-layout {
width: 78.57142857%;
}
.contact header.main .flexable-layout {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.contact header.main .company-details {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
width: 100%;
}
.contact header.main .account-managers-holder {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin-bottom: 7.14285714%;
width: 100%;
}
}
@media screen and (max-width: 768px) {
.contact header.main .account-managers-holder {
padding-bottom: 7.14285714%;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
}
.contact .company-details {
width: 50%;
}
.contact .account-managers-holder {
width: 50%;
}
.contact .sm-icon {
display: inline-block;
height: 22px;
margin-right: 10px;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: 0 -60px;
}
.contact .sm-icon.facebook {
width: 12px;
}
.contact .sm-icon.linkedin {
width: 22px;
background-position: -20px -60px;
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
}
.contact .sm-icon.instagram {
width: 22px;
background-position: -75px -60px;
}
@media screen and (max-width: 1080px) {
.contact .form-maps-holder {
width: 78.57142857%;
}
}
.contact .form-holder {
padding-bottom: 10%;
}
@media screen and (max-width: 1080px) {
.contact .form-holder {
display: block;
margin: 0 auto;
width: 72.72727273%;
}
}
@media screen and (max-width: 768px) {
.contact .form-holder {
width: 100%;
}
}
.contact .maps-holder {
margin-left: 10%;
}
@media screen and (max-width: 1080px) {
.contact .maps-holder {
display: block;
margin: 0 auto;
width: 80%;
}
}
@media screen and (max-width: 768px) {
.contact .maps-holder {
width: 100%;
}
}
.contact .map-square {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: 20%;
}
.contact .map-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.contact #map {
width: 100%;
height: 110%;
}
/* ==========================================================================
Specific CSS for the home page
@mixin ========================================================================= */
.intro-section {
position: relative;
z-index: 2;
background: #0000FF;
color: #fff;
}
.intro-section .intro {
padding: 10.71428571% 0 10.71428571%;
}
.intro-section p {
margin: 0;
font-size: 2rem;
font-weight: 500;
line-height: 1.33333;
}
.intro-section .breadcrumb {
display: block;
margin-top: -0.5em;
margin-bottom: 4.64285714vw;
color: rgba(255, 255, 255, 0.5);
font-size: .8rem;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
white-space: nowrap;
}
@media screen and (max-width: 1366px) {
.intro-section .intro p {
font-size: 1.8rem;
}
}
@media screen and (max-width: 1080px) {
.intro-section .intro {
width: 78.57142857%;
}
.intro-section .intro p {
font-size: 1.6rem;
}
}
@media screen and (max-width: 768px) {
.intro-section .intro {
width: 71.42857143%;
}
.intro-section .intro p {
font-size: 1.3rem;
}
}
@media screen and (max-width: 500px) {
.intro-section .intro-section .header-drip {
display: none;
}
.intro-section .intro-section .intro {
padding: 30px 20px 40px;
width: 100%;
}
.intro-section .intro-section .intro p {
font-size: 1.1rem;
line-height: 1.3;
}
}
.home .featured-cases {
max-width: 1680px;
margin: 0 auto;
}
.home .about-our-company .text-block {
padding-top: 14.28571429%;
padding-bottom: 14.28571429%;
}
.home .featured-testimonials {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.home .award-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.home .award-container .award-logo,
.home .award-container .award-text {
width: 50%;
}
.home .award-container .award-text {
display: table;
padding: 12.5% 0;
}
.home .award-container .award-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.home .award-container .award-logo img {
max-width: 300px;
}
@media screen and (max-width: 1080px) {
.home .award-container {
width: 78.57142857%;
}
}
@media screen and (max-width: 768px) {
.home .award-container .award-logo,
.home .award-container .award-text {
width: 100%;
}
.home .award-container .award-text {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.home .award-container .award-logo {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 9.09090909%;
}
}
@media screen and (max-width: 768px) {
.home .award-container {
width: 100%;
}
.home .award-container .award-text {
padding: 30px 20px;
}
}
.home .about-our-team img {
width: 50%;
max-height: 600px;
-o-object-fit: cover;
object-fit: cover;
}
.home .about-our-team .text-block {
width: 85.71428571%;
padding: 14.28571429%;
}
@media screen and (min-width: 1601px) {
.home .about-our-team .flexable-layout {
padding: 7.14285714% 0;
}
}
@media screen and (max-width: 1080px) {
.home .about-our-company .column-container {
white-space: nowrap;
}
}
@media screen and (max-width: 768px) {
.home .about-our-company .column-container {
white-space: normal;
}
.home .about-our-company .text-block {
padding-right: 8.33333333%;
padding-left: 8.33333333%;
}
.home .about-our-company .col-12 > .col-6 {
width: 100%;
}
.home .about-our-company .col-12 :nth-child(2) {
padding-top: 0;
}
.home .about-our-team .flexable-layout {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.home .about-our-team .flexable-layout .flex-col,
.home .about-our-team .flexable-layout .text-block {
width: 100%;
}
.home .about-our-team .flexable-layout img {
width: 100%;
height: 56.25vw;
}
.home .about-our-company .column-container {
width: 100%;
}
.home .about-our-company .text-block {
padding: 30px 20px 40px;
border-bottom: 1px solid #eaeaea;
}
.home .about-our-company .text-block:nth-child(2) {
padding-top: 30px;
}
.home .about-our-team .flexable-layout .flex-col {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.home .about-our-team .flexable-layout img {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.home .about-our-team .text-block {
padding: 30px 20px 40px;
}
}
/**
* video header
*
* 1. Set up the height on 90% of viewport for now, maybe adjust later
*/
section.video {
position: relative;
overflow: hidden;
max-height: 95vh;
min-height: 600px;
}
@media screen and (max-width: 1080px) {
section.video {
max-height: none;
min-height: 0;
}
}
section.video .video-container {
position: relative;
padding-bottom: 56.3%;
background: #1d2433;
}
section.video iframe,
section.video .video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section.video .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
section.video .contained-layout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
}
section.video .logo-web-branding-agency {
position: absolute;
bottom: 0;
left: 0;
fill: #fff;
padding-bottom: 20%;
}
@media screen and (max-width: 1080px) {
section.video .logo-holder {
margin-left: 10.71428571%;
}
}
@media screen and (max-width: 768px) {
section.video .logo-holder {
display: none;
}
section.video .overlay {
display: none;
}
}
#ytplayer {
opacity: 0;
}
/* ==========================================================================
Specific CSS for the jobs page
@mixin ========================================================================= */
.ip header.main {
padding-bottom: 7.14285714%;
margin-bottom: 0;
}
.ip header.main .intro {
font-size: 1rem;
padding-bottom: 0;
margin-bottom: 60px;
}
.ip .ip-address {
color: #00C7FF;
}
.ip input[name="name"],
.ip input[name="company"] {
margin-bottom: 60px;
max-width: 300px;
color: #fff;
}
.ip input[name="name"]::-webkit-input-placeholder,
.ip input[name="name"]::-webkit-input-placeholder,
.ip input[name="name"]::-moz-placeholder,
.ip input[name="name"]:-ms-input-placeholder,
.ip input[name="name"]:-moz-placeholder,
.ip input[name="company"]::-webkit-input-placeholder,
.ip input[name="company"]::-webkit-input-placeholder,
.ip input[name="company"]::-moz-placeholder,
.ip input[name="company"]:-ms-input-placeholder,
.ip input[name="company"]:-moz-placeholder {
color: #B2B2FD;
}
.ip input[name="name"]::placeholder,
.ip input[name="name"]::-webkit-input-placeholder,
.ip input[name="name"]::-moz-placeholder,
.ip input[name="name"]:-ms-input-placeholder,
.ip input[name="name"]:-moz-placeholder,
.ip input[name="company"]::placeholder,
.ip input[name="company"]::-webkit-input-placeholder,
.ip input[name="company"]::-moz-placeholder,
.ip input[name="company"]:-ms-input-placeholder,
.ip input[name="company"]:-moz-placeholder {
color: #B2B2FD;
}
.ip label {
color: #ffffff;
}
/* ==========================================================================
Specific CSS for the jobs page
@mixin ========================================================================= */
.jobs header.main {
margin-bottom: 0;
}
.jobs header.main .intro {
padding: 14.28571429% 0 7.14285714%;
}
.jobs .job-list {
margin-top: 12.5%;
padding: 0;
color: #00C7FF;
font-size: 18px;
line-height: 1.4;
list-style: none;
}
.jobs .job-list li {
margin-bottom: 10px;
}
.jobs .job-list a {
display: block;
padding: 20px;
border: solid 2px #00C7FF;
font-size: 1.1em;
cursor: pointer;
}
.jobs .job-list a:hover {
border: solid 2px #fff;
color: #fff;
}
.jobs .our-offer {
margin-bottom: 7.14285714%;
}
.jobs .image-holder {
margin-bottom: 7.14285714%;
}
@media screen and (max-width: 1080px) {
.jobs .summary .text-block,
.jobs .job .text-block {
display: block;
width: 83.33333333%;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
}
.jobs .summary .text-block:first-child,
.jobs .job .text-block:first-child {
padding-bottom: 1em;
}
.jobs .summary .text-block:nth-child(2),
.jobs .job .text-block:nth-child(2) {
padding-top: 0;
}
.jobs .summary .text-block .h2-spacer,
.jobs .job .text-block .h2-spacer {
display: none;
}
.jobs .summary {
margin-bottom: 80px;
}
.jobs .our-offer {
display: block;
margin: 0 auto;
width: 71.42857143%;
}
}
@media screen and (max-width: 768px) {
.jobs .summary .text-block,
.jobs .job .text-block {
width: 100%;
}
.jobs .summary .image-holder {
width: 100%;
}
.jobs .our-offer {
width: 85.71428571%;
}
}
@media screen and (max-width: 500px) {
.jobs .our-offer {
width: 100%;
padding: 0 20px;
}
.jobs .summary,
.jobs .job {
padding: 0 20px;
}
}
.job header.main .intro {
padding: 14.28571429% 0 3.57142857%;
}
.job header.main .intro h1 {
margin: 0;
color: #fff;
font-size: 2rem;
font-weight: 500;
line-height: 1.25;
text-transform: none;
}
.job .job-description {
margin-bottom: 7.14285714%;
}
.job .back-to-grid {
margin-bottom: 16.66666667%;
}
.job .call-to-action-block {
margin-bottom: 0;
line-height: 1.4;
}
.job .call-to-action-block .flex-col:first-child {
margin-right: 12.5%;
width: 37.5%;
}
.job .call-to-action-block h3 {
color: #fff;
}
.job .call-to-action-block ol {
margin-bottom: 0;
}
.job .summary .text-block.top-indent .h2-spacer {
margin-top: -27px;
}
.job .summary .image-holder {
margin-bottom: 7.14285714%;
}
.job .back-to-grid-holder {
text-align: center;
}
@media screen and (max-width: 1366px) {
.job header.main .intro,
.job .job-description .col-6 {
width: 71.42857143%;
}
.job .call-to-action-block {
width: 100%;
}
.job .summary .text-block {
display: block;
width: 100%;
}
.job .summary .text-block:first-child {
padding-bottom: 0;
}
.job .summary .text-block.top-indent .h2-spacer {
display: none;
}
.job .summary .image-holder {
width: 100%;
}
}
@media screen and (max-width: 1366px) and (max-width: 768px) {
.job header.main .intro,
.job .job-description .col-6 {
width: 90%;
line-height: 1.45;
}
.job .call-to-action-block h2 {
display: none;
}
}
/* ==========================================================================
Specific CSS for the offer page
@mixin ========================================================================= */
.offer .form-holder {
padding-bottom: 10%;
}
.offer .account-managers-holder .account-manager .function {
color: rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 1080px) {
.offer .form-holder {
display: block;
margin: 0 auto;
width: 80%;
}
.offer .account-managers-holder {
width: 100%;
margin-bottom: 10%;
}
}
@media screen and (max-width: 768px) {
.offer .form-managers-holder {
width: 78.57142857%;
}
.offer .form-holder,
.offer .account-managers-holder {
width: 100%;
margin-left: 0;
}
}
/* ==========================================================================
Specific CSS for the process page
@mixin ========================================================================= */
.process header.main {
margin-bottom: 0;
}
.process .process-step {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
max-width: 1680px;
height: 100vh;
}
.process .process-step .image {
width: 50%;
background: #efefef;
background-size: cover;
}
.process .process-step .text-block-holder {
width: 50%;
-ms-flex-item-align: center;
align-self: center;
}
.process .process-step .text-block {
padding: 14.28571429%;
}
.process .process-step .text-block > * {
opacity: 0;
-webkit-transform: translate3d(0, 60px, 0);
transform: translate3d(0, 60px, 0);
}
.process .process-step .button {
cursor: pointer;
}
.process .process-step:nth-child(2n) .image {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.process .process-step:nth-child(2n) .text-block-holder {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
@media screen and (max-width: 1080px) {
.process .process-step {
height: auto;
}
}
@media screen and (max-width: 768px) {
.process .process-step {
display: block;
}
.process .process-step .image {
width: 100%;
height: 75vw;
}
.process .process-step .text-block-holder {
width: 100%;
}
}
@media screen and (max-width: 500px) {
.process .process-step .text-block {
padding: 30px 20px 40px;
}
.process .process-step .text-block .button {
margin-top: 10px;
}
.process .process-step h2 {
margin-bottom: 20px;
}
}
/* ==========================================================================
Specific CSS for the services page
@mixin ========================================================================= */
.services header.main {
margin-bottom: 0;
}
@media screen and (max-width: 1080px) {
.services header.main .intro {
width: 71.42857143%;
}
.services .call-to-action-block {
padding-left: 14.28571429%;
padding-right: 14.28571429%;
margin: 0;
}
.services .call-to-action-block .flex-col:first-child {
margin-right: 20%;
}
}
@media screen and (max-width: 500px) {
.services header.main .intro {
width: 100%;
}
.services .call-to-action-block {
padding: 30px 20px;
}
}
/* Services Grid
@mixin ========================================================================= */
.services-grid {
background: #0000FF;
}
.services-grid ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 60px;
padding: 0 0 10%;
width: 100%;
margin: 0 auto 10%;
list-style: none;
font-size: 18px;
}
.services-grid li {
border-bottom: 1px solid white;
}
.services-grid li:hover {
border-color: #00C7FF;
}
.services-grid li:hover .title {
color: #00C7FF;
}
.services-grid li:hover .arrow {
-webkit-transform: translate3D(20px, 0, 0);
transform: translate3D(20px, 0, 0);
}
.services-grid a {
display: block;
padding-bottom: 1.5rem;
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: borderColor 200ms ease-out;
transition: borderColor 200ms ease-out;
}
.services-grid .title {
display: block;
height: 6rem;
color: #fff;
line-height: 1.142857;
font-size: 1.4rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
-webkit-transition: color 200ms ease-out;
transition: color 200ms ease-out;
}
.services-grid .arrow {
display: block;
width: 25px;
height: 14px;
margin: 23px 0;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: 0 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}
.services-grid .comment {
display: block;
}
@media screen and (max-width: 1080px) {
.services-grid ul {
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
}
}
@media screen and (max-width: 1080px) {
.services-grid ul {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 500px) {
.services-grid ul {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 500px) {
.services-grid .col-10 {
width: 100%;
}
.services-grid ul {
border-top: 1px solid #fff;
padding-bottom: 0;
grid-gap: 0;
}
.services-grid li {
padding-bottom: 0;
}
.services-grid li:last-child {
border: none;
}
.services-grid a {
position: relative;
padding: 30px 20px;
}
.services-grid .title {
font-size: 1.2rem;
height: auto;
}
.services-grid .comment {
width: 75%;
}
.services-grid .arrow {
position: absolute;
top: 50%;
right: 20px;
margin-top: -6px;
}
}
/* ==========================================================================
Specific CSS for the services detail page
@mixin ========================================================================= */
.service header.main {
margin-bottom: 0;
}
.service .go-back-holder,
.service .title-holder {
position: relative;
padding-bottom: 14.28571429%;
}
.service .go-back-holder .alignment-controller,
.service .title-holder .alignment-controller {
position: absolute;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
width: 100%;
}
.service .go-back-holder .alignment-controller {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.service .title-holder h2 {
padding-left: 14.28571429%;
margin: 0;
}
@media screen and (max-width: 1366px) {
.service .title-holder h2 {
padding-left: 7.14285714%;
}
}
@media screen and (max-width: 768px) {
.service {
text-align: left;
}
.service .title-holder h2 {
padding-left: 0;
}
.service .title-holder,
.service .go-back-holder {
padding: 30px 10.71428571%;
width: 100%;
}
.service .title-holder .alignment-controller,
.service .go-back-holder .alignment-controller {
position: relative;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
@media screen and (max-width: 500px) {
.service .go-back-holder,
.service .title-holder {
padding: 30px 20px;
}
}
.service .description-container .image {
margin-bottom: 7.14285714%;
}
.service .description-container .text-block {
padding-top: 0;
}
.service .description-container hr {
border: 0;
height: 1px;
margin: 16.66666667% 0 10px;
background: #eaeaea;
}
.service .description-container .next-service {
display: inline-block;
position: relative;
padding-right: 22px;
color: #1D2433;
text-decoration: none;
}
.service .description-container .next-service:after {
position: absolute;
top: 7px;
right: 0;
content: '';
width: 14px;
height: 14px;
background-image: url(/img/komma/komma_sprite.svg);
background-size: 140px 85px;
background-position: -80px -20px;
-webkit-transition: -webkit-transform 300ms ease-out;
transition: -webkit-transform 300ms ease-out;
transition: transform 300ms ease-out;
transition: transform 300ms ease-out, -webkit-transform 300ms ease-out;
}
.service .description-container .next-service:hover:after {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
.service .featured-cases {
max-width: 1680px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.service .description-container .image {
margin-bottom: 0;
width: 100%;
}
.service .text-block {
padding: 14.28571429% 7.14285714% !important;
width: 100%;
}
}
@media screen and (max-width: 500px) {
.service .description-container .image {
margin-top: 0;
}
}
/* ==========================================================================
Testimonial specific css
@mixin ========================================================================= */
.testimonial-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 50%;
background-repeat: no-repeat;
background-size: contain;
background-position: left bottom;
/* Responsive Testimonials
@mixin ========================================================================= */
}
.testimonial-container:nth-child(2n) {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.testimonial-container .contained-layout {
display: grid;
grid-template-columns: 6fr 6fr 2fr;
grid-template-areas: '. quote .';
max-width: 840px;
margin: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.testimonial-container .quote {
grid-area: quote;
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
font-weight: 300;
line-height: 1.3;
white-space: normal;
padding-top: 100px;
}
.testimonial-container .author {
margin-top: 1em;
display: block;
color: #fff;
font-size: 1rem;
font-style: normal;
font-weight: 600;
}
.testimonial-container .button {
margin: 60px 0 100px;
font-style: normal;
}
@media screen and (max-width: 1080px) {
.testimonial-container {
background-size: auto 300px;
}
.testimonial-container .contained-layout {
display: block;
padding: 50px 14.28571429% 300px;
}
.testimonial-container .quote {
padding-top: 0;
font-size: 1.3rem;
line-height: 1.4;
}
.testimonial-container .button {
margin-bottom: 0;
}
}
@media screen and (max-width: 768px) {
.testimonial-container {
width: 100%;
}
.testimonial-container .contained-layout {
padding: 7.14285714% 7.14285714% 300px;
}
}
@media screen and (max-width: 500px) {
.testimonial-container .contained-layout {
padding: 30px 20px 300px;
}
}
/* Testimonial page CSS
@mixin ========================================================================= */
.testimonials header.main {
margin-bottom: 0;
}
.testimonial-logo-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
/**
* Grid layout for our list
*/
}
.testimonial-logo-grid .clients {
position: relative;
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 30px;
padding: 3.57142857vw 7.14285714vw;
width: 100%;
list-style: none;
}
@media screen and (max-width: 1366px) {
.testimonial-logo-grid .clients {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
}
@media screen and (max-width: 1080px) {
.testimonial-logo-grid .clients {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@media screen and (max-width: 768px) {
.testimonial-logo-grid .clients {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (max-width: 500px) {
.testimonial-logo-grid .clients {
grid-template-columns: 1fr 1fr;
}
}
.testimonial-logo-grid .clients .inner-shadow {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
-webkit-box-shadow: inset 0px -100px 100px -50px white;
box-shadow: inset 0px -100px 100px -50px white;
}
.testimonial-logo-grid .clients .toggle-client-mask {
position: absolute;
left: 50%;
bottom: -30px;
margin-left: -30px;
width: 60px;
height: 60px;
cursor: pointer;
}
html.ie .testimonial-logo-grid .clients ul::after {
clear: both;
content: "";
display: table;
}
html.ie .testimonial-logo-grid .clients ul li {
float: left;
width: 25%;
}
html.ie .testimonial-logo-grid::after {
clear: both;
content: "";
display: table;
}
html.ie .testimonial-logo-grid .testimonial-container {
padding: 50px;
float: left;
width: 50%;
}
@media screen and (max-width: 768px) {
.testimonial-logo-grid .client-logo-group {
width: 100%;
}
}
/*==========================================================================
Posts overview page
@mixin ========================================================================= */
.posts header.main {
margin-bottom: 0;
padding: 3.57142857% 3.57142857% 0 3.57142857%;
}
@media screen and (min-width: 1601px) {
.posts header.main {
padding: 60px 60px 0 60px;
}
}
@media screen and (max-width: 768px) {
.posts header.main {
padding: 0 3.57142857%;
}
}
@media screen and (max-width: 500px) {
.posts header.main {
padding: 0;
}
}
.posts header.main .height-controller {
position: relative;
overflow: hidden;
max-height: 87vh;
}
@media screen and (max-width: 1080px) {
.posts header.main .height-controller {
max-height: none;
min-height: 0;
}
}
.posts header.main .ratio-controller {
position: relative;
width: 100%;
height: 0;
padding-bottom: 42%;
}
@media screen and (max-width: 768px) {
.posts header.main .ratio-controller {
padding-bottom: 60%;
}
}
@media screen and (max-width: 500px) {
.posts header.main .ratio-controller {
padding-bottom: 80%;
}
}
.posts header.main {
margin-bottom: 7.14285714%;
}
.posts header.main .wrapper,
.posts header.main .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.posts header.main .wrapper {
background: rgba(0, 0, 255, 0.5);
}
.posts header.main .background-image {
background-size: cover;
background-position: 50% 50%;
}
.posts header.main .flexable-layout {
margin: 0 auto;
max-width: 1680px;
height: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.posts header.main .title-holder {
width: 85.71428571%;
max-width: 720px;
text-align: center;
}
.posts header.main .blog-title {
display: block;
padding-bottom: 30px;
color: #00C7FF;
font-size: .9rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
}
.posts header.main h1 {
display: block;
margin: 0;
padding-bottom: 30px;
color: #fff;
font-size: 2rem;
font-weight: 500;
line-height: 1.25;
}
.posts header.main .button {
border-radius: 100px;
}
@media screen and (max-width: 1080px) {
.posts header.main .blog-title {
padding-bottom: 20px;
}
}
.posts .featured.post-grid {
border-bottom: 1px solid #F4F4F4;
margin-bottom: 5%;
}
.posts h2 {
color: #00C7FF;
font-size: 18px;
line-height: 1.4444;
font-weight: 600;
}
.posts .back-to-grid {
margin-bottom: 8.33333333%;
}
/*==========================================================================
Blog detail page
@mixin ========================================================================= */
.post header.main {
margin-bottom: 0;
padding: 3.57142857% 3.57142857% 0 3.57142857%;
}
@media screen and (min-width: 1601px) {
.post header.main {
padding: 60px 60px 0 60px;
}
}
@media screen and (max-width: 768px) {
.post header.main {
padding: 0 3.57142857%;
}
}
@media screen and (max-width: 500px) {
.post header.main {
padding: 0;
}
}
.post header.main .height-controller {
position: relative;
overflow: hidden;
max-height: 87vh;
}
@media screen and (max-width: 1080px) {
.post header.main .height-controller {
max-height: none;
min-height: 0;
}
}
.post header.main .ratio-controller {
position: relative;
width: 100%;
height: 0;
padding-bottom: 42%;
}
@media screen and (max-width: 768px) {
.post header.main .ratio-controller {
padding-bottom: 60%;
}
}
@media screen and (max-width: 500px) {
.post header.main .ratio-controller {
padding-bottom: 80%;
}
}
.post header.main .wrapper,
.post header.main .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.post header.main .wrapper {
background: rgba(0, 0, 255, 0.5);
}
.post header.main .background-image {
background-size: cover;
background-position: 50% 50%;
}
.post header.main .flexable-layout {
margin: 0 auto;
max-width: 1680px;
height: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.post header.main .title-holder {
display: block;
width: 85.71428571%;
max-width: 720px;
text-align: center;
}
.post header.main .blog-title {
display: block;
padding-bottom: 30px;
color: #00C7FF;
font-size: .9rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
}
.post header.main h1 {
display: block;
margin: 0;
color: #fff;
font-size: 2rem;
font-weight: 500;
line-height: 1.25;
}
@media screen and (max-width: 768px) {
.post header.main .blog-title {
padding-bottom: 10px;
}
.post header.main h1 {
font-size: 1.8rem;
}
}
.post .post-container {
width: 720px;
margin: 0 auto;
white-space: normal;
font-size: 18px;
}
.post .post-body section:last-child {
margin-bottom: 16.66666667%;
}
.post .post-body h2 {
margin: 2rem 0;
}
.post .post-body p:last-child {
margin: 0;
}
.post .post-intro {
margin: 16.66666667% 0 8.33333333%;
color: #1E2433;
font-size: 1.22222rem;
line-height: 1.54545;
}
.post .post-full-image img {
display: block;
margin: 8.33333333% 0;
width: 100%;
}
.post .back-to-grid {
margin-bottom: 5%;
}
.post .related-posts {
border-top: 1px solid #eaeaea;
padding: 3.57142857% 0 7.14285714%;
}
.post .related-posts h2 {
display: block;
margin-top: -10px;
font-weight: 300;
font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
.post .post-container {
width: 92.85714286%;
}
.post .post-intro {
font-size: 1.1rem;
}
}
@media screen and (max-width: 500px) {
.post .post-container {
width: 100%;
padding: 0 20px;
}
}
/*==========================================================================
Global for post index and show
@mixin ========================================================================= */
.posts-container {
width: 1200px;
margin: 0 auto;
white-space: normal;
font-size: 18px;
}
@media screen and (max-width: 1300px) {
.posts-container {
width: 85.71428571%;
}
}
@media screen and (max-width: 500px) {
.posts-container {
padding-top: 60px;
}
.posts-container .posts-container,
.posts-container .posts-container.related-posts {
width: 100%;
padding: 0 20px;
}
}