@CHARSET "ISO-8859-1";
html {
	height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
* {
	padding: 0;
    margin: 0;
}
body {
	width:100%;
	height:100%;
}
.fullpage-wrapper {
	height: 100%;
	position: relative;
}
#fullpage {
	height: 100%;
	width: 100%;
	position: relative;
}

#section1,
#section1 .fp-slide,
#section1 .fp-tableCell{
    height: 100% !important;
}
#section2,
#section2 .fp-slide,
#section2 .fp-tableCell{
    height: 100% !important;
}
#section3,
#section3 .fp-slide,
#section3 .fp-tableCell{
    height: 100% !important;
}
.slider {
    object-fit: cover;
	width: 100vw;
    height: 100vh;
    margin:0;
    text-align: center;
    background-size: cover;
    padding: 0 0 0 0;
    position: relative;
    background-position: center center;
}
/* TITRES MENU */
h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6em;
	text-align:center;
	letter-spacing: 0.17em;
	padding-top: 0.2em; 
	padding-bottom: 0.2em; 
	color:#000;
	font-weight: 1000;
}

/* TITRES SECTIONS */
h2 {
	font-family: 'Montserrat', sans-serif;
	position: absolute; 
    width: 100%; 
	line-height:85%; 
	padding-right: 2%;
}
.octopusandmonster {
	color: pink;
	width: 100vw;
	font-size:15vw;
	text-align: right;
	right: 4%;
	bottom: 6%;
}
.octopusandmonster2 {
	color: pink;
	width: 100vw;
	letter-spacing: 0.5vw;
	text-transform: uppercase;
	font-size:1.5vw;
	text-align: right;
	right: 1.5%;
	transform: rotate(90deg);
	transform-origin: right top 0;
}
.lesfac2 {
	color: white;
	width: 100vw;
	letter-spacing: 0.4vw;
	text-transform: uppercase;
	font-size:1.2vw;
	text-align: right;
	right: 1.5%;
	transform: rotate(90deg);
	transform-origin: right top 0;
}
.destination21 {
	color: #53ffc8;
	width: 100vw;
	font-size:13vw;
	text-align: left;
	left: 3%;
	bottom: 18%;
}
.destination212 {
	color: #53ffc8;
	width: 100vw;
	letter-spacing: 0.4vw;
	text-transform: uppercase;
	font-size:1.2vw;
	text-align: right;
	right: 1.5%;
	transform: rotate(90deg);
	transform-origin: right top 0;
}
.carnetdebord {
	color: #dbff16;
	font-size: 19vw;
	text-align: right;
	right: 7%;
	bottom: 6%;
}
.carnetdebord2 {
	color: #dbff16;
	width: 100vw;
	letter-spacing: 0.4vw;
	text-transform: uppercase;
	font-size:1.2vw;
	text-align: right;
	right: 1.5%;
	transform: rotate(90deg);
	transform-origin: right top 0;
}
.teteatete {
	color: #ff3232;
	font-size: 17vw;
	text-align: right;
	right: 2%;
	bottom: 4%;
}

.salut {
	color: #f3ff69;
    font-size: 22vw;
    text-align: center;
	bottom: 4%;
	right: 3%;
}

/* DESCRIPTIFS SLIDES */
h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 3vw;
	color: black;
	position: absolute; 
	bottom: 1%;
	width: 100vw;
	text-align: right;
	margin: 2vw;
}
.rose {
	color: pink;
}
.bleu {
	color: #53ffc8;
}
/* TEXTE EXPLICATIFS */
h4 {
	font-family: 'Montserrat', sans-serif;
	color: black;
    width: 96vw;
    height: 96vw;
	font-size: 2em;
	text-align: justify;
	margin: 7vw 2vw 0vw 2vw;
	position: relative;
}
/* TEXTE EXPLICATIFS DES PROJETS*/
.textvertical {
	margin: 0;
	position: relative; 
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
}
h5 {
	font-family: 'Montserrat', sans-serif;
	color: red;
	font-size: 3vw;
	width: 100vw;
	text-align: left;
	margin: 2vw;
}

