/*
 Theme Name:   Thaler Oil 2024
 Theme URI:    http://www.thaleroil.com/
 Author:       Krista Computers
 Author URI:   http://www.kristacomputers.com
 Description:  Thaler Oil Wordpress theme
 Version:      0.1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: one-column, two-columns, left-sidebar, right-sidebar, custom-menu, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, e-commerce, blog, portfolio
 Text Domain:  onepress
 Template:     onepress
*/

/*
div.followWrap #masthead, header#masthead, #masthead.site-header, .site-header {
	background-color: #fef200;
}
*/
/*
#colophon > div.site-info > div.container {
	display: none;
}
*/

/* coolor.co */
:root {
	--red: #d01e1a;
	--ornage: #ff8c00
	--yellow: #fef200;
	--green: #1ad11a;
	--blue: #1a48d1;
	--white: #f8f8ed;
	--text: #333333;
}

body, button, input, select, textarea {
	color: var(--text);
	background-color: var(--white);
}

section#hero {
	top: 111px;
}

#masthead, .site-header {
	background-color: #fef200;
	padding-top: 0;
}

#masthead.site-header {
	position: fixed;
	top: 0px !important;
}

#masthead-container.container {
	padding: 0 24px;
	margin: 0;
	min-width: 100%;
    background-color: #f8f8ed;
    max-height: 30px;
}

#contact-menu-container {
    position: relative;
    top: 0;
    z-index: 1;
}

#contact-menu-container.container {
	text-align: right;
}

.menu-contact-menu-container {
	position: relative;
}

@media only screen and (max-width: 768px) { /*
  .menu-contact-menu-container {
    transform: translate(50%,0);
}*/
	#contact-menu-container.container { width: 100%; }
}

@media only screen and (max-width: 631px) {
	#contact-menu-container.container {
		font-size: 8px;
		line-height: 18px;
	}
}

@media only screen and (min-width: 840px) { /*
  .menu-contact-menu-container {
    transform: translate(66%,0);
}*/}

ul#menu-contact-menu {
    position: relative;
    list-style-type: none;
	padding: 0;
	margin: 0;
    display: block;
	line-height: normal;
   /* float: right; */
}

ul#menu-contact-menu li {
	display: inline;
	padding: 2px 5px;
}

ul.onepress-menu li#menu-item-1707 a {
	font-weight: 700;
	transform: skew(-7deg);
	-webkit-transform: skew(-7deg);
}

.section-features {
/*
 	background-image: url('/wp-content/uploads/2024/07/bill-header.jpg');
	background-size: cover;
*/
}

#features .feature-item {
    box-shadow: inset 0 0 15px rgba(135, 135, 135, .1), 0 0 18px 3px rgba(0, 0, 0, .3);
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px 0 0 0;
    backdrop-filter: blur(2.8px);
    -webkit-backdrop-filter: blur(2.8px);
    border: 1px solid rgba(255, 0, 0, 1);
    margin: 0 3px 0 0;
    flex: 0 0 19%;
    max-width: 19%;
}

@media only screen and (max-width: 440px) { 
	#features .feature-item a {
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
/*        -webkit-text-fill-color: #ccc; */
	}
	.site-branding {
		position: relative;
        display: inline-block;
        left: 50%;
        top: 50%;
        transform: translate(-50%, 0);
	}
	div.followWrap { max-height: 111px; }
	#main.section-padding { padding: 0.5rem 0.0rem; }
}

@media only screen and (max-width: 600px) { 
	#features div.row { flex-direction: column; }
	#features div.row div.feature-item { max-width: 80%; margin: 3px auto; }
    #features div.row div.feature-item h4 { font-size: 2.0rem; font-weight: 700;  }
}

#service.section-padding, #about.section-padding {
	padding: 1.5rem 0 0.375rem 0;
}

#service .container .section-desc {
	margin-top: 0;
}

