@font-face {
    font-family: Roboto, Helvetica;
    src: url(../fonts/Roboto-Black.ttf);
}

* {
    margin: 0;
    padding: 0;
    border: 0 none transparent !important;
    background: transparent;
}

body {
    font-family: Roboto, Helvetica, sans-serif;
    color: #222222;
    background: #F3F2F2;
    font-size:17px;
    /*overflow: hidden;*/
}

a, img {border:0;} /* ie fix */

#top {background-color:#F3F2F2;}
#top-center {width:80%;padding:30px 10px 10px 10px;margin:0 auto;}
#top-center img {height:24px;}
#top-center #user {float:right;color:#1F1A17;margin-top:0px;}
#top-center #user a {color:#1F1A17;z-index:1001;}
#top-center #user img {height:auto;position:relative;margin-right:10px;top:-1px;}
#top-menu {text-align:center;position:relative;top:-20px;z-index:1000;}
#top-menu a {margin:0 20px 0 20px;}
#top-text {width:540px;padding:10px;margin:0 auto;position:relative;top:-40px;}
#top-text span {display:block;font-size:32px;text-transform:uppercase;font-weight:bold;text-align:center;}
#top-text p {text-align:center;margin-top:20px;}

#menu {background-color:#F1AD00;margin-top:-100px;text-align:center;height:10px;}

#menu a {position:relative;top:-200px;display:inline-block;vertical-align:top;background-color:#E4E0E0;width:154px;height:154px;color:#000;text-decoration:none;text-transform:uppercase;font-size:14px;margin:0 30px 0 25px; padding:5px;border-radius:90%;}
#menu a>img {height:48px;margin:35px 20px 10px 20px;}
#menu a.active, #menu a:hover {color:#F1AD00;}

#content {background-color:#F3F2F2;}
#content-center {width:80%;padding:20px;margin:0 auto;line-height:1.6em;}
#content-center h1 {font-size:32px;text-transform:uppercase;font-weight:bold;text-align:center;margin-bottom:30px;}
#content-center h2 {font-size:28px;text-transform:uppercase;font-weight:bold;text-align:center;margin-bottom:30px;}
#content-center p.but {margin:40px;text-align:center;}
#content-center a.but, #content-center input[type=submit] {background-color:#313031;color:#fff;text-transform:uppercase;padding:10px 20px;margin:10px;}
#content-center a.but:hover, #content-center input[type=submit]:hover {background-color:#F1AD00;text-decoration:none;}
#content-center a {color:#F1AD00;font-weight:bold;}

#content-center table.soutez {width:99%;}
#content-center table.soutez td {width:33%;padding:20px;vertical-align:top;}
#content-center table.soutez h2 {margin-top:0px;}
#content-center table.soutez input[type=radio] {margin-right:10px;}

#content-center .den {display:block;}
#content-center .den>.datum {float:left;width:15%;font-size:28px;font-weight:bold;padding:10px;}
#content-center .den>.vyherci {float:right;width:85%;padding:10px;}
#content-center .den>.vyherci span {display:inline-block;width:20%;font-size:15px;text-align:center;}
 

#footer {background-color:#F1AD00;color:#313031;height:auto !important;font-size:14px;}
#footer a {color:#313031;}
#footer-center {width:80%;padding:40px 0;margin:0 auto;}

#footer-center .link {float:left;}
#footer-center .link img {height:20px;margin-right:30px;}
#footer-center .copyright {float:right;font-size:12px;}

.clear {
    clear: left;
}

.animation_container {
    position: relative;
    top:-100px;
    overflow: hidden;
    width: 100%;
    height: 440px;
}

canvas#bg_animation {
    display: block;
    position: absolute;
}

.animation_container img {
    display: block;
    position: relative;
    float: left;
}

.layer {
    position: absolute;
    left: 0;
    bottom: 0;
    /*height: 491px;*/
}

