/*
 Theme Name:   River IT child
 Theme URI:    https://jj-net.fi/
 Description:  riverit.fi sivuston child teema.
 Author:       JJ-Net Group Oy
 Author URI:   https://jj-net.fi/
 Template:     jj-net-theme
 Version:      1.0
 License:      All rights reserved.
 License URI:  https://jj-net.fi/
 Text Domain:  jjnet
*/

@font-face {
    font-family: 'Khand';
    src: url('fonts/khand-regular-webfont.woff2') format('woff2'),
         url('fonts/khand-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Khand';
    src: url('fonts/khand-semibold-webfont.woff2') format('woff2'),
         url('fonts/khand-semibold-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Khand';
    src: url('fonts/khand-bold-webfont.woff2') format('woff2'),
         url('fonts/khand-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/lato-regular-webfont.woff2') format('woff2'),
         url('fonts/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/lato-bold-webfont.woff2') format('woff2'),
         url('fonts/lato-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

html {font-size: 18px;}
body { font-family: "Lato", sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: "Khand"; font-weight:700; margin-bottom: 20px;}
h1 {font-size: 3rem;}
h2 {font-size: 2.5rem;}
h3 {font-size: 1.5rem;}
h4 {font-size: 1.2rem;}

img {max-width: 100% !important; height: auto !important;}

/*.btn-custom { display:inline-block; padding: 17px 37px; border:0; background-color:#fff; color:#514a49; border-radius:25px; }
.btn-custom:hover,.btn-custom:focus,.btn-custom:active { text-decoration:none; }*/

.btn-dark {background: none; color: #fff; border: none;}

.btn-yellow a, a .btn-yellow {text-decoration: none; display: inline-block; margin: 15px 15px 15px 0; padding: 10px 25px 8px; border-radius: 20px; color: #000; background: #FFCE00; border: 1px solid #FFCE00; text-transform: uppercase; font-family: "Khand"; line-height: 1; font-weight: 500;}
.btn-yellow a:hover, .btn-yellow a:focus, .btn-yellow a:active, a:hover .btn-yellow, a:focus .btn-yellow, a:active .btn-yellow {color: #fff; background: #202021; border: 1px solid #fff; text-transform: uppercase; text-decoration: none;}
.btn-dark a, a .btn-dark {text-decoration: none; display: inline-block; margin: 15px 15px 15px 0; padding: 10px 25px 8px; border-radius: 20px; color: #E6E6E6; background: #202021; border: 1px solid #E6E6E6; text-transform: uppercase; font-family: "Khand"; line-height: 1; font-weight: 500;}
.btn-dark a:hover, .btn-dark a:focus, .btn-dark a:active, a:hover .btn-dark, a:focus .btn-dark, a:active .btn-dark {color: #202021; background: #E6E6E6; border: 1px solid #202021; text-transform: uppercase; text-decoration: none;}
.btn-white a, a .btn-white {text-decoration: none; display: inline-block; margin: 15px 15px 15px 0; padding: 10px 25px 8px; border-radius: 20px; color: #000; background: #fff; border: 1px solid #fff; text-transform: uppercase; font-family: "Khand"; line-height: 1; font-weight: 500;}
.btn-white a:hover, .btn-white a:focus, .btn-white a:active, a:hover .btn-white, a:focus .btn-white, a:active .btn-white {color: #fff; background: #202021; border: 1px solid #202021; text-transform: uppercase; text-decoration: none;}

.arrow-link a {text-decoration: none; line-height: 1.5; padding-left: 25px; padding-top: 1px; position: relative; display: inline-block; min-height: 19px; font-family: "Khand"; font-weight: 500; font-size: 1rem; color: #000;}
.arrow-link a::before {width: 21px; height: 14px; content: ""; background: url('img/linkarrow.png') left top no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.arrow-link a:focus, .arrow-link a:hover, .arrow-link a:active {text-decoration: none; border-bottom: 1px solid #000;}

.content.dark .arrow-link a {border-bottom: 1px solid transparent; line-height: 1.5; padding-left: 25px; padding-top: 1px; position: relative; display: inline-block; min-height: 19px; font-family: "Khand"; font-weight: 500; font-size: 1rem; color: #fff;}
.content.dark .arrow-link a::before {width: 21px; height: 14px; content: ""; background: url('img/linkarrow-w.png') left top no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.content.dark .arrow-link a:focus, .content.dark .arrow-link a:hover, .content.dark .arrow-link a:active {text-decoration: none; border-bottom: 1px solid #fff;}

.big-text {font-family: "Khand"; font-weight:700; font-size: 1.1rem; text-transform: uppercase;}

.dt-only {display: block;}
.mobi-only {display: none;}

.navigation-container {background: none !important; position: fixed; top: 15px; left: 0; width: 100%; z-index: 9999; font-family: "Khand";}
.navigation-container .navi-wrap {position: relative; border-radius: 15px; padding: 15px 0; background: rgba(32,32,33,0.75) !important; backdrop-filter: blur(8px); margin: 0 -165px; max-width: 100vw;}
.navigation-container .navi-logo {position: absolute; left: 30px; top: 25px; z-index: 9999;}
.navigation-container .navi-logo img {height: 40px !important;}
.navigation-container .mainnavi {position: relative; z-index: 9998;}
.navigation-container #quadmenu ul.quadmenu-navbar-nav {padding: 0 220px;}
.navigation-container #quadmenu li.quadmenu-item-type-button {position: absolute; right: 15px; font-weight: 500;}
.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-button > a > .quadmenu-item-content {padding: 10px 15px !important; text-transform: uppercase; font-size: 19px;}

.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column:last-of-type {align-self: flex-end;}
.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column:last-of-type li.quadmenu-item-type-button .quadmenu-item-content { position: relative; padding: 5px 5px 5px 26px !important;}
.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column:last-of-type li.quadmenu-item-type-button .quadmenu-item-content::before {width: 21px; height: 14px; content: ""; background: url('img/linkarrow.png') left top no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column:last-of-type li.quadmenu-item-type-button a {background: #fff !important; width: auto !important; display: inline-block; border-bottom: 1px solid #fff;}
.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column:last-of-type li.quadmenu-item-type-button a:hover, .navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column:last-of-type li.quadmenu-item-type-button a:focus {border-bottom: 1px solid #000;}
.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column:last-of-type li.quadmenu-item-type-button {text-align: right; background: #fff !important;;}
.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column:last-of-type li.quadmenu-item-type-button:hover .quadmenu-item-content {color: #000;}

.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-dropdown > .quadmenu-dropdown-menu.quadmenu-dropdown-stretch-boxed {padding: 30px; background: #fff !important;}

.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column .textwidget a {display: block; padding: 30px; border: 3px solid #fff; border-radius: 20px; color: #202021;}
.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column .textwidget a:hover {border: 3px solid #FFCE00;}
.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column .textwidget img {width: 50%; margin-bottom: 15px;}
.navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column .textwidget b, .navigation-container #quadmenu ul.quadmenu-navbar-nav li.quadmenu-item-type-mega .quadmenu-dropdown-menu li.quadmenu-item-type-column .textwidget strong {font-size: 1.5rem;}

.navigation-container #quadmenu .quadmenu-navbar-nav li.quadmenu-item > a > .quadmenu-item-content > .quadmenu-caret::before {content: ""; background: url('img/dropdown-down.png') center center no-repeat; background-size: contain; width: 11px; height: 11px; margin-left: 5px;}
.navigation-container #quadmenu .quadmenu-navbar-nav li.quadmenu-item.open > a > .quadmenu-item-content > .quadmenu-caret::before {content: ""; background: url('img/dropdown-up.png') center center no-repeat; background-size: contain; width: 11px; height: 11px; margin-left: 5px;}

.navigation-container #quadmenu ul.quadmenu-navbar-nav li.current-menu-item > a .quadmenu-item-content {color: #ffce00;}

.mobile-navi {display: none;}

body .banner-container .owl-carousel .owl-stage-outer {overflow: visible; position: static !important;}
body .banner-container {padding: 0; position: relative;}
body .banner-container > .container-fluid {position: relative; z-index: 500;}
body .banner-container > .container-fluid .owl-carousel-item > .row {align-items: center;}
body .banner-container .banrow {align-items: center !important; min-height: 450px;}
body .banner-container .banner-left {position: relative; display: flex; justify-content: flex-end; align-items: center;}
body .banner-container .carousel-caption {color: #000; text-align: left; position: static; padding: 30px 15px; width: calc(1370px / 2);}
body .banner-container .carousel-caption h1, .banner-container .carousel-caption h2 {font-size: 2.5rem; margin-bottom: 30px;}
body .banner-container .carousel-caption .subtitle {margin-bottom: 30px;}
body .banner-image { display: block; overflow:hidden; position: relative; width: 100%; height: 100%;}
body .banner-image .banner-image-inner {overflow:hidden; height: 100%; width: 100%;}
body .banner-image .banner-image-inner img { display:block; }
body .banner-container .owl-carousel .owl-stage-outer {overflow: visible; position: static !important;}

body:not(.frontpage) .banner-image {border-radius: 20px;}
body:not(.frontpage) .banner-image img {border-radius: 20px;}

body .banner-container .carousel-caption a.banner-link {display: inline-block; margin: 0 15px 15px 0; padding: 5px 15px; border-radius: 20px; color: #000; background: #FFCE00; border: 1px solid #FFCE00; text-transform: uppercase;}

body:not(.frontpage) .banner-container {background: url('img/banner-bg-r.png') left center no-repeat #fff; background-size: contain; border-top: 130px solid #fff; padding-bottom: 50px;}
body.frontpage .banner-container {background: #202021; border-top: 130px solid #202021;}
body.frontpage .banner-container .carousel-caption {color: #fff; text-align: left;}
body.frontpage .banner-container .carousel-caption h1, body.frontpage .banner-container .carousel-caption h2 {color: #fff; margin-bottom: 30px; font-size: 2.5rem;}
body.frontpage .banner-container .carousel-caption .crumbtrail-container {display: none;}

body.frontpage .banner-container .banner-scrolldown {text-align: center; margin-top: 50px; position: relative; height: 55px;}
body.frontpage .banner-container .banner-scrolldown a.banner-arrow-down {display: inline-block; height: 40px; position: absolute; left: 50%; transform: translateX(-50%); top: 0; animation: bounce 1s linear infinite;}

@keyframes bounce {
    0% {
        top: 0;
    }
    50% {
        top: 15px;
    }
    100% {
        top: 0;
    }
}

body .static-content.page-title  {background: url('img/banner-bg-r.png') left center no-repeat #fff !important; background-size: contain !important; border-top: 100px solid #fff; padding-bottom: 30px;}
body .static-content.page-title::after {display: none;}

.banner-container {z-index: 1000;}
.banner-container .owl-carousel {position: relative;}

body .crumbtrail-container {font-family: "Khand"; margin-bottom: 30px;}
body .crumbtrail-container a {color: #000; font-weight: 700; text-transform: uppercase; text-decoration: underline;}
body .crumbtrail-container .current-page {opacity: 1; text-transform: uppercase; color: #3D3D3D; font-weight: 500;;}
body .crumbtrail-container .crumbtrail-separator::after {content: ">"; font-weight: 700;}

.content {padding: 80px 0 10px; position: relative;}
.content::after {content: ""; position: absolute; bottom: -20px; left: 0; z-index: 500; border-radius: 0 0 30px 30px; width: 100%; height: 20px;}

.content.white {background: #fff;}
.content.white::after {background: #fff;}
.content.grey {background: #f5f5f5;}
.content.grey::after {background: #f5f5f5;}
.content.dark {background: #202021; color: #fff;}
.content.dark::after {background: #202021;}
.content.yellow {border-radius: 0 0 30px 30px; background: url('img/r-graphic.png') left bottom no-repeat #FFCE00; border-top: 60px solid #FFCE00; background-size: contain; padding: 30px 0 40px;}
.content.yellow::after {display: none;}

.content.align-vertical > .container > .row {align-items: center;}

.content.white + .content.white {padding-top: 20px;}
.content.grey + .content.grey {padding-top: 20px;}
.content.dark + .content.dark {padding-top: 20px;}

.content.animated-title {background: #f5f5f5;}
.content.animated-title::after {background: #f5f5f5;}

.banner-container + main .content:first-of-type {z-index: 1000;}
.banner-container + main .content:first-of-type:after {z-index: 1000;}

.content.yellow-box > .container > .row {margin-bottom:15px; padding: 30px 15px; border-radius: 20px; background: #FFEC97; color: #000; align-items: center;}
.content.yellow-box .col-text {padding: 30px;}

.content.dark-box > .container > .row {margin-bottom:15px; padding: 30px 15px; border-radius: 20px; background: #202021; color: #fff; align-items: center;}
.content.dark-box .col-text {padding: 30px;}

.content.color-boxes .leftcol > div {background: #FFEC98; border-radius: 20px; padding: 30px; }
.content.color-boxes .midcol > div {background: #DBDBDB; border-radius: 20px; padding: 30px;}
.content.color-boxes .rightcol > div {background: #3D3D3D; border-radius: 20px; padding: 30px; color: #FFEC98; }

.content.color-boxes .leftcol {margin: 0 0 30px;}
.content.color-boxes .midcol {margin: 0 0 30px;}
.content.color-boxes .rightcol {margin: 0 0 30px;}

.content.twoboxes > .container > .row {align-items: stretch;}
.content.twoboxes .textbox {margin-bottom: 20px;}
.content.twoboxes .textbox > .col-content {border: 1px solid #707070; background: #fff; padding: 50px; border-radius: 20px; height: 100%;}

.col-image {margin-bottom: 30px;}
.dark-box .col-image, .yellow-box .col-image {text-align: center; margin-bottom: 0;}

.animated-title .leftcol {position: relative;}
.animated-title .leftcol .col-text {position: sticky; top: 200px; padding-bottom: 100px; z-index: 100;}

.col-text ul {list-style: none; padding: 0; margin: 0;}
.col-text ul li {padding-left: 35px; position: relative; display: block; padding-bottom: 20px; min-height: 40px;}
.col-text ul li::before {position: absolute; left: 0; top: 1px; content: ""; width: 25px; height: 25px; background: url('img/ul-li.png') center center no-repeat; background-size: contain; }

.content-carousel-description {padding-bottom: 15px;}
.col-content_carousel .owl-carousel-item .content-carousel-image {height: auto !important; text-align: center;}
.col-content_carousel .owl-carousel-item .content-carousel-image img {width: auto;}

.cont-hl-title {margin-bottom: 50px;}

.content-highlight-container {margin-bottom: 30px;}
body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight {margin-bottom: 30px;}
body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight-container {position: relative; text-decoration: none; box-shadow: none; padding: 50px 50px 100px; background: #fff; border: 1px solid #B4B4B4; border-radius: 20px; color: #000; height: 100%; margin-bottom: 0;}
body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight-container img {margin-bottom: 30px;}
body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight-inner {text-align: left; padding: 0;}
body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight-link-wrap {display: block; position: absolute; bottom: 50px; left: 0; width: 100%; padding: 0 50px;}
body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight-link {border-bottom: 1px solid transparent; line-height: 1.5; padding-left: 25px; padding-top: 1px; position: relative; display: inline-block; min-height: 19px; font-family: "Khand"; font-weight: 500; font-size: 1rem; color: #000;}
body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight-link::before {width: 21px; height: 14px; content: ""; background: url('img/linkarrow.png') left top no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight-container:focus .content-highlight-link, body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight-container:hover .content-highlight-link, body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight-container:active .content-highlight-link {text-decoration: none; border-bottom: 1px solid #000;}
body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .hl-cat {color: #50408B; margin-bottom: 20px; font-weight: 700; font-size: 1.3rem; font-family: "Khand";}

body .col-content_highlights.numbered-highlights .content-highlight-container {box-shadow: none; padding: 30px 50px; background: #fff; border: 1px solid #D3D3D3; border-radius: 20px; color: #000; display: flex; position: relative;}
body .col-content_highlights.numbered-highlights .content-highlight-container img {margin-bottom: 30px;}
body .col-content_highlights.numbered-highlights .hl-number {width: 80px; font-size: 49px; color: #50408B; font-family: "Khand"; font-weight: 700; line-height: 1;}
body .col-content_highlights.numbered-highlights .content-highlight-inner {text-align: left; padding: 0; width: calc(100% - 80px); color: #3D3D3D;}
body .col-content_highlights.numbered-highlights .content-highlight-inner h3 {font-size: 1.05rem; font-family: "Lato"; margin-bottom: 10px;}
body .col-content_highlights.numbered-highlights .content-highlight-link {display: block; margin-top: 30px;}

body .col-content_highlights.numbered-highlights .content-highlight-container::after {position: absolute; content: ""; width: 6px; height: 31px; bottom: -31px; left: 50%; transform: translateX(-50%); background: #D3D3D3;}
body .col-content_highlights.numbered-highlights .row-highlights .content-highlight:last-child .content-highlight-container::after {display: none;}

body .col-content_highlights.icon-highlights .content-highlight-container {box-shadow: none; display: flex; padding: 20px 0 40px; align-items: start;}
body .col-content_highlights.icon-highlights .content-highlight-container img {width: 200px; max-width: 200px !important;}
body .col-content_highlights.icon-highlights .content-highlight-container .content-highlight-inner {text-align: left; padding: 0 0 0 50px;width: calc(100% - 200px); background: none;}
body .col-content_highlights.icon-highlights .content-highlight-container .content-highlight-inner h3 {margin-bottom: 30px;}

body .col-content_highlights.dark-highlights {height: 100%;}
body .col-content_highlights.dark-highlights .row-highlights {height: 100%;}
body .col-content_highlights.dark-highlights .row-highlights .content-highlight {height: 100%;}
body .col-content_highlights.dark-highlights .content-highlight-container {text-decoration: none; height: 100%; box-shadow: none; background: #202021; color: #fff; border-radius: 20px; height: calc(100% - 30px); padding: 100px 50px 50px; position: relative; margin-bottom: 30px; display: flex; align-items: end; flex-wrap: wrap;}
body .col-content_highlights.dark-highlights .content-highlight-container img {width: 50px; position: absolute; right: 50px; top: 30px;}
body .col-content_highlights.dark-highlights .content-highlight-container .hl-cat {font-family: "Khand"; font-weight: 700; position: absolute; left: 50px; top: 45px; max-width: calc(100% - 130px); text-transform: uppercase; font-size: 1.2rem;}
body .col-content_highlights.dark-highlights .content-highlight-container .content-highlight-inner {background: none; text-align: left; padding: 0;}
body .col-content_highlights.dark-highlights .content-highlight-container .content-highlight-link-wrap {display: block; margin-top: 30px;}
body .col-content_highlights.dark-highlights .content-highlight-container .content-highlight-link {display: inline-block; margin: 0 15px 15px 0; padding: 10px 25px 8px; border-radius: 20px; color: #000; background: #FFCE00; border: 1px solid #FFCE00; text-transform: uppercase; font-family: "Khand"; line-height: 1; font-weight: 500;}
body .col-content_highlights.dark-highlights .content-highlight-container:focus .content-highlight-link, body .col-content_highlights.dark-highlights .content-highlight-container:hover .content-highlight-link,body .col-content_highlights.dark-highlights .content-highlight-container:active .content-highlight-link {color: #fff; background: #202021; border: 1px solid #fff; text-transform: uppercase; text-decoration: none;}

.col-image img {border-radius: 20px;}
.col-text img {border-radius: 20px; margin: 40px 0;}

body .col-number_counter > ul {margin: 0;}
body .col-number_counter > ul > li {text-align: left; font-family: "Khand"; line-height: 1.1;}
body .col-number_counter > ul > li .number {display: inline-block; font-weight: 700; font-size: 2.5rem;}
body .col-number_counter > ul > li .unit {display: inline-block; font-weight: 700; font-size: 2.5rem; margin-left: 5px;}
body .col-number_counter > ul > li .label {text-transform: uppercase; font-size: 1.5rem;}

body .archive-references {background: #F5F5F5; padding: 60px 0;}

.archive-references .newest-reference-title h2 {padding-top: 5px; font-size: 1.5rem; padding-left: 45px; position: relative; display: block; margin-bottom: 15px;}
.archive-references .newest-reference-title h2::before {width: 35px; height: 35px; content: ""; background: url('img/casestar.png') left top no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

.archive-references .newest-reference {display: flex;background: #FFEC97; padding: 30px; margin-bottom: 50px; border-radius: 20px; align-items: center;}
.archive-references .newest-reference img {border-radius: 20px;}
.archive-references .newest-reference .newest-reference-info {padding: 50px;}
.archive-references .newest-reference .archive-ingres {color: #000;}

.archive-references .reference-archive-col {margin-bottom: 50px; padding: 0 30px;}
.archive-references .reference-archive-col img {border-radius: 20px; margin-bottom: 30px;}
.archive-references .reference-archive-col .archive-ingres {color: #000;}
.archive-references .reference-archive-col .archive-read-more {margin-top: 20px;}

.ref-hl-row {align-items: center; margin-bottom: 50px;}
.ref-hl-maintitle {font-size: 1.1rem; text-transform: uppercase;}
.references-highlight-archive-link {text-align: right;}
.references-highlight-archive-link .btn-yellow a {margin-top: 0;}
.reference-highlight {padding: 0 30px; margin-bottom: 30px;}
.reference-highlight .reference-info {padding-top: 15px;}
.reference-highlight .reference-info h3 {margin-bottom: 15px;}
.reference-highlight .reference-info .ingress {margin-bottom: 30px;}
.reference-highlight img {border-radius: 20px; margin-bottom: 15px;}

.persons-hl-title {padding-bottom: 30px; text-align: center;}
.person-highlight {margin-bottom: 50px;}
.person-highlight img {border-radius: 10px; margin-bottom: 15px;}
.person-highlight .person-title {font-weight: 500; font-family: "Khand"; margin-bottom: 15px;}
.person-highlight ul {list-style: none; padding: 0; margin: 0; font-size: 0.9rem;}
.person-highlight a {color: #000; text-decoration: none;}

.static-content.yellow-footer {background: none; color: #000; padding: 0 0 30px;}
.static-content.yellow-footer::after {display: none;}

body footer {background: #fff; padding: 60px 0 0;}
body:not(.subpage-white) footer {background: url('img/r-graphic.png') left bottom no-repeat #FFCE00; border-top: 50px solid #FFCE00; background-size: contain; padding: 30px 0 0;}

body.subpage-white footer {background: #F5F5F5;}

body .footer-container {background: none; padding:  0;}
body .footer-container  .footer-wrap {padding: 50px 60px 0; border-radius: 20px 20px 0 0; background: #202021;}
.footer-container h2 {font-size: 1.3rem; font-weight: 500; text-transform: uppercase;}

/*.footer-logo img {height: 40px !important;}*/

.footer-links a {border-bottom: 1px solid transparent; text-decoration: none; line-height: 1.5; padding-left: 25px; padding-top: 1px; position: relative; display: inline-block; min-height: 19px; font-family: "Khand"; font-weight: 500; font-size: 1rem; color: #000; margin-bottom: 15px;}
.footer-links a::before {width: 21px; height: 14px; content: ""; background: url('img/linkarrow-w.png') left top no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.footer-links a:focus, .footer-links a:hover, .footer-links a:active {text-decoration: none; border-bottom: 1px solid #fff;}

.footer-content a {border-bottom: 1px solid transparent; text-decoration: none; line-height: 1.5; padding-left: 25px; padding-top: 1px; position: relative; display: inline-block; min-height: 19px; font-family: "Khand"; font-weight: 500; font-size: 1rem; color: #000; margin-bottom: 15px;}
.footer-content a::before {width: 21px; height: 14px; content: ""; background: url('img/linkarrow-w.png') left top no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.footer-content a:focus, .footer-content a:hover, .footer-content a:active {text-decoration: none; border-bottom: 1px solid #fff;}

.footer-someicons {padding-bottom: 30px;;}

body .bottombar-container {background: none; padding: 0;}
body .bottombar-container .bottombar-wrap {padding: 15px 60px; background: #202021; color: #B9B9B9; font-size: 15px;}
body .bottombar-container .bottombar-wrap > .row {border-top: 1px solid #707070; padding-top: 20px;}
body .bottombar-container .bottombar-content {padding-top: 5px;}

footer .frm_forms form {width: 500px; margin: 0 auto; max-width: calc(100% - 30px);}
footer .frm_forms form .frm_submit {text-align: center;}
footer .frm_forms form .frm_submit button {font-family: "Khand"; font-size: 1rem !important; font-weight: 500 !important;}

@media (min-width: 1200px) {
    .container {width: 1400px; max-width: 100%;}
}

@media (max-width: 1703px) {
    .navigation-container .navi-wrap {margin: 0;}
}

@media (max-width: 1199px) {
    body .col-content_highlights.dark-highlights .content-highlight-container {padding: 100px 20px 30px;}
    body .col-content_highlights.dark-highlights .content-highlight-container .hl-cat {left: 20px;}
    body .col-content_highlights.dark-highlights .content-highlight-container img {right: 20px;}
    body .col-content_highlights:not(.numbered-highlights):not(.icon-highlights):not(.dark-highlights) .content-highlight-container {padding: 25px 25px 100px;}
    body:not(.frontpage) .banner-container {border-top: 160px solid #fff;}
    body.frontpage .banner-container {border-top: 160px solid #202021;}
    .navigation-container #quadmenu ul.quadmenu-navbar-nav {padding: 0 200px;}
    .navigation-container #quadmenu li.quadmenu-item-type-button {right: 0;}
    .navigation-container #quadmenu .quadmenu-navbar-nav li.quadmenu-item .quadmenu-item-content {padding: 0 10px;}
    .navigation-container #quadmenu .quadmenu-navbar-nav ul.quadmenu-row li.quadmenu-item-object-column {width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;}
}

@media (max-width: 991px) {
    .navigation-container .navi-wrap {margin: 0;}
    .navigation-container #quadmenu ul.quadmenu-navbar-nav {padding: 0 15px}
    .navigation-container #quadmenu li.quadmenu-item-type-button {position: static;}
    .mobile-navi {display: block; position: relative; z-index: 9998;}
    .mobile-navi .quadmenu-navbar-toggle {position: absolute; right: 0; top: 0;}
    .mainnavi {display: none;}
    .references-highlight-archive-link {text-align: left;}
    body .col-content_highlights.icon-highlights .content-highlight-container img {width: 120px; max-width: 120px !important;}
    body .col-content_highlights.icon-highlights .content-highlight-container .content-highlight-inner {width: calc(100% - 120px); padding-left: 25px;}
    .archive-references .newest-reference .newest-reference-info {padding: 15px;}
    body:not(.frontpage) .banner-container {border-top: 100px solid #fff;}
    body.frontpage .banner-container {border-top: 100px solid #202021;}
    body.frontpage .banner-container .banner-scrolldown {display: none;}
    body.frontpage .banner-container + main .content:first-of-type {padding-top: 30px;}
}

@media (max-width: 767px) {
    .animated-title .leftcol .col-text {position: static; padding-bottom: 15px;}
    .person-highlight {text-align: center;}
    .bottombar-content {text-align: center;}
    .bottombar-container .bottombar-links #quadmenu .quadmenu-navbar-nav {text-align:center !important;}
    .footer-logo {margin-bottom: 30px;}
}

@media (max-width: 380px) {
    body .col-content_highlights.icon-highlights .content-highlight-container {display: block;}
    body .col-content_highlights.icon-highlights .content-highlight-container img {width: auto; max-width: 100% !important; margin-bottom: 20px;}
    body .col-content_highlights.icon-highlights .content-highlight-container .content-highlight-inner {width: 100%; padding-left: 0;}
}