body {position:relative;background:url(https://1.bp.blogspot.com/-4one5oJZLlY/XwGLVGd0FxI/AAAAAAAABIY/0IhDHp4djL8ek6ppzLTk_mUWVc-WStNZgCLcBGAsYHQ/s1600/banner.jpg);
background-size:cover;background-attachment:fixed;
background-repeat:no-repeat;background-position:100% 40%}
body:before {content: "";
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    background: rgba(0,0,0,.5) url(https://4.bp.blogspot.com/-wZNwLTaV3wQ/VzIz15J6IfI/AAAAAAAAGiA/RDN1dCemq-4xMxA8kSyn0sDvpVyMLIDqACLcB/s1600/pattern.png) repeat top left;}
#top-header {background:#000;}
.logo a {color:#fff;}
#blog-banner {background:transparent !important;}
#blog-banner .begi,.recent-wrap,.sjps {background:transparent !important;}
h2#title3:before {content:'The';font-size:20px;margin-right:5px;}
h2#title3:after {content:'(:Site /Red)';font-style:italic;font-size:40px;margin-left:5px;}
h3.gameskill {margin-left:20px;}
.post-body {font-family: 'brandon-grotesque', sans-serif;
    letter-spacing: 0.6px;line-height:1.8;font-size:21px;}
.post-body h3 {color:#777777;border-bottom:2px solid #777777;text-transform:uppercase;}
.post-body .list-media {background:none;}
.post-body ul {font-size:18px;}
.profile-plot {width:100%;position:relative;display:inline-block;margin:0 auto;padding:0;}
.p-col {width:50%;float:left;position:relative;}
.sembunyi {display:block !important;}
.firstcharacter {
  float: left;
  font-family: 'Teko', 'Oswald', sans-serif;
  font-size: 120px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}
blockquote {background:#1a1818;padding:25px;position:relative;border-radius:20px;border:2px solid #f2a900;font-size:20px;margin-bottom:10px;}
blockquote:before {content: "";
    position: absolute;
    width: 80px;
    border: 6px solid #1a1818;
    bottom: -3px;
    left: 50px;
    z-index: 2;}
blockquote:after {content: "";
    position: absolute;
    border: 2px solid #f2a900;
    border-radius: 0 50px 0 0;
    width: 60px;
    height: 60px;
    bottom: -60px;
    left: 50px;
    border-bottom: none;
    border-left: none;
    z-index: 3;}
span.bqc {margin-left:120px;position:relative;font-style:italic;}
.post-body ul li.mothah {font-size:24px;font-weight:700;list-style:none;font-family: 'Teko', 'Oswald', sans-serif;}
.post-body ul li.mothah:before {content:'';display:inline-block;width:10px;height:5px;border-radius:5px;background:#f2a900;margin:0 20px 5px 0;}
.post-body ul.childah {margin-left:50px;font-family: 'brandon-grotesque', sans-serif;font-size:16px;font-weight:300;list-style:none;}
.post-body ul.childah li {position:relative;}
.post-body ul.childah li:before {position:absolute;left:-20px;top:15px;content:'';display:inline-block;width:5px;height:2px;background:#f2a900;margin:-2px 20px 5px 0;}
.minion {font-size:16px;}
#plate{
  width: 50vmin;
  height: 50vmin;
  margin:25% auto 20px auto;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow:
    -2vmin 2vmin 5vmin 2vmin  rgba( #000, 0.2 ),
    inset 0 0 0 0.2vmin #cccccc,
    inset 0 0 0 0.5vmin #fafafa,
    inset 0 0 10vmin 0.1vmin  rgba( #000, 0.2 );
}

#handle{
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  transform: rotate(-43deg);
  top: 65%;
  border-radius: 1vmin;
  box-shadow:
    -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1),0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup{
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    -2vmin 2vmin 5vmin -2vmin  rgba( #000, 0.5 ),
    inset 0 0 0.5vmin 0.2vmin #cccccc,
    inset 0 0 0 1vmin #fafafa;
  z-index: 1;

}

#coffeBg{
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%,#231105 100%);
  overflow: hidden;
}
#cupInner{
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow:0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

#foamWrapper{
  filter:url("#goo") drop-shadow(0px 0px 3px #b37a3c);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}
.foam{
  background-color: #f8c99d;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  position: absolute;
  left: -3%;
  transform: rotate(21deg);
  top: 22%;
  filter:url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2{
  top: -7%;
  left: 14%;
  transform: rotate(53deg);
  width: 6%;
}
#foam3{
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}
#foam4{
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}
#foam5{
  top: -9%;
  left: 70%;
  transform: rotate(122deg);
  height: 30%;
}
#foam6{
  top: 8%;
  left: 98%;
  transform: rotate(152deg);
  height: 60%;
  width: 5%;
}
#foam7{
  top: 20%;
  left: 97%;
  transform: rotate(181deg);
  height: 60%;
  width: 5%;
}
#foam8{
  top: 51%;
  left: 96%;
  transform: rotate(211deg);
  height: 40%;
  width: 5%;
}
#foam9{
  top: 62%;
  left: 70%;
  transform: rotate(224deg);
  height: 80%;
  width: 5%;
}
#foam10{
  top: 72%;
  left: 62%;
  transform: rotate(74deg);
  height: 50%;
  width: 5%;
}
#foam11{
  top: 59%;
  left: 51%;
  transform: rotate(104deg);
  height: 80%;
  width: 4%;
}
#foam12{
  top: 44%;
  left: 9%;
  transform: rotate(124deg);
  height: 80%;
  width: 4%;
}
#foam13{
  top: 7%;
  left: -6%;
  transform: rotate(-26deg);
  height: 80%;
  width: 4%;
}

