/* 
   RESET
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0;	font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* ESSENTIALS */
html,body{height:100%;}
body {background-color: #231F20; margin-left: 0px;	margin-top: 0px; margin-right: 0px;	margin-bottom: 0px;} 
body, * {color: #F4F4F5;font: 15px/135% 'Muli', Arial, Helvetica, sans-serif; margin: 0px; padding: 0px;}
@media screen and (max-width: 30em) {
	body, * {font: 13px/125% 'Muli', Arial, Helvetica, sans-serif;}
}
strong, b, * strong, * b, p strong, b strong {font-weight: bold;}
a, a strong, strong a {color: #ffF;text-decoration: underline 4px transparent;text-underline-offset: 4px;font-weight: bold;}
a:hover, a:hover strong, strong a:hover {color: #fff;text-decoration: underline 4px #fff;text-underline-offset: 4px;}
img{border:none; max-width: 100%;}
p {text-align: justify;}
em {font-style: italic;}
.clear{clear:both;}
::-moz-selection {color: #FFF; text-shadow: 1px 1px black; background: #fff;}
::selection {color:#FFF; text-shadow: 1px 1px black; background: #fff;}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

* {
  box-sizing: border-box;
}


/* FONTS */
/* vietnamese */
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli Regular'), local('Muli-Regular'), url(https://fonts.gstatic.com/s/muli/v10/Ul00HI23GehQ9qPsH_7ocQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli Regular'), local('Muli-Regular'), url(https://fonts.gstatic.com/s/muli/v10/jbCPU7JDvi-y7oVFF-ztAg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli Regular'), local('Muli-Regular'), url(https://fonts.gstatic.com/s/muli/v10/z6c3Zzm51I2zB_Gi7146Bg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* Wrap */
.container {padding: 5px;display: block;margin: 0 auto;position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);margin-top: 2em;margin-bottom: 3em;}
.container, .container *, .container p {text-align: center;}
.header {width: 450px;height: 237px;margin: 0 auto;background: url(img/gustavocruzeiro.svg) no-repeat;background-size: 100%;text-indent: 100%;white-space: nowrap;overflow: hidden;}
@media screen and (max-width: 40em) {
	.header {width: 400px; height: 210px;}
}
@media screen and (max-width: 30em) {
	.header {width: 350px; height: 184px;}
}
@media screen and (max-width: 25em) {
	.header {width: 300px; height: 158px;}
}
@media screen and (max-width: 20em) {
	.header {width: 250px; height: 131px;}
}
@media screen and (max-width: 18em) {
	.header {width: 210px; height: 110px;}
}
@media screen and (max-width: 16em) {
	.header {width: 190px; height: 100px;}
}
@media screen and (max-width: 14em) {
	.header {width: 150px; height: 79px;}
}
.subheader {margin-top: 1em;margin-bottom: 1em;text-transform: uppercase;font-size: 1em;letter-spacing: 0.2em;line-height: 1.5em;color: #919191;}
@media screen and (max-width: 25em) {
	.subheader {font-size: 1.3em;}
}
@media screen and (max-width: 18em) {
	.subheader {font-size: 1.1em;}
}

/* Social Media */
.socialnetworks {margin-top: 1.5em;margin-bottom: 1.5em;}
.fa {padding: 20px; font-size: 30px; width: 50px; text-align: center; text-decoration: none; margin: 5px 2px;}
@media screen and (max-width: 25em) {
	.fa {padding: 15px; font-size: 30px; width: 40px; text-align: center; text-decoration: none; margin: 5px 2px;}
}
.fa:hover {opacity: 0.7; color: #fff;}
.fa-facebook {background: #575a60;color: white;}
.fa-twitter {background: #55ACEE; color: white;}
.fa-google {background: #dd4b39; color: white;}
.fa-instagram {background: #40474c;color: white;}
.fa-behance {background: #606b78;color: white;}
.fa-linkedin {background: #4c575e;color: white;}

/* Form */
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
form {max-width: 450px; margin: 0 auto;}
form > div {position: relative; background: white; border: 1px solid #999;}
form > div > label {opacity: 0.3;font-weight: bold;position: absolute;top: 22px;left: 20px;color: #000000;}
form > div > input[type="text"], form > div > input[type="email"], form > div > input[type="password"], form > div > textarea {width: 100%; border: 0; padding: 20px 20px 20px 50px; background: #eee;}
form > div > input[type="text"]:focus, form > div > input[type="email"]:focus, form > div > input[type="password"]:focus,form > div > textarea:focus {outline: 0;background: white;text-align: left;color: #1D1B1C;}
form > div > input[type="text"]:focus + label, form > div > input[type="email"]:focus + label, form > div > input[type="password"]:focus + label,
form > div > textarea:focus + label {opacity: 0;}
form > div > input[type="text"]:valid, form > div > input[type="email"]:valid, form > div > input[type="password"]:valid,
form > div > textarea:valid {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/check.svg); background-size: 20px; background-repeat: no-repeat; background-position: 20px 20px; text-align: left;;;;color: #1D1B1C;;;;}
form > div > input[type="text"]:valid + label, form > div > input[type="email"]:valid + label, form > div > input[type="password"]:valid + label, form > div > textarea:valid + label { opacity: 0;}
form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown), form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown),
form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown), form > div > textarea:invalid:not(:focus):not(:placeholder-shown) {background: pink;text-align: left;color: #1D1B1C;}
form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown) + label, form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown) + label, form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) + label, form > div > textarea:invalid:not(:focus):not(:placeholder-shown) + label { opacity: 0;}
form > div > input[type="text"]:invalid:focus:not(:placeholder-shown) ~ .requirements, form > div > input[type="email"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
form > div > input[type="password"]:invalid:focus:not(:placeholder-shown) ~ .requirements, form > div > textarea:invalid:focus:not(:placeholder-shown) ~ .requirements {max-height: 200px; padding: 0 30px 20px 50px;}
.requirements {padding: 0 30px 0 50px; color: #999; max-height: 0; -webkit-transition: 0.28s; transition: 0.28s; overflow: hidden; color: red; font-style: italic;}
form > p {margin-top: 1em; margin-bottom: 1em;}
form input[type="submit"] {display: block;width: 100%;margin: 20px 0;background: black;color: white;border: 0;padding: 20px;font-size: 1.1em;text-transform: uppercase;letter-spacing: 0.1em;}
form input[type="submit"]:hover {background: #F4F4F5;color: #1D1B1C;}
form input[type="submit"]:focus, form input[type="submit"]:active {background: #000;}
textarea {resize: vertical; max-height: 300px; min-height: 200px;}
#form {display: none;}
.formbutton {padding: 0.95em;background: #F4F4F5;color: #231F20;font-size: 1.4em;border: 0;max-width: 450px;width: 100%;border: none;letter-spacing: 0.25em;}
.emailline {margin-bottom: 2em; letter-spacing: 0.15em;}
.emailline a {letter-spacing: 0.2em;}
.hidediv {display: none; margin-top: 1em; margin-bottom: 1em; font-style: italic; }
.languagesbar {margin-top: 1em; margin-bottom: 1em;}
.languagesbar ul {  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;}
.languagesbar ul li {margin: 0.25em;}
.languagesbar ul li a {padding: 0.75em; color: #919191;}
.languagesbar ul li a:hover {text-decoration: underline 3px  #919191; text-underline-offset: 3px;}
.languagesbar ul li, .languagesbar ul li a {font-size: 0.9em; letter-spacing: 0.25em;}
.languagesbar ul li a.active {color: #F4F4F5;}
.languagesbar ul li a.active:hover {text-decoration: underline 3px  #F4F4F5; text-underline-offset: 3px;}