@font-face {
    font-family: 'jeanlucwebthin';
    src: url('../fonts/jeanlucweb-thin.eot');
    src: url('../fonts/jeanlucweb-thin.eot?#iefix') format('embedded-opentype'),
         url('../fonts/jeanlucweb-thin.woff') format('woff'),
         url('../fonts/jeanlucweb-thin.ttf') format('truetype'), 
         url('../fonts/jeanlucweb-thin.svg#jeanlucwebthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SofiaProLight';
    src: url('../fonts/SofiaProLight-webfont.eot');
    src: url('../fonts/SofiaProLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SofiaProLight-webfont.woff') format('woff'),
         url('../fonts/SofiaProLight-webfont.ttf') format('truetype'),
         url('../fonts/SofiaProLight-webfont.svg#sofiaprolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

HTML{margin:0;padding:0;height:100%;min-height:100%;}
BODY{background:#fff;font-family: jeanlucwebthin, Arial, Helvetica, sans-serif; font-size:11pt;margin:0;height:100%;text-align:center;}
IFRAME{visibility:hidden;}
A{text-decoration:none;}
IMG{border:none;}
UL {margin:0;padding:0;list-style-type: none;}

DIV.line{display:block;height:50px;padding:0px;position:fixed;top:10px;right:12px;z-index:100;width:62px;background:none;line-height:50px;}
A.contact{display:inline-block;zoom:1;*display:inline;vertical-align:middle;color:#7f7f7f;line-height:50px;height:33px;width:42px;text-transform:uppercase;background:url(../pics/send.png) no-repeat 50% 50%;/*opacity:0.6*/}
A.contact:hover{opacity:1;}

H1{display:block;width:857px;height:700px;text-transform:uppercase;font-size:100%;font-weight:normal;margin:0 0 0 -429px;padding:0;position:absolute;top:0;left:50%;}
.slider{position: relative;margin:0;height:100%;overflow:hidden;}
.swiper-container{position: relative;top:40%;margin:-350px 0 0 0;}
.swiper-slide{text-align:center;height:700px;}
.text{/*display:block;*/position:relative;margin:0 auto;top:-185px;padding:20px 10px;width:115px;max-width:95px;height:115px;max-height:75px;border-radius:58px;background:#000;color:#fff;font-size:160%;background:none;color:#000;text-transform:uppercase;
display:none;
}                                                                                               

DIV#container{margin:-100px auto 0 auto;max-width:2000px;/*min-width:500px;*/}
H2{margin:0;padding:0;font-weight:normal;height:100px;overflow:hidden;position:relative;z-index:90;}                                                                                              
H2 SPAN{display:inline-block;zoom:1;*display:inline;vertical-align: bottom;line-height: 100px;font-size:100px;margin:0;padding:100px 0 0 0;background:url(../pics/dal.png) no-repeat 50% 0;color:#551a8b;font-family: jeanlucwebthin, Arial, Helvetica, sans-serif;
-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out;
}
H2:hover SPAN,#mail A:hover H2 SPAN{margin:-100px 0 0 0;
-webkit-transition: all 0.4s ease-in;-moz-transition: all 0.4s ease-in;-o-transition: all 0.4s ease-in;transition: all 0.4s ease-in;}
#detail{overflow:auto;background:#fff;margin:0;z-index:110;height:0;width:0;position:absolute;}
A#close{display:none;z-index:111;position:fixed;top:0;left:0;width:60px;line-height:60px;font-size:40px;color:#000;text-transform:uppercase;text-shadow: 0px 0px 1px #fff;}
A#close:hover{color:#551a8b;}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

.famwat, .det, .jap, .lode, .c2m, .kids {background:#fff;	opacity:0;
	-webkit-animation:fadeIn ease-in 1.5s;-moz-animation:fadeIn ease-in 1.5s;animation:fadeIn ease-in 1.5s;
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
/*-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;*/
	opacity:1\9;
}

.jap {background:#e8e8e8 url(../pics/jap_bg.jpg); }
.lode {background:#c7e2fd;}
.c2m {background:#e8e8e8;}
.kids {background:#e8e8e8;}

UL#circles{
list-style-type: none;
display:block;
margin:0 auto;
max-width:2000px;
/*min-width:500px;*/
min-height:500px;
text-align:center;
position:relative;
font-size:0;
overflow:auto;
z-index:105;
background:#fff;
}

UL#circles LI.item {
display:inline-block;zoom:1;*display:inline;
	position:relative;
  height:24%;
  width:24%;
  padding:0;
  margin:0.5%;
  float:left;
  z-index:1;
-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;
}


UL#circles LI.item A {
display: block;
border-color:#fff;
border-style:solid;
border-width:0;
border-radius: 0;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
vertical-align:top;
text-align:center;
height:100%;
width:100%;
padding:0;
text-decoration:none;
color:#fff;
font-size:0;
overflow:hidden;
-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;
}

UL#circles LI.item:hover A{
border-radius: 55%;
-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;
}

UL#circles LI.item A IMG{height:100%; width:100%;max-width:100%;}

UL#circles LI.item A SPAN{
font-family: SofiaProLight, Arial, Helvetica, sans-serif;
  display: block;
	position:absolute;
	left:50%;
	top:50%;
	width:50%;
	margin:-25% 0 0 -25%;
	height:50%;
	max-height:50%;
  z-index:2;
  padding:0;
  line-height:auto;
  text-decoration:none;
  white-space:nowrap;
  color:#fff;
  font-size:16pt;
  color:#000;
  background:#fff;
  text-shadow: none;
border-radius: 60%;
-ms-transform: scale(0,0);-webkit-transform: scale(0,0);-moz-transform: scale(0,0);-o-transform: scale(0,0);transform: scale(0,0);
-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;
}

UL#circles LI.item:hover A SPAN{
-ms-transform: scale(1,1);-webkit-transform: scale(1,1);-moz-transform: scale(1,1);-o-transform: scale(1,1);transform: scale(1,1);
-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;
}

UL#circles LI.item A SPAN B{
  display: block;
  position:relative;
	*position:absolute;
	left:50%;
	top:50%;
	width:100%;
	margin:-5% 0 0 -50%;
	height:50%;
	height:10%;
	max-height:100%;
  z-index:3;
  padding:0;
  font-weight:normal;
  }
UL#circles LI.item A SPAN B I {font-family: jeanlucwebthin, Arial, Helvetica, sans-serif;font-style:normal;}
UL#circles LI.item SPAN.popis{
	display: block;
	height:100%;
	width:100%;
  font-size:14px;
  font-family: SourceL, Arial, Helvetica, sans-serif;
    position:relative;
	*position:absolute;
	left:50%;
	top:50%;
	width:100%;
	margin:-5% 0 0 -50%;
	height:50%;
	height:10%;
	max-height:100%;
}

