@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic);
/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent; }

article, aside, figure, footer, header, nav, section, details, summary {
  display: block; }

/* Handle box-sizing while better addressing child elements: 
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%; }

/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll; }

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

th {
  font-weight: bold;
  vertical-align: bottom; }

td {
  font-weight: normal;
  vertical-align: top; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */ }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom; }

.ie7 input[type="checkbox"] {
  vertical-align: baseline; }

.ie6 input {
  vertical-align: text-bottom; }

select, input, textarea {
  font: 99% sans-serif; }

table {
  font-size: inherit;
  font: 100%; }

small {
  font-size: 85%; }

strong {
  font-weight: bold; }

td, td img {
  vertical-align: top; }

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif; }

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0; }

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible; }

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover 
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before, .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

/*

 MAIN

*/
html, body {
  height: 100%;
  color: #545B73; }

html {
  font: 15px 'Roboto', sans-serif;
  line-height: 1.5; }

input, button, select, textarea {
  font: 15px 'Roboto', sans-serif;
  line-height: 1.5; }

body > img {
  position: absolute; }

::-moz-selection {
  background-color: #42A5F5;
  color: #fff; }

::selection {
  background-color: #42A5F5;
  color: #fff; }

a, a:visited {
  color: #1BB0BF; }

.vertical-cont {
  display: table;
  width: 100%;
  height: 100%; }
  .vertical-cont > .vertical-wrapp {
    display: table-cell;
    vertical-align: middle; }

section {
  background: #fff; }
  section.grey {
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    background: #F2F2F2; }
  section h2 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 40px; }

.wrapp {
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px; }
  .wrapp:after {
    content: " ";
    display: block;
    clear: both; }

footer .wrapp, section .wrapp {
  padding-top: 40px;
  padding-bottom: 40px; }

.btn, .btn:visited {
  text-decoration: none;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.4em;
  width: 100%;
  max-width: 280px;
  color: #fff;
  background: #1BB0BF;
  padding: 15px;
  display: block;
  text-align: center;
  border: none;
  -webkit-transition: background 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  -moz-transition: background 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
  transition: background 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out; }
  .btn:hover, .btn:visited:hover {
    background: #1ec5d5;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
  .btn > i, .btn:visited > i {
    margin-right: 5px; }

pre {
  background: #fff;
  padding: 20px;
  margin: 5px 0;
  border-radius: 3px;
  -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
  transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out; }
  pre:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
    color: inherit; }

/*

 FLAGS

*/
*[class|="flag"] {
  display: inline-block;
  width: 23px;
  height: 15px;
  margin-right: 3px;
  margin-bottom: -2px;
  background-repeat: no-repeat; }

.flag-en {
  background-image: url("../images/flags/en.png"); }

.flag-de {
  background-image: url("../images/flags/de.png"); }

.flag-es {
  background-image: url("../images/flags/es.png"); }

.flag-br {
  background-image: url("../images/flags/br.png"); }

.flag-fr {
  background-image: url("../images/flags/fr.png"); }

.flag-it {
  background-image: url("../images/flags/it.png"); }

.flag-dt {
  background-image: url("../images/flags/dt.png"); }

.flag-ru {
  background-image: url("../images/flags/ru.png"); }

.flag-se {
  background-image: url("../images/flags/se.png"); }

.flag-ja {
  background-image: url("../images/flags/ja.png"); }

/*

 HEADER

*/
header {
  position: fixed;
  background: #fff;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  z-index: 999;
  border-bottom: 1px solid #E5E5E5; }
  header a, header a:visited {
    color: inherit;
    text-decoration: none; }
  header .logo {
    font-size: 1.6em;
    height: 70px;
    line-height: 70px;
    float: left; }
    header .logo > a {
      display: block; }
    header .logo img {
      display: inline-block;
      width: 55px;
      vertical-align: middle; }
    header .logo h2 {
      display: inline-block;
      color: #1BB0BF;
      margin-left: 10px; }
      header .logo h2 span {
        color: #00374B;
        margin: 0 -4px; }
  header > div > ul {
    float: right;
    height: 70px;
    line-height: 70px;
    margin: 0 10px;
    font-size: 1.1em; }
    header > div > ul > li {
      position: relative;
      display: inline-block; }
      header > div > ul > li > a, header > div > ul > li > a:visited {
        display: block;
        color: #545B73;
        padding: 0 8px;
        -webkit-transition: color 300ms ease-in-out;
        -moz-transition: color 300ms ease-in-out;
        transition: color 300ms ease-in-out; }
        header > div > ul > li > a:after, header > div > ul > li > a:visited:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 0;
          height: 2px;
          background: transparent;
          -webkit-transition: background 300ms ease-in-out, width 300ms ease-in-out, left 300ms ease-in-out;
          -moz-transition: background 300ms ease-in-out, width 300ms ease-in-out, left 300ms ease-in-out;
          transition: background 300ms ease-in-out, width 300ms ease-in-out, left 300ms ease-in-out; }
        header > div > ul > li > a.btn, header > div > ul > li > a:visited.btn {
          position: relative;
          font-size: inherit;
          margin: 0 auto;
          padding: 0 15px;
          line-height: 45px; }
          header > div > ul > li > a.btn:after, header > div > ul > li > a:visited.btn:after {
            content: none; }
      header > div > ul > li:hover > a, header > div > ul > li:hover > a:visited {
        color: #1BB0BF; }
        header > div > ul > li:hover > a.btn, header > div > ul > li:hover > a:visited.btn {
          color: #fff; }
        header > div > ul > li:hover > a:after, header > div > ul > li:hover > a:visited:after {
          left: 0;
          width: 100%;
          background: #1BB0BF; }
      header > div > ul > li > div {
        position: absolute;
        visibility: hidden;
        top: 100%;
        right: 0;
        width: 150px;
        opacity: 0;
        background: #fff;
        border-radius: 3px;
        margin-top: 10px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        -moz-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -moz-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
        header > div > ul > li > div:before {
          content: '';
          position: absolute;
          height: 10px;
          top: -10px;
          left: 0;
          right: 0; }
        header > div > ul > li > div .col6 {
          display: block;
          float: left;
          vertical-align: top;
          width: 50%;
          padding-left: 12px; }
        header > div > ul > li > div ul > li {
          line-height: 1; }
          header > div > ul > li > div ul > li a, header > div > ul > li > div ul > li a:visited {
            display: block;
            color: #545B73;
            height: 30px;
            line-height: 30px;
            -webkit-transition: color 300ms ease-in-out;
            -moz-transition: color 300ms ease-in-out;
            transition: color 300ms ease-in-out; }
          header > div > ul > li > div ul > li:hover > a, header > div > ul > li > div ul > li:hover > a:visited {
            color: #1BB0BF; }
      header > div > ul > li:hover > div {
        visibility: visible;
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
  header .wrapp > input,
  header .wrapp > label {
    display: none; }
  header .wrapp > label {
    position: absolute;
    text-align: center;
    font-size: 2rem;
    line-height: 70px;
    width: 70px;
    top: 0;
    right: 0; }
  @media screen and (max-width: 790px) {
    header {
      max-height: 100%;
      height: auto;
      box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }
      header .wrapp > label {
        display: block; }
      header .wrapp > ul {
        display: none;
        text-align: center;
        top: 100%;
        width: 100%;
        background: #FFF;
        height: auto;
        margin: 0;
        padding: 0 10px; }
        header .wrapp > ul:after {
          content: '';
          display: block; }
        header .wrapp > ul > li {
          display: block; }
          header .wrapp > ul > li.drop {
            margin-bottom: 175px; }
          header .wrapp > ul > li > div {
            visibility: visible;
            opacity: 1;
            width: 100%;
            box-shadow: none;
            padding-bottom: 10px;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1); }
      header .wrapp > input:checked ~ ul {
        display: block; }
      header .wrapp > label > span {
        position: relative;
        transform: translate(0, 0);
        vertical-align: middle; }
        header .wrapp > label > span, header .wrapp > label > span:before, header .wrapp > label > span:after {
          display: inline-block;
          width: 2rem;
          height: 0.33333rem;
          border-radius: 0.16667rem;
          background: #00374B;
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          transition: 0.3s; }
        header .wrapp > label > span:before, header .wrapp > label > span:after {
          position: absolute;
          left: 0;
          content: '';
          -webkit-transform-origin: 0.14286rem center;
          transform-origin: 0.14286rem center; }
        header .wrapp > label > span:before {
          top: 0.66667rem; }
        header .wrapp > label > span:after {
          top: -0.66667rem; }
      header .wrapp > label:hover > span:before {
        top: 0.8rem; }
      header .wrapp > label:hover > span:after {
        top: -0.8rem; }
      header .wrapp > input:checked ~ label > span {
        background: transparent; }
        header .wrapp > input:checked ~ label > span:before, header .wrapp > input:checked ~ label > span:after {
          -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          top: 0;
          width: 2rem; }
        header .wrapp > input:checked ~ label > span:before {
          -webkit-transform: rotate3d(0, 0, 1, 45deg);
          -moz-transform: rotate3d(0, 0, 1, 45deg);
          -ms-transform: rotate3d(0, 0, 1, 45deg);
          -o-transform: rotate3d(0, 0, 1, 45deg);
          transform: rotate3d(0, 0, 1, 45deg); }
        header .wrapp > input:checked ~ label > span:after {
          -webkit-transform: rotate3d(0, 0, 1, -45deg);
          -moz-transform: rotate3d(0, 0, 1, -45deg);
          -ms-transform: rotate3d(0, 0, 1, -45deg);
          -o-transform: rotate3d(0, 0, 1, -45deg);
          transform: rotate3d(0, 0, 1, -45deg); } }

/*

 HERO

*/
#hero {
  padding-top: 70px;
  height: 100%;
  width: 100%; }

.no-js #hero,
#hero.small {
  height: auto; }

#hero {
  display: table; }
  #hero .text {
    width: 33.33333%;
    float: left;
    text-align: center;
    padding-left: 20px; }
    #hero .text .btn {
      max-width: none; }
    #hero .text h2 {
      font-size: 2.6em;
      margin-bottom: 20px; }
    #hero .text p {
      font-size: 1.2em; }
  #hero .video {
    width: 66.66667%;
    float: left; }
    #hero .video .video-wrap {
      position: relative;
      padding-top: 56.25%; }
      #hero .video .video-wrap > video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
  @media screen and (max-width: 790px) {
    #hero .text {
      padding-left: 0; }
      #hero .text .btn {
        max-width: 300px; }
    #hero .text, #hero .video {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; }
    #hero .text h2 {
      margin-top: 20px; } }