.layer_1 {z-index: -10;width: 5260px;height: 351px;bottom: 0;background: url("../assets/images/animation/1.png"), repeat-x;}
.layer_2 { z-index: -20;width: 6498px;height: 286px;bottom: 41px;background: url("../assets/images/animation/2.png"), repeat-x;}
.layer_3 {z-index: -30;width: 6186px;height: 304px;bottom: 165px;background: url("../assets/images/animation/3.png"), repeat-x;}
.layer_4 {z-index: -40;width: 4748px;height: 366px;top: 0;background: url("../assets/images/animation/4.png"), repeat-x;}

.logo {
    width: 289px;
    height: 378px;
    background: transparent url("../media/images/ikony/balon.png") no-repeat;

    position: absolute;
    top: 50px;
    right: 125px;

    /*transform: scale(0.75);*/
}

.programme_container {
    width: 100%;
    /*height: 175px;*/
    background: #f1ad00;
}

.programme_container h2 {
    font-family: Roboto, Helvetica, sans-serif;
    font-size: 23px;
    font-weight: bold;
    margin: 0;
}

.programme_container .date {
    font-size: 18px;
    margin-top: -3px;
}

.programme_container p {
    font-size: 12px;
}

.programme_container .controls {
    /*width: 100%;*/
    height: 175px;
    padding: 0 80px;
}

.control {
    /*padding: 0 25px;*/
}

.control .sbtn {
    width: 127px;
    height: 126px;

    position: relative;
    /*left: 10px;*/
    top: 20px;

    float: left;

    background-repeat: no-repeat;
    cursor: pointer;

    z-index: 10;
}

.sbtn.active {
    cursor: auto;
}

.control .text {
    margin-top: 35px;
    margin-left: 140px;
    /*width: 300px;*/
}

.sbtn.historie {
    background: url("../assets/images/btn_historie.png");
}
.sbtn.historie:hover, .sbtn.historie.active {
    background: url("../assets/images/btn_historie_a.png");
}

.sbtn.ples {
    background: url("../assets/images/btn_ples.png");
}
.sbtn.ples:hover, .sbtn.ples.active {
    background: url("../assets/images/btn_ples_a.png");
}

.sbtn.fest {
    background: url("../assets/images/btn_fest.png");
}
.sbtn.fest:hover, .sbtn.fest.active {
    background: url("../assets/images/btn_fest_a.png");
}

.sbtn.dd {
    background: url("../assets/images/btn_dd.png");
}
.sbtn.dd:hover, .sbtn.dd.active {
    background: url("../assets/images/btn_dd_a.png");
}

.sbtn .arrow {
    width: 40px;
    height: 34px;

    position: absolute;
    bottom: -30px;
    left: 43px;

    background: url("../assets/images/btn_arrow.png");

    z-index: -1;
}

.sbtn .arrow.hidden {
    visibility: hidden;
}


.programme_container .timetable {
    color: #f3f2f2;
    width: 100%;
    padding: 0 80px 0 80px;
    /*background: #eae7ea;*/
    background: #424243;
    overflow: hidden;
}

.timetable.zero {
    height: 0;
}

.timetable .offset {
    margin: 20px 0 10px 0;
}

.timetable .entry {
    /*height: 50px;*/
    padding: 10px 20px;
}

.entry .datetime {
    font-size: 18px;
    position: absolute;
    top: 5px;
}

.entry p {
    margin: 0 50px;
}


.timeline_container {
    width: 100%;
    height: 227px;
    padding: 0 44px;
    overflow: hidden;
    background: #f3f2f2;

    position: relative;
}

.comments_control {
    width: 44px;
    height: 150px;
    background: #424243;
    background-size: 11px 10px;

    position: absolute;
    bottom: 0;

    cursor: pointer;
    z-index: 1;
}

.comments_control.left {
    left: 0;
}

.comments_control.right {
    right: 0;
}

.comments_control .icon {
    width: 10px;
    height: 11px;
    background: url("../assets/images/comment_controls.png")no-repeat;

    position: relative;
    margin: -5px auto 0 auto;
    top: 50%;
}

