*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; }
body { background: #1a1a1a; font-family: 'Roboto Slab', serif; margin: auto; -webkit-font-smoothing: subpixel-antialiased; min-height: 900px; overflow-y: scroll; overflow-x: hidden; }
.container { float: left; width: 100%; padding-bottom: 10px; min-height: 820px; padding-top: 70px; }
.container.hasProjectHeader { padding-top: 180px; }
.container.hasTeamHeader { padding-top: 195px; }

/* Content */
.content { position: relative; width: 100%; margin: 0 auto; max-width: 1540px; }
.content .item { width: 1px; height: 1px; margin: 10px; float: left; position: absolute; background: #231F20; cursor: pointer; overflow: hidden; top: 0; left: 0;
 -webkit-transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1);
 -moz-transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1);
 -ms-transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1);
 -o-transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1);
 transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1);
 transition-property: left, right, top;
}
.content .item { width: 280px; height: 280px; }
.content .item.two-column { width: 580px; height: 580px; }
.content .item.two-column-one-row { width: 580px; height: 280px; }
.content .item.half-column { width: 280px; height: 280px; }
.content .item .image { width: 100%; height: 100%; }
.content .item .image img { width: 100%; height: 100%; position: relative; top: 0;
 -webkit-transition: top .2s ease-in-out;
 -moz-transition: top .2s ease-in-out;
 -ms-transition: top .2s ease-in-out;
 -o-transition: top .2s ease-in-out;
 transition: top .2s ease-in-out;
}
.content .item.noCursor { cursor: default; }
.content .item.onlyText { cursor: default; }
.content .item .image img.top { top: -94px; }
.content .item .image:after { content: ''; display: block; height: 280px; width: 280px; position: absolute; top: 0; opacity: 1; background: rgba(0,0,0,.1);
 -webkit-transition: opacity .4s ease-in-out;
 -moz-transition: opacity .4s ease-in-out;
 -ms-transition: opacity .4s ease-in-out;
 -o-transition: opacity .4s ease-in-out;
 transition: opacity .4s ease-in-out;
}
.content .item .image:hover:after { opacity: 0; }
.content .item.two-column .image:after { height: 580px; width: 580px; }
.content .item.half-column .image:after { width: 580px; height: 280px; }
.content .item .itemTitle { z-index: 2; position: absolute; top: 20px; left: 20px; color: white; width: 225px; font-size: 24px;  line-height: 40px; }
.content .item.two-column .itemTitle { font-size: 60px; width: 500px; top: 40px; left: 40px; line-height: 72px; }
.content .item.half-column .itemTitle { font-size: 50px; width: 500px; top: 20px; left: 20px; line-height: 60px; }
.content .item.onlyText .itemContent { display: block; font-weight: 100; }
.content.detail .item.two-column .itemTitle { width: 500px; font-size: 54px; line-height: 1.2em; top: 40px; left: 40px; }
.content.detail .item.half-column .itemTitle { width: 540px; font-size: 34px; line-height: 1.2em; padding: 20px; top: 0; }
.bottomTitle { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 20px; line-height: 100%; background: rgba(0, 0, 0, 0.2); color: #ffffff; text-align: left; font-size: 28px; font-weight: 700; }
.itemDescription { font-size: 20px; top: -70px; color: #FFFFFF; left: 0; line-height: 28px; margin: -96px 0 0 0; right: 0; text-align: left; padding: 20px; font-weight: 100; }

/* Nav Bar Css */
.navbar { height: 70px; width: 100%; position: fixed; z-index: 99999; background: #231F20;
    -webkit-transition: height .4s ease-in-out;
    -moz-transition: height .4s ease-in-out;
    -ms-transition: height .4s ease-in-out;
    -o-transition: height .4s ease-in-out;
    transition: height .4s ease-in-out;
    display: none;
}
.navbar.shown { display: block; }
.navbar .centerContainer { padding: 0; margin: 0 auto; width: 100%; height: 70px; }
.navbar #logo { height: 48px; width: 48px; background: url('../img/logo.png'); float: left; margin: 10px 25px 0 0; cursor: pointer; }
.navbar .navbarMenu { width: 600px; float: left; height: 68px; }
.navbar .navbarMenu a { line-height: 70px; text-decoration: none; color: #825432; margin-right: 30px; cursor: pointer; font-family: 'Roboto Slab', serif; font-weight: 700; }
.navbar .navbarMenu a.active { color: white; }
.navbar .navbarRight { float: right; width: 20px; }
.navbar .navbarRight .lang { cursor: pointer; float: right; border-right: 1px solid black; position: relative; top: 20px; height: 32px; line-height: 32px; color: #825432; }
.navbar .navbarRight .socials { float: left; position: relative; top: 25px; }
.navbar .navbarRight .socials a { float: left; background: url("../img/socialSprite2.png"); height: 26px; width: 27px; margin-right: 5px; }
.navbar .navbarRight .socials a.twitter { background-position: 0 -78px; }
.navbar .navbarRight .socials a.linkedin { background-position: 0 -104px; margin-right: 0; }

.navbar .context { height: 0; overflow: hidden; z-index: 2; font-size: 14px; float: left; width: calc(100% + 40px); position: relative; left: -20px; transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; -moz-transition: all .3s; }
.navbar .closeButton { display: inline-block; height: 39px; position: absolute; right: 30px; top: 20px; width: 39px; background: url('../img/sprite.png') no-repeat -148px 0; cursor: pointer; z-index: 99; }

/* Detail Css*/
.navbar .detail { background: #231F20; color: white; }
.navbar .detail.shown { height: 621px; }
.navbar .detail .detailImage { height: 581px; width: 581px; float: left; margin: 20px 40px 20px 20px; }
.navbar .detail img { height: 581px; width: 581px; }
.navbar .detail .detailDescription h2 { font-size: 57px; margin: 20px 0 35px; }
.navbar .detail .detailDescription p { font-size: 14px; line-height: 20px; padding-right: 60px; }

/* Contact Css */
.navbar .contact {
    opacity: 0;
    top: 65px;
    left: 330px;
    background: transparent;
    position: absolute;
    height: 0;
    width: 0;
    padding: 0;
    overflow: hidden;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}
.navbar .contact.shown { opacity: 1; overflow: auto; height: 285px; padding: 20px; width: 580px; }
.navbar .contact .map { height: 581px; width: 581px; float: left; margin: 20px 40px 20px 20px; }
.navbar .contact .companyInfo { margin: 0; background: #231F20; padding: 10px 35px; box-shadow: 0 0 40px -1px rgba(0,0,0,.5); }
.navbar .contact.shown:before {
    content: "";
    position: absolute;
    z-index: 1000;
    top: 10px;
    left: 7%;
    margin-left: -8px;
    border-bottom: 10px solid #231F20;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 0;
}

/* Team Css */
.team { color: white; }
.team.shown { height: 740px; }
.teamHeader { height: 105px; background: #231F20; margin-bottom: 20px; overflow-y: auto; overflow-x: hidden; display: none; }
.teamHeader.shown { display: block; }
.teamHeader .teamContainer { text-align: center; display: table; width: auto; margin: 0 auto; position: relative; top: 5px; }
.teamHeader .teamMember {margin-right: -2px; width: 100px; height: 100px; cursor: pointer; position: relative; float: left; }
.teamHeader .teamMember img { width: 100px; height: 100px; }
.teamHeader .teamMember:after { content: ''; display: block; width: 98px; height: 100px; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; }
.teamHeader .teamMember:hover:after { display: none; }
.teamHeader .teamMember.active:after { display: none; }
.teamHeader .teamMember:last-child:after { width: 100px; }
.team .teamInfo { position: relative; height: 580px; padding: 0 20px; margin: 0 auto; }
.team .teamInfo .memberImage { height: 580px; width: 100%; float: left; padding: 0 20px;
    background-size: cover;  margin: 0 20px; }
/*.team .teamInfo .memberImage img { height: 580px; width: 100%; }*/
.team .teamInfo .memberInfo { padding-top: 20px; float: left; width: 345px; position: absolute; top: 0; }
.team .teamInfo .memberInfo h2 { font-size: 47px; margin: 0 20px; font-weight: 700; }
.team .teamInfo .memberInfo h3 { font-size: 27px; margin: 10px 20px; font-weight: 100; }
.memberInfo .memberSocial a { display: block; height: 40px; line-height: 40px; color: white; }

.content .item.memberSocials { background: white; }
.content .item.memberSocials .memberSocial { display: block; width: 100%; text-decoration: none; color: #825432; background: #231F20; height: 69px; line-height: 69px; border-bottom: 1px solid #825432; }
.content .item.memberSocials.one .memberSocial { height: 280px; line-height: 280px; }
.content .item.memberSocials.two .memberSocial { height: 139px; line-height: 139px; }
.content .item.memberSocials.three .memberSocial { height: 92px; line-height: 92px; }
.content .item.memberSocials .memberSocial:hover { color: white; background: #393334; }

.item.memberSocials .memberSocial span { position: relative; display: inline-block; margin: 0 15px; width: 34px; height: 34px; background: url('../img/socialSprite2.png'); top: 11px; }
.item.memberSocials .memberSocial span.facebook { background: url('../img/facebook_.png'); }
.item.memberSocials .memberSocial span.instagram { background: url('../img/instagram_.png'); }
.item.memberSocials .memberSocial span.linkedin { background: url('../img/linkedin_.png'); }
.item.memberSocials .memberSocial span.twitter { background: url('../img/twitter_.png'); }
.item.memberSocials .memberSocial span.deezer { background-position: 0 -26px; }
.item.memberSocials .memberSocial span.spotify { background-position: 0 -52px; }
.item.memberSocials .memberSocial span.pinterest { background-position: 0 -156px; }
.item.memberSocials .memberSocial span.youtube { background-position: 0 -182px; }
.item.memberSocials .memberSocial span.lastfm { background-position: 0 -208px; }
.item.memberSocials .memberSocial span.behance { background-position: 0 -234px; }
.item.memberSocials .memberSocial span.google { background-position: 0 -260px; }
.item.memberSocials .memberSocial span.flickr { background-position: 0 -286px; }
.item.memberSocials .memberSocial span.blogger { background-position: 0 -312px; }
.item.memberSocials .memberSocial span.deviant { background-position: 0 -338px; }

/* Footer Css */
.footer { background: #231F20; width: 100%; height: 280px; color: white; float: left; padding: 20px 0; display: none; }
.footer.shown { display: block; }
.footer .logo { font-size: 14px; }
.footer .logo span { display: inline-block; height: 32px;  width: 106px; background: url('../img/sprite.png') no-repeat -109px -49px; }
.companyInfo { padding: 0 35px; }
.companyInfo .footerItem { margin: 15px 0; line-height: 20px; display: block; color: white; font-size: 12px; position: relative; padding-left: 22px;}
.companyInfo .footerItem span { font-size: 12px; background: url('../img/sprite.png') no-repeat; display: inline-block; width: 17px; height: 17px; left: 0; position: absolute; top: 5px; margin-right: 5px; }
.companyInfo .footerItem span.location { background-position: 2px -28px; }
.companyInfo .footerItem span.phone { background-position: -16px -28px; }
.companyInfo .footerItem span.fax { background: url('../img/fax_icon.png') no-repeat; }
.companyInfo .footerItem span.mail { background-position: -37px -28px; }
.companyInfo .footerItem span.fb { background-position: -55px -28px; }
.companyInfo .footerItem span.tw { background-position: -71px -28px; }
.companyInfo .footerItem span.in { background-position: -90px -28px; }
.companyInfo .footerItem a { color: #ffffff }
.footerContainer { margin: 0 auto; padding: 0 30px; width: 1840px; }

/* Project Detail */
.projectDetail .detailImage img { height: 280px; width: 280px; }
.projectHeader { height: 100px; background: #231F20; margin-bottom: 20px; overflow-y: auto; overflow-x: hidden; display: none; }
.projectHeader.shown { display: block; }
.projectHeader .projectContainer { text-align: center; display: table; width: auto; margin: 0 auto; max-width: 980px; overflow: hidden; }
.projectHeader .project { width: 100px; height: 100px; cursor: pointer; position: relative; float: left; }
.projectHeader .project img { width: 100px; height: 100px; }
.projectHeader .project:after { content: ''; display: block; width: 100px; height: 100px; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; }
.projectHeader .project:hover:after { display: none; }
.projectHeader .project.active:after { display: none; }

.headerSlider { position: relative; text-align: left; float: left; width: 800px; overflow: hidden; height: 100px; }
.headerSlider.one { width: 100px; }
.headerSlider.two { width: 200px; }
.headerSlider.three { width: 300px; }
.headerSlider.four { width: 400px; }
.headerSlider.five { width: 500px; }
.headerSlider.six { width: 600px; }
.headerSlider.seven { width: 700px; }


.sliderContainer { position: relative; width: 10000px; text-align: left; left: 0;
    -webkit-transition: left .4s ease-in-out;
    -moz-transition: left .4s ease-in-out;
    -ms-transition: left .4s ease-in-out;
    -o-transition: left .4s ease-in-out;
    transition: left .4s ease-in-out;
}
.navContainer { width: 50px; height: 50px; float: left;  margin: 25px 20px; }
.navButton { display: block; width: 50px; height: 50px; float: left; background: url('../img/sprite.png') 0 -48px; cursor: pointer; }
.navButton.nextButton { background-position: -52px -48px; }

.youtube-player { width: 100%; height: 280px; z-index: 1; }

.content { max-width: 1500px; z-index: 1; }
.team .teamInfo { max-width: 1520px; }
.team .teamInfo .memberImage { max-width: 1480px; }
.navbar .centerContainer { max-width: 1480px; }
.footerContainer { max-width: 1500px; }

.soundcloud {
    width: 100%;
    height: 100%;
}

/* 5 Coloumn */
@media only screen and (max-width : 1855px) {
    .content { width: 1500px; }
    .team .teamInfo { width: 1520px; }
    .team .teamInfo .memberImage { width: 1440px; }
    .navbar .centerContainer { width: 1480px; }
    .footerContainer { width: 1500px; }
}

/* 4 Coloumn */
@media only screen and (max-width : 1555px) {
    .content { width: 1200px; }
    .team .teamInfo { width: 1220px; }
    .team .teamInfo .memberImage { width: 1140px; }
    .navbar .centerContainer { width: 1180px; }
    .footerContainer { width: 1200px; }
}

/* 3 Coloumn */
@media only screen and (max-width : 1255px) {
    .content { width: 900px; }
    .team .teamInfo { width: 920px; }
    .team .teamInfo .memberImage { width: 840px; }
    .navbar .centerContainer { width: 880px; }
    .footerContainer { width: 900px; }

    .navbar .team .teamInfo .memberImage { margin-right: 20px; }
    .navbar .detail .detailDescription h2 { font-size: 40px; margin-bottom: 15px; }
}

@media only screen and (max-width : 1000px) {
    .headerSlider { width: 600px!important; }
    .navbar .team .teamInfo .memberImage { float: none; margin: 0 auto; }
    .navbar .team .teamInfo .memberInfo { position: relative; width: 580px; height: 580px; background: rgba(0,0,0,0.6); padding-left: 20px; top: -580px; margin: 0 auto; float: none; }

    .navbar .detail .detailImage { float: none; margin: 20px auto; }
    .navbar .detail .detailDescription { position: relative; width: 583px; height: 581px; background: rgba(0,0,0,0.6); padding-left: 20px; top: -601px; left: -1px; margin: 0 auto; float: none; }
    .navbar .detail .detailDescription h2 { font-size: 40px; padding-top: 20px; }
    .navbar .detail .detailDescription p { font-size: 14px; }
}

/* 2 Coloumn */
@media only screen and (max-width : 955px) {
    .navbar .navbarMenu { width: 460px; }
    .navbar .navbarMenu a { margin-right: 20px; font-size: 14px;}
    .navbar .centerContainer { width: 580px; }

    .content { width: 600px; }
    .team .teamInfo { width: 620px; }
    .team .teamInfo .memberImage { width: 540px; }
    .footerContainer { width: 600px; }

}

@media only screen and (max-width : 910px) {
    .navbar .contact .map { display: none; }
    .navbar .contact.shown { height: 321px; }
    .headerSlider { width: 500px!important; }
}

@media only screen and (max-width : 700px) {
    .headerSlider { width: 400px!important; }
}

/* 1 Coloumn */
@media only screen and (max-width : 655px) {
    .content { width: 300px; }
    .team .teamInfo { width: 340px; }
    .navbar .centerContainer { width: 620px; padding: 0; margin: 0; }
    .footerContainer { width: 300px; }

    .content .item.loaded.two-column { width: 280px; height: 280px; }
    .content .item.loaded.two-column .image:after { height: 280px; width: 280px; top: -583px; }
    .content .item.loaded.two-column .itemTitle { top: 20px; left: 20px; width: 240px; font-size: 20px; padding: 5px; }
    .content .item.loaded.two-column .image:after { top: -283px; }

    .content .item.loaded.half-column { width: 280px; height: 280px; }
    .content .item.loaded.half-column .image:after { height: 280px; width: 280px; top: -583px; }
    .content .item.loaded.half-column .itemTitle { top: 22px; left: 20px; width: 225px; font-size: 20px; padding: 5px; }
    .content .item.loaded.half-column .image:after { top: -283px; }

    .navbar #logo { margin: 10px 10px 0 10px; }
    .navbar .navbarMenu { width: 396px; }
    .navbar .navbarMenu a { margin-right: 5px; font-size: 13px;}
    .navbar .centerContainer { padding: 0 10px; }

    .headerSlider { width: 300px!important; }
}

@media only screen and (max-width : 645px) {
    .navbar .centerContainer { padding: 0 10px; }
    .navbar .navbarMenu a { margin-right: 5px; }

    .navbar .team .teamInfo .memberImage { min-width: 540px; }
}

@media only screen and (max-width : 550px) {
    .navbar .navbarRight { width: 90px; }
    .navbar .navbarMenu a { margin-right: 5px; }
}

@media only screen and (max-width : 520px) {
    .headerSlider { width: 200px!important; }
}

@media only screen and (max-width : 490px) {
    .navbar .navbarRight { width: 50px; }
    .navbar .navbarRight .socials { display: none; }
    .navbar #logo { margin-right: 5px; }
    .headerSlider { width: 100px; }
}

@media only screen and (max-width : 390px) {
    .navbar .navbarMenu { width: 310px; }
    .navbar .navbarMenu a { margin-right: -2px; font-size: 12px;}
    .navbar .navbarMenu a:first-child { display: none; }
}

@media only screen and (max-width : 350px) {
    .navbar #logo { margin-right: 1px; margin-left: 1px; }
    .navbar .centerContainer { padding: 0; }
}


/*Animations*/
.slide { opacity: 1; transition: .85s ease-in-out all; -webkit-transition: .85s ease-in-out all; -ms-transition: .85s ease-in-out all; -moz-transition: .85s ease-in-out all;
    transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0);
}
.slide.ng-enter { position:fixed; z-index:inherit; height:inherit; opacity: 0; }
.slide.ng-leave { position:fixed; z-index:9999; opacity: 1; }
.slide.ng-leave-active { position:fixed; opacity: 0; }
.slide.ng-enter-active { position:relative; opacity: 1; }
.slide.ng-leave-noanimation { right:-100%; left:100%; }

.left .slide.ng-enter { transform: translate3d(15%,0,0); -webkit-transform: translate3d(15%,0,0); -ms-transform: translate3d(15%,0,0); -moz-transform: translate3d(15%,0,0); -webkit-transition-delay: .85s !important; transition-delay: .85s !important; }
.right .slide.ng-enter { transform: translate3d(-15%,0,0); -webkit-transform: translate3d(-15%,0,0); -ms-transform: translate3d(-15%,0,0); -moz-transform: translate3d(-15%,0,0); -webkit-transition-delay: .85s !important; transition-delay: .85s !important; }

.left .slide.ng-leave { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); }
.right .slide.ng-leave { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); }

.left .slide.ng-leave-active { transform: translate3d(-15%,0,0); -webkit-transform: translate3d(-15%,0,0); -ms-transform: translate3d(-15%,0,0); -moz-transform: translate3d(-15%,0,0); }
.right .slide.ng-leave-active { transform: translate3d(15%,0,0); -webkit-transform: translate3d(15%,0,0); -ms-transform: translate3d(15%,0,0); -moz-transform: translate3d(15%,0,0); }

.left .slide.ng-enter-active { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); }
.right .slide.ng-enter-active { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); }


/*lightBox*/

#lightBox{display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(26, 26, 26, 0.85);z-index: 999999}
#lightBox .closeBtn{cursor: pointer;color: #825432;position: absolute;font-size: 45px;right: 60px;top: 50px;}
#lightBox .imageArea{display: table;width: 100%;height: 100%;}
#lightBox .imageArea .imageCell{display: table-cell;vertical-align: middle}
#lightBox .imageArea img{display: block;margin: 0 auto;width: 580px;}
#lightBoxVideo {width: 640px; height: 385px; margin: auto;}

@media only screen and (max-width: 600px) {
    #lightBox .closeBtn{top: 10px;right: 20px}
    #lightBox .imageArea img{width: 90%}
}