﻿.accordion .sections{
        display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 3rem;
    padding-top: 2rem;
    
}

.accordion .section{
    padding: 10px 30px;
    width: 66.66666%;
   
    flex-direction: row;
}

.accordion {
	background-size: contain;
    background-repeat: no-repeat;
}


.accordion .heading{
    margin-bottom: 2rem;
}

.accordion .heading {
	text-align: center;
}

.accordion .sections .section {
    border-bottom: 1px solid var(--gray);
	background: white;
}


.accordion .sections .section:nth-child(even){
    background:  var(--gray-shade1);
}

.accordion .sections .section .section-header {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 1rem 0;
	cursor: pointer;
}

.accordion .sections .section .section-header .header-title {
	flex: 1;
	padding-left: 1rem;
	display: inline-flex;
	align-self: center;
        font-family: "din-2014", sans-serif;
    font-size: 20px;
}

.accordion .sections .section .header-icon {
	padding-right: 1rem;
	display: inline-flex;
	align-items: center;
}

.accordion .sections .section .header-icon .minus {
	display: none;
}

.accordion .sections .section .section-body {
	padding: 0 1rem;
	display: none;
}

.accordion .sections .section .text-copy p{
    margin-bottom: 1rem;
    line-height: 25px;
     font-family: "din-2014", sans-serif;
}
.accordion .sections .section .text-copy ul li{
    margin-bottom: 1rem;
        list-style: disc;
}
.accordion .sections .section .text-copy ul{
        margin-left:0rem;
    margin-top: 5px;
}
.accordion .sections .section .text-copy ul li, .accordion .sections .section .text-copy ol li{
   line-height: 25px;
     font-family: "din-2014", sans-serif; 
    margin-left: 1.2rem;
}

.accordion .sections .section .text-copy ol{
    list-style:auto;
    margin:1rem;
}


.accordion a button.primary:hover, .accordion a button.primary:focus,
.accordion a button.outline:hover, .accordion a button.outline:focus
{
    opacity: 0.8;
}




/*Multi color button css*/

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

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

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

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


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


.accordion.accent-green a button.outline{
    border:2px solid var(--bggreen);
    color:var(--bggreen);
}

.accordion.accent-red a button.outline{
    border:2px solid var(--bgred);
     color:var(--bggred);
}

.accordion.accent-blue a button.outline{
    border:2px solid var(--bgblue);
     color:var(--bgblue);
}

.accordion.accent-purple a button.outline{
    border:2px solid var(--bgpurple);
    color:var(--bgpurple);
}


.accordion.accent-yellow a button.outline{
    border:2px solid var(--bgyellow);
     color:var(--bgyellow);
}

.accordion a button.outline{
    background-color:var(--white) !important; 
}
.accordion a button.primary, .accordion a button.outline{
    padding: 13px 25px;
    border-radius: 4px;
    font-family: "din-2014", sans-serif;
    text-decoration: none;
    font-size: 20px;
    border:0;
}


/*Multi color button css*/




/*Multi background color css*/


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

.accordion.background-red{
    background-color: var(--bgred);
}
   

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

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


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

.accordion.accent-green svg path{
    fill: var(--bggreen);
}


.accordion.accent-red svg path{
    fill: var(--bgred);
}

.accordion.accent-blue svg path{
    fill: var(--bgblue);
}

.accordion.accent-purple svg path{
    fill: var(--bgpurple);
}

.accordion.accent-yellow svg path{
    fill: var(--bgyellow);
}

/*Multi background color css*/

@media only screen and (max-width: 35em) {
    
    .accordion .section{
            width: 90%;
    }
    
    .accordion {
	
    background-image: none !important;
}

 .accordion .layout{
 width:90%;
 }
}