/*
	Theme Name: Gracie Bloodstock
	Theme URI: graciebloodstock.com
	Description: WP Theme for Gracie Bloodstock
	Version: 1.005
	Author: Squatch Creative
	Author URI: https://squatch.us

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic,700italic);

:root {
	--cream:#f8f6e9;
	--black:#1d1d1d;
}

body {
	margin:0px; 
	padding:0px;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size:1.1rem;
	line-height:135%; 
	color:#3d3d3d;
	background:#f8f6e9;
} 


/*WP CORE
=========================*/

*,:after,:before{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility}.alignnone{margin:5px 20px 20px 0}.aligncenter,div.aligncenter{display:block;margin:5px auto}.alignright{float:right;margin:5px 0 20px 20px}.alignleft{float:left;margin:5px 20px 20px 0}a img.alignright{float:right;margin:5px 0 20px 20px}a img.alignleft,a img.alignnone{margin:5px 20px 20px 0}a img.alignleft{float:left}a img.aligncenter{display:block;margin-left:auto;margin-right:auto}.wp-caption{background:#FFF;border:1px solid #F0F0F0;max-width:96%;padding:5px 3px 10px;text-align:center}.wp-caption.alignleft,.wp-caption.alignnone{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{border:0;height:auto;margin:0;max-width:98.5%;padding:0;width:auto}.gallery-caption,.wp-caption .wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

.alignfull, .container.alignfull {
	width:100%;
	max-width:100%;
	margin:0;
}

@media all and (min-width:1300px) {
	.alignwide,
	.container.alignwide {
		width: 1280px;
		max-width: 100%;
		position: relative;
		left: 0;
		margin:0 auto;
	}
	
}

.grecaptcha-badge {
	display: none;
	visibility: hidden;
	pointer-events: none;
}
article > *:not(.alignwide, .alignfull) {
    width: 1024px;
    margin: 0 auto;
	max-width:100%;
}

.wp-block-image {
	margin-bottom:0;
}

.wp-block-image img {
    max-width: 100%;
    display: block;	
}

.wp-block-columns {
    margin-bottom: 0;
}

::selection {
    background-color:#414b53;
    color: #ffffff;
}

html {
	font-size:18px;
}

div { 
	display:block; 
	position:relative; 
	margin:0px; 
	padding:0px; 
}
.body-wrapper {
	max-width:100%;
	width:100%; 
	overflow:hidden; 
}
.container {
	float:none; 
	clear:both; 
	margin:0px auto; 
	padding:0px;
	width:100%; 
	height:auto; 	
}
.row {
	clear:both; 
	margin:0px auto; 
	padding:0px; 
	width:100%; 
	height:auto; 
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:stretch;
	max-width:1080px; 
}
div[class*='span'] {
	float:left;
	margin:0px auto; 
	padding:28px 28px; 
	height:auto;
   	box-sizing: border-box;
}
.span5 { width:5%; }
.span10 { width:10%; }
.span15 { width:15%; }
.span20 { width:20%; }
.span25 { width:25%; }
.span30 { width:30%; }
.span33 { width:33%; }
.span35 { width:35%; }
.span40 { width:40%; }
.span45 { width:45%; }
.span50 { width:50%; }
.span55 { width:55%; }
.span60 { width:60%; }
.span65 { width:65%; }
.span66 { width:66%; }
.span70 { width:70%; }
.span75 { width:75%; }
.span80 { width:80%; }
.span85 { width:85%; }
.span90 { width:90%; }
.span100 { width:100%; }

h1 {
	font-family:Georgia, 'Georgia', Times New Roman, Serif;
	font-size:3rem;
	line-height:135%;
	margin:0 0 1.5rem 0;
	letter-spacing:3px; 
	font-weight:400;
	margin-top:0px; 
	text-transform:uppercase; 
	color:#4d4d4d;
}

h2 {
	font-family:Georgia, 'Georgia', Times New Roman, Serif;
	font-size:2.4rem;
	line-height:135%;
	margin:1.5rem 0;
	color:#4d4d4d;
}

h3 {
	font-size:1.8rem;
	line-height:135%;
	margin:1.5rem 0;
}

h4 {
	font-size:1.4rem;
	line-height:135%;
	margin:1rem 0;
}

p {
	font-size:1.1rem;
	line-height:140%;
	margin:1.1rem 0;
	padding:0;
}
article ul li {
    font-size: 1.1rem;
    line-height: 150%;
}
a {
	transition: 180ms ease all; 
	text-decoration:none;
	color:var(--wp--preset--color--primary);
}
a:hover {
	color:#000000;
}
a.large-link {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:5;
}
img, a img {
	display:inline-block; 
	max-width:100%; 
	height:auto; 
	border:0px;
	padding:0px;
	margin:0px auto;
}
svg {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
}
small {font-size:70%;}
.bold, strong {font-weight:bold;}
.italic, em { font-style:italic;}
.hidden { display:none; }
.clear {	clear:both; float:none; display:block; position:relative; }
.text-center { text-align:center; }
.text-right { text-align:right; } 
.no-gap { margin:0px auto !important; padding:0px !important; } 
hr.wp-block-separator {
    display: block;
    clear: both;
    position: relative;
    max-width: 100%;
    width: 100%;
    border: 0px;
    border-bottom: 1px #dfdfdf solid;
    height: 1px;
    margin: 1rem auto;
}
overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: rgba(0,0,0,.5);
}

/* FORMS & BUTTONS
============================== */

