/*------VARIABLES------*/
:root {
	--bg-uno: #FF5722;
    --bg-dos: #FF7043;
    --bg-tres: #f1f3f5;
    --bg-cuatro: #BF360C;
    --bg-cinco: #000000;
    --bg-seis: #12b886;

	--borde-uno: #ced4da;
    --borde-dos: #FF5722;
    --borde-tres: #1971c2;

    --color-uno: #ffffff;
    --color-dos: #343a40;
    --color-tres: #000000;
    --color-cuatro: #FF5722;
    --color-cinco: #1971c2;

    --shadow-uno: 0px 5px 10px -5px #000000, 0px 5px 10px 0px rgba(0,0,0,0);
    --shadow-dos: 0 12px 16px 0 rgba(69,179,157,0.24),0 17px 50px 0 rgba(69,179,157,0.19);
}

/*------BODY------*/
body {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    background: var(--bg-tres);
}

/*------MAIN------*/
.main-header,
.main-section,
.main-footer {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/*------CONTAINER------*/
.container {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    font-size: 16px;
}

/*------ROW------*/
.row {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    position: relative;
    box-sizing: border-box;
}

/*------COL------*/
.col {
    width: 100%;
    position: relative;
    margin: 0;
    box-sizing: border-box;
}

/*------Header------*/
.header-logo {
    font-size: 16px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    padding: 1.875em 10px;
    margin: 0;
}
.header-logo .logo-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 5.2em;
    width: 35%;
    margin: 0;
    box-sizing: border-box;
}
.header-logo .logo-medio {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.4375em;
    width: 30%;
    margin: 0;
    padding-left: 3.125em;
    box-sizing: border-box;
}
.header-logo .logo-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 5.2em;
    width: 65%;
    margin: 0;
    box-sizing: border-box;
}
.header-logo .logo-left img,
.header-logo .logo-medio img,
.header-logo .logo-right img {
    height: 90%;
    width: auto;
}

/*------Sticky-header------*/
.headerFixed {
    position: fixed;
    top: 0;
    max-width: 1200px;
    width: 100%;
}

/*------Header-nav-mobile------*/
.header-nav-mobile {
    display: none;
    width: 115px;
    font-size: 16px;
    box-sizing: border-box;
    padding: 10px;
}
.header-menu-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header-menu-mobile .nav-menu {
    color: var(--color-uno);
    opacity: .8;
    font-size: 1.125em;
    padding-left: 10px;
}
.header-menu-mobile #btn-menu {
    color: var(--color-uno);
    font-size: 2em;
    cursor: pointer;
}

/*------Header-nav------*/
.header-nabvar {
    width: 100%;
    background: var(--bg-uno);
    font-size: 16px;
    box-sizing: border-box;
    z-index: 999;
}
.header-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    background: var(--bg-uno);
    box-sizing: border-box;
    box-shadow: var(--shadow-uno);
}
.navegacion {
    list-style: none;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    z-index: 999;
}
.navegacion li {
    position: relative;
    display: flex;
    padding: 0;
}
.navegacion li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-uno);
    padding: 1.125em 0.875em;
    outline: 0;
    border: 0;
    cursor: pointer;
    height: 100%;
    font-weight: 700;
}
.navegacion li a span {
    padding-left: 0.4em;
}
.navegacion li a:hover {
    background: var(--bg-dos);
}

/*------Resaltar activado------*/
.navegacion li a.activado {
    background: var(--bg-dos);
}

/*------Header-submenu------*/
.submenu {
    box-sizing: border-box;
    list-style: none;
    width: 150%;
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 101%;
    left: 0;
    right: 0;
}
.submenu li {
    box-sizing: border-box;
    width: 100%;
    background: var(--bg-uno);
}
.submenu li:hover {
    border-bottom: 0px solid #1971c2;
}
.submenu li a {
    display: inline-block;
    text-decoration: none;
    outline: 0;
    border: 0;
    color: var(--color-uno);
    padding: 0.9375em 0.75em;
    opacity: .9;
    cursor: pointer;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
}

