@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Expanded:200,300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

* {
  /*border: solid green 1px;*/
  font-family: 'Encode Sans Expanded', sans-serif;
  box-sizing: border-box;
}


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

body {
  background-color: #232020;
  margin: 0 auto;
  letter-spacing: 1.2px;
  line-height: 1.2;
}


/*////////////////////////HOME//////////////////////////*/

.logo  {
  margin: 20px;
  padding: 4px;
  color: white;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  background-color: #ff2f00;
  display: inline-block;
}

.logo:hover {
  background-color: white;
}

#logo {
  text-decoration: none;
  color: white;
}

#logo:hover {
  color: #ff2f00;
}

main {
  width: 100vw;
  position: relative;
}

.greeting {
  color: white;
  font-size: 57px;
  font-weight: 700;
  margin: 40px;
  max-width: 1200px;
}

.gridContainer {
  margin-top: 30px;
  margin-left: 150px;
  padding: 0;
  margin-bottom: 240px;
  display: inline-grid;
  grid-template-columns: repeat(2, 480px);
  grid-template-rows: repeat(3, 480px);
}

.square {
  width: 480px;
  height: 480px;
  padding: 0;
  margin-right: 0;
  background-color: black;
  cursor: pointer;
}

.colorHover {
   opacity: .5;

}


/*///////////////////////PROJECT LINK/////////////////////////*/

.projectLink {
  height: 100%;
  width: 70px;
  background-color: #ff2f00;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.projectLink:hover {
  width: 90px;
}

#contact {
  font-size: 40px;
  color: white;
  transform: rotate(-180deg);
  writing-mode: tb-rl;
  margin-left: 10px;
  font-weight: 400;
  height: 65vh;
  cursor: pointer;
}

#contact:hover {
  cursor: pointer;
}

.mobileContactInitial {
  color: #ff2f00;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: #ff2f00;
  /* background: #232020; */
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}


#overlaySubContainer {
  padding: 5%;
}

.material-icons {
  color: white;
  font-size: 80px;
  display: block;
  text-align: right;
  font-weight: 100;
}

#closeIconPosition {
  display: inline-block;
  position: fixed;
  right: 0;
}

.material-icons:hover {
  cursor: pointer;
}

.overlayInfo {
  text-align: center;
  font-size: 50px;
  color: white;
  font-weight: 300;
}

.contactLink {
  color: white;
  text-decoration: none;
  margin-bottom: -5px;
  font-weight: 600;
}

.contactLink:hover {
  border-bottom: 12px solid #2000ff;
  color: #2000ff;
}


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

footer {
  height: 80px;
  background-color: #2000ff;
  text-align: center;
  font-weight: 400;
  font-size: 40px;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}

.footerLink {
  display: inline-block;
  text-decoration: none;
  color: white;
  margin: 0 auto;
  padding-top: 15px;
  padding-left: 10px;
}

#gitty:hover {
  animation: bounce 1s infinite;
  -webkit-animation: bounce 1s infinite; /*webkit browsers*/
  -moz-animation: bounce 1s infinite; /*firefox*/
  -o-animation: bounce 1s infinite; /*opera*/
}


/*////////////////////////BOUNCE ANIMATION/////////////////////*/

@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-30px);
		-ms-transform:     translateY(-30px);
		transform:         translateY(-30px)
	}
	60% {
		-webkit-transform: translateY(-15px);
		-ms-transform:     translateY(-15px);
		transform:         translateY(-15px)
	}
}

/*////////////////////////PROJECT 1 OVERLAY/////////////////////*/

.projectOneContainer {
  display: none;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 auto;
  left: 25%;
  right: 21%;
  height: 60%;
  min-width: 40%;
  background-color: white;
  padding-right: 80px;
  padding-bottom: 80px;
  padding-left: 70px;
  position: fixed;
  top: 15%;
  }

  .projectOneContainer::-webkit-scrollbar {
    width: 1em;
  }

  .projectOneContainer::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  }

  .projectOneContainer::-webkit-scrollbar-thumb {
    background-color: #232020;
    outline: 3px solid #232020;
  }


#exitProjectOverlay1 {
  margin: 0;
  padding: 0;
  color: black;
  font-size: 70px;
}

#projectOverlayBackground1 {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
}


/*////////////////////////PROJECT 2 OVERLAY/////////////////////*/

#projectOverlayBackground2 {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
}

.projectTwoContainer {
  display: none;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 auto;
  left: 25%;
  right: 21%;
  height: 60%;
  min-width: 40%;
  background-color: white;
  padding-right: 80px;
  padding-bottom: 80px;
  padding-left: 70px;
  position: fixed;
  top: 15%;
}

.projectTwoContainer::-webkit-scrollbar {
  width: 1em;
}

.projectTwoContainer::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.projectTwoContainer::-webkit-scrollbar-thumb {
  background-color: #232020;
  outline: 3px solid #232020;
}

