html, body {height:100%; padding:0; margin:0; background:#3f3f3f}
body {overflow-x:hidden;}
#wrapper {height:100%; width:100%; min-width:320px;}
header {display:block; width:100%; height:90px; background:transparent; position:fixed; left:0; top:0; z-index:100; transition:0.5s;}
header.dark {/*background:#242424;*/ transition:0.5s;}
header h2 a,  a:hover,  a:link,  a:visited {color:#fff; text-decoration:none;}


#sn_menu_icon {display:block; width:41px; height:41px; position:fixed; right:10px; top:8px; z-index:500; background:transparent;}
#sn_menu_icon .sn_menu_toggle {display:block; width:41px; height:41px; cursor:pointer;}
#sn_menu_icon .sn_menu_toggle .bar {display:block; width:26px; height:5px; background: #F3F3F3; position:absolute; left:12px; top:19px; transition: background 0s 0.3s}
#sn_menu_icon .sn_menu_toggle .bar::before {content:""; display:block; width:26px; height:5px; background:#F3F3F3; position:absolute; left:0; top:-9px; transform-origin:left top; transition:  0.3s;}
#sn_menu_icon .sn_menu_toggle .bar::after {content:""; display:block; width:26px; height:5px; background: #F3F3F3; position:absolute; left:0; top:9px; transform-origin:left bottom; transition: 0.3s;}

#sn_menu_panel {width:100%; height:100%; position:fixed; left:100%; top:0; z-index:499; transition:0.5s 1s; 
  display:flex; flex-direction:row-reverse/*direzione dell menu a tendina*/ ; flex-wrap:wrap; justify-content:space-between;
}
#sn_menu_panel #sn_menu_left {width:0; height:100%; background:#242424 url(../slides/menu-back.jpg) no-repeat left center; background-size:cover; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center;display:none;
}
#sn_menu_panel #sn_menu_left h1 {text-align:center; padding:0; margin:0; font:50px/70px 'Abril Fatface', arial, serif; color:#fff;}
#sn_menu_panel #sn_menu_left #social {text-align:center; width:100%;}
#sn_menu_panel #sn_menu_left .social {color:#aaa; display:inline-block; font-size:20px; margin:5px; transition:0.2s;}
#sn_menu_panel #sn_menu_left .social:hover {color:#666;}
#sn_menu_panel #sn_menu_left p {font:300 16px/25px 'Lato', sans-serif; color:#999; text-align:center;}

#sn_menu_panel #sn_menu_right {order:2; width:20%; min-width:165px; height:100%; background: #FFF; font:400 18px/40px 'Open Sans', sans-serif; color:#aaa; overflow-y:auto; -webkit-overflow-scrolling: touch;
  display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center;
}

#sn_menu_right #sn_menu {width:calc(100% - 145px); max-width:160px; min-width:145px;/*misura del DIV sn_menu dentro tendina*/  margin:0 10px 0;}
#sn_menu_right #sn_menu p {padding:0; margin:0; font:lighter 25px/35px 'Unica One', cursive; text-transform: uppercase; color:#666;}
#sn_menu_right #sn_menu p a {color:#666; text-decoration:none;}
#sn_menu_right #sn_menu p a:hover {color:#000;}

#home #sn_menu_right #sn_menu p a.home,
#instruct #sn_menu_right #sn_menu p a.instruct,
#demos #sn_menu_right #sn_menu p a.demos,
#comments #sn_menu_right #sn_menu p a.comments,
#download #sn_menu_right #sn_menu p a.download,
#privacy #sn_menu_right #sn_menu p a.privacy {color:#000; cursor:default;}

input#sn_menu {display:none;}

input#sn_menu:checked ~ #wrapper {height:100%; overflow:hidden; transition:0s;}
input#sn_menu:checked ~ #sn_menu_icon .sn_menu_toggle .bar {background:transparent; transition:0s;}
input#sn_menu:checked ~ #sn_menu_icon .sn_menu_toggle .bar::before {transform: rotate(45deg); width:28px; left:3px;}
input#sn_menu:checked ~ #sn_menu_icon .sn_menu_toggle .bar::after {transform: rotate(-45deg); width:28px; left:3px;}
input#sn_menu:checked ~ #sn_menu_panel {left:0; transition:0.5s;}


.mi_thumb {width:100%; height:100%; max-width:none; position:relative; -webkit-tap-highlight-color: rgba(0,0,0,0); -ms-user-select: none; margin:0; }/* background:#000;

.mi_thumb_text h1 {padding:0; margin:2%; font:30px/50px 'Unica One', cursive; color:#fff; letter-spacing:2px; line-height:200%; text-align:center}
.mi_thumb_text h2 {padding:0; margin:0; font:lighter 24px/35px 'Unica One', cursive; color:#ccc; line-height:200%}
.mi_thumb_text p {padding:0; margin:2%; font:lighter 17px/27px 'Lato', sans-serif; color:#fff; line-height:200%}
.mi_thumb_text a {color:#ccc;}
.mi_thumb_text a:hover {color:#ccc;}
*/
.mi_thumb .mi_wrap {display:block; position:relative; left:0; top:0; width:100%; height:100%; padding-bottom:0; overflow:hidden;}
.mi_thumb .bullets {display:inline-block; text-align:center; width:100%; height:25px; position:absolute; bottom:20px; left:50%; transform:translateX(-50%);}
.mi_thumb .bullets span {display:inline-block; width:15px; height:15px; border-radius:15px; background:rgba(255,255,255,0.3); margin:0 5px;}
.mi_thumb .bullets span.current {background:rgba(255,255,255,0.8);}
.mi_thumb a.zip {
	display: block;
	width: 200px;
	height: 55px;
	color: #000;
	border-radius: 5px;
	text-align: center;
	margin: 30px auto;
	text-decoration: none;
	font-family: 'Lato', arial, serif;
	font-size: 18px;
	line-height: 50px;
	font-weight: 300;
	background-color: #fff;
}

