/*
Theme Name: Renaldo
Theme URI: https//consumerfocusmarketing.com/
Author: Consumer Focus Marketing
Author URI: https//consumerfocusmarketing.com/
Description: Starter theme for Consumer Focus Marketing 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Portfolio, Oil, Blog
Text Domain: #
*/


:root {
  --white: #FFF;
  --black: #000;
  --body: #333;
  --lt-gray: #EBEBEB;
  --md-gray: #5F5F5F;
  --dk-gray: #C2C2C2;

 --headline-color: #263A97;


 --blue-xlt: #E3F6FF;
 --blue-lt: #45C1FB;
 --blue-md: #263A97;
 --blue-dk: #132263;

 --green: #007A29;
 --red: #ED242D;

  /* TYPOGRAPHY */

  --body-font: "Lato", sans-serif;
  --headline-font: "Lato", sans-serif;
  --base-font-size: 1rem;
  --base-line-height: 1.563rem;
}

/*** DEFAULTS ***/

/* font size will +/- by 1px for every 100px of the viewport width */

html {
  font-size: calc(10px + 0.5vw); 
}

body { 
  font-size: 1rem;
  font-family: var(--body-font);
  overflow-x: hidden;
  color: var(--body);
  margin: 0;
  line-height: var(--base-line-height);
}

@media (width <= 768px) {
    body {
        font-size: 1.25rem;
    }
}

* {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}

*, ::after, ::before {
    box-sizing: border-box;
}

.wrapper {
  padding: 2rem 15px 4rem;
}

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

h1, h2, h3, h4 {
    margin: 0 0 .5rem;
    font-weight: 700;
    font-family: var(--headline-font);
    color: var(--headline-color);
}

/**

Font size formula: Target Size / Base Size = Value
Example: 50px / 16px = 3.125rem

**/

.home h1 {
    font-size: 3.438rem;
}

.home h1 span {
    display: block;
    font-size: 2rem;
    font-weight: 400;
    line-height: 3.063rem;
}

.home h2 {
    font-size: 2.813rem;
    color: var(--red);
}

h1 {
  font-size: 2.813rem;


}

h3 {
  font-size: 1.813rem;

}

h4 {
  font-size: 1.25rem;

}

p {
  padding: 0;
}

a {
  text-decoration: none;
  color: var(--green);
}

a:hover {
    color: var(--body);
    text-decoration: underline;
}


a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
}


/*** "GLOBAL" STYLES ***/

.container {
  min-width: 95vw;
}

hr {
    border-top: 1px solid var(--md-gray);
    margin: 1.875rem auto 3.125rem;
}


/*** BUTTONS ***/

button:hover {
    cursor: pointer;
}

.btn {
    padding: 1.15rem 5.303rem;
    margin: 1rem 1.813rem 1rem 0;
    text-decoration: none;
    display: inline-block;
    white-space: pre-wrap;
    font-size: 1.125rem;
    border-radius: 4px;
    text-transform: uppercase;
    border-color: transparent;
    line-height: normal;

}

.btn:hover {
    transition: all 0.2s ease 0s;
    text-decoration: none;
    border-color: transparent;
}


.btn-primary {
    background: var(--red);
    color: var(--white) !important;

}

.btn-primary:hover {
    background: var(--blue-md);
    color: var(--white);
}


.btn-default {
    background: var(--blue-md);
    color: var(--white);
}

.btn-default:hover {
    color: var(--white);
    background: var(--red);
}


/*** COLORS ***/



/*** HEADER ***/

header ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}

header ul li {
    margin: 0;
}

header .phone {
    font-weight: 700;
    font-size: 1.375rem;
}

a.navbar-brand.desktop-only img{
    width: 550px;
    max-width: 90%;
    margin: auto;
}

header .phone:hover {
    color: var(--red);
}

.dk-blue {
    background: var(--blue-dk);
        font-size: 0.875rem;

}



.header-wrapper .dk-blue a:not(.btn) {
    color: var(--white);
}

/*.header-wrapper div {
    display: flex;
    align-items: center;
}*/

.header-wrapper a, .header-wrapper address, .header-wrapper div {
    display: flex;
    align-items: center;
    justify-content: center;
}



