@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: "hurufo";
    src: url('fonts/HurufoNumeroThin.woff') format('woff');
    src: url('fonts/HurufoNumeroThin.ttf') format('truetype');
}

@font-face {
    font-family: "geo";
    src: url('fonts/GeosansLight.ttf');
}

html{
}

body {
	margin:auto;
	padding: auto;
  	width: 100%;
	min-width:230px;
  	height: 100%;
	max-width:1250px;
  	z-index: 0;
	background-color:white;
	
}

#bandeau{
	float:left;
	position:fixed;
	width:210px;
	height:100%;
	z-index:20;
}

#navmob{
    display: none;
    
}

#mainmenu{
	width:210px;
	position:absolute;
	top:20vh;
	background-color:#FFF;
	text-align:right;
	font-family: hurufo;
	font-size:23px;
	z-index:20;
}

.logoSeul{
	display:none;
    text-align: center;
	opacity:0.45;
	margin-top:20px;
}

.logoSeulPage{
	opacity:0.45;
    text-align:center;
    margin-top:20px;
}

ul{
	padding:0;
}

#mainmenu li{
	padding: 10px;
	list-style:none;
	color:#777;
	background: linear-gradient(to left,#CCC,#FFF) no-repeat,#FFF;
	transition: background-size .3s ease-in-out;
	background-size: 0 100%;
}

#mainmenu li:hover{
	padding-right: 10px;
	background-size:100% 100%;
}

/*menu slide (petits écrans)*/
#menu{
    display:none;
}

.actuelle{
	font-style:normal;
	padding: 10px;
	list-style:none;
	color:#FFF;
	background:linear-gradient(to left,#999,#BBB,#FFF) no-repeat;
}

#page{
	text-align:center;
	height:100%;
	margin-left:210px;
	min-width:230px;
    
}

h1{
    font-family: geo;
    font-size:30px;
    letter-spacing:20px;
    word-spacing:30px;
    color:white;
    width:90%;
    margin:auto;
}

h2{
    font-size:21px;
    text-align:left;
	margin:20px auto;
    width:98%;
}

h3{
    font-size:28px;
	text-align:center;
}

h5{
	margin: 0px 0px 10px 0px;
	display: inline-block;
}

p{
	text-align:justify;
	margin-bottom:20px;
}

a{
	font-style:normal;
	text-decoration:none;
	color:#777;
}

.conCentr{
	text-align:center;
}

.contlogo{
    margin:40px auto 5px auto;
    width:100%;
    text-align: center;
    
}

.logopart{
	vertical-align:top;
    text-align: center;
}

#paragraphe{
	font-family:hurufo;
	font-size:18px;
	color:#777;
	margin:50px auto;
	width:85%;
	text-align: left;
}

#sousparagraphe{
	display: inline-flex;
	text-align: center;
	align-items: center;
	font-family:hurufo;
	font-size:15px;
	color:#777;
	width:100%;
	margin-bottom: 30px;
}

.contact{
    display: inline-block;
    vertical-align: middle;
}

.contact p{
    display:inline-block;
}

.tarifs{ /*page natation*/
    display:flex;
    flex-wrap: wrap;
}

.tarifs .art{
    font-size: 18px;
    display:inline-block;
    margin:0 20px 20px 20px;
    flex:auto;
}

.conCentr table{
	margin:10px 8% 10px 8%;
	display:inline-block;
	text-align: left;
	vertical-align: top;
}

.horete table{
	margin:10px 8% 10px 8%;
	display:inline-block;
	text-align: center;
	vertical-align: top;
	border-collapse: collapse;
}

.horete table{
	text-align: center;
}

th{
	text-decoration:underline;
	font-weight:100;
	margin:10px;
}

.horete td, .horete th{
	width: 10%;
   border: 1px solid grey;
}

.horete td{
}

.image1, .image2, .image21, .image22, .image23, .image31, .image32, .image41, .image42, .image43, .image44
, .image51, .image52, .image61, .image62, .image71, .image72, .image81, .image82, .image83, .image811, .image812
, .image821, .image822, .image831, .image832, .image841, .image842 {
  position:relative;
  width:100%;
  min-width:230px;
  margin:auto;
  padding: auto;
  text-align:center;
  background-attachment:fixed;
  background-position:center;
  background-repeat: no-repeat;
  background-size: cover;
}

.image1 {
  background-image: url("images/IMG_0096.jpg");
  min-height: 100vh;
}

.image2 {
  background-image: url("images/IMG_0824.jpg");
  min-height: 70vh;
}