/*

 FEATURES

*/
#features .feature {
  width: 25%;
  float: left;
  padding: 20px;
  text-align: center;
  border-radius: 3px;
  -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
  transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out; }
  @media screen and (max-width: 790px) {
    #features .feature {
      width: 50%;
      float: left; } }
  @media screen and (max-width: 550px) {
    #features .feature {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; } }
  #features .feature:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #1BB0BF; }
  #features .feature i {
    font-size: 3em; }
  #features .feature img {
    max-width: 100px; }
  #features .feature h3 {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 10px; }
  #features .feature img + h3 {
    margin-top: 0; }

/*

 SUPPORTS

*/
#supports .item {
  width: 20%;
  float: left;
  padding: 20px;
  text-align: center;
  border-radius: 3px;
  -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
  transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out; }
  @media screen and (max-width: 790px) {
    #supports .item {
      width: 50%;
      float: left; } }
  @media screen and (max-width: 550px) {
    #supports .item {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; } }
  #supports .item:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #1BB0BF; }
  #supports .item i {
    font-size: 3em; }
  #supports .item img {
    max-width: 100px; }
  #supports .item h3 {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 10px; }
  #supports .item img + h3 {
    margin-top: 0; }
#supports h2 {
  margin-top: 40px; }
#supports .browsers h2 {
  margin-top: 0; }
