@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');



#orarioestivo {
    position: fixed;
    width: 300px;
    height: 383px;
    top: 50vh;
    left: 50vw;
    margin: -190px auto auto -150px;
    border-radius: 15px;
    z-index: 998;
    background: no-repeat center center;
    background-image: url('/img/orario_estivo.png');
    filter: drop-shadow(0 10px 50px #000);
}


#orarioclose {
    position: absolute;
    width: 32px;
    height: 32px;
     top: -10px;
     right:-10px;

}


.Showcase {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    height: 760px;
    width: 100%;
    overflow: hidden;
    color: #eee;
    background: #060606;
    background: linear-gradient(#060606, #383838);
    border-bottom: 1px solid #383838;
}

.Showcase a {display:block; position:absolute; width:100%; height:133%; top:0; left:0;}


.StarWars {
    height: 760px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #285c7c;
    /*    color: #e31e24 !important;*/
    background: #a2c9d9 no-repeat center top;
    background-image: url('/img/Copertina_bk.jpg');
    /* background-image: url('/img/natale.jpg');*/
    background-size: cover;
    opacity: 0;
    animation: sfondo 15s;
}
        @keyframes sfondo {
            0%  {opacity:0; top:0; transform:scale(2);}
            5%  {opacity:1; top:0; transform:scale(1);}
            95% {opacity:1; top:0; transform: perspective(300px) rotateX(0) scale(1);}
           100% {opacity:0; top:-50%; transform: perspective(300px) rotateX(75deg) scale(0.1);}
        }

.fog {
    position: absolute;
    width: 100%;
    height: 33%;
    left: 0;
    right: 0;
    bottom: -33%;
    background: repeat-x center top;
    background-image: url('/img/Copertina_fog.png');
    background-size: contain;
    animation: fog 13s ease-out 1s;
}

             @keyframes fog {
            0%  {bottom: -33%;}
            10% {bottom: 0;}
            90% {bottom: 0;}
           100% {bottom: -33%;}
        }

.logoSW {
	position: absolute;
    width:40%; height:33%;
	left:50%;
	top:10%;
    background:no-repeat center top;
    background-image: url('/img/logo_kefa-wide.png');
    background-size:contain;
	margin-left: -20%;
    filter: drop-shadow(0 0 20px #fff);
    opacity: 0;
	animation: logo 16s ease-out ;
}
        @keyframes logo {
            0%  {transform:scale(2); opacity:0;}
            10% {transform:scale(1); opacity: 1;}
            90% {transform:scale(1.33); opacity: 1;}
           100% {transform: scale(0.1); opacity: 0;}
        }

        /* the interesting 3D scrolling stuff */
        #titles {
            position: absolute;
            width: 100%;
            height: 350%;
            bottom: 0;
            left: 0;
            overflow: hidden;
            transform-origin: 50% 100%;
            transform: perspective(300px) rotateX(25deg);
            }

            #titles p {
            text-align: center;
            font-family:'Fira Mono', monospace; font-size:90px; letter-spacing:2px;

            }

            #titlecontent {
            position: absolute;
            width:100%; height:350%; text-align: center;
            top: 100%;
            animation: scroll 15s ease-in;
            }

        /* animation */
          @keyframes scroll {
            0% { top: 100%;}
            100% { top: -20%;}
        }



