@font-face{font-family:hypatia-sans-pro;src:url(https://use.typekit.net/af/f8d87f/00000000000000003b9adaa2/27/l?subset_id=2&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/f8d87f/00000000000000003b9adaa2/27/d?subset_id=2&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/f8d87f/00000000000000003b9adaa2/27/a?subset_id=2&fvd=n4&v=3) format("opentype");font-weight:400;font-style:normal;font-stretch:normal;font-display:auto;}

@font-face{font-family:hypatia-sans-pro;src:url(https://use.typekit.net/af/e1fc43/00000000000000003b9adaa3/27/l?subset_id=2&fvd=n6&v=3) format("woff2"),url(https://use.typekit.net/af/e1fc43/00000000000000003b9adaa3/27/d?subset_id=2&fvd=n6&v=3) format("woff"),url(https://use.typekit.net/af/e1fc43/00000000000000003b9adaa3/27/a?subset_id=2&fvd=n6&v=3) format("opentype");font-weight:600;font-style:normal;font-stretch:normal;font-display:auto;}

@font-face{font-family:hypatia-sans-pro;src:url(https://use.typekit.net/af/14e069/00000000000000003b9ada9b/27/l?subset_id=2&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/14e069/00000000000000003b9ada9b/27/d?subset_id=2&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/14e069/00000000000000003b9ada9b/27/a?subset_id=2&fvd=n7&v=3) format("opentype");font-weight:700;font-style:normal;font-stretch:normal;font-display:auto;}

@font-face{font-family:hypatia-sans-pro;src:url(https://use.typekit.net/af/fc2289/00000000000000003b9adaa4/27/l?subset_id=2&fvd=i6&v=3) format("woff2"),url(https://use.typekit.net/af/fc2289/00000000000000003b9adaa4/27/d?subset_id=2&fvd=i6&v=3) format("woff"),url(https://use.typekit.net/af/fc2289/00000000000000003b9adaa4/27/a?subset_id=2&fvd=i6&v=3) format("opentype");font-weight:600;font-style:italic;font-stretch:normal;font-display:auto;}

@font-face{font-family:hypatia-sans-pro;src:url(https://use.typekit.net/af/197554/00000000000000003b9ada9c/27/l?subset_id=2&fvd=i7&v=3) format("woff2"),url(https://use.typekit.net/af/197554/00000000000000003b9ada9c/27/d?subset_id=2&fvd=i7&v=3) format("woff"),url(https://use.typekit.net/af/197554/00000000000000003b9ada9c/27/a?subset_id=2&fvd=i7&v=3) format("opentype");font-weight:700;font-style:italic;font-stretch:normal;font-display:auto;}

body {
  font-family: 'hypatia-sans-pro'!important;
  background-color:transparent!important;
}

section {
  float: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}

#photos {
  float: left;
    width: 100%;
}

#photos-mobile {
  float: left;
  display:none;
  width:100%;
  height:auto;
  text-align:center;
}

#photos-mobile img {
  max-width:31%;
  margin-right:1%;
  padding-top:1%;
}

#photos-mobile img:first-of-type {
  margin-left:1%;
}

@media only screen and (max-width: 950px) {

  .hover2{
    display:none!important;
  }

  #container {    
    width: 100vw!important;
    height: auto!important;
  }

  #photos {
    display:none;
  }

  #photos-mobile {
    display:block;
  }

  .hover {
    float:none!important;
    width:170px!important;
    height:170px!important;
  }

  .hover2 {
    float:none!important;
    width:170px!important;
    height:85px!important;
  }
  #text {
    font-size: 20px!important;
    font-family: 'Lato'!important;
  }

  #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9 {
    width:170px!important;
    height:170px!important;
    margin:1px!important;
  }

  .title{
    margin-top:120px!important;
  }
  .rainbow{
    display:none;
  }
  .ccc{
    display:none;
  }

}



@media only screen and (max-width: 600px) {



  #photos {
    display:none;
  }

  #photos-mobile {
    display:block;
  }

  .title{
    margin-top:84px!important;
  }
    .hover {
      float:none!important;
      width:130px!important;
      height:130px!important;
  }
  .hover2 {
    float:none!important;
    width:130px!important;
    height:65px!important;
  }
    #text {
      font-size: 18px!important;
      font-family: 'Lato'!important;
    }

  #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9 {
    width:130px!important;
    height:130px!important;
    margin:1px!important;
  }

  .subtitle p {
    font-size: 12px; 
  }
}

