/*!
Theme Name:Wild in Art
Theme URI:https://www.cornerstonedm.co.uk/
Author:Cornerstone
Author URI:https://www.cornerstonedm.co.uk/
Description:Wild in Art 2022 theme
Version:1.0.0
Tested up to:5.8
Requires PHP:5.6
License:GNU General Public License v2 or later
License URI:LICENSE
Text Domain:wild-in-art
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
  - Normalize
  - Box sizing
# Base
  - Typography
  - Elements
  - Links
  - Forms
## Layouts
# Components
  - Navigation
  - Posts and pages
  - Comments
  - Widgets
  - Media
  - Captions
  - Galleries
# Utilities
  - Accessibility
  - Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/


/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
  ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height:1.15;
  -webkit-text-size-adjust:100%;
  font-size: 62.5%;
}

/* Sections
  ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
  font-family:var(--font-sans);
  font-weight:300;
  font-style:normal;
  margin:0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display:block;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing:inherit;
}

html {
  box-sizing:border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */


/* Elements
--------------------------------------------- */

embed,
iframe,
object {
  max-width:100%;
}

img {
  max-width:100%;
}

p {
  line-height:1.5;
}

select {
  font-family:var(--font-sans);
  font-weight:300;
  font-style:normal;
}

.bold {
  font-weight:700;
}

/* Headers
--------------------------------------------- */

h4 {
  font-weight:300;
  line-height:1.0;
}

/* Links
--------------------------------------------- */
ul {
  margin-top:30px;
  padding-left:20px;
}

li {
  line-height:1.5;
  margin-top:10px;
}

a {
  color:var(--wp--preset--color--dark);
  text-decoration:none;
}

/* Forms
--------------------------------------------- */

input {
  padding:5px;
}

div.wpforms-container-full .wpforms-form .wpforms-required-label {
  font-weight:bold!important; /*to pass AA*/
  font-size:var(--wp--preset--font-size-base); /*to pass AA*/
}

/*--------------------------------------------------------------
# Layouts

--------------------------------------------------------------*/

.password-page-header h1 {
  margin:100px 0 0 0;
  padding:0 15px;
  text-align:center;
}

.password-page-form {
  max-width:1200px;
  margin:60px auto;
  padding:15px;
  text-align:center;
}

.password-page-form .button {
  cursor:pointer;
  padding:6px 68px;
}

.password-page-form input {
  padding:20px;
  margin-right:20px;
  width:400px;
}

.password-page-image {
  display:block;
  margin:0 auto;
}

.swiper-container {
  overflow:hidden;
}

.swiper-pagination .swiper-pagination-bullet {
  background:#FFFFFF;
  opacity:1.0;
}

.swiper-pagination .swiper-pagination-bullet-active {
  background:#131313;
}


/* General Spacing Class - Max width media query so the WP blocks can override on bigger screens */
.general-spacing {
  margin:100px 0;
}

.general-padding {
  padding:60px 0;
}

