/* CSS Control del Footer */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#wrapper {
    min-height: 100%;
    position: relative;
}

#content {
    padding-bottom: 150px;
    /* Height of the footer element */
}

#footer {
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: 0;
    left: 0;
}


/* ---- */


/* Estilones Basicos Texto */
.checkbox-1x {
    transform: scale(1.5);
}
.checkbox-2x {
    transform: scale(2);
}
.text {
    color: black;
    font-size: 30px;
    position: absolute;
    font-weight: bold;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #FFFFFF;
}

.text-overlay {
    position: relative;
    width: 100%;
}

.text-overlay:hover .overlay {
    opacity: 0.8;
}


/* ---- */


/* Css Card Planeacion Estrategica */

.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}

.stg {
    font-weight: bold;
}


/* CSS Estilos Gradiente para Headers de Cards */

.card .card-header.bgc {
    
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.29735644257703087) 35%, rgba(0,103,255,0.10127801120448177) 69%, rgba(232,62,140,0.10127801120448177) 100%);
}
.card .card-footer.bgc {

    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.29735644257703087) 35%, rgba(0,103,255,0.10127801120448177) 69%, rgba(232,62,140,0.10127801120448177) 100%);
}

.card .card-header.bgr {
    background: rgb(232, 62, 140);
    background: linear-gradient(90deg, rgba(232, 62, 140, 0.2) 0%, rgba(0, 123, 255, 0.2) 100%);
}

.card .card-header.bgw {
    background: rgba(255, 255, 255, 1);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(245, 245, 245, 1) 47%, rgba(237, 237, 237, 1) 100%);
}

.card .card-footer.bgr {
    background: rgb(232, 62, 140);
    background: linear-gradient(90deg, rgba(232, 62, 140, 0.2) 0%, rgba(0, 123, 255, 0.2) 100%);
}

.card .card-footer.bgw {
    background: rgba(255, 255, 255, 1);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(245, 245, 245, 1) 47%, rgba(237, 237, 237, 1) 100%);
}


/* ---- */


/* CSS Botones de Carousel */

.fas.fa-chevron-circle-right {
    color: #007bff;
    font-size: 30px;
    opacity: 0.3;
}

.fas.fa-chevron-circle-left {
    color: #007bff;
    font-size: 30px;
    opacity: 0.3;
}

.fas.fa-chevron-circle-left:hover {
    color: #0062cc;
    opacity: 1;
}

.fas.fa-chevron-circle-right:hover {
    color: #0062cc;
    opacity: 1;
}

.carousel-control-next {
    width: 60px;
    height: 60px;
    right: -10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-prev {
    width: 60px;
    height: 60px;
    left: -10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


/* ---- */


/* CSS Hover para Imagenes */

.hover-img {
    transition: .5s ease;
}

.hover-img:hover {
    opacity: 0.6;
}


/* ---- */


/* CSS Barra de Menu para Moviles */

@media (min-width: 992px) {
    .dropdown-menu .dropdown-toggle:after {
        border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }
    .dropdown-menu .dropdown-menu {
        margin-left: 0;
        margin-right: 0;
    }
    .dropdown-menu li {
        position: relative;
    }
    .nav-item .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
    }
    .nav-item .submenu-left {
        right: 100%;
        left: auto;
    }
    .dropdown-menu>li:hover {
        background-color: #f1f1f1
    }
    .dropdown-menu>li:hover>.submenu {
        display: block;
    }
}


/* ---- */


/* CSS Botones de Redes Sociales */

.fa {
    padding: 15px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #3B5998;
    color: white;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
}

.fa-youtube {
    background: #bb0000;
    color: white;
}

.fa-instagram {
    background: #125688;
    color: white;
}


/* ---- */


/* CSS Personalizado varios */

.button {
    font-size: 14px;
    font-weight: 400;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    padding: 6px 12px;
}

.info {
    padding: 20px;
}

.error {
    font-weight: bold;
    font-size: 20px;
    padding: 20px;
}


/* ---- */