File: tests/css/layout.css

.titleblock {
/*    height: 176px;*/
}
header + section .titleblock, header + section.headerintro {
    height: 210px;
    min-height: 210px;
}
.titleblock > .container, .titleblock > .container > .row, .titleblock > .container > .row > .col {height: 100%;}
.titleblock > .container > .row > .col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.intro {
    font-size: 28px;
    line-height: 34px;
    font-family: Chatelet;
}
.text-section {
    padding-top: 3em;
    padding-bottom: 3em;
}

.btn {
    background: transparent;
    border: 1px solid black;
    padding: 0.7em 2em;
    color: #000;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.btn.icon {
    padding-left: 3em;
    background: transparent url('') 1em center no-repeat;
}
.btn.icon.confirm {
    background-image: url('../img/rightArrow.svg');
}
.btn.icon.cancel {
    background-image: url('../img/X.svg');
}
.btn.icon.confirm:hover {
    background-image: url('../img/rightArrow_w.svg');
}
.btn.icon.cancel:hover {
    background-image: url('../img/X_w.svg');
}
.btn:hover, .btn:active {
    background-color: #000;
    color: #FFF;
}

.bg-yellow {background-color: #FFFF37;}
.bg-orange {background-color: #FF864A;}
.bg-salmon {background-color: #F6A886;}
.bg-pink {background-color: #fed8d5;}
.bg-blue {background-color: lightblue;}
.bg-grey {background-color: #E0E0E0;}
.bg-lightgrey {background-color: #F8F8F8;}

header.bg-yellow .rs svg .pathfill {fill: #FFFF37;}
header.bg-orange .rs svg .pathfill {fill: #FF864A;}
header.bg-salmon .rs svg .pathfill {fill: #F6A886;}
header.bg-pink .rs svg .pathfill {fill: #fed8d5;}
header.bg-blue .rs svg .pathfill {fill: lightblue;}
header.bg-grey .rs svg .pathfill {fill: #E0E0E0;}
header.bg-lightgrey .rs svg .pathfill {fill: #F8F8F8;}
header .rs a:hover svg path:not(.pathfill) {fill: #FFF;}
header.bg-lightgrey .rs a:hover svg path.pathfill {fill: rgb(43, 46, 52);}

.overlay {
    display: none;
    position: fixed;
    z-index: 5;
    height: 100vh;
    right: 0;
    left: 0;
    top: 0;
    background: RGBA(0,0,0,0.3);
    justify-content: center;
    align-content: center;
    align-items: center;
}
body.fixed .overlay {
    display: flex;
}
.overlay .ov-container {
    border: 1px solid black;
    background-color: #FFF;
    padding: 50px 155px;
    font-size: 18px;
    box-sizing: border-box;
    width: 772px;
    max-width: 90vw;
    position: relative;
}
.overlay .ov-container > * {
    padding: 20px 0;
}
.overlay .ov-container .ov-title {
    font-size: 26px;
    font-family: Chatelet;
    text-align: center;
}
.overlay .ov-container .ov-content label {
    display: block;
    line-height: 2em;
}
.overlay .ov-container .ov-content label input {margin-right: 0.6em;}
.overlay .ov-container .ov-buttons {
    display: flex;
    justify-content: space-between;
}
.overlay .ov-close {
    position: absolute;
    top: 0;
    right: 0;
    padding:0;
    margin: 1em;
    background: transparent url('../img/X.svg');
    color: #FFF;
    color: transparent;
    text-decoration: none;
    width: 1em;
    height: 1em;
    background-size: contain;
}


.container {
    max-width: 1366px;
    margin: 0 auto;
}
.row {
    display:flex;
}
.row .row {
    margin-left: -10px;
    margin-right: -10px;
}
.col-center {
    justify-content: center;
}
.col {
    padding: 0 10px;
    box-sizing: border-box;
}
.expand {
    flex-grow: 1;
}
.col-1 {
    width:7.142857%;
}
.col-2 {
    width: 14.285714%;
}
.col-3 {
    width: 21.428571%;
}
.col-4 {
    width: 28.571428%;
}
.col-6 {
    width :50%;
}
.col-10 {
    width: 71.428571%;
}
.col-12 {
    width: 85.714285%;
}
.col-14 {
    width: 100%;
}
.offset-1 {
    margin-left: 7.142857%;
}
.offset-2 {
    margin-left: 14.285714%;
}