/*
Theme Name: JUL3SK
Theme URI: https://mirana.sk
Author: Julian Kmet
Author URI: https://tvorbastranky.sk
Description: Sablona pr jul3sk.sk.
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: jul3sk.sk
Text Domain: jul3sk.sk
*/


/* =============WordPress Generated Classes Img Alignments========== */

.alignnone {margin: 5px 20px 20px 0;}
.aligncenter, div.aligncenter {display:block; margin: 5px auto 5px auto;}
.alignright {float:right; margin: 5px 0 20px 20px;}
.alignleft {float:left; margin: 5px 20px 20px 0;}
.aligncenter {display: block; margin: 5px auto 5px auto;}
a img.alignright {float:right; margin: 5px 0 20px 20px;}
a img.alignnone {margin: 5px 20px 20px 0;}
a img.alignleft {float:left; margin: 5px 20px 20px 0;}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
.wp-caption {background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center;}
.wp-caption.alignnone {margin: 5px 20px 20px 0;}
.wp-caption.alignleft {margin: 5px 20px 20px 0;}
.wp-caption.alignright {margin: 5px 0 20px 20px;}
.wp-caption img {border: 0 none; height: auto; margin:0; max-width: 98.5%; padding:0; width: auto;}
.wp-caption p.wp-caption-text {font-size:11px; line-height:17px; margin:0; padding:0 4px 5px;}


/* ======================== Responsive ========================= */

@media screen and (min-width: 300px) and (max-width: 1100px) {
#slides-box, #header-box, #hp-boxy-box, #footer-box, #hp-preco-box, #hp-form-box, #hp-form-box, #hp-typy-box dl, #hp-typy-box, #hp-typy-box dl dd, #hp-typy-box dl dt, #content-riesenia-box, #content-riesenia-box-box-1, #content-riesenia-box-box-2, #content-riesenia-box-box-3, #content-box-ref, #content-box, #content-my-box, #kontaktdown-box, .hp-typy-box, .hp-typy-box dl, .hp-typy-box dl dt, .hp-typy-box dl dd, #page-content-title-box, #content-box-right, #partneri-box, #about-box {width: 100% !important;}
#content-box {padding: 60px 30px 40px !important;}
#content-box-right {float: none !important; padding: 0px 10px 40px !important;}
#content-box img {max-width: 100% !important; height: auto !important;}
#content-box-right .obsah {position: relative !important; max-width: 100% !important; margin: 0 10px 30px 0 !important; float: left !important;}
.hp-typy-box dl dt {padding: 30px !important;}
h2 {margin-right: 20px !important; margin-left: 20px !important; line-height: 1em !important;}
#content-box h2 {margin-right: 20px !important; margin-left: 0px !important;}
.hp-typy-box dl dd {padding: 10px 30px !important; margin: 0 0 10px 0px !important;}
.hp-first-box {width: 100% !important; padding: 30px !important;}
#kontaktdown-box {padding: 40px 30px !important;}
.motto {width: 100% !important; margin: 0 !important; background: black !important; opacity: 0.6 !important; padding: 20px 0 !important;}
.fadeInDown1, .fadeInDown5 {font-size: 1.5em !important;}
.hp-first-box img {width: 50% !important;}
#hp-preco-box .why {width: 100% !important; height: auto !important; margin: 40px 0 !important; padding: 0 40px !important;}
#hp-typy-box dl dd {margin: 0 !important;}
#hp-typy-box {padding: 20px 30px 40px !important;}

#header-box {height: 35px !important;}
	
#logo {margin: 0 0 0 30px !important;}
#logo img {width: 150px !important;}

#respmenutrigger {display: block !important;}
#header {height: 50px !important; z-index: 999999 !important;}
#menu {
	clear: both !important;
	display: block !important;
	position: absolute !important;
	width: 250px !important;
	background: white !important;
	padding: 10px 0 0 !important;
	height: 100vh !important;
	top: -5px !important;
	right: -300px !important;
	box-shadow: 0 0 100px black !important;
		transition: right 0.6s;
		-moz-transition: right 0.6s;
		-webkit-transition: right 0.6s;
		-o-transition: right 0.6s;
}
#menu a {padding: 5px 0 !important; width: 100% !important; clear: both !important;}
#menu li {width: 100% !important; clear: both !important;}
#menu:hover, #menu:focus {right: 0 !important;}
#menu:hover #respmenutrigger, #menu:focus #respmenutrigger {opacity: 0 !important;}

dl#slides {margin: 75px auto 0 !important;}
#page-content-title {margin: 75px auto 0 !important;}
	
#content-my-box {padding: 20px 40px !important; box-sizing: border-box;}
#content-my-box img {position: relative !important; top: 0 !important; left: 0 !important; clear: both;}
.my-img {text-align: center !important;}
.hp-first-box {font-size: 1.2em !important; line-height: 1.5em !important;}
.hp-first-box h1 {font-size: 2em !important;}
img.palokontakt {display: none !important;}
.imgright, .imgleft {display: none !important;}
.hp-first-box .contentleft,.hp-first-box .contentleft-center, .hp-first-box .contentright, .hp-first-box .contentright-center {float: none !important; margin: 0 auto !important; padding: 0 10px 50px 10px !important;}
.stopka {display: none !important;}
#respmenutrigger {display: block !important;}

.right {width: 60% !important;}
.left {width: 30% !important;}
.rightslidecontent {padding: 0 10% !important; box-sizing: border-box;}
.rightslidecontenttext b {font-size: 1.2em !important;}

}

