html {
  scroll-behavior: smooth; }

body {
  padding: 0;
  margin: 0; }

img {
  max-width: 100%; }

* {
  box-sizing: border-box; }

#fc_filter_form_blocker {
  display: none;
  height: 0;
  width: 0; }

body.theme--default #slider-banner .slick-dots {
  display: none;
}

/* #region Styleguide Markup */
/* 
		Responsive Mixin
		
		This mixin is used when you want to wrap a section of sass in a media query for 
		a specific device width
		
		Markup: 
		
		
		Styleguide Mixins.Responsive
	*/
/* #endregion Styleguide Markup */
/* #region Styleguide Markup */
/* 
        cut-corner($position, $color, $size, $double)
        
        This mixin is used to snip the corner from an image
        
        $position - either 'top-left' or 'bottom-right'
        $color - the colour to set the cutout to, defaults to white 
        $size - the size of the corner cutout, defaults to 10% 
        $double - whether the cutout should be a single cutout or a double 
                
        Styleguide Mixins.Images
    */
/* #endregion Styleguide Markup */
/* #region KSS Style Guide */
/* 
        Colours - RGU Main Palette 

        Weight: 1
        
        Colours that are used for providing the RGU theme across the site 

        $purple - #712177; primary purple
        $purple-t1 - #B077B8; lighter purple
        $purple-t2 - #C4A1C9; lightest purple
        $purple-s1 - #6B1868; darker purple
        $purple-s2 - #571046; darkest purple
        $cyan - #009FEE; primary cyan
        $cyan-t1 - #57d4fa; lighter cyan
        $cyan-t2 - #BAE0F5; lightest cyan
        $cyan-s1 - #007abf; darker cyan
        $cyan-s2 - #006B99; darkest cyan

        Styleguide Colours.Palettes

    */
