@font-face{
  font-family:'opensans';
  src:url("fonts/opensans-regular.woff2?#iefix") format("woff2"), url("fonts/opensans-regular.woff") format("woff"), url("fonts/opensans-regular.ttf") format("truetype");
  font-weight:normal;
  font-style:normal
  }

@font-face{
  font-family:'merriweather';
  src:url("fonts/merriweather-bold.woff2?#iefix") format("woff2"), url("fonts/merriweather-bold.woff") format("woff"), url("fonts/merriweather-bold.ttf") format("truetype");
  font-weight:bold;
  font-style:normal
}

@font-face{
  font-family:'calendas';
  src:url("fonts/calendas.woff2?#iefix") format("woff2"), url("fonts/calendas.woff") format("woff");
  font-weight:normal;
  font-style:normal
}

.schnapsum{
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:row;
  -ms-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center
}

.schnapsum [type=radio]{display:none}

.schnapsum label~label{margin-left:1rem}

.quotes{-webkit-order:-1;-ms-flex-order:-1;order:-1;overflow:hidden;white-space:nowrap}

.quotes>*{width:100%;display:inline-block;vertical-align:top;white-space:normal}

.quote{
  margin:0 0 2rem;
  font-family:calendas, arial, sans-serif;
  font-size:2.1rem;
  color:#fff;
  transition:0.25s -webkit-transform cubic-bezier(0.02, 0.62, 0.06, 1.3);
  transition:0.25s transform cubic-bezier(0.02, 0.62, 0.06, 1.3);
  transition:0.25s transform cubic-bezier(0.02, 0.62, 0.06, 1.3), 0.25s -webkit-transform cubic-bezier(0.02, 0.62, 0.06, 1.3)
}

[id=tab1]:checked~.quotes>*{
  -webkit-transform:translateX(0);
  -ms-transform:translateX(0);
  transform:translateX(0)
}

[id=tab2]:checked~.quotes>*{
  -webkit-transform:translateX(-100%);
  -ms-transform:translateX(-100%);
  transform:translateX(-100%)
}

[id^=tab]:checked+label{opacity:0.5;pointer-events:none}

pre{margin:0;-moz-tab-size:2;tab-size:2;font-size:1.8rem;white-space:pre-wrap}

@media (min-width:769px){
  .quote{position:relative;padding-left:2.6em;min-height:2em}
  .quote:before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia, serif;font-size:5em;height:.4em;line-height:.9;color:rgba(0, 0, 0, 0.3)}
}

@-webkit-keyframes border{
  38%{-webkit-transform:rotate(3deg) scale(1.05, 1.1);transform:rotate(3deg) scale(1.05, 1.1)}
  50%{-webkit-transform:rotate(-5deg) scale(1.05, 1.1);transform:rotate(-5deg) scale(1.05, 1.1)}
  62%{-webkit-transform:rotate(3deg) scale(1.05, 1.1);transform:rotate(3deg) scale(1.05, 1.1)}
}

@keyframes border{
  38%{-webkit-transform:rotate(3deg) scale(1.05, 1.1);transform:rotate(3deg) scale(1.05, 1.1)}
  50%{-webkit-transform:rotate(-5deg) scale(1.05, 1.1);transform:rotate(-5deg) scale(1.05, 1.1)}
  62%{-webkit-transform:rotate(3deg) scale(1.05, 1.1);transform:rotate(3deg) scale(1.05, 1.1)}
}

.button{
  display:-webkit-inline-flex;
  display:-ms-inline-flexbox;
  display:inline-flex;
  position:relative;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  margin-bottom:1rem;
  padding:.4em 1.4em;
  background:#BF463B;
  background:#ffffff;
  font-family:inherit;
  font-size:inherit;
  cursor:pointer;
  text-decoration:none;
  color:#fff}

.button:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0}

