/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
@import url('https://fonts.googleapis.com/css?family=Raleway:700&display=swap');
@font-face {
    font-family: GraublauWeb;
    src: url("fonts/Martens-Regular.otf") format("opentype");
}
:root {
	--primary-color: #009548;
	--secondary-color: #ce153f;
}
body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 14px;
}
a {
	color: #2ea3f2;
}
h1, h2, h3, h4, h5, h6 {
	color: #000;
	font-family: 'Open Sans', Arial, sans-serif;
}
p {
	color: #000;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}
.ab-social {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;

	a {
		margin: 0 3px 0 0;
	}
	i {
		color: #fff;
		background: var(--primary-color);
		border-radius: 50%;
		font-size: 18px;
		margin: 0 4px;
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	img {
		width: 40px;
		height: auto;
		box-shadow: none !important;
		margin-top: 10px;
	}
}
.one-container .site-content {
	padding: 0px;
}
/*============================================================================
                    Header CSS
=============================================================================*/
.action-bar {
	background: #000;
	max-width: 100%;
	padding: 10px 0 50px 0;

	& > div {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		max-width: 1100px;
		margin: 0 auto;
		padding-right: 20px;
	}
	a {
		div {
			color: #fff;
			font-size: 20px;
			padding: 0px !important;
			margin-right: 5px;
			font-weight: bold;
			transition: 0.2s;

			&:hover {
				color: #00843D;
			}
		}
	}
}
.main-navigation {
	background: #000;

	.menu-toggle {
		font-size: 30px;
		order: 4 !important;
		transform: scaleX(1.2);
	}
	.navigation-branding {
		.site-logo {
			img {
				width: 234px;
				height: auto;
				max-height: 100% !important;
				margin-bottom: -30px;
				object-fit: cover;
			}
		}
	}
	.main-nav {
		width: 100%;

		ul {
			max-width: 800px;
			margin: 0 auto;

			li {
				&[class*="current-menu-"] {
					& > a {
						background: none;
					}
				}
				a {
					color: #fff;
					text-transform: uppercase;
					font-weight: bold;
					font-size: 20px;

					&:hover, &:focus {
						background: none !important;
						color: grey;
					}
				}
				.sub-menu {
					background: #fff;

					li {
						&[class*="current-menu-"] {
							& > a {
								background: none;
							}
						}
						a {
							color: #000;
							font-size: 20px;
							font-weight: 700;

							&:hover {
								color: grey;
							}
						}
					}
				}
			}

			@media screen and (max-width: 768px) {
				position: absolute;
				background: #fff;
				width: 100%;
				left: 0px;
				top: 60px;
				z-index: 9999;

				li {
					a {
						color: #000 !important;
					}
					.sub-menu {
						margin-left: 25px;
					}
				}
			}
		}
	}
}
/*============================================================================
                    Footer
=============================================================================*/
.site-footer {
	background: var(--primary-color);

	.footer-content {
		background: var(--primary-color);
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 27px 0;
		max-width: 1100px;
		margin: 0 auto;

		i {
			font-size: 25px !important;
		}
		p {
			color: #fff;
			font-size: 22px;
			font-weight: 500;
			margin: 0px;
			text-align: center;
		}
	}

	@media screen and (max-width: 1250px) {
		padding: 0 20px;
	}
}
/*============================================================================
                    Banners
=============================================================================*/
.banner {
	height: 850px;
	display: flex;
	justify-content: space-between;
	flex-flow: column nowrap;
	margin: 0px;

	&.home-banner {
		background: url('/wp-content/uploads/2020/09/home-banner-img.jpg');
		background-position: 66% center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	&.gas-banner {
		background: url('/wp-content/uploads/2019/07/products-banner-img.jpg');
		background-position: 66% center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	&.gear-banner {
		background: url('/wp-content/uploads/2019/07/clothing-banner-img.jpg');
		background-position: 66% center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	&.read-banner {
		background: url('/wp-content/uploads/2019/09/read-up-banner.jpg');
		background-position: 66% center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	&.doc-banner {
		background: url('/wp-content/uploads/2019/07/doctor-header-img.jpg');
		background-position: 66% center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	&.cartridge-banner {
		background: url('/wp-content/uploads/2019/09/cartridge-header.jpg');
		background-position: 66% center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	&.concentrates-banner {
		background: url('/wp-content/uploads/2019/09/concentrates-header.jpg');
		background-position: 66% center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	&.flower-banner {
		background: url('/wp-content/uploads/2019/09/flower-banner.jpg');
		background-position: 66% center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	&.edibles-banner {
		background: url('/wp-content/uploads/2019/09/edibles-banner.jpg');
		background-position: 66% center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.bottom-text {
		font-size: 40px;
		font-weight: 700;
		font-family: 'Raleway', sans-serif;
		color: #fff;
		margin: 0 0 40px 0;
		letter-spacing: 5px;
		line-height: 1.2em;
		text-align: center;
		text-shadow: rgb(0, 0, 0) 5px 5px 10px, rgb(0, 0, 0) 5px 5px 10px;

		@media screen and (max-width: 600px) {
			font-size: 25px !important;
		}
	}
	.top-text {
		font-size: 150px !important;
		line-height: 1.2em;
		font-family: GraublauWeb;
		margin-top: 50px;
		color: #fff;
		text-align: center;
		text-shadow: rgb(0, 0, 0) 5px 5px 10px, rgb(0, 0, 0) 5px 5px 10px, rgb(0, 0, 0) 5px 5px 10px;

		@media screen and (max-width: 1250px) {
			font-size: 100px !important;
		}
		@media screen and (max-width: 600px) {
			font-size: 70px !important;
			margin-top: 80px;
		}
	}

	@media screen and (max-width: 767px) {
		height: 750px;
	}
	@media screen and (max-width: 480px) {
		height: 125vw;
	}
}
/*============================================================================
                    Content
=============================================================================*/
.basic-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: 50px 0;

	img {
		display: block;
		margin: 0 auto;
	}
	.content-wrapper {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 160px;
		margin-bottom: 50px;

		img {
			width: 173px;
			height: auto;
			display: block;
		}
		& > div {
			flex: 1;
		}
	}
}
.content-section {
	background: url('/wp-content/uploads/2019/07/geo-background-img.jpg');
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 35px 0;

	h3 {
		color: #fff;
		font-size: 22px;
		text-align: center;

		&:last-of-type {
			margin-bottom: 50px;
		}
	}
	.star {
		display: block;
		margin: 0 auto;
	}
	.text {
		max-width: 1100px;
		margin: 20px auto;

		h2.green-title {
			font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif;
			font-weight: 700;
			font-size: 35px;
			color: #00843d !important;
			line-height: 1.3em;
			text-align: left;

			@media screen and (max-width: 600px) {
				font-size: 30px;
				text-align: center;;
			}
		}
		p {
			color: #fff;
			font-size: 20px;
			text-align: left;
		}
	}
	.boxes {
		max-width: 1100px;
		margin: 20px auto;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		gap: 30px;

		&.small-text {
			h2 {
				font-size: 32px;
			}
		}
		h2 {
			color: #fff;
			font-family: GraublauWeb;
			font-size: 44px;
			line-height: 54px;
			text-align: center;
			text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
		}

		@media screen and (max-width: 1250px) {
			gap: 50px;
			margin-bottom: 50px;
		}
		@media screen and (max-width: 600px) {
			flex-flow: column nowrap;
			gap: 50px;
		}
	}

	@media screen and (max-width: 1250px) {
		padding: 35px 20px;
	}
}
/*============================================================================
                    WooCommerce
=============================================================================*/
.woocommerce {
	.site-content {
		max-width: 1400px;
		margin: 0 auto;
		padding-top: 100px;
		padding-bottom: 100px;
	}
	&.archive {
		.content-area {
			width: 80%;
		}
		.sidebar {
			width: 20%;
		}
	}
	&.woocommerce-shop {
		.content-area {
			width: 80%;
		}
		.sidebar {
			width: 20%;
		}
	}
}
.woocommerce-cart {
	.site-content {
		max-width: 1400px;
		margin: 0 auto;
		padding-top: 100px;
		padding-bottom: 100px;

		.wc-block-cart__submit-button {
			background: var(--primary-color);
		}
	}
}
.woocommerce-checkout {
	.site-content {
		max-width: 1400px;
		margin: 0 auto;
		padding-top: 100px;
		padding-bottom: 100px;

		.woocommerce-checkout-payment .place-order {
			background: var(--primary-color);
			border-radius: 10px;
			text-transform: uppercase;
			padding: 0 30px;
			color: #fff !important;
			font-weight: bold !important;
		}
	}
}
/*============================================================================
                    Woo Custom Sidebar
=============================================================================*/
.woocommerce {
	.products {
		.product {
			.woocommerce-loop-product__title {
				color: #000;
				font-weight: 600 !important;
				text-align: left;
			}
			.price {
				margin: 0px !important;
				text-align: left;

				.woocommerce-Price-amount.amount {
					color: #000;
					font-size: 18px;
					font-weight: 500 !important;
				}
			}
		}
	}
}
/*============================================================================
                    Woo Custom Sidebar
=============================================================================*/
.woocommerce.single-product {
	.summary {
		.product_title {
			font-weight: 500;
			color: #000;
		}
		.minus, .plus {
			display: none !important;
		}
		.single_add_to_cart_button {
			background: var(--primary-color) !important;
			border-radius: 10px;
			text-transform: uppercase;
			padding: 0 30px;
		}
		.qty {
			background: #bdbdbd !important;
			border-radius: 10px !important;
			margin-right: 10px !important;
			width: 100px !important;
			color: #000 !important;
		}
	}
}
/*============================================================================
                    Woo Custom Sidebar
=============================================================================*/
.woo-sidebar {
	.menu {
		margin-left: 0px !important;
		list-style: none;
		margin-left: 20px;

		.menu-item {
			font-weight: bold;
			list-style: none;
			margin-bottom: 10px;

			& > a {
				color: #000;
				font-size: 17px;
				width: 100%;
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;

				span {
					flex: 1;
					text-align: right;
				}
			}
			.submenu {
				margin-bottom: 10px;
				list-style: none;

				.submenu-item {
					a {
						color: #000;
						font-size: 16px;
					}
				}
			}
		}
	}
}
@media (max-width: 768px) {
	.woocommerce div#left-sidebar {
		display: none;
	}
}
/*============================================================================
                    Coming Soon
=============================================================================*/
.coming-soon {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	padding: 100px 0;

	img {
		width: 150px;
		height: auto;
		margin-bottom: 20px;
	}
	h1 {
		font-size: 40px;
		color: #000;
	}
}
/*============================================================================                    				
	Mobile / Responsive CSS
=============================================================================*/

    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    #site-navigation {
        margin-left: unset !important;
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(3) {
        margin-left: auto;
    }

@media screen and (max-width: 980px) {
	.action-bar > div {
		max-width: 781px;
		margin-right: 10%;
		padding: 0px;
	}
}
@media screen and (max-width: 480px) {
	.action-bar a div {
		font-size: 17px;
	}
	.location-button {
		position: absolute;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		top: 50px;
		left: 14px;
		background: var(--primary-color);
		width: 150px;
		height: 30px;
		padding: 0 10px 10px 0;
		padding-top: 9px;
		z-index: 99999999999;
	}
	.location-button h1 {
		font-size: 17px;
	}
	.location-button i {
		font-size: 20px;
	}
	.action-bar {
		justify-content: space-between;
		background: #000;
		margin: 0px;
	}
	.hbt-normal {
		display: none;
	}
	.hbt-mobile {
		display: block;
	}
	#logo {
		width: 234px !important;
		height: auto !important;
	}
	#main-header {
		background: #000;
	}
}