#contact {
	width: 100%;
	height: 100vh;
	position: relative;
}

	#contact:after {
	  content: "";
	  display: table;
	  clear: both;
	}

		.cont-left {
			width: 50%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

	#map {
		z-index: 0;
		opacity: 0;
		transition: all 300ms ease-in-out;
		background-color: #ec297b;
	}

		#map:target {
			z-index: 2;
			opacity: 1;
		}

		#map-frame {
			width: 80%;
			height: 70%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border: 0;
			box-shadow: 2px 2px 7px #333;
		}

	#grl {
		z-index: 0;
		opacity: 0;
		transition: all 300ms ease-in-out;
		background-color: #ec297b;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: white;
	}

		#grl:target {
			z-index: 2;
			opacity: 1;
		}

		#grl h2 {
			text-transform: uppercase;
			font-size: 24px;
		}

		.inp-txt {
			width: 250px;
			padding: 8px;
			margin: 5px 0;
			border: none;
			font-size: 16px;
		}

			.inp-send {
				width: 266px;
				height: 40px;
				margin-top: 30px;
				background-color: #feee00;
				text-transform: uppercase;
				letter-spacing: 14px;
				cursor: pointer;
				border: none;
				transition: all 300ms ease-in-out;
			}

				.inp-send:hover {
					border: 2px solid #feee00;
					background: none;
					box-sizing: border-box;
					color: white;
					}

		.preg {
			display: block;
			width: 266px;
			text-align: center;
			margin-top: 10px;
			margin-bottom: 0;
			font-size: 18px;
		}

			.preg:after {
			  content: "";
			  display: table;
			  clear: both;
			}


		.resp {
			display: block;
			width: 133px;
			float: left;
			text-align: center;
			margin-top: -10px;
			margin-bottom: 10px;
			font-size: 18px;
		}

			#grl span input {
				cursor: pointer;
			}

	#spa {
		z-index: 1;
		opacity: 1;
		transition: all 300ms ease-in-out;
		background-color: #ec297b;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

		#spa:target {
			z-index: 2;
			opacity: 1;
		}

		#spa p {
			display: block;
			font-size: 16px;
			text-align: center;
		}

			#spa p:first-of-type {
				font-size: 20px;
			}

			#spa p:last-of-type {
				margin-bottom: 20px;
			}

		#data-cont {
			width: 80%;
			margin: 0 auto;
		}

			.spa-data {
				width: 300px;
				margin: 0 auto;
			}

				.spa-data:after {
				  content: "";
				  display: table;
				  clear: both;
				}

				.inp-txt2 {
					display: block;
					width: 250px;
					padding: 8px;
					margin: 10px auto;
					border: none;
					font-size: 16px;
				}

				.inp-other {
					width: 250px;
					padding: 8px;
					margin: 5px 0;
					border: none;
					font-size: 16px;
				}

				.preg2 {
					display: block;
					width: 300px;
					margin-top: 10px;
					margin-bottom: 0;
					font-size: 16px;
					text-align: center;
				}

				.resp2 {
					display: block;
					width: 150px;
					float: left;
					text-align: center;
					margin-top: -10px;
					margin-bottom: 10px;
					font-size: 16px;
				}

				.preg3 {
					display: block;
					margin-top: 20px;
					margin-bottom: 0;
					font-size: 18px;
					text-align: center;
				}

					.preg3 a {
						text-decoration: none;
						color: white;
						background-color: #ec297b;
						border: 2px solid white;
						padding: 8px 10px;
						transition: all 300ms ease-in-out;
					}

						.preg3 a:hover {
							color: #ec297b;
							background-color: white;
						}

				#spa span input {
					cursor: pointer;
				}

		#opt-cont {
			width: 90%;
			height: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #ec297b;
			transition: all 300ms ease-in-out;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			opacity: 0;
			z-index: -1;
			transition: all 300ms ease-in-out;
		}

			#opt-cont:target {
				z-index: 3;
				opacity: 1;
			}

			.option {
				font-size: 14px;
				width: 100%;
				border: 2px solid white;
				padding: 8px 10px;
				position: relative;
				background-color: #ec297b;
			}

				.option span {
					display: block;
					margin: 10px auto;
				}

				.option a {
					text-decoration: none;
					color: white;
					border: 2px solid white;
					padding: 8px 10px;
					position: absolute;
					bottom: 10px;
					right: 10px;
					transition: all 300ms ease-in-out;
				}

					.option a:hover {
						background-color: white;
						color: #ec297b;
					}

				.spa-send {
					width: 300px;
					height: 40px;
					display: block;
					margin: 40px auto 0;
					background-color: #feee00;
					text-transform: uppercase;
					letter-spacing: 14px;
					cursor: pointer;
					border: none;
					padding: 8px 0;
					transition: all 300ms ease-in-out;
				}

					.spa-send:hover {
						border: 2px solid #feee00;
						background: none;
						box-sizing: border-box;
						color: white;
					}

	#info {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
	}

		#info:after {
		  content: "";
		  display: table;
		  clear: both;
		}

		#hear-1 {
			width: 100%;
			height: 70%;
			background-image: url(../img/ct1.jpg);
			background-size: cover;
			background-position: center center;
		}

			#hear-1c {
				width: 100%;
				height: 100%;
				background-color: rgba(254, 238, 0, .4);
			}

				#hear-1c:after {
				  content: "";
				  display: table;
				  clear: both;
				}

				.top-right {
					width: 50%;
					height: 70%;
					float: left;
					text-shadow: 3px 3px 7px #333;
					color: white;
				}

					.top-right p {
						margin: 0;
					}

					.cont-loc-link {
						text-decoration: none;
						text-shadow: 3px 3px 7px #333;
						color: white;
					}

				#r-loc strong {
					display: block;
					margin-top: 60%;
				}

					#r-loc p:last-of-type {
						margin-left: 15px;
					}

					.top-right ul {
						margin-top: 0;
					}

						.top-right ul li {
							list-style: none;
						}

			#hear-1cont {
				width: 80%;
				height: 100%;
				margin: 0 auto;
			}

				#hear-1cont:after {
				  content: "";
				  display: table;
				  clear: both;
				}

				#r-con {
					width: 100%;
					height: 30%;
					float: left;
				}

					#r-tim p {
						margin-left: 15px;
					}

					#r-tim strong {
						display: block;
						margin-top: 60%;
						margin-left: 0;
					}

					.r-con1 {
						width: 25%;
						height: 50%;
						text-align: center;
						float: left;
						text-shadow: 3px 3px 7px #333;
					}

						.r-con1:last-of-type {
							width: 100%;
						}

					#r-con a {
						color: white;
						text-decoration: none;
					}

						#r-con a img {
							width: 30px;
							vertical-align: middle;
							margin-right: 10px;
						    filter: drop-shadow(3px 3px 7px #333);
						}

		#map-1 {
			background-image: url(../img/cb1.jpg);
		}

			#map-11 {
				background-color: rgba(132, 195, 65, .4);
			}

		#cont-1 {
			background-image: url(../img/cb2.jpg);
		}

			#cont-11 {
				background-color: rgba(246, 146, 30, .4);
			}

		#spa-1 {
			background-image: url(../img/cb3.jpg);
		}

			#spa-11 {
				background-color: rgba(17, 149, 190, .4);
			}

			.bot-small {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

		.bot-right {
			width: 33.33%;
			height: 30%;
			text-transform: uppercase;
			text-shadow: 3px 3px 7px #333;
			text-align: center;
			background-size: cover;
			background-position: center center;
		}

			.bot-right a {
				color: white;
				text-decoration: none;
			}

		.cont-right {
			float: left;
		}


/* 481 - 768 */

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

	#contact {
		height: auto;
	}

		#info {
			width: 100%;
			height: 400px;
			position: relative;
		}

							#r-loc strong,
							#r-tim strong {
								margin-top: 100px;
							}

			#hear-1 {
				height: 85%;
			}

			.bot-right {
				height: 15%;
			}

		#disp {
			width: 100%;
			height: 600px;
			position: relative;
		}

			.cont-left {
				width: 100%;
			}

}



