/*
Theme Name: KezHQ Theme by Dr. Nwakeze O. I.
Description: A mobile-friendly theme.
*/
* {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}
.aligncenter, .alignleft, .alignright, .alignnone { width:70%; height:300; display:none; }
html {
	overflow-x: hidden;
 	}

div
	{
	-webkit-backface-visibility:hidden; /* Chrome, Safari, Opera */
	}

h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	-webkit-backface-visibility: hidden;
	color: #000;
	}
p {
	font-size:12.3pt;
	line-height:1.35em;
	color:#000;}
h1 {font-size: 16pt;
	font-family: "Source Sans Pro", sans-serif;
    font-weight: 800;
	color:#000;
	display:block;}
h3 {font-size: 13pt;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 800;
	color:#000;
	display:block;}
h2 {font-size:14pt;
	font-family: "Source Sans Pro", sans-serif;
    font-weight: 800;
	line-height:1.12em;
	display:block;
    color: #000;}
h2 a {color:#000;}
li {
font-size: 12.3pt; color: #000}
li.list {
font-size: 12.3pt; color: #000;margin-left:-30px !important}
iframe,
embed,
object,
video {
	max-width: 100%;
	}

.video {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
.imgRecommended {
	display: block;
	height:55px;
	width:55px;
	border-radius: 3px;
	border: 1.5px solid #000;
}

:root{
    --primary:#572020;
    --secondary:#5b2c12;
    --light:#fff8f3;
    --white:#ffffff;
    --dark:#1a1a1a;
}

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

body{
    font-family:Arial, sans-serif;
    background:#000;
    color:#222;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

.site-wrapper{
    overflow:hidden;
}

/* ================= TOP BAR ================= */

.top-bar{
    background:var(--primary);
    color:#fff;
    padding:10px 6%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
}

.top-left,
.top-right{
    display:flex;
    gap:20px;
}

.top-right a{
    color:#fff;
    font-weight:600;
}

/* ================= NAVBAR ================= */

.navbar{
    background:#fff;
    padding:18px 6%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 3px 15px rgba(0,0,0,0.05);
    position:sticky;
    top:0;
    z-index:1000;
}

.logo-area{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo-area img{
    width:70px;
}

.logo-area h2{
    font-size:22px;
    color:var(--primary);
}

.logo-area p{
    font-size:14px;
    color:#777;
}

.desktop-menu{
    display:flex;
    gap:25px;margin-top:40px;
}

.desktop-menu a{
    color:#222;
    font-weight:600;
    position:relative;
	white-space: nowrap; /* Prevent "About Us" and "Contact Us" from breaking */
}

.desktop-menu a::after{
    content:'';
    width:0;
    height:2px;
    background:var(--primary);
    position:absolute;
    left:0;
    bottom:-5px;
    transition:0.3s;
}

.desktop-menu a:hover::after{
    width:100%;
}

/* ================= HERO ================= */

.hero{
    height:90vh;
    background:url('/wp-content/uploads/2026/05/adogirlsstudents.jpg') center/cover;
    position:relative;
    display:flex;
    align-items:center;
    padding:0 6%;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:700px;
    color:#fff;
    animation:fadeInUp 1s ease;
}
.hero-content h1,
.hero-content p{
    color:#fff !important;
}
.hero-badge{
    background:rgba(255,255,255,0.15);
    padding:10px 18px;
    border-radius:30px;
    display:inline-block;
    margin-bottom:20px;
    backdrop-filter:blur(5px);
}

.hero-content h1{
    font-size:58px;
    line-height:1.2;
    margin-bottom:25px;
}

.hero-content p{
    font-size:18px;
    line-height:1.8;
    margin-bottom:30px;
}

.hero-buttons{
    display:flex;
    gap:15px;
}

.primary-btn,
.secondary-btn,
.small-btn{
    padding:14px 28px;
    border-radius:8px;
    font-weight:700;
    transition:0.3s;
}

.primary-btn{
    background:var(--primary);
    color:#fff;
}

.primary-btn:hover{
    background:#3d1a08;
    transform:translateY(-3px);
}

.secondary-btn{
    border:2px solid #fff;
    color:#fff;
}

.secondary-btn:hover{
    background:#000;
}

.small-btn{
    background:var(--primary);
    color:#fff;
    display:inline-block;
    margin-top:20px;
}

/* ================= SECTION ================= */

.section{
    padding:90px 6%;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    color:var(--secondary);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
}

.section-title h2{
    font-size:42px;
    margin-top:15px;
    color:var(--primary);
}

/* ================= PRINCIPAL ================= */

.principal-box{
    display:grid;
    grid-template-columns:350px 1fr;
    gap:50px;
    align-items:center;
}

.principal-image img{
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.principal-text h2{
    font-size:42px;
    color:var(--white);
    margin:15px 0;
}

.principal-text p{
    line-height:1.9;
    color:#fff;
    font-size:17px;
}

.section-tag{
    background:rgba(255,255,255,0.15);
    padding:10px 18px;
    border-radius:30px;
    display:inline-block;
    margin-bottom:20px;
    backdrop-filter:blur(5px);
	color:var(--white);
    font-weight:800;
}

/* ================= STATS ================= */

.stats-section{
    background:var(--primary);
    padding:70px 6%;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.stat-card{
    background:var(--white);
    padding:40px;
    text-align:center;
    border-radius:15px;
    color:#fff;
    backdrop-filter:blur(5px);
}

.stat-card h2{
    font-size:45px;
    margin-bottom:10px;
}

/* ================= FEATURES ================= */

.features-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.feature-card{
    background:#fff;
    padding:40px 30px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
    transition:0.4s;
}

.feature-card:hover{
    transform:translateY(-10px);
}

.feature-card i{
    width:80px;
    height:80px;
    background:var(--light);
    color:var(--primary);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    font-size:30px;
    margin-bottom:25px;
}

.feature-card h3{
    margin-bottom:15px;
}

/* ================= ACADEMICS ================= */

.academics-section{
    padding:90px 6%;
    background:#faf7f5;
}

.academic-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.academic-card{
    background:var(--primary);
    padding:50px 20px;
    text-align:center;
    border-radius:16px;
    transition:0.3s;
}

.academic-card:hover{
    background:var(--primary);
    color:#fff;
    transform:translateY(-8px);
}

.academic-card i{
    font-size:45px;
    margin-bottom:20px;color:#fff;
}
.academic-card h3{ color:#fff; }

/* ================= NEWS ================= */

.news-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

/* CARD */
.news-card{
    background:#fff;
	height:600px;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 5px 18px rgba(0,0,0,0.08);
    transition:0.3s ease;
}

.news-card:hover{
    transform:translateY(-6px);
}

/* IMAGE CONTROL (IMPORTANT FIX) */
.news-card img{
    width:100%;
    height:350px;
    object-fit:cover;
    display:block;
}

/* CONTENT */
.news-content{
    padding:14px;
}

.news-content span{
    color:var(--secondary);
    font-weight:600;
    font-size:13px;
}

.news-content h3{
    margin:10px 0;
    font-size:18px;
    line-height:1.3em;
	font-weight:800;
}

.news-content p{
    font-size:14px;
    line-height:1.5em;
    color:#333;
}

/* BUTTON (optional polish) */
.news-content .primary-btn{
    display:inline-block;
    margin-top:0px;
    padding:8px 14px;
    font-size:13px;
}

@media(max-width:768px){
/* CARD */
.news-card{
	height:auto;
}

/* IMAGE CONTROL (IMPORTANT FIX) */
.news-card img{
    width:100%;
	height:auto;
}
}

/* ================= CTA ================= */

.cta-section{
    background:linear-gradient(rgba(91,44,18,0.9), rgba(91,44,18,0.9)),
    url('/wp-content/uploads/2026/04/ado-logo-1.webp');
    background-size:cover;
    padding:100px 6%;
    text-align:center;
    color:#fff;
}

.cta-section h2{
    font-size:48px;
    margin-bottom:20px;
}

.cta-section p{
    margin-bottom:35px;
    font-size:18px;
}

/* ================= FOOTER ================= */

.footer{
    background:#1b0d05;
    color:#fff;
    padding-top:50px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:150px;
    padding:0 6% 60px;
}

.footer h3{
    margin-bottom:10px;
}

.footer a{
    display:block;
    color:#ddd;
    margin-bottom:12px;
}

.footer p{
    color:#ccc;
    line-height:1.8;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.1);
    padding:20px;
    text-align:center;
    font-size:14px;
}

/* ================= MOBILE MENU ================= */

.hamburger{
    display:none;
    background:none;
    border:none;
    font-size:28px;
    color:var(--primary);
}

.mobile-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:250px;
    height:70vh;
    background:var(--primary);
    padding:90px 30px;
    transition:0.4s;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.mobile-menu.active{
    right:0;
}

.mobile-menu a{
    color:#fff;
    font-size:16px;
    font-weight:600;margin:3px;text-decoration:underline;
}

.menu-btn{
    background:#fff;
    color:var(--primary) !important;
    padding:8px;
    border-radius:5px;
    text-align:center;
    margin-top:3px;
}

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    opacity:0;
    visibility:hidden;
    transition:0.3s;
    z-index:999;
}

.overlay.active{
    opacity:1;
    visibility:visible;
}

/* ================= ANIMATION ================= */

@keyframes fadeInUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ================= MOBILE ================= */

@media(max-width:992px){

    .desktop-menu{
        display:none;
    }

    .hamburger{
        display:block;
    }

    .hero-content h1{
        font-size:42px;
    }

    .principal-box{
        grid-template-columns:1fr;
    }

    .stats-grid,
    .features-grid,
    .academic-grid,
    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:768px){
	
    .top-bar{
        display:none;
    }

    .hero{
        height:auto;
        padding:120px 6% 80px;
    }

    .hero-content h1{
        font-size:34px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .stats-grid,
    .features-grid,
    .academic-grid,
    .news-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .section-title h2,
    .principal-text h2,
    .cta-section h2{
        font-size:32px;
    }

    .logo-area h2{
        font-size:16px;
    }

    .logo-area p{
        font-size:12px;
    }

}

.verified::after {
    content: "";
    display: inline-block;
    position: center;
    height: 11.5pt;
    width: 12.5pt;
    background: url(/wp-content/uploads/2026/05/verified.png) no-repeat !important;
    background-size: 12.5pt !important;
	margin-bottom:-2.3px;
}
#round {
	border-radius: 80%;
	display:block;
	height:55px;
	width:55px;
}

iframe { width:100%; height:140; }

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.comment-body {
	background-color:#fff;
	border:0.5px solid #ccc !important;
	overflow: hidden;
    position: relative;
	padding:1px 3px 3px 3px;
}
.comment-body p {
    font-size:10pt;
	line-height:1.35em;
	color: #000;
}

.video iframe, .video object, .video embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
h4 { font-size: 13pt; line-height: 1.12em;}
.tagcommon{margin: 4px;
    background: #fff;}
.tagslist {
    background-color: #fff;
    overflow: auto;
    white-space: nowrap;
}
.tagslist a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 10px;
    text-decoration: none;
	font-weight:bold;
}
.tagimg img {
    border: 1px solid #ddd;
    box-shadow: 0 0 2px 1px rgba(212, 252, 212);
    padding: 3px;
	width: 80px;
    height: 80px;}
.container {
    padding: 10px 20px;
    position: relative;
    background-color: inherit;
    width: 100%;
}
img.wp-post-image {
float:center;
margin-right:2px;
width:50px;
height:50px;
padding:1px;
border:solid 1px #ddd;
width:100%;
}
/* tablet breakpoint */
@media (min-width:768px) {
.wrapper{
    display:flex;
    width:100%;
	margin:20px auto;
	align-items:flex-start;
}
.main{
    width:70%;
}
.sideebar{
	height: auto;
	position: -webkit-sticky !important; /* Safari */
	position: sticky !important;
	top: 0 !important;
	width: 30% !important;
	overflow:hidden;
}
}
/* MAIN LAYOUT */
.ado-song-wrap{
    display:flex;
    align-items:flex-start;
    gap:30px;
    max-width:1000px;
    margin:auto;
    padding:10px;
}

/* FRAME CONTAINER */
.photo-frame{
    position:relative;
    width:310px;
    min-width:310px;
    padding:10px;
    border-radius:20px 20px 0px 0px;
    background:linear-gradient(135deg,#572020,#ffffff,#572020);
    overflow:hidden;
    box-shadow:
        0 15px 40px rgba(0,0,0,0.45),
        0 0 25px rgba(0,114,255,0.35);
}

/* SHINY BORDER EFFECT */
.photo-frame::before{
    content:"";
    position:absolute;
    inset:-3px;
    background:linear-gradient(
        45deg,
        rgba(255,255,255,0.5),
        transparent,
        rgba(255,255,255,0.3)
    );
    border-radius:30px;
    z-index:0;
}

/* INNER IMAGE BOX */
.photo-inner{
    position:relative;
    border-radius:20px 20px 0px 0px;
    overflow:hidden;
    background:#111827;
    border:2px solid rgba(255,255,255,0.15);
    z-index:1;
}

/* IMAGE */
.photo-inner img{
    width:100%;
    display:block;
    object-fit:cover;
    transition:0.5s ease;
}

/* HOVER ZOOM */
.photo-frame:hover img{
    transform:scale(1.05);
}

/* MOBILE RESPONSIVE */
@media (max-width:900px){

    .ado-song-wrap{
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    .photo-frame{
        width:300px;
        min-width:300px;
    }
}

/* =========================
   E-LIBRARY GRID
========================= */

.elib-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:25px;
    margin:30px 0;
}

/* CARD */
.elib-card{
    background:#fff;
    border-radius:18px 18px;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 5px 25px rgba(0,0,0,.08);
    transition:.3s ease;
}

.elib-card:hover{
    transform:translateY(-6px);
}

/* COVER */
.elib-cover{
    position:relative;
    height:260px;
}

.elib-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* OVERLAY */
.elib-overlay{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:18px;
    background:linear-gradient(transparent, rgba(0,0,0,.85));
}

.elib-overlay span{
    color:#fff;
    font-weight:600;
}

/* TITLE */
.elib-info{
    padding:16px;
}

.elib-info h3{
    margin:0;
    font-size:16px;
    color:#000;
}

/* =========================
   MODAL (GOOGLE BOOK STYLE)
========================= */

#elibModal{
    position:fixed;
    inset:0;
    background:#111;
    display:none;
    z-index:99999;
    overflow:hidden;
}

/* HEADER */
.elib-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.2);
}

.elib-header h2{
    margin:0;
    font-size:17px;
    font-weight:600;
}

/* CLOSE BUTTON */
#elibClose{
    border:none;
    background:none;
    font-size:34px;
    cursor:pointer;
    line-height:1;
}

/* =========================
   PDF VIEWER AREA
========================= */

#elibViewer{
    height:calc(100vh - 120px);
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:auto;
    padding:20px 20px;
}

/* CANVAS (IMPORTANT FOR SHARPNESS) */
#elibCanvas{
    background:#fff;
    box-shadow:0 10px 40px rgba(0,0,0,.6);
    transition:opacity .25s ease;
    border-radius:6px;
}

/* =========================
   CONTROLS BAR
========================= */

.elib-controls{
    position:fixed;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    padding:10px 18px;
    border-radius:50px;
    display:flex;
    gap:14px;
    align-items:center;
    box-shadow:0 5px 20px rgba(0,0,0,.25);
    z-index:100000;
}

.elib-controls button{
    border:none;
    background:#111;
    color:#fff;
    padding:8px 14px;
    border-radius:20px;
    cursor:pointer;
    font-size:13px;
}

.elib-controls button:hover{
    background:#333;
}

#pageInfo{
    font-weight:600;
    font-size:13px;
}

/* =========================
   LOADING OVERLAY
========================= */

#elibLoading{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.85);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;
    color:#fff;
}

.elib-loading-box{
    text-align:center;
}

.elib-spinner{
    width:48px;
    height:48px;
    border:4px solid rgba(255,255,255,.2);
    border-top:4px solid #fff;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:0 auto 12px;
}

@keyframes spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

/* smooth fade for canvas */
#elibCanvas{
    opacity:0;
    transition:opacity .25s ease;
}

/* =========================
   PAGINATION
========================= */

.elib-pagination{
    margin:50px 0;
    display:flex;
    justify-content:center;
}

.elib-pagination ul{
    display:flex;
    gap:10px;
    list-style:none;
    padding:0;
}

.elib-pagination a,
.elib-pagination span{
    min-width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:10px;
    background:#fff;
    color:#222;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.elib-pagination .current{
    background:#111;
    color:#fff;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 768px){

    .elib-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .elib-cover{
        height:210px;
    }

    #elibViewer{
        height:calc(100vh - 140px);
        padding:10px;
    }

    #elibCanvas{
        max-width:100%;
        box-shadow:0 8px 25px rgba(0,0,0,.35);
    }

    .elib-controls{
        width:92%;
        bottom:10px;
        justify-content:space-between;
        padding:8px 12px;
    }

    .elib-controls button{
        padding:6px 10px;
        font-size:12px;
    }

    .elib-header h2{
        font-size:15px;
    }
}

