@charset "utf-8";



/*-----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
/* Open Sans Normal */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Open Sans Condensed */
@font-face {
    font-family: 'Open Sans Condensed';
    src: url('../fonts/OpenSans_Condensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Condensed';
    src: url('../fonts/OpenSans_Condensed-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Condensed';
    src: url('../fonts/OpenSans_Condensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/*-----------------------------------------------------------------
COLUMNATION
-----------------------------------------------------------------*/
.container12 {
    margin:0 auto;
    padding:0px;
    width:100%;
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	flex-wrap: wrap;
    max-width:1280px;
}
.column12 {
	width:100%;
    display:inline-block;
	position:relative;
	padding:0px 30px 0px 30px;
}

@media only screen and (min-width:1024px) {
    .container12 {
		width:100%;
		padding-right:55px;
		padding-left:55px;
	}
	.column12 {
		padding-left:0px;
		padding-right:0px;
		padding-top:0px;
		padding-bottom:0px;
	}
}



/*-----------------------------------------------------------------
GENERAL AND DEFAULTS
-----------------------------------------------------------------*/
html, body{
    margin:0px;
    padding:0px;
    color: #4E555A;
    background:#FFFFFF;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px; /* 150% */
}
body{
	top:0px !important;
    overflow-y: scroll; /* or auto */
    overflow-x: hidden; /* or auto */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
body::-webkit-scrollbar {
    display: none;
}

*{
    -moz-box-sizing:border-box !important;
    -webkit-box-sizing:border-box !important;
    box-sizing:border-box !important;
}
*:focus{
	outline:none !important;
}
*:focus-visible{
	outline:2px solid #000000 !important;
}

p{
	position:relative;
	z-index:2;
	font-family:inherit;
	color:inherit;
	font-size:inherit;
	font-weight:inherit;
	margin:0px;
}
p + p,
p + ul,
ul + p,
ol + p,
p + ol,
p + ul,
li ul{
	padding:15px 0px 0px 0px;
}
p + h2, p + h3,
ul + h2, ul + h3,
ol + h2, ol + h3, ol + h4, ol + h5{
	padding-top:50px;
}
p + h4, p + h5,
ul + h4, ul + h5{
	padding-top:40px;
}
h2 + h3, h2 + h4, h2 + h5{
	padding-top:10px;
}

h1{
    color: #214C8C;
    font-family: "Open Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 125% */
    letter-spacing: -0.64px;
    text-transform: uppercase;
    margin:0px;
    padding:0px 0px 15px 0px;
}
h2{
    color: #214C8C;
    font-family: "Open Sans";
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 29px; /* 111.538% */
    letter-spacing: -0.26px;
    text-transform: uppercase;
    margin:0px;
    padding:0px 0px 20px 0px;
}
h3{
    color: #214C8C;
    font-family: "Open Sans";
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 29px; /* 111.538% */
    letter-spacing: -0.26px;
    text-transform: uppercase;
    margin:0px;
    padding:0px 0px 20px 0px;
}
h4{
    color: #214C8C;
    font-family: "Open Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 27px; /* 135% */
    margin:0px;
    padding:0px 0px 20px 0px;
}

@media only screen and (min-width: 1024px) {
    html, body{
        font-size: 20px;
        line-height: 28px; /* 140% */
    }
    h1{
        font-size: 88px;
        line-height: 90px; /* 102.273% */
        letter-spacing: -1.76px;
        margin:0px 0px 20px 0px;
    }
    h2{
        font-size: 36px;
        line-height: 40px; /* 111.111% */
        letter-spacing: -0.36px;
    }
    h3{
        font-size: 36px;
        line-height: 40px; /* 111.111% */
        letter-spacing: -0.36px;
    }
    h4{
        font-size: 20px;
        line-height: 27px; /* 135% */
    }
}
	
a.skip {
	display:inline-block;
	padding:10px 14px;
	border-radius: 6px;
	background:#214C8C;
	color: #FFF !important;
	z-index:9999;
	position: absolute;
	top: -1000px;
	left: -1000px;
	text-align: left;
	overflow: hidden;
	font-size:14px;
	font-weight:700;
	line-height:normal;
	width: auto; 
	height: auto; 
}
a.skip:active,  
a.skip:focus, 
a.skip:hover {
	color: #FFF !important;
	overflow: visible; 
	left: 10px; 
	top: 10px;
}

a:link,
a:visited{
	color:#24282b;
	font-weight:700;
	text-decoration:underline;
	transition: all .2s ease-in-out 0s;
}
a:hover,
a:active,
a:focus{
	text-decoration:underline;
	color:#077DAB;
	transition: all .2s ease-in-out 0s;
}

ul,
ol{
	margin:0px;
	padding:0px;
}
ul,
.DARK .dark_override ul{
	list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><circle cx="4" cy="4" r="4" fill="%23214C8C"/></svg>');
}
.DARK ul{
	list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><circle cx="4" cy="4" r="4" fill="%23FFFFFF"/></svg>');
}
ul li,
ol li{
	position:relative;
	margin-left:20px;
	padding-top:10px;
	padding-bottom:0px;
}
ul li{
	padding-left:8px;
}
ul li:first-child,
ol li:first-child{
	padding-top:0px;
}
ul li:last-child,
ol li:last-child{
	padding-bottom:0px;
}

hr{
	width:100%;
	margin:40px 0px 40px 0px;
	padding:0px;
	border:0px;
	height:0px;
	border-bottom:1px solid #214C8C;
}

.large{
    font-size: 22px;
    font-weight: 400;
    line-height: 30px; /* 136.364% */
}

.center{
	text-align:center;
}
.left{
	text-align:left;
}
.right{
	text-align:right;
}


/*-----------------------------------------------------------------
DARK BACKGROUND
-----------------------------------------------------------------*/
.GRAY{
	background: #EBEBEB;
}
.DARKBLUE{
	background: #214C8C;
}
.DARK *:focus-visible{
	outline:2px solid #FFFFFF !important;
}
.DARK, .DARK p, .DARK a, .DARK a:hover, .DARK a:focus, .DARK h1, .DARK h2, .DARK h3, .DARK h4, .DARK h5, .DARK ul, .DARK ol{
	color:#FFF;
}


/*-----------------------------------------------------------------
SPACER
-----------------------------------------------------------------*/
.spacer{
	height:60px;
}
.spacer.half{
	height:30px;
}
.spacer.quarter{
	height:15px;
}


/*-----------------------------------------------------------------
HEADER
-----------------------------------------------------------------*/
.TOP{
    position:fixed;
    z-index:3;
    width:auto;
    height:auto;
    left:0px;
    top:0px;
    padding-top:30px;
}
.TOP img.logo{
    position:relative;
    width:230px;
    height:auto;
}

@media only screen and (min-width: 1024px) {
    .TOP{
        padding-top:50px;
    }
}


/*-----------------------------------------------------------------
INTRO
-----------------------------------------------------------------*/
.main_nav.hide_because_intro_visible{
    opacity:0;
}
.intro{
    opacity:1;
    position:absolute;
    z-index:5;
    display:flex;
    flex-direction:column;
    gap:0px;
    align-items:center;
    justify-content:center;
    height:100dvh;
    width:100%;
    left:0px;
    top:0px;
    padding-top:50px;
}
.intro h1{
    max-width:700px;
}
.intro p{
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 29px; /* 145% */
    max-width:650px;
}

.intro .hand_container{
    text-align:center;
    margin-top:40px;
}
.intro .hand_container img{
    width:70px;
    height:auto;
    animation: hand_sway 1.2s ease-in-out infinite alternate;
}
@keyframes hand_sway {
    from {
        transform: translateX(-10px);
    }
    to {
        transform: translateX(10px);
    }
}
.intro p.hand_instructions{
    color: #FFF;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 157.143% */
    letter-spacing: 1.26px;
    text-transform: uppercase;
    padding-top:5px;
}

a.explore{
    display:none;
    position:relative;
    text-decoration:none;
    padding:10px 50px 10px 28px;
    margin-top:40px;
    border-radius: 8px;
    border: 2px solid #FFF;
    background: rgba(33, 76, 140, 0.34);
    background-blend-mode: multiply;
    backdrop-filter: blur(4px);
    color: #FFF;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
a.explore::after{
    content:"";
    display:inline-block;
    position:absolute;
    right:20px;
    top:0px;
    height:100%;
    width:20px;
    background:url('../images/arrow.svg') center center no-repeat;
    background-size:contain;
    transition:all 0.3s ease-in-out;
}
a.explore:hover::after,
a.explore:focus::after{
    right:15px;
    transition:all 0.3s ease-in-out;
}

#map_wrapper .intro_bg{
    opacity:1;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:3;
    position:absolute;
    background: rgba(33, 76, 140, 0.90);
    mix-blend-mode: multiply;
}

@media only screen and (min-width: 1024px) {
    .intro p{
        font-size: 32px;
        line-height: 44px; /* 137.5% */
    }
    .intro .hand_container{
        display:none;
    }

    a.explore{
        display:inline-block;
        margin-top:55px;
        font-size: 23px;
    }
}

.intro.fade,
#map_wrapper .intro_bg.fade{
    opacity:0;
    transition:opacity 0.4s linear;
}
.intro.off,
#map_wrapper .intro_bg.off{
    display:none !important;
}
@media only screen and (max-width: 1023px) {
    .TOP.fade{
        opacity:0;
        transition:opacity 0.4s linear;
    }
    .TOP.off{
        display:none !important;
    }
}


/*-----------------------------------------------------------------
NAV
-----------------------------------------------------------------*/
ul.main_nav{
    margin:0px;
    padding:0px;
    list-style:none;
    display:flex;
    flex-direction:row;
    flex-shrink:1;
    gap:0px;
    width:100%;
    position:fixed;
    z-index:4;
    left:0px;
    bottom:0px;
    line-height:0px;
    border-top:#D9D9D9;
    background: #214C8C;
    opacity:1;
    transition:opacity 0.4s ease-in-out;
}
ul.main_nav li{
    margin:0px;
    padding:0px;
    height:100%;
    width:100%;
    flex:1;
    position:relative;
}
ul.main_nav li::after{
    height:28px;
    width:1px;
    background:#FFF;
    right:0px;
    position:absolute;
    top:10px;
    z-index:1;
    content:"";
}
ul.main_nav li:last-child::after{
    display:none;
}
ul.main_nav li a{
    text-decoration:none;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:10px;
    color: #86BDE4;
    background: #214C8C;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    line-height: normal;
    height:48px;
    width:100%;
    text-transform:uppercase;
    font-family: 'Open Sans Condensed';
    position:relative;
    z-index:1;
    transition:all 0.3s ease-in-out;
}
ul.main_nav li a img{
    width:auto;
    height:26px;
    transition:all 0.3s ease-in-out;
    filter:brightness(1) invert(0);
}
ul.main_nav li a:hover,
ul.main_nav li a:focus,
ul.main_nav li a.active{
    color:#FFF;
    transition:all 0.3s ease-in-out;
}
ul.main_nav li a:hover img,
ul.main_nav li a:focus img,
ul.main_nav li a.active img{
    filter:brightness(0) invert(1);
    transition:all 0.3s ease-in-out;
}

@media only screen and (min-width: 1024px) {
    ul.main_nav{
        width:auto;
        bottom:50px;
        left:50px;
        border-radius:10px;
        gap:0px;
        overflow:hidden;
        background:#FFF;
        border:1.5px solid #214C8C;
    }
    ul.main_nav li::after{
        display:none;
    }
    ul.main_nav li a{
        padding:0px 25px;
        background: #FFFFFF;
        color:#D9D9D9;
    }
    ul.main_nav li a:hover,
    ul.main_nav li a:focus,
    ul.main_nav li a.active{
        background: #214C8C;
    }

    ul.main_nav li a img{
        filter:saturate(0) brightness(1.2);
    }
}


/*-----------------------------------------------------------------
MAP
-----------------------------------------------------------------*/
#map_wrapper {
    width: 100%;
    height: calc(100dvh - 48px);
    position: fixed;
    z-index:1;
    background: #eee;
    touch-action: none;
    margin:0px;
    padding:0px;
}
#map_wrapper.hide_because_intro_visible {
    height: calc(100vh - 0px);
}
#map_wrapper.shrunk {
    height: calc(100vh - 280px);
}
#map_container {
    position: absolute;
    transform-origin: 0 0;
    cursor: grab;
}
#map_container:active {
    cursor: grabbing;
}
#map_image {
    display: block;
    user-select: none;
    pointer-events: none;
}

