body, html {
font-family:"Arial Narrow";
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}

.casete {
width:200px;
max-width:100%;
}

#indicator {
pointer-events: none;
}

#push {
pointer-events: none;
}

.sina {
pointer-events: none;
}


@media screen and (max-width:620px) {
.bara1, .bara2, .bara3 {
display:none!important;}
.linie-punct{
margin-left:0px!important;
}

.text2 {
width:350px!important;
text-align:left;
font-size:14px;
}
.casetamelodii {
width:350px!important;
padding:5px!important;
}
.negrutransp {
width:350px!important;
padding:5px!important;
}
.caseta {
margin:0px!important;
}
}

@media screen and (max-width:740px) and (min-width:621px){
.casetamelodiisus {
display:inline-block!important;
}
.bara1, .bara2, .bara3 {
display:none!important;}
.linie-punct{
display:none!important;
}

.text2 {
width:300px!important;
text-align:left;
font-size:13px;
float:right;
margin-top:-15px;
}
.d200 {
width:300px!important;
}
.casetamelodii {
width:600px!important;
padding:5px!important;
}
.negrutransp {
width:600px!important;
padding:5px!important;
}
.caseta {
margin:0px!important;
}
}

.d100 {
width:100%;
text-align:center;
position:absolute;
z-index:100;
bottom:-48px;
animation: urcas 1s;
animation-fill-mode:forwards;
}
.c100 {
    width: 100%;
    //text-align: center;
    position: absolute;
    z-index: 600;
    //height: 40vh;
    bottom: 110px;
    top: 50px;

}


.casetamelodiisus {
text-align:left!important;

}
.casetamelodii {
background-color:#000;
opacity: 0.7;
margin:auto;
max-width:740px;
width:100%;
color:#FFFFFF;

}

.italic {
font-style:italic;
}
.negrutransp {
    background-color: #000;
    opacity: 0.7;
    margin: auto;
    max-width: 740px;
    width: 100%;
    color: #FFFFFF;
    height: 100%;
    overflow-y: scroll;
}

.continut {
margin:20px;
text-align:left;
}
.negrutransp1 {
    background-color: #000;
    opacity: 0.7;
    width: 100%;
    color: #FFFFFF;
    height: 100%;
	text-align:center;
	position:absolute;
	z-index:600;
}
.continut1 {
height: 100%;
width: 100%;
max-width:740px;
margin-left:auto;
margin-right:auto;
overflow-y: hidden;

}
.bandajos {
width:100%;
height: 115px;
position:absolute;
z-index:610;
bottom:0px;
}
.bandajos p {
height:15px;
color:#FFFFFF;
margin:0px 0px 0px 10px;
}
.negru {
background:#000;
height:100px;
overflow-x:auto;
overflow-y:hidden;
}
.colectie {
width:100%;
height:80px;
overflow:scroll;
}
.negru img {
height:70px;
width:70px;
margin:5px;
}
.stanga {
//display:inline-block;
//width: 25%;
margin:1%;
//float:left;
height:48%;
}
.stanga img {
//width:100%;
//max-width:15vh;
height:95%;
}
.dreapta {
//display:inline-block;
//width: 70%;
height:48%;
margin:1%;
//float:right;
text-align:left;
color:#fff;
overflow-y: auto;
}
.cumpara {
background:#0f739c;
color:#fff;
padding:10px;
position:absolute;
top: 10vh;
margin-left:-20px;
text-decoration:none;

}
.audio {
color:#0f739c;
font-weight:bold;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
  height:10px;
}

/* Track */
::-webkit-scrollbar-track {
      background: #000;
}

 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #fff; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}



@keyframes urcas
{
  0%   {bottom:-48px;
}

  100% { bottom:0px;
}
}



.navigation {
  
  
  cursor: pointer;
}
.bara1 {
height:30px;
width:4px;
background:#fff;
position:absolute;
margin-top:-7px;
}
.bara2 {
height:12px;
width:1px;
background:#fff;

}
.bara3 {
height:12px;
width:1px;
background:#fff;

}


.controls {
margin-top:5px;
}
.caseta {
margin: 0px 0px 0px 10px;
}
.navigation, #nrmelodie, .bara1, .bara2, .play, .pause, .caseta, .controls, .bara3, .text1, .text2 {
display:inline-block;
}
.info, .play, .pause {
cursor:pointer;
}
.pause, .play {
width: 10px;
}
.opreste {
margin-bottom:2px;
}
.opreste:hover {
border:1px solid #fff;
}
.play {
background-image:url(../muzica-populara-i/play.png);
-webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
	width:12px;
	height:15px;
	}
