/*-------------------------------------------*/
/*----------------CSS RESET------------------*/
/*-------------------------------------------*/
body, p, a, h1{
	margin:0px;
	padding:0px;
	text-decoration: none;
}
body {overflow-x: hidden;}

.desktopClear{clear:both;}
.clear{clear:both;}

/*-------------------------------------------*/
/*---------------HEADER----------------------*/
/*-------------------------------------------*/
.logo {
	background:url(../images/logo.png) no-repeat center;
	background-size:contain;
	width:230px;
	height:60px;
	position:absolute;
	top:10px;
	left:0px;
	z-index:999;
}
.filters {
	display:flex;
	justify-content: space-around;
	width:44%;
	margin:50px 28%;
	padding:2px 10px;
	border-radius:25px;
	border:1px solid #02a6f3;
}
.filters a {
	font-family: 'Muli', sans-serif;
	font-weight:400;
	text-transform:capitalize;
	color:#02a6f3;
	padding:6px 30px;
	border-radius:25px;
	transition:0.4s all ease-in-out;
}
.filters a.active, .filters a:hover {
	background:#02a6f3;
	color:white;
}

@media screen and (max-width:900px){
	.filters a {
		width:100%;
		text-align:center;
		/* float:left; */
	}
	.filters {flex-wrap:wrap; width:80%; margin-left:7%;}
}
/*-------------------------------------------*/
/*---------------GALLERY---------------------*/
/*-------------------------------------------*/
#brick-layout-holder {
	width:90%;
	margin:20px 5%;
}
.grid__item {overflow:hidden;}

.card-overlay {
	background:rgba(0, 0, 0, 0.65);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	opacity:0;
	transition:0.4s all ease-in-out;
}

.grid__item:hover .card-overlay {opacity:1; cursor:pointer;}

.overlay-hover {
	background:#02a6f3;
	position:absolute;
	color:white;
	width:100%;
	bottom:-30px;
	padding:10px 0;
	transition:0.4s all ease-in-out;
}
.grid__item:hover .overlay-hover {bottom:0px;}
p.card-title {
	font-family: 'Muli', sans-serif;
	font-weight:400;
	color:white;
	font-size: 34px;
	border-left:4px solid #02a6f3;
	padding-left:15px;
	margin:50px 0 0 30px;
}
.overlay-hover p {
	font-family: 'Muli', sans-serif;
     font-weight: 400;
	float:left;
	margin-left:10px;
}
.overlay-hover p span {
     font-weight: 700;
}
.overlay-hover i {
	float:right;
	margin-right:10px;
	font-size:18px;
}
/* Grid */

.grid {
	position: relative;
	z-index: 2;
	display: block;
	margin: 0 auto;
}

.grid--hidden {
	position: fixed !important;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	opacity: 0;
}

.js .grid--loading::before,
.js .grid--loading::after {
	content: '';
	z-index: 1000;
}

.js .grid--loading::before {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #2c2d31;
}

.js .grid--loading::after {
	position: absolute;
	top: calc(25vh - 20px);
	left: 50%;
	width: 40px;
	height: 40px;
	margin: 0 0 0 -20px;
	border: 8px solid #383a41;
	border-bottom-color: #565963;
	border-radius: 50%;
	animation: animLoader 0.8s linear forwards infinite;
}

.grid__sizer {
	margin-bottom: 0 !important;
}

.grid__link,
.grid__img {
	display: block;
}

.grid__img {
	width: 100%;
}

