/* Spryker font */

@font-face {
	font-family: Replica ;
	src: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/css/fonts/ReplicaStd-Regular.otf') }}") format("opentype") ; 
    font-weight: 400 ;   
}
@font-face {
	font-family: Replica ;
	src: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/css/fonts/ReplicaStd-Light.otf') }}") format("opentype") ; 
    font-weight: 200  ;
}
@font-face {
	font-family: Replica;
	src: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/css/fonts/Replica-Bold.ttf') }}") format("truetype") ; 
    font-weight: 700  ;
}






BODY, TD, INPUT, TEXTAREA, SELECT
{
font-family: arial, helvetica ;
font-family: Replica, Manrope, sans-serif, "ms sans serif", arial, helvetica ;
}








HTML, BODY
{
}

BODY
{
padding: 0px ;
margin: 0px ;
background-color: #ffffff ; 
color: #1b1f23 ;   /* grey */
color: rgba(27,31,35,0.8) ;   /* grey */
overflow-y: scroll ;
}


DIV, HEADER, FOOTER, SECTION, ARTICLE ,ASIDE, FIGURE, NAV
{
display: block ;
margin: 0px ;
padding: 0px ;
vertical-align: top ;
}


DIV, HEADER, FOOTER, SECTION, ARTICLE, ASIDE, FIGURE, NAV, TD
{
text-align: left ;
vertical-align: top ;
}

IMG
{
border: none ;
-ms-interpolation-mode: bicubic ;
margin: 0px ;
padding: 0px ;
}

HR
{
height: 1px ;
border: none ;
color: #ffffff ;
background-color: #ffffff ;
}

A, 
A:link, 
A:active, 
A:visited,
A:hover
{
color: #1ebea0 ;   /* green */
text-decoration: none ;
cursor: pointer ;
}

A:hover
{
color: #1ebea0 ;   /* green */
}

SECTION P A, SECTION P A:link, SECTION P A:active, SECTION P A:visited, SECTION P A:hover 
{
text-decoration: none ;
color: #1ebea0 ;   /* green */
border-bottom-style: solid ;
border-bottom-width: 1px ;
border-bottom-color: #1ebea0 ;   /* green */

transition-property: color, border-bottom-color ;
transition-duration: 300ms ;
}

SECTION P A:hover 
{
color: #202024 ;   /* darkgrey */
border-bottom-color: rgba(32,32,36,1) ;   /* darkgrey */
}


UL, OL
{
padding-left: 20px ;
}

UL
{
list-style-type: none ;
}

OL
{
list-style-type: decimal ;
}

LI
{
position: relative ;
margin-bottom: 10px ;
line-height: 1.33em ;
}

LI:last-child
{
margin-bottom: 0px ;
}

UL LI,
OL LI
{
padding-left: 8px ;
}

UL LI::before
{
position: absolute ;
top: 0px ;
left: -15px ;
width: auto ;
font-size: 12px ;
font-family: "FontAwesome";
font-weight: 900 ;
font-family: "Font Awesome 6 Pro" ;
font-weight: 300 ;
content: "\2d" ;
}

OL LI::marker
{
font-size: 16px ;
}







NAV
{
margin-top: 0px ;
margin-bottom: 0px ;
}

H1, H2, H3, H4, H5, H6, H7, H8, H9, H10, H11, H12, H13, H14, H15, H16
{
display: block ;
margin-top: 0px ;
margin-bottom: 0px ;
line-height: initial ;
}

H1, H3, H5, H7, H9, H11, H13, H15
{
font-weight: 400 ;
}

H2, H4, H6, H8, H10, H12, H14, H16
{
font-weight: 200 ;
margin-top: 0px ;
}


H1
{
font-size: 60px ;
}

SECTION.intro-sml H1
{
font-size: 45px ;
}

H2
{
font-size: 24px ;
margin-top: 15px ;
}

H3
{
font-size: 50px ;
}

H4
{
margin-top: 4px ;
font-size: 24px ;
}

H5, H15
{
font-size: 36px ;
}

H6, H16
{
margin-top: 4px ;
font-size: 20px ;
}

H7
{
font-size: 28px ;
}

H8
{
font-size: 16px ;
margin-top: 5px ;
}



H9 /* footer */
{
font-size: 16px ;
}

H10
{
font-size:  16px ;
font-weight: 400 ;
text-transform: uppercase ;
letter-spacing: 2px ;
margin-bottom: 30px ;
}


BODY
{
font-size: 18px ;
font-weight: 200 ;
}

B, STRONG
{
font-weight: 400 ;
}

FOOTER
{
font-size: 16px ;
}










/* FRAME + CONTAINER */

MAIN, HEADER > DIV, FOOTER
{
display: block ;
position: relative ;
width: 100% ;
max-width: 1920px ;
margin-left: auto ;
margin-right: auto ;
vertical-align: top ;
}

MAIN
{
min-height: 66vh ;
}

SECTION,
FOOTER
{
padding-top: 0px ;
padding-bottom: 0px ;
padding-left: 0px ;
padding-right: 0px ;
text-align: left ;
}

SECTION > DIV,
FOOTER > DIV,
HEADER > DIV > DIV
{
margin-left: 5% ;
margin-right: 5% ;
}

SECTION > DIV:nth-of-type(1),
FOOTER > DIV:nth-of-type(1),
HEADER > DIV > DIV:nth-of-type(1)
{
margin-left: 10% ;
}

SECTION > DIV,
HEADER > DIV > DIV
{
display: inline-block ; 
width: 35% ;
vertical-align: top ;
}

SECTION > DIV:nth-of-type(2)
{
}

SECTION.c1
{
}

SECTION.c1 > DIV
{
display: inline-block ; 
}

SECTION.c1 > DIV,
FOOTER > DIV
{
width: 80% ;
}

SECTION.colour.c1 > DIV > DIV
{
column-count: 2 ;
column-gap: 12.5% ;
}

SECTION.colour.nosplit.c1
{
text-align: center ;
}

SECTION.colour.nosplit.c1 > DIV
{
max-width: 960px ;
max-width: 800px ;
margin-right: 10% ;
}

SECTION.colour.nosplit.c1 > DIV > DIV
{
column-count: 1 ;
}

SECTION.colour.nosplit.c1 > DIV > DIV P
{
/* display: inline ; */
}

SECTION.c3
{
}

SECTION.c3 > DIV
{
display: inline-block ;
width: 23.3% ;
margin-right: 0px ;
}










/* vertical */

BODY
{
padding-top: 80px ;
}

SECTION, FOOTER
{
padding-top: 80px ;
padding-bottom: 80px ;
}

/* no top padding */

SECTION.ntp
{
padding-top: 0px ;
}

P, UL, OL, .mt, A.cta, SECTION NAV, SECTION.colour > DIV > DIV, SECTION.photo > DIV > DIV
{
margin-top: 40px ;
margin-bottom: 0px ;
}

SECTION.colour > DIV > DIV P:first-child,
SECTION.colour > DIV > DIV UL:first-child,
SECTION.colour > DIV > DIV OL:first-child,
SECTION.photo > DIV > DIV P:first-child,
SECTION.photo > DIV > DIV UL:first-child
SECTION.photo > DIV > DIV OL:first-child
{
margin-top: 0px ;
}

.bmk 
{
position: absolute;
top: -79px;
left: 0px;
}





























/* HEADER */


