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} 
.clear {clear:both}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
::-moz-selection { background: black; color:white }  ::selection { background: black; color:white } 

body, html {height:100%;}
/*html{-webkit-text-size-adjust: none;}*/ /*stop font resizse ios - better to have thin in media queries*/ 
.clearfix:after { content: ""; display: table; clear: both;}

/*::-webkit-scrollbar { display: none; }*/
html {height:100% }
 section {overflow:auto}
.container {margin: 5em 0 15em 10%;
    width: 80%;
    max-width: 1500px;}



body {font-family: 'Lato', sans-serif;
  font-weight: normal; font-style: normal;
  font-size: 17px;
  font-size: 1.1vw;
  color: #505a69;
  color:#333;
  color:#000;
  height:100%;
   }
p{line-height: 2em;}     
h1{font-size: 33px; font-size: 3.5em; font-weight:normal;  color:#000; line-height: 1.1em; letter-spacing: 0.00em;}
h2{font-size: 20px; font-size: 2.1em; font-weight:normal; line-height: 1.2em; letter-spacing: -0.04em;}
a {color:#000; } a:hover {}
nav li:hover {text-decoration: line-through; color:#c1c1c1}

#preloader  {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color:black;z-index: 99999;height: 100vh; width:100% }
#status  { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background-image: url(../images/preloader.gif); background-repeat: no-repeat; background-position: center;  margin: -100px 0 0 -100px; }
.whiteout {position: absolute; top: 0;left: 0; z-index: 99999; height: 100vh; width:100% ; width:100%; height:100%; background-color:white; position:fixed; opacity:1; }

.hide {opacity:0; }


.toggle-menu {display: block; position: fixed; left: calc(4% - 3em); top: calc(5% - 3em); font-size: 17px; cursor: pointer; z-index: 1;  transition: all .2s ; 
 z-index: 101; padding:3em; 	
 
 /*chrome anim end bug - nevim jesli vyresilo */	
 -webkit-backface-visibility: hidden; 
 -webkit-transform: scale(1);}
 
.dot {background:black; width:1em; height:1em; border-radius:50%; 
    transition: all .4s; 
    animation:blik-on-load 1s 1.2s ease; 
    animation-fill-mode: forwards;
    
  }
.toggle-menu .in-menu{background:white;}
.toggle-menu:hover .dot {transform:scale(1); animation:dot-on-hover .5s 0s ease; animation-fill-mode: backwards;}

@keyframes blik-on-load {
0%  {transform:scale(0)}
20% {transform:scale(2.0)}
60% {transform:scale(.9)}
100%{transform:scale(1)}
}

@keyframes dot-on-hover {
0%  {transform:scale(.5)}
20% {transform:scale(1.2)}
60% {transform:scale(.9)}
100%{transform:scale(1)}
}



.menu {width:100%; height:100%; background:#161719; position:fixed; top:0; left:0; text-align: center; 
      display: flex;
  /*justify-content: center;*/
  align-items: 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.2s;
    }
.overflow-hidden {overflow:hidden;}


.menu-center-cont {margin-left:20%; width:63%; line-height: 1.6em; text-align: left; }


nav { display:block; float:left; font-size: 2.2em;  color:white;  transition:all 1s;   opacity:0;   transform:translateY(-0.3em);    }
.nav-show {opacity:1; transform:translateY(0)}    
nav a{color:#eff2f7; transition:color 0.0s; cursor:pointer}
nav a:hover{}



nav li{  float: none; font-size: 1.1em; padding-bottom: 0.8em; font-weight: 700;}
nav li a {color:white}


.contact-in-menu {float:left; color: #a7a6a6; margin-left: 20%;  transition:all 1s;   opacity:0;   transform:translateY(-0.3em);  }
.contact-in-menu h3 {font-size: 2.2em;}
.contact-in-menu p {line-height: 1.6em; font-size: 0.9em; margin-top: 1.2em;}
.contact-in-menu-show {opacity:1; transform:translateY(0)}

.about {float:left; color: #a7a6a6; margin-left: 20%;  transition:all 1s;   opacity:0;   transform:translateY(-0.3em);    width: 24%;  }
.about h3 {font-size: 2.2em;}
.about p {line-height: 1.6em; font-size: 0.9em; margin-top: 1.2em;}
.about-show {opacity:1; transform:translateY(0)}

                                           
#mobile-menu {display: none;}

.waypoint-menu-change-color {position:relative; top:-3em}
.toggle-menu .menu-change-color {background:white;     margin-left: 0.6em;}

.logo {display: block; position: fixed; right: 4%; top: 5%; font-size: 1.3em; cursor: pointer; z-index: 101;  color:black; font-weight: 700; transition: all .4s;} 
.logo:hover {color:#adadad}
.logo-change-color {color:white; margin-right: 1em; }
.logo.in-menu{color:white;}

.flex {display:flex; height:100%;}
.flex-left {width:100px;height:100% }
#home{position:relative;box-sizing: border-box;}



.main-title {width:80%; margin:auto; left: 3.7%; top: 40%; position:absolute; color:white}
.main-title h1 {font-size: 4.2em; color: white; font-weight: 700;}
.main-title h2 {letter-spacing:0; font-size:1.3em; margin-top: 0.6em;}

.introtext { height:auto; height: 690px; height: 80vh; transition: opacity 2s .2s, transform 1s .2s; transform:translateY(0)}
.introtext .quote {width: 70%; padding: 28vh 0 0 4%; text-align: left;}
.introtext h1 { font-size: 4.2em; margin-bottom: 0.3em; letter-spacing: -0.01em; font-weight: 700;}
.recent { position: relative; bottom: 2em; left: 4%; width: 10em; opacity:0; animation:show 1s 1s ease; animation-fill-mode: forwards;}
.recent img {height:0.8em; transform: translateY(0.06em);}
@keyframes show { 0% {opacity:0} 100%{opacity:1}}
.reveal-from-bottom {transform:translateY(1em)}


/*.logo {width:53px; position:fixed; z-index:11; display:block;     top: 17px; left: 23px; cursor:pointer; }*/



.intro-cont {overflow:hidden}
.intro {/*background-image: url("../images/bg1.jpg");
    background-color: rgb(49, 49, 49);
    background-size: cover;
    background-position: 50% 50%;*/
    height: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    }
.row-works {padding: 0 3.9%; display: flex; animation:go-in 1.5s ease; animation-fill-mode: forwards;}
@keyframes go-in { 0%  {transform:translateY(150px)} 100%{transform:translateY(0)}}   

.col {width:50%; float:left; position: relative;}
.work {height: 30vw; width:100%; overflow:hidden; position:relative; cursor: pointer;} 
.fullwork {height: 60vw; width:100%; overflow:hidden; position:relative;} 
.growimg{display:block; transition:transform .6s cubic-bezier(0.45, 0.005, 0, 1); transform:scale(1.01) ; -webkit-backface-visibility: hidden; }
.work:hover .growimg{transform:scale(1.1)}

.work::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
    pointer-events: none;
}




.fullwork img, .halfwork img{width:100%} 
  
.caption {position: absolute; bottom: 3.3em;left: 4em; width:50%; z-index: 2;}
.caption h2, h3{color:white; font-weight:700}

.caption .cara {position: absolute; bottom: -9.5em; left: -30%; width: 2.40em; transition:all 0.3s ease-in-out;}
.work100 .caption .cara { left: -15%; }
.work:hover .caption .cara{     bottom: 0.1em; left: -12%;}
.work100:hover .caption .cara { bottom: 0.1em; left: -6%;}

.caption h2 {transform: translateX(-5%); transition:transform 0.3s ease-in-out; transition-delay: 0.05s;} 
.caption h3 {transform: translateX(-5%); transition:transform 0.3s ease-in-out; font-size: 1em;}

.work100 .caption h2 {transform: translateX(-3%);}
.work100 .caption h3 {transform: translateX(-3%);}

.work:hover .caption h2 {transform: translateX(0)}
.work:hover .caption h3 {transform: translateX(0)}
.page-inner { width:100%; height:100%; }
.page {background-color:#f2f2f2; z-index:0; position:relative; top:0; left:0; width:100%; overflow:auto; padding-left: 100px; box-sizing:border-box;
-webkit-transition: all 600ms cubic-bezier(0.895, 0, 0.255, 1.000); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(0.895, -0.005, 0.255, 1.000); 
   -moz-transition: all 600ms cubic-bezier(0.895, -0.005, 0.255, 1.000); 
     -o-transition: all 600ms cubic-bezier(0.895, -0.005, 0.255, 1.000); 
        transition: all 600ms cubic-bezier(0.895, -0.005, 0.255, 1.000);}


.show {display:block}
.vpravo {left:100%}
.nascene {left:0}

.videogrid { 
    height: 100%;
    object-fit: cover;
    position: static;
    width:100.05%;
    
    display: block;
    transform: scale(1);
    transition: transform 1s ease-in-out;
    background: black;


}

.video-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    background: black;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 0;
}

.video-cont {width:100%}
 .videoWrapper {
	position: relative;
	padding-bottom: 54.35%;; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


#video100 {
    position: static;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: 100%;
    cursor:pointer;
    display: block;
    
}

.video100-cont {position:relative}

#video70 {
    position: static;
    display:block;
    margin:2em auto;
    
    height: auto;
    width: 50%;
    cursor:pointer;
    display: block;
    
}

.video70-cont {position:relative}


.play-button {    position: absolute;
    top: 34%;
    margin: auto;
    width: 7em;
    left: 0;
    right: 0;
     opacity: 0.9;}
video[poster]{

object-fit: cover;
}

.img100 {width:100%}
.tile figure span .pozice {font-size:0.4em; display: block; padding-top: 0; padding-bottom: 0; font-style: italic;}

.skills {background:black; padding:6em 4%; box-sizing:border-box}
.skills div{width:30%; float:left}
.skills h3 {font-size: 1.3em; margin-bottom: 1.1em;}
.skills div p {line-height: 2.5em; font-size:.8em; color:white}
.skills div p span {display:block; opacity:0; transform: translateY(20px);
    transition: all 1.1s cubic-bezier(.23,1,.32,1);}
.skills div p.show-skillz span {transform: translateY(0); opacity:1;}
.skills div p.show-skillz span:nth-child(1){transition-delay: .2s; }
.skills div p.show-skillz span:nth-child(2){transition-delay: .4s; }
.skills div p.show-skillz span:nth-child(3){transition-delay: .6s; }
.skills div p.show-skillz span:nth-child(4){transition-delay: .8s;}
.skills div p.show-skillz span:nth-child(5){transition-delay: 1s; }




.skills .contact, .skills a {color:#ffffff} 



.project-flex {display:flex}
.project-text {margin:7%}
.project-text h1, .project-text-half h1, .project-imagery-dark h1{margin-bottom:1em}
.project-text p {width:70%}
.project-text-half {width:50%; float: left; padding: 5em 5em; box-sizing: border-box; ;}
.fullwork {width:100%;background: black; }

.project-imagery-dark {padding: 12em 5em 12em 10%;background-size: 85em; background-position: 414% 0%; background-repeat: no-repeat; background-color: black;}
.project-imagery-dark h1{color:white; width:100%; margin-bottom: 0.6em; font-weight: 700;}
.project-imagery-dark .text{color:#ccc; width:40%}


.page-intro {position: relative;  height:800px; height: 90vh; background-size: cover;overflow: hidden;}
.page-cider .page-intro {background: black; background-size: cover;  background-position: center; background-repeat: no-repeat;}
.page-intro h1 {color:white}
.page-intro .fullwork {height:100%} 
.logo-tag {width:10%; position:absolute; right:0; top:11%}
.page-half-right {width: 50%; height: 100%; display: block;}

.chapter {padding: 6em 4% 13em; overflow: auto;}
.chapter-left {float:left; width:35%; box-sizing: border-box;}
.chapter-left h2 {font-size: 1.2em; margin-bottom:2em; font-weight: 700;}
.chapter-left h3 {font-size: 1.2em; color:#b6b6b6}  
.chapter-right {float:left ;width:58%; box-sizing: border-box;}
.chapter-right h1, .example h1 {font-size: 1.5em;
    width: 77%;
    line-height: 1.3em;
    margin-bottom: 1.7em;
    font-weight: 700;}
.chapter-right p, .example p  {color: #b6b6b6; font-weight: normal; line-height: 1.7em;}


.mobiles {width:100%; text-align: center; padding: 10em 0; background: #efefef;}
.mobiles img {display:inline-block; width: 19%; margin: 0 3%;}

.example {width:100%; overflow:hidden; margin-top:8em; padding-bottom: 8em;}
.example-left {width:47%; float:left; display:block; margin-left:5%; position:relative}
.ipad-blank {display:block; width:100%}
.example-right {float:left; width:46%; box-sizing: border-box; padding: 6em 5em 3em 8em; }
.swiper-cliping-mask {position: absolute; background: white; top: 5%; left: 20%; width: 72.7%; height: 81.1%;}

.example.sqares .example-left {width:40%}
.example b {font-weight: 800; color:black}

.screens {padding:5em 0}
.screens img {width:50%; display:block; margin:2em auto}

#page-alca .first {margin-top:0em}


.posters-cont {margin:5em 0 15em 10%; width:80%; max-width: 1500px; display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8em;}
.posters h1 {margin: 5em 0 0.3em 10%; font-size: 2em;}
.posters p {margin: 0em 0 3em 10%;}
.posters-cont img {width: 100%; display: block; }
.posters .sto {width: 100%;}

.threedee {margin:5em 0 5em 10%; width:80%; max-width: 1000px;}
.threedee img {width: 100%; display: block; margin-bottom: 3em;}

.two-in-row img {float:left; width:47.4%; margin-right: 5%;}
.two-in-row img:nth-child(2n) {margin-right: 0;}

.standalone {margin-bottom: 3em;}
.maskot {overflow: auto; margin-bottom: 3em;}
.maskot video {float:left; width:32%; margin-right: 2%; margin-bottom: 0.9vw;}
.maskot video:nth-child(3n) {margin-right: 0;}
.foot-contact-container {position:relative; overflow: hidden;}
.foot-image {width:100%; display: block;}

.kontakt {position: absolute; color:white; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; width: 100%;  text-align: center;}
.kontakt h1 {color:white; font-weight: 700;}
.kontakt p { margin-top: 1em; line-height: 1.4em; letter-spacing: 0.15em; font-size: 1.2em;}
.kontakt a {color:white}

.single-page {margin-top:15em; }
.ux {font-size: 1.5em;}
.ux a {line-height: 1.8em; text-decoration: underline; }