/*   
Theme Name: Engine Head 2021
Theme URI: https://www.engineheadstudio.co.uk/
Description: Basic theme for commercial use.
Author: Fran Green
Author URI: https://www.engineheadstudio.co.uk/
Version: 1.0

*/



:root {
  --warmBG: #fffffd;
  --textColor: #4B5359;
  --blue: #2D3F4F;
  --lightGreen: #667078;
}

@font-face {
    font-family: 'Istok-Web', sans-serif;
    src: url('/eh2021-theme/fonts/IstokWeb-Bold.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;

}


/**------------------------------------Links----------------------------------**/

a {
    text-decoration: none;
    color: #db9a22;
}


a:hover {
	cursor:pointer;
}


figure a {
	background-color: transparent;
}

nav li:hover {
	color: #d6a982;
}

.innerwrapper .menu .orange-me .menu-item {
	color: #db9a22!important;
}

.wp-block-file__button {
    background: #ffffff;
    font-size: 1em;
    padding: 15px;
    color: #47413e;
    text-decoration: none;
}

:where(.wp-block-file__button):is(a):active, :where(.wp-block-file__button):is(a):focus, :where(.wp-block-file__button):is(a):hover, :where(.wp-block-file__button):is(a):visited {
    box-shadow: none;
    color: #47413e;
    opacity: 1;
}





/**-------------------------------------------Standards--------------------------------**/

html {
	width:100%;
}


body {
	font-family: "Literata", serif;
	font-optical-sizing:auto;
    font-size: 14px;
    font-weight: 400;
    line-height: 217%;
	color:var(--textColor);
    -webkit-box-sizing:border-box;
            box-sizing:border-box;	
	margin:0;
	width:100%;
	word-wrap:break-word;
	overflow-x:hidden;
}

figure {
	padding:0;
	margin:0;
}

h1, h2 {
	font-family: "Istok Web", sans-serif;
    font-weight: 900;
    font-style: normal;
	font-size:inherit;
	line-height:1.5em;
	text-transform: uppercase;
}

h3, h4, h5, h6, h7 {
	font-family: "Literata", serif;
    font-weight: 700;
    font-style: normal;
	font-size:inherit;
	line-height:1.5em;
	text-transform: none;
	margin: 0 0 7px 0;
}


p {
	word-wrap:break-word;
	padding:0;
	margin:0 0 34px 0;
}


div {
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
	overflow-wrap:break-word;
}



blockquote {
    padding: 0;
    margin: 0;
}


.alignleft {
    float: left;
	height:auto;
	width:auto;
	margin-right:17.5px;
	max-width:100%;
}

.alignright {
    float: right;
	height:auto;
	width:auto;
	margin-left:17.5px;
	max-width:100%;
}

.aside-block {
	line-height:1.4;
}

.aside-block img {
		margin-bottom:5px;
	}

.darkBG {
	background-color: #3e3c3c;
}

.bg-logo {
    background-image: url(https://www.engineheadstudio.co.uk/wp-content/uploads/2024/09/enginehead-design-logo-2024.png);
    background-repeat: no-repeat;
    background-size: 15%;
    background-position: center right;
}

.border-left {
	border-left: 1px solid gray;
}


.hide-on-desktop {
	display:none;
}


.innerwrapper .wp-block-list li {
	list-style: disc;
}


.wp-block-query ul li {
	list-style:none;
}

video {
    width: 100%;
    max-height: 100%;
}



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


.innerwrapper {
    width: 1200px;
    margin: 0 auto;
    max-width: 100%;
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
	padding-left:20px;
	padding-right:20px;
}

.no-padding-or-margin {
	padding: 0;
    margin: 0;
    line-height: 15px
}

.no-padding-8-margin {
	padding: 0;
    margin: 0 0 8px 0;
    line-height: 15px
}




.one-half-box {
    width: 50%;
    display: inline-block;
	text-align: left;
	vertical-align: top;
}

.one-half-box-right-align {
    width: 50%;
    display: inline-block;
	text-align: right;
	vertical-align: top;
}

.one-third-box {
    width: 33.3%;
    display: inline-block;
	text-align: center;
	vertical-align: top;
}

.opacity-half {
	opacity: 0.5;
}

.page-top-quote {
	padding-left:18px;
	border-left:1px solid gray;
}

.page-top-quote p {
	margin:0;
	padding:0;
	line-height:1.9;
}

.two-thirds-box {
	width:66.6%;
	display:inline-block;
	text-align:left;
	vertical-align:top;
}


.padding-left {
	padding-left: 50px;
}

.padding-right {
    padding-right:50px;
}


.top-image-bg {
	background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    height: 0;
    padding-bottom: 20em;
	opacity: 0.8;
}


.top-image-no-bg {
    width: 100%;
    height: auto;
    position: relative;
}

.bg-style {
	background-repeat: no-repeat;
    background-size: cover;
    height: 0;
    padding-bottom: 42em;
}

.quote-box {
	background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    height: 0;
    padding-bottom: 35em;
}

.quote-actual {
    text-align: right;
    margin-top: 17px;
    width: 100%;
    float: right;
    padding: 10px;
    color: #cbc7c6;
}


.content-box {
	margin-top:17px;
    width: 650px;
    max-width: 100%;
    line-height: 1.5;
}


.cta-item {
    display: inline-block;
    height: 24px;
    width: auto;
	padding-right: 1em;
}

.cta-item img {
    height: 1.7em;
    width: 1.7em;
}

.cta-item a {
	border:none;
	background-color: transparent;
}


.box-one .hidden {
	display:none;
}

:where(.wp-block-columns.is-layout-flex) {
    gap: 0;
}




/**-------------------------------------------------Blocks------------------------------------------------**/

cite {
    font-weight: 700;
    font-style: normal;
    font-size: 12px;
}



.wp-block-cover-image, .wp-block-cover {
	padding:0;
}

.vidBG {
    border-top: 21px solid black;
    border-right: 50px solid black;
    border-left: 50px solid black;
    border-bottom: 50px solid black;
    background-color: black;
}




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

.header-custom a {
	color:inherit;
}

.header-custom h1 {
	line-height:1;
}

.header-custom p {
	color: #a8ac9c;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
	margin:0;
	line-height: 1.1;
}

.header-custom h1 {
	margin:0;
}

.header-custom li a {
	color:white;
}

.header-custom .wp-block-cover .wp-block-cover__image-background, .wp-block-cover video.wp-block-cover__video-background, .wp-block-cover-image .wp-block-cover__image-background, .wp-block-cover-image video.wp-block-cover__video-background {
	object-fit: contain;
	left:29%;
	max-height:58px;
	top: 5px;
}


/**menus**/

.toggle-nav {
	font-size: 1.6em;
    line-height: 0px;
    background: none;
    color: #dc9d63;
}

.menu li {
	list-style:none;
}

nav li a {
    color: #2d3f4f;
    font-weight: 400;
	text-decoration:none;
}





/**-------------------------------------------------Home Page------------------------------------**/


.home #myVideo {
	-o-object-fit: cover;
	   object-fit: cover;
    width: 100vw;
	max-width:100%;
    top: 0;
    left: 0;
}




/**-------------------------------------------------------Blog Page-----------------------------------**/



.wp-block-post-featured-image :where(img) {
	border: 1px solid #b9b9b9;
}





/**------------------------------------------------Single Post--------------------------------------**/



.post-template-default .content li {
    list-style: disc;
}

.wp-block-post-excerpt {
    line-height: 1;
}

/**-------------------------------------------Contact-----------------------------------**/


.page-template-custom-contact .top-image-bg:after {
	content: '';
    display: block;
    background-image: url(https://www.engineheadstudio.co.uk/wp-content/uploads/2021/08/art-thing-2.2.svg);
    background-size: 31em;
    background-repeat: no-repeat;
    height: 0;
    padding-bottom: 20em;
}

.page-template-custom-contact #nav-box-short {
	background-image:none;
}

.white-logo  {
    position: absolute;
    bottom: 0;
    max-width: 100%;
}

.wpcf7 {
    background-image: url(https://www.eclecticcomponents.com/wp-content/uploads/2020/03/Eclectic-Components-Logo-transparent-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #53738c;
    color: white;
    padding: 35px;
    margin: 75px 0;
    border: 2px solid white;
    border-radius: 3px;
    -webkit-box-shadow: #bbb9b9 5px 5px 8px 6px;
            box-shadow: #bbb9b9 5px 5px 8px 6px;
    max-width: 100%;
}


input {
    max-width: 100%;
}

textarea {
    max-width: 100%;
}


#pageid-18 h1 {
    display: none;
}

/**------------------------------------------------Password protected template--------------------------**/

#main article .post-password-form {
    margin: 150px auto;
    max-width: 100%;
	width: 1100px;
    max-width: 100%;
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
	padding-left:20px;
	padding-right:20px;
}

