body {
  margin: 0;
  padding: 0;
/*   background: #f7f1e9 none repeat scroll 0% 50%; */
  background: #e2e2e2 none repeat scroll 0% 50%;

  font-family: "Helvetica Neue","arial","helvetica","sans-serif"; 
/*   font-family: "arial","helvetica","sans-serif"; */
  font-size: 12pt;
/*   color: #333333; */
  color: #555;
  
    text-align: justify;
    text-justify: inter-word;  
  
}

body { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; margin: 0; padding: 0; }

#container, .leaflet-container, .widget {
/*   background: #F7F6F4 ; */
	background: #f7f9f7;
  	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;

}

.leaflet-container {
	background: #f5f5f5 none repeat scroll 0% 50%;
}

#container, .footer-box {
/*   border: 1px solid #000000; */
  margin: 0.6em auto;
/*   background: #ffffff none repeat scroll 0% 50%; */
/*   background: #F7F6F4 none repeat scroll 0% 50%; */
/*   max-width: 960px; */
  max-width: 1200px;
  overflow: hidden;
}

#header {
  border-bottom: 10px solid #00008B;
  background: #0080ff url("images/mazaika-logo-n-text.svg") no-repeat scroll 	45% 60%;
  background-size: 680px auto;
  height: 80px;
  overflow: hidden;
}

#header h1 {
  margin: 0;
  padding: 0px 10px 0px 218px;
  color: #ffffff;
  font-size: 16pt;
  position: relative;
  left: 0px;
  top: 26px;
}
#header div.tl {
  padding: 5px;
  height: 19px;
  top: 0%;
  left: 45px;
  font-size: 11px;
  text-align: right;
  color: #ffffff;
  overflow: hidden;
}
#header div.pag {
  padding: 5px 1em;
  background: #00008B none repeat scroll 0% 50%;
  position: relative;
  height: 22px;
  bottom: -27px;
  color: #ffffff;
  font-size: 10pt;
  font-weight: bold;
  text-align: right;
  float: right;
  overflow: hidden;
}

.responsive, .responsive-central {
    max-width: 100%;
    height: auto;
}

.responsive-central {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
}

.central {
  margin: auto;
}

.topnav {
    /* Safari */
/*     position: -webkit-sticky;  */
/*     position: sticky; */
    top: 0;
	z-index: 9998;
}

.topnav, .bottomnav {
  overflow: hidden;
  background-color: #0080ff;
  color: #ff0000;
}

.topnav a, .bottomnav a , .dropbtn {
  float: left;
  display: block;
  color: #f2f2f2;  
/*   text-align: center; */
  padding: 0.7em 0.8em;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.0em;
}

.topnav a:hover, .bottomnav a:hover , .dropdown:hover .dropbtn {
  background-color: #00008B;
  color: #ffff77;
}

.topnav a.active, .bottomnav a.active , .dropdown.active {
  background-color: #00008B;
  color: #ffff77;
}

.scrollBoxMenu {
  height: 90vh;
  overflow: auto;
  display: block;
}

.noStyle {
}

/* 
.active {
  background-color: #070;
  color: #ffff77;
}
 */

.dropbtn  {
  float: none;
}


.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    border: none;
    outline: none;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}


.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 {
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
/*     background-color: #ddd; */
      background-color: #0080ff;
	  color: #ffff77;
	  
	  
}

.dropdown:hover .dropdown-content {
    display: block;
 box-shadow: 0 8px 14px 0px rgba(0,0,0,0.5);
}

.dropdown-content, .dropdown-content a {
/*   	color: #464 ; */
  	color: #00008B;
}

.visible-on-click {
	display: block;
	box-shadow: 0 8px 14px 0px rgba(0,0,0,0.5);
}

.topnav .logo {
  display: none;
/* 
  width:2.3em ;
  height:auto ;
  float: left;
  padding: 0.15em 0.2em 0em 0.2em ; 
 */
}

.topnav.sticky .logo  {
  display: block;
  width:2.3em ;
  height:auto ;
  float: left;
  padding: 0.15em 0.2em 0em 0.3em ; 
}



.topnav .icon {
  display: none;
}


.side-menu {

	width: 170px;
/* 	border: 1px solid #cccccc; */
	margin: 1.5em 0 0;
	padding: 2em 0em 1em 0em;
/* 	background: #f5f5f5 none repeat scroll 0% 50%; */
	position: relative;
	text-align: left;
	font-size: small;

}

.side-menu ul {
padding: 1em 1em 1em 1em;

/* 
  margin: 5px 0 0;
  padding: 3px 10px;
  overflow: hidden;
  background-color: #3c0;
 */

}

.side-menu ul li, .side-menu a {

	display: block;
	padding: 0.2em 0.3em 0.1em 0.3em;
	text-decoration: none;
	font-weight: bold;
	color: #00008B;
}