/* #endregion */
/* Cyan Group */
/* 
    Colours : RGU Course Types Palette 
    
    Colours that are used for colour coding the courses on the course search page

    $ug-color - #ec008c; Undergraduate main colour
    $pg-color - #0072bc; Postgraduate main colour
    $ug-color - #749F1D; Online Learning main colour

    Styleguide Colours.Variables

*/
body {
  /* 
        Background Colour Classes 

        Weight : 2

        These colour classes are generated via mixin, taking the specific palette in to do the colour
        & class generation. Text colour is auto generated based on the BG colour for meeting accessibility guidance.

        Markup: 
            <div class="{{modifier_class}}" style="width: 200px; height: 50px;"><p>Content here</p></div>
            <!-- <div class="bg-primary-base"></div> -->
        
        .bg-primary-base - Primary : base colour
        .bg-primary-light - Primary : light tint
        .bg-primary-lighter - Primary : lighter tint
        .bg-primary-lightest - Primary : lightest tint
        .bg-primary-dark - Primary : dark shade
        .bg-primary-darker - Primary : darker shade
        .bg-primary-darkest - Primary : darkest shade

        Styleguide Colours.Backgrounds

    */ }
  body .bg-undergraduate-darker {
    background-color: #540032;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-undergraduate-darker.angle-right {
        background-image: linear-gradient(135deg, #540032 80%, transparent 80%);
        background-color: transparent; }
      body .bg-undergraduate-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #540032 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-undergraduate-darker.angle-right {
        background-image: linear-gradient(135deg, #540032 50%, transparent 50%);
        background-color: transparent; }
      body .bg-undergraduate-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #540032 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-undergraduate-darker.angle-right {
        background-image: linear-gradient(135deg, #540032 50%, transparent 50%);
        background-color: transparent; }
      body .bg-undergraduate-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #540032 45%);
        background-color: transparent; } }
  body .bg-undergraduate-darker-transparent {
    background-color: rgba(84, 0, 50, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-undergraduate-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(84, 0, 50, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-undergraduate-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(84, 0, 50, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-undergraduate-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(84, 0, 50, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-undergraduate-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(84, 0, 50, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-undergraduate-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(84, 0, 50, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-undergraduate-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(84, 0, 50, 0.9) 45%);
        background-color: transparent; } }
  body .bg-undergraduate-dark {
    background-color: #ba006f;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-undergraduate-dark.angle-right {
        background-image: linear-gradient(135deg, #ba006f 80%, transparent 80%);
        background-color: transparent; }
      body .bg-undergraduate-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #ba006f 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-undergraduate-dark.angle-right {
        background-image: linear-gradient(135deg, #ba006f 50%, transparent 50%);
        background-color: transparent; }
      body .bg-undergraduate-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #ba006f 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-undergraduate-dark.angle-right {
        background-image: linear-gradient(135deg, #ba006f 50%, transparent 50%);
        background-color: transparent; }
      body .bg-undergraduate-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #ba006f 45%);
        background-color: transparent; } }
  body .bg-undergraduate-dark-transparent {
    background-color: rgba(186, 0, 111, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-undergraduate-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(186, 0, 111, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-undergraduate-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(186, 0, 111, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-undergraduate-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(186, 0, 111, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-undergraduate-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(186, 0, 111, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-undergraduate-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(186, 0, 111, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-undergraduate-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(186, 0, 111, 0.9) 45%);
        background-color: transparent; } }
  body .bg-undergraduate-base {
    background-color: #e10086;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-undergraduate-base.angle-right {
        background-image: linear-gradient(135deg, #e10086 80%, transparent 80%);
        background-color: transparent; }
      body .bg-undergraduate-base.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #e10086 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-undergraduate-base.angle-right {
        background-image: linear-gradient(135deg, #e10086 50%, transparent 50%);
        background-color: transparent; }
      body .bg-undergraduate-base.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #e10086 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-undergraduate-base.angle-right {
        background-image: linear-gradient(135deg, #e10086 50%, transparent 50%);
        background-color: transparent; }
      body .bg-undergraduate-base.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #e10086 45%);
        background-color: transparent; } }
  body .bg-undergraduate-base-transparent {
    background-color: rgba(225, 0, 134, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-undergraduate-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(225, 0, 134, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-undergraduate-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(225, 0, 134, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-undergraduate-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(225, 0, 134, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-undergraduate-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(225, 0, 134, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-undergraduate-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(225, 0, 134, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-undergraduate-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(225, 0, 134, 0.9) 45%);
        background-color: transparent; } }
  body .bg-undergraduate-light {
    background-color: #ffaede;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-undergraduate-light.angle-right {
        background-image: linear-gradient(135deg, #ffaede 80%, transparent 80%);
        background-color: transparent; }
      body .bg-undergraduate-light.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #ffaede 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-undergraduate-light.angle-right {
        background-image: linear-gradient(135deg, #ffaede 50%, transparent 50%);
        background-color: transparent; }
      body .bg-undergraduate-light.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #ffaede 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-undergraduate-light.angle-right {
        background-image: linear-gradient(135deg, #ffaede 50%, transparent 50%);
        background-color: transparent; }
      body .bg-undergraduate-light.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #ffaede 45%);
        background-color: transparent; } }
  body .bg-undergraduate-light-transparent {
    background-color: rgba(255, 174, 222, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-undergraduate-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(255, 174, 222, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-undergraduate-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(255, 174, 222, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-undergraduate-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(255, 174, 222, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-undergraduate-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(255, 174, 222, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-undergraduate-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(255, 174, 222, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-undergraduate-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(255, 174, 222, 0.9) 45%);
        background-color: transparent; } }
  body .bg-undergraduate-lighter {
    background-color: #ffe1f3;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-undergraduate-lighter.angle-right {
        background-image: linear-gradient(135deg, #ffe1f3 80%, transparent 80%);
        background-color: transparent; }
      body .bg-undergraduate-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #ffe1f3 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-undergraduate-lighter.angle-right {
        background-image: linear-gradient(135deg, #ffe1f3 50%, transparent 50%);
        background-color: transparent; }
      body .bg-undergraduate-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #ffe1f3 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-undergraduate-lighter.angle-right {
        background-image: linear-gradient(135deg, #ffe1f3 50%, transparent 50%);
        background-color: transparent; }
      body .bg-undergraduate-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #ffe1f3 45%);
        background-color: transparent; } }
  body .bg-undergraduate-lighter-transparent {
    background-color: rgba(255, 225, 243, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-undergraduate-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(255, 225, 243, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-undergraduate-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(255, 225, 243, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-undergraduate-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(255, 225, 243, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-undergraduate-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(255, 225, 243, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-undergraduate-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(255, 225, 243, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-undergraduate-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(255, 225, 243, 0.9) 45%);
        background-color: transparent; } }
  body .bg-postgraduate-darker {
    background-color: #002137;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-postgraduate-darker.angle-right {
        background-image: linear-gradient(135deg, #002137 80%, transparent 80%);
        background-color: transparent; }
      body .bg-postgraduate-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #002137 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-postgraduate-darker.angle-right {
        background-image: linear-gradient(135deg, #002137 50%, transparent 50%);
        background-color: transparent; }
      body .bg-postgraduate-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #002137 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-postgraduate-darker.angle-right {
        background-image: linear-gradient(135deg, #002137 50%, transparent 50%);
        background-color: transparent; }
      body .bg-postgraduate-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #002137 45%);
        background-color: transparent; } }
  body .bg-postgraduate-darker-transparent {
    background-color: rgba(0, 33, 55, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-postgraduate-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 33, 55, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-postgraduate-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(0, 33, 55, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-postgraduate-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 33, 55, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-postgraduate-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(0, 33, 55, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-postgraduate-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 33, 55, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-postgraduate-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(0, 33, 55, 0.9) 45%);
        background-color: transparent; } }
  body .bg-postgraduate-dark {
    background-color: #005f9d;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-postgraduate-dark.angle-right {
        background-image: linear-gradient(135deg, #005f9d 80%, transparent 80%);
        background-color: transparent; }
      body .bg-postgraduate-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #005f9d 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-postgraduate-dark.angle-right {
        background-image: linear-gradient(135deg, #005f9d 50%, transparent 50%);
        background-color: transparent; }
      body .bg-postgraduate-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #005f9d 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-postgraduate-dark.angle-right {
        background-image: linear-gradient(135deg, #005f9d 50%, transparent 50%);
        background-color: transparent; }
      body .bg-postgraduate-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #005f9d 45%);
        background-color: transparent; } }
  body .bg-postgraduate-dark-transparent {
    background-color: rgba(0, 95, 157, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-postgraduate-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 95, 157, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-postgraduate-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(0, 95, 157, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-postgraduate-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 95, 157, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-postgraduate-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(0, 95, 157, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-postgraduate-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 95, 157, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-postgraduate-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(0, 95, 157, 0.9) 45%);
        background-color: transparent; } }
  body .bg-postgraduate-base {
    background-color: #0072bc;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-postgraduate-base.angle-right {
        background-image: linear-gradient(135deg, #0072bc 80%, transparent 80%);
        background-color: transparent; }
      body .bg-postgraduate-base.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #0072bc 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-postgraduate-base.angle-right {
        background-image: linear-gradient(135deg, #0072bc 50%, transparent 50%);
        background-color: transparent; }
      body .bg-postgraduate-base.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #0072bc 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-postgraduate-base.angle-right {
        background-image: linear-gradient(135deg, #0072bc 50%, transparent 50%);
        background-color: transparent; }
      body .bg-postgraduate-base.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #0072bc 45%);
        background-color: transparent; } }
  body .bg-postgraduate-base-transparent {
    background-color: rgba(0, 114, 188, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-postgraduate-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 114, 188, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-postgraduate-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(0, 114, 188, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-postgraduate-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 114, 188, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-postgraduate-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(0, 114, 188, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-postgraduate-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 114, 188, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-postgraduate-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(0, 114, 188, 0.9) 45%);
        background-color: transparent; } }
  body .bg-postgraduate-light {
    background-color: #89d1ff;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-postgraduate-light.angle-right {
        background-image: linear-gradient(135deg, #89d1ff 80%, transparent 80%);
        background-color: transparent; }
      body .bg-postgraduate-light.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #89d1ff 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-postgraduate-light.angle-right {
        background-image: linear-gradient(135deg, #89d1ff 50%, transparent 50%);
        background-color: transparent; }
      body .bg-postgraduate-light.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #89d1ff 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-postgraduate-light.angle-right {
        background-image: linear-gradient(135deg, #89d1ff 50%, transparent 50%);
        background-color: transparent; }
      body .bg-postgraduate-light.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #89d1ff 45%);
        background-color: transparent; } }
  body .bg-postgraduate-light-transparent {
    background-color: rgba(137, 209, 255, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-postgraduate-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(137, 209, 255, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-postgraduate-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(137, 209, 255, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-postgraduate-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(137, 209, 255, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-postgraduate-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(137, 209, 255, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-postgraduate-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(137, 209, 255, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-postgraduate-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(137, 209, 255, 0.9) 45%);
        background-color: transparent; } }
  body .bg-postgraduate-lighter {
    background-color: #bce5ff;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-postgraduate-lighter.angle-right {
        background-image: linear-gradient(135deg, #bce5ff 80%, transparent 80%);
        background-color: transparent; }
      body .bg-postgraduate-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #bce5ff 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-postgraduate-lighter.angle-right {
        background-image: linear-gradient(135deg, #bce5ff 50%, transparent 50%);
        background-color: transparent; }
      body .bg-postgraduate-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #bce5ff 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-postgraduate-lighter.angle-right {
        background-image: linear-gradient(135deg, #bce5ff 50%, transparent 50%);
        background-color: transparent; }
      body .bg-postgraduate-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #bce5ff 45%);
        background-color: transparent; } }
  body .bg-postgraduate-lighter-transparent {
    background-color: rgba(188, 229, 255, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-postgraduate-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(188, 229, 255, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-postgraduate-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(188, 229, 255, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-postgraduate-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(188, 229, 255, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-postgraduate-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(188, 229, 255, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-postgraduate-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(188, 229, 255, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-postgraduate-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(188, 229, 255, 0.9) 45%);
        background-color: transparent; } }
  body .bg-online-darker {
    background-color: #364a17;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-online-darker.angle-right {
        background-image: linear-gradient(135deg, #364a17 80%, transparent 80%);
        background-color: transparent; }
      body .bg-online-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #364a17 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-online-darker.angle-right {
        background-image: linear-gradient(135deg, #364a17 50%, transparent 50%);
        background-color: transparent; }
      body .bg-online-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #364a17 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-online-darker.angle-right {
        background-image: linear-gradient(135deg, #364a17 50%, transparent 50%);
        background-color: transparent; }
      body .bg-online-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #364a17 45%);
        background-color: transparent; } }
  body .bg-online-darker-transparent {
    background-color: rgba(54, 74, 23, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-online-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(54, 74, 23, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-online-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(54, 74, 23, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-online-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(54, 74, 23, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-online-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(54, 74, 23, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-online-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(54, 74, 23, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-online-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(54, 74, 23, 0.9) 45%);
        background-color: transparent; } }
  body .bg-online-dark {
    background-color: #6e9730;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-online-dark.angle-right {
        background-image: linear-gradient(135deg, #6e9730 80%, transparent 80%);
        background-color: transparent; }
      body .bg-online-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #6e9730 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-online-dark.angle-right {
        background-image: linear-gradient(135deg, #6e9730 50%, transparent 50%);
        background-color: transparent; }
      body .bg-online-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #6e9730 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-online-dark.angle-right {
        background-image: linear-gradient(135deg, #6e9730 50%, transparent 50%);
        background-color: transparent; }
      body .bg-online-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #6e9730 45%);
        background-color: transparent; } }
  body .bg-online-dark-transparent {
    background-color: rgba(110, 151, 48, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-online-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(110, 151, 48, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-online-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(110, 151, 48, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-online-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(110, 151, 48, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-online-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(110, 151, 48, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-online-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(110, 151, 48, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-online-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(110, 151, 48, 0.9) 45%);
        background-color: transparent; } }
  body .bg-online-base {
    background-color: #88b73b;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-online-base.angle-right {
        background-image: linear-gradient(135deg, #88b73b 80%, transparent 80%);
        background-color: transparent; }
      body .bg-online-base.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #88b73b 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-online-base.angle-right {
        background-image: linear-gradient(135deg, #88b73b 50%, transparent 50%);
        background-color: transparent; }
      body .bg-online-base.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #88b73b 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-online-base.angle-right {
        background-image: linear-gradient(135deg, #88b73b 50%, transparent 50%);
        background-color: transparent; }
      body .bg-online-base.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #88b73b 45%);
        background-color: transparent; } }
  body .bg-online-base-transparent {
    background-color: rgba(136, 183, 59, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-online-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(136, 183, 59, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-online-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(136, 183, 59, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-online-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(136, 183, 59, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-online-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(136, 183, 59, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-online-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(136, 183, 59, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-online-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(136, 183, 59, 0.9) 45%);
        background-color: transparent; } }
  body .bg-online-light {
    background-color: #e3efcf;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-online-light.angle-right {
        background-image: linear-gradient(135deg, #e3efcf 80%, transparent 80%);
        background-color: transparent; }
      body .bg-online-light.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #e3efcf 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-online-light.angle-right {
        background-image: linear-gradient(135deg, #e3efcf 50%, transparent 50%);
        background-color: transparent; }
      body .bg-online-light.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #e3efcf 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-online-light.angle-right {
        background-image: linear-gradient(135deg, #e3efcf 50%, transparent 50%);
        background-color: transparent; }
      body .bg-online-light.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #e3efcf 45%);
        background-color: transparent; } }
  body .bg-online-light-transparent {
    background-color: rgba(227, 239, 207, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-online-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(227, 239, 207, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-online-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(227, 239, 207, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-online-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(227, 239, 207, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-online-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(227, 239, 207, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-online-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(227, 239, 207, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-online-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(227, 239, 207, 0.9) 45%);
        background-color: transparent; } }
  body .bg-online-lighter {
    background-color: #f9fcf5;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-online-lighter.angle-right {
        background-image: linear-gradient(135deg, #f9fcf5 80%, transparent 80%);
        background-color: transparent; }
      body .bg-online-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #f9fcf5 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-online-lighter.angle-right {
        background-image: linear-gradient(135deg, #f9fcf5 50%, transparent 50%);
        background-color: transparent; }
      body .bg-online-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #f9fcf5 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-online-lighter.angle-right {
        background-image: linear-gradient(135deg, #f9fcf5 50%, transparent 50%);
        background-color: transparent; }
      body .bg-online-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #f9fcf5 45%);
        background-color: transparent; } }
  body .bg-online-lighter-transparent {
    background-color: rgba(249, 252, 245, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-online-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(249, 252, 245, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-online-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(249, 252, 245, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-online-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(249, 252, 245, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-online-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(249, 252, 245, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-online-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(249, 252, 245, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-online-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(249, 252, 245, 0.9) 45%);
        background-color: transparent; } }
  body .bg-primary-darker {
    background-color: #571046;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-darker.angle-right {
        background-image: linear-gradient(135deg, #571046 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #571046 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-darker.angle-right {
        background-image: linear-gradient(135deg, #571046 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #571046 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-darker.angle-right {
        background-image: linear-gradient(135deg, #571046 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #571046 45%);
        background-color: transparent; } }
  body .bg-primary-darker-transparent {
    background-color: rgba(87, 16, 70, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(87, 16, 70, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(87, 16, 70, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(87, 16, 70, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-primary-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(87, 16, 70, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(87, 16, 70, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-primary-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(87, 16, 70, 0.9) 45%);
        background-color: transparent; } }
  body .bg-primary-dark {
    background-color: #6B1868;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-dark.angle-right {
        background-image: linear-gradient(135deg, #6B1868 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #6B1868 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-dark.angle-right {
        background-image: linear-gradient(135deg, #6B1868 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #6B1868 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-dark.angle-right {
        background-image: linear-gradient(135deg, #6B1868 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #6B1868 45%);
        background-color: transparent; } }
  body .bg-primary-dark-transparent {
    background-color: rgba(107, 24, 104, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(107, 24, 104, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(107, 24, 104, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(107, 24, 104, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-primary-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(107, 24, 104, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(107, 24, 104, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-primary-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(107, 24, 104, 0.9) 45%);
        background-color: transparent; } }
  body .bg-primary-base {
    background-color: #712177;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-base.angle-right {
        background-image: linear-gradient(135deg, #712177 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-base.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #712177 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-base.angle-right {
        background-image: linear-gradient(135deg, #712177 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-base.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #712177 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-base.angle-right {
        background-image: linear-gradient(135deg, #712177 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-base.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #712177 45%);
        background-color: transparent; } }
  body .bg-primary-base-transparent {
    background-color: rgba(113, 33, 119, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(113, 33, 119, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(113, 33, 119, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(113, 33, 119, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-primary-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(113, 33, 119, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(113, 33, 119, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-primary-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(113, 33, 119, 0.9) 45%);
        background-color: transparent; } }
  body .bg-primary-light {
    background-color: #B077B8;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-light.angle-right {
        background-image: linear-gradient(135deg, #B077B8 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-light.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #B077B8 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-light.angle-right {
        background-image: linear-gradient(135deg, #B077B8 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-light.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #B077B8 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-light.angle-right {
        background-image: linear-gradient(135deg, #B077B8 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-light.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #B077B8 45%);
        background-color: transparent; } }
  body .bg-primary-light-transparent {
    background-color: rgba(176, 119, 184, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(176, 119, 184, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(176, 119, 184, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(176, 119, 184, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-primary-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(176, 119, 184, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(176, 119, 184, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-primary-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(176, 119, 184, 0.9) 45%);
        background-color: transparent; } }
  body .bg-primary-lighter {
    background-color: #C4A1C9;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-lighter.angle-right {
        background-image: linear-gradient(135deg, #C4A1C9 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #C4A1C9 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-lighter.angle-right {
        background-image: linear-gradient(135deg, #C4A1C9 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #C4A1C9 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-lighter.angle-right {
        background-image: linear-gradient(135deg, #C4A1C9 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #C4A1C9 45%);
        background-color: transparent; } }
  body .bg-primary-lighter-transparent {
    background-color: rgba(196, 161, 201, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(196, 161, 201, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(196, 161, 201, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(196, 161, 201, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-primary-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(196, 161, 201, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(196, 161, 201, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-primary-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(196, 161, 201, 0.9) 45%);
        background-color: transparent; } }
  body .bg-primary-lightest {
    background-color: #ceb1d2;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-lightest.angle-right {
        background-image: linear-gradient(135deg, #ceb1d2 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-lightest.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #ceb1d2 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-lightest.angle-right {
        background-image: linear-gradient(135deg, #ceb1d2 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-lightest.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #ceb1d2 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-lightest.angle-right {
        background-image: linear-gradient(135deg, #ceb1d2 50%, transparent 50%);
        background-color: transparent; }
      body .bg-primary-lightest.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #ceb1d2 45%);
        background-color: transparent; } }
  body .bg-primary-lightest-transparent {
    background-color: rgba(206, 177, 210, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-primary-lightest-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(206, 177, 210, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-primary-lightest-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(206, 177, 210, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-primary-lightest-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(206, 177, 210, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-primary-lightest-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(206, 177, 210, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-primary-lightest-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(206, 177, 210, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-primary-lightest-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(206, 177, 210, 0.9) 45%);
        background-color: transparent; } }
  body .bg-secondary-darker {
    background-color: #006B99;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-darker.angle-right {
        background-image: linear-gradient(135deg, #006B99 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #006B99 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-darker.angle-right {
        background-image: linear-gradient(135deg, #006B99 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #006B99 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-darker.angle-right {
        background-image: linear-gradient(135deg, #006B99 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-darker.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #006B99 45%);
        background-color: transparent; } }
  body .bg-secondary-darker-transparent {
    background-color: rgba(0, 107, 153, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 107, 153, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(0, 107, 153, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 107, 153, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-secondary-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(0, 107, 153, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-darker-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 107, 153, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-secondary-darker-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(0, 107, 153, 0.9) 45%);
        background-color: transparent; } }
  body .bg-secondary-dark {
    background-color: #007abf;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-dark.angle-right {
        background-image: linear-gradient(135deg, #007abf 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #007abf 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-dark.angle-right {
        background-image: linear-gradient(135deg, #007abf 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #007abf 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-dark.angle-right {
        background-image: linear-gradient(135deg, #007abf 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-dark.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #007abf 45%);
        background-color: transparent; } }
  body .bg-secondary-dark-transparent {
    background-color: rgba(0, 122, 191, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 122, 191, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(0, 122, 191, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 122, 191, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-secondary-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(0, 122, 191, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-dark-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 122, 191, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-secondary-dark-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(0, 122, 191, 0.9) 45%);
        background-color: transparent; } }
  body .bg-secondary-base {
    background-color: #009FEE;
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-base.angle-right {
        background-image: linear-gradient(135deg, #009FEE 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-base.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #009FEE 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-base.angle-right {
        background-image: linear-gradient(135deg, #009FEE 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-base.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #009FEE 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-base.angle-right {
        background-image: linear-gradient(135deg, #009FEE 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-base.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #009FEE 45%);
        background-color: transparent; } }
  body .bg-secondary-base-transparent {
    background-color: rgba(0, 159, 238, 0.9);
    color: white !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 159, 238, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(0, 159, 238, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 159, 238, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-secondary-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(0, 159, 238, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-base-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(0, 159, 238, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-secondary-base-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(0, 159, 238, 0.9) 45%);
        background-color: transparent; } }
  body .bg-secondary-light {
    background-color: #57d4fa;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-light.angle-right {
        background-image: linear-gradient(135deg, #57d4fa 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-light.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #57d4fa 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-light.angle-right {
        background-image: linear-gradient(135deg, #57d4fa 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-light.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #57d4fa 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-light.angle-right {
        background-image: linear-gradient(135deg, #57d4fa 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-light.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #57d4fa 45%);
        background-color: transparent; } }
  body .bg-secondary-light-transparent {
    background-color: rgba(87, 212, 250, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(87, 212, 250, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(87, 212, 250, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(87, 212, 250, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-secondary-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(87, 212, 250, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-light-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(87, 212, 250, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-secondary-light-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(87, 212, 250, 0.9) 45%);
        background-color: transparent; } }
  body .bg-secondary-lighter {
    background-color: #BAE0F5;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-lighter.angle-right {
        background-image: linear-gradient(135deg, #BAE0F5 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #BAE0F5 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-lighter.angle-right {
        background-image: linear-gradient(135deg, #BAE0F5 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #BAE0F5 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-lighter.angle-right {
        background-image: linear-gradient(135deg, #BAE0F5 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-lighter.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #BAE0F5 45%);
        background-color: transparent; } }
  body .bg-secondary-lighter-transparent {
    background-color: rgba(186, 224, 245, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(186, 224, 245, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(186, 224, 245, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(186, 224, 245, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-secondary-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(186, 224, 245, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-lighter-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(186, 224, 245, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-secondary-lighter-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(186, 224, 245, 0.9) 45%);
        background-color: transparent; } }
  body .bg-secondary-lightest {
    background-color: #d0eaf8;
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-lightest.angle-right {
        background-image: linear-gradient(135deg, #d0eaf8 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-lightest.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, #d0eaf8 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-lightest.angle-right {
        background-image: linear-gradient(135deg, #d0eaf8 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-lightest.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, #d0eaf8 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-lightest.angle-right {
        background-image: linear-gradient(135deg, #d0eaf8 50%, transparent 50%);
        background-color: transparent; }
      body .bg-secondary-lightest.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, #d0eaf8 45%);
        background-color: transparent; } }
  body .bg-secondary-lightest-transparent {
    background-color: rgba(208, 234, 248, 0.9);
    color: black !important; }
    @media only screen and (min-width: 48rem) {
      body .bg-secondary-lightest-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(208, 234, 248, 0.9) 80%, transparent 80%);
        background-color: transparent; }
      body .bg-secondary-lightest-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 30%, rgba(208, 234, 248, 0.9) 30%);
        background-color: transparent; } }
    @media only screen and (min-width: 64rem) {
      body .bg-secondary-lightest-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(208, 234, 248, 0.9) 70%, transparent 70%);
        background-color: transparent; }
      body .bg-secondary-lightest-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 40%, rgba(208, 234, 248, 0.9) 40%);
        background-color: transparent; } }
    @media only screen and (min-width: 100rem) {
      body .bg-secondary-lightest-transparent.angle-right {
        background-image: linear-gradient(135deg, rgba(208, 234, 248, 0.9) 65%, transparent 65%);
        background-color: transparent; }
      body .bg-secondary-lightest-transparent.angle-left {
        background-image: linear-gradient(135deg, transparent 45%, rgba(208, 234, 248, 0.9) 45%);
        background-color: transparent; } }

body.theme--default .bg-primary-darker {
  background-color: #571046;
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-darker.angle-right {
      background-image: linear-gradient(135deg, #571046 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-darker.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #571046 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-darker.angle-right {
      background-image: linear-gradient(135deg, #571046 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-darker.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #571046 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-darker.angle-right {
      background-image: linear-gradient(135deg, #571046 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-darker.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #571046 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-darker-transparent {
  background-color: rgba(87, 16, 70, 0.9);
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-darker-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(87, 16, 70, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-darker-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(87, 16, 70, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-darker-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(87, 16, 70, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-primary-darker-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(87, 16, 70, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-darker-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(87, 16, 70, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-primary-darker-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(87, 16, 70, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-dark {
  background-color: #6B1868;
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-dark.angle-right {
      background-image: linear-gradient(135deg, #6B1868 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-dark.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #6B1868 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-dark.angle-right {
      background-image: linear-gradient(135deg, #6B1868 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-dark.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #6B1868 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-dark.angle-right {
      background-image: linear-gradient(135deg, #6B1868 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-dark.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #6B1868 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-dark-transparent {
  background-color: rgba(107, 24, 104, 0.9);
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-dark-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(107, 24, 104, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-dark-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(107, 24, 104, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-dark-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(107, 24, 104, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-primary-dark-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(107, 24, 104, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-dark-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(107, 24, 104, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-primary-dark-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(107, 24, 104, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-base {
  background-color: #712177;
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-base.angle-right {
      background-image: linear-gradient(135deg, #712177 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-base.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #712177 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-base.angle-right {
      background-image: linear-gradient(135deg, #712177 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-base.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #712177 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-base.angle-right {
      background-image: linear-gradient(135deg, #712177 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-base.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #712177 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-base-transparent {
  background-color: rgba(113, 33, 119, 0.9);
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-base-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(113, 33, 119, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-base-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(113, 33, 119, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-base-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(113, 33, 119, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-primary-base-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(113, 33, 119, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-base-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(113, 33, 119, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-primary-base-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(113, 33, 119, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-light {
  background-color: #B077B8;
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-light.angle-right {
      background-image: linear-gradient(135deg, #B077B8 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-light.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #B077B8 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-light.angle-right {
      background-image: linear-gradient(135deg, #B077B8 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-light.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #B077B8 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-light.angle-right {
      background-image: linear-gradient(135deg, #B077B8 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-light.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #B077B8 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-light-transparent {
  background-color: rgba(176, 119, 184, 0.9);
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-light-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(176, 119, 184, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-light-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(176, 119, 184, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-light-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(176, 119, 184, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-primary-light-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(176, 119, 184, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-light-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(176, 119, 184, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-primary-light-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(176, 119, 184, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-lighter {
  background-color: #C4A1C9;
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-lighter.angle-right {
      background-image: linear-gradient(135deg, #C4A1C9 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-lighter.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #C4A1C9 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-lighter.angle-right {
      background-image: linear-gradient(135deg, #C4A1C9 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-lighter.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #C4A1C9 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-lighter.angle-right {
      background-image: linear-gradient(135deg, #C4A1C9 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-lighter.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #C4A1C9 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-lighter-transparent {
  background-color: rgba(196, 161, 201, 0.9);
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-lighter-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(196, 161, 201, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-lighter-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(196, 161, 201, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-lighter-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(196, 161, 201, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-primary-lighter-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(196, 161, 201, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-lighter-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(196, 161, 201, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-primary-lighter-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(196, 161, 201, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-lightest {
  background-color: #ceb1d2;
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-lightest.angle-right {
      background-image: linear-gradient(135deg, #ceb1d2 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-lightest.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #ceb1d2 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-lightest.angle-right {
      background-image: linear-gradient(135deg, #ceb1d2 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-lightest.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #ceb1d2 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-lightest.angle-right {
      background-image: linear-gradient(135deg, #ceb1d2 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-primary-lightest.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #ceb1d2 45%);
      background-color: transparent; } }

body.theme--default .bg-primary-lightest-transparent {
  background-color: rgba(206, 177, 210, 0.9);
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-primary-lightest-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(206, 177, 210, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-primary-lightest-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(206, 177, 210, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-primary-lightest-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(206, 177, 210, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-primary-lightest-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(206, 177, 210, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-primary-lightest-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(206, 177, 210, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-primary-lightest-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(206, 177, 210, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-darker {
  background-color: #006B99;
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-darker.angle-right {
      background-image: linear-gradient(135deg, #006B99 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-darker.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #006B99 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-darker.angle-right {
      background-image: linear-gradient(135deg, #006B99 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-darker.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #006B99 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-darker.angle-right {
      background-image: linear-gradient(135deg, #006B99 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-darker.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #006B99 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-darker-transparent {
  background-color: rgba(0, 107, 153, 0.9);
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-darker-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(0, 107, 153, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-darker-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(0, 107, 153, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-darker-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(0, 107, 153, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-secondary-darker-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(0, 107, 153, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-darker-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(0, 107, 153, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-secondary-darker-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(0, 107, 153, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-dark {
  background-color: #007abf;
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-dark.angle-right {
      background-image: linear-gradient(135deg, #007abf 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-dark.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #007abf 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-dark.angle-right {
      background-image: linear-gradient(135deg, #007abf 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-dark.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #007abf 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-dark.angle-right {
      background-image: linear-gradient(135deg, #007abf 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-dark.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #007abf 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-dark-transparent {
  background-color: rgba(0, 122, 191, 0.9);
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-dark-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(0, 122, 191, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-dark-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(0, 122, 191, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-dark-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(0, 122, 191, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-secondary-dark-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(0, 122, 191, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-dark-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(0, 122, 191, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-secondary-dark-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(0, 122, 191, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-base {
  background-color: #009FEE;
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-base.angle-right {
      background-image: linear-gradient(135deg, #009FEE 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-base.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #009FEE 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-base.angle-right {
      background-image: linear-gradient(135deg, #009FEE 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-base.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #009FEE 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-base.angle-right {
      background-image: linear-gradient(135deg, #009FEE 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-base.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #009FEE 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-base-transparent {
  background-color: rgba(0, 159, 238, 0.9);
  color: white !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-base-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(0, 159, 238, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-base-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(0, 159, 238, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-base-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(0, 159, 238, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-secondary-base-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(0, 159, 238, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-base-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(0, 159, 238, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-secondary-base-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(0, 159, 238, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-light {
  background-color: #57d4fa;
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-light.angle-right {
      background-image: linear-gradient(135deg, #57d4fa 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-light.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #57d4fa 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-light.angle-right {
      background-image: linear-gradient(135deg, #57d4fa 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-light.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #57d4fa 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-light.angle-right {
      background-image: linear-gradient(135deg, #57d4fa 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-light.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #57d4fa 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-light-transparent {
  background-color: rgba(87, 212, 250, 0.9);
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-light-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(87, 212, 250, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-light-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(87, 212, 250, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-light-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(87, 212, 250, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-secondary-light-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(87, 212, 250, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-light-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(87, 212, 250, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-secondary-light-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(87, 212, 250, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-lighter {
  background-color: #BAE0F5;
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-lighter.angle-right {
      background-image: linear-gradient(135deg, #BAE0F5 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lighter.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #BAE0F5 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-lighter.angle-right {
      background-image: linear-gradient(135deg, #BAE0F5 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lighter.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #BAE0F5 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-lighter.angle-right {
      background-image: linear-gradient(135deg, #BAE0F5 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lighter.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #BAE0F5 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-lighter-transparent {
  background-color: rgba(186, 224, 245, 0.9);
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-lighter-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(186, 224, 245, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lighter-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(186, 224, 245, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-lighter-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(186, 224, 245, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lighter-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(186, 224, 245, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-lighter-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(186, 224, 245, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lighter-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(186, 224, 245, 0.9) 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-lightest {
  background-color: #d0eaf8;
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-lightest.angle-right {
      background-image: linear-gradient(135deg, #d0eaf8 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lightest.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, #d0eaf8 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-lightest.angle-right {
      background-image: linear-gradient(135deg, #d0eaf8 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lightest.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, #d0eaf8 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-lightest.angle-right {
      background-image: linear-gradient(135deg, #d0eaf8 50%, transparent 50%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lightest.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, #d0eaf8 45%);
      background-color: transparent; } }

body.theme--default .bg-secondary-lightest-transparent {
  background-color: rgba(208, 234, 248, 0.9);
  color: black !important; }
  @media only screen and (min-width: 48rem) {
    body.theme--default .bg-secondary-lightest-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(208, 234, 248, 0.9) 80%, transparent 80%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lightest-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 30%, rgba(208, 234, 248, 0.9) 30%);
      background-color: transparent; } }
  @media only screen and (min-width: 64rem) {
    body.theme--default .bg-secondary-lightest-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(208, 234, 248, 0.9) 70%, transparent 70%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lightest-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 40%, rgba(208, 234, 248, 0.9) 40%);
      background-color: transparent; } }
  @media only screen and (min-width: 100rem) {
    body.theme--default .bg-secondary-lightest-transparent.angle-right {
      background-image: linear-gradient(135deg, rgba(208, 234, 248, 0.9) 65%, transparent 65%);
      background-color: transparent; }
    body.theme--default .bg-secondary-lightest-transparent.angle-left {
      background-image: linear-gradient(135deg, transparent 45%, rgba(208, 234, 248, 0.9) 45%);
      background-color: transparent; } }

body.black header.bg-primary-base, body.black footer#footer {
  background-color: #000; }

body.black #site-header::after {
  background: linear-gradient(135deg, #000 25%, transparent 25%); }

body.black #site-header #logo img {
  max-height: 50px;
  padding: 10px; }

@media only screen and (min-width: 64rem) {
  body.black #site-header #logo img {
    max-height: none; } }

.bg-white {
  background-color: #ffffff;
  color: #000000; }
  .bg-white-transparent {
    background-color: rgba(255, 255, 255, 0.2); }
    .bg-white-transparent.angle-left {
      background-color: transparent;
      background: linear-gradient(135deg, transparent 20%, rgba(255, 255, 255, 0.2) 20%); }
    .bg-white-transparent.angle-right {
      background-color: transparent;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 80%, transparent 80%); }
  @media only screen and (min-width: 48rem) {
    .bg-white.angle-left {
      background-color: transparent;
      background: linear-gradient(135deg, transparent 30%, #ffffff 30%); }
    .bg-white.angle-right {
      background-color: transparent;
      background: linear-gradient(135deg, #ffffff 80%, transparent 80%); } }
  @media only screen and (min-width: 64rem) {
    .bg-white.angle-left {
      background-color: transparent;
      background: linear-gradient(135deg, transparent 20%, #ffffff 20%); }
    .bg-white.angle-right {
      background-color: transparent;
      background: linear-gradient(135deg, #ffffff 70%, transparent 70%); } }
  @media only screen and (min-width: 100rem) {
    .bg-white.angle-left {
      background-color: transparent;
      background: linear-gradient(135deg, transparent 20%, #ffffff 20%); }
    .bg-white.angle-right {
      background-color: transparent;
      background: linear-gradient(135deg, #ffffff 65%, transparent 65%); } }

.sm-bg-white {
  background: white;
  color: black;
  width: 100%;
  height: 100%; }
  @media only screen and (min-width: 48rem) {
    .sm-bg-white {
      background: transparent;
      color: inherit; } }

.bg-black {
  background-color: #000000;
  color: #ffffff; }
  .bg-black.transparent {
    background-color: rgba(0, 0, 0, 0.2); }

.secondary-color {
  color: #009FEE; }

@font-face {
  font-family: "ZonaPro-Bold";
  src: url("../fonts/zonapro_bold_macroman/zonapro-bold-webfont.woff2"), url("../fonts/zonapro_bold_macroman/zonapro-bold-webfont.woff");
  font-weight: normal;
  font-display: swap; }

@font-face {
  font-family: "ZonaPro-Black";
  src: url("../fonts/zonapro_black_macroman/zonapro-black-webfont.woff2"), url("../fonts/zonapro_black_macroman/zonapro-black-webfont.woff");
  font-weight: normal;
  font-display: swap; }

@font-face {
  font-family: "ZonaPro-SemiBold";
  src: url("../fonts/zonapro_semibold_macroman/zonapro-semibold-webfont.woff2"), url("../fonts/zonapro_semibold_macroman/zonapro-semibold-webfont.woff");
  font-weight: normal;
  font-display: swap; }

@font-face {
  font-family: "ZonaPro-Regular";
  src: url("../fonts/zonapro_regular_macroman/zonapro-regular-webfont.woff2"), url("../fonts/zonapro_regular_macroman/zonapro-regular-webfont.woff");
  font-weight: normal;
  font-display: swap; }

@font-face {
  font-family: "ZonaPro-ExtraBold";
  src: url("../fonts/zonapro_extrabold_macroman/zonapro-extrabold-webfont.woff2"), url("../fonts/zonapro_extrabold_macroman/zonapro-extrabold-webfont.woff");
  font-weight: normal;
  font-display: swap; }

body {
  font-family: "ZonaPro-Regular", helvetica, arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: black; }
  @media only screen and (min-width: 125rem) {
    body {
      font-size: 18px; } }

/*
    Paragraph Styling

    Markup: 
    <!-- add class .intro to the <p> for the intro styling -->
    <p class="{{modifier_class}}">Mauris felis nisi, mattis ac magna lacinia, vestibulum pretium nulla. 
    Aenean sodales sapien ut ipsum dignissim scelerisque. Donec eget ipsum dictum, luctus nibh eu, suscipit libero. 
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>

    .intro - Used for highlighting the first paragraph on a page & the blurb text on the panels on gateway pages

    Styleguide Typography.Paragraph
*/
.intro p, p.intro {
  font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
  font-size: 1.125rem; }

/* #region Heading fonts */
/* #endregion */
/* -- Using Fluid Font Sizes --*/
/*
    Heading Font Sizes

    The font sizes for the headings increase as the device width goes up. You can check the responsiveness
    by resizing the screen. By default these styles are used on panels and grid elements across the site, but 
    additionally they are used in the content pages and when wrapped with a 'content' div the styling & colouring is different.

    Markup: 
    <!-- class="content" would be included in the wrapping div to output the coloured heading styles -->
    <div class="{{modifier_class}}"> 
        <h1>This is an H1 heading</h1>
        <h2>This is an H2 heading</h2>
        <h3>This is an H3 heading</h3>
        <h4>This is an H4 heading</h4>
        <h5>This is an H5 heading</h5>
        <h6>This is an H6 heading</h6>
    </div>

    .content - These styles are used within content pages rather than on panels

    Styleguide Typography.Headings
*/
h1, .h1 {
  font-size: 1.875rem;
  line-height: 1.25;
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
  font-weight: normal; }
  @media screen and (min-width: 25rem) {
    h1, .h1 {
      font-size: 2.25rem;
      line-height: 1.25; } }
  @media screen and (min-width: 36rem) {
    h1, .h1 {
      font-size: 2.5rem;
      line-height: 1.25; } }
  @media screen and (min-width: 48rem) {
    h1, .h1 {
      font-size: 2.5rem;
      line-height: 1.25; } }
  @media screen and (min-width: 64rem) {
    h1, .h1 {
      font-size: 3.25rem;
      line-height: 1.25; } }
  @media screen and (min-width: 100rem) {
    h1, .h1 {
      font-size: 3.75rem;
      line-height: 1.25; } }
  @media screen and (min-width: 125rem) {
    h1, .h1 {
      font-size: 4.25rem;
      line-height: 1.25; } }

h2, .h2 {
  font-size: 1.375rem;
  line-height: 1.25;
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
  font-weight: normal; }
  @media screen and (min-width: 25rem) {
    h2, .h2 {
      font-size: 1.5rem;
      line-height: 1.25; } }
  @media screen and (min-width: 36rem) {
    h2, .h2 {
      font-size: 1.625rem;
      line-height: 1.25; } }
  @media screen and (min-width: 48rem) {
    h2, .h2 {
      font-size: 1.75rem;
      line-height: 1.25; } }
  @media screen and (min-width: 64rem) {
    h2, .h2 {
      font-size: 1.875rem;
      line-height: 1.25; } }
  @media screen and (min-width: 100rem) {
    h2, .h2 {
      font-size: 2rem;
      line-height: 1.25; } }
  @media screen and (min-width: 125rem) {
    h2, .h2 {
      font-size: 2.5rem;
      line-height: 1.25; } }

h3, .h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
  font-weight: normal; }
  @media screen and (min-width: 36rem) {
    h3, .h3 {
      font-size: 1.375rem;
      line-height: 1.25; } }
  @media screen and (min-width: 64rem) {
    h3, .h3 {
      font-size: 1.5rem;
      line-height: 1.25; } }
  @media screen and (min-width: 100rem) {
    h3, .h3 {
      font-size: 1.675rem;
      line-height: 1.25; } }
  @media screen and (min-width: 125rem) {
    h3, .h3 {
      font-size: 1.75rem;
      line-height: 1.25; } }

h4, .h4 {
  font-size: 1.125rem;
  line-height: 1.25;
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
  font-weight: normal; }
  @media screen and (min-width: 36rem) {
    h4, .h4 {
      font-size: 1.2rem;
      line-height: 1.25; } }
  @media screen and (min-width: 64rem) {
    h4, .h4 {
      font-size: 1.25rem;
      line-height: 1.25; } }
  @media screen and (min-width: 125rem) {
    h4, .h4 {
      font-size: 1.75rem;
      line-height: 1.25; } }

h5, .h5 {
  font-weight: normal;
  font-size: 1.2rem;
  line-height: 1.4rem;
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
  text-transform: uppercase;
  margin: 10px 0; }

h6, .h6 {
  font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
  font-weight: normal; }

a {
  text-decoration: none;
  cursor: pointer; }
  a:hover, a:focus {
    text-decoration: underline; }

/* #region Form Elements */
input, select, button {
  font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }

/* #endregion */
.text-400 {
  font-family: "ZonaPro-Regular", helvetica, arial, sans-serif; }

.text-500 {
  font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }

.text-600 {
  font-family: "ZonaPro-Bold", helvetica, arial, sans-serif; }

.text-700 {
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif; }

.text-800 {
  font-family: "ZonaPro-Black", helvetica, arial, sans-serif; }

.uppercase {
  text-transform: uppercase; }

hr {
  border-bottom: 2px solid #009FEE;
  margin: 30px 0; }

/* #region Styleguide Markup */
/* 
        Blockquote Styling
        
        This is the style for blockquotes across the site
        
        Markup:
        <blockquote>
            <i class="fa fa-quote-left"></i> 
                Someone said something about a course and we wrote it here
            <i class="fa fa-quote-right"></i>
            <footer><cite>Someone - BSc (Hons) Fashion Design</cite></footer>
        </blockquote>
        
        Styleguide Typography.Blockquote
    */
/* #endregion Styleguide Markup */
blockquote {
  font-size: 1.25rem;
  line-height: 1.25;
  font-family: "ZonaPro-Regular", helvetica, arial, sans-serif;
  font-weight: 400; }
  @media screen and (min-width: 36rem) {
    blockquote {
      font-size: 1.375rem;
      line-height: 1.25; } }
  @media screen and (min-width: 64rem) {
    blockquote {
      font-size: 1.5rem;
      line-height: 1.25; } }
  @media screen and (min-width: 125rem) {
    blockquote {
      font-size: 1.75rem;
      line-height: 1.25; } }
  blockquote cite {
    font-size: 1.125rem;
    line-height: 1.625rem;
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }

.left {
  text-align: left; }

.right {
  text-align: right; }

.center {
  text-align: center; }

b {
  font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
  font-weight: normal; }

/* #Region Tabbed area content headings */
.responsive-tabs-container .content h2, .responsive-tabs-container .content .h2, .responsive-tabs-container .content h3, .responsive-tabs-container .content .h3, .responsive-tabs-container .content h4, .responsive-tabs-container .content .h4 {
  font-weight: normal;
  margin: 0.625rem 0; }

.responsive-tabs-container .content h2, .responsive-tabs-container .content .h2 {
  font-size: 1.5rem; }

.responsive-tabs-container .content h3, .responsive-tabs-container .content .h3 {
  font-size: 1.25rem;
  text-transform: uppercase; }

.responsive-tabs-container .content h4, .responsive-tabs-container .content .h4 {
  font-size: 1.125rem; }

/* #endregion */
/* #region Tag Cloud Sizing */
#tagcloud .tag1 {
  font-size: 1rem; }

#tagcloud .tag2 {
  font-size: 1.1rem; }

#tagcloud .tag3 {
  font-size: 1.2rem; }

#tagcloud .tag4 {
  font-size: 1.3rem; }

#tagcloud .tag5 {
  font-size: 1.4rem; }

#tagcloud .tag6 {
  font-size: 1.5rem; }

#tagcloud .tag7 {
  font-size: 1.6rem; }

#tagcloud .tag8 {
  font-size: 1.7rem; }

#tagcloud .tag9 {
  font-size: 1.8rem; }

#tagcloud .tag10 {
  font-size: 1.9rem; }

/* #endregion */
body.using-mouse * {
  outline: 0 !important; }

.visually-hidden {
  /* but not hidden from screen readers */
  position: absolute;
  color: white;
  z-index: 100;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

@media only screen and (min-width: 36rem) {
  .animate-up {
    transition: transform 1s;
    transform: translate(0, -1.25rem); } }

@media only screen and (min-width: 36rem) {
  .animate-down {
    transition: transform 1s;
    transform: translate(0, 0); } }

picture {
  height: 100%; }
  picture img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.panel-narrow .panel-image {
  height: 100%; }

@media only screen and (min-width: 48rem) {
  .full-width-image {
    height: 500px; } }

@media only screen and (min-width: 64rem) {
  .full-width-image {
    height: 600px; } }

@media only screen and (min-width: 100rem) {
  .full-width-image {
    height: 700px; } }

@media only screen and (min-width: 36rem) {
  .text--top-left {
    z-index: 2;
    top: 0;
    left: 0;
    position: absolute; }
  .text--top-right {
    z-index: 2;
    top: 0;
    right: 0;
    position: absolute; }
  .text--bottom-left {
    z-index: 2;
    bottom: 0;
    left: 0;
    position: absolute; }
  .text--bottom-right {
    z-index: 2;
    bottom: 0;
    right: 0;
    position: absolute; }
  .text--top-middle {
    z-index: 2;
    top: 0;
    left: 50%;
    position: absolute; }
  .text--bottom-middle {
    z-index: 2;
    bottom: 0;
    left: 50%;
    position: absolute; }
  .text--middle-left {
    z-index: 2;
    top: 50%;
    left: 0;
    position: absolute; }
  .text--middle-right {
    z-index: 2;
    top: 50%;
    right: 0;
    position: absolute; }
  .text--middle {
    z-index: 2;
    top: 50%;
    left: 50%;
    position: absolute; } }

.angle-overlays {
  position: relative;
  width: 100%;
  height: 100%; }
  .angle-overlays::after {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    content: ""; }
  .angle-overlays::after {
    top: 0;
    left: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 40%, transparent 40%, transparent calc(100% - 40%*0.5), rgba(255, 255, 255, 0.3) calc(100% - 40%*0.5)); }
  @media only screen and (min-width: 36rem) {
    .angle-overlays {
      position: relative;
      width: 100%;
      height: 100%; }
      .angle-overlays::after {
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        content: ""; }
      .angle-overlays::after {
        top: 0;
        left: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 45%, transparent 45%, transparent calc(100% - 45%*0.5), rgba(255, 255, 255, 0.3) calc(100% - 45%*0.5)); } }
  @media only screen and (min-width: 64rem) {
    .angle-overlays {
      position: relative;
      width: 100%;
      height: 100%; }
      .angle-overlays::after {
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        content: ""; }
      .angle-overlays::after {
        top: 0;
        left: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 35%, transparent 35%, transparent calc(100% - 35%*0.5), rgba(255, 255, 255, 0.3) calc(100% - 35%*0.5)); } }

.cut-corner-top-left {
  position: relative; }
  .cut-corner-top-left::before {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2  !important;
    content: "";
    top: -1px;
    left: -1px;
    background: linear-gradient(135deg, white 10%, transparent 10%); }
  .cut-corner-top-left::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    content: "";
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) calc(10% * 1.5), transparent calc(10% * 1.5)); }

.bold, strong {
  font-family: "ZonaPro-Bold", helvetica, arial, sans-serif; }

.hide, .hidden {
  display: none; }

.show {
  display: block; }

br.fcclear {
  display: none; }

.align-items-center {
  align-items: center !important; }

.align-items-stretch {
  align-items: stretch !important; }

/* #region Styleguide Markup */
/* 
        Utilities : No Padding
        
        Using this utility class will removing all padding from an element
        
        Markup: 
            <div class="content">This is the content in a wrapper here. 
                <div id="some-content" class="container bg-secondary-lighter">Content here will be narrower</div>
                <div id="some-content" class="container no-padding bg-primary-lighter">Content here will fit the width</div>
            </div>
            
        Styleguide Helpers.Utilities.Content.NoPadding
    */
/* #endregion Styleguide Markup */
.no-padding {
  padding: 0 !important; }

/* #region Styleguide Markup */
/* 
        Utilities : Align Content Wide
        
        Using this utility class will apply the narrower container to an element
        
        Markup: 
            <div id="some-content" class="align-wide">Content here will be narrower</div>
        
        Styleguide Helpers.Utilities.Content.AlignWide
    */
/* #endregion Styleguide Markup */
.align-wide, .align-wide.content.container, .align-wide.content {
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    .align-wide, .align-wide.content.container, .align-wide.content {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    .align-wide, .align-wide.content.container, .align-wide.content {
      padding-left: 10%;
      padding-right: 10%; } }

/* #region Styleguide Markup */
/* 
        Utilities : Align Content Narrow
        
        Using this utility class will apply the narrower container to an element
        
        Markup: 
            <div id="some-content" class="align-narrow">Content here will be narrower</div>
        
        Styleguide Helpers.Utilities.Content.AlignNarrow
    */
/* #endregion Styleguide Markup */
.align-narrow, .align-narrow.content.container, .align-narrow.content {
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    .align-narrow, .align-narrow.content.container, .align-narrow.content {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    .align-narrow, .align-narrow.content.container, .align-narrow.content {
      padding-left: 10%;
      padding-right: 10%; } }
  @media only screen and (min-width: 100rem) {
    .align-narrow, .align-narrow.content.container, .align-narrow.content {
      padding-left: 20%;
      padding-right: 20%; } }

.container {
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    .container {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    .container {
      padding-left: 10%;
      padding-right: 10%; } }

/* #region Styleguide Markup */
/* 
        Layout - Narrow Container
        
        This layout class adds a width constraint to the content area of the page. 

        To view the PHP for this style, you can check it in the narrow layout template: 
            theme_root/src/includes/layouts/layout-narrow.php 
        
        Markup: 
            <div id="header" class="bg-primary-base">This content is full width</div>
            <div class="container-narrow">This content will be constrained (to 1200px)</div>
            <div id="footer" class="bg-primary-base">This content is full width</div>
        
        Styleguide Layout.Narrow
        
    */
/* #endregion Styleguide Markup */
.container-narrow, .flexicontent.fctags {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  /* Remove padding from base pages that don't know they are inside a container */ }
  .container-narrow .content, .flexicontent.fctags .content, .container-narrow .container, .flexicontent.fctags .container {
    padding-left: 0 !important;
    padding-right: 0 !important; }
  @media only screen and (min-width: 48rem) {
    .container-narrow .col:first-child, .flexicontent.fctags .col:first-child {
      max-width: 70%;
      padding: 1.25rem; }
    .container-narrow .col#sidebar, .flexicontent.fctags .col#sidebar {
      max-width: 30%; } }
  @media only screen and (min-width: 64rem) {
    .container-narrow .col:first-child, .flexicontent.fctags .col:first-child {
      padding: 0; } }

.flex-wrap {
  height: 100%; }
  .flex-wrap.row, .flex-wrap.col {
    flex-direction: column; }
  .flex-wrap .col {
    flex: 1; }
  .flex-wrap.flex-end {
    justify-content: flex-end; }

.flex-grid .grid-item {
  margin-bottom: 1.25rem; }

@media only screen and (min-width: 25rem) {
  .flex-wrap.row {
    flex-direction: row; }
  .container {
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto; } }
  @media only screen and (min-width: 25rem) and (min-width: 36rem) {
    .container {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 25rem) and (min-width: 64rem) {
    .container {
      padding-left: 10%;
      padding-right: 10%; } }

@media only screen and (min-width: 48rem) {
  .flex-wrap {
    display: flex;
    flex-wrap: wrap; }
    .flex-wrap.align-bottom {
      justify-content: flex-end; }
    .flex-wrap.align-right {
      align-items: flex-end; }
    .flex-wrap.reverse {
      flex-direction: row-reverse; }
    .flex-wrap.col.reverse {
      flex-direction: column-reverse; }
  .flex-grid {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 1.25rem; }
    .flex-grid.grid-2 {
      grid-template-columns: repeat(2, 1fr); }
    .flex-grid.grid-3 {
      grid-template-columns: repeat(3, 1fr); }
    .flex-grid.grid-4 {
      grid-template-columns: repeat(2, 1fr); }
    .flex-grid .grid-item {
      margin-bottom: 0; } }

@media only screen and (min-width: 64rem) {
  .flex-grid.grid-4 {
    grid-template-columns: repeat(3, 1fr); } }

@media only screen and (min-width: 100rem) {
  .flex-grid.grid-4 {
    grid-template-columns: repeat(4, 1fr); } }

#skip-nav {
  display: none; }

#site-header {
  height: 50px;
  /* Styles specific to the menu in mobile overlay */ }
  #site-header #logo {
    position: static;
    width: 100%;
    float: left;
    max-height: 50px; }
    #site-header #logo a {
      display: block;
      justify-content: center;
      max-width: 80%; }
    #site-header #logo img {
      max-height: 50px;
      padding: 0;
      margin: 0; }
    #site-header #logo #menu-toggle, #site-header #logo #hide {
      width: 20%;
      text-align: right;
      background: none;
      color: white;
      border: none;
      font-size: 20px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      padding: 0;
      height: 50px;
      text-align: center; }
  #site-header #nav {
    display: none;
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }
    #site-header #nav ul {
      margin: 0;
      padding: 0; }
      #site-header #nav ul li {
        list-style: none;
        padding: 0 1.25rem; }
        #site-header #nav ul li a {
          color: #ffffff;
          display: block;
          text-decoration: none; }
          #site-header #nav ul li a:hover, #site-header #nav ul li a:focus {
            text-decoration: none; }
          #site-header #nav ul li a::after {
            content: "";
            display: block;
            width: 0;
            height: 2px;
            background: #ffffff;
            transition: width 0.3s; }
          #site-header #nav ul li a:hover::after, #site-header #nav ul li a:focus::after {
            width: 100%; }
    #site-header #nav .top-nav {
      text-transform: uppercase; }
    #site-header #nav .main-nav li {
      line-height: 20px; }
  #site-header #nav.mobile-nav {
    padding: 1.25rem;
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    background-color: #712177;
    position: relative;
    z-index: 9999; }
    #site-header #nav.mobile-nav #menu-wrap {
      display: flex;
      flex-direction: column-reverse;
      justify-content: flex-end;
      /* Styles for the mobile version of the nav search */ }
      #site-header #nav.mobile-nav #menu-wrap .top-nav {
        padding-top: 1.25rem; }
      #site-header #nav.mobile-nav #menu-wrap .main-nav {
        border-bottom: 2px dashed white;
        padding-bottom: 1.25rem; }
      #site-header #nav.mobile-nav #menu-wrap li {
        margin-top: 0.625rem;
        padding: 0; }
      #site-header #nav.mobile-nav #menu-wrap #nav-search {
        width: 100%;
        position: relative;
        margin-bottom: 1.25rem; }
        #site-header #nav.mobile-nav #menu-wrap #nav-search label {
          display: none; }
        #site-header #nav.mobile-nav #menu-wrap #nav-search input {
          background: transparent;
          border: none;
          border-bottom: 2px solid white;
          width: 100%;
          padding: 0.625rem;
          box-sizing: border-box;
          color: white;
          font-family: "ZonaPro-Regular", helvetica, arial, sans-serif;
          font-size: 18px; }
          #site-header #nav.mobile-nav #menu-wrap #nav-search input::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: white !important; }
          #site-header #nav.mobile-nav #menu-wrap #nav-search input::-moz-placeholder {
            /* Firefox 19+ */
            color: white !important; }
          #site-header #nav.mobile-nav #menu-wrap #nav-search input:-ms-input-placeholder {
            /* IE 10+ */
            color: white !important; }
          #site-header #nav.mobile-nav #menu-wrap #nav-search input:-moz-placeholder {
            /* Firefox 18- */
            color: white !important; }
        #site-header #nav.mobile-nav #menu-wrap #nav-search #search-icon {
          background: none;
          color: white;
          border: none;
          font-size: 20px;
          float: right;
          position: absolute;
          right: 0; }
        #site-header #nav.mobile-nav #menu-wrap #nav-search #search-close, #site-header #nav.mobile-nav #menu-wrap #nav-search #toggle-icon {
          display: none; }

@media only screen and (min-width: 64rem) {
  #site-header {
    height: 100px;
    position: relative; }
    #site-header::before {
      width: 100%;
      height: 100px;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      background: linear-gradient(rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.25) 50%); }
    #site-header::after {
      width: 100%;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      background: linear-gradient(135deg, #712177 30%, transparent 30%); }
    #site-header #nav {
      display: block;
      float: right;
      width: 75%; }
      #site-header #nav ul {
        height: 50px;
        line-height: 50px;
        text-align: right;
        padding-right: 1.25rem;
        /* Active Menu Item Styling */ }
        #site-header #nav ul li {
          display: inline-block;
          padding: 0 0.625rem; }
        #site-header #nav ul li.current > a::after,
        #site-header #nav ul li.alias-parent-active > a::after {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background: #ffffff;
          transition: width 0.3s; }
      #site-header #nav .top-nav li {
        border-right: 2px solid #ffffff;
        font-size: 14px;
        line-height: 14px; }
        #site-header #nav .top-nav li:last-child {
          border-right: none; }
      #site-header #nav .main-nav {
        padding-right: 3.125rem; }
    #site-header #logo {
      width: 25%;
      box-sizing: border-box;
      line-height: 100%;
      padding-left: 1.25rem;
      max-height: initial; }
      #site-header #logo a {
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: baseline; }
      #site-header #logo img {
        max-height: none; }
    #site-header #menu-toggle {
      display: none; }
    #site-header .row {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1; }
    #site-header #site-search {
      width: 50px;
      color: #ffffff; }
      #site-header #site-search span {
        float: right;
        cursor: pointer; }
      #site-header #site-search label {
        display: none; }
      #site-header #site-search #search-box {
        position: absolute;
        top: 55px;
        height: 40px;
        right: 1.25rem;
        border: none;
        background-color: #ffffff;
        box-shadow: none;
        font-size: 18px;
        font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
        border-radius: 0px;
        /* animated slide out */
        width: 0;
        padding: 0;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out; }
        #site-header #site-search #search-box::-webkit-input-placeholder {
          /* Chrome/Opera/Safari */
          color: #000000; }
        #site-header #site-search #search-box::-moz-placeholder {
          /* Firefox 19+ */
          color: #000000; }
        #site-header #site-search #search-box:-ms-input-placeholder {
          /* IE 10+ */
          color: #000000; }
        #site-header #site-search #search-box:-moz-placeholder {
          /* Firefox 18- */
          color: #000000; }
        #site-header #site-search #search-box::-ms-clear {
          display: none; }
        #site-header #site-search #search-box.open-search {
          padding-left: 0.625rem;
          width: 65%; }
      #site-header #site-search button {
        border: none !important;
        background-color: transparent !important;
        position: absolute;
        top: 65px;
        right: 0.625rem;
        font-size: 20px;
        color: #ffffff;
        cursor: pointer; }
      #site-header #site-search .hidden {
        display: none; }
      #site-header #site-search #search-icon:not(.hidden) {
        position: absolute;
        right: 2.5rem;
        color: #712177; }
      #site-header #site-search #toggle-icon:not(.hidden) {
        position: absolute;
        right: 1.25rem; }
      #site-header #site-search #search-close:not(.hidden) {
        position: absolute;
        right: 1.25rem;
        color: #712177; } }

@media only screen and (min-width: 100rem) {
  #site-header::after {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: linear-gradient(135deg, #712177 25%, transparent 25%); }
  #site-header #logo {
    width: 25%;
    padding-left: 2.5rem; }
  #site-header #nav {
    width: 75%; }
    #site-header #nav ul {
      padding-right: 2.5rem; }
      #site-header #nav ul li {
        padding: 0 1.25rem; }
        #site-header #nav ul li:last-child {
          padding-right: 0; }
    #site-header #nav .main-nav {
      padding-right: 5rem; }
      #site-header #nav .main-nav li:last-child {
        padding-right: 1.25rem; }
  #site-header #site-search #search-box {
    right: 2.5rem; }
    #site-header #site-search #search-box.open-search {
      width: 55%; }
  #site-header #site-search #search-icon:not(.hidden) {
    right: 3.75rem; }
  #site-header #site-search #toggle-icon:not(.hidden) {
    right: 2.5rem; }
  #site-header #site-search #search-close:not(.hidden) {
    right: 2.5rem; } }

footer#footer {
  background-color: #712177;
  background-image: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.1) 50%);
  color: #ffffff;
  text-align: center;
  padding-bottom: 1.25rem;
  margin-top: 1.25rem;
  /* Footer Menus/Text */ }
  footer#footer .social {
    text-align: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem; }
    footer#footer .social ul {
      padding: 0; }
      footer#footer .social ul li {
        list-style: none; }
        footer#footer .social ul li a {
          padding: 0 0.625rem;
          color: #ffffff; }
          footer#footer .social ul li a:hover, footer#footer .social ul li a:active, footer#footer .social ul li a:focus {
            color: #88d8ff;
            border-bottom: none !important;
            background-color: transparent; }
  footer#footer ul.nav:first-of-type {
    font-family: "ZonaPro-Bold", helvetica, arial, sans-serif; }
  footer#footer ul.nav {
    text-align: center;
    color: #ffffff;
    margin: 0;
    padding: 0; }
    footer#footer ul.nav li {
      list-style: none;
      margin-bottom: 0.625rem;
      display: inline-block;
      padding: 0 0.9375rem; }
      footer#footer ul.nav li a {
        color: #ffffff; }
        footer#footer ul.nav li a:hover, footer#footer ul.nav li a:focus {
          color: #88d8ff;
          border-bottom-width: 2px;
          border-bottom-style: solid;
          text-decoration: none; }
  footer#footer .info {
    color: #ffffff;
    text-align: center;
    padding: 1.25rem; }
  footer#footer #mod-custom-footeraddress {
    padding: 0 1.25rem; }

/** Mobile Up Styles **/
@media only screen and (min-width: 36rem) {
  footer#footer {
    padding-bottom: 2.5rem;
    margin-top: 2.5rem; }
    footer#footer ul.nav li {
      margin-bottom: 1.25rem; } }

/* #region Gateway Header */
#gateway-header {
  position: relative; }
  #gateway-header .header-text {
    z-index: 2; }
    #gateway-header .header-text .gw-head-title {
      width: 100%;
      box-sizing: border-box; }
      #gateway-header .header-text .gw-head-title h1, #gateway-header .header-text .gw-head-title .category {
        padding-left: 20px;
        padding-right: 20px; }
        @media only screen and (min-width: 36rem) {
          #gateway-header .header-text .gw-head-title h1, #gateway-header .header-text .gw-head-title .category {
            padding-left: 5%;
            padding-right: 5%; } }
        @media only screen and (min-width: 64rem) {
          #gateway-header .header-text .gw-head-title h1, #gateway-header .header-text .gw-head-title .category {
            padding-left: 10%;
            padding-right: 10%; } }
    #gateway-header .header-text .intro {
      font-size: 1rem; }
      #gateway-header .header-text .intro p {
        padding-left: 1.25rem;
        padding-right: 1.25rem; }
  #gateway-header .header-image {
    width: 100%; }

@media only screen and (min-width: 48rem) {
  #gateway-header {
    position: relative;
    height: 500px; }
    #gateway-header .header-text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%; }
      #gateway-header .header-text .gw-head-title {
        position: initial;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        margin-bottom: 7.5rem; }
        #gateway-header .header-text .gw-head-title .category {
          font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
          font-size: 1.625rem; }
        #gateway-header .header-text .gw-head-title h1, #gateway-header .header-text .gw-head-title .category {
          margin: 0;
          max-width: 75%; }
      #gateway-header .header-text .intro {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        width: 100%;
        font-size: 1.125rem; }
        #gateway-header .header-text .intro p {
          padding: 0;
          margin: 0;
          padding-left: 20px;
          padding-right: 20px;
          max-width: 65%; } }
        @media only screen and (min-width: 48rem) and (min-width: 36rem) {
          #gateway-header .header-text .intro p {
            padding-left: 5%;
            padding-right: 5%; } }
        @media only screen and (min-width: 48rem) and (min-width: 64rem) {
          #gateway-header .header-text .intro p {
            padding-left: 10%;
            padding-right: 10%; } }

@media only screen and (min-width: 48rem) {
    #gateway-header .header-image {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      height: 100%; } }

@media only screen and (min-width: 64rem) {
  #gateway-header {
    height: 600px; }
    #gateway-header .header-text .gw-head-title h1 {
      max-width: 75%; }
    #gateway-header .header-text .intro {
      padding-top: 1.25rem;
      padding-bottom: 1.25rem;
      width: 100%; }
      #gateway-header .header-text .intro p {
        padding: 0;
        margin: 0;
        max-width: 57.5%;
        padding-left: 20px;
        padding-right: 20px; } }
      @media only screen and (min-width: 64rem) and (min-width: 36rem) {
        #gateway-header .header-text .intro p {
          padding-left: 5%;
          padding-right: 5%; } }
      @media only screen and (min-width: 64rem) and (min-width: 64rem) {
        #gateway-header .header-text .intro p {
          padding-left: 10%;
          padding-right: 10%; } }

@media only screen and (min-width: 100rem) {
  #gateway-header {
    height: 700px; }
    #gateway-header .header-text .gw-head-title h1 {
      max-width: 65%; }
    #gateway-header .header-text .intro p {
      max-width: 50%; } }

/* #endregion Gateway Header */
/* #region Gateway Panel - Narrow */
.panel-narrow {
  padding: 1.25rem; }
  .panel-narrow .panel-img-wrap {
    position: relative; }
  .panel-narrow .panel-text-wrap {
    margin-top: 1.25rem; }
    .panel-narrow .panel-text-wrap h1 {
      margin: 0; }
      .panel-narrow .panel-text-wrap h1 a {
        color: #000000;
        word-break: break-word; }
  @media only screen and (min-width: 25rem) {
    .panel-narrow .panel-text-wrap .panel-title {
      width: 100%; }
    .panel-narrow .panel-img-wrap {
      flex: 1; } }
  @media only screen and (min-width: 64rem) {
    .panel-narrow {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;
      padding-top: 1.25rem;
      padding-bottom: 1.25rem;
      margin-bottom: 2.5rem;
      padding-left: 5%;
      padding-right: 5%; }
      .panel-narrow .panel-text-wrap {
        max-width: 55%; }
        .panel-narrow .panel-text-wrap .panel-title {
          max-width: 90%; }
        .panel-narrow .panel-text-wrap .panel-intro {
          max-width: 85%;
          padding: 1.25rem 0; }
          .panel-narrow .panel-text-wrap .panel-intro a {
            margin-top: 1.25rem; }
      .panel-narrow .panel-img-wrap {
        max-width: 45%; } }
  @media only screen and (min-width: 100rem) {
    .panel-narrow {
      padding-left: 10%;
      padding-right: 10%; } }

/* #endregion Gateway Panel - Narrow */
/* #region Gateway Panel - Full */
.panel-full {
  position: relative;
  margin-bottom: 1.25rem; }
  .panel-full .panel-title h1 {
    margin: 0;
    padding: 0; }
  .panel-full .panel-title a {
    padding: auto 2.5rem;
    display: block;
    color: #ffffff;
    padding-left: 20px;
    padding-right: 20px; }
    @media only screen and (min-width: 36rem) {
      .panel-full .panel-title a {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      .panel-full .panel-title a {
        padding-left: 10%;
        padding-right: 10%; } }
  .panel-full .panel-intro .text-block {
    padding-left: 20px;
    padding-right: 20px; }
    @media only screen and (min-width: 36rem) {
      .panel-full .panel-intro .text-block {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      .panel-full .panel-intro .text-block {
        padding-left: 10%;
        padding-right: 10%; } }
    .panel-full .panel-intro .text-block a {
      margin-bottom: 1.25rem; }
  @media only screen and (min-width: 48rem) {
    .panel-full {
      margin-bottom: 2.5rem;
      height: 500px; }
      .panel-full .panel-intro .text-block a {
        margin-bottom: 0; } }
  @media only screen and (min-width: 64rem) {
    .panel-full {
      height: 600px; } }
  @media only screen and (min-width: 64rem) {
    .panel-full {
      height: 700px; } }

.panel-full .panel-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem; }
  .panel-full .panel-title a {
    color: #ffffff; }

.panel-full .panel-intro {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem; }
  .panel-full .panel-intro p {
    margin-top: 0; }

.panel-full .panel-img-wrap picture {
  margin-bottom: -0.625rem; }

@media only screen and (min-width: 48rem) {
  .panel-full .panel-text-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .panel-full .panel-intro {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding-top: 0; }
    .panel-full .panel-intro .text-block {
      min-height: 150px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: baseline;
      padding-bottom: 1.25rem;
      padding-top: 1.25rem;
      padding-right: 5%;
      padding-left: 40%; }
      .panel-full .panel-intro .text-block p {
        margin: 0; }
      .panel-full .panel-intro .text-block a {
        margin-top: 1.25rem; }
    .panel-full .panel-intro::after {
      content: "";
      clear: both; }
  .panel-full .panel-title a {
    display: block;
    padding-right: 20%;
    /* BG angle split is 80% */ }
  .panel-full .panel-img-wrap picture {
    margin-bottom: 0; } }

@media only screen and (min-width: 64rem) {
  .panel-full {
    height: 600px; }
    .panel-full .panel-title a {
      padding-right: 30%;
      /* BG angle split is 70% */ }
    .panel-full .panel-intro .text-block {
      padding-right: 10%;
      padding-left: 50%; } }

@media only screen and (min-width: 100rem) {
  .panel-full {
    height: 700px; }
    .panel-full .panel-title a {
      padding-right: 35%;
      /* BG angle split is 65% */ }
    .panel-full .panel-intro .text-block {
      padding-right: 15%;
      padding-left: 55%; } }

/* #endregion - Panel Full */
/* #region - Panel Top (first item on Homepage gateways) */
.panel-top img {
  display: block; }

.panel-top .panel-title {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem; }
  .panel-top .panel-title h1 {
    margin: 0; }
    .panel-top .panel-title h1 a {
      color: #000000;
      padding-left: 20px;
      padding-right: 20px; }
      @media only screen and (min-width: 36rem) {
        .panel-top .panel-title h1 a {
          padding-left: 5%;
          padding-right: 5%; } }
      @media only screen and (min-width: 64rem) {
        .panel-top .panel-title h1 a {
          padding-left: 10%;
          padding-right: 10%; } }

.panel-top .panel-text-wrap {
  margin-bottom: 1.25rem; }
  .panel-top .panel-text-wrap .panel-intro {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 20px;
    padding-right: 20px; }
    @media only screen and (min-width: 36rem) {
      .panel-top .panel-text-wrap .panel-intro {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      .panel-top .panel-text-wrap .panel-intro {
        padding-left: 10%;
        padding-right: 10%; } }
    .panel-top .panel-text-wrap .panel-intro p {
      margin-top: 0; }

@media only screen and (min-width: 36rem) {
  .panel-top .panel-text-wrap .panel-intro {
    color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    position: initial;
    margin-top: 0; }
    .panel-top .panel-text-wrap .panel-intro .text-block {
      max-width: 70%;
      padding-top: 0.625rem;
      padding-bottom: 1.25rem; } }

@media only screen and (min-width: 48rem) {
  .panel-top {
    position: relative; }
    .panel-top .panel-title, .panel-top .panel-text-wrap {
      position: absolute;
      left: 0;
      width: 100%;
      z-index: 3; }
    .panel-top .panel-title {
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;
      top: 0; }
    .panel-top .panel-text-wrap {
      top: 50%; } }

@media only screen and (min-width: 64rem) {
  .panel-top .panel-text-wrap .panel-intro .text-block {
    max-width: 50%; } }

/* #endregion Gateway Panel - Full */
/* #region Gateway Secondary */
.gateway-secondary {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 2.5rem; }
  @media only screen and (min-width: 36rem) {
    .gateway-secondary {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    .gateway-secondary {
      padding-left: 10%;
      padding-right: 10%; } }

/* #endregion Gateway Secondary */
/* #region - Generic Gateway Styles */
@media only screen and (min-width: 48rem) {
  #gateway-list .text-block a {
    max-width: 70%; } }

/* #endregion - Generic Gateway Styles */
/* #region - No Nav Gateway Styles */
.no-nav-gateway-page .h1 {
  line-height: 36px !important; }
  @media screen and (min-width: 320px) {
    .no-nav-gateway-page .h1 {
      line-height: calc(36px + 22 * ((100vw - 320px) / 1280)) !important; } }
  @media screen and (min-width: 1600px) {
    .no-nav-gateway-page .h1 {
      line-height: 58px !important; } }

.no-nav-gateway-page .panel-narrow .panel-img-wrap .panel-image {
  position: relative; }
  .no-nav-gateway-page .panel-narrow .panel-img-wrap .panel-image::after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: "";
    z-index: 2; }

/* #endregion */
#gateway-content {
  margin-top: 2.5rem; }
  #gateway-content .grid-item {
    display: flex;
    flex-direction: column; }
    #gateway-content .grid-item .preview-text p {
      margin-bottom: 0; }

#country-grid .grid-item a > img {
  border: 2px solid #ccc; }

#country-grid .flex-grid {
  margin-top: 2.5rem;
  grid-template-columns: repeat(2, 1fr); }

@media only screen and (min-width: 25rem) {
  #country-grid .flex-grid {
    grid-template-columns: repeat(3, 1fr); } }

@media only screen and (min-width: 36rem) {
  #country-grid .flex-grid {
    grid-template-columns: repeat(4, 1fr); } }

@media only screen and (min-width: 64rem) {
  #country-grid .flex-grid {
    grid-template-columns: repeat(5, 1fr); } }

@media only screen and (min-width: 100rem) {
  #country-grid .flex-grid {
    grid-template-columns: repeat(6, 1fr); } }

/** #region - Base Page Header Styles **/
/* #region - Mobile Styles (Defaults) */
#page-header-panel {
  position: relative; }
  #page-header-panel.bg-video {
    padding: 0; }
  #page-header-panel .header-text {
    width: 100%;
    height: 100%;
    z-index: 2;
    box-sizing: border-box; }
    #page-header-panel .header-text .title-block {
      width: 100%;
      padding: 1.25rem;
      box-sizing: border-box; }
      #page-header-panel .header-text .title-block .category {
        margin: 0;
        font-family: "ZonaPro-Bold", helvetica, arial, sans-serif; }
      #page-header-panel .header-text .title-block h1 {
        margin: 0; }
  #page-header-panel .page-intro {
    width: 100%;
    padding: 0.625rem 1.25rem;
    box-sizing: border-box;
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }

/** #endregion - Mobile Styles **/
/** #region - Tablet Styles **/
@media only screen and (min-width: 48rem) {
  #page-header-panel {
    height: 500px; }
    #page-header-panel.bg-video {
      height: initial; }
    #page-header-panel .header-text {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0; }
      #page-header-panel .header-text .title-block {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem; }
        #page-header-panel .header-text .title-block h1, #page-header-panel .header-text .title-block .category {
          max-width: 75%;
          padding-left: 5%;
          box-sizing: border-box; }
      #page-header-panel .header-text .page-intro {
        font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
        width: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0; }
        #page-header-panel .header-text .page-intro .text-block {
          padding-right: 5%;
          padding-left: 40%;
          box-sizing: border-box;
          padding-top: 1.25rem;
          padding-bottom: 1.25rem;
          min-height: 150px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: baseline; }
          #page-header-panel .header-text .page-intro .text-block p {
            padding: 0;
            margin: 0;
            height: 100%; } }

/** #endregion - Tablet Styles **/
/** #region - Desktop Styles **/
@media only screen and (min-width: 64rem) {
  #page-header-panel {
    height: 600px; }
    #page-header-panel.bg-video {
      min-height: 450px; }
    #page-header-panel .header-text .title-block h1, #page-header-panel .header-text .title-block .category {
      max-width: 65%; }
    #page-header-panel .header-text .page-intro .text-block {
      padding-right: 10%;
      padding-left: 45%; } }

/** #endregion - Desktop Styles **/
/** #region - Large Desktop Styles **/
@media only screen and (min-width: 100rem) {
  #page-header-panel {
    height: 700px; }
    #page-header-panel .header-text .title-block h1, #page-header-panel .header-text .title-block .category {
      max-width: 55%;
      padding-left: 10%; }
    #page-header-panel .header-text .page-intro .text-block {
      padding-right: 15%;
      padding-left: 50%; } }

/** #endregion - Large Desktop Styles **/
/* #region Page Content Styles */
#article-content {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem; }
  @media only screen and (min-width: 36rem) {
    #article-content {
      margin-top: 2.5rem;
      margin-bottom: 2.5rem; } }

.content {
  /* this clears any elements that are floated (images within WYSI cause issues) */
  padding: 0 1.25rem;
  margin: 0 auto;
  line-height: 1.75;
  word-break: break-word;
  font-size: 0.875rem; }
  .content::after {
    clear: both;
    content: "";
    display: block; }
  .content .button a, .content a.button {
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
    padding-left: 2.5rem;
    text-decoration: none; }
    .content .button a::before, .content a.button::before {
      font-size: 18px;
      margin-left: -1.5625rem; }
  .content h3 {
    color: #712177;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 1.25rem;
    margin-top: 2.5rem; }
  .content h4 {
    color: #007abf;
    margin: 1.25rem 0; }
  .content p a:not(.r-tabs-anchor):not(.button), .content li a, .content .csColumn_text a {
    color: #007abf;
    text-decoration-line: underline;
    text-decoration-style: solid; }
    .content p a:not(.r-tabs-anchor):not(.button):hover, .content p a:not(.r-tabs-anchor):not(.button):focus, .content li a:hover, .content li a:focus, .content .csColumn_text a:hover, .content .csColumn_text a:focus {
      background-color: #e2d2e5;
      color: #571046; }
  @media only screen and (min-width: 48rem) {
    .content {
      font-size: 1rem;
      line-height: 1.5; }
      .content.container {
        padding-left: 10%;
        padding-right: 10%; }
      .content .button a, .content a.button {
        max-width: 50%;
        padding-right: 10%; } }
  @media only screen and (min-width: 64rem) {
    .content.container {
      padding-left: 15%;
      padding-right: 15%; }
    .content .button a, .content a.button {
      padding-right: 15%; } }
  @media only screen and (min-width: 100rem) {
    .content.container {
      padding-left: 20%;
      padding-right: 20%; } }

/* #endregion */
/* #region - Custom module - 'custom-text' layout */
.custom-text a {
  color: #007abf;
  text-decoration-line: underline;
  text-decoration-style: solid; }
  .custom-text a:hover, .custom-text a:focus {
    background-color: #e2d2e5;
    color: #571046; }

/* #endregion */
/* #region Overriding dropeditor inline styles */
@media screen and (max-width: 1024px) {
  .csRow .csColumn {
    width: 100% !important;
    padding: 0; }
    .csRow .csColumn > div {
      padding: 0 !important; } }

@media only screen and (min-width: 64rem) {
  .csRow {
    display: block; }
    .csRow .csColumn {
      padding-right: 1.25rem !important;
      /* overwrites the inline style that's auto-generated */ }
      .csRow .csColumn:last-child {
        padding-right: 0; }
      .csRow .csColumn > div {
        padding: 0 !important; } }

/* #endregion */
body {
  user-select: text; }

/* Custom styles for the addsearch form & results */
#rgu-content-search.module {
  /* ======================================== */
  /*          COURSE SPECIFIC FILTER STYLES          */
  /* ======================================== */ }
  #rgu-content-search.module #results-msg {
    margin: 1.25rem;
    font-size: 15px; }
    #rgu-content-search.module #results-msg span.filt-on {
      border-right: 2px solid #000000;
      padding-right: 0.625rem;
      margin-right: 0.625rem;
      cursor: pointer;
      color: #712177; }
      #rgu-content-search.module #results-msg span.filt-on:last-child {
        border-right: none;
        padding-right: 0;
        margin-right: 0; }
      #rgu-content-search.module #results-msg span.filt-on i {
        margin-left: 0.3125rem; }
    #rgu-content-search.module #results-msg.no-results {
      padding: 1.25rem 0;
      border-bottom: 5px solid #000000; }
  #rgu-content-search.module #spinner {
    display: none;
    margin: 1.25rem;
    margin-bottom: 0; }
    #rgu-content-search.module #spinner i {
      font-size: 22px;
      font-weight: 700; }
  #rgu-content-search.module #addsearch-form ul.form-multi-list li.ug {
    background-color: #ec008c;
    margin-right: 0.625rem; }
    #rgu-content-search.module #addsearch-form ul.form-multi-list li.ug:hover, #rgu-content-search.module #addsearch-form ul.form-multi-list li.ug:active, #rgu-content-search.module #addsearch-form ul.form-multi-list li.ug:focus {
      background-color: #ff20a4; }
  #rgu-content-search.module #addsearch-form ul.form-multi-list li.pg {
    background-color: #0072bc;
    margin: 0.625rem; }
    #rgu-content-search.module #addsearch-form ul.form-multi-list li.pg:hover, #rgu-content-search.module #addsearch-form ul.form-multi-list li.pg:active, #rgu-content-search.module #addsearch-form ul.form-multi-list li.pg:focus {
      background-color: #0091ef; }
  #rgu-content-search.module #addsearch-form ul.form-multi-list li.scpd {
    background-color: #749F1D;
    margin-left: 0.625rem; }
    #rgu-content-search.module #addsearch-form ul.form-multi-list li.scpd:hover, #rgu-content-search.module #addsearch-form ul.form-multi-list li.scpd:active, #rgu-content-search.module #addsearch-form ul.form-multi-list li.scpd:focus {
      background-color: #93ca25; }

/* #region - Form Fields */
#rgu-content-search .search-fields {
  color: #712177 !important;
  position: relative; }
  #rgu-content-search .search-fields input {
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
    font-size: 1.25rem;
    padding: 0.625rem 1.25rem;
    padding-left: 2.5rem;
    background: none;
    border: none;
    border-bottom: 5px solid #712177;
    color: #712177 !important;
    width: 100%;
    box-sizing: border-box; }
    #rgu-content-search .search-fields input::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #712177 !important;
      opacity: 1; }
    #rgu-content-search .search-fields input::-moz-placeholder {
      /* Firefox 19+ */
      color: #712177 !important;
      opacity: 1; }
    #rgu-content-search .search-fields input:-ms-input-placeholder {
      /* IE 10+ */
      color: #712177 !important;
      opacity: 1; }
    #rgu-content-search .search-fields input:-moz-placeholder {
      /* Firefox 18- */
      color: #712177 !important;
      opacity: 1; }
  #rgu-content-search .search-fields span.fa-search {
    position: absolute;
    top: 0.20833rem;
    left: 0;
    font-size: 1.5rem; }
  #rgu-content-search .search-fields #clear-search-term {
    display: none;
    position: absolute;
    top: 0.27778rem;
    right: 0;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer; }

/* #endregion */
/* #region Header Styles */
#rgu-content-search #search-header {
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    #rgu-content-search #search-header {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    #rgu-content-search #search-header {
      padding-left: 10%;
      padding-right: 10%; } }
  #rgu-content-search #search-header a {
    color: #007abf;
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }
    #rgu-content-search #search-header a::before {
      content: "\f061";
      margin-right: 0.625rem;
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 1rem;
      color: #712177; }
    #rgu-content-search #search-header a:hover, #rgu-content-search #search-header a:focus {
      color: #6B1868;
      text-decoration: none; }
      #rgu-content-search #search-header a:hover::before, #rgu-content-search #search-header a:focus::before {
        color: #007abf; }

/* #endregion Header Styles */
/* #region Search Form Styles */
#filtered-search {
  padding: 1.25rem 0; }
  #filtered-search form {
    padding-left: 20px;
    padding-right: 20px; }
    @media only screen and (min-width: 36rem) {
      #filtered-search form {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #filtered-search form {
        padding-left: 10%;
        padding-right: 10%; } }
    #filtered-search form #mobile-filters {
      text-align: center;
      padding: 0.625rem;
      background-color: #007abf;
      color: white;
      cursor: pointer;
      margin-bottom: 0.625rem;
      margin-top: 0.625rem; }
    #filtered-search form .ug {
      background: linear-gradient(135deg, transparent 70%, rgba(0, 0, 0, 0.2) 70%), linear-gradient(to bottom, #e10086, #e10086); }
    #filtered-search form .pg {
      background: linear-gradient(135deg, transparent 70%, rgba(0, 0, 0, 0.2) 70%), linear-gradient(to bottom, #0072bc, #0072bc); }
    #filtered-search form .ol {
      background: linear-gradient(135deg, transparent 70%, rgba(0, 0, 0, 0.2) 70%), linear-gradient(to bottom, #6B1868, #6B1868); }
    #filtered-search form .scpd {
      background: linear-gradient(135deg, transparent 70%, rgba(0, 0, 0, 0.2) 70%), linear-gradient(to bottom, #88b73b, #88b73b); }
    #filtered-search form #filter-fields {
      display: none;
      margin-bottom: 0.625rem; }
      #filtered-search form #filter-fields .row {
        display: flex;
        flex-direction: column; }
    #filtered-search form select {
      flex: 1;
      padding: 0.625rem;
      border: none;
      margin-bottom: 0.625rem; }
    #filtered-search form button {
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
      width: 100%;
      padding: 0.625rem 0;
      flex: 1;
      text-transform: uppercase;
      background-color: white;
      border: 2px solid #712177;
      cursor: pointer;
      font-size: 1rem; }
      #filtered-search form button#clear-search-button {
        display: none; }
      #filtered-search form button::after {
        font-family: "Font Awesome 5 Free";
        content: "\f2f1";
        font-weight: bold;
        font-size: 1rem;
        margin-left: 0.625rem; }
    #filtered-search form .form-multi-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0; }
      #filtered-search form .form-multi-list li {
        flex: 1;
        list-style: none;
        color: white;
        margin-bottom: 0.625rem;
        display: flex;
        align-items: center; }
        #filtered-search form .form-multi-list li label {
          display: block;
          width: 100%;
          box-sizing: border-box;
          padding: 0.625rem;
          cursor: pointer;
          font-family: "ZonaPro-Bold", helvetica, arial, sans-serif; }
          #filtered-search form .form-multi-list li label input {
            opacity: 0;
            width: 0;
            margin: 0; }
        #filtered-search form .form-multi-list li.checked label::before {
          content: "\f058";
          font-family: "Font Awesome 5 Free";
          font-weight: bold;
          font-size: 22px;
          color: white;
          margin-right: 0.625rem; }
  @media only screen and (min-width: 48rem) {
    #filtered-search form #mobile-filters {
      display: none;
      height: 0;
      width: 0; }
    #filtered-search form #filter-fields {
      display: block; }
      #filtered-search form #filter-fields .row {
        flex-direction: row; }
    #filtered-search form .search-fields {
      margin-top: 0.625rem;
      margin-bottom: 0.625rem; }
      #filtered-search form .search-fields input, #filtered-search form .search-fields span.fa-search, #filtered-search form .search-fields #clear-search-term {
        font-size: 1.25rem;
        margin-bottom: 0; }
    #filtered-search form select {
      margin-right: 1.25rem;
      max-width: 20%;
      margin-bottom: 0; }
    #filtered-search form button {
      max-width: 20%; }
      #filtered-search form button#mobile-clear-search-button {
        display: none; }
      #filtered-search form button#clear-search-button {
        display: block; }
    #filtered-search form .form-multi-list {
      flex-direction: row; }
      #filtered-search form .form-multi-list li {
        margin-right: 1.25rem;
        min-height: 4rem; }
        #filtered-search form .form-multi-list li:last-child {
          margin-right: 0; } }

/* #endregion Search Form Styles */
/* #region Results Styles */
#search-result-wrap {
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    #search-result-wrap {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    #search-result-wrap {
      padding-left: 10%;
      padding-right: 10%; } }
  #search-result-wrap #spinner {
    width: 100%;
    text-align: center;
    padding: 0.625rem 0;
    display: none; }
  #search-result-wrap #results-msg {
    margin: 1.25rem 0; }
    #search-result-wrap #results-msg .filt-on {
      color: #712177;
      margin-right: 0.625rem;
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
      cursor: pointer;
      background: none;
      border: none;
      font-size: inherit; }
      #search-result-wrap #results-msg .filt-on:focus {
        border: 1px dotted #712177; }

#search-featured-items .container {
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    #search-featured-items .container {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    #search-featured-items .container {
      padding-left: 10%;
      padding-right: 10%; } }

#as-results-wrap, #search-featured-items {
  column-gap: 1.25rem; }
  #as-results-wrap::after, #search-featured-items::after {
    content: "";
    flex: auto;
    flex-basis: 24%; }
  #as-results-wrap .result-item, #search-featured-items .result-item {
    margin-bottom: 1.25rem;
    padding: 0.3125rem;
    box-sizing: border-box;
    font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: auto; }
    #as-results-wrap .result-item.scpd, #search-featured-items .result-item.scpd {
      background-color: #88b73b; }
      #as-results-wrap .result-item.scpd:hover, #as-results-wrap .result-item.scpd:focus, #search-featured-items .result-item.scpd:hover, #search-featured-items .result-item.scpd:focus {
        background-color: #6e9730; }
    #as-results-wrap .result-item.pg, #search-featured-items .result-item.pg {
      background-color: #0072bc; }
      #as-results-wrap .result-item.pg:hover, #as-results-wrap .result-item.pg:focus, #search-featured-items .result-item.pg:hover, #search-featured-items .result-item.pg:focus {
        background-color: #005f9d; }
    #as-results-wrap .result-item.ug, #search-featured-items .result-item.ug {
      background-color: #e10086; }
      #as-results-wrap .result-item.ug:hover, #as-results-wrap .result-item.ug:focus, #search-featured-items .result-item.ug:hover, #search-featured-items .result-item.ug:focus {
        background-color: #ba006f; }
    #as-results-wrap .result-item.scholarship, #search-featured-items .result-item.scholarship {
      background-color: #B077B8; }
      #as-results-wrap .result-item.scholarship:hover, #as-results-wrap .result-item.scholarship:focus, #search-featured-items .result-item.scholarship:hover, #search-featured-items .result-item.scholarship:focus {
        background-color: #712177; }
        #as-results-wrap .result-item.scholarship:hover .result-link, #as-results-wrap .result-item.scholarship:focus .result-link, #search-featured-items .result-item.scholarship:hover .result-link, #search-featured-items .result-item.scholarship:focus .result-link {
          color: white; }
      #as-results-wrap .result-item.scholarship .result-link, #search-featured-items .result-item.scholarship .result-link {
        color: #000000;
        background: linear-gradient(135deg, transparent 70%, rgba(255, 255, 255, 0.1) 70%); }
    #as-results-wrap .result-item:hover, #as-results-wrap .result-item:focus, #search-featured-items .result-item:hover, #search-featured-items .result-item:focus {
      text-decoration: none; }
    #as-results-wrap .result-item:focus, #search-featured-items .result-item:focus {
      outline: 5px solid #009FEE; }
    #as-results-wrap .result-item .result-title, #search-featured-items .result-item .result-title {
      background-color: white;
      color: black;
      padding: 1.25rem;
      padding-bottom: 5rem;
      flex: 1;
      min-height: 2.5rem;
      font-size: 1.25rem;
      position: relative;
      box-sizing: content-box; }
      #as-results-wrap .result-item .result-title .item-flag, #search-featured-items .result-item .result-title .item-flag {
        display: block;
        color: #ffffff;
        width: 0;
        height: 0;
        border-bottom: 6.25rem solid #000000;
        border-left: 6.25rem solid transparent;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1; }
      #as-results-wrap .result-item .result-title .item-flag-text, #search-featured-items .result-item .result-title .item-flag-text {
        display: block;
        position: absolute;
        bottom: -5.75rem;
        right: 10px;
        color: #ffffff;
        z-index: 2;
        text-align: right;
        font-size: 14px; }
    #as-results-wrap .result-item .result-link, #search-featured-items .result-item .result-link {
      background: linear-gradient(135deg, transparent 70%, rgba(0, 0, 0, 0.2) 70%);
      color: white;
      margin-top: auto;
      display: flex;
      align-items: center;
      min-height: 75px; }
      #as-results-wrap .result-item .result-link p, #search-featured-items .result-item .result-link p {
        flex: 3;
        padding-left: 0.625rem;
        display: block; }
      #as-results-wrap .result-item .result-link i, #search-featured-items .result-item .result-link i {
        flex: 1;
        text-align: right;
        padding-right: 1.25rem; }
  @media only screen and (min-width: 36rem) {
    #as-results-wrap #as-results-wrap, #search-featured-items #as-results-wrap {
      display: grid;
      grid-template-columns: repeat(2, 1fr); } }
  @media only screen and (min-width: 64rem) {
    #as-results-wrap #as-results-wrap, #search-featured-items #as-results-wrap {
      grid-template-columns: repeat(3, 1fr); } }
  @media only screen and (min-width: 100rem) {
    #as-results-wrap #as-results-wrap, #search-featured-items #as-results-wrap {
      grid-template-columns: repeat(4, 1fr); } }

/* #endregion Results Styles */
/* ======================================== */
/*              MODULE STYLES               */
/* ======================================== */
#addsearch-form.module {
  position: relative;
  background-color: transparent;
  padding: 0 1.25rem;
  margin: 0 auto; }
  #addsearch-form.module #search-all-btn {
    font-size: 1.25rem;
    background: linear-gradient(135deg, #712177 90%, transparent 90%);
    color: white;
    max-width: 400px;
    padding: 0.3125rem 0.625rem;
    box-sizing: border-box; }
    #addsearch-form.module #search-all-btn:hover, #addsearch-form.module #search-all-btn:focus {
      background: linear-gradient(135deg, #007abf 90%, transparent 90%); }
  #addsearch-form.module #search-box {
    position: relative;
    padding-bottom: 0.625rem;
    padding-top: 0.625rem; }
    #addsearch-form.module #search-box .search-fields {
      margin-bottom: 0.625rem; }
      #addsearch-form.module #search-box .search-fields .fa-search {
        top: 10px; }
    #addsearch-form.module #search-box .search-btn {
      display: flex;
      flex-direction: column;
      justify-content: center; }
  #addsearch-form.module #results-overlay {
    z-index: 10;
    position: absolute;
    width: 100%;
    left: 0; }
    #addsearch-form.module #results-overlay #no-results {
      display: none;
      background-color: #ffffff;
      padding: 1.25rem;
      margin: 0; }
      #addsearch-form.module #results-overlay #no-results h4 {
        margin-top: 0; }
    #addsearch-form.module #results-overlay #autocomplete-results {
      display: none;
      background-color: #ffffff;
      padding: 0.625rem 1.25rem;
      margin: 0;
      box-sizing: border-box; }
      #addsearch-form.module #results-overlay #autocomplete-results #result-list {
        padding: 0; }
        #addsearch-form.module #results-overlay #autocomplete-results #result-list li {
          list-style: none;
          line-height: 1.5;
          padding-left: 0.625rem;
          margin-bottom: 0.625rem;
          font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
          border-left: 10px solid #712177;
          margin-top: 0.625rem; }
          #addsearch-form.module #results-overlay #autocomplete-results #result-list li a {
            color: #007abf; }
            #addsearch-form.module #results-overlay #autocomplete-results #result-list li a .result-title, #addsearch-form.module #results-overlay #autocomplete-results #result-list li a .result-award {
              display: block;
              text-align: left; }
            #addsearch-form.module #results-overlay #autocomplete-results #result-list li a .result-award {
              font-size: 0.75rem; }
            @media only screen and (min-width: 48rem) {
              #addsearch-form.module #results-overlay #autocomplete-results #result-list li a {
                display: flex;
                flex-direction: row;
                margin-left: 0.625rem; }
                #addsearch-form.module #results-overlay #autocomplete-results #result-list li a .result-title {
                  flex: 2; }
                #addsearch-form.module #results-overlay #autocomplete-results #result-list li a .result-award {
                  text-align: right;
                  font-size: 1rem; } }
          #addsearch-form.module #results-overlay #autocomplete-results #result-list li.PG {
            border-color: #0072bc; }
          #addsearch-form.module #results-overlay #autocomplete-results #result-list li.UG {
            border-color: #e10086; }
          #addsearch-form.module #results-overlay #autocomplete-results #result-list li.SCPD {
            border-color: #88b73b; }
      #addsearch-form.module #results-overlay #autocomplete-results .result-header {
        border-bottom: 2px solid #000000;
        padding-bottom: 0.625rem; }
        #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons #mobile-filters {
          display: block;
          background-color: #712177;
          background-image: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.1) 50%);
          color: #ffffff;
          padding: 0.625rem;
          text-align: center;
          cursor: pointer; }
          #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons #mobile-filters span {
            margin-right: 0.625rem; }
        #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons #filter-fields {
          display: none;
          margin-top: 0.625rem; }
        #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons .button-filter {
          padding: 0.625rem;
          box-sizing: border-box;
          color: #000000;
          width: 100%;
          text-align: left;
          margin-bottom: 0.625rem;
          background: linear-gradient(135deg, #ccc 50%, #bbb 50%);
          font-size: 18px;
          line-height: 1.2;
          font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
          cursor: default;
          display: flex;
          justify-content: center;
          align-items: center; }
          #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons .button-filter.active {
            cursor: pointer;
            color: #000000; }
        #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons .button-filter.active.UG {
          color: white !important;
          background: linear-gradient(135deg, #e10086 50%, #ba006f 50%); }
        #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons .button-filter.active.PG {
          color: white !important;
          background: linear-gradient(135deg, #0072bc 50%, #005f9d 50%); }
        #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons .button-filter.active.SCPD {
          color: white;
          background: linear-gradient(135deg, #88b73b 50%, #6e9730 50%); }
        #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons .button-filter.active.checked::before {
          content: '\f058';
          font-family: "Font Awesome 5 Free";
          padding-right: 0.625rem;
          font-weight: 900; }
      #addsearch-form.module #results-overlay #autocomplete-results #result-count {
        display: none; }
      #addsearch-form.module #results-overlay #autocomplete-results #spinner {
        display: none;
        padding: 0;
        margin: 0; }
        #addsearch-form.module #results-overlay #autocomplete-results #spinner span {
          font-weight: "bold";
          margin-right: 1.25rem; }
    #addsearch-form.module #results-overlay #search-button #all-results {
      padding: 0.625rem 1.25rem !important;
      width: 100%;
      text-align: center;
      margin-top: 0.625rem; }

