@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/*** Mobile CSS Start ***/
/*** XS in Boostrap ***/
@media (min-width: 0px) {

.box-padding {
  padding: 25px;
}

.ref2021-banner-colour.box-padding {
  padding: 0 0 10px 0;
}

.ref2021-banner-colour {
	min-height: 375px;
}

.ref2021-banner-image {
	min-height: 375px !important;
}

.ref2021-banner-colour .btn, .ref2021-banner-image .btn {
	width: 100%;
}

.ref2021-banner-colour .ref2021-circle-stamp {
	display: flex;
	margin: auto;
}

.ref2021-banner-colour .ref2021-circle-stamp {
	padding: 10px;
	width: 50%;
}

.ref2021-banner-image .ref2021-circle-stamp {
	margin: -40px 0 10px 0;
}

@media (max-width: 767px) {
.ref2021-banner-image.ref2021-yellow-black .text-on-image {
	background-color: #000;
}

.ref2021-banner-image.ref2021-red-blue .text-on-image {
	background-color: #fff;
}

.ref2021-banner-image.ref2021-red-blue h1, .ref2021-banner-image.ref2021-red-blue h2, .ref2021-banner-image.ref2021-red-blue h3, .ref2021-banner-image.ref2021-red-blue h4, .ref2021-banner-image.ref2021-red-blue h5, .ref2021-banner-image.ref2021-red-blue h6 {
	color: #c83333 ;
}

.ref2021-banner-image.ref2021-mint-grey .text-on-image {
	background-color: #333;
}
	
.ref2021-banner-image.ref2021-purple-cyan .text-on-image {
	background-color: #4b0066;
}
}	
	
}

/*** Mobile CSS END ***/


/*** Tablet CSS START ***/
/*** SM in Boostrap ***/
@media (min-width: 768px) {

.ref2021-banner-colour {
	display: flex;
	align-items: center;
}

.ref2021-banner-colour .ref2021-circle-stamp {
	width: 100%;
	float: right:
}

.ref2021-banner-colour .btn, .ref2021-banner-image .btn {
	width: auto;
	padding-left: 10%;
	padding-right: 10%;
}

.ref2021-banner-image .ref2021-background-image {
	min-height:  375px;
	object-fit: cover;
}

.ref2021-banner-image .text-on-image {
	background-color: rgba(0,0,0,.70) !important;
}

.box-padding {
  padding: 50px;
}

.ref2021-banner-colour.box-padding {
  padding: 50px;
}

.ref2021-banner-image.ref2021-red-blue .ref2021-circle-stamp {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(110%) contrast(101%);
}


}


/*** Tablet CSS END ***/


/*** Desktop CSS START ****/
/*** LG and XL in Bootstrap ***/

@media(min-width: 1200px){



}

/*** Desktop CSS END ***/

.ref2021-banner-colour .btn, .ref2021-banner-image .btn {
	border: 0;
	border-radius: 0;
	font-size: 1em;
	transition: background-color 0.5s;
}

.ref2021-banner-colour {

}

.ref2021-banner-image {

}

.ref2021-banner-colour h1, .ref2021-banner-colour h2, .ref2021-banner-colour h3, .ref2021-banner-colour h4, .ref2021-banner-colour h5, .ref2021-banner-colour h6 {
	font-size: 2.6em;
}

.ref2021-banner-image h1, .ref2021-banner-image h2, .ref2021-banner-image h3, .ref2021-banner-image h4, .ref2021-banner-image h5, .ref2021-banner-image h6 {
	font-size: 2.4em;
	color: #fff;
}

.ref2021-banner-image .ref2021-circle-stamp {
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(181deg) brightness(103%) contrast(101%);
}

.ref2021-banner-colour.ref2021-yellow-black {
	background-color: #000;
}

.ref2021-yellow-black h1, .ref2021-yellow-black h2, .ref2021-yellow-black h3, .ref2021-yellow-black h4, .ref2021-yellow-black h5, .ref2021-yellow-black h6 {
	color: #fff ;
}

.ref2021-yellow-black p {
		font-size: 16px !important;
}

.ref2021-yellow-black .btn {
	background-color: #fceb0f;
	font-weight: bold;
	color: #black !important;
}

.ref2021-yellow-black .btn:hover {
	background-color: #fff;
}

.ref2021-yellow-black .ref2021-circle-stamp {
	filter: invert(80%) sepia(78%) saturate(619%) hue-rotate(349deg) brightness(109%) contrast(98%);
}

.ref2021-banner-colour.ref2021-red-blue {
	background-color: #fff;
}

.ref2021-banner-colour.ref2021-red-blue h1, .ref2021-banner-colour.ref2021-red-blue h2, .ref2021-banner-colour.ref2021-red-blue h3, .ref2021-banner-colour.ref2021-red-blue h4, .ref2021-banner-colour.ref2021-red-blue h5, .ref2021-banner-colour.ref2021-red-blue h6 {
	color: #c83333 ;
}



.ref2021-red-blue p {
	font-size: 16px !important;
}

.ref2021-red-blue .btn {
	background-color: #c83333;
	font-weight: bold;
	color: #fff !important;
}

.ref2021-red-blue .btn:hover {
	background-color: #000;
}

.ref2021-red-blue .ref2021-circle-stamp {
	filter: invert(14%) sepia(90%) saturate(3612%) hue-rotate(241deg) brightness(76%) contrast(107%);
}

.ref2021-banner-colour.ref2021-mint-grey {
	background-color: #333;
}

.ref2021-mint-grey h1, .ref2021-mint-grey h2, .ref2021-mint-grey h3, .ref2021-mint-grey h4,  .ref2021-mint-grey h5, .ref2021-mint-grey h6 {
	color: #FFF ;
}

.ref2021-mint-grey p {
	font-size: 16px !important;
}

.ref2021-mint-grey .btn {
	background-color: #82e6c8;
	font-weight: bold;
	color: #333 !important;
}

.ref2021-mint-grey .btn:hover {
	background-color: #b4f0de;
}

.ref2021-mint-grey .ref2021-circle-stamp {
	filter: invert(81%) sepia(38%) saturate(390%) hue-rotate(107deg) brightness(99%) contrast(87%);
}

/**.ref2021-banner-image.ref2021-mint-grey .ref2021-circle-stamp {
	filter: invert(77%) sepia(69%) saturate(228%) hue-rotate(107deg) brightness(98%) contrast(88%);
}**/

.ref2021-banner-colour.ref2021-purple-cyan {
	background-color: #4b0066;
}

.ref2021-purple-cyan h1, .ref2021-purple-cyan h2, .ref2021-purple-cyan h3, .ref2021-purple-cyan h4, .ref2021-purple-cyan h5, .ref2021-purple-cyan h6 {
	color: #fff ;
}

.ref2021-purple-cyan p {
	font-size: 16px !important;
}

.ref2021-purple-cyan .btn {
	background-color: #55E1FF;
	font-weight: bold;
	color: #4b0066 !important;
}

.ref2021-purple-cyan .btn:hover {
	background-color: #FFF;
}

.ref2021-purple-cyan .ref2021-circle-stamp {
	filter: invert(90%) sepia(17%) saturate(5926%) hue-rotate(160deg) brightness(101%) contrast(101%);
}