/*mi_thumb_text ha un css per ogni pagina*/

#demotag {display:block; margin-bottom:90px;}
section {display:block; padding:0px 0; box-sizing:border-box; width:95%; max-width:1200px; margin:0 auto;}
article {display:block; width:100%;}
article h1 {padding:0; margin:2%; font:30px/50px 'Unica One', cursive; color:#fff; letter-spacing:2px; line-height:200%; text-align:center}
article h2 {padding:0; margin:40px 0 0 0; font:400 40px/50px 'Lato', arial, serif; color:#242424;}
article h2 {padding:5px 0; margin:0; font:300 30px/35px 'Lato', arial, serif; color:#799354;}
article p {padding:5px 0; margin:0; font:300 18px/25px 'Lato', arial, serif; color:#fff;}
article a.zip {display:block; width:250px; height:50px; font:300 18px/50px 'Lato', arial, serif; color:#fff; background:#77b1b3; border-radius:5px; text-align:center; margin:30px auto; text-decoration:none;}
article p a.website {color:#69c; text-decoration:none;}
article.col {display:inline-block; box-sizing:border-box; width:30%; vertical-align:top; margin:20px 0;}
article li {padding:5px 0; margin:0; font:300 18px/25px 'Lato', arial, serif; color:#555;}

article a.demo {display:inline-block; padding:0 10px; margin:0; font:300 18px/40px 'Lato', arial, serif; color:#fff; background:#77b1b3; border-radius:5px; text-decoration:none;}

article.col:nth-child(3n+3) {margin:20px 5%;}

footer {display:block; width:100%; background:#242424; padding:20px 0 ; box-sizing:border-box; text-align:center; color: white;}
footer p {font:300 16px/0px 'Lato', sans-serif; padding:20px 0; margin:0;}
footer h2{font:lighter 27px/40px 'Unica One', cursive; text-transform: uppercase;}
footer .copyright{ color: gray}
pre, code {color:#000;  
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 white-space: -pre-wrap;
 white-space: -o-pre-wrap;
 word-wrap: break-word; 
 padding:5px 0; margin:0; font:300 16px/24px 'Lato', arial, serif; color:#678;
 }
table {border:0; border-collapse:collapse;}
th, td.para-head {font:400 20px/36px 'Lato', sans-serif; color:#111; background:#ddd; text-align:left; padding:0 10px; text-align:left; border:1px solid #ccc;}

td {font:300 16px/25px 'Lato', sans-serif; color:#555; text-align:left; padding:5px 10px; border:1px solid #ccc;}

@media screen and (min-width: 1024px) {
  #sn_menu {display: none}
  #sn_menu_icon {display:none}
  #sn_menu_right {display:none}
  #sn_menu_panel {display:none}
  header { background:rgba(36, 36, 36, 0.3);}
  header h1 {padding:0; margin:0 0 0 30px; font:bold 30px/70px Verdana, Arial, Helvetica, sans-serif, white; letter-spacing:2px}
  header h2 {padding:0; margin:-15px 0px 0px 32px; font:400 13px/0px Arial, Helvetica, sans-serif, white; letter-spacing:16px}
  /* The navbar container */
	nav {
		display:block; width:auto; height:auto; position:fixed; right:10%; top:0; z-index:500; background:transparent;
	
	}
	ul.nav {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  overflow: hidden;
	  font:lighter 25px/60px 'Unica One', cursive; text-transform: uppercase;
	}
	
	ul.nav li  {
	  float: left;
	}
	
	li a, .dropbtn {
	  display: inline-block;
	  color: white;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	}
	
	li a:hover, .dropdown:hover .dropbtn {
	  background-color: red;
	}
	
	li.dropdown {
	  display: inline-block;
	}
	
	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f9f9f9;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
	}
	
	.dropdown-content a {
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	  text-align: left;
	}
	
	.dropdown-content a:hover {background-color: #f1f1f1}
	
	.dropdown:hover .dropdown-content {
	  display: block;
	}
}
@media only screen and (max-width: 1024px) {/*640px*/
header {height:70px;}
header h1 {padding:0; margin:0 0 0 20px; font:bold 25px/56px Verdana, Arial, Helvetica, sans-serif, white; letter-spacing:2px}
header h2 {padding:0; margin:-11px 0px 0px 22px; font:400 12px/0px Arial, Helvetica, sans-serif, white; letter-spacing:13px}


article.col:nth-child(3n+3) {margin:20px 0;}
article.col {display:inline-block; box-sizing:border-box; width:45%; vertical-align:top; margin:20px 0;}
section article.col:nth-child(even) {margin:20px 8% 20px 0;}

nav {display: none}
}
@media only screen and (max-width: 480px) {
header h1 {padding:0; margin:0 0 0 20px; font:bold 22px/56px Verdana, Arial, Helvetica, sans-serif, white; letter-spacing:2px}
header h2 {padding:0; margin:-11px 0px 0px 22px; font:400 12px/0px Arial, Helvetica, sans-serif, white; letter-spacing:11px}
section article.col {width:95%; margin:20px auto;}

table thead th:last-child {display:none;}
table tr td:nth-of-type(4) {display:none;}

nav {display: none}
footer .copyright{font-size: 14px}
}