* {
	margin: 0;
	padding: 0;
}

body {
	background: #fff;
	font-family: "Gotham A", "Gotham B";
	font-style: normal;
	font-weight: 400;
	color: #999999;
	font-size: 13px;
}

a {
	color: #999999;
	text-decoration: none;
}
a:hover, a.selected {
	color: #23a1b3;
}
.scroll-link{display: block;}

#explore a:hover{color: #fff;}
#explore{margin: 5% 0 2.5%;}

.button:hover{
	border-color: #23a1b3;
}

img{width: 100%;}

.link:hover{color: #999999;}

.darkBlue{color: #267385;}
.orange{color: #F15F3C;}
.forest{color: #448D46;}
.blue{color: #2BB6C9;}
.gold{color: #FAA41A;}
.lake{color: #3E8392;}
.lime{color: #8DC63F;}
.darkGrey{color: #646566;}


.center{text-align: center;}
table {border: none; border-collapse: collapse;}

p{
	margin-bottom: 15px;
	letter-spacing: 0.02em;
	line-height: 18px;
	font-size: 13px;
}
	h1 {
		color: #fff;
		font-size: 30px;
		font-family: "Gotham A", "Gotham B";
		font-style: normal;
		font-weight: 500;
		margin-bottom: 36px;
	}
	h2 {
		font-size: 16px;
		text-transform: capitalize;
		color: #62a059;
		font-family: "Gotham A", "Gotham B";
		font-style: normal;
		font-weight: 400;
		margin-bottom: 25px;
		letter-spacing: .05em;
	}
	h3{
		font-size: 12px;
		color: #666666;
		font-family: "Gotham A", "Gotham B";
		font-style: italic;
		font-weight: 400;
}
#leftPanel{
	background: #e4e4e4;
	height: 100%;
	overflow: hidden;
	position: fixed;
	width: 25%;
	z-index: 100;
}
#leftPanel table{
	width: 100%;
	height: 100%;
}
.top{vertical-align: top;}
.middle{vertical-align: middle;}
.bottom{vertical-align: bottom;}

#MainPanel{
	position: relative;
}
.mainPanel{
	margin-left: 25%;
	padding: 5%;
}

.rightPanelStart{
	float: right;
	height: 100%;
	padding: 5% 5% 5% 0;
	position: relative !important;
	width: 30%;
}

#RightPanel{
	position: fixed;
	width: 30%;
	top: 0;
	right: 0;
	height: 100%;
	padding: 5% 5% 5% 0;
}
.right{
	width: 35%;
	margin-left: 65%;
}

#readMore{
	text-align: center;
	width: 100%;
	margin: 0 auto 10%;
}
#readMore p{margin-bottom: 8%;}

#buildingWrapper{
	float: left;
	margin-left: 25%;
	padding: 0 2.5% 2.5% 0;
	position: relative;
	top: 0;
	width: 37.5%;
	z-index: 2;
}

#buildingCables{
	background-image: url("../images/elevatorCables.png");
	background-position: 11.4% 100%;
	background-repeat: repeat-y;
	position: relative;
	overflow: hidden;
	z-index: 0;
}

#building{
	z-index: 2;
	position: relative;
	background-image: url("../images/building-BG.svg");
	background-repeat: no-repeat;
	background-size: contain;
	float: left;
	width: 100%;
	margin-top: 50vh;
}
.buildingFloor{
	margin-bottom: -9.2%;
	opacity: 0;
	padding-left: 9.25%;
	position: relative;
	width: 90.5%;
	transition: opacity .5s;
	-webkit-transition: opacity .5s ease-in-out;
}

.buildingActive{
	opacity: 1;
}

.iom{
	margin: 0 auto 5%;
	text-align: center;
	width: 70%;
	max-width: 200px;
}
#mobileIOM{
	position: relative;
	z-index: 100;
	margin: -20% auto 0 !important;
	display: none;
	text-align: center;
	width: 100%;
	background: #fff;
}
#mobileIOM img{max-width: 200px;}

.Introduction{
	text-align: center;
}

#introMap{
	background-color: #c8c8c8;
	background-image: url("../images/intro-map.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 90%;
	height: 100vh;
	margin-left: 25%;
	width: 20%;
	float: left;
}
#introRightWrapper{
	background-color: #267385;
	background-image: url("../images/intro-BG.svg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
	margin-left: 45%;
	width: 55%;
}

