@charset "UTF-8";
.radio_button_warna,.checkbox {
  position: relative;
  margin: 11px 5px;
}
.checkbox {display:block;}
.radio_button_warna input,.checkbox input {
  position: absolute;
  margin: 5px;
  padding: 0;
  visibility: hidden;
}
.radio_button_warna .label-visible,.checkbox .label-visible {
  margin-left: 2em;
  margin-bottom: 0;
}

.warna_check_span,.box_check_warna{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 31px;
  height: 31px;
  box-shadow: 0 0px 20px 3px rgba(152, 211, 220, 0.19);
  border: 3px #FFF solid;
}
.50_persen{border-radius:50%!important}
.warna_check_span:after,.box_check_warna:after {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.59);
  transform: translateX(-50%) translateY(-50%);
}
.warna_check_span {border-radius:50%;}
.warna_check_span:after {border-radius:50%;}
input[type="radio"]:checked + span .warna_check_span:after,
input[type="checkbox"]:checked + span .box_check_warna:after {display: block;}

.span_pretty_color{
	display: table-cell;
    vertical-align: middle;
    text-align: center;
	padding:50px  15px;
	font-size: 25px;
	font-size: 2.0vw;
	word-wrap: normal;
	word-break: break-all;
}
.span_pretty_color a{
	color:#FFF!important;
	text-decoration:none;
}
.span_pretty_color a:hover{
	color:rgba(255, 255, 255, 0.74)!important;
}
.icon_color_pretty {display: inline-block;width:33px;height:33px;cursor:pointer;}

.icon_bg_color {
    color: #FFF;
    background: #f53ba1;
}
.normaly_bg_color{
	height:75px
}
.bg_color_pretty {
	font-size: 27px;
    font-weight: 600;
    padding: 99px 22px;
    text-align: center;
    color: #FFF!important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 300px!important;
    padding-top: 99px!important;
}
.bg_font_color {
	font-size: 37px;
    font-weight: 600;
    padding: 99px 22px;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 300px!important;
    padding-top: 99px!important;
}
.bg_images_color {
    font-size: 37px;
    font-weight: 600;
    padding: 99px 22px;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 300px!important;
    padding-top: 99px!important;
	color:#FFF!important;
}
.margin17{
	margin: 17px;
}
.icon_users_pro{
	background: #ffffff;
    height: 29px;
    width: 29px;
    padding: 5px;
    font-size: 19px;
    box-shadow: 0 0px 20px 3px rgba(30, 33, 76, 0.08);
    border-radius: 50%;
    position: absolute;
    margin-top: -17px;
}
#warna_form_id {
    display: none;
	padding: 10px;
}
.span_pretty_fonts{
	display: table-cell;
    vertical-align: middle;
    text-align: center;
	padding:50px  15px;
	font-size: 25px;
	font-size: 2.5vw;
	word-wrap: normal;
	word-break: break-all;
}
.span_pretty_fonts a{
	text-decoration:none;
}
.span_pretty_fonts a:hover{
	color:rgba(255, 255, 255, 0.74)!important;
}
.span_pretty_images{
	display: block;
    vertical-align: middle;
    text-align: center;
	padding:101px  15px;
	font-size: 25px;
	font-size: 2.0vw;
	color:#FFF!important;
}
.span_pretty_images a{
	text-decoration:none;
}
.span_pretty_images a:hover{
	color:rgba(255, 255, 255, 0.74)!important;
}
@media (max-width:700px) {
.span_pretty_color{
	font-size: calc(100% + -2.5vw);
}
.span_pretty_fonts{
	font-size: calc(100% + 0.5vw);
}
.span_pretty_images{
	font-size: calc(100% + 0.5vw);
}
}
@media (max-width:500px) {
.span_pretty_color{
	padding:15px;
}
.span_pretty_fonts{
	padding:15px;
}
.span_pretty_images{
	padding:33px 15px;
}
}