@font-face {
	font-family: 'fontlina';
	src: local('fontlina'), url('../font/kabayan.ttf') format('truetype');
}
@font-face {
	font-family: 'fonttitolo';
	src: local('fonttitolo'), url('../font/OldCave.otf') ;
}
@font-face {
	font-family: 'lavagna';
	src: local('fonttitolo'), url('../font/Lost in the Sound.otf') ;
}

html {
overflow-x: hidden;
}
#logo-top{
	margin-top: 15px;
	//margin-left: 250px;
	height:100px;
}
.grid-container {
	//margin: 0 auto;
  display: grid;
  margin: -10px;
  
  grid-template-columns: auto 600px auto auto;
  //grid-template-rows: 1fr 1fr 1fr;
  gap: -10px -10px;
  grid-template-areas: "superiore superiore superiore superiore" "h_sx centrale centrale h_dx" "h_sx centrale centrale h_dx";
}
.superiore {
	text-align: center;

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0 0px;
  grid-template-areas: ". . ." ". . .";
  grid-area: superiore;
  height:145px;
  width: 100%;
	background-image: url(../img/bg2-top.png);
	background-repeat: repeat-x;
	//background-size: 50% 70%;

}

.centrale { 
grid-area: centrale;
padding-top: 25px;
height: 100%;
background-image: url(../img/quadretti.png);
	background-repeat: repeat-y repeat-x;

}
#firmami {
    font-family: fontlina;
    float:right;
    text-align: center;
    background-color: red;
    margin-top:  20px;
    margin-right: -20px;
    height: 20px;
    width: 200px;
    transform: rotate(35deg);
    cursor: pointer;
    
}

.h_sx { grid-area: h_sx; }

.h_dx { grid-area: h_dx; }

#intestazione {
	margin: 0 auto;
	margin-top: 20px;
	font-size: 9vw;
    font-family: fontlina;
}
@media screen and (min-width:1220px) {
	#intestazione { 
	   font-size: 110px; }
}
#blocco-intero{	
	margin: 0 auto;
	padding: 25px;
}
#blocco-lavagna{
	margin: 0 auto;
	width: 575px;
	height: 365px;
	background-image: url(../img/lava.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: -5px;
	border-radius: 5px;
	box-shadow: 2px 3px 6px rgba(0,0,0,0.5);
}
#blocco-lavagna-file{
	margin: 0 auto;
	padding: 10px;
	width: 575px;
	height: 100px;
	background-image: url(../img/lava.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: -5px;
	border-radius: 5px;
	box-shadow: 2px 3px 6px rgba(0,0,0,0.5);
}
#blocco-lavagna .ytplayer{
	margin-top: 32px;
	margin-left: 38px;
}
#testo{
	//font-family: fonttitolo;
	background-color: #dcdcdc;
	margin-top: 10px;
	margin-left: 40px;
	width: 540px;
	height: auto;
	border-radius: 5px;
	box-shadow: 2px 3px 6px rgba(0,0,0,0.5);
}
.titolo-blocco{
	font-family: fonttitolo;
	background-color: lightblue;
	margin-top: -370px;
	margin-left: 40px;
	width: 300px;
	height: 30px;
	box-shadow: 2px 3px 6px rgba(0,0,0,0.5);
}
.sotto-lavagna{
	position: sticky;
	margin: 0 auto;
	margin-top: 291px;
	
	width: 600px;
	height: auto;
	//text-shadow: 0px 1px 1px rgba(0,200,25,1);

}

.but_comm {
	float:right;
	margin-top:10px;
	background-color: lightblue;
	width: 110px;
	height: 20px;
	border-radius: 25px;
	text-align: center;
}
#add_comm {
    float: right;
	width: 20px;
	height: 20px;
 	background-image: url(../img/comment2.png);
	background-size: 100% 100%;
	margin-right: 5px;
    cursor: pointer;
}
.but_comm_ext {
	float:right;
	//margin-top:25px;
	margin-right: 10px;
	background-color: lightblue;
	width: 110px;
	height: 20px;
	border-radius: 25px;
	text-align: center;
}
#menu {
	text-align: center;
	list-style:none;
	margin: 0 auto;
	max-width: 900px;
	height: 35px;
	margin-top: -25px;
	
	background-image: url(../img/riga2.png);
	background-repeat: repeat-x;
	border-radius: 25px;
}
#menu li{
	position: relative;
	opacity: 0.8;
	float:left;
	width: 100px;
	height: 24px;
	padding-top: 5px;
	padding-left: 50px;
	background-image: url(../img/matita.png);
	background-repeat: no-repeat ;
	background-size: 100% 100%;
	cursor: pointer;
	z-index: 50
}
#menu li:hover {
	opacity: 1;

}
#menu li a{

	color: white;
	text-decoration: none;
	font-family: fonttitolo;
	margin-left: -75px;

}
#menu ul {
	box-shadow: inset 0px 0px 2px 2px rgba(0,0,0,0.5);
}
#menu ul.subMenu-on{
	//transition: opacity 500 ease-in-out;
	list-style:none;
