@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v36/1Pt_g8zYS_SKggPNyCgSQamb1W0lwk4S4WjMPrQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v36/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaooCP.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v36/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvoooCP.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v36/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVs9pYCP.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v36/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVtzpYCP.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v39/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_k-UbtY.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v39/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_gGUbtY.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiukDQ.ttf) format('truetype');
}
/* COLOURS */
/* FONT */
html,
button,
input,
select,
textarea,
.pure-g [class*="pure-u"] {
  font-family: 'Raleway', sans-serif;
}
html {
  background-color: #fff;
  scroll-behavior: smooth;
  position: relative;
  height: 100vh;
  font-size: 1.2em;
}
body {
  min-height: 100vh;
}
::selection {
  background: #00ffb2;
  color: #262834;
}
section {
  padding: 3em 0 4em;
}
footer {
  background: #262834;
  position: absolute;
  width: 100%;
  color: #fff;
  text-align: center;
}
h1,
h2,
h3 {
  font-family: 'Playfair Display', serif !important;
  font-style: italic;
  letter-spacing: normal;
  line-height: 1.15;
}
h1 {
  font-size: 2.8em;
  font-weight: 900;
  margin: 32px 0;
}
h1 .box {
  padding: 1em;
}
@media screen and (max-width: 64em) {
  h1 {
    font-size: 2em;
  }
}
h2 {
  font-size: 2em;
  font-weight: 700;
  color: #262834;
  margin-bottom: 0.5em;
  margin-top: 0;
}
@media screen and (max-width: 64em) {
  h2 {
    font-size: 1.75em;
  }
}
h3 {
  font-size: 1.5em;
  font-weight: 700;
  font-style: normal;
  color: #fd5b65;
  margin: 0.3em 0 0.5em 0;
}
@media screen and (max-width: 64em) {
  h3 {
    font-size: 1.3em;
  }
}
a:link,
a:visited,
a:link > p {
  color: #0051ff;
  text-decoration: none;
}
a:link .link-dark,
a:visited .link-dark,
a:link > p .link-dark {
  color: #00ffb2;
}
a:link h3,
a:visited h3,
a:link > p h3 {
  text-decoration: underline #0051ff;
}
a:hover,
a:hover > p {
  color: #0051ff;
  font-weight: bold;
}
a:hover .link-dark,
a:hover > p .link-dark {
  color: #fff;
}
a:hover h3,
a:hover > p h3 {
  text-decoration: underline #00ffb2;
}
.button,
button {
  position: relative;
  margin-top: 1em;
  margin-bottom: 1.5em !important;
  background: none;
  padding: 10px;
  border: none 5px;
  font-weight: 700;
  cursor: pointer;
}
.button::after,
button::after {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  content: '';
  width: 50%;
  height: 100%;
  background: #00ffb2;
  position: absolute;
  top: 0;
  left: 0;
}
.button span,
button span {
  position: relative;
  z-index: 1;
  color: #0051ff;
  transition: 0.6s;
}
.button:hover::after,
button:hover::after {
  background: #0051ff;
  width: 100%;
}
.button:hover span,
button:hover span {
  color: #00ffb2;
}
.btn-on-dark::after {
  background: #0051ff;
}
.btn-on-dark span {
  color: #00ffb2 !important;
}
.btn-on-dark:hover::after {
  background: #00ffb2;
}
.btn-on-dark:hover span {
  color: #0051ff !important;
}
/* MOBILE */
@media screen and (max-width: 64em) {
  button {
    position: relative;
  }
  .mob-btn {
    display: block;
    text-align: center;
    margin-top: 1em 0;
  }
  ul.resp-list li {
    display: block;
    height: 3em;
  }
  .mob-hidden {
    display: none !important;
  }
}
#terms {
  font-size: 14px;
}
ol {
  list-style-position: inside;
  padding: 0;
  margin: 0;
}
ol h3 {
  display: inline;
}
ol li {
  margin-bottom: 20px;
  padding: 1em;
  background-color: #f0e6d4;
}
ol {
  margin: 0;
  padding: 1em 2em;
  list-style-position: outside;
}
ol li {
  padding: 0;
}
ul {
  list-style: disc outside;
  padding-inline-start: 1em;
  margin: 0;
}
ul li {
  line-height: 1.25;
}
ul li::marker {
  color: #fd5b65;
}
ul li.pop::marker {
  color: #00ffb2;
}
ul li.pop-dark::marker {
  color: #0051ff;
}
ul.compare {
  list-style: circle outside;
  list-style-type: "\2714  ";
}
ul.compare li.uncheck {
  list-style-type: "\2716  ";
}
ul.compare li.uncheck::marker {
  color: #0051ff;
}
@media screen and (min-width: 48em) {
  ul.compare {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
}
/* * -- MENU STYLES -- */
nav {
  padding: 0.5em;
  text-align: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background: #262834;
  font-size: 1em;
  font-weight: bold;
}
nav li,
nav .responsive {
  display: inline-block;
  margin: 0.5em;
}
nav #ico-burger {
  display: none;
  font-size: 1.1em;
}
nav .menu-logo {
  height: 80px;
  margin-left: 0;
}
@media screen and (max-width: 48em) {
  nav {
    font-size: 1.1em;
    padding: 1em;
  }
  nav li,
  nav #ico-burger {
    display: block;
  }
  nav .responsive {
    display: none;
  }
  nav .menu-logo {
    width: 100%;
    margin-bottom: 1em;
  }
}
.home-menu .pure-menu-heading {
  color: #fff;
  font-weight: 400;
  font-size: 2em;
  height: 80px;
}
.home-menu a {
  color: #00ffb2;
}
.home-menu li a:hover,
.home-menu li a:focus {
  background: none;
  border: none;
  color: #fff;
}
a.active {
  color: #fff !important;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/* When the screen is less than 64em pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 48em) {
  .topnav a {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 48em) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    display: block !important;
  }
}
/*  -- INDEX ANIMATION CONTAINER -- */
.splash-container {
  height: auto;
  background-color: #262834;
  padding-bottom: 1.5em;
}
@media screen and (max-width: 48em) {
  .splash-container {
    padding-bottom: 0.5em;
  }
}
.splash-link a:link,
.splash-link a:visited {
  color: #00ffb2;
  font-size: 21px;
  padding: 8px;
  background-color: #0051ff;
  transition: 0.4s;
}
.splash-link a:hover {
  color: #0051ff;
  background-color: #00ffb2;
}
/* * -- MAIN MENU  -- */
#animated-logo {
  background-size: contain;
  display: block;
  margin: 0 auto;
  height: 20vh;
}
@media screen and (max-width: 64em) {
  #animated-logo {
    height: 10vh;
  }
}
#about {
  background-color: #fd5b65;
  color: #262834;
  padding: 2em 1em 3em;
}
#about h1 {
  color: white;
}
@media screen and (max-width: 64em) {
  #about {
    padding: 1em 1em 1.5em;
  }
}
#about p {
  font-weight: 500;
}
#contact {
  background-color: #00ffb2;
  padding: 20px;
  display: block;
}
.big-button {
  display: block;
  border: 2px solid #0051ff;
  transition: 0.8s;
  color: #0051ff;
}
.big-button:hover {
  background-color: #0051ff;
  color: #00ffb2;
}
/* -- Home sections  -- */
.title {
  min-height: 50vh;
  background: no-repeat fixed center;
  background-size: cover;
  position: relative;
  top: -3em;
}
.title h1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 7em;
  padding-bottom: 5px;
}
@media screen and (max-width: 64em) {
  .title {
    background-attachment: scroll;
  }
  .title h1 {
    top: 0;
    margin-top: 50%;
  }
}
/*  * -- pop MENU  --  */
ul.resp-list {
  list-style: none;
}
ul.resp-list > li {
  display: inline;
}
/* STYLES */
.caps {
  text-transform: uppercase;
}
.bg-dark {
  background-color: #262834;
  color: #fff;
}
.bg-dark h1,
.bg-dark h2 {
  color: #f0e6d4;
}
.bg-dark h3 {
  color: #fd5b65;
}
.bg-cream {
  background-color: #f0e6d4;
}
.bg-cream h1,
.bg-cream h3 {
  color: #262834;
}
.bg-cream h2 {
  color: #fd5b65;
}
.bg-cream p {
  color: #262834;
}
.bg-primary {
  background-color: #fd5b65;
  color: #fff;
}
.bg-primary h1,
.bg-primary h2,
.bg-primary h3 {
  color: white;
}
.primary {
  color: #fd5b65 !important;
}
.white {
  color: #fff !important;
}
.dark {
  color: #262834 !important;
}
.light {
  color: #f0e6d4 !important;
}
.highlight {
  color: #00ffb2 !important;
}
.pop {
  color: #0051ff;
}
.bold {
  font-weight: bold;
}
.box {
  padding: 1.15em;
  /*border:1px solid black;*/
}
.bigbox {
  padding: 5em;
}
@media screen and (max-width: 64em) {
  .bigbox {
    padding: 2em;
  }
}
.border {
  border: #262834 1px;
}
.center {
  text-align: center;
  margin: 0 auto;
  display: block;
}
.right {
  text-align: right;
}
.center-box {
  margin: 0 auto;
}
.italics {
  font-style: italic;
}
mark {
  font-style: italic;
  background-color: transparent;
  color: inherit;
}
mark.attn {
  animation: vibrant 2.6s infinite, bounce 1.2s ease infinite;
  display: inline-block;
}
@keyframes vibrant {
  0% {
    color: #0051ff;
  }
  50% {
    color: #00ffb2;
  }
  100% {
    color: #0051ff;
  }
}
@keyframes bounce {
  10% {
    transform: scale(1.1);
  }
  20%,
  40% {
    transform: rotate(-10deg) scale(1.1);
  }
  30% {
    transform: rotate(10deg) scale(1.1);
  }
  50% {
    transform: rotate(0deg) scale(1.1);
  }
  60% {
    transform: scale(1);
  }
}
/* PHOTOGRAPHY */
.img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
}
@media screen and (max-width: 64em) {
  .img-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.img-grid > div {
  height: 100%;
}
.img-grid img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* or "contain" */
}
.img-grid-2 {
  display: grid;
  padding-top: 1em;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}
