:root {
    --blue: #00688C;
    --bleu_ciel: #e6faf9;
    --brown: #76675b;
    --brown_light: #e5dbd1;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #e51b20;
    --red_dark: #d40000;
    --orange: #f15a24;
    --yellow: #d08948;
    --green: #00514e;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #e6e6e6;
    --gray-dark: #4d4d4d;
    --primary: #d08948;
    --secondary: #020202;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #000000;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --nav-height:3rem;
    --nav-height-neg:-3rem;
    --font-family-sans-serif: quick, sans-serif;
    --font-family-serif: liberation, serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
 
.rot90 {

    transform: translateX(-90%) rotate(270deg); /* W3C */  
    transform-origin: 100% 50%;
}
.vertical-center {
    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
    display: flex;
    align-items: center;
}
.separation_container {
    position: relative;
    width: 100%;
    height:10rem;
}
.separation:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10rem;
    background: var(--white);
    border-radius: 0 0 50% 50% / 0 0 60% 60%;
}
.illustration { width: 100%; height: 100%; }
.text-align-right { text-align:right; }
.box-shadow {
    box-shadow: 0 0.2em 0.4em rgba(0,0,0,.6); 
}
.row-flex {
  display: flex;
  flex-wrap: wrap;
}
html, body {
  font-family: var(--font-family-sans-serif);
}
p {
    font-family: quick, sans-serif;
    font-weight: normal;
    text-indent: 0.5rem;
}

a {
    text-decoration: none;
    background-color: transparent;
    color: var(--green);
}
a:hover {
    color: var(--dark);
    text-decoration: none;
    background-color: transparent;
}
a.external {
	padding-right: 18px;
	height: auto;
	color: #000000;
	background: transparent url(../img/external.png) 100% 30% no-repeat;
	font-size: 1rem;
}

p a.orange {
    color: var(--orange);
}
p a.blue {
    color: var(--blue);
}
.uppercase { text-transform: uppercase; }

.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
.pb1 { padding-bottom: 1rem; }
.pb2 { padding-bottom: 2rem; }
.pt1 { padding-top: 1rem; }
.pt2 { padding-top: 2rem; }
.extend { 
    width: 100%;
    height: 100%;
    display: flex;
    min-height: 100%;
}
.text-left { text-align: left !important; }
.text-green { color: var(--green); }
.text-blue { color: var(--blue); }
.text-gray { color: var(--gray-dark); }
.text-brown_light { color: var(--brown_light); }
.text-brown { color: var(--brown); }
.text-orange { color: var(--orange); }
.text-tahu { font-family: tahu, serif; }
.text-quick { font-family: quick, sans-serif; }
.bg-green { background-color: var(--green); }
.bg-brown { background-color: var(--brown); }
.bg-brown_light { background-color: var(--brown_light); }
.text-title {
    font-weight: 100;
    font-size: 2.5rem;
    letter-spacing: 0.6rem;
    padding-top: 1vh;
}
.text-title2 {
    font-weight: 100;
    font-size: 3.5rem;
}
@media(max-width:767px){
    ul { 
        padding-left: 1rem;
    }
}
ul.points {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none}
ul.points li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . ";}
ul.points span:first-child {
    padding-right: 0.33em;
    background: white; }
ul.points span + span {
    float: right;
    padding-left: 0.33em;
    background: white; }

@media(min-width:576px){
    .modal-dialog {
        max-width: 80%;
    }
}

/* Head */
.main { 
    margin-top: var(--nav-height);
}
@media(max-width:767px){
    .main { 
        margin-top: 0;
    }
}

/* loading */

 body#home .inner { display: none; }

body#home.pg-loaded .inner { display: block; } 


.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid var(--green);
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2n) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}
/* Modal */
.modal-content {
    border-radius: 0;
    border-top-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}
.modal-header {
    border-bottom-width: 0px ;
}
.modal-footer {
    border-top-width: 0px;
}

/* Curve */
.canevas {
    height:89px;
    background-repeat: no-repeat;
    background-color: var(--white);
    display: flex;
    align-items: end;
    
}
.canevas svg {
    margin-bottom: -1px;
}
.vague path {
    fill: var(--green);
    stroke: var(--green);
}
.intro .canevas {
    background-color: transparent;
    display: none;
}
    @media(max-width:767px){
        .intro .canevas { 
            display: block; 
            position: absolute;
            left:0;
            bottom:-2px;
            height: auto;
        }
    }
.intro .vague path {
    fill: var(--white);
    stroke: var(--white);
}

.deroulement .vague path {
    fill: var(--brown_light);
    stroke: var(--brown_light);
}
.deroulement .canevas {
    background-color: var(--bleu_ciel);
}
.parcours .vague path {
    fill: var(--brown_light);
    stroke: var(--brown_light);
}
.parcours_background {
    padding-top:var(--nav-height);
    width: 100%;
    background-color: var(--white);
}
    @media(max-width:767px){
        .parcours_background {
            padding-top: 0;
    }
}

