/* Bootstrap 4 Accordion Menu */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
ul { list-style-type: none; }
a { color: #b63b4d; text-decoration: none; }
.accordion {
    width: 100%;
    background: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 0px
}
.accordion .link {
    cursor: pointer;
    display: block;
    padding: 6px 6px 6px 12px;
    border-bottom: 1px solid #F0F0F0; /* line color on the headline: #F0F0F0 */
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
}
.accordion li:last-child .link { border-bottom: 0 }
.accordion li i {
    position: absolute;
/*    top: 16px;*/
/*    top: 8px;*/
/*    left: 12px;*/
/*    font-size: 18px;*/
/*    color: #595959;*/
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
}
.accordion li i.fa-chevron-down { top: 10px; right: 12px; left: auto; font-size: 13px }
.accordion li i.fa-angle-down { top: 10px; right: 12px; left: auto; font-size: 13px }
.accordion li.open .link { /*color: brown;*/ }
.accordion li.open i { /*color: brown;*/ }
.accordion li.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}.accordion li.open i.fa-angle-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}
.submenu {
    display: none;
    background: #FFFFFF;
    font-size: 14px;
}
.submenu li { border-bottom: 1px solid #F0F0F0; /* line color inside the menu: #F0F0F0 */ }
.submenu a {
    display: block;
    text-decoration: none;
    color: #212529;
    padding: 6px;
    padding-left: 42px;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
/*.submenu a:hover { background: lightgray; color: #FFF }*/
/*.submenu a:hover { background: #666666; color: #E6E6E6; }*/
.submenu a:hover { background: #F7F7F7; color: #212529; }
.submenu_angleRight { font-size: 12px; color: #B3B3B3; margin: 2px 3px 0px 6px; }
.submenu_textAlignment { margin: 0px 0px 0px 3px; }
.headerText_accV1 { font-size: 14px; text-transform: uppercase; }
.icon_React_v1 {
    background: url('https://res.cloudinary.com/analogyofpearl/image/upload/v1637071769/analogyofpearl/images/icon_React.svg'); 
    height: 21px; width: 21px; top: 7px; left: 14px; background-repeat:no-repeat; display: block;
}
.icon_JavaScript {
/*    background: url('https://res.cloudinary.com/analogyofpearl/image/upload/v1637195667/analogyofpearl/images/icon_JavaScript_angle.svg');*/
    background: url('https://res.cloudinary.com/analogyofpearl/image/upload/v1637196121/analogyofpearl/images/icon_JavaScript_square.svg');
    height: 21px; width: 21px; top: 7px; left: 14px; background-repeat:no-repeat; display: block;
}
.icon_CSS {
    background: url('https://res.cloudinary.com/analogyofpearl/image/upload/v1637242355/analogyofpearl/images/icon_CSS_w_frame_v2.svg');
    height: 21px; width: 21px; top: 7px; left: 14px; background-repeat:no-repeat; display: block;
}
.icon_HTML {
    background: url('https://res.cloudinary.com/analogyofpearl/image/upload/v1637243233/analogyofpearl/images/icon_HTML.svg');
    height: 21px; width: 21px; top: 7px; left: 14px; background-repeat:no-repeat; display: block;
}