/* ==========================================================================
   MAIN CSS FOR MOSTLY MISFITS WEBSITE
   ========================================================================== */

/**
*
* CSS: Mostly Misfits Main CSS
* Author: Gareth Davies
* Structure:
* 
*	- CSS Variables
*	- Global
*		- Tags
* 		- Classes
*		- ID
*	- Homepage
*	- Content
*	- Overrides
*		-breakpoints
*
* George Maxwell : You... It's you! But you're dead!
* Edward Lionheart : No. Another critical miscalculation on you part. 
*                    I am well. It is you who are dead.
*
* Theatre of Blood - 1973
*
**/


/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
	--misfits-dark-purple: #171220;
	--misfits-purple: #5e3995;
	--misfits-magenta: #e90e8b;
	--misfits-cyan: #08aab5;
	--misfits-yellow: #f9b218;
	--misfits-black: #000000;
	--misfits-white: #FFFFFF;
	--misfits-gray: #BBBBBB;
}

/* ==========================================================================
   GLOBAL
   ========================================================================== */

/* TAGS ===================================================================== */

html, 
body {
	overflow-x: hidden;
}
body {
	background: var(--misfits-dark-purple) top center repeat-x;
	color: var(--misfits-white);
	font-family: 'Outfit', sans-serif;
	margin:0;
	padding:0;
	overflow-y:visible;
	width:100%;
}

h1,
h2,
h3, 
h4 { 
	font-weight:600;
	line-height:120%;
}
h1 {font-size:60px;font-weight:500;}
h2 {font-size:45px; margin-bottom:50px;}
h3 {font-size:30px;}
h4, 
.subtitle {
	font-size:20px;
	font-weight:400;
	line-height:120%;
	color:var(--misfits-gray);
}
.section h2 { text-align:center; }

a {	color:var(--misfits-cyan);}

p {
	font-size:18px;
	line-height:160%;
}
p strong { color:var(--misfits-magenta); }

ul { margin:30px 0; }
ul li { line-height:190%; }

hr {
	width:100%;
	margin:50px 0;
	height:3px;
	border:none;
	background-color: var(--misfits-white);
}

/* CLASSES ================================================================== */

.checklist {
	list-style:none;
	margin-left:0;
		padding:0;
}
.checklist li {	margin-left:5px;}
.checklist li:before {
	content:"\F054";
	margin: 0 10px -5px 10px;
		font-family: "FontAwesome", sans-serif;
}

.wholist {
	margin:20px 0 40px 0;
	padding:0;
	width:100%;
	columns:2;
	list-style:none;
}
.wholist li {
	padding:10px 20px;
	font-size:18px;
}
.wholist li:before {
	content:"\f14a";
	margin-right:10px;
	font-family:"FontAwesome", sans-serif;
	font-size:30px;
	position:relative;
	top:6px;
}

.color-list li:nth-child(2n):before { color:#D900D9; }
.color-list li:nth-child(3n):before { color:#00D9A3; }
.color-list li:nth-child(4n):before { color:#FFC926; }

.list-reset {
	margin:0;
	padding:0;
	list-style:none;
}

.socialbar li {
	display:inline-block;
	margin:5px;
	width:25px;
}
.socialbar a {
	visibility:hidden;
	line-height:25px;
}
.socialbar a:before {
	visibility:visible;
	content:"";
	font-family:"FontAwesome", sans-serif;
}
.socialbar a.linkedin:before { content:"\f0e1"; }
.socialbar a.twitter:before { content:"\f099"; }
.socialbar a.facebook:before { content:"\f09a"; }

.bar.logobar { margin:50px 0 0px 0;}
.bar {
	margin:50px 0 50px 0;
	padding:0;
	list-style:none;
	width:100%;
	text-align:center;
}
.bar li {
	display:inline-block;
	margin:10px;
	font-size:24px;
	font-weight:500;
}

.logobar img {
  max-width:200px;
  max-height:100px!important;
}

.button-group {
	list-style:none;
	margin:0;
	padding:0;
}
.button-group li {
	display:inline-block;
	margin:0 5px 0 0;
}

.button {
	display:inline-block;
	padding:0 20px; 
	line-height:45px;
	background-color:var(--misfits-magenta);
	border-radius:10px;
	color:var(--misfits-white);
	text-decoration:none;
	font-size:23px;
}
.button:hover {	background-color:var(--misfits-purple);}

.button-cyan { background-color:var(--misfits-cyan); }
.button-magenta { background-color:var(--misfits-magenta); }
.button-yellow { background-color:var(--misfits-yellow); }

.copyright {
	text-align:center;
	margin:20px 0;
}

.container {
	padding:0 30px;
	width:auto;
	max-width:1260px;
	margin:0 auto;
}

.tags {
	list-style:none;
	margin:0;
	padding:0;
}
.tags li { display:inline-block;}
.tags a {
	color:var(--misfits-white);
	border:1px solid white;
	display:inline-block;
	padding:0 10px;
	margin:0 2px;
	line-height:140%;
	text-decoration:none;
	border-radius:20px;
}
.tags a:hover {
	color:var(--misfits-cyan);
	border-color:var(--misfits-cyan);
}

/* ID ======================================================================= */

#navigation {
	 	background-color:#140024;
		padding:20px 0;
		width:100%;
		margin-bottom:20px;
	}
#navigation .logo-main {
	width:250px;
	margin-top:10px;
	display:inline-block;
}
#navigation .socialbar {display:none;}

#navigation nav {
	display:inline-block;
	width:100%;
	vertical-align: top;
	text-align:right;
	position:relative;		
	margin-top:-125px;
}	
#navigation nav:before {
	content:"\f0c9 ";
	font-family:"FontAwesome", sans-serif;
	font-size:40px;
	line-height:150px;
}
#navigation nav ul {
	display:none;
	right:0px;
	padding:20px;
	box-sizing:border-box;
	text-align:left;
	width:100%;
	margin:0;
	list-style:none;
	z-index:999;
	background-color:var(--misfits-black);
	border-radius:20px;
}
#navigation nav  li {
	padding:5px 0;
	font-size:25px;
}
#navigation nav  a {
	color:var(--misfits-white);
	text-decoration:none;
}

