:root {
  --banner-height: 450px;
  }	}


/** Thicker horizontal rule **/

  .hr {
        width: 100% !important;
        height: 30px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        background-color: #b7d0e2 !important;
        border: 0 none !important;
      }

 /** Grey large text for rankings **/ 
  
  .grey {
          color: #3e4146!important;
              font-size: 1.6em!important;
              line-height: 1.4em;
              font-weight: bold;
          }
              .grey-super-large {
          color: #3e4146!important;
                  font-size: 3em!important;
                  line-height: 1.5em;
              font-weight: bold;
              }
      
/* Reverse Row */
@media (max-width:768px) {
	.row-reverse .layout-row { 
		display: flex; 
		flex-direction: column-reverse; }}
	
/** Overlay Boxes vertical **/  

.image-component {
  position: absolute;
    }

.overlay-box-lg {
  margin-top: -2em;
  margin-left: 3em;
  margin-right: 3em;
  position: relative;
      }
  
.overlay-box-lg h2 {
  font-size: 2em !important;
  font-weight: bold;
     }    
  
.overlay-box-lg p{
  font-size: 1.5em !important;
     }  
  
.overlay-box-md {
  margin-top: -2.5em;
  margin-left: 1em;
  margin-right: 1em;
  position: relative;
  }

.overlay-box-sm {
 margin-top: -2em;
margin-left: 1em;
margin-right: 1em;
position: relative;
  }

/** Overlay Boxes horizontal **/  

.horizontal-overlay-box-right {
margin-top: 1em;
margin-bottom: 2em !important;
margin-left: -5em;
	margin-right: 0px;
position: relative;
      }

.data-bogus-editable-container .horizontal-overlay-box-right {
margin-top: 1em;
margin-bottom: 2em;
margin-left: -2em; 
position: relative;
      } 

.horizontal-overlay-box-left {
	margin-top: 1em;
margin-bottom: 2em !important;
margin-right: -5em;
	margin-left: 0px;
z-index: 1;
	position: relative;
      }

.data-bogus-editable-container .horizontal-overlay-box-left {
margin-top: 1em;
margin-bottom: 2em;
margin-left: -2em; 
position: relative;
      } 

/* Horizontal image support - keep in line on tablet */

  .image-horizontal {
  	height: 100%;
  	object-fit: cover;}

/** Overlay Boxes horizontal smaller screens **/ 

@media screen and (max-width: 1199px) {
	
	.horizontal-overlay-box-right {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px; 
position: relative;
      }
	
.horizontal-overlay-box-left {
	margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
	z-index: 1;
position: relative;
      }	
}

/** Overlay Boxes vertical smaller screens **/ 
@media screen and (max-width: 767px) 
{	
  .overlay-box-lg {
    margin-top: -1em;
    margin-left: 2em !important;
    margin-right: 2em !important;
    position: relative;
      }
       
  .overlay-box-md {
    margin-top: -3em;
    margin-left: 1.2em !important;
    margin-right: 1.2em !important;
    position: relative;
      }

  .overlay-box-sm {
    margin-top: -1em;
    margin-left: 1em !important;
    margin-right: 1em !important;
    position: relative;
      }
	
		.horizontal-overlay-box-right {
margin-top: -3em;
margin-bottom: 0px;
margin-left: 1.2em !important; 
margin-right: 1.2em !important;
position: relative;
      }
	
.horizontal-overlay-box-left  {
margin-top: -3em;
margin-bottom: 0px;
margin-left: 1.2em !important; 
margin-right: 1.2em !important;
	position: relative;
	z-index: 1;
      }

}

/* Accordion gradient fade */

       .tabs-component--accordion-button{
border-radius: 10px !important;
       background-color: #552d62; /* For browsers that do not support gradients */
       background-image: linear-gradient(-200deg, #552d62, #190d1d);
       }
       
     .tabs-component--accordion-button, .btn-default {
       color: #FFF !important;
     }
       
       .tabs-component--accordion-button, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
     color: #FFF !important;
     background-color: #886c91!important;
       
       }

.tabs-component>.tabs-component--panels>.tabs-component--panel.active {border-radius: 10px !important; }
	

.panel {
	border-radius: 10px !important;
overflow:hidden !important;}



