/* 2021 Marie-Lou Lacombe */


/* ======================================================== 1920 width ======================================================== */
@media only screen and (min-width: 1921px) {
/*body {background: Aquamarine;}
/* ================================================ 5- STICKY NAVBAR ================================================ */
#sticky-navbar-accueil, #sticky-navbar-other { display: none}
}

/* ==================================================== 1280x800 ================================================== */
@media only screen and (max-width: 1920px) {
/*body {background: teal;}
/* ================================================ 5- STICKY NAVBAR ================================================ */
#sticky-navbar-accueil, #sticky-navbar-other { display: none}
/* ================================================ 8- ABOUT ================================================ */
/* -------------------------------------------  8.2- ABOUT TEXT ------------------------------------------- */
.profil { height: 222px;}
.image-biozone { width: 195px; margin: 20px 15px 10px -15px;}
/* -------------------------------------------  8.4- CONTACT TEXT ------------------------------------------- */
.contact-portfolio { margin-top: 62.6%;} /* CONTACT ZONE */
}




/* ======================================================== 767 width ======================================================== */
@media only screen and (max-width: 767px) {
/*body {background: green;}
/* ================================================ 5- STICKY NAVBAR ================================================ */
#sticky-navbar-accueil, #sticky-navbar-other { display: none}
/* ================================================ 6- HEADER ================================================ */
#header a {font-size: 2.2vmin;}
/* ================================================ 7- PORTFOLIO ================================================ */
/* -------------------------------------------  7.1- PORTFOLIO FILTER ------------------------------------------- */
.filter { padding-top: 25%; margin-left: 7%;} /* POSITION BLOCK BUTTON */
button { /* BUTTON SET UP */
	border: 3px solid var(--teal);
	border-top: 0;
	border-right: 0;
	margin-bottom: 10px;}
#portfolio p.copyright {font-size: 5px; margin-top: 57%; margin-left: -25%;} /* COPYRIGHT TEXT */
/* -------------------------------------------  7.2- PORTFOLIO IMAGES ------------------------------------------- */
.grid { left: -7%;}/* POSITION OF PICTURES ZONE */
/* ================================================ 8- ABOUT ================================================ */
/* -------------------------------------------  8.1- ABOUT LOGO ------------------------------------------- */
.membre { font-size: 12px; border: 3px solid var(--teal); border-top: 0; border-right: 0; width: 90px; margin-left: -30%;}
/* -------------------------------------------  8.2- ABOUT TEXT ------------------------------------------- */
.text-about { left: -2%; height: 100%; margin-top: 2%;}
p.text-ab { font-size: 10px;}
.profil { height: 130px;}
p.gloria { font-size: 10px;}
.image-biozone { width: 45%; margin: 20px 15px 0 -15px;}
/* -------------------------------------------  8.4- CONTACT TEXT ------------------------------------------- */
p.copyright { font-size: 5px; margin-top: 20%;}
p.contact-about, p.contact-services, p.contact-portfolio { font-size: 10px;}
.social {font-size: 15px;}
.contact-about, .contact-services, .contact-portfolio { width: 100%;}
/* -------------------------------------------  8.3- SERVICES TEXT ------------------------------------------- */
.text-services {left: 0;}
p.text-se {font-size: 12px;}
/* ================================================ 9- HOME PAGE ================================================ */ 
p.copyright { font-size: 5px; margin-top: 20%;}
p.contact { font-size: 10px;	line-height: 10%;}
.social {font-size: 14px;}
.contact-right { width: 65%;}
}