.image21 {
  background-image: url("images/IMG_0651.jpg");
  min-height: 100vh;
}

.image22 {
  background-image: url("images/IMGP4752.jpg");
  min-height: 60vh;
  background-position: 50% 90%;
}

.image23 {
  background-image: url("images/IMG_0654.jpg");
  min-height: 50vh;
}

.image31 {
  background-image: url("images/nagePalmes.jpg");
  min-height: 100vh;
}

.image32 {
  background-image: url("images/nagePalmes2.jpg");
  min-height: 70vh;
}

.image41 {
  background-image: url("images/fondNat.jpg");
  min-height: 100vh;
}

.image42 {
  background-image: url("images/nage.jpg");
  min-height: 70vh;
}

.image43 {
  background-image: url("images/nage2.jpg");
  min-height: 60vh;
}

.image44 {
  background-image: url("images/IMG_44.jpg");
  min-height: 70vh;
}

.image51 {
  background-image: url("images/mention.jpg");
  min-height: 100vh;
}

.image52 {
  background-image: url("images/mentionFin.jpg");
  min-height: 100vh;
  background-position: center calc( 12vh - 40px);
}

.image61 {
  background-image: url("images/aquaCont.jpg");
  min-height: 100vh;
}

.image62 {
  background-image: url("images/contact.jpg");
  min-height: 100vh;
}

.image71 {
  background-image: url("images/IMG_0300.jpg");
  min-height: 100vh;
}

.image72 {
  background-image: url("images/IMG_0257.jpg");
  min-height: 500px;
}

.image81 {
  background-image: url("images/bienetre.jpg");
  min-height: 100vh;
  background-position: calc(50% + 90px) bottom;
}

.image82 {
  background-image: url("images/IMG_ALOE2.jpg");
  min-height: 70vh;
}

.image83 {
  background-image: url("images/IMG_ALOE3.jpg");
  min-height: 70vh;
  background-position: 9vw center;
}

.image811 {
  background-image: url("images/AloeBoissonsGd.jpg");
  min-height: 30vw;
  background-position: center top;
  background-size: 100%;
}

.image812 {
  background-image: url("images/IMG_ALOE4.jpg");
  min-height: 100vh;
}

.image821 {
  background-image: url("images/AloeCompAliGd.jpg");
  min-height: 30vw;
  background-position: calc(50% + 100px) top;
  background-size: calc(70% + 240px);
}

.image822 {
  background-image: url("images/IMG_ALOE5.jpg");
  min-height: 100vh;
}

.image831 {
  background-image: url("images/AloeSportGd.jpg");
  min-height: 30vw;
  background-position: 5vw -4vh;
  background-size: 100%;
}

.image832 {
  background-image: url("images/IMG_ALOE3.jpg");
  min-height: 100vh;
  background-position: calc(12vw - 90px) top;
}

.image841 {
  background-image: url("images/AloeSoinsGd.jpg");
  min-height: 30vw;
  background-position: 10vw top;
  background-size: calc(70% + 250px);
}

.image842 {
  background-image: url("images/IMG_ALOE6.jpg");
  min-height: 100vh;
  background-position: 10vw center;
}

.imageText {
  float:right;
  vertical-align: middle;
  margin:0% 0% 5% 5%;
  max-width:240px;
  min-width:100px;
}

#menuAloe{
	margin-bottom: 100px;
}

.titreMenuAloe{
	position:relative;
	display:inline-block;
	text-align: center;
	width:40%;
}

.txtMenuAloe{
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .12rem;
	line-height: 90%;
	position: absolute;
	vertical-align: top;
	top:100%;
	left: 50%;
	padding:10px 0;
	transform: translate(-50%, -100%);
	color:#555;
	background-color: rgba(255, 255, 255, .5);
	width:100%;
}

.textAloe{
	vertical-align:middle;
	display: inline-block;
	margin: 10px;
}

.textAloePt{
	width: 42vw;
	vertical-align:middle;
	display: inline-block;
	margin: 10px;
}

.btcommand{
	width:100px;
	margin: auto;
	background-color: #8fb260;	
	color: #FFF;
}

.imageAloe {
	vertical-align: middle;
	display: inline-block;
	min-width: 150px;
	margin-right: 10px;
	margin-top: 0;
	margin-bottom: 0;
}

.imageAloeGd {
	width: 50%;
	text-align: right;
	display: inline-block;
	max-width: 260px;
	margin-right: 10px;
	vertical-align: middle;
}

.caption {
  position: absolute;
  top:50%;
  left:0;
  bottom:auto;
  right:0;
  margin:auto;
  max-width:1300px;
  color: #000;
}