/** Button alignment **/

  .layout-col .container-component.boxstyle_ {
  	display: flex;
  	flex-direction: column;
  } 
  
  .layout-col .container-component.boxstyle_ .buttons-component  {
  	margin-top: auto;
  	padding-top: 20px;
  }



  
  /** Medium - laptops and upwards **/
    @media only screen and (min-width : 992px) {

      .banner-content-alignment-left .overlayContent {
        align-items: start;
        padding-left: 3em;
      }
    
    .banner-content-alignment-left .overlayContent h2 {
        text-align: left;
      }

      .banner-content-alignment-right .overlayContent {
        align-items: end;
        padding-right: 3em;
      }
    
    .banner-content-alignment-right .overlayContent h2 {
        text-align: right;
      }
    
    .overlayContent h2 {
    font-size: 5em;
    }
    
    .overlayContent .form {
    width: 40%;
  }

      .banner-colour-dark.banner-content-alignment-left .containerBackground {
        background: linear-gradient(90deg, rgba(0,0,0,0.40) 40%, rgba(0,0,0,0) 60%);
      }

      .banner-colour-dark.banner-content-alignment-right .containerBackground {
        background: linear-gradient(270deg, rgba(0,0,0,0.40) 40%, rgba(0,0,0,0) 60%);
      }

      .banner-shadow-hidden-web .containerBackground {
      display: none;
	  }}
		
		

/** Margins **/

@media (min-width: 768px) {

  .margins {
    margin-left: 8%;
    margin-right: 8%;
  }
}

		

