@charset "utf-8";
/* CSS Document */
/* ---------------- RESET ---------------- */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h4, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0;  font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
    :focus { outline: 0;}
    a, a:link, a:visited, a:hover, a:active{text-decoration:none}
    table { border-collapse: separate;border-spacing: 0;}
    th, td {text-align: left; font-weight: normal;}
    img, iframe {border: none; text-decoration:none;}
    ol, ul {list-style: none;}
    input, textarea, select, button {font-size: 100%;font-family: inherit; margin:0; padding:0;}
    figure {margin: 0}
    select {margin: inherit;}
    hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}
    b { font-weight:700 }
    img { max-width: 100%; height: auto; }
    @media \0screen { img { width: auto; /* for ie 8 */ } }
    * {
        box-sizing: border-box;
      }

    html { background:#222222; }
    body{ font-family: 'Barlow', Arial, sans-serif;  font-size:62.5%; color:#222; font-weight:400; letter-spacing: 1px; height: auto; }
    section {width:100%; position: relative; float:left; }

    h3 { width: 100%; float: left; color: #989898; font-size: 2.3em; font-weight: 900; }
    p { width: 100%; float: left; color: #989898; font-size: 1.8em; line-height: 2.3; font-weight: 400;  }

    .row { position: relative; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 1260px; }
    .scroll-off {overflow: hidden !important;}
    .ie8 input {line-height:2.0 !important;}
    .ie7 input {line-height:3.0 !important;}
    .hide { display: none !important }
    .margin0 {margin: 0 !important}
    .uppercase { text-transform: uppercase !important}


    /* SCROLL NICE */
    ::-webkit-scrollbar { width: 12px; }
    ::-webkit-scrollbar-track {background: #191919;}
    ::-webkit-scrollbar-thumb {background: #2d2d2d;border-radius: 50px;}
    ::-webkit-scrollbar-thumb:hover {background: #383838;}

/*  ROOT  */
    :root {
      --color-black: #2e2e2e;
      --color-black: #2e2e2e;
      --color-black: #2e2e2e;
    }



/* ---------------- RESET END ---------------- */

/* ---------------- HEADER DESKTOP ---------------- */ 
    header { background:; position: fixed; float: left; width: 306px; height: auto; padding: 0; z-index: 9; font-size: 1.2em; padding: 45px; color: #989898;  }
    header a { color: #989898;  }

    header a b { font-size: 1.5em; color: #FFF }
    header div { width: 100%; float: left; margin-top:10% }
    header small { width: calc(100% - 30px);  text-transform: uppercase; margin-top:0;
    float: right; color: #FFF; font-size: 0.87em; }
    header img { float: left;}


    footer {position: fixed;  padding: 45px;  bottom: 0; font-size: 1em; font-weight: 500;  color: #FFF; }
    footer p { text-transform: uppercase; font-size: 1.2em; }
    

    footer h4 { float: left; }
    footer a { font-size: 1.3em; color: #FFF; font-weight: 400; text-decoration: underline !important; line-height: 1.75; transition: .2s }
    footer a:hover { background: #FFF; color: #222222; text-decoration: none !important; padding: 2px 4px }

    p.fix { margin: 10% 0 45px; text-transform: uppercase;  font-size: 1.0em; line-height: 1.5; }

    
    #home { width: calc(100% - 306px); float: right; padding: 10% 0 0; background: #222; }
    #home ul { width: 100%; float: left; padding: 0 0 0 5%; position: relative;  }
    #home ul li { width: 33.333%; height: 450px; padding: 0 5% 0 0; margin: 0 0 7.5%; float: left; position: relative; z-index: 2 }

    #home ul li figure { width: 100%; height: 250px;  float: right; background-size: cover !important; background-position: center center !important; box-shadow: 0 5px 10px #00000042; position: relative; z-index: 2;  }
    #home ul li figure div { width: 50px; height: 50px; position: absolute; bottom: -60px; right: 10%; background: ; transition: .5s; opacity: 0;  }
    #home ul li figure div img { width: 50%; transform: translate(-50%,-50%); top: 50%; left: 50%; float: left; position: absolute; transform: rotate(180deg); }
    #home ul li a:hover div { opacity: 1; right: 0; }

    #home ul li h2 {width: 77%;  position: relative; float: left; font-size: 2em; color: #FFF; font-weight: 700; text-transform: uppercase; margin: 1em 0 0;    z-index: 2 }
    #home ul li h2 small { font-size: 0.6em; font-weight: 600; color: #989898; letter-spacing: 2px; }

    #home ul li h4 { margin: 0 80px; position: absolute; right: -54px; top: 190px;
        font-size: 12em; color: #252525; font-weight: 700; text-transform: uppercase; z-index: 1 }
    #home ul li p { width: 100%; float: right; font-size: 1.6em; line-height: 1.4; margin: 1em 0 0; }


    a.back { font-size: 1em; text-transform: uppercase; text-decoration: underline; font-weight: 600; color: #FFF; transition: .2s }
    a.back:hover { background: #FFF; color: #222222; text-decoration: none !important; padding: 2px 4px }

    #internal {  width: calc(100% - 306px); float: right; padding: 47px 0 0; background: #222; }
    #internal ul { width: 100%; float: left; padding: 0 0 0 5%;  }
    #internal ul li { width: 100%; padding: 0 10% 0 0; margin: 0 0 7.5%; float: left; position: relative; }
    #internal ul li img {float: left; box-shadow: 0 5px 10px #00000042; position: relative; z-index: 2; }

    #internal ul li h2 { width: 100%; position: relative; float: left; font-size: 4em; color: #FFF; font-weight: 700; text-transform: uppercase; margin: 0 0 1em; z-index: 9; }
    #internal ul li h2 small { font-size: 0.5em; font-weight: 600; color: #989898; letter-spacing: 2px; }


    #internal ul li h4 { margin: 0 80px; position: fixed; right: -76px; top: 190px; font-size: 12em; color: #252525; font-weight: 700; text-transform: uppercase; z-index: 1 }
    #internal ul li p { width: 90%; float: left; line-height: 1.35; margin: 6% 0 6% 0; position: relative; z-index: 3; }
    #internal ul li p.first { margin: 2% 0 4% 0 }

    ul.numbers { position: fixed; top: 8vh; right: 30px; padding: 0; z-index: 3;   }
    ul.numbers li { padding: 0; margin: 0; font-size: 1.75em; text-align: right;}
    ul.numbers li a { color: #FFF; opacity: 0.15; font-weight: 500; transition: .05s;  }
    ul.numbers li a:hover { font-weight: 800; font-size:1.75em;  }
    ul.numbers li a.active { opacity: 1; font-weight: 800; font-size: 1.5em; cursor: default;   }


    div.arrow{ float: right; margin: -18px 10% 0 0;}
    div.arrow a { transition: .2s; opacity: .4; cursor: pointer }
    div.arrow a:hover {  opacity: 1 }

    div.arrow a img { transform: rotate(90deg); padding: 5px 15px;
    width: 45px;}

    div.arrow a:first-child img { transform: rotate(0deg) }
    div.arrow a:last-child img { transform: rotate(180deg) }




    div.White {
        width: 100%;
        height: 100%;
        position: fixed;
        animation-name: example;
        animation-duration: 1s;
        animation-iteration-count: 1;
        z-index: -3;
        
      }
      
      @keyframes example {
        from {z-index: 999; background-color: #000; }
        to {z-index: -1;background-color: #0000;}
      }


    #internal.about ul li { margin: 0 0 4%; }
    #internal.about ul li.left { width: 100%; padding: 0 6% 0 0; }
    #internal.about ul li.left img { margin: 0 4% 4% 0; border-radius: 150px; }
    #internal.about ul li.left img.mobile { display: none; width: 180px; position: relative; left: 50%; transform: translate(-50%); margin: 0 0 10%;}

    #internal.about ul li.left p { margin: 0;  }



/* ---------------- MOBILE  ---------------- */

    @media (max-width:1300px) {
        #home { width: calc(100% - 266px);}
        header { width: 266px; font-size: 1.1em; padding: 45px 40px;}
        #home ul li { width: 50%; }
        footer {  padding: 45px 40px;}

    }
    @media (max-width:1120px) {
        ul.numbers {display: none;}
    }

    @media (max-width:950px) {
        #home ul li { width: 100%; height: auto; margin: 0 0 15%; }
    }
    @media (max-width:850px) {
        #home { width: 100%; padding: 6% 0 0; background:; }
        #internal { width: 100%; padding: 6% 0 0; background:; }
        #internal ul { padding: 0 5%; }
        #internal ul li h4 { position: absolute; top: 90px;}
        #internal ul li {  padding: 0;}
        header { padding: 6%; width: auto; position: relative; float: left;}
        header div { margin-top: 3%; }
        footer { position: relative; float: left; padding: 6%; }
        div.arrow { margin: -18px 0 0 0;}
        p.fix { margin: 10% 0 0; }

        #internal.about ul li.left {padding: 0}
        #internal ul li p {width: 100%}

        
    }
    @media (max-width: 500px){
        #internal ul li {margin: 0 0 15%;}
        #internal.about ul li.left {margin: 0 0 15%;}

        #internal.about ul li.left img.mobile { display: block;  }
        #internal.about ul li.left img.desk { display: none}
    }







/* ---------------- SETOR  ---------------- */