* {
    margin: 0px;
    font-family: 'Times New Roman', serif;
}

@media screen and (min-height:1000px max-width: 1280px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 1024px or smaller */
  }
}

body{width:100%;}
/*Style for navigation*/

header {
    position: fixed;
    background-color: #233c67;
    color: white;
    background-size: cover;
    background-position: center center;
    width:100vw;
    height:15vw;
    top:0;
}

.content{
        position:fixed;
        top:15vw;
        height:80vw;
    background-color: #6888be;
    width:100vw;
    }

.banner{
    width:100vw;
    height:10vw;
    top:0;

    }
header h1{

    font-size: 5vw;
    font-weight:bold;
    text-align: center;
    padding:2%;
    }

.topbar{
    position: fixed;
    top:10vw;
    height:5vw;
    width:100vw;
    background-color: #233c67;
    font-weight: normal;
    font-size: 1.5vw;
    height:5vw;
    }

/*
header h2 {
    position: absolute;
    top:0;
    width: 10vw;
    text-decoration: none;
    color: white;
    cursor: pointer;
    text-align: center;
    font-family: 'Autour One', cursive;
    font-weight: normal;
    font-size: 1.5vw;
    height:5vw;
    padding-top:1.5vw;
}

    header h2 a{
        text-decoration: none;
        text-align: center;
    }
*/


header nav {
    position: absolute;
    top:0;
/*    right:0%;*/
    height:5vw;
}

header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

header nav li {
    display: inline;
    float:left;
    cursor: pointer;
}


header nav li a {
  display: block;
  width:16.45vw;
/*border:1px solid black;*/
  color: white;
    padding: 1.45vw 1.76vw;
  text-align: center;
  text-decoration: none;
}


header nav li a:hover:not(.active) {
  background-color:  #ccdbee;
}

.active {
  background-color: #6888be;
}

/*For content box*/
.contentborder{
    position:relative;
    top:0;
    margin:4vw;
    width:92vw;
    height:36vw;
/*     border:0.2vw solid black; */
    background-color: #99afd7;
    text-align: center;
}

.pageheader{
    padding:1.5vw;
    font-size:3vw;
}
.contentp{
    font-size:2.5vw;
    padding-top:1.5vw;
}

/*For about us page */

.aboutusimg{
    width:20vw;
    float:left;
    margin-left: 4vw;
    height:20vw;
}
.aboutusp{
    margin-left:30vw;
    margin-right:2vw;
    text-align: left;
    height:25vw;
}



/*For test page*/
.test_status{
    float:left;
    margin-left:4vw;
    margin-right: 4vw;
    font-size: 2vw;
}

#test{
    position: absolute;
    top:12vw;
    margin-left:4vw;
    margin-right: 4vw;
    font-size:2vw;
    white-space: 2vw;

}

.questionstyle{

    width:50vw;
    padding:0;
    margin:0;
    text-align:left;

}

.choiceopt{
    padding-top:5vw;
    padding-left: 4vw;
    padding-right: 4vw;
    float:left;
    margin-bottom: 3vw;
}

.testsubmit{
    position:fixed;
    top:48vw;
    float:left;
    padding-left:6vw;
}

.testimg{
    position: fixed;
    top:25vw;
    right:4vw;
    height:25vw;
    width:20vw;
    margin-right:8vw;
}

input[type=radio]{
    width: 1.5vw;
    height:1.5vw;

}

/*For tips page*/
.tipslist{
    padding-left:4vw;
    text-align: left;

}
.tiplistpadding{
    padding:0.5vw;
}

button {
  background-color: #4CAF50; /* Green */
  border: 1px solid ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2.5vw;
  border-radius: 0.7vw;
  width: 13vw;
  height: 5vw;
  cursor: pointer;
}

.slogan{

  top: 30vw;
  margin-left: 25vw;
  margin-right: 25vw;
  text-align: center;
  color: #4C6564;
  position: fixed;
  width: 45vw;
  font-size: 4vw;
  background-color: rgba(255, 255, 255, 0.4);


}


.slides {display: none;}
.slideimg {vertical-align: middle;
  opacity: 80%;
  width:100%;
  height: 35vw;
  border: 1px solid black;

}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 2vw;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* The dots/bullets/indicators */
.dot {
  height: 1vw;
  width: 1vw;
  bottom:1vw;
  margin: 0 0.5vw;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 1s linear;
}

.active {
  background-color: #717171;
}

/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  animation-name: fade;
  animation-duration: 5s;

}

@-webkit-keyframes fade {
  from {opacity: .6}
  to {opacity: 0.8}
}

@keyframes fade {
  from {opacity: .6}
  to {opacity: 0.8}
}