/*
Theme Name: Storefront Child Theme
Theme URI: http://frikkadel.co.za
Description: Storefront Child Theme
Author: Your Name
Author URI: http://frikkadel.co.za
Template: storefront
Version: 1.0.0
*/

/* Add your custom styles here */
@font-face {
  font-family: FuturaPT-book; 
  src: url(assets/futurabook.woff);
}
@font-face {
  font-family: Calliga-Regular;
  src: url(assets/Calliga-Regular.woff);
}
body {
  overflow-x: clip !important;
}
.site {
  overflow-x:  clip !important;
}
.THIS-STICKY-BLOCK
{
    display: block;
    position: sticky;
    top: 0px;
}
.explore a
{
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 3px;
    text-decoration: none !important;
}
div, a, p, span, li, ul, .glightbox-clean, .gslide-title {
  font-family: FuturaPT-book !important;
}
h1, h2, h3
{
  font-family: Calliga-Regular;
}
/* AA text animation */

  @font-face {
  font-family: FuturaPT-book;
  src: url(/assets/futura-pt-book.otf);
}

@font-face {
  font-family: Calliga-Regular;
  src: url(/assets/Calliga-Regular.ttf);
}

/* AA text animation ENDS */

body.home
{
    background-color: black;
}
.video-desktop video
{
    max-height: 99vh;
}
.site-header
{
    padding-top: 0em;
    max-height: 141px;
}
.elementToFadeInAndOut {

    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
.storefront-breadcrumb,
.button.product_type_simple.add_to_cart_button.ajax_add_to_cart,
.woocommerce-Price-amount.amount, .woocommerce-loop-product__title
{
    display: none;
}


.entry-title
{
    display: none;
}
/*home page */
.stk-block-background
{
    background-color: transparent;
}
.home .site-header
{
    display: none;
}
.stk-block-background:not(.stk--no-padding)
{
    padding: 0px;
}
/*home page end */
/*fade out video */


/*header items animation */

.hide-button, .hide-button:hover,.hide-button2, .hide-button2:hover
{
    color: white;
    background-color: transparent;
    text-align: right;
    margin-top: 0px;
    z-index: 10000;
    float: right;
}

#hideme {
  padding: 0px 0;
  text-align: right;
}
#hideme2 {
  padding: 0px 0;
  text-align: right;
}
.hide-button, .hide-button2
{
    background-color: black;
    border: 0;
    color: white;
    font-family: "Futura Book", Arial;
    text-align: right;
    cursor: pointer;
}
.hideme, .hideme2 {
    -moz-animation: cssAnimation 0s ease-in 15s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 15s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 15s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 15s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}
.imgtest
{
 width: 74px;
}
.wrapper-test {
  /*display: inline-block;
  width: 100%;*/
}
/* entire container, keeps perspective */
.flip-container-test {
  /*display: inline-block;
  perspective: 1000px;
  vertical-align: top;*/ /* Prevent unwanted margin. */
}

/* flip the pane when hovered */
.wrapper-test:hover .flip-left-test {
  transform: rotateY(-180deg);
}

.flip-container-test,
.front-test,
.back-test {
  width: 100%;
  height: 75px;
}

