/*!
Theme Name: intraAct v1.0
Theme URI: http://underscores.me/
Author: Michel Ravey
Author URI: https://www.michelravey.com/
Description: IntInt.org | IntraAct v1.0 | 2025, Sept | Design by So-Hyun Bae @ été studio | WebDev by Michel Ravey
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: intraact
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

intraAct 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/
*/

:root {
  --yellow: #F3D620;
  --lightGrey: #f5f4ec;
  --grey: #c4cdd3;
  --darkGrey: #bbc2c9;
  --darkBrown: #1b1b1b;

  --margin1:  48px;
  --padding1:  65px;

}

body { 
	margin: 0;padding: 0;
	/*background-color: var(--lightGrey);*/
	background-color: var(--yellow);
}

body.page {
	background-color: var(--yellow);
}

div {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: solid 0px tomato;
	margin: 0;
}
::-webkit-scrollbar { display:none; }
a { 
	text-decoration: none;
	transition:  all 0.2s ease-in;
	-webkit-transition:  all 0.2s ease-in;
	-moz-transition:  all 0.2s ease-in;
}
a:link, a:visited { color:var(--darkBrown); }
a:hover, a:active { color:#000; }

.clear { clear:both; }


::-webkit-scrollbar { display:none; }


/* * * * * * * * * * * * * * * 
 * * * * * * * * * * * * * * * 
 * * * * * * * * * * * * * * * 



ONE-PAGER - 2025.08


* * * * * * * * * * * * * * * 
* * * * * * * * * * * * * * * 
* * * * * * * * * * * * * * */


.container {
	position: relative;
	width: 100vw;
	min-height: 100px;
}
.container.yellow { background-color:var(--yellow); }
.container.lightgrey { background-color:var(--lightGrey); }
.container.grey { background-color:var(--grey); }

.content {
	position: relative;
	width: 100%; max-width: 1280px;
	margin: 0 auto;
	padding: var(--margin1) var(--padding1);
}
.fullWidth { 
	position: relative;
	width:100%; min-height: 600px;
	background-repeat: no-repeat;
	background-position:  center center;
	background-size: cover;
}
.fullWidth img { width:100%;height:auto; }

.col1 {
	position: relative;
	float: left;
	width: 50%;
	padding-right: 15px;
}
.col2 {
	position: relative;
	float: left;
	width: 50%;
	padding-left: 15px;
	display: flex;justify-content: flex-end;
}
.col2_img {
	right: 0;
	width: 350px;
}
.col2_img img { width:100%; }


/* INTRO TITLE */
h1 { 
	font-family: 'WorkSans-Medium';
	font-size: 176px;
	/* font-size: 13vw; */
	color: var(--darkBrown);
	margin: 0;
}

/* HUGE NUMBER */
h2 {
	font-family: 'WorkSans-Light';
	font-size: 155px;
	color: var(--darkBrown);
	margin: 0;
	font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* MOST CHAPTER TITLES */
h3 {
	font-family: 'WorkSans-Light';
	font-size: 50px;
	line-height: 1.1em;
	color: var(--darkBrown);
	margin: 0;
}
h3.chapter { padding-bottom:60px; }

/* tagline */
h4 {
	font-family: 'WorkSans-SemiBold';
	font-size: 29px;
	color: #000;
	margin: 0;
}

/* scroll down, buttons, read more, chapter reminder */
h5 {
	font-family: 'WorkSans-SemiBold';
	font-size: 16px;
	color: var(--darkBrown);
	text-transform: uppercase;
	margin: 0;
}
.lgd_container {
	padding-top: 20px;
	padding-bottom: 150px;
}
.lgd {
	font-family: 'WorkSans-SemiBold';
	font-size: 16px;
	color: var(--darkBrown);
}
.quote {
	font-family: 'WorkSans-Italic';
	font-size: 50px;
	line-height: 1.2em;
	color: var(--darkBrown);
}
.labor {
	font-family: 'WorkSans-Regular';
	font-size: 20px;
	line-height: 1.3em;
	color: var(--darkBrown);
	
	/*text-align:justify;
	text-justify: inter-word;
	*/
	
}
.labor p:first-child { margin-top:0; }
.notes {
	font-family: 'WorkSans-Regular';
	font-size: 16px;
	line-height: 1.3em;
	color: var(--darkBrown);
}

.button {
	position: relative;
	display: flex;
	float: left;
	margin-right: 15px;
	width: 103px;height: 103px;
	justify-content: center;align-items: center;
	background-color: var(--darkBrown);
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	cursor: pointer;
}
.button h5 { color:white; }
.button.yellow:hover { background-color: #F3D620;transform: rotate(-15deg); }
.button.red:hover { background-color: #DA4014;transform: rotate(-15deg); }
.button.blue:hover { background-color: #4A77DC;transform: rotate(15deg); }







/* * * * * * * * * * * * * * * 

MENU

* * * * * * * * * * * * * * */
#menu {
	position: fixed;
	top: var(--margin1);
	left: 50%;
	margin-left: -386px;
	width: 772px;height: 60px;
	z-index: 100000;
	border: solid 0px yellow;
	transition:  all 0.2s ease-in;
}	
#menu-bg {
	position: absolute;z-index: 100;
	top: 0;left: 0;width: 100%;height: 100%;
	border-radius:  25px;
	background-color: #fff;
	opacity: 0.9;
}
#menu-content {
	position: relative;z-index: 200;
	top: 0;left: 0;width: 670px;height: 100%;
	margin: 0 auto;
	padding: 16px 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#menu .menu-title {
	font-family: 'WorkSans-SemiBold';
	font-size: 24px;
	color: var(--darkBrown);
	cursor: pointer;
	margin-right: 30px;
	margin-top: -5px;
}

#menu .menu-item {
	font-family: 'WorkSans-Medium';
	font-size: 16px;
	color: var(--darkBrown);
	cursor: pointer;
}

#menu-lang {
	/* width: 100px; */
	font-family: 'WorkSans-SemiBold';
	font-size: 16px;
	color: var(--darkBrown);
	margin-left: 30px;
	display: flex;
	/*justify-content: space-around; */
}
.menu-lang-off { color:#bdb794; }
.menu-lang-sep { 
	font-family: 'WorkSans-Regular';
	margin: -1px 7px 0 7px; 
}

#menu a {
	text-decoration: none;
	transition:  all 0.2s ease-in;
}
#menu a:link, #menu a:visited { color:#000; } 
#menu a:active, #menu a:hover { color:#bdb794; } 

