@charset "UTF-8";

/* hide everything */
#header_bar,#footer_bar,#profile_friends,#profile_header,.heading,.label,.container {
  display:none;
}

/* show only about section */
.container#about_me_container {
  display:block;
}

/* rate & admire */
#profile_friends,#profile_friends .container,#profile_friends .container .label {
  display:block;
}

.profile_section_content {
  background:rgb(32,31,30);
}

#profile_comments .profile_section_content {
  background:gray;
}

#profile_friends {
  position:absolute;
  top:579px;
  left:50px;
  width:1400px;
  background:white;
  transform:rotate(-8deg);
}

/* newsfeed */
#profile_mfc_news_feed_content {
  display:none;
}

/* photo galleries */
#profile_photo_galleries,#profile_password_photo_galleries {
  display:none;
}

/* profile comments */
#profile_comments {
  display:block;
  background:rgb(32,31,30);
  position:absolute;
  top:857px;
  left:50px;
  max-width:1500px;
  z-index:-1;
}

.profile_row {
  background:rgb(32,31,30);
}

/* reset */
* {
  box-sizing:border-box;
}

body,.profile_section_content,.container {
  margin:0;
  padding:0;
}

img {
  max-width:100%;
}

#profile_about_me,#profile {
  background:#FFF;
  margin:0 auto;
}

#about_me_value.value {
  display:inline;
}

.profile_section_content {
  position:static;
}

.container-main {
  width:100%;
/* text-align:center; */
}

.skater-img-container {
  background:red;
  position:absolute;
  left:342px;
  top:122px;
  z-index:4;
}

.skater-img-container img {
  min-width:512px;
  min-height:512px;
}

.block-star {
  min-width:29px;
  min-height:21px;
  background:green;
  position:absolute;
  top:728px;
  left:46px;
  opacity:0;
  z-index:6;
}

.middle-finger {
  opacity:0;
  position:absolute;
  top:180px;
  left:150px;
  z-index:7;
}

.block-star:hover + .middle-finger {
  opacity:1;
}

#beer_text {
  font-family:'futura';
  color:white;
  letter-spacing:20px;
  font-size:30px;
  position:absolute;
  top:195px;
  left:370px;
}

#dribbble {
  color:#EC4E8B;
}

#hetic {
  color:#6FB400;
}

#text {
  position:absolute;
  top:335px;
  left:150px;
  font-family:"futura std";
  color:white;
}

a {
  text-decoration:none;
}

body {
  background:#201F1E;
}

#glass {
  width:70px;
  height:90px;
  background:transparent;
  border:solid 3.5px white;
  border-top:none;
  border-radius:0 0 10px 10px;
  position:absolute;
  top:200px;
  left:200px;
  overflow:hidden;
  transform:rotate(-20deg);
  -webkit-animation:glass 10s infinite;
}

#poignet {
  width:30px;
  height:55px;
  background:transparent;
  border:solid 3.5px white;
  position:absolute;
  top:192px;
  left:270px;
  border-radius:0 16px 16px 0;
  border-left:none;
  transform:rotate(-20deg);
  -webkit-animation:poignet 10s infinite;
}

#beer {
  width:58px;
  height:84px;
  background:transparent;
  position:absolute;
  left:6px;
  top:0;
  border-radius:0 0 5px 5px;
  overflow:hidden;
}

#beer::before {
  content:"";
  width:250px;
  height:250px;
  background:#E8B504;
  position:absolute;
  top:83px;
  left:-190px;
  transform:rotate(40deg);
  -webkit-animation:beer 10s infinite;
}

#mousse_1 {
  position:absolute;
  top:192px;
  left:198px;
  z-index:4;
}

#mousse_1::before {
  content:"";
  width:20px;
  height:20px;
  background:white;
  border-radius:50%;
  position:absolute;
  -webkit-animation:mousse 10s infinite;
}

#mousse_1::after {
  content:"";
  width:17px;
  height:17px;
  background:white;
  border-radius:50%;
  position:absolute;
  top:5px;
  left:10px;
  -webkit-animation:mousse 10s infinite;
}

#mousse_2 {
  position:absolute;
  top:192px;
  left:212px;
  z-index:4;
}

