/* accordion  
*/
[class^="icon-"]::before, [class*=" icon-"]::before {
    font-family: "bruces";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: 1.0625rem;
    text-align: center;
    opacity: 1;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: 0;
    font-size: 130%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}



.accordion {
    background: #066672;;
    border-bottom: 0 solid #1a1a1a;
    color: #ffffff;
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .2rem;
    padding: .6rem .75rem .5rem .75rem;
    text-decoration: none;
    transition: all 0.15s linear 0s;
    width: 100%;
    text-align: left;
}
.accordion:hover, .accordion.active {
    background-color:#4c4c4c;
}

.accordion h2.icon-resize::before {
    content: '\002b';
}
.accordion.active h2.icon-resize::before {
    content: '\2212';
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0ms ease-in-out;
    opacity: 0;
    margin-bottom:2px;
}

div.panel.show {
    opacity: 1;
    transition: 500ms ease-in-out;
    max-height: 800px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
@media (max-width: 599px){
.tcc.wd80, #assessmentsummary {
    width:100% !important;
}
}
@media (min-width: 600px) { 

.tcc.wd80, #assessmentsummary {

width:80% !important;
}
}