:root {
    --c1: #005192;  --hov1: #02467d;
    --c2: #04a8bd;  --hov2: #0396a9;
    --c3: #068bdc;  --hov3: #037ac2;
    --c4: #73b02c;  --hov4: #66a022;
    
    --c5: #f5fded;
    --c5: #f3ffeb;   
  }


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .tile.text time, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;	padding: 0;	border: 0; 	outline: 0; 	vertical-align: baseline;}
:focus {	outline: 0; } ol, ul {list-style: none;} a {text-decoration:none} 

/*hacks*/
.clear{clear:both} 
.clearfix:after { content: ""; display: table; clear: both;}
.vc {top:50%; transform: translateY(-50%); position: absolute; }
.show-on-mobile {display:none}


body, html {height:100%;}
/*html{-webkit-text-size-adjust: none;}*/ /*stop font resizse ios - better to have in in media queries*/ 
/*::-webkit-scrollbar { display: none; }*/
html {height:100% }
.content-wrapp {
  flex: 1 0 auto;
}
.container {    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: auto;}
.content {width: 90%;
    margin: auto;
    padding: 4em 5em;
    box-sizing: border-box;
    position: relative;
    }    
    
img {color:transparent}

body {display: flex;
  flex-direction: column;
  font-family: 'Graphik Web', sans-serif;
  font-weight: normal; font-style: normal;
  font-size: 17px;   
  font-size: 1.3vw;
  line-height: 1.7em;
  color:var(--c1);
  background:#fff;
  height:100%;
   }

body.scroll-lock {height: 100vh;
  overflow-y: hidden;
  padding-right: 15px;}
   
::-moz-selection { background: var(--c1); color:white }
::selection { background: var(--c1) ; color:white}   
h1{ font-size: 2.5em; font-weight:normal;   line-height: 1.3em; color:var(--c1); margin-bottom: 0.8em;}
h2{ font-size: 1.7em; font-weight:normal; line-height: 1.4em; color:var(--c1); margin-bottom: 0.8em;}
h3{ font-size: 1em; font-weight: 500;  }
h4{ font-size: 1.5em; font-weight:700; line-height: 1.1em;  margin-bottom: 0.1em;}
a {color: var(--c2); font-weight: normal;} a:hover {color:var(--c2)}
strong, b{font-weight: 500;}
.biggertext {font-size: 1.3em; line-height: 1.7em;}
.content sup {top: -0.1em; position: relative;}
.content ul {list-style-type: disc; padding-left:1.4em; width:80%}
.content ol {list-style-type: decimal; padding-left: 1.9em;}
.content li {display: list-item; }