@media screen and (min-width: 300px) and (max-width: 800px) {
	#content-box-kontakty {clear: both; float: none !important; text-align: center; width: 100% !important;}
	.hp-first-box a {width: 250px !important;}
	.hp-first-box .contentleft,.hp-first-box .contentleft-center, .hp-first-box .contentright, .hp-first-box .contentright-center {width: 100% !important;}
	#content-box-right .obsah {margin: 0 auto 30px !important; float: none !important;}
	#logo {float: none !important;}
	#partneri-box img {width: 100px !important;}
	#partneri-box img:hover {margin: 24px 30px 23px 30px !important;}
	dl#slides img.slideleftarrow {width: 25px !important; left: 10px !important;}
	dl#slides img.sliderightarrow {width: 25px !important; right: 10px !important;}
}


@media screen and (min-width: 300px) and (max-width: 700px) {
	.rightslidecontenttext b {font-size: 0.9em !important;}
	.rightslidecontent {padding: 0 5% !important;}
}


@media screen and (min-width: 300px) and (max-width: 450px) {
	#logo {float: none !important; margin: -8px 0 0 0 !important;}
	.rightslidecontenttext b {font-size: 0.6em !important;}	
	#responsive450banner, #responsive450menu {display: block !important;}
	#content {margin: 0 auto 0 !important;}
	#content-box-ref, #content-box {padding-top: 0 !important;}
	#logo img {width: 60% !important;}
	#content-box-right .obsah {margin: 40px auto 30px 0 !important; float: left !important;}
	#content-box-right .obsah a {width: 100% !important;}
}

/*====================== BASIC =========================*/

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

body {	margin: 0;
    	padding: 0;
   	text-align: center;
	line-height: 1.8em;
	font-family: 'Roboto', serif !important;
	/*font-family: 'Roboto Slab', serif;*/
	/*font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;*/
	font-size: 18px;
}

:target {
	top: -100px;
}


/*====================== THEME =========================*/

#header {
	clear: both;
	position: fixed;
	top: 0;
	width: 100%;
	height: auto;
	margin: 0 auto 0;
	padding: 0;
	text-align: center;
	background: white;
	z-index: 999;
}

#header-box {
	clear: both;
	position: relative;
	width: 1100px;
	height: 55px;
	margin: 0 auto 0;
	padding: 20px 0 25px;
}

#logo {
	position: relative;
	float: left;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	margin: -5px 0 0;
	background: none;
	border-radius: 200px;
}

#logo img {width: auto; border: 0;}

#menu {
	position: relative;
	float: right;
	display: inline-block;
	width: auto;
	vertical-align: middle;
	margin: 5px auto 0;
	border: 0px blue solid;
	text-align: center;
}

.menu-hlavne-container {
	position: relative;
	padding: 0 auto;
	margin: 0 auto;
	display: inline-block;
	text-align: center;}

ul.nav-menu {
	position: relative;
	float: right;
	height: 40px;
	padding: 0 0;
	margin: 0 auto;
	display: inline-block;
	text-align: left;}

ul.nav-menu li {
	position: relative;
	float: left;
	list-style-type: none;
		transition: background 0.6s;
		-moz-transition: background 0.6s;
		-webkit-transition: background 0.6s;
		-o-transition: background 0.6s;
}

ul.nav-menu li:hover {background: #fc5099;}

ul.nav-menu li a {
	font-size: 14px;
	color: #fc5099;
	text-decoration: none;
	display: inline-block;
	text-transform: uppercase;
	padding: 13px 0;
	margin: 0 19px;
		transition: background 0.6s, color 0.6s;
		-moz-transition: background 0.6s, color 0.6s;
		-webkit-transition: background 0.6s, color 0.6s;
		-o-transition: background 0.6s, color 0.6s;
}

ul.nav-menu li a:hover {
	color: white; 
	border-top: 0px solid #fc5099;
}

#respmenutrigger {
    display: none;
    position: absolute;
    top: 0;
    left: -100px;
    padding: 15px 30px 0px 0px;
    margin: 0;
    font-size: 1.2em;
}

/*====================== HP SLIDES =========================*/

#slides {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 100px auto 0;
	padding: 0;
	z-index: 997;
	box-sizing: border-box;
}

#slides-in1 {
	clear: both;
	position: absolute;
	width: 100%;
	height: auto;
	padding: 0;
}

#slides-in2 {
	clear: both;
	display: none;
	position: absolute;
	width: 100%;
	height: auto;
	padding: 0;
}

#slides-box {
	clear: both;
	position: relative;
	width: 1100px;
	margin: 0 auto;
}

#slides img, #slides-in img {
	width: 100%;
	height: auto;
}


/*====================== HP FIRST =========================*/

.hp-first {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto 0;
	padding: 0 auto;
	z-index: 997;
}

.hp-first-box {
	clear: both;
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 40px 0 70px;
	color: #9A9A9A;
	font-size: 1.3em;
	box-sizing: border-box;
	line-height: 1.8em;
	text-align: center;
    	font-weight: 300;
}

.hp-first.first {
	margin: 100px auto 0 !important; 
	background: url("/wp-content/uploads/bg-fokus.jpg") right top no-repeat #E60EB1 !important; 
	padding: 30px 0 50px 0 !important;
}

.hp-first.first .hp-first-box {color: white;} 

.hp-first-box h1 {
	color: white;
	text-align: center;
  	font-size: 2.2em;
    	font-weight: bold;
    	letter-spacing: 0;
}

.hp-first-box h2 {
	color: #fc5099;
	text-align: center;
  	font-size: 1.9em;
    	font-weight: 300;
    	letter-spacing: -2px;
}

