Difference between revisions of "Team:IISER-Kolkata/style.css"

Revision as of 06:39, 21 June 2018 (view source) Prajwalp (Talk | contribs) (Created page with "→‎fonts: @font-face { src: url("https://2018.igem.org/File:T--IISER-Kolkata--blogger.ttf"); font-family: blogger; } @font-face { src: url("https://2018.igem.org/Fil...")		Latest revision as of 05:30, 24 November 2018 (view source) Quasar (Talk | contribs)
(74 intermediate revisions by 2 users not shown)
Line 1:		Line 1:
−	/*fonts*/	+	.pagelink#homeMenu a {
−	@font-face {	+	color: gold;
−	src: url("https://2018.igem.org/File:T--IISER-Kolkata--blogger.ttf");	+
−	font-family: blogger;	+
−	}	+
−	@font-face {	+
−	src: url("https://2018.igem.org/File:T--IISER-Kolkata--prime.otf");	+
−	font-family: prime;	+
−	}	+
−	@font-face {	+
−	src: url("https://2018.igem.org/File:T--IISER-Kolkata--rodina.otf");	+
−	font-family: rodina;	+
−	}	+
−	@font-face {	+
−	src: url("https://2018.igem.org/File:T--IISER-Kolkata--social.ttf");	+
−	font-family: social;	+
	}		}
−	/*body*/	+	.maincont#container {
−	body, html {	+
−	width: 100vw;	+
−	margin: 0;	+
−	padding: 0;	+
−	}	+
−	body {	+
−	height: 1200vh;	+
−	overflow-y: scroll;	+
−	overflow-x: hidden;	+
−	margin: auto;	+
−	}	+
−	body::-webkit-scrollbar-track	+
−	{	+
−	background-color: black;	+
−	}	+
−	body::-webkit-scrollbar	+
−	{	+
−	width: 1vw;	+
−	}	+
−	body::-webkit-scrollbar-thumb	+
−	{	+
−	background-color: #999999;	+
−	}	+
−	body::-webkit-scrollbar-thumb:hover	+
−	{	+
−	background-color: #777777;	+
−	}	+
−		+
−	#container {	+
−	height: 1200vh;	+
	width: 100vw;		width: 100vw;
		+	height: auto;
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
	}		}
