/*
Theme Name: HotHouse Therapeutics v1.1
Author URI: http://www.jellybeanweb.co.uk/
Description: HotHouse Therapeutics bespoke Theme JellyBEAN
Version: 1.1
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

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, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

body, html{height:100%}

:focus {/* remember to define focus styles! */
	outline: 0;
}

ol, ul {
	list-style: none;
}

a{
	color: #000;
}

a img {
	border: 0;
}

* {
	box-sizing: border-box;
}

strong{
	font-weight:700;
}

em{
	font-style:italic;
}

.clear{
	width:100%;
	clear:both;
	height:0;
}

.clear.break20{
	height:20px;
}

.clear.break50{
	height:50px;
}

p{
	margin:0 0 20px 0;
	font-size:17px;
	line-height:1.6em;
}

.post-content ol,
.post-content ul{
	font-size:17px;
	line-height:1.6em;
}

small,
.small,
.single .sidebar .related-news p{
	font-size:15px;
	line-height:1.4em;
}

h1,h2,h3,h4,h5{
	font-weight:600;
	line-height:1.2em;
}

h1{
	font-size:52px;
	font-weight:700;
	text-transform:uppercase;	
}

h1.page-title{
	padding:20px 0 40px 0;
}

h2{
	font-size:48px;
	font-weight:700;
	text-transform:uppercase;
	padding:20px 0;
}

h2.solid{
	padding:20px 40px;
	display:inline-block;
}

h3{
	font-weight:700;
	font-size:30px;
}

h4{
	font-size:21px;
	font-weight:700;	
}

h5{
	font-size:18px;
	font-weight:700;	
	padding:10px 0;
	text-transform:uppercase;	
}

h6{
	font-size:16px;
	font-weight:700;	
}

.btn{
	border:0;
	display: inline-block;
	position:relative;
	white-space: nowrap;
	color:#fff;
	text-decoration:none;	
	font-size:15px;
	text-transform:uppercase;	
	padding:6px 18px 6px 18px;
	background: linear-gradient(315deg, transparent 8px, #231f20 8px);	
}

a.btn:hover,
.btn.wpcf7-submit:hover{
	cursor:pointer;
	color:#000;
	-webkit-transition: background-color 200ms linear;
	-moz-transition: background-color 200ms linear;
	-o-transition: background-color 200ms linear;
	-ms-transition: background-color 200ms linear;
	transition: background-color 200ms linear;	
	background: linear-gradient(315deg, transparent 8px, #fbb900 8px);		
}

.btn.btn-orange{
	color:#231f20;
	background: linear-gradient(315deg, transparent 8px, #fbb900 8px);
}

a.btn.btn-orange:hover{
	color:#fff;
	background: linear-gradient(315deg, transparent 8px, #231f20 8px);	
}

.btn.btn-grey,
.btn.btn-orange.done,
.btn.btn-orange.done:hover{
	background: linear-gradient(315deg, transparent 8px, #dbdbdb 8px);	
	color:#fff;
}

.btn.btn-teal{
	color:#fff;
	background: linear-gradient(315deg, transparent 8px, #008e96 8px);	
}


/* =Colours
----------------------------------------------- */

.teal,
.teal-txt,
.btn.btn-orange.teal-txt,
.post-content ul li::before,
.post-content ol li::before{
	color:#008e96;
}

.blue{
	color:#303b54;
}

.orange,
#footer .subscribe{
	color:#fbb900;
}

.black,
.alm-results-text,
#banner *{
	color:#231f20;
}

.teal-bg,
#banner{
	background-color:#008e96;
}

.blue-bg{
	background-color:#303b54;
}

.orange-bg,
#footer .social ul li a:hover,
.social.news ul li a:hover,
.social.black ul li a:hover{
	background-color:#fbb900;
}

.pastel-orange-bg,
.news-row.featured{
	background-color:#ffe7b9;
}

.ochre-bg{
	background-color:#fff3db;
}


.teal-gfx-bg{
	background-image:url("images/teal-bg.png");
	background-repeat:no-repeat;
	background-position:left top;
	background-size:1200px;
}

.white-gfx-bg{
	background-image:url("images/white-bg.png");
	background-repeat:no-repeat;
	background-position:left top;
	background-size:cover;
}

.teal-leaf-gfx-bg{
	background-image:url("images/teal-leaf-bg.png");
	background-repeat:no-repeat;
	background-position:left top;
	background-size:1550px;
}




/* =Seperators
----------------------------------------------- */

.sep{
	display:block;
	height:35px;
	background:url("images/sep-teal.png") no-repeat center;
	background-size:contain;
	width:100%;
	margin:5px 0;
}


/* =Structure
----------------------------------------------- */

body {
	text-align:center;
	font-family: 'Open Sans', sans-serif;
	color:#72737b;
	text-align:left;
	font-size:18px;
}

#wrapper{
	position:relative;
	width:100%;
	min-width:360px;
}

#main-content{
	width:100%;
	margin:0 auto;
}

.setwidth,
.panel{
	position:relative;	
	max-width:1250px;
	min-width:360px;	
	margin: 0 auto;
	padding:0 20px;
}


.panel{
	padding:40px 20px;
}

.table{
	display:table;
	width:100%;
	border-collapse: collapse;
	table-layout: fixed;	
}

.table-cell{
	display:table-cell;
	vertical-align:top;		
}

.grid{
	display:grid;
	width:100%;
}

.grid.valign-center{
	align-items: center;
}

.grid.col-2{
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 40px;
}

.grid.col-3{
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 80px;
}


/* =Header
----------------------------------------------- */

#header{
	position:relative;
}

