@import url('https://fonts.googleapis.com/css?family=Questrial|Unica+One|Raleway:100,300,400, 500,700');

html {
  scroll-behavior: smooth;
}

/* Anchor Offset */
a.anchor {
  display: block;
  position: relative;
  top: -120px;
  visibility: hidden;
}
/* End of Anchor Offset */

body {
  font-family: 'Raleway', sans-serif;
  background-color: #232323;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23423f3f' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Header */
header {
  height: 80vh;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)),
    url(../images/central1.jpg) no-repeat center center / cover;
}

/* Navbar */
.nav-menu {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
  padding: 10px;
  transition: all 0.7s;
}

.nav-menu img {
  max-width: 200px;
  height: auto;
}

.menu-item {
  font-size: 15px;
  letter-spacing: 1px;
  color: #eee;
  transition: color 0.5s;
}

.menu-item:hover {
  color: red;
  font-weight: 700;
}

.line1,
.line2,
.line3 {
  width: 23px;
  height: 3px;
  margin: 5px;
  transition: all 0.4s;
}

.change .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.change .line2 {
  opacity: 0;
}

.change .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.custom-navbar {
  padding: 2px 35px;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
}
/* End of Navbar */

/* Banner */
.banner {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -35%);
  width: 80%;
}

.banner-heading {
  margin: 0 0 0.3em;
  font-size: 3em;
  font-weight: bold;
  letter-spacing: 0.08em;
  animation-name: anim;
  animation-duration: 2s;
}

.banner-par {
  font-size: 2em;
  font-weight: 100;
  animation-name: anim;
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}

.banner-btn {
  animation-name: anim;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
}

@keyframes anim {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* End of Banner */

/* History */
.special-fix {
  top: 1.3em;
  left: 50%;
  width: 14em;
  margin: 0;
  position: absolute;
  font-size: 2em;
  transform: translateX(-50%);
  background: #232323;
  font-weight: 700;
}

.special {
  line-height: 1.5;
  color: #fff;
  padding: 90px 120px;
  background: #232323;
  outline: 5px solid #ff0000;
  outline-offset: -68px;
  position: relative;
  text-align: center;
}

/* End of History */

/* Team */
#team {
  background-color: #232323;
}

.card {
  height: 450px !important;
  background-color: #292929;
  color: white;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

.card-title {
  color: red;
}

.cardimg {
  width: 100%;
  height: auto;
}

/* End of Team*/

/* Servicos */
#servicos {
  background-color: #232323;
}

/* End of Servicos */

/* Video */
#video {
  background-color: #232323;
}
/* End of Video */

/* Contactos */
#contactos {
  background-color: #232323;
}

.form-control:focus {
  border-color: #ff0000;
  box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.075),
    0 2px 10px rgba(255, 0, 0, 0.6);
}
/* End of Contactos */

/* Social */
#social {
  background-color: #232323;
}

#social span {
  font-weight: 700;
}

#social a {
  text-decoration: none;
}
/* End of Social*/

/* CW */
#cw {
  background-color: #232323;
}

.cwBar a {
  text-decoration: none;
  font-weight: 900;
}
.cwBar a:hover {
  text-decoration: none;
  font-weight: 900;
  color: #ff2924;
}
/* End of CW*/

/* Modals */
.modal-content {
  background-color: #232323;
}

.dip-hor {
  max-width: 300px;
}

.dip-vert {
  max-height: 300px;
}

/* End of Modals*/

/* ************************************************************ */

/* Media Queries */
@media (min-width: 576px) {
  .container {
    max-width: 100%;
  }
  .card2 {
    height: 730px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 100%;
  }
  .card {
    height: 460px;
  }
  .card2 {
    height: 550px;
  }
  /* RED LINE */
  h4.no-span {
    display: table;
    white-space: nowrap;
  }
  h4.no-span:before,
  h4.no-span:after {
    border-top: 3px solid red;
    content: '';
    display: table-cell;
    position: relative;
    top: 0.5em;
    width: 45%;
  }
  h4.no-span:before {
    right: 1.5%;
  }
  h4.no-span:after {
    left: 1.5%;
  }
  /* RED LINE END */
}
@media (min-width: 992px) {
  .banner-heading {
    font-size: 4em;
  }
  .container {
    max-width: 100%;
  }
  .card {
    height: 400px;
  }
  .card2 {
    height: 440px;
  }
  .curso {
    border-bottom: 2px solid red;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1300px;
  }
  .card {
    height: 400px;
  }
  .card2 {
    height: 460px;
  }
  .curso {
    border-bottom: 2px solid red;
  }
}