.bordered-button {
  border: 2px solid #fff;
  padding: 10px 30px;
  background-color: transparent;
  color: #fff;
  font-size: 20px;
  outline: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .bordered-button i {
    padding: 0px 0px 0px 10px; }
  .bordered-button:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: #0398d8;
    border-color: #0398d8;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }

.icons {
  background-color: rgba(0, 91, 127, 0.5);
  width: 100px;
  height: 100px;
  background-image: url(../../img/spritesheet.png);
  background-size: 1000%;
  display: inline-block;
  margin: 5px 5px 45px;
  outline: 1px solid #bbb;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .icons:before {
    display: block;
    width: 100px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    content: "";
    position: absolute;
    margin-top: 100px;
    outline: 1px solid #fff;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px; }
  .icons.male {
    background-position-x: 5px;
    background-position-y: 5px; }
    .icons.male:before {
      content: "Male";
      line-height: 40px; }
  .icons.female {
    background-position-x: -80px;
    background-position-y: 5px; }
    .icons.female:before {
      content: "Female";
      line-height: 40px; }
  .icons.glasses {
    background-position-x: -170px;
    background-position-y: 5px; }
    .icons.glasses:before {
      content: "With glasses";
      line-height: 40px; }
  .icons.ethnicity {
    background-position-x: -80px;
    background-position-y: -88px; }
    .icons.ethnicity:before {
      content: " ";
      line-height: 40px; }
    .icons.ethnicity .value {
      position: absolute;
      width: 100%;
      text-align: center;
      top: 110px;
      font-size: 12px; }
  .icons.age {
    background-image: none; }
    .icons.age .label {
      display: block;
      position: absolute;
      width: 80px;
      height: 80px;
      top: 10px;
      left: 10px;
      border: 1px solid #fff;
      line-height: 65px;
      font-size: 25px; }
    .icons.age .value {
      position: absolute;
      width: 100%;
      text-align: center;
      top: 110px;
      font-size: 12px; }
  .icons.unknown {
    background-position-x: 6px;
    background-position-y: -90px; }
    .icons.unknown:before {
      content: "Not Detected";
      line-height: 40px; }
  .icons.brow-raised {
    background-position-x: -255px;
    background-position-y: 9px; }
    .icons.brow-raised:before {
      content: "Brows raised";
      line-height: 40px; }
  .icons.brow-furrow {
    background-position-x: -345px;
    background-position-y: 5px; }
    .icons.brow-furrow:before {
      content: "Brows furrow";
      line-height: 40px; }
  .icons.brow-inner-raised {
    background-position-x: -435px;
    background-position-y: 5px; }
    .icons.brow-inner-raised:before {
      content: "Inner brows raised";
      line-height: 1;
      padding: 8px; }
  .icons.eyes-widen {
    background-position-x: -520px;
    background-position-y: 9px; }
    .icons.eyes-widen:before {
      content: "Eyes widen";
      line-height: 40px; }
  .icons.eyes-closed {
    background-position-x: -605px;
    background-position-y: 9px; }
    .icons.eyes-closed:before {
      content: "Eyes closed";
      line-height: 40px; }
  .icons.eyes-shut-tight {
    background-position-x: -605px;
    background-position-y: -78px; }
    .icons.eyes-shut-tight:before {
      content: "Eyes shut tight";
      line-height: 1;
      padding: 8px; }
  .icons.mouth-smirk {
    background-position-x: -695px;
    background-position-y: 5px; }
    .icons.mouth-smirk:before {
      content: "Mouth smirk";
      line-height: 40px; }
  .icons.mouth-smile {
    background-position-x: -783px;
    background-position-y: 5px; }
    .icons.mouth-smile:before {
      content: "Mouth smile";
      line-height: 40px; }
  .icons.mouth-open {
    background-position-x: -872px;
    background-position-y: 5px; }
    .icons.mouth-open:before {
      content: "Mouth open";
      line-height: 40px; }
  .icons.mouth-streched {
    background-position-x: -872px;
    background-position-y: -78px; }
    .icons.mouth-streched:before {
      content: "Mouth streched";
      line-height: 40px; }
  .icons.mouth-pucker {
    background-position-x: -783px;
    background-position-y: -78px; }
    .icons.mouth-pucker:before {
      content: "Mouth pucker";
      line-height: 40px; }
  .icons.mouth-pressed {
    background-position-x: -695px;
    background-position-y: -78px; }
    .icons.mouth-pressed:before {
      content: "Mouth pressed";
      line-height: 40px; }
  .icons.mouth-sucked {
    background-position-x: -520px;
    background-position-y: -78px; }
    .icons.mouth-sucked:before {
      content: "Mouth sucked";
      line-height: 40px; }
  .icons.mouth-sad {
    background-position-x: -874px;
    background-position-y: -168px; }
    .icons.mouth-sad:before {
      content: "Mouth sad";
      line-height: 40px; }
  .icons.attention {
    background-position-x: -786px;
    background-position-y: -168px; }
    .icons.attention:before {
      content: "Attention";
      line-height: 40px; }
  .icons.nose-wrinkled {
    background-position-x: -434px;
    background-position-y: -78px; }
    .icons.nose-wrinkled:before {
      content: "Nose wrinkled";
      line-height: 40px; }
  .icons.jaw-drop {
    background-position-x: -170px;
    background-position-y: -78px; }
    .icons.jaw-drop:before {
      content: "Jaw drop";
      line-height: 40px; }
  .icons.cheek-raised {
    background-position-x: -255px;
    background-position-y: -78px; }
    .icons.cheek-raised:before {
      content: "Cheek raised";
      line-height: 40px; }
  .icons.dimpled {
    background-position-x: -345px;
    background-position-y: -78px; }
    .icons.dimpled:before {
      content: "Dimpled";
      line-height: 40px; }
  .icons.happy {
    background-position-x: 5px;
    background-position-y: -347px; }
    .icons.happy:before {
      content: "Happy";
      line-height: 40px; }
  .icons.smirk {
    background-position-x: -87px;
    background-position-y: -347px; }
    .icons.smirk:before {
      content: "Contempt";
      line-height: 40px; }
  .icons.dominant {
    background-position-x: -179px;
    background-position-y: -347px; }
    .icons.dominant:before {
      content: "Dominant";
      line-height: 40px; }
  .icons.surprised {
    background-position-x: -267px;
    background-position-y: -348px; }
    .icons.surprised:before {
      content: "Surprised";
      line-height: 40px; }
  .icons.sad {
    background-position-x: -358px;
    background-position-y: -349px; }
    .icons.sad:before {
      content: "Sad";
      line-height: 40px; }
  .icons.flushed {
    background-position-x: -445px;
    background-position-y: -348px; }
    .icons.flushed:before {
      content: "Flushed";
      line-height: 40px; }
  .icons.wink {
    background-position-x: -532px;
    background-position-y: -348px; }
    .icons.wink:before {
      content: "Wink";
      line-height: 40px; }
  .icons.scream {
    background-position-x: -618px;
    background-position-y: -348px; }
    .icons.scream:before {
      content: "Scared";
      line-height: 40px; }
  .icons.relaxed {
    background-position-x: -708px;
    background-position-y: -348px; }
    .icons.relaxed:before {
      content: "Relaxed";
      line-height: 40px; }
  .icons.angry {
    background-position-x: 5px;
    background-position-y: -437px; }
    .icons.angry:before {
      content: "Angry";
      line-height: 40px; }
  .icons.kiss {
    background-position-x: -89px;
    background-position-y: -437px; }
    .icons.kiss:before {
      content: "Pout";
      line-height: 40px; }

html .demo-view #basicInfo .icons-holder, html .demo-view #facialFeatures .icons-holder, html .demo-view #emotions .icons-holder {
  *zoom: 1; }
  html .demo-view #basicInfo .icons-holder:before, html .demo-view #facialFeatures .icons-holder:before, html .demo-view #emotions .icons-holder:before, html .demo-view #basicInfo .icons-holder:after, html .demo-view #facialFeatures .icons-holder:after, html .demo-view #emotions .icons-holder:after {
    content: " ";
    display: table; }
  html .demo-view #basicInfo .icons-holder:after, html .demo-view #facialFeatures .icons-holder:after, html .demo-view #emotions .icons-holder:after {
    clear: both; }

