/*
* Extended stylesheet for MyIFPE
* by Amri Hidayatulloh
*/

.mobile {
	display: none !important;
}
.mobile-flex {
	display: none !important;
}
.desktop {
	display: block !important;
}
.desktop-flex {
	display: flex !important;
}

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
}
input {
  line-height: initial;
}
* {
  font-family: 'Gotham-Book';
  font-size: 12px;
  line-height: 1.3;
}
.no-padding-top {
  padding-top: 0 !important;
}
p.big {
  font-family: 'Gotham-Book';
  font-size: 13px;
  line-height: 1.3;
}
button.yellow {
  background: #F2C94C;
  color: #fff;
  padding: 10px 15px;
  border-radius: 18px;
  border: none;
  outline: none;
  font-family: 'Gotham-Book';
  font-size: 12px;
}
button.yellow:hover {
  cursor: pointer;
  background: #E1B83B;
}
button.green {
  background: rgb(39,174,96);
  background: linear-gradient(59deg, rgba(39,174,96,1) 0%, rgba(85,201,150,1) 100%);
  color: #fff;
  padding: 10px 15px;
  border-radius: 18px;
  border: none;
  outline: none;
  font-family: 'Gotham-Book';
}

button.green:hover {
  background: rgba(85,201,150,1);
  cursor: pointer;
}

button.link {
  background: none;
  color: #585858;
  padding: 10px 15px;
  border-radius: 18px;
  border: none;
  outline: none;
  font-family: 'Gotham-Book';
  text-shadow: none;
}
button.link:hover {
  background: none;
  color: #272727;
  cursor: pointer;
}
button.shadow {
  box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
}
button.thick-shadow {
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
button.small {
  padding: 8px 10px;
  font-size: 11px;
  border-radius: 10px;
}
button.big {
  padding: 12px 25px;
  border-radius: 20px;
  font-size: 16px;
}
button:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}
button:disabled:hover {
  cursor: not-allowed;
}
.common-content p,
.common-content li {
  font-family: 'Gotham-Book';
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 5px;
}
.common-content ol {
  list-style: decimal;
  padding-left: 15px;
  margin: 15px 0;
}
.common-content ul {
  list-style: circle;
  padding-left: 15px;
  margin: 15px 0;
}

