/* ------------------------------
 * General
 ------------------------------ */
/* WAD-01-11-14_Step-3 Using partials */
/* WAD-01-11-14_Step-2 Using variables */
/*WAD-01-11-14_Step-2 Using mixin */
/*WAD-01-08-04 Definition for Tablet (mobile is default -> tablet)*/
/*WAD-01-08-04 Definition for desktop (mobile is default -> tablet -> desktop)*/
/* ==========================================================
    BASE
============================================================= */
html {
  /*WAD-06-06 Add font-family, -size and -height
    'Rubik' is selected through fonts.google.com
      <head>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
      </head>
      62.5% means a default of 10px (16px * 0.625)
      line-height 1.6 means  font-size*1.6)
    These definiton are the root (for all the document) and used to calculate rem
  */
  font-family: "Rubik", helvetica, arial, sans-serif;
  font-size: 62.5%;
  line-height: 1.6;
  background-color: #fff;
}

body {
  /*WAD-01-06-06 Add font-size to a fixed size of 15px (override the one from html)
    used to calculate em (if value is not overridden)
    WAD-01-08-04 Removed fixed size of 15px for RWD (Responsive Web Design)
  */
  /* font-size: 15px; */
  color: #72797e;
  margin: 0;
  padding: 0;
}

.w-70 {
  width: 70% !important;
}

.no-underline {
  text-decoration: none;
}

/* ==========================================================
    TYPOGRAPHY
============================================================= */
p,
ul,
ol,
span,
label {
  /*WAD-01-08-04 add here the fixed size of 15px for RWD (Responsive Web Design)
    for some elements
  */
  font-size: 1.3em;
}

.form-control,
.listes {
  font-size: 1.8rem;
  max-width: 100%;
}

.nav-link {
  color: #fff;
}

.price {
  font-weight: bold;
  text-align: right !important;
}

