@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100);

 html,body{
	
	background-color: black;     
	height: 100%; 
	margin: 0px; 
	padding: 0px;
	overflow:hidden;

}

a:link {
    color: #333;
     text-decoration: none;
}

a:visited {
	
	color: #333;
     text-decoration: none;

}

a:hover {
    color: #76b41c;
     text-decoration: none;
}


a:active {
    color: black;
     text-decoration: none;
}

#side-bar {
	
width: 25%;
	height: 100%;
	/*display: inline-block;*/
	float:left;
	
	background-image: url("../images/sidebar.jpg");
    background-repeat: repeat;
    overflow-y: hidden;
    overflow-x: hidden;
    
}


#side-bar-content {
	
	height:100%;
	width: 100%;
	background-color: rgba(0,0,0,0.4);
	text-align: right;
}

#side-bar-content>img {
	
	width: 25%;
	padding-right: 10px;
}

.image-caption{
	
	font-size: 40px;
	color:white;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	text-align: right;
	padding-right: 10px;
	
	
}


.sb-header-text {
	
	font-size: 20px;
	color:#76b41c;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	text-align: right;
	padding-right: 10px;
	padding-top: 60px;
	padding-bottom: 10px;
}

.sb-text {
	
	font-size: 14px;
	color:#FFF;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	text-align: right;
	padding-right: 10px;
	line-height: 25px;
}



#main-content {	
	height: 100%;
	width: 75%;
	/*display: inline-block;*/
	background-color:black;
	float:left;
	overflow-y: auto;
/* 	overflow-x: hidden; */
	
}

#banner-image {
	
	height:60%;
	background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
	position: relative;
	background-color: black;
}


#title {
	
	font-size: 70px;
	color:white;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	padding-top: 10%;
	
	text-align: center;
}

#sub-title {
	
	font-size: 90px;
	color:#76b41c;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	text-align: center;
	padding-bottom: 5%;
	
}


#subsub-title {
	
	font-size: 30px;
	color:white;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	text-align: center;
	height:60px;
	width:100%;
	line-height: 60px;
	background-color: rgba(0,0,0,0.7)
}

.highlight {

	font-size: 20px;
	color:#1E9E7D;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	text-align: left;
	line-height: 60px;

}

#top-menu {
	
	font-size: 20px;
	color:#333;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	text-align: center;
	line-height: 60px;
}


#section-content {
	
		padding: 30px;
		text-align: justify;
	
}

.section-header {
	padding-top: 60px;
	font-size: 40px;
	color:#76b41c;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	text-align: left;
	line-height: 60px;
	
}

.section-text{
	
	font-size: 14px;
	color: #333;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	text-align: left;
	line-height: 30px;
}


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

	.sb-header-text { font-size: 14px; }
	.sb-text { font-size: 12px; }
	#title { font-size: 3em; }
	#sub-title { font-size: 1em; }
	#subsub-title {font-size: 1em;height:40px; line-height: 40px;}
}




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

	.sb-header-text { font-size: 14px; }
	.sb-text { font-size: 12px; }
	#title { font-size: 3em; }
	#sub-title { font-size: 1em; }
	#subsub-title {font-size: 1em;height:40px; line-height: 40px;}
}


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


	#title { font-size: 2em; }
	#sub-title { font-size: 1em; }
	#subsub-title {font-size: 1em; }
	.section-header { font-size: 1.5em;}
	#top-menu { font-size: 0.75em;}


}


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


	#title { font-size: 1.5em; }
	#sub-title { font-size: 1.2em; }
	#subsub-title {font-size: 0.8em; }
	.section-header { font-size: 1.5em;}
	#top-menu { font-size: 0.75em;}
}



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

	
	#title { font-size: 1.2em; }
	#sub-title { font-size: 1em; }
	#subsub-title {font-size: 0.6em; }
	.section-header { font-size: 1.em;}
	#top-menu { font-size: 0.75em;}
	#main-content{width:100%; overflow: auto;}
	#banner-image {height:40%;}


}