/* ****************************************************************************************************** */
/* ************************************ GLOBAL RESETS & SETUP STUFFS ************************************ */ 
/* ****************************************************************************************************** */

@import url(https://fonts.googleapis.com/css?family=Rubik:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700);
@import url("font-awesome.min.css");

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		color: #5b5b5b;
		font-size: 15pt;
		line-height: 1.85em;
  		font-family: 'Roboto', Helvetica, sans-serif;
		font-weight: 300;
	}


	h1, h2, h3, h4, h5, h6 {
		font-family: 'Rubrik', Helvetica, sans-serif;
		font-weight: 700;
		color: #2A2929;
		line-height: 1.25em;
		padding: 1.3em 0 .5em 0;
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		font-family: 'Rubrik', Helvetica, sans-serif;
		color: inherit;
		text-decoration: none;
		border-bottom-color: transparent;
	}

	h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
		font-weight: 600;
	}

	h2 {
		font-size: 2.2em;
	}

	h3 {
		font-size: 1.2em;
	}

	h4 {
		font-size: 1em;
		margin: 0 0 0.25em 0;
	}

	strong, b {
		font-weight: 600;
		color: #2A2929;
	}

	em, i {
		font-style: italic;
	}

	a {
		font-weight: 600;
		color: #0080FF;
		border-bottom: none;
		transition: 0.3s;
		text-decoration: none;
	}

	a:hover {
		color: #51A8FF;
		border-bottom: none;
  		transition: 0.3s;
  		text-decoration: underline;
	}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	blockquote {
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}

	p, ul, ol, dl, table {
		margin-bottom: 1em;
	}

	p {
		text-align: justify;
	}

	br.clear {
		clear: both;
	}

	hr {
		position: relative;
		display: block;
		border: 0;
		top: 4.5em;
		margin-bottom: 9em;
		height: 6px;
		border-top: solid 1px rgba(128, 128, 128, 0.2);
		border-bottom: solid 1px rgba(128, 128, 128, 0.2);
	}

		hr:before, hr:after {
			content: '';
			position: absolute;
			top: -8px;
			display: block;
			width: 1px;
			height: 21px;
			background: rgba(128, 128, 128, 0.2);
		}

		hr:before {
			left: -1px;
		}

		hr:after {
			right: -1px;
		}


/* **************************************************************************************************** */
/* ************************************ CUSTOM STYLE ENTRIES BELOW ************************************ */ 
/* **************************************************************************************************** */






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

/* Primary Header Styles */

