:root {
	--white: #FFF;
	--black: #000;
	--brand-blue: #3E96AD;
	--brand-grey: #5D5D5D;
}

body {
	max-width: 100vw;
	overflow-x: hidden;
}

header {

}
/*main {
	max-width: 1700px;
	margin: 0 auto;
	width: 100%;
	padding: 0 5%;
}
article {
	width: 100%;
	padding-right: 5%;
	padding-left: 5%;
}
aside {
	background-color: #EFEFEF;
	width: 40%;
	max-width: 300px;
	position: relative;
	height: max-content;
}*/
img {
	max-width: 100%;
}
footer .grey-bg {
	background-color: #4d4d4d;
	padding: 50px 5%;
	text-align: center;
	color: var(--white);
}
footer .lgrey-bg {
	width: 100%;
	background-color: var(--brand-grey);
	padding: 30px 5%;
	text-align: center;
	color: var(--white);
}

.no-padding {
	padding: 0px !important;
}

/* ----------------------------------------------------- Header Styles ---------------------------------------------------------------- */


.header-content {
	margin: auto 0 auto auto;
	display: flex;
	flex-direction: column;
	z-index: 999;
}

.header-nav {
	position: relative;
	width: max-content;
	width: auto;
	display: flex;
	margin-left: auto;
}

.date {
	font-weight: 300;
	margin-top: 10px;
	margin-left: auto;
}

/* ----------------------------------------------------- Search Bar Styles ----------------------------------------------------- */

.searchcontainer{
    width: 50px;
	padding-right: 15px;
	-webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
	z-index: 999;
}

.searchcontainer-width{
    width: 300px;
}

.searchbox{
    position:relative;
    min-width: 50px;
    width:0%;
    height:50px;
    overflow:hidden;
	float: right;
    
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

.searchbox-input{
	position: absolute;
    top: 0;
    right: 0;
    border: 0;
    outline: 0;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0px 55px 0px 20px;
    font-size: 16px;
    color: var(--brand-grey);
}

.searchbox-input::-webkit-input-placeholder {
    color: var(--brand-grey);
	opacity: 1 !important;
	font-size: 15px;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
}

.searchbox-input:-moz-placeholder {
    color: var(--brand-grey);
	opacity: 1 !important;
	font-size: 15px;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
}

.searchbox-input::-moz-placeholder {
    color: var(--brand-grey);
	opacity: 1 !important;
	font-size: 15px;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
}

.searchbox-input:-ms-input-placeholder {
    color: var(--brand-grey);
	opacity: 1 !important;
	font-size: 15px;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
}

.searchbox-icon, .searchbox-submit{
	width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    cursor: pointer;
	background: none;
	color: var(--brand-grey);
	padding: 0px;
	font-size: 25px;
	border: none;
}

.searchbox-open{
    width:100%;
}
	
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
	-webkit-box-shadow: 0 0 0 50px var(--white) inset !important;
}

/* ----------------------------------------------------- Aside Styles ---------------------------------------------------------------- */

.aside-tab {
	padding: 20px 5px;
	margin:  0 20px 30px 20px;
	border-bottom: solid 3px var(--brand-grey);
}
.aside-tab img {
	margin: 0 -5px 30px -5px;
	max-width: calc(100% + 10px);
}

.aside-tab a {
	text-decoration: none !important;
}

/* ----------------------------------------------------- Homepage Styles ---------------------------------------------------------------- */

.cat-title {
	padding: 5px 20px;
	color: var(--white) !important;
	background-color: var(--brand-blue);
	text-transform: uppercase;
	display: inline-block;
	min-width: max-content;
}
.line {
	width: 100%;
	height: 3px;
	background-color: var(--brand-blue);
	align-self: center;
}

.main-issue {
	display: flex;
	flex-wrap: wrap;
}

article .main-issue:nth-of-type(even) .home-featured-post .content {
	order: 2;
	padding-right: 0px;
	padding-left: 5%;
}
article .main-issue:nth-of-type(even) .home-featured-post .img {
	order: 1;
}

.home-featured-post {
	width: 100%;
	display: flex;
	border-bottom: solid 3px var(--brand-grey);
	padding: 30px 0 5% 0;
	margin-bottom: 5%;
}
.home-featured-post .content {
	padding-right: 5%;
}
.home-featured-post .content, .home-featured-post .img {
	width: 100%;
}

.home-post {
	width: 25%;
	padding: 0 5% 5% 0;
}

/*
.issue-post {
	width: 20%;
}*/

/*----- New category page template -----*/

