@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Homemade+Apple|Open+Sans:300i,400,400i,700,800');

body {  margin: 0;  padding: 0; font-family: futura-pt, sans-serif; background-color: #dfecff;}
.rw {
  margin: 0 auto;
  height: 280px;
  max-width:800px;
  position: relative;
  display:block;
  overflow: hidden;
}
.wrapper {
  margin: 0 auto;
  max-width:800px;
  position: absolute;
  display:block;
  left: -50px;
}
.wrapper2 {
  margin: 80px auto 0 auto;
  max-width:800px;
  position: absolute;
  display:block;
}

.wrapper svg {
-webkit-animation: rotate 10s linear infinite;
animation: rotate 10s linear infinite;
width: 900px;
height: 900px;
}
.wrapper2 svg {
-webkit-animation: rotate2 10s linear infinite;
animation: rotate2 10s linear infinite;
width: 800px;
height: 800px;
}
.wrapper svg .circle-text {
  font-size: 50px;
  width: 100%;
  fill: #e20e7c;
  font-weight:bold;
}
.wrapper2 svg .circle-text2 {
  font-size: 50px;
  width: 100%;
  fill: #e20e7c;
  font-weight:bold;
}
path {
  fill: transparent;
}
.element {}
.layout{	

width: 100%;

top: 0;
}
svg{	width: 100%;height: 100%;}
#night-content{	opacity: 1;}
.inner-shadow{	fill: none;}

.circle {
	padding: 10px;
  border-radius: 200px;
  display: inline-block;
  height: 200px;
  width: 200px; 
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.circles {  transform: rotate(-40deg);}
.circles2 { transform: rotate(-25deg);}
ul li .date{line-height: 1; margin: 10px auto 0 auto; z-index: 999; position: absolute; left:0; right:0; color:#fff; font-weight:bold;}
ul li .date a.day{font-size:80px;  display:block; }
.circle use {  fill: none;}
.circle text {  fill: white; font-size:8px; font-family: futura-pt, sans-serif; font-weight:bold; }
ul {padding:0; margin:0; display:inline-block;}
ul li.icn{list-style:none; width:33%; float: left; }
ul li.rel{list-style:none;  float: left; margin: 0 10px;position: relative;}
ul li.icn img{ width:100%; }

.center{text-align:center;}
h1{ letter-spacing: 3px;margin:0; background:#fdefed; color:#e20e7c; padding: 0; font-size:90px; font-weight:bolder; line-height:1.2;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: e20e7c;
}
.ln{padding: 10px 0; border-bottom: 8px solid #f27796; width:80%;   margin: 10px auto 40px auto; position:relative;}
h3 a{ padding: 10px 30px; background:#fffc00; text-decoration:uppercase; z-index: 9999; position:relative; font-size: 40px;}
h3{ padding-top: 20px; letter-spacing: 2px; margin: 0; text-decoration:uppercase; z-index: 9999; position:relative; font-weight:800;}
h2{ font-weight:bold; text-decoration:uppercase; z-index: 9999; position:relative; font-size: 45px; margin: 10px 0; letter-spacing:3px;}

#aries h2 {color:#ed4933}
#taurus h2 {color:#f4a2b5}
#gemini h2 {color:#ffc234}
#cancer h2 {color:#708395}
#leo h2 {color:#f79134}
#virgo h2 {color:#006f4a}
#libra h2 {color:#f9bdb7}
#scorpio h2 {color:#850e14}
#sagittarius h2 {color:#6b3572}
#capricorn h2 {color:#534236}
#aquarius h2 {color:#00a69a}
#pisces h2 {color:#8fc24b}

.side-nav{z-index: 9999; position:relative;}
.sub-headline{ font-size:18px;}
.content{width: 100%; margin: 0 auto; }
button{text-decoration:uppercase; background:none; float:right; font-weight:bold; border:0; color:#888;  }
button a{ text-decoration:none; font-size:15px !important; color:#000 !important; padding: 0;}
.black {  background-color:#000; z-index: 999;position: relative;}
.black  a{ color:#fff;}
.ab2 {  
text-align: center;
position: relative;
float:right;
width:30%;
padding: 0 5%;
z-index:9999;
right:0;
background: #fff;
}
.ab3 {  
text-align: center;
position: relative;
float:left;
width:60%;
z-index:9999;
right:0;
background: #fff;
}
.ab {  
text-align:left;
position: absolute;
width:350px;
z-index:9999;
color:#fff;
padding-left:20px;
}
.hab2 {  
display:inline-block !important;
position: relative;
background:#fff;

}
.ab  a{  
color:#fff !important;
}
.white{background:#fdefed; position:relative}
.gray { background-color:#fff;  position: relative; }
.ft {  
background-color:#000; 
z-index: 999;
color: #fff; 
font-size:16px;
position: relative;
text-align:left;
padding-left: 30px;
display:block;
max-width: 850px;
margin: -15px auto 0 auto !important;
}
.section3 {position:relative;}

span{  }
.section2 > div > p:nth-child(odd)::first-letter {
  font-weight: normal;
  float: left;
  font-size: 6em;
  line-height: .75;
  letter-spacing: .15em;
  margin-top: .2em;
  color:#ff4285;
}
.section1 { text-align: center;}
.head{ position:relative; text-align: center;  max-width:880px; margin:0 auto;  display:block; }
.head img{ width:100%; display:block; }
section {max-width:800px; margin:0 auto; padding: 30px 40px; }
.banner p{ }

.section2 {
  padding: 20px auto; 
  display:block;
  font-size: 25px;
  letter-spacing: 1px;
  margin-bottom: -500px;
}
.section2 h1 { text-align: center;}
.headline { font-size: 50px; line-height:auto; }
.ta {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
  opacity: 0;
  transition: all .2s ease-in;
}

.ti {

  text-align: center;
  margin: 0 auto;
  opacity: 0;
  transition: all .2s ease-in;
}

.hand, .women, .vote, .stop {max-width: 800px; margin: 0 auto;}
.parallaxParent { height: 300px; }
.parallaxParent > * {
  height: 120%;
  position: relative;
  top: -50%;
}
.parallaxParent2 {
  height: 300px;
  }
.parallaxParent2 > * {
  height: 120%;
  position: relative;
  top: -50%;
}
.parallaxParent3 {
  height: 300px;
  }
.parallaxParent3 > * {
  height: 120%;
  position: relative;
  top: -50%;
}




.line{  height:10px; width:500px; margin: 0 auto; overflow:hidden; }
.lines{  background-image: url("../img/line.svg");  background-repeat: repeat-x; background-position: center top; margin: 0 -15px; background-size:100%;}
.lq	{z-index:999; position:relative;}
.banner__heading {
  text-align: center;
  font-size: 3rem;
  letter-spacing: 10px;
}
.form_select{display:block; max-width:680px; clear:both; margin:0 auto;}
.form_select_produk {display:block; width:100%; clear:both;}

.radioholder { cursor: pointer; display:inline-block; padding: 20px; background-color: #f3c5b0; border-radius:5px;}
.radioholder a.plh{ margin: 5px; margin-left: 60px; display:inline-block; text-align: left;}

.activeradioholder {color: #000; background-image: url('http://supereightstudio.com/img/radio_tick.png'); }

.radioholder .tick {	
	background-size: 100%;
	position:absolute;
    height:40px; width:40px;
	background-image: url('../img/x.svg');
	background-repeat: no-repeat; background-position: center center;
	}

.radioholder .desc { clear:both; text-align: left; display:block;  line-height: 100%; padding-right: 10px; }
.activeradioholder .tick {
	background-image: url('../img/check.svg');
	background-repeat: no-repeat; background-position: center center;
	background-size: 100%;
	position:absolute;
}
.radioholder:hover {}
.radioholder:hover .tick {  background-image: url('../img/check.svg'); background-repeat: no-repeat; background-position: center center; }
.activeradioholder:hover {}
.activeradioholder:hover .tick {}
.footer{color:#fff;text-align:center; position:relative; max-width:880px; width: 100%; margin:0 auto; background:#000; display:inline-block;}
.footer a{color:#333; text-decoration:none; font-weight:bold;}
.banner p { margin: 0; font-size:23px; line-height: 1.4; display:block; padding-bottom:20px;}
.banner { position:relative;}
.banner a { display:block;}
ul li .date img{ margin-top: 10px; opacity: 0.5;  filter: alpha(opacity=50); }

@media screen and (max-width: 600px){
	
	
	.circle {
  padding: 1px;
  border-radius: 100px;
  display: inline-block;
  height: 100px;
  width: 100px; 
  text-align:center;
  color:#fff;
  overflow:hidden;
}

ul li .date{ line-height: 1; margin: 5px auto 0 auto; z-index: 999; position: absolute; left:0; right:0; color:#fff; font-weight:bold;}
ul li .date a.day{font-size:40px;   }
.circle use {  fill: none;}
ul li .date img{width:20px; margin-top: 2px;}
ul li.rel{list-style:none; float: left; margin: 0 5px;position: relative;}
ul li.rel{list-style:none;  float: left; margin: 0 5px;position: relative;}
	
.line{  width:100%;}
.banner .ti img{ width:100%; }
.rw {
  margin: 0 auto;
  height: 150px;
  max-width:300px;
  position: relative;
  display:block;
  overflow: hidden;
  font-weight:800;letter-spacing: 3px;
}

.wrapper {
  margin: 0 auto;
  max-width:100%;
  position: absolute;
  display:block;
  left: -100px;
    
  font-weight:800;letter-spacing: 3px;
}
.wrapper2 {
  margin: 40px auto 0 auto;
  max-width:100%;
  position: absolute;
  display:block;
  left: -80px;
}
.wrapper svg {
-webkit-animation: rotate 10s linear infinite;
animation: rotate 10s linear infinite;
width: 500px;
height: 500px;
}
.wrapper2 svg {
-webkit-animation: rotate2 10s linear infinite;
animation: rotate2 10s linear infinite;
width: 460px;
height: 460px;
}
.wrapper svg .circle-text {
  font-size: 45px;
  width: 100%;
  fill: #e20e7c;
  font-weight:800 !important;letter-spacing: 3px !important;
}
.wrapper2 svg .circle-text2 {
  font-size: 45px;
  width: 100%;
  fill: #e20e7c;
  font-weight:800;letter-spacing: 3px;
}
	
h1{ padding: 20px; font-size:40px; font-weight:bold; line-height:1.2;}
h3{ font-size: 20px; }
h2{ font-size: 30px;}
button{font-size:15px;}
button a{ font-size:15px !important; padding: 0 !important; }
section {padding: 20px 10px;}
.content{width: 100%; margin: 20px auto;  padding: 0px; margin: 0 auto;}
.section1, .banner { padding: 0;}
.section2 { letter-spacing: 0.5px; padding: 0 10px; }
p{font-size: 18px;}
.banner p { padding: 15px 0; font-size:20px; line-height: 1.5;}
.banner a { margin: 0; font-size:15px;}
.head img{ width:100%;}
.footer .element3{max-width: 280px; margin: 0 auto;}
.footer .element3 img{width:75%;}
.footer img{width:100%;}
.radioholder .tick {
    background-size: 100%;
    height: 40px;
    width: 40px;
}
span { font-size: 20px; } .radioholder { margin: 5px; }
.s-1-inner{
  width: 100%;
  margin: 20px auto 0 auto;  
  padding-top: 50px;
}

.section2 {
  padding: 20px auto; 
  display:block;
  font-size: 25px;
  letter-spacing: 1px;
  margin-bottom: -50px;
}

.s-1-inner a {
  padding: 10px 8px;
}
.s-2-inner a {
  padding: 10px 8px;
}
.s-3-inner a {
  padding: 10px 8px;
}}