@font-face { font-family: corsivo;
  src: url(../font/birdcall.ttf) format('truetype');}
@font-face { font-family: boldato;
  src: url(../font/greatC.ttf) format('truetype');}

HTML {font-size: 5.4vw; text-align: center;}
.noport { display: none;}
IMG {display: block; z-index: 1; max-width: 100%; max-height: 100%; background-color: transparent;}
IMG#Logo {position: fixed; margin: 0px; top: 2px; right: 2px; width: 15vw; height: 13vw;
z-index: 3;}
NAV {display: block; margin: 0px; position: fixed; top: 0.2rem; right: 15.6vw; padding: 0px; width: 85.5vw; z-index: 2; border-bottom: solid 2px #005; height: 1.7rem;}
nav>ul {list-style: none; text-align: right; margin: 0px; padding: 0px;}
nav>ul>li {display: inline-block; position: relative; margin: 0.05rem 0.5vw; z-index: 1;}
H2, H3 {display: inline-block; margin: 0px; font-size: 0.85rem; width: auto; height: 0.9rem; text-align: center; padding: 0px 3vw; color: #FEF; line-height: 0.8rem; border-radius: 0.8em  0.1em; border: 0.3em double #050; z-index: 2; overflow: hidden; cursor: pointer;
background-image: radial-gradient(center, ellipse farthest-corner, #006 0%, #58F 70%);
background-image: ms-radial-gradient(center, ellipse farthest-corner, #006 0%, #58F 70%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #006 0%, #58F 70%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, #006 0%, #58F 70%);
background-image:-webkit-radial-gradient(center, ellipse farthest-corner, #006 0%, #58F 70%); vertical-align: middle;}
H3 {display: block; width: 8.8rem; margin: 0.3rem; font-size: 0.75rem; vertical-align: middle;}
#Bgioc {display: none;}
H2:hover, H3:hover { border: 0.3em outset #25D; color: #008; font-size: 0.9em; background-image: none; background-color: #CFF;}
H3:hover { text-shadow: 1px 0 #006, -1px 0 #006, 0 1px #006, 0 -1px #006; height: 1.3em; line-height: 1.3em;}
nav>ul>li>ul {display: none; list-style: none; position: absolute; top: 1rem; text-align: center; padding: 2vw 0vw; z-index: -1;}
nav>ul>li:hover ul {display: block;}
span.submenu { display: block; padding: 2vw; background-color: rgba(80,180,250,0.8); width: auto;}
#boxscuola { left: -10vw;}
nav>ul>li>ul>li {display: inline-block; position: relative; margin: 0px; white-space: nowrap;}
P {display: block; position: fixed; font: normal normal 700 1.55rem corsivo, serif; width: 96vw; text-align: justify; line-height: 1.3em; top: 1.2rem; left: 1.5vw; color: #D13; text-shadow: -1px 0 #ACF, 0 1px #ACF, 1px 0 #ACF, 0 -1px #ACF; transition: opacity 5s; -webkit-transition: opacity 5s;; -moz-transition: opacity 5s;; -ms-transition: opacity 5s;; -o-transition: opacity 5s; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto;}
H1 {position: fixed; bottom: 1.4rem; left: 1vw; width: 100vw; font: italic normal 700 3.55rem boldato, serif; color: #14D; text-shadow: -1px 0 #9DF, 0 1px #9DF, 1px 0 #9DF, 0 -1px #9DF;
z-index: 2; vertical-align: bottom; text-align: center;
background-image: radial-gradient(center, ellipse farthest-corner, #9DF 0%, transparent 80%);
background-image: ms-radial-gradient(center, ellipse farthest-corner, #9DF 0%, transparent 80%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #9DF 0%, transparent 80%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, #9DF 0%, transparent 80%);
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #9DF 0%, transparent 80%);}
text.N { display: inline-block; margin: 0px 1px; font: italic normal 800 1.1em Corsivo, serif;}
H7 { position: fixed; font: italic normal 800 0.84rem serif; bottom: 3.88rem; right: 33vw; color: #14D; text-shadow: -1px 0 #9DF, 0 1px #9DF, 1px 0 #9DF, 0 -1px #9DF; z-index: 2;}
span#ConCk {display: block; position: fixed; bottom: 2.75rem; left: 2vw; height: 1.34rem; width: 69vw; padding: 0px; z-index: 2; font: italic normal 500 0.78rem serif; background-color: rgba(200,240,255,0.8); overflow: hidden; transition: opacity 4s; line-height: 1rem;}
text#TxCk {color: #02B; margin: 0px; margin-left: 72vw; text-align: left; white-space: pre; transition: margin-left 1s;}
IMG#Gioc {position: fixed; bottom: 7.4rem; right: 2vw; height: 7vh; width: 9vh; z-index: 3;}
a:link, a:visited { display: inline-block; width: 100%; text-decoration: none; color: #FEF; margin: 0px; padding: 0px;}
a:hover {color: #008;}
.nocell {display: none;}
acronym {display: none;}
span#exCk {display: none; position: fixed; top: 3.8rem; bottom: 4rem; left: 5vw; right: 5vw; width: auto; border: thick outset #02F; outline: medium double #14D; background-color: #EFF; font: italic normal 500 0.85rem serif; text-align: justify; padding: 1.5rem 3vw; z-index: 5; overflow: auto; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto;}
.Sx {display: inline-block; margin-left: 5%; width: 36%; font: normal small-caps 900 0.9rem sans-serif; padding: 1px 1vw; color: #FFF; border: medium outset #F40; outline: medium double #A00; cursor: pointer; background-color: #F00; text-align: center;}
.Dx {display: inline-block; margin-left: 12%; width: 36%; font: normal small-caps 900 0.9rem sans-serif; padding: 1px 1vw; color: #F60; border: medium outset #090; outline: medium double #060; cursor: pointer; background-color: #0F0; text-align: center;}
a#showbanner { display: block; position: fixed; margin: 0px; padding: 0px; bottom: 0.15rem; left: 0.2rem; width: 94vw; height: 2.2rem; z-index: 3; border: 0.35rem outset #69E; outline: #029 solid 0.2rem; background: #F6A url(../img/amazon.png) no-repeat center; background-size: 100% 100%;}

/* TABLET ORIZ   ---  TB Land.: larghezza massima 1280px */
@media (orientation: landscape) {
HTML {font-size: 1.9vw;}
.noport { display: inline-block;}
.noland { display: none;}
#Bgioc {display: inline-block;}
H2 { margin: 0px; padding: 0px 3.3vw; width: auto; min-width: 5vw; white-space: pre;}
IMG#Logo { top: 5px; left: 5px; width: 3.6rem; height: 3.2rem;}
NAV {left: 7vw; width: 91vw; padding-bottom: 0.5vw;}
NAV>ul { text-align: left;}
nav>ul>li {margin: 0px 0.8vw;}
H3 {margin: 0.4rem 0px; padding: auto; width: 26vw; height: 1rem;}
H3:hover { margin-left: 1vw; width: 28vw; padding: 0px;}
nav>ul>li>ul { width: auto; top: 2vh; left: 2%; padding: 1vw 2vw;}
acronym {display: none; color: #DFF; background-color: #58F; z-index: 5; position: fixed; bottom: 1.4rem; right: 4.5rem; width: auto; border: medium solid #DFF; -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; padding: 0.05em; padding: 1px 2vw;}
a:hover>acronym {display: block;}
IMG#Gioc {top: auto; bottom: 1vw; right: 1vw; height: 2.6rem; width: 3.7rem;}
H1 {bottom: -2.5rem; left: auto; right: 5vw; text-align: right; font-size: 5.4rem; color: #80D; text-shadow: -2px 0 #EFF, 0 2px #EFF, 2px 0 #EFF, 0 -2px #EFF; background-image: none;}
H7 {font-size: 1.05rem; bottom: 1.8rem; left: auto; right: 22vw; color: #80D; text-shadow: -2px 0 #EFF, 0 2px #EFF, 2px 0 #EFF, 0 -2px #EFF;}
P {font-size: 2.7rem; line-height: 1.35em; width: 46vw; height: 14rem; top: 0.5rem; left: -1.5vw; color: #A0B; text-shadow: -2px 0 #EFF, 0 2px #EFF, 2px 0 #EFF, 0 -2px #EFF; padding: 2rem 1vw 1vw 4vw;
background-image: radial-gradient(center, ellipse farthest-corner, rgba(150,210,255,0.8), transparent 78%);
background-image: ms-radial-gradient(center, ellipse farthest-corner, rgba(150,210,255,0.8), transparent 78%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, rgba(150,210,255,0.8), transparent 78%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, rgba(150,210,255,0.8), transparent 78%);
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(150,210,255,0.8), transparent 78%);}
a#showbanner{ bottom: 0.2rem; left: 0.25rem; width: 26vw; height: 2.4rem; border: 0.3rem outset #69E; outline: #029 solid 0.2rem;}
span#ConCk {bottom: 0.4rem; left: 29vw; height: auto; font-size: 0.85rem; width: 52vw;}}

@media (orientation: landscape) AND (max-height: 520px) AND (min-aspect-ratio: 16/9) {
/* Smartphone orizzont */ 
HTML {font-size: 2.2vw;}
.noport { display: inline-block;}
.noland { display: none;}
#Bgioc {display: inline-block;}
IMG#Logo {width: 3rem; height: 2.7rem; top: 0.1rem; left: 0.2rem;}
NAV {right: 0vw; left: 3.4rem; width: auto;}
nav>ul>li {margin: 0px 0.5vw; padding: 0px;}
H2 { font-size: 0.72rem; margin: 0px; padding: 0px 1.8vw; width: auto; white-space: pre; z-index: 3;}
H3 { width: 8rem; margin: 0.7vw;}
nav>ul>li>ul { top: 0.5rem; left: 3vw; padding: 1vw 0vw; z-index: 2;}
#boxscuola {left: 3vw;}
H1 {bottom: -1.7rem; left: auto; right: 8vw; font-size: 4rem; text-align: right; width: auto; color: #C02; text-shadow: -1px 0 #FF9, 0 1px #FF9, 1px 0 #FF9, 0 -1px #FF9; background-image: none;}
H7 {font-size: 0.9rem; bottom: 1.3rem; left: auto; right: 20vw; color: #FF0; text-shadow: -1px 0 #C03, 0 1px #C03, 1px 0 #C03, 0 -1px #C03;}
a#showbanner { left: 0px; width: 42vw; height: 2rem; z-index: 1;}
IMG#Gioc {bottom: 5px; right: 0.7vw; height: 5.7vw; width: 6.8vw;}
P {font-size: 1.3rem; width: 40vw; color: #FC2; top: 1.4rem; text-shadow: -1px 0 #902, 0 1px #902, 1px 0 #902, 0 -1px #902; line-height: 1.3em; z-index: 1;}
span#ConCk {bottom: 0.15rem; left: 45vw; width: auto; right: 6.7rem; height: 1.15rem; font-size: 0.9rem;}
span#exCk {top: 2.5rem; bottom: 2.5rem;}}

/* TAB VERT   ---  Tablet Port.: larghezza minima 581px - Larghezza massima 1000 */
@media (min-width: 581px) AND (max-width: 1000px) AND (orientation: portrait) {
HTML {font-size: 3.4vw; overflow: hidden;}
BODY {background: #030 url(../gallery/foto5.png) no-repeat fixed center; -moz-background-size: auto 100vh; -webkit-background-size: auto 100vh; -o-background-size: auto 100vh;  background-size: auto 100vh;}
#Bgioc {display: inline-block;}
IMG#Logo {width: 3rem;}
NAV {right: 3.6rem; width: 90vw;}
H2 { width: 4.5rem; font-size: 0.85rem;}
H2:hover {font-size: 0.8rem;}
H3 {width: 35vw; font-size: 0.8rem;}
H3:hover {font-size: 0.7rem;}
nav>ul>li>ul, #boxscuola {z-index: 2; left: 5vw;}
H1 {bottom: -2.5rem; left: -1vw; font-size: 6.2rem; color: #64F; text-shadow: -2px 0 #FDA, 0 2px #FDA, 2px 0 #FDA, 0 -2px #FDA; background-image: none;}
H7 {font-size: 0.85rem; bottom: 3rem; left: auto; right: 32vw; color: #EFF; text-shadow: -2px 0 #006, 0 2px #006, 2px 0 #006, 0 -2px #006;}
IMG#Gioc {top: auto; bottom: 1vh; left: 1vw; width: 12vw; height: 9vw;}
P {font-size: 2rem; width: 96vw; color: #25F; top: 2.7rem; text-shadow: -1px 0 #EFF, 0 1px #EFF, 1px 0 #EFF, 0 -1px #EFF; line-height: 1.35em;}
a#showbanner {bottom: 0.2rem; left: 15vw; width: 50vw; height: 1.8rem; border: 0.35rem outset #E59; outline: #929 solid 0.2rem;}
span#ConCk {bottom: auto; top: 2.7rem; left: 0vw; width: 100vw; height: 1rem; font-size: 0.8rem; z-index: 1;}}

/* PC   ---  TB Land.: larghezza minima 1381px */
@media (orientation: landscape) AND (min-width: 1321px) {
HTML {font-size: 1.55vw;}
IMG#Logo {width: 3.4rem; height: 3rem;}
NAV { width: 92vw; padding-bottom: 0.3vw;}
IMG#Gioc {bottom: 0.7vw; right: 0.8vw; width: 5vw; height: 4vw;}
H1 {bottom: -3rem; right: 2vw; font-size: 6rem;}
H7 {font-size: 1rem; bottom: 1.6rem; left: auto; right: 17vw;}
P {font-size: 2.6rem; width: 43vw; color: #C5B; text-shadow: -2px 0 #FEF, 0 2px #FEF, 2px 0 #FEF, 0 -2px #FEF;}
a#showbanner{ width: 21vw; height: 1.8rem;}
span#ConCk { left: 24vw; font-size: 0.8rem; width: 58vw;}}