/*--
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: 'Montserrat', sans-serif;
}
body a {
font-family: 'Montserrat', 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;
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=password],
input[type="button"],
input[type="submit"],
textarea {
font-family: 'Montserrat', 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: 'Montserrat', sans-serif;
letter-spacing: 1px;
}
p {
margin: 0;
padding: 0;
letter-spacing: 1px;
font-family: 'Montserrat', sans-serif;
}
ul {
margin: 0;
padding: 0;
}
/*-- //Reset-Code --*/
body {
background: url(../images/b2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-height: 100vh;
}
.mid-cls{
margin:0px auto;
width: 28%;
}
.swm-right-w3ls {
background:rgba(255, 255, 255, 0.14);
padding: 3em 2em;
text-align:center;
-webkit-box-shadow:-1px 8px 37px 8px rgba(0, 0, 0, 0.44);
-moz-box-shadow:-1px 8px 37px 8px rgba(0, 0, 0, 0.44);
box-shadow:-1px 8px 37px 8px rgba(0, 0, 0, 0.44);
background: -webkit-linear-gradient(to left, #53e4a8, #8131d8);
background: -ms-linear-gradient(to left, #53e4a8, #8131d8);
background: -moz-linear-gradient(to left, #53e4a8, #8131d8);
background: -o-linear-gradient(to left, #53e4a8, #8131d8);
background:linear-gradient(to left, #53e4a8, #8131d8);
border: 5px solid #fff;
}
h1.header-w3ls {
font-size: 54px;
padding: 46px 0px 53px;
text-align: center;
text-transform: capitalize;
font-weight: 500;
color: #ffffff;
text-shadow: 2px 3px rgba(0, 0, 0, 0.49);
letter-spacing: 2px;
}
.mid-cls h2 {
font-size: 24px;
color: #fff;
font-weight: 500;
margin-bottom: 28px;
}
.form-right-w3ls input[type="password"], .form-left-w3l input[type="email"] {
width: 100%;
color: #000;
outline: none;
font-size: 14px;
padding: 14px 12px;
margin: 0px 0px 23px;
border: none;
border-bottom: 2px solid #000;
-webkit-appearance: none;
display: inline-block;
background:#fff;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-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;
}
button[type=submit] {
width: 40%;
background: #f9f9f9;
outline: none;
color: #000;
font-size: 14px;
border: none;
font-weight: bold;
padding: 13px 6px;
margin-top:20px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
transition: 0.5s all;
-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;
}
.left-side{
position: relative;
display:flex;
}
.left-side a.for ,.span{flex:1;}
.left-side a.for ,.span{
font-size: 13px;
color: #fff;
text-align: center;
display: block;
letter-spacing: 1px;
text-transform: capitalize;
}
.left-side a.for:hover {
color: #33e8ff;
}
input.checked {
/* display: inline-block; */
position: absolute;
top: -1px;
width: 4%;
left: 10px;
cursor: pointer;
}
.copy {
padding: 40px 0px 30px;
}
.copy p {
margin: 0em;
text-align: center;
font-size: 15px;
color: white;
}
.copy p a {
color: #fff;
text-decoration: none;
}
.copy p a:hover {	color:#33e8ff;}
/*--responsive--*/
@media(max-width:1920px){
.swm-right-w3ls {
padding: 4em 2em;
}
h1.header-w3ls {
font-size: 59px;
}
}
@media(max-width:1680px){
h1.header-w3ls {
font-size: 57px;
}
.swm-right-w3ls {
padding:3.5em 2em;
}
}
@media(max-width:1600px){
.swm-right-w3ls {
padding:3em 2em;
}
h1.header-w3ls {
font-size: 54px;
padding: 46px 0px 53px;
letter-spacing: 2px;
}
.mid-cls {
width: 28%;
}
}
@media(max-width:1440px){
h1.header-w3ls {
font-size: 52px;
padding: 43px 0px 50px;
}	
.mid-cls {
width: 31%; 
}
.form-right-w3ls input[type="password"],.form-left-w3l input[type="email"] {
padding: 12px 12px;
}
}
@media(max-width:1366px){
.swm-right-w3ls {
padding: 2.5em 2em;
}
button[type=submit] {
width: 43%;
}
.form-right-w3ls input[type="password"],.form-left-w3l input[type="email"] {
margin: 0px 0px 20px;
}	
}
@media(max-width:1280px){
.mid-cls {
width: 34%;
}
h1.header-w3ls {
font-size: 50px;
padding: 40px 0px 47px;
}	
}
@media(max-width:1080px){
.mid-cls {
width: 37%;
}
.swm-right-w3ls {
padding: 2.3em 1.7em;
}
}
@media(max-width:1050px){
button[type=submit] {
width: 46%;
}
.form-right-w3ls input[type="password"],.form-left-w3l input[type="email"] {
padding: 10px 12px;
}
}
@media(max-width:1024px){
h1.header-w3ls {
font-size: 48px;
}
}
@media(max-width:991px){
.form-right-w3ls input[type="password"], .form-left-w3l input[type="email"] {
margin: 0px 0px 18px;
}
button[type=submit] {
width: 49%;
padding: 11px 6px;
}	
}
@media(max-width:900px){
button[type=submit] {
width: 49%;
}
.mid-cls {
width: 47%;
}
}
@media(max-width:800px){
.mid-cls {
width: 54%;
}
.swm-right-w3ls {
padding: 2em 1.5em;
}
h1.header-w3ls {
font-size: 46px;
padding: 36px 0px 41px;
letter-spacing: 1px;
}	
}
@media(max-width:768px){
.copy {
padding: 36px 0px 30px;
}
.mid-cls h2 {
font-size: 23px;
margin-bottom: 24px;
}	
button[type=submit] {
margin-top: 19px;
}
}
@media(max-width:767px){
h1.header-w3ls {
font-size: 44px;
padding: 36px 0px 37px;
}
}
@media(max-width:736px){
.mid-cls {
width: 57%;
}
.form-right-w3ls input[type="password"], .form-left-w3l input[type="email"] {
margin: 0px 0px 16px;
}
}
@media(max-width:667px){
.mid-cls {
width: 60%;
}	
}
@media(max-width:640px){
.form-right-w3ls input[type="password"], 
.form-left-w3l input[type="email"] {
font-size: 13px;
}
h1.header-w3ls {
font-size: 42px;
padding: 31px 0px 31px;
}
}
@media(max-width:600px){
.mid-cls {
width: 70%;
}
button[type=submit] {
padding: 11px 3px;
}
}
@media(max-width:568px){
.mid-cls h2 {
font-size: 22px;
margin-bottom: 22px;
}	
}
@media(max-width:480px){
.mid-cls {
width: 86%;
}
.swm-right-w3ls {
padding: 1.8em 1.5em;
}
.copy p {
font-size: 14px;
line-height: 28px;
}
}
@media(max-width:440px){
h1.header-w3ls {
font-size: 39px;
padding: 28px 0px 30px;
}	
.left-side {
flex-direction: column;
}
span.span {
margin-bottom: 17px;
}
input.checked {
left: 76px;
}
}
@media(max-width:414px){
h1.header-w3ls {
font-size: 37px;
}
.mid-cls {
width: 90%;
}
}
@media(max-width:384px){
h1.header-w3ls {
font-size: 37px;
padding: 23px 0px 24px;
}
.swm-right-w3ls {
padding: 1.6em 1.2em;
}
span.span {
margin-bottom: 14px;
}
input.checked {
top: 1px;
left: 69px;
}
}
@media(max-width:375px){
input.checked {
left: 65px;
}
.mid-cls h2 {
font-size: 21px;
}
}
@media(max-width:320px){
input.checked {
left: 43px;
}
.copy {
padding: 29px 0px 30px;
}
h1.header-w3ls {
font-size: 35px;
}
}
/*--//responsive--*/