/* ======================================================== 575 width ======================================================== */
@media only screen and (max-width: 575px) {
/*body {background: lightBlue; }*/

body { overflow: auto;}
/* ================================================ 4- PRELOADER ================================================ */
.preloader-img { height: 40px; }
/* ================================================ 5- STICKY NAVBAR ================================================ */
#sticky-navbar-accueil, #sticky-navbar-other { display: block}
/* ------------------------------------------ 5.2- MENU RIGHT ------------------------------------------ */
.menu-list {padding-top: 50px; margin-bottom: -40px} /* MENU LINKS ZONE */
#sticky-navbar-accueil h1.subtitle, #sticky-navbar-other h1.subtitle { margin-bottom: 20px; } /* HMONP TEXT */
#sticky-navbar-accueil h2.subtitle3, #sticky-navbar-other h2.subtitle3 { margin-top: 5px; } /* COPYRIGHT TEXT */
/* ================================================ 6- HEADER ================================================ */
#header {display: none;}
/* ================================================ 7- PORTFOLIO ================================================ */
#portfolio { overflow: auto; margin-top: -10px; } /* POSITION TOTAL PORTFOLIO ZONE WITH BUTTONS */
/* -------------------------------------------  7.1- PORTFOLIO FILTER ------------------------------------------- */
.filter { /* POSITION BLOCK BUTTON */
	margin-left: 3%;
	margin-right: 3%;
	width: auto;	}
.button-group { background: none; text-align: center;}		
button { /* BUTTON SET UP */
	border: 3px solid var(--teal);
	border-top: 0;
	border-right: 0;	
	font-size: 10px;
  	display: inline-block;
	margin-bottom: 5px;
	margin-right: 5px;}
.button:active, .button-selected { border: 3px solid var(--teal); } /* SELECTED */
/* -------------------------------------------  7.2- PORTFOLIO IMAGES ------------------------------------------- */
.grid { /* POSITION OF PICTURES ZONE */
	width: 100%;
	margin-top: 20px;
	left: 10px;
	margin-bottom: 25px;
	background: transparent;}
.grid-item { float: none; width: 75%; margin-left: 13%;}
/* -------------------------------------------  7.3- TEXT UNDER IMAGE FULL SCREEN ------------------------------------------- */
span.title { font-size: 14px; }
span.step {	font-size: 10px;	 }
span.step small { font-size: 10px; }
/* -------------------------------------------  7.4- ARROWS FULL SCREEN ------------------------------------------- */
button.mfp-arrow { top: 20%; right: -5px; }
.mfp-arrow:before, .mfp-arrow:after { width: 1rem; height: 1rem;}
.mfp-arrow-left:after, .mfp-arrow-left:before{left: 17px;}
.mfp-arrow-right:after, .mfp-arrow-right:before{right: 17px;}
/* ================================================ 8- ABOUT ================================================ */
#about { width: auto; }
p.copyright {display: none;}
.contact-services {display:none;}
.contact-portfolio {display:none;}
/* -------------------------------------------  8.1- ABOUT LOGOS ------------------------------------------- */
.logos-services { display: none;}
.logos { background: none; margin-left: 0; margin-bottom: 40px; } /* POSITION BLOCK LOGOS ABOUT */
.membre { float: left; margin-bottom: 5%; margin-left: 0; font-size: 13px; } /* MEMBRE TEXT */
.partenaires { margin-left: 15%; margin-right: 10%; width: 100%;}
.logo-partenaire { display: block; margin-bottom: 20px; margin-left: 5%;} /* LOGOS PARTENAIRES */
.oa { width: 200px; bottom: 20px; margin-left: 25%; } /* LOGO ORDRE  */
.isle { width: 100%; margin-left: 25%; } /* LOGO ISLE  */	
.avignon { width: 55%; margin-left: 45%; }	 /* LOGO AVIGNON  */
/* -------------------------------------------  8.2- ABOUT TEXT ------------------------------------------- */
.text-about { margin-top: 60px; margin-left: 7%; margin-right: 7%; } /* BLOCK MARIE AND TEXT TOGETHER */
.profil { height: 130px; margin: 0 15px 5px 15px; } /* PROFIL PICTURE */
p.text-ab {text-align: left;  } /* PRESENTATION TEXT */
.biozone { margin-left: 7%; margin-top: 50px;	border: 3px solid var(--teal); border-top: 0; border-right: 0; width: 180px; } /* PARTENAIRE PRIVILEGIE */
.image-biozone { margin: 30px 10% 5px 13%; float: none; width: 70%} /* LOGO BIOZONE */
p.gloria { margin-left: 15px; line-height: 14px; margin-right: 10px;}
/* -------------------------------------------  8.3- SERVICES TEXT ------------------------------------------- */
.text-services { margin-left: 10%; margin-top: 25%; margin-right: 12%;} /* BLOCK TEXT */
p.text-se { font-size: 13px; line-height: 30px; } /* SERVICES TEXT */
.logo-services { width: 35px; margin-right: 10px; margin-bottom: 0; }
/* ================================================ 9- HOME PAGE ================================================ */ 
#image-body { /* TRIANGLE ONLY INDEX */
	background-image: url(../images/triangle_gauche.svg);
	background-size: 95vmax;
	background-position: bottom left;
	width: 150%;
	left: -120px; }
#footer-acc {display: none;}
}