@font-face {
  font-family: 'Arial Bold';
  src: url('ArialMTPro-Bold.woff') format('woff'),
       url('ArialMTPro-bold.ttf') format('truetype'); 

       font-family: 'arial regular';
  src: url('ArialMTPro-Regular.woff') format('woff'),
       url('ArialMTPro-regular.ttf') format('truetype'); 
}
body{

	overflow: hidden;
	
}

.nav{

  display: inline-block;
  font-family: 'arial regular', arial, helvetica, sans-serif;
  font-size: 2vw;
  float: right;
  margin-left: 6%;

}


.nav a{

  text-decoration: none;
  color: #55a0ff;
  font-family: 'arial regular', arial, helvetica, sans-serif;
}

.nav a:hover {
    color: #173c71;

  }

#navcontainer{

  display: inline-block;
  width: 70vw;
  margin-top: 3%;
  float: right;
  font-family: 'Arial Bold', arial, helvetica , sans-serif;
}

	#main{

		width: 100vw;
		height: 90vh;
		display: inline-block;
		margin-top: 2%;
		padding-top: 3%;
		background-color: #eaeced;
		overflow: hidden;

	}


	#docmain{

		width: 49vw;
	height: 80vh;
	float: left;
	display: inline-block;
	}




	.doc{

		width:47vw;
		display: inline-block;
		text-align: center;
		font-family: 'Arial Bold', helvetica, sans-serif;
		font-size: 2vw;
		margin-bottom: 2.5vw;
		background-color: #55a0ff;
		padding-top: 2%;
		padding-bottom: 2%;
		color: white;
		margin-left: 2vw;
		margin-right:1vw;

	}



	.doc:hover{
	background-color: #173c71;

	}

	


	a{

		text-decoration: none;
		color: white;
		text-align: center;
	}


#captionmain{

	width: 50vw;
	height: 80vh;
	display: inline-block;
	float: right;

}

#caption{

	text-align: left;
	width:40vw;
	float: left;
	margin-left: 2vw;
	line-height: 130%;
	letter-spacing: 150%;
	font-size: .9em;
	color:black;
	display: inline-block;
	font-family: 'Arial Regular', arial, helvetica, sans-serif;
}

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



  #navcontainer {
    float: left;
    width: 100%;
  }

  .nav{
  float: right;
  font-size: 3vw;
  margin-left: 0%;
  padding-right: 10%;

}