/* 
.side-menu a {
  border: 0px solid black;
  padding: 3px 10px 3px 8px;
  text-decoration: none;
  font-weight: bold;
  background-color: #3c0;
  color: white;
}
 */

.side-menu a:hover {
/*   background: #0080ff none repeat scroll 0% 50%; */
  color: #c40000;
  background: transparent;
/*   box-shadow: 0 0 15px rgba(0,0,0,0.2); */
/*   border-radius: 5px; */

}



.carousel-box {

	width: 100%;
/* 	height: 420px; */

	max-width: 100%;
/* 	max-height: 420px; */
	width: auto;
	height: auto;

	text-align: center;
}

.carousel-box img {
	max-width: 100%;
/* 	max-height: 420px; */
	max-height: 550px;
	width: auto;
	height: auto;
	margin: auto ;
}


.downloadbox {
	width: 90%;
/*   border: 1px solid #FF0000; */
  display:table;
  margin: auto;
  padding: 0em 0em 1em 0em;
}

.downloadsystem {
	width: 85px;
	float: left;
/*   border: 1px solid #00FF00; */
  display:table-cell;
  vertical-align:middle;
}

.downloadlinks {
	width: 100%;
/*   border: 1px solid #0000FF; */
  display:table-cell;
  vertical-align:middle;
}


/* 
.download-link {
background:transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA0MzMuNSA0MzMuNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDMzLjUgNDMzLjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48ZyBpZD0iZmlsZS1kb3dubG9hZCI+PHBhdGggZD0iTTM5NS4yNSwxNTNoLTEwMlYwaC0xNTN2MTUzaC0xMDJsMTc4LjUsMTc4LjVMMzk1LjI1LDE1M3ogTTM4LjI1LDM4Mi41djUxaDM1N3YtNTFIMzguMjV6IiBmaWxsPSIjMDA2NjAwIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=") 
no-repeat scroll 96% 50% / 18px 18px;
font-size:100%;
font-family:Roboto, Arial, sans-serif;
font-weight: bold;
text-decoration:none;
color:#006600;
display:inline-block;
padding:4px 38px 4px 12px;
border-radius: 1px;
border: 1px solid #cccccc;
opacity:0.9 ;
cursor:pointer
}

.download-link-aux {
display:inline-block;
font-size: smaller;
padding:6px 38px 6px 12px;
}

.download-link:hover {
	background:#070 url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA0MzMuNSA0MzMuNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDMzLjUgNDMzLjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48ZyBpZD0iZmlsZS1kb3dubG9hZCI+PHBhdGggZD0iTTM5NS4yNSwxNTNoLTEwMlYwaC0xNTN2MTUzaC0xMDJsMTc4LjUsMTc4LjVMMzk1LjI1LDE1M3ogTTM4LjI1LDM4Mi41djUxaDM1N3YtNTFIMzguMjV6IiBmaWxsPSIjZmZmZjc3Ii8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=") 
	no-repeat scroll 96% 50% / 18px 18px;
	color:#ffff77;
}
 */


.download-link {
background-color: #0080ff;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDQzMy41IDQzMy41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MzMuNSA0MzMuNTsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICA8Zz4gICAgPGcgaWQ9ImZpbGUtZG93bmxvYWQiPiAgICAgIDxwYXRoIGQ9Ik0zOTUuMjUsMTUzaC0xMDJWMGgtMTUzdjE1M2gtMTAybDE3OC41LDE3OC41TDM5NS4yNSwxNTN6IE0zOC4yNSwzODIuNXY1MWgzNTd2LTUxSDM4LjI1eiIgc3R5bGU9ImZpbGw6IHJnYigyMzgsIDIzOCwgMjM4KTsiLz4gICAgPC9nPiAgPC9nPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPiAgPGcvPjwvc3ZnPg==");
background-repeat: no-repeat;
background-attachment: scroll;
background-position-x: 96%;
background-position-y: center;
background-size: 18px 18px;

font-size:100%;
font-family:Roboto, Arial, sans-serif;
font-weight: bold;
text-decoration:none;
color:#eee;
display:inline-block;
padding:7px 39px 7px 13px;
border-radius: 6px;
/* border: 1px solid #cccccc; */
opacity:0.9 ;
cursor:pointer
box-shadow: 0 0 8px rgba(0,0,0,0.3);
text-shadow: 0 -1px 0 #012102;
}

.download-link-aux {
display:inline-block;
font-size: smaller;
padding:7px 39px 7px 13px;
}