#supports .formats {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto; }
  #supports .formats:after {
    content: " ";
    display: block;
    clear: both; }
  #supports .formats .item {
    width: 33.33333%;
    float: left; }
    @media screen and (max-width: 550px) {
      #supports .formats .item {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-right: 0; } }

/*

 OVERVIEW

*/
#overview p {
  font-size: 1.1em; }
#overview .left {
  width: 33.33333%;
  float: left; }
#overview .right {
  width: 66.66667%;
  float: left;
  padding: 0 20px;
  text-align: center; }
  #overview .right img {
    max-width: 200px;
    width: 100%; }
  #overview .right span {
    display: block; }
  #overview .right > a {
    width: 33.33333%;
    float: left;
    border-radius: 3px;
    -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
    transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
    font-size: 1.1em;
    padding: 15px;
    padding-bottom: 0; }
    #overview .right > a:hover {
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      background: #fff;
      color: inherit; }
@media screen and (max-width: 850px) {
  #overview .left, #overview .right {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    margin-top: 10px; } }
@media screen and (max-width: 550px) {
  #overview .right > a {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0; } }

/*

 WHATS NEW + FAQ Accordions

*/
.accordion {
  border-radius: 3px;
  -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
  transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
  font-size: 1.1em;
  padding: 20px;
  cursor: pointer; }
  .accordion:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
    color: inherit; }
  .accordion .title {
    display: block;
    color: #1BB0BF; }
  .accordion .text {
    display: none;
    margin-top: 10px; }
    .accordion .text.show {
      display: block; }

.no-js .accordion:hover .text {
  display: block; }

/*

 HOW TO USE

*/
#howtouse h3 {
  font-size: 1.3em;
  color: #1BB0BF;
  margin-top: 30px;
  margin-bottom: 5px; }
#howtouse p {
  font-size: 1.1em; }