.hp-first-box img {
	display: block;
	margin: 0 auto;
}

.hp-first-box a {
	position: relative;
	display: block;
	margin: 8px auto 4px;
	width: 400px;
	background: white;
	color: #EB12B5;
	border: 1px solid #ffaae9;
	padding: 5px;
	text-decoration: none;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
}

.hp-first-box a:hover {background: #E60EB1; color: white;}

.hp-first-box .imgleft {
	position: relative;
	display: block;
	float: left;
	width: 400px;
	padding: 30px 0 0 0;
}

.hp-first-box .imgright {
	position: relative;
	display: block;
	float: right;
	width: 400px;
	padding: 30px 0 0 0;
}

.hp-first-box .contentleft {
	position: relative;
	display: block;
	float: left;
	width: 700px;
	box-sizing: border-box;
	padding: 0 50px 50px 50px;
	text-align: left;
	line-height: 1.6em;
}

.hp-first-box .contentright {
	position: relative;
	display: block;
	float: right;
	width: 700px;
	box-sizing: border-box;
	padding: 0 50px 50px 50px;
	text-align: left;
	line-height: 1.6em;
}

.hp-first-box .contentright-center {
	position: relative;
	display: block;
	float: right;
	width: 700px;
	font-size: 0.9em;
	box-sizing: border-box;
	padding: 0 50px 50px 50px;
	text-align: center;
}

.hp-first-box .contentleft-center {
	position: relative;
	display: block;
	float: left;
	width: 700px;
	font-size: 0.9em;
	box-sizing: border-box;
	padding: 0 50px 50px 50px;
	text-align: center;
}

/*====================== HP BOXY =========================*/

#hp-boxy {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto 0;
	padding: 0 auto;
	z-index: 997;
}

#hp-boxy-box {
	position: relative;
	width: 1100px;
	margin: 40px auto 0;
}

a.hp-boxy-box-part {
	position: relative;
	display: block;
	bottom: 0;
	text-decoration: none;
	width: 330px;
	color: gray;
	height: auto;
	display: inline-block;
	margin: 0 15px;
	border: 0px solid black;
		transition: color 0.6s;
		-moz-transition: color 0.6s;
		-webkit-transition: color 0.6s;
		-o-transition: color 0.6s;
}

a.hp-boxy-box-part:hover {color: black;}

a.hp-boxy-box-part h2 {
	position: relative;
	display: block;
	color: #003D78;
	box-sizing: border-box;
	width: 100%;
	padding: 20px;
	margin: 0;
	text-align: center;
}

a.hp-boxy-box-part img {
	position: relative;
	border: 0;
	margin: 0;
	width: 100%;
		box-shadow: 0 0 9px silver;
		-moz-box-shadow: 0 0 9px silver;
}

a.hp-boxy-box-part img:hover {
}

a.hp-boxy-box-part p {
	position: relative;
	padding: 5px;
	font-size: 1.2em;
	line-height: 1.5em;
	text-align: justify;
}


/*====================== HP PREČO =========================*/

#hp-preco {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0px auto;
	z-index: 997;
	background: url("/wp-content/uploads/bg-charts.jpg") right top no-repeat #0D90D8;
	color: white;
}

#hp-preco-box {
	clear: both;
	position: relative;
	width: 1020px;
	margin: 0 auto;
	padding: 20px 0 40px;
	box-sizing: border-box;
}

#hp-preco-box h2 {
	display: block;
	font-size: 2.7em;
	margin: 40px 0 70px;
	color: white;
	text-align: center;
    	font-weight: 300;
    	letter-spacing: -2px;
}

#hp-preco-box .why {
	clear: both;
	position: relative;
	display: block;
	left: 0;
	width: 70%;
	height: 70px;
	color: #e8e8e8;
	font-size: 1.2em;
	box-sizing: border-box;
	vertical-align: top;
	margin: 20px 30px 20px;
	line-height: 1.5em;
	text-align: justify;
	vertical-align: middle;
	text-shadow: 0 0 0 white;
		transition: text-shadow 0.5s;
		-moz-transition: text-shadow 0.5s;
		-webkit-transition: text-shadow 0.5s;
		-o-transition: text-shadow 0.5s;
}

#hp-preco-box .why:hover {text-shadow: 1px 1px 1px black;}

#hp-preco-box .why img {
	display: block;
	position: relative;
	float: left;
	width: 50px;
	height: auto;
	border: 3px solid silver;
	margin: 0 30px 0 0;
	border-radius: 70px;
	box-shadow: 0 0 10px black;
	-moz-box-shadow: 0 0 10px black;
}


/*====================== HP TYPY =========================*/

#hp-form {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0px auto;
	z-index: 997;
	background: white;
}

#hp-form-box {
	clear: both;
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 20px 0 40px;
	text-align: center;
}

#hp-form-box h2 {
	display: block;
	font-size: 2.5em;
	text-align: center;
    	font-weight: 300;
    	letter-spacing: -2px;
}

input, textarea {
	position: relative;
	margin: 0 auto 20px;
	display: block;
	width: 50%;
	padding: 20px;
	color: #fc5099;
	border: #EB12B5 1px solid;
	border-radius: 5px;
		transition: padding 0.5s, border 0.5s, color 0.5s;
		-moz-transition: padding 0.5s, border 0.5s, color 0.5s;
		-webkit-transition: padding 0.5s, border 0.5s, color 0.5s;
		-o-transition: padding 0.5s, border 0.5s, color 0.5s;
}

