/*Coded by Ivan Klevanski 2018, CSS frosted glass effect is unique, created by Ivan Klevanski 
with reference from https://codepen.io/lgkonline/pen/aWryOo*/

/* All images are personal */

body{
	
	background: url(../Images/Sunrise.jpg) fixed no-repeat;
	
	background-size: cover;
		
	margin: 0px;
	
	-webkit-backdrop-filter: blur(10px);
}

#NavBarGraphics{
	
	width: 100%;
	
	height: auto;
	
	background: inherit;
	
	position: relative;
	
	z-index: 1;
	
	overflow: hidden;
	
	margin: 0px;		
}

#NavBarGraphics::before{
	
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;
	
	box-shadow: inset 0 0 3000px rgba(30, 30, 30, 0.5);
		
	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);
}

#NavBar{
	
	list-style-type: none;
	
	padding: 15px;
	
	margin: 0px;
	
	-webkit-backdrop-filter: blur(10px);
}

li{
	display: inline-block;
}

li a{
	
	transition-property: color, background-color;
	
	transition-duration: 0.5s;
	
	-webkit-transition-property: color, background-color;
	
	-webkit-transition-duration: 0.5s;
	
	-moz-transition-property: color, background-color;
	
	-moz-transition-duration: 0.5s;
	
	-o-transition-property: color, background-color;
	
	-o-transition-duration: 0.5s;
	
	color: rgba(205, 205, 205, 0.5);
	
	text-align: center;
	
	padding-right: 5px;
	
	padding-left: 5px;
	
	text-decoration: none;
	
	font-size: 18px;
	
	font-family: 'Roboto', Arial;	
}

li a:hover:not(.active){		
	
	background-color: rgba(100, 100, 100, 0.5);
	
	color: rgba(230, 230, 230, 0.7);
}

li a.active{
	
	background-color: rgba(75, 75, 75, 0.5);
	
	color: rgba(230, 230, 230, 0.7);
	
	box-shadow: 0 0 15px rgb(100, 100, 100);
}

.WebIntro{
	
	margin: auto;
	
	width: 50%;
	
	margin-top: 120px;
	
	background: inherit;
	
	position: relative;
	
	z-index: 1;
	
	overflow: hidden;
}

.WebIntro::before{
	
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;

	box-shadow: inset 0 0 3000px rgba(30, 30, 30, 0.5);

	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);
}

.WelcomeTxt{
	
	font-family: 'Roboto', Arial;
	
	text-align: center;
	
	color: rgba(205, 205, 205, 0.7);
	
	background-color: transparent;
	
	-webkit-backdrop-filter: blur(10px);
}

.WebsiteIntro{
	
	font-family: 'Roboto', Arial;
	
	text-align: center;
	
	color: rgba(205, 205, 205, 0.7);
	
	background-color: transparent;
	
	-webkit-backdrop-filter: blur(10px);
}

.WebPar{
	
	margin: auto;
	
	width: 50%;
	
	margin-top: 60px;
	
	background: inherit;
	
	position: relative;
	
	z-index: 1;
	
	overflow: hidden;
}

.WebPar::before{
	
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;

	box-shadow: inset 0 0 3000px rgba(30, 30, 30, 0.5);

	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);
}

.ContactInfoContainer{
	
	position: relative;
	
	width: 20%;
	
	margin: auto;
	
	margin-top: 15%;
	
	background: inherit;
	
	z-index: 1;
	
	overflow: hidden;
}

.ContactInfoContainer::before{
	
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;

	box-shadow: inset 0 0 3000px rgba(30, 30, 30, 0.5);

	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);
}

.ContactTxt{
	
	font-family: 'Roboto', Arial;
	
	text-align: center;
	
	color: rgba(205, 205, 205, 0.7);
	
	background-color: transparent;
	
	-webkit-backdrop-filter: blur(10px);
}

#Img1Container{
	
	width: 100%;
	
	height: auto;
	
	display: flex;
	
	flex-direction: column;
	
	align-items: center;
	
	background: inherit;
	
	position: relative;
	
	z-index: 1;
	
	overflow: hidden;
}

#Img1Container::before{
	
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;

	box-shadow: inset 0 0 5000px rgba(30, 30, 30, 0.5);

	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);
}

#Img2Container{
	
	width: 100%;
	
	height: auto;
	
	display: flex;
	
	flex-direction: column;
	
	align-items: center;
	
	background: inherit;
	
	position: relative;
	
	z-index: 1;
	
	overflow: hidden;
}

#Img2Container::before{
	
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;

	box-shadow: inset 0 0 5000px rgba(30, 30, 30, 0.5);

	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);
}

#Img3Container{
	
	width: 100%;
	
	height: auto;
	
	display: flex;
	
	flex-direction: column;
	
	align-items: center;
	
	background: inherit;
	
	position: relative;
	
	z-index: 1;
	
	overflow: hidden;	
}

#Img3Container::before{
	
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;

	box-shadow: inset 0 0 5000px rgba(30, 30, 30, 0.5);

	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);		
}

#Img1Container .Img1{
	
	width: 30%;	
}

#Img2Container .Img2{
	
	height: 25%;
	
	width: 25%;	
}

#Img3Container .Img3{
	
	width: 40%;
}

