body {
 margin: 0;
 font-family: 'Chivo', sans-serif;
 font-size: calc(.9rem + .2vw);
 font-weight: 300;
 line-height: 1.4;
 color:#201C1C;
}

* {
 box-sizing: border-box;
}

.m {
 display: none;
}

.nowrap {
  white-space: nowrap;
}

/*=== General Typography ===*/
h1 {
  color: #201C1C;
  font-family: 'Playfair', serif;
  font-size: calc(1.5rem + 1.5vw);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0;
}


/*=== Logo ===*/
#logo {
 width: 30px;
 height: 30px;
}

#logo a {
 display: block;
 width: 100%;
 height: 100%;
}

#logo img {
 width: 30px;
 height: 30px;
}
/*=== Logo Ends===*/


/*=== Global Nav  ===*/
#global-nav {
 display: flex;
 padding: 40px 60px;
 position: fixed;
 width: 100%;
 height: 140px;
 top: 0;
 z-index: 1;
}

#global-nav a {
 text-decoration: none;
 font-weight: 500;
}
#links a:hover{
  color: #201C1C;
}
#links a:first-child,
#links a:nth-child(2) {
  margin-right: 40px;
}
#links a:last-child{
  margin-right: 0px;
}
#links a {
  display: flex;
  height: 40px;
  transition: all .3s;
  transition-delay: .3s;
}

#links {
  display: flex;
  justify-content: flex-end;
  flex: 1;
  align-items: center;
  position: relative;
}

.topNav-link, .special, .default{
    position: relative;
    color: #201C1C;
    font-family: 'Chivo', sans-serif;
    font-size: 11px;
    font-weight:300;
    text-decoration: none;
    letter-spacing: .2em;
    text-transform: uppercase;
}
/*=== Global Nav Ends  ===*/


/*=== Social Media  ===*/
.social-media a{
  padding-top:20px;
}
.arrow-link a{
  padding-top:20px;
}
.arrow-link a img{
  width:50px;
  height:50px;
}
/*=== Social Media Ends  ===*/


/*=== Intro Begins ===*/
.content {
  margin-top: 0;
  display: flex;
  padding: 0;
  align-items: center;
  position: relative;
}

#about, #contact-me{
  color:#201C1C;
  font-weight:bold;
  animation: myanimation 15s infinite;
}

