@charset "UTF-8";
/* CSS Document */

#overlay {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(85,110,252,0.5);
  z-index: 2000;
  cursor: default;
}

#overlay .img-fluid {
	max-width:50%;
}

#text{
  position: absolute;
  padding:40px;
  background:#fff;
  text-align:center;
  top: 50%;
  left: 50%;
  font-size: 1.1rem;
  color:#000; 
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
   overflow:auto;
  max-height:100%;
}

#text .fa-times-circle {
	position:absolute; 
	top:10px;
	right:10px;
	font-size:1.5rem;	
	cursor:pointer;
}
	
#text h2 {
  font-size: 1.5rem;
  padding-bottom: 1rem;
}

#text h5 {
  font-size: 1.2rem;
}

#text p em {
  font-size:0.8rem;
}

#text .note {
	font-size:0.9rem;
	font-weight:500;
}


#text .btn-intro {
	background:#adc745; 
	color:#fff;
	font-size:1rem;
	padding:0.5rem 1rem;
	margin:0.5rem;
	border-radius:20px;
	display:inline-block;
	width:155px;
	border:3px solid #fff;
}
#text .btn-intro:hover {
	background:#fff; 
	color:#1f651b;
	border:3px solid #adc745;
}

@media (max-width: 767px) {

#overlay {
  overflow:scroll;
}

#overlay .img-fluid {
	max-width:35%;
}

#overlay #text h2 {
	font-size:1.15rem;
	padding-top:1rem;
	font-weight:500;
}

#overlay #text h4 {
	font-size:1.15rem;
}

#overlay h5 {
	font-size:1rem;
}
#text {
  padding:10px 10px 30px 10px;
  top: 15%;
  left: 0%;
  font-size: 1rem;
  transform: translate(0%,-0%);
  -ms-transform: translate(0%,-0%);
    width:100%;
}

#overlay p em {
	font-size:90%;
}
}