body {
  font-family: "prestige-elite-std", serif;
  font-weight:30;
}

body {
  font-family: "felt-tip-woman", sans-serif;
  font-weight:400;
  font-style:normal;
}

body {
  font-family: "felt-tip-woman", sans-serif;
  font-weight:700;
  font-style:normal;
}

body {
  background-color: white;
  color: black;
  /*font-family: Verdana;*/
}

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

dialog#myModal {
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%, -50%) !important;
  margin:0 !important;
  background-color:#d2a19a !important;
  color: #9c3121 !important;
  padding:20px;
  border:2px solid #9c3121;
  border-radius:8px;
  width:90%;
  /*background-color:#d2a19a;*/
  max-width: 600px;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}
dialog#myModal::backdrop{
  background: rgba(0,0,0,0.5);
}

.small-gallery-img{
  max-width: 50px;
  max-height:50px;
  width:auto;
  height:auto;
}

.text-columns{
  column-count:6;
  column-gap:20px;
}

.text-columns img,
.text-columns p{
  break-inside:avoid;
  display:inline-block;
  width:100%;
  height: auto;
}

.text-columns2{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 20px;
  align-items: baseline;
  /*column-count:3;*/
  /*column-gap:20px;*/
}
.text-columns2 p{
  margin:0;
  padding:0;
}

.text-columns3{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 20px;
  align-items: baseline;
}
.text-columns3 p{
  margin:0;
  padding:0;
}




/* MAIN DISPLAY - DESKTOP*/
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 2em;
  align-items: flex-start;
}

/*ASSETS AND PAGE DECORATION*/
.floating-overlay{
position:fixed;
bottom:-10px;
right:20px;
width:600px;
z-index:9999;
pointer-events: none;
opacity:50%;
}

.floating-overlay2{
position:fixed;
bottom:50px;
left:90px;
width:300px;
z-index:9999;
pointer-events: none;
/*opacity:50%;*/
}

.floating-overlay3{
position:fixed;
bottom:250px;
right:400px;
width:250px;
z-index:0;
pointer-events: none;
/*opacity:50%;*/
}

.floating-overlay4{
position:fixed;
bottom:0px;
left:-200px;
width:600px;
z-index:0;
pointer-events: none;
opacity:50%;
}

.delta-spotlight {
  grid-column: 1 / 3; 
  grid-row: 1;        
  margin-left:250px;
  margin-right: 150px;
  margin-top:80px;
  z-index:1;
}

.delta-carousel {
  grid-column: 3 / 4;
  grid-row: 1/2;        
  max-width: 350px;
  width: 100%;
  margin-top:500px;
}

.delta-text {
  grid-column: 2 / 4; /* Content spans columns 1 and 2 */
  grid-row: 1;        /* Drops cleanly to Row 2 beneath drawings */
  max-width: 550px;
  margin-top: 90px;
  margin-left:350px;
  position: relative;
  z-index:1;
}

.text-bg-image {
  position:absolute;
  top:0;
  left:0px;
  width:120%;
  height:auto;
  z-index:-1;
  pointer-events:none;
}

.deltatitle{
  grid-column:1;
  grid-row: 2;
  transform: rotate(0deg);
  width:100px;
}

/*AT3 gallery */
.at3plancarousel{
  grid-column: 1/3;
  grid-area: 1;
  width: 120%;
  margin-top:100px;
  margin-left:100px;
}

.at3text1{
  grid-column: 3;
  grid-row: 1;
  margin-top:100px;
}

.at3heroshot{
  grid-column:3;
  grid-row:1;
  width:70%;
  margin-top: 300px;
}

.at3detailcarousel{
  grid-column:2;
  grid-row:2;
  max-width: 600px;
}

.at3text2{
  grid-column: 3;
  grid-row: 2;
}

.at3sectioncarousel{
  grid-column:2;
  grid-row:3;
  margin-top:-100px;
}

.at3diagramcarousel{
grid-column:3;
  grid-row:2/3;
  margin-top:300px;
}

.at3siteplan {
  grid-column: 1;
  grid-row:2/4;
  margin-top:150px;
  max-width:400px;
}


/*Gamma Grid Layout*/
.gammasectionelevation {
  grid-column: 1/2;
  grid-row:1;
  margin-left:100px;
  margin-top:50px;
  width:150%;
}

.gammatext1{
  grid-column:1/2;
  grid-row:1;
  margin-left:100px;
  margin-top:220px;
  width:150%;
}