#header {
	position:relative;
	padding:20px 0;
}

#header a.logo,
#footer .logo{
	width:250px;
	height:auto;
	display:block;
}

#footer img.logo,
#header a.logo img{
	width:100%;
	height:auto;
}

.hamburger{
	position:absolute;
	right:0;
	top: 50%;
	transform: translateY(-50%);
}

.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
	background-color:#008e96;
	border-radius: 0 !important;
	height: 6px;
	width: 40px;
}

.hamburger-box {
	width: 40px;
}

#navigation {
	display: none;
	position: absolute;
	right: 0;
	top: 90%;
	padding: 20px;
	width: 250px;
	background: linear-gradient(315deg, transparent 20px, #078e97 20px);
	z-index: 9;
}


#navigation ul{
	list-style-type:none;
}

#navigation ul li{
	padding:5px 0;
}

#navigation ul li a{
	color:#fff;
	text-decoration:none;
	display:block;
	border-left:4px solid #fff;
	padding-left:15px;
	font-weight:700;
}

#navigation ul li a:hover{
	color:#fbb900;
	border-color:#fbb900;
}


/* =Banner
----------------------------------------------- */

#banner{
	width:100%;
	position:relative;
}

#banner img{
	width:100%;
	height:auto;
	display:block;
}

#banner .banner-text h1{
	color:#000;
	font-weight:700;
	font-size:78px;
}

#banner .banner-text h3 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4em;
	max-width: 920px;
}

#banner .strap-line h2{
	padding:20px 0;
}


/* =Banner > Image Only
-----------------------*/

#banner.image-only{

}

/* =Banner > Simple
-----------------------*/

#banner.simple{
	padding:20px 0;
	background:url("images/default-banner.jpg") no-repeat center top;
	background-size:cover;
}


#banner.simple .banner-text p{
	font-size:28px;
	font-weight:700;
	line-height:1.2em;
}


/* =Banner > Fancy
-----------------------*/

#banner.fancy  #background-video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

#banner.fancy img{
	z-index: 1;
	height:600px;
	width:100%;
	object-fit:cover;
	font-family: 'object-fit: cover; object-position: center;';		
	object-position: center;	
}	

#banner.fancy .banner-text{
  z-index: 3;
	position: absolute;
	text-align:left;
	max-width:1250px;
	width:100%;
	min-width:360px;	
	margin: 0 auto;
	padding:0 50px 0 30px;	
  top: 50px; 
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%) 
}

