/*!
Theme Name: SE Wellbeing Week
Author: ROC Group - Ian Israel
Author URI: https://rocgroup.com
Description: Schneider Electric Wellbeing Week's participation tracker.
Version: 1.0.0
Text Domain: se-wellbeing-week

SE Wellbeing Week is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Global */
:root {
	/* Colors */
	--green: #46B751;
	--lightGreen: #EBF5E9;
	--orange: #F7941E;
	--blue: #00BDF2;
	--lightGrey: #F6F2F2;
	--midGrey: #cccccc;
	--darkGrey: #2D2D2D;
}

* {
	font-family: Arial, Helvetica, sans-serif;
}


h1 {
	font-size: 3rem;
	color: white;
	/* border-top: 1px solid white;
	border-bottom: 1px solid white;
	padding: 1rem 0; */
	text-align: center;
	margin: 0 auto;
	display: inline-block;
}

h2 {
	color: var(--green);
	margin-top: 0;
}

h3 {
	color: white;
	margin-bottom: 0;
}

.instructions {
	font-size: 1.25rem;
}

.black,
.green,
.blue,
.orange {
	font-weight: bold;
}

.black {
	color: black;
}

.green {
	color: var(--green);
}

.blue {
	color: var(--blue);
}

.orange {
	color: var(--orange);
}

/***** Page Layout *****/
.page-wrapper {
	min-height: calc(100vh - 88px - 68px);
}

.error,
.error a,
.error a:visited,
.error a:hover {
	font-style: italic;
	color: red;
}

/*** Header ***/
.header-top-container {
	width: 80%;
	margin: 0 auto;
	padding: 1rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo-container img {
	height: 40px;
	width: auto;
}

/* Language Selector */
.lang-selection-container p {
	margin: 0;
	font-weight: bold;
}

.country-selector.weglot-dropdown .wgcurrent {
	border: none;
}

.country-selector a,
.country-selector a:visited {
	color: var(--darkgGray);
	transition: .3s;
}

.country-selector li {
	transition: .3s;
}
.country-selector li:hover {
	background-color: var(--green);
}

.country-selector li:hover a {
	color: white;
}

/*** Footer ***/
footer {
	background-color: var(--darkGrey);
	padding: 1rem 0;
}

footer * {
	color: white;
}

footer p {
	margin: 0;
}

.footer-container {
	display: flex;
	justify-content: space-between;
	width: 80%;
	margin: 0 auto;
	gap: 33%;
}

footer a,
footer a:visited,
footer a:hover {
	color: white;
}

/***** Landing Page *****/
.welcome-container {
	background-image: url('/wp-content/uploads/se-wellbeing-hero-f.jpg');
	background-size: cover;
	background-position: left center;
	/* display: flex;
	align-items: flex-end;
	justify-content: center; */
	min-height: 400px;
	padding-bottom: 4rem;
	position: relative;
}

.welcome-grid .left {
	text-align: center;
}

.text-wrapper {
	display: inline-block;
	text-align: right;
}

.hashtag-container {
	padding: 5px 10px;
	background-color: white;
	text-align: left;
	display: table;
}

.welcome-container .hashtag-container {
	position: absolute;
	right: 10%;
	top: 2rem;
	font-size: 1.25rem;
}

.hero-content-container {
	background-color: var(--green);
	padding: 2rem;
	text-align: center;
}

.section-container {
	width: 80%;
	padding: 4rem 0;
	margin: 0 auto;
}

.early-bird-message {
	font-size: 1.17rem;
}

.early-bird-message a,
.early-bird-message a:visited,
.early-bird-message a:hover {
	color: var(--green);
}

.login-wrapper {
	text-align: center;
}

.login-wrapper h2 {
	margin: 0;
}

.login-wrapper p,
.login-wrapper form,
.login-wrapper form * {
	display: inline-block;
}

input[name="sesa"] {
	padding: 5px 10px;
	border: 1px solid var(--green);
}

[type="submit"].submit-btn,
.submit-btn,
.submit-btn:visited {
	border: none;
	border-radius: 0;
	background-color: var(--green);
	color: white;
	cursor: pointer;
	text-decoration: none;
	text-transform: uppercase;
	padding: 7px 20px;
}

/* Kindness Month Page */
#kindness #body-page-header {
	background-image: url('/wp-content/uploads/2022/10/image-gradient-top.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.intro-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 4rem;
	margin-bottom: 4rem;
}

.intro-content .instructions {
	margin-top: 0;
}

.callout {
	border: 1px solid var(--green);
	padding: 1rem;
}

.callout h3 {
	color: var(--green);
	text-transform: uppercase;
	font-size: 1.25rem;
	margin-top: 0;
}

.callout p {
	margin-bottom: 0;
}

.callout .important {
	display: flex;
	gap: 1rem;
	align-items: center;
}

#kindness h2 {
	font-family: 'BrandonGrotesqueBlack';
	color: var(--orange)!important;
	text-transform: uppercase;
}

