/*CAFÉ LAFONTANA DESIGN*/

@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1} 
}

body {
    margin: 5%;
    font-family: 'Montserrat', sans-serif;
}

h1,h2 {
    font-family: 'Baskerville', 'Libre Baskerville', serif;
    font-weight: 400;
    color: #98754f;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 32px;
    color: #fff;
    font-weight: bold; 
}

a { 
    text-decoration: none;
}

.col {
    box-sizing: border-box;
    vertical-align: top;
    display: inline-block;
}

.d2 {
    width: 50%;
}

.button {
    width: 54px;
    height: 54px;
    line-height: 54px;
    
}

a.button {
    color: #fff;
    font-style: italic;
    text-align: center !important;
}

#lafontana {
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
}

#lafontana-logo {
    background: url('../gfx/lafontana.logo.svg') 0 0 no-repeat;
    width: 247px;
    height: 106px;
    margin: 0 auto;
}

#lafontana-intro-image {
    background: url('../gfx/lafontana-suti-torta.jpg') 0 0 no-repeat;
    background-size: 100%;
    height: 220px;
    width: 330px;
    margin: 0 auto;
    max-width: 100%;
}

#lafontana-intro-wrapper #countdown {
    margin-top: -80px;
}

#fb-pageplugin {
    animation-name: fadeIn;
    animation-delay: 2000ms;
    animation-duration: 1200ms;
    animation-fill-mode: forwards;
    opacity: 0;
}

#lafontana-contact {
    margin: 40px 0 0;
    color: #292759;
    font-weight: 500;
}

#lafontana-contact .col:nth-child(1) {
    text-align: left;
}
#lafontana-contact .col:nth-child(2) {
    text-align: right;
}

#fb-btn {
    background: #3a599c;
    color: #fff;
}
#mail-btn {
    background: #bca793;
}

#lafontana-copy {
    /*position: absolute;*/
    bottom: 2%;
    right: 2%;
    /*margin: 3em 0 0;*/
    color: #878787;
    font-size: 14px;
    font-weight: 500;
    margin: 3em 0 0;
}

@media only screen and (max-width: 640px){
    #lafontana-copy { 
        position: static;
     }

     #lafontana-intro-wrapper #countdown {
        margin-top: -100px;
    }
}

@media only screen and (max-width: 480px){ 
    #lafontana-intro-wrapper #countdown {
        margin-top: -120px;
    }
}

@media only screen and (max-width: 320px){
    #lafontana-intro-wrapper #countdown {
        margin-top: -140px;
    }
}