#banner.fancy .banner-text h1{
	padding-bottom:30px;
	font-weight:400;
	color:#fff;
}


#banner a.wp-video-popup{
	margin-top:40px;
	position:relative;
	display:block;
	background:url('images/hex-orange.png') no-repeat center;
	background-size:contain;
	height:90px;
	width:90px;
	text-align:center;
}

#banner a.wp-video-popup span{
	font-size:15px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color:#fff;
	display:block;
	text-transform:uppercase;
	text-decoration:none;
	line-height:1.2em;
	font-weight:600;
}


/* =Introduction
----------------------------------------------- */
.panel#introduction{
	padding-bottom:20px;
}

.panel#introduction p{
	font-size:24px;
	
}


/* =Content block
----------------------------------------------- */

#content-block{
	padding:0 20px;
}

#content-block .post-content{
	max-width:720px;
}


#content-block .post-content.fullwidth{
	max-width:100%;
}

/* =Stats
----------------------------------------------- */

#stats{
	text-align:center;
	padding:50px 0;
}

#stats .stat{
	display:block;
	font-size:52px;
	font-weight:300;
}


/* =Panels
----------------------------------------------- */

.panel.panels{
	padding-bottom:0;
}

.panel.panels .col.image {
  display: flex;
  align-items: center;
}

.panel.panels .col.image.image-left  {
	justify-content: flex-start;
}

.panel.panels .col.image.image-right {
	justify-content: flex-end;
}

.col.image.image-left .hex {
    transform: translateX(-6.7%);
}

.col.image.image-right .hex {
    transform: translateX(6.7%);
}


.hex {
	width: 100%;
	max-width: 550px;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-clip-path: polygon(
			50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%
	);
	clip-path: polygon(
			50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%
	);
}




/* =News
----------------------------------------------- */

.panel#news{	
	padding-bottom:80px;
}


/* =Who we are
----------------------------------------------- */

#whoweare{
	padding-top:60px;
}

#whoweare .grid{
	padding-bottom:30px;
}

#whoweare .profile .image{
	text-align:left;
	filter: grayscale(100%);	
}

#whoweare .profile .image svg{
	max-width:95%;
	height:auto;
}

#whoweare .profile .bio{}

#whoweare .profile .bio p{
	line-height:1.4em;
}


#whoweare .profile .bio h4{
	padding-top:30px;
	padding-bottom:10px;
}

#whoweare .profile .bio small{}


#whoweare .frame-border {
  stroke: #fff;
  stroke-width: 10;
}

/* =News
----------------------------------------------- */

.blog #banner,
body.tag #banner,
.single-post #banner{
	background:url("images/default-banner.jpg") no-repeat center;
	background-size:cover;
}

.alm-results-text{
	padding:0 0 20px 0;
	text-transform:uppercase;
	font-size:13px;
	font-weight:700;
}

#news {}

#news .news-row.default{
	max-width:80%;
	margin:30px 0;
}

#news .image{
	width:250px;
	padding:25px 25px 30px 25px;
	padding-left:0;
}

#news .news-row.featured .image{
	width:300px;
}

#news .news-row.featured .image .hex {
	transform: translateX(2.7%);
}

#news .image img{
	max-width:100%;
	height:auto;
}

#news .image .hex {
	transform: translateX(-6.7%);
}

#news .text{
	padding:25px 25px 30px 25px;
	padding-left:0;
}

p.meta{
	margin:0;
	text-transform:uppercase;	
	font-size:14px;
}


#news .text h3{
	text-transform:uppercase;
	padding:0 0 20px 0;
}


#news .news-row.featured h3{
	font-size:32px;
}

#news .news-row.featured p{
	font-size:18px;
}

#news .news-row .btn{
	margin-top:10px;
}

.news-tags{
	width:100%;
	clear:both;
	padding:0 0 0 0;
}

