/*
    Theme Name:Lotus Marketing
    Theme URI:https://lotusmarketing.ca
    Text Domain: lotus
    Description:Sur mesure
    Version:1.0
    Author:Lotus Marketing
    Author URI:https://lotusmarketing.ca
*/

/* Wordpress */
.wp-block-button__link { background:var(--bg); border-radius: .5em; color:var(--highlight); border:1px solid var(--highlight); font-family: "Public Sans", sans-serif; font-weight: 900; text-transform:uppercase; font-size:0.75em; }
.wp-block-button__link:hover { background:var(--highlight); border-radius: .5em; color:var(--bg); }
.wp-block-cover .wp-block-cover__background { border-radius: .5em;}
.wp-block-cover .wp-block-cover__inner-container .has-large-font-size { font-size: 2em !IMPORTANT; }
.wp-block-columns { margin:3em 0; }
.wp-block-columns .wp-block-column h2:first-of-type { margin-top:0; }
.wp-block-list { list-style: none; }
.wp-block-list li { margin:1em 0; position: relative; padding-left: 30px; }
.wp-block-list li::before { content: ""; position: absolute; left: -5px; top: 15px; width: 20px; height: 20px; transform: translateY(-50%); background: url("images/li.png") no-repeat center center; background-size: contain; opacity: 0.25; }

.is-style-fullbleed { color:var(--bg); background: var(--text); position: relative; box-shadow: 0 0 0 100vmax var(--text); clip-path: inset(0 -100vmax); padding:5em 0; } 

/* COLORS */
:root {
    --text: #545d5c; 
    --highlight: #b98d58;
    --bg: #faf8f4;
}

/* BASIC */
html { scroll-behavior: smooth }
html, body { margin:0; font-family: "Cormorant Infant", serif; font-weight: 300; color: var(--text); }
body { font-size:1.35em; background:var(--bg); }

a { text-decoration: none; color: var(--highlight); border-bottom:1px solid transparent; transition:0.3s; }
a:hover { border-bottom:1px solid var(--highlight); }

h1 { font-family: "Public Sans", sans-serif; font-weight: 900; font-size:3em; text-transform: uppercase; }
h2 { font-family: "Cormorant Infant", serif; font-size:2.5em; font-weight: 300; line-height: 100%; }
h3 { font-family: "Alata", sans-serif; letter-spacing: .25em; color: var(--highlight); font-size:.7em; font-weight: 300; margin-bottom: 0; text-transform:uppercase; }
h3 + h2, h3 + h1 { margin-top: 0; }
h4 { font-size:1.15em; font-weight: 900; }

strong { font-weight: 900;}

main { background: url(images/bg-lines-a.png) 0 15% no-repeat, url(images/bg-lines-b.png) 100% 45% no-repeat, url(images/bg-lines-a.png) 0 100% no-repeat; font-size:1.15em; margin-top:4em; }
main img { border-radius: .5em; }
main .prefooter img { border-radius: 0; }
.wrapper { max-width: 1400px; margin:0 auto; padding: 0 15px; }

/* MENU */
nav { text-align:center; font-family: "Alata", sans-serif; text-transform: uppercase; }
nav ul li { display:inline-block; margin:0 1em; }
nav .mainmenu { position:fixed; left:0; right:0; z-index:500; padding-top:10px; transition:0.5s; }
nav .mainmenu .desktopmenu { display:flex; }
nav .mainmenu .col.left { width:40%; text-align: right; }
nav .mainmenu .col.middle { width:20%; text-align: center; }
nav .mainmenu .col.middle a {margin:.5em 0;}
nav .mainmenu .col.middle a img { transition:0.5s; }
nav .mainmenu .col.right { width:40%; text-align: left; }
nav .mainmenu a { color:white; margin:1em; display:inline-block; font-size:0.65em; letter-spacing: .1em; font-weight: 300; }
nav .mainmenu a:hover { color:var(--highlight) !IMPORTANT;}

nav.scrolled .mainmenu { background:var(--bg); box-shadow: 0 0 5px rgba(0,0,0,.5); }
nav.scrolled .mainmenu img {  filter: invert(60%); height: 45px; }
nav.scrolled .mainmenu a { color:var(--text); }

nav .mobilemenu { display:none; }

nav .mobilemenu .hamburger { width: 75px; cursor:pointer; float:right; margin-right:1em; }
nav .mobilemenu .logo { margin-left: 75px; }
nav .mobilemenu .hamburger div { background:white; margin-top:15px; height:3px; }
nav.scrolled .mobilemenu .hamburger div { background:var(--text); }

