/*
Theme Name: Jannus
Theme URI: https://valice.com/
Author: Valice
Author URI: https://valice.com
Description: Simple customizable block theme based on Whitespace.
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
Requires at least: 6.3
Tested up to: 6.3
Requires PHP: 7.0
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: whitespace
Text Domain: jannus
*/

@import url("https://use.typekit.net/ynr7kto.css");

body {
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.wp-block-columns.rounded .wp-block-column {
  border-radius: 12px;
}

/* Slider */

.slide-wrapper {
    position: relative;
    width: 100%;
}

.slide-wrapper .headline {
    position: absolute;
    left: 80px;
    top: 180px;
    z-index: 999;
    max-width: 500px;
    line-height: 1.2;
}

.slide-wrapper .headline img {
    max-width: 300px;
}

.slide-wrapper .headline h1 {
    color: #fff;
    text-shadow: 3px 3px 5px #333;
    font-size: 60px;
    
}

.slick-slider .slick-slide {
    width: 100%;
}

.slick-slider .slick-slide .slide-inner {
    height: 900px;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.slick-slider .slick-slide .slide-inner .bottom-overlay {
    padding: 10px;
    color: #fff;
}

@media only screen and (max-width: 1060px) {
    .slick-slider .slick-slide .slide-inner {
        height: 450px;
    }

    .slide-wrapper .headline img {
        max-width: 150px;
    }
}

@media only screen and (max-width: 720px) {
    .slick-slider .slick-slide .slide-inner {
        height: 300px;
    }

    .slide-wrapper .headline h1 {
        font-size: 40px;
    }

    .slide-wrapper .headline {
        left: 40px;
        top: 100px;
    }
}

/* Programs and Board */

.board-members,
.program-listings {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
}

.program-listing,
.board-member {
    width: 300px;
    margin: 10px;
    padding: 20px;
    box-shadow: 0rem .2rem .3rem rgba(0,0,0,.16);
}

.board-member .board-image {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.board-member h2 {
    color: #57a2b7;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 20px;
}

.board-member span.position {
    display: block;
    font-size: 18px;
    line-height: 1.5;
}

.board-member span.location {
    display: block;
    font-size: 18px;
    font-style: italic;
    line-height: 1;
}

.board-member a.button {
    background-color: #FC6C36;
    color: #333;
    display: block;
    text-align: center;
    color: #fff;
    text-decoration: none;
    margin-top: 10px;
}

.board-bio {
    max-width: 800px;
    margin: 0 auto;
}

.fancybox-skin {
    border: 5px solid #57a2b7;
}

.program-listing .logo-area {
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.program-listing .logo-area img {
  max-height: 130px;
  width: auto;
}

.image-header {
    background-position: center;
    background-size: cover;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-header h1.entry-title {
    color: #fff;
    text-shadow: 3px 3px 5px #333;
}

.single-program .entry-header {
  text-align: center;
  background-color: #7b7a74;
  padding: 20px 10px;
}

.single-program .entry-header h1 {
    color: #fff;
}

.program-details {
    display: flex;
    align-items: center;
}

.program-details .program-data {
    width: 400px;
    padding: 20px;
    color: #626054;
}

.program-details .program-data .social {
    display: flex;
    justify-content: flex-start;
}

.program-details .program-data a {
    text-decoration: none;
    color: #626054;
}

.program-details h2 {
    font-size: 20px;
    color: #57a2b7;
}

.program-data-links {
    margin-top: 10px;
}

.program-data-links div {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.program-overview {
    font-family: capitolina, serif;
    font-weight: 400;
    font-style: italic;
    text-align: center;
    line-height: 1.1;
    color: #57A2B7;
}

.program-contacts {
    font-weight: 400;
    line-height: 1.2;
}

@media only screen and (max-width: 960px) {
    .program-details {
        flex-direction: column;
    }

    .program-details .program-data .social {
        justify-content: center;
    }

    .program-details .program-data {
        width: 100%;
        text-align: center;
    }
}

/* Flip Box */

/* Flip Card Stories */


.flip-card-wrapper {
}

.card {
	transform-style: preserve-3d;
	transition: all 0.8s ease;
	min-height: 450px;
}

.card .front {
	backface-visibility: hidden;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
}

.card .front .front-lower {
	position: absolute;
	bottom: 30px;
	text-align: center;
	color: #fff;
	padding: 10px;
	cursor: pointer;
	font-size: 20px;
  font-family: capitolina, serif;
	left: 0;
	right: 0;
}

.card .back {
	backface-visibility: hidden;
	transform: rotateY(180deg);
	display: none;
	padding: 20px 40px;
}

.impact-author {
  font-family: capitolina, serif;
}

.card .flip-button {
	position: absolute;
	bottom: 10px;
	color: #fff;
	height: 30px;
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}


.flipCard {
	transform: rotateY(180deg);
}

.card.flipCard > .front {
	display: none;
}

.card.flipCard > .back {
	display: block;
}

.card.flipCard .flip-button {

}

/* Mega Menu */

#mega-menu-wrap-menu-1 {
  width: 1200px;
  max-width: 100%;
}

@media only screen and (max-width: 850px) {
    #mega-menu-wrap-menu-1 {
      width: auto;
  }

  .site-header .wp-block-site-logo img.custom-logo {
    max-width: 200px;
  }
}

/* Impact Slider */

.slick-impact-slider {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px;
}

.slick-impact-slider .slick-track {
  display: flex;
  align-items: center;
}

.impact-slide {
  text-align: center;
  font-size: 22px;
}

.slick-slider button.slick-prev,
.slick-slider button.slick-next {
 background: none;
 border: none;
 color: transparent;
 position: absolute;
 z-index: 999;
 padding: 0;
 margin: 0;
}


.slick-slider button.slick-prev {
     top: 45%;
     left: 0;
}


.slick-slider button.slick-next {
     top: 45%;
     right: 0;
}


.slick-slider button.slick-prev:before {
 content: "\f341";
 font-family: 'dashicons';
 color: #fff;
 font-size: 40px;
}


.slick-slider button.slick-next:after {
 content: "\f345";
 font-family: 'dashicons';
 color: #fff;
 font-size: 40px;
}


/* Animations */

.fade-in.scrolled,
.fade-in.no-scroll {
	-webkit-animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.slide-in-bottom.scrolled,
.slide-in-bottom.no-scroll
 {
	-webkit-animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-fwd-center.scrolled,
.slide-in-fwd-center.no-scroll {
	-webkit-animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-right.scrolled,
.slide-in-right.scrolled.no-scroll {
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-left.scrolled,
.slide-in-left.no-scroll {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @-webkit-keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @-webkit-keyframes slide-in-fwd-center {
    0% {
      -webkit-transform: translateZ(-1400px);
              transform: translateZ(-1400px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-fwd-center {
    0% {
      -webkit-transform: translateZ(-1400px);
              transform: translateZ(-1400px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
  }

  /**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }

  /**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }