html,body {
    height:auto
}

body {
    background:#f5f5f5
}
li, p {
    color:#2a2a2a;
    font-weight:300;
}
h2 {
	font-weight:500;
	font-size:3em;
	padding:1em 0;
}
h3 {
	font-weight:400
}

.jumbobtn {
    margin-top:.5em;
}

.sfopera {
    background-color: #404040;
    background: url(https://storage.googleapis.com/camio_general/sfopera-lobbybackground2400x1800.jpg) no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    background-position: center;
}
.sfopera>.row {
	padding-top:2em;
	padding-bottom:2em;
}
#wrap {
    background:#fff;
    max-width:1400px;
    box-shadow: 0 2px 5px #dadada;
}

#wrap:after {
    height:120px
}
.video-examples {
    margin-top:1em;
}
.search-box-text {
  color: #000000;
  border: 1px solid #e1e1e1;
  padding: 0.5em 1em 0.5em 0.25em;
  background-image: url("https://storage.googleapis.com/camio_general/mic-microphone-icon.svg");
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-position: right 5px center;
  margin-bottom:2px;
  background-color:#ffffff;
  font-size: 24px;
  font-weight:500;
  line-height:initial;
}
.video-container {
  margin-bottom:1em;
}
.video-container .play {
  background-image: url('/svg/webapp-expand.svg');
  opacity: 0.8;
  width:63px;
  height:50px;
  position:absolute;
  left: 15px;
  bottom: 0px;
  background-color: transparent;
}
.play.video-button {
  border: 0;
}
.video-container .watermark {
  opacity: 0.8;
  position: absolute;
  width: 80px;
  height: 25px;
  right: 0px;
  bottom: 0px;
  background: url("/svg/webapp-watermark.svg") no-repeat;
}
.card {
    margin:10px 0;
}
.card p {
	font-size: 18px;
	color: #2a2a2a;
    margin-top: 10px;
    font-weight: 300;	
}
.card a {
	text-decoration:none;
	color:initial;
}
.cardinside {
    background-color:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,0.19),0 0 0 1px #f5f5f5;
    padding:10px;
    border-radius:6px;
}
.cardinside>.row img {
	margin: 0 auto;
}
.why .cardstrip .cardinside {
	min-height: 11.5em;
}
#how-it-works .transform{
    margin-bottom: 1em;
}
.imghiw {
    background-size:cover;
    background-position:center;
    text-align:center;
    position:relative;
    overflow:hidden
}
#how-it-works .h4{
  color: #2a2a2a;
  font-weight: 300;
  line-height: 1.3;
}

.imghiw img{
  width:50%;
  max-height: 7em;
  position: relative;
}
/* vertical lines */