.gammalhcarousel {
  grid-column: 1;
  grid-row:2;
  margin-left:100px;
  margin-top:100px;
  width:80%;
}

.gammasitecarousel {
  grid-column:3/4;
  grid-row:2;
  z-index: 9999;
}

.gammatext2{
  grid-column:1/2;
  grid-row:3;
  margin-left:100px;
  /*margin-top:220px;*/
}

.gammalhdiagrams {
  grid-column:2/3;
  grid-row:3;
  width:150%;
  z-index: 9999;
}

/*PROJECT PAGE GALLERY*/
.deltaproject{
  grid-column:1;
  grid-row:1;
  width:50%;
  margin-top:100px;
  margin-left:100px;
}
.gammaproject{
  grid-column:2;
  grid-row:1;
  width:80%;
  margin-top:200px;
}
.AT3project{
  grid-column:3;
  grid-row:1/2;
  width:70%;
}
.AT2project{
  grid-column:1/2;
  grid-row:1/2;
  width:80%;
  margin-top:600px;
  margin-left:50px;
}
.betaproject{
  grid-column:2;
  grid-row:1/2;
  width:80%;
  margin-top:700px;
}
.dptproject{
  grid-column:3/4;
  grid-row:1/2;
  width:80%;
  margin-top:900px;
}

/*AT2 POSITIONING*/
.at2plansection{
  grid-column:1;
  grid-row:1;
  margin-left:300px;
  width:50%;
}

.at3a3carousel{
  grid-column:1;
  grid-row:1/2;
  margin-top:200px;
  margin-left:200px;
  width:150%;
}

.at2text1 {
  grid-column:3;
  grid-row:1/2;
  margin-top:200px;
}

.at3a2carousel{
  grid-column:2/3;
  grid-row:2/3;
  width:150%;
  margin-left:100px;
}

.at2text2{
  grid-column:1;
  grid-row:2/3;
  margin-top:70px;
  margin-left:50px;
}

/*ABOUT ME LAYOUT*/
.aboutmeportrait{
  grid-column:1;
  grid-row:1/2;
  margin-top:250px;
}
.aboutmepara1{
  grid-column:2;
  grid-row:1;
  margin-top:250px;
}
.aboutmepara2{
  grid-column:2;
  grid-row:1/2;
  margin-top:570px;
}
.aboutmepara3{
  grid-column:3;
  grid-row:1/2;
  margin-top:250px;
}
.aboutmepara4{
  grid-column:3;
  grid-row:1/2;
  margin-top:570px;
}
.aboutmepara5{
  grid-column:3;
  grid-row:1/2;
  margin-top:50px;
}


#carousel-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   RESPONSIVE BREAKPOINTS (Tablet and Mobile)
   ========================================== */
