/* ////////////////////////////////////////////////////////// */
@font-face {
    font-family:'comfortaaregular';
    src:url('../../fonts/comfortaa/comfortaa-variablefont_wght-Comfortaa.eot');
    src:url('../../fonts/comfortaa/comfortaa-variablefont_wght-Comfortaa.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/comfortaa/comfortaa-variablefont_wght-Comfortaa.woff2') format('woff2'),
         url('../../fonts/comfortaa/comfortaa-variablefont_wght-Comfortaa.woff') format('woff'),
         url('../../fonts/comfortaa/comfortaa-variablefont_wght-Comfortaa.svg#comfortaaregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

@font-face {
font-family:'line-Awesome';
font-weight:normal;
font-style :normal;
       src :url('../../fonts/line-awesome/la-brands-400.woff2') format('woff2'),
             url('../../fonts/line-awesome/la-regular-400.woff2') format('woff2'),
             url('../../fonts/line-awesome/la-solid-900.woff2') format('woff2'),
             url('../../fonts/line-awesome/la-brands-400.woff') format('woff'),
             url('../../fonts/line-awesome/la-regular-400.woff') format('woff'),
             url('../../fonts/line-awesome/la-solid-900.woff') format('woff'),
             url('../..fonts/line-awesome/la-brands-400.svg') format('svg'),
             url('../../fonts/line-awesome/la-solid-900.svg') format('svg'),
             url('../../fonts/line-awesome/la-regular-400.svg') format('svg');
}

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

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

        .pelagos canvas {
            position: absolute;
            width: 400px;
            height: 400px;
            pointer-events: none;
            z-index: 1;
        }
        


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

    .w10pc {width:10%;}
    .w20pc {width:20%;}
    .w25pc {width:25%;}
    .w30pc {width:30%;}
    .w40pc {width:40%;}
    .w50pc {width:50%;}
    .w60pc {width:60%;}
    .w70pc {width:70%;}
    .w80pc {width:80%;}
    .w90pc {width:90%;}
    .w100pc {width:100%;}

    .wTiers {width:calc(100% / 3);}

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

	.imgBackCover {
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center;
	}

/* /////////////////////////////////////////////////////////////// */
p {
	font-size:.85rem
}	

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

	.bl-content .bl-post.alone .bl-navigation a.bl-prev-post:before {
		content:' \f060 ';
		font-family:'Line Awesome Free' !important;
		font-weight:700;
		margin:1rem 0 0 0;
		font-style:normal;
	}
	
	.bl-content .bl-post.alone .bl-navigation a.bl-next-post:after {
		content:' \f061';
		font-family:'Line Awesome Free' !important;
		font-weight:700;
		margin:1rem 0 0 0;
		font-style:normal;
	}



/* //////////////////////////////////////////////////////////////////////////////////////////////////////////// */
	
	.parallax {
		height:100dvh;
		overflow-x:hidden;
		overflow-y:auto;
		perspective:1000px;
		z-index:2;
		position:relative;
		scroll-behavior:smooth;
	}

	.pelagos { 
		position:relative;
		height:100dvh; width:100dvw;
		transform-style:preserve-3d;
		pointer-events:none;
	}

	.zone_pelagique {
		position:absolute;
		top:0;
		left:0;
		right:0; 
		bottom:0;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-flow:row wrap;
		transform-style:preserve-3d;
		pointer-events:none;
	}
		
	.leCiel { /* surface */
		transform:translateZ(400px) scale(.6);
		z-index:1;
	}	
		
	.surface { /* surface */
		transform:translateZ(300px) scale(.7);
		z-index:1;
		/* filter:blur(.05rem); */
	}
		
	.aphotique { /* aphotique  */
		transform:translateZ(0);
		z-index:4;

	}
		
	.bathypelagique { /* bathypelagique  */
		transform:translateZ(-1000px) scale(2);
		z-index:3;
		/* filter:blur(.1rem); */
	}

	.abysse { /* abysse */
		transform:translateZ(-2000px) scale(3);
		z-index:2;
		/* filter:blur(.13rem); */
	}

  /* demo styles
  --------------------------------------------- */

	/* html {
		overflow:hidden;
	} 

	body {
		font:100% / 1.5 Arial;
	}
	*/
	
	body.homebody {
		overflow:hidden;
		font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
		line-height: 1.5;
		font-size: 100%;
	}

  * {
    margin:0;
    padding:0;
  }

	.parallax {
		font-size:200%;
	}

  /* centre the content in the parallax layers  */
	.title {
		text-align:center;
	}

	.adessias {
		position:absolute; top:50%; left:50%; translate:-50% -50%;
		font-family:'comfortaaregular'; letter-spacing: -.3rem;
		font-size:4rem; padding:0 1rem;
		color:#fff; text-shadow: 0 0 1rem rgba(100, 10, 10, .6);
	}

	
		.adessias span {
			margin:0; padding:0;
		}
		
		.subeTitle {
			position:absolute; top:45%; left:50%; translate:-50% -50%; font-size:20px; width:100%;
			margin:55px 0 0 0; text-align:center; font-family:'comfortaaregular'; padding:3px 10px 0 10px; 
			color:#fff; text-shadow: 0 0 1rem rgba(100, 10, 10, .6);
		}
		
	dl,dt,dd {
		font-size:100%;
	}
		
/* -------------------------------------------------------- */

.largeView {display:block;}

.smartView {display:none;}

@media only screen and (max-width:750px) {
	.largeView {display:none;}
	.smartView {display:block;}
}

/* -------------------------------------------------------- */

.pelagos canvas {
	filter:drop-shadow(5rem 5rem 1rem rgba(155,100,100, .3)); opacity:0;
	transition:opacity 250ms linear;
}
	 .pelagos.active canvas {opacity:1;}

/*
 --------------------------------------------------------*/
 

 
/* /////////////////////////////////////////////////////////////////////////////////////////// */
		
.BoxCafe {
	position:absolute; top:50%; left:50%; translate:-50% -50%;
}

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

 
	.boxForTitle {
		position:absolute; top:0rem; width:calc(490px + 1rem); z-index:5;
	}
		.boxForTitle h2 {
			font-family:'comfortaaregular'; line-height:2.5rem; font-size:2.5rem;
		}
	@media only screen and (max-width:750px) {
		.boxForTitle {
			width:calc(100% - 1rem);
		}
			.boxForTitle h2 {
				font-size:2rem; line-height:2rem;
			}
	}


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

.contactPageForm {
	width:600px; border-radius:.8rem; padding:1rem 1rem 3rem 1rem; background:rgba(255,255,255, .3);
}

	.contactPageForm .wpcf7 {
		width:100%;
	}
	
		.contactPageForm .wpcf7 .wpcf7-form {
			display:flex; flex-flow:row wrap; justify-content:space-around;
		}
		
			.contactPageForm .wpcf7 .wpcf7-form label.thePrenom, .contactPageForm .wpcf7 .wpcf7-form label.theNom {
				width:calc(50% - 1rem);
			}
			.contactPageForm .wpcf7 .wpcf7-form label.thePrenom {
				
			}
			.contactPageForm .wpcf7 .wpcf7-form label.theNom {}
			
			.contactPageForm .wpcf7 .wpcf7-form label.theMail {
				width:calc(100% - 1rem);
			}
			.contactPageForm .wpcf7 .wpcf7-form label.theMessage {
				width:calc(100% - 1rem); margin:1rem 0 0 0;
			}
			
			.contactPageForm .wpcf7 .wpcf7-form label span input, .contactPageForm .wpcf7 .wpcf7-form label span textarea {
				padding:.5rem; width:100%;
			}
			
			.contactPageForm .wpcf7 .wpcf7-form input[type=submit] {
				padding:.5rem; font-weight:bold; color:rgb(255,255,255); background:rgb(19, 177, 19);
				position:absolute; bottom:-2rem; left:.5rem;
			}
			
	.wpcf7 form .wpcf7-response-output {
		font-size:.8rem;
	}		
	.wpcf7-not-valid-tip {
		color:#ffffff; font-size:.8rem;
	}


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

	article.laPage .entry-content figure {
		height:fit-content; width:fit-content; float: left; margin: 0 1rem .5rem 5rem;
	}
		article.laPage .entry-content figure img {
			height:150px; width:150px;
		}

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

@media only screen and (max-width:750px) {
	.infosTxt {
		width:calc(100% - 2rem) !important;
		padding:2rem 1rem;
	}
	
	.infosTxt p {
		text-align:justify; padding:0 .5rem .5rem .5rem;
	}
}