@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap'); html{ background: #fff; } body { color: #2c2c2c; font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 400; } .wow { visibility: hidden; } .overflowHidden { overflow: hidden; } .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; } img { border: 0; max-width: 100%; height: auto; } .italic { font-style: italic; } .bold { font-weight: bold; } .regular { font-weight: lighter; } .left { float: left; display:inline; } .right { float: right; display:inline; } .relative{ position:relative; } .clear { clear: both; } a { text-decoration: none; color: #000; transition: all 0.3s ease-in-out 0s; } a:focus{ outline: 0; } strong { font-weight: 700; } p { margin: 1px 0 15px; line-height: 25px; } input, textarea, select { font-size: 14px; font-family: 'Roboto', sans-serif; border: none; border: 1px solid #c9c9c9; padding: 5px; margin: 0; color: #666; } img { margin-bottom: -3px; } input[type=checkbox], input[type=radio] { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } h1 { font-size: 32px; } h2 { font-size: 28px; } h3 { font-size: 24px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 14px; } h1, h2, h3, h4, h5, h6 { font-weight: 700; font-family: 'Roboto', sans-serif; } section { position: relative; } .text-center { text-align: center; } .rows{ padding: 20px 0; } .overflowhidden{ overflow: hidden; }  .wrapper { max-width: 1140px; margin: 0 auto; padding: 0px 20px; } .mid-wrapper{ max-width: 960px; padding: 0 0px; margin: 0 auto; position: relative; } #middle-content{ max-width: 600px; padding: 0 0px; margin: 0 auto; position: relative; } .inner_wrap{ width:800px; margin: 0 auto; } .afterclear:after { clear: both; content: ''; display: block; }    .main_center{ display: none; background: #fff; } .main_center#page1,.main_center#lastpage{ background: #8318F5; } .main_center.active{ display: block; } .text_sosok{ padding-right: 15%; margin-top: -30%; padding-left: 15%; } .mainButton{ display: inline-block; border-radius: 6px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); background-color: #ffffff; padding: 15px 25px; font-size: 17px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #8318F5; text-transform: uppercase; } .mainTitle{ text-align: center; margin-top: 20px; } .mainTitle h3{ font-size: 24px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #ffffff; margin: 0 0 7px 0; text-transform: uppercase; } .mainTitle p{ font-size: 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.25; letter-spacing: normal; text-align: center; color: #ffffff; margin-bottom: 25px; } .table_content{ display: table; width: 100%; height: 100%; background: #000; } .section_inner{ display: block; margin-top: -70px; position: relative; z-index: 2; } .form_group{ display: block; width: 100%; margin-bottom: 15px; } .form_section{ display: block; margin: 0 auto; max-width: 320px; padding-right: 20px; padding-left: 20px; } .form_group label{ font-size: 16px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.6em; letter-spacing: normal; color: #333333; margin-bottom: 15px; display: block; } .form_input{ display: block; width: 100%; padding: 5px 0; border:none; border-bottom: 1px solid #a9a9a9; } .red_bt{ display: inline-block; background: #8318F5; padding: 10px 20px; color: #fff; border-radius: 6px; font-size: 14px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #ffffff; } .red_bt .fa{ color: #fff; } .row-radio{ display: block; width: 100%; margin-bottom: 10px; } .row-radio input, .row-radio label{ display: inline-block; vertical-align: middle; } .row-radio input{ margin-right: 10px; } .row-radio label{ font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.29; letter-spacing: normal; color: #777777; margin: 0; } .row-radio input[type="radio"]:checked+label{ color: #000; } .button_vertical a{ margin: 0 5px; width: 40%; } .inputTextarea{ display: block; width: 100%; padding: 5px 0; border:none; border-bottom: 1px solid #a9a9a9; } .section_upload{ display: block; width: 100%; text-align: center; } .box_upload{ margin: 0 auto; display:table; width: 200px; height: 200px; border-radius: 6px; border: solid 1px #a9a9a9; background-color: #f9f9f9; text-align: center; } .inner_upload{ display: table-cell; vertical-align: middle; max-width: 50px; text-align: center; } .inner_upload img{ max-width: 90px; } .inner_upload span{ display: block; text-align: center; font-size: 12px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #000000; } .help{ text-align: center; width: 100%; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: normal; color: #000000; } .paging_nav { position: fixed; width: 100%; top: 10px; left: 0; margin-top: 0px; text-align: center; } .paging_nav span.active { width: 11px; height: 5px; border-radius: 2.5px; background-color: #8318F5; opacity: 1; } .paging_nav span { display: inline-block; margin: 0 2px; width: 5px; height: 5px; opacity: 0.2; border-radius: 2.5px; background-color: #8318F5; } #uploadFoto { width: 200px; height: 150px; position:relative;  } .box_upload_crop{ width: 200px; height: 200px; position: relative; margin: 0 auto; border: 1px solid #a9a9a9; box-sizing: content-box; -moz-box-sizing: content-box; background-color: #f9f9f9; background-image: url(https://cdns.klimg.com/merdeka.com/media/i/a/unggah_foto.png); background-size: 82px; background-repeat: no-repeat; background-position: center; border-radius: 6px; overflow: hidden; } #uploadFoto{ width: 200px; height: 200px; } .masking_button{ left: 0; top: 0; right: 0; bottom: 0; background: #000; margin: auto; position: absolute; z-index: 2; opacity: 0; } .cropControlRemoveCroppedImage{ display: none !important; } .cropControlsUpload{ } .main_center#lastpage .section_text{ margin-top: -80px; padding: 0 20px; } .main_center#lastpage .mainTitle h1{ font-size: 32px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #ffffff; margin: 0 0 10px 0; } .main_center#lastpage .mainTitle h4{ font-size: 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.43; letter-spacing: normal; text-align: center; color: #ffffff; margin: 0; } .main_center#lastpage .mainTitle p{ font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.43; letter-spacing: normal; text-align: center; color: #ffffff; } .erorr_text{ display:none; text-align: left; color: red; font-size: 11px; padding: 3px 0; } .hide{ display: none; }    @media only screen and (max-width: 480px) {  } @media screen and (min-width:481px) and (max-width:1024px) {  } @media only screen and (min-width: 1140px) {  } #croppic{ width: 400px;  height: 208px;  position: relative;  margin: 50px 70px 20px; border: 3px solid #FFF; box-sizing: content-box; -moz-box-sizing: content-box; border-radius: 2px; background-image: url(https://cdns.klimg.com/merdeka.com/media/i/a/placeholder_sosok_mdk.png); background-repeat: no-repeat; background-position: center; box-shadow: 8px 8px 0px rgba(0,0,0,0.1); }  .cropImgWrapper{ cursor: -webkit-grab; cursor: grab; } .cropImgWrapper:active{ cursor: -webkit-grabbing; cursor: grabbing; } .cropImgUpload{ z-index:2; position:absolute; height:28px; display:block; top: -30px; right: -2px; font-family:sans-serif; width:20px; height:20px; text-align:center; line-height:20px; color:#FFF; } .cropControls{ z-index:2; position:absolute; height:30px; display:block;  top: -1px; right: -1px; font-family:sans-serif; background-color:rgba(0,0,0,0.35); } .cropControls i{ display:block; float:left; margin:0; cursor:pointer; background-image:url('https://cdns.klimg.com/merdeka.com/media/i/a/cropperIcons.png'); width:30px; height:30px; text-align:center; line-height:20px; color:#FFF; font-size:13px; font-weight: bold; font-style: normal; } .cropControls i:hover{ background-color:rgba(0,0,0,0.7); } .cropControls i.cropControlZoomMuchIn{ background-position:0px 0px;} .cropControls i.cropControlZoomIn{ background-position:-30px 0px; } .cropControls i.cropControlZoomOut{ background-position:-60px 0px; } .cropControls i.cropControlZoomMuchOut{ background-position:-90px 0px; } .cropControls i.cropControlRotateLeft{ background-position:-210px 0px; } .cropControls i.cropControlRotateRight{ background-position:-240px 0px; } .cropControls i.cropControlCrop{ background-position:-120px 0px;} .cropControls i.cropControlUpload{ background-position:-150px 0px;} .cropControls i.cropControlReset{ background-position:-180px 0px;} .cropControls i.cropControlRemoveCroppedImage{ background-position:-180px 0px;} .cropControls i:last-child{ margin-right:none; } #croppicModal{ position:fixed; width:100%; height:100%; top: 0; left: 0; display:block; background:rgba(0,0,0,0.8); z-index: 10000; }  .bubblingG { text-align: center; width:80px; height:50px; position: absolute; top: 50%; left: 50%; margin: -18px auto auto -40px; z-index:2; } .bubblingG span { display: inline-block; vertical-align: middle; width: 10px; height: 10px; margin: 25px auto; background: #FFF; box-shadow: 5px 5px 0px rgba(0,0,0,0.2); -moz-border-radius: 50px; -moz-animation: bubblingG 1s infinite alternate; -webkit-border-radius: 50px; -webkit-animation: bubblingG 1s infinite alternate; -ms-border-radius: 50px; -ms-animation: bubblingG 1s infinite alternate; -o-border-radius: 50px; -o-animation: bubblingG 1s infinite alternate; border-radius: 50px; animation: bubblingG 1s infinite alternate; } #bubblingG_1 { -moz-animation-delay: 0s; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; } #bubblingG_2 { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; -ms-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } #bubblingG_3 { -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } @-moz-keyframes bubblingG { 0% { width: 10px; height: 10px; background-color:#FFF; -moz-transform: translateY(0); } 100% { width: 24px; height: 24px; background-color:#FFF; -moz-transform: translateY(-21px); } } @-webkit-keyframes bubblingG { 0% { width: 10px; height: 10px; background-color:#FFF; -webkit-transform: translateY(0); } 100% { width: 24px; height: 24px; background-color:#FFF; -webkit-transform: translateY(-21px); } } @-ms-keyframes bubblingG { 0% { width: 10px; height: 10px; background-color:#FFF; -ms-transform: translateY(0); } 100% { width: 24px; height: 24px; background-color:#FFF; -ms-transform: translateY(-21px); } } @-o-keyframes bubblingG { 0% { width: 10px; height: 10px; background-color:#FFF; -o-transform: translateY(0); } 100% { width: 24px; height: 24px; background-color:#FFF; -o-transform: translateY(-21px); } } @keyframes bubblingG { 0% { width: 10px; height: 10px; background-color:#FFF; transform: translateY(0); } 100% { width: 24px; height: 24px; background-color:#FFF; transform: translateY(-21px); } }  @charset "utf-8";  @media all and (max-width:1050px){   .wrapper,.mid-wrapper{ width: 100%; }   } @charset "utf-8";  @media all and (max-width:1023px){      } @charset "utf-8";  @media all and (max-width:767px){   .wrapper, .mid-wrapper{ }   }  @media only screen and (min-device-width: 320px) and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { #middle-content{ margin-bottom: 0px; } } @charset "utf-8";  @media all and (max-width:349px){   .main-images{ overflow: hidden; position: relative; } .main-images img{ width: 100%; } .caption-welcome{ padding: 20px; } .caption-welcome h3{ font-size: 17px; line-height: inherit; margin: 0 0 10px 0; } .caption-welcome p{ font-size: 14px; } .row-button a.block-bt{ padding: 10px 20px; font-size: 17px; } .question-row{ padding:20px 10px 10px 10px; } .question-row h3{ font-size: 17px; } .list-jawaban{ padding: 10px; } .list-jawaban .row-jawaban{ font-size: 15px; }  .help-info{ margin-top: 15px; } .help-info p{ font-size: 11px; } .block-coint .text-coint{ font-size: 14px; }   }