.button:active,.button:hover{color:#fff}
.button:active:before,.button:hover:before{border:1px solid #fff;opacity:.5;-webkit-animation:border .25s;animation:border .25s}
.button--alternate{margin:0 0.5rem;background:#98382f}
.button--download{background:#618b5f}

html{box-sizing:border-box}
*{box-sizing:inherit}
html{font-size:62.5%;font-size:calc(1em * 0.625)}
body{
  margin:0;
  padding:0;
  font-size:1.6rem;
  font-family:opensans, arial, sans-serif;
  color:#333;
##  background-color:#e3e3c1;
  background-color:#ffffff;
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-feature-settings:"swsh", "liga", "dlig";
  font-feature-settings:"swsh", "liga", "dlig";
  -webkit-font-smoothing:antialiased}

a{color:inherit}

h1{
  margin-top:0;
  margin-bottom:2rem;
  text-align:center;
  font-size:calc(1.4em + 4.5vw);
  font-family:calendas, arial, sans-serif;
  font-weight:normal;
  color:#333;line-height:1.3
}

h2{
  margin-top:0;
  font-family:calendas, arial, sans-serif
}

.template h2{text-shadow:0 1px 0 #fff}

img{max-width:100%;height:auto}

@media (min-width:545px){
  .fl{float:left;margin-right:1rem}
  .fr{float:right;margin-left:1rem}
}

footer,header,section{padding:2rem 5%}

@media (min-width:769px){footer,header,section{padding:3rem 10%;background:#618b5f)}}
@media (min-width:1025px){footer,header,section{padding:3rem 16%}}

.inner{margin:4rem 0 0;text-align:center}

.visually-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}

input.visually-hidden{bottom:0}

##.schnapsum{background-color:#618b5f}
.schnapsum{background-color:#ffffff}

[type=button]{border:0;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-bottom:0;margin-left:1rem;position:relative;top:1px}

##.template{background-color:#f5da8e}
.template{background-color:#ffffff}

footer{padding-bottom:4rem;position:relative;background-color:#BF463B;color:#fff}
footer:after{content:"";display:block;position:absolute;left:0;right:0;bottom:2rem;border-bottom:1px dashed rgba(255, 255, 255, 0.25)}

##.pre-title{display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 3rem;font-size:1.8rem;font-family:calendas, arial, sans-serif;color:#618b5f;opacity:.7}
.pre-title{display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 3rem;font-size:1.8rem;font-family:calendas, arial, sans-serif;color:#618b5f;opacity:.9}
.pre-title:after,.pre-title:before{display:block;content:"";-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;border-bottom:1px dotted CurrentColor}
.pre-title:before{margin-right:.3em}
.pre-title:after{margin-left:.3em}

@media (min-width:769px){
  header{background:#618b5f, url(outils.png), url(noisy-texture.png);background-repeat:no-repeat, no-repeat, repeat;background-position:4% 120%, 98% 80%, center}
}

.box{padding:1rem 1.5rem;margin-bottom:1rem;background:rgba(255, 255, 255, 0.3)}

.hagrid{margin-bottom:2rem;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}

@media (min-width:769px){
  .hagrid{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}
}

.hagrid>*{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.hagrid>:nth-child(2){-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
.hagrid .hero{-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;padding:.5rem;margin:1rem}
.hagrid [type=checkbox]{margin-right:.5rem;min-width:1em}
.hagrid label{margin-top:0}
.mygrid{position:relative;margin-bottom:2rem;padding:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-0.75rem;margin-right:-0.75rem}
.mygrid>*{box-sizing:border-box;margin-left:0.75rem;margin-right:0.75rem;width:100%;min-width:0}

@media (min-width:545px){.mygrid>*{width:calc(100% / 2 - 1.5rem)}}
@media (min-width:769px){.mygrid>*{width:calc(100% / 4 - 1.5rem)}}

.mygrid img{margin-bottom:1rem}

.hero{border:0;padding:.5rem;background:rgba(255, 255, 255, 0.3)}

.template-item{position:relative;display:block;padding:2rem 1.5rem;margin-bottom:1.5rem;background:rgba(255, 255, 255, 0.3);text-align:center;text-decoration:none;transition:.15s;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}

.template-item:active{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}
.template-item:focus{outline:0}
.template-item:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;border:3px solid rgba(255, 255, 255, 0);opacity:.5;transition:.2s}

input:checked + .template-item::before{top:-6px;left:-6px;bottom:-6px;right:-6px;border-color:#fff}

.template-item span{display:block;font-size:.8em}

.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}

.icon-download{width:14rem;height:14rem;fill:#BF463B}

[id=result]{width:100%;font-size:1.5rem;color:#333}
[id=mockup-place]{font-size:1.4rem}
[id=mockup-place] .edit{cursor:pointer;position:relative}
[id=mockup-place] .picked{background-color:#EA3852}
[id=mockup-place] .choice label{margin:0.4em 0.4em;padding:0.4em;background-color:white}
[id=mockup-place] .choice label:hover{background-color:#EA3852;color:white}
[id=mockup-place] .reg{color:white}
[id=mockup-place] .reg:hover{color:#EA3852}
[id=mockup-place] header{background:#618b5f}
[id=mockup-place] footer{color:#333;background:#ddd}
[id=mockup-place] footer:after{content:none}
[id=mockup-place] ul{background:#bbb}
[id=mockup-place] [class*=grid]>*,[id=mockup-place] li{background:#ccc}
[id=mockup-place] main{background:#eee}
[id=mockup-place] aside{background:#aaa}
.choices{display:none;font-size:0.85em;padding:10px;background:rgba(155, 155, 155, 0.9);position:absolute;z-index:2;min-width:200px}
.choices .suppression{display:block;margin-top:10px;cursor:pointer;color:white}
.choices .quit{font-family:'icomoon';cursor:pointer;float:right;margin:0 0.4em}
.choices span{color:white;display:block;margin:10px 0}
.choices label{margin:0.4em 0.4em;padding:0.4em;background-color:white;color:#3a3a3a;display:inline-block}
.choices label.selected{background-color:#EA3852;color:white}