/*--
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%;
	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: 'Source Sans Pro', 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=password],
input[type="button"],
input[type="submit"],
textarea {
	font-family: 'Source Sans Pro', 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: 'Source Sans Pro', sans-serif;
	letter-spacing: 1px;
}

p {
	margin: 0;
	padding: 0;
	letter-spacing: 1px;
	font-family: 'Source Sans Pro', sans-serif;
}

ul {
	margin: 0;
	padding: 0;
}


/*-- //Reset-Code --*/


/*--background --*/

body {
	/* position: relative;*/
	background: url(../img/bg-login.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	box-sizing: border-box;
	min-height: 100vh;
}

h1.header-cwp {
	text-transform: capitalize;
	color: #ffffff;
	text-shadow: 2px 3px rgba(0, 0, 0, 0.42);
}

.mid-class {
	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-right-cwp {
	flex-basis: 60%;
	-webkit-flex-basis: 60%;
	box-sizing: border-box;
}

.art-left-cwp {
	flex-basis: 40%;
	-webkit-flex-basis: 40%;
	box-sizing: border-box;
	min-height: 100vh;
	background: #000000;
	box-sizing: border-box;
}

.form-left-to-cwp input[type="email"],
.form-left-to-cwp input[type="password"],
.form-left-to-cwp input[type="text"] {
	width: 100%;
	color: #333333;
	outline: none;
	border: none;
	border-bottom: #000 2px solid;
	-webkit-appearance: none;
	background: #ffffff96;
	-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;
}

.art-right-cwp h2 {
	font-weight: 500;
	color: #ffffff;
}

button[type=submit] {
	background: #000;
	outline: none;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	border: none;
	padding: 11px 20px;
	letter-spacing: 1px;
	text-transform: capitalize;
	cursor: pointer;
	transition: 0.5s all;
	margin: 56px 0px 0px;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-ms-transition: 0.5s all;
}

button[type=submit]:hover {
	opacity: 0.8;
}

.remenber-me,
a.for {
	font-size: 14px;
	color: #fff;
	letter-spacing: 1px;
	text-transform: capitalize;
}

.remenber-me {
	padding-left: 22px;
}

.left-side-forget {
	float: left;
	position: relative;
}

.right-side-forget {
	float: right;
}

input.checked {
	display: inline-block;
	position: absolute;
	top: 5px;
	margin: 0px;
	cursor: pointer;
}

.w3layouts_more-buttn h3 {
	font-size: 18px;
	color: #fff;
	margin-top: 35px;
	font-weight: 500;
}

.w3layouts_more-buttn a {
	font-size: 14px;
	color: #ffffff;
	font-weight: 500;
	text-decoration: none;
	text-transform: capitalize;
	display: inline-block;
	letter-spacing: 2px;
	outline: none;
}


/*--//background --*/


/* popup */

.popup-effect {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(152, 152, 152, 0.7);
	transition: opacity 0ms;
	visibility: hidden;
	opacity: 0;
	z-index: 99;
}

.popup-effect:target {
	visibility: visible;
	opacity: 1;
}

.popup {
	background: #eaeaeabf;
	border-radius: 4px;
	max-width: 430px;
	position: relative;
	margin: 11em auto;
	padding: 3em 2em;
	z-index: 999;
	text-align: center;
}

.popup .close {
	position: absolute;
	top: 5px;
	right: 15px;
	transition: all 200ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}

.popup .close:hover {
	color: #686de0;
}


/* //popup */

.bottem-wthree-footer {
	position: absolute;
	bottom: 52px;
	width: 100%;
}

.bottem-wthree-footer p {
	text-align: center;
	font-size: 14px;
	color: #fff;
	letter-spacing: 2px;
}

.bottem-wthree-footer p a {
	color: #18A689;
	font-size: 14px;
}

.bottem-wthree-footer p a:hover {
	color: #fff;
}


/*--responsive--*/

@media(max-width:1920px) {
	.form-left-to-cwp input[type="email"],
	.form-left-to-cwp input[type="password"],
	.form-left-to-cwp input[type="text"] {
		font-size: 16px;
		padding: 1em 1em;
		margin: 0px 0px 30px;
	}
	.art-right-cwp {
		padding: 10em 4em 4em 4em;
	}
	.art-left-cwp {
		padding: 23em 5em 36em;
	}
	.art-right-cwp h2 {
		font-size: 30px;
		margin-bottom: 48px;
	}
	h1.header-cwp {
		font-size: 55px;
		letter-spacing: 3px;
	}
}

@media(max-width:1680px) {
	h1.header-cwp {
		font-size: 53px;
	}
	.art-right-cwp h2 {
		font-size: 28px;
	}
	.form-left-to-cwp input[type="email"],
	.form-left-to-cwp input[type="password"],
	.form-left-to-cwp input[type="text"] {
		font-size: 15px;
		margin: 0px 0px 26px;
	}
}

@media(max-width:1600px) {
	.art-right-cwp {
		padding: 10em 7em 4em 4em;
	}
	.art-left-cwp {
		padding: 20em 5em 21em;
	}
	h1.header-cwp {
		font-size: 50px;
		letter-spacing: 3px;
		line-height: 66px;
	}
	.form-left-to-cwp input[type="email"],
	.form-left-to-cwp input[type="password"],
	.form-left-to-cwp input[type="text"] {
		font-size: 14px;
		padding: .8em 1em;
		margin: 0px 0px 25px;
	}
	.margin-zero input[type="password"] {
		margin: 0px !important;
	}
	.art-right-cwp h2 {
		font-size: 28px;
		margin-bottom: 47px;
	}
}

@media(max-width:1440px) {
	.art-left-cwp {
		padding: 10em 5em 14em;
	}
	.art-right-cwp {
		padding: 6em 21em 8em 4em;
	}
	h1.header-cwp {
		font-size: 48px;
	}
	.art-right-cwp h2 {
		font-size: 26px;
		margin-bottom: 45px;
	}
}

@media(max-width:1366px) {
	button[type=submit] {
		margin: 50px 0px 0px;
	}
	.w3layouts_more-buttn h3 {
		font-size: 17px;
		margin-top: 33px;
	}
	.popup {
		margin: 8em auto;
	}
}

@media(max-width:1280px) {
	.art-left-cwp {
		padding: 11em 3em 30.7em;
	}
	.art-left-cwp {
		padding: 10em 3em 19.2em;
	}
	h1.header-cwp {
		font-size: 46px;
		letter-spacing: 2px;
	}
}

@media(max-width:1080px) {
	.art-left-cwp {
		order: 1;
		padding: 1.5em 3em 1.5em;
		text-align: center;
		min-height: 0vh;
	}
	.mid-class {
		flex-direction: column;
	}
	.art-right-cwp {
		order: 2;
		padding: 2em 27em 2em 3em;
	}
	button[type=submit] {
		margin: 46px 0px 0px;
	}
	.art-right-cwp h2 {
		font-size: 24px;
		margin-bottom: 41px;
	}
	.bottem-wthree-footer {
		bottom: 30px;
	}
}

@media(max-width:1050px) {
	h1.header-cwp {
		font-size: 44px;
	}
	.w3layouts_more-buttn h3 {
		font-size: 16px;
		margin-top: 31px;
	}
}

@media(max-width:1024px) {
	.art-right-cwp {
		padding: 3em 27em 6em 4em;
	}
	.popup {
		margin: 3em auto;
	}
	.form-left-to-cwp input[type="email"],
	.form-left-to-cwp input[type="password"],
	.form-left-to-cwp input[type="text"] {
		padding: .7em .9em;
		margin: 0px 0px 22px;
	}
}

@media(max-width:991px) {
	h1.header-cwp {
		font-size: 41px;
		line-height: 63px;
	}
	button[type=submit] {
		margin: 42px 0px 0px;
	}
}

@media(max-width:900px) {
	.form-left-to-cwp input[type="email"],
	.form-left-to-cwp input[type="password"],
	.form-left-to-cwp input[type="text"] {
		padding: .7em .7em;
	}
	.art-right-cwp h2 {
		margin-bottom: 36px;
	}
}

@media(max-width:800px) {
	.art-right-cwp {
		padding: 3em 19em 6em 4em;
	}
	h1.header-cwp {
		font-size: 39px;
		line-height: 63px;
		letter-spacing: 1px;
	}
}

@media(max-width:768px) {
	.w3layouts_more-buttn h3 {
		font-size: 15px;
		margin-top: 28px;
	}
}

@media(max-width:767px) {
	button[type=submit] {
		padding: 10px 18px;
	}
	h1.header-cwp {
		font-size: 37px;
	}
}

@media(max-width:736px) {
	.form-left-to-cwp input[type="email"],
	.form-left-to-cwp input[type="password"],
	.form-left-to-cwp input[type="text"] {
		margin: 0px 0px 20px;
	}
	.bottem-wthree-footer p {
		letter-spacing: 1px;
	}
}

@media(max-width:667px) {
	.art-right-cwp {
		padding: 3em 13em 6em 3em;
	}
	.art-left-cwp {
		padding: 1.2em 3em 1.2em;
	}
}

@media(max-width:640px) {
	h1.header-cwp {
		font-size: 35px;
	}
	.w3layouts_more-buttn h3 {
		margin-top: 25px;
	}
}

@media(max-width:600px) {
	.art-right-cwp {
		padding: 3em 11em 6em 3em;
	}
	.art-right-cwp h2 {
		font-size: 23px;
	}
}

@media(max-width:768px) {
	.art-right-cwp {
	padding: 3.5em 1.9em 4em 2em !important;
	}
}
@media(max-width:1024px) {
	.art-right-cwp {
		padding: 10em 27em 6em 4em;
	}
}
@media(max-width:1080px) {
	.art-right-cwp {
		padding: 12em 27em 6em 4em;
	}
}
@media(min-width: 800px){
.overlay { 
max-width: 36vw !important;
right: 0;
padding: 12.5em 3em 1.5em !important; 
}
}
@media(min-width: 1024px){
.overlay { 
max-width: 32vw !important;
right: 0;
padding: 12.5em 3em 1.5em !important; 
}
}
@media(min-width: 1080px){
.overlay { 
max-width: 30vw !important;
right: 0;
padding: 12.5em 3em 1.5em !important;
}
}
@media(min-width: 1280px){
.overlay { 
max-width: 43vw !important;
right: 0;
padding: 9.5em 3em 1.5em !important; 
}
}
@media(min-width: 1900px){
.overlay { 
max-width: 40vw !important;
right: 0;
padding: 18.5em 3em 1.5em !important; 
}
}
@media(min-width: 768px) and (max-width: 1360px){
p { 
font-size:14px;
}
}
@media(min-width: 1600px){
p { 
font-size: 22px !important;
}
}
@media(min-width: 1920px){
p { 
font-size: 16px !important;
}
}
@media(min-width: 768px) and (max-width: 1360px){
.bottem-wthree-footer p {
	text-align: center;
	font-size: 14px;
}
}
@media(min-width: 1600px){
.bottem-wthree-footer p {
	text-align: center;
	font-size: 16px !important;
}
}
@media(min-width: 1920px){
.bottem-wthree-footer p {
	text-align: center;
	font-size: 16px !important;
}
}
@media(min-width: 768px) and (max-width: 1360px){
.bottem-wthree-footer p a {
	text-align: center;
	font-size: 14px;
}
}
@media(min-width: 1600px){
.bottem-wthree-footer p a {
	text-align: center;
	font-size: 22px !important;
}
}
@media(min-width: 1920px){
.bottem-wthree-footer p a {
	text-align: center;
	font-size: 16px !important;
}
}
@media(min-width: 768px) and (max-width: 1360px){
span {
	text-align: center;
	font-size: 14px;
}
}
@media(min-width: 1920px){
span {
	text-align: center;
	font-size: 16px !important;
}
}
@media(min-width: 1600px){
span {
	text-align: center;
	font-size: 22px !important;
}
}
@media(min-width: 768px) and (max-width: 1360px){
.remenber-me {
	text-align: center;
	font-size: 14px;
}
}
@media(min-width: 1920px){
.remenber-me {
	text-align: center;
	font-size: 16px !important;
}
}
@media(min-width: 1600px){
.remenber-me {
	text-align: center;
	font-size: 16px !important;
}
}
@media(min-width: 768px) and (max-width: 1360px){
.right-side-forget {
	font-size: 14px;
}
}
@media(min-width: 1920px){
.right-side-forget {
	font-size: 16px !important;
}
}
@media(min-width: 1600px){
.right-side-forget {
	font-size: 16px !important;
}
}
@media(min-width: 768px) and (max-width: 1360px){
.form-left-to-cwp input[type="email"], .form-left-to-cwp input[type="password"], .form-left-to-cwp input[type="text"] {
 font-size:14px !important;	
  }
}
@media (min-width: 1600px){
.form-left-to-cwp input[type="email"], .form-left-to-cwp input[type="password"], .form-left-to-cwp input[type="text"] {
 font-size:16px !important;	
  }
}		
@media (min-width: 1920px){
.form-left-to-cwp input[type="email"], .form-left-to-cwp input[type="password"], .form-left-to-cwp input[type="text"] {
 font-size:16px !important;	
  }
}
@media(min-width: 768px) and (max-width: 1360px){
select.form-control:not([size]):not([multiple]) {
 font-size:14px !important;	
  }
}
@media (min-width: 1600px){
select.form-control:not([size]):not([multiple]) {
 font-size:15px !important;	
  }
}
@media (min-width: 1920px){
select.form-control:not([size]):not([multiple]) {
 font-size:15px !important;	
  }
}		
@media(max-width:568px) {
	.form-left-to-cwp input[type="email"],
	.form-left-to-cwp input[type="password"],
	.form-left-to-cwp input[type="text"] {
		margin: 0px 0px 17px;
	}
}

@media(max-width:480px) {
	.bottem-wthree-footer p {
		line-height: 28px;
		padding: 0px 10px;
	}
	.art-left-cwp {
		padding: 1.2em 1em 1.2em;
	}
	.art-right-cwp {
		padding: 2.5em 6em 5em 3em;
	}
	button[type=submit] {
		margin: 37px 0px 0px;
	}
	.popup {
		max-width: 350px;
	}
	h1.header-cwp {
		line-height: 54px;
	}
}

@media(max-width:440px) {
	h1.header-cwp {
		font-size: 32px;
	}
	.art-right-cwp h2 {
		margin-bottom: 31px;
	}
}

@media(max-width:414px) {
	.art-right-cwp {
		padding: 2.5em 4em 4em 2em;
	}
	h1.header-cwp {
		line-height: 41px;
		font-size: 30px;
	}
	.popup {
		max-width: 296px;
	}
}

@media(max-width:384px) {
	h1.header-cwp {
		line-height: 46px;
		font-size: 28px;
	}
	.popup {
		max-width: 267px;
	}
}

@media(max-width:375px) {
	.art-right-cwp h2 {
		font-size: 21px;
	}
}

@media(max-width:320px) {
	h1.header-cwp {
		line-height: 42px;
	}
	.art-right-cwp {
		padding: 2.5em 2em 4em 1em;
	}
	.popup {
		max-width: 239px;
		padding: 3em 1.5em;
	}
}
.btn-primary {
  color: #fff;
  background-color: #1ab394;
  border-color: #1ab394;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background-color: #18a689;
  border-color: #18a689;
  color: #FFFFFF;
}
button.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000044;
	padding: 10px 20px;
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffffff),
		color-stop(0.50, #ffffff),
		to(#d6d6d6));
	background: linear-gradient(
		top,
		#ffffff 0%,
		#ffffff 50%,
		#d6d6d6);
	border-radius: 10px;
	border: 3px solid #ba1818;
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.1),
		0px 1px 0px rgba(255,255,255,1);
}
.overlay {
position: absolute;
top: 0px;
/* left: 750px; alterado para rigth e max-width */
list-style: none;
height: 100vh;
clear: left;
max-width: 42vw;
right: 0;
}
.f5h-text{
color:#343A3F;
}
textarea:focus, input:focus, select:focus {
    box-shadow: 0 0 0 0;
    outline: 0;
} 	
/*Esconde a div de classe Overlay caso seja identificado que o width Mobile maximo deseja igual ou menor que 768px*/
@media only screen and (max-width: 768px){
.overlay { 
display: none; 
}
}
/*--//responsive--*/