.content-article-area .content-container {
  padding-top: 20px;
}
.content-article-area.document {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.content-article-area.document .image-container {
  width: 25%;
}
.content-article-area.document .image-container img {
  height: auto;
}
.content-article-area.document .content-container {
  width: 73%;
  padding-top: 0;
}

.bg-green-small {
  background: #fff url('../images/green-gradient-small.png');
  background-position: top center;
  background-repeat: repeat-x;
}
.bg-green-medium {
  background: #fff url('../images/green-gradient-medium.png');
  background-position: top center;
  background-repeat: repeat-x;
}
.bg-green-large {
  background: #fff url('../images/green-gradient-large.png');
  background-position: top center;
  background-repeat: repeat-x;
}

.green-title {
  width: 100%;
}
.green-title.with-button {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1em;
}
.green-title h1 {
  margin-bottom: 15px;
  font-family: 'Gotham-Medium';
  font-size: 28px;
  line-height: 1.3;
  color:#27AE60;
}
.green-title .line {
  background: #27AE60;
  width: 50px;
  height: 8px;
  border-radius: 5px;
  margin-bottom: 30px;
}
.green-title.white h1 {
  margin-bottom: 15px;
  font-family: 'Gotham-Medium';
  font-size: 28px;
  line-height: 1.3;
  color:#fff;
}
.green-title.white .line {
  background: #fff;
  width: 50px;
  height: 8px;
  border-radius: 5px;
  margin-bottom: 30px;
}

header.was-navbar {
  background: rgba(255,255,255,0);
}
header.was-navbar.on-scroll {
  background: rgba(255,255,255,1);
  box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
  -ms-box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
  -webkit-box-shadow: 2px 4px 3px rgba(0,0,0,0.1);
  -o-box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
}
header.was-navbar .wrapper {
  padding: 20px 0;
  width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
header.was-navbar.on-scroll .wrapper {
  padding: 10px 0;
}
header.was-navbar .wrapper .logo-container {
  width: 200px;
  height: 65px;
  margin-right: 30px;
  position: relative;
}
header.was-navbar .wrapper .logo-container img {
  width: 200px;
  height: 65px;
  object-fit: contain;
  object-position: center;
  position: absolute;
  top : 0;
  left: 0;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
header.was-navbar .wrapper .logo-container img.color {
  opacity: 0;
}
header.was-navbar .wrapper .logo-container img.white {
  opacity: 1;
}
header.was-navbar.on-scroll .wrapper .logo-container img.color {
  opacity: 1;
}
header.was-navbar.on-scroll .wrapper .logo-container img.white {
  opacity: 0;
}
header.was-navbar .wrapper .search-container {
  width: 600px;
}
header.was-navbar .wrapper .search-container .search-box {
  position: relative;
  width: 568px;
  background: #fff;
  padding: 5px;
  border: solid 1px transparent;
  border-radius: 20px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;
}
header.was-navbar.on-scroll .wrapper .search-container .search-box {
  border: solid 1px #f0f0f0;
}
header.was-navbar .wrapper .search-container .search-box input[type=text] {
  width: 500px;
  border: none;
  background: none;
  outline: none;
  padding-left: 10px;
  font-size: 14px;
  font-family: 'Gotham-book';
}
header.was-navbar .wrapper .nav-container {
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header.was-navbar .wrapper .nav-container ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  list-style: none;
}
header.was-navbar .wrapper .nav-container ul li {
  margin-right: 20px;
  font-family: 'Gotham-Book';
  font-size: 14px;
}
header.was-navbar .wrapper .nav-container ul li a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
header.was-navbar .wrapper .nav-container ul li a:hover {
  color: rgba(255,255,255,1);
}
header.was-navbar.on-scroll .wrapper .nav-container ul li a {
  color: rgba(0,0,0,0.7);
  text-decoration: none;
}
header.was-navbar.on-scroll .wrapper .nav-container ul li a:hover {
  color: rgba(0,0,0,1);
}

.was-container {
  background: none;
  width: 100%;
  display: flex;
  justify-content: center;
}
.was-container .row {
  margin-left: 0;
  margin-right: 0;
}
.was-container .row .no-padding {
  padding-left: 0;
  padding-right: 0;
}
.was-container .was-wrapper-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1200px;
}
.was-container .was-wrapper-hero.box {
  flex-wrap: wrap;
  justify-content: space-between;
}
.was-container .was-wrapper-hero .hero {
  width: 50%;
  height: 350px;
  overflow: hidden;
  position: relative;
}
.was-container .was-wrapper-hero.box .hero {
  width: 390px;
  height: 320px;
  border-radius: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}
.was-container .was-wrapper-hero .hero:first-child {
  border-radius: 20px 0 0 20px;
}
.was-container .was-wrapper-hero .hero:last-child {
  border-radius: 0 20px 20px 0;
}
.was-container .was-wrapper-hero .hero.box:first-child {
  border-radius: 20px;
}
.was-container .was-wrapper-hero .hero.box:last-child {
  border-radius: 20px;
}
.was-container .was-wrapper-hero .hero.navbox {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
  -ms-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
  -o-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
}
.was-container .was-wrapper-hero .hero.profile {
  height: 250px;
}
.was-container .was-wrapper-hero .navbox:first-child,
.was-container .was-wrapper-hero .navbox:last-child {
  border-radius: 20px;
}
.was-container .was-wrapper-hero .hero .cover {
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top : 0;
  left: 0;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  z-index: 1;
}
.was-container .was-wrapper-hero .hero.navbox .cover {
  width: 100%;
  height: 300px;
  object-position:

}
.was-container .was-wrapper-hero .hero:hover .cover {
  width: 110%;
  height: 370px;
  top: -10px;
  left: -5%;
}
.was-container .was-wrapper-hero .hero.navbox:hover .cover {
  width: 100%;
  height: 300px;
  top: 0px;
  left: 0px;
}
.was-container .was-wrapper-hero .hero .overlay {
  position: absolute;
  top : 0;
  left: 0;
  width: 100%;
  height: 350px;
  z-index: 2;
  background: rgb(27,175,89);
  background: linear-gradient(59deg, rgba(27,175,89,0.8449754901960784) 0%, rgba(39,174,96,0) 100%, rgba(9,9,121,1) 100%);
}
.was-container .was-wrapper-hero .hero.navbox .overlay {
  height: 250px;
}
.was-container .was-wrapper-hero .hero.profile .avatar-area {
  position: absolute;
  z-index: 5;
  top : 40px;
  left: 30px;
}
.was-container .was-wrapper-hero .hero.profile .avatar-area img {
  width: 180px;
  height: 180px;
  border: solid 5px #fff;
  border-radius: 95px;
  background: #fff;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
  -ms-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
  -o-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
  box-sizing: content-box;
	object-fit: cover;
	object-position: center;
}
.was-container .was-wrapper-hero .hero .back-btn {
  position: absolute;
  top : 30px;
  left: 30px;
  z-index: 3;
}
.was-container .was-wrapper-hero .hero .text-area {
  position: absolute;
  bottom : 20px;
  left: 30px;
  width: 80%;
  z-index: 3;
  text-shadow: 0 0 3px rgba(0,0,0,0.3);
  -moz-text-shadow: 0 0 3px rgba(0,0,0,0.3);
  -webkit-text-shadow: 0 0 3px rgba(0,0,0,0.3);
  -o-text-shadow: 0 0 3px rgba(0,0,0,0.3);
  -ms-text-shadow: 0 0 3px rgba(0,0,0,0.3);
  color: #fff;
}
.was-container .was-wrapper-hero .hero.box .text-area {
  top : 30px;
  bottom: auto;
}
.was-container .was-wrapper-hero .hero.box button.sticky {
  position: absolute;
  bottom : 30px;
  left: 30px;
  z-index: 3;
}
.was-container .was-wrapper-hero .hero.navbox .text-area {
  bottom: 70px;
}
.was-container .was-wrapper-hero .hero.profile .text-area {
  bottom: 100px;
  left: 250px;
}
.was-container .was-wrapper-hero .hero .text-area h1 {
  margin-bottom: 15px;
  font-family: 'Gotham-Medium';
  font-size: 32px;
}
.was-container .was-wrapper-hero .hero.profile .text-area h1 {
  margin: 10px 0;
  line-height: initial;
}
.was-container .was-wrapper-hero .hero .text-area p {
  margin-bottom: 15px;
  font-family: 'Gotham-Book';
  font-size: 16px;
  line-height: 1.3;
}
.was-container .was-wrapper-hero .hero .navbar-area {
  position: absolute;
  bottom : 0;
  left: 0;
  width: 100%;
  z-index: 4;
  background: #fff;
}
.was-container .was-wrapper-hero .hero.profile .navbar-area {
  padding: 20px 0;
}
.was-container .was-wrapper-hero .hero .navbar-area ul {
  width: 90%;
  padding: 12px 30px;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.was-container .was-wrapper-hero .hero.profile .navbar-area ul {
  width: 75%;
  padding: 5px 30px 10px 250px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
}
.was-container .was-wrapper-hero .hero .navbar-area ul li {
  padding-right: 30px;
}
.was-container .was-wrapper-hero .hero .navbar-area ul li a {
  text-decoration: none;
  font-family: 'Gotham-Book';
  font-size: 14px;
  color: #676767;
}
.was-container .was-wrapper-hero .hero .navbar-area ul li a.active {
  color: #27AE60;
}
.was-container .was-wrapper-hero .hero .navbar-area ul li a:hover {
  color: #171717;
}

.was-container.green-app {
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(85,201,150,0.05) 0%, rgba(85,201,150,0.31836484593837533) 100%);
}
.was-container.grey-bg {
  background: #f8f8f8;
}

.was-container .was-wrapper-app {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.was-container .was-wrapper-app.small {
  background: #ECFBF2;
  border-radius: 15px;
  margin: 100px 0 50px 0;
}
.was-container .was-wrapper-app .image-area {
  margin-bottom: -5px;
  padding-top: 40px;
}
.was-container .was-wrapper-app.small .image-area {
  margin-bottom: -5px;
  margin-top: -90px;
  padding: 0 30px 0 0;
}
.was-container .was-wrapper-app.small .image-area img {
  width: 90%;
}
.was-container .was-wrapper-app .text-area {
  width: 500px;
}
.was-container .was-wrapper-app.small .text-area {
  width: 450px;
  padding: 50px 0 50px 50px;
  box-sizing: content-box;
}
.was-container .was-wrapper-app .text-area p {
  margin-bottom: 15px;
  font-family: 'Gotham-Book';
  font-size: 16px;
  line-height: 1.3;
}
.was-container .was-wrapper-app .text-area a {
  text-decoration: none;
}

.was-container .was-wrapper-common {
  width: 1200px;
  padding: 3em 0;
}
.was-container .was-wrapper-common.no-padding-top {
  padding-top: 0;
}
.was-article-panel-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.was-article-panel-wrapper .infinite-area {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.was-article-panel-wrapper .button-area-paging {
	width: 100%;
	text-align: center;
	padding-top: 40px;
}
.was-article-panel-wrapper .panel {
  width: 300px;
  border-radius: 20px;
  border: solid 1px #f0f0f0;
  height: 350px;
  background: #fff;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  margin-bottom: 20px;
}
.was-article-panel-wrapper .panel.gallery {
  height: 280px;
}
.was-article-panel-wrapper .panel:hover {
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.was-article-panel-wrapper .panel.box {
  width: 290px;
}
.was-article-panel-wrapper .panel.full-cover {
  width: 590px;
  border-color: transparent;
}
.was-article-panel-wrapper .panel.wide {
  width: 590px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 200px;
}
.was-article-panel-wrapper .panel .cover-area {
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  position: relative;
}
.was-article-panel-wrapper .panel.full-cover .cover-area {
  height: 350px;
  border-radius: 15px;
}
.was-article-panel-wrapper .panel.wide .cover-area {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 15px 0 0 15px;
  position: relative;
}
.was-article-panel-wrapper .panel .cover-area img {
  position: absolute;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  z-index: 1;
}
.was-article-panel-wrapper .panel.full-cover .cover-area img {
  position: absolute;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: center;
}
.was-article-panel-wrapper .panel.wide .cover-area img {
  position: absolute;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
}
.was-article-panel-wrapper .panel:hover .cover-area img {
  -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */
  filter: blur(1px);
}
.was-article-panel-wrapper .panel .overlay {
  position: absolute;
  z-index: 2;
  top : 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  background: rgba(255,255,255,0);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
}
.was-article-panel-wrapper .panel:hover .overlay {
  background: rgba(255,255,255,0);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.6) 100%);
}
.was-article-panel-wrapper .panel .cover-area .text-on-overlay {
  position: absolute;
  left: 15px;
  bottom: 15px;
  width: 90%;
  z-index: 3;
  color: #fff;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.was-article-panel-wrapper .panel:hover .cover-area .text-on-overlay {
  padding-bottom: 5px;
}
.was-article-panel-wrapper .panel .icon-area {
  font-family: 'Gotham-Book';
  font-size: 11px;
  opacity: 0.8;
}
.was-article-panel-wrapper .panel h2 {
  font-family: 'Gotham-Book';
  font-size: 18px;
  margin: 10px 0;
  line-height: 1.3;
}
.was-article-panel-wrapper .panel a {
  text-decoration: none;
  color: #fff;
}
.was-article-panel-wrapper .panel a:hover {
  text-decoration: underline;
}
.was-article-panel-wrapper .panel .text-area a {
  color: #272727;
}
.was-article-panel-wrapper .panel p {
  font-family: 'Gotham-Book';
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 10px;
}
.was-article-panel-wrapper .panel p.date {
  font-size: 10px;
  opacity: 0.8;
}
.was-article-panel-wrapper .panel .text-area {
  padding: 15px;
  height: 150px;
  overflow: hidden;
}
.was-article-panel-wrapper .panel.wide .text-area {
  padding: 20px 15px;
  width: 350px
}
.was-article-panel-wrapper .panel.blank,
.was-article-panel-wrapper .panel.gallery.blank {
  height: 0px;
  background: none;
  box-shadow: none;
  border: none;
}
.was-wrapper-content .video-container iframe {

}

.was-container .was-wrapper-content {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 3em 0;
}
.about-image-display {
  width: 350px;
  height: 350px;
  overflow: hidden;
  border-radius: 15px;
  position: relative;
}
.about-image-display img.cover {
  width: 350px;
  height: 350px;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.about-image-display .overlay {
  background: rgba(39,174,96,0.4);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top : 0;
  left: 0;
}
.about-image-display img.logo {
  width: 70%;
  position: absolute;
  top : 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
}
.about-text {
  width: 800px;
}
.contact-area {
  width: 100%;
  height: 650px;
  position: relative;
}
.contact-area .map-area {
  width: 100%;
  height: 300px;
  background: #f0f0f0;
  overflow: hidden;
  border-radius: 15px;
}
.contact-area .map-area iframe {
  width: 100%;
  height: 300px;
}
.contact-area .contact-info {
  position: absolute;
  top : 250px;
  left: 50%;
  width: 1000px;
  background: #fff;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border-radius: 15px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  transform: translate(-50%, 0);
}
.contact-area .contact-info .form-area {
  width: 600px;
  padding: 20px;
}
.contact-area .contact-info .form-area form {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.contact-area .contact-info .form-area form input {
  width: 45%;
  height: 30px;
  padding: 5px 10px;
  background: #f0f0f0;
  border: none;
  outline: none;
  border-radius: 20px;
  margin-bottom: 20px;
  font-family: 'Gotham-Book';
}
.contact-area .contact-info .form-area form textarea {
  width: 100%;
  height: 100px;
  padding: 15px 10px;
  background: #f0f0f0;
  border: none;
  outline: none;
  border-radius: 20px;
  margin-bottom: 20px;
  font-family: 'Gotham-Book';
}
.contact-area .contact-info .info-area {
  width: 320px;
  padding: 20px;
  background: #3DD17B;
  color: #fff;
  font-family: 'Gotham-Book';
  font-size: 12px;
  line-height: 1.3;
  border-radius: 0 15px 15px 0;
}
.contact-area .contact-info .info-area p {
  margin-bottom: 10px;
}
.contact-area .contact-info .info-area b {
  font-family: 'Gotham-Medium';
}

.box-schedule-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.box-schedule-container .box-schedule {
  width: 250px;
  background: #fcfcfc;
  padding: 20px;
  border-radius: 15px;
  height: 210px;
  margin-bottom: 20px;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  position: relative;
}
.box-schedule-container .empty {
  background: none;
  height: 0;
  width: 250px;
  padding: 0 20px;
  border: none;
}
.box-schedule-container .box-schedule:hover {
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.box-schedule-container .box-schedule.for-text {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0px 30px 0 0;
  width: 260px;
  line-height: 1.3;
}
.box-schedule-container .box-schedule .top-area {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.box-schedule-container .box-schedule.for-text b {
  font-family: 'Gotham-Medium';
  color: #676767;
  font-size: 14px;
}
.box-schedule-container .box-schedule.for-text p {
  font-family: 'Gotham-Book';
  color: #373737;
  font-size: 12px;
  margin-bottom: 25px;
}
.box-schedule-container .box-schedule.for-text h2 {
  font-family: 'Gotham-Medium';
  color: #27AE60;
  font-size: 23px;
  margin-bottom: 15px;
}
.box-schedule-container .box-schedule .top-area .date {
  font-family: 'Gotham-Book';
  font-size: 14px;
  color: #676767;
  line-height: 1.3;
}
.box-schedule-container .box-schedule .top-area .date big {
  font-family: 'Gotham-Medium';
  font-size: 32px;
  color: #373737;
}
.box-schedule-container .box-schedule .body-area {
  font-family: 'Gotham-Book';
  margin-bottom: 15px;
  color: #272727;
  font-size: 12px;
  line-height: 1.3;
}
.box-schedule-container .box-schedule .body-area h2 {
  margin-bottom: 10px;
  font-family: 'Gotham-Medium';
  font-size: 14px;
}
.box-schedule-container .box-schedule .sticky-bottom-area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 250px;
  padding: 10px 20px;
  border-top: dashed 1px #f0f0f0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.box-schedule-container .box-schedule .sticky-bottom-area img.avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  object-fit: contain;
  object-position: center;
  margin-right: 10px;
}
.box-schedule-container .box-schedule .sticky-bottom-area .name {
  font-family: 'Gotham-Book';
  color: #676767;
  font-size: 12px;
  line-height: 1.3;
}
.box-schedule-container .box-schedule .sticky-bottom-area .name  b {
  font-family: 'Gotham-Medium';
  color: #474747;
}
.box-schedule-container .box-schedule .sticky-bottom-area .name small {
	font-size: 10px;
}
.box-schedule-container .box-mentor {
  width: 280px;
  padding: 0;
  height: 350px;
  position: relative;
}
.box-schedule-container .box-mentor img.avatar {
  width: 150px;
  height: 150px;
  object-fit: contain;
  object-position: center;
  border: solid 6px #f0f0f0;
  z-index: 2;
  position: absolute;
  top : 0;
  left: 50%;
  border-radius: 78px;
  transform: translate(-50%, 0);
	background: #fff;
}
.box-schedule-container .box-mentor .info-card {
  width: 250px;
  padding: 100px 15px 20px 15px;
  background: #fff;
  border-radius: 15px;
  margin-top: 80px;
  text-align: center;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.box-schedule-container .box-mentor:hover .info-card {
  box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
}
.box-schedule-container .box-mentor.shading .info-card {
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.box-schedule-container .box-mentor .info-card h3 {
  font-family: 'Gotham-Book';
  color: #272727;
  font-size: 14px;
  margin-bottom: 10px;
  min-height: 30px;
}
.box-schedule-container .box-mentor .info-card p {
  line-height: 2;
  font-family: 'Gotham-Book';
  color: #676767;
  font-size: 11px;
  margin-bottom: 15px;
}
.box-schedule-container .box-mentor .info-card p b {
  color: #272727;
  font-family: 'Gotham-Medium';
}
.box-schedule-container .box-exam {
  width: 593px;
  padding: 0;
  background: #fff;
  border: solid 1px #f0f0f0;
  margin-bottom: 10px;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.box-schedule-container .box-exam.detail {
  align-items: flex-start;
}
.box-schedule-container .box-exam.full {
  width: 100%;
}
.box-schedule-container .box-exam:hover {
  box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}
.box-schedule-container .box-exam .date-area {
  width: 100px;
  padding: 20px 15px;
  border-right: dashed 1px #f0f0f0;
}
.box-schedule-container .box-exam .date-area .date {
  font-family: 'Gotham-Book';
  font-size: 14px;
  color: #676767;
  line-height: 1.3;
}
.box-schedule-container .box-exam .date-area .date big {
  font-family: 'Gotham-Medium';
  font-size: 32px;
  color: #373737;
}
.box-schedule-container .box-exam .date-area .date small {
  font-size: 11px;
}
.box-schedule-container .box-exam .body-area {
  width: 370px;
  padding: 0 15px;
  font-family: 'Gotham-Book';
  color: #272727;
  font-size: 12px;
  line-height: 1.3;
}
.box-schedule-container .box-exam.full .body-area {
  width: 770px;
}
.box-schedule-container .box-exam.detail .body-area {
  width: 1040px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.box-schedule-container .box-exam .body-area h2 {
  margin-bottom: 10px;
  font-family: 'Gotham-Medium';
  font-size: 14px;
}
.box-schedule-container .box-exam .body-area p {
  margin-bottom: 10px;
}
.box-schedule-container .box-exam .body-area b {
  font-family: 'Gotham-Medium';
  font-size: 16px;
}
.box-schedule-container .box-exam .body-area ol {
  list-style: numeric;
  padding-left: 15px;
}
.box-schedule-container .box-exam .body-area ul {
  list-style: disc;
  padding-left: 15px;
}
.box-schedule-container .box-exam .body-area ol li,
.box-schedule-container .box-exam .body-area ul li {
  margin-bottom: 10px;
}
.box-schedule-container .box-exam .body-area hr {
  width: 100%;
  height: 1px;
  border: none;
  background: #e0e0e0;
  margin: 20px 0;
}
.box-schedule-container .box-exam.full .button-area {
  width: 270px;
  padding: 15px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.box-schedule-container .box-exam .body-area span {
  color: #676767;
}
.box-schedule-container .box-exam button {
  margin-right: 15px;
}
.banner-exam {
  margin-top: 20px;
  width: 100%;
}
.banner-exam a {
  text-decoration: none;
  width: 100%;
}
.banner-exam img {
  width: 100%;
}
.was-container .pagination {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}
.box-member-container {
  width: 100%;
  font-family: 'Gotham-Book';
}
.box-member-container fieldset {
  border-top : solid 1px #6ADC9A;
  margin : 20px 0;
}
.box-member-container fieldset legend {
  padding: 10px 15px;
  background: #6ADC9A;
  color: #fff;
  border-radius: 5px;
  font-family: 'Gotham-Medium';
}
.name-lists {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.name-lists .block {
  width: 48%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
  font-family: 'Gotham-Book';
  color: #676767;
  font-size: 14px;
}
.name-lists .block:hover {
  color: #272727;
  font-family: 'Gotham-Medium';
}
.name-lists .block .id {
  width: 100px;
}
.was-container .was-wrapper-detail {
  width: 1200px;
  padding: 3em 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.was-container .was-wrapper-detail .mentor-card {
  width: 250px;
  padding: 20px;
  border: solid 1px #f0f0f0;
  border-radius: 15px;
  text-align: center;
}
.was-container .was-wrapper-detail .mentor-card img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: center;
  border-radius: 100px;
  border: solid 4px #f0f0f0;
  margin-bottom: 20px;
}
.was-container .was-wrapper-detail .mentor-card h2 {
  font-family: 'Gotham-Book';
  color: #272727;
  font-size: 14px;
  margin-bottom: 10px;
}
.was-container .was-wrapper-detail .mentor-card p {
  line-height: 2;
  font-family: 'Gotham-Book';
  color: #676767;
  font-size: 11px;
  margin-bottom: 15px;
}
.was-container .was-wrapper-detail .mentor-card p b {
  color: #272727;
  font-family: 'Gotham-Medium';
}
.was-container .was-wrapper-detail .detail-area {
  width: 870px;
}
.was-container .was-wrapper-detail .detail-area h1 {
  font-family: 'Gotham-Medium';
  color: #27AE60;
  font-size: 23px;
  margin-bottom: 10px;
}
.was-container .was-wrapper-detail .detail-area p {
  line-height: 1.3;
  font-family: 'Gotham-Book';
  color: #676767;
  font-size: 14px;
  margin-bottom: 15px;
}
.was-container .was-wrapper-detail .detail-area b {
  color: #272727;
  font-family: 'Gotham-Medium';
  font-size: 14px;
}
.was-container .was-wrapper-detail .detail-area .attr-area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
.was-container .was-wrapper-detail .detail-area .attr-area .item {
  padding: 8px 15px;
  background: #F2C94C;
  color: #fff;
  border-radius: 15px;
  margin-right: 5px;
  font-family: 'Gotham-Book';
  font-size: 12px;
}
.was-container .was-wrapper-detail .detail-area .button-area {
  padding: 20px 0;
}
.was-container .was-wrapper-detail .detail-area .button-area a {
  text-decoration: none;
}
.was-container .was-wrapper-detail .detail-area .button-area a button {
  padding: 8px 15px;
  border: none;
  outline: none;
  border-radius: 20px;
  color: #fff;
  margin-bottom: 10px;
}
.was-container .was-wrapper-detail .detail-area .button-area button.whatsapp {
	background: #009e36;
}
.was-container .was-wrapper-detail .detail-area .button-area button.email {
	background: #c6102e;
}
.was-container .was-wrapper-detail .detail-area .button-area button.link {
	background: #0077b6;
}
.was-container .was-wrapper-detail .detail-area .button-area button.facebook {
	background: #385998;
}
.was-container .was-wrapper-detail .detail-area .button-area button.twitter {
	background: #1da1f2;
}
.was-container .was-wrapper-detail .detail-area .button-area button.instagram {
	background: #8a34a0;
}
.was-container .was-wrapper-detail .detail-area fieldset {
  border-top: dashed 1px #27AE60;
  margin: 50px 0 30px 0;
}
.was-container .was-wrapper-detail .detail-area fieldset legend {
  color: #27AE60;
  font-family: 'Gotham-Medium';
  font-size: 18px;
  padding-right: 10px;
}
.was-container .was-wrapper-detail .detail-area .box-schedule-container .box-schedule,
.was-container .was-wrapper-detail .detail-area .box-schedule-container .box-schedule .sticky-bottom-area {
  width: 235px;
}
.table-result-exam {
  width: 100%;
}
.table-result-exam .heading-list,
.table-result-exam .row-list {
  padding: 15px;
  width: 1168px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 1px transparent;
  font-family: 'Gotham-Book';
  color: #676767;
  font-size: 14px;
}
.table-result-exam .heading-list {
  border: solid 1px #f0f0f0;
  border-radius: 5px;
  font-family: 'Gotham-Medium';
  color: #474747;
}
.table-result-exam .row-list {
  border-bottom: solid 1px #f0f0f0;
}
.table-result-exam .heading-list div:nth-child(1),
.table-result-exam .row-list div:nth-child(1) {
  width: 20%;
  text-align: left;
}
.table-result-exam .heading-list div:nth-child(2),
.table-result-exam .row-list div:nth-child(2) {
  width: 30%;
  text-align: left;
}
.table-result-exam .heading-list div:nth-child(3),
.table-result-exam .row-list div:nth-child(3) {
  width: 30%;
  text-align: left;
}
.table-result-exam .heading-list div:nth-child(4),
.table-result-exam .row-list div:nth-child(4) {
  width: 20%;
  text-align: right;
}

.table-result-exam.member .heading-list,
.table-result-exam.member .row-list {
  width: 100%;
}
.table-result-exam.member .heading-list div:nth-child(1),
.table-result-exam.member .row-list div:nth-child(1) {
  width: 15%;
  text-align: left;
}
.table-result-exam.member .heading-list div:nth-child(2),
.table-result-exam.member .row-list div:nth-child(2) {
  width: 15%;
  text-align: left;
}
.table-result-exam.member .heading-list div:nth-child(3),
.table-result-exam.member .row-list div:nth-child(3) {
  width: 20%;
  text-align: left;
}
.table-result-exam.member .heading-list div:nth-child(4),
.table-result-exam.member .row-list div:nth-child(4) {
  width: 30%;
  text-align: left;
}
.table-result-exam.member .heading-list div:nth-child(5),
.table-result-exam.member .row-list div:nth-child(5) {
  width: 20%;
  text-align: right;
}


.table-result-exam .date-separator {
  background: #67DF92;
  padding: 10px 15px;
  width: 1168px;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  border: solid 1px transparent;
  font-family: 'Gotham-Medium';
  margin: 5px 0;
  font-size: 14px;
}

.educator-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.educator-list .item {
  width: 48%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 40px;
}
.educator-list .item .icon {
  padding: 10px 15px;
  border-radius: 5px;
  color: #fff;
  background: rgb(39,174,96);
  background: linear-gradient(59deg, rgba(39,174,96,1) 0%, rgba(85,201,150,1) 100%);
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  margin-right: 15px;
}
.educator-list .item .info h2 {
  font-family: 'Gotham-Book';
  color: #373737;
  font-size: 21px;
  margin-bottom: 10px;
}
.educator-list .item .info .contact {
  font-family: 'Gotham-Book';
  color: #27AE60;
  font-size: 12px;
  margin-bottom: 10px;
}
.educator-list .item .info p {
  font-family: 'Gotham-Book';
  color: #676767;
  font-size: 12px;
  line-height: 1.3;
}

.was-wrapper-login {
  width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 100px;
}
.was-wrapper-login .logo-container {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
}
.was-wrapper-login .logo-container img {
  width: 300px;
}
.was-wrapper-login .box {
  width: 350px;
  padding: 20px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  -ms-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  -o-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  text-align: center;
  margin-bottom: 50px;
  font-family: 'Gotham-Book';
  color: #676767;
}
.was-wrapper-login .box h1 {
  font-family: 'Gotham-Book';
  color: #27AE60;
  font-size: 21px;
}
.was-wrapper-login .box .label {
  margin-bottom: 20px;
}
.was-wrapper-login .box .field {
  padding: 10px;
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
  margin: 5px 15px 10px 15px;
  border-radius: 10px;
}
.was-wrapper-login .box .field input {
  width: 90%;
  background: none;
  outline: none;
  border: none;
  font-size: 12px;
  font-family: 'Gotham-Book';
}
.was-wrapper-login .box .field i {
  font-size: 14px;
}
.was-wrapper-login .box button {
  width: 320px;
  margin-top: 20px;
}
.was-wrapper-login .btn-foot {
  width: 100%;
  text-align: center;
}
.toast {
  font-family: 'Gotham-Book';
}
header {
  display: flex;
}
header.was-navbar .wrapper .nav-container button.dropdown-user {
  position: relative;
  text-decoration: none;
}
header.was-navbar .wrapper .nav-container button.dropdown-user a {
  text-decoration: none;
  color: #fff;
}
header.was-navbar .wrapper .nav-container button.dropdown-user .dropmenu {
  position: absolute;
  top : 100%;
  left: 50%;
  transform: translate(-50%, 0);
  display: none;
}
header.was-navbar .wrapper .nav-container button.dropdown-user:hover .dropmenu {
  display: block;
}
header.was-navbar .wrapper .nav-container button.dropdown-user ul {
  background: #fff;
  width: 200px;
  border-radius: 5px;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
  position: relative;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
header.was-navbar .wrapper .nav-container button.dropdown-user ul:before {
  content: ' ';
  position: absolute;
  top : 0;
  left: 50%;
  width: 15px;
  height: 15px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0px -3px 1px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px -3px 1px rgba(0,0,0,0.1);
  -ms-box-shadow: 0px -3px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px -3px 1px rgba(0,0,0,0.1);
  -o-box-shadow: 0px -3px 1px rgba(0,0,0,0.1);
  z-index: 1;
}
header.was-navbar .wrapper .nav-container button.dropdown-user ul li {
  width: 90%;
  padding: 5%;
  margin: 0;
  border-bottom: solid 1px #f0f0f0;
  z-index: 2;
  background: #fff;
  border-radius: 5px;
}
header.was-navbar .wrapper .nav-container button.dropdown-user ul li:last-child {
  border-bottom: none;
}
header.was-navbar .wrapper .nav-container button.dropdown-user ul li:hover {
  background: #fafafa;
  border-radius: 5px;
}
header.was-navbar .wrapper .nav-container button.dropdown-user ul li a {
  color: #272727;
}
header.was-navbar .wrapper .nav-container button.dropdown-user ul li a b {
  font-family: 'Gotham-Medium';
  color: #E4394E;
}

.certificate-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.certificate-wrapper .panel-certificate {
  width: 47%;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.certificate-wrapper .panel-certificate .image-area {
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 15px;
  position: relative;
}
.certificate-wrapper .panel-certificate .image-area img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}
.certificate-wrapper .panel-certificate .image-area .placeholder {
  position: absolute;
  top : 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Gotham-book';
  color: #383838;
}
.certificate-wrapper .panel-certificate .button-area {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
}
.certificate-wrapper .panel-certificate .button-area h3 {
  font-family: 'Gotham-book';
}
.certificate-wrapper .panel-certificate .button-area a {
  text-decoration: none;
}
.popup-certificate-wrapper {
	position: fixed;
	top : 0;
	left: 0;
	width: 100%;
	height: 90%;
	z-index: 99999;
	display: none;
	overflow-y: scroll;
	padding: 5% 0;
}
.popup-certificate-wrapper .image-panel {
	margin: 10px 5% 20px 5%;
	width: 88%;
	padding: 1%;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
	-ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
	-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
.popup-certificate-wrapper .image-panel img {
	width: 100%;
}
.close-certificate {
	position: fixed;
	top : 20px;
	right: 20px;
	z-index: 999999;
	display: none;
}


.overlay-layer {
	position: fixed;
	top : 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	z-index: 99998;
	display: none;
}
.overlay-black-layer {
	position: fixed;
	top : 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 99998;
	display: none;
}
.sidebar {
	width: 90%;
	height: 100%;
	top : 0;
	right:-95%;
	background: #fff;
	position: fixed;
	z-index: 99999;
	box-shadow: 0px -2px 4px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px -2px 4px rgba(0,0,0,0.3);
	-ms-box-shadow: 0px -2px 4px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px -2px 4px rgba(0,0,0,0.3);
	-o-box-shadow: 0px -2px 4px rgba(0,0,0,0.3);
	overflow-y: scroll;
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
}
.sidebar.on {
	right: 0;
}
.sidebar .btn-area {
	width: 90%;
	padding: 5%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.sidebar .btn-area button {
	margin-left: 10px;
}
.sidebar .menu-area {
	width: 90%;
	padding: 5%;
}
.sidebar .menu-area ul {
	width: 100%;
}
.sidebar .menu-area ul li {
	margin-bottom: 5px;
	width: 90%;
	padding: 3% 5%;
	text-align: right;
	background: #fafafa;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.sidebar .menu-area ul li.no-bg {
	background: none;
	padding: 4% 5%;
}
.sidebar .menu-area ul li a {
	text-decoration: none;
	color: #373737;
	font-family: 'Gotham-Book';
	font-size: 13px;
}
.sidebar .menu-area ul li a i {
	text-decoration: none;
	font-style: normal;
}
.sidebar .menu-area ul li button.icon {
	border: none;
	outline: none;
	width: 25px;
	height: 25px;
	margin-left: 10px;
	border-radius: 5px;
	background:  rgb(39,174,96);
	background: linear-gradient(59deg, rgba(39,174,96,1) 0%, rgba(85,201,150,1) 100%);
	color: #fff;
}
.sidebar .menu-area ul li.red {
	background: #f0f0f0;
	margin-top: 10px;
}
.sidebar .menu-area ul li.red button.icon {
	background: #e60023;
}
.searchbox {
	width: 100%;
	margin-top: 20px;
	display: none;
}
.was-horizontal-panel-bar {
	width: 96%;
	padding: 2%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	background: #fff;
	border-radius: 10px;
	margin-bottom: 2rem;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
	-ms-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
}
.was-horizontal-panel-bar .thumbnail {
	width: 160px;
	height: 160px;
	overflow: hidden;
	border: solid 5px #e0e0e0;
	border-radius: 85px;
	margin-right: 2rem;
}
.was-horizontal-panel-bar .thumbnail img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	object-position: center;
}
.was-horizontal-panel-bar .description h2 {
	font-family: 'Gotham-Medium';
	color: #27AE60;
	font-size: 23px;
	margin-bottom: 10px;
}
.was-horizontal-panel-bar .description p {
	line-height: 1.3;
	font-family: 'Gotham-Book';
  color: #676767;
  font-size: 14px;
  margin-bottom: 15px;
}
.was-horizontal-panel-bar .description .attributes {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.was-horizontal-panel-bar .description .attributes .item {
	margin-right: 15px;
	font-family: 'Gotham-Book';
  color: #676767;
  font-size: 14px;
}
.was-horizontal-panel-bar .description .attributes .item a {
	color: #676767;
}
.box-schedule-container .box-mentor .info-card p b.green {
	color: #27AE60;
}
.error404-container {
	padding: 2rem 5rem;
	text-align: center;
	color: #fff;
	font-family: 'Gotham-Book';
	text-shadow: 0px 0px 4px rgba(0,0,0,0.3);
}
.error404-container h1 {
	font-family: 'Gotham-Medium';
	font-size: 32px;
	margin-bottom: 20px;
}
.error404-container p {
	margin-bottom: 20px;
}
.was-main-sliders {
	width: 100%;
	position: relative;
	display:flex;
	justify-content: center;
	flex-wrap:wrap;
}
.was-main-sliders .primary-slider {
	z-index: 1;
	width:1200px;
}
.was-main-sliders .primary-slider .slider {
	width:100%;
		border-radius:20px;
		overflow:hidden;
}
.was-main-sliders .primary-slider .slider .slide {
	position:relative;
	overflow:hidden;
	width: 100%;
	height: 400px;
	border-radius:20px;
}
.was-main-sliders .primary-slider .slider .slide img.background {
	width:100%;
	height: 400px;
	object-fit:cover;
	object-position:center;
	border-radius:20px;
	z-index: 1;
}
.was-main-sliders .primary-slider .slider .slide .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: rgb(27,175,89);
	background: linear-gradient(59deg, rgba(27,175,89,0.8449754901960784) 0%, rgba(39,174,96,0) 100%, rgba(9,9,121,1) 100%);
}
.was-main-sliders .primary-slider .slider .slide .text-area {
	position: absolute;
  top : 100px;
  left: 50px;
  width: 50%;
  z-index: 3;
  text-shadow: 0 0 3px rgba(0,0,0,0.3);
  -moz-text-shadow: 0 0 3px rgba(0,0,0,0.3);
  -webkit-text-shadow: 0 0 3px rgba(0,0,0,0.3);
  -o-text-shadow: 0 0 3px rgba(0,0,0,0.3);
  -ms-text-shadow: 0 0 3px rgba(0,0,0,0.3);
  color: #fff;
	font-family: 'Gotham-Book';
}
.was-main-sliders .primary-slider .slider .slide .text-area h1 {
	font-family: 'Gotham-Medium';
	font-size: 36px;
	margin-bottom: 20px;
}
.was-main-sliders .primary-slider .slider .slide .text-area p {
	font-size: 16px;
	margin-bottom: 20px;
	line-height: 1.3;
}
.was-main-sliders .secondary-slider {
	z-index: 2;
	width:800px;
	margin-top: -40px;
}
.was-main-sliders .secondary-slider .slide {
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	margin: 10px;
	border-radius: 10px;
	background:#fff;
	align-items:center;
	justify-content:center;
	display:flex;
	padding: 10px;
}
.was-main-sliders .secondary-slider .slide.slick-current {
	box-shadow: 0px 0px 8px rgba(0,0,0,0.7);
}
.was-main-sliders .secondary-slider .slide img {
	width: 150px;
	border-radius: 10px;
	object-fit: cover;
}


@media(max-width: 1199px) {
	 .was-container .was-wrapper-hero,
	 .was-container .was-wrapper-common,
	 .was-container .was-wrapper-app,
	 .was-container .was-wrapper-content,
	 .footer-wrapper,
	 .was-container .was-wrapper-detail,
	 .was-wrapper-content,
	 header.was-navbar .wrapper {
			width: 90%;
			flex-wrap: wrap;
	 }
	 footer .footer-wrapper {
 		width: 90%;
 		padding: 0 ;
 	}
	header.was-navbar .wrapper .search-container {
		width: 40%;
	}
	header.was-navbar .wrapper .search-container form {
		width: 100%;
	}
	header.was-navbar .wrapper .search-container .search-box {
		width: 96%;
		padding: 3px 2%;
	}
	header.was-navbar .wrapper .search-container .search-box input[type=text] {
		width: 80%;
	}
	header.was-navbar .wrapper .search-container .search-box button {
		padding: 8px 15px;
		border-radius: 18px;
	}
	header.was-navbar .wrapper .nav-container {
		width: 30%;
	}
	.was-article-panel-wrapper .panel.full-cover {
		width: 100%;
	}
	.was-article-panel-wrapper .panel.box {
		width: 49%;
	}
	.was-container .was-wrapper-app .image-area {
		width: 40%;
	}
	.was-container .was-wrapper-app.main .image-area img {
		width: 100%;
	}
	.about-image-display {
		width: 24%;
		height: 250px;
	}
	.about-image-display img.cover {
		width: 100%;
		height: 250px;
	}
	.about-text {
		width: 74%;
	}
	.was-container .was-wrapper-hero .hero .navbar-area ul li {
		padding-right: 15px;
	}
	.box-schedule-container .box-exam {
		width: 49%;
	}
	.table-result-exam .heading-list,
	.table-result-exam .row-list,
	.table-result-exam .date-separator {
		width: 100%;
	}
	.certificate-wrapper .panel-certificate {
		width: 47%;
		padding: 1%;
		margin-bottom: 20px;
	}
	.certificate-wrapper .panel-certificate .image-area {
		height: 250px;
	}
	.certificate-wrapper .panel-certificate .image-area img {
		height: 250px;
	}
	.was-container .was-wrapper-hero.box .hero {
		width: 32%;
		height: 270px;
	}
	.was-container .was-wrapper-hero.box .hero .cover,
	.was-container .was-wrapper-hero.box .hero .overlay {
		height: 270px;
	}
	.was-container .was-wrapper-hero.financial-engine .hero,
	.was-container .was-wrapper-hero.financial-engine .hero .cover,
	.was-container .was-wrapper-hero.financial-engine .hero .overlay {
		height: 360px;
	}
}

@media(max-width: 900px) {
  .mobile {
    display: block !important;
  }
  .mobile-flex {
    display: flex !important;
  }
  .desktop {
    display: none !important;
  }
  .desktop-flex {
    display: none !important;
  }
	button.green,
	button.yellow {
		font-size: 14px;
		padding:
	}
  header.was-navbar .wrapper {
    width: 90%;
  }
  header.was-navbar .wrapper .logo-container {
    width: 180px;
    height: 58px;
  }
  header.was-navbar .wrapper .logo-container img {
    width: 180px;
    height: 58px;
  }
  #body-container {
    margin-top: 70px;
    width: 100%;
  }
  header.was-navbar .wrapper .nav-container {
    width: auto;
  }
  .was-container .was-wrapper-hero,
  .was-container .was-wrapper-common,
  .was-container .was-wrapper-app,
	.was-container .was-wrapper-content,
	.footer-wrapper,
	.was-container .was-wrapper-detail,
  .was-wrapper-content {
    width: 90%;
    flex-wrap: wrap;
  }
	header.was-navbar {
		background: #fff;
	}
	header.was-navbar .wrapper {
		padding : 10px 0;
		flex-wrap: wrap;
	}
	header.was-navbar .wrapper .logo-container img.color {
		opacity: 1;
	}
	header.was-navbar .wrapper .logo-container img.white {
		opacity: 0;
	}
	.was-container .was-wrapper-app .image-area img {
		width: 100%;
	}
	.contact-area .contact-info {
		width: 100%;
		flex-wrap: wrap;
	}
	.about-text {
		width: 100%;
	}
	header.was-navbar .wrapper .search-container {
		width: 100%;
	}
	header.was-navbar .wrapper .search-container .search-box {
		width: 96%;
		padding: 3px 2%;
	}
	header.was-navbar .wrapper .search-container .search-box input[type=text] {
		width: 80%;
	}
	header.was-navbar .wrapper .search-container .search-box button {
		padding: 8px 15px;
		border-radius: 18px;
	}
	.contact-area {
		height: 1050px;
	}
	.contact-area .contact-info .form-area form input {
		width: 100%;
	}
	.contact-area .contact-info .info-area {
		border-radius: 0 0 15px 15px;
	}
	footer {
		flex-wrap: wrap;
	}
	footer .footer-wrapper {
		width: 90%;
		padding: 20px 0 30px 0;
	}
	footer .footer-wrapper .left-side,
	footer .footer-wrapper .right-side {
		width: 100%;
	}
	footer .footer-wrapper .left-side {
		margin-bottom: 20px;
	}
	footer .footer-wrapper .text {
		margin-left: 0;
		width: 100%;
	}
	footer .footer-wrapper .text .copyright {
		text-align: center;
		font-size: 12px;
	}
	footer .footer-wrapper .text .foot-text {
		text-align: center;
		font-size: 12px;
	}
	footer .footer-wrapper .right-side {
		justify-content: center;
	}
	.was-container .was-wrapper-hero .hero {
		width: 100%;
		height: 250px;
	}
	.was-container .was-wrapper-hero .hero .overlay,
	.was-container .was-wrapper-hero .hero .cover {
		height: 250px;
	}
	.was-container .was-wrapper-hero .hero:first-child {
		border-radius: 20px 20px 0 0;
	}
	.was-container .was-wrapper-hero .hero:last-child {
		border-radius: 0 0 20px 20px;
	}
	.was-container .was-wrapper-hero .hero.navbox:last-child  {
		border-radius: 20px;
		height: 250px;
	}
	.was-container .was-wrapper-hero .hero.navbox .text-area {
		bottom: 20px;
	}
	.was-container .was-wrapper-hero .hero .text-area h1 {
		font-size: 23px;
	}
	.was-container .was-wrapper-hero .hero .text-area p {
		font-size: 14px;
	}
	.green-title h1 {
		font-size: 23px;
	}
	.green-title button {
		padding: 6px 10px;
	}
	.was-article-panel-wrapper .panel.full-cover,
	.was-article-panel-wrapper .panel.box {
		width: 100%;
	}
	.was-container .was-wrapper-app {
		padding-top: 20px;
		text-align: center;
	}
	.green-title .line {
		display: inline-block;
	}
	.about-image-display {
		margin-bottom: 20px;
		width: 100%;
	}
	.was-container .was-wrapper-app.small .text-area {
		padding: 5%;
		width: 90%;
	}
	.was-container .was-wrapper-app .image-area {
			margin-bottom: 0;
	}
	.was-container .was-wrapper-app.main .image-area {
		width: 100%;
	}
	.was-container .was-wrapper-app.small .image-area {
		margin-top: 0;
		width: 100%;
		display: flex;
		padding-right: 0;
		justify-content: center;
	}
	.was-container .was-wrapper-app .image-area {
		display: flex;
		justify-content: center;
	}
	.was-container .was-wrapper-app .image-area img {
		width: 70%;
	}
	.was-container .was-wrapper-app.small .image-area img {
		width: 70%;
	}
	.was-container .was-wrapper-app.small {
		margin-top: 0;
	}

	.was-article-panel-wrapper .panel.wide {
		width: 100%;
	}
	.was-article-panel-wrapper .panel.wide .text-area {
		width: 80%;
	}

	.was-article-panel-wrapper .panel.wide .text-area p:last-child {
		display: none;
	}
	.was-container .was-wrapper-hero .hero .navbar-area {
		display: none;
	}

	.box-schedule-container .box-schedule.for-text {
		width: 100%;
		padding-right: 0;
	}
	.box-schedule-container .box-schedule {
		padding: 5%;
		width: 90%;
	}
	.box-schedule-container .box-schedule.empty {
		padding: 0;
		border: none;
	}
	.box-schedule-container .box-mentor {
		width: 100%;
	}
	.box-schedule-container .box-mentor .info-card {
		width: 90%;
		padding: 100px 5% 20px 5%;
	}
	.box-schedule-container .box-exam {
		width: 100%;
	}
	.green-title.with-button {
		flex-wrap: wrap;
	}
	.was-container .was-wrapper-detail .mentor-card {
		width: 100%;
		margin-bottom: 30px;
	}
	.name-lists .block {
		width: 100%;
		align-items: flex-start;
		margin-bottom: 5px;
	}
	.name-lists .block .id {
		width: 35%;
	}
	.name-lists .block .name {
		width: 64%;
	}
	.settings-area form {
		width: 100%;
	}
	.educator-list .item {
		width: 100%;
	}
	.table-result-exam .heading-list {
		display: none;
	}
	.table-result-exam .heading-list, .table-result-exam .row-list,
	.table-result-exam .date-separator {
		width: 96%;
		padding: 2%;
		flex-wrap: wrap;
	}
	.table-result-exam .heading-list div:nth-child(1), .table-result-exam .row-list div:nth-child(1),
	.table-result-exam .heading-list div:nth-child(2), .table-result-exam .row-list div:nth-child(2),
	.table-result-exam .heading-list div:nth-child(3), .table-result-exam .row-list div:nth-child(3),
	.table-result-exam .heading-list div:nth-child(4), .table-result-exam .row-list div:nth-child(4),
	.table-result-exam .heading-list div:nth-child(5), .table-result-exam .row-list div:nth-child(5) {
		width: 100%;
		text-align: left;
		margin-bottom: 5px;
	}
	.table-result-exam .heading-list div:nth-child(1), .table-result-exam .row-list div:nth-child(1) {
		font-family: 'Gotham-Medium';
	}
	.table-result-exam .heading-list div:nth-child(4), .table-result-exam .row-list div:nth-child(4) {
		color: rgb(39,174,96);
	}
	.was-wrapper-login .box {
		width: 80%;
		padding: 5%;
	}
	.was-wrapper-login .box form {
		width: 100%;
	}
	.was-wrapper-login .box .field {
		width: 90%;
		padding: 5%;
		margin: 0;
		margin-bottom: 10px;
	}
	.was-wrapper-login .box button {
		width: 100%;
	}
	.was-container .was-wrapper-hero .hero.profile .avatar-area {
		top : 20px;
		left: 50%;
		transform: translate(-50%, 0);
	}
	.was-container .was-wrapper-hero .hero.navbox .cover {
		height: 270px;
	}
	.was-container .was-wrapper-hero .hero.profile .avatar-area img {
		width: 100px;
		height: 100px;
		border: solid 3px #fff;
	}
	.was-container .was-wrapper-hero .hero.navbox.profile .text-area {
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;
	}
	.certificate-wrapper,
	.box-schedule-container .box-exam.full {
		flex-wrap: wrap;
	}
	.certificate-wrapper .panel-certificate {
		width: 94%;
		padding: 3%;
		margin-bottom: 20px;
	}
	.certificate-wrapper .panel-certificate .image-area {
		height: 200px;
	}
	.certificate-wrapper .panel-certificate .image-area img {
		height: 200px;
	}
	.box-schedule-container .box-exam.full .body-area,
	.box-schedule-container .box-exam.full .button-area {
		width: 100%;
	}
	.box-schedule-container .box-exam.full .button-area {
		justify-content: flex-start;
	}
	.dashboard-avatar-area {
		display: flex;
		justify-content: center;
	}
	.dashboard-avatar-area .avatar-box {
		width: 200px;
		height: 200px;
		margin-bottom: 20px;
	}
	.dashboard-avatar-area .avatar-box img {
		width: 200px;
		height: 200px;
	}
	.was-container .was-wrapper-hero.financial-engine .hero,
	.was-container .was-wrapper-hero.financial-engine .hero .cover,
	.was-container .was-wrapper-hero.financial-engine .hero .overlay {
		height: 150px;
	}
	.was-container .was-wrapper-hero.financial-engine .text-area p:nth-child(2) {
		display: none;
	}
	.was-container .was-wrapper-hero.box .hero {
		width: 100%;
		height: 250px;
	}
	.was-container .was-wrapper-hero.box .hero .text-area p {
		font-size: 11px;
	}
	.popup-certificate-wrapper {
		padding-top: 70px;
	}
	.was-horizontal-panel-bar {
		justify-content: center;
		width: 90%;
		padding: 5%;
	}
	.was-horizontal-panel-bar .thumbnail {
		margin-right: 0;
		margin-bottom: 2rem;
	}
	.was-horizontal-panel-bar .description {
		text-align: center;
		margin-bottom: 1rem;
	}
	.was-horizontal-panel-bar .attributes {
		justify-content: center;
	}
	.was-horizontal-panel-bar .attributes .item {
		margin-right: 0;
		margin-bottom: 10px;
		width: 100%;
		text-align: center;

	}

	.was-main-sliders .primary-slider,
	.was-main-sliders .secondary-slider {
		width: 100%;
	}
	.was-main-sliders .primary-slider .slider .slide,
	.was-main-sliders .primary-slider .slider .slide img.background {
		border-radius: 0;
	}
	.was-main-sliders .primary-slider .slider .slide .text-area {
		left: 5%;
		top: auto;
		bottom : 50px;
		width: 90%;
	}
	.was-main-sliders .primary-slider .slider .slide .text-area h1 {
		font-size: 23px;
	}
	.was-main-sliders .primary-slider .slider .slide .text-area p {
		font-size: 14px;
	}
	.was-main-sliders .secondary-slider .slide img {
		width: 70px;
	}

}