* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background-image: url(config/bg.gif);
  color: #fff; }

/*EFECTO SCROLL*/
.scrollDown {
  -webkit-animation: scrollDown 2s linear;
  animation: scrollDown 2s linear; }

.zoom {
  -webkit-animation: zoom 2s linear;
  animation: zoom 2s linear; }

@-webkit-keyframes scrollDown {
  from {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    opacity: 0; }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; } }

@keyframes scrollDown {
  from {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    opacity: 0; }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; } }

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0; }
  to {
    -webkit-transform: scale(5px);
    transform: scale(5px);
    opacity: 1; } }

@keyframes zoom {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0; }
  to {
    -webkit-transform: scale(5px);
    transform: scale(5px);
    opacity: 1; } }

.welcome {
  text-align: center;
  padding: 20px; }
  .welcome img {
    height: 100px;
    border-radius: 15%; }
  .welcome img,
  .welcome h1,
  .welcome i {
    margin: 0;
    padding: 0; }

.main {
  width: 100%;
  text-align: center;
  margin-bottom: 50px; }
  .main section {
    color: blue;
    background-color: white;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 200px;
    height: 200px;
    margin: 10px;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    cursor: pointer; }
    .main section div {
      padding: 15px;
      margin: auto; }
      .main section div a {
        display: block;
        text-decoration: none;
        margin: 3% 0;
        font-weight: bold;
        font-size: 1em;
        color: red;
        text-transform: uppercase;
        letter-spacing: -0.5px; }
      .main section div i {
        font-size: 16px; }
    .main section:nth-child(1) {
      -webkit-clip-path: circle(50% at 50% 50%);
      clip-path: circle(50% at 50% 50%); }
    .main section:nth-child(2) {
      -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
      .main section:nth-child(2) div {
        padding: 15px 30px;
        -webkit-transform: translateY(35px);
        -ms-transform: translateY(35px);
        transform: translateY(35px); }
    .main section:nth-child(3) {
      -webkit-clip-path: inset(3% 3% 3% 3%);
      clip-path: inset(3% 3% 3% 3%); }
    .main section:nth-child(4) {
      -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
      clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
    .main section:nth-child(5) {
      -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
      clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
    .main section:nth-child(6) {
      -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
      clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); }
    .main section:nth-child(7) {
      -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
    .main section:nth-child(8) {
      -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
      clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%); }
    .main section:nth-child(9) {
      -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
      clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); }
    .main section:nth-child(10) {
      -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
      clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }

footer {
  background: black;
  color: white;
  text-align: center;
  padding: 20px 5%;
  margin-top: 20px;
  bottom: 0; }
  footer .redes img {
    height: 30px;
    margin: 0 5px; }
  footer .redes a {
    text-decoration: none; }
  footer p,
  footer i {
    padding: 0;
    margin: 0; }
  footer p a,
  footer #subir a {
    text-decoration: none;
    color: dodgerblue; }