/* 320 - 480 */

@media screen and (min-width: 320px) and (max-width: 480px) {

	#contact {
		height: auto;
	}

		#info {
			width: 100%;
			height: 400px;
			position: relative;
			font-size: smaller;
		}

								#r-con a img {
									width: 20px;
								}

			#data-cont {
				width: 100%;
				margin: 0 auto;
			}

							#r-loc strong,
							#r-tim strong {
								margin-top: 80px;
							}

			#hear-1 {
				height: 85%;
			}

					#hear-1cont {
						width: 100%;
					}

			.bot-right {
				height: 15%;
			}

			.top-right {
				padding-left: 5px;
				box-sizing: border-box;
			}

		#disp {
			width: 100%;
			height: 600px;
			position: relative;
		}

			.cont-left {
				width: 100%;
			}

				.preg3 {
					font-size: 16px;
				}

}


/* =< 319 */

@media screen and (max-width: 319px) {

	#contact {
		height: auto;
	}

		#info {
			width: 100%;
			height: 400px;
			position: relative;
			font-size: smaller;
		}

								#r-con a img {
									width: 20px;
								}
			#data-cont {
				width: 100%;
				margin: 0 auto;
			}

							#r-loc strong,
							#r-tim strong {
								margin-top: 80px;
							}

			#hear-1 {
				height: 85%;
			}

					#hear-1cont {
						width: 100%;
					}

			.bot-right {
				height: 15%;
			}

			.top-right {
				padding-left: 5px;
				box-sizing: border-box;
			}

		#disp {
			width: 100%;
			height: 600px;
			position: relative;
		}

			.cont-left {
				width: 100%;
			}

				.preg3 {
					font-size: 16px;
				}

}