@charset "utf-8";
/* CSS Document */
:root {
	--bar-width: 30px; --bar-height: 5px; --hamburger-gap: 3px; --foreground: #819A31; --background: white; --animation-timing: 200ms ease-in-out; --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2); --hamburger-margin: 8px; --grid-4-column-gap: 8px; --id-green01: #9DC41D; --id-green-02: #819A31; --id-green-03: #626F36; --id-green-04: #3F452D; --id-green-05: #31332A; --id-purple: #614A6B; --id-purple-50: #b0a5b5
}
#one {
	
}
@keyframes fade-in {
	from {opacity: 0;} to {opacity: 1;}
}
.bg-black {
	background-color: #0D0D0D; color: white
}
.bg-blue-dark {
	background-color: #1E4959 ; color: white
}
.bg-blue-light {
	background-color: #0396A6 ; color: white
}
.bg-pink {
	background-color: #F20587; color: white
}
.bg-white {
	background-color: white
}
body {
    text-align: center; font-family: 'Raleway', sans-serif; font-size: 16px; background-color: #FFFFFF; font-weight: 400; font-style: normal; width:100%; max-width: 1600px; margin: 0 auto; line-height: 1.5em;  
}
.bottom-block {
	background-color: #1E4959; color: white; margin: 0 10px 10px; border-radius: 15px
}
.bottom-hugger {
	position:absolute; bottom:0; text-align: center; width: 100%; margin: 10px 0
}
.button {
	  padding: 9px 15px; border-radius: 12px; cursor: pointer; margin: 0; font-size: 13px; font-weight: 400; text-align: center; background-color: #1E4959; color: #FFFFFF; display: inline-block; line-height: 1em; border: solid 1px #FFFFFF
}
a.button:link, a.button:visited {
	text-decoration: none; color: #FFFFFF
}
.div-120 {
	width: 120px
}
.div-140 {
	width: 140px
}
.div-160 {
	width: 160px
}
.div-800 {
	max-width: 800px; margin: 0 auto
}
.div-centre {
	margin-left: auto; margin-right: auto
}
.div-h-40 {
	height: 40px
}
.div-relative {
	position: relative
}
.flex, .flex-2-col {
	display: block
}
.flex-item-2 {
	margin-bottom: 10px;
}
.float-left-image, .float-right-image {
	margin: 0 auto
}
.footnote  {
  padding-left: 5em; text-indent: -5em; font-size: 80%; font-style: italic; line-height: 1em;
}
#full-nav {
	text-align: right; padding: 0 10px; margin: 1px 0 0; display: none
}
.grid-container-2 {
		display: grid; grid-template-columns: 1fr; gap: 10px
	}
