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

}


.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;
}


#joinus{

	width: 100%;
	height: 15%;
  margin-top: 2%;
	background-color: #55a0ff;
	display: inline-block;
  text-align: left;
  text-align: center;
}


#join{

width: 36%;
 margin-top: 5%;
  float: right;
  color: white;
  font-family: 'Arial', arial, helvetica, sans-serif;
  font-size: 1.7em;

}


#title{

 margin-top: 3%;
 margin-left:35%;
  display: inline-block;
  float: center;
  color: white;
  font-family: 'Arial', arial, helvetica, sans-serif;
  font-size: 2.7em;
  font-style: italic;


}


#layout {
  text-align: center;
  display: inline-block;
  width: 100%;
  height: 90%;
}

#center {
  text-align: left;
  width: 54%;
  height: 100%;
  background-color: #173c71;
  display:block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 5%;
  z-index: 1;
}

#pic{

  width: 23%;
  height: 70%;
 z-index:-1;
  float: left;


}



#text {
 float:left;
  width: 43%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-family: arial;
  padding-left: 5%;
  padding-top: 5%;
  font-size: 1em;
  line-height: 140%;
  letter-spacing: .3px;
}


.bold{

  font-weight: bold;
  line-height: 150%;
  margin-bottom: 1em;
}
#contactmain p{

  font-size: 65%;

}


#contactmain{

  float: right;
  display: inline-block;
  width: 21%;
  height: 70%;
  font-size: 120%;
  font-family: arial;
  text-align: left;
  color: #173c71;
  padding-right: 1%;


}

#contactmain h1{

  font-size: 150%;

}

.contactmain{

  line-height: 30%;

}

#apply1{

  width: 100%;
  float: right;
  display: inline-block;
  color: #173c71;
  margin-bottom: 10%;

}

#apply{

  width: 100%;
  float: right;
  display: inline-block;
  color: #173c71;
  margin-bottom: 10%;
  font-size: .72em;

}


.apply {

line-height: 200%;

}


#download{

  border-radius:10px;
    background-color: #173c71;
    padding: 10px; 
    width: 30%;
    margin-top: 5%; 
    color: white;
    text-align: center;
    font-size: 1vw;
}

#download a {

  text-decoration: none;
  color: white;
}


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

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

  #pic{

visibility: hidden;
width: 0;
height: 0;

  }

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

}


#contactmain{

  float: right;
  margin-right: 20%;
  display: inline-block;
  width: 23%;
  height: 70%;
  font-size: 120%;
  font-family: arial;
  text-align: left;
  color: #173c71;
  padding-right: 1%;
}

#join{

  width: 0;
  visibility: hidden;
}


#title{

 margin-top: 3%;
 margin-right:30%; 
  display: inline-block;
  float: center;
  color: white;
  font-family: 'Arial', arial, helvetica, sans-serif;
  font-size: 2.5em;



}


 #text {
 float:left;
  width: 80%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-family: arial;
  padding-left: 5%;
  padding-top: 5%;
  font-size: 1em;
  line-height: 140%;
  letter-spacing: .3px;
}

#apply{

  float: left;
}

#center {
  text-align: left;
  width: 55%;
  margin-left: 10%;
  min-height: 80%;
  height: auto;
  background-color: #173c71;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  overflow-y: scroll;
  float: left;
}

#contact{

  float:left;
  margin-right: 30%;
  font-size: 1.3em;
  display: inline-block;
  margin-left: 3%;
  background-color: red;
}

#download{

  font-size: .7em;
  width: 40%;
  color:white;
}


}