* {
    margin:0;
    padding:0;
}

/* PAGE WRAPPER */
.wrapper {
	margin: 0 auto;
}

@font-face {
	font-family: MontserratSemiBold;
	src: url('fonts/Montserrat-SemiBold.otf');
}

@font-face {
	font-family: MontserratUltraLight;
	src: url('fonts/Montserrat-UltraLight.otf');
}

@import url(https://fonts.googleapis.com/css?family=Lato:300);

@import url(https://fonts.googleapis.com/css?family=Lato:300italic);

@media screen and (min-width: 960px) {
    .wrapper {
        width: 860px;
		padding: 50px;
    }
}

@media screen and (min-width: 768px) and (max-width: 959px) {
    .wrapper {
		width: 768px !important;
	}
}

@media screen and (max-width: 767px) {
    .wrapper {
		width: 400px;
	}
}

/* change opacity of logo on hover */
.logo {
	float: left;
	-webkit-opacity: 1.0;
	-moz-opacity: 1.0;
	-ms-opacity: 1.0;
	-o-opacity: 1.0;
	opacity: 1.0;
	-webkit-transition: opacity 0.5s ease-out; 
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

/* change opacity of logo on hover */
.logo:hover {
	-webkit-opacity: 0.4;
	-moz-opacity: 0.4;
	-ms-opacity: 0.4;
	-o-opacity: 0.4;
	opacity: 0.4;
}

/* top menu */
.menuWrapper {
	display: block;
	height: 150px;
}

/* menu items */
.menuItems {
	float: right;
	font-family: MontserratUltraLight;
	font-size: 18px;
	letter-spacing: 1px;
	padding-top: 44px;
}

/* menu item styles */
.menuItems a {
	color: #111111;
	text-decoration: none;
	position: relative;
	padding-bottom: 5px;
}

.menuItems > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.menuItems > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
  background-color: rgb(249,207,12);
}

.bodyWrapper {
	clear: both;
	margin-top: 80px;
}

#hellothere {
	font-family: MontserratSemiBold;
	font-size: 56px;
	letter-spacing: 2px;
	color: #111111;
	text-transform: uppercase;
	background-color: #ffffff;
}

/* about page section wrapper */
#AboutSec1 {
	padding-top: 20px;
}

/* photo of Rachel Remington */
#myBioPic {
	float: left;
	padding-right: 50px;
}

/* biography text */
#biography1 {
	font-family: 'Lato', sans-serif;
	font-size: 21px;
	line-height: 33px;
}

/* about me title on about page */
#aboutMeTitle {
	margin-top: -7px;
	font-size: 36px !important;
}

/* orange span text */
.orangeText {
	font-family: MontserratSemiBold;
	color: rgb(249,207,12);
}

/* biography text */
#biography2 {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	line-height: 26px;
	margin-left: 330px;
}

/* resume link button on about page */
#resumeButton {
	position: relative;
	top: -52px;
	font-family: MontserratSemiBold;
	letter-spacing: 1px;
	font-size: 22px;
	color: rgb(106,197,173);
	border: 5px solid rgb(106,197,173);
	padding: 5px;
	width: 160px;
	text-align: center;
	margin-left: 50px;
	-webkit-opacity: 1.0;
	-moz-opacity: 1.0;
	-ms-opacity: 1.0;
	-o-opacity: 1.0;
	opacity: 1.0;
	-webkit-transition: opacity 0.5s ease-out; 
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

/* resume button on hover */
#resumeButton:hover {
	-webkit-opacity: 0.4;
	-moz-opacity: 0.4;
	-ms-opacity: 0.4;
	-o-opacity: 0.4;
	opacity: 0.4;
}

a {
	text-decoration: none;
}

/* homepage text */
#homePageText {
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	line-height: 36px;
	padding-top: 20px;
}

/* wrapper for top section of home page */
#homeWrapper1 {
	margin-bottom: 10px;
	text-align: center;
}

/* styles for portfolio grid */
.portfolioIMG1 {
	margin-top: 60px;
}

/* styles for portfolio grid */
.portfolioIMG2 {
	float: right;
	margin-top: 60px;
}

/* styles for portfolio grid long image */
.portfolioIMG3 {
	margin-top: 60px;
}

/* contact info in footer */
.contactInfo {
	float: left;
}

/* footer wrapper */
.footer {
	margin-top: 90px;
	padding-bottom: 30px;
}

/* contact me h1 tag */
.contactH1 {
	font-family: MontserratSemiBold;
	font-size: 20px;
	letter-spacing: 1px;
	color: rgb(249,207,12);
}

/* contact info */
.contactText {
	color: #111111;
	font-family: MontserratUltraLight;
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: 40px;
}

/* contact info in footer */
.contactText a {
	color: #111111;
}

/* copyright in footer */
.copyRight {
	float: right;
	color: #111111;
	font-family: MontserratUltraLight;
	font-size: 14px;
	margin-top: 30px;
}

/* project page titles */
.projectTitles {
	font-family: MontserratSemiBold;
	font-size: 22px;
	color: #111111;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 44px;
}

/* subheadings */
.subHeadings1 {
	font-family: MontserratUltraLight;
	font-size: 18px;
	color: rgb(249,207,12);
	letter-spacing: 1px;
	line-height: 30px;
}

