/*
ARUKA PERFORMANCE
Version: 1.0
Author URI: http://www.internetimagineering.com/
*/

:root {
	/* CUSTOM SITE COLORS */
	--aruka-blue: #0b2d60;
	--aruka-ltblue: #20377d;
	--aruka-orange: #ff5725;
	--aruka-teal: #33ccff;
    
    /* STANDARD COLORS */
    --beige: #FF9900;
    --red: #459939;
    --dkred: #990000;
    --black: #000000;
    --ltgray: #e1e1e1;
    --midgray: #CCCCCC;
    --gray: #999999;
    --dkgray: #666666;

}

body {
	background-color: #fff;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'Oswald', trebuchet ms, arial, verdana, sans-serif;
	color: #333;
	font-size: 16px;
}

.clear { clear: both;}

/* TEXT */
.textTeal {color: var(--aruka-teal);}
.text2 {font-size: 1.1rem; font-weight: 200;}

/* LINKS */
a.linkGray {color: var(--ltgray); text-decoration: none;}
a:visited.linkGray {color: var(--ltgray); text-decoration: none;}
a:hover.linkGray {color: #fff; text-decoration: none;}

i.iconSpace {margin: 0 10px 0 0;}

/* BUTTONS */
button.buttonOrange1 {background-color: var(--aruka-orange); color: #fff; font-size: 12px; text-transform: uppercase; font-weight: 600; padding: 10px 14px; border-radius: 5px; border: 1px solid var(--aruka-orange);}

/* FORMS */
.formHolder {margin: 20px 0 0 0;}
input.inputText {font-family: 'Oswald', trebuchet ms, arial, verdana, sans-serif; background-color: #fff; border: 1px solid #333; font-size: 18px; font-weight: 400; padding: 10px 10px; width: 90%; margin: 10px 0;}

.formButton {margin: 10px 0 0 0;}

/* HEADINGS */
h2.sectionTitle {font-size: 1.8rem; color: var(--aruka-ltblue); font-weight: 400; margin: 0 0 30px 0; padding: 0;}

/* HEADER */
.headerWrapper {width: 100%; position: absolute;}
.headerLogo {position: absolute; left: 0; top: 0; background-color: var(--aruka-ltblue); padding: 16px 40px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.headerLogo img {width: 70px;}
.headerHeaderNav {text-align: right; margin: 0 40px 0 0;}
.headerActionNav {text-align: right;}

.headerTitle {font-size: 16px; text-transform: uppercase;}
.headerTitle-Main {font-weight: 600; color: var(--aruka-orange);}
.headerTitle-Slogan {color: #fff; margin: 0 0 0 10px;}

.headerHeaderNav {text-align: right; font-size: 14px;}
.profileName {font-weight: 600; color: #fff;}
.profileDesc {color: var(--midgray);}
.headerActionNav {margin: 0 20px 0 0;}

/* LAYOUT */
.loginbgWrapper {width: 100%; background: #000 url('/images/login-background-1.jpg') no-repeat top; height: 950px; min-height: 950px;}
.loginContainer {position: absolute; width: 80%; margin: 0 0 0 10%; top: 300px; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px;}
.loginContainer2 {position: absolute; width: 80%; margin: 0 0 0 10%; top: 300px; display: grid; grid-template-columns: 2fr 1fr; grid-column-gap: 80px;}
.loginContainer1 {position: absolute; width: 60%; margin: 0 0 0 20%; top: 300px;}
.loginHolder {background-color: #fffc; padding: 40px 50px;}

.pageWrapper {width: 90%; margin: 100px auto;}

/* FOOTER */
.wrapperFooter {width: 100%; border-top: 50px solid var(--aruka-ltblue); background-color: var(--aruka-blue); text-align: center; padding: 80px 0;}
.footerLogo {margin: 0 auto; width: 60px;}
.footerLogo img {width: 100%;}
.copyright {font-size: 14px; text-transform: uppercase; color: #fff; margin: 20px 0 0 0;}


@media screen and (min-width: 0px) and (max-width: 1400px) {

	@media screen and (min-width: 1200px) and (max-width: 1400px) {
	


	}
	
	@media screen and (min-width: 1024px) and (max-width: 1199px) {
	


	}
	
	@media screen and (min-width: 768px) and (max-width: 1023px) {
		
		
		
		@media screen and (min-width: 768px) and (max-width: 1023px) {
			
			
			
		}
		
		@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
		

		
		}

	}
	
	@media screen and (min-width: 481px) and (max-width: 767px) {
		
		
		
	}
	
	@media screen and (min-width: 0px) and (max-width: 480px) {
		
		
		
	}
	
}

@media screen and (min-width: 1401px) {

	.mobile-menu {display: none;}	
	
}