Direito - Flutuante

# CSS - Selo Site Sincero - Direito - Flutuante

```css
#trustvox-selo-site-sincero {
  position: fixed;
  background: url(/arquivos/trustvox-selo-site-sincero-pequeno-x1.png) no-repeat;
  width: 85px;
  height: 85px;
  right: 0;
  bottom: 5px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  z-index: 99;
  cursor: pointer;
}

#trustvox-selo-site-sincero,
#trustvox-selo-site-sincero-inside {
  -webkit-transition: width 1s, opacity .25s ease-in-out;
  -moz-transition: width 1s, opacity .25s ease-in-out;
  -ms-transition: width 1s, opacity .25s ease-in-out;
  -o-transition: width 1s, opacity .25s ease-in-out;
  transition: width 1s, opacity .25s ease-in-out;
}

#trustvox-selo-site-sincero:hover { width:210px; }

#trustvox-selo-site-sincero-inside {
  opacity:0;
  width: 207px;
  display: block;
  height: 100%;
  background: url(/arquivos/trustvox-selo-site-sincero-pequeno-x2.png) no-repeat;
}

#trustvox-selo-site-sincero:hover #trustvox-selo-site-sincero-inside { opacity:1; }

#ts-certificate-modal-container #ts-certificate-overlay {z-index: 999999;}
#ts-certificate-modal-container #ts-certificate-modal {z-index: 1000000;}
```

Direito - Flutuante e Rodapé

# CSS - Selo Site Sincero - Direito - Flutuante e Rodapé

```css
#trustvox-selo-site-sincero {
  background: url(/arquivos/trustvox-selo-site-sincero-pequeno-x2.png) no-repeat;
  width: 210px;
  height: 98px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

@media only screen and (min-width: 990px) {
  #trustvox-selo-site-sincero {
    position: fixed;
    background: url(/arquivos/trustvox-selo-site-sincero-pequeno-x1.png) no-repeat;
    width: 88px;
    height: 85px;
    right: 0;
    bottom: 20px;
    cursor: pointer;
    display: block;
    z-index: 100;
    text-decoration: none;
  }

  #trustvox-selo-site-sincero,
  #trustvox-selo-site-sincero-inside {
    -webkit-transition: width 1s, opacity .25s ease-in-out;
    -moz-transition: width 1s, opacity .25s ease-in-out;
    -ms-transition: width 1s, opacity .25s ease-in-out;
    -o-transition: width 1s, opacity .25s ease-in-out;
    transition: width 1s, opacity .25s ease-in-out;
  }
  #trustvox-selo-site-sincero:hover { width: 215px; }

  #trustvox-selo-site-sincero-inside {
    opacity:0;
    width: 215px;
    display: block;
    height: 100%;
    background: url(/arquivos/trustvox-selo-site-sincero-pequeno-x2.png) no-repeat;
  }

  #trustvox-selo-site-sincero:hover #trustvox-selo-site-sincero-inside { opacity:1; }
}

#ts-certificate-modal-container #ts-certificate-overlay {z-index: 999999!important;}
#ts-certificate-modal-container #ts-certificate-modal {z-index: 1000000!important;}
```

Esquerdo - Flutuante e Rodapé

# CSS - Selo Site Sincero - Esquerdo - Flutuante e Rodapé

```css
#trustvox-selo-site-sincero {
  background: url(/arquivos/trustvox-selo-site-sincero-pequeno-x2.png) no-repeat left;
  width: 220px;
  height: 99px;
  cursor: pointer;
  display: inline-block;
  z-index: 1;
}

@media only screen and (min-width: 990px) {
  #trustvox-selo-site-sincero {
    position: fixed;
    background: url(/arquivos/trustvox-selo-site-sincero-pequeno-esquerdo-x1.png) no-repeat right;
    width: 89px;
    height: 88px;
    left: 0;
    bottom: 20px;
    cursor: pointer;
    display: block;
    text-decoration: none;
  }

  #trustvox-selo-site-sincero,
  #trustvox-selo-site-sincero-inside {
    -webkit-transition: width 1s, opacity .25s ease-in-out, margin 1s;
    -moz-transition: width 1s, opacity .25s ease-in-out, margin 1s;
    -ms-transition: width 1s, opacity .25s ease-in-out, margin 1s;
    -o-transition: width 1s, opacity .25s ease-in-out, margin 1s;
    transition: width 1s, opacity .25s ease-in-out, margin 1s;
  }
  #trustvox-selo-site-sincero:hover { width: 213px; }

  #trustvox-selo-site-sincero-inside {
    opacity:0;
    display: block;
    height: 100%;
    background: url(/arquivos/trustvox-selo-site-sincero-pequeno-esquerdo-x2.png) no-repeat 6px 2px;
    margin-left: -126px;
    width: 213px;
  }

  #trustvox-selo-site-sincero:hover #trustvox-selo-site-sincero-inside {
    opacity:1;
    margin-left: 0;
  }
}

#ts-certificate-modal-container #ts-certificate-overlay {z-index: 999999;}
#ts-certificate-modal-container #ts-certificate-modal {z-index: 1000000;}
```

