body {
  background-image: url("../images/circuitboard.png");
  background-repeat: repeat-y;
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1; 
  animation-fill-mode: forwards; 
  font-family: 'Noto Sans SC', sans-serif !important;
}

.cardIMG{
	width:80%;
	margin:auto;
	padding-bottom:1.5%;
	padding-top:1%;
}

@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
} 

#dynamics{
	display:none;
}

.foot{
   position: relative;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #f8781f;
   color: #ffffff;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 20px;
}


.copyright{
	padding-top:3%;
	float:left;
}

.b2top{
	padding-left: 50px;
}

.btn-success{
	font-size: 1.2rem !important;
}

/* The container must be positioned relative: */
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: #f8781f;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: #f8781f;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

/*NAV BAR START*/
/*#wrapper{padding:90px 15px;}*/
/* Create a sticky/fixed navbar */
#navbar {
  overflow: hidden;
  background-color: #f8781f;
  padding: 15px 10px; /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;
  top: 0; /* At the top */
  z-index: 99;
}

/* Style the navbar links */
#navbar a {
  float: left;
  color: white;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo */
#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}

/* Links on mouse-over */
#navbar a:hover {
  background-color: #1ebad0;
  color: white;
}

/* Style the active/current link */
#navbar a.active {
  background-color: #1ebad0;
  color: white;
}

/* Display some links to the right */
#navbar-right {
  float: right;
}

/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 580px) {
  #navbar {
    padding: 0.06rem 0.625rem !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
  #navbar #logo {
	line-height:35px;
	font-size:1.5625rem;
  }
}
/*
.navbar-expand-lg .navbar-nav.side-nav{flex-direction: column;}
.card{margin-bottom: 15px; border-radius:0; box-shadow: 0 5px 8px rgba(0,0,0,.5); 
font-family: 'Noto Sans SC', sans-serif; !important;}
.header-top{box-shadow: 0 3px 5px rgba(0,0,0,.1)}
.leftmenutrigger{display: none}
@media(min-width:992px) {
.leftmenutrigger{display: block;display: block;margin: 7px 20px 4px 0;cursor: pointer;}
/*#wrapper{padding: 90px 15px 15px 15px; }*/
/*
.navbar-nav.side-nav.open {left:0;}
.navbar-nav.side-nav{background: #585f66;box-shadow: 2px 1px 2px rgba(0,0,0,.1);position:fixed;top:56px;flex-direction: column!important;left:-220px;width:200px;overflow-y:auto;bottom:0;overflow-x:hidden;padding-bottom:40px}
}
.animate{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}


.bg-dark{
	background-color:#f8781f!important;
}
/*NAV BAR END*/

