@font-face {
    font-family: 'DIN';
    src: url('DINLightAlternate.woff2') format('woff2'),
        url('DINLightAlternate.woff') format('woff'),
        url('DINLightAlternate.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
*{
    border:0;
    padding:0;
}
body{
    font-family: 'DIN';
    background-image:url("../img/bg-site.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height:100vh;
    padding-top:75px;
}
.bg-cliff-transparent{
    background:rgba(80, 103, 67, 0.8);
}
h1{
    font-size:3em;
    letter-spacing: 3px;
    color:white;
}
p{
    color:#FAFDF3;
    text-align:center;
}
.bg-cliff{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(80, 103, 67, 0.8), rgba(80, 103, 67, 1), rgba(80, 103, 67, 0.8), rgba(0,0,0,0));
    color:white;
    letter-spacing: 5px;
}
.bg-inverse{
    background:#FAFDF3
}
.bg-container{
    background:rgba(250, 253, 243, 0.7);
}
.btn-cliff{
    background-color:none;
    color:#FAFDF3;
    border: 1px solid #FAFDF3;
    border-radius:0;
}
.btn-cliff:hover{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(80, 103, 67, 0.8), rgba(80, 103, 67, 1), rgba(80, 103, 67, 0.8), rgba(0,0,0,0));
    color:#FFFFFF;
    border:none;
}
.btn:clicked, .btn:active, .btn:focus{
    border-color: rgba(255, 245, 235, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 245, 235, 0.6);
    outline: 0 none; 
}
.round-button{
    border-radius:50%;
    background-color:none;
    color:#F9E4B7;
    border: 1px solid #F9E4B7;
}
.round-button:hover{
    background-color:#F9E4B7;
    color:#506743;
    border: 1px solid #F9E4B7;
}
.btn:clicked, .btn:active, .btn:focus{
    border-color: rgba(255, 245, 235, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 245, 235, 0.6);
    outline: 0 none; 
}
.img-logo{
    height:55px;
    width:auto;
}
.form-control, .form-control:focus{
    border-radius:0;
    background:none;
    border:2px solid #FAFDF3;
    color:#FAFDF3;
}
.form-control:focus{
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 245, 235, 0.6);
    outline: 0 none; 
}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #FAFDF3;
  opacity: 1; /* Firefox */
}
@media (max-width : 576px){
    h1{
        font-size:3em;
    }
}
@media (max-width : 300px){
    h1{
        font-size:2em;
    }
}