.textshadow{
	text-shadow: 2px 2px 4px #000000;
}
body {
	font-family: "Open Sans";
	font-weight: 300;
}


.flip-card {
border-radius:25px ;
perspective: 1000px;
cursor: pointer;
margin-bottom: 15px;

}

.flip-card-inner {
position: relative;
width: 250px;
height: 250px;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-radius:25px ;
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 250px;
height: 250px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius:25px ;
}

.flip-card-front {
padding: 15px;
background-color: #03a9f4;
border-radius:25px ;
text-align: center;

color: black;
}

.flip-card-back {
background-color: #E74C3C;
padding: 15px;
border-radius:25px ;
text-align: center;
color: white;
transform: rotateY(180deg);
}
.bbiru{
background-color: #03a9f4;
}
.bhijaumuda{
background-color: #4caf50;
}
.bhijautua{
background-color: #009688;
}
.bmerah{
background-color: #f44336;
}
.borange{
background-color: #ff6736;
}
.social-icons ul{margin-top:2rem;width:100%;text-align:center}
.social-icons ul>li{margin-left:1rem;margin-right:1rem;display:inline-block}
.social-icons ul>li>a{display:block;color:#fff;background-color:#009688;
border-radius:100%;font-size:2rem;line-height:4rem;height:4rem;width:4rem}
.social-icons ul>li>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(1)>a:hover{background-color:red}
.social-icons ul>li:nth-child(2)>a:hover{background-color:#03a9f4}
.social-icons ul>li:nth-child(3)>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(4)>a:hover{background-color:#f44336}
@media (min-width:768px)
{
.social-icons{margin:0;position:absolute;right:2.5rem;bottom:2rem;width:auto;}
.social-icons ul{margin-top:0;width:auto}
.social-icons ul>li{display:block;margin-left:0;margin-right:0;margin-bottom:2rem}
.social-icons ul>li:last-child{margin-bottom:0}
.social-icons ul>li>a{transition:all .2s ease-in-out;font-size:2rem;line-height:4rem;height:4rem;width:4rem}
.social-icons ul>li>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(1)>a:hover{background-color:red}
.social-icons ul>li:nth-child(2)>a:hover{background-color:#03a9f4}
.social-icons ul>li:nth-child(3)>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(4)>a:hover{background-color:#f44336}
}
/*support google chrome*/
.contoh1::-webkit-input-placeholder{
color: #ad3335;
}

/*support mozilla*/
.contoh1:-moz-input-placeholder{
color: #ad3335;
}

/*support internet explorer*/
.contoh1:-ms-input-placeholder{
color: #ad3335;
}
.pencarian{
border-left: none;border-right: #ad3335 solid;border-top: #ad3335 solid;border-bottom: #ad3335 solid;font-size: 20px;font-weight: 800;color: #ad3335;width:240px;height:35px;
}
textarea:focus, input:focus{
outline: none;
}

@media only screen and (max-width: 600px) {
.pencarian {
width: 100%;
}
}


body {
	font-family: "Open Sans";
	font-weight: 300;
}


.flip-card {
/*background-color: transparent;*/
border-radius:25px ;
perspective: 1000px;
cursor: pointer;
margin-bottom: 15px;

}

.flip-card-inner {
position: relative;
width: 250px;
height: 250px;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-radius:25px ;
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 250px;
height: 250px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius:25px ;
}

.flip-card-front {
padding: 15px;
background-color: #03a9f4;
border-radius:25px ;
text-align: center;

color: black;
}

.flip-card-back {
background-color: #E74C3C;
padding: 15px;
border-radius:25px ;
text-align: center;
color: white;
transform: rotateY(180deg);
}
.bbiru{
background-color: #03a9f4;
}
.bhijaumuda{
background-color: #4caf50;
}
.bhijautua{
background-color: #009688;
}
.bmerah{
background-color: #f44336;
}
.borange{
background-color: #ff6736;
}
/* #03a9f4 change to black */
.social-icons ul{margin-top:2rem;width:100%;text-align:center}
.social-icons ul>li{margin-left:1rem;margin-right:1rem;display:inline-block}
.social-icons ul>li>a{display:block;color:#fff;background-color:#009688;
border-radius:100%;font-size:3rem;line-height:6rem;height:6rem;width:6rem}
.social-icons ul>li>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(1)>a:hover{background-color:red}
.social-icons ul>li:nth-child(2)>a:hover{background-color:black}
.social-icons ul>li:nth-child(3)>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(4)>a:hover{background-color:#f44336}
@media (min-width:768px)
{
.social-icons{margin:0;position:absolute;right:2.5rem;bottom:2rem;width:auto;}
.social-icons ul{margin-top:0;width:auto}
.social-icons ul>li{display:block;margin-left:0;margin-right:0;margin-bottom:2rem}
.social-icons ul>li:last-child{margin-bottom:0}
.social-icons ul>li>a{transition:all .2s ease-in-out;font-size:3rem;line-height:6rem;height:6rem;width:6rem}
.social-icons ul>li>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(1)>a:hover{background-color:red}
.social-icons ul>li:nth-child(2)>a:hover{background-color:black}
.social-icons ul>li:nth-child(3)>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(4)>a:hover{background-color:#f44336}
}
@media (min-width:1920px)
{
.social-icons{margin:0;position:absolute;right:2.5rem;bottom:auto;width:auto;}
.social-icons ul{margin-top:0;width:auto}
.social-icons ul>li{display:block;margin-left:0;margin-right:0;margin-bottom:2rem}
.social-icons ul>li:last-child{margin-bottom:0}
.social-icons ul>li>a{transition:all .2s ease-in-out;font-size:3rem;line-height:6rem;height:6rem;width:6rem}
.social-icons ul>li>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(1)>a:hover{background-color:red}
.social-icons ul>li:nth-child(2)>a:hover{background-color:black}
.social-icons ul>li:nth-child(3)>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(4)>a:hover{background-color:#f44336}
}
@media (min-width:1920px)
{
footer{bottom:0;position:absolute;width:100%;}
}
@media (min-width:1600px)
{
.social-icons{position: absolute;left: 95%;top: 50%;transform: translate(-50%, -50%);padding: 10px;}
.social-icons ul{margin-top:0;width:auto}
.social-icons ul>li{display:block;margin-left:0;margin-right:0;margin-bottom:2rem}
.social-icons ul>li:last-child{margin-bottom:0}
.social-icons ul>li>a{transition:all .2s ease-in-out;font-size:3rem;line-height:6rem;height:6rem;width:6rem}
.social-icons ul>li>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(1)>a:hover{background-color:red}
.social-icons ul>li:nth-child(2)>a:hover{background-color:black}
.social-icons ul>li:nth-child(3)>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(4)>a:hover{background-color:#f44336}
footer{bottom:0;position:absolute;width:100%;}
}
@media (min-width:1440px)
{
.social-icons{position: absolute;left: 95%;top: 50%;transform: translate(-50%, -50%);padding: 10px;}
.social-icons ul{margin-top:0;width:auto}
.social-icons ul>li{display:block;margin-left:0;margin-right:0;margin-bottom:2rem}
.social-icons ul>li:last-child{margin-bottom:0}
.social-icons ul>li>a{transition:all .2s ease-in-out;font-size:3rem;line-height:6rem;height:6rem;width:6rem}
.social-icons ul>li>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(1)>a:hover{background-color:red}
.social-icons ul>li:nth-child(2)>a:hover{background-color:black}
.social-icons ul>li:nth-child(3)>a:hover{background-color:#002e66}
.social-icons ul>li:nth-child(4)>a:hover{background-color:#f44336}
footer{bottom:0;position:absolute;width:100%;}
}


.logodepan{
	padding-right: 20px;border-right: #ad3335 solid 6px;height:auto;width: 222px;display: inline-block;margin-right: 10px;margin-top: 10px;
}
.tddepan{
	width: 250px;white-space:normal;
}
.titlelogodepan{
	vertical-align: top;font-family:fantasy; font-size:25px;font-weight:bold;color:#b22222;
}
.fbold25{
	font-family:fantasy;font-size:25px;font-weight:bold;color:#b22222;
}
.spanpencarian{
	background-color: #ad3335;color: white;border: #ad3335 solid;font-weight: 800;font-size:30px;/* text-shadow: 2px 2px 4px grey; */
}
.fs30{
	font-size:30px;
}
.inputpencariandepan{
	border-left: #ad3335 solid;border-right: #ad3335 solid;border-top: #ad3335 solid;border-bottom: #ad3335 solid;width: 500px;font-size: 30px;font-weight: 800;color: #ad3335;height:50px;/* border: #ad3335 solid; */
}
.wh200{
	width:200px;height:200px;
}
.judulkotak{
	font-size:20px;font-weight:bold;color:white;text-shadow:2px 2px 4px black;
}
.input-group2{
	position: relative;
    display: table;
    border-collapse: separate;
}
.input-group-addon2{
	padding: 3px 12px; 
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: white;
    text-align: center;
    background-color: #ad3335;
    border: 1px solid #ad3335;
    /* border-radius: 4px; */
}
.input-group3{
	position: relative;
    display: table;
    border-collapse: separate;
}
.input-group-addon3{
	padding: 3px 12px; 
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: white;
    text-align: center;
    background-color: #ad3335;
    border: 1px solid #ad3335;
    /* border-radius: 4px; */
}
.ta{
	text-align: center;
}
.sticky-search{
	margin-top:14px;float:right;
}
.cblack{
	color:black;
}
.cred{
	color:#d6261d;
}
.corange{
	color:#fb7809;
}
.cblue{
	color:#0455ec;
}
.ptcblack{
	padding-top:9px;color:black;
}
.fw{
	color: #d7261e;font-weight: 800;
}
.text-red{
	color: #d7261e;
}
.text-blue{
	color:blue;
}
.text-white{
	color:white;
}
.text-black{
	color:black;
}
.text-green{
	color:green;
}
.text-yellow{
	color:yellow;
}
.ml10{
	margin-left:10px;
}
.mt10{
	margin-top:10px;
}
.ml20{
	margin-left:20px;
}
.bg-a61c00{
	background-color:#a61c00;
}
.bg-009688{
	background-color:#009688;
}
.bg-8bc34a{
	background-color:#8bc34a;
}
.bg-cddc39{
	background-color:#cddc39;
}
.bg-ffeb3b{
	background-color:#ffeb3b;
}
.bg-ffc107{
	background-color:#ffc107;
}
.bg-ff9800{
	background-color:#ff9800;
}
.bg-87CEEB{
	background-color:#87CEEB;
}
.bg-795548{
	background-color:#795548;
}
.bg-9e9e9e{
	background-color:#9e9e9e;
}
.bg-607d8b{
	background-color:#607d8b;
}
.bg-f44336{
	background-color:#f44336;
}
.b-aliceblue-pd10{
	background:aliceblue;padding-top:10px;
}
.transform-none{
	text-transform:none;
}
.wr{
	line-height:30px; max-height:30px;
}
.pd9{
	padding:9px;
}
.glasses{
	box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12)!important;background-color: #fff;
    border-color: #fff;
    color: rgba(0,0,0,.87);padding:25px;border-radius:10px;
}
.gambar-background{
    background-image:url("https://izin.semarangkota.go.id/theme1/img/poly.png");opacity:1;
}
/* WIDTH */
.wd115{
	width:115px;
}
/* SHADOW */
.shadow{
	text-shadow: 2px 2px 4px #000000;
}
.smap{
	position: relative; z-index: 1000; outline-style: none;
}
.clickable:hover {
	/* Add hover effects here, like opacity change or cursor style */
	opacity: 0.8;
	cursor: pointer;
  }