//display:block; 
	position:relative;/* primo livello di annidamento:menu a discesa */
	padding-top: 6px;
	padding-bottom: 20px;
	width: 130px;
	/* height: 160px; */
	top:-12px;
	left:5px;
  line-height: 1;
  text-align:center;     
  margin: 10px;    
  min-height:30px;
  max-height:350px;
  padding-top:15px;
  position:relative;   
  border:1px solid #E8E8E8;  
  border-top:25px solid #1abaff;
  //font-family:'Reenie Beanie';    
  //font-size:22px;      
  border-bottom-right-radius: 60px 35px;
  display:inline-block;    
   background: #65d1ff; /* Old browsers */
   box-shadow: 6px 3px 6px rgba(0,0,0,0.5);
background: -moz-linear-gradient(-45deg, #65d1ff 81%, #65d1ff 82%, #65d1ff 82%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#65d1ff), color-stop(82%,#65d1ff), color-stop(82%,#65d1ff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #65d1ff 81%,#65d1ff 82%,#65d1ff 12%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #65d1ff 81%,#65d1ff 82%,#65d1ff 82%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #65d1ff 81%,#65d1ff 82%,#65d1ff 82%,#ffffff 100%); /* IE10+ */
background: linear-gradient(135deg, #65d1ff 81%,#65d1ff 82%,#65d1ff 82%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65d1ff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/* #menu ul.subMenu-on:after {      */
   /* content: ""; */
  /* position:absolute; */
  /* z-index:-1; */
  /* right:-0px; bottom:20px; */
  /* width:200px; */
  /* height: 25px; */
  /* background: rgba(0, 0, 0, 0.2); */
  /* box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40); */
/* -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0); */
 /* -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0); */
      /* -o-transform: matrix(-1, -0.1, 0, 1, 0, 0); */
     /* -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0); */
         /* transform: matrix(-1, -0.1, 0, 1, 0, 0); */
/* } */

#menu ul.subMenu-on li{
	padding-left: 30px;
	//list-style:none;
	float:none; 
	background-image: url();
}
#menu ul.subMenu-on li a{
		background-image: url();
}
#menu ul.subMenu-off{
position:absolute;
visibility:hidden;
top:-10000em
}

.logo_pdf{
	margin-left:40px;
	margin-top: 5px;
	width: 80px;
	height: 80px;
	background-image: url(../img/pdf.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.logo_class{
	margin-left:40px;
	margin-top: 5px;
	width: 80px;
	height: 80px;
	background-image: url(../img/classroom.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.logo_doc{
	margin-left:40px;
	margin-top: 5px;
	width: 80px;
	height: 80px;
	background-image: url(../img/doc.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.logo_link{
	margin-left:40px;
	margin-top: 5px;
	width: 80px;
	height: 80px;
	background-image: url(../img/link.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.titolo-blocco-file{
	font-family: fonttitolo;
	background-color: lightblue;
	//margin-top: -30px;
	margin-left: 40px;
	width: 300px;
	height: 30px;
	box-shadow: 2px 3px 6px rgba(0,0,0,0.5);
}
.sotto-lavagna-file{
	position: sticky;
	margin: 0 auto;
	margin-top: 10px;
	width: 600px;
	height: auto;
}
.logo_pdf .testo , .logo_class .testo , .logo_doc .testo , .logo_link .testo{
	margin-left: 100px;
	padding-top: 40px;
	color: white;
	width: 450px;
	height: 80px;
	font-family: lavagna;
	text-decoration: none;
}
.logo_pdf .testo a , .logo_class .testo a , .logo_doc .testo a , .logo_link .testo a{
	color: white;
	text-decoration: none;
	font-size:35;
}
#lavagnetta{
				width: 500px;
				margin: auto;
				box-shadow: 3px 3px 10px #888;
				background: url(../img/blackboard-deco.png) center 5px no-repeat, url(../img/blackboard-deco.png) center bottom 5px no-repeat, url(../img/blackboard-bg.png) top left repeat;
				padding: 140px 50px;
			}

#lavagnetta {
				font-family: 'Homemade Apple', cursive;
				font-size: 18px;
				color: #FFF;
				line-height: 2.5em;
			}
            
#muro {
    margin: 0 auto;
    height: 150px;
    width: 850px;
}            
.postit {
        float: left;
		height: 150px;
        width: 170px;
		margin-left: 15px;
		box-shadow: -2px 2px 10px #666;
		transform: rotate(-25deg);
		background: url(../img/pin.png) right 5px top no-repeat, #FFF;
		background-size: 60px, 60px, auto;
		padding-top: 45px;
        padding-left: 8px;
        padding-right: 8px;
        box-shadow: 6px 3px 6px rgba(0,0,0,0.5);
        border-bottom-right-radius: 60px 35px;
        text-align: center;
		}
a.vid {
    position: fixed;
    text-align: center;
    font-size: 12px;
    height: 20px;
    width: 90px;
    margin-top: -30px;
}
#fondo {
	position:fixed;
	text-align: center;
	bottom:0;
	right: 0;
	width: 320px;
	height:15px;
	color: black;
	background-color : #7fff00 ;
	font-size: x-small;
	font-family: Tahoma, sans-serif;
	box-shadow: 3px 3px 10px #888;
	border-radius: 25px;
}