.arl_acordeon{
    width: 100%;
}

.arl_acordeon_item{
    width: 100%;
    margin-bottom: 10px;
}
.arl_acordeon_head{
    width: 100%;
    border-radius: 20px;
    -ms-border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;

    background-color: #EAECEE;
    padding: 10px;
    cursor: pointer;

    transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
}
.arl_acordeon_head:hover{
    background-color: #e4e4e4;
}
.arl_acordeon_triangulo{
    position: absolute !important;
    width: 20px;
    height: 7px;
    top: 50%;
    top: calc(50% - 3.5px);
    top: -moz-calc(50% - 3.5px);
    left: 100%;
    left: calc(100% - 40px);
    left: -moz-calc(100% - 40px);
}
.arl_acordeon_triangulo_expand::after,
.arl_acordeon_triangulo_expand::before,
.arl_acordeon_triangulo_collap::after,
.arl_acordeon_triangulo_collap::before
{
    position: absolute;
    content: "";
    width: 10px;
    height: 3px;
    background-color: #707070;
    border-radius: 5px;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -webkit-transform-origin: center center;
    -o-transform-origin: center center;

    transition: transform 0.4s, -ms-transform 0.4s, -moz-transform 0.4s, -webkit-transform 0.4s, -o-transform 0.4s;
    -webkit-transition: transform 0.4s, -ms-transform 0.4s, -moz-transform 0.4s, -webkit-transform 0.4s, -o-transform 0.4s;
}

.arl_acordeon_triangulo_collap::after{
    top: 50%;
    top: calc(50% - 1.5px);
    top: -moz-calc(50% - 1.5px);
    left: 2px;
    
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}
.arl_acordeon_triangulo_collap::before{
    top: 50%;
    top: calc(50% - 1.5px);
    top: -moz-calc(50% - 1.5px);
    left: 100%;
    left: calc(100% - 12px);
    left: -moz-calc(100% - 12px);
    
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.arl_acordeon_triangulo_expand::after{
    top: 50%;
    top: calc(50% - 1.5px);
    top: -moz-calc(50% - 1.5px);
    left: 2px;
    
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.arl_acordeon_triangulo_expand::before{
    top: 50%;
    top: calc(50% - 1.5px);
    top: -moz-calc(50% - 1.5px);
    left: 100%;
    left: calc(100% - 12px);
    left: -moz-calc(100% - 12px);
    
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

.arl_acordeon_head_title{
    font-family: 'Roboto-Regular';
    font-size: 16px;
    color: #53565A;
    text-align: left;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 2px !important;
}

.arl_acordeon_body{
    width: 100%;
    overflow: hidden;
}
.arl_acordeon_body_off{
    max-height: 0px;

    transition: max-height 0.3s;
    -webki-transition: max-height 0.3s;
}
.arl_acordeon_body_on{
    max-height: 450px;
    
    transition: max-height 0.3s;
    -webki-transition: max-height 0.3s;
}
.arl_acordeon_content{
    width: 100%;
    padding: 15px;
}

.arl_acordeon_content h2{
    font-family: 'FSJoey-Bold';
    font-weight: normal;
    color: #0033A0;
    text-align: left;
    line-height: normal;
    font-size: 22px;
    margin-bottom: 5px !important;
}
.arl_acordeon_content p{
    font-family: 'Roboto-Regular';
    font-weight: normal;
    color: #53565A;
    text-align: left;
    line-height: normal;
    font-size: 16px;
}