/**-----------------------------------------------Archive-------------------------------------**/


.archive article {
    margin-bottom: 100px;
}

.archive .page-title {
	font-size:30px;
}

.statement-box {
    margin-bottom: 75px;
    font-family: 'Economica', sans-serif;
    color: #fefcfce0;
    font-weight: 100;
    font-size: 1.1em;
    width: 664px;
    margin: 0 auto 75px;
    max-width: 100%;
    background-color: #6f6760;
    padding: 35px;
}

/**------------------------------------------------------Error 404---------------------------------------**/

.error404 .page-header {
    margin: 36px 0 80px;
}


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

.footer-custom {
	line-height:1.4;
	color: #afafaf;
}



/**---------------------------------------------------------------Media Queries-------------------------------------------------**/





@media screen and (max-width: 781px) {
	
	.aside-block {
		padding-top: 1em!important;
	}
	
	.aside-block figure {
		margin-left: 0!important;
	}
	
	.aside-block .wp-block-group {
		padding-left: 0!important;
	}

	
	.main-title {
		font-size:1.3em;
	}
	
	
	.archive .page-title {
        width: 100%;
    }
	
	.bg-logo {
		background-size:0;
	}
	
	.header-custom h2 {
		line-height:1;
	}
	
	.header-custom .wp-block-cover .wp-block-cover__image-background, .wp-block-cover video.wp-block-cover__video-background, .wp-block-cover-image .wp-block-cover__image-background, .wp-block-cover-image video.wp-block-cover__video-background {
		display:none;
	}
    
	.hide-me {
		display:none!important;
	}
	
	.initial-me {
		align-items: initial!important;
	}
	
	.padding-left {
	    padding-left: 0;
    }
	
	.padding-right {
        padding: 0;
    }
	
	.page-top-quote {
		margin:11px 0;
	}
	
	.show-on-mob {
		display:block!important;
	}
	
	.wp-block-column {
		padding:0 25px 0 0!important;
		border:none;
	}
	
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        align-items: center;
        display: flex;
        justify-content: center;
    }
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-direction:column;
	}
	
	h1, h2, h3, h4, h5, h6, h7 {
		width:100%;
	}
	
	article .article-inner .center-flex {
		justify-content: center!important;
	}
	.wp-container-core-buttons-is-layout-1.wp-container-core-buttons-is-layout-1 {
		justify-content: center!important;
	}
	
	.has-text-align-right {
        text-align: center;
    }
	
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        align-items: start;
	}
	
	.wp-block-cover-image.is-position-bottom-right, .wp-block-cover.is-position-bottom-right {
        justify-content: flex-start;
    }
	
	.header-custom .wp-block-cover {
		width:12em!important;
	}
	
	.header-custom .is-layout-flow > .alignright {
		margin-inline-start:0;
	}
}



