#title1 {
	padding:0;
	margin:0;
	position: relative;
}

#title1 img {
	display:block;
}


#title1 h1 {
	display:inline-block;
	font-size:3rem;
	padding-bottom: 0.5rem;
	padding-top: 0.7rem;
	background-color:#151010;
}

#title1 h1 span{
	font-size:1.2rem;
	
	color:#DDDDDD
}

#title1 p {
	color:#DDDDDD;
	
/*	text-indent: -0.8rem;*/
}

#title1 #title-text div {
	
}


#video-btn span:hover {
	color:orange;
	border-color:orange;
}

#title-text {
	width:100%;
	position:absolute;
	bottom:-1.8rem;
	
/*
	position:absolute;
	background-color:#151010;
	padding-top:0.5rem;
	padding-bottom:1rem;
	padding-left:3rem;
	padding-right:3rem;
	bottom:-2.5rem;
*/
}

*, *:before, *:after {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	padding:0;
	margin:0;
	font-family: 'Karma', serif;
}

.section {
	 width:100%;
}

.padding-std {
	padding:5rem;
}

body {
	background-image: url(media/leftborder.png), url(media/rightborder.png);
	background-repeat: repeat-y, repeat-y;
	background-size:12vw auto, 12vw auto;
	background-position: left, right;
}


.column {
	max-width:50rem;
	width:auto;
	margin-left:auto;
	margin-right:auto;
}

html {
    font-size: 100%; /* with the standard base font size of 16px this will be equal to 10px */
}

@media screen and (max-width:40em){
	.column {
		margin-left:1rem;
		margin-right:1rem;
	}
	
	
	#demo {
		overflow: hidden;
		padding-left:0rem;
		padding-right:0rem;
		margin-left:0rem;
		margin-right:0rem;		
	}
	
	#title1 .column {
		margin-left:0rem;
		margin-right:0rem;		
	}
	
	#title-text {
		width:100%;
		position:relative;
		bottom:0;
		background-color:#151010;
	}
	
	html {
		font-size: 80%;
	}
	
	.padding-std {
		padding:2rem;
	}
	
	#video-btn {
		font-size: 1.2rem;
	}
}



.center {
    display:block; margin-left:auto; margin-right:auto
}

h1 {
    font-size:3rem;
    color:#FF6633;
    font-weight: 400;
}

h2 {
    font-size:1.5rem;color:#FF6633;
    padding-bottom:0.5rem;
    margin-top:-1rem;
	font-weight: 600;
}

p {
	font-size:1.2rem;
	line-height:140%;
	color:#444444;
}



#title {

}

#title div {
    background-color: white;
    padding-top: 1rem;
    padding-bottom: 1rem;
}


#description {
	margin-bottom: 0;
	padding-bottom: 1rem;
}


.vcenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#title {
/*    background-color:#1C2542;*/
	background-color:rgba(28,37,90,.95);
}

#overlay {
    position: fixed;
    top:-100%;
    left:0;
    height:100%;
    width:100%;
    z-index:10;
    padding:2rem;
    background-color: rgba(0,0,0, 0.9);
    transition: 0.5s;
}

#overlay.open {
    top:0%;
    transition: 0.5s;
}


#intro {
/*	background-color:#FF3B49;*/
	background-color:rgba(225,30,60,.95);
	padding-bottom:1rem;
    
}

#intro p {
	color:white;
}

#social {
/*  background-color:#00de87;*/
	background-color:rgba(30, 180, 38, 0.95);
}

#social > div {
    background-color:white;
}

#social img {
    display:block;
    margin-left: auto;
    margin-right: auto;
}

#social h2 { color:#00af79;}

#proto-1 {
/*    background-color:#007ACC;*/
	background-color:rgba(0,100,225,0.95);
}

#proto-1 div {
    background-color:white;
}

#proto-1  h2 { color:#007ACC;}

#proto-2 {
/*    background-color:#F05F33;*/
	background-color:rgba(225,50,20,0.95);
}

#proto-2 > div {
    background-color:white;
}

#diagram2 {
    background-color:white;
    padding-bottom: 7rem;    
}

#proto-final {
/*    background-color:#00AFEF;*/
	background-color:rgba(0,170,256,0.95);
}

#proto-final h2 { color:#00AFEF;}


#proto-final > div {
    background-color:white;
}

#diagram1 {
	display:block;
	max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
	margin-top:5rem;
	width:100%;
}

#proto-final hr {
	margin-top:4rem;
	margin-bottom:4rem;
}

#diagram2 {
	width:100%;
}

#video-btn {
	text-align:center;
	padding-bottom:2rem;
	cursor: pointer;
}



.hide-demo {
	max-height:0;
	height:auto;
	transition: max-height 0.5s;
}



.show-demo {
	transition: max-height 0.5s;
	height:auto;
	max-height:30rem;
	padding-bottom:1rem;
}

#video-btn {
	padding-bottom:2rem;
}

#video-btn span {
	display:inline-block;
	color:rgba(0,0,0,0.5);
	padding:0.5rem;
	padding-left:2rem;
	font-family: sans-serif;
	font-weight: bold;
	padding-right:2rem;
	margin-left:auto;
	margin-right:auto;
	border:solid rgba(0,0,0,0.5);
	border-radius:2rem;	
}



/*
#demo {
	overflow: hidden;
	padding-left:5rem;
	padding-right:5rem;
}


video {
    display:block; margin-left:auto; margin-right:auto;
}
*/

.vidcontainer {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	box-sizing:border-box;
	overflow: hidden;
}

iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}