body {
	height: 100%;
	margin: 0px;
	font-family: 'Montserrat', sans-serif;
	overflow-x: hidden;
}

#name {
	position: absolute;
	width: 100%;
	font-size: 65px;
	font-weight: 700;
	color: white;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

nav {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 80px;
	padding: 0px;
	color: white;
	font-size: 0px;
}

nav span.logo {
	display: inline-block;
	height: 100%;
	line-height: 80px;
	margin: 0px;
	margin-left: 20px;
	font-size: 40px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

nav a {
	margin: 0px;
	margin-right: 40px;
	line-height: 80px;
	float: right;
	font-size: 18px;
	color: white;
	text-decoration: none;
}

nav a span i {
	color: white;
}

nav a:hover {
	color: #107692;
}

#main-section:before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	margin: 0px;
	background-color: rgba(0,0,0,.6);
}

#main-section {
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	height: 100vh;
	background-color: #0d002a;	
	background-image: url('images/space.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	display:flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.floating-symbols:nth-of-type(1){
	left: 40%;
	top: 50%;
	-webkit-animation: floatONE 200s linear infinite;
	-moz-animation: floatONE 200s linear infinite;
	-o-animation: floatONE 200s linear infinite;
	animation: floatONE 200s linear infinite;
}

.floating-symbols:nth-of-type(2){
	left: 45%;
	top: 30%;
	-webkit-animation: floatTWO 200s linear infinite;
	-moz-animation: floatTWO 200s linear infinite;
	-o-animation: floatTWO 200s linear infinite;
	animation: floatTWO 200s linear infinite;
}

.floating-symbols:nth-of-type(3){
	left: 50%;
	top: 80%;
	-webkit-animation: floatTHREE 200s linear infinite;
	-moz-animation: floatTHREE 200s linear infinite;
	-o-animation: floatTHREE 200s linear infinite;
	animation: floatTHREE 200s linear infinite;
}

.floating-symbols:nth-of-type(4){
	left: 50%;
	top: 10%;
	-webkit-animation: floatONE 200s linear infinite;
	-moz-animation: floatONE 200s linear infinite;
	-o-animation: floatONE 200s linear infinite;
	animation: floatONE 200s linear infinite;
}

.floating-symbols:nth-of-type(5){
	left: 58%;
	top: 14%;
	-webkit-animation: floatTWO 200s linear infinite;
	-moz-animation: floatTWO 200s linear infinite;
	-o-animation: floatTWO 200s linear infinite;
	animation: floatTWO 200s linear infinite;
}

.floating-symbols:nth-of-type(6){
	left: 62%;
	top: 40%;
	-webkit-animation: floatTHREE 200s linear infinite;
	-moz-animation: floatTHREE 200s linear infinite;
	-o-animation: floatTHREE 200s linear infinite;
	animation: floatTHREE 200s linear infinite;
}

.floating-symbols:nth-of-type(7){
	left: 72%;
	top: 30%;
	-webkit-animation: floatONE 200s linear infinite;
	-moz-animation: floatONE 200s linear infinite;
	-o-animation: floatONE 200s linear infinite;
	animation: floatONE 200s linear infinite;
}

.floating-symbols:nth-of-type(8){
	left: 82%;
	top: 60%;
	-webkit-animation: floatTWO 200s linear infinite;
	-moz-animation: floatTWO 200s linear infinite;
	-o-animation: floatTWO 200s linear infinite;
	animation: floatTWO 200s linear infinite;
}

.floating-symbols:nth-of-type(9){
	left: 65%;
	top: 76%;
	-webkit-animation: floatTHREE 200s linear infinite;
	-moz-animation: floatTHREE 200s linear infinite;
	-o-animation: floatTHREE 200s linear infinite;
	animation: floatTHREE 200s linear infinite;
}

