#servicos-agric span, #servicos-auto span span{
  border-bottom: 3px solid #1264aa;
}

.header{
  position: relative;
  height: 100vh;
}
.chapa-auto{
  background: url(../img/servicos/servicos-auto.jpg) no-repeat;
  background-position: center;
  background-size: cover;
}
.chapa-agric{
  background: url(../img/servicos/servicos-agricola.jpg) no-repeat;
  background-position: center;
  background-size: cover;
}

.header::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

#content{
  height: auto;
  min-height: 100vh;
  width: 100%;
  margin: 0 auto;
}
#content i{
  margin: 0 .5rem;
  color: #1264aa;
}

#content > div > h2 {
  text-align: center;
  color: grey;
}

#content > div > p, #content > div > h3 {
  padding: 1rem;
}

.servicos{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.servicos > li {
  text-align: center;
  flex: 1 0 25%;
}

.servicos-visitar{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin: 4rem 0;
}
.servicos-visitar h3, .servicos-visitar h1{
  padding: 0;
}
.servicos-visitar h1{
  font-size: 2.5rem;
}

.servicos-visitar a{
  margin: 2rem 0;
}
.servicos-visitar i{
  margin-left: 0.5rem;
}

#hybrid-service{
  position: relative;
  margin-top: 2rem;
  width: 100%;
  height: auto;
  background-color: white !important;
}
#hybrid-service .fundo{
  position: relative;
  height: 236px;
  width: 1080px;
  background: url(../img/servicos/hybrid-service-fundo.png) no-repeat;
  background-size: contain;
  margin-left: auto;
}
#hybrid-service .planeta{
  z-index: 2;
  position: absolute;
  top: 0;
  left: 650px;
  height: 236px;
  width: 236px;
  background: url(../img/servicos/planeta.png) no-repeat;
  background-size: contain;
  margin-left: auto;
}
#hybrid-service .nuvens-top{
  position: absolute;
  top: 10px;
  left: 650px;
  height: 61px;
  width: 237px;
  background: url(../img/servicos/nuvens.png) no-repeat;
  background-size: contain;
  margin-left: auto;

  animation: moveCloudsTop 20s linear infinite;
}
#hybrid-service .nuvens-bottom{
  position: absolute;
  top: 150px;
  left: 650px;
  height: 61px;
  width: 237px;
  background: url(../img/servicos/nuvens.png) no-repeat;
  background-size: contain;
  margin-left: auto;
  transform: rotate(180deg);

  animation: moveCloudsBot 20s linear infinite;
}
#hybrid-service .hybrid-logo{
  z-index: 3;
  position: absolute;
  top: 100px;
  left: 740px;
  height: 43px;
  width: 59px;
  background: url(../img/servicos/hybrid-logo.png) no-repeat;
  background-size: contain;
  margin-left: auto;
}


@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.rotating {
  -webkit-animation: rotating 60s linear infinite;
  -moz-animation: rotating 60s linear infinite;
  -ms-animation: rotating 60s linear infinite;
  -o-animation: rotating 60s linear infinite;
  animation: rotating 60s linear infinite;
}

@keyframes moveCloudsTop {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes moveCloudsBot {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0px);
  }
}


/* simple */
#hybrid-service .simple-header{
  position: relative;
  height: 236px;
  width: 1080px;
  background: url(../img/servicos/hybrid-service.png) no-repeat;
  background-size: contain;
  margin-left: auto;
  display: none;
}
#hybrid-service > .content{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#hybrid-service > .content > h1, #hybrid-service > .content > h3{
  padding: 0;
  padding-bottom: 1rem;
}

#servicos-auto .container-100{
  background-color: white !important;
  padding: 2rem 0;
}
#hybrid-service-content {
  height: auto;
  width: 1080px;
  margin: auto;
  background-color: white !important;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#hybrid-service-content > li{
  flex: 1 0 33.33%;
  width: 350px;
  height: auto;

  display: flex;
  align-items: center;
  justify-content: center;
}
#hybrid-service-content > li > p{
  text-align: justify;
  padding: .5rem;
  border: 2px #1264aa solid;
  border-radius: 10px;
}
.esquema{
  width: 350px;
  height: 280px !important;
  background: url(../img/servicos/esquema.jpg) no-repeat;
  background-position: center;
  background-size: contain;
}

.break-line{
  display: none;
}

/* media */
@media(max-width: 1300px) {

  .break-line{
    display: block;
  }

}
@media(max-width: 1080px) {

  #hybrid-service .simple-header{
    display: block;
  }
  #hybrid-service .fundo{
    display: none;
  }

}



/* media */
@media(max-width: 700px) {

  .header{
    position: relative;
    height: auto;
    min-height: 100vh;
  }
  #content > div > h2 {
    font-size: .8rem;
    padding: 1rem;
    text-align: justify;
  }

  /* simple */
  #hybrid-service .simple-header{
    position: relative;
    height: 180px;
    width: 100%;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  }

  #servicos-auto .container-100{
  }

  #hybrid-service-content {
    height: auto;
    width: 100%;
    margin: auto;

    flex-direction: column;
  }
  #hybrid-service-content > li{
    width: 280px;
  }
  #hybrid-service-content > li > p{
    text-align: justify;
    padding: 0;
    padding-bottom: 1.5rem;
    border: none;
    border-top: 4px #1264aa solid;
    border-radius: 0;
  }
  .primeiro{
    order: 1;
  }
  .segundo{
    order: 2;
  }
  .terceiro{
    order: 3;
  }
  .quarto{
    order: 4;
  }
  .esquema{
    width: 300px;
    height: 280px !important;
    order: 0;
  }

  .artigo-80{
    width: 100%;
  }



}

@media(max-width: 450px) {

  .break-line{
    display: none !important;
  }

}