body, html {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

html {
	-webkit-transition: left .2s ease;
}

.parallaxWrap:before {
	overflow: visible !important;
}

.parallaxWrap {
	width: 100%;
	height: 100%;
}

.skyline {
	overflow: hidden;
	background: url(../images/parallaxScroll/skyline.png) left top repeat-x;
	-webkit-background-size: auto 100%;
	-ms-background-size: auto 100%;
	-o-background-size: auto 100%;
	-moz-background-size: auto 100%;
	background-size: auto 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*-webkit-transition:background-position 2s ease;
	transition: background-position 2s ease;*/
	z-index: 1;
}

	.skyline:hover {
		/*background-position: 1000px;*/
	}
	
.scrollNav {
	position: absolute;
	width: 98%;
	bottom: 50%;
	left: 1%;
	z-index: 20;
}

	.scrollNav .leftArrow {
		border-radius: 50%;
		width: 75px;
		height: 75px;
		background: #000;
		float: left;
		text-align: center;
		opacity: 0.5;
	}
	
	.scrollNav .rightArrow {
		border-radius: 50%;
		width: 75px;
		height: 75px;
		background: #000;
		float: right;
		text-align: center;
		opacity: 0.5;
	}
	
	.scrollNav [class^="icon-"] {
		color: #fff;
		font-size: 40px;
		margin-top: 18px;
		display: block;
	}

#grass {
	overflow: hidden;
	background: url(../images/parallaxScroll/grass.png) left bottom repeat-x;
	-webkit-background-size: auto 100%;
	-ms-background-size: auto 100%;
	-o-background-size: auto 100%;
	-moz-background-size: auto 100%;
	background-size: auto 100%;
	background-position: 0px 0px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*-webkit-transition:background-position 2s ease;*/
	/*transition: background-position 2s ease;*/
}

	.grass:hover {
		/*background-position: -1000px;*/
	}
	
.cityBackdrop {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
}

	.backdrop1 {
		background: url(../images/parallaxScroll/backdrop1.png) bottom left no-repeat;
		position: absolute;
		bottom: 32.6%;
		left: 0;
		width: 847px;
		height: 271px;
		z-index: -1;
		overflow: hidden;
	}
	
	.backdrop2 {
		background: url(../images/parallaxScroll/backdrop2.png) bottom left no-repeat;
		position: absolute;
		bottom: 32.6%;
		left: 847px;
		width: 1074px;
		height: 268px;
		z-index: -1;
		overflow: hidden;
	}
	
	.backdrop3 {
		background: url(../images/parallaxScroll/backdrop3.png) bottom left no-repeat;
		position: absolute;
		bottom: 32.6%;
		left: 1921px;
		width: 474px;
		height: 213px;
		z-index: -1;
		overflow: hidden;
	}
	
	.backdrop4 {
		background: url(../images/parallaxScroll/backdrop4.png) bottom left no-repeat;
		position: absolute;
		bottom: 32.6%;
		left: 2395px;
		width: 573px;
		height: 265px;
		z-index: -1;
		overflow: hidden;
	}
	