.commentaire1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 5.7vw;
	color: #53ffc8;
	position: absolute; 
	width: 54vw;
	text-align: right;
	margin: 2vw;
	line-height:93%; 
}
.commentaire2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 6.5vw;
	color: pink;
	position: absolute; 
	width: 54vw;
	text-align: right;
	margin: 2vw;
	line-height:93%; 
}
.commentaire3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 10vw;
	color: #dbff16;
	position: absolute; 
	width: 54vw;
	text-align: right;
	margin: 2vw;
	line-height:93%; 
}
.commentaire4 {
	font-family: 'Montserrat', sans-serif;
	font-size: 8vw;
	color: #ff3232;
	position: absolute; 
	width: 54vw;
	text-align: right;
	margin: 2vw;
	line-height:93%; 
}
.contactezmoi {
	font-family: 'Montserrat', sans-serif;
	font-size: 4vw;
	color: black;
	position: absolute; 
	width: 100vw;
	text-align: center;
	margin-top: 25vw;
}
.liens {
 	text-decoration:none; 
	color: black;
	font-size: 3vw;
}
/* FADEIN TITRES DES SECTIONS */
.section.active h2,.lesfactitre3 {
	animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}
.section.active h2 {
	animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}
.section.active h2 {
	animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}
/* FADEIN S'AFFICHENT CORRECTEMENT SUR CHAQUES NAVIGATEURS */
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/* MOUVEMENTS DES TEXTES DANS LES SLIDES */
.slide h3 {
	right: -100%;
	visibility: hidden;
	-webkit-transition: all 1s ease;
    -moz-transition:    all 1s ease;
    -o-transition:      all 1s ease;
    
}
.slide.active h3 {
	right: 0%;
	visibility: visible;
}
.slide h3 {
	right: -100%;
	visibility: hidden;
	-webkit-transition: all 1s ease;
    -moz-transition:    all 1s ease;
    -o-transition:      all 1s ease;
}
.slide.active h4 {
	top: 0%;
	visibility: visible;
}
.slide h4 {
	top: -100%;
	visibility: hidden;
	-webkit-transition: all 1s ease;
    -moz-transition:    all 1s ease;
    -o-transition:      all 1s ease;
}
.slide.active h4 {
	top: 0%;
	visibility: visible;
}
.slide h4 {
	top: -100%;
	visibility: hidden;
	-webkit-transition: all 1s ease;
    -moz-transition:    all 1s ease;
    -o-transition:      all 1s ease;
}
.slide.active h4 {
	top: 0%;
	visibility: visible;
}
/* TEXTES DANS LES LIGHTBOX */
data-caption {
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	text-align:center;
	letter-spacing: 0.3em;
	padding-top: 0.3em; 
	padding-bottom: 0.3em; 
	color:#000;
}
/* TITRES SUR LES IMAGES */
.lesfactitre {
	position: absolute;
    width: 100%; 
	right: 0;
	top: 20%;
}
.lesfactitre3 {
	position: absolute;
    width: 100%; 
	right: 0;
	top: 30%;
	text-align: center;
}
.textonimage { 
   position: relative; 
   width: 100%; /* for IE 6 */
}
/* IMAGES EN COVER */
.gross {
	color:#FFF;
	object-fit: cover;
	width: 100vw;
    height: 100vh;
    margin:auto;
    text-align: center;
    background-size: contain;
    padding: 0 0 0 0;
}
.pdf {
	color:#FFF;
	object-fit: cover;
	width: 100vw;
    height: 100vh;
    margin:auto;
    text-align: center;
    background-size: contain;
    padding: 0 0 0 0;
    cursor: url('../images/icones/voir.png'), auto;
}
.hi {
    cursor: url('../images/logo4.png'), auto;
}


#photos {
   /* Prevent v2ertical gaps */
   line-height: 0;
   -webkit-column-count: 3;
   -webkit-column-gap:   0px;
   -moz-column-count:    3;
   -moz-column-gap:      0px;
   column-count:         3;
   column-gap:           0px;
}


