/****************************
*          GENERAL          *
****************************/
@font-face {
    font-family: YefimovSerifRegular;
    src: url(../fonts/yefimovserif-regular.woff);
}
@font-face {
    font-family: YefimovSerifBlack;
    src: url(../fonts/yefimovserif-black.woff);
}
@font-face {
    font-family: YefimovSerifBold;
    src: url(../fonts/yefimovserif-bold.woff);
}
@font-face {
    font-family: YefimovSerifLight;
    src: url(../fonts/yefimovserif-light.woff);
}

body{overflow:hidden; min-height: 100vh; width: 100vw; font-family: 'YefimovSerifRegular', sans-serif;}

/****************************
*          HOME             *
****************************/
#video{position: fixed; z-index: -2; top:0; left:0; 
       -webkit-filter: contrast(1.8) brightness(.8) sepia(.05) hue-rotate(495deg);
       filter: contrast(1.8) brightness(.8) sepia(.05) hue-rotate(495deg);
}
#mask{position: fixed; z-index: -2; top:0; left:0; width: 100%; height:100%; 
      box-shadow: 
          inset 0 0 1000px rgba(0,0,0,1),
          inset 1000px 1000px rgba(0,0,0,.35)
          /*inset 1000px 1000px rgba(0,0,0,.3),*/
          /*inset 1000px 1000px rgba(69,77,95,.2),*/
          /*inset 0 0 2500px rgba(255,255,255,.25);*/
}

#main{position:relative;z-index:1;}
.table{display:table;width:100%; height:100%;}
#main.table{height: 100vh;}
.table .table-cell{display:table-cell;width:100%; height:100%; vertical-align: middle; text-align: center;}
#main #logo-cont{position:relative; top:20px; width:300px; margin:0 auto;}
#main #logo-cont .scritta{transition: all .45s ease-in-out;position:absolute; bottom:41px;left:51px; z-index:11;opacity:0;}
#main #logo-cont .scritta.active{z-index:12;opacity:1;}
#main #striscia{
    transition: all .45s ease-in-out; width:100%; height:165px; position: absolute; z-index: -1; margin:auto; left:0; top: 40%; background: url('../images/elementi/all.jpg') repeat; background-position: 0 0;}
/*#main #striscia.yellow{background-position-y:   0;}
#main #striscia.magenta{background-position-y:  50%;}
#main #striscia.celeste{background-position-y:  100%;}*/

@keyframes animateback {
    from {background-position-x: 0;}
    to {background-position-x: 100000%;}
}

#nav{width:420px;margin: 0 auto 0 auto;top: 125px;position: relative;}
#nav .elem{transition: all .25s ease-in-out; height:10px;border-bottom: 1px solid #e9e7cd; display:inline-block; width:14%; margin: 0 5%;}
#nav .elem.yellow.active{border-bottom: 5px solid #e3bb25}
#nav .elem.magenta.active{border-bottom: 5px solid #b53165}
#nav .elem.celeste.active{border-bottom: 5px solid #33bba3}
#nav .elem.blu.active{border-bottom: 5px solid #3376ba}

/****************************
*         VERTICAL          *
****************************/
#vertical-menu{
    font-family: 'YefimovSerifBlack', sans-serif;
    color:#e9e7cd;
    background: #121629; 
    position:fixed; 
    right:150px; 
    bottom:200px; 
    z-index:8;
}
#vertical-menu .facebooks:hover{color:#3b5998}
.arrow_box {
    font-family: 'YefimovSerifRegular', sans-serif;
    font-size: .8em;
    font-weight: 400;
    padding: 20px;
    color:#676864;
    position:absolute;
    top:-25px;
    right:-80px;
    background: #e9e7cd;
    width:230px;
    height:150px;
    border-radius: 12px;
    opacity:0;
    visibility: hidden;
    transition: all .2s ease-in-out;
}
.arrow_box.visibile{
    right:-60px;
    opacity: 1;
    visibility: visible;
}
.arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(233, 231, 205, 0);
    border-left-color: #e9e7cd;
    border-width: 10px;
    margin-top: -10px;
}
.arrow_box:before {
    border-color: rgba(233, 231, 205, 0);
    border-left-color: #e9e7cd;
    border-width: 10px;
    margin-top: -10px;
}


