/*web base - no touch*/
html{
  overflow-y: scroll;
}
body{
  margin: 0px;
  background: #000;
}
body *{
  box-sizing: border-box;
  font-family: arial;
}
#c{
  border: 4px solid #EAEAEA;
  width: 100%;
  height: 100%;
  display: block;
}
.clearfix {
   overflow: auto;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
#lang{
  position: absolute;
  top: 0;
  right: 10%;
  color: #FFF;
}
#lang *{
  font-size: 16px;
  color: #FFF;
  text-decoration: none;
}
/*conditional formatting*/
.al{ background: #B3C639}
.ga{ background: #39C693}
.in{ background: #4C39C6}
.rb{ background: #C6396C}
#navbar ul a.al{border-top: 4px solid #B3C639}
#navbar ul a.ga{border-top: 4px solid #39C693}
#navbar ul a.in{border-top: 4px solid #4C39C6}
#navbar ul a.rb{border-top: 4px solid #C6396C}
#txtcontent.al{ background: linear-gradient(135deg, #F3FF99 5%, #E3F679, #C3D649)}
#txtcontent.ga{ background: linear-gradient(135deg, #C9F6C3 5%, #99E6B3, #69D6A3)}
#txtcontent.in{ background: linear-gradient(135deg, #ACA9F6 5%, #7C89E6, #6C69D6)}
#txtcontent.rb{ background: linear-gradient(135deg, #F6A9BC 5%, #E6799C, #D6597C)}
#all.al{border-top: 4px solid #C4D649}
#all.ga{border-top: 4px solid #49D6A3}
#all.in{border-top: 4px solid #5C49D6}
#all.rb{border-top: 4px solid #D6497C}
#navbar ul a#active{
  height: 100%; 
  width: 15%; 
  border-top: 4px solid #FFF; 
  font-weight: bold;
}
#null{ cursor:not-allowed; }

/*footer*/
#footer{
  width: 80%;
  margin: auto;
}
#footer hr{
  height: 6px;
  background: #EAEAEA;
  border: 0;
  border-bottom: 2px solid #303030;
}
#footer p{
  width: 100%;
  text-align: center;
  color: #EAEAEA;
  margin: 0;
}
.bold{
  font-weight: bold;
  padding: 5px;
}

/*cover*/
#cover{
  height: 100%;
  overflow: hidden;
}
#navbar{
  height: 8%;
  width: 80%;
  display: flex;
  margin: auto;
  margin-top: 20px;
  align-items: flex-end;
}
#navbar ul{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  margin: 0px;
  padding: 0px;
  border-bottom: 4px solid #EAEAEA;
}
#navbar ul a{
  height: 80%;
  width: 10%;
  margin: 0px;
  margin-right: 4px;
  background: #EAEAEA;
}
#navbar ul li{
  height: 100%;
  width: 100%;
  padding: 10px;
  display: inline-block;
  text-align: center;
  color: #303030;
}
#txtcontent{
  height: 92%;
  width: 80%;
  margin: auto;
  box-shadow: 0px 5px 10px 5px rgba(255,255,255,.4);
  justify-content: center;
  background: #EAEAEA;
}
#txtcontent #title{
  padding-top: 8%;
  width: 100%;
}
#txtcontent #title *{
  width: 100%;
  display: block;
  margin: 0px;
  padding: 0px;
  text-align: center;
}
#front{
  width: 100%;
  height: 40%;
  padding: 10px;
  margin-top: 25px;
  text-align: center;
}
#front img{
  height: 100%;
}
#title h1{
  background: linear-gradient(135deg, #B3C639, #39C693, #4C39C6, #C6396C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 100px;
}
#title h3{
  font-size: 32px;
  color: #303030;
}

/*content below*/
#all{
  width: 80%;
  margin: auto;
  background: #CACACA;
  border-top: 4px solid #303030;
  padding: 20px;
  box-shadow: 0px 10px 10px 5px rgba(255,255,255,.4);
}
#all p{
  width: 80%;
}
#all p:nth-child(odd){
  float: left;
}
#all p:nth-child(even){
  float: right;
}
#all img{
  width: 20%;
  box-sizing: border-box;
  padding: 20px;
}
#all .bar{
  display: flex;
  align-items: center;
}
.wrapper{
  width: 33.33333333%; 
  padding: 10px;
  float: left;
  overflow: hidden;
  height: auto;
  display: inline-block;
}
.student{
  width: 100%;
  margin: auto;
  border: 2px solid #000;
  border-radius: 8px;
  overflow: hidden;
}
.content{
  width: 100%;
  display: flex;
}
.container{
  position: relative;
  display: inline-block;
  width: 50%;
  overflow: hidden;
}
.container::after {
  content: "";
  display: block;
  padding-bottom: 175%;
}
.desc{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: arial;
  height: 50px;
  width: 100%;
  border-top: 1px solid #000;
  background: #F8F8F8;
}
#d-2{
  border-right: 1px solid #000;
}
.desc h3{
  font-size: 18px;
  margin: 0px auto;
  padding: 0px;
  width: 100%;
  text-align: center;
}
.ins{
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
}
.empty{
  display: block;
}

/*mobile optimization*/
@media only screen and (max-width: 880px){
  #navbar, #txtcontent, #all{
    height: auto;
  }
  #txtcontent, #navbar, #all{
    width: 95%;
    margin: auto;
  }
  #txtcontent{
    padding: 20px 0px;
  }
  #navbar{margin-top: 10px}
  #navbar ul{
    display: block;
  }
  #navbar ul a, #navbar ul a#active{
    height: 100%;
    width: 100%;
    float: left;
    margin: 0px;
  }
  #navbar ul li{
    display: inline-block;
  }
  .wrapper{
    width: 100%;
  }
  #lang{
    position: static;
    text-align: center;
    height: 2%;
  }
  #front img{
    height: 33.33%;
  }
  #all .bar{
    display: block;
  }
  #all img, #all p{
    display: block;
    width: 100%;
  }
}