@charset "utf-8";
/*THIS IS FOR THE GRID-BASED PAGES ===============================================*/
h1.portfolio-title{
  color:#E7656E;
  font-weight: 600;
  font-size: 20px;
  text-align:center;
}
h2{
  height:220px;
  font-weight: 600;
  padding:0;
  margin:0;
  line-height:205px;
  text-align: center;
  color:#FFF;
  transition: 0.5s;
}
h5.instructions{
  text-align: center;
  color:#3DBCB4;
}
div.grid{
  width:95%;
  margin:-10px auto;
  padding-top:2%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height:58vh;
}
div.onecol{
  padding:15px;
  height:250px;
  width:413px;
  margin:8px;
}
div.vgmural{
  background-image:url('../img/vgmural-true.jpg');
  transition: 0.5s;
}
div.vgmural:hover{
  background-image:url('../img/vgmural.jpg');
  transition: 0.5s;
}
div.fmountains{
  background-image:url('../img/fmountains-true.jpg');
  transition: 0.5s;
}
div.fmountains:hover{
  background-image:url('../img/fmountains.jpg');
  transition: 0.5s;
}
div.azulejos{
  background-image:url('../img/azulejos-true.jpg');
  transition: 0.5s;
}
div.azulejos:hover{
  background-image:url('../img/azulejos.jpg');
  transition: 0.5s;
}
div.fleaves{
  background-image:url('../img/fleaves-true.jpg');
  transition: 0.5s;
}
div.fleaves:hover{
  background-image:url('../img/fleaves.jpg');
  transition: 0.5s;
}
div.iposters{
  background-image:url('../img/iposters-true.jpg');
  transition: 0.5s;
}
div.iposters:hover{
  background-image:url('../img/iposters.jpg');
  transition: 0.5s;
}
div.cbanner{
  background-image:url('../img/cbanner-true.jpg');
  transition: 0.5s;
}
div.cbanner:hover{
  background-image:url('../img/cbanner.jpg');
  transition: 0.5s;
}
div.istories{
  background-image:url('../img/istories-true.jpg');
  transition: 0.5s;
}
div.istories:hover{
  background-image:url('../img/istories.jpg');
  transition: 0.5s;
}


div.lverose{
  background-image:url('../img/lverose-true.jpg');
  transition: 0.5s;
}
div.lverose:hover{
  background-image:url('../img/lverose.jpg');
  transition: 0.5s;
}
div.cotasrey{
  background-image:url('../img/cotasrey-true.jpg');
  transition: 0.5s;
}
div.cotasrey:hover{
  background-image:url('../img/cotasrey.jpg');
  transition: 0.5s;
}
div.hypo1{
  background-image:url('../img/hypo1-true.jpg');
  transition: 0.5s;
}
div.hypo1:hover{
  background-image:url('../img/hypo1.jpg');
  transition: 0.5s;
}
div.hypo2{
  background-image:url('../img/hypo2-true.jpg');
  transition: 0.5s;
}
div.hypo2:hover{
  background-image:url('../img/hypo2.jpg');
  transition: 0.5s;
}
div.oranges1{
  background-image:url('../img/oranges1-true.jpg');
  transition: 0.5s;
}
div.oranges1:hover{
  background-image:url('../img/oranges1.jpg');
  transition: 0.5s;
}
div.taprayers{
  background-image:url('../img/taprayers-true.jpg');
  transition: 0.5s;
}
div.taprayers:hover{
  background-image:url('../img/taprayers.jpg');
  transition: 0.5s;
}
div.tspill{
  background-image:url('../img/tspill-true.jpg');
  transition: 0.5s;
}
div.tspill:hover{
  background-image:url('../img/tspill.jpg');
  transition: 0.5s;
}
div.llttcorange{
  background-image:url('../img/llttcorange-true.jpg');
  transition: 0.5s;
}
div.llttcorange:hover{
  background-image:url('../img/llttcorange.jpg');
  transition: 0.5s;
}
div.shands{
  background-image:url('../img/shands-true.jpg');
  transition: 0.5s;
}
div.shands:hover{
  background-image:url('../img/shands.jpg');
  transition: 0.5s;
}
div.ink{
  background-image:url('../img/ink-true.jpg');
  transition: 0.5s;
}
div.ink:hover{
  background-image:url('../img/ink.jpg');
  transition: 0.5s;
}




