/*
Theme Name: Lirva Productions
Text Domain: mychildlirvaproductionstheme
Author: Lirva Productions
Author URI: https://www.lirvaproductions.com
Description: Child theme of Lirva Gemini for Lirva Productions
Template: Lirva-Gemini
Version: 1.0.0
*/ 

body {
	background-color:		#ffffff;
	font-family: 			'Assistant', sans-serif;
	font-size: 				17px;
	font-weight:			400;
	line-height:   			25px;
	color:					#161616;
	margin:					0;
}

a, a:visited {
	color:					#161616;
  	text-decoration:		underline;
}

a:hover  {
	color:					#161616;
  	text-decoration:		underline;
}


/* PAGE HEADER */
#page-header {
	position:				relative;
	background-color:		rgba(0, 0, 0, 0.9);
	color:					#ffffff;
	margin:					0 0 10px 0;

	width:					100%;
	height:					100%;
}

#page-header .page-title h1 {
    position: 				relative;
	display: 				flex;
    align-items: 			center;
    justify-content: 		center;
	min-height:				315px;
	font-family: 			"Cormorant Garamond", serif;
	font-size:				52px;
	line-height:      		65px;
	font-weight:			500;
	font-style: 			normal;
    color: 					#ffffff;
	text-transform:			uppercase;
	padding:				0 0 0 0;
	margin:					0 0 2px 0;
	z-index:				5;
}

#page-header .page-title {
	position:				relative;
	background-color: 		rgba(0, 0, 0, 0.2);
	padding:				25px;
    z-index:				2;
}

#page-header ul {
	padding-left:			0;
    margin-top: 			0;
    margin-bottom: 			0;
}

#page-header ul li {
	list-style-type:		none;
	padding-left: 			0;
    margin-bottom: 			0;
}

#page-header ul li a, #page-header .page-title a {
    color: 					#ffffff;
	text-decoration:		none;
}

/* Use the page id instead of the page name */
body.page div.page-header {
 	background-size: 		cover;
}

body.category-services div.page-header {
	background-image:  		url(../Lirva-LirvaProductions/images/header-services.jpg);
	background-position: 	50% 75%;
}

body.category-4 div.page-header {
	background-image:  		url(../Lirva-LirvaProductions/images/header-portfolio.jpg);
	background-position: 	50% 89%;
}

body.page-id-18 div.page-header {
	background-image:  		url(../Lirva-LirvaProductions/images/header-contact.jpg);
	background-position: 	50% 45%;
}

h1 {
	font-family: 			"Cormorant Garamond", serif;
	font-size:				45px;
	line-height:      		52px;
	font-weight:			500;
	font-style: 			normal;
	text-transform:			uppercase;
	padding:				0 0 0 0;
	margin:					0 0 15px 0;
	z-index:				5;
}

h2 {
	font-family: 			"Cormorant Garamond", serif;
	font-size:				38px;
	font-weight:			500;
	font-style: 			normal;
	line-height:      		46px;
	text-transform:			uppercase;
	margin:					10px 0 15px 0;
}

h3 {
	font-family: 			"Cormorant Garamond", serif;
	font-size:				34px;
	font-weight:			600;
	font-style: 			normal;
	line-height:      		38px;
	margin: 				10px 0 10px 0;
}

h4 {
	font-size: 				28px;
	font-weight:			400;
	line-height: 			1.2em;
	margin: 				10px 0 10px 0;
}

h5 {
	font-size: 				20px;
	font-weight:			600;
	line-height: 			1.2em;
	margin: 				10px 0 10px 0;
}

h5.wp-block-heading {
	color:					#bf953a;
}

h6 {
	font-size: 				17px;
	font-weight:			500;
	line-height: 			1.2em;
	margin: 				15px 0 10px 0;
}

p { 
	margin-top: 			5px;
    margin-bottom: 			12px;
}

p.bold-heading { 
    margin-bottom: 			15px;
}

b, strong {
    font-weight: 			bold;
}


/* LAYOUT */
.container {
    max-width: 				1500px;
	padding-top:			10px;
	padding-bottom:			20px;
	padding-right: 			25px;
	padding-left: 			25px;
	margin:					0 auto;
}

.is-layout-flex > :is(*, div) {
    margin: 				0 auto;
}