.marker {
    opacity:1;
    position: absolute;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.4s linear, transform 0.4s linear, background 0.4s ease-in-out, border 0.4s ease-in-out;
}
.marker.shrunk{
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.4s ease;
}
.marker:focus-visible{
	outline:0px !important;
}
.marker .marker_inner {
    position: absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
    border:1px solid #FFFFFF00;
    transform: scale(1);
    transition: transform 0.15s ease-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.marker:hover .marker_inner,
.marker:focus .marker_inner,
.marker.active .marker_inner{
    background: rgba(0, 61, 166, 0.80);
    border:1px solid #FFFFFFFF;
    transition:all 0.3s ease-in-out;
}
.marker .marker_inner::before{
    position:absolute;
    content:"";
    border:1px solid #FFF;
    border-radius:50%;
    display:inline-block;
    height:50px;
    width:50px;
    opacity:0;
    transition:all 0.3s ease-in-out
}
.marker:hover .marker_inner::before,
.marker:focus .marker_inner::before,
.marker.active .marker_inner::before{
    width:74px;
    height:74px;
    opacity:1;
    transition:all 0.3s ease-in-out
}
.marker .marker_inner img{
    position:absolute;
    display:inline-block;
    width:26px;
    height:auto;
    filter:brightness(1) invert(0);
    transition:all 0.3s ease-in-out
}
.marker:hover .marker_inner img,
.marker:focus .marker_inner img,
.marker.active .marker_inner img{
    filter:brightness(0) invert(1);
    transition:all 0.3s ease-in-out
}

.marker:nth-child(5n+1) .marker_inner{
    animation: pulse1 5s linear infinite 0s;
}
.marker:nth-child(5n+2) .marker_inner{
    animation: pulse1 4.5s linear infinite 0.3s;
}
.marker:nth-child(5n+3) .marker_inner{
    animation: pulse1 4s linear infinite 0.6s;
}
.marker:nth-child(5n+4) .marker_inner{
    animation: pulse2 4.5s linear infinite 0s;
}
.marker:nth-child(5n+5) .marker_inner{
    animation: pulse2 5s linear infinite 0.5s;
}
@keyframes pulse1 {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(0.9); }
    75% { transform: scale(1.1); }
}
@keyframes pulse2 {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    75% { transform: scale(0.9); }
}

