/*  ACCORDION  =============================================================================*/
.accordion {width: 100%; margin: 0px 0px 1px 0px; padding: 1.5% 3% 1.2% 3%;
background-color: #a094a5; font-family: 'Open Sans', Helvetica, sans-serif; font-size: 15px; color: #fff; text-align: left; cursor: pointer; border: none; outline: none; transition: 0.4s;}

.accordion.top {border-radius: 5px 5px 0px 0px;}
.accordion.bottom {border-radius: 0px 0px 5px 5px;}
.active .accordion.bottom {border-radius: 0px 0px 0px 0px;}
.active, .accordion:hover {background-color: #a094a5;}
.accordion:hover {background-color: #b2a9b6;}
.accordion:after {margin-left: 5px; font-size: 18px; font-weight: bold; color: #fff; float: right; content: '\002B';}
.active:after {content: "\2212";}

.panel {max-height: 0; min-height: 0; margin-top: 0px; padding: 0% 2% 0% 4%; background-color: #fff; border-left: 1px dashed #b2a9b6; border-right: 1px dashed #b2a9b6; overflow: hidden; transition: max-height 0.2s ease-out;}
.panel.bottom {margin-top: -5px; border-bottom: 1px dashed #b2a9b6;}
.panel p {margin: 2% 0% 2% 0%;}


div.servicesContainer {width: 100%; margin: 0% auto 1% auto; padding: 0%; overflow: hidden;}
div.servicesTopic {width: 49.5%; min-height: 0; padding: 0% 0% 0% 0%; float: left;}
div.servicesAudience {width: 47.5%; min-height: 0; margin: 0% 0% 0% 0%; padding: 0% 0% 2% 0%; float: right;}

div.servicesContainer ul {margin: 2% 0% 0% 10%; padding: 0%;}
div.servicesContainer li {margin: 0% 0% .5% 0%; font-size: 13px; line-height: 1.25;}

a.button {width: 100px; margin: 0% 2% 2% 0%; border: none; color: white; padding: 5px 8px; text-align: center; text-decoration: none; display: block; cursor: pointer; background-color: #ff0000; border-radius: 3px; font-size: 10px; float: right;}
a.button:hover {background-color:#ffc0cb;}


/*  BEGIN RESPONSIVE  =============================================================================
/* 1090px */
@media only screen and (max-width: 1090px) {
div.servicesContainer li {margin: 0% 0% .5% 0%; font-size: 12px;}
a.button {width: 100px; margin: 0% 2% 2% 0%; border: none; color: #fff; padding: 5px 8px 5px 8px; border-radius: 3px; font-size: 9px; font-weight: normal;}
}


/*  840px  =============================================================================*/
@media only screen and (max-width: 840px) {
div.servicesTopic {width: 47%; padding: 0% 0% 3% 0%;}
div.servicesAudience {width: 50%; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%;}

div.servicesContainer ul {margin: 2% 0% 0% 7%; padding: 0%;}
div.servicesContainer li {margin: 0% 0% .5% 0%; font-size: 11px; line-height: 1.25;}
a.button {width: 100px; margin: 0% 2% 2% 0%; padding: 5px 8px 5px 8px;}
}


/*  660px  =============================================================================*/
@media only screen and (max-width: 660px) {
.accordion {font-size: 14px;}
div.servicesTopic {width: 100%; padding: 0% 0% 1% 0%;}
div.servicesAudience {width: 100%; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%;}
a.button {float: none; margin: 1.5% auto 2.5% auto; }

}


/*  480px  =============================================================================*/
@media only screen and (max-width: 480px) {
.accordion {font-size: 13px;}
.accordion:after {font-size: 13px;}
}