html, body {
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 300px;
    height: 600px;
}

.conteiner{
  width: 300px;
  position: relative;
  margin:0 auto;
  height: 600px;
  background: url('../img/bgfinal.jpg');
  animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari & Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
.bg{
  width: 300px;
  height: 600px;
  position: absolute;
  
}

.clickServidro{
  width: 110px;
  height: 120px;
  position: absolute;
  z-index: 9;
  bottom: 180px;
  right: 0px;
  left: 0;
  margin: 0 auto;
  background: #75392e99;
  border-radius: 10px;
  display: none;
}
.clickTag{
  width: 300px;
  height: 600px;
  position: absolute;
  top: 0;
}


.boxVideo{
    height: 170px;
    position: absolute;
    z-index: 999999;
    width: 300px;
    top: 48%;
}
.video {
  position: absolute;
  width: 320px;
  margin: 0 auto;
  top: -68px;
  z-index: 999999999;
}

video{
  position: absolute;
  top: 0;
  left: 0;
  width: 103%;
  height: 100%;
}
.mute-video {
  background: url('../img/stop.png') no-repeat center;
  background-size: 32px;
  border: 0;
  width: 100%;
  height: 97%;
  text-indent: -999px;
  position: absolute;
  top: 2px;
  left: 0px;
  z-index: 16;
  background-position: 12px 20px;
}
.unmute-video {
    background:url('../img/play.png') no-repeat center;
    background-position: 12px 20px;
    background-size:32px;
    z-index: 16;
}

video-wrapper {
    position: relative;
}

.video-wrapper > video {
    width: 100%;
    vertical-align: middle;
}

.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
    display: none;
}

.video-overlay-play-button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px calc(54% - 50px);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.95;
    cursor: pointer;
    transition: opacity 150ms;
}

.video-overlay-play-button:hover {
    opacity: 1;
}

.video-overlay-play-button.is-hidden {
    display: none;
}


.box {
  flex: 1 0 auto;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* CAROUSEL */
.carousel-cell {
  width: 100%;
}
.carousel-cell img {
  width: 60%;
  height: auto;
  margin: 0 auto;
  margin-left: 20%;
}
.carousel:after {
  content: 'flickity';
  display: none;
  /* hide :after */
}
.flickity-page-dots {
    /*display: none;*/
    bottom: -6% !important;
}
.flickity-page-dots .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 8px;
    /* background: #fff; */
    border-radius: 50%;
    filter: alpha(opacity=25);
    opacity: .25;
    cursor: pointer;
    border: solid 0px #fff;
}
.flickity-page-dots .dot.is-selected {
    filter: alpha(opacity=100);
    opacity: 1;
    fill: #d52300 !important;
}
.flickity-prev-next-button {
    background: transparent !important;
}
.flickity-prev-next-button .arrow {
    fill: #d52300 !important;
}
.flickity-prev-next-button svg {
    width: 80% !important;
    height: 80% !important;
}
.flickity-page-dots .dot{
    background: #d52300 !important;
}
.flickity-enabled.is-draggable {
    margin-top: 30% !important;
    z-index: 2 !important;
}