#mousse_2::before {
  content:"";
  width:20px;
  height:20px;
  background:white;
  border-radius:50%;
  position:absolute;
  -webkit-animation:mousse 10s infinite;
}

#mousse_2::after {
  content:"";
  width:17px;
  height:17px;
  background:white;
  border-radius:50%;
  position:absolute;
  top:-5px;
  left:10px;
  -webkit-animation:mousse 10s infinite;
}

#mousse_3 {
  position:absolute;
  top:192px;
  left:228px;
  z-index:4;
}

#mousse_3::before {
  content:"";
  width:20px;
  height:20px;
  background:white;
  border-radius:50%;
  position:absolute;
  -webkit-animation:mousse 10s infinite;
}

#mousse_3::after {
  content:"";
  width:17px;
  height:17px;
  background:white;
  border-radius:50%;
  position:absolute;
  top:10px;
  left:15px;
  -webkit-animation:mousse 10s infinite;
}

#mousse_4 {
  position:absolute;
  top:192px;
  left:242px;
  z-index:4;
}

#mousse_4::before {
  content:"";
  width:20px;
  height:20px;
  background:white;
  border-radius:50%;
  position:absolute;
  -webkit-animation:mousse 10s infinite;
}

#mousse_4::after {
  content:"";
  width:17px;
  height:17px;
  background:white;
  border-radius:50%;
  position:absolute;
  top:5px;
  left:10px;
  -webkit-animation:mousse 10s infinite;
}

#mousse_5 {
  position:absolute;
  top:192px;
  left:257px;
  z-index:4;
  -webkit-animation:mousse 10s infinite;
}

#mousse_5::before {
  content:"";
  width:20px;
  height:20px;
  background:white;
  border-radius:50%;
  position:absolute;
}

#mousse_volante {
  position:absolute;
  top:185px;
  left:212px;
  z-index:4;
}

#mousse_volante::before {
  content:"";
  width:12px;
  height:12px;
  background:white;
  border-radius:50%;
  position:absolute;
  -webkit-animation:mousse_volante 10s infinite;
}

#mousse_volante::after {
  content:"";
  width:8px;
  height:8px;
  background:white;
  border-radius:50%;
  position:absolute;
  top:15px;
  left:40px;
  -webkit-animation:mousse_volante 10s infinite;
}

#mousse_interieur {
  position:absolute;
  top:255px;
  left:218px;
  z-index:4;
  opacity:.9;
}

#mousse_interieur::before {
  content:"";
  width:6px;
  height:6px;
  background:white;
  border-radius:50%;
  position:absolute;
  -webkit-animation:mousse_interieur 10s infinite;
}

#mousse_interieur::after {
  content:"";
  width:4px;
  height:4px;
  background:white;
  border-radius:50%;
  position:absolute;
  top:15px;
  left:30px;
  -webkit-animation:mousse_interieur 5s infinite;
}

#mousse_interieur_2 {
  position:absolute;
  top:235px;
  left:225px;
  z-index:4;
  opacity:.9;
}

#mousse_interieur_2::before {
  content:"";
  width:7px;
  height:7px;
  background:white;
  border-radius:50%;
  position:absolute;
  -webkit-animation:mousse_interieur 10s infinite;
}

#mousse_interieur_2::after {
  content:"";
  width:3px;
  height:3px;
  background:white;
  border-radius:50%;
  position:absolute;
  top:5px;
  left:17px;
  -webkit-animation:mousse_interieur 5s infinite;
}

#mousse_interieur_3 {
  position:absolute;
  top:245px;
  left:232px;
  z-index:4;
  opacity:.9;
}

#mousse_interieur_3::before {
  content:"";
  width:9px;
  height:9px;
  background:white;
  border-radius:50%;
  position:absolute;
  -webkit-animation:mousse_interieur 10s infinite;
}

#mousse_interieur_3::after {
  content:"";
  width:5px;
  height:5px;
  background:white;
  border-radius:50%;
  position:absolute;
  top:8px;
  left:12px;
  -webkit-animation:mousse_interieur 5s infinite;
}

#mousse_interieur_4 {
  position:absolute;
  top:241px;
  left:238px;
  z-index:4;
  opacity:.9;
}

