.mainnavigation {
    transition: all .5s;
    padding: 0;
    font-family: 'FF Clan';
}

.mainnavigation__link {
    font-size: calc(var(--basePX) + 3px);
    text-transform: uppercase;
    /* position: relative; */
    /* padding: .5rem 1rem; */
    color: var(--main-color_cession);
}
.mainnavigation__link:hover {
    color: var(--main-color_acquisition);
    /*fill: var(--main-color_acquisition);*/
}

/* *************** */
@media (max-width: 1066px) {
    .mainnavheader .menu-principal .nav-link {  
        font-size: calc(var(--basePX) + 3px);
    }

    .mainnavheader .menu-principal .nav-link .picto-menu svg {
        width: 35px;
    }
}
 
@media (max-width: 991px) {
    .mainnavigation__link > i {
        margin: 0 .5rem;
    }
    .menuitem_submenu ul.nav {
        display: initial;
    }
    .nav.nav-outils > li {
        width: 33%!important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav.nav-outils > li a .mainnavigation__link {
        color: currentColor
    }
}
@media (max-width: 576px) {
    .nav.nav-outils > li a .mainnavigation__link {
        display: none;
    }
}

.mainnavigation__link--mission {
    color: var(--main-color_mission);
}
.mainnavigation__link--black {
    color: var(--main-color_paragraphe);
}

.mainnavigation__responsive > .d-flex > div:first-of-type {
    position: relative;
}
.mainnavigation__responsive > .d-flex > div:first-of-type:before {
    content:'';
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 400px 20px 0;
    border-color: transparent var(--background_menu-gauche) transparent transparent;
}

.mainnavigation__responsive svg {
    width: 15px;
    height: 15px;
}

#mainnavigation__wrapper #bourse-formation .mainnavigation__link {
    text-transform: initial;
    font-size: calc(var(--basePX) + 2px);
    padding-left: .5rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
}
#mainnavigation__wrapper #bourse-formation .mainnavigation__link:first-of-type {
    padding-top: 0;
}
 
@media (max-width: 992px) {
    #collapseMobileOnly {
        /* height: 100vh; */
        /* background-color: var(--white); */
        /* position: relative; */
    }
    #collapseMobileOnly:before {
        content: "";
        background-color: var(--white);
        width: 100vw;
        height: 100%;
        position: absolute;
        top: 0;
        left: -1rem;
        z-index: -1;
    }
}

