/* Geral */

.navbar {
background: #121a41;  
}

.navbar-nav li {
white-space: nowrap;
}

.navbar-brand img {
width: 330px;
}

#lingua {
width: 40px;
}

#lingua a {
width: 29px;
height: 19px;
overflow: hidden;
border-radius: 3px;
display: inline-block;
background-color: transparent;
background-size: 136px 20px;
background-image: url('../imagens/bandeiras.jpg');
background-repeat: no-repeat;
}

#lingua a[href="en"]{
background-position: -105px 0;
}

#lingua a[href="es"]{
background-position: -2px 0;
}

#lingua a[href="\/"]{
background-position: -37px 0;
}

#lingua a span {
visibility: hidden;
font-size: 3px;
}

#empresa {
background: #121a41; /* Old browsers */
background: -moz-linear-gradient(left, #121a41 0%, #000114 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #121a41 0%,#000114 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #121a41 0%,#000114 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#121a41', endColorstr='#000114',GradientType=1 ); /* IE6-9 */
}

#empresa .colorida {
background-color: #172153;
border-radius: 15px;
}

#empresa .colorida h3 {
font-weight: bold;
font-size: 50px;
color: #C7D1FD;
}

#empresa .baixo h3 {
/* WebKit (Safari/Chrome) Only */
-webkit-text-stroke: 1px white;

color: #121a41;

text-shadow:
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff;

font-weight: bold;
font-size: 50px;
}

#knowhow {
background: #221506 url('../imagens/fundo_marrom.gif') 0 100% no-repeat;
}

#knowhow #chamadas>div {
border-radius: 20px;
}

#knowhow #chamadas>div a:hover {
text-decoration: none;
}

#knowhow #chamadas>div:hover {
background-color: rgba(0,0,0,.3);
}

#contato .colorido {
background: #121f53 url('../imagens/fundo_contato.jpg') 0 0;
background-size: cover;
}

footer {
position: relative;
}

footer img {
position: absolute;
right: 20px;
bottom: 40px;
}

footer li {
flex: 0;
list-style-type: none;
float: left;
}

footer li a {
color: black;
text-decoration: underline;
}

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  color: #5a5a5a;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  
}

.carousel-indicators li {
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0 15px;
}

.carousel-indicators li.active {
background-color: #0066ff;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 38rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 38rem;
}

#myCarousel .balao.marrom {
border-radius: 20px;
background-color: #391700;
width: 650px;
position: absolute;
padding: 10px;
transition: all .2s ease-in-out;
transform: scale(0.1);
transition-delay: .6s;
opacity: .1;
}

#myCarousel .balao.azul {
border-radius: 20px;
background-color: #1f2b3b;
width: 650px;
position: absolute;
padding: 10px;
transition: all .3s ease-in-out;
transform: scale(0.1);
opacity: .1;
}

#myCarousel .carousel-item.active .balao.azul, #myCarousel .carousel-item.active .balao.marrom {
transform: scale(1);
opacity: 1;
} 

#myCarousel .terceiro .balao.azul {
top: 120px;
left: 18vh;
width: 580px;
}

#myCarousel .terceiro .balao.azul .bico{
position: absolute;
bottom: -50px;
left: 40px;
}

#myCarousel .terceiro .balao.marrom {
top: 380px;
right: 15vh;
width: 600px;
}

#myCarousel .terceiro .balao.marrom .bico{
position: absolute;
top: -60px;
right: 40px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}

#myCarousel .segundo .balao.azul {
top: 350px;
right: 18vh;
width: 600px;
}

#myCarousel .segundo .balao.azul .bico{
position: absolute;
bottom: -50px;
left: 40px;
}

#myCarousel .segundo .balao.marrom {
top: 200px;
left: 20vh;
width: 480px;
}

#myCarousel .segundo .balao.marrom .bico{
position: absolute;
top: -60px;
left: 40px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}

#myCarousel .primeiro .balao.azul {
top: 160px;
left: 25vh;
width: 380px;
}

#myCarousel .primeiro .balao.azul .bico{
position: absolute;
bottom: -50px;
left: 40px;
}

#myCarousel .primeiro .balao.marrom {
top: 350px;
right: 30vh;
width: 400px;
}

#myCarousel .primeiro .balao.marrom .bico{
position: absolute;
top: -60px;
left: 40px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}

/* RESPONSIVE CSS
-------------------------------------------------- */

.flex-equal > * {
  -ms-flex: 1;
  flex: 1;
}
@media (max-width: 768px) {
  .flex-md-equal > * {
    -ms-flex: 1;
    flex: 1;
  }

  .navbar-brand img {
  width: 200px;
  }

  #myCarousel .primeiro, #myCarousel .segundo, #myCarousel .terceiro  {
  padding-top: 50px;
  }

  #myCarousel .primeiro .balao.azul {
  width: 60%;
  margin: 20px;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  clear: both;
  }

  #myCarousel .primeiro .balao.marrom {
  width: 60%;
  margin: 20px auto;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  clear: both;
  }

  #myCarousel .segundo .balao.azul {
  width: 80%;
  margin: 20px;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  clear: both;
  }

  #myCarousel .segundo .balao.marrom {
  width: 80%;
  margin: 20px auto;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  clear: both;
  }

  #myCarousel .terceiro .balao.azul {
  width: 80%;
  margin: 20px;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  clear: both;
  }

  #myCarousel .terceiro .balao.marrom {
  width: 80%;
  margin: 20px auto;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  clear: both;
  }

  #myCarousel .primeiro .balao.azul .bico, #myCarousel .primeiro .balao.marrom .bico, #myCarousel .segundo .balao.azul .bico, #myCarousel .segundo .balao.marrom .bico, #myCarousel .terceiro .balao.azul .bico, #myCarousel .terceiro .balao.marrom .bico{
  display: none;
  }

}

.overflow-hidden { overflow: hidden; }