.download-link:hover {
background-color: #0075ea;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA0MzMuNSA0MzMuNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDMzLjUgNDMzLjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48ZyBpZD0iZmlsZS1kb3dubG9hZCI+PHBhdGggZD0iTTM5NS4yNSwxNTNoLTEwMlYwaC0xNTN2MTUzaC0xMDJsMTc4LjUsMTc4LjVMMzk1LjI1LDE1M3ogTTM4LjI1LDM4Mi41djUxaDM1N3YtNTFIMzguMjV6IiBmaWxsPSIjZmZmZjc3Ii8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=") ;

/* 	background:#0075ea url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA0MzMuNSA0MzMuNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDMzLjUgNDMzLjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48ZyBpZD0iZmlsZS1kb3dubG9hZCI+PHBhdGggZD0iTTM5NS4yNSwxNTNoLTEwMlYwaC0xNTN2MTUzaC0xMDJsMTc4LjUsMTc4LjVMMzk1LjI1LDE1M3ogTTM4LjI1LDM4Mi41djUxaDM1N3YtNTFIMzguMjV6IiBmaWxsPSIjZmZmZjc3Ii8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=")  */
/* 	no-repeat scroll 96% 50% / 18px 18px; */
	color:#ffff77;
	box-shadow: 0 0 8px rgba(0,0,0,0.5);
/* 	border: 1px solid #ba6204; */
}

.download-requrements {
display:inline-block;
font-size: smaller;
padding:7px 39px 7px 0px;
}




.buy-link, .buy-link-box {
font-size:125%;
font-family:Roboto, Arial, sans-serif;
font-weight: bold;
text-decoration:none;
text-align: center;
/* background:#070; */
/* background: #f57208; */
/* background: #f50832; */
/* background: #c40000; */
background: #0080ff;
color:#eee;
display:inline-block;
border-radius: 8px;
/* border: 1px solid #ccc; */
/* opacity:0.9 ; */
cursor:pointer;
box-shadow: 0 0 6px rgba(0,0,0,0.3);
text-shadow: 0 -1px 0 #012102;
}


.buy-link {
padding:8px 12px 8px 12px;
}

.buy-link-box {
width:100px;
padding:8px 0px 8px 0px;
}

.buy-link-aux {
display:inline-block;
font-size: smaller;
padding:10px 0px 10px 0px;
}

.buy-link:hover, .buy-link-box:hover {
/* 	background:#070 url("grafika/shopping-cart-white.svg") no-repeat scroll 96% 50% / 18px 18px; */
/* background:#006600; */
/* background: #f27603; */
/* background: #c40000; */
/* background: #f50832; */
/* background: #00008b; */
background: #0075ea;
color:#ffff77;
box-shadow: 0 0 8px rgba(0,0,0,0.5);
/* border: 1px solid #005700; */
/* border: 1px solid #ba6204; */
}

.main-text {
/* border: solid 1px #0f0; */
width: 69%;
float: left;
}

.aux-right-text {
/* border: solid 1px #00f; */
float: right;
width: 30%;
}

.aux-left-text {
/* border: solid 1px #00f; */
float: left;
/* width: 25%; */
width: 18%;
}

.main-text-right {
/* border: solid 1px #0f0; */
/* width: 72%; */
width: 80%;
float: right;
}


blockquote , .sideblock {

margin: 1.5em 0;
padding: 1.5em 2.0em 1em 2.5em;
line-height: 1.45;
position: relative;

background: #f7f9f7;

color: #383838;
border-radius: 8px;
border: 1px solid #ccc;
box-shadow: 0 0 6px rgba(0,0,0,0.2);

}

.sideblock {
text-align: center;
font-size: 0.9em;
padding: 2em 2.0em 2.5em 2.5em;
}

blockquote {
font-family: Georgia, serif;
font-size: 0.9em;
font-style: italic;

}

blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

blockquote cite {
color: #999999;
/* font-size: 14px; */
font-size: 1.0em;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "\2014 \2009";
}


.colored-gi, .colored-band, .whole-band, .dropdown-content, .whole-band-right {
/*     background-color: #3c04d; */
/*     background-color: #E5DED3; */
/*     background-color: #E7E1D6; */
/*     background-color: #E5DED4; */
/*     background-color: #E7E1D9; */
/*     background-color: #f7f1e9; */
/* background-color: #D0F0C6; */
/* background-color: #C6EAF9; */
/* background-color: #bce8f1 */
background-color: #d7edf9

}

.wide-band, .colored-band {

    margin: 1em -1em 0em -1em;
    padding: 1.5em 1.5em 1.5em 1.5em ;

}

.whole-band {
	margin: 1em -60% 0em -1em;
	padding: 1.5em 60% 1.5em 1.5em;
}

.whole-band-right {
	margin: 1em -1em 0em -42%;
	padding: 2.0em 1em 1.0em 42%;
}


/* 
.whole-band:before {
    content:"";
    background-color:#CCFFFF;
    position: absolute;
    height: 100%;
    width: 4000px;
    left: -2000px;
    z-index: -1;
}
 */