@media (max-width: 991px) {
    .nav-outils,
    .nav-outils > * {
        transform: initial;
    }
    .contact--infos {
        text-align: center;
    }
    .menuSidebar,
    .mainnavigation {
        top: 64px; /* avant 86px */
        position: absolute;
    }
    #mainnavigation_htp {
        position: initial!important;
    }
    .mainnavigation__responsive--switch {
        max-width: 288px;
    }
    .mainnavigation__responsive--switch .nav-item a {
        max-width: 140px!important;
    }
    
    
    #mainnavigation__wrapper > div,
    #mainnavigation__wrapper > div > * {
        transform: initial;
    }
    #mainnavigation__wrapper .nav-item {
        width: 100%;
    }
    .infos_contacts {
        display: flex;
        justify-content: center;
    }
    .infos_contacts li {
        display: inline-flex;
        text-align: center;
    }
    .infos_contacts li:first-of-type {
        display: flex;
        width: 100%;
    }

    /* menu principal tablette mobile style */

    .mainnavigation {
        width: 85%;
        background: var(--white);
        top: 94px;
        left: 0;
    }

    .mainnavigation #mainnavigation__wrapper .nav li a i {
        margin: 0 .5rem;
        display: flex;
        justify-content:center;
        text-align: center;
        width: 35px;
    }

    .mainnavigation #mainnavigation__wrapper .nav li a span {
        text-align: left;
        margin-left: 0 !important;
        width: calc(100% - 20% - 40px) !important;
    }

    .mainnavigation #mainnavigation__wrapper .nav {
        flex-direction: column;
    }

    .mainnavigation #mainnavigation__wrapper .nav {
        flex-direction: column;
    }
    /*.mainnavigation #mainnavigation__wrapper .nav.formation-menu {
        width: initial;
    }*/
    .mainnavigation #mainnavigation__wrapper .nav {
        width: 100%;
        justify-content: center;
        /*border-bottom: 1px solid #dee2e6*/ 
    }
    .mainnavigation #mainnavigation__wrapper .nav li a,
    .mainnavigation #mainnavigation__wrapper .nav li.menuitem_submenu {
        display: flex;
        justify-content: space-between!important;
        width: 80%;
        padding: .5rem 0;
    }
    .mainnavigation #mainnavigation__wrapper .nav li a i,
    .mainnavigation #mainnavigation__wrapper .nav li.menuitem_submenu i {
        margin-left: 10%;
        margin-right: 10%;
        width: 35px;
    }
    .mainnavigation #mainnavigation__wrapper .nav li.menuitem_submenu i + .mainnavigation__link--formation > aside span{
        position: absolute;
        right: 10%;
        top: 15px;
        transition: all .5s
    }
    .mainnavigation #mainnavigation__wrapper .nav li.menuitem_submenu i + .mainnavigation__link--formation > aside span::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 6px 6px 0 6px;
        border-color: var(--main-color_formation) transparent transparent transparent;
        border-style: solid;
        display: flex;
        align-items: center;
        top: 0;
        right: 0;
    }
    .mainnavigation #mainnavigation__wrapper .nav li.menuitem_submenu i + .mainnavigation__link--formation > aside span.rotate180deg {
        top: 21px;
        right: 10%;
    }
    .mainnavigation #mainnavigation__wrapper .nav li.menuitem_submenu i + .mainnavigation__link--formation > aside span.rotate180deg::before {
        transform: rotate(180deg);
        right: -12px;
    }

    .mainnavigation #mainnavigation__wrapper .nav li.menuitem_submenu i + .mainnavigation__link--formation > ul a {
        width: 100%;
        padding: .25rem 0 .25rem 1rem;
    }
    .mainnavigation #mainnavigation__wrapper .nav li.menuitem_submenu i + .mainnavigation__link--formation > ul li:first-of-type a {
        padding-top: 1rem;
    }
    .mainnavigation #mainnavigation__wrapper .nav li.menuitem_submenu i + .mainnavigation__link--formation > ul a div {
        text-transform: initial;
    }

    .mainnavigation #mainnavigation__wrapper .nav li a i + div,
    .mainnavigation__link.mainnavigation__link--formation.mainnavigation__link--title.w-100 {
        text-align: left;
        margin-left: 0!important;
        width: calc(100% - 20% - 40px)!important;
    }
    .mainnavigation__link.mainnavigation__link--formation.mainnavigation__link--title.w-100 > span {
        margin-left:0!important;
        padding-left:0!important;
    }

    .mainnavigation__link.color--formation ul li a,
    .mainnavigation__link.color--formation ul li a div {
        color: var(--main-color_formation)!important
    }

}

@media (max-width: 991.98px) {
    #mainnavigation__wrapper .ao,
    #mainnavigation__wrapper .ao > *,
    #mainnavigation__wrapper #outils,
    .mainnavigation #outils,
    #mainnavigation__wrapper #outils > *,
    .mainnavigation #outils > *,
    .skew-transform--bottom-to-top hr {
        transform: initial;
    }
    /* tant qu'il n'y aura pas forfait esn ou autre avec formation, cette ligne est obligatoire pour tablette et mobile */
    /*.mainnavigation__link.mainnavigation__link--formation.mainnavigation__link--title.w-100 {
        width: auto!important;
    }*/
}

@media (max-width: 576px) {
    #mainnavigation__wrapper > div {
        padding-top: 0;
    }
}

