/******************************************/
/******* 2024 Matej Pliesovsky *****/
/******************************************/


@font-face {
	font-family: 'Specter';
	src:	url('../woff2/specter-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Specter Medium */
@font-face {
	font-family: 'Specter';
	src:	url('../woff2/specter-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Specter Bold */
@font-face {
	font-family: 'Specter';
	src:	url('../woff2/specter-bold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}



/********** General **********/
*, *:before, *:after {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
html {height:100%; min-height:100%;}
body {margin:0 auto; height:100%; min-height:100%; -webkit-text-size-adjust:100%; color:#2c112d; font:400 16px/1.5em 'Specter', 'Helvetica', 'Arial', 'sans-serif'; overflow-y:scroll; -webkit-font-smoothing: antialiased; font-variant-numeric:tabular-nums;}
img, embed, object, video {max-width:100%;}
img {height:auto; display:block;}

a {text-decoration:none; color:#2c112d;}
strong {font-weight:700;}
sup {font-size:0.5em; line-height:0.8125em;}


h1, h2, h3, h5, h6 {font-family:'Specter', 'Arial', 'sans-serif';}
h1 { font-weight:600; font-size:64px; line-height:58px;  letter-spacing:-4px; text-transform:uppercase;} /* heading */
h2 {font-weight:600; font-size:48px; line-height:1.2em; letter-spacing:-1px; text-transform:uppercase;} /* subheading */
h3 {font-weight:600; font-size:32px; line-height:1.2em; letter-spacing:-1px;} /* subheading */
h4 {font-weight:500; font-size:32px; line-height:1.2em; letter-spacing:-1.25px;} /* subheading */
h5 {font-weight:600; font-size:16px; line-height:1em;} /* subheading */

p {margin-bottom:1.5em; font-size:32px; line-height:36px; letter-spacing:-0.5px;}
p:last-child {margin-bottom:0;}

.card p {font-size:24px; line-height:28px;}
.card p.global {font-size:32px; line-height:36px;}




/********** Generic Styles **********/

.td-u {text-decoration:underline;}
.red {color:#f30000;}

.c-white {color:#fff;}
.c-blue {color:#000080;}


.ta-c {text-align:center;}


.bc-blue {background:rgba(219,231,255,0.9);}

.br-0 {border-radius:0;}

.mb-0 {margin-bottom:0;}
.mb-4 {margin-bottom:4px;}
.mb-8 {margin-bottom:8px;}
.mb-12 {margin-bottom:12px;}
.mb-16 {margin-bottom:16px;}
.mb-24 {margin-bottom:24px;}
.mb-32 {margin-bottom:32px;}
.mb-40 {margin-bottom:40px;}
.mb-48 {margin-bottom:48px;}
.mb-56 {margin-bottom:56px;}
.mb-64 {margin-bottom:64px;}
.mb-80 {margin-bottom:80px;} 
.mb-104 {margin-bottom:104px;}
.mb-112 {margin-bottom:112px;}  /* default for section */

.mt-32 {margin-top:32px;}
.mt-64 {margin-top:64px;}
.mt-80 {margin-top:80px;}
.mt-128 {margin-top:128px;}

.mr-40 {margin-right:40px;}

.ph-0 {padding-left:0; padding-right:0;} /* padding horizontal 0 */
.ph-16 {padding-left:16px; padding-right:16px;} /* padding horizontal 16 */
.ph-32 {padding-left:32px; padding-right:32px;} /* padding horizontal 32 */
.pv-0 {padding-top:0; padding-bottom:0;} /* padding vertical 0 */
.pv-16 {padding-top:16px; padding-bottom:16px;} /* padding vertical 16px */
.pv-64 {padding-top:64px; padding-bottom:64px;}
.pv-128 {padding-top:128px; padding-bottom:128px;}
.pa-16 {padding:16px;} /* padding all */
.pa-24 {padding:24px;}

.w-100 {width:100%;}
.w-200 {width:200px;}

.h-100 {height:100% !important;}

.d-n {display:none;}


.mw-100 {max-width:100%;}
.mw-40 {max-width:40%;}

.fs-12 {font-size:12px; line-height:16px;}
.fs-16 {font-size:16px;}
.fs-24 {font-size:24px;}

.size.mw-1440 {max-width:1440px;}
.size.mw-1280 {max-width:1280px;}
.size.mw-1172 {max-width:1172px;}
.size.mw-1024 {max-width:1024px;}
.size.mw-800 {max-width:800px;}
.size.mw-600 {max-width:600px;}
.size.mw-100 {max-width:100%;}


.p-a {position:absolute;}
.p-r {position:relative;} 
.b-0 {bottom:0;}
.t-0 {top:0;}



.flex-u {display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start; flex-basis:auto;} /* universal default for all screens */
.flex {display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start; flex-basis:auto;} /* default */

.fw-n {flex-wrap:nowrap;}

.fb-100 {flex-basis:100%;}

.fd-c {flex-direction:row;}

.jc-c {justify-content:center;}
.jc-sb {justify-content:space-between;}
.jc-l {justify-content:left;}

.ai-c {align-items:center;}

.fd-c {flex-direction:column;}

.fg-1 {flex-grow:1;}

.cg-80{column-gap:80px;}
.cg-48 {column-gap:48px;}
.cg-32 {column-gap:32px;}
.cg-24 {column-gap:24px;}
.cg-8 {column-gap:8px;}
.cg-0 {column-gap:0;}

.rg-24 {row-gap:24px;}
.rg-32 {row-gap:32px;}
.rg-48 {row-gap:48px;}

.f-2 .card {flex:1 0 45%;}
.f-3 .card {flex:1 0 28%;}
.f-4 .card {flex:1 0 24%;}


.grid {display:grid; /*grid-template-columns:auto auto auto;*/ grid-template-columns: repeat(3,minmax(0,1fr));} 
.g-24 {gap:24px}


video {position:absolute; min-width:100%; min-height:100%; width:auto;z-index:0; object-fit: cover;}

.i-a {left:50%; min-width:100%; position:absolute; top:50%; transform:translate(-50%, -50%);}
.i-r {height:100%; left:auto; max-width:40%; min-width:0; object-fit:cover; right:0; transform:translateY(-50%); position:absolute; top:50%;}
.i-r .overlay {display:none;}






.collapsible {background-image: linear-gradient(to right, #07A0AE , #324347); color:#fff; cursor:pointer; padding:24px; width:100%; border:none; text-align:left; outline:none; /*font-size:16px;*/ margin-top:12px;}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
h4.active, .collapsible:hover {background-color: rgba(255,255,255,0.5); /* background-color: #ccc;*/}

/* Style the collapsible content. Note: hidden by default */
.description {padding:0 24px;  background-image: linear-gradient(to right, #07A0AE , #324347);  max-height: 0; color:#fff; overflow: hidden;  transition: max-height 0.2s ease-out;}
.description p {padding:0 0 24px; color:#fff;}

.collapsible:after {  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #fff;
  float: right;
  margin-left: 5px;
}

h4.active:after {  content: "\2796"; /* Unicode character for "minus" sign (-) */}







/********** Header ***********/
header {position:fixed; z-index:10; float:left; width:100%; background:#fff;/* box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.25); background:#F2F7EE;*/}
header div.flex {display:flex; flex-direction:column; padding:0;}
header nav {display:flex;  align-items:center; padding:15px 0 15px; height:140px; column-gap:32px;}
/*header nav:first-child {justify-content:space-between;}*/
header nav:nth-child(2) {flex-direction:row-reverse; border-top:1px solid #E1E1E1;}

a.logo img {height:60px;}
a.contact img {height:60px;}

ul.navigationMain {/*display:flex; justify-content:center;*/}
ul.navigationMain li {position:relative; display:inline-block;}
ul.navigationMain li a { font-weight:500; display:block; cursor:pointer; transition: .1s ease-in-out; padding:0.5em 0; border-bottom:2px solid #fff; letter-spacing:-0.5px;}
ul.navigationMain li a:hover {color:#f30000; border-color:#f30000;}

ul.navigationGlobal {/*display:flex; justify-content:space-between;*/}
ul.navigationGlobal li {position:relative; display:inline-block;}
ul.navigationGlobal li a { font-weight:500; /*display:block;*/ cursor:pointer; transition: .1s ease-in-out;}
ul.navigationGlobal li a:hover {color:#f30000;}


header.device {display:none;}


ul.navigationDevice {display:none; position:relative; z-index:10000000; width:100%; background:#fff; box-shadow:0 4px 4px rgba(0, 0, 0, .25); left:0; top:106px; padding:2em 2em;}
ul.navigationDevice li a {width:100%; display:inline-block; font-weight:500; letter-spacing:-0.5px;  font-size:1em; padding:1em 1em; cursor:pointer; text-decoration:none; border-left: 1px solid #ccc;}
ul.navigationDevice li > a {color:#000; padding:1em;}
ul.navigationDevice li.active a {}
ul.navigationDevice li.active > a {}




/********** Footer **********/
footer {float:left; width:100%; z-index:1; background:#f6f6f6; padding:64px 0;}
footer p {margin-bottom:1.5em;}





/********** Content **********/
.content {padding-top:140px;}

section, main {float:left; width:100%; margin-bottom:112px;}

/*#contact {float:left; width:100%; margin-bottom:112px;}
#contact p {}
#contact a {text-decoration:underline;}*/



.home.i-r {
    bottom: 0;
    height: auto;
    max-width: 100%;
    transform: none;
    top: auto;}



/********** Home **********/
.banner {position:relative; min-height:580px; overflow:hidden;}

.banner div.content {padding:4em 2em 4em 8em; z-index:2; width:60%; height:100%;  position:relative;/*display:flex; align-items:center;*/ /*background:red;*/}
.banner div.content p {font-size:16px; line-height:22px;/*color:#fff; font-size:24px; line-height:26px; font-weight:600; letter-spacing:-1.5px;*/}    
.banner div.content p a {text-decoration:underline;}   

.copy {font-size:12px; line-height:16px; text-align:center; padding:0  0 48px;}









.old {left:50%; max-width:300px; position:absolute; top:27%; transform:translate(-50%, -50%);}  
.mono {max-width:33%;}

.subtext {/*font-size:24px; line-height:30px;*/ color:rgba(0, 0, 0, 0.5); padding:24px; font-weight:500;}


    


/********** Size ***********/
.size {position:relative; margin:0 auto; /*padding-left:1em; padding-right:1em;*/ /*display:table;*/ /*display:flow-root;*/ content:" ";} /* size as a container */
.size.ph-0 {padding:0}
/*.size.noPadding-u {padding-left:0; padding-right:0;}
.size.noPadding {padding-left:0; padding-right:0;}*/
/*.size.full {max-width:100%;}
.size.full.noPadding {max-width:100%; padding-left:0; padding-right:0;}*/


/********** Desktop **********/
@media (min-width:768px) {
.size {width:100%; max-width:1320px; padding:0 2em;}
}

/********** Device ***********/
@media only screen and (max-width:1024px) {
.size {width:100%; max-width:1024px; padding:0 2em;}
}

/*********** 320px ***********/
@media only screen and (max-width:768px) {
.size {padding:0 1.5em;}
/*.size.full {padding:0 1em;} */

.banner div.content {padding:0; width:100%; height:100%; text-align:center;}
.banner {min-height:750px;}
}



/*********** 320px ***********/
@media only screen and (max-width:767.98px) {

.old {left:0%; top:0%; transform:none; max-width:180px;}
.mono {width:100%; max-width:80%;}



h2 {font-size:30px;}

.flex {flex-direction:column; row-gap:24px;}
.grid {display:grid; /*grid-template-columns:auto auto auto;*/ grid-template-columns: repeat(1,minmax(0,1fr));} 

/*header {display:none;}
header.device {display:block;}
header.device nav {padding:32px; height:106px;}*/

.button.contact {font-size:12px; padding:6px 12px; height:30px;}


.i-r {max-width:100%;}
.d-n {display:block;}
}

@media only screen and (min-width:576px) {
}


@media only screen and (min-width:767.98px) {
}

/*********** 768px ***********/
@media only screen and (min-width:768px) and (max-width:1279px) {
.banner {min-height:auto;  overflow: auto;}