/*!
 * 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: 9999999;

 	background-color: rgba(0,0,0,.95);
 }

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

 #modal_content {
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%,-50%);
 	position: fixed;
 	z-index: 99999999;
 	margin: 0 auto;
 	background-color:#fff;
 	color: #000 !important;
 	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;
 }

 #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; margin-left: 0px; padding-left: 0px;}

 #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;
 		width: 90%;
 		max-width: 500px;
 		padding: 30px 10px;
 		font-size: 16px;
 	}

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