#happening {
	text-align:center;
}

#happening .posts {
  width:100%;
  display: flex;
  flex-wrap: wrap;
}

#happening  .blogpost {
	text-align:center;
	padding:0;
	position:relative;
	margin:20px;
  max-width:90%;
  border-radius:25px;
	border:10px solid var(--misfits-white);
	box-sizing:border-box;
  padding:20px;
  flex-grow: 1;
  width: 30%;
  min-height:350px;
}

#happening  .blogpost h3 {
	font-size:20px;
	margin-bottom:10px;
}
#happening  .blogpost p {
	margin:0;
	color:var(--misfits-gray);
}

#services .image {
	display:inline-block;
}

#team .image img { width:100%; }
#team .image {
	width:80%;
	display:block;
	margin:30px auto;
	text-align:right;
}
#team.section .content{
	display:inline-block;
	vertical-align: top;
}

#footer {
	background-color:var(--misfits-black);
	padding:20px 0;
	margin:0;
	margin-top:100px;
	width:100%;
}

#footer h2 {
	font-size:34px;
	margin:40px 0;padding:0;
}

#footer ul {
	margin:0;
	padding:0;
	list-style:none;
}
#footer ul a {
	color:var(--misfits-white);
	text-decoration:none;
}
#footer ul a:hover {
	color:var(--misfits-magenta);
}

#footer .about {
	margin-right:2%;
	display:inline-block;
	vertical-align:top;

}
#footer .navigation {
	width:100%;
	display:inline-block;
	vertical-align:top;

}
#footer .contact {
	
	display:inline-block;
	vertical-align:top;

}
#footer .misfitlogo {
	width:100%;
	display:inline-block;
	margin:20px 0;
}
#footer .logos {
	width:100%;
	margin:30px 0 0 0;
	border-top:3px solid var(--misfits-white);
}
#footer .socialbar { font-size:30px; }
#footer .logos .bar {
	margin:40px 0 0 0;
}

/* HOMEPAGE ================================================================= */

.home #navigation {	background-color:transparent; }

#banner {position:relative;}
#banner .subtitle {margin:50px 0;}
#banner .text {	display:inline-block;}
#banner .text h1 {font-size:40px;}
#banner .media {margin-top:40px;}

/* CONTENT ================================================================== */

.breadcrumb {
	list-style:none;
	margin:0;
	padding:0;
	font-size:20px;
}
.breadcrumb li {
	display:inline-block;
}
.breadcrumb li:before {
	content:" / ";
	margin:0 5px;
}
.breadcrumb li:first-child:before {
	content:"";
	margin:0;
}

.post {
	margin:0 0 50px 0;
}
.post h1 {
	margin:0 0;
}
.post h2 {
	font-size:32px;
	font-weight:400;
	margin:30px 0;
}

.meta {	margin-bottom:50px;}
.meta p {
	color:var(--misfits-gray);
	font-size:20px;
}

#sidebar {
	display:inline-block;
	margin-bottom:50px;
}
#sidebar .thumbnail {
	text-align:center;
	margin-bottom:20px;
}
#sidebar .thumbnail h3 {
	margin:20px 0 0px 0;
	font-size:27px;
}
#sidebar .thumbnail p {
	margin:0;
}
#sidebar .thumbnail img {
	width:100%;
	height:100%;
	border-radius:25px;
	border:10px solid var(--misfits-white);
	box-sizing:border-box;
}
#sidebar .button {
	width:100%;
	text-align:center;
	margin:10px 0;
	padding:0;
}


/* ==========================================================================
   BREAKPOINT CSS OVERRIDES
   ========================================================================== */

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

