@charset "utf-8";
/* CSS Document */





html {font-size: 100%; width: 100%; height: 100%; margin: 0px; }
body {font-size: 18px;}
body {font-family: "work sans", sans-serif;
font-weight: 400;
font-style: normal;}


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

body {
  min-height: 100vh; padding-bottom: 100px; padding: 18px;
}

/* rows-container */
.rows-container {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 95vh;
  margin-bottom: 200px;
  justify-content: flex-end; /* ⬅️ pushes .images to the right */
}

.rows-container.very-last {margin-bottom: 0px !important;}

@media screen and (max-width: 1080px) {
  .rows-container { margin-bottom: 250px}
  .rows-container.very-last {margin-bottom: 150px !important;}
}

/* Left letters column */
.letters-container {
  position: fixed;
  left: 5px;
  bottom: 76px;
  width: 45%;
  max-width: 800px;
  height: 79vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);  /* 5 columns */
  grid-template-rows: repeat(3, 1fr);     /* 3 rows */
  gap: 8px;                               /* optional spacing between letters */
  /*background: red;*/                        /* for testing layout, remove later */
  padding: 0 10px 0 0;
  z-index: 999;
}

/* Individual letters */
.letter {
  display: flex;               /* use flex to center letter image */
  align-items: flex-end;       /* keep image bottom-aligned */
  justify-content: left;     /* center image horizontally */
  width: 100%;                 /* span fills its grid cell */
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.letters-container .letter:empty {
  flex: 0 0 50%; /* 50% of a normal grid cell */
}


/* Letter images */
.letter img {
  display: block;       /* removes inline spacing */
  height: 24vh;         /* fixed height for all letters */
  width: auto;          /* auto width preserves aspect ratio */
}

/* Scale letter images below 1600px */
@media (max-width: 1600px) {
  .letters-container .letter img {
    height: 21vh;}
  .letters-container {height:50vh;bottom: 200px;}
}

/* Scale letter images below 1280px */
@media (max-width: 1300px) {
  .letters-container .letter img {
    height: 12vw;}
  .letters-container {height:55vh;}
  
}




/* Right images column */
.images {
  width: 50%;
  height: 100vh;
  max-height: 95vh;
  overflow: hidden;
  position: relative;
}

.images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%; /* align image to the right */
}

 /*-----porchester-logo-----*/

.porchester-logo {position:fixed; z-index: 999; top: 18px; left: 18px}
.porchester-logo img {width: 190px}

/*----call to action----*/

.call-to-action {position:fixed; bottom: 24px; left: 14px; font-size: 17px; line-height: 1.4}

@media screen and (min-width: 1800px) {
  .call-to-action span:before {content: " | ";}
}

@media screen and (max-width: 1800px) {
  .call-to-action {bottom: 14px;}
  .call-to-action span {display:block;}
}

.call-to-action p a, .call-to-action p a:visited {color:inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,1); position:relative; display:inline-block;}
.call-to-action p a:hover {border-bottom: 1px solid rgba(0,0,0,0); }
    