.captionScroll {
  position: absolute;
  margin:auto;
  top:auto;
  left:0;
  bottom:30px;
  right:0;
  width:120px;
  max-width:1300px;
  color: #000;
}

.scroll{
	bottom:0;
    margin-top:0px;
	opacity:0.3;
    width:60px;
    text-align: center;
}
    
.caption2{ /*page mentions*/
    position:absolute;
    background:white;
    opacity:0.5;
    width:100%;
    bottom:80px;
    display:flex;
    flex-wrap: wrap;
    text-align:center;
}
    
.logolist{ /*page mentions*/
    width:40%;
    object-fit:scale-down;
    height:80px;
    display:inline-block;
    margin:auto;
    padding:10px;
    max-width:130px;
    flex:auto;
}

#bas{
	font-family:hurufo;
	background-color:#BBB;
	text-align: center;
	padding:10px 30px 0px 30px;
	resize:horizontal;
	font-size:18px;
}

#bas p {
    font-size:18px;
	color:#FFF;
    margin:0;
}

#bas .art{
    display:inline-block;
	color:#FFF;
    width:45%;
    text-align: left;
    vertical-align:top;
}

#bas .copyright{
	color:#FFF;
	font-size:18px;
	margin-top:25px;
}

#bas .logonom{
    background-image: url("images/logoLong.png");
    background-repeat: no-repeat;
    height:18px;
}

#part article{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:80px;
	min-height:80px;
	max-width:700px;
	text-align:left;
}


@media (min-width:1300px){
    .image1, .image2, .image21, .image22, .image23, .image31, .image32, .image42,
, .image51, .image52, .image61, .image62, .image71, .image72, .image82, .image83, .image811, .image812
, .image821, .image822, .image831, .image832, .image842{
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1300px;
        background-position:50%;
    }
    
    .image41{
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1380px;
        background-position:50%;
    }
    
    .image43{
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1380px;
        background-position:50% 100%;
    }
    
    .image44{
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1380px;
        background-position:50% 100%;
    }
    
    .image81{
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1380px;
        background-position:calc(50% + 90px);
    }
    
    /*.image821{
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1050px;
        min-height: 60vh;
        background-position:calc(50% + 100px) top;
    }
    
	.image841{
		position:relative;
		background-attachment:fixed;
		background-repeat: no-repeat;
		background-size:1050px;
		min-height: 60vh;
		background-position:calc(50% + 100px) top;     
	}*/
}


@media (max-width:900px){
	#mainmenu{
		width:150px;
		position:absolute;
		top:20vh;
		background-color:#FFF;
		text-align:right;
		font-family: hurufo;
		font-size:18px;
		z-index:20;
	}

	#page{
		text-align:center;
		height:100%;
		margin-left:150px;
		min-width:230px;
	}

	.logoSeul{
		display:none;
		text-align: center;
		opacity:0.45;
		margin-top:20px;
		width:70%;
	}

	.logoSeulPage{
		opacity:0.45;
		text-align:center;
		margin-top:20px;
		width:70%;
	}
	
}	
	
    
    
@media (min-height:900px){
    /*.image1, .image2, .image21, .image22, .image23, .image31, .image32, .image42,
, .image51, .image52, .image61, .image62, .image71, .image72, .image81, .image82, .image83, .image811, .image812
, .image821, .image822, .image831, .image832, .image842 {
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1300px;
        background-position:40% 50%;
    }
    
    .image1{
        min-height:50vh;
        background-position:50% calc( 10vh - 370px );
    }
    
    .image2{
        min-height:50vh;
        background-position:50% 100%;
    }
    
    .image21{
        min-height:70vh;
        background-position:100% calc( 15vh - 370px );
    }
    
    .image22{
        min-height:50vh;
        background-position:50% 100%;
    }
    
    .image23{
        min-height:300px;
        background-attachment:scroll;
        background-size: 60%;
    }
    
    .image31{
        min-height:50vh;
        background-position:50% -15vh;
    }
    
    .image32{
        min-height:50vh;
        background-position:50% 100%;
    }
    
    .image41 {
        min-height:50vh;
        background-position:50% -15vh;
    }

    .image42 {
        min-height:300px;
        background-attachment:scroll;
        background-size: 60%;
    }

    .image43 {
        min-height:300px;
        background-attachment:scroll;
        background-size: 60%;
    }

    .image44 {
        min-height:50vh;
        background-position:50% 100%;
    }

    .image51 {
        min-height: 50vh;
        background-size:1300px;
        background-position:50% -160px;
    }

    .image52 {
        min-height: 50vh;
        background-size:1800px;
        background-position:50% calc( 85% + 300px);
    }

    .image61 {
        min-height: 50vh;
        background-position:50% 0%;
    }

    .image62 {
        min-height: 50vh;
        background-position:50% calc( 85% + 250px);
    }

    .image71 {
        min-height: 50vh;
        background-position:50% 0%;
    }

    .image72 {
        min-height: 50vh;
        background-position:50% calc( 85% + 150px);
    }*/
    
    .scroll{
        visibility: hidden;
    }
}

