/*
Theme Name: Trawlerman's Catch 2024
Author: Ross Brown
Author URI: www.rossbrown.co.uk
Version: 1.0, 2024
*/

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;}
ol, ul {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;}


/* Setup
_________________________________________________ */

/* Site Colours
_________________________________________________ */

:root {
  --grey: rgba(28,31,40,1);
  --green: rgba(54,202,206,1)
}

.green {color: var(--green);}


html, body{height: 100%; width: 100%; }

html {scroll-behavior: smooth;}

body { background-image: url(/wp-content/themes/tmc24/images/waterbg.png); background-repeat: repeat;}

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

	.clearer10 {height: 1vw;} .clearer20 {height: 2vw;} .clearer30 {height: 3vw;} .clearer40 {height: 4vw;} .clearer50 {height: 5vw;}
	.clearer60 {height: 6vw;} .clearer70 {height: 7vw;} .clearer80 {height: 8vw;} .clearer90 {height: 9vw;} .clearer100 {height: 10vw;}

/* Fonts and Text
	_________________________________________________ */

p, li, h1, h2, h3, h4, h5, h6,
label, button, input, select, button, input[type=submit],
a.button, button p, button a {
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: 1.2vw;
	line-height: 180%;
	font-weight: 300;
	color: #000;
	}
	
p.product, .product p {font-weight: 600; color: var(--green);}	
p.prices, .prices p {color: #000; font-size: 1vw;}	

p.smaller {font-size: 0.8vw;}
		
h1 {
	font-size: 3.5vw;
	color: #000;
	line-height: 120%;
}

h3 {
	font-size: 1.5vw;
	color: #000;
	line-height: 120%;
}

h3 span {font-weight: 600;}

a {color: inherit; text-decoration: none; border-bottom: 1px dotted}

a.none {border-bottom: 0 !important;}

strong {font-weight: 600;}

/* Lists
_________________________________________________ */

ul {list-style-type: none;}
li {margin: 0 0.5vw 0 0; list-style-type: disc; list-style-position: outside; margin-left: 2vw;}

hr {display: none !important;}


/* Setup
_________________________________________________ */

main {width: 80%; margin-left: 10%; clear: both; float: left;}

#opentoday {
	width: 100%;
	text-align: center;
	padding: 1vw 0;
	/* background: #39466f;
	border: 1px solid #fff;
	border-left: none;
	border-right: none; */
}
	
header 
{float: left;
	width: 80%;
	padding: 0 10% 20px 10%;
	background-image: url(/wp-content/themes/tmc24/images/water3.png);
	/* background-size: cover; */
	/* clip-path: ellipse(100% 55% at 48% 44%); */
	background-position: bottom;
	background-size: cover;
}

header > .wrapper {display: flex; width: 100%;}

header > .wrapper > div {float: left; text-align: center; width: 15%; align-items: center; justify-content: center; padding-top: 5vw}
	header > .wrapper > div:nth-of-type(2) {width: 70%;}
	header > .wrapper > div:nth-of-type(3) {padding-top: 0; margin-top: -0.5vw;}


	header > .wrapper > div h3, header > .wrapper > div p {color: #fff;}
		header > .wrapper > div p span {font-style: italic;}
	header > .wrapper > div img {width: 100%; height: auto;}
			header > .wrapper > div img.logo {
				border-radius: 50%;
				border: 3px solid #fff;
				width: 80%;
				float: left;}
			header > .wrapper > div img.closed {
				width: 80%;
				float: right;}

#callNow {width: 40%; background: #fff;}
	#callNow img {width: 50%;}

#ot {width: 80%;
	float: left;
	margin-left: 10%;
	text-align: center;
	padding: 3vw 0;}
	
	#otmobile {
		width: 100%;
		float: left;
		text-align: center;
		display: none;
		margin: 3vw 0;
}

#urgent {float: left;
margin-left: 10%;
text-align: center;
padding: 3vw 0;
padding: 0.8vw 2vw;
border-radius: 10px;
background: #FFE500;
}

#urgent p {
color: #000 !important;
font-size: 1vw;
font-weight: 300;
padding: 0.5vw 1vw;
display: inline-block;
}	

#urgent img {
	width: 2vw;
	height: auto;
	vertical-align: middle;
	margin-right: 1vw;
}
	
	
#ot p {display: block;
		padding: 0.8vw 2vw;
		border-radius: 10px;
		background: var(--green);}

	#otmobile p {color: #fff;}	

#menu {width: 80%;
	float: left;
	clear: both;
	margin: 2.5vw 10%;}
	
#threepics {
	clear: both;
	width: 80%;
	display: flex;
	margin: 2.5vw 10%;
	text-align: center;}
	
#threepics > div {
	flex: 1;
	min-width: 0;
}	
	
