@charset "UTF-8";
/*!
Theme Name: jifanphotographie
Theme URI: jifan.fr
Author: amestu
Author URI: jifan.fr
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: jifanphotographie
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

jifanphotographie is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Settings

# Tools
	- Typography
	- Elements
	- Links
	- Forms
#Base
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Settings
--------------------------------------------------------------*/
:root {
  /* colors */
  --warning: red;
  --yellow: yellow;
  --dark: #020202;
  --white:#ffffff;
  --grey:	#686868;
  --ui-dark-green: #5D8482;
  --ui-grey: #FBF8F8;
  --ui-light-green: #C3DEC2;
  --ui-light-green-opacity: rgb(195, 222, 194, 0.85);
  --ui-ultra-light-green: #f1f7f1;
  /* Tailles de police */
  --font-size-base: 16px;
  --font-size-large: 24px;
  /* Espacements */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 32px;
  /*font family*/
}

html {
  --scroll-behavior: smooth;
  scroll-behavior: smooth;
}

.quicksand-mainfont {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

* {
  box-sizing: content-box;
}

.hidden-md-up {
  display: none;
}

/* base*/
body {
  width: 100%;
  margin: 0;
  font-family: "Quicksand", sans-serif, "Roboto", "open sans";
}

.hidden-md-up {
  display: none;
}

h2 {
  font-size: 2rem;
}

h2 .sub-title {
  font-weight: lighter;
}

h3 {
  text-align: center;
  padding: 2rem;
  background: var(--ui-ultra-light-green);
}

button {
  background-color: var(--white);
  cursor: pointer;
}

.btn-groupe {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-groupe a {
  padding: 3px;
}

/* # Tools */
.quote {
  color: var(--ui-light-green);
  font-weight: bolder;
  font-size: 60px;
  font-family: "Ephesis", cursive;
}

a {
  color: var(--dark);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: var(--ui-dark-green);
}

.btn {
  border-radius: 50rem;
  padding: 1rem 2rem;
  cursor: pointer;
}

.btn-s {
  padding: 0.8rem 1rem;
}

.btn--light {
  border: 1px solid var(--white);
  color: var(--white);
}

.btn--light:hover {
  border: 1px solid var(--ui-light-green);
  background-color: var(--ui-light-green);
  color: var(--dark);
  /*transition */
  transition: background-color 1000ms linear;
}

.div#n2-ss-2 .n2-style-0607f5ee3b8afb1835bba7dc24c9600c-heading:hover {
  transition: background-color 1000ms linear;
}

.btn--dark {
  border: 1px solid var(--ui-dark-green);
  color: var(--ui-dark-green);
}

.btn--dark:hover {
  border: 1px solid var(--ui-light-green);
  background-color: var(--ui-light-green);
  color: var(--dark);
  transition: background-color 1000ms linear;
}

li {
  list-style: none;
}

.image-container {
  position: relative;
  width: 100%;
  padding-top: 100%; /*for 16:9*/
  display: block;
  overflow: hidden;
}

.image-container-16-9 {
  padding-top: 56.25%; /*for 16:9*/
}

.image-container-header {
  padding-top: 30.25%;
}

.image-container--portrait {
  padding-top: 150%;
}

.image-container--4-5 {
  padding-top: 125%;
}

.image-container--circle {
  border-radius: 50%;
}

.image-container--rounded {
  border-radius: 1.5rem;
}

.image-container--top-radius {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.image-container--bottom-radius {
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* layout */
.margin-section {
  width: 80%;
  margin: 0 auto;
}

.padding-section {
  padding: 4rem 0;
}

.full-section {
  width: 100%;
}

.display-flex {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.display-flex p {
  width: 48%;
}

.two-colomn-layout {
  display: flex;
  width: 100%;
}

.two-colomn-layout .one-block {
  width: 50%;
}

.display-flex-column {
  display: flex;
  flex-direction: column;
}

.block-image {
  width: 100%;
}

.block-image.block-image--plural {
  display: flex;
  justify-content: space-between;
}

.block-image-vmiddle {
  width: 90%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.block-text {
  width: 100%;
}

.block-display-right {
  display: flex;
  justify-content: end;
}

.block-display-left {
  display: flex;
  justify-content: start;
}

.block-display-right.block-text {
  width: 100%;
}

.block-cta {
  width: 100%;
  margin: 4rem auto;
}

.block-cta--center {
  text-align: center;
}

.full-section .block-image {
  width: 80%;
  margin: 2rem auto;
  flex-direction: row;
  justify-content: space-between;
}

.one-three-blocks {
  width: 32%;
}

/*Components
	- Navigation*/
.h1-hidden {
  display: none;
}

.nav-bar {
  width: 100%;
  display: flex;
}

.site-branding, .main-navigation {
  width: 50%;
}

.logo {
  width: 40px;
  margin-top: 0.7rem;
  margin-left: 1rem;
  vertical-align: middle;
}

.menu-menu-1-container {
  padding-right: 1rem;
}

.menu-menu-1-container ul {
  display: flex;
  margin: 0 auto;
  justify-content: end;
  padding: 0;
}

.menu-menu-1-container ul li {
  width: 33.33%;
  text-align: center;
  padding: 1rem;
  cursor: pointer;
}

.menu-menu-1-container ul li a:hover {
  color: var(--dark);
}

.menu-menu-1-container ul li:hover {
  background-color: var(--ui-light-green);
  transition: background-color 1000ms linear;
}

/* homepage */
.hero-image {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-slider .swiper-slide-active:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(247, 247, 247, 0.1) 0%, rgba(143, 143, 143, 0.24) 50%, rgba(0, 0, 0, 0.65) 100%);
}

/*
filter
.hero-image-container:after {
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(to bottom, rgba(252,176,69,0.2) 0%,rgba(2,0,36,0.65) 100%);
}*/
.section-bio {
  background-color: var(--ui-ultra-light-green);
}

.section-family-shooting h2,
.section-comment h2 {
  text-align: center;
}

.section-pregnant-shooting {
  position: relative;
}

.section-pregnant-shooting .margin-section {
  padding: 0;
}

.section-pregnant-shooting .image-container:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(160deg, rgba(247, 247, 247, 0.14) 0%, rgba(143, 143, 143, 0.5) 50%, rgba(0, 0, 0, 0.64) 100%);
}

.section-pregnant-shooting .block-overlay {
  width: 50%;
  position: absolute;
  top: 10%;
  right: 10%;
  color: var(--ui-grey);
}

.section-pro-shooting {
  position: relative;
}

.section-pro-shooting .block-overlay {
  width: 45%;
  position: absolute;
  top: 5%;
  right: 10%;
  background-color: rgba(255, 255, 255, 0.9);
}

.section-pro-shooting .block-overlay .block-text {
  padding: 1rem 2rem;
}

.section-comment .block-image .image-wrapper {
  width: 60%;
  margin: 0 auto;
}

.section-comment .block-text {
  width: 90%;
  margin: 2rem auto;
}

.section-comment .block-text p.comment-name {
  text-align: right;
}

.section-comment .one-three-blocks {
  padding: 2rem 0;
  border: solid 1px var(--ui-light-green);
}

.comment {
  font-style: italic;
}

.section-contact {
  text-align: center;
}

.section-contact p {
  width: 80%;
  margin: 3rem auto;
  font-size: 28px;
  text-align: left;
}

/* page gallery */
.gallery-section {
  width: 80%;
  margin: 3rem auto;
}

.page-gallery .block-text {
  margin-top: 2rem;
}

.gallery-section .intro {
  margin-bottom: 2rem;
}

.gallery-section .intro p {
  font-size: 1.2rem;
}

.gallery-contact {
  text-align: center;
  background-color: var(--ui-ultra-light-green);
  padding: 1rem 2rem;
  margin: 2rem auto;
}

.gallery-contact p {
  font-size: 24px;
  font-weight: 600;
}

.presentation-section {
  width: 80%;
  margin: 4rem auto;
}

.section-infos ul li {
  list-style-type: disc;
}

/* page contact */
.page-contact .section-hero .image-container:after,
.page-gallery .section-hero .image-container:after,
.gallery-model .section-hero .image-container:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(247, 247, 247, 0.14) 0%, rgba(143, 143, 143, 0.5) 50%, rgba(0, 0, 0, 0.64) 100%);
}

.page-contact .section-hero,
.page-gallery .section-hero,
.gallery-model .section-hero {
  position: relative;
}

.page-contact .section-hero .section-title,
.page-gallery .section-hero .section-title,
.gallery-model .section-hero .section-title {
  position: absolute;
  top: 10%;
  width: 100%;
  text-align: center;
  color: var(--white);
}

.gallery-model .section-hero .section-title {
  top: 35%;
}

.page-contact .contact-form .section-title {
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ui-dark-green);
}