−	/*navbar*/	+	section.mainpage {
−	#menubar {	+
−	width: 100vw;	+
−	height: 3vw;	+
−	background-color: rgba(0,0,0,0.7);	+
−	display: inline-flex;	+
−	align-items: center;	+
−	position: absolute;	+
−	top: 100vh;	+
−	left: 0vw;	+
−	z-index: 10;	+
−	}	+
−	#menubar.stickymenu {	+
−	position: fixed;	+
−	top: 0vh;	+
−	}	+
−	#menubar #logo {	+
−	margin-left: 1vw;	+
−	margin-right: 1vw;	+
−	display: flex;	+
−	width: 2.5vw;	+
−	height: 2.5vw;	+
−	}	+
−	#logo img {	+
−	height: 100%;	+
−	width: 100%;	+
−	}	+
−	#menubar .pagelink {	+
−	display: flex;	+
−	align-items: center;	+
−	justify-content: center;	+
−	height: 100%;	+
−	width: 8vw;	+
−	}	+
−	#menubar .pagelink#registerMenu {	+
−	margin-left: auto;	+
−	}	+
−	#menubar .pagelink#loginMenu {	+
−	margin-right: 1vw;	+
−	}	+
−	.pagelink div {	+
−	cursor: pointer;	+
−	-webkit-transition: 0.2s linear;	+
−	-moz-transition: 0.2s linear;	+
−	-o-transition: 0.2s linear;	+
−	transition: 0.2s linear;	+
−	}	+
−	.pagelink div p {	+
−	font-family: prime;	+
−	font-size: 1.3vw;	+
−	color: #cccccc;	+
−	}	+
−	.pagelink div:hover > p {	+
−	color: white !important;	+
−	}	+
−	#register {	+
−	position: fixed;	+
−	display: flex;	+
−	height: 40vw;	+
−	width: 40vw;	+
−	left: -45vw;	+
−	top: 50vh;	+
−	margin-top: -20vw;	+
−	background-color: white;	+
−	border: 0.2vw solid black;	+
−	border-radius: 2vw;	+
−	z-index: 10;	+
−	-webkit-transition: 0.2s linear;	+
−	-moz-transition: 0.2s linear;	+
−	-o-transition: 0.2s linear;	+
−	transition: 0.2s linear;	+
−	}	+
−	#login {	+
−	position: fixed;	+
−	display: flex;	+
−	height: 20vw;	+
−	width: 30vw;	+
−	left: -35vw;	+
−	top: 50vh;	+
−	margin-top: -10vw;	+
−	background-color: white;	+
−	border: 0.2vw solid black;	+
−	border-radius: 2vw;	+
−	z-index: 10;	+
−	-webkit-transition: 0.2s linear;	+
−	-moz-transition: 0.2s linear;	+
−	-o-transition: 0.2s linear;	+
−	transition: 0.2s linear;	+
−	}	+
−	.orangetext div p {	+
−	color: orange !important;	+
−	}	+
−	.orangetext div:hover > p {	+
−	color: yellow !important;	+
−	}	+
−	#login .exit, #register .exit {	+
−	position: absolute;	+
−	top: 1vw;	+
−	right: 1vw;	+
−	height: 3vw;	+
−	width: 3vw;	+
−	border-radius: 100%;	+
−	font-family: rodina;	+
−	font-weight: bold;	+
−	font-size: 3vw;	+
−	cursor: pointer;	+
−	color: black;	+
−	z-index: 1;	+
−	display: flex;	+
−	align-items: center;	+
−	justify-content: center;	+
−	-webkit-transition: 0.2s linear;	+
−	-moz-transition: 0.2s linear;	+
−	-o-transition: 0.2s linear;	+
−	transition: 0.2s linear;	+
−	}	+
−	#login .exit:hover, #register .exit:hover {	+
−	background-color: black;	+
−	color: white;	+
−	}	+
−		+
−	section {	+
	position: relative;		position: relative;
	display: flex;		display: flex;
−	height: 200vh;
	width: 100vw;		width: 100vw;
	}		}
−	#home {	+	/*Landing*/
−	background: white;	+	.mainpage#landing {
−	height: 100vh;	+	flex-direction: column;
		+	min-height: 70vh;
		+	align-items: center;
		+	justify-content: center;
		+	background-color: #eeeeee;
		+	padding: 10vmin 0vw 5vmin 0vw;
	}		}
−	#home #iiserk {	+	#landing #goldmedal {
−	height: 6vw;	+	height: 20vmin;
−	width: 6vw;	+	width: auto;
−	display: flex;	+	margin: 2vw;
−	align-items: center;	+
	position: absolute;		position: absolute;
−	top: 1vw;	+	left: 80vw;
−	left: 1vw;	+	top: 5vw;
−	z-index: 5;	+
−	cursor: pointer;	+
	}		}
−	#iiserk:hover {	+	#landing #mainlogo {
−		+	height: 50vmin;
		+	width: auto;
		+	margin: 2vw;
	}		}
−	#iiserk a img {	+	#landing h3 {
−	height: 6vw;	+
	width: auto;		width: auto;
		+	font-family: prime;
		+	font-size: 1.8vmax;
		+	margin: 2vw 0vw 1.5vw 0vw;
	}		}
−	#home #social {	+	#landing p {
−	height: 20vw;	+	margin: 0.8vw 0vw 1.2vw 0vw;
−	width: 3vw;	+	font-family: blogger;
		+	font-size: 1.5vmax;
		+	}
		+	#homeflex {
		+	width: 100%;
		+	height: auto;
	display: flex;		display: flex;
