@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
@media screen {
/* ========== START BODY ========== */
* {
 border:0;
 margin:0;
 padding:0;
 outline:0;
}

body {
 font-size:1em;
 text-align:center;
 background:#f7fbfe;
 font-family:Lato,Arial,Helvetica,sans-serif;
}

.wrap {
 margin:0 auto;
 max-width:980px;
 position:relative;
}
/* ========== END BODY ========== */
/* ========== START HEAD ========== */
#head {
 float:left;
 width:100%;
 padding:2em 0;
 background:#0391ce;
}

#head a {
 color:#fff;
 font-size:1.8em;
 font-weight:700;
 padding:0.6em 2em;
 background:#01425e;
 text-decoration:none;
 display:inline-block;
}

#head a:hover {
 text-decoration:underline;
}
/* ========== END HEAD ========== */
/* ========== START TEXT ========== */
#text {
 float:left;
 width:100%;
 color:#5a5b5c;
 cursor:default;
 padding:0.8em 0 1.4em 0;
}

h1 {
 font-size:1.5em;
 font-weight:400;
 padding:0.4em 0;
}

#text p {
 margin:0 auto;
 font-size:1.1em;
 max-width:550px;
}

h3 {
 color:#fff;
 font-size:1.1em;
 font-weight:700;
 margin-top:1.1em;
 background:#4ca58d;
 padding:0.5em 1.6em;
 display:inline-block;
}
/* ========== END TEXT ========== */
/* ========== START MAIL ========== */
#mail {
 float:left;
 width:100%;
 color:#5a5b5c;
 background:#e9f5fb;
 border-top:1px solid #ebeef1;
}

h2 {
 padding:2em 0;
 cursor:default;
 font-size:1.3em;
 font-weight:400;
}

#mailit {
 width:50%;
 text-align:left;
 position:relative;
 margin:0 auto 3.5em auto;
}

#age {
 display:none;
}

#mailit label {
 width:100%;
 display:block;
 overflow:auto;
}

#mailit label span {
 color:#f00;
}

#mailit input, #mailit textarea {
 width:98%;
 color:#747474;
 font-size:1em;
 box-shadow:none;
 padding:0.5em 1%;
 font-family:inherit;
 margin:0.1em 0 0.7em 0;
 border:1px solid #c6c7c8;
}

#mailit input:focus, #mailit textarea:focus {
 border:1px solid #000;
}

#mailit input.inside, #mailit textarea.inside {
 background:#fff6f6;
 border:1px solid #f00;
}

#mailit textarea {
 resize:none;
 height:10em;
}

input#mailsend {
 color:#fff;
 width:100%;
 cursor:pointer;
 font-size:1.4em;
 padding:0.4em 0;
 background:#fd6429;
 margin:0.5em 0 0 0;
 border:1px solid #e64c12;
}

input#mailsend:hover {
 background:#e64c12;
 border:1px solid #b83d0f;
}

input#mailsend:active {
 top:1px;
 position:relative;
}
/* ========== END MAIL ========== */
/* ========== START FOOT ========== */
#foot {
 float:left;
 width:100%;
 color:#fff;
 background:#0391ce;
}

#foot a {
 color:#fff;
 line-height:2.8em;
 text-decoration:none;
}

#foot a:hover {
 text-decoration:none;
}
/* ========== END FOOT ========== */
}

@media (max-width:1280px){
.wrap {
 padding:0 20px;
 max-width:980px;
}
}

@media (max-width:960px){
#mailit {
 width:60%;
}
}

@media (max-width:800px){
#mailit {
 width:70%;
}
}

@media (max-width:640px){
#mailit {
 width:80%;
 margin:0 auto 3.5em auto;
}

h2 {
 padding:1em 0;
}
}

@media (max-width:600px){
.wrap {
 padding:0 10px;
}
}

@media (max-width:520px){
#mailit {
 width:90%;
}
}

@media (max-width:360px){
#head a {
 font-size:1.6em;
}

h1 {
 font-size:1.3em;
}

#text p {
 font-size:1em;
}

#mailit {
 width:95%;
}

h2 {
 font-size:1.2em;
}
}

@media (max-width:320px){
#head a {
 padding:0.6em 1em;
}
}

@media print {
body {
 display:none;
}
}