@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: "EastMarket";
  src: url("fonts/eastmarketnf-webfont.woff");
}

@font-face {
  font-family: "DINAltBold";
  src: url("fonts/dinab-webfont.woff");
}

@font-face {
  font-family: "DINConBold";
  src: url("fonts/dincb-webfont.woff");
}

.img-fluid {
  max-width:100%;
  height:auto;
}
 

@media only screen and (max-width: 500px) {
html, body {
  /**-Mobile view -  981px - cannot go lower or else shows up as desktop view
   /** on mobile - 980px shows desktop view **/
  margin: 0;
  height: 100%;
  overflow: hidden;
}
  .mobile {
    display: block;
  }

  .desktop {
    display: none;
  }

  #HomeMain {
    background: url(../img/mobile/mob_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;

    background-color: #A1CCDE;
    height:100vh;
    
  }

  #MobBGOverlays {
    background: url(../img/mobile/mob_bg_overlays.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    opacity: 80%;

    height:100vh;
    /* display:block; */
  }

  .MobContain {
    position:absolute;
  }
 
  


  #MobLabelProj {
    top: 45vw;
    left:0vw;
    width:68%;
    height: auto;
  }

  #MobLabelContact {
    top: 69vw;
    left:0vw;
    width:48%;
    height: auto;
  }

  #MobLabelAbout {
    top: 77vw;
    right:0vw;
    width:46%;
    height: auto;
  }



  /* MobLabelHide is labels hidden on top of others to make them clickable */
  #MobLabelProjHide {
    top: 45vw;
    left:0vw;
    width:68%;
    height: auto;
    opacity:0;
  }

  #MobLabelContactHide {
    top: 69vw;
    left:0vw;
    width:48%;
    height: auto;
    opacity:0;
  }

  #MobLabelAboutHide {
    top: 77vw;
    right:0vw;
    width:46%;
    height: auto;
    opacity:0;
  }





  #MobDividers {
    top: 64.73vw;
    left:0vw;
    width:100%;
    height: auto;
  }

  #MobProjObj {
    top: 19vw;
    left:40vw;
    width:20.4%;
    height: auto;
  }

  #MobContactObj {
    top: 120vw;
    left:16vw;
    width:28%;
    height: auto;
  }

  #MobAboutObj {
    top: 112vw;
    left:61vw;
    width:36%;
    height: auto;
  }


  #MobLogo {
    top: 60.1vw;
    left:5.8vw;
    width:88%;
    height: auto;
  }












}

@media only screen and (min-width: 500px) {
  /** DESKTOP START  - 981px - cannot go lower or else shows up as desktop view
   /** on mobile - 980px shows desktop view **/

  .mobile {
    display: none;
  }
  #HomeMain {
    background: url(../img/bg_fadev1.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 124%;

    background-color: #A1CCDE;
    height:100vh;
    
  }


  

  #nav_img_contain {
    top: 13vw;
    left: 27vw;
    width:14%;
    height: auto;

  }

  #about_img_contain {
    top: 20vw;
    left: 58.4vw;
    width:7%;
    height: auto;
  }


  #contact_img_contain {
    top: 26.2vw;
    left: 22vw;
    width:5.2%;
    height: auto;
  }

  #projects_img_contain {
    top: 31.8vw;
    left: 75.2vw;
    width:6%;
    height: auto;
  }



  .home_container {
    position: absolute;
  } 

  nav {
    display:grid;
    position:absolute;
    top:15.4vw;
    left: 28.4vw;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

  }

  .nav_items {
    width:5vw;
    height:1.6vw;
    background-color: #66C6EC;
    display: grid;
    border-radius: .4vw;
    margin:.3vw .3vw;
    text-align: center;
    padding-top:1px;
    font-family: "EastMarket";
    font-size: 1.2vw;
    color:#062F41;

  }

  .nav_tags {
    width:14%;
    position:absolute;
  }

  #aboutTag {
    top: 25vw;
    left:52vw;
  }

  #contactTag {
    top:30.8vw;
    left:22vw;
  }

  #projectsTag {
    top:37.2vw;
    left:67.4vw;
  }

  nav a {
    text-decoration: none;
    color:#062F41;
  }



}







/* #nav_item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

#nav_item2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

#nav_item3 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}

#nav_item4 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
} */

/* #nav_item1 p {
  position: absolute;
  text-align: center;
  top:.3vw;
}

#nav_item2 p {
  position: absolute;
  text-align: center;
  top:.3vw;
}

#nav_item3  p {
  position: absolute;
  text-align: center;
  top:5vw;
}

#nav_item4  p {
  position: absolute;
  text-align: center;
  top:5vw;
}