nav .sidebar { background: var(--text); width: 96%; padding: 2%; position:fixed; z-index: 9999; right:-103%; top:0; bottom:0; overflow-y: scroll; transition:1s; transition-timing-function: cubic-bezier(.27,1.05,.73,1); }
nav .sidebar .logo { width: 250px; }
nav .sidebar a { color:var(--bg); font-weight: 500; }

nav .sidebar ul { list-style-type: none; padding:0; }
nav .sidebar.show { right:0; transition:1s; transition-timing-function: cubic-bezier(.27,1.05,.73,1); }
nav .sidebar .close { position:absolute; cursor:pointer; right: 20px; top:20px; width: 50px; height: 50px; }
nav .sidebar .close div { background: var(--bg); width: 40px; height: 2px; margin: 12px 0; border-radius:1px;  transition:.5s; position:absolute; }
nav .sidebar .close div:nth-of-type(1) { transform: rotate(-45deg); transition:1s; }
nav .sidebar .close div:nth-of-type(2) { transform: rotate(45deg);  transition:.3s; }
nav .sidebar a { display:inline-block; margin-top:1em; }
nav .sidebar .medias { margin-top:3em; }


/* BANNER */
.banner { height: 400px; background: var(--text) 50% 50%; background-size:cover; position:relative; }
.banner .wave { position: absolute; bottom:0; width:100%; }
.banner .titre { position:absolute; top:50%; left:0; right:0; z-index:100; color:var(--bg); text-align: center; font-size:4em; }
.banner .overlay { position:absolute; top:0; left:0; right:0; bottom:0%; background: linear-gradient(rgba(0,0,0,.5), transparent); z-index:1; }

