@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@-moz-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@-o-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.dsme-green {
  color: #36fec8 !important;
}

.dsme-bg-dark {
  background-color: #23282e !important;
}

.dsme-bg-dark2 {
  background-color: #16191d !important;
}

.help-block {
  color: white;
}

.help-block i{
  color: #fff;
}

#onde-usar h3{
    color: white;
}

body .video-js {
  position: relative;
  height: inherit;
  width: inherit
}

body .video-js .vjs-current-time,
body .video-js .vjs-duration {
  display: block
}

body .video-js .vjs-current-time {
  padding-right: 0.35714em
}

body .video-js .vjs-duration {
  padding-left: 0.35714em
}

body .video-js .vjs-time-control {
  right: auto;
  display: block
}

body .video-js .vjs-time-divider {
  padding: 0;
  min-width: 0
}

body .video-js .vjs-progress-control {
  margin-right: 0
}

body .video-js .vjs-icon-circle,
body .video-js .vjs-mouse-display,
body .video-js .vjs-play-progress,
body .video-js .vjs-volume-level {
  font-family: inherit !important
}

.banner.hero {

background: #04f9c4; /* Old browsers */
background: -moz-linear-gradient(-45deg, #04f9c4 -1%, #2bb194 100%);
background: -webkit-linear-gradient(-45deg, #04f9c4 -1%,#2bb194 100%);
background: linear-gradient(135deg, #000000 30%,#2bb194 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04f9c4', endColorstr='#2bb194',GradientType=1 );
}

.banner.hero .container img {
  margin-bottom: -30%;
  margin-top: 80px
}

.select-player {
  background-color: #f8f8f8
}

.select-player .banner {
  height: 50vh
}

.select-player .banner div {
  display: inline-block;
  width: 50%;
  height: inherit;
  margin-left: -5px;
  overflow: hidden
}

.select-player .banner div a {
  display: inherit;
  width: 100%;
  height: inherit;
  text-align: center;
  color: #2f4050;
  transition: all .3s linear;
  will-change: transform, background-color;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.select-player .banner div a>span {
  font-size: 4.8rem;
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-variant: all-small-caps
}

.select-player .banner div a>span span {
  font-size: 2.4rem;
  font-weight: normal;
  display: block
}

.select-player .banner div a:hover,
.select-player .banner div a:active {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff
}

#use-cases {
  margin-top: 60px;

}

#use-cases figure {
  width: 250px;
  display: inline-block;
  margin: 0 17.5px 20px;
}

#use-cases figure div {
  width: inherit;
  height: 250px;
  overflow: hidden;
  -moz-border-radius: 10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  transition: all 0.3s ease-in-out;
}

#use-cases figure div:hover{
  box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.3);
  transition: all 0.3s ease-in-out;


}

#use-cases figure div img {
  -webkit-transform: translate(-14px, -14px) scale(0.9);
  -moz-transform: translate(-14px, -14px) scale(0.9);
  -ms-transform: translate(-14px, -14px) scale(0.9);
  -o-transform: translate(-14px, -14px) scale(0.9);
  transform: translate(-14px, -14px) scale(0.9);
  transition: all 0.3s ease-out;
  max-width: none
}

#use-cases figure h3 {
  margin: 10px 0 0
}

#use-cases figure:hover img {
  -webkit-transform: translate(-14px, -14px) scale(1.1);
  -moz-transform: translate(-14px, -14px) scale(1.1);
  -ms-transform: translate(-14px, -14px) scale(1.1);
  -o-transform: translate(-14px, -14px) scale(1.1);
  transform: translate(-14px, -14px) scale(1.1)
}

.module {
  background-repeat: no-repeat
}

.module-features h3 {
  font-weight: 800
}

.module-features p {
  font-size: 1.8rem
}

#dsmeds {
  /* background-image: url("../img/painel.png");
  background-position: right 100px bottom */
}

#dsmeott video {
  position: absolute;
  transform: translateY(1px)
}

#dsmetrigger video {
  max-width: none
}

.video-js {
  width: 100% !important;
  height: auto !important;
  padding-top: 56.25%
}

.content-section img {
  max-width: 100%
}

#dsmeott{
  background: #23282e; /* old browsers only */
  background: -moz-linear-gradient(top, #ffffff 31%, #dbdbdb 101%);
  background: -webkit-linear-gradient(top, #ffffff 31%,#dbdbdb 101%);
  background: linear-gradient(to bottom, #16191d 40%,#2bb194 100%);
}

@media (min-width:768px){
  .como-funciona{
    display:flex;
    align-items: center;
  }

}
@media (max-width:768px){
  .wireframe-player-responsive{
    width:366px!important;
  }
}