body.home #main-content {
    max-width: 				100%;
	padding:				0;
	margin:					0;
}

body.home div#content {
	margin:					0;
}

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

div[class*="col-"] {
	margin-top: 			8px;
	margin-bottom: 			8px;
}

.overlay {
	background-color: 		rgba(247, 247, 247, 0.7);
}

.opaque {
	background-color: 		rgba(247, 247, 247, 0.9);
}

.box-style {
	border-radius:			4px;
	border:					2px solid #ffffff;
}

figure {
    margin: 				10px 0 10px 0;
}

img.responsive {
	max-width: 				100%;
	height: 				auto;	
}

img.align-right {
	float: 					right;    
	margin: 				0 0 0 15px;
}

img.align-left {
	float: 					left;    
	margin: 				0 15px 0 0;
}

img.align-none {
	float: 					none;    
	margin: 				5px 5px 5px 0;
}

.fade {
    opacity: 				0.5;
    transition: 			opacity .65s ease-in-out;
}

.fade:hover {
    opacity: 				1;
}

.parallax {
    background-attachment: 	fixed;
    background-position: 	center;
    background-repeat: 		no-repeat;
    background-size: 		cover;
}

.shadow {
	box-shadow: 			-1px 5px 10px 2px rgba(204,204,204,1);
}

.w-border {
	border:					2px solid #ffffff;
}

.zoom:hover {
	transform: 				scale(1.15);
	font-size: 				18px;
}

.zoom {
	transition: 			transform .2s;
}

.fadein {
    opacity:				0;
}

.divider {
	width:					62%;
	height:					2px;
}


/* SITE STYLES */
#category-tutorials #page-header .page-title h1 {
    min-height: 			215px;
	flex-direction: 		column;
}

span.child-category-name {
    font-size: 				32px;
	line-height: 			32px;
    margin: 				22px 0 0 0;	
}

div.the-category .category-group {
    margin: 				0 0 25px 0;
}

div.parent-category-name  {
    font-size: 				28px;
	color:					#ffffff;
	line-height: 			28px;
	padding:				5px 8px 8px 8px;
    margin: 				0 0 5px 0;	
}

div.the-category ul.post-categories {
	margin-top: 			0;
    margin-bottom: 			0;
    padding-left: 			0;
}

div.the-category ul.post-categories li {
	padding:				5px 5px 5px 0;
	margin-bottom:			10px;
	border-bottom:			1px solid #042957;

    border: 				none;
    border-radius: 			0;
}

div.the-category h3.header {
	background:				#333333;
    font-size: 				24px;
	color:					#ffffff;
	line-height: 			28px;
	padding:				5px 8px 8px 8px;
    margin: 				0 0 3px 0;
}

div.the-category h3.header:before {
	font-family: 			'Material Symbols Outlined';
	vertical-align:			top;
	content:				"\e2c8";
}

div.the-category h3 ul.post-categories li a {
	color:					#ffffff;
}

div.the-category h3 ul.post-categories li {
	list-style-type:		none;
    padding: 				0;
    margin: 				0;
}

div.the-category ul li a.entry-title {
    display: 				block;
    font-size: 				17px;
    font-weight: 			600;
	line-height: 			1.5em;
    text-decoration: 		none;
    margin: 				0 0 5px 0;
}

div.the-category .sidebar ul, .category-group ul {
    border: 				none;
    border-radius: 			0;
	padding:				0;
	margin:					2px 0 5px 0;
}

div.the-category .sidebar ul li, .category-group ul li {
	list-style-type:		none;
    border-radius: 			2px;
    border: 				1px solid #cccccc;
    padding: 				10px 15px 14px 15px;
    margin: 				2px 0 5px 0;
}

div.the-category ul li a.read-more {
	display:				block;
	font-size:				16px;
	line-height:			20px;
    text-decoration: 		underline;
    margin: 				8px 0 0 0;
}

div.category-single .sidebar {
	height:					100%;
	padding-bottom:			5px;
}

div.category-single div.items {
	font-size:				15px;
	line-height:			21px;
}


/* HOME PAGE */
body.home {
	position:				relative;
}

body.home #footer {
	margin:					0;
}

div.home-content-block {
	margin-bottom:			0px;
}