−	flex-direction: column;	+	flex-wrap: wrap;
	align-items: center;		align-items: center;
−	position: absolute;
−	top: 50vh;
−	margin-top: -10vw;
−	right: 2vw;
−	z-index: 5;
−	}
−	#social .links {
−	height: 3vw;
−	width: 3vw;
−	margin: 1vw 0vw 1vw 0vw;
−	display: flex;
	justify-content: center;		justify-content: center;
−	align-items: center;
−	cursor: pointer;
	}		}
−	#social .links a {	+	#homeflex .homebutton {
−	font-family: social;	+	display: flex;
−	font-size: 4vw;	+
−	color: black;	+
−	text-decoration: none;	+
−	}	+
−	#soc-facebook:hover > a {	+
−	color: #3b5998;	+
−	}	+
−	#soc-twitter:hover > a {	+
−	color: #00aced;	+
−	}	+
−	#soc-instagram:hover > a {	+
−	color: #c32aa3;	+
−	}	+
−	#soc-youtube:hover > a {	+
−	color: #bb0000;	+
−	}	+
−	#home #pagedown {	+
−	position: absolute;	+
−	top: 90vh;	+
−	left: 47vw;	+
−	height: 3vw;	+
−	width: 6vw;	+
−	font-size: 2vw;	+
−	cursor: pointer;	+
−	display: flex;	+
	align-items: center;		align-items: center;
−	justify-content: center;	+	justify-content: center;
−	background-color: gray;	+	width: auto;
−	border: solid black 0.1vw;	+	height: 3vmax;
−	}	+	padding: 1vw;
−		+	margin: 1vw;
−	#aboutUs {	+
−	background-color: chartreuse;	+
−	}	+
−	/*aboutUs page*/	+
−	#aboutUs .sidekick {	+
−	height: 100vh;	+
−	width: 15vw;	+
−	position: absolute;	+
−	top: 0vh;	+
−	background-color: white;	+
−	transition: 0.5s ease;	+
−	z-index: 1;	+
−	opacity: 0.5;	+
−	}	+
−	.sidekick#sk1 {	+
−	left: -15vw;	+
−	}	+
−	.sidekick#sk2 {	+
−	left: 100vw;	+
−	}	+
−		+
−	/*events page*/	+
−	#events {	+
−	background: white;	+
−	}	+
−	#events .tab {	+
−	position: absolute;	+
−	background-color: white;	+
−	display: flex;	+
−	align-items: center;	+
−	justify-content: center;	+
−	height: 100vh;	+
−	width: 50vw;	+
	cursor: pointer;		cursor: pointer;
		+	background-color: gold;
	-webkit-transition: 0.2s linear;		-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;		-moz-transition: 0.2s linear;
	-o-transition: 0.2s linear;		-o-transition: 0.2s linear;
−	transition: 0.2s linear;	+	transition: 0.2s linear;
	}		}
−	.tab#left-tab {	+	.homebutton a {
−	left: 0vw;	+	text-decoration: none !important;
−	top: 0vh;	+	color: black;
	}		}
−	.tab#right-tab {	+	.homebutton a p {
−	left: 50vw;	+	font-family: rodina !important;
−	top: 0vh;	+	font-size: 1.8vmax !important;
−	}	+
−	.tab .tab-text {	+
−	height: 6vw;	+
−	width: 18vw;	+
−	padding: 1vw;	+
−	font-family: prime;	+
−	font-size: 2vw;	+
−	color: #000040;	+
−	background-color: white;	+
−	border: 0.5vw solid #000040;	+
−	text-align: center;	+
−	display: flex;	+
−	align-items: center;	+
	-webkit-transition: 0.2s linear;		-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;		-moz-transition: 0.2s linear;
Line 321:		Line 84:
	transition: 0.2s linear;		transition: 0.2s linear;
	}		}
−	#left-tab #gamecomp {	+	.homebutton:hover {
−		+	background-color: black !important;
	}		}
−	#right-tab #workexhib {	+	.homebutton:hover a {
−		+	color: gold !important;
	}		}
