File: D:/HostingSpaces/SBogers10/ehboledensysteem.komma.pro/wwwroot/css/style.css
@charset "UTF-8";
/* ==========================================================================
* Config settings
* ========================================================================== */
/**
* * 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
* ========================================================================== */
/**
* * Add some functions for readability
* * Return font-weight based on name
* */
/* ==========================================================================
* Functions used in grid calculation
* ========================================================================== */
/**
* * 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
* ========================================================================== */
* {
box-sizing: border-box;
}
/* * Set up the body
* *
* * 1. This is the base for al rem units
* */
html {
font-size: 20px;
line-height: 1.6;
}
/**
* * 1.Default display for images is block to lose the extra margin below the image
* * 2. Remove border / especially on older browsers
* */
img {
display: block;
border: none;
}
/**
* * Add translation to prevent recoloring from autocomplete
* */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
-webkit-transition: all 9999s linear 9999s;
transition: all 9999s linear 9999s;
}
input::-moz-placeholder, textarea::-moz-placeholder {
-moz-transition: all 9999s linear 9999s;
transition: all 9999s linear 9999s;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-ms-transition: all 9999s linear 9999s;
transition: all 9999s linear 9999s;
}
input:-moz-placeholder, textarea:-moz-placeholder {
-moz-transition: all 9999s linear 9999s;
transition: all 9999s linear 9999s;
}
/* * Remove default margin around figure
* */
figure {
margin: 0;
}
/*==========================================================================
* Grid
* ========================================================================== */
/**
* * Grid row
* *
* * 1. The outer two columns are just margin
* * 2. Prevent inline-block cells wrapping
* * 3. Prevent vertical spacing between inline-blocks
* */
.grid-row {
width: 85.7142857143%;
max-width: 1440px;
margin: 0 auto;
font-size: 0;
line-height: 0;
/**
* * The full row doesn't have the two outer margin rows
* * They stretch till both ends of the window
* */
}
.grid-row.full-row {
width: 100%;
max-width: none;
}
/**
* * Grid column
* *
* * 1. Reset white-space inherited from `.grid`
* * 2. Reset font-size inherited from `.grid`
* * 3. Reset line-height inherited from `.grid`
* */
.grid-col {
position: relative;
display: inline-block;
overflow: hidden;
white-space: normal;
font-size: 1rem;
line-height: 1.6;
/**
* * Center column
* *
* * 1. 'inline-block' doesn't center with margin '0 auto'
* */
}
.grid-col.center {
display: block;
margin: 0 auto;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-1, .col-lg-1 {
width: 8.3333333333%;
}
.full-row .col-1, .full-row .col-lg-1 {
width: 7.1428571429%;
}
/* Column shifts
* ========================================================================== */
.offset-1, .offset-lg-1 {
margin-left: 8.3333333333%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-2, .col-lg-2 {
width: 16.6666666667%;
}
.full-row .col-2, .full-row .col-lg-2 {
width: 14.2857142857%;
}
/* Column shifts
* ========================================================================== */
.offset-2, .offset-lg-2 {
margin-left: 16.6666666667%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-3, .col-lg-3 {
width: 25%;
}
.full-row .col-3, .full-row .col-lg-3 {
width: 21.4285714286%;
}
/* Column shifts
* ========================================================================== */
.offset-3, .offset-lg-3 {
margin-left: 25%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-4, .col-lg-4 {
width: 33.3333333333%;
}
.full-row .col-4, .full-row .col-lg-4 {
width: 28.5714285714%;
}
/* Column shifts
* ========================================================================== */
.offset-4, .offset-lg-4 {
margin-left: 33.3333333333%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-5, .col-lg-5 {
width: 41.6666666667%;
}
.full-row .col-5, .full-row .col-lg-5 {
width: 35.7142857143%;
}
/* Column shifts
* ========================================================================== */
.offset-5, .offset-lg-5 {
margin-left: 41.6666666667%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-6, .col-lg-6 {
width: 50%;
}
.full-row .col-6, .full-row .col-lg-6 {
width: 42.8571428571%;
}
/* Column shifts
* ========================================================================== */
.offset-6, .offset-lg-6 {
margin-left: 50%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-7, .col-lg-7 {
width: 58.3333333333%;
}
.full-row .col-7, .full-row .col-lg-7 {
width: 50%;
}
/* Column shifts
* ========================================================================== */
.offset-7, .offset-lg-7 {
margin-left: 58.3333333333%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-8, .col-lg-8 {
width: 66.6666666667%;
}
.full-row .col-8, .full-row .col-lg-8 {
width: 57.1428571429%;
}
/* Column shifts
* ========================================================================== */
.offset-8, .offset-lg-8 {
margin-left: 66.6666666667%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-9, .col-lg-9 {
width: 75%;
}
.full-row .col-9, .full-row .col-lg-9 {
width: 64.2857142857%;
}
/* Column shifts
* ========================================================================== */
.offset-9, .offset-lg-9 {
margin-left: 75%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-10, .col-lg-10 {
width: 83.3333333333%;
}
.full-row .col-10, .full-row .col-lg-10 {
width: 71.4285714286%;
}
/* Column shifts
* ========================================================================== */
.offset-10, .offset-lg-10 {
margin-left: 83.3333333333%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-11, .col-lg-11 {
width: 91.6666666667%;
}
.full-row .col-11, .full-row .col-lg-11 {
width: 78.5714285714%;
}
/* Column shifts
* ========================================================================== */
.offset-11, .offset-lg-11 {
margin-left: 91.6666666667%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-12, .col-lg-12 {
width: 100%;
}
.full-row .col-12, .full-row .col-lg-12 {
width: 85.7142857143%;
}
/* Column shifts
* ========================================================================== */
.offset-12, .offset-lg-12 {
margin-left: 100%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-13, .col-lg-13 {
width: 108.3333333333%;
}
.full-row .col-13, .full-row .col-lg-13 {
width: 92.8571428571%;
}
/* Column shifts
* ========================================================================== */
.offset-13, .offset-lg-13 {
margin-left: 108.3333333333%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-14, .col-lg-14 {
width: 116.6666666667%;
}
.full-row .col-14, .full-row .col-lg-14 {
width: 100%;
}
/* Column shifts
* ========================================================================== */
.offset-14, .offset-lg-14 {
margin-left: 116.6666666667%;
}
/* Media queries
* ========================================================================== */
*
* /*
* * Create a separate loop because of order for css rendering
* * because else it would overrule a previous media query
* */
@media screen and (min-width: 1601px) {
.col-xl-1 {
width: 8.3333333333%;
}
.offset-xl-1 {
margin-left: 8.3333333333%;
}
}
@media screen and (max-width: 1080px) {
.col-md-1 {
width: 8.3333333333%;
}
.offset-md-1 {
margin-left: 8.3333333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-1 {
width: 8.3333333333%;
}
.offset-sm-1 {
margin-left: 8.3333333333%;
}
}
@media screen and (max-width: 400px) {
.col-xs-1 {
width: 8.3333333333%;
}
.offset-xs-1 {
margin-left: 8.3333333333%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-2 {
width: 16.6666666667%;
}
.offset-xl-2 {
margin-left: 16.6666666667%;
}
}
@media screen and (max-width: 1080px) {
.col-md-2 {
width: 16.6666666667%;
}
.offset-md-2 {
margin-left: 16.6666666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-2 {
width: 16.6666666667%;
}
.offset-sm-2 {
margin-left: 16.6666666667%;
}
}
@media screen and (max-width: 400px) {
.col-xs-2 {
width: 16.6666666667%;
}
.offset-xs-2 {
margin-left: 16.6666666667%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-3 {
width: 25%;
}
.offset-xl-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: 400px) {
.col-xs-3 {
width: 25%;
}
.offset-xs-3 {
margin-left: 25%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-4 {
width: 33.3333333333%;
}
.offset-xl-4 {
margin-left: 33.3333333333%;
}
}
@media screen and (max-width: 1080px) {
.col-md-4 {
width: 33.3333333333%;
}
.offset-md-4 {
margin-left: 33.3333333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
width: 33.3333333333%;
}
.offset-sm-4 {
margin-left: 33.3333333333%;
}
}
@media screen and (max-width: 400px) {
.col-xs-4 {
width: 33.3333333333%;
}
.offset-xs-4 {
margin-left: 33.3333333333%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-5 {
width: 41.6666666667%;
}
.offset-xl-5 {
margin-left: 41.6666666667%;
}
}
@media screen and (max-width: 1080px) {
.col-md-5 {
width: 41.6666666667%;
}
.offset-md-5 {
margin-left: 41.6666666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-5 {
width: 41.6666666667%;
}
.offset-sm-5 {
margin-left: 41.6666666667%;
}
}
@media screen and (max-width: 400px) {
.col-xs-5 {
width: 41.6666666667%;
}
.offset-xs-5 {
margin-left: 41.6666666667%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-6 {
width: 50%;
}
.offset-xl-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: 400px) {
.col-xs-6 {
width: 50%;
}
.offset-xs-6 {
margin-left: 50%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-7 {
width: 58.3333333333%;
}
.offset-xl-7 {
margin-left: 58.3333333333%;
}
}
@media screen and (max-width: 1080px) {
.col-md-7 {
width: 58.3333333333%;
}
.offset-md-7 {
margin-left: 58.3333333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-7 {
width: 58.3333333333%;
}
.offset-sm-7 {
margin-left: 58.3333333333%;
}
}
@media screen and (max-width: 400px) {
.col-xs-7 {
width: 58.3333333333%;
}
.offset-xs-7 {
margin-left: 58.3333333333%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-8 {
width: 66.6666666667%;
}
.offset-xl-8 {
margin-left: 66.6666666667%;
}
}
@media screen and (max-width: 1080px) {
.col-md-8 {
width: 66.6666666667%;
}
.offset-md-8 {
margin-left: 66.6666666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-8 {
width: 66.6666666667%;
}
.offset-sm-8 {
margin-left: 66.6666666667%;
}
}
@media screen and (max-width: 400px) {
.col-xs-8 {
width: 66.6666666667%;
}
.offset-xs-8 {
margin-left: 66.6666666667%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-9 {
width: 75%;
}
.offset-xl-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: 400px) {
.col-xs-9 {
width: 75%;
}
.offset-xs-9 {
margin-left: 75%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-10 {
width: 83.3333333333%;
}
.offset-xl-10 {
margin-left: 83.3333333333%;
}
}
@media screen and (max-width: 1080px) {
.col-md-10 {
width: 83.3333333333%;
}
.offset-md-10 {
margin-left: 83.3333333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-10 {
width: 83.3333333333%;
}
.offset-sm-10 {
margin-left: 83.3333333333%;
}
}
@media screen and (max-width: 400px) {
.col-xs-10 {
width: 83.3333333333%;
}
.offset-xs-10 {
margin-left: 83.3333333333%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-11 {
width: 91.6666666667%;
}
.offset-xl-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (max-width: 1080px) {
.col-md-11 {
width: 91.6666666667%;
}
.offset-md-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-11 {
width: 91.6666666667%;
}
.offset-sm-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (max-width: 400px) {
.col-xs-11 {
width: 91.6666666667%;
}
.offset-xs-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-12 {
width: 100%;
}
.offset-xl-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: 400px) {
.col-xs-12 {
width: 100%;
}
.offset-xs-12 {
margin-left: 100%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-13 {
width: 108.3333333333%;
}
.offset-xl-13 {
margin-left: 108.3333333333%;
}
}
@media screen and (max-width: 1080px) {
.col-md-13 {
width: 108.3333333333%;
}
.offset-md-13 {
margin-left: 108.3333333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-13 {
width: 108.3333333333%;
}
.offset-sm-13 {
margin-left: 108.3333333333%;
}
}
@media screen and (max-width: 400px) {
.col-xs-13 {
width: 108.3333333333%;
}
.offset-xs-13 {
margin-left: 108.3333333333%;
}
}
@media screen and (min-width: 1601px) {
.col-xl-14 {
width: 116.6666666667%;
}
.offset-xl-14 {
margin-left: 116.6666666667%;
}
}
@media screen and (max-width: 1080px) {
.col-md-14 {
width: 116.6666666667%;
}
.offset-md-14 {
margin-left: 116.6666666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-14 {
width: 116.6666666667%;
}
.offset-sm-14 {
margin-left: 116.6666666667%;
}
}
@media screen and (max-width: 400px) {
.col-xs-14 {
width: 116.6666666667%;
}
.offset-xs-14 {
margin-left: 116.6666666667%;
}
}
/* ==========================================================================
* This grid can be turned on and off when you want to check
* if everything is nice in place.
* ========================================================================== */
.visible-grid-container {
display: flex;
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:before, .visible-grid:after {
content: "";
position: absolute;
top: 0;
width: calc(100% / 12);
height: 100%;
background: rgba(0, 255, 0, 0.5);
}
.visible-grid:before {
left: calc(-100% / 12);
}
.visible-grid:after {
right: calc(-100% / 12);
}
.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: 400px) {
.breakpoint {
background: pink;
}
}
/* ==========================================================================
* Expend Config settings
* ========================================================================== */
/* ==========================================================================
* Expend Basic style settings
* ========================================================================== */
/* * Set up the html
* *
* * 1. Makes sue that some fonts are better rendered
* */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
min-height: 100%;
}
/* * Set up the body
* *
* * 1. Set font to lining figures
* */
body {
margin: 0;
min-height: 100%;
font-family: "Open Sans", sans-serif;
line-height: 1.6;
background-color: #24282D;
font-feature-settings: "lnum";
}
/* * Set default settings for all elements
* *
* * 1. Default selection styling
* *
* */
* ::-moz-selection {
background: #0078ff;
color: white;
}
* ::selection {
background: #0078ff;
color: white;
}
/* * Set default styling for input and textarea
* *
* * 1. Set font because else the agent will overrule them with an ugly font
* */
input, textarea {
font-family: "Open Sans", sans-serif;
background-color: transparent;
}
input:focus, textarea:focus {
outline: none;
}
/* * Set default styling for a button
* *
* */
.button {
display: inline-block;
padding: 10px 20px;
background-color: #00C7FF;
border: 1px solid white;
border-radius: 10px;
text-decoration: none;
color: white;
}
.button .arrow {
display: inline-block;
margin-left: 25px;
background: url("/img/svg/komma_sprite.svg") 35px 1px no-repeat;
background-size: 100px 85px;
width: 15px;
height: 10px;
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.button:hover .arrow {
transform: translate3d(5px, 0, 0);
}
.default-page-content {
background-color: #F7F8FA;
overflow: hidden;
min-height: calc(100% - 659px);
position: relative;
}
.default-page-content > .grid-row.two-columns {
display: flex;
flex-wrap: wrap;
font-size: 0.8rem;
line-height: 1.1;
min-height: 653px;
}
@media screen and (max-width: 650px) {
.default-page-content > .grid-row {
width: 100%;
}
}
.centered {
font-size: 0.8rem;
line-height: 1.1;
width: 83.3333333333%;
padding: 133px 0;
margin: 0 auto 65px auto;
}
@media screen and (max-width: 1280px) {
.centered {
width: 87.5%;
}
}
@media screen and (max-width: 950px) {
.centered {
width: 100%;
}
}
@media screen and (max-width: 850px) {
.centered {
width: 100%;
padding: 60px 0;
margin: 0 auto;
}
}
@media screen and (max-width: 650px) {
.centered {
padding: 0;
}
}
.centered h1 {
color: #373c41;
font-size: 1.6rem;
font-weight: bold;
line-height: 2;
margin: 50px 0 65px 0;
}
.centered .placeholder {
width: 80%;
position: relative;
border-radius: 5px;
background-color: #FFFFFF;
box-shadow: 10px 10px 20px 0 rgba(206, 206, 206, 0.6);
padding: 35px 12.5%;
margin: 0 auto 60px auto;
}
@media screen and (max-width: 1280px) {
.centered .placeholder {
width: 100%;
}
}
@media screen and (max-width: 850px) {
.centered .placeholder {
padding: 35px 6.25%;
}
}
@media screen and (max-width: 650px) {
.centered .placeholder {
margin: 0;
}
}
.sidebar {
font-size: 0.8rem;
line-height: 1.1;
width: 26.6666666667%;
display: inline-block;
vertical-align: top;
background-color: white;
box-shadow: -5px 0px 40px 5px rgba(0, 0, 0, 0.1);
overflow: visible;
position: absolute;
right: 0;
top: 0;
height: 100%;
z-index: 10;
}
@media screen and (max-width: 1280px) {
.sidebar {
width: 33.3333333333%;
}
}
@media screen and (max-width: 900px) {
.sidebar {
height: 100%;
width: 50%;
right: 60px;
transform: translate(100%, 0);
overflow: hidden;
transition: transform 0.5s, width 0.5s;
}
.sidebar.open {
transform: translate(60px, 0);
}
}
@media screen and (max-width: 700px) {
.sidebar.open {
width: 80%;
}
}
@media screen and (max-width: 550px) {
.sidebar.open {
width: 100%;
}
}
.sidebar:after {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 35vw;
height: 100%;
background-color: white;
z-index: 0;
}
.sidebar h1 {
color: #373c41;
font-size: 1.6rem;
font-weight: bold;
line-height: 2;
margin: 50px 0 50px 0;
padding: 0 0 0 14%;
}
.sidebar h1 span.icon {
display: none;
}
@media screen and (max-width: 900px) {
.sidebar h1 span.icon {
width: 25px;
height: 25px;
border-radius: 9999px;
background-color: #dadada;
position: relative;
left: -5px;
top: -10px;
transition: transform 0.4s;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
}
.sidebar h1 span.icon svg {
height: 15px;
width: 15px;
}
}
@media screen and (min-width: 1801px) {
.sidebar h1 {
padding-left: 50px;
}
}
@media screen and (max-width: 900px) {
.sidebar h1 {
position: absolute;
word-break: break-all;
width: 0.7rem;
font-size: 0.8rem;
text-transform: uppercase;
margin-left: 22px;
text-align: center;
padding: 0;
}
}
.sidebar.open h1 span.icon svg {
transform: scaleX(-1);
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 1;
height: calc(100% - 164px);
overflow-x: hidden;
overflow-y: scroll;
}
@media screen and (max-width: 900px) {
.sidebar ul {
margin-left: 60px;
border-left: 1px solid rgba(206, 206, 206, 0.5);
}
}
.sidebar ul li {
padding: 0 50px;
border-top: 1px solid rgba(206, 206, 206, 0.5);
width: 42vw;
text-align: left;
}
@media screen and (max-width: 900px) {
.sidebar ul li {
width: 100%;
}
}
.sidebar ul li p {
width: 50%;
}
@media screen and (max-width: 900px) {
.sidebar ul li p {
width: 100%;
}
}
span.icon {
width: 40px;
height: 40px;
border-radius: 9999px;
margin-right: 25px;
display: inline-flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
}
span.icon svg {
height: 20px;
width: 20px;
}
span.icon svg > g > g, span.icon svg > g use {
fill: white;
}
span.icon.green {
background-color: #04D682;
}
span.icon.lock svg {
position: relative;
left: 1px;
top: -2px;
}
span.icon.cross {
position: absolute;
left: -8.3333333333%;
top: 14px;
}
span.icon.cross svg {
width: 30px;
height: 30px;
}
span.icon.cross svg > g > g {
fill: #d62727;
}
@media screen and (max-width: 850px) {
span.icon.cross {
left: 0;
}
}
@media screen and (max-width: 425px) {
span.icon.cross {
top: 7px;
}
}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button, input[type=date]::-webkit-outer-spin-button, input[type=date]::-webkit-inner-spin-button {
/* display: none <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0;
}
span.error-message {
position: absolute;
left: 0;
bottom: 6px;
font-size: 0.8rem;
background-color: rgba(255, 51, 51, 0.7);
width: 100%;
border-radius: 0 0 5px 5px;
color: white;
padding: 0 10px;
}
span.error-message:first-letter {
text-transform: capitalize;
}
.ui-datepicker .ui-datepicker-header {
background-color: #ff3333;
background-image: none;
}
/* ==========================================================================
* Helper classes
* ========================================================================== */
/**
* * 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: 400px) {
.hide-on-xs-or-smaller {
display: none;
}
}
@media screen and (min-width: 401px) {
.hide-on-xs-or-larger {
display: none;
}
}
/* ==========================================================================
* Partial CSS
* ========================================================================== */
/*==========================================================================
* Navigation / Header
* ========================================================================== */
header {
position: relative;
z-index: 4;
border-bottom: solid 1px rgba(206, 206, 206, 0.8);
background-color: white;
/* Mobile Navigation
* ========================================================================== */
}
header .small-row {
background: linear-gradient(90deg, #d62727 0%, #ff3333 100%);
padding: 16px 0 17px 0;
}
header .small-row .grid-row {
display: flex;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-end;
align-items: center;
}
header .small-row a {
display: inline-flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-start;
align-items: center;
font-size: 0.8rem;
line-height: 1.1;
color: #ededed;
text-decoration: none;
margin-right: 30px;
transition: color 0.2s;
}
header .small-row a:first-of-type {
margin-right: 8.3333333333%;
}
header .small-row a.no-margin-right {
margin-right: 0;
}
header .small-row a span {
color: white;
display: inline-block;
line-height: 0;
margin-right: 10px;
opacity: 0.7;
transition: opacity 0.2s;
}
header .small-row a span.email {
width: 19px;
}
header .small-row a span.phone {
width: 17px;
}
header .small-row a span svg {
width: 100%;
}
header .small-row a:hover {
color: white;
}
header .small-row a:hover span {
opacity: 1;
}
header .large-row {
padding: 8px 0;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-start;
align-items: center;
/* Navigation
* ========================================================================== */
}
header .large-row.guest {
padding-right: 5.5555555556%;
}
header .large-row.guest .logo {
margin-right: auto;
}
header .large-row.guest nav ul {
height: 100%;
}
header .large-row.guest nav ul li {
pointer-events: all;
}
header .large-row.guest nav ul li.active {
pointer-events: none;
}
header .large-row.guest nav ul li:first-of-type {
border-right: solid 2px rgba(176, 176, 176, 0.5);
padding: 10px 45px 10px 0;
}
header .large-row.guest nav ul li a {
text-transform: lowercase;
}
header .large-row .logo {
margin-right: 7.5%;
}
@media screen and (max-width: 1024px) {
header .large-row .logo {
margin-right: 0;
}
}
header .large-row .logo img {
position: relative;
left: -10px;
height: 67px;
}
header .large-row form {
margin-left: auto;
}
header .large-row form .logout-button {
color: #B0B0B0;
border: 1px solid #FFAC34;
border-radius: 6px;
background-color: transparent;
font-size: 0.8rem;
line-height: 1.1;
padding: 8px 18px;
cursor: pointer;
transition: color 0.3s, background-color 0.3s;
}
header .large-row form .logout-button:hover {
background-color: #FFAC34;
color: white;
}
header .large-row nav {
position: relative;
}
header .large-row nav ul {
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-start;
align-items: center;
padding: 0 0 0 10px;
}
header .large-row nav ul li {
margin-right: 45px;
height: 100%;
}
@media screen and (max-width: 920px) {
header .large-row nav ul li {
margin-right: 25px;
}
}
header .large-row nav ul li a {
display: inline-block;
font-size: 0.8rem;
line-height: 1.1;
color: #373c41;
transition: color 0.3s;
text-decoration: none;
}
@media screen and (max-width: 920px) {
header .large-row nav ul li a {
text-decoration: underline;
border-bottom: none;
}
}
header .large-row nav ul li:last-of-type {
margin-right: 0;
}
header .large-row nav ul li:hover a {
color: #d62727;
}
header .large-row nav ul li.active a {
pointer-events: none;
opacity: 1;
border-bottom: solid 1px;
padding-bottom: 2px;
}
header .large-row nav ul li.active:hover a {
color: #373c41;
}
header .shadow {
position: absolute;
left: 0;
bottom: -40px;
width: 100%;
height: 40px;
opacity: 0.4;
background-image: url("/img/vertical-gradient.png");
background-size: contain;
}
@media screen and (max-width: 850px) {
header {
height: 60px;
}
header .small-row,
header .large-row,
header .large-row.guest {
display: none;
}
}
/*==========================================================================
* Footer
* ========================================================================== */
footer {
background-color: #373c41;
/* Sub footer for pay off and our branding
* ========================================================================== */
}
footer > .grid-row {
padding: 70px 0 90px;
}
footer .grid-col {
vertical-align: top;
}
footer .grid-col .header {
font-size: 0.7rem;
text-transform: uppercase;
color: #ff3333;
font-weight: 600;
margin: 0 0 40px;
}
footer .grid-col li a, footer .grid-col p {
font-size: 0.8rem;
color: white;
}
footer .contact {
width: 33.3333333333%;
margin-left: 8.3333333333%;
}
@media screen and (max-width: 850px) {
footer .contact {
margin-left: 0;
padding-left: 8.3333333333%;
width: 100%;
}
}
footer .contact figure {
width: 100%;
max-width: 240px;
margin-bottom: 40px;
}
footer .contact figure img {
width: 100%;
}
footer .contact a {
color: #d62727;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: color 0.2s;
}
footer .contact a:hover {
color: #ff3333;
}
footer .links {
width: 50%;
margin-left: 4.1666666667%;
}
footer .links > .grid-row {
width: 100%;
}
footer .links .menu, footer .links .sub-links {
width: 50%;
vertical-align: top;
}
footer .links ul {
list-style: none;
padding: 0;
margin: 35px 0;
}
footer .links ul li {
margin-bottom: 5px;
}
footer .links ul li a {
text-decoration: none;
opacity: 0.6;
transition: opacity 0.3s;
}
footer .links ul li a:hover {
opacity: 0.9;
}
footer .links ul li.active a {
opacity: 1;
}
@media screen and (max-width: 850px) {
footer .links {
display: none;
}
}
footer .sub-footer {
background-color: #24282D;
padding: 15px 0;
}
footer .sub-footer .grid-row .placeholder {
width: 83.3333333333%;
margin: auto;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: space-between;
align-items: center;
}
footer .sub-footer p, footer .sub-footer a {
font-size: 0.7rem;
color: #dadada;
}
footer .sub-footer p {
margin-bottom: 0.5rem;
}
footer .sub-footer a {
text-decoration: none;
}
footer .sub-footer .komma {
position: relative;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: space-between;
align-items: center;
font-size: 0.7rem;
line-height: 1;
width: 247px;
opacity: 0.4;
color: #dadada;
transition: opacity 0.2s;
}
footer .sub-footer .komma span svg * {
fill: #dadada;
}
@media screen and (max-width: 1080px) {
footer .sub-footer .komma {
font-size: 0.75rem;
width: 240px;
}
footer .sub-footer .komma span {
top: -2px;
}
}
footer .sub-footer .komma:hover {
opacity: 0.7;
color: white;
}
footer .sub-footer .komma span {
position: relative;
top: -1px;
display: inline-block;
width: 78px;
height: 25px;
}
@media screen and (max-width: 600px) {
footer .sub-footer {
padding-bottom: 30px;
}
footer .sub-footer .grid-row .placeholder {
display: block;
text-align: center;
}
footer .sub-footer p {
margin-bottom: 1.4rem;
}
footer .sub-footer .komma {
margin: auto;
}
}
@media screen and (max-width: 850px) {
footer {
padding-top: 35px;
}
footer > .grid-row {
width: 100%;
padding: 0 0 30px 0;
}
footer .sub-footer .grid-row .placeholder {
width: 100%;
}
}
div.shoppingcartItemList ul {
list-style: none;
margin: 0;
padding: 0;
}
div.shoppingcartItemList ul li {
display: block;
width: 100%;
height: 15%;
border: solid 1px #cccccc;
margin-bottom: 20px;
}
/* ==========================================================================
* Default styling for KMS content
* ========================================================================== */
.kms-content h1, .kms-content h2, .kms-content h3 {
font-size: 1.8rem;
line-height: 1.4;
color: #00C7FF;
}
.kms-content h1 strong, .kms-content h2 strong, .kms-content h3 strong {
color: #00C7FF;
font-weight: 400;
}
.kms-content h2, .kms-content h3 {
font-size: 1.4rem;
}
.kms-content h3 {
color: #00C7FF;
}
.kms-content h3 strong {
color: #0078ff;
}
.kms-content h4 {
font-size: 0.8rem;
line-height: 1.3;
color: #0078ff;
text-transform: uppercase;
}
.kms-content p {
font-size: 0.9rem;
line-height: 1.4;
color: #646464;
}
.kms-content ul {
padding-left: 0;
list-style: none;
}
.kms-content ul li {
position: relative;
padding-left: 30px;
font-size: 0.9rem;
line-height: 1.4;
color: #646464;
}
.kms-content ul li:before {
position: absolute;
left: 0;
content: "\2022";
color: #0078ff;
font-size: 1.3em;
line-height: 1;
}
.kms-content ul li + li {
margin-top: 5px;
}
.kms-content ol {
counter-reset: ol-counter;
padding-left: 0;
list-style: none;
}
.kms-content ol li {
padding-left: 30px;
font-size: 0.9rem;
line-height: 1.4;
color: #646464;
}
.kms-content ol li:before {
counter-increment: ol-counter;
content: counter(ol-counter) ".";
position: absolute;
left: 0;
color: #0078ff;
}
.kms-content ol li + li {
margin-top: 5px;
}
.kms-content a {
color: #0078ff;
text-decoration: none;
}
.kms-content a:hover {
color: #0060cc;
text-decoration: none;
}
.form {
display: block;
width: 100%;
max-width: 560px;
font-size: 1rem;
line-height: 1.2;
}
.form .form-element {
position: relative;
margin-bottom: 25px;
}
.form .error-message {
display: none;
width: 100%;
color: #ff1e00;
font-size: 0.75rem;
font-weight: bold;
}
.form .error-message.active {
display: block;
margin-bottom: 10px;
}
.form label, .form .label {
display: block;
margin-bottom: 5px;
color: #646464;
font-size: 0.8em;
font-weight: bold;
}
.form input, .form textarea {
display: block;
width: 100%;
background-color: white;
padding: 15px 20px;
border: 1px transparent solid;
border-radius: 4px;
font-size: 0.9em;
color: #646464;
}
.form input.alert, .form textarea.alert {
border-color: #ff1e00;
}
.form input:-webkit-autofill, .form input:-webkit-autofill:hover, .form input:-webkit-autofill:focus, .form input:-webkit-autofill:active, .form textarea:-webkit-autofill, .form textarea:-webkit-autofill:hover, .form textarea:-webkit-autofill:focus, .form textarea:-webkit-autofill:active {
-webkit-transition: 9999s background-color;
transition: 9999s background-color;
-webkit-text-fill-color: #646464;
transition-delay: 9999s;
}
.form input:focus, .form textarea:focus {
box-shadow: none;
outline: none;
}
.form textarea {
min-height: 152px;
resize: vertical;
}
.form .select .select-wrapper {
position: relative;
display: block;
}
.form .select .icon {
position: absolute;
right: 10px;
top: 26px;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 6px 0 6px;
border-color: #646464 transparent transparent transparent;
opacity: 0.3;
pointer-events: none;
}
.form .select select {
display: block;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
font-family: "Open Sans", sans-serif;
background-color: white;
padding: 15px 35px 15px 20px;
border: 1px transparent solid;
border-radius: 4px;
font-size: 0.9em;
color: #646464;
}
.form .select select:focus {
box-shadow: none;
outline: none;
}
.form .checkbox label {
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
cursor: pointer;
}
.form .checkbox label input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
margin: 0;
width: 20px;
height: 20px;
border-radius: 100%;
padding: 0;
border: none;
background-color: rgba(255, 255, 255, 0.3);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: background-color 0.3s;
}
.form .checkbox label input:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.form .checkbox label input:checked {
background-image: url("/img/check/checked.svg");
background-color: rgba(255, 255, 255, 0.7);
}
.form .checkbox label span {
display: block;
margin: 2px 0 0;
width: calc(100% - 30px);
}
.form .submit {
margin-top: 20px;
}
.image-slider {
width: 100%;
overflow: visible;
box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
}
.image-slider .placeholder {
position: relative;
width: 100%;
cursor: move;
}
.image-slider .placeholder .controllers {
position: relative;
z-index: 3;
width: 100%;
height: 0;
padding-bottom: 66.67%;
}
@media screen and (max-width: 1350px) {
.image-slider .placeholder .controllers {
padding-bottom: 100%;
}
}
.image-slider .placeholder .controllers .nav-item {
position: absolute;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
bottom: -50px;
width: 35px;
height: 35px;
cursor: pointer;
border-radius: 100%;
transition: background 0.3s;
}
.image-slider .placeholder .controllers .nav-item span {
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
height: 16px;
width: 16px;
transform-origin: center;
transition: transform 0.3s;
}
.image-slider .placeholder .controllers .nav-item span .arrow-icon {
position: relative;
width: 10px;
height: 16px;
transform-origin: center;
}
.image-slider .placeholder .controllers .nav-item span .arrow-icon .st0 {
fill: white;
}
.image-slider .placeholder .controllers .nav-item.previous {
background-color: #00C7FF;
right: calc(50% + 3px);
}
.image-slider .placeholder .controllers .nav-item.previous span .arrow-icon {
transform: rotate(90deg);
}
.image-slider .placeholder .controllers .nav-item.previous:hover {
background-color: #1acdff;
}
.image-slider .placeholder .controllers .nav-item.next {
background-color: #ff1e00;
left: calc(50% + 3px);
}
.image-slider .placeholder .controllers .nav-item.next span .arrow-icon {
transform: rotate(270deg);
}
.image-slider .placeholder .controllers .nav-item.next:hover {
background-color: #e61b00;
}
.image-slider .placeholder figure {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s;
}
.image-slider .placeholder figure span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.image-slider .placeholder figure span.small {
display: none;
}
@media screen and (max-width: 480px) {
.image-slider .placeholder figure span.medium {
display: none;
}
.image-slider .placeholder figure span.small {
display: block;
}
}
.image-slider .placeholder figure.active {
z-index: 2;
opacity: 1;
}
#cookie-message {
position: fixed;
z-index: 9999;
bottom: 0;
left: 0;
padding: 15px 0;
width: 100%;
background: linear-gradient(90deg, #d62727 0%, #ff3333 100%);
opacity: 1;
box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.1);
transition: opacity 0.5s, transform 0.6s;
transform: translate3d(0, 0, 0);
}
#cookie-message.accepted {
display: none;
}
#cookie-message.transition-out {
opacity: 0;
transform: translate3d(0, 50%, 0);
}
#cookie-message .grid-row {
text-align: center;
}
#cookie-message .grid-row p, #cookie-message .grid-row p a, #cookie-message .grid-row .close-button {
font-size: 0.75rem;
line-height: 1.2;
color: white;
}
#cookie-message .grid-row p {
display: inline-block;
vertical-align: middle;
margin: 0;
}
#cookie-message .grid-row p a {
text-decoration: underline;
}
#cookie-message .grid-row .close-button {
display: inline-block;
vertical-align: middle;
margin-left: 15px;
padding: 5px 12px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 5px;
cursor: pointer;
}
@media screen and (max-width: 625px) {
#cookie-message .grid-row p {
max-width: 225px;
}
}
@media screen and (max-width: 375px) {
#cookie-message .grid-row p {
display: block;
max-width: none;
}
#cookie-message .grid-row .close-button {
margin-top: 10px;
}
}
#cookie-message-overlay {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 1;
transition: opacity 0.5s;
}
#cookie-message-overlay.accepted {
display: none;
}
#cookie-message-overlay.transition-out {
opacity: 0;
}
#cookie-message-overlay .placeholder {
width: calc(100vw / 14 * 12);
padding: 60px 120px;
display: block;
max-width: 960px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#cookie-message-overlay .placeholder h5 {
font-size: 1.2rem;
line-height: 1;
font-weight: 500;
margin: 0 0 5px;
color: #4d4d4d;
}
#cookie-message-overlay .placeholder p {
font-size: 0.8rem;
line-height: 1.2;
margin: 0;
color: #808080;
}
#cookie-message-overlay .placeholder p a, #cookie-message-overlay .placeholder p .open-menu {
color: #0032FF;
white-space: nowrap;
cursor: pointer;
text-decoration: underline;
}
#cookie-message-overlay .placeholder .accept-cookie-button {
display: inline-block;
margin-top: 35px;
padding: 13px 20px;
border-radius: 4px;
background-color: #00C7FF;
transition: background-color 0.4s, opacity 0.4s;
font-size: 0.9rem;
line-height: 1.2;
color: white;
cursor: pointer;
}
#cookie-message-overlay .placeholder .accept-cookie-button:hover {
background-color: #00a7d6;
}
@media screen and (max-width: 1440px) {
#cookie-message-overlay .placeholder {
padding: calc(100vw / 14 / 1.5) calc(100vw / 14);
display: block;
}
}
@media screen and (max-width: 450px) {
#cookie-message-overlay .placeholder {
width: 100%;
}
}
#cookie-message-overlay #message-description {
display: block;
}
#cookie-message-overlay #message-description.hide {
display: none;
}
#cookie-message-overlay .cookie-types-description {
display: block;
margin: 30px 0;
}
#cookie-message-overlay .cookie-types-description .cookie-type {
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
#cookie-message-overlay .cookie-types-description .cookie-type + .cookie-type {
margin-top: 25px;
}
#cookie-message-overlay .cookie-types-description .cookie-type .icon {
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
width: 25px;
height: 25px;
}
#cookie-message-overlay .cookie-types-description .cookie-type .icon:before {
content: "";
display: block;
}
#cookie-message-overlay .cookie-types-description .cookie-type .text {
display: block;
width: calc(100% - 55px);
}
#cookie-message-overlay .cookie-types-description .cookie-type .text p {
max-width: 380px;
font-size: 0.7rem;
line-height: 1rem;
margin: 0;
color: rgba(100, 100, 100, 0.6);
}
#cookie-message-overlay .cookie-types-description .cookie-type .text p strong {
display: inline-block;
color: #646464;
font-size: 0.9rem;
}
#cookie-message-overlay .cookie-types-description .cookie-type .text p strong span {
white-space: nowrap;
}
#cookie-message-overlay .cookie-types-description .cookie-type.tracking .icon:before {
background: url("/img/svg/cookie-sprite.svg") 0 0 no-repeat;
background-size: 70px 30px;
width: 25px;
height: 25px;
}
#cookie-message-overlay .cookie-types-description .cookie-type.analytic .icon:before {
background: url("/img/svg/cookie-sprite.svg") -27px 0 no-repeat;
background-size: 70px 30px;
width: 25px;
height: 25px;
}
#cookie-message-overlay .cookie-settings {
display: none;
}
#cookie-message-overlay .cookie-settings.edit {
display: block;
}
#cookie-message-overlay .cookie-settings .wrapper {
padding: 30px 0 0;
}
#cookie-message-overlay .cookie-settings .cookie-type {
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
width: 100%;
max-width: 420px;
cursor: pointer;
}
#cookie-message-overlay .cookie-settings .cookie-type + .cookie-type {
margin-top: 25px;
}
#cookie-message-overlay .cookie-settings .cookie-type input {
margin: 4px 0 0;
display: block;
background: url("/img/svg/cookie-sprite.svg") -55px -14px no-repeat;
background-size: 70px 30px;
width: 13px;
height: 13px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
#cookie-message-overlay .cookie-settings .cookie-type input:checked {
background-position: -55px 0;
}
#cookie-message-overlay .cookie-settings .cookie-type input:focus {
outline: none;
box-shadow: none;
}
#cookie-message-overlay .cookie-settings .cookie-type > span {
display: block;
width: calc(100% - 55px);
font-size: 0.7rem;
line-height: 1rem;
color: rgba(100, 100, 100, 0.6);
}
#cookie-message-overlay .cookie-settings .cookie-type > span strong {
font-size: 0.9rem;
color: #646464;
}
#cookie-message-overlay .cookie-settings .cookie-type > span strong span {
white-space: nowrap;
}
#cookie-message-overlay .cookie-settings .cookie-type.analytic {
pointer-events: none;
cursor: not-allowed;
}
#cookie-message-overlay .cookie-settings .cookie-type.analytic input {
opacity: 0.3;
}
#cookie-switch {
margin-bottom: 50px;
padding: 30px 0 50px;
border-bottom: 1px solid #646464;
width: 100%;
}
#cookie-switch .placeholder {
width: 100%;
display: block;
}
#cookie-switch .placeholder .cookie-switch-title h3 {
margin: 0 0 12px;
font-size: 1.2rem;
line-height: 1.2;
}
#cookie-switch .placeholder .cookie-switch-title p {
font-size: 0.8rem;
line-height: 1.4;
}
#cookie-switch .placeholder .cookie-types {
display: block;
margin: 30px 0 50px;
}
#cookie-switch .placeholder .cookie-types .cookie-type {
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
width: 100%;
max-width: 420px;
cursor: pointer;
}
#cookie-switch .placeholder .cookie-types .cookie-type + .cookie-type {
margin-top: 25px;
}
#cookie-switch .placeholder .cookie-types .cookie-type input {
margin: 4px 0 0;
display: block;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
background: url("/img/svg/cookie-sprite.svg") -55px -14px no-repeat;
background-size: 70px 30px;
width: 13px;
height: 13px;
}
#cookie-switch .placeholder .cookie-types .cookie-type input:focus {
outline: none;
box-shadow: none;
}
#cookie-switch .placeholder .cookie-types .cookie-type input:checked {
background-position: -55px 0;
}
#cookie-switch .placeholder .cookie-types .cookie-type > span {
display: block;
width: calc(100% - 55px);
font-size: 0.7rem;
line-height: 1.4;
}
@media screen and (max-width: 460px) {
#cookie-switch .placeholder .cookie-types .cookie-type > span {
width: calc(100% - 30px);
}
}
#cookie-switch .placeholder .cookie-types .cookie-type > span strong {
font-size: 0.9rem;
}
#cookie-switch .placeholder .cookie-types .cookie-type > span strong span {
white-space: nowrap;
}
#cookie-switch .placeholder .cookie-types .cookie-type.analytic {
pointer-events: none;
cursor: not-allowed;
}
#cookie-switch .placeholder #save-cookie-settings {
display: inline-block;
padding: 13px 20px;
border-radius: 4px;
background-color: #00C7FF;
transition: background-color 0.4s, opacity 0.4s;
font-size: 0.9rem;
line-height: 1.2;
color: white;
cursor: pointer;
}
#cookie-switch .placeholder #save-cookie-settings:hover {
background-color: #00a7d6;
}
#cookie-switch .placeholder #save-cookie-settings.clicked {
opacity: 0.2;
}
/*==========================================================================
* Dynamic Blocks
* ========================================================================== */
.dynamic-block + .dynamic-block {
margin-top: 60px;
}
.dynamic-block .grid-row {
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: space-between;
align-items: center;
}
.dynamic-block.two-text-columns {
position: relative;
z-index: 10;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
}
.dynamic-block.two-text-columns .content {
width: 47.7272727273%;
padding: 0;
}
@media screen and (max-width: 900px) {
.dynamic-block.two-text-columns {
display: block;
}
.dynamic-block.two-text-columns .content {
width: 100% !important;
margin: 0;
}
.dynamic-block.two-text-columns .content p:last-of-type {
margin-bottom: 1rem;
}
}
.dynamic-block.full-image-column img {
width: 100%;
display: none;
}
.dynamic-block.full-image-column img.large {
display: block;
}
@media screen and (max-width: 1050px) {
.dynamic-block.full-image-column img.large {
display: none;
}
.dynamic-block.full-image-column img.medium {
display: block;
}
}
@media screen and (max-width: 525px) {
.dynamic-block.full-image-column img.medium {
display: none;
}
.dynamic-block.full-image-column img.small {
display: block;
}
}
.dynamic-block.content-block {
position: relative;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
}
.dynamic-block.content-block .image {
width: 50%;
}
.dynamic-block.content-block .image img {
width: 100%;
}
.dynamic-block.content-block .image img.small {
display: none;
}
@media screen and (max-width: 450px) {
.dynamic-block.content-block .image img.medium {
display: none;
}
.dynamic-block.content-block .image img.small {
display: block;
}
}
.dynamic-block.content-block .image .content {
width: 41.6666666667%;
}
.dynamic-block.content-block .content {
-webkit-order: 1;
-ms-order: 1;
width: 41.6666666667%;
}
.dynamic-block.content-block[data-image-location=right] .image {
-webkit-order: 2;
-ms-order: 2;
}
.dynamic-block.content-block[data-image-location=right] .content {
-webkit-order: 1;
-ms-order: 1;
}
@media screen and (max-width: 900px) {
.dynamic-block.content-block {
display: block;
}
.dynamic-block.content-block .image {
width: 100%;
margin-top: 40px;
-webkit-order: 2;
-ms-order: 2;
}
.dynamic-block.content-block .content {
width: 100%;
}
}
.dynamic-block.multiple-images {
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.dynamic-block.multiple-images figure {
width: 47.7272727273%;
}
.dynamic-block.multiple-images figure img {
width: 100%;
display: none;
}
.dynamic-block.multiple-images figure img.medium {
display: none;
}
@media screen and (max-width: 1100px) {
.dynamic-block.multiple-images figure img.large {
display: none;
}
.dynamic-block.multiple-images figure img.medium {
display: block;
}
}
@media screen and (max-width: 480px) {
.dynamic-block.multiple-images figure img.large {
display: none;
}
.dynamic-block.multiple-images figure img.medium {
display: block;
}
}
.dynamic-block.multiple-images[data-size-type="50"] figure img.medium {
display: block;
}
@media screen and (max-width: 1125px) {
.dynamic-block.multiple-images[data-size-type="50"] figure img.medium {
display: none;
}
.dynamic-block.multiple-images[data-size-type="50"] figure img.small {
display: block;
}
}
@media screen and (max-width: 900px) {
.dynamic-block.multiple-images {
display: block;
}
.dynamic-block.multiple-images figure {
width: 100%;
}
.dynamic-block.multiple-images figure:first-of-type {
margin-bottom: 40px;
}
.dynamic-block.multiple-images figure img.medium {
display: block !important;
}
.dynamic-block.multiple-images figure img.small {
display: none !important;
}
}
@media screen and (max-width: 900px) and (max-width: 525px) {
.dynamic-block.multiple-images figure img.medium {
display: none;
}
.dynamic-block.multiple-images figure img.small {
display: block;
}
}
.dynamic-block.full-text-block .content {
max-width: 680px;
margin: auto;
text-align: center;
}
.dynamic-block.video-block {
width: 100%;
max-width: 960px;
margin: 60px auto 0 !important;
}
.dynamic-block.video-block .video-wrapper {
position: relative;
padding-bottom: 53.6%;
padding-top: 25px;
height: 0;
}
.dynamic-block.video-block .video-wrapper iframe, .dynamic-block.video-block .video-wrapper .video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.dynamic-block.video-block .video-wrapper .video-overlay {
z-index: 2;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
opacity: 1;
cursor: pointer;
transition: all 0.2s;
}
.dynamic-block.video-block .video-wrapper .video-overlay .button {
width: 25%;
max-width: 85px;
transform: scale(1);
transition: all 0.4s;
}
.dynamic-block.video-block .video-wrapper .video-overlay .button img {
width: 100%;
}
.dynamic-block.video-block .video-wrapper .video-overlay:hover .button {
transform: scale(0.85);
}
.dynamic-block.video-block .video-wrapper .video-overlay.hide {
opacity: 0;
pointer-events: none;
transition: all 0.5s;
transition-delay: 0.7s;
}
.dynamic-block.video-block .video-wrapper .video-overlay.hide .button {
transition: all 0.8s;
transform: scale(0.3);
}
@media screen and (max-width: 850px) {
.preventScroll {
overflow: hidden;
overflow-y: scroll;
position: fixed;
width: 100%;
}
}
#mobile-navigation {
position: fixed;
z-index: 1000;
height: 100vh;
overflow: hidden;
width: 100%;
left: 0;
top: 0;
pointer-events: none;
display: none;
}
#mobile-navigation .bar {
display: none;
height: 60px;
background: linear-gradient(90deg, #d62727 0%, #ff3333 100%);
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.11);
pointer-events: all;
position: relative;
z-index: 4;
transform: translate3d(0, 0, 0);
transition: all 0.3s;
transition-delay: 0.4s;
}
#mobile-navigation .bar .toggle-menu {
width: 60px;
height: 100%;
z-index: 3;
cursor: pointer;
position: relative;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
}
#mobile-navigation .bar .toggle-menu .icon {
width: 20px;
}
#mobile-navigation .bar .toggle-menu .icon span + span {
margin-top: 4px;
}
#mobile-navigation .bar .toggle-menu .icon span {
width: 100%;
height: 2px;
display: block;
transform: scale3d(1, 1, 1);
transform-origin: 0 50%;
background-color: white;
transition: transform 0.6s;
}
#mobile-navigation .bar .toggle-menu .icon span:nth-of-type(2) {
transform: scale3d(0.8, 1, 1);
}
#mobile-navigation .bar .toggle-menu .icon span:nth-of-type(3) {
transform: scale3d(0.45, 1, 1);
}
#mobile-navigation .bar .toggle-menu:hover .icon span {
transform: scale3d(1, 1, 1) !important;
}
#mobile-navigation .bar .logo {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
}
#mobile-navigation .bar .logo a {
position: relative;
top: 3px;
display: block;
width: 150px;
max-height: 25px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#mobile-navigation .bar .logo a img {
width: 100%;
max-height: 25px;
}
#mobile-navigation .shader {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #ff3333;
opacity: 0;
display: none;
transition-delay: 0.4s;
}
#mobile-navigation .menu {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 600px;
min-width: 275px;
padding: 70px 120px;
background-color: white;
overflow-x: auto;
pointer-events: all;
z-index: 5;
transform: translate3d(-100%, 0, 0);
}
#mobile-navigation .menu nav {
position: relative;
}
#mobile-navigation .menu nav .close {
position: absolute;
top: 10px;
left: -68px;
display: block;
width: 16px;
height: 16px;
cursor: pointer;
transform-origin: center;
transform: rotate(0deg);
transition: transform 0.4s;
}
#mobile-navigation .menu nav .close:hover {
transform: rotate(90deg);
}
#mobile-navigation .menu nav .close:hover:before, #mobile-navigation .menu nav .close:hover:after {
background-color: rgba(35, 40, 45, 0.4);
}
#mobile-navigation .menu nav .close:before, #mobile-navigation .menu nav .close:after {
content: "";
position: absolute;
display: block;
background-color: #23282d;
transform-origin: center;
transform: rotate(45deg);
transition: background-color 0.3s;
}
#mobile-navigation .menu nav .close:before {
left: 7px;
top: 0;
width: 2px;
height: 100%;
}
#mobile-navigation .menu nav .close:after {
left: 0;
top: 7px;
width: 100%;
height: 2px;
}
#mobile-navigation .menu nav .logo-wrapper {
width: 100%;
max-width: 250px;
}
#mobile-navigation .menu nav .logo-wrapper a {
display: block;
text-decoration: none;
}
#mobile-navigation .menu nav .logo-wrapper a img {
width: 100%;
max-height: 36px;
}
#mobile-navigation .menu nav .menu-list {
margin-top: 40px;
}
#mobile-navigation .menu nav .menu-list .backToEHBO {
padding-top: 60px;
padding-bottom: 30px;
}
@media screen and (max-width: 650px) {
#mobile-navigation .menu nav .menu-list .backToEHBO {
padding-left: 0;
}
}
#mobile-navigation .menu nav .menu-list ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 1rem;
line-height: 1.2;
}
#mobile-navigation .menu nav .menu-list ul + ul {
margin-top: 24px;
}
#mobile-navigation .menu nav .menu-list ul li a {
display: block;
padding: 8px 0;
color: #23282d;
text-decoration: none;
transition: color 0.2s;
cursor: pointer;
}
#mobile-navigation .menu nav .menu-list ul li a:hover {
color: rgba(35, 40, 45, 0.7);
}
#mobile-navigation .menu nav .menu-list ul li ul {
font-size: 0.85em;
}
#mobile-navigation .menu nav .menu-list ul li.active a {
color: #0078ff;
}
#mobile-navigation.active .bar .toggle-menu .icon span {
opacity: 0;
transition-delay: 0.4s;
}
#mobile-navigation.active .bar .toggle-menu .icon span:first-of-type {
transform: rotate(45deg);
opacity: 1;
top: 6px;
}
#mobile-navigation.active .bar .toggle-menu .icon span:last-of-type {
width: 25px;
opacity: 1;
bottom: 6px;
transform: rotate(-45deg);
}
#mobile-navigation.active .menu {
transform: translate3d(0, 0, 0);
}
#mobile-navigation.shader-active .shader {
opacity: 0.6;
pointer-events: all;
}
#mobile-navigation.allow-animation .shader {
transition: all 0.2s;
}
#mobile-navigation.allow-animation .menu {
transition: all 0.3s;
transition-timing-function: ease-in-out;
}
@media screen and (max-width: 850px) {
#mobile-navigation {
display: block;
}
#mobile-navigation .bar {
display: block;
}
#mobile-navigation .menu {
max-width: none;
padding-right: 60px;
}
#mobile-navigation .menu .logout-button {
color: #B0B0B0;
border: 1px solid #FFAC34;
border-radius: 6px;
background-color: transparent;
font-size: 0.8rem;
line-height: 1.1;
padding: 8px 18px;
cursor: pointer;
}
}
@media screen and (max-width: 425px) {
#mobile-navigation .menu {
padding: 70px 30px;
}
#mobile-navigation .menu nav .close {
left: 0;
}
#mobile-navigation .menu nav ul {
font-size: 1.2rem;
}
}
.mobile-contact {
display: none;
opacity: 0;
transform: translate3d(0, -100%, 0);
padding: 50px 7.1428571429%;
background-color: white;
color: #23282d;
font-size: 0.9rem;
transition: opacity 0.4s, transform 0.4s;
}
.mobile-contact.active {
transform: translate3d(0, 0, 0);
opacity: 1;
pointer-events: all;
}
.mobile-contact h1, .mobile-contact h2 {
font-size: 2rem;
line-height: 1.2;
max-width: 580px;
color: #0032FF;
margin: 0 0 40px;
}
.mobile-contact p {
margin: 1rem 0;
}
.mobile-contact strong {
color: #23282d;
}
.mobile-contact a:not(.button) {
color: #0078ff;
text-decoration: none;
transition: color 0.3s, border 0.3s, opacity 0.3s;
}
.mobile-contact a:not(.button):hover {
color: #0054b3;
}
.mobile-contact a.button {
display: inline-block;
margin-top: 20px;
padding: 15px 20px;
border-radius: 25px;
background-color: #0078ff;
text-decoration: none;
font-size: 0.9rem;
line-height: 1;
font-weight: 700;
color: white;
transition: background-color 0.3s;
}
.mobile-contact a.button:after {
content: "";
margin-left: 20px;
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.mobile-contact a.button:hover {
background-color: #0032FF;
}
.mobile-contact a.button:hover:after {
transform: translate3d(5px, 0, 0);
}
@media screen and (max-width: 840px) {
.mobile-contact {
display: block;
}
}
#sticky-navigation {
position: fixed;
top: 0;
left: 0;
z-index: 50;
background-color: #0078ff;
width: 100%;
height: 60px;
transform: translate3d(0, -60px, 0);
box-shadow: 0 6px 10px -5px rgba(0, 0, 0, 0.1);
opacity: 0;
transition: transform 0.4s, opacity 0.4s;
}
#sticky-navigation.active {
transform: translate3d(0, 0, 0);
opacity: 1;
}
#sticky-navigation .grid-row {
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: space-between;
align-items: center;
}
#sticky-navigation .menu {
display: inline-block;
width: 60px;
}
#sticky-navigation .menu .placeholder {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#sticky-navigation .menu .placeholder .icon-placeholder {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
cursor: pointer;
}
#sticky-navigation .menu .placeholder .icon-placeholder .icon {
width: 20px;
}
#sticky-navigation .menu .placeholder .icon-placeholder .icon span + span {
margin-top: 4px;
}
#sticky-navigation .menu .placeholder .icon-placeholder .icon span {
width: 100%;
height: 2px;
display: block;
transform: scale3d(1, 1, 1);
transform-origin: 0 50%;
background-color: white;
transition: transform 0.6s;
}
#sticky-navigation .menu .placeholder .icon-placeholder .icon span:nth-of-type(2) {
transform: scale3d(0.8, 1, 1);
}
#sticky-navigation .menu .placeholder .icon-placeholder .icon span:nth-of-type(3) {
transform: scale3d(0.45, 1, 1);
}
#sticky-navigation .menu .placeholder .icon-placeholder:hover .icon span {
transform: scale3d(1, 1, 1) !important;
}
#sticky-navigation .logo-wrapper a {
font-size: 1rem;
line-height: 1;
color: white;
text-decoration: none;
font-weight: bold;
}
.backToEHBO {
font-size: 0.8rem;
line-height: 1.1;
padding-top: 52px;
text-decoration: none;
color: #373c41;
cursor: pointer;
transition: color 0.2s;
display: inline-flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 650px) {
.backToEHBO {
padding: 30px 0 30px 7%;
}
}
.backToEHBO:hover {
color: #d62727;
}
.backToEHBO__arrow {
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border-radius: 15px;
margin-right: 18px;
opacity: 0.5;
background-color: #cecece;
color: white;
transition: color 0.2s;
}
.backToEHBO__arrow svg {
position: relative;
left: -2px;
height: 14px;
width: 15px;
}
.backToEHBO__arrow:hover {
color: rgba(255, 255, 255, 0.8);
}
.c-icon {
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #04D682;
color: white;
}
.c-icon--small {
width: 30px;
height: 30px;
}
.c-icon--yellow {
background-color: #F6A52F;
}
.c-icon_figure {
position: relative;
line-height: 0;
}
.c-icon_figure--lock {
top: -1px;
}
.c-icon_figure--lock svg {
width: 15px;
height: 20px;
}
.c-icon_figure--person svg {
width: 12px;
height: 18px;
}
.c-icon_figure--home svg {
width: 14px;
height: 14px;
}
.c-icon_figure--mail svg {
width: 14px;
height: 10px;
}
.c-icon_figure--phone svg {
width: 14px;
height: 14px;
}
.c-icon_figure--plus svg {
width: 14px;
height: 14px;
}
/* ==========================================================================
* Default button
* ========================================================================== */
.c-button {
font-size: 0.8rem;
font-weight: bold;
line-height: 1.1;
border-radius: 4px;
display: inline-flex;
align-items: center;
padding: 0;
background-color: #ff9600;
border: none;
color: white;
letter-spacing: 0.93px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition-property: background-color;
transition-duration: 250ms;
}
.c-button:hover:not(:disabled) {
background-color: #cc7800;
}
.c-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c-button__text {
padding: 10px 15px;
text-align: center;
}
.c-button__icon {
display: none;
position: relative;
}
.c-button--icon .c-button__icon {
display: block;
margin-right: 16px;
margin-left: -8px;
}
.c-button--is-reversed {
flex-direction: row-reverse;
}
.c-button--is-reversed .c-button__icon {
margin-right: -8px;
margin-left: 16px;
}
.c-button--full-width {
width: 100%;
justify-content: center;
}
/* ==========================================================================
* Home page
* ========================================================================== */
/*==========================================================================
* News overview page
* ========================================================================== */
/*==========================================================================
* News detail page
* ========================================================================== */
/*==========================================================================
* Contact page
* ========================================================================== */
/* ==========================================================================
* Home page
* ========================================================================== */
.login > .placeholder {
position: relative;
}
@media screen and (max-width: 650px) {
.login > .placeholder {
box-shadow: none;
}
}
.login > .placeholder:after {
content: "+";
display: block;
position: absolute;
z-index: 0;
font-size: 480px;
text-align: right;
color: white;
font-weight: 900;
top: 0;
left: 0;
width: 100%;
height: 64%;
padding-top: 2%;
background: linear-gradient(90deg, #FFFFFF 0%, #F7F8FA 80%);
}
@media screen and (max-width: 650px) {
.login > .placeholder:after {
display: none;
}
}
.login > .placeholder > form {
position: relative;
z-index: 5;
}
.login > .placeholder > form .general-alert {
display: block;
background-color: #ff3333;
padding: 10px;
position: absolute;
top: auto;
margin-top: -55px;
left: 0;
width: 100%;
color: white;
border-radius: 5px;
}
.login > .placeholder > form .general-alert:first-letter {
text-transform: capitalize;
}
.login h1 {
color: #373c41;
font-size: 1.6rem;
font-weight: bold;
line-height: 2;
margin: 0;
margin-bottom: 55px;
}
@media screen and (max-width: 850px) {
.login h1 {
padding-left: 50px;
}
}
@media screen and (max-width: 425px) {
.login h1 {
font-size: 1.3rem;
}
}
.login h1 .heading-icon {
margin-left: -44px;
margin-right: 12px;
}
.login label {
width: 75%;
display: block;
margin-bottom: 24px;
}
.login input {
width: 75%;
margin-bottom: 30px;
border: none;
border-bottom: solid 1px rgba(206, 206, 206, 0.8);
font-size: 0.8rem;
line-height: 1.1;
padding: 8px 0;
color: #B0B0B0;
}
@media screen and (max-width: 1024px) {
.login input {
width: 100%;
}
}
.login input[type=submit] {
display: block;
padding: 10px 15px;
margin: 30px 0;
color: white;
font-size: 0.8rem;
font-weight: bold;
line-height: 1.1;
text-transform: uppercase;
border-radius: 3px;
background-color: #04D682;
width: auto;
min-width: 240px;
text-align: left;
cursor: pointer;
transition: background-color 0.3s;
}
.login input[type=submit]:hover {
background-color: #04bd73;
}
@media screen and (max-width: 425px) {
.login input[type=submit] {
width: 100%;
}
}
.login input::-webkit-input-placeholder {
font-size: 0.8rem;
line-height: 1.1;
opacity: 0.45;
color: #B0B0B0;
}
.login input::-moz-placeholder {
font-size: 0.8rem;
line-height: 1.1;
opacity: 0.45;
color: #B0B0B0;
}
.login input:-ms-input-placeholder {
font-size: 0.8rem;
line-height: 1.1;
opacity: 0.45;
color: #B0B0B0;
}
.login input:-moz-placeholder {
font-size: 0.8rem;
line-height: 1.1;
opacity: 0.45;
color: #B0B0B0;
}
.login a.forgotPassword {
display: inline-block;
margin-bottom: 100px;
text-decoration: none;
color: #373c41;
cursor: pointer;
transition: color 0.3s;
padding-left: 10%;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-start;
align-items: center;
}
.login a.forgotPassword:hover {
color: #d62727;
}
@media screen and (max-width: 650px) {
.login a.forgotPassword {
background-color: white;
padding-bottom: 30px;
margin-bottom: 0;
padding-left: 6.25%;
}
}
.login a.forgotPassword p {
display: inline-block;
margin: 0;
border-bottom: solid 1px;
}
.login a.forgotPassword span.lock svg {
height: 25px;
width: 25px;
transition: opacity 0.2s;
}
.login a.forgotPassword .forgotPassword__icon {
margin-right: 25px;
}
.login .registerLink {
color: #373c41;
font-style: italic;
margin: 50px 0 85px 0;
}
@media screen and (max-width: 650px) {
.login .registerLink {
margin: 30px 0 0 0;
}
}
.login .registerLink a {
text-decoration: none;
color: #373c41;
border-bottom: solid 1px;
cursor: pointer;
transition: color 0.3s;
}
.login .registerLink a:hover {
color: #d62727;
}
/* ==========================================================================
* Home page
* ========================================================================== */
h1.register-header {
color: #515151;
font-size: 1rem;
font-weight: bold;
line-height: 1.333;
width: 66.6666666667%;
margin: 70px auto 35px auto;
}
@media screen and (max-width: 1280px) {
h1.register-header {
width: 85.7142857143%;
}
}
@media screen and (max-width: 650px) {
h1.register-header {
padding: 30px 0 0 15%;
background-color: white;
margin: 0;
width: 100%;
}
}
@media screen and (max-width: 425px) {
h1.register-header {
text-align: center;
padding-left: 0;
}
}
.register {
padding-top: 0;
}
.register .placeholder {
padding: 65px 10% 35px 10%;
}
@media screen and (max-width: 1280px) {
.register .placeholder {
padding: 65px 12.5% 35px 12.5%;
}
}
@media screen and (max-width: 850px) {
.register .placeholder {
padding: 35px 0 35px 15%;
}
}
@media screen and (max-width: 425px) {
.register .placeholder {
padding: 35px 30px;
}
}
.register .general-alert {
display: block;
background-color: #ff3333;
padding: 10px;
position: absolute;
top: 0;
left: 0;
width: 100%;
color: white;
border-radius: 5px 5px 0 0;
}
.register .general-alert:first-letter {
text-transform: capitalize;
}
.register .form-group {
position: relative;
margin-bottom: 60px;
}
.register .form-group .form-group__icon {
position: absolute;
top: -3px;
left: -11.1111111111%;
}
@media screen and (max-width: 525px) {
.register .form-group .form-group__icon {
position: relative;
left: 0;
top: 0;
margin-bottom: 32px;
}
}
.register .form-group .form-group__icon--pull-up {
top: -11px;
}
@media screen and (max-width: 650px) {
.register .form-group .form-element {
width: 100%;
}
}
.register .form-group .form-element label {
width: 100%;
margin-right: 30px;
display: block;
margin-bottom: 24px;
font-size: 0.8rem;
line-height: 1.1;
color: #373c41;
}
.register .form-group .form-element label.gender, .register .form-group .form-element label[for=age], .register .form-group .form-element label[for=years_certified], .register .form-group .form-element label[for=expiration_date], .register .form-group .form-element label[for=house_number] {
display: inline-block;
width: auto;
}
.register .form-group .form-element label.gender input, .register .form-group .form-element label[for=age] input, .register .form-group .form-element label[for=years_certified] input, .register .form-group .form-element label[for=expiration_date] input, .register .form-group .form-element label[for=house_number] input {
width: auto;
}
.register .form-group .form-element label[for=age] {
margin-right: 10px;
}
.register .form-group .form-element label[for=age] + input {
width: 35px;
border: 1px solid #cecece;
border-radius: 3px;
text-align: center;
padding: 4px 0;
}
.register .form-group .form-element label.gender {
margin-bottom: 12px;
}
.register .form-group .form-element label[for=years_certified] + input {
width: 35px;
text-align: center;
margin-bottom: 0;
}
@media screen and (max-width: 650px) {
.register .form-group .form-element label[for=house_number] + input {
width: 35px;
text-align: center;
}
}
.register .form-group .form-element label[for=expiration_date] + input {
width: 150px;
text-align: center;
}
.register .form-group .form-element input {
width: 87.5%;
margin-bottom: 30px;
border: none;
border-bottom: solid 1px rgba(206, 206, 206, 0.8);
font-size: 0.8rem;
line-height: 1.1;
padding: 8px 0;
color: #98a0b3;
background-color: transparent;
}
.register .form-group .form-element input[type=radio] {
margin-right: 20px;
}
.register .form-group .form-element input::-webkit-input-placeholder {
opacity: 0.45;
color: #B0B0B0;
}
.register .form-group .form-element input::-moz-placeholder {
opacity: 0.45;
color: #B0B0B0;
}
.register .form-group .form-element input:-ms-input-placeholder {
opacity: 0.45;
color: #B0B0B0;
}
.register .form-group .form-element input:-moz-placeholder {
opacity: 0.45;
color: #B0B0B0;
}
.register input[type=submit] {
display: block;
padding: 10px 15px;
margin: 30px 0;
color: white;
font-size: 0.8rem;
font-weight: bold;
line-height: 1.1;
text-transform: uppercase;
border-radius: 3px;
background-color: #04D682;
border: none;
width: auto;
min-width: 240px;
text-align: left;
cursor: pointer;
transition: background-color 0.3s;
}
.register input[type=submit]:hover {
background-color: #04bd73;
}
@media screen and (max-width: 425px) {
.register input[type=submit] {
width: 100%;
}
}
.select-wrapper {
display: inline-block;
}
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 20px;
-moz-padding-start: 20px;
background-color: rgba(103, 113, 122, 0.05);
background-image: url("/img/svg/arrow_dark_select.svg");
background-position: 100% 50%;
background-repeat: no-repeat;
border: 1px solid #E0E1E3;
border-radius: 0;
box-shadow: none;
font-size: 0.7em;
color: #646464;
margin: 0;
overflow: hidden;
padding: 5px 10px;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 60px;
}
select:focus {
box-shadow: none;
outline: none;
}
select.year {
min-width: 75px;
}
/* ==========================================================================
* Home page
* ========================================================================== */
.personal {
display: inline-block;
width: 58.3333333333%;
margin-right: 8.3333333333%;
margin-left: 8.3333333333%;
}
@media screen and (max-width: 950px) {
.personal {
margin-right: 0;
}
}
@media screen and (max-width: 850px) {
.personal {
margin-left: 0;
padding-left: 6.25%;
width: calc(100% - 60px);
}
}
.personal .alert-danger {
background-color: rgba(255, 51, 51, 0.7);
padding: 5px 10px;
margin-top: -45px;
margin-bottom: 45px;
border-radius: 5px;
color: white;
}
.personal .form-group {
position: relative;
margin-bottom: 60px;
}
.personal .form-group .form-group__icon {
position: absolute;
top: 3px;
left: -14.2857142857%;
}
@media screen and (max-width: 650px) {
.personal .form-group .form-group__icon {
position: relative;
left: 0;
top: 0;
margin-bottom: 32px;
}
}
.personal .form-group .form-group__icon--pull-up {
top: -5px;
}
@media screen and (max-width: 425px) {
.personal input[type=submit] {
width: calc(100% - 60px);
min-width: 170px;
}
}
.sidebar.user ul {
overflow: visible;
height: auto;
}
.sidebar.user ul li {
padding: 25px 14%;
}
@media screen and (min-width: 1801px) {
.sidebar.user ul li {
padding: 25px 50px;
}
}
.sidebar.user ul li:last-of-type {
border-bottom: 0.5px solid #cecece;
}
.sidebar.user ul li p {
color: #373c41;
font-weight: 600;
margin-bottom: 1.5em;
}
.sidebar.user ul li p.value {
font-weight: normal;
color: #98a0b3;
margin-bottom: 0.375em;
}
/* ==========================================================================
* Home page
* ========================================================================== */
.courses {
width: 66.6666666667%;
margin-right: 8.3333333333%;
margin-left: 0;
position: relative;
}
@media screen and (max-width: 950px) {
.courses {
margin-right: 4.1666666667%;
}
}
@media screen and (max-width: 850px) {
.courses {
padding-left: 6.25%;
width: calc(100% - 60px - 6.25%);
}
}
.courses .info-message {
display: block;
position: absolute;
width: 100%;
background-color: #0078ff;
border-radius: 0 0 5px 5px;
padding: 10px;
color: white;
font-weight: bold;
transform: translate(0, -40px);
-webkit-animation: showAndHide 5s;
animation: showAndHide 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.courses .courses-header {
padding-top: 52px;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
}
.courses .courses-header .hello-user {
font-size: 0.8rem;
line-height: 1.1;
text-decoration: none;
color: #373c41;
cursor: pointer;
transition: color 0.2s;
position: relative;
left: -24px;
width: auto;
display: inline-flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
}
@media screen and (max-width: 650px) {
.courses .courses-header .hello-user {
left: 0;
}
}
.courses .courses-header .hello-user .hello-user__icon {
height: 14px;
width: 10px;
margin-top: 4px;
margin-right: 10px;
color: rgba(55, 60, 65, 0.5);
transition: color 0.2s;
}
.courses .courses-header .hello-user h4 {
display: block;
font-size: 0.8rem;
font-weight: bold;
line-height: 1.1rem;
margin: 0;
margin-bottom: 5px;
}
.courses .courses-header .hello-user p {
color: #cecece;
font-size: 0.75rem;
font-weight: 600;
transition: color 0.2s;
margin: 0;
}
.courses .courses-header .hello-user:hover {
color: #202325;
}
.courses .courses-header .hello-user:hover p, .courses .courses-header .hello-user:hover .hello-user__icon {
color: #373c41;
}
.courses .courses-header .general-notice {
display: block;
border: solid 1px #5E9DFF;
color: #313173;
border-radius: 5px;
background-color: rgba(94, 157, 255, 0.2);
padding: 20px;
max-width: 70%;
}
.courses .filters {
list-style: none;
margin-left: 0;
padding-left: 0;
border-bottom: solid 1px #D9DAE2;
margin-bottom: 20px;
}
@media screen and (max-width: 550px) {
.courses .filters {
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
}
.courses .filters li {
display: inline-block;
font-size: 16px;
font-weight: 600;
line-height: 30px;
margin-bottom: 5px;
}
@media screen and (max-width: 550px) {
.courses .filters li {
padding: 0 5px;
display: block;
border: solid 1.5px #D9DAE2;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 20px;
}
}
.courses .filters li + li {
margin-left: 7%;
}
@media screen and (max-width: 550px) {
.courses .filters li + li {
margin-left: 0;
}
}
.courses .filters li a {
color: #CECECE;
text-decoration: none;
transition: color 0.3s;
}
.courses .filters li:hover a {
color: #5E9DFF;
}
@media screen and (max-width: 550px) {
.courses .filters li.active {
border: solid 1.5px #5E9DFF;
}
}
.courses .filters li.active a {
color: #5E9DFF;
padding-bottom: 8px;
border-bottom: solid 1.5px #5E9DFF;
}
@media screen and (max-width: 550px) {
.courses .filters li.active a {
border-bottom: none;
padding-bottom: 0;
}
}
.courses .competence_filter {
display: inline-flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-start;
align-items: center;
border: 2px solid #CECECE;
border-radius: 15px;
padding: 5px 20px;
text-decoration: none;
color: #373c41;
line-height: 1.5rem;
margin-bottom: 20px;
}
.courses .competence_filter:hover {
border: 2px solid #bbbbbb;
background-color: #CECECE;
cursor: pointer;
}
.courses .competence_filter span {
margin-left: 10px;
font-size: 1.5rem;
}
.courses .courses-list {
display: inline-flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
}
.courses .courses-list .course {
border: 1px solid #CECECE;
border-radius: 15px;
width: 48%;
min-width: 350px;
background-color: white;
margin-bottom: 30px;
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.1);
position: relative;
height: 100%;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
justify-content: flex-start;
align-items: stretch;
flex-direction: column;
}
@media screen and (max-width: 1280px) {
.courses .courses-list .course {
margin: 0 auto 30px auto;
}
}
@media screen and (max-width: 425px) {
.courses .courses-list .course {
min-width: auto;
margin: 0 auto 30px auto;
}
}
.courses .courses-list .course:last-child {
margin-right: 0;
}
@media screen and (max-width: 1280px) {
.courses .courses-list .course:last-child {
margin: 0 auto 30px auto;
}
}
.courses .courses-list .course:after {
content: "";
display: block;
position: absolute;
bottom: 0;
height: 46px;
width: 100%;
background-color: #F7F8FA;
border-radius: 0 0 15px 15px;
z-index: 0;
}
.courses .courses-list .course .course_header {
padding: 0 12.5%;
border-bottom: solid 1px #D9DAE2;
position: relative;
z-index: 1;
}
.courses .courses-list .course .course_header h5 {
position: absolute;
top: 0;
margin: 0;
padding: 7px 0;
text-transform: uppercase;
background-color: #0078ff;
width: 100%;
left: 0;
color: white;
border-radius: 5px 5px 0 0;
text-align: center;
}
.courses .courses-list .course .course_header h4 {
color: #373c41;
line-height: 1.5rem;
margin-bottom: 10px;
margin-top: 1.8em;
}
.courses .courses-list .course .course_header .course_properties {
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-start;
align-items: center;
}
@media screen and (max-width: 425px) {
.courses .courses-list .course .course_header .course_properties {
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
}
.courses .courses-list .course .course_header .course_properties p {
margin: 0;
font-weight: 600;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
}
.courses .courses-list .course .course_header .course_properties p + p {
margin-left: 30px;
}
@media screen and (max-width: 425px) {
.courses .courses-list .course .course_header .course_properties p + p {
margin-left: 0;
margin-top: 10px;
}
}
.courses .courses-list .course .course_header .course-properties__icon {
margin-right: 7px;
color: #04D682;
}
.courses .courses-list .course .course_header .course-properties__icon--date svg {
width: 18px;
max-height: 19px;
}
.courses .courses-list .course .course_header .course-properties__icon--hour svg {
width: 19px;
max-height: 20px;
}
.courses .courses-list .course .course_header .course-properties__icon--person svg {
width: 14px;
max-height: 20px;
}
.courses .courses-list .course .course_header p.users {
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-start;
align-items: center;
margin-bottom: 26px;
font-weight: 600;
}
.courses .courses-list .course .course_header a {
display: block;
padding: 10px 15px;
margin: 30px 0;
color: white;
font-size: 0.8rem;
font-weight: bold;
line-height: 1.1;
text-transform: uppercase;
border-radius: 3px;
background-color: #646464;
width: auto;
text-align: center;
text-decoration: none;
transition: background-color 0.3s;
}
.courses .courses-list .course .course_header a:hover {
background-color: #575757;
}
.courses .courses-list .course .course_content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
justify-content: space-between;
align-items: stretch;
flex-direction: column;
}
.courses .courses-list .course .course_content h5, .courses .courses-list .course .course_content form {
padding: 0 50px;
}
.courses .courses-list .course .course_content h5 {
color: #517292;
font-size: 0.7rem;
font-weight: 600;
line-height: 0.95rem;
display: block;
width: 100%;
padding-bottom: 15px;
margin-bottom: 0;
border-bottom: solid 1px rgba(217, 218, 226, 0.5);
}
.courses .courses-list .course .course_content ul {
margin: 0;
padding: 0;
list-style: none;
}
.courses .courses-list .course .course_content ul li {
padding: 0 30px;
border-bottom: solid 1px rgba(217, 218, 226, 0.5);
color: #517292;
font-size: 0.7rem;
line-height: 1.5rem;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: baseline;
-moz-align-items: baseline;
-ms-align-items: baseline;
justify-content: flex-start;
align-items: baseline;
}
.courses .courses-list .course .course_content ul li:before {
display: block;
content: "";
width: 10px;
height: 10px;
flex-shrink: 0;
border-radius: 999px;
margin-right: 10px;
background-color: #dadada;
}
.courses .courses-list .course .course_content ul li.unknown:before, .courses .courses-list .course .course_content ul li.missing:before {
background-color: #373c41;
}
.courses .courses-list .course .course_content ul li.expired:before {
background-color: #FE3333;
}
.courses .courses-list .course .course_content ul li.almost_expired:before {
background-color: #FFAC34;
}
.courses .courses-list .course .course_content ul li.valid:before {
background-color: #04D682;
}
.courses .courses-list .course .course_content ul li.active {
background-color: #F7F8FA;
border-left: solid 6px #5E9DFF;
padding-left: 24px;
}
.courses .courses-list .course .course_content ul li label {
display: block;
width: 100%;
}
.courses .courses-list .course .course_content form {
margin: 30px auto;
}
.courses .courses-list .course .course_content form input[type=submit] {
margin: 0 auto;
min-width: auto;
width: auto;
text-align: center;
background-color: #FFAC34;
border: none;
text-transform: capitalize;
transition: background-color 0.3s;
}
.courses .courses-list .course .course_content form input[type=submit]:hover {
background-color: #ffa21b;
}
.courses .courses-list .course .course_content form input[type=submit].full {
pointer-events: none;
background-color: #dadada;
text-decoration: line-through;
}
.courses .courses-list .course .course_content form input[type=submit].full:hover {
background-color: #dadada;
}
.courses .courses-list .course .course_content form input[type=submit].subscribed {
background-color: #0078ff;
}
.courses .courses-list .course .course_content form input[type=submit].subscribed:hover {
background-color: #006ce6;
}
.courses .courses-list .course .course_content form .almost_full {
display: block;
width: 100%;
text-align: center;
font-size: 0.7rem;
line-height: 2;
color: #B0B0B0;
}
.sidebar.competences {
position: absolute;
right: 0;
height: 100%;
z-index: 10;
}
.sidebar.competences h1, .sidebar.competences h2, .sidebar.competences h3 {
padding: 0 14%;
}
@media screen and (min-width: 1801px) {
.sidebar.competences h1, .sidebar.competences h2, .sidebar.competences h3 {
padding: 0 50px;
}
}
@media screen and (max-width: 900px) {
.sidebar.competences h1, .sidebar.competences h2, .sidebar.competences h3 {
padding: 0;
}
}
.sidebar.competences ul li {
padding: 0;
}
.sidebar.competences ul li a {
width: 60%;
padding: 5px 0 5px 5%;
display: block;
color: #373c41;
font-size: 0.6rem;
line-height: 1.5rem;
text-decoration: none;
}
.sidebar.competences ul li a:hover {
background-color: #F7F8FA;
cursor: pointer;
}
@media screen and (min-width: 1801px) {
.sidebar.competences ul li a {
padding-left: 38px;
}
}
@media screen and (max-width: 900px) {
.sidebar.competences ul li a {
width: 100%;
}
}
.sidebar.competences ul li a label {
font-size: 0.7rem;
line-height: 1.5rem;
font-weight: 600;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: baseline;
-moz-align-items: baseline;
-ms-align-items: baseline;
justify-content: flex-start;
align-items: baseline;
}
.sidebar.competences ul li a label:hover {
cursor: pointer;
}
.sidebar.competences ul li a label:first-letter {
color: red;
text-transform: uppercase;
}
.sidebar.competences ul li a label:before {
display: block;
content: "";
width: 10px;
height: 10px;
flex-shrink: 0;
border-radius: 999px;
margin-right: 10px;
background-color: #dadada;
}
.sidebar.competences ul li a span {
color: #B0B0B0;
margin: 0 10px 0 20px;
}
.sidebar.competences ul li a span:hover {
cursor: pointer;
}
.sidebar.competences ul li.missing a label:before {
background-color: #373c41;
}
.sidebar.competences ul li.expired a label:before {
background-color: #FE3333;
}
.sidebar.competences ul li.almost_expired a label:before {
background-color: #FFAC34;
}
.sidebar.competences ul li.valid a label:before {
background-color: #04D682;
}
.sidebar.competences ul li.active a {
background-color: #F7F8FA;
border-left: solid 6px #5E9DFF;
padding-left: calc(5% - 6px);
position: relative;
}
@media screen and (min-width: 1801px) {
.sidebar.competences ul li.active a {
padding-left: 32px;
}
}
.sidebar.competences ul li.active a:after {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 35vw;
height: 100%;
background-color: #F7F8FA;
z-index: 0;
}
.sidebar.competences ul li:last-of-type {
border-bottom: 1px solid rgba(206, 206, 206, 0.5);
}
@-webkit-keyframes showAndHide {
0% {
transform: translate3d(0, -40px, 0);
}
10% {
transform: translate3d(0, 0, 0);
}
90% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -40px, 0);
}
}
@keyframes showAndHide {
0% {
transform: translate3d(0, -40px, 0);
}
10% {
transform: translate3d(0, 0, 0);
}
90% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -40px, 0);
}
}
@supports (display: grid) {
.courses .courses-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-column-gap: 30px;
grid-row-gap: 45px;
}
@media screen and (max-width: 425px) {
.courses .courses-list {
display: block;
}
}
.courses .courses-list .course {
width: 100%;
max-width: 450px;
margin: 0 auto;
}
@media screen and (max-width: 425px) {
.courses .courses-list .course {
min-width: auto;
margin: 0 auto 30px auto;
}
}
.courses .courses-list .course:last-child {
margin-right: auto;
}
}
/* ==========================================================================
* Home page
* ========================================================================== */
.events {
width: 66.6666666667%;
margin-right: 8.3333333333%;
margin-left: 0;
position: relative;
}
@media screen and (max-width: 950px) {
.events {
margin-right: 4.1666666667%;
}
}
@media screen and (max-width: 850px) {
.events {
padding-left: 6.25%;
width: calc(100% - 6.25%);
}
}
.events .info-message {
display: block;
position: absolute;
width: 100%;
background-color: #0078ff;
border-radius: 0 0 5px 5px;
padding: 10px;
color: white;
font-weight: bold;
transform: translate(0, -40px);
-webkit-animation: showAndHide 5s;
animation: showAndHide 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.events .events-header {
padding-top: 52px;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
}
.events .events-header .hello-user {
font-size: 0.8rem;
line-height: 1.1;
text-decoration: none;
color: #373c41;
cursor: pointer;
transition: color 0.2s;
position: relative;
left: -24px;
width: auto;
display: inline-flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
}
@media screen and (max-width: 650px) {
.events .events-header .hello-user {
left: 0;
}
}
.events .events-header .hello-user .hello-user__icon {
height: 14px;
width: 10px;
margin-top: 4px;
margin-right: 10px;
color: rgba(55, 60, 65, 0.5);
transition: color 0.2s;
}
.events .events-header .hello-user h4 {
display: block;
font-size: 0.8rem;
font-weight: bold;
line-height: 1.1rem;
margin: 0;
margin-bottom: 5px;
}
.events .events-header .hello-user p {
color: #cecece;
font-size: 0.75rem;
font-weight: 600;
transition: color 0.2s;
margin: 0;
}
.events .events-header .hello-user:hover {
color: #202325;
}
.events .events-header .hello-user:hover p, .events .events-header .hello-user:hover .hello-user__icon {
color: #373c41;
}
.events .events-header .general-notice {
display: block;
border: solid 1px #5E9DFF;
color: #313173;
border-radius: 5px;
background-color: rgba(94, 157, 255, 0.2);
padding: 20px;
max-width: 70%;
}
.events .filters {
list-style: none;
margin-left: 0;
padding-left: 0;
border-bottom: solid 1px #D9DAE2;
margin-bottom: 20px;
}
@media screen and (max-width: 550px) {
.events .filters {
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
}
.events .filters li {
display: inline-block;
font-size: 16px;
font-weight: 600;
line-height: 30px;
margin-bottom: 5px;
}
@media screen and (max-width: 550px) {
.events .filters li {
padding: 0 5px;
display: block;
border: solid 1.5px #D9DAE2;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 20px;
}
}
.events .filters li + li {
margin-left: 7%;
}
@media screen and (max-width: 550px) {
.events .filters li + li {
margin-left: 0;
}
}
.events .filters li a {
color: #CECECE;
text-decoration: none;
transition: color 0.3s;
}
.events .filters li:hover a {
color: #0078ff;
}
@media screen and (max-width: 550px) {
.events .filters li.active {
border: solid 1.5px #5E9DFF;
}
}
.events .filters li.active a {
color: #0078ff;
padding-bottom: 8px;
border-bottom: solid 1.5px #0078ff;
}
@media screen and (max-width: 550px) {
.events .filters li.active a {
border-bottom: none;
padding-bottom: 0;
}
}
.events .events-list {
display: inline-flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
}
.events .events-list .event {
border: 1px solid #CECECE;
border-radius: 15px;
width: 48%;
min-width: 350px;
background-color: white;
margin-bottom: 30px;
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
justify-content: flex-start;
align-items: stretch;
flex-direction: column;
}
@media screen and (max-width: 1280px) {
.events .events-list .event {
margin: 0 auto 30px auto;
}
}
@media screen and (max-width: 425px) {
.events .events-list .event {
min-width: auto;
margin: 0 auto 30px auto;
}
}
.events .events-list .event:last-child {
margin-right: 0;
}
@media screen and (max-width: 1280px) {
.events .events-list .event:last-child {
margin: 0 auto 30px auto;
}
}
.events .events-list .event .event_header {
border-bottom: solid 1px rgba(217, 218, 226, 0.5);
position: relative;
z-index: 1;
}
.events .events-list .event .event_header h5 {
margin: 0;
padding: 7px 0;
text-transform: uppercase;
background-color: #32c56e;
width: 100%;
color: white;
border-radius: 5px 5px 0 0;
text-align: center;
}
.events .events-list .event .event_header h4 {
color: #373c41;
line-height: 1.5rem;
padding: 12px 8.3333333333% 10px 8.3333333333%;
margin: 0;
border-radius: 15px 15px 0 0;
background-color: #F7F8FA;
border-bottom: solid 1px rgba(217, 218, 226, 0.5);
}
.events .events-list .event .event_header .event_properties {
padding: 20px 8.3333333333%;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
@media screen and (max-width: 425px) {
.events .events-list .event .event_header .event_properties {
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
}
.events .events-list .event .event_header .event_properties p {
margin: 0;
font-weight: 600;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 425px) {
.events .events-list .event .event_header .event_properties p + p {
margin-top: 30px;
}
}
.events .events-list .event .event_header .event_properties p svg {
display: inline-block;
width: 20px;
margin-right: 10px;
color: rgba(55, 60, 65, 0.5);
}
.events .events-list .event .event_header .event_properties p.hour {
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
.events .events-list .event .event_header .event_properties p.hour span {
padding-top: 3px;
}
.events .events-list .event .event_header p.users {
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: flex-start;
align-items: center;
margin-top: 15px;
font-weight: 600;
width: 100%;
}
.events .events-list .event .event_header p.users svg {
margin-right: 5px;
}
.events .events-list .event .event_header p.users svg > g > g, .events .events-list .event .event_header p.users svg > g use {
fill: rgba(55, 60, 65, 0.5);
}
.events .events-list .event .event_header a {
display: block;
padding: 10px 15px;
margin: 30px 0;
color: white;
font-size: 0.8rem;
font-weight: bold;
line-height: 1.1;
text-transform: uppercase;
border-radius: 3px;
background-color: #646464;
width: auto;
text-align: center;
text-decoration: none;
transition: background-color 0.3s;
}
.events .events-list .event .event_header a:hover {
background-color: #575757;
}
.events .events-list .event .event__description {
margin: 0;
padding: 20px 8.3333333333%;
border-bottom: solid 1px rgba(217, 218, 226, 0.5);
color: #517292;
font-size: 0.7rem;
line-height: 1.6;
}
.events .events-list .event .event_content {
position: relative;
z-index: 1;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
justify-content: space-between;
align-items: stretch;
flex-direction: column;
margin-bottom: 40px;
}
.events .events-list .event .event_content h5 {
color: #517292;
font-size: 0.7rem;
font-weight: 600;
line-height: 0.95rem;
display: block;
width: 100%;
padding: 15px 8.3333333333%;
margin-bottom: 0;
margin-top: 0;
border-bottom: solid 1px rgba(217, 218, 226, 0.5);
background-color: #F7F8FA;
}
.events .events-list .event .event_content ul {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: auto;
}
.events .events-list .event .event_content ul li {
padding: 0 30px;
border-bottom: solid 1px rgba(217, 218, 226, 0.5);
color: #517292;
font-size: 0.7rem;
line-height: 1.5rem;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-align-items: baseline;
-moz-align-items: baseline;
-ms-align-items: baseline;
justify-content: flex-start;
align-items: baseline;
}
.events .events-list .event .event_content ul li:before {
display: block;
content: "";
width: 10px;
height: 10px;
flex-shrink: 0;
border-radius: 999px;
margin-right: 10px;
background-color: #dadada;
}
.events .events-list .event .event_content ul li.unknown:before, .events .events-list .event .event_content ul li.missing:before {
background-color: #373c41;
}
.events .events-list .event .event_content ul li.expired:before {
background-color: #FE3333;
}
.events .events-list .event .event_content ul li.almost_expired:before {
background-color: #FFAC34;
}
.events .events-list .event .event_content ul li.valid:before {
background-color: #04D682;
}
.events .events-list .event .event_content ul li.active {
background-color: #F7F8FA;
border-left: solid 6px #5E9DFF;
padding-left: 24px;
}
.events .events-list .event .event_content ul li label {
display: block;
width: 100%;
}
.events .events-list .event .event_footer {
display: block;
width: 100%;
background-color: #F7F8FA;
border-top: solid 1px rgba(217, 218, 226, 0.5);
border-radius: 0 0 15px 15px;
text-align: center;
}
.events .events-list .event .event_footer p {
color: #517292;
font-size: 0.7rem;
line-height: 1.6;
}
.events .events-list .event .event__footer-button {
padding-bottom: 15px;
}
.events .events-list .event .event__footer-form {
margin-top: -18px;
}
.events .events-list .event form {
margin: auto auto 30px auto;
position: relative;
z-index: 10;
padding: 0 8.3333333333%;
}
.events .events-list .event form input[type=submit] {
margin: 0 auto;
min-width: auto;
width: auto;
text-align: center;
background-color: #373c41;
border: none;
text-transform: none;
transition: background-color 0.3s;
}
.events .events-list .event form input[type=submit]:hover {
background-color: #006ce6;
}
.events .events-list .event form input[type=submit].full {
pointer-events: none;
background-color: #dadada;
}
.events .events-list .event form input[type=submit].full:hover {
background-color: #dadada;
}
.events .events-list .event form .almost_full {
display: block;
width: 100%;
text-align: center;
font-size: 0.7rem;
line-height: 2;
color: #B0B0B0;
}
.events .events-list .event form.subscribed {
margin: auto;
}
@-webkit-keyframes showAndHide {
0% {
transform: translate3d(0, -40px, 0);
}
10% {
transform: translate3d(0, 0, 0);
}
90% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -40px, 0);
}
}
@keyframes showAndHide {
0% {
transform: translate3d(0, -40px, 0);
}
10% {
transform: translate3d(0, 0, 0);
}
90% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -40px, 0);
}
}
@supports (display: grid) {
.events .events-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-column-gap: 30px;
grid-row-gap: 45px;
}
@media screen and (max-width: 425px) {
.events .events-list {
display: block;
}
}
.events .events-list .event {
width: 100%;
max-width: 450px;
margin: 0 auto;
}
@media screen and (max-width: 425px) {
.events .events-list .event {
min-width: auto;
margin: 0 auto 30px auto;
}
}
.events .events-list .event:last-child {
margin-right: auto;
}
}
/* ==========================================================================
* Home page
* ========================================================================== */
.checkin {
min-height: 850px;
display: inline-block;
}
@media screen and (max-width: 900px) {
.checkin {
min-height: auto;
padding-bottom: 0;
}
}
.checkin h2 {
margin: 0;
}
.checkin .course-attributes {
width: auto;
margin-bottom: 60px;
}
.checkin .course-attributes p {
display: inline-flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
justify-content: center;
align-items: center;
margin-right: 45px;
}
.checkin .course-attributes p svg {
width: 18px;
color: #04D682;
margin-right: 10px;
}
.checkin .course-attributes p.trainer svg {
width: 16px;
}
.checkin input#certificate_number {
display: block;
font-size: 0.8rem;
line-height: 1.1;
padding: 10px;
}
.checkin input#certificate_number:focus {
outline: none;
}
.checkin input#certificate_number::-webkit-input-placeholder {
opacity: 0.5;
}
.checkin input#certificate_number::-moz-placeholder {
opacity: 0.5;
}
.checkin input#certificate_number:-ms-input-placeholder {
opacity: 0.5;
}
.checkin input#certificate_number:-moz-placeholder {
opacity: 0.5;
}
.checkin .checkin-result {
width: 90%;
font-size: 1.5rem;
line-height: 1.6;
opacity: 0;
transition: opacity 1s;
}
.checkin .checkin-result.show {
opacity: 1;
}
.checkin .checkin-result.success {
color: #095d0d;
}
.checkin .checkin-result.failed {
color: #9a0303;
}
@media screen and (max-width: 900px) {
.sidebar.students {
background-color: transparent;
position: relative;
width: 100%;
height: auto;
display: block;
transform: translate3d(0, 0, 0);
box-shadow: none;
}
}
.sidebar.students h1 {
padding: 0 14%;
}
@media screen and (min-width: 1801px) {
.sidebar.students h1 {
padding: 0 50px;
}
}
@media screen and (max-width: 900px) {
.sidebar.students h1 {
position: relative;
word-break: normal;
font-size: 1.6rem;
width: auto;
margin: 0;
text-align: left;
padding: 0;
}
}
@media screen and (max-width: 900px) {
.sidebar.students h1 span.icon {
display: none;
}
}
.sidebar.students h2 {
padding: 0 14%;
}
@media screen and (max-width: 900px) {
.sidebar.students h2 {
padding: 0;
}
}
.sidebar.students ul {
margin-bottom: 30px;
max-height: 240px;
border-top: 0.5px solid #cecece;
border-bottom: 0.5px solid #cecece;
}
@media screen and (max-width: 900px) {
.sidebar.students ul {
max-height: none;
height: auto;
margin-left: 30px;
border-left: 0;
}
}
.sidebar.students ul li {
padding: 25px 50px;
}
.sidebar.students ul li p {
color: #373c41;
font-weight: 600;
margin-bottom: 1.5em;
}
.sidebar.students ul li p.value {
font-weight: normal;
color: #98a0b3;
margin-bottom: 0.375em;
}
.sidebar.students ul#presentUsers li {
position: relative;
}
.sidebar.students ul#presentUsers li:before {
content: "\2713";
position: absolute;
left: 18px;
font-size: 1.6rem;
top: 0.6rem;
transform: rotate(-5deg);
color: #04D682;
}
.sidebar.students ul#subscribedUsers li {
position: relative;
}
.sidebar.students ul#subscribedUsers li:before {
content: "?";
position: absolute;
left: 18px;
font-size: 2rem;
top: 0.4rem;
}
#error-page-message {
padding: 100px 0 100px;
background-color: #eaeaea;
}
#error-page-message .grid-row .kms-content {
width: 100%;
text-align: center;
}
#error-page-message .grid-row .placeholder {
max-width: 720px;
margin: auto;
}
/*==========================================================================
* Sitemap page
* ========================================================================== */
.sitemap ul {
padding-left: 40px;
padding-bottom: 20px;
font-size: 0.85em;
}
.sitemap > ul {
padding-left: 20px;
}
.sitemap li:before {
top: 6px;
}
.sitemap li a {
padding: 3px 0;
border-bottom-color: transparent;
border-bottom-style: dotted;
display: block;
}
.sitemap li a:hover {
border-bottom-color: rgba(35, 40, 45, 0.4);
}