.line-box{
  width:100%;
  height:5em;
  margin:1em 0;
}
.line-box .horizontal-line{
  height: 100%;
  width: 4px;
  right: 50%;
  position: absolute;
  background: #dadada;
}
.automagic{
  padding:2em 0;

}
.imghiw.first .scene{
  height: 20em;
  background:url('/images/home-scroll-scene-one-done.png') 50% no-repeat;
  background-size: contain;
}
.imghiw.second .scene{
  height: 20em;
  background:url('/images/home-scroll-scene-one-done.png') 50% no-repeat;
  background-size: contain;
     transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.imghiw.second.done .scene.two{
  background:url('/images/home-scroll-scene-two-done.png') 50% no-repeat;
  background-size: contain;
}
.imghiw.fourth .scene{
  height: 20em;
  margin: 2em 0;
  background:url('/images/home-scroll-scene-four-done.png') 50% no-repeat;
  background-size: contain;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

/* third chunk */
.imghiw.third{
  margin:10px 0 25px 20px;
}
.imghiw.third .event{
  height:5em;
  background:#f5f5f5;
  border-radius:4px;
  margin:5px;
}
.h2 {
	color: #2a2a2a;
}
.usertitle, .h3 {
    color:#2a2a2a;
    font-size:22px;
}
.img-hiw .h2{
    font-size: 24px;
}
.imghiw .event{
    opacity:1;
}
/* events grid */

.imghiw .event.done, .first.imghiw.done.path, .first.imghiw.done .path {
  -webkit-animation: expand .4s ease;
  -moz-animation: expand .4s ease;
  -o-animation: expand .4s ease;
  animation: expand .4s ease;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  -animation-fill-mode:forwards;
}

.imghiw .event.done.one{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 0%, 50%;
  animation-delay:.05s;
  -webkit-animation-delay:.05s;
  -moz-animation-delay:.05s;
}

.imghiw .event.done.two{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position:5.5%, 50%;
  animation-delay:.1s;
  -webkit-animation-delay:.1s;
  -moz-animation-delay:.1s;
}
.imghiw .event.done.six{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 10.4%, 50%;
  animation-delay:.15s;
  -webkit-animation-delay:.15s;
  -moz-animation-delay:.15s;
}

.imghiw .event.done.three{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 15.6%, 50%;
  animation-delay:.2s;
  -webkit-animation-delay:.2s;
  -moz-animation-delay:.2s;
}
.imghiw .event.done.seven{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 20.8%, 50%;
  animation-delay:.25s;
  -webkit-animation-delay:.25s;
  -moz-animation-delay:.25s;
}
.imghiw .event.done.eleven{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 32%, 50%;
  animation-delay:.3s;
  -webkit-animation-delay:.3s;
  -moz-animation-delay:.3s;
}

.imghiw .event.done.four{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 31.2%, 50%;
  animation-delay:.35s;
  -webkit-animation-delay:.35s;
  -moz-animation-delay:.35s;
}
.imghiw .event.done.eight{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 36.4%, 50%;
  animation-delay:.4s;
  -webkit-animation-delay:.4s;
  -moz-animation-delay:.4s;
}
.imghiw .event.done.twelve{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 41.6%, 50%;
  animation-delay:.45s;
  -webkit-animation-delay:.45s;
  -moz-animation-delay:.45s;
}
.imghiw .event.done.sixteen{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 46.8%, 50%;
  animation-delay:.5s;
  -webkit-animation-delay:.5s;
  -moz-animation-delay:.5s;
}

.imghiw .event.done.five{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 45%, 50%;
  animation-delay:.55s;
  -webkit-animation-delay:.55s;
  -moz-animation-delay:.55s;
}
.imghiw .event.done.nine{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 55.2%, 50%;
  animation-delay:.6s;
  -webkit-animation-delay:.6s;
  -moz-animation-delay:.6s;
}
.imghiw .event.done.thirteen{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 60.4%, 50%;
  animation-delay:.65s;
  -webkit-animation-delay:.65s;
  -moz-animation-delay:.65s;
}
.imghiw .event.done.seventeen{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 55.6%, 50%;
  animation-delay:.7s;
  -webkit-animation-delay:.7s;
  -moz-animation-delay:.7s;
}

.imghiw .event.done.ten{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 69.8%, 50%;
  animation-delay:.75s;
  -webkit-animation-delay:.75s;
  -moz-animation-delay:.75s;
}
.imghiw .event.done.fourteen{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 70%, 50%;
  animation-delay:.8s;
  -webkit-animation-delay:.8s;
  -moz-animation-delay:.8s;
}
.imghiw .event.done.eighteen{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 11.2%, 50%;
  animation-delay:.85s;
  -webkit-animation-delay:.85s;
  -moz-animation-delay:.85s;
}

.imghiw .event.done.fifteen{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 65.4%, 50%;
  animation-delay:.95s;
  -webkit-animation-delay:.95s;
  -moz-animation-delay:.95s;
}
.imghiw .event.done.nineteen{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 84.6%, 50%;
  animation-delay:1s;
  -webkit-animation-delay:1s;
  -moz-animation-delay:1s;
}

.imghiw .event.done.twenty{
  background:url('/images/home-events/home-strip.jpg') no-repeat;
  background-size:cover;
  background-position: 6.8%, 50%;
  animation-delay:1.05s;
  -webkit-animation-delay:1.05s;
  -moz-animation-delay:1.05s;
}

.imghiw .event.done.important{
  box-shadow: 0 2px 5px #fff, 0 0 0 2px #fff inset;
}
.showimp.imghiw .event:not(.important){
  opacity:.5;
}
.showimp.imghiw .event.done.important{
  box-shadow: 0 2px 5px #dadada, 0 0 0 1px #2a2a2a inset;
   background-size: 30% !important;
   opacity: 1;
  background: url('/svg/home-thumb-up.svg')  50% no-repeat;
}
.showimp.imghiw .event.done.important.not{
  opacity: 1;
   background-size: 30% !important;
   background: url('/svg/home-thumb-down.svg')  50% no-repeat; 
}
section {
	padding-top:2em;
	padding-bottom:2em;
}
section.divider {
	border-top: 1px solid #ececec;
}
.jumbotron {
    margin-bottom: 0;
    margin-top:50px;
}
.silver {
    background-color: #f1f1f1;
}
.api-example pre {
  font-size: x-small;
  font-weight: 300;
}
.hiwtext .h2 {
    margin-top:6em
}

.usertitle:hover {
    text-decoration:none
}

.hiw-header,.header {
    font-weight:500;
    font-size:3em;
    padding:1em 0;
}
#features img {
    width:8em;
    margin:1em 0
}
.seemore {
    margin:3em 0 2em 0;
}

#getstarted {
    margin:1em 0;
}