@keyframes foamMiddleAnimation {
  0% {
    transform: translate(0%,0%);
  }
  10%{
    transform: translate(0%,0%);
  }

  50%{
    transform: translate(45%,20%);
  }
  90%{
    transform: translate(45%,20%);
  }
  100%{
    transform: translate(45%,20%);
  }
}

#foamMiddleWrapper{
  animation-name: foamMiddleAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* deactivate animations for safari because it's the new IE */
  @media not all and (min-resolution:.001dpcm)
  { @supports (-webkit-appearance:none) {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
  }}
}

@keyframes foamMiddleContainerAnimation {
  0% {
    transform: rotate(0);
  }

  55%{
    transform: rotate(30deg);
  }
  90%{
    transform: rotate(30deg);
  }
  100%{
    opacity: 0;
  }
}
#foamMiddleContainer{
  animation-name: foamMiddleContainerAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
  @media not all and (min-resolution:.001dpcm)
  { @supports (-webkit-appearance:none) {
    animation-name: none;
    animation-duration: inherit;
    animation-timing-function: inherit;
    will-change: inherit;
  }}
}
.foamMiddle{
  background-color: #f8c99d;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  position: absolute;
  left: 40%;
  transform: rotate(21deg);
  top: 40%;
  filter: url(#scatter);
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foamMiddle2{
  transform: rotate(-49deg);
  width: 10%;
  left: 47%;
}

@keyframes bubbleMiddle1Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  35% {
    transform: scale(1) translate(60%, 40%);
  }
  45%{
    transform: scale(0) translate(60%, 40%);
  }
  100%{
    transform: scale(0) translate(60%, 40%);
  }
}

#bubbleMiddle1{
  left: 50%;
  top: 48%;
  width: 7%;
  height: 7%;
  animation-name: bubbleMiddle1Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
  @media not all and (min-resolution:.001dpcm)
  { @supports (-webkit-appearance:none) {
    animation-name: none;
    animation-duration: inherit;
    animation-timing-function: inherit;
    will-change: inherit;
  }}
}

