/*
    Theme Name:Lotus Marketing
    Theme URI:https://lotusmarketing.ca
    Description:Template par Lotus Marketing
    Version:1.0
    Author:Lotus Marketing
    Author URI:https://lotusmarketing.ca
*/

/* Orange: #eaba72
Bleu pale: #aadfef
Bleu foncé: #044757 */

/* 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:1em; font-family: 'Ubuntu', sans-serif; font-weight:300; color:#555555; line-height: 1.25; height:100%; }

.wow { visibility: hidden; }

a { color: #00a4e4; text-decoration: none; transition: 0.3s; }
a:hover { color: black; transition: 0.3s; }

strong > a, a > strong { background: #044757; color:white; padding: .45em 1em; transition:0.3s; cursor:pointer; margin:2em 0; display:inline-block; border-radius: 3px; font-size:0.8em; font-weight:300; text-transform:uppercase; }
strong > a:hover, a > strong:hover { background: #eaba72; color:white; }

h1 { color:black; font-weight: 300; font-size:2.5em; padding-bottom: .5em; line-height:normal;}
h2 { font-weight: 300; font-size: 2em; margin-top: 2em; line-height: 1.25em; }
h3 { font-weight: 300; font-size: 1.5em; margin-top: 2em; line-height: auto; }
h4 { }

img { max-width:100%; height:auto; }
strong { font-weight: 500; }
hr { height:0; margin: 4em 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: url(images/ribbon.png) 100% 50% no-repeat; padding: 160px 50px 80px 125px;  height:90px; position: relative; color: #fff; margin: 0px 0 60px 0; left: -115px; }
blockquote p { height: 120px; margin:0; display:flex; align-items: center; overflow:hidden; font-size:1.15em; }
.clear { clear:both; }

.wrapper { max-width:1100px; margin:0 auto; padding: 0 50px; }
.content { padding: 2em 0 5em 0; line-height: 1.5em; min-height:400px; overflow:hidden; }
.content ul li { padding: 0.5em; }

/* MENU */

.menu { background: #fff; padding: 1em 0 0 0; font-size: 0.9em; font-weight: 500; position:fixed;  width: 100%; box-shadow: 0 0 3px rgba(0,0,0,0.3); height: 90px; z-index:9999; }
.menu .logo { width: 175px; }
.menu .wrapper > ul { margin: 0; padding:0; display:inline-block; font-size: 0.8em; float:right; margin-top: 3.75em; }
.menu .wrapper > ul.middle { padding: 0 20px; position:relative; z-index: 1500; }
.menu .wrapper > ul > li { display:inline-block; letter-spacing: 2px; text-transform: uppercase; color:white; }
.menu .wrapper > ul > li > a { color:#044757; padding: 2em 1.5em;}
.menu .wrapper > ul > li > a:hover { color:#eaba72; }
.menu .wrapper > ul > li:hover > ul { display:block;}
.menu .wrapper > ul > li > ul { display:none; position:absolute; margin-top: 10px; padding-top: 25px; z-index:999; background: #044757; padding: 1em 2em; text-align:left; }
.menu .wrapper > ul > li > ul > li { display:block; text-transform: none; padding: 0.5em 0; }
.menu .wrapper > ul > li > ul > li a { color:white; padding: 0.15em 0; display:block; font-size: 1.15em; letter-spacing: normal; }
.menu .wrapper > ul > li > ul > li a:hover { color:#ccc; }

.menu .hamburger { display:none; width: 65px; float:right; cursor:pointer; }
.menu .hamburger div { background:#044757; height: 3px; margin-top: 15px; display:none; }

/* BANNIÈRE */
.home .banner { height: 600px; background: url(images/banniere.jpg) 50% 100% no-repeat; background-size: cover; text-align:center; padding-top:110px;}
.home .banner span, .innerbanner span { margin-top:175px; border: 8px solid white; padding: 1em; width: 400px; display:inline-block; color:white; text-transform: uppercase; font-weight: 700; font-size: 2em;  }

.innerbanner { background: #eaba72; font-size: 1.5em; text-transform: uppercase; color:white; font-weight: 700; padding: 125px 0 1em 0;  }

/* ACCUEIL */
.home .left { float:left; width: 40%; margin-top:20px;  }
.home .left .nouvelle { padding: 1.5em; }
.home .right { float:right; width: 58%; margin-top:20px;  }
.home .left .title { background: #aadfef; }
.home .padding { padding: 1em 1.5em; }
.home .title { font-weight: 700; font-size: 1.5em; color:white; background: #eaba72; padding: 0.5em 1em;  }

/* GALERIE SUR ACCUEIL */
.galerie { background: #f5e2d4; padding: 3em 0; margin-top:2em; }


/* PAGE GALLERY */
.pagegallery .gallery a img { margin:1em; transition:0.4s; }
.pagegallery .gallery a:hover img { filter: contrast(1.5); transition:0.4s;  }
.pagegallery .gallery a img { width: 325px; height:auto; }


/* FOOTER */
.footer { background: #044757; color: #FFF; padding:1em 0; position:relative;  }
.footer .wrapper { position: relative; }
.footer .footerbg { position:absolute; top:-43px; z-index: 100; left:-700px; height: 222px; }
.footer .logo { float:left; position:relative; z-index: 200; }
.footer .aligndroite { text-align:right; }
.footer .aligndroite a { color:white; font-size: 0.85em; }
.footer .aligndroite h4 { font-size: 1.35em; margin-bottom:-15px; }

.subfooter { font-size:0.8em; padding:0.85em 0; background:#032932; color:#1a515e; position:relative; z-index:200; }
.subfooter a { color:#1a515e;}
.subfooter a.lotus { float:right; }
.subfooter a:hover { color:#FFF; }


/* RESPONSIVE */
@media only screen and ( max-width:1175px ) {
  .footer .footerbg { left: -46%; }
}

@media only screen and ( max-width:1075px ) {
  .wrapper { padding: 0 20px; }
  .menu .logo { width: 120px; }
}
@media only screen and ( max-width:975px ) {
  .menu .hamburger { display:block; }
  .menu .hamburger div { display:block; }
  .menu .wrapper > ul { margin:0; display:block; background:white; float:none; padding:1em 0; position: absolute; left: 0; right: 0;background: #eee; padding: 1em 0; top: 105px; box-shadow: 0 0 2px rgba(0,0,0,.3);}
  .menu .wrapper > ul > li { display:block; padding: 1em; font-size:1.5em; }
  .menu .wrapper > ul > li > ul { display:block; background:transparent; position:relative; margin:0 0 -37px 0;  }
  .menu .wrapper > ul > li > ul > li > a { color:#044757; font-size:0.9em; }
  .menu .wrapper > ul > li > ul > li > a:hover { color: #eaba72; }
}

@media only screen and ( max-width:800px ) {
  .home .left, .home .right { float:none; width: auto; }
}

@media only screen and ( max-width:650px ) {

   .home .banner span{ width: auto; margin-left:1em; margin-right: 1em; font-size: 1.5em; }

  .footer .footerbg, .footer .logo { display:none; }
  .footer .aligndroite { text-align:center; }
  .subfooter { text-align: center; }
  .subfooter a { display:block; float:none; }

}

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