:root {
  --color-white: #fff;
  --color-near-white: #F7F7F7;
  --color-purple: #83388D;
  --color-blue: #37A8E0;
  --color-blue-darker: #049DBF;
  --color-dark-grey-opaque: rgba(90, 90, 90, 0.5);
  --color-grey-very-opaque: rgba(71, 71, 71, 0.1);
  --grey-text-color: #5a5a5a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-size: 12px;
  position: relative;
}

.text_centered { text-align: center; }

h1, h3 {
  font: 53px/50px 'Julius Sans One', Helvetica, sans-serif;
  font-weight: inherit;
}

p, .faded_text, .subtitle {
  font: 16px/24px 'Crimson Text', Georgia, serif;
}

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

.faded_text {
  opacity: 0.7;
  margin-bottom: 15px;
  font-size: 1.3em;
}

.push { padding: 20px; }

.near_white_section {
  background-color: var(--color-near-white);
  margin: 10px auto;
}

.stats_row {
  display: flex;
  flex-wrap: wrap;
}

.stat {
  width: 33.333%;
  padding: 0 15px;
}

.stat .stat-icon {
  font-size: 42px;
  color: var(--color-purple);
  display: inline-block;
  margin-bottom: 5px;
}

.stat h3 { font-size: 22px; line-height: 28px; }

.small_logo { width: 80px; }

/* header / hero */
.header_container {
  padding-top: 25px;
}

.logo_container {
  display: block;
  margin: 80px auto 0;
  width: 50%;
  background-color: rgba(255, 255, 255, 0.90);
  border-radius: 5px;
}

.logo_container_images { padding: 15px 30px 10px 30px; }

.logo_container_bottom {
  border-top: 1px solid var(--color-grey-very-opaque);
  text-align: center;
  padding: 10px;
  opacity: 0.8;
}

.main_logo, .secondary_logo {
  margin: 10px auto;
  display: block;
}

.main_logo { width: 90%; min-width: 250px; }
.secondary_logo { margin-top: 20px; width: 60%; }

.email-cta {
  display: inline-block;
  padding: 12px 24px;
  background: var(--color-purple);
  color: white;
  text-decoration: none;
  border-radius: 999px;
  font-size: 1.1rem;
  transition: background 0.2s ease;

  &:hover {
    background: var(--color-blue);
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

.animated {
  animation-duration: 0.75s;
  animation-fill-mode: both;
}

/* language toggle */
.spanish_eng_toggle {
  position: fixed;
  top: 10px;
  right: 10px;
  height: 50px;
  width: 50px;
  padding: 13px 0;
  cursor: pointer;
  z-index: 10000;
  background: var(--color-blue);
  border-radius: 50px;
  border: 1px solid var(--color-blue-darker);
  font-size: 1.2em;
  color: var(--color-white);
  text-decoration: none;
  display: block;
  text-align: center;
  transition: transform 0.2s;
  line-height: 1.5;
}

.spanish_eng_toggle:hover { transform: scale(1.2); }

/* about + offerings */
.content { padding: 30px 0; }

.about_me_header, .purple_header {
  color: var(--color-purple);
}

.about_me_header { font-size: 42px; line-height: 46px; }
.purple_header { font-size: 30px; margin-bottom: 25px; }

/* translation type boxes */
.types_row {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
  justify-content: center;
}

.translation_type_box {
  position: relative;
  display: block;
  width: 25%;
  padding: 0 10px 10px 0;
}

.translation_type_box .photo {
  width: 100%;
  height: 150px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#business { background-image: url("images/business.jpg"); }
#marketing { background-image: url("images/marketing.jpg"); }
#education { background-image: url("images/education.jpg"); }
#legal { background-image: url("images/legal.jpg"); }
#medical { background-image: url("images/medical.jpg"); }
#religious { background-image: url("images/religious.jpg"); }

.translation_type_box .caption {
  color: var(--color-white);
  background: var(--color-dark-grey-opaque);
  position: absolute;
  bottom: 10px;
  left: 0;
  top: 0;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.translation_type_name {
  font: 20px/24px 'Julius Sans One', Helvetica, sans-serif;
  opacity: 0.85;
}

/* parallax */
section.module.parallax {
  height: 400px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

section.module.parallax_main { background-image: url("images/puerto_rico.jpg"); }

/* footer */
.site_footer {
  text-align: center;
  padding: 20px 10px 25px;
  color: var(--grey-text-color);
  font: 16px/24px 'Crimson Text', Georgia, serif;
}

/* responsive */
@media all and (max-width: 960px) {
  .logo_container { margin-top: 0px; width: 70%; }
  .translation_type_box { width: 33.333%; }
}

@media all and (max-width: 825px) {
  .logo_container { width: 80%; }
}

@media all and (max-width: 700px) {
  .translation_type_box { width: 50%; padding-right: 0; }
  .translation_type_box .caption { right: 0; bottom: 0; margin-bottom: 0; border-bottom-left-radius: 4px; }
  .stat { width: 100%; margin-top: 25px; }
  .stat:first-child { margin-top: 15px; }
}

@media all and (max-width: 600px) {
  .logo_container { margin-top: 25px; }
  .about_me_header { font-size: 30px; line-height: 34px; padding-left: 10px; }
  .purple_header { font-size: 24px; }
  .stat h3 { font-size: 20px; }
}

@media all and (max-width: 500px) {
  section.module.parallax_main { height: 300px; }
  .faded_text { padding: 10px; font-size: 1.2em; margin-bottom: 5px; }
  .translation_type_box { width: 100%; }
  .main_logo { width: 80%; min-width: 200px; }
}

@media all and (max-width: 350px) {
  .logo_container { width: 90%; }
}