/*
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;}


a:hover { color: #b1b1b1;transition: 0.2s}
a { text-decoration: none ; color: #3d3d3d; 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}

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

p {font-size: 1.4vw;
    color: #3d3d3d;
 
    font-weight: 100; }

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

#main{padding-top: 4.75vw} /* header fixed */


/*WRAPER*/
#wraper {width: 95vw;margin: auto;}


/*HEADER RESPONCIVE*/
#LogoMenuResponsive { transition: 1s;background-image: url(../img/LogoMenuResponsive.svg); width: 3vw; height: calc(3vw*1.1); background-repeat: no-repeat; display: none; cursor: pointer; margin-top: 3vw; z-index: 4; right: 2%; position: absolute;}
#LogoMenuResponsive.white {transition: 1s;background-image: url(../img/LogoMenuResponsiveWhite.svg);display: block;position: fixed;}

#containerHeaderResponcive{ margin: auto; text-transform: uppercase; line-height: 8vw; width: 80%}
#headerResponcive { width:100%; height:100vh; background-color:#3d3d3d;position:fixed; z-index: 3;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;}
.ChoixMenuResponcive { color: white; display: flex;}

/*HEADER*/

#header {width: 95vw; margin: 0px;height: calc(95vw*0.05);background-color: white;display: flex;align-items: center;justify-content: space-between; position: fixed;z-index: 10}

.menu {font-size: 1.4vw;width:95vw }
#menus li {float: right; margin-left: 3vw}
#menus li a {text-decoration: none;}
#logoTexte {font-size: 1.4vw;text-transform: uppercase;position: absolute;display: block;}

/*Texte déscriptif projet*/
#containerInfoProject {width: 95vw;display: block;padding: 2vw; margin-bottom: 2vw; margin-top: 2vw}
#bigTitre { font-size: 4.93vw }
#contInfo0 {}
#contInfo1et2 {display: flex;}
#info0 {width: 51.833vw; margin-right: 1.25vw;padding: 2vw; line-height: 4.7vw}
#info1 {width: 55.833vw; margin-right: 1.25vw;padding: 2vw ;line-height: 2.2vw; text-align: justify;}
#info2 { width:30.833vw; padding: 2vw; line-height: 2.2vw }
.listeService { font-size: 1.4vw; font-weight: 100}
 .br {display: none;}
 .bold{font-weight: bold ;}

/*PARTIE IMAGE*/

#menuPart3 {background-image: url(../img/Croix.svg);width: 1.6vw;height: calc(1.6vw*1.1);background-repeat: no-repeat;display: block;cursor: pointer;margin-top: 0.09vw}

#expli {margin-top: 10px}
#titreRubrique { margin-right:30px  }
#banHome {   margin-bottom:1.25vw;}
#bigimg {width: 95vw ; height:calc(95vw*0.514); background-image: url(../img/Projet_10_Final_Alban_Monnier-4.jpg); background-size: cover;background-position: center;margin: auto;}
#banHome2 { height: calc(95vw*0.15);  width: 100%;  margin-bottom:1.25vw;}
#bigimg2 {width: 95vw ; height: calc(95vw*0.15); background-image: url(../img/domaineVent.jpg); background-size: cover;background-position: center;margin: auto;background-position:center;}
.box {width: 100%;display: flex; margin: auto;}

.colonne1 { width:30.833vw; margin-right:1.25vw  }
#C1image1 { width:30.833vw; height: calc(30.833vw*1.6); background-image: url(../img/v3.jpg); background-size:cover;background-position:center;   display:flex; }

.colonne2 {width:30.833vw; margin-right:1.25vw }
#C2image1 { width:30.833vw; height: calc(30.833vw*1.6); background-image: url(../img/v2.jpg); background-size:cover;background-position:center;   display:flex; }

.colonne3 {width:30.833vw; margin-right:1.25vw }
#C3image1 { width:30.833vw; height: calc(30.833vw*1.6); background-image: url(../img/v1.jpg); background-size:cover;background-position:center;   display:flex;  }

/*TEXTE EXPICATIF*/

#contCartouche { width: 95vw;height: calc(95vw*0.12);display: flex; }
#cartouche { width:80%; margin:auto; }
#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 ; text-transform: uppercase;color:#3d3d3d; /*margin-top: -3vw*/}
#containerFooter { margin:auto; }
#logoFooter {background-image: url(../img/3log.svg);width: 3vw; height: calc(3vw*1.2); margin: auto; background-repeat: no-repeat;background-position: center;}
#textFooter { display:flex;font-size: 1.2vw;font-weight: bold}
#yearDate{}
#copyright{margin-left: 0.1vw;margin-right: 0.1vw;}
footer p {font-weight: bold; font-size: 0.86vw}
footer a {font-size: 0.86vw}

