/* https://coopcycle.org/en/ */


/* GENERAL STYLE & RESET */
:root {

/*GOOD for Susana*/
--violet: #2D3780/*#1c2352*/;
--violetHover: #414FB9;
--white: #ffffff;
--blackBody: #231f20;
--greenPharma: #008540;/*00a850*/
--greenPharmaLight: #00d164;
--colorRed: #FF0000;
--colorGray: #6c757d;
/*
    --blue: #0366d6;

    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #f03;
    --orange: #d35400;
    --yellow: #eeb516;
    --green: #558900;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #0366d6;
    --secondary: #6c757d;
    --success: #558900;
    --info: #17a2b8;
    --warning: #eeb516;
    --danger: #f03;
    --light: #f8f9fa;
    --dark: #06070f;
    */

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*, * ::before, * ::after {
    box-sizing:border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    /*-webkit-text-size-adjust: 100%;*/
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    background-color:var(--blue);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display:block
}
body {
    margin: 0;
    font-family: "Raleway", "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #000000;
    text-align: left;
    background-color: #fff
}

[tabindex="-1"]:focus:not(:focus-visible) {
    outline:0 !important
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow:visible
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom:.5rem
}

p {
    margin-top: 0;
    margin-bottom:.5rem
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height:inherit
}

ol, ul, dl {
    margin-top: 0;
    margin-bottom:1rem
}

ol ol, ul ul, ol ul, ul ol {
    margin-bottom:0
}

dt {
    font-weight:700
}

dd {
    margin-bottom: .5rem;
    margin-left:0
}

blockquote {
    margin:0 0 1rem
}

b, strong {
    font-weight:bolder
}

small {
    font-size:80%
}

sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align:baseline
}

sub {
    bottom:-.25em
}

sup {
    top:-.5em
}

a {
    color: var(--blue);
    text-decoration: none;
    background-color:transparent
}

a:hover {
    color: #02428b;
    text-decoration:underline
}

a:not([href]) {
    color: inherit;
    text-decoration:none
}

a:not([href]):hover {
    color: inherit;
    text-decoration:none
}

figure {
    margin:0 0 1rem
}

img {
    vertical-align: middle;
    border-style:none
}

svg {
    overflow: hidden;
    vertical-align:middle
}


.red {
    color:var(--colorRed);
}
.bold {
    font-weight: bold;
}

table {
    width:100%;
    border-collapse:collapse;
    
}
tr:nth-child(even) {background: #0365d67a;}
tr:nth-child(odd) {background: #FFF}
th, td {padding:1em;}
th {background-color:var(--blue);color:#ffffff;border:1px solid var(--blue);}
td {border:1px solid var(--blue);}


caption {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #6c757d;
    text-align: left;
    caption-side:bottom;
}

th {
    text-align:inherit
}

label {
    display: inline-block;
    margin-bottom:.5rem
}

/*button {
    border-radius:0
}

button:focus {
    outline: 1px dotted;
    outline:5px auto -webkit-focus-ring-color
}*/

input, button, select, optgroup, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height:inherit
}

button, input {
    overflow:visible
}

button, select {
    text-transform:none
}

select {
    word-wrap: normal
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button
}

button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
    cursor: pointer
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none
}

input[type="radio"], input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0
}

input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    -webkit-appearance:listbox
}

textarea, input {
    overflow: auto;
    resize:vertical;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border:0
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space:normal
}

progress {
    vertical-align: baseline
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: none
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance:none
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance:button
}

output {
    display:inline-block
}

summary {
    display: list-item;
    cursor:pointer
}

template {
    display:none
}

[hidden] {
    display:none !important
}
.hidden {
    font-size: 0;
    height: 0;
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.text-center {
    text-align: center !important;
}

.video {
    max-width: 100%;
    width:100%;
    height:auto;
}

.required {color:var(--red);}

.circle {border:1px solid var(--black);border-radius: 50%;}

.profileOn { text-decoration:underline; }

.nobr {white-space: nowrap;}

/* STYLES */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: .5rem;
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-weight: 500;
    line-height:1.2
}

h1, .h1 {
    font-size:2.5rem;
}

h2, .h2 {
    font-size:2rem
}

h3, .h3 {
    font-size:1.75rem
}

h4, .h4 {
    font-size:1.5rem
}

h5, .h5 {
    font-size:1.25rem
}

h6, .h6 {
    font-size:1rem
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top:1px solid rgba(0, 0, 0, 0.1)
}

small, .small {
    font-size: 80%;
    font-weight:400
}

.img-fluid {
    max-width: 100%;
    width:100%;
    height:auto;
}

.separator {margin: 0 1em;}

.textAlignRight {text-align:right;}





/* Structure of the grid. Break points */
header, main, footer {
    width:100%;
}
main {
    background-color: var(--white);
}


