/*
Theme Name: IFSI+
Theme URI: https://github.com/thibdt/
Author: Thibault de Tourdonnet
Author URI: https://github.com/thibdt/
Description: IFSI+ Theme
Requires at least: WordPress 5.0
Version: 1.0
*/
* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  font-family: "Roboto", cursive;
  color: #34485e;
}

h1 {
  font-size: 2.75em;
}

h2 {
  font-size: 2.25em;
}

h3 {
  font-size: 2em;
}

p {
  font-size: 1.5em;
  margin: 0;
}

nav {
  height: 56px;
  background-color: #fff;
  border-bottom: 2px solid #34485e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8%;
  font-weight: bold;
  font-size: 1.5em;
  position: sticky;
  top: 0;
  z-index: 999;
}
nav .nav-brand a {
  display: block;
  width: 40px;
  height: 40px;
}
nav .nav-brand a img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
nav .menu {
  padding: 0;
  margin: 0;
  list-style: none;
}
nav .menu li {
  padding: 2%;
}
nav .menu li a {
  color: #34485e;
  text-decoration: none;
}
nav .collapse {
  max-height: 0;
  overflow: hidden;
  width: 100%;
  transition: max-height 500ms ease-out;
  background-color: #fafafb;
  border-bottom: 2px solid #34485e;
  position: absolute;
  top: 54px;
  left: 0;
}
nav .collapse.shown {
  max-height: 500px;
  transition: max-height 500ms ease-in;
}
@media screen and (min-width: 1224px) {
  nav .collapse {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    max-height: unset;
    flex: 0 1 auto;
    position: relative;
    top: unset;
    background-color: unset;
    border: unset;
  }
  nav .collapse .menu {
    display: flex;
    padding: 0;
  }
  nav .collapse .menu li {
    padding: 0.25rem 0.75rem;
    border: unset !important;
  }
}
nav .collapse-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 1rem;
  cursor: pointer;
  height: 41px;
  width: 41px;
}
nav .collapse-btn .burger {
  display: block;
  position: relative;
  height: 2px;
  background-color: #34485e;
  width: 25px;
  transition: height 100ms;
}
nav .collapse-btn .burger::before {
  content: "";
  display: block;
  position: relative;
  border-bottom: 2px solid #34485e;
  width: 25px;
  left: 0.5rem;
  bottom: 0.5rem;
}
nav .collapse-btn .burger::after {
  content: "";
  display: block;
  position: relative;
  border-bottom: 2px solid #34485e;
  width: 25px;
  left: 0.5rem;
  top: 0.5rem;
}
nav .collapse-btn.inactive .burger::before {
  animation: reversed-burger-before 500ms;
}
nav .collapse-btn.inactive .burger::after {
  animation: reversed-burger-after 500ms;
}
nav .collapse-btn.active .burger {
  height: 0;
}
nav .collapse-btn.active .burger::before {
  bottom: unset;
  top: calc(50% + 1px);
  left: 0;
  transform: rotate(45deg);
  animation: burger-before 500ms;
}
nav .collapse-btn.active .burger::after {
  top: calc(50% - 1px);
  left: 0;
  transform: rotate(-45deg);
  animation: burger-after 500ms;
}
@media screen and (min-width: 1224px) {
  nav .collapse-btn {
    display: none;
  }
}

header {
  background-color: #ebc35e;
  border-bottom: 2px solid #34485e;
  padding: 30px 0;
}
header h1 {
  margin: 0 auto;
  text-align: center;
}
@media screen and (min-width: 600px) {
  header h1 {
    max-width: 60vw;
  }
}

footer {
  background-color: #34485e;
  padding: 2%;
  text-align: center;
  margin-top: 4rem;
}
footer #menu-footer {
  display: block;
  padding: 0;
  margin: 0;
}

