*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.border-animation {
    position: relative;
    background: none;
    border: none;
    
    margin: 5px;
    margin-bottom: 50px;
}

.border-inner {
    display: block;
    /*padding: 25px 80px;*/
    /*background-color: #ffffff21;*/
    padding: 20px;
}

.border-animation::before, .border-animation::after {
    content: "";
    width: 0;
    height: 2px;
    position: absolute;
    transition: all 0.2s linear;
    background: black;
}

.border-inner::before, .border-inner::after {
    content: "";
    width: 2px;
    height: 0;
    position: absolute;
    transition: all 0.2s linear;
    background: black;
}

.border-animation:hover::before, .border-animation:hover::after {
    width: 100%;
}

.border-animation:hover .border-inner::before, .border-animation:hover .border-inner::after {
    height: 100%;
}
/*----- button 1 -----*/
.border-1::before, .border-1::after {
    transition-delay: 0.2s;
}

.border-1 .border-inner::before, .border-1 .border-inner::after {
    transition-delay: 0s;
}

.border-1::before {
    right: 0;
    top: 0;
}

.border-1::after {
    left: 0;
    bottom: 0;
}

.border-1 .border-inner::before {
    left: 0;
    top: 0;
}

.border-1 .border-inner::after {
    right: 0;
    bottom: 0;
}

.border-1:hover::before, .border-1:hover::after {
    transition-delay: 0s;
}

.border-1:hover .border-inner::before, .border-1:hover .border-inner::after {
    transition-delay: 0.2s;
}

/*--- Button 2 -------*/


.border-2::before, .border-2::after {
    transition-delay: 0s;
}

.border-2 .border-inner::before, .border-2 .border-inner::after {
    transition-delay: 0.2s;
}

.border-2::before {
    right: 0;
    top: 0;
}

.border-2::after {
    left: 0;
    bottom: 0;
}

.border-2 .border-inner::before {
    left: 0;
    top: 0;
}

.border-2 .border-inner::after {
    right: 0;
    bottom: 0;
}

.border-2:hover::before, .border-2:hover::after {
    transition-delay: 0.2s;
}

.border-2:hover .border-inner::before, .border-2:hover .border-inner::after {
    transition-delay: 0s;
}


/*----- button 3 -----*/
.border-3::after {
    left: 0;
    bottom: 0;
    transition-delay: 0.6s;
}

.border-3 .border-inner::after {
    transition-delay: 0.4s;
    right: 0;
    bottom: 0
}

.border-3::before {
    right: 0;
    top: 0;
    transition-delay: 0.2s;
}

.border-3 .border-inner::before {
    transition-delay: 0s;
    left: 0;
    top: 0;
}

.border-3:hover::after {
    transition-delay: 0s;
}

.border-3:hover .border-inner::after {
    transition-delay: 0.2s;
}

.border-3:hover::before {
    transition-delay: 0.4s;
}

.border-3:hover .border-inner::before {
    transition-delay: 0.6s;
}

/*----- button 4 -----*/
.border-4::after {
    right: 0;
    bottom: 0;
    transition-duration: 0.4s;
}

.border-4 .border-inner::after {
    right: 0;
    bottom: 0;
    transition-duration: 0.4s;
}

.border-4::before {
    left: 0;
    top: 0;
    transition-duration: 0.4s;
}

.border-4 .border-inner::before {
    left: 0;
    top: 0;
    transition-duration: 0.4s;
}

/*----- button 5 -----*/
.border-5::after {
    left: 0;
    bottom: 0;
    transition-duration: 0.4s;
}

.border-5 .border-inner::after {
    right: 0;
    top: 0;
    transition-duration: 0.4s;
}

.border-5::before {
    right: 0;
    top: 0;
    transition-duration: 0.4s;
}

.border-5 .border-inner::before {
    left: 0;
    bottom: 0;
    transition-duration: 0.4s;
}

/*----- button 6 -----*/
.border-6::before {
    left: 50%;
    top: 0;
    transition-duration: 0.4s;
}

.border-6::after {
    left: 50%;
    bottom: 0;
    transition-duration: 0.4s;
}

.border-6 .border-inner::before {
    left: 0;
    top: 50%;
    transition-duration: 0.4s;
}

.border-6 .border-inner::after {
    right: 0;
    top: 50%;
    transition-duration: 0.4s;
}

.border-6:hover::before, .border-6:hover::after {
    left: 0;
}

.border-6:hover .border-inner::before, .border-6:hover .border-inner::after {
    top: 0;
}


/**CARD HOVER*/