/* Minimal, theme-agnostic styling—adjust to suit your theme */
.wrap { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
.page-header { margin-bottom: 2rem; }
.issue-description { color: #555; margin-bottom: 1rem; }
.issue-posts { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; }
.issue-post .entry-title { margin: 0 0 .25rem; font-size: 1.1rem; }
.issue-archive-link { 
	margin-top: .5rem;
}
.issue-archive-link a { 
	color: var(--brand-blue) !important;
}
.issue-separator { border: none; border-top: 1px solid #eee; margin: 2rem 0; }

.issue-header {
	width: 100%;
}
.issue-title { 
	font-size: 1rem;
	display: flex;
  	font-weight: normal;
}


/* Featured first post */
.issue-featured {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
}

.issue-featured__media {
  /*flex: 0 0 38%;
  max-width: 520px;*/
	width: 50%;
}

.issue-featured__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.issue-featured__content {
  flex: 1;
	padding: 2%;
}

.issue-featured .entry-title {
  font-size: 2rem;
  margin: 0 0 .5rem;
	color: var(--brand-grey) !important;
}
.entry-title a {
	color: var(--brand-grey) !important;
}
.entry-title a:hover {
	color: var(--brand-blue) !important;
	text-decoration: none;
}

/* Regular posts styling */
.issue-post:not(.featured-post) {
  margin-bottom: 1rem;
	width: 25%;
}

.issue-post:not(.featured-post) .entry-title {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.issue-post:not(.featured-post) .entry-excerpt {
  font-size: 16px;
  color: var(--brand-grey);
}
.entry-excerpt {
  color: var(--brand-grey) !important;
	font-size: 16px;
}


/* ----------------------------------------------------- Single Article Styles ---------------------------------------------------------------- */

.main-post {
	width: 100%;
	border-bottom: solid 3px var(--brand-grey);
	padding: 30px 0 5% 0;
	margin-bottom: 5%;
	display: inline-block;
}
.main-post .content {
	padding-right: 5%;
}
.main-post .img {
	width: 50%;
	float: right;
	margin: 0 0 20px 15px;
}

.more-from-issue {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.more-from-issue__title {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
	text-transform: uppercase;
	font-weight: 300;
}

.more-from-issue__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, 1fr);
}

/*
.more-from-issue__item article {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
	padding-left: 0;
}*/

.more-from-issue__thumb img {
  width: 140px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.more-from-issue__post-title {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
	text-transform: uppercase;
	font-weight: 300;
}
.more-from-issue__post-title a:hover {
	color: var(--brand-blue) !important;
	text-decoration: none;
}


/* ----------------------------------------------------- 2200px + ---------------------------------------------------------------- */

@media only screen and (min-width : 2200px) {
}

/* ----------------------------------------------------- Smaller than 2200px ----------------------------------------------------- */

@media only screen and (max-width : 2200px) {
}

/* ----------------------------------------------------- Smaller than 1800px ----------------------------------------------------- */

@media only screen and (max-width : 1800px) {
}

/* ----------------------------------------------------- Smaller than 1750px ----------------------------------------------------- */

@media only screen and (max-width : 1750px) {
}

/* ----------------------------------------------------- Smaller than 1650px ----------------------------------------------------- */

@media only screen and (max-width : 1650px) {	
}

/* ----------------------------------------------------- Smaller than 1550px ----------------------------------------------------- */

@media only screen and (max-width : 1550px) {
}

/* ----------------------------------------------------- Smaller than 1450px ----------------------------------------------------- */

@media only screen and (max-width : 1450px) {
}

/* ----------------------------------------------------- Smaller than 1350px ----------------------------------------------------- */

@media only screen and (max-width : 1350px) {
}

/* ----------------------------------------------------- Smaller than 1250px ----------------------------------------------------- */

@media only screen and (max-width : 1250px) {
} 

/* ----------------------------------------------------- Smaller than 1125px ----------------------------------------------------- */

@media only screen and (max-width : 1125px) {
		
}

/* ----------------------------------------------------- Smaller than 1080px ----------------------------------------------------- */
@media only screen and (max-width : 1080px) {
	.home-post {
		width: 50%;
	}
}

/* ----------------------------------------------------- Smaller than 1000px ----------------------------------------------------- */

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

}

/* ----------------------------------------------------- Smaller than 991px ------------------------------------------------------ */

@media only screen and (max-width : 991px) {
	
}

/* ----------------------------------------------------- Smaller than 870px ------------------------------------------------------ */

@media only screen and (max-width : 870px) {	
}

/* ----------------------------------------------------- Smaller than 800px ------------------------------------------------------ */

@media only screen and (max-width : 800px) {	
	.date, aside {
		display: none;
	}
	
	article {
		padding: 0px;
	}
	
	.home-featured-post {
		flex-direction: column;
		padding: 10px 0 5% 0;
	}
	.home-featured-post .content {
		order: 2;
		padding-left: 0px !important;
		padding-right: 0px !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		width: 100%;
	}
	.home-featured-post .img {
		order: 1;
		padding: 0px;
		width: 100%;
		padding-bottom: 10px;
	}
	.home-post {
		padding: 5px !important;
	}
	.home-post .the_content {
		display: none;
	}
	
	body.fixedpos {
		position: fixed;
	}
	.issue-posts, .issue-featured {
		display: block;
	}
	.issue-featured__content {
		padding: 25px 0 0 0;
	}
	.issue-featured__media {
		width: 100%;
	}
	.issue-post:not(.featured-post) {
		margin-bottom: 2.75rem;
  		width: 100%;
	}

  .more-from-issue__list { grid-template-columns: 1fr; }
  .more-from-issue__item article { flex-direction: column; }
  .more-from-issue__thumb img { width: 100%; }
	
	.main-post .img {
		width: 100%;
	}

	
}

/* ----------------------------------------------------- Smaller than 767px ------------------------------------------------------ */

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

}

/* ----------------------------------------------------- Smaller than 700px ------------------------------------------------------ */

@media only screen and (max-width : 700px) {
}

/* ----------------------------------------------------- Smaller than Mobile ----------------------------------------------------- */

@media only screen and (max-width : 600px) {
	
}

/* ----------------------------------------------------- Smaller than 540px ------------------------------------------------------ */

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

}

/* ----------------------------------------------------- Smaller than 500px ------------------------------------------------------ */

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

}