@font-face {
font-family: "Avenir";
src: url("fonts/Avenir_reg.ttf");

}

@font-face {
font-family: "Comfortaa";
src: url("fonts/Comfortaa-Medium.ttf");

}

@font-face {
font-family: "Kandal Black";
src: url("fonts/Kandal-Black.ttf");

}

*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
  overflow-x: hidden; 
}
a.sec{
	color: black!important;
}

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/



body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}


html, body {

background-color: transparent;
background-size: cover;
height: 100%;
}
body.bod_diap{
	background: grey;
	border-radius: 7px;
}


input, button, textarea, select {
  font: inherit!important;
}

::root{
	--transparent:  rgba(255, 255, 255, 0.11);
}

p{
	text-shadow: 1px 1px 2px black;
	font-size: 1.0vw;
}
a.celllink{
	text-decoration: none;
	color: white;
}
div.topbar{
	display: grid;
	text-align: center;
	align-items: center;
	grid-template-columns: 1fr;
	/*justify-content: center;*/
	top: 0;
//	place-content: center;
	//gap: 11.3em;
	width: 100%;
	padding-left: 0.5%;
	min-height: 3vw;
 background: rgb(27,153,102);
background: linear-gradient(90deg, rgba(27,153,102,0.89) 30%, rgba(27,153,102,0.89) 87%); 

/*background: rgb(32,157,66);
background: linear-gradient(90deg, rgba(32,157,66,0.7693277994791666) 32%, rgba(213,24,26,0.6572829815519958) 80%);*/

}

div.accDiv{
	justify-self: start;
	margin-right: -10%;;
}


img.slidu{
	width: 65vw;

}
img.slidur{
	width: 100%!important;

}

div.diapo{
	display: grid;
	grid-template-column: 1fr;
	margin-top: 1%;
	place-items: center;
	gap: 0.5rem;
	border-radius: 4px;
	//margin-right: 30%;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	background: rgba(255, 255, 255, 0.11);

}
body.bod_diap.alone{
	background: white;
}

div.diapok{
	display: grid;
	grid-template-column: 1fr;
	width: 100%;
	gap: 0.5em

}



