html {

}

body {
	background-color: transparent;
	background-image: url(loginkep1.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	min-height: 800px;
}

#ayuk {
	background-color: transparent;
	min-height: 600px;
	padding-top: 2rem;
	padding-bottom: 2rem;
	
}

.container .login {
	min-height: 500px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 15px;
}

h3 {
	padding-top: 25%;
}

h2 {
	letter-spacing: 0rem;
}

p {
	letter-spacing: 0.2rem;
	color: white;
	
}

img {
	
}

#footer {
	background-color: transparent;
	min-height: 100px;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

span {
	background-color: #d9be18;
}


/*Extra small devices (portrait phones, less than 320px) JioPhone 2*/
@media (min-width: 240px) and (max-width: 319.98px) {
	body {
		background-size: 110%;
	}

	h3 {
	padding-top: 0;
	font-size: 1.5rem;
	}

	.display-4 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
	}

}

/*Extra small devices (portrait phones, 320px and up) Nokia Lumia, Iphone 4*/
@media (min-width: 319.98px) and (max-width: 359.98px) {
	body {
		background-size: 100%;
	}

	h3 {
	padding-top: 0;
	}

	.display-4 {
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.2;
	}
}

/*small devices (portrait phones, 360px and up) BB z30, Galaxy, LG optimus, Nokia N9, Pixel 2, Iphone 678, Iphone X */
@media (min-width: 360px) and (max-width: 410.98px) {
	body {
		background-size: 110%;
	}

	h3 {
	padding-top: 0;
	}

	.display-4 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
	}
}

/*small devices (portrait phones, 360px and up) Nokia N9, Pixel 2, Iphone 678 plus */
@media (min-width: 411px) and (max-width: 575.98px) {
	body {
		background-size: 125%;
	}

	h3 {
	padding-top: 0;
	}
}

/*medium devices (portrait phones/landscape for small phones, 576px and up) BB Playbook, Mic. Lumia 550, Nexus 7*/
@media (min-width: 576px) and (max-width: 767.98px) {
	body {
		min-height: 960px;
		max-height: 1000px;
	}

	#ayuk {
	min-height: 500px;
	}



	.display-4 {
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.2;
	}
}

/*Medium devices (tablets, 768px and up) Kindle Fire HDX, Ipad Mini, Ipad*/
@media (min-width: 768px) and (max-width: 991.98px) {
	body {
		min-height: 1024px;
		max-height: 1500px;
	}

	#ayuk {
	min-height: 500px;
	}



	.display-4 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
	}

}

/*Large devices (desktops, 992px and up) Ipad Pro*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	body {
		min-height: 1364px;
		max-height: 1500px;
	}

	#ayuk {
	min-height: 700px;
	}

	.display-4 {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;
	}
}

/*Default large devices (large desktops, 1280px, default responsive)*/
@media (min-width: 1200px) and (max-width: 1354.96px) {
	body {
		min-height: 800px;
		max-height: 950px;
	}
}

/*Extra large devices (large desktops, 1355px and up)*/
@media (min-width: 1355px) and (max-width: 1365.96px){
	body {
		min-height: 900px;
		max-height: 1500px;
	}

	#ayuk {
	min-height: 700px;
	}
}

@media (min-width: 1366px) {
	body {
		max-height: 768px;
	}

	#ayuk {
	max-height: 400px;
	}

	.container .login {
	min-height: 300px;
	}
	#footer {
	background-color: transparent;
	min-height: 80px;
	padding-top: 2rem;
	padding-bottom: 2rem;
}