/* ==========================================================================
     Project:     Petro Taino
     Date:        09/14/2025 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

:root {
	--body: #696969;
	--light-blue: #337ab7;
	--blue: #054ab1;
	--red: #e4252c;
	--crimson: #dd3333;
	--lightest-grey: #e9e9e9;
	--light-grey: #afafaf;
	--medium-grey: #82878e;
	--grey: #2b2b2b;
	--dark-grey: #282828;
	--off-white: #e0e0e0;
	--white: #ffffff;
	--charcoal: #464646;
	--black: #171c26;
}

/* ==========================================================================
     Typograpy
========================================================================== */
body {font-family: "Lato"; font-weight: 400; color: var(--body);}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: "Lato"; font-weight: 900; color: var(--blue);}
p {line-height: 1.8;}
section.bg-grey p {color: lightgrey;}


/* ==========================================================================
     Main Layout
========================================================================== */ 

html {scroll-behavior: smooth;}
main {background: var(--white);}

/* Images */
img {max-width: 100%; height: auto}
.img-fit {object-fit: cover; object-position: center center; width: 100%; height: 100%;}

section:has(.img-bg) {position: relative;}
.img-bg {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover; z-index: -1}


/* Header */
.headermenu .mainmenu > li > a {color: var(--blue); text-decoration: none; font-weight: 600;}
.headermenu .mainmenu > li > a:focus {color: var(--red); transition: 250ms;} .headermenu .mainmenu > li > a:hover {color: var(--red); transition: 250ms;}

.home-cards:hover {background-color: rgba(255, 255, 255, 0.03)}

/* Footer */
footer {background-color: var(--black); color: var(--medium-grey); font-size: .75rem;}
footer hr {border-top: 1.5px solid #252c3b; opacity: 1; }
footer .fw-300 {font-size: .813rem;}
footer .copyright {font-size: .813rem;}

/* Interior Masthead */
.interior-masthead ul li a {color: var(--white);}
.interior-masthead ul li a:focus, .interior-masthead ul li a:hover, .interior-masthead ul li a:active {color: var(--blue); transition: 250ms ease;}

a.text-charcoal:hover {color: var(--charcoal);}

/* Off Canvas Toggle */
.btn-toggle-offcanvas {margin: 0px; border-radius: 0px; height: 36px;padding:5px;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity;text-transform:none;color:inherit;border:0;}
	.hamburger-box {position: relative;display: inline-block;width: 24px;height: 24px;}
	.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:24px;height:2.5px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:3.5px;background-color:var(--blue); right: 0px}
	.hamburger-inner{top:50%;display:block;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s;}
	.hamburger-inner:after,.hamburger-inner:before{display:block;content:"";}
	.hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in; top:-8px;}
	.hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.685,.19); bottom:-8px;}
	.btn-toggle-offcanvas.active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}
	.btn-toggle-offcanvas.active .hamburger-inner:before{top:0;transition:top .1s ease,opacity .1s ease .12s;opacity:0; width: 100%;}
	.btn-toggle-offcanvas.active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg);width: 100%;}

/* Offcanvas */
.offcanvasmenu {position:fixed; width: 100%; left: 0px; background: var(--white); overflow-x:hidden; overflow-y:auto; z-index:-1;-webkit-transform: scale(.75); -ms-transform: scale(.75); transform: scale(.75); transform-origin: top center; pointer-events: none; opacity: 0; visibility: hidden; transition: transform 250ms ease, opacity 250ms ease}
.offcanvasmenu ul {list-style:none; padding: 0px;margin: 0px;}

.offcanvasmenu .mainmenu {font-weight: 700;}
.offcanvasmenu .mainmenu {position: relative;text-transform: uppercase; }
.offcanvasmenu .mainmenu a[aria-haspopup] {margin-right: 55px;}
.offcanvasmenu .mainmenu .fa-angle-down {font-size: 1rem; transition: transform 200ms ease-in-out}
.offcanvasmenu .mainmenu .fa-angle-down.rotate {-webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg)}
.offcanvasmenu .mainmenu a {color: var(--blue); display: block; padding: 15px;text-decoration: none; display: -webkit-box; display: -webkit-flex; display: flex; align-items:center;}
.offcanvasmenu .mainmenu a:hover, .offcanvasmenu .mainmenu a:focus {color:var(--red); }
.offcanvasmenu .mainmenu > li {border-bottom: 1px solid var(--light-blue); position: relative;}
.offcanvasmenu .mainmenu > li:first-child {border-top: 1px solid var(--light-blue); position: relative;}

.offcanvasmenu .btn-toggle-dropdown {position: absolute; top: 10px; right:15px; width: 35px; height:35px;padding: 0px;border-radius: 4px; border: none; background: var(--light-blue); }
.offcanvasmenu .btn-toggle-dropdown:hover, .offcanvasmenu .btn-toggle-dropdown:focus {color: var(--blue)}