@keyframes bubbleMiddle2Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  39% {
    transform: scale(1) translate(10%, 10%);
  }
  49%{
    transform: scale(0) translate(10%, 10%);
  }
  100%{
    transform: scale(0) translate(10%, 10%);
  }
}
#bubbleMiddle2{
  left: 44%;
  top: 40%;
  width: 6%;
  height: 7%;
  transform: rotate(50deg);
  animation-name: bubbleMiddle2Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
  @media not all and (min-resolution:.001dpcm)
  { @supports (-webkit-appearance:none) {
    animation-name: none;
    animation-duration: inherit;
    animation-timing-function: inherit;
    will-change: inherit;
  }}
}

@keyframes bubbleMiddle3Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  45% {
    transform: scale(1) translate(0%, 0%);
  }
  55%{
    transform: scale(0) translate(0%, 0%);
  }
  100%{
    transform: scale(0) translate(50%, -40%);
  }
}
#bubbleMiddle3{
  left: 41%;
  top: 49%;
  width: 7%;
  height: 8%;
  transform: rotate(36deg);
  animation-name: bubbleMiddle3Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
  @media not all and (min-resolution:.001dpcm)
  { @supports (-webkit-appearance:none) {
    animation-name: none;
    animation-duration: inherit;
    animation-timing-function: inherit;
  }}
}
#bubbleMiddle4{
  left: 51%;
  top: 45%;
  width: 2%;
  height: 2%;
  transform: rotate(36deg);
}

.bubble{
  width: 5%;
  height: 7%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 40%;
  left: 2%;
  box-shadow:
    0vmin 0vmin 0.1vmin -0vmin #35210d,
    inset 0 0 0.5vmin 0.2vmin #662e22;
  //transition: 5s all ease-in-out;

  &:after{
    display: block;
    content: '';
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    right: 23%;
    top: 12%;
    transform: rotate(-20deg);
    box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
  }
}

#bubble2{
  left: 5%;
  top: 30%;
  transform: rotate(25deg);
}

#bubble3{
  left: 8%;
  top: 23%;
  transform: rotate(39deg);
  width: 3%;
  height: 5%;
}

#bubble4{
  left: 94%;
  top: 43%;
  transform: rotate(-10deg);
  width: 5%;
  height: 7%;
}

#bubble5{
  left: 95%;
  top: 37%;
  transform: rotate(-17deg);
  width: 3%;
  height: 4%;
}

#bubble6{
  left: 39%;
  top: 0%;
  transform: rotate(76deg);
  width: 6%;
  height: 9%;
}

#bubble7{
  left: 60%;
  top: 1%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble8{
  left: 35%;
  top: 91%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble9{
  left: 4%;
  top: 63%;
  transform: rotate(-23deg);
  width: 5%;
  height: 7%;
}

#bubble10{
  left: 2%;
  top: 58%;
  transform: rotate(-18deg);
  width: 3%;
  height: 4%;
}

#bubble11{
  left: 63%;
  top: 91%;
  transform: rotate(72deg);
  width: 4%;
  height: 6%;
}

#bubble12{
  left: 31%;
  top: 3%;
  transform: rotate(68deg);
  width: 4%;
  height: 6%;
}

#bubble13{
  left: 21%;
  top: 85%;
  transform: rotate(118deg);
  width: 4%;
  height: 6%;
}

#bubble14{
  left: 95%;
  top: 53%;
  transform: rotate(373deg);
  width: 4%;
  height: 6%;
}

#bubble15{
  left: 50%;
  top: 0%;
  transform: rotate(96deg);
  width: 3%;
  height: 5%;
}

.bubbleSmall{
  width: 1%;
  height: 2%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 48%;
  left: 1%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;

  &:after{
    display: block;
    content: '';
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    right: 23%;
    top: 12%;
    transform: rotate(-20deg);
    box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
    opacity: 0.8;
  }
}