.logo {    position: fixed; top: 12px; left: 21px; width: 125px; display: block; z-index: 20;}
.menu a.menu-logo{position: absolute; display: block;}
.logo-bg {height:64px; width:166px; background-color: #005192; position: fixed; top:0; left:0; z-index: 20;}
#ham {transition:opacity 1s}

.menu {width:100%; height:100%; background:rgba(0,81,146,0.97); position:fixed; top:0; left:0; text-align: center; 
    opacity: 0;
    visibility: hidden;

    transition: opacity 0.5s,  visibility 0s 0.5s;
    z-index:100;
    }
.open-menu { 
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s;
    }
.menu .menu-container {top:50%; transform: translateY(-50%); position:absolute; left:0; right:0; margin:auto}
.menu nav { color: #eff2f7;}
.nav-show {opacity:1; transform:translateY(0)}    
.menu a {color:white; position: relative;}
.menu .line {background-color: white;     margin: 2.5em auto 1em;}
.menu .nav-cont a{display:block; font-size: 2.7em; line-height: 1em; margin-bottom: 0.4em; color:#fff; cursor:pointer; transition:color .1s ease}
.menu  a:hover{color:var(--c2)}
.menu .nav-cont .sub-menu {    margin: 0.5em 0 2.3em;}
.menu .nav-cont li li a {    font-size: 1.1em; line-height: 1.4em;}
.menu .nav-cont li li a::after {content: ''; background: none;}
.menu .nav-cont a::after, .arrow-link2::after {
  content: ' ';
  position: absolute;
  width: 13px;
  height: 11px;
  background-image: url(../img/arrow1.png);
  background-repeat: no-repeat;
  background-position: center;
  padding: 0;
  margin: 0 0 0 11px;
  top: 58%;
  transform: translateY(-50%);
  transform-origin: 50% 0;
  transition: transform 0.1s ease, margin 0.1s ease;}

.arrow-link2::after { /*for when centered*/
  margin: 0 0 0 11px; }

.menu .nav-cont a:hover::after,.arrow-link2:hover::after {margin-left: 15px; text-decoration: none;
       filter: invert(44%) sepia(34%) saturate(7375%) hue-rotate(155deg) brightness(98%) contrast(97%); /*https://codepen.io/sosuke/pen/Pjoqqp*/}

.menu .menu-item-has-children {position: relative; overflow: hidden; }
.menu .menu-item-has-children a::after {transform: rotate(90deg) translateY(-50%);}
.menu .menu-item-has-children a.rotate-arrow::after {transform: rotate(-90deg) translateY(-50%);}
.menu .nav-cont .menu-item-has-children a:hover::after {margin-left:11px}

/*.topbar {overflow: hidden;    width: 100%;    height: 64px;    position: absolute;     top: 0; left: 0;}*/

.search-icon {height:64px; width:64px; background-color: #068bdc; position:fixed; top:0; right:64px; z-index: 103; cursor:pointer} 
.search-icon:hover {background-color: var(--hov3);}
.search-icon img { width: 35%; margin-top: 20px; margin-left: 21px; }

.search-form-cont {position:fixed; top:0; right:0; z-index:102; height:64px; width:340px; background-color: #068bdc; transform:translateX(278px); transition:transform .2s ease}
.search-form-cont.open {transform:translateX(0)}
.search-form-cont label {display:none}
.search-form-cont input[type=submit]{display:none}
input[type=search]{
    width: 12em;
    border: 0;
    background: transparent;
    font-size: 16px;

    color: white;
    margin: 18px 0 0 19px;
    padding: 5px; box-sizing:border-box;
    -webkit-appearance: none;}
.search-form-cont input[type=search]::-webkit-search-cancel-button{ display:none}
.search-form-cont input, [contenteditable] {caret-color: white;}



.soc-icon {height:64px; width:64px; background-color:#04a8bd; position:fixed; top:0; right:128px; z-index: 101;} 
.soc-icon img { width: 25%; margin-top: 21px; margin-left: 25px; cursor:pointer}
.soc-icon:hover {background-color:var(--hov2) ;}

.intro {height:42em; background-image:url('../img/bg1.jpg'); background-size: cover; position: relative; overflow:hidden; background-position: 70% 50%;}
.intro-blocks {width:93%; max-width:1500px; margin:auto; left:0; right:0;}
.intro-blocks .swiper-container {
    width: 100%; overflow: visible;  padding: 3em 0; margin-bottom:3em
    /* height: 300px; */
  }
.intro-blocks .swiper-slide {width:25%}
.intro-blocks .swiper-slide:hover button.arrow-but {background-position:right 1.7em top 26px;}
/* .intro-block {width:100%; float:left; position: relative; overflow: visible;} */
.intro-img-blank {width:100%; position:static}
.intro-img {width:100%; position: absolute; top:0; left:0; right: 0; margin: auto; transform: scale(1.05); transition: all .2s ease; cursor:pointer; filter: brightness(0.85); }
.intro .swiper-slide:hover img {transform: scale(1.15); filter: brightness(1);}
.intro .swiper-slide button {position: absolute; bottom: -25px; left:0; right:0; margin: auto; width: 14em;}

.intro .swiper-nav {display:none; text-align: center; position:absolute; bottom: -6em; top:auto; width: 100%; height: 5em;}
.swiper-button-prev, .swiper-button-next { display: inline-block; position: static; margin: 0 0.4em; background-color: #068bdc; width:60px; height:60px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 13px;}
.swiper-button-next:after, .swiper-button-prev:after {content: '';}
.swiper-button-next { background-image: url(../img/arrow1.png);}
.swiper-button-prev { background-image: url(../img/arrow2.png);}

.home-block {display:flex; background-size: cover;     padding: 2em 0 3em;}
.home-block .text {padding:8em 6% 8em 11%; width: 50%; box-sizing: border-box;}
.home-block button {margin-top: 1.6em;}

.line, .wp-block-separator { background-color:var(--c1);  width:5.3rem; height: 1px; margin: 1.4em 0 1.2em;}
.icon {width: 2.6em; margin-bottom: 0.2em;}
.icontext {text-transform: uppercase; font-weight: 500; font-size: 0.8em; line-height: 1em; margin-bottom: 1em;}
.home-block .illu {padding-top: 7%;     width: 41%;}
.home-block .illu img {width:100%}
.home-block1 {background-image:url('../img/bg2.jpg'); }

.home-block2 {background-image:url('../img/bg3.jpg'); }
.home-block.dark h2, .home-block.dark p, .home-block.dark {color:white}
.home-block.home-block2 .icontext {color:var(--c2)}
.home-block2 .line, .home-block2 button {background-color:var(--c2)}
.home-block.switched-sides {flex-direction: row-reverse;}
.home-block.switched-sides .text {padding-left: 8%;}
.home-block .text .cont {width: 91%;}
.home-block.switched-sides .text .cont {width: 76%;}
.home-block3 {background-image:url('../img/bg4.jpg'); }
.home-block3 .line, .home-block3 button {background-color:var(--c3)}
.home-block3 .icontext {color:var(--c3)}
.home-block3 {padding-bottom: 8em;}
.home-block4 {background-image:url('../img/bg5.jpg'); }
.home-block4 .line, .home-block4 button {background-color:var(--c4)}
.home-block.home-block4 .icontext {color:var(--c4)}

.video-cont, .wp-block-embed__wrapper { position: relative; padding-bottom: 52.85%; /* 16:9 */	padding-top: 25px;	height: 0;  z-index: 2;  overflow:hidden;     margin-bottom: 4em;}
.video-cont iframe, .wp-block-embed__wrapper iframe {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;  z-index:0;}
.widescreen {padding-bottom: 38.55%;}


.arrow-link::after, #menu-footer-menu a::after{
  content: ' ';
  background-image: url(../img/arrow1.png);
  background-repeat: no-repeat;
  background-position: center calc(50% + 0.08em);
  background-position: center center;
  padding: 0 0 0 30px;
  transition: padding 0.1s ease;}

.arrow-link:hover::after, #menu-footer-menu a:hover::after {padding-left: 40px; text-decoration: none;}

.arrow-link.down.c4::after {background-image: url(../img/arrow3-c4.png);}
.arrow-link.down.c4:hover::after  {padding-left:30px;}

.arrow-link.strong {font-weight:500}

.arrow-link.c2::after {background-image: url(../img/arrow1-c2.png); }
.arrow-link.c3 {color:var(--c3)}
.arrow-link.c3::after {background-image: url(../img/arrow1-c3.png); }
.arrow-link.c4 {color:var(--c4)}
.arrow-link.c4::after {background-image: url(../img/arrow1-c4.png); }

/*SUB-PAGES*/
.what-we-do .container {width:90%}
.what-we-do, .news-events {padding-top:8em; text-align: center;}
.what-we-do .line, .news-events .line {margin:0em auto 1.6em;}
.what-we-do .cols {width:100%; max-width:1400px; overflow: auto; margin:6em auto 13em}
.what-we-do .col {float:left; width:33.333%; box-sizing: border-box; padding:0 1%}
.what-we-do .col img {width:100%; display:block; transition: transform .5s ease;}
.what-we-do .img-cont {overflow: hidden; border-radius:7%;}
.what-we-do .img-cont:hover img {transform:scale(1.1); transition: transform .2s ease;}
.what-we-do p, p.main-perex {width:20em; margin:auto}

.what-we-do:hover a{color:inherit}
.what-we-do h2 {margin: .7em 0 .3em;}
.what-we-do .col a{color:var(--c1)}
.what-we-do .col p {font-size:.8em;  line-height: 1.5em;}


/* news */

.news-events .container {width:100%; overflow: visible;}
.news {width:100%; max-width:1400px; overflow: auto; margin:4em auto 6em}

.clanek-card { color:var(--c1); display:inline-block; position: relative; height: 26.8em; text-align: left; width: 30.5%; margin: 0.9em 0.7em; border-radius: 1.8em; overflow: hidden; vertical-align: top;  -webkit-backface-visibility: hidden; background: #e1f2ff; }
 .clanek-card .thumb {width:100%; height:11em; overflow:hidden; position:relative}
 .clanek-card .thumb img   {width:100%; height:auto; transition: transform .3s ease; transform:scale(1.01) translateY(-50%); top:50%;  position: absolute;}
 .clanek-card:hover .thumb img{ transform: scale(1.1) translateY(-45.8%); }
 .clanek-card:hover .tag{background-color: var(--c3); color:#fff;}
 .clanek-card:hover {background:#d5eafb}
 .clanek-card:hover .line {width:6.2rem}
 .clanek-card .line {transition: width .2s ease;}
 .news .clanek-card h2 {
  color: var(--c1);
  font-size: .95em;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 1.1em;
  margin-top: 0;
  line-height: 1.5em;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
 .news .clanek-card .line {margin:0 0 1em 0; background:#068bdc}
 .clanek-card .date {font-size: 0.7em;color:var(--c1); position:absolute;bottom: 2em; left: 9%; font-weight: 500;}
 .clanek-card .text {padding: 1.5em 9% 0; position: relative;}
 .clanek-card .excerpt {  height: 6.7em; overflow: hidden; color:var(--c1);}
 .clanek-card .excerpt p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
 
 .clanek-card .tag {background-color: white; color: var(--c1); float: none;}
 .clanek-card .icon {position: absolute; top: 2em; right: 5%; width: 1.8em; max-width: 64px; max-height: 64px;}
 .news button {margin: auto; margin-top: 3.4em;}

/* events */
.container.events-cont {max-width: unset;}
#events {margin-top:3em; background-color: var(--c5);}
#events .col1 { width:33.5%; padding-right: 5%; text-align: left; float:left;  box-sizing: border-box;}
#events .col2 { width:41%; padding-right: 5%;     left: 33.4%; text-align: left; float:left; box-sizing: border-box;}
#events .col3 { width:24%;  left: 74.5%; text-align: left; float:left}
.event-header {position:relative; height:80px; padding: 0 5%; box-sizing: border-box; border-top:1px solid #005192; cursor:pointer}
.event-header:first-of-type {border: 0;}
.event-header .wrap {max-width: 1600px; margin:auto; position:relative; height:100%}
.ui-state-active {cursor: default;}
.title-small {font-size: 1em; font-weight: 500; line-height: 1.4em; position: absolute; top: calc(36px - 0.6em);     top: 50%; transform: translateY(-50%); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.desc-small {position: absolute; top: calc(36px - 0.6em); top: 50%; transform: translateY(-50%); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1.4em; }
.date-small {position: absolute; text-align: left; top: calc(36px - 0.6em); top: 50%; transform: translateY(-50%); width:20%; overflow: hidden; line-height: 1.4em; font-weight: 500;}
.ghost-tags {position: absolute; top: 1.2em; font-weight: 500;line-height: 1.4em; transition: margin-top 0.8s ease}
.ui-state-active .ghost-tags {margin-top:1em}
.ui-state-active .title-small, .ui-state-active .desc-small, .ui-state-active .date-small {margin-top:1em}
.title-small, .desc-small, .date-small {margin-top:0em;  transition: margin-top 0.8s ease}
.event-content {padding: 0 5% 4em;
  overflow: auto;
  max-width: 1600px;
  margin: auto;}
.event-content .line {margin:.6em 0 1.5em 0}
.title-big {font-weight: 500;}
.desc-big { line-height: 1.7em; padding-bottom: 3em;}
.date-huge { font-size: 3.2em; line-height: 1em; }
.suffix {font-size: 19px; letter-spacing: 0; vertical-align: top; line-height: 1.7em;}
.months {margin-top: 0.4em;}
.tags {font-weight: 500; margin-bottom: 1.8em;}
.col-desc.mobile-desc {display:none}
.col-lang.mobile-lang {display:none}
.date-tag-mobile {display:none}
.ui-icon { position: absolute; background-repeat: no-repeat; right: 0; width: 80px; height: 80px; background-position: center; background-color:var(--c2); cursor:pointer}
.accordeon-arrow-down {background-image: url(../img/arrow3.png);}
.accordeon-arrow-up {background-image: url(../img/arrow4.png);} 



/*side menu page*/
.hero {position: relative; height:21em; overflow: hidden;}
.hero img {width: 102%; height: auto; position: absolute; margin: auto; top: 50%; transform: translateY(-50%); left: 0; right: 0; }
.page-side-menu .container {position:relative; width:100%; max-width: 1600px; margin:auto;}
.page-side-menu .content {width: 72%; margin: 0 0 0 21%; padding: 4em 5em; box-sizing: border-box; position: relative;}
.page-side-menu .content p {width:90%}
.page-side-menu .content h1 {width:90%}
.page-side-menu .content img {width:100%; height:auto}

.wp-block-image {margin-bottom: 2em;}
.wp-block-image img {width:100% ; height: auto;}
.side-menu-cont {position: -webkit-sticky; position: sticky; float: left; padding-top: 4.3em; margin-bottom:2em;  top: 1.4em; bottom:5em; width:auto; font-size: 1rem; left:2.2%; z-index: 2;}
.side-menu-cont ul {padding-left: 0;}
.side-menu-cont a {list-style-type: none; display:block; background-color:#e1f2ff; border-top:1px solid #b4d2e9; padding:.7em 1em; color:var(--c1); width: 13em}
.side-menu-cont a:first-of-type {border:none}
.side-menu-cont a.active {background-color: var(--c1); color:white; border-top:1px solid var(--c1);}
.side-menu-cont a:hover {background-color: var(--c1); color:white; }
/* .side-menu-cont a:first-of-type:hover {border:none} */
.side-menu-cont .static-link {background-color: #dcf0e5; color:var(--c1); background-image: url(../img/arrow-right-green.svg); background-repeat: no-repeat; background-size: 7px; background-position: right 1.4em center;}
.side-menu-cont .static-link:hover {background-image: url(../img/arrow-right.svg);}
.page-side-menu .selector {display:none}
.side-menu-cont a.active {
  background-color: var(--c1);
  color: white;
  border-top: 1px solid var(--c1);
}



/* page free - side menu page with custom anchors*/
.page-free p, .single p {margin-bottom:3em}
.page-free p.biggertext {margin-bottom: 3em;}
.page-free h2:not(.no-line):after {    content: ""; display: block; background-color: var(--c1); width: 4.7rem; height: 1px; margin: 2rem 0 2rem;}
.wp-block-image figcaption, .wp-block-embed figcaption, .gallery .caption { font-size: 0.8em;}
.kotva {position: relative; top: -3em;}



.page-side-menu .line {margin: 2.3em 0 2.1em;}
.line.above-img {margin: 2.3em 0 2.4em;}


/* single news*/
.single .content {padding-top:6em; padding-bottom: 8em; width:66%}

.tag { margin-bottom:2.7em; font-weight: normal; text-transform: uppercase; background-color: var(--c2); width: auto; border-radius: 13px; display: inline-block;  color: white; padding: 7px 10px 6px; box-sizing: border-box; font-size: 13px;  font-weight: 500; line-height: 13px; letter-spacing: 0.0em; vertical-align: top; height: auto;}

.h1-cont {position:relative}
.sidekick {position:absolute;     bottom: 0; left: -43%; }
.sidekick .line {margin:0}
.sidekick .icon {position:absolute; bottom: 0; margin-bottom:2em; width:3em}
.sidekick .date {position:absolute; top: 0; margin-top:1.9rem; font-size: 0.7em; font-weight: 500;}
.date.show-on-mobile { font-size: 0.7em; font-weight: 500;}
.page-side-menu .content img.icon {width: 5rem; margin-bottom: 2.1rem;}

.wp-block-embed {position:relative}
.single .wp-block-embed figcaption {  position: absolute; top: 0; padding-top: 2rem; left: -43%; width: 25%; line-height: 1.9em;}
.single .wp-block-embed figcaption::before {content: ' '; background-color: var(--c1);  position: absolute; width: 5.3rem; height: 1px; margin: 0 0 1.2em;  top: 0;  }

.gallery {position:relative; }
.gallery .swiper-container {padding-bottom: 3em;}
.gallery .swiper-slide {height: 24em; }
.content .gallery img {object-fit: cover;     width: 100%; height: 100%;}
.gallery .swiper-button-next, .gallery .swiper-button-prev {position: absolute; top: 10em; background-color:var(--c2)}
 .gallery .swiper-button-next {right:-30px}
 .gallery .swiper-button-prev {left:-30px}
 .swiper-pagination { position: static; margin-right: 0.8em;}

 .news-cont .clanek-card {background:white; }
 .news-cont .clanek-card:hover {background-color: #fafafa;}
 .clanek-card .thumb {background-size: cover;}
 .news-cont .line {margin: 0em auto 1.6em;}
 .news-cont h2 {margin-bottom:.3em}
 .news-cont {text-align: center; background-image:url(../img/bg7.jpg); background-size: cover; padding:5em 0 1px}
 .news-cont p.main-perex { margin-bottom: 1em;     font-size: .8em; font-weight: 500;}
 .news-cont .news {margin: 3em auto 4em;}
 

 /*footer*/
.foot {
  flex-shrink: 0;
    background:var(--c4); padding: 5em 0 5em; margin-top:0;   
    color: white;
    /* letter-spacing: 0.12em; */
    font-weight: normal;
    font-size: 0.85em;
    position:relative;
    line-height: 2.3em;  
    }
.foot .container {width:90%; position:relative;    overflow: auto; }
.foot .linx-cont {position: relative; background-color: transparent; overflow: auto;}
.foot a {color:white;}
.foot a:hover {color:white; }


.foot .col {float:left}
.col-group1, .col-group2 { width:74%}
 
.foot nav li {float:none}
.foot .col1 { width: 26%; min-height: 20em;}
.foot .col2, .foot .col5 { width: 23%; }
.foot .col3, .foot .col6 { width: 34%; }
.foot .col4, .foot .col7 { width: 26%; }


.col-group2 {font-size:.8em; margin-top:3em}
.foot .col6 {line-height: 2em; padding-right: 6%; box-sizing: border-box;}
.foot .col6 .line {margin-bottom:1.6em}

.foot .logo { position:static; clear:both; width:7em; top: 0; padding: 0; left: 0; right: auto; margin: 0; margin-bottom: 2em;}
.foot .line {background: white; margin-top:0}
.foot .socs { position: absolute; left: 88%;; top: 0;}

.foot .socs img, .menu .socs img { width:16px; padding: 27px; background-color: var(--c1); float:none}
.foot .socs img:hover {background-color: var(--c3)}





/* BANNERS */
.banner-container {width: 100%;
    max-width: 1600px;
    margin: auto;}
.banner-content {width: 72%; margin: 0 0 0 21%; padding:0 5em; box-sizing: border-box; position: relative;}
.content.p0 {padding-top:1em; padding-bottom:1em}

.banner-cole-values {padding:5em 5% 5.5em; box-sizing: border-box; background-color: var(--c5); text-align: center;}
.banner-cole-values .line {margin:auto; margin:1.7em auto 3em;}
.banner-cole-values .cols .col {display: inline-block; vertical-align: top; width: 33%; box-sizing: border-box; padding: 0 3%;}
.banner-cole-values .icon { width: 4.6em; }
.banner-cole-values p {margin-bottom:3em}

.banner-cole-values-small {padding-bottom: 4em;}
.banner-cole-values-small .cols .col {width: 49%; margin-bottom: 2em;}
.banner-cole-values .cols .col p {width:16em; margin:auto}

.banner-leadership-background {background-color:var(--c5)}
.banner-leadership-container {width: 100%; max-width: 1600px; margin: auto;}
.banner-leadership-content {width: 72%; margin: 0 0 0 21%; padding:0 5em; box-sizing: border-box; position: relative;}
.banner-leadership {padding:5em 0 4em; box-sizing: border-box; background-color: var(--c5); text-align: left; overflow: hidden;}

.banner-leadership .cols {max-width: 1290px; margin: auto;}
.banner-leadership .line {margin:1.7em 0 3em;}
.banner-leadership .col {display: inline-block; vertical-align: top; width: 25.7%; box-sizing: border-box; padding: 0; margin: 0 11.3% 0 0;}
.banner-leadership .col:last-child {margin-right: 0;}
.banner-leadership .thumb {height: 15em; overflow:hidden; position: relative; margin-bottom: 1.5em; background-size: cover; background-repeat: no-repeat; background-position: center;}
.banner-leadership button {margin: 0em 0;}
.banner-leadership .col p {width:135%}

.banner-partnership {color:white; padding: 7em 5% 5em; box-sizing: border-box; text-align: center; background-size: cover;}
.banner-partnership .line {margin:auto; margin:0.4em auto 1.4em; background: white;}
.banner-partnership h1 {color:white; margin-bottom: 0.5em;}
.banner-partnership .text {width: 50%; margin: auto; max-width: 630px;}
.banner-partnership button {margin: 1.9em auto;}


/*timeline*/
.timeline {position: relative;}
.timeline .swiper-container {  padding-left: 27.7%; }
.timeline .swiper-slide { padding-top: 9em; }
.timeline .swiper-slide:last-of-type {padding-right:20em} 
.timeline .historical-event {width:69%; position:relative  } 
.timeline .thumb {height: 10em; overflow:hidden; position: relative; margin-bottom: .8em; background-size: cover; background-repeat: no-repeat; background-position: center;}
.timeline .year {position: absolute; top: -8vw; font-size: 2.5em; line-height: .9em; transform-origin: bottom left; transition: transform .5s ease;}
.timeline .swiper-slide-active .year {transform: scale(2.4);}

.axis {top: 7.2em; height: 20px; width: 100%; position: absolute; left:0; border-top: solid 1px var(--c1);}
.circle {height: 16px; width: 16px; position: absolute; top:-8px; left:0; background-color: var(--c4); border-radius: 50%;}
.triangle {height: 19px; width: 19px; position: absolute; top:-10px; left:49%; display: block;}
.timeline .swiper-slide.last .circle {top: calc(7.2em - 8px);}
.tl-head {position: relative;}
.tl-swiper-nav {position: absolute; top: 0; left: 0;    
  
  width: 100%;
    text-align: right;}
.tl-head .swiper-button-next, .tl-head .swiper-button-prev {background-color: var(--c3); margin: 0 0 0 0.2em;}
.tl-head .swiper-button-next:hover, .tl-head .swiper-button-prev:hover {background-color: var(--hov3);}

.contact .content {overflow:auto; padding-top:6em; max-width: 1510px;}
.contact .row {margin-bottom:6em; overflow:auto}
.contact .col {width:50%; position:relative; float:left; box-sizing:border-box}
.contact .map {width: 100%; height: 30em;}
.contact .map iframe {width: 100%; height: 100%; display: block;}
.contact .col.right {padding-left:10%}
.contact .col.left {padding-top:1.5em}
.contact .line {margin: 1.4em 0 1.8em;}
.contact a {color:inherit}
.contact .biggertext {width: 72%;}
.contact .banner-partnership {padding-bottom:8em}
.contact .banner-partnership .line {margin: 1.7em auto 1.9em;}


.page404 {    height: 100%; position:relative; background-image: url(../img/404.jpg); background-repeat: no-repeat; background-size: cover;  background-position:center; min-height: 40em; }
.page404 .text{margin-left:10%; width: 35%;}
.page404 h1 {color:white; font-size: 10em; margin-bottom:0}
.page404 h2  {font-size: 3.3em; color:white}
.page404 p {color:white;  margin-bottom: 0em;}

.leadership .content {padding-top:7em; max-width:1400px}   
.leadership h2 {font-weight:500; font-size: 1.35em;}
.leadership .line {margin: 1.9rem 0 1.9rem;}
.leadership-swiper-nav {position: absolute; top: 0; left: 0; width: 100%; text-align: right;}
.l-head {position: relative;}
.l-head #swiper-button-next-leadership, .l-head #swiper-button-prev-leadership {background-color: var(--c3); margin: 0 0 0 0.2em;}
.l-head #swiper-button-next-leadership:hover, .l-head #swiper-button-prev-leadership:hover {background-color: var(--hov3);}
.leadership .position {color:var(--c4);     width: 12em;}
.leadership .row {overflow:auto; margin-bottom: 6em;}
.leadership .col {float:left}
.leadership .col1 {width:31%}
.leadership .col2 {width:28%}
.leadership .col3 {width: 39%; padding-left: 11%; box-sizing: border-box;}
.leadership .thumb { height: 21em; overflow: hidden; position: relative; margin-bottom: 1.5em; background-size: cover; background-repeat: no-repeat; background-position: center;}
.leadership .short-text {    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    line-height: 1.6em;}
.leadership .long-text {height: auto; overflow: auto; line-height: 1.6em;}
.leadership .long-text.clampit {  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 12;
  -webkit-box-orient: vertical;}
.leadership .show-more {margin-top:.7em; display:block; }
.leadership .show-more.toggled:after {background-image: url(../img/arrow4-c4.png);}
.leadership button {margin:auto}



.search .content {    padding: 8em 5% 15em; max-width:1450px}
.search-head {margin-bottom:1.2em}
.search-head h1 {text-align:center; }
.search-head label {display:none}
.search-result-count {font-size:15px; text-align:center; margin:1.8rem auto 5rem;}
.search h2 { font-size: 1.3em; margin-bottom: .3em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.search .result {overflow:auto; margin-bottom:1.8em;  padding: 1.5em;}
.search .result:hover {background-color:var(--c5);}
.search .thumb {width:27%; height: 9.6em; background-color:grey; float:left; margin-right:3%; background-size: cover; background-repeat: no-repeat; background-position: center;} 
.search .text {width:70%; float:left;}
.search .entry-content { overflow: hidden; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.6em; margin-top: 0.3em; color: var(--c1);}
.search .text .line {margin:0 0 1em 0} 
.search .arrow-link {font-size: 0.7em; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.search-cont {margin:auto; text-align:center;}
.search input[type=search]  {   
  display: inline-block;
  background: #e0f2fe;
  border: none;
  color: var(--c1);
  font-family: inherit;
  font-size: 0.9em;
  padding: 1em 1em 1.3em 1.6em;
  width: 46%;
  height: 60px;
  vertical-align: top;
  margin-right: -6px;
  margin-top: 0;
  border-radius: 0;
  -webkit-appearance: none;}

  ::-webkit-search-cancel-button {position:relative;
  top:3px;
    right:15px;  
  height: 11px;
  width: 11px;
  background-image:url('../img/x3.png');
  -webkit-appearance: none;}  

.search input[type=submit]  {background-image:url('../img/lupa.svg'); padding:0; display:inline-block; background-color: var(--c1); border: none; color: transparent; font-family: inherit;
   font-size: 0.9em; vertical-align: top; width: 60px; height: 60px; background-size: 34%; background-repeat: no-repeat; background-position: center; cursor:pointer;   border-radius: 0; -webkit-appearance: none;}
.search input[type=submit]:hover {background-color: var(--hov1);}
   .search-nav {position:relative; margin: 5em 0 0 0; }

.search .pagination .screen-reader-text {display:none}
.search button {margin: auto;}

.pagination {position: absolute; top:0; right: 0;}
.pagination .page-numbers {margin: 0 0.4em; top: 0; vertical-align: middle; color:var(--c1); }
.pagination .page-numbers.current {color:var(--c4)}
.next.page-numbers, .prev.page-numbers {background-color:white; display:inline-block; width:64px; height:64px; border:1px solid var(--c1); border-radius:50%; color:transparent; position: relative;  background-image: url(../img/arrow1-c1.png); background-repeat: no-repeat; background-position: center;}
.prev.page-numbers { background-image: url(../img/arrow4-c1.png);}
.next.page-numbers:hover {background-color:var(--c1); background-image: url(../img/arrow1.png);} 
.prev.page-numbers:hover {background-color:var(--c1); background-image: url(../img/arrow2.png);}


 
.modal {position: fixed; top:0; left:0; height:100vh; width: 100%; background-color:rgba(0, 0, 0, 0.97); z-index:22}
.modal .logo {z-index:103}     
.modal .text { text-align:center; width: 100%; box-sizing: border-box; padding: 5%;}
.modal h2 {color:white; text-align: center; }                                                                                                                                                                           
.modal .line {background: white; margin: 1.5em auto 1.5em;}
.modal .text p {color:white; width: 25em; margin: 0 auto 1.7em;}
.modal .buttons {text-align: center; margin-top: 2.4em;}
.modal .buttons button {display: inline-block;}
#but-agree { width: 12.3em;border-top-left-radius:0; border-bottom-left-radius:0;  margin-left: -0.4em}
#but-diss {width: 12.3em; border-top-right-radius:0; border-bottom-right-radius:0; background-image: url(../img/arrow2.png); background-position: left 2em center; padding-left: 4em; padding-right: 0;}
#but-diss:hover {background-position: left 1.7em center;}

.spc .content {width: 73%;     max-width: 1040px;}
.spcs { overflow: auto; margin: 3em 0 2em;}
.spc .line {margin: 2.0em 0 2.1em;}
/* .spc-box {float: left; width:22.3%; margin:0 3.5% 3.6% 0; position: relative; background-color: var(--c3); border-radius: 17%;
padding:2%; box-sizing: border-box;}
.spc-box:after { content: ""; display: block; padding-bottom: 100%; }
.spc-box:nth-child(4n) {margin-right:0}
.spc-box .cont1 { position: absolute; width: 82%; top:0; height: 50%;}
.spc-box .cont2 { position: absolute; width: 82%; top:50%; height: 50%;}
.spc-box h3 {position:absolute; right:0; left:0; top: 54%; text-align: center; margin:0; color: white; font-size: 1.3em; font-weight: normal; line-height: 1.1em;}
.spc-box .line {background-color: white; margin:0 auto}
.spc-box .arrow {position: absolute; left: 0; right: 0; margin: auto; bottom: 30%; display:block; transition: bottom .1s ease;}
.spc-box:hover .arrow {bottom:28%}
.spc-box:hover {background-color: var(--hov3);}
.spc-box .dwnld {font-size: 0.7em;   position: absolute;  left: 0;  right: 0;  margin: auto;  bottom: 43%;  color: white;  text-align: center;} */

.spc .content button.mod2 {    width: 13em; float: left; margin: 0 3.1% 3.1% 0;}


.careers .content {padding-bottom: 1em;}
.careers .content ul {width: 100%; box-sizing: border-box;}
.careers .col1 {float:left; width:60%; margin:0 12% 0 0}
.careers .col2 {float:left; width:28%; margin:0 0 0 0; position: relative;}
.careers a {color: var(--c4); font-weight: 500;}
.careers .content .line {margin:0 0 2em}

.positions {margin-top:5em; padding-bottom: 5em; padding-top: 1em; position: relative; overflow:hidden; }

.side-menu2 {display: none; width:100%;     position: absolute; z-index: 2;}
.side-menu2 ul {padding-left:0; width:100%; cursor: pointer;}
.col2 .side-menu2 a {font-weight: normal;}
.positions .selector-cont {position: absolute; top: -0.7em; right:0; left:auto; width: 100%;}

.selector2 {border-radius: 0;}
.side-menu-cont .selector2{border-radius: 0; color:var(--c4) }
.positions .side-menu2 {display:none}
.positions .side-menu-cont a {width:100%; box-sizing: border-box;}
.positions .side-menu-cont a:first-of-type {border-top:1px solid #b4d2e9;}
 .selector2.arrow-but {    z-index: 6; display:block;  height: 64px; width: 100%; text-align: left; background-color:#e1f2ff; background-image: none; font-size: 1rem; line-height: 1.3em; text-transform: none; padding: 1.1em 1.6em; font-weight: normal;}
 .selector2.arrow-but::after { content: ' ';  background-image: url(../img/arrow3-c1.png); background-repeat: no-repeat; 
      background-position: 50% 50%;
      margin-left: 0.1em;
      margin-top: 0.15em; position: absolute; right:1.8em; top: 24px;  width: 13px;   height: 11px;    transition:transform .2s ease;     transform: rotate(0deg);    transform-origin: center center;
  }
 .selector2.rotate-arrow:after {transform: rotate(-180deg);}
 
.selector-cont {display: block; width: 17em; position: relative; top: 0;  padding: 0;  margin-bottom: 2.4em;  left: 0;  float: none; font-size:1rem}
.selector-cont button.arrow-but {color:var(--c4); background-color:#f3ffeb;}
.selector-cont button.arrow-but::after {background-image: url(../img/arrow3-c4.png); }
.selector-cont a { list-style-type: none; display: block; background-color: #f3ffeb; border-top: 1px solid #d5e7bf;     padding: .7em 1.6em; color: var(--c4); width: auto;}
    .selector-cont a:hover {
        background-color: var(--c4);
        color: #f3ffeb;
        border-top: 1px solid #f3ffeb;}
.selector-cont .side-menu2 a {padding: 16px 1.6em; height: 64px; box-sizing: border-box;}

.careers-rows {width:100%; text-align: left; margin: 1em 0 4em;}
.careers-rows tr:not(.thead):hover {background-color: var(--c5);}
.careers-rows th {font-weight: 500; border-bottom: 1px solid var(--c1); padding:.9em 0}
.careers-rows .th1 {width:50%}
.careers-rows .th2 {width:auto}
.careers-rows .th3 {width:auto}
.careers-rows .th4 {width:7.8em; text-align: right;}
.careers-rows td {border-bottom: 1px solid var(--c1); padding:0 0; position: relative;}
.careers-rows .arrow-link {text-align: right; overflow: visible; right:0; left:auto; bottom:auto; display: block;}
.careers-rows .arrow-link::after {transition: background-position .1s ease; background-position: center 60%; padding:0 0 0 25px}
.careers-rows .arrow-link:hover::after {padding:0 0 0 25px; background-position: 12px 60%;}


.careers-rows .tag {position: absolute; right: 6.5%; padding:8px 13px 9px; border-radius: 18px; background-color: var(--c4);}
.careers-rows .tag.latest {display:none}
.careers-rows tr:nth-of-type(2) .tag.latest {display: inline-block;}
.careers-rows a {color:inherit; display: block; width: 100%; padding: 0.9em 0 .9em 0.2em; font-weight: normal;}
.positions .misha_loadmore, .positions #loadmore {margin:0 auto}

/*new loadmore*/

/* single-careers */
.single-careers .content { width: 70%; padding-top: 0;}
.single-careers .content.first {padding-top:8em}
.single-careers .content .biggertext {margin-bottom: 3em;}
.single-careers .notice {margin-bottom: 2em;}
.single-careers .content h2 {margin-top: 2em;}
.single-careers .content h2:after {    content: ""; display: block; background-color: var(--c1); width: 4.7rem; height: 1px; margin: 2rem 0 2rem;}
.single-careers .green-block {background:#f5fded; padding: 1em 0 4em; margin: 4em 0 6em;}

.single-careers .content ul {
  list-style: none;
  padding-left: 1.3em;
}
.single-careers .content ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  font-size:1.2em;
  color: var(--c4); /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.single-careers .positions {width: 80%; margin:auto}


.banner-employees-benefits {padding: 5em 5% 0px;}
.banner-employees-benefits .col {margin-bottom:6em}


.smallertext {font-size: 14px!important; line-height: 1.7;}
.contact-footer-texts .text-right-1{display: none;;}
.contact .row.contact-footer-texts .col.left {padding-top: 0px;}
.contact .row.contact-footer-texts a {  color: var(--c4);}
.row.contact-footer-texts {margin-bottom: 4em;}