/* 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(../images/rayat.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;

}



/*body {

	 

	background: url(../images/rayat.jpg);

	

  	height: 100vh;



  

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}*/



h1.header-grids {

	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-grids {

	margin: 1em;

	flex-basis: 40%;

	-webkit-flex-basis: 40%;

	box-sizing: border-box;

	border: 8px solid #eaeaea;

    border-radius: 20px 200px;

    background-image: linear-gradient(120deg, #84fab0b0 0%, #8fd3f4bd 100%);

}



.art-left-grids {

	flex-basis: 40%;

	-webkit-flex-basis: 40%;

	box-sizing: border-box;

    min-height: 100vh;

	background: #00a1ff;

	box-sizing: border-box;

}



.form-left-to-mids select,

.form-left-to-mids input[type="email"],

.form-left-to-mids input[type="password"],

.form-left-to-mids input[type="number"],

.form-left-to-mids input[type="text"] {

	width: 100%;

	color: #000;

	outline: none;

	border: none;

	/*border-bottom: #00a1ff 2px solid;*/

	border-bottom: #101d3f  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-grids h2 {

	font-weight: 500;

	color: #ffffff;

}



button[type=submit] {

	/*background: #00a1ff;*/

	background: #fe5733;

	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;

}



.lay_more-buttn h3 {

	font-size: 18px;

	color: #fff;

	margin-top: 35px;

	font-weight: 500;

}



.lay_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-tree-footer {

	position: absolute;

	bottom: 52px;

	width: 100%;

}



.bottem-tree-footer p {

	text-align: center;

	font-size: 14px;

	color: #fff;

	letter-spacing: 2px;

}



.bottem-tree-footer p a {

	color: #ff5e00;

	font-size: 14px;

}



.bottem-tree-footer p a:hover {

	color: #fff;

}





/*--responsive--*/



@media(max-width:1920px) {

	.form-left-to-mids select,

	.form-left-to-mids input[type="email"],

	.form-left-to-mids input[type="password"],

	.form-left-to-mids input[type="text"] {

		font-size: 16px;

		padding: 1em 1em;

		margin: 0px 0px 30px;

	}

	.art-right-grids {

		padding: 19em 24em 8em 4em;

	}

	.art-left-grids {

		padding: 23em 5em 36em;

	}

	.art-right-grids h2 {

		font-size: 30px;

		margin-bottom: 48px;

	}

	h1.header-grids {

		font-size: 55px;

		letter-spacing: 3px;

	}

}



@media(max-width:1680px) {

	h1.header-grids {

		font-size: 53px;

	}

	.art-right-grids h2 {

		font-size: 28px;

	}

	.form-left-to-mids select,

	.form-left-to-mids input[type="email"],

	.form-left-to-mids input[type="password"],

	.form-left-to-mids input[type="text"] {

		font-size: 15px;

		margin: 0px 0px 26px;

	}

}



@media(max-width:1600px) {

	.art-right-grids {

		padding: 12em 24em 8em 4em;

	}

	.art-left-grids {

		padding: 20em 5em 21em;

	}

	h1.header-grids {

		font-size: 50px;

		letter-spacing: 3px;

		line-height: 66px;

	}

	.form-left-to-mids select,

	.form-left-to-mids input[type="email"],

	.form-left-to-mids input[type="password"],

	.form-left-to-mids input[type="number"],

	.form-left-to-mids input[type="text"] {

		font-size: 14px;

		padding: .8em 1em;

		margin: 0px 0px 25px;

	}

	.margin-zero input[type="password"] {

		margin: 0px !important;

	}

	.art-right-grids h2 {

		font-size: 28px;

		margin-bottom: 47px;

	}

	.form-left-to-mids select {

		font-size: 14px;

		padding: .8em 1em;

		margin: 0px 0px 25px;

	}

}



@media(max-width:1440px) {

	.art-left-grids {

		padding: 10em 5em 14em;

	}

	.art-right-grids {

		/*padding: 6em 10em 8em 4em;*/

		/*padding: 2em 15em 3em 10em;*/

		padding: 0em 4em 0em 6em;
		/*margin-top:5.5em;

	}

	h1.header-grids {

		font-size: 48px;

	}

	.art-right-grids h2 {

		font-size: 26px;

		margin-bottom: 15px;

	}



	/*.bgLogIn{

	margin: 3em 44em 0 3em;

	}*/

}



@media(max-width:1366px) {

	button[type=submit] {

		margin: 10px 5px 12.5px 40px;

	}

	.lay_more-buttn h3 {

		font-size: 17px;

		margin-top: 20px;

	}

	.popup {

		margin: 8em auto;

	}

}



@media(max-width:1280px) {

	.art-left-grids {

		padding: 11em 3em 30.7em;

	}

	.art-left-grids {

		padding: 10em 3em 19.2em;

	}

	h1.header-grids {

		font-size: 46px;

		letter-spacing: 2px;

	}

}



@media(max-width:1080px) {

	.art-left-grids {

		order: 1;

		padding: 1.5em 3em 1.5em;

		text-align: center;

		min-height: 0vh;

	}

	.mid-class {

		flex-direction: column;

	}

	.art-right-grids {

		order: 2;

		padding: 2em 27em 2em 3em;

	}

	button[type=submit] {

		margin: 46px 0px 0px;

	}

	.art-right-grids h2 {

		font-size: 24px;

		margin-bottom: 41px;

	}

	.bottem-tree-footer {

		bottom: 30px;

	}

}



@media(max-width:1050px) {

	h1.header-grids {

		font-size: 44px;

	}

	.lay_more-buttn h3 {

		font-size: 16px;

		margin-top: 31px;

	}

}



@media(max-width:1024px) {

	.art-right-grids {

		padding: 3em 27em 6em 4em;

	}

	.popup {

		margin: 3em auto;

	}

	.form-left-to-mids select,

	.form-left-to-mids input[type="email"],

	.form-left-to-mids input[type="password"],

	.form-left-to-mids input[type="text"] {

		padding: .7em .9em;

		margin: 0px 0px 22px;

	}

}



@media(max-width:991px) {

	h1.header-grids {

		font-size: 41px;

		line-height: 63px;

	}

	button[type=submit] {

		margin: 42px 0px 0px;

	}

}



@media(max-width:900px) {

	.form-left-to-mids select,

	.form-left-to-mids input[type="email"],

	.form-left-to-mids input[type="password"],

	.form-left-to-mids input[type="text"] {

		padding: .7em .7em;

	}

	.art-right-grids h2 {

		margin-bottom: 36px;

	}

}



@media(max-width:800px) {

	.art-right-grids {

		padding: 3em 19em 6em 4em;

	}

	h1.header-grids {

		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-grids {

		font-size: 37px;

	}

}



@media(max-width:736px) {

	.form-left-to-mids input[type="email"],

	.form-left-to-mids input[type="password"],

	.form-left-to-mids input[type="text"] {

		margin: 0px 0px 20px;

	}

	.bottem-tree-footer p {

		letter-spacing: 1px;

	}

}



@media(max-width:667px) {

	.art-right-grids {

		padding: 3em 13em 6em 3em;

	}

	.art-left-grids {

		padding: 1.2em 3em 1.2em;

	}

}



@media(max-width:640px) {

	h1.header-grids {

		font-size: 35px;

	}

	.lay_more-buttn h3 {

		margin-top: 25px;

	}

}



@media(max-width:600px) {

	.art-right-grids {

		padding: 3em 11em 6em 3em;

	}

	.art-right-grids h2 {

		font-size: 23px;

	}

}



@media(max-width:568px) {

	.form-left-to-mids input[type="email"],

	.form-left-to-mids input[type="password"],

	.form-left-to-mids input[type="text"] {

		margin: 0px 0px 17px;

	}

}



@media(max-width:480px) {

	.bottem-tree-footer p {

		line-height: 28px;

		padding: 0px 10px;

	}

	.art-left-grids {

		padding: 1.2em 1em 1.2em;

	}

	.art-right-grids {

		padding: 2.5em 6em 5em 3em;

	}

	button[type=submit] {

		margin: 37px 0px 0px;

	}

	.popup {

		max-width: 350px;

	}

	h1.header-grids {

		line-height: 54px;

	}

}



@media(max-width:440px) {

	h1.header-grids {

		font-size: 32px;

	}

	.art-right-grids h2 {

		margin-bottom: 31px;

	}

}



@media(max-width:414px) {

	.art-right-grids {

		padding: 2em 4em 2em 2em;

	}

	h1.header-grids {

		line-height: 41px;

		font-size: 30px;

	}

	.popup {

		max-width: 296px;

	}

}



@media(max-width:384px) {

	h1.header-grids {

		line-height: 46px;

		font-size: 28px;

	}

	.popup {

		max-width: 267px;

	}

}



@media(max-width:375px) {

	.art-right-grids h2 {

		font-size: 21px;

	}

}



@media(max-width:320px) {

	h1.header-grids {

		line-height: 42px;

	}

	.art-right-grids {

		padding: 2.5em 2em 4em 1em;

	}

	.popup {

		max-width: 239px;

		padding: 3em 1.5em;

	}





}



/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {

   .art-right-grids {

    	padding: 2.5em 4em 4em 2em;

    	border-radius: 10px 110px;

    	margin: 1em;

	}

}



/*--//responsive--*/



.bgLogIn{

	margin: 3em 44em 0 3em;

	background-image: linear-gradient(120deg, #84fab0b0 0%, #8fd3f4bd 100%);

	border: 8px solid #eaeaea;

    border-radius: 33px 184px;

}