/* Begin */
/* Chart container */
.music-chart {
	display:block;
    list-style: none;
    margin: 0px 10px 0px 10px !important;
    padding: 3px;
    background: #fff;
}

/* Chart row */
.chart-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 5px solid #000;
    background: #fff;
}

.chart-row:hover { background: #fafafa; }

/* Rank */
.chart-rank {
    width: 32px;
    font-size: 18pt;
    font-weight: 800;
    text-align: center;
    color: #c91a21;
}

/* Thumbnail */
.chart-thumb img {
    width: 75px;
    height: 75px;
    border-radius: 6px;border:3px solid #000;
    object-fit: cover;
    display: block;
}

/* Info */
.chart-info { flex: 1; min-width: 0; }

/* Song title */
.song-title {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    display: flex;
    overflow: hidden;line-height:1.2em;
    text-overflow: ellipsis;
}

.song-title:hover { color: #c91a21; }
/* End */

.gallery-albums{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:25px;
    margin:30px 0;
}

.album-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 5px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.album-card:hover{
    transform:translateY(-6px);
}

.album-cover{
    position:relative;
    height:260px;
}

.album-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.album-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:20px;
    background:linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );
}

.album-overlay span{
    color:#fff;
    font-weight:600;
}

.album-info{
    padding:20px;
}