HEADER 
{
display: block ;
position: fixed ;
width: 100% ;
top: 0px ;
left: 0px ;
z-index: 1000;
}

HEADER > DIV
{
height: 80px ;
background-color: #000000 ;
}

HEADER > DIV > DIV
{
position: relative ;
}

HEADER > DIV > DIV:nth-of-type(1) 
{
width: 40% ;
margin-right: 0px ;  
}

HEADER > DIV > DIV:nth-of-type(2) 
{
text-align: right ;
}





/* logo */

#logo
{
display: inline-block ;
margin-top: 10px ;
color: #ffffff ; 
font-size: 32px ;
font-weight: 700 ;
opacity: 0 ;

transition-property: opacity ;
transition-duration: 300ms ;
transition-timing-function: ease-in-out ;
}

header.scroll #logo
{
opacity: 1 ;
}

#logo > div
{
width: 123px ;
height: 60px ;
}


/* header  - customer + partner logo */

HEADER FIGURE
{
position: relative ;
display: inline-block ; 
margin-top: 15px ;
margin-left: 0px ;
width: 0px ;
height: 0px ;
opacity: 0 ;
background-position: left center ;
background-repeat: no-repeat ;
background-size: 100% ;

transition-property: opacity ;
transition-delay: 0ms ;
transition-duration: 300ms ;
transition-timing-function: ease-in-out ;
}

HEADER FIGURE.cpl
{
margin-left: 50px ;
width: 123px ;
height: 50px ;
}

HEADER FIGURE.cpl::before
{
position: absolute ;
top: 20px ;
left: -33px ;
display: inline-block ;
height: 15px ;
width: 15px ;  
background-position: 50% 50% ;
background-repeat: no-repeat ;
background-size: 100% auto ;
content: "" ;
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-x.svg') }}") ;
}

header.scroll FIGURE.cpl
{
transition-delay: 300ms ;
opacity: 1 ;
}



/* H navigatie */

HEADER NAV
{
display: inline-block ;
margin-top: 15px ;
text-align: right ;
overflow: hidden ;
}

HEADER NAV A, 
HEADER NAV A:link, 
HEADER NAV A:active, 
HEADER NAV A:visited, 
HEADER NAV A:hover
{
display: inline-block ;
position: relative ;
color: rgba(234,237,240,0.55) ;   /* lightgrey */
font-size: 14px ;
font-weight: 400 ;
white-space: nowrap ;

text-align: center ;
text-decoration: none;
cursor: pointer ;
margin: 0px ;

line-height: 20px ;
padding-top: 15px ;
padding-bottom: 15px ;
padding-left: 0px ;
padding-right: 3px ;

margin-left: 0px ;
margin-right: 30px ;

overflow: hidden ;
z-index: 1 ;
border: 0px ;

transition-property: color ;
transition-duration: 300ms ;
transition-delay: 0ms ;
transition-timing-function: ease-in-out ;
}

HEADER NAV A#navtoc,
HEADER NAV A#navabu
{
display: none ;
}

HEADER NAV A:last-of-type
{
margin-right: 0px !important ;
}

HEADER NAV A:hover 
{
color: rgba(255,255,255,1) ;   /* white */
}

HEADER NAV A:hover  /* hover on */
{
}

HEADER NAV A.sel   /* selected */
{
}

HEADER NAV A::before 
{
display: block;
position: absolute;
bottom: 10px;
left: -100%;
height: 2px;
width: 100%;
background-color: #ffffff ;
z-index: 1;
content: " ";
transition-property: left, background-color ;
transition-duration: 200ms ;
transition-timing-function: ease-in-out ;
}

HEADER NAV A:hover::before, HEADER NAV A.sel::before 
{
left: 0px;
}

HEADER NAV A:hover::before 
{
background-color: #ffffff ;
}







/* mob menu */

HEADER NAV:nth-of-type(2)
{
display: none ;
}






































/* SECTION GENERAL */


SECTION
{
background-color: #ffffff ;   /* white */
color: #202024 ;   /* darkgrey */
position: relative ;
overflow: hidden ;
line-height: 1.5em ;
}
















/* SECTION TYPES */


/* INTRO */


SECTION.intro H1 B
{
font-style: normal ;
font-weight: 700 ;
color: #1ebea0 ;   /* green */
}

.logo-intro
{
display: block ;
width: 216px ;
height: 88px ;
}

.logo-intro.cpl
{
height: auto ;
text-align: center ;
}

.logo-intro.cpl IMG
{
display: inline-block ;
}

.logo-intro.cpx
{
height: 24px ;
padding-top: 12% ;
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-x.svg') }}") ;
background-position: 50% 45%;
background-repeat: no-repeat ;
background-size: 12% auto ;
}






/* INTRO IMG */

SECTION.intro-img
{
background-color: #000000 ;
color: #ffffff ;
min-height: 40vh ;
}

SECTION.intro-img H1 B
{
font-style: normal ;
font-weight: 700 ;
color: #1ebea0 ;   /* green */
}

SECTION.intro-img > DIV
{
width: 30% ;
margin-right: 10% ;
}

SECTION.intro-img > DIV > DIV
{
margin-top: 40px ;
}

SECTION.intro-img FIGURE
{
display: block ;
position: absolute ;
background-color: #202024 ;   /* darkgrey */
top: 0px ;
right: 0px ;
width: 50% ;
height: 100% ;
background-position: right top ;
background-repeat: no-repeat;
background-size: cover ;
}

SECTION.intro-img FIGURE SPAN
{
display: block ;
position: absolute ;
width: 50.416667% ;
height: 100% ;
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/header-overlay.png') }}") ;
background-position: top left ;
background-repeat: repeat-y;
background-size: 100% ;
}










/* INTRO SMALL */

SECTION.intro-sml
{
background-color: #202024 ;   /* darkgrey */
color: #ffffff ;
}

SECTION.intro-sml > DIV:nth-of-type(1)
{
width: 60% ;
margin-right: 0px ;
}

SECTION.intro-sml > DIV:nth-of-type(2)
{
width: 15% ;
text-align: center ;
}

SECTION.intro-sml SPAN
{
position: absolute ;
top: 0px ;
left: 0px ;
width: 100% ;
height: 100% ;
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-img-overlay.svg') }}"); 
background-position: bottom right ; 
background-size: auto 100% ;
background-repeat: no-repeat ;
}

SECTION.intro-sml .logo-intro
{
display: inline-block ;
}

SECTION.intro-sml .logo-intro.cpx
{
padding-top: 18% ;
background-size: 10% auto ;
}











/* INTRO TEXT */

SECTION.intro-txt
{
min-height: initial ;
}


















/* SEC COLOUR */

SECTION.colour 
{
}

SECTION.colour FIGURE
{
position: absolute ;
top: 0px ;
right: 0px ;
width: 50% ;
height: 100% ;
max-height: 1080px ;
text-align: center ;
vertical-align: middle ;
background-position: center center ;
background-repeat: no-repeat ;
background-size: cover ;
}

SECTION.colour > DIV > p:nth-child(1) 
{
margin-top: 0px ;
}

SECTION.colour.vertalign-top > DIV { vertical-align: top ; }
SECTION.colour.vertalign-middle  > DIV { vertical-align: middle ; }
SECTION.colour.vertalign-bottom  > DIV { vertical-align: bottom ; }

SECTION.colour DIV.grphc
{
text-align: center ; 
}

