/*
Theme Name: BenF
Description: Theme enfant de Généric
Author: Benjamin FRIESS
Author URI: benjaminfriess.com
Template: generic
Version: 0.1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400&display=swap');

/* Ici les élémentes de mise en page globale */
#header, #container, #footer {
    
}

.header-pages {padding:30px !important;
padding-bottom:0px !important;
padding-top:0px !important;
height:150px !important;
background: rgb(212,209,204))!important;
background: linear-gradient(90deg, rgba(207,198,184,1) 0%, rgba(250,249,243,1) 100%)!important;
}
.header-pages #menu {margin:0 !important; z-index:2; position:absolute; left:0; top:-50px; padding-left:300px}
.header-pages #menu ul.menu a {font-family: 'Exo', sans-serif !important; display:inline-block;  margin:0; padding:0!important; color:#443828!important;  }
.header-pages #menu ul.menu li {border-bottom:30px solid rgba(255,233,152,1); height:230px; padding-top:160px!important; border-left:1px solid #a49174; border-right:1px solid #a49174; display:inline-block; padding-left:15px; padding-right:15px; transition-duration: 1s;
background-color:#f8f7f0}
.header-pages #menu ul.menu li:hover {transform: translate(-50px, 0);}
.header-pages #menu ul.menu li:last-child {border-right:2px solid #a49174;}
.header-pages #menu ul.menu li:first-child {border-left:2px solid #a49174;}

#menu li a:after {display:none;}
#top-menu li.current-menu-item>a {
    color: #443828!important;}

#barre_or {position:absolute; top:150px; left:0px; width:100%; height:30px; background: linear-gradient(270deg, rgba(87,55,13,1) 0%, rgba(255,233,152,1) 50%)!important; z-index:0}

.header-home {padding:0 !important; background-color:none !important}
#footer {padding: 1% !important;}
#site-description {display:none !important;}

.page_pleine {
	width:100% !important;}
	
body {
	}

/* LOGO */
	
#branding {width:35%;}
#logo {width:100%;}

/* Menu accueil */
.menu-home li {display:block !important;
padding:0.6vw!important;
padding-right:0px!important;
text-align:left!important;
transition-duration: 1s;
border-bottom:1px solid #a49174;
width:20vw!important;
border-left:30px solid rgba(255,233,152,1);
background-color:rgba(230,222,209,1);
background: linear-gradient(90deg, rgba(230,222,209,1) 25%, rgba(230,222,209,0) 100%)!important;
}
.menu-home li:first-child {border-top:1px solid #a49174;}
.menu-home li:hover {
text-align:left!important;
transform: translate(-5vw);
width:25vw!important;
overflow:hidden;
}
.menu-home a {text-align:left!important;width:100%!important; padding-bottom:1vw!important; padding-top:1vw!important; color:#443828!important; font-size:1.2vw!important; text-decoration:none; font-family: 'Exo', sans-serif !important;}

@keyframes menu_home_anim {
  0% {left:50%;}
  100% {left:70%;} }
  
@keyframes menu_home_anim_retour {
  0% {left:70%;}
  100% {left:50%;} }

.menu-home {position:absolute;
top:15vh;
z-index:20;
width:30%!important;
max-width:30%!important;
animation-name: menu_home_anim;
animation-fill-mode: forwards;
animation-duration: 3s;}

.menu-home.animating {
animation-name: menu_home_anim_retour;
animation-fill-mode: forwards;
animation-duration: 3s;}

/* Fond accueil */

.home {
background-image:url(images/fond_accueil.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: top right ;
}
@keyframes fond_logo_anim {
  0% {left:-50%}
  100% {left:-65%} }
  
@keyframes fond_logo_anim_retour {
  0% {left:-65%}
  100% {left:-50%} }
  
@keyframes fond_logo_or_anim {
  0% {left:50%; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);}
  100% {left:35%; box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.3);} }
  
@keyframes fond_logo_or_anim_retour {
  0% {left:35%; box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.3);}
  100% {left:50%; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);} }
  
@keyframes fond_menu_anim {
  0% {left:50%; width:50%; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);}
  100% {left:70%; width:30%; box-shadow: -10px 0px 5px rgba(0, 0, 0, 0.3);} }
  
@keyframes fond_menu_anim_retour {
  0% {left:70%; width:30%; box-shadow: -10px 0px 5px rgba(0, 0, 0, 0.3);}
  100% {left:50%; width:50%; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);} }
  
@keyframes fond_menu_or_anim {
  0% {left:50%}
  100% {left:70%} }
@keyframes fond_menu_or_anim_retour {
  0% {left:70%}
  100% {left:50%} }