#threepics > div img {
	width: 80%;
	border-radius: 50%;
	border: 2px solid var(--green);
}
	
	
#contacts {
	float: left;
	clear: both;
	width: 80%;
	padding: 3vw 0;
	display: flex;
	text-align: center;
	background: #fff;
	margin: 2.5vw 10%;
	border-radius: 10px;
	border: 2px solid var(--green);
}

	#contacts > div {flex: 1; width: 33%}
		#contacts > div img {width: 15%;}
	
#map {float: left; width: 100%; clear: both;}
	#map iframe {width: 100%;}	
	
footer {float: left; clear: both; width: 80%; padding: 3vw 10%; background: var(--green);}
	footer p {color: #fff;}
	
footer a  {border-bottom: none !important}	
	
footer .ftrl {
	width: 75%;
	float: left;
}

footer .ftrl img {max-width: 50px;}	
	
footer .ftrr {width: 20%; float: right;}
	footer .ftrr img {width: 100%;
		max-width: 100px;
		float: right;}
		
#heartwrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2vw;
	margin-top: 1vw;
}		
		
.heart {
		  font-size: 2vw;
		  position: relative;
		}
		
		.heartbeat {
		  position: relative;
		  z-index: 1;
		  -webkit-animation: beat 2s linear infinite;
				  animation: beat 2s linear infinite;
		}
		
		.heartecho {
		  position: absolute;
		  top: 0;
		  right: 0;
		  bottom: 0;
		  left: 0;
		  -webkit-animation: echo 2s linear infinite;
				  animation: echo 2s linear infinite;
		}
		
		@-webkit-keyframes beat {
		  0% {
			transform: scale(1);
		  }
		  14% {
			transform: scale(0.9);
		  }
		  21% {
			transform: scale(1.1) skew(0.004turn)
		  }
		  28% {
			transform: scale(1) skew(0.008turn);
		  }
		  35% {
			transform: scale(1) skew(0)
		  }
		}
		
		@keyframes beat {
		  0% {
			transform: scale(1);
		  }
		  14% {
			transform: scale(0.9);
		  }
		  21% {
			transform: scale(1.1) skew(0.004turn)
		  }
		  28% {
			transform: scale(1) skew(0.008turn);
		  }
		  35% {
			transform: scale(1) skew(0)
		  }
		}
		
		@-webkit-keyframes echo {
		  0% {
			opacity: 0.5;
			transform: scale(1);
		  }
		  14% {
			opacity: 0.4;
			transform: scale(0.8);
		  }
		  21% {
			opacity: 0.4;
			transform: scale(1.1);
		  }
		  100% {
			opacity: 0;
			transform: scale(3);
		  }
		}
		
		@keyframes echo {
		  0% {
			opacity: 0.5;
			transform: scale(1);
		  }
		  14% {
			opacity: 0.4;
			transform: scale(0.8);
		  }
		  21% {
			opacity: 0.4;
			transform: scale(1.1);
		  }
		  100% {
			opacity: 0;
			transform: scale(3);
		  }
		}


/**
 * Tabs
 */
.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs label {
 order: 1;
 display: block;
 padding: 0.5vw 1vw 0.2vw 1vw;
 margin-right: 0.5vw;
 cursor: pointer;
 background: rgba(255,255,255,0.1);
 /* font-weight: bold; */
 transition: background ease 0.2s;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 color: #fff;
}

.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 2vw;
  background: #fff;
  border-radius: 10px;
  border-top-left-radius: 0;
  border: 2px solid var(--green);
}

.cols2tab {column-count: 2; 
	break-inside: avoid-column;
}

.listing {
	break-inside: avoid;
	float: left;
	clear: both;
	margin-bottom: 2vw;
}

.tabs input[type=radio] {
  display: none;
}

.tabs input[type=radio]:checked + label {
  background: var(--green);
  color: #fff;
  font-weight: 600;
}

.tabs input[type=radio]:checked + label + .tab {
  display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
.tabs label {
	order: initial;
  }

  .tabs label {
	width: 100%;
	margin-right: 0;
	margin-top: 0.2rem;
  }
}


@media screen and (max-width: 800px) {
	
	p, li, h1, h2, h3, h4, h5, h6,
	label, button, input, select, button, input[type=submit],
	a.button, button p, button a,
	p.prices, .prices p, p.smaller {
		font-size: 2.2vw;
		}
	
	
	header > .wrapper > div:first-of-type 
	{display: none}

	header > .wrapper > div:nth-of-type(2) 
	{width: 100%;}
	
	header > .wrapper > div:nth-of-type(2) p 
	{display: none;}
	
	header > .wrapper > div:nth-of-type(3) 
	{position: absolute; right: 0;}
	
	#ot {display: none;}
	
	#otmobile {display: block;}
	
	.tabs label, .tabs .tab {border-radius: 0}
	.tabs label {background: var(--green);}
	
	#contacts {display: block}
	
	#contacts > div {flex: revert; width: 100%;}
	
	}