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

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

.clearfix {
    clear: both;
}

/* clear float */

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

button.w3l-cart {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    text-decoration: none;
    outline: none;
}

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

.clearfix {
    clear: both;
}

/* content */

body {
    background: url(../images/bg1.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 100vh;
    font-family: 'Mukta Mahee', sans-serif;
}

hr {
    border: 0.5px solid rgba(0, 0, 0, 0.2);
}

/* phone */

.mobile-screen {
    position: relative;
}

#phone {
    width: 335px;
    height: 640px;
    border-radius: 30px;
    background: #111;
    margin: 0 auto;
}

#screen {
    width: 300px;
    height: 520px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -260px -150px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 1em;
    background: url(../images/bg2.jpg) no-repeat center;
    background-size: cover;
}

#home {
    width: 36px;
    height: 36px;
    border: 1px solid #313131;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin: 0 -18px;
    border-radius: 50%;
}

#speaker {
    width: 50px;
    height: 6px;
    border: 1px solid #313131;
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 25px;
    margin: 0 -25px;
}

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

.content-w3ls {
    position: relative;
    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;
}

.content-top-agile {
    padding: 1em;
    background: #E91E63;
    border-radius: 20px;
    text-align: center;
}

.content-top-agile h2 {
    color: #ffffff;
    font-weight: 400;
    font-size: 1.3em;
    text-transform: uppercase;
}

h1.title-agile {
    font-size: 2.8em;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 3px;
    word-spacing: 3px;
    margin: 1em 1vw 1em;
    text-align: center;
    font-family: 'Mukta Mahee', sans-serif;
}

.content-w3ls ul li {
    display: block;
    color: #fff;
}

li:nth-child(2) a {
    color: #fff;
}

/* form style  */

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

.password-rel {
    position: relative;
}

.field-icon {
    position: absolute;
    top: 55px;
    right: 15px;
}

ul.list-login {
    margin: 2em 0 0;
}

.field_w3ls {
    border-radius: 15px;
    margin: 2em 0;
    text-align: center;
}

.field-group label {
    color: #000;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 1em;
    display: block;
}

.field-group input:last-child {
    border-bottom: 1px solid #c2c5ca;
}

.field-group input {
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    font-family: 'Mukta Mahee', sans-serif;
    outline: none;
    border-radius: 30px;
}

.wthree-field input[type="submit"] {
    background: #000;
    width: 100%;
    border: none;
    color: #fff;
    padding: 12px 15px;
    border-radius: 30px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Mukta Mahee', sans-serif;
    cursor: pointer;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.wthree-field input[type="submit"]:hover {
    background: #E91E63;
    color: #fff;
    letter-spacing: 2px;
}

.toggle-password {
    cursor: default;
}

.copyright {
    margin: 4em 0 2em;
}

.copyright p {
    color: #fff;
    letter-spacing: 1px;
    margin: 0 1em 1em;
    font-size: 1em;
}

.copyright p a {
    color: #fff;
}

/* //content */

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

@media screen and (max-width: 640px) {
    h1.title-agile {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 480px) {
    .content-w3ls {
        margin: 3em 1em;
    }
    h1.title-agile {
        font-size: 2.3em;
        letter-spacing: 3px;
    }
}

@media screen and (max-width: 414px) {
    h1.title-agile {
        font-size: 2.2em;
    }
    ul.list-login li:nth-child(2),
    li.switch-agileits {
        float: none;
    }
    ul.list-login li:nth-child(2) {
        margin-top: 1em;
    }
    form .field-group .wthree-field {
        flex: 3 40%;
    }
}

@media screen and (max-width: 384px) {
    h1.title-agile {
        font-size: 2.1em;
    }
    .content-w3ls {
        margin: 2em 1em;
    }
    .wthree-field input[type="submit"] {
        padding: 7px 15px;
    }
}

@media screen and (max-width: 375px) {
    h1.title-agile {
        font-size: 2em;
    }
    .content-bottom {
        padding: 1em;
    }
    .field_w3ls {
        margin: 1em 0;
    }
    .copyright p {
        letter-spacing: 0.5px;
    }
}

@media screen and (max-width: 320px) {
    h1.title-agile {
        font-size: 1.7em;
    }
    .content-bottom {
        padding: 2em 1.5em;
    }
    .content-top-agile h2 {
        font-size: 1.2em;
    }
    .content-bottom {
        padding: 1em 0em;
    }
    .content-top-agile {
        padding: 1em;
    }
    #screen {
        width: 259px;
        left: 58%;
    }
    #phone {
        width: 280px;
    }
}

/* -- //Responsive code -- */