@charset "utf-8";
/* CSS Document */

/*	-----------  MODAL   ------------    */
	
#contact-modal {
	display: none;
	position: fixed;
	z-index: 100;
	top: 8vh;
	left: 0;
	min-width: 100%;
	min-height: 92vh;
	overflow: auto;
	background-color: rgba(0,0,0,0.7);
	-ms-flex-line-pack: center;
	    align-content: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}


.blur {
	-webkit-filter: blur(3px);
	        filter: blur(3px);
}


.contact-modalcont {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	background-color: rgba(255,255,255,0.75);
	margin: auto;
	padding: auto;
	border-radius: 15px;
	width: 50%;
	height: 50vh;
	color: #000;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
	z-index: 101;
}

.close-modal {
	
	font-family: 'montserrat', sans-serif;
	top: 0;
	font-size: 32px;
	font-weight: 600;
	padding: 5px;
	cursor: pointer;
	
}

.contact-modalcont > h1 {
	font-size: 1.9em;
	width: auto;
	text-align: center;
	color: #000;

}

.modform-group > label {
	font-family: 'montserrat', sans-serif;
	margin-bottom: 1px;
	padding-bottom: 0;
	font-weight: 400;
	letter-spacing: 0.1em;
	
}

#my-form {
	display: -ms-grid;
	display: grid;
	grid: 7 3 auto;
	padding: 2% 3%;
	grid-row-gap: 5px;
	grid-column-gap: 15px;
	margin: auto;
}

.modform-group {
	padding: 0;
	margin: 3%;
}

.form-name {
	-ms-grid-row: 1;
	    grid-row-start: 1;
	-ms-grid-column: 1;
	    grid-column-start: 1;
	-ms-grid-column-span: 1;
	grid-column-end: 2;
	
/*	height: 70px;*/
}

.form-address {
	-ms-grid-row: 2;
	    grid-row-start: 2;
	-ms-grid-column: 1;
	    grid-column-start: 1;
	-ms-grid-column-span: 1;
	grid-column-end: 2;
	margin-top: 1%;
/*	height: 70px;*/
}

.form-text {
	-ms-grid-column: 2;
	    grid-column-start: 2;
	-ms-grid-column-span: 3;
	grid-column-end: 5;
	-ms-grid-row: 1;
	    grid-row-start: 1;
	-ms-grid-row-span: 4;
	grid-row-end: 5;
	max-width: 100%;
}

.form-submit {
	-ms-grid-row: 6;
	    grid-row-start: 6;
	-ms-grid-column: 1;
	    grid-column-start: 1;
	-ms-grid-column-span: 4;
	grid-column-end: 5;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
	margin-top: 5px;
}

#form-button {
	height: 50px;
	width: 110px;
	background-color: #F5F3F3;
	border-radius: 15px;
	margin: auto;
	text-justify: center;
	text-align: center;

}


#status {
	  width: 90%;
	  max-width: 500px;
	  text-align: center;
	  padding: 10px;
	  margin: 0 auto;
	  border-radius: 15px;
}

#status.success{
	  background-color: rgba(211, 250, 153);
	  -webkit-animation: status 4s ease forwards;
	          animation: status 4s ease forwards;
}

#status.error{
	  background-color: rgba(250, 125, 95);
	  color: white;
	  -webkit-animation: status 4s ease forwards;
	          animation: status 4s ease forwards;
}

@media only screen and (orientation: portrait) and (max-width: 771px){
	.contact-modalcont {
		width: 85%;
	}
	
	#my-form {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: left;
		    -ms-flex-pack: left;
		        justify-content: left;
		margin: auto;
		width: 95%;
	}
	
	#my-form input, #my-form textarea {
		width: 100%;
	}
	
	.modform-group {
		width: 80%;
		margin: auto;
	}
}


/*	-----------  LARGE DESKTOP +   ------------    */
@media only screen and (min-width:992px) {
	#my-form {
		width: 95%;
	}
	
	.contact-modalcont {
		width: 45%;
		min-height: 40vh;
	}
	
	.close-modal {
		margin: 3.5% auto auto 3%;
	}
	
	#emailMessage{
		height: 12vh;
		width: 100%;
	}
}
/*	-----------  PORTRAIT TABLET TO SMALL DESKTOP   ------------    */
@media only screen and (min-width:768px) and (max-width:991px) {
		.contact-modalcont {
		width: 70%;
	}
	
	.form-text textarea{
		height: 12vh;
	}
}
/*	-----------  LANDSCAPE PHONE TO PORTRAIT TABLET   ------------    */
@media only screen and (min-width:481px) and (max-width:767px) {
		.contact-modalcont {
		width: 65vw;
		height: auto;
	}
	.contact-modalcont h1 {
		display: inline-block;
	}
	.close-modal {
		display: inline-block;
	}
	
	#my-form {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-ms-flex-line-pack: center;
		    align-content: center;
		max-width: 80%;
	}
	
	.form-group {
		max-width: 95%;
		margin: auto 3vw;
	}
	
	#emailAddress, #senderName, #emailMessage {
		max-width: 100%;
	}
	
}
/*	-----------  LANDSCAPE PHONES AND DOWN   ------------    */
@media only screen and (max-width:480px) {
	
	.contact-modalcont {
		height: 75vh;
		padding: auto;

	}
	
	.contact-modalcont h1 {
		height: 45px;
		padding-top: 10px;
		margin-top: 5%;
		text-align: center;
		width: 100%;
	}
	
	.close-modal {
		position: relative;
		height: 35px;
		float: right;
		z-index: 103;
		padding: 0;
		margin: 2% 5% auto auto;
		text-justify: center;
		text-align: center;
	}
	
	#my-form {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: left;
		    -ms-flex-pack: left;
		        justify-content: left;
		margin: auto;
		width: 95%;
		height: 75%;
	}
	
	#my-form div {
		padding: 5% auto;
	}
	
	#form-button {
		padding: 1px;
		margin-top: 5%;
	}
	
	#emailMessage {
		height: 13vh;
	}
	
	.form-group {
		margin: auto;
		padding: 1%;
	}
	
}

@media only screen and (orientation: landscape) and (max-height: 770px){
	.contact-modalcont {
		width: 60vw;
	}
}