@media only screen and (min-width: 1024px) {
    #map_wrapper {
        height: 100dvh;
    }
    #map_wrapper.shrunk {
        height: 100dvh;
        width:calc(100% - 480px);
    }
}

@media only screen and (min-width: 2000px) {
    #map_wrapper.shrunk {
        width:calc(100% - 700px);
    }
}


/*-----------------------------------------------------------------
FILTERS
-----------------------------------------------------------------*/
#product_filters h4{
    text-transform:uppercase;
    padding-bottom:15px;
    font-size: 22px;
    line-height: 28px; /* 127.273% */
}

.filters_list{
    margin:0px;
    padding:0px;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.filters_list li{
    margin:0px;
    padding:0px;
}
.filters_list li a{
    display:flex;
    flex-direction:row;
    justify-content:start;
    align-items:center;
    gap:14px;
    font-weight:400;
    color:#6E6D6D;
    line-height:normal;
    text-decoration:none;
    transition:all 0s ease-in;
}
.filters_list li a:hover,
.filters_list li a:focus{
    color:#214c8c;
    transition:all 0s ease-in;
}
.filters_list li a:hover > span:nth-child(1),
.filters_list li a:focus > span:nth-child(1){
    background: #EBEBEB;
}
.filters_list li a.active > span:nth-child(1){
    background: #214c8c url(../images/Checkbox.svg) center center no-repeat;
    border: 1.5px solid #214c8c;
    background-size:26px;
}
.filters_list li a > span:nth-child(1){
    display:block;
    width:25px;
    height:25px;
    border-radius: 2px;
    border: 1.5px solid #6E6D6D;
    background: #FFF;
}
.filters_list li a > span:nth-child(2){
    display:flex;
    justify-content:start;
    align-items:center;
    flex:1;
}
.filters_list li a > span:nth-child(2) > img{
    width:27px;
    height:27px;
    padding-left:10px;
}

@media only screen and (min-width: 1024px) {
    #product_filters h4{
        font-size: 23px;
        text-transform:uppercase;
        padding-bottom:12px;
    }
}


