.icon {
    margin-left: 5px;
    margin-right: 15px;
    padding: 0;
    display: inline-block;
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.icon-sm {
    width: .85rem;
    height: .85rem
}

.icon-md {
    width: 2rem;
    height: 2rem
}

.icon-lg {
    width: 3.25rem;
    height: 3.25rem
}

.icon-xl {
    width: 4.5rem;
    height: 4.5rem
}

.icon-xxl {
    width: 6.5rem;
    height: 6.5rem
}

.floating {
    -webkit-animation: floating 4s ease-in-out infinite;
    animation: floating 4s ease-in-out infinite;
    -webkit-filter: none;
    filter: none
}

@-webkit-keyframes floating {
    from {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    65% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px)
    }
    to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes floating {
    from {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    65% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px)
    }
    to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes particula-v {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-460px);
        transform: translateY(-460px)
    }
}

@keyframes particula-v {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-460px);
        transform: translateY(-460px)
    }
}

@-webkit-keyframes particula-left-v {
    0% {
        margin-bottom: 0;
        opacity: .1
    }
    20% {
        opacity: 1
    }
    100% {
        margin-bottom: 460px;
        opacity: 1;
        left: 0
    }
}

@keyframes particula-left-v {
    0% {
        margin-bottom: 0;
        opacity: .1
    }
    20% {
        opacity: 1
    }
    100% {
        margin-bottom: 460px;
        opacity: 1;
        left: 0
    }
}

.particulas-wrapper {
    position: relative
}

.particulas-wrapper .icon {
    position: absolute;
    will-change: transform, opacity;
    margin: 0
}

.particulas-wrapper .particula {
    -webkit-animation: particula-animate-v 8s linear infinite;
    animation: particula-animate-v 8s linear infinite
}

.section {
    position: relative
}

.animacionheader {
    background-color: #f9fbfd
}

.animacionheader .container {
    padding-top: 12rem;
    padding-bottom: 6rem
}

@media (min-width:992px) {
    .animacionheader .container {
        padding-bottom: 24rem
    }
}

.animacionheader .contenedor-shapes {
    width: 90%
}

@media (max-width:991.98px) {
    .animacionheader .contenedor-shapes {
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

@media (min-width:992px) {
    .animacionheader .contenedor-shapes {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 0;
        width: 50%
    }
}

@media (min-width:1200px) {
    .animacionheader .contenedor-shapes {
        -webkit-transform: translateY(-50%) scale(.75);
        transform: translateY(-50%) scale(.75)
    }
}

@media (min-width:1601px) {
    .animacionheader .main-background {
        -webkit-transform: translate3d(0, -3%, 0);
        transform: translate3d(0, -3%, 0)
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(1) {
    -webkit-animation: floating 3.33333s ease-in-out infinite alternate;
    animation: floating 3.33333s ease-in-out infinite alternate;
    bottom: 25%;
    left: 2%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(1) {
        -webkit-animation: particula-left-v 10s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 10s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(2) {
    -webkit-animation: floating 2.23333s ease-in-out infinite alternate;
    animation: floating 2.23333s ease-in-out infinite alternate;
    bottom: 20%;
    left: 12%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(2) {
        -webkit-animation: particula-left-v 6.7s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 6.7s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(3) {
    -webkit-animation: floating 2.93333s ease-in-out infinite alternate;
    animation: floating 2.93333s ease-in-out infinite alternate;
    bottom: 36%;
    left: 14%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(3) {
        -webkit-animation: particula-left-v 8.8s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 8.8s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(4) {
    -webkit-animation: floating 2.26667s ease-in-out infinite alternate;
    animation: floating 2.26667s ease-in-out infinite alternate;
    bottom: 31%;
    left: 20%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(4) {
        -webkit-animation: particula-left-v 6.8s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 6.8s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(5) {
    -webkit-animation: floating 3.16667s ease-in-out infinite alternate;
    animation: floating 3.16667s ease-in-out infinite alternate;
    bottom: 45%;
    left: 30%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(5) {
        -webkit-animation: particula-left-v 9.5s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 9.5s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(6) {
    -webkit-animation: floating 2.9s ease-in-out infinite alternate;
    animation: floating 2.9s ease-in-out infinite alternate;
    bottom: 24%;
    left: 30%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(6) {
        -webkit-animation: particula-left-v 8.7s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 8.7s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(7) {
    -webkit-animation: floating 2.5s ease-in-out infinite alternate;
    animation: floating 2.5s ease-in-out infinite alternate;
    bottom: 60%;
    left: 40%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(7) {
        -webkit-animation: particula-left-v 7.5s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 7.5s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(8) {
    -webkit-animation: floating 3.33333s ease-in-out infinite alternate;
    animation: floating 3.33333s ease-in-out infinite alternate;
    bottom: 35%;
    left: 38%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(8) {
        -webkit-animation: particula-left-v 10s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 10s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(9) {
    -webkit-animation: floating 2.13333s ease-in-out infinite alternate;
    animation: floating 2.13333s ease-in-out infinite alternate;
    bottom: 30%;
    left: 1%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(9) {
        -webkit-animation: particula-left-v 6.4s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 6.4s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(10) {
    -webkit-animation: floating 2.73333s ease-in-out infinite alternate;
    animation: floating 2.73333s ease-in-out infinite alternate;
    bottom: 35%;
    left: 12%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(10) {
        -webkit-animation: particula-left-v 8.2s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 8.2s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(11) {
    -webkit-animation: floating 2.13333s ease-in-out infinite alternate;
    animation: floating 2.13333s ease-in-out infinite alternate;
    bottom: 40%;
    left: 14%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(11) {
        -webkit-animation: particula-left-v 6.4s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 6.4s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(12) {
    -webkit-animation: floating 2.6s ease-in-out infinite alternate;
    animation: floating 2.6s ease-in-out infinite alternate;
    bottom: 40%;
    left: 18%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(12) {
        -webkit-animation: particula-left-v 7.8s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 7.8s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(13) {
    -webkit-animation: floating 3.06667s ease-in-out infinite alternate;
    animation: floating 3.06667s ease-in-out infinite alternate;
    bottom: 50%;
    left: 20%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(13) {
        -webkit-animation: particula-left-v 9.2s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 9.2s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(14) {
    -webkit-animation: floating 4.06667s ease-in-out infinite alternate;
    animation: floating 4.06667s ease-in-out infinite alternate;
    bottom: 55%;
    left: 45%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(14) {
        -webkit-animation: particula-left-v 12.2s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 12.2s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(15) {
    -webkit-animation: floating 3.26667s ease-in-out infinite alternate;
    animation: floating 3.26667s ease-in-out infinite alternate;
    bottom: 30%;
    left: 50%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(15) {
        -webkit-animation: particula-left-v 9.8s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 9.8s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}

.animacionheader .particulas-wrapper .particula:nth-child(16) {
    -webkit-animation: floating 3.53333s ease-in-out infinite alternate;
    animation: floating 3.53333s ease-in-out infinite alternate;
    bottom: 48%;
    left: 34%
}

@media (min-width:992px) {
    .animacionheader .particulas-wrapper .particula:nth-child(16) {
        -webkit-animation: particula-left-v 10.6s linear infinite, shake-v 2s ease-in-out infinite alternate;
        animation: particula-left-v 10.6s linear infinite, shake-v 2s ease-in-out infinite alternate;
        bottom: 50%
    }
}