/* flip speed goes here */
.flip-test {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
/* hide back of pane during swap */
.front-test, .back-test{
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: -1;
}
.back-test {
  position: absolute;
  top: 0;
  left: -1;
}

/* front pane, placed above back */
.front-test {
  z-index: 2;
  background: transparent;
  transform: rotateY(0deg);
}

.front-left-test .circle-test {
  position: absolute;
  width: 100%;
}



/* back, initially hidden pane */
.back-test {
  transform: rotateY(180deg);
}

/*header containers */
.AA-main-head-container {
  height: 141px;
  position: relative;
}
.AA-logo-container-mobile, .storefront-sorting
{
    display: none;
}
.storefront-full-width-content .woocommerce-products-header
{
    margin-top: 35px;
}
.hentry, .content-area, .site-main
{
    margin: 0 !important;
}
.col-full
{
    max-width: 100%;
}
.AA-logo-container {
  margin: 0 auto;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.AA-menu-item-1, .AA-menu-item-2, .AA-menu-item-3, .AA-menu-item-4, .AA-menu-item-5, .AA-hamburger-menu {
  margin: 0 auto;
  position: relative;
  top: 55%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.AA-logo-container img
{
    width: 155px;
    height: 155px;
}
.AA-logo-container img, .AA-menu-item-1 img, .AA-menu-item-2 img, .AA-menu-item-3 img, .AA-menu-item-4 img, .AA-menu-item-5 img, .AA-hamburger-menu img, .back-left-test img , .front-left-test img {
  text-align: center;
  margin: 0 auto;
}


.AA-main-head-container
{
    width: 100%;
    position: fixed;
    background: #272727;
}
.AA-logo-container
{
    float: left;
    margin-right: 25px;
}
.AA-menu-item-1, .AA-menu-item-2, .AA-menu-item-3, .AA-menu-item-4, .AA-menu-item-5
{
    width: 16%;
    float: left;
}
.AA-hamburger-menu
{
    border: solid 3px #cfc2a0;
    border-radius: 88px;
    padding: 20px;
    float: right;
    margin-right: 25px;
    margin-top: -8px;
}
.AA-logo-anim-home {
  animation: AA-logo-home 17s ease-out forwards;
  
    
}
/* logo - header animation */
@keyframes AA-logo-home {
  0% {
    transform: rotate(0deg);
  }
  11% {
    transform: rotate(360deg); 
  } 
   90% {
    transform: rotate(360deg); 
  }
  100% {
    transform: rotate(0deg); 
  }  
}
.AA-logo-anim {
  animation: AA-logo 1s ease-out forwards;
}
/* logo - header animation */
@keyframes AA-logo {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(358deg); /* Smooth stop */
  }
}
.no-wc-breadcrumb .site-header
{
    margin-bottom: 0px;
}
/*mailchimp */
.mc_custom_border_hdr
{
    display: none;
}
label.mc_var_label.mc_header.mc_header_email, 
label.mc_var_label.mc_header.mc_header_text
{
    min-width: 100px;
    display: block;
}

.mc_var_label.mc_header.mc_header_email:after, 
.mc_var_label.mc_header.mc_header_text:after
{
    content: ": ";
}
.mc_merge_var input
{
    margin-left: 15px;
    width: 256px;
}
.mc_merge_var
{
    max-width: 70%;
    float: left;
}
.wp-block-mailchimp-mailchimp
{
        margin: 0 auto;
    min-width: 100%;
}
.mc_form_inside
{

}
button, input[type="button"], input[type="reset"], input[type="submit"], .button, .widget a.button, input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], textarea, .input-text
{
    background-color: white;
    font-weight: normal;
    border: solid 1px #f1f0ea;

}

/*hamburger */

/* General styles for the hamburger menu */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 25px;
    cursor: pointer;
}

.hamburger-menu span {
    display: block;
    height: 4px;
    background-color: #cfc2a0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

/* Dropdown menu styles */
.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 50px;
    right: 0;
    background-color: #d1b067;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    z-index: 1000;
    width: 250px;
    margin-right: -25px;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #f1f0ea;
    text-decoration: none;
    transition: background-color 0.3s;
}

.dropdown-menu a:hover {
    background-color: #f5f5f5;
    color: #d1b067;
}
/* fromage*/
.ffaded-text
{
    opacity: 0;
}
.ffaded-text:hover
{
    opacity: 1;
}
.ffade-image
{
    opacity: 1;
}

.ffade-image:hover
{
    opacity: 0.2;
}

body.page-id-422 #content,  body.page-id-14 #content, body.page-id-376 #content, body.page-id-378 #content
{
    max-width: 75%;
    margin: 0 auto;
    
}

/*fixed section */


/*fixed section ends*/
/* Active state for dropdown menu */
.menu-open .dropdown-menu {
    display: block;
}

/* Transform the hamburger menu into an "X" when active */
.menu-open .hamburger-menu span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.menu-open .hamburger-menu span:nth-child(2) {
    opacity: 0;
}

.menu-open .hamburger-menu span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}
.wp-block-gallery.has-nested-images.columns-default.is-cropped.wp-block-gallery-1.is-layout-flex.wp-block-gallery-is-layout-flex
{
    margin-bottom: 0px !important;
}
.hentry .entry-content div.wp-block-image:not(.block-editor-media-placeholder) figure, .hentry .entry-content figure.wp-block-image
{
    margin-bottom: 0px;
}
.more-creations a
{
    text-decoration: none !important;
    letter-spacing: 3px;
}
   /*petit bon bon page */
    .petitbonbon-container {
      text-align: center;
    }
    .musette-container
    {
        bottom: 0px;
        max-width: 415px;
        margin-top: 294px !important;
        margin-left: 719px;
    }
    .fade-petitbonbon-image {
      opacity: 0; /* Start fully transparent */
      transition: opacity 2.5s ease; /* Smooth transition for all opacity changes */
    }
    
    .more-creations {
      height: 20px;
      margin: 0 auto;
      width: 100%;	
      text-align: center;
    }
    
    .text-link {
      text-decoration: none;
      color: #d1b067;
      cursor: pointer;
      display: inline-block;
    }
        .text-link2 {
      text-decoration: none;
      color: #d1b067;
      cursor: pointer;
      display: inline-block;
    }
    .text-link:hover
    {
        color: #272727;
        
    }
    
    .letter {
      display: inline-block;
      opacity: 0;
      font-size: 10px;
      transition: opacity 5s ease, font-size 5s ease;
      letter-spacing: 3px;
      text-align: center;
    }
   
    
    .space {
      display: inline-block;
      width: 10px; /* Width of the space between words */
    }

    /* New hover fade effect styles */
    .image-container {
      position: relative;
      width: 100%;
      /*max-width: 600px;*/
      margin: 0 auto;
      height: auto;
      overflow: hidden;
    }
    
    .image-wrapper {
      position: relative;
      width: 100%;
      cursor: pointer;
      margin: 0 auto;
      text-align: center;
    }
    
    .image {
      position: absolute;
      top: 0;
      left: 0;
      
      object-fit: contain;
      transition: opacity 0.5s ease-in-out;
    }
    
    .primary-image {
      opacity: 1;
      object-fit: contain !important;
    }
    
    .secondary-image {
      opacity: 0;
      object-fit: contain !important;
    }
    
    .image-wrapper:hover .primary-image {
      opacity: 0;
    }
    
    .image-wrapper:hover .secondary-image {
      opacity: 1;
    }