/** Tablet Up Styles **/
@media only screen and (min-width: 64rem) {
  #addsearch-form.module {
    padding-left: 5%;
    padding-right: 5%; }
    #addsearch-form.module #search-box {
      display: flex; }
      #addsearch-form.module #search-box input {
        height: 100%; }
      #addsearch-form.module #search-box .search-fields {
        position: relative;
        flex: 2;
        padding-right: 1.25rem;
        box-sizing: border-box;
        margin: 0; }
        #addsearch-form.module #search-box .search-fields #close-results {
          right: 1.25rem;
          top: 0.625rem; }
      #addsearch-form.module #search-box .search-btn {
        flex: 1; }
    #addsearch-form.module #results-overlay {
      box-sizing: border-box;
      width: 80%;
      left: 10%; }
      #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons #mobile-filters {
        display: none; }
      #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons #filter-fields {
        display: flex;
        flex-direction: row; }
        #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons #filter-fields .button-filter {
          text-align: center;
          margin-bottom: 0;
          flex: 1; }
          #addsearch-form.module #results-overlay #autocomplete-results .result-header #filter-buttons #filter-fields .button-filter:nth-child(2) {
            margin: 0 0.625rem; }
      #addsearch-form.module #results-overlay #autocomplete-results ul#result-list li {
        border-bottom: none;
        padding: 0; }
      #addsearch-form.module #results-overlay #autocomplete-results #search-button #all-results {
        margin-top: 1.25rem; } }

