body {
   margin: 0px;
   padding: 0px;
   overflow: hidden;
   background-color: black;
   line-height: 1.2;
}
#playlist{ list-style: none; }
#playlist li a { font-family: helvetica, sans-serif; font-size: 15px; color: #6f8d60;text-decoration: none; }
#playlist li a:hover, a.active { color: #cccccc; text-decoration: none; }
#playlist .current-song a{color: #cccccc; }



.schrift12px_gr { color: #666; font-size: 12px; font-family: helvetica, sans-serif; line-height: 16px; text-decoration: none; background-color: transparent; }
.schrift11px_gr { color: #666; font-size: 11px; font-family: helvetica, sans-serif; background-color: transparent; }
.schrift12px_gr_m { color: #666; font-size: 12px; font-family: helvetica, sans-serif; line-height: 24px; text-decoration: none; background-color: transparent; }
.schrift12px_w_m { color: white; font-size: 12px; font-family: helvetica, sans-serif; line-height: 24px; text-decoration: none; background-color: transparent; }
.schrift12px_w { color: white; font-size: 12px; font-family: helvetica, sans-serif; line-height: 16px; text-decoration: none; background-color: transparent; }

.title18px { color: white; font-size: 18px; font-family: helvetica, sans-serif; line-height: 14px; text-decoration: none; background: background-color: transparent; }
.text18px { color: white; font-size: 18px; font-family: helvetica, sans-serif; line-height: 14px; text-decoration: none; background: background-color: transparent; }
.text14px { color: white; font-size: 14px; font-family: helvetica, sans-serif; line-height: 14px; text-decoration: none; background: background-color: transparent; }
.title35px { color: white; font-size: 30px; font-family: helvetica, sans-serif; font-weight: 900; line-height: 14px; text-decoration: none; background: background-color: transparent; }

.about30px { color: white; font-size: 30px; font-family: helvetica, sans-serif; font-weight: 900; line-height: 14px; text-decoration: none; background: rgba(0,0,0,0.6); }


a.ufolink { text-decoration: none; border: 0; margin: 0; outline: none; line-height: 28px; }


a.emufilink:link { color: #6f8d60; font-size: 30px; font-family: helvetica, sans-serif; font-weight: 900; line-height: 28px; text-decoration: none; background: rgba(0,0,0,0.6); }
a.emufilink:visited { color: #6f8d60; font-size: 30px; font-family: helvetica, sans-serif; font-weight: 900; line-height: 28px; text-decoration: none; background: rgba(0,0,0,0.6); }
a.emufilink:hover { color: white; font-size: 30px; font-family: helvetica, sans-serif; font-weight: 900; line-height: 28px; text-decoration: none; background: rgba(0,0,0,0.6); }
a.emufilink:active { color: #e73361; font-size: 30px; font-family: helvetica, sans-serif; line-height: 28px; text-decoration: none; background: rgba(255,255,255,0.6); }

a.ukrainelink:link { color: yellow; font-size: 14px; font-family: helvetica, sans-serif; font-weight: 900; line-height: 8px; text-decoration: none; background: #3091F1; }
a.ukrainelink:visited { color: yellow; font-size: 14px; font-family: helvetica, sans-serif; line-height: 8px; text-decoration: none; background: #3091F1; }
a.ukrainelink:hover { color: #3091F1; font-size: 14px; font-family: helvetica, sans-serif; font-weight: 900; line-height: 8px; text-decoration: none; background: yellow; }
a.ukrainelink:active { color: #e73361; font-size: 14px; font-family: helvetica, sans-serif; line-height: 8px; text-decoration: none; background: rgba(255,255,255,0.6); }

.emufi-t {position: absolute; top: 25px; left: 30px; }

.wrapper1 {max-width: 100%; max-width: 600px;  }

.wrapper1pos {position: absolute; top: 70px; left: 30px; }

div.text {max-width: 600px; width: 95%; height: 100%; padding: 0px; margin: 0; }

.respons-pic {max-width: 95%; height: auto; }

p.textspace {letter-spacing: 0.1px; line-height: 1.3; background-color:rgba(0,0,0,0); }

.aboutpos-static {position: absolute; top: 35px; left: 200px; }

.playerpos  { position: absolute; top: 76px; left: 18px; }

.welcomepos  { position: absolute; top: 33px; left: 140px; }
.welcomepos1  { position: absolute; top: 18px; left: 240px; }

.flyerpos {position: relative; top: 300px; left:650px}
@media screen and (max-width : 982px ){.flyerpos {position: absolute; top: 300px; left: 200px; }
	}

.painterpos {position: absolute; top: 97%; left:72%; font-family: helvetica, sans-serif; font-size: 11px; color: #bababa;text-decoration: none; }
@media screen and (max-width : 982px ){.painterpos {position: absolute; top: 96%; left:63%; font-family: helvetica, sans-serif; font-size: 10px; color: #bababa;text-decoration: none; }
	}


.listpos {position: absolute; top: 110px; left: -12px; }



.aboutpos {position: absolute; top: 47px; left: 650px; }
@media screen and (max-width : 982px ){.aboutpos {position: absolute; top: 415px; left: 220px; }
	}

.mediapos {position: absolute; top: 82px; left: 650px; }
@media screen and (max-width : 982px ){.mediapos {position: absolute; top: 457px; left: 220px; }
	}

.bookpos {position: absolute; top: 117px; left: 650px; }
@media screen and (max-width : 982px ){.bookpos {position: absolute; top: 499px; left: 220px; }
	}

.contactpos {position: absolute; top: 152px; left: 650px; }
@media screen and (max-width : 982px ){.contactpos {position: absolute; top: 541px; left: 220px; }
	}

.ukrainepos {position: absolute; top: 187px; left: 650px; }
@media screen and (max-width : 982px ){.ukrainepos {position: absolute; top: 580px; left: 220px; }
	}

.ufopos {position: absolute; top: 330px; left: 650px; }
@media screen and (max-width : 982px ){.ufopos {position: absolute; top: 350px; left: 220px; }
	}





.image-container img {transition: transform 0.3s ease-in-out; }
.image-container img:hover {transform: scale(1.5);}
.image-container img:link {transform: scale(1.5);}
	
	
.tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black; }

.tooltip .tooltiptext {
  visibility: hidden; 
  font-family: helvetica, sans-serif;
  width: 200px; 
  background-color: rgba(0,0,0,0.6); 
  color: #fff; 
  text-align: center; 
  border-radius: 6px; 
  padding: 5px 0; 
  position: absolute; 
  z-index: 1; 
  bottom: 125%; 
  left: 50%; 	   
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
	

div.a,
div.b,
div.c {
  width: 50px;
  height: 50px;
  background-color: red;
  position: fixed;
}

div.b {
  background-color: green;
}

div.c {
  background-color: blue;
}

	
	
	
	
	
	
	
	
	
	
	
* {
  box-sizing: border-box;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}