/* 
.whole-band:after {
    content:"";
    background-color:#CCFFFF;
    position: absolute;
    height: 100%;
    width: 4000px;
    left: -2000px;
    z-index: -1;
}
 */

#sidebar {
  margin: 0;
  padding: 1em 1em 1em 1em;
  width: 230px;
  overflow: hidden;
  float: left;
}
#sidebar ul {
  border:  none;
  margin: 0;
  padding: 0 0 10px;
}
#sidebar ul li {
  border:  none;
  margin: 0;
  padding: 0;
  font-weight: bold;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
}
#sidebar ul li.cp {
  padding: 3px;
  background: #0080ff none repeat scroll 0% 50%;
  display: block;
  width: 122px;
  color: #ffff77;
  text-indent: 10px;
  text-decoration: none;
}
#sidebar ul li a {
  padding: 3px;
  display: block;
  width: 122px;
  color: #00008b;
  text-indent: 10px;
  text-decoration: none;
}
#sidebar ul li a:hover {
  background: #33cc00 none repeat scroll 0% 50%;
  color: #ffffff;
}
#sidebar.curpage {
  background: #0080ff none repeat scroll 0% 50%;
  color: #ffffff;
}

div.mblock {
  margin: 5px 0 0;
  padding: 3px 10px;
  overflow: hidden;
  background-color: #0080ff;
  border-radius: 5px;
}
.cpmelement {
  border: 0px solid black;
  padding: 3px 10px 3px 8px;
  background: #00008b none repeat scroll 0% 50%;
  color: #ffff77;
  text-decoration: none;
  font-weight: bold;
}

@media screen and (max-width: 960px) {

.aux-left-text {
/* border: solid 1px #00f; */
width: 25%;
}

.main-text-right {
/* border: solid 1px #0f0; */
width: 72%;
}

}

/* @media screen and (max-width: 680px) { */
@media screen and (max-width: 800px) {

/*   body {background: green;} */

  #header div.pag  {display: none;}

  .buy-wrapper {text-align: center;}
  
  
.main-text, .aux-right-text {
/* border: solid 1px #00f; */
float: none;
width: 100%;
}
  
}



/* @media screen and (max-width: 640px) { */
@media screen and (max-width: 768px) {
  
/* body {background: red;} */
	
  .topnav a.active {display: block;}
  .topnav a {display: none;}

  .topnav .dropdown {display: none;}
  .topnav .dropdown.active {display: block;}
  
  .dropdown .dropbtn {
	  display: none;
  }
  
  
	.dropdown .dropbtn.active {display: block;}
  
  .bottomnav .dropdown {
  	display: block;
    float: none;
  	}

  .dropdown-content {
    position: relative;
  	display: block;
    }


/*   .topnav a:not(:first-child) {display: none;} */
  
  .topnav a.icon {
    float: right;
    display: block;
  }

	.bottomnav a  {
 	 float: none;
	}

.topnav {
/*   background-color: #672a25; */
  background-color: #0080ff;
}


/*   .topnav.responsive {position: relative;} */

  .topnav.responsive {
  	position: relative;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
	z-index: 9998;
	}

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

.topnav.responsive .logo  {
  display: none;
  width:2.3em ;
  height:auto ;
  float: left;
  padding: 0.15em 0.2em 0em 0.3em ; 
}


  .topnav.responsive a , .topnav.responsive .dropdown , .topnav.responsive .dropbtn {
    float: none;
    display: block;
    text-align: left;
  }
  
  
  #header div.pag  {display: none;}
  #header {
  background: #0080ff url("images/mazaika-logo-n-text-short.svg") no-repeat scroll 	45% 60%;
  background-size: 254px auto;
  }
  
  #header div.tl {
    display: none;
  }
  
  
  .whole-band {
    margin: 1em -1em 0em -1em;
    padding: 2.5em 1em 1.5em 1.5em;
  }

	#container {
    overflow: visible;
	}

#sidebar {
  width: 0px;
  display: none ;
}

.aux-left-text, .aux-right-text {
  width: 0px;
  display: none ;
}

.main-text-right {
  width: 100%;
}

div.mblock {
  display: none ;
}


}


#footer div.tl {
  padding: 0em 0em 1.0em 0em;
  height: 2em;
/*   font-size: 11px; */
  text-align: left;
  color: #ffffff;
}
#footer div.tr {
  padding: 0px;
  height: 1px;
  width: 1px;
  float: right;
  overflow: hidden;
}

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
/*   max-width: 100%;  */
  max-width: 90%;
  margin: auto;
} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}


#content {
/*   float: left; */
  overflow: hidden;
  padding: 1em;
}

h1, h2 {
/*   	color: #464 ; */
  	color: #c40000;
}

