/* imports */

@import url("anim.css");
#comp {
    display:block;
    position:fixed;
    top:1vw;
    left:1vw;
    font-size: 9px;
    text-transform: uppercase;
    font-family: "Arial", sans-serif;
    color:#000;
    z-index: 150;
}
@font-face {
    font-family: 'tallysregular';
    src: url('_fonts/tallys_15-webfont.eot');
    src: url('_fonts/tallys_15-webfont.eot?#iefix') format('embedded-opentype'),
    url('_fonts/tallys_15-webfont.woff2') format('woff2'),
    url('_fonts/tallys_15-webfont.woff') format('woff'),
    url('_fonts/tallys_15-webfont.ttf') format('truetype'),
    url('_fonts/tallys_15-webfont.svg#tallysregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'champagne__limousinesregular';
    src: url('_fonts/champagne_limousines-webfont.eot');
    src: url('_fonts/champagne_limousines-webfont.eot?#iefix') format('embedded-opentype'),
    url('_fonts/champagne_limousines-webfont.woff2') format('woff2'),
    url('_fonts/champagne_limousines-webfont.woff') format('woff'),
    url('_fonts/champagne_limousines-webfont.ttf') format('truetype'),
    url('_fonts/champagne_limousines-webfont.svg#champagne__limousinesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* end imports */


body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Gabriela', serif;
    background-color: #FFF;
    overflow: hidden;
}

#cover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 100;
}

.line {
    position: absolute;
    top:0;
    height: 5px;
    background-color: #DDD;
    opacity: 0.8;
    width: 0;
    overflow: visible;
}

.line_left {
    right: 50%;
}

.line_right {
    left: 50%;
}

#perc {
    position: absolute;
    top: 0;
    width: 100%;
    height:100%;
    font-family: "Arial", sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 50vh;
    line-height:90vh;
    color: #DDD;
    opacity: 0.2;
    z-index: 101;
}

/*endloader*/

#contenuti {
    display:block;
    position:absolute;
    width:98vw;
    height:calc(90vh - 2vw);
    margin:1vw;
    overflow: hidden;
}

#dynLoad {
    display:block;
    position:absolute;
    width:98vw;
    height:calc(90vh - 2vw);
}
.perspective {
    transform-style: preserve-3d;
    perspective: 2000px;
}

/* homepage */
#home {
    display:block;
    position:absolute;
    width: 100%;
    height:100%;
    background: url("/_images/background.jpg") no-repeat fixed center center;
    background-size: cover;
    opacity:0;
    transform: translate3d(0,0, -800px) rotate3d(1, 0, 0, 90deg);
}

#homepage_logo {
    display: block;
    position: relative;
    width:100%;
    margin:0;
    padding-top:15px;
    overflow:visible;
    opacity:0;
}

#bkgline {
    display:block;
    margin:0 auto;
    width:300px;
    height:75px;
    background: url("../_images/bottombar.png") no-repeat bottom center;
}

#homepage_logo img {
    display:block;
    position:absolute;
    top:13px;
    left:calc(50% - 150px);
    width:300px;
}

#homepage_title {
    display:block;
    position:relative;
    width:100%;
    height:10vmin;
    padding:40px 0 20px 0;
    transition: all .3s ease-out;
    overflow:hidden;
}

h1.home {
    display:block;
    position:absolute;
    margin:0;
    width:100%;
    padding:15px 0 0 0;
    font-family: "champagne__limousinesregular", serif;
    font-size:5vh;
    color:#fff;
    text-align: center;
}

.cooltext {
    visibility:hidden;
}

#homepage_content {
    display:block;
    position:relative;
    width:100%;
    height:58vh;
    opacity:0;
    background: url("../_images/bottombar.png") no-repeat top center;
    overflow:hidden;
}

#homepage_news {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
	padding:1vw;
	background-color: rgba(221,236,221,0.35);
	border:1px solid #FAFAFA;
	color: #FFF;
	margin:2% auto;
	width: 60%;
}

#homepage_news h3 {
    font-size: 1.5vw;
    text-align: center;
    margin:0 0 10px 0;
    padding:0;
    width:100%;
    color: rgba(127,44,35,1.00);
}

#homepage_news .nuovo_orario {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: auto;
    margin: 5px;
    font-size: clamp(11px, 1vw, 14px);
    border-bottom:thin solid rgba(124,124,124,1.00);
}

#homepage_news .news_block {
    display: block;
    margin:10px;
}

#homepage_news .nuovo_orario div.day {
    display: block;
    min-width: 150px;
    color: rgba(0,0,0,1.00);
}

#homepage_news .nuovo_orario div.stato_apertura {
    display: block;
    text-align: right;
    color:rgba(26,26,26,1.00)
}
#homepage_news .nuovo_orario div.stato_apertura strong.red {
    text-transform: uppercase;
    color:rgba(151,0,2,1.00);
}
#homepage_news .nuovo_orario div.stato_apertura strong.green {
    text-transform: uppercase;
    color:rgba(30,135,0,1.00);
}
#marchio_eccellenza {
    display:flex;
    position:absolute;
    bottom:0;
    right:10vw;
    height:10vh;
    align-items: center;
}