input:hover, textarea:hover {
	padding: 25px;
	border: #fc5099 1px solid;
	color: #fc5099;
}

input[type=submit] {
	position: relative;
	margin: 20px auto;
	display: block;
	width: auto;
	padding: 20px 80px;
	color: #EB12B5;
	background: none;
	border: #EB12B5 1px solid;
	border-radius: 5px;
	cursor: pointer;
		transition: background 0.5s, color 0.5s;
		-moz-transition: background 0.5s, color 0.5s;
		-webkit-transition: background 0.5s, color 0.5s;
		-o-transition: background 0.5s, color 0.5s;
}

input[type=submit]:hover {
	background: #EB12B5;
	color: white;
}


input[type=submit].pagesubmit {
	position: relative;
	margin: 20px auto;
	display: block;
	width: auto;
	padding: 20px 80px;
	color: white;
	background: none;
	border: white 1px solid;
	border-radius: 5px;
	cursor: pointer;
		transition: background 0.5s, color 0.5s;
		-moz-transition: background 0.5s, color 0.5s;
		-webkit-transition: background 0.5s, color 0.5s;
		-o-transition: background 0.5s, color 0.5s;
}

input[type=submit]:hover.pagesubmit {
	background: white;
	color: #EB12B5;
}

/*====================== HP TYPY =========================*/

.hp-typy {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0px auto;
	z-index: 997;
	background: #F2F2F2;
}

.hp-typy-box {
	clear: both;
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 20px 0 40px;
	box-sizing: border-box;
}

.hp-typy-box dl {
	width: 900px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

.hp-typy-box h2 {
	display: block;
	font-size: 2.5em;
	color: #383838;
	text-align: center;
    	font-weight: 300;
    	letter-spacing: -2px;
}

.hp-typy-box dl dt {
	width: 600px;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	color: #383838;
	font-size: 1.3em;
	cursor: pointer;
	text-align: left;
	border-bottom: 1px dashed silver;
}

.hp-typy-box dl dt img {
	display: inline-block;
	margin: 0 16px 0 0;
}

.hp-typy-box dl dt:first-of-type {border-top: 0px solid #003466;}
.hp-typy-box dl dt:last-of-type {border-bottom: 0px solid #003466;}

.hp-typy-box dl dt:hover {font-weight: bold;}

.hp-typy-box dl dd {
	display: none;
	position: relative;
	width: 550px;
	margin: 0 0 10px 50px;
	box-sizing: border-box;
	padding: 20px 10px;
	font-size: 1em;
	text-align: justify;
}

.hp-typy-box dl dd a {
	color: #383838;
}


/*====================== HP TYPY =========================*/

#kontaktdown {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0px auto;
	z-index: 997;
	background: url("/wp-content/uploads/bg-head-sub.jpg") right top no-repeat #FC5099 !important;
	color: white;
}

#kontaktdown-box {
	clear: both;
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 40px 0 40px;
	box-sizing: border-box;
}

#kontaktdown-box h2 {font-size: 2.5em; font-weight: 300;}


/*====================== CONTENT RIESENIA=========================*/

#content-riesenia {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto 0;
	padding: 0px auto;
	z-index: 997;
	color: #666666;
}

#content-riesenia {background: url("/wp-content/uploads/bg-brand-dna.jpg") right top no-repeat white;}
#content-riesenia:nth-of-type(2) {background: url("/wp-content/uploads/bg-customer-dna.jpg") left top no-repeat #FBFBFB;}
#content-riesenia:nth-of-type(3) {background: url("/wp-content/uploads/bg-stuff-dna.jpg") right top no-repeat white;}

#content-riesenia-box {
	clear: both;
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 20px 40px 40px;
	box-sizing: border-box;
	text-align: left;
	font-size: 1.2em;
	line-height: 1.6em;
}

#content-riesenia-box-box-1, #content-riesenia-box-box-3 {
	width: 65%;
	position: relative;
	float: left;
}

#content-riesenia-box-box-2 {
	width: 60%;
	position: relative;
	float: right;
}

#content-riesenia-box h1 {
	text-align: center;
	color: #EE11AF;
	display: block;
	margin: 60px 0 40px;
  	font-size: 2.5em;
    	font-weight: 300;
    	line-height: 1.1;
    	letter-spacing: -2px;
}

#content-riesenia-box h2 {
	text-align: left;
	font-size: 1.7em;
	color: #EE11AF;
	display: block;
	margin: 60px 0 0 0;
}

.riesenia-img {
	position: absolute;
	top: 80px;
	width: 280px;
	height: 280px;
	overflow: hidden;
	border-radius: 280px;
}

#content-riesenia-box-box-1 .riesenia-img, #content-riesenia-box-box-3 .riesenia-img {right: -370px;}
#content-riesenia-box-box-2 .riesenia-img {left: -370px;}

#content-riesenia .riesenia-img img {height: 280px; width: auto;}

/*====================== CONTENT MY=========================*/

#content-my {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto 0;
	padding: 0px auto;
	z-index: 997;
	color: #666666;
}

#content-my-box {
	clear: both;
	position: relative;
	width: 750px;
	margin: 0 auto;
	padding: 20px 0 40px 350px;
	text-align: left;
	font-size: 1em;
	line-height: 1.8em;
}

#content-my-box dt {
	cursor: pointer;
	color: #003D78;
	font-size: 1.2em;
	line-height: 1.6em;
	display: block;
  }

#content-my-box dt:hover {font-weight: bold;}

#content-my-box dd {
	display: block;
	margin: 20px 0;
  }



