@font-face {
    font-family: "capsuularegular";
    src: url("polices/Capsuula-webfont.eot");
    src: url("polices/Capsuula-webfont.eot?#iefix") format("embedded-opentype"),  url("polices/Capsuula-webfont.woff2") format("woff2"),  url("polices/Capsuula-webfont.woff") format("woff"),  url("polices/Capsuula-webfont.ttf") format("truetype"),  url("polices/Capsuula-webfont.svg#capsuularegular") format("svg");
    font-weight: normal;
    font-style: normal;
}
html, body {
    margin: 0px;
    padding: 0px;
}
body {
    background-color: #3C3C3B;
    color: #FFFFFF;
    transition: background-color 1s ease;
}
.background_color {
    background-color: #F7F2E2;
    color: #3C3C3B;
}
header {
    padding-top: 5vh;
    width: 70vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
#contact {
    position: fixed;
    right: 10%;
    top : 5vh;
}
#contact ul {
    list-style-type: none;
    display: flex;
}
#contact li {
    font-family: 'capsuularegular';
    font-size: 1.5em;
    margin-right: 25px;
    text-transform: uppercase;
    color: #F7F2E2;
}
#contact a {
    text-decoration: none;
    color: #F7F2E2;
}
#contact a:hover {
    color: #D9A0AF;
}
.contact_color {
    color: #3C3C3B!important;
}
p {
    font-family: 'capsuularegular';
    font-size: 1.5em;
    letter-spacing: .10rem;
    text-align: center;
}
h2 {
    font-family: 'capsuularegular';
    text-transform: uppercase;
    border-top: 2px dotted #D9A0AF;
    border-bottom: 2px dotted #D9A0AF;
    padding-top: 5px;
    text-align: center;
}
#intro {

	height: 35vh;
	margin: auto;
	width: 70vw;
    padding-top: 250px;
    color: #D9A0AF;
}
#intro p {
    margin: 0px;
}
.down {
    text-align: center;
}
.hidden {
    visibility: hidden;
}
#conteneur {
    padding: 10vh;
    margin: auto;
    margin-bottom: 10vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#titrebienfaits {
    width: 70vw;
    margin: auto;
    margin-top: 10vh;
    margin-bottom: 5vh;
}
strong {
    text-transform: uppercase;
}
.bienfaits {
    margin: 20px;
    width: 250px;
}
.bienfaits p {
    margin-bottom: -10px;
    font-size: 1.2em;
}
.infos {
    margin: auto;
    margin-bottom: 20vh;
    max-width: 70vw;
}
#map {
    height: 100vh;
    margin: auto;
    max-width: 70vw;
}
#map div {
    padding-top: 50px;
}

/* Responsive */



@media all and (max-width: 750px) {
header {
    flex-direction: column;
    align-items: center;
}
#contact {
    position: static;
    text-align: center;
    margin-left: -40px;
}
#contact ul {
    flex-direction: column;
    align-items: center;
}
#contact li {
    margin-top: 20px;
    margin-right: 0px;
}
#contact a {
    background-color: #D9A0AF;
    padding: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 100px;
    border-radius: 5px;
}
#contact a:hover {
    color: #3C3C3B;
    background-color: #F7F2E2;
}
#logo {
    padding-left: 20px;
    padding-bottom: 10vh;
}
#intro {
    width: 90%;
    padding-top: 10vh;
}
#intro p {
    margin: 20px;
}
.down {
    display: none;
}
#conteneur {
    padding: 5vh;
    margin-bottom: 10vh;
}
#titrebienfaits {
    width: 90%;
}
.bienfaits {
    margin: 0px;
    margin-right: 20px;
}
.infos {
    max-width: 30vh;
}
#map h2 {
    max-width: 30vh;
    margin: auto;
}
#map iframe {
    width: 100%;
    height: 80%;
}

#map {
    margin-top: 5vh;
}
	
.viewer{
	visibility: hidden;
}
}

/* ANIMATION */

@media only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-pixel-ratio: 2) {
    .viewer {
        background-image: url('img/jardinhypnose_Pissenlit_white_hd.png')!important;
		background-size: 7060px 512px;
    }
	.dark_viewer {
    background-image: url(img/jardinhypnose_Pissenlit_black_hd.png)!important;
}
}



.viewer {
    position: fixed;
    bottom : 0px;
    height: 512px;
    margin-left: auto;
    margin-right: auto;
    max-width: 562px;
    width: 100%;
	z-index: -1;
    background-image: url(img/jardinhypnose_Pissenlit_white.png);
    background-repeat: no-repeat;
    background-position: 0 50%;
	transition: background 1 ease;
}
.dark_viewer {
    background-image: url(img/jardinhypnose_Pissenlit_black.png);
}
.viewer.frame1 {
    background-position: -543px 50%;
}
.viewer.frame2 {
    background-position: -1086px 50%;
}
.viewer.frame3 {
    background-position: -1629px 50%;
}
.viewer.frame4 {
    background-position: -2172px 50%;
}
.viewer.frame5 {
    background-position: -2715px 50%;
}
.viewer.frame6 {
    background-position: -3258px 50%;
}
.viewer.frame7 {
    background-position: -3801px 50%;
}
.viewer.frame8 {
    background-position: -4344px 50%;
}
.viewer.frame9 {
    background-position: -4887px 50%;
}
.viewer.frame10 {
    background-position: -5430px 50%;
}
.viewer.frame11 {
    background-position: -5973px 50%;
}
.viewer.frame12 {
    background-position: -6516px 50%;
}