@font-face {
    font-family: nexa_light;
    src: url(../fonts/NexaLight.otf);
}
@font-face {
    font-family: nexa_bold;
    src: url(../fonts/NexaBold.otf);
}

* {
  font-family: nexa_light;
  color: #58595B;
  margin: 0;
  padding: 0; 
}

html { height: 100%;}
body { min-height: 100%;}

.open_foreground { position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #E6E7E8;
z-index:20;
-webkit-transition: height .8s ease-in-out; -moz-transition: height .8s ease-in-out; -o-transition: height .8s ease-in-out; transition: height .8s ease-in-out;
}

.open {
  height: 0vh;
}

.close_foreground { position: fixed;
top: 0;
left: 0;
width: 0;
height: 100vh;
background-color: #E6E7E8;
z-index:20;
-webkit-transition: width .8s ease-in-out; -moz-transition: width .8s ease-in-out; -o-transition: width .8s ease-in-out; transition: width .8s ease-in-out;
}

.exit {
  width: 100%;
}

.logo_nav, #nav-icon2 { -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out;}

.nav {
  width: 100%;
  height: 80px;
  z-index: 12;
}

.nav .logo_nav { width:35px ; height: 50px; float: left; margin: 15px 0 0 5%; background-image: url(../img/logo_mono.png); background-repeat: no-repeat;
background-size: contain; cursor: pointer;}
.nav .logo_nav:hover { opacity: 0.5;}

/* Menu Hamburger */
#nav-icon2 {
  float: right;
  width: 25px;
  height: 19px;
  position: relative;
  z-index: 10;
  margin: 30px 5% 0 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  cursor: pointer;
}
#nav-icon2:hover > span {
  background: #7A7A7A;
}
#nav-icon2 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 50%;
  background: #58595B;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon2 span:nth-child(even) {
  left: 50%;
}
#nav-icon2 span:nth-child(odd) {
  left:0px;
}
#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
  top: 0px;
}
#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
  top: 8px;
}
#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
  top: 16px;
}
#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-icon2.open span:nth-child(1) {
  left: 2px;
  top: 4px;
}
#nav-icon2.open span:nth-child(2) {
  left: calc(50% - 2px);
  top: 4px;
}
#nav-icon2.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}
#nav-icon2.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}
#nav-icon2.open span:nth-child(5) {
  left: 2px;
  top: 12px;
}
#nav-icon2.open span:nth-child(6) {
  left: calc(50% - 2px);
  top: 12px;
}

.menu_page { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9; background-color: rgba(35, 31, 32, 0.9);  
visibility: hidden; opacity: 0; transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -moz-transition: opacity 0.25s linear; -o-transition: opacity 0.25s linear;}
.menu_page_visible {  visibility: visible; opacity: 1;}
nav { text-align: center; margin-top: 30vh;}
nav a {
  position: relative;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 0 1px rgba(255,255,255,0.3);
}
nav a:hover,
nav a:focus {
  outline: none;
}
.cl-effect a {
  overflow: hidden;
  padding: 0 4px;
  height: 1em;
}

.cl-effect a span {
  color: #fff;
  position: relative;
  display: inline-block;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  cursor: pointer;
}

.cl-effect a span::before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
  color: #42C0C6;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.cl-effect a:hover span,
.cl-effect a:focus span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}
.cl-effect ul { list-style: none;}
li { margin-bottom: 25px; font-size: 17pt;}

.home { text-align: center; height: 100vh; position: relative;}
.home #logo_home { width: 120px; height: auto; margin-top: 13vh;}
.home .slogan { font-size: 15pt; margin-top: 15vh;}
.home .scroll { width: 25px; position: absolute; bottom: 80px; left: 50%; margin-left: -12.5px; cursor: pointer; animation: blinker 2s linear infinite;}
.home .scroll img { width: 100%;}
@keyframes blinker {  
    50% { opacity: 0.0;}
}

