/*========================================
  Variables
========================================*/
:root {
  --color-text: #7a7a7a;
  --color-bg: #fff;
  --color-grey-light: #f0f0f0;
  --color-gold: #bba454;
  --color-light-grey: #adadad;
  --font-sans: 'Open Sans', Helvetica, Arial, sans-serif;
  --font-serif: 'Volkhov', serif;
  --transition-default: all 0.3s ease-in-out;
}

/*========================================
  Base Styles
========================================*/
body {
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 0.875rem; /* 14px */
  line-height: 1.8;
  text-align: center;
  margin: 0;
}

h1 { font-size: 1rem; }
h2 { font-weight: 400; }

a {
  text-decoration: none;
  transition: var(--transition-default);
}

a:hover { color: #000; }

.nav-link {
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  letter-spacing: 1.3px;
}

#igi-comments { height: 10.85em; }

.hover-work:hover {
  border: 2px solid #eee;
  background: rgba(77, 77, 77, .4);
  cursor: default;
  opacity: 1;
}

.btn-close-white-igi {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.form-error {
    color: red;
    font-style: italic;
}
.form-error-shadow {
  box-shadow: 0 .5rem 1rem rgba(255 0 0, .15);
}

/*========================================
  Buttons
========================================*/
.button.outline.light,
.icon.outline.light {
  color: var(--color-light-grey);
  background: transparent;
  border: 2px solid var(--color-light-grey);
  transition: var(--transition-default);
}

a.icon-light {
  color: var(--color-light-grey);
  opacity: 0.5;
}

a.icon-light:hover {
  opacity: 1;
}

.btn-gold {
  background-color: var(--color-gold);
  border: var(--color-gold);
  padding: 0.9375rem 1.5625rem; /* 15px 25px */
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: 0.4s;
}

.btn-gold:hover {
  background-color: #4d4d4d;
  color: #fff;
}

/*========================================
  Carousel / Slider
========================================*/
.carousel-item {
  background-size: cover;
  background-position: center;
  min-height: 500px;
  transition: transform 1s ease-in-out;
}

#igi-slider-1 { background-image: url("./media/slider/Green_interview_setup.jpg"); height: 865px; max-height: 100%; }
#igi-slider-2 { background-image: url("./media/slider/TroyBuilt_Set_2048X1365.jpg"); height: 865px; max-height: 100%; }
#igi-slider-3 { background-image: url("./media/slider/Couple_in_kitchen.jpg"); height: 865px; max-height: 100%; }
#igi-slider-4 { background-image: url("./media/slider/Tell_Story3.jpg"); height: 865px; max-height: 100%; }
#igi-slider-5 { background-image: url("./media/slider/Doorway_Slider_2048X1365.jpg"); height: 865px; max-height: 100%; }
#heroCarousel { height: 865px; }
/*========================================
  Sections
========================================*/
.section {
  position: relative;
  padding: 100px 0 140px;
}

#igi-about, #igi-work {
  background: var(--color-grey-light);
}

#igi-demo, #igi-team, #igi-gear, #igi-sent {
  background: var(--color-bg);
}

#igi-testimony { 
  text-align: left;
  padding-bottom: 40px; 
}