/*-----------------------------------------------------------------
PRODUCTS CONTENT AREA
-----------------------------------------------------------------*/
.content_area{
    padding:40px 0px 48px 0px;
    position:relative;
    height:auto;
    opacity:0;
    display:block;
    transition:opacity 0.4s;
}
.content_area .content_bg{
    padding:30px 30px 30px 30px;
}

.content_area.off{
    display:none;
}
.content_area.visible{
    opacity:1;
    transition:opacity 0.4s;
}
.content_area.visible_immediately{
    opacity:1;
}

.content_area .heading{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-bottom:10px;
}
.content_area .heading .text{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.content_area .heading .text h2{
    margin:0px;
    padding:0px 0px 10px 0px;
}
.content_area .heading .text .scroll_instructions{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:start;
    gap:10px;
    color: #86BDE4;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    font-style: italic;
    line-height: 14px; /* 107.692% */
    opacity:1;
    transition:opacity 0.3s;
}
.content_area .heading .text .scroll_instructions.hidden{
    opacity:0;
    transition:opacity 0.3s;
}
.content_area .category_tag{
    display: inline-flex;
    flex-direction:row;
    gap:8px;
    align-items:center;
    justify-content:start;
    width:auto;
    border-radius: 8px;
    background: #EBEBEB;
    padding:6px 10px;
    color: #003DA6;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height:normal;
    text-transform: capitalize;
}
.content_area .category_tag img{
    width: 18px;
    height:auto;
}

.content_area .key_benefits{
    font-size: 20px;
    line-height: 29px;
}
.content_area .key_benefits > span{
    font-weight: 700;
    color: #214C8C;
}
.content_area img.content_img{
    border-radius:5px;
    margin-top:20px;
    margin-bottom:20px;
    width:100%;
    height:auto;
}

.content_area a.page_link{
    display:block;
    text-decoration:none;
    width:100%;
    border-radius: 8px;
    padding:10px;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 137.5% */
    text-transform: uppercase;
    border:1.5px solid #FFF;
    color: #FFFFFF;
    background: #FFFFFF00;
}
.content_area a.page_link:hover,
.content_area a.page_link:focus{
    border:1.5px solid #FFF;
    color: #214C8C;
    background: #FFFFFFFF;
}
.content_area a.page_link:first-of-type{
    color: #214C8C;
    background: #FFFFFFFF;
}
.content_area a.page_link:first-of-type:hover,
.content_area a.page_link:first-of-type:focus{
    color: #FFFFFF;
    background: #FFFFFF00;
}

.content_area .responsive_iframe_wrapper {
    position: relative;
    width: 100%;
    padding-top: 65%;
    overflow: hidden;
}
.content_area .responsive_iframe_wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 5px;
}