.services { height: 600px;}
.title { font-family: nexa_bold; font-size: 16pt; text-align: center; margin-top: 40px;}
hr { width: 60px; height: 1px; margin: 5px auto 50px auto; border: none; background-color: #58595B;}
.services .services_box { width: 60%; max-width: 650px; margin: 110px auto; position: relative; text-align: center;}
.services .services_box .close { float: right; display: none; position: absolute; right: 0; z-index: 3; }
.services #logo_design { width: 110px; float: left; cursor: pointer;}
.logo_design_active { margin-left: 25%; }
.services #logo_architecture { width: 110px; display: inline; cursor: pointer;}
.logo_architecture_active { margin-right: 30.5%; }
.services #logo_marketing { width: 110px; float: right; cursor: pointer;}
.logo_marketing_active { margin-right: 55.5%; }
.services #logo_design:hover, #logo_architecture:hover, #logo_marketing:hover { width: 107px;}
.services #logo_design, #logo_architecture, #logo_marketing { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
.services .design, .architecture, .marketing { position: absolute; left: 54%; top: 20px; margin-left: 5%; display: none;}
.services li { font-size: 12pt; margin-bottom: 25px; list-style: none; text-align: left; opacity: 0;}
li:nth-child(1) { 
  -webkit-animation: fade .5s ease-in-out forwards;
  -webkit-animation-delay: .2s;
  -moz-animation: fade .5s ease-in-out forwards;
  -moz-animation-delay: .2s;
  -o-animation: fade .5s ease-in-out forwards;
  -o-animation-delay: .2s;
  animation: fade .5s ease-in-out forwards;
  animation-delay: .2s;
}
li:nth-child(2) { 
  -webkit-animation: fade .5s ease-in-out forwards;
  -webkit-animation-delay: .6s;
  -moz-animation: fade .5s ease-in-out forwards;
  -moz-animation-delay: .6s;
  -o-animation: fade .5s ease-in-out forwards;
  -o-animation-delay: .6s;
  animation: fade .5s ease-in-out forwards;
  animation-delay: .6s;
}
li:nth-child(3) { 
  -webkit-animation: fade .5s ease-in-out forwards;
  -webkit-animation-delay: 1s;
  -moz-animation: fade .5s ease-in-out forwards;
  -moz-animation-delay: 1s;
  -o-animation: fade .5s ease-in-out forwards;
  -o-animation-delay: 1s;
  animation: fade .5s ease-in-out forwards;
  animation-delay: 1s;
}
li:nth-child(4) { 
  -webkit-animation: fade .5s ease-in-out forwards;
  -webkit-animation-delay: 1.4s;
  -moz-animation: fade .5s ease-in-out forwards;
  -moz-animation-delay: 1.4s;
  -o-animation: fade .5s ease-in-out forwards;
  -o-animation-delay: 1.4s;
  animation: fade .5s ease-in-out forwards;
  animation-delay: 1.4s;
}
li:nth-child(5) { 
  -webkit-animation: fade .5s ease-in-out forwards;
  -webkit-animation-delay: 1.8s;
  -moz-animation: fade .5s ease-in-out forwards;
  -moz-animation-delay: 1.8s;
  -o-animation: fade .5s ease-in-out forwards;
  -o-animation-delay: 1.8s;
  animation: fade .5s ease-in-out forwards;
  animation-delay: 1.8s;
}
li:nth-child(6) { 
  -webkit-animation: fade .5s ease-in-out forwards;
  -webkit-animation-delay: 2.2s;
  -moz-animation: fade .5s ease-in-out forwards;
  -moz-animation-delay: 2.2s;
  -o-animation: fade .5s ease-in-out forwards;
  -o-animation-delay: 2.2s;
  animation: fade .5s ease-in-out forwards;
  animation-delay: 2.2s;
}
@-webkit-keyframes fade {
  100% { opacity: 1; }
}

@-moz-keyframes fade {
  100% { opacity: 1; }
}

@-o-keyframes fade {
  100% { opacity: 1; }
}

@keyframes fade {
  100% { opacity: 1; }
}

.team { height: 600px;}
.team .team_content { margin: 110px 0;}
.circle { width: 190px; height: 190px; margin: 0 auto; border: 5px solid #58595B; border-radius: 999px;}
.circle .circle_img { width: 170px; height: 170px; margin: 5px auto 0 auto; border-radius: 0px; border-radius: 999px;}
.circle .ana { background-image: url(../img/ana1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}
.circle .ana:hover { background-image: url(../img/ana2.jpg);}
.circle .andre { background-image: url(../img/andre1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}
.circle .andre:hover { background-image: url(../img/andre2.jpg);}
.circle .antonio { background-image: url(../img/antonio1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}
.circle .antonio:hover { background-image: url(../img/antonio2.jpg);}
.circle .tiago { background-image: url(../img/tiago1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}
.circle .tiago:hover { background-image: url(../img/tiago2.jpg);}
.member_name { font-size: 16pt; margin-top: 30px;}
.member_occupation { font-size: 13pt; margin-bottom: 50px;}

.portfolio #filters { list-style: none;}
.portfolio #filters li { display: inline-block;}
.portfolio #filters li span { display: block; padding: 5px 10px; text-decoration: none; color: #58595B; cursor: pointer; font-size: 12pt; -webkit-transition: color .4s ease-in-out; -moz-transition: color .4s ease-in-out; -o-transition: color .4s ease-in-out; transition: color .4s ease-in-out;}
.portfolio #filters li span.active { color: #42C0C6;}
.portfolio #filters li span:hover { color: #42C0C6;}
.portfolio .work { position: relative; margin: 0; padding: 0; cursor: pointer;border:0.5px solid #fff; display:none;}
.portfolio .work img { width: 100%;}
.portfolio .work a { width: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-color: #58595B; opacity: 0; -webkit-transition: .5s ease-in-out; -moz-transition: .55s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.portfolio .work a:before { content: ' '; display: inline-block; vertical-align: middle; height: 100%;}
.portfolio .work .work_info { width: 80%; vertical-align: middle; display: inline-block;}
.portfolio .work .work_info .work_title { overflow: hidden; font-size: 16pt; opacity: 0; color: white; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.portfolio .work .work_info hr { width: 0%; margin: 5px auto 15px auto; background-color: white; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.portfolio .work .work_info .work_area { font-size: 11pt; opacity: 0; color: white; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.portfolio .work:hover > a { opacity: 0.8;}
.portfolio .work:hover .work_title { opacity: 1;}
.portfolio .work:hover .work_area { opacity: 1;}
.portfolio .work:hover .work_info hr { width: 100%;}

.subtitle { text-align: center; color: #BBBDBF; font-size: 9pt;}
.hr2 { width: 60px; height: 1px; margin: 5px auto 20px auto; border: none; background-color: #58595B;}
.content { margin-top: 80px;}
.content p { line-height: 2.5;}
.content hr { margin: 5px 0 50px 0;}
.content .label_text { font-family: nexa_bold; line-height: 2.5;}
.content .info_text { line-height: 2.5; margin-bottom: 30px;}
.content .facebook2, .instagram2, .site { width: 35px; height: 21px; display: inline-block; margin: 10px 0 30px 0;}
.content .facebook2 { background-image: url(../img/facebook_cinza.png); background-repeat: no-repeat; background-size: contain; background-position: center;}
.content .instagram2 { background-image: url(../img/instagram_cinza.png); background-repeat: no-repeat; background-size: contain; background-position: center;}
.content .site { background-image: url(../img/site_cinza.png); background-repeat: no-repeat; background-size: contain; background-position: center;}
.content .facebook2, .instagram2, .site { cursor: pointer; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out;}
.content .facebook2:hover, .instagram2:hover, .site:hover { opacity: 0.5;}
.content img { display: block; margin: 0 auto;}
.content .img_sub { color: #BBBDBF; font-size: 9pt; margin: 15px 0 60px 0;}

.contact { height: 600px;}
.contact .sentence { text-align: center; font-size: 13pt;}
.contact .coffee { text-align: center; font-size: 9pt;}
.contact form { margin-top: 50px;}
.contact form input { border: 0; outline: 0; background: transparent;}
.contact form input[type="text"] { width: 90%; max-width: 400px; height: 30px; margin: 0 auto 30px auto; display: block; color: #58595B; border-bottom: 1px solid #58595B; transition: box-shadow 0.35s ease-in-out;}
.contact form textarea { width: 90%; max-width: 400px; height: 90px; margin: 0 auto 15px auto; display: block; padding-top: 5px; border: 0; outline: 0; background: transparent; border-bottom: 1px solid #58595B; color: #58595B;}
.contact #honeypot { display: none;}
.contact form .btn_submit { width: 35px; height: 35px; margin: 30px auto; cursor: pointer; background-image: url(../img/submit.png); background-repeat: no-repeat; background-size: contain; background-position: center; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out;}
.contact form .btn_submit:hover { opacity: 0.5;}
.contact form input:focus, .contact_form form textarea:focus { outline: 0;}
::-webkit-input-placeholder { color: #58595B;}
:-moz-placeholder { color: #58595B;}
::-moz-placeholder { color: #58595B;}
:-ms-input-placeholder { color: #58595B;}
input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}
.msg_success, .msg_failed { width: 100%; height: 100vh; cursor: pointer; background-color: rgba(35, 31, 32, 0.9); position: fixed; top: 0; z-index: 11; display: none; text-align: center;}
.msg { font-size: 16pt; color: #E8E3DA; margin-top: 20%;}
.msg span { font-size: 20pt; font-weight: 500; color: #E8E3DA;}

footer { padding: 30px; background-color: #58595B;}
footer .phone, .mail { font-size: 9pt; color: #fff;}
footer .social { margin-top: 30px;}
footer .follow { font-family: nexa_bold; margin-bottom: 10px; color: #fff;}
footer .facebook, .behance, .instagram { width: 35px; height: 21px; display: inline-block;}
footer .facebook { background-image: url(../img/facebook_branco.png); background-repeat: no-repeat; background-size: contain; background-position: center; margin-right: 10px;}
footer .behance { background-image: url(../img/behance_branco.png); background-repeat: no-repeat; background-size: contain; background-position: center; margin-right: 10px;}
footer .instagram { background-image: url(../img/instagram_branco.png); background-repeat: no-repeat; background-size: contain; background-position: center;}
footer .facebook, .behance, .instagram { cursor: pointer; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out;}
footer .facebook:hover, .behance:hover, .instagram:hover { opacity: 0.5;}

@media only screen and (max-width : 991px) {
  .content p { text-align: center;}
  .content hr { margin: 5px auto 50px auto;}
  .content .label_text { text-align: center;}
  .content .info_text { text-align: center;}
  .content .center { text-align: center;}
  .content .img_sub { text-align: center;}
}

@media only screen and (max-width : 768px) {
  .services .services_box { width: 80%;}
  
  .contact { height: 650px;}
}

@media only screen and (max-width : 600px) {
  .home #logo_home { width: 80px; height: auto; margin-top: 13vh;}
  .home .slogan { font-size: 12pt; margin-top: 13vh;}

  .services { height: 730px;}
  .title { font-size: 14pt;}
  hr { width: 50px;}
  .services .services_box { width: 90%; margin: 50px auto 0 auto;}
  .services #logo_design { width: 70px; margin-bottom: 50px; float: none;}
  .logo_design_active, .logo_architecture_active, .logo_marketing_active { margin-left: 0; opacity: 0.1;}
  .services #logo_architecture { width: 70px; display: block; margin: 0 auto 50px auto;}
  .services #logo_marketing { width: 70px; float: none; margin: 0;}
  .services #logo_design:hover, #logo_architecture:hover, #logo_marketing:hover { width: 67px;}

  .services .design, .architecture, .marketing { width: 100%; text-align: center; position: absolute; left: 0; top: 10px; margin-left: 0; display: none;}
  .services li { font-size: 12pt; margin-bottom: 15px; list-style: none; text-align: center; opacity: 0;}


  .team .team_content { margin: 60px 0;}

}