.container-cardx {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

    .container-cardx .cardx {
        margin: 1em;
        margin-left: 7.5em;
        margin-right: 7.5em;
    }

        .container-cardx .cardx .cardx-img-top {
            position: relative;
            z-index: 2;
            width: 289px;
            height: 248px;
            transform: translateY(52%);
            transition: 0.5s;
            background-color: #576675;
            padding: 17px;
            box-shadow: 2.8px 0 2.2px rgba(0, 0, 0, 0.056),6.7px 0 5.3px rgba(0, 0, 0, 0.081),12.5px 0 10px rgba(0, 0, 0, 0.1),22.3px 0 17.9px rgba(0, 0, 0, 0.119),41.8px 0 33.4px rgba(0, 0, 0, 0.144),100px 0 80px rgba(0, 0, 0, 0.2);
        }

        .container-cardx .cardx .cardx-body {
            z-index: 1;
            box-sizing: border-box;
            padding: 1.25em;
            height: 240px;
            background: white;
            box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.056), 0 6.7px 5.3px rgba(0, 0, 0, 0.081), 0 12.5px 10px rgba(0, 0, 0, 0.1), 0 22.3px 17.9px rgba(0, 0, 0, 0.119), 0 41.8px 33.4px rgba(0, 0, 0, 0.144), 0 100px 80px rgba(0, 0, 0, 0.2);
            transform: translateY(-50%);
            transition: 0.5s;
        }

            .container-cardx .cardx .cardx-body .cardx-title {
                margin: 0 0 0.75em 0;
                font-size: 1.25em;
                font-weight: bold;
                line-height: 1.2;
            }

            .container-cardx .cardx .cardx-body .cardx-text {
                margin: 0 0 1em 0;
            }

            .container-cardx .cardx .cardx-body .btn {
                padding: 0.375em 0.75em;
                color: black;
                text-decoration: none;
                line-height: 1.5;
                border: 1px solid black;
                border-radius: 0.25em;
                transition: 0.5s;
                position: fixed;
                bottom: 5px;
                left: 37%;
                background-color: #caccce;
            }

                .container-cardx .cardx .cardx-body .btn:hover {
                    color: white;
                    background: black;
                }

        .container-cardx .cardx:hover .cardx-img-top {
            transform: translateY(2%);
        }

        .container-cardx .cardx:hover .cardx-body {
            transform: translateY(0);
        }



.blueLogo {
    background-color: #2B3D8A;
}

.heading-spacer {
    width: 200px;
    border-top: 4px solid #caccce;
}

.line {
    width: 200px;
    border-top: 4px solid black;
    width: -webkit-fill-available;
}

.circulo {
    width: 100px;
    height: 100px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #2B3D8A;
}

.cuadrado {
    width: 100%;
    height: 250px;
    border: 3px solid #555;
    background-color: white;
}

.cuadrado-small {
    width: 50%;
    height: 150px;
    border: 3px solid #555;
    background-color: white;
}

.nav-items-color {
    color: #2B3D8A;
}

.sub-navbar {
    height: 50px;
}

.img-container {
    align-content: center;
    align-items: center;
    text-align: center;
}

.img-class {
    height: 50%;
    width: 50%;
}

/*extras*/
.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

    .carousel-fade .carousel-inner .next,
    .carousel-fade .carousel-inner .prev,
    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
        left: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

.carousel-fade .carousel-control {
    z-index: 2;
}

/*
Fade content bs-carousel with hero headers

Image credits: unsplash.com
*/

/********************************/
/*       Fade Bs-carousel       */
/********************************/
.fade-carousel {
    position: relative;
    height: 65vh;
}

    .fade-carousel .carousel-inner .item {
        height: 65vh;
    }

    .fade-carousel .carousel-indicators > li {
        margin: 0 2px;
        background-color: #f39c12;
        border-color: #f39c12;
        opacity: 0.5;
    }

        .fade-carousel .carousel-indicators > li.active {
            width: 10px;
            height: 10px;
            opacity: 0.5;
        }

/********************************/
/*          Hero Headers        */
/********************************/
.hero2 {
    position: relative;
    top: -610px;
    left: 53%;
    width: 49%;
    z-index: 3;
    /*color: #fff;*/
    bottom: 200px;
    text-align: center;
    text-transform: uppercase;
}

    .hero2 h1 {
        font-size: 6em;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }

.hero {
    position: relative;
    top: -310px;
    left: 20%;
    width: 42%;
    z-index: 3;
    color: #fff;
    bottom: 200px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

    .hero h1 {
        font-size: 6em;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }


.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out 5s;
    -moz-transition: 2s all ease-in-out 5s;
    -ms-transition: 2s all ease-in-out 5s;
    -o-transition: 2s all ease-in-out 5s;
    transition: 2s all ease-in-out 5s;
}

.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out 5s;
    -moz-transition: 2s all ease-in-out 5s;
    -ms-transition: 2s all ease-in-out 5s;
    -o-transition: 2s all ease-in-out 5s;
    transition: 2s all ease-in-out 5s;
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: white;
    opacity: 0.2;
}

/********************************/
/*          Custom Buttons      */
/********************************/
.btn.btn-lg {
    padding: 10px 40px;
}

.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #f5f5f5;
    background-color: #0054a4;
    border-color: #0054a4;
    outline: none;
    margin: 20px auto;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3,
.fade-carousel .slides .slide-4,
.fade-carousel .slides .slide-5 {
    height: 65vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-position-y: -520px;
}

.fade-carousel .slides .slide-1 {
    background-image: url("/Content/Images/carusel2.jpg");
}

.fade-carousel .slides .slide-2 {
    background-image: url("/Content/Images/carusel2.jpg");
}

.fade-carousel .slides .slide-3 {
    background-image: url("/Content/Images/carusel4.jpg");
}

.fade-carousel .slides .slide-4 {
    background-image: url("/Content/Images/carusel5.jpg");
}

.fade-carousel .slides .slide-5 {
    background-image: url("/Content/Images/carusel6.jpg");
}