.album-info h3{
    margin:0;
    font-size:18px;
}

/* MODAL */

#albumModal{
    position:fixed;
    inset:0;
    background:#fff;
    z-index:99999;
    display:none;
    overflow:auto;
}

.album-header{
    position:sticky;
    top:0;
    background:#fff;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.album-header h2{
    margin:0;
}

#closeAlbum{
    border:none;
    background:none;
    font-size:40px;
    cursor:pointer;
}

#albumGrid{
    display:grid;
    grid-template-columns:
    repeat(auto-fill,minmax(250px,1fr));
    gap:15px;
    padding:25px;
}

#albumGrid img{
    width:100%;height:90%;
    display:block;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;
}

#albumGrid img:hover{
    transform:scale(1.03);
}

/* LIGHTBOX */

#lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:100000;
}

#lightboxImg{
    max-width:90%;
    max-height:90%;
    border-radius:12px;
}

#closeLightbox{
    position:absolute;
    top:20px;
    right:35px;
    color:#fff;
    font-size:50px;
    cursor:pointer;
}

.nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

.prev{
    left:25px;
}

.next{
    right:25px;
}

/* PAGINATION */

.paginationn{
    margin:50px 0;
    display:flex;
    justify-content:center;
}

.paginationn ul{
    display:flex;
    gap:10px;
    list-style:none;
    padding:0;
}

