/*
    Theme Name:Lotus Marketing
    Theme URI:http://www.lotusmarketing.ca
    Description:Template par Lotus Marketing
    Version:1.0
    Author:Etienne Dupuis (Lotus Marketing)
    Author URI:http://www.lotusmarketing.ca
*/

/* Wordpress */
img.alignright {float:right; margin:0 0 2em 2em}
img.alignleft {float:left; margin:0.5em 3em 1.5em 0;}
img.aligncenter {display:block; margin-left:auto; margin-right:auto}

/* GLOBAL */
html, body { margin:0; padding:0; font-size:1.1em; font-family: 'Montserrat', sans-serif; font-weight:300; color:#444; line-height: 1.35em; height:100%; }

a { color: #7ac142; text-decoration: none; transition: 0.4s; }
a:hover { color: black; transition: 0.4s; }

strong > a, a > strong { background: #7ac142; color:white; padding: 1em 2em; transition:0.3s; margin:2em 0; display:inline-block; border-radius: 3px; font-size:0.8em; font-weight:300; }
strong > a:hover, a > strong:hover { color:white; background: #5aa122; }

h1 { font-weight: 900; line-height: 100%; font-weight: 300; line-height: 100%; font-family: 'Parisienne', cursive; color: #0397d6; font-size: 3.5em; }
h2 { font-weight: 900; text-transform: uppercase; margin-top: 3em; line-height: 100%; }
h3 { font-weight: 900; margin-top: 3em;  }

img { max-width:100%; height:auto; }
strong { font-weight: 700; }
hr { height:0; margin: 2em 0; border:0; border-bottom: 1px solid #ddd; }
table { border-collapse: collapse; width: 100%; }
table.aligncenter { text-align:center;}
table tr:nth-child(odd) { background: #eee;  }
table tr td { padding: 1em; vertical-align: top; }

blockquote { background: rgba(3, 151, 214, .1); border-left: 3px solid #0397d6; margin: 3em 0 3em 3em; padding: 1em 2em; color: #0397d6; }

.wrapper { max-width: 1100px; margin:0 auto; padding: 0 75px; position:relative; }
.center { text-align:center; }
.clear { clear:both; }
::selection { background: #00a4e4; color: white; }

.content { padding: 3em 0; background: url('images/bg.png') -300px 100% no-repeat; }

/* MENU */
.menu { position:fixed; background: rgba(255,255,255,.5); width: 100%; text-align:right; font-size: 0.9em; z-index: 5000;  }
.menu .hamburger { width: 50px; padding: 20px 20px 10px 20px; cursor:pointer; display:none; }
.menu .hamburger div { height: 2px; background: #666; margin-bottom: 10px; }
.menu .wrapper { padding-right: 0; }
.menu.opaque { background: rgba(255,255,255,.9);  box-shadow: 0 0 3px rgba(0,0,0,.5); }
.menu.opaque ul.firstlevel > li > a { padding: .65em 2em; }
.menu.opaque ul.firstlevel > li > a.language { color: rgba(0,0,0,.3); }

.menu.opaque .logo { height: 35px; transition:0.7s; }
.menu .logo { float:left; margin-top: 5px; height: 52px; width: 105px; transition:0.8s; background: url(images/logo-dark.png) 0 50% no-repeat; background-size: contain;}
.menu ul { padding: 0; margin:0; }
.menu ul.firstlevel { text-transform: uppercase; }
.menu ul.firstlevel li { display:inline-block; }
.menu ul.firstlevel li a { color: #666; padding: 1em 2em; display:inline-block;  }
.menu ul.firstlevel li a:hover, .menu ul.firstlevel li:hover a { background: #0397d6; color:white !IMPORTANT;}
.menu ul.firstlevel li a.language { color: rgba(0,0,0,.5); }
.menu ul.secondlevel { opacity:0; visibility: hidden; transition:0.3s; position:absolute; background: #0397d6; width: 157px; padding-top: 70px; top:0; z-index:-10; text-align:left; text-transform: none; font-size: 0.75em; box-shadow: 1px 1px 3px rgba(0,0,0,.3); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.menu ul.secondlevel li { display:block;  line-height: 1.25em;}
.menu ul.secondlevel li a {color:white; display:block; }
.menu ul.secondlevel li a:hover { background: #147ba7;}
.menu ul.firstlevel li:hover ul { display:block; opacity:1; visibility: visible; transition:0.3s;  }


/* BANNER */
.banner { background: #aaa url(images/banner.jpg) 50% 50% no-repeat; background-size:cover; height: 400px; text-align:center; /* box-shadow: inset 0 40px 60px 0px rgba(0,0,0,0.5); */ }
.banner .title { color:#444; font-weight: 900; font-size: 2.75em; line-height: 1em; text-transform: uppercase; padding-top:200px; /* text-shadow: 1px 1px 2px rgba(0,0,0,.2);*/ }
.banner .slogan { padding-top: 300px; width: 300px; text-align:left; }
.banner .slogan .ticavie { font-family: 'Parisienne', cursive; color:#0397d6; font-size: 4em; }
.banner .slogan hr { width: 100px; border-bottom: 2px solid #0397d6; }
.banner .slogan .subtitle { color:#444; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 2.75em; line-height: 1em; }

.accueil .banner { height: 800px; }

/* ACCUEIL - SERVICES */
.accueil .services { background: #eee; clear:both; text-align:center; padding: 5em 0; }
.accueil .services .wrapper { display:flex; }
.accueil .services .service { border: 1px solid #0397d6; padding: 1em 1em 3em 1em; margin:.5em; position:relative; flex-basis: 0; flex-grow: 1;}
.accueil .services .service:nth-of-type(1) { margin-left:0; }
.accueil .services .service:nth-of-type(4) { margin-right: 0; }
.accueil .services .service .padding { padding: 1em; }
.accueil .services .service img { position:relative; margin-top: -35px; background: #eee; padding: 0 35px; }
.accueil .services .service .title { font-weight: 900; color: #0397d6; margin: 1em 0; text-transform:uppercase; }
.accueil .services .service .intro { font-size: 0.85em; }
.accueil .services .service strong { background: #eee; padding: 0 10px; position:absolute; border-radius: 5px; bottom: -50px;  left: 50%; transform: translateX(-50%); }
.accueil .services .service strong a {  padding: 0.5em 1em; width: 120px;   }

/* ACCUEIL - PLUS D'INFORMATION */
.moreinfo { background: url(images/bg-accueil.jpg) 50% 50% no-repeat; min-height: 800px; padding-top: 100px;}

/* SERVICE */
.service .banner .title { background: url() 0 100% no-repeat; text-align:left; padding: 200px 0 30px 200px; width: 50%; margin:0 auto; }
.service .content { background: url(images/bg.png) 0 50% no-repeat; padding-top: 6em; }
.service .gauche { float:left; width: 35%; font-family: 'Parisienne', cursive; color:#0397d6; font-size: 3em; margin-top:.35em; line-height: 0.85em; }
.service .gauche .hr { border-bottom: 3px solid #0397d6; width: 160px; margin-top: 1em; }
.service .droite { float:right; width: 60%; }

.service .approche { background: #eee; clear:both; text-align:center; padding: 4em 0; }
.service .titre { font-family: 'Parisienne', cursive; color:#0397d6; font-size: 3em; line-height: 100%; }
.service .hr { border-bottom: 3px solid #0397d6; width: 150px; display:inline-block; margin: 1em 0; }

.service .approche .flex { display:flex; }
.service .approche .hr { margin: 3em 0 4em 0; }
.service .approche .service { border: 1px solid #0397d6; padding: 1em 1em 3em 1em; margin:.5em; position:relative; flex-basis: 0; flex-grow: 1; }
.service .approche .service:nth-of-type(1) { margin-left:0; }
.service .approche .service:nth-of-type(4) { margin-right: 0; }
.service .approche .service .padding { padding: 1em; }
.service .approche .service img { position:relative; margin-top: -35px; background: #eee; padding: 0 35px; }
.service .approche .service .number { display:inline-block; font-weight: 900; color: #0397d6; font-size: 4em; padding: 0 .5em; background: #eee; margin: -1em 0 .5em 0; position:relative; top:-2px; }
.service .approche .service .title { font-weight: 900; color: #0397d6; margin: 1em 0; text-transform:uppercase; }
.service .approche .service strong { background: #eee; padding: 0 10px; position:absolute; border-radius: 5px; bottom: -50px;  left: 50%; transform: translateX(-50%); }
.service .approche .service strong a {  padding: 0.5em 1em; width: 120px;   }

/* A PROPOS */
.apropos .content { background-position-y: 50px; }
.apropos .carousel img { padding: 0 40px; }


/* CONTACT */
.contact .right { float: right; width: 40%; text-align: center;}
.contact .left { float:left; width: 50%; }
.contact #map { height: 600px; border: 1px solid #ccc; border-radius: 14px; box-shadow: 2px 2px 3px rgba(0,0,0,.1); margin-bottom: 30px;  }
.contact .mediassociaux a { margin: 25px 25px; }
.contact .mediassociaux a img { filter: grayscale(100%); transition:0.6s; height: 40px; width: 40px; }
.contact .mediassociaux a img:hover { filter: grayscale(0%); transition:0.6s; }

/* FOOTER */
.footer .wrapper { border-top: 1px solid #7ac142; margin-top: 3em; padding-top: 1em; padding-bottom: 1em; }
.footer { text-align: right; line-height: 0.75em; color: #818285; font-size: 0.85em; }
.footer a { margin-left: .25em; }
.footer .logo { float:left; }
.footer .border { height: 10px; background: #7ac142; background: linear-gradient(90deg, #0397d6 0%, #0397d6 34%, #7ac142 34%, #7ac142 100%); }


/* RESPONSIVE */
@media only screen and ( max-width:1200px ) {
  .service .approche { padding: 4em 0 0.1em 0; }
  .service .approche .flex { display:block; }
  .service .approche .service { margin-bottom:7em; }
}

@media only screen and ( max-width:1000px ) {
  .wrapper { padding: 0 25px;}
  .service .banner .title { width: auto; }
  .accueil .services .wrapper { display:block; }
  .accueil .services .service { margin: 0 .5em 5em .5em !IMPORTANT; }
}

@media only screen and ( max-width:850px ) {
  .service .banner .title { font-size: 2em; }
}

@media only screen and ( max-width:650px ) {
  /* .menu a {  color:#666 !IMPORTANT;  } */
  .menu { background: rgba(255,255,255, 1); box-shadow: 0 0 3px rgba(0,0,0,.5);  }
  .menu.opaque .logo { height: 52px; }
  .menu .hamburger { display:inline-block; }
  .menu ul.firstlevel { display:none; text-align:left; }
  .menu ul.firstlevel li { display:block; }
  .menu ul.secondlevel { opacity:1; visibility: visible; position:static; width: auto; box-shadow: none; padding-top: 0; text-align:left; padding-left: 25px; background: none; }
  .menu ul.firstlevel li a:hover, .menu ul.firstlevel li:hover a { background: none; color:#666 !IMPORTANT;}
  .menu ul.secondlevel li a, .menu ul.secondlevel li a:hover, .menu ul.secondlevel li:hover a { background: none; color:#666 !IMPORTANT;}

  .service .banner .title { text-align:center; background: none !IMPORTANT; padding:200px 0 0 0; }
  .contact .right { float: none; width: auto; text-align: center; margin-top: 3em; }
  .contact .left { float:none; width: auto; }
}


@media only screen and ( max-width:550px ) {
  .banner .slogan { padding-top: 317px; }
  .banner .slogan .ticavie { font-size:2.5em;}
  .banner .slogan .subtitle { font-size: 1.25em; }
  .moreinfo h2 { font-size: 1.15em; }
  .service .banner .title, .banner .title { font-size: 1.25em; }
  .service .gauche, .service .droite { float:none; width: auto; }
  .service .banner .title { padding:197px 0 0 0; }
  .banner .title { padding:207px 0 0 0; }
  .footer { text-align: center; line-height: 100%; }
  .footer a { display: inline-block; }
  .footer .logo { float:none; margin: 1em 0; }
}

@media only screen and ( max-width:350px ) {
  .contact .mediassociaux a { margin: 25px 10px; }
}

/* POUR L'IMPRESSION */
@media print { }