#vertical-menu a{color:#e9e7cd;}
#vertical-menu .vertical-text {
    transform: rotate(-90deg);
    position: absolute; width: 190px; font-size:1em; font-weight:700; left:10px;
}
#credits{position:relative; top:-2px; text-decoration: none;}
#credits:hover{border-bottom:1px solid #e9e7cd; padding-bottom: 4px;}
#vertical-menu .vertical-text i{transform: rotate(90deg);margin-right: 20px;font-size:1.4em;}


/****************************
*         SINGOLO           *
****************************/
#singolo #center-container{width:calc(100% - 65px); position:absolute; bottom:40px;left:65px;}
#singolo #bottle{position: relative; z-index: 2; height:650px}
#singolo .mask{background:rgba(191,54,107,.8); position:absolute; bottom:150px;right:0;border-radius: 100%; width:380px; height:380px; opacity:1;z-index: 1;}
#singolo .text-content{position:absolute; top:75px; color:#e9e7cd;font-family: 'YefimovSerifRegular'; font-style: italic;}
#singolo .text-content h2, #singolo .text-content h5{font-family: 'YefimovSerifBlack';}
.other-bottle{position:absolute; bottom:0; right:90px;}
.other-bottle a {color:#e9e7cd; text-decoration: none; position:relative; display:inline-block;margin-left: 40px;}
.other-bottle a img{height: 250px; }
.other-bottle a .vertical-text {
    transform: rotate(-90deg); transition: all .25s ease-in-out;
    opacity:0;position: absolute; width: 190px; left: -35px; top: -140px; font-size:1em; font-weight:700;
}
.other-bottle a:hover .vertical-text{ opacity:1; top:-120px;}

/****************************
*         COMPANY           *
****************************/
#singolo-company #center-container{padding-top:10%;width:calc(70% - 65px); position:relative; left:15%;}
#singolo-company .mask{background:rgba(191,54,107,.8); position:relative; border-radius: 100%; width:540px; height:540px; opacity:1;z-index: 1; overflow:hidden;}
#singolo-company .mask iframe{width:100%; height:100%;}
#singolo-company .text-content{position:absolute; top:75px; color:#e9e7cd;font-family: 'YefimovSerifRegular'; font-style: italic;}
#singolo-company .text-content h2, #singolo .text-content h5{font-family: 'YefimovSerifBlack';}


/****************************
*         SIDEBAR           *
****************************/
#sidebar{transition: all .25s ease-in-out;
         cursor:pointer;font-family: 'YefimovSerifBlack', sans-serif;color:#e9e7cd;background: #121629; width:65px; height:100vh; position:fixed; left:0; top:0; z-index:10;
}
#sidebar:hover{background:#0d101e;}
#sidebar .vertical-text {
    transform: rotate(-90deg);
    position: absolute; width: 190px; left: -63px; top: 155px; font-size:1.4em; font-weight:700;}
#sidebar .plus {
    transition: all .15s cubic-bezier(.37,.26,.35,1);
    transform-origin: center center;
    font-family: 'YefimovSerifLight', sans-serif; position:absolute; bottom:80px; font-size: 2.5em;left:24px;}
#sidebar .plus.rotate{transform: rotate(45deg)}
#sidebar .bottleico{
    transition: all .5s cubic-bezier(.34,.68,.41,.9);
    position:absolute; left:29px; top:60px;}
#sidebar.open .bottleico{top:calc(100% - 160px);}