SECTION.colour DIV.grphc IMG
{
width: 100% ; 
}



/*mirror */

SECTION.colour.mirror > DIV 
{
margin-left: 55% ;
}

SECTION.colour.mirror > FIGURE
{
left: 0px;
right: auto ;
}

















/* SEC ABOUT */

SECTION.about
{
margin-top: 14vh ;
overflow: visible ;
}

SECTION.about::before
{
position: absolute ;
top: -5vh ;
margin-left: 25% ;
display: block ;
width: 50% ;
z-index: 2 ;
content: "" ;
}

SECTION.about FIGURE
{
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/about-spryker.jpg') }}"); 
background-position: top right; 
background-size: 100% auto ;
}


















/* SEC ATTENTION */

SECTION.attention
{
}

SECTION.attention H3,
SECTION.attention H5
{
display: inline-block ;
position: absolute ;
top: -22px ;
left: -2px ;
padding-right: 40px ;
padding-bottom: 20px ;
color: #1ebea0 ;   /* green */
}

SECTION.attention SPAN
{
display: block ;
position: relative ;
border: 2px solid #1ebea0 ;   /* green */
width: 100% ;
padding-top: 0px ;
padding-left: 0px ;
padding-right: 0px ;
padding-bottom: 0px ;
max-width: 956px ;
max-width: 796px ;
margin-top: 20px ;
margin-left: auto;
margin-right: auto;
border-radius: 20px ;
font-weight: 200 ;
}

SECTION.attention P,
SECTION.attention UL
{
margin-top: 55px ;
margin-left: 40px ;
margin-right: 40px ;
margin-bottom: 40px ;
}

SECTION.attention.att-nh SPAN P,
SECTION.attention.att-nh SPAN UL
{
margin-top: 42px ;
}

SECTION.attention.green H3,
SECTION.attention.green H5,
SECTION.attention.orange H3,
SECTION.attention.orange H5
{
color: #ffffff ;   /* white */
}

SECTION.attention.green SPAN,
SECTION.attention.orange SPAN
{
border-color: #ffffff ;   /* white */
}














/* SEC TRILOGY */

SECTION.trilogy
{
text-align: left ;
text-align: center ;
}

SECTION.trilogy > DIV
{
display: inline-table ;
margin-right: 10% ;
}

SECTION.trilogy > DIV > DIV
{
display: table-cell ;
width: 33% ;
padding-left: 6% ;
padding-right: 6% ;
border-left: 1px solid #ffffff ;
}

SECTION.trilogy.white > DIV > DIV,
SECTION.trilogy.lightgrey > DIV > DIV
{
border-left: 1px solid #202024 ;   /* darkgrey */
}

SECTION.trilogy > DIV > DIV:nth-of-type(1)
{
border-left: 0px none rgba(0,0,0,0) ;
}

SECTION.trilogy UL
{
}

SECTION.trilogy LI
{
padding-left: 20px ; 
}

SECTION.trilogy UL LI::before
{
color: #1ebea0 ;   /* green */
font-size: 20px ;
content: "\f00c" ;
}

SECTION.trilogy.green UL LI::before
{
color: #202024 ;   /* darkgrey */
}

SECTION.trilogy.trilogy-c2
{
}

SECTION.trilogy.trilogy-c2 > DIV
{
max-width: 800px ;
}

SECTION.trilogy.trilogy-c2 > DIV > DIV
{
width: 50% ;
padding-left: 11.52% ;
padding-right: 11.52% ;
}

SECTION.trilogy.trilogy-c2 > DIV > DIV:nth-child(1)
{
padding-left: 0px ;
}

SECTION.trilogy.trilogy-c2 > DIV > DIV:nth-child(2)
{
padding-right: 0px ;
}












/* SEC QUOTE */

SECTION.quote
{
}

SECTION.quote blockquote
{
display: block ;
position: relative ;
width: 75% ;
max-width: 960px ;
max-width: 800px ;
margin-top: 20px ;
margin-left: auto;
margin-right: auto;
font-size: 32px ;
font-weight: 700 ;
line-height: 1.5em ;
}

SECTION.quote.quote-long blockquote
{
font-size: 120% ;
}

SECTION.quote blockquote A, 
SECTION.quote blockquote A:link, 
SECTION.quote blockquote A:active, 
SECTION.quote blockquote A:visited,
SECTION.quote blockquote A:hover
{
text-decoration: none ;
color: #ffffff ;
}

SECTION.quote blockquote I
{
display: block ;
margin-top: 3px ;
font-style: normal ;
font-size: 20px ;
line-height: initial ;
font-weight: 200 ;
}

SECTION.quote blockquote I:nth-of-type(1)
{
margin-top: 10px ;
}

SECTION.quote blockquote I:nth-of-type(2)
{
font-size: 15px ;
}

SECTION.quote blockquote::before,
SECTION.quote blockquote::after,
SECTION.quote-dark blockquote FIGURE::after
{
font-family: "FontAwesome";
font-weight: 900 ;
font-family: "Font Awesome 6 Pro" ;
font: var(--fa-font-sharp-solid);

display: block ;
position: absolute ;
top: 0px ;
left: 0px ;
color: rgba(30,190,160,1) ;   /* green */
font-size: 70px ;
font-weight: 900 ;
z-index: 0 ;

content: "\f10d" ;
}

SECTION.quote blockquote::after
{
top: auto ;
left: auto ;
bottom: 0px ;
right: 0px ;
content: "\f10e" ;
}


/* SEC QUOTE DARK */

SECTION.quote-dark
{
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-shape-01.svg') }}"); 
background-position: bottom left ; 
background-size: 100% auto ;
background-repeat: no-repeat ;
}

SECTION.quote-dark blockquote::before,
SECTION.quote-dark blockquote::after,
SECTION.quote-dark blockquote FIGURE::after
{
color: rgba(30,190,160,0.66) ;   /* green */
}

SECTION.quote-dark blockquote::before
{
top: -20px ;
left: -90px ;
}

SECTION.quote-dark blockquote::after
{
display: none ;
content: none ;
}

SECTION.quote-dark blockquote FIGURE
{
position: relative ;
display: inline ;
margin-left: 8px;
}

SECTION.quote-dark blockquote FIGURE::after
{
display: block ;
font-size: 20px ;
content: "\f10e" ;
}




/* SEC QUOTE LIGHT */

SECTION.quote-light
{
}

SECTION.quote-light blockquote A, 
SECTION.quote-light blockquote A:link, 
SECTION.quote-light blockquote A:active, 
SECTION.quote-light blockquote A:visited,
SECTION.quote-light blockquote A:hover
{
color: #202024 ;   /* darkgrey */
}


SECTION.quote-light blockquote
{
text-align: center ;
border-top: 2px solid #1ebea0 ;   /* green */
border-bottom: 2px solid #1ebea0 ;   /* green */
padding-top: 4% ;
padding-bottom: 4% ;
}

SECTION.quote-light blockquote::before,
SECTION.quote-light blockquote::after
{
left: 42% ;
display:inline-block ;
background-color: #ffffff ;
text-align: center ;
width: 16% ;
}

SECTION.quote-light blockquote::before
{
top: -45px ;
}

SECTION.quote-light blockquote::after
{
top: auto ;
bottom: -45px ;
right: auto ;
}















/* SEC TOC */

SECTION.toc 
{
}