h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
/* 
  font-family: georgia;
  font-weight: normal;
 */
	font-family: "Verdana", "Geneva", "DejaVu Sans", "sans-serif";
	font-weight: bold;
	text-align: left;

}

h1 {
	margin: auto;
	clear: both;
	font-size: 2.0em;
	line-height: 1.3;
	padding: 1.1em 0.5em 1.1em 0.5em;
	text-align: center;
}

h2 {
/*   border-bottom: 1px solid #cccccc; */
  margin: 0px 0 10px;
/*   padding: 20px 0px 0px; */
/*   color: #c40000; */
/*   font-size: 20pt; */
  clear: both;
  	
	font-size: 1.6em;
	line-height: 1.3;
 	padding: 1.5em 0.5em 1.5em 0.5em
}
h3 {
  color: #333333;
  font-size: 14pt;
  margin-bottom: 1.5em;
  margin-top: 2em;
  line-height: 1.5;
}
h4 {
  margin: 0 0 10px;
  padding: 0;
  color: #333333;
  font-size: 14pt;
  text-align: right;
}

#content p {
  padding: 0em 1em 0em 1em;
  clear: none;
}

#content p.copyright, #content p.copyright-r {
    width: 100%;
    display: block;
    clear: none;
    margin: auto;
    font-size: small;
    padding: 1em 0em 1em 0em;
}

#content p.copyright {
    text-align: left;
}

#content p.copyright-r {
    text-align: right;
}


/* 
#content div.gi {
  border-top: 1px solid #c40000;
  margin: 0px 0 10px;
  padding: 1em 0px 0px;
  clear: both;
}
 */




#content div.gi {
/*     border-top: 1px solid #c40000; */
/*     margin: 0px -1em; */
    margin: 0em -1em 0em -1em;
    padding: 2.5em 1.5em 1.5em 1.5em ;
    clear: both;
/*     min-height: 460px; */
}


.table-container , .table-container-center {
display: table ;
margin: auto;
}
.table-container .table-column {
display: table-cell ;
padding: 1em;
}
.table-container {
vertical-align: top;
}
.table-row  {
/* display: table-cell ; */
    padding: 1em;
}

.download-register-button {
    margin: auto;
    text-align: center;
    padding: 1.5em 0em 1em 0em;
}

/* 
#content div.gi img {
  border-style: solid;
  border-color: #cccccc;
  border-width: 1px 2px 2px 1px;
  margin: 0px 1em 1em 0px;
  padding: 5px;
  background: #f5f5f5 none repeat scroll 0% 50%;
  float: left;
  text-align: center;
  font-size: 8pt;
}
 */

#content div.gi p {
  margin: 0;
  padding: 0em 0em 1em 0em;
  text-align: justify;
  clear: none;
}
#content p.blank {
  margin: 0;
  padding: 0 0 1em;
  clear: both;
}
#content div.subleft {
  margin: 0;
  padding: 0;
  width: 250px;
  float: left;
}
#content div.subright {
  margin: 0;
  padding: 0;
  width: 320px;
  float: right;
}

#content table {
text-align: left; 
width: 660px; 
margin: 10px 30px ;
}

#content table td {
  border: 0px solid #cccccc;
  margin: 10px;
  padding: 1px;
  text-align: left;
  border-collapse: collapse;
  font-family: georgia;
  font-size: 12pt;
}

@media screen and (max-width: 960px) {

#content table td {
    font-size: 10pt;
}

}


#content table.sell {
  border: 0px solid #cccccc;
  margin: 10px 0;
  padding: 0;
  text-align: center;
  border-collapse: collapse;
}
#content table.sell td {
  border: 1px solid #cccccc;
  padding: 1em;
  background: #f5f5f5 none repeat scroll 0% 50%;
}
#content table.tech {
  border: 0px solid #cccccc;
  margin: 0px auto 2.5em auto;
  padding: 0;
  text-align: center;
  border-collapse: collapse;
  width: 720px;
  max-width: 100%;
}
#content table.tech th {
  border: 1px solid #cccccc;
  padding: 5px;
  background: #00008b none repeat scroll 0% 50%;
  color: #f5f5f5;
}
#content table.tech td {
  border: 1px solid #cccccc;
  padding: 1em;
  background: #f5f5f5 none repeat scroll 0% 50%;
}
#content table.tech td.center {
  background: #f5f5f5 none repeat scroll 0% 50%;
  text-align: center;
}
#content table.tech td.left {
  background: #f5f5f5 none repeat scroll 0% 50%;
  text-align: left;
}
#photos {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  margin: 10px auto;
  padding: 10px;
  background: #e5edf5 none repeat scroll 0% 50%;
  width: 428px;
  height: 224px;
  position: relative;
}
.imgbox {
  border: 1px solid #45458b;
  margin: 15px;
  background: #f1f1f1 none repeat scroll 0% 50%;
  width: 75px;
  height: 75px;
  float: left;
  display: inline;
}

