h3 {
    font-weight: 300 !important;
}

.row {
	margin-left: 0px !important;
	margin-right: 0px !important;
}

.grey-section {
	background-color: #F4F4F4;
	width:100%;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 20px 0 20px 0;
}

.darkblue-section {
	background-color: #1D4F91;
	width: 100%;
	padding: 20px 0px;
	color: #fff;
	margin: 20px 0 20px 0;
}

.lightblue-section {
	background-color: #426DA9;
	width:100%;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #fff;
	margin: 20px 0 20px 0;
}

.lightblue-6-section {
	background-color: rgba(38, 71, 141, 0.1);
	width:100%;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #fff;
	margin: 20px 0 20px 0;
}

.button-darkblue {
  background-color : #1D4F91;
  border : none;
  border-radius: 10px;
  color : white;
  width: 100%;
  max-width: 300px;
  height: 50px;
  text-align : center;
  font-size : 16px;
  opacity : 1;
  margin: 10px 0px;
  transition-duration : 0.3s;
  transition-timing-function : initial;
  transition-delay : initial;
  transition-property : initial;
  display : inline-flex;
  align-items: center;
  justify-content: space-around;
  text-decoration-line : none;
  text-decoration-style : initial;
  text-decoration-color : initial;
  cursor : pointer;
}

.button-purple {
  background-color : #6D2077;
  border : none;
  border-radius: 10px;
  color : white;
  width: 100%;
  max-width: 300px;
  height: 50px;
  text-align : center;
  font-size : 16px;
  opacity : 1;
  margin: 10px 0px;
  transition-duration : 0.3s;
  transition-timing-function : initial;
  transition-delay : initial;
  transition-property : initial;
  display : inline-flex;
  align-items: center;
  justify-content: space-around;
  text-decoration-line : none;
  text-decoration-style : initial;
  text-decoration-color : initial;
  cursor : pointer;
}

.button-white {
  background-color : #fff;
  border : none;
  border-radius: 10px;
  color : #1d4f91;
  width: 100%;
  max-width: 300px;
  height: 50px;
  text-align : center;
  font-size : 16px;
  opacity : 1;
  margin: 10px 0px;
  transition-duration : 0.3s;
  transition-timing-function : initial;
  transition-delay : initial;
  transition-property : initial;
  display : inline-flex;
  align-items: center;
  justify-content: space-around;
  text-decoration-line : none;
  text-decoration-style : initial;
  text-decoration-color : initial;
  cursor : pointer;
}

.button-rasberry {
  background-color : #AF1685;
  border : none;
  border-radius: 10px;
  color : #fff;
  width: 100%;
  max-width: 300px;
  height: 50px;
  text-align : center;
  font-size : 18px;
  opacity : 1;
  margin: 10px 0px;
  transition-duration : 0.3s;
  transition-timing-function : initial;
  transition-delay : initial;
  transition-property : initial;
  display : inline-flex;
  align-items: center;
  justify-content: space-around;
  text-decoration-line : none;
  text-decoration-style : initial;
  text-decoration-color : initial;
  cursor : pointer;
}

.button-rasberry:hover {
	background-color: #902d75;
	color: #fff;
}

.button-white-blue {
  background-color : #fff;
  border : solid 1px;
  border-radius: 10px;
  color : #1d4f91;
  width: 100%;
  max-width: 300px;
  height: 50px;
  text-align : center;
  font-size : 18px;
  opacity : 1;
  margin: 10px 0px;
  transition-duration : 0.3s;
  transition-timing-function : initial;
  transition-delay : initial;
  transition-property : initial;
  display : inline-flex;
  align-items: center;
  justify-content: space-around;
  text-decoration-line : none;
  text-decoration-style : initial;
  text-decoration-color : initial;
  cursor : pointer;
}

.button-white-blue:hover {
	background-color: #1d4f91;
	color: #fff;
}


.button-green {
  background-color: #009f4d;
  border : none;
  border-radius: 10px;
  color : white;
  width: 100%;
  max-width: 300px;
  height: 50px;
  text-align : center;
  font-size : 16px;
  opacity : 1;
  margin: 10px 0px;
  transition-duration : 0.3s;
  transition-timing-function : initial;
  transition-delay : initial;
  transition-property : initial;
  display : inline-flex;
  align-items: center;
  justify-content: space-around;
  text-decoration-line : none;
  text-decoration-style : initial;
  text-decoration-color : initial;
  cursor : pointer;
}

.column-2 {
    float: left;
    width: 50%;
    text-align: center;
}

.column-3 {
    float: left;
    width: 33%;
    text-align: center;
}

.column-5 {
    float: left;
    width: 20%;
    text-align: center;
}

.column-2-70 {
    float: left;
    width: 70%;
}

.column-2-30 {
    float: left;
    width: 30%;
}

.column-2-40 {
    float: left;
    width: 40%;
}

.column-2-60 {
    float: left;
    width: 60%;
    padding-right: 30px;
}
.column-4 {
    float: left;
    width: 25%;
    text-align: center;
}


.mosaic-img {
	width: 480px;
	margin: -14px -30px -14px -14px;
}

.mosaic-kitchen {
	margin: 2% -20px;
	width: 400px;
	float: right;
}

.numbers-img {
  width : 100%;
  height : auto;
  padding: 15px;
  max-width : 120px;
}

.testimonial-box {
	background-color: #F4F4F4;
	margin: 50px;
	padding: 20px;
	border-radius: 10px;
}

.testimonial-box h3 {
	color: #333333;
}

.testimonial-box p {
	color: #333333;
}


.responsive-icon {
  	height: auto;
  	padding: 0 15px 15px 0;
 	max-width : 90px;
}