main .wp-block-media-text h2 {
  text-transform: uppercase;
}
main .wp-block-media-text figure.wp-block-media-text__media {
  position: relative;
  width: 75vw;
  height: 75vw;
  max-width: 500px;
  max-height: 500px;
  margin: auto;
}
main .wp-block-media-text figure.wp-block-media-text__media::before {
  content: "";
  width: 75vw;
  height: 75vw;
  max-width: 500px;
  max-height: 500px;
  display: block;
  background-color: #34485e;
  clip-path: url(#imgShape);
}
@media screen and (min-width: 600px) {
  main .wp-block-media-text figure.wp-block-media-text__media::before {
    width: 24vw;
    height: 24vw;
  }
}
main .wp-block-media-text figure.wp-block-media-text__media img {
  width: calc(75vw - 30px);
  height: calc(75vw - 30px);
  max-width: 485px;
  max-height: 485px;
  position: absolute;
  top: 15px;
  left: 15px;
  clip-path: url(#imgShape);
}
@media screen and (min-width: 600px) {
  main .wp-block-media-text figure.wp-block-media-text__media img {
    width: calc(24vw - 30px);
    height: calc(24vw - 30px);
  }
}
@media screen and (min-width: 600px) {
  main .wp-block-media-text figure.wp-block-media-text__media {
    width: 24vw;
    height: 24vw;
    margin-right: 8%;
  }
}
main .cta {
  border-bottom: 1px solid #34485e;
  background-color: #ebc35e;
  margin: 4% 0;
}
main .cta h3 {
  background-color: #34485e;
  color: #fff;
  padding: 0.5em 0;
  border-top: 2px solid #34485e;
  border-bottom: 2px solid #34485e;
}
main .cta .our-content {
  padding: 0 2%;
}
main .cta .our-content .wp-block-column {
  background-color: #edf1f5;
  padding: 0 2%;
  color: #34485e;
  border: 1px solid #34485e;
}
main .cta .our-content .wp-block-column p {
  font-weight: bold;
  margin: 1rem 0;
}
main section.products {
  padding: 0 2%;
  margin-bottom: 2em;
}
main section.products h2 {
  margin: 3rem 0;
  text-align: center;
  color: #34485e;
  font-size: 3rem;
}
main section.products .products-container {
  display: flex;
  overflow: hidden;
}
main section.products .products-container .product {
  flex: 0 0 80%;
  transition: margin-left 500ms;
  margin: 0 2.5%;
}
main section.products .products-container .product .product-header {
  border-radius: 30px 30px 0 0;
}
main section.products .products-container .product .product-footer a {
  border-radius: 0 0 30px 30px;
}
main section.products .products-container .product:first-of-type {
  margin-left: 10%;
}
main section.products .products-container .product:first-of-type .product-header {
  background-color: #34485e;
}
main section.products .products-container .product:first-of-type .product-body {
  background-color: #dae2ea;
}
main section.products .products-container .product:first-of-type .product-footer a {
  background-color: #34485e;
}
main section.products .products-container .product:nth-of-type(2) .product-header {
  background-color: #e86c6c;
}
main section.products .products-container .product:nth-of-type(2) .product-body {
  background-color: #f9dada;
}
main section.products .products-container .product:nth-of-type(2) .product-footer a {
  background-color: #e86c6c;
}
main section.products .products-container .product:nth-of-type(3) .product-header {
  background-color: #ebc35e;
}
main section.products .products-container .product:nth-of-type(3) .product-body {
  background-color: #f9edcf;
}
main section.products .products-container .product:nth-of-type(3) .product-footer a {
  background-color: #ebc35e;
}
@media screen and (min-width: 1224px) {
  main section.products .products-container .product {
    flex: 0 0 32%;
    width: 32%;
    margin: 0;
  }
  main section.products .products-container .product:first-of-type {
    margin: 0;
  }
}
@media screen and (min-width: 1224px) {
  main section.products .products-container {
    justify-content: space-between;
    align-items: stretch;
  }
}
@media screen and (min-width: 1224px) {
  main section.products {
    padding: 0 8%;
  }
}

.product {
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  box-sizing: border-box;
}
.product .product-header {
  color: #fff;
  flex: 0 0 auto;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #34485e;
}
.product .product-header h3 {
  font-size: 1.75rem;
  margin: 1.5rem 0 0.75rem 0;
}
.product .product-header span {
  display: block;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}
.product .product-header span.sub {
  font-size: 1.5rem;
}
.product .product-header .fas {
  position: absolute;
  font-size: 3.5rem;
  color: #fff8;
}
.product .product-header .fas:first-of-type {
  top: 50%;
  left: 10%;
  transform: rotate(15deg);
}
.product .product-header .fas:nth-of-type(2) {
  top: 35%;
  right: 15%;
  transform: rotate(165deg) scaleY(-1);
}
.product .product-body {
  flex: 1 0 auto;
  color: #34485e;
  padding: 1rem 1.5rem;
  background-color: #edf1f5;
  font-size: 1.25em;
}
.product .product-body h4 {
  font-weight: normal;
  margin-top: 0;
}
.product .product-body ul {
  list-style: disc;
  text-align: left;
  padding-left: 1.5rem;
}
.product .product-body ul li:last-of-type {
  line-height: 2rem;
}
.product .product-body ul li:not(:last-of-type) {
  margin-bottom: 1rem;
}
.product .product-footer {
  flex: 0 0 auto;
}
.product .product-footer a {
  background-color: #34485e;
  padding: 1.5rem 0.75rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  display: block;
  font-size: 1.5rem;
  text-align: center;
}

.testimonials {
  margin: 2% 0;
  padding: 0 3%;
}
.testimonials blockquote {
  padding: 1em;
  background-color: #edf1f5;
  border: 1px solid #34485e;
  border-radius: 15px 15px 0 15px;
}
.testimonials blockquote p {
  margin: 0 0 0.25em 0;
  font-style: italic;
}
.testimonials blockquote cite {
  display: block;
  text-align: right;
}

#login {
  background-color: #ebc35e;
}
#login h2 {
  text-align: center;
}

