/*!
 * Age verification CSS to go with the JS that can be found at (https://github.com/Herudea/age-verification)
 */

 #modal_screen {
 	position: fixed;
 	top:0;
 	left: 0;
 	height: 100%;
 	width: 100%;
 	z-index: 999999;
 	background-color: rgba(0,0,0,.8);
 }

 #modal_screen.nope {
 	background-color: rgba(0,0,0,.8); 
 }

 #modal_content {
 	position: fixed;
 	z-index: 9999999;
 	margin: 0 auto;
 	background-color:#fff;
 	font-size: 12px;
 	width:95%; /* if you adjust it from the original 100%, adjust the difference in the width of #modal_content ul too */
 	height: auto; /* if you adjust it from the original 100%, adjust the difference in the width of #modal_content ul too */
 	padding: 20px 15px;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	-ms-box-sizing: border-box;
 	-o-box-sizing: border-box;
 	box-sizing: border-box;

 	background-position: center 2em;
 	background-repeat: no-repeat;
 	background-size: 90px auto;
 }

 #modal_content .content_wrapper {
 	text-align: center;
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
 	align-items: center;
 	width: 100%;
 }

 #modal_content p {
 	max-width: 75%;
 	margin: 1.2em auto 0;
 	font-size: 15px;
 	line-height: 20px;
 }

 #modal_content p small{font-size: 13px; line-height: 12px;}

 #modal_content h4{font-weight: bold; text-transform: uppercase; letter-spacing: 2px;}

 #modal_content .content_wrapper img{max-width: 160px; margin: 10px auto;}

 #modal_content ul a.av_btn {
 	padding:1em 2.5em;
 	font-size: 16px;margin: 10px;
 	text-align: center;
 	text-align:center;
 	color: #fff;
 	width: auto;
 	margin:10px auto;
 	display: flex;
 	justify-content: center;
 	text-decoration: none;
 	text-transform: uppercase;
 }

 #modal_content ul{font-size: 16px; list-style: none; display: flex; width: 90%; justify-content: center; margin-top: 10px;}

 #modal_content ul:after {
 	content: "";
 	display: block;
 	clear: both;
 }

 #modal_content ul small {
 	display: block;
 	text-align: center;
 	color: #888;
 	margin: 1em 0 0;
 }

 #modal_content ul .av_go {
 	background-color: #DAA520;
 }

 #modal_content ul .av_no {
 	background-color: #938d95;
 }

 #modal_content ul .av_btn:hover {
 	background-color: #1e0924;
 }

 @media (max-width: 767px) {
 	#modal_content p {
 		max-width: 100%;
 		margin: 1em auto 0;
 		font-size: 14px;
 		line-height: 18px;
 	}

 	#modal_content p small{font-size: 12px; line-height: 14px;}
 }

 @media (min-width: 688px) {
 	#modal_content {
 		display: flex;
 		align-items: center;
 		flex-wrap: wrap;
 		top: 10em;
 		top: 30vh;
 		left: 30vw;
 		width: 90%;
 		max-width: 500px;
 		height:500px;
 		padding:1em;
 		background-position: center 1em;
 		background-size: 160px auto;
 		font-size: 16px;
 	}

 	#modal_content .content_wrapper {
 		margin:0 auto;
 		text-align: center;
 	}
 }