/* CSS Document */
/*Theme Name: Carmine Japanese
Theme URI: https://carmine-designs.com/
Author: Carmine Designs, GK
Author URI: https://carmine-designs.com/
Description: Carmine Japanese is a custom theme created for web design agency Carmine Designs for its Japanese language website
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/*--- Colors ---*/
/* Font Families
font-family: 'Ubuntu', sans-serif;
font-family: 'Vesper Libre', serif;
*/
/*---------- Mixins ----------*/
/*--- Reset rule ---*/
* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

/*---------- General rules ----------*/
body {
  background-color: #f9fcf3;
  color: #36454f;
  font-family: "Ubuntu", sans-serif;
  font-size: 1em;
}

h1 {
  color: #961b1e;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.75em;
  font-weight: 500;
  text-align: center;
  border-bottom: solid #daa628;
  width: 80%;
  max-width: 300px;
  margin: 0 auto 30px;
}
@media (min-width: 850px) {
  h1 {
    font-size: 2em;
  }
}

h2 {
  color: #36454f;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.25em;
  font-weight: 400;
  margin-bottom: 10px;
}
@media (min-width: 850px) {
  h2 {
    font-size: 1.5em;
  }
}

h3 {
  color: #961b1e;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.1em;
  font-weight: 400;
}

h4 {
  color: #961b1e;
  font-family: "Ubuntu", sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 20px;
}

p {
  margin-bottom: 20px;
}

p:last-of-type {
  margin-bottom: 0;
}

li {
  list-style-type: none;
}

img {
  width: 100%;
  height: auto;
  max-width: -moz-max-content;
  max-width: max-content;
}

.alignleft, .aligncenter, .alignright {
  margin: 10px auto;
  display: block;
}

.size-thumbnail {
  max-width: 150px;
  width: 35%;
}

.size-medium {
  width: 100%;
}

.size-large {
  max-width: 1024px;
}

.spacer {
  margin: 10px auto 30px;
}

.button {
  background-color: #f9fcf3;
  color: #36454f;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #daa628;
  display: block;
  width: 55%;
  max-width: 150px;
  margin: 10px auto;
  border-radius: 1em;
  padding: 0.5em 0.25em;
  transition: 0.5s;
  font-weight: 400;
}
.button:hover {
  transition: 0.5s;
  border-color: #961b1e;
  background-color: #f9fcf3;
}
.button:active {
  transform: translateY(3px);
  transition: 0.5s;
}

.large {
  display: none;
}

/* --- Sticky Footer --- */
.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.site-content {
  flex: 1;
}

.main-wrap {
  height: 100%;
}

/* ---------- General Page Styling ---------- */
/* --- Navigation Popup --- */
#navigation-open {
  padding: 20px;
  color: #961b1e;
  cursor: pointer;
  justify-self: flex-end;
  align-self: flex-start;
  background-color: transparent;
  transition: 0.2s;
  position: absolute;
  right: 0;
  top: 0;
}

.nav-buttons {
  font-size: 2.3rem;
}

#navigation-open:hover, #navigation-close:hover, #navigation-popup ul li a:hover {
  color: #daa628;
  transition: 0.2s;
}

#navigation-open .menu-text-button {
  display: none;
}

#navigation-popup {
  width: 100vw;
  color: #961B1E;
  background-color: rgba(249, 252, 243, 0.9019607843);
  font-family: "Vesper Libre", serif;
  font-size: 2rem;
  position: fixed;
  top: 0;
  min-height: 100vh;
  padding: 0 20px;
  z-index: 999999;
}

#navigation-popup ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: auto;
}

nav ul li {
  list-style-type: none;
  padding: 5px 20px;
}

#navigation-popup ul li a {
  transition: 0.2s;
}

#navigation-close {
  text-align: right;
  transition: 0.2s;
  cursor: pointer;
  padding: 10px;
}

#navigation-open.sticky {
  position: fixed;
  animation: fadeIn 1.5s;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(218, 166, 40, 0.9019607843);
  top: 20px;
  right: 20px;
  z-index: 999;
  background-color: rgba(249, 252, 243, 0.9019607843);
  display: flex;
  justify-content: center;
  align-items: center;
}

#navigation-open.sticky .menu-text-button {
  display: none;
}

.no-scroll {
  overflow: hidden;
}

.hide-all {
  display: none !important;
}

.fade-in {
  animation: fadeIn 1s !important;
  -webkit-animation: fadeIn 1s !important;
}

.fade-out {
  animation: fadeOut 1s !important;
  -webkit-animation: fadeOut 1s !important;
}