/*====================== PAGE TITLE =========================*/

#page-content-title {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 100px auto 0;
	padding: 0 auto;
	z-index: 997;
	background: url("/wp-content/uploads/bg-head-sub.jpg") right top no-repeat #FC5099 !important; 
}

#page-content-title-box {
	clear: both;
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 30px 0 30px;
	color: #9A9A9A;
	font-size: 1.3em;
	box-sizing: border-box;
	line-height: 1.8em;
	text-align: center;
    	font-weight: 300;
}

#page-content-title h1 {
	color: white;
	text-align: center;
  	font-size: 2.2em;
    	font-weight: bold;
    	letter-spacing: 0;
}

/*====================== Referencie =========================*/

#content-box-ref {
	clear: both;
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 60px 0 40px;
	text-align: center;
	font-size: 1em;
}

.ref-img-a {
	position: relative;
	display: inline-block;
	margin: 15px 15px;
}

.ref-img {
	position: relative;
	display: block;
	padding: 65px 40px;
	overflow: hidden;
	box-shadow: 0 0 20px #f2f2f2;
	-moz-box-shadow: 0 0 20px #f2f2f2r;
		transition: box-shadow 0.6s;
		-moz-transition: box-shadow 0.6s;
		-webkit-transition: box-shadow 0.6s;
		-o-transition: box-shadow 0.6s;
}

.ref-img:hover .ref-img-popis, .ref-img:focus .ref-img-popis {
	box-shadow: 0 0 20px silver;
	-moz-box-shadow: 0 0 20px silver;
	display: block;
}

.ref-img-popis {
	position: absolute;
	top: 0;
	left: 0;
	width: 330px;
	height: 254px;
	display: none;
	background: #003D78;
	color: white;
	opacity: 0.9;
	padding: 20px 30px;
	overflow: hidden;
	font-size: 0.8em;
	box-sizing: border-box;
	z-index: 999;
	text-align: center;
	box-shadow: 0 0 20px #f2f2f2;
	-moz-box-shadow: 0 0 20px #f2f2f2r;
		animation: loader 0.5s;
		-moz-animation: loader 0.5s;
		-webkit-animation: loader 0.5s;
		-o-animation: loader 0.5s;
}

.ref-img-a:nth-of-type(3) {
	font-size: 0.7em !important;
	line-height: 1.5em !important;
}

.ref-img-a:nth-of-type(3) .ref-img-popis {text-align: left !important;}
.ref-img-a:nth-of-type(2) .ref-img-popis {text-align: left !important;}

.ref-img-popis p {
	position: relative;
	  	top: 45%;
  		-webkit-transform: translateY(-45%);
  		-ms-transform: translateY(-45%);
  		transform: translateY(-45%);
}

.ref-img-popis p a {
	color: white;
}

@keyframes loader {from {height: 0;} to {height: 100%;}}
@-moz-keyframes loader {from {height: 0;} to {height: 100%;}}
@-webkit-keyframes loader {from {height: 0;} to {height: 100%;}}
@-o-keyframes loader {from {height: 0;} to {height: 100%;}}


/*====================== CONTENT =========================*/

#content {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto 0;
	padding: 0px auto;
	z-index: 996;
	color: #666666;
}

#content-box {
	clear: both;
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 60px 40px 40px;
	box-sizing: border-box;
	text-align: justify;
	font-size: 1em;
}

#content-box-right {
	clear: both;
	position: relative;
	float: right;
	width: 700px;
	margin: 0 auto;
	padding: 0px 40px 40px;
	box-sizing: border-box;
	text-align: justify;
	font-size: 1em;
}

#content-box-right h1 {text-align: left;}

#content-box-right .obsah {
	position: fixed;
	width: 400px;
	box-sizing: border-box;
	margin-left: -400px;
	margin-top: 0;
	z-index: 990;
}

.obsah img {width: 90%; height: auto; z-index: 990;}

#content-box-right .obsah a {
	position: relative;
	display: block;
	width: 350px;
	box-sizing: border-box;
	margin: 2px;
	padding: 6px 15px;
	background: rgba(255, 192, 203, 0.24);
	color: #666666;
	text-decoration: none;
		transition: background 0.5s, color 0.5s;
		-moz-transition: background 0.5s, color 0.5s;
		-webkit-transition: background 0.5s, color 0.5s;
		-o-transition: background 0.5s, color 0.5s;
}