@media(max-width: 768px) {
	.header-wrapper {
    	flex-direction: column;
		padding: 2rem 1rem;
    
	}
}

.header-wrapper .btn {
        background: white;
    color: var(--red);
    font-weight: 700;
    padding: .75rem 1.25rem;
    font-size: 0.875rem !important;
    margin: 5px auto;
    white-space: nowrap;
}

.header-wrapper .btn:hover {
    background: var(--red);
    color: var(--white);
}


@media (min-width: 992px) and (max-width: 1200px) {
	
	header .top-header, .top-header a {
		font-size: clamp(.90rem, 1vw, 1rem);
	}

}

@media(max-width: 992px) {
    .desktop-only {
        display: none !important;
    }
}

@media(min-width: 992px) {
    .mobile-only {
        display: none !important;
    }
}





/*** NAV BAR ***/

  .main-menu {
    font-weight: 500;
  }



@media(max-width: 992px) {
    .main-menu {
        background-color: var(--blue-md);
    padding: .5rem 1rem !important;

    }
	
    ul#menu-primary .nav-item:first-child {
    padding-top: 2rem;
}

#menu-primary li {
    width: 100%;
    text-align: left;
    margin-bottom: 1rem;
}
}

@media (min-width: 992px) and (max-width: 1200px) {
    ul#menu-primary a {
        font-size: smaller !important;
    }
	
}




.main-menu .nav-link:hover {
    color: var(--red);
}

@media(max-width: 992px) {
    .navbar-brand {
        background-clip: padding-box;
        box-shadow: -20px 0px 0 var(--white);
        border-right: 20px solid white;
    }

.dropdown-menu .dropdown-item {
    color: var(--white);
    font-size: 1.25rem;

}

.dropdown-menu {
    background: none;
    box-shadow: none !important;
}



#menu-primary .nav-link {
        text-transform: capitalize;
    font-weight: 700;
        font-size: 1.5rem;

}


.dropdown-menu li {
    padding: 0;
    margin-bottom: .5rem !important;
    font-size: 1.5rem;
}
}

.nav-bkg {
    background: var(--blue-md);
}
  
.main-menu .nav-link {
    color: var(--white);
    text-transform: uppercase;
    padding: 1rem;
    line-height: 1;

}

.navbar-brand {
    background: var(--white);
}


.navbar-nav .nav-item:not(:last-child) {
   border-right: 1px solid var(--white);
}

@media (max-width: 992px) {
  .navbar-nav .nav-item:not(:last-child) {
    border-right: none;
  }
}

.navbar {
      z-index: 10000;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-item {
    font-weight: 700;
}

.dropdown-item:hover {
    background: var(--red);
    color: var(--white);
    border-radius: 0;
}

/*** MENU - BASE STYLES ***/

  /* show dropdown menus on hover */
  .dropdown:hover > .dropdown-menu {
    display: block;
  }

  .dropdown-item {
    text-align: left;
    padding: .5rem 1.5rem;
  }


  /* removes the deadzone click area */
  .dropdown-menu {
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .nav-item.active > a,
  .nav-link:hover,
  .nav-item:hover {
}


@media(width >= 992px) {
 /* .dropdown-menu {
        background: ;
  } */
  
  .dropdown-menu {
      left: auto;
      right: 0;
      margin: 0 auto;
  }

    /* hides carets */

 /* .dropdown-toggle::after {
    display: none;
  } */
}


/*** MENU - TOP LEVEL ***/

.top-level {
  position: relative;
}

.dropdown.top-level:hover::after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid var(--md-blue) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  margin-left: -13px;
  position: absolute;
  width: 0;
  z-index: 10000;
}




/*** MENU - SECOND LEVEL MENU DROPDOWNS ***/

.second-level {
    position: relative;
    padding-bottom: 1rem;
}

.second-level > .dropdown-menu {
    top: 0;
    left: 100%;
}

.dropdown-menu {
    box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
}


@media (min-width: 992px) {
  .second-level > .dropdown-menu {
    margin-top: -.5rem;
    margin-bottom: -.5rem;
    padding-bottom: .5rem;
  }

  .second-level.menu-item-has-children > a:after {
    display: block;
    content: "▸";
    float: right;
    margin-right: -20px;
  }

  .second-level:hover > a:after {
    border-left-color: inherit;
  }

  .menu-item-has-children > .dropdown-item {
    padding: .5rem 2.25rem .5rem 1.5rem;
  }
}


/*** MENU - THIRD LEVEL MENU DROPDOWNS ***/

@media (max-width: 992px) {
  .third-level .dropdown-item {
    padding-left: 40px;
    font-size: 1.2rem;
  }

  .second-level.menu-item-has-children .dropdown-item::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid var(--yellow);
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

  .third-level a.dropdown-item::after {
    display: none !important;
  }
}


/*** HOME ***/

#home-carousel {
    color: var(--white);
    text-align: center;
}