#howtouse video {
  display: block;
  margin: 0 auto; }
#howtouse img {
  display: block;
  margin: 10px auto; }

/*

 QUESTIONS

*/
.questions {
  margin-bottom: 30px; }
  .questions::after {
    clear: both;
    content: "";
    display: table; }
  .questions > a {
    border-radius: 3px;
    -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
    transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
    font-size: 1.2em;
    text-align: center;
    padding: 20px;
    color: inherit;
    text-decoration: none; }
    .questions > a:hover {
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      background: #fff;
      color: #1BB0BF; }
  .questions.col-2 > a {
    width: 50%;
    float: left; }
  .questions.col-3 > a {
    width: 33.33333%;
    float: left; }
  .questions.col-4 > a {
    width: 25%;
    float: left; }

/*

 DOWNLOAD

*/
#download p {
  font-size: 1.1em; }
#download .buttons {
  text-align: center; }
  #download .buttons .btn {
    display: inline-block;
    max-width: 370px;
    width: 100%; }
    #download .buttons .btn em {
      color: #0b494f; }

/*

 DOWNLOAD PAGE

*/
#downloadPage {
  text-align: center; }
  #downloadPage a.btn {
    margin-bottom: 20px;
    padding: 8px 0;
    width: 170px;
    background: #EAE7E7;
    color: inherit; }
  #downloadPage p {
    font-size: 1.1em; }
  #downloadPage form {
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: left;
    border-radius: 3px;
    -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
    transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out; }
    #downloadPage form {
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      background: #fff;
      color: inherit; }
    #downloadPage form label {
      display: block;
      margin-top: 10px; }
    #downloadPage form input {
      display: block;
      width: 100%;
      padding: 12px 15px;
      border: none;
      background: #F0F0F0;
      border-radius: 3px;
      border: 1px solid #DFDFDF; }

