/******************************************************/
/* Bootstrap Style Sheet Modification *****************/
/******************************************************/
@font-face{
    font-family:"Helvetica Neue LT W05";
    font-weight: 300;
    font-display:swap;
    src:url("../fonts/NeueHelvetica/5ab020b6-67c6-4666-95ee-09cce0e39f2f.woff2") 
        format("woff2"),url("../fonts/NeueHelvetica/195ede8e-7c97-4ab9-9a81-ddff21e9e6bd.woff") 
        format("woff")
}
@font-face{
    font-family:"Helvetica Neue LT W05";
    font-weight: normal;
    font-display:swap;
    src:url("../fonts/NeueHelvetica/6b43fb6d-89b8-4c64-a8e0-c8fb1f66f40f.woff2") 
        format("woff2"),url("../fonts/NeueHelvetica/fb121aa0-95ce-488e-99c7-ee37079f1c62.woff") 
        format("woff")
}
@font-face{
    font-family:"Helvetica Neue LT W05";
    font-weight: bold;
    font-display:swap;
    src:url("../fonts/NeueHelvetica/800da3b0-675f-465f-892d-d76cecbdd5b1.woff2") 
        format("woff2"),url("../fonts/NeueHelvetica/7b415a05-784a-4a4c-8c94-67e9288312f5.woff") 
        format("woff")
}
@font-face{
    font-family:"Helvetica Neue World";
    font-weight: 300;
    font-display:swap;
    src:url("../fonts/NeueWorldHelvetica/subset-HelveticaNeueWorld-45Lt.woff2") 
        format("woff2"),url("../fonts/NeueWorldHelvetica/subset-HelveticaNeueWorld-45Lt.woff") 
        format("woff")
}
@font-face{
    font-family:"Helvetica Neue World";
    font-weight: normal;
    font-display:swap;
    src:url("../fonts/NeueWorldHelvetica/subset-HelveticaNeueWorld-55Roman.woff2") 
        format("woff2"),url("../fonts/NeueWorldHelvetica/subset-HelveticaNeueWorld-55Roman.woff") 
        format("woff")
}
@font-face{
    font-family:"Helvetica Neue World";
    font-weight: bold;
    font-display:swap;
    src:url("../fonts/NeueWorldHelvetica/subset-HelveticaNeueWorld-75Bold.woff2") 
        format("woff2"),url("../fonts/NeueWorldHelvetica/subset-HelveticaNeueWorld-75Bold.woff") 
        format("woff")}
@font-face{
    font-family:"BASFIconFont";
    font-display:swap;
    font-style:normal;
    font-weight:normal;
    src:url("../fonts/BASFIconFont/BASFIconFont.woff2") 
        format("woff2"),url("../fonts/BASFIconFont/BASFIconFont.woff") 
        format("woff")}
@font-face{
    font-family:"BASFIcons";
    font-display:swap;
    font-style:normal;
    font-weight:normal;
    src:url("../fonts/BASFIcons/BASF_Icons.woff2") 
        format("woff2"),url("../fonts/BASFIcons/BASF_Icons.woff") 
        format("woff")
}

@font-face {
    font-family: "Helvetica Neue WGL Roman";
    src: url("../fonts/HelveticaNeueWGL_regular.eot");
    src: url("../fonts/HelveticaNeueWGL_regular.eot?#iefix") 
        format("embedded-opentype"), url("../fonts/HelveticaNeueWGL_regular.woff2") 
        format("woff2"), url("../fonts/HelveticaNeueWGL_regular.woff") 
        format("woff"), url("../fonts/HelveticaNeueWGL_regular.ttf") 
        format("truetype"), url("../fonts/HelveticaNeueWGL_regular.svg#Helvetica Neue WGL") 
        format("svg");
}

@font-face {
    font-family: "Helvetica Neue WGL Bold";
    src: url("../fonts/HelveticaNeueWGL_bold.eot");
    src: url("../fonts/HelveticaNeueWGL_bold.eot?#iefix") 
        format("embedded-opentype"), url("../fonts/HelveticaNeueWGL_bold.woff2") 
        format("woff2"), url("../fonts/HelveticaNeueWGL_bold.woff") 
        format("woff"), url("../fonts/HelveticaNeueWGL_bold.ttf") 
        format("truetype"), url("../fonts/HelveticaNeueWGL_bold.svg#Helvetica Neue WGL") 
        format("svg");
}

@font-face {
    font-family: "Helvetica Neue WGL Italic";
    src: url("../fonts/HelveticaNeueWGL_italic.eot");
    src: url("../fonts/HelveticaNeueWGL_italic.eot?#iefix") 
        format("embedded-opentype"), url("../fonts/HelveticaNeueWGL_italic.woff2") 
        format("woff2"), url("../fonts/HelveticaNeueWGL_italic.woff") 
        format("woff"), url("../fonts/HelveticaNeueWGL_italic.ttf") 
        format("truetype"), url("../fonts/HelveticaNeueWGL_italic.svg#Helvetica Neue WGL") 
        format("svg");
}

@font-face {
    font-family: "Helvetica Neue WGL Italic Bold";
    src: url("../fonts/HelveticaNeueWGL_bold_italic.eot");
    src: url("../fonts/HelveticaNeueWGL_bold_italic.eot?#iefix")
        format("embedded-opentype"), url("../fonts/HelveticaNeueWGL_bold_italic.woff2")
        format("woff2"), url("../fonts/HelveticaNeueWGL_bold_italic.woff")
        format("woff"), url("../fonts/HelveticaNeueWGL_bold_italic.ttf")
        format("truetype"), url("../fonts/HelveticaNeueWGL_bold_italic.svg#Helvetica Neue WGL")
        format("svg");
}

html {
    font-family: "Helvetica Neue LT W05", "Helvetica Neue World", Helvetica, Arial, sans-serif;
    font-weight: normal;
    position: relative;
    height: 100%;
    min-height: 100%;
}
body{
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size:15px;
    line-height:26px;
    color:#333;
    overflow-x:hidden;
    overflow-y:auto;
    height: 100%;
}
@media(min-width:768px) and (max-width:991.9px){body{font-size:16px;line-height:28px}
}
@media(min-width:992px) and (max-width:1199.9px){body{font-size:18px;line-height:32px}
}
@media(min-width:1200px){body{font-size:20px;line-height:34px}
}

.aem-grid-default {
    float: left;
    clear: none;
    width: 100%;
}

.container {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 90.6%;
    max-width: 1246px;
    float: none;
    
    clear: both;
}
@media (min-width: 1200px) {
    .container {
        width: 78.48%;
    }
}

.container.border-bottom {
    border-bottom: 1px solid #adadad;
}
.container.border-top {
    border-top: 1px solid #adadad;
}

.jumbotron {
    padding-top: 0px;
    margin-top: 48px;
    background-color: #f0f0f0;
}
.jumbotron .container {
    max-width: 1246px;
}

.row {
    margin-top: 50px;
}
.row ol {
    counter-reset: item;
}
.row ul {
    height: calc(100% - 60px);
    list-style: none;
    padding: 0 20px 0 0;
    overflow: hidden;
    position: relative;
}
.row li {
    padding: 15px;
    counter-increment: item;
}
.row li ol > li::marker {
    content: counters(item, ".") ". ";
}
.row li ol.alpha > li::marker {
    content: "(" counter(item, lower-alpha) ") ";
}

