*{ }
body{margin: 0px; padding: 0px; }
a, a:hover, a:visited, a:active{color: inherit; text-decoration: none}
.red{border: solid 1px red}

.page{
  width: 100%;
  min-height: 200vh;
}

.top{
  box-sizing: content-box;
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  font-family: sans-serif;
  background: #ffffff;
  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.7);
  border-top: solid 1px #cccccc;
}

.logo img{
  height: 40px;
}

.links{
  display: flex;
  justify-content: space-around;
  align-items: center;

}

.top_a_container{
  display: flex;
  align-items: center;
  height: 40px
}
.cliente{
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  font-size: 0.7em;
}
.cliente img{
  height: 30px;
  margin: 3px;
}
.top_a_content{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  font-size: 0.7em;
}

.top_a_container img{
  height: 40px;
  margin: 10px;
}


.banner_1{
  height: 80vh;
  width: 100%;
  background-image: url("../img/banner1.jpg ");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.banner_1_shadow{
  height: 80vh;
  width: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-weight: bolder;
  font-family: sans-serif;
  font-size: 1.7em;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
  text-align: center;
}
.about{
  font-family:sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  min-height: 60vh;
  padding: 0px 30px;
}
.about h1{
  background: #782121;
  padding: 10px 25px;
  color: #ffffff;
  border-radius: 15px;
}
.link_JB{
  color: #782121;
  font-weight: bolder;
  cursor: pointer;
}
.services_section{
  border-top: solid 1px #cccccc;
  width: 100%;
  min-height: 250px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-around;

}

.alt_bg{
  background: rgba(0,0,0,0.1);
  flex-direction: row-reverse;
}
.services_txt{
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content:center;
  height: 100%;


}
.services_txt h1{
  font-weight: 900;
}
.services_img_list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;

}
.services_img_list img{
  height: 50px;
}
.services_img{
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  height: 100%;


}
.services_img img{
  width: 100%;
}
.contact_form_section{
  display: flex;
  flex-direction: column;
  align-items:center;
  width:100%;
  font-family: sans-serif;
  text-align: center;
}

.form_area{
  width: 100%;
  background:#cccccc;
  text-align: left;
}
.form{
  display: flex;
  flex-direction: column;
}

.from_input_group{
  display: flex;
  flex-direction: column;
  margin: 5px 25px;


}

.from_input_group input, .from_input_group textarea {
  line-height: 2em;
  padding-left: 10px;
  border: none;
}

.from_input_group input:focus, .from_input_group textarea:focus{
   box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
   border: 0 none;
   outline: 0;
}
.submit{
  width: 100px;
  height: 30px;
  margin: 10px 25px;
  border: none;
  cursor: pointer;
  background: #0a2c3f;
  color: #f2f2f2;
}

/************************@ media **************************/
@media screen and (max-width: 840px) {
  .top_a_content { display: none; }
  .banner_1_shadow { font-size: 1em; }
}

@media screen and (max-width: 640px) {
    .services_section{
      flex-direction: column-reverse;
      width: 100%
    }
    .services_img{
      height: 100px;
    }
    .form_area{
      width: 95%;
    }
}