@charset "UTF-8";

:root {
	--grey1: #4d5b6b;
	--grey2: #3a4551;
	--grey3: #465362;
	--grey4: #58687b;
	--border-blue: #1B3A4E;
}

/*                COLORS                       */
/*  #4d5b6b, #3a4551, #465362, #58687b #1B3A4E */


#content {
	padding: 0rem .5rem !important;
}


/***********************************************/
/******************** TEXT *********************/
/***********************************************/

.creativeManifesto p {
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 25px;
	padding: 0rem 2rem;
	text-align: justify;  /* this will break the Footer text */
}

h2, h3, h4, h5 {   /* removed h1 for display-1 class */
	font-family: Tahoma, Geneva, sans-serif;
	margin-top: 5px;
	text-align: left;
	margin: 1rem 2rem;
}


@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: local('Orbitron-Light'), local('Orbitron-Regular'), url(../Fonts/Orbitron/Orbitron-Regular.ttf) format('woff');
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;  /*  makes the border appear thinner with border-top rule */
  border-top: 1px solid rgba(125, 125, 125, 0.1);
}

/***********************************************/
/******************** FLEX *********************/
/***********************************************/

.flex-container-1 {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 2rem;
}

.flex-container-2 {
	display: flex;
	justify-content: space-around;
	padding: 2rem;
	flex-direction: row;
}

.flex-article{
	flex-basis: 30%;
	border-radius: 3px;
	background-color: #3a4551;
}

.flex-sidebar {
	flex-basis: 30%;
	border-radius: 3px;
	background-color: #3a4551;
	margin-bottom: 2rem;
}

/***********************************************/
/************* Creative Manifesto **************/
/***********************************************/

.creativeManifesto {
	margin: 0 auto;
	text-align: center;
	width: 100%;
	max-width: 900px;  /* was 1000px */
	background-color: #111;
	margin-bottom: 64px;
	border: 1px solid #333;
	border-radius: 5px;
	box-sizing: border-box;
	overflow: hidden;

	/*background:
	    radial-gradient(
	        ellipse 900px 300px at 15% 10%,
	        rgba(26,35,64,.20),
	        transparent 65%
	    ),

	    radial-gradient(
	        ellipse 600px 350px at 88% 18%,
	        rgba(23,53,54,.15),
	        transparent 70%
	    ),

	    radial-gradient(
	        ellipse 1000px 400px at 45% 80%,
	        rgba(26,20,40,.18),
	        transparent 75%
	    ),

	    #05070A;*/
}

