/* =====================================

          FLEXIBLE CONTENT STYLES 

========================================

* This stylesheet is exclusively for styles for the flexible content blocks. Don't cross the streams!
* Please do not edit this file, unless you wish to make a global change for all websites that use one of the OPS child themes.
* If you are unsure, please contact Laura Wheatman or Francis Whiteley or email us at projects@flex4.co.uk
*/


.whitesection {  background-color: white;}

.greysection {  background-color: #f5f5f5;}


.colorsection { color: white;}
.colorsection h1, .colorsection h2, .colorsection h3, .colorsection p, .colorsection a{  color: white;}

.centered {
  display: block;
  width: 100%;
  margin: auto;
  text-align: center;
}
.centered h1, .centered h2, .centered h3 {
  text-align: center;
  margin-bottom: 1rem;
}

/*=====================================================
Single Column
=====================================================*/
.banner {
	margin:auto;
	display:inline-block;
	font-size: 1rem;
	padding:1rem 6rem;
	background-color: rgba(0, 0, 0, 0.4);
	color:#FFF;
}
.banner h2{
	margin-top: 1.5rem;
	font-size: 3rem;
	line-height: 3.5rem;
	color:#FFF;
	font-weight: bold;
}
.banner h2 .subheading{ font-size: 2.1rem; font-weight: normal; color:#eee;}

@media screen and (max-width: 640px) {
.banner{padding:1rem 3rem;}
}
@media screen and (max-width: 640px) {
.banner{padding:1rem 3rem;}
.banner h2{line-height: 2.5rem;}
}

/*=====================================================
Graphic Links
=====================================================*/

/*=====================================================
Featured Products
=====================================================*/

/*=====================================================
Funnels
=====================================================*/

/*=====================================================
Feature Icons
=====================================================*/

.benefit {text-align: center;}
.benefit-12 {  padding-left: 100px;}
.benefit i {  font-size: 2.5rem;  width: 60px;  top: 3rem; text-align: center; transition: 0.3s ease-in-out;}
.benefit-12 i {  top: 3.5rem;  font-size: 3.5rem;}
.benefit h3 {  margin-top: 0.5rem;  margin-bottom: 0.5rem;}

/*=====================================================
Image with text block
=====================================================*/
.sideimage {  margin-top: 1rem; text-align: center;}
@media only screen and (min-width: 992px) {  .sideimage {    margin-top: 0;  }}

/*=====================================================
Text Only
=====================================================*/

/*=====================================================
Google Map
=====================================================*/

section.googlemap{
  padding:0;
}


/*=====================================================
Photo Gallery
=====================================================*/

.gallery-header{margin-bottom: 1rem;}
.photo-tile img {padding:0px 10px; margin:0 auto; width:100%;}
.photo-gallery button.slick-next.slick-arrow{top:10rem;right:-0.8rem; z-index:-999; }
.photo-gallery button.slick-prev.slick-arrow{top:10rem; left:-0.8rem; z-index:-999; }
.photo-gallery .slick-dots{bottom:-50px;}

/*=====================================================
Text With Sidebar
=====================================================*/
#content a.sidebar_box {display: block;margin-bottom: 1rem;text-decoration: none;background-color: white;overflow: hidden;}
#content a.sidebar_box:last-child {  margin-bottom: 0;}

#content a.sidebar_box h3 {
  width: 100%;
  color: white;
  padding: 0.5rem 20px;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin-bottom: 0;
}

.sidebar_box_content {  padding: 1rem;}
 
/*=====================================================
Tabs
=====================================================*/
.responsiveTabs {  display: block;  margin-top: 1rem;}
.responsiveTabs div.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {  border-top-right-radius: 0px;  border-top-left-radius: 0px;}

.responsiveTabs div.r-tabs {
  position: relative;
  background: #f5f5f5;
  border-top: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;
  border-left: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  border-radius: 0px;
}

.responsiveTabs div.r-tabs .r-tabs-panel {
  background-color: white;
  border-bottom: 4px solid white;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.responsiveTabs div.r-tabs .r-tabs-nav .r-tabs-tab {  background-color: #5c4db2;}

.responsiveTabs div.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
  background-color: #5c4db2;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom: 1px solid #f0f0f0;
}

.responsiveTabs div.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor { background-color: #5c4db2; color:#FFF ;}
.responsiveTabs div.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {  color: #5c4db2;}
.tab .r-tabs .r-tabs-panel{
  padding:1rem;
}


/*=====================================================
Feature List
=====================================================*/
.features {
  text-align: left;
  margin: 0;
  list-style: none;
  padding-left: 0;
}

.features li {  position: relative;  padding-left: 2rem;}

.features li:before {
  font-family: 'FontAwesome';
  content: '\f00c';
  position: absolute;
  left: 0;
  top: 0;
  color: #5c4db2;
}

/*=====================================================
FAQ
=====================================================*/
article.faq-question {
    margin: 0.5rem 0;
}

/* Styles moved from FAQ.css, faq.css deleted*/

.faq {
  cursor: pointer;
}
.faq:last-child {
  margin-bottom: 0;
}

.faq .entry-content {
  display: none;
}

.faq p:first-child {
  margin-top: 0;
}
.faq h3{
  padding:10px;
  color:#FFF;
  border-radius: 5px;
}
.faq h3:after{
  font-family: fontawesome;
  content:'\f067';
  float:right;
}
.faq h3.open:after{
  font-family: fontawesome;
  content:'\f068';
  float:right;
}

.faq h3:hover {
  opacity: 0.8;
}

/*=====================================================
Portfolio
=====================================================*/

.pf_title{text-align: center;}
.example_container {  padding: 0 10px;}
.examples .slick-dots {  bottom: -2rem;  text-align: center;  padding: 0 20px 0 0;}
.examples .slick-dots li button:before {  color: #5c4db2;  opacity: 1;  font-size: 1rem;}
.examples .slick-dots li.slick-active button:before {/*  content: "\f111";*/  color: #5c4db2;}


/*=====================================================
Grid Section
=====================================================*/
.grid_single {
  display: block;
  margin-bottom: 1rem;
  text-align: center;
}
.grid_single:hover {  opacity: 0.8;}
.grid_single img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
}
#content a.grid_page_box{
  text-decoration: none;
}
/*=====================================================
Testimonials
=====================================================*/
.testimonial{text-align: center;}

.clientname {
  display: block;
  font-weight: bold;
  /* color: #5c4db2; */
  margin-top: -0.75rem;
}

.org {  color: #4a4a4a;}
.single_resource {  padding: 1rem 0;  border-bottom: 1px solid #E3E3E3;}

.w-row:last-child .single_resource {
  border-bottom: 0;
  padding-bottom: 0;
}
h3.resource_title {  margin-bottom: -0.5rem;}
@media only screen and (max-width: 1400px) {	.testimonial{padding:0px 50px;}}
@media only screen and (max-width: 640px) {	.testimonial{padding:0px 10px;}}

/*=====================================================
Resources
=====================================================*/
.resource{margin-bottom: 1rem;}
.w-row:last-child .single_resource {  border-bottom: 0;  padding-bottom: 0;}
h3.resource_title {  margin-bottom: -0.5rem; margin-top: 0;}

.cta, input[type="submit"], header .cta_container a {
  display: block;
  color: white;
  padding: 0.75rem 20px;
  border: none;
  text-align: center;
  transition: 0.5s;
}
.cta:visited, input[type="submit"]:visited, header .cta_container a:visited {  color: white;}
.cta:focus, input[type="submit"]:focus, header .cta_container a:focus {  color: white;}
.cta:hover, input[type="submit"]:hover, header .cta_container a:hover {color: white;}
.cta:active, input[type="submit"]:active, header .cta_container a:active {  color: white;}
@media only screen and (min-width: 768px) {  .cta, input[type="submit"], header .cta_container a {}}
@media only screen and (max-width: 480px) {
  .resource{text-align: center;}
}

/*=====================================================
Blog
=====================================================*/

.solutions {  text-align: center;}
.solution_container {  margin-bottom: 1rem;}

a.solution {
  display: block;
  height: 15rem;
  position: relative;
   overflow: hidden;
   margin-bottom: 1rem;
   }

.solution_container .solution {  margin-bottom: 0;}
.solution h3 {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: white;
  padding: 0.5rem 20px;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin-bottom: 0;
}

.solution img {
  min-width: 100%;
  min-height: 100%;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  transform-origin: 50% 0%;
  opacity: 0.5;
}

.solution:hover h3 {
  -moz-transform: translateY(5rem);
  -ms-transform: translateY(5rem);
  -webkit-transform: translateY(5rem);
  transform: translateY(5rem);
}

.solution:hover img {
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  opacity: 1;
}



.single_sol_img {
  display: block;
  width: 80%;
  max-width: 300px;
  margin: auto;
}

h3.single_sol_h3 {
  margin-top: 0.25rem;
  font-weight: bold;
}

.single_solution p {  margin-top: 0;}

/*=====================================================
Feature Tabs
=====================================================*/
.slider-nav {  display: none;}
@media only screen and (min-width: 768px) {
  .slider-nav {
    display: block;
    z-index: 100;
  }
}

.slider-nav-link {  padding: 10px;  outline: none !important;  cursor: pointer;}

.slider_nav_link_internal {
  text-align: center;
  background-color: #e1e1e1;
  padding: 20px;
}

.slick-current .slider_nav_link_internal {  color: white;}
.slider-nav-link i {  display: block;  font-size: 1.5rem;}
.slider-for {  background-color: white;}
@media only screen and (min-width: 768px) {
  .slider-for {    margin-top: -3rem;  }
}

.feature_slide {  padding: 3rem 20px;}
.slideimage {  width: 60%;  display: block;  margin: 1rem auto 0;}


.slider-for .slick-prev, .slider-for .slick-next {  z-index: 300;}
.slider-for .slick-prev:before, .slider-for .slick-next:before {  color: #5c4db2;  font-size: 2rem;}
.slider-for .slick-prev {  left: -15px;}.slider-for .slick-next {  right: -5px;}
@media only screen and (min-width: 768px) {
  .feature_slide {    padding: 5rem 20px 3rem;  }
}

.slideimage {
  width: 60%;
  display: block;
  margin: 1rem auto 0;
}
@media only screen and (min-width: 768px) {
  .slideimage {
    width: 100%;
    margin: 0;
  }
}

.slider-for .slick-prev, .slider-for .slick-next {  z-index: 300;}
.slider-for .slick-prev:before, .slider-for .slick-next:before {  color: #5c4db2;  font-size: 2rem;}
.slider-for .slick-prev {  left: -15px;}.slider-for .slick-next {  right: -5px;}

@media only screen and (max-width: 680px) {
	.feature_title{display: none;}
}

/*=====================================================
Pricing/Features Table
=====================================================*/
div.matrixwrapper {  position: relative;}

div.matrix {
  width: 100%;
  overflow-x: scroll;
  padding-left: 200px;
  overflow-y: visible;
  padding-bottom: 1px;
  padding-top: 1rem;
}
@media only screen and (min-width: 768px) {
  div.matrix {
    overflow: auto;
  }
}

div.matrix table {
  border-collapse: collapse;
  width: 100%;
  min-width: 650px;
}

div.matrix td, div.matrix th {
  margin: 0;
  border: 1px solid #e1e1e1;
  white-space: nowrap;
  padding: 5px 10px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1rem;
}

div.matrix th {
  font-family: 'Open Sans', sans-serif;
  color: white;
  padding: 1rem 10px;
  font-size: 1.25rem;
}
div.matrix th.purple {
  background-color: #555;
  border: 1px solid #555;
}
div.matrix th.red {
  border: 1px solid #5c4db2;
}
div.matrix th.green {
  background-color: #1abc9c;
  border: 1px solid #1abc9c;
}

div.matrix td.purple {
  background-color: #f5f4f6;
  border: 1px solid #d9d4db;
}
div.matrix td.red {
  background-color: #f8f6fb;
  border: 1px solid #e7dbf2;
}
div.matrix td.green {
  background-color: #f4f8f8;
  border: 1px solid #d5e3e3;
}

div.matrix .headcol {
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  width: 200px;
  left: 0;
  top: auto;
  background-color: white;
  z-index: 10;
  text-align: left;
  font-size: 1rem;
}
div.matrix .headcol.empty {
  border-top: 1px solid white;
  border-left: 1px solid white;
}

div.matrix tr:nth-child(even) .headcol {  background-color: #f5f5f5;}
div.matrix .fa-times {  color: #b7b7b7;}
div.matrix .fa-check {  color: #59918f;}

@media only screen and (max-width: 680px) {
	.headcol{display: inline-block;}
  div.matrix .headcol{
    width: 120px;
  }
  div.matrix{
    padding-left: 120px;
  }
}

/*=====================================================
Sample Pack
=====================================================*/
section#sample_pack{
  padding:0;
}
.sample-pack{
  color:#FFF;
  display: block;
  margin:2rem 0;
  overflow: hidden;
}

.sample-pack a.cta{
  background-color: white;
  color:#691f99;
}

.sample-image{
  overflow: hidden;
  height: 337px;
  margin-left: -20px;
  margin-bottom: -8px;
}

.sample-content{
  padding:20px;
}
.sample-pack h2{
  color:#FFF;
}
.sample-pack p{
  color:#FFF;
}

/*=====================================================
General Slider
=====================================================*/

a.anchor .fa{
	color: white;
	font-size: 2em;
	margin-top: 2em;
	cursor: pointer;
}

.slider-section{padding:0;}
.gen_slider.slick-slide{
	height:500px;
	padding:5rem 0;
}

.gen_slider .centered{margin-top: 9rem;}
.gen_slider h1{color:white; margin-bottom:2rem;font-weight: bold; }
.gen_slider h2{color:white; margin:0; font-weight: normal; font-size: 2rem; }

.slider-section ul.slick-dots{bottom:0;}
.slider-section .slick-dots li button:before,
.slider-section .slick-dots li.slick-active button:before{color:white;}
.slider-section .slick-dotted.slick-slider{margin-bottom: 0;}
.slider-section button.slick-next.slick-arrow{right:25px;width: 30px;height: 30px;}
.slider-section button.slick-prev.slick-arrow {left:25px; z-index: 50;}

.slider-section .slick-prev:before{

  text-shadow:0px 0px 3px rgb(0 0 0 / 50%);
}
.slider-section .slick-next:before{

  text-shadow:0px 0px 3px rgb(0 0 0 / 50%);
}

.slide_link{
	background-color: #46cfd4;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
    transition: 0.5s;
    color:white;
    font-size:1.1rem;
}
.slide_link:hover{
	color:white;
	background-color: #29b2b7;
}
.slide_link:visited{color:#fff;}

.slider-content{margin-bottom: 1rem; color:white}
.slider-content p{margin-top:1rem;}

.slide{
  height: 500px;
  padding:4rem 0;
}

.slide_content h2{
  background-color: #FFF;
  display: inline-block;
  padding:5px 10px;
  font-size: 2rem;
  margin:0;
}
.slider_text{
  display: block;
  margin:1rem 0;
}

img.slide_image{
  margin:0 auto;
}
.message{
  background-color: #FFF;
/*  color:#691f99;*/
  display: inline-block;
  padding:5px 10px;
  font-size: 1.5rem;
}
.slick-prev, .slick-next{
  z-index: 1;
}
/* Google Reviews*/

#google-reviews{
	margin-top:2rem;
}

.avg-rating{
  float: right;
}
.rating-no{
  font-size: 2rem;
  color:#FF8700;
  font-weight: bold;
}
.star-base{
  background-image: url('../images/greystar.png');
  background-repeat: repeat-x;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 25px;
  width: 125px;
  margin:0 0.5rem;
}
.rating{
  background-image: url('../images/star.png');
  background-repeat: repeat-x;
  display: block;
  height: 25px;
  /*width: 90%;*/
}
.whitesection #google-reviews .review-item{
  background-color: #f7f7f7;
}
#google-reviews .review-item{
  background-color: #FFF;
  margin:0 10px;
  border: none;
  padding: 1rem 1.5rem;
}
#google-reviews .review-item:first-child{
  margin-left: 0;
}
#google-reviews .review-item:last-child{
  margin-right: 0;
}
#google-reviews .review-author{
  font-size: 1.2rem;
}
#google-reviews .review-date{
  font-size: 1rem;
}
#google-reviews .review-text{
  font-size: 1rem;
}
#google-reviews .review-stars ul li i{
  color:#FF8700;
}

.colorsection #google-reviews .review-text,
.colorsection #google-reviews .review-date,
.colorsection #google-reviews .review-author{
	color:#333;
}

#google-reviews{
	display:flex;
}
.review-stars ul{
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	justify-content:center;
}
.review-stars ul li i.star:before{
	content:'\f005';
	font-family:'FontAwesome';
	color:#FF8700;
	font-style:normal;
	font-size:1.2rem;
	margin:0 5px;
}
.review-meta{
	text-align:center;
}

