/*
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%;
  padding-bottom: 1em;
}

/*--end reset--*/

body {
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 100%;
  background: url(../images/banner.jpg)no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  text-align: center;
  min-height: 100vh;
}

h1 {
  font-size: 2.9em;
  text-transform: capitalize;
  color: #fff;
  letter-spacing: 3px;
  margin: 0.8em 1vw 1.2em;
  font-family: 'Ubuntu Condensed', sans-serif;
}

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

@media(max-width:480px) {
  h1 {
    font-size: 2.5em;
  }
}

@media(max-width:440px) {
  h1 {
    font-size: 2.1em;
  }
}

@media(max-width:320px) {
  h1 {
    font-size: 1.8em;
  }
}

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

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

.subscribe-form {
  max-width: 500px;
  margin: 2vw 5vw;
  padding: 5vw;
  border-width: 5px 0;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.34);
  /* -webkit-box-shadow: 0px 6px 11px 1px rgba(0, 0, 0, 0.17); */
  -moz-box-shadow: 0px 6px 11px 1px rgba(0, 0, 0, 0.17);
  box-shadow: 3px 1px 3px 0px rgb(0, 0, 0);
}

p.subcsribe-text {
  color: #fff;
  letter-spacing: 2px;
  font-size: 1.3em;
}

.subscribe-form div {
  position: relative;
}

.subscribe-form input {
  border: none;
  width: 88%;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 16px;
  line-height: 32px;
  padding: 5px 20px;
  margin-bottom: 20px;
  outline: none;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  letter-spacing: 1px;
  box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.51);
}

.btn:hover,
.btn:focus {
  background-color: #FF5722;
  color: #fff;
  text-decoration: none;
}

.subscribe-form .btn {
  font-size: 19px;
  line-height: 45px;
  border: none;
  width: 100%;
  font-weight: 100;
  outline: none;
  border-radius: 25px;
  cursor: pointer;
  background: #000;
  font-family: 'Ubuntu Condensed', sans-serif;
  color: #fff;
  letter-spacing: 1px;
  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;
  background: #FF5722;
}

.subscribe-form .btn:hover {
  background-color: #000;
}

.subscribe-form label {
  color: #000;
  position: absolute;
  top: 12px;
  left: 20px;
  letter-spacing: 1px;
  -webkit-transition: 0.28s;
  transition: 0.28s;
}

.subscribe-form label span {
  color: #ffba00;
}

.subscribe-form input:focus+label {
  left: -62px;
  font-size: 13px;
  color: #fff;
}

.subscribe-form input:valid {
  border: 1px solid #161613;
}

.subscribe-form input:valid+label {
  left: -62px;
  font-size: 12px;
  color: #fff;
}

.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) {
  border: 1px solid #d3362a;
}

.subscribe-form input:invalid:not(:focus):not(:placeholder-shown)+label {
  left: -62px;
  font-size: 12px;
  color: #fff;
}

@media only screen and (max-width: 480px) {
  .subscribe_window {
    top: 5%;
    margin-top: 0;
  }
  .subscribe_window .subcsribe-text {
    padding: 0;
  }
  .subscribe-form input:focus+label {
    left: 20px;
    top: -18px;
  }
  .subscribe-form input:valid+label {
    left: 20px;
    top: -18px;
  }
  .subscribe-form input:invalid:not(:focus):not(:placeholder-shown)+label {
    left: 20px;
    top: -18px;
  }
}

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

/* copyright */

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

.copy-wthree p {
  color: #fff;
  font-size: 16px;
  letter-spacing: 1.5px;
}

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

/* copyright */

@media(max-width:667px) {
  .agile-field-txt {
    margin-bottom: 1em;
  }
}

@media(max-width:640px) {
  .agile-field-txt {
    margin-bottom: 0em;
  }
}

@media(max-width:480px) {
  .copy-wthree p {
    font-size: 14px;
    padding: 0 1em 1em;
    line-height: 2;
  }
}

@media(max-width:414px) {
  h1 {
    letter-spacing: 2px;
  }
  p.subcsribe-text {
    letter-spacing: 1px;
    font-size: 1.2em;
    line-height: 2;
  }
}

@media(max-width:320px) {
  h1 {
    letter-spacing: 1px;
    font-size: 1.7em;
  }
  p.subcsribe-text {
    line-height: 1.5;
  }
  p.subcsribe-text {
    font-size: 1.1em;
  }
}