−	#events .pop {	+	.homebutton a:hover {
−	position: absolute;	+	color: white !important;
−	display: flex;	+	text-decoration: none;
−	height: 100vh;	+
−	width: 100vw;	+
−	z-index: 5;	+
−	-webkit-transition: 0.2s linear;	+
−	-moz-transition: 0.2s linear;	+
−	-o-transition: 0.2s linear;	+
−	transition: 0.2s linear;	+
	}		}
−	.pop#gamecomp-pop {	+
−	left: 100vw;	+	/*Sponsors*/
−	top: 0vh;	+	.mainpage#sponsors {
		+	flex-wrap: wrap;
		+	height: auto;
		+	background-color: #dddddd;
		+	justify-content: space-around;
	}		}
−	.pop#workexhib-pop {	+	#sponsors a img {
−	left: 100vw;	+	height: 20vmin;
−	top: 0vh;	+	width: auto;
		+	margin: 2vmax;
	}		}
−	.pop .exit {	+
−	position: absolute;	+	/*Contact Us*/
−	top: 4vw;	+	.mainpage#contactUs {
−	left: 94vw;	+	flex-wrap: wrap;
−	height: 4vw;	+	height: auto;
−	width: 4vw;	+	background-color: #222222;
−	border-radius: 100%;	+
−	font-family: rodina;	+
−	font-weight: bold;	+
−	font-size: 4vw;	+
−	cursor: pointer;	+
−	color: #000040;	+
−	z-index: 5;	+
−	display: flex;	+
−	align-items: center;	+
	justify-content: center;		justify-content: center;
−	-webkit-transition: 0.2s linear;
−	-moz-transition: 0.2s linear;
−	-o-transition: 0.2s linear;
−	transition: 0.2s linear;
	}		}
−	.pop .exit:hover {	+	#contactUs #contactLeft {
−	background-color: #000040;	+	display: flex;
−	color: white;	+	flex-direction: column;
		+	width: 40vw;
		+	margin: 2vw;
	}		}
−	.pop .event-type {	+	#contactUs #contactRight {
−	position: absolute;	+
−	top: 0vh;	+
−	left: 0vw;	+
−	height: 100vh;	+
−	width: 20vw;	+
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
−	align-items: center;	+	width: 30vw;
−	justify-content: center;	+	margin: 2vw;
−	background-color: #000040;	+
	}		}
−	.event-type .type-list {	+	#contactLeft h4,#contactRight h4 {
−	height: 4vw;	+	margin: 1.5vw 0vw 1vw 0vw;
−	width: 18vw;	+	color: #dddddd;
−	display: flex;	+
−	align-items: center;	+
−	justify-content: center;	+
−	margin: 1vw 0vw 1vw 0vw;	+
−	background-color: #000040;	+
−	border-radius: 1vw 0vw 1vw 0vw;	+
	font-family: prime;		font-family: prime;
−	font-size: 1.25vw;	+	font-size: 1.6vmax;
−	color: white;	+
−	cursor: pointer;	+
−	-webkit-transition: 0.2s linear;	+
−	-moz-transition: 0.2s linear;	+
−	-o-transition: 0.2s linear;	+
−	transition: 0.2s linear;	+
	}		}
−	.event-type .list-active {	+	#contactLeft p,#contactRight p {
−	background-color: white;	+	margin: 0.5vw 0vw 0.5vw 0vw;
−	color: #000040;	+	color: #dddddd;
		+	font-family: blogger;
		+	font-size: 1.5vmax;
	}		}
−	.type-list:hover {	+	#contactLeft a,#contactRight a {
−	background-color: #aaaaaa;	+	color: #999999;
−	color: #000040;	+	font-family: blogger;
		+	font-size: 1.5vmax;
		+	text-decoration: none;
	}		}