.floating-symbols:nth-of-type(10){
	left: 78%;
	top: 90%;
	-webkit-animation: floatONE 200s linear infinite;
	-moz-animation: floatONE 200s linear infinite;
	-o-animation: floatONE 200s linear infinite;
	animation: floatONE 200s linear infinite;
}

.floating-symbols:nth-of-type(11){
	left: 18%;
	top: 90%;
	-webkit-animation: floatTWO 200s linear infinite;
	-moz-animation: floatTWO 200s linear infinite;
	-o-animation: floatTWO 200s linear infinite;
	animation: floatTWO 200s linear infinite;
}
.floating-symbols:nth-of-type(12){
	left: 28%;
	top: 60%;
	-webkit-animation: floatTHREE 200s linear infinite;
	-moz-animation: floatTHREE 200s linear infinite;
	-o-animation: floatTHREE 200s linear infinite;
	animation: floatTHREE 200s linear infinite;
}

.floating-symbols:nth-of-type(13){
	left: 8%;
	top: 10%;
	-webkit-animation: floatONE 200s linear infinite;
	-moz-animation: floatONE 200s linear infinite;
	-o-animation: floatONE 200s linear infinite;
	animation: floatONE 200s linear infinite;
}
.floating-symbols:nth-of-type(14){
	left: 14%;
	top: 22%;
	-webkit-animation: floatTWO 200s linear infinite;
	-moz-animation: floatTWO 200s linear infinite;
	-o-animation: floatTWO 200s linear infinite;
	animation: floatTWO 200s linear infinite;
}

.floating-symbols:nth-of-type(15){
	left: 12%;
	top: 50%;
	-webkit-animation: floatTHREE 200s linear infinite;
	-moz-animation: floatTHREE 200s linear infinite;
	-o-animation: floatTHREE 200s linear infinite;
	animation: floatTHREE 200s linear infinite;
}

.floating-symbols {
	position: absolute;
	font-size: 22px;
	color: rgba(202,180,229,.9);
}

@-webkit-keyframes floatONE {
	from{-webkit-transform: rotate(0deg) translateX(150px); }
	to{-webkit-transform: rotate(360deg) translateX(150px); }
}

@-moz-keyframes floatONE {
	from{-webkit-transform: rotate(0deg) translateX(150px); }
	to{-webkit-transform: rotate(360deg) translateX(150px); }
}

@-o-keyframes floatONE {
	from{-webkit-transform: rotate(0deg) translateX(150px); }
	to{-webkit-transform: rotate(360deg) translateX(150px); }
}

@keyframes floatONE {
	from{transform: rotate(0deg) translateX(150px); }
	to{transform: rotate(360deg) translateX(150px); }
}

@-webkit-keyframes floatTWO {
	from{-webkit-transform: rotate(0deg) translateX(150px); }
	to{-webkit-transform: rotate(-360deg) translateX(150px); }
}

@-moz-keyframes floatTWO {
	from{-webkit-transform: rotate(0deg) translateX(150px); }
	to{-webkit-transform: rotate(-360deg) translateX(150px); }
}

@-o-keyframes floatTWO {
	from{-webkit-transform: rotate(0deg) translateX(150px); }
	to{-webkit-transform: rotate(-360deg) translateX(150px); }
}

@keyframes floatTWO {
	from{transform: rotate(0deg) translateX(150px); }
	to{transform: rotate(-360deg) translateX(150px); }
}

@-webkit-keyframes floatTHREE {
	from{-webkit-transform: rotate(0deg) translateX(150px); }
	to{-webkit-transform: rotate(360deg) translateX(150px); }
}

@-moz-keyframes floatTHREE {
	from{-webkit-transform: rotate(0deg) translateX(150px); }
	to{-webkit-transform: rotate(360deg) translateX(150px); }
}

@-o-keyframes floatTHREE {
	from{-webkit-transform: rotate(0deg) translateX(150px); }
	to{-webkit-transform: rotate(360deg) translateX(150px); }
}

