/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Flip Cards
-----------------------------------------------------------------*/
.bg-hesperiidae {
	background-color: #c9cbcf !important;
}

.bg-lycaenidae {
	background-color: #36a2eb !important;
}

.bg-nymphalidae {
	background-color: #ff9f40 !important;
}

.bg-papilionidae {
	background-color: #ffcd56 !important;
}

.bg-pieridae {
	background-color: #1abc9c !important;
}

.bg-riodinidae {
	background-color: #9966ff !important;
}

.bg-nocturna {
	background-color: #34495e !important; /* Navy blue color */
}

/* Change text color to black for day butterflies */
.bg-hesperiidae > .flip-card-inner > p,
.bg-lycaenidae > .flip-card-inner > p,
.bg-nymphalidae > .flip-card-inner > p,
.bg-papilionidae > .flip-card-inner > p,
.bg-pieridae > .flip-card-inner > p,
.bg-riodinidae > .flip-card-inner > p {
    color: #343a40 !important;
	font-size: 13px;
	margin-bottom: 10px;
}

.bg-nocturna > .flip-card-inner > p {
    color: #fff !important;
	font-size: 13px;
	margin-bottom: 10px;
}

/* Black button for day butterflies */
.bg-hesperiidae > .flip-card-inner > button,
.bg-lycaenidae > .flip-card-inner > button,
.bg-nymphalidae > .flip-card-inner > button,
.bg-papilionidae > .flip-card-inner > button,
.bg-pieridae > .flip-card-inner > button,
.bg-riodinidae > .flip-card-inner > button {
    color: #343a40;
	font-size: 15px;
    background-color: transparent;
    border: 2px solid rgba(52, 58, 64, 0.6); /* Default border with a bit of opacity */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.5s, color 0.5s;
	text-transform: uppercase;
}

.bg-hesperiidae > .flip-card-inner > button:hover,
.bg-lycaenidae > .flip-card-inner > button:hover,
.bg-nymphalidae > .flip-card-inner > button:hover,
.bg-papilionidae > .flip-card-inner > button:hover,
.bg-pieridae > .flip-card-inner > button:hover,
.bg-riodinidae > .flip-card-inner > button:hover {
    background-color: #343a40;
    color: #fff;
    border-color: #343a40; /* Border color matches background on hover */
}

/* White button for moths */
.bg-nocturna > .flip-card-inner > button {
	color: #fff;
	font-size: 15px;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6); /* Default border with a bit of opacity */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.5s, color 0.5s;
	text-transform: uppercase;
}

.bg-nocturna > .flip-card-inner > button:hover {
    background-color: #fff;
    color: #343a40;
    border-color: #fff; /* Border color matches background on hover */
}


/* Responsive grid for flip cards*/
.flip-card-grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px; /* Adjust the spacing between items as needed */
	padding-top: 10px; /* Add some top padding to create space for the shape */
}

.flip-card-grid-item {
width: 100%;
}

/* For larger screens (992px and above) */
@media (min-width: 992px) {
	.flip-card-grid-container {
		grid-template-columns: repeat(3, 1fr); /* Three columns for larger screens */
	}
}

.flip-card-img-wrap {
	flex: 0 0 300px; /* Set the width of the image container */
	margin: 0 20px 20px 0;
  }

  .flip-card-text-wrap {
	flex: 1; /* Let the text container take the remaining width */
  }

@media (max-width: 767px) {
.flip-card-img-wrap {
	float: none;
	margin: 0 auto 20px;
	display: block;
}
}

/* Not used anymore, created if a background is behind the twitter feed*/
.twitter-feed {
	display: flex;
  	justify-content: center; /* Horizontal centering */
  	align-items: center; /* Vertical centering */
	border-radius: 18px; /* Adjust the border-radius value for more or less rounding */
  	background-color: rgba(255, 255, 255, 0.5); /* Adjust the alpha value (0 to 1) for transparency */
}

/* ----------------------------------------------------------------
	Index Background images
-----------------------------------------------------------------*/

