html
{
	height:100%;
	overflow:auto;
	font-size:100%;
}

body
{
	margin:0em;
	font-family: 'Gudea', sans serif;
	color:#000;
	font-size:1.15em;
}

/*--------------- HEADER AND MENU STYLES ----------------------------------------------------------------------------------------------------------------------*/

#navigation
{
	text-align:center;
}

#menu
{
	position:fixed;
	width:100%;
	margin-top:0em;
	background-color:#111;
	z-index:999;
}

#menu_ul { display:table; width:100%; margin:0em; padding:0.4em 0em 0.4em 0em; text-transform:uppercase; font-weight:bold; font-size:0.9em;  }
#menu_ul li { display:table-cell; list-style-type:none; display:inline-block; padding:0em 4em 0em 4em; }
#menu_ul li a { display:block; color:#fff; text-decoration:none; opacity:0.4; }

#header
{
	color:#fff;
	text-align:center;
	padding-bottom:10em;
	padding-top:10em;
	background:url('https://chrisbaraniuk.com/images/bokeh_r8.jpg') 50% 0 no-repeat fixed;
	position:relative;
	top:0em;
	
}

h1
{
	font-size:5.8em;
	margin-bottom:0em;
	margin-top:0em;
	position:relative;
	top:0em;
}

h2
{
	font-size:1.5em;
	margin-top:0em;
	padding-bottom:0.2em;
	border-bottom:0.06em solid #fff;
	margin:auto;
	width:18.2em;
	position:relative;
	top:0em;
}

.parallax-text
{
	display:inline-block;
	position:relative;
	top:0em;
}

h3
{
	font-size:1.4em;
	margin-top:0.5em;
	margin-bottom:0.5em;

}

h4
{
	font-size:1.7em;
	margin-top:0.5em;
	margin-bottom:1.4em;
	padding-top:0.1em;
	color:#f5075b;
	border-top:0.1em solid #f5075b;
	display:block;
}

