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;
}

.clearfix {
    clear: both;
}

/*--start editing from here--*/

a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}

/* text align right */

.txt-lt {
    text-align: left;
}

/* text align left */

.txt-center {
    text-align: center;
}

/* text align center */

.float-rt {
    float: right;
}

/* float right */

.float-lt {
    float: left;
}

/* float left */

.pos-relative {
    position: relative;
}

/* Position Relative */

.pos-absolute {
    position: absolute;
}

/* Position Absolute */

.vertical-base {
    vertical-align: baseline;
}

/* vertical align baseline */

.vertical-top {
    vertical-align: top;
}

/* vertical align top */

nav.vertical ul li {
    display: block;
}

/* vertical menu */

nav.horizontal ul li {
    display: inline-block;
}

/* horizontal menu */

img {
    max-width: 100%;
}

/*--end reset--*/

@media screen and (max-width: 767px) {
    body {
        background: url("/")no-repeat center !important;
      
    }

    .w3ls-login input[type=submit] {
        color: #ffffff !important;
       
        background: gray !important;
 
    }

  }


body {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 100%;
    background: url("/account/img/login-bg.jpg")no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-attachment: fixed;
    text-align: center;
    position: relative;
}

.w3ls-pos {
   
    width: 600px;
    position: absolute;
    padding: 20px;
    top:40px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #ffffffa3;
    border-radius: 12px;
}

.w3ls-login {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

h1 {
    font-size: 2em;
    font-weight: 300;
    color: #686868;
    
    letter-spacing: 2px;
    
    text-align: center;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.w3ls-login form {
    max-width: 500px;
    width: 100%;
    margin: 15px 2vw;
    padding: 0.5vw;
    
    padding-bottom: 25px;
    border-width: 5px 0;
    box-sizing: border-box;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.agile-field-txt {
    flex-basis: 100%;
    -webkit-flex-basis: 100%;
    margin-bottom: 1.5em;
}

.w3ls-login input[type="email"],
.w3ls-login input[type="text"],  
.w3ls-login input[type="password"]
.w3ls-login input[type="number"] {
    width: 100%;
    color: #000000;
    outline: none;
    font-size: 17px;
    letter-spacing: 0.5px;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid rgb(68, 68, 68);
    -webkit-appearance: none;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: white;
}

.w3ls-login ::-webkit-input-placeholder {
    color: #686868;
}

.w3ls-login :-moz-placeholder {
    /* Firefox 18- */
    color: #686868;
}

.w3ls-login ::-moz-placeholder {
    /* Firefox 19+ */
    color: #686868;
}

.w3ls-login :-ms-input-placeholder {
    color: #686868;
}

.check1 {
    text-align: left;
}

label.check {
    color: #ededed;
    letter-spacing: 1px;
    font-size: 16px;
    display: inline-block;
}

.agile_label {
    text-align: left;
    margin: 10px 0 0;
}

.w3ls-login.w3l-sub {
    margin-top: 1em;
    flex-basis: 100%;
    -webkit-flex-basis: 100%;
}

.w3ls-login input[type=submit] {
    color: #000000;
    
    width: 100%;
    padding: 1em 0;
    font-size: 1em;
    
    
    cursor: pointer;
    border: none;
    border-radius: 6px;
    outline: none;
    background: rgba(255, 255, 255, 0.38);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
}

.w3ls-login input[type=submit]:hover {
    color: #686868;
    box-shadow: 0 20px 5px -10px rgba(0, 0, 0, 0.4);
    transform: translateY(5px);
}

.w3ls-bot {
    margin-top: 1em;
    width: 100%;
}

#particles-js {
    width: 100%;
    height: 100%;
}

/*--copyright--*/

.copy-wthree {
    margin: 4em 0 2em;
}

.copy-wthree p {
    color: #686868;
    font-size: 14.5px;
    letter-spacing: 2px;
    line-height: 1.8;
    margin: 0 3vw;
}

.copy-wthree p a {
    color: #686868;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    text-decoration: underline;
}

.copy-wthree p a:hover {
    color: #686868;
}

/*--//copyright--*/

/*--responsive--*/

@media screen and (max-width: 1080px) {
    .w3ls-pos {
        left: 0;
        width: 100%;
    }
}

@media(max-width:1024px) {
    h1 {
        font-size: 4.5vw;
    }
}

@media(max-width:900px) {
    .w3ls-pos {
        left: 0;
    }
}

@media(max-width:800px) {
    h1 {
        font-size: 5vw;
    }
    .w3ls-pos {
        left: 0;
    }
}

@media(max-width:736px) {
    .w3ls-pos {
        left: 0;
    }
}

@media(max-width:667px) {
    .w3ls-pos {
        left: 0;
    }
}

@media(max-width:600px) {
    .w3ls-pos {
        top: 5px;
        height: 100%;
    }
}

@media(max-width:480px) {
    h1 {
        font-size: 7vw;
    }
    .w3ls-login form {
        padding: 0.5vw;
    }
}

@media(max-width:440px) {
    .parent {
        display: block;
    }
}

@media(max-width:320px) {
    h1 {
        font-size: 1.8em;
    }
    .w3ls-login form {
        padding: 25px 8px;
    }
    .w3ls-login input[type="email"],
    .w3ls-login input[type="password"] {
        padding: 10px 15px;
    }
    .w3ls-login input[type=submit] {
        color: #000000;
        font-weight: 100;
        width: 100%;
        padding: 0.3em 0;
    }
    .w3ls-pos {
        left: 0%;
    }
}

/*--//responsive--*/

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}

p.love {
    color: rgb(0, 0, 0);
}

a.text {
    color: black;
}

.w3ls-bot.text {
    margin-top: 25px;
}
.agile-field-txt.text {
    max-width: 500px;
}

.conex {
    margin: 10px;
}

p {
    margin: 0 0 10px;
}