:root{
    --main-green: #00A859;
    --main-text: #00190E;
    --text-grey: #00190E;
    --white: #ffffff;
    --text-milk: #FFF2CC;
    --light-brown: #FFE081;
	--footer: #006636;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: #ffffff;
    overflow-x: hidden;
    color: var(--main-text);
    font-family: 'DM Sans', sans-serif;
}

a{
    text-decoration: none;
}

.main-body{
    margin: 26px 72px;
}

.sub-menu{
    display: flex;
    justify-content: space-between;
}

.menu-date span{
    font-size: 12px;
    color: var(--main-text);
}

.menu-social-search{

    display: flex;
    justify-content: space-between;
}

.menu-search{
    margin-right: 10px;
}

.menu-search button{
    background: transparent;
    border: none;
}

.menu-social div{
   display: inline-block;
   margin-right: 16px;

}

/* Navbar  */


.hrnavbar{
	background: var(--main-green);
	top: 10px;
	z-index: 5;
	width: 100%;
	padding: 21px 48px;
	margin-top: 16px;

}
.hrnavbar .nav__content{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hrnavbar .menu-list{
	display: inline-flex;
}

.nav__content{
	max-width: 1250px;
	margin: auto;
	padding: 0px 0px;

}

.nav__logo img{
	width: 160px;
	height: 32px;
}

.menu-list li{
	list-style: none;
}

.menu-list li .active-nav{
	color: #fff;
	border-bottom: 1px solid #fff;
}

.menu-list li a {
	font-size: 15px;
	font-weight: normal;
	margin-right: 40px;
	transition: all 0.3s ease;
	text-decoration: none;
	letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0.9;
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0rem;
}

.menu-icon{
	color: var(--main-text);
	cursor: pointer;
	font-size: 20px;
	display: none;
}

.menu-icon.cancel-btn{
	position: absolute;
	top: 20px;
	right: -10px;

}

.menu-list-sub{
	margin-left: 30px;
}

.menu-list-sub span{
	color: #F2F2F2;
}

.menu-list-sub-login{
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 500;
	margin-right: 10px;
}

.menu-list-sub-register{
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 500;
	background: #3671E9;
	padding: 15px 25px;
	border-radius: 5px;
	margin-left: 10px;

}

.menu-list-sub-login:hover, .menu-list-sub-register:hover{
	color: #fff;
}

.menu-list-subsribe{
	font-size: 15px;
	font-weight: 500;
	color: var(--light-brown);
	opacity: 0.9;
	border: 1px solid var(--light-brown);
	padding: 10px 32px;
	border-radius: 5px;
}

.menu-list-subsribe:hover{
	color: var(--light-brown);
}

@media (max-width: 768px) {

	.menu-icon{
		display: block;
	}
	.hrnavbar .menu-list{
		position: fixed;
		display: block;
		top: 0;
		left: -100%;
		height: 100vh;
		width: 100%;
		background: var(--white);
		padding: 40px 0;
		background-repeat: no-repeat;
		background-position: right;
		transition: all 0.3s ease;
		z-index: 900;
		border-radius: 0px 0px 30px 30px;

	}

	.hrnavbar.show .menu-list{
		left: 0%;
	}

	.hrnavbar .menu-list li{
		margin: 30px;
		text-align: center;
	}

	.hrnavbar .menu-list li a{
		color: var(--main-text);
		font-size: 20px;
		font-weight: 600;
		text-decoration: none;
		transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		font-weight: normal;
	}

	.hrnavbar.show .menu-list li a{
		margin-left: 0px;
	  }
}

/* feature post */

.featured-post{
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 14.86%, #000000 104.83%)
         ,url(../img/market-woman.png);
    height: 454px;
    width: 100%;
    margin-top: 24px;
    border-radius: 5px;
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.featured-post-large{
	position: relative;
	top: 159px;
}

.hot-topic{
	font-size: 12px;
	color: var(--white);
}

.hot-topic span{
   margin-left: 8px;
}

.featured-post-large-title{
	width: 600px;
	margin-top: 32px;
	max-width: 100%;
}

.featured-post-large-title h2{
	font-size: 48px;
	line-height: 52.8px;
	font-weight: 600;
	color: var(--white);
	font-family: 'recoleta';
}

.featured-post-large-time{
	font-size: 12px;
	font-weight: 500;
	color: var(--text-milk)
}

.featured-post-list{
	margin-top: 100px;
}

.featured-post-list-head span{
	font-size: 12PX;
	font-weight: 500;
	line-height: 16px;
	color: var(--white);
	opacity: 0.7;
	text-transform: uppercase;
}

.featured-post-list-content{
	margin-top: 16px;
	height: 222px;
    overflow-y: auto;
}

.featured-post-list-content > div{
	margin-bottom: 24px;
}

.featured-post-list-content div a{
	line-height: 20px;
	color: var(--white);
}


.featured-post-list-content > div > a > h3{
	margin-bottom: 0px;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	font-family: 'recoleta';
}

.featured-post-list-time{
	color: var(--text-milk);
	font-size: 10px;
	font-weight: normal;
	line-height: 13px;
	opacity: 0.7;
	margin-top: 6px;
}

.featured-post-margin{
	margin-bottom: 24px;
}

/* Works on Firefox */
/* .featured-post-list-content{
	scrollbar-width: thin;
	scrollbar-color: blue orange;
  } */

  /* Works on Chrome, Edge, and Safari */
  .featured-post-list-content::-webkit-scrollbar {
	width: 5px;
  }

  .featured-post-list-content::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.3);
	opacity: 0.3;
	border-radius: 20px;
  }

  .featured-post-list-content::-webkit-scrollbar-thumb {
	background-color: var(--light-brown);
	border-radius: 20px;
  }