.play:hover {
background-image:url(../muzica-populara-i/play-h.png);

}

.inapoi {
-webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
	margin-left:3px;
	margin-right:0px;
	}
.inapoi:hover {
margin-left:0px;
	margin-right:3px;
}

.inainte {
-webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
	margin-left:0px;
	margin-right:3px;
	}
.inainte:hover {
margin-left:3px;
	margin-right:0px;
}

#nrmelodie {
height:10px;
}
.linie-punct {
margin-left:10%;
border-bottom:1px dashed #fff;
}
.navbar {
overflow:visible;
position:absolute;
z-index:5000;
 background-color: #718226;
 color:#FFFFFF;
 width:100%;
 top:-38px;
 animation: coboara 1s;
 animation-fill-mode:forwards;
}

@keyframes coboara
{
  0%   {top:-38px}

  100% { top: 0px}
}



.navbar .btn-navbar-highlight {
    display: none;
    width: 100%;
}


.btn-primary {
    background-color: #718226;
	}
	
	.btn-primary, .btn-primary:hover, a.btn-primary, a.btn-primary:hover {
    color: #ffffff;
}

#exitfullscreen {
display:none;
}

.d240 {
width:240px;
display:inline-block;
}
.d200 {
width:200px;
display:inline-block;
}
.d300 {
width:300px;
display:inline-block;
}
@media (min-width: 980px) 
.nav-collapse.collapse {
    height: auto!important;
    overflow: visible!important;
}

.collapse {
    position: relative;
    height: 24px;
	    background-color: #718226;

}


.navbar .nav {
    position: relative;
    left: 0;
    display: block;
}

.dropdown {
    position: relative;
	display:inline-block;
	vertical-align:top;
	color:#fff;
	padding: 10px 15px 10px 15px;
	text-decoration:none;
}
.dropdown:hover {
    color:#F4C1DB;
	text-decoration:none;
}
.dropdown-mic {
	display:inline-block;
	color:#eee;
	padding: 5px 15px 5px 15px;
	text-decoration:none;
}
.dropdown-mic:hover {
    color:#fff;
	text-decoration:none;
}


.dropdown-menu {
position:absolute;
background-color: #819438;
width:100%;
padding: 0px!important;
}
.dropdown-menu li {
display:inline-block;
}
#catalog, #ethnophonie {
visibility:hidden;
}
.navbar .nav-pills > .active > a, .navbar .nav-pills > .active > a:hover, .navbar .nav-pills li.dropdown.open > .dropdown-toggle, .navbar .nav-pills li.dropdown.active > .dropdown-toggle {
    color: #fff;
    background-color: #718226;
}

.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle {
    background: none;
}

.navigare {
display:none;
}
#indicator
{
    bottom: 0;
    width: 10px;
    height: 12px;
	background-image:url(../muzica-populara-i/indicator.png);
	display:inline-block;
	visibility:hidden;
}
#push
{
    bottom: 0;
    width: 0px;
    height: 0px;
	display:inline-block;
}
.sina {
position:absolute;
z-index:6000;
margin-top:-15px;
height:12px;
}
#titlu, #s1, #s2, #s3 {
position:absolute;
left:60%;
width:320px;
height: 60px;
z-index:500;
}

a {
color:#0f739c;
font-weight:bold;
}
a:hover {
color:#fff;
}
h1 {
color:#0f739c;
font-size:24px;
}
h2 {
color:#0f739c;
font-size:20px;
}

.pp2 {
display:inline-block;
width: 200px;
height: 60px;
border: 2px solid #fff;
color:#fff;
background:#000;
opacity:0.7;
font-size:20px;
text-decoration:none;
padding: 0px 5px 0px 5px;
}
.pp2:hover {
color:#0f739c;
}

.pp2:hover h3 {
color:#FFFFFF!important;
font-size:14px;
text-decoration:none;
margin-bottom:0px!important;
margin-top:5px!important;

}

.pp2 h3 {
color:#FFFFFF!important;
font-size:14px;
text-decoration:none;
margin-bottom:0px!important;
margin-top:5px!important;
}
.suport {
display:flex;
margin-bottom: 20px;
}
.ethnophonie {
position:absolute;
right:-87px;
top:50px;
background-image:url(../muzica-populara-i/ethnophonie.png);
width:87px;
height:132px;
z-index:500;
 animation: stanga 1s;
 animation-fill-mode:forwards;
}

