@import url(http://fonts.googleapis.com/css?family=Roboto:100);
@font-face 
{
	font-family: 'Roboto', sans-serif;
	src: url('http://fonts.googleapis.com/css?family=Roboto:100');
}

body
{

height: 100vh;
width: 100vw;

overflow-x: hidden;
overflow-y: hidden;

margin: 0px; 
padding: 0px;


/*
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
*/


display: -webkit-flex;
display: flex;
display: -ms-flex;

-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
	
-webkit-justify-content: flex-start;
justify-content: flex-start;
-ms-justify-content: flex-start;

-webkit-align-items: flex-start;
align-items: flex-start;
-ms-align-items: flex-start;

-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;

-webkit-justify-content: center;
justify-content: center;
-ms-justify-content: center;

-webkit-align-content: center;
align-content: center;
-ms-align-content: center;

}


.node
{
	
	/*border: 1px solid black;*/
	position: absolute;

}


.centerNode
{
	opacity: 1;
	background: #e6e6e6;
}



.centerNode iframe
{
	width: 100%;
	height: 100%;
}

.centerNode h1
{
	font: 32px 'Roboto';
	color: #7897AF;
}

.centerNode p
{
	font: 20px 'Roboto';
	color: #808080;
	margin-top: 10px;
}

.centerNode img
{
	height: 100%;
		width: 100%

}

.sideNode
{
	opacity: 0.5;
	overflow: hidden;
	
	-webkit-transition: opacity 0.3s;
	
}

.sideNode h1
{
	font: 10px 'Roboto';
	color: #7897AF;
}

.sideNode p
{
	font: 5px 'Roboto';
	color: #808080;
	margin-top: 10px;
}

.sideNode img
{
	height: 100%;
	width: 100%
}

.sideNode iframe
{
	width: 100%;
	height: 100%;
}

/*this probably wont work*/
.sideNode: hover
{
	opacity: 1;
}


/*no keep*/
.transparentNode
{
	background: transparent;
}

.article
{
	background: #e6e6e6;
	overflow: hidden;
	
	background-image: linear-gradient(to bottom, transparent, #e6e6e6;);
}

.article h1
{
	margin-top: 15px;
    margin-right: 30px;
    margin-left: 30px;
}

.article p
{
    margin-bottom: 15px;
    margin-right: 30px;
    margin-left: 30px;
}