.page-contact .wpcf7-form-control-wrap {
  width: 100%;
}

.page-contact p {
  color: var(--ui-dark-green);
}

.page-contact .wpcf7-form-control-wrap input,
.page-contact .wpcf7-form-control-wrap textarea,
.page-contact .wpcf7-submit {
  margin-top: 5px;
  border-radius: 50rem;
  border: solid 1px var(--ui-ultra-light-green);
  background-color: var(--ui-ultra-light-green);
  height: 2rem;
  width: 100%;
}

.page-contact .wpcf7-form-control-wrap input {
  padding-left: 10px;
}

.page-contact .wpcf7-form-control-wrap textarea {
  padding: 10px;
}

.page-contact .wpcf7-form-control-wrap textarea {
  height: auto;
  border-radius: 2rem;
}

.page-contact .wpcf7-submit {
  width: 30%;
  color: var(--ui-dark-green);
}

.page-contact .wpcf7-submit:hover {
  background-color: var(--ui-dark-green);
  color: var(--white);
}

/*footer*/
.site-footer {
  padding: 2rem 0 1rem 0;
  background-color: var(--ui-light-green);
  color: var(--white);
  text-align: center;
}

.link-wrapper {
  width: 80%;
  margin: 2rem auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.site-footer a {
  color: var(--dark);
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--ui-dark-green);
}

