/*************CLASSES UTILITAIRES GENERALES*************/

/************************START**************************/

a {
    color: white;
    text-decoration: none;
}

html {
    height: 100%
}

body {
    min-height: 100%
}

/*.content {
    flex: 1 0 auto;
  }*/

@media only screen and (min-width: 768px) {
    .brnodisplay {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .small_font_phone {
        font-size: small;
    }
}

body {
    /*font-family: 'Montserrat', sans-serif;*/
    font-family: 'Roboto', sans-serif;
    padding-top: 3.80rem;
}

h1, h2, h3, h4, h5, h6 {
    color: #606F7A
}

h1 {
    font-size: calc(2em + 2vw);
}

/*flexbox pour centrer un élément*/

.to_be_centered {
    display: flex;
    justify-content: center;
}

.vspacer {
    min-height: 10em;
}

.main_titles {
    font-size: 50px;
}

.sub_titles {
    font-size: 35px;
}

.big-dot {
    height: 50px;
    min-height: 50px;
    min-width: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

/* Hover.css Copyright Ian Lunn 2017. Generated with Sass.
*/

/* 2D TRANSITIONS */

/* Grow */

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}

/*************************NAV***************************/

/************************START**************************/

/*navigation en haut*/

#nav_top {
    min-height: 5em;
    box-shadow: 0px 3px 7px -2px rgba(30, 30, 30, 0.75);
    -webkit-box-shadow: 0px 3px 7px -2px rgba(30, 30, 30, 0.75);
    -moz-box-shadow: 0px 3px 7px -2px rgba(30, 30, 30, 0.75);
}

/*logo dans la barre de navigation*/

#logo_img {
    width: auto;
    height: 4rem;
    /*height: 2rem;*/
}

#nav_title {
    display: flex;
    font-size: xx-large;
    align-items: center;
    color: #606F7A;
    font-weight: bold;
}

#nav_title p {
    margin-bottom: 0;
    margin-left: 0.2em;
}

.under_nav {
    min-height: 1.2em
}

/*********************BANDEAU_JUMBO*********************/

/************************START**************************/

/*text d'accroche */

.jumbotron_like {
    color: beige;
    background: url(../img/home/fond.jpg);
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    padding-top: 2em;
    height: 40rem;
    background-size: auto;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    background: url(../img/home/fond.jpg) no-repeat center/100% fixed;
    background-size: cover;
    /* background-size: cover; */
}

.title_jumbo {
    /*color: #1f74a7;*/
    padding-top: 1em;
    color: #E1E7EA;
    font-weight: 300;
}

.text_container_jumbo {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background-color: rgba(16, 16, 16, 0.446);
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    height: 100%;
}

.btn-adict {
    background-color: #1f74a7;
    color: whitesmoke
}

/*********************BANDEAU_JUMBO*********************/

/*************************END***************************/

.metier h2 {
    margin-top: 1em;
    /*color: #3fb0ac;*/
}

.metier {
    margin-top: -3em;
    padding-bottom: 1em;
    position: relative;
    background: #ffffff;
    /*height: 50vh;*/
}

.metier::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #ffffff;
    ;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

.solutions {
    padding-top: 3em;
    background-color: #e6e6e6;
    min-height: 40em;
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 768px) and (max-width: 1024px) {
    .solutions {
        min-height: 60em
    }
}

@media (min-width: 320px) and (max-width: 767px) {
    .solutions {
        height: 110em
    }
}

/*cartes métiers*/

.container_photo {
    background-color: rgba(57, 62, 93, 0.7);
    padding: 0;
    overflow: hidden;
    max-width: 300px;
    min-width: 300px;
    height: 330px;
    margin: 5px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important
}

.container_photo article {
    padding: 10%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.container_photo h2 {
    color: #fff;
    font-weight: 800;
    font-size: 25px;
    border-bottom: #fff solid 1px;
}

.container_photo h4 {
    font-weight: 300;
    color: #fff;
    font-size: 16px;
}

.container_photo img {
    width: 100%;
    height: 330px;
    top: 0;
    left: 0;
    opacity: 0.4;
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -o-transition: all 4s ease;
    -ms-transition: all 4s ease;
    transition: all 4s ease;
}

.see_more {
    padding-top: 15%;
    position: absolute;
    width: 100%;
    height: calc(100% + 5rem);
    bottom: 0;
    z-index: 1;
    opacity: 0;
    transform: translate(0px, 100%);
    -webkit-transform: translate(0px, 100%);
    -moz-transform: translate(0px, 100%);
    -o-transform: translate(0px, 100%);
    -ms-transform: translate(0px, 100%);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.color_blue {
    background-color: #6b99af;
}

.color_orange {
    background-color: #fabc7a;
}

.color_green {
    background-color: #68B2A0;
    ;
}

.see_more span {
    font-size: 20px;
    color: #fff;
    position: relative;
    margin: 0 auto;
    width: 100%;
    top: 13px;
}

.text_expertise {
    color: black;
    /*position: relative;*/
    margin: 0 auto;
    width: 100%;
    height: 100%;
    /*top: 13px;*/
}

.text_expertise hr {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.text_see_more {
    height: 100%;
    padding-top: 1%;
    padding-left: 10%;
}

.ligne_lien {
    display: flex;
    align-items: center;
    margin-bottom: 0.75em;
}

.ligne_lien p {
    margin-bottom: 0;
}

.hr {
    border-bottom: solid 1px beige;
}

#carte {
    background: url(../img/home/map.svg) no-repeat;
    background-size: 25px;
}

#data {
    background: url(../img/home/analysis.svg) no-repeat;
    background-size: 25px;
}

#model {
    background: url(../img/home/model.svg) no-repeat;
    background-size: 25px;
}

