﻿/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 80px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content */
.modal-content {
  background-color:#fff;
  opacity:1;
  margin: auto;
  padding: 30px;
  width: 100%;
  text-align:center;
  border-top:3px solid #00bfb2;
}

.modal-content ul li{
  display:inline;
  color:#fff;
  padding:10% 3%;
}

.modal-content ul {
   text-align:center;
}


.modal-content a:link   {color:#505759; font-size:90%;}
.modal-content a:visited{color:#505759; font-size:90%;}
.modal-content a:hover, a:active {color:#00bfb2; font-size:90%; /*text-decoration:underline*/}

.language-button{
	background:transparent;
	border:none;   
	text-decoration: none;
	cursor: pointer;
	color:#00bfb2 ;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    border: 1.5px solid #00bfb2;
    border-radius:20px;
    padding: 5px 10px;
    font-family:'Roboto','Noto Sans TC', 'Noto Sans SC',sans-serif;
}

.language-button-mobile{
	background:none;
	border:none;   
	text-decoration: none;
	cursor: pointer;
	color:#fff ;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    padding: 3px 3px;
    font-family:'Roboto','Noto Sans TC', 'Noto Sans SC',sans-serif;
}

.language-button:hover {
	background:#00bfb2;
	color:#fff ;
}

.language-button:focus {outline:0;}
	
#BigDiv3-modal{
	height:60px; margin-top:40px; margin-left:5%; width:100%; text-align:center;
}

#BigDiv3-modal div{
	text-align:left;width:20%;
}
	
	
@media screen and (max-width: 768px){


.modal-content p{
	text-align:center;
	margin-right:80px;
}

.modal-content{
	position:absolute;
	top:80px;
	
}

#BigDiv3-modal{
	height:60px; 
	margin-top:40px; 
	width:100%; 
	text-align:left;
}



#BigDiv3-modal div{
	text-align:center;
	width:25%;

}
	


}