#downloadDialog {
  border-radius: 3px;
  -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
  transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
  display: none;
  position: fixed;
  font-size: 1.3em;
  padding: 20px;
  top: 70px;
  left: 50%;
  width: 100%;
  max-width: 550px;
  background: #fff;
  margin-left: -275px;
  text-align: center; }
  #downloadDialog {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
    color: inherit; }
  #downloadDialog .jqmTitle {
    font-size: 2em;
    line-height: 2em;
    color: #f44336; }
  #downloadDialog .btn {
    display: inline-block;
    font-size: 1em;
    max-width: 130px; }
  #downloadDialog .btn-no {
    color: inherit;
    background: none; }

.jqmOverlay {
  background: #000; }

/*

 SUPPORT

*/
#support p {
  font-size: 1.1em; }

/*

 RQ

*/
#rq h2 a {
  color: inherit;
  text-decoration: none; }
#rq ul {
  font-size: 1.1em; }
  #rq ul li {
    border-radius: 3px;
    -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
    transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
    padding: 20px; }
    #rq ul li:hover {
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      background: #fff;
      color: inherit; }
    #rq ul li small {
      display: block; }

/*

 RQ PAGE

*/
#rqPage {
  padding-top: 70px; }
  #rqPage .rq-list, #rqPage .rq-related-list {
    font-size: 1.1em; }
    #rqPage .rq-list li, #rqPage .rq-related-list li {
      border-radius: 3px;
      -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
      -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
      transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
      padding: 20px; }
      #rqPage .rq-list li:hover, #rqPage .rq-related-list li:hover {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        background: #fff;
        color: inherit; }
      #rqPage .rq-list li small, #rqPage .rq-related-list li small {
        display: block; }
    #rqPage .rq-list + span, #rqPage .rq-related-list + span {
      padding-left: 20px; }
  #rqPage .rq-list-pages {
    padding-top: 20px; }
    #rqPage .rq-list-pages, #rqPage .rq-list-pages > li {
      display: inline-block; }
    #rqPage .rq-list-pages > li {
      padding-left: 10px; }

#relatedTags li {
  font-size: 1.1em;
  display: inline-block; }
#relatedTags li a {
  display: block;
  padding: 20px;
  border-radius: 3px;
  -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
  transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out; }
  #relatedTags li a:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
    color: inherit; }

