/*
Theme Name: hello
Version: 2.0
Description: WordPress theme for INSPIRE
Author: INSPIRE
Author URI: https://inspiredm.co.uk
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hello

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*
Colours
Lemon           #ffdd00	rgba(255,221,0,1)
Lime            #acc12f rgba(172,193,47,1)
Red             #f93943 rgba(249, 57, 67,1)
Slate           #3d405b rgba(61, 64, 91,1)
Lavender        #b4adea rgba(180, 173, 234,1)
Light Orange    #ffb774 rgba(255,183,116,1)
Orange          #ff9a53 rgba(255,154,83,1)
*/

/*** General ***/
* { padding: 0px; margin: 0px; }
p { margin: 10px 0px }
html, body { height: 100% }
body { font-family: 'Montserrat', sans-serif; font-size: 14px; color:#000; margin:0; font-weight:400; background: #F4F2EE; }
.inwrap { width: 100%; display: flex; flex-direction: column; min-height: 100%}
.contentwrap { width: 95%; margin: 0 auto; min-height: 100dvh; }
.clear { clear: both; display: block; }
a, a:link, a:active, div a { text-decoration:none; }
a img {border:none }

.alignleft { float: left }
.alignwide { width: 97%; margin: 0 auto }

/*** Skip Links ***/
.skip-link { position: absolute; top: -100px; left: 0; padding: 8px; background: #fff; z-index: 100; }
.skip-link:focus { top: 0; }
.screen-reader-text {  clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

/*** Header ***/
.header { margin: 0 auto; width:95%; position:relative; padding: 0 2.5% }
.header .logonavwrapper { display: flex; align-items: center; justify-content: space-between; width: 100% }
.header .logonavwrapper .logo { position: relative; z-index: 10000; max-width:90%; transition: all 0.4s ease-in-out 0s }
.header .logonavwrapper .logo img { display:block; margin: 0 auto; text-align:center; width:100%; height:auto}
.header .description { font-size: 2.5em; font-weight: 300; text-transform: uppercase; margin: -1% 0 0 -.175%; color: #fff; z-index: 10}
.stick { position: fixed; top: 0; background: rgba(255,183,116,0.9); z-index: 1000; box-shadow: 0 5px 10px rgba(0,0,0,0.1)}
.stick .logo { width: 7.5% !important; transition: all 1s ease-in-out 0s}

/*** Navigation ***/
.navigation { text-transform: uppercase; font-weight: 300; position: absolute; right: 2.5% }
.navigation ul { list-style:none; display:flex; }
.navigation ul li a:hover { text-decoration:none; }
.navigation li.current_page_item { font-weight: 600; }
.navigation li a { font-weight: 500 }
.navigation li ul { z-index: 9999; position: absolute; left: -999em; height: auto; margin: 0px; color:#000; flex-direction: column; display: none } 
.navigation li ul ul { margin: -35px 0 0 166px; }
.navigation li:hover ul ul, #subnav li:hover ul ul ul { left: -999em; }
.navigation li:hover ul, .navigation li li:hover ul, .navigation li li li:hover ul { left: auto; }
.navigation li.book a { color: #fff; font-weight: 500; background: #000; padding: 6px 12px; border-radius: 3px; border: 1px solid #000; transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease; }
.navigation li.book a:hover { color: #000; border: 1px solid #000; background: #fff; }
.navigation li { position: relative; margin: 0 20px }
.navigation li::after { content: ""; position: absolute; width: 100%; height: 2px; bottom: -5px; left: 0; background-color: #000; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out; }
.navigation li.current-page-item:hover:after { content: none; }
.navigation li:hover:after { visibility: visible; transform: scaleX(1); }
.navigation li:last-child { margin: 0 0 0 20px}
.navigation li:last-child:hover::after { visibility: hidden }

/*** Mobile Menu ***/
.menu-toggle-label span.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.mobile { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; overflow-y: auto; transition: transform 0.3s ease; transform: translateX(-100%); display: flex; justify-content: center; align-items: center; font-size: 1.5em; }
.mobile.active { transform: translateX(0); background-image: linear-gradient(to right, rgba(255,221,0,0.95) 0%, rgba(255,154,83,0.95) 100%); }
.menu-toggle { display: none; }
.menu-toggle-label { width: 30px; height: 21px; cursor: pointer; z-index: 100000; display: none; position: relative }
.menu-toggle-label span { display: block; width: 100%; height: 2px; margin-bottom: 5px; background: #000; transition: transform 0.3s, opacity 0.3s; }
.menu-toggle-label span:last-child { margin-bottom: 0; }
.menu-toggle:checked + .menu-toggle-label span:nth-child(2) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle:checked + .menu-toggle-label span:nth-child(3) { opacity: 0; }
.menu-toggle:checked + .menu-toggle-label span:nth-child(4) { transform: translateY(-7.5px) rotate(-45deg); }
ul#mobile-menu-list { list-style: none; font-size: 1.25em; text-align: center; text-transform: uppercase; font-weight: 500 }
ul#mobile-menu-list li { margin: 1em 0; }
ul#mobile-menu-list li a { color: #000; transition: color 0.3s ease; }
ul#mobile-menu-list li a:hover { color: #fff; font-weight: 700 }

/*** Content Home ***/
.contenthome { width: 100%; margin: 0 auto; display: flex; flex-direction: column}
.contenthome h2 { font-size: 15vh; font-weight: 900; text-transform: uppercase; color: #000; line-height: 1; z-index: 100; margin: 0}
.contenthome h2 a { color: rgba(255,255,255,0.4)}
.contenthome h2.about a:hover { background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%) ; -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.8 }
.contenthome h2.work a:hover { background: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%) ; -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.8 }
.contenthome h2.services a:hover { background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); ; -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.8 }
.contenthome h2.contact a:hover { background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); ; -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.8 }
.contenthome h2.websites a:hover { background: linear-gradient(to right, #f7d500 0%, #ff9a53 100%); ; -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.8 }

/*** Content ***/
.page { float:left; width:100%; }
.page .postHead { background: none; }
.postContent { padding: 1% 0 0; }
.postContent a { color: #000; text-decoration:underline }
.postContent .half { width:48%; float:left}
.postContent h1 { font-size: 2.5em; font-weight: 300; margin:0.5em 0 ; }
.postContent h2 { font-size: 2em; margin:0.5em 0 ; }
.postContent h3 { font-size: 1.75em; margin: 1em 0; line-height:110%; }
.postContent h4 { font-size: 1.5em; margin: 1em 0; }
.postContent h5 { font-size: 1.25em; margin: 1em 0; line-height:135%; }
.postContent h6 { font-size: 1.2em; margin: 1em 0; line-height:130%; }
.postContent p { font-size: 1.1em; margin: 1em 0 ; line-height:160%; }
.postContent p.intro { font-size: 1.4em; margin: 1em 0 ; line-height:150%; }
.postContent p sup, .postContent p sub { font-size: 0.5em; }
.postContent ul { margin: 5px 0px 5px 0; }
.postContent ul li { line-height: 140%; list-style:inside; padding: 0.5em 0 }
.postContent ol li { padding:1em 0; font-size: 1.1em; line-height: 160%}
.postContent ol { margin: 5px 0px 5px 22px; }
.postContent blockquote { font-weight:normal; margin: 1% 0; padding: 0.25% 0 ; }
.postContent blockquote h3 { font-size:20px ; letter-spacing:2px; margin:15px 0 5px; text-transform:uppercase}
.postContent blockquote p { margin: 1%; font-size: 1.25em; line-height: 140%; font-weight: 300; }
.postContent blockquote h6 { padding: 0 0 15px 45px; }
.postContent hr { width:100%; margin: 5px 0 15px; border-top: 1px solid #000; float:left; border-bottom:none; border-left:none; border-right:none }
.postContent img { max-width: 100%; height:auto }
.postContent blockquote.half { float:left; width: 48%; margin: 0 2% 0 0 }
.postContent a.post-edit-link { margin: 2% 0; clear:both}
.flex50 { flex: 0 0 50%; padding: 0; position: relative }
.flex33 { flex: 0 0 32%; padding: 0 0 3em; margin: 0 0 2% 0; }
.category-resources .flex33 { border-bottom: 1px solid #c6c6c6 }
.flex50 img, .flex33 img { width:100%; float: left}
.flex100 { display: flex; padding: 0; flex-wrap: wrap; justify-content: flex-start; gap: 2%}
h1.cattitle { margin: 1% 0; font-size: 2.5em; font-weight: normal; text-transform: capitalize }
h3.worktitle { font-size: 2em; font-weight: 300; color: #000; margin: 2% 0 0; float: left }
h3.worktitle:hover, h2.blogtitle:hover { color: #888;}
h2.blogtitle { font-size: 1.5em; color: #000; margin: 2% 0 0; display: inline-block }
.headerimage { width:100%; float:right; margin: 0 0 25vw; background-size: cover; background-position: center; background-repeat: no-repeat; height: 30vw; position: fixed; display: flex; align-items: center; justify-content: center}
.headerimage h1 { text-align: center; font-size: 6em; color: #fff; text-transform: uppercase; font-weight: 700}
.headerimagemargin { margin: 30vw 0 0; background: #F4F2EE; position: relative; padding: 1% 2.5% }
.catintro { font-size: 1.5em; margin: 1em 0 }

/*** Specials ***/
.postContent .wp-caption { background: #f8f7eb; border: solid 1px #EBE9D7; text-align: center; padding-bottom: 4px; }
.postContent .wp-caption img { border: solid 5px #f8f7eb; }
.postContent .wp-caption p { margin: 0px; }
.postContent .imageborder img { border: 1px solid #d4d4d4 }
figcaption { text-align: center }
h1.hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.home .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg { color: #fff; fill: #fff}
.wp-block-code { background: rgba(255,255,255,0.5); padding: 1em }
.alignfull { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw; }

/*** Tags ***/
a.tag-link { padding: 0.5em 1em; border: 1.5px solid #c6c6c6; text-decoration: none; margin: 0.25em 1em 0.25em 0; display: inline-block; border-radius: 20px; color: #6f6f6f; font-size: 12px; font-weight: 600 }
a.tag-link:hover { border: 1.5px solid #888;  }
.headertags { margin: 2% 0; padding: 1em 0; border-top: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6  }

/*** Projects ***/
.projectsheader { float: left; width: 100%; position: relative; background: #fff}
.projectsheader h2 { text-align: center; margin: 1em 0; text-transform: uppercase; clear: both }
.projects { display: flex; width: 100%; justify-content: space-between; background: #ffffff; flex-wrap: wrap; position: relative }
.project { position: relative; background: #000; width: 25% }
.projects img { max-width: 100%; height: auto; position: relative; float: left }
.projects img:hover { opacity: 0.2 }
.projects h2{ position: absolute; text-align: center; top: calc(50% - 0.75em); color: #fff; font-size: 1.5em; width: 100% }

/* Contact Form */
.kb-adv-form-label { font-size: 12px; letter-spacing: 2px; color: #888; font-weight: 600; margin: 0 0 5px }

/*** Sidebar home ***/
.sidebarhome { width: 95%; height:auto; padding: 1% 2.5%; float:left; overflow: hidden; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); position: relative; color: #fff }
.custom-background .sidebarhome { border-top: 1px solid #000 }
.sidebarhome .sidebarItem { flex: 1 }
.sidebarhome .sidebarItem h3 { font-size: 1.35em; font-weight: 400; margin:0;  width:98%; padding:1% 0; }
.sidebarhome .sidebarItem p { font-size: 1.15em; font-weight: 400; }
.sidebarhome .sidebarItem .textwidget { float:left; padding: 0 2% 0 0; width: 98% }
.sidebarhome .sidebarItem a { color: #fff }
.sidebarhome .sidebarItem img.alignleft, .sidebar .sidebarItem img.alignleft { float: left; margin: 0 1% 0 0 }
div.sidebarItem:before, div.sidebarItem:after { display: none }

/*** Footer ***/
.footer { color: rgba(255,255,255,0.5)}
.footer { width: 100%; height:auto; margin: 0 auto; font-size:0.75em; clear:both; line-height:140%; background: #0c0c0c; float: left }
.footer .fleft { width: 48%; float: left; margin: 1% 0 1% 2%; }
.footer .fright { width: 48%; float: left; text-align:right; margin: 1% 2% 1% 0; }

/*** Footer Navigation ***/
.footer ul#menu-footer-menu, .footer ul#footer-menu { float:left; display: table; margin: 1% auto 0; width: 100% }
.footer ul#menu-footer-menu li, .footer ul#footer-menu li { display:inline-block; padding: 0 0.5% }

/*** Blog Navigation ***/
.blogNavigation { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "leftlabel rightlabel" "lefttitle righttitle"; column-gap: 40px; row-gap: 8px; width: 100%; margin: 1em auto; border-top: 1px solid rgba(0,0,0,0.5); padding: 1em 0 0 }
.blogNavigation .alignleft { grid-area: leftlabel; justify-self: start; text-align: left; font-size: 0.75em; text-transform: uppercase; letter-spacing: 2px }
.blogNavigation .alignlefttitle { grid-area: lefttitle; justify-self: start; text-align: left; }
.blogNavigation .alignright { grid-area: rightlabel; justify-self: end; text-align: right; font-size: 0.75em; text-transform: uppercase; letter-spacing: 2px }
.blogNavigation .alignrighttitle { grid-area: righttitle; justify-self: end; text-align: right; }
.blogNavigation a { text-decoration: none }
.blogNavigation a:hover { text-decoration: underline }

/* -- Media Queries -- */

@media only screen and (min-width : 601px) and (max-width : 900px) {
.navigation { display: none }
.menu-toggle-label { display: block }
.header .logo { margin: 1% 38% ; width:24%; }
.contenthome h2 { font-size: 12vh; }
.projects h2 { font-size: 1.2em }
}

@media only screen and (max-width : 600px) {
.navigation { display: none }
.menu-toggle-label { display: block }
 body.page-id-359 { background-position: -150px }
.header .logo { width:40% !important; margin: 5% 2% !important }
.header .logo img, .headerhome .logo img { width:100%; margin: 1% 0 }
.header .description { font-size: 1.5em;  margin: -3% 0 0 1%}
h1.cattitle { margin: 1% 2% }
h2.blogtitle { font-size: 1.25em; }
.headerimage h1 { font-size: 2em; }
.contenthome h2 { font-size: 8vh; }
.postContent { padding: 1% 2.5% 0 }
.content, .sidebar { width: 100%; float:left }
.headimage { width:100%; margin: 0 0 1% 0 }
.flex33 { flex: 0 0 95%; }
.catintro { margin: 1em 2.5% }
h3.worktitle { font-size: 1.5em}
.project { width: 50% }
.projects h2 { font-size: 1.2em }
.kadence-blocks-gallery-item__caption { display: none }
.sidebarhome { flex-direction: column }
.sidebarhome .sidebarItem { text-align: center }
}