.col-theme-dark {background-color: #21a0d2; color:#fff;}
.col-theme-light {background-color: #9bd4eb;}
.col-theme-grey {background-color: #f0f0f0;}

.col-theme-dark h1, .col-theme-dark h2, .col-theme-dark h3, .col-theme-dark h4, .col-theme-dark a {
    color: #fff;
}

.small, small {
    font-size: 80%;
    margin-left: 10px;
    font-weight: normal;
}

h1{
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size:35px;
    line-height:45px;
    color:#000;
}
@media(min-width:768px) and (max-width:991.9px){h1{font-size:40px;line-height:50px}}
@media(min-width:992px) and (max-width:1199.9px){h1{font-size:45px;line-height:55px}}
@media(min-width:1200px){h1{font-size:50px;line-height:60px}}

h2{
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size:22px;
    line-height:30px;
    color:#000;
}
@media(min-width:768px) and (max-width:991.9px){h2{font-size:24px;line-height:32px}}
@media(min-width:992px) and (max-width:1199.9px){h2{font-size:28px;line-height:38px}}
@media(min-width:1200px){h2{font-size:30px;line-height:40px}}

h3{
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size:20px;
    line-height:28px;
    color:#21a0d2;
}
@media(min-width:768px) and (max-width:991.9px){h3{font-size:22px;line-height:30px}}
@media(min-width:992px) and (max-width:1199.9px){h3{font-size:26px;line-height:36px}}
@media(min-width:1200px){h3{font-size:28px;line-height:38px}}

h4{
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size:15px;
    line-height:26px;
    color:#000;
}
@media(min-width:768px) and (max-width:991.9px){h4{font-size:16px;line-height:28px}}
@media(min-width:992px) and (max-width:1199.9px){h4{font-size:18px;line-height:32px}}
@media(min-width:1200px){h4{font-size:20px;line-height:34px}}

a{
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size:15px;
    line-height:22px;
    text-decoration:none;
    color: #21a0d2;
    cursor: pointer;
}
a:hover{text-decoration:none;color:#C7C7C7;}
a:focus{text-decoration:none;color:#C7C7C7;}
@media(min-width:768px) and (max-width:991.9px){a{font-size:16px;line-height:23px}}
@media(min-width:992px) and (max-width:1199.9px){a{font-size:18px;line-height:25px}}
@media(min-width:1200px){a{font-size:20px;line-height:28px}}

.caption{
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size:14px;
    line-height:22px;
    color:#7c7c7c
}
@media(min-width:768px) and (max-width:991.9px){.caption{font-size:15px;line-height:22px}}
@media(min-width:992px) and (max-width:1199.9px){.caption{font-size:16px;line-height:23px}}
@media(min-width:1200px){.caption{font-size:18px;line-height:25px}}

.copy-teaser {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 22px;
}
@media (max-width: 991.9px) and (min-width: 768px){ .copy-teaser {font-size: 16px;line-height: 23px;}}
@media (max-width: 1199.9px) and (min-width: 992px){ .copy-teaser {font-size: 18px;line-height: 25px;}}
@media (min-width: 1200px){ .copy-teaser {font-size: 20px;line-height: 28px;}}

.button{
    padding:10px 20px;
    font-size:15px;
    color:#fff;
    text-decoration:none;
    text-align:center;
    line-height:26px;
    border-style:none;
    display:flex;
    width:100%;
    align-items:center;
    justify-content:center;
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
}
.button{background-color:#21a0d2}
.button:hover{background-color:#7c7c7c;color:#fff}
.button:disabled{color:#999;background-color:#adadad}

@media(min-width:768px) and (max-width:991.9px),(min-width:992px) and (max-width:1199.9px),(min-width:1200px){.button{display:inline-flex;width:auto}}
@media(min-width:768px) and (max-width:991.9px){.button{font-size:16px;line-height:28px}}
@media(min-width:992px) and (max-width:1199.9px){.button{font-size:18px;line-height:32px}}
@media(min-width:1200px){.button{font-size:20px;line-height:34px}}
.button a{color:#fff}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.form-control[disabled], .form-control[readonly], .dropdown-wrapper.disabled {
    cursor: not-allowed;
    background-color: #eee;
}

.alert {
    border: 0px;
    border-radius: 0px;
}

.alert h1, .alert .h1, .alert h2, .alert .h2, .alert h3, .alert .h3, .alert h4, .alert .h4 {
    /*color: #fff;*/
    margin-top: 10px;
}

.alert-success {
    /*color: #fff;
    background-color: #21a0d2;*/
    background-color: #E0EED2;
}
.alert-danger {
    /*color: #fff;
    background-color: #C50022*/
    background-color: #F8E0E4;
}
.alert-info {
    /*color: #fff;
    background-color: #004A96*/
    background-color: #E0E9F2;
}
.alert-warning {
    /*color: #fff;
    background-color: #F39500*/
    background-color: #FEEFDA;
}

.close {
    filter: alpha(opacity=40);
    opacity: 0.4;
}

.basf-icon-mixin{font-family:BASFIcons;font-style:normal;-webkit-font-smoothing:antialiased}
.basf-download-icon{font-family:BASFIcons;font-style:normal;-webkit-font-smoothing:antialiased;content:'\e913'}
.basf-view-icon{font-family:BASFIcons;font-style:normal;-webkit-font-smoothing:antialiased;font-family:BASFIconFont;content:'\e003'}
.basf-icon{font-weight:400;position:relative;display:inline-block;font-family:BASFIcons;font-style:normal;-webkit-font-smoothing:antialiased}
.basf-icon-facebook:before{content:"\e916"}
.basf-icon-facebook_messenger:before{content:"\e916"}
.basf-icon-flickr:before{content:"\e918"}
.basf-icon-googleplus:before{content:"\e91b"}
.basf-icon-instagram:before{content:"\e91e"}
.basf-icon-linkedin::before{content:"\e922"}
.basf-icon-renren:before{content:"\e936"}
.basf-icon-slideshare:before{content:"\e93b"}
.basf-icon-twitter:before{content:"\e93d"}
.basf-icon-youtube:before{content:"\e93e"}
.basf-icon-weibo:before{content:"\e947"}
.basf-icon-whatsapp:before{content:"\e948"}
.basf-icon-blogagro:before{content:"\e94c"}
.basf-icon-arrow_backward:before{content:"\e902"}
.basf-icon-arrow_forward:before{content:"\e906"}
.basf-icon-arrow_down:before{content:"\e903"}
.basf-icon-arrow_up:before{content:"\e908"}
.basf-icon-arrow_forward_circle:before{content:"\e921"}
.basf-icon-close_circle:before{content:"\e910"}
.basf-icon-close:before{content:"\e911"}
.basf-icon-home:before{content:"\e91d"}
.basf-icon-search:before{content:"\e937"}
.basf-icon-share:before{content:"\e93a"}
.basf-icon-world:before{content:"\e949"}
.basf-icon-menue:before{content:"\e926"}
.basf-icon-phone:before{content:"\e94f"}
.basf-icon-fax:before{content:"\e94e"}
.basf-icon-mobile:before{content:"\e92a"}
.basf-icon-email:before{content:"\e920"}
.basf-icon-check:before{content:"\e90f"}
.basf-icon-location:before{content:"\e923"}
.basf-icon-chat:before{content:"\e912";font-size:22px}
.basf-icon-shop:before{content:"\e90d";font-size:22px}
.basf-icon-plus:before{content:"\e901"}
.basf-icon-plus_circle:before{content:"\e900"}
.basf-icon-minus:before{content:"\e929"}
.basf-icon-download:before{content:'\e913'}
.basf-icon-eye:before{content:'\e915'}
.basf-icon-user:before{content:'\e945'}
.basf-icon-exclamation:before{content:'\e90a'}
.basf-icon-backward:before{content:'\e907'}

.tooltip {
    font-family: "Helvetica Neue LT W05", "Helvetica Neue World", Helvetica, Arial, sans-serif;
    font-weight: normal;
}
.popover {
    font-family: "Helvetica Neue LT W05", "Helvetica Neue World", Helvetica, Arial, sans-serif;
    font-weight: normal;
}
.identifiers {
    display: flex;
    align-items: center;
}

.panel-group {
    margin-bottom: 0px;
}

.panel-collapse {
    padding-left: 15px;
}

.panel-collapse .row:first-child, .panel-collapse .fieldrow-element:first-child {
    margin-top: 0px !important;
}

.panel-heading a:before {
    content:'\e906';
    font-weight:400;
    position:relative;
    display:inline-block;
    font-family:BASFIcons;
    font-style:normal;
    -webkit-font-smoothing:antialiased;
    margin-right: 10px;
    transition: transform .35s ease-out,opacity .35s ease-out;
    
    transform: scale(0.8) rotate(90deg);
}
.panel-heading a.collapsed:before {
    transform: scale(1) rotate(0deg);
}

.button-brand {
    padding: 10px 20px;
    font-size: 15px;
    color: #fff;
    width: 100%;
    text-decoration: none;
    text-align: center;
    line-height: 26px;
    border-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    display: inline-flex;
    margin-top: 25px;
    color: #fff;
    background-color: #21a0d2;
}
@media (min-width: 768px){
    .button-brand {
        width: auto;
        margin-top: 5px;
    }
}
@media (max-width: 991.9px) and (min-width: 768px){
    .button-brand {
        font-size: 16px;
        line-height: 28px;
    }
}
@media (max-width: 1199.9px) and (min-width: 992px){
    .button-brand {
        font-size: 18px;
        line-height: 32px;
    }
}
@media (min-width: 1200px){
    .button-brand {
        font-size: 20px;
        line-height: 34px;
    }
}

.button-brand:not(:last-child) {
    margin-right: 20px;
}
.button-brand-theme-grey{
    background-color: #dcdcdc;
    color: #333;
}

.button-brand-theme-light{
    background-color: #9bd4eb;
    color: #333;
}

.button-brand-theme-light:hover{
    color:#666;
}

.button-brand i {
    margin-right: 10px;
}

.table-navigation .button-brand {
    width: auto;
    margin-top: 0px;
}

.table-navigation:not(.active) .button-brand {
    background-color: transparent;
    color: #333;
}

.table-navigation:not(.active) .button-brand:hover {
    outline: 1px solid #ADADAD;
    outline-offset: -1px;
}

.progress {
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #f0f0f0;
}

.progress-theme-white {
    background-color: #fff;
}

.progress-bar {
    background-color: #21a0d2;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-animation: slideInToRight .35s ease-out;
    animation: slideInToRight .35s ease-out;
}

.hidden-content-xs, .hidden-conten-sm, .hidden-conten-md, .hidden-conten-lg {
    display: contents!important;
}
@media(max-width:767.9px){.hidden-content-xs {display: none!important}}
@media(min-width:768px) and (max-width:991.9px){.hidden-conten-sm{display: none!important}}
@media(min-width:992px) and (max-width:1199.9px){.hidden-conten-md{display: none!important}}
@media(min-width:1200px){.hidden-conten-lg{display: none!important}}

.visible-content-xs, .visible-conten-sm, .visible-conten-md, .visible-conten-lg {
    display: none!important;
}
@media(max-width:767.9px){.visible-content-xs {display: contents!important;}}
@media(min-width:768px) and (max-width:991.9px){.visible-conten-sm{display: contents!important;}}
@media(min-width:992px) and (max-width:1199.9px){.visible-conten-md{display: contents!important;}}
@media(min-width:1200px){.visible-conten-lg{display: contents!important;}}

/******************************************************/
/* Custome Style Sheet ********************************/
/******************************************************/
.wrapper {
    min-height: 80%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -220px;
}
@media (max-width: 767px) {
    .wrapper {
        margin-bottom: -400px !important;
    }
}

.row-display-middle {
    display:flex;
    flex-wrap: wrap;
    align-items:center;
}

.flex-break {
    flex-basis: 100%;
    height: 20px;
}

.push {
    height: 220px;
}
@media (max-width: 767px) {
    .push {
        height: 400px !important;
    }
}

.div-footer {
    position: relative;
    background-color: #7c7c7c;
    color: #adadad;
    margin-top: 120px;
}

.row-footer-companysite {
    /*margin: 45px -15px 25px;*/
    margin: 0px -15px 25px;
}
.row-footer-companysite div {
    /*margin: 45px -15px 25px;*/
    margin-top: 45px;
}


.nav-footer-title {
    margin: 0;
    line-height: 30px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.nav-footer-companysite {
    list-style-type: none;
    padding-left: 0;
    padding-bottom: 25px;
    line-height: normal;
    margin: 0;
}

.nav-footer-companysite li {
    padding: 0px;
    margin-top: 15px;
}

.nav-footer-companysite a {
    font-size: 15px;
    line-height: 23px;
    color: #fff;
    text-decoration: none;
    padding: 1px 0px;
}

.nav-footer-companysite a:hover {
    color: #adadad;
    text-decoration: none;
}
.nav-footer-companysite a:focus {
    color: #adadad;
    text-decoration: none;
}

.row-footer-legalsite {
    font-size: 12px;
    margin-bottom: 20px;
}

.col-footer-legalsite {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

.nav-footer-legalsite {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.nav-footer-legalsite li {
    margin: 0;
    padding: .0625em;
}

.nav-footer-legalsite li:not(:last-child):after {
    margin-right: .35em;
    margin-left: .35em;
    content: '|';
    color: #adadad;
}

.nav-footer-legalsite a {
    font-size: 12px;
    line-height: 25px;
    color: #adadad;
    text-decoration: none;
}

.nav-footer-legalsite a:hover {
    color: #fff;
    text-decoration: none;
}
.nav-footer-legalsite a:focus {
    color: #fff;
    text-decoration: none;
}

.navbar-header-container {
    min-height: 104px;
    position: relative;
}
@media (min-width: 1200px){
    .navbar-header-container {
        min-height: 160px;
    }
}
@media (max-width: 1199.9px) and (min-width: 768px){
    .navbar-header-container {
        min-height: 158px;
    }
}

#topnavbar {
    margin: 0;
    border: 0px;
    color: #fff;
}

#topnavbar.affix-top {
    
}

#topnavbar.affix {
    
}

#topnavbar.position-top {
    position: absolute;
    width: 100%;
    background: transparent;
    display: inline-block;
}

#topnavbar.position-fixed {
    position: fixed;
    width: 100%;
    -webkit-animation: stickyHeaderIn .35s ease-out;
    animation: stickyHeaderIn .35s ease-out;
}
#topnavbar.position-fixed:not(.overlay-active) {
    top: 0;
    height: 60px;
}
#topnavbar.position-fixed-fadeout {
    -webkit-animation:stickyHeaderOut .35s ease-in;
    animation:stickyHeaderOut .35s ease-in;
}
#topnavbar.overlay-active {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.85);
    top: 0;
    left: 0;
    z-index: 901;
    position: fixed;
    display: flex;
    flex-direction: column;
}
#topnavbar.overlay-active:not(.overlay-fadeout) {
    -webkit-animation: overlaySlideDown .35s ease-out;
    animation: overlaySlideDown .35s ease-out;
}

#topnavbar.overlay-fadeout {
    -webkit-animation:overlaySlideUp .35s ease-out;
    animation:overlaySlideUp .35s ease-out
}

/******************************************************/
/* Navbar Container ***********************************/
/******************************************************/
.navbar-container {
    display: flex;
    margin-top: 25px;
    height: 64px;
    width: 100%;
    position: relative;
    z-index: 902;
    color: white;
    flex: 0 0 auto;
}
@media (max-width: 991.9px) and (min-width: 768px), (max-width: 1199.9px) and (min-width: 992px), (min-width: 1200px){
    .navbar-container {
        margin-top: 40px;
        height: 80px;
    }
}

.navbar-content {
    margin-left: auto;
    margin-right: auto;
    width: 90.6%;
    max-width: 1246px;
    height: 100%;
    display: flex;
}
@media (min-width: 1200px) {
    .navbar-content {
        width: 78.48%;
    }
}

#topnavbar.position-fixed:not(.overlay-active) .navbar-container {
    margin-top: 0;
    height: 100%;
}

