/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


.c-info-mulin {
    background: #1c1a1a; 
    bottom: 0px;
}

.font-size-recipe {
    font-size: 130%;
 }
 p {
    font-size: medium;
 }
 h3 {
    font-size: x-large;
 }

 html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

@font-face {
    font-family: 'BigCaslon';
    src: url('BigCaslon.ttf');
}
@font-face {
    font-family: 'DancingScript';
    src: url('DancingScript.ttf');
}

body {
    /*font-family: 'BigCaslon', Arial, serif;*/
    font-family: 'EB Garamond', serif;
}
.btn.focus, .btn:focus {
    box-shadow: none;
}
.recipe-fonts {
   font-family: 'DancingScript', Arial, serif;
}


@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}
.text-article-primary {
    position: absolute;
}
h3 {
    font-size: 1.5vw;
}
p {
    font-size: 1vw;
}
#navbar {
    background: linear-gradient(to bottom, white, 0.5%, #1c1a1a);
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    transition: all 2s ease-in-out;
}
.bg_black_navbar {
    background: linear-gradient(to bottom, white, 0.5%, #1c1a1a);
}
#navbar-mobile {
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    transition: all 2s ease-in-out;
}
.bg-img-secondary-product {
    background: url('/assets/bg_page03_03') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}
.bg-footer-traditional {
    background: linear-gradient(to bottom, transparent, #1c1a1a 5%);
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    transition: all 2s ease-in-out;
}
.bg-first_article {
    background: linear-gradient(to bottom, transparent, #1c1a1a 15%);
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    transition: all 2s ease-in-out;
}
.bg-img-primary-history {
    background: url('/assets/fond-page1_02') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.border-dotted-for-article {
    border: dotted 0.4em white;
    border-radius: 50px;
}
.bg-img-primary-recipe {
    background: url('/assets/fond-page-recette copie.jpg') no-repeat fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
.bg-img-primary-traditional {
    background: url('/assets/FD CAVE BASE OK.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.bg-img-primary-product {
    background: url('/assets/bg table page') no-repeat fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
.bg-img-emmental-product {
    background: url('/assets/bg_page03_04') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}
.body-img-photo-product {
    box-shadow: 5px 7px 10px black;
    background: white;
    width: 13rem;
    height: 17rem;
    padding: 1rem;
}
.bg-img-beurre-product {
    background: url('/assets/bg_bois') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.head-img-photo-product {
    overflow: hidden;
    height: 80%;
    margin-bottom: 2em;
}
.item-img-photo-product {
    min-height: 100%;
    min-width: 100%;
    width: 100%
}
.body-img-photo {
    box-shadow: 5px 7px 10px black;
    background: white;
    width: 20%;
    max-width: 20%;
    min-width: 20%;
    height: 30%;
    max-height: 30%;
    min-height: 30%;
    padding: 1rem;
}
.head-img-photo {
    overflow: hidden;
    height: 80%;
}
.item-img-photo {
    min-height: 100%;
    min-width: 100%;
    width: 100%
}
.line-link-onglet:focus {
  box-shadow: 1px 1px 4px black inset;
  outline-style: none;
}
#logo-navbar:hover {
	-webkit-animation: animLogoHomeAfk 1.5s;
	-moz-animation: animLogoHomeAfk 1.5s;
    animation: animLogoHomeAfk 1.5s;
}
.border-raduis-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.line-link-onglet {
    text-decoration: black;
    box-shadow: 1px 1px 4px black inset;
    background-image: linear-gradient(to right, #A98024, #F5D895 55%, #B58229 82%, #f4E8CA 100%);
    background-repeat: no-repeat;
    background-position: 0 130%;

}
.line-article-recipe {
    background-image: linear-gradient(to right, #A98024, #F5D895 55%, #B58229 82%, #f4E8CA 100%);
    background-repeat: no-repeat;
    background-position: 0 130%;
    background-size: 100% 100px;
}
.line-link-onglet-not-active {
    background: linear-gradient(to right, #A98024, #F5D895 55%, #B58229 82%, #f4E8CA 100%) no-repeat top,  linear-gradient(to right, #A98024, #F5D895 55%, #B58229 82%, #f4E8CA 100%) no-repeat bottom, black;
    background-size:100% 5px;
    padding:5px 10px ;
    border-right: 5px solid #f4E8CA;
    border-left: 5px solid #A98024;
    display: inline-block;
}
.line-link-onglet-not-active02 {
    background: linear-gradient(to right, #A98024, #F5D895 55%, #B58229 82%, #f4E8CA 100%) no-repeat top,  linear-gradient(to right, #A98024, #F5D895 55%, #B58229 82%, #f4E8CA 100%) no-repeat bottom, black;
    background-size:100% 3px;
    padding:5px 10px ;
    border-right: 3px solid #f4E8CA;
    border-left: 3px solid #A98024;
    display: inline-block;
}
.bg-img-primary-home {
    background: url('/assets/fond-home_02') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    /*box-shadow: 0px 0px 150px 200px #1c1a1a inset;*/
}
.border-bg-home {
    
    background-image: linear-gradient(to right, #1c1a1a, transparent 40%), linear-gradient(to left, #1c1a1a, transparent 40%), linear-gradient(to bottom, #1c1a1a, transparent 40%), linear-gradient(to top, #1c1a1a, transparent 40%);
    box-shadow: 0px 0px 50% 50% #1c1a1a inset;
}   
.bg-img-secondary {
    background: url('/assets/bg_bois') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.bg-img-primary-article-history {
    background: url('/assets/template-histoire.png') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100%;
    background-position: top;
}
.min-h-100 {
	min-height: 100vh;
}
.div-h-100 {
	min-block-size: -webkit-fill-available;
    min-block-size: fill-available;
    height: 100vh;
}
@keyframes animLogoHomeAfk {
    0%, 100% {
    	transform: none;
  	}
    10% {
        transform: rotate(20deg);
    }

    20% {
        transform: rotate(-10deg);
    }
    30% {
        transform: rotate(9deg);
    }

    40% {
    	transform: rotate(-8deg);
    }
    50% {
        transform: rotate(7deg);
    }
    60% {
    	transform: rotate(-6deg);
    }
    80% {
        transform: rotate(5deg);
    }
    80% {
    	transform: rotate(-3deg);
    }
    90% {
        transform: rotate(1deg);
    }
}
@keyframes animLogoHomeClick {
    0% {
        transform: none;
    }

    70% {
        transform: translateY(-40px) rotate(360deg);
    }
}
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 2s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}
.anim-afk-logo-home {
	-webkit-animation: animLogoHomeAfk 1.5s;
    -moz-animation: animLogoHomeAfk 1.5s;
	animation: animLogoHomeAfk 1.5s;
}
.anime-click-logo-home {
	-webkit-animation: animLogoHomeClick 2s;
    -moz-animation: animLogoHomeClick 2s;
	animation: animLogoHomeClick 2s;
	transform: scale(1.5);
}