body, html {
  margin: 0;
  height: 100%;
  margin-top: 5%;
}
.content{
  width: 100%;
  margin: 0%;

  overflow: hidden;
  margin-bottom: 6%;

}
.content-body{
  margin: 7% 5% 2% 5%;
}
.content-header{
  width: 100%;
  height: 18vw;

}
.content-header img{
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}



@media only screen and (max-width: 768px) {
.content-header{
  margin-top: 9%;
}
.header-body{
      margin-top: 19%;
}
  .header-body h1{
        font-size: 8vw;
  }

  }


      .cont{
  padding:0% 0%;
  overflow: hidden;
  }

  .pres{
    width: 96%;
    height: auto;
  }
  .mv{
    width: 100%;

    height: 40vw;
        overflow: hidden;
        margin-bottom:3%;

  }
 
  .mission{
    padding: 2% 4%;
    float: left;
    width: 38%;
     color: black;
     margin: 2%;
    height: 100%;
        background: #f0f0f0;
  }
   .mission p{
    font-family: century gothic;
    font-size: 1.2vw;
    line-height: 2vw;
    color: black;
     margin: 0;
  }
 .vision{
    background: #f0f0f0;
    padding: 2% 4%;
    float: left;
    width: 38%;
     color: black;
    height: 100%;
      margin: 2%;
  }
  .vision p{
    margin: 0;
    font-family: century gothic;
    font-size: 1.2vw;
    line-height: 2vw;
    color: black;
  }
  .pres-words{
     padding: 1% 2%;
    float: left;
    width: 100%;
     color: black;
    height: 100%;
  }
  .pres-img{
    float: left;
    padding-right:  2%;
    padding-bottom: 2%;
    width: 50%;
     height: 100%;
  }
  .pres-img img{
    width: 100%;
    height: 100%;
  }
  .pres-words p{
    margin-top: 1.5%;
    font-family: century gothic;
    font-size: 1vw;
    line-height: 1.7vw;
    color: black;
  }
   .pres-words h1{
    font-family: century gothic;
    color: black;
    font-size: 2.5vw;
    text-align: center;
    margin: 0;
  }
  .pres-words h2{
    font-family: century gothic;
    color: black;
    font-size: 1.8vw;
    font-weight:lighter;
       text-align: center;
  }

  .line{
    background: black;
    padding: .6%;
    width: 1%;
    height: 16.5%;
    float: left;
  }
    .line2{
    background: black;
    padding: 2% 0%; 
    width: 10%;
    margin-left: 45%;
    
    float: left;
  }
  .mv ul{
    list-style-type: none;
    margin-top: 3%;
    
  }
  .mv li{
     height: 30px;
    line-height: 30px;
      margin: 2% 0%;
      font-size: 1.1vw;
      font-weight: bolder;
      color: black;
  }
  .mv h1{
    font-family: century gothic;
    color: black;
    
    font-size: 2.5vw;
  }
  #fas{

    float: left;
    font-size:2vw;
    color: #1472d7;
    margin-right: 1%;
  }

  @media only screen and (max-width: 700px) {
    .line{
    background: black;
    padding: 0%;
    width: 00%;
    height: 0%;
    float: left;
  }
      .pres-words p{
    font-family: century gothic;
    font-size: 3vw;
    line-height: 5vw;
    color: black;
     text-align: center;
  }
   .pres-words h1{
    font-family: century gothic;
    color: black;
    margin-left: 0%;
    font-size: 5vw;
    text-align: center;
  }
  .pres-words h2{
    font-family: century gothic;
    color: black;
    text-align: center;
    margin-left: 0%;
    font-size: 3vw;
  }
     .pres{
    width: 96%;
    margin: 5% 0%;
    height: auto;

  }
        .cont{
   margin:0% 0%;
  padding:0% 0%;

  }

  .mv{
    width: 100%;
    height: 23vw;
   

  }
 .mission{
    width: 90%;
  }
    .mv{
    height: auto;
  }
 .mv h1{
    font-size: 6vw;
  }
 .vision{
    width: 90%;
  }
  .vision p{
    font-family: century gothic;
    font-size: 4vw;
    line-height: 6vw;
    color: black;
  }
   .mission p{
    font-family: century gothic;
    font-size: 4vw;
    line-height: 6vw;
    color: black;
  }
    .mv ul{
      margin-bottom: 10%;
    list-style-type: none;
  }
  .mv li{
     height: 6vw;
    line-height: 6vw;
      margin: 2% 0%;
      font-size: 3.5vw;
      font-weight: bolder;
      color: black;
  }
  #fas{
    float: left;
    font-size:6vw;
    color: #1472d7;
    margin-right: 1%;
  }
  .pres-words{
    width: 100%;
  }
  .pres-img{
    width: 100%;
  }
   
  }