.navbar-container:before {
    content: '';
    display: block;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    background-color: rgba(0,0,0,0.3);
}
.page-mainhomepage .navbar-container:before {
    background-color: rgba(0,0,0,0.2);
}
.overlay-active .navbar-container:before {
    background: 0;
}

.navbar-container:after {
    background-color: #21a0d2;
    content: '';
    display: block;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}

#topnavbar.position-fixed:not(.overlay-active) .navbar-container:before {
    background-color: rgba(0,0,0,0.7);
}

#topnavbar.position-fixed:not(.overlay-active) .navbar-container:after {
    background-color: rgba(0,0,0,0.7);
}

.navbar-content-menu {
    display: flex;
    align-items: center;
    width: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    background-color: rgba(0,0,0,0.3);
}
.page-mainhomepage .navbar-content-menu {
    background-color: rgba(0,0,0,0.2);
}
.overlay-active .navbar-content-menu {
    background: 0;
}

#topnavbar.position-fixed:not(.overlay-active) .navbar-content-menu {
    background-color: rgba(0,0,0,0.7);
}

.navbar-content-menu-controls {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}
@media (min-width: 1200px){
    .page-mainhomepage .navbar-content-menu-controls {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;
        min-width: auto;
    }
}
@media (min-width: 992px){
    .overlay-active .navbar-content-menu-controls {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;
        min-width: auto;
    }
}