@media only screen and (max-width: 500px) {

  #text {
    font-size: 15px!important;
  }

  #photos {
    display:none;
  }
  
  #photos-mobile {
    display:block;
  }
}

#text {
  float:left;margin:5px;width:auto;max-width:930px;height:auto;border:0px solid #eee;padding:10px;
  font-size: 18px;
  font-family: 'Lato'!important;
    min-height:350px;
}

#container {    
  width: 960px;
  height: auto;
  margin: auto;
  left:0;
  right:0;
}

.hover{
  font-family: 'hypatia-sans-pro'!important;
  width: 320px;
    height: 320px;
    float: left;
}

.hover2{
  font-family: 'hypatia-sans-pro'!important;
  width: 160px;
    height: 320px;
    float: left;
}

#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9 {
  font-family: 'hypatia-sans-pro'!important;
  transition: all 0.65s ease-in-out;
  overflow:hidden;
  opacity:1;
  width:300px;
  height:300px;
  background-size:auto 100%;
  background-position:center center;
  border-radius:15%;
  float:left;
  margin:10px;
}

.image {
  font-family: 'hypatia-sans-pro'!important;
  transition: all 0.75s ease-in-out;overflow:hidden;
  z-index:1;
}

.title {
  font-family: 'hypatia-sans-pro'!important;
  transition: all 0.35s ease-in-out;overflow:hidden;
  width: 100%; float:left;height:25px;margin-top:250px;text-align:center;color:white;background-color:#13416bb5;
}

.subtitle {
  font-size: 14.5px;
  font-family: 'hypatia-sans-pro'!important;
  transition: all 0.35s ease-in-out;overflow:hidden;
  width: 100%; border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;float:left;height:25px;text-align:center;color:white;background-color:#f39112e0;
}

.title .p {
  font-family: 'hypatia-sans-pro'!important;
  transition: all 0.65s ease-in-out;overflow:hidden;
  font-size: 34px; line-height: 39px;cursor:pointer;
  opacity:0;
  margin-top:0px;
}
.subtitle .p {
  font-family: 'hypatia-sans-pro'!important;
  transition: all 0.65s ease-in-out;overflow:hidden;
  font-size: 34px; line-height: 39px;cursor:pointer;
  opacity:0;
  margin-top:0px;
}

.ccc{
  font-family: 'hypatia-sans-pro'!important;
  width: 100%; position: relative; text-align: center; opacity:0;
  transition: all 0.65s ease-in-out;overflow:hidden;
}


.rainbow{
  font-family: 'hypatia-sans-pro'!important;
    position: relative;
    border-radius: 50%;
    opacity:0;
    transition: all 1s ease-in-out;
    z-index:-1;
}

.rainbowx{
  font-family: 'hypatia-sans-pro'!important;
    position: relative;
    border-radius: 50%;
    opacity:0;
    transition: all 1s ease-in-out;
    z-index:-1;
}

#rainbow1{
  font-family: 'hypatia-sans-pro'!important;
  width: 156px;
  margin-left: 21px;
  margin-top: 0px;
  transform: rotate(316deg);
}

#rainbow2{
  font-family: 'hypatia-sans-pro'!important;
  width: 156px;
  margin-left: 21px;
  margin-top: 0px;
  transform: rotate(316deg);
}

#rainbow3{
  font-family: 'hypatia-sans-pro'!important;
  width: 146px;
  margin-left: 55px;
  margin-top: -4px;
  transform: rotate(325deg);
}

#rainbow4{
  font-family: 'hypatia-sans-pro'!important;
  width: 156px;
  margin-left: 30px;
  margin-top: 0px;
  transform: rotate(320deg);
}

#rainbow5{
  font-family: 'hypatia-sans-pro'!important;
  width: 156px;
  margin-left: 50px;
  margin-top: -4px;
  transform: rotate(325deg);
}

#rainbow6{
  font-family: 'hypatia-sans-pro'!important;
  width: 156px;
  margin-left: 21px;
  margin-top: 0px;
  transform: rotate(316deg);
}