#marchio_eccellenza img {
    display:block;
    border:none;
    margin:0;
    height:8vh;
}
#social {
    display:flex;
    position:absolute;
    bottom:0;
    right:1vw;;
    height:10vh;
    align-items: center;
}
.coockie-law {
    display:flex;
    position:absolute;
    bottom:0;
    right:1vw;;
    height:10vh;
    align-items: center;
}
#social img {
    display:block;
    border:none;
    margin:0 0 0 1vw;
    width:2.5vw;
    min-width:30px;
}

#bottom_menu {
    display: block;
    position: absolute;
    bottom:0;
    height:10vh;
    width:98vw;
    margin:0 1vw;
    background-color: #FFF;
    transition: all .5s ease-out;
}

#bottom_menu ul {
    display: flex;
    margin:0;
    padding:0;
    border-top:1px solid #D59E00;
    width:98vw;
    align-items: center;
    font-family: "tallysregular", serif;
    height:10vh;
    left:-3vw;
    transform: translateY(10vh);
    transition: transform 0.5s ease-out;
}

#bottom_menu ul li:first-child {
    margin-left:-2vw;
}

#bottom_menu ul li {
    display: inline-block;
    padding: 0 3vw;
    border-right:1px solid #D59E00;
}

a {
    text-decoration: none;
}

#bottom_menu a,
#bottom_menu a:link,
#bottom_menu a:visited {
    outline: 0;
    transition: all 0.2s ease-out;
    font-size: 1.4vw;
    color: #5d3c14;
}

#bottom_menu a:hover {
    text-shadow: 2px 2px 4px #333;
    color: #000;
}

/*contenuti dinamici*/

#azienda {
    display:block;
    position:absolute;
    width:98vw;
    height:calc( 90vh - 2vw );
    opacity:0;
    transform: translateX(100vw);
    overflow: hidden;
}


#azienda-left {
    display:block;
    position:absolute;
    width:25vw;
    min-width: 300px;
    height:calc( 90vh - 2vw );
    background:rgba(255,255,255,.7);
    transform-origin: bottom left;
    transform: rotateY(130deg);
    overflow: hidden;
    z-index: 100;
}

#azienda .bkgimage {
    display:block;
    position: fixed;
    margin:0;
    border:none;
    width: 100vw;
    height:100vh;
    object-fit: cover;
    transition: opacity 1.5s ease-out;
}
#azienda .bkgimage.hide {
    opacity:0;
}
#azienda.inside {
    background: url("../_images/azienda1.jpg") no-repeat;
    background-size: cover;
}

#prodotti {
    display:block;
    position:absolute;
    width:98vw;
    height:calc( 90vh - 2vw );
    opacity:0;
    transform: translateY(100vh) rotateX(90deg);
    overflow: hidden;
}

#prodotti.inside {
    background: url("../_images/prodotti2.jpg") no-repeat bottom center;
    background-size: cover;
}

#prodottiMenu {
    display: block;
    position: relative;
    background: rgba(255,255,255,.4);
    top:0;
    width:98vw;
    transform-origin: top center;
    transform: rotateX(-110deg);
}

#prodottiMenu ul {
    display: flex;
    margin:0;
    padding:0;
    border-bottom:1px solid #D59E00;
    width:98vw;
    height:6vh;
    align-items: center;
    font-family: "tallysregular", serif;
    left:-3vw;
    transition: transform 0.5s ease-out;
}

#prodottiMenu ul li {
    display: inline-block;
    padding: 0 2vw;
    border-right:1px solid #D59E00;
}

#prodottiMenu a,
#prodottiMenu a:link,
#prodottiMenu a:visited {
    transition: all 0.2s ease-out;
    font-size: 1.3vmax;
    color: #5d3c14;
}

#prodottiMenu a:hover {
    text-shadow: 2px 2px 4px #333;
    color: #c74141;
}
#prodottiMenu a.active {
    text-shadow: 2px 2px 4px #333;
    color: #c74141;
}

#pasta,
#salumi,
#antipasti,
#carne,
#secondi,
#contorni,
#fritto,
#formaggi,
#dolci,
#vini {
    display:block;
    position:absolute;
    background: rgba(255,255,255,.8);
    width:30vw;
    min-width: 300px;
    height:81vh;
    transform: translateX(-30vw) rotateY(90deg);
}

h2.desc {
    font-family: "georgia",serif;
    margin:0 1vw;
    padding:1vh 0;
    font-size:2em;
    color: #5d3c14;
    border-bottom:1px solid #5d3c14;
    text-align: left;
}


