@import url(grid.css);
@import url(animate.css);
@import url("https://use.typekit.net/pfj1dgs.css");

/*

yellow			#fdce7f;
light green		#66c47d
dark green		#356144
	
*/


/* --- reset styles --- */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th,figcaption { /*font-size: 14px;*/ font-weight: normal; font-style: normal; }
fieldset,iframe { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
article,aside,footer,header,hgroup,nav,section,figure,figcaption { display: block; }

*, a, a img { outline: none !important; }
a img { border: none; outline: none; }

.clear, .clearfix { clear: both; }
.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }
.selfclear { zoom:1; }
.selfclear:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }
.section-separator { display: none; }
.intro:after, .app:after, .usp:after, header nav:after, .portfolio:after, footer:after, .counter:after {content: '.'; display: block; height: 0; clear: both; visibility: hidden; }

h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; margin-top: 40px; }
p { margin-bottom: 20px; }
html { scroll-behavior: smooth; }
body {
	font-family: upgrade-lights, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 21px;
	line-height: 28px;
	}
header {
	position: relative;
	background: #66c47d;
	background: url(/graphics/header-juice-bg.svg) no-repeat 50% 101%, linear-gradient( 45deg, #9cdf7d 0%, #66c47d 100%);
	background: url(/graphics/header-juice-bg.svg) no-repeat 50% 101%, -moz-linear-gradient( 45deg, #9cdf7d 0%, #66c47d 100%);
	background: url(/graphics/header-juice-bg.svg) no-repeat 50% 101%, -webkit-linear-gradient( 45deg, #9cdf7d 0%, #66c47d 100%), ;
	background: url(/graphics/header-juice-bg.svg) no-repeat 50% 101%, -ms-linear-gradient( 45deg, #9cdf7d 0%, #66c47d 100%);
	background-size: contain;
	padding: 20px auto;
	font-size: 28px;
	line-height: 36px;
	padding-bottom: 250px;
	}
nav { margin: auto 20px; }
header h1 { float: left; margin-top: 60px; }
header h1 img { width: 120px; }
header nav ul, header nav li {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
	} 
header nav ul {
	display: block;
	float: right;
	margin-top: 120px;
	}
header nav a {
	color: #000;
	text-decoration: none;
	display: inline-block;
	margin-left: 20px;
	font-size: 21px;
	}
header nav a:hover { color: #356144; border-bottom: 2px solid #356144; }
header h2 {
	font-family: upgrade, sans-serif;
	font-weight: 700;
	font-size: 70px;
	line-height: 75px;
	margin-top: 80px;
	margin-bottom: 20px;
	}
.cta a {
	display: inline-block;
	background: #000;
	color: #fdce7f;
	font-family: upgrade, sans-serif;
	font-weight: 700;
	text-decoration: none;
	padding: 10px 60px;
	border-radius: 80px;
	transition: all 0.5s ease;
	}
.cta a:hover {
	background: #356144;
	}
header .suffix_7 {
	background: url(/graphics/aplikace-vyvoj.svg) no-repeat 100% 50%;
	background-size: 550px;
	padding-bottom: 40px;
	}
header .suffix_7:before, header .suffix_7:after {
	content: "";
	display: block;
	position: absolute;
	right: 470px;
	top: 170px;
	width: 50px;
	height: 50px;
	background: #69c6d3;
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name: rotate;
	-moz-animation-duration: 30s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
	}
header .suffix_7:after {
	right: 0;
	top: 250px;
	width: 20px;
	height: 20px;
	-webkit-animation-duration: 15s;
	-moz-animation-duration: 15s;
	}

.usps { position: relative; margin-top: -100px; }
.intro {
	color: #66c47d;
	font-size: 48px;
	line-height: 56px;
	margin-bottom: 60px;
	}

h3 {
	font-family: upgrade, sans-serif;
	font-weight: 700;
	font-size: 46px;
	line-height: 46px;
	}
.usp img {
	width: 280px;
	display: inline-block;
	margin: 20px auto;
	}
.usp { position: relative; }
.usp.forma:before, .usp.forma figure:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 20px;
	left: 250px;
	width: 20px;
	height: 20px;
	background: #69c6d3;
	transform: rotate(45deg);
	}
.usp.forma figure:before {
	left: 255px;
	bottom: 40px;
	width: 10px;
	height: 10px;
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 15s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name: rotate;
	-moz-animation-duration: 15s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
	}

.usp.obsah:before {
	content: "";
	display: block;
	position: absolute;
	top: -20px;
	left: 0;
	width: 60px;
	height: 60px;
	background: #dceaef;
	border-radius: 50%;
	}
.usp.platformy:before {
	content: "";
	display: block;
	position: absolute;
	top: -20px;
	left: 250px;
	width: 40px;
	height: 40px;
	background: #92da7e;
	transform: rotate(45deg);
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 15s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name: rotate;
	-moz-animation-duration: 15s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
	}

.counter .grid_4 {
	border: 10px solid #66c47d;
	color: #66c47d;
	box-sizing: border-box;
	padding-top: 100px;
	margin-bottom: 100px;
	width: 280px;
	height: 280px;
	text-align: center;
	font-size: 36px;
	line-height: 40px;
	background: linear-gradient(to top, transparent 50%, #66c47d 50%);
	background-size: 100% 200%;
	background-position: 0 -100%;
	transition: all 1s ease;
	}
.counter .grid_4:hover {
	color: #fff;
	background-position: 0 0;
	}
.counter .grid_4 span {
	font-family: upgrade, sans-serif;
	font-weight: 700;
	font-size: 56px;
	display: block;
	}

.portfolio { margin-bottom: 100px; }
.app {
	padding-top: 50px;
	padding-bottom: 50px;
	position: relative;
	}
.app img {
	margin-top: 40px;
	display: block;
	background-color: rgb(204, 205, 208);
	box-shadow: 0px 0px 10px 0px rgba(99, 45, 83, 0.25), 0px 20px 80px 0px rgba(99, 45, 83, 0.5);
	width: 100%;
	}
.app.chemie img { box-shadow: 0px 0px 10px 0px rgba(42, 67, 120, 0.25), 0px 20px 80px 0px rgba(42, 67, 120, 0.5); }
.app.hudebninauka img { box-shadow: 0px 0px 10px 0px rgba(101, 148, 184, 0.25), 0px 20px 80px 0px rgba(101, 148, 184, 0.5); }
.app figure { position: relative; }
.app:before {
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 15s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name: rotate;
	-moz-animation-duration: 15s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
	}
.app.ctenarskagramotnost:before {
	content: "";
	display: block;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 45%;
	bottom: 0;
	background: url(/graphics/shapes-circle-green.svg) no-repeat 0 0;
	background-size: contain;
	}
.app.chemie { 
	background: url(/graphics/shapes-diamond-pink.svg) no-repeat 80% 20px;
	background-size: 150px 150px;
	}
.app.chemie:before {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	left: 80%;
	top: 10px;
	background: url(/graphics/shapes-diamond-pink.svg) no-repeat 0 0;
	background-size: contain;
	}
.app.hudebninauka { 
	background: url(/graphics/shapes-circle-yellow.svg) no-repeat 0 0;
	background-size: 300px 300px;
	}

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

@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg);}
  to {  -moz-transform:rotate(360deg);}
}



footer {
	padding-bottom: 40px;
	background: url(/graphics/footer-juice-bg.svg) repeat-x 50% -1%, linear-gradient( 135deg, #9cdf7d 0%, #66c47d 100%);
	background: url(/graphics/footer-juice-bg.svg) repeat-x 50% -1%, -moz-linear-gradient( 135deg, #9cdf7d 0%, #66c47d 100%);
	background: url(/graphics/footer-juice-bg.svg) repeat-x 50% -1%, -webkit-linear-gradient( 135deg, #9cdf7d 0%, #66c47d 100%), ;
	background: url(/graphics/footer-juice-bg.svg) repeat-x 50% -1%, -ms-linear-gradient( 135deg, #9cdf7d 0%, #66c47d 100%);
	background-size: 1800px auto, 100% 100%;
	}
footer .container_12 {
	background: url(/graphics/aplikace-tym.svg) no-repeat 0 300px;
	background-size: auto 650px;
	position: relative;
	}
footer .container_12:before {
	content: "";
	display: block;
	position: absolute;
	top: 280px;
	left: 500px;
	width: 15px;
	height: 15px;
	background: #69c6d3;
	transform: rotate(45deg);
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 15s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name: rotate;
	-moz-animation-duration: 15s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
	}
footer a { color: #000; text-decoration: none; }
footer .container_12:after {
	content: "";
	display: block;
	position: absolute;
	top: 300px;
	left: 450px;
	width: 30px;
	height: 30px;
	background: #dceaef;
	transform: rotate(45deg);
	}
footer .grid_4 {
	background: url(/graphics/limeta-apps.svg) no-repeat 120px 100%;
	background-size: 150px auto;
	}
footer strong { display: block; margin-top: 60px; margin-bottom: 20px; }
footer strong, .vcard .fn {
	font-family: upgrade, sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 36px;
	display: block;
	}
footer .grid_4 p { margin-bottom: 0; }
#kontakt  {
	margin-top: 80px;
	text-align: center;
	}
.vcard { font-size: 28px; line-height: 36px; }
.vcard .cta { margin: 20px auto; }
#kontakt small { display: block; font-size: 12px; line-height: 18px; color: #356144; }
.jobs h4 {
	font-family: upgrade-lights, sans-serif;
	font-weight: 500;
	font-size: 36px;
	line-height: 36px;
	margin-bottom: 10px;
	}
.jobs a { color: #356144 }
.jobs a:hover { color: #66c47d }
.hiring footer .container_12:before, .hiring footer .container_12:after { display: none; }
.hiring footer { min-height: 200px; }
.hiring footer .container_12 { background: none; }
.hiring footer {
	padding-bottom: 40px;
	background: url(/graphics/footer-juice-bg.svg) repeat-x 50% -300px, linear-gradient( 135deg, #9cdf7d 0%, #66c47d 100%);
	background: url(/graphics/footer-juice-bg.svg) repeat-x 50% -300px, -moz-linear-gradient( 135deg, #9cdf7d 0%, #66c47d 100%);
	background: url(/graphics/footer-juice-bg.svg) repeat-x 50% -300px, -webkit-linear-gradient( 135deg, #9cdf7d 0%, #66c47d 100%), ;
	background: url(/graphics/footer-juice-bg.svg) repeat-x 50% -300px, -ms-linear-gradient( 135deg, #9cdf7d 0%, #66c47d 100%);
	background-size: 1800px auto, 100% 100%;
	}
.hiring header .suffix_7 {
	background: url(/graphics/prace.svg) no-repeat 100% 70%;
	background-size: 550px;
	padding-bottom: 40px;
	}
.hiring header .suffix_7:before, header .suffix_7:after { display: none; }
/*
Responsive 996px grid system ~ Style CSS.
Copyright 2013, Josh Cope
*/

/* =============================================================================
   Site Styles
   ========================================================================== */

/* =============================================================================
   Page Styles
   ========================================================================== */

/* =============================================================================
   Media Queries
   ========================================================================== */

/* Tablet Portrait size to Base 996px */
@media only screen and (min-width: 768px) and (max-width: 995px) {}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 767px) {}


@media only screen and (max-width : 768px) {
	.animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
}

/* Mobile Portrait Size to Mobile Landscape Size max-width: 479px */
@media only screen and (max-width: 600px) {
	body { min-width: 0; font-size: 24px; line-height: 150%; }
	.container_12,
	.grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
		margin: 0;
		padding: 20px;
		width: 100% !important;
		text-align: left;
		left: 0 !important;
		box-sizing: border-box;
		}
	.prefix_1, .prefix_2, .prefix_3, .prefix_4, .prefix_5, .prefix_6, .prefix_7, .suffix_1,  .suffix_2,  .suffix_3,  .suffix_4, .suffix_5, .suffix_6, .suffix_7 { margin: 0 !important; padding: 20px !important; }
	.container_12 { padding: 0 20px; box-sizing: border-box; }
	
	header { padding-top: 60px; padding-bottom: 120px; margin-bottom: 60px;
		background: url(/graphics/header-juice-bg.svg) no-repeat 50% 100%, linear-gradient( 45deg, #9cdf7d 0%, #66c47d 100%);
		background: url(/graphics/header-juice-bg.svg) no-repeat 50% 100%, -moz-linear-gradient( 45deg, #9cdf7d 0%, #66c47d 100%);
		background: url(/graphics/header-juice-bg.svg) no-repeat 50% 100%, -webkit-linear-gradient( 45deg, #9cdf7d 0%, #66c47d 100%), ;
		background: url(/graphics/header-juice-bg.svg) no-repeat 50% 100%, -ms-linear-gradient( 45deg, #9cdf7d 0%, #66c47d 100%);
		background-size: 300%;
		}
	header h1 { float: none; margin: 0 auto; }
	header h1 img { display: block; width: 120px; margin: 0 auto 40px auto; }
	header nav ul, header nav ul li { float: none; display: block; margin-top: 0; }
	header nav a { display: block; text-align: center; padding: 5px; margin: 0 20px; font-size: 30px; }
	header nav a:hover { border-bottom: none; }
	header .suffix_7 { padding-top: 200px !important; background: url(/graphics/aplikace-vyvoj.svg) no-repeat 50% 50px; }
	header h2 { margin-top: 150px; font-size: 60px; line-height: 60px; }
	.cta a { font-size: 24px; padding: 10px 30px; }
	header .suffix_7:before, header .suffix_7:after { left: 0; top: 100px; width: 20px; height: 20px; }
	header .suffix_7:after { left: auto; right: 0; top: 100px; width: 10px; height: 10px; }
	.intro { font-size: 36px; line-height: 40px; }
	
	h3 { font-size: 36px; line-height: 40px; }
	.usp figure { padding: 0; }
	.usp img { width: 100%; height: auto; }
	.usp.forma:before { bottom: 20px; left: 230px; }
	.usp.forma figure:before { right: 60px; bottom: 50px; }
	.usp.platformy:before { top: 20px; left: 200px; }
	
	.counter .grid_4 { margin-bottom: 40px; }
	.app { box-sizing: border-box; position: relative; margin: 40px -20px; padding: 0 0 50px 0; overflow: hidden; }
	.app .grid_5 { padding: 0 40px !important; }
	.app figure { padding-top: 0; }
	.app img { display: block; width: 100%; height: auto; box-shadow: 0px 0px 10px 0px rgba(99, 45, 83, 0.25), 0px 10px 50px 0px rgba(99, 45, 83, 0.5); }
	.app.chemie img { box-shadow: 0px 0px 10px 0px rgba(42, 67, 120, 0.25), 0px 10px 50px 0px rgba(42, 67, 120, 0.5); }
	.app.hudebninauka img { box-shadow: 0px 0px 10px 0px rgba(101, 148, 184, 0.25), 0px 10px 50px 0px rgba(101, 148, 184, 0.5); }
	.app.chemie {
		background: url(/graphics/shapes-diamond-pink.svg) no-repeat 60% 100%;
		background-size: 100px 100px;
		}
	.app.chemie:before {
		left: 70%;
		top: auto;
		bottom: 0;
		}
	.app.hudebninauka { 
		background: url(/graphics/shapes-circle-yellow.svg) no-repeat 0 100%;
		background-size: 200px 200px;
		}
	.portfolio { margin-bottom: 100px; }
	footer .container_12:before, footer .container_12:after { display: none; }
	footer .container_12 { background: url(/graphics/aplikace-tym.svg) no-repeat 0 350px; background-size: auto 400px; }
	footer .grid_4 { padding-top: 300px !important; background: 0; }
	.hiring header .suffix_7 {
		padding-top: 150px !important; background: url(/graphics/prace.svg) no-repeat 50% 0;
		}
	}