body, html { width:100%; height:100%; }
body{ background-position:center top; background-size: cover; font-family: 'Roboto', sans-serif; color: #fff; overflow: hidden; }
body.home { background-position:center center; }
ul{ padding: 0; }
iframe{ border: none; }
a:hover{ text-decoration: none}

.body-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1; display: none;}
.body-underlay { width:100%; height:100%; position:absolute; top:0; left:0; 
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(20%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}

/* Mobile nav */
.mobile-nav { display:none; }
.nav-button{ position: absolute; top: 30px; right: 30px; font-size: 20px; cursor: pointer; z-index: 100; }
.nav-button span{ margin-right: 40px; font-family: 'Roboto', sans-serif;}
.list-group{ display: none; overflow-y: scroll; width: 100%; height: 100%; background: #111; position: fixed; right: 0; top: 0; text-align: center; box-shadow: 5px 0px 35px 0px rgba(0, 0, 0, 0.75) inset; z-index: 9999;}
.links-wrap{ display: inline-block; padding-top: 60px; padding-bottom: 10px; }
.list-group a { float: left ; font-size: 22px; color: #fff; border-bottom: 2px solid #6a020f; text-decoration: none; width: 100%; padding-bottom: 2vh; padding-top: 2vh; }
.close-button { position: absolute; top: 30px; right: 30px; cursor: pointer; }
.list-group .social-links a{ border: none; }
.list-group .social-links a span{ font-size: 12px; }
.mobile-logo { width: 220px; }
a.lang-mobile{ width: 33.33%; }

/* Desktop nav */
.desktop-nav{ background-color: rgba(0, 0, 0, .6); height: 107px; box-shadow: 0px 3px 10px rgba(0 , 0, 0, 0.3); z-index: 100; position: fixed; width: 100%; top: 0; left: 0; }
.menu{ text-align: right; padding-right: 60px; }
.menu ul{ list-style: none; margin: 0; }
.menu ul li{ display: inline-block; height: 107px; line-height: 107px; }
.menu ul li a{ color: #fff; font-size: 18px; text-decoration: none; padding: 0 10px 0 10px; }
.logo{ float: left; padding-left: 60px; }
.first-lang{ border-left: 1px solid #fff; }

.bottom-navi-wrap{ width: 36vw; height: 31vh; /*background:rgba(0,0,0,0.2);*/ margin-left: auto; margin-right: auto; margin-top: 37vh; position: relative; text-align: center; padding-top:10px; }
.bottom-navi-wrap p{ font-size: 14px; text-shadow: 0px -3px 3px rgba(0, 0, 0, 0.75); padding-left: 30px; padding-right: 30px; }
.bottom-navi{ border-top: 1px solid #fff; padding-top: 3vh; border-bottom: 1px solid #fff; padding-bottom: 2vh;  margin-top: 4vh; }
.bottom-navi-item{ display: inline-block; padding-right: 30px; padding-left: 30px; border-right: 1px solid #fff; }
.bottom-navi-item:last-child{ border-right: transparent; }
.bottom-navi-item a{ color: #fff; text-decoration: none; font-size: 16px; text-shadow: 0px -2px 4px rgba(0, 0, 0, 0.75); }


.contact-us{ width: 30vw; height: 6vh; background: #6a020f; position: fixed; bottom: 0; left: 50%; margin-left: -15vw; text-align: center; line-height: 6vh; cursor: pointer; }
.contact-us span { font-size: 26px; text-shadow: 3px 0px 3px rgba(0, 0, 0, 0.8); }

.contact-info{ width: 100%; background: #111111; position: absolute; bottom: 0; display: none; z-index: 2; }
.contact-info h1{ text-align: center; margin-top: 2vh; font-size: 24px; }
.contact-info .item{ width: 25%; display: inline-block; margin-left: -4px; padding: 10px; text-align: center; font-size: 16px; vertical-align: top; }
.contact-info .social-links{ text-align: center; width: 100%; margin-left: auto; margin-right: auto; margin-top: 6vh; padding-bottom: 6vh; }
.contact-info .social-links div { display: inline-block; margin-left: 20px; text-align: left; }
.contact-info .close-button{ top: 0; margin-top: 2vh; }
.vertical-line{ height: 1px; background: #6a020f; width: 400px;}

.repertoar-left{ width: 38vw; background: rgba(106, 2, 15, 0.85); margin-top: 120px; padding-left: 25vw; padding-top: 10px; padding-bottom: 10px; display: none; }
.repertoar-left span{ font-size: 26px; }
.repertoar-video{ width: 33vw; background: rgba(0, 0, 0, 0.85); position: absolute; right: 0; top: 120px; cursor: pointer; padding-left: 4vw; padding-top: 10px; padding-bottom: 10px; display: none; }
.repertoar-video span{ font-size: 26px; color: #fff; }
.repertoar-video i{ margin-left: 10px; color: #fff;  }

.repertoar-right{ width: 80vw; background: rgba(255, 255, 255, 0.85); position: absolute; right: 0; top: 200px; display: none;}
.repertoar-nav{ padding-top: 80px; padding-bottom: 80px; padding-left: 60px; float: left; }
.repertoar-nav ul{ list-style: none; font-size: 12px; color: #898989; border-top: 1px solid #6a020f; border-bottom: 1px solid #6a020f; }
.repertoar-nav ul li{ padding-bottom: 1vh; margin-bottom: 1vh; border-bottom: 2px solid #cccccc; cursor: pointer; }
.repertoar-nav ul li:last-child{ border-bottom: transparent; }
.repertoar-nav ul li:first-child{ padding-top: 2vh; }
.repertoar-holder { height: 265px; overflow-y: scroll; }
.repertoar-list{ padding-left: 50px; padding-right: 100px; padding-top: 80px; font-size: 11px; color: #111; }
.pdf-list{ border: none; color: #fff; background: #000; padding: 10px 30px; position: absolute; bottom: 20px; left: 280px; }
.repertoar-nav select { display: none; }

.video-left{ width: 38vw; background: rgba(106, 2, 15, 0.85); margin-top: 32vh; padding-left: 25vw; padding-top: 2vh; padding-bottom: 2vh; }
.video-left span{ font-size: 26px; }

.video-right{ width: 80vw; background: rgba(255, 255, 255, 0.85); position: absolute; right: 0; top: 200px; padding-bottom: 10px; visibility:hidden; overflow-y: auto; }
.video-container { padding-top: 40px; padding-bottom: 40px; padding-left: 60px; float: left; }
.video-list{ padding-left: 480px; padding-right: 100px; font-size: 11px; padding-top: 20px; color: #111; }
.video-list ul{ /*width: 300px;*/ list-style: none; outline: none; }
.list-holder { height: 200px; overflow-y: scroll; }
.video-list ul li{ padding-left: 15px; padding-top: 10px; padding-bottom: 10px; cursor: pointer; }
.video-list select { display: none; }

.list-holder .slick-dots { width: auto; padding-left: 0; }
.list-holder .slick-dots li{ float: left; padding-left: 0; }
.list-holder .slick-dots li button{ border: none; background: none; text-align: center; }
.list-holder .slick-active button{ color: #6a020f; outline: none; }

.sponzori-wrap { /*margin-left: 30px;*/ float:left; }
.sponzori-wrap p { font-size: 12px; }
.sponzor{ width: 8vw; height: auto; background: #fff; float: left; margin-left: 10px; margin-bottom: 10px; line-height: 7vh;}
.sponzor img { width: 100%; height: auto; }
    .sponzor:nth-child(3n+1) { clear:left; }
.song{ padding: 10px; border: none; background: #6a020f; color: #fff; float: left; margin-top: 20px; display: block; margin-left: 5px; text-transform: uppercase; }
.controls { float: left; }

.gallery-wrap{ padding: 5vh 19vw 5vh 6vw; /*height: 300px; overflow-y: scroll;*/}
.gallery-wrap img{ width:100%; height:auto; }
.single-img { float:left; /*width:33%;*/ padding:0 1px 1px 0; text-align: center; }
.single-img span{ color: #000; padding-top: 10px; display: block; padding-bottom: 15px; }
a.single-img{ outline: none; }

.gallery-page .slick-dots { padding-left:6vw; margin:-30px 0 0 0; height:auto; position:relative; z-index:400; float:left; }
.gallery-page .slick-dots li{ float: left; list-style:none; }
.gallery-page .slick-dots li button{ border: none; background: none; text-align: center; }
.gallery-page .slick-active button{ color: #6a020f; outline: none; }


li.stripe{ background-color: #cccccc; }
.red{ color: #6a020f; }
.active { color: #000; }

/* about */
.band-overlays > div { display:none; position:absolute; top:0; left:0; background-size:cover; background-position:center top; width:100%; height:100%; display:none; }
.onama-left{ width: 65vw; background: rgba(255, 255, 255, 0.85); height: 30vh; margin-top: 60vh; display: none; position:relative; overflow-y: scroll; }
.onama-left p, .onama-left ul{ padding-right: 80px; padding-left: 25vw; padding-top: 20px; color: #111111; font-size: 12px; margin-top:0; margin-bottom:0; }
    .onama-right ul { padding-left:15px; }

.onama-right{ height: 30vh; width: 33vw; padding-left:20px; background: rgba(0, 0, 0, 0.85); position: absolute; right: 0; top: 60vh; cursor: pointer; display: none; }
.onama-right span{ font-size: 26px; }
.onama-right select { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); border: none; outline: none; display: none; }

/* discography */
.sponzori-wrap { display:none; }

/* Responsive */
@media screen and (max-width: 1376px) {
	.contact-info .social-links { margin-top: 20px; padding-bottom: 20px; }
	.vertical-line { width: 15%; }
	.onama-right { height: 200px; width: auto; padding-left: 20px; top: 250px; padding-right: 100px; }
}

@media screen and (max-width: 1200px) {
	.bottom-navi-wrap{ height: auto; width: 50%; margin-top: 200px; }
	.bottom-navi-wrap p { padding-left: 15px; padding-right: 15px; }
	.bottom-navi { padding-top: 15px; padding-bottom: 15px; margin-top: 0; }
	.onama-left p, .onama-left ul { padding-right: 30px; padding-left: 30px; padding-top: 20px; margin-top: 0; margin-bottom: 0; }	
	.video-list { padding-right: 10px; }
}

@media screen and (max-width: 960px) {
    .desktop-nav { display: none; }
	.mobile-nav { display: block; }
	.bottom-navi-wrap { width: 80%; margin-top: 100px; }
	.contact-us { width: 100%; height: 40px; left: 0; margin-left: 0; line-height: 40px; }
	.contact-info .close-button { width: 20px; top: 10px; right: 10px; }
	.contact-info .item{ width: 50%; }
	.onama-right { padding-right: 30px; height: 40px; padding-right: 0; padding-left: 0; top: 200px; }
	.onama-left { width: 60%; position: absolute; top: 250px; height: 200px; margin-top: 0; }
	.onama-right span, .onama-right ul { display: none; }
	.onama-right select { display: block; }
	.repertoar-left { margin-top: 22px; padding-left: 0; text-align: center; }
	.video-right { max-height: 100%; width: 100%; text-align: center; }
	.video-container { padding-left: 2px; float: none; padding-bottom: 0; }
	.video-list { padding-left: 0; padding-right: 0; padding-top: 0px; text-align: center}
	.video-list h2 { padding-left: 0; }
	.list-holder { display: none; }
	.video-list select { display: block; background-color: #898989; border: 1px solid #6a020f; width: 300px; margin-left: auto; margin-right: auto; }
	.diskografija { padding-top: 70px; }
	.sponzori-wrap { float: none; width: 250px; margin-left: auto; margin-right: auto; }
	.sponzor { width: 25%; }
	.controls { position: absolute; top: 0; left: 50%; margin-left: -220px; }
	.video-list .diskografija-dropdown { display: none; }
	.single-img { width: 50%; }
	.gallery-wrap { padding-right: 6vw; }
}

@media screen and (max-width: 640px) {
	body{ overflow-y: scroll; }
    .bottom-navi-wrap { width: 100%; }
	.bottom-navi-item { padding-left: 8px; padding-right: 8px; }
	.contact-info h1 { margin-top: 15px; }
	.vertical-line { width: 0; }
	.contact-info .item{ width: 100%; }
	.onama-left, .onama-right { width: 100%; }
	.repertoar-right { width: 100%; padding-bottom: 80px; top: 250px; margin-bottom: 80px; }
	.repertoar-left { width: 50%; margin-top: 30px; }
	.repertoar-nav { padding: 20px 30px 0 30px; float: none; }
	.repertoar-nav ul { display: none; }
	.repertoar-nav select, .video-list .diskografija-dropdown { display: block; background-color: #898989; border: 1px solid #6a020f; width: 100%; }
	.repertoar-list { padding-left: 30px; padding-right: 30px; padding-top: 0; }
	.repertoar-holder { height: 200px; }
	.pdf-list { left: 50%; margin-left: -120px;  }
	.repertoar-video { width: auto; text-align: center; padding-right: 10px; top: 0; margin-top: 130px; } 
	.controls { display: none; }
	.video-list .diskografija-dropdown { position: absolute; top: 20px; width: 300px; left: 50%; margin-left: -150px; }
	.diskografija { padding-top: 50px; }
	.video-right { padding-bottom: 80px; }
}

@media screen and (max-width: 380px) {
	.single-img { width: 100%; }
}

@media screen and (min-width: 1025px) {
    .video-right { height: calc(100vh - 350px); }
    .list-holder { height:calc(50vh - 50px); }
}