/* Include Font */
@font-face {
  font-family: "Gotham-Light";
  src: url(../fonts/gotham/GothamRounded-Light.otf) format("opentype");
  font-weight:normal;
	font-style:normal;
}
@font-face {
  font-family: "Gotham-Book";
  src: url(../fonts/gotham/GothamRounded-Book.otf) format("opentype");
  font-weight:normal;
	font-style:normal;
}
@font-face {
  font-family: "Gotham-Medium";
  src: url(../fonts/gotham/GothamRounded-Medium.otf) format("opentype");
  font-weight:normal;
	font-style:normal;
}
@font-face {
  font-family: "Gotham-Bold";
  src: url(../fonts/gotham/GothamRounded-Bold.otf) format("opentype");
  font-weight:normal;
	font-style:normal;
}

/* loading */
#body-load{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #34BEEF;
}

.spinner{
    width: 80px;
    height: 80px;

    border: 2px solid #f3f3f3;
    border-top:3px solid #6690c1;
    border-radius: 100%;

    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin: auto;

    animation: spin 1s infinite linear;
}

@keyframes spin {
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(360deg);
    }
}

/* End Include Font */
.gridListdemoBasicUsage md-grid-list {
  margin: 8px; }

.gridListdemoBasicUsage .gray {
  background: #f5f5f5; }

.gridListdemoBasicUsage .green {
  background: #b9f6ca; }

.gridListdemoBasicUsage .yellow {
  background: #ffff8d; }

.gridListdemoBasicUsage .blue {
  background: #84ffff; }

.gridListdemoBasicUsage .purple {
  background: #b388ff; }

.gridListdemoBasicUsage .red {
  background: #ff8a80; }

  .gridListdemoBasicUsage .white {
    background: #ffffff; }

.gridListdemoBasicUsage md-grid-tile {
  transition: all 400ms ease-out 50ms; }

body {
  background-color: white;
}
/* style font text */
.txt-1 {
  font-size: 80px;
  line-height: 80px;
  font-family: Gotham-Bold;
  color: #ffffff;
}
.txt-2 {
  font-family: Gotham-Medium;
  font-size: 35px;
  line-height: 35px;
  color: #3e3e3e;
}
.txt-3 {
  font-family: Gotham-Book;
  font-size: 30px;
  color: #3e3e3e;
}
.txt-4 {
  font-family: Gotham-Light;
  font-size: 20px;
  color: #3e3e3e;
}
.txt-5 {
  font-family: Gotham-Light;
  font-size: 16px;
  line-height: 26px;
  color: #4e4e4e;
}

/* end style font text */

.content {
  background-color: white;
  padding: 5% 8% 5% 8%;
}

.header {
  padding: 24px 50px 0 50px;
}

.footer {
  padding: 0 50px 0 50px;
}

.footer-2 {
  padding: 0 50px 8px 50px;
}

.align-center{
  text-align: center;
}

.align-justify{
  text-align: justify;
}

.line {
  width: 100%;
  height: 1px;
  margin-top: 2px;
  background-color: #bebebe;
}

.menu-link {
  text-decoration: none;
  font-family: Gotham-Medium;
  color: #1565C0;
  font-size: 14px;
  margin-right: 10px;
  transition: all 400ms ease-out 50ms;
}

.menu-link:hover {
  color: #6690c1;
}

.sosmed-b-m-footer {
  margin-bottom: 5px;
}
.sosmed-t-m-footer {
  margin-top: 15px;
}

.font-footer {
  font-family: Gotham-Light;
  color: #4e4e4e;
  font-size: 14px;
}
/* logo svg */
.svg-logo {
  width:75px;
  height:auto;
}
.fil1 {fill:white;}
.fil0 {fill:white;fill-rule:nonzero}
.txt-svg {font-size: 34px; fill: white;}

.fil1-b {fill:#3e3e3e;}
.fil0-b {fill:#3e3e3e;fill-rule:nonzero}
.txt-svg-b {font-size: 34px; fill: #3e3e3e;}
/* End Logo Svg */

/* svg icon home */
  /* icon svg lab */
  .fil5-1 {fill:#ffffff}
  .fil1-1 {fill:#FFFFFF}
  .fil10-1 {fill:#4D4D4D}
  .fil0-1 {fill:#4D4D4D}
  .fil9-1 {fill:#FFFFFF}
  .fil6-1 {fill:#FFFFFF}
  .fil2-1 {fill:#FFFFFF}
  .fil4-1 {fill:#FFFFFF}
  .fil8-1 {fill:#4D4D4D}
  .fil3-1 {fill:white}
  .fil7-1 {fill:#4D4D4D;fill-rule:nonzero}

  a svg:hover .fil5-1 {
    fill: #32AEDA;
  }
  a svg:hover .fil1-1 {
    fill: #34BEEF;
  }
  a svg:hover .fil9-1 {
    fill: #CFF5FF;
  }
  a svg:hover .fil6-1 {
    fill: #E8BB4A;
  }
  a svg:hover .fil2-1 {
    fill: #E9E9E9;
  }
  a svg:hover .fil4-1 {
    fill: #FECC4F;
  }
  a svg:hover .fil8-1 {
    fill: #FFFFFF;
  }

  a svg:hover .fil5-1,
  a svg:hover .fil1-1,
  a svg:hover .fil9-1,
  a svg:hover .fil6-1,
  a svg:hover .fil2-1,
  a svg:hover .fil4-1,
  a svg:hover .fil8-1 {
    transition: 400ms;
    transition-timing-function: ease-in-out 50ms;
    -webkit-transition: 400ms;
    -webkit-transition-timing-function: ease-in-out 50ms;
  }

  /* icon svg edu */
  .fil6-2 {fill:#4D4D4D}
  .fil4-2 {fill:#FFFFFF}
  .fil1-2 {fill:#FFFFFF}
  .fil0-2 {fill:#4D4D4D}
  .fil11-2 {fill:#FFFFFF}
  .fil10-2 {fill:#FFFFFF}
  .fil9-2 {fill:#FFFFFF}
  .fil2-2 {fill:#FFFFFF}
  .fil12-2 {fill:#FFFFFF}
  .fil13-2 {fill:#FFFFFF}
  .fil7-2 {fill:#FEFEFE}
  .fil3-2 {fill:white}
  .fil5-2 {fill:#4D4D4D}
  .fil14-2 {fill:#4D4D4D;fill-rule:nonzero}
  .fil8-2 {fill:#A3A3A3;fill-rule:nonzero}

  a svg:hover .fil6-2 {
    fill: #275667;
  }
  a svg:hover .fil4-2 {
    fill: #32AEDA;
  }
  a svg:hover .fil1-2 {
    fill: #34BEEF;
  }
  a svg:hover .fil11-2 {
    fill: #D5D5D5;
  }
  a svg:hover .fil10-2 {
    fill: #E1E1E1;
  }
  a svg:hover .fil9-2 {
    fill: #E8E8E8;
  }
  a svg:hover .fil2-2 {
    fill: #E9E9E9;
  }
  a svg:hover .fil12-2 {
    fill: #FECC4F;
  }
  a svg:hover .fil13-2 {
    fill: #FED671;
  }
  a svg:hover .fil5-2 {
    fill: #FFFFFF;
  }

  a svg:hover .fil6-2,
  a svg:hover .fil4-2,
  a svg:hover .fil1-2,
  a svg:hover .fil11-2,
  a svg:hover .fil10-2,
  a svg:hover .fil9-2,
  a svg:hover .fil2-2,
  a svg:hover .fil12-2,
  a svg:hover .fil13-2,
  a svg:hover .fil5-2 {
    transition: 400ms;
    transition-timing-function: ease-in-out 50ms;
    -webkit-transition: 400ms;
    -webkit-transition-timing-function: ease-in-out 50ms;
  }

  /* icon svg fun */
  .fil5-3 {fill:#FFFFFF}
  .fil1-3 {fill:#FFFFFF}
  .fil0-3 {fill:#4D4D4D}
  .fil3-3 {fill:#FFFFFF}
  .fil4-3 {fill:white}
  .fil2-3 {fill:white}
  .fil6-3 {fill:#4D4D4D;fill-rule:nonzero}

  a svg:hover .fil1-3 {
    fill: #34BEEF;
  }
  a svg:hover .fil5-3 {
    fill: #32AEDA;
  }
  a svg:hover .fil3-3 {
    fill: #E9E9E9;
  }

  a {
    outline: none;
    border: 0;
    text-decoration: none;
  }
  a svg:hover .fil1-3,
  a svg:hover .fil5-3,
  a svg:hover .fil3-3 {
    transition: 400ms;
    transition-timing-function: ease-in-out 50ms;
    -webkit-transition: 400ms;
    -webkit-transition-timing-function: ease-in-out 50ms;
  }

/* end svg icon home */

/* Hover Icon Home */
/* Grow */
.grow-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.grow-hover:hover, .grow-hover:focus, .grow-hover:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
/* End Hover Icon Home */
.background-home {
  position: absolute;
  width: 100%;
  height: auto;
  text-align: center;
  z-index: 1;
}
.img-c1-home {
  max-width: 55%;
  width: 55%;
}
.background-coming {
  width: 100%;
  height: auto;
  text-align: center;
  padding: 1.8% 0 2% 0;
}
.img-c1-coming {
  max-width: 24%;
  width: 24%;
}
/*======= Home ========*/
.bx-mb-c1-home {
  width: 100%;
  height: auto;
  margin-bottom: 4%;
}
.txt-margin-home {
  width: 100%;
  height: auto;
  margin-top: 6%;
}
/*======= About US ======*/
/* svg about */
.fil5-about {fill:#32AEDA}
.fil6-about {fill:#34BEEF}
.fil7-about {fill:#4D4D4D}
.fil4-about {fill:#4D4D4D}
.fil8-about {fill:#E9E9E9}
.fil9-about {fill:white}
.fil0-about {fill:white}
.fil1-about {fill:#FECC4F;fill-rule:nonzero}
.fil2-about {fill:#FEDA7F;fill-rule:nonzero}
.fil3-about {fill:white;fill-rule:nonzero}
/* end svg about */
.b1-c1-about {
  width: 100%;
  min-height: auto;
  background-color: #34BEEF;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.bx-title-c1-about {
  width: 100%;
  height: auto;
  padding: 34% 0 10% 10%;
}

.background-about {
  width: 80%;
}

@media screen and (max-width:1025px) {
  .bx-title-c1-about {
    padding: 15% 0 18% 0;
  }
}

.b2-c1-about {
  padding: 0 8% 0 8%;
  background-color: #fafafa;
}
.b1-c2-about {
  width: 60%;
  height: auto;
  padding: 7% 20% 7% 20%;
}

.bx-txt-c1-about {
  width: 100%;
  height: auto;
  float: left;
  padding-top: 35%;
  padding-bottom: 37%;
}
@media screen and (max-width:960px) {
  .img-c1-coming {
    max-width: 40%;
    width: 40%;
  }
  .bx-title-c1-about {
    text-align: center;
  }
  .bx-txt-c1-about {
    padding-top: 15%;
    padding-bottom: 15%;
  }
  .background-about {
    width: 50%;
  }
}
.txt-bold-about {
  font-family: Gotham-Light;
  color: #1565C0;
}
.txt2-bold-about {
  font-family: Gotham-Light;
  color: #da251d;
}

.line-title-c1-about {
  width: 20%;
  height: 1px;
  background-color: #bebebe;
}
.text-b2-c1-about {
  font-family: Gotham-Light;
  font-size: 18px;
  line-height: 28px;
  color: #4e4e4e;
}
.title-c2-about {
  font-family: Gotham-Medium;
  font-size: 35px;
  color: #3e3e3e;
}
.title-name-c2-about {
  font-family: Gotham-Book;
  font-size: 25px;
  color: #1565C0;
}
.title2-name-c2-about {
  font-family: Gotham-Book;
  font-size: 18px;
  color: #1565C0;
}
.lr-p-c2-about {
  padding-left: 18%;
  padding-right: 18%;
}
.t-p-c2-about {
  padding-top: 7%;
}
.t2-p-c2-about {
  padding-top: 4%;
}
.b-p-c2-about {
  padding-bottom: 7%;
}
.bx-img-p-c2-about {
  padding: 0 4% 0 4%;
}
.w-img-c2-about {
  max-width:100%;
  width: 100%;
  margin-bottom: 5%;
}
.bx-txt-p-c2-about {
  padding:2% 3% 2% 3%;
}
/*======= END About US ======*/

/*======= LAB ======*/
/* SVG Lab */
.fil1-lab {fill:#32AEDA}
.fil2-lab {fill:#34BEEF}
.fil11-lab {fill:#4D4D4D}
.fil7-lab {fill:#4D4D4D}
.fil10-lab {fill:#CFF5FF}
.fil4-lab {fill:#E8BB4A}
.fil8-lab {fill:#E9E9E9}
.fil3-lab {fill:#FECC4F}
.fil9-lab {fill:white}
.fil5-lab {fill:white}
.fil12-lab {fill:white}
.fil6-lab {fill:#4D4D4D;fill-rule:nonzero}
.fil0-lab {fill:white;fill-rule:nonzero}
/* End Svg lab */
.b1-c1-lab {
  position: relative;
  width: 100%;
  min-height: auto;
  background-color: #34BEEF;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.background-lab {
  width: 50%;
}
.b2-c1-lab {
  width: 100%;
  height: auto;
  padding: 12% 0 19% 0;
}

.text-b2-c1-lab {
  font-family: Gotham-Light;
  font-size: 30px;
  color: #fff;
  text-align: center;
}
.cream {
  background-color: #fafafa;
}

.b1-c2-lab {
  width: 60%;
  height: auto;
  padding: 7% 20% 7% 20%;
}

.img-c3-lab {
  position: relative;
  width: 100%;
  min-height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.lr-p-c3-lab {
  padding-left: 10%;
  padding-right: 10%;
}
.t-p-c3-lab {
  padding-top: 7%;
}
.t2-p-c3-lab {
  padding-top: 5%;
}
.b-p-c3-lab {
  padding-bottom: 7%;
}
.b2-p-c3-lab {
  padding-bottom: 5%;
}
.bx-img-p-c3-lab {
  padding: 0 3% 0 3%;
}
.w-img-c3-lab {
  max-width:100%;
  width: 100%;
}
@media screen and (max-width:960px) {
  /* home */
  .background-home {
    display: none;
  }

  .w-img-c3-lab {
    display: none;
  }
}

.bx-txt-p-c3-lab {
  padding:2%;
}

.line-c3-lab {
  width: 100%;
  height: 1px;
  background-color: #dfdfdf;
}
.btn-view-c3-lab {
  font-family: Gotham-Book;
  padding-left:4%;
  padding-right:4%;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-left: 0;
}

.text-btn {
  font-family: Gotham-Medium;
  font-size: 16px;

}

/*====== Responsive Max With 780px ======*/
@media screen and (max-width:780px) {
  /* coming soon */
  .img-c1-coming {
    max-width: 50%;
    width: 50%;
  }
  /* font style */
  .txt-1 {
    font-size: 60px;
    line-height: 60px;
  }
  .txt-2 {
    font-size: 30px;
    line-height: 30px;
  }
  /* end font style */

  /* about */
  .title-name-c2-about {
    font-size: 22px;
  }
  /* end about */

}

/*====== Responsive Max With 600px ======*/
@media screen and (max-width:600px) {
  /* font style */
  .txt-1 {
    font-size: 40px;
    line-height: 40px;
  }
  .txt-2 {
    font-size: 25px;
    line-height: 25px;
  }
  .txt-5 {
    font-size: 14px;
    line-height: 22px;
  }

  /* end font style */

  /* about */
  .title-name-c2-about {
    font-size: 20px;
  }
  .text-b2-c1-about {
    font-size: 15px;
    line-height: 24px;
  }
  /* end about */

  /* lab */
  .background-lab {
    width: 75%;
  }
  .btn-view-c3-lab {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .text-btn {
    font-size: 14px;
  }
  /* end lab */
}

/*====== Responsive Max With 500px ======*/
@media screen and (max-width:500px) {
  /* coming soon */
  .img-c1-coming {
    max-width: 55%;
    width: 55%;
  }
  /* logo */
  .svg-logo {
    width:60px;
  }
  .txt-svg {font-size: 34px; fill: white;}
  /* end logo */

  /* font style */
  .txt-2 {
    font-size: 22px;
    line-height: 22px;
  }
  /* end font style */

  /* about */
  .header {
    padding: 12px 6% 0 6%;
  }

  .bx-title-c1-about {
    padding: 7% 0% 15% 0%;
  }
  .b1-c2-about {
    width: 80%;
    padding: 7% 10% 7% 10%;
  }

  .lr-p-c2-about {
    padding-left: 10%;
    padding-right: 10%;
  }

  .bx-txt-p-c2-about {
    text-align: left;
  }
  .title-name-c2-about {
    font-size: 16px;
    line-height: 16px;
  }
  .title2-name-c2-about {
    font-size: 16px;
    margin-top: 5px;
  }
  /* end about */

  /* lab */
  .b1-c2-lab {
    width: 80%;
    padding: 7% 10% 7% 10%;
  }
  /* end lab */
}