@font-face {
  font-family: 'Myriad Pro Regular';
  src: url('myriadpro/MyriadPro-Regular.eot'); /* IE9 Compat Modes */
  src: url('myriadpro/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('myriadpro/MyriadPro-Regular.woff') format('woff'), /* Modern Browsers */
       url('myriadpro/MyriadPro-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('myriadpro/MyriadPro-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Myriad Pro Bold';
  src: url('myriadprobold/MyriadPro-Bold.eot'); /* IE9 Compat Modes */
  src: url('myriadprobold/MyriadPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('myriadprobold/MyriadPro-Bold.woff') format('woff'), /* Modern Browsers */
       url('myriadprobold/MyriadPro-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('myriadprobold/MyriadPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Myriad Pro Light';
  src: url('myriadprolight/MyriadPro-Light.eot'); /* IE9 Compat Modes */
  src: url('myriadprolight/MyriadPro-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('myriadprolight/MyriadPro-Light.woff') format('woff'), /* Modern Browsers */
       url('myriadprolight/MyriadPro-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('myriadprolight/MyriadPro-Light.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Merriweather';
  src: url('merriweather/Merriweather-Regular.eot'); /* IE9 Compat Modes */
  src: url('merriweather/Merriweather-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('merriweather/Merriweather-Regular.woff') format('woff'), /* Modern Browsers */
       url('merriweather/Merriweather-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('merriweather/Merriweather-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Atkinson Regular';
  src: url('atkinsonreg/Atkinson-Hyperlegible-Regular-102.eot'); /* IE9 Compat Modes */
  src: url('atkinsonreg/Atkinson-Hyperlegible-Regular-102.woff') format('woff'), /* Modern Browsers */
       url('atkinsonreg/Atkinson-Hyperlegible-Regular-102.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('atkinsonreg/Atkinson-Hyperlegible-Regular-102.svg') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Atkinson Bold';
  src: url('atkinsonbold/Atkinson-Hyperlegible-Bold-102.eot'); /* IE9 Compat Modes */
  src: url('atkinsonbold/Atkinson-Hyperlegible-Bold-102.woff') format('woff'), /* Modern Browsers */
       url('atkinsonbold/Atkinson-Hyperlegible-Bold-102.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('atkinsonbold/Atkinson-Hyperlegible-Bold-102.svg') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Gotham Office';
    src: url('GothamOffice-Regular.eot');
    src: local('Gotham Office Regular'), local('GothamOffice-Regular'),
        url('gothamoffice/GothamOffice-Regular.eot?#iefix') format('embedded-opentype'),
        url('gothamoffice/GothamOffice-Regular.woff2') format('woff2'),
        url('gothamoffice/GothamOffice-Regular.woff') format('woff'),
        url('gothamoffice/GothamOffice-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Office';
    src: url('GothamOffice-Italic.eot');
    src: local('Gotham Office Italic'), local('GothamOffice-Italic'),
        url('gothamoffice/GothamOffice-Italic.eot?#iefix') format('embedded-opentype'),
        url('gothamoffice/GothamOffice-Italic.woff2') format('woff2'),
        url('gothamoffice/GothamOffice-Italic.woff') format('woff'),
        url('gothamoffice/GothamOffice-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham Office';
    src: url('GothamOffice-Bold.eot');
    src: local('Gotham Office Bold'), local('GothamOffice-Bold'),
        url('gothamoffice/GothamOffice-Bold.eot?#iefix') format('embedded-opentype'),
        url('gothamoffice/GothamOffice-Bold.woff2') format('woff2'),
        url('gothamoffice/GothamOffice-Bold.woff') format('woff'),
        url('gothamoffice/GothamOffice-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Office';
    src: url('GothamOffice-BoldItalic.eot');
    src: local('Gotham Office Bold Italic'), local('GothamOffice-BoldItalic'),
        url('gothamoffice/GothamOffice-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('gothamoffice/GothamOffice-BoldItalic.woff2') format('woff2'),
        url('gothamoffice/GothamOffice-BoldItalic.woff') format('woff'),
        url('gothamoffice/GothamOffice-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


.desktop-ver{
	background-color: #f1f1f2;
}
.mobile-ver{
	background-color: #f1f1f2;
}

.desktop-ver{
	display: none;
}
.mobile-ver{
	display: none;
}
#grs2{
	margin-top: 160px;
}

#btnSidebar{
	cursor: pointer;
	position: relative;
	top: 1%;
}
#btnSidebar img{
	width: 20px;
}
#btnSidebar2 img{
	width: 20px;
}
.btnCloseSdb{
	position: fixed;
	right: 6px;
	top: 1%;
	z-index: 999;
}
#grs3{
	margin-top: 140px;
	margin-bottom: 0px;
}
.btnCloseSdb img{
	width: 10px;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #dcdcdc;
  overflow-x: hidden;
  transition: 0.5s;
  /*display: none;*/
  /*padding-top: 60px;*/
}
/*.sidebar #gbrProfil{
	position: absolute;
	top: 0;
	margin-left: 19%
	height: 96vh;
}*/
#nxtpg{
	height: 100%;
	/*width: 24%;*/
	max-width: 100%;
	position: absolute;
	right: 0;
	top: 0;
}
#tambalhitam{
	background-color: black;
	position: absolute;
	height: 200px;
	bottom: 0;
	right: 0;
	/*width: 350px;*/
	z-index: 1;
	/*display: none;*/
}
#tambalkrem{
	background-color: #dcdcdc;
	position: absolute;
	height: 200px;
	bottom: 0;
	left: 270px;
	/*padding-left: 270px;*/
	width: 100%;
	z-index: 1;
	/*display: none;*/
}
#tambalbru{
	background-color: #001aff;
	position: absolute;
	height: 100%;
	right: 0;
	width: 150px;
	/*padding-left: 270px;*/
	/*display: none;*/
}
#gbrbiru{
	position: absolute;
	height: 100%;
	width: auto;
	max-width: 350px;
	/*max-height: 720px;*/
	right: 0;
	top: 0;
}
#gbrprof{
	position: absolute;
	/*max-height: calc(100% - 200px);*/
	/*padding-left: 270px;*/
	/*width: 100%;*/
	/*height: 100vmax;*/
	width: 100%;
	padding-left: 270px;
	top: 0;
}
.sidebar #fotoprofil{
	padding-left: 270px;
	/*max-height: 100%;*/
	/*width: 100%;*/
	/*height: 100%;*/
	width: 1600px;
	height: 100vh;
	/*max-height: 100%;*/
	position: absolute;
	object-fit: cover;
	object-position: top left;
	/*left: 270px;*/
}
/*.sidebar #profiljpg{
	width: 55%;
	position: absolute;
	left: 270px;
}*/
.sidebar .txtprof {
	position: absolute;
	left: 270px;
	padding-left: 50px;
	bottom : 5%;
	z-index: 999;
}
.sidebar .txtprof #mrt{
	font-family: Atkinson Bold;
	font-size: 53px;
	letter-spacing: 2px;
}
.sidebar .txtprof #descprof{
	font-family: Gotham Office;
	font-size: 13px;
	letter-spacing: 0.5px;
	line-height: 17px;
}
.sidebar .txtprof #descprof b{
	font-family: Atkinson Bold;
	font-size: 13px;
}
.sidebar .txtprof2 {
	position: absolute;
	bottom: 4.9%;
	left: 65%;
	z-index: 999;
}
.sidebar .txtprof2 nobr{
	font-style: italic;
	font-family: Atkinson Bold;
	font-size: 18px;
	letter-spacing: 1.5px;
}
.sidebar .txtprof2 #emailprof{
	font-family: Gotham Office;
	font-size: 15px;
	letter-spacing: 2px;
	color: black;
}
.btnnp{
	position: absolute;
	bottom: 5%;
	right: 0;
	margin-right: 40px;
	z-index: 999;
	/*transform: rotate(90deg);*/
}
#bulat{
	cursor: pointer;
	width: 60px;
	position: relative;
	left: 53px;
}
#nxtpgbtn1 {
	/*position: absolute;*/
	/*z-index: 999;*/
	/*bottom: 4%;*/
	/*right: 13%;*/
	/*transform: rotate(90deg);*/
}
#nxtpgbtn2 {
	/*position: absolute;*/
	/*z-index: 999;*/
	/*bottom: 4%;*/
	/*right: 15%;*/
	/*transform: rotate(90deg);*/
}
#nxtpgbtn3 {
	/*position: absolute;*/
	/*z-index: 999;*/
	/*bottom: 4%;*/
	/*right: 17%;*/
	/*transform: rotate(90deg);*/
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
/*.kelapkelip {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}*/
#kelip1{
	-webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
    width: 15px;
    transform: rotate(90deg);
}
#kelip2{
	-webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    width: 15px;
    transform: rotate(90deg);
}
#kelip3{
	-webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    width: 15px;
    transform: rotate(90deg);
}

