@charset "utf-8";

body {
	font-family:Arial;
	font-size:16px;
}

html, body{
  scroll-behavior: smooth;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

a{
	color:#50AF50;
	text-decoration:none;
}



@media print { 
		.hide_on_print{display:none;}
		body {
			font-size:14px;
		}
 }


body.touched  [title]:not([title=""]):hover::before {
	content: attr(title);
	position: absolute;
	/*white-space: nowrap;
	bottom: -26px;*/
	white-space:pre;
	top:120%;
	left:0%;
	display: inline-block;
	padding: 3px 6px;
	border-radius: 2px;
	background: #333;
	color: #fff;
	font-size: 12px;
	font-family: sans-serif;		  
	z-index: 1;
	text-align:left;
	line-height:normal;
}
body.touched  [title]:not([title=""]):hover::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 8px;
	display: inline-block;
	color: #fff;
	border: 8px solid transparent;	
	border-bottom: 8px solid #333;
}
body.touched [title]:not([title=""]) {
	position: relative;
	border-bottom:1px dotted rgba(0,0,0,0.2);
}






.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
}

.topnav select.lang_select {
	margin: 8px 16px 4px 16px;
	padding: 5px;
	background-color:#333;
	color:#f2f2f2;
	border:1px solid #50AF50;
}

.active {
  background-color: #50AF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  display:inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;  
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 12px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-bottom: 1px dotted #CCCCCC;
}

.dropdown_clicked,
.topnav a:hover, 
.topnav a:focus,
.dropdown:hover .dropbtn,
.dropdown:focus .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover, 
.dropdown-content a:focus {
  background-color: #ddd;
  color: black;
}

.dropdown_clicked .dropdown-content,
.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content {
  display: block; 
  
  animation: fade 0.3s ease-out;
  -webkit-animation: fade 0.3s ease-out;;
  -moz-animation: fade 0.3s ease-out;;
}

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

  
  .topnav a:first-child{
      width:40%;/*END to Center*/
  }
  .dropdown-content a:first-child{
      width:100%;/*END to Center*/
  }

  .topnav a:not(:first-child), .dropdown .dropbtn, .topnav select.lang_select { /*nth-child(2)*/
    display: none;
  }
  .topnav a.icon {
    /*float: right;/*END/START to Right*/
    display: block;
	
	padding: 8px 10px;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    top: 0;
	left: 40%;/*END to Center*/
	/*right: 0; /*END/START to Right*/
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  .topnav.responsive select.lang_select {
    display: block;
	
	width: 90%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
  }
}



.fa{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 
	display:inline-block; 
	font-size:85%;
	font-style: normal;
	color:#50AF50
}
.fa-caret-down:before {
  content: "➤"; /*➤*/
}



@keyframes fade {
	0% { opacity: 0; pointer-events: none;}
	100% { opacity: 1; pointer-events: auto;}
}
@-webkit-keyframes fade {
	0% { opacity: 0; pointer-events: none;}
	100% { opacity: 1; pointer-events: auto;}
}
@-moz-keyframes fade {
	0% { opacity: 0; pointer-events: none;}
	100% { opacity: 1; pointer-events: auto;}
}
@-o-keyframes fade {
	0% { opacity: 0; pointer-events: none;}
	100% { opacity: 1; pointer-events: auto;}
}

.nav_right{
	float:right;
	height:45px;
	display:table;
}
.nav_right .nav_align{
	display:table-cell;
	vertical-align: middle;
}
.nav_right .nav_align a{
	/*reset*/
	padding:0;
	display:block;
	float:left;
	
	font-size:28px;
	padding:8px 10px;
}
.nav_right .nav_align span{
	/*reset*/
	padding:0;
	display:block;
	float:left;
	
	font-size:80%;
	padding:14px 5px;
	color:#50AF50;
}
.nav_right .nav_align span.name_small{
		display:none;
}

@media screen and (max-width: 600px) {
	.nav_right{
		position:absolute;
		top:0;
		right:0;
	}
	.nav_right .nav_align span.name_big{
		display:none;
	}
	.nav_right .nav_align span.name_small{
		display:block;
	}
}








.page_name{
	position:fixed; 
	bottom:0px; 
	left:0;
	background-color:rgba(255,255,255, 1);
	padding:5px;
	border: 1px solid #50AF50;
}







.pagination{
	text-align:center;
	width:100%;
	margin-top:20px;
}
.pagination ul{
    padding: 0;
    margin: 0;
}
.pagination li{
    list-style: none;
    display: inline-block;
}
.pagination a{
    background-color: #333;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    display: block;
    text-align: center;
	text-decoration:none;
}


.pagination li.selected a {
  border: 1px solid #308F30;
  background-color: #50AF50;
}
.pagination li a:hover {
  border: 1px solid #333;
  background-color: #555;
}
.pagination li a:focus {
  border: 1px solid #308F30;
  background-color: #50AF50;
}


.pagination li.disabled {
  background-color: #999999;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.pagination li.dots{
	width:40px;
	margin:auto;
	font-size:20px;
	
}
@media screen and (max-width: 768px){
	.pagination a{
		padding: 9px 18px;
	}
}
@media screen and (max-width: 568px){
	.pagination li.dots{
		display:block;
	}
}