.news-tags .btn.btn-orange{
	font-weight:700;
	margin-right:10px;
	margin-bottom:10px;
	display:inline-block;
}


.social.news{
	float:right;
	padding:20px 0 20px 0;
}

.social.news h6,
.social.news ul,
.social.black ul{
	display:inline-block;
	vertical-align:top;
}

.social.news h6{
	position:relative;
	top:8px;
	color:#231f20;
	padding-right:10px;
}

.social.news ul li,
.social.black ul li{
	display:inline-block;
	vertical-align:top;
}

.social.news ul li a,
.social.black ul li a{
	position:relative;
	color:transparent;
	background-color:#231f20;
	display:block;
	font-size:24px;
	text-align:center;
	border-radius:50%;
	width:38px;
	height:38px;
}


.social.news ul li a i,
.social.black ul li a i{
	color:#fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


form.search-form{
	float:left;
	width:50%;
	padding:20px 0 20px 0;	
}

input.search-field {
	border: 0;
	background: #c7c8ca;
	padding: 10px;
	font-weight: 700;
	width: 400px;
	background: linear-gradient(315deg, transparent 10px, #c7c8ca 10px);		
}


input.search-field::placeholder {
	text-transform: uppercase;
	color: #fff;
	font-weight: 700;	
}

.single-news{
	padding-bottom:80px;
}


.single .single-news h1{

}

.single .single-news{
	padding:30px 20px 120px 20px;
}

.single .post-content{
	padding:30px 40px 80px 0;	
}

.single .sidebar{
	padding:30px 20px 80px 0;
	width:280px;
}

.single .sidebar .related-news .news-row{
	margin:20px 0 40px 0;
}

.sidebar .related-news p.meta {
	font-size: 14px;
}

.single .sidebar .related-news p{
	padding:10px 0;
}

.single .sidebar .related-news .news-row .table-cell{
	display:block;
	width:100%;
}

.single .sidebar .related-news .news-row	svg {
	width: 80%;
	position: relative;
	left: -20px;
}



/* =Post content
----------------------------------------------- */

.post-content{
	text-align:left;
}

.post-content.intro{
	max-width:65%;
	padding-bottom:30px;
}

.post-content ol,
.post-content ul{
	padding:10px 40px;
	list-style-position: outside;
	list-style: none; /* Remove default bullets */
}

.post-content ol li::before,
.post-content ul li::before {
	font-size:21px;
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}


.post-content ol {
	list-style: none; 
	counter-reset: li
}

.post-content ol li {
	counter-increment: li
}

.post-content ol li::before {
	content: counter(li);
	font-size:17px;	
}

.post-content ol li,
.post-content ul li{
	padding-bottom:10px;
}

.post-content h1{
	font-weight:600;
}

.post-content h1{
	padding:20px 0 20px 0;
	font-weight:600;
}

.post-content h2{
	padding:30px 0 20px 0;
	font-weight:600;
	font-size:34px;
}

.post-content h2:first-of-type{
	padding:20px 0 20px 0;
}

.post-content h3{
	font-weight:600;
	padding:20px 0 15px 0;	
	font-size:28px;	
}

.post-content h4{
	font-weight:600;
	padding:20px 0 15px 0;	
}

.post-content h5{
	padding:10px 0;	
	font-weight:600;
}

.post-content h6{
	padding:10px 0;	
	font-weight:600;
}


.wp-block-separator{
	margin:40px 0;
}

.post-content blockquote{
	padding:30px;
	font-style:italic;
	quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}


blockquote p {
  display: inline;
}

.post-content blockquote cite{
	font-weight:600;
	display:block;
	padding-top:15px;
}


/* WP Image alignment
------------------------------------------------------------------*/

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin: 0 25px 25px 0;
}
.alignright {
	display: inline;
	float: right;
	margin: 0 0 25px 25px;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

p img,
.wp-caption {
	margin-top: 0.4em;
}
.wp-caption,
.wp-block-image figcaption{	
	margin-bottom: 1.625em;
	max-width: 100%;
	padding: 14px 9px 9px 9px;
}

.wp-block-image figcaption{
	line-height:1.4em;
	padding:10px !important;
}

.wp-caption img {
	display: block;
	margin: 0 auto;
	max-width: 98%;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	color: #666;
	font-family: Georgia, serif;
	font-size: 14px;
}
.wp-caption .wp-caption-text {
	margin-bottom: 0.6em;
	padding: 10px 0 5px 4px;
	position: relative;
}

img.size-full{
	height:auto !important;
	width:auto !important;
}




/* =Footer
----------------------------------------------- */

#footer{
	padding:40px 0 60px 0;
	background-image:url("images/footer-bg.png");
	background-repeat:no-repeat;
	background-position:-5% -6%;
	background-size:300px	
}

#footer .logo{
	position:absolute;
	left:20px;
	top:0;
}



