@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
}




.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: .6em 1.4em;
    background: #BF463B;
    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: #FFF;
    background-color: #111;
    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;
    text-decoration:none;
}

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: #FFF;
    line-height: 1.3;
    font-family: opensans, arial, sans-serif
}

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-image: url(noisy-texture.png)
    }
}

@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
}

.schnapsum {
    background-color: #618b5f
}

[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: rgba(255,255,255,0.025);
}

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: opensans, arial, sans-serif
    color: #618b5f;
    opacity: .7
}

.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-image: url(marteau.png), 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 {
    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
}

.template-item:focus:before, .template-item:hover:before {
    top: -6px;
    left: -6px;
    bottom: -6px;
    right: -6px;
    border-color: #fff
}

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

[id=download] a {
    display: inline-block;
    padding: 2rem 4rem
}

.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: #ddd
}

[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
}


.item {

text-align:center;

padding:1em;
}

.item .titre{padding:0.5em; background-color: rgba(255,255,255,0.05);min-height:4em;}
.item img{margin:0;
height:150px;
      filter:none;
    -webkit-filter: none;
    }
    
    .item img:hover{margin:0;
		
 
     filter: brightness(.5) sepia(1) saturate(0) hue-rotate(0deg);
    -webkit-filter:  brightness(.8) grayscale(1) saturate(4) hue-rotate(190deg);
    
    
    }
  
  .template{
margin-top:5em;}

#contact{
padding-top:15em;}