/* 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, 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, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* Variables */

:root
{
  --bg-color:#f8eaaa;
  --txt-color:#00a66e;
  --big:clamp(2rem, 5vw, 8rem);
  --medium:clamp(0.9rem, 2.5vw, 3.1rem);
  --paragraph:clamp(0.9rem, 1.6vw, 3.1rem);
  --small:clamp(0.8rem, 1.2vw, 3rem);
  --smallcaps:clamp(0.6rem, 0.8vw, 1rem);
}

/* Typeface */

@font-face{
    font-family : "chevre";
    src :url('../fonts/chevre-export.otf');
    font-weight:200;
}

h1 {
  min-height: 0vw;
  font-size: var(--big);
  text-align: center;
  line-height: 0.8em;
  letter-spacing:-0.02em;
}
h2 {
  min-height: 0vw;
  font-size: var(--medium);
  text-align: center;
  line-height: 1em;
}
h3 {
  min-height: 0vw;
  font-size: var(--small);
  line-height: 1em;
}
p{
  min-height: 0vw;
  font-size:var(--paragraph);
  line-height: 1.1em;
}
.em-space{margin-left:0.5em;}
a,.active,.btn:hover{
  text-decoration: underline;
  text-decoration-color: var(--txt-color);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
  text-decoration-style: dotted;
}

/* Structure */

::-webkit-scrollbar {
    display: none;
}

body {
  background: var(--bg-color);
  position: absolute;
  margin: 0;
}

main {
  display: block;
  font-family:chevre;
  color: var(--txt-color);
}
#vertical-stripes{
  display: none;
  background: repeating-linear-gradient(90deg, var(--bg-color), var(--bg-color) 4%, var(--txt-color) 4%, var(--txt-color) 8%); 
  height: 100vh; 
  width: 100vw;
}
.intro{
  display:block;
  height: 100vh; 
  width: 100vw;
}
span{cursor:pointer;}

/* Animations */

.show{opacity:1 !important;}
.block{display: block !important;}
.hide{display: none !important;}

/* Texte */

.half{
  height: 100vh; 
  width: 48%;
  margin-left: 0%;
  float:left;
  overflow:scroll;
}
.half:first-child{
  width: 52%;
  padding:2.2vw 0% 30px 0%;
  margin-left: 0%;
  display:flex;
  flex-direction:column;
}
#content{
  position:relative;
  flex:1 0 auto;
}
#ferme, #fromage, #vente{
  display:none;
  overflow:hidden;
}
#ferme{
  padding-left:4vw;
  padding-right:4vw;
}
#title{
  margin-bottom:4vw;
  cursor:pointer;
}
#logo-goat{
  height:1em;
  width:1em;
  display:inline-block;
  background-image: url("../images/logo.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:bottom;
}
#title:hover #logo-goat{background-image: url("../images/logo-anim.gif");}
nav{
  z-index:10;
  padding-left:4vw;
  padding-right:4vw;
}
#home-btn{
  display:none;
  min-height: 0vw;
  font-size: var(--medium);
  text-align: center;
  margin-bottom:10px;
}

.panel{
  margin-top:4vw;
}

footer{
  flex-shrink:0;
  width:100%;
  margin-top:4vw;
  padding-left:4vw;
  padding-right:0vw;
}
.footer-half{
  width:50%;
  float:left;
  padding-right:4vw;
}
.third{
  width:33.33%;
  float:left;
  padding-right:4vw;
}

/* Fromage */

#fromage{
  padding-left:4vw;
  padding-right:2vw;
}

.fromage-img{
  display:inline-block;
  padding-right:2vw;
  padding-bottom:2vw;
  width:50%;
}

/* Vente */

.raw{
  width: 100%;
  border-top: calc(28px + 1.2vw) solid;
  padding-left:4vw;
}
.raw-title{
  display:inline-block;
  width:33.33%;
  float:left;
  padding-top: 8px;
  padding-bottom: 8px;
}
.raw-text{
  display:inline-block;
  width:66.66% ;
  padding-right:4vw;
  padding-top: 8px;
  padding-bottom: 8px;
}
.raw-text:only-child{margin-left:33.33%;}
.raw-map{
  height:25vw !important;
  width:100%;
  margin-top:0px;
}
.map{
  display:inline-block;
  position:absolute;
  right:4vw;
  transform: translateY(-8px);
  border: solid 2px ;
  padding: 2px 6px 0px 6px;
  font-size: var(--smallcaps);
  text-transform: uppercase;
  border-radius:6px;
  transition: 0.1s;
}
.map:hover{
  color:var(--bg-color);
  border-color:var(--txt-color);
  background-color:var(--txt-color);
  cursor:pointer;
}
.folded-map{
  height:0vw;
  overflow: hidden;
  transition: 0.2s;
}
div.in + div {
  height:25vw !important;
  width:100%;
  margin-top:10px !important;
}

/* Images */

img{width:100%;}
figcaption{padding:14px 0vw 14px 4vw;}

/* Media Query */

@media screen and (max-width: 960px) {

  :root
  {
    --big:clamp(2.8rem, 4vw, 6rem);
    --medium:clamp(1.04rem, 3vw, 4rem);
    --paragraph:clamp(1.04rem, 3vw, 4rem);
    --list:clamp(0.8rem, 3vw, 4rem);
    --small:clamp(0.6rem, 1.2vw, 2rem);
    --smallcaps:clamp(0.46rem, 0.6vw, 0.8rem);
  }
  .intro{
    display:block;
    position:relative;
    height: auto; 
  }
  .half{
    height: auto; 
    width: 100%;
    margin-left: 0%;
    float:none;
    overflow:none;
  }
  .half:first-child{
    width:100%;
    min-height: 80vh;
    padding:0vw 0% 0px 0%;
  }
  .nav-mobile{
    width:100%;
    position:fixed;
    top: 10px !important;
  }
  #title{margin-top:2vw;}
  .panel{margin-top:8vw;}
  .raw{border-top: calc(24px + 1.2vw) solid;}
  .raw-title{
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .raw-title h3{font-size: var(--list)}
  .raw-text{
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .raw-text h3{font-size: var(--list)}
  .raw-map{height:50vw !important;}
  .map{
    position:relative;
    margin-left:4em;
    transform: translateY(0px);
    border: solid 1px ;
    padding: 1px 4px 0px 4px;
    border-radius:6px;
    transition: 0.1s;
  }
  div.in + div {
    height:50vw !important;
    width:100%;
    margin-top:10px !important;
  }
  footer{
    margin-top:8vw;
    padding-left:4vw;
    margin-bottom:4vw;
  }
  figcaption{padding:2px 0vw 6px 4vw;}
}