/* Robot Hero CSS */

#hero
{
	position: relative;	
	display: grid;	
	width: 100vw;		
	background-color: #fff;		
	background-image: url('../img/hero-bg-1.jpg');
	background-size: cover;
	background-position: center center;	
}

.text-mask
{
	background-image: url('../img/hero-bg-1.jpg');
	background-attachment: fixed;	
	background-size: cover;
	background-position: top;
}

.hero-bg
{
	background-image: url('../img/hero-bg-1.jpg');	
	background-size: cover;
	background-position: center center;
	height: 600px; 
}

.hero-feature
{
        display: grid;
        width: 500px;
        max-width: 75vw;
        justify-content: center;
        justify-self: center;
        margin-top: 250px;
        position: absolute;
        z-index: 10;
}

.hero-feature-sub-variant
{
        margin-top: 150px;
}

.hero-feature h1
{
        color: #fff;
        font-weight: 600;
        font-size: 36px;
        justify-self: center;
        text-align: center;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-shadow: #222222ab 1px 0 30px;
}

.hero-feature p
{
        font-weight: 400;
        color: #fff;
        text-align: center;
        justify-self: center;
        letter-spacing: 2px;
        text-shadow: #222222ab 1px 0 30px;
}

.hero-feature .button
{
        background-color: #C9D853;
        justify-self: center;
        padding: 4px 16px;
        color: #fff;
        grid-row: 1;
        border-radius: 8px;
        box-shadow: 0 2px 4px 2px #0000004f;
}

.hero-feature .button h3
{				
        color: #fff;
        font-variant: all-small-caps;
        font-weight: 500;
        letter-spacing: 1px;
        font-size: 14px;
}

@media( min-width: 768px )
{
        .hero-feature .button h3
        {	
                font-size: 18px;
        }
}

.abtn
{
        background-color: color-mix(in lab, #C9D853, #fff 60%); 
        padding: 4px 16px;
        color: #fff;
        filter: saturate(15);
        border-radius: 8px;
        box-shadow: 0 2px 4px 2px #0000004f;
        transition: all ease .2s;
}

.abtn:hover
{
        cursor: pointer;
        transform: scale(0.95);
}

.abtn h3
{
        color: #fff;
        font-variant: all-small-caps;
        font-weight: 500;
        letter-spacing: 1px;
}


.frame-cta-container {
position: relative;
 bottom: 150px;
 z-index: 15; justify-self: center;
 }
 
@media(min-width: 768px) {
 .frame-cta-container 
    {
bottom: 128px;
    }
 }
.hero-feature-button-container 
{ 
    margin-top: 32px; 
    grid-gap: 16px; 
    justify-content: center; 
}