/****************************************************** */
/******************* 02. Hero Section  **************** */
/****************************************************** */
.hero-section {
    padding-top: 125px;
    position: relative;
    background: url(../Content/img/hero/hero-bg.png);
    background-position: inherit;
    background-size: cover;
}

.hero-content {
    max-width: 345px;
    padding-bottom: 200px;
}

    .hero-content h2 {
        color: #FFFFFF;
        line-height: 1.43;
        margin-bottom: 25px;
    }

    .hero-content p {
        color: #FFFFFF;
        margin-bottom: 40px;
    }

.hero-circle-shape {
    position: absolute;
    top: 19%;
    left: 8%;
    width: 12.172%;
    -webkit-animation: down-up-two 8s infinite linear;
    animation: down-up-two 8s infinite linear;
    -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
    animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}

.hero-dot-shape {
    position: absolute;
    bottom: 20%;
    left: 18%;
    width: 1.448%;
    -webkit-animation: animationRoundTopBottom 25s infinite linear;
    animation: animationRoundTopBottom 25s infinite linear;
}

.hero-moon-shape {
    position: absolute;
    top: 17%;
    left: 47%;
    width: 2.59%;
    -webkit-animation: animationRoundTopBottomTwo 25s infinite linear;
    animation: animationRoundTopBottomTwo 25s infinite linear;
}

.hero-right-shape {
    position: absolute;
    top: 0;
    right: 0;
    width: 9.491%;
}

@-webkit-keyframes down-up-one {
    0% {
        -webkit-transform: rotateX(0deg) translateY(0px);
        transform: rotateX(0deg) translateY(0px)
    }

    50% {
        -webkit-transform: rotateX(0deg) translateY(18px);
        transform: rotateX(0deg) translateY(18px)
    }

    100% {
        -webkit-transform: rotateX(0deg) translateY(0px);
        transform: rotateX(0deg) translateY(0px)
    }
}

@keyframes down-up-one {
    0% {
        -webkit-transform: rotateX(0deg) translateY(0px);
        transform: rotateX(0deg) translateY(0px)
    }

    50% {
        -webkit-transform: rotateX(0deg) translateY(18px);
        transform: rotateX(0deg) translateY(18px)
    }

    100% {
        -webkit-transform: rotateX(0deg) translateY(0px);
        transform: rotateX(0deg) translateY(0px)
    }
}

@-webkit-keyframes down-up-two {
    0% {
        -webkit-transform: rotateX(0deg) translate(0px);
        transform: rotateX(0deg) translate(0px)
    }

    50% {
        -webkit-transform: rotateX(0deg) translate(18px, -18px);
        transform: rotateX(0deg) translate(18px, -18px)
    }

    100% {
        -webkit-transform: rotateX(0deg) translate(0px);
        transform: rotateX(0deg) translate(0px)
    }
}

@keyframes down-up-two {
    0% {
        -webkit-transform: rotateX(0deg) translate(0px);
        transform: rotateX(0deg) translate(0px)
    }

    50% {
        -webkit-transform: rotateX(0deg) translate(18px, -18px);
        transform: rotateX(0deg) translate(18px, -18px)
    }

    100% {
        -webkit-transform: rotateX(0deg) translate(0px);
        transform: rotateX(0deg) translate(0px)
    }
}

@-webkit-keyframes animationRoundTopBottom {
    0% {
        -webkit-transform: translate(0px,0px) rotate(0deg);
        transform: translate(0px,0px) rotate(0deg);
    }

    25% {
        -webkit-transform: translate(150px,0px) rotate(90deg);
        transform: translate(150px,0px) rotate(90deg);
    }

    50% {
        -webkit-transform: translate(160px,-140px) rotate(180deg);
        transform: translate(160px,-140px) rotate(180deg);
    }

    75% {
        -webkit-transform: translate(-30px,-170px) rotate(270deg);
        transform: translate(-30px,-170px) rotate(270deg);
    }

    100% {
        -webkit-transform: translate(0px,0px) rotate(360deg);
        transform: translate(0px,0px) rotate(360deg);
    }
}