−	.pop .event-desc {	+	#contactLeft a:hover,#contactRight a:hover {
−	position: absolute;	+	color: white;
−	top: 0vh;	+
−	left: 20vw;	+
−	height: 100vh;	+
−	width: 80vw;	+
−	display: flex;	+
−	background-color: white;	+
−	color: #000040;	+
	}		}
−	.event-desc .event-head {	+	#contactUs #social {
−	display: none;	+	display: flex;
−	position: absoute;	+	width: 100vw;
−	top: 10vh;	+	margin: 1vmax 0vmax 1vmax 0vmax;
−	left: 5vw;	+	justify-content: center;
−	height: 10vh;	+	}
−	width: 55vw;	+	#social .links {
−	align-items: center;	+	font-family: social;
−	justify-content: center;	+	font-size: 4vmax;
−	background-color: white;	+	margin: 1vmax;
−	font-family: blogger;	+	color: #999999;
−	font-size: 3vw;	+	text-decoration: none;
−	font-weight: bold;	+
−	color: #000040;	+
	-webkit-transition: 0.2s linear;		-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;		-moz-transition: 0.2s linear;
	-o-transition: 0.2s linear;		-o-transition: 0.2s linear;
−	transition: 0.2s linear;	+	transition: 0.2s linear;
	}		}
−	.event-head.head-active {	+	#socFacebook:hover {
−	display: flex;	+	color: #3b5998;
−	position: absolute;	+
	}		}
−	.event-desc .indiv-event {	+	#socTwitter:hover {
−	display: none;	+	color: #00aced;
−	position: absoute;	+
−	top: 25vh;	+
−	left: 5vw;	+
−	height: 50vh;	+
−	width: 70vw;	+
−	background-color: white;	+
−	color: #000040;	+
−	-webkit-transition: 0.2s linear;	+
−	-moz-transition: 0.2s linear;	+
−	-o-transition: 0.2s linear;	+
−	transition: 0.2s linear;	+
	}		}
−	.indiv-event.event-active {	+	#footer {
	display: flex;		display: flex;
−	position: absolute;	+	align-items: center;
−	}	+	justify-content: flex-end;
−	.indiv-event .details {	+	min-height: 2vmax;
−	position: absoute;	+	width: 90vw;
−	top: 0vh;	+
−	left: 0vw;	+
−	height: 50vh;	+
−	width: 46vw;	+
−	border: 0.2vw solid #000040;	+
−	border-radius: 3vw 0vw 0vw 3vw;	+
−	text-align: justify;	+
−	overflow-y: scroll;	+
−	overflow-x: hidden;	+
−	}	+
−	.indiv-event .details::-webkit-scrollbar-track	+
−	{	+
−	background-color: white;	+
−	}	+
−	.indiv-event .details::-webkit-scrollbar	+
−	{	+
−	width: 0.8vw;	+
−	}	+
−	.indiv-event .details::-webkit-scrollbar-thumb	+
−	{	+
−	background-color: #000040;	+
−	}	+
−	.indiv-event .contact {	+
−	position: absoute;	+
−	left: 46vw;	+
−	margin-left: 2vw;	+
−	height: 50vh;	+
−	width: 22vw;	+
−	border: 0.2vw solid white;	+
−	border-radius: 0vw 3vw 3vw 0vw;	+
−	background-color: #000040;	+
−	color: white;	+
−	overflow-x: hidden;	+
−	}	+
−	.indiv-event .contact::-webkit-scrollbar-track	+
−	{	+
−	background-color: #000040;	+
−	}	+
−	.indiv-event .contact::-webkit-scrollbar	+
−	{	+
−	width: 0.8vw;	+
−	}	+
−	.indiv-event .contact::-webkit-scrollbar-thumb	+
−	{	+
−	background-color: white;	+
	}		}
−	.details h4 {	+	#footer p {
		+	margin: 1vw 0vh 0vw 0vh;
		+	padding: 0.5vw 0 0.5vw 0;
		+	border-top: 0.1vw solid white;
		+	font-size: 1.5vmax;
	font-family: rodina;		font-family: rodina;
−	font-size: 2.5vw;	+	color: #dddddd;
−	margin: 2vw 2.5vw 2vw 2.5vw;	+
	}		}
