/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/scss/style-import.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: "AnonymousPro";
  src: url(/wp-content/themes/rhonda-magee/dist/e7c1fd363699a9483f8f.ttf);
  font-weight: 400;
}
@font-face {
  font-family: "Freehand";
  src: url(/wp-content/themes/rhonda-magee/dist/7f8f0eadd6e1dca7d4ab.ttf);
  font-weight: 400;
}
:root {
  --color-white: #ffffff;
  --color-gray: #878787;
  --color-light-gray: #f5f5f5;
  --color-dark-brown: rgb(30, 15, 10);
  --color-black: rgb(10, 5, 10);
  --color-blue: #0cb9c0;
  --color-orange: #f48920;
  --color-light-yellow: #f5e0b2;
  --font-primary: "AnonymousPro", Arial, Helvetica, sans-serif;
  --font-secondary: "Freehand", Times, serif;
  --general-spacing: 4rem;
  --general-border-radius: 4px;
}

.lateral-padding {
  padding-left: 1rem;
  padding-right: 1rem;
  /* From 770px on */
  /* From 1000px on */
}
@media (min-width: 770px) {
  .lateral-padding {
    padding-left: 10%;
    padding-right: 10%;
  }
}
@media (min-width: 1000px) {
  .lateral-padding {
    padding-left: 14%;
    padding-right: 14%;
  }
}

@keyframes move-background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes translate-around {
  0% {
    opacity: 0.35;
    transform: translateX(0) rotate(0) scale(2);
  }
  50% {
    opacity: 0.45;
    transform: translateX(-50%) rotate(10deg) scale(3);
  }
  100% {
    opacity: 0.35;
    transform: translateX(0) rotate(0) scale(2);
  }
}
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

:root {
  font-size: 16px;
}

::-moz-selection {
  color: var(--color-white);
  background: var(--color-dark-brown);
}

::selection {
  color: var(--color-white);
  background: var(--color-dark-brown);
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: 1.1rem;
}

body {
  margin: 0;
  font-display: swap;
  min-width: 320px;
  color: var(--color-dark-brown);
  background: linear-gradient(121deg, rgb(17, 17, 17) 0%, rgb(68, 68, 68) 48%, rgb(17, 17, 17) 100%);
  font-family: var(--font-primary);
}

a {
  cursor: pointer;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
}