@keyframes animationRoundTopBottom {
    0% {
        -webkit-transform: translate(0px,0px) rotate(0deg);
        transform: translate(0px,0px) rotate(0deg);
    }

    25% {
        -webkit-transform: translate(150px,0px) rotate(90deg);
        transform: translate(150px,0px) rotate(90deg);
    }

    50% {
        -webkit-transform: translate(160px,-140px) rotate(180deg);
        transform: translate(160px,-140px) rotate(180deg);
    }

    75% {
        -webkit-transform: translate(-30px,-170px) rotate(270deg);
        transform: translate(-30px,-170px) rotate(270deg);
    }

    100% {
        -webkit-transform: translate(0px,0px) rotate(360deg);
        transform: translate(0px,0px) rotate(360deg);
    }
}

@-webkit-keyframes animationRoundTopBottomTwo {
    0% {
        -webkit-transform: translate(0px,0px) rotate(0deg);
        transform: translate(0px,0px) rotate(0deg);
    }

    25% {
        -webkit-transform: translate(150px,0px) rotate(90deg);
        transform: translate(150px,0px) rotate(90deg);
    }

    50% {
        -webkit-transform: translate(150px,150px) rotate(180deg);
        transform: translate(150px,150px) rotate(180deg);
    }

    75% {
        -webkit-transform: translate(0px,150px) rotate(270deg);
        transform: translate(0px,150px) rotate(270deg);
    }

    100% {
        -webkit-transform: translate(0px,0px) rotate(360deg);
        transform: translate(0px,0px) rotate(360deg);
    }
}

@keyframes animationRoundTopBottomTwo {
    0% {
        -webkit-transform: translate(0px,0px) rotate(0deg);
        transform: translate(0px,0px) rotate(0deg);
    }

    25% {
        -webkit-transform: translate(150px,0px) rotate(90deg);
        transform: translate(150px,0px) rotate(90deg);
    }

    50% {
        -webkit-transform: translate(150px,150px) rotate(180deg);
        transform: translate(150px,150px) rotate(180deg);
    }

    75% {
        -webkit-transform: translate(0px,150px) rotate(270deg);
        transform: translate(0px,150px) rotate(270deg);
    }

    100% {
        -webkit-transform: translate(0px,0px) rotate(360deg);
        transform: translate(0px,0px) rotate(360deg);
    }
}
/****************************************************** */
/******************* 03. Page Banner  ***************** */
/****************************************************** */
.page-banner {
    height: 616px; /**616px*/
    display: flex;
    position: relative;
    align-items: center;
    /*margin-bottom: 10px;*/ /**50px*/
    background: url("../Content/img/Hero.png");
    background-position: left;
    background-size: contain ;
    background-repeat: no-repeat;
}

    .page-banner .hero-circle-shape {
        top: 25%;
    }

    .page-banner .banner-inner {
        padding: 0px 0 130px;
        position: relative;
        z-index: 1;
    }

        .page-banner .banner-inner h2 {
            color: #FFFFFF;
            margin-bottom: 0;
            font-size: 60px
        }



.breadcrumb {
    padding: 5px 0;
    margin-bottom: 0;
    background-color: transparent;
}

    .breadcrumb .breadcrumb-item {
        color: #FFFFFF;
        font-size: 24px;
    }

        .breadcrumb .breadcrumb-item a {
            color: #FFFFFF;
        }

            .breadcrumb .breadcrumb-item a:hover {
                color: #57CC61;
            }

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 10px;
    color: #FFFFFF;
}
@media (min-width: 1200px) {
    .page-banner {
        margin-top: 10px;
    }
    
        .page-banner .banner-inner h2 {
            font-size: 60px
        }
       
}
@media (min-width: 992px) {
    .page-banner {
        margin-top: 20px;
    }

        .page-banner .banner-inner h2 {
            font-size: 60px
        }
}
@media (min-width: 576px) {
    .page-banner {
        margin-top: 60px;
    }

        .page-banner .banner-inner h2 {
            font-size: 50px
        }
}
@media (min-width: 390px) {
    .page-banner {
        margin-top: 90px;
    }


        .page-banner .banner-inner h2 {
            font-size: 40px
        }
}
/****************************************************** */
/******************* Listas  ***************** */
/****************************************************** */
ol.roman {
    padding-left: 1em;
}

    ol.roman li::marker {
        content: counter(list-item, upper-roman) ")";
    }

    ol.roman > li {
        display: list-item;
        padding-left: 0.6em;
    }
/****************************************************** */
/******************* imagenes  ***************** */
/****************************************************** */
.img-thumbnail_red {
    padding: 0.25rem;
    /*background-color: #fff;*/
    border: 1px solid #ac0c0c;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}