@media only screen and (min-width: 100rem) {
  #addsearch-form.module {
    padding-left: 15%;
    padding-right: 10%; }
    #addsearch-form.module #search-all-btn {
      font-size: 1.5rem;
      max-width: none; }
    #addsearch-form.module #results-overlay {
      width: 70%;
      left: 15%; } }

#directoryLookupForm {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem; }
  #directoryLookupForm #val-notice {
    padding: 0.625rem;
    display: none; }
  #directoryLookupForm input, #directoryLookupForm select {
    font-size: 1rem; }
  #directoryLookupForm #dep-lists select {
    display: block;
    padding: 0.625rem;
    width: 100%;
    margin-bottom: 1.25rem; }
  #directoryLookupForm input {
    display: block;
    width: 100%;
    padding: 0.625rem;
    margin-bottom: 1.25rem; }
  #directoryLookupForm #formFields .flex-wrap {
    display: block; }
  @media only screen and (min-width: 48rem) {
    #directoryLookupForm #formFields .flex-wrap {
      display: flex; }
    #directoryLookupForm #formFields .flex-wrap .col:first-child {
      margin-right: 1.25rem; } }
  #directoryLookupForm .button-alt {
    width: 50%;
    display: inline-block; }

#staff-directory .sd-list#directory-results {
  display: block;
  border: 2px solid #000000;
  margin: 1.25rem; }
  #staff-directory .sd-list#directory-results #person-columns {
    display: block; }

#staff-directory #loader {
  width: 100%;
  text-align: center; }

#staff-directory #loader, #staff-directory #directory-results {
  display: none; }

#staff-directory #grp-title {
  margin-left: 1.25rem;
  margin-right: 1.25rem; }

#staff-directory #directory-results {
  border: 2px solid #000000;
  margin: 1.25rem; }
  #staff-directory #directory-results #person-columns {
    display: none; }

#staff-directory #name-list .person-card, #staff-directory .sd-list#directory-results #name-list .person-card {
  padding: 1.25rem; }
  #staff-directory #name-list .person-card:nth-child(even), #staff-directory .sd-list#directory-results #name-list .person-card:nth-child(even) {
    background-color: #d0eaf8; }
  #staff-directory #name-list .person-card span, #staff-directory .sd-list#directory-results #name-list .person-card span {
    display: block; }
    #staff-directory #name-list .person-card span a, #staff-directory .sd-list#directory-results #name-list .person-card span a {
      color: #006B99; }
    #staff-directory #name-list .person-card span i, #staff-directory .sd-list#directory-results #name-list .person-card span i {
      width: 1.25rem;
      margin-right: 0.625rem; }
    #staff-directory #name-list .person-card span.dept, #staff-directory .sd-list#directory-results #name-list .person-card span.dept {
      padding-left: 1.875rem; }
      #staff-directory #name-list .person-card span.dept i, #staff-directory .sd-list#directory-results #name-list .person-card span.dept i {
        margin-left: -1.875rem; }
    #staff-directory #name-list .person-card span.location, #staff-directory .sd-list#directory-results #name-list .person-card span.location {
      padding-left: 1.875rem; }

@media only screen and (min-width: 48rem) {
  #staff-directory #grp-title {
    margin-left: 0;
    margin-right: 0; }
  #staff-directory #directory-results, #staff-directory .sd-list#directory-results {
    margin: 0; }
    #staff-directory #directory-results #person-columns, #staff-directory .sd-list#directory-results #person-columns {
      display: flex;
      flex-direction: row;
      background-color: #712177; }
      #staff-directory #directory-results #person-columns span, #staff-directory .sd-list#directory-results #person-columns span {
        flex: 1;
        border-right: 1px solid #ffffff;
        color: #ffffff;
        padding: 0.625rem 1.25rem; }
        #staff-directory #directory-results #person-columns span:last-child, #staff-directory .sd-list#directory-results #person-columns span:last-child {
          border-right: none; }
    #staff-directory #directory-results #name-list, #staff-directory .sd-list#directory-results #name-list {
      display: flex;
      flex-direction: column; }
      #staff-directory #directory-results #name-list .person-card, #staff-directory .sd-list#directory-results #name-list .person-card {
        flex: 1;
        display: flex;
        flex-direction: row;
        padding: 0; }
        #staff-directory #directory-results #name-list .person-card span, #staff-directory .sd-list#directory-results #name-list .person-card span {
          padding: 0.625rem 1.25rem;
          border-right: 1px solid #000000;
          box-sizing: border-box;
          flex: 1; }
          #staff-directory #directory-results #name-list .person-card span:last-child, #staff-directory .sd-list#directory-results #name-list .person-card span:last-child {
            border-right: none; }
          #staff-directory #directory-results #name-list .person-card span i, #staff-directory .sd-list#directory-results #name-list .person-card span i {
            display: none; } }

/*-- Shame Section --*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #directoryLookupForm #dep-lists select {
    flex-basis: auto;
    height: 45px; }
  #staff-directory #directory-results #person-columns span {
    flex: 1 1 25%; }
  #staff-directory #directory-results #name-list .person-card {
    flex: 1 1 auto; }
    #staff-directory #directory-results #name-list .person-card span {
      flex: 1 1 25%; } }

/* #region Styleguide Markup */
/* 
    Anchor Nav

    Used on pages where the content is long, allows content editors to provide a context menu that 
    gives users a quick-access link to sections of the page 

    Markup: 
    <div class="sticky-block-outer" style="height: auto;"> <!-- allows the anchors to stick to the top of the page on scroll -->
		<div id="anchor-block" class="content-anchors sticky-block">
            <div id="anchor-nav-toggle" class="gateway-nav-mobile bg-secondary-light text-500">
                On this page
                <i class="fa fa-angle-up"></i>
				<i class="fa fa-angle-down"></i>
			</div>
			<div id="anchor-nav" class="anchor-bar bg-secondary-light">
				<div class="row">
					<span class="anchor-label"><b>On this page:</b></span>
					<a href="#anchor-1" onclick="mobileCollapse()" id="164-anchor-1" class="text-500 anchor-scroll-link">Section One</a> 
					<a href="#anchor-2" onclick="mobileCollapse()" id="164-anchor-2" class="text-500 anchor-scroll-link">Section Two</a> 
					<a href="#anchor-3" onclick="mobileCollapse()" id="164-anchor-3" class="text-500 anchor-scroll-link">Section Three</a> 
				</div>
			</div>
		</div>
	</div>

    Styleguide Components.Anchors.Nav
*/
/* #endregion Styleguide Markup */
#anchor-nav-toggle {
  padding: 0.625rem 1.25rem; }
  #anchor-nav-toggle .fa-angle-up {
    display: none; }
  #anchor-nav-toggle .fa-angle-down {
    display: inline-block; }
  #anchor-nav-toggle.open .fa-angle-down {
    display: none; }
  #anchor-nav-toggle.open .fa-angle-up {
    display: inline-block; }

#anchor-nav {
  display: none;
  padding-top: 1.25rem; }
  #anchor-nav .anchor-label {
    display: none; }
  #anchor-nav a {
    color: black;
    display: block;
    padding: 0 1.25rem;
    margin-bottom: 0.625rem; }
    #anchor-nav a:last-child {
      margin-bottom: 0;
      padding-bottom: 1.25rem; }
    #anchor-nav a:hover, #anchor-nav a:focus {
      text-decoration: underline; }

h2 a[name^=anchor-] {
  margin-top: -100px;
  padding-bottom: 100px;
  display: block; }

@media only screen and (min-width: 64rem) {
  #anchor-nav-toggle, #gateway-nav-toggle {
    display: none; }
  #anchor-nav {
    display: block;
    padding: 1.25rem;
    padding-bottom: 0.625rem;
    text-align: center; }
    #anchor-nav .anchor-label {
      display: inline-block; }
    #anchor-nav a {
      color: black;
      display: inline-block;
      border-right: 2px solid #000000; }
      #anchor-nav a:last-child {
        border-right: none;
        padding-bottom: 0; } }

/* #region Styleguide Markup */
/* 
    Banners Display 

    Banners are used on the homepage to display key content at different times of the year. The content is controlled by the web content team
    and is output to the page via the Joomla banners module.

    Markup: 
        <!-- inline styles are for the documentation display only -->
        <div class="banner-item" style="max-width: 1200px; max-height: 438px;">
            <div class="panel-image">
                <?php include the php image template here ?>
                <!-- For the documentation we just use a placeholder image -->
                <img src="https://placeimg.com/822/300/nature" style="width: 1200px;  height: 438px;"/>
            </div>		
             <div class="banner-text flex-wrap col reverse align-right">
                <div class="banner-title bg-white angle-left">
                    <h1><?php echo $title; ?>Banner Title</h1>
                 </div>
                 <div class="banner-intro bg-primary-base-transparent angle-left">
                    <div class="text-block sm-bg-white">
                        <p><?php echo $intro; ?>Banner intro text here</p>                                    
                        <a aria-label="Click to view full details" href="<?php echo $link; ?>" class="btn-secondary"><?php echo $read_more; ?>Read More</a>			
                    </div>
                </div>
            </div>
         </div>

    Styleguide Components.Banners.Display
*/
/* #endregion */
.banner-item .banner-text {
  width: 100%; }
  .banner-item .banner-text .banner-intro {
    width: 100%;
    box-sizing: border-box;
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }
    .banner-item .banner-text .banner-intro .text-block {
      padding: 1.25rem;
      width: 100%;
      box-sizing: border-box; }
      .banner-item .banner-text .banner-intro .text-block p {
        margin: 0; }
      .banner-item .banner-text .banner-intro .text-block a {
        margin-top: 1.25rem; }
  .banner-item .banner-text .banner-title {
    width: 100%;
    box-sizing: border-box;
    padding: 0; }
    .banner-item .banner-text .banner-title h1 {
      margin: 0;
      padding: 1.25rem;
      padding-bottom: 0; }

@media only screen and (min-width: 48rem) {
  .banner-item {
    height: 600px !important;
    position: relative; }
    .banner-item .hero-image {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0; }
    .banner-item .banner-text {
      position: absolute;
      top: 0;
      left: 0; }
      .banner-item .banner-text .banner-intro {
        z-index: 2;
        position: relative;
        width: 100%; }
        .banner-item .banner-text .banner-intro .text-block {
          padding-top: 1.25rem;
          padding-bottom: 1.25rem;
          padding-left: 45%;
          padding-right: 10%; }
      .banner-item .banner-text .banner-title {
        z-index: 2;
        position: relative; }
        .banner-item .banner-text .banner-title h1 {
          margin: 1.25rem 0;
          padding-left: 40%;
          padding-right: 10%; } }

@media only screen and (min-width: 64rem) {
  .banner-item .banner-text .banner-intro .text-block {
    padding-left: 50%;
    padding-right: 15%; }
  .banner-item .banner-text .banner-title h1 {
    padding-left: 25%; } }

/* 
    This file holds all of the styles for elements that are output
    within the breadcrumbs bar
*/
#breadcrumbs {
  height: 50px;
  font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
  font-size: 16px;
  width: 100%; }
  #breadcrumbs.hide-mobile {
    display: none; }
  #breadcrumbs #bc-cta {
    line-height: 50px; }
  #breadcrumbs ul {
    display: none;
    flex: 1;
    font-size: 0.75rem; }
    #breadcrumbs ul li {
      margin-right: 0; }
  #breadcrumbs .breadcrumb-cta {
    display: flex;
    align-items: center;
    padding-right: 0;
    height: 100%; }
    #breadcrumbs .breadcrumb-cta p {
      padding: 0;
      margin: 0; }
    #breadcrumbs .breadcrumb-cta a {
      color: #000000;
      background: transparent;
      text-transform: uppercase;
      font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
      display: flex;
      align-items: center;
      font-size: 0.825rem;
      padding: 0 1.25rem; }
      #breadcrumbs .breadcrumb-cta a:hover, #breadcrumbs .breadcrumb-cta a:focus {
        text-decoration: none;
        color: #712177;
        background-color: rgba(255, 255, 255, 0.4); }
        #breadcrumbs .breadcrumb-cta a:hover::before, #breadcrumbs .breadcrumb-cta a:focus::before {
          color: #006B99; }
      #breadcrumbs .breadcrumb-cta a::before {
        content: "\f061";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 1.5rem;
        color: #712177;
        margin-right: 0.625rem; }
  @media only screen and (min-width: 48rem) {
    #breadcrumbs {
      display: flex;
      flex-direction: row; }
      #breadcrumbs.hide-mobile {
        display: flex; }
      #breadcrumbs ul {
        padding: 0;
        margin: 0;
        height: 50px;
        padding-left: 0.625rem;
        display: block; }
        #breadcrumbs ul li {
          line-height: 50px;
          list-style: none;
          display: inline-block; }
          #breadcrumbs ul li:first-child a {
            text-decoration: none; }
          #breadcrumbs ul li:last-child {
            padding-left: 0.3125rem; }
          #breadcrumbs ul li a.compacted {
            text-decoration: none; }
          #breadcrumbs ul li a {
            color: #000000;
            text-decoration: underline;
            padding: 0.3125rem; }
            #breadcrumbs ul li a:hover, #breadcrumbs ul li a:focus {
              background-color: #008fcc;
              color: white;
              text-decoration: none; } }
  @media only screen and (min-width: 64rem) {
    #breadcrumbs ul {
      padding-left: 1.875rem;
      font-size: 14px; }
    #breadcrumbs .breadcrumb-cta {
      padding-right: 1.25rem; }
      #breadcrumbs .breadcrumb-cta a {
        font-size: 1rem; } }

/* #region Styleguide Markup */
/* 
        Case Studies - Single Item Display (No Image) 

        Case Studies can be displayed in a grid of multiple items or in a single row item. This style
        covers the look and feel for the single case study.

        For how it works in PHP see template file: src/html/includes/elements/case_study_block_display.php 

        Markup:
            <div class="case-study-block bg-primary-base">
                <div class="case-study-grid">
                    <div class="col quote">
                        <blockquote>
                            <i class="fas fa-quote-left"></i>
                            This is the quote text here
                            <i class="fas fa-quote-right"></i>                            
                            <footer>
                                <cite>
                                    Joe Smith, My Company | BEng(Hons) Mechanical Engineering
                                </cite>
                            </footer>
                        </blockquote>
                        <a href="#" class="button-alt" aria-label="View Joe's full case study">
                            Joe's Full Case Study
                        </a>
                    </div>
                </div>
            </div>

        Styleguide Components.Case_Studies.SingleNoImage
    */
/* 
        Case Studies - Single Item Display

        Case Studies can be displayed in a grid of multiple items or in a single row item. This style
        covers the look and feel for the single case study.

        For how it works in PHP see template file: src/html/includes/elements/case_study_block_display.php 

        Markup:
            <div class="case-study-block bg-primary-base">
                <div class="case-study-grid">
                    <div class="col image">
                        <img src="https://placeimg.com/600/400/nature" />    
                    </div>
                    <div class="col quote">
                        <blockquote>
                            <i class="fas fa-quote-left"></i>
                            This is the quote text here
                            <i class="fas fa-quote-right"></i>                            
                            <footer>
                                <cite>
                                    Joe Smith, My Company | BEng(Hons) Mechanical Engineering
                                </cite>
                            </footer>
                        </blockquote>
                        <a href="#" class="button-alt" aria-label="View Joe's full case study">
                            Joe's Full Case Study
                        </a>
                    </div>
                </div>
            </div>

        Styleguide Components.Case_Studies.Single 
    */
/* 
        Case Studies - Multi Item Display

        Case Studies can be displayed in a grid of multiple items or in a single row item. This style
        covers the look and feel for the multiple case studies in a module

        For how it works in PHP see template file: src/html/mod_flexicontent/case-studies-multiple.php 

        Markup:
        <div class="cs-multi-wrap content-container">
            <div class="case-study-block bg-primary-base">
                <div class="case-study-grid">
                    <div class="col image">
                        <img src="https://placeimg.com/600/400/nature" />    
                    </div>
                    <div class="col quote">
                        <blockquote>
                            <i class="fas fa-quote-left"></i>
                            This is the quote text here
                            <i class="fas fa-quote-right"></i>                            
                            <footer>
                                <cite>
                                    Joe Smith, My Company | BEng(Hons) Mechanical Engineering
                                </cite>
                            </footer>
                        </blockquote>
                        <a href="#" class="button-alt" aria-label="View Joe's full case study">
                            Joe's Full Case Study
                        </a>
                    </div>
                </div>
            </div>
            <div class="case-study-block bg-primary-base">
                <div class="case-study-grid">
                    <div class="col quote">
                        <blockquote>
                            <i class="fas fa-quote-left"></i>
                            This is the quote text here
                            <i class="fas fa-quote-right"></i>                            
                            <footer>
                                <cite>
                                    Joe Smith, My Company | BEng(Hons) Mechanical Engineering
                                </cite>
                            </footer>
                        </blockquote>
                        <a href="#" class="button-alt" aria-label="View Joe's full case study">
                            Joe's Full Case Study
                        </a>
                    </div>
                </div>
            </div>
            <div class="case-study-block bg-primary-base">
                <div class="case-study-grid">
                    <div class="col image">
                        <img src="https://placeimg.com/600/400/nature" />    
                    </div>
                    <div class="col quote">
                        <blockquote>
                            <i class="fas fa-quote-left"></i>
                            This is the quote text here
                            <i class="fas fa-quote-right"></i>                            
                            <footer>
                                <cite>
                                    Joe Smith, My Company | BEng(Hons) Mechanical Engineering
                                </cite>
                            </footer>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>

        Styleguide Components.Case_Studies.Multi 
    */
/* #endregion Styleguide */
/* #region : Case Study Styles */
.cs-multi-wrap {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  justify-content: center; }
  @media only screen and (min-width: 36rem) {
    .cs-multi-wrap {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    .cs-multi-wrap {
      padding-left: 10%;
      padding-right: 10%; } }
  @media only screen and (min-width: 100rem) {
    .cs-multi-wrap {
      padding-left: 20%;
      padding-right: 20%; } }
  .cs-multi-wrap::after {
    display: none; }
  .cs-multi-wrap .case-study-block {
    padding: 0;
    flex: 1;
    margin-bottom: 2.5rem;
    max-width: 400px; }
    .cs-multi-wrap .case-study-block .case-study-grid {
      display: flex;
      flex-direction: column; }
      .cs-multi-wrap .case-study-block .case-study-grid .quote {
        padding: 1.25rem;
        display: flex;
        flex-direction: column; }
        .cs-multi-wrap .case-study-block .case-study-grid .quote a {
          width: 100%;
          box-sizing: border-box;
          margin-top: auto; }
  @media only screen and (min-width: 48rem) {
    .cs-multi-wrap {
      flex-direction: row;
      margin-bottom: 0; }
      .cs-multi-wrap .case-study-block {
        margin-right: 0; } }

.case-study-block .panel-image, .case-study-block .image {
  height: 100%; }

.case-study-block a {
  color: inherit;
  text-decoration: underline; }
  .case-study-block a:hover, .case-study-block a:focus {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000000; }

.case-study-block .quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 1.25rem; }
  .case-study-block .quote blockquote {
    margin: 0; }
    .case-study-block .quote blockquote footer {
      margin: 0;
      padding: 0;
      margin-top: 1.25rem;
      margin-bottom: 1.25rem; }
      .case-study-block .quote blockquote footer cite {
        font-style: normal; }
  .case-study-block .quote a {
    display: inline-block; }

@media only screen and (min-width: 36rem) {
  .case-study-block {
    padding-left: 5%;
    padding-right: 5%; }
    .case-study-block .quote {
      padding-right: 0; }
    .case-study-block .case-study-grid {
      display: flex;
      flex-direction: row; }
    .case-study-block .col:first-child {
      flex: 1.5; }
    .case-study-block .col {
      flex: 2; }
    .case-study-block .quote {
      padding: 2.5rem;
      padding-right: 0; } }

@media only screen and (min-width: 100rem) {
  .case-study-block {
    padding-left: 10%;
    padding-right: 10%; }
    .case-study-block.cs-all .case-study-grid, .case-study-block.cs-text-image .case-study-grid {
      height: 500px; } }

/* #endregion : Case Study Styles */
/* #region Styleguide Markup */
/* 
        Featured Items List 
        
        This block element is displayed via a Flexicontent module and is used to show a set of 
        key links that they want to direct users to. 
        
        For the PHP code see template file: /src/html/mod_flexicontent/featured-homepage-items.php 

        Markup: 
            <div class="homepage-featured-items-list bg-secondary-lighter">
                <div class="flex-grid grid-3">
                    <div class="grid-item">
                        <a href="#">
                            <div class="grid-image">
                                <picture>
                                    <img src="https://placeimg.com/400/300/nature" />
                                </picture>
                            </div>
                            <p class="h3">Link Title Here</p>
                        </a>   
                    </div>
                    <div class="grid-item">
                        <a href="#">
                            <div class="grid-image">
                                <picture>
                                    <img src="https://placeimg.com/400/300/nature" />
                                </picture>
                            </div>
                            <p class="h3">Link Title Here</p>
                        </a>   
                    </div>
                    <div class="grid-item">
                        <a href="#">
                            <div class="grid-image">
                                <picture>
                                    <img src="https://placeimg.com/400/300/nature" />
                                </picture>
                            </div>
                            <p class="h3">Link Title Here</p>
                        </a>   
                    </div>
                </div>
            </div>

        Styleguide Components.Content_Grid.Display
    */
