/* ------ Footer ------ */

footer {
	width: 100%; height: 60px; background-color: rgba(0,0,0,0.5);
	position: absolute; bottom: 0px; transition: .5s; float: left;
}
footer li {
	width: 50%; text-align: center; float: left;
}
footer a {
	font-size: 11pt; margin: 15px 0; color: white; 
	text-decoration: none; transition: color .2s; display: block;
}
footer a:hover{
	color:rgb(212,252,125);
}
footer li p {
	margin: 7.5px 0; font-size: 11pt; color: white;
}




/* -------- Contact-form -------- */

#contact-form {
	/* display: flex; align-items: center;*/
	
	width: calc(100% - 600px); height: 471px; margin: 70px 0 60px;
	padding: 0 300px; background-color: aliceblue; display: inline-block;
}

#contact-form-img {
	width: calc(100% - 550px); height: 100%;
	object-fit: cover; float: left;
}
#contact-form form {
	width: 450px; padding: 50px;
	background-color: gainsboro; float: left;
}


/* -------- Form -------- */

#contact-form p {
	width: 150px; margin: 0 0 5px; font-size: 12pt;
}
#contact-form h2 {
	margin: 15px 0 0; color: black; font-size: 24pt;
}
#contact-form input {
	padding: 5px 10px; border: none; font-family: calibril;
	font-size: 16pt; transition: .1s;
}

#contact-form input[type=text], #contact-form input[type=number] {
	width: 250px; height: 35px; padding: 5px 10px;
	
}
#contact-form input:hover, input:focus {
	box-shadow: 2px 2px 2px rgb(185,185,185);
}
	
#contact-form input[type=submit] {
	width: 150px; font-size: 13pt; color: white; background-color: rgb(241,105,88);
}

#contact-form textarea {
	width: 400px; margin: 10px 0; padding: 5px 10px; border: none;
	font-family: calibril; font-size: 14pt; transition: .1s; display: block;
}
#contact-form textarea:hover, textarea:focus {
	box-shadow: 2px 2px 2px rgb(185,185,185);
}

#send {
	width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.5);
	text-align :center; position: fixed; top: 0; left: 0; display: none;
}
#load{
	width: 300px; margin: 0 calc(50% - 150px); padding: 25px 0; background-color: white;
	position: relative; top: 35vh;
}
#load p {
	text-align: center; display: inline-block;
}
#load b {
	padding: 10px; font-size: 20pt; color: rgb(241,105,88);
	position: absolute; top: 5px; right: 10px;
    
}

#loader {
	width: 50px; height: 50px; margin: 0 calc(50% - 35px);
	border: 10px solid #f3f3f3; border-radius: 50%;
	border-top: 10px solid rgb(254,144,0); border-bottom: 10px solid rgb(254,144,0);
	-webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;
	text-align : center;
}



/* --------------------------- Mob sized screens -------------------------- */

@media screen and (max-width:680px){
	
footer {
	height: 65px;
}
footer li {
	width: 100%;
}
footer li p {
margin: 5px 0;
}
footer li a {
	margin: 0; padding: 5px 0; background-color: rgb(61,148,255);
}


/* -------- Contact-form -------- */

#contact-form {
	width: 100%; height: auto; margin: 40px 0 65px;
	padding: 0;
}

#contact-form-img {
	width: 100%; height: auto; float: left;
}
#contact-form form {
	width: calc(100% - 50px); padding: 25px;
}
#contact-form textarea {
	width: 90%;
}

}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}