@charset "UTF-8";
/*
  Theme Name: Thomas Dornon Theme
  Description: Thème enfant de Twentytwentyone
  Author: Klod
  Template: twentytwentyone
  Version: 1.0.0
*/

/* utilities */
.m-unset {
  margin: unset !important;
  margin-left: unset !important;
  margin-right: unset !important;
  margin-top: unset !important;
  margin-bottom: unset !important;
}

.w-100 {
  max-width: 100% !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.fs-32 {
  font-size: 32px;
  font-weight: 600;
}

.fw-200 {
  font-weight: 200;
}

.text-grey > * {
  color: #393939 !important;
}

/* general style */
/* header{
  visibility: hidden;
  padding: unset;
  margin: unset;
  height: 0;
} */
a {
  color: #393939;
}

.site-header {
  padding: unset !important;
  height: 10vh;
}

.title-header {
  font-size: 4vw;
  font-weight: 200;
  text-shadow: 1px 1px 4px #39393970;
  margin-left: 20px;
  color: #393939;
}

.site-branding {
  margin-top: 4px;
  margin-right: 10vw;
}

.thin {
  margin-bottom: 0 !important;
}

.thin a {
  font-weight: 200;
}

.no-underline a {
  text-decoration: none;
}

.center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.red {
  color: #ac0202;
}

.cta {
  -webkit-transition: all 0.5s 0s ease;
  transition: all 0.5s 0s ease;
  background-color: #ac0202e0 !important;
  border-radius: 10px;
}

.cta:hover {
  border: unset;
  border-color: #b00303 !important;
  background-color: #b00303 !important;
  color: inherit !important;
  border-radius: 10px;
}

.cta a {
  -webkit-transition: font-weight 0.5s 0s ease;
  transition: font-weight 0.5s 0s ease;
  font-weight: 200 !important;
  background-color: unset !important;
  border: unset !important;
}

.cta a:hover {
  font-weight: 400 !important;
}

.cta a:focus {
  outline-offset: unset !important;
  outline: unset !important;
}

.wp-block-cover, .wp-block-cover-image {
  background-color: unset !important;
}

@media only screen and (min-width: 734px) {
  .title-header {
    font-size: 3vw;
    font-weight: 200;
    text-shadow: 1px 1px 4px #39393970;
  }
}

@media only screen and (max-width: 680px) {
  .site-branding {
    margin-top: 4px;
    /* margin-right: 10vw!important; */
  }
  .title-header {
    display: none;
  }
}

@media only screen and (max-width: 481px) {
  .site-header {
    height: 50px;
  }
  h1.alignwide.has-background-color.has-text-color {
    font-size: 50px !important;
  }
}

/* style contact form */
.contact .wpcf7 {
  max-width: 80% !important;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
.site textarea {
  border: unset !important;
  border-bottom: 1px solid #393939 !important;
  border-radius: unset !important;
  color: var(--form--color-text);
  line-height: var(--global--line-height-body);
  padding: 0 10px !important;
  margin: 0 2px;
  max-width: 100%;
  background-color: #ffffffd9 !important;
  -webkit-transition: background-color 0.3s 0s ease;
  transition: background-color 0.3s 0s ease;
  /* TODO: add animation for hover */
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
.site textarea:focus {
  color: unset !important;
  outline-offset: unset !important;
  outline: unset !important;
  background-color: #ffffff80 !important;
}

input[type=text]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=password]:hover,
input[type=search]:hover,
input[type=number]:hover,
input[type=tel]:hover,
input[type=date]:hover,
input[type=month]:hover,
input[type=week]:hover,
input[type=time]:hover,
input[type=datetime]:hover,
input[type=datetime-local]:hover,
input[type=color]:hover,
.site textarea:hover {
  border-bottom: 1px solid #ac0202 !important;
  background-color: #ffffff80 !important;
  -webkit-transition: background-color 0.3s 0s ease;
  transition: background-color 0.3s 0s ease;
}

.contact * {
  color: #727272 !important;
}
.contact label {
color: #000000 !important;

}

.contact .title {
  text-shadow: 1px 1px 4px #39393970;
}
.main-gallery .title {
  font-weight: 300;
  color: #b00303;
  font-size: 18px;
}

.contact label {
  font-size: 25px !important;
  font-weight: 200 !important;
  margin-bottom: unset !important;
}

.contact form p {
  margin-top: 30px;
}

.contact form .contact input[type=submit], input[type=submit]:not(:hover):not(:active):not(.has-background), input[type=submit]:focus {
  outline-offset: unset !important;
  outline: unset !important;
  background-color: #747474 !important;
  color: #ffffff !important;
  padding: 5px 30px !important;
  -webkit-transition: all 0.5s 0s ease;
  transition: all 0.5s 0s ease;
}

.contact form input[type=submit]:active, input[type=submit]:hover {
  outline-offset: unset !important;
  outline: unset !important;
  border-color: transparent !important;
  background-color: #fff !important;
  padding: 5px 30px !important;
  -webkit-transition: all 0.5s 0s ease;
  transition: all 0.5s 0s ease;
  color: #393939 !important;
}

/* Footer style */
#colophon {
  margin-top: unset;
  color: #393939;
  border-top: 1px solid #727272;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#colophon .site-info {
  margin-top: unset;
  border-top: unset;
  width: 100%;
}

#colophon a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
  color: #393939;
}