div.home-intro {
	margin:					32px 0 0 0;	
}

div.home-content-block-container > div {
    display: 				flex;
	flex-direction: 		column;
    justify-content: 		center;
}

div.media-container, div.media-container .wp-block-column {
	z-index: 				2;
}

#media {
	display: 				flex;
	align-items: 			center;
	width:					100%;
    height: 				610px;
	background-image:  		url(../Lirva-LirvaProductions/images/homepage-header.jpg);
	background-position: 	50% 75%;
	background-repeat: 		no-repeat;
 	background-size: 		cover;
	-o-object-fit: 			cover;
	object-fit: 			cover;
	margin: 				0 0 28px 0;
    z-index: 				1;
}

#media a {
	display:				inline-block;
	color:					#ffffff;
	text-decoration:		none;
	margin:					0 5px 0 5px;
}

#media a:hover {
	color:					#ffffff;
	text-decoration:		underline;
}

#media div.media-container {
    display: 				flex;
    align-items: 			center;
    justify-content: 		center;
    flex-direction: 		column;
	background:				rgba(0, 0, 0, 0.1);
}

#media p.text-over-media {
	font-family: 			"Cormorant Garamond", serif;
	font-weight:			600;
	font-style: 			normal;
	color:					#ffffff;
	text-align:				center;
	letter-spacing:			1px;
	transition: 			all 0.5s;
	z-index: 				21;
	margin:					25px 5px 25px 5px;
}

#media span.media-text {
	display:				block;
	margin:					9px 5px 9px 5px;
}

#media p.text-over-media span.line-1 {
	font-size:				58px;
	line-height:			65px;
	text-transform:			uppercase;
}

#media p.text-over-media span.line-2 {
	font-size:				20px;
	line-height:			35px;
	text-transform:			uppercase;
}

#what-we-do {
	width:					100%;
	overflow:				hidden;
	background:				#f7f7f7;
	padding:				42px 55px 45px 55px;
    margin: 				20px 0 0 0;
}

#what-we-do h1 {
    margin: 				0 0 15px 0;
}

#what-we-do h3 {
    margin: 				0 0 1px 0;
}

#what-we-do div.wp-block-columns {
    display: 				flex;
	flex-direction: 		row;
    justify-content: 		center;
}

#what-we-do div.wp-block-columns > div.wp-block-column {
/*
    display: 				flex;
    flex-direction: 		column;
    justify-content: 		center;
*/
	background:				#ffffff;
	text-align:				center;
	border-radius:			5px;
	padding:				5px 35px 18px 35px;
    margin: 				15px 0 15px 0;
}

#what-we-do div.wp-block-column .wp-block-columns-is-layout-flex {
    gap: 					8em;
}

#what-we-do a {
	text-decoration:		none;
}

#what-we-do img {
	width: 					100%;
	max-width: 				275px;
	height: 				auto;
	margin:					0 auto;
} 

#what-we-do {
	min-height: 			650px;
}


/* SERVICES */
div.web-design {
	margin-top:				35px;
}

.web-design-fee, .annual-fee  {
	background:				#f7f7f7;
	height:					100%;
	text-align:				center;
	padding:				10px 22px 18px 22px;
	border-radius:			4px;
	box-shadow: 			-1px 5px 10px 2px rgba(204,204,204,1);
}

div.web-design h4 {
	font-family: 			"Cormorant Garamond", serif;
	font-weight:			500;
}

div.web-design-fees {
	margin:					0 0 25px 0;
}

div.web-design-fees div[class*="col-"] {
    margin-top: 			10px;
    margin-bottom: 			20px;
}

div.web-design-fees .wd-pages {
	font-size:				18px;
	font-weight:			500;
	margin:					0 0 5px 0;
}

.web-design-fee span  {
	display:				block;
	background-color:		#f7f7f7;
    color: 					#4aa156;
	font-size:				18px;
	font-weight:			700;
	text-transform: 		uppercase;
	line-height:			22px;
	margin:					5px 0 1px 0;
}

div.web-design-fees a.button.signup {
	width: 					auto;
	min-width: 				150px;
	max-width: 				150px;
	font-size: 				18px;
	line-height:			26px;
	padding:				8px 12px 8px 12px;
	margin:					12px 0 5px 0;
}

