portfolioStyle.css

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Metrophobic&family=Titillium+Web:wght@300;600&display=swap');

/* General styles*/
/*Define your own styles in this stylesheet*/
body{
	background-color: rgba(246,246,246,1.00);
}
h1, h2, h3, h4, h5, h6{
	font-family: 'Titillium Web', sans-serif;
	color: f7f7f7;
	font-style: normal;
	font-weight: 600;
}
p{
	font-size: 14px;
	font-family: 'Metrophobic', sans-serif;
	font-style: normal;
	font-weight: 100;
	color: f7f7f7;
	line-height: 1.8;
}


/* Link styles*/
a {
	color: f7f7f7;
}
a:visited {
	color: black;
}
a:hover {
	color: indigo;
}
.linkStyle {
	color: f7f7f7;
	font-family: 'Metrophobic', sans-serif;
	font-style: normal ;
	font-weight: 100;
	text-decoration: none;	
}
/* Header & HERO styles*/
.logo {
	text-align: center;
    padding-top:20px;
    padding-bottom: 10px;
	font-family:'Titillium Web', sans-serif;
  font-weight: 300;
	font-size:32px;
}
.heroHeader {
	height: 300px;
	
}
/* Navigation styles*/
.topNavUl {
	position: static;
    padding-top: 20px;
    padding-bottom: 20px;
}
.topNavLI {
	text-align: center;
}
/* Typography styles*/
.textStyle {
	font-family: 'Metrophobic', sans-serif;
	
}

.headingStyle {
	/* [disabled]font-family: pt-sans, sans-serif; */
	/* [disabled]font-style: bold; */
	/* [disabled]font-weight: 400; */
	color: f7f7f7;
	font-size: 32px;
}
.mainHeading {
	color: #2A2F33;
	text-align: left;
	margin-top: 1%;
	font-size: 40px;
}
.mainTagline {
	text-align: left;
	color: f7f7f7;
	font-size: 19px;
	margin-top: -1%;
	padding-bottom:5px;
}
.sectionText {
	text-align: center;
}
#sectionOne {
	text-align: justify;
}
#sectionTwo {
	text-align: left;
}

/* Hover main image 

.container {
  display: flex;
  position: inherit;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: white;
}
.wrapper {
  width: 1100px;
  margin: 5% ;
}
.imgs {
  float: left;
  margin: 5px;
  cursor: pointer;
  width: 100%;
}
.imgs .caption:hover {
  opacity: 0.7;
  color: #fff;
  background: #000;
}
.caption {
  opacity: 0;
  color: #fff;
  width: 100%;
  height: 200px;
  font-size: 20px;
  border-radius: 5px;
  position: inherit;
  text-align: center;
  font-family: source-sans-pro, sans-serif;
  -webkit-transition: all 0.50s ease-in-out;
  -moz-transition: all 0.50s ease-in-out;
  -ms-transition: all 0.50s ease-in-out;
  -o-transition: all 0.50s ease-in-out;
  transition: all 0.50s ease-in-out;
}
h1 {
  margin-top: 300px;
  
}

*/

/* Gallery styles */
.gallery{
    padding-top:20px;
    padding-bottom:30px;
}
.paraContent{
	font-size: 14px;
	font-family: 'Metrophobic', sans-serif;
	font-style: normal;
	font-weight: 400;
	color: f7f7f7;
	line-height: 1.8;
	margin-left: 5%;
	margin-right: 5%;
}
.contentArea{
	font-size: 14px;
	font-family: 'Metrophobic', sans-serif;
	font-style: normal;
	font-weight: 100;
	color: f7f7f7;
	line-height: 1.8;
	text-align: center;
	margin-left: 5%;
	margin-right: 5%;
	cursor: pointer;
}
.showAreaH2 {
	
}
#secondaryStyling {
	padding-top: 20px;
    padding-bottom: 20px;
}
.secondarySection {
	background-color: f7f7f7;
}
.secondaryHeading {
	color: f7f7f7;
	text-align: center;
}
/*Footer styles*/
.footerTitle {
    text-align: center;
    font-size: 22px;
}
.footerTextContainer {
	text-align: center;
	margin-bottom: 10%;
}