/*Typography*/

@font-face {
    font-family: 'Signika Light';
    src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
}

/*Style common HTML tags*/

html {
    line-height: 1.4em;
    font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
    font-size: 1em;
    color: #363636;
    width: 100%;
}

a { color: #b495d3;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }


p { line-height: 1.4em; margin-bottom: 1.2em; }

i { font-style: italic; }
b { font-style: oblique; }

li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4em; }
ul {margin: 1em 2em 0em 4em;}

br {margin-bottom: 20em; margin-top: 20em;}

h1 {  font-size: 2.75em;  font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
h2 {  font-size: 1.75em;  font-family: 'Signika Light';	color: #6c6c6c; margin-bottom: 0.5em; margin-top: 1em; }
h3 {  font-size: 1.625em; font-family: 'Signika Light';	color: #b495d3; margin-bottom: 0.5em; margin-top: 1em; }
h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d;	margin-bottom: 0.5em; margin-top: 1em; }
h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }
h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }

/*Site-specific*/

#banner > img {
  width: 100%;
}

#wrapper {
  margin: auto 5em;
}

#comparisons {
  /* padding-top: 10em; */
  background-color: #fbfbfb;
  position: absolute;
  width: 100%;
  max-width: 1150px;
}

.main_title {
  margin-left: 2em;
  margin-bottom: 3em;
}

.section_wrapper {
  margin-bottom: 4em;
}

.title {
  text-align: center;
  font-size: 1.5em;
}

#free {
  position: relative;
  /* background-color: red; */
  float: left;
  width: 45%;
  max-width: 450px;
}

#sign {
  position: relative;
  /* background-color: green; */
  width: 240px;
  float: left;
  margin-top: 3em;
}

#proprietary {
  position: relative;
  /* background-color: blue; */
  width: 45%;
  max-width: 450px;
  float: right;
}

.product {
  display: block;
  margin: auto;
  width: 250px;
  height: 250px;
}

.sign  {
  display: block;
  margin: auto;
  width: 149px;
  height: 149px;
}

.separator {
  width: 1px;
  height: 324px;
  margin: auto;
  margin-left: 7.5em;
  margin-top: 3em;
}

#section_wrapper {
  position: relative;
}

/* #test {
  height: 10em;
  position: relative;
  background-color: white;
  display: block;
  float: left;
} */