body {
  font-size: 100%;
  overflow: auto;
  width: 98%;
  margin: auto;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ede7da;
  /*------------------------screen---------------------*/
}
body div.homeBG {
  width:100%;
  background-image: url("../images/background/coffeeandcomputer.jpg");
  background-repeat: no-repeat;
}
body div.wrap {
  overflow: auto;
  height: 100%;
}

/*--------------Side menu------------------*/
body div.wrap div.side-menu {
  width:15%;
  position: fixed;
  z-index: 1;
  /*overflow-x: hidden;*/
  padding: 30px;
  background-color: #081929;
  margin-top: 20px;
  margin-left: 15px;

}

body div.wrap div.side-menu i.icon-cog {
  color: #5f5f5f;
  font-size: 150%;
  margin-left: 45%;
  margin-right: auto;
  /*pdding-top: -35px;*/
}
body div.wrap div.side-menu h6 {
  font-size: 70%;
  color: #ecd6ac;
  text-align: center;
  font-family: "Times";
  padding-top: 5px;
}
body div.wrap div.side-menu p {
  font-size: 40%;
  font-style: italic;
  color: #5f5f5f;
  text-align: center;
}
body div.wrap div.side-menu nav.nav {
  border-top: 1px solid #5f5f5f;
  border-bottom: 1px solid #5f5f5f;
}
body div.wrap div.side-menu nav.nav a {
  font-size: 85%;
  color: #00a9e2;
  font-family: "Times";
  margin-bottom: -6px;
}
body div.wrap div.side-menu nav.nav a:hover {
  font-style: italic;
  color: #f5deb3;
}
body div.wrap div.side-menu nav.nav div.nest-bar {
  color: #5f5f5f;
}
body div.wrap div.side-menu nav.nav div.nest-bar ul {
  margin: auto auto -5px 25px;
}

body div.wrap div.side-menu #time {
  font-size: 80%;
  color: #84817a;
  text-align: center;
}

/*---------------------------------home page-------------------------------*/
body div.wrap div div.main-menu {
  left: 15%;
  margin-top: 15px;
  margin-bottom: 25px;
  padding-left: 5%;
  border-top: 1px solid #5f5f5f;
  border-bottom: 1px solid #5f5f5f;
  text-align: center;
  height: 500px;
}

body div.wrap div div.main-menu #welcome{
  margin-top: 50px;
}

body div.wrap div div.main-menu #welcome img {

  width:45%;
  height: 100%;
}

body div.wrap div div.main-menu #welcome h1 {
  font-size: 260%;
  color: #00a9e2;
  font-family: "Alex Brush";
  font-weight: bold;
}

body div.wrap div div.main-menu button#playVid {
  color: #ecd6ac;
  background-color: #233757;
  width: 18%;
  border-radius: 10%;
}