@media only screen and (max-width:1024px) {
  .general-spacing {
    margin:40px 0 !important;
  }
  .general-padding {
    padding:40px 0;
  }
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Header + Navigation
--------------------------------------------- */

header{
  position:fixed;
  top:0;
  z-index:100;
  width:100%;
  background-color:var(--wp--preset--color--light);
  transition:all .3s ease-in;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
}

.top-nav{
  transition:opacity .3s ease-in-out;
  -webkit-transition:opacity .3s ease-in-out;
  -moz-transition:opacity .3s ease-in-out;
  -o-transition:opacity .3s ease-in-out;
}

.top-header {
  align-items:center;
  display:flex;
  justify-content:space-between;
  padding:10px;
  top:0;
}
.top-header .wia-logo {
  text-align:center;
}

.top-header .wia-logo {
  height:70px;
  width:70px;
}

.top-header .wia-logo span
{
  display:none; /*need text for WAVE report, but hide visually*/
}

.top-header .charity-logo {
  align-items:center;
  font-family:var(--font-sans);
  font-weight:300;
  font-style:normal;
  display:flex;
}

.top-header .charity-logo span {
  display:inline-block;
  max-width:160px;
}

@media only screen and (min-width:768px) {
  .top-header .wia-logo {
    position:absolute;
    left:0;
    right:0;
    width:70px;
    margin:0 auto;
  }
}

@media only screen and (min-width:1440px) {
  .top-header .charity-logo {
    padding-left:40px;
  }
}

/** Top Navigation / Right Nav with search **/

.menu-top-navigation-container,
nav .search-form {
  display:none;
}

@media only screen and (min-width:1181px) {
  nav .search-form {
    display:block;
  }

  .menu-top-navigation-container {
    display:flex;
    flex-direction:column;
    font-family:var(--font-sans);
    font-weight:300;
    font-style:normal;
    padding:15px;
    position:relative;
  }

  .menu-top-navigation-container--inner{
    display: flex;
    align-self: flex-end;
    align-items: center;
    transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
  }

  .menu-top-navigation-container .button{
    margin-top: 0;
    margin-left: 2rem;
  }

  .menu-top-navigation-container form {
    align-self:flex-end;
    float:right;
    position:relative;
  }

  .menu-top-navigation-container form svg {
    position:absolute;
    right:20px;
    top:13px;
    cursor:pointer;
  }

  .menu-top-navigation-container form input[type=search] {
    border:1px solid var(--wp--preset--color--dark);
    border-radius:5px;
    padding:13px;
    width:300px;
  }

  .menu-top-navigation-container form input[type=search]::placeholder{
    color: var(--wp--preset--color--dark);
  }

  .top-nav {
    display:flex;
    justify-content:flex-end;
    margin:20px 0;
    padding:0;
  }

  .top-nav li {
    list-style:none;
    margin-left:25px;
  }

  .top-nav li a {
    transition:color 0.5s;
  }

  .top-nav li:hover a {
    color:#5A5A5A;
  }
}

@media only screen and (min-width:1440px) {
  .menu-top-navigation-container {
    padding:15px 35px 15px 15px;
  }
}

@media only screen and (min-width:1600px) {
  .menu-top-navigation-container {
    flex:1;
  }
}

@media only screen and (min-width:1700px) {
  .top-nav li {
    margin-left:35px;
  }
}

/**  Main Navigation **/

nav {
  align-items:center;
  border-bottom:1px solid #EFEFEF;
  display:flex;
  justify-content:space-between;
}

.event-logo {
  padding:15px;
}

.event-logo img {
  width: 100%;
  max-width: 8rem;
  transition:all .3s ease-out;
  -webkit-transition:all .3s ease-out;
  -moz-transition:all .3s ease-out;
}

.event-logo p {
  display:none;
}

.event-logo a {
  display:block;
}

.event-logo p a {
  font-family:var(--font-sans);
  font-weight:700;
  font-style:normal;
  transition:color 0.5s;
}

@media only screen and (min-width:768px) {
  .event-logo {
    flex:1;
    position:relative;
  }

  .event-logo img {
    width:50%;
    max-width: 10rem;
  }

  .event-logo p {
    display:block;
    position:absolute;
    top:40%;
    transform:translateY(-40%);
    left:175px;
  }
}

@media only screen and (min-width:1181px) {
  nav {
    align-items:flex-end;
  }

  .event-logo p {
    top:0;
    transform:translateY(0%);
  }
}

@media only screen and (min-width:1440px) {
  .event-logo {
    padding:15px 15px 20px 50px;
  }

  .event-logo p {
    left:210px;
  }
}

@media only screen and (min-width:1600px) {
  .event-logo p {
    top:40%;
    transform:translateY(-40%);
  }
}

.menu-main-navigation-container {
  display:none;
}

/**  Central Navigation **/

@media only screen and (min-width:1181px) {
  .menu-main-navigation-container {
    display:block;
    position:relative;
    bottom:20px;
  }

  .main-nav {
    display:flex;
    justify-content:center;
    margin:0;
    padding:0;
  }

  .main-nav>li {
    font-size:var(--wp--preset--font-size--nm);
    font-weight:700;
    list-style:none;
    margin:0 18px;
    padding-bottom:20px;
    position:relative;
  }

  .main-nav>li a {
    transition:color 0.3s;
    color: inherit;
  }

  .main-nav>li.menu-item-has-children svg {
    position:relative;
    left:10px;
  }

  .main-nav .sub-menu {
    background:var(--wp--preset--color--dark);
    margin-top:10px;
    min-width:230px;
    opacity:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    z-index:10;
  }

  .main-nav .sub-menu li {
    list-style:none;
    margin:0;
  }

  .main-nav .sub-menu li a {
    color:var(--wp--preset--color--light);
    display:block;
    padding:10px 20px;
    width:100%;
  }

  .main-nav .sub-menu li a:hover {
    color:var(--wp--preset--color--primary);
  }

  .main-nav li.menu-item-has-children:hover>.sub-menu {
    opacity:1;
    visibility:visible;
  }
}

@media only screen and (min-width:1440px) {
  .menu-main-navigation-container {
    width:800px;
  }

  .main-nav>li {
    margin:0 25px;
  }
}

/* Mobile Header
--------------------------------------------- */

.mobile-header {
  justify-content:flex-end;
  display:flex;
  padding:10px;
}

.search-trigger {
  align-items:center;
  cursor:pointer;
  display:flex;
  justify-content:center;
  height:44px;
  width:44px;
}

.mobile-search {
  display:none;
  padding:0 15px;
  position:relative;
  text-align:right;
}

.mobile-search input {
  margin:15px 0;
  padding:15px 20px;
  width:100%;
}

.mobile-search svg {
  position:absolute;
  right:25px;
  top:25px;
}

.mobile-trigger {
  align-items:center;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:44px;
  width:44px;
}

.mobile-trigger .bar1,
.mobile-trigger .bar2,
.mobile-trigger .bar3 {
  width:22px;
  height:2px;
  background-color:#17104D;
  margin:3px auto;
  transition:0.4s;
}

.mobile-trigger.active .bar1 {
  transform:rotate(-46deg) translate(-5px, 7px)
}

.mobile-trigger.active .bar2 {
  opacity:0;
}

.mobile-trigger.active .bar3 {
  transform:rotate(45deg) translate(-4px, -7px);
}


@media only screen and (min-width:1181px) {
  .mobile-header {
    display:none;
  }
}

.mobile-social-icons {
  margin-left:10px;
}

.mobile-social-icons a {
  color:var(--wp--preset--color--dark);
  font-size:var(--wp--preset--fon-size--xl);;
  margin-right:12px;
}

.menu-mobile-navigation-container {
  background-color: var(--wp--preset--color--dark);
  color: var(--wp--preset--color--light);
  padding:10px;
  position:fixed;
  top:0;
  bottom:0;
  left:-300px;
  transition:left 0.5s;
  width:265px;
  z-index:200;
}

.menu-mobile-navigation-container.active {
  left:0;
}

.menu-mobile-navigation-container .mobile-nav {
  margin:10px 0;
}

.menu-mobile-navigation-container ul {
  padding:0;
}

.menu-mobile-navigation-container li {
  list-style-type:none;
  position:relative;
}

.menu-mobile-navigation-container li a {
  display:block;
  color:inherit;
  padding:12px;
}

.menu-mobile-navigation-container li.menu-item-has-children span {
  cursor:pointer;
  font-size:var(--wp--preset--font-size--md);
  padding:12px;
  position:absolute;
  top:0;
  right:0;
  width:50px;
}

.menu-mobile-navigation-container li.menu-item-has-children span svg,
.menu-mobile-navigation-container li.menu-item-has-children span i {
  position:relative;
  bottom:5px;
  transition:transform 0.5s;
}

.menu-mobile-navigation-container li.menu-item-has-children span svg path {
  fill:#17104D;
}
.menu-mobile-navigation-container li.menu-item-has-children span i {
  color:#17104D;
}

.menu-mobile-navigation-container li.menu-item-has-children span.rotate svg,
.menu-mobile-navigation-container li.menu-item-has-children span.rotate i {
  transform:rotate(180deg);
}

.menu-mobile-navigation-container li .sub-menu {
  display:none;
  margin-top:5px;
  padding-left:15px;
}

/* Fixed Social Links
--------------------------------------------- */

.fixed-social-links {
  display:none;
}


@media only screen and (min-width:768px) {
  .fixed-social-links {
    display:flex;
    flex-direction:column;
    position:fixed;
    right:10px;
    top:30%;
    transform:translateY(-30%);
    z-index:150;
  }

  .fixed-social-links i {
    font-size:var(--wp--preset--font-size--md);
    margin-top:0px;
    transition:color 0.5s;
  }

  .fixed-social-links img {
      width: 40px;
      height: auto;
  }

  .fixed-social-links a:hover {
    text-decoration:none;
  }

  .fixed-social-links a:hover i {
    color:#DEDEDE;
  }
}

.buttonSocial
{
  height:40px;
  width:40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius:50%;
  border:0px;
  overflow:hidden;
  text-align:center;
  font-size:var(--wp--preset--font-size--md);
  line-height:40px;
  color:white!important;
  margin-left:0px;
  margin-right:0px;
  margin-bottom:15px;
  transition:all 0.3s;
}
.buttonSocial .fab,
.buttonSocial .fas
{
  position:relative;
  top:0px;
}

/* Mobile Buttons (Footer)
--------------------------------------------- */

/* Make space at bottom of footer */
footer{
  margin-bottom:80px;
}

.mobile-buttons {
  border-top:1px solid white;
  background:#17104D;
  display:flex;
  justify-content:space-between;
  position:fixed;
  bottom:0;
  width:100%;
  height:80px;
  z-index:150;
}

.mobile-buttons a {
  color:#FFFFFF;
  display:flex;
  flex-direction:column;
  font-size:var(--wp--preset--font-size--sm);
  padding:12px;
  text-align:center;
}

.mobile-buttons a span {
  display:block;
  font-family:var(--font-sans);
  font-weight:300;
  font-style:normal;
  margin-top:5px;
}

.mobile-buttons i {
  color:#FFFFFF;
  font-size:var(--wp--preset--font-size--xl);
}

@media only screen and (min-width:640px) {
  .mobile-buttons {
    display:none;
  }
  footer{
    margin-bottom:0;
  }
}

/* Footer
--------------------------------------------- */

.upper-footer-image {
  width:100%;
}

.upper-footer {
  padding:60px 0 0 0;
}

footer .footer-logos {
  margin:20px 0 60px 0;
  text-align:center;
}

footer h3 {
  color:#131313;
  font-size:var(--wp--preset--font-size--lg);
  margin:0 0 20px 0;
}

.footer-col-info {
  align-items:center;
  display:flex;
  font-size:var(--wp--preset--font-size--nm);
  justify-content: flex-start;
}

.footer-col-info a {
  display:block;
  font-weight:500;
  margin-bottom:20px;
}

.footer-col-info .footer-hashtag,
.footer-col-info .footer-hashtag a {
  font-size:var(--wp--preset--font-size--md);
  font-weight:300;
}

.footer-col-info p {
  display:block;
  margin:0 0 20px 0;
}

.footer-col-3 {
  display:flex;
}

.footer-col-3 ul {
  margin-top:0;
  padding:0;
}

.footer-col-3 li {
  list-style-type:none;
  margin-top:10px;
}

.lower-footer {
  color:white;
  padding:20px 0 15px 0;
  text-align:center;
}

.lower-footer-copyright-image p {
  margin:0 20px;
}

.menu-footer-secondary-navigation-container {
  margin-top:0px;
}

.lower-footer-links p {
  margin:5px 0;
  font-size:var(--wp--preset--font-size--sm);
}

.lower-footer a {
  font-size:var(--wp--preset--font-size--base);
  color: inherit;
}

.lower-footer-nav {
  margin:0 0 0 -10px;
  padding-left:0;
}

.lower-footer-nav li {
  border-right:1px solid #FFFFFF;
  display:inline-block;
  font-weight:300;
  list-style-type:none;
  padding:0 10px;
  line-height:1.0;
}

.lower-footer-nav li:last-of-type {
  border-right:0;
}

.lower-footer-images {
  align-self:flex-end;
}

.lower-footer-images img {
  margin-right:8px;
}

.lower-footer-copyright p {
  margin-right:10px;
}

@media only screen and (min-width:768px) {
  .lower-footer-copyright-image {
    display:flex;
    align-items:flex-end;
    text-align: left;
  }

  .lower-footer-links {
    display:flex;
    flex-direction:column;

    align-items:flex-end;
    justify-content:center;
  }
  .footer-col-info, .footer-col-3{
    flex-direction: column;
    align-items: center;
  }
  .lower-footer-copyright {
    display:flex;
    text-align:right;
  }
}

@media only screen and (min-width:991px) {
  .footer-col-info, .footer-col-3{
    flex-direction: column;
    align-items: center;
  }
}

@media only screen and (min-width:1024px) {
  .lower-footer-links {
    align-items:flex-end;
    justify-content:center;
  }
}


/* Buttons
--------------------------------------------- */

/* Search Page
--------------------------------------------- */

.search-page hr {
  margin-top:40px;
}

.search-page .search-pagination {
  font-size:var(--wp--preset--font-size--md);
  margin:20px 0;
}

.search-results-item img{
  width: 100%;
}


/* Widgets
--------------------------------------------- */

/* Media
--------------------------------------------- */

/* Captions
--------------------------------------------- */

/* Search
--------------------------------------------- */

/* Hide any shortcodes or links for search results so user doesnt get confused */
.search-results .button {
  display:none;
}

.search-results .search-result-button.button {
  display:inline-block;
  margin-top:0;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

.acf-editor-wrap iframe {
  padding:0 20px;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

.form-modal {
  display:none;
  background:rgba(0, 0, 0, 0.8);
  color:#ffffff;
  display:none;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  z-index:999;
}

.form-modal-inner {
  background:#16D6C2;
  color:#17104D;
  padding:80px 15px 20px 15px;
  max-width:600px;
  margin:0 auto;
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

.form-modal-inner input {
  padding:30px !important;
}

.form-modal-inner div.wpforms-container-full .wpforms-form .wpforms-field {
  padding:5px 0 !important;
}

.form-modal-inner button[type=submit] {
  background:#17104D !important;
  color:#FFFFFF !important;
  font-family:var(--font-sans);
  font-size:var(--wp--preset--font-size--base) !important;
  padding:15px 70px !important;
  transition:background 0.5s;
}

.form-modal-inner button[type=submit]:hover {
  background:#7023bd !important;
}

.form-modal-inner label {
  color:#FFFFFF;
  font-family:var(--font-sans);
  font-weight:300;
  font-style:normal;
}

.form-modal-inner img {
  position:absolute;
  top:-80px;
  left:0;
  right:0;
  margin:0 auto;
  width:150px;
}

.form-modal-inner svg {
  cursor:pointer;
  position:absolute;
  right:20px;
  top:10px;
  width:44px;
}

.form-modal-inner svg path {
  transition:fill 0.5s;
}

.form-modal-inner svg:hover path {
  fill:#ffffff;
}

.form-modal-inner .wpforms-submit.form-signup-submit {
  display:block;
  margin:0 auto;
}

.form-modal div.wpforms-container-full .wpforms-form h3 {
  font-size:var(--wp--preset--font-size--xl);
  line-height:1.2;
  text-align:center;
  margin:20px 0;
}

@media only screen and (max-height:768px) {
  .form-modal-inner {
    top:70%;
    transform:translateY(-70%);
  }
}

@media only screen and (min-width:1280px) {
  .form-modal-inner {
    padding:80px 80px 20px 80px;
  }
}

/* Accessibility
--------------------------------------------- */

/* Alignments
--------------------------------------------- */


@media (min-width:600px) and (max-width:781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:only-child) {
    flex-basis:100% !important;
    flex-grow:0;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(even) {
    margin-left:0;
  }
}

@media (max-width:768px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis:100% !important;
  }
}