$blue: #3363b1;
$darkblue: #015392;
$orange: #f39314;
$darkorange: #df8f26;

.map
{
	position: relative;
	&-h2
	{
		position: absolute;
		top: 0;
		right: 0; 
		left: 0;
		text-align: center; 
		font-family: QanelasSoft-Bold;
		text-align: center;
		color: #fff;
		font-size: 30px;
		margin-bottom: 52px;
		text-transform: uppercase;
		background: #000;
		padding: 20px 8px;
		max-width: 450px;
		margin: auto; 
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
		-webkit-box-shadow: 0px 4px 16px 1px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 4px 16px 1px rgba(0,0,0,0.75);
		box-shadow: 0px 4px 16px 1px rgba(0,0,0,0.75);
	}
	&-locker, &-lock
	{
		display: none;
	} 
}
@media screen and (max-width: 576px)
{
	.map
	{
		iframe 
		{ 
			max-height: 320px;
		}
		&-locker
		{
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			height: 100vh;
			max-height: 320px;
			align-items: center;
			justify-content: center;
			position: absolute;
			color: #fff;
			background: rgba(0,0,0,0.3);
			opacity: 0;
			transition: all 0.3s ease;
			h2 
			{
				font-family: OpenSansRegular;
				text-align: center;
			}
			&:hover
			{
				opacity: 1;
				transition: all 0.3s ease;
			}
		}
		&-lock
		{
			position: absolute;
			bottom: 25px;
			color: #666;
			left: 15px;
			padding: 10px 12px;
			background: rgba(0,0,0,0.7);
		}
	}
}
@media screen and (max-height: 576px)
{
	.map
	{
		iframe 
		{ 
			max-height: 240px;
		}
		&-locker
		{
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			height: 100vh;
			width: 100%;
			max-height: 240px;
			align-items: center;
			justify-content: center;
			position: absolute;
			color: #fff;
			background: rgba(0,0,0,0.3);
			opacity: 0;
			transition: all 0.3s ease;
			h2 
			{
				font-family: OpenSansRegular;
				text-align: center;
			}
			&:hover
			{
				opacity: 1;
				transition: all 0.3s ease;
			}
		}
		&-lock
		{
			position: absolute;
			bottom: 25px;
			color: #666;
			left: 15px;
			padding: 10px 12px;
			background: rgba(0,0,0,0.7);
		}
	}
}