body {
	background-attachment: fixed;
	//backdrop-filter:  blur(20px);
	backdrop-filter:  blur(5px);
	background-image: url(images/green_clear2.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: transparent;
	background-size: cover;
	padding:0; margin:0;
	font-size: 1.0vw;
	font-family: 'Avenir'!important;
	font-weight: 420;
	
	
	color: white;
}

img{
	border-radius: 2px;
}

div.chtop{

	
	margin-top: 18%;


}
div.grid-drop{
	display: grid;
	gap: 0.3em;
	
}
div.struct_diapo{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}



div.titreo{
	display: grid;
	grid-column: 1/-1;
}
p.titrediapo{
	font-size: 2em;
	text-shadow: 1px 1px 2px black;
	font-weight: 550;
	padding: 5px;
}
h1{
	font-size: 1.8vw;
	

}
p.rightHead{
	color: red;
	font-size: 1.5vw;
	
}
p.rightHeado{
	color: red;
	font-size: 1.3vw;
	font-weight: 700;
	text-shadow: 1px 1px 1px black;
}
p.leftHead{
	color: #7beb58;
	text-shadow: 1px 1px 2px black;
	font-weight: 750;
	//color: green;
	font-size: 1.5vw;
}
p.leftHeado{
	color: #7beb58;
	text-shadow: 1px 1px 2px black;
	font-weight: 750;
	//color: green;
	font-size: 1.3vw;
	margin-bottom: 5.8%;
}

a.espa{

	color: black;
	border: solid;
	border-width: 1px;
	border-radius: 2px;
	text-decoration: none;
	border-color: violet;
	font-size: 1em;
	background-color: white;
	padding: 1vw;
}

div.cartouche{
	width: 70%;
	padding: 10px;
	margin-top: 5%;
	grid-column: 1/-1;
	border: solid;
	border-color: green;
	border-radius: 2px;
	border-width: 5px;

background: rgba(125, 115, 128, 0.7);
	
}

div.descr{

	padding: 15px;


}
span {
	text-shadow: none;
}

div.maintitle{
	text-shadow: 1px 1px 2px black;
	//grid-column: 2/3;
	margin-bottom: 2%;
	margin-top: 1.5%!important;
}
h2{
	color: #21a9d8;
	font-size: 1.1rem;
	
}

div.secLink{
	display: grid;
	position: absolute;
	margin-top: 19%;
	margin-left: -15.5%;
	border: none;
	place-content: center;
	align-items: center;	
	min-height: 3vw;
	box-shadow: 0px 0px 5px 5px white;
	border-color: blue;
	padding: 1px;
	border-radius: 2px;
	width: 12%;
	background-color: rgba(214, 205, 195, 1);
}
div.secLink:hover{cursor: pointer;	box-shadow: 0px 0px 2px 2px red; }
div.secLink:hover *{
	cursor: pointer;
}


div.thirdLink{
	display: grid;
	position: absolute;
	align-items: center;
	place-items:  center;
	text-align: center;
	margin-top: 19%;
		box-shadow: 0px 0px 5px 5px white;
	min-height: 3vw;
	justify-content: center;
	margin-left: 1.65%;
	width: 12%;
	background-color: rgba(214, 205, 195, 1);

}
div.thirdLink:hover{
	cursor: pointer;	
	box-shadow: 0px 0px 2px 2px red; 
}
div.thirdLink:hover *{
	cursor: pointer;
}

div.bubulle{

	height: 9.5vw;
	width: 9.5vw;
	border-radius: 50%;
	//background-color: green;
	background-color: rgba(0, 255, 0, 0.4);
	padding: 17px;
	margin-bottom: 5%;
//	border:  solid;
	border-width: 0.3px;
	transition: transform 1.2s ease-in-out;
}

div.bubulle:hover {
	cursor: pointer;
	border-color: red;
	transform: scale(1.08);

}
div.bubulle_s{

	height: 9.5vw;
	width: 9.5vw;
	border-radius: 50%;
	//background-color: green;
	background-color: rgba(0, 255, 0, 0.4);
	padding: 17px;
	margin-bottom: 5%;
//	border:  solid;
	border-width: 0.3px;
	transition: transform 1.2s ease-in-out;
}

div.bubulle_s:hover {
	
	border-color: red;
	transform: scale(1.08);

}
div.bubulle2{
	height: 8.1vw;
	width: 8vw;
	//border-radius: 50%;
	//background-color: red;
	background-color: rgba(245, 0, 0, 0.7);
	padding: 17px;
	
	border-radius: 6px;
	margin-bottom: 5%;
	border-width: 0.5px;
	transition: transform 1.2s ease-in-out;
}
div.bubulle2_s{
	height: 8.1vw;
	width: 8vw;
	//border-radius: 50%;
	//background-color: red;
	background-color: rgba(245, 0, 0, 0.7);
	padding: 17px;
	
	border-radius: 6px;
	margin-bottom: 5%;
	border-width: 0.5px;
	transition: transform 1.2s ease-in-out;
}
div.centerTri {

	position: absolute;
	margin-top: -22%;
	
	margin-left: 22.9%;

}
div.centerA{
	margin-top: 22%;
}
p.centText{
	//color: rgb(0,200,0);
	font-size: 1.1rem;
	color: black;
	//text-shadow: 1px 1px 2px white;
	//text-shadow: none;
}
div.bubulle2:hover {
	cursor: pointer;
	border-color: green;
	transform: scale(1.08);

}
div.bubulle2_s:hover {
	
	border-color: green;
	transform: scale(1.08);

}

div.topDiv{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin: auto;
	gap: 10em;
}

div.rectoplasme{
	display: grid;
	place-items: center;
	margin-top: -4%;
	//gap: 0.2em;
}

div.rectool{
    
	margin-left: 30%;
}

div.center{
	
	margin-top: 29%;
}
div.centerC{
	
	margin-top: 38.8%;
}
div.centerK{
	margin-top: 37.5%;
}
div.centerVir{
	margin-top: 37.8%;
}
div.centerADN{
	
	margin-top: 36.5%;
}
div.centerOxy{
	
	margin-top: 8%;
}

div.firstLink{
	position: absolute;
	margin-top: -2.2%;
	margin-left: -2.5%;
	margin-bottom: 0%;
}
img.veroPhoto{
	//margin-top: -5%;

	border-width: 2px;
	
	border-radius: 6px;
	width: 6.5vw;
	
	box-shadow: 0 0 0.5px 1px grey;
}

img.veroPhoto:hover{
	cursor: pointer;
	box-shadow: 0 0 3px 0.5px blue;
}
div.rectoolo{
	display: grid;
	place-items: center;
}
div.posbulle{
	display: grid;
	place-items: center;
	margin-top: 0%;
	font-size: 1.1rem;
}
div.posbulleol{
	display: grid;
	place-items: center;

}
div.posbulleolo{
	display: grid;
	place-items: center;
}

div.centerCric{
	grid-column: 1/-1;
	margin-left: auto;
	margin-right: auto;
	height: 28vw;
	width: 28vw;
	border-radius: 50%;
	//background-color: rgba(220, 52, 120, 0.5);;
background-color: rgba(255, 255, 255, 0.11);
	padding: 17px;
	margin-bottom: 2%;
	border:  solid;
	border-width: 2.5px;
	
	
}






div.cadru{
	display: flex;

	justify-content: center;
	
}

div.cadru:hover {

	

}

a.sec2{
	/*transition: padding 1.5s;*/
	color: black;
	text-decoration: none;
	border: none;
}

input[type="text"],input[type="email"]{
	
	
	padding: 15px;
	border: none;
	border-radius: 4px;
}

textarea{
	resize: none;
	font-family: 'Sans Serif';
	border-radius: 8px;
	padding: 0.6%;
	border: none;
}



div.cartoucheChris{
	border:  solid purple;
	border-width: 4px;
	border-radius: 8px;
	background-color: violet;
	padding: 8px;
}
div.cartoucheVero{
	border:  solid purple;
	margin-right: 5%;
	border-width: 4px;
	border-radius: 8px;
	width: 80%;
	background-color: violet;
	padding: 8px;
	transition: width 1.5s ease-out;
}

div.cartoucheVero:hover {

	border-color: red;
	
	width: 85%;

}
a{
	
}

::placeholder{
	font-style: italic;
	font-family: 'Sans Serif';

}

a.contbut{
	/*transition: padding 1.5s;*/
	color: black;
	text-decoration: none;
	
	
	border-color: blue ;
	border-radius: 4px;
	border-width: 3px;
	
	
}
iframe.videosize{
	width: 35vw;
	height: 23vw;
}

input.submail{
	margin-top: 1%;
	font-family: 'Sans Serif';
	transition: padding 1.5s;
	color: black;

	border: none;
	padding: 8px;
	
	border-radius: 4px;
	width: 15%;
	box-shadow: 0px 0px 2px 2px grey;
	border-width: 3px;
	min-height: 40px;
	background-color: #D6DDC8;
}

input.submail:hover {
	cursor: pointer;
	border-color: red;
	
}
button.returnhome{
	text-shadow: 1px 1px 2px black;
	width: 100%;
	border: none;
	font-family: 'Avenir'!important;
	border-radius: 4px;

	color: white;
	 box-shadow: 0 0 5px rgb(0 0 0 / 40%);
	 background: rgba(220, 220, 220, 0.20);
}

button.returnhome:hover {
	cursor: pointer;
	box-shadow: 0px 0px 3px 3px #D6DDC8!important;
}

button.returnhome_spe{
	text-shadow: 1px 1px 2px black;
	width: 100%;
	border: none;
	border-radius: 4px;
	color: white;
	 box-shadow: 0 0 5px rgb(0 0 0 / 40%);
	 background: rgba(220, 220, 220, 0.20);
}




button.returnhome2{
	text-shadow: 1px 1px 2px black;
	width: 25%;
	margin-bottom: 1.5%;
	border: none;
	border-radius: 4px;
	color: white;
	 box-shadow: 0 0 5px rgb(0 0 0 / 40%);
	 background: rgba(220, 220, 220, 0.20);
}

button.returnhome2:hover {
	cursor: pointer;
	box-shadow: 0px 0px 3px 3px violet!important;
}
button.returnhome3{
	text-shadow: 1px 1px 2px black;
	border: none;
	border-radius: 4px;
	color: white;
	 box-shadow: 0 0 5px rgb(0 0 0 / 40%);
	 background: rgba(220, 220, 220, 0.20);
}

button.returnhome3:hover {
	cursor: pointer;
	box-shadow: 0px 0px 3px 3px violet!important;
}
a.third{
	transition: padding 1.5s;
	color: black;
	text-decoration: none;
	border: solid;
	padding: 8px;
	border-color: blue ;
	border-radius: 12px;
	border-width: 3px;
	min-height: 40px;
	background-color: rgba(214, 205, 195, 0.5);
	position: absolute;
	align-items: center;
	place-items:  center;

	margin-right: 15%;
	margin-left: 32%;
	
	width: 45%;
	
}

input:hover,textarea:hover{
	box-shadow: 0px 0px 4px 2px red;
}

div.formcont{
	//margin-top: 5%;
	max-width: 50%;
	border-radius: 8px;
	background:  rgba(255, 255, 255, 0.11);
	width: 90%;
	     box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
		 font-size: 1.1rem;
		 text-shadow: 1px 1px 2px black;
	grid-column: 1/-1;
}
a.third:hover {
/*	padding: 15px;*/
}
a.mainLink:hover {
	/*padding: 15px;*/
	cursor: pointer;
			box-shadow: 0px 0px 2px 2px red;
}
a.sec{
	text-decoration: none;
}

a.sec:visited{color: black;}

a.mainLink {
	transition: padding 1.5s;
	color: black;
	text-decoration: none;
	border: none;
	
			box-shadow: 0px 0px 5px 5px white;
	padding: 8px;
	border-color: blue ;
	
	border-width: 3px;
	background-color: #D6CDC3;
	
}


a.linkDrop {
/*	transition: padding 1.5s;*/
	color: black;
	text-decoration: none;
}
a.linkDrop:hover{
    cursor: pointer!important;
    
}
div.uytr{
		padding: 4px;
	
	border-radius: 4px;
	max-width: 65%;
	border-width: 3px;
	box-shadow: 0px 0px 2px 2px grey;
	background-color: #D6CDC3;
}

div.uytr:hover{
box-shadow: 0px 0px 2px 2px red;
}

div.samelink{
	background-color: #D6CDC3;
	padding: 4px;
	box-shadow: 0px 0px 2px 2px grey;
	
	margin-left: 13%;
	max-width: 70%;
	border-radius: 4px
}

div.samelink:hover{
	box-shadow: 0px 0px 2px 2px red;
}

div.samelink:hover{
	border-color: red!important;
}

div.uytr:hover{
	border-color: red!important;
}

a:hover {
	border-color: red;
	
}

div.triangle{
	display: grid;
	
	grid-column: 2/3;
	margin-top: 1%;
	margin-bottom: 2%;
}

img.circle{
	//transition: transform .8s ease-in-out; 
	width: 35vw;
	height: 35vw;
	filter:  invert(1);
}

img.circle:hover {
	//transform: rotate(-14deg);
	
	
}

div.copyright{
	grid-column: 1/-1;
	display: flex;
	margin-top: 1%;
	justify-content: center;
	text-align: center;
}
iframe.framing{
	width: 62vw;
	
	height: 40vw;
}
div.footer{
	//position: absolute;
	display: grid;
	grid-template-columns: 30% 40% 30%;
	//background-color: rgba(214, 205, 195, 0.8);
	background-color: rgba(255, 255, 255, 0.11);
	width: 50%;

	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	margin-left: auto;
	
	text-align: center;
	align-items: center;
	place-items: center;
	//border: solid;
	border-color: black;
	border-width: 0.5px;
	padding: 2px;
	margin-right: auto;
}

div.fullGrid {

	display: grid;
	grid-template-columns: 13% 73% 13% ;
	//grid-template-columns: 1fr 1fr 1fr;
	height: 80%;
	max-width: 95%;
	align-items: center;
	//background-color: green;
	margin-left: auto;
	margin-right: auto;
	
	text-align: center;
	place-content: baseline;
}

div.fullGrid2 {
	
	display: grid;
	grid-template-columns: 1fr;
	//grid-template-columns: 1fr 1fr 1fr;
	top: 0;
	place-items:  center;
	max-width: 95%;
	max-height: 90%;
	//background-color: green;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	place-items:  center;

}

div.header{
	top: 0;
}