@media (min-width: 991.01px) {
    
    /*#mainnavigation__wrapper {
        align-items: stretch !important;
        padding: 1rem 0;
    }*/
    #outils.skew-transform--top-to-bottom {
        transform: translateZ(0) skew(360deg, 0deg);
    }
    #outils.skew-transform--top-to-bottom > * {
        transform: translateZ(0) skew(360deg, -6deg);
    }
}
@media (min-width: 991.01px) and (max-width: 1199.98px) {
    
    .nav.ao .nav-link--missions,
    #outils + .nav li .nav-link--missions {
        padding-bottom: 1rem !important;
    }
    
    .mainnavheader__menu.mainnavheader__menu--offline .nav-item {
        margin-left: 0!important;
        margin-right: 0!important;
        width: 100%;
    }
    .mainnavheader__menu.mainnavheader__menu--offline .nav-item a {
        width: 100%;
    }
}
@media (min-width: 1081px) and (max-width: 1199.98px) {
    /* .mainnavheader__menu.mainnavheader__menu--offline .nav-item:nth-of-type(2) {
        margin-left: 1rem!important;
        margin-right: 1rem!important;
    } */
}



#mainnavigation__wrapper .nav-hitechboard {
    padding: 24px 40px 0 22px;
}
#mainnavigation__wrapper .ao {
    background: transparent linear-gradient(65deg, var(--main-color_ao) 0%, var(--secondary-color_ao) 100%) 0% 0% no-repeat padding-box;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}

#mainnavigation__wrapper #partenaires-editeurs,
#mainnavigation__wrapper #forfaits-esn,
#mainnavigation__wrapper #bourse-formation {
    margin-left: 65px;
}
.fixed-right-20 {
    right: 0;
    position: absolute;
}
.fa-chevron-down {
    transition: all .25s;
}
.fa-chevron-down.rotate {
    transform: rotate(-180deg);
}
    
#mainnavigation__wrapper .nav-link--profils {
    color: var(--secondary-color_profil);
    letter-spacing: 0px;
    text-transform: uppercase;
    font-size: calc(var(--basePX) + 3px);
}
#mainnavigation__wrapper .nav-link--missions {
    letter-spacing: 0px;
    text-transform: uppercase;
    font-size: calc(var(--basePX) + 3px);
}
/* Sidebar zone blanche */
.menuSidebar #outils,
.mainnavigation #outils {
    padding: .5rem 1rem;
    background: white;
}

/* Sidebar footer */
.nav-link--telephone,
.nav-link--email {
    font-size: calc(var(--basePX) + 3px);
}

.anim_hover {
    text-align: center;
    position: relative;
}
.anim_hover:hover svg {
    color: var(--white);
}
.anim_hover:after {
    transform: translateZ(0) skew(360deg, 6deg);
}
.anim_hover:hover:after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 110%;
    bottom: -5%;
    left: 0;
    animation: fadebackground .25s linear;
    transform-style: preserve-3d;
    animation-fill-mode: forwards;
}
.anim_hover:hover p {
    display: block;
    animation: fadeIn .5s;
    transform-style: preserve-3d linear;
    animation-fill-mode: forwards;
}
.anim_hover:hover svg {
    animation: moveTop .75s linear;
    transform-style: preserve-3d;
    animation-fill-mode: forwards;
}

.anim_hover:hover a:hover {
    text-decoration: none;
}

/* ************ */

