/*--
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,
copyright,
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,
copyright,
header,
hgroup,
menu,
nav,
section {
    display: block;
	font-family: 'Raleway', sans-serif;
}

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 {
    font-size: 100%;
    font-family: 'Raleway', sans-serif;
}

.main-bg {
    background: url(../images/bg2.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 100vh;
}

/* title */
h1 {
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    padding: 1vw 0vw 1vw;
    /*! letter-spacing: 3px; */
    /* text-transform: uppercase;*/
    font-family: 'Raleway', sans-serif!important;
    font-weight: 800!important;
    /*background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);*/
    /* color:#555;*/
    /* font-family:'Roboto';*/
    /*font-weight:300;
  /*font-size:32px;
  padding-top:40vh;*/
    /* height:50vh;**/
    overflow:hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
}

h1 {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

/*h1:first-of-type {    
  animation: slidein 7s infinite;
}*/

/*h1:last-of-type {
  width:0px;
  animation: reveal 12s infinite;
}*/

/*h1:last-of-type span {
  margin-left:-580px;
  animation: slidein 12s infinite;
}*/

/*@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:0;}
    100% {opacity:0;}
}*/

/*@keyframes slidein {
    0% { margin-left:-500px; }
    20% { margin-left:-500px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:0.3;width:255px;}
    30% {width:255px;}
    80% {opacity:1;}
    100% {opacity:1;width:255px;}
}
*/
/* //title */

/* content */
.sub-main-w3 {
    margin: 5.2vw 4vw 1.5vw 5.5vw;

	z-index: 9999999;
}

.bg-content-w3pvt {
    max-width: 356px;
    margin: 0 auto;
    background: #fff;
    text-align: center;
    border-radius: 10px;
	z-index: 9999999;
    box-shadow: 10px #000;
    box-shadow: 2px 5px 16px 2px rgba(16, 16, 16, 0.10);
}

.top-content-style {
    padding: 0.3vw 4vw 3vw;
    background: #4e443c;
    border-radius: 10px 10px 0px 0px;
    z-index: 9999999;
}

.top-content-style img {
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.sub-main-w3 #LoginPanal {
    background: #f2f2f2;
   /* padding: 1em;*/
	padding: 1em 1em 2em 1em;
    -webkit-box-shadow: 2px 5px 16px 2px rgba(16, 16, 16, 0.18);
    -moz-box-shadow: 2px 5px 16px 2px rgba(16, 16, 16, 0.18);
    box-shadow: 2px 5px 16px 2px rgba(16, 16, 16, 0.18);
    margin: -1.8em 2em 1em;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    z-index: 9999999;
}

p.legend {
    color: #4e4d4d;
    font-size: 21px;
    text-align: center;
    margin-bottom: 0em;
}

p.legend span {
    color: #000;
    margin-left: 10px;
}

.input {
    position: relative;
    margin: 20px auto;
    width: 100%
}

.input span {
    position: absolute;
    display: block;
    color: #ef7900;
    left: 10px;
    top: 12px;
    font-size: 16px;
}

.input input {
    width: 90%;
    padding: 10px 10px 13px 14px;
    display: block;
    border:none;
    border: 1px` solid #b5b9bb;
    color: #000;
    box-sizing: border-box;
    font-size: 13px;
    outline: none;
    letter-spacing: 1px;
    background: #fff;
    -webkit-box-shadow: 2px 0px 16px 0px rgba(16, 16, 16, 0.3);
    /*! -moz-box-shadow: 2px 5px 16px 0px rgba(16, 16, 16, 0.18); */
    /*! box-shadow: 2px 5px 16px 0px rgba(16, 16, 16, 0.18); */
    /*! border-radius: 0px 7px 7px 0px; */
	float:right;
}

.submit {
   width: 87px;
    height: 27px;
    display: block;
   /* margin: 1.5em auto 0;*/
	margin: 0em 1.5em 0em 2.2em;
    background: #4e443c;
    /*! -webkit-border-radius: 10px; */
    /*! -o-border-radius: 10px; */
    /*! -ms-border-radius: 10px; */
    /*! -moz-border-radius: 10px; */
    /*! border-radius: 10px; */
    border: none;
    cursor: pointer;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
    font-family: 'Raleway', sans-serif!important;
}

.submit span {
    color: #fff;
    font-size: 14px;
	
}

.submit:hover {
    opacity: .8;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

a.bottom-text-w3ls2 {

    color: #007eb8;
    font-size: 15px;
    display: inline-block;
    margin: 0.5em 1em 0.2em;
    letter-spacing: 0.5px;

}
a.bottom-text-w3ls {color: #007eb8;font-size: 15px;display: inline-block;margin: 0.5em 1em 1.2em;letter-spacing: 0.5px;}

/* //content */

/* copyright */
.copyright {
    margin-top: 1vw;
    padding-bottom: 1.5vw;
}

.copyright h2 {
    font-size: 16px;
    color: #262626;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.8;
	
	
}

.copyright h2 a {
    color: #1cc7d0;
    -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 h2 a:hover {
    opacity:.8;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}
/* switch */

label.switch {
    position: relative;
    display: inline-block;
    height: 20px;
    padding-left: 5.0em;
    cursor: pointer;
    color: #000;
    padding-top: 2px;
}

li:nth-child(2) a,
label.switch {

    text-transform: capitalize;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 3px;
    width: 20%;
    background-color: #777;
    -webkit-transition: .4s;
    transition: .4s;
	border-radius: 50px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 4px;
    bottom: 5px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #007eb8;
}

input:focus+.slider {
    box-shadow: 0 0 1px #007eb8;
}

input:checked+.slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded sliders */

.slider.round:before {
    border-radius: 50%;
}

/* //switch */

/* //copyright */

/* responsive */

@media(max-width:1366px) {
    .top-content-style 
       padding: 3vw 4vw 6vw;
	margin-left:-15px;

}
h1 {
        font-size: 1.4vw;
        font-weight: bold;
    }
	  

@media(max-width:1280px) {
    .top-content-style {
        padding: 1vw 2vw 5vw;
    }
}

@media(max-width:1080px) {
    h1 {
        font-size: 1.9vw;
        font-weight: bold;
    }
}

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

    .top-content-style {
        padding: 2.5vw 4vw 6vw;
    }
}

@media(max-width:800px) {
    h1 {
        font-size: 3vw;
        padding: 2.5vw 1vw 3vw;
    }

    .top-content-style {
        padding: 4vw 4vw 9vw;
    }

    .copyright {
        margin-top: 3em;
        padding-bottom: 1.5em;
    }
}

@media(max-width:640px) {
    h1 {
        font-size: 4vw;
        padding: 3vw 1vw 4vw;
    }
}

@media(max-width:600px) {
    .copyright h2 {
        letter-spacing: 1px;
    }
}

@media(max-width:480px) {
		
 
    h1 {
        font-size: 1.2em;
        letter-spacing: 1px;
    }

    .top-content-style {
        padding: 2em 1em 4em;
    }

    .copyright h2 {
        font-size: 15px;
    }

    .copyright {
        margin-top: 2em;
        padding-bottom: 1em;
    }

    p.legend {
        font-size: 23px;
    }

    a.bottom-text-w3ls {
        font-size: 15px;
    }
}

@media(max-width:384px) {
	.input input {
	width: 88%!important;}
	

.loginlabel {

	width: 12%!important;
	}
	
  
   h1 {
        font-size: 1em;
    }
  
	.submit {

    margin: 0em 0.8em 0em 1.8em;
    
}

	
}

@media(max-width:320px) {
	

	
	.input input {
	width: 88%!important;}
	

.loginlabel {

	width: 12%!important;
	}
	

	.submit {

   margin: 0em 1.5em 0em 1.2em;
    
}
    h1 {
        font-size: 1em;
    }

    .sub-main-w3 #LoginPanal {
        margin: -2em 1em 1.5em;
       /* padding: 1.5em;*/
    }

    .top-content-style {
        padding: 1.5em 1em 3em;
    }

    .copyright h2 {
        font-size: 14px;
    }
}
.message-error, .field-validation-error, .username-not-available-status, .poll-vote-error, .password-error {
    display: block;
    font-size: 13px;
    color: #e87772 !important;
    text-align: center;
    padding: 5px 0;
}

.required {
    margin: 0 -6px 0 0; /*siblings offset fix*/
    font-size: 11px;
    color: #c00;
    vertical-align: middle;
}

.loginlabel{
	width: 10%;
padding: 7px 10px 13px 6px;
display: block;
border: none;
border: 1px solid #efefef;
color: #fff;
box-sizing: border-box;
font-size: 13px;
outline: none;
letter-spacing: 1px;
background: #4e443c;
/*! -webkit-box-shadow: 2px 0px 16px 0px rgba(16, 16, 16, 0.18); */
-moz-box-shadow: 2px 0px 16px 2px rgba(16, 16, 16, 0.18);
/*! box-shadow: 2px 0px 16px 2px rgba(16, 16, 16, 0.18); */
/*! border-radius: 7px 0px 0px 7px; */
	
	font-size: 16px;
}

/* //responsive */