@charset "UTF-8";
/*
Page Name: Deneigement Jean Élie
Author: Marketing Media
Author URI: http://marketingmedia.ca/
Version: 2020
*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i");
@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: top; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

* { box-sizing: border-box; vertical-align: top; }

a { text-decoration: none; transition: all 0.3s linear; }

/*General*/
body { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 16px; color: #333; line-height: 1.5; }

section { padding: 100px 0; display: flex; align-items: center; min-height: 25vh; }

.Wrap { width: 90%; margin: 0 auto; }

.Wrapper { width: 90%; max-width: 1200px; margin: 0 auto; }

.Center { text-align: center; }

img { width: 100%; height: auto; margin: 0; vertical-align: top; }

.TwoCol { display: block; }

.BlueBTN { display: inline-block; padding: 10px 15px; background: #002860; color: #FFF !important; border-radius: 3px; line-height: 1; }

.BlueBTN i { color: #0071bc; }

.Social { color: #FFF; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: #0071bc; line-height: 50px; }

.Social:hover { background: #008cc8; }

#Close { display: block; position: absolute; top: 22px; right: 20px; color: #FFF; font-size: 22px; z-index: 999; cursor: pointer; padding: 5px; text-align: center; }

#Bars { display: block; position: absolute; top: 22px; right: 20px; color: #0071bc; font-size: 22px; cursor: pointer; padding: 5px; text-align: center; }

h1 { font-size: 60px; font-weight: 600; line-height: 1; }

h1 span { display: block; font-size: 40px; font-weight: 400; }

h2 { font-size: 34px; line-height: 1.1; margin-bottom: 20px; }

h2 strong { color: #0071bc; font-weight: 600; display: block; }

h3 { font-size: 28px; }

h3 strong { color: #0071bc; font-weight: 600; }

p { margin-bottom: 15px; }

p a { color: #008cc8; border-bottom: 1px dotted #008cc8; }

strong { font-weight: 600; }

.TwoCol, .ThreeCol, .FourCol { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 20px; }

.TwoCol .Col, .ThreeCol .Col, .FourCol .Col { display: flex; align-items: center; }

.WhiteBlock .Wrapper { background-color: rgba(255, 255, 255, 0.9); }

.GreyBlock { background-color: #f0f2f2; }

.GreyBlock .Wrapper { background-color: rgba(240, 242, 242, 0.9); }

.RBottom { background-image: url(img/lines_1.svg); background-position: 98% bottom; background-repeat: no-repeat; background-size: 200px auto; }

.RTop { background-image: url(img/lines_1.svg); background-position: 98% Top; background-repeat: no-repeat; background-size: 200px auto; }

.LTop { background-image: url(img/lines_2.svg); background-position: 2% Top; background-repeat: no-repeat; background-size: 200px auto; }

.Line::after { content: ""; display: block; width: 50px; height: 4px; background: #0071bc; margin: 15px auto 10px; }

.Both { position: relative; }

.Both::before { content: url(img/lines_1.svg); display: block; position: absolute; width: 225px; height: 200px; left: 2%; top: 0; z-index: 2; }

.Both::after { content: url(img/lines_2.svg); display: block; position: absolute; width: 225px; height: 200px; right: 2%; bottom: 0; z-index: 2; }

.Both .Wrapper { position: relative; z-index: 3; }

ul.Square { padding-left: 15px; }

ul.Square li { margin-bottom: 15px; }

ul.Square li::before { content: "▪ "; color: #008cc8; width: 0.6em; margin-left: -0.6em; }

ul.Check { padding-left: 15px; }

ul.Check li { margin-bottom: 10px; }

ul.Check li::before { content: "\f00c "; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #008cc8; width: 0.6em; margin-left: -0.6em; padding-right: 10px; }

ul.FourColList { padding-left: 15px; text-align: left; margin-top: 25px; }

ul.FourColList li { margin-bottom: 15px; }

ul.FourColList li::before { content: "• "; color: #008cc8; width: 0.6em; margin-left: -0.6em; }

.Ceo { color: #999; }

.Ceo strong { display: block; font-size: 20px; color: #333; }

.Text a { color: #008cc8; border-bottom: 1px dotted #008cc8; }

/*Header*/
header { padding: 10px 0; }

header .Wrap .Logo { width: 60px; }

#Nav { display: none; align-items: center; justify-content: center; background: rgba(0, 40, 96, 0.9); position: fixed; top: 0; left: 0; z-index: 999; height: 100vh; width: 100%; }

#Nav .Menu { text-align: center; }

#Nav .Menu ul li a { color: rgba(255, 255, 255, 0.7); font-size: 20px; display: block; margin: 10px auto; text-align: center; padding: 10px 0; }

#Nav .Menu .Spacer { display: block; height: 40px; }

#Nav.Open { display: flex; }

.MainHero { background: url(img/hero.jpg) no-repeat; background-position: left center; background-size: cover; height: 650px; display: flex; align-items: center; }

.MainHero .Wrapper { padding: 60px 0; }

.MainHero .Icon { width: 70px; margin-bottom: 10px; margin-top: -38px; }

.Hero { background: url(img/hero.jpg) no-repeat; background-position: left center; background-size: cover; display: flex; align-items: center; }

.Hero .Wrapper { padding: 60px 0; }

.MainHero h1, .MainHero h2, .MainHero h3, .MainHero h4, .Hero h1, .Hero h2, .Hero h3, .Hero h4 { color: #FFF; text-transform: uppercase; background: rgba(0, 40, 96, 0.6); }

#HomeIntro .Icon { width: 40px; margin: 0 auto 10px; }

#HomeIntro .ThreeCol { margin-top: 10px; }

#HomeIntro .ThreeCol .Col { box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); transition: all 0.4s; }

#HomeIntro .ThreeCol .Col:hover { box-shadow: 0 0 0 rgba(0, 0, 0, 0.85); }

#HomeIntro .ThreeCol .Col a { display: block; position: relative; }

#HomeIntro .ThreeCol .Col a .Screen { display: Block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #002860; opacity: 0; z-index: 2; transition: all 0.3s; }

#HomeIntro .ThreeCol .Col a:hover .Screen { opacity: 0.3; }

#HomeIntro .ThreeCol .Col a:hover .Title span { color: #0071bc; }

#HomeIntro .ThreeCol .Col a .Title { position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; z-index: 3; }

#HomeIntro .ThreeCol .Col a .Title span { display: inline-block; padding: 10px 20px; background: #FFF; min-width: 80%; text-transform: uppercase; color: #333; font-weight: 600; }

.FrameBlock { position: relative; margin-bottom: 20px; }

.FrameBlock iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

/*Footer*/
footer { background: #002860; }

footer .Wrap { padding: 10px 0; }

footer .Wrap .Logo { width: 80px; margin: 0 auto 20px; }

footer .Wrap .ContactInfo { text-align: center; }

footer .Wrap .ContactInfo .Col { margin-bottom: 20px; }

footer .Wrap .ContactInfo .Col span { display: block; color: #0071bc; }

footer .Wrap .ContactInfo .Col a { color: #FFF; }

.Copy { background: #001e48; padding: 10px 0; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 14px; }

.Copy a { display: inline-block; margin-top: 10px; color: #FFF; }

.MM { display: inline-block; background: url(img/mm-logo.svg) right center no-repeat; padding-right: 115px; background-size: 110px auto; }

/*Responsive*/
/*Mobile*/
@media (max-width: 415px) { h1 { font-size: 40px; }
  h1 span { font-size: 35px; }
  h2 { font-size: 30px; }
  .MainHero { height: 490px; } }

/*Mobile - hrz*/
/*tablet*/
@media (min-width: 767px) { .TwoCol { grid-template-columns: repeat(2, 1fr); }
  .ThreeCol { grid-template-columns: repeat(3, 1fr); }
  .FourCol { grid-template-columns: repeat(2, 1fr); }
  ul.FourColList { column-count: 3; }
  .MainHero, .Hero { background-position: center; }
  .MainHero h1, .MainHero h2, .MainHero h3, .MainHero h4, .Hero h1, .Hero h2, .Hero h3, .Hero h4 { background: none transparent; } }

/*tablet - hrz*/
@media (min-width: 1100px) { /*Header*/
  header { padding: 0; }
  header .Wrap { display: flex; justify-content: space-between; align-items: center; }
  header .Wrap .Logo { width: 90px; }
  header .Wrap #Nav { display: inline-flex; align-items: flex-end; justify-content: space-between; position: relative; top: initial; left: initial; height: auto; background: none; width: auto; }
  header .Wrap #Nav .Menu { text-align: right; display: inline-flex; align-items: center; }
  header .Wrap #Nav .Menu ul { display: inline-block; margin-right: 20px; }
  header .Wrap #Nav .Menu ul li { display: inline-block; margin: 0 5px; }
  header .Wrap #Nav .Menu ul li a { color: #333; font-size: 18px; font-weight: 600; display: inline-block; padding: 0 10px; margin: 0; border-bottom: 4px solid #FFF; height: 100px; line-height: 100px; }
  header .Wrap #Nav .Menu ul li a:hover { color: #002860; border-bottom: 4px solid #999; }
  header .Wrap #Nav .Menu ul li a.This { color: #0071bc; border-bottom: 4px solid #0071bc; }
  header .Wrap #Nav .Menu .Spacer { display: none; }
  header .Wrap #Nav .Social { width: 40px; height: 40px; line-height: 40px; margin-left: 20px; }
  #Bars, #Close { display: none !important; }
  ul.FourColList { column-count: 4; }
  /*Footer*/
  footer { padding: 20px 0; }
  footer .Wrap { display: flex; align-items: center; justify-content: space-between; }
  footer .Wrap .Logo { margin: 0; }
  footer .Wrap .ContactInfo { display: inline-flex; align-items: center; justify-content: space-between; text-align: left; }
  footer .Wrap .ContactInfo .Col { margin: 0 40px 0 0; }
  .Copy .Wrap { display: flex; align-items: center; justify-content: space-between; }
  .Copy .Wrap .MM { margin: 0; }
  .FourCol { grid-template-columns: repeat(4, 1fr); } }

/*Laptop*/
@media (min-width: 1200px) { .WhiteBlock .Wrapper, .GreyBlock .Wrapper { background: none; } }

/*Desktop*/