#content-box-right .obsah a:nth-of-type(1) {
	animation: lightSpeedDown 1s 1s ease-out both;
	-webkit-animation: lightSpeedDown 1s 1s ease-out both;
}
#content-box-right .obsah a:nth-of-type(2) {
	animation: lightSpeedDown 1s 1.2s ease-out both;
	-webkit-animation: lightSpeedDown 1s 1.2s ease-out both;
}
#content-box-right .obsah a:nth-of-type(3) {
	animation: lightSpeedDown 1s 1.4s ease-out both;
	-webkit-animation: lightSpeedDown 1s 1.4s ease-out both;
}
#content-box-right .obsah a:nth-of-type(4) {
	animation: lightSpeedDown 1s 1.6s ease-out both;
	-webkit-animation: lightSpeedDown 1s 1.6s ease-out both;
}
#content-box-right .obsah a:nth-of-type(5) {
	animation: lightSpeedDown 1s 1.8s ease-out both;
	-webkit-animation: lightSpeedDown 1s 1.8s ease-out both;
}
#content-box-right .obsah a:nth-of-type(6) {
	animation: lightSpeedDown 1s 2s ease-out both;
	-webkit-animation: lightSpeedDown 1s 2s ease-out both;
}
#content-box-right .obsah a:nth-of-type(7) {
	animation: lightSpeedDown 1s 2.2s ease-out both;
	-webkit-animation: lightSpeedDown 1s 2.2s ease-out both;
}
#content-box-right .obsah a:nth-of-type(8) {
	animation: lightSpeedDown 1s 2.4s ease-out both;
	-webkit-animation: lightSpeedDown 1s 2.4s ease-out both;
}
#content-box-right .obsah a:nth-of-type(9) {
	animation: lightSpeedDown 1s 2.6s ease-out both;
	-webkit-animation: lightSpeedDown 1s 2.6s ease-out both;
}
#content-box-right .obsah a:nth-of-type(10) {
	animation: lightSpeedDown 1s 2.8s ease-out both;
	-webkit-animation: lightSpeedDown 1s 2.8s ease-out both;
}
#content-box-right .obsah a:nth-of-type(11) {
	animation: lightSpeedDown 1s 3s ease-out both;
	-webkit-animation: lightSpeedDown 1s 3s ease-out both;
}
#content-box-right .obsah a:nth-of-type(12) {
	animation: lightSpeedDown 1s 3.2s ease-out both;
	-webkit-animation: lightSpeedDown 1s 3.2s ease-out both;
}
#content-box-right .obsah a:nth-of-type(13) {
	animation: lightSpeedDown 1s 3.4s ease-out both;
	-webkit-animation: lightSpeedDown 1s 3.4s ease-out both;
}
#content-box-right .obsah a:nth-of-type(14) {
	animation: lightSpeedDown 1s 3.6s ease-out both;
	-webkit-animation: lightSpeedDown 1s 3.6s ease-out both;
}
#content-box-right .obsah a:nth-of-type(15) {
	animation: lightSpeedDown 1s 3.8s ease-out both;
	-webkit-animation: lightSpeedDown 1s 3.8s ease-out both;
}

@-webkit-keyframes lightSpeedDown {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  opacity: 0;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  }
  }
  @keyframes lightSpeedDown {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  opacity: 0;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  }
  } 

#content-box-right .obsah a:last-of-type {
	background: red;
	color: white;
}

#content-box-right .obsah a:last-of-type .activemenu:after {
	display: none !important;
}

.activemenu {
	color: white !important;
	background: #fc5099 !important;
}

.activemenu:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0px;
    right: -10px;
    border-top: 22px solid rgba(255, 0, 0, 0);
    border-right: 0 solid rgba(255, 0, 0, 0) transparent;
    border-bottom: 22px solid rgba(255, 0, 0, 0);
    border-left: 10px solid #fc5099;
    z-index: 999;
}

#content-box-right .obsah a:hover {
	color: white !important;
	background: #fc5099 !important;
}

#content-box h1 {
	text-align: center;
	color: #fc5099;
	display: block;
	margin: 20px 0 40px;
  	font-size: 2.5em;
    	line-height: 1.1;
    	font-weight: 300;
    	letter-spacing: -1px;
}

#content-box h2 {
	text-align: left;
	font-size: 1.7em;
	color: #fc5099;
	display: block;
	margin: -30px 0 0 0;
	padding-top: 60px;
    	font-weight: 300;
}

#content-box h3 {
	text-align: left;
	font-size: 1.3em;
	color: #fc5099 /*#003D78*/;
	display: block;
	margin: -30px 0 0 0;
	padding-top: 60px;
    	font-weight: 300;
}

#content-box h4 {
	text-align: left;
	font-size: 1.5em;
	color: #003D78;
	display: block;
	margin: 60px 0 0 0;
}

#content-box-kontakty {
	width: 50%;
	position: relative;
	box-sizing: border-box;
	float: left;
}

/*====================== FOOTER =========================*/

#footer {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0px auto;
	z-index: 997;
	background: #eaeaea;
	color: silver;
}

#footer-box {
	clear: both;
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	font-size: 0.7em;
}

#footer-box a {
	text-decoration: none; 
	color: silver;
}

/*====================== Animácia textu v baneri =========================*/

.motto {
	position: absolute;
	z-index: 999;
	margin: 6% 0 0;
    	font-weight: 300;
    	letter-spacing: -2px;
}

.fadeInDown1, .fadeInDown2, .fadeInDown3, .fadeInDown4 {display: inline-block; color: white; font-size: 2.5em; margin: 0 5px; font-weight: 800;}
.fadeInDown5 {display: block; color: white; font-size: 1.8em; margin: 10px 0;}

@-webkit-keyframes fadeInDown { 
    0% {opacity: 0; -webkit-transform: translateY(-50px);} 
    100% {opacity: 1; -webkit-transform: translateY(0);} 
} 

@keyframes fadeInDown { 
    0% {opacity: 0; transform: translateY(-50px); } 
    100% {opacity: 1; transform: translateY(0); } 
} 

.fadeInDown1 { 
    -webkit-animation-name: fadeInDown 1s both 1s linear;
    animation: fadeInDown 1s both 1s linear; 
}

.fadeInDown2 { 
    -webkit-animation-name: fadeInDown 1s both 1s linear;
    animation: fadeInDown 1s both 1s linear; 
}

.fadeInDown3 { 
    -webkit-animation-name: fadeInDown 1s both 2s linear;
    animation: fadeInDown 1s both 2s linear; 
}

.fadeInDown4 { 
    -webkit-animation-name: fadeInDown 1s both 3s linear;
    animation: fadeInDown 1s both 3s linear; 
}

