/* ==========================================================================
   Project:     Joe Godfrey Landing Page
   Date:        08/08/2023 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ==========================================================================
     Typography
========================================================================== */

body {font-family: 'Jost', sans-serif; }
h1,h2,h3,h4,h5,h6,.h1,.h1-large,.h2,.h3,.h4,.h5,.h6 { font-family: 'Jost', sans-serif; font-weight: 600;}
h1,.h1, .h1-large {font-weight: 700;}
.text-darkblue {color: #242E3F}
.text-gold {color:#D6B56E}
.text-darkgold {color: #AB9158}
.text-lineafter {position: relative; padding-bottom: 15px;}
.text-lineafter::after {content:""; width: 80px; height: 2px; background: #242E3F;margin:auto; position: absolute; bottom: 0px; left: 50%; margin-left: -40px;}
.text-medium {font-weight: 500}

/* ==========================================================================
     Base
========================================================================== */

html {scroll-behavior: smooth;}
a {color: #242E3F;text-decoration:underline;}
img {max-width: 100%; height: auto;}

/* ==========================================================================
     Components
========================================================================== */	

/* Btns */
.btn {text-decoration: none; font-family: 'Jost', sans-serif; border:none; font-size: .938em; font-weight: 700; padding: 10px 20px 10px 20px}

.btn-blue {background:#668EF4;color: #fff; text-transform: uppercase; border-radius: 8px; }
     .btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue:disabled {background: #567FE7 !important; color: #fff !important}
     .btn-blue:focus:not(:focus-visible) {box-shadow:none !important}

.btn-gold {background:#D6B56E;color: #242E3F; border-radius: 4px; }
     .btn-gold:hover, .btn-gold:focus, .btn-gold:active, .btn-gold:disabled {background: #EBCD8E !important; color: #242E3F !important}
     .btn-gold:focus:not(:focus-visible) {box-shadow:none !important}

.btn-link {color: #242E3F; font-weight: 400; text-decoration: underline;}

/* Backgrounds */
.bg-gold {background-color: #D6B56E}
.bg-mediumgold {background-color: #AB9158}
.bg-darkgold {background-color: #957E4D}
.bg-blue {background-color: #668EF4}
.bg-darkblue {background-color: #242E3F}
.bg-macon {background-image: url(/img/macon.jpg);background-size:cover;}

.bg-icon {position: relative;overflow:hidden;}
.bg-icon div:first-child {position: relative; z-index: 1}
.bg-icon::after {content:""; position: absolute; top: 50%; right: -150px; height: 300px; width: 300px;}
.bg-icon-scales::after {background-image: url(/img/bg-icon-scales.png);background-size: contain}
.bg-icon-legaldoc::after {background-image: url(/img/bg-icon-legaldoc.png);background-size: contain}
.bg-icon-handshake::after {background-image: url(/img/bg-icon-handshake.png);background-size: contain}

.bg-legal-logo {position: relative;}
.bg-legal-logo .container {position: relative; z-index: 1}
.bg-legal-logo::after {content:""; background-image: url(/img/legal-logo.svg);background-size:contain; background-position: center center; background-repeat: no-repeat; width: calc(100% - 20px); height: calc(100% - 20px); opacity: .10; position: absolute; top:10px; left: 10px; right: 10px; bottom: 10px; z-index: 0}

/* Borders */
.border-gold {border: 1.5px solid #D6B56E;}

/* Overlays */
.overlay-darkblue {position: relative;}
     .overlay-darkblue::after {background: rgba(36,46,63,.9); content:""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index:-1}

/* Indexes */
.z-index-0 {z-index: 0}
.z-index-1 {z-index: 1;}

/* Forms */
.form-control {border-color: #9C9C9C}
.form-control::-webkit-input-placeholder {color: #242E3F}
.form-control::-msplaceholder {color: #242E3F}
.form-control::-placeholder {color: #242E3F}

/* Radius */
.rounded-top-left-sm {border-top-left-radius: .2rem;}
.rounded-top-right-sm {border-top-right-radius: .2rem;}
.rounded-xl {border-radius: 15px}

/* Images */
.object-fit img {position: absolute; top: 0px; left:0px; width: 100%; height: 100%; object-fit:cover;z-index:0}
.object-fit-center-center img {object-position: center center;}
.object-fit-center-top img {object-position: center top;}

/* Widths */
.max-w-500 {max-width: 500px}

/* Links */
a.text-gold:hover, a.text-gold:focus {color: #fff}

/* Text */
.text-xs {font-size: .75em}
.text-sm {font-size: .875rem;}
.text-large {font-size: 1.125rem;}
.text-xlarge {font-size: 1.313rem}
.text-xxlarge {font-size: 1.5rem}

/* Alerts */
.alert-wrapper {top: 0px; left: 0px; width: 100%; z-index:2;}
     .alert-wrapper .alert {text-align:center; background: #242E3F; color: #fff; position: relative;width: 100%;font-size: .8125rem; padding: 0px 0px 0px 0px; line-height: 1.2; margin: 0px; border-radius: 0px}
     .alert-wrapper a {color: #fff;}
     .alert-wrapper button {position: absolute; width: 25px; height: 25px; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);padding: 0px; background:none; border:none; color: #fff;}
     .alert-wrapper button::before { content: '';height: 15px;border-left: 1.5px solid #fff;position: absolute;-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);left: 11px;top: 3px;}
     .alert-wrapper button::after { content: '';height: 15px;border-left: 1.5px solid #fff;position: absolute;-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);left:11px;top: 3px}
     .alert-wrapper button:hover, .alert-wrapper button:focus {color: #fff}


/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {	
     /* Type */
     h1, .h1 {font-size: 2.25rem}
     .h1-large {font-size: 2.5rem}

     /* Images */
     .object-fit {min-height: 300px;}
}

@media (min-width: 768px) {
     /* Type */
     h1, .h1 {font-size: 2.5rem}
     .h1-large {font-size: 3rem}

     .alert-wrapper {margin-top: -2.875rem !important; text-wrap: nowrap;}
}

@media (min-width: 992px) {
     /* Images */
     .object-fit {min-height: 400px;}

     .alert-wrapper {margin-top: -2.875rem !important}
}

@media (min-width: 1400px) {
     /* Images */
     .object-fit {min-height: 500px;}

     .alert-wrapper {margin-top: -2.875rem !important}
}
