@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,300,700,700italic,500&subset=latin,cyrillic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300,400italic,500,700,700italic&subset=latin,cyrillic);
@import url(font-awesome.css);

body {font: 35px Roboto, 'PT Sans', Arial, Helvetica, sans-serif;}
button {font: 35px Roboto, 'PT Sans', Arial, Helvetica, sans-serif;}

#table {
    font: 35px Roboto, 'PT Sans', Arial, Helvetica, sans-serif;
	border: 2px solid #979797;
	border-collapse: collapse;
	width: 100%;
}
#table th {
	font-weight: bold;
	padding: 10px;
	/*background: #efefef;*/
	border: 2px solid #979797;
	/*text-align: center;*/
	vertical-align: middle;
}
#table td {
	border: 2px solid #979797;
	padding: 10px;
	/*text-align: center;*/
	vertical-align: middle;
}

/* Нечетные строки */
#table tbody tr:nth-child(odd){
	background: #fff;
}

/* Четные строки */
#table tbody tr:nth-child(even){
	background: #ffeaea;
}

#num {
    width: 12;
    font-size:28px;
    background: #efefef;
    display:none;
}
#word_v1 {
    font-weight:bold;
    font-size:28px;
    background: #c5eafc;
}
#word_v2 {
    font-weight:bold;
    font-size:28px;
    background: #f7d5e3;
}
#word_v3 {
    font-weight:bold;
    font-size:28px;
    background: #d0eabf;
}
#transcript_v1 {
    font-size:28px;
	display:none;
}
#transcript_v2 {
    font-size:28px;
	display:none;
}
#transcript_v3 {
    font-size:28px;
	display:none;
}
#audio_v1 {
    /*background: #fdecba;*/
    background: #c5eafc;
}
#audio_v2 {
    background: #f7d5e3;
}
#audio_v3 {
    background: #d0eabf;
}
#translation {
    font-size:28px;
    background: #efefef;
}



/*---------------------*/

.slova {
width: 100%;
margin: 50px auto;
}

.slova h3 {
text-align: center;
font-family: "Roboto", sans-serif;
font-weight: bold;
}

.klundesaga-item {
background-color: #0099CC;
margin-bottom: 20px;
border-radius: 3px;
color: #ffffff;
}

.klundesaga-item .klundesaga-title {
cursor: pointer;
padding: 20px;
transition: transform 0.4s ease-in-out;
}

.klundesaga-item .klundesaga-title.active-title {
background-color: #003366;
color: #ffffff;
border-radius: 3px;
}

.klundesaga-item .klundesaga-title h3 {
font-weight: 700;
margin: 0;
font-size: 18px;
display: flex;
justify-content: space-between;
font-weight: bold;
}

.klundesaga-item .klundesaga-title i.fa-chevron-down {
transform: rotate(0);
transition: 0.4s;
}

.klundesaga-item .klundesaga-title i.fa-chevron-down.chevron-top {
transform: rotate(-180deg);
color: #fa5019;
}

.klundesaga-item .klundesaga-content {
display: none;
line-height: 1.7;
padding: 20px;
background-color: #ffffff;
border-radius: 0 0 3px 3px;
color: #100e34;
}

.klundesaga-item .klundesaga-content.active {
display: block;
}

.klundesaga-item .klundesaga-content p {
margin: 0;
font-family: "Nunito Sans", sans-serif;
font-size: 16px;
}

.sadelpos {
background: #dce1f2;
}

.sadelpos .detailed_info {
margin: 50px auto;
}

.sadelpos img {
margin: 0 auto;
display: block;
/* margin-top: 120px; */
}

.sadelpos h3 {
font-family: "Poppins", sans-serif;
font-weight: bold;
font-size: 20px;
}

.sadelpos p {
font-family: "Nunito Sans", sans-serif;
font-size: 16px;
line-height: 1.5em;
}

.sadelpos ul li {
font-family: "Nunito Sans", sans-serif;
font-size: 16px;
line-height: 1.7em;
}

/*------------sound------------*/
.sound {
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
  height: 34px;
  width: 34px;
  
  
  background-image: url(../images/btnsound.png);
  background-repeat: no-repeat;
  background-position: left top !important;
  background-size: 100%;
  width: 48px;
  height: 48px;
}

.sound:hover {
  background-image: url(../images/btnsound.png);
  background-repeat: no-repeat;
  background-position: left bottom !important;
}

/* ------------------------- */
.popup-fade {
	display: none;
}
.popup-fade:before {
	content: '';
	background: #000;
	position: fixed; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	opacity: 0.7;
	z-index: 9999;
}
.popup {
	position: fixed;
	font-weight:normal;
    font-size:24px;
	top: 20%;
	left: 50%;
	padding: 20px;
	width: 460px;
	margin-left: -250px;	
	background: #fff;
	border: 1px solid black;
	border-radius: 4px; 
	z-index: 99999;
	opacity: 1;	
}
.popup i {
    font-size:20px;
    color: grey;
}
.popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
}