/*
For folks who buy huge monitors
With other purposes than visiting this site
(Maybe they use huge monitors for gaminig, video editing, ...)
For them, we'll just display the whole site inside a narrower viewport
*/
#full_site_wrapper {
  position: relative;
  max-width: 50cm;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  background-color: rgb(255, 255, 255);
}
@media (min-width: 50cm) {
  #full_site_wrapper {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 52cm) {
  #full_site_wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

body {
  line-height: 1.8;
}

p {
  padding: 1rem 0;
}

.wysiwyg {
  /* From 770px on */
}
.wysiwyg h1 {
  padding-bottom: 1.5rem;
  font-size: 3rem;
}
.wysiwyg h2 {
  font-size: 2.5rem;
}
.wysiwyg h3 {
  font-size: 2rem;
}
.wysiwyg h2, .wysiwyg h3, .wysiwyg h4, .wysiwyg h5, .wysiwyg h6 {
  padding: 1.5rem 0;
}
.wysiwyg p {
  padding: 1rem 0;
}
.wysiwyg ul {
  padding: 2rem;
}
@media (min-width: 770px) {
  .wysiwyg ul {
    -moz-column-count: 2;
         column-count: 2;
  }
}

.section-mt {
  margin-top: 3rem;
}

.section-mb {
  margin-bottom: 3rem;
}

.button {
  display: inline-block;
  border: 0.15rem solid var(--color-dark-brown);
  color: var(--color-dark-brown);
  background-color: transparent;
  border-radius: 0.4rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}
.button:hover {
  background-color: var(--color-dark-brown);
  color: var(--color-white);
}
.button.color-light-gray {
  border-color: var(--color-light-gray);
  color: var(--color-light-gray);
}
.button.color-light-gray:hover {
  background-color: var(--color-light-gray);
  color: var(--color-black);
}
.button.color-dark-brown {
  border-color: var(--color-dark-brown);
  color: var(--color-dark-brown);
}
.button.color-dark-brown:hover {
  background-color: var(--color-dark-brown);
  color: var(--color-white);
}
.button.color-black {
  border-color: var(--color-black);
  color: var(--color-black);
}
.button.color-black:hover {
  background-color: var(--color-black);
  color: var(--color-light-gray);
}
.button.color-blue {
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.button.color-blue:hover {
  background-color: var(--color-blue);
  color: var(--color-dark-brown);
}
.button.color-orange {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.button.color-orange:hover {
  background-color: var(--color-contrast-b);
  color: var(--color-black);
}
.button.color-dark-brown {
  border-color: var(--color-dark-brown);
  color: var(--color-dark-brown);
}
.button.color-dark-brown:hover {
  background-color: var(--color-dark-brown);
  color: var(--color-blue);
}

.link {
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
.link--gray {
  color: var(--color-gray);
}
.link:hover {
  color: var(--color-dark-brown);
}

.youtube-video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--general-border-radius);
}

.hero {
  width: 100%;
  position: relative;
  /* Up until 770px */
  /* From 770px on */
  /* From 1000px on */
}
.hero img {
  width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero .content h1 {
  font-family: var(--font-secondary);
  font-size: 3rem;
  line-height: 1;
}
.hero .content p {
  font-weight: bold;
}
@media (max-width: 770px) {
  .hero img {
    height: calc(100vh - 4.5rem);
  }
  .hero .content {
    padding: 3rem;
  }
  .hero .content h1 {
    font-size: 3rem;
    margin-bottom: 2rem;
    font-weight: 400;
  }
  .hero .content p {
    font-size: 1rem;
  }
}
@media (min-width: 770px) {
  .hero {
    height: calc(100vh - 7rem);
  }
  .hero img {
    height: 100%;
  }
  .hero .content {
    position: absolute;
    width: 37%;
    top: 50%;
    right: 5rem;
    transform: translateY(-50%);
  }
  .hero .content h1 {
    font-size: 3.6rem;
    margin-bottom: 2rem;
    font-weight: 400;
  }
  .hero .content p {
    font-size: 1.2rem;
  }
  .hero::after {
    position: absolute;
    content: "";
    width: 54px;
    height: 86px;
    bottom: 1rem;
    right: 1rem;
    background-image: url(/wp-content/themes/rhonda-magee/dist/cda773c8d703326a12e0.png);
    background-repeat: no-repeat;
    background-size: contain;
  }
  .hero.hide-arrow::after {
    display: none;
  }
}
@media (min-width: 1000px) {
  .hero .content {
    width: 45%;
  }
  .hero .content h1 {
    font-size: 5rem;
  }
  .hero .content p {
    font-size: 1.3rem;
  }
}

.quote {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  text-align: center;
  /* Up until 770px */
  /* From 770px on */
  /* From 1000px on */
}
.quote .symbol {
  height: 4rem;
  width: 4rem;
}
.quote .text {
  font-family: var(--font-secondary);
  font-size: 2rem;
}
.quote .author {
  font-weight: bold;
}
@media (max-width: 770px) {
  .quote {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
@media (min-width: 770px) {
  .quote {
    padding-top: 2rem;
    padding-bottom: 12rem;
  }
}
@media (min-width: 1000px) {
  .quote {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.logos {
  position: relative;
}
.logos .heading {
  margin-bottom: 2rem;
  font-size: 2.5rem;
  text-align: center;
  font-weight: bold;
}
.logos .images {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.logos .images img {
  height: 3rem;
}

.site-header {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  background-color: var(--color-white);
  z-index: 9;
  /* Hidden checkbox to control the open/close state of the mobile menu */
  /* Clicking this label will toggle the checkbox state and hence open/close the mobile menu */
  /* Mobile version */
  /* Version for tablet and PC */
}
.site-header .custom-logo-link img {
  max-height: 3rem;
  width: auto;
}
.site-header .main-menu {
  position: relative;
}
.site-header .main-menu ul {
  list-style: none;
}
.site-header .main-menu a {
  display: block;
  position: relative;
  text-transform: uppercase;
  font-weight: 100;
  color: var(--color-dark-brown);
  text-decoration: none;
}
.site-header .main-menu a:hover {
  color: var(--color-black);
  text-decoration: underline;
}
.site-header .main-menu li.current-menu-item a {
  font-weight: bold;
  text-decoration: underline;
}
.site-header .profile-link {
  position: relative;
}
.site-header .profile-link img {
  border-radius: 50%;
  display: block;
  height: 2rem;
  width: 2rem;
}
.site-header .profile-link img:hover {
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
}
.site-header #checkbox-main-menu {
  display: none;
}
.site-header label.toggle-main-menu {
  display: none;
  width: 1.4rem;
  height: 1.4rem;
  cursor: pointer;
}
.site-header label.toggle-main-menu .hamburger-open-menu {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  height: 1.4rem;
  align-content: space-between;
}
.site-header label.toggle-main-menu .hamburger-open-menu span {
  display: inline-block;
  height: 0.19rem;
  width: 100%;
  border-radius: 5px;
  background: linear-gradient(-45deg, var(--color-orange), var(--color-blue));
  transition: all 400ms;
}
.site-header label.toggle-main-menu .hamburger-open-menu span.line-1 {
  width: 90%;
}
.site-header label.toggle-main-menu .hamburger-open-menu span.line-2 {
  width: 75%;
}
.site-header label.toggle-main-menu .hamburger-open-menu span.line-3 {
  width: 100%;
}
.site-header label.toggle-main-menu:hover .hamburger-open-menu span {
  width: 100%;
  background: linear-gradient(-45deg, var(--color-orange), var(--color-blue));
}
.site-header #checkbox-main-menu:checked ~ label.toggle-main-menu .hamburger-open-menu {
  display: none;
}
.site-header #checkbox-main-menu ~ label.toggle-main-menu .x-close-menu {
  opacity: 0;
}
.site-header #checkbox-main-menu:checked ~ label.toggle-main-menu .x-close-menu {
  opacity: 1;
}
.site-header label.toggle-main-menu .x-close-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 1.4rem;
}
.site-header label.toggle-main-menu .x-close-menu::before,
.site-header label.toggle-main-menu .x-close-menu::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.15rem;
  border: 0.1rem solid var(--color-orange);
  background-color: var(--color-orange);
  opacity: 0;
  transition: all 0.4s ease-in-out;
  transform: rotate(0deg);
}
.site-header label.toggle-main-menu:hover .x-close-menu::before,
.site-header label.toggle-main-menu:hover .x-close-menu::after {
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.3);
}
.site-header #checkbox-main-menu:checked ~ label.toggle-main-menu .x-close-menu::before {
  transform: rotate(45deg);
  opacity: 1;
}
.site-header #checkbox-main-menu:checked ~ label.toggle-main-menu .x-close-menu::after {
  transform: rotate(-45deg);
  opacity: 1;
}
@media (max-width: 860px) {
  .site-header {
    padding: 0.75rem;
  }
  .site-header .logo {
    width: 3rem;
    height: 3rem;
  }
  .site-header label.toggle-main-menu {
    display: block;
  }
  .site-header .main-menu {
    position: fixed;
    display: none;
    width: 100vw;
    height: calc(100vh - 4.5rem);
    top: 4.5rem;
    left: 0;
    background-color: var(--color-white);
    padding-right: 2rem;
    text-align: right;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .site-header .main-menu a {
    font-size: 1.3rem;
    padding: 1rem;
  }
  .site-header #checkbox-main-menu:checked ~ .main-menu {
    display: block;
  }
}
@media (min-width: 860px) {
  .site-header {
    padding: 1.5rem;
  }
  .site-header .logo {
    width: 4rem;
    height: 4rem;
  }
  .site-header .main-menu {
    width: 100vw;
  }
  .site-header .main-menu > ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .site-header .main-menu a {
    font-size: 1rem;
    padding: 0 1rem;
  }
}

