:root {
    --c1: #0CB0FF;
    /* --c2: #BCB29C; */
  }
  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} .clear{clear:both} *{box-sizing: border-box;}

body, html {height:100%;}
body {  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal; font-size: 21px; font-size: 1.4vw;  line-height: 1.35em; background-color: #fff; color:#000;  }
h1 {font-size: 6.2em; font-weight: 400; margin-top: 0.2em; margin-bottom: 0.4em; line-height: 1em;}
h2 {font-size: 2.35em; font-weight: 400; line-height: 1.15em; margin-top: 0em; margin-bottom: 0.4em;}
h3 {font-size: 1.8em; line-height: 1.2em; font-weight: 700; margin-top: 0em; margin-bottom: 0.5em;}
h4 {font-size: 1em; font-weight: 700; margin-bottom: 0.4em; text-transform: uppercase; line-height: 1.4em;}
h5 {font-size: 1.5em; font-weight: 700; margin-bottom: 0.8em; line-height: 1.2em;}

a {color:white}
.row { position: relative; } .col {float:left; width: 50%;}
.clearfix:after { content: ""; display: table; clear: both;}
.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
/* section {overflow:auto} */
a {color:var(--c1)}
img {color:transparent; display: block;} 
.img100 {width: 100%;}
::-moz-selection { background: #e6e1b0; color:black }
::selection { background: #e6e1b0; color:black } 
p {margin-bottom: 2.2em;}
.container {margin:auto;  left: 0; right: 0; width:95.5%; position: relative;}
.movethis {opacity: 0; transform: translateY(2em); transition: all 0.7s ease;}
.fade-up {transform: translateY(0); opacity: 1;}

/*nav*/
.topbar { position: absolute; width: 100%; height: 4em; }
.topbar .logo { filter: brightness(0);      position: relative;
    z-index: 1; display: block;margin: 1em 0 0 1.2em; width: 9.2em; transform: translateY(-1em); opacity: 0; animation: logo 0.5s .1s ease forwards;}
    @keyframes logo { 0% {opacity:0; transform: translateY(-1em)}    100% {opacity:1; transform: translateY(0)}    }
.nav-cont {  position: absolute; right: 3em; top: 1.8em; margin-left: 2.3em; margin-top: 0.18em; text-transform: uppercase; z-index: 1; opacity: 0; animation: nav 0.5s .5s ease forwards;}
    @keyframes nav {  0% {opacity:0; transform: translateY(-1em)}  100% {opacity:1; transform: translateY(0)}    }
.nav-cont li {float:left; letter-spacing: 0.0em; margin: 0 0 0 1.6em; font-size: 0.65em; position: relative;}
.nav-cont li a {letter-spacing: 0em; color: #000;}
.nav-cont li a:hover {text-decoration: underline;  text-decoration-thickness: 0.2em; text-underline-offset: 0.6em;   }

/*menu mobile*/
#ham {transition:opacity 1s; display: none;}
.menu {width:100%; height:100%; padding: 5em 10% 0; color:black; background:var(--c1); position:fixed; top:0; left:0;  opacity: 0; visibility: hidden; transition: opacity 0.5s,  visibility 0s 0.5s; z-index:100;  }
.menu .nav-cont {display:block; position:static; }
.menu {flex-direction: column;}
.menu .nav-cont {margin:5em 0 ;}
.menu .nav-cont li {float:none; text-align:left; margin:0 auto .8em; font-size:7em;}
.menu .nav-cont li a {color:white}

.menu .logo {width: 12em; /*filter: invert(1);*/ margin-bottom: 2em;}
.open-menu { opacity: 1;  visibility: visible; transition: opacity 0.5s; }

.intro { height: auto; background-color: white; position: relative;}
    #mask-svg {width: 81.4%; margin-top: 1.4em; margin-left: 17%;}
    .masked-video {width: 80%; margin-top: 1.1em; margin-left: 18%; height: auto; mask: url('../img/78-mask.svg') no-repeat center; -webkit-mask: url('../img/78-mask.svg') no-repeat center;  mask-size: contain; -webkit-mask-size: contain; opacity: 0; animation: vid 0.5s .2s ease forwards;}
        @keyframes vid { 0% {opacity:0; transform: translateX(-0em)}   100% {opacity:1; transform: translateX(0)}    }

.circle {position: absolute;  bottom: -2.3em; left: 83%; z-index: 3; display: block;
    width: 14%; height: auto; animation: rotate 20s linear backwards infinite; /* mix-blend-mode: exclusion; */ }
            @keyframes rotate {
            0%   {transform: rotate(360deg) }
            100% {transform: rotate(0deg)}
            }

.t1 {margin-top: 4em;}
.t1 .container {/*overflow: auto;*/ display: flex;}
.t1 .title-section {width: 67%; box-sizing: border-box; padding-right: 13%;}
.t1 .description {width: 37%; margin-top: 0.6em;}

.partners {    margin-top: 1em;    height: 8.5em; overflow: visible; border-top: 1px solid #C1C1C1; /*border-bottom: 1px solid #C1C1C1;*/}
.partners .img-cont {width: 20%;     height:100%; float: left; position: relative; display: flex; align-items: center; justify-content: center;}
.partners img {display: block; width: 60%; opacity: 1; transition: opacity .4s ease; } 
.partners img.fade-out {opacity: 0;}

/* Ensure no layout shift during fades (images keep size) */
.partners .img-cont img { backface-visibility: hidden; -webkit-backface-visibility: hidden; top:50%; transform:tramnslateY(-50%); left: 0; right: 0; margin: auto; position: relative; display: block;} 

.partners .img-cont:after { content: '';
  position: absolute; right: 0; top: 0; width: 1px; height: 200%; top: -50%; 
  background: linear-gradient(to bottom, transparent 0%, #C1C1C1, transparent 100% );  
}

.showreel {position: relative;}
.showreel video {width: 100%; display: block;}
.showreel .texts {display: flex; justify-content: space-between; position: absolute; top:50%;
color: white; text-transform: uppercase; font-size: 1.6em;}
.showreel .overlay {position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.2);}

.skills {margin-top: 6em; height: auto; overflow: visible; border-top: 1px solid #C1C1C1; }
.skills .skill-item {width: 25%; height:17vw; float: left; position: relative; display: flex; align-items: center; justify-content: center;
border-bottom: 1px solid #C1C1C1;}
.skills img {display: block; width: 60%;} 
.skills p {margin-bottom: 0; font-size: 1.2em; /*color: var(--c1);*/}
.skill-item:nth-child(1) p, .skill-item:nth-child(3) p, .skill-item:nth-child(6) p, .skill-item:nth-child(8) p, .skill-item:nth-child(9) p, .skill-item:nth-child(11) p
{font-style: italic;}
.skill-item:nth-child(2) p, .skill-item:nth-child(4) p, .skill-item:nth-child(5) p, .skill-item:nth-child(7) p, .skill-item:nth-child(10) p, .skill-item:nth-child(12) p
{font-weight: 700;}


.skills .skill-item:after { content: '';
  position: absolute; right: 0; top: 0; width: 1px; height: 200%; top: -50%; 
  background: linear-gradient(to bottom, transparent 0%, #C1C1C1, transparent 100% );  
}

/* .skills .skill-item:nth-child(6):after { content:none;} */




.banner1 {margin-top: -0.1em;}
.banner1 .container {width: 100%; background-color:#FBEFE1; padding:9em 16%; text-align: center; color:var(--c1); position: relative;}
.banner1 h2 { font-size: 4em; line-height: 1em;}
.banner1 p {width: 48%; margin: auto; font-weight: 500;}
.banner1 .tags {display: flex; flex-wrap: wrap; margin: 3.2em auto 0;  justify-content: center;}
.banner1 .tags p {width: auto; background-color:white; color:#6248F2; border-radius: 2em; font-size: 0.6em; font-weight: 700; padding: 0.1em 1.6em; margin: 0 0.3em 0.5em;}



/* --- glass ----------------------------*/
.glass-container {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent;
  border-radius: 9em;
  overflow: hidden;
  flex: 1 1 auto;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.0);
  color: var(--lg-text);
  /*transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);*/
}

.glass-container {width: 6em; height: 6em; position: absolute; top: 31%; left: 23%; will-change: transform;  animation: slideLR 7s ease-in-out infinite;}
@keyframes slideLR { 0%   { transform: translateX(0); } 50%  { transform: translateX(42vw); } 100% { transform: translateX(0); }}
:root { --lg-bg-color: rgba(255, 255, 255, 0.25);   --lg-highlight: rgba(255, 255, 255, 0.75);}
.glass-container--small {flex: 0 1 auto;}
.glass-filter, .glass-overlay, .glass-specular { position: absolute; inset: 0;  border-radius: inherit;}
.glass-filter {  z-index: 0;  backdrop-filter: blur(4px);  filter: url(#lensFilter) saturate(100%) brightness(1.0);}
.glass-overlay {  z-index: 1;  background: var(--lg-bg-color);}
.glass-specular {  z-index: 2;  box-shadow: inset 1px 1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);}
.glass-content {  position: relative;  z-index: 3;  display: flex;  flex: 1 1 auto;  align-items: center;  justify-content: space-around;  padding: 12px 28px;  gap: 1rem;  flex-wrap: wrap;}


.t3 {margin-top: 4em;}
.t3 .container { display: flex;}
.t3 .title-section {position: relative; width: 67%; box-sizing: border-box; padding-right: 7%;}
 .t3 .title-section h2 {z-index: 1; position: relative;}
.t3 .signature {position: absolute; top:7em; right: 28%; width: 27%; z-index: 0;}
.t3 video {width: 37%; height: 36em; object-fit: cover; display: block;}
.circle.circle2 {  bottom: -4.6em;
    right: 29%; left: auto;}
.t4 {margin-top: 7em;}
.t4 h2 {width: 88%;}
.btn-all-works {position: absolute; right: 0; bottom: 0; display: flex; color:black; margin-top: 1.6em; text-transform: uppercase; font-size: 0.8em; font-weight: 600; letter-spacing: 0.1em; padding: 0 0 0 0;}
.btn-all-works img {width: 1.2em; margin-left: 0.6em; transition: transform 0.1s ease;}
.btn-all-works:hover img {transform: translateX(0.7em);}
.btn-all-works.btn-all-works2 { bottom: -2em; right: auto;}
.works {margin-top: 2em; overflow: visible;}
.works .container {width: 97.75%; margin-right:0; margin-left: auto; }

.work-tile {position: relative; overflow: hidden; cursor: pointer; float: left; object-fit: cover; display: block; margin-bottom: .5vw;}
.work-tile img {width: 100%;height: 20em; object-fit: cover; display: block; transition: transform 0.5s ease; ;}
.work-tile video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; ;}
.work-tile .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.2) 100%);}
.work-tile__content { position: absolute; bottom: 1.3em; left: 1.6em; color: white; }
.work-tile__content h3 {margin-bottom: 0.0em;}
.work-tile__content p {margin-bottom: 0; text-transform: uppercase; font-size: 0.8em; font-weight: 700;}

.work-tile:nth-child(5n+1), .work-tile:nth-child(5n+2) { width: 49.75%; }
.work-tile:nth-child(5n+1) { margin-right: .5%; }
.work-tile:nth-child(5n+2) { margin-right: 0; }
.work-tile:nth-child(5n+3), .work-tile:nth-child(5n+4), .work-tile:nth-child(5n+5) { width: 33%; margin-right: .5%; }
.work-tile:nth-child(5n+3) img, .work-tile:nth-child(5n+4) img, .work-tile:nth-child(5n+5) img { height: 15em; }
.work-tile:nth-child(5n+5) { margin-right: 0; }

.work-tile:hover img { transform: scale(1.1); }

.t5 {padding: 6em 0 5em;}
.t5 h2 {text-align: center; font-weight: 300; width: 94%; margin: auto;}

.glass2 {top: 2%; left: 2%; animation: slideLR2 10s ease-in-out infinite; }
@keyframes slideLR2 { 0%   { transform: translateX(0); } 50%  { transform: translateX(80vw); } 100% { transform: translateX(0); }}
.glass2 .glass-overlay {background: #00deff3d;}


/* .showreel2 {position: relative;} */
/* .showreel2 video {width: 80%; display: block;} */
.showreel2 .masked-video {
    width: 61%;}


    .big-title-super-cont {overflow: hidden;}
.big-title, .big-title2 { font-size:8em; position:relative; left:-57vw; white-space: nowrap; /* right: 181vw; */     font-family: "Jost", sans-serif;
    font-style: normal;

    font-weight: 400;
    margin-top: 0.2em;
    margin-bottom: 0.4em;
    line-height: 1em;
    /* animation: big-title 5s linear alternate infinite; */
}
    @keyframes big-title {
        0%   {transform: translateX(-200px) }
        100% {transform: translateX(500px)}
        }



.news {
    /* background-color:#FAFEFF;  */
    margin-top: 4em;}
.news .container {display: flex; width: 100%;}
.news h3 {font-size: 2em; font-weight: 400; color:black}
.news h3 a {color:black;}
.news-item {  position:relative; width: 33.3333%; margin-right: 0%; padding: 1.7em 2.2% 0; border-top: 1px solid #C1C1C1; border-bottom: 1px solid #C1C1C1;  }
/* .news-item:hover p, .news-item:hover h3 {color: var(--c1);} */
.news .news-item:after { content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 200%; top: -50%; 
  background: linear-gradient(to bottom, transparent 0%, #C1C1C1, transparent 100% );  }
.news a p {color:black}
.news p {position: relative;}
.news .fade { display: block; position: absolute; bottom: 0; right: 0; width: 100%; height: 3em; background: linear-gradient(to top, white 0%, transparent 100%);}
.news-item .arr {display: none; position: absolute; right: 5%; bottom: 1.3em; width: 1.2em;}
.news-item:hover .arr {display: block;}
.news-item:hover {border-top: 1px solid #000; }
    .btn-all-works3 {top: -4.5em; bottom: auto; right: 1.5em; left: auto;}



/*all work page*/
.all-works {padding-top: 5em;}


/* single page */
.single { padding-top: 5em;}
.single h1 {margin-bottom: 0.1em;}

.single .content {width: 60%; margin-top: 0.8em; margin-bottom: 2em;}
.single .imgs img {width: 100%; margin-top: 0.4em;}
.single iframe {width: 100%; height: 53vw; border: none; display: block; margin:2em 0 1em}
.single .type {display: inline-block; width: auto; background-color: #FBEFE1;  color: #6248F2; border-radius: 2em; font-size: 0.6em; font-weight: 700; padding: 0.1em 1.6em; margin: 0 0.3em 0.5em;}

.single .btn-all-works { position: relative; right: auto; bottom: auto; margin-top: 0; }

/*novinky page*/
.news-page .news{margin-top: 0; padding-top: 6em;}
.news-page .container {flex-wrap: wrap;}

/* single novinka */
.single.novinka { padding-top: 5em; }
.single.novinka h1 {margin-bottom: 0.1em;}
.single.novinka .content {width: 60%; margin-top: 0.8em; margin-bottom: 2em;}
.single.novinka .imgs img {width: 100%;}
.single.novinka iframe {width: 100%; height: 53vw; border: none; display: block; margin:2em 0 1em}
.single.novinka .type {display: inline-block; width: auto; background-color: #FBEFE1;  color: #6248F2; border-radius: 2em; font-size: 0.6em; font-weight: 700; padding: 0.1em 1.6em; margin: 0 0.3em 0.5em;}

.single.novinka .btn-all-works { position: relative; right: auto; bottom: auto; margin-top: 0; }