/* ==========================================================================
   Project:     Sunoco Ultra 94
   Date:       12/01/20 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* Typeography */
@font-face {font-family: 'greycliff_cfdemi_bold';src: url('/css/fonts/greycliffcf-demibold-webfont.woff2') format('woff2'),url('/css/fonts/greycliffcf-demibold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'greycliff_cfheavy';src: url('/css/fonts/greycliffcf-heavy-webfont.woff2') format('woff2'),url('/css/fonts/greycliffcf-heavy-webfont.woff') format('woff');font-weight: normal;font-style: normal;} 

.ultra-94-panel {font-family: 'greycliff_cfdemi_bold', Helvetica, sans-serif}
.ultra-94-panel h2 {line-height: 1.1; font-family: 'greycliff_cfheavy',Helvetica, sans-serif; color: #1999c1;}
.ultra-94-panel p { color: #fff; }
.text-blue {color:#1999c1 !important;}

/* Layout */
body {background: #000;overflow-x:hidden}
main {max-width: 1400px; margin: auto; padding: 0px 15px;position: relative;}
.ultra-94-panel {color: #fff; position: relative;background: #000;overflow:hidden;font-size: 1rem;line-height: 1.5rem;}
.ultra-94-panel a:not(.btn) {color: #1999c1;}
.ultra-94-panel:not(.video-panel):not(.about-panel) {padding-top: 3rem; padding-bottom: 3rem}

/* Menu */
.panelmenu {position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);right: 30px;z-index: 999;}
     .panelmenu li {margin-bottom: 5px;}
     .panelmenu button {background: none; border:2px solid  #1999c1; width: 10px; height: 10px; border-radius: 50%; padding: 0px;}
     .panelmenu button:hover, .panelmenu button:focus {border: 2px solid white}
     .panelmenu li.active button {background:  #1999c1}
     .panelmenu li.active button:hover, .panelmenu li.active button:focus {border:2px solid  #1999c1}

/* Header */
header {position: relative}
     header img {width: 70px; position: absolute; top: 15px; right: 60px;z-index: 2;}
     header .btn-toggle-offcanvas {border-radius: 0px;right: 8px;top: 19px; height: 34px; position: absolute; font:inherit;display:inline-block;overflow:visible;margin:0;padding:5px;cursor:pointer;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent; z-index: 2}
     header .hamburger-box {position: relative;display: inline-block;width: 24px;height: 24px;}
     header .hamburger-inner,header .hamburger-inner:after,header .hamburger-inner:before{position:absolute;width:24px;height:3px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:#fff}
     header .hamburger-inner{top:50%;display:block;margin-top:-1px; transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s;}
     header .hamburger-inner:after,header .hamburger-inner:before{display:block;content:"";}
     header .hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in; top:-9px;}
     header .hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19); bottom:-9px;}

header .btn.active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg); background-color: #1999c1;}
     header .btn.active .hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0; background-color: #1999c1;}
     header .btn.active .hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg); background-color: #1999c1;}

.offcanvasmenu {position: fixed; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px);transform: translateY(-30px); left: 0px; width:100%; z-index:1;opacity: 0; transition: all 500ms ease-out; background: #000; background: radial-gradient(ellipse at center, #252d30 0%,#000000 100%); box-shadow:0px 0px 25px 0px rgba(113, 205, 242, .5); padding: 30px; font-family: 'greycliff_cfdemi_bold', Helvetica, sans-serif;}
     .offcanvasmenu.active {opacity: .9; -webkit-transform: translateY(0px); -ms-transform: translateY(0px);transform: translateY(0px);}
     .offcanvasmenu li span {font-size: .875rem}
     .offcanvasmenu li:not(:last-child) {margin-bottom: 20px}
     .offcanvasmenu a {text-decoration:none; color: #1999c1;transition: color 150ms ease-in-out}
     .offcanvasmenu a:hover, .offcanvasmenu a:focus {color: #fff}
 
/* Video */
.video-panel {position: relative}
.video-panel video {width: 100%; position: relative; z-index: 0;}
.video-panel .btn-scrolldown {opacity: 0; transition: all 250ms ease-in-out; top: calc(100% - 50px); position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background:none; border: 1px solid #1999c1; width: 44px; height: 44px; border-radius: 50%; padding: 0px;z-index:1}
.video-panel .btn-scrolldown.active {opacity: 1; top: calc(100% - 70px); }
.video-panel .angle {border: 1px solid #1999c1;border-width: 0px 0px 1px 1px;width: 16px; height:16px;display:block; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);transform: rotate(-45deg);position: absolute; left: 13px; top: 9px;}
.video-panel .btn-scrolldown:hover, .video-panel .btn-scrolldown:focus {border-color: #fff;}
.video-panel .btn-toggle-video {opacity: .35; z-index: 1; position: absolute; bottom: 15px; right: 15px; background:none; border: none; color: #fff; padding: 0px;font-size: .875rem}

/* About */
.about-panel {z-index: 0; background: #000; background: radial-gradient(ellipse at center, #252d30 0%,#000000 100%);}
.about-panel .btn {width: 150px}
.about-panel p {font-size: 1.2rem;line-height: 1.6rem; margin-left: auto; margin-right: auto; max-width: 9d00px}

/* Faq */
.faq-panel {background: url(/img/ultra-94-car-side.jpg) center center no-repeat; background-size: cover; z-index: 2}
.faq-panel .card {border: 1px solid  #2b6f9d;margin-left: auto; margin-right: auto; margin-bottom: 1rem !important /* Override cms plugin default */; background:rgba(0,0,0,.7); -webkit-transform: scale(0.9);-ms-transform: scale(0.9); transform: scale(0.9);transition: opacity 500ms ease-in-out, scale 500ms ease-in-out; opacity: 0}
.faq-panel .card.visible {opacity: 1; -webkit-transform: scale(1);-ms-transform: scale(1); transform: scale(1);}
.faq-panel .btn-link {color:#1999c1; font-weight: 500;}
.faq-panel .card-header::before {color: #fff;margin-right: 1rem; margin-left: 0px}
.faq-panel .cms-accordion .card:not(:last-of-type), .faq-panel .cms-accordion >.card:not(:first-of-type) {border-bottom: 1px solid  #2b6f9d}
.faq-panel .cms-accordion .card:nth-child(1) {transition-delay: .25s}
.faq-panel .cms-accordion .card:nth-child(2) {transition-delay: .5s}
.faq-panel .cms-accordion .card:nth-child(3) {transition-delay: .75s}
.faq-panel .cms-accordion .card:nth-child(4) {transition-delay: 1s}
.faq-panel .cms-accordion .card:nth-child(5) {transition-delay: 1.25s}
.faq-panel .cms-accordion .card:nth-child(6) {transition-delay: 1.5s}
.faq-panel .cms-accordion .card:nth-child(7) {transition-delay: 1.75s}
.faq-panel .cms-accordion .card:nth-child(8) {transition-delay: 2s;}
.faq-panel .cms-accordion .card:nth-child(9) {transition-delay: 2.25s; margin-bottom: 0 !important}

/* Map */
.locations-panel {z-index: 2;}

.locations-panel div[role="toolbar"] {max-width: 600px; margin-left: auto; margin-right: auto}
.locations-panel div[role="toolbar"] button, .locations-panel div[role="toolbar"] input {height: 44px;}
.locations-panel div[role="toolbar"] input {background: none; color: #fff; border: 1px solid #1999C1}

.ultra-94-locator {position: relative;}
     .ultra-94-locator .row {visibility:hidden; position: relative;opacity: 0; transition: opacity 500ms ease}
     .ultra-94-locator::before {z-index: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f110";color: #1999C1; font-size: 2rem;  -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear;}
     .ultra-94-locator.has-json .row {visibility: visible;opacity:1}
     .ultra-94-locator.has-json::before {content:none}
     .ultra-94-locator .alert-radius {background: #1999c1; color: #fff; padding: 15px; text-align:center; width: 100%}

     .ultra-94-locator .locations {width: 100%; }
     .ultra-94-locator .locations li { height: 400px}
     .ultra-94-locator .location { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.2);font-size: .938rem;line-height: 1.4;}
     .ultra-94-locator .location:hover {}
     .ultra-94-locator .location a {display:block; padding-top: 60px;}
     .ultra-94-locator .location a::before {content:"";  width: 40px; height: 40px;border-radius: 20px;position:absolute;top:10px; right: 13px; background:url(/img/location-arrow.png) -2px -2px no-repeat #1999C1; background-size: cover;}

     .ultra-94-locator nav {padding: 10px; position: absolute; max-width:none; left: 30px; text-align:center}
     .ultra-94-locator nav .locations-prev, .ultra-94-locator nav .locations-next {width: 26px; height: 26px;background: none;border: none;position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
	.ultra-94-locator nav .locations-prev {left:20px}
     .ultra-94-locator nav .locations-prev::before, .ultra-94-locator nav .locations-next::before {transition: border 250ms ease; content:"";position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.ultra-94-locator nav .locations-prev::before {border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid rgba(255,255,255,.5);}
	.ultra-94-locator nav .locations-next::before { border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid rgba(255,255,255,.5);}
     .ultra-94-locator nav .locations-prev:hover::before {border-right-color: #fff}
     .ultra-94-locator nav .locations-next:hover::before {border-left-color: #fff}
     
     .marker-label {color: #fff; font-size: .75rem;font-family: 'greycliff_cfdemi_bold', Helvetica, sans-serif;z-index: 0; line-height: 1; text-align:center; position: absolute; top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow:hidden}

/* Buttons */
.ultra-94-panel .btn-blue {background: #1999c1; color: #000; text-decoration:none; border-radius: 1px;font-size: .875rem; padding: .25rem 1.5rem; font-family: 'greycliff_cfdemi_bold', Helvetica, sans-serif}
.ultra-94-panel .btn-blue:hover, .ultra-94-panel .btn-blue:focus {background: #fff; color: #000}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {	
     .about-panel {padding: 25px 50px}
     .faq-panel .card {padding: 1rem;}
     .faq-panel .cms-accordion .btn-link {font-size: 1rem; line-height: 1.2rem}
     .offcanvasmenu {font-size:18px;}
     .video-panel video {margin-top: 70px;}

     .ultra-94-locator #map {height: 300px; margin: 0px 0px 20px 0px}
     .ultra-94-locator .location {margin: 15px 30px 15px 30px;}
     .ultra-94-locator nav { width: calc(100% - 60px); bottom: 0px }
     .ultra-94-locator nav .locations-next {right:30px}

     .ultra-94-locator .alert-radius {margin: 0px 30px;}
}

@media (min-width: 768px) {	
     .about-panel {padding: 50px 150px;}
     .about-panel .row {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);z-index:1}
     .faq-panel .card {padding: 2rem; width: 600px}
     .faq-panel .cms-accordion .btn-link {font-size: 1.2rem; line-height: 1.5rem}
     .faq-panel ul {margin-left: auto; margin-right: auto; width: 600px; opacity: .75;font-size: .7rem}
     .offcanvasmenu {font-size: 20px;}
     .video-panel video {margin-top: 0px;}

     .ultra-94-locator.has-latlon .row .col-12:nth-child(1) {order: 2; width: calc(60% + 30px); max-width: calc(60% + 30px); margin-left: -30px; z-index:1}
	.ultra-94-locator.has-latlon .row .col-12:nth-child(2) {order: 1; width: 40%; max-width: 40%; box-shadow:5px 0 14px 1px rgba(255,255,2552,.25);z-index:0;margin:0px}
     .ultra-94-locator #map {height: 460px; margin: 0px;}
     .ultra-94-locator .location {margin: 15px 0px 15px 30px;}
     .ultra-94-locator nav { width: calc(100% - 30px); bottom: 23px}
     .ultra-94-locator nav .locations-next {right:20px}

     .ultra-94-locator .alert-radius {margin: 0px 0px 0px 30px;}
}

@media (min-width: 992px) {

}

@media (min-width: 1026px) {	
	.ultra-94 .footer-wrapper {padding: 55px 45px 20px 55px}
}

@media (min-width: 1400px) {
     .ultra-94-locator.has-latlon .row .col-12:nth-child(1) {width: calc(75% + 30px); max-width: calc(75% + 30px);}
	.ultra-94-locator.has-latlon .row .col-12:nth-child(2) {width: 25%; max-width: 25%; }
}