.grid__deco {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.grid__deco path {
	fill: none;
	stroke: #fff;
	stroke-width: 2px;
}

.grid__reveal {
	position: absolute;
	z-index: 50;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	background-color: #2c2d31;
}

.grid .grid__item,
.grid .grid__sizer {
	width: calc(50% - 20px);
	margin: 0 10px 20px;
	opacity:0;
	transition:0.3s all ease-in-out;
}

@media screen and (min-width: 60em) {
	.grid .grid__item,
	.grid .grid__sizer {
		width: calc((100% / 3) - 20px);
		margin: 0 10px 20px;
	}
}

@media screen and (min-width: 70em) {
	.grid .grid__item,
	.grid .grid__sizer {
		width: calc(25% - 30px);
		margin: 0 15px 30px;
	}
	/* Grid types */
	.grid--type-b .grid__item,
	.grid--type-b .grid__sizer {
		width: calc(20% - 20px);
		margin: 0 10px 20px;
	}

	.grid--type-c .grid__item,
	.grid--type-c .grid__sizer {
		width: calc(25% - 16px);
		margin: 0 8px 16px;
	}
}

@media screen and (max-width: 50em) {
	main {
		display: block;
	}
	.codrops-header {
		padding: 1em;
		flex-wrap: wrap;
	}
	.codrops-links {
		margin: 0;
	}
	.codrops-header__title {
		width: 100%;
		text-align: left;
		flex: none;
		margin: 1em 0;
	}
	.content--side {
		width: 100%;
	}
	.content--right {
		order: 3;
	}
	.content--center {
		max-width: 100vw;
	}
	.control {
		margin: 0 0 1em;
		text-align: left;
	}
	.control__item,
	.control__btn {
		display: inline-block;
	}
	.control__btn {
		width: auto;
	}
}

/*-------------------------------------------*/
/*-----------GALLERY DETAILS-----------------*/
/*-------------------------------------------*/
#project-details {
	width:96%;
	margin-left:2%;
	position:fixed;
	top:70px;
	background:white;
	z-index:3;
	height:auto;
	opacity:0;
	transform:scale(1.2);
	pointer-events: none;
	transition:0.3s all ease-in-out;
}
#project-details.active {
	opacity:1;
	transform:scale(1.0);
	pointer-events:all;
}
#project-details.active.scroll {
	top:0;
}
#gallery-back {
	font-family: 'Muli', sans-serif;
	font-weight:400;
	color:black;
	margin:7px 0 20px 0;
	cursor:pointer;
}
#gallery-back i {font-size:24px; position:relative; top:3px;}
.project-left {
	float:left;
	width:50%;
	transition:0.3s all ease-in-out;
}
#project-image {width:100%; height:650px; background-size:contain !important; background-position:top center !important; background-repeat:no-repeat !important; transition:0.3s all ease-in-out;}

#project-image-previous {
	float:left;
	left:2%;
	color:#02a6f3;
	background:#fff;
	padding:12px 8px 5px 6px;
	border-top-right-radius:40px;
	border-bottom-right-radius:40px;
	font-size:30px;
	width:25px;
	height:45px;
	margin-top:40%;
	cursor:pointer;
	display:none;
}
#project-image-next {
	float:right;
	right:2%;
	color:#02a6f3;
	background:#fff;
	padding:12px 6px 5px 8px;
	border-top-left-radius:40px;
	border-bottom-left-radius:40px;
	font-size:30px;
	width:25px;
	height:45px;
	margin-top:40%;
	cursor:pointer;
	display:none;
}

.project-right {
	float:right;
	width:40%;
	transition:0.3s all ease-in-out;
}
#project-name {
	font-family: 'Muli', sans-serif;
	font-weight:400;
	color:black;
	background:#fff;
	font-size:24px;
	border-left:4px solid #fff;
	padding:8px 10px;
	margin:10px 0 10px 0px;
	float:left;
	transition:0.3s 0.4s all ease-in-out;
}
#project-details.active #project-name {background:#f2f2f3; border-left:4px solid #02a6f3;}
#project-category {
	font-family: 'Muli', sans-serif;
	font-weight:400;
	color:black;
	clear:both;
	float:left;
	margin:7px 0;
	opacity:0;
	transition:0.3s 0.7s all ease-in-out;
}
#project-category i {margin-right:8px;}
#project-details.active #project-category {opacity:1;}

#project-code {
	font-family: 'Muli', sans-serif;
	font-weight:400;
	color:black;
	clear:both;
	float:left;
	margin:7px 0;
	opacity:0;
	transition:0.3s 0.7s all ease-in-out;
}
#project-code i {margin-right:8px;}
#project-details.active #project-code {opacity:1;}

#project-description {
	font-family: 'Muli', sans-serif;
	font-weight:400;
	line-height:2.0;
	color:black;
	clear:both;
	float:left;
	margin:15px 0;
	opacity:0;
	transition:0.3s 1.0s all ease-in-out;
}
#project-details.active #project-description {opacity:1;}

#project-link {
	font-family: 'Muli', sans-serif;
	font-weight:400;
	line-height:2.0;
	color:white;
	background:#02a6f3;
	clear:both;
	float:left;
	padding:7px 15px;
	margin:7px 0;
	opacity:0;
	transition:0.3s 1.3s all ease-in-out;
}
#project-details.active #project-link {opacity:1;}

