/* version 1 June 2025 */
/* 
	colors 
	#CCD5AE green
	#E9EDC9 light green
	#FEFAEO off white
	#FAEDCD beige
	#D4A373 brown

	<!-- added version below to force a reload after changes to css: V1 juin2025 
    version 2.2 août 2025
    -->
*/

body {
	background-color: #E9EDC9;
    /*
	font-family: cursive, "Lucida Console", monospace;
    */
    font-family: Georgia, serif;
}
/* navbar */
.nav-link {
    font-size: .5vw;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-top: .9vh;
    margin-right: .4vw;
    padding: auto;
}
.navbar-nav .active {
    transform: scale(1.1);
    font-weight: bold;
}
.nav-link {
    font-size: 1.5vw;
    margin: 1.5vw 0 0 2vw;
    padding: auto;
}
.nav-link:hover {
    transform: scale(1.1);
}
#logo {
	height: 90px;
}
.coordinates {
	display: flex;
    flex-direction: column;
    margin: 1.5vw 0 0 1.5vw;
}
.coordinates a {
	font-size: 1.4vw;
    text-decoration: none;
	color: black;
}
.coordinates h3 {
    font-size: 1.4vw;
}
/* end navbar */
/* Google icons */
.material-symbols-outlined {
    font-size: 2.4vw;
    padding: 12px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: #e1e5f2;
}
.mainbox {
	/* use this for debugging
    border: 3px dashed black;
     */
	
	width: 100%;
	margin: 110px 0 0 0;
}
.section1 {
    /* use this for debugging
    border: 3px dashed black;
     */
	
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 10px 10px 10px 10px;
}
.section1-left {
    /* use this for debugging
    border: 3px dashed black;
     */

    width: 30%;
    margin: auto;
    text-align: center;
    font-size: 4vw;
}
.section1-right {
    /* use this for debugging
    border: 3px dashed black;
     */

    width: 70%;
}
.section2 {
    /* use this for debugging
    border: 3px dashed black;
     */
	
	background-color: #CCD5AE;
    width: 100%;
    height: auto;
    padding: 10px 10px 10px 10px;
    text-align: center;
    display: flex;
    flex-direction: row;
}
.section2-left {
    /* use this for debugging
    border: 3px dashed black;
     */

    width: 60%;
    margin: auto;
}
.section2-right {
    /* use this for debugging
    border: 3px dashed black;
     */

    width: 60%;
    text-align: center;
    font-size: 4vw;
}
.section2 img {
    height: 60%;
    width: 60%;
}
.section3 {
	/* use this for debugging
    border: 3px dashed black;
     */

	background-color: #FAEDCD;
    width: 100%;
    height: auto;
    padding: 10px 10px 10px 10px;
    margin: 30px 0 30px 0;
   	text-align: center;
	display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.section3a {
	width: 25%;
	display: flex;
    flex-direction: column;
    padding: 10px 10px 10px 10px;
    border: 1px dotted; #D4A373;
}
.section3 img {
    width: 30%;
	margin: auto;
}
.section3 h1 {
    font-size: 2.7vw;
}
.section4 {
    /* use this for debugging
    border: 3px dashed black;
     */

    font-family: cursive, "Lucida Console", monospace;        
    background-repeat: repeat-x;
    background-size: 10% 10%;
    background-position: top left;
    background-image: url("images/icons8-volunteer-100.png");
    width: 100%;
    height: 55em;
    padding: 10px 10px 10px 10px;
    margin: 5% 0 3% 0;
    text-align: center;
}
.section4 img {
    margin-top: 9%;
}
.section4 button {
    width: 30%;
    height: 3em;
    font-size: 1.8vw;
}
.sectiona {
    /* use this for debugging
    border: 3px dashed black;
     */
	
	background-color: #CCD5AE;
    width: 100%;
    height: auto;
    padding: 10px 10px 10px 10px;
    margin: auto;
    text-align: center;
}
.sectiona p {
    font-size: 2vw;
    margin: 20px 10% 20px 10%;
}
.sectiona img {
    width: 50%;
    margin: 5% 0 5% 0;
}
.sectiona h5 {
    font-family: cursive, "Lucida Console", monospace;
    font-size: 1.5vw;
    color: gray;
    font-weight: bold;
}
.sectionb {
    /* use this for debugging
    border: 3px dashed black;
     */
    
    background-color: #CCD5AE;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 10px 10px 10px 10px;   
}
.sectionb-left {
    width: 70%;
    text-align: center;
    margin: auto;
}
.sectionb-right {
    width: 30%;
    margin: auto;
}
.sectionb-left img {
    width: 15%;
    margin-bottom: 3%;
}
.sectionb-left h3 {
    font-family: cursive, "Lucida Console", monospace;
    font-size: 2vw;
    color: gray;
    font-weight: bold;
}
.sectionb-right img {
    width: 60%;
    margin-bottom: 20%;
}
.sectionc {
    /* use this for debugging
    border: 3px dashed black;
     */
    
    background-color: #FAEDCD;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 10px 10px 10px 10px; 
}
.sectionc-left {
    width: 40%;
    text-align: center;
    margin: auto;
}
.sectionc-right {
    width: 60%;
    margin: 2% 5% 2% 5%;
}
.sectionc h1 {
    font-family: cursive, "Lucida Console", monospace;
    font-size: 3vw;
    
}
.sectionc img {
    width: 80%;
    margin-left: 10%;
}
.redirect {
    background-color: #D4A373;
    height: 9em;
    font-size: 3vw;
    cursor: pointer;
    text-decoration: none;
    color: black;
    padding: 3% 3% 3% 3%;
    border-radius: 30%;
}

/* reply text is initially hidden, click button to show or hide reply
.question {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.question button {
    margin: 0 20px 0 20px;
}
#r1 {
    visibility: hidden;
}
#r2 {
    visibility: hidden;
}
#r3 {
    visibility: hidden;
}
#r4 {
    visibility: hidden;
}
#r5 {
    visibility: hidden;
}
.reponse {
    font-size: 2vw;
    text-align: center;
    border: 1px dashed gray;
    margin: 3% 3% 3% 3%;
}
*/

/* start: tags for FAQ on dons.html */
.accordion {    
    width: 80%;
    font-size: 2vw;
    text-align: center;
    background-color: #FAEDCD;
    cursor: pointer;
    padding: 18px;  
    border: none;  
    outline: none;  
    transition: 0.4s;
}
.activepanel, .accordion:hover {
  background-color: #D4A373; 
}
.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 18px;
  color: black;
  float: right;
  margin-left: 5px;
  margin-top: 5px;
}
.activepanel:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: #FAEDCD;
  overflow: hidden;
  font-size: 1.8vw;
  width: 80%;
  margin: auto;
}
/* end: tags for FAQ on dons.html */
.carousel {
	/* use this for debugging
	border: 2px solid yellow;
	*/
	margin: 0 10% 0 10%
}
.carousel img {
    width: 80%;
    height: 60vh;
    margin: 0 10% 0 10%;
}