body div.wrap div div.main-menu button#playVid:hover {
  background-color: rgba(20, 16, 15, 0.74);
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#00a9e2), to(rgba(20, 16, 15, 0.74)));
  /* Konqueror */
  background-image: -moz-linear-gradient(#00a9e2, rgba(20, 16, 15, 0.74));
  /* FF 3.6+ */
  background-image: -ms-linear-gradient(#00a9e2, rgba(20, 16, 15, 0.74));
  /* IE10 */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a9e2), color-stop(100%, rgba(20, 16, 15, 0.74)));
  /* Safari 4+, Chrome 2+ */
  background-image: -webkit-linear-gradient(#00a9e2, rgba(20, 16, 15, 0.74));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -o-linear-gradient(#00a9e2, rgba(20, 16, 15, 0.74));
  /* Opera 11.10 */
  background-image: -ms-linear-gradient(top, #00a9e2 0%, rgba(20, 16, 15, 0.74) 100%);
  /* IE10+ */
  background-image: linear-gradient(#00a9e2, rgba(20, 16, 15, 0.74));
  /* the standard */
  color: #e0b4d7;
}
body div.wrap div div.main-menu div#home-video {
  padding-top: 30px;
}

/*----------------------------footer-----------------------------*/
body footer {
  overflow: auto;
  height: 100px;
  background-color: rgba(20, 16, 15, 0.74);
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#081929), to(rgba(20, 16, 15, 0.74)));
  /* Konqueror */
  background-image: -moz-linear-gradient(#081929, rgba(20, 16, 15, 0.74));
  /* FF 3.6+ */
  background-image: -ms-linear-gradient(#081929, rgba(20, 16, 15, 0.74));
  /* IE10 */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #081929), color-stop(100%, rgba(20, 16, 15, 0.74)));
  /* Safari 4+, Chrome 2+ */
  background-image: -webkit-linear-gradient(#081929, rgba(20, 16, 15, 0.74));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -o-linear-gradient(#081929, rgba(20, 16, 15, 0.74));
  /* Opera 11.10 */
  background-image: -ms-linear-gradient(top, #081929 0%, rgba(20, 16, 15, 0.74) 100%);
  /* IE10+ */
  background-image: linear-gradient(#081929, rgba(20, 16, 15, 0.74));
  /* the standard */
}

body footer  {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  /*margin-top: 20px;*/
  clear:both;

}

body footer p {
  margin-top: 10px;
  padding-top: 23px;
  color: #38588b;
  /*text-align: center;*/
  font-family: "Times";
}



body footer div.linkIcon {
  font-size: 150%;
  margin-top:-10px;
}
body footer div.linkIcon i.social-link {
  color: #38588b;
}
body footer div.linkIcon i.social-link:hover {
  color: #f5deb3;
}
/*----------------------------Header-----------------------------*/
body .header {
  background-color: rgba(20, 16, 15, 0.74);
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#081929), to(rgba(20, 16, 15, 0.74)));
  /* Konqueror */
  background-image: -moz-linear-gradient(#081929, rgba(20, 16, 15, 0.74));
  /* FF 3.6+ */
  background-image: -ms-linear-gradient(#081929, rgba(20, 16, 15, 0.74));
  /* IE10 */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #081929), color-stop(100%, rgba(20, 16, 15, 0.74)));
  /* Safari 4+, Chrome 2+ */
  background-image: -webkit-linear-gradient(#081929, rgba(20, 16, 15, 0.74));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -o-linear-gradient(#081929, rgba(20, 16, 15, 0.74));
  /* Opera 11.10 */
  background-image: -ms-linear-gradient(top, #081929 0%, rgba(20, 16, 15, 0.74) 100%);
  /* IE10+ */
  background-image: linear-gradient(#081929, rgba(20, 16, 15, 0.74));
  /* the standard */
}
body .header div.header-group {
  /*font-size: 150%;*/
  color: #00a9e2;
  font-family: "Alex Brush";
  font-weight: bold;
  /*text-align: center;*/

  margin-top: 30px;
  clear:both;
}
body .header div.header-group h1 {
  font-size: 220%;
  padding-left:10%;
}
body .header div.header-group h2 {
  font-size: 180%;
  color: #38588b;
  padding-left:13%;
}
body .header div.header-group #time{
  float:right;
}
body .header div img {
  border-radius: 400%;
}
/*body .header div.set-clock {*/
  /*color: #dec9a2;*/
  /*margin-top: 120px;*/
  /*padding-left: 3%;*/
  /*font-size: 110%;*/
  /*font-family: "Alex Brush";*/
/*}*/

/*----------------------------resume-----------------------------*/
body div.resumeBG{
  background-image: url("../images/background/resume.jpg");
}

body div.wrap div div.resume-main-menu {

  left: 15%;
  margin-top: 15px;
  margin-bottom: 25px;
  padding-left: 5%;
}
body div.wrap div div.resume-main-menu #resume-info {
  padding-bottom: 25px;
}
body div.wrap div div.resume-main-menu h4 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
}
body div.wrap div div.resume-main-menu h6 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
}
body div.wrap div div.resume-main-menu table tr th {
  width: 20%;
  border: 1.5px solid #0d263f;
  padding-left: 4px;
}
body div.wrap div div.resume-main-menu table td {
  border: 1.5px solid #0d263f;
  padding-left: 4px;
}


/*----------------------------Biograohy-----------------------------*/
body div.biographyBG{
  width:100%;
  background-image: url("../images/background/biography.jpg");
  background-repeat: no-repeat;
}

body div.wrap div div.biography-main-menu {
  left: 15%;
  margin-top: 15px;
  margin-top: 30px;
  margin-bottom: 25px;
  padding-left: 5%;
}
body div.wrap div div.biography-main-menu h6 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
}

/*----------------------------Contact-----------------------------*/
body div.contactBG{
  background-image: url("../images/background/contact.jpg");
}
body div.wrap div div.contact-main-menu {
  /*left: 15%;*/
  margin-top: 15px;
  margin-bottom: 25px;
  margin-left: 19%;
  display: block;
}
body div.wrap div div.contact-main-menu h4 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
  margin-bottom:1px;

}
body div.wrap div div.contact-main-menu h6 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
  margin-bottom: 1px;
  margin-top:-10px;
}


body div.wrap div div.contact-main-menu div div.row {
  margin-left:-15px;
}

body div.wrap div div.contact-main-menu div div.row img{
  /*margin-left:50%;*/
  margin-top: 5px;
}


body div.wrap div div.contact-main-menu  h6#gender {
margin-top:-25px;
}
body div.wrap div div.contact-main-menu #form-info {
  /*margin-left: -15px;*/
  padding-bottom: 30px;
}

body div.wrap div div.contact-main-menu #form-info input{
  width:300px;
  margin-top:-25px;
  /*padding-top:-50px;*/
}
body div.wrap div div.contact-main-menu #form-info label {
  /*padding-bottom: -15px;*/
  color:#38588b;
}
body div.wrap div div.contact-main-menu #form-info div.input {
  width:50%;
  /*font-size: 80%;*/
}
body div.wrap div div.contact-main-menu #form-info div.input input {
  border: 0.1em solid grey;
}
/*body div.wrap div div.contact-main-menu #form-info div.error{*/
  /*margin-bottom:-20px;*/
