:root {
  --brand: 'Foco', Helvetica, sans-serif;
  --body: 'proxima-nova', Helvetica, sans-serif;
  --main: #3C4154;
  --red: #CC3344;
}

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   MOBILE STUFF
   ========================================================================== */

@media (max-width: 768px) {
  body {
  padding-top: 0;
  }
  .container-hero {
    margin: auto;
  } 
  .text-down {
    text-align: center;
  }
}
@media (max-width: 992px) { 
  .hero .text-down {
    margin-top: 0;
  }
  .navbar {
    box-shadow: none !important;
  }
  .navbar-light .navbar-toggler {
    display: none;
  }
  .fixed-top {
    position: absolute;
  }
  .bg-white {
    background-color: rgba(214,224,211,1) !important;
  }
  .test-1 {
    order: 2;
  }
  .test-2 {
      order: 1;   
       width: 100%;
  }
}

/* ==========================================================================
   GENERAL LAYOUT
   ========================================================================== */

body {
  padding-top: 40px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--main);
}

section { padding: 70px 0; }
.lead { font-size: 16px; }

.img-container {
  text-align: center;
  display: block;
  width: 400px;
}

.clients {
  background-color: #6A687E;
  text-align: center;
}

.lightgreen { background-color: #E9F0EB; }
.yellow { background-color: #fffce2; }

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero { background: linear-gradient(0deg, rgba(255,253,206,1) 0%, rgba(214,224,211,1) 100%); }
.text-down { margin-top: 40px; }

.btn-cta {
  background: var(--red);
  border-radius: 4px;
  font-size: 18px;
  padding: 8px 20px;
  color: #FFF;
  display: inline-block;
  text-decoration: none;
  transition: all .15s ease;
}

.btn-cta:hover {
  color: #FFF;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  background: #e04254;
}

.btn-cta:active {
  background: var(--red);
  box-shadow: none;
  outline: none;
  transform: translateY(1px);
}

/* ripple effect (for mobile only) */

@media only screen and (max-width: 992px){
  .btn-cta {
    background-position: center;
    transition: background 0.6s;
  }
  .btn-cta:hover {
    background:var(--red) radial-gradient(circle, transparent 1%, #e04254 1%) center/15000%;
  }
  .btn-cta:active {
    background-color: var(--red);
    background-size: 100%;
    transition: background 0s;
  }
}

/* ==========================================================================
   SECTION LOGO CLIENTS
   ========================================================================== */

@media only screen and (max-width: 992px){
  .small-logos {
    width: 20%;
  }
}

.clients-text {
  color: #272c3e;
}

.logos {
  margin: auto;
  padding: 20px;
}

/* ==========================================================================
   SECTION SERVICES
   ========================================================================== */

.services-icon {
  margin-bottom: 10px;
  font-size: 30px;
  display: inline-block;
  fill: var(--red);
  width: 30px;
  height: 30px;
}

/* header menu */ 

.navbar-brand { padding: 0; }
.logo { width: 90px; }
a.navbar-brand { background: none; }

.navbar {
  height: 65px;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
}

.nav-item { padding-left: 20px; }

.navbar-light .navbar-nav .nav-link {
  color: #6A687E;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13px;
  font-weight:  700;
  background-color: rgba(214,224,211,0);
  border-radius: 20px;
  padding: 5px 15px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: #3c4834;
  background-color: rgba(214,224,211,0.6);
}

.navbar-light .navbar-nav .nav-link:active {
  color: #7c926e;
  background-color: rgba(214,224,211,0.2);
}

/* Typography */

.link-body {
  color: var(--body);
  box-shadow: inset 0 -3px 0 #f7bfbf;
}

.link-body:hover {
  color: var(--body);
  background: #f7bfbf;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.link-arrow {
  color: #cc3244;
  text-decoration: none;
}

.link-arrow:after {
  content: "\2192";
  padding-left: 5px;
}

.link-arrow:hover {
  color: #9e1424;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 #9e1424;
}

h1, h2, h3 { font-family: var(--brand); }

h1 {
  color: var(--main);
  font-size: 36px;
  line-height: 1.2em;
  padding-top: 15px;
  padding-bottom: 5px;
}

h2 {
  font-size: 24px;
  color: var(--main);
}

h3 {
  font-size: 22px;
  color: var(--red);
}

h6 {
  font-size: 18px;
  letter-spacing: 0.03em;
  font-weight:700;
  text-transform: uppercase;
}

.strapline {
  box-shadow: inset 0 -11px 0 0 rgba(204,51,68,0.1);
  display: inline;
}

/* ==========================================================================
   SECTION CONTACT
   ========================================================================== */

.form-section {
  background: rgb(69,67,91);
  background: linear-gradient(0deg, rgba(69,67,91,1) 0%, rgba(106,104,126,1) 100%);
  padding-top: 55px;
}

.form-section h1 { color: #DDE0EE }

.inner-bg {
  background-color: #37364A;
  border-radius: 10px;
  padding: 20px;
  margin: 35px auto;
  width: 50%;
}

@media only screen and (max-width: 992px){
  .inner-bg {
      width:80%;
  }
}

@media only screen and (max-width: 768px){
  .inner-bg {
      width:100%;
  }
}

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
  font-size: 0.7em;
  color: #b3b2c1;
  padding: 0px;
  top: -5px;
  transition: all 0.2s ease;
}

.styled-input {
  float: left;
  width: 100%;
  position: relative;
  border-radius: 4px;
  padding: 15px 0;
}

@media only screen and (max-width: 768px){
  .styled-input {
      width:100%;
  }
}

.styled-input label {
  color: #e6e5ef;
  padding: 20px;
  position: absolute;
  top: 6px;
  left: 0;
  transition: all 0.2s ease;
  pointer-events: none;
}

input,
textarea {
  padding: 10px;
  border: 0;
  width: 100%;
  font-size: 18px;
  background-color: #7F7E92;
  color: white;
  border-radius: 4px;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
  width: 100%;
  transition: all 0.075s ease;
}

textarea {
  width: 100%;
  min-height: 15em;
}

.input-container {
  margin: 0 10px 10px;
}

input[type=checkbox] + label {
color: #ccc;
font-style: italic;
} 

input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}

.form-section .row {
  flex-direction: column;
}