:root {
  --darkblue: #0D1A8B;
  --green: #00BFB2;
  --orange: #F96900;
  --yellow: #FFD734;
}

body {
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
}


p {
  color: black;
}
p.large {
  font-size: x-large;
}
a,
a:hover,
a:focus,
a:active,
a.active {
  outline: none;
}
a {
  color: #ddd;
}
a:hover,
a:focus,
a:active,
a.active {
  color: #ccc;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

.display-1 {
  font-weight: 600;
  text-transform: uppercase;
}


.top-bar, .intro-bar, #contacts {
  background-color: var(--darkblue);
}

footer {
  background-color: #081059;
}

.menu {
  background-color:#f8f9fa;
  border-bottom: var(--darkblue) 1px solid !important;
}

.menu .navbar-custom {
  background-color:transparent !important;
  position: sticky;
  top: 0;
  margin: 0;
  padding: 0;
  font-weight: 600;
}


.menu a.nav-link:hover {
  color: var(--darkblue) !important;
  border-bottom: var(--yellow) solix 1px !important;
}


.hero {
  background-image: url(/static/images/header-amb-azul-2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 80vh;
  max-height: 450px;
}

.hero .hero-bg {
  background-color: #00bfb2;
  opacity: 0.85;
}


.top-headline-ico i {
  font-size: 3.5rem !important;
}

.top-headline-ico .list-group-item {
  border: none !important;
}

.top-headline {
  border-right:2px solid var(--yellow) ;
}

.main-btn {
  background-color: var(--darkblue);
}

.main-btn-out-blue {
  color: var(--darkblue);
  border: 1px solid var(--darkblue);
}

.main-btn-out-green {
  color: var(--green);
  border: 1px solid var(--green);
}

.main-btn-out-orange {
  color: var(--orange);
  border: 1px solid var(--orange);
}

.main-btn-out-yellow {
  color: var(--yellow);
  border: 1px solid var(--yellow);
}

.list-group-item {
  background-color:transparent !important;

}

#about, #about p, #about h6 {
  color: var(--darkblue);
}

#services .card-1{
  border: 1px solid var(--darkblue);
  padding: 0.5rem;
  margin-top: 2rem;
  border-top: 6px solid var(--darkblue);
}

#services .card-2{
  border: 1px solid var(--green);
  padding: 0.5rem;
  margin-top: 2rem;
  border-top: 6px solid var(--green);
}

#services .card-3{
  border: 1px solid var(--orange);
  padding: 0.5rem;
  margin-top: 2rem;
  border-top: 6px solid var(--orange);
}

#services .card-4{
  border: 1px solid var(--yellow);
  padding: 0.5rem;
  margin-top: 2rem;
  border-top: 6px solid var(--yellow);
}


#services .card-1 h5{
  color: var(--darkblue);
  border-bottom: 2px solid var(--darkblue);
}

#services .card-2 h5{
  color: var(--green);
  border-bottom: 1px solid var(--green);
}

#services .card-3 h5{
  color: var(--orange);
  border-bottom: 1px solid var(--orange);
}

#services .card-4 h5{
  color: var(--yellow);
  border-bottom: 1px solid var(--yellow);
}



header#myVideo  {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header#myVideo  video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header#myVideo  .container {
  position: relative;
  z-index: 2;
}

header#myVideo  .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}



/* fallback image */

@media (pointer: coarse) and (hover: none) {
  header#myVideo  {
    background: url('static/images/header-amb-azul-2.png') black no-repeat center center scroll;
  }

  header#myVideo  video {
    display: none;
  }
}