@media (max-height:400px){

    .captionScroll{
        display:none;
    }
    
    #page{
	   margin-left:0px;
	   position:absolute;
	   text-align:center;
	   height:100%;
       width:100%;
    }
    
    #bandeau{
        display:none;
    }
    
    .logoSeulPage{
        display:none;
    }

    #navmob{
        background-color: #FFF;
        position: fixed;
        width: 58px;
        left:0%;
        height:60px;
        display: block;
        transition: top 0.6s;
        -webkit-transition: top 0.6s;
        box-shadow:0px 0px 6px #000;
        z-index:20;
    }
    
    #mainmenu{
        display: none;
    }
    
    /* Menu burger */
    #menu-burger {position:relative; top:0.6em; left:0.79em; display:inline-block; cursor:pointer;}
    #menu-burger .bar1,
    #menu-burger .bar2,
    #menu-burger .bar3 {width:32px; height:5px; background-color:#AAA; margin:6px 0; transition:0.4s;}
    #menu-burger:hover {opacity:.75; transition:0.5s;}
    #menu-burger.clicked .bar1 {-webkit-transform:rotate(-45deg) translate(-9px, 8px); transform:rotate(-45deg) translate(-9px, 8px);}
    #menu-burger.clicked .bar2 {opacity: 0;}
    #menu-burger.clicked .bar3 {-webkit-transform:rotate(45deg) translate(-7px, -7px); transform:rotate(45deg) translate(-7.5px, -7px);}

    /* Main menu (slide) */
    #menu {
        font-family: hurufo;
        font-size: 23px;
        display:block;
        position:fixed;
        left:-105%;
        background:#FFF;
        width:100%;
        height:calc( 100vh - 4vw * 4vw );
        box-shadow:0px 0 6px #000;
        z-index: 5;
        text-align:center;
        }
    
    #menu ul{
        margin-top:60px;
    }
    
    #menu ul li {
        list-style:none;
        white-space: nowrap;
        display:inline-block;
        margin:10px 20px;
    }
    #menu ul .actuelle{
        display:inline-block;
        color:#FFF;
        background: linear-gradient(to left,#999,#BBB,#FFF) no-repeat,#FFF;
        padding:10px;
        text-align:right;
    }
    #menu ul li a {
        color:#777;
        background: linear-gradient(to left,#CCC,#FFF) no-repeat,#FFF;
	    transition: background-size .3s ease-in-out;
        -webkit-transition: background-size .3s ease-in-out;
        background-size:0% 100%;
        padding:10px;
        text-align:right;
    }
    #menu ul li a:hover {
        background-size:100% 100%;
        transition:background-size .3s ease-in-out;
        -webkit-transition:background-size .3s ease-in-out;
    }

    #menu.visible {
        animation:.5s slideRight ease-in forwards ;
        transition-delay:0;
        -webkit-transition-delay:0;
    }
    #menu.invisible {
        animation:1s slideLeft ease-out forwards;
        transition-delay:0;
        -webkit-transition-delay:0;
    }

    /* Animations pour le menu slide */
    @keyframes slideRight {
	   from {left:-105%;}
	   to {left:0%;}
    }
    @-webkit-keyframes slideRight {
	   from {left:-105%;}
	   to {left:0%;}
    }
    @keyframes slideLeft {
	   from {left:0%;}
	   to {left:-105%;}
    }
    @-webkit-keyframes slideLeft {
	   from {left:0%;}
	   to {left:-105%;}
    }
    
    h1{
        font-size:16px;   
    }
    
    .image81{
    	min-height: 100%;
		background-position:50% bottom;
    }
    
    .image811{
    	min-height: 100%;
		background-position:50% top;
		background-size: 140%;
    }
    
    .image821{
    	min-height: 100%;
		background-position:50% top;
		background-size: 110%;
    }
    
    .image831{
    	min-height: 100%;
		background-position:50% 0%;
		background-size: 130%;
    }
}