/**
* Screen.css
*
* Copyright 2018-2023 Centre for Critical and Creative Thinking. All rights reserved.
*/
/*** Mixins  ***/
/*** Components ***/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
ul.people {
  margin-top: 3rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 2rem;
}
ul.people li {
  list-style: none;
  margin-left: 0;
}
ul.people li.bio {
  text-align: center;
}
ul.people li.bio img.mugshot {
  height: 5rem;
  width: 5rem;
}
.signup {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.signup form {
  display: block;
  width: 100%;
}
.videowrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  margin-bottom: 2rem;
}
.videowrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.collection ol.list li {
  list-style: none;
  margin-left: 0;
}
.post.summary {
  margin-bottom: 2rem;
}
.post.summary h3 a {
  color: #3E2B2E;
}
.post.summary h3 a:hover {
  color: #E2669B;
  text-decoration: none;
}
.content ul,
.content ol {
  list-style-position: inside;
}
.content ul li,
.content ol li {
  padding-left: 1rem;
}
.content img {
  max-width: calc(100% - 2rem);
}
.meta {
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
}
.meta img.mugshot {
  float: left;
  margin-left: 0.33rem;
  margin-right: 0.66rem;
}
.meta span {
  display: block;
  font-size: 1rem;
  line-height: 1;
}
.testimonials > ul li {
  list-style: none;
  margin-left: 0;
}
.testimonials > ul li {
  margin-bottom: 2rem;
}
.testimonials blockquote {
  padding: 0.5rem;
}
.testimonials blockquote p {
  margin-bottom: 0.5rem;
}
.testimonials blockquote p:last-child {
  padding-left: 1rem;
}
ul.spotlight {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}
ul.spotlight li {
  list-style: none;
  margin-left: 0;
}
ul.spotlight li {
  min-height: 300px;
  background-image: url(/media/focus.jpg);
  background-position: 50% 50%;
  background-size: cover;
  padding: 1rem;
  margin: 1rem;
  width: 300px;
  display: flex;
  align-items: center;
}
ul.spotlight li:first-child {
  background-image: url(/media/design.jpg);
}
ul.spotlight li:last-child {
  background-image: url(/media/lost.jpg);
}
ul.spotlight li a {
  color: #FFFFFF;
}
ul.spotlight li a:hover {
  text-decoration: none;
  color: #d9d9d9;
}
ul.spotlight li h2 {
  margin: 0;
}
#book-now form {
  max-width: 600px;
  margin: 0 auto;
}
#book-now form label {
  font-size: 1rem;
  line-height: 1;
  margin-right: 0.5rem;
}
#book-now form input {
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-weight: 300;
  margin-bottom: 0.5rem;
}
#book-now form input:focus {
  box-shadow: 0 0 1px 1px rgba(226, 102, 155, 0.5);
  border-color: #E2669B;
  outline: 0;
}
#book-now form input[type=text],
#book-now form input[type=number],
#book-now form input[type=email] {
  display: block;
  width: 100%;
  padding: 0.75rem;
}
#book-now form input.inline {
  display: inline;
  width: auto;
}
#book-now form table,
#book-now form .meta,
#book-now form .details {
  font-size: 1rem;
}
#book-now form .details {
  margin-bottom: 1rem;
}
#book-now form .details svg {
  margin-right: 1rem;
}
#book-now form .meta {
  margin: 1rem 0;
}
.cta {
  margin: 3rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  padding: 0.75rem 2rem;
  color: white;
  background-color: #E2669B;
  border: 1px solid #E2669B;
  border-radius: 0.25rem;
  font-weight: 300;
  transition: all 0.15s ease-in-out;
}
.btn:hover {
  background: #de518d;
  cursor: pointer;
}
table.calculations {
  border-collapse: collapse;
  width: 100%;
  text-align: right;
  margin: 1rem 0;
}
table.calculations td.item {
  text-align: left;
}
table.calculations td.amount span.number {
  display: inline-block;
  min-width: 2rem;
}
* {
  padding: 0;
  margin: 0;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  color: #3E2B2E;
  background-color: #FFFFFF;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
}
body a {
  color: #E2669B;
  text-decoration: none;
}
body a:hover {
  text-decoration: underline;
}
section {
  margin-bottom: 3rem;
}
h1,
h2 {
  text-align: center;
}
hr {
  margin: 3rem;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
blockquote {
  padding: 1rem 2rem;
  font-style: italic;
}
img.mugshot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}
nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 1rem;
  color: #FFFFFF;
}
nav a {
  color: #FFFFFF;
}
nav a:hover {
  color: #e6e6e6;
}
nav li {
  list-style: none;
  margin-left: 0;
}
nav .logo {
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  text-align: left;
  line-height: 1rem;
  font-weight: 400;
}
nav .logo .left {
  width: calc(1rem * 2);
  display: inline-block;
  text-align: right;
  margin-right: calc(1rem / 3);
  color: #9E9596;
}
nav .logo .left.three {
  color: #D83379;
}
nav .logo .right {
  color: #FFFFFF;
}
nav .logo .right.two {
  font-style: italic;
}
nav .logo .right.three {
  font-style: italic;
}
nav .logo .right.three,
nav .logo .right.four {
  font-weight: 500;
}
nav a:hover {
  text-decoration: none;
}
nav .desktop {
  display: none;
}
nav .home {
  float: left;
}
nav .hamburger {
  float: right;
}
nav .pages {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  list-style: none;
  background-color: rgba(62, 43, 46, 0.95);
  font-size: 2rem;
  text-align: center;
  display: none;
}
nav .pages li {
  padding: 2vh 2rem;
  font-weight: bold;
}
nav .pages li:first-child {
  text-align: right;
}
nav .pages li:hover {
  filter: brightness(80%);
}
section {
  max-width: 1024px;
  margin: 0 auto;
  margin-bottom: 3rem;
  padding: 1rem;
}
section h1,
section h2,
section h3,
section h4,
section h5,
section p,
section ul,
section ol {
  margin-bottom: 1rem;
  overflow-wrap: break-word;
}
section h1,
section h2 {
  margin: 2rem 0;
}
section.hero {
  max-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background-color: rgba(62, 43, 46, 0.5);
  padding: 0;
}
section.hero .bg-image {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  filter: sepia(60%);
  z-index: -10;
}
section.hero h1 {
  padding-bottom: 2rem;
  margin-top: 4rem;
  font-size: 2.5rem;
  font-size: calc(6vh + 6vw);
  font-weight: 900;
  line-height: 0.9;
  text-transform: capitalize;
  letter-spacing: -0.1rem;
}
section.hero .description {
  font-size: 1.5rem;
}
section.hero .signup {
  display: none;
}
.home section.hero {
  min-height: 100vh;
  width: 100vw;
}
.home section.hero .signup {
  margin-top: 3rem;
  display: block;
}
.post.content .meta {
  margin-bottom: 2rem;
}
footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  background-color: #302022;
  color: #9E9596;
  padding: 3rem 1rem;
  text-align: center;
}
footer > * {
  min-width: 300px;
}
footer .logo {
  font-family: 'EB Garamond', serif;
  font-size: 3rem;
  text-align: left;
  line-height: 3rem;
  font-weight: 400;
}
footer .logo .left {
  width: calc(3rem * 2);
  display: inline-block;
  text-align: right;
  margin-right: calc(3rem / 3);
  color: #9E9596;
}
footer .logo .left.three {
  color: #D83379;
}
footer .logo .right {
  color: #FFFFFF;
}
footer .logo .right.two {
  font-style: italic;
}
footer .logo .right.three {
  font-style: italic;
}
footer .logo .right.three,
footer .logo .right.four {
  font-weight: 500;
}
footer a:hover {
  text-decoration: none;
}
footer p,
footer a,
footer a:visited {
  color: #786e6f;
  text-decoration: none;
}
footer a:hover {
  text-decoration: none;
}
@media screen and (min-width: 450px) and (min-height: 450px) {
  nav .mobile {
    display: none;
  }
  nav .desktop {
    display: block;
  }
  nav .hamburger {
    font-size: 2rem;
  }
  nav .pages li {
    padding-right: 5rem;
    text-align: right;
  }
  section.hero {
    min-height: 66vh;
  }
  section.hero .bg-image {
    height: 66vh;
  }
  section.hero h1 {
    font-size: 4rem;
    max-width: 1024px;
  }
  .home section.hero {
    min-height: 100vh;
  }
  .home section.hero .bg-image {
    height: 100vh;
  }
  ul.people li,
  ul.spotlight li {
    max-width: 46%;
  }
}
.beautiful-form {
  min-width: 500px;
}
.beautiful-form legend {
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 700;
}
.beautiful-form div.element {
  display: block;
  margin-bottom: 1.5rem;
}
.beautiful-form div.submit.element {
  padding: 1rem;
  display: flex;
  justify-content: center;
}
.beautiful-form div.rating.element .stars,
.beautiful-form div.likert.element .stars,
.beautiful-form div.rating.element .emojis,
.beautiful-form div.likert.element .emojis {
  font-size: 1.5rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.beautiful-form div.rating.element .stars label,
.beautiful-form div.likert.element .stars label,
.beautiful-form div.rating.element .emojis label,
.beautiful-form div.likert.element .emojis label {
  color: #ccc;
}
.beautiful-form div.rating.element input[type="radio"],
.beautiful-form div.likert.element input[type="radio"] {
  display: none;
}
.beautiful-form div.rating.element label,
.beautiful-form div.likert.element label {
  display: inline;
}
.beautiful-form div.rating.element label:hover ~ label i {
  color: gold;
}
.beautiful-form div.rating.element label:hover ~ label i:before {
  content: '\F586';
}
.beautiful-form div.rating.element i:hover {
  color: gold;
}
.beautiful-form div.rating.element i:hover:before {
  content: '\F586';
}
.beautiful-form div.rating.element input:checked ~ label i {
  color: gold;
}
.beautiful-form div.rating.element input:checked ~ label i:before {
  content: '\F586';
}
.beautiful-form div.likert.element i:hover,
.beautiful-form div.likert.element input:checked + label i {
  color: var(--color);
}
.beautiful-form label {
  display: block;
  margin-bottom: 0.25rem;
}
.beautiful-form input[type=text],
.beautiful-form input[type=password],
.beautiful-form input[type=email],
.beautiful-form input[type=number],
.beautiful-form input[type=tel],
.beautiful-form textarea {
  border: none;
  border-radius: 0.25rem;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(61, 59, 53, 0.16) 0px 0px 0px 1px, rgba(61, 59, 53, 0.08) 0px 3px 9px 0px, rgba(61, 59, 53, 0.08) 0px 2px 5px 0px;
  padding: 0.5rem 1rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-size: 1rem;
  font-weight: 300;
  color: #666;
  width: 100%;
}
.beautiful-form input[type=text]::placeholder,
.beautiful-form input[type=password]::placeholder,
.beautiful-form input[type=email]::placeholder,
.beautiful-form input[type=number]::placeholder,
.beautiful-form input[type=tel]::placeholder,
.beautiful-form textarea::placeholder {
  font-weight: 200;
}
.beautiful-form input[type=submit] {
  border: none;
  border-radius: 0.25rem;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(61, 59, 53, 0.16) 0px 0px 0px 1px, rgba(61, 59, 53, 0.08) 0px 3px 9px 0px, rgba(61, 59, 53, 0.08) 0px 2px 5px 0px;
  padding: 0.5rem 1rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-size: 1rem;
  font-weight: 300;
  color: #666;
}
.beautiful-form input[type=submit]::placeholder {
  font-weight: 200;
}
.beautiful-form textarea {
  resize: none;
}