/*}*/

body div.wrap div div.contact-main-menu #form-info div.input-error,div.input-good{
  /*margin-left:15px;*/
}
body div.wrap div div.contact-main-menu #form-info div.input-error input {
  border: 0.1em solid darkred;
}
body div.wrap div div.contact-main-menu #form-info div.input-good input {
  border: 0.1em solid #314d7a;
}
body div.wrap div div.contact-main-menu #form-info div.error {
  /*//display: block;*/
  font-size: 70%;
  padding-left: 30px;
  /*margin-bottom:-10px;*/
  margin-top:-2px;
}
/*body div.wrap div div.contact-main-menu #form-info div.email {*/
  /*margin-top:-2px;*/
/*}*/

body div.wrap div div.contact-main-menu #form-info div div.error{
  margin-bottom:-10px;
}

body div.wrap div div.contact-main-menu #form-info div.error .good {
  color: green;
}
body div.wrap div div.contact-main-menu #form-info div.error .error {
  color: red;
  display: block;
  font-size: 70%;
  padding-bottom:8px;
  /*padding-left: 10%;*/
}

body div.wrap div div.contact-main-menu #form-info  div:nth-child(3){
  margin-bottom: 0px;
}
body div.wrap div div.contact-main-menu label {
  /*padding-bottom: 20px;*/
  display: inline;
  color:#38588b;;
}


body div.wrap div div.contact-main-menu label#gender
{
  margin-top: -30px;
}

body div.wrap div div.contact-main-menu #form-info #checkbox-button {
  padding-bottom: 5px;
  display: inline;
}
body div.wrap div div.contact-main-menu #form-info  #checkbox-button input {
  padding-right: 50%;
}

body div.wrap div div.contact-main-menu #buttons #submitbutton,
body div.wrap div div.contact-main-menu #buttons #resetbutton {
  /* the standard */
  border-radius: 25px;
  color: #f5deb3;
  background-color: #1f62a0;
  width: 100px;
  height: 30px;
}

body div.wrap div div.contact-main-menu #buttons #submitbutton:hover,
body div.wrap div div.contact-main-menu #buttons #resetbutton:hover{
  color: #9f4049;
  background-color: #bfae8b;
}



  /*----------------------------Interests-----------------------------*/

body div.interestsBG{
  background-image: url("../images/background/interests.jpg");
}

body div.wrap div div.interest-main-menu {
  left: 15%;
  margin-top: 15px;
  margin-bottom: 25px;
  padding-left: 5%;
}
body div.wrap div div.interest-main-menu h4 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
  clear: both;
}
body div.wrap div div.interest-main-menu h5 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
}
body div.wrap div div.interest-main-menu h6 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
}
body div.wrap div div.interest-main-menu #interest-sub-menu ul {
  list-style-type: none;
  margin: 0;
}
body div.wrap div div.interest-main-menu #interest-sub-menu li {
  float: right;
}
body div.wrap div div.interest-main-menu #interest-sub-menu li a {
  display: block;
  padding-left: 10px;
  text-decoration: underline;
}
body div.wrap div div.interest-main-menu #interest-sub-menu li a:hover {
  background-color: #00a9e2;
  color: #5f5f5f;
}
body div.wrap div div.interest-main-menu #main-interest {
  margin-top: 30px;
}
body div.wrap div div.interest-main-menu #main-interest section {
  padding-bottom: 20px;
}
body div.wrap div div.interest-main-menu #main-interest section ul {
  list-style-type: none;
  margin-left: 50px;
}
body div.wrap div div.interest-main-menu #main-interest section li {
  float: left;
  padding-left:4px;
}