#exitProjectOverlay2 {
  margin: 0;
  padding: 0;
  color: black;
  font-size: 70px;
}

.projectNumber {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding-left: 25px;
  color: #ff2f00;
  margin-bottom: 0;
  vertical-align: bottom;
}

.projectTitle {
  display: block;
  font-size: 60px;
  font-weight: 700;
  vertical-align: top;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 22px;
}

.projectTagline {
  display: block;
  font-size: 60px;
  font-weight: 400;
  vertical-align: top;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 40px;
  padding-left: 22px;
}

.secondaryImage2 {
  display: block;
  width: 100%;
  height: auto;
  padding: 2px;
  margin-bottom: 50px;
}

.projectDescription {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 40px;
}

.seeProjectLink {
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  color: black;
  text-decoration: none;
  font-weight: 700;
  padding-left: 22px;
}

/*////////////////////////PROJECT 3 OVERLAY/////////////////////*/

#projectOverlayBackground3 {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
}

.projectThreeContainer {
  display: none;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 auto;
  left: 25%;
  right: 21%;
  height: 60%;
  min-width: 40%;
  background-color: white;
  padding-right: 80px;
  padding-bottom: 80px;
  padding-left: 70px;
  position: fixed;
  top: 15%;
}

.projectThreeContainer::-webkit-scrollbar {
  width: 1em;
}

.projectThreeContainer::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.projectThreeContainer::-webkit-scrollbar-thumb {
  background-color: #232020;
  outline: 3px solid #232020;
}

#exitProjectOverlay3 {
  margin: 0;
  padding: 0;
  color: black;
  font-size: 70px;
}

.secondaryImage3 {
  display: block;
  width: 100%;
  height: auto;
  padding: 2px;
  margin-bottom: 50px;
}

/*////////////////////////PROJECT 4 OVERLAY/////////////////////*/

#projectOverlayBackground4 {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
}

.projectFourContainer {
  display: none;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 auto;
  left: 25%;
  right: 21%;
  height: 60%;
  min-width: 40%;
  background-color: white;
  padding-right: 80px;
  padding-bottom: 80px;
  padding-left: 70px;
  position: fixed;
  top: 15%;
}

.projectFourContainer::-webkit-scrollbar {
  width: 1em;
}

.projectFourContainer::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.projectFourContainer::-webkit-scrollbar-thumb {
  background-color: #232020;
  outline: 3px solid #232020;
}

#exitProjectOverlay4 {
  margin: 0;
  padding: 0;
  color: black;
  font-size: 70px;
}

.secondaryImage4 {
  display: block;
  width: 100%;
  height: auto;
  padding: 2px;
  margin-bottom: 50px;
}

/*////////////////////////PROJECT 5 OVERLAY/////////////////////*/

#projectOverlayBackground5 {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
}

.projectFiveContainer {
  display: none;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 auto;
  left: 25%;
  right: 21%;
  height: 60%;
  min-width: 40%;
  background-color: white;
  padding-right: 80px;
  padding-bottom: 80px;
  padding-left: 70px;
  position: fixed;
  top: 15%;
}

.projectFiveContainer::-webkit-scrollbar {
  width: 1em;
}

.projectFiveContainer::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.projectFiveContainer::-webkit-scrollbar-thumb {
  background-color: #232020;
  outline: 3px solid #232020;
}

#exitProjectOverlay5 {
  margin: 0;
  padding: 0;
  color: black;
  font-size: 70px;
}

.secondaryImage5 {
  display: block;
  width: 100%;
  height: auto;
  padding: 2px;
  margin-bottom: 50px;
}

/*////////////////////////PROJECT 6 OVERLAY/////////////////////*/

#projectOverlayBackground6 {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
}

.projectSixContainer {
  display: none;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 auto;
  left: 25%;
  right: 21%;
  height: 60%;
  min-width: 40%;
  background-color: white;
  padding-right: 80px;
  padding-bottom: 80px;
  padding-left: 70px;
  position: fixed;
  top: 15%;
}

.projectSixContainer::-webkit-scrollbar {
  width: 1em;
}

.projectSixContainer::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.projectSixContainer::-webkit-scrollbar-thumb {
  background-color: #232020;
  outline: 3px solid #232020;
}

#exitProjectOverlay6 {
  margin: 0;
  padding: 0;
  color: black;
  font-size: 70px;
}

.secondaryImage6 {
  display: block;
  width: 100%;
  height: auto;
  padding: 2px;
  margin-bottom: 50px;
}

/*//////////MEDIA QUERIES FOR DIFFERENT VIEWPORTS///////////*/