#home-carousel .item-content {
    padding-top: 12.5%;
    padding-bottom: 12.5%;
    background-position: center;
    background-size: cover;

}


@media(min-width: 768px) {
  #home-carousel .item-content {
          padding-left: 12%;

  }  
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 20px;
    height: 20px;
}

@media(width <= 768px) {
    .carousel-control-prev, .carousel-control-next {
        display: none;
    }

}


.text-box {
    text-align: left;
	background: rgba(51, 51, 51, 0.75);
	padding: 1rem;
}

.text-box p {
    font-size: 2.188rem;
    line-height: 1.4;
}



.carousel-control-prev, .carousel-control-next {
    background: transparent;
    border: none;
}

.visually-hidden {
    display: none;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    height: 70px;
    width: 70px;
}


.carousel-control-prev-icon {
    background-image: url("img/prev-icon2.svg");
}

.carousel-control-next-icon {
    background-image: url("img/next-icon2.svg");
}


.box-wrapper {
    display: flex;
    width: 50%;
    flex: 0 0 auto;
    margin-top: 2rem;
}
.box-wrapper a {
	width: 100%;
}
.box-wrapper .callout-img {
	height: 100%;
}
@media(max-width: 768px) {

.box-wrapper {
    width: 100%;
}
}

.box-content {
    margin-bottom: 5rem;
}

.callout-img {
    width: 100%;
    background-size: cover;
    background-position: center;
}



.top-level-boxes {
    padding: 2rem;
    background: var(--blue-xlt);
}

.top-level-boxes h2 {
    color: var(--blue-md);
}

.top-box-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
 }

 .top-level-boxes {
    flex-grow: 1;
    overflow: hidden;
 }

.outer-flex {
    display: flex;
    flex-direction: column;
}



.banner {
    background: var(--green);
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: -20px;
    margin-bottom: 2rem;
	color: var(--white);
}

.banner p {
    margin: 0;
}

.banner a{
	color: var(--white);
}




.main-content {
    margin-bottom: 2.75rem;
    margin-top: 2.188rem;
}

@media(width >=768px) {
    .main-content p {
        max-width: 937px;
        margin: 15px auto;
        line-height: 1.813rem;
    }
}

.callout-content a {
    color: var(--blue-lt);
    text-transform: uppercase;
    font-weight: 700;
    display: block;
}

.callout-content p:last-child {
    margin: 0;
}

.callout-img {
    padding-top: 40%;
    display: flex;

}

.callout-content p:last-child {
    margin: 0;
}

.callout-content {
    background: rgba(38, 57, 149, 0.9);
    color: var(--white);
    text-align: left;
    padding: 1rem 2.625rem;
    width: 100%;
}

.callout-content h2 {
    color: var(--white);
    font-size: 1.5rem;
}



/*** FOOTER ***/



.headline {
    font-size: 1.125rem;
}

.copyright {
    margin-top: 3.125rem;
}

footer ul {
    padding: 0;
    list-style: none;
}
footer {
    background: var(--blue-md);
    color: var(--white);
	padding-top:2rem;
}

footer a {
    color: inherit;
}

footer a:hover {
    color: inherit;
    text-decoration: underline;
}


footer .left img{
	display:block;
	margin-bottom:1rem;
}
@media(max-width: 768px) {
    footer img {
    margin-bottom: 2rem;
    display: block;
}

.company-address {
    margin-bottom: 1rem;
    text-align: left !important;
}

.headline {
    margin-top: 1rem;
    display: block;
    font-weight: 700;
    margin-bottom: .5rem;
    font-size: 1.25rem;
}
}

address {
    margin: 0;
}