.preHeader {width:100%;background-color:var(--violet);color:var(--white);}
.preHeader .col {padding: 0.3em 1em 0.5em 1em;}
.preHeader p {margin:0;padding:0;}
.preHeader a {color:var(--white);}
.preHeader a:hover {color:var(--white);text-decoration:underline;}
.preHeader .lang {padding:0 1em;;}
.preHeader .lang.active {font-weight:600;}
.preHeader .lang:hover {text-decoration:none;}

header {
    background-color: var(--white);
    color:var(---blackBody);
}
footer {
    background-color: var(--violet);
    color:#ffffff;
}
.container, .containerHero {
    width: 100%;
    margin-right: auto;
    margin-left:auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
}
.col {
    position: relative;
    width: 100%;
    padding: 1rem;
    flex-basis: 0;
    flex-grow: 1;
    max-width:100%;
}
.row-cols-1 {
    flex: 0 0 100%;
    max-width:100%;
}

.row-cols-2 {
    flex: 0 0 50%;
    max-width:50%;
}

.row-cols-3 {
    flex: 0 0 33.33333%;
    max-width:33.33333%;
}

.row-cols-4 {
    /*flex: 0 0 25%;*/
    max-width:25%;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: stretch;
}

.box {
    /*padding-top:.5rem;*/
    text-align:left;
}
/* .grid : only to see the border of the box */
.box.grid {
    padding-top:.5rem;
    border:1px solid var(--gray);
    text-align:center;
}

/* LOGO */
.logo a {color:var(--blackBody);text-decoration:none;}
.logo a:hover{text-shadow: 1px 1px 2px rgba(0,0,0, 0.5)}

.logo a img {height:40px;margin:0 1em 0 0;
    
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;}




/* Nav - Main Navigation  GREEN: #4D804D */
/* Add a white background color to the NAV */
nav { background: var(--white); }
nav .container {padding:0;}

/* Add a white background color to the top navigation */
.topnav {
    background-color:var(--white);
    overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color:var(--blackBody);
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

/* Change the color of links on hover */
.topnav a:hover {
    text-decoration:none;
    color: var(--white);
    background-color:#414FB9;
}

/* Add an active class to highlight the current page */
.topnav a.active:first-child, .topnav a.active:first-child:hover {background-color:var(--greenPharma);font-weight:300;}
.topnav a.active {
  background-color: var(--violet);color:var(--white);
}
/*.topnav a.active:hover {background-color: var(--violet);color:var(--white);}*/

/*regrouper dans une seule class car ils ont les même bgcolor et color*/
.topnav a.active:hover, .dropdown:hover .dropdown-content a.active {
    background-color: var(--violet);color:var(--white);
}

.dropdown .dropbtn.active, .dropdown .dropbtn.active:hover {
background-color: var(--violet);color:var(--white);
}
.topnav .dropdown .dropdown-content a.active {
background-color: var(--violet);color:var(--white);
}






/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

  
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
  
/* Dropdown button */
.dropdown .dropbtn {
    font-weight:300;
    border: none;
    outline: none;
    color:var(--blackBody);
    padding: 14px 20px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
} 
/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a dark background on topnav links and the dropdown button on hover */
  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #414FB9;
    color: var(--white);
  }

  

  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* When the screen is less than 768 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  @media screen and (max-width: 768px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      _float: right;
      display: block;
      position:absolute;
      right:0;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 768px) {
    .topnav {_background-color:var(--greenPharma);}
    .topnav a.active:first-child {background-color:var(--greenPharma);font-weight:300;width:100%;text-align:left;}
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav a.icon i.fa-bars::before {color: var(--white);}

    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;background-color:#f1f1f1;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
    .dropdown:hover .dropdown-content {
        display: block;
      }
  } 






























/* HERO */
.hero {background:url('../medias/istockphoto-175226565-1024x350.jpg') no-repeat center center;height:300px;width:100%;background-size:cover;}
.hero .containerHero {margin-right: auto;margin-left:auto;padding-top:2em;}
.hero .containerHero h1, .hero .containerHero h2, .hero .containerHero h3 {color:var(--white);}

#overlay {
    _position: fixed; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }



/* BUTONS */
.button, a.button {
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0.5em 0.5em 0.5em 0;
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-weight:300;
    color:#FFFFFF;
    background-color:var(--violet);
    text-align:center;
    border:2px solid var(--violet);
    transition: all 0.2s;
}
.button:hover, a.button:hover{
    background-color:var(--violetHover);
    border:2px solid var(--violetHover);
}

.button.donate {width:100%;background-color:var(--white);color:var(--violet);font-weight:500;}
.button.donate:hover {background-color:var(--violetHover);color:var(--white);border:2px solid var(--white);}

.button.ctaButton {width:auto;border:2px solid var(--white);background-color:var(--violet);color:var(--white);font-weight:500;}
.button.ctaButton:hover {background-color:var(--white);color:var(--violet);}



.text-center .box {text-align:center;}