/*

 FOOTER

*/
footer {
  color: #B2B2B2; }
  footer a, footer a:visited {
    color: #B2B2B2; }
  footer .copyright {
    width: 50%;
    float: left;
    text-align: left; }
  footer .links {
    width: 50%;
    float: left;
    text-align: right; }

body {
  background: #22242F; }

/*

 LICENSES

*/
#licenses {
  padding-top: 70px; }
  #licenses table {
    width: 100%;
    border: 1px solid #E5E5E5; }
    #licenses table .header, #licenses table .header:hover {
      background: #E7FCFD; }
    #licenses table .header span {
      color: #f44336;
      font-size: 1.2em;
      font-style: italic; }
    #licenses table .best, #licenses table .best:hover {
      background: #E7FCFD; }
    #licenses table th {
      padding: 10px; }
    #licenses table td {
      padding: 10px;
      vertical-align: middle;
      text-align: center; }
      #licenses table td.heading {
        text-align: left;
        width: 40%; }
        #licenses table td.heading > span {
          font-size: 0.8em;
          line-height: 0.8em; }
    #licenses table tr {
      -webkit-transition: color 300ms ease-in-out, background 300ms ease-in-out;
      -moz-transition: color 300ms ease-in-out, background 300ms ease-in-out;
      transition: color 300ms ease-in-out, background 300ms ease-in-out; }
    #licenses table tr:hover {
      color: #000;
      background: #F4F4F4;
      -webkit-transition: none;
      -moz-transition: none;
      transition: none; }
    #licenses table > thead > tr > th,
    #licenses table > thead > tr > td,
    #licenses table > tbody > tr > th,
    #licenses table > tbody > tr > td,
    #licenses table > tfoot > tr > th,
    #licenses table > tfoot > tr > td {
      border: 1px solid #E5E5E5; }
    #licenses table > thead > tr > th,
    #licenses table > thead > tr > td {
      border-bottom-width: 2px; }
    #licenses table i.fa {
      font-size: 1.5em; }
      #licenses table i.fa.fa-times {
        color: #f44336; }
      #licenses table i.fa.fa-check {
        color: #1BB0BF; }
    #licenses table .btn {
      font-size: 1em;
      width: 100%;
      max-width: 125px;
      padding: 10px;
      margin-top: 5px; }
      #licenses table .btn .fa {
        font-size: 1em; }
  #licenses .table-responsive {
    overflow-x: auto;
    min-height: 0.01%; }
  @media screen and (max-width: 790px) {
    #licenses .table-responsive {
      width: 100%;
      margin-bottom: 15px;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      border: 1px solid #dddddd; }
    #licenses .table-responsive > table td.heading > span {
      display: none; }
    #licenses .table-responsive > table {
      margin-bottom: 0; }
    #licenses .table-responsive > table > thead > tr > th,
    #licenses .table-responsive > table > tbody > tr > th,
    #licenses .table-responsive > table > tfoot > tr > th,
    #licenses .table-responsive > table > thead > tr > td,
    #licenses .table-responsive > table > tbody > tr > td,
    #licenses .table-responsive > table > tfoot > tr > td {
      white-space: nowrap; }
    #licenses .table-responsive > .table-bordered {
      border: 0; }
    #licenses .table-responsive > table > thead > tr > th:first-child,
    #licenses .table-responsive > table > tbody > tr > th:first-child,
    #licenses .table-responsive > table > tfoot > tr > th:first-child,
    #licenses .table-responsive > table > thead > tr > td:first-child,
    #licenses .table-responsive > table > tbody > tr > td:first-child,
    #licenses .table-responsive > table > tfoot > tr > td:first-child {
      border-left: 0; }
    #licenses .table-responsive > table > thead > tr > th:last-child,
    #licenses .table-responsive > table > tbody > tr > th:last-child,
    #licenses .table-responsive > table > tfoot > tr > th:last-child,
    #licenses .table-responsive > table > thead > tr > td:last-child,
    #licenses .table-responsive > table > tbody > tr > td:last-child,
    #licenses .table-responsive > table > tfoot > tr > td:last-child {
      border-right: 0; }
    #licenses .table-responsive > table > tbody > tr:last-child > th,
    #licenses .table-responsive > table > tfoot > tr:last-child > th,
    #licenses .table-responsive > table > tbody > tr:last-child > td,
    #licenses .table-responsive > table > tfoot > tr:last-child > td {
      border-bottom: 0; } }

/*

 FAQ

*/
#faq .list > div {
  width: 50%;
  float: left; }
  @media screen and (max-width: 790px) {
    #faq .list > div {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; } }
  #faq .list > div > div {
    padding: 20px;
    border-radius: 3px;
    -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, -moz-transform 300ms ease-in-out;
    transition: background 300ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out; }
    #faq .list > div > div:hover {
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      background: #fff;
      color: inherit; }
    #faq .list > div > div h1 {
      font-weight: bold;
      font-size: 1.25em;
      -webkit-transition: color 300ms ease-in-out;
      -moz-transition: color 300ms ease-in-out;
      transition: color 300ms ease-in-out; }
      #faq .list > div > div h1 .fa {
        vertical-align: middle; }
    #faq .list > div > div:hover h1 {
      color: #1BB0BF; }

/*

 FAQ PAGE

*/
#faqPage {
  padding-top: 70px; }

/*

 INSERT VIDEO

*/
#insertvideo {
  padding-top: 70px; }
  #insertvideo .video-responsive {
    max-width: 800px;
    margin: 0 auto; }
    #insertvideo .video-responsive > div {
      position: relative;
      width: 100%;
      padding-top: 56.25%; }
      #insertvideo .video-responsive > div > iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%; }

#inserttuts p {
  font-size: 1.1em; }