.sidebarkiri{
	position: fixed;
	max-width: 270px;
	width: 100%;
	height: 100vh;
	background-color: white;
	z-index: 999;
}
.sidebarkiri .kontenkiri{
	margin-left: 40px;

}
.sidebarkiri img{
	position: absolute;
	top: 5%;
	width: 42%;
}
.sidebarkiri .kontenkiri .sidetext{
	position: absolute;
	max-width: 70%;
	top :30%;
}
.sidebarkiri .kontenkiri .sidetext #jdltacto{
	font-size: 35px;
	font-family: Atkinson Bold;
}
.sidebarkiri .kontenkiri .sidetext p{
	font-family: Gotham Office;
	font-size: 14px;
	line-height: 17px;
}
.sidebarkiri .kontenkiri .sidefoot{
	font-family: Myriad Pro Regular;
	font-size: 10px;
	position: absolute;
	bottom: 3%;
}
.textProfil .nama{
	letter-spacing: 1px;
	font-family: Myriad Pro Light;
}
.textProfil .nama b{

	font-family: Myriad Pro Bold;
}
.textProfil{
	position: absolute;
	bottom: 18%;
	height: 50px;
	line-height: 50px;
	left: 400px;
	color: white;
}
.textProfil .mrtouch{
	font-family: Merriweather;
	font-size: 40px;
	margin-right: 40px;
}
.textProfil .text2{
	font-family: Myriad Pro Light;
	font-size: 13px;
	line-height: 20px;
	margin-right: 40px;
	margin-top: 7px;

}
.textProfil img{
	width: 100px;
	margin-right: 40px;
}
.textProfil .emailsdb{
	line-height: 20px;
}
.textProfil .emailsdb nobr{
	font-style: italic;
	letter-spacing: 1px;
	font-family: Myriad Pro Bold;
}
.textProfil .emailsdb a{
	letter-spacing: 1.5px;
	font-family: Myriad Pro Light;
	text-decoration-style: none;
	color: white;
}

