* {
    box-sizing: border-box;
    padding: 0;
}
a:link, a:visited {
	color: rgb(21,104,153);
	text-decoration: none;
}
a:hover, a:active {
	color: rgb(21,104,153);
	text-decoration: underline;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
.shake {
	animation: shake 15s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
@keyframes shake {
  0.75%, 5.5625% {
    transform: translate3d(-1px, 0, 0);
  }
  
  1.25%, 5% {
    transform: translate3d(2px, 0, 0);
  }

  1.875%, 3.125%, 4.375% {
    transform: translate3d(-4px, 0, 0);
  }

  2.5%, 3.75% {
    transform: translate3d(4px, 0, 0);
  }
  6% {
  	transform: none;
  }
}
html {
    font-family: 'Exo 2', sans-serif;
}
body {
	background: #FFFFFF;
	margin: 0;
}
div.holder {
	max-width: 1170px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
div.wrapper {
	position: relative; 
	margin: 0 auto; 
	/*left: 0; 
	right: 0; 
	top: 0;
	float: left; */
	width: 100%;
}
.header {
	background-color:rgb(255,255,255);
	/*float: left; */
	width: 100%;
}
div.logorepeat {
    display: none;
}
img.logo {
	width: 115%;
	padding-top: 3px;
}
img.desk {
	display: none;
}
img.mob {
	display: inherit;
    height: 110px;
    padding: 3px;
    width: auto;
}
div.logo {
    display: none;
	position: absolute; 
	width: 30%; 
	min-width: 90px;
}
.nav {
	display: none;
}
.navmob {
   	display: inherit;
	float: right;
	width: 100%;
}
.navmob ul {
    list-style-type: none;
   	margin: 0;
   	padding: 0;
}
.navmob li {
   	padding: 10px 5px;
   	margin: 0;
   	color: #000000;
   	/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
   	float: right;
   	width: 15%;
   	height: 100%;
}
.navmob li.moblogo {
    width: 25%;
    padding: 0;
    background-color: #FFF !important;
}
.navmob li:hover, .nav li:active {
   	background-color: rgba(61,174,223,0.5);
}
.navmob li.active {
	background-color: rgba(61,174,223,0.5);
}
.navmob li.fb {
	background-color: transparent;
	padding: 10px 8px;
}
.navmob img {
	width: 100%;
}
div.imgcred {
	color: rgb(170,170,170);
	float: none;
	/* Rotate div */
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	/* IE 9 */
	-webkit-transform: rotate(-90deg);
	/* Chrome, Safari, Opera */
	transform: rotate(-90deg);
	-moz-transform-origin: 60px 60px;
	-o-transform-origin: 60px 60px;
	-ms-transform-origin: 60px 60px;
	-webkit-transform-origin: 60px 60px;
	transform-origin: 60px 60px;
	position: relative;
	left: 10px;
	width: 100px;
	font-size: 7px;
}
.welcome {
	/* background-image: url(/img/bg.jpg); Made dynamic in header.php*/ 
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	background-position: center;
	/*float: left; */
	width: 100%;
}
.welcome div.text {
	color: #FFFFFF;
	font-size: 20px;
	padding: 30px 30px 0 30px;
	float: left; 
	width: 90%; 
	margin: 0 5%;
	text-align: center;
	text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
}
.welcome div.button {
	border-radius: 3em;
	background-color: rgba(61,174,223,1);
	padding: 3px;
	float: left; 
	width: 60%; 
	margin: 3% 20%;
	text-align: center;
}
.welcome a {
	text-decoration: none;
	color: #FFFFFF;
	font-size: 20px;
}
.welcome div.arrowholder {
	position: relative; 
	bottom: 45px; 
	margin: 0 auto; 
	width: 30px; 
	height: 30px;
}
.welcome div.arrowholder img {
	width: 100%;
	height: 100%;
}
div.row {
	float: left; 
	width: 100%;
}
div.main {
	float: left; 
	width: 100%; 
	padding: 15px 15px 15px 15px;
}
.main p {
	line-height: 1.55;
}
button.school {
	width: 100%;
	font-size: 20px;
	padding: 5px;
	border-radius: 20px;
	background-color: rgba(61, 174, 223, 1);
	color: white;
	border: 0;
}
form.school {
	width: 40%;
	float: left;
}
div.mainnp {
	padding: 15px 0;
}
div.date { width: 45px; }

/* LECTURES.php */

div.semester {
	width: 100%;
	float: left;
	padding: 0 15px;
}

/* EVENTS.html */


.main span.filters {
	font-size: 15px;
	padding-left: 15px;
}
div.main.maine {
	padding: 3px;
}
.maine h2, .maine p {
	padding-left: 15px;
	padding-right: 15px;
}
div.mevents {
	/*margin: 0 1%;*/
	/*padding: 10px 5px;*/
	background-color: #FFFFFF;
	float: left; 
	width: 100%;
	margin: 0 0 25px 0;
}
.mevents div.mevent {
	background-color: lightgrey;
	height: 120px;
	padding: 10px;
	margin: 10px 0 0 0;
	float: left;
	width: 100%;
	border-radius: 5px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	box-shadow: 1px 1px 5px -1px #000;
	position: relative;
}
.mevents .mevent .date, .mevents .mevent .info {
	position: absolute;
	margin-right: 8px;
}
.mevents .mevent .info {
	padding-left: 55px;
	width: 100%;
}
.name, .time {
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mevents div.day {
	font-size: 22px;
	background-color: rgb(0, 104, 223);
	color: #FFFFFF;
	text-align: center;
	padding: 3px;
	border-radius: 5px 5px 0 0;
	box-shadow: 1px 1px 5px -1px #000;
}
.mevents div.month {
	font-size: 17px;
	background-color: rgb(61, 174, 223);
	color: #FFF;
	text-align: center;
	padding: 3px;
	border-radius: 0 0 5px 5px;
	box-shadow: 1px 1px 5px -1px #000;
}
div.week {
	position: absolute;
	bottom: 7px;
	/*width: 100px;*/
	color: #FFFFFF;
	text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
	text-decoration: none;
	font-size: 17px;
}
.mevents div.name {
	font-size: 22px;
	padding: 3px;
	text-decoration: none;
	text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
	color: #FFFFFF;
}
.mevents div.long {display: none;}
.mevents div.short{display: block;}
.mevents div.time{
	font-size: 15px;
	padding: 3px;
	text-decoration: none;
	text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
	color: #FFFFFF;
}
.mevents div.arrow {
	float: right;
	padding-top: 40px;
	width: 25px;
}
.mevents .arrow img {
	width: 100%;
	background-color: white;
	padding: 2px;
	border-radius: 15px;
	box-shadow: 1px 1px 5px -1px #000;
}

div.group {
	padding: 5px;
	font-size: 15px;
}
div.group.center {
	text-align: center;
}
.group input.date {
	width: 40%;
}

/* //EVENTS.html */

/* EVENT.html */

div.ievents {
	margin: 0;
	padding: 15px;
	height: 200px;
	background-color: #FFFFFF;
	position: relative;
	width: 100%;
	border-radius: none;
	box-shadow: none;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	background-repeat: no-repeat;
}
.ievents div.ievent {
	background-color: none;
	height: 67px;
	padding: 5px;
	margin: 0;
	float: left;
	width: 100%;
	position: relative;
}
.ievents .ievent .date, .ievents .ievent .info {
	position: absolute;
	margin-right: 8px;
}
.ievents .ievent .info {
	padding-left: 55px;
	width: 100%;
}
.ievents div.date {
	width: 45px;
}
.ievents div.day {
	font-size: 22px;
	background-color: rgb(0, 104, 223);
	color: #FFF;
	text-align: center;
	padding: 3px;
	border-radius: 5px 5px 0 0;
	box-shadow: 1px 1px 5px -1px #000;
}
.ievents div.month {
	font-size: 17px;
	background-color: rgb(61, 174, 223);
	color: #FFF;
	text-align: center;
	padding: 3px;
	border-radius: 0 0 5px 5px;
	box-shadow: 1px 1px 5px -1px #000;
}
.ievents div.info {
	position: absolute;
	text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
}
.ievents div.name {
	font-size: 22px;
	padding: 3px;
	text-decoration: none;
	color: #FFFFFF;
}
.ievents div.time{
	font-size: 17px;
	padding: 3px;
	text-decoration: none;
	color: #FFFFFF;
}
a.efb {
	background-color: #FFFFFF;
	text-decoration: none;
	color: #3B5998;
	padding: 0 5px 5px 5px;
	border-radius: 4px;
	position: absolute;
	bottom: 15px;
	right: 15px;
	box-shadow: 1px 1px 5px -1px #000;
}
.efb img {
	width: 20px;
	position: relative;
	top: 4px;
}
.main div.description {
	padding: 15px;
	/*float: left;*/
}

#map {
	width: 95%;
	height: 400px;
	margin: 0 auto;
}

/* //EVENT.html */

/* ABOUT.php */

div.committee.desktop {
	display: none;
}
div.committee.mobile {
	display: block;
}
div.committee {
	width: 100%;
}
.committee div.mem {
	float: left;
	width: 50%;
	padding: 10px;
	min-height: 230px;
    background-color: none;
    border-radius: 10px;
}
.mem:hover, .mem:active {
	background-color: #DDDDDD;
}
.committee .mem .photo img {
	width: 90%;
	display: block;
	margin: 0 auto;
	border-radius: 10px;
}
.committee .mem div.name {
	text-align: center;
	padding: 3px 0;
	font-size: 20px;
	text-decoration: none;
	color: #000000;
}
.committee .mem div.position {
	text-align: center;
	color: #707070;
	font-size: 14px;
	text-decoration: none;
}

/* //ABOUT.php */

div.featured {
	margin: 0;
	float: left; 
	width: 100%;
}
.featured div.item {
	height: 100px;
	background-size: cover;
	background-position: center;
	float: left;
	margin: 2%;
	border-radius: 5px;
	box-shadow: 1px 1px 5px -1px #000;
	line-height: 100px;
	text-align: center;
	vertical-align: middle; 
	color: white;
	text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
	font-size: 23px;
}
.featured div.wide {
	width: 96%;
}
.featured div.narrow {
	width: 46%;
}

div.sbevents {
	margin: 0;
	padding: 10px 5px;
	background-color: lightgrey;
	border-radius: 0;
	float: left; 
	width: 100%;
	border: none;
}
.sbevents div.title {
	color: #000000;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	letter-spacing: 3px;
}
.sbevents div.form {
	background-color: #FFFFFF;
	border-radius: 10px;
	margin-top: 10px;
	border: 1px solid;
	border-color: #aaa;
}
.sbevents div.event {
	background-color: #FFFFFF;
	height: 67px;
	padding: 5px;
	margin: 10px 0 0 0;
	float: left;
	width: 100%;
	border-radius: 5px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	box-shadow: 1px 1px 5px -1px #000;
	position: relative;
}
.sbevents .event .date {
	position: absolute;
	margin-right: 8px;
}
.sbevents .event .info {
	position: absolute;
	width: 100%;
	padding-left: 55px;
}
.sbevents div.day {
	font-size: 22px;
	background-color: rgb(0, 104, 223);
	color: #FFF;
	text-align: center;
	padding: 3px;
	border-radius: 5px 5px 0 0;
	box-shadow: 1px 1px 5px -1px #000;
}
.sbevents div.month {
	font-size: 17px;
	background-color: rgb(61, 174, 223);
	color: #FFF;
	text-align: center;
	padding: 3px;
	border-radius: 0 0 5px 5px;
	box-shadow: 1px 1px 5px -1px #000;
}
.sbevents div.name {
	font-size: 22px;
	padding: 3px;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
}
.sbevents div.time{
	font-size: 15px;
	padding: 3px;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
}
.sbevents div.lecture {
	color: white;
	text-shadow: 0 0 3px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
	float: none;
	position: absolute;
	right: 0;
	padding-top: .7%;
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-moz-transform-origin: 55px 5px;
	-o-transform-origin: 55px 5px;
	-ms-transform-origin: 55px 5px;
	-webkit-transform-origin: 55px 5px;
	transform-origin: 55px 5px;
	font-size: 12px;
	width: 70px;
	text-align: center;
}
.sbevents div.arrow {
	float: right;
	padding-top: 15px;
	width: 25px;
}
.sbevents .arrow img {
	width: 100%;
}
.sbevents div.button, .sbevents button.button {
	width: 80%;
	border-radius: 3em;
	background-color: rgba(61,174,223,1);
	padding: 5px;
	margin: 10px 10% 0 10%;
	float: left;
	border: none;
}
.sbevents .button {
	text-decoration: none;
	color: #FFFFFF;
	font-size: 20px;
	text-align: center;
}
div.links {
	background-color: rgba(61,174,223,1);
	margin-top: 0;
	height: 145px;
	float: left; 
	width: 100%;
}
.links div.title {
	position: absolute;
	width: 120px;
	color: #FFFFFF;
	float: none;
	padding-top: 0.7%;
	/* Rotate div */
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	/* IE 9 */
	-webkit-transform: rotate(-90deg);
	/* Chrome, Safari, Opera */
	transform: rotate(-90deg);
	-moz-transform-origin: 60px 60px;
	-o-transform-origin: 60px 60px;
	-ms-transform-origin: 60px 60px;
	-webkit-transform-origin: 60px 60px;
	transform-origin: 60px 60px;
}
.links div.linkwrap {
	float: left;
	padding: 5px 10px 0 25px;
	width: 100%;
}
.links .linkwrap div.link {
	height: 55px;
	width: 55px;
	margin: 3px;
	background-color: #FFFFFF;
	float: left;
	border-radius: 10px;
	box-shadow: 1px 1px 5px -1px #000;
}
.links .linkwrap .link img {
	width: 100%;
}
div.footer {
	float: left; 
	width: 100%;
}
.footer div.bar {
	background-color: #808080;
	width: 100%;
	float: left;
}
.footer .bar div, .footer .bar a {
	color: white;
	text-decoration: none;
}
.footer .bar div.design {
	float: left; 
	width: 100%; 
	text-align: center; 
	padding: 15px 15px 15px 15px;
}
.footer .bar div.copyright {
	float: left; 
	width: 100%; 
	text-align: center; 
	padding: 0px 15px 15px 15px;
}
.footer .bar div.login {
	float: left; 
	width: 100%; 
	text-align: center; 
	padding: 0px 15px 15px 15px;
}

/* migrated from insight.css */
div.centreitems {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
div.welcomeinsight {
	 position: relative; 
	 height: 100%; 
	 padding-top: 65px; 
	 overflow: hidden;
}
@media only screen and (min-width: 600px) {
	div.welcomeinsight {
		padding-top: 110px; 
	}
}
div.welcome .logoart {
	width: 60%;
	max-width: 300px;
	margin: 0 auto;
	position: relative;
}
div.welcome .logoart img {
	width: 100%;
	height: 100%;
}

@media only screen and (min-width: 620px) {
	/* pop menu and footer */
    div.logo {
        display: block;
    }
	.nav {
   		display: block;
   		width: 100%;
		float: right;
	}
	.navmob {
		display: none;
	}
	.nav a {
		text-decoration: none;
		color: #000000;
		font-size: 15px;
	}
	.nav ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
	}
	.nav li {
    	padding: 0 8px;
    	margin: 0 7px 0 7px;
    	color: #000000;
    	/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
    	height: 110px;
    	float: right;
    	line-height: 110px;
	}
	.nav li:hover, .nav li:active {
    	background-color: rgba(61,174,223,0.5);
	}
	.nav li.active {
		background-color: rgba(61,174,223,0.5);
	}
	.nav li.fb {
		background-color: transparent;
		padding: 6px 8px 0 8px;
	}
	.nav img.fb {
		width: 25px;
	}
	.welcome div.text {
		font-size: 25px;
		width: 85%; 
		margin: 0 7.5%;
	}
	.welcome div.button {
		padding: 10px;
		width: 33%; 
		margin: 3% 33.5%;
	}
	.welcome .button a {
		font-size: 25px;
	}
	.mevents div.name {
		font-size: 19px;
	}
	.mevents div.time{ /*EVENTS.html*/
		font-size: 17px;
	}
	.mevents div.long {display: block;}
	.mevents div.short{display: none;}
	.links div.linkwrap {
		/*margin-bottom: 10%;*/
	}
	.links .linkwrap div.link {
		padding-bottom: 10%;
		width: 10%;
		margin: 14px 1%;
	}
	.footer .bar div.design {
		width: 33.3%; 
		text-align: left; 
		padding: 10px 10px 10px 10px;
	}
	.footer .bar div.copyright {
		width: 33.3%; 
		text-align: center; 
		padding: 10px 10px 10px 10px;
	}
	.footer .bar div.login {
		width: 33.3%; 
		text-align: right; 
		padding: 10px 10px 10px 10px;
	}
}
@media only screen and (min-width: 800px) {
    /* logo breakpoint */
    img.desk {
		display: block;
	}
	img.mob {
		display: none;
	}
	img.logo {
		height: 104px;
		padding-top: 0;
	}
	div.logo {
		width: 300px;
		padding-top: 3px;
	}   
}
@media only screen and (min-width: 760px) {
    /* pop sidebar: */  
	div.featured {
		margin: 1% 2% 0 2%;
		width: 36%;
	}
	div.sbevents {
		margin: 2%;
		padding: 15px;
		border: 1px solid;
		border-color: #aaa;
	}
	div.main {
		width: 60%;
	}
	div.ievents {
		border-radius: 0 5px 5px 0;
		box-shadow: 1px 1px 5px -1px #000;
	}
	
	/* ABOUT.php */
	
	div.committee.desktop {
		display: block;
	}
	div.committee.mobile {
		display: none;
	}
	.committee div.mem {
		width: 20%;
		min-height: 200px;
	}
	.committee .mem .photo img {
		width: 50%;
	}
	.committee .mem div.name {
		padding: 10px 0 5px 0;
	}

	/* //ABOUT.php */
	
	/* LECTURES.php */

	div.semester {
		width: 50%;
	}
	
	/* */
	
	div.sbevents {
		border-radius: 10px;
		width: 36%;
	}
	.sbevents div.title {
		font-size: 20px;
	}
	.sbevents div.event {
		height: 70px;
		padding: 10px;
		margin: 15px 0 0 0;
	}
	.sbevents .event .date {
		margin-right: 10px;
	}
	.sbevents div.day {
		font-size: 20px;
		padding: 3px;
	}
	.sbevents div.month {
		font-size: 15px;
		padding: 3px;
	}
	.sbevents div.name {
		font-size: 20px;
		padding: 3px;
	}
	.sbevents div.time{
		font-size: 12px;
		padding: 3px;
	}
	.sbevents div.arrow {
		float: right;
		padding-top: 15px;
		width: 20px;
	}
	.sbevents .arrow img {
		width: 100%;
	}
	.sbevents div.button, .sbevents button.button {
		width: 60%;
		padding: 5px;
		margin: 10px 20% 0 20%;
	}
	.sbevents .button a {
		font-size: 100%;
	}
	div.links {
		margin-top: 10px;
	}
}
@media only screen and (min-width: 1000px) {
    /* For desktop: */
    div.logorepeat {
        display: block;
        background-size: 104px 100%;
        width: 50%;
        height: 104px;
        position: absolute;
        z-index: -10;
        margin: 3px 0 3px 0;
    }
    div.wrapper {
    	max-width: 1170px;
    }
    div.nav {
    	width: 100%;
        background-color: #FFF;
    }
    .welcome div.text {
    	width: 85%; 
    	margin: 0 7.5%;
    }
    div.ievents {
		border-radius: 5px;
	}
}