/****************************
*           MENU            *
****************************/
#menu{ font-family: 'YefimovSerifBlack'; position:absolute; top:20px; right:100px; color:#e9e7cd;z-index:9;}
#menu > ul {padding:0; margin:0; list-style: none;}
#menu > ul > li{display: inline-block;margin:0 8px;}
#menu > ul > li a{display: block; color:#e9e7cd; cursor: pointer}
#menu .dropdown-menu{background: #121629;min-width:80px!important;}
#menu .dropdown-menu li{width:80px!important;}
#menu .dropdown-menu li a:hover{background: #121629;}


/****************************
*         PRODUCT LIST      *
****************************/
#product-list{
    transition: left .5s cubic-bezier(1,.26,.05,1);
    top:0;position:absolute; left:-100%; width:calc(100vw - 65px); height:100vh; z-index: 9;}
#product-list.open{left:65px;}

#product-list .colm{transition: box-shadow .25s cubic-bezier(1,.26,.25,.38);
                    overflow:hidden;position:relative;box-shadow: inset 0 0 0 2000px rgba(0,0,0,.8);width:calc(100% / 4);height: 100%;float:left; background-size: cover; background-position: center center;}
#product-list .colm:nth-child(1){background-image: url('../images/elementi/bg1.jpg');}
#product-list .colm:nth-child(2){background-image: url('../images/elementi/bg2.jpg');}
#product-list .colm:nth-child(3){background-image: url('../images/elementi/bg3.jpg');}
#product-list .colm:nth-child(4){background-image: url('../images/elementi/bg4.jpg');}

#product-list .colm:hover{box-shadow:inset 0 0 0 2000px rgba(0,0,0,.6);}

#product-list .colm .content{width: 90% /*80%*/; height:100%; position: absolute; left: 6%/*10%*/;z-index:1;}
#product-list .colm .content img{transition: all .2s linear;position:absolute;right:0;opacity:0;}
#product-list .colm .content .text-content{text-align:right;position:absolute; left:-20px; bottom:300px; color:#e9e7cd;font-family: 'YefimovSerifBlack'; font-style: italic; width:220px;}
#product-list .colm .content .mask{transition: opacity .25s cubic-bezier(1,.26,.25,.38);
                                   position:absolute; bottom:100px;border-radius: 100%; width:360px /*430px*/; height: 360px/*430px*/; opacity:0;}
#product-list .colm:hover .content .mask{opacity:1;}
#product-list .colm:nth-child(1) .content .mask{background:rgba(238,196,39,.8);}
#product-list .colm:nth-child(2) .content .mask{background:rgba(191,54,107,.8);}
#product-list .colm:nth-child(3) .content .mask{background:rgba(113,178,157,.8);}
#product-list .colm:nth-child(4) .content .mask{background:rgba(53,122,191,.8);}


#product-list .colm:nth-child(1) .content img{
    animation-name: fadeOutBottle;
    animation-duration: .2s;
    animation-fill-mode: forwards;
}
#product-list .colm:nth-child(2) .content img{
    animation-name: fadeOutBottle;
    animation-duration: .2s;
    animation-fill-mode: forwards;
}
#product-list .colm:nth-child(3) .content img{
    animation-name: fadeOutBottle;
    animation-duration: .2s;
    animation-fill-mode: forwards;
}
#product-list .colm:nth-child(4) .content img{
    animation-name: fadeOutBottle;
    animation-duration: .2s;
    animation-fill-mode: forwards;
}


#product-list.open .colm:nth-child(1) .content img{
    animation-name: fadeInBottle;
    animation-duration: .4s;
    animation-delay: .7s;
    animation-fill-mode: forwards;
}
#product-list.open .colm:nth-child(2) .content img{
    animation-name: fadeInBottle;
    animation-duration: .4s;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
}
#product-list.open .colm:nth-child(3) .content img{
    animation-name: fadeInBottle;
    animation-duration: .4s;
    animation-delay: 1.7s;
    animation-fill-mode: forwards;
}