#p1{
	
	text-align: justify;
	
	background-color: rgba(20, 20, 20, 0.9);	
	
	margin-bottom: 0px;
	
	margin-top: 100px;
	
	font-family: 'Roboto', Arial;
			
	color: rgba(205, 205, 205, 0.7);
	
	padding: 0px 20px 0px;
}

#p2{
	
	text-align: justify;
	
	background-color: rgba(20, 20, 20, 0.9);	
	
	margin-bottom: 0px;
	
	margin-top: 0px;
	
	font-family: 'Roboto', Arial;
			
	color: rgba(205, 205, 205, 0.7);
	
	padding: 0px 20px 0px;
}

#p3{
	
	text-align: justify;
	
	background-color: rgba(20, 20, 20, 0.9);	
	
	margin-bottom: 0px;
	
	margin-top: 0px;
	
	font-family: 'Roboto', Arial;
			
	color: rgba(205, 205, 205, 0.7);
	
	padding: 0px 20px 0px;
}

#picinfo1{
	
	text-align: center;
	
	font-family: 'Roboto', Arial;
			
	color: rgba(205, 205, 205, 0.7);
	
	box-shadow: 0 0 15px rgba(25, 25, 25, 1);
	
	background-color: rgba(20, 20, 20, 0.7);
	
	border-radius: 4px;
}

#picinfo2{
	
	text-align: center;
	
	font-family: 'Roboto', Arial;
			
	color: rgba(205, 205, 205, 0.7);
	
	box-shadow: 0 0 15px rgba(25, 25, 25, 1);
	
	background-color: rgba(20, 20, 20, 0.7);
	
	border-radius: 4px;
}

#picinfo3{
	
	text-align: center;
	
	font-family: 'Roboto', Arial;
			
	color: rgba(205, 205, 205, 0.7);
	
	box-shadow: 0 0 15px rgba(25, 25, 25, 1);
	
	background-color: rgba(20, 20, 20, 0.7);
	
	border-radius: 4px;
}

a{
	transition-property: color;
	
	transition-duration: 0.5s;
	
	-webkit-transition-property: color;
	
	-webkit-transition-duration: 0.5s;
	
	-moz-transition-property: color;
	
	-moz-transition-duration: 0.5s;
	
	-o-transition-property: color;
	
	-o-transition-duration: 0.5s;
	
	text-decoration: underline;
	
	color: rgba(205, 205, 205, 0.7);
}

a:hover{
	
	color: rgba(100, 100, 100, 0.7);
}

.sketchfab{
	
	border: none;
}

.Par1{
	
	margin: auto;
	
	margin-top: 12.5%;
	
	width: 50%;
	
	position: relative;
	
	z-index: 1;
	
	background: inherit;
	
	overflow: hidden;
}

.Par1::before{	
	
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;

	box-shadow: inset 0 0 3000px rgba(30, 30, 30, 0.5);

	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);
}

.themeSelect{
	
	position: relative;
	
	width: 20%;
	
	z-index: 1;
	
	background: inherit;
	
	overflow: hidden;
	
}

.themeSelect::before{
	
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;

	box-shadow: inset 0 0 3000px rgba(30, 30, 30, 0.5);

	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);
	
}

.btn
{
	background-color:  rgba(30, 30, 30, 0.3);
	
	color: rgb(205, 205, 205);
	
	border: none;
		
}

.SubjectTitle{
	
	font-family: 'Roboto', Arial;
	
	text-align: center;
	
	color: rgba(205, 205, 205, 0.7);
	
	background-color: transparent;
	
	-webkit-backdrop-filter: blur(10px);
	
	font-size: 24px;
	
}

.SubjectDescriptionCner{
	
	margin-top: 10%;
	
	width: 100%;
	
	position: relative;
	
	display: flex;
	
	flex-direction: column;
	
	align-items: center;
	
	z-index: 1;
	
	background: inherit;
	
	overflow: hidden;
	
	
}

.SubjectDescriptionCner::before{
	
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;

	box-shadow: inset 0 0 3000px rgba(30, 30, 30, 0.5);

	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);
	
}

.SubjectTxt
{
	font-family: 'Roboto', Arial;
	
	color: rgba(205, 205, 205, 0.7);
	
	background-color: transparent;
	
	-webkit-backdrop-filter: blur(10px);
	
	margin-left: 20px;
	
	margin-right: 20px;
	
	text-align: justify;
	
}

.assignmentTitle
{
	margin: auto;
	
	margin-top: 6.25%;
	
	width: 50%;
	
	position: relative;
	
	z-index: 1;
	
	background: inherit;
	
	overflow: hidden;
		
}

.assignmentTitle::before
{
	content: "";

	margin: -20px;

	position: absolute;

	z-index: -1;

	top: 0; 

	right: 0; 

	bottom: 0; 

	left: 0;

	background: inherit;

	box-shadow: inset 0 0 3000px rgba(30, 30, 30, 0.5);
	
	filter: blur(10px);
	
	-webkit-filter: blur(10px);
	
	-moz-filter: blur(10px);
	
	-o-filter: blur(10px);
	
}
.pdf
{
	margin-top: 5px;
	
	margin-bottom: 5px;
		
}