/**
** this for first setup
**/
* {
  margin: 0;
  padding: 0;
}

/**
** setup fonts
**/
/** 
** raleway
**/
/*open sans */
@font-face {
  font-family: OpenSans-Bold;
  src: url(".././fonts/OpenSans-Bold.ttf");
}

@font-face {
  font-family: OpenSans-Regular;
  src: url(".././fonts/OpenSans-Regular.ttf");
}

@font-face {
  font-family: opensans-light;
  src: url(".././fonts/OpenSans-Light.ttf");
}

@font-face {
  font-family: opensans-italic;
  src: url(".././fonts/OpenSans-Italic.ttf");
}

@font-face {
  font-family: OpenSans-Semibold;
  src: url(".././fonts/OpenSans-SemiBold.ttf");
}

/**
**/
/*montserrat */
@font-face {
  font-family: Montserrat-Bold;
  src: url(".././fonts/Montserrat-Bold.ttf");
}

@font-face {
  font-family: Montserrat-Regular;
  src: url(".././fonts/Montserrat-Regular.ttf");
}

/*roboto*/
@font-face {
  font-family: Roboto-Medium;
  src: url(".././fonts/Roboto-Medium_0.ttf");
}

@font-face {
  font-family: Roboto-Thin;
  src: url(".././fonts/Roboto-Thin.ttf");
}

@font-face {
  font-family: Roboto-Bold;
  src: url(".././fonts/Roboto-Bold.ttf");
}

/**


/**
** this for setup variable
**/
/* change option color */
:root {
  --primary: #5CAAF4;
  --color-text-berita: #070707;
  --line-and-side: #FDD34C;
  --text-banner: #FFFFFF;
  --buton: #073C64;
  --footer: #073C64;
  --bg-detail-berita-and-forum: #8E8E8E (9%);
  --color-menu-bar: #0A0A0A;
}

.fl-left {
  float: left;
}

.fl-right {
  float: right;
}

.fl-none {
  float: none;
}

.f-10 {
  font-size: 10;
}

.f-11 {
  font-size: 11;
}

.f-12 {
  font-size: 12;
}

.f-13 {
  font-size: 13;
}

.f-14 {
  font-size: 14;
}

.f-15 {
  font-size: 15;
}

.f-16 {
  font-size: 16;
}

.f-17 {
  font-size: 17;
}

.f-18 {
  font-size: 18;
}

.f-19 {
  font-size: 19;
}

.f-20 {
  font-size: 20;
}

.f-21 {
  font-size: 21;
}

.f-22 {
  font-size: 22;
}

.f-23 {
  font-size: 23;
}

.f-24 {
  font-size: 24;
}

.f-25 {
  font-size: 25;
}

.f-26 {
  font-size: 26;
}

.f-27 {
  font-size: 27;
}

.f-28 {
  font-size: 28;
}

.f-29 {
  font-size: 29;
}

.f-30 {
  font-size: 30;
}

.f-31 {
  font-size: 31;
}

.f-32 {
  font-size: 32;
}

.f-33 {
  font-size: 33;
}

.f-34 {
  font-size: 34;
}

.f-35 {
  font-size: 35;
}

.f-36 {
  font-size: 36;
}

.f-37 {
  font-size: 37;
}

.f-38 {
  font-size: 38;
}

.f-39 {
  font-size: 39;
}

.f-40 {
  font-size: 40;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-ib {
  display: inline-block;
}

.d-flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

.d-inline {
  display: inline;
}

.d-i-flex {
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flex;
  display: -o-inline-flex;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-100 {
  width: 100%;
}

.h-25 {
  height: 25%;
}

.h-50 {
  height: 50%;
}

.h-75 {
  height: 75%;
}

.h-100 {
  height: 100%;
}

.ov-h {
  overflow: hidden;
}

.ov-s {
  overflow: scroll;
}

.ov-a {
  overflow: auto;
}

html, body {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
}

body {
  overflow: hidden;
}

a {
  display: inline-block;
}

.box {
  float: left;
  width: 100%;
}

.box .container {
  max-width: 78%;
  margin: 0 auto;
}

.box .container .link {
  float: left;
  width: 100%;
}

.box .container .link a.linktop {
  font-family: OpenSans-Regular;
  font-size: 14px;
  color: #073C64;
  float: left;
  text-decoration: none;
  margin-top: 10px;
}

.box .container .link img#arroy {
  float: left;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  position: relative;
  margin-top: 16px;
  margin-left: 11px;
  margin-right: 11px;
}

.box .container span#title {
  font-family: OpenSans-Regular;
  font-size: 27px;
  color: #2A2A2B;
  float: left;
  margin-top: 10px;
}

.box .container img#myimg1 {
  float: left;
  width: 100%;
  height: 566px;
  -o-object-position: center;
  object-position: center;
  -o-object-fit: cover;
  object-fit: cover;
  margin-top: 10px;
}

.box .container .text {
  width: 100%;
  float: left;
  margin-top: 10px;
}

.box .container .text p {
  font-family: OpenSans-Regular;
  font-size: 16px;
  color: #2A2A2B;
}

.box .container .text p:nth-child(2),
.box .container .text p:nth-child(3) {
  margin-top: 10px;
}

.box .container .job {
  width: 100%;
  float: left;
  margin-top: 50px;
}

.box .container .job span {
  width: 100%;
  font-family: OpenSans-Regular;
  font-size: 25px;
  color: #2A2A2B;
  float: left;
}

.box .container .job img {
  width: 628px;
  height: 408px;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -o-object-fit: cover;
  object-fit: cover;
  padding-top: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  margin: 0 auto;
}

.box .container .share {
  float: left;
  width: 100%;
  margin-top: 30px;
}

.box .container .share span {
  width: 100%;
  font-family: OpenSans-Regular;
  font-size: 17px;
  text-transform: uppercase;
  color: #2A2A2B;
  float: left;
  display: block;
}

.box .container .share img {
  margin-top: 10px;
}

.box .container .share img#ig {
  margin-left: 10px;
  margin-right: 10px;
}