#menu a.menu-lang-off { color:#a39f8e; }


/* SMARTPHONE */

#menu-hamburger, #menu-close {
	position: fixed;
	top: 50px;
	right: 20px;
	height: 49px;width: fit-content;
	background-color: #fff;
	padding: 16px 22px;
	border-radius: 50px;
	color: #000;
	z-index: 100000;
	transition:  all 0.2s ease-in;
	cursor: pointer;
	display: none;
}

#menu-smartphone {
	position: fixed;top:0;
	width: 100vw;height: 100vh;
	background-color: var(--darkGrey);
	background: linear-gradient(180deg,rgba(187, 194, 201, 1) 70%, rgba(255, 255, 255, 0.7) 100%);
	z-index: 50000;
	overflow-y: auto;
	display: none;
}

#menu-smartphone-content {
	position: relative;
	left: 0;width: 100%;
	padding: 56px 48px;
}
#menu-smartphone .menu-title {
	font-family: 'WorkSans-SemiBold';
	font-size: 24px;
	color: var(--darkBrown);
	cursor: pointer;
	margin-bottom: 48px;
}

#menu-smartphone .menu-item {
	font-family: 'WorkSans-Medium';
	font-size: 48px;
	color: var(--darkBrown);
	cursor: pointer;
}
#menu-smartphone #menu-lang { margin-left:0; }
#menu-smartphone #menu-lang .menu-item {
	margin-top: 75px;margin-bottom: 65px;
	font-family: 'WorkSans-SemiBold';
	font-size: 16px;
}

/* remove when displaying menu-lang */
#menu-smartphone #menu-footer {
	margin-top: 75px;margin-bottom: 65px;
}