/* CTA */
.ctaBgViolet {background-color: transparent;
    background-image: linear-gradient(300deg,var(--violetHover) 0%,var(--violet) 100%);color:var(--white);padding:3em 2em;
}
.ctaBgVioletGraphic {background-color: var(--violetHover);
    background-image: url('../medias/bg_cta.png');
    background-repeat: no-repeat;
    background-position:center center;
    background-size:120%;
    color:var(--white);
    padding:3em 2em;
}
.ctaBgVioletGraphic h2 {font-size:1.75rem;color:var(--white); }


/* PREFOOTER */
.preFooter {background-color:var(--white);}
.preFooter h3 {font-size:1.50rem;}

/* FOOTER */
footer p span.madeBy {font-size:0.8em;}
footer a {color:var(--white);}
footer a:hover {color:var(--white);}
footer .material-icons  {position:relative;top:8px;}


 /* INDEX */
 .paddingTop {padding-top:2rem}

 video {
    /* override other styles to make responsive */
    width: 100%    !important;
    height: auto   !important;
  }

/* GOOGLE Materials */
.material-icons  {position:relative;top:8px;}




/* FORM CONTACT */
form#contact-form {
    padding: 0px 0px 45px 0px;
}

form#contact-form .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    _margin-right: -15px;
    _margin-left: -15px;
}
form#contact-form .form-group {width:100%;max-width:100%;margin-bottom:1em;}

form#contact-form label {
    padding: 0;
    margin: 0;
    font-weight:bold;
}

form#contact-form .form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 1;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  }

  .btn-success.disabled, .btn-success:disabled {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
  }
  button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }
  
  .d-none {
    display: none !important;
  }

.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.help-block.with-errors ul li {
    color: #ff5050;
    margin-top: 5px;
}

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    }
    
    .alert-heading {
    color: inherit;
    }
    
    .alert-link {
    font-weight: 700;
    }
    
    .alert-dismissible {
    padding-right: 4rem;
    }
    
    .alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    color: inherit;
    }
    
    .alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
    }
    
    .alert-primary hr {
    border-top-color: #9fcdff;
    }
    
    .alert-primary .alert-link {
    color: #002752;
    }
    
    .alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
    }
    
    .alert-secondary hr {
    border-top-color: #c8cbcf;
    }
    
    .alert-secondary .alert-link {
    color: #202326;
    }
    
    .alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    }
    
    .alert-success hr {
    border-top-color: #b1dfbb;
    }
    
    .alert-success .alert-link {
    color: #0b2e13;
    }
    
    .alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    }
    
    .alert-info hr {
    border-top-color: #abdde5;
    }
    
    .alert-info .alert-link {
    color: #062c33;
    }
    
    .alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    }
    
    .alert-warning hr {
    border-top-color: #ffe8a1;
    }
    
    .alert-warning .alert-link {
    color: #533f03;
    }
    
    .alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    }
    
    .alert-danger hr {
    border-top-color: #f1b0b7;
    }
    
    .alert-danger .alert-link {
    color: #491217;
    }
    
    .alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
    }
    
    .alert-light hr {
    border-top-color: #ececf6;
    }
    
    .alert-light .alert-link {
    color: #686868;
    }
    
    .alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
    }
    
    .alert-dark hr {
    border-top-color: #b9bbbe;
    }
    
    .alert-dark .alert-link {
    color: #040505;
    }
    
    
    
    .close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    }
    button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    }
    .close:not(:disabled):not(.disabled) {
    cursor: pointer;
    }


/*----------------- ACCORDION CSS (carrieres.php) --------------------*/
    /* https://codepen.io/nktamars/pen/ejJVxX */
    .accordion__item {
        margin: 5px auto;
    }
    .accordion__item .accordion__title {
        position: relative;
        display: block;
        padding: 13px 60px 15px 13px;
        margin-bottom: 2px;
        color: #FFFFFF;
        font-size: 28px;
        text-decoration: none;
        background-color: #2D3780;
        border-radius: 3px;
        -webkit-transition: background-color 0.2s;
        transition: background-color 0.2s;
      cursor: pointer;
    }
    .accordion__item .accordion__title:hover {
        background-color: #414FB9;
        transition: all 0.5s ease-out;
    }
    .accordion__item .accordion-active {
        background-color: #2D3780;
    }
    .accordion__item .accordion__title .accordion__arrow {
        position: absolute;
        top: 19px; 
        right: 10px;
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        text-align: center;
        color: #2D3780;
        line-height: 30px;
        font-size: 20px;
        font-weight: 700;
        margin-right: 5px;
        background-color: #FFFFFF;
        border-radius: 50%;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }
    .accordion__item .accordion__rotate {
        transform: rotate(225deg);
    }
    .accordion__item .accordion__content {
        padding: 30px;
        margin-bottom: 2px;
        /*font-size: 14px;*/
        display: none;
        background-color: #f3f3f3;
    }
    .accordion__item .accordion__arrow-item {
        font-weight: 700;
        color: #2D3780;
        font-size: 1.5em;
    }
    /*-------------------------------------*/


/* OUR TEAM page */
.team {
    padding: 4px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    width: 100%;
}
.team img {
    max-width: 100%;
    margin-bottom: 1em;
}