.comments_control.right .icon {
    background-position: -10px 0;
}

.comments_container {
    width: 10000px;
    height: 100%;
    position: absolute;

    background: url("../assets/images/comments_bg.png") repeat-x;
}

.comment {
    width: 370px;
    height: 100%;

    position: relative;
    float: left;
}

.comment .year_container {
    font-size: 14px;
    position: absolute;
    height: 44px;
    line-height: 44px;
    top: 26px;
    left: 30px;
    padding: 0 10px 0 30px;
    background: #f3f2f2;
    /*background: red;*/
}

.year_container .dot {
    position: absolute;
    font-size: 20px;
    line-height: 41px;
    left: 10px;
}

.dot.big {
    font-size: 26px;
    line-height: 40px;
}

.year_container p {
    font-size: 14px !important;
    display: inline;
}

.year_container .large {
    display: inline-block;
    font-size: 24px;
    line-height: 16px;
    margin-top: 5px;
}

.comment .text-container {
    width: 290px;
    height: 150px;

    position: absolute;
    bottom: 0;
    left: 40px;
}

.comment h3 {
    font-family: Roboto, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #222222;
    margin: 22px 0 0 0;
}

.comment .year {
    display: block;
    font-size: 14px;
    font-weight: 100;
    margin-top: 7px;
}

.comment p {
    font-size: 12px;
    font-weight: lighter;
    margin-top: 7px;
    letter-spacing: 0;
}


/* mobil */

@media (max-width: 980px) {
body {overflow-x:hidden;}
#top-center {width:auto;padding:10px;}
#top-center #user {margin:0px;font-size:12px;}
#top-text {width:auto;margin-top:40px;}
#top-text span {font-size:26px;line-height:1.2em;}
#menu {width:99%;}
#menu a {position:relative;top:-240px;display:inline-block;vertical-align:top;background-color:#E4E0E0;width:110px;height:110px;color:#000;text-decoration:none;text-transform:uppercase;font-size:13px;margin:0 30px 0 30px; padding:5px;border-radius:90%;}
#menu a>img {height:32px;margin:20px 20px 10px 20px;}

#content {padding:0 10px 0 10px;}
#content-center {width:auto;font-size:0.9em;}
#content-center h1 {font-size:26px;}
#content-center h2 {font-size:23px;}
#content-center td {display:block;}
#content-center p {width:99%;display:block;}
#content-center table.soutez td {display:block;width:auto;vertical-align:top;}

#content-center .den>.datum {float:left;width:25%;font-size:18px;font-weight:bold;padding:5px;}
#content-center .den>.vyherci {float:right;width:70%;padding:5px;}
#content-center .den>.vyherci span {display:block;width:60%;font-size:15px;text-align:center;}

#footer {text-align:center;padding:10px;}
#footer-center {width:auto;}

#footer-center .ctvrt {display:inline-block;width:auto;margin:0 0 30px 0;text-align:center;}
#footer-center .pul {display:inline-block;width:45%;margin:0 10px 30px 10px;text-align:center;}
#footer-center .ctvrt img {position:relative;top:0px;margin-right:7px;}
#footer-center .pul img {position:relative;top:0px;margin-right:7px;}
#footer-center .copyright {float:none;font-size:10px;}

}

#cookie {
transition:2s all;-webkit-transition:2s all;-moz-transition:2s all;-o-transition:2s all;-ms-transition:2s all;
text-align:center;padding:5px;width:100%;height:auto;font-size:12px;color:#fff;background-color:#000;opacity:0.9;position:fixed;bottom:0;
}
#cookie a {color:#fff;text-decoration:none;cursor:pointer;display:inline-block;}
#cookie a.c_vse {padding:5px 10px;background-color:green;border-radius:10px;margin:10px;}
#cookie a.c_vybrane {padding:5px 10px;background-color:orange;border-radius:10px;margin:10px;}
#cookie a.c_ne {padding:5px 10px;background-color:red;border-radius:10px;margin:10px;}