.campus {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.tree1 {
	background: url(../images/parallaxScroll/tree1.png) left bottom no-repeat;
	background-size: 95%;
	position: absolute;
	bottom: 32%;
	left: 175px;
	width: 94px;
	height: 138px;
	z-index: 11;
}

.tree2 {
	background: url(../images/parallaxScroll/tree2.png) left bottom no-repeat;
	position: absolute;
	bottom: 32.6%;
	left: 370px;
	width: 161px;
	height: 127px;
	z-index: 8;
}

.tree3 {
	background: url(../images/parallaxScroll/tree1.png) left bottom no-repeat;
	background-size: 95%;
	position: absolute;
	bottom: 32.6%;
	left: 770px;
	width: 94px;
	height: 138px;
	z-index: 11;
	/* Flip Horizontally */
	-moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.tree4 {
	background: url(../images/parallaxScroll/tree2.png) left bottom no-repeat;
	position: absolute;
	bottom: 32.9%;
	left: 1370px;
	width: 161px;
	height: 127px;
	z-index: 9;
}

.tree5 {
	background: url(../images/parallaxScroll/tree1.png) left bottom no-repeat;
	position: absolute;
	bottom: 32.9%;
	left: 1800px;
	width: 140px;
	height: 203px;
	z-index: 9;
}

.tree6 {
	background: url(../images/parallaxScroll/tree3.png) left bottom no-repeat;
	position: absolute;
	bottom: 32.9%;
	left: 2370px;
	width: 179px;
	height: 202px;
	z-index: 5;
}


.building1 {
	background: url(../images/parallaxScroll/building1.png) left bottom no-repeat;
	position: absolute;
	bottom: 32.6%;
	left: 25px;
	width: 469px;
	height: 148px;
	z-index: 10;
}

.building2 {
	background: url(../images/parallaxScroll/building2.png) left bottom no-repeat;
	position: absolute;
	bottom: 32.6%;
	left: 496px;
	width: 304px;
	height: 110px;
	z-index: 9;
}

.building3 {
	background: url(../images/parallaxScroll/building3.png) left bottom no-repeat;
	position: absolute;
	bottom: 32.2%;
	left: 811px;
	width: 670px;
	height: 145px;
	z-index: 10;
}

.building4 {
	background: url(../images/parallaxScroll/building4.png) left bottom no-repeat;
	position: absolute;
	bottom: 32.8%;
	left: 1446px;
	width: 442px;
	height: 313px;
	z-index: 8;
}

.building5 {
	background: url(../images/parallaxScroll/building5.png) left bottom no-repeat;
	position: absolute;
	bottom: 32.8%;
	left: 1888px;
	width: 530px;
	height: 186px;
	z-index: 6;
}

.students {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
}

.students1 {
	background: url(../images/parallaxScroll/students1.png) left bottom no-repeat;
	position: absolute;
	bottom: 13%;
	left: 85px;
	width: 249px;
	height: 217px;
	z-index: 15;
}

.students2 {
	background: url(../images/parallaxScroll/students2.png) left bottom no-repeat;
	position: absolute;
	bottom: 25%;
	left: 1040px;
	width: 190px;
	height: 96px;
	z-index: 14;
}

.students3 {
	background: url(../images/parallaxScroll/students3.png) left bottom no-repeat;
	position: absolute;
	bottom: 13%;
	left: 1550px;
	width: 349px;
	height: 188px;
	z-index: 13;
}

.navigation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
}

.parallaxWrap .bubbleMenu {
	border-radius: 50%;
	width: 170px;
	height: 170px;
	background: #e50b6a;
	text-align: center;
	position: absolute;
	color: #fff;
	display: table;
}

	.parallaxWrap .bubbleMenu h2 {
		padding: 44% 0 0;
		margin: 0;
		color: #fff;
		line-height: 1em;
		font-size: 1.1em;
		text-transform: uppercase;
	}
	
	.parallaxWrap .bubbleMenu a {
		margin: 0;
		color: #fff;
		line-height: 1em;
		font-size: 1.1em;
		text-transform: uppercase;
		display: table-cell;
		width: 170px;
		height: 170px;
		font-weight: bold;
		text-decoration: none;
		vertical-align: middle;
		border-radius: 50%;
	}
	
		.parallaxWrap .bubbleMenu a span {
			display: block;
		}
	

.parallaxWrap .tuition {
	bottom: 50%;
	left: 150px;	
}

.parallaxWrap .intStudents {
	bottom: 57%;
	left: 550px;	
}

.parallaxWrap .goldStories {
	bottom: 50%;
	left: 900px;	
}

.parallaxWrap .academics {
	bottom: 50%;
	left: 900px;	
	margin-bottom: 200px;
}

.parallaxWrap .takeTour {
	bottom: 55%;
	left: 1400px;	
	width: 200px;
	height: 200px;
	background: #fff;
}

	.parallaxWrap .takeTour h2 {
		color: #e50b6a;
		font-size: 1.9em;
		padding: 34% 0 0;
	}
	
	.parallaxWrap .takeTour a {
		color: #e50b6a;
		font-size: 1.9em;
		text-decoration: none;
		width: 200px;
		height: 200px;
	}

.parallaxWrap .tour360 {
	bottom: 55%;
	left: 1250px;
	margin-bottom: 200px;	
	background: #fff;
}

	.parallaxWrap .tour360 a {
		color: #e50b6a;
		font-size: 1.1em;
		text-decoration: none;
	}

.parallaxWrap .chatOnline {
	bottom: 55%;
	left: 1575px;
	margin-bottom: 200px;	
	background: #fff;
}

	.parallaxWrap .chatOnline a {
		color: #e50b6a;
		font-size: 1.1em;
		text-decoration: none;
	}

.parallaxWrap .history {
	bottom: 50%;
	left: 2000px;	
}

.parallaxWrap .connectingLine {
	height: 2px;
	background: #fff;
	box-shadow: 0 0 3px #fff;
	position: absolute;
	z-index: -1;
}

#infTui.connectingLine {
	-ms-transform: rotate(0);
	-ms-transform-origin: 0 0;
	-o-transform: rotate(0);
	-o-transform-origin: 0 0;
	-moz-transform: rotate(0);
	-moz-transform-origin: 0 0;
	-webkit-transform: rotate(0);
	-webkit-transform-origin: 0 0;
	transform: rotate(0);
	transform-origin: 0 0;
	width: 235px;
	bottom: 50%;
	left: 0;
	bottom: -moz-calc(50% + 85px); 
	bottom: -webkit-calc(50% + 85px); 
	bottom: -o-calc(50% + 85px); 
	bottom: -ms-calc(50% + 85px); 
	bottom: calc(50% + 85px); 
}

