h2, h3 {
  font-family: 'Lora', serif;
  color: #585858;
}

p {
  font-family: 'Open Sans', sans-serif;
  color: #585858;
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
  #nav {
    position: relative;
  }
  body {
    background-image:url(../images/background.jpg);

    background-repeat:repeat;

    background-size:cover;
    height: 100%;
  }
  #maintext-backdrop-portfolio {
    height: screen;
    width: 60%;
    position: relative;
    left: 18%;
    background-color: rgba(255,255,255,0.65);
  }
  #maintext-backdrop-about {
    height: 100%;
    width: 60%;
    position: relative;
    left: 18%;
    background-color: rgba(255,255,255,0.65);
  }

  li {
    position: relative;
    left: 60%;
  }
  #name {
    position: relative;
    left: 22%;
  }
  #contactme {
    position: relative;
    background-color: #E5E5E5;
    opacity: 0.65;
    height: 200px;
    width: 200px;
    float: right;
    margin: 10px;
  }
  #contactlink {
    color: #5DA7AE;
  }
  #headline {
    float: center;
    text-align: center;
    position: relative;
    top: 30px;
    height: 125px;
  }
  #aboutmeheadline {
    float: center;
    text-align: center;
    position: relative;
    top: 30px;
    height: 75px;
  }
  #maintext {
    /*text-align: justify;
    text-justify: distribute;*/
    width: 70%;
    position: absolute;
    left: 15%;
  }
  #eliza {
    width: 45%;
    height: auto;
    border: solid .75px rgba(0,0,0,0.4);
    margin: 15px 10px 0px 15px;
    float: left;
  }

  #projectlist {
    width: 80%;
    position: relative;
    margin: 0px 75px 0px 75px;
  }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1024px) and (max-width: 1280px) {
  #nav {
    position: relative;
  }
  body {
    background-image:url(../images/background.jpg);
    background-size:cover;
    background-position: center center;
    background-repeat: repeat;
    height: 100%;
  }
  #maintext-backdrop-portfolio {
    height: screen;
    width: 60%;
    position: relative;
    left: 10%;
    background-color: rgba(255,255,255,0.65);
  }
  #maintext-backdrop-about {
    height: 100%;
    width: 60%;
    position: relative;
    left: 10%;
    background-color: rgba(255,255,255,0.65);
  }

  li {
    position: relative;
    left: 60%;
  }
  #name {
    position: relative;
    left: 15%;
  }
  #contactme {
    position: relative;
    background-color: #E5E5E5;
    opacity: 0.65;
    height: 200px;
    width: 200px;
    float: right;
    margin: 10px;
  }
  #contactlink {
    color: #5DA7AE;
  }
  #headline {
    float: center;
    text-align: center;
    position: relative;
    top: 30px;
    height: 125px;
  }
  #aboutmeheadline {
    float: center;
    text-align: center;
    position: relative;
    top: 30px;
    height: 75px;
  }
  #maintext {
    /*text-align: justify;*/
    width: 70%;
    position: absolute;
    left: 15%;
  }
  #eliza {
    width: 45%;
    height: auto;
    border: solid .75px rgba(0,0,0,0.4);
    margin: 15px 10px 10px 15px;
    float: left;
  }

  #projectlist {
    width: 80%;
    position: relative;
    margin: 0px 75px 0px 60px;
  }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1023px) {
  #nav {
    position: relative;
    right: 5%;
  }
  body {
    background-image:url(../images/background.jpg);
    background-size:screen;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
  }
 
  #maintext-backdrop-portfolio {
    height:screen;
    width: 60%;
    position: relative;
    left: 10%;
    background-color: rgba(255,255,255,0.65);
  }
  #maintext-backdrop-about {
    height: 100%;
    width: 60%;
    position: relative;
    left: 10%;
    background-color: rgba(255,255,255,0.65);
  }
  
  li {
    position: relative;
    left: 60%;
  }
  #name {
    position: relative;
    left: 15%;
  }
  #contactme {
    position: relative;
    right: -1%;
    background-color: #E5E5E5;
    opacity: 0.65;
    height: 200px;
    width: 200px;
    float: right;
    margin: 10px;
  }
  #contactlink {
    color: #5DA7AE;
  }
  #headline {
    float: center;
    text-align: center;
    position: relative;
    top: 30px;
    height: 125px;
  }
  #aboutmeheadline {
    float: center;
    text-align: center;
    position: relative;
    top: 30px;
    height: 75px;
  }
  #maintext {
    /*text-align: justify;*/
    width: 70%;
    position: absolute;
    left: 15%;
  }
  #eliza {
    width: 45%;
    height: auto;
    border: solid .75px rgba(0,0,0,0.4);
    margin: 15px 10px 10px 15px;
    float: left;
  }
 
  #projectlist {
    width: 80%;
    position: relative;
    margin: 0px 75px 0px 50px;
  }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #nav {
    position: relative;
  }
  body {
    background-image:url(../images/background.jpg);
    background-size:screen;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
  }
  #maintext-backdrop-portfolio {
    height: 100%;
    width: 60%;
    position: relative;
    left: 18%;
    background-color: rgba(255,255,255,0.65);
  }
  #maintext-backdrop-about {
    height: 100%;
    width: 60%;
    position: relative;
    left: 18%;
    background-color: rgba(255,255,255,0.65);
  }
  
  li {
    position: relative;
    left: 60%;
  }
  #name {
    position: relative;
    left: 22%;
  }
  #contactme {
    position: relative;
    background-color: #E5E5E5;
    opacity: 0.65;
    height: 200px;
    width: 200px;
    float: right;
    margin: 10px;
  }
  #contactlink {
    color: #5DA7AE;
  }
  #headline {
    float: center;
    text-align: center;
    position: relative;
    top: 30px;
    height: 125px;
  }
  #aboutmeheadline {
    float: center;
    text-align: center;
    position: relative;
    top: 30px;
    height: 75px;
  }
  #maintext {
   /* text-align: justify;*/
    width: 70%;
    position: absolute;
    left: 15%;
  }
  #eliza {
    width: 45%;
    height: auto;
    border: solid .75px rgba(0,0,0,0.4);
    margin: 15px 10px 10px 15px;
    float: left;
  }
 
  #projectlist {
    width: 80%;
    position: relative;
    margin: 0px 75px 0px 75px;
  }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  #nav {
    position: relative;
    right: -20%;
  }
  body {
    background-image:url(../images/background.jpg);
    background-size:screen;
    background-position: center center;
    background-repeat: repeat;
    height: 100%;
  }
  #maintext-backdrop-portfolio {
    height: screen;
    width: 60%;
    position: absolute;
    left: 10%;
    background-color: rgba(255,255,255,0.65);
  }
  #maintext-backdrop-about {
    height: 100%;
    width: 60%;
    position: absolute;
    left: 10%;
    background-color: rgba(255,255,255,0.65);
  }
  
  li {
    position: relative;
    left: 60%;
  }
  #name {
    position: relative;
    left: 5%;
  }
  #contactme {
    position: relative;
    right: -15%;
    background-color: #E5E5E5;
    opacity: 0.65;
    height: 200px;
    width: 200px;
    float: right;
    margin: 10px;
  }
  #contactlink {
    color: #5DA7AE;
  }
  #headline {
    float: center;
    text-align: center;
    position: relative;
    top: 30px;
    height: 125px;
  }
  #aboutmeheadline {
    float: center;
    text-align: center;
    position: relative;
    top: 30px;
    height: 75px;
  }
  #maintext {
   /* text-align: justify;*/
    width: 70%;
    position: absolute;
    left: 15%;
  }
  #eliza {
    width: 45%;
    height: auto;
    border: solid .75px rgba(0,0,0,0.4);
    margin: 15px 10px 10px 15px;
    float: left;
  }

  #projectlist {
    width: 80%;
    position: relative;
    margin: 0px 40px 0px 30px;
  }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 327px to 480px