article p {
    font-family: "tallysregular", serif;
    font-size: 1.2em;
    padding:1vw;
    color:#222;
}



#azienda-left img,
#prodotti-left img {
    height:30vmin;
}

/*contatti*/

#contatti-left {
    display:block;
    position:absolute;
    width:49vw;;
    height:calc(90vh - 2vw);
    color:#E0E0E0;
    overflow:hidden;
    transform:translateX(-50vw);
}

#contatti-right {
    display:block;
    position:absolute;
    right:0;
    width:49vw;
    height:calc(90vh - 2vw);;
    color:#E0E0E0;
    overflow:hidden;
}

#googleMap {
    display:block;
    position:relative;
    width:49vw;
    height:calc(90vh - 2vw);
}


#bkg-form {
    display:block;
    position:relative;
    width:49vw;
    height:calc( 90vh - 2vw ) ;
    margin:0;
    padding:0;
    overflow:hidden;
}

#formMessage {
    display: block;
    position: absolute;
    width:calc( 100% - 30px );
    height:calc(50% - 30px );
    transform-origin:calc(50% + 15px) center;
    transform: translateY(-60vh);
    transform-style: preserve-3d;
}

#messageSent{
    display: block;
    position: absolute;
    margin:0;
    padding:15px;
    width: 100%;
    height:100%;
    background: url("../_images/bkg_contacts.jpg") no-repeat;
    background-size: cover;
    transform: rotateY(180deg);
    z-index: 9;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

#messageSent span {
    padding:16vh 0 ;
    display: block;
    text-align: center;
    color:#333;
    font-family: "tallysregular", serif;
    font-size: 3vmin;
}

#contatti-form {
    display:block;
    position:absolute;
    margin:0;
    padding:15px;
    width:100%;
    height:100%;
    background: url("../_images/bkg_contacts.jpg") no-repeat;
    background-size: cover;
    backface-visibility: hidden;
    z-index: 10;
    transform-style: preserve-3d;
}

.formBlock {
    display: inline-block;
    width:calc( 50% - 15px );
    margin:0 10px 0 0;
}

.formBlock2 {
    display: block;
    width:calc( 100% - 15px );
    margin:0;
}

#contatti-form label {
    font-size: 2vmin;
    display:inline-block;
    color:#753F30;
    padding:0;
    margin-right:10px;
    border-bottom:1px solid #753F30;
    width:90px;
}

#contatti-form input:focus,
#contatti-form textarea:focus{
    border-color:#913F28;
    background-color: #F9F9EF;
}
#c_azienda,
#c_name,
#c_tel,
#c_mail {
    display:inline-block;
    border:1px solid #568085;
    margin:0 0 10px 0;
    padding:0;
    height:20px;
    width:calc( 100% - 102px);
    border-radius:5px;
}

#contatti-form textarea {
    display: inline-block;
    border:1px solid #568085;
    resize:none;
    border-radius:9px;
    padding:2px;
    height:15vh;
    width:calc( 100% - 106px );;
}
#contatti-form button {
    display:block;
    margin:10px 0 0 100px;
    border:none;
    width:100px;
    height:20px;
}

#contatti-detail {
    display:block;
    position:absolute;
    bottom:0;
    margin:0;
    padding:15px;
    width:calc( 100% - 30px);
    height:calc( 50% - 29px);
    background: url("../_images/bkg2_contacts.jpg") no-repeat;
    background-size: cover;
    transform-origin:bottom left;
    transform: translateY(-110vh)
}


.orari h1 {
    font-size: 3vmin;
    color:#753F30;
    margin:0;
    padding:10px 0 0 0;
    border-bottom:1px solid;
}

.orari h4 {
    color:#753F30;
    font-size: 2.3vmin;
    margin:0;
    padding:10px 0 0 0;
    border-bottom:1px solid;
}
.orari span {
    font-size: 2vmin;
    color:#054432;
    display: inline-block;
    margin:0;
    padding:5px 0;
    width:40%;
}

#media {
    display:block;
    position:absolute;
    width:100%;
    height:100%;
}
#comingsoon {
    display:block;
    position:absolute;
    width:100%;
    top:42vh;
    font-size: 5vh;
    text-align: center;
    font-family: "verdana", sans-serif;
    text-transform: uppercase;
    transform: translateZ(-3000px) rotateZ(0deg);
    opacity:0;
}

#orari_feste {
    display: block;
    position: absolute;
    bottom:0;
    width:78vw;
    padding: 0 10vw;
}

#orari_feste h3 {
    font-family: "tallysregular", serif;
    text-align: center;
}
#orari_feste .apertura {
    display: inline-block;
    width:15vw;
}
#orari_feste span:nth-child(odd) {
    display: block;
    text-align: center;
    font-size: 1em;
    background-color: rgba(255,255,255,.7);
}
#orari_feste span:nth-child(even) {
    display: block;
    text-align: center;
    font-size:.7em;
}