/* ******************************
Base styles for CER sites
21/09/2018 CER branding styles - colours, spacing etc.
********************************* */ 
/*primary colours*/
.bg-pri-grey100 {
                background-color:#383A42;
                color:#ffffff !important;
}
.bg-pri-grey75 {
                background-color:#63666A; 
                color:#ffffff !important;  /*limit use: text colour best for a11y but still barely passes*/
}
.bg-pri-grey50 {
                background-color:#a3a5a8;
                color:#000000 !important;
}
.bg-pri-grey25 {
                background-color:#c7c9c7;
                color:#000000 !important;
}
.bg-pri-grey10 {
                background-color:#dfe0de;
                color:#000000 !important;
}              

.bg-pri-blue100 {
                background-color:#003D4C;
                color:#ffffff !important;
}
.bg-pri-blue75 {
                background-color:#005874;
                color:#ffffff !important;
}
.bg-pri-blue50 {
                background-color:#007396;
                color:#ffffff !important; /*limit use: text colour best for a11y but still barely passes*/
}
.bg-pri-blue25 {
                background-color:#00a7d3;
                color:#000000 !important;
}
.bg-pri-blue10 {
                background-color:#82c5d8;
                color:#000000 !important;
}              

/*secondary colours*/
.bg-sec-aqua100 {
                background-color:#006d68;
                color:#ffffff !important; /*limit use: text colour best for a11y but still barely passes*/
}
.bg-sec-aqua75 {
                background-color:#00968F; 
                color:#000000 !important; /*limit use: text colour best for a11y but still barely passes*/
}
.bg-sec-aqua50 {
                background-color:#41bfb6;
                color:#000000 !important;
}
.bg-sec-aqua25 {
                background-color:#86d0cb;
                color:#000000 !important;
}
.bg-sec-aqua10 {
                background-color:#bfe3d8;
                color:#000000 !important;
}              

.bg-sec-biege100 {
                background-color:#696158;
                color:#ffffff !important;
}
.bg-sec-biege75 {
                background-color:#8c857b;
                color:#000000 !important; /*limit use: text colour best for a11y but still barely passes*/
}
.bg-sec-biege50 {
                background-color:#ede939;
                color:#000000 !important;
}
.bg-sec-biege25 {
                background-color:#d2ce9e;
                color:#000000 !important;
}
.bg-sec-biege10 {
                background-color:#eeebe0;
                color:#000000 !important;
}              

/*spacing*/
.pad {
 padding: 15px;
}
.pad-top {
	padding-top: 15px;
}
.pad-right {
	padding-right: 15px;
}
.pad-bottom {
	padding-bottom: 15px;
}
.pad-left {
	padding-left: 15px;
}
.nopad {
	padding: 0px !important;
}

.margin {
 padding: 20px;
}
.margin-top {
	padding-top: 20px;
}
.margin-right {
	padding-right: 20px;
}
.margin-bottom {
	padding-bottom: 20px;
}
.margin-left {
	padding-left: 20px;
}
.nomargin {
	margin:0 !important;
}

	/*21/09/2018 JB: styles for a box with a darker background + pointed edge*/
	div.box2 {
		background-color:#C7C9C7;
		color:#000000;
	}
	.box-edge {
		border-radius: 10px 10px 10px 0;
	}
	@media (max-width: 870px) {
	.box-edge {
		border-radius: 0 10px 0 0;
	}
	}

/*21/09/2018 JB: new step box to align the heading and steps*/
.infobox-heading {
	padding: 10px 20px;
	width: 30%;
}
@media (max-width: 870px) {
.infobox-heading {
    width: 100% !important;
 }
}
.infobox-steps {
    float: left;
    margin-left: 20px;
    width: 60%;
    padding: 5px;
}
@media (max-width: 870px) {
.infobox-steps {
	float:none;
	margin:auto;
	padding:0px;
	width: 100% !important;
}
}

		
/* 2018-07-10 || Added extra styling for non-stepped boxes. */
.boxOfSteps.fullWidth {
   display: block;
   width: 80%;
}
.boxOfSteps .infoBox {
    position: relative;
    background: white;
    border-radius: 10px 10px 10px 0px;
    margin: 10px -5px;
    /* padding: 10px; */
    transition: .07s ease-in-out;
    height: auto;
    text-align: left;
}
.boxOfSteps h3 {
    color: #006884 !important;
}
.boxOfSteps .stepBox.active {
    background: #005874;
}
.boxOfSteps .stepBox.active * {
    color: white;
}
@media (max-width: 992px) {
    .boxOfSteps .stepBox {
      height: auto;
    }
}
@media (max-width: 768px) {
    /* Use the below selector if we want to move the anchor from the outside of the .stepBox, to inside it.
    .boxOfSteps :nth-child(1n) :nth-child(n+2):nth-last-child(n+2) :nth-child(1n)::after {
       Use the below selector if we want to move the anchor from the col-* to outside of the .stepBox.
   .boxOfSteps :nth-child(1n) :nth-child(n+2):nth-last-child(n+3) :nth-child(1n) > :nth-child(1n)::after {
   */
   /*
      .boxOfSteps .row [class^="col"]:nth-child(n+2):nth-last-child(n+3)::after {
   */
   .boxOfSteps .nextLine {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        z-index: 1;
        border-left: 2px solid black;
        height: 20px;
    }
    /* 2018-07-10 || Added extra styling for non-stepped boxes. */
    .boxOfSteps.fullWidth {
      width: 100%;
   }
}
.boxOfSteps .stepBox:hover {
    background: #82C5D8;
}
.boxOfSteps .stepBox:hover * {
    color: #072B31;
}
.boxOfSteps .stepBox * {
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: rgb(56, 58, 66);
}
.boxOfSteps .stepBox strong {
    font-size: 14px;
    font-family: museosans500;
    margin: 4px 0 2px;
    display: inline-block;
    color: #006884;
}