html body {
  background-image: url(../../img/background-img2.png);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Open Sans', sans-serif; }
html header {
  height: 90px; }
  html header .logo {
    width: 205px;
    padding: 15px 0px; }
html .div-header {
  position: relative; }
html h1, html h2, html h3, html h4 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  color: #fff; }
  html h1.section-header, html h2.section-header, html h3.section-header, html h4.section-header {
    display: inline-block;
    background-color: #009fe3;
    padding: 8px 13px;
    font-size: 16px; }
    html h1.section-header:after, html h2.section-header:after, html h3.section-header:after, html h4.section-header:after {
      width: 100%;
      height: 5px;
      content: "";
      background: #009fe3;
      position: absolute;
      left: 0px;
      top: 39px; }
html .white-text {
  color: #fff;
  font-weight: 300; }
html .initial-view {
  height: 100vh;
  margin-top: -90px; }
  html .initial-view .content {
    height: 100vh;
    display: table;
    vertical-align: middle; }
    html .initial-view .content .main-title-holder {
      display: table-cell;
      vertical-align: middle; }
      html .initial-view .content .main-title-holder .main-title {
        font-size: 65px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        text-align: center;
        display: block;
        padding: 30px 0;
        margin: 0px; }
      html .initial-view .content .main-title-holder p {
        display: block;
        text-align: center;
        font-size: 16px; }
      html .initial-view .content .main-title-holder #start {
        display: block;
        margin: 30px auto; }
html .demo-view {
  display: none;
  position: relative;
  padding-left: 15px;
  padding-right: 15px;}

  html .demo-view .col-md-4 {
    width: 630px !important;
    float: left;
    position: relative;
    padding: 0px; }
    html .demo-view .col-md-4 .camera-view {
      position: relative; }
    html .demo-view .col-md-4 #affdex_elements {
      max-width: 630px !important;
      min-height: 480px;
      background-color: rgba(255, 255, 255, 0.5);
      overflow: hidden; }
    html .demo-view .col-md-4 .controls {
      bottom: 0px;
      position: absolute;
      background-color: rgba(0, 91, 127, 0.5);
      width: 100%;
      padding: 10px; }
    html .demo-view .col-md-4 #logs {
      padding: 15px;
      max-height: 100px;
      height: 100px;
      background-color: rgba(255, 255, 255, 0.5); }
      html .demo-view .col-md-4 #logs div {
        width: 100%;
        height: 70px;
        overflow: auto; }
  html .demo-view .col-md-8 {
    width: 99% !important;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 0 0 660px;
    position: absolute; }
  html .demo-view #face_video_canvas {
    width: 100% !important;
    height: auto !important; }
  html .demo-view #basicInfo {
    min-height: 205px; }
    html .demo-view #basicInfo .icons-holder .icons {
      float: left; }
  html .demo-view #facialFeatures {
    min-height: 205px; }
    html .demo-view #facialFeatures .icons-holder .icons {
      display: none;
      float: left; }
  html .demo-view #emotions {
    min-height: 205px; }
    html .demo-view #emotions .icons-holder .icons {
      display: none;
      float: left; }