/* ==========================================================================
     Project:     Third Wave Digital - Landing Page Q4 2025
     Date:        10/21/2025 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

:root {
     --body: #3F3F3F;
     --white: #fff;
     --light-grey: #eee;
     --dark-grey: #808797;
     --green: #006838;
     --light-blue: #93D8F2;
     --blue: #0060B6;
     --dark-blue: #0E1C3A;
     --red: #DA2F30;
}

/* ==========================================================================
     Typopgraphy
========================================================================== */

body {font-family: "Roboto", sans-serif;color:var(--body);overflow-x:hidden}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .text-eyebrow {font-family: "League Spartan", sans-serif; color: var(--body); font-weight:700; line-height: 1.1; margin-bottom: 1.5rem; text-transform: uppercase;}
h1,h2,h3,.h1,.h2,.h3 {letter-spacing: 10px;}
h4,h5,.h4,.h5 {letter-spacing: 5px;}
h1,.h1 {line-height: 1;}

/* ==========================================================================
     Components
========================================================================== */ 

/* Links */
a {color: var(--blue);text-decoration: underline;}
a:hover { text-decoration: none;color: var(--red)}

/* Images, Videos */
img, video {max-width: 100%;}

.obj-fit {position: relative;}
.obj-fit-overlay::before {z-index: 1; content:""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,.3);}
.obj-fit-item {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover;z-index:0}
.obj-fit [class*="container"] {position: relative; z-index: 1}
.obj-fit-top-center img,.obj-fit-top-center video {object-position: top center; font-family: "object-fit: cover; object-position: top center;"}
.obj-fit-bottom-center img,.obj-fit-bottom-center video {object-position: bottom center; font-family: "object-fit: cover; object-position: bottom center;"}
.obj-fit-center-center img,.obj-fit-center-center video {object-position: center center; font-family: "object-fit: cover; object-position: center center;"}
.obj-fit-right-center img, .obj-fit-right-center video {object-position: right center; font-family: "object-fit: cover; object-position: right center;"}

/* Text */
.text-xs {font-size: .75rem;}
.text-large {font-size: 1.25rem}
.text-blue {color: var(--blue)}
.text-light-blue {color: var(--light-blue)}
.text-green {color: var(--green)}
.text-red {color: var(--red)}

.leading-none {line-height:1}
.leading-tight {line-height: 1.3}
.font-league-spartan {font-family: "League Spartan", sans-serif;}
.font-roboto {font-family: "Roboto", sans-serif; letter-spacing: 0px; text-transform:none;}
.text-eyebrow{font-size: .813rem; letter-spacing: 3px;}
.text-shadow-lg {text-shadow:0px 0px 9px rgba(0,0,0,0.76)}

/* Backgrounds */
.bg-green {background: var(--green)}
.bg-red {background: var(--red)}
.bg-blue {background: var(--blue)}
.bg-dark-blue {background: var(--dark-blue)}
.bg-lines-1 {background: url(/img/bg-lines-01.svg) bottom right no-repeat var(--white); background-size: contain}
.bg-lines-2 {background: url(/img/bg-lines-02.svg) bottom right no-repeat var(--white); background-size: contain}
.bg-office-light {background: url(/img/bg-office-light.jpg) center center no-repeat; background-size: cover}
.bg-office-dark {background: url(/img/bg-office-dark.jpg) center center no-repeat; background-size: cover}
.bg-light-grey {background: var(--light-grey)}
.bg-map {background: url(/img/Map.svg) no-repeat; background-size: cover; background-color: var(--dark-blue);}

/* Lists */
.list-bordered {list-style:none; border-left: 3px solid var(--blue); padding: 0px 0px 0px 15px;}
.list-bordered li {margin-bottom: 7.5px}

/* Forms */
.contact-form {box-shadow: rgba(147, 216, 242, 0.5) 0px 10px 30px 0px;}
.contact-form input, .contact-form textarea {font-weight:bold; border-radius: 0px; border:none;border-left: 1.5px solid var(--dark-grey); border-bottom: 1.5px solid var(--dark-grey); padding: 0px; font-size: .813rem}
.contact-form input { padding: 10px;}
.contact-form textarea {border: 1.5px solid var(--dark-grey); padding: .5rem; height: 100px}

/* Buttons */
.btn-blue, .btn-green, .btn-red, .btn-white {border: none; color: var(--white); background:none; font-size: .813rem; line-height: 0; text-decoration: none; font-family: "League Spartan", sans-serif;font-weight: 700; text-transform: uppercase; transition: background 250ms ease; padding:20px 30px; border-radius: 0px; margin: 0px; letter-spacing: 5px;}
    
.btn-blue {background: var(--blue); color: var(--white)}
.btn-blue:hover, .btn-blue:focus {background: color-mix(in srgb, var(--blue) 50%, var(--body)); color: var(--white);}

.btn-green {background: var(--green); color: var(--white)}
.btn-green:hover, .btn-green:focus {background: color-mix(in srgb, var(--green) 50%, var(--body)); color: var(--white);}

.btn-red {background: var(--red); color: var(--white)}
.btn-red:hover, .btn-red:focus {background: color-mix(in srgb, var(--red) 50%, var(--body)); color: var(--white);}

.btn-white {background: var(--white); color: var(--blue)}
.btn-white:hover, .btn-white:focus {background: color-mix(in srgb, var(--white) 70%, var(--body)); color: var(--blue);}

