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,dl,dt,dd,ol,nav ul,nav 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;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ol,ul {list-style:none;margin:0px;padding:0px;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
a {text-decoration:none;}
.txt-rt {text-align:right;}
.txt-lt {text-align:left;}
.txt-center {text-align:center;}
.float-rt {float:right;}
.float-lt {float:left;}
.clear {clear:both;}
.pos-relative {position:relative;}
.pos-absolute {position:absolute;}
.vertical-base {vertical-align:baseline;}
.vertical-top {vertical-align:top;}
nav.vertical ul li {display:block;}
nav.horizontal ul li {display:inline-block;}
img {max-width:100%;}
body {font-family:'Cabin',sans-serif !important;background:#eee;}
.main {width:35%;max-width: 320px;margin:8em auto 0;padding:3em;background: #fff;box-shadow: 0 0 10px #a5a5a5;}
.main h1 {color:#222;text-align:center;font-size:2em;margin:0 0 1.5em;}
.main input[type="text"],.main input[type="password"] {outline:none;border:1px solid #ddd;padding:10px 0px;width:100%;font-size:1em;color:#03A9F4;text-align:center;}
.main input[type="password"] {margin:1.5em 0;}
.main input[type="text"]:hover,.main input[type="password"]:hover {border:1px solid #2196F3;}
.main input[type="button"] {outline:none;border:1px solid #03A9F4;background:#2196F3;padding:10px 10px;width:100%;color:#fff;font-size:1.3em;cursor:pointer;}
.main input[type="button"]:hover {background:#03A9F4;color:#fff;border:1px solid #2196F3;}
.footer {text-align:center;padding:2em 0 0;}
.footer p {font-size:1em;color:#666;margin:0;}
.footer p a {color:#2196f3;}
.footer p a:hover {color:#B47C9F;}
@media (max-width:1440px) {.main {width:37%;}
    .main input[type="text"],.main input[type="password"] {}
}
@media (max-width:1280px) {.main {width:40%;}
    .main input[type="text"],.main input[type="password"] {}
}
@media (max-width:1024px) {.main {width:50%;margin:5em auto 0;}
}
@media (max-width:768px) {.main {width:60%;}
    .main input[type="text"],.main input[type="password"] {font-size:1.1em;}
}
@media (max-width:736px) {.main {padding:0em 4em 2em;}
    .footer {padding:2em 0;}
}
@media (max-width:667px) {
    .main {width:65%;margin:3em auto 0;}
    .main h1 {font-size:2em;margin:0 0 1.2em;}
    .main input[type="text"],.main input[type="password"] {}
}
@media (max-width:640px) {
    .main input[type="submit"] {font-size:1.3em;}
}
@media (max-width:600px) {
    .main input[type="text"],.main input[type="password"] {}
}
@media (max-width:480px) {
    .main{max-width: 70%;}
    .main h1 {font-size:1.5em;margin:0 0 1em;}
    .main {padding:2em;width:70%;border:0px;}
}
@media (max-width:414px) {
    .main{max-width: 80%;}
    .main input[type="text"],.main input[type="password"] {}
    .footer p {width:80%;margin:0 auto;line-height:1.8em;}
}
@media (max-width:320px) {
    .main{max-width: 80%;width:90%;margin:2em auto 0;}
    .main h1 {font-size:1.7em;}
    .main input[type="text"],.main input[type="password"] {font-size:13px;}
    .main input[type="submit"] {font-size:1em;padding:10px;}
    .footer p {width:90%;font-size:15px;}
}