/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/

/*--reset--*/

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--*/

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 100%;
    background: url(../images/grocery_store.jpg)no-repeat center top;
    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;
}

.w3ls-login {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    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: 3.2em;
    font-weight: 300;
    text-transform: capitalize;
    color: #000000;
    text-shadow: 1px 1px 1px #00ba9d;
    letter-spacing: 1px;
    margin: 0.5em 1vw 1.6em;
    text-align: center;
    font-family: 'Niconne', cursive;
}

.w3ls-login form {
    position: relative;
    max-width: 500px;
    margin: 0 5vw;
    padding: 3.5vw;
    border: none;
    background: linear-gradient(43deg, #ffffff 44%, #00ba9d 42%);
    background: -webkit-linear-gradient(43deg, #ffffff 44%, #00ba9d 42%);
    background: -moz-linear-gradient(43deg, #ffffff 44%, #00ba9d 42%);
    background: -o-linear-gradient(43deg, #ffffff 44%, #00ba9d 42%);
    box-sizing: border-box;
    display: flex;
    border-top: 8px solid #fff;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.w3ls-login label {
    font-size: 15px;
    color: #000;
    float: left;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: capitalize;
    letter-spacing: 1px;
    cursor: pointer;
}

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

.w3ls-login label i {
    font-size: 1.1em;
    margin-right: 3px;
    color: #363af4;
}

.w3ls-login input[type="text"],
.w3ls-login input[type="password"] {
    width: 100%;
    color: #000;
    outline: none;
    font-size: 16px;
    letter-spacing: 0.5px;
    /* line-height: 25px; */
    padding: 15px;
    box-sizing: border-box;
    border: none;
    box-shadow: 3px 0px 12px rgba(0, 0, 0, 0.49);
    -webkit-appearance: none;
    font-family: 'Source Sans Pro', sans-serif;
    background: #fff;
}

.check1 {
    text-align: left;
}

label.check {
    float: none;
    ;
}

.agile_label {
    float: left;
    margin: 10px 0 0;
}

.agile-right {
    float: right;
    margin: 10px 0 0;
}

.agile-right a {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: capitalize;
    letter-spacing: 2px;
}

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

.w3ls-login input[type=submit] {
    color: #00ba9d;
    font-weight: 600;
    width: 100%;
    padding: 0.5em 0;
    margin-top: 2em;
    font-size: 1.1em;
    letter-spacing: 2px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    border: 5px double #00ba9d;
    outline: none;
    background: #000;
    font-family: 'Source Sans Pro', 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 {
    background: #ffffff;
    color: #000;
}

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

.w3ls-login img {
    position: absolute;
    top: -10%;
    left: 40%;
    border: 7px solid #00ba9d;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
}

/* switch */

label.switch {
    position: relative;
    display: inline-block;
    height: 23px;
    padding-left: 3.8em;
    cursor: pointer;
    color: #000;
}

li:nth-child(2) a,
label.switch {
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 3px;
    width: 20%;
    background-color: #777;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 4px;
    bottom: 5px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #363af4;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded sliders */

.slider.round:before {
    border-radius: 50%;
}

/* //switch */

.form-end {
    float: right;
    width: 35%;
}

/*--copyright--*/

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

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

.copy-wthree p a {
    color: #00ba9d;
    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;
}

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

/*--//copyright--*/

/*--responsive--*/

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

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

@media(max-width:800px) {
    h1 {
        font-size: 5vw;
    }
    .w3ls-login img {
        width: 14%;
        left: 42%;
    }
}

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

@media(max-width:414px) {
    .w3ls-login img {
        top: -8%;
    }
}

@media(max-width:440px) {
    h1 {
        font-size: 2.3em;
    }
    .parent {
        display: block;
    }
}

@media(max-width:384px) {
    .agile_label,.agile-right {
        float: none;
    }
}

@media(max-width:320px) {
    h1 {
        font-size: 1.8em;
    }
    .w3ls-login form {
        padding: 25px 8px;
    }
}

/*--//responsive--*/