#machine_learning {
    background: url(../img/home/neural.svg) no-repeat;
    background-size: 25px;
}

#web_app {
    background: url(../img/home/website.svg) no-repeat;
    background-size: 25px;
}

#algae {
    background: url(../img/home/alga.svg) no-repeat;
    background-size: 25px;
}

#cyano {
    background: url(../img/home/cyano.svg) no-repeat;
    background-size: 25px;
}

#conta {
    background: url(../img/home/contaminated.svg) no-repeat;
    background-size: 25px;
}

#project {
    background: url(../img/home/conversation.svg) no-repeat;
    background-size: 25px;
}

#bulb {
    background: url(../img/home/idea.svg) no-repeat;
    background-size: 25px;
}

.small_icon {
    width: 45px !important;
    height: 25px;
    display: inline-block;
}

/*hovers*/

.container_photo:hover {
    cursor: pointer;
}

.container_photo:hover img {
    opacity: 0.1;
    transform: scale(1.5);
}

.container_photo:hover article {
    transform: translateY(-250px);
    -webkit-transform: translateY(-250px);
    -moz-transform: translateY(-250px);
    -o-transform: translateY(-250px);
    -ms-transform: translateY(-250px);
    /* transform: translate(2px, -69px);*/
    /*transform: translate(2px, -220px);
    -webkit-transform: translateY(calc(-150% + 1em));
    */
    /*

	transform: translate(2px, -100%);
	-webkit-transform: translate(2px, -100%);
	-moz-transform: translate(2px, -100%);
	-o-transform: translate(2px, -100%);
	-ms-transform: translate(2px, -100%);
    */
}

.container_photo:hover .see_more {
    /*	transform: translate(0px, 0px);
	-webkit-transform: translate(0px, 0px);
	-moz-transform: translate(0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);*/
    transform: translateY(5rem);
    -webkit-transform: translateY(5rem);
    -moz-transform: translateY(5rem);
    -o-transform: translateY(5rem);
    -ms-transform: translateY(5rem);
    opacity: 1;
}

.container_photo:hover .to_be_hide {
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/*cartes solutions*/

.container_photo_solution {
    background-color: rgba(57, 62, 93, 0.7);
    padding: 0;
    overflow: hidden;
    max-width: 230px;
    min-width: 230px;
    height: 310px;
    margin: 20px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important
}

.container_photo_solution article {
    padding: 10%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.container_photo_solution h2 {
    color: #fff;
    font-weight: 800;
    font-size: 25px;
    border-bottom: #fff solid 1px;
}

.container_photo_solution h4 {
    font-weight: 300;
    color: #fff;
    font-size: 16px;
}

.container_photo_solution img {
    width: 100%;
    height: 310px;
    top: 0;
    left: 0;
    opacity: 0.4;
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -o-transition: all 4s ease;
    -ms-transition: all 4s ease;
    transition: all 4s ease;
}

/***********************ACTUALITES**********************/

/***********************START***************************/

#news {
   /* padding-top: 1em;
    margin-top: -3em;*/
}

/********************SOCIAL-NETWORKS********************/

/***********************START***************************/

.social_network_main {
    /*background-color: #1f74a7;*/
    background-color: #E1E7EA;
    min-height: 10em;
    display: flex;
    align-items: center;
}

.social_network_main h3 {
    /*color: #E1E7EA;*/
    margin-bottom: 1em;
}

/*.text_container{
    display: flex;
    align-items: flex-end; /* Les éléments flexibles sont regroupés au début;
}
*/

.social-icon {
    height: 50px;
    margin-right: 1em;
}

/********************QUI-SOMMES-NOUS********************/

/***********************START***************************/

.presentation {
    /*margin-top: -3em;*/
    padding-bottom: 1em;
    position: relative;
    background: #ffffff;
    /*height: 50vh;*/
}

#title-logo {
    margin-top: 10em;
}