/* green selections dropdown */

.selectionsbg {
    background:#3ac162;
    background:rgba(42,42,42,0.75);
    background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(42,42,42,1) 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(42,42,42,1)));
    background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(42,42,42,1) 100%);
    background:-o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(42,42,42,1) 100%);
    background:-ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(42,42,42,1) 100%);
    background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(42,42,42,1) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#a62a2a2a',GradientType=0);
    height:5em;
    width:100%;
    margin-top:-7em;
    z-index:5;
    position:relative
}

.video-glow {
    z-index:5;
    position:absolute;
    top:0;
    height:100%;
    width:100%
}

.selections {
    padding-top:2em;
    background:transparent;
    display:inline-flex;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    -webkit-box-direction:normal;
    -moz-box-direction:normal;
    -webkit-flex-direction:row;
    -ms-flex-direction:row;
    flex-direction:row;
    -webkit-justify-content:center;
    justify-content:center
}

.selectionsbg.active {
    height: 20.5em;
    background:#2a2a2a;
    margin-top:-22.5em;
}

.selections .btn-default {
    color:#FFF;
    background-color:#2a2a2a;
    border-color:#000
}

.selectionsbg.active .btn-default {
/* border-color: transparent;*/
}

.selections .btn-default:focus {
    outline:none
}

.selectionsbg #usesselections {
    display:none
}

.selectionsbg.active #usesselections {
    display:block;
    animation:fadeinUp .5s ease-in-out;
    -webkit-animation:fadeinUp .5s ease-in-out;
    -webkit-transition:all 1s cubic-bezier(0.29,1.53,0.33,1.01);
    -moz-transition:all 1s cubic-bezier(0.29,1.53,0.33,1.01);
    transition:all 1s cubic-bezier(0.29,1.53,0.33,1.01);
    margin-top:5vh
}
.selectionsbg.active .selections{
    padding-top: 1em;
}
.closeselection img {
    float:right;
    background:transparent;
    padding:.5em;
    position:absolute;
    right:1em;
    border-radius:50%;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
    width:2.5em;
    cursor:pointer;
    display:none
}

.closeselection:hover img {
    background:rgba(255,255,255,0.25)
}

#usesselections .h2 {
    color:#fff;
    font-size:1.7em;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    background:rgba(255,255,255,0.1);
    cursor:pointer;
    text-shadow:0 1px 3px rgba(0,0,0,0.22);
    border-radius:5px;
    margin:5px;
    border:2px solid rgba(255,255,255,0.5);
    padding:10px
}

#usesselections .h2:hover {
    background:rgba(255,255,255,0.3);
    border-color:rgba(255,255,255,0.3)
}