.widget {
	width: 170px;
/* 	border: 1px solid #cccccc; */
	margin: 1.5em 0 0;
	padding: 2em 0em 1em 0em;
	background: #f5f5f5 none repeat scroll 0% 50%;
	position: relative;
	text-align: center;
	font-size: small;
}
.widget img {
  border:  none;
  margin: 0 0 5px;
}
.zoomi {
  border: 1px solid #cccccc;
  margin: 2em 0;
  padding: 10px 5px;
  background: #f5f5f5 none repeat scroll 0% 50%;
  text-align: center;
  font-size: 8pt;
}
.zoomi p {
  border:  none;
  margin: 10px 0 0;
  padding: 0;
  clear: both;
  font-size: 8pt;
}
.zoomi p.copyr {
  border:  none;
  margin: 10px;
  padding: 0;
  clear: both;
  text-align: right;
  font-size: 7pt;
}
.zoomi p.tool {
  border:  none;
  margin: 10px 30px 5px;
  padding: 0;
  clear: both;
  text-align: center;
  font-size: 7pt;
}
.screenshot {
  border-style: none;
  border-color: #cccccc;
  border-width: 1px 2px 2px 1px;
  margin: 0px 0 10px 10px;
  padding: 5px;
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: 0% 50%;
  clear: both;
  float: right;
  text-align: center;
  font-size: 8pt;
}
.screenshotl {
  border-style: solid;
  border-color: #cccccc;
  border-width: 1px 2px 2px 1px;
  margin: 0px 10px 0 0;
  padding: 5px;
  background: #f5f5f5 none repeat scroll 0% 50%;
  clear: both;
  float: left;
  text-align: center;
  font-size: 8pt;
}
.photoframe {
  border:  none;
  margin: 0px 0 10px 10px;
  padding: 5px;
  clear: both;
  float: right;
  font-size: 8pt;
}
.noborder {
  border:  none;
  margin: 0px 0 10px 10px;
  padding: 0;
  clear: both;
  float: right;
  text-align: center;
  font-size: 8pt;
}
.noborderl {
  border:  none;
  margin: 0px 10px 10px 0;
  padding: 0;
  clear: both;
  float: left;
  text-align: center;
  font-size: 8pt;
}
.prodmenu {
  border:  none;
  padding: 0px 10px;
}
.sellitem {
}
.proditem {
  border: 1px solid #cccccc;
  margin: 0 5px 0 0;
  padding: 3px;
  background: #f5f5f5 none repeat scroll 0% 50%;
  width: 90px;
  float: left;
  overflow: hidden;
  text-align: center;
}
.proditem img {
  border:  none;
}
.proditem p {
  margin: 0;
  padding: 0;
  font-size: 9pt;
  font-weight: bold;
  clear: both;
  color: #00008b;
}
.proditem a {
  border:  none;
  display: block;
  text-decoration: none;
}
.proditem a:hover {
}
.usersaid {
  margin: 0em 0em 0em 0em;
  padding: 1em 1em;
/*   font-size: 8pt; */
  clear: both;
/*   float: right; */
  position: relative;
}
.usersaid p {
  margin: 2em 1em 0em 0em;
  clear: both;
}
.usersaid p.title {
  margin: 0em;
  padding: 0em;
  font-weight: bold;
  clear: both;
}
.usersaid p.capt {
  margin: 0em;
  padding: 0em;
  font-style: italic;
  font-family: georgia;
  text-align: right;
  clear: both;
}
.antigluk {
  font-size: 3px;
  height: 1px;
}
.watsnew {
/*   border: 1px solid #cccccc; */
  border: none;
  margin: 1em 1em 0em 3em;
  padding: 1em 2em;
  background: #f5f5f5 none repeat scroll 0% 50%;
/*   font-size: 8pt; */
  clear: both;
  float: right;
  line-height: 1.7em;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  border-radius: 5px;
}
.watsnew span.date {
  font-weight: bold;
}
#footer {
  border-top: 1px none #000000;
  margin: 0px;
  padding: 1.5em 1.5em 7.5em 1.5em;
  background: #00008B none repeat scroll 0% 50%;
  clear: both;
  color: #ffffff;
/*   font-size: 8pt; */
  font-size: 0.8em;
  text-align: center;
  height: 4em;
}
#header div a {
  color: #ffffff;
  text-decoration: none;
}
#header div a:hover {
/*   background: #3c0 none repeat scroll 0% 50%; */
  background: transparent;
  color: #ffff00;
}
#footer div a {
  color: #ffffff;
  text-decoration: none;
}
#footer div a:hover {
  background: transparent;
  color: #ffff00;
}
#content h2 a, h1 a {
/*   color: #070;; */
  color: #c40000;
  text-decoration: none;
}
#content h2 a:hover, h1 a:hover {
/*   color: #070;; */
  color: #c40000;
  text-decoration: underline;
}