#containerNewFooter{width: 95vw; display: flex;text-align: left;margin-top: 6vw; margin-bottom: 2vw}
#foot1 {width: 30.833vw; margin-right: 1.25vw; font-size: 1.4vw; display: flex; align-items: flex-end; }
#foot2 {width: 30.833vw; margin-right: 1.25vw; font-size:0.86vw ; text-align: center; margin: auto;display: flex;}
#foot3  {width: 30.833vw; font-size: 1.4vw; display: flex;justify-content: flex-end;align-items: flex-end; }
#instaLinks { cursor:pointer; }


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



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


      #header {height: calc(95vw*0.1);}
      #main {padding-top: 9.5vw;}
      .menu {font-size: 2.5vw;}
      #logoTexte {font-size: 2.5vw;}
      #LogoMenuResponsive {width: 3.5vw;height: calc(3.5vw*1.1);margin-top: 3.8vw;}
       /*aa copier*/
      p {font-size: 2.26vw;}
       footer p {font-weight: bold; font-size: 1.4vw}
       footer a {font-size: 1.4vw}
      #logoFooter {width: 5vw;height: calc(5vw*1.2);}
      #textFooter { font-size: 1.8vw;}
      #bigTitre { font-size: 5.93vw }
      #containerInfoProject {display: block;}
      #info0 { line-height: 5.7vw; width: 60vw}
       #info1 {line-height: 3.1vw;width: 84.833vw;}
      #info2 { width:33.833vw; padding: 2vw; line-height: 3.1vw }
      .listeService { font-size: 2.26vw; font-weight: 100;line-height: 2.68vw;}
      #brArchi { display:none; }
       #contInfo1et2 {display: block;}
       /*a copier*/


      h1 {font-size: 2.5vw}
      #italique {font-size: 2vw ; margin-top: 2vw}
      #contCartouche { width: 95vw;height: calc(95vw*0.2);display: flex; }


   
                              #menuPart3 {background-image: url(../img/Croix.svg);width: 2.5vw;height: calc(2.5vw*1.1);background-repeat: no-repeat;display: block;cursor: pointer;margin-top: 0.3vw}


      


    }


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

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


{
      nav { display: block; width: 100%;}
       #header {height: calc(95vw*0.25);padding: 3vw}
      #logoTexte {font-size: 5.5vw;}
      #LogoMenuResponsive {width: 6.5vw;height: calc(6.5vw*1.1);margin-top: 9.8vw;}
       /*a copier */
      #containerInfoProject {display: block;}
      #info0 {width: 81.833vw; line-height: 9.7vw}
     #info1 {line-height: 5.68vw;width: 84.833vw;}
      #info2 { width:63.833vw; padding: 2vw; line-height: 5.68vw }
      .listeService { font-size: 4.1vw; font-weight: 100;line-height: 5.68vw;}
      #bigTitre { font-size: 9.59vw }
         footer p {font-weight: bold; font-size: 2.26vw}
       footer a {font-size: 2.26vw}
      #logoFooter {width: 10vw;height: calc(10vw*1.2);} 
      /*a copier */
      #main {padding-top: 23vw;}
      #expli {margin-top: 1.8vw;}

      .menu {font-size: 5.5vw;}
        h1 {font-size: 5.5vw}
        p {font-size: 4.1vw;}
        #italique {font-size: 3vw ; margin-top: 3vw}
    #logoTexte {display: block; width: 50vw}
        #contCartouche { width: 95vw;height: calc(95vw*0.35);display: flex; padding: 3vw}
            #cartouche { width: 92vw;padding-right: 13vw}

                  .box {width: 100%;display: contents;}
      
      .colonne1 {width: 95vw;margin-right: 1.25vw;}
      .colonne2 {width: 95vw;margin-right: 1.25vw;}
      .colonne3 {width: 95vw;margin-right: 1.25vw;}

      #C1image1 {width: 95vw;height: calc(95vw*1.7);display: flex;margin-bottom: 2.25vw}
   
      #C2image1 {width: 95vw;height: calc(95vw*1.7);display: flex;margin-bottom: 2.25vw}
   

      #C3image1 {width: 95vw;height: calc(95vw*1.7);display: flex;}
        #menuPart3 {background-image: url(../img/Croix.svg);width: 5vw;height: calc(5vw*1.1);background-repeat: no-repeat;display: block;cursor: pointer;margin-top: 0.8vw}
              #bigimg {width: 95vw ; height:calc(95vw*1.2); background-image: url(../img/vinNatel.jpg); background-size: cover;background-position: center;margin: auto;}

   }
  




      
}