:root {
    --bg: #ffffff; --body: #2E384D; --green: #97CBA9; --blue: #3C509D; --radius:15px;
}
body {font-size: 18px; margin:0; background:var(--bg); color:var(--body); font-family: 'Source Sans 3'; }
header {position: sticky; top: 0; left: 0; right: 0; width: 100%; z-index: 40; -webkit-transition: top 0.3s; -moz-transition: top 0.3s; -ms-transition: top 0.3s; -o-transition: top 0.3s; transition: top 0.3s;}
h1, h2, h3, h4, h5, h6 {color: var(--body); font-weight: bold;}
p, ul, ol, dl {color: var(--body);}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child {margin-bottom: 0;}
h1 {font-size: 3.45rem; font-weight: 900;}
h2 {font-size: 1.8rem; font-weight: 900;}
h4 {font-size: 1.7rem; font-weight: 600;}
h5 {font-size: 1.5rem; font-weight: 600;}
a {color: var(--body); text-decoration: none; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -ms-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out;}
a:hover {color: var(--green); text-decoration: none;}
.blue {color: var(--blue);}
.green {color: var(--green);}

.bg-blue {background-color: var(--blue); background-image: url("../../attachments/images/bg-header.png"); background-position: right bottom; background-repeat: no-repeat; background-size: 550px;}
.bg-green {background-color: var(--green); background-image: url("../../attachments/images/bg-footer.png"); background-position: center bottom; background-repeat: no-repeat; background-size: contain;}