#menu-smartphone a {
	text-decoration: none;
	transition:  all 0.2s ease-in;
}
#menu-smartphone a:link, #menu-smartphone a:visited { color:#000; } 
#menu-smartphone a:active, #menu-smartphone a:hover { color:#6d7174; } 

#menu-smartphone a.menu-lang-off { color:#a39f8e; }

#menu-smartphone h5 { text-transform: none;font-size:16px; }


/* * * * * * * * * * * * * * * 

INTRO

* * * * * * * * * * * * * * */

.screen {
	position: relative;
	width: 100%;height: 100vh;
}

#intro-screen {
	margin-top: 100px;
	/*background-image: url(imgs/IntraAct-Mockup_anim.gif);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;*/
}

#intro-screen-bg {
	position: absolute;
	top: -5px;left: 0;width: 100vw;height: 100vh;
	z-index: 5000;
	filter: blur(3px);
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	overflow: hidden;
}
#intro-screen-bg lottie-player {
	position: absolute;
	top: -50%;left: -50%;
	width:200%;height:200%;opacity:0.4; 
}

#intro-screen-gradient {
	position: absolute;
	top: 0;left: 0;width: 100vw;height: 100vh;
	z-index: 6000;
	background: RGBA(255, 255, 255, 0);
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 50%, rgba(243, 214, 32, 1) 100%);
}

#intro-screen-main {

	
	left: 0;
	top: calc(50% - 85px);margin-top: -100px;
	height: 124px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;

}
#intro-screen-main h1, #intro-screen-main h4 { 
	margin: 0;
}
#intro-screen-main .intro-screen-title { 
	position:absolute;
	left:var(--padding1);
	width: 53.35%; height: 100%;
	background-image: url(imgs/intraAct-logo.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
}
#intro-screen-main .intro-screen-tagline { 
	position:absolute;
	right: var(--padding1);
	width: 21.32%; height: 100%;
	background-image: url(imgs/intraAct-tagline.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right bottom;
}

#intro-screen-scroll {
	position: absolute;
	bottom: var(--margin1);;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: solid 0px blue;
	z-index: 10000;
	cursor: pointer;
}
#intro-screen-scroll-img {
	position: relative;margin-top: 20px;
	width: 100%;height: 15px;
}
#intro-screen-scroll-img img { width: 57px;height: 15px; }

#hidden_digits { position: absolute;bottom: 0;left: 0;z-index:1; }

#intro2 {
	/*
	display: flex;
	align-items: center;
	*/
	padding-top:130px;
}
#intro2-header { max-width: 600px;margin-bottom:var(--margin1); }
#intro2-content { max-width: 450px;margin-bottom:75px; }
#intro2-more { margin-bottom:275px; }