@media (max-width: 800px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /*ASSETS AND PAGE DECORATION*/
.floating-overlay{
position:fixed;
bottom:-10px;
right:20px;
width:400px;
z-index:9999;
pointer-events: none;
opacity:50%;
}

.floating-overlay2{
position:fixed;
bottom:15px;
left:0px;
width:200px;
z-index:9999;
pointer-events: none;
/*opacity:50%;*/
}

.floating-overlay3{
position:fixed;
bottom:0px;
left:50px;
width:190px;
z-index:0;
pointer-events: none;
/*opacity:50%;*/
}

.floating-overlay4{
position:fixed;
bottom:0px;
left:-100px;
width:400px;
z-index:0;
pointer-events: none;
opacity:50%;
}

  
  .delta-spotlight {
    grid-column: 1 / 3;
    grid-row: auto;
    margin-left: 0;
    margin-right: 0;
  }
  .delta-carousel {
    grid-column: 1 / 3;
    grid-row: auto;
    margin-top:0;
  }
  .delta-text {
    grid-column: 1 / 3;
    grid-row: auto;
  }
  .deltaasset1 {
    /*grid-column:1/3;*/
    /*grid-row:1;*/
    /*z-index: -0;*/
    position: absolute;
    top:0px;
    left:700px;
    z-index: 1;
    pointer-events:none;
    /*grid-column:1;*/
    /*grid-row:1;*/
  }
  
  .deltaasset1 img{
    width: 600px;
    opacity: 0.5;
    display: block;
  }
  
  .deltatitle {
    grid-column:1;
    grid-row:1;
    transform: rotate(45deg);
    transform-origin: left top;
    width:100px;
  }
  /*AT3 gallery */
.at3plancarousel{
  grid-column:1/3;
  grid-row:auto;
  margin-top:0px;
  margin-left:0px;
  width:auto;
}

.at3text1{
  grid-column: 1/3;
  grid-row: auto;
  margin-top:0px;
}

.at3text2{
  grid-column: 1/3;
  grid-row: auto;
}

.at3heroshot{
  grid-column:1/3;
  grid-row:auto;
}

.at3detailcarousel{
  grid-column:1/3;
  grid-row:auto;
  margin-top:0px;
  max-width:0px;
}

.at3sectioncarousel{
  grid-column:1/3;
  grid-row:auto;
}

.at3diagramcarousel{
 grid-column:1/3;
  grid-row:auto;
}
.at3siteplan {
  grid-column:1/3;
  grid-row:auto;
}

/*Gamma Grid Layout*/
.gammasectionelevation {
  grid-column: 1/3;
  grid-row:auto;
  margin-left:0px;
  margin-top:0px;
  width:auto;
}

.gammatext1{
  grid-column:1/2;
  grid-row:auto;
  margin-left:0px;
  margin-top:0px;
  width:auto;
}

.gammalhcarousel {
  grid-column: 1;
  grid-row:auto;
  margin-left:0px;
  margin-top:0px;
  width:100%;
}

.gammasitecarousel {
  grid-column:2;
  grid-row:auto;
}

.gammatext2{
  grid-column:2;
  grid-row:auto;
  margin-left:0px;
  /*margin-top:220px;*/
}

.gammalhdiagrams {
  grid-column:2;
  grid-row:auto;
  width:100%;
}


/*PROJECT PAGE GALLERY*/
.deltaproject{
  grid-column:1;
  grid-row:auto;
  width:auto;
  margin-top:0px;
  margin-left:0px;
}
.gammaproject{
  grid-column:2;
  grid-row:auto;
  width:auto;
  margin-top:0px;
}
.AT3project{
  grid-column:1;
  grid-row:auto;
  width:auto;
}
.AT2project{
  grid-column:2;
  grid-row:auto;
  width:auto;
  margin-top:0px;
  margin-left:0px;
}
.betaproject{
  grid-column:1;
  grid-row:auto;
  width:auto;
  margin-top:0px;
}
.dptproject{
  grid-column:2;
  grid-row:auto;
  width:auto;
  margin-top:0px;
}

/*AT2 POSITIONING*/
.at2plansection{
  grid-column:1;
  grid-row:auto;
  margin-left:100px;
  width:50%;
}

.at3a3carousel{
  grid-column:1;
  grid-row:auto;
  margin-top:0px;
  margin-left:0px;
  width:auto;
}

.at2text1 {
  grid-column:2;
  grid-row:auto;
  margin-top:0px;
}

.at3a2carousel{
  grid-column:2;
  grid-row:auto;
  width:auto;
  margin-left:0px;
}

.at2text2{
  grid-column:1;
  grid-row:auto;
  margin-top:0px;
  margin-left:0px;
}

/*ABOUT ME LAYOUT*/
.aboutmeportrait{
  grid-column:1;
  grid-row:auto;
  margin-top:250px;
  max-width:300px;
}
.aboutmepara1{
  grid-column:1/2;
  grid-row:auto;
  margin-top:100px;
}
.aboutmepara2{
  grid-column:1/2;
  grid-row:auto;
  margin-top:0px;
}
.aboutmepara3{
  grid-column:1/2;
  grid-row:auto;
  margin-top:0px;
}
.aboutmepara4{
  grid-column:1;
  grid-row:auto;
  margin-top:0px;
}
.aboutmepara5{
  grid-column:2;
  grid-row:auto;
  margin-top:0px;
}

}

