@font-face{
	font-family: 'thunder';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/Thunder-LC.woff2') format('woff2'), url('../fonts/Thunder-LC.woff') format('woff');
}

@font-face{
	font-family: 'thunderBold';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/Thunder-BoldLC.woff2') format('woff2'), url('../fonts/Thunder-BoldLC.woff') format('woff');
}

@font-face{
	font-family: 'thunderLight';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/Thunder-LightLC.woff2') format('woff2'), url('../fonts/Thunder-LightLC.woff') format('woff');
}

@font-face{
	font-family: 'montserrat';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/Montserrat-Regular.woff2') format('woff2'), url('../fonts/Montserrat-Regular.woff') format('woff');
}

@font-face{
	font-family: 'montBold';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/Montserrat-Bold.woff2') format('woff2'), url('../fonts/Montserrat-Bold.woff') format('woff');
}

@font-face{
	font-family: 'montItalic';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/Montserrat-Italic.woff2') format('woff2'), url('../fonts/Montserrat-Italic.woff') format('woff');
}

*{
	box-sizing: border-box;
}

.noOFlow{
	overflow: hidden !important;
}

section, .container{
	position: relative;
}

.insight{
	position: absolute;
}

body{
	background-color: #eee;
}

nav{
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background-color: rgba(29, 29, 29, 0.5);
	filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.16));
	position: fixed;
	width: 100%;
	z-index: 3;
}

a{
	cursor: pointer;
	display: block;
	text-align: center;
	text-decoration: none;
}

ul{
	list-style: none;
}

#feat h1, p, a, ul{
	color: #EEEEEE;
}

.mobExp{
	display: none;
}

.container, #archiveLink .behan{
	margin-left: auto;
	margin-right: auto;
}

.featImg, .projPrev{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.img{
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}

.backGrad, .sixTwoFiveBg, .pixPopBg, .aiPsaBg, .octDotsBg{
	-moz-box-shadow: inset  0 -10px 10px -10px #000000;
	-webkit-box-shadow: inset  0 -10px 10px -10px #000000;
 	box-shadow: inset  0 -10px 10px -10px #000000;
}

.thunderReg{
	font-family: 'thunder';
}

.thunLite{
	font-family: 'thunderLight';
}

.headrz{
	color: #222222;
	font-family: 'thunderBold';
}

.navItems, .tabDeskNav, p, .email, a, ul, .colorBlock, .colorPopBlock, .colorOctBlock{
	font-family: 'montserrat';
}

.bold{
	font-family: 'montBold';
}

.italo{
	font-family: 'montItalic';
}

.flexBox{
	display: flex;
}

.invis{
	visibility: hidden;
}

.circOne{
    fill: transparent;
    stroke: #eee;
    stroke-miterlimit: 10;
    stroke-width: 5px;
}

.circTwo{
    fill: #eee;
}

.projContain{
	background-color: #eee;
	text-align: left;
	transition: 300ms;
}

.projContain:hover{
	filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5));
	transition: 350ms;
}

.whalePreview{
	background-image: url(../images/whale_prev.jpg);
}

.peoplePrev{
	background-image: url(../images/pplinps_prev.jpg);
}

.sixTwoPreview{
	background-image: url(../images/625_prev.jpg);
}

.pNpPrev{
	background-image: url(../images/pp_prev.jpg);
}

.aiPrev{
	background-image: url(../images/ai_prev.jpg);
}

.domPrev{
	background-image: url(../images/dom_prev.jpg);
}

.awards p{
	text-align: left;
}

#archiveLink .backGrad, #archiveLink .container{
	transform: scale(-1);
}

.linkedInSvg, .behanceSvg{
    fill: #eee;
}

.gramOne, .gramTwo, .linkedInSvg, .behanceSvg{
    stroke-width: 0px;
}