#project-github {
	color:#02a6f3;
	float:left;
	margin:8px 12px;
	font-size:32px;
	opacity:0;
	cursor:pointer;
	transition:0.3s 1.3s all ease-in-out;
}
#project-details.active #project-github {opacity:1;}

#project-previous {
	color:#02a6f3;
	border:1px solid #02a6f3;
	padding:8px 10px;
	clear:both;
	float:left;
	margin:30px 0;
	cursor:pointer;
	transition:0.3s all ease-in-out;
}
#project-previous:hover {color:#fff; background:#02a6f3;}

#project-next {
	color:#02a6f3;
	border:1px solid #02a6f3;
	padding:8px 10px;
	float:right;
	margin:30px 0;
	cursor:pointer;
	transition:0.3s all ease-in-out;
}
#project-next:hover {color:#fff; background:#02a6f3;}

/* Specific IFrame Styling */
.project-image-2 iframe, .project-image-3 iframe {
	border:0;
	width:300px;
	height:250px;
	position:relative;
	left:50%;
	margin-left:-150px;
}
.project-image-4 iframe {
	border:0;
	width:540px;
	height:300px;
	position:relative;
	left:50%;
	margin-left:-270px;
}
.project-image-13 iframe {
	border:0;
	width:416px;
	height:320px;
	position:relative;
	left:50%;
	margin-left:-208px;
}

@media screen and (max-width:900px){
	#project-details {width:100%; margin-left:0;}
	.project-left {width:96%; margin-left:2%;}
	.project-right {width:96%; margin-left:2%; float:left;}
	#project-details.active {position:absolute;}
	#project-previous, #gallery-back {margin-left:2%;}
	#project-next {margin-right:2%;}
	#project-image {height:400px;}
	#brick-layout-holder.masonryActive {display:none;}
}

/*-------------------------------------------*/
/*------------ABOUT SECTION------------------*/
/*-------------------------------------------*/
#about-section {
	position:absolute;
	top:80px;
	z-index:3;
	background:white;
	opacity:0;
	transform:scale(1.2);
	pointer-events: none;
	transition:0.3s all ease-in-out;
}
#about-section.active {
	opacity:1;
	transform:scale(1.0);
	pointer-events: all;
	transition:0.3s all ease-in-out;
}

.close-button {
	float:right;
	color:white;
	margin:-8px 10px 0 0;
	cursor:pointer;
}

.blue-bar {
	float:left;
	width:100%;
	padding:30px 0;
	background:#003a55;
}
.bar-title {
	color:white;
	text-align:center;
	font-family:'Exo';
	text-transform:uppercase;
	margin:0px 0 10px 0;
	font-size:15px;
}
.bar-content {
	color:white;
	text-align:center;
	font-family:'Muli';
	font-weight:400;
	font-size:25px;
}
.about-left {
	float:left;
	width:40%;
}
.about-left img {width:100%;}
.about-right {
	float:left;
	width:48%;
	margin-left:4%;
	margin-top:30px;
}
.skills-left {
	float:left;
	width:48%;
	margin-left:2%;
	margin-top:20px;
}
.skills-right {
	float:right;
	width:48%;
	margin-top:20px;
}
.skills-title {
	color:#003a55;
	font-family:'Muli';
	font-weight:400;
	font-size:20px;
}
.skills-title i {margin-right:5px;}
.skills-title + ul {
	list-style:none;
	color:#003a55;
	font-family:'Muli';
	font-weight:400;
	font-size:15px;
}
.skills-title + ul li {line-height:1.5;}
.company-content {display:none;}

