@font-face {
    font-family: 'LDFComicSansLight';
    src: 
         url('../fonts/ArialRoundedMTStd-Bold.otf') format('opentype'),
         url('../fonts/ArialRoundedMTStd-Bold.ttf') format('truetype'),
         url('../fonts/LDFComicSansLight.ttf') format('truetype'),
         url('../fonts/LDFComicSans.ttf') format('truetype'),
         url('../fonts/LDFComicSansBold.ttf') format('truetype'),
         url('../fonts/LDFComicSansHairline.ttf') format('truetype');
}

@font-face {
    font-family: 'Century Gothic';
    src: url('../fonts/Century Gothic.ttf') format('truetype');
}

.alert-gray{
    background-color:rgba(223,229,215,0.48);
}

p, span, div ,small{
    font-family: 'Century Gothic','Arial Rounded MT';
}


h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small,
 .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small,
 h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small,
 .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small{
    font-family: 'LDFComicSansLight';
}


h1, h2, h3, h4 {
    font-family: 'LDFComicSansLight';
}

.navbar-default .navbar-nav > li > a {
    font-family: 'LDFComicSansLight';
}

.dropdown-menu > li > a {
    font-family: 'LDFComicSansLight';
}

.item {
    background: #333;
    text-align: center;
    height: 200px !important;
}

.ControlPanel {
    color: #ffffff;
    background: #ad1d28;
}

    .ControlPanel:hover {
        background-color: #d92432;
        color: #ffffff;
    }

.carousel-caption {
    background: rgba(0, 0, 0, 0.35);
    width: 100%;
    padding: 0 20px;
    margin: 0 0px auto -65px;
}

table a:not(.btn), .table a:not(.btn) {
    color: #0026ff;
}


.adaptar {
    width: 100%;
    height: 100%;
}


@media (max-width: 400px) {
    .carousel {
        max-height: 150px;
        margin-bottom: 20px;
    }
    /* Since positioning the image, we need to help out the caption */
    .carousel-caption {
        z-index: 3;
    }

    /* Declare heights because of positioning of img element */
    .carousel .item {
        max-height: 150px;
        background-color: #fff;
    }

    .carousel-inner > .item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        max-height: 150px;
    }
}


@media (min-width: 400px) and (max-width: 767px) {
    .carousel {
        max-height: 200px;
        margin-bottom: 20px;
    }
    /* Since positioning the image, we need to help out the caption */
    .carousel-caption {
        z-index: 3;
    }

    /* Declare heights because of positioning of img element */
    .carousel .item {
        max-height: 200px;
        background-color: #fff;
    }

    .carousel-inner > .item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        max-height: 200px;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .carousel {
        max-height: 350px;
        margin-bottom: 20px;
    }
    /* Since positioning the image, we need to help out the caption */
    .carousel-caption {
        z-index: 5;
    }

    /* Declare heights because of positioning of img element */
    .carousel .item {
        max-height: 350px;
        background-color: #fff;
    }

    .carousel-inner > .item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        max-height: 350px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .carousel {
        max-height: 400px;
        margin-bottom: 20px;
    }
    /* Since positioning the image, we need to help out the caption */
    .carousel-caption {
        z-index: 10;
    }

    /* Declare heights because of positioning of img element */
    .carousel .item {
        max-height: 400px;
        background-color: #fff;
    }

    .carousel-inner > .item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        max-height: 400px;
    }
}


.info {
    display: none;
    position: absolute;
    bottom: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
    width: 300px;
    color: #FFF;
    padding: 10px;
}

    .info :hover {
        display: block;
    }

.NoBorder {
    border: none;
}

.Max-width-667 {
    max-width: 667px;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}