/* Homepage post & sidebar */

.no-name{
	margin-top: 50px;
}

.content-list-wrapper{
	margin-top: 40px;
}

.content-list-head{
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.content-list-title h2{
	font-size: 32px;
	font-weight: 600;
	line-height: 35.2px;
	font-family: 'recoleta';
	opacity: 0.8;

}

.content-list-cat a{
	color: var(--main-green);
	position: relative;
    top: 5px;
}

.content-list-cat > a > i{
	font-size: 10px;
	font-weight: 600;
}

.content-info, .content-info-bio{
	margin-bottom: 30px;
}


@media (min-width: 768px){
	.content-info-hide{
		display: none!important;
	}
}


.content-info-img img{
	width: 100%;
	filter: drop-shadow(0px 0px 4px rgba(136, 170, 153, 0.25));
	border-radius: 5px;
	height: 180px;
}

.content-info-text{
	margin-top: 12px;
}

.content-info-text h3{
	color: var(--main-text);
	font-weight: bold;
	font-size: 16px;
	line-height: 130%;
	margin-bottom: 0px;
	letter-spacing: -0.01em;
	text-transform: none;
	white-space: normal;
}

.content-info-text a{
	text-transform: uppercase;
	color: var(--main-green);
	letter-spacing: 0.01em;
	font-size: 11px;
	font-weight: 500;
}

.content-info-text p{
	font-size: 12px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: var(--main-text);
	opacity: 0.4;
	margin-top: 8px;
	white-space: normal;
}

.content-list-body{
	overflow: auto;
	white-space: nowrap;
}

.content-info{
	display: inline-block;
	width: 270px;
    margin-right: 20px;
}

.content-info-bio:last-child{
	margin-right: 0px;
}

/* Landing page sidebar */

.sidebar-content{
	margin-bottom: 24px;
}

.sidebar-on-this-day{
	background-image:
        linear-gradient(180deg, rgba(0, 25, 14, 0) 33.52%, #00190E 105.24%)
         ,url(../img/on-this-day.png);
    height: 577px;
	border-radius: 5px;
	padding-left: 24px;
	padding-right: 24px;
	background-repeat: no-repeat;
	background-size: cover;
}

.sidebar-on-this-day a{
	position: relative;
	top: 350px;
}

.sidebar-on-this-day a span, .sidebar-gallery a span{
	font-weight: 500;
	font-size: 20px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: #00A859;
	text-transform: uppercase;

}

.sidebar-on-this-day a h3, .sidebar-gallery a h3{
	font-weight: bold;
	font-size: 24px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: #FFFFFF;
	margin-top: 16px;
	margin-bottom: 8px;
}

.sidebar-on-this-day a p, .sidebar-gallery a p{
	font-weight: normal;
	font-size: 14px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: #FFFFFF;
	opacity: 0.5;
}

.sidebar-gallery{
	background-image:
        linear-gradient(180deg, rgba(0, 25, 14, 0) 33.52%, #00190E 105.24%)
         ,url(../img/on-this-day.png);
    height: 395px;
	border-radius: 5px;
	padding-left: 24px;
	padding-right: 24px;
	background-repeat: no-repeat;
	background-size: cover;
}

.sidebar-gallery a{
	position: relative;
	top: 260px;
}

/* Editorial */
.editorial{
	margin-top: 45px;
}

.editorial-heading{
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.editorial-heading-title h2{
	font-weight: 600;
	font-size: 32px;
	line-height: 110%;
	color: var(--main-green);
	font-family: 'recoleta';
}

.editorial-heading-hsnj{
	display: flex;
}

.editorial-heading-cat{
	margin-right: 20px;
}

.editorial-heading-cat select{
	background: rgba(0, 25, 14, 0.05);
	border-radius: 5px;
	padding: 14px 15px;
	border: none;
	color: var(--main-text);
	opacity: 0.6;
}

.editorial-content-list{
	margin-bottom: 30px;
}

.editorial-content-list-flex{
	display: flex;
	justify-content: space-between;
}

.editorial-content-list span{
	position: absolute;
	z-index: 20;
	background: var(--main-green);
	font-size: 11px;
	color: var(--white);
	font-weight: 500;
	line-height: 130%;
	letter-spacing: 0.01em;
	padding: 4px 10.9px;
	border-radius: 30px;
	margin-top: 12px;
	text-transform: uppercase;
}

.editorial-content-history-cat{
	position: absolute;
	z-index: 20;
	background: var(--main-green);
	font-size: 11px;
	color: var(--white);
	font-weight: 500;
	line-height: 130%;
	letter-spacing: 0.01em;
	padding: 4px 10.9px;
	border-radius: 30px;
	margin-top: 12px;
	text-transform: uppercase;
}

.editorial-content-list img{
	filter: drop-shadow(0px 0px 4px rgba(136, 170, 153, 0.25));
	border-radius: 5px;
	width: 100%;
}

.editorial-content-list p{
	font-weight: bold;
	font-size: 16px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: var(--main-text);
	opacity: 0.7;
	margin-top: 12px;
}

/* Pagination */

.pagination-container{
	margin-top: 40px;
	margin-bottom: 60px;
}

.page-link{
	border: none;
	padding: 10px 15px;
	color: var(--main-text);
	font-size: 15px;
	font-weight: 500;
	opacity: 0.8;
}

.page-link .lni{
	font-weight: bold;
}

.page-link:hover{
	border-radius: 10px;
	color: var(--main-text);
}

.page-item:not(:first-child) .page-link {
    margin-left: 10px;
}

.page-item.active .page-link{
	background: var(--light-brown);
	color: var(--main-text);
	font-weight: 500;
	border-radius: 10px;
}

/* History & Culture content */

.history-culture-wrapper{
	margin-top: 45px;
}

.history-culture-heading{
	text-align: center;
}

.history-culture-heading h2{
	font-weight: 600;
	font-size: 32px;
	line-height: 110%;
	text-align: center;
	color: var(--main-green);
	margin-bottom: 10px;
	font-family: 'recoleta';
}

.history-culture-heading p{
	font-weight: normal;
	font-size: 16px;
	line-height: 21px;
	text-align: center;
	color: var(--main-text);
}

.history-culture-content{
	margin-top: 48px;
}

.history-culture-list img {
	width: 100%;
	border-radius: 5px;
	filter: drop-shadow(0px 0px 4px rgba(136, 170, 153, 0.25));
	height: 209px;
}

.history-culture-list{
	margin-bottom: 24px;
}

.history-culture-list h3{
	font-weight: bold;
	font-size: 18px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: #00190E;
	opacity: 0.7;
	padding-top: 16px;
	margin-bottom: 0px;
}

.history-culture-list p{
	font-weight: normal;
	font-size: 12px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: #00190E;
	opacity: 0.5;
	padding-top: 6px;
}

/* Gallery Category */
.gallery-cat{
	margin-top: 45px;
}

.gallery-cat-heading{
	margin-bottom: 25px;
	display: flex;
	justify-content: space-between;
}

.gallery-cat-heading-title h2{
	font-weight: 600;
	font-size: 32px;
	line-height: 110%;
	color: var(--main-green);
	font-family: 'recoleta';
}

.gallery-select-cat select{
	background: rgba(0, 25, 14, 0.05);
	border-radius: 5px;
	padding: 14px 20px;
	border: none;
}

.gallery-cat-content-list{
	margin-bottom: 30px;
	position: relative;
}

.gallery-category-link{
	position: absolute;
}

.gallery-cat-content-list img{
	width: 100%;
	border-radius: 5px;
	filter: drop-shadow(0px 0px 4px rgba(136, 170, 153, 0.25));
	height: 180px;
}

.gallery-cat-content-list p{
	font-weight: bold;
	font-size: 16px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: var(--main-text);
	opacity: 0.7;
	padding-top: 12px;
}

/* Naijabiography TV category */

.tv-cat{
	margin-top: 45px;
}

.tv-cat-heading{
	display: flex;
	justify-content: space-between;
	margin-bottom: 25px;
}

.tv-cat-heading-title h2{
	font-weight: 600;
	font-size: 32px;
	line-height: 110%;
	color: var(--main-green);
	font-family: 'recoleta';
}

.tv-cat-heading-title p{
	font-size: 16px;
	line-height: 21px;
	text-align: center;
	color: var(--main-text);
	opacity: 0.8;
}

.tv-player-wrapper{
	background: var(--light-brown);
	padding: 40px;
	border-radius: 10px;
	margin-top: 20px;
}

.tv-player-wrapper-heading{
	display: flex;
	justify-content: space-between;
	margin-bottom: 23px;
}

.tv-player-wrapper-heading h2{
	font-weight: 600;
	font-size: 32px;
	line-height: 110%;
	color: var(--main-text);
	opacity: 0.8;
	font-family: 'recoleta';
}

.tv-player-wrapper-heading a{
	font-weight: 500;
	font-size: 16px;
	line-height: 110%;
	color: var(--footer);
	position: relative;
    top: 9px;
	position: relative;
    margin-top: -5px;
}

.tv-player-wrapper-heading > a > i{
	font-size: 10px;
	font-weight: 600;
}

.tv-player img{
	border-radius: 10px;
	width: 100%;
	height: 582px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.tv-player{
	position: relative;
}

.tv-player-overlay{
	background: #00190E;
	opacity: 0.6;
	border-radius: 10px;
	width: 100%;
	position: absolute;
	top: 0px;
	height: 582px;
}

.tv-player-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.tv-content-list-wrapper{
	margin-top: 56px;
}

.tv-content-list-head h2{
	font-weight: 600;
	font-size: 32px;
	line-height: 110%;
	color: #00190E;
	opacity: 0.8;
	padding-bottom: 20px;
	font-family: 'recoleta';
}

.tv-content-list{
	margin-bottom: 24px;
}

.tv-content-list-img img{
	width: 100%;
	border-radius: 10px;
	height: 209px;
}

.tv-content-list-img{
	position: relative;

}

.tv-content-list-img-overlay{
	position: absolute;
	background: #00190E;
	opacity: 0.6;
	border-radius: 10px;
	width: 100%;
	height: 209px;
	top: 0px;
}

.tv-content-list-img-overlay:hover{
	opacity: 0.5;
}

.tv-content-list-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.tv-content-list p{
	color: var(--main-text);
	font-size: 18px;
	font-weight: bold;
	line-height: 130%;
	letter-spacing: -0.01em;
	opacity: 0.8;
	padding-top: 18px;
}

/* On This Day */
.on-this-day-head-info h3{
	font-weight: 600;
	font-size: 30px;
	line-height: 110%;
	color: rgba(0, 25, 14, 0.8);
	font-family: 'recoleta';
}

.on-this-day-head-info span{
	color: var(--main-green);
}

.on-this-day-head-info p{
	font-weight: 600;
	font-size: 22px;
	line-height: 110%;
	color: rgba(0, 25, 14, 0.8);
	opacity: 0.6;
	text-transform: uppercase;
	margin-bottom: 20px;
	margin-top: 18px;
}

.on-this-day-heading{
	background-image:
	linear-gradient(180deg, rgba(0, 0, 0, 0) -34.09%, #000000 141.78%)
	 ,url(../img/unsplash_q4ZBGVzJskE.png);
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 5px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 36px;
	margin-bottom: 24px;
	padding-top: 6px;
}

.on-this-day-heading-top{
	display: flex;
	justify-content: space-between;
}

.on-this-day-heading-year{
	background-color: var(--light-brown);
	padding: 10px 16px;
	border-radius: 5px;
}

.on-this-day-heading-year a{
	color: var(--main-green);
	font-weight: 600;
	font-size: 18px;
}

.on-this-day-heading-title{
	margin-top: 152px;
}

.on-this-day-heading-title h2{
	color: var(--white);
	font-weight: 600;
	font-size: 40px;
	line-height: 120%;
	font-family: 'recoleta';
}

.on-this-day-content{
	margin-top: 24px;
}

.on-this-day-content p{
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 150%;
	color: var(--main-text);
	opacity: 0.7;
}

.on-this-day-content a{
	color: var(--main-green);
}

.also-on-this-day{
	margin-top: 69px;
}

.also-on-this-day-title{
	font-weight: 500;
	font-size: 15px;
	line-height: 150%;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.also-on-this-day-content-list{
	border-bottom: 1px solid rgba(0, 25, 14, 0.1);
	border-width: 50%;
	padding: 20px 0px;
}

.also-on-this-day-content-list:last-child{
	border-bottom: none;
}

.also-on-this-day-content-list h3{
	font-weight: 600;
	font-size: 24px;
	line-height: 120%;
	color: var(--main-green);
	font-family: 'recoleta';
}

.also-on-this-day-content-list a{
	font-weight: 500;
	font-size: 15px;
	line-height: 140%;
	color: var(--main-text);
	opacity: 0.9;
}

.on-this-day-sidebar{
	margin-top: 10px;
}

.on-this-day-sidebar h2{
	font-weight: 600;
	font-size: 22px;
	line-height: 110%;
	opacity: 0.6;
	color: rgba(0, 25, 14, 0.8);
	text-transform: uppercase;
	padding-bottom: 25px;
}

.on-this-day-sidebar-first-content img{
	border-radius: 5px;
	margin-bottom: 15px;
	filter: drop-shadow(0px 0px 4px rgba(136, 170, 153, 0.15));
	width: 100%;
}

.on-this-day-sidebar-first-content h5{
	font-weight: 500;
	font-size: 11px;
	line-height: 130%;
	letter-spacing: 0.01em;
	color: var(--main-green);
	margin-bottom: 0px;
}

.on-this-day-sidebar-first-content h3{
	font-size: 18px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: var(--main-text);
	opacity: 0.7;
	margin-top: 6px;
	margin-bottom: 0px;
}

.on-this-day-sidebar-first-content p{
	font-size: 14px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: var(--main-text);
	margin-top: 6px;
}

.on-this-day-sidebar-second-content-list{
	display: flex;
	margin-bottom: 29px;
}

.on-this-day-sidebar-second-year{
	background: var(--light-brown);
	margin-right: 16px;
	width: 74px;
	height: 40px;
	border-radius: 5px;
	text-align: center;
    padding-top: 9px;
}

.on-this-day-sidebar-second-year a{
	font-weight: 600;
	font-size: 18px;
	line-height: 110%;
	color: var(--main-green);
	text-align: center;
}

.on-this-day-sidebar-second-content h4{
	font-weight: bold;
	font-size: 18px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: var(--main-text);
	opacity: 0.7;
	margin-bottom: 0px;
}

.on-this-day-sidebar-second-content h5{
	font-size: 14px;
	line-height: 130%;
	letter-spacing: -0.01em;
	color: var(--main-text);
	opacity: 0.5;
	margin-top: 5px;
}

/* Biography Content */

.biography-content{

}

.back-to-biography a{
	font-weight: 500;
	font-size: 16px;
	line-height: 21px;
	text-transform: uppercase;
	color: var(--main-text);
	opacity: 0.8;
}

.biography-content-head{
	background-image:
	linear-gradient(180deg, rgba(0, 0, 0, 0) -34.09%, #000000 141.78%)
	 ,url(../img/beyonces.png);
	border-radius: 5px;
	height: 375px;
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 40px;
	margin-top: 42px;
	margin-bottom: 32px;
}

.biography-content-head-top{
	display: flex;
	justify-content: space-between;
}

.biography-content-head-cat a{
	background: var(--main-green);
	padding: 12px 24px;
	border-radius: 10px;
	color: var(--white);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
}

.biography-content-head-info{
	margin-top: 161px;
}

.biography-content-head-info-artist h2{
	font-size: 48px;
	font-weight: 600;
	line-height: 120%;
	color: var(--white);
	margin-bottom: 4px;
	font-family: 'recoleta';
}

.biography-content-head-info-content{
	display: flex;
	justify-content: space-between;
}

.biography-content-head-info-content span{
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	color: var(--white);
	opacity: 0.6;
}

.content-grid-div{
	display: grid;
	gap: 1rem;
	grid-template-columns: 3.8fr 1.2fr;
}


.display-pc-no{
	display: none;
}

@media screen and (max-width: 768px){
	.content-grid-div{
		display: block;
	}

	.display-mobile-no{
		display: none;
	}

	.display-pc-no{
		display: block;
	}
}

.biography-info-card{
	border: 1px solid #ced4da;
	border-radius: 5px;
	padding: 20px;
}

.biography-info-card .image{
	text-align: center;
}

.biography-info-card .image img{
	width: 200px;
	border-radius: 5px;
}

.biography-info-card .artist {
	text-align: center;
	padding: 12px 0;
}

.biography-info-card .artist h2{
	font-size: 21px;
	font-weight: 700;
}

.biography-info-card .content{
	border-top: 1px solid #00A859;
	padding-top: 10px;
}

.biography-info-card .content .fact-name{
	margin-bottom: 10px;
}

.biography-info-card .content .fact-name .mx-textline{
	font-size: 15px;
	font-weight: 600;
}

.biography-info-card .content .fact-name .mx-textline span{
	font-weight: 400;
	font-size: 14px;
}

.toc{
	background: #fdfdfd;
	border: 1px solid rgb(177, 174, 174);
	padding: 10px;
	width: 400px;
	margin: 20px 0px;
	border-radius: 5px;
	max-width: 100%;
}

.toc .title h3{
	font-size: 18px;
	text-align: center;
}

.toc ul{
	list-style: none;
	padding-left: 0rem;
}

.toc ul .toc-level{
	padding-bottom: 5px;
	font-size: 14px;
}

.toc ul .toc-level a{
	color: var(--main-green);
	font-weight: 100;

}

.toc ul .toc-level a .toc-number{
	color: var(--text-grey);
}

.toc ul .toc-level a .toc-title{
	padding-left: 5px;
}

.sub-toc{
	margin-left: 20px;
}





.biography-content-information{
	margin-bottom: 50px;
}

.biography-content-information p{
	font-size: 17px;
	line-height: 22px;
	font-weight: normal;
	color: var(--main-text);
	opacity: 0.8;
}

.editorial-h2-title h2{
	font-weight: 600;
	font-size: 32px;
	line-height: 110%;
	color: var(--main-green);
	font-family: 'recoleta';
}

.bio-heading-hsnj{
	display: flex;
	justify-content: space-between;
}

.bio-heading-select{
	background: rgba(0, 25, 14, 0.05);
	padding: 14px 20px;
	border: none;
	display: inline-block;
	border-radius: 5px;
}

.bio-heading-select select{
	background: none;
	border: none;
	color: var(--main-text);
	opacity: 0.6;
}

.bio-heading{
	margin-bottom: 24px;
}

.biography-content-related{
	margin-top: 20px;
}

.biography-content-related-title{
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 20px;
}

/* Social Share Button */

.social-share-btn{
	display: flex;
	margin-bottom: 32px;
}

.facebook-share-btn{
	background: #3B5998;
	padding: 14px 30px;
	margin-right: 16px;
	border-radius: 5px;
	color: var(--white);
	font-size: 14px;
}

.facebook-share-btn i{
	margin-right: 10px;
}

.twitter-share-btn{
	background: #1DA1F2;
	padding: 14px 30px;
	margin-right: 16px;
	border-radius: 5px;
	color: var(--white);
	font-size: 14px;
}

.twitter-share-btn i{
	margin-right: 10px;
}

.whatsapp-share-btn{
	background: #25D366;
	padding: 14px 30px;
	margin-right: 16px;
	border-radius: 5px;
	color: var(--white);
	font-size: 14px;
}

.whatsapp-share-btn i{
	margin-right: 10px;
}

.link-share-btn{
	background: var(--white);
	padding: 14px 30px;
	margin-right: 16px;
	border-radius: 5px;
	color: #BFA5A3;
	font-size: 14px;
	border: 1px solid #BFA5A3;
}

.link-share-btn i{
	margin-right: 10px;
}

.share-on{
	position: relative;
	margin-top: 15px;
	margin-right: 24px;
	color: var(--main-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 25px;
	opacity: 0.6;
}

/* Search Form Page */
.modal-header{
	border: none;
}

.search-form-wrapper{
	padding: 100px;
	text-align: center;
}

.search-form-wrapper h2{
	font-size: 40px;
	margin-bottom: 50px;
	font-family: 'recoleta';
	font-weight: 600;
	color: var(--white);
}

.search-form-wrapper form input{
	padding: 20px;
	border-radius: 5px;
	border: none;
	width: 100%;
}

.search-form-wrapper form input:focus{
	outline: none;
	border: none;
}

.search-form-wrapper form button{
	background: var(--light-brown);
	padding: 20px 25px;
	border: none;
	border-radius: 5px;
}

.search-form-content{
	background-color: var(--white);
	width: 80%;
	display: flex;
	margin: 0 auto;
	border-radius: 5px;
	padding: 3px;
}

.modal-content{
	background: var(--main-green);
}
















/* Footer */
footer{
	background: var(--footer);
	padding: 43px 72px;
}

.footer-newsletter{

}

.footer-newsletter-text h3{
	font-size: 32px;
	font-weight: 600;
	line-height: 110%;
	letter-spacing: 0.01em;
	color: var(--white);
	font-family: 'recoleta';
}

.footer-newsletter-text p{
	font-size: 14px;
	opacity: 0.8;
	line-height: 150%;
	color: var(--white);
}

.footer-newsletter-form{
	text-align: left;
}

.footer-newsletter-form form input{
	width: 495px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-sizing: border-box;
	border-radius: 5px;
	color: var(--white);
	opacity: 0.9;
	font-size: 14px;
	height: 56px;
	padding-left: 24px;
	max-width: 100%;
	margin-bottom: 12px;
}

.footer-newsletter-form form input:focus{
	outline: none;

}

.footer-newsletter-form form button{
	background: var(--light-brown);
	border: none;
	padding: 16px 39px;
	border-radius: 5px;
	color: var(--main-text);
	font-size: 16px;
	font-weight: 500;
}

footer hr{
	opacity: 0.4;
	border: 1px solid #FFFFFF;
}

.footer-links{
	margin-top: 42px;
}

.footer-links-list strong{
	font-weight: 600;
	font-size: 16px;
	line-height: 110%;
	letter-spacing: 0.01em;
	color: #FFFFFF;
	opacity: 0.8;
	text-transform: uppercase;
}

.footer-links-list ul{
	margin-top: 40px;
	list-style: none;
    padding-left: 0px;
}

.footer-links-list ul li{
	padding-bottom: 24px;
}

.footer-links-list > ul > li > a{
	color: var(--white);
	opacity: 0.8;
	font-size: 14px;
}

.footer-hr{
	display: none;
}

/*Mobile Media Queries */

@media (max-width: 768px){
	.main-body {
		margin: 0px 0px;
	}

	.mobile-main-body{
		margin: 0px 20px;
	}

	/* Menu */
	.hrnavbar{
		padding: 21px 20px;
		margin-top: 0px;

	}

	.nav__content button{
		background: none;
		border: none;
	}

	.sub-menu{
		display: none;
	}

	.menu-list-subsribe {
		font-size: 15px;
		font-weight: 500;
		color: var(--main-green);
		opacity: 0.9;
		border: 1px solid var(--main-green);
		border-radius: 5px;
		width: 100%;
		text-align: center;
		padding: 16px 56px;
	}

	.menu-list-subsribe span{
		color: var(--main-green);
	}


	.menu-list-subsribe:hover{
		color: var(--main-green);
	}

	.menu-list-sub{
		margin-left: 0px;
		text-align: center;
	}
	/* Featured Post */

	.featured-post{
		height: 328px;
	}

	.featured-post-large-title h2{
		font-size: 24px;
		font-weight: 600;
		line-height: 110%;
	}

	.content-list-title h2{
		font-size: 20px;
	}

	.content-list-cat a{
		font-size: 12px;
		font-weight: 500;
	}

	.content-info-text h3{
		font-size: 14px;
	}

	.content-info-text a{
		font-size: 10px;
	}


	.sidebar-on-this-day a span, .sidebar-gallery a span{
		font-size: 16px;
	}

	.sidebar-on-this-day a h3, .sidebar-gallery a h3{
		font-size: 20px;
	}

	.sidebar-on-this-day a p, .sidebar-gallery a p{
		font-size: 12px;
	}

	.tv-player-wrapper-heading h2{
		font-size: 20PX;
	}

	.tv-player-wrapper-heading a{
		font-size: 12px;
	}




	.tv-player-wrapper{
		padding: 16px;
	}

	.tv-player img, .tv-player-overlay{
		height: 203px;
	}

	.tv-player-wrapper{
		margin-bottom: 56px;
	}

	.editorial-heading-title h2{
		font-size: 20px;
	}

	.editorial-heading-cat span{
		display: none;
	}

	.editorial-heading-cat select{
		background: none;
		opacity: 0.8;
		padding: 0px;
		font-size: 12px;
	}

	.editorial-content-list span{
		font-size: 11px;
	}

	.on-this-day-head-info h3{
		font-size: 20px;
	}

	.on-this-day-head-info p{
		font-size: 16px;
		margin-top: 32px;
	}

	.on-this-day-heading{
		padding-top: 16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.on-this-day-heading-year{
		padding: 8px 16px;
	}

	.on-this-day-heading-year a{
		font-size: 13px;
	}

	.on-this-day-heading-title h2{
		font-size: 20px;
		line-height: 120%;
	}

	/* Search Modal */
	.search-form-wrapper{
		margin-top: 50px;
		padding: 10px;
	}


	/* Social Share */

	.share-on{
		margin-top: 0px;
		margin-right: 5px;
		font-size: 12px;
	}

	.facebook-share-btn, .twitter-share-btn, .whatsapp-share-btn, .link-share-btn{
		padding: 12px 18px;
		margin-right: 14px;
	}

	.facebook-share-btn span{
		display: none;
	}

	.twitter-share-btn span{
		display: none;
	}

	.whatsapp-share-btn span{
		display: none;
	}

	.link-share-btn span{
		display: none;
	}

	.facebook-share-btn i, .twitter-share-btn i, .whatsapp-share-btn i, .link-share-btn i{
		margin-right: 0px;
	}

	/* On this day content */

	.on-this-day-content p{
		font-size: 14px;
		text-align: justify;
	}

	.also-on-this-day-title{
		font-size: 12px;
		font-weight: 500;
	}

	.also-on-this-day-content-list h3{
		font-size: 18px;
	}

	.also-on-this-day-content-list a{
		font-size: 13px;
		font-weight: 500;
		opacity: 0.9;
	}

	.on-this-day-sidebar h2{
		font-size: 16px;
		padding-bottom: 14px;
	}

	.on-this-day-sidebar-first-content h3{
		font-size: 15px;
	}

	.on-this-day-sidebar-first-content p{
		font-size: 12px;
	}

	.on-this-day-sidebar-second-year{
		width: 52px;
		height: 32px;
		padding-top: 5px;
	}

	.on-this-day-sidebar-second-year a{
		font-size: 14px;
	}

	.on-this-day-sidebar-second-content h4{
		font-size: 15px;
	}

	.on-this-day-sidebar-second-content h5{
		font-size: 12px;
		margin-top: 1px;
	}

	/* Biography Page */

	.editorial-h2-title h2{
		font-size: 20px;
		color: var(--main-text);
		opacity: 0.8;
		margin-bottom: 24px;
	}

	.bio-heading-select{
		padding: 12px 16px;
	}

	.bio-heading-select select{
		font-size: 13px;
	}

	.biography-content-head{
		margin-top: 26px;
		padding: 16px 16px;
		height: 283px;
	}

	.biography-content-head-cat a{
		font-size: 12px;
		padding: 8px 16px;
	}

	.biography-content-head-info-artist h2{
		font-size: 24px;
	}

	.biography-content-information p{
		font-size: 15px;
		text-align: justify;
	}

	/* TV */
	.tv-cat-heading-title h2{
		font-size: 20px;
	}

	.tv-cat-heading-title p{
		font-size: 12px;
		opacity: 0.8;
		text-align: left;
	}

	.tv-channel img{
		width: 90px;
		height: 32px;
	}

	.tv-player img, .tv-player-overlay{
		height: 332px;
	}

	.tv-content-list-head h2{
		font-size: 24px;
		font-weight: 600;
	}

	.history-culture-heading{
		text-align: left;
	}

	.history-culture-heading h2{
		text-align: left;
		font-size: 20px;
	}

	.history-culture-heading p{
		text-align: left;
		font-size: 12px;
	}

	.history-culture-list h3{
		font-size: 16px;
	}

	/* Sidebar */

	.sidebar{
		margin-top: 30px;
	}


	footer {
		background: var(--footer);
		padding: 43px 20px;
	}

	.footer-logo{
		display: none;
	}

	.footer-newsletter-text h3{
		font-size: 20px;
	}

	.footer-newsletter-text p{
		font-size: 12px;
	}

	.footer-newsletter-form form input{
		height: 50px;
	}

	/* .footer-newsletter-form form button{
		max-width: 100%;
	} */

	.footer-links-list ul li{
		padding-bottom: 20px;
	}

	.footer-links-list ul{
		margin-top: 15px;
	}

	.footer-hr{
		display: block;
	}
}


/* Page not found 404 */
.page-not-found-wrapper{
	text-align: center;
	margin-top: 10px;
	margin-bottom: 50px;
}

.page-not-found-img img{
	width: 500px;
	max-width: 100%;
}

.page-not-found-text{
	margin-top: 30px;
}

.page-not-found-text h3{
	font-weight: 700;
	color: var(--main-green);
}

.page-not-found-text p{
	font-size: 18px;
	color: var(--text-grey);
}

.page-not-found-link{
	margin-top: 30px;
}

.page-not-found-link a{
	background-color: var(--main-green);
	color: var(--white);
	padding: 10px 30px;
	border-radius: 3px;
}

/* Swiper Slide */

.slider-modal-head{
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

.swiper-slide-img{
	width: 1128px;
	height: 513px;
	border-radius: 5px;
	max-width: 100%;
}

.swiper-button-next, .swiper-button-prev{
	color: var(--white);
}

@media (max-width: 768px){
	.swiper-slide-img{
		height: 400px;
		margin-top: 20px;
	}
}

.modal-header-slide{
	display: flex;
	justify-content: space-between!important;
}

.modal-header-slide h3{
	font-family: 'recoleta';
	font-size: 28px;
	font-weight: bold;
}
@media (max-width: 768px){
	.modal-header-slide h3{
		font-size: 18px;
	}

	.modal-header-btn a{
		margin-right: 5px!important;
		padding: 10px 20px!important;
	}

}

.modal-header-btn a{
	background: var(--main-green);
	padding: 18px 40px;
	font-size: 15px;
	border-radius: 5px;
	color: var(--white);
	margin-right: 26px;
}

.slider-modal-footer{
	display: flex;
	justify-content: space-between;
	padding: 20px 20px;
}

.slider-modal-footer-content{
	display: flex;
}

@media (max-width: 768px){
	.slider-modal-footer-content{
		display: block;
	}
}

.slider-modal-footer-content-list{
	padding-right: 50px;
}

@media (max-width: 768px){
	.slider-modal-footer-content-list{
		padding-right: 0px;
		padding-bottom: 10px;
	}
}

.slider-modal-footer-content-list span{
	display: block;
	font-size: 15px;
	color: var(--main-text);
	opacity: 0.4;
}

.slider-modal-footer-content-list span{
	font-size: 18px;
	color: var(--main-text);
	opacity: 0.9;
}

.slider-modal-footer-link a{
	background: var(--white);
	border: 1px solid var(--main-green);
	padding: 14px 32px;
	color: var(--main-green);
	border-radius: 5px;
}

@media (max-width: 768px){
	.slider-modal-footer-link a{
		padding: 10px 15px;
	}
}

/* Comment */
.comment-form-wrapper{
	margin: 30px 0px;
}

.comment-form-title{
	margin-bottom: 10px;
}

.comment-form-title h2{
	font-size: 25px;
	text-transform: uppercase;
	font-weight: 700;
}

.comment-form label{
	color: var(--main-text);
	padding-bottom: 2px;
}

.form-control{
	border-radius: 2px;
	margin-bottom: 20px;
	padding: 0.575rem 0.75rem;
}

.form-control:focus{
	outline: none;
	box-shadow: none;
	border-color: var(--main-green)
}

.comment-form-cookies-consent{
	margin: 10px 0px;
}

.comment-btn{
	margin-top: 10px;
}

.comment-btn button{
	background: var(--main-green);
	color: var(--white);
	padding: 10px 20px;
	border: none;
	border-radius: 2px;
	font-size: 15px;
}

.comment-list{
	width: 600px;
	max-width: 100%;
	border: 1px solid var(--light-brown);
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 20px;
}

.comment-list-header{
	display: flex;
}

.comment-list-header-img{
	margin-right: 10px;
}

.comment-list-header-img img{
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.comment-list-header-name h4{
	font-size: 18px;
	margin-bottom: 0px;
	color: var(--footer);
}

.comment-list-header-name span{
	font-size: 12px;
	opacity: 0.7;
	color: var(--main-text);
}

.comment-list-content{
	margin-top: 5px;
}

.comment-list-content p{
	font-size: 14px;
	color: var(--main-text);
	line-height: 1.5rem;
	opacity: 0.9;
}

.quiz-content-wrapper, .quiz-start-wrapper{
	width: 800px;
	margin: 40px auto;
	padding: 10px;
	max-width: 100%;
}

.quiz-start-wrapper{
	border: 1px solid  #dad8d8;
	border-radius: 5px;
	text-align: center;
}

.quiz-progress{
	background: var(--main-green);
	margin: 0 auto;
	width: 200px;
    text-align: center;
	padding: 10px;
	border-radius: 20px;
	position: relative;
	top: 14px;
}

.quiz-progress span{
	font-weight: 600;
	color: #fff;
	font-size: 18px;
}

.quiz-questions-board{
	background: #fff;
	padding: 30px 25px;
	border-radius: 5px;
	box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.1);
}

.quiz-questions-board h6{
	font-size: 17px;
	line-height: 24px;
	text-align: center;
	color: var(--text-grey);
}

.quiz-answer-wrapper{
	margin-top: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.quiz-answer{
	background: var(--white);
	padding: 7px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px 1px rgba(70, 70, 70, 0.1);
	border: 1px solid #fff;
	font-weight: 500;
	color: var(--text-grey);
	opacity: 0.8;
}

.quiz-answer:focus{
	background: var(--text-milk);
	opacity: 1;
	border: 1px solid var(--main-green);
}

.quiz-btn{
	margin-top: 40px;
	text-align: center;
}

.quiz-btn button{
	background: var(--main-green);
	padding: 15px 70px;
	border: none;
	border-radius: 30px;
	color: var(--white);
	font-size: 20px;
	font-weight: 600;
}

.quiz-start-notice{
	background: var(--main-green);
	color: var(--white);
	padding: 7px 20px;
	display: inline-block;
	border-radius: 10px;
	text-align: center;
	position: relative;
	top: -30px;
}

.quiz-start-wrapper p{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: var(--text-grey);
}

.quiz-start-wrapper a{
	background: var(--main-green);
	color: #fff;
	padding: 5px 15px;
	border-radius: 5px;
}

.quiz-timer{
	text-align: center;
}

.quiz-timer p{
	font-size: 20px;
	color: var(--main-text);
	opacity: 0.8;
}

.quiz-timer p span{
	padding-left: 5px;
}

.quiz-start-wrapper h3{
	color: rgba(223, 4, 4, 0.815);
	margin-bottom: 30px;
}

/* Create new post */

.create-new-post-wrapper{
	width: 900px;
	max-width: 100%;
	margin: 30px auto;
	position: relative;
}

.create-new-post-wrapper .title h2{
	font-size: 30px;
	font-weight: 600;
	color: var(--text-grey);
	opacity: 0.9;
}

.create-new-post-title .title::before{
	content: '';
	width: 100px;
	height: 3px;
	background: var(--light-brown);
	position: absolute;
	top: 35px;
}

.create-new-post-wrapper .notice{
	background: var(--text-milk);
	padding: 15px;
	color: var(--main-text);
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	margin-top: 20px;
	border-radius: 10px;
	border: 1px solid var(--light-brown);
}

.create-new-post-form{
	margin-top: 50px;
}

.create-new-post-form .input-field{
	margin-bottom: 20px;
}

.create-new-post-form .input-field label{
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
	color: var(--main-text);
	opacity: 0.9;
}

.create-new-post-form .input-field input,select{
	height: 50px;
	width: 100%;
	border-radius: 5px;
	border: 1px solid #d8d8d8;
	padding: 10px;
}

.create-new-post-form .input-field input:focus,select:focus{
	height: 40px;
	width: 100%;
	border-radius: 5px;
	border: 1px solid #d8d8d8;
	outline: none;
}

.create-new-post-form .input-field textarea{
	width: 100%;
	border-radius: 5px;
	border: 1px solid #d8d8d8;
	padding: 10px;
	height: 150px;
}

.create-new-post-form .input-field textarea:focus{
	outline: none;
}

.create-post-submit-button{
	text-align: right;
}

.create-post-submit-button button{
	background: var(--main-green);
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	color: var(--white);
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
}

/* Author details */

.author-name{
	margin: 20px 0;
	display: flex;
}

.author-name p a{
	color: var(--main-green);
	font-weight: bold;
}

.author-name .divider::after{
	content: '-';
	padding-left: 10px;
	padding-right: 10px;
}

.last-update{
	opacity: 0.5;
}