/* #endregion Styleguide Markup */
.homepage-featured-items-list {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background-color: #BAE0F5;
  padding-left: 1.25rem;
  padding-right: 1.25rem; }
  .homepage-featured-items-list .grid-item a {
    color: #712177;
    text-transform: uppercase;
    text-align: center; }
  .homepage-featured-items-list .grid-item .h3 {
    font-size: 1.2rem;
    margin-bottom: 0; }
  @media only screen and (min-width: 36rem) {
    .homepage-featured-items-list {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 48rem) {
    .homepage-featured-items-list .grid-item:first-child picture {
      width: 100%;
      height: 100%;
      display: block;
      position: relative; }
      .homepage-featured-items-list .grid-item:first-child picture::before {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2  !important;
        content: "";
        top: -1px;
        left: -1px;
        background: linear-gradient(135deg, #BAE0F5 10%, transparent 10%); }
    .homepage-featured-items-list .grid-item:last-child picture {
      width: 100%;
      height: 100%;
      display: block;
      position: relative; }
      .homepage-featured-items-list .grid-item:last-child picture::before {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2  !important;
        content: "";
        top: 0px;
        left: 0px;
        background: linear-gradient(135deg, transparent 90%, #BAE0F5 90%); } }
  @media only screen and (min-width: 64rem) {
    .homepage-featured-items-list {
      padding-left: 10%;
      padding-right: 10%; } }
  @media only screen and (min-width: 100rem) {
    .homepage-featured-items-list .grid-item .h3 {
      font-size: 1.4rem; } }

/* #region Styleguide Markup */
/* 
        Cookie Notice
        
        Displays the cookie acceptance message, along with allowing the user to customise their preferences.
        
        Markup: 
        <div id="cc-modal" style="position: relative !important;">
            <div class="cc-modal-inner">
                <div id="cc-modal-header">
                    <p class="cc-title"><b>Cookie Consent</b></p>
                </div>
                <div id="cc-consent">
                    <p>Consent message here</p>
                    <button role="button" id="cc-accept-btn" class="btn-green" onclick="manageCookies(this.id)">Accept Recommended Settings <i class="fa fa-check"></i></button>
                    <button role="button" id="cc-settings-btn" class="btn-grey" onclick="manageCookies(this.id)">Manage Preferences <i class="fa fa-cogs"></i></button>   
                </div>
                <div id="cc-settings" class="hidden">
                    <div class="cc-info-text">
                        <p><b>Strictly Necessary Cookies</b></p>
                        <p>Detailed cookie info</p>
                    </div>
                    <div class="cc-info-text">
                        <p><b>Performance &amp; Marketing Cookies</b></p>
                        <p>Marketing cookie info</p>
                        <div class="cc-opt-switch">
                            <label class="switch">
                                <input id="optional-cookies" type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>            
                    <button role="button" id="cc-save-btn" class="btn-purple" onclick="manageCookies(this.id)">Save Preferences <i class="fa fa-save"></i></button>
                    <button role="button" id="cc-back-btn" class="btn-grey" onclick="manageCookies(this.id)">Go Back</button>
                </div>
            </div>
        </div>
        
        Styleguide Components.Cookie.Display
    */
/* #endregion Styleguide Markup */
#cc-modal {
  background-color: #ffffff;
  border-top: 5px solid #712177;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 10px #000;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 999999;
  font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }
  #cc-modal .cc-modal-inner {
    margin: 0 auto;
    padding: 1.25rem;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box; }
    @media only screen and (min-width: 36rem) {
      #cc-modal .cc-modal-inner {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #cc-modal .cc-modal-inner {
        padding-left: 10%;
        padding-right: 10%; } }
    #cc-modal .cc-modal-inner a {
      color: #007abf; }
      #cc-modal .cc-modal-inner a:hover, #cc-modal .cc-modal-inner a:focus {
        color: #000000;
        background-color: #d0eaf8; }
    #cc-modal .cc-modal-inner p, #cc-modal .cc-modal-inner a {
      font-size: 14px;
      margin: 0;
      line-height: 1.5; }
    #cc-modal .cc-modal-inner #cc-modal-header {
      margin: 0 auto; }
      #cc-modal .cc-modal-inner #cc-modal-header .cc-title {
        font-size: 16px;
        margin-bottom: 0.625rem;
        margin-top: 0.625rem;
        font-family: "ZonaPro-Bold", helvetica, arial, sans-serif; }
    #cc-modal .cc-modal-inner #cc-settings {
      max-height: 70vh; }
      #cc-modal .cc-modal-inner #cc-settings .cc-info-text {
        margin-bottom: 0.625rem; }
        #cc-modal .cc-modal-inner #cc-settings .cc-info-text .cc-opt-switch {
          margin-top: 0.625rem; }
      @media only screen and (min-width: 36rem) {
        #cc-modal .cc-modal-inner #cc-settings {
          max-height: auto; }
          #cc-modal .cc-modal-inner #cc-settings .cc-info-text {
            border: 1px solid #000000;
            padding: 1.25rem;
            margin-bottom: 1.25rem; }
            #cc-modal .cc-modal-inner #cc-settings .cc-info-text .cc-opt-switch {
              margin-top: 1.25rem; } }
    #cc-modal .cc-modal-inner button {
      background: linear-gradient(135deg, #ccc 90%, transparent 90%);
      padding: 0.625rem;
      padding-right: 10%;
      width: 100%;
      box-sizing: border-box;
      text-align: left;
      font-size: 14px;
      margin-bottom: 0.625rem;
      border-style: none;
      display: inline-block;
      cursor: pointer;
      text-transform: uppercase;
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif; }
      #cc-modal .cc-modal-inner button i {
        margin-left: 0.625rem; }
      @media only screen and (min-width: 36rem) {
        #cc-modal .cc-modal-inner button {
          width: auto; } }
      #cc-modal .cc-modal-inner button:hover, #cc-modal .cc-modal-inner button:focus {
        background: linear-gradient(135deg, #4d4d4d 90%, transparent 90%);
        color: #ffffff; }
    #cc-modal .cc-modal-inner button#cc-accept-btn {
      background: linear-gradient(135deg, #71c200 90%, transparent 90%);
      color: #000000; }
      #cc-modal .cc-modal-inner button#cc-accept-btn:hover, #cc-modal .cc-modal-inner button#cc-accept-btn:focus {
        background: linear-gradient(135deg, #365c00 90%, transparent 90%);
        color: #ffffff; }
    #cc-modal .cc-modal-inner button#cc-save-btn {
      background: linear-gradient(135deg, #712177 90%, transparent 90%);
      color: white; }
      #cc-modal .cc-modal-inner button#cc-save-btn:hover, #cc-modal .cc-modal-inner button#cc-save-btn:focus {
        background: linear-gradient(135deg, #C4A1C9 90%, transparent 90%);
        color: #000000; }

.content .btn-primary, .content .button a, .content a.button {
  font-size: 1.2rem !important;
  max-width: 100%;
  padding-right: 20%;
  margin-bottom: 1.25rem; }

/* #region Styleguide Markup */
/* 
        Buttons & CTAs - Primary Style
        
        The primary button style used across almost all CTA buttons on the site. .btn-primary should be used
        going forward, the .button a and a.button classes are deprecated and are just here for keeping the
        old styles from the WYSI editor working.

        You can hover over the buttons to view the hover effect
        
        Markup: 
            <a class="btn-primary {{modifier_class}}">Link Text</a>
                    
        Styleguide Components.Buttons.Primary
    */
/* #endregion Styleguide Markup */
.btn-primary, .button a, a.button {
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1.25;
  padding: 0.625rem;
  padding-right: 20%;
  text-transform: uppercase;
  transition: background 0.2s ease-in-out;
  max-width: 100%;
  background: linear-gradient(135deg, #712177 80%, transparent 20%);
  color: white !important;
  text-decoration: none; }
  @media screen and (min-width: 36rem) {
    .btn-primary, .button a, a.button {
      font-size: 1.375rem;
      line-height: 1.25; } }
  @media screen and (min-width: 64rem) {
    .btn-primary, .button a, a.button {
      font-size: 1.5rem;
      line-height: 1.25; } }
  @media screen and (min-width: 125rem) {
    .btn-primary, .button a, a.button {
      font-size: 1.75rem;
      line-height: 1.25; } }
  .btn-primary::before, .button a::before, a.button::before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f061";
    margin-right: 0.625rem;
    font-weight: 900; }
  .btn-primary:hover, .btn-primary:focus, .button a:hover, .button a:focus, a.button:hover, a.button:focus {
    text-decoration: none;
    transition: background 0.2s ease-in-out; }
  @media only screen and (min-width: 36rem) {
    .btn-primary, .button a, a.button {
      max-width: none; } }
  .btn-primary::before, .button a::before, a.button::before {
    color: #57d4fa; }
  .btn-primary:hover, .btn-primary:focus, .button a:hover, .button a:focus, a.button:hover, a.button:focus {
    background: linear-gradient(135deg, #C4A1C9 80%, transparent 20%);
    color: black !important; }
    .btn-primary:hover::before, .btn-primary:focus::before, .button a:hover::before, .button a:focus::before, a.button:hover::before, a.button:focus::before {
      color: #007abf; }

.responsive-tabs-container .button a, .responsive-tabs-container a.button, .responsive-tabs-container .btn-primary {
  background: linear-gradient(135deg, #BAE0F5 80%, transparent 20%);
  color: black !important;
  font-size: 18px !important; }
  .responsive-tabs-container .button a::before, .responsive-tabs-container a.button::before, .responsive-tabs-container .btn-primary::before {
    color: #009FEE; }
  .responsive-tabs-container .button a:hover, .responsive-tabs-container .button a:focus, .responsive-tabs-container a.button:hover, .responsive-tabs-container a.button:focus, .responsive-tabs-container .btn-primary:hover, .responsive-tabs-container .btn-primary:focus {
    background: linear-gradient(135deg, #007abf 80%, transparent 20%);
    color: white !important; }
    .responsive-tabs-container .button a:hover::before, .responsive-tabs-container .button a:focus::before, .responsive-tabs-container a.button:hover::before, .responsive-tabs-container a.button:focus::before, .responsive-tabs-container .btn-primary:hover::before, .responsive-tabs-container .btn-primary:focus::before {
      color: #ffffff; }

.btn-secondary, .button-alt a, a.button-alt {
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1.25;
  padding: 0.625rem;
  padding-right: 20%;
  text-transform: uppercase;
  transition: background 0.2s ease-in-out;
  max-width: 100%;
  background: linear-gradient(135deg, #007abf 80%, transparent 20%);
  color: white !important;
  text-decoration: none;
  display: flex;
  align-items: center; }
  @media screen and (min-width: 36rem) {
    .btn-secondary, .button-alt a, a.button-alt {
      font-size: 1.375rem;
      line-height: 1.25; } }
  @media screen and (min-width: 64rem) {
    .btn-secondary, .button-alt a, a.button-alt {
      font-size: 1.5rem;
      line-height: 1.25; } }
  @media screen and (min-width: 125rem) {
    .btn-secondary, .button-alt a, a.button-alt {
      font-size: 1.75rem;
      line-height: 1.25; } }
  .btn-secondary::before, .button-alt a::before, a.button-alt::before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f061";
    margin-right: 0.625rem;
    font-weight: 900; }
  .btn-secondary:hover, .btn-secondary:focus, .button-alt a:hover, .button-alt a:focus, a.button-alt:hover, a.button-alt:focus {
    text-decoration: none;
    transition: background 0.2s ease-in-out; }
  @media only screen and (min-width: 36rem) {
    .btn-secondary, .button-alt a, a.button-alt {
      max-width: none; } }
  .btn-secondary::before, .button-alt a::before, a.button-alt::before {
    color: #B077B8; }
  .btn-secondary.long-text, .button-alt a.long-text, a.button-alt.long-text {
    padding-left: 2.5rem;
    padding-right: 20%;
    box-sizing: border-box; }
    .btn-secondary.long-text::before, .button-alt a.long-text::before, a.button-alt.long-text::before {
      margin-left: -1.875rem; }
  .btn-secondary:hover, .btn-secondary:focus, .button-alt a:hover, .button-alt a:focus, a.button-alt:hover, a.button-alt:focus {
    background: linear-gradient(135deg, #BAE0F5 80%, transparent 20%);
    color: black !important; }

.more-link {
  background: #BAE0F5 !important;
  color: black !important;
  font-size: 1.25rem;
  line-height: 1.25;
  padding: 0.3125rem 0.625rem;
  text-transform: uppercase;
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
  text-decoration: none !important; }
  @media screen and (min-width: 36rem) {
    .more-link {
      font-size: 1.375rem;
      line-height: 1.25; } }
  @media screen and (min-width: 64rem) {
    .more-link {
      font-size: 1.5rem;
      line-height: 1.25; } }
  @media screen and (min-width: 125rem) {
    .more-link {
      font-size: 1.75rem;
      line-height: 1.25; } }
  .more-link i {
    color: #009FEE !important;
    margin-right: 0.625rem; }
  .more-link:hover, .more-link:active, .more-link:focus {
    text-decoration: none;
    background: #007abf !important;
    color: white !important; }
    .more-link:hover i, .more-link:active i, .more-link:focus i {
      color: white !important; }

.more-link-alt {
  background: #ffaede;
  color: black !important;
  font-size: 1.25rem;
  line-height: 1.25;
  padding: 0.3125rem 0.625rem;
  text-transform: uppercase;
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif; }
  @media screen and (min-width: 36rem) {
    .more-link-alt {
      font-size: 1.375rem;
      line-height: 1.25; } }
  @media screen and (min-width: 64rem) {
    .more-link-alt {
      font-size: 1.5rem;
      line-height: 1.25; } }
  @media screen and (min-width: 125rem) {
    .more-link-alt {
      font-size: 1.75rem;
      line-height: 1.25; } }
  .more-link-alt i {
    color: #e10086;
    margin-right: 0.625rem; }
  .more-link-alt:hover, .more-link-alt:active, .more-link-alt:focus {
    text-decoration: none;
    background: #e10086;
    color: white !important; }
    .more-link-alt:hover i, .more-link-alt:active i, .more-link-alt:focus i {
      color: white !important; }

[class^='text-cta'] {
  text-transform: uppercase;
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
  color: #712177; }
  [class^='text-cta']::before {
    content: "\f061";
    font-weight: 600;
    font-family: "Font Awesome 5 Free";
    margin-right: 10px; }
  [class^='text-cta']:hover, [class^='text-cta']:focus {
    text-decoration: none;
    color: #007abf; }

.read-more-button-alt a, .read-more-button a, a.read-more-button, .external-link, a.read-more-button-alt, .read-more-alternative-button a, .case-study-page .cs-course-link a a, a.read-more-alternative-button, .case-study-page .cs-course-link a {
  text-transform: uppercase;
  margin-bottom: 0.3125rem;
  margin-top: 0.3125rem;
  display: inline-block;
  font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
  color: #007abf;
  padding: 0.3125rem;
  text-decoration: none !important;
  padding-right: 0.625rem; }
  .read-more-button-alt a::before, .read-more-button a::before, a.read-more-button::before, .external-link::before, a.read-more-button-alt::before, .read-more-alternative-button a::before, .case-study-page .cs-course-link a a::before, a.read-more-alternative-button::before, .case-study-page .cs-course-link a::before {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    font-size: 20px;
    color: #712177; }
  .read-more-button-alt a:hover, .read-more-button-alt a:focus, .read-more-button a:hover, .read-more-button a:focus, a.read-more-button:hover, .external-link:hover, a.read-more-button:focus, .external-link:focus, a.read-more-button-alt:hover, a.read-more-button-alt:focus, .read-more-alternative-button a:hover, .case-study-page .cs-course-link a a:hover, .read-more-alternative-button a:focus, .case-study-page .cs-course-link a a:focus, a.read-more-alternative-button:hover, .case-study-page .cs-course-link a:hover, a.read-more-alternative-button:focus, .case-study-page .cs-course-link a:focus {
    background-color: #d7badb; }
    .read-more-button-alt a:hover::before, .read-more-button-alt a:focus::before, .read-more-button a:hover::before, .read-more-button a:focus::before, a.read-more-button:hover::before, .external-link:hover::before, a.read-more-button:focus::before, .external-link:focus::before, a.read-more-button-alt:hover::before, a.read-more-button-alt:focus::before, .read-more-alternative-button a:hover::before, .case-study-page .cs-course-link a a:hover::before, .read-more-alternative-button a:focus::before, .case-study-page .cs-course-link a a:focus::before, a.read-more-alternative-button:hover::before, .case-study-page .cs-course-link a:hover::before, a.read-more-alternative-button:focus::before, .case-study-page .cs-course-link a:focus::before {
      color: #007abf; }

.external-link {
  text-decoration: none !important;
  padding-left: 0; }
  .external-link::before {
    content: "";
    margin: 0;
    padding: 0; }
  .external-link::after {
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 0.625rem;
    font-size: 16px;
    color: #712177; }
  .external-link:hover, .external-link:focus {
    text-decoration: underline !important;
    background-color: transparent !important;
    color: #712177 !important; }
    .external-link:hover::after, .external-link:focus::after {
      color: #009FEE !important; }

/* #region Styleguide Markup */
/* 
        Social Links Page Button Style
        
        This button style is used on the bio links page for the social media url
        
        Markup:
            <a class="bio-link-btn" href="#">Link Text</a>
        
        Styleguide Components.Buttons.BioLink
    */
/* #endregion Styleguide Markup */
.bio-link-btn {
  background: linear-gradient(135deg, transparent 70%, rgba(255, 255, 255, 0.1) 70%);
  padding: 0.625rem 1.25rem;
  color: #ffffff;
  display: inline-block;
  margin-bottom: 0.625rem;
  font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
  transition: all 0.2s ease-in-out; }
  .bio-link-btn::before {
    content: "\f061";
    font-weight: 600;
    font-family: "Font Awesome 5 Free";
    margin-right: 10px; }
  .bio-link-btn:hover, .bio-link-btn:focus {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.2) 70%);
    color: #000000 !important;
    text-decoration: none; }

.download-file-container .download-file-information {
  font-family: "ZonaPro-Regular", helvetica, arial, sans-serif;
  width: 100%; }
  .download-file-container .download-file-information a.df-link {
    color: #000000 !important;
    text-decoration: none; }
    .download-file-container .download-file-information a.df-link:hover, .download-file-container .download-file-information a.df-link:focus {
      text-decoration: none;
      background-color: inherit !important; }
      .download-file-container .download-file-information a.df-link:hover [class^='more-link'], .download-file-container .download-file-information a.df-link:hover .file-link, .download-file-container .download-file-information a.df-link:focus [class^='more-link'], .download-file-container .download-file-information a.df-link:focus .file-link {
        background-color: #e10086;
        color: white !important; }
    .download-file-container .download-file-information a.df-link .file-name-data {
      padding: 0.625rem 1.25rem;
      margin-bottom: 2.5rem; }
      .download-file-container .download-file-information a.df-link .file-name-data h4 {
        margin: 0;
        color: #000000; }
    .download-file-container .download-file-information a.df-link [class^='more-link'], .download-file-container .download-file-information a.df-link .file-link {
      padding: 0.625rem 1.25rem;
      margin-top: auto; }
      .download-file-container .download-file-information a.df-link [class^='more-link'] .download-file-icon, .download-file-container .download-file-information a.df-link .file-link .download-file-icon {
        margin-left: 0.625rem; }

.dropfiles-file {
  width: 100%; }
  @media only screen and (min-width: 36rem) {
    .dropfiles-file {
      width: 32%; } }

.csRow .csColumn .dropfiles-file {
  width: 100%; }
  .csRow .csColumn .dropfiles-file .download-file-container {
    margin-right: 0.625rem !important;
    margin-bottom: 0.625rem; }

#gateway-menus {
  margin-bottom: 1.25rem; }

#gateway-nav-toggle {
  padding: 0.625rem 1.25rem; }
  #gateway-nav-toggle .fa-angle-down {
    display: inline-block; }
  #gateway-nav-toggle .fa-angle-up {
    display: none; }
  #gateway-nav-toggle.open .fa-angle-down {
    display: none; }
  #gateway-nav-toggle.open .fa-angle-up {
    display: inline-block; }

#gateway-primary-nav, #gateway-secondary-nav {
  margin: 0;
  padding: 1.25rem;
  display: none;
  z-index: 99; }
  #gateway-primary-nav ul, #gateway-secondary-nav ul {
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
    padding: 0;
    margin: 0; }
    #gateway-primary-nav ul li, #gateway-secondary-nav ul li {
      list-style: none; }

#gateway-primary-nav {
  padding-top: 0; }

/* Study Gateway Page - Secondary Nav BG Should Be White */
#study-content #gateway-menus {
  margin-bottom: 0; }

@media only screen and (min-width: 48rem) {
  #study-content #gateway-secondary-nav {
    background-color: #ffffff !important; }
    #study-content #gateway-secondary-nav a {
      color: #000000 !important;
      background-color: transparent; } }

@media only screen and (min-width: 64rem) {
  #gateway-menus {
    margin-bottom: 2.5rem; }
    #gateway-menus.fixed-style #gateway-primary-nav ul li a, #gateway-menus.fixed-style #gateway-secondary-nav ul li a {
      padding: 0.625rem 1.25rem;
      transition: padding 0.2s ease-in-out; }
    #gateway-menus #gateway-primary-nav, #gateway-menus #gateway-secondary-nav {
      display: block;
      padding: 0; }
      #gateway-menus #gateway-primary-nav ul, #gateway-menus #gateway-secondary-nav ul {
        margin: 0 auto;
        text-align: center; }
        #gateway-menus #gateway-primary-nav ul li, #gateway-menus #gateway-secondary-nav ul li {
          text-align: center;
          display: inline-block; }
          #gateway-menus #gateway-primary-nav ul li a, #gateway-menus #gateway-secondary-nav ul li a {
            display: block;
            padding: 1.25rem; }
            #gateway-menus #gateway-primary-nav ul li a:hover, #gateway-menus #gateway-primary-nav ul li a:focus, #gateway-menus #gateway-secondary-nav ul li a:hover, #gateway-menus #gateway-secondary-nav ul li a:focus {
              text-decoration: none; }
            #gateway-menus #gateway-primary-nav ul li a::after, #gateway-menus #gateway-secondary-nav ul li a::after {
              content: "";
              display: block;
              width: 0;
              height: 2px;
              background: #ffffff;
              transition: width 0.3s; }
            #gateway-menus #gateway-primary-nav ul li a:hover::after, #gateway-menus #gateway-primary-nav ul li a:focus::after, #gateway-menus #gateway-secondary-nav ul li a:hover::after, #gateway-menus #gateway-secondary-nav ul li a:focus::after {
              width: 100%; }
    #gateway-menus #gateway-secondary-nav ul li a::after {
      background: #000000; } }

#get-in-touch-wrap {
  padding-left: 20px;
  padding-right: 20px;
  /* #region : Tablet up */
  /* #endregion : Tablet up */ }
  @media only screen and (min-width: 36rem) {
    #get-in-touch-wrap {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    #get-in-touch-wrap {
      padding-left: 10%;
      padding-right: 10%; } }
  #get-in-touch-wrap .get-in-touch-block, #get-in-touch-wrap .course-skills-block {
    margin-top: 1.25rem;
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }
    #get-in-touch-wrap .get-in-touch-block ul, #get-in-touch-wrap .course-skills-block ul {
      padding-left: 1.25rem; }
    #get-in-touch-wrap .get-in-touch-block .snippet-text, #get-in-touch-wrap .course-skills-block .snippet-text {
      padding: 1.25rem; }
      #get-in-touch-wrap .get-in-touch-block .snippet-text p:first-child, #get-in-touch-wrap .course-skills-block .snippet-text p:first-child {
        margin-top: 0; }
      #get-in-touch-wrap .get-in-touch-block .snippet-text h1, #get-in-touch-wrap .get-in-touch-block .snippet-text h2, #get-in-touch-wrap .get-in-touch-block .snippet-text h3, #get-in-touch-wrap .get-in-touch-block .snippet-text h4, #get-in-touch-wrap .get-in-touch-block .snippet-text h5, #get-in-touch-wrap .get-in-touch-block .snippet-text h6, #get-in-touch-wrap .course-skills-block .snippet-text h1, #get-in-touch-wrap .course-skills-block .snippet-text h2, #get-in-touch-wrap .course-skills-block .snippet-text h3, #get-in-touch-wrap .course-skills-block .snippet-text h4, #get-in-touch-wrap .course-skills-block .snippet-text h5, #get-in-touch-wrap .course-skills-block .snippet-text h6 {
        margin: 0;
        font-size: 18px; }
  #get-in-touch-wrap .course-skills-block ul {
    margin-left: 1.25rem; }
  #get-in-touch-wrap .get-in-touch-block li {
    list-style: none;
    color: #ba006f; }
    #get-in-touch-wrap .get-in-touch-block li::before {
      content: "\f45c";
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      color: inherit;
      margin-right: 0.625rem; }
    #get-in-touch-wrap .get-in-touch-block li a {
      color: inherit;
      text-decoration: underline; }
      #get-in-touch-wrap .get-in-touch-block li a:hover, #get-in-touch-wrap .get-in-touch-block li a:focus {
        color: #000000;
        background-color: #d0eaf8; }
  #get-in-touch-wrap .get-in-touch-block .more-link-alt {
    display: block;
    font-size: 20px !important;
    padding-left: 1.25rem; }
  @media only screen and (min-width: 36rem) {
    #get-in-touch-wrap .col {
      max-width: 48%;
      min-width: 48%;
      margin-right: 2%; } }

iframe.content-container {
  margin-top: 1.25rem; }
  @media only screen and (min-width: 36rem) {
    iframe.content-container {
      max-width: 90%;
      margin-left: 5%;
      margin-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    iframe.content-container {
      max-width: 80%;
      margin-left: 10%;
      margin-right: 10%;
      margin-top: 2.5rem; } }
  @media only screen and (min-width: 100rem) {
    iframe.content-container {
      max-width: 60%;
      margin-left: 20%;
      margin-right: 20%; } }

#system-message {
  padding-bottom: 0.3125rem; }
  #system-message .alert {
    padding: 1.25rem 10%;
    border: 5px solid #fff;
    border-left: none;
    border-right: none; }
    #system-message .alert.alert-message {
      background-color: #e3ffe7;
      border-color: #b9ffc3; }
    #system-message .alert.alert-warning {
      background-color: #fff7d4;
      border-color: #ffed9c; }
    #system-message .alert.alert-error {
      background-color: #ffdddd;
      border-color: #ffb9b9; }
    #system-message .alert.alert-notice {
      background-color: #d7e3ff;
      border-color: #aec6ff; }
    #system-message .alert .alert-heading {
      margin: 0;
      margin-bottom: 1.25rem; }
    #system-message .alert a.close {
      float: right;
      font-size: 20px; }

.pagination {
  margin-top: 1.25rem;
  text-align: center; }
  .pagination ul {
    padding: 0; }
    .pagination ul li {
      display: inline-block;
      list-style: none;
      text-transform: uppercase;
      margin: 0.625rem 0; }
      .pagination ul li.pagination-start, .pagination ul li.pagination-end {
        display: none; }
      .pagination ul li a {
        background-color: #57d4fa;
        padding: 0.3125rem 0.625rem;
        display: block;
        color: #000000; }
        .pagination ul li a:hover, .pagination ul li a:focus {
          background-color: #007abf;
          color: #ffffff;
          text-decoration: none; }
      .pagination ul li span {
        background-color: #BAE0F5;
        padding: 0.3125rem 0.625rem;
        display: block; }

/* Module on Gateway page */
#close-results {
  display: none; }

.search-module {
  padding: 0.625rem 0; }
  .search-module h3 {
    margin: 0.625rem 0;
    padding: 0; }
  @media only screen and (min-width: 64rem) {
    .search-module #search-all-btn {
      min-width: 320px; } }
  .search-module #addsearch-form.module,
  .search-module .container.content {
    padding-left: 20px;
    padding-right: 20px; }
    @media only screen and (min-width: 36rem) {
      .search-module #addsearch-form.module,
      .search-module .container.content {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      .search-module #addsearch-form.module,
      .search-module .container.content {
        padding-left: 10%;
        padding-right: 10%; } }

/* #region FlexiContent Search Styles */
.fcfilter_form_outer {
  padding: 0 1.25rem;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    .fcfilter_form_outer {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    .fcfilter_form_outer {
      padding-left: 10%;
      padding-right: 10%; } }
  .fcfilter_form_outer .fc_filter_set .flex-wrap {
    display: block; }
    .fcfilter_form_outer .fc_filter_set .flex-wrap .fc_filter_line {
      display: block; }
  .fcfilter_form_outer .fc_filter_line {
    margin: 0;
    padding: 0;
    width: 100%; }
  .fcfilter_form_outer .fc_text_filter {
    margin-left: 0 !important; }
  .fcfilter_form_outer .rgu_text_search {
    width: 100%; }
    @media only screen and (min-width: 64rem) {
      .fcfilter_form_outer .rgu_text_search {
        display: flex; }
        .fcfilter_form_outer .rgu_text_search .search-btn {
          min-width: 320px; }
        .fcfilter_form_outer .rgu_text_search .search-box {
          padding-right: 1.25rem; } }
  .fcfilter_form_outer .rgu_search_box {
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
    font-size: 1.25rem !important;
    padding: 0.625rem 1.25rem !important;
    padding-left: 2.5rem !important;
    background: none !important;
    border: none;
    border-bottom: 5px solid #712177;
    color: #712177 !important;
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 0 !important; }
    .fcfilter_form_outer .rgu_search_box::placeholder {
      /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: #712177;
      opacity: 1;
      /* Firefox */ }
    .fcfilter_form_outer .rgu_search_box:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #712177; }
    .fcfilter_form_outer .rgu_search_box::-ms-input-placeholder {
      /* Microsoft Edge */
      color: #712177; }
  .fcfilter_form_outer .search-box {
    width: 100%;
    margin-bottom: 0.625rem; }
  .fcfilter_form_outer .search_button {
    position: absolute;
    left: 0.4rem;
    top: 0.6rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #712177; }
  .fcfilter_form_outer #search-all-btn {
    font-size: 1.25rem;
    display: block;
    background: linear-gradient(135deg, #712177 90%, transparent 90%);
    color: white;
    max-width: 400px;
    padding: 0.3125rem 0.625rem;
    box-sizing: border-box; }
  @media only screen and (min-width: 48rem) {
    .fcfilter_form_outer .fc_filter_set .flex-wrap {
      display: flex; }
      .fcfilter_form_outer .fc_filter_set .flex-wrap .fc_filter_line {
        flex: 1; } }

.ui-autocomplete {
  padding: 1.25rem;
  background-color: #ffffff;
  font-size: 16px;
  border: 1px solid #000000;
  border-radius: 0px; }
  .ui-autocomplete .ui-menu-item {
    color: #000000;
    padding-left: 0.625rem;
    list-style: none; }
    .ui-autocomplete .ui-menu-item div {
      color: #000000 !important;
      border: none !important;
      cursor: pointer;
      padding: 0.3125rem 0; }
    .ui-autocomplete .ui-menu-item:hover, .ui-autocomplete .ui-menu-item:focus {
      background-color: #BAE0F5; }

.ui-widget-content {
  background: none;
  background-color: #ffffff;
  max-width: 1200px !important;
  box-sizing: border-box !important;
  padding-left: 1.25rem; }

/* #endregion */
/* #region - Main site search page */
#search-results.search-results-wrap .addsearch-result-item-sub h2 {
  font-family: "ZonaPro-Regular", helvetica, arial, sans-serif; }
  #search-results.search-results-wrap .addsearch-result-item-sub h2 a {
    color: #000000; }

#search-results.search-results-wrap .search-box-wrap {
  padding: 0.625rem 0; }
  #search-results.search-results-wrap .search-box-wrap form {
    position: relative; }

#search-results.search-results-wrap .search-box {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #000000;
  width: 100%;
  color: #000000;
  font-size: 1.25rem;
  padding: 0.625rem 1.25rem;
  box-sizing: border-box; }
  #search-results.search-results-wrap .search-box::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000000;
    opacity: 1; }
  #search-results.search-results-wrap .search-box::-moz-placeholder {
    /* Firefox 19+ */
    color: #000000;
    opacity: 1; }
  #search-results.search-results-wrap .search-box:-ms-input-placeholder {
    /* IE 10+ */
    color: #000000;
    opacity: 1; }
  #search-results.search-results-wrap .search-box:-moz-placeholder {
    /* Firefox 18- */
    color: #000000;
    opacity: 1; }

#search-results.search-results-wrap button.search-button {
  position: absolute;
  right: 0.625rem;
  top: 0.3125rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer; }

#search-results.search-results-wrap .rgyou-search {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 1.25rem; }
  @media only screen and (min-width: 36rem) {
    #search-results.search-results-wrap .rgyou-search {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    #search-results.search-results-wrap .rgyou-search {
      padding-left: 10%;
      padding-right: 10%; } }
  #search-results.search-results-wrap .rgyou-search .bg-wrap {
    padding: 1.25rem; }

/* #endregion */
body {
  padding-top: 50px; }
  @media only screen and (min-width: 64rem) {
    body {
      padding-top: 100px; } }

#site-header {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  transition: top 0.2s ease-in-out;
  z-index: 999; }
  #site-header.nav-up {
    top: -50px; }
  #site-header.nav-down {
    position: fixed;
    top: 0;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
    border-bottom: 3px solid white; }

@media only screen and (min-width: 64rem) {
  #site-header {
    height: 100px; }
    #site-header.nav-up {
      top: -100px;
      transition: top 0.2s ease-in-out; } }

.sticky-block.fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
  z-index: 999;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
  border-bottom: 3px solid white; }

.sticky-block.fixed.margin {
  top: calc(50px - 3px); }
  @media only screen and (min-width: 64rem) {
    .sticky-block.fixed.margin {
      top: calc(100px - 3px); } }