@keyframes myanimation {
  0% {background-color: #FFE9FF;}
  25%{background-color:#CBFEEA;}
  50%{background-color:#FDF4E1;}
  75%{background-color:#D8EBF9;}
  100% {background-color: #FFE9FF;}
 }
#about h1 {
  font-family: 'Playfair', serif;
  font-size:calc(2.2rem + 4vw);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0 -4px;
  letter-spacing: -.1rem;
  position: relative;
}
#about h2 {
  font-family: 'Playfair', serif;
  font-size:calc(2.2rem + 1vw);
  font-weight:500;
  line-height: 1;
  margin: 0 0 .5em -4px;
  letter-spacing: -0.1rem;
  position: relative;
}

.big-intro{
  margin-top: 5%;
  padding-right: 0%;
}

.big-intro h1 {
  margin: 0 auto;
  max-width: 100%;
  display: block;
  align-items: left;
  text-align: left;
}
.big-intro h2 {
  margin: 0 auto;
  max-width: 70%;
  display: block;
  align-items: left;
  text-align: left;
}

.header-intro-column {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}

.intro-column-left{
  max-width: 30%;
  padding-right: 3%;
}

.intro-column-middle{
  max-width: 30%;
  padding-right: 3%;
}

.intro-column-right{
  max-width:30%;
  padding-right: 3%;
}

.header-intro-column p {
  align-items: left;
  text-align: left;
  font-size: 14px;
  line-height: 2;
  font-family: "Chivo";
  font-weight: 300;
  color: #201C1C;
  opacity: .75;
}

/*=== Project CSS ===*/
.project-title p{
  display:inline-block;
}

.project-short-description{
  display:block;
}
.project-short-description > p{
  font-size: calc(.8rem + .2vw);
  display: block;
  margin-top: 2.5vh;
}

.dash {
 width: 20%;
 padding-left: 0;
 padding-right: 24px;
 display: block;
 height: 5px;
 background-color: #201C1C;
 margin-top: .9em;
}

.project-title h1 span{
  display: block;
}

.big-title h1{
  line-height: 1;
  text-align: left;
}

#project1, #project2, #project3, #project4, #project5, #project6,#project7,#project8,#project9, #project10, #project11 {
  overflow: hidden;
}
#project4{
  background: -webkit-linear-gradient(right, #F9F9F9 50%, white 50%);
  background: -moz-linear-gradient(right, #F9F9F9 50%, white 50%);
  background: linear-gradient(right, #F9F9F9 50%, white 50%);
}
#project3{
  background: -webkit-linear-gradient(left, #FFE0C2 50%, white 50%);
  background: -moz-linear-gradient(left, #FFE0C2 50%, white 50%);
  background: linear-gradient(left, #FFE0C2 50%, white 50%);
}

#project5{
  background: -webkit-linear-gradient(left, #FEFFC9 50%, white 50%);
  background: -moz-linear-gradient(left, #FEFFC9 50%, white 50%);
  background: linear-gradient(left, #FEFFC9 50%, white 50%);
}

#project6{
  background: -webkit-linear-gradient(right, #FF9871 50%, white 50%);
  background: -moz-linear-gradient(right, #FF9871 50%, white 50%);
  background: linear-gradient(right, #FF9871 50%, white 50%);
}

#project7{
  background: -webkit-linear-gradient(left, #F9F9F9 50%, white 50%);
  background: -moz-linear-gradient(left, #F9F9F9 50%, white 50%);
  background: linear-gradient(left, #F9F9F9 50%, white 50%);
}
#project8{
  background: -webkit-linear-gradient(right, #CBFEEA 50%, white 50%);
  background: -moz-linear-gradient(right, #CBFEEA 50%, white 50%);
  background: linear-gradient(right, #CBFEEA 50%, white 50%);
}

#project11{
  background: -webkit-linear-gradient(left, #FFE9FF 50%, white 50%);
  background: -moz-linear-gradient(left, #FFE9FF 50%, white 50%);
  background: linear-gradient(left, #FFE9FF 50%, white 50%);
}
#project2{
  background: -webkit-linear-gradient(right, #D9F6FC 50%, white 50%);
  background: -moz-linear-gradient(right, #D9F6FC 50%, white 50%);
  background: linear-gradient(right, #D9F6FC 50%, white 50%);
}
#project10{
  background: -webkit-linear-gradient(right, #E7DCF3 50%, white 50%);
  background: -moz-linear-gradient(right, #E7DCF3 50%, white 50%);
  background: linear-gradient(right, #E7DCF3 50%, white 50%);
}
#project9{
  background: -webkit-linear-gradient(left, #F9F9F9 50%, white 50%);
  background: -moz-linear-gradient(left, #F9F9F9 50%, white 50%);
  background: linear-gradient(left, #F9F9F9 50%, white 50%);
}

#project1{
  background: -webkit-linear-gradient(left, #CBFEEA 50%, white 50%);
  background: -moz-linear-gradient(left, #CBFEEA 50%, white 50%);
  background: linear-gradient(left, #CBFEEA 50%, white 50%);
}
#project2 .project-title, #project4 .project-title, #project6 .project-title, #project8 .project-title, #project10 .project-title {
  flex: 1 40%;
  /*=== hdie this order:1;  ===*/
  padding-right:10%;
  padding-left: 0%;
}

#project1 .project-title, #project3 .project-title, #project5 .project-title, #project7 .project-title, #project9 .project-title,#project11 .project-title{
  flex: 1 40%;
  order:2;
  padding-right:10%;
  padding-left: 0%;
}
.project-container{
  padding-left:8%;
  margin-top: 0;
  display: flex;
}

.project-title{
  z-index: 1;
  flex: 1 30%;
  align-self: center;
  line-height: 1.7;
}
.project-img img{
  overflow: hidden;
  display:block;
  margin:auto;
  width:100%;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
#project2 .project-img, #project4 .project-img, #project6 .project-img, #project8 .project-img,#project10 .project-img{
  padding-right:0%;
  padding-left: 0%;
  overflow: hidden;
  transform-style: preserve-3d;
  flex: 1 60%;
  height:100%;
  width:100%;
  margin-right:8%;
  margin-left: 0%;
  box-shadow: 0px 0px rgba(0,0,0,.4);
}
#project1 .project-img, #project3 .project-img, #project5 .project-img,
#project7 .project-img, #project9 .project-img,#project11 .project-img{
  overflow: hidden;
  transform-style: preserve-3d;
  flex: 1 60%;
  height:100%;
  width:100%;
  margin-right:8%;
  margin-left: 5%;
  box-shadow: 0px 0px rgba(0,0,0,.4);
}
#project2 .project-img img:hover,
#project1 .project-img img:hover,
#project3 .project-img img:hover,
#project4 .project-img img:hover,
#project5 .project-img img:hover,
#project6 .project-img img:hover,
#project8 .project-img img:hover,
#project9 .project-img img:hover,
#project10 .project-img img:hover,
#project11 .project-img img:hover,
#project7 .project-img img:hover{
  cursor: pointer;
  transform:scale(1.1);
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  -ms-transform:scale(1.1);
  -o-transform:scale(1.1)
}
/*=== Project Ends==*/


/*=== Contact CSS ===*/
.footer-contact {
  margin-top: 5%;
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.contact-column-first h2 {
  padding-bottom:60px;
  font-family: 'Playfair', serif;
  font-size:calc(1.5rem + 1vw);
  font-weight:500;
  line-height: 1;
  margin: 0 0 .5em -4px;
  letter-spacing: .01rem;
  position: relative;
  text-align:left;
}

.footer-contact h3 {
  font-family: 'Playfair', serif;
  font-size:calc(.8rem + 1vw);
  font-weight:500;
  line-height: 1;
  letter-spacing: .01rem;
  position: relative;
  text-align:left;
}

.contact-column-first{
  width: 30%;
  padding-right: 3%;
}

.contact-column-left{
  width: 30%;
  padding-right: 3%;
}

.contact-column-middle{
  width: 30%;
  padding-right: 3%;
  align-content: left;
}

.contact-column-right{
  width:30%;
  padding-right: 3%;
}

.unordered-list{
  list-style: none;
  text-align: left;
  padding-left:0;
  margin-bottom:0;
}

.footer-contact a{
  text-decoration: none;
  font-size: 16px;
  font-family: "Chivo";
  line-height: 2;
  font-weight: 300;
  color: #201C1C;
  padding-right: 20px;
  text-align:left;
}
.project-short-description a{
  text-decoration: none;
  font-size: calc(.8rem + .2vw);
  font-family: "Chivo";
  line-height: 2;
  font-weight: 300;
  color: #201C1C;
  padding-right: 20px;
  text-align:left;
}

.footer-contact a:hover, .project-short-description a:hover{
  padding-left: 10px;
  transition: .1s cubic-bezier(.8, 0, 0.2, 1);
}


/*=== Delay Values  ===*/
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.slowAnimate {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.one {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

.two {
 -webkit-animation-delay: .5s;
 -moz-animation-delay:  .5s;
 animation-delay:  .5s;
}

.three {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

.four {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 3s;
  animation-delay: 3s;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
/*=== FADE IN Ends ===*/

/*=== Scrolling UI ===*/
.fp-viewing-contact #links a,
.fp-viewing-nycedc #links a,
.fp-viewing-ility #links a,
.fp-viewing-mcm #links a,
.fp-viewing-home #links a.default,
.fp-viewing-walmart #links a,
.fp-viewing-nitejogger #links a,
.fp-viewing-invesco #links a,
.fp-viewing-heatrapp #links a,
.fp-viewing-containercost #links a,
.fp-viewing-square #links a,
.fp-viewing-falcon #links a,
.fp-viewing-hautevictoire #links a,
.fp-viewing-ccmoverview #links a,
.fp-viewing-nitejogger #links a{
  color: #201C1C;
  opacity:1
}

.fp-viewing-nycedc #links a.default,
.fp-viewing-ility #links a.default,
.fp-viewing-mcm #links a.default,
.fp-viewing-nitejogger #links a.default,
.fp-viewing-ccmoverview #links a.default,
.fp-viewing-containercost #links a.default,
.fp-viewing-invesco #links a.default,
.fp-viewing-heatrapp #links a.default,
.fp-viewing-square #links a.default,
.fp-viewing-falcon #links a.default,
.fp-viewing-walmart #links a.default,
.fp-viewing-nitejogger #links a.default,
.fp-viewing-hautevictoire #links a.default,
.fp-viewing-nycedc #links a.special,
.fp-viewing-ility #links a.special,
.fp-viewing-mcm #links a.special,
.fp-viewing-nitejogger #links a.special,
.fp-viewing-invesco #links a.special,
.fp-viewing-heatrapp #links a.special,
.fp-viewing-square #links a.special,
.fp-viewing-falcon #links a.special,
.fp-viewing-walmart #links a.special,
.fp-viewing-hautevictoire #links a.special,
.fp-viewing-containercost #links a.special,
.fp-viewing-nitejogger #links a.special,
.fp-viewing-ccmoverview #links a.special{
 color: #201C1C;
 opacity: .5
}

.fp-viewing-home #links a:nth-of-type(2),
.fp-viewing-home #links a:nth-of-type(3){
  color: #201C1C;
  opacity:.5
}

.fp-viewing-contact #links a:nth-of-type(2),
.fp-viewing-contact #links a.default{
  color: #201C1C;
  opacity:.5
}

#fp-nav.right {
 right: 48px;
}

#fp-nav {
 opacity: 0;
 transition: all .5s;
}
.fp-viewing-nycedc #fp-nav,
.fp-viewing-ility #fp-nav,
.fp-viewing-mcm #fp-nav,
.fp-viewing-nitejogger #fp-nav,
.fp-viewing-invesco #fp-nav,
.fp-viewing-heatrapp #fp-nav,
.fp-viewing-square #fp-nav,
.fp-viewing-falcon #fp-nav,
.fp-viewing-walmart #fp-nav,
.fp-viewing-nitejogger #fp-nav,
.fp-viewing-hautevictoire #fp-nav,
.fp-viewing-containercost #fp-nav,
.fp-viewing-ccmoverview #fp-nav{
  opacity: 1;
}

#fp-nav ul li:first-child {
 display: none;
}

#fp-nav ul li:last-child {
 display: none;
}

#fp-nav ul {
 position: relative;
}

.fp-viewing-ccmoverview #fp-nav ul:after {
  top: 0px;
}
.fp-viewing-walmart #fp-nav ul:after {
  top: 24px;
}

.fp-viewing-containercost #fp-nav ul:after {
  top: 48px;
}
.fp-viewing-square #fp-nav ul:after {
 top: 72px;
}
.fp-viewing-nycedc #fp-nav ul:after {
 top: 86px;
}

.fp-viewing-ility #fp-nav ul:after {
 top: 110;
}
.fp-viewing-nitejogger #fp-nav ul:after {
 top: 134px;
}

.fp-viewing-mcm #fp-nav ul:after {
 top: 158px;
}
.fp-viewing-heaterapp #fp-nav ul:after {
 top: 182px;
}
.fp-viewing-hautevictoire #fp-nav ul:after {
 top: 206px;
}
.fp-viewing-falcon #fp-nav ul:after {
  top: 230px;
}

#fp-nav ul li, .fp-slidesNav ul li {
 width: 6px;
 height: 6px;
 margin: 30px 0;
 border-radius: 50%;
 background-color: #201C1C;
}

#fp-nav ul li a, .fp-slidesNav ul li a {
 border: solid 1px (0,0,0,0);
 transition: all .3s;
}

#fp-nav ul li a span{
 background-color: #201C1C;
 opacity: 0.5;
 display: block;
 height: 6px;
 width: 6px;
 margin: 0;
 border-radius: 50%;
 transition: all .3s;
 transform: translate3d(-50%,-50%,0);
}

#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
 border-radius: 50%;
 height: 10px;
 width: 10px;
 margin: 0;
 background-color: #201C1C;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
 background-color: #201C1C;
 opacity:1;
 display: block;
 height: 6px;
 width: 6px;
 margin: 0;
 border-radius: 50%;
 transition: all .3s;
 transform: translate3d(-50%,-50%,0);

}
/*=== Scrolling UI Ends===*/


