/* ------------------------------------------- */
/*  FONT IMPORT  */
/* ------------------------------------------- */

@font-face {
    font-family: "roboto regular";
    src: url("fonts/Roboto-Regular-webfont.woff") format('woff');
}

@font-face {
    font-family: "roboto italic";
    src: url("fonts/Roboto-Italic-webfont.woff") format('woff');
}

@font-face {
    font-family: "signal";
    src: url("fonts/signal-no1-d.woff") format('woff');
}


/* ------------------------------------------- */
/*  BODY + CONTAINER SETUP  */
/* ------------------------------------------- */


body {
	font-family: 'roboto regular', arial, Sans-Serif;
	font-weight: 300;
	color: #2c3e50;
    -webkit-font-smoothing: antialiased;
	background-image: url("img/bg_2019_b_1756.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-color: #000;
}

body a {
	text-decoration: none
}

.container {
	background: ;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70%;
	transform: translate(-50%, -50%); /*(-50%, -20%);*/
	margin-left: auto;
	margin-right: auto;
}

.home-spacer {
	width: 50%;
	padding: 40px;
	margin: 0 auto;
	height: 28px;
	display: block;
	}

/* ------------------------------------------- */
/*  SECTIONS SETUP  */
/* ------------------------------------------- */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.section0-home {
	height: 20vh; /* 171px */
}

.section0-bio {
	height: 17vh; /* 135px */
}

.section0-contact {
	height: 17.75vh; /* 153px */
}

.section1 {
	text-align: center;
	margin-bottom: 0px;
}

.section2 {
/*	height: 70vh;  */
	background: ;
	margin: 0;
/*	display:flex; */
	/* flex-flow: row wrap;
	justify-content:space-between; */
}
	
.section3 {
	font-family: helvetica;
	text-align: center;
	margin-top: 20px;
}


/* ------------------------------------------- */
/*  HEADER SECTIONS  */
/* ------------------------------------------- */

.headlineblock {
	margin: 10px 0 0 0;
	draggable: false;
}

.toddname {
	font-family: 'signal', arial, Sans-Serif;
	font-weight: 400;
	font-size: 34px;
	letter-spacing: 0.75px;
	color: #fff;
	text-transform: uppercase;
	/*right margin negative of letter-spacing */
	draggable: false;
}

.toddname a {
	text-decoration: none;
	color: #fff;
	}

.toddname a:hover {
	text-decoration: none;
	color: #ccc
	}

.headline a {
	color: #fff
}

.subhead {
	font-family: 'signal', arial, Sans-Serif;
	font-weight: 400;
	font-size: 12px;
	margin: 4px 0 0 0;
	letter-spacing: -0.5px;
	color: #fff; 
}

.subheadtitle {
	}


/* ------------------------------------------- */
/*  NAV SETUP  */
/* ------------------------------------------- */

#tl-nav-menu-outer {
	color: white;
	text-align: center;
	font-family: 'signal', arial, Sans-Serif;
	font-weight: 400;
	font-size: 22px;
	letter-spacing: 0px;
	-webkit-font-smoothing: antialiased;
	background: ;
	margin: 30px 0 0 0;
	padding: 0;
}

.tl-nav-table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
	padding: 0;
	text-align: center;
	background: ;
}

ul#tl-nav-horizontal-list {
	list-style: none;
	text-align: center;
	background: ;
	margin: 0;
	padding: 0;
}
	
ul#tl-nav-horizontal-list li {
		display: inline;
		padding: 0 3px
	}

ul#tl-nav-horizontal-list li a {
	color: white
}	

ul#tl-nav-horizontal-list li a:hover {
	color: #666
}	

.nav-first {
	margin-right: ;
	background: ;
}

.nav-last {
	margin-right:;
	background: ;
}


/* ------------------------------------------- */
/*  BIO + TEXT SETUP */
/* ------------------------------------------- */

.bioitalic {
  font-family: 'roboto italic', arial, Sans-Serif;
}
	
.bio {
	background-color:rgba(0, 0, 0, 0.4); 
	padding: 30px 40px;
	margin: 15px auto 10px;
	color: #fff;
	font-size: 12px;
	line-height: 19px;
	font-family: 'roboto regular', arial, Sans-Serif;
	font-weight: 400;
	text-align: justify;
	text-justify: inter-word;
	max-width: 800px;
	}

.bio a {
	color: #fff; /* red option: #d9b4b4 */
	text-decoration: underline;
}

.bio a:hover {
	text-decoration: underline
}

.contact {
	background-color:rgba(0, 0, 0, 0.4); 
	width: 40%;
	padding: 40px;
	margin: 15px auto 10px;
	color: #fff;
	font-size: 12px;
	line-height: 19px;
	font-family: 'roboto regular', arial, Sans-Serif;
	font-weight: 400;
	text-align: center;
	}

.contact a {
	color: #fff;
	/* border-bottom: 1px dotted #bbb; */
	text-decoration: none;
}

.contact a:hover {
	text-decoration: underline;
	color: #fff9c5
}

/* .email-image img {
	border: none;
	max-width:100%;	
}
*/

.email {
	margin: 0 auto 30px auto;
	text-decoration: none;
	}

.email a {
	text-decoration: none;
	background: purple !important;
}

.fourohfour {
	background-color:rgba(0, 0, 0, 0.4); 
	width: 40%;
	padding: 40px;
	margin: 15px auto 10px;
	color: #fff9c5;
	font-size: 20px;
	line-height: 19px;
	font-family: 'signal', arial, Sans-Serif;
	font-weight: 400;
	text-align: center;
	}