#fond_logo {background: rgb(212,209,204))!important;
background: linear-gradient(0deg, rgba(207,198,184,0.9) 15%, rgba(250,249,243,0.8) 75%, rgba(250,249,243,0.1) 100%)!important;
position:absolute;
top:0;
width:100%;
height:100vh;
z-index:10;
animation-name: fond_logo_anim;
animation-fill-mode: forwards;
animation-duration: 3s;
}
#fond_logo.animating {
	animation-name: fond_logo_anim_retour;
	animation-fill-mode: forwards;
	animation-duration: 3s;}
#fond_logo_or {background: rgb(255,233,152)!important;
background: linear-gradient(170deg, rgba(255,233,152,1) 50%, rgba(87,55,13,1) 100%)!important;
position:absolute;
top:0;
width:30px;
height:100vh;
z-index:11;
box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.3);
animation-name: fond_logo_or_anim;
animation-fill-mode: forwards;
animation-duration: 3s;
}
#fond_logo_or.animating {
	animation-name: fond_logo_or_anim_retour;
	animation-fill-mode: forwards;
	animation-duration: 3s;}

#fond_menu {background: rgb(230,222,209)!important;
background: linear-gradient(160deg, rgba(230,222,209,1) 50%, rgba(111,100,82,1) 100%)!important;
position:absolute;
top:0;
height:100vh;
z-index:10;
animation-name: fond_menu_anim;
animation-fill-mode: forwards;
animation-duration: 3s;
}

#fond_menu.animating {
animation-name: fond_menu_anim_retour;
animation-fill-mode: forwards;
animation-duration: 3s;
}

#fond_menu_or {background: rgb(255,233,152)!important;
background: linear-gradient(170deg, rgba(255,233,152,1) 50%, rgba(87,55,13,1) 100%)!important;
position:absolute;
top:0;
left:0;
width:30px;
height:100vh;
z-index:11;
animation-name: fond_menu_or_anim;
animation-fill-mode: forwards;
animation-duration: 3s;
}
#fond_menu_or.animating {
animation-name: fond_menu_or_anim_retour;
animation-fill-mode: forwards;
animation-duration: 3s;
}
#logo_svg{background-image:url(images/izarian.svg);
background-repeat:no-repeat;
background-size:33%;
background-position: top left ;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:15;
}

.menu-toggle-home {
	display:none !important ;}
#menumobile {display:none !important }
.sub-menu {display:none !important;}

@media only screen and (max-width:1325px) and (orientation: landscape){
.menu-home {
width:33vw!important;
}
.menu-home a {font-size:14px!important;}
/* Menu accueil */
.menu-home li {display:block !important;
width:28vw!important;
}
.menu-home li:hover {
width:33vw!important;
}
@keyframes menu_home_anim {
  0% {left:50%;}
  100% {left:65%;} }

@keyframes fond_menu_anim {
  0% {left:50%; width:50%; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);}
  100% {left:65%; width:35%; box-shadow: -10px 0px 5px rgba(0, 0, 0, 0.3);} }
@keyframes fond_menu_or_anim {
  0% {left:50%}
  100% {left:65%} }
#logo_svg{
background-size:40%;
background-position: top left ;
position:absolute;
top:0;
left:-8%;
}

}
@media only screen and (max-height:400px) and (max-width:1325px) {
.menu-home li {
width:30vw!important;
border-left:0px;
background-color:none !important;
background: none !important;
padding-left:35px !important;
}
.menu-home li:hover {
transform:none;
text-align:left!important;
width:30vw!important;
}
.menu-home {}
.menu-home a {font-size:14px!important;}
}
@media (orientation:portrait)  {
#menu  {display:none !important }
#menumobile {display:block !important }

@keyframes fond_logo_anim_mobile {
  0% {top:0}
  100% {top:-10vh} }
  
@keyframes fond_logo_anim_mobile_retour {
  0% {top:-10vh}
  100% {top:0} }
  
@keyframes logo_anim_mobile {
  0% {height:35vh;}
  100% {height:25vh;} }
  
@keyframes logo_anim_mobile_retour {
  0% {height:25vh;}
  100% {height:35vh;} }
  
@keyframes fond_logo_or_anim_mobile {
  0% {top:35vh; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);}
  100% {top:25vh; box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.3);} }
  
@keyframes fond_logo_or_anim_mobile_retour {
  0% {top:25vh; box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.3);}
  100% {top:35vh; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);} }
  
@keyframes menu_home_anim_mobile {
  0% {top:40vh;}
  100% {top:50vh;} }
  
@keyframes menu_home_anim_mobile_retour {
  0% {top:50vh;}
  100% {top:40vh;} }
  
