@charset "UTF-8";

@font-face {font-family: "Roboto"; font-weight: bold; font-style: normal; src: url('/fonts/Roboto-Bold.ttf') format('truetype');}

@font-face {font-family: "Roboto"; font-weight: normal; font-style: normal; src: url('/fonts/Roboto-Regular.ttf') format('truetype');}



html, body {height: 100%; margin: 0px; padding: 0px; font-size: 14px; font-family: "Roboto", arial, verdana, tahoma, sans-serif;}

body {background-position: top center; background-repeat:  no-repeat; background-attachment: fixed; background-size: cover; background-color: #000; margin: 0px; padding: 0px; width: 100%; position: relative;}

.demo_bg_1 {background-image:url(/images/background/demo_1.jpg);}
.demo_bg_2 {background-image:url(/images/background/demo_2.jpg);}
.demo_bg_3 {background-image:url(/images/background/demo_3.jpg);}
.demo_bg_4 {background-image:url(/images/background/demo_4.jpg);}
.demo_bg_5 {background-image:url(/images/background/demo_5.jpg);}

a {text-decoration: none;}
a:hover {text-decoration: underline;}

#demo_container {width: 100%; min-height: 100%; padding: 0px 0px; position: absolute; vertical-align: middle; text-align: center; display: flex; top: 0px; bottom: 0px;}

.demo_window {background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.93) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.93) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.93) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff', endColorstr='#ddffffff',GradientType=0 ); vertical-align: middle; text-align: center; margin: auto; box-shadow: 0px 0px 41px rgba(0,0,0,1); border-radius: 7px; padding: 25px 15px 15px 15px; width: 100%; max-width: 450px;}

.demo_window form {padding: 20px 50px 20px 50px;}

.demo_window h4 {font-size: 64px; color: rgba(0,0,0,0.4); margin: 0px auto; font-weight: 300;}
.demo_window h5 {font-size: 20px; color: rgba(0,0,0,0.6); margin: 5px auto 20px auto; font-weight: bold; line-height: 24px;}


.demo_back {position: absolute; top: 0px; left: 0px; background-color: rgba(0,0,0,0.5); padding: 20px 30px 20px 16px; font-size: 21px; color: rgba(255,255,255,0.88); text-decoration: none;}
.demo_back svg {height: 24px; width: 32px; display: inline-block; margin: -3px 5px 0px 0px; fill: rgba(255,255,255,0.74); vertical-align: middle;}
.demo_back:hover {color: rgba(255,255,255,1);}
.demo_back:hover svg {fill: rgba(255,255,255,1);}


.demo_powered {position: absolute; bottom: 0px; right: 0px; background: rgba(0,0,0,0.5); padding: 12px 16px 12px 20px; font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.85); letter-spacing: 0.5px;}
.demo_powered a svg {height: 24px; max-width: 100px; fill: rgba(255,255,255,0.7); vertical-align: middle;}
.demo_powered a:hover svg {fill: rgba(255,255,255,1);}



.demo_window .ui_form {margin: 8px auto 20px auto;}
.demo_window .ui_form div {width: 100%; margin: 0 auto 15px auto; padding: 0px 0px 7px 0px; display: block; color: #676767; text-align: left; font-size: 16px;}
.demo_window .ui_form div svg {width: 30px; height: 30px; margin: 0 auto 5px auto; display: block; float: left;}
.demo_window .ui_form div:hover {background: none;}

.demo_window .ui_form input[type="email"], .demo_window .ui_form input[type="password"] {border-bottom: 1px dashed #5f5f5f; cursor: default;}

.ui_form input[type="email"], .ui_form input[type="password"] {background: none; border-bottom: 1px dashed #999; border-top: 1px dashed transparent; border-right: 1px dashed transparent; border-left: 1px dashed transparent; box-shadow: none; display: block; font-size: 18px; width: 100%; margin: 5px 0px 0px 0px; padding: 4px;}

.ui_form div:hover input[type="text"], .ui_form div:hover input[type="email"], .ui_form div:hover input[type="password"] {border-bottom: 1px dashed #444;}

.ui_form input[type="text"]:focus, .ui_form input[type="email"]:focus, .ui_form input[type="password"]:focus {background: none !important; border-bottom: 1px dashed #444;}


.demo_window .ui_form div input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px #fff inset; -webkit-text-fill-color: #333 !important; outline: none;}

.demo_window .ui_form button {padding: 14px 5px; border-radius: 48px; border-width: 3px; border-style: solid; font-size: 20px; margin: 15px auto 15px auto; min-width: 270px; font-weight: bold; letter-spacing: 0.5px; cursor: pointer; background-color: none; background: none; text-transform: uppercase;}


.demo_window .ui_form button svg {margin: -3px 0px auto 8px; vertical-align: middle; max-height: 24px; max-width: 24px; display: inline-block;}

.demo_window ul {margin: 0px; list-style: none; padding: 0px; text-align: center;}
.demo_window li {padding: 3px 0px; margin: 0px; font-size: 14px; color: #555;}
.demo_window li a {font-size: 14px; color: #bb0000;}



@media (max-width: 1023px) {
#demo_container {padding: 100px 0px;}
.demo_powered {display: block; width: 100%; z-index: 10;}
.demo_back {z-index: 99;}
}