#introRight{
	padding: 30% 10% 5%;
	color: #fff;
}

#introRight h1{
	max-width: 500px;
	margin: 2.5% auto 5%;
}

.main-nav{
	margin: 7.5% 0 7.5% 7.5%;
	overflow: hidden;
	position: relative;
}

.main-nav ul{
	background-image: url("../images/nav-BG.svg");
	background-position: 7.25% 0;
	background-repeat: no-repeat;
}
.main-nav li{
	background-repeat: no-repeat;
	margin: 1% 0 0;
	overflow: hidden;
	list-style: none;
}
.main-nav a{
	background-repeat: no-repeat;
	color: #999999;
	float: left;
	font-size: 13px;
	padding: 3% 0 3% 20%;
	text-align: left;
	width: 80%;
}

.floorLink a {
	background-size: 15% 100%;
}
.floorLink{
	background-image: url("../images/nav-tile-grey.svg");
	background-size: 15% 100%;
	background-position: 0 0;
}
.circleLink{
	background-image: url("../images/nav-circle.svg");
	background-position: 5% 0;
	background-size: 6% 100%;
}


.left{
	float: left; margin-right: 5px;
}

#section-1-link:hover, #section-1-link.activeLink{background-image: url("../images/nav-circle-active.svg"); color: #8A8C8F; background-size: 6% 100%; background-position: 5% center;}
#section-2-link:hover, #section-2-link.activeLink{background-image: url("../images/nav-circle-active-darkBlue.svg"); color: #267385; background-size: 6% 100%; background-position: 5% center;}
#section-3-link:hover, #section-3-link.activeLink{background-image: url("../images/nav-tile-orange.svg"); color: #F15F3C;}
#section-4-link:hover, #section-4-link.activeLink{background-image: url("../images/nav-tile-forrest.svg"); color: #448D46;}
#section-5-link:hover, #section-5-link.activeLink{background-image: url("../images/nav-tile-blue.svg"); color: #2BB6C9;}
#section-6-link:hover, #section-6-link.activeLink{background-image: url("../images/nav-tile-gold.svg"); color: #FAA41A;}
#section-7-link:hover, #section-7-link.activeLink{background-image: url("../images/nav-tile-lake.svg"); color: #3E8392;}
#section-8-link:hover, #section-8-link.activeLink{background-image: url("../images/nav-tile-lime.svg"); color: #8DC63F;}
#section-9-link:hover, #section-9-link.activeLink{background-image: url("../images/nav-tile-darkgrey.svg"); color: #8A8C8F;}

#elevator{
	background: rgba(10,10,10, 0.1);
	border-radius: 50%;
	left: -3.6%;
	margin-top: 2.5%;
	padding: 7.5%;
	position: absolute;
	top: 50vh;
	width: 15%;
	z-index: 1;
	-webkit-transition: top 1s, background 1s, width 1s, left 1s;
	-moz-transition: top 1s, background 1s, width 1s, left 1s;
	-o-transition: top 1s, background 1s, width 1s, left 1s;
	transition: top 1s, background 1s, width 1s, left 1s;
}

.research{width: 25% !important; left: -8.45% !important;}

#darkBlueElevator{
	margin-top: -100%;
	width: 100%;
	opacity: 0;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}
.elevatorActive{opacity: 1 !important;}

.button{
	cursor: pointer;
	border: solid 2px #999;
	border-radius: 5px;
	padding: 2%;
	text-align: center;
	vertical-align: middle;
	margin: 2%
}
.startArrow{width: 2.5%;}

.arrow{width: 10px !important;}

.icon{
	background-repeat: no-repeat !important;
	width: 20px;
	height: 20px;
	float: left;
	margin: 0 1.5% 0 0;
}
.icon-research{background: url("../images/stakeholder-icon-research.svg");}
.icon-gov{background: url("../images/stakeholder-icon-government.svg");}
.icon-ind{background: url("../images/stakeholder-icon-industry.svg");}
.icon-hcp{background: url("../images/stakeholder-icon-providers.svg");}
.icon-pha{background: url("../images/stakeholder-icon-publichealth.svg");}
.icon-po{background: url("../images/stakeholder-icon-professional.svg");}
.icon-ei{background: url("../images/stakeholder-icon-education.svg");}
.icon-fam{background: url("../images/stakeholder-icon-individualsfamilies.svg");}