.line {
	margin-top: 4rem;
	border: 1px solid #d9d9d9;
}

.kindness-heading-grid {
	display: grid;
	margin: 4rem 0;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
}

.kindness-heading {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	align-items: center;
}

.kindness-heading img {
	display: block;
	height: 90px;
	margin-bottom: .5rem;
}

.kindness-heading h3 {
	font-family: 'BrandonGrotesqueBlack';
	color: black;
	font-size: 30px;
	padding: 0;
}

.kindness-heading h4 {
	font-family: 'BrandonGrotesqueBold';
	color: var(--orange)!important;
	font-size: 15px;
	text-transform: uppercase;
	padding: 0;
	font-weight: normal;
	margin-top: 1rem;
}

.kindness-heading>h4 {
	letter-spacing: 2px;
}

.kindness-action-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	width: 100%;
	grid-gap: 1rem;
	margin-top: 1rem;
}

.kindness-action {
	background-color: transparent;
	min-height: 380px;
	perspective: 1000px;
}

.day_1,
.day_2,
.day_3,
.day_4,
.day_5 {
	pointer-events: none;
	filter: grayscale(1);
}

.kindness-action[data-selection="selected"] .kindness-action-inner {
	transform: rotateY(180deg);
}

.kindness-action-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.kindness-action-front, 
.kindness-action-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	padding: 2rem;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
	border-top: 2px solid var(--green);
	cursor: pointer;
}

.kindness-action-front {	
	background-color: var(--lightGrey);
	display: flex;
	flex-direction: column;
}

.day {
	position: absolute;
	top: 0;
	right: 2rem;
	background-color: var(--green);
	color: white;
	text-transform: uppercase;
	padding: 10px 20px;
}

/* .kindness-action-front p:last-of-type:after {
	content: "";
	background-image: url("/wp-content/uploads/2022/10/icon-arrow.svg");
	width: 20px;
	height: 14px;
	display: block;
	font-family: 'BrandonGrotesqueBold';
	font-size: 1.25rem;
	margin-top: 1rem;
} */

.kindness-action-front h3 {
	color: var(--darkGrey);
	text-align: center;
	font-size: 2rem;
	margin: 0 0 2rem;
}

.kindness-action-front h4 {
	border-top: 1px solid var(--midGrey);
	margin: auto 0 0;
	padding: 1rem 0 0;
	text-align: right;
	font-weight: 400;
}

.kindness-action-front h4:after {
    font: var(--fa-font-solid);
    content: "\f058";
	margin-left: .5rem;
	color: var(--midGrey);
}

.kindness-action-front img {
	display: block;
	margin: 15% auto;
	height: 90px;
}

.kindness-action-back {
	background: var(--lightGreen);
	transform: rotateY(180deg);
}

.back-header {
	background-color: white;
	margin: -2rem -2rem 0;
	padding: 1.5rem 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-header .hashtag-container {
	font-size: 1.25rem;
	padding: 0;
}

.back-header img {
	display: block;
	margin: 0;
	height: 50px;
}

.kindness-action-back-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
	margin-top: 2rem;
}

/* .kindness-action-front,
.kindness-action-back {
	display: flex;
	align-items: center;
} */

.back-copy p {
	margin-top: 0;
}

.back-copy a,
.back-copy a:visited,
.back-copy a:hover {
	color: var(--green);
}

.form-container {
	margin: 3rem 0;
	text-align: right;
}

/* .form-container img {
	display: block;
	height: 40%;
	margin: 15% auto;
} */

.form-container .submit-btn {
	padding: 10px 20px;
	text-align: center;
	margin: 0 auto;
	text-transform: uppercase;
	filter: grayscale(1);
}

.form-container .submit-btn:hover,
.form-container .submit-btn:active {
	color: white;
}

/* Banner */
.banner-container {
	background-color: #3f4448;
	margin-top: 4rem;
}

.banner-grid {
	display: grid;
	grid-template-columns: 1.25fr 2fr;
	grid-gap: 4rem;
}

.banner-img {
	background-image: url('/wp-content/uploads/se-wellbeing-banner.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.banner-content {
	padding: 4rem 0;
	width: 80%;
	margin: 0 auto;
}

.banner-content *,
.banner-content a:hover,
.banner-content a:visited {
	color: white;
}

.banner-content h2 {
	font-size: 2rem;
}

.banner-content p {
	font-weight: 600;
}

.footnote {
	font-size: .75rem;
	margin-bottom: 0;
}

.back-icon  img {
	height: 50px;
	display: block;
	margin: 2rem auto 0;
}

/* Analytics Page */
.analytics-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-gap: 2rem;
}

.metric-container {
	background-color: var(--lightGreen);
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
	padding: 2rem;
	text-align: center;
}

.metric-container h3{
	color: var(--darkGrey);
}