@media only screen and (max-width: 1023px) {
    .content_area#filters{
        padding-top:32px;
    }
}

@media only screen and (min-width: 1024px) {
    .content_area .heading{
        gap:20px;
    }
    .content_area .heading .text{
        order:2;
    }
    .content_area .heading .text .scroll_instructions{
        display:none;
    }
    .content_area .category_tag_container{
        order:1;
    }

    .content_area .key_benefits_container{
        order: 3;
    }

    .content_area a.page_link{
        font-size: 20px;
        line-height: 22px; /* 110% */
    }
}

@media only screen and (min-width: 1024px) {
    .content_area{
        padding:100px 0px 0px 0px;
    }
    .content_area .content_bg{
        padding:40px 55px 40px 55px;
    }

    .content_area .key_benefits{
        font-size: 22px;
    }
}

@media only screen and (min-width: 2000px) {
    .content_area .content_bg{
        padding:40px 220px 40px 55px;
    }
}


/*-----------------------------------------------------------------
PANEL
-----------------------------------------------------------------*/
#panel{
    position:absolute;
    z-index:3;
    min-height:0px;
    width:100%;
    top:100vh;
    background:#FFF;
    overflow:visible;
    transition:all 0.4s ease-in 0.05s;
}
#panel.visible{
    top:calc(100vh - 280px);
    min-height:100vh;
    transition:all 0.4s ease-out;
}
#panel.off{
    overflow:hidden;
}
#panel::before{
    position:absolute;
    content:"";
    display:inline-block;
    width:100%;
    height:55px;
    top:-55px;
    right:0px;
    background:url(../images/mobile-close-container.svg) right bottom no-repeat;
    background-size:auto 100%;
}
#panel .panel_animator{
    position:relative;
    left:0px;
    top:0px;
    width:100%;
    transition:all 0.4s ease-in-out;
}
#panel.visible .panel_animator{
    transition:all 0.4s ease-in-out;
}