header .main-navigation-button {
  background-color: transparent;
  color: #961b1e;
  font-size: 2rem;
  padding: 1rem;
  align-self: flex-start;
}
header .logo-container {
  padding: 2%;
  width: 40%;
  max-width: 175px;
  height: auto;
}

.small-header {
  animation: slideFromTop 1s;
  display: flex;
  justify-content: center;
}
.small-header .logo-container {
  max-width: 250px;
}

.standard-page .site-main {
  background-color: #f9fcf3;
  animation: fadeIn 1s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.standard-page .site-main .page-title {
  margin-top: 20px;
}
.standard-page .site-main article {
  margin: 25px;
  max-width: 1000px;
  width: 90%;
}

footer {
  background-color: #961b1e;
  color: #f9fcf3;
  margin-top: 50px;
}
footer .footer-contents {
  text-align: center;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  margin: auto;
}
footer .footer-contents #menu-social-media {
  margin: 10px auto;
  display: flex;
  justify-content: space-around;
  width: 75%;
  max-width: 250px;
}
footer .footer-contents #menu-social-media li {
  font-size: 1.5em;
  background-color: #f9fcf3;
  color: #961b1e;
  border: 1px solid #daa628;
  border-radius: 50%;
  min-width: 35px;
  min-height: 35px;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
footer .footer-contents #menu-social-media li:hover {
  background-color: #daa628;
  transition: 0.5s;
}
footer .footer-contents #menu-social-media li:active {
  transform: translateY(3px);
  transition: 0.5s;
}
footer .footer-contents #menu-social-media li a {
  display: flex;
}
footer .footer-contents address {
  margin: 10px auto;
  font-style: normal;
  text-align: center;
}
footer .footer-contents p {
  margin: 50px auto 0px;
}

/* ---------- Home Page Styling ---------- */
/* --- Home Header --- */
header {
  width: 100%;
  position: relative;
}
header .nav-wrapper {
  display: flex;
  justify-content: center;
  animation: slideFromTop 1.5s;
}

.home-page h1 {
  color: #961b1e;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.75em;
  text-align: center;
  font-weight: 400;
}
.home-page h2 {
  color: #961b1e;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.25em;
  text-align: center;
  border-bottom: solid #daa628;
  width: 80%;
  max-width: 300px;
  margin: 40px auto 30px;
  font-weight: 400;
}
@media (min-width: 850px) {
  .home-page h2 {
    font-size: 1.5em;
    max-width: 450px;
  }
}

.hero-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 40vh;
  min-height: 300px;
}
.hero-image-wrapper .hero-image {
  animation: appearOnLoad 2s;
}

.hero-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: auto;
}

.hero-image-fade {
  background-image: linear-gradient(transparent, #f9fcf3);
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
}

.intro-message {
  animation: fadeIn 1.5s;
  text-align: center;
  font-family: "Vesper Libre", serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro-message h1 {
  font-size: 1.5em;
  font-weight: 600;
  color: #36454f;
  border: none;
}
.intro-message h1 #text-change-container {
  display: flex;
  justify-content: center;
  font-size: 2em;
  line-height: 0.8em;
}

.text-change {
  display: block;
  position: absolute;
  width: 100%;
}

/* --- Welcome Message --- */
.skew-box {
  background-image: url("images/polygon.svg");
  background-size: cover;
  background-repeat: no-repeat;
}
.skew-box .welcome-message {
  display: flex;
  padding: 9vw 0 1vw;
}
.skew-box .welcome-message .welcome-image {
  align-self: flex-end;
  width: 40%;
}
.skew-box p {
  align-self: center;
  margin-left: 0.5em;
  font-size: 5vw;
}

.active {
  opacity: 1;
  color: #961b1e;
  transition-duration: 2.5s;
}

.inactive {
  opacity: 0;
  color: #daa628;
  transition-duration: 1.5s;
}

.home-message {
  width: 95%;
  margin: auto;
  padding: 0 1em;
}
.home-message p {
  font-size: 1.2em;
}

.home-message, .selected-works, .latest-post {
  max-width: 650px;
}

/* --- Projects --- */
.project-content {
  display: none;
  border: 1px solid #ccc;
  border-top: none;
  flex-direction: column;
  padding: 0;
  background-color: #F6E8C7;
  animation: fadeIn 0.5s;
}
.project-content .project-details {
  padding: 30px;
}
.project-content .project-details .project-title, .project-content .project-details .project-client {
  color: #961b1e;
}
.project-content .project-details a {
  display: inline-block;
  margin-top: 10px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #daa628;
  transition: 0.5s;
}
.project-content .project-details a:hover {
  color: #961b1e;
  transition: 0.5s;
}

.project-thumbnails {
  display: flex;
  margin: 2em 0;
  justify-content: space-around;
}
.project-thumbnails .preview-image {
  width: 30%;
  cursor: pointer;
  transition: 0.5s;
}
.project-thumbnails .preview-image:hover {
  transform: scale(1.05);
  transition: 0.5s;
}
.project-thumbnails .preview-image:active {
  transform: translateY(3px);
  transition: 0.5s;
}

/* --- Latest Post --- */
.post-image {
  position: relative;
}
.post-image .post-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #961b1e;
}
.post-image .post-title h3 {
  color: #F6E8C7;
  padding: 0.5em;
}

