@charset "UTF-8";
.como_marcou {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 30px 0;
}
.como_marcou .marcou_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 110px;
          flex: 0 0 110px;
  max-width: 110px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 20px 100px 20px;
  padding-top: 70px;
  position: relative;
}
.como_marcou .marcou_item .marcou_number {
  font-size: 52px;
  color: #ffffff;
  text-align: center;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  z-index: 9;
}
.como_marcou .marcou_item .golo_item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20px;
          flex: 0 0 20px;
  height: 20px;
  margin: 1px;
  max-width: 20px;
  background: #333333;
}
.como_marcou .marcou_item:before {
  content: "";
  display: block;
  width: 120px;
  height: 80px;
  position: absolute;
  left: -5px;
  bottom: -86px;
  z-index: 10;
}
.como_marcou .marcou_item:after {
  display: block;
  height: 20px;
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  z-index: 10;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #AAAAAA;
  text-align: center;
  font-family: "Roboto Condensed", sans-serif;
}
.como_marcou .marcou_item.marcou_01 {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.como_marcou .marcou_item.marcou_01 .golo_active {
  background: #0099FF;
}
.como_marcou .marcou_item.marcou_01:before {
  background: url(/Datajournalism/i/golos_ronaldo/como_marcou01.png) no-repeat center scroll;
  background-size: contain;
}
.como_marcou .marcou_item.marcou_01:after {
  content: "Pé direito";
}
.como_marcou .marcou_item.marcou_02 {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
.como_marcou .marcou_item.marcou_02 .golo_active {
  background: #FF9900;
}
.como_marcou .marcou_item.marcou_02:before {
  background: url(/Datajournalism/i/golos_ronaldo/como_marcou02.png) no-repeat center scroll;
  background-size: contain;
}
.como_marcou .marcou_item.marcou_02:after {
  content: "Pé esquerdo";
}
.como_marcou .marcou_item.marcou_03 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.como_marcou .marcou_item.marcou_03 .golo_active {
  background: #00CC66;
}
.como_marcou .marcou_item.marcou_03:before {
  background: url(/Datajournalism/i/golos_ronaldo/como_marcou03.png) no-repeat center scroll;
  background-size: contain;
}
.como_marcou .marcou_item.marcou_03:after {
  content: "Cabeça";
}
.como_marcou .marcou_item.marcou_04 {
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}
.como_marcou .marcou_item.marcou_04 .golo_active {
  background: #FF0000;
}
.como_marcou .marcou_item.marcou_04:before {
  background: url(/Datajournalism/i/golos_ronaldo/como_marcou04.png) no-repeat center scroll;
  background-size: contain;
}
.como_marcou .marcou_item.marcou_04:after {
  content: "Penálti";
}
.como_marcou .marcou_item.marcou_05 {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.como_marcou .marcou_item.marcou_05 .golo_active {
  background: #D9D900;
}
.como_marcou .marcou_item.marcou_05:before {
  background: url(/Datajournalism/i/golos_ronaldo/como_marcou05.png) no-repeat center scroll;
  background-size: contain;
}
.como_marcou .marcou_item.marcou_05:after {
  content: "Livre direto";
}
.como_marcou .marcou_item.marcou_06 {
  -webkit-animation-delay: 1.75s;
          animation-delay: 1.75s;
}
.como_marcou .marcou_item.marcou_06 .golo_active {
  background: #BB008C;
}
.como_marcou .marcou_item.marcou_06:before {
  background: url(/Datajournalism/i/golos_ronaldo/como_marcou06.png) no-repeat center scroll;
  background-size: contain;
}
.como_marcou .marcou_item.marcou_06:after {
  content: "Pequena área";
}
.como_marcou .marcou_item.marcou_07 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.como_marcou .marcou_item.marcou_07 .golo_active {
  background: #00A4A4;
}
.como_marcou .marcou_item.marcou_07:before {
  background: url(/Datajournalism/i/golos_ronaldo/como_marcou07.png) no-repeat center scroll;
  background-size: contain;
}
.como_marcou .marcou_item.marcou_07:after {
  content: "Área";
}
.como_marcou .marcou_item.marcou_08 {
  -webkit-animation-delay: 2.25s;
          animation-delay: 2.25s;
}
.como_marcou .marcou_item.marcou_08 .golo_active {
  background: #CC3300;
}
.como_marcou .marcou_item.marcou_08:before {
  background: url(/Datajournalism/i/golos_ronaldo/como_marcou08.png) no-repeat center scroll;
  background-size: contain;
}
.como_marcou .marcou_item.marcou_08:after {
  content: "Fora da área";
}

@media screen and (max-width: 767px) {
  .como_marcou {
    padding: 15px 0 50px 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .como_marcou .marcou_item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 60px;
            flex: 0 0 60px;
    max-width: 60px;
    margin: 0 10px 70px 10px;
  }
  .como_marcou .marcou_item .marcou_number {
    font-size: 28px;
    top: 10px;
  }
  .como_marcou .marcou_item .golo_item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 10px;
            flex: 0 0 10px;
    height: 10px;
    margin: 1px;
    max-width: 10px;
  }
  .como_marcou .marcou_item:before {
    width: 60px;
    height: 40px;
    left: 0px;
    bottom: -45px;
  }
  .como_marcou .marcou_item:after {
    height: 20px;
    bottom: -70px;
    font-size: 9px;
  }
}