@font-face {
    font-family: 'Conv_MICROGBE';
    src: url('fonts/MICROGBE.eot');
    src: local('☺'),
    url('fonts/MICROGBE.woff') format('woff'),
    url('fonts/MICROGBE.ttf') format('truetype'),
    url('fonts/MICROGBE.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
    font-family: 'Conv_MICROGME';
    src: url('fonts/MICROGME.eot');
    src: local('☺'),
    url('fonts/MICROGME.woff') format('woff'),
    url('fonts/MICROGME.ttf') format('truetype'),
    url('fonts/MICROGME.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/
a:link, a:active, a:visited, a:hover {
    color: rgb(64,128,216);
    font-weight: bold;
    text-decoration: none;
    }
header a:link, header a:active, header a:visited, header a:hover {
    color: rgb(255,255,255);
    text-decoration: none;
    }
.extras a:link, .extras a:active, .extras a:visited, .extras a:hover {
    color: rgba(0,0,0,0);
    font-weight: normal;
    text-decoration: none;
    }
body {
    background: rgb(250,250,235);
    font-family: Arial, sans-serif;
    margin: 0;
}
/*
video {
    display: block;
	  height: auto;
	  margin: 2em auto 0 auto;
	  width: 90%;
}
*/
.icontain {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 2em auto 0 auto;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

h2 {
    font-family: Conv_MICROGBE;
    text-align: center;
}
p, li {
    line-height: 1.5em;
    }
header, footer {
    background: rgb(24,24,24);
    background-image: url("grill.png");
    background-position: center;
    background-repeat: repeat-y;
    background-size: 100% 10%;
    color: rgb(255,255,255);
    padding: .5em;
    text-align: center;
}
header h1 {
    font-family: Conv_MICROGBE;
    font-size: 2.5em;
    margin: 0;
}
header .button {
    display: inline-block;
    font-weight: bold;
    margin: 1em;
    overflow: visible;
}
header .button div {
    border-radius: .25em;
    display: inline-block;
    height: 1.5em;
    margin: 0;
    width: 8em;
}
header .button div p { margin: 0; }
#btnDemo {background: rgb(64,128,216)}
#btnDown {background: rgb(0,192,192)}
#btnBuyy {background: rgb(255,224,0)}
#btnXtra {background: rgb(176,160,160)}
header p { margin: 0; text-align: center; }
section, .container {
    display: block;
    margin: 0 auto;
    max-width: 50em;
    padding: 0 .5em;
}
.demo table {
    border-collapse: collapse;
    width: 100%;
}
.demo table thead {
    background: rgb(0,0,0);
    color: rgb(255,255,255);
}
.demo table td {
    border: 1px solid black;
    padding: .5em;
}
.demo table td:last-of-type {
    text-align: left;
}
.download ul {
    list-style: none;
    padding-left: 1em;
    text-align: left;
}
.download ul li span strong { font-size: larger; }
.download ul li:last-of-type { padding-top: .5em; }
.col { column-count: 3; }
#extras {
    background: rgb(225,220,220);
    background-image: url("bendBG.jpg");
    background-position: center;
    background-size: cover;
    padding: .5em 0 2em 0;
    text-align: center;
}
.extras div {
    background: rgba(0,0,0,0.75);
    color: rgb(255,255,255);
    display:inline-block;
    margin-top: 1em;
    overflow: visible;
    padding: .5em;
    text-align: left;
    width: 75%;
}
.extras img { float: left; margin-right: .75em; }
.extras div p { margin: 0; }
footer p { text-align: center; }
footer img { padding-bottom: 1em; }

@media screen and (max-width: 767px) {
    .wrapper { margin: 0 auto; max-width: 480px; }
}
@media screen and (max-width: 548px) {
    .extras div { width: 90%; }
    .extras p { font-size: .8em; }
}
@media screen and (max-width: 348px) {
    header h1 { font-size: 2em; }
}
@media screen and (max-width: 720px) {
    .col { column-count: 2; }
}
@media screen and (max-width: 500px) {
    .col { column-count: 1; padding: 0 2em; }
}