.vol1{
	width:100%;
	margin-bottom:10px;
}
.vol2{
	width:50%;
	margin-bottom:10px;
}
.vol3{
	width:33.33%;
	margin-bottom:10px;
}
.vol4{
	width:25%;
	margin-bottom:10px;
}
.vol5{
	width:20%;
	margin-bottom:10px;
}
.vol6{
	width:16.66%;
	margin-bottom:10px;
}
.vol7{
	width:14.28%;
	margin-bottom:10px;
}
.vol8{
	width:12.5%;
	margin-bottom:10px;
}
.vol9{
	width:11.11%;
	margin-bottom:10px;
}
.vol10{
	width:10%;
	margin-bottom:10px;
}
.vol11{
	width:9%;
	margin-bottom:10px;
}
.vol12{
	width:8%;
	margin-bottom:10px;
}

.search_form{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 15px;
}
.search_form form{
	width: 100%;
	text-align:center;
}
.search_form div{
	/*float:left;*/
	display:inline-block;
	text-align:left;
	/*
	padding-right: 5px;
    padding-left: 5px;
	*/
}
.search_form:after{
	clear:both;
	display: table;
    content: " ";
}


.search {
    display: block;
    width: 100%;
    background: #fff;
    background-image: none;
    border: 1px solid #b2b2b2;
    border-radius: 4px;
    height: 30px;
    padding: 0 8px;
}
.search_select {
    overflow: hidden;
    text-indent: .01px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 33px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2233%22%20height%3D%2234%22%20version%3D%221.1%22%20viewBox%3D%220%200%2033%2034%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m12%2015h10l-5%205z%22%20fill%3D%22%23333%22%2F%3E%3Cpath%20d%3D%22m1%202h-1v30h1z%22%20fill%3D%22%23b2b2b2%22%2F%3E%3C%2Fsvg%3E"),-webkit-linear-gradient(top,#f7f7f7,#ededed);
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2233%22%20height%3D%2234%22%20version%3D%221.1%22%20viewBox%3D%220%200%2033%2034%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m12%2015h10l-5%205z%22%20fill%3D%22%23333%22%2F%3E%3Cpath%20d%3D%22m1%202h-1v30h1z%22%20fill%3D%22%23b2b2b2%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(180deg,#f7f7f7 0,#ededed);
    background-repeat: no-repeat;
    background-position: right 0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff7f7f7",endColorstr="#ffededed",GradientType=0);
}



@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/*IE after 9 */
	 .search_select {
		 background-image:linear-gradient(180deg,#f7f7f7 0,#ededed);
		 padding-right: 0px;
	 }
}
.search_input {
    overflow: hidden;
    text-indent: .01px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	
    background-image: -webkit-linear-gradient(top,#f7f7f7,#ededed);
    background-image: linear-gradient(180deg,#f7f7f7 0,#ededed);
    background-repeat: no-repeat;
    background-position: right 0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff7f7f7",endColorstr="#ffededed",GradientType=0);
}

@media screen and (max-width: 768px){
	.search_form div {
		width: 100%;
	}
}

/*
<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
*/
/* The container */
.container {
  display: inline-block;
  position: relative;
  padding-left: 22px;
  margin-top: 4px;
  margin-bottom: 4px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
@media print { 
	.container input {
	  position:inherit;
	  opacity:1;
	  height:auto;
	  width:auto;
	}
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #50AF50;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (min-width: 768px){
	.ch_people .container{
		width:48%;
	}
}




.table_content{
	overflow-x:auto;
	clear:both;
}
.table_content table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
.table_content tr:nth-of-type(odd) { 
  background: #eee; 
}
.table_content tr:nth-of-type(even) { 
  background: #ffffff; 
}
.table_content th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
.table_content td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
  
  white-space: nowrap;
}





a.button {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  background-color: #50AF50;
}
a.button:hover {
  background-color: #555;
}


.error{
	color:#FF0000;
	font-size:80%;
}



.ben_vol1{
	width:100%;
}
.ben_vol2{
	width:49.5%;
	padding: 0 20px;
}
.ben_vol3{
	width:32.5%;
	padding: 0 20px;
}
.ben_vol_top{
	border-top: 1px solid #333;
	text-align:center !important;
}

.ben_vol_group{
	margin-top:10px;
	padding:10px;
	border: 1px solid #333;
}


.give_vol1_2{
	width:66%;
}












.fade_in {
	visibility:visible;
	opacity: 1;
	transition: opacity 500ms;
}
.fade_out {
	visibility:hidden;
	opacity: 0;
	transition: all 1000ms;
}






.suggestions {
background-color:#FFF;
border-bottom-left-radius:10;
border-bottom-right-radius:10;
box-shadow:0 5px 10px rgba(50,50,50,0.598);
margin-top:2px;
position:absolute;
z-index:1;
}
.suggestions > ul {
color:#2B2B2B;
font-size:14px;
list-style:none outside none;
margin:0;
padding:5px 0;
}
.suggestions > ul > li {
height:20px;
line-height:20px;
margin-top:1px;
padding:0 10px;
color:#404040;
	white-space: nowrap;
	cursor:pointer;
}
.suggestions > ul > li:hover {
background-color:#eee;
}






.tmb { text-decoration: none }
.tmb span{ 
		visibility: hidden;
		display:none;
}
.tmb img{ 
		/*border: 1px dotted #50AF50;*/
		/*cursor:default;*/
		/*width:20px;*/
		height:20px;
		padding:1px;
		margin:-6px 0px;
}
.tmb span img{
		border: 0px;
		width:150px;
		height:auto;

		margin-left:-170px;
		margin-top:-120px;
		position: absolute;
		
		z-index:1;
				
		background-color: rgba(255,255,255,0.8);
}
.tmb:hover span{
		visibility: visible;
		display:inherit;
}