@charset "UTF-8";

/*
=====================================================================
*   Adrien Blanchet
*   09-08-2018
=====================================================================

   TOC:
   a. Loading Fonts
   b. General Style
   c. Header Style
   d. Menu Style

===================================================================== */


/* ------------------------------------------------------------------ */
/* a. Loading Fonts
/* ------------------------------------------------------------------ */


/* Text Font */
@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");

/* Logo Font */
@import url('https://fonts.googleapis.com/css?family=Courgette');
/* @font-face {
  font-family: "harvest_barn";
  src: url('../fonts/harvest_barn.ttf');
} */


/* ------------------------------------------------------------------ */
/* b. General Style
/* ------------------------------------------------------------------ */

body, html{
  padding: 0;
  margin: 0;
}

body{
  font-family: 'Raleway', sans-serif;
}

a, a:hover{
  text-decoration: none;
}

.container-fluid{
  padding: 0;
}

.paragraph-style{
  font-family: 'Raleway', sans-serif;
}


/* ------------------------------------------------------------------ */
/* c. Header Style
/* ------------------------------------------------------------------ */

.header{
  /* background-color: #2C3E50; */
  background-color: rgba(44, 62, 80, 0.95);
  height: 4em;
  line-height: 4em;
  position: fixed;
  z-index: 999;
}


/* ------------------------------------------------------------------ */
/* d. Menu Style
/* ------------------------------------------------------------------ */

.logo{
  color: #e5474b;
  /* font-family: 'harvest_barn', cursive; */
  /* font-family: 'Permanent Marker', cursive; */
  font-family: 'Courgette', cursive;
  font-size: 2em;
  float: left;
}

.logo:hover {
  color: #e5474b;
}

.menu{
  /* overflow: hidden; */
  float: right;
  font-weight: 700;
}

.menu a{
  color: #ffffff;
  margin-right: 20px;
  text-align: center;
}

.menu a:hover{
  color: #3498DB;
}

.menu a.icon {
  display: none;
}

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

  /* compressed mode */
  .menu a {
    display: none; /* hide the original menu */
  }
  .menu a.icon {
    display: block; /* display the icon */
    position: absolute; /* allow overlapping with the logo */
    top: 1em; /* shift : 1/4 of the menu line height */
    right: 20px; /* same shift than the logo (+extra implicit margin-right) */
  }

  /* drop-down mode */
  .menu.drop-down {
    position: absolute; /* allow overlapping with the logo */
    right: 0px; /* put the menu on the right */
    top: 4em; /* begin menu after the bar */
  }
  .menu.drop-down a {
    display: block; /* display the links */
    float: none; /* links on top of each other */
    text-align: right;
    background-color: rgba(44, 62, 80, 0.95); /* extend bar color */
    margin-right: 0px;   /* stick the drop-down menu to the right */
    padding-right: 20px; /* shift for the surrounding box */
    padding-left: 20px;  /* shift for the surrounding box */
  }
  .menu.drop-down a.icon {
    top: -3em;  /* put the icon in its original place */
    margin-right: 20px; /* add shift (retore it)*/
    padding-left: 0; /* remove padding from the dropdown menu */
  }
}