.presentation::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #ffffff;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

.the_team {
    padding-top: 3em;
    background-color: #E1E7EA;
}

.avatar_img {
    /*border-radius: 50%;*/
    height: 15em;
    width: auto;
    shape-outside: circle();
}

.avatar_container {
    display: flex;
    flex-direction: column;
}

.avatar {
    display: flex;
    align-items: center;
    margin-bottom: 3em;
}

.left_avatar {
    align-self: flex-start;
}

.right_avatar {
    align-self: flex-end;
}

.biography_left {
    margin-right: 2em;
}

.biography_right {
    margin-left: 2em;
}

.biography {
    text-align: justify;
}

.biography h5 {
    font-weight: bolder;
}

/*partie reactive de team*/

@media (max-width: 768px) {
    .avatar {
        margin-bottom: 2em;
        justify-content: center;
        align-items: center;
    }
    .right_avatar {
        flex-direction: column-reverse;
        align-self: center;
    }
    .left_avatar {
        flex-direction: column;
        align-self: center;
    }
    .biography_left {
        margin-right: 0;
    }
    .biography_right {
        margin-left: 0;
    }
    .biography h5 {
        text-align: center;
    }
    .avatar_img {
        margin-bottom: 1em;
    }
}

/***********************REFERENCES**********************/

/***********************START***************************/

.container_photo_ref {
    background-color: rgba(253, 253, 253, 0.7);
    height: 310px;
    margin: 5px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important
}

.container_photo_ref img {
    opacity: .9;
    width: 100%;
    height: 100%;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
}

/**********************PAGES_OUTILS*********************/

/***********************START***************************/

.simple_page_main {
    padding-top: 2em;
}

/***********************MACROPHYTES*********************/

/***********************START***************************/

.macrophytes_main h2 {
    color: #68B2A0;
    margin-top: 1em;
    margin-bottom: 1em;
}

.macrophytes_main h3 {
    color: #68B2A0;
}

.macrophytes_color {
    color: #68B2A0;
}

.btn-macrophyte {
    margin-top: 2em;
    background-color: #78bda8;
    color: whitesmoke
}

.container_photo_macrophytes {
    background-color: rgba(57, 62, 93, 0.7);
    padding: 0;
    overflow: hidden;
    max-width: 310px;
    min-width: 310px;
    height: 310px;
    margin: 20px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important
}

.container_photo_macrophytes article {
    padding: 10%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.container_photo_macrophytes h2 {
    color: #fff;
    font-weight: 800;
    font-size: 25px;
    border-bottom: #fff solid 1px;
}

.container_photo_macrophytes h4 {
    font-weight: 300;
    color: #fff;
    font-size: 16px;
}

.container_photo_macrophytes img {
    width: 100%;
    height: 310px;
    top: 0;
    left: 0;
    opacity: 0.4;
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -o-transition: all 4s ease;
    -ms-transition: all 4s ease;
    transition: all 4s ease;
}

.size-20px {
    font-size: 20px;
}

.background_light_grey {
    background: #f7f7f7;
}

#carousel_suivi_macro {
    max-height: 400px;
    min-height: 380px;
    max-width: 400px;
    overflow: hidden;
}

.suivi_ul>li {
    margin-bottom: 0.5em;
}

.animation_macro {
    max-width: 100%;
    border: solid 1px black
}

#article_macro_img {
    /*border: solid 1px black;
      border-radius: 5px;*/
}

.ligne_logo {
    height: 5em;
}

.logo_macrophyte1 {
    height: 80%;
}

.logo_macrophyte2 {
    height: 80%;
}

/*************************CYANO*************************/

/***********************START***************************/

.cyano_main h2 {
    color: #023E8A;
    margin-top: 1em;
    margin-bottom: 1em;
}

.cyano_main h3 {
    color: #0077B6
}

.btn-cyano {
    margin-top: 2em;
    background-color: #0077B6;
    color: whitesmoke
}

/***********************PLANEAU*************************/

/***********************START***************************/

.plandeau_main h2 {
    color: #002855;
    margin-top: 1em;
    margin-bottom: 1em;
}

.plandeau_main h3 {
    color: #e8e8e8
}

.btn-plandeau {
    margin-top: 2em;
    background-color: #0353A4;
    color: whitesmoke
}

/*************************ALTER*************************/

/***********************START***************************/

/****Intro****/

.titles_alter {
    color: #1f74a7;
    /*font-weight: 500;*/
}

.sub_titles_alter {
    font-size: 24pt;
}

.alter_intro {
    margin-top: -2em;
    padding-top: 1em;
    padding-bottom: 1em;
    position: relative;
    background: #f7f7f7;
}