*/
@media (min-width: 327px) and (max-width: 480px) {
  #nav {
    position: relative;
  }
  body {
    background-image:url(../images/background.jpg);
    background-size:screen;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
  }
  #maintext-backdrop-portfolio {
    height: screen;
    width: 60%;
    position: relative;
    left: 18%;
    background-color: rgba(255,255,255,0.65);
  }
  #maintext-backdrop-about {
    height: 130%;
    width: 60%;
    position: relative;
    left: 18%;
    background-color: rgba(255,255,255,0.65);
  }
  
  li {
    position: relative;
    left: 60%;
  }
  #name {
    position: relative;
    left: 22%;
  }
  #contactme {
    position: relative;
    right: -25%;
    background-color: #E5E5E5;
    opacity: 0.65;
    height: 200px;
    width: 150px;
    float: right;
    margin: 10px;
  }
  #contactlink {
    color: #5DA7AE;
  }
  #headline {
    float: center;
    text-align: center;
    position: relative;
    top: 10px;
    /*left: 5px;*/
    height: 90px;
  }
  #aboutmeheadline {
    float: center;
    text-align: center;
    position: relative;
    top: 10px;
    height: 60px;
  }
  #maintext {
    /*text-align: justify;*/
    width: 70%;
    position: absolute;
    left: 15%; 
  }
  #eliza {
    width: 75%;
    height: auto;
    border: solid .75px rgba(0,0,0,0.4);
    margin: 10px 5px 10px 15px;
    float: center;
  }
 
  #projectlist {
    width: 80%;
    position: relative;
    margin: 0px 10px 0px 20px;
  } 
}
@media (min-width: 320px) and (max-width: 326px) {
  #nav {
    position: relative;
  }
  body {
    background-image:url(../images/background.jpg);
    background-size:screen;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
  }
  #maintext-backdrop-portfolio {
    height: screen;
    width: 80%;
    position: relative;
    left: 5%;
    background-color: rgba(255,255,255,0.65);
  }
  #maintext-backdrop-about {
    height: 125%;
    width: 80%;
    position: relative;
    left: 5%;
    background-color: rgba(255,255,255,0.65);
  }
  
  li {
    position: relative;
    left: 60%;
  }
  #name {
    position: relative;
    left: 30px;
  }
  #contactme {
    position: relative;
    right: -30%;
    background-color: #E5E5E5;
    opacity: 0.65;
    height: 200px;
    width: 125px;
    float: right;
    margin: 10px;
  }
  #contactlink {
    color: #5DA7AE;
  }
  #headline {
    float: center;
    text-align: center;
    position: relative;
    left: 30px;
    top: 5px;
    height: 75px;
  }
  #aboutmeheadline {
    float: center;
    text-align: center;
    position: relative;
    left: 30px;
    top: 5px;
    height: 30px;
  }
  #maintext {
    /*text-align: justify;*/
    width: 70%;
    position: absolute;
    left: 15%;
    margin: 0px 0px 50px 0px;
  }
  #eliza {
    width: 75%;
    height: auto;
    border: solid .75px rgba(0,0,0,0.4);
    margin: 15px 10px 10px 15px;
    float: left;
  }
 
  #projectlist {
    width: 80%;
    position: relative;
    left: 40px;
    /*margin: 0px 0px 0px 15px;*/
  } 
  #titlemodal {
    text-align: center;
  }
  #imagemodal {
    float: center;
  }
}