@charset "UTF-8";

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideshow {
  0% {
    background-image: url("https://avviohosting.com/abandonment/castle-leslie/slideshow_1.jpg");
    transform: rotate(3deg);
  }
  24.9% {
    background-image: url("https://avviohosting.com/abandonment/castle-leslie/slideshow_1.jpg");
    transform: rotate(3deg);
  }
  25% {
    background-image: url("https://avviohosting.com/abandonment/castle-leslie/slideshow_2.jpg");
    transform: rotate(-3deg);
  }
  49.9% {
    background-image: url("https://avviohosting.com/abandonment/castle-leslie/slideshow_2.jpg");
    transform: rotate(-3deg);
  }
  50% {
    background-image: url("https://avviohosting.com/abandonment/castle-leslie/slideshow_3.jpg");
    transform: rotate(3deg);
  }
  74.9% {
    background-image: url("https://avviohosting.com/abandonment/castle-leslie/slideshow_3.jpg");
    transform: rotate(3deg);
  }
  75% {
    background-image: url("https://avviohosting.com/abandonment/castle-leslie/slideshow_4.jpg");
    transform: rotate(-3deg);
  }
  100% {
    background-image: url("https://avviohosting.com/abandonment/castle-leslie/slideshow_4.jpg");
    transform: rotate(-3deg);
  }  
}

@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");

@font-face {
  font-family: "Miller Display";
  src:
    url("https://www.castleleslie.com/wp-content/themes/avviowpcms2-castleleslie/assets/webfonts/miller-display-webfont.eot");
  src:
    url("https://www.castleleslie.com/wp-content/themes/avviowpcms2-castleleslie/assets/webfonts/miller-display-webfont.eot?#iefix") format("embedded-opentype"),
    url("https://www.castleleslie.com/wp-content/themes/avviowpcms2-castleleslie/assets/webfonts/miller-display-webfont.woff") format("woff"),
    url("https://www.castleleslie.com/wp-content/themes/avviowpcms2-castleleslie/assets/webfonts/miller-display-webfont.ttf") format("truetype"),
    url("https://www.castleleslie.com/wp-content/themes/avviowpcms2-castleleslie/assets/webfonts/miller-display-webfont.svg#miller-display-webfont") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Miller Display Italic";
  src:
    url("https://www.castleleslie.com/wp-content/themes/avviowpcms2-castleleslie/assets/webfonts/miller_display_italic-webfont.eot");
  src:
    url("https://www.castleleslie.com/wp-content/themes/avviowpcms2-castleleslie/assets/webfonts/miller_display_italic-webfont.eot?#iefix") format("embedded-opentype"),
    url("https://www.castleleslie.com/wp-content/themes/avviowpcms2-castleleslie/assets/webfonts/miller_display_italic-webfont.woff") format("woff"),
    url("https://www.castleleslie.com/wp-content/themes/avviowpcms2-castleleslie/assets/webfonts/miller_display_italic-webfont.ttf") format("truetype"),
    url("https://www.castleleslie.com/wp-content/themes/avviowpcms2-castleleslie/assets/webfonts/miller_display_italic-webfont.svg#miller_display_italic-webfont") format("svg");
  font-weight: normal;
  font-style: italic;
}

:root {
  --border-radius-1x: 0px;
  
  --custom-transition: all 0.8s ease;
}

