/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

* {
  box-sizing: border-box;
}

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

html, body {
  height: 100%;
}

.wrapper {
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

h1 {
  background: url(../img/logo-canoe.png) center no-repeat;
  height: 48px;
  width: 176px;
}

.page {
  min-height: 100%;
  position: relative;
}

.content {
    padding-bottom: 99px;
}

.section-top {
  background: #da272d; /* Old browsers */
  background: -moz-linear-gradient(top, #da272d 0%, #850816 100%);
  background: -webkit-linear-gradient(top, #da272d 0%,#850816 100%);
  background: linear-gradient(to bottom, #da272d 0%,#850816 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da272d', endColorstr='#850816',GradientType=0 ); /* IE6-9 */

  padding: 60px 0 120px;
}

.section-top p {
  color: #FFFFFF;
  font-size: 28px;
  line-height: 1.2;
}

.big-logo-wrapper {
    float: left;
    width: 400px;
}

.logos-wrapper {
  float: left;
  width: 500px;
}

.section-bottom {
  padding-bottom: 80px;
}

.section-bottom .row{
  margin-top: -80px;
}

.section-bottom a {
  display: inline-block;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0 20px 20px -0.25em;
  overflow: visible;

  -webkit-transition: transform 300ms, box-shadow 300ms; /* Safari */
  transition: transform 300ms, box-shadow 300ms;
}

.section-bottom a:hover {
  transform: translateY(-3px);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.big-logo-wrapper a:hover {
  transform: translateY(-6px);
  box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.5);
}

.footer-container {
  background-color: #222a2d;
  bottom: 0;
  padding: 28px 0;
  position: absolute;
  width: 100%;
}

.visible-mobile {
  display: none;
}







/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (max-width: 991px) {
/* ====================
    Tablette
   ==================== */
   .wrapper {
     padding: 0 20px;
     width: 680px;
   }

   .section-top p {
     color: #FFFFFF;
     font-size: 18px;
   }

   .section-bottom a:nth-child(even) {
     margin-right: 0;
   }

   .big-logo-wrapper,
   .logos-wrapper {
     max-width: 320px;
     width: 100%;
   }

   .visible-mobile {
     display: none;
   }
}



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

/* ====================
    Mobile
   ==================== */
   .wrapper {
     padding: 0 10px;
     width: 300px;
   }

   .logos-wrapper a img{
     width: 129px;
     height: auto;
   }

   .visible-mobile {
     display: block;
   }

   .hidden-mobile {
     display: none;
   }

/* ========================
    Mobile: IE Fixes
   ======================== */

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}