.box-promo {
  display: block;
  width: 100%;
  float: none;
  clear: both;
  margin-bottom: 30px;
  max-width: 458px; /*minor change for larger content container widths to prevent pod stretching*/
  height: auto;
  background: #182745;
}

.box-promo_link {width: 100%}

a.box-promo_link {display: inline-block;}

a.box-promo_link:hover {
  color: #fff;
  text-decoration: underline;
  width: 100%;
}
a.box-promo_link:focus {outline: 3px solid #000;}

.box-promo_link_container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-promo_link_container_img-alignright, .box-promo_link_container_img-alignleft {  
  height: auto;
  width: 50%;
  margin: 10px;
}
                 
.box-promo_link_container_img-alignright.box-promo_link_container_img-nopadding, 
.box-promo_link_container_img-alignleft.box-promo_link_container_img-nopadding {margin: 0;}

/*default text treated as h3 style type*/
.box-promo_link_container_text-alignright, .box-promo_link_container_text-alignleft, .box-promo_link_container_text {
  height: auto;
  width: 50%;
  margin: 10px;
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
}                                

.box-promo_link_container_text-alignright, .box-promo_link_container_text-alignleft, .box-promo_link_container_text {color: #ffffff;}
                                
/*coloured text variant highlight option*/
a.box-promo_link-yellow, a.box-promo_link-orange, a.box-promo_link-lightblue {text-decoration: none;}

/*yellow text variant highlight option*/
a.box-promo_link-yellow, a.box-promo_link-yellow:hover {color: #FCD900;}
.box-promo_link_container_text-alignleft.box-promo_link_container_text-yellow,
.box-promo_link_container_text-alignright.box-promo_link_container_text-yellow {color: #FCD900;}
                 
/*orange text variant highlight option*/
.box-promo_link_container_text-orange {color: #F5B32D;}
a.box-promo_link-orange, a.box-promo_link-orange:hover {color: #F5B32D;}
.box-promo_link_container_text-alignleft.box-promo_link_container_text-orange,
.box-promo_link_container_text-alignright.box-promo_link_container_text-orange {color: #F5B32D;}   
                 
/*light blue text variant highlight option*/
.box-promo_link_container_text-lightblue {color: #1158D1;}
a.box-promo_link-lightblue, a.box-promo_link-lightblue:hover {color: #1158D1;}
.box-promo_link_container_text-alignleft.box-promo_link_container_text-lightblue,
.box-promo_link_container_text-alignright.box-promo_link_container_text-lightblue {color: #1158D1;}                    

/*white bg option (used for light blue text variant, potentially others in future*/                 
.box-promo.box-promowhitebg {
  background: #fff;
  border: #A7AFB5 solid 1px;
}                 
                 
.box-promo_link_container_img-alignleft, .box-promo_link_container_text-alignleft {
  -webkit-order: 1;
  order: 1;  
  text-align: left;
  margin-left: 20px;
}

.box-promo_link_container_img-alignright, .box-promo_link_container_text-alignright {
  -webkit-order: 2;
  order: 2;
}
                 
/*mce-editor font amends*/
.box-promo_link_container_text-alignleft > p, .box-promo_link_container_text-alignright > p {
  font-size: 28px;
  line-height: 30px;
  padding-bottom: 0;
  font-weight: 200;
}
.box-promo_link_container_text-alignleft > p > small, .box-promo_link_container_text-alignright > p > small {font-size: 12px;}  
                 

  /*tablet version*/
  @media screen and (min-width: 700px) and (max-width: 1024px){
    .box-promo_link_container_text-alignright, .box-promo_link_container_text-alignleft,
    .box-promo_link_container_text-alignleft > p, .box-promo_link_container_text-alignright > p {
      font-size: 24px;
      font-weight: 400;
      line-height: 29px;
    }
  }

  /*pre-existing sidebar promobox width controls for smaller screen sizes copied*/
  @media screen and (min-width: 580px) and (max-width: 980px){.box-promo {width: 48.341232227488%;}}

  /*mobile version*/
  @media screen and (max-width: 700px){
    .box-promo_link_container_text-alignright, .box-promo_link_container_text-alignleft,
    .box-promo_link_container_text-alignleft > p, .box-promo_link_container_text-alignright > p {
      font-size: 20px;
      font-weight: 400;
      line-height: 25px;
    }
  }

/*central alignment variant amends*/
.box-promo_link_container.box-promo_link_container-centre {flex-wrap: wrap;}
                 
.box-promo_link_container_img {
  padding: 20px 0;
}                 

/*display purposes of style guide page only*/
//.side-box {float: none;}