.about-right input {
	float:left;
	clear:both;
	-webkit-appearance:none;
	background:url(../images/plus.png) no-repeat 50% 50% #d1effd;
	width:38px;
	height:38px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	border-right:3px solid #02a6f3;
}
.about-right input:checked {background:url(../images/minus.png) no-repeat 50% 50% #d1effd;}

.company-name {
	float:left;
	font-family:'Muli';
	font-weight:700;
	width:75%;
	color:#003a55;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	background:#f2f2f3;
	padding:9px 5px;
	margin:3px 0 0 -2px;
}
.company-content {
	clear:both;
}
.company-content ul {
	list-style:none;
	font-family:'Muli';
	font-weight:400;
	color:#003a55;
	font-size:15px;
	line-height:1.4;
	width:75%;
}
.company-content i {font-size:12px;}
.company-content p {
	font-family:'Muli';
	font-weight:700;
	color:#003a55;
	font-size:15px;
	line-height:1.8;
	margin:20px 0 -15px 4%;
}
.company-content p span{font-weight:400; font-style: italic;}
.about-right input:checked + .company-name + .company-content {display:block;}

.download-link {
	font-family: 'Muli', sans-serif;
	font-weight:400;
	line-height:2.0;
	color:white;
	background:#02a6f3;
	clear:both;
	float:left;
	padding:7px 15px;
	margin:10px 0;
	transition:0.3s all ease-in-out;
}

.download-link:hover {background:#142933;}

@media screen and (max-width:900px){
	.about-left {width:100%;}
	.about-right {width:100%;}
	#about-section {position:absolute;}
}

@media screen and (max-width:600px){
	.skills-left {width:96%; margin-left:2%;}
	.skills-right {width:96%; margin-left:2%;}
	#brick-layout-holder {width:98%; margin-left:1%;}
}


/*-------------------------------------------*/
/*-------------SLIDEOUT MENU-----------------*/
/*-------------------------------------------*/
body{
  color: #878787;
  font-family: Roboto, sans-serif;
  left: 0;
  line-height: 1.35;
  margin: 0;
  /* overflow: hidden; */
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: left 0.3s ease-in-out;
}
.panel-open{
    left: -250px;
}
.container{
  min-height: 1000px;
}
h1, h2, h3, h4, h5, h6{
  margin: 0;
  padding: 0;
}

header{
  color: #fff;
  padding:2em 5%;
  position: relative;
  width: 90%;
  z-index: 2;
}
.menu-toggle{
  cursor: pointer;
  float: right;
  font-size: 0.875rem;
  transition: all 0.3s ease-in-out;
}
  .menu-toggle .open{
    opacity: 0.5;
}

.menu-toggle-grippy{
  border-bottom: 5px solid #000;
  border-top: 5px solid #000;
  float: left;
  line-height: 0;
  margin-right: 1em;
  padding: 5px 0;
  text-indent: -999em;
  width: 35px;
}
.menu-toggle-grippy:after{
    background: #000;
    content: '';
    display: block;
    height: 5px;
}

.menu-toggle-label{
  float: left;
  font-family: 'Muli', sans-serif;
  font-weight: 400;
  height: 25px;
  letter-spacing: 1px;
  line-height: 25px;
  text-transform: uppercase;
  color:black;
}

.hidden-panel{
  background: #904400;
  color: #fcbc82;
  font-size: 0.875rem;
  height: 100%;
  position: absolute;
  right: -250px;
  top: 0;
  width: 250px;
  z-index:4;
}
.hidden-panel-content a {
    color: #fff;
    font-size:16px;
    transition: all 0.3s ease-out;
}
.hidden-panel-content a:hover{
	color: #fcbc82;
	font-weight:700;
	margin-left:10px;
}

.hidden-panel-close{
  color: #fcbc82;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top:17px;
  font-size:25px;
  transition: color 0.3s ease-in-out;
}
.hidden-panel-close:hover{
    color: #fff;
}

.hidden-panel-content{
  padding:23px 0;
}
.hidden-panel-nav{
  border-bottom: 1px solid #fcbc82;
  padding-bottom: 1.5em;
  margin:0 20px 1.5em 20px;
  text-transform: uppercase;
}
.hidden-panel h3{
	font-family: 'Muli', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 1em;
}
.hidden-panel ul{
	font-family: 'Muli', sans-serif;
	font-weight: 400;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hidden-panel li{
    padding:0;
}

.hidden-panel-text{
	font-family: 'Muli', sans-serif;
	font-weight: 400;
	line-height: 1.5;
	margin:0 20px;
}
.hidden-panel-text p{
	margin-bottom: 1.5em;
}
.hidden-panel-text p:last-child{
	margin-bottom:0;
}
.hidden-panel-text a{
	color:#fcbc82;
	float:left;
	margin:10px 15px 0 0;
	font-size:24px;
	transition:0.3s all ease-in-out;
}
.hidden-panel-text a:hover{
	color:#fff;
}
.banner{
	background: #f5756c;
	background: linear-gradient(#f5756c,#fd5480),#f5756c;
	box-sizing: border-box;
	height: 100%;
	left: 0;
	padding: 5em 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 1;
}
h1{
    color: #fff;
    font-family: 'Dancing Script';
    font-size: 4.375rem;
    margin-bottom: 1em;
}
h2{
    color: #fff;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.5;
    margin: 0 auto;
    width: 50%;
}