/* STRUCTURE */

body {
    font-family: 'Nunito', sans-serif;
}

#viewport {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow-x: hidden;
}


/* COMMON */

.back {
    display: block;
    width: 36px;
    height: 36px;
    position: absolute;
    top: 12px;
    left: 16px;
}


/* HELPERS */

.spacer60 {
    width: 100%;
    height: 40px;
}

.spacer20 {
    width: 100%;
    height: 20px;
}


/* BURGER TOGGLE */

#toggle {
    display: block;
    width: 28px;
    height: 30px;
    position: absolute;
    top: 30px;
    left: 22px;
    z-index: 4;
}

#toggle span:after,
#toggle span:before {
    content: "";
    position: absolute;
    left: 0;
    top: -9px;
}
#toggle span:after{
    top: 9px;
}
#toggle span {
    position: relative;
    display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
    width: 100%;
    height: 4px;
    background-color: #677917;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 2px;
}

/* on activation */
#toggle.on span {
    background-color: transparent;
}
#toggle.on span:before {
    transform: rotate(45deg) translate(5px, 5px);
    background-color: #ffffff;
}
#toggle.on span:after {
    transform: rotate(-45deg) translate(7px, -8px);
    background-color: #ffffff;
}


/* LOGO & MENU */

.logohome {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 1;
}

.logobox {
    width: 260px;
    height: auto;
    animation-duration: 5s;
    animation-delay: 0s;
}

#lang {
    position: absolute;
    bottom: 18px;
    right: 24px;
    color: #677917;
    z-index: 2;
}

#lang .active {
    font-weight: 800;
}

#lang a {
    color: #677917;
}

#lang a:hover {
    text-decoration: none;
}

#menu {
    width: 100%;
    height: 100vh;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s ease-out .5s;
    overflow: hidden;
    z-index: 3;
}

#menu.on {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease-in, visibility 0s ease-in;
  overflow: auto;
}

.menucell {
    height: 50vh;
    padding: 0;
}

@media (max-width: 767px) {
    .menucell {
        height: 16.666666vh;
    }
}

.menucell a {
    width: 100%;
    height: 100%;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 1px;
    transition: font-size .3s ease-out;
}

.menucell a.cm5, .menucell a.cm6, .cat-inside .cm5 h1, .cat-inside .cm6 h1, .cat-header.cm5 h2, .cat-header.cm6 h2 {
    color: #483E36;
}

.menucell a:hover {
    font-size: 1.5rem;
}