#intro-screen-smartphone {
	position: absolute;
	width: 100%;height: 100%;
	margin-top: -120px;
	display: none;
	z-index:10000;
}
#intro-screen-smartphone .intro-screen-title { 
	position:absolute;
	width: 82%; height: 100%;
	left: 9%;margin-top: -7%;
	background-image: url(imgs/intraAct-logo.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
#intro-screen-smartphone .intro-screen-tagline { 
	position:absolute;
	width: 57%; height: 100%;
	left: 21%;
	margin-top: 7%;
	background-image: url(imgs/intraAct-tagline.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#what_to_display, #each { display:none; }
#final_msg, #final_msg2 {
  position: relative;
  /*width: 400px;height: 80px;*/
  border: solid 0px lightgrey;
  display: flex;
  flex-flow: row wrap;
}
#final_msg div, #final_msg2 div {width: fit-content;border: solid 0px tomato;}




/* * * * * * * * * * * * * * * 

METHOD

* * * * * * * * * * * * * * */
#method-more { margin-top: 75px;margin-bottom:200px; }




/* * * * * * * * * * * * * * * 

RESULTS

* * * * * * * * * * * * * * */
#results { padding-top:175px;z-index: 100; }
#results h3.chapter { max-width: 800px;padding-bottom:72px; }
#results-content { max-width: 640px;margin-bottom:275px; }
#results-quote { margin-bottom:70px; }
.results-beforeAfter { text-transform:none; }
#results-more { margin-bottom:120px; }

#intro2-header.results { /*z-index:200;*/ }

.results-progress-bar { 
	position: relative;
	width:100%;height: 40px;max-width:920px; 
	margin-bottom: 30px;
	background-color: #000;
	font-family: 'WorkSans-Regular';
	font-size: 16px;
	color: var(--darkBrown);

}
.results-progress-title {
	position: absolute;
	top: 0;left: 0;
	width: fit-content;height: 100%;
	z-index: 300;
	padding: 11px 12px;
}
.results-progress-positive {
	position: absolute;
	top: 0;left: 0;
	width: 0%;height: 100%;
	padding: 11px 12px;
	background-color: #fff;
	color: #fff;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	z-index: 200;
}
.results-progress-negative {
	position: absolute;
	top: 0;left: 0%;
	width: 0%;height: 100%;
	padding: 11px 12px;
	background-color: #000;
	color: #000;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	z-index: 100;
}
#results-lgd {
	font-family: 'WorkSans-Regular';
	font-size: 14px;
	color: var(--darkBrown);

}
.results-lit {
	position: relative;display: inline-block;float: left;
	width: fit-content;
	padding: 9px 12px;margin-bottom: 10px;
	background-color: #fff;color: #000;
}
.results-nonlit {
	position: relative;float: left;
	width: fit-content;
	padding: 9px 12px;
	background-color: #000;color: #fff;
	margin-bottom: 30px;
}

#results-map { 
	margin-top: -100px;padding-bottom:70px;z-index: 100;height:auto;
}
#results-map img { opacity:0.5; }
.results-pin {
	position: absolute;
	width: 25px;height: 25px;
	background-color: #000;
	transition: all 0.2s ease-in;
	cursor: pointer;
}
.results-pin-open {
	width: 11px;height: 95px;opacity:1;
}
#results-pin-europe, #results-tooltip-europe {
	left: 46%;top: 19%;
}
#results-pin-mozambique, #results-tooltip-mozambique {
	left: 56%;top: 60%;
}
#results-pin-brazil, #results-tooltip-brazil {
	left: 28%;top: 55%;
}
#results-pin-mexico, #results-tooltip-mexico {
	left: 13%;top: 38%;
}
#results-pin-colombia, #results-tooltip-colombia {
	left: 19%;top: 46%;
}
#results-pin-peru, #results-tooltip-peru {
	left: 21%;top: 55%;
}
.results-tooltip {
	position: absolute;
	padding: 0 0 0 20px;
	width: 250px;min-height: 90px;
	font-family: 'WorkSans-Regular';
	font-size: 20px;
	color: var(--darkBrown);
	display: none;
}
.results-tooltip-title {
	font-family: 'WorkSans-Bold';
	font-size: 20px;
}
#results-smartphone {
	position:absolute;top:100px;left:25px;
	font-family: 'WorkSans-Regular';
	font-size: 16px;
	color: var(--darkBrown);
	display: none;
}

/* * * * * * * * * * * * * * * 

MANUALS

* * * * * * * * * * * * * * */
#container-manuals .chapter p { margin-top:0; }

#manuals-more { margin-top:100px; }
#manuals-slider { 
	/* min-height:auto; */ 
	min-height: auto;
	position: relative;width:100%;
	overflow-x:auto;overflow-y: hidden;
	background-color: --var(grey);
	border: solid 0px red;
	padding: 85px 0 70px 0;
	font-family: 'WorkSans-Regular';
	font-size: 16px;
	color: var(--darkBrown);
}
#manuals-photo {

}
.manuals-item { 
	position: relative;
	float: left;
	width: 25%; 
	text-align: center;
	border: solid 0px red;
}
.manuals-item img { 
	max-width:220px; 
	margin-bottom: 50px;
	transition: all 0.2s ease-in;
}
.manuals-item p { margin-top:0; }



