a, img { border: 0px; }

a, body, a:hover {
  -moz-transition: all 0.30s ease-in-out;
  -webkit-transition: all 0.30s;
  -ms-transition: all 0.30s;
  -o-transition: all 0.30s;
  -o-transition: all 0.30s;
}

body {
  background: url("/images/bg.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
  color: #FFFFFF;
  font-family: 'Noticia Text',serif;
  height: 100%;
  margin: 0;
  position: absolute;
  width: 100%;
}

a {
  color:#fff;
  font-weight: bold;
}

.logo {
  left: 50%;
  margin-left: -280px;
  margin-top: -177px;
  position: absolute;
  top: 50%;
}

#redes {
  float: left;
}

#redes a, nav a {
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  cursor: pointer;
  float: left;
  font-family: arial;
  font-weight: 700;
  height: 35px;
  margin: 5px;
  text-align: center;
  width: 35px;
}

#redes a:hover, nav a:hover, .selecionado {
  background-color: #d17a48;
}

#redes a img {
  height: 26px;
  margin: 3px auto;
  width: 25px;
}
.veja {
  float: left;
  margin-right: -56px;
  margin-top: 35px;
  -moz-transform:rotate(-5deg);
  -webkit-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

.seta {
  float: left;
  margin-right: -24px;
  margin-top: 44px;
}

nav {
  position: absolute;
  width: 50px;
  top: 30px; left: 30px; 
}

nav span {
  float: left;
  font-size: 16px;
  height: 22px;
  margin-top: 7px;
  text-align: center;
  width: 100%;
}

#redes { top: 30px; right: 30px; position: absolute;}

article {
  height: 250px;
  left: 50%;
  margin-left: -495px;
  position: absolute;
  top: 50%;
  width: 990px;
}

article h2 {
  line-height: 47px;
  font-size: 26px;
}

main {
  height: 100%;
  min-height: 600px;
  width: 100%;
}




#cartao {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform .4s;
         -moz-transition: -moz-transform .4s;
         -ms-transition: -ms-transform .4s;
           -o-transition: -o-transform .4s;
              transition: transform .4s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
         -ms-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

#cartao:hover{
  -moz-transform:rotate(-5deg);
  -webkit-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

.mudar #gs #cartao {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#cartao img {
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}

#cartao .marca-preto {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#gs {
  height: 96px;
  left: 50%;
  margin-left: -60px;
  margin-top: -108px;
  position: absolute;
  top: 50%;
  width: 95px;
  z-index: 1000;
  cursor: pointer;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px; 
}

.mudar { color: #000; background: url("/images/bg-branco.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);}

.mudar #redes a, .mudar nav a {
  border: 2px solid #000;
}
.mudar a {
  color:#000;
}

.marca-preto { display: none!important;}
.aparece { display: block!important;}

.fale-comigo {
  font-size: 20px;
}

/*.mobile {
  display: none;
}*/

@media (max-width:991px) {

#redes a, nav a {
    margin: 3px;
}

.mobile {
  display: block;
}
#redes {
  float: none;
  margin: 0 auto;
  position: relative;
  right: auto;
  top: 30px;
  width: 410px;
}

article {
  float: left;
  height: auto;
  left: 0;
  margin-left: 0;
  position: relative;
  top: 0;
  width: 100%;
}

article h2, article p {
  font-size: 16px;
  line-height: 29px;
  margin: 10px 15px;
}

header {
  float: left;
  height: 120px;
  margin-top: 10px;
  position: relative;
  width: 100%;
}

.logo {
  margin-left: -175px;
  margin-top: 0;
  top: 0;
  width: 370px;
}

#redes {
  float: none;
  margin: 0 auto;
  position: relative;
  right: auto;
  top: 30px;
  width: 400px;
}

nav {
  float: left;
  left: 0;
  position: relative;
  top: 10px;
  width: 100%;
}

#gs {
  height: 65px;
  left: 50%;
  margin-left: -31px;
  margin-top: -14px;
  top: 50%;
  width: 65px;
}

}