/* Accordion Section 
================================================== */
.accordion {
	/* font-family:'Roboto', sans-serif; */
	font-weight: 700;
	font-size: 1.1em; /* h4 style */
	line-height: 1.15em;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:20px;
	cursor: pointer;
	border: none;
	text-align: left;
	outline: thin;
	transition: transform 0.8s ease-in-out;
	-webkit-transition: -webkit-transform .8s ease-in-out;
	-ms-transition: -ms-transform .8s ease-in-out;
}

.twelve.columns .accordion {
	padding-left:10px;
	padding-right:15px;
}


.accordion:before {
    content: "\FF0B";
    float: right;
    position: relative;
    bottom: 0px;
    transition: transform .5s ease-in-out;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    -ms-transition: -ms-transform .5s ease-in-out;
}

.active.accordion:before {
    content: "\FF0B";
    float: right;
    transform: rotate(45deg);
    	-webkit-transform: rotate(45deg);
  		-moz-transform: rotate(45deg);
 		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	transition: transform .5s ease-in-out;  
		-webkit-transition: -webkit-transform .5s ease-in-out;
    	-ms-transition: -ms-transform .5s ease-in-out;
    
}

.accordion span {
	font-weight:400;
	font-size:0.9em;
	line-height:1.5em;
}

.panel {
    background-color: white;
    max-height: 0;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 25px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel li {
	line-height:1.5em}
	


/*---- COLOURS ---- */ 


.accordion#dhe {
	background-color: #c9d5e0;
	color: #00205b;
}

.accordion#dhe:hover {
	background-color: #fff;
	color: #00205b;	
}


.accordion#stem {
	background-color: #00b140;
	color: #00205b;
}

.accordion#stem:hover {
	background-color: #fff;
	color: #00205b;	
}


.accordion#teal {
    background-color: #5db1b3;
    color: #fff;
}

.accordion#teal:hover {
    background-color: #fff;
    color: #5db1b3;
}

.accordion#blue {
    background-color: #009cde;
    color: #fff;
}

.accordion#blue:hover {
    background-color: #fff;
    color: #009cde;
}

.accordion#orange {
    background-color: #dc4405;
    color: #fff;
}

.accordion#orange:hover {
    background-color: #fff;
    color: #dc4405;
}

.accordion#green {
    background-color: #00b140;
    color: #fff;
}

.accordion#green:hover {
    background-color: #fff;
    color: #00b140;
}

.accordion#red {
    background-color: #c8102e;
    color: #fff;
}

.accordion#red:hover {
    background-color: #fff;
    color: #c8102e;
}

.accordion#grey {
    background-color: #666666;
    color: #fff;
}

.accordion#grey:hover {
    background-color: #fff;
    color: #666666;
}

.accordion#datagreen /*same as dhe. should be deleted eventually*/ {
	background-color: #c9d5e0;
	color: #00205b;
}

.accordion#datagreen:hover {
	background-color: #fff;
	color: #00205b;
}




/* Accordion FAQ 
================================================== */

.accordionfaq	 {
	font-family:'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:1.15em;
	line-height:1.15em;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:50px;
	cursor: pointer;
	border: none;
	text-align: left;
	outline: thin;
	transition: 0.4s;
	background-color: #fff;
    color: #000;
}

.accordionfaq:before {
    content: "\FF0B";
    float: left;
    margin-right:10px;
    padding-bottom:22px;
}

.active.accordionfaq:before {
    content: "\FF0D";
    float: left;
    margin-right:10px;
    padding-bottom:10px;
}


.accordionfaq ~ .panel {
    background-color: white;
    max-height: 0;
	margin-top: 8px;
	margin-left: 40px;
	margin-right: 25px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.twelve.columns .accordionfaq {
	padding-left:10px;
	padding-right:15px;
}

/*---- COLOURS ---- */
.active.accordionfaq#green, .accordionfaq#green:hover {
    background-color: #00b140;
    color: #fff;
}


.active.accordionfaq#orange, .accordionfaq#orange:hover {
    background-color: #dc4405;
    color: #fff;
}