−	.details h6, .contact h6 {	+
−	font-family: rodina;	+	/*Abstract and Description*/
−	font-size: 2vw;	+	#homecontainer {
−	margin: 1.5vw 2.5vw 1.5vw 2.5vw;	+	position: relative;
		+	top: 2vmax;
		+	width: 100%;
		+	height: auto;
		+	display: flex;
		+	flex-direction: column;
		+	background-color: #eeeeee;
	}		}
−	.details p, .contact p {	+	section.submainpage {
−	font-family: blogger;	+	padding: 2.5vw 7.5vw 2.5vw 7.5vw;
−	font-size: 1.5vw;	+	position: relative;
−	margin: 1vw 2.5vw 1vw 2.5vw;	+
−	}	+
−	.event-desc .rem-events {	+
−	display: none;	+
−	position: absoute;	+
−	top: 80vh;	+
−	left: 5vw;	+
−	height: 15vh;	+
−	width: 55vw;	+
−	background-color: white;	+
−	color: #000040;	+
−	-webkit-transition: 0.2s linear;	+
−	-moz-transition: 0.2s linear;	+
−	-o-transition: 0.2s linear;	+
−	transition: 0.2s linear;	+
−	}	+
−	.rem-events.rem-active {	+
	display: flex;		display: flex;
		+	flex-direction: column;
	align-items: center;		align-items: center;
−	justify-content: center;	+	min-height: 100vh;
−	position: absolute;	+	width: auto;
	}		}
−	.rem-events .icon {	+	.submainpage h1.subheading {
−	display: flex;	+	width: auto;
−	cursor: pointer;	+	font-family: rodina !important;
−	margin: 1vw;	+	font-size: 3vmax !important;
−	height: 6vw;	+	margin: 2.5vw 0vw 2.5vw 0vw !important;
−	width: 6vw;	+	border-bottom: 0.3vw solid gold !important;
−	border-radius: 100%;	+
−	-webkit-transition: 0.2s linear;	+
−	-moz-transition: 0.2s linear;	+
−	-o-transition: 0.2s linear;	+
−	transition: 0.2s linear;	+
	}		}
−	.icon:hover {	+	.submainpage p {
−	height: 7vw;	+	width: auto;
−	width: 7vw;	+	align-self: flex-start;
−	}	+	font-family: blogger !important;
−	.icon.icon-active {	+	font-size: 1.5vmax !important;
−	height: 8vw;	+	text-align: justify !important;
−	width: 8vw;	+	margin: 0.8vw 0vw 1.2vw 0vw !important;
−	}	+
−	.icon img {	+
−	height: 100%;	+
−	width: 100%;	+
−	}	+
−		+
−	#gallery {	+
−	background-color: orange;	+
−	}	+
−	#ourTeam {	+
−	background-color: darkorchid;	+
−	}	+
−	#sponsors {	+
−	background-color: goldenrod;	+
−	}	+
−	#reachUs {	+
−	background-color: pink;	+
−	height: 100vh;	+
	}		}

---

Latest revision as of 05:30, 24 November 2018

.pagelink#homeMenu a {

   color: gold;

}

.maincont#container { width: 100vw;

   height: auto;

display: flex; flex-direction: column; }

section.mainpage { position: relative; display: flex; width: 100vw; }

/*Landing*/ .mainpage#landing {

   flex-direction: column;
   min-height: 70vh;
   align-items: center;
   justify-content: center;
   background-color: #eeeeee;
   padding: 10vmin 0vw 5vmin 0vw;

}

1. landing #goldmedal {

   height: 20vmin;
   width: auto; 
   margin: 2vw; 
   position: absolute;
   left: 80vw;
   top: 5vw;  

}

1. landing #mainlogo {

   height: 50vmin;
   width: auto; 
   margin: 2vw;   

}

