#panel-login ._column[name="benefits"] ._column-content ._column-title
{
    color: #DAA520;
    text-align: center;
    font-size: 32px;
    text-shadow: 2px 2px 1px #00000080;
}

#panel-login ._column[name="benefits"] ._column-header-row .button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    color: #d8d8d8;
    font-size: 0;
    text-transform: uppercase;
    text-align: right;
    vertical-align: middle;
    transition: background .2s linear;
    color .3s linear;
}

#panel-login ._column[name="benefits"] ._column-header-row .button .the-icon {
    display: inline-block;
    position: relative;
    top: 4px;
    left: 0;
    font-size: 22px;
    height: 28px;
    margin: 0 8px 0 0;
    color: #d8d8d8;
    vertical-align: middle;
    text-align: center;
}

#panel-login ._column[name="benefits"] ._column-header-row .button .the-text
{
    display: inline-block;
    width: auto;
    vertical-align: middle;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/****************************************************************************************************
    benefits
****************************************************************************************************/

.benefits-holder
{
    width: 80%;
    margin: 10px auto 30px;
    --badgeSize: 50px;
    font-size: 0;
}

.benefit-promo
{
	margin: 10px 20px;
	padding: 10px;
    background: #ffffff10;

    background: linear-gradient(135deg,
        #000000 calc(var(--badgeSize) / 3),
        #00000020 70%,
        #00000000 80%
    );
    border-radius: 50px 0 0 50px;

    color: #ffffff;
    vertical-align: top;
    opacity: 0;
    animation: fadeIn .5s ease-out forwards;
}

.benefits-holder .benefit-promo:nth-child(1)
{
    margin-right: 5px;
}

.benefit-promo .icon-holder {
	position: relative;
	display: inline-block;
	width: var(--badgeSize);
	height: var(--badgeSize);
    vertical-align: middle;
}

.benefit-promo .text-holder {
	display: inline-block;
    max-width: calc(100% - (var(--badgeSize) + 10px));
    height: 100%;
    margin: -4px 0 0 10px;
    padding: 0;
    vertical-align: middle;
    font-size: 18px;
    line-height: 1.1;
    text-shadow: 2px 2px 1px #00000080;
}




.benefit-promo .icon-holder .border-holder {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin-top: 0;
}



.border-holder .border {
    stroke: #ffffff20;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	vertical-align: top;
}

.benefit-promo .icon-holder .border-holder:nth-child(2) .border {
    stroke: #DAA520;
    opacity: 0;
    animation:
        fadeIn .5s ease-out forwards,
        progress 1s ease-out forwards;
    animation-delay: 3s;
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.benefit-promo .material-icons {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 14px;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
}

.benefit-promo .icon-holder .border-holder:nth-child(2),
.benefit-promo .icon-holder .material-icons,
.benefit-promo .icon-holder .rampant-logo
{
    margin-top: calc(0px - var(--badgeSize));
    margin-bottom: 0;
}










.benefit-promo .icon-holder,
.benefit-promo .icon-holder .border-holder:nth-child(2),
.benefit-promo .material-icons
{
    animation: iconHolderGrowIcon2 1s ease-out;
}

.benefits-holder .benefit-promo
{
    animation-duration: 2s;
}

@keyframes iconHolderGrowIcon2 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}


.benefits-holder .benefit-promo:nth-child(1),
.benefits-holder .benefit-promo:nth-child(1) .icon-holder,
.benefits-holder .benefit-promo:nth-child(1) .icon-holder .border-holder:nth-child(2),
.benefits-holder .benefit-promo:nth-child(1) .icon-holder .border-holder:nth-child(2) .border,
.benefits-holder .benefit-promo:nth-child(1) .material-icons
{
    animation-delay: 2s;
}

.benefits-holder .benefit-promo:nth-child(1),
.benefits-holder .benefit-promo:nth-child(1) .icon-holder .border-holder:nth-child(2) .border
{
    animation-duration: 2s;
}

.benefits-holder .benefit-promo:nth-child(2),
.benefits-holder .benefit-promo:nth-child(2) .icon-holder,
.benefits-holder .benefit-promo:nth-child(2) .icon-holder .border-holder:nth-child(2),
.benefits-holder .benefit-promo:nth-child(2) .material-icons
{
    animation-delay: 2.25s;
}

.benefits-holder .benefit-promo:nth-child(2) .icon-holder .border-holder:nth-child(2) .border,
.benefits-holder .benefit-promo:nth-child(3),
.benefits-holder .benefit-promo:nth-child(3) .icon-holder,
.benefits-holder .benefit-promo:nth-child(3) .icon-holder .border-holder:nth-child(2),
.benefits-holder .benefit-promo:nth-child(3) .material-icons
{
    animation-delay: 2.5s;
}

.benefits-holder .benefit-promo:nth-child(3) .icon-holder .border-holder:nth-child(2) .border,
.benefits-holder .benefit-promo:nth-child(4),
.benefits-holder .benefit-promo:nth-child(4) .icon-holder,
.benefits-holder .benefit-promo:nth-child(4) .icon-holder .border-holder:nth-child(2),
.benefits-holder .benefit-promo:nth-child(4) .material-icons
{
    animation-delay: 2.75s;
}

.benefits-holder .benefit-promo:nth-child(4) .icon-holder .border-holder:nth-child(2) .border,
.benefits-holder .benefit-promo:nth-child(5),
.benefits-holder .benefit-promo:nth-child(5) .icon-holder,
.benefits-holder .benefit-promo:nth-child(5) .icon-holder .border-holder:nth-child(2),
.benefits-holder .benefit-promo:nth-child(5) .material-icons
{
    animation-delay: 3s;
}

.benefits-holder .benefit-promo:nth-child(5) .icon-holder .border-holder:nth-child(2) .border,
{
}

.benefits-holder .benefit-promo:nth-child(5) .icon-holder .border-holder:nth-child(2) .border,
.benefits-holder .benefit-promo:nth-child(6),
.benefits-holder .benefit-promo:nth-child(6) .icon-holder,
.benefits-holder .benefit-promo:nth-child(6) .icon-holder .border-holder:nth-child(2),
.benefits-holder .benefit-promo:nth-child(6) .material-icons
{
    animation-delay: 3.25s;
}

.benefits-holder .benefit-promo:nth-child(6) .icon-holder .border-holder:nth-child(2) .border,
.benefits-holder .benefit-promo:nth-child(7),
.benefits-holder .benefit-promo:nth-child(7) .icon-holder,
.benefits-holder .benefit-promo:nth-child(7) .icon-holder .border-holder:nth-child(2),
.benefits-holder .benefit-promo:nth-child(7) .material-icons
{
    animation-delay: 3.5s;
}

.benefits-holder .benefit-promo:nth-child(7) .icon-holder .border-holder:nth-child(2) .border,
.benefits-holder .benefit-promo:nth-child(8),
.benefits-holder .benefit-promo:nth-child(8) .icon-holder,
.benefits-holder .benefit-promo:nth-child(8) .icon-holder .border-holder:nth-child(2),
.benefits-holder .benefit-promo:nth-child(8) .material-icons
{
    animation-delay: 3.75s;
}

.benefits-holder .benefit-promo:nth-child(8) .icon-holder .border-holder:nth-child(2) .border,
.benefits-holder .benefit-promo:nth-child(9),
.benefits-holder .benefit-promo:nth-child(9) .icon-holder,
.benefits-holder .benefit-promo:nth-child(9) .icon-holder .border-holder:nth-child(2),
.benefits-holder .benefit-promo:nth-child(9) .material-icons
{
    animation-delay: 4s;
}


/****************************************************************************************************
    mobile
****************************************************************************************************/

.sites-holder
{
    width: 90%;
    margin: 30px auto;



    color: #ffffff;
    vertical-align: top;
    text-align: center;
    --badgeSize: 100px;
}

.features-holder
{
    width: 80%;
    margin: 0 auto;


    padding: 10px 0;

    color: #ffffff;
    vertical-align: top;
    text-align: center;
    --badgeSize: 100px;
}

.features-badge,
.site-badge
{
	display: inline-block;
	width: calc((100% / var(--sites)) - 10px);
	max-width: 100px;
    margin: 5px;
    vertical-align: top;

    font-size: medium;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .025em;
    text-shadow: 2px 2px 1px #00000080;

}

.features-badge
{
	width: calc((100% / var(--features)) - 10px);
}

.features-badge .features-icon-holder,
.site-badge .site-logo-holder
{
    width: var(--badgeSize);
    margin: 0 auto;
}

.features-icon-holder .border-holder,
.site-logo-holder .border-holder
{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin-top: 0;
}

.border-holder .border
{
    stroke: #ffffff20;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	vertical-align: top;
}

.features-icon-holder .border-holder:nth-child(1) .border,
.site-logo-holder .border-holder:nth-child(1) .border
{
    background: #00000080;
}

.features-icon-holder .border-holder:nth-child(2) .border,
.site-logo-holder .border-holder:nth-child(2) .border
{
    stroke: #DAA520;
    opacity: 0;
    animation:
        fadeIn .5s ease-out forwards,
        progress .5s ease-out forwards;
}

.features-icon-holder .border-holder:nth-child(2),
.features-icon-holder .features-icon,
.site-logo-holder .border-holder:nth-child(2),
.site-logo-holder .site-logo
{
    margin-top: calc(0px - var(--badgeSize));
    margin-bottom: 0;
}

.features-icon-holder .features-icon,
.site-logo-holder .site-logo
{
    margin-top: calc((0px - var(--badgeSize)) + 8px);
    margin-bottom: 8px;
}






.features-badge .features-icon,
.site-badge .site-logo
{
	display: block;
    width: calc(var(--badgeSize) - 16px);
    height: calc(var(--badgeSize) - 16px);
    margin-left: 8px;
    border-radius: 50%;
    background-color: #00000080;
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(var(--badgeSize) / 2);
}

.features-badge .features-icon[name="person"]
{
    background-image: url('/images/icons/person.svg');
}

.features-badge .features-icon[name="people"]
{
    background-image: url('/images/icons/people.svg');
}

.features-badge .features-icon[name="tip"]
{
    background-image: url('/images/icons/tip.svg');
}

.features-badge .features-icon[name="tip-shows"]
{
    background-image: url('/images/icons/tip-shows.svg');
}

.site-badge .site-logo[name="rampant.tv"]
{
    background-image: url('/images/rtv-logo-white.svg');
}

.site-badge .site-logo[name="babestation.tv"]
{
	background-image: url('/images/site-logos/babestation.tv.svg');
    background-image: url('/images/site-logos/babestation.tv.png');
}

.site-badge .site-logo[name="babex.tv"]
{
    background-image: url('/images/site-logos/babex.tv.png');
}

.site-badge .site-logo[name="sin.tv"]
{
    background-image: url('/images/site-logos/sin.tv.png');
}

.features-badge .features-title,
.site-badge .site-title
{
	margin: 12px 0 6px 0;
}

.features-badge .features-title
{
	text-transform: uppercase;
}


.features-holder .features-badge,
.sites-holder .site-badge
{
    opacity: 0;
    animation:
        fadeIn 2s 0s ease-out forwards;
}
.features-holder .features-badge:nth-child(2),
.sites-holder .site-badge:nth-child(2)
{
    animation-delay: .5s;
}
.features-holder .features-badge:nth-child(3),
.sites-holder .site-badge:nth-child(3)
{
    animation-delay: .75s;
}
.features-holder .features-badge:nth-child(4),
.sites-holder .site-badge:nth-child(4)
{
    animation-delay: 1s;
}

.features-holder .features-badge:nth-child(1) .features-icon-holder .border-holder:nth-child(2) .border,
.sites-holder .site-badge:nth-child(1) .site-logo-holder .border-holder:nth-child(2) .border
{
    animation-delay: .25s;
}
.features-holder .features-badge:nth-child(2) .features-icon-holder .border-holder:nth-child(2) .border,
.sites-holder .site-badge:nth-child(2) .site-logo-holder .border-holder:nth-child(2) .border
{
    animation-delay: .5s;
}
.features-holder .features-badge:nth-child(3) .features-icon-holder .border-holder:nth-child(2) .border,
.sites-holder .site-badge:nth-child(3) .site-logo-holder .border-holder:nth-child(2) .border
{
    animation-delay: .75s;
}
.features-holder .features-badge:nth-child(4) .features-icon-holder .border-holder:nth-child(2) .border,
.sites-holder .site-badge:nth-child(4) .site-logo-holder .border-holder:nth-child(2) .border
{
    animation-delay: 1s;
}

.features-badge .features-icon,
.site-badge .site-logo
{
    opacity: 0;
    animation:
        fadeIn 2s .5s forwards;
}
.features-holder .features-badge:nth-child(2) .features-icon,
.sites-holder .site-badge:nth-child(2) .site-logo
{
    animation-delay: .75s;
}
.features-holder .features-badge:nth-child(3) .features-icon,
.sites-holder .site-badge:nth-child(3) .site-logo
{
    animation-delay: 1s;
}
.features-holder .features-badge:nth-child(4) .features-icon,
.sites-holder .site-badge:nth-child(4) .site-logo
{
    animation-delay: 1.25s;
}

/****************************************************************************************************
    mobile
****************************************************************************************************/

@media only screen and (min-width: 801px) and (max-width: 1000px)
{

    .features-holder,
    .sites-holder
    {
        --badgeSize: 80px;
    }

}

/****************************************************************************************************
    mobile
****************************************************************************************************/

@media only screen and (max-width: 800px) {

    .benefits-holder {
        width: 100%;
    }

    .benefit-promo {
        background: linear-gradient(135deg,
            #000000 calc(80px / 3),
            #00000040 100%
        );
        border-radius: 50px;
    }

    .benefit-promo .icon-holder {
    	width: 50px;
    	height: 50px;
    }

    .benefit-promo .text-holder {
        max-width: calc(100% - 80px);
        margin-left: 10px;
    }

    .benefit-promo .icon-holder .border-holder:nth-child(2),
    .benefit-promo .icon-holder .material-icons,
    .benefit-promo .icon-holder .rampant-logo
    {
        margin-top: -50px;
    }

    .benefit-promo .material-icons {
        padding-top: 12px;
        font-size: 28px;
    }

}