body div.wrap div div.interest-main-menu #main-interest section li img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

body div.wrap div div.interest-main-menu #main-interest section h6 {
  /*padding-left: 20%;*/
  clear: both;
}
body div.wrap div div.interest-main-menu #main-interest figure video {
  width: 50%;
  height: 300px;
}

/*----------------------------Gallery-----------------------------*/

body div.galleryBG{
  background-image: url("../images/background/gallery.jpg");
}


body div.wrap div div.gallery-main-menu {
  left: 15%;
  margin-top: 15px;
  margin-bottom: 25px;
  padding-left: 5%;
}
body div.wrap div div.gallery-main-menu div#gallery-sub-menu ul {
  list-style-type: none;
  margin: 0;
}
body div.wrap div div.gallery-main-menu div#gallery-sub-menu li {
  padding-left: 10px;
  float: right;
}
body div.wrap div div.gallery-main-menu div#gallery-sub-menu li a {
  display: block;
  text-decoration: underline;
}
body div.wrap div div.gallery-main-menu div#gallery-sub-menu li a:hover {
  background-color: #00a9e2;
  color: #5f5f5f;
}


body div.wrap div div.gallery-main-menu div#main-gallery {
  margin-top: 30px;
}
body div.wrap div div#main-gallery {
  clear: both;
}
body div.wrap div div#main-gallery .row{
  margin-bottom: 30px;
}

body div.wrap div div#main-gallery h4 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
}
body div.wrap div div#main-gallery h5 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
}
body div.wrap div div#main-gallery h6 {
  color: #38588b;
  font-family: "Times";
  font-weight: bold;
}

body div.wrap div div#main-gallery #vietnam-main img {
  margin-left: -14px;
  margin-top:5px;
}

body div.wrap div div#main-gallery #vietnam-main iframe{
  width: 65%;
  height: 100%;
}

body div.wrap div div#main-gallery #japan-main .button-images {
  margin-left:0px;
}
body div.wrap div div#main-gallery #japan-main #demo {
  margin-left: 18px;
}
body div.wrap div div#main-gallery #america-main {
  clear: both;
}

body div.wrap div div#main-gallery .buttons{
  font-size: 100%;
  color: #2b89e0;

  font-family: "Alex Brush";

  width:13%;
  /*margin-botton:20px;*/
}
body div.wrap div div#main-gallery .buttons button.hide{
  /*margin-botton:20px;*/
  background-color: #9c9c9c;
  border-radius: 10%;
  height: 22px;
  width:100%;
}

body div.wrap div div#main-gallery .buttons button.hide:hover {
  color: #f5deb3;
  background-color: #253a5c;
  font-style: italic;

}



/*------------------------Set sreen size---------------------*/

/*-------------------------------1250px-------------------------------*/
@media only screen and (max-width: 1250px) {
  body .header div.header-group h1 {
    font-size: 200%;
  }
  body .header div.header-group h2 {
    font-size: 170%;
    color: #38588b;
  }
  body .header div img {
    border-radius: 400%;
  }
  body .header div.set-clock {
    color: #84817a;
    margin-top: 120px;
    padding-left: 1%;
    font-size: 70%;
  }


  body div.wrap div div.main-menu button#playVid {
    width: 25%;
  }

  body div.wrap div div#main-gallery .buttons button.hide{

    width:120%;
  }
}


