/* 
Theme name: D'Angelo website custom theme
Description: child theme for D'Angelo & Associates website
Author: Dirk Kiesewetter
Template: Divi
Version 2.2.1
*/

/******************************************************************
---------------------------- SITE COLORS --------------------------
******************************************************************/
:root {
  --engineering-orange: #ba1200;
  --rich-blue: #031927;
  --baby-blue: #9dd1f1;
  --airforce-blue: #508aa8;
  --columbia-blue: #c8e0f4;
}

.white-text {
  color: #fff;
}

.dark-text {
  color: var(--rich-blue);
}

/******************************************************************
---------------------------- TYPOGRAPHY ---------------------------
******************************************************************/

@import url("https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap");

/*
.martel-sans-extralight {
  font-family: "Martel Sans", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.martel-sans-light {
  font-family: "Martel Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.martel-sans-regular {
  font-family: "Martel Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.martel-sans-semibold {
  font-family: "Martel Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.martel-sans-bold {
  font-family: "Martel Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.martel-sans-extrabold {
  font-family: "Martel Sans", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.martel-sans-black {
  font-family: "Martel Sans", sans-serif;
  font-weight: 900;
  font-style: normal;
}
  */

.underlined-text {
  text-decoration: underline;
}

.all-caps-text {
  text-transform: uppercase;
}

h1.homepage-header {
  line-height: 1.2;
  font-size: clamp(2rem, 1.625rem + 1.6667vw, 2.5rem);
  text-transform: uppercase;
  font-family: "Martel Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}

h1.page-header {
  line-height: 1.2;
  font-size: clamp(2.5rem, 2.125rem + 1.6667vw, 3rem);
  font-family: "Martel Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}

h2,
h3,
h4,
h5 {
  font-family: "Martel Sans", sans-serif !important;
}

h2.section-header,
h2.et_pb_contact_main_title {
  line-height: 1.2;
  font-size: clamp(1.75rem, 1.375rem + 1.6667vw, 2.25rem);
  font-family: "Martel Sans", sans-serif !important;
  font-weight: 600;
  font-style: normal;
}

h3.section-subheader {
  line-height: 1.3;
  font-size: clamp(1.5rem, 1.125rem + 1.6667vw, 2rem);
  font-family: "Martel Sans", sans-serif !important;
}

h4.item-title {
  font-size: clamp(1.25rem, 0.875rem + 1.6667vw, 1.75rem);
  font-family: "Martel Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}

h5.item-subtitle {
  font-size: clamp(1rem, 0.8125rem + 0.8333vw, 1.25rem);
  font-family: "Martel Sans", sans-serif !important;
  font-weight: 600;
  font-style: italic;
  padding-top: 5px;
}

p.body-text,
ul.itemized-list li,
div.unordered-list-container > ul {
  font-size: clamp(0.9rem, 0.825rem + 0.3333vw, 1rem);
  font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
}

ul.itemized-list li {
  color: #fff;
}

ul.second-level-list {
  padding-bottom: 0 !important;
  margin-left: 20px;
}

/******************************************************************
--------------------- HEADER-SPECIFIC STYLING ---------------------
******************************************************************/

.shadowed-content {
  text-shadow: 5px 5px 3px #000, 2px 2px 2px #030303 !important;
}

img.shadowed-content {
  filter: drop-shadow(3px 3px 1px #000000) !important;
  webkit-filter: drop-shadow(3px 3px 1px #000000) !important;
}

/******************************************************************
------------------ SECTION/ROW ALIGNMENT & SPACING ----------------
******************************************************************/

div.fullwidth-row,
div.fullwidth-section {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

div.vertical-align-row {
  align-items: center;
}

div.col-auto-margins {
  margin: auto;
}

div.col-no-padding {
  padding: 0;
}

div.five-pct-vert-padding {
  padding-top: 5%;
  padding-bottom: 5%;
}

div.ninety-pct-wide-row {
  width: 90%;
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
}

/******************************************************************
----------------------- MODULE SPECIFIC CSS -----------------------
******************************************************************/

form.client-login-form .input {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 15px;
  border-radius: 6px 6px 6px 6px;
  overflow: hidden;
  border-width: 2px;
  width: 100%;
  color: #fff;
  background-color: RGBA(255, 255, 255, 0);
  border-color: rgba(255, 255, 255, 0.4);
  font-family: "Proza Libre", Helvetica, Arial, Lucida, sans-serif;
}

form.client-login-form .input :placeholder-shown,
form.client-login-form .input::placeholder {
  color: white;
  text-indent: 15px;
}

button.form-submit-button {
  color: white;
  background-color: var(--engineering-orange);
  margin-top: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-family: "Proza Libre", Helvetica, Arial, Lucida, sans-serif;
}

button.form-submit-button:hover {
  background-color: transparent;
  border-color: transparent;
}

/******************************************************************
------------------- POSITIONING & FLEX CONTAINER ------------------
******************************************************************/
div.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-items: flex-start;
}

div.unordered-list-container {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}

/******************************************************************
--------------------- MEDIA QUERIES & MISC CSS --------------------
******************************************************************/

/* changes color of hamburger menu */
@media only screen and (max-width: 980px) {
  #et-top-navigation span.mobile_menu_bar:before,
  #et-top-navigation span.mobile_menu_bar:after {
    color: var(--rich-blue);
  }
}

@media screen and (min-width: 984px) {
  img.header-logo {
    width: 500px;
  }
}

@media screen and (max-width: 600px) {
  img.header-logo {
    width: 300px;
  }
}

@media screen and (min-width: 486px) and (max-width: 980px) {
  .services-card {
    xwidth: 440px;
    margin: auto;
    xflex-shrink: 3;
  }
}