#rainbow7{
  font-family: 'hypatia-sans-pro'!important;
  width: 156px;
  margin-left: 21px;
  margin-top: 0px;
  transform: rotate(316deg);
}

#rainbow8{
  font-family: 'hypatia-sans-pro'!important;
  width: 156px;
  margin-left: 21px;
  margin-top: 0px;
  transform: rotate(316deg);
}

#rainbow9{
  font-family: 'hypatia-sans-pro'!important;
  width: 146px;
  margin-left: 55px;
  margin-top: -4px;
  transform: rotate(325deg);
}


.rainbow span {
  font: 26px MonoSpace;
  height: 160px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  pointer-events:none;
}

#rainbow1 span {
  font: 26px MonoSpace;
  height: 156px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  pointer-events:none;
}

#rainbow2 span {
  font: 26px MonoSpace;
  height: 156px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  pointer-events:none;
}

#rainbow3 span {
  font: 26px MonoSpace;
  height: 146px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  pointer-events:none;
}

#rainbow4 span {
  font: 26px MonoSpace;
  height: 156px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  pointer-events:none;
}

#rainbow5 span {
  font: 26px MonoSpace;
  height: 156px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  pointer-events:none;
}

#rainbow6 span {
  font: 26px MonoSpace;
  height: 156px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  pointer-events:none;
}

#rainbow7 span {
  font: 26px MonoSpace;
  height: 156px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  pointer-events:none;
}

#rainbow8 span {
  font: 26px MonoSpace;
  height: 156px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  pointer-events:none;
}

#rainbow9 span {
  font: 26px MonoSpace;
  height: 146px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  pointer-events:none;
}


.char1b {
  transform: rotate(215deg);
}

.char2b {
  transform: rotate(207deg);
}

.char3b {
  transform: rotate(199deg);
}

