/*
Theme Name: LP Theme Charity Styles
Theme URI: https://literacyplanet.com
Author: Literacy Planet
*/

/* INTRO SECTION
################################################################################### */

.charity .logo {
	max-width: 12rem;
	max-height: 10rem;
}

.section-follow-us hr {
	margin: calc(var(--layout-unit)*4) 0;
}

.section-follow-us .socials {
	display: inline-flex;
	flex-wrap: wrap;
	margin: 2rem 0;
}

.section-follow-us .socials > div {
	width: 10rem;
}

.section-follow-us .socials h5 {
	margin: 1rem 0 0.5rem;
}

.section-follow-us .socials svg {
	font-size: 3rem;
	color: var(--blue);
}

.section-become-partner {
	padding: calc(var(--layout-unit)*4) 0;
}

.modal-register .character {
	max-width: 20rem;
	margin-top: -5rem;
	margin-bottom: 0.5rem;
	transform: translateX(-10%);
}

.modal-register input:not([type="button"]),
.modal-register textarea {
	background-color: var(--light-blue-lighter-x2);
	box-shadow: inset 0.2rem 0.2rem 0 rgba(0,0,0,0.2);
	transition: background-color 200ms;
}

.modal-register input:not([type="button"]):hover,
.modal-register input:not([type="button"]):focus,
.modal-register textarea:hover,
.modal-register textarea:focus {
	background-color: var(--light-blue-lighter-x3);
	box-shadow: inset 0.2rem 0.2rem 0 rgba(0,0,0,0.2);
}

@media (max-width: 499px) {

	.section-intro .image .planet {
		width: 120%;
		margin-left: -10%;
		max-width: none;
	}

	.section-intro .image .hands {
		position: relative;
		width: 100%;
		margin-top: -35%;
		z-index: 10;
	}

}

@media (min-width: 500px) and (max-width: 1023px) {

	.section-intro .image .planet {
		width: 100%;
		max-width: none;
	}

	.section-intro .image .hands {
		position: relative;
		width: 90%;
		margin-top: -35%;
		margin-left: 5%;
		z-index: 10;
	}

}

@media (max-width: 699px) {
	.section-follow-us .socials {
		width: 100%;
	}
	.section-follow-us .socials > div {
		width: 50%;
		padding: 1rem;
	}
}

@media (max-width: 1023px) {

	.section-intro {
		padding-bottom: calc(var(--layout-unit)*4);
		padding-top: calc(var(--layout-unit)*2);
	}

	.section-intro .info {
		text-align: center;
	}
	
	.section-intro .info .buttons .btn {
		margin: 0.5rem 0.2rem;
	}

	.section-intro .blob-mobile {
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.section-charities h2 {
		margin-bottom: 0;
	}

	.charity {
		text-align: center;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}

	.charity:last-child {
		border: none;
	}

	.charity .image {
		width: 100%;
		padding-top: 0;
	}

}

@media (min-width: 1024px) {

	.section-intro {
		padding-bottom: calc(var(--layout-unit)*4);
		padding-top: calc(var(--layout-unit)*4);
	}

	.section-intro .container {
		display: flex;
		justify-content: space-between;
	}

	.section-intro .info {
		width: 50%;
		order: 0;
	}

	.section-intro .info .buttons .btn:first-child {
		margin-right: 0.2rem;
	}

	.section-intro .image {
		width: 50%;
		order: 1;
	}

	.section-intro .image .planet {
		width: 100%;
		margin-left: 5%;
		max-width: none;
		transform: translateY(-15%);
		z-index: 5;
	}

	.section-intro .image .hands {
		position: relative;
		margin-top: -48%;
		z-index: 10;
		width: 85%;
		margin-left: 12.5%;
	}

	.section-intro .blob-desktop {
		top: 15%;
		left: 65%;
		width: 25rem;
		min-width: 35%;
		transform: translate(0%, -30%);
		margin-top: 0;
	}

	.charity {
		align-items: center;
	}

	.charity .info {
		width: 50%;
	}

	.charity .image {
		width: 50%;
	}
	.charity .blob-left {
		top: 0;
		width: 30rem;
		right: 75%;
		min-width: 25%;
		transform: translate(0%, -25%);
	}

	.charity .blob-right {
		top: 0;
		left: 70%;
		width: 20rem;
		min-width: 30%;
		transform: translate(0%, -20%);
	}


	.charity:nth-child(odd) .info {
		order: 0;
	}

	.charity:nth-child(odd) .image {
		order: 1;
	}

	.charity:nth-child(odd) .blob-left {
		display: none;
	}

	.charity:nth-child(even) .info {
		order: 1;
	}

	.charity:nth-child(even) .image {
		order: 0;
	}

	.charity:nth-child(even) .blob-right {
		display: none;
	}

}