.fadeInDown5 { 
    -webkit-animation-name: fadeInDown 1s both 3s linear;
    animation: fadeInDown 1s both 3s linear; 
}

.moreinfo {
	text-decoration: underline;
	color: gray;
	font-size: 1em;
}

#responsive450banner {
	display: none;
	position: relative;
	margin: 0;
}

img.palokontakt {
	position: absolute;
	top: 100px;
	left: 130px;
	width: 80px;
	border-radius: 200px;
	border: 5px solid white;
	box-shadow: 0 0 5px black;
}


/*====================== PARTNERI =========================*/

#partneri {
	clear: both;
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	z-index: 997;
	background: white;
	box-sizing: border-box;
}

#partneri-box {
	clear: both;
	position: relative;
	display: none;
	width: 1100px;
	margin: 0 auto;
	padding: 20px 0px;
	box-sizing: border-box;
	text-align: center;
}

#partneri-box h2 {
	text-align: center;
	font-size: 2.5em;
	color: #fc5099;
	display: block;
	margin: -20px 0 30px 0;
	padding-top: 60px;
    font-weight: 300;
}

#partneri-box img {
	position: relative;
	display: inline-block;
	margin: 24px 30px 23px 30px;
	padding: 0;
		transition: width 0.5s, margin 0.5s;
		-moz-transition: width 0.5s, margin 0.5s;
		-webkit-transition: width 0.5s, margin 0.5s;
		-o-transition: width 0.5s, margin 0.5s;
	width: 200px;
	height: auto;
		filter: gray;
		-webkit-filter: grayscale(1);
		filter: grayscale(1);
}

#partneri-box img:hover {
	width: 220px;
	margin: 20px 20px 20px 20px;
	height: auto;
		filter: none;
		-webkit-filter: grayscale(0);
		filter: grayscale(0);
}


/*====================== ABOUT =========================*/

#about {
	clear: both;
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	z-index: 997;
	background: white;
	box-sizing: border-box;
}

#about-box {
	clear: both;
	position: relative;
	display: block;
	width: 1100px;
	margin: 0 auto;
	padding: 20px 0px;
	box-sizing: border-box;
	text-align: center;
}

#about-box h2 {
	position: relative;
	clear: both;
	display: block;
	color: #fc5099;
    text-align: center;
    font-size: 2.5em;
    font-weight: 300;
    letter-spacing: -2px;
}

.about-box-item {
	position: relative;
	display: inline-block;
	width: 300px;
	margin: 20px 20px 30px;
	padding: 0;
	box-sizing: border-box;
	vertical-align: top;
}

.about-box-item img {
	position: relative;
	clear: both;
	display: block;
	width: 250px;
	height: auto;
	margin: 0 auto 20px;
	padding: 0;
	box-sizing: border-box;
	border-radius: 300px;
	box-shadow: 0 0 50px gray;
		transition: box-shadow 0.4s, transform 0.4s;
		-moz-transition: box-shadow 0.4s, transform 0.4s;
		-webkit-transition: box-shadow 0.4s, transform 0.4s;
		-o-transition: box-shadow 0.4s, transform 0.4s;
}

.about-box-item:hover img {box-shadow: 0 0 50px black; transform: rotate(10deg);}

.about-box-item-meno {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	width: 200px;
	padding: 13px;
	background: white;
	box-sizing: border-box;
	color: #fc5099;
	border: 2px solid #fc5099;
	border-radius: 3px;
	vertical-align: top;
}

.stopka {
	position: absolute;
	display: block;
	width: 1px;
	height: 45px;
	border-left: 1px solid #fc5099;
	margin: 0 auto;
	padding: 0;
	left: 100px;
	bottom: -50px;
}

.about-box-item:hover .about-box-item-meno {
		-webkit-animation-name: wobble;
		animation-name: wobble;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
}

 
@-webkit-keyframes wobble {
  0% {
  -webkit-transform: none;
  transform: none;
  }
  15% {
  -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
  -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
  -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
  -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
  -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes wobble {
  0% {
  -webkit-transform: none;
  transform: none;
  }
  15% {
  -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
  -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
  -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
  -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
  -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
  -webkit-transform: none;
  transform: none;
  }
  } 




/*====================== SLIDES =========================*/

dl#slides {
	clear: both;
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 95px auto 0;
	padding: 0;
	z-index: 1;
	box-sizing: border-box;
	background: white;
	border: 0;
	text-align: center;
}

dl#slides dd {
	clear: both;
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0 auto;
	z-index: 997;
}

a.slidelink, a.pluseslink {
	clear: both;
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	z-index: 997;
	text-decoration: none;
	color: unset;
}

.left {
	display: inline-block;
	position: relative;
	width: 500px;
	height: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	vertical-align: top;
}

.right {
	display: inline-block;
	position: relative;
	width: 700px;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	vertical-align: top;
}

.leftslidecontent {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	vertical-align: middle;
	display: inline-block;
	clear: both;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
		transition: box-shadow 0.7s;
		-moz-transition: box-shadow 0.7s;
		-webkit-transition: box-shadow 0.7s;
		-o-transition: box-shadow 0.7s;
}

.leftslidecontent img {
	position: relative;
	display: block;
	top: 50%;
	float: right;
	transform: translateY(-50%);
	vertical-align: middle;
	max-width: 70% !important;
	max-height: 70% !important;
	width: auto !important;
	height: auto !important;
	margin: 0 auto;
	padding: 20px 0 0;
}

.rightslidecontent {
	position: absolute;
	display: block;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	clear: both;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 1em;
	vertical-align: middle;
	color: black;
	text-align: center;
}