.spot {
    position: absolute;
    width: 100%;
    height: 30%;
    bottom: -30%;
    vertical-align: baseline bottom;
    left: 0;
    opacity: 0;
    text-align: center;
  /*   font-family: 'Pacifico', cursive;*/
     font-family: 'Fira Mono', monospace;
    font-size: 60px;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 10px #036;
    filter: drop-shadow(0 0 20px #036);
    /*filter: drop-shadow(0 0 20px #c00);*/
    animation: spot 13s ease-out 1s;
}

             @keyframes spot {
            0%  {bottom:-30%; opacity:0; transform:scale(2);}
            10%  {bottom:0%; opacity:1; transform:scale(1);}
            60% {bottom:0%; opacity:1;  transform:scale(1);}
           100% {bottom:0%; opacity:0;  transform:scale(2);}
        }

.Img0 {
    width: 60%;
    height: 90%;
    background:no-repeat center top ;
    background-size:cover;
    position: absolute;
    right:-60%; top:-10%; opacity:0;
    transform: perspective(1000px) rotateY(-10deg) rotateX(5deg) rotateZ(6deg);
    filter: drop-shadow(10px 10px 30px #000);
    animation-name: Img0;
    animation-iteration-count: infinite;
    animation-duration: 13s;
    animation-delay: 2s;
}

@keyframes Img0 {
    0%   {right:-60%; top:-10%; opacity:0;}
    10%  {right:6%; top:0; opacity:1;}
    90%  {right:6%; top:0; opacity:1;}
    95% {right:6%; top:0; opacity:0;}
    100% {right:6%; top:0; opacity:0;}
}

.Img1 {
    width: 20%;
    height: 60%;
    background:no-repeat center top ;
    background-size:cover;
    position: absolute;
    right:66%; top:100%; opacity:0;
    transform: perspective(1000px) rotateY(-10deg) rotateX(8deg) rotateZ(8deg);
    filter: drop-shadow(10px 10px 30px #000);
    animation-name: Img1;
    animation-iteration-count: infinite;
    animation-duration: 11s;
    animation-delay: 4s;
}

@keyframes Img1 {
    0%   {right:56%; top:100%; opacity:0;}
    20%  {right:50%; top:45%; opacity:1;}
    80%  {right:50%; top:45%; opacity:1;}
    100% {right:50%; top:45%; opacity:0;}
}


.Img2 {
    width: 25%;
    height: 55%;
    background:no-repeat center top ;
    background-size:cover;
    position: absolute;
    right:50%; top:100%; opacity:0;
    transform: perspective(1000px) rotateY(-10deg) rotateX(8deg) rotateZ(8deg);
    filter: drop-shadow(10px 10px 30px #000);
    animation-name: Img2;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    animation-delay: 3s;
}

@keyframes Img2 {
    0%   {right:40%; top:100%; opacity:0;}
    20%  {right:35%; top:55%;  opacity:1;}
    80%  {right:35%; top:55%;  opacity:1;}
    100% {right:35%; top:55%;  opacity:0;}
}


.TextContent {
    width: 50%;
    height: 2000px;
    position: absolute;
    left:0; top:-100%; opacity:0;
    transform: perspective(1000px) rotateY(4deg) rotateX(2deg) rotateZ(-1deg);
    filter: drop-shadow(0 0 20px #000);
    animation-name: TextContent;
    animation-iteration-count: infinite;
    animation-duration: 15s;
    animation-delay: 0s;
}

@keyframes TextContent {
    0%   {left:0; top:-100%; opacity:0;}
    10%  {left:3%; top:3%; opacity:1;}
    80%  {left:3%; top:3%; opacity:1;}
    100% {left:3%; top:3%; opacity:0;}
}

.TextContent h1      {line-height:56px; font-size:56px; font-weight:400; margin:0; padding:0; text-align:left; letter-spacing:2px; color:#eee; border-bottom:1px solid #666; text-shadow:none;}
.TextContent h2      {line-height:32px; font-size:32px; font-weight:700; margin:0; padding:0; text-align:left; letter-spacing:2px; color:#e31e24; border:0; text-shadow:0;}
.TextContent p       {color:#fff; text-align:left; font-size:20px; line-height:26px; margin:-10px 0 20px 0; padding:10px; text-shadow:0 0 10px #000; }	




.ShowcaseCaratteristiche              {display:block; position:relative; text-align:center; width:60%}
.ShowcaseCaratteristiche div           {display:inline-block; text-align:center; width:120px; height:120px; font-size:14px; line-height:16px; margin:5px; overflow:hidden; border-radius:8px; }
.ShowcaseCaratteristiche div img       {width:64px; height:64px; margin:8px auto 12px auto; border:0; display:block; filter:grayscale(100%); float:none;}

.SchedePreview                      {display:block; text-align:center; width:100%}
.SchedePreview .Scheda              {display:inline-block; position:relative; text-align:left; width:360px; height:260px; margin:10px;}
.SchedePreview .Scheda .imgbox      {width:100%; height:80%; position:absolute; right:0; top:0;}
.SchedePreview .Scheda .imgbox .img     {width:90%; height:90%; background:no-repeat center top; background-size:cover; position:absolute; right:8%; top:0; transform: perspective(600px) rotateY(-10deg) rotateX(5deg) rotateZ(6deg); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;}
.SchedePreview .Scheda .imgbox .swadow  {width:90%; height:90%;  background:#666; background-size:contain; filter:drop-shadow(0 0 10px #666); position:absolute; right:7.5%; top:-1%; transform: perspective(600px) rotateY(-20deg) rotateX(30deg) rotateZ(8deg); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;}


.SchedePreview .Scheda .imgbox:hover .img        {width:100%; height:100%; position:absolute; right:0; top:-5%; transform: perspective(1000px) rotateY(0) rotateX(0) rotateZ(0);}
.SchedePreview .Scheda .imgbox:hover .swadow     {width:100%; height:100%; position:absolute; right:0; top:-5%; transform: perspective(1000px) rotateY(0) rotateX(0) rotateZ(0);}

.SchedePreview .Scheda .text        {position: absolute;  top:190px; left:0; width:100%; height:60px; overflow:hidden; text-shadow:0 0 5px #fff; }      
.SchedePreview .Scheda .text p      {text-align:left; color:#000;  font-family:'Encode Sans Condensed', sans-serif; font-size:14px; line-height:20px; padding:10px 10px 0 10px;}
.SchedePreview .Scheda .text p b    {font-size:17px; font-family: 'Oswald', sans-serif; font-weight:400; }  
.SchedePreview .Scheda .text p i    {float:right;}
.SchedePreview .Scheda a:hover      {color:#47388A}

.ShowcasePartner              {display:block; position:relative; text-align:center; width:60%}
.ShowcasePartner div          {display:inline-block; filter: grayscale(100%); text-align:center; width:120px; height:90px; background-repeat:no-repeat; background-position:center center;  background-size:contain; margin:10px 20px; overflow:hidden; border-radius:16px; }
.ShowcasePartner div:hover    {filter: grayscale(0) drop-shadow(0 0 5px #fff); }



@media (max-width: 1366px) {
.Showcase {	height: 600px;}
.StarWars { height: 600px;}
 #titles p {font-size:80px; letter-spacing:1px;}
.spot {font-size:52px; letter-spacing:1px;}
.Img0 { width: 70%;}
.TextContent {width:60%;}
.TextContent h1      {line-height:48px; font-size:48px;}
.TextContent h2      {line-height:28px; font-size:28px; letter-spacing:1px;}
.TextContent p       {font-size:18px; line-height:24px; margin:-8px 0 16px 0; padding:10px; text-shadow:0 0 8px #000;}	
  }  

@media (max-width: 1024px) {
.Showcase {	height: 500px;}
.StarWars { height: 500px;}
 #titles p {font-size:72px; letter-spacing:0;}
.spot {font-size:48px; letter-spacing:0;}
.Img0 { width: 70%;}
.TextContent {width:80%;}
.TextContent h1      {line-height:42px; font-size:42px; padding-left:10px;}
.TextContent h2      {line-height:24px; font-size:24px; letter-spacing:1px; padding-left:10px;}
.TextContent p       {font-size:16px; line-height:20px; margin:-6px 0 12px 0; padding:10px; text-shadow:0 0 6px #000;}
.SchedePreview .Scheda     {width:320px; height:240px; margin:8px;}
.ShowcasePartner div       {width:90px; height:60px; margin:8px 16px; border-radius:12px; }
.ShowcaseCaratteristiche div           {width:90px; height:90px; font-size:12px; line-height:14px;}
.ShowcaseCaratteristiche div img       {width:48px; height:48px; margin:8px auto 12px auto; }
  }  

@media (max-width: 760px) {
.Showcase {	height: 350px; margin:48px 0 0 0;}	
.StarWars { height: 350px;}
 #titles p {font-size:50px;}
.spot {font-size:26px;}


.Img0 {width: 90%; height: 80%;}
.Img1 {width: 30%; height: 30%;}
.Img2 {width: 35%; height: 35%;}

@keyframes Img0 {
    0%   {right:-60%; top:-10%; opacity:0;}
    10%  {right:-6%; top:10%; opacity:0.5;}
    90%  {right:-6%; top:10%; opacity:0.5;}
    95% {right:-6%; top:10%; opacity:0;}
    100% {right:-6%; top:10%; opacity:0;}
}

@keyframes Img1 {
    0%   {right:6%; top:100%; opacity:0;}
    20%  {right:0%; top:55%; opacity:1;}
    80%  {right:0%; top:55%; opacity:1;}
    100% {right:0%; top:55%; opacity:0;}
}

@keyframes Img2 {
    0%   {right:30%; top:100%; opacity:0;}
    20%  {right:25%; top:65%;  opacity:1;}
    80%  {right:25%; top:65%;  opacity:1;}
    100% {right:25%; top:65%;  opacity:0;}
}

.TextContent {width:80%; background-image:url('/img/AlphaDark25.png')}
.TextContent h1      {line-height:26px; font-size:26px;}
.TextContent h2      {line-height:16px; font-size:16px; letter-spacing:0;}
.TextContent p       {font-size:12px; line-height:16px; margin:-4px 0 8px 0; padding:10px; text-shadow:0 0 4px #000;}
.ShowcasePartner       {display:none}
.ShowcaseCaratteristiche      {display:none}
  }  

@media (max-width: 400px) {

 #titles p {font-size:30px;}
.spot {font-size:20px;}

  }