.sidebarkanan{
	position: fixed;
	right: 0;
	max-width: 30px;
	height: 100vh;
	background-color: white;
	z-index: 999;
	padding: 0;
	text-align: center;
}
/*#menukonten{
	display: none;
}*/
.sidebarkanan img{
	width: 35%;
}
.sidebarkanan .scrollbtn{
	position: relative;
	top:22%;
	cursor: pointer;
	width: 70%;
}
.sidebarkanan .activemenu{
	cursor: pointer;
	width: 70%;
}
.sidebarkanan .unactivemenu{
	cursor: pointer;
	width: 30%;
}
.sidebarkanan #menu1{
	position: relative;
	top: 26%;
	cursor: pointer;
}
.sidebarkanan #menu2{
	position: relative;
	top: 29%;
	cursor: pointer;
}
.sidebarkanan #menu3{
	position: relative;
	top: 32%;
	cursor: pointer;
}
.sidebarkanan #garispanjang{
	position: relative;
	top: 36%;
	width: 75%;
}
.sidebarkanan #bttp{
	position: relative;
	top: 36%;
	/*bottom: 10%;*/
	cursor: pointer;
	width: 80%;
}

#menu1, #menu2, #menu3, #garispanjang, #bttp{
	visibility: hidden;
}
#btnSidebar2{
	cursor: pointer;
}