#section-1{z-index: 15; position: relative; background: #C8C8C8;}
#section-2{z-index: 11;}
#section-3{z-index: 10;}
#section-4{z-index: 9;}
#section-5{z-index: 8;}
#section-6{z-index: 7;}
#section-7{z-index: 6;}
#section-8{z-index: 5;}
#section-9{z-index: 4; margin-bottom: 10% !important;}

.width-1-2{
	float: left;
	width: 50%;
}

/* Custom additions   */

#social{
	display: block;
	float: left;
	margin-left: 42px;
	margin-top: 5px;
	width: 150px;
}

#socialWrapper{
	position: absolute;
	margin: 0 auto;
	display: block;
	height: 40px;
	z-index: 200;
	right: 0;
}


#contentWrapper {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	clear: both;
}

@keyframes fade {
	from { opacity: 1.0; transform: scale(1);}
	50% { opacity: 0.4; transform: scale(1.1); }
	to { opacity: 1.0; transform: scale(1);}
}

@-webkit-keyframes fade {
	from { opacity: 1.0; -webkit-transform: scale(1);}
	50% { opacity: 0.4; -webkit-transform: scale(1.1);}
	to { opacity: 1.0; -webkit-transform: scale(1);}
}

@keyframes changeColor {
	from { transform: scale(1);  color: #A5CBAA;}
	50% { transform: scale(1.2); color: #F8C72F;}
	to { transform: scale(1); color: #A5CBAA;}
}

@-webkit-keyframes changeColor {
	from { -webkit-transform: scale(1);  color: #A5CBAA;}
	50% { -webkit-transform: scale(1.2); color: #F8C72F;}
	to { -webkit-transform: scale(1); color: #A5CBAA;}
}

@keyframes changeUpArrow {
	from { transform: scale(1); opacity: .4;}
	50% { transform: scale(1.2); opacity: 1;}
	to { transform: scale(1); opacity: .4;}
}

@-webkit-keyframes changeUpArrow {
	from { -webkit-transform: scale(1); opacity: .4;}
	50% { -webkit-transform: scale(1.2); opacity: 1;}
	to { -webkit-transform: scale(1); opacity: .4;}
}

@keyframes changeDownArrow {
	from { transform: scale(1);  opacity: .4;}
	50% { transform: scale(1.2); opacity: 1;}
	to { transform: scale(1); opacity: .4;}
}

@-webkit-keyframes changeDownArrow {
	from { -webkit-transform: scale(1); opacity: .4;}
	50% { -webkit-transform: scale(1.2); opacity: 1;}
	to { -webkit-transform: scale(1); opacity: .4;}
}

.blink {
	animation:fade 2000ms infinite;
	-webkit-animation:fade 2000ms infinite;
}

.startBlink{
	animation:changeColor 2000ms infinite;
	-webkit-animation:changeColor 2000ms infinite;
}
.upBlink{
	animation:changeUpArrow 2000ms infinite;
	-webkit-animation:changeUpArrow 2000ms infinite;
}
.downBlink{
	animation:changeDownArrow 2000ms infinite;
	-webkit-animation:changeDownArrow 2000ms infinite;
}

.blink:hover, .startBlink:hover{animation: none;}

#mobileContent{display: none; position: relative; padding: 50px 30px;}
.mobile{float: left; clear: both; margin-bottom: 40px;}


@media screen and (max-width: 980px) and (min-width: 721px) {


	#leftPanel {display: none;}

	#introMap{margin-left:0; width: 30%; }
	#introRightWrapper{ margin-left: 30%; width: 70%}
	#buildingWrapper{margin-left: 2.5%}
	#RightPanel{width: 50%;}

	#mobileIOM{display: block;}

	.buildingFloor{
		width: 90.75%;
		margin-bottom:-9.45%;
	}

	@-moz-document url-prefix() {
		.buildingFloor{margin-bottom:-9.32% !important;}
	}

}

@media screen and (max-width: 720px) {

	#leftPanel, #buildingWrapper, #RightPanel, #explore{display: none;}

	#introMap{margin-left:0; width: 30%; }
	#introRightWrapper{ margin-left: 30%; width: 70%}

	#mobileContent, #mobileIOM{display: block;}

}