h1 {
	font-family: "Quicksand", sans-serif; font-optical-sizing: auto;  font-size: 1.8rem; font-weight: 600; color: #1E4959; line-height: 2rem;
}
h2 {
	font-family: "Quicksand", sans-serif; font-optical-sizing: auto;  font-size: 1.6rem; font-weight: 600; color: #1E4959; position: relative; border-radius: 2px; padding-bottom: 12px; transition: all 1s ease-in-out; line-height: 1.7rem; --h2-theme-color: #0396A6;
}
.bg-pink h2, .bg-blue-light h2, .bg-blue-dark h2, .bg-black h2 {
	font-family: "Quicksand", sans-serif; font-optical-sizing: auto;  font-size: 1.6rem; font-weight: 600; color: #fff; position: relative; border-radius: 2px; padding-bottom: 12px; transition: all 1s ease-in-out; line-height: 1.7rem; --h2-theme-color: #FFFFFF
}
h2::after {
	content: ''; display: block; margin: 0 auto; position: absolute; inset: 0; border-bottom: solid 4px var(--h2-theme-color); transition: all ease 500ms; width:600px; max-width: 90%
}
h2.fade {
	transition: opacity 1s; opacity: 0
}
h2.fade::after {
	content: ''; display: block; margin: 0 auto; position: absolute; inset: 0; border-bottom: solid 4px var(--h2-theme-color); width: 50px
}
h2.fade.in-view {
	opacity: 100%
}
h2.in-view {
	 font-size: 1.6rem; line-height: 1.8rem
}
h2.in-view::after {
	width:50px
}
section {
	opacity: 0; transition: all 2s ease
}
section.in-view {
	opacity: 1
}
.hamburger-menu {
	--x-width: calc(var(--hamburger-height) * 1.41421356237); display: flex; flex-direction: column; gap: var(--hamburger-gap); width: max-content; position: absolute; top: 16px; /*top: var(--hamburger-margin); left: var(--hamburger-margin);*/ right: 8px; z-index: 2; cursor: pointer;
}
.hamburger-menu::before, .hamburger-menu::after, .hamburger-menu input {
	content: ""; width: var(--bar-width); height: var(--bar-height); background-color: #0396A6;  border-radius: 999px; transform-origin: left center; transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing),  translate var(--animation-timing)
}
.hamburger-menu input {
	appearance: none; padding: 0; margin: 0; outline: none; pointer-events: none
}
.hamburger-menu:has(input:checked)::before {
	rotate: 45deg; width: var(--x-width); translate: 0 calc(var(--bar-height) / -2);
}
.hamburger-menu:has(input:checked)::after {
	rotate: -45deg; width: var(--x-width);  translate: 0 calc(var(--bar-height) / 2);
}
.hamburger-menu:has(input:checked) + .sidebar{
	translate: calc(100vw - 17rem);
}
.hamburger-menu input:checked {
	opacity: 0; width: 0
}
.hero-brand {
	background-image: url("images/tattoo-shoulder-480.jpg"); background-size: cover; padding-top: calc(80% - 2rem); padding-bottom: 5%; background-position: top center
}
.hero-toad {
	background-image: url("images/kiss-the-toad-480.jpg"); padding-top: calc(80% - 2rem); padding-bottom: 5%; background-position: top center
}
.hero-strategy {
	background-image: url("images/hero-strategy-480.jpg"); padding: calc(80% - 2rem) 5px 5%; background-position: top center; font-size: .8rem
}
h1.hero-strategy {
    font-size: 1.8rem
}
img {
	max-width: 100%; height: auto; display: block;
}
.inline-block {
	display: inline-block
}
#logo-bar {
	display: flex; background-color: #FFFFFF; padding: 10px 10px 0; text-align: left; border-bottom: solid 1px #0396A6; justify-content: space-between; margin: 0 auto; max-width: 1600px; margin-bottom: -1px
}
.logo {
	width:auto; height: 75px; margin: 0 0 5px 5px
}
.lozenge-15 {
	border-radius: 15px; overflow: hidden
}
.lozenge-10 {
	border-radius: 10px; overflow: hidden
}
.lozenge-20 {
	border-radius: 20px; overflow: hidden
}
.lozenge-bottom-15 {
	border-bottom-left-radius: 15px; border-bottom-right-radius: 15px
}
.main-menu-item {
	margin: 0 0 0 6px; background-color: #0396A6; color: #3F452D; padding: 6px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; overflow: hidden; height: 40px
}
.main-menu-item img {
	display: inline-block
}
a.main-menu-item:link, a.main-menu-item:visited {
	color: white; text-decoration: none; font-weight: normal
}
a.main-menu-item:hover {
	background-color: #F20587; color: white; 
}
a.main-menu-item:active {
	background-color: #0D0D0D; color: #FFFFFF; 
}
.margin-bottom-10 {
	margin-bottom: 10px
}
.margin-10 {
	margin: 10px
}
.margin-h-10 {
	margin-left:10px; margin-right: 10px
}
.margin-v-10 {
	margin-top: 10px; margin-bottom: 10px
}
.margin-top-10 {
	margin-top: 10px;
}
#mobile-holder {
	overflow: hidden; display: block
}
#mobile-menu {
	border-right: solid 1px #0F70B7; border-left: solid 1px #9DC41D; border-bottom: none; border-top: none; position: absolute; top: 65px; right:0; border-bottom-left-radius: 10px; background-color: #FFFFFF; background-color: rgba(255,255,255, 0.6); backdrop-filter: blur(10px); padding: 0 15px; overflow: hidden; max-height: 0; transition: max-height 0.5s, padding 0.5s; z-index = 2
}
#mobile-menu a:link, #mobile-menu a:visited {
	text-decoration: none; color: black
}
#mobile-menu a:active {
	color: #EA5B0C
}
#mobile-menu img {
	margin: -4px -15px 0 0
}
a.mobile-nav:link, a.mobile-nav:visited  {
	text-decoration: none; color: white; font-weight: normal
}
a.mobile-nav:hover, a.mobile-nav:active {
	color: white
}
.override-block {
	display: inline-block
}
.pad-0-10 {
	padding: 0 10px
}
.pad-5 {
	padding: 5px
}
.pad-5-10 {
	padding: 5px 10px
}
.pad-10 {
	padding: 10px
}
.pad-10-20 {
	padding: 10px 20px
}
.pad-10-30 {
	padding: 10px 30px
}
.pad-10-40 {
	padding: 10px 40px
}
.pad-20 {
	padding: 20px
}
.pad-20-10 {
	padding: 20px 10px
}
.pad-30-10 {
	padding: 30px 10px
}
.pad-30-20 {
	padding: 30px 20px
}
.pad-30 {
	padding: 30px
}
.sidebar {
	margin-top: 83px; background-color: #1E4959;  width: 15rem; padding: 0.5rem 1rem; transition: translate var(--animation-timing); position: absolute; z-index: 2; translate: -100%; top: 20px; text-align: left; border-bottom-left-radius: 15px
}
.text-align-centre {
	text-align: center
}
.text-align-800-centre {
	text-align: center
}
.text-align-left {
	text-align: left
}
.text-align-right {
	text-align: right
}
.text-blue-dark {
	color: #1E4959 !important
}
.text-blue-light {
	color: #0396A6 !important
}
.text-italic {
	font-style: italic
}
.text-white {
	color: white !important
}
.text-bold {
	font-weight: 700
}

