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

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

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

/*-- title --*/

h1 {
    font-size: 3.5em;
    color: #fff;
    text-align: center;
    margin: 3vw 1vw;
    font-family: 'Sigmar One', cursive;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.32);
}

h1 span {
    color: #e73c44;
}

/*-- //title --*/

/*-- content --*/

.sub-main-w3 {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.sub-main-w3 form {
    max-width: 600px;
    margin: 0 5vw;
    background: rgba(12, 12, 12, 0.39);
    padding: 3.5vw;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: -18px 18px 0px -10px rgb(60, 231, 160);
}

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

.sub-main-w3 label {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    font-weight: 500;
    margin-bottom: 12px;
    text-transform: capitalize;
    letter-spacing: 1px;
}

.sub-main-w3 label i {
    font-size: 15px;
    margin-left: 5px;
    color: #e73c44;
    border-radius: 50%;
    line-height: 1.9;
    text-align: center;
}

.form-style-agile input[type="text"], .form-style-agile input[type="password"] {
    width: 100%;
    color: #000;
    outline: none;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 15px 15px;
    box-sizing: border-box;
    border: none;
    background: #fff;
    box-shadow: -15px 15px 1px -10px rgb(60, 231, 160);
}

.sub-main-w3 input[type="submit"] {
    color: #fff;
    background: #e73c44;
    border: none;
    padding: 14px 0;
    margin-top: 30px;
    outline: none;
    width: 30%;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 2px;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.49);
}

.sub-main-w3 input[type="submit"]:hover {
    background: #000;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

.wthree-text {
    width: 100%;
}

.wthree-text ul li:nth-child(1) {
    float: left;
}

.wthree-text ul li:nth-child(2) {
    float: right;
}

.wthree-text ul li {
    display: inline-block;
}

.wthree-text ul li a {
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 500;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}
.wthree-text ul li a:hover {
    color: #e73c44;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}
/*--placeholder-color--*/

::-webkit-input-placeholder {
    color: #000;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #000;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #000;
}

:-ms-input-placeholder {
    color: #000;
}

/*-- //placeholder-color --*/
/*-- //content --*/

/*-- button (switch) --*/

.switch.demo3 {
    width: 56px;
    height: 28px;
}

.switch {
    margin: 0px auto;
    position: relative;
}

.switch input {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.switch.demo4 label {
    display: block;
    width: 100%;
    height: 100%;
    background: #e64c65;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    color: #FFF;
    box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #FFF;
    -webkit-box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #FFF;
    -moz-box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #FFF;
    -o-box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #FFF;
    font-size: 1.1em;
}

.switch.demo4 label:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    border-radius: inherit;
}

.switch.demo4 label:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    border-radius: inherit;
    /*--background:rgba(51, 92, 140, 0.37);--*/
}

.switch.demo3 label i:before {
    content: " ";
    text-transform: uppercase;
    color: #999999;
    font-size: 0.8em;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: -120%;
    color: #fff;
}

.switch.demo3 label {
    display: block;
    width: 100%;
    height: 100%;
    background: #e73c44;
    border-radius: 40px;
    color: #FFF;
}

.switch.demo3 input:checked~label {
    background: #BDBDBD;
    color: #FFF;
}

.switch.demo3 label:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    border-radius: inherit;
}

.switch.demo3 input:checked~label i {
    right: -1%;
}

.switch.demo3 label i {
    display: block;
    height: 80%;
    width: 41%;
    border-radius: inherit;
    position: absolute;
    z-index: 2;
    right: 58%;
    top: 3px;
    background: #fff;
    border: none;
    box-shadow: 0 0 4px rgb(46, 46, 46);
    -webkit-box-shadow: 0 0 4px rgb(46, 46, 46);
    -moz-box-shadow: 0 0 4px rgb(46, 46, 46);
    -o-box-shadow: 0 0 4px rgb(46, 46, 46);
}

.switch.demo3 input:checked~label i:before {
    content: " ";
    right: 155%;
    color: #FFF;
}

.switch.demo3 label:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    border-radius: inherit;
}

.checkout-w3l {
    display: -webkit-inline-box;
}

.checkout-w3l a {
    color: #fff;
    letter-spacing: 1px;
    font-size: 15px;
    margin-left: 8px;
    vertical-align: bottom;
}

/*-- //button (switch) --*/

/*-- copyright --*/

.footer {
    margin: 6vw .3vw 2vw;
}

.footer h2 {
    font-size: 15px;
    color: #fff;
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.8;
}

.footer h2 a {
    color: #e73c44;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

.footer h2 a:hover {
    color: #fff;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

/*-- //copyright --*/

/*-- responsive --*/

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

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

@media(max-width:900px) {
    .w3ls-social {
        left: 6%;
    }
}

@media(max-width:800px) {
    h1 {
        font-size: 2.6em;
    }
    .sub-main-w3 {
        float: none;
    }
    .w3ls-social {
        position: static;
        margin-top: 5em;
    }
    .w3ls-social h2 {
        left: 241px;
    }
}

@media(max-width:667px) {
    .w3ls-social h2 {
        left: 182px;
    }
}

@media(max-width:600px) {
    .w3ls-social h2 {
        left: 151px;
    }
    .footer h2 {
        letter-spacing: 1px;
    }
}

@media(max-width:480px) {
    h1 {
        font-size: 2.3em;
    }
    .sub-main-w3 form {
        padding: 7.5vw;
    }
    .footer h2 {
        letter-spacing: 1px;
    }
    .w3ls-social h2 {
        left: 91px;
    }
}

@media(max-width:414px) {
    .form-style-agile input[type="text"],
    .form-style-agile input[type="password"] {
        font-size: 13px;
        padding: 13px 15px;
    }
    .wthree-text ul li:nth-child(1),
    .wthree-text ul li:nth-child(2) {
        float: none;
    }
    .wthree-text ul li:nth-child(2) {
        margin-top: 10px;
    }
    .w3ls-social h2 {
        left: 52px;
    }
    .form-style-agile {
        margin-bottom: 1em;
    }
}

@media(max-width:320px) {
    h1 {
        font-size: 1.8em;
    }
    .sub-main-w3 form {
        padding: 25px 14px;
    }
    .w3ls-social h2 {
        left: 10px;
    }
}

/*-- //responsive --*/