input, textarea {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    padding: 12px 24px;
    margin: 8px auto;
    font-size: 1rem;
    line-height: 100%;
    border: 1px solid var(--black);
    color: var(--black);
    font-family: 'Source Sans Pro';
}

a.button, input[type="submit"] {
    display: inline-block;
    position: relative;
    margin: 1rem auto;
    padding: 1rem 1.95rem;
    width: auto;
    height: auto;
    font-size: 1.1rem;
    line-height: 100%;
    text-transform: uppercase;
    border: 0px;
    background: var(--black);
    color: white;
    transition: 180ms ease-in-out all;
    letter-spacing: 3px;
    font-family: 'Source Sans Pro';
}

a.button:hover, input[type="submit"]:hover {
	background:#000000;
	color:white;
}
.wp-block-button__link:hover {
    background: black;
    color: white;
}



p {
}

a:link, a:visited {
	text-decoration:none;
	color:black;
}

a:hover {
	color:#4d4d4d;
}
img, a img {
	display:inline-block; 
	max-width:100%; 
	height:auto; 
	border:0px;
	padding:0px;
	margin:0px auto;
}
small {font-size:80%;}
.bold, strong {font-weight:bold;}
.italic, em { font-style:italic;}
.hidden { display:none; }
.clear {	clear:both; float:none; display:block; position:relative; }
.text-center { text-align:center; }
.text-right { text-align:right; } 








/*HEADER
==================*/

.header {
	padding-top:30px; 
}

.logo {
    display: block;
    margin: 0px auto;
    width: 300px;
    height: auto;
    max-width: 100%;
}





/* NAVIGATION
=====================*/

ul.menu {
	list-style:none; margin:0px; padding:0px;
}

ul.menu li {
	list-style:none; margin:0px 0px 0px -2px; padding:0px;
	display:inline-block;
}

ul.menu li a:link, ul.menu li a:visited {
    display: block;
    position: relative;
    height: auto;
    width: auto;
    padding: 4px 20px;
    margin: 0px auto;
    font-size: 0.8rem;
    font-weight: 100;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #FFF;
    background: transparent;
}

ul.menu li a:hover {
	color:#aaa; 
}


.footer ul.menu li a:hover {
	color:#aaa; 
}

ul.menu li.mobile-menu {
	display:none; 
}
















/* SOCIAL
=========================*/

ul.social {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

ul.social li {
    display: block;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

ul.social li a {
    display: block;
    position: relative;
    width: 26px;
    height: 26px;
}


.header ul.social {
	position:absolute; 
	top:0; right:12px;
	text-align:right; 
}

.header ul.social li a:hover {
	transform: translate(0,-4px);
}

.footer ul.social li a:hover {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}













/* PAGE CONTENT
=======================*/

.video-player {
	background:black;
}

.page-content {
	padding:50px 0px 100px 0px; 
}

.services-container {
	display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content:space-between;
}

.service-boxes {
	width:calc(33% - .5em);
	background: #fff;
    border: 1px #ddd solid;
	padding:0px; 
	margin:0px;
	margin-bottom:1em;
}

.service-image {
	width:100%;
	height:200px;
	margin:0px;
	padding:0px;
	opacity:0.76;
}

.service-boxes h4 {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    padding: 14px 18px;
    border-bottom: 1px #ddd solid;
    margin: 0px auto;
    color: var(--black);
    font-size: 1rem;
    line-height: 22px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.service-boxes p {
	padding:12px 18px;
	margin:0px;
	font-size:13px;
	line-height:18px; 	
}

/* FOOTER 
====================*/

.footer {
	padding-bottom:55px; 
}

.footer .logo {
	padding:50px 0px 20px 0px; 
}

.footer a {
	color:white;
}












.black-background {
    background: var(--black);
    color: white;
}

.black-background ul.social li a svg {
    fill: white;
}

a.logo svg {
    fill: white;
}

body:not(.home) .logo {
	width: 180px;
}

video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

.home .page-content {
    padding: 0;
}

a.sound-toggle {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1;
    width: 28px;
    height: 28px;
}

a.sound-toggle svg {
    fill: white;
    display: none;
}

a.sound-toggle.sound-off svg.sound-off {
    display: block;
}

a.sound-toggle.sound-on svg.sound-on {
    display: block;
}

.home .header {
    position: absolute;
    z-index: 10;
    background: transparent;
}

.home .header .row:first-of-type  .span100 {
    padding-top: 12vw;
}

.footer form.wpcf7-form > p {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    gap: 1rem;
}

.footer form.wpcf7-form .wpcf7-form-control-wrap {
    width: calc(50% - 0.5rem);
}

.footer form.wpcf7-form .wpcf7-form-control-wrap:nth-child(3) {
    width: 100%;
}

.footer input, .footer textarea {
    background: var(--black);
    border: 2px solid white;
    color: white;
}

.footer input[type="submit"] {
    width: 100%;
}












/**** MEDIA QUERIES *****/
/**** MEDIA QUERIES *****/
/**** MEDIA QUERIES *****/
@media all and (max-width:1023px) {
	
	div[class*='span'] {
		width:100%;
		float:none;
		clear:both;
		padding: 16px;
	}

	.video-player video {
		width: 100%;
		height: 100vh;
		object-fit: cover;
	}
	.video-player {
		height: 100vh;
	}
	
	article > *:not(.alignfull) {
		padding: 0 16px;
	}

	.service-boxes {
		width: 100%;
	}

	.service-image {
		height: 300px;
	}




}
/**** MEDIA QUERIES *****/
/**** MEDIA QUERIES *****/
/**** MEDIA QUERIES *****/