/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

@import "fonts.css";

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::selection {
    color:#000;
    background:#CFE107;
}
::-moz-selection{
  color:#000;
  background:#CFE107;
  }
::-webkit-selection{
  color:#000;
  background:#CFE107;
  }
/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}
input, textarea {
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* =Clearfix
----------------------------------------------- */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    /*display: inline-block;*/
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

body { background: #eae7d6; -webkit-text-size-adjust: none;
        -webkit-font-smoothing: antialiased; }

nav#nav-social { position: absolute; margin-top: 150px; left: 15px; z-index: 9999; }
nav#nav-social a { background: url('../img/social_icons.png') no-repeat; display: block; margin-bottom: 12px; background-position: 0 1px; width: 33px; height: 33px; }

nav#nav-social a:hover { opacity: .5; }

nav#nav-social a:nth-child(2) { background-position: 0 -33px;  }
nav#nav-social a:nth-child(3) { background-position: 0 -66px;  }
nav#nav-social a:nth-child(4) { background-position: 0 -99px;  }
nav#nav-social a:nth-child(5) { background-position: 0 -132px; }





/* ==========================================================================
   Author's custom styles
   ========================================================================== */
ul { list-style: none; margin: 0; padding: 0; }
* { margin: 0; padding: 0;

    -webkit-box-sizing: border-box !important;
       -moz-box-sizing: border-box !important;
            box-sizing: border-box !important;
}

h3 {
  font-size: 30px;
  font-family: 'oswaldregular';
  text-transform: uppercase;
  padding: 0 0 0 15px;
}

#gap {
  display: block;
  background: #ffffff;
  height: 90px;
}

p {
  margin: 0 0 15px 0;
  width: 100%;
  float: left;
  font-family: 'open_sansregular';
  color: #333333;
  font-size: 14px;
  line-height: 24px;
  padding-left: 30px;
  clear: both;
}