SECTION.toc UL,
SECTION.toc UL LI
{
margin-top: 0px ;
margin-left: 0px ;
margin-right: 0px ;
margin-bottom: 0px ;
padding-top: 0px ;
padding-left: 0px ;
padding-right: 0px ;
padding-bottom: 0px ;
}

SECTION.toc UL 
{
list-style: none ;
}

SECTION.toc UL LI
{
display: block ;
position:relative ;
margin-top: 12px ;
padding-left: 0px ;
line-height: 24px ;
font-weight: 400 ;
}

SECTION.toc LI A, 
SECTION.toc LI A:link, 
SECTION.toc LI A:active, 
SECTION.toc LI A:visited, 
SECTION.toc LI A:hover 
{
text-decoration: none ;
color: #202024 ;   /* darkgrey */
border-bottom-style: solid ;
border-bottom-width: 1px ;
border-bottom-color: rgba(0,0,0,0) ;

transition-property: color, border-bottom-color ;
transition-duration: 300ms ;
}

SECTION.toc LI A:hover 
{
color: #1ebea0 ;   /* green */
/* border-bottom-color: #1ebea0 ; */
}

SECTION.toc UL LI::before
{
display: none ;
}

SECTION.toc UL LI.lvl2
{
padding-left: 0px ;
font-size: 16px ;
font-weight: 300 ;
}

SECTION.toc UL LI.part
{
}

SECTION.toc UL LI.part::before
{
}

SECTION.toc LI B 
{
position: absolute ;
left: 0px ;
display: inline-block ;
min-width: 120px ; 
text-transform: uppercase ;
letter-spacing: 1px;
font-weight: 200 ;
font-size: 92% ;
}

SECTION.toc LI B::after
{
content: ""
}

SECTION.toc UL LI.part
{
padding-left: 120px ;
}



































/* SEC PHOTO */

SECTION.photo
{
text-align: left ;
background-position: center center ;
background-repeat: no-repeat;
background-size: cover ;
min-height: 40vh ;
}

SECTION.photo > DIV
{
background-color: #ffffff ;   /* white */
position: relative;
margin-top: 0px ;
margin-left: 0px ;
margin-right: auto ;
margin-bottom: 10vh ;
width: 35% ;
max-width: 672px ;
font-weight: 200 ;
padding-top: 40px ;
padding-left: 10% ;
padding-right: 5% ;
padding-bottom: 40px ;
border-top-right-radius: 20px ;
border-bottom-right-radius: 20px ;
z-index: 10 ;
}

/* overlay */

SECTION.photo SPAN
{
position: absolute ;
top: 0px ;
left: 0px ;
width: 100% ;
height: 100% ;
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-img-overlay.svg') }}"); 
background-position: bottom right ; 
background-size: auto 100% ;
background-repeat: no-repeat ;
}

/* mirror */

SECTION.photo.mirror
{
text-align: right ;
}

SECTION.photo.mirror > DIV
{
margin-left: auto ;
margin-right: 0px ;
padding-left: 5% ;
padding-right: 10% ;
border-top-right-radius: 0px ;
border-bottom-right-radius: 0px ;
border-top-left-radius: 20px ;
border-bottom-left-radius: 20px ;
}

SECTION.photo.mirror SPAN
{
transform: rotate(180deg)
}


/* half */

SECTION.photo.half 
{
}

