:root {
  --website: #a6192e;;
}

body,html {
	padding:0;
	margin:0;
	font-family:Verdana;
	font-size: 17px;
}

.nav {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:120px;
	background:#a6192e;
}

.navbar-links li {
	display:inline;
	margin-right:10px;
}

.navbar-links a {
	padding:10px;
	text-decoration:none;
	color:white;
	border:1px solid white;
}

.navbar-links a:hover {
	background:white;
	color:#a6192e;
}
	
.logo {
	margin-right:40%;
}

.toggle-button {
	position:absolute;
	top: 20;
	right:20;
	display:none;
	flex-direction:column;
	justify-content:space-between;
	width:30px; 
	height:21px;
	border:none;
	margin-top:10px;
	cursor:pointer;
}

.toggle-button .bar {
	height:3px;
	width:100%;
	background-color:white;
	border-radius:10px;
}

.wrapper {
    max-width:90%;
	padding-left:200px;
    height:auto;
}

.box {
    display:inline-block;
    position:relative;
    width:140px;
    height:120px;
    margin:5px 5px 9px 5px;
    padding: 25px 5px 5px 5px;
	color:#fff;
    text-align:center;
	box-shadow:5px 10px 18px #888888;
}

.box:hover {
    z-index:100;
    -webkit-transform: scale(0.95); /* Chrome, Safari, Opera */
    transform: scale(0.95);
}

/* Boxes */
.office365 {background: #DC3C00;}
.website {background: #a6192e;}
.email {background: #0073C6;}
.sites {background: #EB3D00;}
.onedrive {background: #094AB2;}
.notices {background: #BC9D00;}
.kamar {background: #3071a9;}
.library {background: #CC1906;}
.clickview {background: #F8981D;}
.google {background: #4285f4;}
.nzqa {background: #CC8B00;}
.easttle {background: #3D861D;}
.papercut {background: #2C3270;}
.papercut-green {background: #3D861D;}
.software {background: #404A51;}
.myportfolio {background: #CCA230;}
.map {background: #005000;}
.times {background: #804000;}
.resp {background: #002F00;}
.classroom {background: #5C2E91;}
.teams {background: #3e418e;}
.staff {background: #000000;}
.careers {background: #007EA4;}
.hail {background: #8CC152;}
.stream {background: #c40052}
.edsmart {background: #93328e}


@media (max-width:1300px) { /*1300*/
	.nav {
		flex-direction:column;
		align-items:flex-start;
	}
	
	.toggle-button {
		display:flex;
	}
	
	.navbar-links {
		display:none;
	}
	
	.navbar-links a {
		border:none;
	}

	.navbar-links li {
		display: flex;
		flex-direction:column;
		padding-left:10px;
	}
	
	.navbar-links ul {
		width:calc(100vw - 20px);
		padding:0;
	}
	
	.navbar-links.active {
		display:flex;
	}
	
	.nav.active {
		height:235px; /*233 Works for mobile, 235 works for browser*/
	}
	
	.wrapper {
		padding-left:20px;
	}
}

@media (max-width:850px) {
	.nav.active {
		height:233px; /*233 Works for mobile, 235 works for browser*/
	}
}


.special {
	-webkit-animation: backandforth 4s ease 0s;
    -webkit-animation-iteration-count:4;
    animation: backandforth 4s ease 0s;
    animation-iteration-count:4;
}

@-webkit-keyframes backandforth {0%{box-shadow: 0px 0px 0px #c40052 ;} 50%{box-shadow: 0px 0px 20px #c40052;} 100%{box-shadow: 0px 0px 0px #c40052;}}
@keyframes backandforth {0%{box-shadow: 0px 0px 0px #c40052;} 50%{box-shadow: 0px 0px 20px #c40052;} 100%{box-shadow: 0px 0px 0px #c40052;}}

/* Scroll Bar */
/* width */
::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: white; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--website); 
  opacity: 0.5;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--website); 
}
/* https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp */

.alert {
text-align: center;
 padding: 20px;
 font-size: 18px;
 font-weight: bold;
 background-image: url("https://www.hrc.co.nz/files/5015/8466/1541/COVID-Banner.png");
 color: black;
}

.closebtn {
  margin-left: 15px;
  color: black;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

p {line-height:1.6;}