body{
    font-family: 'Roboto:300', sans-serif,  Tahoma, Arial, sans-serif;
    font-weight: 300;
	padding: 0px;
	margin: 0px;
	line-height: 140%;
}
div{
}
p{
    font-family: 'Roboto:100', sans-serif,  Tahoma, Arial, sans-serif;

	padding: 0px;
	margin: 0px;
	margin-top: 0.2em;
	font-weight: 100;
}
h2{	
    font-family: 'Roboto:300', sans-serif,  Tahoma, Arial, sans-serif;

	font-family: inherit;
	font-size: 2.5em;
	font-weight: 300;
}
h3{
    font-family: 'Roboto:300', sans-serif,  Tahoma, Arial, sans-serif;

	font-size: 1.6em;
	font-weight: 300;
}
h4{
    font-family: 'Roboto:300', sans-serif,  Tahoma, Arial, sans-serif;

	font-size: 1.0em;
	font-weight: 300;
}
a{
    text-decoration:none;
    color: #5F3C19;

}
.h3center{
	text-align: center;
}
.h4_shorter{
	width: 60%;
	left: 20%;
	position: relative;
}
a:hover{
	color: #FFA343;
}
.invisible{
	color: white;
}
/*.cycle1, .cycle2{
	position: absolute;
	height: 3em;
	width: 10em;
	background-color: red;
	top: 20.2vw;
	left: 47vw;
}*/

/*.cycle2{
	animation-name: movement;
    animation-duration: 6000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}*/
.back_h, .muna_b, .ht_b, .gu_b{
	position: relative;
	display: inline-block;
	padding: 0px;
	margin: 20px;
	font-size: 0.9em;
}
.muna_b{
}
.ht_b{
}
.gu_b{
}
.back{
	margin: 0px;
	padding: 0px;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
}
.introadjective{
	margin: 0px;
	padding: 0px;
}
.m_part1, .m_part2, .cycle1, .cycle2, .cycle3, .cycle4, .cycle5{
	position: relative;
	display: inline-block;
}
#scrollbox1{
	position: absolute;
	width: 10vw;
	height: 10vw;
	top: 80vh;
	left: 45vw;
	background-color: green;
}
#scrollbox2{
	position: absolute;
	width: 10vw;
	height: 10vw;
	top: 180vh;
	left: 45vw;
	background-color: green;
}
#scrollbox3{
	position: absolute;
	width: 10vw;
	height: 10vw;
	top: 280vh;
	left: 45vw;
	background-color: green;
}
#scrollbox4{
	position: absolute;
	width: 10vw;
	height: 10vw;
	top: 380vh;
	left: 45vw;
	background-color: green;
}
.boxTop{
	width: 100%;
	height: 100vh;
}
.col-1-top, .col-2-top{
	position: relative;
	display: inline-block;
	margin: 0px;	
	vertical-align: top;s
}
.col-1-top{
	height: 80%;
	margin-left: 15%;
	margin-top: 28vh;
}
.col-2-top{
	margin-top: 40vh;
}
.project_title, .project_description{
	margin: 0px;
	padding: 0px;
}