#panel a#close_panel_btn {
    position: absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    width: 45px;
    height: 45px;
    top: -8px;
    right: 6px;
    z-index:3;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.4s linear, transform 0.4s linear, background 0.4s ease-in-out, border 0.4s ease-in-out;
}
#panel a#close_panel_btn.fixed{
    position:fixed;
    top:52px;
}
#panel a#close_panel_btn:focus-visible{
	outline:0px !important;
}
#panel a#close_panel_btn .close_inner {
    position: absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #86BDE4;
    border:1px solid #FFFFFF00;
    transform: scale(1);
    transition: transform 0.15s ease-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
}
#panel a#close_panel_btn:hover .close_inner,
#panel a#close_panel_btn:focus .close_inner{
    background: #003da6;
    border:1px solid #FFFFFFFF;
    transition:all 0.3s ease-in-out;
}
#panel a#close_panel_btn .close_inner::before{
    position:absolute;
    content:"";
    border:1px solid #003da6;
    border-radius:50%;
    display:inline-block;
    height:50px;
    width:50px;
    opacity:0;
    transition:all 0.3s ease-in-out
}
#panel a#close_panel_btn:hover .close_inner::before,
#panel a#close_panel_btn:focus .close_inner::before{
    width:74px;
    height:74px;
    opacity:1;
    transition:all 0.3s ease-in-out
}
#panel a#close_panel_btn .close_inner img{
    position:absolute;
    display:inline-block;
    width:24px;
    height:auto;
    filter:brightness(1) invert(0);
    transition:all 0.3s ease-in-out
}
#panel a#close_panel_btn:hover .close_inner img,
#panel a#close_panel_btn:focus .close_inner img{
    filter:brightness(0) invert(1);
    transition:all 0.3s ease-in-out
}

#panel.visible.show_filters{
    top:0px;
}

@media only screen and (min-width: 1024px) {
    #panel{
        position:absolute;
        height:auto;
        width:0px;
        right:0px;
        top:0px;
        bottom:auto;
        overflow:hidden;
        left:auto;
        min-height:100vh;
    }
    #panel::before{
        display:none;
    }
    #panel.visible{
        top:0px;
        width:480px;
    }
    #panel.visible_immediately{
        min-height:100vh;
    }
    #panel .panel_animator{
        z-index:3;
        top:0px;
        left:0px;
        height:auto;
        width:480px;
    }
    #panel.visible .panel_animator{
        top:0px;
    }
    #panel .panel_animator.visible{
        top:0px;
        right:0px;
    }

    #panel a#close_panel_btn{
        top:55px;
        right:35px;
        width: 60px;
        height: 60px;
    }
    #panel a#close_panel_btn.fixed{
        top:55px;
    }
    #panel a#close_panel_btn .close_inner img{
        width:30px;
    }
}

@media only screen and (min-width: 2000px) {
    #panel.visible{
        top:0px;
        width:700px;
    }
    #panel .panel_animator{
        width:700px;
    }
}