@keyframes floatTHREE {
	from{transform: rotate(360deg) translateX(150px); }
	to{transform: rotate(0deg) translateX(150px); }
}

#contact-section:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: rgba(0,0,0,.6);
}

#contact-section {
	position: relative;
	min-height: 600px;
	padding: 55px 0px;
	text-align: center;
	background-image: url('images/cove.jpg');
	background-size: cover;
}

.contact-panel {
	display: inline-block;
	position: relative;
	margin: 75px auto;
	padding: 40px 80px;
}

.contact-panel:after {
	right: 10px;
	left: auto;
}

#contact-section h2 {
	text-align: center;
	font-weight: 700;
	margin: auto auto 40px;
	color: white;
}

form {
	width: 450px;
	margin: 0px auto 50px;
	font-size: 0px;
}

form input {
	display: inline-block;
	width: 90%;
	height: 40px;
	margin: 10px 0px;
	padding: 4px 5px 0px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid white;
	border-radius: 0px;
	border-right: none;
	outline: none;
	font-size: 18px;
	color: white;
}

form textarea {
	width: 100%;
	height: 225px;
	padding: 12px 6px 0px;
	background-color: transparent;
	border: 1px solid white;
	border-radius: 0px;
	outline: none;
	resize: none;
	font-size: 18px;
	margin: 20px auto 10px;
	color: white;
	overflow: hidden;
	resize: none;
}

.submit-btn {
	text-align: center;
	margin: 30px auto 0px;
	padding-bottom: 5px;
	width: 100%;
	font-size: 22px;
	font-weight: 600;
	background-color: #fff;
	border: 1px solid white;
	color: #000;
}

.submit-btn:hover {
	cursor: pointer;
}

::-webkit-input-placeholder {
	color: white;
}

::-moz-placeholder {
	color: white;
	opacity: 1;
}

::-ms-input-placeholder {
	color: white;
}

::-moz-placeholder {
	color: white;
	opacity: 1;
}

.form-icons {
	border-bottom: 1px solid white;
	border-left: none;
	display: inline-block;
	vertical-align: top;
	margin: 10px 0px;
	height: 40px;
	line-height: 40px;
	width: 10%;
	font-size: 0px;
	text-align: center;
	padding-top: 2px;
	color: white;
}

.alert-container {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,.5);
}

.alert {
	display: none;
	position: relative;
	width: 400px;
	padding: 40px 0px;
	margin: 10% auto;
	text-align: center;
	border-radius: 10px;
	background-color: #EEEEEE;
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name:animatetop;
	animation-duration: 0.4s;
}

@-webkit-keyframes animatetop {
	from {
		top: -200px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

@keyframes animatetop {
	from {
		top: -200px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

.alert h2 {
	font-size: 26px;
	margin-bottom: 10px;
	font-weight: 500;
}

.alert p {
	font-size: 18px;
	margin-bottom: 20px;
}

.alert button {
	display: inline-block;
	border-radius: 5px;
	padding: 6px 40px 5px;
	border: none;
	outline: none;
	color: white;
	font-size: 20px;
}

.incomplete-form button {
	background-color: #bc2f2b;
}

.message-sent button {
	background-color: #4caf50;
}

.close-sent-alert, .close-form-alert {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 6px 8px 2px;
	border-radius: 50%;
	font-size: 14px;
}

.close-sent-alert:hover, .close-form-alert:hover {
	cursor: pointer;
}

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

	.contact-panel {
		margin: 35px 25px;
	}

}

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

	.contact-section {
		padding: 30px 0px;
	}

}

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

	#name {
		font-size: 50px;
	}

	.contact-panel {
		width: 95%;
		margin: 35px auto;
		padding: 40px 25px;
	}

	form {
		width: 100%;
	}

	.alert {
		width: 80%;
		padding: 40px 0px;
	}
	
	.close-sent-alert, .close-form-alert {
		border: none;
	}

}