body{
    margin: 0;
	padding: 0;
	border: 0;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

section {
    position: relative;
    width: 100%;
}

#thanks {
    background-color: #fff;
}

#thanks::after {
    content: none;
}

#thanks div {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

#thanks h2 {
    margin-bottom: 60px;
    color: #333;
    font : normal 300 64px/1 'Josefin Sans', sans-serif;
    text-align: center;
    white-space: nowrap;
}

#thanks p {
    color: #333;
    font : normal 400 20px/1 'Josefin Sans', sans-serif;
}

#thanks p a {
  color: #333;
  text-decoration: none;
  transition: color .3s;
}
#thanks p a:hover {
  color: #888;
}
.demo a {
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}

.demo a:hover {
  opacity: .5;
}

#section05 a {
  padding-top: 70px;
  text-align: center;
  display: block;
}
#section05 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

.iconemenu2{
    display: none;
}

.colorred2{
    display: none;
}

.cachevideo{
	width: 100%;
    height: 96vh;
    background-image:url(image/bird_naturex.jpg);
	background-size: cover;
    position: absolute;
}

.textecachevideo{
    color: white;
    float: right;
    padding-right: 5vw;
}

.textecachevideo p{
    font-size: 27px;
    text-align: left;
    font-family: 'MS Sans Serif', Geneva, sans-serif;
}

.boutonplay {
    text-align: center;
    margin-top: 273px;
    color: white;
}

.boutonplay i{
    color: white;
    cursor: pointer;
}

.boutonplay i:hover{
    color: #91be3b;
}

.textescroll{
    color: white;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
}

.textevideo p{
    color: white;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 5vh 0vh 18vh;
}

.videonaturex{
    height: 96vh;
}

#actualitenaturex{
    width: 100%;
    height: 249px;
    background: #dac5da;
    font-size: 15px;
}

#actualitenaturex h2, i{
    color: #91be3b;
}

.block1{
    width: 27%;
    float: left;
}

.block1 h1{
    text-align: right;
    padding-top: 12px;
    margin-right: 35px
}

.block2{
    width: 20%;
    float: left;
    padding-top: 12px;
    margin: 0px 20px 0px 0px;
}

.block3{
    width: 20%;
    float: left;
    padding-top: 12px;
    margin: 0px 0px 0px 20px;
}

.block4{
    width: 20%;
    float: left;
    padding-top: 12px;
    margin: 0px 0px 0px 40px;
}

.accordion {
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  width: 16.666%;
  height: 250px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 1000ms ease;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}

.accordion ul li div a {
  display: block;
  height: 98.3vh;
  width: 100%;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  transition: all 200ms ease;
}

.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

.accordion ul li div a h2 {
  font-family: Montserrat, sans-serif;
  text-overflow: clip;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 160px;
}

.accordion ul li div a p {
  top: 160px;
  font-size: 13.5px;
}

.accordion ul:hover li { width: 28%; }

.accordion ul:hover li:hover { width: 60%; }