@keyframes stanga
{
  0%   {right:-87px;}

  100% { right:25px;}
}


.pp1 {
display:inline-block;
width: 80px;
height: 60px;
border: 2px solid #fff;
margin-right: 20px;
}

.slider {
width: 80px;
height: 60px;
  position: relative;
}
.slide1,.slide2,.slide3, .slide4,.slide5,.slide6, .slide7,.slide8,.slide9 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(../muzica-populara-i/muzica-populara-1.jpg)no-repeat center;
      background-size: cover;
    animation:fade 18s infinite;
-webkit-animation:fade 18s infinite;

} 
.slide2 {
  background: url(../muzica-populara-i/muzica-populara-2.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 18s infinite;
-webkit-animation:fade2 18s infinite;
}
.slide3 {
    background: url(../muzica-populara-i/muzica-populara-3.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 18s infinite;
-webkit-animation:fade3 18s infinite;

}

.slide4 {
  background: url(../muzica-populara-i/muzica-populara-4.jpg)no-repeat center;
      background-size: cover;
    animation:fade 18s infinite;
-webkit-animation:fade 18s infinite;
animation-delay:2s;

} 
.slide5 {
  background: url(../muzica-populara-i/muzica-populara-5.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 18s infinite;
-webkit-animation:fade2 18s infinite;
animation-delay:2s;
}
.slide6 {
    background: url(../muzica-populara-i/muzica-populara-6.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 18s infinite;
-webkit-animation:fade3 18s infinite;
animation-delay:2s;
}


.slide7 {
  background: url(../muzica-populara-i/muzica-populara-7.jpg)no-repeat center;
      background-size: cover;
    animation:fade 18s infinite;
-webkit-animation:fade 18s infinite;
animation-delay:4s;
} 
.slide8 {
  background: url(../muzica-populara-i/muzica-populara-8.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 18s infinite;
-webkit-animation:fade2 18s infinite;
animation-delay:4s;

}
.slide9 {
    background: url(../muzica-populara-i/muzica-populara-9.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 18s infinite;
-webkit-animation:fade3 18s infinite;
animation-delay:4s;

}

@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

@keyframes urca1
{
  0%   {top:100%}
  70% {top:180px}
  100% { top: 200px}
}

@keyframes urca2
{
  0%   {top:100%}
    70% {top:280px}

  100% { top: 300px}
}

@keyframes urca3
{
  0%   {top:100%}
    70% {top:360px}

  100% { top: 380px}
}

@keyframes urca4
{
  0%   {top:100%}
    70% {top:440px}

  100% { top: 460px}
}

#titlu {
animation: urca1 1s ease 0.5s;
animation-fill-mode: forwards;
top:100%;
animation-delay:1s;

}
#s1 {
animation: urca2 1s ease 0.5s;
animation-fill-mode: forwards;
top:100%;
animation-delay:1.5s;
}
#s2 {
animation: urca3 1s ease 0.5s;
animation-fill-mode: forwards;
top:100%;
animation-delay:2s;

}
#s3 {
animation: urca4 1s ease 0.5s;
animation-fill-mode: forwards;
top:100%;
animation-delay:2.5s;

}


@media screen and (max-height:700px) {
@keyframes urca1
{
  0%   {top:100%}
  70% {top:80px}
  100% { top: 100px}
}

@keyframes urca2
{
  0%   {top:100%}
    70% {top:180px}

  100% { top: 200px}
}

@keyframes urca3
{
  0%   {top:100%}
    70% {top:260px}

  100% { top: 280px}
}

@keyframes urca4
{
  0%   {top:100%}
    70% {top:340px}

  100% { top: 360px}
}

}

@media screen and (max-height:550px) and (max-width:639px) {
#s1, #s2, #s3 {
display:none!important;
}
#titlu {
left:10px!important;
}
}
@media screen and (max-height:550px) and (min-width:640px) and (max-width:750px){

.ethnophonie {
    top: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 66px;
    height: 88px;
    animation-fill-mode: forwards;
	}
	}