div.web-design-fees .wd-note {
	font-size:				15px;
	line-height:			20px;
	margin:					12px 0 0 0;	
}

ul.lirva-list { 
    padding-left: 			18px;
    margin-top: 			15px;
    margin-bottom: 			25px;
}

ul.lirva-list li { 
	background-image:   	url(../Lirva-LirvaProductions/images/tick.png);
	background-repeat:  	no-repeat;
	background-position:  	0% 30%;
	list-style-type:   		none;
	padding-left:   		30px;
	line-height:			24px;
	margin-bottom:			15px;
}

div.wcm {
    margin: 				35px 0 0 0;
}

div.wcm-item {
    margin: 				0 0 45px 0;
}

#print-design {
	margin-top:				15px;
}

#print-design div.print-item {
	width:					88%;
/*	background:				#f7f7f7; */
}

div.page-note {
	background:				#f7f7f7;
	margin-top:				25px;
	font-size:				16px;
	border-radius:			6px;
}

div.page-note .page-note-header {
	font-family: 			"Cormorant Garamond", serif;
	background:				#000000;
	font-size:				24px;
	color:					#ffffff;
	font-weight:			600;
	padding:				8px 22px 8px 22px;
	margin-bottom:			5px;
}

div.page-note .item {
	padding:				5px 22px 15px 22px;	
}

ul.va-support.lirva-list {
    margin-bottom:			38px;
}

span.va-title {
	font-size:				18px;
	font-weight:			600;	
}




/* PORTFOLIO */
#category-portfolio div.portfolio-filters {
    margin: 				2px 0 35px 0;
}

#category-portfolio span.filter-btn {
	display:				inline-block;
	font-size: 				20px;
    color: 					#fff;
    text-decoration: 		none;
    padding: 				6px 18px 6px 18px;
	margin-right: 			5px;
	border-radius:			3px;
    text-shadow: 		0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: 	#5bb75b;
    background-image: 	-moz-linear-gradient(top,#62c462,#51a351);
    background-image: 	-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
    background-image: 	-webkit-linear-gradient(top, #62c462, #51a351);
    background-image: 	-o-linear-gradient(top,#62c462,#51a351);
    background-image: 	linear-gradient(to bottom, #62c462, #51a351);
    background-repeat: 	repeat-x;
    filter: 			progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
    border-color: 		#51a351 #51a351 #387038;
    filter: 			progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

#category-portfolio span.filter-btn:hover {
    cursor: 				pointer;
    text-decoration: 		none;
    transition: 			opacity 0.2s ease-out;
}

#category-portfolio a {
	text-decoration:		none;
}

#category-portfolio h2 {
    font-size: 				20px;
    line-height: 			24px;
    text-transform: 		uppercase;
    margin: 				2px 0 2px 0;
}

#category-portfolio div.client-details {
	background:				#f7f7f7;
    padding: 				10px 15px 15px 15px;
}


/* DOWNLOAD MANAGER / DOWNLOAD PAGES */
#category-downloads div.media {
    align-items: 			center;
}

#category-downloads h3.package-title {
	margin:					0 0 4px 0 !important;
}

div.media .col-item {
	display:				inline-block;
	font-size:				14px;
	margin:					0 10px 0 2px;
}

div.media .title {
	display:				inline-block;
	margin:					0 3px 0 0;
}

div.media .update-date:before, div.media .download-count:before, div.media .file-size:before  {
    font-family: 			'Material Symbols Outlined';
    vertical-align: 		middle;
    font-size: 				24px;
}

div.media .update-date:before {
	content: 			"\e916";	
}

div.media .download-count:before {
	content: 			"\f000";	
}

div.media .file-size:before {
	content: 			"\e3f4";	
}



#category-downloads .wpdm-download-title a, #category-downloads .package-title a {
    pointer-events: 	none;
    cursor: 			default;
    color: 				#333333;
    text-decoration: 	none;
}

#category-downloads a.wpdm-download-link, #category-downloads a.btn-warning {
	font-size: 			20px;
    color: 				#fff;
    text-decoration: 	none;
	gap: 				.2rem;
    padding: 			8px 20px 8px 10px;
	margin-left: 		0;
	border-radius:		4px;
    text-shadow: 		0 -1px 0 rgba(0, 0, 0, 0.25);
}