#paiement-dadhesion h1 {
  padding: 0 2%;
}
#paiement-dadhesion h3 {
  margin: 0 !important;
}
#paiement-dadhesion hr {
  display: none;
}
#paiement-dadhesion #pmpro_form {
  text-align: center;
}
#paiement-dadhesion #pmpro_form > div {
  padding: 2%;
}
#paiement-dadhesion #pmpro_form > div:nth-of-type(2n + 1) {
  background-color: #34485e;
  color: #fff;
  padding: 2%;
}
#paiement-dadhesion #pmpro_form label {
  margin-left: 4%;
}
#paiement-dadhesion #pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#paiement-dadhesion #pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields .pmpro_payment-account-number {
  flex: 0 0 100%;
}
#paiement-dadhesion #pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields .pmpro_payment-expiration {
  flex: 1 0 60%;
}
#paiement-dadhesion #pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields .pmpro_payment-expiration select {
  width: 44.2%;
}
#paiement-dadhesion #pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields .pmpro_payment-expiration select#ExpirationYear {
  margin-left: 5px;
}
#paiement-dadhesion #pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields .pmpro_payment-cvv {
  flex: 0 0 100%;
  text-align: left;
}
#paiement-dadhesion #pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields .pmpro_payment-cvv input {
  margin-left: 4.7%;
  max-width: 44.2%;
}

#compte-dadherent h1 {
  text-align: center;
  margin: 2rem 0;
}

#pmpro_account {
  padding: 3rem;
}

#essai-gratuit main {
  padding: 3rem;
  text-align: justify;
}
#essai-gratuit main h1 {
  text-align: center;
}
#essai-gratuit main form {
  max-width: 800px;
  margin: 1.5rem auto;
  background-color: #34485e;
  color: #fff;
  border-radius: 7px;
}
#essai-gratuit main form:not(.trial-form) {
  padding: 1rem;
}
#essai-gratuit main form input[type=text] {
  max-width: 400px;
  width: 85%;
}
#essai-gratuit main form input[type=submit] {
  display: block;
  margin: 0 auto;
}
#essai-gratuit main form label {
  margin-top: 2rem;
  display: block;
  text-align: left;
  font-weight: bold;
  font-size: 1.25rem;
}
#essai-gratuit main form.trial-form {
  max-width: unset;
  background-color: unset;
}
#essai-gratuit main form.trial-form label {
  font-weight: initial;
}
#essai-gratuit main form.trial-form label strong {
  display: block;
  color: #e86c6c;
}
#essai-gratuit main form.trial-form .marker {
  font-weight: bold;
  font-size: 2rem;
  vertical-align: middle;
  margin-left: 1rem;
}
#essai-gratuit main form.trial-form .marker.correct {
  color: #60c20f;
}
#essai-gratuit main form.trial-form .marker.mistake {
  color: #c20f0f;
}
#essai-gratuit main form.trial-form .question {
  border-bottom: 2px solid #34485e;
  margin-bottom: 1rem;
  padding: 2rem 0;
  color: #34485e;
}
#essai-gratuit main form.trial-form .question strong {
  display: block;
}
#essai-gratuit main form.trial-form .question .explanation {
  display: none;
  text-align: left;
  background-color: #ebc35e;
  padding: 1rem;
  border: 2px solid #34485e;
}
#essai-gratuit main form.trial-form .question .explanation p:first-of-type {
  font-weight: bold;
  margin-bottom: 1rem;
}
#essai-gratuit main form.trial-form .question .explanation p:last-of-type {
  font-weight: bold;
}
#essai-gratuit main .timer {
  display: none;
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ebc35e;
  font-weight: bold;
  padding: 1rem 2rem;
  border: 2px solid #34485e;
  border-top: 0;
  border-radius: 0 0 7px 7px;
}
#essai-gratuit main .score {
  font-size: 1.75rem;
  color: #e86c6c;
  font-weight: bold;
}

