/*
Theme Name: Cathy Voyance
Author: IWAST
Description: Site vitrine - Cathy Voyance
Version: 1.0
*/
.clearfix:before,
.clearfix:after {content:'.'; display:block; height:0; overflow: hidden;}
.clearfix:after {clear:both;}
.clearfix {zoom: 1;} /* IE < 8 */

img {max-width:100%; height:auto;}
.container {width:96%; max-width:1180px; margin:0 auto;}
body {font-size:1em; line-height:1.3em; font-weight:400; text-align:left; -webkit-font-smoothing:antialiased;}

/* --- HEADER ---*/
header {min-height:168px; background-image:url(images/header.jpg); background-repeat:no-repeat; background-position:center top; background-size:cover;}
header .container {position:relative;}
header .container > img:first-child {display:block; float:left;}
/* --- Menu ---*/
header nav ul {list-style-type:none; padding:0; margin:0;}
header nav ul li{display:block; float:left;}
header nav ul li a {display:block; text-decoration:none; padding:6px 10px; -webkit-transition:all ease 0.6s; transition:all ease 0.6s; font-size:1.7em;}

/* --- CONTENT ---*/
#content {min-height:350px; padding:30px 0; background-repeat:no-repeat; background-position:center top; background-size:cover;}
#supersized-loader {display:none;}
#supersized {display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%;}
#supersized img {width:auto; height:auto; position:relative; display:none; outline:none; border:none;}
#supersized.speed img {-ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges;}	/*Speed*/
#supersized.quality img {-ms-interpolation-mode:bicubic; image-rendering: optimizeQuality;}			/*Quality*/
#supersized li {display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:transparent;}
#supersized a {width:100%; height:100%; display:block;}
#supersized li.prevslide {z-index:-20;}
#supersized li.activeslide {z-index:-10;}
#supersized li.prevslide img, #supersized li.activeslide img{display:inline;}