.post-excerpt {
  width: 80%;
  margin: 20px auto;
}

/* ---------- Blog Page Styling ---------- */
.standard-page .site-main .featured-posts-section {
  display: flex;
  background-color: #36454f;
}
.standard-page .site-main .featured-posts-section .featured-post {
  display: none;
  position: relative;
  transition: 0.5s;
}
.standard-page .site-main .featured-posts-section .featured-post:hover {
  display: block;
  opacity: 0.5;
  filter: alpha(opacity=50);
  transition: 0.5s;
}
.standard-page .site-main .featured-posts-section .featured-post .featured-post-image img {
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}
.standard-page .site-main .featured-posts-section .featured-post .featured-post-image figcaption {
  width: 100%;
  background-color: #F6E8C7;
  padding: 20px 15px;
  position: absolute;
  bottom: 0;
}
.standard-page .site-main .featured-posts-section .featured-post .featured-post-image figcaption h4 {
  margin-bottom: 0;
}
.standard-page .site-main .featured-posts-section .featured-post .featured-post-image figcaption .article-excerpt {
  display: none;
}
.standard-page .site-main .featured-posts-section .featured-post:first-of-type {
  display: block;
}
.standard-page .site-main .recent-posts-section {
  margin: 20px;
}
.standard-page .site-main .recent-posts-section .individual-post {
  margin: 20px 0;
  display: flex;
}
.standard-page .site-main .recent-posts-section .individual-post .post-image {
  align-self: center;
  width: 40%;
}
.standard-page .site-main .recent-posts-section .individual-post .post-image img {
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.standard-page .site-main .recent-posts-section .individual-post .post-details {
  margin: 0 10px;
  width: 60%;
}
.standard-page .site-main .recent-posts-section .individual-post .post-details h4 {
  margin-bottom: 0;
}
.standard-page .site-main .recent-posts-section .individual-post .post-details .article-excerpt {
  display: none;
  margin-bottom: 10px;
}
@media (min-width: 675px) {
  .standard-page .site-main .recent-posts-section .individual-post .post-details .article-excerpt {
    display: block;
  }
}
.standard-page .site-main .recent-posts-section .individual-post .post-details .post-link {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #daa628;
  transition: 0.5s;
}
.standard-page .site-main .recent-posts-section .individual-post .post-details .post-link:hover {
  color: #961b1e;
  transition: 0.5s;
}
.standard-page .site-main .recent-posts-section .article-divider {
  border-style: inset;
  border-color: #daa628;
  border-width: 1px;
}
.standard-page .site-main .recent-posts-section .article-divider:last-of-type {
  display: none;
}

/* ---------- Blog Post Styling ---------- */
.standard-page .site-main .single-blog-post .single-blog-post-title {
  color: #961b1e;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.25em;
  font-weight: 500;
  text-align: left;
  max-width: none;
  width: auto;
  border: none;
  margin: 0;
}
@media (min-width: 850px) {
  .standard-page .site-main .single-blog-post .single-blog-post-title {
    font-size: 1.75em;
  }
}
.standard-page .site-main .single-blog-post .single-blog-post-info {
  margin-bottom: 20px;
}
.standard-page .site-main .single-blog-post .single-blog-post-image {
  margin-bottom: 20px;
}
.standard-page .site-main .single-blog-post .single-blog-post-image img {
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}
.standard-page .site-main .single-blog-post .single-blog-post-content a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #daa628;
  transition: 0.5s;
}
.standard-page .site-main .single-blog-post .single-blog-post-content a:hover {
  color: #961b1e;
  transition: 0.5s;
}

/* ---------- Contact Form Styling ---------- */
#carmine-body .standard-page .site-main .carmine-designs-contact {
  font-family: "Ubuntu", sans-serif !important;
  color: #36454f !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#carmine-body .standard-page .site-main .carmine-designs-contact form {
  width: 100%;
  max-width: 600px;
}