.paginationn a,
.paginationn span{
    min-width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:12px;
    background:#fff;
    color:#222;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.paginationn .current{
    background:#111;
    color:#fff;
}



/* MOBILE */

@media(max-width:768px){

    .gallery-albums{
        grid-template-columns:1fr;
    }

    .album-cover{
        height:220px;
    }

    #albumGrid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
        padding:15px;
    }

    .nav{
        width:45px;
        height:45px;
		background:#000;
    }

}

@font-face{font-family:'FontAwesome';src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff');font-weight:normal;font-display:swap;font-style:normal}.fa{display:inline-block;font:normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-right:before{content:"\f061"}.fa-download:before{content:"\f019"}.fa-star:before{content:"\f005"}.fa-comments:before{content:"\f086"}.fa-comment:before{content:"\f075"}.fa-bars:before{content:"\f0c9"}.fa-circle-user:before{content:"\f2bd"}.fa-film:before{content:"\f008"}.fa-usd:before{content:"\f155"}
.fa-globe:before{content:"\f0ac"}.fa-eye:before{content:"\f06e"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-forward:before{content:"\f04e"}.fa-backward:before{content:"\f04a"}

/* @naijafindmp3.com */
body {
background:#000 !important;
font-size:12px;
line-height:1.5;
color:#333;
margin:0;
}
hr {display:none;}
blockquote {
	border-left:2px solid #ddd;
	margin:0 0 0 5px;
	padding-left:5px;
}
ul,ol {
	margin-left:40px;}
	
p, li {
	margin: 0 0 10px;
}
.small {
	font-size:10px;
	line-height:2;
}
.hide {
	display: none;
}
.clear {
	clear: both;
	float: none;
}
.table-title,
.content {
	color:#777;
	font-size:1em;
	line-height:1.5;
	margin:10px;
	text-shadow: 1px 1px 2px #fff;
}
.table-title {
	margin-top:20px;
}
.title-divider {
	background:url(../img/title-divider.png) repeat-x center;
	color:#999;
	font-size:10px;
	font-weight:normal;
	margin:0 -15px 10px -15px;
}
.title-divider span {
	background:#fff;
	margin:0 0 0 10px;
	padding: 0 5px;
}

#navigation-top {
	display:none;
}
.pagination {
	margin:0 10px;
}
.group:not(.table) .pagination:last-child {
	background: transparent;
	border-width: 1px 0 0;
	margin: 0 -10px -10px;
}
.pagination {
	background-color:#fff;
	border-width:0 1px 1px;
	clear:both;
	overflow:hidden;
}
.pagination span {
	display:none;
}
.pagination span.next,
.pagination span.prev {
	display:block;
	width:50%;
}
.pagination span.prev {
	float:right;
}
.pagination span.next {
	float:left;
}
.pagination .next a,
.pagination .prev a {
	border:5px solid #fff;
	display:block;
	height:1.5em;
	overflow:hidden;
	text-decoration:none;
}
.pagination .next a,
ul.table.disclosure .pagination .next a {
	background: url(../img/disclosure-left.png) no-repeat left center;
	border-right:1px solid #ddd;
	border-left:0;
	padding-left:35px;
	
}
.pagination .prev a,
ul.table.disclosure .pagination .prev a {
	background: url(../img/disclosure.png) no-repeat right center;
	border-left:1px solid #fff;
	border-right:0;
	padding-right:35px;
	text-align:right;
}

#next-prev-bottom,
#navigation-bottom {display:none;}

#search {
	margin: 0;
}
#search input {

	padding: 3px;
}
#s {
	width: 50%;
}
#r {
	width: 50%;
}
.commentlist {
	margin:0 -10px;
	list-style-type:none;
}
.commentlist .li-comment {
	background:url(../img/comment.png) no-repeat 10px 10px;
	border-bottom:1px solid #ddd;
	list-style: none;
	margin:0;
	padding:10px 10px 10px 30px;
}
.commentlist li:last-child {border:0;}
.commentlist li .comment-info {
	color:#999;
	margin:0;
}
.commentlist .comment-info cite {
	font-weight:bold;
}
.commentlist .children {
	margin: 10px 0 0;
}
.commentlist .children .li-comment {
	background-position: 0 10px;
	border: 0;
	margin-bottom: 10px;
	padding-bottom: 0;
	padding-left: 20px;
}
#respond .title-divider {
	margin-bottom:5px;
	margin-top:5px;
}
#respond label {display:block;}
#respond textarea,
#respond input[type=text] {
	width:95%;
}
#footer {
	background:#555 url(../img/footer-shadow.gif) repeat-x top;
	color:#999;
	padding:10px;
}
#footer a {color:#ddd;}
#footer p#developer-link {
	display:block;
	text-indent:-32697px;
}
#footer p#developer-link a,
#footer p#developer-link a:visited {
	background:url(../img/by-crowd-favorite.gif) no-repeat left top;
	float:right;
	height:30px;
	text-indent:-32697px;
	width:220px;
}
/* rounded goodness */
.group {
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}
.pagination .next a,
ul.table.disclosure .pagination .next a {
	border-bottom-left-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	-moz-border-radius-bottomleft:10px;
}
.pagination .prev a,
ul.table.disclosure .pagination .prev a {
	border-bottom-right-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	-moz-border-radius-bottomright:10px;
}
.pagination {
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-bottomright:10px;
}
.pages-link {
	margin:2em 0;
	word-spacing:.25em;
}
.pages-link a {
	background:#d7d7d7;
	border:1px solid #ccc;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-khtml-border-radius:3px;
	border-radius:3px;
	color:#333;
	padding:.3em .5em;
	text-decoration:none;
}