#category-downloads a.wpdm-download-link {
    background-color: 	#5bb75b;
    background-image: 	-moz-linear-gradient(top,#62c462,#51a351);
    background-image: 	-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
    background-image: 	-webkit-linear-gradient(top, #62c462, #51a351);
    background-image: 	-o-linear-gradient(top,#62c462,#51a351);
    background-image: 	linear-gradient(to bottom, #62c462, #51a351);
    background-repeat: 	repeat-x;
    filter: 			progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
    border-color: 		#51a351 #51a351 #387038;
    filter: 			progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

#category-downloads a.wpdm-download-link:before {
    font-family: 		'Material Symbols Outlined';
	content: 			"\f090";
    vertical-align: 	middle;
    font-size: 			28px;
    color: 				#ffffff;
	
    display: 			inline-block;
    transition: 		transform 0.3s ease-in-out;
}

#category-downloads a.wpdm-download-link:hover:before {
    transform: 			translateY(-5px); 
}

#category-downloads a.btn-warning {
    background-color: #faa732;
    background-image: -moz-linear-gradient(top,#fbb450,#f89406);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
    background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
    background-image: -o-linear-gradient(top,#fbb450,#f89406);
    background-image: linear-gradient(to bottom, #fbb450, #f89406);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffab44f', endColorstr='#fff89406', GradientType=0);
    border-color: #f89406 #f89406 #ad6704;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

#category-downloads a.btn-warning:before {
    font-family:        'Material Symbols Outlined';
    content:            "\e8f4";
    vertical-align:     middle;
    font-size:          28px;
    color:              #ffffff;
    
    display:            inline-block;
    transform:          scale(0.95);
    
    /* 1. Add all properties you want to transition smoothly */
    transition:         transform 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
    
    /* 2. Fixes font blurriness and jitter during smooth CSS scale transitions */
    backface-visibility: hidden;
    will-change:        transform;
}

#category-downloads a.btn-warning:hover:before {
    transform:          scale(1.1);
    color:              #e0e0e0; /* Optional: Smoothly change color on hover too */
}


/* CONTACT PAGE / FORMS / DEFAULT STYLES */
.wpcf7 {
    margin: 				15px 0 4px 0;
}
	
.wpcf7-spinner {
    background-color: 		#23282d;
    opacity: 				0.75;
    width: 					24px;
    height: 				24px;
    margin: 				0 4px;
}

.wpcf7 form .wpcf7-response-output {
	font-size:				15px;
	text-align:				center;
    margin: 				0.1em 0.5em 1em;
    padding: 				0.2em 0.5em;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	border-color:			#dc3232;
}

.wpcf7 label {
	margin-top: 			0.2rem;
    margin-bottom: 			0.45rem;
}

.wpcf7 input, .wpcf7 textarea, .wpcf7 select, input, select {
    background-color: 		#fff;
    color: 					#000;
	border: 				1px solid #cccccc;
	border-radius:			3px;
	padding:				6px 6px 6px 6px;
}

input[type="checkbox"] {
	margin:					0 2px 0 0;
}

.wpcf7-text:focus, .wpcf7-textarea:focus, .wpcf7 select:focus, input[type="date"]:focus {
	outline:				2px solid #684f40;
}

.wpcf7-not-valid-tip {
    color: 					#dc3232;
    font-size: 				0.8em;
    font-weight: 			bold;
}


/* CONTACT PAGE */
#contact-page {
	position:				relative;
	z-index:				1;
	margin-top:				2px;
	margin-bottom:			15px;
}

#contact-page .row {
	display: 				flex;
	align-items: 			center;
	margin-top:				5px;
}

#contact-page .row div[class*="col-"] {
    margin-top: 			18px;
    margin-bottom: 			18px;
}

#contact-page .contact-form.contact {
	background:				#ffffff;
	color:					#333333;
	border-radius:			4px;
	box-shadow: 			-1px 5px 10px 2px rgba(204,204,204,1);
    padding: 				15px 25px 5px 25px;
	margin-bottom:			15px;
}

#contact-page .photo {
	width:					100%;
	text-align:				center;	
}

#contact-page .photo img {
	width: 					100%;
	max-width: 				510px;
	height: 				auto;
	border-radius:			50%;
    margin: 				0 auto;
}