@media only screen and (max-width: 819px){
	#navigation nav:hover .sitenav { display:block;	}
  
  #happening .posts {
    width:100%;
    display:block;
    flex-wrap:nowrap;
  }
  
  #happening .blogpost
  {
    width:100%;
    min-height:auto!important;
  }
}

/* TABLETS & HIGHER ========================================================== */

@media only screen and (min-width: 819px){
	#navigation nav  {
		float:right;
		line-height:120px;
	}
	#navigation nav:before {
		display:none;
	}
	#navigation nav ul 	{
		list-style:none;
		display:inline-block;
		margin:0;padding:0;
		text-align:right;
		width:auto;
	    background-color:transparent;
	}
	#navigation nav li {
		display:inline-block;
		margin:0 5px;
	}
	#navigation nav li a {
		color:var(--misfits-white);
		text-decoration:none;
		font-size:23px;
		font-weight:400;
	}
	#navigation nav li a:hover {
		color:var(--misfits-cyan);
	}
	
	#banner .text h1 {font-size:45px;}
	#banner .text {
		width:52%;
		margin-top:0px;
	}
	#banner .media {
		width:55%;
		display:block;
		position:absolute;
		right:-30px;
		height:100%;
		top:-40px;
	}
	
	#happening { margin-bottom:60px; }
	#happening .blogpost .splat:before {
		content: url("images/splat-1.svgz");
		width: 330px;
		height: 280px;
		position:absolute;
		z-index:-1;
		top:-100px;left:-100px;
		filter: brightness(0) saturate(100%) invert(23%) sepia(57%) saturate(6994%) hue-rotate(290deg) brightness(90%) contrast(126%);
	}
	
	#services .image	{
		width:35%!important;
		margin:-20px 4% 0 4%;
	}
	#services .content	{
		width:50%;
		display:inline-block;
		vertical-align: top;
	}

	#engineering-services h2,
	#marketing-services h2 {
		text-align:left;
	}

	#engineering-services .image	{
		width:15%!important;
		margin:20px 4% 0 4%;
		display:inline-block;
	}
	#engineering-services .content	{
		width:70%;
		display:inline-block;
		vertical-align: top;
	}
	/* 2 column checklist */
	#engineering-services .checklist {
		columns:2;
		column-gap:20px;
	}

	#marketing-services .image	{
		width:15%!important;
		margin:20px 4% 0 4%;
		display:inline-block;
	}

	#marketing-services .content	{
		width:70%;
		display:inline-block;
		vertical-align: top;
	}

	#marketing-services .checklist {
		columns:2;
		column-gap:20px;
	}
	
	#team .image {
		width:45%;
		display:inline-block;
		margin:0px 0 0 8%;
	}
	#team .content {
		width:45%;
	}
	
	#footer .about {
		width:23%;
		margin-right:2%;

	}
	#footer .navigation {
		width:15%;

	}
	#footer .contact {
		width:20%;

	}
	#footer .misfitlogo {
		width:32%;
		margin-left:7%;
		vertical-align:top;
	}
	
	.button-group li {
		display:inline-block;
		margin:0 15px 0 0;
	}
	
	.bar li { margin:10px 30px; }
	.bar.logobar { margin:150px 0 50px 0; }
	
	#content {
		width:64%;
		margin-right:10%;
		display:inline-block;
		vertical-align:top;
	}
	
	#sidebar {
		width:25%;
		vertical-align:top;
	}
	
}

/* DESKTOPS ================================================================= */

@media only screen and (min-width: 1160px){
	
	.home #navigation .logo-main { width:370px; }
	#navigation .logo-main 	{
		margin-top:10px;
		display:inline-block;
	}
	#navigation nav li {
		margin:0 10px!important;
	}	
	#navigation nav .socialbar {
		margin-left:40px;
		display:inline-block;
	}
	
	#banner .text h1 {font-size:60px;}
	#banner .text {
		width:45%!important;
	}
	#banner .media {
		width:50%!important;
		top:-60px;
		right:20px;
	}
	/*
	#happening .blogpost { transform:rotate(3deg); }
	#happening .blogpost:nth-child(2n) { transform:rotate(-1deg); }
	#happening .blogpost:nth-child(3n) { transform:rotate(2deg); }
	#happening .blogpost:hover { 
		transform:rotate(0deg) scale(1.1)!important; 
		transition:transform 0.15s linear;
	}*/
	
}

/* CSS Notes 

magenta filter: brightness(0) saturate(100%) invert(23%) sepia(57%) saturate(6994%) hue-rotate(290deg) brightness(90%) contrast(126%);
cyan filter: filter: brightness(0) saturate(100%) invert(70%) sepia(16%) saturate(3318%) hue-rotate(113deg) brightness(91%) contrast(101%);
yellow filter: filter: brightness(0) saturate(100%) invert(94%) sepia(89%) saturate(5886%) hue-rotate(326deg) brightness(96%) contrast(109%);

filter genarator from : https://angel-rs.github.io/css-color-filter-generator/

*/