.top-hero {
	margin: 0; background-size: cover; margin-top: -1px
}

@media screen and (min-width: 480px) {
	.hero-brand {
        background-image: url("images/tattoo-shoulder-600.jpg"); padding-top: calc(80% - 2rem); padding-bottom: 5%;
    }
	.hero-strategy {
        background-image: url("images/hero-strategy-600.jpg"); padding: calc(60% - 2rem) 10px 3%;
    }
	.hero-toad {
        background-image: url("images/kiss-the-toad-600.jpg"); padding-top: calc(75% - 2rem); padding-bottom: 5%
    }
}

@media screen and (min-width: 600px) {
	.flex {
        display: flex; gap: 10px;
    }
	.flex-item-2 {
        flex-basis: 50%
    }
	.grid-container-2 {
		grid-template-columns: 1fr 1fr;
	}
	.hero-brand {
        background-image: url("images/tattoo-shoulder-800.jpg"); padding-top: calc(70% - 2rem); padding-bottom: 5%;
    }
	.hero-strategy {
        background-image: url("images/hero-strategy-800.jpg"); padding: calc(55% - 2rem) 5px 5px; font-size: 1rem
    }
	.hero-toad {
        background-image: url("images/kiss-the-toad-800.jpg"); padding-top: calc(60% - 2rem);
    }
}

@media screen and (min-width: 800px) {
	.float-left-image {
        float: left; margin: 0 10px 10px 0
    }
	.float-right-image {
        float: right; margin: 0 0 10px 10px
    }
	.hero-strategy {
        background-image: url("images/hero-strategy-1000.jpg"); padding: calc(45% - 2rem) 5px 5px;
    }
	.hero-toad {
        background-image: url("images/kiss-the-toad-1000.jpg"); padding-top: calc(65% - 2rem); padding-bottom: 5%
    }
	.text-align-800-centre {
	text-align: left
}
}

@media screen and (min-width: 1000px) {
    #full-nav {
		display: block; position: relative; padding: 4px 0; margin: -1.95em auto 0; max-width: 1600px;
	}
	.hero-strategy {
        background-image: url("images/hero-strategy-1200.jpg"); padding: calc(30% - 2rem) 15px 5px;
    }
	.hero-toad {
        background-image: url("images/kiss-the-toad-1200.jpg"); padding: calc(55% - 2rem) 0 4%
    }
	#mobile-holder {
		display: none
	}
}

@media screen and (min-width: 1200px) {
	.hero-strategy {
        background-image: url("images/hero-strategy-1600.jpg"); padding: calc(20% - 2rem) 15px 5px;
    }
	.hero-toad {
        background-image: url("images/kiss-the-toad-1600.jpg"); padding: calc(45% - 2rem) 0 2%;
    }
}
@media screen and (min-width: 1400px) {
	.hero-toad {
        padding: calc(35% - 2rem) 0 3%; background-position: top
    }
}
@media screen and (min-width: 1600px) {
	.hero-toad {
        background-image: url("images/kiss-the-toad-1920.jpg"); padding: calc(26% - 2rem) 0 15px; background-position: top
    }
}