/* --- FOOTER ---*/
footer {min-height:120px; background-image:url(images/footer.jpg); background-repeat:no-repeat; background-position:center top; background-size:cover; color:#f9d67e; font-size:1.4em; line-height:1.2em;}
footer ul {list-style-type:none; text-align:center; margin:0; padding:0;}
footer ul li {display:inline-block; margin:8px 1.5% 10px; padding:0; white-space:nowrap;}
footer a.signature {display:block; width:125px; height:25px; background-image:url('images/signature.png'); margin:15px auto 0;}

@media screen and (min-width :1150px) {
    header .container:after {content:'.'; display:block; width:172px; height:245px; position:absolute; top:0; right:0; background:url(images/sceau.png) no-repeat center top;}
}

/* --- INTEGRATION ---*/
a {touch-action:manipulation; text-decoration:none; -webkit-transition:color 0.6s; transition:color 0.6s; color:#120c4b;}
a:focus {outline:0;}
a:hover {color:#1e020c;}
p {margin:0 0 12px 0; padding:0; font-size:1.2em;}
strong {font-weight:700;}
em {font-style:italic;}
h1 {font-family:'Mr Dafoe', cursive; font-weight:400; font-size:1.75em; line-height:1.2em; color:#120c4b; margin:0 0 15px; padding:0;}
h2 {font-weight:700; font-size:1.65em; line-height:1.2em; margin:0 0 15px; padding:0;}
h2:nth-of-type(2) {clear:left;}

.tiers {float:left; width:32%; margin-right:2%;}
.tiers:nth-child(3n) {margin-right:0;}
.illustration {float:left; width:45.6%; margin-right:1.4%; margin-bottom:8px;}

#content ul {list-style-type:none; margin:0 0 25px; padding:0; font-size:1.2em;}
#content ul li {margin:6px 0; text-indent:15px;}
.services {clear:left; float:left; width:50%;}
.encart {float:left; width:30%; padding:25px 4%; margin:0 4% 25px; background:rgba(255,255,255,.5); border:1px solid #120c4b; color:#120c4b;}
.citation {text-align:center; font-size:1.4em; line-height:1.2em; margin:25px 0;}
.citation q {font-weight:700; font-style:italic;}

figure {margin:0 0 20px; position:relative; overflow:hidden;}
figure img {display:block; position:relative; -webkit-transition:transform 0.4s; transition:transform 0.4s;}
figcaption {position:absolute; top:0; left:0; padding:5%; background:#120c4b; height:60px; width:90%; top:auto;
bottom:0; opacity:0; -webkit-transform:translateY(100%); transform:translateY(100%); -webkit-transition:transform 0.4s, opacity 0.1s 0.3s; transition:transform 0.4s, opacity 0.1s 0.3s;}
figcaption h2 {text-align:center; color:#f9d67e; font-family:'Mr Dafoe', cursive; font-weight:400; font-size:1.85em; margin:0; padding:0;}
figcaption h2:hover {color:#d49d3a;}
figure:hover img,
figure.cs-hover img {
    -webkit-transform:translateY(-50px);
	transform:translateY(-50px);
}
figure:hover figcaption,
figure.cs-hover figcaption {
	opacity:1;
	-webkit-transform:translateY(0px); transform:translateY(0px);
	-webkit-transition:transform 0.4s, opacity 0.1s; transition:transform 0.4s, opacity 0.1s;
}

.situations {text-align:center; text-transform:uppercase; font-weight:700;}

/* --- Contact --- */
.wpcf7 * {-webkit-box-sizing:border-box; box-sizing:border-box;}
.wpcf7 p {display:block; float:left; width:32%; margin:10px 2% 18px 0;}
.wpcf7 p:nth-of-type(3n) {margin-right:0;}
.wpcf7 p:nth-last-of-type(2) {width:100%; margin-right:0;}
.wpcf7 p:nth-last-of-type(1) {width:100%; text-align:center; margin-right:0;}
.wpcf7 input, .wpcf7 textarea {display:block; width:100%; padding:10px 15px; margin-top:8px;}
.wpcf7 textarea {resize:none; height:180px;}
.wpcf7 input[type="submit"] {cursor:pointer; padding:10px 15px; margin:15px auto; display:block; width:auto; -webkit-transition:all ease 0.5s; transition:all ease 0.5s;}
.wpcf7-response-output {display:inline-block !important; width:80% !important; text-align:center !important; margin:0 10% 10px !important;}
/* --- Map --*/
.map {position:relative; padding-bottom:430px; height:0; overflow:hidden;}
.map iframe {position:absolute; top:0; left:0; width:100%; height:400px;}

/* COULEURS + FONTS */
body {font-family:'Alegreya', serif; background:#120c4b; color:#1e020c;}
header nav ul li a {font-family:'Mr Dafoe', cursive; color:#f9d67e;}
header nav ul li a:hover, header nav ul li a:focus, header nav ul li.current-menu-item a {color:#d49d3a;}

.wpcf7 input, .wpcf7 textarea {background:#f9d67e; color:#1e020c; border:1px solid #1e020c;}
.wpcf7 input:focus, .wpcf7 textarea:focus {border-color:#120c4b;}
.wpcf7 input[type="submit"] {background:#120c4b; color:#f9d67e; border:1px solid #120c4b;}
.wpcf7 input[type="submit"]:hover, .wpcf7 input[type="submit"]:focus {background:#f9d67e; color:#120c4b;}

@media screen and (max-width :1024px) {
    header nav {clear:left; margin-bottom:10px;}
}
@media screen and (max-width :991px) {
    header nav ul li a {font-size:1.5em;}
}

@media screen and (max-width :767px) {
    header {background-image:url(images/header-min.jpg);}
    footer {background-image:url(images/footer-min.jpg); padding-bottom:15px;}
    .accueil {background:url(images/accueil-min.jpg) no-repeat fixed top; background-size:cover;}
    .presentation {background:url(images/presentation-min.jpg) no-repeat fixed top; background-size:cover;}
    .voyance {background:url(images/voyance-min.jpg) no-repeat fixed top; background-size:cover;}
    .magnetisme {background:url(images/magnetisme-min.jpg) no-repeat fixed top; background-size:cover;}
    .protection {background:url(images/protection-min.jpg) no-repeat fixed top; background-size:cover;}
    .tarifs {background:url(images/tarifs-min.jpg) no-repeat fixed top; background-size:cover;}
    .contact {background:url(images/contact-min.jpg) no-repeat fixed top; background-size:cover;}
    
   header #navigation > #menu {position:fixed; z-index:9999; top:50px; left:0; right:0; max-height:20em; overflow:visible; -webkit-transform:translateZ(0); transform:translateZ(0); -webkit-transition:max-height .4s, overflow .4s; transition:max-height .4s, overflow .4s; will-change:max-height, overflow; margin:0;}
	header #navigation > #menu > li {display:block; padding:0; margin:0; text-align:center; float:none; width:100%; height:auto;}
	header #navigation > #menu > li > a {display:block; padding:.8rem; background-color:#120c4b; color:#f9d67e; border-bottom:1px solid #120c4b; top:0; font-size:1.5em; font-family:'Alegreya', serif;}
	header #navigation > #menu li:hover > a,
    header #navigation > #menu li:focus > a,
    header #navigation > #menu > li.current-menu-item > a {color:#120c4b; background-color:#f9d67e;}
    header #navigation > #menu > li > a:after,
    header #navigation > #menu > li.current-menu-item > a:after
    {content:''; position:absolute; bottom:0; left:0; width:100%; height:0; background:none;}
	header #navigation.is-closed #menu {max-height:0; overflow:hidden;}
    nav > button {background-image:linear-gradient(to right, #d49d3a, #d49d3a); color:#d49d3a; background-color:transparent;
position:fixed; z-index:99999; top:.6rem; right:.6rem; height:2rem; width:2rem;
background-position:center; background-repeat:no-repeat; background-size:100% 28%; padding:0; outline:0; border:0; cursor:pointer; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);  -webkit-transition:.25s; transition:.25s; will-change:transform, background-image;
    }
    nav > button::before,
    nav > button::after {content:""; background:#d49d3a;
      position:absolute; left:0; right:0; display:block; height:28%; -webkit-transition:.25s; transition:.25s;
    }
    nav > button::before {top:0;}
    nav > button::after {bottom:0;}
    nav > button::-moz-focus-inner {border:0;}
    nav:not(.is-closed) > button {background-image:none;}
    nav:not(.is-closed) > button::before {-webkit-transform:rotate(45deg) translate(.15rem, .9rem) translateZ(0); transform:rotate(45deg) translate(.15rem, .9rem) translateZ(0);
    }
    nav:not(.is-closed) > button::after {-webkit-transform:rotate(-45deg) translate(.15rem, -.9rem) translateZ(0); transform:rotate(-45deg) translate(.15rem, -.9rem) translateZ(0);
    }
    
    .wpcf7 p {float:none; width:100%; margin:10px auto;}
    .map {padding-bottom:280px;}
    .map iframe {height:250px;}
    .tiers, .tiers:nth-child(3n), .illustration  {float:none; width:auto; margin:12px auto;}
    .tiers img, .illustration img {display:block; margin:0 auto;}
    .services {float:none; width:80%; margin:0 10%;}
    .encart {float:none; width:72%; padding:25px 4%; margin:0 auto 25px;}
    figure {max-width:540px; margin:0 auto;}
}

@media screen and (max-width :559px) {
    header .container > img:first-child {float:none; margin:0 auto; max-width:30%;}
    header .container > img:nth-child(2) {display:block; margin:0 auto 10px; max-width:50%;}
}