/* Main Css */

html, body {
  font-size: 20px;
  color: #5F5F5F;
  font-family: 'Josefin Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Josefin Sans', sans-serif;
}

h1 {
  font-size: 1.8rem;
  font-weight: 700;
}

h2 {
  font-size: 1.3rem;
}

/* Chrome Fix */
li {
    list-style-position: inside;
}

#MobileNav {
  display: none;
  position: fixed;
  z-index: 999;
  background-color: #FFF;
  width: 95%;
  height: 100vh;
  overflow: auto;
  right: -100%;

  -webkit-transition: right 0.5s ease;
  -moz-transition: right 0.5s ease;
  -o-transition: right 0.5s ease;
  -ms-transition: right 0.5s ease;
  transition: right 0.5s ease;
}
  #MobileNav.open { right: 0; }
  #MobileNav ul,
  #MobileNav ul li {
    display: block;
    margin: 0;
    padding: 10px 3px;
    list-style: none;
  }

  #MobileNav li {
    padding: 10px 0;
  }
    #MobileNav li.en_fr {
      text-align: center;
    }

    #MobileNav li a img {
      max-width: 32px;
    }



#MobileNavTrigger {
  display: none;
  position: absolute;
  z-index: 99;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer;
  color: #FFF;
}

#MobileClose {
  cursor: pointer;
}



#Banner.row {
  max-width: 100%!important;
}
  #Banner.row .columns {
    padding:0;
  }

.banner { display: block; }
.banner-mobile { display: none; }



.row { max-width: 1200px; }

.camet-btn {
  display: inline-block;
  background-color: #59A1D5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #FFF;
  text-decoration: none;
  width: 90%;
  padding: 10px;
  text-align: center;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.25);
}
  .camet-btn:hover {
    color: #FFF;
    background-color: #5090bf;
  }

.btn-orange {
  background-color: #F87837;
}
  .btn-orange:hover {
    background-color: #cc632e;
  }

.btn-green {
  background-color: #81AC57;
}
  .btn-green:hover {
    background-color: #638443;
  }

.btn-outline-orange {
  background-color: #FFF;
  border: 3px solid #F87837;
  color: #F87837;
}
  .btn-outline-orange:hover {
    background-color: #F87837;
    color: #FFF;
  }




.font-JosefinSans {
  font-family: 'Josefin Sans', sans-serif;
}



.section-blue > .row,
.section-lightblue > .row,
.section-green > .row,
.section-lightgreen > .row,
.section-yellow > .row,
.section-lightyellow > .row,
.section-orange > .row,
.section-white > .row {
  padding: 80px 0;
}


.section-blue {
  background-color: #58A0D3;
  color: #FFF;
}
.section-lightblue {
  background-color: #59A1D5;
  color: #FFF;
}
.section-green {
  background-color: #81AC57;
  color: #FFF;
}
.section-lightgreen {
  background-color: #9ABC78;
  color: #FFF;
}
.section-yellow {
  background-color: #FBAA3D;
  color: #FFF;
}
.section-lightyellow {
  background-color: #FAD158;
  color: #FFF;
}
.section-orange {
  background-color: #F87837;
  color: #FFF;
}
.section-white {
  background-color: #FFF;
}

.section-yellow_orange {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,2989d8+50,7db9e8+100 */
  background: #FBAA3D; /* Old browsers */
  background: -moz-linear-gradient(left, #FBAA3D 0%, #FBAA3D 50%, #F87837 50%, #F87837 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #FBAA3D 0%,#FBAA3D 50%,#F87837 50%,#F87837 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #FBAA3D 0%,#FBAA3D 50%,#F87837 50%,#F87837 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBAA3D', endColorstr='#F87837',GradientType=1 ); /* IE6-9 */
  color: #FFF;
}


/* Navigation */
#StickyNav { z-index: 999; text-transform: uppercase;}
#StickyNav a img {
  display: inline-block;
  max-width: 60px;
  max-height: 60px;
  vertical-align: middle;
  margin-top: -10px;
}
  nav ul li {
      display: inline-block;
      padding: 20px 2em;
      /* line-height: 90px; */
      width: 200px;
      font-size: 0.6em;
  }
  nav ul li:nth-child(2),
  nav ul li:nth-child(3) {
      width: 290px;
  }

  nav ul li.en_fr {
    color: #505050;
    font-weight: 300;
    font-size: 0.8em;
    width: 200px;
  }
    nav ul li.en_fr a {
      color: #B1B1B1;
    }





/* Footer */
#Footer {
  background-color: #505050;
  text-align: center;
  color: #FFF;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 14px;
}
  #FooterEnFr {
    display: inline-block;
    padding-bottom: 20px;
  }



/* Media Quiries  */
/* @media only screen and (max-width: 1450px) { */
@media only screen and (max-width: 9999px) {

  #StickyNav a img { display: block; margin: auto; margin-top: 0; padding-bottom: 10px;}
  nav ul li {
    line-height: 1em;
    width: 20%;
    text-align: center;
    padding: 10px 0;
    width: 160px;
  }

  nav ul li:nth-child(2),
  nav ul li:nth-child(3) {
      width: 200px;
  }
    /* nav ul li.en_fr { display: none; } */


}


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

  #StickyNav a img { display: block; margin: auto; margin-top: 0; padding-bottom: 10px;}
  nav ul li {
    line-height: 1em;
    width: 20%;
    text-align: center;
    padding: 10px 0;
    width: 12%;
  }
    nav ul li.en_fr { display: none; }


}

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

  #MobileNav { display: block; }

  .banner { display: none; }
  .banner-mobile { display: block; }

  #MobileNavTrigger { display: block; }

  #StickyNav { display: none; }

  /* #StickyNav a img { max-height: 48px; }
  nav ul li {
    font-size: 0.6em;
  } */

  #FooterEnFr {
    display: block;
    text-align: center;
    padding-top: 10px;
  }
}