.channel-box {
	background-color: #fff;
	margin: 50px;
	padding: 20px 40px;
	border: 2px solid #af1685;
	border-radius: 10px;
	min-height: 180px;
}
	

/* Purple Ticks */

ul.purple-tick {
  list-style-type: none;
  width: 75%;
}

li.purple-tick {
  font-size:20px;
  position: relative;
  margin-bottom: 10px;
  padding-left: 2em;
}

li.purple-tick::before {
  content: '';
  position: absolute;
  width: 2em;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(https://www.experian.co.uk/business-express/hub/wp-content/uploads/2018/11/purple-tick.png);
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: center;
}

/* Landing Page Styles */

.landingPage-heroBanner {
		width: 100%;
		height: 450px;
		color: white;	
}

.landingPage-heroBanner-container {
	margin: 0px 120px;
	padding:7%;
	width: 100%;
}

.button-greren {
  background-color: #009f4d;
  border : none;
  border-radius: 10px;
  color : white;
  width: 100%;
  max-width: 300px;
  height: 50px;
  text-align : center;
  font-size : 16px;
  opacity : 1;
  margin: 10px 0px;
  transition-duration : 0.3s;
  transition-timing-function : initial;
  transition-delay : initial;
  transition-property : initial;
  display : inline-flex;
  align-items: center;
  justify-content: space-around;
  text-decoration-line : none;
  text-decoration-style : initial;
  text-decoration-color : initial;
  cursor : pointer;
}

.heroBanner-responsive-img {
	width: 100%;
	max-width: 350px;
	height: auto;
}

.logo-img {
	width:100%;
	max-width: 150px;
	/* height: 30px; */
}

#integrations h2 {
	text-align: center;
}

#feature-quote {
	background: linear-gradient(-135deg, #ba2f7d, #26478d, #632678, #ba2f7d);
	background-size: 150% 150%;
	-webkit-animation: Gradient 18s ease infinite;
	-moz-animation: Gradient 18s ease infinite;
	animation: Gradient 18s ease-in-out infinite;
	padding: 50px 0;
	margin: 50px 0 0;
	color: #ffffff;
	text-align: center;
}

#how-we-do p {
	margin-top: 60px;
}

#blue-boxes h2 {
	font-size: 50px;
	padding-top: 14px
}

#accurate-targetable {
	width: 75%;
    margin: auto;
    margin-top: 30px;
}

.hero-btn {
	width: 100%;
    max-width: 200px;
    border-radius: 6px;
    padding: 7px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 300;
    transition-duration: 0.3s;
    color: #ffffff;
    background-color: rgba(152, 40, 129, 1);
}

.hero-btn:hover {
	background-color: #ffffff;
	color: rgb(38, 71, 141);
	text-decoration: none;
}

.white-btn {
	width: 100%;
    max-width: 200px;
    border-radius: 6px;
    padding: 7px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 300;
    transition-duration: 0.3s;
    color: #1d4f91;
    background-color: #ffffff;
    text-align: center;
}

.white-btn:hover {
	background-color: #af1685;
	color: #ffffff;
	text-decoration: none;
}

.rasberry-btn {
	width: 100%;
    max-width: 200px;
    border-radius: 6px;
    padding: 7px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 300;
    transition-duration: 0.3s;
    color: #fff;
    background-color: #af1685;
    text-align: center;
}

.rasberry-btn:hover {
	background-color: #731559;
	color: #ffffff;
	text-decoration: none;
}

.rasberry-btn a {
	text-decoration: none;
}

.responsive-img {
  width: 100%;
  height: auto;
  max-width: 800px;
  display: table;
  margin: 0 auto;
}

#cclearly-img {
	margin-top: 7%;
	margin-left: 18%;
	max-width: 450px;
}

#paid-search h1 {
	font-size: 45px;
	color: #fff;
	margin-top: 4%;
}

/* Media Queries */

@media screen and (max-width: 1350px) {
	.channel-box {
		min-height: 250px;
	}
}

@media screen and (max-width: 1250px) {
	.mosaic-img {
	width: 100%;
	margin: 8%;
	}

	.mosaic-kitchen {
	display:none;
	}

	.testimonial-box {
		margin: 30px;
	}
}


@media screen and (max-width: 1024px) {

  	.button-darkblue, .button-purple, .button-white {
    width : 280px;
  }
	.mosaic-img {
	display:none;
	}

	#mosaic-in-action {
		width: 100%;
	}

	#what-is-mosaic {
		width: 100%;
	}
	.column-2-40 {
		width: 100%;
	}
	.column-2-60 {
		width: 100%;
		padding: 0px 0px;
	}
	#facebook-imac {
		display: none;
	}

	#cclearly-img {
		margin: 0 auto;
		display: flex;
		max-width: 600px;
	}

}

@media screen and (max-width: 768px) {
  .button-darkblue, .button-purple, .button-white  {
    width : 280px;
  }

  .testimonial-box {
	margin: 20px;
    }

    .mosaic-kitchen, .mosaic-img {
    	display: none;
    }

    	.column-2 {
    width: 100%;

	}
	
	.column-3 {
    width: 100%;
	}
	
		.column-4 {
    width: 50%;
	}
	
  .column-2-30 {
    	width: 100%;
    	padding-bottom: 0p;
    	margin: 0px 20px 0px 20px;
   }
  .column-2-70 {
    	width: 100%;
    	margin: 10px;
    }
}

@media screen and (max-width: 540px) {
  .button-darkblue, .button-purple, .button-white  {
    width: 100%;
  }
  .column-5 {
    width: 50%;
    }
    .column-2-60 {
    	text-align: center;
    }
}
@media screen and (max-width: 426px) {
	.button-darkblue {
		width: 100%;
	}

	#paid-search h1 {
		font-size: 36px;
	}
}