@media screen {
  
  /* #ipulse {
    padding-top: 5px;
    border-top: 3px solid var(--brand-color);
  }
  #mainarea {
    padding-top: 10px;
    border-top: 1px solid var(--brand-color);
  } */
  
  .header a i,
  .footer a i {
    margin-right: 0px;
  }
  
  /* .main-be-area {
    background-color: #5F604D;
    background-position: center;
    background-repeat: repeat;
    background-size: auto;
  } */
  
  .button--branded {
    color: #ECEDE7;
    
    letter-spacing: 0.195em;
    text-transform: uppercase;
    
    border-color: var(--brand-color);
    
    transition: var(--custom-transition);
  }
  
  .button--branded:hover {
    background-color: transparent;
    color: var(--brand-color);
    
    border-color: var(--brand-color);
  }
  
  /* .content {
    position: relative;
  }
  
  .content::before {
    content: "";
    position: absolute;
    
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: auto;
    
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
  }
  
  #ipulse {
    position: relative;
    z-index: 1;
  } */
  
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding-block: 0px;
    border-bottom: 1px solid var(--border-default);
  }
  
  .header .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    align-items: center;
    
    gap: 15px;
    width: 100%;
  }
  
  .header .invisible-flex-item {
    display: flex;
    align-self: stretch;
    
    width: 150px;
    height: 100%;
  }
  
  .header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding-block: 15px;
    padding-inline: 30px;
  }
  
  .header .logo a svg {
    display: block;
    
    width: 96px;
    height: auto;
    
    fill: #5F604D;
    
    transition: var(--custom-transition);
  }
  
  .header .logo a:hover svg {
    fill: var(--brand-color);
  }
  
  .header .backtosite {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
  }
  
  .header .backtosite a {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    
    background-color: #3E4B12;
    color: #FFFFFF;
    
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2.535px;
    line-height: 19.5px;
    text-align: center;
    text-transform: uppercase;
    
    min-width: 160px;
    padding-block: calc((44px - 19.5px) / 2);
    padding-inline: 15px;
    border-left: 1px solid #3E4B12;
    border-bottom: 1px solid #3E4B12;
    
    transition: var(--custom-transition);
  }
  
  .header .backtosite a:hover {
    color: #3E4B12;
    background-color: #FFFFFF;
  }
  
  h1, h2, h3, h4, h5, h6,
  .header1, .header2, .header3, .header4, .header5, .header6,
  .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 {
    font-family: "Miller Display", "Georgia", georgia, serif;
  }
  
  /* --- Abandonment message --- */
  #exitIntentWrapper { /* Affects the entire abandonment message, incld the shadowy backgroup that overlays the entire viewport */
    font-family: "Josefin Sans", sans-serif;
    transition: all 1s ease-in;
    animation: fadein 5s;
  }
  
  #exitIntentPopupContainer { /* Stuff that only affects the rectangle that the message is displayed on */
    background-color: #ECEDE7;
    box-shadow: none;
    border-radius: 3px;
    
    width: 830px;
    height: 280px;
    /*    margin-top: 100px;*/
    padding-inline: 10px;
    padding-bottom: 0px;
  }
  
  #exitIntentHeading { /* Hide the abandonment title */
    display: none;
  }



  #allContent { /* Flex as row so images for slideshow (::after) are in row */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  #allContent #exitIntentText { /* text content, want it in column */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
  }
  
  #allContent .exitIntentDesc img { /* Abndmnt message header logo */
    width: 60px; 
  }

  p.term-text {
    padding: 6px 12px;
    color: #494a3a;
    font-size: 12px !important;
    margin-top: -10px;
    margin-bottom: 20px;
  }
  
  .mediumFont .exitIntentSpacing { /* 30px margin being applied to all text content, not sure of source so trying to remove. */
    margin: 0px !important;
  }
  
  #allContent::after { /* Flexbox test element. Will endeavour to fill this with the image roll, I think. Animate the background image and the transform */
    content: "";
    border-style: solid;
    border-width: 10px;
    border-color: #FFFFFF;
    box-shadow: 10px 10px 10px -10px #000000;
    width: 350px; /* Setting this at 510px computes at 350px. No idea where the discrepoency is coming from. */
    height: 290px; 
    
    background-image: url(https://avviohosting.com/abandonment/castle-leslie/slideshow_1.jpg); /* Animate this */
    background-size: cover;
    transform: rotate(3deg); /* Animate this */
    
    animation: 14s slideshow infinite;
  }
   
  #exitIntentText p { /* All p elements, the phrase "Your dream escape is waiting" in this context */ 
    font-size: 20px;
    font-weight: 300;
  }
  
  #allContent h1 {
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 400;
  }

  p#exitIntentAction {
    padding: 10px 60px;
    background-color: #494A3A;
    color: #ECEDE7;
    border: 1px solid #494A3A;
    transition: var(--custom-transition);
  }

  p#exitIntentAction:hover {
    background-color: #ECEDE7;
    color:  #494A3A;
    border: 1px solid #494A3A;
  }

  p#exitIntentAction:hover a {
    color:  #494A3A;
  }

  p#exitIntentAction a {
    color: #ECEDE7;
  }

  p#exitIntentAction a:hover {
    color: #494A3A;
  }
  
  #exitIntentCtaButton {
    color: #ECEDE7;
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    text-transform: capitalize; 
    
    width: 258px;
    /*    height: 20px;*/
    padding: 11px;
    
    transition: var(--custom-transition);
  }
  
  #exitIntentCtaButton:hover {
    color: #494A3A;
    background-color: #ECEDE7;
  }
  
  .footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    background-color: #282820;
    color: #ECEDE7;
    
    font-weight: 300;
    text-align: center;
    
    gap: 20px;
  }
  
  .footer .links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
    font-size: 13px;
    letter-spacing: 2.535px;
    line-height: 19.5px;
    
    column-gap: 30px;
    row-gap: 10px;
    width: 100%;
    padding-block: 13px;
    padding-inline: 15px;
    border-bottom: 1px solid #5F604D;
  }
  
  .footer .links a {
    color: #ECEDE7;
    
    border-bottom: 1px solid transparent;
    
    transition: var(--custom-transition);
  }
  
  .footer .links a:hover {
    border-color: #ECEDE7;
  }
  
  .footer .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    font-size: 12px;
    letter-spacing: 1.08px;
    line-height: 18px;
    
    gap: 20px;
    padding-inline: 35px;
  }
  
  .footer .address {
    text-align: center;
  }
  
  .footer .socials {
    display: flex;
    justify-content: center;
    align-items: center;
    
    gap: 14.5px;
  }
  
  .footer .socials a {
    font-size: 12px;
    padding: 3px;
    opacity: 1;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    color: #ECEDE7;
    
    transition: var(--custom-transition);
  }

  /*.footer .socials a svg {  }*/

  .footer .socials a svg path {
    fill: #ECEDE7;
    opacity: 1;
    transition: var(--custom-transition);
  }
  
  .footer .socials a:hover {
    opacity: 50%;
  }

  .footer .socials a:hover svg path {
    opacity: 50%;
    transition: var(--custom-transition);
  }
  
  .footer .contact {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    gap: 10px;
    padding-block: 10px;
  }
  
  .footer .contact p {
    margin-block: 0px;
  }
  
  .footer .contact a {
    color: #ECEDE7;
    
    border-bottom: 1px solid transparent;
    
    transition: var(--custom-transition);
  }
  
  .footer .contact a:hover {
    border-color: #ECEDE7;
  }
  
  .footer small {
    font-size: 10px;
    letter-spacing: 0.9px;
    line-height: 15px;
    text-align: center;
    
    padding-top: 10px;
    padding-bottom: 60px;
  }
  
  .footer small a {
    color: #ECEDE7;
    
    border-bottom: 1px solid transparent;
    
    transition: var(--custom-transition);
  }
  
  .footer small a:hover {
    border-color: #ECEDE7;
  }
  
}







