@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);
@import url(http://fonts.googleapis.com/css?family=EB+Garamond);
@font-face {
    font-family: Berkley;
    src: url(../ARBERKLEY.ttf);
}

.menu-logo{
    position:absolute;
    top:25px;
    left:0;
    right:0;
    margin-left:auto;               
    margin-right:auto;   
    width:100%;
    max-width:300px;
}

body{
    background-image: url("menu-bg.jpg");
    background-repeat: no-repeat;
    background-size: 180% auto;    
}

.languages-wrapper{
    position:absolute;
    top:385px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;    
    display:block;
    text-align:center;
}

ul{
    position: absolute;
    top: 170px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    letter-spacing: 10px;
    line-height: 50px;
    list-style-type: none;
    padding-left: 0px;
}

ul li{
    font-size:20px;
}

.circle{
    background-color: #3d3d3d;
    color: white;
    border-radius: 65px;
    font-size: 24px;
    height:80px;
    width:80px;
    margin:0 auto;
    margin-bottom:30px;
    font-family: "Open Sans", sans-serif;
    border:3px solid white;
    display:inline-block;
    transition: .3s ease all;
}

.circle:hover{
    background-color: #f9cd1a;
    transition: .3s ease all;
    color: white;
    text-decoration:none;
}

.circle p{
    padding: 20px 15px 15px 15px;
}

.ita{   
    display:inline-block; 
    margin-right:15px;
    margin-left:15px;
}

.deu{
    display:inline-block; 
    margin-right:15px;
    margin-left:15px;   
}

.eng{
    display:inline-block; 
    margin-right:15px;
    margin-left:15px; 
}

.mobile-hide{
    display:none;
}

.winecard{
    background-color: #3d3d3d;    
    color:white;
    position: absolute;
    top: 535px;
    left: 0;
    right: 0;   
    margin:0 auto;
    width:100%;
    max-width:250px;   
    padding-top:10px;
    padding-bottom:0px;    
    text-align:center;
    font-size:18px;
    border-radius: 26px;
    border:3px solid white;
    transition: .3s ease all;
}

.winecard:focus, .winecard:hover{
    background-color: #f9cd1a;    
    color:white;
    text-decoration:none;    
    transition: .3s ease all;     
}


@media only screen and (min-width : 480px) {



}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {



}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

    .menu-logo{
        max-width:500px;
    }  

    .languages-wrapper {
        top: 510px;
    }    
    
    ul {
        top: 300px;
    }    
    
    .winecard{
        top: 675px;    
    }  

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

    body{
        background-size: cover;    
    }
    
    ul {
        top: 42%;
        letter-spacing: 15px;
    }
    
    ul li{
        display:inline-block;
        font-size: 32px;        
    }
    
    .menu-logo{
        max-width:800px;
    }
    
    .languages-wrapper{
        width:1200px;
        top: 57%;
    }
    
    .circle{
        height:100px;
        width:100px;
        font-size: 36px;
    }
    
    .ita{   
        margin-right:80px;
        margin-left:80px;   
    }
    
    .deu{
        margin-right:80px;
        margin-left:80px;   
    }
    
    .eng{
        margin-right:80px;
        margin-left:80px;   
    }
    
    .mobile-hide{
        display:inline-block;
    }   
        
    .winecard{ 
        padding-top:15px;
        padding-bottom:0px;    
        font-size:22px;
        top: 75%;
    }     


}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1850px) {
    
    ul li{
        font-size: 42px;        
    }  


}