:root{
  --primary-color: #C63226;
  --secondary-color: #0B2E4A;
}

html{
  scroll-behavior: smooth;
}

h1.title, #hero-sub{
  color: var(--secondary-color)
}

#logo-hero{
  filter: contrast(1.5);
}

.is-desc{
  line-height: 1.75;
}

.hero-1{
  background-image: url(../img/bg-hero-1.jpg) !important;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: top right;
  background-attachment: fixed;
}

.hero-2{
  background-image: url(../img/bg-hero-2.jpg) !important;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  font-style: italic;
}

.hero-3{
  background-image: url(../img/bg-hero-3.jpg) !important;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: top;
  background-attachment: fixed;
  font-style: italic;
}

.hero-4{
  background-image: url(../img/bg-hero-4.jpg) !important;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: bottom;
  background-attachment: fixed;
  font-style: italic;
}

.navbar-brand{
  margin: 0 20px 0 0;
}

.content ul{
  margin-top: 0em !important;
}

a:active, a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}

#hero-logo{
  margin-bottom: 0
}

#about-me-text{
  line-height: 1.9
}

#portrait{
  border: 1px solid var(--secondary-color);
  transition: opacity 0.15s ease-in;
}

#portrait:hover{
  opacity: 0.5
}

.clients_cols{
  width: 60%;
  margin: 0 auto;
}

.clients_cols>.column{
  padding: 50px;

  border-radius: 5px;
  margin: 25px;

  -webkit-box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.21);
  -moz-box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.21);
  box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.21);

  transition: box-shadow 0.25s ease-out;
}

.clients_cols>.column:hover{
  cursor:pointer;
  -webkit-box-shadow: 0px 0px 28px 4px rgba(0,0,0,0.52);
  -moz-box-shadow: 0px 0px 28px 4px rgba(0,0,0,0.52);
  box-shadow: 0px 0px 28px 4px rgba(0,0,0,0.52);
}

#services .columns{
  width: 75%;
  margin: 0 auto;
}

#services .card-content{
  padding-top: 75px !important;
  padding-bottom: 75px !important;
}

#phone_field,#email_field{
  width: 20%;
  margin: 0 auto;
}

#chevron{
  position: relative;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  animation: bounce .5s infinite alternate
}

#chevron:hover{
  cursor: pointer;
}

p.control>a{
    color: white !important;
    background-color: var(--secondary-color) !important;
}

p.control>input{
    color: var(--secondary-color) !important;
}

@keyframes bounce {
   from{
     transform: translateY(-200%);
   }
   to{
     transform: translateY(-150%);
   }
}

.hover-container>span{
   font-size: 10rem;
}

.hover-container > *{
  margin: 0 auto;
}

.hover-container{
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
box-shadow: 1px 1.5px 5px 0px rgba(0,0,0,0.55);
  border-radius: 100%;
  display: inline-block;
  padding: 0 3.3em;

  transition: box-shadow 0.2s ease-out;
}

.hover-container:hover{
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.95);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.95);
box-shadow: 1px 1.5px 10px 1px rgba(0,0,0,0.95);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

a:hover{
  color: var(--primary-color) !important;
}

.img{
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.unselectable{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media only screen and (max-width: 768px) {

  #hero-logo{
    margin-bottom: 0.4em
  }

  #mobile-portrait{
    padding: 25px 50px;
    text-align: center;
  }

  .hover-container>span{
    font-size: 6rem !important;
  }

  .hover-container{
    padding: 0 2em !important;
    margin: 0 auto;
  }

  #chevron{
    display: none;
  }

  .hero.is-large{
    padding: 100px 0;
  }

  .hero.is-medium{
    padding: 50px 0;
  }

  @keyframes bounce {
     from{
       transform: translateY(-125%);
     }
     to{
       transform: translateY(-100%);
     }
  }

  .clients_cols>.column{
    margin: 50px auto;
  }

  .clients_cols{
    width: 100%;
    margin: 0 auto;
  }

  #clients_title{
    margin-bottom: 1.8em;
  }

  #phone_field,#email_field{
    width: 90%;
    margin: 0 auto;
  }

  .hero-1, .hero-2, .hero-3, .hero-4{
    background-attachment: scroll;
  }
}