@charset "UTF-8";

* {margin: 0; padding: 0;}

a {text-decoration: none; color: #FFF;}

a:hover { color: #000; }

h1 span, h2 span, h3 span { color: #000; }

.cleaner { clear: both; height: 0px; border: 0px;}

/* This class is added on scroll */
.fixed {
	position: fixed; 
	top: 0; 
	height: 70px; 
	z-index: 9999;
}

body {
  background: #fff;
	color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18px;
	text-align: center;
	padding: 0px;
	margin: 0px;
}

/* Font Face Settings */
@font-face {
	font-family: 'Source Sans Pro', sans-serif;
}	

/* Nadpis Settings */

.subnadpis { background: url('/images/bck.nadpis.png'); width: 360px; height: 38px; background-repeat: no-repeat; font-size: 14px; margin: 10px; padding: 10px; text-align: left; font-weight: normal; }


/* Hlavicka Settings */

.hlavicka { overflow: hidden; z-index: 1; }
.hlavicka img { width: 100%; }


/* Navigation Settings */
nav {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 70px;
	background: url('/images/bck.menu.png');
	z-index: 99999;
	position: fixed;
	padding: 0px; margin: 0px;
}

nav li {
	display: inline-block;
	padding: 24px 10px;
	z-index: 999999;
}

nav li a {
	color: #fff;
	text-transform: uppercase;
}

.mail {
	position: absolute;
	top: 22px;
	width: 200px;
	height: 70px;
	left: 0px;
	z-index: 99999;
	position: fixed;
}

.socials {
	position: absolute;
	top: 22px;
	width: 200px;
	height: 70px;
	right: 0px;
	z-index: 99999;
	position: fixed;
	padding: 0px; margin: 0px;
}

section .box {
	/* height: 100vh; */
	margin: 0 auto;
	z-index: 2;
}

/* Screens Settings */



#intro { background: url('/images/bck.intro.jpg'); background-size:  cover; }
#about {  background: #c0c0c0; background-size:  cover;  }
#graphic {  background: #000; background-size:  cover;  }
#clients {  background: #0a0a08;  }
#fatte {  background: url('/images/bck.fatte.jpg'); background-size:  cover;  }
#fatteNoMore {  background: url('/images/bck.fatte.no.more.jpg'); background-size:  cover; }
#showreal { background: url('/images/bck.showreal.jpg'); background-size:  cover; }
#zln {  background: url('/images/bck.zln.jpg'); background-size:  cover;  }
#multimedia {  background: url('/images/bck.multimedia.jpg'); background-size:  cover; }
#contact {  background: url('/images/bck.contact.jpg'); background-size:  cover; }

#akce, #about, #fatte, #graphic, #fatteNoMore, #clients, #showreal, #zln, #multimedia, #contact {	
	position: relative;
	min-height: 100vh; 
}

#about { top: 0px !important; background-repeat: no-repeat; min-height: 100vh; }
#about .hlavicka img.vetev { height: 100%; width: auto; float: left; }
#about .hlavicka img.vrana { height: 100%; width: auto; float: right; }

#about .box { width: 50%; margin: 0 auto; text-align: center;}
#about ul { list-style: none; margin: 0 auto; padding-top: 40px;}
#about ul li { display: inline-block;  width: 12%; font-size: 0px; }
 .tagy ul {
	 width: 25%; margin: 0 auto;
	text-align: center;
	display: none;
}



.scrolldown { width: 20%; text-align: center; margin: 0 auto; padding-top: 300px; text-transform: uppercase; }
.scrolldown span { color: #c0c0c0; }

.tagy ul li { font-size: 12px; color: #666; text-transform: uppercase;  display: inline-block;	list-style-type: "#";
 }


#graphic h1 { width: 70%;  display: inline-block;}
#graphic .graphic-menu { float: right; width: 25%;}
#graphic .graphic-menu ul li { display: inline-block; }

#graphic .box { }

#graphic .box h1 { width: 49%; float: left; padding-left: 20px; }
#graphic .box .graphic-menu { float: right; width: 49%; text-align: right; }
#graphic p { width: 50%; margin: 0 auto;}

#graphic #graphic-works { width: 100%;  overflow: hidden; text-align: center; }
#graphic #graphic-works .work { width: 25%; height: 255px; padding: 0; margin: 0; float: left; position: relative; z-index: 2;  }
#graphic #graphic-works .work img { width: 100%; padding: 0; margin: 0; float: left; height: 100%; }
#graphic #graphic-works .work div { visibility: hidden; position: absolute; z-index: 3; }
#graphic #graphic-works .work:hover div { visibility: visible;     width: 100%; height: 100%;
    padding-top: 20%; text-transform: uppercase;
}
#graphic #graphic-works .work:hover img { filter: blur(20px);	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s; }


#multimedia .box { text-align: center;}
#multimedia p { width: 50%; margin: 0 auto;}
#multimedia ul { width: 50%; margin: 0 auto; text-align: center; height: 200px; padding-top: 20px; z-index: 400;  }
#multimedia ul li { display: inline-block; height: 150px; font-size: 13px; width: 17%;}
#multimedia ul li  p { color: #45c7ea;}


#multimedia #works { width: 100%;  }
#multimedia #works .work { width: 25%; padding: 0; margin: 0; float: left; position: relative; z-index: 2;  }
#multimedia #works .work img { width: 100%; padding: 0; margin: 0; float: left; height: 100%; }
#multimedia #works .work div { visibility: hidden; position: absolute; z-index: 3; }
#multimedia #works .work:hover div { visibility: visible;    background: url('../images/hoverW.png'); width: 100%; height: 100%;
    padding-top: 20%; text-transform: uppercase;
}

#multimedia #works .work:hover div { visibility: visible;     width: 100%; height: 100%;
    padding-top: 20%; text-transform: uppercase;
}
#multimedia #works .work:hover img { filter: blur(10px);	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	transition: all 0.7s; }
	
	
.descr p { color: #b6b6b6; padding-bottom: 20px; }
.descr a.more { border: 2px #4d575d solid; padding: 10px; width: 200px; display: block; margin: 0 auto; }


.box { width: 100%; margin: 0 auto !important; text-align: left; color: #000; position: absolute; color: #FFF;  top: 200px; left: 0px; right: 0px;  }

#graphic .box { top: 100px !important; }

#contact .box { width: 1000px; margin: 0 auto; text-align: left; color: #000; position: absolute; color: #FFF;  top: 20% !important; left: 10%;  }

#fatte .info { width: 49%; margin-left: 50%; padding-top: 150px;}

#fatte .info h1,#fatte .info h2, #fatte .info p, #fatte .info ul { padding: 0px; text-align: left; }
#fatte .info ul  li { width: 10%; display: inline-block; }
#fatte .info p { font-size: 14px; }
#fatte .info h1 { text-transform: uppercase; }

#fatte .david { width: 50%; float: left; overflow: hidden; }
#fatte .david img {visibility: hidden;}
#fatte .david h2 { display: none;}

#fatte .desky { width: 100%; margin: 0 auto !important; position: relative; z-index: 1;  text-align: center;  filter: blur(0px); top: 200px; height: 300px; display: block; background: url('../images/bck.fatte.desky.png');background-size:  cover;}
#fatte .desky .deska { width: 15%; font-size: 12px; text-align: center; display: inline-block; z-index: -1 !important; padding-top: 20px; }
#fatte .desky .deska:hover {  filter: blur(0px) !important;}
#fatte .desky .deska p, #fatte .box .desky .deska h2, #fatte .box .desky .deska h3 { width: 100%; display: block; padding: 0px;}

#fatte .info { width: 49%; margin-left: 50%; padding-top: 150px;}

#fatteNoMore {  }
#fatteNoMore .box { top: 10px !important; width: 100%; margin: 0 auto; }
#fatteNoMore h1 { display: none; visibility: hidden; }
#fatteNoMore .info ul  li { width: 10%; display: inline-block; }
#fatteNoMore .info p { font-size: 14px; }
#fatteNoMore .info h1 { text-transform: uppercase; }
#fatteNoMore .info img { width: 20%; padding-left: 20%; }
#fatteNoMore .info iframe { padding-left: 20%; }
#fatteNoMore .info { padding-bottom: 30px; }
#fatteNoMore .design img { width: 49%; }
#fatteNoMore .design p { width: 49%; -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2; float: right; }



#zln .box { width: 100%; margin: 0 auto; text-align: left; color: #000; position: absolute; color: #FFF;  top: 60% !important; }

#zln h1 { padding-top: 150px; }
#zln h1 span { display: none; }

#zln .content{
	overflow: auto;
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 300px;
	padding-top: 14px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}


#zln .item {
  width: 10%;
  background:  url('../images/dot.png');
  background-position: center top;
  background-repeat: no-repeat;
  height: 170px;
  padding: 0px;
  text-align: center;
  padding-top: 10px;
  margin-top: 0px;
  border: 0px;
  float: left;
  margin: 0px;
}

#zln .item img { width: 100%; }



#clients { clear: both; top: 0; position: relative; }

#clients .box { text-align: center; top: 200px; position: absolute; z-index: 3;}

#clients img { max-width: 95%; position: relative; }
		
#zln	.content-item a {
			text-decoration: none;
			color: #666;
		}
		
