* {padding: 0; margin: 0;}
body {color: white; font-size: 13px; line-height: 1.4; background: #EDEDED; font-family: 'Affogato-Medium'; overflow-x: hidden;}


.pull-right {float: right;}
.half {width: 50%; float: left;}
.threequart {width: 75%; float: left;}
.third {width: 33.3%; float: left;}
.quart {width: 25%; float: left;}
.sixth {width: 16.6%; float: left; text-align: center;}
#content .sixth img, #content .sixth svg {margin: 15px auto 25px auto; display: inline-block;}
h1, h2, h3 {font-family: 'Affogato-Bold'; font-weight: normal; text-transform: uppercase; margin-bottom: 0.8em; font-size: 19px; line-height: 1.2rem;}
h1, h2, a {color: #2a285f;}
h2 a {text-decoration: none;}
h2 {margin-bottom: 0.8em;}
.container {max-width: 1600px; margin: 0 auto;}
.container:first-child {width: 100%;}
.white p {color: white!important;}
a.white {color: white!important;}
@media screen and (max-width: 1680px) {
    .container {max-width: calc(100% - 80px);}
}
.btn, input[type="submit"] {text-decoration: none; font-family: 'Affogato-Bold'; color: white; background: #2a285f; display: inline-block; padding: 3px 25px; text-transform: uppercase; border: 1px solid #2a285f;}
.well {background: rgba(255,255,255,0.15); padding: 20px;}
form {position: relative;}
a {cursor: pointer;}
.hidden {opacity: 0!important;}
img.animated {opacity: 0!important;}

body.no-js img.animated {opacity: 1!important;}
body.iOS img.animated {opacity: 1!important;}
body.safari img.animated {opacity: 1!important;}

.appearanimated {margin-top: 0; transition: all 1s ease-in-out; margin-bottom: -0px;}
.appearanimated.hidden {margin-top: 50px; transition: all 0s ease-in-out; margin-bottom: -50px;}

#header {background: #ec6665; background: url('/img/header.jpg') center center no-repeat; background-size: cover;}
#header .container > div {position: relative; height: 485px;}
#headertext {position: absolute; left: 50%; top: 50%; text-align: center; margin-left: 15px; width: 500px; max-width: 80%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#headertext h3 {font-family: 'Affogato-Bold'; font-weight: normal; font-size: 40px; line-height: 1em; margin-bottom: 0.3em;}
#headertext div {font-family: 'Affogato-Bold'; font-weight: normal; font-size: 18px;}
#headertext .purple {color: #2a285f;}
#headertext .red {color: #ec6665;}
#headertext .white {color: white;}
@media screen and (max-width: 1000px) {
    #headertext {max-width: calc(100% - 80px);}
}
#menu {background: #ec6665; width: 90px; border: 1px solid #2a285f; border-top: 0; border-bottom: 0; padding: 30px; position: absolute; height: 425px;}
#menu li {list-style: none;}
#menu a {font-size: 15px; line-height: 2.1em; text-transform: uppercase; text-decoration: none; font-family: 'Affogato-Bold'; color: white; display: block;}
#menu a:hover {color: #2a285f;}
#menu img, #menu svg {width: 80px; position: relative; right: 4px; display: block; margin: 10px 0 35px;}
#menu li.active a {color: #2a285f;}


#content img, #content svg {max-width: 100%; display: block;}
#content p img {width: 100%; height: auto;}
#content {background: #ec6665; border: 1px solid #2a285f; border-left: 0; border-right: 0;}
#content .container {border-left: 1px solid #2a285f; overflow: hidden; padding-bottom: 30px;}
#content .page, .quart > div {padding: 35px 5px 55px 30px;} 
#content article.page {padding-right: 30px; max-width: 890px; margin: 0 auto;}
#content article.page.fullwidth {max-width: 100%;}

#content p, #footer p, #footer .menu ul {margin-bottom: 1.5em;}
#content p a, #content ul li a, #content ol li a  {color: white;}
#content p b, #content p strong {font-family: 'Affogato-Bold'; font-weight: normal;}
#content .button {position: absolute; right: 0; width: 25%; text-align: center; border: 1px solid #2a285f; border-top: 0; height: 160px; line-height: 160px; border-right: 0; cursor: pointer; z-index: 3;}
#content .button > span {font-size: 23px; text-transform: uppercase; line-height: 1.4em; display: inline-block; vertical-align: middle; font-family: 'Affogato-Bold'; font-weight: normal; line-height: 1em; color: #2a285f;}
#content .button span span {color: white; text-transform: none; font-size: 13px;}
#content .button:hover > span {color: white;}
#content .button:hover > span span {color: #2a285f;}
#content .center {text-align: center; padding: 35px 5px 35px 30px;}
#content .center.maininfo {padding: 75px 5px 75px 30px;}
#content .center.maininfo p, #content .center.maininfo p a {color: #2a285f;}
#content .center.maininfo h2 {color: white;}
.projects #content .third div {position: relative;}
.projects #content img {width: 100%; object-fit: cover; aspect-ratio: 1.5;}
.projects #content img, .projects #content svg {margin-bottom: 1.2em;}
.projects #content .center {color: white; text-align: left; padding: 35px 5px 35px 30px;}
.projects #content .center h2 {color: #2a285f; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.projects #content .center b, 
.projects #content .center strong {color: white;}
.projects #content .third > div {cursor: pointer; padding-right: 18px; padding-bottom: 35px; padding-top: 40px;}
.projects #content .third > div a {text-decoration: none;}
#content .facts {padding: 35px 0px 75px 30px; border-top: 1px solid #2a285f; overflow: auto;}
#content .factcontainer:before {content: ""; border-top: 1px solid #2a285f; height: 0; width: 50%; left: 50%; position: absolute; margin-top: 0px;}
@media screen and (max-width: 650px) {
    .projects #content .center,
    .projects #content .container .quart article,
    #content .center, .quart > article,
    #content .center, .quart > div {padding-right: 30px!important;}
}
@media screen and (max-width: 450px) {
    .container {max-width: calc(100% - 40px); margin-left: 40px;}
    .container .container {margin-left: 0; max-width: 100%;}
}
.productitem {padding: 40px 0 30px; overflow: auto; cursor: pointer;}
.productitem.artificial-reef img { width: 50%;  }
.productitem div:nth-child(1) {float: left; width: 300px;}
.productitem div:nth-child(1) img, .productitem div:nth-child(1) svg {margin: 0 auto 1.2em; 
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3); 
    transform-origin: 50% 0%;
}
.productitem > div:nth-child(2) {float: left; width: calc(100% - 300px); max-width: 360px; color: white; text-align: left;}
.productitem > div:nth-child(2) b, .productitem > div:nth-child(2) strong,
.productitem h2 {color: #2a285f; margin-bottom: 1.2em;}
.productitem .price {color: #2a285f; font-family: 'Affogato-Bold'; font-weight: normal; text-transform: uppercase; margin: 1.8em 0 1.8em; font-size: 19px;}
.productitem a {text-decoration: none;}
.productitem + .productitem {border-top: 0px dotted #2a285f;}

label {display: block; padding: 15px 0 3px; font-size: 13px;}
input, textarea {
    display: block; 
    min-width: calc(100% - 12px); 
    max-width: calc(100% - 12px); 
    background: rgba(255,255,255,0.2)!important; 
    border: 1px solid rgba(255,255,255,0.2); 
    color: #2a285f; 
    padding: 5px 5px; 
    width: calc(100% - 2px);
    font-size: 15px;
    font-family: 'Affogato-Medium'; 
    font-weight: normal;
}
textarea {height: 100px;}
input[type="submit"] {cursor: pointer; width: auto; min-width: 0; max-width: 100%; background: #2a285f!important; height: 34.5px; font-size: 15px; font-family: 'Affogato-Bold'; font-weight: normal;}
input[type="checkbox"] {width: auto; min-width: 0; display: inline-block; margin-right: 3px; bottom: auto; top: 2px;}



.productbutton {border: 1px solid #2a285f; border-left: 0; text-align: center; display: block; font-size: 19px; line-height: 1.4em; font-family: 'Affogato-Bold'; font-weight: normal; text-transform: uppercase; text-decoration: none; padding: 20px 0 0;}
.productbutton > span.donatenow {font-size: 40px; line-height: 1em; display: block; padding: 0 10px;}
.productbutton > span.donatenow > span {font-size: 15px; display: block; font-size: 17px; color: white; text-transform: none;}
.productbutton:hover > span.donatenow {color: white;}
.productbutton:hover > span.donatenow > span {color: #2a285f;}
.single.newsletter .post-content {column-count: 1; max-width: 770px;} 
.project .post-content ul,
.single .post-content ul, 
.project .post-content ol,
.single .post-content ol {margin-left: 25px; margin-bottom: 1.5em;}
@media only screen and (max-width: 550px) {
    .project .post-content, .single .post-content {column-count: 1;}
}
@media only screen and (max-width: 850px) {
    .products.single .quart > .productbutton {display: none;}
    .products.single #content .quart > article {padding-bottom: 0;}
}
.productbutton {margin-bottom: 75px;}
.productbutton.reversed {
    color: white;
    background: #2a285f;
    max-width: 163px;
    padding: 15px 0;
    margin-block: 10px 50px;
}
.productbutton.reversed > span.donatenow > span {display: inline; font-size: inherit;}
.productbutton.reversed > span.donatenow {font-size: 23px;}
.productbutton.reversed:hover > span.donatenow > span, .productbutton.reversed > span {color: white;}
.btnprice {display: none;}
#content .post-content *:last-child {margin-bottom: 0;}
.post-content h2 {color: white; padding-top: 1rem; font-size: 17px;}
.post-content h3 {text-transform: none; font-size: 17px;}

.productbutton {color: white; font-size: 13px; text-transform: none; font-family: 'Affogato-Medium'; padding: 25px 15px 15px;}
.productbutton span {font-family: 'Affogato-Bold';}
.productbutton > span {color: #2a285f; text-transform: uppercase;}
.productbutton:hover > span > span {color: #2a285f;}
.productbutton:hover > span {color: white;}

.filter {margin-top: 25px;}
.filter li {list-style: none;}
.filter li a {display: block; max-width: 150px; color: white; padding: 3px 5px; text-decoration: none; margin: 0 auto 7px; border: 1px solid #2a285f; font-family: 'Affogato-Bold'; font-weight: normal;}
.filter li:last-child a {margin-top: 25px; text-transform: uppercase;}
.filter li a.active {background: #2a285f;}
div.facts .sixth > div {padding: 0 20px 20px 0;}
div.facts {overflow: hidden!important;}
div.facts .factimg {height: 55px; width: 100%;}
div.facts .factimg.tip {height: 75px; margin: 0px auto 20px auto!important;}
div.facts .factimg.fact {position: relative; left: 8px;}



#breadcrumbs {position: relative; bottom: 23px; padding-bottom: 5px; font-size: 13px;}
#breadcrumbs a {color: white; text-decoration: none;}
@media only screen and (min-width: 600px) {
    #breadcrumbs + h1 {padding-top: 0.5rem;}
}

#footer h3 {font-size: 13px; font-family: 'Affogato-Bold'; font-weight: normal; color: #2a285f; padding-bottom: 15px; margin-bottom: 0;}
#footer ul + h3 {padding-bottom: 0;}
#footer .buttons {
    background: #2a285f; /* Old browsers */
    background: -moz-linear-gradient(left,  #2a285f 50%, #ec6665 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #2a285f 50%,#ec6665 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #2a285f 50%,#ec6665 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a285f', endColorstr='#ec6665',GradientType=1 ); /* IE6-9 */
    overflow: auto;
    border-bottom: 1px solid #2a285f;
}
#footer .buttons .half {cursor: pointer;}
#footer .buttons .half:hover div > span {color: white;}
#footer .buttons .half:nth-child(1):hover div > span span {color: #ec6665;}
#footer .buttons .half:nth-child(2):hover div > span span {color: #2a285f;}
#footer .buttons div > span {font-size: 23px; text-transform: uppercase; line-height: 1.4em; display: inline-block; vertical-align: middle; font-family: 'Affogato-Bold'; font-weight: normal;}
#footer .buttons span span {color: white; text-transform: none; font-size: 17px;}
#footer .half {height: 100px; text-align: center; line-height: 100px;}
#footer .half:nth-child(1) div > span {color: #ec6665;}
#footer .half:nth-child(2) div > span {color: #2a285f;}
#footer .menu {color: #282827; overflow: auto; padding: 19px 0 10px;}
#footer .menu .container > div {overflow: auto; padding: 5px 0px;}
#footer .colophon {background: #2a285f; color: white; font-size: 12px; padding: 5px 0; overflow: auto;}
#footer .colophon .container > div {padding: 5px 0px;}
#footer .colophon a {text-decoration: none; color: white;}
#footer .colophon a:hover {color: #ec6665;}
#footer .menu a {color: #282827;}
#footer .menu a:hover {text-decoration: none;}
#footer .menu li {list-style: none;}



.graph {position: relative; min-width: 500px; transform-origin: top left;}
.graph img, .graph svg {
    display: block;
    margin: 9px auto;
}
.art-reef .graph .stripe_down { margin: 15px auto;  }
.graph .stripe_down {height: 30px; width: 1px; margin: 7px auto; background: #2a285f;}
.graph .stripe_left {position: absolute; left: 0; margin-left: -39px; margin-top: 18px; width: 30px; height: 1px; background: #2a285f;}
.graph .icon {
    margin: 5px auto;
    position: relative;
    height: 100px;
}
.graph .icon.small {height: 75px;}
.graph .icon.medium {height: 85px;}
.graph .icon.large {height: 115px;}
.graph .icon img, .graph .icon svg {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%) scale(1.5);
    -ms-transform: translateY(-50%) scale(1.5);
    transform: translateY(-50%) scale(1.5);
}
.graph img.split_start, .graph img.split_end {width: 50%;}
.graph h2 {margin: 0.4em auto 0.3em ;}
.art-reef.graph h2 { margin: 1.7em auto 0.3em; }
.graph p {margin-bottom: 0!important; margin-left: auto; margin-right: auto; max-width: 350px;}
.graph p.white {color: white!important;}
.graph h2.dark {color: #2a285f!important;}




#content .container::before {
    height: 0;
    transition: height 1.5s ease-in-out;
    position: absolute;
    left: 0;
    margin-left: 0px;
    content: "";
    border-left: 1px solid #2a285f;
    max-width: 1600px;
    width: 0;
}
#content .container {overflow: hidden; position: relative; border-left:0; }
.loaded #content .container::before {
    height: 100%;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.partners > .partner {
    display: inline-block;
    margin: 10px 20px 10px 0!important; 
    padding: 10px; 
    width: 300px; 
    max-width: calc(50% - 44px); 
    border: 1px solid #2a285f;
}
.partners > .partner.styled {
    background: #2a285f; 
    transition: all 0.2s ease-in-out;
    background: rgba(255, 255, 255, 0.15); 
    border: 0;
}
.partners > .partner > span {
    display: block; 
    width: 100%; 
    padding-bottom: 50%; 
    background: transparent url() center center / contain no-repeat; 
    position: relative; 
}
.partners > .partner.styled > span {
    mix-blend-mode: lighten; 
    animation: fadeIn 1.5s 1.5s both;
    transition: all 0.2s ease-in-out;
    filter: brightness(0.5) sepia(1) hue-rotate(130deg) invert(1);
}

.partners > .partner {cursor: default;}
.partners > .partner[href] {cursor: pointer;}
.partners > .partner.styled[href]:hover {background: #2a285f;}
.partners > .partner.styled[href]:hover > span {filter: brightness(0.7) sepia(1) hue-rotate(20deg) invert(1);}
.partners > .partner > span > span {position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center;}



@media only screen and (max-width: 1000px) {
    .graph {
        -moz-transform: scale(0.7) translateX(-50%);
        -webkit-transform: scale(0.7) translateX(-50%);
        -o-transform: scale(0.7) translateX(-50%);
        -ms-transform: scale(0.7) translateX(-50%);
        transform: scale(0.7) translateX(-50%); 
        left: 50%;
    }
}
@media only screen and (max-width: 850px) {
    .home #content .container .quart,
    .products.single #content .container .quart,
    .home #content .container .quart + .half,
    .products.single #content .container .quart + .half {
        width: 100%;
    }
}
@media only screen and (max-width: 649px) {
    #content .center {padding-top: 15px}
}
@media only screen and (max-width: 490px) {
    .graph {
        -moz-transform: scale(0.6) translateX(-50%);
        -webkit-transform: scale(0.6) translateX(-50%);
        -o-transform: scale(0.6) translateX(-50%);
        -ms-transform: scale(0.6) translateX(-50%);
        transform: scale(0.6) translateX(-50%); 
        left: 50%;
    }
}
@media only screen and (max-width: 400px) {
    .graph {
        -moz-transform: scale(0.5) translateX(-50%);
        -webkit-transform: scale(0.5) translateX(-50%);
        -o-transform: scale(0.5) translateX(-50%);
        -ms-transform: scale(0.5) translateX(-50%);
        transform: scale(0.5) translateX(-50%); 
        left: 50%;
    }
}


#cookie-notice {width: calc(100% - 30px)!important;}
#cookie-notice a {display: inline-block; padding: 3px 25px; background: #5ca845; text-decoration: none; color: white; border-color: #5ca845!important;}
#cookie-notice a.btn-secondary {background: #555; border-color: #555!important;}


.checkout #content .quart:nth-child(2) {min-width: 415px;}
.accomplishments article img, .accomplishments article svg {position: absolute; margin-left: -120px; margin-top: 20px;
    -webkit-transform: translateX(-50%) scale(1.1);
    -ms-transform: translateX(-50%) scale(1.1);
    transform: translateX(-50%) scale(1.1);
    transform-origin: 50% 50%;
}
.accomplishments article img.bigger, .accomplishments article svg.bigger {
    -moz-transform: translateX(-50%) scale(1.3);
    -webkit-transform: translateX(-50%) scale(1.3);
    -o-transform: translateX(-50%) scale(1.3);
    -ms-transform: translateX(-50%) scale(1.3);
    transform: translateX(-50%) scale(1.3); 
}
.accomplishments .half {position: relative; left: 30px;}
.accomplishments article .post-header {padding-left: 40px;}
.accomplishments article .post-content {padding-left: 40px; max-width: 400px;}
.accomplishments  #content .container {overflow-x: hidden;}
.accomplishments #content .container .quart:first-child > * {padding: 0; white-space: nowrap;}
.accomplishments #content .container .quart:first-child > div > div {padding: 35px 5px 55px 30px;}
.accomplishments #content .container .quart:first-child > img, .accomplishments #content .container .quart:first-child > svg {max-width: none;}
@media only screen and (max-width: 430px) {
    .accomplishments #content .container .quart:first-child > * {
        -moz-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -o-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8); 
        transform-origin: 0% 0%;
    }
    .accomplishments #content .container .quart:first-child + .half {margin-top: -162px;}
}

.radio, .checkbox {position: relative; bottom: 8px;}
.rowradio + .rowradio .radio {margin-top: 0px;}
input[type="checkbox"], input[type="radio"] {position: relative; bottom: 1px;}
input[type='number'] {-moz-appearance: textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;}
select.form-control {min-width: 50px; border: 1px solid #2a285f; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("/img/chevron_down.svg") calc(100% - 4px) 60% no-repeat; background-size: auto 11px;}
select.form-control::-ms-expand {display: none;}
body.iOS object#bubble {display: none!important;}


body.newsletter .post-content > div {background: rgba(255,255,255,0); overflow: hidden; margin-bottom: 60px;}
body.newsletter .post-content > div > div {text-align: left;}
body.newsletter .post-content > div > div > div > table {background: white;}
body.newsletter .post-content > ul li {list-style: none;}

@media only screen and (max-width: 1300px) {
    #content .container .quart {width: 315px;}
    #content .container .quart + .half {width: calc(100% - 315px);}
    #content .container .quart + .half .productitem > div:first-child {width: 40%;}
    #content .container .quart + .half .productitem > div:nth-child(2) {width: 60%;}
    #content .button {display: none;}
    .projects #content .container .quart article {padding-bottom: 0;}
    .projects #content .center {padding: 35px 0 0 30px}
    .projects .threequart {width: 100%;}
    .projects #content article.page {padding-right: 0px;}
    .projects #content .third > div {padding-top: 20px;}
    .academy #content .container .quart:nth-child(2),
    .academy #content .container .quart:nth-child(3) {width: 25%;}
    #footer .pull-right {float: none; display: inline-block;}
    .facts.grid .sixth {width: calc(25% - 8px);}
    .accomplishments #content .container .quart:first-child {width: 380px;}
    .accomplishments #content .container .quart:first-child + .half {width: calc(100% - 380px);}
}
@media only screen and (max-width: 900px) {
    .checkout #content .quart:nth-child(2) {min-width: 0;}
    .checkout #content .quart:nth-child(2) > div {padding-left: 30px!important; padding-right: 30px!important; min-width: 0; max-width: calc(100% - 60px);}
    .accomplishments article img, .accomplishments article svg {position: relative; margin-left: 0px; margin-top: 20px;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        transform-origin: 0% 80%;
    }
    .accomplishments article img.bigger, .accomplishments article svg.bigger {
        -moz-transform: scale(1.3);
        -webkit-transform: scale(1.3);
        -o-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3); 
    }
    .accomplishments article .post-content {padding-left: 0px; max-width: 400px;}
    .accomplishments article .post-header {padding-left: 0px;}
    .accomplishments .half article {padding-top: 35px!important;}
    .accomplishments .half {position: relative; left: 0px;}
    object {display: none;}
}
@media only screen and (max-width: 800px) {
    #content .container .quart + .half .productitem > div:first-child {width: 100%;}
    #content .container .quart + .half .productitem > div:nth-child(2) {width: 100%;}
    .projects .threequart .third {width: 100%!important;}
    .projects #content .third > div {padding-right: 0px;}
    .academy #content .container .quart:nth-child(2) {clear: left;}
    .academy #content .container .quart:nth-child(2),
    .academy #content .container .quart:nth-child(3) {width: 50%; text-align: left;}
    .academy #content .center h2 {text-align: left;}
    .academy .filter li a {text-align: center;}
    .academy #content .quart .center {padding-top: 0!important;}
    .facts.grid .sixth {width: calc(50% - 17px);}
    .contact #content article.page {padding-bottom: 0;}
    #footer .menu .quart {width: 50%; padding: 10px 0;}
    #footer .menu h3 {padding-bottom: 0;}
    #footer .menu p + p {position: relative; bottom: 1.5em; margin-bottom: 0;}
    #footer .menu ul + h3 {padding-top: 20px;}
    .accomplishments .half {width: 100%!important;}
    .productitem .price {display: none;}
    .productitem h3 {margin-top: 1em;}
    .productitem {text-align: left;}
    .productitem div:nth-child(1) img, .productitem div:nth-child(1) svg {margin: 2em 0; transform-origin: 0% 0%;}
    .btnprice {display: inline;}
}

@media only screen and (max-width: 650px) {
    #content .container .quart {width: 100%;}
    #content .container .quart + .half {width: 100%;}
    .productbutton {margin-bottom: 0px;}
    .productitem div:nth-child(2) {max-width: 100%;}
    #content .container .quart + .half + .quart > div {padding-top: 30px!important;}
    #footer .buttons .half {width: calc(100% - 40px); border-left: 1px solid #2a285f;}
    #footer .buttons {
        background: #2a285f;
        background: -moz-linear-gradient(bottom, #2a285f 50%, #ec6665 50%);
        background: -webkit-linear-gradient(bottom, #2a285f 50%,#ec6665 50%);
        background: linear-gradient(to bottom, #2a285f 50%,#ec6665 50%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a285f', endColorstr='#ec6665',GradientType=3 );
    }
    #footer .buttons .half:nth-child(2) {border-left: 1px solid transparent;}
    .accomplishments #footer .buttons .container {max-width: calc(100% - 80px);}
}

@media only screen and (max-width: 500px) {
    #content .container .quart + .half + .quart > div {padding-left: 30px!important;}
    #content .container .quart + .half + .quart > div {padding-right: 30px!important;}
    .academy #content .container .quart:nth-child(2),
    .academy #content .container .quart:nth-child(3) {width: 100%;}
    .facts.grid .sixth {width: calc(100% - 35px);}
    #footer .menu .quart {width: 100%;}
}


/* TOEGEVOEGDE DEEL GUUS */
.mobilemenu {
    position: fixed;
    top: 0; 
    right: 0; 
    width: 100px; 
    height: 100px;  
    background: #2a285f; 
    z-index: 2;  
    opacity: 0; 
    transition: 500ms ease;  
    pointer-events: none; 
    border-bottom-left-radius: 100%;
}
.mobilemenu .burger { 
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #2a285f;
    text-transform: uppercase;
    z-index: 2;
    cursor: pointer;
    border: 0!important;
    bottom: auto;
    display: block;
}
.mobilemenu div.burger {width: 28px; transition: 500ms ease; height: 28px; left: 50%; top: 50%; transform: translate(-15%,-87%);}
.mobilemenu input.burger { opacity: 0; z-index: 3;}
.mobilemenu .burger span { width: calc(100% - 6px); height: 3px; border-radius: 2px; background: #ec6665; position: absolute; top: 20%; left: 3px; transition: 500ms ease;}
.mobilemenu .burger span:nth-of-type(2) {top: 45%; width: calc(90% - 6px); left: calc(10% + 3px);}
.mobilemenu .burger span:nth-of-type(3) {top: 70%; width: calc(80% - 6px); left: calc(20% + 3px);}

.mobilemenu .burger:hover ~ div span:nth-of-type(1) {width: calc(90% - 6px); left: calc(10% + 3px);}
.mobilemenu .burger:hover ~ div span:nth-of-type(2) {width: calc(95% - 6px); left: calc(5% + 3px);}
.mobilemenu .burger:hover ~ div span:nth-of-type(3) {width: calc(85% - 6px); left: calc(15% + 3px);}

.mobilemenu .burger:checked ~ div {transform: translate(-15%,-87%) rotate(90deg);}
.mobilemenu .burger:checked ~ div span:nth-of-type(1) {width: calc(100% - 5px); left: 3px; transform: translateX(5px) translateY(-2px) rotate(45deg); transform-origin: top left;}
.mobilemenu .burger:checked ~ div span:nth-of-type(2) {width: calc(100% - 5px); left: 3px; transform: scaleX(0);}
.mobilemenu .burger:checked ~ div span:nth-of-type(3) {width: calc(100% - 5px); left: 3px; transform: translateX(3px) rotate(-45deg); transform-origin: top left;}

@media only screen and (max-width: 600px) {
    .mobilemenu {width: 50px; height: 50px; border-radius: 0;}
    .mobilemenu div.burger {transform: translate(-50%,-50%);}
    .mobilemenu .burger:checked ~ div {transform: translate(-50%,-50%) rotate(90deg);}
}


div#menu {transition: 500ms ease; transform-origin: top left;}
#header > .container > div >  img {top: 495px; }

#header .container { max-width: calc(100% - 80px) }
#header .subcontainer {position: fixed; width: 100%; top: 0; left: 0; right: 0; margin: 0 auto; max-width: 1600px; z-index: 2;}


.mobilemenu {opacity: 1; pointer-events: all; z-index: 2;} 
div#menu {height: calc(6rem - 3px); width: 38px;  padding: 0; position: absolute; top: 0; border: 1px solid transparent; background: #ec6665; z-index: 2;  overflow: hidden;}
div#menu > a {max-width: 70px; }
div#menu img { width: calc(100% - 10px); margin-left: 7.5px; }
div#menu ul.nav {padding: 0 0.5rem; }

div#menu ~ .underlay {position: fixed; top:0; left:0 ; width: 100%; height: 100%; background: rgba(0,0,0,0.3); opacity:  0; pointer-events: none; transition: 500ms ease;}
div#menu.open ~ .underlay { opacity:  1; pointer-events: all;}

div#menu.open a{ transform: translateX(5px); }
div#menu.open {width: 140px; transform: translateX(40px); height: 425px; }

.scrolledDesktop div#menu { transform:  translateX(-40px);}
.scrolled div#menu.open {width: 140px;  height: 425px; transform: translateX(40px); }

.home #content .container {display: flex; flex-direction: column; align-items: center;}
.home #content .container .quart {width: 100%; max-width: 800px; margin-bottom: -100px; }

.home #news {margin-bottom: 3rem; }
.home #news h2 { text-align: center; margin: 4rem 0 1.5rem;}
ul.newsblock {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; gap: 2rem;} 
ul.newsblock li { display: flex; flex-direction: column; align-items: flex-start; max-width: 17rem; margin: 0; position: relative; font-size: 13px;}
ul.newsblock li a {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2;}
ul.newsblock li a:hover ~ p:last-of-type {text-decoration: underline;}
ul.newsblock li a:hover  {color: #2a285f;}
ul.newsblock li p {margin-bottom: 0;}
ul.newsblock li h3 {margin: 10px 0 5px; }
ul.newsblock li figure  {position: relative; width: 100%; height: 0; padding-bottom: 70%; margin: 0.35rem 0 0.75rem;}
ul.newsblock li figure img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.news h1   {text-align: center;}
.news ul.newsblock {max-width: 1500px; }
.news ul.newsblock li { display: flex; flex-direction: column; align-items: center; max-width: 15rem; text-align: center; margin: 4rem 0 0 4rem;}


.academy div#content div.uppercontainer div.container div.quart.appearanimated div.center { padding: 0; }
.academy div#content div.uppercontainer div.container div.quart.appearanimated div.center h2  { text-align: left; margin-left: 30px;  margin-top: 20px; }
.filter li a {margin: 0 30px 2px 30px}

hr {background: white; height: 1px; border: 0; opacity: 0.15; margin-block: 2.5rem;}
blockquote {font-size: 140%; margin-block: 1.5em; line-height: 1.3;}


@media only screen and (min-width: 955px) {
    .academy div#content {display: flex;}
    .academy div#content > div > div:first-of-type { display: flex; flex-direction: column; margin: 0 ; width: 25%;  }
    .academy div#content > div > div:first-of-type > div { width: 100%; }
    .academy div#content > div > div:nth-of-type(2) {width: 100%; }
    .academy div#content > div > div:nth-of-type(2) > div {border-top: 0}
    .academy .uppercontainer { max-width: 1600px; margin: 0 auto; width: 100%;  position: relative; display: flex; }

    .home #content .container .quart { max-width: 950px;}
    article, .threequart, .productitem, .products:not(.single) .productbutton {font-size: 15px;}
    .home #news h2, article h1 { font-size: 22px;}
}

@media only screen and (max-width: 1680px) and (min-width: 955px) {
    .academy .uppercontainer {margin-left: 40px;}
    .academy #content .container .quart:nth-child(2), .facts #content .container .quart:nth-child(3) { width: 100%; }    
    
}
@media only screen and (min-width: 1680px) {
    div#menu.open {transform: none;}
    .scrolled div#menu.open {transform: none;}
    div#menu { transform: translateX(30px);  height: calc(8.8rem - 3px); width: 59px; }
    .scrolledDesktop div#menu {  height: calc(6rem - 3px); width: 38px}
}

@media only screen and (max-width: 1680px) {
    div#menu {position: fixed; transform: translateX(40px); left: 0; width: 59px; height: calc(8.8rem - 3px)}
    .scrolledDesktop div#menu { transform:  translateX(0px); width: 38px; height: calc(6rem - 3px);}
}

@media only screen and (max-width: 920px) {    
    div#menu { transform:  translateX(10px);}
    .scrolled div#menu { transform:  translateX(0px);}
}
@media only screen and (max-width: 600px) {    
    .home #news h2 {margin:4rem 0 0rem; }
    .academy div#content div.uppercontainer div.container div.quart.appearanimated div.center h2 {margin-top: -20px; }
    #header .container > div { height: 300px;  }
    #header > .container > div >  img {top: 310px; }
    ul.newsblock li {max-width: 100%;}
}

.post-content .paymentmethods {max-width: 400px; padding: 0!important; text-align: left!important;}

/* LIGHTBOX */
#lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;}
#lightbox .img {
    position: relative; 
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-width: 100%;
    max-height: 100%;
}
#lightbox .img img {opacity: 0; pointer-events: none; width: auto;}
@media screen and (min-width: 1200px) {
    #lightbox .img {
        max-width: 1200px;
    }
}
@media screen and (min-height: 1200px) {
    #lightbox .img {
        max-height: 1200px;
    }
}
#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

#lightbox span {display: none;}

#lightbox .videoWrapperContainer {
    position: relative; 
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-width: 900px;
    max-height: 100%;
}
#lightbox .videoWrapperContainer .videoWrapper {
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    position: relative;
    padding-bottom: 56.333%; /* custom */
    background: black;
} 
#lightbox .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}   
#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;}
#lightbox.gallery #prev, #lightbox.gallery #next {display: block;}
#lightbox #prev {left: 0;}
#lightbox #next {right: 0;}
#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;}
#lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Safari */
-webkit-transform: rotate(-45deg);
/* Firefox */
-moz-transform: rotate(-45deg);
/* IE */
-ms-transform: rotate(-45deg);
/* Opera */
-o-transform: rotate(-45deg);
}
#lightbox #close:after {
/* Safari */
-webkit-transform: rotate(45deg);
/* Firefox */
-moz-transform: rotate(45deg);
/* IE */
-ms-transform: rotate(45deg);
/* Opera */
-o-transform: rotate(45deg);
}
#lightbox, #lightbox * {
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}

.lightbox-youtube.img {
    position: relative; display: inline-block;
}
.lightbox-youtube.img::before, .lightbox-youtube.img::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
} 
.lightbox-youtube.img::before {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaGVpZ2h0PSIxMDAlIgogICB2ZXJzaW9uPSIxLjEiCiAgIHZpZXdCb3g9IjAgMCA2OCA0OCIKICAgd2lkdGg9IjEwMCUiCiAgIGlkPSJzdmc2IgogICBzb2RpcG9kaTpkb2NuYW1lPSJ5b3V0dWJlX2J1dHRvbi5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTIuNSAoMjA2MGVjMWY5ZiwgMjAyMC0wNC0wOCkiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEyIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTAiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSI3MzgiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNDgwIgogICAgIGlkPSJuYW1lZHZpZXc4IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSI0LjE3NjQ3MDYiCiAgICAgaW5rc2NhcGU6Y3g9IjM0IgogICAgIGlua3NjYXBlOmN5PSIyNCIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzYiIC8+CiAgPHBhdGgKICAgICBjbGFzcz0ieXRwLWxhcmdlLXBsYXktYnV0dG9uLWJnIgogICAgIGQ9Ik02Ni41Miw3Ljc0Yy0wLjc4LTIuOTMtMi40OS01LjQxLTUuNDItNi4xOUM1NS43OSwuMTMsMzQsMCwzNCwwUzEyLjIxLC4xMyw2LjksMS41NSBDMy45NywyLjMzLDIuMjcsNC44MSwxLjQ4LDcuNzRDMC4wNiwxMy4wNSwwLDI0LDAsMjRzMC4wNiwxMC45NSwxLjQ4LDE2LjI2YzAuNzgsMi45MywyLjQ5LDUuNDEsNS40Miw2LjE5IEMxMi4yMSw0Ny44NywzNCw0OCwzNCw0OHMyMS43OS0wLjEzLDI3LjEtMS41NWMyLjkzLTAuNzgsNC42NC0zLjI2LDUuNDItNi4xOUM2Ny45NCwzNC45NSw2OCwyNCw2OCwyNFM2Ny45NCwxMy4wNSw2Ni41Miw3Ljc0eiIKICAgICBmaWxsPSIjMjEyMTIxIgogICAgIGZpbGwtb3BhY2l0eT0iMC44IgogICAgIGlkPSJwYXRoMiIgLz4KICA8cGF0aAogICAgIGQ9Ik0gNDUsMjQgMjcsMTQgMjcsMzQiCiAgICAgZmlsbD0iI2ZmZiIKICAgICBpZD0icGF0aDQiIC8+Cjwvc3ZnPgo=') center center / auto 4rem no-repeat;
}
.lightbox-youtube.img:hover::before {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaGVpZ2h0PSIxMDAlIgogICB2ZXJzaW9uPSIxLjEiCiAgIHZpZXdCb3g9IjAgMCA2OCA0OCIKICAgd2lkdGg9IjEwMCUiCiAgIGlkPSJzdmc2IgogICBzb2RpcG9kaTpkb2NuYW1lPSJ5b3V0dWJlX2J1dHRvbl9ob3Zlci5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTIuNSAoMjA2MGVjMWY5ZiwgMjAyMC0wNC0wOCkiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEyIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTAiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSI3MzgiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNDgwIgogICAgIGlkPSJuYW1lZHZpZXc4IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSI1LjE3MTY0NTIiCiAgICAgaW5rc2NhcGU6Y3g9IjExLjc2MzM2MyIKICAgICBpbmtzY2FwZTpjeT0iMjQiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc2IiAvPgogIDxwYXRoCiAgICAgY2xhc3M9Inl0cC1sYXJnZS1wbGF5LWJ1dHRvbi1iZyIKICAgICBkPSJNNjYuNTIsNy43NGMtMC43OC0yLjkzLTIuNDktNS40MS01LjQyLTYuMTlDNTUuNzksLjEzLDM0LDAsMzQsMFMxMi4yMSwuMTMsNi45LDEuNTUgQzMuOTcsMi4zMywyLjI3LDQuODEsMS40OCw3Ljc0QzAuMDYsMTMuMDUsMCwyNCwwLDI0czAuMDYsMTAuOTUsMS40OCwxNi4yNmMwLjc4LDIuOTMsMi40OSw1LjQxLDUuNDIsNi4xOSBDMTIuMjEsNDcuODcsMzQsNDgsMzQsNDhzMjEuNzktMC4xMywyNy4xLTEuNTVjMi45My0wLjc4LDQuNjQtMy4yNiw1LjQyLTYuMTlDNjcuOTQsMzQuOTUsNjgsMjQsNjgsMjRTNjcuOTQsMTMuMDUsNjYuNTIsNy43NHoiCiAgICAgZmlsbD0iI2ZmMDAwMCIKICAgICBpZD0icGF0aDIiIC8+CiAgPHBhdGgKICAgICBkPSJNIDQ1LDI0IDI3LDE0IDI3LDM0IgogICAgIGZpbGw9IiNmZmYiCiAgICAgaWQ9InBhdGg0IiAvPgo8L3N2Zz4K') center center / auto 4rem no-repeat;
}
.lightbox-youtube.img::after {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHZpZXdCb3g9IjAgMCAzMTcuMTAwMDEgOTguMDk5OTk4IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ieW91dHViZS5zdmciCiAgIHdpZHRoPSIzMTcuMTAwMDEiCiAgIGhlaWdodD0iOTguMDk5OTk4IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjUgKDIwNjBlYzFmOWYsIDIwMjAtMDQtMDgpIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEyMSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczE5IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMjU2MCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzkxIgogICAgIGlkPSJuYW1lZHZpZXcxNyIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgZml0LW1hcmdpbi10b3A9IjAiCiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIgogICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiCiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAiCiAgICAgaW5rc2NhcGU6em9vbT0iMi43Njg5Mjc4IgogICAgIGlua3NjYXBlOmN4PSI3My43MjIzMDEiCiAgICAgaW5rc2NhcGU6Y3k9IjQ3LjgiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmcxNSIgLz4KICA8ZwogICAgIGlkPSJnMTEiCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTczLC00LjcpIj4KICAgIDxwYXRoCiAgICAgICBkPSJtIDIyNy45LDk5LjcgYyAtMy4xLC0yLjEgLTUuMywtNS4zIC02LjYsLTkuNyAtMS4zLC00LjQgLTEuOSwtMTAuMiAtMS45LC0xNy41IHYgLTkuOSBjIDAsLTcuMyAwLjcsLTEzLjMgMi4yLC0xNy43IDEuNSwtNC41IDMuOCwtNy43IDcsLTkuNyAzLjIsLTIgNy4zLC0zLjEgMTIuNCwtMy4xIDUsMCA5LjEsMSAxMi4xLDMuMSAzLDIuMSA1LjMsNS4zIDYuNyw5LjcgMS40LDQuNCAyLjEsMTAuMyAyLjEsMTcuNiB2IDkuOSBjIDAsNy4zIC0wLjcsMTMuMSAtMi4xLDE3LjUgLTEuNCw0LjQgLTMuNiw3LjYgLTYuNyw5LjcgLTMuMSwyIC03LjMsMy4xIC0xMi41LDMuMSAtNS40LDAuMSAtOS42LC0xIC0xMi43LC0zIHogTSAyNDUuMiw4OSBjIDAuOSwtMi4yIDEuMywtNS45IDEuMywtMTAuOSBWIDU2LjggYyAwLC00LjkgLTAuNCwtOC41IC0xLjMsLTEwLjcgLTAuOSwtMi4zIC0yLjQsLTMuNCAtNC41LC0zLjQgLTIuMSwwIC0zLjUsMS4xIC00LjQsMy40IC0wLjksMi4zIC0xLjMsNS44IC0xLjMsMTAuNyB2IDIxLjMgYyAwLDUgMC40LDguNyAxLjIsMTAuOSAwLjgsMi4yIDIuMywzLjMgNC41LDMuMyAyLjEsMCAzLjYsLTEuMSA0LjUsLTMuMyB6IE0gNDY0LjQsNzIuNyB2IDMuNSBsIDAuNCw5LjkgYyAwLjMsMi4yIDAuOCwzLjggMS42LDQuOCAwLjgsMSAyLjEsMS41IDMuOCwxLjUgMi4zLDAgMy45LC0wLjkgNC43LC0yLjcgMC45LC0xLjggMS4zLC00LjggMS40LC04LjkgbCAxMy4zLDAuOCBjIDAuMSwwLjYgMC4xLDEuNCAwLjEsMi40IDAsNi4zIC0xLjcsMTEgLTUuMiwxNC4xIC0zLjUsMy4xIC04LjMsNC43IC0xNC42LDQuNyAtNy42LDAgLTEyLjksLTIuNCAtMTUuOSwtNy4xIC0zLC00LjcgLTQuNiwtMTIuMSAtNC42LC0yMiBWIDYxLjYgYyAwLjM0LC0xNyAzLjMzLC0yOS40NSAyMC45LC0yOS41IDUuMywwIDkuMywxIDEyLjEsMi45IDIuOCwxLjkgNC44LDQuOSA2LDkgMS4yLDQuMSAxLjcsOS43IDEuNywxNi45IHYgMTEuNyBoIC0yNS43IHogbSAyLC0yOC44IGMgLTAuOCwxIC0xLjMsMi41IC0xLjYsNC43IC0wLjMsMi4yIC0wLjQsMTAgLTAuNCwxMCB2IDQuOSBoIDExLjIgdiAtNC45IGMgMCw0LjkgLTAuMSwtNy43IC0wLjQsLTEwIC0wLjMsLTIuMyAtMC44LC0zLjkgLTEuNiwtNC44IC0wLjgsLTAuOSAtMiwtMS40IC0zLjYsLTEuNCAtMS43LDAuMSAtMi45LDAuNiAtMy42LDEuNSB6IE0gMTkwLjUsNzEuNCAxNzMsOC4yIGggMTUuMyBjIDAsMCA3LjE1LDMxLjcgOS42LDQ2LjYgaCAwLjQgYyAyLjc4LC0xNS44MiA5LjgsLTQ2LjYgOS44LC00Ni42IGggMTUuMyBsIC0xNy43LDYzLjEgdiAzMC4zIEggMTkwLjYgViA3MS40IFoiCiAgICAgICBpZD0icGF0aDYiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0iQSIKICAgICAgIGQ9Im0gMzExLjUsMzMuNCB2IDY4LjMgaCAtMTIgbCAtMS4zLC04LjQgaCAtMC4zIGMgLTMuMyw2LjMgLTguMiw5LjUgLTE0LjcsOS41IC0xMS43NywtMC4wMyAtMTMuMDgsLTEwIC0xMy4yLC0xOC40IHYgLTUxIGggMTUuNCB2IDUwLjEgYyAwLDMgMC4zLDUuMiAxLDYuNSAxLjQyLDIuNzggNS4xLDIuMDcgNy4xLDAuNyBhIDgsOCAwIDAgMCAyLjcsLTMuMSBWIDMzLjQgWiIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Ik0gMzUzLjMsMjAuNiBIIDMzOCB2IDgxLjEgSCAzMjMgViAyMC42IEggMzA3LjcgViA4LjIgaCA0NS41IHYgMTIuNCB6IG0gODcuOSwyMy43IEMgNDQwLjMsNDAgNDM4LjgsMzYuOSA0MzYuNywzNC45IDQzNC42LDMzIDQzMS44LDMyIDQyOC4xLDMyIGEgMTQuMSwxNC4xIDAgMCAwIC03LjksMi40IGMgLTIuNSwxLjYgLTQuMywzLjcgLTUuNyw2LjMgaCAtMC4xIHYgLTM2IGggLTE0LjggdiA5Ni45IGggMTIuNyBsIDEuNiwtNi41IGggMC4zIGEgMTQsMTQgMCAwIDAgNS4zLDUuNSBjIDIuNCwxLjMgNSwyIDcuOSwyIDUuMiwwIDksLTIuNCAxMS41LC03LjIgMi40LC00LjggMy43LC0xMi4zIDMuNywtMjIuNCBWIDYyLjIgYyAwLC03LjYgLTAuNSwtMTMuNiAtMS40LC0xNy45IHogbSAtMTQuMSwyNy45IGMgMCw1IC0wLjIsOC45IC0wLjYsMTEuNyAtMC40LDIuOCAtMS4xLDQuOCAtMi4xLDYgLTEsMS4yIC0yLjMsMS44IC0zLjksMS44IC0zLjEsLTAuMSAtNC44NiwtMS41IC02LjEsLTMuNiBWIDQ5LjMgYyAwLjUsLTEuOSAxLjQsLTMuNCAyLjcsLTQuNiAyLjIsLTIuNDcgNS45NiwtMi41IDcuNywwIDAuOSwxLjIgMS40LDMuMyAxLjgsNi4yIDAuMywyLjkgMC41LDcgMC41LDEyLjQgeiIKICAgICAgIGlkPSJwYXRoOSIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmIiAvPgogIDwvZz4KICA8dXNlCiAgICAgeGxpbms6aHJlZj0iI0EiCiAgICAgeD0iNzguOTAwMDAyIgogICAgIGlkPSJ1c2UxMyIKICAgICB5PSIwIgogICAgIHdpZHRoPSIxMDAlIgogICAgIGhlaWdodD0iMTAwJSIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTczLC00LjcpIgogICAgIHN0eWxlPSJmaWxsOiNmZmZmZmYiIC8+Cjwvc3ZnPgo=') calc(100% - 1rem) calc(100% - 1rem) / auto 2rem no-repeat;
}
.lightbox-youtube.img img {
    display: block;
}