@font-face {
 font-family: "Azonix";
 src: url("font/azonix.otf") format("opentype");
}


.item{background:#fff;padding:16px; display:inline-block; width:400px; text-align:center; color:#444;  vertical-align:middle; max-width:100%; box-sizing:border-box;margin:4px}
.itemimg{width:96px; height:128px;display:inline-block; vertical-align:top;padding-right:16px;vertical-align:middle;}
.item .productname{font-weight:bold; vertical-align:middle;display:inline-block;}

.item:hover{cursor:pointer; color:#e0a; text-decoration:none;}

.zoom {
  padding: 50px;
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}

.zoomed {
	transition:0.2s all;
  transform: scale(1.75); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.zoom{cursor:zoom-in;}
.zoomed{cursor:zoom-out;}
img.floatleft{float:left; padding:16px; background:#000; margin-right:16px}
.clear{clear:both}
th.special{ background:#fff; color:#000; padding-top:20px}
audio{max-width:100%; box-sizing:border-box; }

.popup{border-radius:16px; padding:16px; text-align:center; color:#fff; margin-bottom:32px;}
.popup.err{background:#f16363;}
.red{color:#f76363;}
.orange{color:#f72;}
.popup.ok{background:#38c599;}
.popup.ok a{color:#fff;text-decoration:underline}
.popup.warning{background:#ec7c04;}
.textp{width:1000px; text-align:justify; margin:0 auto;}
iframe{max-width:100%}

.docitem a{padding:16px; border:1px solid #ddd; display:block;margin:8px; background:#fff}

p{padding:0 0 24px 0; max-width:100%}

.inlineblock{display:inline-block}
body,html{height:100%}
.flex{display:flex}
body{line-height:1.4em;margin:0; font:16px/26px 'Noto Sans', sans-serif; color:#444; overflow-y:scroll;text-align:justify;background:url(img/musicbg.jpg) }

html, body {
    height: 100%;
}

table.border td{border:1px solid #ddd}

.mainpage{padding-bottom:100px}

.wrapper{
	min-height: 100%;
  /* equal to footer height */
  margin-bottom:-280px; 

}

.spacer{height:98px}
.wrapper:after {
  content: "";
  display: block;
}

.wrapper:after {
  height: 222px; 
}

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}
a{color:#2ae;text-decoration:none}
a:hover{text-decoration:underline}
ul{margin-left:20px;}
a:focus{outline:none}

.padding{padding:16px}
img{max-width:100%}
.pagePadding{padding:0 30px;box-sizing: border-box;}
.nopadding{padding:0}
.page{max-width:1400px; margin:0 auto}

h1{text-align:center;display:block; margin:80px auto 0px auto;background:#00a7de; color:#fff; max-width:600px;padding:8px 16px 8px 8px;position:relative; padding-left:32px; font-weight:normal; box-shadow:5px 5px 0 rgba(0,0,0,0.1);line-height: 1em;}

h1.left{left:0;margin:50px 0 20px 0;}
.light{color:#aaa}

#main a{text-decoration:none; color:#9364a6; border-bottom:1px dotted #9364a6;}
table{border-collapse:collapse;background:#fff}
table td, table th{padding:8px 0; }
.cellpad{padding:8px 32px;}
table.padding td, table.padding th{padding:8px 32px}
table.noborder td{border:none}
table.forum{max-width: 1200px;text-align:left}
table.forum th{padding:8px 16px;}
table.forum tr td{text-align:left}
td.shrink {
  white-space: nowrap;
  width: 1px;
}
.feature{max-width:22%; display:inline-block; text-align:center;font-style:italic;}

th{background:#00a7de;color:#fff}
th.important{background:#ddd}

.listTable tr:nth-child(even) td:first-child, th.important
{
	background: #e8f7f6;
    text-align: right;
	
}
.listTable tr:nth-child(even) td:nth-child(n+2), th.important
{
	background: #fbfbfb;
    text-align: left;
}

.listTable tr:nth-child(odd) td:first-child, th.important
{
	background: #dcebff;
    text-align: right;
	  
}

.listTable tr:nth-child(odd) td:nth-child(n+2), th.important
{
	background: #ebf4ff;
    text-align: left;
}
	
.listTable td:not(:first-child){ text-align:left}


.cartProgress{ color:#888; text-align:left; background:#fff}
.cartProgress>div{display:inline-block; padding:16px 32px;}
.cartProgress a{display:inline-block;padding:16px 32px;  }
.cartProgress a.selected{color:#fff; background:#00a7de }
.border{border:1px solid #ddd}

.left{text-align:left}
.logo{max-width:25%}

.flex{display:flex}
.flex>*{}
.center{text-align:center; margin:0 auto; }
img.center{display: block;}

h2{font-weight:bold;font:32px ;text-align:center;letter-spacing:3px; padding: 20px 0;}


input[type=image]:hover{cursor:pointer}


.button{vertical-align: middle;font-size:20px;border:0;background:#00a7de;color:#fff;padding:12px 24px; display:inline-block; transition:all 0.2s;text-decoration:none;}
.button.disabled{color:#aaa}
.button.notactive{background:transparent; color:#00a7de}

.button:hover:not(:disabled):not(.disabled){background:#34cdff; color:#fff;text-decoration:none;cursor:pointer}

input[type=submit]:disabled, button:disabled,.button:disabled{background:#ddd; color:#999; }
small{font-size:0.7em}

legend{text-align:center; }
fieldset{background:#fff;border:2px solid rgba(0, 0, 0, 0.1); padding-top:32px;}
.blue fieldset{border:2px solid rgba(255, 255, 255, 0.25)}

.forum tr td:first-child a{width:100%; transition:0.2s all;text-decoration:none}
.forum tr td:first-child a:hover{background:rgba(0,153,204,0.1)}

#footer{background:#29293a;text-align:center; box-shadow:0 -4px 16px rgba(0,0,0,0.05); color:#e2e2e2; margin-top:80px; height:222px;padding:50px 0}
#footer a:hover i{color:#fff}


.minilogo2{vertical-align:middle;display:inline-block}
.minilogo2 img{height:32px;}
#menu{letter-spacing:1px;position:fixed;left:0; top:0; width:100%;z-index:100;will-change: transform;z-index:2;background:#333346; color:#fff;text-align:center; box-sizing:border-box; line-height:26px;}
#menu a{text-transform:lowercase;display:inline-block;color:#eee;text-decoration:none;padding:16px;}
#menu a.minilogo2 {padding-top:6px;padding-bottom:0;}


#menu a.selected{box-shadow: 0px -4px 0 #eee inset;background:rgba(255,255,255,0.1)}

#menu .langitem{padding-left:8px; padding-right:8px}
#menu a.highlight{background:#444}



#menu a{    display: inline-block;
    vertical-align: middle;

    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.2s;
transition-duration: 0.2s;}


#menu a:not(.selected):not(.minilogo2):hover:before{ 
-webkit-transform: scaleY(1);
    transform: scaleY(1);transform: scaleX(1.02);
}
#menu a:before{
	    content: "";
    position: absolute;
    z-index: -1;
    height:4px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    transform: scaleX(0);
    transform-origin: 0% 100%;
    transition-property: transform;
    transition-duration: 0.2s;
transition-timing-function: ease;}


.mini{font-size:16px}
.blue{border-top:1px solid #eee;border-bottom:1px solid #eee;color:#000;background:#fff;max-width:100%; box-sizing:border-box;padding:30px;margin:30px 0}


.blue a.button {text-decoration:none; color:#fff}
table.forum a{display:inline-block;height:100%;padding:12px; box-sizing:border-box}
blockquote{border:1px solid #ccc; border-left:8px solid #ccc; padding:16px; background:rgba(255,255,255,0.5); position:relative;}
blockquote::after{content:"“"; position:absolute; left:-6px; top :0; font:48px georgia}


.blue h1{margin:24px 0;}
.blue ul{color:#fff}
.valign{display:table-cell; vertical-align:middle}
.table{display:table}
.table.center td{text:align:center}
li{text-align:left}

video{max-width:100%}

label{min-width:150px; display:inline-block;vertical-align:top}

input:not([type=submit]){height: 47px;}

input:not([type=submit]), textarea,  select{box-sizing:border-box;position:relative; border:1px dotted rgba(0, 0, 0, 0.3); padding:8px; font:20px/28px 'Roboto', sans-serif;vertical-align:middle; outline:0 }

.spacermenu{width:50px; display:inline-block}

input:not([type=submit]):focus, textarea:focus,  select:focus{border-color:rgba(0, 0, 0, 0.25);}

input:not([type=submit]):focus, select:focus{background:#eef;}
input:not([type=submit]), textarea,  select{ transition:0.3s all}


h3{font:28px arial;}

textarea{width: 100%;box-sizing:border-box}
input[type=submit]{cursor:pointer;padding:12px 24px}
select option{color:#000}
span.tooltip{border-bottom:1px dotted #444;cursor:help;}
.gray{background:#262729;}

.screenshot{max-width:60%;}
.screenshots{text-align:center}
.screenshots>div{display:inline-block;width:30%; margin:20px}
.screenshots img{width:100%;}

.icon{display:inline-block; vertical-align:middle}
.zzzZoomableOverlay{z-index:200!important}


ul.featureList{list-style-type:none}
ul.featureList>li:before{content:"►"}

#footer>div>div{display:inline-block; text-align:left;vertical-align:top;padding: 0 32px;}


input[type=checkbox]{width:24px; height:24px;}
.footercontent{width:1000px; display:inline-block}
#menumobile{display:none}

@media screen and (max-width: 1200px) {
#menu{position:relative; margin-bottom:30px}


}


@media screen and (max-width: 700px) {
	
	ul{margin-left:0}
	table>tbody>tr>td,table>tbody>tr>th{display:block;width:100%!important}
	table>tbody>tr>td:first-child, th.important{background: #eee;text-align: center;}

	.responsiveTable td{display:block;text-align:center;}
	.responsiveTable td audio{margin:0 auto; display:block;}
	p{padding-left:16px; padding-right:16px;box-sizing:border-box}
	.cartProgress>div{ padding:8px;}
	.cartProgress a{ padding:8px;  }
	#footer>div>div{display:block; text-align:center;padding:0 0 16px 0;}
	#footer{ height:auto}
	.newslist img{display:block;}
	.footercontent{width:100%; display:inline-block}
	input, select, textarea{width:100%}
	.flex{display:block}
	.flex>*{display:block;width:100%; box-sizing:border-box}

	.pagePadding{padding:16px 0;}
	.feature{max-width:49%; display:inline-block;}

	body{font-size:16px; line-height:22px;}

	.main h2{ margin-bottom:16px}

	table td, table th{padding:8px 0px; }
	#menu{display:none; position:fixed;top:48px;z-index:101}
	#menumobile{display:block; background:#333346; color:#fff; padding:12px; font-size:22px; position:fixed; width:100%;height:24px; z-index:100}
	.itemimg{width:48px}
	.item{width:100%; padding:0;margin:0}
	.spacer{height:64px}
}



@media print {
	#menu{display:none}
}