.content table {
  border: 1px solid black;
  width: 100%;
  border-collapse: collapse; }
  .content table td {
    border: 1px solid #000000; }

/* #region - Secondary Gateway Tab Style */
.tab-container .tab-style {
  display: block;
  padding: 0.625rem;
  margin-bottom: 0.625rem;
  background: #C4A1C9;
  color: #000000; }
  .tab-container .tab-style span {
    box-sizing: border-box;
    text-transform: uppercase;
    font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
    font-size: 1.2rem;
    line-height: 1.25; }
  .tab-container .tab-style:hover, .tab-container .tab-style:focus {
    text-decoration: none;
    background: #712177;
    color: white; }

@media only screen and (min-width: 64rem) {
  .tab-container {
    display: flex;
    justify-content: center; }
    .tab-container .tab-style {
      flex: 1 1 0;
      color: #000000;
      margin-right: 0.625rem;
      transform: skewX(-45deg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1.25rem;
      max-width: 25%; }
      .tab-container .tab-style span {
        transform: skewX(45deg);
        display: block;
        width: 100%;
        text-align: center; }
      .tab-container .tab-style:hover, .tab-container .tab-style:focus {
        background: #712177;
        color: white; } }

/* #endregion */
/* #region - Tab Content Blocks */
.content .responsive-tabs-container {
  padding: 0; }

.responsive-tabs-container {
  padding-left: 1.25rem;
  padding-right: 1.25rem; }

.r-tabs .r-tabs-panel {
  display: none;
  padding: 0 0.625rem;
  border: 5px solid transparent;
  border-image: linear-gradient(to right, #712177, #84278b);
  border-image-slice: 1;
  border-top: 0;
  padding-top: 1.25rem; }
  .r-tabs .r-tabs-panel .container {
    padding: 0; }
  .r-tabs .r-tabs-panel p:first-child {
    padding-top: 0;
    margin-top: 0; }

.tab.content {
  padding-bottom: 1.25rem; }

.r-tabs .r-tabs-accordion-title {
  display: none; }

.r-tabs .r-tabs-panel.r-tabs-state-active {
  display: block; }

.r-tabs .r-tabs-nav {
  display: none; }

.r-tabs .r-tabs-accordion-title {
  display: block;
  background: linear-gradient(135deg, #712177 70%, #84278b 70%);
  margin-top: 0.625rem;
  padding: 0.625rem; }
  .r-tabs .r-tabs-accordion-title.r-tabs-state-active a::before {
    content: "\f146"; }
  .r-tabs .r-tabs-accordion-title a {
    color: white;
    font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
    display: block;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1.25; }
    .r-tabs .r-tabs-accordion-title a span {
      margin-left: 1.25rem; }
    .r-tabs .r-tabs-accordion-title a::before {
      content: "\f0fe";
      font-family: "Font Awesome 5 Free";
      font-weight: regular;
      margin-right: 0.625rem; }
    .r-tabs .r-tabs-accordion-title a:hover, .r-tabs .r-tabs-accordion-title a:focus {
      text-decoration: none; }

@media only screen and (min-width: 36rem) {
  .responsive-tabs-container {
    padding-left: 20px;
    padding-right: 20px; } }
  @media only screen and (min-width: 36rem) and (min-width: 36rem) {
    .responsive-tabs-container {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 36rem) and (min-width: 64rem) {
    .responsive-tabs-container {
      padding-left: 10%;
      padding-right: 10%; } }

@media only screen and (min-width: 64rem) {
  .r-tabs .r-tabs-accordion-title {
    display: none; }
  .r-tabs .r-tabs-nav {
    display: flex;
    flex-direction: row;
    margin: 0;
    margin-top: 1.25rem;
    padding: 0; }
  .r-tabs .r-tabs-panel {
    border: 5px solid #712177;
    padding-left: 1.25rem;
    padding-right: 1.25rem; }
  .r-tabs .r-tabs-tab {
    flex: 1;
    margin: 0;
    list-style: none;
    background: linear-gradient(135deg, transparent 70%, rgba(255, 255, 255, 0.1) 70%), #8c4e95;
    margin-right: 0.3125rem;
    position: relative;
    padding: 0.625rem 0; }
    .r-tabs .r-tabs-tab.r-tabs-state-active, .r-tabs .r-tabs-tab:hover, .r-tabs .r-tabs-tab:focus, .r-tabs .r-tabs-tab:first-child:hover::before, .r-tabs .r-tabs-tab:first-child:focus::before, .r-tabs .r-tabs-tab:last-child:hover::before, .r-tabs .r-tabs-tab:last-child:focus::before {
      background: linear-gradient(135deg, transparent 70%, rgba(255, 255, 255, 0.1) 70%), #712177; }
    .r-tabs .r-tabs-tab:last-child {
      margin-right: 0; }
    .r-tabs .r-tabs-tab a {
      height: 100%;
      box-sizing: border-box;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
      width: 80%;
      margin: 0 auto;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .r-tabs .r-tabs-tab a:hover, .r-tabs .r-tabs-tab a:focus {
        text-decoration: none;
        background: transparent;
        color: white; } }

/* #endregion */
/* #region - RGView "Tabs" on homepage (clickable sections) */
#rgview-sections ul li {
  background: none;
  height: 100px; }
  #rgview-sections ul li.r-tabs-state-active, #rgview-sections ul li a:hover, #rgview-sections ul li a:focus {
    text-decoration: underline; }

#rgview-sections .r-tabs .r-tabs-panel {
  border: none; }

#rgview-sections .article-image {
  position: relative; }
  #rgview-sections .article-image .category-link {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(113, 33, 119, 0.85);
    color: white;
    padding: 0.625rem; }

#rgview-sections h2 {
  font-size: 22px; }
  #rgview-sections h2 a {
    color: #712177; }

/* #endregion */
.fc_sharedmedia_player_outer, .video-outer {
  padding-top: 56.25%;
  position: relative;
  height: 0;
  z-index: 2; }
  .fc_sharedmedia_player_outer iframe, .fc_sharedmedia_player_outer .video-inner, .video-outer iframe, .video-outer .video-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important; }

/* #region Video BG Colours */
.bg-video {
  position: relative;
  z-index: 0;
  background: linear-gradient(135deg, #BAE0F5 60%, #C4A1C9 60%, #C4A1C9 75%, #B077B8 75%); }
  .bg-video::before {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(to bottom, transparent 70%, #ffffff); }

/* #endregion */
/* #region Video Panel/Header Styles */
.video-item {
  display: block;
  padding: 2.5rem 0;
  margin-bottom: 2.5rem;
  position: relative; }
  .video-item .video-block .video-outer {
    border: 5px solid #ffffff; }
  @media only screen and (min-width: 64rem) {
    .video-item .video-max-width {
      max-width: 700px; } }
  .video-item .text-block .title {
    padding: 1.25rem;
    background-color: white; }
    .video-item .text-block .title p.category {
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif; }
    .video-item .text-block .title p:not(.category) {
      padding: 0.625rem 1.25rem;
      background-color: #007abf;
      width: 100%;
      color: #ffffff;
      margin: 0;
      box-sizing: border-box; }
    .video-item .text-block .title h1 {
      margin: 0; }
  .video-item .text-block .intro {
    padding: 1.25rem;
    background-color: #712177;
    color: #ffffff; }
    .video-item .text-block .intro p {
      width: 100%;
      box-sizing: border-box; }
    .video-item .text-block .intro a.button-alt.long-text {
      padding-right: 35%; }
  @media only screen and (min-width: 64rem) {
    .video-item {
      padding: 0;
      display: flex; }
      .video-item .video-block {
        position: absolute;
        top: 0;
        right: 0;
        width: 45%;
        z-index: 2;
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
        padding-right: 5%;
        box-sizing: border-box; }
      .video-item .text-block .text-wrap .title {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        padding-left: 5%;
        position: static;
        color: initial;
        background: linear-gradient(135deg, white 80%, transparent 80%); }
        .video-item .text-block .text-wrap .title p {
          width: 45%;
          background-color: transparent;
          color: inherit; }
      .video-item .text-block .text-wrap .intro {
        padding-left: 5%;
        padding-bottom: 1.25rem;
        padding-top: 1.25rem;
        background: linear-gradient(135deg, #712177 70%, transparent 70%); }
        .video-item .text-block .text-wrap .intro p {
          width: 40%;
          padding: 0;
          background-color: transparent;
          box-sizing: border-box; }
        .video-item .text-block .text-wrap .intro a {
          margin-top: 1.25rem; }
      .video-item .text-block .text-wrap p {
        margin: 0; } }
  @media only screen and (min-width: 100rem) {
    .video-item .text-block .text-wrap .title {
      padding-left: 10%; }
      .video-item .text-block .text-wrap .title p {
        width: 40%; }
    .video-item .text-block .text-wrap .intro {
      padding-left: 10%; }
      .video-item .text-block .text-wrap .intro p {
        width: 30%; }
    .video-item .video-block {
      padding-right: 10%; } }

/* #endregion */
/* #region Video Module Styles */
.video-module {
  background: #712177;
  color: white;
  margin-bottom: 2.5rem; }
  .video-module .text-block {
    padding-right: 2.5rem; }
  .video-module .video-title {
    padding-bottom: 1.25rem;
    padding-top: 1.25rem; }
    .video-module .video-title h1 {
      margin: 0; }
  .video-module .video-content-wrap {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem; }
  @media only screen and (min-width: 48rem) {
    .video-module {
      background: linear-gradient(135deg, #712177 55%, transparent 55%), linear-gradient(to bottom, #57d4fa 40%, transparent); }
      .video-module .video-title {
        padding-bottom: 2.5rem;
        padding-top: 2.5rem;
        background: linear-gradient(135deg, white 85%, transparent 85%); } }
  @media only screen and (min-width: 64rem) {
    .video-module .text-wrap {
      max-width: 80%; } }

/* #endregion */
/* #region Video Header Styles */
#page-header-panel.video-item {
  padding-bottom: 0; }
  #page-header-panel.video-item .text-block .title {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem; }
  #page-header-panel.video-item .text-block h1, #page-header-panel.video-item .text-block p {
    margin: 0; }
  @media only screen and (min-width: 64rem) {
    #page-header-panel.video-item .video-block {
      min-width: 50%;
      max-width: 50%; }
    #page-header-panel.video-item .text-block h1 {
      margin-right: 60%; }
    #page-header-panel.video-item .text-block p, #page-header-panel.video-item .text-block h1 {
      padding-left: 0; }
    #page-header-panel.video-item .text-block a {
      max-width: 35%;
      box-sizing: border-box;
      padding-right: 5%; } }
  @media only screen and (min-width: 100rem) {
    #page-header-panel.video-item .text-block h1 {
      margin-right: 70%; } }

/* #endregion */
.tag-items-bullet-list ul.tag-content-list {
  margin-bottom: 0 !important;
  margin-top: 0; }

@media only screen and (min-width: 48rem) {
  .tag-items-bullet-list ul.tag-content-list:first-child {
    padding-right: 1em; } }

.content ul:not(.nav):not(.r-tabs-nav) {
  margin-bottom: 2.5rem;
  padding-left: 0.625rem; }
  @media only screen and (min-width: 48rem) {
    .content ul:not(.nav):not(.r-tabs-nav) {
      padding-left: 1.25rem; } }
  .content ul:not(.nav):not(.r-tabs-nav) li {
    list-style: none;
    line-height: 1.75;
    padding-left: 0.625rem;
    margin-bottom: 0.625rem; }
    .content ul:not(.nav):not(.r-tabs-nav) li::before {
      content: "\f45c";
      font-family: "Font Awesome 5 Free";
      font-weight: 600;
      color: #007abf;
      display: inline-block;
      margin-left: -1.25rem;
      padding-right: 0.625rem;
      width: 0.625rem;
      font-size: 0.625rem; }
    @media only screen and (min-width: 48rem) {
      .content ul:not(.nav):not(.r-tabs-nav) li {
        line-height: 1.5; }
        .content ul:not(.nav):not(.r-tabs-nav) li::before {
          width: 1.25rem;
          margin-left: -1.875rem;
          font-size: 1rem; } }
    .content ul:not(.nav):not(.r-tabs-nav) li ul {
      padding-top: 0.625rem;
      margin-bottom: 0.625rem;
      list-style-type: disc; }
      .content ul:not(.nav):not(.r-tabs-nav) li ul li::before {
        font-size: 0.5em;
        content: "\f111";
        color: #999;
        position: relative;
        top: -0.4em; }

/* 
    Card Component : Default Usage

    Content cards are used in grid layouts across the site for providing links to content
    in a grid layout format. Typically these cards will have 'bg-secondary-lightest' applied for the BG colour
    but this could be any colour requested.

    Markup: 
    <div class="content-card bg-secondary-lightest" style="max-width: 400px; // inline styles are for the styleguide only">
        <img src="https://placeimg.com/400/300/nature"/>
        <?php include path/to/img/include/goes/here.php ?>
        <div class="preview-text">
            <a href="#"><h2><?php echo $title; ?>Content Item Title</h2></a>
            <p><?php echo $intro; ?>Card description</p>
        </div>
         <a href="<?php echo $link; ?>" class="more-link"><?php echo JText::_('RGU_FIND_OUT_MORE'); ?>Find Out More</a>
    </div>

    Styleguide Components.Card

*/
/* 
    Card Component : Course Grid Usage

    Content cards are used in grid layouts across the site for providing links to content
    in a grid layout format. The course layout style is used on the pages where courses are displayed
    in a grid grouped by subject. E.g. https://www.rgu.ac.uk/study/types-of-study/undergraduate-courses

    Markup: 
    <div class="content-card bg-undergraduate-lighter" style="max-width: 400px; // inline styles are for the styleguide only">
        <img src="https://placeimg.com/400/300/nature"/>
        <?php include path/to/img/include/goes/here.php ?>
        <div class="preview-text">
            <a href="#"><h4><?php echo $title; ?>Course Title</h4></a>
            <p><?php echo $intro; ?>Card description</p>
        </div>
         <a href="<?php echo $link; ?>" class="more-link-alt"><?php echo JText::_('RGU_FIND_OUT_MORE'); ?>Find Out More</a>
    </div>

    Styleguide Components.Card.CourseGrid

*/
.article-preview, .content-card {
  margin-bottom: 1.25rem;
  padding: 0; }
  .article-preview a h2, .article-preview a.h2, .content-card a h2, .content-card a.h2 {
    font-size: 1.25rem; }
  .article-preview a.h4, .article-preview a h4, .article-preview a.h2, .article-preview a h2, .content-card a.h4, .content-card a h4, .content-card a.h2, .content-card a h2 {
    color: #000000;
    margin: 0;
    text-decoration: none; }
    .article-preview a.h4:hover, .article-preview a.h4:focus, .article-preview a.h4:active, .article-preview a h4:hover, .article-preview a h4:focus, .article-preview a h4:active, .article-preview a.h2:hover, .article-preview a.h2:focus, .article-preview a.h2:active, .article-preview a h2:hover, .article-preview a h2:focus, .article-preview a h2:active, .content-card a.h4:hover, .content-card a.h4:focus, .content-card a.h4:active, .content-card a h4:hover, .content-card a h4:focus, .content-card a h4:active, .content-card a.h2:hover, .content-card a.h2:focus, .content-card a.h2:active, .content-card a h2:hover, .content-card a h2:focus, .content-card a h2:active {
      color: #006B99;
      background: none;
      text-decoration: none; }
  .article-preview.bg-undergraduate-lighter a.h4:hover, .article-preview.bg-undergraduate-lighter a.h4:focus, .article-preview.bg-undergraduate-lighter a.h4:active, .article-preview.bg-undergraduate-lighter a h4:hover, .article-preview.bg-undergraduate-lighter a h4:focus, .article-preview.bg-undergraduate-lighter a h4:active, .article-preview.bg-undergraduate-lighter a.h2:hover, .article-preview.bg-undergraduate-lighter a.h2:focus, .article-preview.bg-undergraduate-lighter a.h2:active, .article-preview.bg-undergraduate-lighter a h2:hover, .article-preview.bg-undergraduate-lighter a h2:focus, .article-preview.bg-undergraduate-lighter a h2:active, .content-card.bg-undergraduate-lighter a.h4:hover, .content-card.bg-undergraduate-lighter a.h4:focus, .content-card.bg-undergraduate-lighter a.h4:active, .content-card.bg-undergraduate-lighter a h4:hover, .content-card.bg-undergraduate-lighter a h4:focus, .content-card.bg-undergraduate-lighter a h4:active, .content-card.bg-undergraduate-lighter a.h2:hover, .content-card.bg-undergraduate-lighter a.h2:focus, .content-card.bg-undergraduate-lighter a.h2:active, .content-card.bg-undergraduate-lighter a h2:hover, .content-card.bg-undergraduate-lighter a h2:focus, .content-card.bg-undergraduate-lighter a h2:active {
    color: #ba006f; }
  .article-preview .preview-text, .content-card .preview-text {
    padding: 1.25rem; }
    .article-preview .preview-text p, .content-card .preview-text p {
      margin-bottom: 0; }
  .article-preview [class^='more-link'], .content-card [class^='more-link'] {
    margin-top: auto;
    display: block; }
  .article-preview .col, .content-card .col {
    display: flex; }
  @media only screen and (min-width: 25rem) {
    .article-preview a h2, .article-preview a.h2, .content-card a h2, .content-card a.h2 {
      font-size: 1.25rem; } }
  @media only screen and (min-width: 36rem) {
    .article-preview a h2, .article-preview a.h2, .content-card a h2, .content-card a.h2 {
      font-size: 1.375rem; } }
  @media only screen and (min-width: 48rem) {
    .article-preview a h2, .article-preview a.h2, .content-card a h2, .content-card a.h2 {
      font-size: 1.5rem; } }
  @media only screen and (min-width: 64rem) {
    .article-preview a h2, .article-preview a.h2, .content-card a h2, .content-card a.h2 {
      font-size: 1.65rem; } }

/* #region News Article Preview Styles */
/* 
    Card Component : News/Events

    The styles for the News/Events cards are very similar however they don't output images and
    they show the published date/event date and a tag of whether it is a news article or an event.

    Markup: 
    <div class="article-preview news bg-secondary-lightest" style="max-width: 400px; // inline styles are for the styleguide only">
        <div class="flex-wrap col">
            <p class="type-label"><?php echo $type; ?>News/Event</p>
            <div class="preview-text">
                <p class="date"><?php echo $date_prefix . $itemDate; ?>23rd January 2020</p>
                <h4><?php echo $title; ?>Title of the article</h4>
                <p><?php echo $description; ?>Intro of the article</p>
            </div>
            <a class="more-link" href="#" aria-label="Click to view full article titled <?php echo $title; ?>" title="Click to view full article: <?php echo $title; ?>" class="h4"><i class="fas fa-arrow-right"></i><?php echo JText::_('RGU_FIND_OUT_MORE'); ?>Find Out More</a>
        </div>
    </div>

    Styleguide Components.Card.News

*/
.article-preview.news .preview-text {
  padding: 1.25rem;
  padding-top: 0; }

.article-preview.news .type-label {
  text-transform: uppercase;
  font-size: 1.5rem;
  padding: 0.3125rem 0.625rem;
  font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
  background: linear-gradient(135deg, #712177 40%, transparent 40%);
  color: white;
  width: 100%;
  box-sizing: border-box;
  margin: 0; }

.article-preview.news p {
  font-size: 15px;
  font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }

.article-preview.news p.date {
  font-family: "ZonaPro-Regular", helvetica, arial, sans-serif;
  font-size: 15px;
  line-height: 15px;
  margin-bottom: 0.625rem; }

@media only screen and (min-width: 36rem) {
  .article-preview.news .type-label {
    background: linear-gradient(135deg, #712177 45%, transparent 45%); } }

@media only screen and (min-width: 100rem) {
  .article-preview.news .type-label {
    background: linear-gradient(135deg, #712177 35%, transparent 35%); } }

/* #endregion */
.news-header a {
  color: #007abf;
  text-decoration-line: underline;
  text-decoration-style: solid; }
  .news-header a:hover, .news-header a:focus {
    background-color: #e2d2e5;
    color: #571046; }

.related-items {
  margin-bottom: 1.25rem; }
  .related-items h2 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem; }
  .related-items .card-image {
    display: block; }
  .related-items .row {
    justify-content: center; }
  .related-items .related-item .preview-text {
    margin-bottom: 1.25rem; }
  @media only screen and (min-width: 36rem) {
    .related-items .related-item {
      max-width: 32%;
      min-width: 32%;
      display: flex;
      flex-direction: column;
      margin-right: 2%; }
      .related-items .related-item:nth-child(3n) {
        margin-right: 0; } }
  @media only screen and (min-width: 64rem) {
    .related-items {
      margin-bottom: 2.5rem; }
      .related-items h2 {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem; } }

.statistics-accolades {
  margin-bottom: 1.25rem; }

.carousel {
  padding-bottom: 2.5rem;
  padding-top: 1.25rem; }
  .carousel .slick-dotted.slick-slider {
    margin-bottom: 0; }
  .carousel .item-wrap {
    height: 250px;
    text-align: center;
    position: relative;
    margin-right: 1.25rem;
    margin-left: 1.25rem;
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }
    .carousel .item-wrap .stat-header p {
      margin: 0;
      padding: 0.625rem 0;
      font-size: 3.5rem; }
    .carousel .item-wrap a {
      position: absolute;
      bottom: 0;
      width: 100%;
      box-sizing: border-box;
      display: block; }
    .carousel .item-wrap .byline {
      padding: 0 1.25rem; }
  .carousel ul.slick-dots {
    bottom: -1.875rem; }
    .carousel ul.slick-dots li button::before {
      color: white; }
  .carousel .slick-prev, .carousel .slick-next {
    display: none !important; }
  .carousel .slick-prev:before {
    content: "\f060";
    font-size: 40px;
    font-family: "Font Awesome 5 Free";
    opacity: 1;
    font-weight: 600; }
  .carousel .slick-next:before {
    content: "\f061";
    font-size: 40px;
    font-family: "Font Awesome 5 Free";
    opacity: 1;
    font-weight: 600; }
  @media only screen and (min-width: 36rem) {
    .carousel {
      max-width: 90%;
      margin: 0 auto; }
      .carousel .item-wrap .stat-header p {
        font-size: 2rem; }
      .carousel .slick-prev {
        left: -5%;
        width: 5%;
        display: block !important; }
      .carousel .slick-next {
        right: -5%;
        width: 5%;
        display: block !important; } }
  @media only screen and (min-width: 100rem) {
    .carousel {
      max-width: 60%; } }

#content-az ul.az-index {
  list-style: none;
  width: 100%;
  text-align: center; }
  #content-az ul.az-index li {
    display: inline-block; }
    #content-az ul.az-index li.az-filter {
      color: #ffffff;
      margin: 0.625rem 0.3125rem;
      width: 2rem;
      height: 2rem;
      text-align: center;
      line-height: 2rem;
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
      cursor: pointer; }
      #content-az ul.az-index li.az-filter:first-child {
        width: 3rem; }
      #content-az ul.az-index li.az-filter.no-index {
        color: black;
        cursor: auto; }
    #content-az ul.az-index li before {
      content: ""; }

#content-az .az-group .az-item {
  border-bottom: 1px solid #007abf; }
  #content-az .az-group .az-item a {
    padding: 0.3125rem 0;
    color: #000000; }
    #content-az .az-group .az-item a:hover, #content-az .az-group .az-item a:focus {
      background-color: #d0eaf8; }
    #content-az .az-group .az-item a .title {
      text-decoration: underline; }
    #content-az .az-group .az-item a .info .mode {
      background-color: #007abf;
      color: white;
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
      text-transform: uppercase;
      padding: 0.3125rem 0.625rem;
      font-size: 1rem;
      margin-left: 0.625rem; }
  #content-az .az-group .az-item:last-child {
    border-bottom: none; }

@media only screen and (min-width: 36rem) {
  #content-az .az-group .az-item a {
    display: flex;
    flex-direction: row; }
    #content-az .az-group .az-item a .title {
      flex: 1; }
    #content-az .az-group .az-item a .info {
      flex: 1;
      text-align: right; } }

/* *
    The styles for the Case Study Template
* */
.case-study-page #title-block {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem; }

.case-study-page h1, .case-study-page .h3 {
  margin: 0; }

.case-study-page .cs-course-link a {
  display: inline !important; }

.case-study-page .cs-quote {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 50%, transparent 50%);
  padding: 2.5rem 0; }
  .case-study-page .cs-quote blockquote {
    padding-left: 20px;
    padding-right: 20px; }
    @media only screen and (min-width: 36rem) {
      .case-study-page .cs-quote blockquote {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      .case-study-page .cs-quote blockquote {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      .case-study-page .cs-quote blockquote {
        padding-left: 20%;
        padding-right: 20%; } }

.case-study-page .intro p {
  margin-top: 0; }

@media only screen and (min-width: 36rem) {
  .case-study-page #title-block {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem; }
  .case-study-page .panel-image-wrap {
    width: 55%;
    margin-left: 2.5rem;
    float: right; } }

#country #page-header-panel .page-intro {
  background-color: transparent;
  padding: 0; }
  #country #page-header-panel .page-intro .country-intro {
    color: black; }

@media only screen and (min-width: 48rem) {
  #country #page-header-panel .page-intro .country-intro {
    color: white; }
  #country .text-block {
    display: flex;
    flex-direction: row !important;
    align-items: initial !important; } }

#country .flag-img {
  min-width: 100px;
  width: 100px;
  margin-right: 1.25rem; }
  #country .flag-img img {
    border: 2px solid white; }

.course-block-wrap {
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    .course-block-wrap {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    .course-block-wrap {
      padding-left: 10%;
      padding-right: 10%; } }

#course-page {
  /* #region Course Head - Default Display */
  /* #endregion */
  /* #region - Course Head : Sticky Display */
  /* #endregion */ }
  #course-page #univ-facilities b {
    font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif; }
  #course-page #univ-facilities a {
    color: black;
    font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
    font-size: 18px;
    text-transform: uppercase; }
    #course-page #univ-facilities a i {
      color: #009FEE; }
  #course-page #facilities {
    padding-left: 20px;
    padding-right: 20px; }
    @media only screen and (min-width: 36rem) {
      #course-page #facilities {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #course-page #facilities {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      #course-page #facilities {
        padding-left: 20%;
        padding-right: 20%; } }
    @media only screen and (min-width: 48rem) {
      #course-page #facilities .flex-grid {
        display: flex;
        justify-content: center;
        margin-bottom: 0; }
        #course-page #facilities .flex-grid .grid-item {
          max-width: 32%;
          margin-right: 1%;
          display: flex;
          flex-direction: column; }
          #course-page #facilities .flex-grid .grid-item:last-child {
            margin-right: 0; } }
  #course-page #apply {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 2.5rem; }
    @media only screen and (min-width: 36rem) {
      #course-page #apply {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #course-page #apply {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      #course-page #apply {
        padding-left: 20%;
        padding-right: 20%; } }
    #course-page #apply #apply-options {
      border: 5px solid #8c4e95; }
      #course-page #apply #apply-options h5 {
        color: #000000; }
      #course-page #apply #apply-options h2 {
        display: block;
        margin: 0;
        padding: 0.625rem 0;
        text-align: center;
        background-color: #8c4e95;
        text-transform: uppercase;
        font-weight: normal;
        color: white; }
        #course-page #apply #apply-options h2 {
          line-height: 20px !important; }
          @media screen and (min-width: 320px) {
            #course-page #apply #apply-options h2 {
              line-height: calc(20px + 6 * ((100vw - 320px) / 1280)) !important; } }
          @media screen and (min-width: 1600px) {
            #course-page #apply #apply-options h2 {
              line-height: 26px !important; } }
      #course-page #apply #apply-options p.h4 {
        margin-top: 0;
        margin-bottom: 0.625rem; }
      #course-page #apply #apply-options .option-wrap {
        padding: 1.25rem; }
      #course-page #apply #apply-options .apply-top-option {
        margin-bottom: 1.25rem; }
      #course-page #apply #apply-options .apply-info-link, #course-page #apply #apply-options .apply-top-option .apply-text-link a, #course-page #apply #apply-options .apply-text .read-more-alternative-button a, #course-page #apply #apply-options .apply-text .case-study-page .cs-course-link a a, .case-study-page .cs-course-link #course-page #apply #apply-options .apply-text a a, #course-page #apply #apply-options .apply-text a.read-more-alternative-button a, #course-page #apply #apply-options .apply-text .case-study-page .cs-course-link a a, .case-study-page .cs-course-link #course-page #apply #apply-options .apply-text a a {
        color: #8c4e95;
        text-decoration: none;
        text-transform: uppercase;
        font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif; }
        #course-page #apply #apply-options .apply-info-link::before, #course-page #apply #apply-options .apply-top-option .apply-text-link a::before, #course-page #apply #apply-options .apply-text .read-more-alternative-button a::before, #course-page #apply #apply-options .apply-text .case-study-page .cs-course-link a a::before, .case-study-page .cs-course-link #course-page #apply #apply-options .apply-text a a::before, #course-page #apply #apply-options .apply-text a.read-more-alternative-button a::before, #course-page #apply #apply-options .apply-text .case-study-page .cs-course-link a a::before, .case-study-page .cs-course-link #course-page #apply #apply-options .apply-text a a::before {
          content: "";
          margin: 0; }
        #course-page #apply #apply-options .apply-info-link::after, #course-page #apply #apply-options .apply-top-option .apply-text-link a::after, #course-page #apply #apply-options .apply-text .read-more-alternative-button a::after, #course-page #apply #apply-options .apply-text .case-study-page .cs-course-link a a::after, .case-study-page .cs-course-link #course-page #apply #apply-options .apply-text a a::after, #course-page #apply #apply-options .apply-text a.read-more-alternative-button a::after, #course-page #apply #apply-options .apply-text .case-study-page .cs-course-link a a::after, .case-study-page .cs-course-link #course-page #apply #apply-options .apply-text a a::after {
          content: "\f061";
          font-weight: bold;
          font-family: "Font Awesome 5 Free";
          margin-left: 0.625rem; }
        #course-page #apply #apply-options .apply-info-link:hover, #course-page #apply #apply-options .apply-info-link:focus, #course-page #apply #apply-options .apply-top-option .apply-text-link a:hover, #course-page #apply #apply-options .apply-top-option .apply-text-link a:focus, #course-page #apply #apply-options .apply-text .read-more-alternative-button a:hover, #course-page #apply #apply-options .apply-text .case-study-page .cs-course-link a a:hover, .case-study-page .cs-course-link #course-page #apply #apply-options .apply-text a a:hover, #course-page #apply #apply-options .apply-text .read-more-alternative-button a:focus, #course-page #apply #apply-options .apply-text .case-study-page .cs-course-link a a:focus, .case-study-page .cs-course-link #course-page #apply #apply-options .apply-text a a:focus, #course-page #apply #apply-options .apply-text a.read-more-alternative-button a:hover, #course-page #apply #apply-options .apply-text .case-study-page .cs-course-link a a:hover, .case-study-page .cs-course-link #course-page #apply #apply-options .apply-text a a:hover, #course-page #apply #apply-options .apply-text a.read-more-alternative-button a:focus, #course-page #apply #apply-options .apply-text .case-study-page .cs-course-link a a:focus, .case-study-page .cs-course-link #course-page #apply #apply-options .apply-text a a:focus {
          background-color: transparent !important;
          color: #007abf; }
      #course-page #apply #apply-options .col {
        margin-right: 0.625rem;
        display: flex;
        flex-direction: column;
        margin-bottom: 1.25rem; }
        #course-page #apply #apply-options .col:last-child {
          margin-right: 0; }
        #course-page #apply #apply-options .col .apply-text {
          padding: 0 1.25rem; }
        #course-page #apply #apply-options .col .apply-text-link {
          margin-top: auto; }
          #course-page #apply #apply-options .col .apply-text-link a {
            padding: 0.625rem 1.25rem;
            background-color: #712177;
            font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
            color: #ffffff;
            text-transform: uppercase;
            text-decoration: none;
            min-height: 75px;
            box-sizing: border-box;
            display: flex;
            align-items: center; }
            #course-page #apply #apply-options .col .apply-text-link a::before {
              content: "\f061";
              font-family: "Font Awesome 5 Free";
              font-weight: 800;
              font-size: 28px;
              margin-right: 0.625rem;
              color: #ceb1d2; }
            #course-page #apply #apply-options .col .apply-text-link a:hover, #course-page #apply #apply-options .col .apply-text-link a:focus {
              background-color: #007abf; }
              #course-page #apply #apply-options .col .apply-text-link a:hover::before, #course-page #apply #apply-options .col .apply-text-link a:focus::before {
                color: #57d4fa; }
  #course-page #course-intro {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
    line-height: 26px; }
    @media only screen and (min-width: 36rem) {
      #course-page #course-intro {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #course-page #course-intro {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      #course-page #course-intro {
        padding-left: 20%;
        padding-right: 20%; } }
    #course-page #course-intro p {
      margin-bottom: 0; }
      #course-page #course-intro p:first-child {
        margin-top: 0; }
      #course-page #course-intro p strong {
        font-weight: normal; }
    #course-page #course-intro a {
      color: #007abf; }
      #course-page #course-intro a:hover, #course-page #course-intro a:focus {
        color: #6B1868;
        background-color: #e2d2e5; }
    #course-page #course-intro b {
      font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif; }
    @media only screen and (min-width: 36rem) {
      #course-page #course-intro {
        column-count: 2;
        column-gap: 2.5rem; } }
  #course-page #course-accolade {
    padding-left: 20px;
    padding-right: 20px;
    color: #712177; }
    @media only screen and (min-width: 36rem) {
      #course-page #course-accolade {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #course-page #course-accolade {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      #course-page #course-accolade {
        padding-left: 20%;
        padding-right: 20%; } }
    #course-page #course-accolade p {
      padding-top: 0;
      margin-top: 0; }
    #course-page #course-accolade b, #course-page #course-accolade strong {
      font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif; }
  #course-page #course-fees p {
    margin: 0; }
  @media only screen and (min-width: 48rem) {
    #course-page #course-fees .year-column:first-child {
      margin-right: 1.25rem; }
    #course-page #course-fees .year-column.col-1 {
      width: 50%;
      margin-right: 0;
      padding-right: 1.25rem; } }
  #course-page #course-fees table {
    margin-bottom: 1.25rem;
    border: none; }
    #course-page #course-fees table tr, #course-page #course-fees table td {
      border: none; }
    #course-page #course-fees table td {
      padding: 0.3125rem 0.625rem; }
      #course-page #course-fees table td.fee-data-col {
        padding-left: 0; }
      #course-page #course-fees table td.course-years-col {
        border-right: 2px solid #006B99; }
      #course-page #course-fees table td.fee-data-col {
        text-align: center; }
      @media only screen and (min-width: 36rem) {
        #course-page #course-fees table td.course-years-col, #course-page #course-fees table td.fee-data-col {
          width: 30%; } }
    #course-page #course-fees table thead {
      border: 2px solid #006B99; }
      #course-page #course-fees table thead th {
        padding: 0.3125rem 0.625rem;
        font-weight: normal;
        text-align: left; }
    #course-page #course-fees table tr.multi-rows {
      border: 2px solid #006B99;
      border-top: none; }
    #course-page #course-fees table tr.single-rows {
      border: 2px solid #006B99;
      border-top: none; }
  #course-page .study-options-banner-text {
    padding: 0.625rem 0;
    padding-left: 20px;
    padding-right: 20px; }
    @media only screen and (min-width: 36rem) {
      #course-page .study-options-banner-text {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #course-page .study-options-banner-text {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      #course-page .study-options-banner-text {
        padding-left: 20%;
        padding-right: 20%; } }
  #course-page .study-options .options-cta {
    display: block;
    padding: 0.625rem 1.25rem; }
    #course-page .study-options .options-cta i {
      margin-left: 0.625rem; }
    #course-page .study-options .options-cta.expanded i {
      transform: rotate(180deg); }
  @media only screen and (min-width: 36rem) {
    #course-page .study-options .options-cta {
      display: none; } }
  #course-page #study-options-lists {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 2.5rem; }
    @media only screen and (min-width: 36rem) {
      #course-page #study-options-lists {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #course-page #study-options-lists {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      #course-page #study-options-lists {
        padding-left: 20%;
        padding-right: 20%; } }
    #course-page #study-options-lists.mobile-collapse {
      display: none; }
    #course-page #study-options-lists .col p.option-headings {
      margin: 0.3125rem 0;
      font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
      font-size: 18px; }
    #course-page #study-options-lists .row {
      border-bottom: 1px solid #009FEE;
      padding: 0.625rem 0; }
      #course-page #study-options-lists .row:last-child {
        border-bottom: none; }
    #course-page #study-options-lists ul {
      margin: 0;
      padding: 0; }
    @media only screen and (min-width: 36rem) {
      #course-page #study-options-lists {
        display: block; }
        #course-page #study-options-lists.mobile-collapse {
          display: block; }
        #course-page #study-options-lists .col p.option-headings {
          display: none; }
        #course-page #study-options-lists .row {
          padding: 0.3125rem 0; }
        #course-page #study-options-lists .row:first-child p.option-headings {
          display: block;
          padding: 0.625rem 0; } }
  #course-page #course-support-options {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 2px solid #009FEE; }
    #course-page #course-support-options .row {
      flex-wrap: wrap; }
    #course-page #course-support-options .col {
      min-width: 48%;
      margin-right: 2%; }
      #course-page #course-support-options .col:last-child {
        margin-right: 0; }
  #course-page #course-head {
    background-color: #ffffff;
    /* School Style */
    /* Title Section */
    /* Course Award */
    /* Links Bar */
    /* #region : Desktop Styles */
    /* #endregion : Desktop Styles */
    /* #region : Large Desktop Styles */
    /* #endregion : Large Desktop Styles */ }
    #course-page #course-head .school {
      background: #BAE0F5;
      display: flex;
      align-items: center; }
      #course-page #course-head .school i {
        color: #009FEE;
        display: inline-block;
        font-size: 0.8rem;
        margin-right: 0.625rem;
        margin-left: 1.25rem; }
      #course-page #course-head .school a {
        color: #000000;
        text-transform: uppercase;
        font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
        font-size: 0.75rem;
        display: inline-block;
        line-height: 1.2;
        display: block;
        padding: 0.625rem 1.25rem;
        padding-left: 0;
        box-sizing: border-box; }
      #course-page #course-head .school:hover, #course-page #course-head .school:focus {
        background: #C4A1C9; }
        #course-page #course-head .school:hover i, #course-page #course-head .school:focus i {
          color: #712177; }
        #course-page #course-head .school:hover a, #course-page #course-head .school:focus a {
          text-decoration: none; }
    #course-page #course-head h1 {
      line-height: 1.2;
      padding-left: 20px;
      padding-right: 20px;
      margin: 0;
      margin-top: 1.25rem; }
      @media only screen and (min-width: 36rem) {
        #course-page #course-head h1 {
          padding-left: 5%;
          padding-right: 5%; } }
      @media only screen and (min-width: 64rem) {
        #course-page #course-head h1 {
          padding-left: 10%;
          padding-right: 10%; } }
    #course-page #course-head .course-award {
      padding-left: 20px;
      padding-right: 20px;
      line-height: 1.2;
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
      margin-bottom: 1.25rem; }
      @media only screen and (min-width: 36rem) {
        #course-page #course-head .course-award {
          padding-left: 5%;
          padding-right: 5%; } }
      @media only screen and (min-width: 64rem) {
        #course-page #course-head .course-award {
          padding-left: 10%;
          padding-right: 10%; } }
    #course-page #course-head #link-bar {
      text-transform: uppercase;
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
      padding: 0.3125rem 0; }
      #course-page #course-head #link-bar #apply-msg {
        background: #57d4fa;
        padding: 0 1.25rem;
        margin-bottom: 0.625rem; }
      #course-page #course-head #link-bar #course-apply-links {
        padding: 0 1.25rem; }
      #course-page #course-head #link-bar a {
        color: #712177; }
        #course-page #course-head #link-bar a i {
          color: #009FEE; }
    @media only screen and (min-width: 64rem) {
      #course-page #course-head {
        /* School Styles */ }
        #course-page #course-head .school {
          padding-left: 1.875rem;
          background: linear-gradient(135deg, #BAE0F5 40%, transparent 40%); }
          #course-page #course-head .school a {
            width: 30%;
            display: block;
            padding: 0.625rem 1.875rem;
            padding-left: 0;
            font-size: 1rem; }
          #course-page #course-head .school:hover, #course-page #course-head .school:focus {
            background: linear-gradient(135deg, #C4A1C9 40%, transparent 40%); }
        #course-page #course-head #link-bar {
          text-align: right;
          padding: 0;
          padding-right: 10%;
          background: linear-gradient(to right, #57d4fa 85%, #712177 85%); }
          #course-page #course-head #link-bar .col {
            display: inline-block; }
            #course-page #course-head #link-bar .col a {
              color: #ffffff; }
              #course-page #course-head #link-bar .col a i {
                margin-right: 0.3125rem;
                color: inherit; }
          #course-page #course-head #link-bar #apply-msg {
            background: #57d4fa;
            padding: 0.625rem 0;
            margin: 0; }
            #course-page #course-head #link-bar #apply-msg span {
              display: block;
              padding: 0 1.25rem;
              padding-left: 0; }
          #course-page #course-head #link-bar #register-link {
            background: #86428B;
            transform: skewX(-45deg);
            transform-origin: top left;
            margin: 0; }
            #course-page #course-head #link-bar #register-link a {
              padding: 0.625rem 1.25rem;
              display: block;
              transform: skewX(45deg);
              margin: 0; }
            #course-page #course-head #link-bar #register-link:hover, #course-page #course-head #link-bar #register-link:focus {
              background: #007abf; }
              #course-page #course-head #link-bar #register-link:hover a, #course-page #course-head #link-bar #register-link:focus a {
                text-decoration: none; }
          #course-page #course-head #link-bar #apply-link {
            background: #712177;
            transform: skewX(-45deg);
            transform-origin: top left;
            margin-left: -5px;
            margin-right: -5%; }
            #course-page #course-head #link-bar #apply-link a {
              padding: 0.625rem 1.25rem;
              display: block;
              transform: skewX(45deg); }
            #course-page #course-head #link-bar #apply-link:hover, #course-page #course-head #link-bar #apply-link:focus {
              background: #006B99; }
              #course-page #course-head #link-bar #apply-link:hover a, #course-page #course-head #link-bar #apply-link:focus a {
                text-decoration: none; } }
    @media only screen and (min-width: 100rem) {
      #course-page #course-head {
        /* School Styles */ }
        #course-page #course-head .school {
          background: linear-gradient(135deg, #BAE0F5 30%, transparent 30%); }
          #course-page #course-head .school a {
            width: 25%; }
          #course-page #course-head .school:hover, #course-page #course-head .school:focus {
            background: linear-gradient(135deg, #C4A1C9 30%, transparent 30%); } }
  #course-page .sticky-placeholder {
    display: none;
    height: 0; }
  #course-page #course-head.fixed.fixed-style .school {
    display: none; }
  #course-page #course-head.fixed.fixed-style h1 {
    font-size: 1rem;
    margin: 0;
    padding-top: 0.625rem;
    padding-bottom: 0;
    transition: all 0.5s ease-in-out; }
  #course-page #course-head.fixed.fixed-style .course-award {
    font-size: 0.75rem;
    padding-bottom: 0.3125rem;
    margin: 0;
    transition: all 0.5s ease-in-out; }
  #course-page #course-head.fixed.fixed-style #link-bar #apply-msg {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    font-size: 0.75rem;
    transition: all 0.5s ease-in-out;
    margin-bottom: 0.3125rem; }
  #course-page #course-head.fixed.fixed-style #link-bar #register-link, #course-page #course-head.fixed.fixed-style #link-bar #apply-link {
    font-size: 0.75rem;
    transition: all 0.5s ease-in-out; }
  @media only screen and (min-width: 64rem) {
    #course-page #course-head.fixed:not(.fixed-style) h1, #course-page #course-head.fixed:not(.fixed-style) .course-award, #course-page #course-head.fixed:not(.fixed-style) .school, #course-page #course-head.fixed:not(.fixed-style) #apply-msg, #course-page #course-head.fixed:not(.fixed-style) #register-link, #course-page #course-head.fixed:not(.fixed-style) #apply-link {
      transition: all 0.5s ease-in-out; }
    #course-page #course-head.fixed.fixed-style h1 {
      font-size: 1.5rem;
      margin-top: 0.625rem; }
    #course-page #course-head.fixed.fixed-style .course-award {
      font-size: 0.9rem;
      margin-bottom: 0.625rem; }
    #course-page #course-head.fixed.fixed-style .school {
      display: flex;
      padding-top: 0.3125rem;
      padding-bottom: 0.3125rem; }
      #course-page #course-head.fixed.fixed-style .school a {
        padding: 0;
        font-size: 0.75rem; }
    #course-page #course-head.fixed.fixed-style #link-bar {
      font-size: 0.75rem; }
      #course-page #course-head.fixed.fixed-style #link-bar #apply-msg {
        padding-top: 0.3125rem;
        padding-bottom: 0.3125rem;
        margin-bottom: 0; }
      #course-page #course-head.fixed.fixed-style #link-bar #course-apply-links #register-link a, #course-page #course-head.fixed.fixed-style #link-bar #course-apply-links #apply-link a {
        padding-top: 0.3125rem;
        padding-bottom: 0.3125rem; } }
  #course-page .video-item {
    position: relative;
    background: #57d4fa;
    padding-top: 1.25rem;
    margin-bottom: 0; }
    #course-page .video-item::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(255, 255, 255, 0.4); }
    #course-page .video-item::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(to bottom, transparent, white); }
    #course-page .video-item .video-block {
      padding-left: 20px;
      padding-right: 20px;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 0;
      margin-top: 0;
      position: relative; }
      @media only screen and (min-width: 36rem) {
        #course-page .video-item .video-block {
          padding-left: 5%;
          padding-right: 5%; } }
      @media only screen and (min-width: 64rem) {
        #course-page .video-item .video-block {
          padding-left: 10%;
          padding-right: 10%; } }
      @media only screen and (min-width: 100rem) {
        #course-page .video-item .video-block {
          padding-left: 20%;
          padding-right: 20%; } }
  #course-page #case-study {
    background-color: #712177;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%);
    color: #ffffff;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 2.5rem; }
    @media only screen and (min-width: 36rem) {
      #course-page #case-study {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #course-page #case-study {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      #course-page #case-study {
        padding-left: 20%;
        padding-right: 20%; } }
    #course-page #case-study blockquote {
      padding: 1.25rem 0;
      font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
      margin: 0; }
      #course-page #case-study blockquote {
        line-height: 28px !important; }
        @media screen and (min-width: 320px) {
          #course-page #case-study blockquote {
            line-height: calc(28px + 2 * ((100vw - 320px) / 1280)) !important; } }
        @media screen and (min-width: 1600px) {
          #course-page #case-study blockquote {
            line-height: 30px !important; } }
      #course-page #case-study blockquote cite {
        font-style: normal;
        font-family: "ZonaPro-Regular", helvetica, arial, sans-serif;
        margin-top: 1.25rem;
        display: block; }
  #course-page #course-tabs .responsive-tabs-container {
    padding-left: 20px;
    padding-right: 20px; }
    @media only screen and (min-width: 36rem) {
      #course-page #course-tabs .responsive-tabs-container {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #course-page #course-tabs .responsive-tabs-container {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      #course-page #course-tabs .responsive-tabs-container {
        padding-left: 20%;
        padding-right: 20%; } }
  #course-page #course-tabs .r-tabs .r-tabs-tab a {
    line-height: 20px !important; }
    @media screen and (min-width: 320px) {
      #course-page #course-tabs .r-tabs .r-tabs-tab a {
        line-height: calc(20px + 0 * ((100vw - 320px) / 1280)) !important; } }
    @media screen and (min-width: 1600px) {
      #course-page #course-tabs .r-tabs .r-tabs-tab a {
        line-height: 20px !important; } }
  @media only screen and (min-width: 100rem) {
    #course-page #course-tabs .r-tabs .r-tabs-tab a {
      line-height: 20px !important; } }
  @media only screen and (min-width: 100rem) and (min-width: 320px) {
    #course-page #course-tabs .r-tabs .r-tabs-tab a {
      line-height: calc(20px + 2 * ((100vw - 320px) / 1280)) !important; } }
  @media only screen and (min-width: 100rem) and (min-width: 1600px) {
    #course-page #course-tabs .r-tabs .r-tabs-tab a {
      line-height: 22px !important; } }
  #course-page #get-in-touch-wrap, #course-page #accreditation, #course-page #recognition, #course-page #case-study {
    padding-left: 20px;
    padding-right: 20px; }
    @media only screen and (min-width: 36rem) {
      #course-page #get-in-touch-wrap, #course-page #accreditation, #course-page #recognition, #course-page #case-study {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #course-page #get-in-touch-wrap, #course-page #accreditation, #course-page #recognition, #course-page #case-study {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      #course-page #get-in-touch-wrap, #course-page #accreditation, #course-page #recognition, #course-page #case-study {
        padding-left: 20%;
        padding-right: 20%; } }
    #course-page #get-in-touch-wrap::after, #course-page #accreditation::after, #course-page #recognition::after, #course-page #case-study::after {
      content: "";
      clear: both;
      display: table; }
  #course-page #case-study blockquote {
    padding-left: 0;
    padding-right: 0; }
  #course-page #unistats-widget {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 2.5rem; }
    @media only screen and (min-width: 36rem) {
      #course-page #unistats-widget {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) {
      #course-page #unistats-widget {
        padding-left: 10%;
        padding-right: 10%; } }
    @media only screen and (min-width: 100rem) {
      #course-page #unistats-widget {
        padding-left: 20%;
        padding-right: 20%; } }