.signage{
	filter: drop-shadow(1px 1px 3px #3e0202);
}

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
	}

	.backGrad{
		background-image: url(../images/mobile/featbg_m.jpg);
	}

	nav .flexBox{
		padding-top: 1.5%;
	}

	/* NAVBAR ////////// */
		nav{
			height: 14vw;
			transition: 300ms;
		}

		.tabDeskNav{
			display: none;
		}

		.homWrap{
			margin-right: 62%;
			padding-top: 3.5%;
		}

		.home{
			font-size: 6vw;
		}

		.mobMenu{
			padding-top: 2.5%;
		}

		.menuIcon{
			background-image: url(../images/menu.png);
			display: block;
			height: 7vw;
			width: 7vw;
		}

		.mobExp{
			display: block;
			display: none;
			font-size: 5vw;
			margin-left: 40%;
			padding-top: 17.857142857142857%;
			position: absolute;
		}

		.navItems li{
			margin-bottom: 14.285714285714286%;
		}

		.navItems li:nth-of-type(4){
			margin-bottom: 0;
		}

		.exp{
			height: 60vw;
			transition: 300ms;
		}

	/* HERO SECTION ////////// */
		.noOFlow{
			min-height: 100vh;
		}

		#feat{
			height: 100%;
		}

		#feat .featImg{
			min-height: 100vh;
		}

		#feat h1{
			font-size: 12vw;
			padding-top: 30%;
		}

		.backGrad h1{
			margin-bottom: 2%;
		}

		.subFeat{
			font-size: 5.5vw;
			line-height: 7vw;
			margin-bottom: 7.142857142857142%;
			width: 73.214285714285714%;
		}

		.insight{
			top: 54.25%;
		}

		.featButton{
			margin-bottom: 7.142857142857142%;
			margin-left: 80.357142857142857%;
			width: 19.642857142857143%;
		}

	/* PROJECTS ////////// */
		.titleHed{
			font-size: 12vw;
			margin-bottom: 7.142857142857142%;
			padding-top: 42.857142857142857%;
		}

		.projContain{
			border-radius: 2rem;
			margin-bottom: 7.142857142857142%;
			padding: 5.714285714285714%;
		}

		#banads{
			margin-bottom: 42.857142857142857%;
		}

		.projPrev{
			border-radius: 1rem;
			margin-bottom: 7.142857142857142%;
			padding-top: 50%;
			width: 100%;
		}

		h2{
			font-size: 10vw;
			margin-bottom: 3.571428571428571%;
		}

		.adj{
			background-color: #222222;
			border-radius: 3.125rem;
			font-size: 3vw;
			margin-right: 3.571428571428571%;
			padding: 2.5%;
		}

		.adj:nth-of-type(3){
			margin-right: 0;
		}

		.archiveWrapper{
			padding-bottom: 30%;
			padding-top: 30%;
		}

		.archiveWrapper .behan{
			width: 21.428571428571429%;
		}

	/* MORE INFORMATION ////////// */
		#abt .titleHed:nth-of-type(1){
			width: 53.571428571428571%;
		}

		.skilz{
			margin-bottom: 7.142857142857142%;
		}

		.skillHold{
			width: 46.428571428571429%;
		}

		.skill{
			color: #222222;
			font-size: 3.35vw;
			line-height: 6vw;
		}

		.leftSide{
			margin-left: 7.142857142857142%;
			margin-right: 7.142857142857142%;
		}

		.toolz, .awards{
			margin-bottom: 42.857142857142857%;
		}

		.awardInfo{
			color: #222222;
			font-size: 3vw;
			line-height: 4vw;
			margin-bottom: 4%;
		}

		.awardInfo:nth-of-type(1){
			margin-right: 10%;
		}

		.awardInfo:nth-of-type(2){
			width: 44%;
		}

		.awardInfo:nth-of-type(3){
			margin-left: auto;
			margin-right: 0;
			text-align: right;
		}

		.awardLink:nth-of-type(1), .awardLink:nth-of-type(2){
			border-bottom: #9F0404 solid 1px;
		}

		.awardLink{
			margin-bottom: 6%;
			padding-bottom: 2%;
		}

	/* FOOTER ////////// */
		footer h1{
			color: #eeeeee;
			font-size: 12vw;
			margin-bottom: 3.571428571428571%;
			padding-top: 7.142857142857142%;
		}

		.email{
			font-size: 3vw;
			text-align: left;
			width: 55%;
		}

		.emailGroup{
			border-bottom: 0.25px #eeeeee solid;
			padding-bottom: 14.285714285714286%;
		}

		.signAnLinks{
			padding-top: 7.142857142857142%;
			padding-bottom: 14.285714285714286%;
		}

		.socials{
			margin-right: 5%;
		}

		.socials:nth-of-type(3){
			margin-right: 40%;
		}

		.linkIn{
			width: 5.929%;
		}

		.behan{
			padding-top: 1%;
			width: 8%;
		}

		.resume{
			font-family: 'thunder';
			font-size: 6vw;
			padding-top: 6%;
		}

		.signage{
			font-size: 3vw;
			padding-top: 3%;
			text-align: right;
		}
	/**/