#contact-page .contact-form .wpcf7 {
	position: 				relative;
    margin: 				5px 0 5px 0;
	z-index:				10;
}

#contact-page .contact-form label span {
	display:				block;
	margin:					0 0 1px 0;
}

#contact-page label input, #contact-page label textarea {
	width:					100%;
    padding: 				9px 7px 9px 7px;
}

#contact-page label {
    width:					100%;
    margin-bottom: 			1.1rem;
}

#contact-page div.submit-btn input {
	width:					100%;
}

.grecaptcha-badge {
	visibility: 			hidden;
}

.google-tos {
	background:				#f7f7f7;
	font-size:				13px;
	text-align:				center;
	padding:				8px 7px 8px 7px;
	margin:					2px 0 5px 0;	
}


/* POST PAGE PAGINATION */
#paginator a.page-numbers, #paginator span.page-numbers {
	display:				inline-block;
	font-size:				16px;
	line-height:			26px;
	text-decoration:		none;
    margin: 				2px 10px 2px 0;
	padding:				1px 8px 1px 8px;
	border:					1px solid #cccccc;	
}

#paginator span.current, #paginator a.page-numbers:hover {
	background:				#2e6499;
	color:					#ffffff;
}

#paginator a:hover {
	text-decoration:		none;
}

.pagination {
	padding-left:			15px;
	padding-right:			15px;	
}

a.goback {
	display:				block;
	font-size:				16px;
	text-decoration:		none;
	text-transform:			uppercase;
	margin: 				0 0 15px 0;
}

a.goback:hover {
	text-decoration:		underline;
}

a.goback:before {
	font-family: 			'Material Symbols Outlined';
	content:				"\e5cb";
	font-size:				32px;
	vertical-align:			middle;
	margin-left: 			-12px;
}


/* PAGE LEADERS */
ul.leaders {
    overflow-x: 			hidden;
    list-style: 			none;
    font-size: 				16px;
    padding: 				0 0 2px 0;
    margin: 				8px 8px 5px 2px;
}

ul.leaders li {
    display: 				flex;
    align-items: 			flex-end;
    padding: 				0 0 2px 0;
    margin: 				0 0 8px 0;
}

ul.leaders span:first-child {
    display: 				flex;
    flex-grow: 				1;
    align-items: 			flex-end;
}

/* Automatically generates the dots mathematically */
ul.leaders span:first-child::after {
    content: 				""; 
    flex-grow: 				1;
    height: 				4px; 
    margin-bottom: 			8px; 
    margin-left: 			0.5em;  
    margin-right: 			0.5em; 
    background-image: 		radial-gradient(circle, #999 1.5px, transparent 1.5px);
    background-size: 		8px 100%; 
    background-repeat: 		repeat-x;
}

ul.leaders span + span {
    white-space: 			nowrap; 
}


/* REVEAL ANIMATION */
.reveal {
	position: 				relative;
	transform: 				translateY(150px);
	opacity: 				0;
	transition: 			0.9s all ease;
}

.reveal.active{
	transform: 				translateY(0);
	opacity: 				1;
}

/* SLIDE FROM LEFT */
.slide-from-left {  
	/* This section calls the slideInFromLeft animation we defined below */
	animation: 				slideInFromLeft 3s ease-out 0s 1;
}

@keyframes slideInFromLeft {
  0% {
    transform: 				translateX(-100%);
  }
  100% {
    transform: 				translateX(0);
  }
}


/* SOCIAL MEDIA */
ul.social {
    padding-left: 		0;
    margin-top: 		0;
    margin-bottom: 		0;
}

ul.social li {
	list-style: 		none;
	display: 			inline-block;
	line-height:		1px;
	padding:			0;
	margin:				0 5px 0 0;
}

ul.social li:last-child {
	margin:				0 0 0 0;
}


ul.social li .icon {
	font-size:			22px;
}

ul.social li a:hover .icon { 
	transform: 			rotateY(360deg); 
}

ul.social li a .icon {
	display: 			inline-block; /* allows the 3D rotation */
	transition: 		transform 0.6s ease; /* makes the flip smooth instead of instant */
}


/* RESPONSIVE MEDIA */
#media media {
    width: 					100%;
    height: 				auto;
}