.char1 {
  transform: rotate(6deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

.char13 {
  transform: rotate(78deg);
}

.char14 {
  transform: rotate(84deg);
}

.char15 {
  transform: rotate(90deg);
}

.char16 {
  transform: rotate(96deg);
}

.char17 {
  transform: rotate(102deg);
}

.char18 {
  transform: rotate(108deg);
}

.char19 {
  transform: rotate(114deg);
}

.char20 {
  transform: rotate(120deg);
}

.char21 {
  transform: rotate(126deg);
}

.char22 {
  transform: rotate(132deg);
}

.char23 {
  transform: rotate(138deg);
}

.char24 {
  transform: rotate(144deg);
}
  



h1, h2, h3, h4, h5, h6, a {
  font-family: 'hypatia-sans-pro'!important;
}

img {
    width:100%;
    height:auto;
    border-radius: 12px 12px 0px 0px;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    width: 75%;
    padding-top: 12.5%;
    border-radius: 0px;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    max-width:1100px;
    overflow:hidden;
  }

  .flex-items{
    cursor:pointer;
    margin:1%;
    width:98%;
    overflow:hidden;
  }

  .flex-items > p:nth-child(2) {
    font-size:22px!important;
    margin:0px;
    padding:0px;
    margin-left:5px;
    color:#103a60;
    font-family: 'hypatia-sans-pro'!important;
    width:60%;
  }

  .flex-items > p:nth-child(3) {
    font-size:14px!important;
    margin:0px;
    padding:0px;
    margin-left:5px;
    color:#103a60;
    font-family: 'Lato'!important;
    width:60%;
  }

  .flex-items > p:nth-child(4) {
    font-size:14px!important;
    margin:0px;
    padding:0px;
    margin-left:5px;
    color:#f29114;
    text-decoration:underline;
    font-family: 'Lato'!important;
    width:60%;
  }

  .flex-items > p:nth-child(5) {
    font-size:14px!important;
    margin:0px;
    padding:0px;
    margin-left:5px;
    margin-top:10px;
    color:black;
    width:100%;
    padding-right:5px;
    height:0px;
    float:left;
    overflow:auto;
    transition: all 0.5s ease-in-out;
    font-family: 'Lato'!important;
  }
  
  .flex-items:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items:nth-child(4) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items:nth-child(5) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items:nth-child(6) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items:nth-child(7) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items:nth-child(8) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items:nth-child(9) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

/* Background images for all 9 panels */
#image1 { background-image: url('images/panel1.jpg'); }
#image1[data-state="hover"] { background-image: url('images/panel1-hover.jpg'); }
#image2 { background-image: url('images/panel2.jpg'); }
#image2[data-state="hover"] { background-image: url('images/panel2-hover.jpg'); }
#image3 { background-image: url('images/panel3.jpg'); }
#image3[data-state="hover"] { background-image: url('images/panel3-hover.jpg'); }
#image4 { background-image: url('images/panel4.jpg'); }
#image4[data-state="hover"] { background-image: url('images/panel4-hover.jpg'); }
#image5 { background-image: url('images/panel5.jpg'); }
#image5[data-state="hover"] { background-image: url('images/panel5-hover.jpg'); }
#image6 { background-image: url('images/panel6.jpg'); }
#image6[data-state="hover"] { background-image: url('images/panel6-hover.jpg'); }
#image7 { background-image: url('images/panel7.jpg'); }
#image7[data-state="hover"] { background-image: url('images/panel7-hover.jpg'); }
#image8 { background-image: url('images/panel8.jpg'); }
#image8[data-state="hover"] { background-image: url('images/panel8-hover.jpg'); }
#image9 { background-image: url('images/panel9.jpg'); }
#image9[data-state="hover"] { background-image: url('images/panel9-hover.jpg'); }

/* Hidden element class */
.hidden-panel { display: none; width: 0px; }

/* CSP-compliant hover states - NO inline styles */
#photos.hovering .image:not(.hover-active) {
    border-radius: 15% !important;
    transition: all 0.75s ease-in-out;
}

.image.hover-active {
    border-radius: 100% !important;
    opacity: 1 !important;
    height: 250px !important;
    width: 250px !important;
    margin: 35px !important;
    margin-top: 35px !important;
    margin-bottom: 0px !important;
    transition: all 0.75s ease-in-out;
}

.image.hover-active > .title {
    margin-left: 100px !important;
    margin-top: 170px !important;
    margin-right: 5px !important;
    border-radius: 15% !important;
    width: 70px !important;
    height: 70px !important;
    transition: all 0.75s ease-in-out;
}

.image.hover-active > .title > p:first-child {
    display: none !important;
}

.image.hover-active > .subtitle > p {
    display: none !important;
}

.image.hover-active > .subtitle {
    opacity: 0 !important;
}

.opacity-1 { opacity: 1 !important; transition: all 0.65s ease-in-out; }
.opacity-0 { opacity: 0 !important; transition: all 0.65s ease-in-out; }

/* CSP Compliance - Hover State Classes for Panel3 */

/* Image border radius states */
.image-border-radius-15 {
    border-radius: 15% !important;
}

.image-border-radius-100 {
    border-radius: 100% !important;
}

/* Image hover state - Panel3 variant (250px) */
.image-hover-active-250 {
    border-radius: 100% !important;
    opacity: 1 !important;
    height: 250px !important;
    width: 250px !important;
    margin: 35px !important;
    margin-top: 35px !important;
    margin-bottom: 0px !important;
}

/* Child element display states */
.child-hidden {
    display: none !important;
    transition: all 0.35s ease-in-out;
}

.child-visible {
    display: block !important;
    transition: all 0.35s ease-in-out;
}

/* Opacity states */
.opacity-0 {
    opacity: 0 !important;
    transition: all 0.65s ease-in-out;
}

.opacity-1 {
    opacity: 1 !important;
    transition: all 0.65s ease-in-out;
}

/* Nested child positioning for hover state - Panel3 variant */
.nested-child-hover-panel3 {
    margin-left: 100px !important;
    margin-top: 180px !important;
    margin-right: 5px !important;
    border-radius: 15% !important;
    width: 50px !important;
    height: 50px !important;
}

/* Reset styles for mouseout */
.image-reset {
    border-radius: 15%;
    opacity: 1;
    height: auto;
    width: auto;
    margin: auto;
    transition: all 0.75s ease-in-out;
}

.nested-child-reset {
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    border-radius: 0;
    width: auto;
    height: auto;
    transition: all 0.75s ease-in-out;
}