/* subheadings smaller */
.subHeadings2 {
	font-family: MontserratUltraLight;
	font-size: 14px;
	color: #111111;
	letter-spacing: 1px;
	line-height: 36px;
}

/* smallest subheadings */
.smallHeadings {
	font-family: MontserratSemiBold;
	color: #111111;
}

/* body text for project paragraphs */
.projectParagraphs {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	line-height: 26px;
	margin-top: 50px;
	margin-bottom: 60px;
}

/* body text for project paragraphs */
.projectParagraphs2 {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	line-height: 26px;
	margin-top: 60px;
}

/* image bounce on hover */
.imageBounce {
	-webkit-opacity: 1.0;
	-moz-opacity: 1.0;
	-ms-opacity: 1.0;
	-o-opacity: 1.0;
	opacity: 1.0;
	-webkit-transition: opacity 0.5s ease-out; 
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.imageBounce:hover {
	-webkit-opacity: 0.4;
	-moz-opacity: 0.4;
	-ms-opacity: 0.4;
	-o-opacity: 0.4;
	opacity: 0.4;
}

/* shrinks width of content on projects pages */
.shrinkContent {
	width: 650px;
	margin: 0 auto;
}

/* body text that goes in italics */
.italicText {
	font-family: 'Lato', sans-serif;
	font-style: italic;
}

/* section headings for case studies */
.caseStudyHeadings {
	font-family: MontserratSemiBold;
	font-size: 20px;
	color: #111111;
	letter-spacing: 1px;
	line-height: 42px;
	text-transform: uppercase;
}

/* logo at top of palate page */
#palateLogo {
	margin-top: 60px;
}

/* bold hyperlinks */
.boldLinks {
	font-family: MontserratSemiBold;
	color: rgb(106,197,173);
	-webkit-opacity: 1.0;
	-moz-opacity: 1.0;
	-ms-opacity: 1.0;
	-o-opacity: 1.0;
	opacity: 1.0;
	-webkit-transition: opacity 0.5s ease-out; 
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.boldLinks:hover {
	-webkit-opacity: 0.4;
	-moz-opacity: 0.4;
	-ms-opacity: 0.4;
	-o-opacity: 0.4;
	opacity: 0.4;
}
	

/* top title text over portfolio images */
.portTitle1 {
	font-family: MontserratSemiBold;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 1px;
}


span.text-content {
  background: rgba(0,0,0,0.6);
  color: white;
  cursor: pointer;
  height: 400px;
  position: absolute;
  top: 475px;
  width: 860px;
  margin: 0 auto;
  text-align: center;
  	-webkit-opacity: 0.0;
	-moz-opacity: 0.0;
	-ms-opacity: 0.0;
	-o-opacity: 0.0;
	opacity: 0.0;
	-webkit-transition: opacity 0.5s ease-out; 
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
	line-height: 400px;
}

span.text-content:hover {
	-webkit-opacity: 1.0;
	-moz-opacity: 1.0;
	-ms-opacity: 1.0;
	-o-opacity: 1.0;
	opacity: 1.0;
}

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

/* tablet styles */
@media screen and (min-width: 768px) and (max-width: 959px) {
	.wrapper {
		width: 700px !important;
	}
	.menuWrapper {
		padding-top: 40px;
	}
	.portfolioIMG1,.portfolioIMG2 {
		width: 325px;
		height: 325px;
		margin-top: 50px;
	}
	.portfolioIMG3 {
		width: 700px;
		height: auto;
		margin-top: 50px;
	}
	#AboutSec1 {
		padding-top: 0px;
	}
	#aboutMeTitle {
		position: relative;
		top: -7px;
	}
	#biography1, #biography2 {
		margin-left: 0;
	}
	#myBioPic {
		padding-bottom: 30px;
	}
	#resumeButton {
		top: 50px;
		margin: 0 auto 50px;
	}
	#footerAbout {
		clear: left;
		margin-top: 130px;
	}
	.shrinkContent {
		width: 100%;
	}
	/* shrink project pictures */
	.projectPics {
		width: 100%;
		height: auto;
	}
	.projectParagraphs{
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.projectParagraphs2 {
		margin-top: 50px;
	}
}

/* mobile styles */
@media screen and (max-width: 767px) {
    .wrapper {
		width: 360px;
		margin: 0 auto;
	}
	.menuItems {
		text-align: center;
		width: 100%;
		margin: 0 auto;
		display: block;
		position: relative;
		top: 20px;
	}
	.menuWrapper {
		display: static;
		padding-top: 30px;
		width: 360px !important;
		margin: 0 auto;
	}
	.portfolioIMG1,.portfolioIMG2, .portfolioIMG3 {
		width: 360px;
		height: auto;
	}
	.footer {
		position: relative;
		top: 20px;
	}
	#homeFooter {
		top: 80px;
	}
	.copyRight {
		position: relative;
		top: -50px;
		float: left;
		padding-bottom: 30px;
	}
	#myBioPic {
		width: 150px;
		height: auto;
		padding-right: 20px;
	}
	#biography1, #biography2 {
		margin-left: 0;
	}
	#resumeButton {
		top: 30px;
		margin: 0 auto;
	}
	.shrinkContent {
		width: 100%;
	}
	.projectPics {
		width: 360px;
		height: auto;
	}
	.projectParagraphs{
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.projectParagraphs2 {
		margin-top: 50px;
	}
}