.offcanvasmenu::-webkit-scrollbar {-webkit-appearance: none;width:5px;}
.offcanvasmenu::-webkit-scrollbar-track-piece {margin: 15px 0px;}
.offcanvasmenu::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(0,0,0,.3);}

.offcanvas-open {overflow:hidden}
.offcanvas-open .offcanvasmenu {pointer-events: all; opacity: 1; z-index: 3; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}

/* ==========================================================================
     Components
========================================================================== */ 
/* Backgrounds*/
.bg-black {background: var(--black);}
.bg-grey {background: var(--grey); color: var(--body)}
.bg-lightest-grey {background: var(--lightest-grey); color: var(--body)}

.bg-overlay-crimson {position: relative; z-index: 0;}
.bg-overlay-crimson::after {position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; background-color: var(--crimson); opacity: 0.8; z-index: -1;}

.bg-overlay-grey {position: relative; z-index: 0;}
.bg-overlay-grey::after {position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; background-color: var(--grey); opacity: 0.9; z-index: -1;}

.bg-overlay-blue {position: relative; z-index: 0;}
.bg-overlay-blue::after {position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; background-color: var(--blue); opacity: 0.6; z-index: -1;}

/* Texts*/
.text-red {color: var(--red);}
.text-blue {color: var(--blue);}
.text-white {color: var(--white);}
.text-lighest-grey {color: var(--lightest-grey);}
.text-medium-grey {color: var(--medium-grey);}
.text-dark-grey {color: var(--dark-grey);}
.text-charcoal {color: var(--charcoal);}

/* Fonts*/
.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}

/* Lines */
.underline-grey {position: relative}
.underline-grey::before {background: var(--light-grey); content:""; position: absolute; height: 2px; text-align: center; width: 70px; left: 50%; bottom: 0; transform: translateX(-50%);}

.underline-blue {position: relative}
.underline-blue::before {background: var(--blue); content:""; position: absolute; height: 2px; text-align: center; width: 70px; left: 0%; bottom: 0;}

/* Buttons */
.btn-blue, .btn-outline-white {font-family: "Lato"; font-weight: 400; font-size: .75rem; white-space: normal; line-height: 1; padding:15px 35px; border-radius: 3px;text-decoration:none; transition: all 250ms ease;}

.btn-outline-white {border: 1px solid var(--white); color: var(--white);}
.btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white:active{background-color: var(--light-grey); color: var(--off-white);}


.btn-blue {background-color: var(--blue); color: var(--white);}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active{background-color: var(--light-blue); color: var(--off-white);}

.bg-overlay-crimson .btn-blue {font-size: .875rem;}
.bg-overlay-crimson .btn-blue:hover, .bg-overlay-crimson .btn-blue:focus, .bg-overlay-crimson .btn-blue:active {background-color: transparent; color: var(--blue); border: 1px solid var(--blue);}

.bg-overlay-blue .btn-blue {font-size: .875rem;}
.bg-overlay-blue .btn-blue:hover, .bg-overlay-blue .btn-blue:focus, .bg-overlay-blue .btn-blue:active {background-color: transparent; color: var(--white); border: 1px solid var(--white);}


/* Slideshows */
.hero-slideshow {max-height: 600px; overflow: hidden; position: relative; }
.hero-slideshow .item {height: 600px;}
.hero-slideshow .item img {height: 100%; width: 100%; object-fit: cover; object-position: center center; display: block;}


.slick-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); list-style: none; padding: 0; margin: 0; text-align: center; z-index: 2; }
.slick-dots li { display: inline-block; margin: 0 8px; }
.slick-dots button { border: none; background: rgba(255,255,255,1); width: 16px; height: 16px; border-radius: 50%; padding: 0; }
.slick-dots .slick-active button { background: var(--blue); }
.slick-prev, .slick-next { z-index: 1; background: none; padding: 0px; border: none; width: 35px; height: 35px; overflow:hidden; position: absolute; top: calc(50% - 24px); -webkit-transform: translateY(-50%); transform: translateY(-50%)}
.slick-prev {left: 15px}
.slick-next {right: 15px;}
.slick-controls .angle {display:none !important;}
.slick-prev::after, .slick-next::after {content:""; border: 1px solid #fff; border-width: 0px 0px 5px 5px;width: 20px; height:20px;display:block;}
.slick-prev::after {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);margin-left: 12px;}
.slick-next::after {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg);transform: rotate(-135deg);margin-left: 3px;}

/* Cookie */
.cookie-wrapper {position: fixed; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 100%; color: var(--white); z-index: 100;}
.cookie-wrapper p {color: var(--white);}
.cookie-choice a {font-size: .875rem;}
.cookie-choice .list-inline-item, .cookie-choice-expand .list-inline-item {margin-right: 0px !important;}
.cookie-choice-expand {max-height: 575px;}
.cookie-choice-expand input[type="checkbox"]:checked {accent-color: var(--lighest-grey);}
.cookie-choice-expand.show {overflow-y: auto; overflow-x: hidden;}
.btn-close-cookie {text-decoration: none;}
.form-check-input[disabled]~.form-check-label {color:#E0E0E0}