.menu-controls-wrapper {
    display: flex;
    align-items: center;
    color: #fff;
    height: fit-content;
}
.menu-controls-hamburger-icons {
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
}
.header-button {
    font-weight: 400;
    position: relative;
    display: inline-block;
    font-family: BASFIcons;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    line-height: normal;
    font-size: 22px;
    background: transparent;
    outline: 0;
    border: 0;
    padding: 0;
    margin-right: 10px;
}
.header-button-fa {
    position: relative;
    display: inline-block;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: normal;
    font-size: 22px;
    background: transparent;
    outline: 0;
    border: 0;
    padding: 0;
    margin-right: 30px;
    font-variant: normal;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.overlay-active .header-button-hamburger {
    display: none;
}
@media (min-width: 1200px){
    .page-mainhomepage .header-button-hamburger {
        display: none;
    }
}

.header-button-close {
    display: none;
}
.overlay-active .header-button-close {
    display: block;
}


.menu-controls-identifiers {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
}

.identifier-title {
    display: block;
    margin-right: 12px;
    overflow: hidden;
}
@media (max-width: 360px) {
    .identifier-title {
        display: none;
    }
}
@media (min-width: 768px){
    .identifier-title {
        white-space: nowrap;
    }
}

.identifier-title-label {
    display: block;
    float: none;
    position: static;
}

.identifier-site {
    display: none;
    position: relative;
}
@media (min-width: 768px) {
    .identifier-site {
        display: block;
    }
}
@media (min-width: 768px){
    .overlay-active .identifier-site {
        display: none;
    }
}
.identifier-site-separator {
    background-color: #fff;
    width: 2px;
    position: absolute;
    height: 100%;
}
.identifier-site-label {
    display: block;
    margin-left: 12px;
}

.header-container {
    height: 64px;
    width: 100%;
    position: relative;
    z-index: 902;
    color: white;
    margin: 0px;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: auto;
    width: 90.6%;
    max-width: 1246px;
    display: flex;
}
@media (min-width: 768px) and (max-width: 991.9px){
    .header-container {
        height: 80px;
    }
}
@media (min-width: 992px){
    .header-container {
        height: 0px;
    }
}
@media (min-width: 1200px){
    .header-container {
        width: 78.48%;
    }
}
#topnavbar:not(.overlay-active) .header-container {
    height: 0px;
}

.header-menu {
    display: flex;
    align-items: center;
    width: 100%;
}

.navbar-content-menu-top-navigation, .header-menu-top-navigation {
    display: none;
    align-items: center;
    height: 100%;
    margin-left: 25px;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    min-width: auto;
}
@media (min-width: 1200px){
    .page-mainhomepage .navbar-content-menu-top-navigation {
        display: flex;
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
        min-width: 0;
    }
}
@media (min-width: 992px){
    .overlay-active .navbar-content-menu-top-navigation {
        display: flex;
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
        min-width: 0;
    }
}
@media (max-width: 991.9px) and (min-width: 768px){
    .overlay-active .header-menu-top-navigation {
        display: flex;
        margin-left: 0;
    }
}
.overlay-active .top-navigation {
    margin-left: 0;
}

.header-menu-icons {
    display: none;
    background-color: transparent;
    height: 100%;
    visibility: hidden;
    width: 0;
}
.overlay-active .header-menu-icons {
    display: flex;
    margin-left: auto;
    visibility: visible;
    height: auto;
    width: auto;
}
@media (min-width: 768px){
    .overlay-active .header-menu-icons {
        display: none;
    }
}


.topnav {
    max-height: 80px;
    overflow: hidden;
}
.topnav .basf-menu {
    margin: 0;
    padding: 0;
}
.topnav .basf-menu li {
    margin-right: 15px;
    display: inline-block;
}
.topnav .basf-menu-home {
    display: none !important;
}
.overlay-content-active {
    display: block;
}

.topnav .basf-menu li a {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    color: #fff;
    cursor: pointer;
}
.topnav .basf-menu li a:hover {
    color: #dcdcdc;
}
.topnav .basf-menu li a[data-preselected] {
    color: #21a0d2;
}

.navbar-content-menu-icons {
    display: none;
    align-items: center;
    background-color: transparent;
    height: 100%;
}
@media (min-width: 768px){
    .navbar-content-menu-icons {
        display: flex;
    }
}

.navbar-content-menu-icons a, .header-menu-icons a {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #fff;
    cursor: pointer;
    padding-right: 10px;
}

#topnavbar.position-fixed:not(.overlay-active) .navbar-content-logo {
    display: none;
}

.navbar-content-logo {
    background-color: #21a0d2;
    height: 100%;
    margin-left: 20px;
}

.navbar-content-logo .logo {
    margin: 0;
    display: flex;
    height: 100%;
}

.logo .logo__image {
    height: 32px;
    width: 95px;
    margin: 16px;
    background-image: url(../img/logo.svg);
    background-position: left top;
    background-repeat: no-repeat;
    background-origin: content-box;
}
@media (min-width: 768px) {
    .logo .logo__image {
        height: 44px;
        width: 120px;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
    }
}

/******************************************************/
/* Navbar Container Overlay ***************************/
/******************************************************/
.overlay-active .navbar-container-overlay {
    height: 100%;
    position: relative;
    flex: 1 1 auto;
}

