@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

body {
	background: black;
}

#map {
	position: absolute;
	z-index: -2;
}

div.cutout {
	pointer-events: none;
}

div.cutout.outer {
	/* Change 160px for the size of the outer circle (after which it is fully non-transparent, 1 for 100% opacity) */
	background: -moz-radial-gradient(transparent 230px, rgba(0,0,0,1) 15px);
	background: -webkit-radial-gradient(transparent 230px, rgba(0,0,0,1) 15px);
	background: -moz-radial-gradient(transparent 230px, rgba(0,0,0,1) 15px);
	background: -o-radial-gradient(transparent 230px, rgba(0,0,0,1) 15px);
}

div.cutout.middle {
	/* Change 160px for the size of the middle layer (0.7 means 70%) */
	background: -moz-radial-gradient(transparent 200px, rgba(0,0,0,0.7) 15px);
	background: -webkit-radial-gradient(transparent 200px, rgba(0,0,0,0.7) 15px);
	background: -moz-radial-gradient(transparent 200px, rgba(0,0,0,0.7) 15px);
	background: -o-radial-gradient(transparent 200px, rgba(0,0,0,0.7) 15px);
}

div.cutout.inner {
	/* Change 160px for the size of the innermost overlay (0.4 means 40%) */
	background: -moz-radial-gradient(transparent 170px, rgba(0,0,0,0.4) 15px);
	background: -webkit-radial-gradient(transparent 170px, rgba(0,0,0,0.4) 15px);
	background: -moz-radial-gradient(transparent 170px, rgba(0,0,0,0.4) 15px);
	background: -o-radial-gradient(transparent 170px, rgba(0,0,0,0.4) 15px);
}

/* Sets both the map and the circular divs to be centered square, in portrait mode */
@media screen and (orientation: portrait) {
	div#map {
		width: 100vw;
		height: 100vw;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);

	}

	div.cutout {
		width: 100vw;
		height: 100vw;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
}

/* Sets both the map and the circular divs to be centered square, in landscape mode */
@media screen and (orientation: landscape) {
	div#map {
		width: 100vh;
		height: 100vh;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	div.cutout {
		width: 100vh;
		height: 100vh;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}

html,
body {
	overflow: hidden;
	height: 100%;
	margin: 0;
	padding: 0;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

#JotaCode {
	color: #D8D800;
	text-align: center;
	font-size: 14px;
	position: absolute;
	width: 90%;
	padding: 10px 18px;
	background-color: #1F2C4B;
	margin: 40px 0 auto;
	border: 1px solid #D8D800;
	border-radius: 30px;
	z-index: 1
}

#myBtn {
	position: absolute;
	margin: 70px 0 auto;
	left: 48%;
}

.balk {
	position: absolute;
}


/* The Modal (background) */

.modal {
	display: none;
	/* Hidden by default */
	position: relative;
	/* Stay in place */
	z-index: 2;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	/* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	/* Could be more or less, depending on screen size */
}


/* The Close Button */

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.overlay {
	width: 100%;
	height: 100%;
	background: black;
}

.gmnoprint {
    display: none;
}

#map div.gm-style div a div img {
    display: none;
}

.fox-info .fox-title {
	font-weight: bold;
}