/***************************************************************************
* Wrapper
****************************************************************************/
.wrapper {
	overflow:hidden;
}

/***************************************************************************
* First Section
****************************************************************************/
.wrapper > .content > .header_section:first-child {
    margin-top: -4rem;
}

/***************************************************************************
* Row
****************************************************************************/
.row {
    max-width: 75rem;
}


/***************************************************************************
* Icons
****************************************************************************/
.icon {
    display: block; position: relative;
    width: 4rem; height: 4rem;
    border-radius: 50%; 
    background-color: var(--typo-primary-color);
    color: #FFFFFF;
    margin-bottom: 1rem;
}
.text-center .icon {
    margin: 0 auto 1rem;
}
.gradient_bg .icon {
    color: var(--typo-primary-color);
    background-color: #FFFFFF;
}
.icon svg {
    width: 2rem; height: 2rem;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.icon svg path {
    fill: currentColor;
}


/***************************************************************************
* Listing
****************************************************************************/
.list_ul ul {
    width: 100%;
    overflow: hidden;
    margin: 0;
}
.list_ul ul li {
    position: relative;
    width: 100%;
    padding: 1.125rem 0 1.125rem 3rem;
    margin: auto;
    list-style: none;
}
.list_ul ul li:before {
    content: ''; position: absolute;
    left: 0; width: 2rem; height: 2rem;
    background: url(../icons/check-solid.svg) no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}
.list_ul ul li:after {
    content: ''; position: absolute;
    bottom: 0; left: -999rem; right: -999rem;
    width: auto; height: 0.125rem; 
    background-color: #EAEAEA;
}
@media screen and (min-width:40em){
    .list_ul ul li {
        width: 75%;
    }
}
@media screen and (min-width:64em){
    .list_ul ul li {
        width: 50%;
    }
}


/***************************************************************************
* Info Area
****************************************************************************/
.columns.info_area {
    position: relative;
    padding: 4rem;
}
.columns.info_area:after {
    content: ''; position: absolute;
    top: 1rem; left: 1rem; right: 1rem; bottom: 1rem;
    width: auto; height: auto; border-radius: 0.375rem;
    background: #e4eaf4;
}
.columns.info_area > * {
    position: relative;
    z-index: 20;
}

@media screen and (min-width:64em){
    .columns.info_area {
        margin-top: -4.5rem;
        padding-top: 5.5rem;
    }
}


/***************************************************************************
* rounded Corner
****************************************************************************/
.rounded_corner .data_ratio,
.rounded_corner img {
    border-radius: 0.375rem;
}