/*body{
  max-width: 100vw;
  overflow-x: hidden;
}*/

#main{
  width: 60%;
  margin: 0 auto;

}

img.portfolio-preview{
  width: 100%;
  height: auto;
}

ul, li{
  font-family: "lato";
  text-transform: uppercase;
  font-weight: 200;
  font-size: 11px;
  color: #404040 ;
}

#name{
  font-family: "tablet-gothic";
  font-weight: 900;
  color: #404040;

}

img{
  width: 100%;
}

.heading{
  font-family: "tablet-gothic";
  font-weight: 900;
  font-size: 40px;
  color: #ff3232;
  padding-top: 30px;
}


#name:hover{
  color: #d8d8d8;
}

.nav{
  padding-top: 0px;
  margin-top: -10px;
  margin-bottom: 30px;
  font-family: "tablet-gothic";
  color: #bfbfbf;
  letter-spacing: 3px;
  font-weight: 300;

}

#images{
  border: 1px solid gray;
  position: fixed;
  z-index: -1000;
}

a:link, a:visited{
  text-decoration: none;
  list-style-type: none;
  color: inherit;

}

a:hover{
  color: #404040;
}

#intro-text{
  margin-top: 40px;
  /*font-family: "source-code-pro";*/
  font-family: "tablet-gothic";
  text-transform: uppercase;
  font-weight: 900;
  font-size: 15px;
  color: /*#404040*/ #ff3232;
  display: block;
}

#project-intro{
  margin-top: 0px;
  font-family: "lato";
  font-weight: 100;
  color: #404040;
  font-size: 12px;
}

#project-text{
  margin-top: 0px;
  font-family: "lato";
  font-weight: 100;
  color: #404040;
  font-size: 14px;
}


#report-link{
  margin-top: 10px;
  padding-top: 0px;
  /*font-family: "source-code-pro";*/
  font-family: "lato";
  text-transform: uppercase;
  font-weight: 900;
  font-size: 20px;
  color: #404040 ;
}

#report-link:hover{
  color: #ff3232;

}

.txt-highlight{
  color: #ff3232;
}

/* MINIMUM SCREEN SIZE */

    @media handheld, screen and (min-width: 0px) and (max-width: 600px) {



      /*body{
        margin-top: 30px;
        margin-left: 0px;
        padding-left: 0px;
      }*/

      #name{
        font-size: 25px;
        padding-top: 0px;
        padding-left: 0px;


      }

      #main{
        /*padding-top: 0px;
        padding-left: 0px;
        margin-left: 0px;*/
        width: 90%;
      }

      .nav{
        font-size: 11px;
        letter-spacing: 2px;
      }

      .body-text{
        font-size: 18px;
        padding-right: 80px;
        margin-bottom: 30px;
        padding-bottom: 0px;

      }

      #images{
        height: 70vh;
        width: 450px;
        padding-right: 20px;
      }

      #project-intro{
        max-width: 500px;
        padding-left: 10px;
        padding-top: 40px;
        padding-bottom: 20px;



      }

    }

    /* MEDIUM SCREEN SIZE */


    @media handheld, screen and (min-width: 600px) and (max-width: 800px)  {


        #name{
          font-size: 25px;
          padding-top: 50px;


        }

        .nav{
          font-size: 12px;

        }

        .body-text{
          font-size: 18px;
          padding-right: 80px;
          margin-bottom: 30px;
          padding-bottom: 0px;

        }

        #images{
          height: 70vh;
          width: 550px;
          padding-right: 20px;
        }

        #project-intro{
          max-width: 400px;
          padding-left: 30px;
          padding-top: 40px;
          padding-bottom: 20px;


        }
    }

    /* LARGEST SCREEN SIZE */

      @media handheld, screen and (min-width: 800px) and (max-width: 12000px)  {


        #name{
          font-size: 25px;
          padding-top: 50px;

        }

        #main{
          padding-left: 80px;
        }

        .nav{
            font-size: 12px;

        }

        .body-text{
            font-size: 18px;
            max-width: 650px;
            margin-bottom: 30px;
            padding-bottom: 0px;
        }

        #images{
            height: 70vh;
            width: 750px;
            margin-right: 20px;

        }

        #project-intro{
          max-width: 450px;
          padding-left: 30px;
          padding-top: 40px;
          padding-bottom: 20px;

        }
      }