#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  padding: 2.5%;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
/* TITES DANS LA SECTION CONTACT */
.on {
	font-family: 'Montserrat', sans-serif;
	background:url(../images/rebu/on2.gif);
	background-size: cover;
	color:pink;
    width: 100vw;
    height: 100vh;
    margin:auto;
	padding-top: -10%;
    font-size: 50vw;
    text-align: center;
}
.va {
	font-family: 'Montserrat', sans-serif;
	background:url(../images/rebu/va2.gif);
	background-size: cover;
	color:#F3FF00;
    width: 100vw;
    height: 100vh;
    margin:auto;
	padding-top: -10%;
    font-size: 50vw;
    text-align: center;
}
.trouver {
	font-family: 'Montserrat', sans-serif;
	background:url(../images/rebu/trouver2.gif);
	background-size: cover;
	color:#C2FF00;
    width: 100vw;
    height: 100vh;
    margin:auto;
	padding-top: 20%;
    font-size: 25vw;
    text-align: center;
}
.des {
	font-family: 'Montserrat', sans-serif;
	background:url(../images/rebu/des2.gif);
	color:#F3FF00;
    width: 100vw;
    height: 100vh;
    margin:auto;
	padding-top: -10%;
    font-size: 50vw;
    text-align: center;
}
.idees {
	font-family: 'Montserrat', sans-serif;
	background:url(../images/rebu/idee2.gif);
	background-size: cover;
	color:#C2FF00;
	width: 100vw;
	height: 100vh;
	margin:auto;
	padding-top: 20%;
	font-size: 30vw;
	text-align: center;
}
.super {
	font-family: 'Montserrat', sans-serif;
	background:url(../images/rebu/super2.gif);
	background-size: cover;
	color:#3EFF00;
    width: 100vw;
    height: 100vh;
    margin:auto;
	padding-top: 10%;
    font-size: 35vw;
    text-align: center;
}
.pour {
	font-family: 'Montserrat', sans-serif;
	background:url(../images/rebu/pour2.gif);
	background-size: cover;
	color:#00FFC1;
    width: 100vw;
    height: 100vh;
    margin:auto;
	padding-top: 10%;
    font-size: 35vw;
    text-align: center;
}
.toi {
	font-family: 'Montserrat', sans-serif;
	background:url(../images/rebu/toi2.gif);
	background-size: cover;
	color:#FF00E6;
    width: 100vw;
    height: 100vh;
    margin:auto;
	padding-top: -5%;
    font-size: 50vw;
    text-align: center;
}
/* VIDEO COVER */


.lesfac:hover {
	background-image: url(../images/graphics/background2.gif);
	background-repeat:repeat;
}

#menu li {
	color: #000;
	background:#fff;
}
#menu li.active{
	background:#fff;
	color: #fff;
}
nav {
	display: block;
	position:absolute;
    width: 100%;
	top:0;
	left:0;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}
nav li {
    display:inline-block;
	margin: 0;
	color: #000;
	font-weight: 1000;
}
nav li.active {
	font-style:italic;
}
nav li a {
	color:#FFF;
	text-decoration:none;
	color:#000;
}
nav li.active a {
	font-style:italic;
	padding:0;
	display:block;
	color: #FF3171;
}
nav ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding-top: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 2.2vw;
	letter-spacing: 3px; 
	background-color: #FFF;
}
nav li a:hover {
	color:black;
	font-style:italic;
	font-weight: 1000;
	color:#000;
}
nav ul li {
    list-style: none;
    flex-grow: 1;
    text-align: center;
}
nav ul li a {
    display: block;
}
#NavStrip label {
	display: none;
	position:relative;
}
#menu-toggle {
  display: none;
}
/**adapter la video à la page anime**/
#myVideo {
	position: relative;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: 101%;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-position: center center;
	background-size: contain;
	object-fit: cover; /*cover video background */
	z-index:3;
	cursor: url('../images/icones/play.png'), auto;
}
#myVideo2 {
	position: relative;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: 101%;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-position: center center;
	background-size: contain;
	object-fit: cover; /*cover video background */
	z-index:3;
}
.texte {
	margin:auto;
	margin-top:5%;
	text-align:center;
	width:85%;
	min-height: 100%;
}
#myfont {
	background:url(../images/fac/background.gif);
	background-size: 100% 100%;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
}

.videobox {
	width: 100%    !important;
	height: 100%  !important;	
}