@media (min-width: 1400.01px) {
    /* version grande du menu */

    .menuitem_submenu {
        padding: 0 0 0 1rem;
    }
    .menuitem_submenu .mainnavigation__link--formation span {
        position: relative;
    }
    .menuitem_submenu .mainnavigation__link--formation span::after {
        position: absolute;
        top: 0;
        right: -20px;
        content: "";
        color: var(--main-color_formation);
        background: url("/assets/img/svg/fleche_formation.svg") no-repeat center center;
        width: 15px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(2 * var(--basePX) + 5px)!important;
        transform: rotate(180deg);
    }
    .menuitem_submenu .mainnavigation__link--formation:hover span::after {
        transform: initial;
    }
    
    .menuitem_submenu.hover .mainnavigation__link--formation > ul {
        opacity: 1;
        transition: all 0.7s ease-out;
        display: initial;
    }
    .menuitem_submenu.hover .mainnavigation__link--formation > ul li:first-of-type {
        animation: fadeIn 1.5s;
    }
    .menuitem_submenu.hover .mainnavigation__link--formation > ul li:nth-of-type(2) {
        animation: fadeIn 1.75s;
    }
    .menuitem_submenu.hover .mainnavigation__link--formation > ul li:nth-of-type(3) {
        animation: fadeIn 2s;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
          to { opacity: 1; }
    }
    /*.mainnavigation--fluid .mainnavigation__link i,
    .menuitem_submenu i {
        width: 35px;
        display: inline-block;
        text-align: center;
        margin-right: 15px;
    }*/
    .menuitem_submenu .mainnavigation__link .nav-item:not(:first-of-type) .mainnavigation__link {
        padding-top: 0;
    }
    .menuitem_submenu .mainnavigation__link--title > span {
        font-size: calc(var(--basePX) + 3px);
        color: var(--main-color_formation);
        text-transform: uppercase;
    }
    .menuitem_submenu > .mainnavigation__link.mainnavigation__link--title {
        padding-right: 1rem!important;
        padding-left: 0!important;
    }

    .menuitem_submenu .mainnavigation__link {
        text-transform: initial;
        font-size: calc(var(--basePX) + 2px);
        padding-left: .5rem;
        padding-top: .25rem;
        padding-bottom: .25rem;
    }
}

