/*--
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*/
html,
body {
padding: 0;
margin: 0;
background: #fff;
font-family: 'Barlow', sans-serif;
}
body a {
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;
}
body a:hover {
text-decoration: none;
}
body a:focus,
a:hover {
text-decoration: none;
}
select,
input[type="email"],
input[type="text"],
input[type="tel"],
input[type=password],
input[type="button"],
input[type="submit"],
textarea {
font-family: 'Barlow', sans-serif;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-family: 'Barlow', sans-serif;
letter-spacing: 1px;
}
p {
margin: 0;
padding: 0;
letter-spacing: 1px;
font-family: 'Barlow', sans-serif;
}
ul {
margin: 0;
padding: 0;
}
/*-- //Reset-Code --*/
body {
background:#000;
min-height: 100vh;
}
h1.header-w3ls {
padding: 31px 0px 25px;
font-size:53px;
text-align: center;
text-transform:capitalize;
color:#ffffff;
text-shadow: 2px 3px rgba(0, 0, 0, 0.42);
letter-spacing: 5px;
}
.art-right-w3ls h2 {
font-size: 33px;
font-weight: 600;
margin-bottom: 12px;
color: #000;
}
.art-right-w3ls p {
font-size:14px;
text-align: center;
color: #000;
line-height: 27px;
}
.art-bothside {
width:70%;
margin: 0em auto;
-webkit-box-shadow: -2px 7px 37px 8px rgba(0,0,0,0.52);
-moz-box-shadow: -2px 7px 37px 8px rgba(0,0,0,0.52);
box-shadow: -2px 7px 37px 8px rgba(0,0,0,0.52);
background:#fff;
}
.mid-cls{
   display:-webkit-flex;
    display:-webkit-box;
    display:-moz-flex;
    display:-moz-box;
    display:-ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.art-left-w3ls, .art-right-w3ls {
padding:3em 2em 3em;
}
.art-left-w3ls ,.art-right-w3ls  {
flex-basis:50%;
-webkit-flex-basis:50%;
}
.art-left-w3ls {
text-align: center;
background: #ffffff;
}
.form-left-to-w3l input[type="text"], .form-left-to-w3l input[type="password"], .form-right-w3ls input[type="password"], .form-right-w3ls input[type="email"], .form-right-w3ls input[type="tel"]  {
width: 100%;
color: #000;
outline: none;
font-size: 14px;
padding: 1em 0em;
margin: 0px 0px 20px;
border: none;
border-bottom: 1px solid #000;
-webkit-appearance: none;
display: inline-block;
background: transparent;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
box-sizing: border-box;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #000;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #000;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #000;
}
:-moz-placeholder {
/* Firefox 18- */
color: #000;
}
.btnn {
text-align: left;
}
button[type=submit] {
width:99%;
background:#0dd0ce;
outline: none;
color: #fff;
font-size: 15px;
font-weight: 400;
border: none;
padding:15px 10px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: 0.5s all;
margin: 20px 0px 0px;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
button:hover {
color: #fff;
background: #000;
}
.w3layouts_more-buttn a {
font-size: 16px;
color: #f10000;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
letter-spacing: 2px;
outline: none;
}
.w3layouts_more-buttn a:hover{color:#000;}
.w3layouts_more-buttn h3 {
font-size: 18px;
color: #000;
text-align: center;
margin-top: 21px;
}
.copy {
padding: 39px 0px;
}
.copy p {
margin: 0em;
text-align: center;
font-size: 17px;
color: white;
letter-spacing: 2px;
}
.copy p a {
color:#0dd0ce;
text-decoration: none;
}
.copy p a:hover {	color: #fff;}
/*--responsive--*/
@media(max-width:1920px){
h1.header-w3ls {
font-size: 60px;
}
.art-right-w3ls h2 {
font-size: 40px;
}
}
@media(max-width:1680px){
h1.header-w3ls {
font-size:57px;
}
.art-right-w3ls h2 {

font-size:37px;
}
}
@media(max-width:1600px){
h1.header-w3ls {
font-size: 53px;
}
.art-right-w3ls h2 {
font-size:33px;
}
}
@media(max-width:1440px){
.art-bothside {
width: 70%;
}
h1.header-w3ls {
letter-spacing: 3px;
}
button[type=submit] {
width: 99%;
}
}
@media(max-width:1366px){
.art-left-w3ls, .art-right-w3ls {
padding: 2em 2em 2em;
}
.art-bothside {
width: 73%;
}
h1.header-w3ls {
font-size: 50px;
}
.art-right-w3ls h2 {
font-size: 31px;
}
.form-left-to-w3l input[type="text"], .form-left-to-w3l input[type="password"],
.form-right-w3ls input[type="password"], .form-right-w3ls input[type="email"], .form-right-w3ls input[type="tel"]  {
padding: 0.8em 0em;
margin: 0px 0px 16px;
}
.w3layouts_more-buttn h3 {
font-size: 17px;
margin-top: 18px;
}
}
@media(max-width:1280px){
.art-bothside {
width: 75%;
}
h1.header-w3ls {
font-size: 48px;
}
}
@media(max-width:1080px){
.art-bothside {
width:81%;
}
.art-right-w3ls h2 {
font-size: 28px;
}
button[type=submit] {
padding: 13px 10px;
margin: 16px 0px 0px;
}
}
@media(max-width:1050px){
.art-bothside {
width: 84%;
}
.art-left-w3ls, .art-right-w3ls {
padding: 1.7em 1.5em 1.8em;
}
.w3layouts_more-buttn h3 {
font-size: 16px;
}
}
@media(max-width:1024px){
h1.header-w3ls {
font-size: 45px;
}
.w3layouts_more-buttn a {
font-size: 15px;
letter-spacing: 1px;
}
.copy p {
font-size: 16px;
}
}
@media(max-width:991px){
.art-right-w3ls p {
line-height: 27px;
}
.art-bothside {
width: 86%;
}
.form-left-to-w3l input[type="text"], .form-left-to-w3l input[type="password"],
.form-right-w3ls input[type="password"], .form-right-w3ls input[type="email"], .form-right-w3ls input[type="tel"]  {
margin: 0px 0px 14px;
}
}
@media(max-width:900px){
.art-bothside {
width: 94%;
}
.copy {
padding: 33px 0px;
}
h1.header-w3ls {
letter-spacing: 2px;
}
}
@media(max-width:800px){
h1.header-w3ls {
font-size: 42px;
}
.art-right-w3ls h2 {
font-size: 24px;
}
}
@media(max-width:768px){
.art-bothside {
width: 97%;
}
button[type=submit] {
padding:11px 10px;
width: 99%;
}
}
@media(max-width:767px){
.mid-cls {
flex-direction: column;
-webkit-flex-direction: column;
}
h1.header-w3ls {
font-size: 40px;
}
.art-bothside {
width: 80%;
}
.copy p {
font-size: 15px;
letter-spacing: 1px;
}
.art-right-w3ls h2 {
text-align: center;
margin-bottom: 11px;
}
}
@media(max-width:736px){
.copy {
padding: 30px 0px;
}
}
@media(max-width:667px){
h1.header-w3ls {
font-size: 37px;
letter-spacing: 1px;
}
.form-left-to-w3l input[type="text"], .form-left-to-w3l input[type="password"], .form-right-w3ls input[type="password"], .form-right-w3ls input[type="email"], .form-right-w3ls input[type="tel"]  {
padding: 0.7em 0em;
}
}
@media(max-width:640px){
.art-bothside {
width: 83%;
}
}
@media(max-width:600px){
h1.header-w3ls {
font-size: 33px;
}
}
@media(max-width:568px){
.art-bothside {
width: 85%;
}
button[type=submit] {
font-size: 14px
}
.copy p {
line-height: 31px;
}
}
@media(max-width:480px){
h1.header-w3ls {
padding: 25px 0px 22px;
font-size: 29px;
}
}
@media(max-width:440px){
.art-left-w3ls, .art-right-w3ls {
padding: 1.7em 1.5em 1em;
}
}
@media(max-width:414px){
.art-right-w3ls h2 {
line-height: 34px;
}
.form-left-to-w3l input[type="text"], .form-left-to-w3l input[type="password"],
.form-right-w3ls input[type="password"], .form-right-w3ls input[type="email"], .form-right-w3ls input[type="tel"]  {
margin: 0px 0px 12px;
}
}
@media(max-width:384px){
.form-left-to-w3l input[type="text"], .form-left-to-w3l input[type="password"],
.form-right-w3ls input[type="password"], .form-right-w3ls input[type="email"], .form-right-w3ls input[type="tel"]  {
font-size: 13px;
}
.w3layouts_more-buttn h3 {
font-size: 15px;
}
}
@media(max-width:375px){
.art-left-w3ls, .art-right-w3ls {
padding: 1.5em 1.5em 1em;
}
}
@media(max-width:320px){
button[type=submit] {
margin: 11px 0px 0px;
}
h1.header-w3ls {
font-size: 26px;
}
}
/*--//responsive--*/