@charset "utf-8";


@keyframes fadeIn {
	0% {
		transform: scale(.5);
		opacity: 0.5;		
	}
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@keyframes FadeInDown {
from { opacity: 0; transform: translate3d(0, -50px, 0); }
  to { opacity: 1; transform: none; } }
.FadeInDown { animation-name: FadeInDown; }

@keyframes FadeInUp {
from { opacity: 0; transform: translate3d(0, 100px, 0); }
  to { opacity: 1; transform: none; } }
.FadeInDown { animation-name: FadeInUp; }



@keyframes FadeInLeft {
  from { opacity: 0; transform: translate3d(-100px, 0, 0); }
  to { opacity: 1; transform: none; } }
.FadeInLeft { animation-name: FadeInLeft; }


@keyframes FadeInRight {
  from { opacity: 0; transform: translate3d(100px, 0, 0); }
  to { opacity: 1; transform: none; } }
.FadeInRight { animation-name: FadeInRight; }



.aText.in-view {
   animation: fadeIn;
    animation-duration: 1s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
  }
  
  .slideUp.in-view {
   animation: FadeInUp;
    animation-duration: 2s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
  }
  
  
.slideDown.in-view {
   animation: FadeInDown;
    animation-duration: 2s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
  }
.slideLeft.in-view {  
   animation: FadeInLeft;
    animation-duration: 2s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
}
.slideRight.in-view {  
   animation: FadeInRight;
    animation-duration: 1s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
}

.sb-info {
    width: 100%;
	clear: both;
	padding:0;
	display: flex;
	margin:0;
	height:100%
		
}

.sb-info-inner {
	width: 100%;
	padding:2em;
}

.IBlack {
	background: black;
	color: white !important;
	}

a.IBlack:hover {
	background: white;
	color: black !important;
	box-shadow: 0 0 .5em #333;
}

a.IBlue {
	background: #004083;
	color: white !important;
	
}

a.IBlue:hover {
	background: white;
	color: #004083 !important;
	box-shadow: 0 0 .5em #333;
}

a.IGrey {
	background: #ddd;
	color: black !important;
}

a.IGrey:hover {
	background: white;
	color: #333 !important;
	box-shadow: 0 0 .5em #333;
}

a.IGold {
	background: #b68000;
	color: white !important;
}

a.IGold:hover {
	background: white;
	color: #b68000 !important;
	box-shadow: 0 0 .5em #333;
}

a.IGreen {
	background: #00671a;
	color: white !important;
	
	}

a.IGreen:hover {
	background: white;
	color: #00671a !important;	
	box-shadow: 0 0 .5em #333;
	
}

a.IRed {
	background: #990033;
	color: white !important;
	
}

a.IRed:hover {
	background: white;
	color: #990033 !important;
	box-shadow: 0 0 .5em #333;
}

a.IYellow {
	background: #ffbf00;
	color: black !important;
}

a.IYellow:hover {
	background: black;
	color: #ffbf00 !important;
	box-shadow: 0 0 .5em #333;
}

a.ITeal {
	background: #005461;
	color: white !important;
}

a.ITeal:hover {
	background: white;
	color: #005461 !important;
	box-shadow: 0 0 .5em #333;
}

a.IWhite {
	background: white;
	color: #333 !important;
}

a.IWhite:hover {
	background: #333;
	color: white !important;
	box-shadow: 0 0 .5em #333;
}

a.IOrange {
	background: #ff8100;
	color: black !important;
}

a.IOrange:hover {
	background: black;
	color: #ff8100 !important;
	box-shadow: 0 0 .5em #333;
}

a.IBrown {
	background: #703800;
	color: white !important;
}

a.IBrown:hover {
	background: white;
	color: #703800 !important;
	box-shadow: 0 0 .5em #333;
}

a.IPurple {
	background: #800080;
	color: white !important;
}

a.IPurple:hover {
	background: white;
	color: #800080 !important;
	box-shadow: 0 0 .5em #333;
}


.Ilandscape {
	display: flex;
	flex-direction: row
	}

.Iportrait {
	display: flex;
	flex-direction: column;
	margin: 0 auto}

.Iportrait .sb-info-image {flex:0}


.Iportrait img {
	margin: auto;
	display: flex;
	}

.IRight {
	order: 2 !important
}

.IRight{margin-left: auto}

.ILeft{margin-right: auto}

.ICentre{margin: auto}


.sb-info-image {
	margin: 0 auto;
	padding: 0;
	max-width: 100%;
	border-radius: .5em;
	flex:1;
	text-align: center		
}

.sb-info-image img {
	max-width: 100%;
	height: auto;
	margin: auto;
	border: .02em solid #ccc;
	border-radius: .5em;
	box-shadow: 0 .4em .5em #333
}

.sbtext {
	padding:1em .5em 0 .5em;
	margin: auto;
	display: flex;
	flex-direction: column;
	flex:1;
	text-align: center
}

.Ttext {
	padding:1em .5em 0 .5em;
	margin: auto;
	display: flex;
	flex-direction: column;
	flex:1;
	text-align: center;
	
}

.Iportrait .sbtext{
order:2
}


h2.sb-info-title{
	text-transform: capitalize;
	letter-spacing: .1em;
	padding: 0;	
	font-size: 2em !important;
	margin: 0 auto;	
	max-width: 100%;
	text-align: center;
	line-height: 1.2em !important;	
	font-weight: 500;
}

.sb-info-description {
	padding: .5em !important;
	max-width: 100%;
	margin: 0;	
	line-height: 1.2em
}

.sb-info-button {
	padding: 0;
	text-align: center;
	margin: 1em auto !important;
	clear: both;
	width: auto;
	display: inline-flex;
	border-radius: .5em
}

.sb-info-button a {
	padding:.4em;
	display: block;
	text-decoration: none;
	margin: auto;
	line-height: 1.2em;
	border-radius: .3em;
	font-size:1.4em;
	transition: all 0.25s ease-out
}


@media (max-width: 900px) {

	.Ttext {padding: 1em .5em 0 .5em}
	
	.sb-info-inner{padding:1em }
		
	.sb-info-description {
		font-size: 1em;
		line-height: 1.2em
	}

	.Ilandscape {
		flex-direction: column;
		height: 100%
	}

	h2.sb-info-title {
		font-size: 1.5em !important;
		padding: .1em .2em !important;
		margin: .1em auto
	}

	.ILeft img,
	.IRight img {
		padding: 0;
		margin: auto
	}

	.sbtext, .Iportrait .sbtext {
		order: 2;
		padding: .75em .5em;
		width: 100%
	}
	
	.sb-info-button {
		order: 3
	}
	
	.sb-info-button a {font-size:1em}
}