.footer-navigation-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  width: 100%;
}

/* home img style */

.double{
  font-weight: 200;
}

.double-after{
  margin-top: -49px!important;
  position: absolute;
  margin-left: 25px;
  font-weight: 300;
  font-size: 140px;
  color: #cdcdcd60;
  z-index: -1;
}

.img-right {
  max-width: 40vw !important;
  transform: scale(1.3,1.3) translate(10vw, 60px);
  position: sticky;
  top: 0;
}

.img-left {
  max-width: 40vw !important;
  transform: scale(1.3,1.3) translate(-10vw, -30px);
  position: sticky;
  top: 0;
}

.overflow-x-clip{
  overflow-x: clip;
}

.front-gallery *.title {
  font-size: 13px !important;
  color: #b00303;
  padding: 0 1rem;
  margin-top: unset !important;
}

.front-gallery .wp-block-columns>*, .front-gallery .wp-block-column>*  {
  margin-bottom: 10px !important;
}

.front-gallery .left {
  text-align: right;
}

.front-gallery .right {
  margin-top: 200px;
}

.front-gallery .separate-middle-col {
  max-width: 0px !important;
  border-left: #cdcdcd60 solid 1px;
}

.white50 {
  background-color: #ffffff50 !important
}

/* Album Gallery 2.1.7 : la galerie ajoute une grille col-* qui s'imbrique
   dans les colonnes Gutenberg et réduit la largeur au tiers du tiers. */
.wp-block-column .awl-ag-col,
.main-gallery .awl-ag-col,
.front-gallery .awl-ag-col {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media only screen and (max-width: 700px) {
  .wp-block-cover__inner-container {
    width: 90vw !important;
    margin: 10px !important;
  }
  .contact {
  
    width: 90vw !important;
  }
  .wpcf7, .wpcf7-form.init {
    width: 80vw !important;
    margin-left: 5px !important;
    margin-right: 10px !important;
  }
    .img-right {
      max-width: 100vw !important;
      /* position: absolute; */
      /* top: 120vh; */
      z-index: -1;
      opacity: 0.4;
    } 
    .img-left {
      max-width: 100vw !important;
      /* position: absolute; */
      /* top: 230vh; */
      opacity: 0.4;
      z-index: -1;
    }
}

@media only screen and (max-width: 600px) {
  .wp-block-cover__inner-container {
    width: unset !important;
  }
  .img-right {
    display: none;
  } 
  .img-left {
    display: none;
  }
  .front-gallery .left, .front-gallery .right, .main-gallery{
    text-align: center;
  }
  .contact > div h2 ,.contact > div h3 ,.contact > div p {
    width: 85vw !important;
  }
  .contact input[type=text],
  .contact input[type=email],
  .contact input[type=url],
  .contact input[type=password],
  .contact input[type=search],
  .contact input[type=number],
  .contact input[type=tel],
  .contact input[type=date],
  .contact input[type=month],
  .contact input[type=week],
  .contact input[type=time],
  .contact input[type=datetime],
  .contact input[type=datetime-local],
  .contact input[type=color],
  .contact textarea {
    max-width: 95% !important;
  }
}

@media (min-width: 600px) and (max-width: 781px){
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:only-child) {
      flex-basis: calc(46% - var(--wp--style--block-gap, 2em)/2)!important;
      flex-grow: 0;
  }
}