/**div pour adapter les video a la page graphics**/
.videoWrapper2 {
	position: relative;
	padding-bottom: 54%; /* 16:9 */
	padding-top: 3%;
	height: 0;
	overflow: hidden;
}
.videoWrapper2 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/**flèches de nav de fullpage contact**/
.updownArrow {
    position: fixed;
    left:10px;
    right: 10px;
}
.updownArrow.down {
    bottom:10px;
    top: 70%;
    cursor: url('../images/icones/downarrow.png') 30 15, auto;
    z-index: 5;
}
.updownArrow.up {
    top:10px;
    bottom:70%;
    cursor: url('../images/icones/uparrow.png') 30 15, auto;
    z-index: 10;
}


/*
.controlArrow {
    position: absolute;
    top:10px;
    bottom:10px;
}
.controlArrow.next {
    right:10px;
    left: 70%;
    cursor: url('../images/nextarrow.svg') 30 15, auto;
	z-index: 15;
}
.controlArrow.prev {
    left:10px;
    right: 70%;
    cursor: url('../images/prevarrow.svg') 30 15, auto;
	z-index: 20;
}
*/
@media all and (max-width: 1000px) and (min-width: 0px) {
	
h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.6em;
	text-align:center;
	letter-spacing: 0.3em;
	color:#000;
}
h4 {
	font-family: 'Montserrat', sans-serif;
	color: black;
    width: 96vw;
    height: 90vw;
	font-size: 1.6em;
	text-align: justify;
	margin: 8vw 2vw 0vw 2vw;
	position: relative;
}
.salut {
	color: #f3ff69;
    font-size: 32vw;
    text-align: center;
	bottom: 4%;
	right: 3%;
}
#NavStrip label {
	z-index: 40;
	display:block;
	position:fixed;
	height:90px;
	width:90px;
	line-height:90px;
	text-align:center;
	color:black;
	font-size:500%;
	background-color: transparent; 
	cursor:pointer;
}
#NavStrip nav {
	display: none;
}
#menu-toggle:checked + nav {
	display: block;
}
#NavStrip label:active nav {
	display: none;
}
nav {
    width: 100%;
	position:fixed;
}
nav li {
    display:inline;
}
nav li a {
	color:#000;
}
nav li a:active {
	font-style:italic;
}
nav ul {
    display: block;
    padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 14vw;
	letter-spacing: 5px; 
	background-color: transparent;
}
nav li a:hover {
	color:black;
	font-style:italic;
	font-weight: 1000;
}
nav ul li {
    text-align: center;
}
nav ul li a {
	display: block;
}
#menu {
	background-color:rgba(255, 255, 255, 1);
}
.texte {
	margin:auto;
	margin-top:10%;
	text-align:center;
	width:90%;
}
.octopusandmonster {
	color: pink;
	width: 100vw;
	font-size:18vw;
	text-align: right;
	right: 3%;
	bottom: 3%;
}
.on {
	background:url(../images/rebu/on.gif);
	background-repeat:repeat;
    background-size:auto;
    font-size: 68vw;
}
.va {
	background:url(../images/rebu/va.gif);
	background-repeat:repeat;
    background-size:auto;
    font-size: 72vw;
}
.trouver {
	background:url(../images/rebu/trouver.gif);
	background-repeat:repeat;
    background-size:auto;
}
.des {
	background:url(../images/rebu/des.gif);
	background-repeat:repeat;
    background-size:auto;
    font-size: 52vw;
}
.idees {
	background:url(../images/rebu/idee.gif);
	background-repeat:repeat;
    background-size:auto;
	font-size: 33vw;
}
.super {
	background:url(../images/rebu/super.gif);
	background-repeat:repeat;
    background-size:auto;	
}
.pour {
	background:url(../images/rebu/pour.gif);
	background-repeat:repeat;
    background-size:auto;
    font-size: 40vw;
}
.toi {
	background:url(../images/rebu/toi.gif);
	background-repeat:repeat;
    background-size:auto;
    font-size: 69vw;
}
}
@media all and (max-width: 600px) and (min-width: 0px) {
h4 {
	font-family: 'Montserrat', sans-serif;
	color: black;
    width: 96vw;
    height: 98vw;
	font-size: 1.3em;
	text-align: left;
	margin: 2vw 2vw 0vw 2vw;
	position: relative;
}
}