#usesselections .h2.active {
    background:rgba(255,255,255,0.33);
    color:#fff;
    border-color:#fff;
    display:block
}

#usesselections .h2.continue:hover,#usesselections .h2.continue {
    background:transparent;
    border-color:transparent
}

#usesselections .h2.continue.active {
    opacity:1;
    background:transparent;
    border-color:transparent;
    animation:fadeinUp .3s ease-in-out;
    -webkit-animation:fadeinUp .3s ease-in-out;
    -webkit-transition:all .3s cubic-bezier(0.29,1.53,0.33,1.01);
    -moz-transition:all .3s cubic-bezier(0.29,1.53,0.33,1.01);
    transition:all .3s cubic-bezier(0.29,1.53,0.33,1.01)
}

#usesselections .continue .btn-primary {
    color:#3AC15F;
    color:#2a2a2a;
    font-weight:500;
    opacity:1;
    border:none;
    background:#fff;
}

.setuptext a{
    font-size:1.5em;
    color:#fff;
    margin:.1em;
}
.setuptext.answer a span{
  font-size: 1em;
}
.setuptext a:hover{
  text-decoration: none;
}
.usesrow{
  margin-top: -2em;
}
.setuptext.answer{
  border-bottom: 3px solid #fff;
  width: 6em;
  margin: 0 5px;
  text-align: center;
}
/* for mobile devices */
@media (max-width: 992px) {
}

@media (max-width: 768px) {
}

@media (max-width: 660px) {
    .jumbotron{
        margin-bottom:0px;
    }
    .setuptext a, .setuptext span{
        font-size:1em;
        color:#fff;
        margin:.5em
    }
    .jumbo-text {
        margin-top:20vh
    }
    .imghiw.fourth .scene{
        margin: 0; 
    }
    .imghiw.third {
      margin: 10px 0 25px 0px;
      padding-left: 90px;
    }
}

@-webkit-keyframes fadeinUp {
    0% {
        opacity:0;
        top:10px
    }

    100% {
        opacity:1;
        top:0
    }
}

@keyframes fadeinUp {
    0% {
        opacity:0;
        top:10px
    }

    100% {
        opacity:1;
        top:0
    }
}


@-webkit-keyframes expand {
  0% {
    opacity:0;
    -webkit-transform:scale(0);
  }

  100% {
    opacity:1;
    -webkit-transform:scale(1);
  }
}
@keyframes expand {
  0% {
    transform:scale(0);
    opacity:0;

  }

  100% {
    transform:scale(1);
    opacity:1;
  }
}
@-moz-keyframes expand {
  0% {
    opacity:0;
    -moz-transform:scale(0);
  }

  100% {
    opacity:1;
    -moz-transform:scale(1);
  }
}
@-ms-keyframes expand {
  0% {
    opacity:0;
    -ms-transform:scale(0);
  }

  100% {
    opacity:1;
    -ms-transform:scale(1);
  }
}
.search-box-text, video {
  border-radius: 5px;
}
.wsj .img-responsive {
	margin: 0 auto;
	padding: 1em 0 1em 0;
}
.eyebrow {
    background-color: #333;
    color: #fff;
    text-transform: uppercase;
	padding: 1px 6px;
    margin: 0 auto 15px;
	font-weight: 300;
}
#latest-news .h4 {
    color: #2a2a2a;
    font-weight: 300;
    line-height: 1.3;
}
.special-message {
	background-color: #4990E2;
}
.special-message,
.special-message a {
	color:#ffffff;
}
.special-message a:hover,
.special-message a:active {
	text-decoration: underline;
}

#news {
	padding: 2em;
}
#news img {
	padding: 2em;
	height: 100px;
	margin: auto;
}
.jumbotron .cta .btn-primary {
	min-width: 10em;
}
figure.centered img {
	margin: auto;
}
a.anchor {
    text-decoration: none;
    color: inherit;
}
a.anchor span {
    display: none;
    font-size: 70%;
    margin-left: 0.25em;
}
a.anchor:hover span {
    display: inline-block;
}