* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body,
span,
p,
form,
img,
a,
input,
select,
textarea,
html,
figure,
header,
footer,
article,
section,
iframe {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
ul,
ol,
li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
.titulo1,
.titulo2,
.titulo3,
.titulo4 {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-weight: normal;
  font-family: 'Poppins', Tahoma, Arial, Helvetica, sans-serif;
}
input,
textarea {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
}
.spaceAfterCP,
.spaceBeforeCP {
  width: 100%;
  float: left;
}
a,
a:hover {
  color: #FFFFFF;
  text-decoration: none;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.fn {
  float: none;
}
/*
    @a - Tamanho largura da barra de scroll
    @b - Cor de fundo da barra fixa
    @c - Cor da barra de scroll
*/
.full-max {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 0;
}
/*BLOCOS PADRAO*/
/*
    Regras de uso:
    - Para que o traço apareça, é necessário declarar os valores (Largura, Altura e Cor).
    - Declare os valores seguindo a ordem abaixo (Item 4 apenas se necessário):
        1. @a = Largura
        2. @b = Altura
        3. @c = Cor
        4. @d = Media Querie para centralizar o traço - DECLARE APENAS QUANDO NECESSÁRIO ALTERAR A MEDIDA

        Obs: O traço centralizado (.traco-c) não tem Media Querie, pois será centralizado em todas as medidas (Desktop e Mobile).
*/
/*
    Regras de uso:
    - Para que os traços apareçam, é necessário declarar os valores (Largura, Altura e Cor).
    - Declare os valores seguindo a ordem abaixo (Item 7 apenas se necessário):
        Traço superior (Maior)
        1. @a = Largura
        2. @b = Altura
        3. @c = Cor

        Traço Inferior (Menor)
        4. @d = Largura
        5. @e = Altura
        6. @f = Cor
        7. @g = Media Querie para centralizar os traços - DECLARE APENAS QUANDO NECESSÁRIO ALTERAR A MEDIDA

        Obs: O traço duplo centralizado (.traco-duplo-c) não tem Media Querie, pois será centralizado em todas as medidas (Desktop e Mobile).
*/
/*  Legenda
    @a = Cor da película
    @b = Opacidade, caso seja necessário aplicar transparência na cor
*/
/*  Legenda
    @a = Primeira cor do grandiente (esquerda)
    @b = Segunda cor do grandiente (direita)
    @c = Opacidade, caso seja necessário aplicar transparência no gradiente
*/
/*  Legenda
    @a = Primeira cor do grandiente (cima)
    @b = Segunda cor do grandiente (baixo)
    @c = Opacidade, caso seja necessário aplicar transparência no gradiente
    @d = Altura do elemento, caso seja necessário ajustar o tamanho
*/
/*
    Legenda:
    @a = Número ou código do ícone na galeria de ícones do Icomoon
    @b = Cor do ícone
    @c = Tamanho da fonte
    @d = Tamanho do bloco e do line-height
*/
/* Animation BG */
/* Fim Animation BG */
/* Grid CSS Layout ------------------------------------------------------------------------------------- */
/* Fim Grid CSS Layout --------------------------------------------------------------------------------- */
/* ANIMAÇÃO DE ELEMENTOS */
/*Balanço suave*/
/*Shake suave*/
/*Rotação fora do Eixo*/
/*Rotação fora do Eixo - Reverse*/
@font-face {
  font-family: 'icomoon';
  src: url('../../fontes/icomoond7b7.ttf?x2sf3t') format('truetype'), url('../../fontes/icomoond7b7.woff?x2sf3t') format('woff'), url('../../fontes/icomoond7b7.svg?x2sf3t#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.servico-criacao-site .path1:before {
  content: "\e901";
  color: #fee5d0;
}
.servico-criacao-site .path2:before {
  content: "\e902";
  margin-left: -0.99707031em;
  color: #fbb56f;
}
.servico-criacao-site .path3:before {
  content: "\e905";
  margin-left: -0.99707031em;
  color: #ffffff;
}
.servico-criacao-site .path4:before {
  content: "\e90c";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path5:before {
  content: "\e90f";
  margin-left: -0.99707031em;
  color: #ffffff;
}
.servico-criacao-site .path6:before {
  content: "\e912";
  margin-left: -0.99707031em;
  color: #d66227;
}
.servico-criacao-site .path7:before {
  content: "\e915";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path8:before {
  content: "\e917";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path9:before {
  content: "\e918";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path10:before {
  content: "\e91b";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path11:before {
  content: "\e921";
  margin-left: -0.99707031em;
  color: #d66227;
}
.servico-criacao-site .path12:before {
  content: "\e923";
  margin-left: -0.99707031em;
  color: #ffffff;
}
.servico-criacao-site .path13:before {
  content: "\e924";
  margin-left: -0.99707031em;
  color: #ffffff;
}
.servico-criacao-site .path14:before {
  content: "\e925";
  margin-left: -0.99707031em;
  color: #d66227;
}
.servico-criacao-site .path15:before {
  content: "\e926";
  margin-left: -0.99707031em;
  color: #d66227;
}
.servico-criacao-site .path16:before {
  content: "\e927";
  margin-left: -0.99707031em;
  color: #d66227;
}
.servico-criacao-site .path17:before {
  content: "\e928";
  margin-left: -0.99707031em;
  color: #5e598e;
}
.servico-criacao-site .path18:before {
  content: "\e929";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path19:before {
  content: "\e92b";
  margin-left: -0.99707031em;
  color: #5e598e;
}
.servico-criacao-site .path20:before {
  content: "\e92c";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path21:before {
  content: "\e92d";
  margin-left: -0.99707031em;
  color: #ffffff;
}
.servico-criacao-site .path22:before {
  content: "\e92f";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path23:before {
  content: "\e934";
  margin-left: -0.99707031em;
  color: #d66227;
}
.servico-criacao-site .path24:before {
  content: "\e937";
  margin-left: -0.99707031em;
  color: #d66227;
}
.servico-criacao-site .path25:before {
  content: "\e938";
  margin-left: -0.99707031em;
  color: #d66227;
}
.servico-criacao-site .path26:before {
  content: "\e939";
  margin-left: -0.99707031em;
  color: #d66227;
}
.servico-criacao-site .path27:before {
  content: "\e93b";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path28:before {
  content: "\e93d";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path29:before {
  content: "\e941";
  margin-left: -0.99707031em;
  color: #fcbe8a;
}
.servico-criacao-site .path30:before {
  content: "\e942";
  margin-left: -0.99707031em;
  color: #ffe6cd;
}
.servico-criacao-site .path31:before {
  content: "\e949";
  margin-left: -0.99707031em;
  color: #ffe6cd;
}
.servico-google-ads .path1:before {
  content: "\e94b";
  color: #e7ecd7;
}
.servico-google-ads .path2:before {
  content: "\e94d";
  margin-left: -0.99414062em;
  color: #ffffff;
}
.servico-google-ads .path3:before {
  content: "\e94e";
  margin-left: -0.99414062em;
  color: #c4d29d;
}
.servico-google-ads .path4:before {
  content: "\e94f";
  margin-left: -0.99414062em;
  color: #e6ebd7;
}
.servico-google-ads .path5:before {
  content: "\e950";
  margin-left: -0.99414062em;
  color: #c4d29d;
}
.servico-google-ads .path6:before {
  content: "\e951";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path7:before {
  content: "\e953";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path8:before {
  content: "\e954";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path9:before {
  content: "\e955";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path10:before {
  content: "\e956";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path11:before {
  content: "\e957";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path12:before {
  content: "\e95c";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path13:before {
  content: "\e95d";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path14:before {
  content: "\e95e";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path15:before {
  content: "\e95f";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path16:before {
  content: "\e960";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path17:before {
  content: "\e961";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path18:before {
  content: "\e962";
  margin-left: -0.99414062em;
  color: #698d3c;
}
.servico-google-ads .path19:before {
  content: "\e963";
  margin-left: -0.99414062em;
  color: #c4d29d;
}
.servico-google-ads .path20:before {
  content: "\e965";
  margin-left: -0.99414062em;
  color: #c4d29d;
}
.servico-loja-virtual .path1:before {
  content: "\e966";
  color: #d5effa;
}
.servico-loja-virtual .path2:before {
  content: "\e967";
  margin-left: -1.00097656em;
  color: #ffffff;
}
.servico-loja-virtual .path3:before {
  content: "\e96b";
  margin-left: -1.00097656em;
  color: #ffffff;
}
.servico-loja-virtual .path4:before {
  content: "\e96c";
  margin-left: -1.00097656em;
  color: #9adbf6;
}
.servico-loja-virtual .path5:before {
  content: "\e96d";
  margin-left: -1.00097656em;
  color: #9adbf6;
}
.servico-loja-virtual .path6:before {
  content: "\e96e";
  margin-left: -1.00097656em;
  color: #97b3de;
}
.servico-loja-virtual .path7:before {
  content: "\e96f";
  margin-left: -1.00097656em;
  color: #97b3de;
}
.servico-loja-virtual .path8:before {
  content: "\e970";
  margin-left: -1.00097656em;
  color: #9adbf6;
}
.servico-loja-virtual .path9:before {
  content: "\e971";
  margin-left: -1.00097656em;
  color: #9adbf6;
}
.servico-loja-virtual .path10:before {
  content: "\e973";
  margin-left: -1.00097656em;
  color: #9adbf6;
}
.servico-loja-virtual .path11:before {
  content: "\e975";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path12:before {
  content: "\e976";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path13:before {
  content: "\e979";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path14:before {
  content: "\e97a";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path15:before {
  content: "\e97c";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path16:before {
  content: "\e97d";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path17:before {
  content: "\e97e";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path18:before {
  content: "\e97f";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path19:before {
  content: "\e980";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path20:before {
  content: "\e982";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path21:before {
  content: "\e983";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path22:before {
  content: "\e984";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path23:before {
  content: "\e986";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path24:before {
  content: "\e98c";
  margin-left: -1.00097656em;
  color: #0099cc;
}
.servico-loja-virtual .path25:before {
  content: "\e98d";
  margin-left: -1.00097656em;
  color: #cfe3f5;
}
.servico-loja-virtual .path26:before {
  content: "\e98e";
  margin-left: -1.00097656em;
  color: #cfe3f5;
}
.bg-servicos:before {
  content: "\e990";
}
.bg-banner:before {
  content: "\e98f";
}
.detalhe-titulo:before {
  content: "\e991";
}
.foguete-01:before {
  content: "\e993";
}
.foguete-02:before {
  content: "\e994";
}
.foguete-03:before {
  content: "\e995";
}
.foguete-04:before {
  content: "\e996";
}
.foguete-servicos:before {
  content: "\e997";
}
.servico-hospedagem:before {
  content: "\e999";
}
.servico-logotipo:before {
  content: "\e99b";
}
.servico-seo:before {
  content: "\e99c";
}
.servico-sistema:before {
  content: "\e99d";
}
.icon-upload1:before {
  content: "\e968";
}
.icon-tik-tok1:before {
  content: "\e992";
}
.icon-tik-tok2:before {
  content: "\e99a";
}
.logo-2020a:before {
  content: "\e907";
}
.logo-2020-b:before {
  content: "\e916";
}
.data-hora2:before {
  content: "\e964";
}
.share1:before {
  content: "\e9ac";
}
.icon-camera1:before {
  content: "\e998";
}
.icon-gear2:before {
  content: "\e985";
}
.icon-user4:before {
  content: "\e98a";
}
.icon-clip:before {
  content: "\e98b";
}
.alerta-1:before {
  content: "\e97b";
}
.pasta:before {
  content: "\e981";
}
.short:before {
  content: "\e974";
}
.star-1:before {
  content: "\e977";
}
.star-2:before {
  content: "\e978";
}
.icon-seta02-d:before {
  content: "\e952";
}
.icon-seta06-r:before {
  content: "\e958";
}
.icon-seta06-d:before {
  content: "\e9af";
}
.icon-seta06-l:before {
  content: "\e959";
}
.icon-seta07-r:before {
  content: "\e95a";
}
.icon-seta07-l:before {
  content: "\e95b";
}
.icon-seta07-d:before {
  content: "\e9b0";
}
.icon-menos2:before {
  content: "\e969";
}
.icon-mais2:before {
  content: "\e96a";
}
.icon-check02:before {
  content: "\e94c";
}
.icon-close:before {
  content: "\e947";
}
.icon-empresa2:before {
  content: "\e91a";
}
.icon-rote:before {
  content: "\e943";
}
.icon-heart:before {
  content: "\e944";
}
.icon-link:before {
  content: "\e945";
}
.icon-responsive:before {
  content: "\e946";
}
.icon-gear:before {
  content: "\e989";
}
.icon-seta2:before {
  content: "\e911";
}
.icon-store:before {
  content: "\e910";
}
.icon-trash:before {
  content: "\e900";
}
.icon-olho:before {
  content: "\e903";
}
.icon-atualizar:before {
  content: "\e904";
}
.icon-instagram-02:before {
  content: "\e94a";
}
.icon-whatsapp:before {
  content: "\e906";
}
.icon-in:before {
  content: "\e908";
}
.icon-facebook:before {
  content: "\e909";
}
.icon-twitter:before {
  content: "\e90a";
}
.icon-youtube:before {
  content: "\e90b";
}
.icon-youtube2:before {
  content: "\e92e";
}
.icon-rss:before {
  content: "\e90d";
}
.icon-blog:before {
  content: "\e90e";
}
.icon-skype:before {
  content: "\e919";
}
.icon-user3:before {
  content: "\e988";
}
.icon-user:before {
  content: "\e91c";
}
.icon-user2:before {
  content: "\e91d";
}
.icon-help:before {
  content: "\e91e";
}
.icon-info:before {
  content: "\e91f";
}
.icon-send:before {
  content: "\e920";
}
.icon-pin4:before {
  content: "\e930";
}
.icon-text:before {
  content: "\e92a";
}
.icon-clock:before {
  content: "\e931";
}
.icon-clock2:before {
  content: "\e932";
}
.icon-data:before {
  content: "\e933";
}
.icon-download:before {
  content: "\e935";
}
.icon-lupa:before {
  content: "\e936";
}
.icon-chat:before {
  content: "\e93a";
}
.icon-chat3:before {
  content: "\e93c";
}
.icon-chat5:before {
  content: "\e93e";
}
.icon-seta:before {
  content: "\e940";
}
.icon-seta02:before {
  content: "\e9b1";
}
.icon-news:before {
  content: "\e93f";
}
.icon-arroba:before {
  content: "\e922";
}
.icon-mail4:before {
  content: "\e987";
}
.icon-call01:before {
  content: "\e913";
}
.icon-call03:before {
  content: "\e914";
}
.icon-call:before {
  content: "\e948";
}
.icon-phone03:before {
  content: "\e972";
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfedw.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1xlEA.ttf) format('truetype');
}
.exemplo1-sombras {
  width: 100%;
  margin: 0 0 30px 0;
  padding: 0;
  float: left;
}
.exemplo1-sombras div {
  width: 120px;
  height: 40px;
  float: left;
  background-color: #E1E1E1;
  text-align: center;
  margin: 0 15px;
  padding: 10px 0 0 0;
}
.exemplo1-sombras .sombra1 {
  box-shadow: -5px -5px #888;
  -moz-box-shadow: -5px -5px #888;
  -webkit-box-shadow: -5px -5px #888;
  -ms-box-shadow: -5px -5px #888;
}
.exemplo1-sombras .sombra2 {
  box-shadow: -5px -5px 5px #888;
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  -ms-box-shadow: -5px -5px 5px #888;
}
.exemplo1-sombras .sombra3 {
  box-shadow: 0 0 5px #888;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px #888;
  -ms-box-shadow: 0 0 5px #888;
}
.exemplo1-sombras .sombra4 {
  box-shadow: 0 0 5px 5px #888;
  -moz-box-shadow: 0 0 5px 5px #888;
  -webkit-box-shadow: 0 0 5px 5px #888;
  -ms-box-shadow: 0 0 5px 5px #888;
}
.exemplo2-sombra-txt {
  width: 100%;
  margin: 0 0 30px 0;
  padding: 0;
  float: left;
}
.exemplo2-sombra-txt span {
  font-size: 20px;
  color: #339966;
  font-weight: 700;
  margin: 0 10px;
}
.exemplo2-sombra-txt .txt-sombra1 {
  text-shadow: 2px 2px #333;
}
.exemplo2-sombra-txt .txt-sombra2 {
  text-shadow: -2px -2px #333;
}
.exemplo2-sombra-txt .txt-sombra3 {
  text-shadow: -2px -2px 3px #333;
}
.exemplo2-sombra-txt .txt-sombra4 {
  text-shadow: 0 0 3px #333;
}
.exemplos-transition {
  width: 100%;
  margin-bottom: 25px;
}
.exemplo1-transition {
  display: inline-block;
  border-color: #000000;
  border-width: 1px;
  border-style: dashed;
  padding: 10px;
  background-color: #ffffa2;
  height: 45px;
  opacity: 0.3;
  -moz-opacity: 0.3;
  -webkit-opacity: 0.3;
  filter: alpha(opacity=0.3);
  transition: 0.3s all ease-out;
  -moz-transition: 0.3s all ease-out;
  -webkit-transition: 0.3s all ease-out;
  -ms-transition: 0.3s all ease-out;
}
.exemplo1-transition:hover {
  height: 70px;
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=1);
}
.exemplo2-transition {
  position: relative;
  display: inline-block;
  border-color: #000000;
  border-width: 1px;
  border-style: dashed;
  padding: 10px;
  background-color: #ffffa2;
  height: 45px;
  opacity: 0.3;
  -moz-opacity: 0.3;
  -webkit-opacity: 0.3;
  filter: alpha(opacity=0.3);
  margin: 0 0 0 40px;
  text-decoration: none;
  transition: 1s all ease-out;
  -moz-transition: 1s all ease-out;
  -webkit-transition: 1s all ease-out;
  -ms-transition: 1s all ease-out;
}
.exemplo2-transition:hover {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=1);
  z-index: 1000;
  -moz-transform: scale(2) rotate(30deg) translate(50px);
  -webkit-transform: scale(1.2) rotate(30deg) translate(50px);
  -o-transform: scale(2) rotate(30deg) translate(50px);
  transform: scale(2) rotate(30deg) translate(50px);
}
.exemplo3-transition {
  position: relative;
  display: inline-block;
  border-color: #000000;
  border-width: 1px;
  border-style: dashed;
  padding: 10px;
  background-color: #ffffa2;
  height: 45px;
  opacity: 0.3;
  -moz-opacity: 0.3;
  -webkit-opacity: 0.3;
  filter: alpha(opacity=0.3);
  margin: 0 0 0 40px;
  text-decoration: none;
  transition: 3s all ease-out;
  -moz-transition: 3s all ease-out;
  -webkit-transition: 3s all ease-out;
  -ms-transition: 3s all ease-out;
}
.exemplo3-transition:hover {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=1);
  z-index: 1000;
  -moz-transform: scale(2) rotate(60deg) translate(100px);
  -webkit-transform: scale(1.2) rotate(60deg) translate(100px);
  -o-transform: scale(2) rotate(60deg) translate(100px);
  transform: scale(2) rotate(60deg) translate(100px);
}
.exemplo-transition-link {
  width: 200px;
  height: 40px;
  margin: 0 0 20px;
  text-align: center;
  border-color: #060;
  border-width: 3px;
  border-style: solid;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  font-weight: 700;
  font-family: 'Arial,sans-serif';
  font-size: 24px;
  display: block;
  background-color: #9CC;
  color: #FFFFFF !important;
  transition: 1s all ease-out;
  -moz-transition: 1s all ease-out;
  -webkit-transition: 1s all ease-out;
  -ms-transition: 1s all ease-out;
}
.exemplo-transition-link:hover {
  background-color: #F66;
  color: #FF9 !important;
  border-color: #69F;
  border-width: 3px;
  border-style: solid;
  transition: 1s all ease-out;
  -moz-transition: 1s all ease-out;
  -webkit-transition: 1s all ease-out;
  -ms-transition: 1s all ease-out;
}
.exemplos-transform {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.exemplos-transform > div {
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exemplos-transform .rotate-transform {
  width: 130px;
  height: 130px;
  margin: 0 20px 0 0;
}
.exemplos-transform .rotate-transform:hover {
  transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
}
.exemplos-transform .scale-transform {
  width: 130px;
  height: 130px;
  transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
}
.exemplos-transform .scale-transform:hover {
  transform: scale(1.3);
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
}
.exemplos-transform .skew-transform {
  width: 130px;
  height: 130px;
  margin: 0 20px 0 0;
  transform: scale(0.7);
  -moz-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
}
.exemplos-transform .skew-transform:hover {
  -webkit-transform: scale(1.2) skew(30deg);
  -moz-transform: scale(1.2) skew(30deg);
  transform: scale(1.2) skew(30deg);
}
.exemplos-transform .translate-transform {
  width: 130px;
  height: 130px;
  margin: 0 20px 0 0;
  transform: scale(0.7);
  -moz-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
}
.exemplos-transform .translate-transform:hover {
  -webkit-transform: scale(1.1) translate(20px, 20px);
  -moz-transform: scale(1.1) translate(20px, 20px);
  transform: scale(1.1) translate(20px, 20px);
}
.tooltip {
  position: relative;
  font-size: 12px;
  color: #039;
  text-decoration: none;
  cursor: help;
}
.tooltip:hover {
  background-color: transparent;
  color: #f00;
  z-index: 25;
}
.tooltip:hover span {
  display: block;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 0;
  width: 210px;
  font-size: 12px;
  padding: 5px;
  border-color: #999;
  border-width: 1px;
  border-style: solid;
  background-color: #e0ffff;
  color: #000000;
}
.tooltip span {
  display: none;
}
.exemplos-cursores {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
.exemplos-cursores > div {
  padding: 10px;
  background-color: #eee;
}
.exemplos-cursores .exemplo-cursor1 {
  cursor: crosshair;
}
.exemplos-cursores .exemplo-cursor2 {
  cursor: help;
}
.exemplos-cursores .exemplo-cursor3 {
  cursor: move;
}
.exemplos-cursores .exemplo-cursor4 {
  cursor: pointer;
}
.exemplos-cursores .exemplo-cursor5 {
  cursor: text;
}
.exemplos-cursores .exemplo-cursor6 {
  cursor: wait;
}
.exemplos-cursores .cursor-img {
  cursor: url(../../images/lupa-clientes.html), default;
}
.exemplo-degrade {
  width: 100%;
  margin: 20px 0;
  text-align: center;
  padding: 10px 0;
  color: #FFFFFF;
  background: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#999999');
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#999));
  background: -moz-linear-gradient(top, #000, #999);
}
.exemplo-outline {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.exemplo-outline [type=text] {
  width: 49%;
}
@media (max-width:768px) {
  .exemplo-outline [type=text] {
    width: 100%;
    margin-bottom: 10px;
  }
}
.exemplo-outline .comoutline {
  outline: auto #69F;
}
.exemplo-outline .semoutline {
  outline: none;
}
.varios-backgrounds {
  width: 100%;
  height: 10px;
  padding: 200px 20px 20px 20px;
  border-color: #690;
  border-width: 1px;
  border-style: solid;
  color: #000000;
  font-weight: 700;
  text-align: center;
  margin: 20px 0;
  background: url(../../images/tutoriais-para-criacao-de-sites/multiplos-backgrounds/logo-css3.jpg) no-repeat center 50px, url(../../images/tutoriais-para-criacao-de-sites/multiplos-backgrounds/img-repeat.jpg) top center repeat-x, #fff;
}
.exemplo-checkbox1 {
  margin: 15px 0;
}
.exemplo-checkbox1 input[type=checkbox] {
  display: none;
}
.exemplo-checkbox1 input[type=checkbox] + label {
  display: inline-block;
  height: 20px;
  padding: 0 0 0 25px;
  margin: 0 10px 0 0;
  background-image: url(../../index.html);
  background-repeat: no-repeat;
  background-position: 0 -60px;
}
.exemplo-checkbox1 input[type=checkbox]:checked + label {
  background-position: 0 -90px;
}
.exemplo-radio1 {
  margin: 15px 0;
}
.exemplo-radio1 input[type=radio] {
  display: none;
}
.exemplo-radio1 input[type=radio] + label {
  display: inline-block;
  height: 20px;
  padding: 0 0 0 25px;
  margin: 0 10px 0 0;
  background-image: url(../../index.html);
  background-repeat: no-repeat;
  background-position: 0 -60px;
}
.exemplo-radio1 input[type=radio]:checked + label {
  background-position: 0 -30px;
}
.exemplo-checkbox2 {
  margin: 15px 0;
}
.exemplo-checkbox2 input[type=checkbox] {
  display: none;
}
.exemplo-checkbox2 label {
  cursor: pointer;
}
.exemplo-checkbox2 input[type="checkbox"] + label:before {
  display: inline-block;
  content: "\00a0";
  border-color: #5D5C5C;
  border-width: 1px;
  border-style: solid;
  font-size: 16px/1em;
  width: 16px;
  height: 16px;
  margin: 0 0.25em 0 0;
  padding: 0;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  vertical-align: top;
}
.exemplo-checkbox2 input[type="checkbox"]:checked + label:before {
  background-color: #A0A0A0;
  color: #FFFFFF;
  text-align: center;
  content: "\2713";
}
.exemplo-checkbox2 input[type="checkbox"]:checked + label:after {
  font-weight: 700;
}
.exemplo-radio2 {
  margin: 15px 0;
}
.exemplo-radio2 input[type=radio] {
  display: none;
}
.exemplo-radio2 label {
  cursor: pointer;
}
.exemplo-radio2 input[type="radio"] + label:before {
  display: inline-block;
  content: "\00a0";
  border-color: #5D5C5C;
  border-width: 1px;
  border-style: solid;
  font-size: 16px/1em;
  width: 16px;
  height: 16px;
  margin: 0 0.25em 0 0;
  padding: 0;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  vertical-align: top;
}
.exemplo-radio2 input[type="radio"]:checked + label:before {
  background-color: #A0A0A0;
  color: #FFFFFF;
  text-align: center;
  content: "\2713";
}
.exemplo-radio2 input[type="radio"]:checked + label:after {
  font-weight: 700;
}
.noticia-checkbox-personalizado {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
.noticia-checkbox-personalizado .cadastro {
  width: 400px;
  float: left;
}
.noticia-checkbox-personalizado .cadastro input[type=radio] {
  display: none;
}
.noticia-checkbox-personalizado .cadastro input[type=radio] + label {
  font-weight: 700;
  float: left;
  display: inline-block;
  width: 50%;
  height: 34px;
  margin: -2px -2px 0;
  padding: 4px 0;
  font-size: 13px;
  line-height: 28px;
  color: #FFFFFF;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #D8AB39;
  background-image: -moz-linear-gradient(top, #D8AB39, #D3A529);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#D8AB39), to(#D3A529));
  background-image: -webkit-linear-gradient(top, #D8AB39, #D3A529);
  background-image: -o-linear-gradient(top, #D8AB39, #D3A529);
  background-image: linear-gradient(to bottom, #D8AB39, #D3A529);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8AB39', endColorstr='#D3A529', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  border: none;
  border-right-color: #B48C25;
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom-color: #B48C25;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.noticia-checkbox-personalizado .cadastro input[type=radio]:checked + label {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: #91711B;
  border-right-color: #B48C25;
  border-right-width: 1px;
  border-right-style: solid;
}
.alinhar-div-1 {
  width: 100%;
  height: 100px;
  margin: 0 0 14px;
  background-color: #E4EE91;
  float: left;
}
.alinhar-div-1 #interna {
  margin: 0 auto 0;
  background-color: #507701;
  width: 50%;
  height: 100px;
  color: #FFFFFF;
  padding: 5px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.alinhar-div-2 {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #E4EE91;
  margin-bottom: 20px;
}
.alinhar-div-2 #interna {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  margin-top: -50px;
  margin-left: -100px;
  width: 200px;
  height: 100px;
  background-color: #507701;
  color: #FFFFFF;
  padding: 5px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.alinhar-div-3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  background-color: #E4EE91;
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}
.alinhar-div-3 #interna {
  background-color: #507701;
  width: 200px;
  color: #FFFFFF;
  padding: 5px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.alinhar-div-4 {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #E4EE91;
  margin-bottom: 20px;
}
.alinhar-div-4 #interna {
  position: absolute;
  height: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #507701;
  color: #FFFFFF;
  padding: 5px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.alinhar-div-5 {
  text-align: center;
  width: 100%;
  height: 100px;
  background-color: #E4EE91;
  margin-bottom: 20px;
}
.alinhar-div-5 #interna {
  display: inline-block;
  background-color: #507701;
  height: 100px;
  color: #FFFFFF;
  padding: 5px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.alinhar-div-6 {
  width: 100%;
  height: 100px;
  background-color: #507701;
  display: table;
  margin-bottom: 20px;
}
.alinhar-div-6 #interna {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  color: #FFFFFF;
  padding: 5px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.exemplo-selects {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
.exemplo-selects #appearance-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../../index.html) no-repeat #eeeeee;
  background-position: 218px center;
  width: 250px;
  height: 30px;
  border-color: #ddd;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 20px;
  padding: 5px;
}
.exemplo-selects .div-select {
  width: 250px;
  overflow: hidden;
}
.exemplo-selects .div-select select {
  background: url(../../index.html) no-repeat #354880;
  background-position: 205px center;
  width: 270px;
  height: 48px;
  font-size: 18px;
  padding: 13px 20px 13px 12px;
  color: #FFFFFF;
  text-indent: 0.01px;
  text-overflow: "";
}
.exemplo-selects .div-select select::-ms-expand {
  display: none;
}
.exemplo-setas {
  width: 100%;
  float: left;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.exemplo-setas .seta-1 {
  border-left-color: #C00;
  border-left-width: 30px;
  border-left-style: solid;
  border-top-color: transparent;
  border-top-width: 30px;
  border-top-style: solid;
  border-bottom-color: transparent;
  border-bottom-width: 30px;
  border-bottom-style: solid;
  margin: 0 10px;
  float: left;
}
.exemplo-setas .seta-2 {
  border-right-color: #C0C;
  border-right-width: 30px;
  border-right-style: solid;
  border-top-color: transparent;
  border-top-width: 30px;
  border-top-style: solid;
  border-bottom-color: transparent;
  border-bottom-width: 30px;
  border-bottom-style: solid;
  margin: 0 10px;
  float: left;
}
.exemplo-setas .seta-3 {
  border-bottom-color: #0C0;
  border-bottom-width: 40px;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-width: 20px;
  border-left-style: solid;
  border-right-color: transparent;
  border-right-width: 20px;
  border-right-style: solid;
  margin: 0 10px;
  float: left;
}
.exemplo-setas .seta-4 {
  border-top-color: #0CC;
  border-top-width: 40px;
  border-top-style: solid;
  border-left-color: transparent;
  border-left-width: 50px;
  border-left-style: solid;
  border-right-color: transparent;
  border-right-width: 50px;
  border-right-style: solid;
  margin: 0 10px;
  float: left;
}
.exemplo-setas .seta-5 {
  padding: 10px 20px;
  background-color: #c00;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -ms-border-radius: 50px;
  float: left;
  transition: 0.2s all ease-out;
  -moz-transition: 0.2s all ease-out;
  -webkit-transition: 0.2s all ease-out;
  -ms-transition: 0.2s all ease-out;
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=1);
}
.exemplo-setas .seta-5 i {
  border-left-color: #FFFFFF;
  border-left-width: 10px;
  border-left-style: solid;
  border-top-color: transparent;
  border-top-width: 10px;
  border-top-style: solid;
  border-bottom-color: transparent;
  border-bottom-width: 10px;
  border-bottom-style: solid;
  float: left;
  margin: 0 10px;
}
.exemplo-setas .seta-5:hover {
  opacity: 0.7;
  -moz-opacity: 0.7;
  -webkit-opacity: 0.7;
  filter: alpha(opacity=0.7);
  box-shadow: 0 0 4px #600;
  -moz-box-shadow: 0 0 4px #600;
  -webkit-box-shadow: 0 0 4px #600;
  -ms-box-shadow: 0 0 4px #600;
}
.exemplo-setas .seta-6 {
  padding: 15px 20px;
  background-color: #069;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -ms-border-radius: 50px;
  float: left;
  margin: 0 10px;
}
.exemplo-setas .seta-6 i {
  border-right-color: #FFFFFF;
  border-right-width: 20px;
  border-right-style: solid;
  border-top-color: transparent;
  border-top-width: 15px;
  border-top-style: solid;
  border-bottom-color: transparent;
  border-bottom-width: 15px;
  border-bottom-style: solid;
  float: left;
  transition: 0.2s all ease-out;
  -moz-transition: 0.2s all ease-out;
  -webkit-transition: 0.2s all ease-out;
  -ms-transition: 0.2s all ease-out;
}
.exemplo-setas .seta-6:hover i {
  transform: rotate(360deg) scale(1.2);
}
.exemplo-setas .seta-7 {
  padding: 15px 20px;
  border-color: #ccc;
  border-width: 6px;
  border-style: solid;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -ms-border-radius: 50px;
  float: left;
  margin: 0 10px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  -ms-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  transition: 0.2s all ease-out;
  -moz-transition: 0.2s all ease-out;
  -webkit-transition: 0.2s all ease-out;
  -ms-transition: 0.2s all ease-out;
}
.exemplo-setas .seta-7 i {
  border-left-color: #ccc;
  border-left-width: 20px;
  border-left-style: solid;
  border-top-color: transparent;
  border-top-width: 15px;
  border-top-style: solid;
  border-bottom-color: transparent;
  border-bottom-width: 15px;
  border-bottom-style: solid;
  float: left;
}
.exemplo-setas .seta-7:hover {
  transform: rotateX(180deg);
}
.exemplo-bgs {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
.exemplo-bgs .exemplo-background1 {
  width: 280px;
  height: 200px;
  padding: 5px;
  border-color: #333;
  border-width: 1px;
  border-style: solid;
  background-image: url(../../index.html);
  background-repeat: no-repeat;
  background-size: 180px 180px;
  background-color: #999;
  color: #FFFFFF;
  font-size: 15px;
  margin: 10px 20px 0 0;
}
.exemplo-bgs .exemplo-background2 {
  width: 280px;
  height: 200px;
  padding: 5px;
  border-color: #333;
  border-width: 1px;
  border-style: solid;
  background-image: url(../../index.html);
  background-repeat: no-repeat;
  background-size: 60% 60%;
  background-color: #999;
  color: #FFFFFF;
  font-size: 15px;
  margin: 10px 0 0 0;
}
.exemplo-bgs .exemplo-background3 {
  width: 604px;
  height: 90px;
  padding: 5px;
  border-color: #333;
  border-width: 1px;
  border-style: solid;
  background-image: url(../../index.html);
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #999;
  color: #FFFFFF;
  font-size: 15px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.exemplo-bgs .exemplo-background4 {
  width: 604px;
  height: 90px;
  padding: 5px;
  border-color: #333;
  border-width: 1px;
  border-style: solid;
  background-image: url(../../index.html);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #999;
  color: #FFFFFF;
  font-size: 15px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.exemplo-menu-drop {
  width: 100%;
  float: left;
  margin-bottom: 20px;
  /*Configurações Padrões*/
}
.exemplo-menu-drop ul.menua,
.exemplo-menu-drop .menua li,
.exemplo-menu-drop .menua a {
  margin: 0;
  padding: 0;
  list-style-type: none !important;
  text-decoration: none;
  color: #000000;
}
.exemplo-menu-drop ul.menua:after,
.exemplo-menu-drop .menua li:after,
.exemplo-menu-drop .menua a:after {
  display: none;
}
.exemplo-menu-drop ul.menua {
  float: left;
  font-size: 15px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  padding: 0 5px;
  background-color: #CCC;
  position: relative;
  z-index: 1000;
}
.exemplo-menu-drop ul.menua ul {
  position: absolute;
  display: none;
  box-shadow: 3px 3px 2px #333;
  -moz-box-shadow: 3px 3px 2px #333;
  -webkit-box-shadow: 3px 3px 2px #333;
  -ms-box-shadow: 3px 3px 2px #333;
  margin: 0;
}
.exemplo-menu-drop ul.menua li {
  float: left;
  width: auto;
  position: relative;
}
.exemplo-menu-drop ul.menua li a {
  display: block;
  padding: 0 20px;
  line-height: 45px;
  height: 45px;
  float: left;
  transition: 0.3s all ease-out;
  -moz-transition: 0.3s all ease-out;
  -webkit-transition: 0.3s all ease-out;
  -ms-transition: 0.3s all ease-out;
}
.exemplo-menu-drop ul.menua li:hover > a {
  background-color: #999;
  color: #FFFFFF;
}
.exemplo-menu-drop ul.menua li:hover > ul.submenu-1 {
  display: block;
  top: 45px;
  left: 0;
  padding: 5px;
  width: 200px;
  border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  -ms-border-radius: 0 0 5px 5px;
}
.exemplo-menu-drop ul.menua li:hover > ul.submenu-2 {
  display: block;
  top: 0;
  left: 187px;
  padding: 5px;
  width: 200px;
  border-radius: 0 5px 5px 5px;
  -moz-border-radius: 0 5px 5px 5px;
  -webkit-border-radius: 0 5px 5px 5px;
  -ms-border-radius: 0 5px 5px 5px;
}
.exemplo-menu-drop ul.menua li:hover > ul.submenu-3 {
  display: block;
  top: 0;
  left: 187px;
  padding: 5px;
  width: 200px;
  border-radius: 0 5px 5px 5px;
  -moz-border-radius: 0 5px 5px 5px;
  -webkit-border-radius: 0 5px 5px 5px;
  -ms-border-radius: 0 5px 5px 5px;
}
.exemplo-menu-drop ul.menua .submenu-1 a,
.exemplo-menu-drop ul.menua .submenu-2 a,
.exemplo-menu-drop ul.menua .submenu-3 a {
  width: 160px;
  padding: 0 20px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
}
.exemplo-menu-drop ul.menua .submenu-1 {
  background-color: #999;
}
.exemplo-menu-drop ul.menua .submenu-1 a {
  color: #FFFFFF;
  width: 100%;
}
.exemplo-menu-drop ul.menua .submenu-1 li {
  width: 100%;
}
.exemplo-menu-drop ul.menua .submenu-1 li:hover > a {
  background-color: #666;
}
.exemplo-menu-drop ul.menua .submenu-2 {
  background-color: #666;
}
.exemplo-menu-drop ul.menua .submenu-2 a {
  color: #FFFFFF;
}
.exemplo-menu-drop ul.menua .submenu-2 li:hover > a {
  background-color: #000000;
}
.exemplo-menu-drop ul.menua .submenu-3 {
  background-color: #000000;
}
.exemplo-menu-drop ul.menua .submenu-3 a {
  color: #FFFFFF;
}
.exemplo-menu-drop ul.menua .submenu-3 li:hover > a {
  background-color: #333;
}
.principal-valign {
  width: 100%;
  text-align: center;
  display: table;
  margin-bottom: 20px;
}
.principal-valign .coluna-1 {
  width: 33.3%;
  height: 75px;
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
  display: table-cell;
  vertical-align: bottom;
}
.principal-valign .coluna-2 {
  width: 33.3%;
  height: 75px;
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
  display: table-cell;
  vertical-align: middle;
}
.principal-valign .coluna-3 {
  width: 33.3%;
  height: 75px;
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
  display: table-cell;
  vertical-align: super;
}
.elemento-dinamico {
  width: 100%;
  height: 100px;
  line-height: 100px;
  background-color: #000000;
  position: relative;
  text-align: center;
  color: #FFFFFF;
  float: left;
  margin: 45px 0 20px;
}
.elemento-dinamico:after {
  content: 'after';
  width: 50%;
  height: 40px;
  line-height: 40px;
  background-color: #ff0000;
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 0;
  color: #FFFFFF;
  text-align: center;
}
.alinha-txt {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
.alinha-txt .titulo1 {
  width: 100%;
  background-color: #360;
  line-height: 50px;
  font-size: 18px;
  color: #FFFFFF;
  float: left;
  text-align: center;
}
.alinha-txt .titulo2 {
  width: 90%;
  background-color: #036;
  line-height: 80px;
  font-size: 18px;
  color: #FFFFFF;
  float: left;
  text-align: center;
  margin: 25px 0;
}
.alinha-txt .menu1 {
  width: 20%;
  background-color: #8c0000;
  line-height: 40px;
  font-size: 18px;
  color: #FFFFFF;
  float: left;
  margin: 0 2px;
  text-align: center;
}
.alinha-txt .titulo1b {
  width: 100%;
  background-color: #360;
  font-size: 18px;
  line-height: 50px;
  color: #FFFFFF;
  float: left;
  text-align: center;
  margin: 25px 0;
}
.alinha-txt .titulo2b {
  width: 100%;
  background-color: #600;
  font-size: 18px;
  color: #FFFFFF;
  float: left;
  text-align: center;
  padding: 16px 0 17px 0;
}
.alinha-txt .titulo1c {
  width: 100%;
  background-color: #666;
  line-height: 40px;
  font-size: 14px;
  color: #FFFFFF;
  float: left;
  text-align: center;
  margin: 25px 0;
}
.cantos-arredondados {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
.cantos-arredondados div {
  background-color: #333;
  width: 65%;
  margin: 0 auto 0;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -ms-border-radius: 7px;
  float: left;
}
.form-personalizado {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
.form-personalizado .teste1 input[type=text] {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  box-shadow: 1px 1px 2px #333333;
  -moz-box-shadow: 1px 1px 2px #333333;
  -webkit-box-shadow: 1px 1px 2px #333333;
  -ms-box-shadow: 1px 1px 2px #333333;
  background-color: #ccc;
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
  width: 150px;
}
.form-personalizado .teste1 textarea {
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
  background-color: #ccc;
  width: 150px;
  height: 100px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  box-shadow: 1px 1px 2px #333333;
  -moz-box-shadow: 1px 1px 2px #333333;
  -webkit-box-shadow: 1px 1px 2px #333333;
  -ms-box-shadow: 1px 1px 2px #333333;
}
.form-personalizado .teste1 input[type=text]:hover,
.form-personalizado .teste1 textarea:hover {
  background-color: #FFFFFF;
  border-color: #990000;
  border-width: 1px;
  border-style: solid;
}
.form-personalizado .teste1 input[type=submit] {
  background-color: #006699;
  color: #FFFFFF;
}
.alpha-rgb {
  width: 100%;
  float: left;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}
.alpha-rgb .vermelho1 {
  width: 20%;
  height: 170px;
  color: #FFFFFF;
  font-weight: 700;
  background-color: rgba(255, 0, 0, 0.1);
}
.alpha-rgb .vermelho2 {
  width: 20%;
  height: 170px;
  color: #FFFFFF;
  font-weight: 700;
  background-color: rgba(255, 0, 0, 0.3);
}
.alpha-rgb .vermelho3 {
  width: 20%;
  height: 170px;
  color: #FFFFFF;
  font-weight: 700;
  background-color: rgba(255, 0, 0, 0.5);
}
.alpha-rgb .vermelho4 {
  width: 20%;
  height: 170px;
  color: #FFFFFF;
  font-weight: 700;
  background-color: rgba(255, 0, 0, 0.7);
}
.alpha-rgb .vermelho5 {
  width: 20%;
  height: 170px;
  color: #FFFFFF;
  font-weight: 700;
  background-color: rgba(255, 0, 0, 0.9);
}
.alpha-rgb .azul {
  width: 200px;
  height: 100px;
  background-color: rgba(0, 0, 255, 0.5);
  margin: 0 50px 0 0;
  box-shadow: 10px 10px 5px rgba(0, 0, 255, 0.3);
  -moz-box-shadow: 10px 10px 5px rgba(0, 0, 255, 0.3);
  -webkit-box-shadow: 10px 10px 5px rgba(0, 0, 255, 0.3);
  -ms-box-shadow: 10px 10px 5px rgba(0, 0, 255, 0.3);
}
.alpha-rgb .verde {
  width: 200px;
  height: 100px;
  background-color: rgba(0, 255, 0, 0.5);
  box-shadow: 10px 10px 5px rgba(0, 255, 0, 0.2);
  -moz-box-shadow: 10px 10px 5px rgba(0, 255, 0, 0.2);
  -webkit-box-shadow: 10px 10px 5px rgba(0, 255, 0, 0.2);
  -ms-box-shadow: 10px 10px 5px rgba(0, 255, 0, 0.2);
}
.transp-div {
  width: 100%;
  float: left;
  margin-bottom: 20px;
  background-color: #000000;
  padding: 10px;
}
.transp-div .transparencia1 {
  background-color: #FFFFFF;
  opacity: 0.1;
  -moz-opacity: 0.1;
  -webkit-opacity: 0.1;
  filter: alpha(opacity=0.1);
  margin-bottom: 10px;
  text-align: center;
  padding: 5px;
}
.transp-div .transparencia2 {
  background-color: #FFFFFF;
  opacity: 0.3;
  -moz-opacity: 0.3;
  -webkit-opacity: 0.3;
  filter: alpha(opacity=0.3);
  margin-bottom: 10px;
  text-align: center;
  padding: 5px;
}
.transp-div .transparencia3 {
  background-color: #FFFFFF;
  opacity: 0.5;
  -moz-opacity: 0.5;
  -webkit-opacity: 0.5;
  filter: alpha(opacity=0.5);
  margin-bottom: 10px;
  text-align: center;
  padding: 5px;
}
.transp-div .transparencia4 {
  background-color: #FFFFFF;
  opacity: 0.7;
  -moz-opacity: 0.7;
  -webkit-opacity: 0.7;
  filter: alpha(opacity=0.7);
  text-align: center;
  padding: 5px;
}