/* responsabilites sections */

#responsabilites-sections {
    background-color: #EBF9F8;
}

#responsabilites-sections #container {
    width: 1100vw;
    background-color: #EBF9F8;
}

#responsabilites-sections h2,
#responsabilites-sections h3 {
    color: #244F4E;
}

.road1 {
    width: 1100vw;
    position: absolute;
    height: 50px;
    bottom: 0;
    left: 0;
    background: #468986 url(../img/roadLInes.svg) repeat-x 0 20px
}

#responsabilites-sections .panel {
    padding-bottom: 200px;
}

.notes {}

.notes .note1 {
    position: absolute;
    animation: note 2s infinite 1s;
    opacity: 1;
    top: 20px;
}

.notes .note2 {
    position: absolute;
    animation: note 3s infinite 0s;
    opacity: 1;
    left: 30px;
}

.notes .note3 {
    position: absolute;
    animation: note 4s infinite 2s;
    opacity: 1;
    left: 40px;
    top: 50px;
}

@keyframes note {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }
    20% {
        opacity: 1;
        transform: translateY(30px)
    }
    70% {
        opacity: 0.3;
    }
    100% {
        opacity: 0
    }
}

@media screen and (max-height: 770px) {
    #responsabilites-sections .panel {
        padding-bottom: 140px;
    }
    .road1 {
        height: 25px;
        background-position: center center;
    }
    #greenTram {
        height: 90px;
    }
    .resp-bg1 {
        height: 130px;
        bottom: 25px!important;
    }
    .resp-bg2 {
        height: 140px;
        bottom: 25px!important;
    }
    .resp-bg3,
    .resp-bg4,
    .resp-bg5,
    .resp-bg6,
    .resp-bg7,
    .resp-bg10,
    .resp-bg9,
    .resp-bg11 {
        height: 140px;
        bottom: 25px!important;
    }
    .resp-bg8 {
        height: 80px;
        bottom: 25px!important;
    }
    #panel-8 .wrap-cols {
        display: block;
    }
    #panel-8 .wrap-cols .col {
        width: 100%!important;
        margin-bottom: 20px;
    }
    #panel-8 .wrap-cols .col .nbrDisplay {
        display: inline-block;
        margin: 0 30px;
    }
}

@media (max-width: 850px) {
    #responsabilites-sections #container {
        background-color: #C8F1EE;
    }
    .content {
        height: calc(100vh - 60px);
    }
    .resp-bg1,
    .resp-bg2,
    .resp-bg3,
    .resp-bg4,
    .resp-bg5,
    .resp-bg6,
    .resp-bg7,
    .resp-bg8,
    .resp-bg9,
    .resp-bg10,
    .resp-bg11 {
        height: 62px;
        bottom: 12px!important
    }
    .green-tree,
    .green-tree2 {
        height: 25px;
    }
    #greenTram {
        height: 35px;
        bottom: 5px!important;
    }
    .road1 {
        height: 12px;
        background-position: center center;
    }
}