/*
Theme Name: RB Solo 2026
Author: Ross Brown
Author URI: www.rossbrown.co.uk
Version: 5, 2026
*/


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ul, ol {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

:root {
  --bluegrey: rgba(37,52,71,1);
  --bluegrey90: rgba(37,52,72,0.9);
  --bluegrey80: rgba(37,52,72,0.8);
  --bluegrey75: rgba(37,52,72,0.75);
  --bluegrey50: rgba(37,52,72,0.5);
  --bluegrey25: rgba(37,52,72,0.25);

  --pink: rgba(201,27,100,1);
  --darkpink: rgba(124,0,58,1);
  --pinklight: rgba(248, 141, 177, 1);
  --pinkvlight: rgba(241,198,216,1);
  --pinkhex: #C91B64;
  --angle1: polygon(100% 0%, 0% 0%, 0% 100%, 100% 94%);
  --angle2: polygon(100% 0%, 0% 13%, 0% 100%, 100% 100%);
  --angle3: polygon(0% 0%, 0% 84%, 100% 100%, 100% 0%);

  }

h1, h2, h3, h4 {font-family: 'Roboto Slab', Helvetica, Arial, serif; font-weight: 300; font-size: 1.2vw; line-height: 1.8vw;}

p, a, li, label, tr, td {font-family: 'Titillium Web', Helvetica, Arial, serif; font-weight: 300; font-size: 1.2vw; line-height: 1.8vw;}

p {margin-bottom: 2vw;}

strong, b {font-family: 'Roboto Slab', Helvetica, Arial, serif; font-weight: 600;}

.pink {color: var(--pink) !important;}

h1, h1 p {font-size: 4vw; font-weight: 900; line-height: 120%;}

h1 span {color: var(--pink);}

h3 {color: var(--pink); font-weight: 600; margin-bottom: 1vw;}

button, input[type='submit'] {
  background: var(--pink);
  color: #f2f2f2;
  padding: 0 2.5vw;
  border-radius: 20px;
  margin: 1vw 0.1vw 0 0;
  font-family: 'Titillium Web', Helvetica, Arial, serif;
  width: max-content !important;
  transition: all 0.3s ease-in;
  border: 5px solid var(--pink);
  font-size: 1vw;
}

button:hover, input[type='submit']:hover {padding: 0 2.8vw; background: var(--darkpink) !important; border-color: var(--darkpink); transition: all 0.5s ease-in;}

button.alt {color: var(--bluegrey); background: #fff !important; border: 5px solid #fff;}

button.alt:hover {background: var(--darkpink) !important; color: #fff; border: 5px solid var(--darkpink);}

  
button.bump {margin-left: 2vw;}  

a {color: inherit; font-weight: inherit; font-size: inherit;}

button a {text-decoration: none !important;}

html, body{height: 100%; width: 100%; background: #f0ecec;}

.clearer, .clearer00, .clearer10, .clearer20, .clearer30, .clearer40, .clearer50, .clearer60, .clearer70, .clearer80, .clearer90, .clearer100
{clear: both; height: 1px; width: 100% !important;}

.clearer10 {height: 1vw;} .clearer20 {height: 2vw;} .clearer30 {height: 3vw;} .clearer40 {height: 4vw;} .clearer50 {height: 5vw;}

body {overflow: visible;}

body {
	animation: fadeInAnimation ease 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
	0% {
		opacity: 0;
		background-color: var(--bluegrey);
	}

	100% {
		opacity: 1;
		background: #f0ecec;
	}
}

body {background: var(--bluegrey);}

header {float: left; width: 100%; clear: both; background: var(--bluegrey); padding: 6vw 0; /* position: relative; */ z-index: 2;}
	header #logo {float: left; width: 5%; margin-left: 10%;}
		header #logo img {width: 100%;}
/* Top
_________________________________________________ */

.lhw {position:relative; z-index: 1;}


#subheader {clear: both; float: left; width: 100%; background: var(--bluegrey); clip-path: var(--angle1); padding-bottom: 8%; margin-top: -1px;}
	#subheader.none {clip-path: none !important; padding-bottom: 0 !important;}
#subheader h1, #subheader p, #subheader li {color: #fff;}
		#subheader h1 {letter-spacing: -2px;}
		#subheader ul {float: left; width: 35%;}	
			#subheader ul:nth-of-type(2) {float: left; margin-left: 5%;}
		#subheader li {list-style-type: disc; list-style-position: inside; font-size: 1vw;}
		
	#subheader .left, #subheader .intro, #subheader .top_bp {float: left; width: 60%; margin-left: 10%;}
			#subheader .intro, #subheader .top_bp {margin-top: 3vw;}
				#subheader .intro p strong {font-weight: 600; font-size: 1.4vw;}	


.hp_quote {background: var(--pink);
	padding: 16% 0 8% 0;
	float: left;
	margin-top: -10%;
	}
	
	.hp_quote p {margin: 0 10%; color: #fff; width: 60%; }
	
img.bigrb {
	  position: absolute;
	  max-height: 200%;
	  top: 10vw;
	  right: 0;
	  z-index: 2;
	  max-width: 30%;
	}
	
#testimonials {
	background: var(--bluegrey); clip-path: var(--angle1); float: left; width: 100%;
}	

#testimonials .testimonial_wrapper {
	float: left;
	width: 60%;
	margin: 5vw 10% 5vw 10%;
	padding: 3vw 0;
	display: flex;
	height: 100%;
	flex-wrap: nowrap;
	overflow-x: scroll;
}
	
	#testimonials .testimonial_wrapper > div {float: left; min-width: 45%; margin-right: 4%; height: 100%;}		
		
		#testimonials .testimonial_wrapper > div img {width: 40%;
			float: left;
			margin: 0 60% 1vw 0;
			border-radius: 50%;
			background: var(--pinklight);
			border: 1px solid #fff;}
		
		#testimonials .testimonial_wrapper > div p {color: #fff;}	
		
		#testimonials .testimonial_wrapper > div:nth-last-of-type {margin-right: 0;}
		
		p.testimonial {font-size: 1vw; font-weight: 600;}

#hp_blog {background: var(--pink); width: 100%; float: left; clear: both; padding: 16% 0 8% 0; margin-top: -10%;}
		
		#hp_blog > .hp_blogwrapper {display: flex;}

		#hp_blog > .hp_blogwrapper > div {width: 18%; margin-right: 4%;}
			#hp_blog > .hp_blogwrapper > div:first-of-type {margin-left: 10%;}
				#hp_blog > .hp_blogwrapper > div:last-of-type {margin-right: 0%;}
		
		#hp_blog > .hp_blogwrapper > div img {border: 1px solid #fff; border-radius: 10px; width: 100%;}
		
		#hp_blog > .hp_blogwrapper > div p a {
			color: #fff;
			text-decoration: none !important;
			width: 70%;
			display: block;
			margin: 3%;
			}
		
#hp_blog button {background: var(--bluegrey); margin-left: 10%;}	

.several {float: left;
	clear: both;
	width: 80%;
	padding: 5vw 10% 0 10%;
	background: linear-gradient(180deg,var(--bluegrey) 0%, var(--pink) 100%);
}

.experience {
	float: left;
	width: 60%;
	clear: both;
	background: var(--bluegrey);
	padding: 2vw 30% 15% 10%;
}
	.experience ul {width: 100; float: left;}
	
	.experience p, .experience li {color: #fff}
	.experience li {list-style-type: disc; list-style-position: inside; float: left; margin-right: 1vw;}	
		
.homeinfo {
	clip-path: var(--angle2);
	float: left;
	width: 60%;
	clear: both;
	background: var(--pink);
	padding: 7vw 30% 2vw 10%;
	border-bottom: 3px solid #fff;
	/* border-top: 3px solid #fff; */
	margin-top: -12%;
	padding-top: 15%;	
}

	.homeinfo p {color: #fff}


.stuff {
		float: left;
		width: 60%;
		clear: both;
		background: var(--bluegrey);
		padding: 4vw 30% 5vw 10%;
	}
	
	.stuff > ul {clear: both; float: left; display: flex; margin: 0 0 1vw 0; flex-wrap: wrap;
	}
		.stuff > ul > li {
			float: left;
			min-width: 14%;
			max-width: 14%;
			margin-right: 2%;
		}
			.stuff img {width: 100%; height: auto; border-radius: 10px;}
			
img.sectionicon {
	width: 3vw;
	height: 3vw;
	margin-bottom: 2vw;
}

form {/* border: 5px solid var(--pink); */
	border-radius: 10px;
	/* padding: 2vw; */
	float: left;
	width: 100%;
	margin-bottom: 3vw;
	clear: both;}

form aside {float: left; width: 45%;}

label {float: left;
	width: 100%;
	color: #fff;
	margin-bottom: 1vw;}
	
form textarea, form input {
	padding: 0.2vw 0.5vw;
	font-family: 'Titillium Web', Helvetica, Arial, serif;
	font-weight: 300;
	font-size: 1.2vw;
	line-height: 1.8vw;
	width: 90%;
}

form input {margin-bottom: 1vw;}	

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output
{border-color: var(--bluegrey) !important; width: 80%;}

.wpcf7-response-output,
.wpcf7-not-valid-tip
 	{float: left; width: 100%; color: red !important;	font-family: 'Titillium Web', Helvetica, Arial, serif;
	font-weight: 300;
	font-size: 1.2vw; }
	
.blogcontainer {
	float: left;
	clear: both;
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	padding: 5vw 10% 3vw 10%;
	background: var(--bluegrey);}
	
	.blogcontainer > div {width: 30%; float: left; }		
		.blogcontainer > div img {
			width: 80%;
			border-radius: 20px;
			border: 1px solid rgba(255,255,255,0.1);
			}
	
	.blogcontainer > div p, .blogcontainer > div a {
		color: #fff;
		width: 80%;
		font-family: 'Roboto Slab', Helvetica, Arial, serif;
		font-weight: 600;
		}
		.blogcontainer > div a {text-decoration: none !important; margin-top: 1vw;}

.fz-pagination {
	color: #fff;
	font-family: 'Roboto Slab', Helvetica, Arial, serif;
	font-size: 2vw;
	font-weight: 600;	
}

.tags {width: 100%; float: left; margin-bottom: 4vw;}
	.tags ul {width: 100% !important;}
	.tags li {float: left; list-style-type: none !important; margin-right: 1vw;}
		.tags li img {width: 2vw; height: 2vw; vertical-align: middle}
			.tags li a {text-decoration: none !important;}
		
.blogsingle {width: 80%; padding: 3vw 10%; background: var(--bluegrey); float: left;}	
	.blogsingle p, .blogsingle li {color: #fff; line-height: 2.4vw;}
		.blogsingle p:first-of-type {font-family: 'Roboto Slab', Helvetica, Arial, serif; font-weight: 600; font-size: 1.4vw;}
	
		.blogsingle li {list-style-type: disc; list-style-position: inside;}
		.blogsingle img {float: right; width: 30%; border-radius: 20px; margin: 0 0 2vw 3vw;}
		.blogsingle p img {clear: both; float: left; width: 100%; height: auto; border-radius: 20px; margin: 0 0 2vw 3vw;}

		
/* Footer
_________________________________________________ */	

footer {clear: both; float: left; width: 100%; padding-top: 5vw; background-color: var(--pink);}

footer img {width: 30%; height: auto;}

footer a {text-decoration: none; border-bottom: 1px dotted #fff;}

footer > div.container {
width: 75%;
float: left;
margin-left: 10%;
margin-top: -30%;
}

footer > div.container > div {float: left; width: 50%; }
	footer > div.container > div p {color: #fff; font-size: 0.8vw;}
		footer > div.container > div:nth-of-type(2) {width: 25%;
			margin-left: 15%;
			margin-top: 10vw;}
				footer > div.container > div:nth-of-type(2) p {text-align: right;
					line-height: 1.2vw;
					color: #ccc;}
	
.waveAnimation {background-color: var(--pink); float: left; width: 100%;}
	
.w1 {
		stroke: none;
		fill: #fff;
		opacity: 55%;
		animation: move1 5s ease-in-out infinite;}
				
body.home .w1 {fill: #999;}
	
	
.w2 {
		stroke: none;
		fill: #fff;
		opacity: 35%;
		transform: translate3d(0, 0, 0);
		animation: move2 4s ease-in-out infinite; }
		
body.home .w2 {fill: #ccc;}
		
.w3 {
		stroke: none;
		fill: #fff;
		opacity: 30%;
		transform: translate3d(0, 0, 0);
		animation: move3 6s ease-in-out infinite;}
		
body.home .w3 {fill: #020202;}
		
	@keyframes move1 {
		0% {transform: translateX(-500px) scaleX(2.5);}
		25% {transform: translateX(-100) scaleX(2.5);}
		50% {transform: translateX(0) scaleX(2.5);}
		75% {transform: translateX(-100) scaleX(2.5);}
		100% {transform: translateX(-500px) scaleX(2.5);}
	}
	
	@keyframes move2 {
		0% {transform: translateX(-600px) scaleX(3);}
		25% {transform: translateX(-100) scaleX(2.5);}
		50% {transform: translateX(0) scaleX(3);}
		75% {transform: translateX(-100) scaleX(2.5);}
		100% {transform: translateX(-600px) scaleX(3);}
	}
	
	@keyframes move3 {
		0% {transform: translateX(-800px) scaleX(3);}
		25% {transform: translateX(-100) scaleX(2.5);}
		50% {transform: translateX(0) scaleX(3);}
		75% {transform: translateX(-100) scaleX(2.5);}
		100% {transform: translateX(-800px) scaleX(3);}
	}				

/* Overrides */

p.reset {font-size: 1vw !important;}
a.prev, a.next {display: none !important;}


.old_content p {
	color: #000 !important;
	font-size: 1vw;
	font-weight: 300 !important;
	background: #FFE500;
	padding: 2vw 3vw;
	display: inline-block;
}

.old_content img {
	width: 2vw !important;
	height: auto !important;
	vertical-align: middle !important;
	margin-right: 1vw !important;
	float: left !important;
	margin: 0 1vw 0 0 !important;
	border-radius: 0 !important;
}	

.blogsingle h1 {color: #fff;}