/* Container with hoverable image that zooms, titles that underline and change colour and boxstyle shadow*/
		
		 .container {
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-right: none;
    margin-left: none;
  }
  
    * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
    }
  
  .container {
   position: relative;
  margin: none;
  overflow: hidden;
     width: 100% !important;
    }
  
  .container img {
  max-width: 100%;
  transition: all 0.3s;
  display: block;
    width: 100%
  transform: scale(1);
  }
  
  .container:hover img{
   transform: scale(1.1);
    width: 100%
   height: 250px;
    object-fit: cover;
  }
  
  .title {
     display: inline-block;
    position: relative;
    color: #552D62 !important;
  }
  
  .title::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #552D62 !important;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }
  
  .container:hover .title::after {
   transform: scaleX(1);
    transform-origin: bottom left;
  }
  
  .blue:hover {color:#01407a;}
  
  .shadow-animation {
    box-shadow: 0;
  transition: box-shadow 1s;
  border: 1px solid #eee;
      transition: box-shadow 0.3s;
  }
  
  .container:hover .shadow-animation {
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.11), 
              0 4px 4px rgba(0,0,0,0.11), 
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
  }
		
		  
  /** Image box zoom within container */
  
  * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .image-box {
	  position: relative;
    margin: auto;
    overflow: hidden;
    width: 540px
		z-index: 0;
  }
		
  .image-box img {
    max-width: 100%;
    transition: all 0.3s;
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
  }
  
  .image-box:hover img {
    transform: scale(1.1);
  } 
		
		 .gradient
   {
     background: linear-gradient(130deg, #552d62, #331b3a, #C3B5C8);
    background-size: 400% 400%;
     height: inherit !important;
     padding-top: 1rem !important;
     padding-bottom: 1rem !important;
     
     -webkit-animation: Animation 7s ease;
     -moz-animation: Animation 7s ease;
   animation: Animation 7s ease;
    -webkit-animation-fill-mode:forwards;
     -moz-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
   }
   
   @-webkit-keyframes Animation {
     0%{background-position:10% 0%}
     50%{background-position:91% 100%}
     100%{background-position:10% 0%}
   }
   @-moz-keyframes Animation {
     0%{background-position:10% 0%}
     50%{background-position:91% 100%}
     100%{background-position:10% 0%}
   }
   @keyframes Animation { 
     0%{background-position:10% 0%}
     50%{background-position:91% 100%}
     100%{background-position:10% 0%}
   }
   /** Scroller white arrows **/
   .horizontal-scroller-left {
      color: white !important;
   }
   .horizontal-scroller-right {
    color: white !important;}
   
    /** Header banner alert **/ 
    .header-purple {
    background: #552D62;
    animation: header-purple 5s;
    animation-fill-mode:forwards;
    }
    
    @keyframes header-purple {
    from {background-color: #552D62;}
    to {background-image: linear-gradient(-200deg, #552d62, #C3B5C8);}
    }
     /** Box Shadow **/
     
     .box2, .box5{
     	box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
     }
     /** Gradient Fade **/
       
       .grad1 {
       background-color: #552d62; /* For browsers that do not support gradients */
       background-image: linear-gradient(-200deg, #552d62, #2a1631);
        height: inherit !important;
     padding-top: 1.5rem !important;
     padding-bottom: 1rem !important;
       }
       
       .white {
      color: #FFF !important;
       }
  
  .white > a {
      color: #FFF !important;
       }
     
       /* Container with hoverable image that zooms, titles that underline and change colour and boxstyle shadow*/
     @media (max-width:768px)  {	
     .padding-bottom {
     padding-bottom: 1.5em !important;}	} 
     
     .container {
     padding-right: 0px !important;
     padding-left: 0px !important;
     margin-right: none;
     margin-left: none;
       }
       
        * {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       margin: 0;
       padding: 0;
     }
       
       .container {
        position: relative;
       margin: none;
       overflow: hidden;
      width: 100% !important;
     }
       
       .container img {
       max-width: 100%;
       transition: all 0.3s;
       display: block;
     width: 100%
       transform: scale(1);
       }
       
       .container:hover img{
        transform: scale(1.1);
     width: 100%
        height: 250px;
     object-fit: cover;
       }
  
   .titlewhite {
      display: inline-block;
     position: relative;
     color: #FFFFFF;
       }
       
       .titlewhite::after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #FFFFFF;
     transform-origin: bottom right;
     transition: transform 0.25s ease-out;
       }
       
       .container:hover .titlewhite::after {
        transform: scaleX(1);
     transform-origin: bottom left;
       }
  
       
       .title {
      display: inline-block;
     position: relative;
     color: #552D62 !important;
       }
       
       .title::after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #552D62 !important;
     transform-origin: bottom right;
     transition: transform 0.25s ease-out;
       }
       
       .container:hover .title::after {
        transform: scaleX(1);
     transform-origin: bottom left;
       }
       
       .blue:hover {color:#01407a;}
       
       .shadow-animation {
     box-shadow: 0;
       transition: box-shadow 1s;
       border: 1px solid #eee;
       transition: box-shadow 0.3s;
       }
       
       .container:hover .shadow-animation {
       box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
               0 2px 2px rgba(0,0,0,0.11), 
               0 4px 4px rgba(0,0,0,0.11), 
               0 6px 8px rgba(0,0,0,0.11),
               0 8px 16px rgba(0,0,0,0.11);
       }
       
        @media (prefers-reduced-motion) {
        .container {
     padding-right: 0px !important;
     padding-left: 0px !important;
     margin-right: none;
     margin-left: none;
       }
       
     * {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       margin: 0;
       padding: 0;
     }
       
       .container {
        position: relative;
       margin: none;
       overflow: hidden;
      width: 100% !important;
     }
       
       .container img {
       max-width: 100%;
       transition: none;
       display: block;
     width: 100%
       transform: scale(1);
       }
       
       .container:hover img{
        transform: scale(1);
     width: 100%
        height: 250px;
     object-fit: cover;
       }
  
           .titlewhite {
      display: inline-block;
     position: relative;
     color: #FFFFFF;
       }
       
       .titlewhite::after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #FFFFFF;
     transform-origin: bottom right;
     transition: transform 0s ease-out;
       }
       
       .container:hover .titlewhite::after {
        transform: scaleX(0);
     transform-origin: none;
       } 
       
       .title {
      display: inline-block;
     position: relative;
     color: #552D62;
       }
       
       .title::after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #552D62;
     transform-origin: bottom right;
     transition: transform 0s ease-out;
       }
       
       .container:hover .title::after {
        transform: scaleX(0);
     transform-origin: none;
       } 
       
       .blue:hover {color: none}
       
       .shadow-animation {
     box-shadow: 0;
       transition: box-shadow 0s;
       border: 1px solid #eee;
       transition: box-shadow 0s;
       }
       
       .container:hover .shadow-animation {
       box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
              }
   
           .gradient
   {
     background:#552d62;
    background-size: 100% 100%;
  
     
     -webkit-animation: Animation 7s ease;
     -moz-animation: Animation 7s ease;
   animation: Animation 7s ease;
    -webkit-animation-fill-mode:forwards;
     -moz-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
   }
   
   @-webkit-keyframes Animation {
     0%{background-position:10% 0%}
     50%{background-position:91% 100%}
     100%{background-position:10% 0%}
   }
   @-moz-keyframes Animation {
     0%{background-position:10% 0%}
     50%{background-position:91% 100%}
     100%{background-position:10% 0%}
   }
   @keyframes Animation { 
     0%{background-position:10% 0%}
     50%{background-position:91% 100%}
     100%{background-position:10% 0%}
   }}
   
   
       @media (max-width: 768px) { {
       .spacing-mobile {
       		padding-top: 6% !important;}}