.type-alias-course-page .container {
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    .type-alias-course-page .container {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    .type-alias-course-page .container {
      padding-left: 10%;
      padding-right: 10%; } }
  @media only screen and (min-width: 100rem) {
    .type-alias-course-page .container {
      padding-left: 20%;
      padding-right: 20%; } }

/* #region Category Page Styles */
@media only screen and (min-width: 64rem) {
  #news-results.grid-4 {
    grid-template-columns: repeat(3, 1fr); } }

@media only screen and (min-width: 100rem) {
  #news-results.grid-4 {
    grid-template-columns: repeat(4, 1fr); } }

#news-events-listings #gateway-menus {
  margin-bottom: 0; }
  #news-events-listings #gateway-menus #gateway-secondary-nav {
    background-color: white; }
    #news-events-listings #gateway-menus #gateway-secondary-nav a {
      background-color: inherit; }

#news-event-results {
  padding-top: 1.25rem; }
  #news-event-results .article-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; }
    #news-event-results .article-preview .article-top {
      display: flex;
      flex-direction: row;
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0; }
    #news-event-results .article-preview .article-date-wrap {
      font-weight: 700;
      padding: 0.625rem;
      display: inline-block;
      position: relative;
      z-index: 3;
      overflow: hidden; }
      #news-event-results .article-preview .article-date-wrap .article-date {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        z-index: -1;
        transform: skewX(-45deg); }
      #news-event-results .article-preview .article-date-wrap .article-date-text {
        padding-right: 2.5rem;
        color: #ffffff; }
    #news-event-results .article-preview a.h3 {
      color: #000000;
      margin-top: 0; }
      #news-event-results .article-preview a.h3:hover, #news-event-results .article-preview a.h3:focus {
        text-decoration: none;
        color: #007abf; }

/* #endregion - Category Page Styles */
/* #region : Events Page */
#event .header-text {
  padding-bottom: 0; }

#event .button {
  font-family: "ZonaPro-Bold", helvetica, arial, sans-serif; }
  #event .button::before {
    font-size: 18px !important; }

#event #event-content {
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    #event #event-content {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    #event #event-content {
      padding-left: 10%;
      padding-right: 10%; } }
  @media only screen and (min-width: 100rem) {
    #event #event-content {
      padding-left: 20%;
      padding-right: 20%; } }

#event #event-form {
  color: #000000 !important; }

#event .social-share {
  display: flex;
  align-items: center; }
  #event .social-share a {
    margin: 0; }

#event .article-footer {
  padding-top: 2.5rem;
  clear: both; }
  #event .article-footer span {
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif !important; }

@media only screen and (min-width: 36rem) {
  #event #event-content {
    margin-top: 2.5rem; } }

/* #endregion : Events Page */
/* #region : News Page */
#news-article #article-header, #event-article #article-header {
  margin-bottom: 1.25rem; }
  #news-article #article-header h1, #event-article #article-header h1 {
    font-size: 1.75rem; }
  #news-article #article-header .publish-date, #event-article #article-header .publish-date {
    background: linear-gradient(135deg, #BAE0F5 80%, #d0eaf8 80%);
    text-transform: uppercase;
    font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
    padding: 0.625rem; }
    #news-article #article-header .publish-date p, #event-article #article-header .publish-date p {
      padding: 0;
      margin: 0; }

#news-article #article-panel .intro, #event-article #article-panel .intro {
  font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
  font-size: 1.1rem; }

#news-article #article-panel .header-image, #event-article #article-panel .header-image {
  margin-bottom: 1.25rem; }

#news-article #article-panel .video, #event-article #article-panel .video {
  margin-bottom: 1.25rem; }

#news-article #article-panel .imgInsert, #event-article #article-panel .imgInsert {
  float: none !important; }

#news-article footer, #event-article footer {
  margin-top: 1.25rem; }
  #news-article footer .press, #event-article footer .press {
    margin-bottom: 1.25rem; }
    #news-article footer .press a, #event-article footer .press a {
      font-size: 1rem;
      max-width: 100%; }

@media only screen and (min-width: 36rem) {
  #news-article #article-header h1, #event-article #article-header h1 {
    font-size: 2rem; }
  #news-article footer .press a, #event-article footer .press a {
    max-width: 70%; } }

@media only screen and (min-width: 48rem) {
  #news-article #article-header h1, #event-article #article-header h1 {
    font-size: 2.25rem; }
  #news-article #article-header .publish-date, #event-article #article-header .publish-date {
    background: linear-gradient(135deg, #BAE0F5 80%, #d0eaf8 80%); }
  #news-article #article-panel .header-image, #event-article #article-panel .header-image {
    float: right;
    max-width: 50%;
    margin-left: 1.25rem; }
  #news-article footer, #event-article footer {
    display: flex;
    flex-direction: row; }
    #news-article footer .press, #event-article footer .press {
      flex: 1.5;
      margin-bottom: 0; }
      #news-article footer .press a, #event-article footer .press a {
        max-width: 100%; }
    #news-article footer .social-share, #event-article footer .social-share {
      flex: 1;
      text-align: right; } }

@media only screen and (min-width: 64rem) {
  #news-article #article-header h1, #event-article #article-header h1 {
    font-size: 2.5rem; }
  #news-article footer .press a, #event-article footer .press a {
    max-width: 80%; } }

@media only screen and (min-width: 100rem) {
  #news-article #article-header h1, #event-article #article-header h1 {
    font-size: 2.75rem; } }

/* #endregion: News Page */
/* #region : News/Events Carousel */
#news-page-header {
  margin: 0 1.25rem; }
  #news-page-header h1 {
    margin: 1.25rem 0; }
  @media only screen and (min-width: 36rem) {
    #news-page-header {
      margin: 0 7.5%; } }
  @media only screen and (min-width: 64rem) {
    #news-page-header {
      margin: 0 15%; } }
  @media only screen and (min-width: 100rem) {
    #news-page-header {
      margin: 0 20%; } }

#newsevents-header-slider {
  margin: 0 1.25rem;
  margin-bottom: 2.5rem; }
  #newsevents-header-slider .slick-prev, #newsevents-header-slider .slick-next {
    display: none; }
  #newsevents-header-slider .carousel-item {
    margin-top: 1.25rem; }
    #newsevents-header-slider .carousel-item a {
      color: #000000; }
      #newsevents-header-slider .carousel-item a:hover, #newsevents-header-slider .carousel-item a:focus {
        text-decoration: none;
        color: #007abf; }
    #newsevents-header-slider .carousel-item h2 {
      margin: 0;
      margin-top: 1.25rem; }
    #newsevents-header-slider .carousel-item .panel-image {
      height: 350px; }
  @media only screen and (min-width: 36rem) {
    #newsevents-header-slider {
      margin-left: 5%;
      margin-right: 5%; }
      #newsevents-header-slider .carousel-item {
        margin: 0; }
        #newsevents-header-slider .carousel-item h2 {
          margin-top: 0; }
      #newsevents-header-slider .carousel-img {
        display: flex;
        flex-direction: column;
        justify-content: center; }
      #newsevents-header-slider .carousel-text {
        padding-right: 2.5rem;
        box-sizing: border-box; }
        #newsevents-header-slider .carousel-text h1 {
          margin: 0;
          margin-bottom: 1.25rem; }
        #newsevents-header-slider .carousel-text .date {
          padding: 0.625rem 0; }
        #newsevents-header-slider .carousel-text .intro {
          padding-bottom: 1.25rem; }
        #newsevents-header-slider .carousel-text p {
          margin: 0;
          padding: 0; }
      #newsevents-header-slider .panel-image {
        height: 400px; }
      #newsevents-header-slider .slick-prev, #newsevents-header-slider .slick-next {
        display: block; }
        #newsevents-header-slider .slick-prev::before, #newsevents-header-slider .slick-next::before {
          font-family: "Font Awesome 5 Free";
          font-size: 28px;
          font-weight: bold;
          line-height: 1;
          color: #712177;
          opacity: 1;
          -webkit-font-smoothing: antialiased; }
      #newsevents-header-slider ul.slick-dots {
        bottom: -1.875rem; }
      #newsevents-header-slider .slick-next {
        margin-right: -0.625rem; }
        #newsevents-header-slider .slick-next::before {
          content: "\f061"; }
      #newsevents-header-slider .slick-prev {
        margin-left: -0.625rem; }
        #newsevents-header-slider .slick-prev::before {
          content: "\f060"; } }
  @media only screen and (min-width: 64rem) {
    #newsevents-header-slider {
      margin-left: 15%;
      margin-right: 15%; }
      #newsevents-header-slider .slick-prev {
        margin-left: -2.5rem; }
      #newsevents-header-slider .slick-next {
        margin-right: -2.5rem; } }
  @media only screen and (min-width: 100rem) {
    #newsevents-header-slider {
      margin-left: 20%;
      margin-right: 20%; } }

/* #endregion: News/Events Carousel */
/* #region : Research Topic Styles */
#research-header {
  /* #region : Mobile Styles */
  /* #endregion : Mobile Styles */
  /* #region - Tablet Up Styles */
  /* #endregion  - Tablet up styles */
  /* #region - Desktop up styles */
  /* #endregion : Desktop Up */
  /* #region : Large Desktop Up */
  /* #endregion : Large Desktop Up */ }
  #research-header .research-header-panel {
    position: relative;
    /* Wraps the Title & Intro text together for positioning */ }
    #research-header .research-header-panel::after {
      z-index: 0; }
    #research-header .research-header-panel .header-image {
      height: 300px; }
    #research-header .research-header-panel .text-block {
      width: 100%;
      box-sizing: border-box;
      z-index: 2; }
      #research-header .research-header-panel .text-block .title {
        background: #ffffff;
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        top: 0;
        left: 0;
        z-index: 2;
        padding: 0.625rem 1.25rem; }
        #research-header .research-header-panel .text-block .title h1 {
          margin: 0;
          padding: 1.25rem 0; }
      #research-header .research-header-panel .text-block .intro {
        background-color: #712177;
        color: #ffffff;
        z-index: 2;
        position: relative;
        font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }
        #research-header .research-header-panel .text-block .intro p {
          margin: 0;
          padding: 0.625rem 1.25rem; }
    #research-header .research-header-panel .panel-bottom .study-options {
      background: #57d4fa;
      margin-bottom: 1.25rem; }
      #research-header .research-header-panel .panel-bottom .study-options .col {
        z-index: 2;
        padding: 0.625rem 1.25rem;
        position: relative; }
    #research-header .research-header-panel h5 {
      color: #000000; }
  #research-header #school-name {
    text-transform: uppercase;
    font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif;
    background: #BAE0F5;
    padding: 0.625rem 1.25rem; }
    #research-header #school-name .fcclear {
      display: none; }
    #research-header #school-name .secondary-school-names {
      text-transform: initial; }
      #research-header #school-name .secondary-school-names a {
        color: #006B99;
        margin: 0;
        padding: 0; }
    #research-header #school-name a {
      color: #000000;
      display: block; }
      #research-header #school-name a::before {
        content: "\f061";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: #712177;
        margin-right: 10px; }
      #research-header #school-name a:hover, #research-header #school-name a:focus {
        color: #006B99; }
  @media only screen and (min-width: 36rem) {
    #research-header #school-name {
      padding: 0.625rem 0;
      padding-left: 3.125rem;
      background: linear-gradient(135deg, #BAE0F5 85%, transparent 85%); }
      #research-header #school-name a {
        max-width: 75%; }
    #research-header .research-header-panel .text-block .title {
      background: linear-gradient(135deg, #ffffff 90%, transparent 90%);
      padding: 0; }
      #research-header .research-header-panel .text-block .title h1 {
        max-width: 80%;
        padding-left: 3.125rem; }
    #research-header .research-header-panel .panel-bottom .study-options .col {
      padding-top: 0.625rem;
      padding-bottom: 2.5rem; }
      #research-header .research-header-panel .panel-bottom .study-options .col:first-child {
        padding-left: 5%; }
      #research-header .research-header-panel .panel-bottom .study-options .col:last-child {
        padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    #research-header #school-name {
      background: linear-gradient(135deg, #BAE0F5 75%, transparent 75%); }
      #research-header #school-name a {
        max-width: 65%; }
    #research-header .research-header-panel {
      position: relative;
      height: 600px;
      margin-bottom: 2.5rem; }
      #research-header .research-header-panel .text-block {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%; }
        #research-header .research-header-panel .text-block .title {
          background: linear-gradient(135deg, #ffffff 75%, transparent 75%);
          position: static; }
          #research-header .research-header-panel .text-block .title h1 {
            padding-left: 10%;
            max-width: 60%;
            padding-top: 1.25rem;
            padding-bottom: 1.25rem; }
        #research-header .research-header-panel .text-block .intro {
          background: linear-gradient(135deg, rgba(113, 33, 119, 0.8) 55%, transparent 55%);
          width: 100%;
          padding-top: 1.25rem;
          padding-bottom: 1.25rem;
          position: static; }
          #research-header .research-header-panel .text-block .intro p {
            width: 45%;
            padding-left: 10%;
            box-sizing: border-box;
            margin: 0;
            color: #ffffff; }
      #research-header .research-header-panel .header-image {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0; }
      #research-header .research-header-panel .panel-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0;
        padding-top: 2.5rem;
        background: transparent; }
        #research-header .research-header-panel .panel-bottom::after {
          background: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.4) 45%);
          content: "";
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          bottom: 0; }
        #research-header .research-header-panel .panel-bottom .study-options {
          background-color: #57d4fa;
          padding: 0;
          margin: 0; }
          #research-header .research-header-panel .panel-bottom .study-options .col:first-child {
            padding-left: 10%; }
          #research-header .research-header-panel .panel-bottom .study-options .col:last-child {
            padding-right: 10%; } }
  @media only screen and (min-width: 100rem) {
    #research-header #school-name {
      background: linear-gradient(135deg, #BAE0F5 55%, transparent 55%); } }

/* #endregion : Research Topic Styles */
/* #region : Research Project Styles */
#research-project #research-header .research-header-panel {
  margin: 0; }
  #research-project #research-header .research-header-panel .text-block .title {
    position: relative;
    z-index: 2; }

#research-project #research-header .title {
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 36rem) {
    #research-project #research-header .title {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    #research-project #research-header .title {
      padding-left: 10%;
      padding-right: 10%; } }
  #research-project #research-header .title h1 {
    margin: 1.25rem; }

#research-project #research-header .study-options {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 1.25rem; }
  @media only screen and (min-width: 36rem) {
    #research-project #research-header .study-options {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    #research-project #research-header .study-options {
      padding-left: 10%;
      padding-right: 10%; } }
  #research-project #research-header .study-options h5 {
    color: #000000;
    margin: 0; }

#research-project #research-header .research-details-banner {
  font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  background-color: #BAE0F5; }
  @media only screen and (min-width: 36rem) {
    #research-project #research-header .research-details-banner {
      padding-left: 5%;
      padding-right: 5%; } }
  @media only screen and (min-width: 64rem) {
    #research-project #research-header .research-details-banner {
      padding-left: 10%;
      padding-right: 10%; } }

#research-project #research-header .panel-bottom {
  background-color: #57d4fa; }

#research-project .video {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin: 0 auto;
  margin-top: 1.25rem; }

@media only screen and (min-width: 64rem) {
  #research-project .research-header-panel .text-block {
    width: 100%;
    height: 100%; }
    #research-project .research-header-panel .text-block .intro {
      position: absolute;
      bottom: 0;
      right: 0;
      background: linear-gradient(135deg, transparent 40%, rgba(113, 33, 119, 0.8) 40%);
      padding: 1.25rem 0; }
      #research-project .research-header-panel .text-block .intro p {
        margin: 0;
        padding: 0;
        padding-left: 50%;
        padding-right: 10%;
        width: auto; }
  #research-project .study-options {
    padding-bottom: 2.5rem; }
  #research-project .video {
    margin-top: 2.5rem;
    width: 60%; } }

@media only screen and (min-width: 100rem) {
  #research-project .research-header-panel .text-block .intro {
    background: linear-gradient(135deg, transparent 50%, rgba(113, 33, 119, 0.8) 50%); }
    #research-project .research-header-panel .text-block .intro p {
      padding-left: 60%; }
  #research-project .video {
    width: 50%; } }

/* #endregion : Research Project Styles */
#scholarship #page-header-panel {
  margin-bottom: 0; }

#scholarship .schol-details {
  padding: 1.25rem 0; }

@media only screen and (min-width: 36rem) {
  #scholarship #country-list, #scholarship #scholarship-subjects {
    column-count: 2; } }

@media only screen and (min-width: 64rem) {
  #scholarship #country-list, #scholarship #scholarship-subjects {
    column-count: 3; } }

@media only screen and (min-width: 100rem) {
  #scholarship #country-list, #scholarship #scholarship-subjects {
    column-count: 4; } }

/* #region - Header Styles */
#school-department {
  /* Text formatting on mobile for image/video header is the same */ }
  #school-department .school-header {
    position: relative; }
  #school-department .header, #school-department .header-video {
    margin-bottom: 1.25rem; }
    #school-department .header h1, #school-department .header-video h1 {
      font-size: 1.675rem;
      margin: 0.625rem 0; }
    #school-department .header .category, #school-department .header-video .category {
      font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
      font-size: 1.2rem;
      margin-bottom: 0; }
    #school-department .header .title-desktop, #school-department .header-video .title-desktop {
      display: none; }
    #school-department .header .header-text, #school-department .header-video .header-text {
      padding: 0 1.25rem; }
      #school-department .header .header-text .school-cta a, #school-department .header-video .header-text .school-cta a {
        color: #6B1868;
        font-size: 1.2rem;
        text-transform: uppercase;
        font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
        padding: 0;
        padding-left: 1.25rem;
        display: block;
        width: 80%;
        font-family: "ZonaPro-ExtraBold", helvetica, arial, sans-serif; }
        #school-department .header .header-text .school-cta a::before, #school-department .header-video .header-text .school-cta a::before {
          color: #009FEE;
          margin-right: 0.625rem;
          display: inline-block;
          height: 100%;
          width: 20px;
          content: "\f061";
          font-weight: 900;
          font-size: 1.5rem;
          margin-left: -1.25rem;
          font-family: "Font Awesome 5 Free"; }
  @media only screen and (min-width: 48rem) {
    #school-department .angle-overlays {
      position: absolute;
      z-index: -1; }
      #school-department .angle-overlays .header-image {
        height: 100%; }
    #school-department .header {
      height: auto;
      padding-bottom: 5rem;
      position: relative; }
      #school-department .header .header-text {
        position: static;
        padding: 0; }
        #school-department .header .header-text .text-inner {
          background: linear-gradient(135deg, rgba(107, 24, 104, 0.8) 70%, transparent 70%);
          margin-bottom: 5rem; }
        #school-department .header .header-text .title {
          background: linear-gradient(135deg, white 85%, transparent 85%);
          padding-left: 5%;
          padding-top: 1.25rem;
          padding-bottom: 1.25rem; }
          #school-department .header .header-text .title h1 {
            margin: 0;
            width: 75%; }
          #school-department .header .header-text .title .category {
            margin: 0; }
        #school-department .header .header-text .intro {
          padding-left: 5%;
          padding-top: 1.25rem;
          padding-bottom: 1.25rem;
          color: #ffffff;
          font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }
          #school-department .header .header-text .intro p {
            width: 60%;
            font-size: 18px;
            line-height: 24px; }
        #school-department .header .header-text .school-cta {
          background: linear-gradient(135deg, rgba(87, 16, 70, 0.8) 55%, transparent 55%);
          margin-top: 2.5rem;
          padding-left: 10%; }
          #school-department .header .header-text .school-cta a {
            color: white;
            max-width: 40%; }
            #school-department .header .header-text .school-cta a::before {
              margin-left: -1.875rem; } }
  @media only screen and (min-width: 64rem) {
    #school-department .header-text h1 {
      font-size: 3.5rem; }
    #school-department .header-video {
      background: linear-gradient(135deg, #712177 60%, transparent 60%), linear-gradient(to top, white 30%, transparent 30%); }
      #school-department .header-video .video-block, #school-department .header-video .header-text {
        flex: 1; }
      #school-department .header-video .title-desktop {
        display: block;
        background: white;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 2.5rem; } }
    @media only screen and (min-width: 64rem) and (min-width: 36rem) {
      #school-department .header-video .title-desktop {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) and (min-width: 64rem) {
      #school-department .header-video .title-desktop {
        padding-left: 10%;
        padding-right: 10%; } }
  @media only screen and (min-width: 64rem) {
        #school-department .header-video .title-desktop h1 {
          font-size: 3.5rem; }
      #school-department .header-video .header-text {
        margin-right: 2.5rem;
        color: white;
        max-width: 40%; }
        #school-department .header-video .header-text .title {
          display: none; }
        #school-department .header-video .header-text .school-cta {
          background: linear-gradient(135deg, rgba(0, 122, 191, 0.8) 65%, transparent 65%);
          margin-top: 2.5rem;
          max-width: 90%; }
          #school-department .header-video .header-text .school-cta a {
            color: white;
            max-width: 60%;
            padding-left: 2.5rem; }
            #school-department .header-video .header-text .school-cta a::before {
              color: #6B1868;
              margin-left: -1.875rem; }
          #school-department .header-video .header-text .school-cta:hover, #school-department .header-video .header-text .school-cta:focus {
            background: linear-gradient(135deg, rgba(87, 212, 250, 0.8) 65%, transparent 65%); }
            #school-department .header-video .header-text .school-cta:hover a, #school-department .header-video .header-text .school-cta:focus a {
              text-decoration: none;
              color: black; }
      #school-department .header-video .video-content-wrap {
        display: flex;
        flex-direction: row-reverse;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem; } }
    @media only screen and (min-width: 64rem) and (min-width: 36rem) {
      #school-department .header-video .video-content-wrap {
        padding-left: 5%;
        padding-right: 5%; } }
    @media only screen and (min-width: 64rem) and (min-width: 64rem) {
      #school-department .header-video .video-content-wrap {
        padding-left: 10%;
        padding-right: 10%; } }
  @media only screen and (min-width: 64rem) {
    #school-department .header .header-text .text-inner {
      background: linear-gradient(135deg, rgba(107, 24, 104, 0.8) 60%, transparent 60%);
      margin-bottom: 7.5rem; }
    #school-department .header .header-text .title {
      background: linear-gradient(135deg, white 70%, transparent 70%);
      padding-left: 10%; }
      #school-department .header .header-text .title h1 {
        width: 65%; }
    #school-department .header .header-text .intro {
      padding-left: 10%; }
      #school-department .header .header-text .intro p {
        width: 40%; }
    #school-department .header .header-text .school-cta {
      background: linear-gradient(135deg, rgba(87, 16, 70, 0.8) 45%, transparent 45%); }
      #school-department .header .header-text .school-cta a {
        max-width: 35%; }
        #school-department .header .header-text .school-cta a::before {
          margin-left: -1.875rem; } }
  @media only screen and (min-width: 100rem) {
    #school-department .header-video .header-text .school-cta {
      max-width: 75%; }
    #school-department .header .header-text .text-inner {
      background: linear-gradient(135deg, rgba(107, 24, 104, 0.8) 50%, transparent 50%); }
    #school-department .header .header-text .title {
      background: linear-gradient(135deg, white 60%, transparent 60%); }
      #school-department .header .header-text .title h1 {
        width: 55%; }
    #school-department .header .header-text .intro p {
      width: 30%; }
    #school-department .header .header-text .school-cta {
      background: linear-gradient(135deg, rgba(87, 16, 70, 0.8) 35%, transparent 35%); }
      #school-department .header .header-text .school-cta a {
        max-width: 25%; } }

/* #endregion */
/* #region - Panel/Tab Styles */
@media only screen and (min-width: 36rem) {
  #school-department-information {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    /* Pin 'find out more button' to the bottom of the card in facilites tab */ }
    #school-department-information #facilities .flex-grid .grid-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between; } }

/* #endregion */
/* This is for the FlexiContent search results pages 
    News
    Events
    Research Projects
    Research Topics
*/
#research-results .results-page-header {
  padding: 0; }
  #research-results .results-page-header .search-results-header {
    padding: 0; }

#research-results .fcfilter_form_outer {
  max-width: none; }

#research-results #search-form {
  padding-top: 1.25rem;
  padding-bottom: 2.5rem; }
  #research-results #search-form input {
    border-bottom: 3px solid #712177;
    color: #712177; }
    #research-results #search-form input::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #712177 !important;
      opacity: 1; }
    #research-results #search-form input::-moz-placeholder {
      /* Firefox 19+ */
      color: #712177 !important;
      opacity: 1; }
    #research-results #search-form input:-ms-input-placeholder {
      /* IE 10+ */
      color: #712177 !important;
      opacity: 1; }
    #research-results #search-form input:-moz-placeholder {
      /* Firefox 18- */
      color: #712177 !important;
      opacity: 1; }
  #research-results #search-form button.search-button {
    color: #712177; }
  #research-results #search-form button.search-reset {
    background: white;
    color: black;
    border: 2px solid #712177;
    text-align: center; }
    #research-results #search-form button.search-reset i {
      color: black; }
    #research-results #search-form button.search-reset:hover, #research-results #search-form button.search-reset:focus {
      background: #712177;
      color: white; }
      #research-results #search-form button.search-reset:hover i, #research-results #search-form button.search-reset:focus i {
        color: white; }
  #research-results #search-form .fc_filter_text_search {
    padding: 0;
    width: 100%; }

#research-results .content-filters .fc_filter_line {
  padding: 0; }

#research-results .results-wrap .result-item {
  background-color: #B077B8;
  padding: 5px;
  margin-bottom: 1.25rem; }
  #research-results .results-wrap .result-item a {
    display: flex;
    flex-direction: column;
    height: 100%; }
  #research-results .results-wrap .result-item:hover, #research-results .results-wrap .result-item:focus {
    background-color: #712177; }
    #research-results .results-wrap .result-item:hover a, #research-results .results-wrap .result-item:focus a {
      text-decoration: none; }
    #research-results .results-wrap .result-item:hover .result-link, #research-results .results-wrap .result-item:focus .result-link {
      color: white; }
  #research-results .results-wrap .result-item .result-title {
    margin-top: auto;
    background-color: #ffffff;
    flex: 0 0 1;
    padding: 1.25rem;
    padding-bottom: 5rem;
    height: 100%; }
    #research-results .results-wrap .result-item .result-title h2 {
      font-size: 1.25rem;
      margin: 0;
      color: #000000;
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif; }
  #research-results .results-wrap .result-item .result-link {
    flex: 0 0 1;
    background: linear-gradient(135deg, transparent 70%, rgba(255, 255, 255, 0.1) 70%);
    color: #000000;
    display: flex;
    align-items: center;
    margin-top: auto;
    font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
    min-height: 110px; }
    #research-results .results-wrap .result-item .result-link p {
      flex: 3;
      padding-left: 1.25rem; }
    #research-results .results-wrap .result-item .result-link i {
      flex: 1;
      text-align: right;
      padding-right: 1.25rem; }

@media only screen and (min-width: 36rem) {
  #research-results .results-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
    #research-results .results-wrap .result-item {
      flex: 0 0 48%;
      margin-right: 4%;
      max-width: 48%; }
      #research-results .results-wrap .result-item:nth-child(2n+2) {
        margin-right: 0; } }

@media only screen and (min-width: 64rem) {
  #research-results .results-wrap .result-item {
    flex: 0 0 32%;
    margin-right: 2%;
    max-width: 32%; }
    #research-results .results-wrap .result-item:nth-child(2n+2) {
      margin-right: 2%; }
    #research-results .results-wrap .result-item:nth-child(3n+3) {
      margin-right: 0; } }

@media only screen and (min-width: 100rem) {
  #research-results .results-wrap .result-item {
    flex: 0 0 23.5%;
    margin-right: 2%;
    max-width: 23.5%; }
    #research-results .results-wrap .result-item:nth-child(3n+3) {
      margin-right: 2%; }
    #research-results .results-wrap .result-item:nth-child(4n+4) {
      margin-right: 0; } }

#news-events-listings .content-search, #research-results .content-search {
  padding: 2.5rem 0; }
  #news-events-listings .content-search input, #news-events-listings .content-search select, #news-events-listings .content-search button, #research-results .content-search input, #research-results .content-search select, #research-results .content-search button {
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif; }
  #news-events-listings .content-search input, #research-results .content-search input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #000000;
    width: 100%;
    max-width: none;
    padding: 0.625rem 1.25rem;
    box-sizing: border-box;
    font-size: 1.2rem;
    color: #000000;
    margin-bottom: 0.625rem; }
    #news-events-listings .content-search input::-webkit-input-placeholder, #research-results .content-search input::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #000000 !important;
      opacity: 1; }
    #news-events-listings .content-search input::-moz-placeholder, #research-results .content-search input::-moz-placeholder {
      /* Firefox 19+ */
      color: #000000 !important;
      opacity: 1; }
    #news-events-listings .content-search input:-ms-input-placeholder, #research-results .content-search input:-ms-input-placeholder {
      /* IE 10+ */
      color: #000000 !important;
      opacity: 1; }
    #news-events-listings .content-search input:-moz-placeholder, #research-results .content-search input:-moz-placeholder {
      /* Firefox 18- */
      color: #000000 !important;
      opacity: 1; }
  #news-events-listings .content-search .text-search-wrap, #research-results .content-search .text-search-wrap {
    position: relative; }
    #news-events-listings .content-search .text-search-wrap button.search-button, #research-results .content-search .text-search-wrap button.search-button {
      position: absolute;
      right: 0;
      top: 25%;
      background: none;
      color: #000000;
      font-size: 1.2rem;
      border: none;
      cursor: pointer; }
  #news-events-listings .content-search .content-filters .fc_filter_line, #research-results .content-search .content-filters .fc_filter_line {
    margin-bottom: 1.25rem; }
    #news-events-listings .content-search .content-filters .fc_filter_line:last-child, #research-results .content-search .content-filters .fc_filter_line:last-child {
      margin-right: 0; }
    #news-events-listings .content-search .content-filters .fc_filter_line input, #news-events-listings .content-search .content-filters .fc_filter_line select, #news-events-listings .content-search .content-filters .fc_filter_line button, #research-results .content-search .content-filters .fc_filter_line input, #research-results .content-search .content-filters .fc_filter_line select, #research-results .content-search .content-filters .fc_filter_line button {
      display: block;
      width: 100%;
      border: none;
      padding: 0.625rem;
      padding-left: 0; }
    #news-events-listings .content-search .content-filters .fc_filter_line button, #research-results .content-search .content-filters .fc_filter_line button {
      background: linear-gradient(135deg, #712177 85%, transparent 85%);
      text-align: left;
      text-transform: uppercase;
      font-size: 15px;
      color: white;
      padding-left: 1.25rem; }
      #news-events-listings .content-search .content-filters .fc_filter_line button i, #research-results .content-search .content-filters .fc_filter_line button i {
        color: #BAE0F5;
        margin-left: 0.625rem; }
      #news-events-listings .content-search .content-filters .fc_filter_line button:hover, #news-events-listings .content-search .content-filters .fc_filter_line button:focus, #research-results .content-search .content-filters .fc_filter_line button:hover, #research-results .content-search .content-filters .fc_filter_line button:focus {
        background: linear-gradient(135deg, #007abf 85%, transparent 85%);
        color: white;
        cursor: pointer; }
        #news-events-listings .content-search .content-filters .fc_filter_line button:hover i, #news-events-listings .content-search .content-filters .fc_filter_line button:focus i, #research-results .content-search .content-filters .fc_filter_line button:hover i, #research-results .content-search .content-filters .fc_filter_line button:focus i {
          color: white; }
  #news-events-listings .content-search fieldset, #research-results .content-search fieldset {
    border: none;
    padding: 0; }
  @media only screen and (min-width: 48rem) {
    #news-events-listings .content-search .content-filters .fc_filter_line, #research-results .content-search .content-filters .fc_filter_line {
      margin-right: 1.25rem;
      margin-bottom: 0; } }

