Difference between revisions of "Team:DTU-Denmark/stylesheetmain"

Revision as of 09:51, 13 July 2017 (view source) AlekH (Talk | contribs) ← Older edit		Revision as of 09:23, 14 July 2017 (view source) AlekH (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	/*imports custom font (is not used, but works as an example if you find an awesome font)*/
−	/*@font-face { font-family: League; src: url('../fonts/League/LeagueGothic-Regular.otf'); }*/
−
	/*sets boxes so that the width and height properties (and min/max properties) includes content, padding and border, but not the margin*/		/*sets boxes so that the width and height properties (and min/max properties) includes content, padding and border, but not the margin*/
		+
	* {		* {
	box-sizing: border-box;		box-sizing: border-box;
Line 10:		Line 8:
	/*makes the website span from edge to edge of the viewport*/		/*makes the website span from edge to edge of the viewport*/
−	body {	+	body {
−	position: relative;	+	position: relative;
−	width: 100%;	+	width: 100%;
−	margin: 0px;	+	margin: 0px;
−	padding:0px;	+	padding:0px;
		+	color: red;
	}		}
Line 24:		Line 23:
	/*defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport*/		/*defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport*/
		+
	.col-1 {		.col-1 {
	width: 08.33%;		width: 08.33%;
	}		}
−	.col-2 {width: 16.66%;}	+	.col-2 {
−	.col-3 {width: 25.00%;}	+	width: 16.66%;
−	.col-4 {width: 33.33%;}	+	}
−	.col-5 {width: 41.66%;}	+	.col-3 {
−	.col-6 {width: 50.00%;}	+	width: 25.00%;
−	.col-7 {width: 58.33%;}	+	}
−	.col-8 {width: 66.66%;}	+	.col-4 {
−	.col-9 {width: 75.00%;}	+	width: 33.33%;
−	.col-10 {width: 83.33%;}	+	}
−	.col-11 {width: 91.66%;}	+	.col-5 {
−	.col-12 {width: 100.0%;}	+	width: 41.66%;
		+	}
		+	.col-6 {
		+	width: 50.00%;
		+	}
		+	.col-7 {
		+	width: 58.33%;
		+	}
		+	.col-8 {
		+	width: 66.66%;
		+	}
		+	.col-9 {
		+	width: 75.00%;
		+	}
		+	.col-10 {
		+	width: 83.33%;
		+	}
		+	.col-11 {
		+	width: 91.66%;
		+	}
		+	.col-12 {
		+	width: 100.0%;
		+	}
	/*defines columns in pixels used for main content area, so user zoom will not affect the layout*/		/*defines columns in pixels used for main content area, so user zoom will not affect the layout*/
−	.colp-1 {width: calc(1000px/12);}	+
−	.colp-2 {width: calc(1000px/12*2);}	+	.colp-1 {
−	.colp-3 {width: calc(1000px/12*3);}	+	width: calc(1000px/12);
−	.colp-4 {width: calc(1000px/12*4);}	+	}
−	.colp-5 {width: calc(1000px/12*5);}	+	.colp-2 {
−	.colp-6 {width: calc(1000px/12*6);}	+	width: calc(1000px/12*2);
−	.colp-7 {width: calc(1000px/12*7);}	+	}
−	.colp-8 {width: calc(1000px/12*8);}	+	.colp-3 {
−	.colp-9 {width: calc(1000px/12*9);}	+	width: calc(1000px/12*3);
−	.colp-10 {width: calc(1000px/12*10);}	+	}
−	.colp-11 {width: calc(1000px/12*11);}	+	.colp-4 {
−	.colp-12 {width: 1000px;}	+	width: calc(1000px/12*4);
		+	}
		+	.colp-5 {
		+	width: calc(1000px/12*5);
		+	}
		+	.colp-6 {
		+	width: calc(1000px/12*6);
		+	}
		+	.colp-7 {
		+	width: calc(1000px/12*7);
		+	}
		+	.colp-8 {
		+	width: calc(1000px/12*8);
		+	}
		+	.colp-9 {
		+	width: calc(1000px/12*9);
		+	}
		+	.colp-10 {
		+	width: calc(1000px/12*10);
		+	}
		+	.colp-11 {
		+	width: calc(1000px/12*11);
		+	}
		+	.colp-12 {
		+	width: 1000px;
		+	}
	/*makes all the columns go to the left of the page and "stack" to the right if room*/		/*makes all the columns go to the left of the page and "stack" to the right if room*/
		+
	[class*="col-"] {		[class*="col-"] {
	float: left;		float: left;
	padding: 15px;		padding: 15px;
	}		}
		+
	[class*="colp-"] {		[class*="colp-"] {
	float: left;		float: left;
Line 63:		Line 112:
	}		}
−	/***********EACH ROW MUST BE 12 COLUMNS TOTAL*********/	+	/*********** EACH ROW MUST BE 12 COLUMNS TOTAL ************/
	/*(example col-4, col-6, col-2 is a row) clears the row of other content*/		/*(example col-4, col-6, col-2 is a row) clears the row of other content*/
		+
	.row::after {		.row::after {
	content: "";		content: "";
Line 75:		Line 125:
	/****************************************************************************************************************/		/****************************************************************************************************************/
		+
	/******************************************* NAVBAR AND PROGRESS BAR  *******************************************/		/******************************************* NAVBAR AND PROGRESS BAR  *******************************************/
		+
	/****************************************************************************************************************/		/****************************************************************************************************************/
Line 81:		Line 133:
	/*defines key properties of the nav bar*/		/*defines key properties of the nav bar*/
		+
	nav {		nav {
	margin: 0px;		margin: 0px;
	padding: 0px;		padding: 0px;
	overflow: hidden;		overflow: hidden;
−	top: 0;	+	top: -20px;
	width: 100%;		width: 100%;
	height: 40px;		height: 40px;
Line 91:		Line 144:
	/*hides list*/		/*hides list*/
−	nav ul {	+
		+	nav navbarcenter ul {
	height: 0px;		height: 0px;
		+	width: inherit;
	list-style-type: none;		list-style-type: none;
	}		}
	/*sets color of nav bar when the page is scrolled to the top*/		/*sets color of nav bar when the page is scrolled to the top*/
		+
	.navbar {		.navbar {
−	-webkit-transition: background 1s; /* Safari */	+	-webkit-transition: background 1s;
	transition: background 1s;		transition: background 1s;
−	background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Safari 5.1 to 6.0 */	+	background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
−	background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Opera 11.1 to 12.0 */	+	background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
−	background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Firefox 3.6 to 15 */	+	background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
−	background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* Standard syntax (must be last) */	+	background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);		box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);
	}		}
−	/*sets the color of the nav bar when scrolled down to	+	/*sets the color of the nav bar when scrolled down to the main text TRANSITIONS CANNOT BE USED HERE*/
−	the main text TRANSITIONS CANNOT BE USED HERE*/	+
	.navbar.scrolledpastnav {		.navbar.scrolledpastnav {
−	-webkit-transition: background 1.5s; /* Safari */	+	-webkit-transition: background 1.5s;
−	transition: background 1.5s;	+	transition: background 1.5s;
−	background-color: rgba(20,20,20,1);	+	background-color: rgba(20,20,20,1);
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);		box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
	}		}
−	/*helps center navar. The sum of the nav bar choice	+	/*helps center navar. The sum of the nav bar choice widths is 1000px (5*200px)*/
−	widths is 1000px (5*200px)*/	+
	.navbarcenter {		.navbarcenter {
	width: 1000px;		width: 1000px;
Line 124:		Line 180:
	/*makes nav bar choices float next to each other*/		/*makes nav bar choices float next to each other*/
		+
	.dropdown {		.dropdown {
−	float: right;	+	float: right;
−	height: 38px;	+	height: 40px;
	}		}
	/*layout of nav bar choice buttons*/		/*layout of nav bar choice buttons*/
		+
	.dropdown .dropbtn {		.dropdown .dropbtn {
−	height: 38px;	+	height: 40px;
	display: inline-block;		display: inline-block;
	color: white;		color: white;
	text-align: center;		text-align: center;
	padding: 10px 16px;		padding: 10px 16px;
−	width: 200px;	+	width: 140px;
	text-decoration: none;		text-decoration: none;
	font-size: 1em;		font-size: 1em;
Line 143:		Line 201:
	/*sets background of navbar choice buttons when hovered*/		/*sets background of navbar choice buttons when hovered*/
		+
	.dropdown:hover .dropbtn {		.dropdown:hover .dropbtn {
−	background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */	+	background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−	background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */	+	background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−	background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */	+	background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−	background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* Standard syntax (must be last) */	+	background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
	}		}
−	/*hides dropdown choices, sets background and shadows. makes sure that	+	/*hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons*/
−	the width is not less than the width of the nav bar choice buttons*/	+
	.dropdown-content {		.dropdown-content {
	-webkit-transition: background 1.5s; /* Safari */		-webkit-transition: background 1.5s; /* Safari */
	transition: background 1.5s;		transition: background 1.5s;
−
−	/*border has same height as progress bar*/
−	border-top: 2px solid rgba(150,150,150,0.3);
−
−	/*fixes layout issue with border rendering 3 px*/
−	margin-top: -0.1px;
	display: none;		display: none;
	position: absolute;		position: absolute;
	background-color: transparent;		background-color: transparent;
−	min-width: 200px;	+	min-width: 140px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;		z-index: 1;
Line 170:		Line 223:
	/*sets layout of dropdown menu when nav bar changes layout*/		/*sets layout of dropdown menu when nav bar changes layout*/
		+
	.dropdown-content.scrolledpastnav {		.dropdown-content.scrolledpastnav {
−	-webkit-transition: background 1.5s; /* Safari */	+	-webkit-transition: background 1.5s;
	transition: background 1.5s;		transition: background 1.5s;
−
−	/*border has same height as progress bar*/
−	border-top: 2px solid transparent;
	}		}
	/*displays dropdown content when nav bar choice is hovered*/		/*displays dropdown content when nav bar choice is hovered*/
		+
	.dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {		.dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {
	display: block;		display: block;
Line 185:		Line 237:
	/*defines nav bar dropdown link layout*/		/*defines nav bar dropdown link layout*/
		+
	.dropdown-content a {		.dropdown-content a {
	color: black;		color: black;
Line 195:		Line 248:
	/*changes navbar dropdown menu color when choice is hovered*/		/*changes navbar dropdown menu color when choice is hovered*/
		+
	.dropdown-content a:hover, .dropdown-content a:focus {		.dropdown-content a:hover, .dropdown-content a:focus {
	background-color: rgb(235,235,235);		background-color: rgb(235,235,235);
	}		}
−	/*********** PROGRESS BAR ************/
−	/*defines progress bar layout*/
−	progress {
−	/* Positioning */
−	position: fixed;
−	left: 0;
−	top: 38px;
−	/* Dimensions */	+	/****************************************************************************************************************/
−	width: 100%;	+
−	height: 2px;	+
−	/* Reset the apperance */	+	/************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/
−	-webkit-appearance: none;	+
−	-moz-appearance: none;	+
−	appearance: none;	+
−	/* Get rid of the default border in Firefox/Opera. */
−	border: none;
−
−	/* For Firefox/IE10+ */
−	background-color: rgba(150,150,150,0.3);
−
−	/* For IE10+, color of the progress bar */
−	color: white;
−	}
−
−	/*changes progressbar when nav bar changes layout*/
−	progress.scrolledpastnav {
−	-webkit-transition: background-color 1.5s; /* Safari */
−	transition: background-color 1.5s;
−	background-color: rgba(20,20,20,1);
−	}
−
−	/*sets progress bar background for older browsers*/
−	progress::-webkit-progress-bar {
−	background-color: rgba(150,150,150,0.3);
−	}
−
−	/*sets color of progress bar value bar*/
−	.flat::-webkit-progress-value {
−	-webkit-transition: background-color 1.5s; /* Safari */
−	transition: background-color 1.5s;
−	background-color: white;
−	}
−
−	/*sets color of progress bar value bar*/
−	.flat::-moz-progress-bar {
−	-webkit-transition: background-color 1.5s; /* Safari */
−	transition: background-color 1.5s;
−	background-color: white;
−	}
−
−	/*sets the progress bar container (not so important for layout it seems)*/
−	.progress-container {
−	width: 100%;
−	background-color: transparent;
−	position: fixed;
−	top: 38px;
−	left: 0;
−	height: 2px;
−	display: block;
−	}
−
−	/******** END OF PROGRESS BAR ********/
−
−
−
−	/****************************************************************************************************************/
−	/************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/
	/****************************************************************************************************************/		/****************************************************************************************************************/
Line 275:		Line 264:
	/*creates the parallax effect on main page when scrooling*/		/*creates the parallax effect on main page when scrooling*/
		+
	.parallax {		.parallax {
−	position: relative;	+	position: relative;
−	z-index: -1;	+	z-index: -1;
	background-image: url("https://static.igem.org/mediawiki/2017/6/67/T--DTU-Denmark--Indian_Cobra.jpg");		background-image: url("https://static.igem.org/mediawiki/2017/6/67/T--DTU-Denmark--Indian_Cobra.jpg");
	width: inherit;		width: inherit;
−
−	/*height is viewport height +1.5% of viewport
−	height (matches with the height of .parralaxfade)*/
	height: 101.5vh;		height: 101.5vh;
	background-attachment: fixed;		background-attachment: fixed;
Line 291:		Line 278:
	/*sets position and style for the headline text on main page*/		/*sets position and style for the headline text on main page*/
		+
	.homepageheadline {		.homepageheadline {
−	position: absolute;	+	position: absolute;
−	width: 850px;	+	width: 850px;
−	height: 150px;	+	height: 150px;
−	line-height: 60px;	+	line-height: 60px;
	text-align: center;		text-align: center;
−	top: 12%;	+	top: 12%;
−	left: 50%;	+	left: 50%;
−	margin: 0px 0px 0px -425px;	+	margin: 0px 0px 0px -425px;
	}		}
	/*styles line one in the headline text on main page*/		/*styles line one in the headline text on main page*/
		+
	#homepageheadline1 {		#homepageheadline1 {
−	font-size: 5em;	+	font-size: 5em;
−	color: white;	+	color: white;
−	margin: 0px;	+	margin: 0px;
−	padding: 0px;	+	padding: 0px;
−	line-height: normal;	+	line-height: normal;
−	font-family: sans-serif;	+	font-family: sans-serif;
−	text-shadow: 2px 2px 6px #727272;	+	text-shadow: 2px 2px 6px #727272;
	}		}
	/*styles line two in the headline text on main page*/		/*styles line two in the headline text on main page*/
		+
	#homepageheadline2 {		#homepageheadline2 {
−	font-size: 3em;	+	font-size: 3em;
−	color: white;	+	color: white;
−	margin: 0px;	+	margin: 0px;
−	padding: 0px;	+	padding: 0px;
−	line-height: normal;	+	line-height: normal;
−	font-family: sans-serif;	+	font-family: sans-serif;
−	text-shadow: 0px 0px 5px #727272;	+	text-shadow: 0px 0px 5px #727272;
	}		}
−	/*creates a fade from parallax image to main content	+	/*creates a fade from parallax image to main content height fits extra height in .parallax*/
−	Height fits extra height in .parallax*/	+
	.parallaxfade {		.parallaxfade {
−	width: inherit;	+	width: inherit;
−	height: 1.5vh;	+	height: 1.5vh;
−	position: absolute;	+	position: absolute;
−	bottom: 0px;	+	bottom: 0px;
−	background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */	+	background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−	background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */	+	background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−	background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */	+	background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−	background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,1)); /* Standard syntax (must be last) */	+	background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,1));
	}		}
Line 340:		Line 330:
	/****************************************************************************************************************/		/****************************************************************************************************************/
		+
	/************************************************* MAIN CONTENT *************************************************/		/************************************************* MAIN CONTENT *************************************************/
		+
	/****************************************************************************************************************/		/****************************************************************************************************************/

---

Revision as of 09:23, 14 July 2017

/*sets boxes so that the width and height properties (and min/max properties) includes content, padding and border, but not the margin*/

• {

 box-sizing: border-box;
 font-family: sans-serif, "Times New Roman", Times, serif;

}

/*makes the website span from edge to edge of the viewport*/

body {

 position: relative;
 width: 100%;
 margin: 0px;
 padding:0px;
 color: red;

}

/*centers all headlines as standard*/

h1, h2, h3, h4, h5, h6 {

 text-align: center;

}

/*defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport*/

.col-1 {

 width: 08.33%;

} .col-2 {

 width: 16.66%;

} .col-3 {

 width: 25.00%;

} .col-4 {

 width: 33.33%;

} .col-5 {

 width: 41.66%;

} .col-6 {

 width: 50.00%;

} .col-7 {

 width: 58.33%;

} .col-8 {

 width: 66.66%;

} .col-9 {

 width: 75.00%;

} .col-10 {

 width: 83.33%;

} .col-11 {

 width: 91.66%;

} .col-12 {

 width: 100.0%;

}

/*defines columns in pixels used for main content area, so user zoom will not affect the layout*/

.colp-1 {

 width: calc(1000px/12);

} .colp-2 {

 width: calc(1000px/12*2);

} .colp-3 {

 width: calc(1000px/12*3);

} .colp-4 {

 width: calc(1000px/12*4);

} .colp-5 {

 width: calc(1000px/12*5);

} .colp-6 {

 width: calc(1000px/12*6);

} .colp-7 {

 width: calc(1000px/12*7);

} .colp-8 {

 width: calc(1000px/12*8);

} .colp-9 {

 width: calc(1000px/12*9);

} .colp-10 {

 width: calc(1000px/12*10);

} .colp-11 {

 width: calc(1000px/12*11);

} .colp-12 {

 width: 1000px;

}

/*makes all the columns go to the left of the page and "stack" to the right if room*/

[class*="col-"] {

 float: left;
 padding: 15px;

}

[class*="colp-"] {

 float: left;
 padding: 15px;

}

/*********** EACH ROW MUST BE 12 COLUMNS TOTAL ************/

/*(example col-4, col-6, col-2 is a row) clears the row of other content*/

.row::after {

 content: "";
 clear: both;
 display: table;

}

/****************************************************************************************************************/

/******************************************* NAVBAR AND PROGRESS BAR *******************************************/

/****************************************************************************************************************/

/*defines key properties of the nav bar*/

nav {

 margin: 0px;
 padding: 0px;
 overflow: hidden;
 top: -20px;
 width: 100%;
 height: 40px;

}

/*hides list*/

nav navbarcenter ul {

 height: 0px;
 width: inherit;
 list-style-type: none;

}

/*sets color of nav bar when the page is scrolled to the top*/

.navbar {

 -webkit-transition: background 1s;
 transition: background 1s;
 background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
 background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
 background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
 background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
 box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);

}

/*sets the color of the nav bar when scrolled down to the main text TRANSITIONS CANNOT BE USED HERE*/

.navbar.scrolledpastnav {

 -webkit-transition: background 1.5s;
 transition: background 1.5s;
 background-color: rgba(20,20,20,1);
 box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);

}

/*helps center navar. The sum of the nav bar choice widths is 1000px (5*200px)*/

.navbarcenter {

   width: 1000px;
   margin: auto;

}

/*makes nav bar choices float next to each other*/

.dropdown {

 float: right;
 height: 40px;

}

/*layout of nav bar choice buttons*/

.dropdown .dropbtn {

 height: 40px;
 display: inline-block;
 color: white;
 text-align: center;
 padding: 10px 16px;
 width: 140px;
 text-decoration: none;
 font-size: 1em;
 font-family: sans-serif, "Times New Roman", Times, serif;

}

/*sets background of navbar choice buttons when hovered*/

.dropdown:hover .dropbtn {

 background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));

}

/*hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons*/

.dropdown-content {

 -webkit-transition: background 1.5s; /* Safari */
 transition: background 1.5s;
 display: none;
 position: absolute;
 background-color: transparent;
 min-width: 140px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;

}

/*sets layout of dropdown menu when nav bar changes layout*/

.dropdown-content.scrolledpastnav {

 -webkit-transition: background 1.5s;
 transition: background 1.5s;

}

/*displays dropdown content when nav bar choice is hovered*/

.dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {

 display: block;

}

/*defines nav bar dropdown link layout*/

.dropdown-content a {

 color: black;
 background-color: white;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;

}

/*changes navbar dropdown menu color when choice is hovered*/

.dropdown-content a:hover, .dropdown-content a:focus {

   background-color: rgb(235,235,235);

}

/****************************************************************************************************************/

/************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/

/****************************************************************************************************************/

/*creates the parallax effect on main page when scrooling*/

.parallax {

 position: relative;
 z-index: -1;
 background-image: url("");
 width: inherit;
 height: 101.5vh;
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

}

/*sets position and style for the headline text on main page*/

.homepageheadline {

 position: absolute;
 width: 850px;
 height: 150px;
 line-height: 60px;
 text-align: center;
 top: 12%;
 left: 50%;
 margin: 0px 0px 0px -425px;

}

/*styles line one in the headline text on main page*/

1. homepageheadline1 {

 font-size: 5em;
 color: white;
 margin: 0px;
 padding: 0px;
 line-height: normal;
 font-family: sans-serif;
 text-shadow: 2px 2px 6px #727272;

}

/*styles line two in the headline text on main page*/

1. homepageheadline2 {

 font-size: 3em;
 color: white;
 margin: 0px;
 padding: 0px;
 line-height: normal;
 font-family: sans-serif;
 text-shadow: 0px 0px 5px #727272;

}

/*creates a fade from parallax image to main content height fits extra height in .parallax*/

.parallaxfade {

 width: inherit;
 height: 1.5vh;
 position: absolute;
 bottom: 0px;
 background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,1));

}

/****************************************************************************************************************/

/************************************************* MAIN CONTENT *************************************************/

/****************************************************************************************************************/

/*styles main text area on main page*/ .maincontainer { margin: 100px auto;

 width: 1000px;
 text-align: justify;
 clear: both;
 display: table;

}

/*container for the two pictures in top of main content*/ .imgmenu {

 max-width: 100%;
 margin: 70px auto 100px auto;
 overflow: hidden;

}

/*sets container for the individual pictures*/ .imgmenuitem {

 position: relative;
 width: 100%;
 max-width: 700px;
 margin: 0px auto;
 height: 400px;
 border-radius: 20px;
 overflow: hidden;
 cursor: pointer;

}

/*sets layout for the pictures themselves*/ .imgmenucontent {

 height: 100%;
 width: 100%;
 background-size: cover;
 background-repeat: no-repeat;
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 transition: all .5s;
 font

}

/*the different images are styled*/ .img1 {

 background-image: url("");
 opacity: 0.9;
 -webkit-filter: brightness(1.2);
 filter: brightness(1.2);
 background-position: -200px center;

} .img2 {

 background-image: url("");
 background-position: -200px -20px;

}

/*zooms picture when hovered*/ .imgmenuitem:hover .imgmenucontent, .imgmenuitem:focus .imgmenucontent {

 -ms-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
 opacity: 0.5;

}

/*sets layout of picture overlay*/ .imgmenuoverlay {

 position: absolute;
 transition: 0.5s ease;
 background-color: rgba(50,50,50,0.6);
 padding: 16px 12px;
 width: 100%;
 height: 40%;
 bottom: 0px;

}

/*changes layout of overlay on pictures when hovered*/ .imgmenuitem:hover .imgmenuoverlay, .imgmenuitem:focus .imgmenuoverlay {

 background-color: rgba(50,50,50,0.9);

}

/*sets style of the text in the overlay*/ .imgmenuoverlay a {

 color: white;
 cursor: pointer;
 text-decoration: none;

}

/*sets style of the header in the overlay*/ .imgmenuoverlay a *:first-child {

 width: 100%;
 border-bottom: 1px solid white;
 text-align: center;

}

/*styles the paragraph in the overlay*/ .imgmenuoverlay a p {

 font-size: 14px;

}

/****************************************************************************************************************/ /**************************************************** FOOTER ****************************************************/ /****************************************************************************************************************/

/*styles main footer area*/ footer {

 background: #848282;
 color: white;
 margin: 0px;
 padding: 0px;
 width: 100%;
 min-width: 1000px;
 position: absolute;
 text-align: center;
 color: white; 
 font-size:x-small;
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

/*defines a container of same width as main content

 that contains footer content*/

.footercontainer {

 width: 1000px;
 margin: auto;

}

/*centers footer content in the individual columns*/ .footercolstyle {

 align-content: center;

}

/*styles left footer column*/ .leftfootercol {

 float: left;

}

/*styles right footer column*/ .rightfootercol {

 float: right;

}

/*gives space between the "find us at" icons*/ footer img {

 margin: 10px;

}

/****************************************************************************************************************/ /*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/ /****************************************************************************************************************/

/*removes margin and padding*/ .rmvpadmarg {

   margin: 0px;
   padding: 0px;

}

/*removes vertical lines on links*/ .rmvlinkstyle a { text-decoration: none; }

/*brings element to front of page, used to bring nav bar

 in front of everything else*/

.tofront {

 position: relative;
 z-index: 9999;

}

/*sets the position of the element to be given a bottom border*/ .bottomborder {

 position: relative;

}

/*styles borders for h1 elements*/ h1.bottomborder:after {

 content:""; 
 background: black; 
 position: absolute; 
 bottom: -5px; 
 left: 150px; 
 height: 1px; 
 width: 700px;

}

/*styles borders for h2 elements*/ h2.bottomborder:after {

 content:""; 
 background: black; 
 position: absolute; 
 bottom: -5px; 
 left: 300px; 
 height: 1px; 
 width: 400px;

}

/****************************************************************************************************************/ /********************************************* TEMPORARY ADDITIONS **********************************************/ /****************************************************************************************************************/

/*TEMPORARY checks if media keyword works

 if screensize is less than 1000px changes background color
 can be used for styling page on mobile devices later*/

/*@media only screen and (max-width: 1000px) {

   body {
       background-color: lightblue;
   }

}

• /