/* CUSTOMIZE THE WEBPAGE FOR RENWAL FROM YEAR 2018
WILL BE AMENDED UNTIL THE WHOLE WEBPAGE IS RENEWED
-------------------------------------------------- */

/* NAVIGATION BAR CSS */
	
	/* Navigation Bar Position */	
	
		.navbaritem {
			position: absolute;
			right: 30px;
		}

	/* Dropdown Button */	
		
		.dropbtn {
			background-color: #484848;
			color: white;
			padding: 12px 16px;
			font-size: 18px;
			border: none;
		}

		/*The mobile navigation button is not displayed if screen smaller than 1000px*/
		.topnav .icon {
		  display: none;
		}		
		
		/* The container <div> - needed to position the dropdown content */
		.dropdown, .dropdown-2 {
			position: relative;
			display: inline-block;
			float:left;
		}

		/* Change the background color of the dropdown button when the dropdown content is shown */
		.dropdown:hover .dropbtn {
			background-color: #025996;
			border: none;
			outline: none;
			margin: 0;
			padding: 12px 16px;
		}
		.dropdown-2:hover .dropbtn {
			background-color: #025996;
			border: none;
			outline: none;
			margin: 0;
			padding: 12px 16px;
		}

		/* Dropdown Content (Hidden by Default) */
		.dropdown-content {
			display: none;
			position: absolute;
			background-color: white;
			min-width: 300px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			z-index: 1;
		}
		
		.dropdown-content-2{
			display: none;
			position: absolute;
			top: 50px;
			left: 0px;
			background-color: white;
			min-width: 1000px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			z-index: 1;
		}
		
		/* Links inside the dropdown */
		.dropdown-content a, .dropdown-content-2 a {
			float: none;
			background-color: whtie;
			color: #707070;
			padding: 8px 16px;
			text-decoration: none;
			display: block;
		}
		
		.dropdown-content p, .dropdown-content-2 p {
			float: none;
			background-color: white;
			color: #0275d8;
			padding: 8px 16px;
			text-decoration: none;
			display: block;
		}
		
		
		/* Change color of dropdown links on hover */
		.dropdown-content a:hover {
			background-color: #0275d8;
			color: white;
		}
		.dropdown-content-2 a:hover {
			background-color: #0275d8;
			color: white;
		}
		
		/* Show the dropdown menu on hover */
		.dropdown:hover .dropdown-content {
			display: block;
		}
		.dropdown-2:hover .dropdown-content-2 {
			display: inline;
		}

		/* STICKY NAVIGATION BAR CSS */
		/* To keep the top navigation bar on top of the screen*/
		.sticky {
		  position: fixed;
		  top: 0;
		  width: 100%;
		  z-index:999;
		}

		/* MOBILE NAVIGATION BAR CSS IF SCREEN SMALLER THAN 1000PX*/
		
		/* DISACTIVATE TOP NAVIGATION BAR */
		@media screen and (max-width: 1300px) {
		
		  .topnav a:not(:first-child), .dropdown .dropbtn {
			display: none;
		  }
		  .topnav a:not(:first-child), .dropdown-2 .dropbtn{
		  	display: none;
		  }
		  .topnav a.icon {
			float: right;
			display: block;
		  }
		}
		
		@media screen and (max-height: 700px) {
		
		  .topnav a:not(:first-child), .dropdown .dropbtn {
			display: none;
		  }
		  .topnav a:not(:first-child), .dropdown-2 .dropbtn{
		  	display: none;
		  }
		  .topnav a.icon {
			float: right;
			display: block;
		  }
		}
		
		
		/* SIDE NAVIGATION BAR */
		.sidenav {
			height: 100%;
			width: 0;
			position: fixed;
			z-index: 1000;
			top: 0;
			right: 0;
			background-color: #262626;
			overflow-x: hidden;
			transition: 0.5s;
			padding-top: 60px;
		}

		.sidenav a, .side-dropbtn {
			padding: 8px 8px 8px 20px;
			text-decoration: none;
			font-size: 17px;
			color: #f1f1f1;
			display: block;
			transition: 0.3s;
			background-color: #262626;
			border: none;
		}
		
		.sidenav p, .side-dropbtn p {
			padding: 8px 8px 8px 20px;
			text-decoration: none;
			font-size: 17px;
			color: #0275d8;
			display: block;
			transition: 0.3s;
			background-color: #262626;
			border: none;
		}

		.sidenav a, .side-dropbtn:hover {
			color: #f1f1f1;
		}

		.sidenav .closebtn {
			position: absolute;
			top: 0;
			right: 25px;
			font-size: 36px;
			margin-left: 50px;
		}
		
		/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
		.side-dropdown-content {
			display: none;
			background-color: #262626;
			padding-left: 8px;
		}
		
		/* Optional: Style the caret down icon */
		.fa-caret-down {
			padding-left:10px;
		}
		
		/* Add an active class to the active dropdown button */
		.active {
			background-color: #0275d8;
		}

		@media screen and (max-height: 450px) {
		  .sidenav {padding-top: 15px;}
		  .sidenav a {font-size: 18px;}
		}
/* END OF NAVIGATION BAR CSS*/