@font-face {
	font-family: 'Tricky Jimmy';
	src: url('./../fonts/TrickyJimmyRegular.woff2') format('woff2'),
			url('./../fonts/TrickyJimmyRegular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: "OpenSans";
  src: url('./../fonts/publicSans/PublicSans-Regular.woff2') format('woff2'),
  url('./../fonts/publicSans/PublicSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
 
@font-face {
  font-family: "OpenSans";
  src: url('./../fonts/publicSans/PublicSans-Italic.woff2') format('woff2'),
  url('./../fonts/publicSans/PublicSans-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}
 
@font-face {
  font-family: "OpenSans";
  src: url('./../fonts/publicSans/PublicSans-Bold.woff2') format('woff2'),
  url('./../fonts/publicSans/PublicSans-Bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "OpenSans";
  src: url('./../fonts/publicSans/PublicSans-BoldItalic.woff2') format('woff2'),
  url('./../fonts/publicSans/PublicSans-BoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
}
 
@font-face {
  font-family: "OpenSans";
  src: url('./../fonts/publicSans/PublicSans-Light.woff2') format('woff2'),
  url('./../fonts/publicSans/PublicSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: italic;
}
 
@font-face {
  font-family: "OpenSans";
  src: url('./../fonts/publicSans/PublicSans-LightItalic.woff2') format('woff2'),
  url('./../fonts/publicSans/PublicSans-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
}


/* =============== CUSTOM CODE ================== */
body{
	font-family: "OpenSans";
  color: #111;
  letter-spacing: -1px;
  font-size: 18px;
}


.xtitle{
	font-family: 'Tricky Jimmy';
  font-size: 72px;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: 0px;
}

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

.m-auto{margin: 0 auto;}
.c-red{color: #f00;}
.c-white{color: #fff;}
.c-yellow{color: #ffbd00;}
.c-green{color: #007935;}
.c-lightblue{color: #89a8cc;}

#bottom-wizard{border: none;     padding-top: 7px;}
footer .block-wrap{border:none; text-align: center;font-size: 12px; padding: 15px 0;}


.xlogo{text-align: center;}
.xlogo img{
  width: 120px;
  margin-bottom: 20px;
}
.xsubtitle{
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 20px;
  line-height: 1.2;
}
.xpara{font-size: 22px; margin-bottom: 15px; }

.xcontainer-left{width: 45%;}


button.backward, button.forward, button.submit {border-radius: 25px; padding: 15px 40px;}

.content-right {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 60px);
}

.w80{width: 80%; margin: auto;}


#top-wizard {
  position: absolute;
  top: 11px;
  z-index: 99;
  width: 100%;
  top: -45px;
}

#wizard_container{
  position: relative;
}

button.submit:before {top: 25%; right: 15%;}

.backward:hover, .forward:hover{background-color: #f00;}


/* =============== XSECTION1 ================== */
.xsection1{
	background-image: url('./../img/1.bg-left.png'), url('./../img/1.bg-right.png'), url('./../img/1.bg.png');
  background-position: left bottom, right bottom, center;
  background-repeat: no-repeat;
  background-size: 28%, 20%, cover;
  background-attachment: fixed;
}

.xsection1 button.forward.btn_count_plus{background-color: #f00; }
.xsection1 #bottom-wizard{text-align: center;}
.xsection1 .content-right{padding: 30px;}


/* =============== XSECTION2 ================== */
.xsection2{
	background-image: url('./../img/2.bg-right.png'), url('./../img/2.bg.png');
  background-position: right bottom, center;
  background-repeat: no-repeat;
  background-size: 55%, cover;
  background-attachment: fixed;
}

.xsection2 #wizard_container, .xsection2 .block-wrap{max-width: 1000px;}
.xsection2 .xpara{font-weight: 600;}
.xsection2 #bottom-wizard{text-align: left;}
.xsection2 button.forward{background-color: #fff; color: #f00;}
.xsection2 button.backward {color: #3d3d3d;
  background: #c0c0c0;}


/* =============== XSECTION3 ================== */
.xsection3{
	background-image: url('./../img/3.bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  background-attachment: fixed;
}
.xsection3 #wizard_container, .xsection3 .block-wrap{max-width: 1000px;}
.xsection3 #bottom-wizard{text-align: center;}

.xinput {
  text-align: center;
  margin-top: 30px;
}

.xinput input {  
  padding: 10px 20px;
  max-width: 350px;
  text-align: center;
  border-radius: 25px;
  border: none;
  width: 100%;
}

.xsection3 button.forward{ background-color: #ffbf00; color: #007935;}
.xsection3 button.backward {color: #3d3d3d; background: #c0c0c0;}

/* =============== XSECTION4 ================== */
.xsection4, .xsection6, .xsection8{
	background-image: url('./../img/4.bg-right.png');
  background-color: #eae8d9;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size:330px;
  background-attachment: fixed;
}

.container_radio.version_2 {
  min-height: 30px;
  background: #fff;
  border-radius: 20px;
  display: inline-block;
  padding: 4px 25px 3px 40px;
  min-width: 220px;
  font-size: 18px;
}

h3.main_question{font-size: 22px;}
.container_radio .checkmark:after{background-color: #f00;}
.form-control{font-size: 18px;}

.xsection4 button.forward, .xsection6 button.forward, .xsection8 button.forward{ background-color: #f00; color: #fff;}
.xsection4 button.backward, .xsection6 button.backward, .xsection8 button.backward{ background-color: #fff; color: #777;}


/* =============== XSECTION5 ================== */
.xsection5{
	background-image: url('./../img/5.bg-right.png');
  background-color: #ffbd00;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size:50%;
  background-attachment: fixed;
}
.xsection5 #wizard_container, .xsection5 .block-wrap{max-width: 1000px;}

.xsection5 .xcontainer-left {
  width: 55%;
}
.xsection5 #bottom-wizard{text-align: left;}

.xsection5 button.forward{ background-color: #f00; color: #fff;}


/* =============== XSECTION6 ================== */
/* x6 sama dengan x4 karena soal  */

/* =============== XSECTION7 ================== */
.xsection7{
	background-image: url('./../img/7.bg-left.png'),url('./../img/7.bg.png') ;
  background-position: left bottom, center;
  background-repeat: no-repeat;
  background-size:38%, cover;
  background-attachment: fixed;
}
.xsection7 #wizard_container, .xsection7 .block-wrap{max-width: 1000px;}

.xsection7 .xcontainer-row {
  display: flex;
  justify-content: end;
}
.xsection7 .xcontainer-right {
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* =============== XSECTION8 ================== */
/* sama seperti x4-x6  */

/* =============== XSECTION9 ================== */
.xsection9{
	background-image: url('./../img/9.bg-left.png'), url('./../img/9.bg-right.png'), url('./../img/9.bg.png');
  background-position: left bottom, right bottom, center;
  background-repeat: no-repeat;
  background-size: 30%, 30%, cover;
  background-attachment: fixed;
}

.xsection9 #bottom-wizard{text-align: center;}

.xsection9 button.submit{
  color: #402e98;
  background-color: #ffbf00;
}

/* =============== XSECTION9 ================== */

.xsection-thanks{
  background-color: #ffdfb0;
  background-image: url('./../img/10.bg-left.png');
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size:33%;
  background-attachment: fixed;

}

.xwrap{
  width: 100%;
  max-width: 1000px;
  padding: 15px;
  margin: 0 auto;
  /* background: beige; */
  height: calc(100% - 45px);
}

.xcentercontainer{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.xback{

}

.xback a{
  background-color: #f00; color: #fff; padding: 10px 20px;    
  display: inline-block;
  margin-top: 20px;}



@media screen and (max-width:767px){
  .xtitle{font-size: 46px;}
  .xsubtitle{font-size: 20px;}
  .xpara{font-size: 16px;}
  .xsection1 {
    background-image:url(./../img/1.bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
  }

  .xcontainer-left {
    width: 100%;
  }

  .xsection2 {
    background-image: url(./../img/2.bg-right.png), url(./../img/2.bg.png);
    background-size: 255px, cover;
  }

  .xsection3 .xtitle{font-size: 30px;}
  .xinput input {
    font-size: 15px;
  }
  .w80{width: 100%;}
  .xsection4, .xsection6, .xsection8{background-size: 135px;}
  .xsection5 .xcontainer-left{width: 100%;}
  .xsection7 .xcontainer-right{width: 100%;}

  #top-wizard{top: -15px;}
  .xsection9{
    background-size: 0%, 0, cover;
  }

  .container_radio.version_2{font-size: 15px;}
  .form-control {
    font-size: 15px;
}



}