.background-image-flowers {
	background: url('../images/index/flowers.jpg') center bottom; 
	background-repeat: repeat-x; 
    background-size: 100%;

	/* Media query for displays wider than 2K */
    @media screen and (min-width: 1439px) {
        background-image: url('../images/index/flowers-hq.jpg');
    }
}

.background-image-forest {
	/* Fallback image for displays up to 1920px */
	background: url('../images/index/forest.jpg') center top; 
	background-repeat: repeat-x; 
	background-size: cover;
	height: 100%;  /* Make the background image fill the height of the section */

	/* Media query for displays wider than 2K */
    @media screen and (min-width: 1439px) {
        background-image: url('../images/index/forest-hq.jpg');
    };

	/* Media query for mobile devices */
    @media screen and (max-width: 767px) {
        background: #F9F9F9;
    }
}

.counter.logros {
	font-size: 38px !important;
	margin-top: 15px;
	font-weight: 600 !important;
	font-family: 'Roboto', sans-serif !important;
}

.i-plain {
	text-shadow: none;
}

/* ----------------------------------------------------------------
	MDA Butterfly Flapping
-----------------------------------------------------------------*/

.butterfly-flapping-container {
	display: flex; 
	justify-content: center; 
	align-items: center;
}

.butterfly-flapping {
	width:100%;
	display:flex;
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	perspective:700px;


  }
  .butterfly-flapping::before,
  .butterfly-flapping::after{
	content:"";
	padding-top:56%; /* ratio based on your image */
	flex:1; /* half the main element size */
	background-image:url(../images/index/helle.png);
	background-size:200% 100%; /* twice bigger than the pseudo element to get half the image*/
	animation:left 1.5s ease-in-out infinite alternate;  
	transform-origin:right;
	background-blend-mode: multiply; /* Apply alpha channel */
  }
  .butterfly-flapping::after {
	background-position:right; /* get the right part of the image */
	animation-name:right;
	transform-origin:left;
  }
  
  @keyframes left{
	to {transform:rotateY(50deg)}
  }
  @keyframes right{
	to {transform:rotateY(-50deg)}
  }


/* ----------------------------------------------------------------
	Custom Zerynthia Spinner
-----------------------------------------------------------------*/

/* Overwrite default template spinner, the original is commented out in style.css */
.css3-spinner {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	text-align: center;
	background-color: #FFF;
}

.spinner-zerynthia {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
	width: 200px;
	height: 200px;
}
@keyframes ldio-38lsbpv6k17 {
	0% { transform: rotate(0deg) }
	50% { transform: rotate(180deg) }
	100% { transform: rotate(360deg) }
}
.ldio-38lsbpv6k17 div {
	position: absolute;
	animation: ldio-38lsbpv6k17 1s linear infinite;
	width: 160px;
	height: 160px;
	top: 20px;
	left: 20px;
	border-radius: 50%;
	box-shadow: 0 4px 0 0 #FF2612;
	transform-origin: 80px 82px;

}
.loadingio-spinner-eclipse-8jcrlodc36 {
	width: 200px;
	height: 200px;
	display: inline-block;
	overflow: hidden;
	background: transparent;
}
.ldio-38lsbpv6k17 {
	width: 100%;
	height: 100%;
	position: relative;
	transform: translateZ(0) scale(1);
	backface-visibility: hidden;
	transform-origin: 0 0; /* see note above */
}
.ldio-38lsbpv6k17 div { box-sizing: content-box; }
.spinner-logo {
	z-index: -1;
	position: absolute;
	top: 45px;
	left: 45px;
	width: 120px;
	height: 120px;
	}

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


.button-healing { background-color: #00b0f0; }
.button-3d.button-healing:hover,
.button-reveal.button-healing:hover,
.button-border.button-healing:hover,
.button-border.button-healing.button-fill:before { background-color: #00b0f0 !important; }

.button-border.button-healing {
	color: #00b0f0;
	border-color: #00b0f0;
}