.redtext { color: #d01e1a; }

.inline-heading { display: inline; }

.italics { font-style: italic; }

#copyright { color: #fef200; }
#website-by { color: #bbbbbb; }

div.entry-meta, footer.entry-footer {
	display: none;
}

section#after-hours div.section-title-area div.section-desc {
	text-align: left;
}
#after-hours > div > div.section-content {
	display: none;
}

div#emergency-contacts {
	border: 1px solid var(--red);
	max-width: 380px;
	text-align: center;
	border-radius: 12px;
	margin: 0 auto;
}

#featured-image.page-banner {
	width: 100vw;
	position: relative;
	left: -51%;
	transform: translate(50%, 0);
}

#feat-img.feat-img {
	width: 100vw;
	height: 16vw;
}

/* Thaler History Table */

body div#thaler-history {
	font-size: 1.1rem;
}
#thaler-history .dt {
	display: table;
	width: 100%;
}
#thaler-history .dtRow {
	display: table-row;
}
#thaler-history .dtHeading {
	background-color: #EEE;
	display: table-header-group;
}
#thaler-history .dtCell, #thaler-history .dtHead {
	border: 0px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
#thaler-history .dtHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
#thaler-history .dtFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
#thaler-history .dtBody {
	display: table-row-group;
}

ul#lcp_instance_0 {
	list-style-type: none;
	position: relative;
    left: -3.0em;
}

ul#lcp_instance_0 li {
	border: 1px solid #d01e1a;
	border-radius: 6px;
	padding: 8px;
	display: inline-block;
	min-width: 100%;
}

ul#lcp_instance_0 span.post-thumb {
	max-width: 25%;
/*	display: inline-block; */
	float: left;
	padding: 8px;
}

ul#lcp_instance_0 span.post-body {
	max-width: 70%;
/*	display: inline-block; */
	float: left;
	padding: 8px;
}

div#fast-friendly-service ul li {
	list-style-image: url('images/arrow.jpg');
	text-align: left;
	margin-left: 4.0em;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

@media only screen and (max-width: 631px) {
	.column {
		width: 100%;
	}
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.row.service {
	width: 100%;
	border: 1px solid #ccc;
	padding: 8px;
	margin: 8px;
	border-radius: 6px;
	display: block;
}

div.r-inner, div.l-inner { padding-left: 27vw; display: block; }

/* Customer Portal */
.page-id-1559 #container { width: 100%; }
.page-id-1559 #container .row {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}
.page-id-1559 #container .column {
	width: 45%;
	border: 1px solid var(--red);
	border-radius: 12px;
	margin: 0 0 3% 3%;
}
.page-id-1559 #container .column p.center {
	text-align: center;
}
.page-id-1559 #container .ach-balance {}
.page-id-1559 #container .credit-card {}
@media only screen and (max-width: 799px) {
	.page-id-1559 #container .column { width: 100%; }
}

/* Locations Page */

.page-id-1447 .column-r {
  float: left;
  width: 70%;
  padding: 10px;
}
.page-id-1447 .column-l {
  float: left;
  width: 30%;
  padding: 10px;
}
.page-id-1447 .row {
	margin: unset !Important;
}
.page-id-1447 .row p {
	font-size: 1.3rem;
}

/* Clear floats after the columns */
.page-id-1447 .row:after {
  content: "";
  display: table;
  clear: both;
}

.page-id-1447 .our-locations p {
	font-size: 1.0rem;
    font-weight: 600;
}

/* Locations Grid */
#locations-grid {
	display: grid;
	grid-template-columns: auto auto auto;	
}

#locations-grid a {
	display: inline-block;
	padding: 1%;
}

#locations-grid a, 
#locations-grid a:hover, 
#locations-grid a:visited {
	color: #333;
	font-weight: 700;
	text-decoration: none;
}
#locations-grid .grid-item:hover {
	background-color: rgba(254, 242, 0, 0.3)
}

#locations-grid, .grid-item {
	border: 1px solid #CCC;
}
/* EndLocations Grid */