@media (min-width: 991.01px) and (max-width: 1400px) {
    /* sous menu formation */
    .mainnavigation__link--formation .nav-item .mainnavigation__link .mainnavigation__link--title {
        padding-left: 0!important;
    }
    .mainnavigation--fluid .mainnavigation__link .nav-item .mainnavigation__link--title .mainnavigation__link--title {
        padding-left: 0;
    }
    .mainnavigation--fluid .nav > .nav {
        /*height: 58.2px;*/
        align-items: center;
    }
    /* favoris */
    .mainnavigation__link--favoris {
        position: relative;
    }
    .mainnavigation__link--favoris:after {
        content: "";
        height: 70px;
        width: 100%;
        top: -6px;
        left: 0;
        background-color: var(--main-color_freelance);
        position: absolute;
        z-index: -1;
    }
    /* ancienne version sans le skew pour outils */
    .mainnavigation--fluid .mainnavigation__link--favoris:hover > li a {
        height: 40px;
    }
    .mainnavigation--fluid .mainnavigation__link--favoris > .mainnavigation__link,
    .mainnavigation--fluid .mainnavigation__link.color--mission > .mainnavigation__link,
    .mainnavigation--fluid .mainnavigation__link.color--AO_secondary > .mainnavigation__link,
    .mainnavigation--fluid .menuitem_submenu > .mainnavigation__link {
        display: none!important;
    }
    .mainnavigation--fluid .menuitem_submenu {
        padding: .5rem 1rem;
    }
    .mainnavigation--fluid .mainnavigation__link--favoris:hover > .mainnavigation__link,
    .mainnavigation--fluid .mainnavigation__link.color--mission:hover > .mainnavigation__link,
    .mainnavigation--fluid .mainnavigation__link.color--AO_secondary:hover > .mainnavigation__link,
    .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link {
        display: block!important;
        position: absolute;
        bottom: -31px;
        left: calc(-100% - .5rem);
        width: 100%;
        text-align: center;
        padding: .5em;
        min-width: 200px;
        box-shadow: 0 0 10px 0 rgba(26,26,26,.2);
        margin-left: 0;
    }
    .mainnavigation--fluid .mainnavigation__link.color--mission:hover > .mainnavigation__link {
        bottom: -53px;
    }
    .mainnavigation--fluid .mainnavigation__link.color--AO_secondary:hover > .mainnavigation__link {
        bottom: -47px;
    }
    /*.mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link {
        bottom: -24px!important;
    }*/
    .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link span {
        display: none!important;
    }
    .mainnavigation--fluid .mainnavigation__link.color--mission:hover > .mainnavigation__link {
        bottom: -44px;
    }
    .mainnavigation--fluid .mainnavigation__link--favoris:hover > .mainnavigation__link  {
        background-color: var(--main-color_freelance);
    }
    .mainnavigation--fluid .mainnavigation__link.color--mission:hover > .mainnavigation__link {
        background-color: var(--main-color_mission);
        color: var(--white)!important
    }
    .mainnavigation--fluid .mainnavigation__link.color--AO_secondary:hover > .mainnavigation__link {
        background-color: var(--secondary-color_ao);
        color: var(--white)!important
    }
    .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link {
        background-color: var(--main-color_formation);
        color: var(--white)!important
    }
    .mainnavigation--fluid .mainnavigation__link--favoris > .mainnavigation__link:before,
    .mainnavigation--fluid .mainnavigation__link.color--mission:hover > .mainnavigation__link:before,
    .mainnavigation--fluid .mainnavigation__link.color--AO_secondary:hover > .mainnavigation__link:before,
    .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link:before  {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        content: "";
        left: calc(50% - 7px);
        top: -15px;
        display: block;
        position: absolute;
        pointer-events: none;
        transform: rotate(90deg);
    }
    .mainnavigation--fluid .mainnavigation__link--favoris:hover > .mainnavigation__link:before,
    .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link:before  {
        border-right: 10px solid var(--white);
    }
    .mainnavigation--fluid .mainnavigation__link.color--mission:hover > .mainnavigation__link:before  {
        border-right: 10px solid var(--main-color_mission);
    }
    .mainnavigation--fluid .mainnavigation__link.color--AO_secondary:hover > .mainnavigation__link:before  {
        border-right: 10px solid var(--secondary-color_ao);
    }
}

@media (min-width: 991.01px) and (max-width: 1300px) {
    .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link {
        bottom: -154px;
    }
}

@media (min-width: 1300.01px) {
    .mainnavigation--fluid .menuitem_submenu,
    .mainnavigation--fluid .formation-menu {
        position: relative;
    }
    .mainnavigation--fluid .formation-menu:hover > li:after {
        content:"";
        height: 360%;
        top:0;
        left: 0;
        width: 100%;
        position: absolute;
        z-index: 1;
    }
    .mainnavigation--fluid .formation-menu > .menuitem_submenu > .mainnavigation__link ul {
        display: none!important;
    }
    .mainnavigation--fluid .formation-menu:hover > .menuitem_submenu > .mainnavigation__link ul {
        display: block!important;
        position: absolute;
        bottom: -24px!important;
        left: calc(-100% - .5rem);
        width: 100%;
        text-align: center;
        padding: .5em;
        min-width: 200px;
        /*box-shadow: 0 0 10px 0 rgba(26,26,26,.2);*/
        margin-left: 0;
    }
    .mainnavigation--fluid .formation-menu:hover > .menuitem_submenu > .mainnavigation__link ul {
        bottom: -130px;
        left: calc(4% - .5rem);
        background: var(--main-color_formation);
        z-index: 2;
    }
    .mainnavigation--fluid .formation-menu:hover > .mainnavigation__link:before  {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        content: "";
        left: calc(40% - 7px);
        top: 34px;
        display: block;
        position: absolute;
        pointer-events: none;
        transform: rotate(90deg);
        border-right: 10px solid var(--secondary-color_mission);
    }
    .mainnavigation__link--favoris:after {
        content: "";
        height: 70px;
        width: 100%;
        top: -6px;
        left: 0;
        background-color: var(--main-color_freelance);
        position: absolute;
        z-index: -1;
    }
}
@media (min-width: 991.01px) and (max-width: 1400px) {
    .mainnavigation--fluid .formation-menu:hover > .menuitem_submenu > .mainnavigation__link ul {
        left: calc(4% - .5rem);
        bottom: -175px !important;
    }
    .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link::before {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        content: "";
        left: calc(50% - 7px);
        top: -14px;
        display: block;
        position: absolute;
        pointer-events: none;
        transform: rotate(90deg);
        border-right: 10px solid var(--main-color_formation);
    }
}