@media screen and (max-height:550px) and (min-width:640px) {
	
@keyframes urca1
{
  0%   {top:100%}
  70% {top:30px}
  100% { top: 50px}
}

@keyframes urca2
{
  0%   {top:100%}
    70% {top:130px}

  100% { top: 150px}
}

@keyframes urca3
{
  0%   {top:100%}
    70% {top:130px}

  100% { top: 150px}
}

@keyframes urca4
{
  0%   {top:100%}
    70% {top:130px}

  100% { top: 150px}
}

#titlu, #s1 {
left:10px!important;
}

#s2 {
left:220px!important;
}

#s3 {
left:430px!important;
}


#s1, #s2, #s3 {
width:200px;
overflow:hidden;
font-size:14px;
height:90px;
}

#s1 a h3, #s2 a h3, #s3 a h3 {
font-size:14px;
}
#s1 a, #s2 a, #s3 a {
font-size:16px;

}

.pp1 {
margin-right:10px!important;
}

}







.slider-container {
  position: absolute;
  z-index:50;
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
}

.slider-slice {
  position: relative;
  width: 5%;
  height: 100%;
  display:inline-block;
  overflow: hidden;
}


.slider-slice-imageContainer {
  height: 100%;
  width: 5vw;
  position: relative;
  display:inline-block;
  }
  
  
  .miscare {
  width:300vw;
  height:100%;
 position:absolute;
 display:inline-block;
  animation: avans 1s;
  animation-fill-mode:forwards;
}
@keyframes avans
{
  0%   {margin-left:5vw;}
  100% {margin-left:0vw;}
}

.etalon1 {
background:url(../muzica-populara-i/muzica-populara-1.jpg);
}
.etalon2 {
background:url(../muzica-populara-i/muzica-populara-2.jpg);
}
.etalon3 {
background:url(../muzica-populara-i/muzica-populara-3.jpg);
}
.etalon4 {
background:url(../muzica-populara-i/muzica-populara-4.jpg);
}
.etalon5 {
background:url(../muzica-populara-i/muzica-populara-5.jpg);
}
.etalon6 {
background:url(../muzica-populara-i/muzica-populara-6.jpg);
}
.etalon7 {
background:url(../muzica-populara-i/muzica-populara-7.jpg);
}
.etalon8 {
background:url(../muzica-populara-i/muzica-populara-8.jpg);
}
.etalon9 {
background:url(../muzica-populara-i/muzica-populara-9.jpg);
}
.etalon10 {
background:url(../muzica-populara-i/muzica-populara-10.jpg);
}
.etalon11 {
background:url(../muzica-populara-i/muzica-populara-11.jpg);
}
.etalon12 {
background:url(../muzica-populara-i/muzica-populara-12.jpg);
}
.etalon13 {
background:url(../muzica-populara-i/muzica-populara-13.jpg);
}
.etalon14 {
background:url(../muzica-populara-i/muzica-populara-14.jpg);
}
.etalon15 {
background:url(../muzica-populara-i/muzica-populara-15.jpg);
}
.etalon16 {
background:url(../muzica-populara-i/muzica-populara-16.jpg);
}
.etalon17 {
background:url(../muzica-populara-i/muzica-populara-17.jpg);
}
.etalon18 {
background:url(../muzica-populara-i/muzica-populara-18.jpg);
}
.etalon19 {
background:url(../muzica-populara-i/muzica-populara-19.jpg);
}
.etalon20 {
background:url(../muzica-populara-i/muzica-populara-20.jpg);
}
.etalon21 {
background:url(../muzica-populara-i/muzica-populara-21.jpg);
}
.etalon22 {
background:url(../muzica-populara-i/muzica-populara-22.jpg);
}
.etalon23 {
background:url(../muzica-populara-i/muzica-populara-23.jpg);
}
.etalon24 {
background:url(../muzica-populara-i/muzica-populara-24.jpg);
}
.etalon25 {
background:url(../muzica-populara-i/muzica-populara-25.jpg);
}
.etalon26 {
background:url(../muzica-populara-i/muzica-populara-26.jpg);
}
.etalon27 {
background:url(../muzica-populara-i/muzica-populara-27.jpg);
}
.etalon28 {
background:url(../muzica-populara-i/muzica-populara-28.jpg);
}
.etalon29 {
background:url(../muzica-populara-i/muzica-populara-29.jpg);
}
.etalon30 {
background:url(../muzica-populara-i/muzica-populara-30.jpg);
}
.etalon31 {
background:url(../muzica-populara-i/muzica-populara-31.jpg);
}
.etalon32 {
background:url(../muzica-populara-i/muzica-populara-32.jpg);
}
.etalon33 {
background:url(../muzica-populara-i/muzica-populara-33.jpg);
}
#miscare1 .slider-slice-imageContainer {
background-position-x:0;
background-repeat: repeat-x!important;
}