#product-list.open .colm:nth-child(4) .content img{
    animation-name: fadeInBottle;
    animation-duration: .4s;
    animation-delay: 2.2s;
    animation-fill-mode: forwards;
}



@media screen and (min-width:1700px) and (max-width:1920px){
    #product-list .colm .content img{width:260px}
    #product-list .colm .content .text-content{left:-60px;}
	#product-list .colm .content .text-content h2{font-size:1.7em;}
}
@media screen and (min-width:1401px) and (max-width:1699px){
    #product-list .colm .content img{width:220px}
    #product-list .colm .content .text-content{left:-40px;}
    #product-list .colm .content .text-content h2{font-size:1.4em;}
    #product-list .colm .content .text-content h5{font-size:1em;}
    
}
@media screen and (min-width:800px) and (max-width:1400px){
    #product-list .colm .content img{width:180px}
    #product-list .colm .content .text-content{left:-80px;}
    #product-list .colm .content .text-content h2{font-size:1.4em;}
    #product-list .colm .content .text-content h5{font-size:1em;}
    #singolo-company .mask{width:450px; height:450px;}
}

@media screen and (device-aspect-ratio: 16/9) {
    #video{width:100%;}
}
@media screen and (device-aspect-ratio: 4/3) {
    #video{height:100%;}
}

@keyframes fadeInBottle {
    from {opacity: 0; bottom:120px;}
    to {opacity: 1; bottom:60px;}
}
@keyframes fadeOutBottle {
    from {opacity: 1; bottom:60px;}
    to {opacity: 0; bottom:120px;}
}

@media screen and (max-width:768px){
    body{overflow: auto; min-height: 100vh; width: 100vw; font-family: 'YefimovSerifRegular', sans-serif;}
    #menu{right:0;}
    #main{height:100vh;margin:0;}
    #singolo-company-mobile{padding-top:80px;}
    #singolo-company-mobile .mask{width:100%; height:300px; position:relative; overflow: hidden; }
    #singolo-company-mobile .mask iframe{width:100%!important; height:300px;}
    #singolo-company-mobile .text-content{color:#e9e7cd;font-family: 'YefimovSerifRegular'; font-style: italic;}
    #singolo-company-mobile .text-content h2, #singolo .text-content h5{font-family: 'YefimovSerifBlack';}
    
    #singolo-mobile{padding-top:80px;}
    #singolo-mobile .mask{width:100%; height:300px; position:relative; overflow: hidden; }
    #singolo-mobile .text-content{color:#e9e7cd;font-family: 'YefimovSerifRegular'; font-style: italic; margin-bottom: 150px;}
    #singolo-mobile .text-content h2, #singolo .text-content h5{font-family: 'YefimovSerifBlack';}
    .other-bottle{position:relative; left:0;}
    #bottle{height:300px; z-index: 3; position: relative}
    #singolo-mobile .mask{border-radius: 100%; left:23%; position:absolute; top:40px; width: 150px; height: 150px;z-index: 2;}
    
    .bottleicoopen{z-index: 2000000; transition: all .25s ease-in-out; }
    .bottleicoopen.openeb{transform: rotate(90deg)}

    #product-list.open{left:0; position:fixed;top:0;width:100vw; height: 100vh;}
    #product-list .colm{width:100%; overflow: hidden; height:calc(100vh / 4);}
    #product-list .colm .content img{height:75%;}
    #product-list .colm .content .text-content{bottom:30px;}
    #product-list .colm:hover .content .mask{opacity:0;}
    #product-list .colm:hover{box-shadow:inset 0 0 0 2000px rgba(0,0,0,.6);}
    

	.other-bottle a {
		margin-left:0!important;
		width:33%!important;
		float: left!important;
	}

	
    @keyframes fadeInBottle {
        from {opacity: 0; bottom:80px /*60px*/;}
        to {opacity: 1; bottom:0px;}
    }
    @keyframes fadeOutBottle {
        from {opacity: 1; bottom:0px;}
        to {opacity: 0; bottom:60px;}
    }

}