#mousse_interieur_4::before {
  content:"";
  width:2px;
  height:2px;
  background:white;
  border-radius:50%;
  position:absolute;
  -webkit-animation:mousse_interieur 10s infinite;
}

#mousse_interieur_4::after {
  content:"";
  width:5.5px;
  height:5.5px;
  background:white;
  border-radius:50%;
  position:absolute;
  top:28px;
  left:2px;
  -webkit-animation:mousse_interieur 5s infinite;
}

#beer_text {
  z-index:5;
}

.name-container {
  background:#201F1E;
  padding-left:50px;
  min-width:650px;
}

.letter-container {
  color:#fff;
  font-size:100px;
  -webkit-animation:text-flicker-in-glow 4s linear 1.5s both;
  animation:text-flicker-in-glow 4s linear 1.5s both;
}

/* ANIMATIONS */
@-webkit-keyframes beer {
  0% {
    transform:translateY(-5);
  }
  
  17% {
    transform:translateY(-82px);
  }
  
  100% {
    transform:translateY(-82px);
  }
}

@-webkit-keyframes glass {
  0% {
    transform:rotate(-20deg);
  }
  
  17% {
    transform:rotate(0deg);
  }
  
  100% {
    transform:rotate(0deg);
  }
}

@-webkit-keyframes poignet {
  0% {
    transform:rotate(-20deg);
  }
  
  17% {
    transform:rotate(0deg) translateX(5px) translateY(20px);
  }
  
  100% {
    transform:rotate(0deg) translateX(5px) translateY(20px);
  }
}

@-webkit-keyframes mousse {
  0% {
    transform:scale(0);
  }
  
  10% {
    transform:scale(0);
  }
  
  20% {
    transform:scale(1);
  }
}

@-webkit-keyframes mousse_volante {
  0% {
    transform:scale(0) translateY(0px);
  }
  
  10% {
    transform:scale(0) translateY(0px);
  }
  
  20% {
    transform:scale(1) translateY(-20px);
  }
  
  40% {
    opacity:0;
  }
  
  100% {
    transform:scale(1) translateY(-80px);
    opacity:0;
  }
}

@-webkit-keyframes mousse_interieur {
  0% {
    transform:scale(0) translateY(0px);
  }
  
  20% {
    transform:scale(0) translateY(0px);
  }
  
  40% {
    transform:scale(1) translateY(-60px);
  }
  
  50% {
    opacity:0;
  }
  
  100% {
    transform:scale(1) translateY(-60px);
    opacity:0;
  }
}

@-webkit-keyframes text-flicker-in-glow {
  0% {
    opacity:0;
  }
  
  10% {
    opacity:0;
    text-shadow:none;
  }
  
  10.1% {
    opacity:1;
    text-shadow:none;
  }
  
  10.2% {
    opacity:0;
    text-shadow:none;
  }
  
  20% {
    opacity:0;
    text-shadow:none;
  }
  
  20.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.25);
  }
  
  20.6% {
    opacity:0;
    text-shadow:none;
  }
  
  30% {
    opacity:0;
    text-shadow:none;
  }
  
  30.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.45),0 0 60px rgba(255,255,255,0.25);
  }
  
  30.5% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.45),0 0 60px rgba(255,255,255,0.25);
  }
  
  30.6% {
    opacity:0;
    text-shadow:none;
  }
  
  45% {
    opacity:0;
    text-shadow:none;
  }
  
  45.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.45),0 0 60px rgba(255,255,255,0.25);
  }
  
  50% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.45),0 0 60px rgba(255,255,255,0.25);
  }
  
  55% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.45),0 0 60px rgba(255,255,255,0.25);
  }
  
  55.1% {
    opacity:0;
    text-shadow:none;
  }
  
  57% {
    opacity:0;
    text-shadow:none;
  }
  
  57.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.55),0 0 60px rgba(255,255,255,0.35);
  }
  
  60% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.55),0 0 60px rgba(255,255,255,0.35);
  }
  
  60.1% {
    opacity:0;
    text-shadow:none;
  }
  
  65% {
    opacity:0;
    text-shadow:none;
  }
  
  65.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.55),0 0 60px rgba(255,255,255,0.35),0 0 100px rgba(255,255,255,0.1);
  }
  
  75% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.55),0 0 60px rgba(255,255,255,0.35),0 0 100px rgba(255,255,255,0.1);
  }
  
  75.1% {
    opacity:0;
    text-shadow:none;
  }
  
  77% {
    opacity:0;
    text-shadow:none;
  }
  
  77.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.55),0 0 60px rgba(255,255,255,0.4),0 0 110px rgba(255,255,255,0.2),0 0 100px rgba(255,255,255,0.1);
  }
  
  85% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.55),0 0 60px rgba(255,255,255,0.4),0 0 110px rgba(255,255,255,0.2),0 0 100px rgba(255,255,255,0.1);
  }
  
  85.1% {
    opacity:0;
    text-shadow:none;
  }
  
  86% {
    opacity:0;
    text-shadow:none;
  }
  
  86.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.6),0 0 60px rgba(255,255,255,0.45),0 0 110px rgba(255,255,255,0.25),0 0 100px rgba(255,255,255,0.1);
  }
  
  100% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.6),0 0 60px rgba(255,255,255,0.45),0 0 110px rgba(255,255,255,0.25),0 0 100px rgba(255,255,255,0.1);
  }
}