#bubbleSmall2{
  left: 3%;
  top: 37%;
  height: 1%;
}
#bubbleSmall3{
  left: 6%;
  top: 28%;
  height: 1%;
}
#bubbleSmall4{
  left: 96%;
  top: 35%;
  height: 1%;
}
#bubbleSmall5{
  left: 60%;
  top: 96%;
  height: 1%;
}
#bubbleSmall6{
  left: 8%;
  top: 72%;
  height: 1%;
}

#innerShadow{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

#glow{
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
  position: absolute;
  z-index: 10
;
}

@keyframes steamAnimation {
  0%{
    transform: translate(30%, -70%);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100%{
    transform: translate(60%, -90%);
    opacity: 0;
  }
}
#steamWrapper{
  width: 50%;
  height: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
#steam{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -156px 492px 123px -252px #fff;
  filter: url(#fog);
  min-width: 600px;
  min-height: 600px;
  animation-name: steamAnimation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  @media (max-width: 600px) {
    top: -80%;
    box-shadow: -156px 492px 123px -252px #fff;
  }
  @media (max-width: 480px) {
    top: -160%;
    box-shadow: -166px 492px 53px -272px #fff;
  }
}
.post-body ul.skill { 
 list-style:none; 
 padding:30px 0 0 20px;
}
.skill li { 
 margin-bottom:70px; 
 background:#030303; 
 height:6px; 
 border-radius:3px; 
 border-left:1px solid #111; 
 border-top:1px solid #111; 
 border-right:1px solid #333; 
 border-bottom:1px solid #333;  
}

.skill li em { 
 position:relative; 
  font-style: normal;
  font-size: 14px;
  text-align: center;
  color:#dedede;
 top:-28px;
}

.p-col.left img {margin:60px auto 0 auto;}
.redline { 
 height: 3px; 
 margin: 1px 0; 
 background: #f2a900; 
 position: absolute;
 box-shadow: 0px 0px 10px 1px rgba(255, 69, 0,0.4);
}

.titulo      { opacity:1;  animation:titulo 5s ease-out;     }


/*programas*/
.redline.pubg { width:50%;  animation:pubg 2s ease-out;}
.redline.codm { width:30%;  animation:codm 2s ease-out;}
.redline.gtav   { width:70%;  animation:gtav 2s ease-out;  }
.redline.apex    { width:20%;  animation:apex 2s ease-out;   }
.redline.speech       { width:10%;  animation:speech 2s ease-out;      }


@keyframes titulo      { 0% { opacity:0; } 100% { opacity:1; }  }

/*programas*/
@keyframes pubg { 0% { width:0px; } 100% { width:50%; }  }
@keyframes codm { 0% { width:0px; } 100% { width:30%; }  }
@keyframes gtav   { 0% { width:0px; } 100% { width:70%; }  }
@keyframes apex    { 0% { width:0px; } 100% { width:20%; }  }
@keyframes speech       { 0% { width:0px; } 100% { width:10%; }  }
.glow-box {}
.glowing-circle{
  width: 300px;
  position:absolute;
  left:0;
  right:0;
  z-index:-1;
  top:20%;
  display:flex;
  margin:0 auto;
  height: 300px;
  border-radius: 50%;
  box-shadow:
    0 0 20px #fff,
    -20px 0 80px #f0f,
    20px 0 80px #0ff,
    inset 0 0 50px #fff,
    inset 50px 0 80px #f0f,
    inset -50px 0 80px #0ff,
    inset 50px 0 300px #f0f,
    inset -50px 0 300px #0ff;
  animation: pulsate 6s linear infinite;
}

@keyframes pulsate {
  50% {
    box-shadow:
      0 0 20px #fff,
      20px 0 80px #f0f,
      -20px 0 80px #0ff,
      inset 0 0 50px #fff,
      inset -50px 0 80px #f0f,
      inset 50px 0 80px #0ff,
      inset -50px 0 300px #f0f,
      inset 50px 0 300px #0ff;
  }