div.wpforms-container-full .wpforms-field-label, div.wpforms-container-full input[type=radio] + label {
  color: #36454f !important;
}

.wpforms-container .wpforms-required-label {
  color: #961b1e !important;
}

div.wpforms-container-full input[type=date], div.wpforms-container-full input[type=datetime], div.wpforms-container-full input[type=datetime-local], div.wpforms-container-full input[type=email], div.wpforms-container-full input[type=month], div.wpforms-container-full input[type=number], div.wpforms-container-full input[type=password], div.wpforms-container-full input[type=range], div.wpforms-container-full input[type=search], div.wpforms-container-full input[type=tel], div.wpforms-container-full input[type=text], div.wpforms-container-full input[type=time], div.wpforms-container-full input[type=url], div.wpforms-container-full input[type=week], div.wpforms-container-full select, div.wpforms-container-full textarea {
  border-color: #daa628 !important;
}

input[type=radio]:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #d1d3d1;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 1px solid #daa628;
}

div.wpforms-container-full input[type=radio]:checked:before {
  border-color: #daa628;
  background-color: #F6E8C7;
  box-shadow: none;
}

div.wpforms-container-full input[type=checkbox]:before, div.wpforms-container-full input[type=radio]:before {
  border-color: #daa628;
  border-width: 1px;
  border-style: solid;
  background-color: #F6E8C7;
  background-image: none;
}

input[type=radio]:after {
  background-color: #F6E8C7;
}

div.wpforms-container-full input[type=radio]:checked:after {
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: #36454f;
  transform: scale(0.5);
}

div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
  background-color: #f9fcf3;
  color: #36454f;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #daa628;
  display: block;
  width: 55%;
  max-width: 150px;
  margin: 10px auto;
  border-radius: 1em;
  padding: 0.5em 0.25em;
  transition: 0.5s;
  font-weight: 400;
}
div.wpforms-container-full input[type=submit]:not(:hover):not(:active):hover, div.wpforms-container-full button[type=submit]:not(:hover):not(:active):hover, div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active):hover {
  transition: 0.5s;
  border-color: #961b1e;
  background-color: #f9fcf3;
}
div.wpforms-container-full input[type=submit]:not(:hover):not(:active):active, div.wpforms-container-full button[type=submit]:not(:hover):not(:active):active, div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active):active {
  transform: translateY(3px);
  transition: 0.5s;
}
div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
  line-height: 100%;
}

div.wpforms-container-full .wpforms-form button[type=submit] {
  margin: 10px auto !important;
  display: block !important;
}

/* New button hover styles */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
  padding: 0.5em 0.25em !important;
  width: 55% !important;
  max-width: 150px !important;
  font-weight: 400 !important;
  font-family: "Ubuntu", sans-serif !important;
  text-transform: uppercase !important;
  background: #f9fcf3 !important;
  color: #36454f !important;
  border: 1px solid #961b1e !important;
  border-radius: 1em !important;
  box-shadow: none;
}

/* New button focus styles */
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
  transform: translateY(3px);
  transition: 0.5s;
}