.text-cards {
  position: relative;
  display: grid;
  gap: var(--general-spacing);
  /* Up until 770px */
  /* From 770px on */
}
.text-cards .card {
  position: relative;
  background-color: var(--color-light-gray);
  padding: 2rem;
  border-radius: var(--general-border-radius);
}
.text-cards .card:nth-child(3n+3) {
  transform: rotate(-2deg);
}
.text-cards .card:nth-child(3n+2) {
  transform: rotate(2deg);
}
.text-cards .card:nth-child(3n+2) {
  transform: rotate(-1deg);
}
.text-cards .title {
  position: absolute;
  top: -2.2rem;
  left: -1rem;
  font-size: 1.8rem;
  font-family: var(--font-secondary);
}
@media (max-width: 770px) {
  .text-cards {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 770px) {
  .text-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.site-footer {
  margin-top: 3rem;
  padding: 2rem;
  text-align: center;
  background-color: var(--color-white);
}
.site-footer a {
  color: var(--color-dark-brown);
}
.site-footer a:hover {
  color: var(--color-black);
}
.site-footer .social-media {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
}
.site-footer .social-media img {
  opacity: 0.5;
  width: 35px;
  height: 35px;
}
.site-footer .social-media img:hover {
  opacity: 1;
}

.eyecatching-content {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(45deg, var(--color-orange) 0%, #ffffff 50%, var(--color-blue) 100%);
  /* Up until 770px */
  /* From 770px on */
}
.eyecatching-content::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
  pointer-events: none;
}
.eyecatching-content::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.2;
  background-image: linear-gradient(45deg, var(--color-orange) 0%, #ffffff 20%, var(--color-blue) 95%);
  pointer-events: none;
  animation: translate-around 4s ease infinite;
}
.eyecatching-content .content {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 2rem;
}
.eyecatching-content .content h1 {
  font-size: 4rem;
}
.eyecatching-content .content p {
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: 0.3rem;
}
.eyecatching-content .content .awesome-button {
  align-self: flex-end;
}
@media (max-width: 770px) {
  .eyecatching-content .content {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
@media (min-width: 770px) {
  .eyecatching-content .content {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.sidebyside-text-image {
  position: relative;
  display: grid;
  gap: var(--general-spacing);
  padding-top: var(--general-spacing);
  padding-bottom: var(--general-spacing);
  /* Up until 770px */
  /* From 770px on */
}
.sidebyside-text-image figure, .sidebyside-text-image img {
  width: 100%;
  border-radius: var(--general-border-radius);
}
.sidebyside-text-image figure {
  padding: 1rem;
  background-color: #f7f7f7;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
  transform: rotate(2deg);
  border-radius: var(--general-border-radius);
}
.sidebyside-text-image.order-image-text figure {
  transform: rotate(-2deg);
}
.sidebyside-text-image.order-image-text figure img,
.sidebyside-text-image.order-image-text figure iframe {
  border-radius: var(--general-border-radius);
}
@media (max-width: 770px) {
  .sidebyside-text-image {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 770px) {
  .sidebyside-text-image {
    grid-template-columns: 5fr 5fr;
  }
}

.sidebyside-text-video {
  position: relative;
  display: grid;
  gap: var(--general-spacing);
  padding-top: var(--general-spacing);
  padding-bottom: var(--general-spacing);
  /* Up until 770px */
  /* From 770px on */
}
.sidebyside-text-video figure, .sidebyside-text-video iframe {
  width: 100%;
  border-radius: var(--general-border-radius);
  aspect-ratio: 16/9;
}
.sidebyside-text-video figure {
  padding: 1rem;
  background-color: #f7f7f7;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
  transform: rotate(2deg);
  border-radius: var(--general-border-radius);
}
.sidebyside-text-video.order-video-text figure {
  transform: rotate(-2deg);
}
.sidebyside-text-video.order-video-text figure img,
.sidebyside-text-video.order-video-text figure iframe {
  border-radius: var(--general-border-radius);
}
@media (max-width: 770px) {
  .sidebyside-text-video {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 770px) {
  .sidebyside-text-video {
    grid-template-columns: 5fr 5fr;
  }
}

.editor-content {
  position: relative;
  /* Up until 770px */
  /* From 770px on */
  /* From 1000px on */
}
.editor-content ul {
  margin-left: 2rem;
}
.editor-content h2 {
  margin-top: 3rem;
}
@media (max-width: 770px) {
  .editor-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
@media (min-width: 770px) {
  .editor-content {
    padding-top: 2rem;
    padding-bottom: 12rem;
  }
}
@media (min-width: 1000px) {
  .editor-content {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.gradient-heading {
  position: relative;
  text-align: center;
}
.gradient-heading h1 {
  display: inline-block;
  font-size: 72px;
  padding: 0 30px; /* Padding to avoid text clipping */
  background-image: linear-gradient(45deg, var(--color-blue) 0%, var(--color-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-heading h1::-moz-selection {
  color: var(--color-white);
  background: var(--color-black);
  -webkit-background-clip: content-box;
  -webkit-text-fill-color: initial;
}
.gradient-heading h1::selection {
  color: var(--color-white);
  background: var(--color-black);
  -webkit-background-clip: content-box;
  -webkit-text-fill-color: initial;
}
.gradient-heading h2 {
  display: block;
  font-family: var(--font-primary);
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  font-size: 17px;
}

.polaroid-cards {
  position: relative;
  display: grid;
  gap: 3rem;
  background-size: cover;
}

.polaroid-cards .card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--color-light-gray);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
  border-radius: var(--general-border-radius);
  color: var(--color-dark-brown);
}
.polaroid-cards .card:hover {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.8);
}

.polaroid-cards .card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--general-border-radius);
}

/* Up until 860px */
@media (max-width: 860px) {
  .polaroid-cards {
    grid-template-columns: 1fr;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
/* From 860px on */
@media (min-width: 860px) {
  .polaroid-cards {
    grid-template-columns: 1fr 1fr;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.events {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--general-spacing);
  padding-top: var(--general-spacing);
  padding-bottom: var(--general-spacing);
}

.events .event {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.events .event .left {
  flex-basis: 24rem;
  flex-grow: 0;
  flex-shrink: 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.events .event .left .datetime .time {
  font-weight: 400;
}
.events .event .left .location {
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

.events .event .right {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
}

.events .event h2 {
  font-size: 2rem;
}

.events .event img {
  width: 100%;
  border-radius: var(--general-border-radius);
}

.events .event .contains-button {
  text-align: right;
}

.events .event .title {
  align-self: center;
}

/* From 800px on */
@media (min-width: 800px) {
  .events .event {
    flex-direction: row;
  }
}
.blog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--general-spacing);
  padding-top: var(--general-spacing);
  padding-bottom: var(--general-spacing);
}

.blog .article {
  display: grid;
  gap: 2rem;
}

.blog .article h2 {
  font-size: 2rem;
}

.blog .article img {
  width: 100%;
  border-radius: var(--general-border-radius);
}

.blog .article .contains-button {
  text-align: right;
}

.blog .article .date {
  font-weight: bold;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  align-self: center;
}

.blog .article .title {
  align-self: center;
}

/* Up until 800px */
@media (max-width: 800px) {
  .blog .article {
    grid-template-columns: 1fr;
  }
}
/* From 800px on */
@media (min-width: 800px) {
  .blog .article {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas: "date title" "image description";
  }
  .blog .article .date {
    grid-area: date;
  }
  .blog .article .image {
    grid-area: image;
    margin-top: 1.5rem;
  }
  .blog .article .title {
    grid-area: title;
  }
  .blog .article .description {
    grid-area: description;
  }
}
.community {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--general-spacing);
  padding-top: var(--general-spacing);
  padding-bottom: var(--general-spacing);
}
.community .community-section-heading {
  margin-bottom: 2rem;
  border-bottom: 2px solid;
}
.community .sessions .series-name {
  font-family: var(--general-font-family);
  letter-spacing: 0.1rem;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.community .sessions .session {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.community .sessions .session .image {
  flex-basis: 200px;
  flex-grow: 0;
  flex-shrink: 0;
}
.community .sessions .session .image img {
  width: 100%;
  height: auto;
  border-radius: var(--general-border-radius);
}
.community .sessions .session .info {
  flex-grow: 1;
  flex-shrink: 1;
}
.community .sessions .session .info p {
  padding: 3px 0;
}
.community .members {
  border-radius: var(--general-border-radius);
}
.community .members .member {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.community .members .member .image {
  flex-basis: 100px;
  flex-grow: 0;
  flex-shrink: 0;
}
.community .members .member .image img {
  width: 100%;
  height: auto;
  border-radius: var(--general-border-radius);
}
.community .members .member .info {
  flex-grow: 1;
  flex-shrink: 1;
}
.community .members .member .info a {
  color: var(--color-black);
}
.community .members .member .info p {
  padding: 3px 0;
}

/* From 800px on */
@media (min-width: 800px) {
  .community {
    grid-template-columns: 3fr 2fr;
  }
}
.comments {
  position: relative;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.comments .comment-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.comments .comment-body .vcard {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.comments .comment-body .vcard .says {
  display: none;
}
.comments .comment-body .vcard img {
  border-radius: var(--general-border-radius);
}
.comments .comment-body .comment-meta a {
  color: var(--color-gray);
}

.newsletter-optin__form {
  position: relative;
  padding: 2rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  background-color: var(--color-light-gray);
  border-radius: var(--general-border-radius);
}
.newsletter-optin__form div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 770px) {
  .newsletter-optin__form div {
    align-items: center;
    flex-direction: row;
  }
}
.newsletter-optin__form input {
  padding: 0.8rem;
  line-height: 1;
}
.newsletter-optin__form input[type=email] {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
}
.newsletter-optin__form input[type=submit] {
  flex-basis: 200px;
  flex-grow: 0;
  flex-shrink: 1;
  cursor: pointer;
}

.newsletter-optin__confirmation {
  padding-top: 8rem;
}
.newsletter-optin__confirmation-notice {
  padding: 2rem;
  background-color: var(--color-blue);
  color: var(--color-white);
  border-radius: var(--general-border-radius);
}

.outlined-form {
  position: relative;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border: 0.2rem solid var(--color-blue);
  border-radius: var(--general-border-radius);
}
.outlined-form input[type=text],
.outlined-form input[type=email],
.outlined-form input[type=tel],
.outlined-form input[type=url],
.outlined-form input[type=password],
.outlined-form input[type=search],
.outlined-form textarea,
.outlined-form select {
  padding: 0.5rem;
  border: 0.1rem solid var(--color-blue);
  border-radius: var(--general-border-radius);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  transition: all 0.3s ease-in-out;
}
.outlined-form input[type=text]:focus,
.outlined-form input[type=email]:focus,
.outlined-form input[type=tel]:focus,
.outlined-form input[type=url]:focus,
.outlined-form input[type=password]:focus,
.outlined-form input[type=search]:focus,
.outlined-form textarea:focus,
.outlined-form select:focus {
  border: 0.1rem solid var(--color-orange);
  outline: none;
}
.outlined-form--centered {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.outlined-form__success,
.outlined-form .user-profile-login-form__success,
.outlined-form .user-profile-registration-form__success {
  color: var(--color-blue);
  font-weight: 700;
}
.outlined-form__error,
.outlined-form .user-profile-login-form__error,
.outlined-form .user-profile-registration-form__error {
  color: var(--color-orange);
  font-weight: 700;
}
.outlined-form__field,
.outlined-form .user-profile-edit-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.outlined-form__field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
}
.outlined-form .user-profile-edit-form__field--image img {
  display: block;
  border-radius: var(--general-border-radius);
  max-width: 10rem;
}

.user-profile {
  position: relative;
}
.user-profile__header {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.user-profile__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 1rem;
}

.user-profile-edit-form {
  position: relative;
  /* Up until 770px */
  /* From 770px on */
}
.user-profile-edit-form__header {
  margin-bottom: 2rem;
}
.user-profile-edit-form__body {
  display: flex;
  flex-direction: row;
  gap: 3rem;
}
.user-profile-edit-form__sidebar {
  display: block;
  list-style: none;
}
.user-profile-edit-form__sidebar a {
  color: var(--color-dark-brown);
}
.user-profile-edit-form__sidebar a:hover, .user-profile-edit-form__sidebar a.active {
  color: var(--color-blue);
}
.user-profile-edit-form__sidebar a.active {
  font-weight: bold;
}
.user-profile-edit-form__sections {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
}
.user-profile-edit-form__section-title {
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
}
.user-profile-edit-form__section-description {
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: uppercase;
}
.user-profile-edit-form__field-image img {
  display: block;
  border-radius: var(--general-border-radius);
  max-width: 10rem;
}
@media (max-width: 770px) {
  .user-profile-edit-form__body {
    flex-direction: column;
  }
}
@media (min-width: 770px) {
  .user-profile-edit-form__body {
    flex-direction: row;
  }
  .user-profile-edit-form__sidebar {
    flex-basis: 10rem;
    flex-shrink: 0;
  }
}

.user-profile-edit-form__field {
  margin-top: 2rem;
}

.public-profile {
  position: relative;
  /* Up until 770px */
  /* From 770px on */
  /* From 1200px on */
}
.public-profile__main-data {
  display: grid;
  gap: 3rem;
}
.public-profile__main-data .profile-name {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: var(--font-family-secondary);
}
.public-profile__main-data__picture img {
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.public-profile__sections {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.public-profile__inner-child-pic-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}
.public-profile__inner-child-pic-text figure, .public-profile__inner-child-pic-text img {
  max-width: 100%;
}
.public-profile__inner-child-pic-text img {
  display: block;
  margin: 0 auto;
  border-radius: var(--general-border-radius);
}
.public-profile__comments {
  display: grid;
  list-style: none;
  gap: 2rem;
  margin-top: 2rem;
}
.public-profile__comments__comment {
  position: relative;
  background-color: var(--color-light-yellow);
  padding: 2rem;
  border-radius: var(--general-border-radius);
}
.public-profile__comments__comment:nth-child(3n+3) {
  transform: rotate(-2deg);
}
.public-profile__comments__comment:nth-child(3n+2) {
  transform: rotate(2deg);
}
.public-profile__comments__comment:nth-child(3n+2) {
  transform: rotate(-1deg);
}
.public-profile__comments__comment a {
  display: block;
  margin-top: 2rem;
  color: var(--color-dark-brown);
  font-weight: bold;
}
.public-profile__comments__comment a:hover {
  text-decoration: underline;
}
@media (max-width: 770px) {
  .public-profile__main-data {
    grid-template-columns: 1fr;
    margin-top: 2rem;
    margin-bottom: 3rem;
  }
  .public-profile__main-data__picture img {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  .public-profile__body {
    flex-direction: column;
  }
  .public-profile__comments {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 770px) {
  .public-profile__main-data {
    grid-template-columns: 12rem 1fr;
    margin-top: 3rem;
    margin-bottom: 5rem;
  }
  .public-profile__main-data__picture img {
    width: 100%;
  }
  .public-profile__body {
    flex-direction: row;
  }
  .public-profile__inner-child-pic-text {
    flex-direction: row;
  }
  .public-profile__inner-child-pic-text figure {
    flex-basis: 15rem;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .public-profile__inner-child-pic-text figure img {
    width: 100%;
    height: auto;
  }
  .public-profile__comments {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1200px) {
  .public-profile__comments {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/*# sourceMappingURL=style.css.map*/