.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.groupe{
    background-image: url(http://www.naturex.fr/var/naturex/storage/images/bloc-notre-groupe/1357-18-fre-FR/BLOC-NOTRE-GROUPE.jpg);
    background-size: cover;
}

.activite{
    background-image:url(image/BLOC-NOS-ACTIVITES_large.png);
    background-size: cover;
}

.engagement{
    background-image: url(http://www.naturex.fr/var/naturex/storage/images/bloc-nos-engagements/1377-8-fre-FR/BLOC-NOS-ENGAGEMENTS.jpg);
    background-size: cover;
}

.nature {
    width: 100%;
    height: 630px;
    background-image: url(image/background_nature.jpg);
    background-size: cover,
}

.nature p{
    color: white;
}

.textenature{
    padding-top: 10vh;
    margin-left: 15vw;
}

.textenature span{
    font-weight: bold;
}

.fnp{
    padding-top: 6vh;
    padding-left: 30vw;
    width: 60%;
    display: flex;
    justify-content: space-between;
}

.fnp p{
    font-weight: bold;
}

.fb{
    margin: auto;
    display: block;   
}

.rond1{
    width: 97px;
    height: 99px;
    margin: auto;
    background-image: url(http://www.naturex.fr/var/naturex/storage/images/marches/food-beverage/1580-36-fre-FR/Food-Beverage.png);
}

.rond2{
    width: 100px;
    height: 95px;
    margin: auto;
    background-image: url(http://www.naturex.fr/var/naturex/storage/images/marches/nutrition-health/1581-30-fre-FR/Nutrition-Health.png);
}

.rond3{
    width: 97px;
    height: 97px;
    margin: auto;
    background-image: url(http://www.naturex.fr/var/naturex/storage/images/marches/personal-care/1582-58-fre-FR/Personal-Care.png);
}

.naturexlive{ 
    width: 77%;
    margin: auto;
    height: 1429px;
}

.live1{
    width: 100%;
    height: 400px;
}

.live1_1{
    width: 21.5%;
    height: 100%;
    float: left;
    margin-right: 3%;
}

.naturexlive1{
    width: 100%;
    height: 60%;
    background:#6E6E6E;
}

.naturexlive2{
    width: 100%;
    height: 40%;
}

.naturexlive2 p{
    margin:7%;
    font-size: 14px
}

.naturexlive3{
    width: 21.5%;
    height: 100%;
    background: #01A9DB;
    float: left;
    margin-right: 3%;
}

.naturexlive4{
    width: 51%;
    height: 100%;
    background: pink;
    float: left;
}

.live2{
    width: 100%;
    height: 400px;
    margin-top: 3%;
}

.naturexlive5{
    width: 21.5%;
    height: 100%;
    background: #01DF3A;
    float: left;
    margin-right: 3%;
}

.naturexlive6{
    width: 21.5%;
    height: 100%;
    background-image: url(image/hand_flower.jpg);
    background-size: cover;
    float: left;
    margin-right: 3%;
}

.live1_2{
    width: 24%;
    height: 100%;
    float: left;
    margin-right:3%;
}

.naturexlive7{
    width: 100%;
    height: 60%;
    background:#6E6E6E;
}

.naturexlive8{
    width: 100%;
    height: 40%;
}

.naturexlive8 p{
    font-size: 14px;
}

.naturexlive9{
    width: 24%;
    height: 100%;
    background: #0B614B;
    float: right;
}

.live3{
    width: 100%;
    height: 400px;
    margin-top: 3%;
}

.naturexlive10{
    width: 46%;
    height: 100%;
    background-image:url(image/field_background.jpg);
    background-size: cover;
    float: left;
    margin-right: 3%;
    color: #0B614B;
    font-size: 70%;
}

.naturexlive10 h1{
    margin-top: 9%;
    margin-left: 9%;
}

.naturexlive11{
    width: 24%;
    height: 100%;
    background: #01A9DB;
    float: left;
    margin-right: 3%;
}

.naturexlive12{
    width: 24%;
    height: 100%;
    background-image: url(image/field2_background.jpg);
    background-size: cover;
    float: left;
}

.textenaturexlive p {
    background: #01DF3A;
    text-align: center;
    width: 41%;
    color: white;
    font-size: 12px;
    padding: 6px;
}

.titrenaturexlive p{
    color: #6E6E6E;
    margin-left: 20px;
}

.textenaturexlive11 p{
    font-size: 0.75em;
    text-align: left;
    color: white;
}

.textenaturexlive11 i{
    color: white;
}

.logo i{
    color: white;
}

.logo{
    text-align: center;
    margin-top: 10%;
}

.titrenaturex{
    color: white;
}

.titrenaturex i{
    color: white;
}

.menu {
	color: #fff;
    display: block;
    margin: auto;
    font-size: 10px;
    background: white;
}

.sticky{
    position: fixed !important;
    top: 0;
    width: 100%;
}


.menu-links {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
    justify-content: center;
    text-align: center;
}

.menu-links a {
	color: #6c6c6c;;
	display: inline-block;
	padding: 10px;
	text-decoration: none;
}

.iconemenu a:focus,
.iconemenu a:hover {
	outline: none;
}

.menu-links a:active {
	background-color: #666;
}

.menu-toggle-button {
	cursor: pointer;
	display: none;
	padding: 1rem;
	user-select: none;
}

.menu-toggle:focus ~ .menu-toggle-button,
.menu-toggle-button:hover {
	background-color: #444;
}

.menu-toggle {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.coloryellow{
    padding: 3px;
}

.colorred{
    padding: 3px;
}

.colorblue{
    padding: 3px;
}

.colorpink{
    padding: 3px;
}

.coloryellow:hover{
    background:#013220;
    
}

.coloryellow:hover a{
    color: white;
}

.colorred:hover{
    background:#ff8000;
}

.colorred:hover{
    background:#05c880;
}

.colorred a:hover{
    color: white;
}

.colorpink:hover{
    background:#ff00bf;
}

.colorpink a:hover{
    color: white;
}

.colorblue:hover {
    background: #05c81e;
}

.colorblue a:hover {
    color: white;
}


.chifrescle{
    width: 100%;
    background:#8FBC8F;
    font-size: 12px;
}


.chifrescle i{
    color: gray;
}

.blockchiffrescle{
    width: 77%;
    height: 518px;
    margin: auto;
    
}

.blockcl{
    width: 65%;
    height: 50%;
    float: left;
}

.blockaction{
    width: 30%;
    height: 50%;
    float: right;
}


.blockcl hr{
    padding-top: 0;
    background: #2E8B57;
    height: 1px;
}

.blockaction hr{
    padding-top: 0;
    background:#2E8B57;
    height: 1px;
}

.blockbourse{
    background: #fbf8e5;
    height: 201px;
}

.blockbourse p{
    color: #0B614B;
    margin: 0;
    padding: 18px;
}

.blockgauche{
    width: 100%;
    height: 201px;
}  

.block1500{
    width: 46%;
    height: 100%;
    background-image: url(image/people_naturex.jpg);
    background-size: cover;
    float: left;
}

.block1500 p {
    margin-top: 70px;
    text-align: center;
    font-weight: bold;
    font-size: 23px;
    color: #0B614B;
}

.unite15{
    width: 46%;
    height: 45%;
    background: #fbf8e5;
    float: right;
    text-align: center;
    font-size: 17px;
}

.unite15 p{
    font-weight: bold;
    margin: 30px;
    color: #0B614B;
}

.block320{
    width: 46%;
    height: 45%;
    background: #fbf8e5;
    float: right;
    margin-top: 3.2%;
    text-align: center;
}

.block320 p{
    font-weight: bold;
    margin: 27px;
    color: #0B614B;
}

.blocktexte{
    width: 100%;
    float: left;
    display: flex;
    justify-content: space-between;
}

.blocktexte1{
    width: 30%;
    margin-top: 5.8%;
}

.blocktexte1 hr{
    height: 1px;
}

.blocktexte2{
    width: 30%;
    margin-top: 5.8%;
}

.blocktexte3{
    width: 30%;
    margin-top: 5.8%;
}

.logogouvernace{
    text-align: right;
}

.gouvernance p{
    margin: 10px 0px 39px 0px
}

.espace p{
    margin: 10px 0px 39px 0px
}

.logonaturex320{
    float: left;
    padding-top: 22px;
    padding-left: 30px;
}

table {
    width: 50%;
    height: 180px;
    margin: auto;
    text-align: center;
    text-decoration: none;
}

table a{
    text-decoration: none;
    color: gray;
}

@media (max-width: 450px) {
    
    .cachevideo{
       background-image:url(image/bird_naturex.jpg);
	   background-size: cover; 
    }
    
    body{
       margin-left: 5px; 
       margin-right: 5px; 
    }
    
    #section05{
        display: none;
    }
    
    .iconemenu2{
        margin-left: 18vw !important;
    }
    
    .pagenaturex{
        width: 80px;    
    }
    
    .premierblock{
        margin-top: 46px;
    }
    
    .videonaturex{
        height: 184px;
    }
    
    .boutonscroll{
        display: none;
    }
    
    .textescroll{
        display: none;
    }
    
    .textevideo p{
        margin: 2vh 0vh 0vh;
        font-size: 9px; 
    }
    
    .textecachevideo p{
        font-size: 9px;  
    }
    
    .cachevideo {
        height: 185px;
    }
    
    .boutonplay {
        margin-top: 80px;
        font-size: 0.7em;
    }
    
    .fnp {
        padding-top: 28px;
        padding-left: 20vw;
        display: flex;
        justify-content: space-around;
        font-size: 0.7em;
        text-align: center;
    }
    
    .naturexlive12 {
        width: 100%;
        height: 80%;
    }
    
    .naturexlive11 {
        width: 100%;
        height: 89%;
    }
    
    .naturexlive10 {
        width: 100%;
        height: 65%;
    }
    
    .naturexlive9 {
        width: 100%;
        height: 77%;
    }
    
    .naturexlive5 {
        width: 100%;
        height: 77%;
    }
}


@media (max-width: 705px) {
    
    .premierblock{
        margin-top: 46px;
    }
    
    .block1{
        float: left;
        width: 100%;
    }
    
    .block1 h1 {
        text-align: left;
        padding-top: 3vh;
        margin-left: 17px;
        margin-right: 17px;
    }
    
    .block2{
        float: left;
        width: 95%;
        margin-left: 17px;
    }
    
    
    .block3{
        float: left;
        width: 95%;
        margin-left: 17px;
    }
    
    .block4{
        float: left;
        width: 95%;
        margin-left: 17px;
    }
    
    #actualitenaturex {
        height: 741px;
    }
   
}

@media (max-width: 950px) {
    
    .block1500{
       border-style: solid;
       color: #DAF7A6;
    }
    
    .unite15{
       border-style: solid;
       color: #DAF7A6;
    }
    
    .block320{
       border-style: solid;
       color: #DAF7A6;
    }
    
    .blockbourse{
       border-style: solid;
       color: #DAF7A6;
    }
    
    .blockaction hr{
        display: none;
    }
    
    .blockcl hr {
        display: none;
    }
    
    .textenaturexlive p{
        display: none;
    }
    
    .premierblock{
        margin-top: 46px;
    }
    
	.menu-links {
		flex-direction: column;
	}
	
	.menu-links a {
		width: 100%;
	}
	
	.menu-toggle:not(:checked) ~ .menu-links {
		display: none;
	}
	
	.menu-toggle-button {
		display: inline-block;
        background: green;
        float: left;
	}
    
    .menu{
        position: fixed;
        top: 0;
        width: 100%;
        background: white;
    }
    
    .iconemenu{
        display: none;
    }
    
    .buttonnaturex{
        display: none;
    }
    
    .colorred{
        display: none;
    }
    
    .iconemenu2{
        display: block;
        float: left;
        margin-top: 14px;
        margin-left: 36vw;
    }
    
    .colorred2{
        display: block;
        float: right;
        margin-top: 17px;
        margin-right: 20px;
    }
    
    .menu-links {
        display: block;
        list-style: none;
        margin-top: 45px;
    }
    
    .menu-links li{
        border-style: solid;
        border-width: 1px;
        color: black;
    }
    
    .titrenaturexlive{
        float: left;
        width: 100%;
    }
    
    .naturexlive{
        width: 100%;
    }
    
    .naturexlive7 {
        width: 100%;
        background-image: url(image/femme_responsive.jpg);
        background-size: cover;
    }
    
    .naturexlive1 {
        background-image: url(image/femme_responsive.jpg);
        background-size: cover;
    }
    
    .logoloupe{
        display: none;
    }
    
    .live1_1 {
        width: 100%;  
    }
    
    .naturexlive3 {
        width: 100%;
        height: 340px
    }
    
    .naturexlive4 {
        width: 100%;
        margin-top: 20px;
    }
    
    .naturexlive2{
        width: 100%;
        height: 40%;
    }

    .naturexlive2 p{
        margin:4%;
        font-size: 15px
    }
    
    .naturexlive5 {
        width: 100%;
        margin-top: 20px;
    }
    
    .naturexlive6 {
        width: 100%;
        margin-top: 20px;
    }
    
    .naturexlive7 {
        width: 100%;
        background-image: url(image/femme_responsive.jpg);
        background-size: cover;
        margin-top: 20px;
    }
    
    .live1_2 {
        width: 100%;
        background: white;
    }
    
    .naturexlive8{
        width: 100%;
        height: 40%;
    }

    .naturexlive8 p{
        margin:4%;
        font-size: 15px
    }
    
    .naturexlive9 {
        width: 100%;
        margin-top: 20px;
    }
    
    .naturexlive10 {
        width: 100%;
        margin-top: 20px;
    }
    
    .naturexlive11 {
        width: 100%;
        margin-top: 20px;
    }
    
    .naturexlive12 {
        width: 100%;
        margin-top: 20px;
    }
    
    .textenaturexlive p{
        width: 100%;
    }
    
        .blockchiffrescle{
        float: left;
        width: 100%;   
    }
    
    .block1500{
        float: left;
        width: 100%;
    }
    
    .blockcl{
        float: left;
        width: 100%;
    }
    
    .unite15{
        float: left;
        width: 100%;
        margin-top: 30px;
    }
    
    .block320{
        float: left;
        width: 100%;
        margin-top: 30px;
    }
    
    .blockaction{
        float: left;
        width: 100%;
        margin-top: 270px;
    }
    
    .blocktexte{
        float: left;
        width: 100%;
    }
    
    .blocktexte{
        display: block;
    }
    
    .blocktexte1{
        float: left;
        width: 100%;
        margin-top: 30px;
    }
    
    .blocktexte2{
        float: left;
        width: 100%;
        margin-top: 30px;
    }
    
    .blocktexte3{
        float: left;
        width: 100%;
        margin-top: 30px;
    }
    
    .chifrescle {
        background:white;
    }
    
    .blockbourse{
        text-align: center;
        font-size: 18px;
    }
    
    table{
        margin-top: 600vh;
        display: none;
    }
    
    .plan{
        width: 100%;
        float: left;
        display: none;
    }
    
    .mention{
        width: 100%;
        float: left;
        display: none;
    }
    
    .credit{
        width: 100%;
        float: left;
        display: none;
    }
}