/******************************************************
 * master.css pre www.imagineXPO.com
 *
 * Copyright (c) 2018 Martin Fajnor All rights reserved.
 * Generator URI: http://www.amfajnor.sk
 *
 * Author: Fajnor
 *****************************/

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext');

:root {
	cursor: url(../img/cursor-default.cur) 3 3, default; 	
}
body, html {
    background-color: #FFF;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
	font-family: 'Roboto', sans-serif;
	text-align: left;
	overflow: hidden;
}
.content {
	position: relative;
	padding: 0 30px;
    text-align: center;
}
a {
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}
a:hover { 
	color: #FF5E00; 
	cursor: progress; 
	cursor: url(../img/cursor-pointer.cur) 20 20, pointer; 	
}



/*
 *
 *  ~~~~~~  MAIN page ~~~~~~~~  */

#main-page {
  display: block;
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  margin: auto;
  display: none;
  -ms-transform-origin: 50% 75%;
  -webkit-transform-origin: 50% 75%;
  transform-origin: 50% 75%;
  background: #101f58;
}

#main-curtains {
    display: block;
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    margin: auto;
	z-index: -1;
}
#main-curtains::before {
	content: "";
	background: #2547ff; /* MODRA */
	position: absolute;
	width: 7000px;
	height: 7000px;
	right: 50%;
	top: 50%;
	-ms-transform-origin: calc(50% + 750px) calc(50% + 1750px);
	-webkit-transform-origin: calc(50% + 750px) calc(50% + 1750px);
	transform-origin: calc(50% - 750px) calc(50% - 1750px);
	
	animation: anim_main-curtains-before 1.5s forwards;
    animation-delay: 0.1s;
}
@keyframes anim_main-curtains-before {
  100% {
    right: 88%;
	top: 88%;
  }
}
#main-curtains::after {
	content: "";
	background: #e62393; /* RUZOVA */
	position: absolute;
	width: 7000px;
	height: 7000px;
	left: 50%;
	bottom: 50%;
    -ms-transform-origin: calc(50% + 750px) calc(50% + 1750px);
    -webkit-transform-origin: calc(50% + 750px) calc(50% + 1750px);
    transform-origin: calc(50% + 750px) calc(50% + 1750px);
	
	animation: anim_main-curtains-after 1.5s forwards;
    animation-delay: 0.1s;
}
@keyframes anim_main-curtains-after {
  100% {
    left: 88%;
	bottom: 88%;
  }
}
#main-curtains::before, #main-curtains::after {
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



#lavy_gradient {
	position: absolute;
	bottom: -20vh;
	width: 100vh;
	height: 100vh;
	
	animation: anim_lavy_gradient 1.5s forwards;
	animation-timing-function: cubic-bezier(0.71,-0.74,.29,1.56);
    animation-delay: 0.1s;
}
@keyframes anim_lavy_gradient {
	0% { 
		left: -100vh;
		-moz-transform: translate(0,0) scale(0,1);
		-webkit-transform: translate(0,0) scale(0,1);
		-o-transform: translate(0,0) scale(0,1);
		-ms-transform: translate(0,0) scale(0,1);
		transform: translate(0,0) scale(0,1); 
	}
	100% {
	    left: -20vh;
		-moz-transform: translate(0,0) scale(1,1);
		-webkit-transform: translate(0,0) scale(1,1);
		-o-transform: translate(0,0) scale(1,1);
		-ms-transform: translate(0,0) scale(1,1);
	    transform: translate(0,0) scale(1,1);
	}
}
#lavy_gradient svg {
	height: 100%;
	position: absolute;
	left: 0;
}
#pravy_gradient {
	position: absolute;
	top: -20vh;
	width: 100vh;
	height: 100vh;
	
	animation: anim_pravy_gradient 1.5s forwards;
	animation-timing-function: cubic-bezier(0.71,-0.74,.29,1.56);
    animation-delay: 0.1s;
}
@keyframes anim_pravy_gradient {
	0% { 
		right: -100vh;
		-moz-transform: translate(0,0) scale(0,1);
		-webkit-transform: translate(0,0) scale(0,1);
		-o-transform: translate(0,0) scale(0,1);
		-ms-transform: translate(0,0) scale(0,1);
		transform: translate(0,0) scale(0,1); 
	}
	100% {
	    right: -20vh;
		-moz-transform: translate(0,0) scale(1,1);
		-webkit-transform: translate(0,0) scale(1,1);
		-o-transform: translate(0,0) scale(1,1);
		-ms-transform: translate(0,0) scale(1,1);
	    transform: translate(0,0) scale(1,1);
	}
}
#pravy_gradient svg {
	height: 100%;
	position: absolute;
	right: 0;
}