/* * * * * * * * * * * * * * * 

ABOUT

* * * * * * * * * * * * * * */
#container-about { padding-top:210px; }
#about-content { max-width: 640px;padding-bottom:48px; }
#about-content.labor { font-size:16px;padding-bottom:48px; }
#about-img { padding-bottom:70px; }
#about-img img { max-width: 640px;width:100%; }






/* * * * * * * * * * * * * * * 

FOOTER

* * * * * * * * * * * * * * */
#footer { padding-top:70px; }
h4.footer a { 
	text-decoration: none;
	transition: all 0.2s ease-in;
}
h4.footer a:link, h4.footer a:visited { color:#000; } 
h4.footer a:active, h4.footer a:hover { color:#fcf7d6; } 
#footer-more { padding-top:48px;padding-bottom:75px; }
#footer-more a {
	text-decoration: none;
	transition: all 0.2s ease-in;
}
#footer-more  a:link, #footer-more a:visited { color:#fff; } 
#footer-more a:active, #footer-more a:hover { color:#fcf7d6; } 

#footer-info a { 
	text-decoration: none;
	transition: all 0.2s ease-in;
}
#footer-info a:link, #footer-info a:visited { color:#000; } 
#footer-info a:active, #footer-info a:hover { color:#fcf7d6; } 
#footer-info h5 { text-transform: none; }
#footer-info { 
	position: relative;
	border: solid 0px tomato;
	height: 70px;
}
#footer-info div { 
	position: relative;
	float: left;
}
#footer-info div:first-child { width:515px;max-width:100%;top:9px; }
#footer-info #logo-intint { position:relative;top:7px;padding-right:30px; }




#retour-haut {
	position: fixed;right:30px;bottom:30px;
	width: 110px;height:50px; 
	background-color: #fff;
	cursor: pointer;
	opacity: 0;
	z-index:100000;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	transition: all 0.2s ease-in;
}


/* * * * * * * * * * * * * * * 

IMPRINT

* * * * * * * * * * * * * * */
#imprint-container a { 
	text-decoration: none;
	transition:  all 0.2s ease-in;
	-webkit-transition:  all 0.2s ease-in;
	-moz-transition:  all 0.2s ease-in;
}
#imprint-container a:link, #imprint-container a:visited { text-decoration:underline;color:var(--darkBrown); }
#imprint-container a:hover, #imprint-container a:active { text-decoration: none;color:#000; }

#imprint-container {
	position: relative;
	width:88%;
	margin:140px auto 0 auto;
	
	border:solid 0px red;
}
#imprint-logo {
	position:fixed;
	left:48px;top:140px;
}
#imprint-logo h1 {
	font-family: 'WorkSans-Regular';
	font-size: 76px;
	color: var(--darkBrown);
	transition: all 0.2S ease-in;
}
#imprint-logo h1 a {
	text-decoration: none;
	transition: all 0.2s ease-in;
	text-transform:none;
	line-height:1.6em;
}
#imprint-logo h1 a:link, #imprint-logo h1 a:visited { text-decoration: none;color:#000; } 
#imprint-logo h1 a:active, #imprint-logo h1 a:hover { text-decoration: none;color:##000; } 

#imprint-menu {
	position:relative;
	margin-top:30px;
	margin-left:7px;
	
}
#imprint-menu h5 a {
	text-decoration: none;
	transition: all 0.2s ease-in;
	text-transform:none;
	line-height:1.6em;
}
#imprint-menu h5 a:link, #imprint-menu h5 a:visited { text-decoration: none;olor:#000; } 
#imprint-menu h5 a:active, #imprint-menu h5 a:hover { text-decoration: none;color:#fcf7d6; } 

#imprint-content {
	position:absolute;
	left:400px;top:15px;
	max-width:57%;
	padding-bottom:100px;
	font-family: 'WorkSans-Regular';
	font-size: 16px;
	color: var(--darkBrown);
	line-height:1.3em;
	transition: all 0.2S ease-in;
}
#imprint-content h2 {
	font-family: 'WorkSans-SemiBold';
	font-size: 24px;
	color: var(--darkBrown);
	margin-bottom:20px;
	transition: all 0.2S ease-in;
}
.imprint-content-block {
	padding-bottom:75px;
}