/*
Theme Name: bbxdesert
Theme URI: http://wordpress.bbxdesign.com
Description: Thème Désert WordPress
Version: 2.0
Author: bbx
Author URI: http://bbxdesign.com
Tags: empty, full-width, simple, white

  bbxdesert
  http://wordpress.bbxdesign.com

*/
*,
body,
button,
input,
select,
textarea{ color: #333; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.5;}

/* Balises block */

.post-content h1{ }
.post-content h2{ }
.post-content h3{ }
.post-content h4{ }
.post-content h5{ }
.post-content h6{ }
.post-content p{ }
.post-content ul{ }
.post-content ol{ }
.post-content blockquote{ }
.post-content pre{ }
.post-content address{ }
.post-content address{ }

/* Balises inline */

.post-content strong{ }
.post-content em{ }
.post-content acronym{ }
.post-content code{ }
.post-content del{ }
.post-content ins{ }

/* Classes des images */

.alignleft{ display: inline; float: left;}
.aligncenter{ clear: both; display: block; margin-left: auto; margin-right: auto;}
.alignright{ display: inline; float: right;}
.size-auto{ }
.size-medium{ }
.size-large{ }
.size-full{ }
.wp-caption{ }
.wp-caption img{ }
.gallery{ }
.gallery .gallery-item{ }


.site-main.home_grid .posts { display: flex; flex-wrap: wrap; width: 100%; max-width: 100vh; margin-right: 0; margin-left: auto; }

.anim-object {perspective: 1000px; width:33.333%; height: auto; padding: 5px; }
.anim-object .anim-object-inner {position: relative; width: 100%; height: 100%; transition: all 0.65s cubic-bezier(0.455, 0.030, 0.515, 0.955); transform-style: preserve-3d; }
.anim-object .anim-object-inner div { display: flex; }
.anim-object .face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 15px; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 15px; }
.anim-object .front { background-position: center; background-size: contain; }
.anim-object .back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); background: #D0001A;}
.anim-object .back a { color: white; height: 100%; width: 100%; display: flex; justify-content: flex-start; align-items: center; font-size: 24px; font-weight: 300; text-decoration: none; text-transform: uppercase; }
.anim-object:hover .anim-object-inner {-webkit-transform: rotateY(180deg); transform: rotateY(180deg);}

.anim-object .face h2 { text-transform: uppercase; color: white; font-size: 32px; line-height: 1.05; text-shadow: 0 0 10px rgb(0 0 0 / 25%); }
.anim-object .face h3 { color: white; font-size: 15px; font-weight: 600; }


/* DIFFERENTES COULEURS AU DOS*/

.anim-object:nth-of-type(2) .back, .anim-object:nth-of-type(3) .back { background-color: #069999; }
.anim-object:nth-of-type(4) .back, .anim-object:nth-of-type(5) .back, .anim-object:nth-of-type(6) .back, .anim-object:nth-of-type(7) .back { background-color: #57BB45; }
.anim-object:nth-of-type(8) .back, .anim-object:nth-of-type(9) .back { background-color: #E5D90D; }


/* TEST PHOTO AU DOS*/
.anim-object:nth-of-type(5) .back { background-image: url('/wp-content/uploads/2022/02/forest-2022.jpg'); background-position: center; background-size: contain; }

.anim-object .back a svg path { fill: white; } 
.anim-object .back a svg { width: 25px; height: auto; margin-left: 10px; }

/**
 * ----------------------------------------
 * animation flip-vertical-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}