.footer-logo img {
  width: 100px;
  height: auto;
}

.social-icon {
  font-size: 2rem;
}

.copyright {
  color: var(--dark);
  background-color: var(--ui-light-green);
  padding: 1rem 0;
}

.copyright p {
  margin: 0;
}

.menu-toggle {
  display: none;
}

/* Responsive */
@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }
  .main-navigation ul {
    display: flex;
  }
}
@media only screen and (min-width: 1920px) {
  /* For desktop: */
  body {
    max-width: 1920px;
    margin: 0 auto;
  }
}
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  .section-pregnant-shooting .block-overlay {
    width: 80%;
    top: 5px;
  }
  .section-pro-shooting .block-overlay {
    width: 80%;
    position: initial;
  }
  .section-pro-shooting .block-overlay .block-text {
    padding: 0;
  }
  .section-comment {
    background-color: var(--ui-ultra-light-green);
  }
  .section-comment.margin-section {
    width: 100%;
  }
  .section-comment h2 {
    text-align: center;
  }
  .section-comment .one-three-blocks {
    border: none;
    padding: 0;
  }
  .section-comment .block-image.block-image--plural {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .site-footer {
    margin-top: 3rem;
  }
}
@media only screen and (max-width: 768px) {
  .hidden-md-up {
    display: block;
  }
  .hidden-sm-down {
    display: none;
  }
  .two-colomn-layout,
  .block-image.block-image--plural {
    flex-direction: column;
  }
  .two-colomn-layout--reverse-mobile,
  .display-flex-column--reverse-mobile {
    flex-direction: column-reverse;
  }
  .two-colomn-layout .one-block,
  .one-three-blocks {
    width: 100%;
  }
  .margin-section {
    width: 90%;
  }
  .padding-section {
    padding: 2rem 0;
  }
  .block-image-vmiddle {
    width: 100%;
  }
  h2 {
    font-size: 1.8rem;
    text-align: left;
    line-height: 1;
  }
  .gallery-model h2 {
    text-align: center;
  }
  .gallery-model .section-comment h2 {
    padding: 2rem 0;
  }
  .gallery-model h3 {
    text-align: left;
    padding: 0;
  }
  .sub-title {
    font-size: 1.5rem;
  }
  .quote {
    display: none;
  }
  .block-cta {
    margin: 3rem auto;
  }
  .block-cta--center {
    text-align: left;
  }
  .btn {
    padding: 0.8rem 1.5rem;
  }
  .btn--light {
    border: 1px solid var(--ui-dark-green);
    color: var(--ui-dark-green);
  }
  /*mobile menu*/
  .menu-menu-1-container ul {
    flex-direction: column;
    margin: 0.8rem auto;
  }
  .menu-menu-1-container ul li {
    width: 100%;
    padding: 5px 0;
  }
  /* menu burger */
  .menu-mobile {
    /* Pour que le menu reste en place quand on scroll */
    position: fixed;
    /* Pour que le menu ne soit pas sur le texte et que ce dernier puisse être sélectionné */
    width: 0px;
    z-index: 2;
    right: 0;
    top: 8px;
  }
  #hamburger {
    /* Pour que la checkbox ne s'affiche pas */
    display: none;
  }
  #hamburger-logo {
    /* Pour que le curseur soit un pointeur */
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    width: 180px;
    display: block;
    color: var(--ui-green);
    /* Pour que le menu hamburger s'affiche toujours */
    text-align: left;
    /* Pour que le menu hamburger soit "rangé" par défaut */
    transform: translateX(-40px);
    padding: 6px;
    border-radius: 5px;
    z-index: 99;
  }
  /*
  * Just a quick hamburger
  */
  #hamburger-logo span {
    display: block;
    width: 25px;
    height: 2px;
    margin-bottom: 5px;
    position: relative;
    background: var(--ui-light-green);
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }
  #hamburger-logo span:first-child {
    transform-origin: 0% 0%;
  }
  #hamburger-logo span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
  /* 
  * Transform all the slices of hamburger
  * into a crossmark.
  */
  #hamburger:checked ~ #hamburger-logo span {
    /*#hamburger-logo input:checked ~ span {*/
    opacity: 1;
    transform: rotate(45deg) translate(-8px, -6px);
    background: var(--ui-light-green);
  }
  /*
  * But let's hide the middle one.
  */
  #hamburger:checked ~ #hamburger-logo span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  /*
  * Ohyeah and the last one should go the other direction
  */
  #hamburger:checked ~ #hamburger-logo span:nth-last-child(2) {
    opacity: 1;
    transform: rotate(-45deg) translate(-8px, 7px);
  }
  #menu-mobile nav {
    margin-top: 3px;
    display: flex;
    flex-direction: column;
    background: var(--ui-light-green-opacity);
    color: #020202;
    overflow: hidden;
    width: 180px;
    /* Pour que les liens soient "rangés" par défaut */
    /*transform: translateX(-200px);*/
    transform: translateX(0);
  }
  #hamburger-logo,
  #menu-mobile nav {
    /* Pour qu'il y ait une animation */
    transition: 0.7s;
  }
  /* Lorsque #hamburger est coché, le #hamburger-logo et le nav qui sont dans le même parent changent de propriété */
  /*#hamburger:checked ~ #hamburger-logo,*/
  #hamburger:checked ~ nav {
    /* Changement de la position pour afficher les menus */
    transform: translate(-180px);
  }
  #menu-mobile nav a {
    text-decoration: none;
    padding: 5px;
  }
  #menu-mobile nav a:hover {
    background: var(--ui-pink);
    color: var(--ui-green);
  }
  /*fin mobile menu*/
  .section-family-shooting h2, .section-comment h2 {
    text-align: left;
  }
  .section-pregnant-shooting .block-overlay {
    width: 90%;
    margin: 0 auto;
    position: initial;
    color: var(--dark);
  }
  .section-pro-shooting {
    padding-bottom: 2rem;
  }
  .section-pro-shooting .block-overlay {
    width: 90%;
    position: initial;
    margin: 0 auto;
  }
  .section-pro-shooting .block-overlay .block-text {
    padding: 0;
  }
  .section-comment .block-text {
    width: 90%;
    margin: 0 auto;
  }
  .section-comment {
    background-color: var(--ui-ultra-light-green);
  }
  .section-comment.margin-section {
    width: 100%;
  }
  .section-comment h2 {
    text-align: center;
  }
  .section-comment .one-three-blocks {
    border: none;
    padding: 0;
  }
  .section-comment .one-three-blocks .block-text {
    margin: 2rem auto;
  }
  .section-contact p {
    width: 90%;
    margin: 1rem auto;
    font-size: 1.2rem;
    text-align: left;
  }
  .page-gallery h2,
  .page-contact h2 {
    text-align: center;
  }
  .gallery-section {
    width: 90%;
    margin: 2rem auto;
  }
  .page-gallery .btn-groupe {
    justify-content: flex-start;
  }
  .gallery-contact p {
    font-size: 18px;
  }
  .page-contact .display-flex p {
    width: 100%;
  }
  .wpcf7-form .display-flex {
    flex-direction: column;
  }
  .page-contact .wpcf7-form-control-wrap input {
    width: 95%;
  }
  .page-contact .wpcf7-form-control-wrap textarea {
    width: 93%;
  }
  /* footer */
  .site-footer {
    padding: 2rem 0 0 0;
  }
  .link-wrapper {
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-inline-start: 0;
  }
  .copyright {
    padding: 0.2rem 0;
  }
}/*# sourceMappingURL=style.css.map */