/*just call to action*/
@media screen and (max-width: 1000px) {
    .call-to-action {width: 100%; background-color: #fff; z-index: +1; bottom: 0; left: 0; padding: 6px 12px 8px 10px;}
}

/*below 1080*/
@media screen and (max-width: 1079px) {
  body {padding: 92px 12px;}
  .porchester-logo {top: 18px; left: 12px;}
  .letters-container {width:100%; max-width:400px;z-index: +1; left: 9px; gap: 0; height: 300px; bottom: 80px}
  .letter {width: 70px; /*background:yellow;*/;margin-bottom: 1vh}
  .letter img {height:100px !important}
  .images {width:100%; max-height: 55vh;}

}

/*below 740*/

@media screen and (max-width: 740px) {
  body {padding: 72px 12px;}
 .porchester-logo img {width: 130px;}
  .letters-container {width:100%; max-width:300px;z-index: +1; left: 4px; gap: 0; height: 300px; bottom: 20px}
  .letter {width: 60px; /*background:yellow;*/;margin-bottom: 1vh}
  .letter img {height:80px !important}
}

@media screen and (max-width: 600px) {
    .letters-container {height: 280px; max-width: 270px; bottom: 24px; left: 6px;}
    .letter {width: 50px;}
    .letter img {height:70px !important}

    .call-to-action {font-size: 2.85vw; line-height: 1.4;}
    .images {width:100%; max-height: 52vh;}
}









/*------------------------Makeover class for scroll fade---------------------*/


    .scrollfade {
      opacity: 0;
      -moz-transition: all 1800ms ease-out;

      -webkit-transition: all 1800ms ease-out;
      -o-transition: all 1800ms ease-out;
      transition: all 1800ms ease-out;
      /*transform:translateY(200px);
        margin-top: 200px;*/

      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .in-view {
      opacity: 1;
        /*transform:translateY(0px);
        margin-top: 0;*/}
        
/*------------------------Makeover class for scroll fade ENDS---------------------*/
        

/*ftcrm-success-screen*/
.ftcrm-form-wrap {}
.ftcrm-success-screen {display:block !important;}

.ftcrm-success-screen h2 { position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 100%; margin: auto;}
.ftcrm-success-screen p { position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 100%; margin: 3em auto;}

@media screen and (max-width: 900px) {
  .ftcrm-success-screen p {margin: 5em auto 0; max-width: 80%;}
}


/*fonts*/

@font-face {
    font-family: 'ABCBingo';
    src: url('/webfonts/ABCBingo-Bold.woff2') format('woff2'),
         url('/webfonts/ABCBingo-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/*title*/
.ftcrm-popup-title h2, .ftcrm-success-screen h2 {font-family: 'ABCBingo', Arial, sans-serif !important;}

/*slimmer inputs*/
.ftcrm-field input, .ftcrm-field select {padding: 1em 1em !important; height: 3em !important; line-height: 1; font-size: 80% !important}


/*boxzilla padding*/
.boxzilla-content {
  padding: 24px 24px 24px !important;
}

@media screen and (max-width: 900px) {
  .boxzilla {padding: 0px !important}
}

/*buttons*/

.ftcrm-time-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1em !important;
  margin-top: 14px !important;
position:relative;
}



/*section title*/
.ftcrm-section-title {font-size: 80% !important}

.ftcrm-grid-gap-top {
  margin-top: 18px !important;
}

/*overlay*/

#boxzilla-overlay, .boxzilla-overlay {
  position: fixed;
  background: rgba(255, 255, 255, 0.8 ) !important;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10000;
}


/*////////////privacy page////////////*/

.page-template-pow-privacy #primary {padding-top: 100px; padding-bottom: 300px; width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; font-size: 90%;}

.page-template-pow-privacy h1 {font-size: 120%; line-height: 1.1; margin: 0 0 2em 0; font-weight: 600;}
.page-template-pow-privacy h2 {font-size: 100%; font-weight: 600; margin: 2em 0 1em 0 !important;}
.page-template-pow-privacy p {line-height: 1.34; margin: 0 0 1em;}

.page-template-pow-privacy p a, .page-template-pow-privacy p a:visited, .page-template-pow-privacy p a:hover {color: inherit}
.page-template-pow-privacy p a:hover {text-decoration: none;}

.page-template-pow-privacy ul {list-style:none outside; position:relative}

.page-template-pow-privacy li {position:relative;line-height:1.4;  margin:0 0 8px 18px}

.page-template-pow-privacy li:before {
  display:inline-block;
  width:5px;
  height:5px;
  content:"";
  position:absolute;
  left:-1em;
  top:.6em;
  background:rgba(0,0,0,1)
}

.page-template-pow-privacy .back-to-site {margin-top: 6em; display:inline-block;}


.page-template-pow-privacy .call-to-action {display:none;}

/*////////////privacy page ENDS////////////*/