/* Slideshows */
.work-slideshow .slick-dots {padding:0px; margin:0px; text-align:center;margin-top: 1.5rem;}
.work-slideshow .slick-dots li {display:inline-block; padding: 0px 4px}
.work-slideshow .slick-dots button { opacity: .25; width: 7px; height: 7px; display:block; border-radius: 50%;border:none; padding: 0px; background: var(--body)}
.work-slideshow .slick-dots .slick-active button {opacity: 1; background: var(--body)}
.work-slideshow .slick-dots button:focus {outline: none}

/* Cards */
.card-custom {display:block; position: relative}
.card-custom .card-details {position: absolute; bottom: 0px; left: 0px; width: 100%;z-index: 1; padding: 0 5px 2.5px 5px;}
.card-custom .card-img {position: relative; z-index: 0}

/* Borders */
.border-bottom-blue { border-bottom: 1.5px solid var(--blue);padding-bottom: 5px;}

/* Videos */
video {opacity: 0; transition: opacity 500ms ease;}
video.ready {opacity: 1}

.video-loading { color: var(--white); opacity: .5; position: absolute;top: 50%;left: 50%;z-index: 1;transform: translate(-50%, -50%);font-size: 1.5rem;transition: opacity 250ms ease;}
.video-loading.fade-out {opacity: 0}

.btn-video {right: 15px;bottom: 15px;position: absolute;z-index: 2; opacity: .5;font-size: 0.625rem;background: none;border: none;color: var(--white);transition: opacity 250ms ease;}
.btn-video:hover, .btn-video:focus {opacity: 1}

/* ==========================================================================
     CMS Components
========================================================================== */

/* Btns */
.cms-slideshow .btn-primary, .cms-form .btn-primary, form[name=frmSearch] .btn-primary {background: var(--blue); color: var(--white);}
.cms-slideshow .btn-primary:active, 
.cms-slideshow .btn-primary:hover, 
.cms-slideshow .btn-primary:focus,
.cms-form .btn-primary:active, 
.cms-form .btn-primary:hover, 
.cms-form .btn-primary:focus,
form[name=frmSearch] .btn-primary:hover,
form[name=frmSearch] .btn-primary:focus, 
form[name=frmSearch] .btn-primary:active {background: color-mix(in srgb, var(--red) 50%, var(--body)); color: var(--white);}

/* Accordions */
.cms-accordion .card {background:none; border-radius: 0px; border: none; border-bottom: 2px solid rgba(165,163,162,0.25) !important;}
.cms-accordion .card:first-child {border-top: 2px solid rgba(165,163,162,0.25);}
.cms-accordion .card-header {transition: color 250ms ease;position: relative;border-radius: 0px; background:none;border:none; padding: 25px 50px 25px 50px!important; color: var(--red); font-weight: 900;}
.cms-accordion .card-header:hover, .cms-accordion .card-header:focus {text-decoration:none; cursor: pointer}
.cms-accordion .card-header::before {transition: transform 250ms ease; background: url(/img/icon-plus.svg) center center no-repeat;background-size: 100% 100%; width: 25px; height: 25px; content:""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
.cms-accordion .card-header[aria-expanded=true] { color: var(--red); border-bottom: none}
.cms-accordion .card-header[aria-expanded=true]::before {-webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg);transform: translateY(-50%) rotate(45deg); }
.cms-accordion .card-body a {color: var(--red);}
.cms-accordion .card-body p {color: var(--body);}
.cms-accordion .card-body {padding: 0px 30px 30px 30px; margin-bottom: 20px;position: relative; margin-top: 20px; overflow:hidden  }
.cms-accordion .card-body::after {width: 4px; background: var(--red); content: ""; position: absolute; top: 0px; left: 0px; bottom: 30px; }
.cms-accordion .card-body *:last-child {margin-bottom: 0px}
.cms-accordion .collapsing {transition-duration: 500ms; transition-timing-function: ease-in-out;}

/* Tabs */
.cms-tabs .nav {margin-bottom: 0px !important}
.cms-tabs .nav p:hover {cursor: pointer}
.cms-tabs .nav-pills .nav-link {background: var(--body); color: var(--white); font-weight: 900;border-radius: 0px; border:none; padding: 5px 25px}
.cms-tabs .nav-pills .nav-link.active, .cms-tabs.nav-pills .show>.nav-link {background: var(--light-grey);color: var(--body); }
.cms-tabs .tab-content {background: var(--light-grey); padding: 1.5rem;}
.cms-tabs .tab-content *:last-child {margin-bottom: 0px}

/* Calendar */
.cms-calendar .text-primary {color: var(--red) !important}
.cms-calendar .bg-primary {background: var(--red) !important}

/* Forms */
form[name=frmSearch] .btn-primary {border-radius: 0px}

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

@media (min-width: 0px) {	
     /* Type */
     h1 {font-size: 2.5rem}

}

@media (min-width: 576px) {    
     /* Type */
     h1 {font-size: 3.5rem}
}

@media (min-width: 768px) {	

}

@media (min-width: 992px) {	
     /* Type */
     h1 {font-size: 4rem}
}

@media (min-width: 1200px) {
       /* Type */
       h1 {font-size: 5rem}

     /* Backgrounds */
     .bg-rectangle-bottom::after {width: 130vw}
}    

@media (min-width: 1400px) {	
     /* Backgrounds */
     .bg-rectangle-bottom::after {width: 80vw}
     .bg-map {background-position: center 40%}
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}