.metric-container h4 {
	color: var(--green);
	font-size: 3rem;
}

.country-table {
	border-collapse: collapse;
}

.country-table th {
	text-align: left;
	border-bottom: 2px solid var(--green);
}

.country-table td {
	border-bottom: 1px solid var(--darkGrey);
	padding: 5px 10px;
}

.country-table tbody td:even {
	background-color: var(--lightGrey);
}

/***** Success Container *****/
.success-container {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 500;
	display: flex;
    align-items: center;
    justify-content: center;
}

.success-container:before {
	content: "";
	background: url(/wp-content/uploads/se-wellbeing-star.png);
	background-size: cover;
	background-repeat: no-repeat;
	height: 64px;
	width: 70px;
	margin: 0 1rem;
}

@media only screen and (max-width: 1280px) {
	.section-container {
		width: 90%;
	}
}

@media only screen and (max-width: 1024px) {
	.kindness-action-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 980px) {
	.kindness-action-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.section-container,
	.banner-content,
	.footer-container {
		width: 90%;
	}

	.banner-grid {
		grid-template-columns: 1.5fr 2fr;
		grid-gap: 0;
	}
}

@media only screen and (max-width: 479px) {
	.kindness-action-grid {
		grid-template-columns: 1fr;
	}

	.banner-grid {
		grid-template-columns: 1fr;
	}

	.banner-img {
		min-height: 220px;
	}

	.banner-content h2 {
		font-size: 1.75rem;
	}
}

/* 
.kindness-action-back p {
	color: white;
} */

/* .kindness-action-front p,
.kindness-action-back p {
	margin: 0;
} */

/* .entry-section {
	display: none;
	margin: 0 -30px;
	padding: 6rem 8rem;
	background: url('/wp-content/uploads/2022/10/image-gradient-bottom.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	min-height: 450px;
	align-items: center;
}

.entry-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 4rem;
	position: relative;
	z-index: 1;
}

.entry-grid h1 {
	font-family: 'BrandonGrotesqueBold';
	font-size: 45px;
	text-transform: uppercase;
	color: white;
}

.entry-grid h4, 
.kindness-action-back h4 {
	font-family: 'BrandonGrotesqueBold';
	font-size: 1.25rem;
	color: var(--orange)!important;
	text-transform: uppercase;
	font-weight: normal;
}

.entry-grid p {
	color: white;
}

.entry-content p {
	margin: 0;
}

.wpcf7 input,
.wpcf7 select {
	padding: 10px;
	width: 100%;
	color: #4e4e4e;
	border: none;
}

.wpcf7 .submit-button {
	background-color: var(--orange);
	color: var(--darkGrey);
	width: 48%;
	margin-right: 4%;
	display: inline-block;
	padding: 10px 15px 5px;
	transition: .3s;
}

.wpcf7 .submit-button:hover {
	background-color: black;
	color: white;
}


.wpcf7 .clear-button {
	font-family: 'BrandonGrotesqueRegular';
	font-weight: normal;
	border: none;
	background: transparent;
	color: white!important;
	text-align: left;
	width: 45%;
	display: inline-block;
	padding: 0;
}

.wpcf7 .submit-button:hover,
.wpcf7 .clear-button:hover {
	cursor: pointer;
}

.wpcf7 .wpcf7-spinner {
	display: block;
	position: absolute;
}

::placeholder {
	color: #4e4e4e!important;
	opacity: 1;
}

#kindness .wpcf7-not-valid-tip,
#kindness .wpcf7-response-output {
	color: white;
}

.wpcf7-response-output {
	display: none
}

.wings {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 65%;
}

.success-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	opacity: 0;
	text-align: center;
	width: 40%;
}

.success-container h1 {
	color: var(--orange)!important;
	font-family: 'BrandonGrotesqueBold';
	font-size: 45px;
	text-transform: uppercase;
}

.success-container h4 {
	color: white!important;
	font-family: 'BrandonGrotesqueBold';
	font-size: 1.25rem;
	text-transform: uppercase;
	font-weight: normal;
}

.success-container p {
	color: white!important
}

.success-container a {
	display: block;
	width: 50%;
	margin: 0 auto;
	text-align: center;
}

.success-container a:hover {
	text-decoration: none;
}

.cta-btn {
	font-family: 'BrandonGrotesqueBold';
	padding: 10px 10px 5px;
	text-transform: uppercase;
	position: relative;
	display: inline-block;
	transition: .3s;
	z-index: 1;
} 

.cta-btn.gold {
	background-color: var(--green);
	color: var(--darkgGray);
	transition: .3s;
} 

.cta-btn.orange {
	background-color: var(--orange);
	color: white;
}

.cta-btn:hover,
.cta-btn.gold:hover,
.cta-btn.orange:hover {
	text-decoration: none;
	cursor: pointer;
	background-color: black;
	color: white;
} */