.underlines { border-bottom:0.06em solid #f5075b; }

h5
{
	margin-top:0em;
	margin-bottom:0.3em;
	font-size:1.2em;
}

h6
{
	font-size:1.5em;
	margin-top:0em;
	margin-bottom:0em;
}

/*--------------- SECTION STYLES ----------------------------------------------------------------------------------------------------------------------*/

.inner_wrap
{
	width:55em;
	margin:auto;
}


#section-promo
{
	background-color:#efefef;
	height:auto;
	clear:both;
	border-top:0em #f6ff00 solid;
	border-bottom:0.3em #f6ff00 solid;
}

#section-portfolio
{
	background-color:#fff;
	padding-top:0em;
	border-bottom:0.3em solid #f6ff00;
	height:auto;
	clear:both;
}

#section-introduction
{
	background-color:#fff;
	padding:0em 0em;
	border-bottom:0.3em solid #f6ff00;
	height:auto;
}

#intro-left
{
	float:left;
	width:36em;
	margin-right:15px;
}

#section-skills
{
	background-color:#fff;
	height:auto;
	border-bottom:0.3em solid #f6ff00;
	padding-bottom:2.2em;
}

#section-contact
{
	color:#fff;
	clear:both;
	height:22em;
	background:url('https://chrisbaraniuk.com/images/bokeh_footer.jpg') no-repeat;
	background-position:left bottom;
	background-size:110em;
	position:relative;
	top:0em;
}

#contact
{
	width:29.5em;
	float:right;
	margin-top:1.6em;
}

#contact-blurb
{
	float:left;
	margin-top:2.2em;
	width:20em;
}

#section-footer
{
	clear:both;
	background:url('https://chrisbaraniuk.com/images/bg-sq-black-trans-45.png');
	height:5em;
	position:absolute;
	width:100%;
	bottom:0em;
}

/*--------------- CONTENT STYLES ----------------------------------------------------------------------------------------------------------------------*/

#top_text
{
	width:90%;
	background-color:#fff;
	margin:0.5em auto 0em auto;
	padding:0.5em 0em;
	color:#999;
	border-radius:0.3em;
	text-align:center;
	font-weight:bold;
	font-size:1.3em;
}

#newsletterpromo
{
	background-color:#efefef;
	padding:20px; 
	
}

#newsletterpromo_text
{
	display:block; 
	width:65%; 
	float:right; 
	padding-top:0em;
	margin-bottom:15px;
}

#newsletterpromo_imagelink 
{
	display:block; 
	width:30%; 
	float:left; 
	padding-left:0.8em; 
	padding-top:0.3em;
}

#section-promo img 
{
	width:85%; 
	display:block; 
	padding-bottom:0em;
	margin:0.5em auto 0em auto;
}

.label 
{
	background-color:#f6ff00;
	padding:0.5em 0.8em;
	color:#000;
	font-weight:bold;
	font-size:1em;
	font-family: 'Gudea', sans serif;
	position:relative;
	top:-0.75em;
	border-radius:0.3em;
}

.center { text-align:center; }

#section-portfolio a, #section-promo a, #section-skills a, #section-themachinestarts a
{
	color:#000;
	text-decoration:none;
	-webkit-transition:color 200ms ease-in;
-moz-transition:color 200ms ease-in;
-o-transition:color 200ms ease-in;
transition:color 200ms ease-in;
}

#section-portfolio a:hover, #section-promo a:hover, #section-skills a:hover, #section-themachinestarts a:hover
{
	color:#f5075b;
	-webkit-transition:color 200ms ease-in;
-moz-transition:color 200ms ease-in;
-o-transition:color 200ms ease-in;
transition:color 200ms ease-in;
}

#contact-wrapper { width:100%; }

#contact-blurb a { color:#fff; }

#footer-content
{
	padding-top:1.3em;
}

#footer-content p { margin-top:0em; font-size:0.9em; }

#section-footer a { color:#fff; }

.thumbnail { width:100%; }

.dateline_wrap { margin-bottom:0.4em; margin-top:0em; }
.dateline { font-size:80%; background-color:#f8f8f8; padding:0.2em 0.3em; color:#555; }

.p2
{
	margin-top:0.8em;
	margin-bottom:0em;
	-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}

.p3-first-char {
  color: #000;
  float: left;
  line-height:1em;
  font-size:2.3em;
  padding-top:0em;
  padding-right:0.05em;
  padding-left:0em;
  padding-bottom:0em;
}

.p3
{
	-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

	width:100%;
	margin-bottom:2.5em;
}

.underline { text-decoration:underline !important; }

#col_wrap
{
	margin-top:1.5em;
	padding-top:0em;
	width:100%;
	float:right;	
	text-align:center; 
}

.headlines
{
    font-size:1em;
	display:flex;
	justify-content:space-between;
	height:auto;
}

.headline_wrap
{
    width:17em;
	text-align:left;
	font-size:100%;
}

.headline_wrap p { padding-bottom:0.5em; }

.portfolio_blurbs_containers
{
	margin:0em 0em 0em 0em; 
	border-bottom:0em solid #ccc; 
	width:100%; 
	display:block; 
	clear:both;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size:0em;
    line-height:0em;
}

#newsletter {
	height:4.2em;
	margin:0.2em 0em 1em 0em;
	background-color:#00b275;
	padding:0.35em 0.4em 0.1em 0.6em;
	color:#fff;
	font-weight:bold;
	border-radius:1em;
	font-size:1.1em;
}

#newsletter img { float:left; margin:0.2em 0.4em 0em 0em; width:3.5em; }
#newsletter a, #newsletter a:hover { text-decoration:underline; color:#fff; }
#newsletter p { margin-top:0em; margin-bottom:0em; padding-top:0.1em; }

#beeb-mobile-view { display:none; }
#beeb-main-view { margin-left:0.8em; margin-top:0.9em; }

.form-col
{
	float:left;
	width:14.5em;
}

form { padding:0em; margin:0em; }

.form-col input { width:18em; height:1.7em; background:url('https://chrisbaraniuk.com/images/bg-sq-black-trans.png'); color:#aaa; border:0.05em solid #777; border-radius:0.4em; }

.form-col textarea { width:18em; height:6.5em; background:url('https://chrisbaraniuk.com/images/bg-sq-black-trans.png'); color:#aaa; border:0.05em solid #777; border-radius:0.4em; font-family: 'Gudea', sans serif; }

.send { display:block; position:relative; top:0.8em; padding:0.4em 0em; width:10em;  background:#111; border:0.05em solid #777; border-radius:0.4em; color:#cdcdcd; font-family: 'Gudea', sans serif; font-weight:bold; font-size:0.9em;
-webkit-transition:color 200ms ease-in;
-moz-transition:color 200ms ease-in;
-o-transition:color 200ms ease-in;
transition:color 200ms ease-in; }
.send:hover { color:#fff; 
-webkit-transition:color 200ms ease-in;
-moz-transition:color 200ms ease-in;
-o-transition:color 200ms ease-in;
transition:color 200ms ease-in; }

.form-col p { margin-bottom:0.1em; }

#result { width:10em;  margin:auto; border-radius:0.8em; border:0.05em solid #777; padding:1.5em; margin-top:2em; }
#result a { color:#fff; }

/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:70em) {

#newsletterpromo_text { font-size:0.9em; }

#menu_ul li { padding:0% 5%; }

#header { background-image:url('https://chrisbaraniuk.com/images/bokeh_r8_smaller.jpg'); padding-top:9em; padding-bottom:9em; }

#section-portfolio { height:auto; }

#section-promo img { width:100%; }

#top_text { font-size:1.2em; }

#section-introduction { height:auto; padding-bottom:1.5em; }

#section-skills { height:auto; }

#section-contact { height:auto; padding-bottom:9em; }

.inner_wrap { width:90%; padding:0% 0%; }

h1 { font-size:5em; }

h2 { font-size:1.3em; width:18em; }

h3 { font-size:1.24em; }

.p2 { margin-top:20px;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2; 

	width:100%;
}

.p3 { -moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2; }

#intro-left, #intro { float:none; width:100%; }
#col_wrap { float:none; margin:auto; width:30%;}
#col_wrap img { margin-top:1em; margin-bottom:1.2em; width:100%; }

.headline_wrap { width:31%; }

#newsletter { font-size:1.9vw; }

#section-skills { height:auto; padding-bottom:2em; }

#beeb-main-view { display:none; }
#beeb-mobile-view { display:block; margin:3vw auto 0vw auto; width:40%; }

#contact-wrapper { height:auto; margin:auto; width:100%; padding-top:2em; }

#contact-blurb { float:none; width:63%; margin:auto; }

#contact { float:none; margin:auto; width:65%; }
.form-col { width:45%; padding:0% 2%; }
#contact input { width:100%; }
#contact textarea { width:100%; }
.send { width:40% !important; margin:auto; }

#footer-content { text-align:center; }


/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:850px), only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {

#newsletterpromo_text { padding-top:-0.7em; font-size:0.8em; }

#section-promo img { width:80%; }

h1 { font-size:4.2em; }

h4 { font-size:1.4em; }

#menu_ul li { font-size:1em; padding:0% 3%; }

#header { padding-top:8em; padding-bottom:8em; }

#intro-left, #intro { width:100%; float:none; }

#col_wrap img { margin-bottom:0em !important; }

.p2 { -moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1; }

.p3 { -moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1; }

#newsletter { font-size:2vw; height:9vw; }

#skills-left { float:none; width:100%; }

#contact { width:100%; }

}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/

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

h1 { font-size:4.1em; }

.headlines { display:block; }

.headline_wrap { width:100%; max-height:999999px; }

#top_text { width:100%; font-size:3vw; }

#section-promo { height:35vw; padding:0vw; margin:0vw; }

#section-promo img { padding-top:2vw; padding-left:3vw; }

#newsletterpromo_text { font-size:2.9vw; width:58%; padding-top:2vw; padding-left:4vw; padding-right:1vw; }

#newsletterpromo_text p { width:100%; margin:0vw; }

#newsletterpromo { padding:0vw; }

#newsletterpromo .inner_wrap { width:100%; padding:0vw; margin:0vw; }

#newsletterpromo_imagelink { padding:0em; width:34%; }

#promo_second_par { display:none; }

#beeb-mobile-view { display:block; margin:3vw 0vw 0vw 0vw; width:100%; margin-bottom:0vw; }

}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:650px), only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {

body { font-size:3.8vw; }

#navigation { font-size:3vw; }

#menu_ul { padding:1.8vw 0vw; }

#menu_ul li { padding:0% 3.2%; }

#header { padding-top:12vw; padding-bottom:12vw; }

.inner_wrap p { max-height:999999px; }

.p2 { max-height:999999px; }

.p3 { margin-bottom:2vw; max-height:999999px; }

.p3-first-char {
  color: #000;
  float: none;
  font-size: 100%;
  line-height: 100%;
  padding-top: 0em;
  padding-right: 0em;
  padding-left: 0em;
}

#top_text { padding:0vw; margin-top:2vw; font-size:3.7vw; }

#section-promo { height:34.5vw; margin:0vw; }

#section-promo img { width:82%; padding-top:0vw; padding-left:1vw; }

#newsletterpromo { padding:0vw; margin:0vw; }

#newsletterpromo_text { padding-left:0vw; padding-top:1vw; padding-right:2vw; font-size:3.2vw; width:53%; float:right; }

#newsletterpromo_text p { margin:0vw; }

#newsletterpromo .inner_wrap { width:100%; }

#newsletterpromo_imagelink { padding-top:1vw; padding-left:1vw; padding-right:0vw; width:37%; position:relative; left:2vw; }

#promo_second_par { display:none; }


#section-portfolio { padding-top:0vw; }

#section-portfolio img { width:40%; margin-right:3vw; margin-bottom:2vw; float:left; }

.portfolio_blurbs_containers { max-height:999999px; }

.portfolio_blurbs { display:block; width:55%; float:right; }

.portfolio_blurbs p { margin:0vw; }

.portfolio_blurbs h5 { margin-top:0vw; }

.headlines { display:block; margin-right:0vw; margin-left:0vw; }

.headline_wrap { display:block; width:100%; max-height:999999px; }

.headline_wrap p { padding-bottom:2.5vw; margin-bottom:4vw; }

.label { padding:1.2vw 2vw; }

h1 { width:100%; font-size:11.5vw; }

h2 { width:71vw; font-size:3.9vw; }

h3 { font-size:3.8vw; }

h4 { margin-top:4vw; clear:both; }

h5 { font-size:3.8vw; margin-top:1vw; }

#newsletter { font-size:3.5vw; height:24vw; }

#col_wrap { width:50%; }

#beeb-mobile-view { width:70%; margin: 3vw auto 0vw auto; }

#section-contact
{
	height:132vw;
	background-position:20% 90%;
	background-size:101em;
	padding-bottom:25vw;
}

#contact-wrapper { padding-top:5vw; }

#contact-blurb { width:100%; }

#contact { width:100%; }

.form-col { width:100%; padding:0vw; margin:0vw; }
.form-col p { font-weight:bold; font-size:4vw; max-height:999999px; }
#contact input { width:96%; height:5vw; font-size:3.5vw; padding:1vw; border:0.4vw solid #999; }
#contact textarea { width:97%; height:25vw; border:0.4vw solid #999; padding:1vw; border-radius:2vw; font-size:4vw; }
.send { width:40% !important; margin:3.2vw auto !important; height:9vw !important; }

#section-footer { height:18vw; }
#footer-content p { font-size:2.8vw; max-height:999999px; margin-bottom:0vw; }

}

}