.kontenatas{
	margin-right: 20px;
	margin-left: 270px;
}
#gbrsatu{
	width: 100%;
}
.blackscreen{
	width: 100%;
	height: 100vh;
	background-color: #000000;
	align-items: center;
	display: flex;
}
#line1{
	width: 100%;
	animation: animated-text 4s steps(50);
    white-space: nowrap;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: none;
    text-align: center;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding-bottom: 50px;
}
#line2{
	width: 100%;
	animation: animated-text2 5s steps(56);
	/*animation-delay: 3s;*/
    white-space: nowrap;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: none;
    text-align: center;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#line3{
	width: 100%;
	animation: animated-text3 4s steps(53);
	/*animation-delay: 7s;*/
    white-space: nowrap;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: none;
    text-align: center;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding-top: 50px;
}
#line4{
	width: 100%;
	animation: animated-text4 6s steps(75);
	/*animation-delay: 7s;*/
    white-space: nowrap;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: none;
    text-align: center;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#line5{
	width: 100%;
	animation: animated-text5 3s steps(30);
	/*animation-delay: 7s;*/
    white-space: nowrap;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: none;
    text-align: center;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@keyframes animated-text{
  from{width: 0;}
  to{width: 550px}
}
@keyframes animated-text2{
	from{width: 0}
	to{width: 650px}
}
@keyframes animated-text3{
  from{width: 0;}
  to{width: 570px}
}
@keyframes animated-text4{
  from{width: 0;}
  to{width: 880px}
}
@keyframes animated-text5{
  from{width: 0;}
  to{width: 320px}
}

/* cursor animations */



#tekssatu{
	width: 100%;
	font-family: Gotham Office;
	font-size: 18px;
	font-style: italic;
	color: white;
	letter-spacing: 1px;
	/*margin-left: auto;
	margin-right: auto;*/
}
/*#tekssatu p{
	position: absolute;
}*/
#teksdua{
	width: 100%;
	font-family: Myriad Pro Light;
	font-size: 25px;
	color: black;
	letter-spacing: 5px;
}
#core-content {
	margin-right: 20px;
	margin-left: 270px;
	display: none;
}
.whitescreen{
	width: 100%;
	height: 100vh;
	background-color: #FFFFFF;
	align-items: center;
	display: flex;
	cursor: default;
}
/*#demo{
	position: absolute;
	left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
	margin-bottom: 20px;
}
#demo2{
	position: absolute;
	left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}*/
/*#teksdua{
	display: block;
	margin: 3px;
	width: 12px;
}*/

.hvrbox,
.hvrbox * {
	box-sizing: border-box;
}
.hvrbox {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	/*margin: 1px;*/
}
.hvrbox img {
	width: 22px;
}
.hvrbox .hvrbox-layer_bottom {
	display: block;
}
.hvrbox .hvrbox-layer_top {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	color: #000;
	padding: 10px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
	opacity: 1;
}
.hvrbox:hover .hvrbox-layer_bottom{
		opacity: 0;
	}
.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 18px;
	display: inline-block;
	position: absolute;
	/*top: 50%;*/
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
	font-size: 20px;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.hvrbox.active .hvrbox-text_mobile {
	display: block;
}


#bigphoto{
	width: 100%;
	margin-bottom: 250px;
}
#caption{
	margin-top: 10px;
	font-family: Myriad Pro Regular;
	margin-bottom: 200px;
}
#boldcapt{
	font-family: Myriad Pro Bold;
}
#myCarousel img{
	max-width: 70%;
}
#carouselnavigator{
	width: 18px;
}

#myCarousel .carousel-control-next{
	position: absolute;
	right: 50px;
}
#myCarousel .carousel-control-prev{
	position: absolute;
	left: 50px;
}


.modal {
    display: none; 
    position: fixed; 
    z-index: 999; 
    padding-top: 60px; 
    left: 0;
    top: 0;
    max-width: 100%; 
    max-height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
}