/* ACCUEIL */
.t-home .banner { height: 800px; overflow:hidden; }
.t-home .banner .titre { position:absolute; top:40%; }
.banner video { height: auto; min-width: 100%; min-height: 100%; position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.t-home .intro { display:flex; overflow:hidden;}
.t-home .intro .col { width: 40%; }
.t-home .intro .col.middle { width: 20%; }
.t-home .intro .col img { width: 140%; border-radius: .5em; }
.t-home .intro .col.right img { position:relative; left:-40%; }

.t-home .vins { width: 90%; margin:3em 0; }
.t-home .vins .vin { display:flex; margin:5em 0; flex-wrap:wrap; }
.t-home .vins .vin .col { width: 50%; }
.t-home .vins .vin .col.left div { position:relative; }
.t-home .vins .vin .col.left div .splash { position:absolute; left:50%; transform: translateX(-50); z-index:-1; animation: grow 15s infinite ease-in-out; }
.t-home .vins .vin .col.left div .bouteille { position:relative; left:50%; transform: translateX(-50%); z-index:10;  }
.t-home .vins .slick-arrow { border: 1px solid var(--highlight); border-radius: 50%; padding:1em; margin:1em; transition:0.5s; position:absolute; bottom:25%; z-index:100; }
.t-home .vins .slick-arrow.snext { right: -10%; }
.t-home .vins .slick-arrow:hover { background: var(--highlight); color:var(--bg); cursor:pointer; }

.t-home .galerie a { margin: 1em; border-radius: .5em; }
.t-home .galerie a:hover img { transform: scale(1.1); }
.t-home .galerie a img { width:100%; transition:0.3s; }

.t-home .fin { min-height: 800px; overflow:hidden; }
.t-home .fin .bg { position:absolute; right:0; z-index:-1; }
.t-home .fin .boite { border:1px solid var(--highlight); padding:2em; background:var(--bg); width: 22em; margin:10em 0 0 15%; display:inline-block; font-size:0.85em; border-radius: 0.5em;}
.t-home .fin .boite h1 { margin:0; }


/* POINTS DE VENTES */
.t-pointsdeventes .boites { margin: 3em 0; display:flex; flex-wrap:wrap; }
.t-pointsdeventes .boites .boite { display:inline-block; width: 25%; border:1px solid var(--highlight); background:var(--bg); padding:1em 2em; margin:1em; border-radius: .5em; box-sizing: border-box; }
.t-pointsdeventes .boites .boite .titre { font-family: "Alata", sans-serif; letter-spacing: .25em; text-transform: uppercase; color:var(--highlight); }

/* VINS */
.t-vins .vins { display:flex; flex-wrap: wrap; }
.t-vins .vins .vin { width: 28.3%; padding: 1em; margin:2.5%; text-align: center; background: rgba(255,255,255,.5); border-radius: .5em; box-sizing: border-box; }
.t-vins .vins .vin:hover { transform: scale(1.01); box-shadow: 0 0px 30px rgba(0,0,0,.05); background:white;}
.t-vins .vins .vin img { max-width:200px; max-height: 300px; }
.t-vins .vins .vin h3 { font-size:.6em; }
.t-vins .vins .vin h1 { font-size:.9em; color:var(--text); }

/* VIN */
.t-vin .banner { height: 175px; }
.t-vin .banner .titre { display:none; }
.t-vin .vin { display:flex; margin:5em 0; min-height:930px; flex-wrap: wrap; overflow: hidden;}
.t-vin .vin .col { width: 50%; }
.t-vin .vin .col.left { text-align: center; }
.t-vin .vin .col.left div { position:relative; text-align:center; }
.t-vin .vin .col.left div .splash { position:absolute; left:50%; transform: translateX(-50); top:50%; z-index:-1; animation: grow 15s infinite ease-in-out; }
.t-vin .vin .col.left div .bouteille { position:absolute; left:50%; transform: translateX(-50%); z-index:10; }
.t-vin .vin .col.right .details { border: 1px solid var(--highlight); border-radius: 0.5em; padding:2em; margin-top:4em; background: var(--bg); font-size:0.55em; font-family: "Public Sans", sans-serif; }
.t-vin .vin .col.right .details .detail { display:inline-block; padding:0.25em 0; }
.t-vin .vin .col.right .details .detail:first-of-type { font-weight: bold;}
.t-vin .vin .col.right .details .split { opacity: 0.5; margin:0 1em; border-right: 1px solid var(--highlight);  }
.t-vin .vin .col.right .details .split:last-of-type { display:none; }

@keyframes grow { 0% { transform: translateX(-50%) scale(0.9);  } 50% { transform: translateX(-50%) scale(1);  } 100% { transform: translateX(-50%) scale(0.9);  } }

/* FOOTER */
.prefooter { display: flex; flex-wrap: wrap; }
.prefooter .col { padding: 3em 3%; width: 27.3%; text-align: center; }
footer { background-attachment: fixed; background-size: 120%; background-position: 50% 100%; position:relative; color:var(--bg); }
footer .wave { position: absolute; top:0; width:100%; }
footer .wrapper { padding-top:12em; padding-bottom:12em; text-align: center; }
footer .wrapper .medias a { color:var(--bg); font-size:2.5em; margin:1em; }
footer .copyrights { font-family: "Alata", sans-serif; font-size:0.7em; letter-spacing: .25em; margin-top:3em; }
footer .lotus { position:absolute; bottom: 1em; right:1em; color:white; font-size:0.9em; opacity:0.6; }
footer .lotus:hover { opacity:1; }

/* RESPONSIVE */
@media only screen and ( max-width:1500px ) {
    footer { background-size:auto 60%; }
}

@media only screen and ( max-width:1440px ) {
    nav .mainmenu a { vertical-align: bottom; }
    .t-home .vinswrapper { padding:0; }
}
@media only screen and ( max-width:1050px ) {
    .prefooter .col { width: 100%; padding: 1em 0; }
}
@media only screen and ( max-width:1000px ) {
    nav .mainmenu { text-align:left; }
    nav .mainmenu .desktopmenu { display:none; }
    nav .mobilemenu { display:block; }
    
    .t-pointsdeventes .boites .boite { width: 40%; }
    .t-vins .vins .vin { width: 45%; }
    .t-home .intro { flex-wrap: wrap;}

    .t-home .intro .col { width: 47.5%; }
    .t-home .intro .col.middle { width: 5%; }
    .t-home .intro .col img { width: 100%; }
    .t-home .intro .col.right img { left:0; }
}

@media only screen and ( max-width:800px ) {
    h1 { font-size:2.15em; }
    h2 { font-size:1.75em; }
    h3 {  font-size:.6em; }
    
    .t-home .vins { width: 100%; }
    .t-home .vins .vin .col { width: 100%; }
    .t-home .vins .vin .col.right { display:none; }
    .t-home .vins .slick-arrow.snext { right:0; }
    .t-home .fin .boite { width:100%; box-sizing: border-box; margin:10em 0;  }

    .t-vin main .wrapper { padding:0; }
    .t-vin .vin .col { width: 100%; }
    .t-vin .vin .col.left { min-height: 1000px; }
    .t-vin .vin .col.right { padding:0 15px; }
}

@media only screen and ( max-width:600px ) {
    nav .mobilemenu .logo { margin-left:15px; }
    nav .mobilemenu .logo img { width:140px; }
    .banner .titre { font-size:2.5em; }
    footer { background-size:auto 85%; }
    .t-pointsdeventes .boites .boite { width: 90%; }
    .t-vins .vins .vin { width: 100%; }
    .t-home .intro .col { width: 100%; }
    .t-home .galerie a { margin: 0.25em; }
}

/* POUR L'IMPRESSION */
@media print { 
    nav, footer { display:none; }
}