/*------Header-busqueda-----*/
.buscar-contenedor {
    font-size: 16px;
    flex: 0 0 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0em 10px;
}
.buscar-row {
    padding: 0.125em;
}
.buscar-row #btn-buscar {
    color: var(--color-uno);
    font-size: 1.625em;
    cursor: pointer;
    font-weight: 700;
}
.caja-buscar-content {
    display: none;
    font-size: 16px;
    box-sizing: border-box;
    padding: 6px;
    background: var(--bg-tres);
    position: absolute;
	top: 100%;
	right: 0;
    box-shadow: var(--shadow-uno);
    z-index: 99;
}
.caja-buscar-input {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 380px;
    box-sizing: border-box;
    margin: 0;
}
.caja-buscar-input .input-buscar {
    border: 1px solid var(--borde-uno);
	outline: 0;
	background: transparent #f8f9fa;
    width: 100%;
    padding: 0.625em;
    font-size: 0.9375em;
    border-radius: 5px 0 0 5px;
    z-index: 1;
}
.caja-buscar-input .input-buscar:focus {
    border: 1px solid var(--borde-dos);
}
.caja-buscar-input .btn-search {
    flex: 0 0 30px;
    color: var(--color-uno);
	border: 1px solid var(--borde-dos);
    cursor: pointer;
    padding: 0.625em;
    font-size: 0.9375em;
    background: var(--bg-uno);
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    z-index: 1;
}
.caja-buscar-input .btn-search:hover {
    background: var(--bg-dos);
}
.caja-buscar-input .btn-search:focus {
    outline: none;
}

/*------Footer------*/
.content-footer {
    background: #D84315;
    box-sizing: border-box;
    font-size: 16px;
}

/*------Footer-top------*/
.footer-top {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    position: relative;
    padding: 1.25em 10px;
    box-sizing: border-box;
}
.footer-top .top-item {
    display: flex;
    flex-direction: row;  
    align-items: center;
    justify-content: center;
}
.footer-top .top-item div {
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.footer-top .top-item div span {
    color: var(--color-uno);
    font-size: 1.625em;
}
.footer-top .top-item p {
    width: 65%;
    color: var(--color-uno);
    font-size: 1em;
    margin: 0;
    padding: 0.625em;
}

/*------Iconos-sociales------*/
.iconos-sociales {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    box-sizing: border-box;
    padding: 10px 0;

    border-top: 1px solid var(--borde-uno);
}
.iconos-sociales a {
    display: flex;
	text-decoration: none;
	color: var(--color-uno);
    padding: 0;
    margin: 0;
}
.iconos-sociales a img {
	width: 45px;
	height: 45px;
}

/*------Footer-bottom------*/
.footer-bottom {
    padding: 0.3125em;
    background: var(--bg-cuatro);
    box-sizing: border-box;
}
.footer-bottom-copyring {
    text-align: center;
}
.footer-bottom-copyring p {
	color: var(--color-uno);
	opacity: .8;
	font-size: 1em;
}

/*------Pagina no encontrada ------*/
.noencontrada-row {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    position: relative;
    text-align: center;
    padding: 3em 10px;
    box-sizing: border-box;
}
.noencontrada-row h2 {
    font-size: 4em;
    color: var(--color-dos);
    margin: 0;
    padding-bottom: 0.3125em;
}
.noencontrada-box {
    position: relative;
}
.noencontrada-box h3 {
    font-size: 1.75em;
    color: var(--color-tres);
    margin: 0;
    padding-bottom: 0.375em;
}
.noencontrada-box p  {
    font-size: 1.125em;
    color: var(--color-tres);
    display: flex;
    justify-content: center;
    margin: 0;
}
.noencontrada-box p a {
    margin-left: 0.625em;
    text-decoration: none;
}

/*------Boton ir arriba------*/
.ir-arriba-contenedor {
	display: none;
	border: 2px solid var(--borde-dos);
	cursor: pointer;
	width: 30px;
    height: 30px;
    border-radius: 2px;
	position: fixed;	
	padding: 5px;
	bottom: 65px;
	right: 5px;
    transform: translate(-5px, -5px);
	z-index: 9998;
	background: var(--bg-tres);
}
.ir-arriba-contenedor:hover {
	box-shadow: var(--shadow-dos);
}
.ir-arriba {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	color: var(--color-cuatro);
    font-size: 32px;
}
.ir-arriba:hover {
	color: var(--color-dos);
}

/*------Titulo------*/
.page-titulo {
	width: 100%;
    box-sizing: border-box;
    padding: 2.5em 10px 1.25em 10px;
}
.page-titulo h1 {
    font-size: 1.875em;
    color: var(--color-dos);
    margin: 0;
    border-bottom: 1px solid var(--borde-uno);
}
.title-categoria {
    padding: 2.5em 0 0 0;
}

/*------Mensaje de sin datos------*/
.mensaje-sin-registro {
    padding: 15px 5px;
    text-align: center;
    color: var(--color-dos);
}
.mensaje-sin-registro-busqueda {
    padding: 15px 5px;
}
.mensaje-sin-registro-busqueda p {
    color: var(--color-dos);
}
.mensaje-sin-registro-busqueda span {
    font-weight: bold;
    color: var(--color-dos);
}
.mensaje-sin-registro-busqueda ul {
    color: var(--color-dos);
}

/*------Cargar mas------*/
.ajax-load-noticia {
    box-sizing: border-box;
    padding: 20px 0 20px 0;
    width: 100%;
    text-align: center;
}
.ajax-load {
    box-sizing: border-box;
    padding: 0 0 10px 0;
    width: 100%;
    text-align: center;
}
.ajax-load-noticia .sin-datos,
.ajax-load .sin-datos {
	text-align: center;
	font-size: 14px;
	opacity: .6;
}
.btn-cargar-mas-noticia,
.btn-cargar-mas {
	padding: 10px;
	color: var(--color-cuatro);
	border: 0;
	background: var(--bg-tres);
	font-size: 15px;
	border-radius: 5px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--borde-uno);
}
.btn-cargar-mas-noticia:hover {
    background: var(--bg-tres);
}
.btn-cargar-mas:hover {
    background: var(--bg-tres);
}
.img-cargar-mas-noticia,
.img-cargar-mas {
	font-size: 15px;
	color: var(--color-tres);
	opacity: .6;
}