DIV.bottom_line{display:block;height:29px;padding:0px;position:relative;width:100%;box-shadow:0 0 6px #aeaeae;text-align:left;z-index:104;}
A.kuk{display:block;height:60px;width:60px;padding:0px;position:absolute;top:-43px;right:50px;background:url(../pics/kuk.png) no-repeat 50% 50%;border-radius:30px
-moz-transition:all 0.6s;-webkit-transition:all 0.6s;transition:all 0.6s;
}
A.kuk:hover{
-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);
-moz-transition:all 0.6s;-webkit-transition:all 0.6s;transition:all 0.6s;
}
A.kuk IMG {opacity:0;-moz-transition:all 0.6s;-webkit-transition:all 0.6s;transition:all 0.6s;}
A.kuk:hover IMG {opacity:1;-moz-transition:all 0.6s;-webkit-transition:all 0.6s;transition:all 0.6s;}

A.kuk SPAN{opacity:0;position:absolute;top:-30px;left:15px;margin:0;display:block;text-transform:uppercase;font-size:18px;color:#551a8b; text-align:left;line-height:16px;
-ms-transform: rotate(270deg);-webkit-transform: rotate(270deg);transform: rotate(270deg);
-moz-transition:all 0.6s;-webkit-transition:all 0.6s;transition:all 0.6s;
}

A.kuk:hover SPAN{opacity:1;-moz-transition:all 0.6s;-webkit-transition:all 0.6s;transition:all 0.6s;}
 