#zln		.content-item a img {
			border: 0px;
		}



#form-main{
	width:600px;
	margin: 0 auto;
	padding-top:0px;
}

#form-div {
	
	width: 100%;
	margin: 0 auto;
  margin-top:30px;
}

.feedback-input {
	color:#3c3c3c;
	font-size: 18px;
	line-height: 22px;
	padding: 13px 13px 13px 54px;
	margin-bottom: 0px;
	width:50%;
	float: left;
	background-color:rgba(72,72,72,0.4);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  border: 1px solid rgba(255,255,255,1);
}

.feedback-input:focus{
	background: #fff;
	box-shadow: 0;
	border: 3px solid #3498db;
	color: #3498db;
	outline: none;
  padding: 13px 13px 13px 54px;
}

.focused{
	color:#30aed6;
	border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#name{
	background-image: url('/images/icons/name.svg');
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#name:focus{
	background-image: url('/images/icons/name.svg');
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email{
	background-image: url('/images/icons/email.svg');
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email:focus{
	background-image: url('/images/icons/email.svg');
	background-size: 30px 30px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

#comment{
	background-image: url('/images/icons/comment.svg');
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

textarea {
    width: 100% !important;
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background: rgba(255,255,255,0.2);
}

#button-blue{
	margin: 0 auto;
	width: 200px;
	border: #fbfbfb solid 2px;
	cursor:pointer;
	background-color: #49c8ff;
	color:white;
	padding-top:22px;
	padding-bottom:22px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

#button-blue:hover{
	background-color: rgba(0,0,0,0);
	color: #0493bd;
}
	
.submit:hover {
	color: #3498db;
}
	
.ease {
	width: 0px;
	height: 74px;
	background-color: #fbfbfb;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-o-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}



h1 { color: #FFF; }

.logo { background: url("../images/logo.png"); width: 615px; height: 403px; display: block !important; line-height: 403px; margin: 0 auto; }
.logo span { visibility: hidden; }


.logo:hover,
.logo:focus,
.logo:active {
  -webkit-animation: 
    rotate 1s alternate, 
    pulse 500ms 1s infinite forwards;
          animation: 
    rotate 1s alternate, 
    pulse 500ms 1s infinite forwards;
}

@-webkit-keyframes rotate {
	to {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}

@keyframes rotate {
	to {
		-webkit-transform: rotate(45deg);
		        transform: rotate(45deg);
	}
}	

@-webkit-keyframes pulse {
	to {
		-webkit-transform: scale(1.2);
		        transform: scale(1.2);	
	}		
}	

@keyframes pulse {
	to {
		-webkit-transform: scale(1.2);
		        transform: scale(1.2);	
	}		
}


@media only screen and (max-width: 520px) {

	nav li {
		padding: 24px 4px;
	}

	nav li a {
		font-size: 14px;
	}

}