.parcours .canevas {
    border-top-width:var(--nav-height);
    background-color: var(--white);
}

.curve {
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: 100px;
    background: #f00;

}
.card {
    box-shadow: 0 0.2em 0.4em rgba(0,0,0,.6);
    border-bottom-right-radius: 1.5rem;
    margin-bottom: 2rem;
}
/* Nav */
.navbar {
    height: var(--nav-height);
    line-height: 2.5vh;
    padding-top: .5vh;
    padding-bottom: .5vh; }
    @media(max-width:767px){
        .navbar {
            height:3rem;
    }
}
@media(max-width:767px){
    .fixed-top {
        top: auto;
        bottom: 0;
    }
}
@media(max-width:767px){
    .navbar-collapse {
        position: absolute;
        left:0;
        bottom:3rem;
        background-color: var(--white);
        width:100%;
        padding-left:1rem;
    }
}
@media(max-width:767px){
        .navbar .container {
            padding-left: 0;
            padding-right: 0;
    }
}
.navbar-light .navbar-nav .nav-link {
   text-transform: uppercase;
   font-weight: bold;
}

.navbar-light .navbar-nav .nav-link.brown {
   color: var(--brown);
}
.navbar-light .navbar-nav .nav-link.blue {
   color: var(--blue);
}
.navbar-light .navbar-nav .nav-link.orange {
   color: var(--orange);
}
.dropdown-toggle::after {
    display: none;
}
.dropdown-menu {
    border-radius: 0;
    border: 0px solid rgba(0,0,0,.15);
}
.dropdown-menu.blue li a{
    color: var(--blue);  
}
.dropdown-menu.brown li a{
    color: var(--brown);  
}
.dropdown-menu.orange li a{
    color: var(--orange);  
}
.dropdown-item.active, .dropdown-item:active {
	background-color: var(--blue);  
}
/*** Footer ***/
.footer { 
    background-color: var(--white);
    padding-top: 3rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
}
#home .footer {
    margin-top: 0;
}
.footer-block {
    padding-left: 15px;
    color: var(--white); }
    @media(max-width:767px){
    .footer-block {
        padding-left: 0;
    }
}
.footer-block:first-of-type {
    padding-left: 30px;
    text-align: center; }
    @media(max-width:767px){
    .footer-block:first-of-type {
        padding-left: 0;
    }
}

.footer-block p {
    text-align: center;
    font-size: 1.2rem;
}
.footer-block a {
    color: var(--white);
}
.footer-block a:hover {
    color: var(--white);
    text-decoration: none;
}

.footer h4 {
    text-align: left;
    color: var(--white);
    font-family: dejavu_sanscondensed, sans-serif;
    font-size: 1.4rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
}

.footer .see_more {
    position: relative !important;
    left:0 !important;
    right:0 !important;
    top: auto !important;
    bottom: auto !important;
    font-size: 2rem;
    transition: transform .7s ease-in-out;
}
.footer .see_more:hover {
  transform: rotate(360deg);
}

.footer img { 
    max-width: 100%;
}

.credits {
    margin-top: 3rem;
    text-align: center;
}
.credits p{
    font-size: .8rem;
    color: var(--white);
}
.credits a,.credits a:hover{
    color: var(--white);
}
.credits img {
    width: 12rem;
    padding:1rem;
}
/*** End Footer ***/

h5.card-title {
    color: var(--green);
    font-size: 3rem;
    font-family: tahu, serif;
    margin-bottom: 1rem;
}
.text-small {
    font-size:0.9rem;
}

.ombre {
    position: absolute;
    left: 0;
    top:var(--nav-height);
    width: 100%;
    height: 3rem;
    background-image: url('../img/ombre.svg');
}

/*--------------------------------------------------
    [Back To Top Theme Button]
----------------------------------------------------*/
.back-to-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  display: inline-block;
  z-index: 9;
  width: 40px;
  height: 40px;
  font-size: 11px;
  font-weight: 400;
  color: var(--red);
  text-align: center;
  line-height: 3;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--white);
  border-radius: 3px;
  visibility: hidden;
  opacity: 0;
  padding: 5px;
  -webkit-transform: translate3d(0, 50px, 0);
  -moz-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.back-to-top:hover {
  color: var(--red);
  background: var(--white);
    opacity: 0;
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.back-to-top:focus, .back-to-top:hover {
  text-decoration: none;
}

/* The Button Becomes Visible */
.back-to-top.back-to-top-is-visible {
  visibility: visible;
  opacity: .6;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.back-to-top.back-to-top-is-visible:hover {
  opacity: 1;
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

/* If the user keeps scrolling down, the button is out of focus and becomes less visible */
.back-to-top.back-to-top-fade-out {
  opacity: .4;
}

.back-to-top.back-to-top-fade-out:hover {
  opacity: 1;
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}