#header {background-color: #F8F8F8; padding-bottom: 7em;}
#header-logo {height: 74px; margin-top: .9em; float: left;}
#header-logo img {max-height: 60px;}
#header h1 {color: #2A2929; font-size: 3em; line-height: 1.3em; font-weight: 600;}
#header .content {max-width: 1920px; padding: 1em 3em 0 3em; margin: 0 auto;}
.introduction-tagline {color: #058AFF;}
#navbox {max-width: 1920px; height: 102px; margin: 0 auto; padding: 0 3em;}
.nav {float: right;}
.nav ul {line-height: 1.5em; height: 1.8em; margin: 1.5em 0 0 0; padding: 0;}
.nav li {display: inline; font-size: .8em; padding: 0 0 0 1.5em;  margin: 0;}
.nav a:link {color: #797A8B; cursor: pointer; transition: 0.3s;}
.nav a:visited {color: #797A8B; cursor: pointer; transition: 0.3s;}
.nav a:hover {color: #0080FF; cursor: pointer; transition: 0.3s;}
.nav a:active {color: #797A8B; cursor: pointer; transition: 0.3s;}

/* End of Primary Header Styles */

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

/* Project 01 Styles */
#header-01 {background-color: #F8F8F8; padding-bottom: 12em;
 width: 100%;
 text-align: center;
 background-image: url("../../images/project-header-01.jpg");
 background-size: cover;
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: center; 
}

#header-01 h1 {color: #fff; font-size: 2.6em; line-height: 1.3em; font-weight: 600; text-align: center;}
#header-01 p {color: #fff; font-size: 1.2em; line-height: 1.4em; font-weight: 400; text-align: center; width: 45%; margin: 0 auto;}
#header-01 .content {max-width: 1920px; padding: 1em 3em 0 3em; margin: 0 auto;}


.content-block-01 {	
	max-width: 780px; 
	padding: 2em 0 0 0; 
	margin: 0 auto;
}

.content-block-01 h2 {color: #1C1D1F; font-size: 1.4em; line-height: 1.3em;}
.content-block-01 p {color: #333333; font-size: .8em; line-height: 1.8em;}
.content-block-01 ul {padding-left: 1.2em;}
.content-block-01 li {color: #333333; font-size: .8em; line-height: 1.8em; list-style-type: disc; padding-bottom: .5em;}

.sub-block-the-process {
	background: #1B1027; 
	text-align: center; 
	padding: 3em 0 5em 0; 
	margin-top: 3em;
	background-image: url("../../images/target-audience-bg.jpg");
	background-size: cover;
 	background-attachment: fixed;
 	background-repeat: no-repeat;
 	background-position: center; 
}

.sub-block-the-process h2 {color: #fff;}
.sub-block-the-process p {color: #fff; font-size: 1.2em; line-height: 1.4em; font-weight: 400; text-align: center; width: 45%; margin: 0 auto;}

#comp-analysis-block {max-width: 1680px; display: flex;margin: 2.6em auto 1em auto;}
#comp-analysis-block .thumbblock img {margin-bottom: 0; max-width: 268px; max-width: 100%; height: auto;}
#comp-analysis-block .thumbblock p {text-align: center; font-weight: bold; color: #333; font-size: .8em; margin-top: 0;}


#comp-analysis-block-2 {max-width: 1190px; display: flex; flex-wrap: wrap; margin: 2.6em auto 1em auto;}
#comp-analysis-block-2 .thumbblock img {margin-bottom: 0; max-width: 268px; max-width: 100%; height: auto;}
#comp-analysis-block-2 .thumbblock p {text-align: center; font-weight: bold; color: #333; font-size: .8em; margin-top: 0;}


#targ-aug {
	width: 1400px; 
	margin: 3em auto; 
	display: flex; 
	flex-wrap: wrap;
}

#targ-aug h4 {color: #fff; font-size: .9em; padding: 0;}
#targ-aug p {color: #fff; font-size: .8em; padding: 0; width: 320px;}

.target-aud-desc {
	padding: 2em 2em;
	float: left; 
	text-align: center; 
	margin-left: 2.3em;
	border: 3px solid #4C4356; 
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */
}





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





.content-block {	
	max-width: 1920px; 
	padding: 6em 3em 0 3em; 
	margin: 0 auto;
}


.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 6px;
}

.column img {
  vertical-align: middle;
  width: 100%;
}

.column h3 {
	font-size: 1em;
}

/* Fixes the odd alignment on the first thumbnail row */
.first {margin-left: -.3em !important;}

.clearfix {clear: both;}

/* ABOUT ME */

#aboutme-sub-block {
	background-image: url("../../images/about-me-sub-section-bg.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover; 
	background-size: cover; 
	padding: 4em 0 8em 0;
}
#aboutme-sub-block .section {max-width: 1920px; margin: 0; padding: 0; color: #fff;}
#aboutme-sub-block .section h2 {color: #fff;}

.profile-photo {max-width: 5%; float: left; margin-right: 1.4em; margin-top: .5em;}
.socicons {float: left;}


/* Footer */

#footer {
	position: relative;
	overflow: hidden;
	padding: 1em 0 1em 0;
	background: #1A1720;
}

#footer .icon.circled {
	background: #fff;
	color: #847086;
}

#footer header {
	text-align: center;
	cursor: default;
}

#footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
	color: #797A8B;
	margin: 1em 0;
}

#footer .contact {
	text-align: center;
}

#footer .contact p {
	color: #84808F;
	font-size: .8em;
	max-width: 90%; 
	margin: 0 auto; 
	padding: 0;
}



/*  FontAwesome Icons */


ul.icons {
	position: relative;
	/* background: rgba(128, 128, 128, 0.05); */
	border-radius: 4em;
	display: inline-block;
	padding: 0.35em 0.75em 0.35em 0;
	font-size: 1.25em;
	cursor: default;
	list-style: none;
}

ul.icons li {
	display: inline-block;
	padding-left: 0;
}

ul.icons li a {
	display: inline-block;
	background: none;
	width: 2.5em;
	height: 2.5em;
	line-height: 2.5em;
	text-align: center;
	border-radius: 100%;
	border: 0;
	color: inherit;
}

ul.icons li a:hover {
	color: #ef8376;
}

.icon {
	text-decoration: none;
}

.icon:before {
	display: inline-block;
	font-family: FontAwesome;
	font-size: 1.25em;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon > .label {
	display: none;
}

.icon.circled {
	position: relative;
	display: inline-block;
	color: #fff;
	border-radius: 100%;
	width: 3em;
	height: 3em;
	line-height: 3.25em;
	text-align: center;
	font-size: 1.25em;
}


/* **************************************************************************************************** */
/* ************************************** MEDIA QUERY STYLES AT *************************************** */ 
/* **************************************************************************************************** */


@media screen and (min-width: 1200px) {
#aboutme-sub-block .section {max-width: 1274px; margin: 0 auto; padding: 1em 3em 0 3em; color: #fff;}
}


@media screen and (max-width: 1280px) {
	#footer {padding: 1em 0;}

}

@media screen and (max-width: 1210px) {
	#aboutme-sub-block .section {max-width: 1210px; padding: 1em 3em 0 3em;}
}

@media screen and (max-width: 1175px) {
	#aboutme-sub-block .section {max-width: 1170px; padding: 1em 3em 0 3em;}
}

@media screen and (max-width: 1024px) {
	h1 {font-size: 2.2em !important;}
	h2 {font-size: 1.6em;}
	h3 {font-size: 1em;}
	h4 {font-size: .8em; margin: 0 0 0.25em 0;}

	#header {padding-bottom: 4em;}
	#header-logo {height: 45px; margin-top: .9em; float: left;}
	#header-logo img {max-height: 45px;}
	.nav ul {margin: 1.2em 0 0 0;}
	.content-block {padding: 3em 3em 0 3em;}
	#aboutme-sub-block {padding: 3em 0 8em 0;}
	#aboutme-sub-block .section {max-width: 1090px; padding: 1em 3em 0 3em;}
	.column h3 {font-size: .9em; padding-bottom: 3em;}
	#footer {padding: 0;}

}

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

	h1 {font-size: 1.8em !important;}
	h2 {font-size: 1.2em; line-height: 1.4em;}
	h3 {font-size: 1em;}
	h4 {font-size: .8em; margin: 0 0 0.25em 0;}

	#header {padding-bottom: 3em; }
	#header-logo {height: 32px; margin-top: .9em; float: left;}
	#header-logo img {max-height: 32px;}

	#header .content {padding: 1em 1em 0 1em; margin: 0 auto;}
	#navbox {height: 102px; margin: 0 auto;padding: 0 1em;}
	#aboutme-sub-block .section {max-width: 100%; padding: 1em 1em 0 1em;}
	.content-block {padding: 3em 1em 0 1em;}
	.section p {font-size: 16px; line-height: 1.7em;}

	/* Create two equal columns that sits next to each other */
	.column {flex: 50%; max-width: 50%; padding: 0 6px;}
	#footer {padding: 2em 0 2em 0;}

	/* Footer area */
	#footer .copyright {color: #797A8B; font-size: 0.7em; padding: 0;}
	#footer {padding: 1em 0 6em 0;}
	.profile-photo {max-width: 14%; float: left; margin-right: 1.4em; margin-top: .5em;}
	.nav ul {line-height: 1.5em;height: 1.8em; margin: 1em 0 0 0; padding: 0;}
	.nav li {display: inline; font-size: .7em; padding: 0 0 0 1.5em;  margin: 0;}
}



@media screen and (max-width: 502px) {
	#header .content {padding: 0 1em 0 1em; margin: 0 auto;}
	#navbox {height: 75px; margin: 0 auto;}
	/* Create two equal columns that sits next to each other */
	.column {flex: 100%; max-width: 100%; padding: 0 6px;}
	#footer .contact p {
		color: #84808F;
		font-size: .8em;
		max-width: 90%; 
		margin: 0 auto; 
		padding: 0;
	}

}


@media screen and (max-width: 393px) {
	#header .content {padding: 0 1em 0 1em; margin: 0 auto;}
	#navbox {height: 75px; margin: 0 auto;}
	/* Create two equal columns that sits next to each other */
	.column {flex: 100%; max-width: 100%; padding: 0 6px;}
	#footer .contact p {
		color: #84808F;
		font-size: .8em;
		max-width: 320px;; 
		margin: 0 auto; 
		padding: 0;
	}

}