/*
Theme Name:         Festival Felina
Theme URI:          https://felina.cl
Author:             CosmonautasCL
Author URI:         https://cosmonautas.cl
Description:        Tema para Wordpress creado con mucho amor para el Festival Felina.
Version:            12.0.1
*/

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

body {background-color: #ff4b33; color: #f4ebdf; font-family: "Instrument Sans"}
h1, h2, h3, h4, h5, h6 {font-weight: bold;}

/* header */
.navbar-brand-box {width: 80%; max-width: 180px; margin: 30px auto 0;}
.navbar-brand {width: 100%;}
header .nav-link {color: white !important; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #ff4b33;}
header .nav-link:hover {border-bottom: 2px solid #222456;}
.navbar>.container-fluid {justify-content: right !important;}

/* index */
.slider {margin-bottom: 60px;}
.cabecera {background-color: #222456; width: 100%;}
.box-cabecera {width: 100%; max-width: 1600px; margin: 0 auto;}
.banners {background-color: #f4ebdf; color: #ff4b33; padding: 60px 0 35px; margin-bottom: 60px;}
.und-banner {background-color: #ff4b33; color: #f4ebdf; padding: 0; text-align: center; margin-bottom: 25px; border-radius: 3px;}
.und-banner:hover {filter: brightness(1.1); box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);}
.banners a {text-decoration: none;}

.entradas {margin-bottom: 40px;}
.entradas h2 {font-style: oblique; margin-bottom: 20px;}
.und-entrada {background-color: #f4ebdf; margin-bottom: 30px; border-radius: 3px; box-shadow: 5px 5px 10px rgba(0, 0, 0, .2);}
.und-entrada-img {width: 100%; height: 300px; overflow: hidden;}
.und-entrada:hover {box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);}
.und-entrada img {width: 100%; height: 300px; object-fit: cover; border-radius: 3px 3px 0 0; display: block; transition: transform 0.4s ease;}
.und-entrada img:hover {transform: scale(1.08);}
.und-entrada-text {padding: 5px 10px;}
.und-entrada-text a {color: #FF4B33; text-decoration: none;}
.und-entrada-text a h5 {font-weight: 500;}

.index .pagination {margin-bottom: 60px;}
.index .pagination p {width: 100%;}
.index .pagination a {color: white; font-weight: bold; text-decoration: none;}
.index .pagination a:hover {color: #ffc0b8;}

/* single */
.single {margin: 15px auto 100px;}
.single a, .single a:active {color: #ffc0b8;}
.single a:hover {color: #fa90a6}
.single-img-principal {width: 80%; max-width: 900px; margin: 0 auto;}
.single-img-principal img {width: 100%; height: 500px; object-fit: cover;} /* height disminuye desde los 992px */
.data-single {text-align: center; margin: 30px auto 15px;}
.title-single {text-align: center; margin-bottom: 40px;}
.content-single {width: 80%; max-width: 900px; margin: 0 auto;}
.page .content-single {margin-top: 40px;}
.entradas-relacionadas {margin-top: 100px;}
.entradas-relacionadas h5 {margin-bottom: 15px;}
.und-relacionada img {margin-bottom: 5px; border-radius: 3px;}
.und-relacionada img:hover {filter: brightness(0.9);}
.und-relacionada a {text-decoration: none;}

/* footer */
footer {background-color: #222456; padding: 60px 0;}
footer .nav {margin-bottom: 30px;}
footer .nav-link {padding: 0; color: white; font-weight: bold;}
footer .nav-link:hover {color: #ffc0b8;}
footer .nav-rrss {display: none;}
.felina-youtube {width: 80%; max-width: 150px; margin: 0 auto;}
.rrss-footer img {width: 30px;}
.rrss-footer li {padding-right: 15px;}
.logo-footer {list-style: none; padding: 0;}
.logo-footer li {width: 80%; max-width: 230px; margin: 0 auto 15px; display: inline-block; vertical-align: top; padding-right: 15px;}

/* archive */
.archive {margin: 30px auto 60px;}
.archive-pagination {font-style: oblique; font-weight: bold;}
.archive-pagination a {color: white;}
.archive-pagination .plink {margin-bottom: 20px;}

/*
*
media query
*
*/

/* desde los 992px en adelante (dispositivos amplios) */
	@media (min-width: 992px) {
		.navbar-nav {flex-direction: inherit;}
		.nav-link {margin-right: 20px; padding-top: 30px;}
	}

/* debajo de los 992px (dispositivos pequeños) */
	@media (max-width: 992px) {
		.cabecera img {height: 350px; object-fit: cover;}
		.single-img-principal img {width: 100%; height: 300px;}
	}