@media screen and (max-width: 500px) {
	
	.article-inner .add-flex-wrap {
		flex-wrap: wrap!important;
	}
	
	.article-inner .add-flex-wrap .wp-block-button {
		flex:1;
	}
	
	.article-inner .add-flex-wrap .wp-block-column {
		flex-basis:100%!important;
	}
	
	.article-inner .has-text-align-right {
		text-align:left!important;
	}
	
	
	.no-padding-or-margin {
		padding:0;
		margin:0;
	}
	
	.cta-item img {
		margin-right:1em;
	}
	
	.custom-logo-link img {
		max-width: 82%;
	}
	
	.font-sizing {
		font-size: 1em;
	}
	
	#nav-box-short {
		width:100%;
	}

	.menu-engine-head-one-container {
        text-align: left;
        width: 100%;
        padding: 0 20px;
    }
	
	.one-half-box {
        width: 100%;
	}
	
	.one-third-box {
        width: 100%;
	}
	
	.alignleft {
        float: none;
        width: 100%!important;
	}
	
	.header-small-inner .main-title {
        margin: revert;
		display:inline-block;
    }
	
	.menu-box {
		display:inline-block;
		float:right;
	}
	
	#nav-box-short {
		background-position:7em 0em;
		background-size:contain;
	}
	
}


@media screen and (max-width: 375px) {
	
	.main-title {
        font-size: 1.3em;
    }
	
	
}