/**/
}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.container{
		width:93.75%; /* 720 pixels at a 768 pixel screen width (iPads) */
	}

	.backGrad{
		background-image: url(../images/tablet/bkg_gradient_t.jpg);
	}

	/* NAVBAR ////////// */
		nav{
			height: 7.75vw;
		}

		.homWrap{
			margin-right: 45%;
			padding-top: 2.5%;
		}

		.home{
			font-size: 3vw;
		}

		.tabDeskNav{
			font-size: 2vw;
			padding-top: 3%;
		}

		.tabDeskNav li{
			margin-right: 10%;
		}

		.tabDeskNav li:nth-of-type(4){
			margin-right: 0;
		}

	/* HERO SECTION ////////// */
		.noOFlow{
			min-height: 75vh;
		}

		#feat{
			height: 75%;
		}

		#feat .featImg{
			min-height: 75vh;
		}

		#feat h1{
			font-size: 8vw;
			padding-top: 20%;
		}

		.backGrad h1{
			margin-bottom: 1%;
		}

		.subFeat{
			font-size: 3.5vw;
			line-height: 4vw;
			margin-bottom: 3.333333333333333%;
			width: 48.333333333333333%;
		}

		.hello, .subFeat{
			margin-left: 8.611111111111111%;
		}

		.insight{
			top: 39.25%;
		}

		.buttonWrap{
			padding-bottom: 20%;
		}

		.featButton{
			margin-bottom: 3.333333333333333%;
			margin-left: 77.5%;
			width: 13.888888888888889%;
		}

	/* PROJECTS ////////// */
		.titleHed{
			font-size: 6.5vw;
			margin-bottom: 3.333333333333333%;
			padding-top: 20%;
		}

		.projFlex{
			display: flex;
		}

		.projContain{
			border-radius: 2rem;
			margin-bottom: 3.333333333333333%;
			padding: 2.222222222222222%;
			width: 48.333333333333333%;
		}

		#banads{
			margin-bottom: 20%;
		}

		#sixtwofive, #aipsa, #whaleguard{
			margin-right: 3.333333333333333%;
		}

		.projPrev{
			background-color: #ccc;
			border-radius: 1rem;
			margin-bottom: 6.666666666666667%;
			padding-top: 50%;
			width: 100%;
		}

		h2{
			font-size: 5vw;
			margin-bottom: 3.333333333333333%;
		}

		.adj{
			background-color: #222222;
			border-radius: 3.125rem;
			font-size: 1.3vw;
			margin-right: 3.333333333333333%;
			padding: 3%;
		}

		.adj:nth-of-type(3){
			margin-right: 0;
		}

	/* MORE INFORMATION ////////// */
		.tdtFlex{
			display: flex;
			margin-bottom: 3.333333333333333%;
			margin-left: 8.611111111111111%;
		}

		.tdtFlex:nth-of-type(2){
			margin-bottom: 0;
		}

		#abt h2{
			margin-right: 17.222222222222222%;
		}

		.skillHold{
			width: 22vw;
		}

		.skill{
			color: #222222;
			font-size: 1.75vw;
			line-height: 4vw;
		}

		.leftSide{
			margin-right: 3.333333333333333%;
		}

		.toolz, .awards{
			margin-bottom: 20%;
		}

		.awardInfo{
			color: #222222;
			font-size: 1.75vw;
			line-height: 4vw;
			margin-bottom: 2%;
			width: 33.3%;
		}

		.awardInfo:nth-of-type(3){
			margin-left: auto;
			margin-right: 0;
			text-align: right;
		}

		.awardLink:nth-of-type(1), .awardLink:nth-of-type(2){
			border-bottom: #9F0404 solid 1.5px;
		}

		.awardLink{
			margin-bottom: 3%;
			padding-bottom: 1%;
		}

	/* FOOTER ////////// */
		footer h1{
			color: #eeeeee;
			font-size: 7vw;
			margin-bottom: 1.666666666666667%;
			padding-top: 3.333333333333333%;
		}

		.email{
			font-size: 1.75vw;
			text-align: left;
			width: 30%;
		}

		.emailGroup{
			border-bottom: 0.25px #eeeeee solid;
			padding-bottom: 6.666666666666667%;
		}

		.signAnLinks{
			padding-top: 3.333333333333333%;
			padding-bottom: 6.666666666666667%;
		}

		.socials{
			margin-right: 3.333333333333333%;
		}

		.socials:nth-of-type(3){
			margin-right: 68%;
		}

		.linkIn{
			width: 3.472222222222222%;
		}

		.archiveWrapper{
			padding-bottom: 20%;
			padding-top: 20%;
		}

		.archiveWrapper .behan{
			width: 10%;
		}

		.behan{
			padding-top: 0.65%;
			width: 4.5%;
		}

		.resume{
			font-family: 'thunder';
			font-size: 3.5vw;
		}

		.signage{
			font-size: 1.5vw;
			padding-top: 1.25%;
			text-align: right;
		}
	/**/