.bold {
  font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6,
.alpha,
.beta,
.gamma,
.DELTA,
.epsilon,
.zeta {
  /*WAD-06-06 set default value common for some <> element
    used to calculate em (if value is not overridden)
    margin top, right, bottom, left is set to 0 except bottom
    padding [all] is set to 0
    and we use normal weigth
  */
  margin: 0 0 0.5em 0;
  padding: 0;
  font-weight: normal;
}

h1,
.alpha {
  /*WAD-06-06 set specific value for <> elements
    override font-size of body element to 4.8 times bigger
    override line-height of html element
    override color of body element
  */
  font-size: 3.6em;
  line-height: 1.2;
  color: #192127;
}
@media screen and (min-width: 768px) {
  h1,
  .alpha {
    font-size: 4em;
  }
}
@media screen and (min-width: 1020px) {
  h1,
  .alpha {
    font-size: 4.8em;
  }
}

h2,
.beta {
  font-size: 2.8em;
  line-height: 1.2;
  color: #192127;
}
@media screen and (min-width: 768px) {
  h2,
  .beta {
    font-size: 3.2em;
  }
}
@media screen and (min-width: 1020px) {
  h2,
  .beta {
    font-size: 3.6em;
  }
}

h3,
.gamma {
  font-size: 2.4em;
  line-height: 1.2;
  color: #192127;
}
@media screen and (min-width: 768px) {
  h3,
  .gamma {
    font-size: 2.8em;
  }
}

h4,
.DELTA {
  font-size: 1.3em;
  line-height: 1.5;
  color: #72797e;
  text-transform: uppercase;
}

h5,
.epsilon {
  font-size: 1.4em;
  line-height: 1.4;
  color: #72797e;
}

h6,
.zeta {
  font-size: 1.2em;
  line-height: 1.4;
  color: #72797e;
}

/*
WAD-01-06-06 set specific value for elements
    force text to not wrap in <button> element
WAD-01-09-08-Video_1
    remove white-space : nowrap; to avoid text overflowing in case we reduce size of screen

button {
    white-space: nowrap;
}
*/
/* ------------------------------
 * Helpers
 ------------------------------ */
.content-wrapper {
  /*override value in "content-wrapper" class */
  max-width: 96em;
  margin: 0 auto;
  padding: 0 1em;
}
.content-wrapper::after {
  /*WAD-01-07-08_Video_1
  Add this to keep the line separator at the correct place
  Could also add 'display  : flow-root;' in .content-wrapper
  */
  content: "";
  display: table;
  clear: both;
}

.bare-list {
  /*override value in "bare-list" class */
  list-style-type: none;
  padding: 0;
}

.sr-only {
  /*WAD-01-08-09_Video_2
  To remope the LAbel, with CSS. in the header part
  */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.banner {
  /*override value in "banner" class */
  /*50% from left, 50% from top / background size (cover, contain, etc ...)*/
  background: #afbac4 url(/assets/images/Le-Cosmos-panorama-ete.jpg) no-repeat 50% 50%/cover;
  color: #fff;
  padding: 0 0 4.8rem 0;
  margin: 0 0 4.8rem 0;
}
.banner li {
  font-size: 2rem;
}

/* --------------------------------------------------------
 * Header
 * -------------------------------------------------------- */
.global-header {
  /*override default margin and add a bottom line solid as specified color only in the "global-header" class */
  margin: 0 0 4.8rem 0;
  /*padding      : 2.4rem 0; */
  border-bottom: 1px solid #afbac4;
}
.global-header .content-wrapper {
  /*WAD-01-08-09_Video_3 Add flexbox to the header */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.global-header .logo {
  /*WAD-01-07-08 Add a floating to fix the header logo on the Left */
  float: left;
  /*WAD-01-08-09_Video_3 add margin-right after the logo*/
  margin-right: 1.6em;
}
.global-header .search {
  /*WAD-01-07-08_Video_1 Add a floating to fix the header search on the Left and add some margin */
  float: left;
  /*WAD-01-08-09_Video_3 add margin-right after the search and margin-bottom for the borer (-1px) */
  margin: 0 1.6em -1px 0;
  /* WAD-01-08-09_Video_3 add to increase/reduce automatically the size of the search */
  flex: 1 0 auto;
}

.masthead {
  /*override default margin and padding to 4.8x of the root element  (html) only in the "masthead" class */
  padding: 0 0 4.8rem 0;
  margin: 0 0 4.8rem 0;
}
.masthead h1,
.masthead label {
  /*override color and text-align
    only in the "masthead" class for <h1> element
  WAD-01-08-04 remove and use standard alignement (left) for mobile
    center alignement for tablet and higher is set in @media at the end
  */
  color: #fff;
}
.masthead a {
  color: #fff;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .masthead h1 {
    text-align: center;
  }
  .masthead__search {
    width: 50%;
    margin: 0 auto;
  }
}

.specialhead a {
  text-decoration: none;
}

/* Footer
    -------------------------------------------------------- */
.global-footer {
  background-color: #192127;
  color: #bbc1c6;
  padding: 4.8rem 0 4.8rem;
}
.global-footer a {
  /*color is inherithed from .global-footer*/
  color: inherit;
  display: block;
}

/* ==========================================================================
   GLOBAL FOOTER
========================================================================== */
.site-footer {
  background-color: #192127;
  color: #bbc1c6;
  box-sizing: border-box;
  padding: 6.4rem 0 4.8rem;
  margin-top: auto;
}

.site-footer > .content-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.footer__logo {
  margin: 0 1.6rem 1.6rem 0;
}

.footer__navigation {
  flex-grow: 1;
  flex-shrink: 0;
  margin: 0 auto 1.6rem 0;
}

.footer__navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.footer__navigation li {
  display: inline-table;
  margin: 0 1.6rem 0 0;
}

.footer__navigation a {
  color: #e3e5e9;
}

/* logo
------------------------------------------------------------- */
.logo a {
  text-decoration: none;
}
.logo span {
  /*override value in "logo" class for <span> element*/
  font-size: 1.8em;
  font-weight: bold;
  color: #192127;
  white-space: nowrap;
}
.logo em {
  /*override value in "logo" class for <em> element font-style is italic by default, so override it */
  font-style: normal;
  color: #2c9cf2;
}

.global-footer .logo span,
.banner .logo em,
.banner .logo span {
  /*override value in 
  "logo" class embeded in "global-footer" class for <span> element
  "logo" class embeded in "banner" class for <em | span> element
  */
  color: #fff;
}

/* ==========================================================
    CARD
============================================================= */
.card {
  /*offset-x | offset-y | blur-radius | color */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
  margin: 0 1.6rem 1.6rem 0;
  border-radius: 3px;
  /*to remove right margin if only 1 column */
  margin-right: 0;
  /*WAD-01-08-09-Video_4 set flex to align btn bottom */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*WAD-01-08-09-Video_5 to put header/text on the img */
  font-size: 1rem;
}
.card__thumb {
  /*WAD-01-08-09-Video_5 to put header/text on the img */
  position: relative;
  text-decoration: none;
  color: #fff;
  /*WAD-01-10-10-Video_6 to handle older IE version and webkit css */
  display: block;
}
.card__thumb img {
  /*WAD-01-07-12 force the img width to 100% of his container */
  width: 100%;
  /*WAD-01-08-09-Video_5 block to remove the space end of the image */
  display: block;
}
.card__intro {
  padding: 1.6rem;
  /*WAD-01-08-09-Video_5 to put header/text on the img */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.card__intro span {
  /*WAD-01-08-09-Video_5 set 1.3em to be 13px (1.3em of 1rem from .card) */
  font-size: 1.3em;
}
.card__title {
  /*WAD-01-08-09-Video_5 set 2em to be 20px (2em of 1rem from .card) */
  font-size: 2em;
  color: #fff;
}
.card--footer {
  /*WAD-01-08-09-Video_1 set specific value for btn */
  display: flex;
  border-top: 1px solid #bbc1c6;
}
.card--footer .btn {
  border: none;
  border-radius: 0;
}
.card--footer .btn--like {
  border-right: 1px solid #bbc1c6;
  flex: 1 0 auto;
  text-align: left;
}

.cards {
  /*WAD-01-08-09-Video_4 Card RWD layout / grid */
  display: flex;
  flex-wrap: wrap;
}
.cards::first {
  margin-top: 2rem;
}
.cards::after {
  /*WAD-01-08-04 */
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 768px) {
  .cards {
    margin-right: -1.6rem;
  }
  .cards .card {
    float: left;
    width: calc(50% - 1.6rem);
    /*to add right margin if more than 1 column */
    margin-right: 1.6rem;
  }
}
@media screen and (min-width: 1020px) {
  .cards .card {
    width: calc(25% - 1.6rem);
  }
}

.bg-carousel {
  background: #bbc1c6;
}

/**
 * The bare-list object which removes the indents
 * and bullets from a list.
 */
.bare-list {
  list-style-type: none;
  padding: 0;
}

.horizontal-list {
  list-style-type: none;
  padding: 0;
  overflow: hidden; /* To avoid float collapse from list items */
}

.horizontal-list > li {
  margin-right: 1em;
  float: left;
}

/* ==========================================================================
 LOGO
 ========================================================================== */
.logo span {
  font-size: 3rem;
  font-weight: bold;
  color: #192127;
  display: inline-block;
  white-space: nowrap;
  /* Padding makes equal height to Nav size + padding */
  padding: 1.1rem 0;
}

.logo i {
  font-style: normal;
  color: #0f0;
}

/**
* For use on negative background, in footer
*/
.logo--inverted span {
  color: rgb(62, 111, 247);
}

/**
* For use on image background
*/
.logo--invertedImg span,
.logo--invertedImg i {
  color: rgb(62, 111, 247);
}/*# sourceMappingURL=main.css.map */