@media (max-width: 767px) {
    .display-hidden-xs {
        display: none;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .display-hidden-sm {
        display: none;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .display-hidden-md {
        display: none;
    }
}
@media (min-width: 1200px) {
    .display-hidden-lg {
        display: none;
    }
}

.overlay-active .menu {
    position: absolute;
    height: 100%;
    width: 100%;
}

.menu-container {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 90.6%;
    max-width: 1246px;
    display: none;
}
@media (min-width: 1200px){
    .menu-container {
        width: 78.48%;
    }
}
.menu-container.overlay-content-active {
    display: flex;
}

.menu-panels {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-basis: 0;
    flex-grow: 1;
    transform: translateZ(0);
    overflow: hidden;
}
@media (min-width: 768px){
    .menu-panels {
        width: auto;
        max-width: 50%;
        min-width: 25%;
    }
}
@media (min-width: 992px){
    .menu-panels {
        flex-grow: 0;
    }
}

.menu-panel {
    width: 100%;
    padding-right: 15px;
    height: 100%;
}
@media (min-width: 992px){
    .menu-panel {
        width: auto;
        flex-grow: 1;
        flex-basis: 0;
    }
}
.menu-panel-level-1 {
    display: none;
}
.menu-panel-force-toplevel .menu-panel-level-1 {
    display: block;
}
.menu-panel-force-toplevel .menu-panel-level-2 {
    margin-right: -100%;
}
@media (min-width: 768px){
    .menu-panel-force-toplevel .menu-panel-level-1 {
        display: none;
    }
    .menu-panel-force-toplevel .menu__panel--level2 {
        margin-right: 0;
    }
}

.menu-nobacklink {
    margin: 16px 25px 16px 0;
    min-height: 28px;
}
.menu-panel ul {
    height: calc(100% - 60px);
    list-style: none;
    padding: 0 20px 0 0;
    overflow: hidden;
    position: relative;
}
.menu-panel li {
    border-top: 1px solid #3f3f3f;
}
.menu-panel li.sp-hidden {
    display: none;
}
.menu-panel a {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    text-overflow: clip;
    white-space: normal;
    padding: 16px 25px 16px 0;
    text-decoration: none;
    margin: 0;
    overflow: hidden;
    display: block;
    position: relative;
    cursor: pointer;
    color: #fff;
}
.menu-panel a[data-url-nav]::after {
    content: "\e002";
    font-family: BASFIconFont;
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 16px;
    border: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    width: auto;
    height: auto;
}
.menu-panel a:hover {
    color: #dcdcdc;
}

.menu-selflink a {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
}
.menu-selflink a:hover {
    color: #adadad;
}

.menu-panel a[data-preselected] {
    color: #21a0d2;
}

@media (min-width: 992px){
    .menu-panel-level-2 .menu-backlink {
        visibility: hidden;
        pointer-events: none;
    }
}
.menu-backlink a {
    -ms-display: flex;
    display: flex;
}
.menu-backlink a::before {
    -ms-display: flex;
    display: flex;
    align-items: center;
    content: "\e002";
    font-family: BASFIconFont;
    font-size: 18px;
    line-height: 20px;
    margin-right: 15px;
    border: 0;
    width: auto;
    height: auto;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.menu-backlink a::after{
    display:none
}
@media (min-width: 768px){
    .menu-backlink a[data-toplevel] {
        visibility: hidden;
    }
}

.menu-panels-animate-left .menu-panel {
    -webkit-animation: slideInToLeft .35s ease-out;
    animation: slideInToLeft .35s ease-out;
}
.menu-panels-animate-right .menu-panel {
    -webkit-animation: slideInToRight .35s ease-out;
    animation: slideInToRight .35s ease-out;
}

.menu-teaser {
    display: none;
}
@media (min-width: 768px){
    .menu-teaser {
        width: 50%;
        display: flex;
        padding-left: 16px;
        padding-right: 16px;
        overflow: hidden;
    }
}
.menu-teaser-text, .menu-teaser-image {
    color: #333;
    padding-top: 40px;
    padding-bottom: 40px;
    flex-basis: 50%;
    flex-shrink: 0;
}
.menu-teaser-text {
    line-height: 28px;
}
.menu-teaser-text div, .menu-teaser-text div p {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: 300;
    color: #adadad;
}
.menu-teaser-image {
    padding-left: 40px;
}
.menu-teaser-image img{
    width: 100%;
}

.cookiepolicy {
    background-color: rgba(0,0,0,0.8);
}
.cookiepolicy-content {
    margin-left: auto;
    margin-right: auto;
    width: 90.6%;
    max-width: 1246px;
    padding: 15px 0;
    align-items: center;
    color: #fff;
}
@media (min-width: 768px){
    .cookiepolicy-content {
        display: flex;
    }
}
@media (min-width: 1200px){
    .cookiepolicy-content {
        width: 78.48%;
    }
}

.cookiepolicy-content>div {
    width: 100%;
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
}
@media (min-width: 768px){
    .cookiepolicy-content>div {
        flex: 0 0 auto;
        width: 83.3333%;
    }
}
@media (min-width: 992px){
    .cookiepolicy-content>div {
        line-height: 22px;
        font-size: 15px;
    }
}
.cookiepolicy-content>div a {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    color: #21a0d2;
}
.cookiepolicy-content button {
    padding: 10px 20px;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 26px;
    border-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    line-height: initial;
    border: 0;
    width: 100%;
    margin: 12px 10px 5px 10px;
    background-color: #21a0d2;
    color: #fff;
}

.jump-to-top {
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
    transition: visibility 0,opacity .25s ease-in-out;
    -moz-transition: visibility 0,opacity .25s ease-in-out;
    -webkit-transition: visibility 0,opacity .25s ease-in-out;
    position: fixed;
    bottom: 10vh;
    right: 0;
    width: 45px;
    height: 55px;
    background-color: rgba(85,85,85,0.5);
    color: white;
    z-index: 999;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    font-size: 13px;
}
.jump-to-top:before {
    padding-top: 10px;
    padding-bottom: 5px;
    display: block;
    font-family: BASFIconFont;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    content: "\e006";
}
.jump-to-top-active {
    opacity: 1;
    visibility: visible;
}
.overlay-active .jump-to-top-active {
    display: none;
}

/******************************************************/
/* Header Stage and Breadcrumb ************************/
/******************************************************/
.cmp-stage {
    margin-top: -105px;
}
@media (min-width: 1200px){
    .cmp-stage {
        margin-top: -160px;
    }
}
@media (max-width: 1199.9px) and (min-width: 768px){
    .cmp-stage {
        margin-top: -158px;
    }
}

.stage {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.stage-image {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    object-position: 68%;
}
@media (max-width: 991.9px) and (min-width: 768px), (max-width: 1199.9px) and (min-width: 992px), (min-width: 1200px){
    .stage-page .stage-image {
        height: auto;
        object-fit: unset;
        font-family: 'object-fit: unset;';
    }
}
.stage-content {
    margin-left: auto;
    margin-right: auto;
    width: 90.6%;
    max-width: 1246px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 189px;
    display: flex;
    padding-bottom: 100px;
    color: #fff;
}
@media (max-width: 767.9px){
    .stage-content {
        align-items: flex-end;
    }
}
@media (max-width: 991.9px) and (min-width: 768px){
    .stage-content {
        padding-bottom: 60px;
        padding-top: 110px;
    }
}
@media (max-width: 1199.9px) and (min-width: 992px){
    .stage-content {
        padding-bottom: 40px;
        padding-top: 120px;
    }
}
@media (min-width: 1200px){
    .stage-content {
        padding-bottom: 100px;
        padding-top: 160px;
        width: 78.48%;
    }
}

@media (max-width: 991.9px) and (min-width: 768px){
    .stage-homepage .stage-content {
        padding-bottom: 70px;
        padding-top: 190px;
    }
}
@media (max-width: 1199.9px) and (min-width: 992px){
    .stage-homepage .stage-content {
        padding-bottom: 100px;
        padding-top: 220px;
    }
}
@media (min-width: 1200px){
    .stage-homepage .stage-content {
        padding-bottom: 200px;
        padding-top: 320px;
        width: 78.48%;
    }
}

.stage-content a, .stage-content p {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 30px;
}
@media (max-width: 991.9px) and (min-width: 768px){
    .stage-content a, .stage-content p {
        font-size: 24px;
        line-height: 32px;
    }
}
@media (max-width: 1199.9px) and (min-width: 992px){
    .stage-content a, .stage-content p {
        font-size: 28px;
        line-height: 38px;
    }
}
@media (min-width: 1200px){
    .stage-content a, .stage-content p {
        font-size: 30px;
        line-height: 40px;
    }
}

@media (min-width: 768px){
    .stage-content-text {
        height: 100%;
        width: 100%;
    }
}
@media (min-width: 768px){
    .stage-content-text .text {
        display: flex;
        height: 100%;
        width: 100%;
        flex-direction: row;
        align-items: flex-end;
    }
}

.stage-header-identifiers {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    box-sizing: border-box;
    clear: both;
    display: flex;
    align-items: center;
    margin-bottom: -10px;
    padding-bottom: 20px;
}
@media (min-width: 768px){
    .stage-header-identifiers {
        display: none;
    }
}

.site-identifier {
    position: relative;
    display: block;
    margin-left: 0;
}

.stage-content h2, .stage-content h3 {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: bold;
    color: #fff;
    font-size: 35px;
    line-height: 45px;
    margin-bottom: 0;
}
@media (max-width: 991.9px) and (min-width: 768px){
    .stage-content h2 {
        font-size: 55px;
        line-height: 65px;
    }
}
@media (max-width: 1199.9px) and (min-width: 992px){
    .stage-content h2 {
        font-size: 65px;
        line-height: 75px;
    }
}
@media (min-width: 1200px){
    .stage-content h2 {
        font-size: 80px;
        line-height: 94px;
    }
}

@media (max-width: 991.9px) and (min-width: 768px){
    .stage-content h3 {
        font-size: 40px;
        line-height: 50px;
    }
}
@media (max-width: 1199.9px) and (min-width: 992px){
    .stage-content h3 {
        font-size: 45px;
        line-height: 55px;
    }
}
@media (min-width: 1200px){
    .stage-content h3 {
        font-size: 50px;
        line-height: 60px;
    }
}

.stage-content .cmp-text h2 {
    margin: 0;
    margin-left: -1px;
    padding-bottom: 10px;
}
@media (max-width: 1199.9px) and (min-width: 768px){
    .stage-content .cmp-text h2 {
        padding-bottom: 5px;
    }
}
@media (min-width: 1200px){
    .stage-content .cmp-text h2 {
        padding-bottom: 10px;
    }
}

@media (min-width: 992px){
    .stage-page .cmp-text {
        align-self: center;
    }
}

.cmp-breadcrumb {
    position: relative;
}

.breadcrumb-bar {
    width: 100%;
    margin: 0;
    position: absolute;
    bottom: 0;
    z-index: 601;
}
@media (min-width: 1200px){
    .breadcrumb-bar {
        z-index: 603;
    }
}

.breadcrumb-wrapper {
    display: none;
    background-color: #fff;
    margin: 0 auto;
    width: calc(90.6% + 4 * 5px);
    max-width: 1266px;
}
@media (min-width: 768px){
    .breadcrumb-wrapper {
        display: block;
    }
}
@media (max-width: 991.9px) and (min-width: 768px){
    .breadcrumb-wrapper {
        width: calc(90.6% + 4 * 11px);
        max-width: 1290px;
    }
}
@media (max-width: 1199.9px) and (min-width: 992px){
    .breadcrumb-wrapper {
        width: calc(90.6% + 4 * 15px);
        max-width: 1306px;
    }
}
@media (min-width: 1200px){
    .breadcrumb-wrapper {
        width: calc(78.48% + 4 * 17px);
        max-width: 1314px;
    }
}
.breadcrumb-bar-stage .breadcrumb-wrapper {
    padding-top: 15px;
    padding-bottom: 10px;
}

.breadcrumb-wrapper .breadcrumb {
    width: 100%;
    padding: 0 50px 0 5px;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border-radius: 0;
}
@media (max-width: 991.9px) and (min-width: 768px){
    .breadcrumb-wrapper .breadcrumb {
        padding-left: 17px;
    }
}
@media (max-width: 1199.9px) and (min-width: 992px){
    .breadcrumb-wrapper .breadcrumb {
        padding-left: 25px;
    }
}
@media (min-width: 1200px){
    .breadcrumb-wrapper .breadcrumb {
        padding-left: 29px;
    }
}
@media (min-width: 992px){
    .breadcrumb-wrapper .breadcrumb {
        font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
        font-weight: normal;
        line-height: 22px;
        font-size: 15px;
    }
}

.breadcrumb-wrapper .breadcrumb-list-wrapper {
    position: relative;
    overflow: hidden;
}

.breadcrumb-wrapper .breadcrumb ul {
    list-style: none;
    display: flex;
    position: relative;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

.breadcrumb-wrapper .breadcrumb-item * {
    display: inline;
}

.breadcrumb-wrapper .breadcrumb-item {
    text-decoration: none;
    z-index: 1;
    width: auto;
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    color: #21a0d2;
}
.breadcrumb-wrapper .breadcrumb-item:not(:first-child):before {
    font-family: BASFIcons;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle !important;
    content: "\e906";
    padding: 0 10px;
}
.breadcrumb-wrapper .breadcrumb-item:last-child {
    color: #cdcdcd;
}
@media (min-width: 992px){
    .breadcrumb-wrapper .breadcrumb-item {
        font-size: 15px;
    }
}

.breadcrumb-wrapper .breadcrumb-item a {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    color: #21a0d2;
}

/******************************************************/
/* Form Styles ****************************************/
/******************************************************/
.fieldrow {
    /*margin-top: 40px;*/
    margin-top: 0px;
}

.formlabel {
    padding-bottom: 4px;
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 5px;
    padding-left: 0;
}
@media (max-width: 991.9px) and (min-width: 768px){.formlabel {font-size: 16px;}}
@media (max-width: 1199.9px) and (min-width: 992px){.formlabel {font-size: 18px;}}
@media (min-width: 1200px){.formlabel {font-size: 20px;}}

.fieldrow input {
    width: 100%;
    color: #333;
    background-color: #f0f0f0;
    padding: 8px 20px;
    height: 52px;
    box-sizing: border-box;
    font-size: 15px;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

@media (max-width: 991.9px) and (min-width: 768px){.fieldrow input {font-size: 16px; height: 54px;}}
@media (max-width: 1199.9px) and (min-width: 992px){.fieldrow input {font-size: 18px; height: 58px;}}
@media (min-width: 1200px){.fieldrow input {font-size: 20px; height: 60px;}}

.field-input-endlabel {
    position: absolute;
    top: 13px;
    right: 20px;
    font-size: 15px;
    color: #4B4B4B;
}

.fieldrow-element {
    /*CHANGELOG::20200605::zmena okraju zo 40*/
    margin-top: 10px !important;
}

.fieldrow-element-wrapper {
    position: relative;
}

.fieldrow-element-white div input{
    background-color: white;
    border: 1px solid #adadad;
}

.field-error-description {
    display: none;
    color: #C50022;
    margin-top: 10px;
}
.field-error-description:before {
    content:'\e90a';
    font-weight:400;
    position:relative;
    display:inline-block;
    font-family:BASFIcons;
    font-style:normal;
    -webkit-font-smoothing:antialiased;
    margin-right: 5px;
}

.selected {
    color: orange;
}

.ui-checkbox {
    margin: 4px 0;
}

.ui-checkbox input {
    position: absolute;
    visibility: hidden;
}

.ui-checkbox .field-error-description {
    margin-left: 30px;
}
.ui-checkbox label {
    display: block;
    height: 31px;
    font-size: 15px;
    font-weight: 400;
    position: relative;
    top: 2px;
}
.ui-checkbox label:hover {
    cursor: pointer;
}
.ui-checkbox label::before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: #efefef;
    border-radius: 3px;
}
.ui-checkbox.checked label:before {
    background-color: #21a0d2;
}
.ui-checkbox label:after {
    transform: scale(1.4) rotate(45deg) translate(15px,15px);
    background: white;
    width: 2px;
    height: 2px;
    content: '';
    position: absolute;
    left: 5px;
    top: 12px;
    opacity: 0;
    transition: transform .35s ease-out,opacity .35s ease-out;
    box-shadow: 2px 0 0 #fff, 4px 0 0 #fff, 4px -2px 0 #fff, 4px -4px 0 #fff, 4px -6px 0 #fff, 4px -8px 0 #fff;
}
.ui-checkbox.checked label:after {
    transform: scale(1) rotate(45deg) translateY(0);
    opacity: 1;
    animation: .35s ease-out 0 1 popupCheckmark;
}

@media (max-width: 991.9px) and (min-width: 768px){.ui-checkbox label {font-size: 16px;}}
@media (max-width: 1199.9px) and (min-width: 992px){.ui-checkbox label {font-size: 18px;}}
@media (min-width: 1200px){.ui-checkbox label {font-size: 20px;}}

.ui-checkbox label.terms {
    height: auto;
    line-height: 26px;
    padding-bottom: 10px;
}
.ui-checkbox.checked label.terms {
    color: #21a0d2!important;
}
.ui-checkbox.disabled label.terms {
    cursor: not-allowed;
    color: #888;
}

.field-error .field-error-description {
    display: block;
}

.field-error .ui-checkbox, .field-error input, .field-error .ui-selectbox {
    border: 1px solid #C50022 !important;
    margin-left: 0;
    margin-right: 0;
    /*background-color: #eab2bb !important;*/
}

.dropdown-wrapper {
    background-color: #fff;
    border: 1px solid #adadad;
    padding: 12px 20px;
    cursor: pointer;
    min-height: 45px;
    box-sizing: border-box;
    position: relative;
    font-size: 15px;
}
@media (max-width: 991.9px) and (min-width: 768px){.dropdown-wrapper {font-size: 16px;}}
@media (max-width: 1199.9px) and (min-width: 992px){.dropdown-wrapper {font-size: 18px;}}
@media (min-width: 1200px){.dropdown-wrapper {font-size: 20px;}}

div.dropdown-wrapper select {
    display: none;
}

span.dropdown-label {
    word-break: break-word;
}
span.dropdown-label:after {
    content: "";
    float: right;
    transition: transform .5s ease;
    width: 25px;
    height: 25px;
    background: url(/img/icon_dropdown.svg) no-repeat;
    background-size: cover;
    background-position-y: 5px;
}

div.dropdown-list {
    display: none;
    transform-origin: 0 0;
    transition: transform .3s ease;
    overflow-y: scroll;
    max-height: 350px;
    position: absolute;
    top: 42px;
    left: -1px;
    right: -1px;
    z-index: 10;
    background-color: #ffffff;
    border-left: 1px solid #adadad;
    border-right: 1px solid #adadad;
    border-bottom: 1px solid #adadad;
}

div.dropdown-list span {
    display: block;
    padding: 12px 20px;
    min-height: 45px;
    box-sizing: border-box;
}
div.dropdown-list span:hover {
    color: #adadad;
}
div.dropdown-list span.selected {
    color: #21a0d2;
}

div.dropdown-list input {
    margin: 5px;
    border: none;
}

div.dropdown-wrapper.active span.dropdown-label {
    color: #adadad;
}
div.dropdown-wrapper.active span.dropdown-label:after {
    transform: rotate(-180deg);
}
div.dropdown-wrapper.active div.dropdown-list {
    display: block;
    min-height: 80px;
}

p.formInfo {
    margin: 0 0 20px 0;
    font-size: 15px;
    line-height: 26px;
}
@media (max-width: 1199.9px) and (min-width: 992px){p.formInfo {font-size: 16px;line-height: 28px;}}
@media (min-width: 1200px){p.formInfo {font-size: 18px;line-height: 32px;}}

label p.formInfo {
    margin-top: 14px;
    margin-left: 30px;
}
@media (min-width: 768px){
    label p.formInfo {
        font-size: 15px !important;
        line-height: 26px !important;
        margin-top: 8px;
    }
}

/******************************************************/
/* Log-In Modal Window ********************************/
/******************************************************/
.modal-backdrop.in {
    opacity: 0.85;
}

.modal-content {
    box-shadow: none;
    -webkit-box-shadow: none;
    border: none;
    border-radius: 0px;
}

.modal-body .fieldrow {
    margin-top: 20px;
}
.modal-body .fieldrow:last-child {
    margin-bottom: 20px;
}

.modal-footer a:not(:last-child), .modal-footer button:not(:last-child) {
    margin-right: 30px;
}

#loginSubmit span {
    -webkit-animation:opacity 1s infinite;
    animation:opacity 1s infinite;
}
#loginSubmit span:nth-child(1) {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
}
#loginSubmit span:nth-child(2) {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}
#loginSubmit span:nth-child(3) {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
}

/******************************************************/
/* Accordion ******************************************/
/******************************************************/
.accordion-title {
    cursor: pointer;
    display: block;
    border-top: solid 1px #bdbdbd;
    /*border-bottom: solid 1px #bdbdbd;*/
    padding-right: 20px;
    position: relative;
}

.accordion-headline {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    color: #21a0d2;
    padding: 20px 0;
}
@media(min-width:768px) and (max-width:991.9px){.accordion-headline{font-size:22px;line-height:30px;padding: 24px 0;}}
@media(min-width:992px) and (max-width:1199.9px){.accordion-headline{font-size:26px;line-height:36px;padding: 32px 0;}}
@media(min-width:1200px){.accordion-headline{font-size:28px;line-height:38px;padding: 32px 0;}}

.accordion-icon {
    cursor: pointer;
    position: absolute;
    transform: translateY(50%);
    right: 0;
    bottom: 50%;
    
    font-family: BASFIconFont;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    color: #21a0d2;
}
@media(min-width:768px) and (max-width:991.9px){.accordion-icon{font-size:22px;}}
@media(min-width:992px) and (max-width:1199.9px){.accordion-icon{font-size:26px;}}
@media(min-width:1200px){.accordion-icon{font-size:28px;}}

.accordion-title:not(.collapsed) .accordion-icon:before {
    display: inline-block;
    content: "\e006";
}

.accordion-title.collapsed .accordion-icon:before {
    display: inline-block;
    content: "\e004";
}

.accordion-content {
    
}

/******************************************************/
/* Default Page View **********************************/
/******************************************************/
.cmp-site-identifier {
    display: flex;
    align-items: center;
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    margin-left: -5px;
    margin-bottom: -10px;
}
@media (min-width: 768px){
    .cmp-site-identifier {
        display: none;
    }
}

.cmp-title-text {
    margin-left: -5px;
}

.cmp-text-intro {
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 30px;
    color: #21a0d2;
}
@media (max-width: 991.9px) and (min-width: 768px){.cmp-text-intro { font-size: 24px; line-height: 32px; }}
@media (max-width: 1199.9px) and (min-width: 992px){.cmp-text-intro { font-size: 28px; line-height: 38px; }}
@media (min-width: 1200px){ .cmp-text-intro { font-size: 30px; line-height: 40px; }}

/* Contact */
.contact-wrapper {
    padding-left: 17px;
    padding-right: 17px;
}
.contact-wrapper.contact-theme-dark {background-color: #21a0d2;}
.contact-wrapper.contact-theme-light {background-color: #9bd4eb;}
.contact-wrapper.contact-theme-grey {background-color: #f0f0f0;}

.contact-image {
    margin-bottom: 20px;
}
.contact-image img {
    border: 0;
    vertical-align: middle;
    width: 50%;
}
.contact-text {
    color: #7c7c7c;
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: 300;
}
.contact-theme-dark .contact-text, .contact-theme-dark .contact-text-wrapper a{color: #fff;}


.contact-text-title, .contact-text-description {
    margin-bottom: 5px;
}

.column-list {
    margin-top: 0px;
}

.column-list .contact-wrapper {
    margin-top: 50px;
}

/* Teaser */
.teaser-wrapper {
    /*padding-left: 17px;*/
    /*padding-right: 17px;*/
}
.teaser-wrapper.teaser-theme-dark {background-color: #21a0d2;}
.teaser-wrapper.teaser-theme-light {background-color: #9bd4eb;}
.teaser-wrapper.teaser-theme-grey {background-color: #f0f0f0;}

.teaser-image {
    margin-bottom: 20px;
}
.teaser-image img {
    border: 0;
    vertical-align: middle;
    width: 100%
}
.teaser-text {
    color: #7c7c7c;
    font-family: 'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: 300;
    margin-left: 17px;
    margin-right: 17px;
    margin-bottom: 20px;
}
.teaser-theme-dark .teaser-text, .teaser-theme-dark .teaser-text-wrapper a{color: #fff;}


.teaser-text-title, .teaser-text-description {
    margin-bottom: 5px;
}

/* Column List */
.column-list {
    margin-top: 0px;
}

.column-list .contact-wrapper, .column-list .teaser-wrapper {
    margin-top: 50px;
}

.column-counter-step {
    background-color: #21a0d2;
    color: #fff;
    padding: 20px 20px 50px 20px;
}
.column-counter-step h1, .column-counter-step h2, .column-counter-step h3, .column-counter-step h4 {
    color: #fff;
}

.column-counter-step ol {
    list-style: none;
    counter-reset: my-awesome-counter;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.column-counter-step li {
    counter-increment: my-awesome-counter;
    display: flex;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 0px;
    padding-right: 0px;
}
.column-counter-step li:not(:last-child) {
    border-bottom: 1px solid #9bd4eb;
}

.column-counter-step li::before {
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: bold;
    color: #9bd4eb;
    content: counter(my-awesome-counter);
    font-size: 80px;
    line-height: 50px;
    padding-right: 20px;
    padding-top: 10px;
}

@media (max-width: 991.9px) and (min-width: 768px){
    .column-counter-step li {padding-left: 5px; padding-right: 10px;}
    .column-counter-step li::before {padding-right: 30px;}
}
@media (max-width: 1199.9px) and (min-width: 992px){
    .column-counter-step li {padding-left: 10px; padding-right: 20px;}
    .column-counter-step li::before {padding-right: 40px;}
}
@media (min-width: 1200px){
    .column-counter-step li {padding-left: 15px; padding-right: 40px;}
    .column-counter-step li::before {padding-right: 40px;}
}

.column-counter-step li h2 {
    margin-top: 0px;
}

/******************************************************/
/* Table **********************************************/
/******************************************************/
.tablerow-wrapper {
    margin-top: 0px;
    margin-bottom: 0px;
}

.tablerow-wrapper[data-url-nav] {
    cursor: pointer;
    transition: background 0.1s;
    -webkit-transition: background 0.1s;
}
.tablerow-wrapper[data-url-nav]:hover {
    background-color: #F5F5F5;
}

.tablerow-container {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: #DCDCDC 1px solid;
}
.tablerow-header {
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: bold;
    background-color: #7c7c7c;
    color: white;
    margin-top: 50px;
    /*CHANGELOG::20200605::pridanie padding top a bot*/
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: 2;
    position: sticky;
    top: 60px;
}

/*CHANGELOG::20200605::zmena okrajov pre odsek v tabulke*/
.tablerow-container p{
    margin: 0 0 2px;
}

.tablerow-container.mark-green{
    border-left: #A4CD79 solid 10px;
}

.tablerow-container.mark-yellow{
    border-left: #F9D599 solid 10px;
}

.tablerow-container.mark-red{
    border-left: #DC677A solid 10px;
}

.tablerow-header-scrollable, .tablerow-container-scrollable{
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    border-left: transparent solid 10px;
}

.tablerow-container-scrollable{
    align-items: center;
    scrollbar-width: none;
}

.tablerow-header-scrollable .col-sm-1, .tablerow-container-scrollable .col-sm-1{
    width: 200px !important;
    min-width: 200px;
    float: left;
}

.tablerow-header-scrollable .col-sm-2, .tablerow-container-scrollable .col-sm-2{
    width: 400px !important;
    min-width: 400px;
    float: left;
}

.tablerow-header-scrollable .col-sm-2:first-child, .tablerow-container-scrollable .col-sm-2:first-child{
    position: sticky;
    left: 0;
    z-index: 1;
}

.tablerow-header-scrollable .col-sm-2:first-child{
    background-color: #7c7c7c;
}

.tablerow-container-scrollable .col-sm-2:first-child{
    background-color: white;
}

.tablerow-body-scrollable{
    overflow-x: auto;
    white-space: nowrap;
}

.tablerow-body-scrollable .tablerow-container div{
    display: inline-block;
    float: none;
}

.tablerow-header .sorting, .tablerow-header .sorting-asc, .tablerow-header .sorting-desc {
    cursor: pointer;
}

.tablerow-header .sorting:before, .tablerow-header .sorting:after, 
.tablerow-header .sorting-asc:before, .tablerow-header .sorting-asc:after ,
.tablerow-header .sorting-desc:before, .tablerow-header .sorting-desc:after {
    position: absolute;
    bottom: 0px;
    display: block;
    opacity: .3;
}

.tablerow-header .sorting:before,
.tablerow-header .sorting-asc:before, 
.tablerow-header .sorting-desc:before {
    right: 16px;
    content: "\f0de";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 3rem;
}

.tablerow-header .sorting:after, 
.tablerow-header .sorting-asc:after ,
.tablerow-header .sorting-desc:after {
    right: 16px;
    content: "\f0dd";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 3rem;
}

.tablerow-header .sorting-asc:before, .tablerow-header .sorting-desc:after {
    opacity: 1;
}

.tablerow {
    min-height: 50px;
}

.tablerow input, .tablerow-container input {
    width: 100%;
    color: #333;
    background-color: #F0F0F0;
    padding: 8px 20px;
    height: 50px;
    
    box-sizing: border-box;
    font-size: 15px;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    -webkit-box-shadow: none;
}
@media (max-width: 991.9px) and (min-width: 768px){.tablerow input, .tablerow-container input {font-size: 16px;}}
@media (max-width: 1199.9px) and (min-width: 992px){.tablerow input, .tablerow-container input {font-size: 18px;}}
@media (min-width: 1200px){.tablerow input, .tablerow-container input {font-size: 20px;}}

.tablerow-input-endlabel {
    position: absolute;
    top: 13px;
    right: 25px;
    font-size: 13px;
    color: #4B4B4B;
}
@media (max-width: 991.9px) and (min-width: 768px){.tablerow-input-endlabel {font-size: 14px; top: 12px;}}
@media (max-width: 1199.9px) and (min-width: 992px){.tablerow-input-endlabel {font-size: 15px; top: 11px;}}
@media (min-width: 1200px){.tablerow-input-endlabel {font-size: 16px; top: 9px;}}

.tablerow-footer {
    border-top: #C7C7C7 double thick;
}

.tablecell {
    min-height: 50px;
    display: flex;
    align-items: center;
}

.tablecell-dark {background-color: #21a0d2; color:#fff;}
.tablecell-light {background-color: #9bd4eb;}
.tablecell-grey {background-color: #f0f0f0;}
.tablecell-grey-dark {background-color: #7c7c7c; color:#fff;}

.tablecell-sum {
    padding-top: 15px;
    padding-bottom: 15px;
    font-family:'Helvetica Neue LT W05','Helvetica Neue World',Helvetica,Arial,sans-serif;
    font-weight: bold;
}

.table-responsive > .table > thead > tr > th:first-child,
.table-responsive > .table > tbody > tr > th:first-child,
.table-responsive > .table > tfoot > tr > th:first-child,
.table-responsive > .table > thead > tr > td:first-child,
.table-responsive > .table > tbody > tr > td:first-child,
.table-responsive > .table > tfoot > tr > td:first-child {
    min-width: 160px;
    position: sticky;
    left: 0px;
}

.table-planovanie > thead > tr > th,
.table-planovanie > tbody > tr > th,
.table-planovanie > tfoot > tr > th,
.table-planovanie > thead > tr > td,
.table-planovanie > tbody > tr > td,
.table-planovanie > tfoot > tr > td{
    min-width: 150px;
}

/********************************************************************************************************/
/* PAGE SPECIFIC STYLES *********************************************************************************/
/********************************************************************************************************/

/* Registration Page **********************************/
.row-terms {
    
}

/* Prehlady Page **************************************/
#partnerstvoTableBody {
    position: relative;
}

#partnerstvoTableBody .container {
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -ms-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

#partnerstvoTableBody.loading .container {
    opacity: 0.5;
}

#partnerstvoTableBody .loader {
    margin: auto;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50px;
    display: none;
}

#partnerstvoTableBody.loading .loader {
    display: inline;
}

.fileupload_box {
    border: 4px dotted #21a0d2;
    font-size: 22px;
    padding: 20px;
    color: #21a0d2;
}

.fileupload_none {
    display: none !important;
}

/* Planovanie a Spolocnosti Page **************************************/
#planovanieTableBody, 
#spolocnostiTableBody {
    position: relative;
}

#planovanieTableBody .container, 
#spolocnostiTableBody .container {
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -ms-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

#planovanieTableBody.loading .container, 
#spolocnostiTableBody.loading .container {
    opacity: 0.5;
}

#planovanieTableBody .loader, 
#spolocnostiTableBody .loader {
    margin: auto;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50px;
    display: none;
}

#planovanieTableBody.loading .loader, 
#spolocnostiTableBody.loading .loader {
    display: inline;
}

.planovanie-mnozstvo{
    display: flex;
    align-self: stretch;
    border-left: #DCDCDC 1px solid;
}

.planovanie-mnozstvo div{
    flex-basis: 50%;
    text-align: right;
    position: relative;
    align-self: center;
}

/********************************************************************************************************/
/* CSS SPINNER /////////*********************************************************************************/
/********************************************************************************************************/
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
}

.lds-ripple div {
  position: absolute;
  border: 4px solid #21a0d2;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}



@keyframes stickyHeaderOut{from{top:0px} to{top:-120px} }
@keyframes stickyHeaderIn{from{top:-120px} to{top:0} }
@keyframes overlaySlideDown{from{height:150px;overflow:hidden} to{height:100vh} }
@keyframes overlaySlideUp{from{height:100vh;overflow:hidden;background-color:rgba(0,0,0,0.85)} to{height:150px;background-color:rgba(0,0,0,0)}}
@keyframes slideInToLeft{from{transform:translateX(100%)} to{transform:translateX(0)}}
@keyframes slideInToRight{from{transform:translateX(-100%)} to{transform:translateX(0)}}
@keyframes opacity {from{opacity: 1;} to{opacity: 0;}}