.modal-content {
    margin: auto;
    display: block;
    width: auto;
   max-width: 93%;
   height: auto;
   max-height: 95%;
}
.modal .close {

    position: absolute;
    top: 15px;
    right: 35px;
    color: #FFF;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}


#bgrjudul{
	font-size: 60px;
	font-family: Merriweather;
	margin-bottom: 100px;
	padding-left: 90px;
}
hr.garis{
	margin-top: 0;
	border: 1px solid #BEBEBE;
	margin-bottom:  0;
}
#icon1{
	width: 100%;
}
.Pictogram{
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 55px;
	padding-right: 55px;
	background-color: #FFFFFF;
	height: 100vh;
}
.pictoatas{
	position: absolute;
	top:25%;
	padding-left: 20px;
	width: 90%;
}
#picto1{
	font-style: italic;
	font-family: Atkinson Regular;
	font-size: 40px;
}
#picto2{
	font-family: Gotham Office;
	font-size: 18px;
}
.footnotepicto{
	position: absolute;
	font-family: Gotham Office;
	bottom:0%;
	padding-left: 20px;
	font-size: 15px;
}
#pragmatical{
	margin-left: 58px;
}
.footnotepicto b{
	font-family: Atkinson Bold;
	font-size: 16px;
}

#icon2{
	width: 70%;
}
#tacto1{
	font-style: italic;
	font-family: Atkinson Regular;
	font-size: 40px;
}
#tacto2{
	font-family: Gotham Office;
	font-size: 18px;
}
hr.garis2{
	width: 90%;
	border-width: 1px; border-color: rgb(85,85,85);
}
.footnotetacto{
	margin-top: 15px;
	font-family: Gotham Office;
	font-size: 15px;
}
#jrkftn{
	margin-left: 10px;
}
#jrkftnbwh{
	margin-left: 10px;
	padding-bottom: 150px;
}
.footnotetactoawal{
	font-family: Gotham Office;
	font-size: 15px;
}
.footnotetacto b{
	font-family: Atkinson Bold;
	font-size: 16px;
}
.tactogram1{
	margin-top: 50px;
	display: flex;
	align-items: center;
	margin-bottom: 50px;
	padding-left: 55px;
	padding-right: 55px;
}
.tactogram2{
	padding-left: 55px;
	padding-right: 55px;
}
#icon3{
	width: 100%;
	margin-bottom: 15px;
}
.tactobawah{
	margin-left: 30px;
	width: 88%;
}

#icon4{
	width: 100%;
	margin-top: 40px;
	margin-bottom: 40px;
	padding-left: 55px;
	padding-right: 55px;
}

hr.garis3{
	border: 1px solid #BEBEBE;
	width: 91%;
}

hr.garisantarsection{
	border: 1px solid #BEBEBE;
	max-width: 100%;
	margin-left: 30px;
	margin-bottom: 140px;
}

.guideline{
	margin-top: 100px;
}
#gdljudul{
	padding-left: 20%;
	font-size: 60px;
	font-family: Merriweather;
}
#gdlbr{
	margin-top: 50px;
	width: 90%;
	/*border: 1px solid #969696;*/
}
#captguide{
	font-family: Gotham Office;
	font-size: 14px;
	position: absolute;
	right: 15%;
	bottom: 15%;
}
#imgguide{
	position: absolute;
	bottom: 52%;
	right: 15%;
}

.tebel{
	font-family: Gotham Office;
}
#kecil{
	font-size: 12px;
	/*font-family: Gotham Office;*/
}
#m-kecil{
	font-size: 20px;
}
.table1 {
	margin-left: auto;
	margin-right: auto;
	margin-top:25px;
  	font-family:Gotham Office;
  	border-collapse: collapse;
  	width: 90%;
  	font-size: 18px;
}
.table1 tr th{
	font-family: Gotham Office;
	font-weight: normal;
}
.table1 tr td{
	text-align: center;
	height: 100px;
}
.table1, .table1 td, .table1 th {
  border: 1px solid #707070;
  /*padding: 10px;*/
}
#meaning{
	text-align: left;
	padding-left: 50px;
}
#m-meaning{
	text-align: left;
	padding-left: 30px;
}
.baris1{
	width: 20%;
}
.baris2{
	width: 60%;
	padding-left: 50px;
}
#simbolguideline{
	width: 11%;
}