Esquerdo Flutuante

# CSS - Selo Site Sincero - Esquerdo Flutuante

```css
#trustvox-selo-site-sincero {
  position: fixed;
  background: url(/arquivos/trustvox-selo-site-sincero-pequeno-esquerdo-x1.png) no-repeat right;
  width: 89px;
  height: 88px;
  left: 0;
  bottom: 20px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  z-index: 1;
}

#trustvox-selo-site-sincero,
#trustvox-selo-site-sincero-inside {
  -webkit-transition: width 1s, opacity .25s ease-in-out, margin 1s;
  -moz-transition: width 1s, opacity .25s ease-in-out, margin 1s;
  -ms-transition: width 1s, opacity .25s ease-in-out, margin 1s;
  -o-transition: width 1s, opacity .25s ease-in-out, margin 1s;
  transition: width 1s, opacity .25s ease-in-out, margin 1s;
}
#trustvox-selo-site-sincero:hover { width: 213px; }

#trustvox-selo-site-sincero-inside {
  opacity:0;
  display: block;
  height: 100%;
  background: url(/arquivos/trustvox-selo-site-sincero-pequeno-esquerdo-x2.png) no-repeat 6px 2px;
  margin-left: -126px;
  width: 213px;
}

#trustvox-selo-site-sincero:hover #trustvox-selo-site-sincero-inside {
  opacity:1;
  margin-left: 0;
}

#ts-certificate-modal-container #ts-certificate-overlay {z-index: 999999;}
#ts-certificate-modal-container #ts-certificate-modal {z-index: 1000000;}
```

Modelo de HTML

Chamada para estilo CSS e Javascript
```
<link rel="stylesheet" type="text/css" href="/arquivos/trustvox-selo.css" />
<script type="text/javascript" src="/arquivos/trustvox-selo.js"></script>
```

Script padrão para gerar o modal
```
<script type="text/javascript">
  var _trustvox_certificate = _trustvox_certificate || [];
  _trustvox_certificate.push(['_certificateId', 'casa-vida-natural']);
  
  (function() {
    var tv = document.createElement('script'); tv.type = 'text/javascript'; tv.async = true;
    tv.src = '//s3-sa-east-1.amazonaws.com/trustvox-certificate-modal-js/widget.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tv, s);
  })();
</script>
```

Modelo: Selo flutuante
```
<div id="trustvox-selo-site-sincero" class="ts-modal-trigger">
  <span id="trustvox-selo-site-sincero-inside"></span>
</div>
```

Modelo: Selo Fixo (geralmente fixo no rodapé)
```
<div id="trustvox-selo-site-sincero" class="ts-modal-trigger" style="cursor:pointer;">
  <img src="https://s3-sa-east-1.amazonaws.com/trustvox-certificate/right/selo-x2.png" />
</div>
```

Modelo: MicroSelo Fixo (geralmente fixo no rodapé)
```
<div id="trustvox-selo-site-sincero" class="ts-modal-trigger" style="cursor:pointer;">
  <img src="https://s3-sa-east-1.amazonaws.com/trustvox-certificate/micro/trustvox-selo-site-sincero-micro.png" />
</div>
```

Modelo: NanoSelo Fixo (geralmente fixo no rodapé)
```
<div id="trustvox-selo-site-sincero" class="ts-modal-trigger" style="cursor:pointer;">
  <img src="https://s3-sa-east-1.amazonaws.com/trustvox-certificate/nano/selo-site-sincero-nano.png" />
</div>
```

Todos estilos direto do servidor

<h3>Rodapé</h3>
<script src="https://gist.github.com/cleytonmessias/6f9b50999e24b8fc6ba5.js" type="text/javascript"></script>
<h3>Flutuante do lado direito</h3>
<script src="https://gist.github.com/cleytonmessias/2203033c55c808ff8700.js" type="text/javascript"></script>
<h3>Flutuante do lado esquerdo</h3>
<script src="https://gist.github.com/cleytonmessias/1e16bef98cbe934f11dc.js" type="text/javascript"></script>
<p>
	Caso surja alguma dúvida, só nos chamar abaixo ou dentro da Trustvox :)
</p>