html {
	box-sizing: border-box; 
	font-size: 62.5%;
}
    
*, *:before, *:after {box-sizing: inherit;}

body {
  color: #fff;
  margin: 0;
  font-size: 1.6rem;
  font-family: helvetica;
}

.popup-btns-wrapper {
	margin-bottom: -20px;
	margin-left: 20px;
	margin-top: 20px;
}

.popup-btn {
	padding-bottom: 2rem;
	width: 20rem;
}

.popup-btn span {
	background: tomato;
	color: white;
	cursor: pointer;
	display: block;
	line-height: 1;
	padding: 1rem 2rem;
	text-align: center;
}

.popup-content-container {
	background-color: white;
	color: #333;
	display: none;
	height: 83vh;
	left: 50%;
	padding:69px 75px;
	position: fixed;
	top: 50%;
	transform: translate(-50%,-50%);
	overflow-y: auto;
	width: 818px;
	z-index: 9999999;
	border-radius:24px;
}
    
.popup-close {
	cursor: pointer;
	display: none;
	position: absolute;
	right: 2rem;
	top: 75px;
	z-index: 2;
}

.popup-close:hover { opacity: 0.7; }

.popup-overlay {
	background: rgba(0,0,0,0.85);
	display: none;
	height: 100%;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999999;
}







.popup-content-container .popup-content {

    float: left;
    width: 100%;
}











/*Smartphone css*/
@media screen and (max-width: 480px) {
.popup-content-container h3 { font-size:17px;}
.popup-content-container p { font-size:14px;}
.popup-content-container { width:90%; padding:35px 25px; top:154px; transform:translateX(-50%);}
.popup-close {top: 10px;right: 10px;}
} 

@media screen and (min-width:481px) and (max-width:600px) {
.popup-content-container h3 { font-size:17px;}
.popup-content-container p { font-size:14px;}
.popup-content-container { width:90%; padding:35px 25px; top:154px; transform:translateX(-50%);}
.popup-close {top: 10px;right: 10px;}
}

@media screen and (min-width:601px) and (max-width:767px) {
.popup-content-container h3 { font-size:17px;}
.popup-content-container p { font-size:14px;}
.popup-content-container { width:90%; padding:35px 25px; top:154px; transform:translateX(-50%);}
.popup-close {top: 10px;right: 10px;}
}

@media screen and (min-width:768px) and (max-width:900px) {
.popup-content-container h3 { font-size:17px;}
.popup-content-container p { font-size:14px;}
.popup-content-container { width:90%; padding:35px 30px; height:72vh;}
.popup-close {top: 10px;right: 10px;}

}

@media screen and (min-width:901px) and (max-width:1024px) {
.popup-content-container h3 { font-size:19px;}
.popup-content-container p { font-size:15px;}
.popup-content-container { width:90%; padding:35px 30px; height:73vh;}
.popup-close {top: 10px;right: 10px;}


}

@media screen and (min-width:1025px) and (max-width:1240px) {
.popup-content-container p { font-size:15px;}
.popup-content-container { width:85%; padding:35px 30px;}
}

@media screen and (min-width:1241px) and (max-width:1340px) {
.popup-content-container p { font-size:15px;}
.popup-content-container { width:81%; padding:45px 40px;}
}





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

.popup-overlay {
    z-index: 9999;
}

.popup-content-container {
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

}