#Header {
    background-color: rgb(255,255,255); /* Old browsers */
    background-color: -moz-linear-gradient(left, rgba(255,255,255,1) 3%, rgba(173,29,40,1) 25%, rgba(173,29,40,1) 100%); /* FF3.6+ */
    background-color: -webkit-gradient(linear, left top, right top, color-stop(3%,rgba(255,255,255,1)), color-stop(25%,rgba(173,29,40,1)), color-stop(100%,rgba(173,29,40,1))); /* Chrome,Safari4+ */
    background-color: -webkit-linear-gradient(left, rgba(255,255,255,1) 3%,rgba(173,29,40,1) 25%,rgba(173,29,40,1) 100%); /* Chrome10+,Safari5.1+ */
    background-color: -o-linear-gradient(left, rgba(255,255,255,1) 3%,rgba(173,29,40,1) 25%,rgba(173,29,40,1) 100%); /* Opera 11.10+ */
    background-color: -ms-linear-gradient(left, rgba(255,255,255,1) 3%,rgba(173,29,40,1) 25%,rgba(173,29,40,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(255,255,255,1) 3%,rgba(173,29,40,1) 25%,rgba(173,29,40,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ad1d28',GradientType=1 ); /* IE6-9 */
}

.carouselP {
    margin-top: 20px;
    height: 50px;
}

.bs-example {
    margin: 20px;
}

h5 {
    font-family: Arial,sans-serif;
}

h6 {
    font-family: Arial,sans-serif;
}

a::content {
    color: #ad1d28;
}

a {
    color: #ad1d28;
}

    a:hover {
        color: #000000;
    }

.iframe-rwd {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}

    .iframe-rwd iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.estiloPanelSombras {
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px,0px,20px, #333;
    /*box-shadow recibe cuatro parametros... el primero y el segundo es la distancia a la q 
  colocara la sombra, el tercero es el blour que dara, el cuarto el color*/
}

.HOMEfondo {
    background-color: #ffffff;
    border: solid 0px #999999;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 0px 20px #999999;
}

.LinkRojos {
    color: red;
}

.LinkBlancos {
    color: white;
}

.Fondo {
    background-color: #c5c5c5;
    padding-top: 20px;
    padding-bottom: 20px;
}

.container-full {
    margin: 0 auto;
    width: 100%;
}

.FondoGradient {
    background-color: -moz-linear-gradient(top, rgba(252,255,244,0.36) 0%, rgba(223,229,215,0.48) 18%, rgba(179,190,173,0.9) 85%, rgba(179,190,173,1) 100%); /* FF3.6+ */
    background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,0.36)), color-stop(18%,rgba(223,229,215,0.48)), color-stop(85%,rgba(179,190,173,0.9)), color-stop(100%,rgba(179,190,173,1))); /* Chrome,Safari4+ */
    background-color: -webkit-linear-gradient(top, rgba(252,255,244,0.36) 0%,rgba(223,229,215,0.48) 18%,rgba(179,190,173,0.9) 85%,rgba(179,190,173,1) 100%); /* Chrome10+,Safari5.1+ */
    background-color: -o-linear-gradient(top, rgba(252,255,244,0.36) 0%,rgba(223,229,215,0.48) 18%,rgba(179,190,173,0.9) 85%,rgba(179,190,173,1) 100%); /* Opera 11.10+ */
    background-color: -ms-linear-gradient(top, rgba(252,255,244,0.36) 0%,rgba(223,229,215,0.48) 18%,rgba(179,190,173,0.9) 85%,rgba(179,190,173,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(252,255,244,0.36) 0%,rgba(223,229,215,0.48) 18%,rgba(179,190,173,0.9) 85%,rgba(179,190,173,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cfcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */
    padding-top: 20px;
    padding-bottom: 20px;
}

body {
    background-color: #ffffff;
}


/*estilos para el marquee*/


.marquee {
    color: #ff0000;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    Red-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
    font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

    .marquee:hover {
        animation-play-state: paused;
    }

/* Make it move */
@keyframes marquee {
    0% {
        text-indent: 27.5em;
    }

    100% {
        text-indent: -105em;
    }
}

/* ::before was :before before ::before was ::before - kthx */
.microsoft:before, .microsoft::before {
    z-index: 2;
    content: '';
    position: absolute;
    top: -1em;
    left: -1em;
    width: .5em;
    height: .5em;
}

.microsoft:after, .microsoft::after {
    z-index: 1;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
}

/* Style the links */
.vanity {
    color: #ff0000;
    text-align: center;
    font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

    .vanity a, .microsoft a {
        color: #ff0000;
        transition: color .5s;
        text-decoration: none;
    }

        .vanity a:hover, .microsoft a:hover {
            color: #F65314;
        }

.panel-title {
    font-family: font-family:'Arial Rounded MT','Times New Roman', Times, serif;
    ;
    font-size: 22px;
    font-weight: bold;
}

/*parte de los estilos para que sirva el texto frente de la imagen en las actividades y los avisos*/
#imagelightbox {
    position: fixed;
    z-index: 9999;
    -ms-touch-action: none;
    touch-action: none;
}

.BorderBook {
    border: 30px solid transparent;
    -moz-border-image: url(/Content/img/libro.jpg) 80 80;
    width: 100%;
    height: 100%; /* Old firefox */
    -webkit-border-image: url(/Content/img/libro.jpg) 80 80;
    width: 100%;
    height: 100%; /* Safari */
    -o-border-image: url(/Content/img/libro.jpg) 80 80;
    width: 100%;
    height: 100%; /* Opera */
    border-image: url(/Content/img/libro.jpg) 80 80;
    width: 100%;
    height: 100%;
}



.GalleryContainer {
    margin: 5px;
    margin-left: 40px;
    border: 13px #c08430 groove;
    background-color: #325238;
    font-size: 18px;
    font-weight: bold;
    font-style: oblique;
    text-decoration: inherit;
    -moz-box-shadow: inset 0px 0px 7px 0px #000000;
    -webkit-box-shadow: inset 0px 0px 7px 0px #000000;
    box-shadow: inset 0px 0px 7px 0px #000000;
}

.GalleryColor {
    background-color: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background-color: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(99%,rgba(255,255,255,0.99)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background-color: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(255,255,255,0.99) 99%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background-color: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(255,255,255,0.99) 99%,rgba(255,255,255,1) 100%); /* Opera 12+ */
    background-color: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(255,255,255,0.99) 99%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(255,255,255,0.99) 99%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


.LogoCentrado {
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255,255,255,0.99);
}

.BorderLight {
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    -moz-box-shadow: 0px 0px 10px #000000;
    -webkit-box-shadow: 0px 0px 10px #000000;
    box-shadow: 0px 0px 10px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
    opacity: 0.95;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 95);
    /*-ms-filter must come before filter*/
    filter: alpha(opacity = 95);
    /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
    /*All filters must be placed together*/
}


.panel-grey {
    background: rgba(223,229,215,0.48);
    margin-bottom: 20px;
}

.TextoBlanco {
    color: #fff;
}


.lg-container {
    width: 500px;
    margin: 100px auto;
    padding: 20px 40px;
    border: 1px solid #f4f4f4;
    background-color: rgba(255,255,255,0.99);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 2px #aaa;
    -moz-box-shadow: 0 0 2px #aaa;
    box-shadow: 0 0 2px #aaa;
}

.panelblog {
    margin: 25px auto;
    border-color: #8a191b;
    padding: 20px 40px;
    border: 1px solid #8a191b;
    background-color: rgba(255,255,255,0.99);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 2px #aaa;
    -moz-box-shadow: 0 0 2px #aaa;
    box-shadow: 0 0 2px #aaa;
}

.lg-container h1 {
    font-size: 40px;
    text-align: center;
}

.lg-container img {
    padding-left: 90px;
}

#bodyBlog {
    color: #ad1d28;
    /*background-image: url(../img/blogwallpaper.png);*/
    background-repeat: round;
}


/*blog*/


.header-outer {
    background-image: -moz-linear-gradient(top, #b42521, #8a191b);
    background-image: -webkit-linear-gradient(top, #b42521, #8a191b);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b42521), color-stop(1, #8a191b));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#b42521, EndColorStr=#8a191b)";
    background-image: linear-gradient(top, #b42521, #8a191b);
    background: white; /*#911821*/
    ;
}

.header-red {
    background-image: -moz-linear-gradient(top, #b42521, #8a191b);
    background-image: -webkit-linear-gradient(top, #b42521, #8a191b);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b42521), color-stop(1, #8a191b));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#b42521, EndColorStr=#8a191b)";
    background-image: linear-gradient(top, #b42521, #8a191b);
    background: #911821;
}

.SharingPanel {
    padding: 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
}



/*Color de fondo para la paginación*/

.gridViewPaginacion td {
    background-color: #ad1d28;
}

/*Bordes redondeados para la paginacion*/

.gridViewPaginacion > td {
    border-radius: 0px 0px 5px 5px;
}

/*Centramos la tabla que contiene los enlaces para las paginas*/

.gridViewPaginacion table {
    margin: 2px auto;
}

/*El span representa el enlace a la pagina en la que estamos actualmente*/

.gridViewPaginacion span {
    display: block;
    margin: 0;
    padding: 5px;
    width: 25px;
    height: 25px;
    border-radius: 5px, 5px, 5px, 5px;
    background: #b42521;
    color: #c5c5c5;
}

/*Estilo para los enlaces redondos*/

.gridViewPaginacion a {
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 5px;
    width: 25px;
    height: 25px;
    border-radius: 5px, 5px, 5px, 5px;
    background: #d92432;
    color: #c5c5c5;
}

    .gridViewPaginacion a:hover {
        display: block;
        margin: 0;
        padding: 5px;
        width: 25px;
        height: 25px;
        border-radius: 5px, 5px, 5px, 5px;
        background: #c5c5c5;
        color: #000;
        box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
    }


.height-Textbox {
    height: 120px;
}

.Panel-Dashboard {
    padding: 10px;
    border: 1px solid #e8e7e1;
    color: #000000;
}

    .Panel-Dashboard h1 {
        background: #f7f6f0;
        border-bottom: 1px solid #e8e7e1;
        color: #000000;
    }

    .Panel-Dashboard h2 {
        background: #f7f6f0;
        border-bottom: 1px solid #e8e7e1;
        color: #000000;
    }

    .Panel-Dashboard h3 {
        background: #f7f6f0;
        border-bottom: 1px solid #e8e7e1;
        color: #000000;
    }


/*panel slide  en celpnet*/

a:focus {
    outline: none;
}

a.trigger {
    position: absolute;
    background: #88bbd4 url(/Content/img/plus.png) 6% 55% no-repeat;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: -1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color: #fff;
    padding: 4px 12px 6px 24px;
    font-weight: bold;
    z-index: 2;
}

    a.trigger.left {
        left: 0;
        border-top-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    a.trigger.right {
        right: 0;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -moz-border-radius-topleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -webkit-border-top-left-radius: 5px;
    }

    a.trigger:hover {
        background-color: #59B;
    }

a.active.trigger {
    background: #666 url(/Content/img/minus.png) 6% 55% no-repeat;
}

.panel-modal {
    color: #CCC;
    position: absolute;
    display: none;
    background: #000000;
    width: 700px;
    height: auto;
    z-index: 1;
}

.panel.left {
    left: 0;
    padding: 20px 30px 20px 100px;
    border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-bottom-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.panel.right {
    right: 0;
    padding: 20px 100px 20px 30px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-topleft: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -webkit-border-top-left-radius: 15px;
}

.panel p {
    font-size: 16px;
}



.Panel-Circulares {
    padding: 5px;
    border: 2px solid #e8e7e1;
    color: #000000;
    background: #bfbfbf;
}

    .Panel-Circulares h1 {
        border-bottom: 1px solid #e8e7e1;
        color: #000000;
    }

    .Panel-Circulares h2 {
        border-bottom: 1px solid #e8e7e1;
        color: #000000;
    }

    .Panel-Circulares h3 {
        border-bottom: 1px solid #e8e7e1;
        color: #000000;
    }

    .Panel-Circulares h4 {
        border-bottom: 1px solid #e8e7e1;
        color: #000000;
    }

    .Panel-Circulares h3 a {
        color: #000000;
    }

    .Panel-Circulares h4 a {
        color: #000000;
    }

.NoLeido {
    background: #fff;
    font-size: 14px;
}




.Leido {
    background: #efefef;
    color: #424242;
}

.imgLeft{
    margin-right:10px;
}