.maincontent {
    display: none;
}
.maincontent > .content {
	margin-top: 75vh;
}

h1 {
	font-family: 'Roboto condensed', sans-serif;
	color: #fff;
	font-weight: 900;
	font-size: 2.4vw;
	visibility: hidden;
}
h1 .word1 {
	color: #08A8BE;
}
h1 .word2 {
	color: #FFF;
}
h1 .word3 {
	color:#BA2287;
}
h2 {
	font-family: 'Roboto condensed', sans-serif;
	color: #fff;
	font-weight: 300;
	font-size: 1.4vw;
	visibility: hidden;
}

#IXPOlogo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: -50%;
}
.logo-anim-wrapper {
  position: relative;
  display: flex;
  width: 1500px;
  height: 300x;
}
.logo-anim-wrapper svg { 
	position: absolute; 
}

#Logo_tvar { opacity: 0; }
	.lt00{stroke:#E63888;}
	.lt01{stroke:#FFFFFF;}
	.lt02{stroke:#00CCD8;}
	.lt03{stroke:#2448FF;}

#Logo_tvary { opacity: 0; }
	.lt0{fill:#E63888;}
	.lt1{fill:#FFFFFF;}
	.lt2{fill:#00CCD8;}
	.lt3{fill:#2448FF;}

#Logo_gradient { opacity: 0; }









/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   RESPONZIVNE  
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/* 
 *
 *  ~~~~~~  1200 ~~~~~~~~  */
@media only screen and (max-width: 1200px) {

}


/* 
 *
 *  ~~~~~~  992 ~~~~~~~~  */
@media only screen and (max-width: 992px) {

}
@media screen and (max-width:992px) and (orientation:landscape) {
	
	h1 {  font-size: 4.5vw;	}
	h2 {  font-size: 3vw;	}
	.maincontent > .content { margin-top: 70vh;	}
	#IXPOlogo { margin-top: -63%; }
}


/* 
 *
 *  ~~~~~~  767 ~~~~~~~~  */
@media only screen and (max-width: 767px) {
	
	h1 {  font-size: 5.5vw;	}
	h2 {  font-size: 4vw;	}
	.maincontent > .content {
	    margin-top: 60vh;
	}
	#IXPOlogo {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 100%;
	    margin-top: -90%;
	}
	.logo-anim-wrapper {
	    position: absolute;
	    display: flex;
	    width: 120%;
	    height: 300x;
	    margin-top: -10%;
	}
	#lavy_gradient {
	    position: absolute;
	    left: -20vh;
	    bottom: -20vh;
	    width: 70vh;
	    height: 70vh;
	}
	#pravy_gradient {
	    position: absolute;
	    right: -20vh;
	    top: -20vh;
	    width: 70vh;
	    height: 70vh;
	}

}

@media screen and (max-width:767px) and (orientation:landscape) {
	
	h1 {  font-size: 4.5vw;	}
	h2 {  font-size: 3vw;	}
	.maincontent > .content { margin-top: 67vh;	}
	#IXPOlogo { margin-top: -63%; }
}

/* 
 *
 *  ~~~~~~  640 ~~~~~~~~  */
@media only screen and (max-width: 640px) {

}