#footer .links{
	width:80%;
	float:left;	
	padding-left:340px;
}

#footer .links ul{}

#footer .links ul li{
	float:left;
	width:33%;
	padding-bottom:5px;
}

#footer .links ul li a{
	color:#fff;
	text-decoration:none;
	font-size:16px;
}

#footer .links ul li a:hover{
	text-decoration:underline;
}


#footer .social{
	width:20%;
	float:right;	
	text-align:right;
}

#footer .social h6{
	color:#fff;	
}

#footer .social ul{
	padding:10px 0;
}

#footer .social ul li{
	float:right;
	margin-left:10px;
}

#footer .social ul li a{
	position:relative;
	color:transparent;
	background-color:#fff;
	display:block;
	font-size:24px;
	text-align:center;
	border-radius:50%;
	width:38px;
	height:38px;
}


#footer .social ul li a i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


#footer .subscribe{
	margin-top:30px;
}

#footer .subscribe span.label{
	padding-left:5px;	
}


.popup-form{
	display:none;
	padding:20px;
	background-image:url("images/footer-bg.png");
	background-repeat:no-repeat;
	background-position:-50% top;
	background-size:80%;		
	max-width:90%;
	width:500px;
	position: fixed;
  max-height: 80vh; /* Adjust as needed */
  overflow-y: auto; /* Enable vertical scrolling */		
	top: 20%;
	left: 50%;
	transform: translate(-50%, -20%);
	z-index: 99; /* Ensure the popup appears above other elements */	
	
}

.popup-form h3{
	text-transform:uppercase;	
}

.popup-form h4{
	text-transform:uppercase;
	padding-bottom:20px;
	color:#fff;
}

.popup-close {
	position: absolute;
	right: 20px;
	top: 20px;
	color: #fff;
	font-size: 32px;
}

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* Grey background with 50% opacity */
	z-index: 99; /* Ensure the overlay appears below the popup */
}

/* 
** Contact Form 7 Styles 
*/

.wpcf7-form input[type="text"], 
.wpcf7-form input[type="email"], 
.wpcf7-form input[type="url"], 
.wpcf7-form input[type="password"], 
.wpcf7-form input[type="search"], 
.wpcf7-form input[type="number"], 
.wpcf7-form input[type="tel"], 
.wpcf7-form textarea {
	color: #231f20;
	width: 100%;
	padding: 12px 16px;
	border-radius: 0;
	border: 0;
	font-size:16px;
	font-family: 'Open Sans', sans-serif;	
}

.wpcf7-form p {
    margin: 0 0 28px;
}

.wpcf7-text:focus, 
.wpcf7-textarea:focus {
	outline: 2px solid #fbb900;
	outline-offset: 0;
}

span.wpcf7-not-valid-tip {
	color: #fff;
	font-size:14px;
}

.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 !important;
	padding: 10px 20px !important;
	color:#fff !important;
	border: 0 !important;
	font-size: 16px !important;
}

.wpcf7-submit{
	font-weight:700;
}

.wpcf7 form.sent .wpcf7-response-output {
	background-color: #46b450; /* Green */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	background-color: #dc3232; /* Red */
}