.box1, .box2, .box3, .box4, .footer{
	width: 100%;
}
.box1{
		height: 100vh;
/*	background-color: blue;
*/}
.box2{
	height: 100vh;
/*	background-color: red;
*/}
.box3{
	height: 80vh;
/*	background-color: green;
*/}
.box4{
	text-align: center;
	margin-top: 10vh;
	margin-bottom: 20vh;
}
.footer{
	margin: 3em 0px 0px 0px;
	margin-top: 10vh;
}
.intro{
	padding-top: 40vh;
	position: relative;
	height: 100%;
	width: 100vw;
	text-align: center;
}
.work{
	position: relative;	
	height: 20%;
}
.about{
	padding-top: 5vh;
	position: relative;	
/*	border: 1px solid black;
*/}
.title_p, .title_a{
	width: 100%
	bottom: 0px;
	text-align: center;
}
.message{
	position: relative;
	display: block;
	padding: 0px;
	margin: auto;
}
.projects, .about_criteria{
	position: relative;
	width: 100%;
	text-align: center;
}
.p_muna, .p_spotify, .p_getup, .p_hilltrackr, .skills_tech, .things_enjoy, .other_projects, .p_phrase, .p_spacetime{
	padding: 0px;
	margin: 0px;
/*	top: 1em;
*/	position: relative;
	display: inline-block;
	width: 30vw;
/*	height: 22vw;
*/	background-color: gray;
}
.p_spotify{
	background-color: white;
	margin-right: 0.3vw; 
	height: 21vw;
    background-image: url("images/spotifyHome.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.p_hilltrackr{
	background-color: white;
	height: 21vw;
    background-image: url("images/hilltrackr/ht_home.png");
    background-size: 140% 140%;
    background-position: center;
    background-repeat: no-repeat;
}
.p_getup{
	background-color: white;
	height: 21vw;
    background-image: url("images/getup/getup_home.png");
    background-size: 140% 140%;
    background-position: center;
/*    background-size: 45vw 22vw;
*/    background-repeat: no-repeat;
}
.p_muna{
	background-color: white;
	height: 21vw;
    background-image: url("images/muna/muna_home.png");
    background-size: 120% 120%;
    background-position: center;
/*    background-size: 45vw 22vw;
*/    background-repeat: no-repeat;
}
.p_spacetime{
	background-color: white;
	height: 21vw;
    background-image: url("images/spacetime/project_page.png");
    background-size: 140% 140%;
    background-position: center;
/*    background-size: 45vw 22vw;
*/    background-repeat: no-repeat;
}
.gu_image1, .gu_image2, .gu_image4{
	margin-top: 10vh;
	margin-left: 10vw;
}
.muna_image2, .muna_image4{
	height: 25vw;
	width: 45vw;
	background-repeat: no-repeat;
	margin-top: 30vh;
}
.muna_image2{
	background-image: url("images/muna/render1.JPG");
	background-size: 100% 100%;
}
.muna_image4{
	background-image: url("images/muna/side.PNG");
	background-size: 100% 100%;
}
.muna_image3, .coral_gif{
	position: relative;
	margin: 0px;
	padding: 0px;
	height: 40vw;
	width: 22vw;
	top: 25vh;
    background-image: url("images/muna/open_close.gif");
    background-size: 100% 100%;
/*    background-size: 45vw 22vw;
*/    
}
.coral_gif{
	background-image: url("images/coral/coralGif.gif");
}
.gu_image1, .gu_image2, .gu_image4, .coral_image1, .coral_image2{
	padding: 0px;
	margin: 0px;
	top: 20vh;
	left: 10vw;
	position: relative;
}
.coral_image1, .coral_image2, .coral_assembly{
	height: 40vw;
	width: 30vw;
    background-image: url("images/coral/coral1.jpg");
    background-size: 100% 100%;
/*    background-size: 45vw 22vw;
*/    background-repeat: no-repeat;
}
.coral_image2{
	background-image: url("images/coral/coral2.jpg");
}
.coral_assembly{
	margin: auto;
	background-image: url("images/coral/coral_assembly.jpg");
}
.coral_iterations{
	width: 80vw;
	margin: auto;
	text-align: left;
}
.coral_concept, .coral_wiring, .coral_origami, .bump_image4, .bump_wiring{
	margin: auto;
	height: 45vw;
	width: 70vw;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url("images/coral/coral_concept.jpg");
}
.coral_wiring{
	background-image: url("images/coral/coral_wiring.png");
}
.coral_origami{
	background-image: url("images/coral/origami_parts.JPG");
}
.gu_image1{
	top: 15vh;
	height: 40vw;
	width: 20vw;

    background-image: url("images/getup/getupHome.png");
    background-size: 100% 100%;
/*    background-size: 45vw 22vw;
*/    background-repeat: no-repeat;
}
.gu_image2{
	height: 40vw;
	width: 20vw;
    background-image: url("images/getup/getupMath.png");
    background-size: 100% 100%;
/*    background-size: 45vw 22vw;
*/    background-repeat: no-repeat;
}
.gu_image3, .gu_image5{
	height: 40vw;
	width: 20vw;
    background-size: 100% 100%;
   	padding-right: 0px;
/*    background-size: 45vw 22vw;
*/    background-repeat: no-repeat;
	padding: 0px;
	margin: 0px;
	top: 20vh;
	position: relative;
}
.gu_image3{
    background-image: url("images/getup/getupSolving.png");
}
.gu_image5{
	background-image: url("images/getup/getupSet.png");
}
.gu_image4{
	height: 40vw;
	width: 20vw;
    background-image: url("images/getup/getupSolved.png");
    background-size: 100% 100%;
/*    background-size: 45vw 22vw;
*/    background-repeat: no-repeat;
}
.narrow{
	width: 10vw;
}
.p_muna, .p_getup, .p_hilltrackr{
	-o-transition:1.0s;
  -ms-transition:1.0s;
  -moz-transition:1.0s;
  -webkit-transition:1.0s;
  /* ...and now for the proper property */
  transition:1.0s;
}
.p_muna:hover{
	opacity: 0.5;
/*	background:rgb(192,187,181);
	background:rgba(192,187,181,0.5);*/
}
.p_getup:hover{
/*	background-image: url("images/getup/getupMath.png");
*/
/*	background:rgb(79,195,247);
	background:rgba(79,195,247,0.5);*/
	opacity: 0.5;
}
.p_hilltrackr:hover{
/*	background-image: url("images/hilltrackr/hillTrackr35.png");
*/
/*	background:rgb(66,165,245);
	background:rgba(66,165,245,0.5);*/
	opacity: 0.5;
}
/*.ht_description{
	padding: 0px;
	margin: 0px;
	visibility: hidden;
	opacity: 1;
	z-index:999;
}*/
/*.p_hilltrackr:hover .ht_description{
	visibility: visible;
	opacity: 0.9;
} */
.skills_tech, .things_enjoy, .other_projects, .p_phrase{
	top: 0px;
	background-color: white;
}
.p_phrase{
	margin-top: 1em;	
}
.space{
	color: white;
}
/*.skills_tech{
	left: 0px;
}
.things_enjoy{
	left: 33%;
}
.other_projects{
	left: 66%;
}*/
.p_name{
	padding: 0px;
	margin: 0px;
	margin-top: -2em;
/*	position: absolute;
	top: -5vw;
*/}
.p_about{
	margin: 3% 30% ;
}
.a_name{
	padding: 0px;
	margin: 0px;
}
.styleguide{
	width: 100vw;
	text-align: center;
}
.sg_column{
	padding: 0px;
	margin: 0px;
	position: relative;
	display: inline-block;
	width: 30%;
}
.p_button{
	color: white;
	background-color: #FFA343;
	border: 1px solid #FFA343;
	padding: 0.3em 1em 0.5em 1em;
	border-radius: 0.5em;
}
.p_button:hover{
	color: #FFA343;
	background-color: #5F3C19;
	border: 1px solid #5F3C19;
	padding: 0.3em 1em 0.5em 1em;
	border-radius: 0.5em;
}
.p_alignleft{
	text-align: left;
	margin-top: 1.5em;
}
/* ------------------ Project Page --------------------*/

/*@media(min-width: 876px){
*/
.col-2-1-2, .col-2-2-2, .col-2-2-2-less, .col-2-2-2-gu, .col-2-2-2-r, .col-2-1-2-header{
	position: relative;
	display: inline-block;
	height: 100%;
}
.iframevid{
	width: 43vw;
	height: 30vw;
}
.ht_left{
	margin-left: 5vw;
}
.col-2-1-2{
	width: 45vw;
	left: 13vw;
}
.col-2-1-2-header{
	width: 30vw;
	left: 22vw;
}
.left{
	left: 8vw;
}
.left2{
	margin-left: 4vw;
}
.right{
	margin-left: 0px;
}
.col-2-2-2{
	width: 37vw;
	left: 8vw;
}
.col-2-2-2-less{
	margin-top: 0px;
	top: 0px;
	width: 37vw;
	left: 8vw;
}
.col-2-2-2-r{
	margin-left: 4vw;
	width: 15vw;
}
.col-2-2-2-gu{
	width: 26vw;
	left: 17vw;
	margin-right: 0vw;
}
.col-1-1-3, .col-1-2-3, .col-1-3-3, .col-1-1-1{
	top: 0vw;
	position: relative;
	display: inline-block;
/*	height: 100%;
*//*	left: 13vw;
*/	width: 30vw;
	padding-left: 0vw;
}
.col-1-1-1{
	position: relative;
	top: 8vw;
	padding: 0px 20vw;
	width: 60vw;
	text-align: center;
}
.noTop{
	top: 0px;
}
.bump_image1, .bump_gif{
	width: 45vw;
	height: 33vw;
	margin-top: 30vh;
	background-size: 45vw 33vw;
	background-repeat: no-repeat;
}
.bump_image2, .bump_image3{
	width: 34vw;
	height: 45vw;
	margin-top: 15vh;
	background-size: 34vw 45vw;
	background-repeat: no-repeat;
}
.bump_image1{
	background-image: url("images/bump/bump_image1.jpg");
}
.bump_image2{
	background-image: url("images/bump/bump_image2.jpg");
}
.bump_image3{
	background-image: url("images/bump/bump_image3.jpg");
	margin: auto;
}
.bump_image4{
	background-image: url("images/bump/bump_image4.JPG");
}
.bump_gif{
	background-image: url("images/bump/bumpit.gif");
}
.bump_wiring{
	background-image: url("images/bump/bump_wiring.png");

}
/*}*/
.h_image, .ms_image, .pm_image, .ss_image{
	width: 45vw;
	height: 50vh;
	margin-top: 30vh;
    background-size: 45vw 22vw;
    background-repeat: no-repeat;
}
.m_header{
	width: 45vw;
	height: 30vw;
/*	margin-top: 15vw;
*/}
.h_image{
	background-image: url("images/mainscreen.png");
}
.ms_image{
	background-image: url("images/setscreen.png");
}
.pm_image{
	background-image: url("images/palcemarker.png");
}
.ss_image{
	background-image: url("images/setscreen.png");
}
.p_titletext{
	margin: 0px;
	padding: 0px;
}
/*.pr_title, .pr_description{
	position: relative;
	display: inline-block;
}*/
.pr_title, .pr_description, .ht_content1, .ht_content2, .ht_content3, .ht_content4, .pr_text, .pr_feature1, .pr_text2{
 	position: absolute;
	top: 35vh;
	margin-top: 0px;
}
.ht_content4{
	top: 25vh;
}
.pr_text2{
	top: 33vh;
}
.pr_title{
	top: 35vh;
	margin-left: 1vw;
}
.pr_description{
	top: 43vh;
	margin-left: 1vw;
}
.pr_text{
	top: 42vh;
}
.ht_content1, .ht_content2, .ht_content3{
	top: 35vh;
}
.pr_feature1{
	top: 14vw;
	left: 6vw;
	width: 25vw;
}
.h3_center{
	text-align: center;
	width: 100%;
}
.ht_technicals{
	width: 100%;
}
.ht_content1{
}
.ht_content2{
}
.ht_content3{
	text-align: center;
	width: 100%;
}
.m_video{
}
/* ------------- Footer ----------------*/
.footer{
	background-color: #d6dbe0;
	padding: 1em 0em ;
}
.footer1, .footer2, .footer3, .footer4{
	vertical-align: top;
	position: relative;
	display: inline-block;
	width: 30vw;
	text-align: center;
}
.footer4{
	margin-left: 4.5vw;
}
.footer_contact{
	width: 100vw;
	text-align: center;
}
@media(max-width: 875px){
	.intro, .p_phrase, .footer1, .footer2, .footer3{
		margin: 0px;
		padding: 0px;
		width: 80vw;
	}
	.footer1, .footer2, .footer3{
		margin-top: 40px;
	}
	.p_muna, .p_hilltrackr{
		width: 80vw;
		height: 30vw;
		margin-top: 40px;
	}
	.p_getup{
		height: 80vw;
		width: 30vw;
		background-size: 100% 100%;
	}
	.project_title, .project_description{
		display: inline-block;
		left: 0px;
		top: 0px;
		margin: 0px;
		padding: 0px;
	}
	.col-1-top, .col-2-top{
		position: relative;
		display: inline-block;
		margin: 0px;	
		left: 0px;
		margin: 0px;
		padding: 0px;
		top: 0px;
	}
	.iframevid{
		width: 80vw;
		height: 60vw;
	}
	body{
		text-align: center;
	}
	.col-1-top, .m_header{
		width: 80vw;
		height: auto;
	}
	.box1, .box2, .box3, .box4{
		height: auto;
		margin: 10%;
		width: auto
	}
	.col-2-1-2, .col-2-2-2, .col-2-2-2-less, .col-2-2-2-gu, .col-2-2-2-r, .col-2-1-2-header, .col-1-1-1, .col-1-1-3, .col-1-2-3, .col-1-3-3{
		position: relative;
		display: inline;
		height: auto;
		width: auto;
		margin: 0px;
		padding: 0px;
		left: 0px;
		top: 0px;
	}
	.pr_title, .pr_description, .ht_content1, .ht_content2, .ht_content3, .ht_content4, .pr_text, .pr_text2{
		position: relative;
		display: inline-block;
		width: 80vw;
		left: 0px;
		margin: 0px;
		padding: 0px;
		top: 0px;
		margin-top: 10px;
	}
	.ht_content1, .pr_text{
		display: inline-block;
		width: 80%;
		margin-left: 5%;
	}
	.pr_feature1{
	 	position: relative;
	 	display: inline;
	 	left: 0px;
		margin: 0px;
		padding: 0px;
		top: 0px;
		width: 80vw;
	}
	.muna_image2, .muna_image3, .muna_image4{
		top: 0px;
		margin: 0px;
		left: 0px;
		padding: 0px;
	}
	.muna_image2, .muna_image4{
		height: 40vw;
		width: 80vw;
	}
	.muna_image3{
		margin: auto;
	}
	.h_image, .ms_image, .pm_image, .ss_image{

		top: 0px;
		margin: 0px;
		padding: 0px;
		left: 0px;
		height: 40vw;
		width: 80vw;
		background-size: 100% 100%;
		margin-top: 10px;
	}
	.gu_image1, .gu_image2, .gu_image3, .gu_image4, .gu_image5{
		top: 0px;
		left: 0px;
		margin: auto;
		padding: 0px;
	}
	.back{
		text-align: left;
	}
}