.table2{
	font-size: 18px;
	font-family: Gotham Office;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	width: 90%;
}
.table2 tr #kiri{
	width: 78%;
	padding-left: 55px;
	border-right: none;
	font-weight: normal;
}
.table2 tr #kanan{
	border-left: none;
}
.table2, .table2 td, .table2 th {
  border: 1px solid #707070;
}

.guidephoto{
	margin-top: 50px;
	width: 90%;
	border: 1px solid #bdbdbd;
}

.guidephoto2{
	margin-top: 50px;
	width: 90%;
}

#tactoperspective{
	margin-left: 58px;
}

.simulation{
	margin-top: 100px;
	width: 100%;
	height: 100vh;
	align-items: center;
}
#smljudul{
	padding-left: 20%;
	font-size: 60px;
	font-family: Merriweather;
}
#myCarousel2{
	margin-top: 25px;
}
#myCarousel2 .carousel-item img{
	padding-right: 9px;
	width: 97%;
}
.simnavigator{
	margin-top: 20px;
	right: 200px;
	position: absolute;
	max-width: 50%;
	background-color: #000;
}
#carouselnavigator2{
	width: 20px;
}
.simkiri{
	margin-right: 25px;
	margin-left: 5px;
}
.simkanan{
	margin-left: 25px;
	margin-right: 10px;
}
.simzoom{
	cursor: pointer;
}

.simnavigator input{
	background-color: white;
	border: 1px solid #BEBEBE;
	padding-left: 10px;
	font-family: Myriad Pro Regular;
	color: black;
}
.instalsys{
	background-color: #FFFFFF;
	width: 100%;
	height: 100vh;
	display: flex;
  	align-items: center;
  	margin-top: 150px;
}
.instalsys img {
	width: 90%;
}
.instalsys #tactoperspective {
	margin-left: 63px;
}
.closing1{
	width: 100%;
	height: 100vh;
	align-items: center;
	display: flex;
}
.closing1 p{
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
	font-size: 18px;
	font-family: Gotham Office;
}
.closing2{
	background-color: #001aff;
	width: 100%;
	height: 100vh;
	display: flex;
  	align-items: center;
}
.closing2 img{
	width: 135px;
}
#captsim{
	font-family:Gotham Office;
	font-size: 14px;
	position: absolute;
	right: 15%;
	bottom: 15%;
}
.simulationimg{
	cursor: zoom-in;
}
.carouselsim2{
	display: none;
}


/* MOBILE VERSION*/

/*.sec1{
	height: 100px;
	width: 100%;
	position: fixed;
	background-color: #FFF;
}*/

