hr.projectsDivider {
  margin-bottom: 12px;
}

/* MARK: Main project components */

div.projectsContainer {
  width: 100%;
  margin-bottom: 60px;
}

div.projectsContainer div.project {
  margin-bottom: 100px;
}

div.project {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: 100%;
}

div.leftProjectImage {
  flex-wrap: wrap-reverse;
}

div.rightProjectImage {
  flex-wrap: wrap;
}

div.leftProjectImage div.projectPreview {
  margin-left: 50px;
}

div.rightProjectImage div.projectPreview {
  margin-right: 50px;
}

img.projectImage {
  flex: 0 1 auto;

  height: 600px;
	width: auto;
}

div.projectPreview {
  flex: 1 2 0;

  display: flex;
  flex-flow: column nowrap;
}

div.projectPreview > :not(:first-child) {
  margin: 0;
  padding: 0;
  margin-top: 18px;
}

/* MARK: Project header */

div.projectHeader {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

div.projectHeaderText {
  display: flex;
  flex-flow: column nowrap;

  margin-left: 20px;
}

img.projectIcon {
	height: 140px;
	width: auto;
}

h3.projectName {
  font-family: "Montserrat", sans-serif;
	font-weight: 200;

	letter-spacing: 3px;
	font-size: 40pt;

	margin: 0;
}

h3.longName {
  font-size: 30pt;
}

h4.projectSubtitle {
	font-family: "Montserrat", sans-serif;
	font-weight: 300;

	letter-spacing: 1px;
	font-size: 18pt;

	margin: 0;
  margin-top: 8px;

	color: var(--secondaryLabelColor);
}

/* MARK: Project body */

h5.projectPromotion {
	font-family: "Montserrat", sans-serif;
	font-weight: 300;

	letter-spacing: 1px;
	font-size: 15pt;
}

p.projectText {
  font-family: "Montserrat", sans-serif;
	font-weight: 300;

	line-height: 1.4;
	letter-spacing: 1px;
	font-size: 12pt;

  color: var(--labelColor);
}

/* MARK: Colors */

.ignusColor {
  color: rgb(234, 51, 56);
}

.chemwhizColor {
  color: rgb(26, 198, 178);
}

.communityBalanceColor {
  color: rgb(255, 128, 0);
}

.rpsColor {
  color: rgb(78, 221, 243);
}

.sixtySixColor {
  color: rgb(229, 109, 92);
}

.wwdcColor {
  color: rgb(182, 115, 66);
}

/* MARK: Project links */

div.projectLinks {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}

div.projectLinks img {
  height: 40px;
  width: auto;
}

div.projectLinks a:not(:first-child) {
  margin-left: 20px;
}

/* MARK: Resizing the window */

/* Make some components smaller below certain levels */
@media only screen and (max-width: 920px) {
  img.projectImage {
    height: 500px;
  }

  div.leftProjectImage div.projectPreview {
    margin-left: 20px;
  }

  div.rightProjectImage div.projectPreview {
    margin-right: 20px;
  }

  img.projectIcon {
  	height: 120px;
  }

  h3.projectName {
  	font-size: 28pt;
  }

  h3.longName {
  	font-size: 20pt;
  }

  h4.projectSubtitle {
  	font-size: 14pt;
  }
}

@media only screen and (max-width: 700px) {
  img.projectIcon {
  	height: 90px;
  }

  h4.projectSubtitle {
  	font-size: 13pt;
  }

  h5.projectPromotion {
  	font-size: 13pt;
  }

  h3.projectName {
    font-size: 20pt;
  }

  h3.longName {
    font-size: 16pt;
  }

  p.projectText {
  	font-size: 11pt;
  }
}

/* Attributes for compact width (mobile site) */
@media only screen and (max-width: 650px) {
  img.projectImage {
    flex-basis: 100%;
    width: 100%;
    max-width: 200px;
    height: auto;
  }

  div.leftProjectImage div.projectPreview {
    margin-left: 5px;
  }

  div.rightProjectImage div.projectPreview {
    margin-right: 5px;
  }

  div.projectPreview {
    flex-basis: 100%;
    margin-bottom: 20px;
  }
}