/* show dots as image thumbnails */
.dot-container {
    text-align: center;
    margin: 20px 0 20px 0;
}
.dot-container button {
    width: 4vw;
}
.thumbnail {
    width: 5vw;
    height: 10vh;
	border-radius: 50%;
	margin: 0 5% 0 5%;
	cursor: pointer;
}
.ticker-tape-container {
	/* use this for debugging
	border: 5px solid; green;
	*/

    font-family: cursive, "Lucida Console", monospace;
	height: 3em;

	/* if text > container will overflow, this keeps text within container */
	overflow-x: hidden;

	/* this puts all divs on the same line (columns) instead of rows by default */
	display: flex;
	
	background-color: #D4A373;
	font-size: 2vw;
}
.ticker-tape {
	display: flex;
	align-items: center;

	/* NOT USED= what does this do
	flex: 0 0 auto;
	*/

	gap: 5rem;
	animation-name: marquee;
	animation-duration: 9s;
	animation-delay: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
@keyframes marquee {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}
/* start demandeinfo.php parameters */
#section-info-form {
    width: 100%;
    height: auto;
    background-color: #FAEDCD;
    margin-top: 150px;
}
#section-info-form h3 {
    font-size: 3.6vw;
    text-align: center;
}
#section-info-form h5 {
    font-size: 1.8vw;
    text-align: center;
}
#pulldown {
    background-color: #D4A373;
    /* select does NOT automatically get same font as body */
    font: inherit;
    width: 80%;
    min-width: 450px;
    height: 45px;
    border: 2px dotted gray;
    cursor: pointer;
    margin: 0 10px 10px 10px;
}
.erreur1 {
    color: red;
}
.inputform {
    display: flex;
    flex-direction: column; 
    width: 80%;
    margin: auto;
    font-size: 1.8vw;
}
input {
    margin-top: 10px;
    background: transparent;
}
textarea {
    width: 100%;
    background: transparent;
}
/* end demandeinfo.php parameters */

/* object is initially hidden then when scrolled to object 
    in JS change the id name to show & object will appear & bounce */
.object1 {
}
#bounceobj {
    visibility: hidden;
    color: #D4A373;
    font-weight: bold;
    width: 90%;
    height: auto;
    /* top right bottom left */
    margin: 1% 5% 1% 5%;   
}
#bounceobj:hover {
    cursor: zoom-in;
    transform: scale(1.1);
}
#bounceobj.show {
    visibility: visible;
    /* animation: fadein 2.5s; */
    animation: bounce2 1s ease-in-out 1;
}
@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

/* <!-- button will rotate when scrolled to object --> */
/* when user scrolls to this class an animation is triggered in JS */
.devbenevole {
}
.objectspin {
    animation: spin 1s ease-in-out 1;
}
@keyframes spin {
    100% { 
        transform:rotate(360deg);
    } 
}
/* <!-- when page first called, banner is on top & when clicked disappears by sliding down --> */
/* animation forwards: stops animation from returning to start position 
        alternate: reverses the animation */
#cookiebanner {
    visibility: visible;
    position: fixed;
    bottom: 10px;
    height: 130px;
    width: 60%;
    background-color: #D4A373;
    text-align: center;
    padding-top: 10px;
    margin: 0 20% 0 20%;
}
#cookiebanner p {
    font-size: 1.2vw;
}
@keyframes slidedown {
    0% {transform: translateY(0px);}
    100% {transform: translateY(+140px);}
}
#cookiebutton {
    font-size: 1.2vw;
    width: 30%;
}
#copyright-banner {
    font-size: 1.8vw;
    text-align: center;
    
    margin: 10px 0 10px 0;
    background-color: #D4A373;
    height: 45px;
}

/* parameters for small screens (iPhone, etc)  
    screen sizes = <600px, 601px, 768px, 992px, 1200px */
@media (max-width: 768px) {
    .navbar-nav a {
        font-size: 16px;
        width: 120px;
        margin-left: 5px;
    }
    .navbar-nav h3 {
        font-size: 16px;
    }
    .navbar-nav .active {
        margin-left: 30px;
    }
    .thumbnail {
        width: 45px;
        height: 45px;
        margin: 0 5px 0 5px;
    }
    .section3 {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .section3a {
        width: 80%;
        margin: 3% 10% 3% 10%;
    }
    .section4 img {
        width: 90px;
        height: 90px;
        margin: 15% 0 0 0;
    }
}