/*-------------------------------1050px-------------------------------*/
@media only screen and (max-width: 1050px) {
  body {
    font-size: 90%;
  }

  /*-------header---------*/
  /*body .header {*/
    /*display: none;*/
    /*visibility: hidden;*/
  /*}*/
  body .header div.header-group h1 {
    font-size: 170%;
  }
  body .header div.header-group h2 {
    font-size: 130%;
    color: #38588b;
  }

  /*-------Side menu---------*/
  /*body div.wrap div.side-menu nav.nav div.nest-bar {*/
    /*display: none;*/
    /*visibility: hidden;*/
  /*}*/

  body div.wrap div.side-menu {
    /*height: 500px;*/
    width: 14%;
    padding: 0px;
  }

  body div.wrap div.side-menu nav.nav a {
    font-size: 75%;
  }

  body div.wrap div.side-menu div.linkIcon {
    font-size: 120%;
    margin: 15px auto auto 25%;
  }

  body div.wrap div.side-menu #time {
    display: none;
    visibility: hidden;
  }

  /*-------Home menu---------*/
  body div.wrap div div.main-menu {
    padding-left: 10%;

  }

  body div.wrap div div.main-menu button#playVid {
    width: 30%;
  }

  /*----------------------------footer-----------------------------*/
  body footer {
    height: 40px;
  }

  body footer p {
    margin-top: -10px;
  }

  /*----------------------------resume-----------------------------*/
  body div.wrap div div.resume-main-menu table tr th {
    width: 5%;
  }

  body div.wrap div div.resume-main-menu table td {
    width: 40%;
    border: 1.5px solid #0d263f;
  }

  /*----------------------------Biograohy-----------------------------*/
  body div.wrap div div.biography-main-menu #demo {
    display: none;
    visibility: hidden;
  }

  /*----------------------------Contact-----------------------------*/
  body div.wrap div div.contact-main-menu{
    width: 90%;
  }
  body div.wrap div div.contact-main-menu #info-button div.error {
    margin-bottom: -20px;
  }

  /*----------------------------Interests-----------------------------*/
  /*----------------------------Gallery-----------------------------*/
  body div.wrap div div#main-gallery .buttons button.hide{

    width:130%;
  }

/*-------------------------------850px-------------------------------  */
}
  @media only screen and (max-width: 850px) {
    /*----------------------header-----------------------*/

    body .header div.header-group h1 {
      display:none;
      visibility: hidden;
    }
    body .header div.header-group h2 {
      display:none;
      visibility: hidden;
    }
    body .header div.header-group #time{
      text-align: center;
    }

    body .header div.header-group img {
      border-radius: 300%;
    }


    body {
      font-size: 70%;
    }

    /*-------Home menu---------*/
    body div.wrap div div.main-menu {
      width: 70%;
    }

    body div.wrap div div.main-menu button#playVid {
      width: 25%;
    }

    /*----------------------------footer-----------------------------*/
    /*----------------------------side menu-----------------------------*/
    body div.wrap div.side-menu {
      width: 15%;
      padding: 0px;
    }

    body div.wrap div.side-menu nav.nav div.nest-bar {
      display: none;
      visibility: hidden;
    }

    /*----------------------------resume-----------------------------*/
    body div.wrap div div.resume-main-menu {
      width: 70%;
    }

    body div.wrap div div.resume-main-menu table tr th {
      width: 2%;
    }

    body div.wrap div div.resume-main-menu table td {
      width: 20%;
      border: 1px solid #0d263f;
    }

    /*----------------------------Biograohy-----------------------------*/
    body div.wrap div div.biography-main-menu {
      width: 70%;
    }



    body div.wrap div div.biography-main-menu #demo {
      display: none;
      visibility: hidden;
    }

    /*----------------------------Contact-----------------------------*/
    body div.wrap div div.contact-main-menu {
      width: 70%;
    }

    body div.wrap div div.contact-main-menu #info-button div.error {
      margin-bottom: -20px;
    }

    /*----------------------------Interests-----------------------------*/
    body div.wrap div div.interest-main-menu {
      width: 70%;
    }

    /*----------------------------Gallery-----------------------------*/
    body div.wrap div div.gallery-main-menu {
      width: 70%;
    }

    body div.wrap div div#main-gallery .buttons button.hide{

      width:170%;
    }
  }


/*-------------------------screen 450-------------------------------*/
  @media only screen and (max-width: 450px) {
    body .header div.header-group h1 {
      display:none;
      visibility: hidden;
    }
    body .header div.header-group h2 {
      display:none;
      visibility: hidden;
    }
    body .header div.header-group #time{
      text-align: center;
    }

    body div.wrap div.side-menu i.icon-cog {
      color: #5f5f5f;
      font-size: 150%;
      margin-left: 35%;
      margin-right: auto;
      /*pdding-top: -35px;*/
    }

    body div.wrap div.side-menu {
      width:14%;
    }

    body div.wrap div.side-menu h6 {
      font-size: 40%;
    }
    body div.wrap div.side-menu p {
      font-size: 30%;
    }

    body div.wrap div.side-menu nav.nav a {
      font-size: 45%;
    }



    /*body div.wrap div div.main-menu #welcome img {*/

      /*width:45%;*/
      /*height: 70px;*/
    /*}*/
    body div.wrap div div.main-menu #welcome h1 {
      font-size: 160%;
      color: #00a9e2;
      font-family: "Alex Brush";
      font-weight: bold;
    }

    body div.wrap div div.main-menu button#playVid {
      width: 40%;
    }


    body div.wrap div div#main-gallery .buttons button.hide{

      width:330%;
    }
  }