@media (max-width: 1200px){
  #google-reviews .review-item {
    margin-bottom: 1rem;
  }
}
@media (max-width: 991px){
  .avg-rating{
    float:none;
    text-align: center;
  }
}
@media (max-width: 768px){
  #google-reviews .review-item {
    flex: 1 1 50%;
    margin-bottom: 1rem;
  }
}
/* Product Options */

#prod-iframe {
  border:none;
  background-color: transparent;
}

#prod-iframe.r-tabs .r-tabs-panel{
  border: none;
  padding:0;
  background-color: transparent;
  padding-top:20px;
}

#prod-iframe.r-tabs .r-tabs-nav .r-tabs-tab{
  background-color: #818181;
  border-radius: 0px;
  width: 25%;
}
#prod-iframe.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor{
  background-color: #36a5b6;
  color: #FFF;
  border-radius: 0px;
}

.nopadding{
  padding:0;
}

.nopadding .matrix-head{
  margin:0;
}
#prod-iframe li a{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #aaa;
}
#prod-iframe li a span{
  display: block;
  font-size: 1rem;
  text-align: center;
}

#prod-iframe li a img,
#prod-iframe li a picture{
  max-height: 80px;
  margin-right: 20px;
}

iframe #cookie-law-info-again{
  display: none;
}

#content.iframe-content{
  padding-top:0;
}

#content.iframe-content .w-container{
  max-width: none;
  padding: 0 10px;
}

#prod-iframe > ul{
  text-align: center;
}

#original .greysection,
#content.iframe-content .greysection{
  padding:0;
}

#prod-iframe #myTab.r-tabs .r-tabs-nav .r-tabs-tab{
  width:auto;
}

#prod-iframe #myTab.r-tabs .r-tabs-panel{
  background-color:#FFF;
  padding:20px 40px;
}