SECTION.photo.half FIGURE
{
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

SECTION.photo.half > DIV
{
background-color: #eaedf0 ;   /* lightgrey */
margin-left: 50% ;
width: 25% ;
}

/* half mirror */

SECTION.photo.half.mirror
{
text-align: left ;
}

SECTION.photo.half.mirror FIGURE
{
left: auto ;
right: 0px;
}

SECTION.photo.half.mirror > DIV
{
margin-left: 10% ;
}

SECTION.photo.half.mirror SPAN
{
transform: rotate(0deg)
}











/* VIDEO IMAGE */

FIGURE.vid,
SECTION.vid
{
cursor: pointer ;
}

FIGURE.vid::before,
SECTION.vid::before
{
position: absolute ;
display: block  ;
position: absolute ;
top: 0px ;
left: 0px ;
width: 100% ;
height: 100% ;
background-color: rgba(0,0,0,0) ;
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-circle.svg') }}"); 
background-position: 50% 50% ; 
background-size: 12% auto ;
background-repeat: no-repeat ;
content: "" ;
z-index: 1 ;
opacity: 0.75 ;

transition-property: opacity, background-color ;
transition-duration: 300ms ;
transition-timing-function: ease-in-out ;
}

FIGURE.vid:hover::before,
SECTION.vid:hover::before
{
background-color: rgba(0,0,0,0.3) ;
opacity: 1 ;
}

FIGURE.vid::after,
SECTION.vid::after
{
position: absolute ;
display: block  ;
position: absolute ;
top: 0px ;
left: 0px ;
width: 100% ;
height: 100% ;
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-play.svg') }}"); 
background-position: 50.85% 50% ; 
background-size: 6% auto ;
background-repeat: no-repeat ;
content: "" ;
opacity: 1 ;
z-index: 2 ;
}


/* photo vid */

SECTION.vid::before
{
background-size: 6% auto ;
}

SECTION.vid::after
{
background-size: 3% auto ;
background-position: 50.425% 50% ; 
}




















/* SEC GRAPHIC */

SECTION.graphic 
{
text-align: center ;
}


SECTION.graphic IMG
{
display: inline-block  ;
width: 60% ;
max-width: 960px ;
max-width: 800px ;
}




















/* SEC CTAS */

SECTION.ctas 
{
padding-top: 4% ;
padding-bottom: 4% ;
background-color: rgba(32,32,36,1) ;   /* darkgrey */
color: #ffffff ;   /* white */

transition-property: background-color ;
transition-duration: 300ms ;
transition-timing-function: ease-in-out ;
}

A:hover SECTION.ctas
{
background-color: rgba(0,0,0,1) ;
}


SECTION.ctas > DIV
{
display: table ;
}

SECTION.ctas > DIV > DIV
{
display: table-cell ;
position: relative ;
}

SECTION.ctas > DIV > DIV:nth-of-type(1)
{
width: 5% ;
min-width: 60px ;
}

SECTION.ctas FIGURE
{
position: absolute ;
top: -16% ;
left: -5% ;
width: 100% ;
height: 100% ;
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-ctas.svg') }}") ;
background-position: 20% 50% ;
transform: rotate(45deg) ;
background-repeat: no-repeat ;
background-size: 50% auto ;
}

SECTION.ctas > DIV > DIV:nth-of-type(2)
{
font-size: 125% ;
font-weight: 400 ;
}

SECTION.ctas > DIV > DIV:nth-of-type(2) B
{
display: block ;
margin-top: 4px ;
color: #1ebea0 ;   /* green */
}





















/* SEC TABLE */

SECTION.table
{
}

SECTION.table > DIV
{
text-align: center  ;
}

.tbl
{
display: table ;
width: auto ;
margin-left: auto ;
margin-right: auto ;
min-width: 62.5% ;
min-width: 800px ;
}

.tbl > DIV
{
display: table-row ;
}

.tbl > DIV:nth-of-type(odd)
{
background-color: rgba(234,237,240,1) ;   /* lightgrey */
}

.tbl > DIV > DIV
{
display: table-cell ;
padding-top: 10px ;
padding-left: 15px ;
padding-right: 21px ;
padding-bottom: 10px ;
border-bottom: 1px solid #202024 ;   /* darkgrey */
max-width: 800px ;
max-width: 800px ;
position: relative ;
text-align: left ;
vertical-align: top ;
}

.tbl > DIV > DIV:last-of-type
{
padding-right: 15px ;
}

.tbl > DIV > DIV::after
{
display: block ;
position: absolute ;
top: 0px ;
right: 0px ;
height: 100% ;
height: calc(100% + 1px) ;
width: 6px ;
background-color: #ffffff ;
content: " " ;
}

.tbl > DIV > DIV:last-of-type::after
{
display: none;
}

.tbl > DIV > DIV > SPAN
{
display: none ;
}

.tbl.ac1 > DIV > DIV:nth-of-type(1) { text-align: center ; }
.tbl.ac2 > DIV > DIV:nth-of-type(2) { text-align: center ; }
.tbl.ac3 > DIV > DIV:nth-of-type(3) { text-align: center ; }
.tbl.ac4 > DIV > DIV:nth-of-type(4) { text-align: center ; }
.tbl.ac5 > DIV > DIV:nth-of-type(5) { text-align: center ; }

.tbl.ar1 > DIV > DIV:nth-of-type(1) { text-align: right ; }
.tbl.ar2 > DIV > DIV:nth-of-type(2) { text-align: right ; }
.tbl.ar3 > DIV > DIV:nth-of-type(3) { text-align: right ; }
.tbl.ar4 > DIV > DIV:nth-of-type(4) { text-align: right ; }
.tbl.ar5 > DIV > DIV:nth-of-type(5) { text-align: right ; }



/* table header column */

.tbl.tbl-hc1 > DIV > DIV:nth-of-type(1)
{
font-weight: 700 ;
}

.tbl.tbl-hc2 > DIV > DIV:nth-of-type(1)
{
font-weight: 700 ;
background-color: #202024 ;   /* darkgrey */
color: #ffffff ;
border-bottom: 1px solid #ffffff ;
}


/* table header row */

.tbl.tbl-hr1 > DIV:nth-of-type(1) > DIV,
.tbl.tbl-hr2 > DIV:nth-of-type(1) > DIV
{
font-weight: 700 ;
vertical-align: middle ;
}

.tbl.tbl-hr1 > DIV:nth-of-type(odd)
{
background-color: rgba(234,237,240,0) ;   /* lightgrey */
}

.tbl.tbl-hr1 > DIV:nth-of-type(even)
{
background-color: rgba(234,237,240,1) ;   /* lightgrey */
}

.tbl.tbl-hr1 > DIV:nth-of-type(1) > DIV
{
background-color: rgba(255,255,255,0) ;   /* white */
color: #202024 ;   /* darkgrey */
border-bottom: 1px solid #202024 ;   /* darkgrey */
}

.tbl.tbl-hr2 > DIV:nth-of-type(1)
{
background-color: #202024 ;   /* darkgrey */
color: #ffffff ;
}


/* table header row + col */

.tbl.tbl-hr1.tbl-hc1 > DIV:nth-of-type(1) > DIV,
.tbl.tbl-hr1.tbl-hc2 > DIV:nth-of-type(1) > DIV,
.tbl.tbl-hr2.tbl-hc1 > DIV:nth-of-type(1) > DIV,
.tbl.tbl-hr2.tbl-hc2 > DIV:nth-of-type(1) > DIV
{
font-size: 114% ;
}

.tbl.tbl-hr2.tbl-hc2 > DIV:nth-of-type(1) > DIV:nth-of-type(1)
{
/* background-color: #ffffff ;  */
/* background-color: rgba(234,237,240,0.5) ; */
/* background-color: rgba(30,190,160,1) ; */
/* color: #202024 ; */
}

.tbl.tbl-hr2.tbl-hc2 > DIV:not(:nth-of-type(1)) > DIV:nth-of-type(1)
{
background-color: rgba(32,32,36,0.78) ;   /* darkgrey */
}

.tbl.tbl-hr2.tbl-hc2 > DIV:nth-of-type(1) > DIV
{
border-bottom: 1px solid #ffffff ;
}
























/* SEC LINK */

SECTION.link 
{
}


SECTION.link NAV
{
display: block ;
margin-top: 6% ;
}





















/* SEC LOGOS */

SECTION.logos
{
}

SECTION.logos > DIV
{
text-align: center ;
}

SECTION.logos FIGURE
{
display: inline-block ;
position: relative ;
width: 15% ;
padding-top: 15% ;
margin-left: 2% ;
margin-right: 2% ;
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-pp-logos.svg') }}") ;
background-position: 50% 50% ;
background-repeat: no-repeat ;
background-size: 100% auto ;
}

SECTION.logos FIGURE SPAN
{
position: absolute ;
top: 0px ;
left: 0px ;
width: 100% ;
height: 100% ;
background-position: 50% 50% ;
background-repeat: no-repeat ;
background-size: 80% auto ;
}

SECTION.logos-casc FIGURE
{
margin-left: 0px ;
margin-right: 0px ;
}

SECTION.logos-casc FIGURE:nth-of-type(even)
{
margin-top: 8% ;
}

























/* SEC TIMELINE */

SECTION.timeline
{
}

SECTION.timeline > DIV
{
}

SECTION.timeline FIGURE
{
position: relative ;
height: 301px ;
margin-top: 6% ;
margin-left: 50px ;
margin-right: 50px ;
}

SECTION.timeline FIGURE:nth-child(1)
{
margin-top: 0px ;
}

SECTION.timeline FIGURE::before
{
display: block ;
position: absolute ;
bottom: 50% ;
left: -50px ;
width: calc(100% + 100px) ;
background-color: #ffffff ;
height: 1px ;
z-index: 1;
content: " ";
}

SECTION.timeline FIGURE DIV
{
display: inline-block ;
position: absolute ;
top: 0px ;
left: 0px ;
text-align: center ;
vertical-align: top ;
width: 100px ;
height: 150px ;
}

SECTION.timeline FIGURE DIV:before
{
display: block ;
position: absolute ;
bottom: -6px ;
left: 50% ;
left: calc(50% - 6px) ;
height: 12px ;
width: 12px ;
background-color: #1ebea0 ;   /* green */
transform: rotate(45deg) ;
z-index: 20;
content: " ";
}

SECTION.timeline FIGURE DIV:nth-of-type(even):before
{
bottom: auto ;
top: -6px ;
}


SECTION.timeline FIGURE DIV:after
{
display: block ;
position: absolute ;
bottom: 0px ;
left: 50% ;
height: 36px ;
width: 1px ;
border-left: 1px dashed #ffffff ;
z-index: 10;
content: " ";
}

SECTION.timeline FIGURE DIV:nth-of-type(even):after
{
bottom: auto ;
top: 0px ;
}



SECTION.timeline FIGURE DIV:nth-of-type(even)
{
top: auto ;
bottom: 0px ;
vertical-align: bottom ;
}

SECTION.timeline FIGURE DIV I,
SECTION.timeline FIGURE DIV SPAN
{
position: absolute ;
left: 0px ;
width: 100% ;
text-align: center ;
}

SECTION.timeline FIGURE DIV I
{
display: block ;
top: 20px ;
font-style: normal ;
font-family: "FontAwesome";
font-weight: 900 ;
font-family: "Font Awesome 6 Pro" ;
font-weight: 200 ;
font-size: 40px ;
content: "\f0a1" ;
}

SECTION.timeline FIGURE DIV:nth-of-type(even) I
{
top: auto ;
bottom: 20px ;
}

SECTION.timeline FIGURE DIV SPAN
{
display: table ;
top: 60px ;
height: 40px ;
overflow: hidden ;
font-size: 13px ;
line-height: initial ;
}

SECTION.timeline FIGURE DIV:nth-of-type(even) SPAN
{
top: auto ;
bottom: 60px ;
}

SECTION.timeline FIGURE DIV SPAN B
{
font-weight: 200 ;
}

SECTION.timeline FIGURE DIV SPAN > B
{
display: table-cell ;
vertical-align: middle ;
}

SECTION.timeline FIGURE DIV SPAN > B > B
{
display: inline ;
}


/* bg edits */

SECTION.timeline.green FIGURE DIV:before
{
background-color: #494c4f ;   /* grey */
}

SECTION.timeline.orange FIGURE DIV:before
{
background-color: #202024 ;   /* darkgrey */
}

SECTION.timeline.white FIGURE::before
{
background-color: #202024 ;   /* darkgrey */
}

SECTION.timeline.white FIGURE DIV:after
{
border-left: 1px dashed #202024 ;   /* darkgrey */
}
































/* SEC FORM */

SECTION.form
{
}

SECTION.form INPUT
{
margin-bottom: 12px ;
}

SECTION.form INPUT, 
SECTION.form TEXTAREA, 
SECTION.form SELECT 
{
display: block;
width: 93%;
max-width: 600px ;  
background-color: #ffffff ;
border: 1px solid rgba(73,76,79,0.25) ;   /* grey */
border-radius: 6px;
padding-top: 10px;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 10px;
font-size: 15px ;
font-weight: 200;
transition-property: border;
transition-duration: 300ms;
}

SECTION.form INPUT:focus, 
SECTION.form TEXTAREA:focus, 
SECTION.form SELECT:focus 
{
border: 1px solid rgba(73,76,79,0.5) ;   /* grey */
outline: -webkit-focus-ring-color auto 0px;
}


SECTION.form INPUT[type="button"], 
SECTION.form INPUT[type="submit"], 
SECTION.form INPUT[type="reset"]
{
display: inline-block;
position: relative;
overflow: hidden ;
background-color: #1ebea0 ;   /* green */
border: 0px solid rgba(0,0,0,0) ;
color: #ffffff ;
width: auto ;
max-width: initial ;
text-decoration: none;
padding-top: 9px;
padding-left: 17px;
padding-right: 18px;
padding-bottom: 7px;
border-radius: 6px;
line-height: 22px ;
font-size: 80% ;
font-weight: 400 ;
letter-spacing: 0.5px;
text-align: left ;
text-transform: uppercase ;
cursor: pointer ;

transition-property: background-color, color ;
transition-duration: 300ms, 360ms ;
transition-timing-function: ease-in-out ;
}

SECTION.form INPUT[type="button"]:hover, 
SECTION.form INPUT[type="submit"]:hover, 
SECTION.form INPUT[type="reset"]:hover
{
background-color: rgba(73,76,79,1) ;   /* grey */
}



SECTION.form .invalid
{
display: inline-block ;
padding: 4px 10px ;
margin-bottom: 10px ;
background-color: rgba(235,85,60,0.1) ;   /* orange */
color: #eb553c ;   /* orange */
border-radius: 6px ;
font-size: 15px ;
font-weight: 200;
}


SECTION.form .form-password
{
display: inline-block ;
width: 100% ;
max-width: 360px ;
}

























/* SUB PAGES OVERVIEW */


.overview
{
}

.overview-all
{
min-height: 120vh ;
}

.overview NAV
{
display: block ;
margin-top: 5% ;
text-align: left ;
}

.overview NAV:first-child
{
margin-top: 0px ;
}

.overview NAV A
{
background-color: rgba(255,255,255,1) ;
color: rgba(27,31,35,1) ;   /* grey */
display: inline-table ;
position: relative ;
width: 30% ;
min-height: 240px ;
padding: 0px ;
margin-left: 0px ; 
margin-right: 3% ; 
margin-bottom: 3% ; 
white-space: normal ;

outline-width: 1px ;
outline-style: solid ;
outline-color: rgba(234,237,240,1) ;   /* lightgrey */
outline-offset: 0px ;

transition-property: outline-color, width, min-height ;
transition-duration: 300ms ;
transition-delay: 0ms ;
}

.overview NAV A:hover
{
outline-color: rgba(32,32,36,0.5) ;   /* darkgrey */
}

.overview.white NAV A
{
background-color: rgba(234,237,240,1) ;   /* lightgrey */
}

.overview.white NAV A:hover
{
background-color: rgba(234,237,240,1) ;   /* lightgrey */
}

.overview NAV A.hide-fil1,
.overview NAV A.hide-fil2,
.overview NAV A.hide-fil3,
.overview NAV A.hide-fil4,
.overview NAV A.hide-fil5,
.overview NAV A.hide-fil6,
.overview NAV A.hide-fil7,
.overview NAV A.hide-fil8,
.overview NAV A.hide-fil9
{
display: none ;
}



/* try 01 */

  .overview NAV A.big
  {
  width: 96.5% ;
  min-height: 660px ;
  }

  .overview NAV A.big DIV:first-of-type 
  {
  width: 31.3%;
  }

/* / try 01 */




.overview NAV A DIV
{
display: table-cell ;
}

.overview NAV A,
.overview NAV A DIV:nth-of-type(1)
{
border-radius: 6px ;
}


.overview NAV A DIV:nth-of-type(1)
{
width: 36.83% ;

background-image: none ;
background-repeat: no-repeat ;
background-size: cover ;
background-position: 0% 100% ;

background-color: #202024 ;   /* darkgrey */
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-img-overlay.svg') }}"); 

border-style: solid ;
border-width: 0px ;
border-top-right-radius: 0px ;
border-bottom-right-radius: 0px ;

position: relative ;
z-index: 2 ;
}

.overview NAV A DIV:nth-of-type(2)
{
position: relative ;
text-align: left ;
vertical-align: top ;
padding-top: 20px ;
padding-bottom: 20px ;
padding-left: 40px ;
padding-right: 40px ;
font-size: 88% ;
line-height: 133% ;
z-index: 2 ;
}

.overview NAV A.highlight DIV:nth-of-type(2):before 
{
position: absolute ;
top: 11px ;
right: 11px ;
font-family: "FontAwesome";
font-weight: 900 ;
font-family: "Font Awesome 6 Pro" ;
font-weight: 300 ;
font-size: 11px ;
line-height: 20px ;
width: auto ;
background-color: #1ebea0 ;   /* green */
color: #ffffff ;
border-radius: 50% ;
padding: 0px 5px 1px 5px ;
content: "\f0a1" ;
}

.overview NAV A SPAN,
.overview NAV A I,
.overview NAV A U
{
font-size: 14px ;
opacity: 0.5 ;

transition-property: opacity ;
transition-duration: 300ms ;
transition-delay: 0ms ;
}

.overview NAV A:hover SPAN,
.overview NAV A:hover I,
.overview NAV A:hover U
{
opacity: 1 ;
}


.overview NAV A SPAN
{
display: block ; 
font-weight: 700 ;
}

.overview NAV A B,
.overview NAV A I 
{
display: block ; 
margin-top: 8px ;
}

.overview NAV A B
{
font-weight: 400 ;
}

.overview NAV A I 
{
font-style: normal ;
}









/* filters */

.filter 
{
background-color: #ffffff ;   /* white */
margin-top: 5% ;
padding-bottom: 2.5% ;
border-bottom: 1px solid #eaedf0 ;   /* lightgrey */
border-bottom: 1px solid rgba(73,76,79,0.2) ;   /* grey */
font-size: 0 ;
}

.filter B
{
display: block ;
font-size: 15px ;
margin-bottom: 5px ;
}

.filter INPUT 
{
display: none;
}

.filter INPUT + LABEL
{
display: inline-block ;
position: relative ;
padding-top: 0.6% ;
padding-left: 0.2% ;
padding-right: 0.2% ;
padding-bottom: 0.5% ;
line-height: 28px ;
background-color: #eaedf0 ;   /* lightgrey */
color: rgba(0,0,30,.6) ;
font-size: 14px ;
font-weight: 400 ;
text-align: center ;
cursor: pointer ;
border-radius: 6px ;
vertical-align: top ;
margin-right: 4px ;
margin-bottom: 4px ;
  
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */

transition-property: background-color, color, border ;
transition-duration: 300ms ;
}

.filter INPUT + LABEL::before,
.filter INPUT + LABEL::after
{
content: " " ;
display: inline-block ;
width: 0px ;
width: 10px ;
}

.filter INPUT:checked + LABEL
{
background-color: #1ebea0 ;   /* green */
color: #ffffff ;
}





.filter INPUT + LABEL I
{
display: inline-block ;
position: absolute ;
top: -9px ;
right: 10px ;
background-color: #1ebea0 ;   /* green */
color: #ffffff ;
padding-top: 2px ;
padding-left: 0px ;
padding-right: 1px ;
padding-bottom: 0px ;
width: 17px ;
line-height: 16px ;
border-radius: 50% ;
font-style: normal ;
font-size: 11px ;
font-weight: 400 ;
text-align: center ;
vertical-align: middle ;
opacity: 0 ;

transition-property: opacity ;
transition-duration: 300ms ;
transition-timing-function: ease-in-out ;
}

.filter INPUT + LABEL I.show
{
opacity: 1  ;
}





.filter-sel
{
}

.filter-sel H7
{
margin-bottom: 4px ;
}

.filter-sel INPUT + LABEL
{
background-color: rgba(255,255,255,1) ;  
border: 1px solid #eaedf0 ;   /* lightgrey */
border: 1px solid rgba(73,76,79,0.2) ;   /* grey */
font-size: 16px ;
padding-left: 1% ;
padding-right: 1% ;
margin-top: 8px ;  

transition-property: border ;
transition-duration: 300ms ;
}

.filter-sel INPUT + LABEL:hover
{
border: 1px solid rgba(73,76,79,0.8) ;   /* grey */
}

.filter-sel INPUT + LABEL.active
{
border: 1px solid #1ebea0 ;   /* green */
}

.filter-sel INPUT:checked + LABEL
{
background-color: #202024 ;   /* darkgrey */
border: 1px solid #202024 ;   /* darkgrey */
}

.filter-app > DIV
{
display: block ;
display: inline-block ;
display: none ;
margin-top: 20px ;
}






































/* TEAM MEMBER */


SECTION.teammember
{
}

SECTION.teammember P A, 
SECTION.teammember P A:active, 
SECTION.teammember P A:hover, 
SECTION.teammember P A:link, 
SECTION.teammember P A:visited 
{
border-bottom: 0px none transparent ;
color: #202024 ;   /* darkgrey */
}



















/* FOOTER */


FOOTER
{
position: relative ;
background-color: #202024 ;   /* darkgrey */
color: #ffffff ; 
min-height: 20vh ;
line-height: 30px ;
}

FOOTER > DIV
{
display: block ;
}

FOOTER > DIV > DIV
{
display: inline-block ;
margin-right: 6% ;
padding-bottom: 32px ;
}

FOOTER > DIV > DIV:last-of-type
{
margin-right: 0px ;
}


FOOTER H9
{
color: #1ebea0 ;   /* green */
margin-bottom: 5px ;
}

FOOTER  > DIV > DIV H9:nth-of-type(2)
{
margin-top: 31px ;
}

FOOTER P, FOOTER NAV
{
margin-top: 0px ;
margin-bottom: 0px ;
max-width: 460px ;
}

FOOTER I
{
margin-right: 5px;
}

FOOTER A, FOOTER A:link, FOOTER A:active, FOOTER A:visited
{
display: table ; 
color: rgba(255,255,255,1) ;
border-bottom: 0px solid rgba(255,255,255,0) ;
transition-property: border-bottom ;
transition-duration: 300ms ;
}

FOOTER A:hover
{
color: rgba(255,255,255,1);
border-bottom: 0px solid rgba(255,255,255,1) ;
}

FOOTER SPAN
{
display: inline-block ;
}

FOOTER SPAN A, FOOTER SPAN A:link, FOOTER SPAN A:active, FOOTER SPAN A:visited
{
display: inline-block ;
position: relative ;
width: 38px ;
height: 38px ;
text-align: center ;
vertical-align: middle ;
margin-right: 0px ;
color: #202024 ;   /* darkgrey */
}

FOOTER SPAN A I,
FOOTER SPAN A:before
{
display: block ;
position: absolute ;
top: 0px ;
left: 0px ;
text-align: left ;
vertical-align: top ;
}

FOOTER SPAN A:before
{
top: 4px ;
left: 1px ;

width: 38px ;
height: 38px ;

color: rgba(255,255,255,1) ;   /* white */
font-size: 30px ;
z-index: 1 ;

font-family: "FontAwesome";
font-weight: 900 ;
font-family: "Font Awesome 6 Pro" ;
font-weight: 900 ;

content: "\f111" ;
}

FOOTER SPAN A I
{
top: 9px ;
left: 7px ;
font-size: 20px ;
z-index: 2 ;
}

FOOTER SPAN A:nth-of-type(1) I
{
}

FOOTER SPAN A:nth-of-type(2) I
{
font-size: 18px ;
}

FOOTER SPAN A:nth-of-type(3) I
{
left: 9px ;
}

FOOTER SPAN A:nth-of-type(4) I
{
}

FOOTER SPAN A:nth-of-type(5) I
{
top: 11px ;
left: 11px ;
font-size: 15px ;
}

FOOTER SPAN A:nth-of-type(6) I
{
top: 11px ;
left: 9px ;
}

































/* NESTED */






/* CALL TO ACTION */

A.cta, 
A.cta:link, 
A.cta:active, 
A.cta:visited, 
A.cta:hover 
{
display: inline-block;
position: relative;
overflow: hidden ;
background-color: #1ebea0 ;   /* green */
color: #ffffff ;
text-decoration: none;
padding-top: 9px;
padding-left: 17px;
padding-right: 18px;
padding-bottom: 7px;
border-radius: 6px;
line-height: 22px ;
font-size: 80% ;
font-weight: 400 ;
letter-spacing: 0.5px;
text-align: left ;
text-transform: uppercase ;
cursor: pointer ;

transition-property: background-color, color ;
transition-duration: 300ms, 360ms ;
transition-timing-function: ease-in-out ;
}

A.cta:hover
{
background-color: rgba(73,76,79,1) ;   /* grey */
}






























/* CONTENT CARD */

A.cnt, 
A.cnt:link, 
A.cnt:active, 
A.cnt:visited, 
A.cnt:hover 
{
display: inline-block;
position: relative;
overflow: hidden ;
text-decoration: none;
margin-right: 12.5% ;
width: 43.75% ;
cursor: pointer ;
border-radius: 12px ;
color: #ffffff ;
opacity: 0.8 ;

transition-property: opacity ;
transition-duration: 300ms ;
transition-timing-function: ease-in-out ;
}

A.cnt:last-of-type
{
margin-right: 0px;
}

A.cnt:hover
{
opacity: 1 ;
}


A.cnt FIGURE
{
width: 100%;
padding-top: 50% ;

background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}


A.cnt DIV,
A.cnt U
{
display: block ;
padding: 40px ;
}

A.cnt U
{
position: relative;
font-size: 26px ;
line-height: 30px ;
font-weight: 700 ;
text-decoration: none ;
font-style: normal ;
}

A.cnt U::after
{
display: block ;
position: absolute ;
top: 40px ;
right: 40px ;
width: 50px ;
color: rgba(27,31,35,0.8) ;   /* grey */
text-align: center ;
vertical-align: middle ;
font-size: 30px ;
line-height: 30px ;
opacity: 1 ;
z-index: 2 ;

font-family: "FontAwesome";
font-weight: 900 ;
font-family: "Font Awesome 6 Pro" ;
font-weight: 900 ;

content: "\f101" ;
}
















/* OVERLAY */

ASIDE 
{
display: block ;
position: fixed ;
top: 0px ;
left: -100vw ;
width: 100vw ;
height: 100vh ;
background-color: rgba(32,32,36,0.96) ;   /* darkgrey */
opacity: 0 ;
z-index: 800 ;

transition-property: left, opacity ;
transition-duration: 300ms, 0ms ;
transition-delay: 0ms, 400ms ;
transition-timing-function: ease-out ;
}

ASIDE.show
{
opacity: 1 ;
left: 0px ;

transition-delay: 0ms, 0ms ;
}

ASIDE > DIV
{
position:relative ;
width: 70vw ;
height: 70vh ;

margin-top: 15vh ;
margin-left: auto ;
margin-right: auto ;

background-color: rgba(55,61,69,1) ;  
}

ASIDE > DIV > DIV
{
padding: 6% ;
}

ASIDE .close 
{
position: absolute ;
top: 0px ;
right: 0px ;
margin-top: 0px ;
padding-top: 2px ;
padding-bottom: 0px ;
padding-left: 13px ;
padding-right: 13px ;
background-color: #eb553c ;   /* orange */
color: #202024 ;   /* darkgrey */
font-size: 22px ;
line-height: 34px ;
cursor: pointer ;

border: 0px none #ffffff ;
border-radius: 6px ;
border-top-left-radius: 0px ;
border-top-right-radius: 0px ;
border-bottom-right-radius: 0px ;

transition-property: background-color, color ;
transition-duration: 300ms ;
transition-timing-function: linear ;
}


ASIDE .close::before
{
font-family: "FontAwesome";
font-weight: 900 ;
font-family: "Font Awesome 6 Pro" ;
font-weight: 400 ;
content: "\f00d" ;
}

ASIDE .close:hover
{
background-color: #eb553c ;   /* orange */
color: #ffffff ; 
}




 














/* ASIDE embed */

ASIDE#embed
{
z-index: 1000 ;
}

ASIDE#embed > DIV
{
width: 80vw ;
max-width: 1280px ;
height: auto ;
margin-top: 15vh ;
background-color: rgba(0,0,0,1) ;
border: 2px solid #ffffff ;
}

ASIDE#embed > DIV > DIV
{
padding: 0px ;
position: relative ;
width: 100% ;
padding-top: 75% ;
}


ASIDE#embed IFRAME
{
position: absolute ;
top: 0px ;
left: 0px ;
border: 0px #ffffff none ;
width: 100% ;
height: 100% ; 
}

ASIDE#embed .close 
{
border: 0px none #ffffff ;
border-radius: 6px ;
border-top-left-radius: 6px ;
border-top-right-radius: 6px ;
border-bottom-right-radius: 6px ;
right: -60px ;
}







/* ASIDE embed video */

ASIDE#embed.video > DIV > DIV
{
padding-top: 56.25% ;
}



/* ASIDE embed slides */

ASIDE#embed.slides > DIV > DIV
{
padding-top: 59.23% ;
}













/* ASIDE asset */

ASIDE#asset
{
background-color: rgba(73,76,79,0.88) ;   /* grey */
}

ASIDE#asset.show
{
}

ASIDE#asset > DIV
{
background-color: #ffffff ;
border-radius: 20px;
border-top-right-radius: 0px ;
width: 80vw ;
max-width: 1280px ;
height: auto ;
overflow-y: auto ;
}

ASIDE#asset > DIV > DIV
{
padding: 0px ;
padding-top: 40px ;
}

ASIDE#asset > DIV > DIV > DIV
{
padding: 40px ;
padding-top: 0px ;
max-height: 66vh  ;
overflow-y: auto ;
}

ASIDE#asset ARTICLE H6 
{
margin-top: 10px;
}

ASIDE#asset ARTICLE 
{
display: table ;
width: 100% ;
background-color: #ffffff ;
}

ASIDE#asset ARTICLE > FIGURE,
ASIDE#asset ARTICLE > DIV
{
display: table-cell ;
}

ASIDE#asset ARTICLE > FIGURE
{
width: 35% ;
padding-top: 50% ;
border-radius: 6px ;
background-repeat: no-repeat;
background-size: cover ;
background-position: 0% 100% ;
background-color: #202024 ;   /* darkgrey */
background-image: url("{{ get_asset_url('/spryker-themes/spryker-cms-22/img/dev/spryker-img-overlay.svg') }}"); 
}

ASIDE#asset ARTICLE > DIV
{
padding-left: 5% ;
padding-top: 2.5% ;
padding-bottom: 2.5% ;
}

ASIDE#asset ARTICLE SPAN
{
display: table ;
padding-bottom: 10px ;
}

ASIDE#asset ARTICLE SPAN > I,
ASIDE#asset ARTICLE SPAN > B
{
display: table-cell ;
}


ASIDE#asset ARTICLE SPAN > I
{
min-width: 130px ;
color: rgba(73,76,79,1) ;   /* grey */
font-size: 10px ;
font-weight: 400;
font-style: normal ;
text-transform: uppercase ;
}

ASIDE#asset ARTICLE SPAN > B
{
font-weight: 200 ;
}

ASIDE#asset ARTICLE a.cta
{
margin-right: 10px ;
}

ASIDE#asset ARTICLE a.cta.ca-dl
{
background-color: #eb553c ;   /* orange */
}

ASIDE#asset ARTICLE a.cta.ca-lp
{
background-color: #1ebea0 ;   /* green */
}

ASIDE#asset ARTICLE a.cta.ca-pd
{
background-color: rgba(73,76,79,0.75) ;   /* grey */
}

ASIDE#asset ARTICLE a.cta.ca-dl:hover,
ASIDE#asset ARTICLE a.cta.ca-lp:hover,
ASIDE#asset ARTICLE a.cta.ca-pd:hover
{
background-color: #000000 ;
}

ASIDE#asset ARTICLE a.cta[href='']
{
display: none ;
}