/* Locations modals */
button.close-modal {
	margin: 10px 10px 0 0;
	color: #fff;
	background-color: #d01e1a;
	font-weight: 900;
	font-size: 2.0rem;
	line-height: 1.6rem;
	float: right;
}

a.button.get-directions, button.pathBtn {
	border: 0;
    border-radius: 4px;
    background: #d01e1a;
    display: block;
    margin-top: 1.0rem;
    padding: 0.5rem;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.0rem;
    font-weight: 900;
    color: #fef200;
	width: 85%;
}

input.direction-input {
	width: 85%;
    border: 1px solid #333;
    border-radius: 4px;
}

.page-id-1447 div.wp-post-modal.show,
.page-id-2002 div.wp-post-modal.show,
.page-id-1801 div.wp-post-modal.show {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border: 1px solid #000000;
    width: 90%;
    min-width: 300px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    height: 80%;
    min-height: 300px;
    display: none;
    border-radius: 12px;
    z-index: 101;
    overflow-x: hidden;
    overflow-y: auto;
}

p.get-directions {
	cursor: url(/wp-content/themes/thaleroil2024/images/path-cursor_32.png),auto;
}

.page-id-1447 div#modal-content,
.page-id-2002 div#modal-content,
.page-id-1801 div#modal-content {
	width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow-y: auto;
	margin: 4%;
}

.location {
/*	overflow: auto;*/
}
.location .main {
	width: 60%;
	float: left;
}
.location .side {
	width: 30%;
	float: left;
}

#refer-a-friend {
	/*text-align: right;*/
	max-width: 85%;
	
}

div.refer-div {
/*    width: 480px;
    margin: 0 auto;*/
}

div.refer-div label {
	text-align: left;
}


/* End Location Modals */

/* Buttons */

  /* red button **/
  		button.redbtn {
			color: #ffffff;
			background-color: #d01e1a;
			font-size: 19px;
			border: 1px solid #fef200;
			border-radius: 8px;
			padding: 15px 50px;
			cursor: pointer
		}
		button.redbtn:hover {
			color: #ffffff;
			background-color: #d01e1a;
		}
#em-app-link { position: relative; }
#em-app-link .column-r span {
	display: inline-block;
	margin: 0;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Tooltip container */
.mtooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.mtooltip .mtooltiptext {
  visibility: hidden;
  width: 320px;
  background-color: #555;
  color: var(--white);
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.mtooltip .mtooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.mtooltip:hover .mtooltiptext {
  visibility: visible;
  opacity: 1;
}

/* services styles */
.services {
  padding: 2rem;
}

.services > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  grid-gap: 1rem;
}

.services > ul > li {
  border: 1px solid #E2E2E2;
  border-radius: .5rem;
  list-style-type: none;
}

.services > ul > li > figure {
  max-height: 320px;
  overflow: hidden;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  position: relative;
}

.services > ul > li > figure > img {
  width: 100%;
}

.services > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.7);
  width: 100%;
}

.services > ul > li > figure > figcaption > h1 {
  color: white;
  padding: .75rem;
  font-size: 1.25rem;
}

.services > ul > li > p {
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem .75rem;
  color: #666666;
}

#services > ul > li > figure > figcaption > h1 > a, 
.services > ul > li > a {
  padding: .5rem 1rem;
  margin: .5rem;
  color: white;
}

#services img.service-tile {
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: top center; /* Crops from the top, centers horizontally */
}

.pdficon::before {
  /* Set the font for this icon style */
  font-family: 'Font Awesome 6 Free';
  /* Set the weight for this icon style */
  font-weight: 900;
  /* Make sure icons render pixel-perfect */
  -webkit-font-smoothing: antialiased;
  /* Set the Unicode value for the "fa-ghost" icon */
  content: '\f1c1';
}

.postid-2002 .wpcf7-response-output {
	position: relative;
	clear: both;
	top: 24px;
}