@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');

body {
  font-family:   "Gill", "gill sans", "Noto Sans", "Trebuchet MS", "Verdana", "Futura", "Futura PT", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  color: #1a1e24;
}

html {

  background-color: #f2f0eb;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

@supports (height: 100dvh) {
  .full-viewport-height {
    height: 100dvh;
  }
}

* {
    box-sizing: border-box;
}
main{
  padding-top: 7%;
  max-width: 100vw;
  height: 98vh;
  font-weight: 200;
  font-size: 95%;
  color: #1a1e24;
  overflow: scroll;

}
.menu{
  /*font-family: "Cormorant";*/
  font-size: 300%;
  padding-bottom: 1%;
  padding-right: 1%;
  padding-top: 1%;
  margin-left: -1%;
  overflow: hidden;
 background-color: rgba(242, 240, 235, 1);
 position: fixed;
 top: 0;
 width: 102%;
filter: drop-shadow(#502a2a 0.1rem -1rem 1rem);
z-index: 10;
}


.menu a:link {
  color: #5e3d3d;
  text-decoration: none;

}

.menu a:visited {
  color: #5e3d3d;
}

.menu a:hover {
  color: #989199;
}

main a:link {
  color: #5e3d3d;
  text-decoration: none;

}

main a:visited {
  color: #5e3d3d;
}

main a:hover {
  color: #989199;
}


.name {
  font-family:  "Josefin Sans", "Futura", "Futura PT", "Gill", "gill sans", "Trebuchet MS", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  text-decoration: none;
  font-size: 80%;
  font-weight: 400;
  color: #de5e3e;
  padding-left: 5%;
  padding-top: 1%;
}

.name a:link {
  color: #de5e3e;
  text-decoration: none;

}

.name a:visited {
  color: #de5e3e;
}

.name a:hover {
  color: #de5e3e;
}

.nav {
  font-weight: 300;
  font-size: 45%;
  text-align: right;
  padding-right: -10%;
  padding-top: 1%;
  margin-right: 10%;
  margin-left: -65%;
}

.nav a {
  padding-left: 4%;
}

.navcol {

    -webkit-columns: 2; /* Chrome, Safari, Opera */
    -moz-columns: 2; /* Firefox */
    columns: 2;
}

.sampletext {
  text-align: center;
  margin-bottom: 2%;

}

.desc {
  text-align: center;
}

.descleft {
  text-align: left;
}

.descleft h1{
/*font-family: "Cormorant";*/
color: #5e3d3d;
font-size: 180%;
font-weight: 300;
}

.deschead {
  /*font-family: "Cormorant";*/
  color: #5e3d3d;
  padding-bottom: 1%;
  text-align: left;
  font-size: 160%;
}

.columns8 {

    -webkit-columns: 4; /* Chrome, Safari, Opera */
    -moz-columns: 4; /* Firefox */
    columns: 4;
    align-items:  flex-start;
    padding-left: 5%;
    padding-right: 5%;
}

.columns4 {

    -webkit-columns: 4; /* Chrome, Safari, Opera */
    -moz-columns: 4; /* Firefox */
    columns: 4;
    align-items: center;
    margin-top: 5%;
    padding-left: 10%;
    padding-right: 5%;
    padding-bottom: 5%;



}

.columns5 {

    -webkit-columns: 2; /* Chrome, Safari, Opera */
    -moz-columns: 2; /* Firefox */
    columns: 2;
    width: 100%;
    max-width: 100vw;
    align-items: center;
    margin-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
}

.columns5 .portrait2 img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.columns6 {

  -webkit-columns: 4; /* Chrome, Safari, Opera */
  -moz-columns: 4; /* Firefox */
  columns: 4;
  align-items: center;
  padding-top: 10vh;

}

.columns7 {
  padding-left: 7%;
  align-items: center;
  display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-flow: dense;



}

.columns9 {

  align-items: center;
  display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-auto-flow: dense;


}


.portrait img {

width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
align-items: center;
box-shadow: 0px 0px 10px -3px #502a2a;
}

.columns8 .portrait {
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
}


.columns9 .portrait{
  padding: 10%;
}

.portrait2 img {

max-width: 50%;
max-height: 50%;
width: 50%;
height: 50%;
align-items: center;
box-shadow: 0px 0px 10px -3px #502a2a;

}

.portrait3 img {

width: 75%;
height: 75%;
max-width: 75%;
max-height: 75%;
align-items: center;
box-shadow: 0px 0px 10px -3px #502a2a;
position: static;
padding: 0;
margin-bottom: 20%;
margin-top: 20%;
}

.hover{
  box-shadow: 0px 0px 10px -3px #502a2a;
}

.portrait4 img {

width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
align-items: center;
box-shadow: 0px 0px 10px -3px #502a2a;
}


.coltext {
  width: 100%;
  max-width: 100%;


}
.colhead p {
  width: 100%;
  max-width: 100%;
  font-size: 200%;
}

.colhead {
  /*font-family: "Cormorant";*/
  color: #5e3d3d;
  text-align: center;



}

.colbody {
  width: 100vw;
  max-width: 95%;
  text-align: center;

}

.colbody p{
  padding-left: 20%;
  padding-right: 20%;
}



.colbodyintro {
  text-align: left;

}

.gallery-text a:link {
  color: #1a1e24;
  text-decoration: none;

}

.gallery-text a:visited {
  color: #1a1e24;
}

.gallery-text a:hover {
  color: #1a1e24;
}



.scroll4 {
  height: 70vh;
  align-items: center;
  white-space: nowrap;
  margin-left: 10vw;
  margin-right: 10vw;
  overflow: visible;
}


.scroll2 {
  align-items: center;
  white-space: nowrap;

}

.portrait3 a:link {
  color: #5e3d3d;
  text-decoration: none;

}

.portrait3 a:visited {
  color: #5e3d3d;
}

.portrait3 a:hover {
  color:#de5e3e;
}

.portrait3 img:hover {
  transition: 0.4s;
  filter:  brightness(.5);



}

.columns9 .portrait img:hover {
  transition: 0.4s;
  filter:  brightness(.5);

}



.samtext {
  /*font-family: "Cormorant";*/
  font-size: 1vw;

  text-align: center;
  margin-left: -20%;
  margin-top: -15%;;
}

.scroll3 {



}

.column {
  float: left;
  width: 50%;
  padding: 10%;
  position: relative;
  box-sizing: border-box;
}

.columntech {
  float: left;
  width: 30%;
  padding: 5%;
  position: relative;
  box-sizing: border-box;
}

.column .overlay {
  position: absolute;
  text-align: center;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: 5vw;
}

.columntech .overlay {
  position: absolute;
  text-align: center;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: 2vw;
}

.rowtech{
  position: fixed;
  width:60%;
  margin-left: 17%;
  padding-bottom: 10%;
}


.row::after {
  content: "";
  clear: both;
  display: table;
}

.rowtech::after {
  content: "";
  clear: both;
  display: table;
}


.column .overlay a:link {
  color: #dedcd7;
  text-decoration: none;

}

.column .overlay a:visited {
  color: #dedcd7;
}

.column .overlay a:hover {
  color: #dedcd7;
}

.column a:hover .hover {
  filter: brightness(.5);
}



.columntech .overlay a:link {
  color: #dedcd7;
  text-decoration: none;

}

.columntech .overlay a:visited {
  color: #dedcd7;
}

.columntech .overlay a:hover {
  color: #dedcd7;
}


.scroll10{
  margin-left: 10%;
  margin-right: 10%;
}

.scroll10 .columns7{
  height: 100%;
  overflow: visible;
}




.indeximage{
  align-items: center;
  position: fixed;
  z-index: -1;
  margin-top: -1%;
  margin-left: -4%;
  object-fit: cover;
  width: 115%;
  max-height: 115vh;

}

.slogan{
  align-items: center;
  position: fixed;
  font-size: 3vw;
  font-weight: 300;
  text-align: right;
  color: #FDF5EC;
  margin-left: 50%;
  margin-top: 20%;
  margin-right: 0%;
  filter: drop-shadow(0px 0px 7px black);
}

.pano{
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;

}



@media only screen
  and (orientation: portrait)
 {

   .columns5 .portrait2 img {
     width: 0;
     height: 0;
     max-width: 0;
     max-height: 0;
   }

.colbody p{
  padding-left: 5%;
  padding-right: 5%;
}

   .scroll10{
     height: 100%;
     overflow-x: visible;
     margin-left: 5%;
     margin-right: 5%;
   }


   .indeximage{
     object-position: right;
     margin-top: -2%;
     width: none;
     height: 106vh;
     max-width: 105vw;
     max-height: 100%;

   }

    .slogan{
      align-items: center;
      position: fixed;
      font-size: 6vw;
      font-weight: 300;
      text-align: right;
      color: #dedcd7;
      margin-left: 20%;
      margin-top: 60%;
      margin-right: 5%;

    }

    .menu{
font-size: 200%;
      padding-top: 2%;
      margin-left: -2%;
      margin-right: -2%;
      padding-left: 6%;
      padding-right: 6%;
      width: 102%;

    }

    .colbody {
display: contents;
      height: 100%;
      width:100%;

    }

    main {
      font-size: 70%;
      padding-top: 30%;
      overflow: scroll;
      max-height: 90vh;
    }

    .portrait3 {
      position: static;
    }


  .portrait3 img {
  box-shadow: 0px 0px 10px -3px #502a2a;
  position: static;
  padding: 0;
  margin-bottom: 20%;
  margin-top: 20%;
  }



    .column .overlay {
      font-size: 9vw;
    }

    .columntech .overlay {
      font-size: 9vw;
    }


    .column {
      float:left;
      width: 80%;
      padding: 10%;
      position: relative;
      box-sizing: border-box;
    }

    .columntech {
      float: left;
      width: 80%;
      padding: 10%;
      position: relative;
      box-sizing: border-box;
    }

    .row{
      position: fixed;
      height: 80%;
      width:80%;
      overflow:  scroll;
      margin-top: 2%;
      margin-left: 12.5%;
      padding-bottom: 10%;
    }

    .rowtech{
      position: fixed;
      height: 80%;
      width:80%;
      overflow:  scroll;
      margin-top: 2%;
      margin-left: 12.5%;
      padding-bottom: 10%;
    }

    .columns {
        -webkit-columns: 1; /* Chrome, Safari, Opera */
        -moz-columns: 1; /* Firefox */
        columns: 1;
        height: 100%;
        width: 100%;
        max-width: 100%;
        padding-left: 1%;
        padding-right: 1%;
        margin-left: 0%;
    }

    .columns7 {
      max-height: 100%;
      height: 100%;
      padding-left: 10%;
      align-items: center;
      display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-auto-flow: dense;
        overflow: visible;

    }

    .columns8 {
     display: contents;
      -webkit-columns: 1; /* Chrome, Safari, Opera */
      -moz-columns: 1; /* Firefox */
      columns: 1;
      align-items: center;

    }

    .columns8 .portrait {
    padding-top: 5%;
    }

    .columns9 {
      max-height: 100%;
      height: 100%;

      align-items: center;
      display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-auto-flow: dense;
        overflow: visible;
    }

    .columns9 .portrait img:hover {
      filter: none;
}

    .scroll2 {

      margin-right: 1%;
    }

    .scroll3 {
      max-height: 100%;
    }

    .portrait img {

    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    align-items: center;

    }

    .portrait2 img {

    width: 0px;
    height: 0px;

    }

    .portrait4 img {

    width: 0px;
    height: 0px;
    }

    .colhead  {
      display: none;
    }

    .columns8 .colbody p {
      margin-top: -5%;
    }

    .coltext {
      width: 100%;
      max-width: 100%;
      margin-left: -5%;
    }

    .navcol {

        -webkit-columns: 1; /* Chrome, Safari, Opera */
        -moz-columns: 1; /* Firefox */
        columns: 1;
    }

    .nav {
      font-size: 50%;
      text-align: center;
      padding-top: 3%;
      padding-bottom: 3%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }



    .name {
      font-size: 90%;
      margin-left: -5%;
      text-align: center;
      padding-top: 3%;
      margin-bottom: -2%;
    }



    .columns4 {
        -webkit-columns: 1; /* Chrome, Safari, Opera */
        -moz-columns: 1; /* Firefox */
        columns: 1;
        margin-left: -5%;
    }




    .columns5 {
        -webkit-columns: 1; /* Chrome, Safari, Opera */
        -moz-columns: 1; /* Firefox */
        columns: 1;

    }


    .columns6 {
        -webkit-columns: 1; /* Chrome, Safari, Opera */
        -moz-columns: 1; /* Firefox */
        columns: 1;


    }

    .samtext {
      font-size: 3vw;
    }




    .scroll {
      max-height: 100%;
      overflow: visible;

   }
 }



@media only screen
  and (max-width: 1060px)
  and (orientation: landscape) {

    body{
      margin-left: -3%;
    }


    .navcol {

        -webkit-columns: 1; /* Chrome, Safari, Opera*/
        -moz-columns: 1;  Firefox
        columns: 1;
    }

    .nav {
      font-size: 30%;
      text-align: center;
      padding-top: 1%;
      padding-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }

    .menu{
      width: 108%;
    }



    .name {
      font-size: 40%;
      margin-left: -5%;
      text-align: center;
      padding-top: 1%;
      margin-bottom: 0;
    }

    main{
      margin-top: -3%;
      scale: 0.6;
      height: 110vh;

    }

    .columns5 .portrait2 img {
      width: 0;
      height: 0;
      max-width: 0;
      max-height: 0;
    }

 .colbody p{
   padding-left: 5%;
   padding-right: 5%;
 }

    .scroll10{
      height: 100%;
      overflow-x: visible;
    }

    .colbody {
display: contents;
      height: 100%;
      width:100%;

    }

    .portrait3 {
      position: static;
    }


    .portrait3 img {
    box-shadow: 0px 0px 10px -3px #502a2a;
    position: static;
    padding: 0;
    margin-bottom: 20%;
    margin-top: 20%;
    }



    .column .overlay {
      font-size: 9vw;
    }

    .columntech .overlay {
      font-size: 9vw;
    }


    .column {
      float:left;
      width: 80%;
      padding: 10%;
      position: relative;
      box-sizing: border-box;
    }

    .columntech {
      float: left;
      width: 80%;
      padding: 10%;
      position: relative;
      box-sizing: border-box;
    }

    .row{
      position: fixed;
      height: 80%;
      width:80%;
      overflow:  scroll;
      margin-top: 2%;
      margin-left: 12.5%;
      padding-bottom: 10%;
    }

    .rowtech{
      position: fixed;
      height: 80%;
      width:80%;
      overflow:  scroll;
      margin-top: 2%;
      margin-left: 12.5%;
      padding-bottom: 10%;
    }

    .columns {
        -webkit-columns: 1; /* Chrome, Safari, Opera */
        -moz-columns: 1; /* Firefox */
        columns: 1;
        height: 100%;
        width: 100%;
        max-width: 100%;
        padding-left: 1%;
        padding-right: 1%;
        margin-left: 0%;
    }

    .columns7 {
      max-height: 100%;
      height: 100%;
      padding-left: 10%;
      align-items: center;
      display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-auto-flow: dense;
        overflow: visible;

    }

    .columns8 {
     display: contents;
      -webkit-columns: 1; /* Chrome, Safari, Opera */
      -moz-columns: 1; /* Firefox */
      columns: 1;
      align-items: center;

    }

    .columns8 .portrait {
    padding-top: 5%;
    }

    .columns9 {
      max-height: 100%;
      height: 100%;

      align-items: center;
      display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-auto-flow: dense;
        overflow: visible;
    }

    .columns9 .portrait img:hover {
      filter: none;
    }

    .scroll2 {

      margin-right: 1%;
    }

    .scroll3 {
      max-height: 100%;
    }

    .portrait img {

    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    align-items: center;

    }

    .portrait2 img {

    width: 0px;
    height: 0px;

    }

    .portrait4 img {

    width: 0px;
    height: 0px;
    }

    .colhead  {
      display: none;
    }

    .columns8 .colbody p {
      margin-top: -5%;
    }

    .coltext {
      width: 100%;
      max-width: 100%;
      margin-left: -5%;
    }

    .columns4 {
        -webkit-columns: 1; /* Chrome, Safari, Opera */
        -moz-columns: 1; /* Firefox */
        columns: 1;
        max-height: none;
        height: none;
        width: 90vw;
        max-width: 90vw;
        margin-left: 5%;
        overflow-x: scroll;
        margin-top: 0;
    }



    .columns5 {
        -webkit-columns: 1; /* Chrome, Safari, Opera */
        -moz-columns: 1; /* Firefox */
        columns: 1;
        max-height: none;
        height: 100%;
        width: 100%;
        max-width: 100%;
        padding-left: 5%;
        padding-right: 5%;
        margin-top: 0;
    }


    .columns6 {
        -webkit-columns: 1; /* Chrome, Safari, Opera */
        -moz-columns: 1; /* Firefox */
        columns: 1;


    }

    .samtext {
      font-size: 1.5vw;
    }




    .scroll {
      max-height: 100%;
      overflow: visible;

    }

  }