div.mail-cont { display: flex;  align-items: stretch; justify-content: space-between; }
div.cont-left { width: 487px; min-height: 450px; margin-top: 30px; }
div.cont-left div.cont-list { padding-top: 20px; }

div.cont-left .subtitle-cont { font-weight: bold; padding-bottom: 10px; }

div.cont-left .subtitle-cont:not(:first-child) 
{ 
	margin-top: 30px; font-family: raleway-thin, "sans-serif"; letter-spacing: 2px; font-weight: bold; padding-bottom: 25px; font-size: 30px; 
}

div.cont-right { width: 487px; margin-top: 30px; background-color: #EDE6D7; overflow: hidden; }

div.container-form 
{  
	border-radius: 0 0 5px 5px  -moz-border-radius: 0 0 5px 5px  -webkit-border-radius: 0 0 5px 5px  
	width: 100%; padding: 20px 30px; overflow: auto; box-sizing: border-box;
}

div.contact-container div.subtitle
{ 
	border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0;  -webkit-border-radius: 10px 10px 0 0;  
	font-family: raleway-thin, "sans-serif"; color: white; letter-spacing: 2px; font-weight: bold; padding: 20px 30px; font-size: 30px;  
}

div.key { width: 40%; float: left; padding: 5px 0; }
div.value { width: 60%; float: left; padding: 5px 0; }

div.g-recaptcha { float: left; }
div.mail-cont button { transition: 1s; margin-top: 33px; border: 1px solid #F0D214; background: #F0D214; color: white; }
div.mail-cont button:hover { background: none; color: #F0D214; }

#message  { display: none; }
.message-error { background: #E50C60; color: white; padding: 10px 25px; }
.message-error li {  list-style-position: outside;  text-indent: -25px; padding-left: 25px; color: white; }
.message-ok { background: #00CC72; color: white; padding: 10px 25px; }

div.contact-container div.fb-icon img { margin: 20px 12px 30px 0; transition: 0.6s; }
div.contact-container div.fb-icon img:hover { background: #EFEFEF; transition: 0.6s; }

/********************************************************************************
INPUT placeholder
********************************************************************************/

div.input-div { position: relative; }
input:focus ~ .floating-label, input:not(:focus):valid ~ .floating-label { top: -10px; left: 0; font-size: 12px; opacity: 1; }
textarea:focus ~ .floating-label-text, textarea:not(:focus):valid ~ .floating-label-text { top: 10px; left: 10px; font-size: 12px; opacity: 1; }
.floating-label { color: #888888; position: absolute; pointer-events: none; left: 0; top: 0; transition: 0.2s ease all; }
.floating-label-text { color: #888888; position: absolute; pointer-events: none; left: 10px; top: 10px; transition: 0.2s ease all; }
textarea { padding-top: 30px; }

/********************************************************************************
MEDIA
********************************************************************************/

@media (max-width: 1200px)
{ 
	.container-form button { clear: right; width: 100%; margin-top: 20px; }
}

@media (max-width: 1200px)
{ 
	div.cont-left { width: 50%; margin-right: 15px; }
	div.cont-right { width: 50%; margin-left: 15px; }
}

@media (max-width: 870px)
{ 
	div.mail-cont { flex-direction: column; }
	div.cont-left { width: 100%; margin-right: 0; }
	div.cont-right { width: 100%; margin-left: 0; margin-top: 20px; padding-top: 0; }
	.container-form button { float: right; width: auto; padding: 10px 60px;  }
	div.cont-left { min-height: 200px; }
}

@media (max-width: 650px)
{ 
	.container-form button { clear: right; width: 100%; margin-top: 20px; }
}

@media (max-width: 500px)
{ 
	div.key { width: 100%; }
	div.value { width: 100%; }
}

@media (max-width: 420px)
{ 
	div.cont-captcha { position: absolute; margin-left: -50px; width: 100%; overflow: hidden; }
	div.g-recaptcha { position: relative; left: 50%; transform: translateX(-50%); }
	div.mail-cont button { margin-top: 100px; }
}