body, html{
	background: #ffffff;
  margin:0;
	height: 100%;
		font-family: 'Maven Pro', sans-serif;
}

@-ms-viewport{
  width: device-width;
}

.bg {

    height: 100%;
		position: fixed;
		left: 50%;
		transform: translate(-50%, 0);
}

.rightarrow{
	width:25vw;
	float:right;
	height; auto;
	margin-top:35vh;
}

.leftarrow{
	width:25vw;
	float:left;
	height; auto;
	margin-top:35vh;
}

.containerleft{
  width:1950%;
  height: 55vh;
	margin-top: 20vh;
	position:absolute;

}
.containerright{
  width:1930%;
  height: 55vh;
	margin-top: 22vh;
	position:absolute;

}

.frame{
  display:inline-block;
  height:55vh;
  vertical-align: top;
	text-align: right;
	margin-right:-10px;
}


.title{
	font-family: 'Bowlby One SC', cursive;
	font-size:  60px;
 width: 40vw;
	position: fixed;
	left: 70%;
	transform: translate(-50%, 0);

	/* text-align: center; */

}

.titleright{
	position: fixed;
	left: 20px;
	top:15px;
	font-family: 'Maven Pro', sans-serif;
	font-weight: 700;
	font-size: 30px;
text-decoration: none;


}

#head a:visited{
	color:#559cbe;
}

.titleright a{
	color:#559cbe;

}

#linkleft{
	background: #559cbe;
}

#linkright{
	background: #559cbe;
}


.links{
	position: relative;
	white-space: nowrap;

	color: white;
 background: #d0d0d0;
	font-size: 12px;
	font-weight: 400;
	right:160px;
	top:25px;
	display:inline-block;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	text-decoration: none;
		}


.links a{
			color:white;
			text-decoration: none;
}

.links:hover{
background: #559cbe;
}

.about2{

	color: white;
	/* width:20px; */
 background: #d0d0d0;
	font-size: 12px;
	font-weight: 400;
	width:30px;
	 margin-top: 1px;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;

		}

		.about2 a{
			color:white;
			text-decoration: none;
		}

		.about2:hover{
		background: #559cbe;
		}

		.aboutcontent{
			width: 60vw;
			transform: translate(20vw);
			position: fixed;
			margin-top:30vh;
			font-size: 15px;
			padding-left: 20px;
			padding-right: 20px;
			padding-top: 10px;
			padding-bottom: 10px;
			background: white;
			z-index: 999;
			border: 15px solid #559cbe;
			display:none;
		}

		.aboutexit img {

			width:20px;
			height: 20px;
		}

		.aboutexit {
			background: none;
			 border:none;
			 right:20px;
			 top: 20px;
			 position: absolute;
		}

.frame img {
    width: auto;
    height: 55vh;
}

.frame p{
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	text-decoration: none;
	color:	 #595959;
	margin-top:10px;
}

.scroll {
  position: fixed;
  top: 85vh;
  z-index: 1;
  width: 100vw;
}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 4px;
  background:#d0d0d0;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 4px;
  background: #559cbe;
  width: 0%;
}

.popup{
	width:50vw;
	height:100vh;
	position: fixed;
	z-index: 99;
	background: white;
	left:-50vw;
	font-family: 'Maven Pro', sans-serif;
		overflow: scroll;
}

.popuptitle{
	font-family: 'Maven Pro', sans-serif;
	font-weight: 700;
	font-size: 70px;
	color:#559cbe;
	margin-left: 2vw;
	margin-top: 3vh;
  width: calc( 100% - 2vw - 5vw );
}

.popupcontent p {
	margin-left: 2vw;
	width: calc( 100% - 2vw - 5vw );
}

.popupcontent img {
	margin-left: 2vw;
	width: calc( 100% - 2vw - 5vw );
	padding-top: 10px;
}

.popupcontent h4{
	margin-left: 2vw;
	width: calc( 100% - 2vw - 5vw );
}

.frame .popupcontent{
	display: none;
}

.exit img {
		margin-top: 3vh;
	width:40px;
	height: 40px;
}

.exit {
	background: none;
	 border:none;
	 right:20px;
	 top: 20px;
	 position: absolute;
}

button:focus {outline:0 !important;}

#marker13{

	 margin-left:34vw;
	 position: absolute;
	 top: -12.5px;
}

#marker225{
		 margin-left:71%;
		 position: absolute;
		 top: -12.5px;
}

#marker27{

		 margin-left:80%;
		 position: absolute;
		 top: -12.5px;
}

#marker285{

		 margin-left:84.2%;
		 position: absolute;
		 top: -12.5px;
}

#marker29{

		 margin-left:87%;
		 position: absolute;
		 top: -12.5px;
}

#marker31{

		 margin-left:94%;
		 position: absolute;
		 top: -12.5px;
}


/* left markers */

#marker4{
		 margin-left:5%;
		 position: absolute;
		 top: -12.5px;
}

#marker6{
		 margin-left:7%;
		 position: absolute;
		 top: -12.5px;
}

#marker12{
		 margin-left:19%;
		 position: absolute;
		 top: -12.5px;
}

#marker17{

		 margin-left:30%;
		 position: absolute;
		 top: -12.5px;
}

#marker20{
		 margin-left:35%;
		 position: absolute;
		 top: -12.5px;
}


#marker21{

		 margin-left:37%;
		 position: absolute;
		 top: -12.5px;
}


#marker24{
		 margin-left:42%;
		 position: absolute;
		 top: -12.5px;
}

#marker44{
		 margin-left:90%;
	 position: absolute;
	 top: -12.5px;
}


.pointers{
	position:absolute;
	top:25px;
font-family: sans-serif;
font-size: 14px;
color: #559cbe;
	font-family: 'Maven Pro', sans-serif;
	text-align: center;

}

.pointersup{
	transform: translateX(-50%);
	position: absolute;
	top: -25px;
	white-space: nowrap;
}

.pointersdown{
	position: absolute;
	top:30px;
		transform: translateX(-50%);
			white-space: nowrap;
}

.pointers:before{
	content:"";
	background: #d0d0d0;
	border-radius: 50%;
	display: block;
	width: 25px;
	height:25px;
	    /* transform: translate(50%); */
}

.pointers:hover:before{
	background: #559cbe !important;
}

.pointers:hover{
	color:#27617c;
}

/* .pointersup{
	position:absolute;
	top:-25px;
	transform:translateX(-45%);

text-align: center;
background:  #B8B8B8;


} */