1. landing h3 {

   width: auto;
   font-family: prime;
   font-size: 1.8vmax;
   margin: 2vw 0vw 1.5vw 0vw;

}

1. landing p {

   margin: 0.8vw 0vw 1.2vw 0vw;
   font-family: blogger;
   font-size: 1.5vmax;

}

1. homeflex {

   width: 100%;
   height: auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;  
   justify-content: center;

}

1. homeflex .homebutton {

   display: flex;  
   align-items: center;
   justify-content: center;   
   width: auto;
   height: 3vmax; 
   padding: 1vw;
   margin: 1vw;
   cursor: pointer;
   background-color: gold;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;     

} .homebutton a {

   text-decoration: none !important;
   color: black;

} .homebutton a p {

   font-family: rodina !important;
   font-size: 1.8vmax !important;        
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;

} .homebutton:hover {

   background-color: black !important;

} .homebutton:hover a {

   color: gold !important;

} .homebutton a:hover {

   color: white !important;
   text-decoration: none;

}

/*Sponsors*/ .mainpage#sponsors {

   flex-wrap: wrap;
   height: auto;
   background-color: #dddddd;
   justify-content: space-around;

}

1. sponsors a img {

   height: 20vmin;
   width: auto;
   margin: 2vmax;

}

/*Contact Us*/ .mainpage#contactUs {

   flex-wrap: wrap;
   height: auto;
   background-color: #222222;
   justify-content: center;

}

1. contactUs #contactLeft {

   display: flex;
   flex-direction: column;
   width: 40vw;
   margin: 2vw;

}

1. contactUs #contactRight {

   display: flex;
   flex-direction: column;
   width: 30vw;
   margin: 2vw;

}

1. contactLeft h4,#contactRight h4 {

   margin: 1.5vw 0vw 1vw 0vw;
   color: #dddddd;
   font-family: prime;
   font-size: 1.6vmax;

}

1. contactLeft p,#contactRight p {

   margin: 0.5vw 0vw 0.5vw 0vw;
   color: #dddddd;
   font-family: blogger;
   font-size: 1.5vmax;

}

1. contactLeft a,#contactRight a {

   color: #999999;
   font-family: blogger;
   font-size: 1.5vmax;
   text-decoration: none;

}

1. contactLeft a:hover,#contactRight a:hover {

   color: white;

}

1. contactUs #social {

   display: flex;   
   width: 100vw;
   margin: 1vmax 0vmax 1vmax 0vmax;
   justify-content: center; 

}

1. social .links {

   font-family: social;
   font-size: 4vmax;
   margin: 1vmax;
   color: #999999;
   text-decoration: none;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;   

}

1. socFacebook:hover {

   color: #3b5998;

}

1. socTwitter:hover {

   color: #00aced;

}

1. footer {

   display: flex;
   align-items: center;
   justify-content: flex-end;
   min-height: 2vmax;
   width: 90vw;

}

1. footer p {

   margin: 1vw 0vh 0vw 0vh;
   padding: 0.5vw 0 0.5vw 0;
   border-top: 0.1vw solid white;
   font-size: 1.5vmax;
   font-family: rodina;
   color: #dddddd;

}

/*Abstract and Description*/

1. homecontainer {

   position: relative;
   top: 2vmax;
   width: 100%;
   height: auto;
   display: flex;
   flex-direction: column;
   background-color: #eeeeee;

} section.submainpage {

   padding: 2.5vw 7.5vw 2.5vw 7.5vw;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   width: auto;

} .submainpage h1.subheading {

   width: auto;
   font-family: rodina !important;
   font-size: 3vmax !important;
   margin: 2.5vw 0vw 2.5vw 0vw !important;
   border-bottom: 0.3vw solid gold !important;

} .submainpage p {

   width: auto;
   align-self: flex-start;
   font-family: blogger !important;
   font-size: 1.5vmax !important;
   text-align: justify !important;
   margin: 0.8vw 0vw 1.2vw 0vw !important;

}