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 {
	display: none;
	height: 90vh;
	left: 50%;
	position: fixed;
	top: 50%;
	transform: translate(-50%,-50%);
	overflow-y: auto;
	width: 527px;
	z-index: 99;
}
    
.popup-close {
	cursor: pointer;
	display: none;
	position: absolute;
	right: 30px;
	top: 30px;
	z-index: 2;
	width:25px;
}
.popup-close img { width:100%; display:block;}

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

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

/*Smartphone css*/
@media screen and (max-width: 480px) {
.popup-content-container { width:80%; z-index:999;}
.popup-close { top:46px; right:10px; width:18px;}
.popup-overlay { z-index:999;}
}

@media screen and (min-width:481px) and (max-width:600px) {
.popup-content-container { width:80%; z-index:999;}
.popup-close { top:46px; right:10px; width:18px;}
.popup-overlay { z-index:999;}
}

@media screen and (min-width:601px) and (max-width:767px) {
.popup-content-container { width:80%; z-index:999;}
.popup-close { top:65px; right:18px; width:18px;}
.popup-overlay { z-index:999;}
}

@media screen and (min-width:768px) and (max-width:900px) {
}

@media screen and (min-width:901px) and (max-width:1024px) {
}

@media screen and (min-width:1025px) and (max-width:1240px) {
}

@media screen and (min-width:1241px) and (max-width:1350px) {
}