.sitemap.content ul.jmap_filetree {
  margin: 0;
  padding: 0; }
  .sitemap.content ul.jmap_filetree li {
    list-style: initial;
    padding: 0;
    margin: 0; }
    .sitemap.content ul.jmap_filetree li:first-child {
      list-style: none; }
    .sitemap.content ul.jmap_filetree li::before {
      content: ""; }
    .sitemap.content ul.jmap_filetree li span {
      font-size: 2rem;
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
      margin: 1.25rem 0;
      display: block; }
    .sitemap.content ul.jmap_filetree li > ul {
      margin-bottom: 0; }
      .sitemap.content ul.jmap_filetree li > ul li::before {
        content: ""; }

#social-links-page {
  background: linear-gradient(to bottom, #712177 5px, #ffffff 5px); }
  #social-links-page #page-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center; }
  #social-links-page #social-links-header {
    padding: 2.5rem 0; }
  #social-links-page h1 {
    font-size: 1.5rem; }
  #social-links-page p.description {
    max-width: 400px;
    margin: 1.25rem auto; }
  #social-links-page hr {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    border-color: #712177; }
  #social-links-page #campaign-links {
    margin-bottom: 1.25rem; }
  #social-links-page #social-links-footer {
    margin-top: auto; }
    #social-links-page #social-links-footer ul {
      margin: 0;
      padding: 0; }
      #social-links-page #social-links-footer ul li {
        list-style: none;
        display: inline-block;
        margin: 1.25rem 0.625rem;
        margin-top: 0; }
        #social-links-page #social-links-footer ul li a {
          color: #712177; }
          #social-links-page #social-links-footer ul li a:hover, #social-links-page #social-links-footer ul li a:focus {
            color: #007abf; }

.theme--rgview {
  /* Underline h3 on hover within block level links */
  /* Image gallery */
  /* Video article */
  /* Social sharing */
  /* Horizontal menu of categories at start of page */
  /* RGView site header */
  /* Fixes for basepages moved into RGView categories 
    This whole scss file scoped to within the .theme--rgview class
*/
  /* 
    Hide related items on basepages that have been moved 
    into an RGView category and look too narrow because of the sidebar 
*/
  /* 
    Fix the width of the one instance of a download box moved over from a community story 
    /news/community-stories/creating-an-office-away-from-the-office
*/ }
  .theme--rgview #skip-nav {
    display: block; }
    .theme--rgview #skip-nav:active, .theme--rgview #skip-nav:focus {
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto; }
  .theme--rgview img {
    display: block;
    max-width: 100%;
    height: auto; }
  .theme--rgview .aspect-ratio {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    margin-top: 0;
    width: 100%; }
    .theme--rgview .aspect-ratio.ratio-16-9 {
      padding-top: 56.25%; }
    .theme--rgview .aspect-ratio img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: auto;
      transform: translate(-50%, -50%); }
  .theme--rgview blockquote {
    margin: 2.5rem 0 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    @media only screen and (min-width: 64rem) {
      .theme--rgview blockquote {
        margin-left: 8rem;
        margin-right: 4rem; } }
    .theme--rgview blockquote::before {
      position: absolute;
      margin-left: -3rem;
      font-family: "Font Awesome 5 Free";
      content: "\f10d";
      font-weight: 900;
      font-style: normal;
      color: #712177;
      font-size: 2.2rem; }
      @media only screen and (min-width: 64rem) {
        .theme--rgview blockquote::before {
          font-size: 3rem;
          margin-left: -5rem; } }
  @media only screen and (min-width: 64rem) {
    .theme--rgview h1 {
      font-size: 3rem; } }
  .theme--rgview h1, .theme--rgview h2 {
    line-height: 1.1em;
    margin-bottom: 0.625rem; }
  .theme--rgview a:hover h3, .theme--rgview a:hover span {
    text-decoration: underline; }
  .theme--rgview .rgv-image-wrap {
    position: relative;
    margin-bottom: 0.3125rem;
    /* Pin the heading to the base of it's image */ }
    .theme--rgview .rgv-image-wrap h3 {
      text-transform: none; }
    .theme--rgview .rgv-image-wrap .rgv-pinned-heading {
      position: absolute;
      bottom: 0;
      z-index: 2;
      background: rgba(113, 33, 119, 0.85);
      width: 100%;
      margin: 0;
      color: white;
      padding: 0.3125rem; }
      @media only screen and (min-width: 48rem) {
        .theme--rgview .rgv-image-wrap .rgv-pinned-heading {
          padding: 0.3125rem 0.625rem; } }
      .theme--rgview .rgv-image-wrap .rgv-pinned-heading a {
        color: white; }
  .theme--rgview .rgview-home-page {
    /* Featured items */
    /* Tabbed component on RGView homepage */ }
    .theme--rgview .rgview-home-page h3, .theme--rgview .rgview-home-page .h3 {
      font-size: 1.3rem; }
      @media only screen and (min-width: 64rem) {
        .theme--rgview .rgview-home-page h3, .theme--rgview .rgview-home-page .h3 {
          font-size: 1.5rem; } }
    .theme--rgview .rgview-home-page #rgv-featured-items {
      margin-top: 0.625rem;
      margin-bottom: 0.625rem;
      /* First item takes 2/3s width */
      /* Smaller headings and height for right hand featured items */
      /* position h3 headings at the bottom of each card with purple background */ }
      .theme--rgview .rgview-home-page #rgv-featured-items h3 {
        font-size: 1.2rem; }
        @media only screen and (min-width: 48rem) {
          .theme--rgview .rgview-home-page #rgv-featured-items h3 {
            font-size: 1.5rem; } }
      .theme--rgview .rgview-home-page #rgv-featured-items > div:first-child {
        grid-column: 1 / 3; }
      .theme--rgview .rgview-home-page #rgv-featured-items > div:nth-child(2) .grid-image,
      .theme--rgview .rgview-home-page #rgv-featured-items > div:nth-child(3) .grid-image {
        margin-bottom: 0.625rem; }
      @media only screen and (min-width: 48rem) {
        .theme--rgview .rgview-home-page #rgv-featured-items > div:nth-child(2) h3,
        .theme--rgview .rgview-home-page #rgv-featured-items > div:nth-child(3) h3 {
          font-size: 1.2rem; } }
      .theme--rgview .rgview-home-page #rgv-featured-items .content-card {
        position: relative; }
    .theme--rgview .rgview-home-page #rgv-latest-items a:hover {
      color: #712177; }
    .theme--rgview .rgview-home-page #rgv-latest-items #news-event-results {
      padding-top: 0; }
    .theme--rgview .rgview-home-page #rgv-latest-items .preview-text {
      padding: 1rem 0.625rem; }
      .theme--rgview .rgview-home-page #rgv-latest-items .preview-text h3 {
        margin: 0;
        text-transform: none;
        text-decoration: none; }
    .theme--rgview .rgview-home-page #rgv-latest-items h2 {
      margin-top: 0;
      margin-bottom: 0.625rem; }
    .theme--rgview .rgview-home-page #rgv-latest-items .article-preview {
      margin-bottom: 0; }
    .theme--rgview .rgview-home-page .rgview-tabs {
      margin-top: 1.25rem; }
      .theme--rgview .rgview-home-page .rgview-tabs .r-tabs-nav {
        margin: 0 0 1.25rem 0; }
        .theme--rgview .rgview-home-page .rgview-tabs .r-tabs-nav a {
          text-transform: none; }
        .theme--rgview .rgview-home-page .rgview-tabs .r-tabs-nav .r-tabs-state-active {
          background: #571046 !important; }
          .theme--rgview .rgview-home-page .rgview-tabs .r-tabs-nav .r-tabs-state-active a {
            text-decoration: underline;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-color: white;
            text-decoration-thickness: 2px; }
      .theme--rgview .rgview-home-page .rgview-tabs .r-tabs {
        flex: 1 0; }
        .theme--rgview .rgview-home-page .rgview-tabs .r-tabs .r-tabs-accordion-title {
          background: #712177; }
      @media only screen and (min-width: 64rem) {
        .theme--rgview .rgview-home-page .rgview-tabs .r-tabs-anchor {
          font-size: 1.1rem; } }
      .theme--rgview .rgview-home-page .rgview-tabs .tab {
        /* Break into 4 and 3 columns earlier */ }
        @media only screen and (min-width: 48rem) {
          .theme--rgview .rgview-home-page .rgview-tabs .tab .flex-grid.grid-4 {
            grid-template-columns: repeat(3, 1fr); } }
        @media only screen and (min-width: 64rem) {
          .theme--rgview .rgview-home-page .rgview-tabs .tab .flex-grid.grid-4 {
            grid-template-columns: repeat(4, 1fr); } }
        .theme--rgview .rgview-home-page .rgview-tabs .tab .content-card {
          padding: 0.625rem; }
          @media only screen and (min-width: 64rem) {
            .theme--rgview .rgview-home-page .rgview-tabs .tab .content-card {
              padding: 0; } }
        .theme--rgview .rgview-home-page .rgview-tabs .tab .article-image {
          position: relative; }
          .theme--rgview .rgview-home-page .rgview-tabs .tab .article-image .category-link {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0.3125rem 0.625rem;
            background: rgba(113, 33, 119, 0.85);
            color: #fff; }
        .theme--rgview .rgview-home-page .rgview-tabs .tab h3 {
          text-transform: none; }
          .theme--rgview .rgview-home-page .rgview-tabs .tab h3 a {
            color: #712177; }
      .theme--rgview .rgview-home-page .rgview-tabs .r-tabs-panel h3 {
        padding: 0 0.625rem;
        margin: 0.625rem 0; }
      @media only screen and (min-width: 48rem) {
        .theme--rgview .rgview-home-page .rgview-tabs .r-tabs-panel h3 {
          padding: 0;
          margin: 0.625rem 0; } }
      .theme--rgview .rgview-home-page .rgview-tabs .r-tabs .r-tabs-tab {
        flex: 1 0 auto; }
      @media only screen and (min-width: 48rem) {
        .theme--rgview .rgview-home-page .rgview-tabs .r-tabs-panel {
          border: none; }
        .theme--rgview .rgview-home-page .rgview-tabs .r-tabs .r-tabs-tab {
          background: #712177;
          margin-right: 0;
          padding-top: 1.25rem;
          padding-bottom: 1.25rem; } }
      @media only screen and (min-width: 64rem) {
        .theme--rgview .rgview-home-page .rgview-tabs .r-tabs-anchor {
          width: 100%; } }
  .theme--rgview .rgv-category-item {
    margin-bottom: 2.5rem; }
    .theme--rgview .rgv-category-item .rgv-image-wrap h3.rgv-pinned-heading {
      padding: 0.625rem;
      font-size: 1.3rem; }
    .theme--rgview .rgv-category-item .rgv-category-item-date {
      padding-top: 0.625rem; }
    .theme--rgview .rgv-category-item p:first-of-type {
      margin-top: 0; }
  .theme--rgview #rgv-article .rgv-pinned-heading {
    text-align: right;
    font-style: italic; }
  .theme--rgview #rgv-article p:first-of-type {
    font-weight: bold; }
  .theme--rgview .rgv-gallery-image {
    margin-top: 1.25rem; }
  .theme--rgview .rgview-video-page .rgv-featured-video {
    margin: 1.25rem 0 0.625rem 0; }
  .theme--rgview .rgview-video-page .fc-fieldgrp-value-box {
    margin-top: 1.25rem;
    margin-bottom: 0.3125rem; }
  .theme--rgview .field_rgv-video-caption .label {
    display: none; }
  .theme--rgview .rgv-caption,
  .theme--rgview .field_rgv-video-caption .value {
    margin-top: 0.3125rem;
    line-height: 1.4em; }
  .theme--rgview .field_rgv-video .label, .theme--rgview .field_rgv-video h3 {
    display: none; }
  .theme--rgview .social-share {
    clear: both;
    /* Don't want to be inline with any droppics */
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
    font-size: 1.2rem;
    margin-top: 1.25rem;
    /* Want the icons to be inlinbe with the 'Share this story on social' text */ }
    @media only screen and (min-width: 36rem) {
      .theme--rgview .social-share > span {
        float: left;
        margin-right: 0.625rem; } }
    .theme--rgview .social-share .addthis_inline_share_toolbox {
      clear: none !important; }
  .theme--rgview .sidebar-page {
    /* Sidebar headings */ }
    .theme--rgview .sidebar-page h1 {
      margin-bottom: 0.3125rem; }
    .theme--rgview .sidebar-page #sidebar h2 {
      color: #555;
      text-transform: uppercase;
      border-bottom: 2px solid #712177;
      margin-bottom: 1.25rem; }
    @media only screen and (min-width: 48rem) {
      .theme--rgview .sidebar-page {
        /* Align the headings in the main content and sidebar */ }
        .theme--rgview .sidebar-page #sidebar {
          padding-left: 2.5rem; }
        .theme--rgview .sidebar-page > .flex-wrap .col {
          padding-top: 1.25rem;
          /* only if they are the first thing in the column */ }
          .theme--rgview .sidebar-page > .flex-wrap .col h1:first-child, .theme--rgview .sidebar-page > .flex-wrap .col h2:first-child {
            margin-top: 0; } }
    .theme--rgview .sidebar-page .rgview-our-picks > a {
      display: block;
      position: relative;
      margin-bottom: 1.25rem; }
    .theme--rgview .sidebar-page .rgview-sidebar-category-menu {
      list-style-type: none;
      padding-left: 0; }
      .theme--rgview .sidebar-page .rgview-sidebar-category-menu a {
        color: #000000; }
  .theme--rgview #rgview-footer {
    position: relative;
    padding: 1.25rem 0;
    margin-top: 1.25rem;
    margin-bottom: -2.5rem; }
    .theme--rgview #rgview-footer h2 {
      color: #712177;
      text-transform: uppercase;
      margin-bottom: 1.25rem; }
    .theme--rgview #rgview-footer .content .flex-grid > div:nth-child(2) {
      grid-column: 2 / 4; }
    .theme--rgview #rgview-footer p {
      font-size: 1.2rem;
      line-height: 1.6em; }
    .theme--rgview #rgview-footer .rgv-footer-cta p:first-of-type {
      margin-top: 0; }
    .theme--rgview #rgview-footer .rgv-video-thumbs .rgv-video-thumb {
      display: flex;
      margin-bottom: 1.25rem;
      color: #712177;
      font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
      font-size: 1rem;
      line-height: 1.2em; }
      .theme--rgview #rgview-footer .rgv-video-thumbs .rgv-video-thumb > div:first-child {
        width: 46%;
        margin-right: 4%; }
        .theme--rgview #rgview-footer .rgv-video-thumbs .rgv-video-thumb > div:first-child img {
          width: 100%; }
      .theme--rgview #rgview-footer .rgv-video-thumbs .rgv-video-thumb > div:last-child {
        width: 50%; }
  .theme--rgview .rgview-top-category-menu {
    list-style-type: none;
    padding-left: 0;
    margin: 0.625rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    @media only screen and (min-width: 64rem) {
      .theme--rgview .rgview-top-category-menu {
        justify-content: space-between; } }
    .theme--rgview .rgview-top-category-menu li {
      display: inline-block;
      width: 100%;
      text-align: center;
      padding: 0 0.15625rem; }
      .theme--rgview .rgview-top-category-menu li.selected {
        text-decoration: underline; }
      .theme--rgview .rgview-top-category-menu li:nth-child(even) {
        display: none; }
      @media only screen and (min-width: 48rem) {
        .theme--rgview .rgview-top-category-menu li {
          width: auto; }
          .theme--rgview .rgview-top-category-menu li:nth-child(even) {
            display: inline-block; } }
      .theme--rgview .rgview-top-category-menu li a {
        display: inline;
        font-weight: 400;
        font-size: 1rem;
        font-family: "ZonaPro-Bold", helvetica, arial, sans-serif;
        text-transform: uppercase;
        color: #000000;
        white-space: nowrap; }
  .theme--rgview #site-header.rgv-header {
    border-bottom: none; }
    @media only screen and (min-width: 48rem) {
      .theme--rgview #site-header.rgv-header::before {
        background: rgba(255, 255, 255, 0.15); } }
    .theme--rgview #site-header.rgv-header .rgv-heading-container {
      display: flex;
      justify-content: space-between;
      height: 100%;
      position: relative;
      z-index: 1;
      padding: 0 0.625rem; }
      @media only screen and (min-width: 25rem) {
        .theme--rgview #site-header.rgv-header .rgv-heading-container {
          padding: 0 1.25rem; } }
      .theme--rgview #site-header.rgv-header .rgv-heading-container #toggle-icon,
      .theme--rgview #site-header.rgv-header .rgv-heading-container .contact-link a {
        text-transform: uppercase; }
      .theme--rgview #site-header.rgv-header .rgv-heading-container #logo, .theme--rgview #site-header.rgv-header .rgv-heading-container #rgu-logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-height: 100%;
        /* just height breaks ie11 */ }
      .theme--rgview #site-header.rgv-header .rgv-heading-container #logo {
        width: 145px;
        padding-left: 0; }
        .theme--rgview #site-header.rgv-header .rgv-heading-container #logo a {
          align-items: flex-start;
          /* override align-items: baseline which breaks ie11 */
          max-width: 100%; }
          @media only screen and (min-width: 25rem) {
            .theme--rgview #site-header.rgv-header .rgv-heading-container #logo a img {
              max-width: none;
              max-height: 30px; } }
          @media only screen and (min-width: 48rem) {
            .theme--rgview #site-header.rgv-header .rgv-heading-container #logo a img {
              padding-left: 8px;
              /* Match indent of main site logo */
              max-height: 30px; } }
          @media only screen and (min-width: 64rem) {
            .theme--rgview #site-header.rgv-header .rgv-heading-container #logo a img {
              max-height: 60px; } }
        .theme--rgview #site-header.rgv-header .rgv-heading-container #logo .rgv-tagline {
          color: #fff;
          font-size: 0.5rem;
          line-height: 1em;
          white-space: nowrap;
          margin-top: 0.1em; }
          @media only screen and (min-width: 25rem) {
            .theme--rgview #site-header.rgv-header .rgv-heading-container #logo .rgv-tagline {
              font-size: 0.53rem;
              margin-top: 0.2em; } }
          @media only screen and (min-width: 48rem) {
            .theme--rgview #site-header.rgv-header .rgv-heading-container #logo .rgv-tagline {
              padding-left: 8px;
              /* Match indent of main site logo */ } }
          @media only screen and (min-width: 64rem) {
            .theme--rgview #site-header.rgv-header .rgv-heading-container #logo .rgv-tagline {
              font-size: 1.04rem; } }
      .theme--rgview #site-header.rgv-header .rgv-heading-container .rgv-rgu-logo-desktop {
        display: none; }
      @media only screen and (min-width: 48rem) {
        .theme--rgview #site-header.rgv-header .rgv-heading-container .rgv-rgu-logo-mobile {
          display: none; }
        .theme--rgview #site-header.rgv-header .rgv-heading-container .rgv-rgu-logo-desktop {
          display: block; } }
      .theme--rgview #site-header.rgv-header .rgv-heading-container #nav {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        width: 65%;
        height: 100%;
        line-height: 1.3em; }
        .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div {
          margin-top: 1px;
          text-align: right; }
          .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div > div {
            height: 36px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            text-align: left;
            padding-right: 0.3125rem;
            margin-right: 0.3125rem;
            border-right: 2px solid white; }
            @media only screen and (min-width: 36rem) {
              .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div > div {
                height: auto; } }
            .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div > div .contact-link p,
            .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div > div #nav-search {
              /* Reduce font size on smaller screens */
              font-size: 0.75rem;
              line-height: 1.3em; }
              @media only screen and (min-width: 36rem) {
                .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div > div .contact-link p,
                .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div > div #nav-search {
                  font-size: 1rem; } }
              @media only screen and (min-width: 64rem) {
                .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div > div .contact-link p,
                .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div > div #nav-search {
                  font-size: 1.2rem;
                  margin-bottom: 0.18rem; } }
            @media only screen and (min-width: 36rem) {
              .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div > div {
                padding-right: 0.625rem;
                margin-right: 0.625rem; } }
            @media only screen and (min-width: 48rem) {
              .theme--rgview #site-header.rgv-header .rgv-heading-container #nav > div > div {
                padding-right: 1.25rem;
                margin-right: 1.25rem; } }
        .theme--rgview #site-header.rgv-header .rgv-heading-container #nav .contact-link .content.container {
          padding: 0; }
          .theme--rgview #site-header.rgv-header .rgv-heading-container #nav .contact-link .content.container p {
            margin: 0; }
            .theme--rgview #site-header.rgv-header .rgv-heading-container #nav .contact-link .content.container p.desktop {
              display: none; }
            @media only screen and (min-width: 25rem) {
              .theme--rgview #site-header.rgv-header .rgv-heading-container #nav .contact-link .content.container p.mobile {
                display: none; }
              .theme--rgview #site-header.rgv-header .rgv-heading-container #nav .contact-link .content.container p.desktop {
                display: block; } }
          .theme--rgview #site-header.rgv-header .rgv-heading-container #nav .contact-link .content.container a {
            text-decoration: none; }
            .theme--rgview #site-header.rgv-header .rgv-heading-container #nav .contact-link .content.container a:hover, .theme--rgview #site-header.rgv-header .rgv-heading-container #nav .contact-link .content.container a:focus {
              background-color: transparent; }
      .theme--rgview #site-header.rgv-header .rgv-heading-container #rgu-logo {
        align-items: flex-end; }
        .theme--rgview #site-header.rgv-header .rgv-heading-container #rgu-logo img {
          max-height: 36px; }
        @media only screen and (min-width: 36rem) {
          .theme--rgview #site-header.rgv-header .rgv-heading-container #rgu-logo img {
            max-height: 40px; } }
        @media only screen and (min-width: 64rem) {
          .theme--rgview #site-header.rgv-header .rgv-heading-container #rgu-logo img {
            max-height: 46px; } }
        @media only screen and (min-width: 100rem) {
          .theme--rgview #site-header.rgv-header .rgv-heading-container #rgu-logo img {
            max-height: 55px; } }
    @media only screen and (min-width: 64rem) {
      .theme--rgview #site-header.rgv-header:after {
        background: linear-gradient(135deg, #712177 38%, transparent 38%); } }
  @media only screen and (min-width: 64rem) {
    .theme--rgview #site-header.rgv-header #nav-search {
      height: 1.4rem; } }
  .theme--rgview #site-header.rgv-header #site-search form {
    position: relative;
    width: 6rem; }
    @media only screen and (min-width: 25rem) {
      .theme--rgview #site-header.rgv-header #site-search form {
        width: 9rem; } }
    @media only screen and (min-width: 36rem) {
      .theme--rgview #site-header.rgv-header #site-search form {
        width: 15rem; } }
    @media only screen and (min-width: 64rem) {
      .theme--rgview #site-header.rgv-header #site-search form {
        width: 17rem; } }
  .theme--rgview #site-header.rgv-header #site-search label {
    position: absolute;
    z-index: -1;
    text-align: right;
    width: 100%;
    padding-right: 1rem;
    display: block !important; }
    @media only screen and (min-width: 36rem) {
      .theme--rgview #site-header.rgv-header #site-search label {
        padding-right: 1.4rem; } }
    @media only screen and (min-width: 64rem) {
      .theme--rgview #site-header.rgv-header #site-search label {
        padding-right: 1.6rem; } }
  .theme--rgview #site-header.rgv-header #site-search #toggle-icon {
    position: absolute;
    right: -0.5em;
    top: 0 !important; }
    @media only screen and (min-width: 36rem) {
      .theme--rgview #site-header.rgv-header #site-search #toggle-icon {
        right: -0.4rem; } }
    @media only screen and (min-width: 64rem) {
      .theme--rgview #site-header.rgv-header #site-search #toggle-icon {
        right: -0.3rem; } }
  .theme--rgview #site-header.rgv-header #site-search button {
    position: absolute;
    border: none !important;
    background-color: transparent !important;
    font-size: inherit;
    color: #ffffff;
    cursor: pointer; }
  .theme--rgview #site-header.rgv-header #site-search #search-box {
    position: static !important;
    float: right;
    height: 1rem;
    border: none;
    background-color: #ffffff;
    box-shadow: none;
    font-size: inherit;
    font-family: "ZonaPro-SemiBold", helvetica, arial, sans-serif;
    border-radius: 0px;
    width: 0;
    padding: 0;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out; }
    .theme--rgview #site-header.rgv-header #site-search #search-box.open-search {
      padding-left: 0.3125rem;
      padding-right: 2rem;
      width: 100%; }
      @media only screen and (min-width: 36rem) {
        .theme--rgview #site-header.rgv-header #site-search #search-box.open-search {
          padding-right: 2.4rem; } }
      @media only screen and (min-width: 64rem) {
        .theme--rgview #site-header.rgv-header #site-search #search-box.open-search {
          width: 28vw; } }
    @media only screen and (min-width: 36rem) {
      .theme--rgview #site-header.rgv-header #site-search #search-box {
        font-size: 0.9em; } }
    @media only screen and (min-width: 64rem) {
      .theme--rgview #site-header.rgv-header #site-search #search-box {
        height: 1.5rem; } }
  .theme--rgview #site-header.rgv-header #site-search #search-icon {
    top: 1px;
    right: 1em;
    color: #444; }
    @media only screen and (min-width: 36rem) {
      .theme--rgview #site-header.rgv-header #site-search #search-icon {
        top: 1px;
        right: 1.1em;
        font-size: 0.9em; } }
    @media only screen and (min-width: 64rem) {
      .theme--rgview #site-header.rgv-header #site-search #search-icon {
        top: 2px; } }
  .theme--rgview #site-header.rgv-header #site-search #search-close {
    top: 2px;
    right: 0;
    color: #444; }
    @media only screen and (min-width: 36rem) {
      .theme--rgview #site-header.rgv-header #site-search #search-close {
        top: -1px; } }
    @media only screen and (min-width: 64rem) {
      .theme--rgview #site-header.rgv-header #site-search #search-close {
        top: 1px; } }
  @media only screen and (min-width: 64rem) {
    .theme--rgview #site-header.rgv-header #site-search {
      width: auto; } }
  .theme--rgview #site-header.rgv-header .contact-link {
    clear: right;
    text-align: right; }
    .theme--rgview #site-header.rgv-header .contact-link a {
      color: #ffffff; }
  .theme--rgview #related-items {
    display: none; }
  @media only screen and (min-width: 36rem) {
    .theme--rgview .dropfiles-file {
      width: 23rem;
      /* Undo less specific rules */ }
      .theme--rgview .dropfiles-file .col:first-child {
        padding: 1.25rem 0 0 0;
        max-width: none; } }

/* Apply the most basic styling to the tag cloud results page */
.flexicontent.fctags {
  padding-bottom: 6rem;
  /* Hide the form for filtering the results */ }
  .flexicontent.fctags #adminForm {
    display: none; }
  .flexicontent.fctags th {
    text-align: left; }
  .flexicontent.fctags td {
    vertical-align: top;
    padding: 0 0.625rem 1.25rem 0; }

.theme--rgview #flexicloud {
  list-style-type: none;
  padding-left: 0;
  text-align: center; }
  .theme--rgview #flexicloud li {
    display: inline;
    margin: 0 0.3rem; }
  .theme--rgview #flexicloud .tag1, .theme--rgview #flexicloud .tag2, .theme--rgview #flexicloud .tag3 {
    color: #006B99; }
  .theme--rgview #flexicloud .tag4, .theme--rgview #flexicloud .tag5, .theme--rgview #flexicloud .tag6, .theme--rgview #flexicloud .tag7 {
    color: #007abf; }
  .theme--rgview #flexicloud .tag8, .theme--rgview #flexicloud .tag9, .theme--rgview #flexicloud .tag10 {
    color: #006B99; }
  .theme--rgview #flexicloud .tag1 {
    font-size: 0.7rem;
    color: #006B99; }
  .theme--rgview #flexicloud .tag2 {
    font-size: 0.8rem; }
  .theme--rgview #flexicloud .tag3 {
    font-size: 0.9rem; }
  .theme--rgview #flexicloud .tag4 {
    font-size: 1rem; }
  .theme--rgview #flexicloud .tag5 {
    font-size: 1.3rem; }
  .theme--rgview #flexicloud .tag6 {
    font-size: 1.4rem; }
  .theme--rgview #flexicloud .tag7 {
    font-size: 1.5rem; }
  .theme--rgview #flexicloud .tag8 {
    font-size: 1.6rem; }
  .theme--rgview #flexicloud .tag9 {
    font-size: 1.8rem;
    line-height: 1.2em; }
  .theme--rgview #flexicloud .tag10 {
    font-size: 2rem;
    line-height: 1.2em; }

/* IE11 Hacks */
main {
  display: block;
  /* doesnt recognise the main tag */ }

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .flex-wrap.col {
    display: flex;
    flex-direction: column; }
  .panel-full .panel-intro .text-block, .page-intro .text-block {
    align-items: flex-start; }
    .panel-full .panel-intro .text-block p, .page-intro .text-block p {
      width: 100%; }
  .grid-item .card-image, .grid-item .grid-image, .related-item .card-image, .related-item .grid-image {
    flex: 0 0 auto; }
  #menu-wrap {
    flex-wrap: nowrap; } }

@media screen and (-ms-high-contrast: none) and (min-width: 48rem), (-ms-high-contrast: active) and (min-width: 48rem) {
  .rgv-heading-container #nav > div > div {
    height: 47px !important; }
    .rgv-heading-container #nav > div > div #search-close .fa-times::before {
      font-family: sans-serif;
      font-weight: 400;
      content: "x"; }
  #homepage-featured-items .flex-grid .grid-item {
    min-height: 0;
    padding-bottom: 0; }
  .panel-narrow {
    justify-content: flex-start; }
  #rgv-featured-items > .grid-item:nth-child(1) {
    max-width: none !important;
    min-height: 500px;
    width: 65%; }
  #rgv-featured-items > .grid-item:nth-child(2),
  #rgv-featured-items > .grid-item:nth-child(3) {
    max-width: none !important;
    width: 32%;
    min-height: 250px; }
  .rgv-latest-items .grid-item,
  .rgview-tabs .grid-item,
  .rgv-video-thumbs .grid-item {
    min-height: 0 !important; }
    .rgv-latest-items .grid-item .grid-image,
    .rgview-tabs .grid-item .grid-image,
    .rgv-video-thumbs .grid-item .grid-image {
      flex: 1 0 auto; }
  .rgv-video-thumb > div:nth-child(1) {
    float: left;
    display: inline; }
  .rgv-video-thumb > div:nth-child(2) {
    display: inline; }
  #rgview-footer .grid-3 > div:nth-child(1) {
    max-width: 33%; }
  #rgview-footer .grid-3 > div:nth-child(2) {
    max-width: 64%; }
  .related-items .flex-grid .grid-item {
    min-height: 500px; }
  .r-tabs .r-tabs-tab a {
    display: block; }
  .flex-grid.newsfeed .grid-item {
    min-height: 0; }
  .flex-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
    .flex-grid .grid-item {
      min-height: 600px;
      display: block !important;
      position: relative;
      padding-bottom: 3.75rem; }
      .flex-grid .grid-item [class^='more-link'] {
        margin-top: auto;
        position: absolute;
        bottom: 0;
        width: 100%;
        max-height: 2.5rem;
        box-sizing: border-box; }
    .flex-grid.grid-3 .grid-item {
      max-width: 32.5%;
      min-width: 32.5%;
      margin-right: 1.25%; }
      .flex-grid.grid-3 .grid-item:nth-child(3n+3) {
        margin-right: 0; }
    .flex-grid.grid-4 .grid-item, .flex-grid.grid-2 .grid-item {
      max-width: 49%;
      min-width: 49%;
      margin-right: 2%; }
      .flex-grid.grid-4 .grid-item:nth-child(2n+2), .flex-grid.grid-2 .grid-item:nth-child(2n+2) {
        margin-right: 0; }
  .flex-wrap {
    display: flex; }
    .flex-wrap.row {
      flex-direction: row; }
      .flex-wrap.row.reverse {
        flex-direction: row-reverse; }
    .flex-wrap.col {
      flex-direction: column; }
  /* Fix logo getting distorted in ie11 */
  #site-header #logo a {
    height: 100px; }
    #site-header #logo a img {
      flex-shrink: 0; } }

/* desktop up */
@media screen and (-ms-high-contrast: none) and (min-width: 64rem), (-ms-high-contrast: active) and (min-width: 64rem) {
  /* at desktop, the 4 grid both has 3 items in a row */
  .flex-grid.grid-4 .grid-item {
    max-width: 32%;
    min-width: 32%;
    margin-right: 1%; }
    .flex-grid.grid-4 .grid-item:nth-child(2n+2) {
      margin-right: 1%; }
    .flex-grid.grid-4 .grid-item:nth-child(3n+3) {
      margin-right: 0; } }

/* large desktop up */
@media screen and (-ms-high-contrast: none) and (min-width: 100rem), (-ms-high-contrast: active) and (min-width: 100rem) {
  /* at desktop, the 4 grid both has 3 items in a row */
  .flex-grid.grid-4 .grid-item {
    max-width: 24%;
    min-width: 24%;
    margin-right: 1%; }
    .flex-grid.grid-4 .grid-item:nth-child(3n+3) {
      margin-right: 1%; }
    .flex-grid.grid-4 .grid-item:nth-child(4n+4) {
      margin-right: 0; } }