.active.accordionfaq#blue, .accordionfaq#blue:hover {
    background-color: #009cde;
    color: #fff;
}

.active.accordionfaq#red, .accordionfaq#red:hover {
    background-color: #c8102e;
    color: #fff;
}

.active.accordionfaq#grey, .accordionfaq#grey:hover  {
    background-color: #c9d5e0;
    color: #000;
}

.active.accordionfaq#osfa, .accordionfaq#osfa:hover  {
    background-color: #5db1b3;
    color: #fff;
}



/*---- PHONE ---- */

@media only screen and (max-width: 767px) {
.accordionfaq {
	padding: 10px;
}

.accordionfaq:before {
    display:none
}

.active.accordionfaq:before {
     display:none
}

.panel {
	margin-left: 10px;
	margin-right: 0px;
}

.accordionfaq#green, .accordionfaq#green:hover {
    background-color: #00b140;
    color: #fff;
}


.accordionfaq#orange, .accordionfaq#orange:hover {
    background-color: #dc4405;
    color: #fff;
}

.accordionfaq#blue, .accordionfaq#blue:hover {
    background-color: #009cde;
    color: #fff;
}

.accordionfaq#red, .accordionfaq#red:hover {
    background-color: #c8102e;
    color: #fff;
}

.accordionfaq#grey, .accordionfaq#grey:hover  {
    background-color: #666666;
    color: #fff;
}
    
.active.accordionfaq#osfa, .accordionfaq#osfa:hover  {
    background-color: #5db1b3;
    color: #fff;
}

}



/*---- SIDEBAR ---- */


.magazine .accordion {
	font-size: 1.3em;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 23%;
	background-color: #ffc72c;
	color: #00205b;
	transition: width 0.8s ease-out;
}



.magazine .accordion:hover {
	background-color: #eee;
	color: #00205b;	
}

.magazine .active.accordion {
	background-color: #eee;
	color: #00205b;	
	width: 85%;
	transition: width 0.8s ease-out;
}

.magazine .active.accordion:before {
    content: "\FF0B";
    float: right;
    transform: rotate(45deg);
    	-webkit-transform: rotate(45deg);
  		-moz-transform: rotate(45deg);
 		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	transition: transform .5s ease-in-out;  
		-webkit-transition: -webkit-transform .5s ease-in-out;
    	-ms-transition: -ms-transform .5s ease-in-out; 
}

.magazine .panel {
    width: 87.1%;
    background-color: #eee;
    max-height: 0;
    margin-top: -10px;
    margin-left: 0px;
    margin-right: 0px;
    /*margin-bottom:15px;*/
    overflow: hidden;
    transition: max-height 1s ease-out;
}


.magazine .panel p {
	padding:0px 35px 5px 25px 
}

#left {
	float:left;
	margin: 10px 20px 10px 0px;
}

#right {
	float:right;
	margin: 10px 0px 10px 20px;
}


@media only screen and (max-width: 1000px) {
.magazine .active.accordion {
	width: 95%;}

.magazine .panel {
    width: 100%;
}	

}


@media only screen and (max-width: 767px){

.magazine .accordion {
	width: 95%;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:5px;
}

.accordion#left {
	float:unset;
	margin: 10px 0;
}

.accordion#right {
	float:unset;
	margin: 10px 0px;
}

.magazine .accordion:before {
    padding-right:2px;
}


.magazine .active.accordion {
	background-color: #eee;
	color: #00205b;	
	width: 95%;
	transition: width 0.8s ease-out;
}

.magazine .panel {
    width: 100%;
    background-color: #eee;
    max-height: 0;
    margin-top: -10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom:15px;
    overflow: hidden;
    transition: max-height 1s ease-out;
}


.magazine .panel p {
	padding:0px 35px 5px 25px 
}

}

@media only screen and (max-width: 467px){
#left {
	float:unset;
	margin: 10px 0;
}

#right {
	float:unset;
	margin: 10px 0px;
}

}