@keyframes fond_menu_anim_mobile {
  0% {top:40vh; height:60vh; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);}
  100% {top:50vh; height:50vh; box-shadow: 0px -10px 5px rgba(0, 0, 0, 0.3);} }
  
@keyframes fond_menu_anim_mobile_retour {
  0% {top:50vh; height:50vh; box-shadow: 0px -10px 5px rgba(0, 0, 0, 0.3);}
  100% {top:40vh; height:60vh; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);} }
  
@keyframes fond_menu_or_anim_mobile {
  0% {top:40vh;}
  100% {top:50vh;} }
  
@keyframes fond_menu_or_anim_mobile_retour {
  0% {top:50vh;}
  100% {top:40vh;} }
  
.home {
background-size:110vw;
background-position: 0 25vh ;
}

#fond_logo {background: rgb(212,209,204))!important;
background: linear-gradient(240deg, rgba(207,198,184,1) 35%, rgba(250,249,243,1) 75%, rgba(250,249,243,1) 100%)!important;
position:absolute;
top:0;
width:100%;
height:35vh;
z-index:10;
animation-name: fond_logo_anim_mobile;
animation-fill-mode: forwards;
animation-duration: 3s;
}

#fond_logo.animating {
animation-name: fond_logo_anim_mobile_retour;
animation-fill-mode: forwards;
animation-duration: 3s;
}


#fond_logo_or {background: rgb(255,233,152)!important;
background: linear-gradient(90deg, rgba(87,55,13,1) 0%, rgba(255,233,152,1) 20%, rgba(255,233,152,1) 50%, rgba(87,55,13,1) 100%)!important;
position:absolute;
top:25vh;
width:100vw;
height:30px;
z-index:30;
box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.3);
animation-name: fond_logo_or_anim_mobile;
animation-fill-mode: forwards;
animation-duration: 3s;
}

#fond_logo_or.animating {
animation-name: fond_logo_or_anim_mobile_retour;
animation-fill-mode: forwards;
animation-duration: 3s;
}

#fond_menu {background: rgb(230,222,209)!important;
background: linear-gradient(180deg, rgba(230,222,209,1) 50%, rgba(111,100,82,1) 100%)!important;
position:absolute;
top:40vh;
height:50vh;
width:100%;
z-index:30;
animation-name: fond_menu_anim_mobile;
animation-fill-mode: forwards;
animation-duration: 3s;
}

#fond_menu.animating {
animation-name: fond_menu_anim_mobile_retour;
animation-fill-mode: forwards;
animation-duration: 3s;
}

#fond_menu_or {background: rgb(255,233,152)!important;
background: linear-gradient(90deg, rgba(87,55,13,1) -10%, rgba(255,233,152,1) 10%, rgba(255,233,152,1) 40%, rgba(87,55,13,1) 100%)!important;
position:absolute;
top:40vh;
left:0;
width:100%;
height:30px;
z-index:30;
animation-name: fond_menu_or_anim_mobile;
animation-fill-mode: forwards;
animation-duration: 3s;
}

#fond_menu_or.animating {
animation-name: fond_menu_or_anim_mobile_retour;
animation-fill-mode: forwards;
animation-duration: 3s;
}

#logo_svg{
background-image:url(images/izarian_mobile.svg);
background-size:50vh;
background-position: top center ;
width:100%;
height:35vh;
animation-name: logo_anim_mobile;
animation-fill-mode: forwards;
animation-duration: 3s;
}

#logo_svg.animating{
animation-name: logo_anim_mobile_retour;
animation-fill-mode: forwards;
animation-duration: 3s;
}

.menu-home {position:absolute;
top:50vh;
z-index:31;
padding-top:30px !important;
width:100vw!important;
max-width:100vw!important;
animation-name: menu_home_anim_mobile;}

.menu-home.animating {
animation-name: menu_home_anim_mobile_retour;}

.menu-home li {
text-align:center!important;
transition-duration: 1s;
border-bottom:1px solid #a49174;
width:100vw!important;
border-left:0;
background-color:none;
background:none!important;
padding-top:20px !important ; padding-bottom:20px !important ;
}
.menu-home li:first-child {border-top:0px solid #a49174;}
.menu-home li:hover {
text-align:center!important;
transform: none;
width:100vw!important;
overflow:hidden;
}
.menu-home a {text-align:center!important;width:100%!important;padding-bottom:0!important; color:#443828!important; font-size:18px!important; text-decoration:none}
}
@media only screen and (max-width:768px) {
#menumobile {display:block !important}

}

@media only screen and (max-width:600px)  and (orientation: portrait) {
.menu-home a {font-size:14px!important;}
}
@media only screen and (max-width:500px) {
}