.copyright {
    border-top: 1px solid var(--blue-dk);
}

.social img {
    width: 30px;
    margin: 1.5rem .5rem 0 0;
}


/*** PAGES ***/



.page-background h1 {
    color: var(--white);
    margin-bottom: 1.25rem;
}

.page-background {
    background: var(--blue-dk);
    padding-top: 3.75rem;
    color: var(--white);
    padding-bottom: 3.75rem;
}

.title-text a {
    color: var(--blue-lt);
}

/*** GALLERY ***/

.gallery-grid {
	column-count: 4;
	column-gap: 2rem;
}

.gallery-grid  .gallery-item {
  display: inline-block;
  margin-bottom: 2rem;
  width: 100%;
}

.gallery-item img {
		box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;

}

@media (max-width: 1199px) {
  .gallery-grid  {
    column-count: 3;
  }
}

@media (max-width: 991px) {
  .gallery-grid  {
    column-count: 2;
  }
}

@media (max-width: 767px) {
  .gallery-grid  {
    column-count: 1;
  }
}

/*** POSTS ***/

/*** 404 ***/

/*** SIDEBARS ***/


.well {
    padding: 1rem;
    margin: 1rem auto 1.563rem;
    background: var(--blue-xlt);
    text-align: center;
}

.well-alt {
    color: var(--white);
    background: var(--blue-md);
}

.well h2 {
    color: var(--blue-md);
}

.well-alt h2 {
  color: var(--white);
}

.well .btn {
    margin-top: 2.5rem;
}

.well-alt {
  background: var(--blue-md);

}

.well-alt .btn:hover {
    border: 1px solid var(--white);
}



.full-callout-bkg .btn:hover {
    background: var(--blue-md);
    color: var(
    --white);
}

.well a:not(.btn) {
    color: var(--blue-md);
        text-decoration: underline;

}

.well a:not(.btn):hover {
    text-decoration: none;
    color: var(--blue-dk);
}

.well-alt a:not(.btn) {
    color: var(--blue-xlt);
        text-decoration: underline;

}

.well-alt a:not(.btn):hover {
    text-decoration: none;
    color: var(--white);
}


.callout a:hover, .full-callout a:not(.full-callout .btn):hover {
    text-decoration: none;
    color: inherit;
}


.full-text .btn,
.well .btn,
.coupon .btn {
    margin-right: unset;
}



/*** PAGE CALLOUTS ***/


 .callout {
    margin-bottom: 1.563rem;
    margin-right: 0;
    margin-left: 0;
    background: var(--blue-xlt);
}

.callout h2 {
    color: var(--blue-md) !important;
}

.callout-text {
    padding: 1.625rem;
}

.callout-image {
  max-width: 22.75rem;
}

.full-callout-bkg a:not(.full-callout-bkg  .btn) {
    color: var(--white);
        text-decoration: underline;

}
.callout a:not(.callout .btn) {
    text-decoration: underline;
    color: var(--blue-md);
}

.callout a:not(.callout .btn):hover, .full-callout-bkg a:hover {
    text-decoration: unset;
}

.full-callout {
    margin-bottom: 1.563rem;
}

.full-text h2 {
    font-size: 1.875rem !important;
    color: var(--white) !important;
}

.full-text {
    text-align: center;
}

.full-text p {
    max-width: 970px;
    margin: auto auto 1rem;
}

.full-callout-bkg::before {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.full-callout-bkg * {
    color: var(--white);
}

.full-callout-bkg .btn {
    background: var(--white);
    color: var(--blue-md);
}

.full-text {
  background: none;
  position: relative;
  display: grid;
  padding-top: 3.313rem;
  padding-bottom: 2.75rem;
}

.full-text::before {
  content:"";
  position: absolute;
  height: 100%;
  width: 200vw;
  left: -100vw;
  z-index: -1;
}


@media(width <=768px) {
.callout .callout-text {
    flex: 0 0 100%;

    }
}

.panel-title.collapsed h3 {
    color: var(--body);
}



.panel-title h3 {
    margin: 0;
    font-size: 1.563rem;
   color: var(--md-gray);

}
#accordion {
    margin: 2.75rem 0 3.75rem;
}

/* Panel Styles */
.panel-group {
  border-top: none;
}

