/* HEADER */
	
	section#title {
		font-size: 2em;
	}

	/* Navigator */

	section#nav {
		background-color: rgba(22,160,133,0);
	}

				nav#top-nav > ul > li {
					float: left;
				}

					nav#top-nav > ul > li:first-child {
						display: none;
					}

					nav#top-nav > ul > li:not(:first-child) {
						display: list-item;
					}
					
					nav#top-nav > ul > li > a:before {
						left: 0;
						right: 0;
					}

					nav#top-nav > ul > li > ul > li > a,
					nav#top-nav > ul > li > ul > li > ul > li > a {
						color: #fff !important;
					}

					nav#top-nav > ul > li > ul > li > a:before,
					nav#top-nav > ul > li > ul > li > ul > li > a:before {
						background-color: #fff;
					}

				nav#top-nav > ul > li > ul {
					position: absolute;
					right: 0;
					top: 36px;
					border-right: 1px solid #95A5A6;
					z-index: 1;
					max-height: 0;
					background: rgba(0,0,0,0.7);
					-ms-transform: perspective(400);
					-ms-transform: rotate3d(1,0,0,-90deg);
					-webkit-transform: perspective(400);
					-webkit-transform: rotate3d(1,0,0,-90deg);
					-moz-transform: perspective(400);
					-moz-transform: rotate3d(1,0,0,-90deg);
					-o-transform: perspective(400);
					-o-transform: rotate3d(1,0,0,-90deg);
					-ms-transform-origin: 50% 0;
					-webkit-transform-origin: 50% 0;
					-moz-transform-origin: 50% 0;
					-o-transform-origin: 50% 0;
					-webkit-transition: 350ms;
					-moz-transition: 350ms;
					-o-transition: 350ms;
					transition: 350ms;
				}

				nav#top-nav > ul > li:hover > ul {
					max-height: 1000px;
					-ms-transform: perspective(400);
					-ms-transform: rotate3d(0,0,0,0);
					-webkit-transform: perspective(400);
					-webkit-transform: rotate3d(0,0,0,0);
					-moz-transform: perspective(400);
					-moz-transform: rotate3d(0,0,0,0);
					-o-transform: perspective(400);
					-o-transform: rotate3d(0,0,0,0);
				}

				nav#top-nav > ul > li > ul > li.with-sub-menu:before {
					content: "\21E6";
					color: #fff;
				}

					@keyframes arrowMove {
						0% { left: 5px; }
						50% { left: 10px; }
						100% { left: 5px; }
					}

					nav#top-nav > ul > li > ul > li > ul {
						position: absolute;
						right: 100%;
						top: 0;
						background: rgba(0,0,0,0.7);
						border-right: 1px solid #95A5A6;
						z-index: 1;
						max-height: 0;
						overflow: hidden;
						-ms-transform: perspective(400);
						-ms-transform: rotate3d(0,1,0,-90deg);
						-webkit-transform: perspective(400);
						-webkit-transform: rotate3d(0,1,0,-90deg);
						-moz-transform: perspective(400);
						-moz-transform: rotate3d(0,1,0,-90deg);
						-o-transform: perspective(400);
						-o-transform: rotate3d(0,1,0,-90deg);
						-webkit-transform-origin: 100% 0;
						-moz-transform-origin: 100% 0;
						-o-transform-origin: 100% 0;
						-webkit-transition: 350ms;
						-moz-transition: 350ms;
						-o-transition: 350ms;
						transition: 350ms;
					}

					nav#top-nav > ul > li > ul > li:hover > ul {
						max-height: 1000px;
						-ms-transform: perspective(400);
						-ms-transform: rotate3d(0,0,0,0);
						-webkit-transform: perspective(400);
						-webkit-transform: rotate3d(0,0,0,0);
						-moz-transform: perspective(400);
						-moz-transform: rotate3d(0,0,0,0);
						-o-transform: perspective(400);
						-o-transform: rotate3d(0,0,0,0);
					}

/* MAIN */

	section.gridNav,
	section.payslip,
	section.attendance,
	section.overtime,
	section.leave,
	section.loan-inquiry,
	section.container  {
		margin: 0 50px;
	}

		section.gridNav h1,
		section.payslip h1,
		section.attendance h1,
		section.overtime h1,
		section.leave h1,
		section.loan-inquiry h1,
		section.container h1 {
			font-size: 2em;
			margin-bottom: 8px;
		}

		section.gridNav > div {
			width: calc(33% - 5px);
		}

		div.gridForm fieldset.gridFieldSet {
			display: inline-block;
		}

	/* Log In */

	section#logIn{
		margin: 50px auto 0 auto;
	}

	section#logIn,
	section#resetPassSection {
		width: 400px;
	}

	/* Album Gallery */

	section.gridGallery > div.album-container {
		width: calc(33% - 25px);
	}

	section.gridEventGallery > div.image-container {
		width: calc(33% - 10px);
	}