@charset "utf-8";
/* CSS Document */
* {
top: 0;
left: 0;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
overflow-y: scroll; overflow-x:hidden;
}
body {
font-family: "Lato", sans-serif;
color: #323232;
background: #FFF;
text-align: center;
font-size: 20px;
line-height: 24px;
}
nav {
width: 100%;
height: 140px;
background-color: #e8e0cd;
color: #323232;
position:fixed;
z-index:999;
box-shadow:0px 4px 3px rgba(0,0,0,0.2);
}

nav ul li{
overflow: hidden;
display: inline-block;
padding: 20px 10px;
height: 150px;
vertical-align: middle;
}
nav ul li a{
text-decoration: none;
color: #323232;
padding: 20px 10px;
}
nav ul li a:hover{
text-decoration: none;
border-bottom: 4px solid #2c8f8c;
padding: 10px 10px;
}

.flag a:hover{
border-bottom: none;
}
section{
text-align: center;
}
H1{
width: 100%;
font-size: 24px;
color: #2c8f8c;
}
.acerca H1{
font-size: 30px;	
}
.contacto H1{
font-size: 30px;	
}
.servicios H1{
width: 100%;
font-size: 18px;
padding: 20px 10px;
color: #2c8f8c;
text-transform: uppercase;
}
.servicios p{
	min-height: 400px;
}
.jobs H1{
width: 100%;
font-size: 30px;
padding: 30px;
color: #2c8f8c;
}
H2{
font-size: 148px;
letter-spacing: 60px;
color: #2c8f8c;
text-align: left;
}
H3{
font-size: 148px;
letter-spacing: 60px;
color: #2c8f8c;
text-align: right;
}
.intro{
width: 100%;
height: 600px;
background-image: url("../img/03.jpg");
}
.intro p {
font-size: 35px;
line-height: 50px;
padding: 30px;
color: #e8e0cd;
background-color: #2c8f8c;
text-align: center;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 3s;
animation-name: slidein;
opacity: 0.8;
}
@keyframes slidein {
from {
  opacity: 0.1;
  transform: translate(-50%, -0%);
}
to {
  opacity: 0.8;
}
}
@keyframes slidein2 {
from {
  opacity: 0.1;
  transform: translate(-10%, 0%);
}
to {
  opacity: 0.8;
}
}
.servicios{
column-count: 3;
line-height: 40px;
font-size: 16px;
padding: 20px 60px;
text-align: center;
}
.servicios p{
margin-bottom: 30px;
background: #fbfbfb;
box-shadow:0px 4px 3px rgba(0,0,0,0.2);
padding: 10px 10px 0 10px;
}
.acerca{
text-align: center;
width: 60%;
column-count: 1;
line-height: 40px;
padding: 10px 20% 40px 20%;
box-shadow:0px 4px 3px rgba(44,143,140,0.2);
}
.jobs{
column-count:1;
}
.jobs img{
width: 33%;
opacity: 0.3;
cursor: pointer;
}
.jobs img:hover{
width: 33%;
opacity: 1;
animation-duration: 3s;
animation-name: slidein2;
}
form {
width: 55%;
line-height: 50px;
text-align: center;
display: inline-block;
}
form input {
color: #323232;
margin: 10px;
padding: 1em;
border: 1px solid #2c8f8c;
width: 80%;
}
form textarea {
color: #323232;
margin: 10px;
border: 1px solid #2c8f8c;
width: 80%;
padding: 1em;
}
form #submit {
color: #fff;
margin: 20px 20px 20px 10px;
border: 1px solid #004c8a;
background: #2c8f8c;
width: 85.3%;
}
footer{
height: 100px;
font-size: 16px;
color: #FFF;
background-color: #323232;
}
footer p{
padding: 20px;
}
.icon{
visibility: hidden;
}
.fade {
animation: fade .5s linear forwards;
}
.flecha{
visibility:hidden;
padding: 10px;
z-index: 999;
position: -webkit-sticky;
position: sticky;
bottom: 0px;
background-color: #FFFFFF;
opacity: 0.8;
border-top:4px solid #2c8f8c;
}
.rs{
height: 70px;
vertical-align: middle;
}
.rs img{
	padding: 10px;
}
@media (max-width: 768px){
nav {
height: auto;
position: -webkit-sticky;
position: sticky;
}

nav ul li{
height: auto;
background-color: #e8e0cd;
padding: 10px;
text-align: center;
}
.servicios{
column-count: 1;
}
.jobs img{
width: 95%;
}
.jobs img:hover{
width: 95%;
}
form {
width: 90%;
}
.icon{
visibility: visible;
color:#323232;
padding:20px 60px 20px 10px;
float: right;
}
nav ul{
text-align: left;
}
nav ul li{
display: block; 
}
H2{
font-size: 70px;
}
H3{
font-size: 70px;
}
.flecha{
visibility: visible;
}
}