SPAN.copyright{padding:0 10px;display:inline-block;line-height:29px;font-size:12px;color:#000;}

.thumbs{max-width:1200px;margin:0 auto 0 auto;padding:30px 0 30px 0;}
.thumbs DIV{position:relative;}
.bigthumb, .smallthumb, .vertthumb,.logothumb,.kidsthumb,.titlethumb{display:inline-block;vertical-align:top;font-size:0;overflow:hidden;margin:0;}
.bigthumb,.logothumb,.titlethumb{width:100%;margin:0 0 1% 0;}
.logothumb{min-height:130px;}
.smallthumb{width:70%;}
.vertthumb{width:29%;margin:0 0 0 1%;}
.kidsthumb{width:570px;margin:0 auto 1%  auto;}
.titlethumb{font-size:40pt;color:#551a8b;}
.bigthumb IMG,.smallthumb IMG ,.vertthumb IMG {width:100%;}
.nicmoc{margin:0 0 0 20px;}

.thumbs DIV IMG{-moz-transition:all 0.8s;-webkit-transition:all 0.8s;transition:all 0.8s;}
.thumbs DIV:hover IMG{transform:scale(1.04);-webkit-transform:scale(1.04);-moz-transition:all 1s;-webkit-transition:all 1s;transition:all 1s;}


#contain{min-height:100%;}

.thumbs .note{
font-family: SofiaProLight, Arial, Helvetica, sans-serif;
background:#000;color:#fff;width:120px;height:120px;line-height:120px;border-radius:60px;font-size:14pt;text-align:center;position:absolute;top:50%;left:50%;margin:-60px 0 0 -60px;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-moz-opacity: 0.0;opacity: 0.0;
-moz-transition:all 0.8s;	-webkit-transition:all 0.8s;transition:all 0.8s;}
.thumbs DIV:hover .note{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=90);-moz-opacity: 1;opacity: 1;-moz-transition:all 0.8s;-webkit-transition:all 0.8s;transition:all 0.8s;}
.thumbs .download .note {font-size:11pt;}

.jap .thumbs .note{background:#00c18b;}
.lode .thumbs .note{background:#dc450c;}
.det .thumbs .note{background:#ff6600;}
.kids .thumbs .note{background:#551a8b url(../pics/download.png) no-repeat 50% 80%;}

#mail{padding:200px 0 200px 0;background:#fff;position:relative;z-index:103;}
#mail H2 SPAN{background:url(../pics/mail.png) no-repeat 50% 0;}
#mail A{font-size:200%;font-family: SofiaProLight, Arial, Helvetica, sans-serif;color:#000;}


.mobile{max-width:100%;overflow-x: hidden;}
#movement{display:none;}
.fresh #movement{background:url(../pics/swipe.png) no-repeat 50% 50%;
display:block;width:91px;height:60px;position:absolute;left:50%;top:10%;margin:0 0 0 -45px;
  opacity:1;
	-webkit-animation:fadeOut ease-in 1;
	-moz-animation:fadeOut ease-in 1;
	animation:fadeOut ease-in 1;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	animation-duration:3s;

-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
.mobile .thumbs .note{opacity:0.8;top:10px;left:10px;margin:0;}
.mobile .thumbs DIV:hover .note{opacity:0;}

@media (min-width:1920px){A#close{left:50%;margin-left:-660px}}
@media (max-width:1520px){
UL#circles LI.item A SPAN{font-size:13pt;}
}

@media (max-width:1220px){
.thumbs{max-width:95%;}
UL#circles LI.item {height:49%; width:49%; margin:0.5%;}
UL#circles{max-width:95%;}
UL#circles LI.item A SPAN{font-size:16pt;}
}

@media (max-width:880px){
.slider{overflow:hidden;}
.swiper-container {width: 150%;margin-left: -25%;}
H1{width:100%;margin:0 0 0 -50%;}
.swiper-container IMG{max-width:90%;}
H1 IMG{max-width:100%;}
.thumbs DIV{margin: 0px 0px 5%;}
.bigthumb IMG {width:150%;margin-left:-22%;}
.smallthumb{width:100%;margin:0 0 1% 0;}
.vertthumb{width:100%;margin:0 auto;}
.vertthumb IMG {width:auto;}
H2#work SPAN{font-size:300%;}
UL#circles LI.item A SPAN{font-size:12pt;}
}

@media (max-width:650px){.text{/*top:0;*/}H2#work SPAN{font-size:200%;}UL#circles LI.item A SPAN{font-size:10pt;}.swiper-container {width: 160%;margin-left: -30%;}.kidsthumb{width:95%;}.kidsthumb IMG{max-width:100%;}}

@media (max-width:520px){
UL#circles LI.item {height:100%; width:100%; margin:0 0 10px 0;}
UL#circles,DIV#container{min-width:auto;}
UL#circles LI.item A SPAN{font-size:16pt;}
DIV.line{top:0;right:0;}
.swiper-container {margin-top: -50%;}
A.contact{background-size: 30px;}
#movement {background-size: 60px;}
}
@media (max-width:368px){
UL#circles LI.item A SPAN{font-size:12pt;}
}

@media (max-width:368px){
.vertthumb IMG {width:100%;}H2#work SPAN{font-size:120%;}#mail H2 SPAN{font-size:300%;}#mail A{font-size:140%;}
UL#circles LI.item A SPAN{font-size:10pt;}
}

@media (max-width:270px){
#mail H2 SPAN{font-size:250%;}#mail A{font-size:100%;}
UL#circles LI.item A SPAN{font-size:10pt;}
}

@media (max-height:600px){
H1{height:100%;}
.swiper-container IMG,H1 IMG{max-height:80%;}
.swiper-wrapper{max-height:80%;}
.swiper-container{margin-top:-5%;top:0;}
}

@media (max-height:520px){
.swiper-container IMG,H1 IMG{max-height:66%;}
.swiper-wrapper{max-height:66%;}
.text{font-size:100%;}
}
@media (max-height:400px){
.swiper-container IMG,H1 IMG{max-height:50%;}
.swiper-wrapper{max-height:50%;}
.text{top:-140px;}
}

@media all\0 {}