.rightslidecontenttext {
	padding: 0 50px;
    box-sizing: border-box;
}

.rightslidecontenttext b {
	font-weight: bold;
	color: white;
	font-size: 2em;
	line-height: 1.2em;
	clear: both;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	margin: 0 auto;
	display: block;
	
}

dl#slides dt {
	display: none;
	position: relative;
	width: 10px;
	height: 10px;
	padding: 20px;
	margin: 0;
	background: white;
	opacity: 0.5;
	cursor: pointer;
	z-index: 995;
}

dl#slides dt:hover {opacity: 0.9 !important;}

dl#slides img {
	width: 100%;
	height: auto;
}

dl#slides img.slidebgbig {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
	height: auto;
}

dl#slides img.slideleftarrow {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 30px;
	margin: auto;
	padding: 0;
	display: block;
	width: 50px;
	height: auto;
	cursor: pointer;
	opacity: 0.6;
	z-index: 998;
}

dl#slides img.slideleftarrow:hover {
	opacity: 0.8;
}

dl#slides img.sliderightarrow {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 30px;
	margin: auto;
	padding: 0;
	display: block;
	width: 50px;
	height: auto;
	cursor: pointer;
	opacity: 0.6;
	z-index: 998;
}

dl#slides img.sliderightarrow:hover {opacity: 0.8;}

dd.slide1 .leftslidecontent img {
	  -webkit-animation: tadaaa 1s 1s both;
	  animation: tadaaa 1s 1s both;
}
dd.slide1 .rightslidecontenttext {
	animation: bounceIn 0.75s 1.7s both;
	-webkit-animation: bounceIn 0.75s 1.7s both;
}

dd.slide2 .leftslidecontent img {
	animation: rotateInUpLeft 1s 1s both;
	-webkit-animation: rotateInUpLeft 1s 1s both;
}
dd.slide2 .rightslidecontenttext {
	animation: rotateInUpLeft 1s 1.7s both;
	-webkit-animation: rotateInUpLeft 1s 1.7s both;
}

dd.slide3 .leftslidecontent img {
	animation: bounceIn 1s 1s both;
	-webkit-animation: bounceIn 1s 1s both;
}
dd.slide3 .rightslidecontenttext {
	animation: lightSpeedIn 1s 1s ease-out both;
	-webkit-animation: lightSpeedIn 1s 1s ease-out both;
}

dd.slide4 .leftslidecontent img {
	animation: slideInUp 1s 1s both;
	-webkit-animation: slideInUp 1s 1s both;
}
dd.slide4 .rightslidecontenttext {
	animation: slideInDown 1s 1.7s both;
	-webkit-animation: slideInDown 1s 1.7s both;
}

dd.slide5 .leftslidecontent img {
	animation: slideInLeft 1s 1s both;
	-webkit-animation: slideInLeft 1s 1s both;
}
dd.slide5 .rightslidecontenttext {
	animation: slideInRight 1s 1.7s both;
	-webkit-animation: slideInRight 1s 1.7s both;
}


/*=========================== tadaaa ==============================*/
@-webkit-keyframes tadaaa {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  opacity: 0;
  }
  5% {opacity: 1;}
  10%, 20% {
  -webkit-transform: scale3d(.2, .2, .2) rotate3d(0, 0, 1, -6deg);
  transform: scale3d(.2, .2, .2) rotate3d(0, 0, 1, -6deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, 6deg);
  transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, 6deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, -6deg);
  transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, -6deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  
  @keyframes tadaaa {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  opacity: 0;
  }
  5% {opacity: 1;}
  10%, 20% {
  -webkit-transform: scale3d(.2, .2, .2) rotate3d(0, 0, 1, -6deg);
  transform: scale3d(.2, .2, .2) rotate3d(0, 0, 1, -6deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, 6deg);
  transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, 6deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, -6deg);
  transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, -6deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 


/*=========================== rotateInUpLeft ==============================*/
  
   @-webkit-keyframes rotateInUpLeft {
  0% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  }
  @keyframes rotateInUpLeft {
  0% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  } 

  
  
  
  
  /*=========================== lightSpeedIn ==============================*/
  @-webkit-keyframes lightSpeedIn {
  0% {
  -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
  transform: translate3d(100%, 0, 0) skewX(-30deg);
  opacity: 0;
  }
  60% {
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  opacity: 1;
  }
  80% {
  -webkit-transform: skewX(-5deg);
  transform: skewX(-5deg);
  opacity: 1;
  }
  100% {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  }
  @keyframes lightSpeedIn {
  0% {
  -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
  transform: translate3d(100%, 0, 0) skewX(-30deg);
  opacity: 0;
  }
  60% {
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  opacity: 1;
  }
  80% {
  -webkit-transform: skewX(-5deg);
  transform: skewX(-5deg);
  opacity: 1;
  }
  100% {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  } 


/*=========================== slideInUp ==============================*/
  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  opacity: 0;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  opacity: 0;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  }
  } 
  
  
  
  
/*=========================== slideInDown ==============================*/
  @-webkit-keyframes slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: visible;
  opacity: 0;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  }
  }
  @keyframes slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: visible;
  opacity: 0;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  }
  } 

  
/*=========================== slideInLeft ==============================*/
  @-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  opacity: 0;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  opacity: 0;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
  } 

  
  
/*=========================== slideInRight ==============================*/
  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  opacity: 0;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  opacity: 0;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
  } 



/*=========================== bounceIn ==============================*/
@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }