/*--
Author: W3layouts
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 */

.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(Night-Street-View_F_00000.jpg) no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-attachment: fixed;
    background-position: center;
    font-size: 100%;
    font-family: 'Roboto Condensed', sans-serif;
}

/*-- title --*/

h1 {
    font-size: 3.5em;
    color: #fff;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 2px 1px 4px rgba(19, 19, 19, 0.52);
    font-style: italic;
    margin: 3vw 1vw;
}

h1 span {
    color: #ff580d;
}

/*-- //title --*/

/*-- content --*/

.sub-main-w3 {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    float: right;
    position: relative;
}

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

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

.form-style-agile input[type="text"],
.form-style-agile input[type="password"] {
    width: 100%;
    color: #000;
    outline: none;
    font-size: 8px;
    letter-spacing: 1px;
    padding: 11px 11px;
    box-sizing: border-box;
    border: none;
    background: #fff;
}

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

.sub-main-w3 input[type="submit"]:hover {
    background: linear-gradient(to right, #186878, #97bcc4);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-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;
}

.wthree-text ul li a:hover {
    color: #ff580d;
}

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

img {
    position: absolute;
    /*top: -64px;*/
}

h2 {
    color: #fff;
    font-size: 30px;
    letter-spacing: 2px;
    margin: 22px 0 40px;
    border-bottom: 1px dotted #fff;
    padding-bottom: 8px;
}

/*-- //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: #ff580d;
    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 p {
    font-size: 17px;
    color: #fff;
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.8;
}

.footer p a {
    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;
}

.footer p a:hover {
    color: #f00f50;
    -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: 4vw;
    }
}

@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 p {
        letter-spacing: 1px;
    }
}

@media(max-width:480px) {
    h1 {
        font-size: 2.3em;
    }
    .sub-main-w3 form {
        padding: 7.5vw;
    }
    .footer p {
        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 --*/