/*
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: #5d5d5d;}
a { text-decoration: none ; color: #555555; 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: #555555;opacity: 0}

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

p {font-size: 1.2vw;
    color: #555;
 
    font-weight: 100; }

h1 {font-size: 1.4vw;
    text-transform: uppercase;
    font-weight: bold; color: #555 }
h2 {font-size: 20px;color: #555;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:#555555;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;}



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


/* 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;}
      p {font-size: 2.1vw;line-height: 2.8vw;}

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


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

                              #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;}
      p {font-size: 4.1vw;line-height: 5.8vw;}
      #main {padding-top: 23vw;}
      #expli {margin-top: 1.8vw;}

      .menu {font-size: 5.5vw;}
        h1 {font-size: 5.5vw}
        p {font-size: 4.1vw;line-height: 4.8vw;}
        #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*3);display: flex;margin-bottom: 2.25vw}
   
      #C2image1 {width: 95vw;height: calc(95vw*3);display: flex;margin-bottom: 2.25vw}
   

      #C3image1 {width: 95vw;height: calc(95vw*3);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}
   }
  




      
}