/* ESTILO GAVEA 

Maio 2016
Mulisha Estudio Criativo
@raru

Bootstrap 

-------------------------------------------------- */
/*  */

body {
  color: #5a5a5a;
  font-family: 'Oswald', sans-serif;
  margin: 0;
  padding: 0; 
}

a { color: #5a5a5a; }
a:hover { }
b, strong { font-weight: 400; }
p { font-size: 13px; font-weight: 200; line-height: 1.8em; }
h1 { color: #333; }
h1, h2, h3, h4, h5 { font-weight: 200; line-height: 1.3em; }
.row { margin: auto; }
.form-control {  font-size: 12px; }


.btn-default {   background: none; border-color: #666; font-size: 12px; font-weight: 200;  padding-right: 50px;    -webkit-transition: all 0.5s ease; /* Safari and Chrome */  -moz-transition: all 0.5s ease; /* Firefox */  -o-transition: all 0.5s ease; /* IE 9 */  -ms-transition: all 0.5s ease; /* Opera */    transition: all 0.5s ease;}
.btn-default:hover { background: none; border-color: #b24246; color: #b24246; }
.btn-default:after{ content:""; position:absolute;  border-bottom:1px solid #efefef;  width:55px; top: 100; left: 160; transform: rotate(-45deg);  transform-origin: 80% 100%; }

.navbar { margin-bottom: 40px; }
.navbar-header .logo { width: 250px; margin: 0 0 0 20%; }
.navbar-header .logo:hover { opacity: .6;  -webkit-transition: all 0.5s ease; /* Safari and Chrome */  -moz-transition: all 0.5s ease; /* Firefox */  -o-transition: all 0.5s ease; /* IE 9 */  -ms-transition: all 0.5s ease; /* Opera */    transition: all 0.5s ease;    }
.navbar-nav { float: right; padding: 2% 5% 0 0; }
.navbar-nav a { font-weight: 200; }
.navbar-nav li.active {  }
.nav>li>a:focus, .nav>li>a:hover { background: none;}
.navbar-nav li a:hover {   color: #ccc;  -webkit-transition: all 0.5s ease; /* Safari and Chrome */  -moz-transition: all 0.5s ease; /* Firefox */  -o-transition: all 0.5s ease; /* IE 9 */  -ms-transition: all 0.5s ease; /* Opera */    transition: all 0.5s ease;}
.navbar-collapse { padding: 0; }
.navbar-wrapper { top: 30px; }


/* FADEIN EFFECT */
.fadeInBlock, #myCarousel {    opacity:0; }


/* HOME CAROUSEL */
.carousel { margin: 0;  }
.carousel-control.right, .carousel-control.left { background-image: none; }
.carousel-caption { bottom: 100px; color: #333;  text-align: left; text-shadow: none;  right: 65%; left: 5%;  }
.carousel-caption h1 { font-size: 26px; }
.carousel-caption hr { border-bottom: 5px solid #b24246; margin-left: 0; width: 20%; text-align: left;  }
.carousel-caption p { font-size: 14px; margin-top: 30px;  }
.carousel-indicators { bottom: 30px; }



/* SOBRE */
.container-fluid {padding: 10px 0 0; }
.sobre { color: #5a5a5a; padding: 10px 0 40px; padding: 50px 0; text-align: center; } 
.sobre .row { margin: auto; }
.sobre .row .col-md-4.yellow { background: #ebb240; min-height: 300px; -webkit-box-shadow: 5px 1px 10px 3px rgba(0,0,0,0.13);
-moz-box-shadow: 5px 1px 10px 3px rgba(0,0,0,0.13); box-shadow: 5px 1px 10px 3px rgba(0,0,0,0.13);  }
.sobre .row .col-md-4.yellow div:after{ content:""; position:absolute;  border-bottom:1px solid white;  width:425px; left: 0; transform: rotate(-45deg);  transform-origin: 100% 20%; }
.sobre p {  padding: 30px;  text-align: left; }
.sobre h1 { font-size: 26px; font-weight: 200; text-transform: uppercase; bottom: 0;  right: 10px;  text-align: right;  position: absolute; color: white;}


/* CLIENTES */
.clientes { margin-bottom: 200px; margin-top: 200px; }
.clientes img { width: 100%; }
.clientes img:hover { cursor: pointer; opacity: .7; }

.clientes .row { margin-bottom: 30px; }



/* CASES */

.cases { padding: 60px 0 0; margin-top: 200px;  }
.cases .row .col-md-4 { height: 300px;  padding: 0; overflow: hidden; }
.cases .row .col-md-4 img { height: 100%;  width: 100%; position: absolute; top: 0;}
.cases .row .col-md-4 .inner { width: 100%; height: 100%; z-index: 1; position:relative;  overflow:hidden;  cursor: pointer;  }
.cases .row .col-md-4 .inner:after {
    height:100%;
    width:150%;
    position:relative;
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    transform: rotate(-35deg);
    content:'';
    display:block;
    position:absolute;
    left:-35%;
    top: -51%;
    background:  rgba(0,0,0,.7);
}
.cases .row .col-md-4:hover .inner:after { opacity: .1; -webkit-transition: all 0.8s ease; /* Safari and Chrome */  -moz-transition: all 0.8s ease; /* Firefox */ -o-transition: all 0.8s ease; /* IE 9 */  -ms-transition: all 0.8s ease; /* Opera */  transition: all 0.8s ease;}
.cases .row .col-md-4:hover img { width:110%; height: 110%; -webkit-transition: all 0.4s ease; /* Safari and Chrome */  -moz-transition: all 0.4s ease; /* Firefox */ -o-transition: all 0.4s ease; /* IE 9 */  -ms-transition: all 0.4s ease; /* Opera */  transition: all 0.4s ease;}

.cases .row .col-md-4 h2 { color: #fff; font-weight: 200; position: absolute; padding: 20px; z-index: 2; cursor: pointer;}
.cases .row .col-md-4 a { color: #fff; font-weight: 200; position: absolute; padding: 90px 23px; z-index: 2; width: 100%; height: inherit;  }

.cases .row .blue { background: #00BBD2; min-height: 300px; }
.cases .row .blue div:after{ content:""; position:absolute;  border-bottom:1px solid white;  width:425px; left: 0; transform: rotate(-45deg);  transform-origin: 100% 20%; }
.cases .row .blue h1 { font-size: 26px; font-weight: 300; text-transform: uppercase; bottom: 0;  right: 10px;  text-align: right;  position: absolute; color: white;}

span.loadMore { text-align: center;  font-weight: 300; font-size: 15px; margin-top: 20px;}
span.loadMore a:hover, span.loadMore a:focus { color:#00BBD2;  text-decoration: none; opacity: .8; }


/* CASES OPEN */
.modal-dialog { width: 65%;  }
.modal-content { border: none; box-shadow: none; }
.modal-bkg {  background: url(../img/cases/bkg-cases.png) repeat-x;  border-bottom: 7px solid #2AB4CE;}
.modal-body p { margin-top: 20px; }

.close {  position: absolute;top: 0;right: 10px;z-index: 999;font-family: 'helvetica neue', sans-serif;font-size: 95px;font-weight: 100;line-height: 1;color: #2AB4CE;filter: alpha(opacity=100);opacity: 1;text-shadow: none;}
.close:hover { color: #ebb240; }



/* FOOTER */

footer {  background: #efefef url(../img/footer/nav_icon@2x.png) no-repeat bottom right; background-origin: content-box; background-size: 100px;  border-bottom: 6px solid #ebb240;  font-weight: 200; margin-top: 220px !important;}
footer .col-md-5, footer .col-md-2, footer .col-md-4, footer .col-md-1 { padding: 5% 5% 0; } 

footer .pull-right { font-size: 11px; margin-right: 50px;}

footer ul { list-style: none; padding: 0; }
footer ul li { display: inline-block; }

footer a.links:before  {    content: "";  display: block; width: 20px;  height: 20px; float: left;  margin: 0 6px 0 0;  }
footer a.fb:before  {  background: url("../img/footer/icon-fb.png") no-repeat; background-size: cover; }
footer a.inst:before  {  background: url("../img/footer/icon-in.png") no-repeat; background-size: cover; margin-left: 20px;}
footer a.end:before  {  background: url("../img/footer/icon-ad.png") no-repeat; background-size: cover; margin-top: 10px; }
footer a.tel:before  {  background: url("../img/footer/icon-tel.png") no-repeat; background-size: cover; margin-top: 15px; }
footer a.email:before  {  background: url("../img/footer/icon-mail.png") no-repeat; background-size: cover; }

footer h3 { letter-spacing: 1px; }

footer .sac { background: #efefef; margin-bottom: 30px;  padding: 15px; }
footer .sac form label { color: #999;  font-weight: 200; font-size: 12px; }
footer .sac .btn-default {  background: #ebb240; border: none; border-radius: 2px; color: #fff;  }










/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) { 

.navbar-header .logo {	margin: 5% 0 0 11%;	}
.navbar-toggle .icon-bar{ border: 1px solid #5a5a5a; }
.navbar-toggle {	float: right;	padding: 15px 0;	margin-top: 0;	margin-right: 0; }
.navbar-nav {	margin: auto;	padding: 1.5% 0 0 0;	width: 100%; }
.nav>li  { display: inline-table; }

.carousel-inner > .item > img { height: 95%;  }
.sobre {    margin-top: 100px;  }
.sobre .row .col-md-4 img { height: 285px;  }
.sobre .row .col-md-4.yellow {  min-height: 90px; }
.sobre .row .col-md-4.yellow div:after, .cases .row .blue div:after { transform-origin: -10% 40%; width: 225px;	height: 200px; }

.clientes, .clientes .row {margin-bottom: 0px;}
.clientes {    margin-top: 115px;  }

.cases {    padding: 20px 0 0;    margin-top: 20px;  }
.cases .row .blue { height: 90px !important; min-height: 90px !important; margin-top: 40px;}

.carousel, .carousel .item { height: 200px; }
.modal-dialog { width: 95%; }

span.loadMore {    position: absolute;    left: 40%;  }

footer {  margin-top: 120px !important; }
footer h3 { font-size: 18px; }


}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1480px) {
.navbar-wrapper { margin-top: 40px; }
.sobre { padding: 60px 0 0;  }
.cases .row .col-md-4 {  height: 420px; }
.cases .row .blue div::after  {   width: 100%; }
.carousel { height: 650px; }
.carousel .item { height: 650px;     }

  }