table {
  float: right;
  margin-top: -15px;
  font-family: 'open_sansregular';
  color: #000;
  font-size: 12px;
  width: 510px;
  margin-bottom: 15px;
}
table td { background: #eeeedd; padding: 3px 9px; border: 3px solid #fff;}

.blue { color: #008ab7; }
.foo-left {  float: left !important; }
.foo-right { float: right !important; }
.foo-right a { color: #008ab7; text-decoration: none; }
.foo-right a:hover { text-decoration: underline;  }

section { 
  display: block; 
  position: relative; 
  width: 100%; 
  min-height: 100% !important; 
  background: #ffffff;
}
.wrap { margin: 0 auto; padding: 0 15px; width: 100%; max-width: 1160px; height: auto; }

.icon-title { display: block; margin: 0 auto; width: 240px; height: 210px; background: url('../img/icons_title.png') no-repeat; }

.pos-proj { background-position: -240px 0; }
.pos-fotos { background-position: -480px 0; }
.pos-videos { background-position: -720px 0; }
.pos-contato { background-position: -960px 0; }

/* ==========================================================================
   HEADER
   ========================================================================== */



#header {
  position: fixed;
  width: 100%;
  top: -120px;
  background: rgba(250,250,250, 1);
  z-index: 99999;
}

.header-in { top: 0 !important; -webkit-transition: all 1s 0s ease-in-out;
    transition: all 1s 0s ease-in-out; }

#nav { display: block; margin: 0 auto; width: 100%; max-width: 1160px; padding: 0 15px; }

a.logo { position: fixed; overflow: hidden; height: 48px; margin-top: 15px; }
a.logo img { display: block; max-height: 100%; width: auto; }

#nav .main { margin-left: 90px; }
#nav .main a {
    display: inline-block;
    float: right;
    margin: 0;
    padding: 0 30px;
    width: auto;
    height: 78px;
    font-family: 'oswaldregular';
    font-weight: bold;
    font-size: 15px;
    color: #000000;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 78px;
    -webkit-transition: all .3s 0s ease;
    transition: all .3s 0s ease;
}

#nav .main a:hover { background: #000000 !important; color: #eeeedd;  }

.left-side i.ico-ativ { float: none; margin: 60px auto 0 auto; display: block; }

#nav .main a:hover { background: #1d2325; }

.bloco { display: inline-block; width: 78px; height: 78px; -webkit-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease; }

.bloco:hover { opacity: .5; }

#menu-click { display: none; float: left; background: url('../img/icon_menu.jpg') no-repeat; -webkit-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease; }

.i-menu{ display: block; background: url('../img/icon_menu.jpg') no-repeat; right: 0; position: absolute; }

.nav-mob {
  display: none;
  position: fixed;
  top: -420px;
  width: 100%;
  padding-top: 90px;
  min-height: 100%;
  z-index: 8888;
  opacity: 1;
  background: #fff;
  box-sizing: content-box;

  -webkit-transition: all 0.3s 0s ease;
  transition: all 0.3s 0s ease;

}

.nav-mob a {
  display: block;
  padding: 30px 15px;
  margin: 0;
  width: auto;
  font-family: 'oswaldregular';
  font-size: 15px;
  color: #333333;
  border-bottom: 1px solid #cccccc;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  background: #ffffff;

  -webkit-transition: all 0.3s 0s ease;
  transition: all 0.3s 0s ease;
}

.nav-mob a:hover { background:#1d2325 !important; color: #eeeedd; }

.nav-mob.js_navMobAct { top: 0; opacity: 1; }

.bg-home { position: absolute; z-index: 999; display: block; }


/* ==========================================================================
   HOME
   ========================================================================== */

section#home { overflow: none !important; background: #eae7d6; min-height: 705px !important; padding-top: 150px !important; padding-bottom: 0; background: none; }

.barco { 
  background: url('../img/barco.png') no-repeat; position: absolute; width: 750px; height: 738px; bottom: -210px; right: 0;
}

.remove-item { display: none !important; }

h2.home { 
  text-shadow: 0px 0px 30px rgba(0, 0, 0, .75);
  position: relative;
  z-index: 9999;
  letter-spacing: -3px; font-family: 'gotham_blackregular'; font-size: 72px; line-height: 60px; padding: 0 30px; color: #ffffff; text-transform: uppercase; }

.sobre-cont {
  display: list-item;
  display: block;
  padding-left: 15px;
  margin: 30px auto 120px auto;
  width: 50%;
  float: right;
  opacity: 0;
  margin-top: 72px;
}



/* ==========================================================================
   MODELOS
   ========================================================================== */

section#modelos { background: #c8ecf7; padding: 120px 0 90px 0 !important; }

#modelos .thumb-mod {
  display: block;
  overflow: hidden;
  width: 49.9%;
  height: auto;
  float: left;
  position: relative !important;
  margin-bottom: -66px;
}
#modelos .thumb-mod img { border-radius: 24px; position: relative; max-width: 100%; height: auto; display: block; margin: 0 !important; }

#modelos .thumb-mod h4 {
  border-radius: 24px;
  position: relative;
  z-index: 999;
  padding: 12px 15px 6px 15px;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 33px;
  font-family: 'oswaldregular';
  background: rgba(0, 0, 0, .5);
  margin: 0;
  text-decoration: none;
  top: -339px;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.color-t { background: #be9000 !important; }


#modelos .thumb-mod img:hover { opacity: .6; text-decoration: none; }

#modelos h3 p { color: #000 !important; }

/* ==========================================================================
   INFO / SECTION 
   ========================================================================== */

section#info { background: #fff; }
h3.info { color: #000; background: #eeeedd; padding: 15px 15px 9px 15px; margin-bottom: 15px; }
h3.info span { color: #2578ba; }
h4.esp { 
  text-transform: uppercase;
  font-size: 21px; font-family: 'oswaldregular'; color: #000; 
}



.pdf-down:hover { opacity: .8; }

span.close {
  background: url('../img/close.png') no-repeat;
  cursor: pointer;
  float: right;
  display: block;
  width: 120px;
  height: 35px;
}

span.close:hover { opacity: .5; }

.pdf-down a:active { color: #000000;}
.pdf-down a {
  float: right;
  width: 450px;
  height: 30px;
  display: block;
  color: #000000;
  text-transform: uppercase;
  font-size: 18px; font-family: 'oswaldregular';
  color: #000;
  text-decoration: none;
  color: #000;
  cursor: pointer;
}
/* ==========================================================================
   SOBRE
   ========================================================================== */

section#sobre { background: transparent !important; padding: 90px 0 240px 0 !important; }

.three-col {
  -moz-column-count: 3;
  -moz-column-gap: 15px;
  -webkit-column-count: 3;
  -webkit-column-gap : 15px;
}


.bg-sobre { position: absolute; z-index: -9; display: block; }

h3.sobre { color: #451800; }
p.sobre { color: #451800; font-size: 15px; }

/* ==========================================================================
   DIFERENCIAIS
   ========================================================================== */

section#diferenciais { background: #577a8f; padding: 90px 0 180px 0; }

section#diferenciais h3 { color: #eeeedd !important; }

#diferenciais .thumb {
  display: block;
  overflow: hidden;
  width: 33.3%;
  height: 690px;
  float: left;
  background: #b08500;
}
.color-t { background: #be9000 !important; }

#diferenciais .thumb img { min-width: 100%; height: auto; display: block; }
#diferenciais .thumb p { padding: 15px 30px 30px 30px; font-size: 15px; font-family: 'open_sansregular'; color: #ffffff; }
/* ==========================================================================
   CONTATO
   ========================================================================== */

section#contato { background: transparent; padding: 120px 0 0 0 !important; }

.bg-contato { position: absolute; z-index: -9; display: block; }

h3.contato { padding: 0 !important; text-align: center !important; color: #fff; }
p.contato { padding: 0 !important; text-align: center !important; color: #fff; }
p.email { padding: 0 !important; text-align: center !important; color: #d39f00; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {

  width: 100%;
  height: 30px;
  position: fixed;
  z-index: 99999;
  background: #000;
  bottom: 0;
  display: inline-block;

  font-style: normal;
  text-align: right;
  padding-right: 30px;
  color: #ffffff;
  line-height: 27px;
  font-family: 'standardRegular';
    font-size: 8px;
    text-transform: uppercase;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   12/NOVEMBRO - CSS MOBILE / FINAL
   ========================================================================== */

@media screen and (max-width: 1160px) {
  .wrap { width: 100%; }
  #menu-click { display: none; }

   #nav { height: 80px; display: block; }

  #menu-click { display: block; }
  #nav .main { display: none; }
  .nav-mob { display: block; top: -390px; opacity: 0; }
  #menu-click { display: block; }
  .img-sobre { display: none; }
  .sobre-cont { margin-top: 30px; float: none; }
  .depoimento { display: none; }
  .recente { float: none; margin: 30px auto 0 auto; }
  .i-big { display: none; }
  #one .title { margin: 30px auto 0 auto; width: 100%; }



  #contato-intro { width: 100%; }


}

@media screen and (max-width: 600px) {

  #modelos .thumb-mod {
    width: 100%;
}

.simplegallery {
    width: 100% !important;
    margin-bottom: 30px;
}

footer { text-align: center; }

  h2.home { font-size: 30px; line-height: 24px; }

  table { display: none; }

  #diferenciais .thumb {
  display: block;
  overflow: hidden;
  width: 100%;
  height: auto;
  float: left;
  background: #b08500;
}

.three-col {
  -moz-column-count: 1;
  -moz-column-gap: 15px;
  -webkit-column-count: 1;
  -webkit-column-gap : 15px;
}

#domu-news {
  width: 100%;
}

  #clientes-balls { width: 100%; }

  h3.news { font-size: 45px; }

  .caca {
    width: 100%;
  }

  .detail-a { width: 120px; }
  .detail-b { width: 120px; }
  ul#lista-estudos { width: 100%; }
  ul#lista-taticas { width: 100%; }
  div#lista-serv { width: 100%; height: auto; margin-bottom: 60px; display: block; }
  div#lista-serv .li { float: none; margin-left: 30px; margin-bottom: 15px;}
  .recente { max-width: 240px; }
  h2 { font-size: 39px; }
  h5 { font-size: 15px; }
  h3.contato { width: 90%; margin-bottom: 30px; }
  #social { width: 100%; height: auto; }
  #social a { margin: 0 auto; }
  address { font-size: 15px; width: 90%; }
  p.contato { font-size: 15px; letter-spacing: 3px; line-height: 30px; width: 90%;
  margin: 0 auto; }
  #sobre-cont { width: 100%; }
  p.sobre { font-size: 15px; line-height: 21px; }
  .left-side { width: 100%; }
  ul.right-side { width: 100%; margin-top: 15px; }
  h3.ativ { width: 90%; margin-bottom: 3px; }
  #loja-cont { max-width: 90%; margin-top: 0; }
  #nav { height: 80px; display: block; }
  #menu-click { display: block; }
  ul.right-side li { font-size: 15px; }
  div#icons_ativ { width: 90%; margin-top: 42px; }
  #sobre-cont { margin-top: 30px; }
  .video-you { width: 100%; }
}

@media (max-width: 480px) {
  
  #social a {
    float: none;
  }
  
  .logo-big { display: none; }
  .detail-a { display: none; }
  .detail-b { display: none; }
  
  h3.resultados { font-size: 60px; }
  a.email { font-size: 18px; }
  h3.phone { font-size: 48px; line-height: 45px; }
  ul#lista-taticas li { width: 100%; }
  
  div#icons_ativ {
    width: 150px; margin-top: 42px; 
  }

}

/*GALLEY IMAGES*/

.simplegallery{ margin-right: 30px; float: left; background: #eeeedd; padding: 15px; width:50%; height: auto; overflow:hidden; }

.simplegallery .content{ border-radius: 20px; position:relative; width:100%; height:auto; overflow:hidden; margin-bottom: 3px; }

.simplegallery .gallery-back:hover { opacity: .75; }
.simplegallery .gallery-next:hover { opacity: .75; }

.simplegallery .gallery-back { position: absolute; margin-top: -174px; margin-left: 9px; cursor: pointer; display: block; width: 43px; height: 43px; background: url('../img/back.png') no-repeat; }
.simplegallery .gallery-next { position: absolute; margin-top: -174px; margin-left: 480px; cursor: pointer; display: block; width: 43px; height: 43px; background: url('../img/next.png') no-repeat; }

.simplegallery .content img { max-width: 100%; margin-bottom: 6px; }

.simplegallery .thumbnail .thumb { border-radius: 12px; overflow: hidden; float:left; width:60px; height:auto; margin:0 3px 3px 0; cursor:pointer; display: block; }

.simplegallery .thumbnail .thumb a { display: block; background: #000; }
.simplegallery .thumbnail .thumb img { max-width: 100%; }

.simplegallery .thumbnail img:hover { opacity: .6; cursor: pointer; }