@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: 'Didact Gothic', sans-serif; background-color: #888;}
svg { margin-top: -150px; width: 100%; height: 100%; }

.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;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(-65deg);
    transform: rotate(-65deg);
  }
    50% {
    -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
  }
    100% {
    -webkit-transform: rotate(-65deg);
    transform: rotate(-65deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(-65deg);
    transform: rotate(-65deg);
  }
    50% {
    -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
  }
    100% {
    -webkit-transform: rotate(-65deg);
    transform: rotate(-65deg);
  }
}
@-webkit-keyframes rotate2 {
  0% {
    -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
  }
    50% {
    -webkit-transform: rotate(-65deg);
     transform: rotate(-65deg);
  }
    100% {
    -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
  }
}

@keyframes rotate2 {
  0% {
    -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
  }
    50% {
    -webkit-transform: rotate(-65deg);
     transform: rotate(-65deg);
  }
    100% {
    -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
  }
}

@-webkit-keyframes rotate3 {
  to {
    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
  }
}

@keyframes rotate3 {
  to {
    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
  }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes anim {
  0%   {background-image: url("../img/eyelash.svg");}
  100% {background-image: url("../img/eyelasha.svg");}
}

/* Standard syntax */
@keyframes anim {
  0%   {background-image: url("../img/eyelash.svg");}
  100% {background-image: url("../img/eyelasha.svg");}
}



path {
  fill: transparent;
}
.element {
  width: 200px;
  height: 60px;
  position:relative;
  margin:0 auto;

  -webkit-animation: flash 900ms infinite;
   animation: flash 900ms infinite;
   
   background-image: url("../img/eyelash.svg");
   background-size:100%;
   background-repeat:no-repeat;
   right: 0;
   top: 0;
   
}
.element2 {
  width: 200px;
  height: 60px;
  position:relative;
  margin:0 auto;
  
  -webkit-animation: flash 900ms infinite;
   animation: flash 900ms infinite;
   
   background-image: url("../img/eyelash2.svg");
   background-size:100%;
   background-repeat:no-repeat;
   right: 0;
   top: 0;
}
.element3  h3{
	color:#e20e7c !important;
font-size: 40px;
}
.element3 {
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-animation-name: swing;
  animation-name: swing;
  animation: swing 5000ms infinite;
  z-index:999;
}
.element4 {
  width: 80px;
  height: 70px;
  position:relative;
  margin:0 auto;
  -webkit-animation: heartBeat 0ms infinite;
   animation: heartBeat 0ms infinite;
   background-image: url("../img/heart.svg");
   background-size:100%;
   background-repeat:no-repeat;
   right: 0;
   top: 0;
}
.element5 {
  width: 30px;
  height: 70px;
  position:relative;
  margin: 20px auto;
  -webkit-animation: flash 0ms infinite;
   animation: flash 0ms infinite;
   background-image: url("../img/flash.svg");
   background-size:100%;
   background-repeat:no-repeat;
   right: 0;
   top: 0;
}
.element6 {
  width: 70px;
  height: 70px;
  position:relative;
  margin:0 auto;
  -webkit-animation: flash 0ms infinite;
   animation: flash 0ms infinite;
   background-image: url("../img/close.svg");
   background-size:100%;
   background-repeat:no-repeat;
   right: 0;
   top: 0;
}
.element7 {

  position:relative;
  margin:0 auto;
   background-image: url("../img/star.svg");
   background-size:100%;
   background-repeat:no-repeat;
  -webkit-animation: rotate3 0s linear infinite;
          animation: rotate3 0s linear infinite;
		  margin-top:10px;
}
.element8 {
  width: 70px;
  height: 70px;
  position:relative;
  margin:0 auto;
   background-image: url("../img/flow.svg");
   background-size:100%;
   background-repeat:no-repeat;
  -webkit-animation: rotate3 0s linear infinite;
          animation: rotate3 0s linear infinite;
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
.hand {
  margin-top: auto;
  margin-bottom: auto;
  z-index:1;
  top: -20px;
  margin-top:300px;
  position:absolute;
  width:400px;
}
.coin {
  top: 30px;
  width:30px;
  margin-top: auto;
  margin-bottom: auto;
  border-radius:100%;
  position:absolute;
  margin-left:100px;
    -webkit-animation: slideInDown 500ms infinite;
   animation: slideInDown 1000ms infinite;
}

dd {
  display: flex;
  flex-direction: column;
	position: relative;
  width: 100%;
	max-width: 18rem;
  margin: auto;
  text-align: center;
  height:300px;
}
blockquote 
{
  line-height:40px;
  display: block;
  position: relative;
  padding: 30px;
  font-size: 30px;
  color:#333;
  max-width: 800px; margin: 40px auto 60px auto;
  background:#ffc3c3;
  border-radius:15px;
  border: 3px solid #eaa0a0;
  margin-top: 0;
}

h1{ letter-spacing: 2px;margin:0; background:#ffe9e7; color:#e20e7c; padding: 40px; font-size:60px; font-weight:bolder; line-height:1.2;
   -webkit-text-stroke-width: 1px;
   -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{ color:#e20e7c; letter-spacing: 3px; text-decoration:uppercase; z-index: 9999; position:relative; font-size: 35px;
font-family: 'Nunito Sans', sans-serif;
font-weight:800;
}
h2{ font-weight:normal; text-decoration:uppercase; z-index: 9999; position:relative; font-size: 35px; margin: 10px 0;}
.side-nav{z-index: 9999; position:relative;}
.sub-headline{ font-size:18px;}
.content{width: 100%; line-height: 40px; margin: 0 auto; text-align:center;}
button{text-decoration:uppercase;  font-size:25px; font-weight:bold; background:#fff; border:0; color:#e20e7c; margin: 30px auto; padding: 10px 20px; border-radius:10px; border: 2px solid #e20e7c; font-family: 'Nunito Sans', sans-serif; 
  -webkit-animation: pulse 900ms infinite;
   animation: pulse 900ms infinite;
}
button a{ text-decoration:none; font-size:25px !important; color:#e20e7c !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:#ffe9e7;}
.gray {  
background-color:#777; 
z-index: 999;
position: relative;
}
.gray2 {  
background-color:#000; 
z-index: 999;
color: #fff; 
font-size:16px;
position: relative;
text-align:left;
padding-left: 30px;
}
.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:  0 auto !important;
}
.section3 {position:relative;}
.s-1-inner{
  max-width:500px;
  width: 100%;
  margin: 500px auto 0 auto;  
  padding-top: 50px;
}
.s-1{padding: 30px 0 0 0;}
.s-2-inner, .s-3-inner, .s-4-inner{
  max-width:500px;
  width: 100%;
  margin: 0 auto;  
}
.s-1-inner a {
  padding: 10px 20px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  line-height: 40px;
}
.s-2-inner a {
  padding: 10px 20px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  line-height: 40px;
}
.s-3-inner a {
  padding: 10px 20px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  line-height: 40px;
}
.s-4-inner a {
  padding: 10px 20px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  line-height: 40px;
}
.ul2{font-size:20px; color:#f27796; list-style-image: url(../img/b2.svg); list-style-image-size: 10px;}
span{ color:#ff4285; font-size: 30px; text-align:left; line-height:60px;  display: block; }
.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: 20px 40px; font-family: 'Didact Gothic', sans-serif;}
.banner p{margin: 0; }
.section1__content {}
.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 {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
  opacity: 0;
  transition: all .2s ease-in;
}
p f{font-size:40px; color: #f27796; font-weight:normal;}
p fa{font-size:40px; color: #f27796; font-weight:bold;}
p fb{font-size:60px; color: #f27796; font-weight:bold;}

.center{text-align:center;}

.hand { background-image: url("../img/bg-1.jpg"); background-repeat: no-repeat; background-position: center center; background-size: 60%; height: 500px; display:block;}
.women { background-image: url("../img/bg.jpg"); background-repeat: no-repeat; background-position: center center;  height: 500px; display:block;}
.vote { background-image: url("../img/bg-3.jpg"); background-repeat: no-repeat; background-position: center center;  height: 650px; display:block;}
.stop { background-image: url("../img/bg-4.jpg"); background-repeat: no-repeat; background-position: center center;  height: 500px; display:block;}

.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%;
}
.bg1 { background-image: url("../img/1.jpg"); background-repeat: no-repeat; background-position: center center; z-index:-1; }
.bg2 { background-image: url("../img/2.jpg"); background-repeat: no-repeat; background-position: center center; z-index:-1;}
.bg3 { background-image: url("../img/3.jpg"); background-repeat: no-repeat; background-position: center center; z-index:-1;}

.line img{  width:80%;}
.line{  z-index:999; margin: 0 auto; position:relative; margin-top: -135px;}
.lines{  background-image: url("../img/lineqt.svg");  background-repeat: repeat-y; background-position: center bottom; background-size:100%;}
.lq	{height:6px; width:800px; margin: 0 auto; overflow:hidden; 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 a { margin: 0; line-height: 1.2; display:block; }
.banner { position:relative;}

@media screen and (max-width: 600px){
	svg { margin-top: -100px; }
.rw {
  margin: 0 auto;
  height: 150px;
  max-width:300px;
  position: relative;
  display:block;
  overflow: hidden;
    font-family: 'Nunito Sans', sans-serif;
  font-weight:800;letter-spacing: 3px;
}

.wrapper {
  margin: 0 auto;
  max-width:100%;
  position: absolute;
  display:block;
  left: -100px;
    font-family: 'Nunito Sans', sans-serif;
  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-family: 'Nunito Sans', sans-serif !important;
  font-weight:800 !important;letter-spacing: 3px !important;
}
.wrapper2 svg .circle-text2 {
  font-size: 45px;
  width: 100%;
  fill: #e20e7c;

  font-family: 'Nunito Sans', sans-serif;
  font-weight:800;letter-spacing: 3px;
}
	
h1{ padding: 20px; font-size:25px; font-weight:bold; line-height:1.2;}
.ab {width:200px;}
.ab2 {  
text-align: center;
position: relative;
float:right;
width:100%;
padding: 0 0;
z-index:9999;
color:#000 !important;
right:0;
background: #ffe9e7;
}

.ab3 {  
text-align: center;
position: relative;
float:left;
width:100%;
z-index:9999;
right:0;
background: #fff;
}

	
button{font-size:15px;}h2{ font-size: 25px;}h3{ font-size: 22px;}
button a{ font-size:15px !important; padding: 0 !important; }

section {padding: 20px 10px;}
.content{width: 100%; margin: 20px auto;  padding: 0px; line-height: 30px; margin: 0 auto;}
.section1, .banner { padding: 0;}
.section2 { letter-spacing: 0.5px; padding: 0 10px; }
p{font-size: 18px;}
.banner p { padding: 15px 10px; font-size:12px; line-height: 1.5;}
.banner a { margin: 0; font-size:18px; line-height: 1.2; display:block;}
.head img{ width:100%;}
.women { background-size: 90%;}
.vote {background-size: 90%;}
.stop { background-size: 90%;}
.footer .element3{max-width: 280px; margin: 0 auto;}
.footer .element3 img{width:75%;}
.footer img{width:100%;}
blockquote {
    line-height: 40px;
    padding: 20px auto;
	margin: 20px auto;
    font-size: 30px;
    margin: 30px auto 50px auto;
}
.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;
}}