/*Tablet mode*/
@media screen and (max-width : 1170px) {
  .contactLink { font-size: 55%; display: inline-block; }
  .fineprint { padding-top: 20px; }
  #contact { display: none; }
  #mobileContact { display: block; text-align: center; font-weight: 400; font-size: 40px; color: white; padding: 2%;  cursor: pointer; }
  #mobileProjectLink { height: 4em; background-color: red; text-align: center; font-weight: 400; font-size: 40px; position: fixed; bottom: 0; right: 0; left: 0; top: auto; z-index: 98; width: 100%; }
  footer { z-index: 99; }
  .gridContainer {  display: grid; grid-template-columns: repeat(2, 400px); grid-template-rows: repeat(2, 400px); margin-left: 12%; }
  .square { width: 400px; height: 400px; display: inline-block; }
  .projectOneContainer { left: 16%; max-width: 70%; }
  .projectTwoContainer { left: 16%; max-width: 70%; }
  .projectThreeContainer { left: 16%; max-width: 70%; }
  .projectFourContainer { left: 16%; max-width: 70%; }
  .projectFiveContainer { left: 16%; max-width: 70%; }
  .projectSixContainer { left: 16%; max-width: 70%; }
}


@media screen and (max-width : 950px) {
  .gridContainer {  display: grid; grid-template-columns: repeat(2, 400px); grid-template-rows: repeat(3, 400px); margin-left: 5%; }
  .square { width: 400px; height: 400px; display: inline-block; }
  .projectOneContainer { left: 16%; max-width: 70%; }
  .projectTwoContainer { left: 16%; max-width: 70%; }
  .projectThreeContainer { left: 16%; max-width: 70%; }
  .projectFourContainer { left: 16%; max-width: 70%; }
  .projectFiveContainer { left: 16%; max-width: 70%; }
  .projectSixContainer { left: 16%; max-width: 70%; }
}

/*Mobiles smaller tablet*/
@media screen and (max-width : 800px) {
  .gridContainer {  display: grid; grid-template-columns: repeat(1, 400px); grid-template-rows: repeat(1, 400px); margin-left: 18%; }
  .square { width: 400px; height: 400px; display: inline-block; }
  .projectOneContainer { left: 16%; max-width: 70%; padding-left: 3px; padding-right: 2px; }
  .projectTwoContainer { left: 16%; max-width: 70%; padding-left: 3px; padding-right: 2px; }
  .projectThreeContainer { left: 16%; max-width: 70%; padding-left: 3px; padding-right: 2px; }
  .projectFourContainer { left: 16%; max-width: 70%; padding-left: 3px; padding-right: 2px; }
  .projectFiveContainer { left: 16%; max-width: 70%; padding-left: 3px; padding-right: 2px; }
  .projectSixContainer { left: 16%; max-width: 70%; padding-left: 3px; padding-right: 2px; }
  .projectTitle { font-size: 55px; }
  .projectTagline { font-size: 50px; }
  .projectDescription { padding-left: 10px; }
}

/*Mobiles landscape mobile*/
@media screen and (max-width : 500px) {
  /* #mobileProjectLink { display: block; background-color: red; width: 100%; height: 5em; bottom: 0; top: 83%;} */
  .gridContainer {  display: grid; grid-template-columns: repeat(2, 440px); grid-template-rows: repeat(3, 440px); margin-left: 5%; }
  .square { width: 440px; height: 440px; display: inline-block; }
  .projectOneContainer { max-width: 90%; padding-right: 0; }
  .projectTwoContainer { max-width: 90%; padding-right: 0; }
  .projectThreeContainer { max-width: 90%; padding-right: 0; }
  .projectFourContainer { max-width: 90%; padding-right: 0; }
  .projectFiveContainer { max-width: 90%; padding-right: 0; }
  .projectSixContainer { max-width: 90%; padding-right: 0; }
  .projectNumber { font-size: 10px; }
  .projectTitle { font-size: 35px; }
  .projectTagline { font-size: 30px; }
}

/*Mobiles portrait mode*/
@media screen and (max-width : 480px) {
  .contactLink { font-size: 55%; display: inline-block; }
  .fineprint { padding-top: 20px; }
  .gridContainer {  display: grid; grid-template-columns: repeat(1, 350px); grid-template-rows: repeat(6, 350px); margin-left: 25px;}
  .square { width: 350px; height: 350px; display: block; }
  .projectOneContainer { max-width: 90%;   padding-right: 0; }
  .projectTwoContainer { max-width: 90%; padding-right: 0; }
  .secondaryImage2 { width: 98%; height: auto; }
  .projectThreeContainer { max-width: 90%; padding-right: 0; }
  .secondaryImage3 { width: 98%; height: auto; }
  .projectFourContainer { max-width: 90%; padding-right: 0; }
  .secondaryImage4 { width: 98%; height: auto; }
  .projectFiveContainer { max-width: 90%; padding-right: 0; }
  .secondaryImage5 { width: 98%; height: auto; }
  .projectSixContainer { max-width: 90%; padding-right: 0; }
  .secondaryImage6 { width: 98%; height: auto; }
  .material-icons { right: 0em; }
}