@media (min-width: 1400.01px) {
    .mainnavigation--fluid .formation-menu:hover > .menuitem_submenu > .mainnavigation__link ul {
        left: calc(-40% - .5rem);
        bottom: -128px !important;
    }
    .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link::before {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        content: "";
        left: calc(36% - 7px);
        top: 34px;
        display: block;
        position: absolute;
        pointer-events: none;
        transform: rotate(90deg);
        border-right: 10px solid var(--main-color_formation);
    }
}
@media (min-width: 1200px) and (max-width: 1300px) {
    .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link {
        bottom: -199px!important;
    }
}
@media (min-width: 991.01px) and (max-width: 1199.98px) {
    .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link {
        bottom: -199px!important;
    }
}

@media (max-width: 1500px) {

    .mainnavigation--fluid .mainnavigation__link--favoris > li a {
        height: 45px;
        position: relative;
        z-index: 2;
    }
    .mainnavigation--fluid .mainnavigation__link--favoris > li:hover a:after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: calc(100% + 2rem);
        top: -1rem;
        left: 0;
        animation: fadebackground .25s linear;
        transform-style: preserve-3d;
        animation-fill-mode: forwards;
        transform: translateZ(0) skew(360deg, 6deg);
    }
    .mainnavigation--fluid .mainnavigation__link--favoris > li:hover a,
    .mainnavigation--fluid .mainnavigation__link--favoris > li:hover {
        color: var(--white)!important;
    }

    @keyframes fadebackground {
        from {
            background-color: var(--white);
        }
        to {
            background-color: var(--main-color_esn-forfait);
        }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
          to { opacity: 1; }
    }
    @keyframes moveTop {
        from { margin-top: 0; }
          to { margin-top: -0.5rem; }
    }

    .mainnavigation--fluid .nav-outils > li a .mainnavigation__link  {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: currentColor;
        font-size: calc(var(--basePX) + 2px)!important;
        line-height: 13px;
        text-transform: initial;
        animation: fadeIn 1s;
    }

    .mainnavigation--fluid .mainnavigation__link--mail .mainnavigation__link--title {
        font-size: calc(var(--basePX) + 2px);
        text-transform: lowercase!important;
    }

    .mainnavigation--fluid a.mainnavigation__link--profil,
    .mainnavigation--fluid a.mainnavigation__link--profil .mainnavigation__link--title {
        color: var(--tertiary-color_profil)!important;
    }
    .mainnavigation--fluid a.mainnavigation__link--mission,
    .mainnavigation--fluid a.mainnavigation__link--mission .mainnavigation__link--title {
        color: var(--secondary-color_mission)!important;
    }
}

@keyframes fadebackground {
    from {
        background-color: var(--white);
    }
    to {
        background-color: var(--main-color_esn-forfait);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes moveTop {
    from { margin-top: 0; }
      to { margin-top: -0.5rem; }
}


/* menu bouton */
.menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 0;
}

.menu svg {
    border: 1px solid #707070;
    border-radius: .25rem;
}

.line {
    fill: none;
    stroke: #707070;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}
.line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}
.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}