.alter_intro::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #f7f7f7;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

.text_intro_alter {
    margin-top: 2em;
    border-radius: 5px;
    font-size: 20px;
}

/****Benefices****/

@media (max-width: 768px) {
    .list_benef_container {
        display: block;
    }
    .star_diag_container {
        display: none;
    }
}

.list_benef_container {
    margin-left: 2.5em;
    margin-right: 2.5em;
    padding-top: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6fbee6;
    font-size: 20px;
    border-radius: 5px;
}

.alter_benefices h3 {
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
}

.alter_benefices {
    padding-bottom: 4em;
}

.list_benef_container {
    margin-bottom: 1.5em;
    margin-left: 1em;
}

.list_benef::marker {
    color: #004c72;
    font-size: xx-large;
    content: '✔';
    /*content:  '👍';*/
}

.list_benef {
    margin-bottom: 1em;
    margin-left: 1em;
}

#star_diagram {
    border: solid 2px #002855;
    border-radius: 5px;
}

/****Processus****/

.alter_process {
    background: #f7f7f7;
}

.intro_process {
    display: flex;
    align-items: center;
}

#logo_info {
    width: 1.5rem
}

.titles_process {
    display: flex;
    align-items: center;
    font-size: 20pt;
}

.dot {
    height: 35px;
    min-height: 35px;
    min-width: 35px;
    width: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.dot-blue {
    background-color: #6fbee6;
}

.ensemble_img {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.img_formaliser {
    width: 5rem;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.img_1 {
    margin-top: 6em;
    align-self: flex-end;
}

.img_3 {
    margin-top: 6em;
    align-self: flex-end;
}

.img_2 {
    align-self: flex-start;
}

@media (max-width: 768px) {
    .ensemble_img {
        flex-direction: column;
    }
    .img_1 {
        margin-top: 1em;
    }
    .img_3 {
        margin-top: 1em;
    }
    .titles_process {
        align-items: flex-start;
    }
}

#questionnaire {
    max-height: 5em;
}

#all_acteurs_img {
    width: 7rem
}

.visualiser {
    padding-left: 0.1em
}

.img_visualiser {
    height: 5rem;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.img_decider {
    width: 5rem;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

#engrenage {
    height: 6rem;
}

#subreseau, #adhesion {
    height: 10rem;
    width: auto;
}

.ligne {
    justify-self: flex-end;
}

.right_arrow_container {
    display: flex;
    justify-content: flex-end;
    padding-right: 8em;
}

.img_arrow {
    width: 3.5rem;
}

.img_arrow_2 {
    width: 11rem;
}

/****Réalisations****/

.logo_title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.logo_aeag {
    width: 10em;
    height: auto;
}

.logo {
    max-width: 10em;
}

.carousel-caption {
    /*background-color: rgba(255, 255, 255, 0.583);*/
    color: rgba(0, 0, 0)
}

.img_slider {
    height: 570px;
    width: auto;
    margin: auto;
    padding-bottom: 10em;
}

.perso_carousel {
    /*border: solid 2px rgb(133, 133, 133);*/
    border-radius: 5px;
    padding: 2em;
    margin-bottom: 5em;
    /*height: 570px;
    width: auto;*/
}

/*.carousel-item{max-height: 50rem;}*/

.carousel-indicators li {
    background-color: rgb(133, 133, 133)!important;
}

.carousel-indicators .active {
    background-color: black!important;
}

.carousel-control-next, .carousel-control-prev
/*, .carousel-indicators */

    {
    filter: invert(100%);
}

#carousel_img>.carousel-inner>.item>img {
    width: 100%;
    height: 570px;
}

/*.carousel-control-prev{
    color:  rgb(133, 133, 133)
 }*/

.light_bold {
    font-weight: 600;
}

/************************SIG***************************/

/***********************START***************************/

.titles_sig {
    color: #fcae5c;
}

.sub_titles_sig {
    color: #2da07f;
    font-size: 45px;
}

.dot-green {
    background-color: #78bda8
}

#icone_bdd {
    width: 3rem;
}

/*************************CONTACT************************/

/***********************START***************************/

.contact_form {    
    background: #e6e6e6;
    border-radius: 5px;   
    padding: 20px 30px;
    max-width: calc(100vw - 40px);  
   
}

#map_adict { height: 400px; }

#message{width:100%}

.sentence_alert{
    padding: 6px!important;
}
/*************************FOOTER************************/

/***********************START***************************/

footer {
    color: whitesmoke;
    
    min-height: 10em;
    background-color: #1f74a7;
    flex-shrink: 0;
}



/*footer .container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}*/

.footer-icon {
   /* height: 50px;*/
   height: 30px;
}

.first_part_footer{
    background-color: #1f74a7;
}