#golAca.connectingLine {
	-ms-transform: rotate(-90deg);
	-ms-transform-origin: 0 0;
	-o-transform: rotate(-90deg);
	-o-transform-origin: 0 0;
	-moz-transform: rotate(-90deg);
	-moz-transform-origin: 0 0;
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: 0 0;
	transform: rotate(-90deg);
	transform-origin: 0 0;
	width: 200px;
	bottom: 50%;
	left: 985px;
	bottom: -moz-calc(50% + 85px); 
	bottom: -webkit-calc(50% + 85px); 
	bottom: -o-calc(50% + 85px); 
	bottom: -ms-calc(50% + 85px); 
	bottom: calc(50% + 85px); 
}

#tuiStu.connectingLine {
	-ms-transform: rotate(-10deg);
	-ms-transform-origin: 0 0;
	-o-transform: rotate(-10deg);
	-o-transform-origin: 0 0;
	-moz-transform: rotate(-10deg);
	-moz-transform-origin: 0 0;
	-webkit-transform: rotate(-10deg);
	-webkit-transform-origin: 0 0;
	transform: rotate(-10deg);
	transform-origin: 0 0;
	width: 400px;
	bottom: 50%;
	left: 235px;
	bottom: -moz-calc(50% + 85px); 
	bottom: -webkit-calc(50% + 85px); 
	bottom: -o-calc(50% + 85px);
	bottom: -ms-calc(50% + 85px); 
	bottom: calc(50% + 85px);
}

#stuGol.connectingLine {
	-ms-transform: rotate(12.5deg);
	-ms-transform-origin: 0 0;
	-o-transform: rotate(12.5deg);
	-o-transform-origin: 0 0;
	-moz-transform: rotate(12.5deg);
	-moz-transform-origin: 0 0;
	-webkit-transform: rotate(12.5deg);
	-webkit-transform-origin: 0 0;	
	transform: rotate(12.5deg);
	transform-origin: 0 0;
	width: 350px;
	bottom: 55%;
	left: 635px;
	bottom: -moz-calc(57% + 85px); 
	bottom: -webkit-calc(57% + 85px); 
	bottom: -o-calc(57% + 85px); 
	bottom: -ms-calc(57% + 85px); 
	bottom: calc(57% + 85px);
}

