/*
Theme Name: UGEL
Theme URI: 
Author: Carlos Sanavia Ramirez
Author URI: 
Description: Plantilla de wordpress para la página web de la Ugel Condorcanqui
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ugel
Tags: NA
*/

/** HEADER SUPERIOR IMAGENES **/

.flex-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.item-header-1{
    text-align: left;
}

.item-header-2{
    text-align: center;
    color: #1a1817;
    margin: 0;
    padding: 0;
}

.item-header-3{
    text-align: right;
}

.titulo-logo-ugel{
    margin: 0;
    padding: 0;
}

.titulo-logo-ugel a{
    color: #fff;
    text-shadow: 1px 1px 4px black;
}

.titulo-logo-ugel a:hover{
    color: #fff;
    text-decoration: none;
}



@media all and (max-width: 763px) {
    .flex-header{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
/** FIN DEL HEADER SUPERIOR IMAGENES **/


/** MENU PRINCIPAL CON DISPLAY NONE **/

/* cambiar el color de fondo a la barra */
nav.navbar {
    background-color: #e31e10;
    display:none;
}

.navbar .navbar-nav{
    border-radius: 1px;
}

/* cambiar tipo de letra 
nav.navbar ul.nav li {
}
*/

nav.navbar ul.nav li.menu-item{
    background: #1a1817;
    margin-right: 4px;
}

/* cambiar el color de letra del menú */
nav.navbar ul.nav li.menu-item a.nav-link{
    background: #e75900;
    color: #fff;
}

.navbar .navbar-nav .dropdown-menu {
    background-color: #e75900;
    border-color: #fff;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item {
    color: #ffffff;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #5ca0d3;
}

.navbar .navbar-nav .dropdown-menu .dropdown-divider {
    border-top-color: #5ca0d3;
}
/** FIN DEL MENU PRINCIPAL **/



/** MENU PRINCIPAL ACTIVO **/

.menu-principal{
    background: #f2190a;
    display: flex;
    justify-content: center;
}

.main-nav {
    height: 35px; /* configura a la altura que desea para su menú */
    margin-top: 4px; /* darle un poco de espacio*/
    margin-bottom: 2px; /* darle un poco de espacio*/
    z-index: 100;
    background: #ed3833;
    border-radius: 5px;
}

.main-nav ul   {
    margin-right: 0; 
    padding: 0; 
}

.main-nav li   {
    display: inline-block;
    line-height: 35px; /* Esto ha de ser igual al #main-nav height */
    height: 35px; /* Esto ha de ser igual al #main-nav height */
    margin: 0; 
    padding: 0; /* only needed if you don't have a reset */
    position: relative; /* esto es necesario con el fin de posicionar los submenús */
}

.main-nav li a {
    display: block;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    color: #fff;
    text-decoration: none;
}

.main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav a:hover {
    color: #000;
    background: #ccc;
    border-radius: 5px;
}

.main-nav ul ul { /* esto va dirigido a todos los submenús */
    display: none; /* ocultar todos los submenús de la vista */
    position: absolute;
    top: 35px; /* esto debe ser la misma altura que el menú de nivel superior - height + padding + borders */

}
.main-nav ul ul li { /* esto va dirigido a todos los submenús */
    float: none; /* sobreescribir menu hasta arriba */
    width: 200px; /* establece el ancho que desea para sus submenús. Esto debe coincidir con el valor que pusimos abajo */
}

.main-nav ul ul li a {
    padding-left: 10px; /* dar a nuestros enlaces del submenú un bonito boton */

}

.main-nav ul li ul li a:hover{
    background: #1b7fbd;
}


.main-nav ul li:hover > ul {
    display: block; /* mostrar submenú cuando el ratón pase por encima del menú principal */
    z-index: 100;
    background: #ed3833;
    border: 1px solid #fff;
    border-radius: 5px;
}

.main-nav ul ul li ul {
    left: 150px; /*  esto debe coincidir con el ancho del menú de arriba -- width + padding + borders */
    top: 0; /* esto asegura que el submenú comience en consonancia con el menú superior */
}

@media all and (max-width: 620px) {
    .main-nav{
        display: block;
    }
}
/** FIN DEL MENU PRINCIPAL ACTIVO **/


/*************** FONDO DE PÁGINA WEB *************/


.fondo-web{
    background-image: url();
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    padding: 0;
}

/*************** FIN DEL FONDO DE PÁGINA WEB *************/  



/*************** BANNER CATEGORIAS *************/


.container-categorias{

    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}


.item-categoria{
    width: 670px;
    background-color: rgb(214, 214, 214);
    border: 1px solid rgb(112, 112, 112);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.titulo-categoria{
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 2px black; 
    background-color: #28A745;
}

.categoria-superior{
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}


article.contenido-categoria{
    padding: 0 10px;
    text-align: justify;

}


.item-enlaces-interes{
    width: 280px;
    margin-left: 10px;
    background-color: #FFCB00;
    border: 1px solid rgb(112, 112, 112);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.contenido-enlaces-interes{
    text-align:center;
    padding-bottom: 20px;
}

/*************** FIN BANNER CATEGORIAS *************/


/*************** FOOTER *************/

.container-footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
  }

  .item-footer-top{
    margin-top: 10px;
    padding: 3px 8px;
    color: #fff;
    text-shadow: 1px 1px 2px black; 
  }

  .item-footer{
    text-align:center;
  }

#facebook a{
    background-color: #3b5998;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    width: 50px;
    border-radius: 5px;
  }
#twitter a{
    background-color: #55acee;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    width: 50px;
    border-radius: 5px;
  }

#youtube a{
    background-color: #bb0000;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    width: 50px;
    border-radius: 5px;
  }