/*========================================
  Section Images
========================================*/
.section-img {
  width: auto;
  height: 640px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

#igi-work-img { background-image: url("./media/Our_Work_1024X546.jpg"); }
#igi-gear-img { background-image: url("./media/Our_Gear_1024X546.jpg"); }
#igi-about-img { background-image: url("./media/Our_Story_Silhouette_5.jpg"); }
#igi-cta-img { background-image: url("./media/Passion_1024X546.jpg"); }
#igi-sent-img { background-image: url("./media/thanks.jpg"); height: 840px; }

/*========================================
  Avatars / Team
========================================*/
.section-avatar,
.thanks-avatar,
.work-avatar,
.team-img {
  border-radius: 50%;
  display: block;
  margin: auto;
  position: relative;
}

.section-avatar { height: 160px; width: 160px; border: 4px solid #fff; margin-top: -80px; }
.thanks-avatar { height: 90px; width: 90px; border: 4px solid #fff; }
.work-avatar { height: 50px; width: 50px; margin: -25px auto 20px; background: #fff; }

/* Employee hover block */
.employeeblock {
  padding: 20px 15px 10px;
  border: 2px solid #fff;
  transition: var(--transition-default);
}

.employeeblock:hover,
.hover-work:hover {
  border: 2px solid #eee;
  background: rgba(77, 77, 77, 0.4);
  cursor: pointer;
  opacity: 1;
}

/* Hover overlay mask */
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(77, 77, 77, 0.4);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-default);
}

.employeeblock:hover .mask {
  opacity: 1;
  visibility: visible;
}

.mask span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mask span i { color: #f2f2f2; margin: 3px; }

/*========================================
  Headers / Hero
========================================*/
.header {
  position: relative;
  width: 100%;
  height: 640px;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-center, .header-bottom {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-center { top: 50%; }
.header-bottom { bottom: -90px; }

.header-center hr, .header-bottom hr {
  width: 220px;
  height: 2px;
  background: #fff;
  border: 0;
  margin: 50px auto 35px;
}

/*========================================
  Typography Utilities
========================================*/
h1.bigtext { font-size: clamp(40px, 10vw + 1rem, 70px); line-height: 1.1em; }
h2.bigtext { font-size: clamp(35px, 10vw, 70px); line-height: 1.1em; }
h3.bigtext { font-size: clamp(30px, 8vw, 60px); line-height: 1.1em; }
h4.bigtext { font-size: clamp(25px, 10vw + 1rem, 50px); line-height: 1.1em; }
h5.bigtext { font-size: clamp(25px, 4vw + 1rem, 40px); line-height: 1.1em; }
h6.bigtext { font-size: clamp(16px, 2.5vw + 1rem, 30px); line-height: 1.1em; }

.igi-serif { font-family: var(--font-serif); }
.igi-sans { font-family: var(--font-sans); }
.igi-shadow { text-shadow: 0px 0px 5px #1d1d1d; }
.text-gold { color: var(--color-gold); }

div.big,p.big { font-size: 25px; line-height: 1.6em; margin-bottom: 25px; }

.letterspace { letter-spacing: .1em; font-stretch: extra-expanded; }

/*========================================
  Titles / Subtitles
========================================*/
.title {
  margin-bottom: 45px;
}

.title h1 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7647em;
  margin-bottom: 25px;
  text-align: center;
  position: relative;
}

.title hr {
  width: 80px;
  height: 2px;
  background: #ccc;
  margin: 0 auto;
  border: 0;
}

.title i {
  font-size: 3.375rem; /* 54px */
  color: #ccc;
  margin: 0 auto -45px;
  display: block;
  text-align: center;
}

.sub-title { font-size: 1.12em; }

.read-more-link:hover { color: #000; cursor: pointer; }
.title.read-more-link:hover { color: var(--color-gold); }

/*========================================
  Forms / Modal
========================================*/
.form-error { color: red; font-style: italic; }
.form-error-shadow { box-shadow: 0 0.5rem 1rem rgba(255,0,0,.15); }

.modal.fade .modal-dialog,
.modal.in .modal-dialog { transform: unset; transition: unset; }
.modal-backdrop { opacity: 0.9 !important; }

/*========================================
  Responsive Media Queries
========================================*/
/* Tablet / small screens */
@media (max-width: 767px) {
  #igi-slider-1,
  #igi-slider-2,
  #igi-slider-3,
  #igi-slider-4,
  #igi-slider-5 {
    height: 70vh; /* ~70% of viewport */
  }
  
  h1.bigtext { font-size: 3.5rem; }
  h2.bigtext { font-size: 3rem; }
  h3.bigtext { font-size: 2.5rem; }
  h4.bigtext { font-size: 2rem; }
  h5.bigtext { font-size: 1.5rem; }
  h6.bigtext { font-size: 1rem; }

  .section { padding: 70px 0; }
  .section-img { height: 480px; }
  #igi-sent-img { height: 400px; }
}

/* Mobile */
@media (max-width: 480px) {
  body { min-width: 300px; background-attachment: scroll; background-position: center; }
  #igi-slider-1,
  #igi-slider-2,
  #igi-slider-3,
  #igi-slider-4,
  #igi-slider-5 {
    height: 50vh; /* shorter + cleaner */
  }
  
  .header { height: 479px; background-attachment: scroll !important;}
  .header-parallax { position: local;}
  .header-bottom { bottom: -130px; }
  .thanks-title { margin-top: 5em; }
  h1.bigtext { font-size: 2.5rem; }
  h2.bigtext { font-size: 2rem; }
  h3.bigtext { font-size: 1.75rem; }
  h4.bigtext { font-size: 1.5rem; }
  h5.bigtext { font-size: 1.5rem; }
  h6.bigtext { font-size: 1rem; }
}