.creativeManifestoHeader {
	background-color:#222;
	border-radius: 5px 5px 0px 0px;
	border-bottom: 1px solid #333;
	font-size: 3rem;
	font-weight: lighter;
	text-align: center;
	color: #777;
	padding: 1rem;
	height: 4rem;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

.creativeManifestoFooter {
	display: flex;
  	justify-content: center;
  	align-items: center;
	background-color:#222;
	border-radius: 0px 0px 5px 5px;
	border-top: 1px solid #333;
	font-size: 2rem;
	font-weight: lighter;
	text-align: center;
	letter-spacing: 32px;
	text-indent: 32px;   /* add amount of the letter spacing to the left of first letter */
	color: #444;
	padding: 1rem;
	height: 4rem;
}


.text-center {
	text-align: center
	margin-left: -4rem !important;
	margin-right: 2rem;
}

.currentCreativeManifesto {
	text-align: left;
}

/*.creativeManifesto img{
	width: 100%;
	height: auto;
}
*/

.manifestoTitle {
	color: #AF9443;
	margin-bottom: 2rem;
	text-align: center;
	margin-left: 2rem;
	margin-right: 1rem;
	word-wrap: wrap;
}

.manifestoNumber {
	font-family: Orbitron, sans-serif;
	font-size: .625rem;
	font-weight: normal;
	text-align: left;
	color: #666;
	padding: 1rem 0rem 0rem 0rem;
	margin-left: 2rem;
	margin-bottom: 0rem;
	width: 700px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.Date {
	font-family: Orbitron, sans-serif;
	font-size: .625rem;
	text-align: left;
	color: #666;
	padding: .25rem 0rem 1rem 0rem;
	margin-left: 2rem;
	margin-bottom: 1rem;
	width: 700px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.author {
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-family: Orbitron, sans-serif !important;
	margin-bottom: 0rem;
	margin-top: -1.75rem;
	padding: 0rem 2rem;
	color: #666;
	font-size: .625rem;
	text-align: left;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.subtitle {
	letter-spacing: 1px;
	line-height: 1.5rem;
}



/***********************************************/
/******************** LISTS ********************/
/***********************************************/

.creativeManifestoList {
	list-style: disc;
	list-style-position: inside;
	font-size: 14px;
	line-height: 25px;
	padding-left: 16px;
	padding-right: 16px;
	margin-left: 16px;  /* was 32px */
	margin-right: 16px;
	text-align: left
}

.creativeManifestoList li {
	margin-top: 1rem;
}

.creativeManifesto ul {
	list-style: square;
	text-align: left;	
}

.creativeManifesto ul li {
	margin: 10px 0px 0px 0px;
}


/***********************************************/
/******************* GRAPHICS ******************/
/***********************************************/

.img-top {
	width: 100%;
	margin: auto;
	border-bottom: 1px solid #333;
	margin-bottom: 16px;
	border-radius: 5px 5px 0px 0px;
}

 /************************************************************************/
 /****************************** Pagination ******************************/
 /************************************************************************/

 	div.creativeManifesto {
 	  display: none;
 	  animation: fadeIn 0.4s ease both;
 	}
 	div.creativeManifesto.visible {
 	  display: block;
 	}
 	@keyframes fadeIn {
 	  from { opacity: 0; transform: translateY(12px); }
 	  to   { opacity: 1; transform: translateY(0); }
 	}
 	.pagination {
 	  display: flex;
 	  align-items: center;
 	  justify-content: center;
 	  gap: 8px;
 	  padding: 48px 0 64px;
 	  flex-wrap: wrap;
 	}
 	.pagination button {
 	  background: none;
 	  border: 1px solid #1e1e2e;
 	  color: #6b6560;
 	  font-family: inherit;
 	  font-size: 14px;
 	  padding: 8px 16px;
 	  cursor: pointer;
 	  transition: all 0.2s ease;
 	  min-width: 40px;
 	}
 	.pagination button:hover { border-color: #7a6540; color: #c8a96e; }
 	.pagination button.active { border-color: #c8a96e; color: #c8a96e; }
 	.pagination button:disabled { opacity: 0.25; cursor: not-allowed; }
 	.pagination button.prev-next { letter-spacing: 0.15em; text-transform: uppercase; font-size: 11px; padding: 8px 20px; }
 	.pagination .ellipsis { color: #6b6560; padding: 8px 4px; font-size: 14px; }
 	.pagination-status { text-align: center; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #6b6560; margin-bottom: 8px; }


 	 /**************************************************************/
     /***************** Fall back if JS is disabled ****************/
     /**************************************************************/
 	<noscript>
 	  <style> div.creativeManifesto { display: block; } </style> 
 	</noscript>



/************************************************************************/
/**************************** MEDIA QUERIES *****************************/
/************************************************************************/

  @media (min-width: 576px) {  

  }

  @media (min-width: 768px) {  
  	
	.flex-container-1 {
		flex-direction: row;
	}

	.flex-sidebar {
		flex-basis: 30%;
		border-radius: 3px;
		background-color: #3a4551;
		margin-bottom: 0rem;
	}

	.creativeManifestoFooter {
		font-size: 3rem;
	}

	.creativeManifestoFooter {
		display: flex;
	  	justify-content: center;
	  	align-items: center;
		font-size: 1.5rem;
		letter-spacing: 64px;
		text-indent: 64px;   /* add amount of the letter spacing to the left of first letter */

	}

	.currentCreativeManifesto {
		text-align: justify;
	}

	.manifestoNumber {
		font-family: Orbitron, sans-serif;
		font-size: .75rem;
		text-align: left;
		color: #666;
		padding: 0rem 0rem 0rem 0rem;
		margin-left: 2rem;
		margin-bottom: 0rem;
		width: 700px;
		letter-spacing: 4px;
	}

	.Date {
		font-size: .75rem;
		letter-spacing: 3px;
	}

	.author {
		font-size: .625rem;
	}

	.subtitle {
		letter-spacing: 8px;
		line-height: 0rem;
	}

  }

  @media (min-width: 992px) { 

  }

  @media (min-width: 1200px) {  
	
  }


/******************************************************************************/
/******************************************************************************/
/******************************************************************************/