/*
Theme Name:  ARBORENZIA
Author: Alban Monnier
Author URI: http://arborenzia.ch/
Description: Theme par ALBAN MONNIER ;
Text Domain: theme_AM
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/*RESET*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;    
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*GLOBAL*/

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix {display: inline-block;}
.selected { background: #FF0000; color: #FFF;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
.clear {clear: both;}
p {margin: 0px;  }
a:hover { color: #b1b1b1}
a { text-decoration: none ; color:white; text-transform:uppercase;font-weight:bold; }
*{box-sizing: border-box;}
ul {list-style: none;}

body{ font-family: "moniker", sans-serif;
font-weight: 700;
font-style: normal;
 font-size: 12px ; margin: 0px ; padding: 0px; background-color:white; color: #3d3d3d;opacity: 0;background-image: linear-gradient(153deg, #1f3047 0%, #5a6e9d 35%, #344163 100%); }

body.effect {opacity: 1;transition:  0.6s;}

p {font-size: 1.1vw;
    color: white;

    font-weight: 100; }

h1 {font-size: 1.8vw;
    text-transform: uppercase;
    font-weight: bold; color: #3d3d3d }
h2 {font-size: 20px;color: #3d3d3d;line-height: 30px;font-weight: 100;}
h3 {font-size: 20px;}


/*WRAPER*/
#main { /*padding-top:4.75vw */}
#wraper {width: 95vw;margin: auto;z-index: 1;}



/*HEADER RESPONCIVE*/
#LogoMenuResponsive { background-image: url(../img/LogoMenuResponsiveWhite.svg);width: 2.5vw;height: calc(2.5vw*1.1);background-repeat: no-repeat;display: none;cursor: pointer;margin-top: 1.4vw;z-index: 14;right: 2.5%;position: fixed;}
#LogoMenuResponsive.close { display: none}

#LogoMenuResponsive2 {width: 2.5vw;height: calc(2.5vw*1.1);background-repeat: no-repeat;display: none;cursor: pointer;margin-top: 1.4vw;z-index: 31;right: 2.5%;position: fixed;transition: 1s;}
#LogoMenuResponsive2.open {transition: 1s;background-image: url(../img/CroixResponcive2.svg);}


#containerHeaderResponcive{ margin: auto; text-transform: uppercase; line-height: 8vw; width: 80%}
#headerResponcive { width:100%; height:100vh; background-color:white;position:fixed; z-index: 5;opacity: 1;  margin: auto; font-size: 6vw; color: white; display: flex; transition: 0.8s; margin-top: -100vh;}
#headerResponcive.ouvert { width:100%; height: 100vh; opacity: 1;display: flex;transition: 0.8s; margin-top: 0px; z-index: 21}
.ChoixMenuResponcive { color: #3d3d3d; display: flex;}

#logoInsta{background-image: url(../img/instaLogWhite.svg) ; width: 1.5vw; height: calc(1.5vw*1); background-repeat: no-repeat;display: flex; margin-left: 4vw; cursor: pointer;}
#logoLinkedin{background-image: url(../img/linkWhite.svg) ; width: 1.5vw; height: calc(1.5vw*1); background-repeat: no-repeat;display: flex;margin-left: 0.5vw;cursor: pointer;}

/*HEADER*/

#header {width: 95vw; margin: 0px;height: calc(95vw*0.05);display: flex;align-items: center;justify-content: space-between;/* position: fixed*/;z-index: 1}
#header.Ouvert { display: flex; transition: 0.2s; margin-top: 0px;z-index: 1}
#header.close { display:none}

.menu {font-size: 1.4vw;width:95vw }
#menus li {float: right; margin-left:4vw}
#menus li a {text-decoration: none;}
#logoTexte {font-size: 1.4vw;text-transform: uppercase;cursor: pointer;position: absolute;display: block;}
#menuPart2 { text-transform:uppercase; }
/*PARTIE IMAGE */


#ZoneAnim {width: 95vw; height: calc(95vw*0.5);  position: relative; margin:auto;  }
#ComTitre { font-size:7vw; width:80vw; text-transform:uppercase; padding-top:3vw ; padding-bottom: 9vw; text-align:center;color:white;opacity:1 ;margin-left: auto;margin-right: auto; margin-top: 6vw}

#logoArboAnim {background-image: url(../img/3logNew.svg);width: 22vw; height: calc(22vw*1.2);background-repeat: no-repeat;background-position: center; margin: auto;position: absolute; left: 36vw; top: 11vw}
#letterA {position: absolute; margin-left:20vw ; margin-top: 6vw;}
#letterR { position: absolute;margin-left:37vw; margin-top: 0vw;} 
#letterB { position: absolute;margin-left:59vw ;margin-top: 5vw;}
#letterR2 {position: absolute;margin-left: 27vw;margin-top: 20vw;}
#letterE {position: absolute; margin-left: 16vw;margin-top:30vw;}
#letterN {position: absolute; margin-left: 31vw;margin-top:36vw;}
#letterZ {position: absolute; margin-left:52vw;margin-top:36vw ; }
#letterI {position: absolute; margin-left:61vw; margin-top:20vw}
#letterA2 {position: absolute;margin-left:71vw; margin-top:22vw }

#letterO {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.08; position: absolute; margin-left:16vw ; margin-top: 5vw;}
#letterO1 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.08;  position: absolute;margin-left:32vw; margin-top: 0vw;} 
#letterO2 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.08;  position: absolute;margin-left:55vw ;margin-top: 3vw;}
#letterO3 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.08; position: absolute;margin-left: 23vw;margin-top: 19vw;}
#letterO4 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.08; position: absolute; margin-left: 10vw;margin-top:29vw;}
#letterO5 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.08; position: absolute; margin-left: 28vw;margin-top:34vw;}
#letterO6 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.08; position: absolute; margin-left:48vw;margin-top:33vw ; }
#letterO7 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.08; position: absolute; margin-left:54vw; margin-top:18vw}
#letterO8 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.08; position: absolute;margin-left:68vw; margin-top:21vw }



.floating-letter {font-size: 12.5vw;font-weight: bold;display: inline-block; transition: color 0.3s ease; /* Transition de couleur */color: white; }
.floating-letter:hover {color:white; /* Couleur au survol */}


#banHome { padding-bottom: 1.25vw}
#bigimg {width: 95vw ; height: calc(95vw*0.514); background-image: url(../img/arboBanHor.jpg); background-size: cover;background-position: center;margin: auto;background-position:center;}

#part2Home { width: 60vw; margin:auto; padding-top:15vh; padding-bottom:15vh}
#texteBienvenue { color:white; width:60vw; margin:auto;}
.colorTitre1 {color: #5ea3c4;}



.tt { font-size: 5vw}
.tt2 {margin-top: 6vh; font-size: 5vw}
.texteHome { margin-top:3vh;font-size: 1.4vw ; line-height: 2.2vw ;}

#part3Home { margin:auto; }

#ContainerPart3 { width:95vw; margin:auto;}
#container1 {margin-left: 0vw;  width:34vw ;opacity:1 ; }
#container2{ margin-right: 0vw;width:34vw ;opacity:1 ;  }
#cargoContainerS {width: 70vw; display:flex;margin:auto; padding-top:0vw; padding-bottom:8vw; justify-content:space-between; }


#letter10bis {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.03; position: absolute;left:30vw; top:55vw }
#letter10 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.03; position: absolute;left:51vw; top:51vw ;z-index: 10}
#letter11 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.03; position: absolute;left:42vw; top:65vw ;z-index: 10}
#letter12 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.03; position: absolute;left:38vw; top:81vw ;z-index: 10}
#letter13 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.02; position: absolute;left:49vw; top:92vw ;z-index: 10}
#letter14 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.02; position: absolute;left:34vw; top:98vw ;z-index: 10}
#letter15 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.02; position: absolute;left:41vw; top:118vw ;z-index: 10}
#letter16 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.01; position: absolute;left:28vw; top:112vw ;z-index: 10}
#letter17 {background-image: url(../img/cercleHome.svg) ; width: 17vw; height: calc(17vw*1); background-repeat: no-repeat; opacity: 0.01; position: absolute;left:54vw; top:124vw ;z-index: 10}








.titreRubrique{ }
.texte { font-size:1.4vw; line-height:2.2vw; font-weight:100;margin-top:1.5vw}
.listeService { margin-top:4vw; margin-bottom:6vw }
#part3Home li {font-size: 2.4vw; line-height: 3.3vw; font-weight: 100; color: white; font-weight: 600; text-transform: uppercase;}
#part3Home h1 { font-size:5vw; color:white }
#part3Home p { color:white; }
#cartoucheCrea {background-color: white;width: 20vw;font-size: 1.4vw;border-radius: 10vw;padding: 1.3vw;text-transform: uppercase; cursor: pointer; color: #3c4a70; text-align: center; margin: auto; z-index: 20; position: relative;transition:0.2s }
#cartoucheWeb { background-color: white;width: 20vw;font-size: 1.4vw;border-radius: 100vw;padding: 1.3vw;text-transform: uppercase; cursor: pointer; color: #3c4a70;text-align: center; margin: auto;z-index: 20; position: relative;transition:0.2s }



#cartoucheCrea:hover{ scale:1.08;transition: 0.8s; }
#cartoucheWeb:hover {scale:1.08; transition: 0.8s;}

#cartoucheCreaRes {display: none; opacity: 0; scale: 0; background-color: white;width: 20vw;font-size: 1.4vw;border-radius: 10vw;padding: 1.3vw;text-transform: uppercase; cursor: pointer; color: #344163; text-align: center; margin: auto; z-index: 20; position: relative;transition:0.2s }
#cartoucheWebRes {display: none;opacity: 0;  scale: 0; background-color: white;width: 20vw;font-size: 1.4vw;border-radius: 100vw;padding: 1.3vw;text-transform: uppercase; cursor: pointer; color: #344163;text-align: center; margin: auto;z-index: 20; position: relative;transition:0.2s }
 

/*TEXTE EXPICATIF*/

#contCartouche { width: 100%;height: 23vh;display: flex; }
#cartouche {width: 80%;margin: auto;padding: 2vw; }
#expli {margin-top: 0.8vw}
#italique { font-style: oblique; font-size: 1vw;margin-top: 0.7vw}


/*FOOTER*/
#footer {margin: auto; text-align: center; width: 95vw; height: calc(95vw*0.1) ;display: flex; text-transform: uppercase;color:whites;}

#containerFooter { margin:auto; }
#logoFooter {background-image: url(../img/3logNew.svg);width: 4vw; height: calc(4vw*1.2); margin: auto; background-repeat: no-repeat;background-position: center;}
#textFooter { display:flex; margin: auto; font-size: 1.2vw;font-weight: bold}
#yearDate{}
#copyright{margin-left: 0.1vw;margin-right: 0.1vw;}
footer p {font-weight: bold;}

/* Return on top */

#returnOnTop {
    background-color: white;
    background-image: url(../img/fleche.svg);
    bottom: 5%;
    cursor: pointer;
    display: none;
    filter: alpha(opacity = 100); /* IE < 8 */
    height: 2vw;
    opacity: 1;
    position: fixed;
    right: 2.5%;
    width: 2vw;
    transition: 0.2s;
    border-radius: 100%;

}

#returnOnTop:hover {
  scale: 1.2; transition: 0.2s;
    /*filter: alpha(opacity = 50); /* IE < 8 */
    /*opacity: 0.5;*/
}




/* SITE RESPENSIVE /////////////////////////////////////////////////////////////// */
/*//////////////////////////////////////////////////////////////////////////////// */
/*//////////////////////////////////////////////////////////////////////////////// */



@media screen and (max-width: 1024px)
{
    nav { display: block; width: 100%;}

      #LogoMenuResponsive { display:block; transition: 0.5s;}
       #main {/*padding-top: 9.5vw;*/}
      .menu {display: none;transition: 0.5s;color: white;}
      #header {height: calc(95vw*0.1);}
      #logoTexte {font-size: 2.5vw;}
      #LogoMenuResponsive {width: 3.5vw;height: calc(3.5vw*1.1);}
      p {font-size: 1.8vw;}
      #LogoMenuResponsive2.open {width: 3.5vw;height: calc(3.5vw*1.1);display: block; margin-top: 3.8vw}

      #logoFooter {width: 7vw;height: calc(7vw*1.2);}
      #footer {height: calc(95vw*0.19);}
      #texteCartouche {font-size: 2.3vw;}
      #support {font-size: 1.8vw;}
      #textFooter { font-size: 1.8vw;}
      #ZoneAnim {width: 95vw; height: calc(95vw*0.5);  position: relative; margin:auto; }

#ComTitre{ font-size:7vw; width:80vw; text-transform:uppercase; padding-top:2vw ; padding-bottom: 6vw; text-align:center;color:white;opacity:1 ;margin-left: auto;margin-right: auto; margin-top: 6vw}


      #bigimg {width: 95vw ; height: calc(95vw*1.13); background-image: url(../img/ArboBan.jpg); background-size: cover;background-position: center;margin: auto;background-position:center;}

      #logoInsta{display: none;}
      #logoLinkedin{display: none;}

#cargoContainerS {width: 70vw; display:flex;margin:auto; padding-top:0vw; padding-bottom:5vw; justify-content:space-between; }

 #returnOnTop {
    background-color: white;
    background-image: url(../img/fleche.svg);
    bottom: 5%;
    cursor: pointer;
 
    filter: alpha(opacity = 100); /* IE < 8 */
    height: 3vw;
    opacity: 1;
    position: fixed;
    right: 2.5%;
    width: 3vw;
    transition: 0.5s;

    border-radius: 100%;

}

    }


/* RESPENCIVe MOBIL //////////////////////// */

@media screen and (max-width: 500px)


{
      nav { display: block; width: 100%;}

      body { height:auto;}

      #header {height: calc(95vw*0.25);padding: 3vw}
      .menu {font-size: 3vw;}
      #logoTexte {font-size: 5.5vw;}
      #logoTexte {display: block; width: 40vw} 
      #LogoMenuResponsive {width: 6.5vw;height: calc(6.5vw*1.1);margin-right: 3vw}
      #LogoMenuResponsive2.open {width: 6.5vw;height: calc(6.5vw*1.1);display: block; margin-top: 9.4vw;margin-right: 3vw}
      p {font-size: 3vw;}
     #main {/*padding-top: 23vw;*/}
      h1 {font-size: 2.5vw}
      #italique {font-size: 2vw ; margin-top: 2vw}
      #contCartouche {height: 22vh;display: flex;}

      #ComTitre { font-size:9vw; width:80vw; text-transform:uppercase; padding-top:4vw ; padding-bottom: 7vw; text-align:center;color:white;opacity:1 ; margin-left: auto;margin-right: auto; margin-top: 0vw}
      #containerAnim { width:95vw; height:27vh ;display:flex;  }
      #ZoneAnim {width: 95vw; height: calc(95vw*0.65);  position: relative; margin:auto; }

      #part3Home li {font-size: 3.4vw; line-height: 4.3vw; font-weight: 100; color: white; font-weight: 600; text-transform: uppercase;}

      #logoArboAnim {width: 50vw; height: calc(50vw*1.2);position: absolute; left: 23vw; top: 0vw}
      #cargoContainerS {width: 80vw; display:flex;margin:auto; padding-top:0vw; padding-bottom:8vw; }
      .listeSite {display: none}
      #part3Home h1 { font-size:8vw; color:white ; display: none;}

      .floating-letter {display: none}
      #footer{ height: calc(95vw*0.24);}

      #cartoucheCrea {display: none;opacity: 1;transition: 0.8s;scale: 1.6; margin-top: 11vw}
      #cartoucheWeb{display: none;opacity: 1;transition: 0.8s;scale: 1.6; margin-top: 11vw}

      #cartoucheCreaRes { margin-bottom: 15vw; display: block; opacity: 1; transition: 1s;scale: 3; background-color: white;width: 20vw;font-size: 1.4vw;border-radius: 10vw;padding: 1.3vw;text-transform: uppercase; cursor: pointer; color: #344163; text-align: center;  z-index: 10; position: relative;transition:0.2s }
      #cartoucheWebRes {  margin-bottom: 11vw; display: block;opacity: 1; transition: 1s; scale: 3; background-color: white;width: 20vw;font-size: 1.4vw;border-radius: 100vw;padding: 1.3vw;text-transform: uppercase; cursor: pointer; color: #344163;text-align: center; z-index: 10; position: relative;transition:0.2s }
 


      #logoFooter {width: 10vw;height: calc(10vw*1.2);}
      #container1{  margin-left: 0vw;  width:40vw ;opacity:1 ; }
      #container2 {  margin-left: 0vw;  width:40vw ;opacity:1 ; }

      #containerHeaderResponcive {line-height: 20vw;padding-left: 20px;padding-top: 125px;margin: 0px ; width: 100%}
      #headerResponcive {font-size: 8vw}
      #bigimg {width: 95vw ; height: 75vh; background-image: url(../img/banMOB.jpg); background-size: cover;background-position: center;margin: auto;background-position:center;}
     
   
      
}