/*----- Desarrollador -----*/
.info-desarrollador-content {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    padding-right: 5px;
}
.info-desarrollador-span {
    font-size: 9px;
    display: block;
    color: var(--color-uno);
}
.info-desarrollador-link {
    text-decoration: none;
    color: var(--color-uno);
    display: flex;
    align-items: center;
}
.info-desarrollador-img {
    height: 20px;
}

/*------Media Query------*/
@media screen and (max-width: 950px){

    /*------Cargar mas------*/
    .ajax-load-noticia {
        padding: 30px 0 10px 0;
    }

}

@media screen and (max-width: 800px){

    /*------CONTAINER------*/
    .container {
        font-size: 15px;
    }

    /*------Header------*/
    .header-logo {
        font-size: 14px;
    }
    .header-logo .logo-medio {
        height: 2.5em;
    }

    /*------Header-nav-mobile------*/
    .header-nav-mobile {
        display: flex;
    }

    /*------Header-nav------*/
    .navegacion {
        display: flex;
        flex-direction: column;
        width: 320px;
        height: auto;
        position: absolute;
        top: 100%;
        left: -320px;
        transition: left .5s linear;
        background: var(--bg-uno);
        border-top: 1px solid rgba(229,231,233,0.1);
        box-shadow: var(--shadow-uno);
    }
    .navegacion li {
        display: block;
        box-sizing: border-box;
        width: 100%;
        border-bottom: 1px solid rgba(229,231,233,0.1);
    }
    .navegacion li a {
        padding: 0.9375em 0.625em;
    }
    .navegacion li a span {
        padding-left: 0em;
        position: absolute;
        right: 15px;
    }

    /*------Resaltar-activado------*/
    .navegacion li a.activado {
        border-bottom: 0px solid var(--borde-tres);
        border-left: 2px solid var(--borde-tres);
    }

    /*------Header-submenu------*/
    .submenu {
        width: 100%;
        position: relative;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
    }
    .submenu li {
        background: var(--bg-dos);
        border-bottom: 0px solid var(--borde-uno);
    }
    .submenu li a {
        padding: 0.9375em 1.25em;
    }

    /*------Header-busqueda-----*/
    .caja-buscar-content {
        font-size: 16px;
        padding: 6px 10px;
        width: 100%;
    }
    .caja-buscar-input {
        justify-content: flex-start;
        width: 100%;
    }

    /*------Footer------*/
    .content-footer {
        font-size: 14px;
    }
    .footer-top .top-item div {
        width: 20%;
    }
    .footer-top .top-item p {
        width: 80%;
    }

    /*------Iconos-sociales------*/
    .iconos-sociales {
        width: 90%;
    }

}

@media screen and (max-width: 640px){
   /*------Header------*/
   .header-logo {
        font-size: 12px;
    }
    .header-logo .logo-left img,
    .header-logo .logo-medio img,
    .header-logo .logo-right img {
        height: 80%;
    }

    /*------Cargar mas------*/
    .ajax-load-noticia {
        padding: 30px 0 0px 0;
    }

}

@media screen and (max-width: 480px){

    /*------Header------*/
   .header-logo {
        font-size: 10px;
    }

    /*-----Footer-----*/
    .footer-top .top-item div {
        width: 15%;
    }
    .footer-top .top-item p {
        width: 85%;
    }

    /*------Pagina no encontrada------*/
    .noencontrada-contenedor {
        font-size: 14px;
    }
    
}

@media screen and (max-width: 380px){
    /*------Header logo------*/
    .header-logo {
        font-size: 8px;
    }

}