@media (max-width: 500px) {
  .gallery {
    grid-template-columns: 1fr;
  }
  
  /*ASSETS AND PAGE DECORATION*/
.floating-overlay{
position:fixed;
bottom:-10px;
right:0px;
width:300px;
height:700px;
z-index:9999;
pointer-events: none;
opacity:50%;
}
  
  .floating-overlay2{
position:fixed;
bottom:15px;
left:0px;
width:120px;
z-index:9999;
pointer-events: none;
/*opacity:50%;*/
}

.floating-overlay3{
position:fixed;
bottom:100px;
left:-20px;
width:100px;
z-index:0;
pointer-events: none;
/*opacity:50%;*/
}

.floating-overlay4{
position:fixed;
bottom:-50px;
left:-50px;
width:200px;
z-index:0;
pointer-events: none;
opacity:50%;
}

  .delta-spotlight{
  grid-column:1;
    grid-row: 1;
  }
  .delta-carousel {
    grid-column:1;
    grid-row: 3;
    z-index: 0;
    width:150%;
  }
  .deltaasset1 {
    position: relative;
    top:0px;
    left:10px;
    z-index: 1;
    pointer-events:none;
    /*grid-column:1;*/
    /*grid-row:1;*/
  }
  
  .deltaasset1 img{
    width: 400px;
    opacity: 0.5;
    display: block;
  }
  
  .delta-text {
    grid-column: 1;
    grid-row: auto;
    margin-left:0px;
    width:100%;
  }
  .deltatitle {
    grid-column:1;
    grid-row:1;
    transform: rotate(45deg);
    transform-origin: left top;
    width:100px;
    margin-top:80px;
    margin-left:0px;
  }  
  /*AT3 gallery */
.at3plancarousel{
  grid-column:1/3;
  grid-row:auto;
  margin-top:0px;
  margin-left:0px;
}

.at3text1{
  grid-column: 1/3;
  grid-row: auto;
  margin-top:0px;
}

.at3text2{
  grid-column: 1/3;
  grid-row: auto;
}

.at3heroshot{
  grid-column:1/3;
  grid-row:auto;
}

.at3detailcarousel{
  grid-column:1/3;
  grid-row:auto;
  margin-top:0px;
  max-width:0px;
}

.at3sectioncarousel{
  grid-column:1/3;
  grid-row:auto;
}

.at3diagramcarousel{
  grid-column:1/3;
  grid-row:auto;
}
.at3siteplan {
  grid-column:1/3;
  grid-row:auto;
}

/*Gamma Grid Layout*/
.gammasectionelevation {
  grid-column: 1;
  grid-row:auto;
  margin-left:0px;
  margin-top:0px;
  width:auto;
}

.gammatext1{
  grid-column:1;
  grid-row:auto;
  margin-left:0px;
  margin-top:0px;
  width:auto;
}

.gammalhcarousel {
  grid-column: 1;
  grid-row:auto;
  margin-left:0px;
  margin-top:0px;
  width:auto;
}
.gammasitecarousel {
  grid-column:1;
  grid-row:auto;
}

.gammatext2{
  grid-column:1;
  grid-row:auto;
  margin-left:0px;
  /*margin-top:220px;*/
}

.gammalhdiagrams {
  grid-column:1;
  grid-row:auto;
  width:100%;
}

/*PROJECT PAGE GALLERY*/
.deltaproject{
  grid-column:1;
  grid-row:auto;
  width:auto;
  margin-top:0px;
  margin-left:0px;
}
.gammaproject{
  grid-column:1;
  grid-row:auto;
  width:auto;
  margin-top:0px;
}
.AT3project{
  grid-column:1;
  grid-row:auto;
  width:auto;
}
.AT2project{
  grid-column:1;
  grid-row:auto;
  width:auto;
  margin-top:0px;
  margin-left:0px;
}
.betaproject{
  grid-column:1;
  grid-row:auto;
  width:auto;
  margin-top:0px;
}
.dptproject{
  grid-column:1;
  grid-row:auto;
  width:auto;
  margin-top:0px;
}

/*AT2 POSITIONING*/
.at2plansection{
  grid-column:1;
  grid-row:auto;
  margin-left:100px;
  width:50%;
}

.at3a3carousel{
  grid-column:1;
  grid-row:auto;
  margin-top:0px;
  margin-left:0px;
  width:auto;
}

.at2text1 {
  grid-column:1;
  grid-row:auto;
  margin-top:0px;
}

.at3a2carousel{
  grid-column:1;
  grid-row:auto;
  width:auto;
  margin-left:0px;
}

.at2text2{
  grid-column:1;
  grid-row:auto;
  margin-top:0px;
  margin-left:0px;
}
/*ABOUT ME LAYOUT*/
.aboutmeportrait{
  grid-column:1;
  grid-row:auto;
  margin-top:250px;
  max-width:300px;
}
.aboutmepara1{
  grid-column:1;
  grid-row:auto;
  margin-top:100px;
}
.aboutmepara2{
  grid-column:1;
  grid-row:auto;
  margin-top:0px;
}
.aboutmepara3{
  grid-column:1;
  grid-row:auto;
  margin-top:0px;
}
.aboutmepara4{
  grid-column:1;
  grid-row:auto;
  margin-top:0px;
}
.aboutmepara5{
  grid-column:1;
  grid-row:auto;
  margin-top:0px;
}


}