@charset "utf-8";

body,div,dl,dt,dd,p,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,blockquote,form{margin:0;padding:0;}
ul,ol{list-style:none;}
img,a img{border:none;display:block;}
*:link,*:visited{}
*:active,*:focus{outline:0;}
table{border-collapse:collapse;border-spacing:0;}
label,button{cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:inherit;padding:0;margin:0;vertical-align:middle;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0;padding:0;}

@font-face {
    font-family: 'wremenalight';
    src: url('wremena_light-webfont.woff2') format('woff2'),
         url('wremena_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'wremenaregular';
    src: url('wremena_regular-webfont.woff2') format('woff2'),
         url('wremena_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

strong { font-weight: 400; }

@keyframes  random {
    15% { background-color: #9a5957; } 
    30% { background-color: #a96745; } 
    45% { background-color: #cd9643; } 
    60% { background-color: #e8bc99; }
    75% { background-color: #90b08b; }  
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;animation-duration:0.5s; }

body {  background: rgb(111,124,76); -webkit-animation: random 20s infinite; animation: random 20s infinite; color: #000; font-family: "wremenalight", sans-serif; font-size: 20px; line-height: 1.8; }
.layout { padding: 5% 40px 40px; text-align: center; margin: 0 auto; max-width: 800px; }
.layout h1 { font-size: 20px; font-weight: 400; margin: 0 0 20px; }
.layout h2 { font-size: 20px; font-weight: 400; font-weight: normal; margin: 0 0 20px }
.layout p { font-size: 20px; line-height: 1.8; margin: 40px auto; }
.layout a { color: #000; text-decoration: underline; }
.layout a:hover { opacity: 0.75; }
.layout img { width: 200px; height: auto; margin: 0 auto 60px; }

form { max-width: 400px; margin: 40px auto; text-align: center; }
form input { text-align: center; }
form input::-webkit-input-placeholder { color: #000; }
form input::-moz-placeholder { color: #000; }
form input:-ms-input-placeholder { color: #000; }
form input:-moz-placeholder { color: #000; opacity: 1; }
form input::placeholder { color: #000; }

input { background: rgba(255,255,255,0.05); border: none; color: #000; display: block; font-size: 20px; height: 50px; margin-bottom: 20px; padding: 0 10px; width: 100%; box-sizing: border-box; }
input:focus,
input:hover { background: rgba(255,255,255,0.1); border: none; color: #000; outline-style: none; box-shadow: none; }

form button { background: transparent; border: 2px solid #000; color: #000; box-sizing: border-box; display: inline-block; font-family: "wremenalight", sans-serif; font-size: 20px; font-weight: 400; line-height: 50px; text-align: center; padding: 0 20px; width: 100%; }
form button:hover { background: #000; color: #FFF;  }

@media only screen and (max-width: 800px) {
    .layout { padding: 40px; }
	.layout img { width: 150px; }
}