#mail a{
    background-color: #e95950;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    width: 50px;
    border-radius: 5px;
  }


/*************** FIN DEL FOOTER *************/


/*************** ESTILOS PÁGINA INDEX *************/

.texto-titulo{
    margin-left: 50px;
    margin-top:20px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    background: linear-gradient(to right, #FFCB00, #f96d15);
    color: #fff;
    text-shadow: 1px 1px 2px black; 
}

.texto-contenido{
    margin-left: 50px;
    margin-top:20px;
    text-align: justify;
    color:#000;
}

/*************** FIN DE ESTILOS PAGINA INDEX *************/



/*************** ESTILOS PAGINACION *************/

.paginacion{
    margin-left: 17px;
}

.wp-pagenavi span.pages{
    background: #ed160e;
    color: #fff;
    margin-right: 0.5em;
    padding: 0.5em;
    border: 1px solid #aaa;
    text-decoration: none;
}

.wp-pagenavi a{
    background: #0D246E;
    color: #fff;
    margin-right: 0.5em;
    padding: 0.5em;
    border: 1px solid #aaa;
    
}

.wp-pagenavi span.current{
    background:#FFCB00;
    color: #fff;
    margin-right: 0.5em;
    padding: 0.5em;
    border: 1px solid #aaa;
}

.wp-pagenavi a:hover{
    text-decoration: none;
    color: #fff;
}

/** FORMULARIO DE CONTACTO **/

.wpcf7 { background-color: #fffcc1; 
    color: #000 ; 
    border: 1px solid #525252;
    -webkit-border-radius: 6px;  /* bordes redondeados */
    -moz-border-radius: 6px; 
     border-radius: 6px;
}

.wpcf7-form { margin-left: 25px; margin-right: 25px; margin-top: 25px; }

.wpcf7-text {
    max-width: 100%;
}

.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required{
    width: 100%;
}

.wpcf7-form-control.wpcf7-submit { background-color: #28A745; width: 150px;}

/* BOTON BUSCAR */
.screen-reader-text{
    display: none;
}


/* Calendario */
/* calendar widget */
.widget_calendar {float: left;width: 100%;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }