/* ==========================================================================
   Project:     Luther Rice Landing Page
   Date:        03/29/2022 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
   ========================================================================== */

/* ==========================================================================
     Typography
========================================================================== */

body {font-family: "Open Sans", sans-serif;color: #000;font-size: .875rem; line-height: 1.6;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: "Open Sans", sans-serif;color: #1c234b;font-weight: 700}
.text-gold {color: #FFCC66}
legend {font-size: 1rem}
.text-large  {font-size:1.125rem}
.text-arimo{font-family: "Arimo", sans-serif;}

/* ==========================================================================
     Basic Elements
========================================================================== */

a {color: #660000;text-decoration:underline;}
img {max-width: 100%; height: auto;}

/* ==========================================================================
     Layout
========================================================================== */
     
.container-fluid {max-width: 1100px; margin-left: auto; margin-right: auto}

header .bg-white {height: 50px}
     header .caption {position: relative; z-index:1;max-width: 600px}

.form-wrapper {position: relative; z-index: 2}
     form {border-radius: 15px;position: relative; z-index: 2}
     form h3 {border-radius: 15px 15px 0px 0px}
     form input, form select {border-color: #A28E66 !important; font-weight:bold !important;font-size: .875rem !important; color: #1c234b !important}
     .form-control::-webkit-input-placeholder {color: #1c234b; font-weight: bold}
     .form-control::-msplaceholder {color: #1c234b; font-weight: bold}
     .form-control::-placeholder {color: #1c234b; font-weight: bold}
     .form-control:focus, .form-control:active {box-shadow: 0 0 0 0.2rem rgba(102,0,0,.25)}
     .form-row {margin-left: -.5rem; margin-right: -.5rem;}
     .form-row div[class*="col-"] {padding-left: .5rem; padding-right: .5rem}

.overview-wrapper {position: relative; z-index: 0;}

footer .fab {background: rgba(255,255,255,.25); width: 28px; height: 28px; border-radius: 50%; line-height: 28px; color: #fff; font-size: .75rem; text-align:center}
footer hr {border-color: #fff}

/* ==========================================================================
     Buttons
========================================================================== */	

.btn {text-decoration: none; font-family: "Open Sans", sans-serif;color: #fff; border:none; font-size: 1rem;  font-weight: 700; padding: .5rem 1.5rem;}

.btn-maroon {background:#660000;}
     .btn-maroon:hover, .btn-maroon:focus, .btn-maroon:active, .btn-maroon:disabled {background: #8A0404; color: #fff}
     .btn-maroon:focus:not(:focus-visible) {box-shadow:none !important}
     .btn-maroon:focus, .btn-maroon:active {box-shadow: 0 0 0 0.2rem rgba(102,0,0,.25)}
     
/* ==========================================================================
     Backgrounds
========================================================================== */	

.bg-grey {background: #F1F1F1}
.bg-gold {background: #A28E66}
.bg-blue-logomarks {background:url(../img/luther-rice-logomark.png) #1c234b; background-size: 40px; position:  relative;}
.bg-gold-logomarks {background:url(../img/luther-rice-logomark.png) #A28E66; background-size: 40px; position: relative}

/* ==========================================================================
     Images
========================================================================== */	

.img-fit {position: relative;}
     .img-fit-overlay::before {z-index: 0; content:""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,.3);}
     .img-fit img {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover;z-index:0}
     .img-fit-top-center img {object-position: top center; }
     .img-fit-bottom-center img {object-position: bottom center; }
     .img-fit-center-center img {object-position: center center;}
     .img-fit-30-center img {object-position:center 30%;}
     .img-fit-right-center img {object-position: right center;}

.img-overlay {position: relative;z-index:1}
  .img-overlay::before {z-index: 1; content:""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,52,102,.8);}

.img-clip {margin-left: -5.5vw; z-index: 2; position: relative; }
     .img-clip img {clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);width: calc(100% + 5.5vw);max-width:none}

.img-greyscale {filter: grayscale(100%)}

/* ==========================================================================
    Opacities  
========================================================================== */	

.opacity-50 {opacity:.5}

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

@media (min-width: 0px) {	
     /*  Layout */
     header .img-clip {height: 200px}
     .form-wrapper .col-md-6:first-child {margin-bottom: 1.5rem}
     .overview-wrapper {padding-top: 1.5rem}
}

@media (min-width: 576px) {
     /* Layout */
     header .img-fit {height: 300px}
     header .img-clip {height:350px} 
     .thanks header .img-fit {height: auto}
}

@media (min-width: 768px) {
     /* Layout */
     .container-fluid {padding-left: 30px; padding-right: 30px}
     header .img-fit {height: 350px}
     header .img-clip {height:400px}
     form {margin-top: -80px}
     .form-wrapper .col-md-6:first-child {margin-bottom: -100px}
     .overview-wrapper {padding-top: 80px}
}


@media (min-width: 1200px) {
     /* Layout */
     header .caption h1 {font-size: calc(1.5em + 2vw)}
     header .img-fit {height: 400px}
     header .img-clip {height:450px}
}

@media (min-width: 2000px) {
     /* Layout */
     header .img-fit {height: 500px}
     header .img-clip {height:550px}
}

@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}
}