| Current File : /home/cideo/sainchargny/wp-content/themes/astra/customstyles.css |
body {
background-color: #efefef;
margin: 2vw;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*.animated {
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}*/
/*.animated > * {
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}*/
/*.animated > .elementor-shape {
-webkit-backface-visibility: visible !important;
}*/
/*.elementor-shape {
z-index: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);}*/
.thecursor {
opacity:0;
position: fixed;
width: 50px;
height: 50px;
border-radius: 100%;
background-color: #D6A461;
z-index: 9999;
display: block;
transform: translateX(-100%) translateY(-100%) scale(0);
pointer-events: none;
transition: opacity .3s ease , transform .3s ease;
}
.cursoron{ opacity:1; transform: translateX(-100%) translateY(-100%) scale(1);}
.pophover{ transform: translateX(-100%) translateY(-100%) scale(0.5);}
.elementor-editor-active #masthead{ position:relative;}
.home #masthead{ position:absolute !important;}
.disable-hover {
pointer-events: none !important;
}
.cursorchange{ cursor:none;
pointer-events: auto !important;
}
/*.disable-hover .popactive {
pointer-events: auto;
}*/
.home #navcont { background-color: transparent !important;}
#menumobile {
visibility: hidden;
position: fixed;
left: 0px;
right: 0px;
bottom: 0;
top: 0;
height: 100vh;
/* width: 100%; */
background-color: #fff;
transition: all .5s ease;
opacity: 0;
pointer-events: none;
background-image: url(assets/images/S.jpg);
background-size: cover;
background-position: 0% 70%;
}
#animbox{
-webkit-transform: translateZ(10px);
transform: translateZ(10px);}
#trigmenumob{background-image: url(assets/images/close@2x.png); background-position: 50% 100px; background-size: contain; background-repeat: no-repeat;
transition: all .5s ease .3s;
cursor: pointer;
}
#trigmenumob img{
transition: all .5s ease .3s;
}
.menuopen #trigmenumob img{
transition: all .5s ease .3s;
opacity: 0;}
.menuopen #trigmenumob{ background-image: url(assets/images/close@2x.png); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat;transition: all .5s ease .3s;}
.menuopen #menumobile{
visibility: visible;
display: block;
opacity:1;
pointer-events: auto;
background-position: 0% 50%;
}
.fullintro {
align-items: center;
display: flex;
}
.fullintro .paracontainer{ background-size: cover;}
#menumobile .elementor-container{
opacity:0;
transition: all .5s ease .4s;
}
.menuopen #menumobile .elementor-container{
opacity:1;
}
.oh{overflow: hidden;}
#menumobile .elementor-social-icons-wrapper {
width: 30px;
float: right;
margin-right: 30px;
}
.elementor-social-icon {
cursor: pointer;
display: inline-block;
width: 30px;
height: 30px;
}
.paracontainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*background-position: 50% 50%;*/
background-size: cover;
height: 150%;
/*-webkit-backface-visibility: hidden;*/
}
#masthead {
position: relative;
left: 0;
right: 0;
width: 100%;
}
#navcont {
width: 100% !important;
left: 0 !important;
right: 0;
}
.parallaxbg {
overflow: hidden !important;
perspective: 600px;
transform-style: preserve-3d;/*backface-visibility: hidden;*/
}
.parallaxbg .elementor-element-overlay {
top:40px !important;
}
.rondtopleft {
position: relative;
display: table;
margin: 0 auto;
z-index: 0;
/* transform: translateX(50%); */
}
.rondtopleft:before{
content:"";
background-image: url(assets/images/rond01@4x.png); height: 50px; width: 50px; background-size: cover; background-position: center center;
position: absolute;
top:-20px;
left: -20px;
z-index: -1;
}
.popbox{ /*width: 60% !important;*/ margin: 0 auto; overflow: hidden; transition: all .7s ease .2s; background-color: #ffffff; pointer-events: auto; /*border: 1px solid grey;*/}
.popbox.popnotactive{ opacity:0; pointer-events: none; height: 0px !important; transition: all .7s ease .2s;}
.popbox:after{ content:""; position: absolute; bottom: 0; width:10%; height: 1px; background-color: #d6a461; margin: 0px auto; left: 0; transition: all .7s ease 0.5s;
right: 0;}
.popcontent{ transition: all .7s ease 0.2s; opacity: 0; overflow: hidden;}
.popcontent img{ border-radius:50%; margin-bottom: 15px;}
/*.popactive .popcontent{ opacity:1;}*/
.popcontent::after {
content: "";
top: 0;
bottom: 0;
background-color: #e3a334;
width: 1px;
position: absolute;
left: 50%;
transform: rotate(15deg);
z-index: -1;
}
.popcol{max-width:60%;}
.popcontent p { background-color: #ffffff; margin: 50px 0 50px 0;}
.showcontent{opacity: 1;}
.imgpopcont{ position: fixed; bottom: 0; left: 0; right: 0; height: 100vh; width: 100vw;}
.popbox:hover .popcontent{ }
.parabox {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*-webkit-backface-visibility: hidden;*/
}
.popactive{ transition: all .7s ease .2s;}
.popbox.popactive::after{ opacity:0; transition: all .7s ease 0.2s;}
.popbox h2{ transition: all .7s ease .5s; }
.popactive h2{font-size:30px !important; transition: all .7s ease .2s;}
.popactive { z-index: 100;
/*cursor: url(assets/images/close@2x.png), auto;*/
}
.elementor-section-wrap {
/* perspective: 600px;
transform-style: preserve-3d;*/
}
.bouton-a a {
position: relative;
}
.bouton-a a::after {
content: "";
width: 40px;
height: 20px;
/* background-color: #000000; */
position: relative;
right: 0;
top: 3px;
margin-top: 0px;
/* transform: translateY(-50%); */
background-image: url(assets/images/Line.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
display: inline-block;
margin-left: 10px;
}
.loader
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #ffffff;
opacity: 1;
transition: all .5s ease .2s;
-webkit-backface-visibility: hidden;
pointer-events: none;
}
.loader.loaded{ opacity:0;}
.elementor-editor-active .loader {
display: none;
}
.custom-cursor{ width:32px; height: 32px;
background-color: black; border-radius: 50%; position: absolute;}
.bouteille-card img{ transform: scale(.9); transition: all .7s ease; width: auto !important;}
.bouteille-card:hover img{transform: scale(1);}
.bouteille-card .ae-element-post-title {
transition: all .7s ease;
z-index: 1;
position: relative;
}
.bouteille-card:hover .ae-element-post-title{ letter-spacing: 2px;}
.lienfichetechnique a, .lienboutique a{display: block !important; transition: all .5s ease;}
.lienfichetechnique a:hover, .lienboutique a:hover{ letter-spacing: 1px;}
.lienfichetechnique::after {
content: "";
height: 20px;
width: 20px;
background-image: url(assets/images/pdf.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
display: block;
float: right;
position: absolute;
top: 20px;
right: 15px;
}
.lienboutique::after {
content: "";
height: 20px;
width: 20px;
background-image: url(assets/images/Bag.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
display: block;
float: right;
position: absolute;
top: 20px;
right: 15px;
}
.elementor-button:focus, .elementor-button:hover, .elementor-button:visited {
opacity: 1;
}
.elementor-nav-menu img {
width: 22px;
margin-top: -2px;
}
.elementor-shape {
width: 104%;
left: -25px;
}
.titre-cuvee-bloc{}
.titre-cuvee-bloc::after {
content: "";
background-image: url(assets/images/rond01@4x.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
height: 80px;
width: 80px;
top: -28px;
left: 20%;
position: absolute;
right: 20%;
margin: 0 auto;
z-index: 0;
}
.titre-page h2 {
display: inline-block;
position: relative;
overflow: visible;
line-height: 1.2em !important;
}
.titre-page h2{animation-duration: 2s;
animation-delay: .5s;
animation-fill-mode: both;
animation-name: animtitre;
animation-timing-function: cubic-bezier(.54,.01,.41,.99);}
.titre-page h2::after {
content: "";
background-image: url(assets/images/rondbig.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
position: absolute;
top: -30px;
bottom: -30px;
left: -50px;
/* width: 200%; */
right: -50px;
}
.titre-page h2::after {
animation-duration: 2s;
animation-fill-mode: both;
animation-delay: .5s;
animation-name: animpar;
animation-timing-function: cubic-bezier(.54,.01,.41,.99);
}
@keyframes animpar {
0% {
opacity: 0;
transform: rotate(-45deg);
}
100% {
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes animtitre {
0% {
opacity: 0;
letter-spacing: 6px;
}
100% {
opacity: 1;
letter-spacing: 2px;
}
}
@keyframes bglineanim {
0% {
opacity: 0;
top:70%;
}
100% {
opacity: 1;
}
}
@keyframes bglineanim2 {
0% {
opacity: 0;
top:100%;
}
100% {
opacity: 1;
}
}
@keyframes bglineanim3 {
0% {
opacity: 0;
bottom:-20%;
}
100% {
opacity: 1;
}
}
.bgline{ position: relative; z-index: 1;}
.bgline::after {
content: "";
position: absolute;
height: 2px;
width: 150%;
left: -25%;
right: 0;
top: 50%;
transform: rotate(-40deg);
background-color: #d7a561;
display: block;
z-index: -1;
/* border: 1px solid red; */
}
.fadeIn.bgline:after { animation-duration: 1.5s;
animation-fill-mode: both;
animation-delay: .4s;
animation-name: bglineanim;
animation-timing-function: cubic-bezier(.54,.01,.41,.99);}
.fadeInUp.bgline:after { animation-duration: 1.5s;
animation-fill-mode: both;
animation-delay: .4s;
animation-name: bglineanim;
animation-timing-function: cubic-bezier(.54,.01,.41,.99);}
.bgline2 { position: relative; z-index: 1;}
.bgline2::after {
content: "";
position: absolute;
height: 2px;
width: 160%;
left: -30%;
right: 0;
top: 50%;
transform: rotate(-138deg);
background-color: #d7a561;
display: block;
z-index: -1;
/* border: 1px solid red; */
}
.fadeIn.bgline2:after { animation-duration: 1.5s;
animation-fill-mode: both;
animation-delay: .4s;
animation-name: bglineanim2;
animation-timing-function: cubic-bezier(.54,.01,.41,.99);}
.fadeInUp.bgline2:after { animation-duration: 1.5s;
animation-fill-mode: both;
animation-delay: .4s;
animation-name: bglineanim2;
animation-timing-function: cubic-bezier(.54,.01,.41,.99);}
.bgline3 { position: relative; z-index: 1;}
.bgline3::after {
content: "";
position: absolute;
height: 2px;
width: 120px;
right: -30px;
bottom: 15px;
transform: rotate(-40deg);
background-color: #d7a561;
display: block;
/* z-index: -1; */
/* border: 1px solid red; */
}
.fadeIn.bgline3:after { animation-duration: 1.5s;
animation-fill-mode: both;
animation-delay: .4s;
animation-name: bglineanim3;
animation-timing-function: cubic-bezier(.54,.01,.41,.99);}
.fadeInUp.bgline3:after { animation-duration: 1.5s;
animation-fill-mode: both;
animation-delay: .4s;
animation-name: bglineanim3;
animation-timing-function: cubic-bezier(.54,.01,.41,.99);}
.bgline4 { position: relative; z-index: 1;}
.bgline4::after {
content: "";
position: absolute;
height: 2px;
width: 120px;
left: -30px;
bottom: 15px;
transform: rotate(-140deg);
background-color: #d7a561;
display: block;
/* z-index: -1; */
/* border: 1px solid red; */
}
.fadeIn.bgline4:after { animation-duration: 1.5s;
animation-fill-mode: both;
animation-delay: .4s;
animation-name: bglineanim3;
animation-timing-function: cubic-bezier(.54,.01,.41,.99);}
.fadeInUp.bgline4:after { animation-duration: 1.5s;
animation-fill-mode: both;
animation-delay: .4s;
animation-name: bglineanim3;
animation-timing-function: cubic-bezier(.54,.01,.41,.99);}
/*------------------------------------*/
/*---------------MEDIA-QUERY---------------------*/
@media screen and (min-width: 992px) {
.menuopen #menumobile{
visibility: hidden;
display: block;
opacity:0;
pointer-events: none;
}
}
@media screen and (max-width: 600px) {
.titre-page h2::after {
content: "";
background-image: url(assets/images/rondbig.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
position: absolute;
top: -15px;
bottom: -15px;
left: -50px;
/* width: 200%; */
right: -50px;
}
.elementor-shape {
width: 100%;
left: 0;
}
}