.clearer {
  clear: both;
}
#content div.dlby {
  margin: 0;
  padding: 0px 0px 5px;
  width: 250px;
  float: right;
  overflow: hidden;
}
#content a.dlbyitem {
  border: 1px solid #cccccc;
  margin: 0 0 0 10px;
  padding: 3px 10px 3px 8px;
  background: #f5f5f5 none repeat scroll 0% 50%;
  text-align: center;
  color: #006600;
  text-decoration: none;
  font-weight: bold;
  float: right;
}
#content a.dlbyitem:hover {
/*  background: #ffff77 none repeat scroll 0% 50%; */
  background: #070 none repeat scroll 0% 50%;
  color: #ffff77;
}
a {
  color: #333333;
}
a:hover {
/*  background: #e5ffe5 none repeat scroll 0% 50%; */
/*   background: #f7f1e9 none repeat scroll 0% 50%; */
/*   background: #f4fff4 none repeat scroll 0% 50%; */

  color: #c40000;
  background: transparent;
 
  
}

a.melement {
  border: 0px solid black;
  padding: 3px 10px 3px 8px;
  text-decoration: none;
  font-weight: bold;
  background-color: #0080ff;
  color: white;
}
a.melement:hover {
  background: #00008b none repeat scroll 0% 50%;
  color: #ffff77;
}

#content div.ug {
border-top: 1px solid #cccccc;
margin: 0px 0 10px;
padding: 10px 0px 0px;
clear: both;
}
#content div.ugbox {
border-style: solid;
border-color: #cccccc;
border-width: 1px 2px 2px 1px;
margin: 0 10px 0 0;
padding: 3px;
background: #99ff99 none repeat scroll 0% 50%;
width: 130px;
float: left;
text-align: center;
font-size: 8pt;
}
#content div.ugbox img {
border: none;
margin: 0px;
}
#content div.ugrbox {
margin: 0 0 10px 10px;
padding: 3px;
float: right;
text-align: center;
font-size: 8pt;
}

#content div.ugrbox img {
border: 0px solid ;
}

#content div.fi {
border-top: 1px solid #cccccc;
margin: 20px 0 10px;
padding: 0em 0px 0px;
clear: both;
}
#content div.fi img {
border-color: #cc00cc;
border-width: 1px 0 0;
border-top: 1px solid #cccccc;
margin: 0px 0 10px;
padding: 1em 0px 0px;
clear: both;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
/*   max-width: 960px; */
  max-width: 1200px;
  overflow: visible;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.stickedcontent {
/*   padding-top: 160px; */
  padding: 2.8em 1em 1em 1em ;
}

.contentbody {
	padding: 1em;
}

@media screen and (max-width: 320px) {

 .logo  {
  display: none;
 }
 
 .topnav.sticky .logo{
  display: none;
 }
 
}


.wide-responsive {
  max-width: 100%;
  height: auto;
}


#header div.socbutton {
	height:30px;
/* 	padding:3px; */
}

#footer div.socbutton {
	height:30px;
/* 	padding:3px; */
	float: right;
}


.fb-logo {
	background:url(img/fb.png);
	background-size: 28px 28px;
}



.yt-logo {
	background:url(img/yt.png);
	background-size: 28px 28px;
}




.fb-logo, .yt-logo {
	margin: 0.5em 0.5em 0 0 ;
	width: 28px;
	height: 28px;
	cursor:pointer;
	display:inline-block;
	float: right;
    
	-webkit-transition: 0.1s ease-in-out;
	-moz-transition: 0.1s ease-in-out;
	-o-transition: 0.1s ease-in-out;
	transition: 0.1s ease-in-out;

}



.fb-logo:hover {

	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
    -o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}



.yt-logo:hover  {

	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
    -o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}


#goTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgba(151, 214, 242, 0.5);  
  box-shadow: 0px 0px 5px rgba(0,0,0,0.4);

  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#goTopBtn:hover {
/*   background-color: #555; */
/*   background-color: rgba(0,0,139, 0.9); */
  background-color: #0080ff ;
  color: #ffff77;

}

.slider-super-container {
min-height: 420px;
/*   border: 1px solid #cccccc; */
}

.video-super-container {
	padding:1em;
	max-width: 792px;
	margin: 0px auto;
}