#golTak.connectingLine {
	-ms-transform: rotate(-8.0deg);
	-ms-transform-origin: 0 0;
	-o-transform: rotate(-8.0deg);
	-o-transform-origin: 0 0;
	-moz-transform: rotate(-8.0deg);
	-moz-transform-origin: 0 0;
	-webkit-transform: rotate(-8.0deg);
	-webkit-transform-origin: 0 0;
	transform: rotate(-8.0deg);
	transform-origin: 0 0;
	width: 500px;
	bottom: 60%;
	left: 985px;
	bottom: -moz-calc(50% + 85px); 
	bottom: -webkit-calc(50% + 85px); 
	bottom: -o-calc(50% + 85px); 
	bottom: -ms-calc(50% + 85px); 
	bottom: calc(50% + 85px);
}

#takTou.connectingLine {
	-ms-transform: rotate(-135deg);
	-ms-transform-origin: 0 0;
	-o-transform: rotate(-9deg);
	-o-transform-origin: 0 0;
	-moz-transform: rotate(-135deg);
	-moz-transform-origin: 0 0;
	-webkit-transform: rotate(-135deg);
	-webkit-transform-origin: 0 0;
	transform: rotate(-135deg);
	transform-origin: 0 0;
	width: 200px;
	bottom: 57%;
	left: 1500px;
	bottom: -moz-calc(57% + 100px); 
	bottom: -webkit-calc(57% + 100px); 
	bottom: -o-calc(57% + 100px); 
	bottom: -ms-calc(57% + 100px); 
	bottom: calc(57% + 100px); 
}

#takCha.connectingLine {
	-ms-transform: rotate(-45deg);
	-ms-transform-origin: 0 0;
	-o-transform: rotate(-45deg);
	-o-transform-origin: 0 0;
	-moz-transform: rotate(-45deg);
	-moz-transform-origin: 0 0;
	-webkit-transform: rotate(-45deg);
	-webkit-transform-origin: 0 0;
	transform: rotate(-45deg);
	transform-origin: 0 0;
	width: 200px;
	bottom: 57%;
	left: 1500px;
	bottom: -moz-calc(57% + 100px); 
	bottom: -webkit-calc(57% + 100px); 
	bottom: -o-calc(57% + 100px); 
	bottom: -ms-calc(57% + 100px); 
	bottom: calc(57% + 100px); 	
}

#takHis.connectingLine {
	-ms-transform: rotate(8deg);
	-ms-transform-origin: 0 0;
	-o-transform: rotate(8deg);
	-o-transform-origin: 0 0;
	-moz-transform: rotate(8deg);
	-moz-transform-origin: 0 0;
	-webkit-transform: rotate(8deg);
	-webkit-transform-origin: 0 0;
	transform: rotate(8deg);
	transform-origin: 0 0;
	width: 600px;
	bottom: 50%;
	left: 1500px;
	bottom: -moz-calc(57% + 85px); 
	bottom: -webkit-calc(57% + 85px); 
	bottom: -o-calc(57% + 85px);
	bottom: -ms-calc(57% + 85px); 
	bottom: calc(57% + 85px); 	
}

#hisInf.connectingLine {
	-ms-transform: rotate(0);
	-ms-transform-origin: 0 0;
	-o-transform: rotate(0);
	-o-transform-origin: 0 0;
	-moz-transform: rotate(0);
	-moz-transform-origin: 0 0;
	-webkit-transform: rotate(0);
	-webkit-transform-origin: 0 0;
	transform: rotate(0);
	transform-origin: 0 0;
	width: 485px;
	bottom: 50%;
	left: 2085px;
	bottom: -moz-calc(50% + 85px); 
	bottom: -webkit-calc(50% + 85px); 
	bottom: -o-calc(50% + 85px);
	bottom: -ms-calc(50% + 85px); 
	bottom: calc(50% + 85px); 	
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{

	.parallaxWrap {
		overflow-x: scroll;
	}
	
	.skyline {
		width: 2560px;
	}
	
	.grass {
		width: 2560px;
	}
	
	.navigation {
		left: 0 !important;
	}
	
	.cityBackdrop {
		left: 0 !important;
	}
	
	.campus {
		left: 0 !important;
	}
	
	.students {
		left: 0 !important;
	}
}