a.btn {font-size: 1.1rem; font-weight: bold; border: 2px solid; border-radius: 8px; text-transform: uppercase; padding: 0.4rem 2rem 0.35rem;}
a.btn.green {color: var(--body); background-color: var(--green); border-color: var(--green);}
a.btn.green:hover {color: var(--body); background-color: #C0E0CB; border-color: #C0E0CB;}

header > nav.navbar {background-color: var(--bg)!important;}

.hamburger {
    padding: 0.65rem 0 0.15rem; display: inline-block; cursor: pointer; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible;
    -webkit-transition-property: opacity, filter; -moz-transition-property: opacity, filter; -ms-transition-property: opacity, filter; -o-transition-property: opacity, filter; transition-property: opacity, filter;
    -webkit-transition-duration: 0.15s; -moz-transition-duration: 0.15s; -ms-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s;
    -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -ms-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;
}
.hamburger:hover {opacity: 0.7;}
.hamburger.is-active:hover {opacity: 0.7;}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {background-color: #3c509d;}
.hamburger-box {width: 40px; height: 24px; display: inline-block; position: relative;}
.hamburger-inner {display: block; top: 50%; margin-top: -2px;}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 40px; height: 4px; background-color: #3c509d; border-radius: 4px; position: absolute;
    -webkit-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; -o-transition-property: transform; transition-property: transform;
    -webkit-transition-duration: 0.15s; -moz-transition-duration: 0.15s; -ms-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s;
    -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -ms-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {content: ""; display: block;}
.hamburger-inner::before {top: -10px;}
.hamburger-inner::after {bottom: -10px;}
.hamburger--squeeze .hamburger-inner {
    -webkit-transition-duration: 0.075s; -moz-transition-duration: 0.075s; -ms-transition-duration: 0.075s; -o-transition-duration: 0.075s; transition-duration: 0.075s;
    -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -moz-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -ms-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
    -webkit-transition: top 0.075s 0.12s ease, opacity 0.075s ease; -moz-transition: top 0.075s 0.12s ease, opacity 0.075s ease; -ms-transition: top 0.075s 0.12s ease, opacity 0.075s ease; -o-transition: top 0.075s 0.12s ease, opacity 0.075s ease; transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
    -webkit-transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -ms-transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -o-transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
    -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
    -webkit-transition-duration: 0.12s; -moz-transition-duration: 0.12s; -ms-transition-duration: 0.12s; -o-transition-duration: 0.12s; transition-duration: 0.12s;
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0; opacity: 0;
    -webkit-transition: top 0.075s ease, opacity 0.075s 0.12s ease; -moz-transition: top 0.075s ease, opacity 0.075s 0.12s ease; -ms-transition: top 0.075s ease, opacity 0.075s 0.12s ease; -o-transition: top 0.075s ease, opacity 0.075s 0.12s ease; transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);
    -webkit-transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

header > nav.navbar .nav-link {color: var(--body); font-size: 1.1rem;}
header > nav.navbar .nav-link:hover {color: #2CA1D8;}

.videoCard{overflow:hidden;}
.videoHeader{ display:flex; justify-content:space-between; align-items:center;}
.videoHeader .title{ font-weight:600; }
video{ width:100%; height:auto; display:block; border-radius:var(--radius); }
.chapters{ background:rgba(151, 203, 169, .2); border-radius:var(--radius); padding:2rem 1.5rem;}
.chapter{ display:grid; align-items: center; grid-template-columns: 140px 1fr; gap:10px; width: 100%; margin-bottom: 1rem; padding: 0; cursor:pointer; transition: transform .08s ease, background .2s ease; outline: none; border:none; background: transparent; padding: 0 .5rem 0px 0;}
.chapter:last-child {margin-bottom: 0;}
.chapter:hover{ transform: translateY(-1px); background: rgba(255,255,255,.03);}
.chapter:focus-visible{ box-shadow: 0 0 0 2px var(--body) inset; }
.chapter.active{background: rgba(255, 255, 255, 0.7); border-radius: 8px;}
.thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius: 8px;}
.meta{color:var(--body); text-align: left;}
.time{display: block; font-size:.9rem; color:var(--body); line-height: 1; margin-bottom: 0.3rem;}
.ctitle{display: block; font-size: 1.15rem; font-weight:700; line-height: 1.2;}
.cdesc{ font-size:13px; color:var(--body); line-height:1.35; }
.controls{ display:flex; gap:8px; align-items:center; }
.btn{ appearance:none; border:1px solid rgba(255,255,255,.08); background:transparent; color:var(--body); border-radius:10px; padding:6px 10px; cursor:pointer;}
.btn:hover{ background:rgba(255,255,255,.06); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.contacts {background-color: var(--bg); border-radius: var(--radius); max-width: 450px; padding: 2rem 2rem; text-align: center; margin: 0 auto;}
.contacts a {font-weight: 600;}
.contacts .line {background-color: #E5867F; height: 1px; width: 120px; margin: 1.5rem auto;}
.contacts .chatbot .link {display: inline-block; vertical-align: middle; padding-right: .25rem;}
.contacts .chatbot .image {background: #01b0f1; border-radius: 100%; width: 30px; height: 30px; display: inline-block; vertical-align: middle; position: relative;}
.contacts .chatbot .image > img {
	position: absolute; top: 50%; left: 50%; width: 20px;
	-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

a#CybotCookiebotDialogPoweredbyCybot, div#CybotCookiebotDialogPoweredByText {display: none;}

@media (max-width: 575px){
    body {font-size: 1rem;}
    h1 {font-size: 2.5rem;}
    h2 {font-size: 1.5rem;}
    h5 {font-size: 1.25rem;}
    header > nav.navbar .navbar-collapse {position: absolute; top: 100%; width: 100%; left: 0px; background: rgb(255, 255, 255); padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); background: var(--green); box-shadow: 0 4px 8px rgba(0, 0, 0, .25);}
    header > nav.navbar .navbar-nav {padding: .3rem 0; text-align: center;}
    header > nav.navbar .nav-link {line-height: 1; padding: 1rem 0; border-bottom: 1px solid var(--body); font-size: 1.2rem; font-weight: 600;}
    header > nav.navbar .nav-link:last-child {border-bottom: none;}
    .bg-blue {background-image: none; text-align: center;}
    .videoCard h2 {text-align: center;}
    .chapter {grid-template-columns: 100px 1fr; gap: 8px;}
    .time {font-size: .8rem; margin-bottom: .2rem;}
    .ctitle {font-size: 1rem; line-height: 1.1;}
}
@media (min-width: 576px) and (max-width: 767px){
    body {font-size: 1rem;}
    h1 {font-size: 3rem;}
    .bg-blue {background-size: 58%; text-align: center; padding-bottom: 13rem!important;}
}
@media (min-width: 768px) and (max-width: 991px){
    .bg-blue {background-size: 35%;}
}
@media (min-width: 992px) and (max-width: 1199px){
    body {font-size: 1rem;}
    h2 {font-size: 1.4rem;}
    .bg-blue {background-size: 37%;}
    .chapter {grid-template-columns: 80px 1fr; gap: 8px;}
    .time {font-size: .8rem;}
    .ctitle {font-size: 0.9rem;}
}
@media (min-width: 1200px) and (max-width: 1399px){
    .bg-blue {background-size: 500px;}
    .chapter {grid-template-columns: 110px 1fr; gap: 10px;}
    .ctitle {font-size: 1.05rem;}
}