#media media[poster] {
    width: 					100%;
    height: 				auto;
}

#media iframe,
#media object,
#media embed {
	width:					100%;
	top:					0;
	left:					0;
	object-fit:				cover; /* This works also */
}


/* RESPONSIVE MAP */
.google-maps {
	position: 				relative;
	overflow: 				hidden;
	margin:					25px 0 5px 0;
}

.google-maps iframe {
	width: 					100%;
	height: 				100%;
	min-height: 			450px;
	overflow-y: 			hidden;
	overflow-x: 			visible;
}


/* COLLASPE CONTENT */
.collapse > a,
.collapse > a:hover, 
.collapse > a:active, 
.collapse > a:focus  {
    text-decoration:        none;
}

.collapse a, .collapse a:active, .collapse a:focus {
    outline: 				none; 
}

.collapse:before {
	font-family: 			'Material Symbols Outlined';
	font-weight:			400;
	vertical-align:			middle;
}

 /* Icon when the collapsible content is shown */
.collapse.collapsed:after  {
	content: 				"\e88e";
}

/* Icon when the collapsible content is hidden */
.collapse.collapse:after {
	content: 				"\e88e";
} 


/* BUSINESS HOURS */
ul.business-hours {
	position: 				relative;
	width:					95%;
	padding: 				10px 0;
    margin: 				5px 0 5px 0;
}

ul.business-hours li {
	list-style-type:		none;
	color: 					#eeeeee;
	line-height: 			25px;
	border-bottom: 			1px solid #d4d4d4;
	padding:				2px 0 2px 0;
	margin-top:				2px;
	margin-bottom:			2px;
}

ul.business-hours li span.pull-right {
	float:					right;
}

ul.business-hours li:last-child {
	border-bottom: 			none; 
}

ul.business-hours li.today {
	color: 					#fff499; 
}


/* BUTTON STYLE */
.button, a.button, input[type="submit"] {
	display:				inline-block;
	min-width:				210px;
	text-align:				center;
	text-decoration: 		none;
	background-color: 		rgba(0, 0, 0, 0.8);
    color: 					#ffffff;
	font-size: 				20px;
	line-height:			32px;
	font-weight:    		400;
	text-transform:			uppercase;
	transition: 			0.9s;
	border-radius: 			1px;
	border: 				none;
	box-shadow:				none;
	padding:				9px 35px 9px 35px;
	margin:					5px 0 5px 0;
}

p.button {
	display:				inline-block;c
	margin:					5px 0 5px 0;
}

p.button a {
    color: 					#ffffff;
	text-decoration: 		none;
}

.button, a.button, input[type="submit"], p.button {
	position:				relative;
	z-index: 				10;	
}

p.button:before, p.button:after,
.button:before, .button:after,
a.button:before, a.button:after,
input[type="submit"]:before, input[type="submit"]:after {
    display: 				inline-block;
	position: 				absolute;
	content: 				"";
	height: 				50%;
	width: 					0;
	background-color: 		rgba(74, 161, 86, 0.8);
	transition: 			all 0.9s;
	z-index: 				-1;
}

p.button:before, .button:before, a.button:before, input[type="submit"]:before {
	right: 					0;
	top: 					0;
}

p.button:after, .button:after, a.button:after, input[type="submit"]:after {
	left: 					0;
	bottom: 				0;
}

p.button:hover:before, p.button:hover:after,
.button:hover:before, .button:hover:after,
a.button:hover:before, a.button:hover:after,
input[type="submit"]:hover:before, input[type="submit"]:hover:after {
	width: 					100%;
	margin:					0;
}


/* LIST STYLE */
ul, ol {
	padding-left:       	28px;
	margin-top:				15px;
	margin-bottom:			25px;
}

li {
	padding-left:       	8px;
	margin-bottom:			12px;
}

ul.checkmarkList {
    list-style: 			none;
	padding-left: 			8px;
}

ul.checkmarkList li {
	padding-left: 			11px;
	margin-bottom:			18px;
}
 
ul.checkmarkList li:before {
	content:				"\2713";
	font-size:				17px;
	font-weight: 			200;
	color:					#4d4d4d;
	margin:					0 5px 0 -18px;
}