/* Egyptian Magic */

.em-container{
  
  margin:100px auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

.em-card{
  position:relative;
  margin:20px 30px;
  width:300px;
  height:400px;
  background: #000;
  transform-style:preserve-3d;
  transform:perspective(2000px);
  transition:1s;
  box-shadow:inset 100px 0 50px rgba(0,0,0,0.5);
}

.em-card:hover{
  z-index:1111;
  transform:perspective(2000px) rotate(-10deg);
  box-shadow:inset 20px 0 50px rgba(0,0,0,0.5);
}

.em-card .em-img-container{
  position:relative;
  width:100%;
  height:100%;
  border:1px solid #000;
  box-sizing:border-box;
  transform-origin:left;
  z-index:1;
  transition:1s;
}

.em-card .em-img-container img{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  object-fit:cover;
  background-color: black;
}

.em-card:hover .em-img-container{
  transform:rotateY(-135deg);
}

.em-card .em-card-details{
  position:absolute;
  left:0;
  top:0;
  box-sizing:border-box;
  padding:20px;
  color:#fff;
}

 .em-card .em-card-details h2{
  margin:0;
  padding:0.5em 0;
  text-transform:uppercase;
  color: #fff;
  
}

.em-card .em-card-details p{
  margin:0;
  padding:0;
  line-height:25px;
  font-size:1.1em;
}
.em-h2
{
    font-size: 20px;
}

div.wp-block-stackable-columns.stk-block-columns.stk-block.stk-32d6367,
.this-fixed-thing
{
    position: fixed !important;
}
    .THIS-FULL-WIDTH-THING
    {
        min-width: 100vw;
    }
button, input[type="button"], input[type="reset"], input[type="submit"], .button, .widget a.button, input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], textarea, .input-text
{
    max-width: 80vw;
}
/*Responsive    */

@media (max-width: 1025px) {

.AA-menu-item-1, .AA-menu-item-2, .AA-menu-item-3, .AA-menu-item-4, .AA-menu-item-5 
    {
        width: 14%;
        float: left;
    }
}
@media only screen and (min-width: 768px) {

.mc_merge_var {
    max-width: 100% !important;
    float: none;
}
.col-full
{
    padding: 0 0 0 0;
}

}

@media only screen and (max-width: 500px) {
.stk-row.stk-inner-blocks.stk-block-content.stk-content-align.stk-3c79c11-column
{
    margin-right: 0 !important;
    min-width: 100%;
}
.THIS-STICKY-BLOCK
{
    display: block;
    position: relative;
    top: 0px;
}
    
    .mc_merge_var {
    max-width: 100% !important;
    float: none;
}
.AA-main-head-container {
  height: 241px;
  position: relative;
}
.site-header
{
    padding-top: 0em;
    max-height: 241px;
}
.storefront-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignfull, .storefront-align-wide.storefront-full-width-content .hentry .entry-content .alignfull
{
    margin-left: 0;
    margin-right: 0;
    width: auto;
}
.AA-logo-container
{
    display: none;
}
.AA-logo-container-mobile
{
    min-width: 100%;
    display: block;
}
.AA-logo-container-mobile img
{
    margin: 34px auto 0px auto;
}
.AA-menu-item-1, .AA-menu-item-2, .AA-menu-item-3, .AA-menu-item-4, .AA-menu-item-5, .AA-hamburger-menu {
    width: 11.5%;
    float: left;
    margin: 11px;
    top: 92px;
}
.AA-hamburger-menu
{
    border: solid 0px #cfc2a0;
    border-radius: 50px;
    padding: 0px;
    float: right;
    top: -19px;
}
.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 30px;
    right: 0;
    background-color: #d1b067;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    z-index: 1000;
    width: 350px;
}
}
@media (max-width: 568px) {
    .col-full {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
}