.m-sidebar .container-fluid {
	padding-left: 50px;
}
.m-sidebar{
	width: 100%;
	height: 100%;
	background-color: #FFF;
	position: absolute;
	top:-10000px;
	z-index: 999;
	transition: 0.5s;
}
.m-sidebar .container-fluid .row .col-6 img{
	width: 30px;
	transform: rotate(180deg);
	position: absolute;
	right: 10%;
}
.m-sidebar .container-fluid .row .col-6{
	display: flex;
	align-items: center;
	margin: 0;

}
.m-sidebar .m-iconsdb{
	width: 35px;
	position: absolute;
	top: 13%;
	right: 4.7%;
}
.m-sidebar .textdua{
	
	font-family: Gotham Office;
	font-size: 20px;
	line-height: 25px;
	position: absolute;
	top: 8%;
	/*line-height: 35px;*/
}
#tactoprof{
	font-family: Atkinson Bold;
	font-size: 45px;
	position: absolute;
	top: 6%;
}
.m-sidebar .footsidebar{
	font-family: Gotham Office;
	font-size: 18px;
	position: absolute;
	top: 15%;
}
.m-emmail{
	font-family: Gotham Office;
	position: absolute;
	top: 25%;
	font-size: 30px;
	line-height: 35px;
}
.m-emmail a{
	color: black;
}
.m-emmail nobr{
	font-family: Atkinson Bold;
	font-style: italic;
	font-size: 35px;
	letter-spacing: 1px;
}
.m-sidebar .mobile-profile{
	position: absolute;
	bottom: -50px;
	/*max-height: 75%;*/
	/*height: 80%;*/
	width: 100%;
	/*margin-left: 200px;*/
	/*right: 0;*/
	/*width: 100%;*/
	/*background-position: left;*/
	/*object-fit: cover;*/
	/*object-position: 0 250px;*/
}
.m-textProfil{
	width: 85%;
	position: absolute;
	color: white;
	left: 70px;
	bottom: 10%;
}
.m-textProfil hr{
	border: 1px solid white;
}
.m-textProfil .m-nama{
	letter-spacing: 1px;
	font-family: Myriad Pro Light;
	font-size: 30px;
}
.m-textProfil .m-nama b{
	font-family: Myriad Pro Bold;
	font-size: 30px;
}
.m-textProfil .m-mrtouch{
	font-family: Merriweather;
	font-size: 60px;
	margin-right: 60px;
}
.m-textProfil .m-text2{
	font-family: Myriad Pro Light;
	font-size: 30px;
	line-height: 30px;
	margin-right: 40px;
}
.m-textProfil .m-emailsdb{
	line-height: 30px;
	font-size: 30px;
}
.m-textProfil .m-emailsdb nobr{
	font-style: italic;
	letter-spacing: 1px;
	font-family: Myriad Pro Bold;
}
.m-textProfil .m-emailsdb a{
	letter-spacing: 1.5px;
	font-family: Myriad Pro Light;
	text-decoration-style: none;
	color: white;
}



.sec1{
	z-index: 999;
	position: fixed;
	top: 0;
	height: 110px;
	width: 100%;
	background-color: #FFF;
}
.sec1 .container-fluid, .sec1 .container-fluid .row{
	height: 100%;
}
.sec1 .container-fluid .row .col-6{
	display: flex;
	align-items: center;
}
.sec1 .container-fluid .row .col-6 #togglebtn{
	position: absolute;
	right: 10%;
}
.sec1 .container-fluid .row .col-6 #logotacto{
	width: 35%;
	position: absolute;
	left: 10%;
}



.sec2{
	padding-top: 200px;
	width: 100%;
	background-color: #f1f1f2;
	padding-bottom: 100px;
}
.m-Pictogram{
	padding-top: 50px;
	padding-left: 35px;
	padding-right: 35px;
	padding-bottom: 50px;
	background-color: #FFFFFF;
}
#m-bgrjudul{
	margin-left: 70px;
	font-size: 74px;
	font-family: Merriweather;
	margin-bottom: 100px;
}
#m-gdljudul{
	margin-left: 70px;
	font-size: 74px;
	font-family: Merriweather;
}
#m-gdlbr{
	margin-top: 50px;
	width: 90%;
	border: 1px solid #D7D7D7;
}
.cptgbr{
	margin-top: 15px;

}
#m-icon1{
	width: 96%;
	margin-top:20px;
}
/*.m-pictoatas{
	width: 90%;
}*/
.unaktifmenu{
	width: 40px;
}
.aktifmenu{
	width: 80px;
}
#m-menu2{
	width: 40px;
}
#m-menu3{
	width: 40px;
}
#m-picto1{
	font-style: italic;
	font-family: Atkinson Regular;
	font-size: 58px;
}
#m-picto2{
	font-family: Gotham Office;
	font-size: 25px;
}
.m-footnotepicto{
	margin-top: 10px;
	font-family: Myriad Pro Light;
}
.m-footnotepicto b{
	font-family: Myriad Pro Bold;
}