.pmpro_lost_password_wrap,
.pmpro_login_wrap {
  max-width: 600px;
  margin: 0 auto;
  background-color: #34485e;
  color: #fff;
  padding: 30px;
  border-radius: 7px;
  margin: 0 2%;
}
.pmpro_lost_password_wrap a,
.pmpro_login_wrap a {
  color: #fff;
}
.pmpro_lost_password_wrap #loginform input[type=text],
.pmpro_lost_password_wrap #loginform input[type=password],
.pmpro_login_wrap #loginform input[type=text],
.pmpro_login_wrap #loginform input[type=password] {
  max-width: 100%;
}
.pmpro_lost_password_wrap input[type=text],
.pmpro_lost_password_wrap input[type=password],
.pmpro_login_wrap input[type=text],
.pmpro_login_wrap input[type=password] {
  max-width: 100%;
}
@media screen and (min-width: 1224px) {
  .pmpro_lost_password_wrap,
.pmpro_login_wrap {
    margin: 0 auto;
  }
}

.pmpro_lost_password-instructions {
  font-size: 1em;
}

.pmpro_message a {
  color: #e86c6c;
}

.pmpro_member_profile_edit_wrap,
.pmpro_change_password_wrap {
  padding: 1rem;
}

input[type=text],
input[type=password],
input[type=email],
select {
  padding: 0.66rem 0.75rem;
  border: 1px solid #dedee4;
  border-radius: 7px;
  width: 100%;
  margin: 0.5rem 0;
  color: #34485e;
  box-sizing: border-box;
  background-color: #fff;
}
input[type=text].error,
input[type=password].error,
input[type=email].error,
select.error {
  border-color: #990d0d;
  background-color: #ffd4d4;
}

.form-error {
  color: #d11717;
  text-align: left;
}

input[type=submit],
input[type=button],
.btn {
  font-weight: bold;
  padding: 0.5em 1em;
  font-size: 1.25rem;
  border-radius: 80px;
  background-color: #e86c6c;
  border: 1px solid #e55656;
  color: #fff;
  cursor: pointer;
}
input[type=submit]:hover,
input[type=button]:hover,
.btn:hover {
  background-color: #e55656;
  border-color: #e14040;
}

a {
  color: #e86c6c;
}

#modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(52, 72, 94, 0.99);
  z-index: 999;
}
#modal-overlay div {
  max-width: 800px;
  background-color: #ebc35e;
  margin: 3rem auto;
  padding: 1rem;
  text-align: center;
  border: 2px solid #34485e;
  border-radius: 7px;
}
#modal-overlay div p {
  margin-bottom: 2rem;
}

@keyframes burger-before {
  from {
    left: 0.5rem;
    bottom: 0.5rem;
    transform: unset;
  }
  to {
    left: 0;
    bottom: unset;
    top: calc(50% + 1px);
    transform: rotate(45deg);
  }
}
@keyframes burger-after {
  from {
    left: 0.5rem;
    top: 0.5rem;
    transform: unset;
  }
  to {
    left: 0;
    top: calc(50% - 1px);
    transform: rotate(-45deg);
  }
}
@keyframes reversed-burger-before {
  from {
    left: 0;
    bottom: unset;
    top: calc(50% + 1px);
    transform: rotate(45deg);
  }
  to {
    left: 0.5rem;
    bottom: 0.5rem;
    transform: unset;
  }
}
@keyframes reversed-burger-after {
  from {
    left: 0;
    top: calc(50% - 1px);
    transform: rotate(-45deg);
  }
  to {
    left: 0.5rem;
    top: 0.5rem;
    transform: unset;
  }
}

/*# sourceMappingURL=style.css.map */