.fourohfour a {
	color: #fff9c5;
	/* border-bottom: 1px dotted #bbb; */
	text-decoration: underline;
}

.fourohfour a:hover {
	text-decoration: none;
	color: #fff9c5
}


/* ------------------------------------------- */
/*  SOCIALS SETUP */
/* ------------------------------------------- */

#bottomrow-home {
	text-align: center;
	bottom:0px;
	margin-top: 28px;
	margin-left: auto;
	margin-right: auto;
	}

.socialmedia a {
	width: 30px;
	height: 30px;
	display: inline-block;
}

.socialmedia a {
	margin-right: 0px;
}

.socialmedia a.icon-last {
	margin-right: 0px;
}

.svg-icon {
  fill: #fff;
}

.svg-icon:hover {
  fill: #666;
}


/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF SIX  */
.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 83.06%;
}

.span_4_of_6 {
  	width: 66.13%;
}

.span_3_of_6 {
  	width: 49.2%;
}

.span_2_of_6 {
  	width: 32.26%;
}

.span_1_of_6 {
  	width: 15.33%;
}

li {
  list-style: none;
}

.contactheader {
	/*right margin negative of letter-spacing */
	margin-right: -15px;
	font-size: 20px;
	letter-spacing: 10px;
	padding: 8px 8px 8px 0;
	color: white
	}
	
	
	
/* ------------------------------------------- */
/*  MOBILE - 830PX HEIGHT */
/* ------------------------------------------- */

@media only screen and (max-height: 830px) {

.container {
	background: ;
	position: relative;
	top: 50%;
	left: 45%; /*make half of width */
	width: 90%;
	transform: translate(-50%,00%);
	margin-left: auto;
	margin-right: auto;
}

.section3 { margin-bottom: 20px; }

}


/* ------------------------------------------- */
/*  MOBILE - 771-1030 MAX 649 H */
/* ------------------------------------------- */

@media only screen (min-width:771px) and (max-width: 1030px) and (max-height: 649px)
.section0 {
	min-height: 50px; /* 350 */
}

.container {
	background: ;
	position: relative;
	top: 50%;
	left: 45%; /*make half of width */
	width: 90%;
	transform: translate(-50%,10%);
	margin-left: auto;
	margin-right: auto;
}

.section3 { margin-bottom: 20px; }
}

/* ------------------------------------------- */
/*  MOBILE - 771-1030 MIN 650 H */
/* ------------------------------------------- */

@media only screen (min-width:771px) and (max-width: 1030px) and (min-height: 650px){

/* @media (max-width: 1030px) and (min-height: 650px){*/

.section0 {
	min-height: 250px; /* 350 */
}

}


/* ------------------------------------------- */
/*  MOBILE - 481-770PX */
/* ------------------------------------------- */

@media only screen (min-width:481px) and (max-width: 770px) {

.section0 {
	min-height: 50px; /* 250 */
}

.section3 { margin-bottom: 20px; }
}

/* ------------------------------------------- */
/*  MOBILE - 381-480PX */
/* ------------------------------------------- */
@media only screen (min-width:381px) and (max-width: 480px) {
	
/* body {
	background-image: none;
	background-color: pink;
} */

.section0-home {
	height: 5vh;
}

.section0-contact {
	height: 0vh;
}

.section0-bio {
	height: 0vh;
}

.container {
	background: ;
	position: relative;
	top: 50%;
	left: 45%; /*make half of width */
	width: 90%;
	transform: translate(-50%, 0%);
	margin-left: auto;
	margin-right: auto;
}


.contact {
	padding: 40px 20px;
	}


	.bio {padding: 10px;}
	
	.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }

	.section1 {
		margin-bottom: 10px;
}

.section3 { margin-bottom: 20px; }

	.section2 {flex-direction:column}
	.bodyleft {color: white; order: 2; text-align: center; padding: 0}
	.navmenu {color: green; order: 1; }

	/* padding-right fixes centering of all li items */
	.navlist {margin-left: auto; margin-right: auto; padding-right: 20px; text-align: center; font-size: 16px}
	.navlist ul { }
	
	/* set spacing between items */
	.navlist li {display:inline; padding: 0 20px 0 20px; font-weight: 300; }
	
	.navlist li.nav-first { }
	.navlist li.nav-last { }

	.socialmedia a {margin-right: 5px;}
	.socialmedia a.icon-last {margin-right: 0px}
	.contact {text-align: center;  }
	.contactheader {background: none}

	.toddname {font-size: 9vw}

/*   .bio {
    	text-align: left !important;
 	    text-justify: none !important;
	}
  */  
  
    .fakeitalic {
        display: inline;
		/* removing the inline-block style kills the italics but solves the mobile spacing issue */
	}
}

/* ------------------------------------------- */
/*  MOBILE - 380PX */
/* ------------------------------------------- */

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


.section0-home {
	height: 5vh;
}

.section0-contact {
	height: 0vh;
}

.section0-bio {
	height: 0vh;
}


}

/* ------------------------------------------- */
/*  CONTACT EMAIL SIZE FIX 500PX */
/* ------------------------------------------- */

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

	.email {
	font-size: 9px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	}

	.email a {
	}

}


/* ------------------------------------------- */
/*  MOBILE - 400PX HEIGHT */
/* ------------------------------------------- */

/*  REPOSITION ICONS AT BOTTOM IF SHORT WINDOW */
@media only screen and (max-height: 400px) {
	#bottomrow-home { position: relative; bottom:0px; left: 0; }

}