
.page-header{padding-top: 50px; padding-bottom: 50px;}

.cg-branches{padding-bottom: 50px;

    .branches-list{display: flex; flex-wrap: wrap;

        .single-branch{flex: 0 0 33.33%; max-width: 33.33%; padding-right: 15px;padding-left: 15px; position: relative; margin-bottom: 30px;
            
            @media(max-width:1200px){flex: 0 0 50%; max-width: 50%;}
            @media(max-width:768px){flex: 0 0 100%; max-width: 100%;}

            &::before{content: ''; display: block; position: absolute;top: 0;right: 15px; width: calc(100% - 30px); height: 100%; background: rgba(0,0,0,0.6); z-index: 1; border-radius: 10px;}
            .bg-img{border-radius: 10px;}

            .branch-content{position: absolute; top: 0;right: 15px; width: calc(100% - 30px); height: 100%; z-index: 3; display: flex; flex-direction: column; color:#FFF;
            
                .center-content{justify-self: center; margin: auto; text-align: center; line-height: 1.3;border-top: 2px solid white;border-bottom: 2px solid white;min-width: 80%;padding-top: 5px;padding-bottom: 5px;
                    .name{color: #FFF; margin-bottom: 5px; margin-top: 0;}
                }

                .bottom-content{justify-self: flex-end; display: flex; justify-content: space-between; align-items: center; padding: 0 15px 10px; position: absolute; bottom: 0; right: 0; width: 100%;

                    a{color:#FFF; text-decoration: none;
                        &:not(.icon-link):hover{text-decoration: underline;}
                    }
                    .icon-link{display: inline-block;max-width:25px;}

                    .left-side a{margin-right: 8px;}
                    .right-side a{margin-left: 8px;}

                }

            }
        
        }

    }

}