div.komorebi{
  background-image:url('../img/komorebi-true.jpg');
  transition: 0.5s;
}
div.komorebi:hover{
  background-image:url('../img/komorebi.jpg');
  transition: 0.5s;
}
div.atbrochure{
  background-image:url('../img/atbrochure-true.jpg');
  transition: 0.5s;
}
div.atbrochure:hover{
  background-image:url('../img/atbrochure.jpg');
  transition: 0.5s;
}
div.camcover{
  background-image:url('../img/camcover-true.jpg');
  transition: 0.5s;
}
div.camcover:hover{
  background-image:url('../img/camcover.jpg');
  transition: 0.5s;
}
div.lotfbook{
  background-image:url('../img/lotfbook-true.jpg');
  transition: 0.5s;
}
div.lotfbook:hover{
  background-image:url('../img/lotfbook.jpg');
  transition: 0.5s;
}
div.photo1{
  background-image:url('../img/photo1-true.jpg');
  transition: 0.5s;
}
div.photo1:hover{
  background-image:url('../img/photo1.jpg');
  transition: 0.5s;
}
div.photo2{
  background-image:url('../img/photo2-true.jpg');
  transition: 0.5s;
}
div.photo2:hover{
  background-image:url('../img/photo2.jpg');
  transition: 0.5s;
}
div.photo3{
  background-image:url('../img/photo3-true.jpg');
  transition: 0.5s;
}
div.photo3:hover{
  background-image:url('../img/photo3.jpg');
  transition: 0.5s;
}
div.photo4{
  background-image:url('../img/photo4-true.jpg');
  transition: 0.5s;
}
div.photo4:hover{
  background-image:url('../img/photo4.jpg');
  transition: 0.5s;
}
div.photo5{
  background-image:url('../img/photo5-true.jpg');
  transition: 0.5s;
}
div.photo5:hover{
  background-image:url('../img/photo5.jpg');
  transition: 0.5s;
}
div.gmpostcards{
  background-image:url('../img/gmpostcards-true.jpg');
  transition: 0.5s;
}
div.gmpostcards:hover{
  background-image:url('../img/gmpostcards.jpg');
  transition: 0.5s;
}
div.vposter{
  background-image:url('../img/vposter-true.jpg');
  transition: 0.5s;
}
div.vposter:hover{
  background-image:url('../img/vposter.jpg');
  transition: 0.5s;
}
div.twstoo{
  background-image:url('../img/twstoo-true.jpg');
  transition: 0.5s;
}
div.twstoo:hover{
  background-image:url('../img/twstoo.jpg');
  transition: 0.5s;
}
div.folklore{
  background-image:url('../img/folklore-true.jpg');
  transition: 0.5s;
}
div.folklore:hover{
  background-image:url('../img/folklore.jpg');
  transition: 0.5s;
}
div.aeetages{
  background-image:url('../img/aeetages-true.jpg');
  transition: 0.5s;
}
div.aeetages:hover{
  background-image:url('../img/aeetages.jpg');
  transition: 0.5s;
}
div.nzines{
  background-image:url('../img/nzines-true.jpg');
  transition: 0.5s;
}
div.nzines:hover{
  background-image:url('../img/nzines.jpg');
  transition: 0.5s;
}
h2:hover{
  transition: 0.5s;
  cursor:grab;
}
.hidden{
  opacity:0;
  transition: 0.5s;
}
.hidden:hover{
  opacity:1;
  transition:0.5s;
}
h2.red{
  color:#E7656E;
}
h5.design-det{
  text-align: center;
  margin-top:-105px;
}
/*THIS IS FOR THE DETAIL WINDOWS ===================MOBILE========================*/
#detwin, #detwinKO, #detwinAT, #detwinCA, #detwinLO, #detwinVP, #detwinP1, #detwinP2, #detwinP3, #detwinP4, #detwinP5,
#detwinVG, #detwinFM, #detwinIP, #detwinCB, #detwinFL, #detwinAZ, #detwinGM, #detwinAE, #detwinNZ, #detwinIS{
  z-index: 900;
  position: fixed;
  top: 0;
  bottom:0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  display: none;
  background-color: #FFF;
}
.mob-det-img{
  width:100%;
}
img.large-det-img{
  display: none;
}
img.scrollicon{
  display: none;
}
div.det-win-typo{
  padding:20px;
}
h1.det-win-title{
  font-size: 20px;
  color: #0F9E94;
}
h5.det-win-title{
  color:#E7656E;
  font-size: 18px;
  font-weight: 600;
  margin-top:15px;
}
h1.det-title{
  font-size: 22px;
  font-weight: 600;
  color:#0F9E94;
}
p.det-text{
  color:#000;
  font-size:16px;
  line-height: 21px;
  margin-bottom: 12px;
}
h3.det-title{
  font-weight: 600;
  margin-bottom:6px;
}
.center{
  text-align: center;
}
a#closewin{
  display: inline-block;
  padding: 6px;
  text-align: right;
  width: 100%;
  background-color: #D4FBF6;
  color:#0F9E94;
  z-index: 50;
}
a#closewin:hover{
  cursor:grab;
}
button.det-button{
  background-color: #FFF;
  width:300px;
  display: block;
  margin:20px auto;
  text-align: center;
}
button.det-button:hover{
  background-color: #0F9E94;
  color: #FFF;
}
/*THIS IS FOR BIGGER SCREENS ABOVE MOBILE=========================================*/
@media only screen and (min-width: 700px) {
  div.grid{
    padding:2% 2.5%;
  }
  a#closewin{
    width: 94vw;
    position: fixed;
  }
  #detwin, #detwinKO, #detwinAT, #detwinCA, #detwinLO, #detwinVP, #detwinP1, #detwinP2, #detwinP3, #detwinP4, #detwinP5,
  #detwinVG, #detwinFM, #detwinIP, #detwinCB, #detwinFL, #detwinAZ, #detwinGM, #detwinAE, #detwinNZ, #detwinIS{
    top: 3vh;
    bottom:3vh;
    right:3vw;
    left: 3vw;
    width: 94vw;
    height: 94vh;
  }
  img.mob-det-img{
    display: none;
  }
  img.large-det-img{
    display: block;
    width: 100%;
    margin-top:33px;
  }
}
@media only screen and (min-width: 1046px) {
/*THIS IS FOR THE GRID-BASED PAGES ===============================================*/
div.grid{
  margin:-30px auto;
}
/*THIS IS FOR THE DETAIL WINDOWS =================================================*/
div.det-img-div{
  width:70%;
}
div.det-win-typo{
  width:25%;
  position: absolute;
  float: left;
  margin-top:50px;
  margin-left:72%;
  z-index: 10;
}
img.large-det-img{
  width:100%;
  float: left;
}
img.scrollicon{
  width:45px;
  display: block;
  position: absolute;
  left:35%;
  bottom:2%;
}

}
@media only screen and (min-width: 1330px) {
div#header{
  width: 45%;
}
div#header-intro{
  width: 40%;
  padding: 10% 8%;
}
div#header-intro p{
  width: 150%;
}
img#desktop-portrait{
  max-width: 480px;
  margin-left: 200px;
}
/*THIS IS FOR THE DETAIL WINDOWS =================================================*/
div.half{
  margin-top:20px;
  display: block;
  width:48%;
  float: left;
}
h3.bigscreen{
  margin-top:30px;
}
p.bigscreen{
  width: 600px;
}
div.full{
  clear: both;
  width:80%;
  margin-left:10%;
  margin-right:10%;
  text-align: center;
}
h3.centerbig{
  margin-bottom:6px;
}
img.det-prototype{
  width:450px;
}
img.VG{
  width:600px;
}
div.box-det{
  width:20%;
}
div.box-det-ob{
  width: 20%;
  padding: 1%;
}
h3.center{
  margin-top:40px;
}
}
@media only screen and (min-width: 1660px) {
  div.det-win-typo{
    width:25%;
    float: left;
    margin-top:50px;
    margin-left:67%;
    position: fixed;
  }
}