/* --- Min-Width: 450px --- */
@media (min-width: 450px) {
  header .hero-image-wrapper {
    min-height: 400px;
  }
  .home-message, .selected-works, .latest-post {
    width: 90%;
  }
  .alignleft {
    float: left;
    margin: 10px 10px 10px 0;
  }
  .alignright {
    float: right;
    margin: 10px 0 10px 10px;
  }
  .size-medium {
    max-width: 300px;
    width: 50%;
  }
  .standard-page .site-main .featured-posts-section {
    display: flex;
  }
  .standard-page .site-main .featured-posts-section .featured-post:first-of-type .featured-post-image img {
    aspect-ratio: 16/9;
  }
  .standard-page .site-main .featured-posts-section .featured-post:first-of-type .featured-post-image .article-excerpt {
    display: block;
  }
  .standard-page .site-main .recent-posts-section .individual-post .post-image {
    width: 30%;
  }
  .standard-page .site-main .recent-posts-section .individual-post .post-image img {
    aspect-ratio: 4/3;
  }
  .standard-page .site-main .recent-posts-section .individual-post .post-details {
    width: 70%;
  }
}
@media (min-width: 675px) {
  header .logo-container {
    width: 30%;
    max-width: 400px;
  }
  header .hero-image-wrapper {
    height: 80vh;
    min-height: 600px;
  }
  header .intro-message h1 {
    font-size: 2em;
  }
  header .intro-message h1 #text-change-container {
    font-size: 2.5em;
  }
  .skew-box p {
    font-size: 2.25em;
  }
  .standard-page .site-main .featured-posts-section {
    display: grid;
    grid-template-columns: repeat(2 50%);
    -moz-column-gap: 1px;
         column-gap: 1px;
    grid-template-rows: auto;
    grid-template-areas: "post1 post2";
  }
  .standard-page .site-main .featured-posts-section .featured-post:first-of-type {
    grid-area: post1;
  }
  .standard-page .site-main .featured-posts-section .featured-post:first-of-type .featured-post-image img {
    aspect-ratio: 4/3;
  }
  .standard-page .site-main .featured-posts-section .featured-post:nth-of-type(2) {
    display: block;
    grid-area: post2;
  }
  .standard-page .site-main .featured-posts-section .featured-post:nth-of-type(2) .featured-post-image .article-excerpt {
    display: block;
  }
  footer .footer-contents {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    grid-template-areas: "top-left top-right" "bottom bottom";
  }
  footer .footer-contents .social-media {
    grid-area: top-left;
  }
  footer .footer-contents address {
    grid-area: top-right;
    text-align: left;
  }
  footer .footer-contents p {
    grid-area: bottom;
  }
}
@media (min-width: 850px) {
  .large {
    display: block;
  }
  .small {
    display: none;
  }
  .spacer {
    margin: 80px auto 50px;
  }
  .skew-box.spacer {
    margin: 10px auto 30px;
  }
  .button {
    max-width: 175px;
  }
  .skew-box .welcome-message {
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-rows: auto;
    grid-template-areas: "welcome-image welcome-message" "welcome-image home-message";
  }
  .skew-box .welcome-message .welcome-image {
    grid-area: welcome-image;
    width: 100%;
  }
  .skew-box .welcome-message p {
    grid-area: welcome-message;
  }
  .skew-box .welcome-message article p {
    grid-area: home-message;
    margin: 1em;
    font-size: 1.2em;
  }
}
@media (min-width: 1000px) {
  h2 {
    font-size: 1.7em;
  }
  h3 {
    font-size: 1.2em;
  }
  h4 {
    font-size: 1em;
  }
  body {
    font-size: 1.1em;
  }
  .medium {
    display: none;
  }
  .size-large {
    width: 75%;
  }
  header .hero-image-wrapper {
    height: 100vh;
    min-height: 800px;
  }
  .home-page h2 {
    font-size: 1.7em;
    width: 40%;
    max-width: 600px;
  }
  .skew-box p {
    font-size: 2.5em;
  }
  .skew-box .welcome-message article p {
    font-size: 1.4em;
  }
  .selected-works {
    max-width: 1200px;
  }
  .selected-works .project-content {
    flex-direction: row;
  }
  .selected-works .project-content .project-image {
    width: 50%;
  }
  .selected-works .project-content .project-details {
    width: 50%;
  }
  .latest-post {
    max-width: 1000px;
  }
  .latest-post .post-excerpt {
    margin: 40px auto 20px;
  }
  .standard-page .site-main .featured-posts-section {
    display: grid;
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: repeat(2, 50%);
    grid-template-areas: "post1 post2 post3" "post1 post4 post5";
    -moz-column-gap: 1px;
         column-gap: 1px;
    grid-row-gap: 1px;
  }
  .standard-page .site-main .featured-posts-section .featured-post:first-of-type {
    grid-area: post1;
  }
  .standard-page .site-main .featured-posts-section .featured-post:nth-of-type(2) {
    display: block;
    grid-area: post2;
  }
  .standard-page .site-main .featured-posts-section .featured-post:nth-of-type(2) .featured-post-image .article-excerpt {
    display: none;
  }
  .standard-page .site-main .featured-posts-section .featured-post:nth-of-type(3) {
    grid-area: post3;
    display: block;
  }
  .standard-page .site-main .featured-posts-section .featured-post:nth-of-type(4) {
    grid-area: post4;
    display: block;
  }
  .standard-page .site-main .featured-posts-section .featured-post:nth-of-type(5) {
    grid-area: post5;
    display: block;
  }
  footer .footer-contents {
    max-width: 1800px;
  }
  footer .footer-contents #menu-social-media {
    justify-content: center;
  }
  footer .footer-contents #menu-social-media li {
    margin: 0 0.5em;
  }
}
/*--- Animations ---*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes slideFromTop {
  0% {
    transform: translateY(-100%);
  }
  25% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes appearOnLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideFromBottom {
  0% {
    transform: translateY(100%);
  }
  25% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}/*# sourceMappingURL=style.css.map */