/*TIMELINE*/
.main-timeline4{overflow:hidden;position:relative}
.main-timeline4:before{content:"";width:5px;height:70%;background:#333;position:absolute;top:120px;left:50%;transform:translateX(-50%)}
.main-timeline4 .timeline-content:before,.main-timeline4 .timeline:before{top:50%;transform:translateY(-50%);content:""}
.main-timeline4 .timeline{width:50%;padding-left:100px;float:right;position:relative}
.main-timeline4 .timeline:before{width:20px;height:20px;border-radius:50%;background:#fff;border:5px solid #333;position:absolute;left:-10px}
.main-timeline4 .timeline-content{display:block;padding-left:150px;position:relative}
.main-timeline4 .timeline-content:before{width:90px;height:10px;border-top:7px dotted #333;position:absolute;left:-92px}
.main-timeline4 .year{display:inline-block;width:120px;height:120px;line-height:100px;border-radius:50%;border:10px solid #f54957;font-size:30px;color:#f54957;text-align:center;box-shadow:inset 0 0 10px rgba(0,0,0,.4);position:absolute;top:20px;left:0}
.main-timeline4 .year:before{content:"";border-left:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;bottom:-13px;right:0;transform:rotate(45deg)}
.main-timeline4 .inner-content{padding:20px 0}
.main-timeline4 .title{font-size:24px;font-weight:600;color:#f54957;text-transform:uppercase;margin:0 0 5px}
.main-timeline4 .description{font-size:14px;color:#6f6f6f;margin:0 0 5px}
.main-timeline4 .timeline:nth-child(2n){padding:0 100px 0 0}
.main-timeline4 .timeline:nth-child(2n) .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .timeline:nth-child(2n):before{left:auto;right:-10px}
.main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0 150px 0 0}
.main-timeline4 .timeline:nth-child(2n) .timeline-content:before{right:-92px}
.main-timeline4 .timeline:nth-child(2n) .year{right:0}
.main-timeline4 .timeline:nth-child(2n) .year:before{right:auto;left:0;border-left:none;border-right:20px solid #f54957;transform:rotate(-45deg)}
.main-timeline4 .timeline:nth-child(2){margin-top:110px}
.main-timeline4 .timeline:nth-child(odd){margin:-110px 0 0}
.main-timeline4 .timeline:nth-child(even){margin-bottom:80px}
.main-timeline4 .timeline:first-child,.main-timeline4 .timeline:last-child:nth-child(even){margin:0}
.main-timeline4 .timeline:nth-child(2n) .year{border-color:#1ebad0;color:#1ebad0}
.main-timeline4 .timeline:nth-child(2) .year:before{border-right-color:#1ebad0}
.main-timeline4 .timeline:nth-child(2n) .title{color:#1ebad0}
.main-timeline4 .timeline:nth-child(3n) .year{border-color:#7cba01;color:#7cba01}
.main-timeline4 .timeline:nth-child(3) .year:before{border-left-color:#7cba01}
.main-timeline4 .timeline:nth-child(3n) .title{color:#7cba01}
.main-timeline4 .timeline:nth-child(4n) .year{border-color:#f8781f;color:#f8781f}
.main-timeline4 .timeline:nth-child(4) .year:before{border-right-color:#f8781f}
.main-timeline4 .timeline:nth-child(4n) .title{color:#f8781f}

@media only screen and (max-width:1366px){.main-timeline4 .year{top:50%;transform:translateY(-50%)}
.main-timeline4:before{content:"";width:5px;height:70%;background:#333;position:absolute;top:130px;left:50%;transform:translateX(-50%)}
}

@media only screen and (max-width:1200px){.main-timeline4 .year{top:50%;transform:translateY(-50%)}
.main-timeline4:before{content:"";width:5px;height:74%;background:#333;position:absolute;top:135px;left:50%;transform:translateX(-50%)}
}

@media only screen and (max-width:1050px){.main-timeline4 .year{top:50%;transform:translateY(-50%)}
.main-timeline4:before{content:"";width:5px;height:66%;background:#333;position:absolute;top:230px;left:50%;transform:translateX(-50%)}
}

@media only screen and (max-width:812px){.main-timeline4{overflow:visible}
.main-timeline4:before{height:81%;top:80px;left:0;transform:translateX(0)}
.main-timeline4 .timeline:before,.main-timeline4 .timeline:nth-child(2n):before{top:60px;left:-7px;transform:translateX(0)}
.main-timeline4 .timeline,.main-timeline4 .timeline:nth-child(even),.main-timeline4 .timeline:nth-child(odd){width:100%;float:none;text-align:center;padding:0;margin:0 0 10px}
.main-timeline4 .timeline-content,.main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0}
.main-timeline4 .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .timeline-content:before{display:none}
.main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .year{position:relative;transform:translateY(0)}
.main-timeline4 .timeline:nth-child(2n) .year:before,.main-timeline4 .year:before{border:none;border-right:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;top:50%;left:-23px;bottom:auto;right:auto;transform:rotate(0)}
.main-timeline4 .timeline:nth-child(2n) .year:before{border-right-color:#1ebad0}
.main-timeline4 .timeline:nth-child(3n) .year:before{border-right-color:#7cba01}
.main-timeline4 .timeline:nth-child(4n) .year:before{border-right-color:#f8781f}
.main-timeline4 .inner-content{padding:10px}
}

@media only screen and (max-width:768px){.main-timeline4{overflow:visible}
.main-timeline4:before{height:80%;top:80px;left:0;transform:translateX(0)}
.main-timeline4 .timeline:before,.main-timeline4 .timeline:nth-child(2n):before{top:60px;left:-7px;transform:translateX(0)}
.main-timeline4 .timeline,.main-timeline4 .timeline:nth-child(even),.main-timeline4 .timeline:nth-child(odd){width:100%;float:none;text-align:center;padding:0;margin:0 0 10px}
.main-timeline4 .timeline-content,.main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0}
.main-timeline4 .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .timeline-content:before{display:none}
.main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .year{position:relative;transform:translateY(0)}
.main-timeline4 .timeline:nth-child(2n) .year:before,.main-timeline4 .year:before{border:none;border-right:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;top:50%;left:-23px;bottom:auto;right:auto;transform:rotate(0)}
.main-timeline4 .timeline:nth-child(2n) .year:before{border-right-color:#1ebad0}
.main-timeline4 .timeline:nth-child(3n) .year:before{border-right-color:#7cba01}
.main-timeline4 .timeline:nth-child(4n) .year:before{border-right-color:#f8781f}
.main-timeline4 .inner-content{padding:10px}
}

@media only screen and (max-width:640px){.main-timeline4{overflow:visible}
.main-timeline4:before{height:81%;top:80px;left:0;transform:translateX(0)}
.main-timeline4 .timeline:before,.main-timeline4 .timeline:nth-child(2n):before{top:60px;left:-7px;transform:translateX(0)}
.main-timeline4 .timeline,.main-timeline4 .timeline:nth-child(even),.main-timeline4 .timeline:nth-child(odd){width:100%;float:none;text-align:center;padding:0;margin:0 0 10px}
.main-timeline4 .timeline-content,.main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0}
.main-timeline4 .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .timeline-content:before{display:none}
.main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .year{position:relative;transform:translateY(0)}
.main-timeline4 .timeline:nth-child(2n) .year:before,.main-timeline4 .year:before{border:none;border-right:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;top:50%;left:-23px;bottom:auto;right:auto;transform:rotate(0)}
.main-timeline4 .timeline:nth-child(2n) .year:before{border-right-color:#1ebad0}
.main-timeline4 .timeline:nth-child(3n) .year:before{border-right-color:#7cba01}
.main-timeline4 .timeline:nth-child(4n) .year:before{border-right-color:#f8781f}
.main-timeline4 .inner-content{padding:10px}
}

@media only screen and (max-width:480px){.main-timeline4{overflow:visible}
.main-timeline4:before{height:81.7%;top:60px;left:0;transform:translateX(0)}
.main-timeline4 .timeline:before,.main-timeline4 .timeline:nth-child(2n):before{top:60px;left:-7px;transform:translateX(0)}
.main-timeline4 .timeline,.main-timeline4 .timeline:nth-child(even),.main-timeline4 .timeline:nth-child(odd){width:100%;float:none;text-align:center;padding:0;margin:0 0 10px}
.main-timeline4 .timeline-content,.main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0}
.main-timeline4 .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .timeline-content:before{display:none}
.main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .year{position:relative;transform:translateY(0)}
.main-timeline4 .timeline:nth-child(2n) .year:before,.main-timeline4 .year:before{border:none;border-right:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;top:50%;left:-23px;bottom:auto;right:auto;transform:rotate(0)}
.main-timeline4 .timeline:nth-child(2n) .year:before{border-right-color:#1ebad0}
.main-timeline4 .timeline:nth-child(3n) .year:before{border-right-color:#7cba01}
.main-timeline4 .timeline:nth-child(4n) .year:before{border-right-color:#f8781f}
.main-timeline4 .inner-content{padding:10px}
}
/*TIMELINE END*/

/*BACK TO TOP ARROW*/
.to-top{
	color:#ffffff;
	padding-top:1.8em;
	display:inline-block;/* or block */
	position:relative;
	border-color:#ffffff;
	text-decoration:none;
	transition:all .3s ease-out;
}
.to-top:before{
	content:'▲';
	font-size:1em;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-.7em;
	border:solid .13em #ffffff;
	border-radius:10em;
	width:1.4em;
	height:1.4em;
	line-height:1em;
	padding-right:0.05em;
	border-color:inherit;
	transition:transform .5s ease-in;
	text-align: center;
}
.to-top:hover{
	color:#1ebad0;
	border-color:#1ebad0;
}
.to-top:hover:before{
	transform: rotate(360deg);
}
/*BACK TO TOP ARROW END*/

blockquote{
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

/*STUFF FOR CENTERED TEXT ON TORONTO PIC START*/
.heroIMG{
	width:100%;
	height:100%;
}

.altContainer {
  position: relative;
  text-align: center;
  color:white;
}


/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.heroHead{
	font-size:2.5rem !important;
	font-family: 'Noto Sans SC', sans-serif !important;
}

.heroText{
	font-size:1.5rem !important;
	font-family: 'Noto Sans SC', sans-serif !important;	
	margin-top: 0;
	margin-bottom: 1rem;
}
@media screen and (max-width: 1024px) {
	.centered {
		background-color: rgba(1, 1, 1, 0.5);
	}
}

@media screen and (max-width: 736px) {
	.heroHead{
		display: none;
	}
	.centered {
		position: absolute;
		padding-top: 10%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(1, 1, 1, 0.5);
	}
}

@media screen and (max-width: 646px) {
	.heroIMG{
		width:100%;
		height:100%;
	}
	.altContainer {
		position: relative;
		text-align: center;
		color:white;
		padding-top:5%;
	}
	.heroHead{
		display: none;
	}
	
	.heroText{
		font-size:1.52rem!important;
	}

	.centered {
		position: absolute;
		padding-top: 10%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(1, 1, 1, 0.5);
	}
	
	.line{
		display:none;
	}

	.colNew {
	-ms-flex-preferred-size: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
	padding-bottom:1.5%;
	padding-top:1.5%;
	}
}
@media screen and (max-width: 569px) {
	.heroIMG{
		width:100%;
		height:100%;
	}
	.altContainer {
		position: relative;
		text-align: center;
		color:white;
		padding-top:10%;
	}
	.heroHead{
		display: none;
	}

	.centered {
		position: absolute;
		padding-top: 3%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(1, 1, 1, 0.5);
	}
	.line{
		display:none;
	}
}

@media screen and (max-width: 500px) {
	.heroIMG{
		width:100%;
		height:100%;
	}
	.altContainer {
		position: relative;
		text-align: center;
		color:white;
		padding-top:18%;
	}
	.heroHead{
		display: none;
	}

	.centered {
		position: absolute;
		padding-top: 8%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(1, 1, 1, 0.5);
	}
	.line{
		display:none;
	}
}

@media screen and (max-width: 413px) {
	.heroIMG{
		width:100%;
		height:100%;
	}
	.altContainer {
		position: relative;
		text-align: center;
		color:white;
		padding-top:18%;
	}
	.heroHead{
		display: none;
	}

	.centered {
		position: absolute;
		padding-top: 14%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(1, 1, 1, 0.5);
	}
	.heroText{
		font-size:1.4rem !important;
		font-family: 'Noto Sans SC', sans-serif !important;	
		margin-top: 0;
		margin-bottom: 1rem;
	}
	.line{
		display:none;
	}
}
@media screen and (max-width: 385px) {
	.heroIMG{
		width:100%;
		height:100%;
	}
	.altContainer {
		position: relative;
		text-align: center;
		color:white;
		padding-top:20%;
		
	}
	.heroHead{
		display: none;
	}

	.centered {
		position: absolute;
		padding-top: 18%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(1, 1, 1, 0.5);
	}
	.heroText{
		font-size:1.2rem !important;
		font-family: 'Noto Sans SC', sans-serif !important;	
		margin-top: 0;
		margin-bottom: 1rem;
	}
	.line{
		display:none;
	}
}
@media screen and (max-width: 321px) {
	.heroIMG{
		width:100%;
		height:100%;
	}
	.altContainer {
		position: relative;
		text-align: center;
		color:white;
		padding-top:36%;
		
	}
	.heroHead{
		display: none;
	}

	.centered {
		position: absolute;
		padding-top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(1, 1, 1, 0.5);
	}
	.heroText{
		font-size:1.1rem !important;
		font-family: 'Noto Sans SC', sans-serif !important;	
		margin-top: 0;
		margin-bottom: 1rem;
	}
	.line{
		display:none;
	}
}
/*STUFF FOR CENTERED TEXT ON TORONTO PIC END*/