.accordion {
display:none;
}

.panel {
display:none;
}

/* show on mobile only */

@media (max-width:720px) {

.accordion {
display:block;
width:100%;
cursor:pointer;
}

}

.panel ul{
list-style:none;
padding:0;
margin:10px 0;
text-align:center;
}

.panel li{
margin:8px 0;
}

.panel a{
color:#e3c46a;
text-decoration:none;
font-size:1.1em;
}

.panel a:hover{
color:#ffd86b;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: black;
  display: none;
  overflow: hidden;
}




/*** ================= PRIMARY ADJUSTMENTS ================= ***/

/* Prevent card title/description shifting */
.page-description{
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.title{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

/*** ================= SIDEBAR ================= ***/

aside{
background:#729FCF;
padding:10px;
border-radius:6px;
}

aside h2{
color:#7F7777;
}

aside ul{
list-style:none;
padding-left:0;
margin-left:0;
}

aside li{
margin-bottom:6px;
margin-left:3px;
}

aside ul.custom_list{
padding-left:10px;
}

ul.custom_list li{
margin-bottom:6px;
}

/*** ================= THEME COLORS ================= ***/

:root{
--bg:#111;
--accent-bg:#1c1c1c;
--text:#f5f5f5;
--text-light:#bdbdbd;
--accent:#d4af37;
}

/*** ================= BODY ================= ***/

body{
background-color:#0f1114;
grid-template-columns:1fr min(75rem,94%) 1fr;
}

/*** ================= HEADER ================= ***/

header{
text-align:center;
height:150px;
overflow:hidden;
margin-top:5px;
position:relative;
}

.header-video{
position:absolute;
top:0;
left:0;
width:100%;
height:150px;
object-fit:cover;
z-index:1;
}

/* keep header text above video */
header h1,
header p,
header a{
position:relative;
z-index:5;
}

header > p{
color:white;
font-weight:bold;
font-size:1.1em;
font-family:"Montserrat",sans-serif;
}

/*** ================= BUTTONS ================= ***/

.meta,
.meta-icon{
color:white;
font-size:1.2em;
}

.button{
background:linear-gradient(120deg,#1e88e5,#26a69a,#43a047);
border:0;
box-shadow:0 1px 6px rgba(255,255,255,0.47);
padding:5px;
border-radius:7px;
margin-bottom:10px;
}

a.button{
border-bottom:none;
}

button.accordion-toggle {
text-align:center;
}

.card-content p a.button{
display:inline-block;
}

.card-content p{
margin-bottom:15px;
}

/*** ================= CARD / BLOG LAYOUT ================= ***/

.wrapper{
max-width:1200px;
width:90%;
margin:auto;
padding-top:30px;
}

.blog-item{
color:white;
width:100%;
}

.card{
width:90%;
border:0;
margin:auto;
margin-bottom:10px;
padding:10px;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.card-content{
background:rgba(0,0,0,0.65);
width:90%;
margin:auto;
padding-left:10px;
padding-right:10px;
border-radius:7px;
}

.card-image{
aspect-ratio:3/2;
overflow:hidden;
}

.card-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.cover-image{
width:100%;
height:250px;
display:none;
}

.cover{
width:60%;
float:right;
margin-left:20px;
}

/*** ================= LINKS ================= ***/

a{
color:#e3c46a;
}

a:hover{
color:#ffd86b;
text-decoration:none;
}

/*** ================= TYPOGRAPHY ================= ***/

h1{
color:#D5CA71;
text-align:center;
margin-top:20px;
}

h1:hover

h2.plugin-label{
color:white;
font-size:1em;
padding-top:15px;
}

h3{
color:white;
margin-top:20px;
}

p,
ul li{
color:#A6A6A6;
font-size:1.2em;
}

footer > p{
text-align:center;
color:#4E617E;
font-size:0.8em;
}

main{
background:none;
box-shadow:none;
padding:0;
margin:0;
border-radius:0;
}

body main h2{
color:white !important;
}

/*** ================= FONTS ================= ***/

@font-face{
font-family:"StyleScript";
src:url("../fonts/StyleScript-Regular.ttf") format("truetype");
}

/* ================= ACCORDION MENU ================= */

.accordion-menu{
text-align;
padding:10px 0 5px 0;
}

/* divider style toggle */

.accordion-toggle{
display;
width:100%;
background;
border;
color:#bbb;
font-size:12px;
letter-spacing:3px;
cursor;
position;
padding:12px 0;
text-align;
}

/* horizontal lines */

.accordion-toggle::before,
.accordion-toggle::after{
content:"";
position;
top:50%;
width:35%;
height:1px;
background:#333;
}

.accordion-toggle::before{
left:0;
}

.accordion-toggle::after{
right:0;
}

/* dropdown area */

.accordion-content{
display;
padding:8px 0 12px 0;
}

.accordion-menu.open .accordion-content{
display;
}

/* remove bullets */

.accordion-content ul{
list-style;
padding:0;
margin:0;
}

/* menu spacing */

.accordion-content li{
margin:6px 0;
}

/* category links */

.accordion-content a{
color:#d4af37;
text-decoration;
font-size:15px;
display;
padding:4px 0;
}

/* hover effect */

.accordion-content a{
color:#ffd86b;
text-decoration;
}
/*** ================= MOBILE RESPONSIVE ================= ***/

@media (max-width:720px){

body{
display:block;
grid-template-columns:none;
}

header{
display:grid;
grid-template-columns:auto auto;
grid-template-rows:auto auto;
align-items:center;
height:auto;
padding:10px;
}

/* hide large title */
header h1{
display:none;
}

/* logo */
.site-logo{
grid-column:1;
grid-row:1;
width:50px;
height:50px;
}

/* hamburger position */
.hamburger{
display:block;
grid-column:2;
grid-row:1;
justify-self:end;
}

/* subtitle */
header > p{
grid-column:1 / span 2;
grid-row:2;
text-align:center;
margin-top:6px;
}

/* stack layout */
.wrapper{
flex-direction:column !important;
width:95%;
}

main{
min-width:0 !important;
width:100% !important;
}

aside{
width:100% !important;
margin-top:20px;
}

/* cards */
.card{
width:100%;
}

.card-content{
width:100%;
}

/* images */
.cover{
float:none;
width:100%;
margin-left:0;
}

img{
max-width:100%;
height:auto;
}

/* pagination */
article + nav{
gap:.375rem;
flex-wrap:wrap;
justify-content:space-around;
}

/* footer spacing */
body > footer{
margin-top:2rem;
}

}