.panel-title {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
	margin-top:0;
  padding: 0.65rem 0 .5rem;
  border-bottom: none;
  position: relative; /* Added for positioning the toggle icon */
  background-color: transparent; /* Default background color */
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Added transition for smooth animation */
  border-bottom: 1px dashed #707070;
}

.panel-content {
    padding: .85rem 1.25rem 1.25rem;
}

/* Collapsed Panel Title Styles */
.panel-title.collapsed {
  border-color: #707070;
}

/* Toggle Icon Styles */
.panel-title[aria-expanded="false"]:after  {
  content: "+"; /* Default icon is a plus sign */
  background-color: var(--body);
  color: var(--white);
  font-size: 0.7rem;
  width: 1.25rem; /* Adjusted width for better scaling */
  height: 1.25rem; /* Adjusted height for better scaling */
  border-radius: 50%; /* Changed to a circle */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease; /* Added transition for smooth animation */
}

.panel-title:after  {
  content: "-"; /* Default icon is a plus sign */
  background-color: var(--body);
  color: var(--white);
  font-size: 0.7rem;
  width: 1.25rem; /* Adjusted width for better scaling */
  height: 1.25rem; /* Adjusted height for better scaling */
  border-radius: 50%; /* Changed to a circle */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease; /* Added transition for smooth animation */
}

/* Open Panel Toggle Icon Styles */


.coupon {
    border: 3px dashed #707070;
    padding: 1.25rem;
    text-align: center;
    margin-bottom: 2rem;
}

.coupon h2, .coupon h3 {
    color: var(--body);
}

.coupon h3 {
}

/**************
 *            *
 *   TABLES   * 
 *            *
 **************/


/*** BASE ***/

table {
    width: 100%;
    margin: 0 0 1rem;
}


th {
    font-weight: 700;
    font-size: 1.125rem;
    background: var(--blue-md);
}


td, th {
    padding: .5rem 1rem;
}


/*** REGULAR TABLE ***/


thead {
    background: var(--body);
    color: var(--white);
    border: 1px solid var(--body);
    text-align: center;
}

tbody {
    border: 1px solid var(--body);
}

tr:nth-child(even) {
    background: var(--lt-gray);
}

td, th {
    border: 1px solid var(--body);
}


/*** ALT TABLE ***/


/*** LISTS ***/

ul.alt li {
    position: relative;
    list-style: none;
}

ul.alt li::before {
    content: '\2713';
    display: inline-block;
    line-height: 1.1rem;
    text-align: center;
    color: var(--white);
    background: var(--body);
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    font-size: 0.75rem;
    position: absolute;
    left: -1.25rem;
    top: 4px;

}


li {
  margin-bottom: 0.563rem;
}


ol.alt {
  counter-reset: orderedList;
}

ol.alt li {
  list-style-type: none;
  position: relative;
}

ol.alt li::before {
  counter-increment: orderedList;
  content: counter(orderedList);
    display: inline-block;
    line-height: 1rem;
    text-align: center;
    color: var(--white);
    background: var(--body);
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    font-size: 0.75rem;
    position: absolute;
    left: -1.25rem;
    top: 4px;
}
@media(min-width:992px){
	.twocol{
		column-count:2;
	}
}


/**** BLOCKQUOTES ****/

blockquote {
    background: var(--lt-gray);
    border-left: 0.75rem solid var(--green);
    padding: 1rem 0.75rem;
    line-height:1.875rem;
}

blockquote strong {
    display: block;
    margin-top: .5rem;
}

blockquote p {
    margin: 0;
}

blockquote::before {

    font-size: 1.875rem;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}


/*** BLOG ***/

.categories:not(.cat-item) {
    list-style: none;
}

.blog-wrapper .btn {
    margin-left: 0;
    padding: .5rem 2rem;
    margin-top: .5rem;
}

.cat-item, .sidebar-links {
    text-align: left;
}

/** MISC **/
img.dealerLogo {
    height: 100px;
	width: auto;
}

.page-id-300 .well img {
    max-height: 55px;
    width: auto;
    margin: 20px;
}

/** Fancy Box **/
.fancybox__container {
    z-index: 11000;
    will-change: auto;
}

.fancybox__container,
.fancybox__backdrop,
.fancybox__slide,
.fancybox__image {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
}