.cm1 { background-color: #23A157; }
.cm2 { background-color: #FF7F12; }
.cm3 { background-color: #5E5BD6; }
.cm4 { background-color: #483E36; }
.cm5 { background-color: #C8BEB7; }
.cm6 { background-color: #FFFFFF; }

.ccm1 { color: #23A157; }
.ccm2 { color: #FF7F12; }
.ccm3 { color: #5E5BD6; }
.ccm4 { color: #483E36; }
.ccm5 { color: #C8BEB7; }
.ccm6 { color: #FFFFFF; }

/* Versão 2
.cm1 { background-color: #23A157; }
.cm2 { background-color: #483E36; }
.cm3 { background-color: #CA3532; }
.cm4 { background-color: #5E5BD6; }
.cm5 { background-color: #C8BEB7; }
.cm6 { background-color: #FF7F12; }
.cm7 { background-color: #BD5AD5; }
.cm8 { background-color: #FFFFFF; }
.cm9 { background-color: #FFCD00; }
*/

/* Versão 1
.cm1 { background-color: #00996E; }
.cm2 { background-color: #F0C00A; }
.cm3 { background-color: #193B86; }
.cm4 { background-color: #00619D; }
.cm5 { background-color: #2E302D; }
.cm6 { background-color: #A9323E; }
.cm7 { background-color: #DD710E; }
.cm8 { background-color: #A4B475; }
.cm9 { background-color: #8978A9; }
*/


/* CATEGORY INDEX */

.cat-index {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: #666666;
    transform: translateX(-100%);
    transition: transform ease-out .5s;
    overflow: hidden;   
    z-index: 5; 
}

.cat-index.on {
    transform: translateX(0);
    overflow: auto; 
}

.cat-index .back {
    z-index: 6;
}

.cat-header {
    min-height: 62px;
}

.cat-header h1 {
    color: #ffffff;
    font-size: 1.8rem;
    padding: 14px 5px 12px 0;
    margin: 0;
}

.cat-header h2 {
    color: #ffffff;
    font-size: 1.5rem;
    padding: 16px 5px 16px 0;
    margin: 0;
}

.cat-image {
    height: 160px;
    position: relative;
    border: 6px solid #ffffff;
    overflow: hidden;   
}

.cat-image-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform .5s;
}

.cat-image:hover .cat-image-bg {
    transform: scale(1.1);
}

@media (max-width: 767px) {
    .cat-name {
        justify-content: center;
    }
}

.cat-name a {
    color: #ffffff;
    text-decoration: none;
    margin: 10px 0 10px 0;
    font-size: 1.2rem;
    opacity: 1;
    transition: opacity .3s ease-out;
}

.cat-name a:hover { 
    opacity: .6;
}

.arch-juq { background-image: url('../img/portfolio/arch-juqThumb.jpg'); }
.arch-var { background-image: url('../img/portfolio/arch-varThumb.jpg'); }
.arch-dar { background-image: url('../img/portfolio/arch-darThumb.jpg'); }
.arch-jos { background-image: url('../img/portfolio/arch-josThumb.jpg'); }
.arch-con { background-image: url('../img/portfolio/arch-conThumb.jpg'); }
.arch-jer { background-image: url('../img/portfolio/arch-jerThumb.jpg'); }
.arch-pru { background-image: url('../img/portfolio/arch-pruThumb.jpg'); }
.arch-lug { background-image: url('../img/portfolio/arch-lugThumb.jpg'); }

.desi-jac { background-image: url('../img/portfolio/desi-jacThumb.jpg'); }
.desi-zet { background-image: url('../img/portfolio/desi-zetThumb.jpg'); }
.desi-col { background-image: url('../img/portfolio/desi-colThumb.jpg'); }
.desi-tul { background-image: url('../img/portfolio/desi-tulThumb.jpg'); }
.desi-lyg { background-image: url('../img/portfolio/desi-lygThumb.jpg'); }
.desi-mis { background-image: url('../img/portfolio/desi-misThumb.jpg'); }
.desi-cam { background-image: url('../img/portfolio/desi-camThumb.jpg'); }
.desi-sin { background-image: url('../img/portfolio/desi-sinThumb.jpg'); }
.desi-sat { background-image: url('../img/portfolio/desi-satThumb.jpg'); }
.desi-rit { background-image: url('../img/portfolio/desi-ritThumb.jpg'); }
.desi-exp { background-image: url('../img/portfolio/desi-expThumb.jpg'); }
.desi-fig { background-image: url('../img/portfolio/desi-figThumb.jpg'); }
.desi-boa { background-image: url('../img/portfolio/desi-boaThumb.jpg'); }

.danc-bal { background-image: url('../img/portfolio/danc-balThumb.jpg'); }
.danc-ddc { background-image: url('../img/portfolio/danc-ddcThumb.jpg'); }
.danc-pei { background-image: url('../img/portfolio/danc-peiThumb.jpg'); }
.danc-rit { background-image: url('../img/portfolio/danc-ritThumb.jpg'); }
.danc-for { background-image: url('../img/portfolio/danc-forThumb.jpg'); }
.danc-ele { background-image: url('../img/portfolio/danc-eleThumb.jpg'); }
.danc-flu { background-image: url('../img/portfolio/danc-fluThumb.jpg'); }

.loja-rit { background-image: url('../img/portfolio/loja-ritThumb.jpg'); }
.loja-joi { background-image: url('../img/portfolio/loja-joiThumb.jpg'); }


/* CATEGORY ITEM */

#cat-item {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: #666666;
    transform: translateX(-100%);
    transition: transform ease-out .5s;
    overflow: hidden;
    z-index: 7; 
}

#cat-item.on {
    transform: translateX(0);
    overflow: auto;
}

#cat-item .back {
    z-index: 8;
}

#cat-item .item, .cat-text .item {
    height: calc(100vh - 62px);
    flex-wrap: wrap;
}

#cat-item .item img {
    border: 6px solid #ffffff;
}

#cat-item .item p {
    color: #ffffff;
    margin: 16px 0 0 0;
}

.cat-text .item p, .cat-text .item ul {
    color: #ffffff;
    margin: 0 0 26px 0;
}

#cat-item .item a, .cat-text .item a {
    color: #deb887;
    text-decoration: none;
    opacity: 1;
    transition: opacity .3s ease-out;
}

#cat-item .item a:hover, .cat-text .item a:hover {   
    opacity: .6;
}

#cat-item .item .icontent {
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.icon {
    margin-right: 12px;
}

.icon.email {
    width: 24px;
}

.icon.linkedin {
    width: 24px;
    margin-top: -8px;
}

.icon.skype {
    width: 26px;
}


/* SLICK */

.slick-slide img {
    margin: 0 auto;
}