/* Call to action CSS */

/* - */

.call-to-action
{
	background-color: #fff;
    border-top: solid 4px #3E16FF;
}

.call-to-action .element
{
    justify-self: center;
    grid-gap: 32px;
}

.call-phone-link
{
    grid-row: 1;
    justify-self: center;
    align-self: center;
}

.call-phone
{    
	background-color: #737373;
    
	width: 96px;
    
	margin-top: 32px;
	margin-bottom: 0px;
	
	justify-self: center;
    
    transition: background-color ease .4s;
}

@media( min-width:768px )
{
	.call-phone
	{
		margin-top: 32px;
		margin-bottom: 32px;
		justify-self: start;
	}
}

.call-phone:hover
{
    cursor: pointer;
    background-color: #393939;
}

.action-txt
{
	display: grid;
    
	grid-gap: 8px;
	align-content: center;
	justify-content: center;
    
    margin-bottom: 32px;
}

@media( min-width:768px )
{
	.action-txt
	{
		justify-content: start;
        grid-row: 1;
        margin-bottom: 0px;
	}
}

.action-txt h2
{
	font-weight: 200;
	color: #3E16FF;
    justify-self: center;
}

@media( min-width:768px )
{
    .action-txt h2
    {
        justify-self: start;
    }
}


/* - */

.alt-call-to-action
{
    background-color: #3E16FF;
    padding: 32px 0;
}

.alt-call-to-action .workspace
{
    justify-content: center;
    grid-gap: 32px;
}

@media( min-width:768px )
{
    .alt-call-to-action .workspace
    {
        grid-template-columns: auto auto;
    }
}

.alt-call-to-action h2
{
    display: grid;
    justify-self: center;
    align-self: center;
    text-align: center;
    color: #fff;
}

.alt-call-to-action a
{
    margin-left: 8px;
    color: #fff;
    background-color: #3E16FF;
    
    text-decoration: none;    
    padding: 8px 16px 6px;
    
    border-radius: 32px;
    border: solid #fff 2px;
    transition: ease background .4s, ease color .4s;
}

.alt-call-to-action a:hover
{
    cursor: pointer;
    background-color: #fff;
    color: #3E16FF;
}