/* reset by rafaux */
* { margin: 0px; padding: 0px; border: 0px; font-weight: normal; font-size: 100%; list-style: none; line-height: 1; outline: 0px; background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }

/* var */
:root { --default: #1E1E1E; --green: #344727; --green2: #1c2913; --lemon: #9fc187; --fontalt: 'Circular Std'; }

/* global class */
.container { display: block; width: auto; max-width: 1200px; height: auto; margin: 0px auto; }

/* base */
a { text-decoration: none; transition: all .5s ease; }
body { background: #FFFDED; font: normal 16px 'Circular Std Book', sans-serif; overflow-x: hidden; }
input, textarea, select, button { font: normal 16px 'Circular Std Book', sans-serif; appearance: none; -webkit-appearance: none; border-radius: 0px; cursor: pointer; }
input[type=submit], button { transition: all .5s ease; }
figure { margin: 0px; }

/* header */
#header { position: fixed; z-index: 20; top: 0px; left: 0px; display: flex; width: 100%; height: 120px; padding: 15px 20px; justify-content: space-between; align-items: center; gap: 20px; background-color: var(--green); transition: all .5s ease; }
#header span.logo img { width: 316px; height: auto; transition: all .5s ease; }
#header nav { display: flex; justify-content: space-between; align-items: center; gap: 80px; transition: all .5s ease; }
#header nav ul { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
#header nav ul.menu li a { color: #fff; text-transform: uppercase; font-size: 13px; font-weight: bold; font-family: var(--fontalt); white-space: nowrap; }
#header nav ul.menu li a:hover { color: var(--lemon); }
#header nav ul.social li a { display: block; width: 36px; height: 36px; background-color: var(--green2); border: 1px solid var(--green2); color: #fff; border-radius: 100%; text-align: center; line-height: 36px; font-size: 20px; }
#header nav ul.social li a:hover { border-color: #fff; }
#header nav span.bt-c a { padding: 6px 40px; border: 1px solid #fff; color: #fff; border-radius: 40px; font-size: 13px; }
#header nav span.bt-c a:hover { background-color: #fff; color: var(--green); }

    /* header -> on */
    #header.on { height: 70px; padding: 0px 20px 10px 20px; box-shadow: 0px 40px 40px rgba(0,0,0,.4); }
    #header.on span.logo img { width: 220px; }
    #header.on nav { gap: 60px; }

    /* header -> toggle */
    span.toggle { display: none; position: absolute; top: 50px; right: 20px; width: 20px; height: 24px; border-top: 2px solid #fff; transition: all .5s ease; cursor: pointer; }
    span.toggle::before { position: absolute; top: 6px; left: 0px; width: 100%; height: 2px; background-color: #fff; transition: all .5s ease; content: ''; }
    span.toggle::after { position: absolute; top: 14px; left: 0px; width: 100%; height: 2px; background-color: #fff; transition: all .5s ease; content: ''; }
    span.toggle.on { border-top: transparent; }
    span.toggle.on::before { top: 10px; transform: rotate(45deg); }
    span.toggle.on::after { top: 10px; transform: rotate(-45deg); }
    #header.on span.toggle { top: 18px; }

/* feat */
#feat { position: relative; z-index: 2; width: 100%; height: 660px; max-height: calc(100vh - 120px); margin-top: 120px; background-color: var(--green); }
#feat::after { position: absolute; z-index: -1; bottom: 0px; left: 0px; width: 100%; height: 90px; background-color: var(--green2); content: ''; }
#feat figure { position: absolute; top: 0px; right: 0px; width: 80%; height: 100%; background-color: #000; }
#feat figure img { width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: grayscale(1); }
#feat figcaption { position: absolute; z-index: 2; top: 50%; left: 50%; width: 540px; height: auto; margin-left: -600px; transform: translateY(-50%); text-align: right; }
#feat figcaption h1 { display: block; color: #fff; font-size: 72px; font-weight: 900; font-family: var(--fontalt); }
#feat figcaption p { display: block; margin-top: 20px; color: #fff; font-size: 24px; line-height: 1.4; }

/* sobre */
#sobre { padding: 60px 60px; background-color: var(--green2); }
#sobre figure { position: relative; width: 100%; height: 580px; margin-bottom: -90px; background-color: #000; }
#sobre figure img { position: absolute; top: 0px; right: 0px; width: 50vmax; height: 100%; object-fit: cover; }
#sobre header { display: block; margin-bottom: 60px; text-align: center; }
#sobre header small { font-weight: bold; font-family: var(--fontalt); color: var(--lemon); text-transform: uppercase; }
#sobre header h2 { display: block; margin: 10px 0px 20px 0px; font-size: 48px; font-weight: 900; font-family: var(--fontalt); color: #fff; }
#sobre section { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
#sobre section article { width: 50%; }
#sobre section article p { display: block; margin-bottom: 20px; line-height: 1.6; color: #fff; }
#sobre section article p:last-of-type { font-weight: bold; font-family: var(--fontalt); color: var(--lemon); }

/* socios */
#socios { padding: 60px 0px; }
#socios header h6 { display: block; font-weight: 900; font-family: var(--fontalt); font-size: 48px; line-height: 1.1; text-align: center; }
#socios section { display: inline-block; width: 100%; margin-top: 60px; text-align: center; }
#socios section article { position: relative; display: inline-block; width: 260px; height: auto; margin: 0px 20px; }
#socios section article figure { position: relative; display: block; width: 100%; height: 360px; margin-bottom: 20px; background-color: #000; }
#socios section article figure img { width: 100%; height: 100%; object-fit: cover; transition: all .5s ease; }
#socios section article figure sup { position: absolute; z-index: 2; top: 50%; left: 50%; width: 90px; height: 90px; background: transparent url('../img/more.svg') no-repeat; background-size: contain; transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: all .5s ease; }
#socios section article:hover figure img { opacity: .7; }
#socios section article:hover figure sup { transform: translate(-50%, -50%) scale(1); opacity: 1; }
#socios section article strong { display: block; font-weight: bold; font-family: var(--fontalt); color: var(--default); }

/* banner */
#banner { position: relative; display: block; width: 100%; height: 420px; background-color: #000; }
#banner sub { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000 url('../img/_temp/4.jpg') no-repeat fixed center center; background-size: cover; opacity: .7; }
#banner section { position: absolute; z-index: 2; top: 50%; left: 50%; width: 800px; height: auto; margin-left: -400px; transform: translateY(-50%); text-align: center; }
#banner section h3 { display: block; font-weight: 900; font-size: 72px; font-family: var(--fontalt); color: #fff; }
#banner section p { display: block; margin-top: 20px; font-size: 24px; color: #fff; }

/* atuacao */
#atuacao { display: block; padding: 125px 0px; background-color: var(--green); }
#atuacao header { display: block; width: 900px; margin: 0px auto; text-align: center; }
#atuacao header small { display: block; font-weight: 900; font-family: var(--fontalt); color: var(--lemon); text-transform: uppercase; }
#atuacao header h6 { display: block; margin: 10px 0px; font-weight: 900; font-size: 48px; font-family: var(--fontalt); color: #fff; }
#atuacao header p { display: block; color: #fff; font-size: 18px; line-height: 1.6; }
#atuacao section { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin-top: 60px; }
#atuacao section article { position: relative; display: inline-block; height: auto; padding: 20px 20px 20px 40px; border: 1px solid var(--lemon); vertical-align: top; transition: all .5s ease; }
#atuacao section article strong { position: relative; display: block; font-family: var(--fontalt); font-size: 15px; line-height: 1.2; color: var(--lemon); transition: all .5s ease; }
#atuacao section article strong::before { position: absolute; top: 7px; left: -15px; width: 5px; height: 5px; background-color: var(--lemon); border-radius: 100%; content: ''; }
#atuacao section article:hover { border-color: #fff; }
#atuacao section article:hover i,
#atuacao section article:hover strong { color: #fff; }

/* acervo */
#acervo { padding: 125px 0px; background-color: #fff; }
#acervo.int { padding-top: 180px; }
#acervo.post { padding-top: 0px; }
#acervo header { display: block; width: 700px; margin: 0px auto; text-align: center; }
#acervo header small { display: block; font-weight: 900; font-family: var(--fontalt); color: var(--lemon); text-transform: uppercase; }
#acervo header h6 { display: block; margin: 10px 0px; font-weight: 900; font-size: 48px; font-family: var(--fontalt); }
#acervo section { display: inline-block; width: 100%; height: auto; margin-top: 60px; text-align: center; }
#acervo section article { display: inline-block; width: 24%; height: auto; vertical-align: top; }
#acervo section article a { display: block; text-align: center; color: var(--green); }
#acervo section article figure { position: relative; width: 100%; height: 360px; }
#acervo section article figure img { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); object-fit: cover; }
#acervo section article h4 { display: block; margin-top: -20px; padding: 0px 10px; font-weight: bold; font-family: var(--fontalt); font-size: 16px; line-height: 1.4; }
#acervo .conjur { display: inline-block; width: 100%; height: auto; margin-top: 60px; text-align: center; }
#acervo .conjur h5 { display: block; font-weight: bold; font-size: 20px; }
#acervo .conjur figure img { display: block; width: 300px; height: auto; margin: 0px auto 30px auto; }
#acervo .conjur .conjur-list { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px; text-align: left; }
#acervo .conjur .conjur-list span a { display: inline-block; width: auto; margin-bottom: 20px; color: var(--green2); }
#acervo .conjur .conjur-list span a strong { display: block; font-weight: bold; text-transform: uppercase; font-size: 13px; line-height: 1.4; text-decoration: underline; }
#acervo .conjur .conjur-list span a small { display: block; margin-top: 12px; font-size: 13px; }
#acervo .conjur .conjur-list span a small b { text-transform: uppercase; }
.book-container { align-items: center; justify-content: center; perspective: 600px; }
@keyframes initAnimation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-30deg); } }
.book { width: 100%; height: 360px; margin-left: 20px; position: relative; transform-style: preserve-3d; transform: rotateY(-30deg); transition: 1s ease; animation: 1s ease 0s 1 initAnimation; }
.book-container:hover .book, 
.book-container:focus .book { transform: rotateY(0deg);}
.book > :first-child { position: absolute; top: 0; left: 0; background-color: red; width: 200px; height: 300px; transform: translateZ(32.5px); background-color: #01060f;border-radius: 0 2px 2px 0; box-shadow: 5px 5px 20px #666; }
.book::before { position: absolute; content: ' '; background-color: blue; left: 0; top: 6px; width: 63px; height: 288px; transform: translateX(161.5px) rotateY(90deg); background: linear-gradient(90deg,  #fff 0%, #f9f9f9 5%,#fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100% ); }
.book::after { position: absolute; top: 0; left: 0; content: ' '; width: 200px; height: 300px; transform: translateZ(-32.5px); background-color: #01060f; border-radius: 0 2px 2px 0; box-shadow: -10px 0 50px 10px #666;}

/* post */
#post { padding: 120px 0px; }
#post header { display: block; margin-bottom: 40px; text-align: center; }
#post header figure { display: block; width: 100%; height: 350px; background-color: #000; }
#post header figure img { width: 100%; height: 100%; object-fit: cover; }
#post header h1 { display: block; width: 800px; margin: 40px auto; font-weight: 900; font-family: var(--fontalt); font-size: 48px; color: var(--green); }
#post header span { display: inline-block; width: auto; padding: 4px 5px 4px 10px; border: 1px solid var(--lemon); color: var(--default); border-radius: 40px; }
#post header span b { display: inline-block; margin-right: 10px; font-weight: 900; font-family: var(--fontalt); font-size: 11px; text-transform: uppercase; vertical-align: middle; color: var(--lemon); }
#post header span a { display: inline-block; margin: 0px 5px; color: var(--green); vertical-align: middle; }
#post header span a:hover { color: var(--lemon); }
#post section { display: block; width: 800px; margin: 0px auto; }
#post section p { display: block; margin-bottom: 20px; line-height: 1.4; }
#post section p img { width: 100%; height: auto; margin-bottom: 20px; border-radius: 10px; }
#post section p a { color: var(--lemon); text-decoration: underline; }
#post section :where(h1, h2, h3, h4, h5, h6) { display: block; margin-bottom: 20px; font-weight: 900; font-family: var(--fontalt); font-size: 24px; color: var(--lemon); }
#post footer { display: block; width: 800px; margin: 0px auto; padding-top: 40px; font-weight: bold; font-size: 14px; font-family: var(--fontalt); color: var(--lemon); }

/* footer */
#footer { display: block; padding: 80px 0px; background-color: var(--green); }
#footer span.logo { position: relative; display: inline-block; width: 100%; height: auto; margin-bottom: 40px; }
#footer span.logo img { position: relative; z-index: 2; width: 316px; height: auto; }
#footer span.logo::before { position: absolute; z-index: 1; top: 50%; left: 346px; width: calc(100% - 346px); height: 1px; background-color: rgba(255,255,255,.5); transform: translateY(-50%); content: ''; }
#footer .columns { display: grid; grid-template-columns: 346px 1fr; }
#footer .columns p { display: block; font-size: 14px; color: var(--lemon); }
#footer .columns address a { position: relative; display: block; margin-bottom: 20px; padding-left: 25px; font-size: 13px; color: #fff; font-style: normal; }
#footer .columns span { position: relative; display: block; }
#footer .columns span a { display: block; margin: 10px 0px; padding-left: 25px; font-size: 13px; color: #fff; }
#footer .columns small a { position: relative; display: block; margin: 20px 0px 30px 0px; padding-left: 25px; font-size: 13px; color: #fff; }
#footer .columns a:hover { text-decoration: underline; }
#footer .columns :where(address, span, small) i { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); color: var(--lemon); font-size: 13px; }
#footer .columns .social ul { display: flex; margin-top: 20px; gap: 20px; }
#footer .columns .social li a { color: var(--lemon); font-size: 20px; }
#footer .columns legend { display: block; margin-bottom: 30px; font-weight: 900; font-family: var(--fontalt); font-size: 24px; color: #fff; }
#footer .columns form { display: block; padding-right: 70px; }
#footer .columns label { position: relative; display: inline-block; width: 50%; margin: 0px -10px 30px 0px; padding-right: 20px; }
#footer .columns label:first-of-type { width: 100%; }
#footer .columns label strong { display: block; margin-bottom: 10px; font-weight: 900; font-family: var(--fontalt); color: #fff; }
#footer .columns label input { display: block; width: 100%; height: 55px; padding: 0px 15px; border-radius: 10px; background-color: var(--green2); color: #fff; }
#footer .columns label input::placeholder { color: #fff; }
#footer .columns label input[type=submit] { position: absolute; bottom: 2px; right: -50px; width: 50px; height: 50px; padding: 0px; background: var(--lemon) url('../img/arrow.svg') no-repeat center center; text-indent: -9999em; }

/* sidebar */
aside#sidebar { position: fixed; z-index: 20; top: 0px; left: -320px; width: 270px; height: 100%; background-color: var(--green); text-align: center; box-shadow: 0px 20px 20px rgba(0,0,0,.5); transition: all .5s ease; }
aside#sidebar.on { left: 0px; }
aside#sidebar span.logo img { display: block; width: 80%; height: auto; margin: 40px auto; }
aside#sidebar nav ul li a { display: block; padding: 15px 0px; color: #fff; }
aside#sidebar nav span.bt-c a { display: block; padding-top: 20px; color: #fff; }
aside#sidebar nav ul.social { position: absolute; bottom: 30px; left: 0px; width: 100%; height: auto; }
aside#sidebar nav ul.social li { display: inline-block; width: auto; margin: 0px 10px; }
aside#sidebar nav ul.social li a { padding: 0px 15px; font-size: 20px; }

/* box */
.box { display: none; position: fixed; z-index: 9999; top: 0px; left: 0px; width: 100%; height: 100vh; background-color: var(--green); }
.box .block { position: absolute; top: 50%; left: 50%; display: flex; width: 800px; justify-content: space-between; align-items: flex-start; transform: translate(-50%, -50%); background-color: #212e17; box-shadow: 0px 30px 30px rgba(0,0,0,.2); }
.box .block figure { width: 40%; height: 400px; background-color: #000; }
.box .block figure img { width: 100%; height: 100%; object-fit: cover; }
.box .block figcaption { width: 60%; height: 400px; padding: 40px; overflow-x: auto; }
.box .block figcaption h6 { display: block; margin-bottom: 20px; color: var(--lemon); font-size: 30px; }
.box .block figcaption p { display: block; margin-top: 20px; color: #fff; line-height: 1.4; }
.box .block sup { position: absolute; top: 20px; right: 20px; font-size: 30px; color: var(--lemon); cursor: pointer; transition: all .5s ease; }
.box .block sup:hover { color: #fff; }