/*

 HELP

*/
#help {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding-bottom: 40px;
  padding-top: 70px; }
  #help:after {
    content: " ";
    display: block;
    clear: both; }
  #help #rqPage {
    padding-top: 0; }
    #help #rqPage h1 {
      font-size: 2em;
      margin-bottom: 20px;
      padding-left: 20px;
      text-align: left; }
      @media screen and (max-width: 790px) {
        #help #rqPage h1 {
          padding-left: 0; } }
  #help .left {
    width: 66.66667%;
    float: left; }
    @media screen and (max-width: 790px) {
      #help .left {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-right: 0; } }
    #help .left .rq {
      padding-left: 20px; }
      @media screen and (max-width: 790px) {
        #help .left .rq {
          padding-left: 0; } }
      #help .left .rq h2, #help .left .rq h3 {
        font-size: 1.7em;
        margin: 20px 0 5px 0;
        text-align: left; }
      #help .left .rq h3 {
        font-size: 1.4em; }
      #help .left .rq p {
        padding-bottom: 8px; }
      #help .left .rq ul {
        margin: 8px 0;
        list-style: disc;
        margin-left: 14px; }
      #help .left .rq p + ul {
        margin-top: 0; }
      #help .left .rq .img {
        text-align: center;
        margin: 20px 0; }
        #help .left .rq .img img {
          max-width: 100%; }
      #help .left .rq .img-desc {
        display: block;
        font-size: 12px;
        font-weight: normal;
        line-height: 15px;
        margin: -10px auto 30px auto;
        max-width: 350px;
        text-align: center; }
    #help .left .free-download {
      margin: 20px 0 0 20px; }
  #help .right {
    width: 33.33333%;
    float: left;
    padding: 50px 20px 20px 20px; }
    @media screen and (max-width: 790px) {
      #help .right {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-right: 0; } }
    #help .right h2 {
      font-size: 1.5em;
      margin: 30px 0 10px; }
    #help .right img[alt="Mail Support"] {
      position: relative;
      top: 2px; }
    #help .right .sections {
      margin-top: 20px; }
  #help .search-form {
    width: 100%; }
    #help .search-form form {
      box-sizing: border-box;
      display: table;
      width: 100%; }
    #help .search-form input {
      -webkit-border-top-left-radius: 3px;
      -ms-border-top-left-radius: 3px;
      border-top-left-radius: 3px;
      -moz-border-top-left-radius: 3px;
      -webkit-border-bottom-left-radius: 3px;
      -ms-border-bottom-left-radius: 3px;
      border-bottom-left-radius: 3px;
      -moz-border-bottom-left-radius: 3px;
      background: #F0F0F0;
      border: 1px solid #DFDFDF;
      box-sizing: border-box;
      display: table-cell;
      padding: 12px 15px;
      vertical-align: top;
      width: 100%; }
    #help .search-form .submit {
      display: table-cell;
      vertical-align: top;
      width: 54px; }
      #help .search-form .submit .btn {
        -webkit-border-top-right-radius: 3px;
        -ms-border-top-right-radius: 3px;
        border-top-right-radius: 3px;
        -moz-border-top-right-radius: 3px;
        -webkit-border-bottom-right-radius: 3px;
        -ms-border-bottom-right-radius: 3px;
        border-bottom-right-radius: 3px;
        -moz-border-bottom-right-radius: 3px;
        line-height: 31px;
        margin-top: 0;
        padding: 8px 8px 8px 12px; }
    #help .search-form .info {
      color: #6e6e6e;
      padding: 5px 0 0 0;
      font-size: 12px; }
      #help .search-form .info:before {
        content: attr(data-info); }

/*

 TERMS OF USE

*/
#terms-of-use {
  padding-top: 70px; }
  #terms-of-use h1 {
    text-align: left;
    font-size: 2em;
    margin-bottom: 20px; }
  #terms-of-use h2 {
    font-size: 1.7em;
    margin: 20px 0px 5px;
    text-align: left; }
  #terms-of-use p {
    padding-bottom: 8px; }

/*# sourceMappingURL=styles.css.map */