@keyframes text-flicker-in-glow {
  0% {
    opacity:0;
  }
  
  10% {
    opacity:0;
    text-shadow:none;
  }
  
  10.1% {
    opacity:1;
    text-shadow:none;
  }
  
  10.2% {
    opacity:0;
    text-shadow:none;
  }
  
  20% {
    opacity:0;
    text-shadow:none;
  }
  
  20.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.5);
  }
  
  20.6% {
    opacity:0;
    text-shadow:none;
  }
  
  30% {
    opacity:0;
    text-shadow:none;
  }
  
  30.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.7),0 0 60px rgba(255,255,255,0.25);
  }
  
  30.5% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.7),0 0 60px rgba(255,255,255,0.25);
  }
  
  30.6% {
    opacity:0;
    text-shadow:none;
  }
  
  45% {
    opacity:0;
    text-shadow:none;
  }
  
  45.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.7),0 0 60px rgba(255,255,255,0.25);
  }
  
  50% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.7),0 0 60px rgba(255,255,255,0.25);
  }
  
  55% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.7),0 0 60px rgba(255,255,255,0.25);
  }
  
  55.1% {
    opacity:0;
    text-shadow:none;
  }
  
  57% {
    opacity:0;
    text-shadow:none;
  }
  
  57.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.8),0 0 60px rgba(255,255,255,0.35);
  }
  
  60% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.8),0 0 60px rgba(255,255,255,0.35);
  }
  
  60.1% {
    opacity:0;
    text-shadow:none;
  }
  
  65% {
    opacity:0;
    text-shadow:none;
  }
  
  65.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.8),0 0 60px rgba(255,255,255,0.35),0 0 100px rgba(255,255,255,0.1);
  }
  
  75% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.8),0 0 60px rgba(255,255,255,0.35),0 0 100px rgba(255,255,255,0.1);
  }
  
  75.1% {
    opacity:0;
    text-shadow:none;
  }
  
  77% {
    opacity:0;
    text-shadow:none;
  }
  
  77.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.8),0 0 60px rgba(255,255,255,0.4),0 0 110px rgba(255,255,255,0.2),0 0 100px rgba(255,255,255,0.1);
  }
  
  85% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.8),0 0 60px rgba(255,255,255,0.4),0 0 110px rgba(255,255,255,0.2),0 0 100px rgba(255,255,255,0.1);
  }
  
  85.1% {
    opacity:0;
    text-shadow:none;
  }
  
  86% {
    opacity:0;
    text-shadow:none;
  }
  
  86.1% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.9),0 0 60px rgba(255,255,255,0.45),0 0 110px rgba(255,255,255,0.25),0 0 100px rgba(255,255,255,0.1);
  }
  
  100% {
    opacity:1;
    text-shadow:0 0 30px rgba(255,255,255,0.9),0 0 60px rgba(255,255,255,0.45),0 0 110px rgba(255,255,255,0.25),0 0 100px rgba(255,255,255,0.1);
  }
}