/**/
}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){
	.container{
		/*width:978px;*/
		width:95.5%;
	}

	.backGrad{
		background-image: url(../images/desktop/bkg_gradient_d.jpg);
	}

	/* NAVBAR */
		nav{
			height: 5vw;
		}

		.homWrap{
			margin-right: 64%;
			padding-top: 1.7%;
		}

		.home{
			font-size: 2vw;
		}

		.home, .tabDeskNav li a{
			transition: 300ms;
		}

		.home:hover, .tabDeskNav li a:hover{
			color: #9F0404;
			transition: 350ms;
		}

		.tabDeskNav{
			font-size: 1.2vw;
			padding-top: 2%;
		}

		.tabDeskNav li{
			margin-right: 14%;
		}

		.tabDeskNav li:nth-of-type(4){
			margin-right: 0;
		}

	/* HERO SECTION ////////// */
		.noOFlow{
			min-height: 100vh;
		}

		#feat{
			height: 100%;
		}

		#feat .featImg{
			min-height: 100vh;
		}

		#feat h1{
			font-size: 8vw;
			padding-top: 15.337423312883436%;
		}

		.backGrad h1{
			margin-bottom: 1%;
		}

		.subFeat{
			font-size: 3vw;
			line-height: 4vw;
			margin-bottom: 3.067484662576687%;
			width: 48.333333333333333%;
		}

		#feat h1, .subFeat, #sixtwofive, #aipsa, #whaleguard{
			margin-left: 8.588957055214724%;
		}

		.insight{
			top: 49%;
		}

		.buttonWrap{
			padding-bottom: 3.067484662576687%;
		}

		.featButton{
			margin-bottom: 3.067484662576687%;
			margin-left: 77.300613496932515%;
/*			transition: 300ms;*/
			width: 10.224948875255624%;
		}

		.featButton .circOne, .featButton .circTwo{
			transition: 300ms;
		}

		.featButton:hover .circOne{
			fill: #eee;
			transition: 350ms;
		}

		.featButton:hover .circTwo{
			fill: #9F0404;
			transition: 350ms;
		}

	/* PROJECTS ////////// */
		.titleHed{
			font-size: 5vw;
			margin-bottom: 3.067484662576687%;
			padding-top: 15.337423312883436%;
		}

		.projFlex{
			display: flex;
		}

		.projContain{
			border-radius: 2rem;
			margin-bottom: 3.067484662576687%;
			padding: 1.6359918200409%;
			width: 39.877300613496933%;
		}

		.projContain:hover h2{
			color: #9F0404;
			transition: all 350ms ease-in-out;
		}

		.projContain:hover .adj{
			background-color: #BA688F;
			transition: all 350ms ease-in-out;
		}

		.projContain .adj, .projContain h2{
			transition: all 300ms ease-in-out;
		}

		#sixtwofive, #aipsa, #whaleguard{
			margin-right: 3.067484662576687%;
		}

		.projPrev{
			background-color: #ccc;
			border-radius: 1rem;
			margin-bottom: 6.134969325153374%;
			padding-top: 50%;
			width: 100%;
		}

		h2{
			font-size: 4vw;
			margin-bottom: 3.571428571428571%;
		}

		.adj{
			background-color: #222222;
			border-radius: 3.125rem;
			font-size: 1vw;
			margin-right: 3.067484662576687%;
			padding: 3%;
		}

		.adj:nth-of-type(3){
			margin-right: 0;
		}

	/* MORE INFORMATION ////////// */
		.tdtFlex{
			display: flex;
			margin-bottom: 3.067484662576687%;
			margin-left: 8.588957055214724%;
		}

		.tdtFlex:nth-of-type(2){
			margin-bottom: 0;
		}

		#abt h2{
			margin-right: 34.355828220858896%;
		}

		.skillHold{
			width: 20vw;
		}

		.skill{
			color: #222222;
			font-size: 1.5vw;
			line-height: 3vw;
		}

		.leftSide{
			margin-right: 3.067484662576687%;
		}

		.toolz, .awards{
			margin-bottom: 15.337423312883436%;
		}

		.awardInfo{
			color: #222222;
			font-size: 1.25vw;
			line-height: 2vw;
			margin-bottom: 1rem;
			transition: 300ms;
			width: 33.3%;
		}

		.awardInfo:nth-of-type(3){
			margin-left: auto;
			margin-right: 0;
			text-align: right;
		}

		.awardLink:nth-of-type(1), .awardLink:nth-of-type(2){
			border-bottom: #9F0404 solid 1.5px;
		}

		.awardLink{
			margin-bottom: 1.5rem;
			padding-bottom: 0.5rem;
		}

		.awardLink p{
			transition: 300ms;
		}

		.awardLink:hover p{
			color: #9F0404;
			font-family: 'montItalic';
			transition: 350ms;
		}

	/* FOOTER ////////// */
		footer h1{
			color: #eeeeee;
			font-size: 6vw;
			margin-bottom: 1.533742331288344%;
			padding-top: 3.067484662576687%;
		}

		.email{
			font-size: 1.25vw;
			text-align: left;
			width: 21%;
		}

		.emailGroup{
			border-bottom: 1px #eeeeee solid;
			padding-bottom: 6.134969325153374%;
		}

		.signAnLinks{
			padding-top: 3.067484662576687%;
			padding-bottom: 6.134969325153374%;
		}

		.socials{
			margin-right: 3.067484662576687%;
		}

		.socials:nth-of-type(3){
			margin-right: 74%;
		}

		.linkIn{
			width: 2.556237218813906%;
		}

		.linkIn, .behan, .resume{
			transition: 300ms;
		}

		.linkIn:hover, .behan:hover, .resume:hover{
			filter: drop-shadow(1px 1px 3px #3e0202);
			transform: scale(1.5);
			transition: 350ms;
		}

		.behan{
			width: 3.5%;
		}

		.behan svg{
			padding-top: 10%;
		}

		.resume{
			font-family: 'thunder';
			font-size: 2.5vw;
			padding-top: 3%;
		}

		.signage{
			font-size: 1.25vw;
			padding-top: 0.75%;
			text-align: right;
		}
	/**/
/**/
}