/* Jarmark styl Jaja2017 */
@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,700&subset=latin,latin-ext");

body {min-width:320px; font-family:Roboto, sans-serif; font-size:100%; color:#333; background:#FFF; transition:all .5s}
@media screen and (min-width:1680px) {body {font-size:112.5%;}}
@media screen and (max-width:1440px) {body {font-size:106.25%;}}
@media screen and (max-width:1280px) {body {font-size:100%;}}
@media screen and (max-width:1024px) {body {font-size:93.75; line-height:1.4}}
@media screen and (max-width:800px) {body {font-size:87.5%;}}
@media screen and (max-width:640px) {body {font-size:81.25%;}}
@media screen and (max-width:480px) {body {font-size:75%;}}

#menu {position:fixed; top:0; right:0; z-index:99; padding:0 1em; text-transform:uppercase; font-weight:700; background:rgba(255,255,255,.8); transition:background .5s}
.virgin #menu {background:none}
.menu {line-height:1.4}
.menu li {float:left; display:block;}
.menu a {display:block; padding:.5em; text-decoration:none; color:#000}
.menu a:hover, .menu a.act {text-decoration:underline}

@media screen and (max-width:640px){
#menu {left:0; font-size:150%; background:none}
.burger {position:absolute; top:0; right:0; z-index:1; display:block; width:1.4em; line-height:1.4; padding:.5em; text-align:center; text-decoration:none; font-size:150%;}
.burger:before {content:'\2630';}
.burger:after {content:''; position:fixed; top:0; left:0; bottom:100%; right:0; z-index:1; background:rgba(0,0,0,.6); transition:all .5s;}
.visible .burger:after {bottom:0; /*transition:all .5s;*/}
.visible .burger:before {content:'\2716'; position:relative; z-index:3;}
.menu {position:relative; top:3em; z-index:2; float:left; width:100%; max-height:0; border-radius:1em; overflow:hidden; text-align:center; background:#EEE; opacity:0; transition:all .5s;}
.visible .menu {max-height:20em; opacity:1;}
.menu li {float:none}
.menu a {color:#c20e60}
}

.section {padding:5% 0;}
.content {margin:0 auto; width:60%; max-width:1200px;/*background:rgba(255,0,0,.1)*/}
@media screen and (max-width:1024px){
.content {width:80%}
}
h2 {margin:0 0 .2em; font-size:125%; font-weight:700; text-transform:uppercase;}
p + p {margin-top:.5em}
a {color:#C20E60}
input[type=submit] {-webkit-appearance:none; appearance:none}

/* first slide */
.section-1 {display:table; width:100%; height:100vh; padding:0; background:#FFF url('/o/onadnes/jarmark18/1903-bg.jpg') no-repeat 50% 0 / cover; transition:all .5s;}
.section-1 .content {display:table-cell; width:80%; vertical-align:middle; padding:0 5% 0 45%}
.section-1 h1 {position:relative; width:65%; margin:0 0 1em; padding:40% 0 0; font-size:200%;}
.section-1 .logo-jarmark {position:absolute; top:0; left:0; width:100%;}
.section-1 li {display:block; line-height:1.4; margin:.6em 0 0; font-size:150%;}
@media screen and (max-width:1280px){
.section-1 {background-position:30% 0}
}
@media screen and (max-width:640px){
.section-1 {background:#FFF} 
.section-1 .content {padding:0 5%}
.section-1 h1 { width:80%; margin:0 auto 1em; padding-top:50%}
}
.ico-when, .ico-where {padding:0 0 0 1.8em; background:no-repeat 0 0 / auto 1.4em}
.ico-when {background-image:url('/o/onadnes/jarmark18/ico-when.png')}
.ico-where {background-image:url('/o/onadnes/jarmark18/ico-where.png')}

@keyframes brejkule1 {
	0%, 30%	{top:0; left:0; width:100%;}
	15%	{top:-20%; left:-10%; width:120%;} 
}
@keyframes brejkule2 {
	30%, 60%	{color:inherit; background:none; box-shadow:none }
	40%, 50%	{color:#CE035F; background:rgba(255,255,204,.5); box-shadow:0 0 1em #ffc} 
}
@keyframes brejkule3 {
	60%, 90%	{color:inherit; background:none; box-shadow:none}
	70%, 80%	{color:#CE035F; background:rgba(255,255,204,.5); box-shadow:0 0 1em #ffc}	
}
.section-1 .logo-jarmark, .ico-when strong, .ico-where strong {animation-duration:4s; animation-iteration-count:2;}
.section-1 .logo-jarmark {animation-name:brejkule1;}
.ico-when strong, .ico-where strong {display:inline-block; margin:0 -.4em; padding:0 .4em;}
.ico-when strong {animation-name:brejkule2;}
.ico-where strong {animation-name:brejkule3;}

/* o nas */
.section-2 {background:url('/o/onadnes/jarmark18/bg-j2a.png') no-repeat 0 100% / 15% auto}
.section-2 .content {display:table; margin:5% auto}
.section-2 .cell-a, .section-2 .cell-b {display:table-cell; vertical-align:middle;}
.section-2 .cell-a {padding-right:10%}
.section-2 .cell-b {width:45%}
.section-2 .cell-b img {width:100%}
@media screen and (max-width:1024px){
.section-2 .content {display:block; margin:0 auto}
.section-2 .cell-a, .section-2 .cell-b {display:block; width:100%; padding:1em 0;}
}

/* komu */
.section-3 {display:table; width:100%; height:100vh; padding:0; transition:all .5s; color:#FFF; background:#2A251C url('/o/onadnes/jarmark18/bg-s3.jpg') no-repeat 50% 50% / cover}
.section-3 .content {display:table-cell; vertical-align:middle; padding:0 10%; text-align:center; font-size:175%;}
.section-3 p {padding:.5em 0}
.section-3 p + p {padding-top:0}
.section-3 a {color:inherit}
.logo-ntm {width:2.6em; height:auto; vertical-align:middle; border-radius:100%;}
@media screen and (max-width:1280px){
.section-3 .content {font-size:150%;}
}


/* jak */
.section-4 {background:url('/o/onadnes/jarmark18/bg-j4a.png') no-repeat 0 0 / 20% auto, url('/o/onadnes/jarmark18/bg-j4b.png') no-repeat 100% 0 / auto 100%;}
.section-4 .content {display:table; margin:5% auto}
.section-4 .cell-a, .section-4 .cell-b {display:table-cell; vertical-align:middle;}
.section-4 .cell-a {padding-right:10%}
.section-4 .cell-b {width:40%; text-align:center}

.ticket {position:relative; z-index:1; display:inline-block; width:18em; padding:38% 0 0; transition:all .25s}
.ticket:after {content:''; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:url('/o/onadnes/jarmark18/ticket.png') no-repeat 50% 50% / contain; transition:all .25s}
.ticket span {position:absolute; top:20%; left:0; z-index:1; width:100%; text-align:center;}
@media screen and (min-width:2000px){
.ticket {width:66%; padding:20% 0 0}
.ticket:after {background-image:url('/o/onadnes/jarmark18/ticket-sm.png')}
}
@media screen and (max-width:1280px){
.section-4 {background-size:20% auto, auto 80%}
}
@media screen and (max-width:640px){
.section-4 {background-position:0 0, 150% 0}
.section-4 {background-size:20% auto, 50% auto}
.section-4 .cell-a, .section-4 .cell-b {display:block; width:auto; padding:1em 0}
.section-4 .cell-a {padding-right:15%}
.ticket {width:66%; padding:20% 0 0}
.ticket:after {background-image:url('/o/onadnes/jarmark18/ticket-sm.png')}
}
@keyframes brejkule4 {
	0%, 50%, 100%	{top:0; left:0; width:100%; height:100%;}
	25%, 75%	{top:-10%; left:-10%; width:120%; height:120%;}
}
.section-4.act .ticket:after {animation:brejkule4 1s 1;}
.section-4.act .ticket:hover:after, .ticket:hover:after {top:-10%; left:-10%; width:120%; height:120%;}

/* kdy - countdown */
.section-5 {/*background:url('/o/onadnes/jarmark18/bg-s5.png') no-repeat 50% 0 / contain;*/}
.section-5 .content {text-align:center; width:100%}
.section-5 h2 {margin:0 auto 1em}
#odpocet {position:relative; overflow:hidden; margin:0 auto; font-size:300%; text-align:center; }
#odpocet span, #odpocet b {display:inline-block; width:1.4em; line-height:2; color:#FFF; background:#C20E60; border:1px solid #FFF; border-width:0 .1em;}
#odpocet span {font-weight:100}
@media screen and (max-width:1024px){#odpocet {font-size:225%;}}
@media screen and (max-width:640px){#odpocet {font-size:190%;}}
@media screen and (max-width:480px){#odpocet {font-size:140%;}}

/* FAQ */
.section-6 {background:url('/o/onadnes/jarmark18/bg-j6a.png') no-repeat 0 0 / 14% auto}
.section-6 h2 {margin:0 auto 1em; text-align:center}
.faq-list {column-count:2; column-gap:3em;}
.faq-list li {list-style:none; display:table; page-break-inside:avoid; break-inside:avoid-column; margin:0 0 1.6em;}
.answ {padding:0 0 0 3.2em; background:url('/o/onadnes/jarmark18/answ.png') no-repeat 0 0 / 2.6em auto}
.answ:before {content:'„'}
.answ:after {content:'“'}
@media screen and (max-width:640px){
.section-6 .content {padding-top:1em;}
.faq-list {column-count:1}
}

/* kontakt */
.section-7 {padding-top:0; background:url('/o/onadnes/jarmark18/bg-j7b.png') no-repeat 100% 100% / 15% auto;}
.section-7 .content {display:table; max-width:1280px; direction:rtl}
.section-7 .cell-a, .section-7 .cell-b {display:table-cell; vertical-align:middle; direction:ltr}
.section-7 .cell-a {padding-right:10%}
.section-7 .cell-b {width:45%}
.section-7 .logo-fb {height:3em; border:1px solid #3B5997;}
.section-7 .touch-cell {display:none; position:relative; z-index:1;}
.section-7 .touch-cell .logo-fb {position:absolute; top:20%; right:10%; height:3em}
.section-7 .logo-jarmark {position:absolute; bottom:15%; right:10%; height:5em}
.section-7 .inp, .section-7 textarea {display:block; width:90%; margin:0 0 .6em; padding:.4em .8em; border:1px solid rgba(128,128,128,.2); font-size:100%;}
.section-7 .inp:focus, .section-7 textarea:focus {border-color:rgba(128,128,128,.8)}
.section-7 textarea {height:6.65em}
.section-7 .sen {display:block; padding:.5em 1em; border:0; color:#FFF; background:#C20E60; text-transform:uppercase; font-size:100%;}
.section-7 .error {margin:1em 0 0; color:#C20E60}
.section-7 .error + .error {margin-top:0}
.section-7 .send {margin:0 0 1em; padding:1em; border:1px solid #990; background:#FFE}
@media screen and (max-width:640px){
.section-7 {background:none}
.section-7 .content {display:block; padding:5% 0; direction:ltr}
.section-7 .cell-a, .section-7 .cell-b {display:block; width:100%; padding:1em 0}
.section-7 .inp, .section-7 textarea {width:100%}
.section-7 .cell-b .logo-fb {display:none}
.section-7 .touch-cell {display:block; padding:86% 0 0; padding:58.76% 0 0; background:url('/o/onadnes/jarmark18/bg-j7c.png') no-repeat 50% 50% / cover}
}
#copyright {display:block; direction:ltr; -webkit-box-sizing:border-box; box-sizing:border-box; margin:3em auto 0; padding:0 0 0 7em; font-size:87.5%; background:url('/o/onadnes/jarmark18/logo-mafra.png') no-repeat 0 0 / 5em auto;}
#copyright a {color:inherit}
@media screen and (max-width:1280px){#copyright {padding-right:10%}}
@media screen and (max-width:640px){#copyright {padding-right:0}}


.art-link {display:table; width:100%; max-width:540px; margin:1em auto 0}
.art-link, .art-link:hover {outline:none; text-decoration:none;}
.art-link:hover h3 {text-decoration:underline}
.art-link h3 {display:table-cell; vertical-align:middle; padding-left:.5em; font-size:125%; font-weight:700;}
.art-img {display:table-cell; width:30%; max-width:172px; vertical-align:middle;}
.art-img img {display:inline; width:100%; height:auto; }