/*=== VIEWPORTS===*/

@media (max-width: 1024px){
  /*=== Project CSS===*/
  #project4{
    background: -webkit-linear-gradient(bottom, #F9F9F9 50%, white 50%);
    background: -moz-linear-gradient(bottom, #F9F9F9 50%, white 50%);
    background: linear-gradient(bottom, #F9F9F9 50%, white 50%);
  }
  #project1{
    background: -webkit-linear-gradient(bottom, #CBFEEA 50%, white 50%);
    background: -moz-linear-gradient(bottom, #CBFEEA 50%, white 50%);
    background: linear-gradient(bottom, #CBFEEA 50%, white 50%);
  }
  #project5{
    background: -webkit-linear-gradient(bottom, #FEFFC9 50%, white 50%);
    background: -moz-linear-gradient(bottom, #FEFFC9 50%, white 50%);
    background: linear-gradient(bottom, #FEFFC9 50%, white 50%);
  }

  #project6{
    background: -webkit-linear-gradient(bottom, #FF9871 50%, white 50%);
    background: -moz-linear-gradient(bottom,#FF9871 50%, white 50%);
    background: linear-gradient(bottom, #FF9871 50%, white 50%);
  }
  #project7{
    background: -webkit-linear-gradient(bottom, #F9F9F9 50%, white 50%);
    background: -moz-linear-gradient(bottom, #F9F9F9 50%, white 50%);
    background: linear-gradient(bottom, #F9F9F9 50%, white 50%);
  }

  #project11{
    background: -webkit-linear-gradient(bottom, #FFE9FF 50%, white 50%);
    background: -moz-linear-gradient(bottom, #FFE9FF 50%, white 50%);
    background: linear-gradient(bottom, #FFE9FF 50%, white 50%);
  }
  #project2{
    background: -webkit-linear-gradient(bottom, #D9F6FC 50%, white 50%);
    background: -moz-linear-gradient(bottom, #D9F6FC 50%, white 50%);
    background: linear-gradient(bottom, #D9F6FC 50%, white 50%);
  }
  #project3{
    background: -webkit-linear-gradient(bottom, #FFE0C2 50%, white 50%);
    background: -moz-linear-gradient(bottom, #FFE0C2 50%, white 50%);
    background: linear-gradient(bottom, #FFE0C2 50%, white 50%);
  }
  #project10{
    background: -webkit-linear-gradient(bottom, #E7DCF3 50%, white 50%);
    background: -moz-linear-gradient(bottom,#E7DCF3 50%, white 50%%);
    background: linear-gradient(bottom, #E7DCF3 50%, white 50%);
  }

  #project9{
    background: -webkit-linear-gradient(bottom, #F9F9F9 50%, white 50%);
    background: -moz-linear-gradient(bottom, #F9F9F9 50%, white 50%);
    background: linear-gradient(bottom, #F9F9F9 50%, white 50%);
  }

  #project8{
    background: -webkit-linear-gradient(bottom, #CBFEEA 50%, white 50%);
    background: -moz-linear-gradient(bottom, #CBFEEA 50%, white 50%);
    background: linear-gradient(bottom, #CBFEEA 50%, white 50%);
  }
  #project1 .project-img,
  #project2 .project-img,
  #project3 .project-img,
  #project4 .project-img,
  #project5 .project-img,
  #project6 .project-img,
  #project8 .project-img,
  #project9 .project-img,
  #project7 .project-img,
  #project11 .project-img,
  #project10 .project-img{
    margin-right:0%;
    margin-left: 0%;
    margin-top:60px;
    height:50vh;
    margin-left: 0%;
  }

  .project-container {
    flex-direction: column;
    padding: 0 60px;
  }
  .big-intro{
    padding-left:0;
    padding-right:0;
  }
  .footer-contact{
    padding-left:0;
    padding-right:0;
    padding-top:60px;
    display: block;
  }
  .contact-column-left{
    padding-left:0;
    margin-left:0;
    margin-right:0;
    width: 80%;
  }

  .contact-column-middle, .contact-column-right{
    padding-top:40px;
    padding-left:0;
    margin-left:0;
    margin-right:0;
    width: 80%;
  }

  .project-title h1 span{
    display:inline-block;
  }
  .project-short-description{
  margin-bottom: 0;
  }

  #project1 .project-title, #project3 .project-title, #project5 .project-title, #project7 .project-title, #project9 .project-title,#project11 .project-title {
    margin-top:30px;
    flex: 1 35%;
    order: 2;
    padding-right: 0%;
    padding-left: 0%;
  }

  #project2 .project-title, #project4 .project-title, #project6 .project-title, #project8 .project-title, #project10 .project-title {
    margin-top: 50px;
    padding-right: 0%;
    padding-left: 0%;
  }

  .project-title{
    align-self: auto;
  }
  .dash{
    width: 5%;
    height: 5px;
  }

  /*=== Fullpage CSS===*/

  #fp-nav.right {
   right: 24px;
  }

}

@media (max-width: 768px){

  .big-intro h2{
    max-width: 100%;
  }
  .contact-column-first h2{
    padding-bottom:0;
    visibility: hidden;
  }
  h1, .intro-h1{
    color: #201C1C;
    font-family: 'Playfair', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0;
    letter-spacing: -0.2rem;
  }
  #project1 .project-title, #project3 .project-title, #project5 .project-title, #project7 .project-title, #project9 .project-title, #projec11 .project-title{
    margin-top:30px;
    flex: 1 35%;
    order: 2;
    padding-right: 0%;
    padding-left: 0%;
  }
   .project-short-description p{
     font-size: 18px;
   }
  #project1 .project-title,
  #project2 .project-title,
  #project3 .project-title,
  #project4 .project-title,
  #project5 .project-title,
  #project6 .project-title,
  #project7 .project-title,
  #project9 .project-title,
  #project8 .project-title,
    #project11 .project-title,
  #project10 .project-title{
    margin-top:100px;

  }
  #project1 .project-img,
  #project2 .project-img,
  #project3 .project-img,
  #project4 .project-img,
  #project5 .project-img,
  #project6 .project-img,
  #project7 .project-img,
  #project9 .project-img,
  #project10 .project-img,
    #project11 .project-img,
  #project8 .project-img{
    margin-right:0%;
    margin-left: 0%;
    margin-top:100px;
    height:100%;
    margin-left: 0%;
  }

  .header-intro-column{
    display: block;
  }
  .intro-column-middle{
    max-width: 80%;
  }
  .intro-column-right, .intro-column-left{
    padding-left:0;
    margin-left:0;
    margin-right:0;
    max-width: 80%;
  }
  .footer-contact{
    padding-top:0px;
    display: block;
  }
  .contact-column-middle, .contact-column-right{
    padding-top:20px;
    padding-left:0;
    margin-left:0;
    margin-right:0;
    width: 80%;
  }
  .contact-column-left{
    padding-left:0;
    margin-left:0;
    margin-right:0;
    width: 80%;
  }

  #global-nav {
   padding: 45px 60px;
  }

  #links a {
   font-size: 12px;
   height: 32px;
  }

  #fp-nav.right {
   right: 16px;
  }

  #fp-nav ul li:hover a span,
  .fp-slidesNav ul li:hover a span {
   background-color: #30E8AC;
  }

  .content {
   flex-direction: column;
   text-align:left;
  }

  #about h1 span {
   display: inline;
  }

}

@media (max-width: 667px){
  .content{
    flex-direction: column;
    padding: 40px 25px;
  }

  #project1 .project-img,
  #project2 .project-img,
  #project3 .project-img,
  #project4 .project-img,
  #project5 .project-img,
  #project6 .project-img,
  #project7 .project-img,
  #project9 .project-img,
  #project10 .project-img,
    #project11 .project-img,
  #project8 .project-img{
    margin-right:0%;
    margin-left: 0%;
    margin-top:40px;
    height:50vh;
  }

  #project1 .project-title,
  #project2 .project-title,
  #project3 .project-title,
  #project4 .project-title,
  #project5 .project-title,
  #project6 .project-title,
  #project7 .project-title,
  #project9 .project-title,
  #project10 .project-title,
   #project11 .project-title,
  #project8 .project-title{
   margin-top:20px;
  }

  .project-img img {
    height: 100%;
    object-fit: cover;
    object-position:center;
  }
 .project-container{
   padding: 0 25px;
 }

 #global-nav {
  padding: 25px 25px 0 25px;
  height:30px;
 }
 #links{
  height:15px;
}
 #logo img {
  width: 25px;
  height: 25px;
 }

 #links a {
  letter-spacing: .1em;
  font-size: 10px;
  height: 0px;
 }

 #links a:first-child, #links a:nth-child(2){
   margin-right: 25px;
 }

 #fp-nav.right {
  right: 8px;
 }

 #fp-nav ul li:hover a span,
 .fp-slidesNav ul li:hover a span {
  background-color: #30E8AC;
 }

 #about h1{
  font-size: 40px;
  letter-spacing: 0;
 }

 .header-intro-column{
   display: block;
 }

 .intro-column-middle, .intro-column-right, .intro-column-left{
   padding-left:0;
   padding-right:0;
   margin-left:0;
   margin-right:0;
   max-width: 100%;
 }

 h1, .intro-h1{
   color: #201C1C;
   font-family: 'Playfair', serif;
   font-size: 30px;
   font-weight: 700;
   line-height: 1.2;
   margin: 0 0;
   letter-spacing: 0rem;
 }

 .project-short-description p{
    font-size: 14px;
 }
 .project-short-description a{
   font-size: 14px;
 }
}

@media (max-width: 441px){
  #about h1{
   font-size: 32px;
 }
 #about h2{
   padding-bottom:20px;
   font-size: 24px;
  }
.big-intro{
  padding-top:40px;
}
@media (max-width: 320px){
 #about h1{
   font-size: 28px;
   letter-spacing: .05em;
  }

  .header-intro-column p{
    line-height:1.5;
    font-size: 14px;
  }
  #about h2{
    padding-bottom:00px;
    font-size: 22px;
   }

  #project1 .project-img,
  #project2 .project-img,
  #project3 .project-img,
  #project4 .project-img,
  #project5 .project-img,
  #project6 .project-img,
  #project7 .project-img,
  #project9 .project-img,
  #project10 .project-img,
    #project11 .project-img,
  #project8 .project-img{
   height: 45vh;
  }
}