#miscare2 .slider-slice-imageContainer {
background-position-x:-100%;
background-repeat: repeat-x!important;
}
#miscare3 .slider-slice-imageContainer {
background-position-x:-200%;
background-repeat: repeat-x!important;
}
#miscare4 .slider-slice-imageContainer {
background-position-x:-300%;
background-repeat: repeat-x!important;
}
#miscare5 .slider-slice-imageContainer {
background-position-x:-400%;
background-repeat: repeat-x!important;
}
#miscare6 .slider-slice-imageContainer {
background-position-x:-500%;
background-repeat: repeat-x!important;
}
#miscare7 .slider-slice-imageContainer {
background-position-x:-600%;
background-repeat: repeat-x!important;
}
#miscare8 .slider-slice-imageContainer {
background-position-x:-700%;
background-repeat: repeat-x!important;
}
#miscare9 .slider-slice-imageContainer {
background-position-x:-800%;
background-repeat: repeat-x!important;
}
#miscare10 .slider-slice-imageContainer {
background-position-x:-900%;
background-repeat: repeat-x!important;
}
#miscare11 .slider-slice-imageContainer {
background-position-x:-1000%;
background-repeat: repeat-x!important;
}
#miscare12 .slider-slice-imageContainer {
background-position-x:-1100%;
background-repeat: repeat-x!important;
}
#miscare13 .slider-slice-imageContainer {
background-position-x:-1200%;
background-repeat: repeat-x!important;
}
#miscare14 .slider-slice-imageContainer {
background-position-x:-1300%;
background-repeat: repeat-x!important;
}
#miscare15 .slider-slice-imageContainer {
background-position-x:-1400%;
background-repeat: repeat-x!important;
}
#miscare16 .slider-slice-imageContainer {
background-position-x:-1500%;
background-repeat: repeat-x!important;
}
#miscare17 .slider-slice-imageContainer {
background-position-x:-1600%;
background-repeat: repeat-x!important;
}
#miscare18 .slider-slice-imageContainer {
background-position-x:-1700%;
background-repeat: repeat-x!important;
}
#miscare19 .slider-slice-imageContainer {
background-position-x:-1800%;
background-repeat: repeat-x!important;
}
#miscare20 .slider-slice-imageContainer {
background-position-x:-1900%;
background-repeat: repeat-x!important;
}

#slideoverlay {
width:100%;
height:100%;
position:absolute;
z-index:100;
}

#slideoverlay img{
height:100%;
width:auto;
}

.slider-slice-imageContainer {
background-size:auto 100%;
}



@media screen and (min-aspect-ratio: 1499/1022) {
#slideoverlay img{
width:100%!important;
height:auto!important;
}

.slider-slice-imageContainer {
background-size:2000% auto!important;
}

}
#meniu {
display:inline-block;
}


@media screen and (max-width:850px) and (min-width:501px) and (min-height:551px) {

#titlu, #s1, #s2, #s3 {
    left: 30%!important;
}

}
@media screen and (max-width:500px) {

#titlu, #s1, #s2, #s3 {
    left: 10px!important;
}

}


@media screen and (max-width:1015px) and (min-width:801px){

#meniu {
margin-left:7px;
}


}
@media screen and (max-width:1015px) {


.dropdown, .dropdown-mic {
    padding: 10px 3px 10px 3px;
	font-size:14px;
}

.navigare {
margin-left:7px;
}
#fullscreen, #exitfullscreen {
margin-right:7px;
}
}

@media screen and (max-width:800px) {
.navigare {
display:block;
float:left;
cursor:pointer;
height:36px;
line-height:36px;
font-size:16px;
font-weight:bold;
color:#FFFFFF;
margin-left:10px;
}
#meniu {
height:0px;
max-height:70vh;
overflow:auto;
position:absolute;
background-color: #718226;
display:block;
margin-top:36px;
padding-left:10px;
}
.dropdown, .dropdown-mic {
display:block;
}
.dropdown-mic {
margin-left: 10px;
margin-right: 10px;
}
.dropdown-menu {
position:relative;
}
#ethnophonie, #catalog {
height:0px;
}
.sina, .indicator {
display:none;
}

}