@media screen and (max-width: 64em) {
  .img-grid-2 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.img-grid-2 > div {
  height: 100%;
}
.img-grid-2 img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* or "contain" */
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.fit {
  width: 100%;
  object-fit: cover;
}
.logo {
  object-fit: contain;
  padding: 1em;
  height: 100px;
}
@media screen and (max-width: 64em) {
  .logo {
    padding: 0.5em;
  }
}
.pure-g > div {
  box-sizing: border-box;
}
.card {
  padding: 1em 1em 0;
  overflow: hidden;
}
.card img {
  display: block;
  transition: transform 0.4s;
}
.card > p {
  color: #0051ff;
  text-decoration: underline #00ffb2 !important;
}
.card > h3 {
  color: #262834;
  text-decoration: underline #fd5b65 !important;
}
.card:hover,
.card:hover > p {
  background-color: #0051ff;
  color: #00ffb2;
}
.card:hover > h3 {
  color: white;
  text-decoration: underline #00ffb2 !important;
}
.card:hover img {
  transform: scale(1.1);
  object-fit: contain;
}
.zoom {
  overflow: hidden;
}
/* FORM */
/* general style for the form */
#contact-form {
  margin: 0 auto;
  font-size: 2em;
  line-height: 1.5;
}
@media screen and (max-width: 64em) {
  #contact-form {
    font-size: 1.7em;
  }
}
.contact-form input,
.contact-form select {
  border: none;
  background: transparent;
  display: inline-block;
  padding: 0;
  margin: 0;
  border-bottom: 1px dashed #00ffb2;
  color: #00ffb2;
  text-align: center;
}
.contact-form input:focus {
  outline: none;
  background: transparent;
}
.contact-form select {
  line-height: inherit;
  display: inline-block;
  cursor: pointer;
}
.contact-form select ::after {
  background: none;
}
.contact-form select input[type="email"],
.contact-form select input[type="tel"] {
  width: 100%;
}
.contact-form textarea {
  width: 100%;
  border: 1px dashed #00ffb2;
  background: transparent;
}
/* FAQ */
.toggle .toggle-title {
  position: relative;
  display: block;
  border-top: 1px solid #fd5b65;
  padding: 0.5em 0;
}
.toggle .toggle-title h3 {
  cursor: pointer;
}
.toggle:last-child {
  border-bottom: 1px solid #fd5b65;
}
.toggle .toggle-inner {
  display: block;
  padding-bottom: 1em;
}
.toggle .toggle-inner div {
  max-width: 100%;
}
.toggle .toggle-title .title-name {
  display: block;
}
@media screen and (max-width: 64em) {
  .toggle .toggle-title .title-name {
    width: 88%;
  }
}
.toggle .toggle-title i {
  position: absolute;
  right: 0.3em;
}
#termsconditions ul {
  list-style-position: outside;
}