/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer */
footer {
  padding-top: 20px;
}

/* Spacing unstyled lists */
ul.list-styled {
  line-height: 2em;
  padding-left: 20px;
}

blockquote {
  font-size: medium;
}

span[lang] {
  font-style: italic;
}

/* mailto: and tel: links */
a.btn-mailto,
a.btn-tel {
  color: #428bca;
}
a.btn-mailto:hover,
a.btn-tel:hover {
  color: #2a6496;
}
a.btn-mailto span,
a.btn-tel span {
  color: #222;
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
  padding-left: 0;
  padding-right: 0;
}
.navbar-wrapper .navbar {
  padding-left: 15px;
  padding-right: 15px;
}

#connexion a.btn {
  background-color: transparent;
  background-image: url('./img/g-logo.png');
  background-position: 100px -12px;
  background-repeat: no-repeat;
  padding-right: 60px;
}
#connexion a.btn:hover {
  background-color: #5bc0de;
}

/* CUSTOMIZE JUMBOTRON
-------------------------------------------------- */
.jumbotron {
  background-color: transparent;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
.carousel {
  background-image: url('./img/banniere50.jpg');
  background-position: -70px bottom;
  background-repeat: no-repeat;
  background-size: 450%;
  height: 450px;
  margin-bottom: 60px;
}
.carousel-caption {
  left: 0;
  right: 0;
  top: 50px;
}

/* MARKETING CONTENT
-------------------------------------------------- */
/* Pad the edges of the mobile views a bit */
.marketing {
  padding-left: 15px;
  padding-right: 15px;
}

/* Center align the text within the three columns below the carousel */
.marketing .row>div {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing p {
  text-align: justify;
}


/* Featurettes
------------------------- */
.featurette {
  display: flex;
  align-items: center;
  flex-flow: column;
}

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
h2.featurette-heading {
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1;
  margin-top: auto;
}

/* CUSTOMIZE CALLOUT
-------------------------------------------------- */
.bs-callout {
  border-left:3px solid #eee;
  margin:20px 0;
  padding:20px;
}

.bs-callout h4 {
  margin-bottom:5px;
  margin-top: 0;
}

.bs-callout p:last-child{
  margin-bottom: 0;
}

.bs-callout-info{
  background-color:#f4f8fa;
  border-color:#5bc0de;
}
.bs-callout-info h4 {
  color:#5bc0de;
}

/* CUSTOMIZE CONTAINERS
-------------------------------------------------- */
.container-fluid {
  margin-bottom: 40px;
  padding: 20px 0;
}
.container-odd {
  background-color: #eee;
}
#pourquoi_geniustrade {
  margin-top: -40px;
  padding-top: 60px;
}
#notre_metier {
  border-top: 2px solid #999;
  font-size: medium;
  margin-top: -40px;
  padding-top: 60px;
}
#fiche_identite {
  background: white url('img/entreprise.png') bottom right no-repeat;
}
#contact {
  border-bottom: 2px solid #428bca;
  margin-bottom: 0;
  padding-bottom: 60px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 568px) {
  .carousel {
    background-size: 250%
  }
}

@media (min-width: 768px) {
  .carousel {
    background-size: 200%
  }

  /* Remove the edge padding needed for mobile */
  .marketing {
    padding-left: 0;
    padding-right: 0;
  }

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-left:  15px;
    padding-right: 15px;
  }
  .navbar-wrapper .navbar {
    padding-left:  0;
    padding-right: 0;
  }
  .navbar-brand {
    padding-right: 2em;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    font-size: 21px;
    line-height: 1.8em;
    margin-bottom: 20px;
  }

  .featurette {
    flex-flow: row;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .carousel {
    background-size: 150%
  }

  .featurette-heading {
    margin-top: 120px;
  }
}

@media (min-width: 1200px) {
  .carousel {
    background-position: left bottom;
    background-size: 110%
  }

  #contact .questions {
    align-items: center;
    background-image: url('img/accolade.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: flex;
    flex-flow: row;
    margin-bottom: 40px;
  }
  #contact p {
    margin-bottom: 0;
    text-align: right;
  }
}