@media screen and (max-width: 960px) {

.video-super-container {
	padding: 1em;
	max-width: 792px;
	margin: 0px auto;
}

}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.top-align {
vertical-align: top;
}
.top-margin {
margin-top: 3.5em;
}
.bottom-margin {
    margin-bottom: 3.5em;
}
.red-text {
color: #c40000;
}
.scarlet-text {
color: #F00;
}
.big-text {
font-size: x-large;
}
.medium-text {
font-size: medium;
}
.with-shadow {
-webkit-filter: drop-shadow( 0px 0px 4px rgba(0, 0, 0, .2));
filter: drop-shadow( 0px 0px 4px rgba(0, 0, 0, .2));
}
.with-shadow:hover {
-webkit-filter: drop-shadow( 0px 0px 9px rgba(0, 0, 0, .3));
filter: drop-shadow( 0px 0px 9px rgba(0, 0, 0, .3));
}


.with-box-shadow {
 box-shadow: 0 0 10px rgba(0,0,0,0.2);
 -webkit-transition: 0.2s ease-in-out;
 -moz-transition: 0.2s ease-in-out;
 -o-transition: 0.2s ease-in-out;
 transition: 0.2s ease-in-out;
 }	
 .with-box-shadow:hover {
 box-shadow: 0 0 8px rgba(0,0,0,0.4);
 }


.helpitem, .box-item, .library-item {
background:#f5f5f5;
overflow:hidden;
border-radius: 5px;
text-align:center;

box-shadow: 0 0 8px rgba(0,0,0,0.2);
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
}

.helpitem:hover, .box-item:hover, .library-item:hover, .widget:hover {
box-shadow: 0 0 8px rgba(0,0,0,0.4);
/* -webkit-transform: scale(1.01); */
/* -moz-transform: scale(1.01); */
/* -o-transform: scale(1.01); */
/* -ms-transform: scale(1.01); */
/* transform: scale(1.01); */
}


.helpitem{
/* 	border:1px solid #ccc; */
	width:122px;
	height: 102px;
	padding: 9px 2px 0px 2px;
	margin: 0em 0.5em 1em 0em ;
	display: inline-block;
	
}

.library-item {
display: inline-block;
display: inline-table;
vertical-align: top;
width: 262px;
padding: 1em;
/*  border:1px solid rgba(0,0,0,0.2); */
font-size:10pt;
margin:0.5em 0.5em 0.5em 0.5em;
}	

.box-item {
cursor: pointer;
clear: both;
/*  border:1px solid rgba(0,0,0,0.2); */
font-size:10pt;
margin:0em 0 3em 0;
}	

.library-item img {
margin-top: 1em;
margin-bottom: 1em;
}

.library-title {
font-weight: bold;
}

.library-body {
text-align: justify;
}

.library-super-box {
text-align: center;
}

 .download-item {
 /*  cursor: pointer; */
 clear: both;
 background:#f5f5f5;
 border-radius: 8px;
 margin:0em 0 4em 0;
 box-shadow: 0 0 10px rgba(0,0,0,0.2);
 -webkit-transition: 0.2s ease-in-out;
 -moz-transition: 0.2s ease-in-out;
 -o-transition: 0.2s ease-in-out;
 transition: 0.2s ease-in-out;
 overflow:hidden;
 }	
 .download-item:hover {
 box-shadow: 0 0 8px rgba(0,0,0,0.4);
 }
 .wfline {
 margin:1.5em 0 1em 0;
 }
 .download-item img {
 float: right;
 margin: 0.5em 1em 0em 0em;
 }
 .download-item .download-name {
 float: left;
 position: relative;
 width: 70%;
 }
 .download-item h3 {
 margin: 1em 0em 0em 2em;
 }
 .program-selector {
 text-align: right ; 
 margin: 1em 0em 2em 0em;
 }
 select {
 font-size: 11pt;
 color: #555;
 }
 .download_links {
 display: block;
 float: none;
 position: relative;
 width: 100%;
 clear: both;
 }
 .download_aux {
 margin: 1em 0em 2em 3em;
 }
 @media screen and (max-width: 460px) {
 .program-selector {
 text-align: center ; 
 }
 }

.special-offer, .special-offer-box{
background: url('images/offer.svg');
background-size: 222px 222px;
background-position: bottom -55px right -64px;
background-repeat: no-repeat;
}

.special-offer-box {
cursor: default;
margin: auto;
width: 80%;
padding: 2em;
border-radius: 10px;
}

.special-offer-box h3{
margin-top: 0em;
}

.special-offer-box p{
margin-top: 0em;
text-align: left;
font-size: large;
line-height: 1.5em;
}

.shadow1text {
 text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;
}

.external {
    background-position: center right;
    background-repeat: no-repeat;
    background-image: url(images/external-link-icon.png);
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E %3Cpath fill=%22%23fff%22 stroke=%22%23777%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E %3Cpath fill=%22%23777%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E %3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E %3C/svg%3E");
    padding-right: 13px;
}