/* CSS Document */

@charset "UTF-8";

/* =============================================================================
   Typography
   ========================================================================== */

@font-face {
 font-family: "Century Gothic";
 src: url(../fonts/CenturyGothic/CenturyGothic.ttf) format("truetype");
}

@font-face {
 font-family: "Century Gothic Bold";
 src: url(../fonts/CenturyGothic/CenturyGothicBold.ttf) format("truetype");
}

@font-face {
 font-family: "Century Gothic Italic";
 src: url(../fonts/CenturyGothic/CenturyGothicItalic.ttf) format("truetype");
}


/* =============================================================================
   root
   ========================================================================== */
:root {
	--noir: #000000;
	--blanc-light: #e2e2d7;
	--blanc-light-overlay: rgba(226,226,215,0.70);
	--blanc: #ffffff;
	--blanc-overlay: rgba(255,255,255,0.30);
    --jaune: #ddd7c8;
    --marron: #2b2d20;
    --gris: #51817e;
    --rouge: #8d594a;
	--preloader-light: #000000;
    --preloader-dark: #ddd7c8;
}

/* =============================================================================
   html
   ========================================================================== */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }


body {
    margin: 0;
    font-size: 1em;
    line-height: 1;
    color: var(--marron);
    font-family: "Century Gothic";
    background-color: var(--blanc);
	scroll-behavior: smooth;
}
body.load {
	overflow-y: hidden;
}
.clear {
    clear: both;
}
/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

/* Dreamweaver: uncomment these if you do want to customize the selection highlight
 *::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
 *::selection { background: #fe57a1; color: #fff; text-shadow: none; }
 */

/* =============================================================================
   Links
   ========================================================================== */

a { color: var(--noir); text-decoration: none;}
a:visited { color: var(--noir); }
a:hover { color: var(--noir); }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

* {
  box-sizing: border-box;
}

/* #FX =============================================================================== */
/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.1);
}

.img-hover-zoom--colorize {
    height: 300px; /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
    display: none;
    visibility: hidden;
}

/* Colorize-zoom Container */
.img-hover-zoom--colorize img {
  transition: transform .5s, filter 1s ease-in-out;
  filter: grayscale(100%);
}

/* The Transformation */
.img-hover-zoom--colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
}

/* Quick-zoom Container */
.img-hover-zoom--quick-zoom img {
  transform-origin: 0 0;
  transition: transform .25s, visibility .25s ease-in;
}

/* The Transformation */
.img-hover-zoom--quick-zoom:hover img {
  transform: scale(2);
}

/* Point-zoom Container */
.img-hover-zoom--point-zoom img {
  transform-origin: 65% 75%;
  transition: transform 1s, filter .5s ease-out;
}

/* The Transformation */
.img-hover-zoom--point-zoom:hover img {
  transform: scale(5);
}

/* Zoom-n-rotate Container */
.img-hover-zoom--zoom-n-rotate img {
  transition: transform .5s ease-in-out;
}

/* The Transformation */
.img-hover-zoom--zoom-n-rotate:hover img {
  transform: scale(2) rotate(25deg);
}

/* Slow-motion Zoom Container */
.img-hover-zoom--slowmo img {
  transform-origin: 50% 65%;
  transition: transform 5s, filter 3s ease-in-out;
  filter: brightness(150%);
}

/* The Transformation */
.img-hover-zoom--slowmo:hover img {
  filter: brightness(100%);
  transform: scale(3);
}

/* Brightness-zoom Container */
.img-hover-zoom--brightness img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}

/* The Transformation */
.img-hover-zoom--brightness:hover img {
  filter: brightness(100%);
  transform: scale(1.3);
}

/* Horizontal Zoom-n-pan Container */
.img-hover-zoom--zoom-n-pan-h img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 100% 0;
}

/* The Transformation */
.img-hover-zoom--zoom-n-pan-h:hover img {
  transform: scale(1.5) translateX(30%);
}

/* Vertical Zoom-n-pan Container */
.img-hover-zoom--zoom-n-pan-v img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 0 0;
}

/* The Transformation */
.img-hover-zoom--zoom-n-pan-v:hover img {
  transform: scale(1.25) translateY(-30%);
}

/* Blur-zoom Container */
.img-hover-zoom--blur img {
  transition: transform 1s, filter 2s ease-in-out;
  filter: blur(2px);
  transform: scale(1.2);
}

/* The Transformation */
.img-hover-zoom--blur:hover img {
  filter: blur(0);
  transform: scale(1);
}