body{
font-family: Zilla Slab;
height: 100%;
}
html{
max-width: 99%;
height: 100%;
}
a{
  color:white !important;
    text-decoration: none !important;
}
a:hover{
  color: white !important;
  text-decoration: none !important;
}
.logo{
max-width: 244px;
margin-bottom: 35px
}
.logo-box{
  text-align: center;
  margin: 0px auto;
  margin-top: 30px;
}
.center-elemnts{
  margin: 0px auto;
  margin-bottom: 30px;
}
.center-elemnts .fas{
  font-size: 25px;
}
.title, .subtitle{
  font-family: Zilla Slab;
}
.title{
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  color:#316357;
}
.subtitle{
  font-size:24px;
  color:#316357;
}
.green-back{
  background-color:#316357;
  color:white;
  padding-top: 50px;
  padding-bottom: 15px;
  max-height: 275px;
}
.info{
  font-family: Josefin Slab;
  font-size: 20px;
  font-weight: 700;
}
.green-back .der{
  float: right;
  text-align: left;
  }
  .green-back .izq{
    float: left;
  }
    @media screen and (min-width: 576px) and (max-width: 780px){
      .cacl{
        background-position-y: 80%;
      }
    }
  @media screen and (min-width: 781px) {
  .cacl{
    background-position-y: 90px;
  }
  }
  @media screen and (max-width: 575px) {
    .cacl{
      background-position-y: 300px;
    }
  }

  .cacl{
  height: calc( 100vh - 248px);
  background-image: url("/img/fondo.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  }