.sec2 .container-fluid{
	max-width: 90%;
}
.m-tactogram3{
	margin-bottom: 130px;
}
#sec3-content img{
	width: 100%;
}
.m-footnotesimu{
	margin-top: 15px;
	font-family: Gotham Office;
	font-size: 20px;
}
.m-footnotesimu nobr{
	font-family: Atkinson Bold;
}
#sec3-content{
	margin-bottom: 130px;
}
#sec3-content .container-fluid p{
	/*margin-top: 10px;*/
	margin-bottom: 50px;
}

#m-captguide{
	font-family:Gotham Office;
	font-size: 18px;
	position: absolute;
	right: 15%;
	bottom: 15%;
}
.m-table1 {
	margin-left: auto;
	margin-right: auto;
	margin-top:25px;
  	font-family: Gotham Office;
  	border-collapse: collapse;
  	width: 90%;
  	font-size: 25px;
  	font-weight: normal;
}
.m-table1 tr th{
	font-family: Gotham Office;
	font-weight: normal;
}
.m-table1 tr td{
	text-align: center;
	height: 100px;
}
#isiTable1{
	height: 140px;
}
.m-table1 td, .m-table1 th {
  border: 1px solid #969696;
  /*padding: 10px;*/
}
.m-baris1{
	width: 25%;
}
.m-baris2{
	width: 60%;
	padding-left: 30px;
}
.m-table2{
	font-size: 25px;
	font-family: Gotham Office;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	width: 90%;
}
.m-table2 tr th{
	font-family: Gotham Office;
	font-weight: normal;
}
.m-table2 tr #kiri{
	width: 70%;
	padding-left: 55px;
	border-right: none;
}
.m-table2 tr #kanan{
	border-left: none;
}
.m-table2 td, .m-table2 th {
  border: 1px solid #969696;
}
.m-guidephoto{
	margin-top: 25px;
	width: 90%;
	border: 1px solid #bdbdbd;
}
.m-guidephoto2{
	margin-top: 25px;
	width: 90%;
}

.sec3{
	position: fixed;
	bottom: 0;
	height: 180px;
	width: 100%;
	background-color: #FFF;
	z-index: 999;
}
.sec3 .container-fluid, .sec3 .container-fluid .row{
	height: 100%;
}
.sec3 .container-fluid .row .col-4 a{
	width: 100px;
}
.menusize{
	width: 75px;
	height: 75px;
}

#sec1-content{
	display: block;
}
#sec2-content{
	display: none;
}
#sec3-content{
	display: none;
}

.m-tactogram1{
	margin-top: 50px;
	display: flex;
	align-items: center;
	margin-bottom: 50px;
	padding-left: 35px;
	padding-right: 35px;
}
#m-tacto1{
	font-style: italic;
	font-family: Atkinson Regular;
	font-size: 55px;
}
#m-tacto2{
	font-family: Gotham Office;
	font-size: 25px;
}
.m-footnotetacto{
	margin-top: 15px;
	padding-left: 35px;
	font-family: Gotham Office;
	font-size: 20px;
}
.m-footnotetacto b{
	font-family: Atkinson Bold;
	font-size: 20px;
}


#men1{
	margin-top: 30px;
}
#men2{
	margin-top: 50px;
}
#men3{
	margin-top: 50px;
}


#toggletablebtn{
	margin-top: 30px;
}
.lefttoggle{
	margin-right: 10px;
}
.midtoggle{
	margin-right: 10px;
}
#tab1{
	cursor: pointer;
}
#tab2{
	cursor: pointer;
}
#tab3{
	cursor: pointer;
}
#kontentabel2{
	display: none;
}
.tabble2 {
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	width: 500px;
}
#tb2h{
	padding-top: 9px;
	padding-bottom: 8px;
	font-size: 19px;
	padding-left: 80px;
}
.tabble2 tr th{
	font-family: Myriad Pro Bold;
}
.tabble2 tr td{
	height: 96px;
	padding-left: 80px;
}
.tabble2 td, .tabble2 th {
  border: 1px solid #BEBEBE;
  /*padding: 10px;*/
}

#ige{
	position: absolute;
	bottom: 3%;
	z-index: 999;
}