/* BACK TO TOP / SCROLL TO TOP */
a#back-to-top {
    position: 				fixed;
    bottom: 				35px;
    right: 					10px;
    z-index: 				9999;
    cursor: 				pointer;
    text-decoration: 		none;
    transition: 			opacity 0.2s ease-out;
}

a#back-to-top:before {
	font-family: 			'Material Symbols Outlined';
	content:				"\f5d2";
	font-size:				45px;
	color:					#d4d4d4;
	vertical-align:			middle;
}

a#back-to-top:hover {
    opacity: 				0.7;
	text-decoration:		none;
}


/* COOKIE BANNER */
#cn-notice-text a {
	color:					#ffffff;
}

span.cn-buttons-container, span.cn-text-container {
    display: 				block;
}


/* Print Style Sheet For Tutorials */
@media print {
	#category-tutorial .container, #category-tutorial div.col-left { width: 100%; max-width: 100%; }
	#right-sidebar, #category-faqs a.print-page, #category-faqs a.goback { display: none; }
	#category-faqs div.overlay { padding: 15px 35px 15px 35px; }
	#tutorials-page-header { min-height: 225px; }
	#tutorials-page-header h1.the-category { font-size: 42px; margin: 15px 0 10px 0; }
}


/* MOBILE VIEW */
/* Extra Large Devices (large laptops and desktops - 1440px and Up) */
@media (min-width: 1440px) {

}

/* Large Devices (laptops/desktops - 1024px and LESS) */
@media (max-width: 1024px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column { flex-basis: 100% !important; }
	.container { padding-bottom: 15px; }
	.nobr { white-space: normal; }
	.divider { width: 34%; }

	/* #media { height: 450px; margin: 0 0 2px 0; } */
	#what-we-do { padding: 35px 25px 35px 25px; margin: 20px 0 0 0; }
	#what-we-do div.wp-block-column .wp-block-columns-is-layout-flex { gap: 2em; }
	
	ul.social li { display: inline-block; }
}

/* Adjust columns only on the 1024px screen width.  Instead of 1 column make it 2 columns */
@media (min-width: 1024px) and (max-width: 1024px) { 
	.wp-block-columns:not(.is-not-stacked-on-mobile) { 
		display: flex !important; 
		flex-direction: row !important; 
		gap: 20px; 
	} 
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { 
		flex-basis: calc(50% - 10px) !important; 
	} 
}

/* Adjust columns only on the 1024px screen width.  Instead of 1 column at 50% make it 80% on the contact-on-home section */
@media (min-width: 1024px) and (max-width: 1024px) {
    #contact-on-home .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.home-contact {
        flex-basis: calc(80% - 10px) !important;
    }
}

/* Medium Devices (tablets - 768px and LESS) */
@media (max-width: 768px) {
	#page-header { margin: 0 0 15px 0; }
	h3, h3.wp-block-heading { line-height: 44px; margin: 10px 0 15px 0; }
	input, optgroup, select, textarea { width: 100%; display: block; }

	#what-we-do div.wp-block-column .wp-block-columns-is-layout-flex { gap: 0; }
	.container { padding-top: 15px; padding-bottom: 15px; }
	
	/* #media { height: 350px; } */

	#contact-page { margin-top: 5px; margin-bottom: 5px; }
	#contact-page .item { padding: 15px 15px 15px 15px; }
	#contact-page select, #contact-page input, #contact-page textarea { width: 100%; }
} 

/* Extra Small Devices (phones - 480px and LESS) */
@media (max-width: 480px) {
	#page-header .page-title, #page-header .page-category { padding-top: 10px; }
	#page-header .page-title h1, #page-header .page-category h1 a { font-size: 42px; line-height: 48px; }
	h1, h1.wp-block-heading { font-size: 38px; line-height: 43px; margin: 0 0 15px 0; letter-spacing: 0; }

	/* #media div.media-container { justify-content: flex-end; } */
	#media p.text-over-media span.line-1 { font-size: 52px; line-height: 55px; }
	/* #media p.text-over-media span.line-2 { font-size: 41px; line-height: 44px; } */

	#contact-page .contact-form.contact, #contact-page .contact { padding: 5px 15px 5px 15px; }
	.contact-form:before { display: none; }
	.button, a.button, input[type="submit"] { padding: 12px 15px 12px 15px; }
}