.call-out{
    padding: var(--p-tb);
    background-size: cover !important;
}

.call-out .heading {
	text-align: center;
	
}

.call-out .cta {
	text-align: center;
    margin-top: var(--global--spacing-vertical);

}

.call-out .copy {
	background: white;
	padding: 20px;
	 margin-top: var(--global--spacing-vertical);
	padding: 3rem 3.5rem;
    background: var(--white) 0% 0% no-repeat padding-box;
    border-radius: 5px;
    font-size: 20px;
    line-height: 25px;
}



.call-out-content-back{
  max-width: 60rem;  
}


.call-out .copy p{
     font-size: 20px;
    font-family: "din-2014", sans-serif;
    line-height: 25px;
    padding-left: 1.5rem;
}


/*Multi background color css*/


.call-out.background-green{
    background-color: var(--bggreen);
    
}

.call-out.background-default{
    background-color: var(--bgred);
}
   

.call-out.background-blue{
    background-color: var(--bgblue);
   
}

.call-out.background-purple{
    background-color: var(--bgpurple);
  
}


.call-out.background-yellow{
    background-color: var(--bgyellow);
   
}


.call-out.background-green .h2-heading, .call-out.background-blue .h2-heading, .call-out.background-purple .h2-heading, .call-out.background-red .h2-heading, .call-out.background-yellow .h2-heading{
   color: var(--white);
    
}

.call-out .copy h1, .call-out .copy h2, .call-out .copy h3, .call-out .copy h4, .call-out .copy h5{
    margin-bottom: 3rem;
    font-family: "din-2014", sans-serif;
}



.call-out.background-gray h2, .call-out.background-white h2{
   color: var(--gray);
    
}

   



.call-out.accent-green .copy p{
    border-left: 2px solid var(--bggreen)
}

.call-out.accent-red .copy p{
    border-left: 2px solid var(--bgred)
}

.call-out.accent-blue .copy p{
    border-left: 2px solid var(--bgblue)
}

.call-out.accent-purple .copy p{
    border-left: 2px solid var(--bgpurple)
}


.call-out.accent-yellow .copy p{
    border-left: 2px solid var(--bgyellow)
}




/*Multi background color css*/


/*Multi color button css*/

.call-out.accent-green a.solid{
    background-color: var(--bggreen);
    color:var(--white);
}

.call-out.accent-red a.solid{
    background-color: var(--bgred);
    color:var(--white);
}

.call-out.accent-blue a.solid{
    background-color: var(--bgblue);
    color:var(--white);
}

.call-out.accent-purple a.solid{
    background-color: var(--bgpurple);
    color:var(--white);
}


.call-out.accent-yellow a.solid{
    background-color: var(--bgyellow);
    color:var(--white);
}




.call-out.accent-green a.outline{
    border:2px solid var(--white);
    color:var(--gray);
}

.call-out.accent-green a.outline:hover{
    background:var(--bggreen);
    color:var(--white);
    border-color: var(--white);
}


.call-out.accent-green.background-gray a.outline{
    border:2px solid var(--green);
    color:var(--gray); /* small-business page hover css for Looking for Refrigeration Upgrades?*/
}

.call-out.accent-green.background-gray a.outline:hover{
    background:var(--bggreen);
    color:var(--white);
    border-color: var(--green);
}




.call-out.accent-red a.outline{
    border:2px solid var(--white);
    color:var(--gray);
}


.call-out.accent-red a.outline:hover{
    background:var(--bgred);
    color:var(--white);
    border-color: var(--white);
}


.call-out.accent-blue a.outline{
    border:2px solid var(--white);
    color:var(--gray);
    
}

.call-out.accent-blue a.outline:hover{
    background:var(--bgblue);
    color:var(--white);
    border-color: var(--white);
}


.call-out.accent-purple a.outline{
    border:2px solid var(--white);
    color:var(--gray);
}

.call-out.accent-purple a.outline:hover{
    background:var(--bgpurple);
    color:var(--white);
    border-color: var(--white);
}


.call-out.accent-yellow a.outline{
    border:2px solid var(--white);
     color:var(--gray);
}

.call-out.accent-yellow a.outline:hover{
    background:var(--bgyellow);
    color:var(--white);
    border-color: var(--white);
}

.call-out a.button, .call-out a.outline{
    padding: 15px 25px;
    border-radius: 4px;
    font-family: "din-2014", sans-serif;
    text-decoration: none;
    font-size: 24px;
    background-color:var(--white);

}


/*Multi color button css*/



@media only screen and (max-width: 30rem) {


    .call-out-content-back{
    padding: 0rem;
        max-width: 90%;
    }
    
    .call-out .copy{
    padding: 2rem 2.5rem;
    font-size: 18px;    
    }

}


@media only screen and (min-width: 768px) and (max-width: 992px) {

.call-out-content-back {
    max-width: 40rem;
}

}