/* ----- Tablet specific ----- */
@media screen and (max-width: 999px) {
  
  .header .container {
    grid-template-columns: repeat(2, auto);
  }
  
  .header .invisible-flex-item {
    display: none;
  }
  
  #exitIntentPopupContainer {
    width: 75%;
    height: 60%;
    padding-inline: 10px;
    padding-bottom: 0px;
    /*    margin-top: 100px;*/
  }
  
  #allContent #exitIntentText {
    width: 75%;
  }
  
  #allContent {
    flex-direction: column;
    
  /*    margin-top: 100px;*/
  }
  
  #allContent::after {
    margin-block: 30px;
  }
  
}

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

  .exitIntentContent {
    align-items: flex-start;
  }

  #allContent h1 {
    font-size: 26px;
  }

}



/* ----- Mobile specific ----- */
@media screen and (max-width: 499px) {
  
  .header .container {
    display: flex;
    justify-content: center;
  }
  
  .header .backtosite {
    display: none;
  }
  
  .header .logo {
    padding-inline: 0px;
  }

  #allContent::after {
    width: 100%;
  }
  
  #exitIntentCtaButton {
    font-size: 0.75em;
    
    /*    height: 20px;*/
    width: 100%;
    max-width: 258px;
  }

  p#exitIntentAction {
    padding: 10px 30px;
  }
  
}