@import url("http://hello.myfonts.net/count/37291e");

.page-template-page-collective #main-header {
    display: none;
}

.page-template-page-collective #et-main-area, 
.page-template-page-collective #page-container {
    min-height: 100vh;
}



@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400d41d.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); 
}

@font-face {
  font-family: 'Font Awesome 5 Pro Light';
  font-style: normal;
  font-weight: 300;
  font-display: auto;
  src: url("../webfonts/fa-light-300.eot");
  src: url("../webfonts/fa-light-300d41d.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.woff") format("woff"), url("../webfonts/fa-light-300.ttf") format("truetype"), url("../webfonts/fa-light-300.svg#fontawesome") format("svg"); 
}

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400d41d.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }




  

@font-face {
    font-family: 'Futura Round';
    src: url('../webfonts/38E275_9_0.eot');
    src: url('../webfonts/38E275_9_0d41d.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/38E275_9_0.woff2') format('woff2'),
         url('../webfonts/38E275_9_0.woff') format('woff'),
         url('../webfonts/38E275_9_0.ttf') format('truetype');
}

@font-face {
	font-family: 'Futura Round Demi';
	src: url('../webfonts/38E275_2_0.eot');
	src: url('../webfonts/38E275_2_0d41d.eot?#iefix') format('embedded-opentype'),
		 url('../webfonts/38E275_2_0.woff2') format('woff2'),
		 url('../webfonts/38E275_2_0.woff') format('woff'),
		 url('../webfonts/38E275_2_0.ttf') format('truetype');
}

 
  
@font-face {
    font-family: 'Predige Rounded Bold';
    src: url('../webfonts/37291E_1_0.eot');
    src: url('../webfonts/37291E_1_0d41d.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/37291E_1_0.woff2') format('woff2'),
         url('../webfonts/37291E_1_0.woff') format('woff'),
         url('../webfonts/37291E_1_0.ttf') format('truetype');
}


@font-face {
    font-family: 'Predige Rounded Regular';
    src: url('../webfonts/type_dynamic_-_predige_rounded-webfont.woff2') format('woff2'),
         url('../webfonts/type_dynamic_-_predige_rounded-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}






/* =============================================== 

    COLLECTIVE - DEFAULT SETTINGS                                

 =============================================== */













.fab {
  font-family: 'Font Awesome 5 Brands'; 
}

.far {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400; 
}

.fal {
  font-family: 'Font Awesome 5 Pro Light';
  font-weight: 300; 
}


.collective {
    background-color: #1a0202 !important;
    min-height: 100vh;
}

.collective .bg {
    left: -1079px;
    position: fixed;
    z-index: -1;
    width: 3238px;
    height: 2563px;
    max-width: 10000px;
    pointer-events: none;
}

.collective .absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
}


.collective .wrapper {
    width: inherit;
    position: relative;
    height:auto !important; 
    width: 100%;
    min-height:100vh;  
    position: fixed;  
}

.collective .sections-wrapper {
    min-height: 100vh;
}


.collective .sections-wrapper > section {
    min-height: inherit;
    position: absolute;
    overflow: hidden;
    width: 100%;
    top: 0%;
    -webkit-transition: top .5s cubic-bezier(.46,.37,.2,1);
       -moz-transition: top .5s cubic-bezier(.46,.37,.2,1);
        -ms-transition: top .5s cubic-bezier(.46,.37,.2,1);
         -o-transition: top .5s cubic-bezier(.46,.37,.2,1);
            transition: top .5s cubic-bezier(.46,.37,.2,1);
}


.collective a.btn,
.collective h1,
.collective h3 {
    color: #fff;
}


.collective h2,
.collective h4{
    color: #110D0E;
    letter-spacing: 0.02px;
    text-transform: uppercase;
    padding-bottom: 0;
}


.collective h1 {
    font-family: 'Predige Rounded Bold';
    line-height: normal;
    font-size: 50px;
    text-align: center;
    letter-spacing: 0.15em;
    text-transform: uppercase;
	text-shadow: 2px 2px 10px #000000;
}

.collective h3 {
    font-family: 'Futura Round';
    line-height: normal;
    font-size: 30px;
    text-align: center;
    text-transform: unset;
	text-shadow: 2px 2px 10px #000000;
}


.collective h2 {
    font-family: 'Predige Rounded Bold';
    font-size: 24px;
    white-space: nowrap;
    font-weight: 600;
}

.collective h4 {
    font-family: 'Futura Round Demi';
    font-size: 12px;
}

.collective a.btn {
    font-family: 'Predige Rounded';
    line-height: normal;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 100;


    cursor: pointer;
    display: flex;
    padding: 20px;
    width: 100px;
    align-items: center;   
}

.collective a.btn i {
    font-size: 120px;
    padding-right: 10px;
}


.collective a.btn.back {
    right: -130px;
    top: -10px;
    position: absolute;
}

.collective a.btn.back:hover i {
    -webkit-transform: translateX(-10px);
       -moz-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
         -o-transform: translateX(-10px);
            transform: translateX(-10px);
}


.collective section.menu a.btn.close-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
	transition: top .3s ease;
}

.collective section.menu a.btn.close-menu:hover i {
    -webkit-transform: translateY(-10px);
       -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
         -o-transform: translateY(-10px);
            transform: translateY(-10px);
}

.collective section.menu.show-detailed a.btn.close-menu {
	top:-100px;
}


.collective .sections-wrapper.show-menu section.home a.btn.back {
    right: -130px;
}


.collective a.btn.open-menu {
    display: inline;
	animation-duration: .5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    position: relative;
}

@keyframes slidein {
  from {
    bottom: 0px;
    -webkit-transition: scale(1);
       -moz-transition: scale(1);
        -ms-transition: scale(1);
         -o-transition: scale(1);
            transition: scale(1);
  }

  to {
    bottom: -20px;
    -webkit-transition: scale(1.2);
       -moz-transition: scale(1.2);
        -ms-transition: scale(1.2);
         -o-transition: scale(1.2);
            transition: scale(1.2);
  }
}



.collective a.btn.open-menu i {
    -webkit-transition: transform .3s ease;
       -moz-transition: transform .3s ease;
        -ms-transition: transform .3s ease;
         -o-transition: transform .3s ease;
            transition: transform .3s ease;
}


.collective section.home a.btn.open-menu:hover i {
    -webkit-transform: translateY(10px);
       -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
         -o-transform: translateY(10px);
            transform: translateY(10px);
}


.collective section.home a.btn.back {
    position: fixed;
}

.collective  .sections-wrapper.show-menu.move-left section.home a.btn.back,
.collective  .sections-wrapper.show-menu.move-right section.home a.btn.back {
    right: -130px;
}

.collective section.home .content {
    position: absolute;
    text-align: center;
    bottom: 2em;
    left: 50%;
    width: 80%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
}



.collective section.menu {
    top: 100%;
}




.collective section.menu > .circle {
    padding: 10px;
    width: 420px;
    height: 420px;
    -webkit-border-radius: 420px;
            border-radius: 420px;
    border: 1px solid #fff;
}



.collective section.menu > .circle > .inner {
    background: #fff;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 400px;
            border-radius: 400px;
}

.collective section.menu > .circle > .inner > .txt {
    /*width: 77%;*/
	width: 100%;
}

.collective section.menu .c-list > .person {
    width: 290px;
    height: 60px;
    background: #fff;
    -webkit-border-radius: 68px;
            border-radius: 68px;
    padding: 4px;
    position: absolute;
}


.collective section.menu .c-list > .person .social {
    position: absolute;
    right: 120px;
    top: 10px;
    background: #221F1F;
    padding: 5px 10px;
    border-radius: 10px;
    display: flex;
    visibility: hidden;
    opacity: 0;
}


.collective section.menu .c-list > .person .social > a {
    width: 25px;
    height: 25px;
    display: block;
    background: #FFF;
    border-radius: 25px;
    margin: 8px;
    position: relative;

}

.collective section.menu .c-list > .person .social > a:hover {
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);
}

.collective section.menu .c-list > .person .social > a i {
    color: #190201;
}


.collective  section.menu .c-list > .person .details {
    padding: 0 120px 0 175px;
    margin-top: -55px;
    margin-bottom: 80px;
    overflow: hidden;
    max-height: 0;
    
}

.collective  section.menu .c-list > .person .details p {
    font-family: 'Futura Round';
    line-height: normal;
    font-size: 20px;
    color: #fff;
    opacity: 0;
}




.collective section.menu .c-list > .person .preview {
    height: 52px;
    width: 52px;
    -webkit-border-radius: 60px;
            border-radius: 60px;
    border: 3px solid transparent;
    background: grey;
}



.collective section.menu .c-list > .person:nth-child(1),
.collective section.menu .c-list > .person:nth-child(4) {
    top: calc(50% - 250px);
}

.collective section.menu .c-list > .person:nth-child(2),
.collective section.menu .c-list > .person:nth-child(5) {
    top: 50%;
}


.collective section.menu .c-list > .person:nth-child(3),
.collective section.menu .c-list > .person:nth-child(6) {
    top: calc(50% + 250px);
}

.collective section.menu .c-list > .person:nth-child(1),
.collective section.menu .c-list > .person:nth-child(3) {
    left: calc(50% - 360px);
}

.collective section.menu .c-list > .person:nth-child(2) {
    left: calc(50% - 430px);
}


.collective section.menu .c-list > .person:nth-child(4),
.collective section.menu .c-list > .person:nth-child(6) {
    left: calc(50% + 360px);
}

.collective section.menu .c-list > .person:nth-child(5) {
    left: calc(50% + 430px);
}

.collective .absolute-center,
.collective section.menu .c-list > .person {
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}




.collective section.menu .c-list > .person .info {
    position: absolute;
    top: 50%;
    left: 75px;
    -webkit-transform: translateY(-56%);
       -moz-transform: translateY(-56%);
        -ms-transform: translateY(-56%);
         -o-transform: translateY(-56%);
            transform: translateY(-56%);
}



.collective .move-top section.menu .c-list > .person:nth-child(1),
.collective .move-top section.menu .c-list > .person:nth-child(4) {
    top: calc(150% - 250px);
}
.collective .move-top section.menu .c-list > .person:nth-child(2),
.collective .move-top section.menu .c-list > .person:nth-child(5) {
    top: 150%;
}
.collective .move-top section.menu .c-list > .person:nth-child(3),
.collective .move-top section.menu .c-list > .person:nth-child(6) {
    top: calc(150% + 250px);
}


.collective .move-middle section.menu .c-list > .person:nth-child(1),
.collective .move-middle section.menu .c-list > .person:nth-child(4) {
    top: calc(50% - 250px);
}
.collective .move-middle section.menu .c-list > .person:nth-child(2),
.collective .move-middle section.menu .c-list > .person:nth-child(5) {
    top: 50%;
}
.collective .move-middle section.menu .c-list > .person:nth-child(3),
.collective .move-middle section.menu .c-list > .person:nth-child(6) {
    top: calc(50% + 250px);
}


.collective .move-bottom section.menu .c-list > .person:nth-child(1),
.collective .move-bottom section.menu .c-list > .person:nth-child(4) {
    top: calc(-50% - 250px);
}
.collective .move-bottom section.menu .c-list > .person:nth-child(2),
.collective .move-bottom section.menu .c-list > .person:nth-child(5) {
    top: -50%;
}
.collective .move-bottom section.menu .c-list > .person:nth-child(3),
.collective .move-bottom section.menu .c-list > .person:nth-child(6) {
    top: calc(-50% + 250px);
}



.collective .move-left section.menu .c-list > .person:nth-child(1),
.collective .move-left section.menu .c-list > .person:nth-child(3) {
    left: calc(150% - 360px);
}
.collective .move-left section.menu .c-list > .person:nth-child(2) {
    left: calc(150% - 430px);
}
.collective .move-left section.menu .c-list > .person:nth-child(4),
.collective .move-left section.menu .c-list > .person:nth-child(6) {
    left: calc(150% + 360px);
}
.collective .move-left section.menu  .c-list > .person:nth-child(5) {
    left: calc(150% + 430px);
}


.collective .move-right section.menu .c-list > .person:nth-child(1),
.collective .move-right section.menu .c-list > .person:nth-child(3) {
    left: calc(-50% - 360px);
}
.collective .move-right section.menu .c-list > .person:nth-child(2) {
    left: calc(-50% - 430px);
}
.collective .move-right section.menu .c-list > .person:nth-child(4),
.collective .move-right section.menu .c-list > .person:nth-child(6) {
    left: calc(-50% + 360px);
}
.collective .move-right section.menu  .c-list > .person:nth-child(5) {
    left: calc(-50% + 430px);
}



.collective .move-top section.menu .circle {
    top: 150%;
}

.collective .move-middle section.menu .circle {
    top: 50%;
}


.collective .move-bottom section.menu .circle {
    top: -50%;
}


.collective .move-left section.menu .circle {
    left: 150%;
}

.collective .move-right section.menu .circle {
    left: -50%;
}










/* =============================================== 

    COLLECTIVE - BLOG LIST                                

 =============================================== */






.collective .features {
    padding: 20px 0;
}



.collective .features .f-item {
    width: 250px;
    padding: 10px;
    border-radius: 10px;
    background: #221F1F;
    margin-bottom: 20px;
    display: block;
    
    -webkit-transition: background .3s ease;
       -moz-transition: background .3s ease;
        -ms-transition: background .3s ease;
         -o-transition: background .3s ease;
            transition: background .3s ease;
}

.collective .features .f-item:hover {
    background: #2b2727;
}


/*.collective .features .f-item .img-wrapper {
    background: #3C3C3C;   
}*/

.collective .features .f-item .rq,
.collective .features .f-item .title,
.collective .features .f-item .excerpt {
    width: 100%;
    color: #fff;
    font-family: 'Futura Round Demi';
    line-height: normal;
    font-size: 12px;
    letter-spacing: 0.06em;
}

.collective .features .f-item .title {
    text-transform: uppercase;
}

.collective .features .f-item .rq,
.collective .features .f-item .title {
    padding: 10px 0;
}

.collective .features .f-item .excerpt {
    padding-bottom: 10px;
}


.collective section.menu .c-list > .person .preview,
.collective .features .f-item .img-wrapper {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: 120%;
         -o-background-size: 120%;
            background-size: 120%;
}

.collective .features .f-item .img-wrapper {
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

.collective .features .f-item.blog-post .img-wrapper {
    width: 230px;
    height: 168px;  
}

.collective .features .f-item.quote-post .img-wrapper,
.collective .features .f-item.instagram-post .img-wrapper {
    width: 230px;
    height: 230px;  
}

.collective .features .f-item.instagram-post .rq {
    display: flex;
}

.collective .features .f-item.instagram-post .rq > div {
    width: 50%;
}



.collective .features .f-item.instagram-post .rq > div:last-child {
    text-align: right;
}



@media only screen and (min-width:1200px) {
    .collective .features .f-item {
        width: calc(250px + (400 - 250)*(100vw - 1200px)/(1670 - 1200));
        padding: calc(10px + (16 - 10)*(100vw - 1200px)/(1670 - 1200));
        border-radius: calc(10px + (16 - 10)*(100vw - 1200px)/(1670 - 1200));
        margin-bottom: calc(20px + (32 - 20)*(100vw - 1200px)/(1670 - 1200));
        
    }

    .collective .features .f-item .rq,
    .collective .features .f-item .title,
    .collective .features .f-item .excerpt {
        font-size: calc(12px + (18 - 12)*(100vw - 1200px)/(1670 - 1200));
    }


    .collective .features .f-item.quote-post .img-wrapper,
    .collective .features .f-item.instagram-post .img-wrapper {
        width: calc(230px + (368 - 230)*(100vw - 1200px)/(1670 - 1200));
        height: calc(230px + (368 - 230)*(100vw - 1200px)/(1670 - 1200)); 
    }


    .collective .features .f-item.blog-post .img-wrapper {
        width: calc(230px + (368 - 230)*(100vw - 1200px)/(1670 - 1200));
        height: calc(168px + (248 - 168)*(100vw - 1200px)/(1670 - 1200));
    }
}


@media only screen and (min-width:1670px) {
    .collective .features .f-item {
        width: 400px;
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

     .collective .features .f-item .rq,
    .collective .features .f-item .title,
    .collective .features .f-item .excerpt {
        font-size: 18px;
    }


    .collective .features .f-item.quote-post .img-wrapper,
    .collective .features .f-item.instagram-post .img-wrapper {
        width: 368px;
        height: 368px;
    }

    .collective .features .f-item.blog-post .img-wrapper {
        width: 368px;
        height: 248px;
    }

}







/* =============================================== 

    COLLECTIVE - SHOW MENU                                

 =============================================== */











.collective .sections-wrapper.show-menu {
    overflow: auto;
}


.collective .sections-wrapper.show-menu section.home {
    top: -100%;
}

.collective .sections-wrapper.show-menu section.menu {
    top: 0;
}



.collective .bg {
    top: -400px;

    left: calc(50vw - 1619px);
}



.collective .sections-wrapper.show-menu .bg {
    /*op: -605px;*/
    top: -975px;
}


.collective .sections-wrapper.show-menu.move-top .bg {
    top: 0;
}

.collective .sections-wrapper.show-menu.move-bottom .bg {
    top: -1210px;
}





.collective .sections-wrapper.show-menu.move-left .bg {
    left: calc(100vw - 1619px + 539px);
}

.collective .sections-wrapper.show-menu.move-right .bg {
    left: -2158px;
}











/* =============================================== 

    COLLECTIVE - MENU ITEM SELECTED                               

 =============================================== */
 









.collective section.menu .c-list > .person.selected,
.collective section.menu .c-list > .person:hover {
    background: #D51B28;
    cursor: pointer;
}


.collective section.menu .c-list > .person.selected h2,
.collective section.menu .c-list > .person.selected h4,
.collective section.menu .c-list > .person:hover h2,
.collective section.menu .c-list > .person:hover h4 {
    color: #fff;
}


.collective section.home a.btn.back,
.collective section.menu.show-detailed a.btn.back {
    right: 30px;
}



.collective section.menu.show-detailed .c-list .person.selected {
    left: 30px;
    top: 30px;
    -webkit-transform: translate(0%, 0%);
       -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
         -o-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
}


.collective section.menu.show-detailed .c-list .person.selected .preview {
    width: 150px;
    height: 150px;
    -webkit-border-radius: 150px;
            border-radius: 150px;
    border: 3px solid #d91928;
}


.collective section.menu.show-detailed .c-list .person.selected h2 {
    font-size: 50px;
}


.collective section.menu.show-detailed .c-list .person.selected .info {
    left: 180px;
    top: 35px;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}





.collective section.menu.show-detailed .c-list .person.selected {
    cursor: auto;
    background: transparent;
}













/* =============================================== 

    COLLECTIVE - ANIMATIONS                         

 =============================================== */
 





.collective a.btn i {
   
    -webkit-transition: transform .3s;
       -moz-transition: transform .3s;
        -ms-transition: transform .3s;
         -o-transition: transform .3s;
            transition: transform .3s;
}


.collective .bg {
    -webkit-transition: top .5s ease, left .5s ease;
       -moz-transition: top .5s ease, left .5s ease;
        -ms-transition: top .5s ease, left .5s ease;
         -o-transition: top .5s ease, left .5s ease;
            transition: top .5s ease, left .5s ease;
}




.collective a.btn.back {
    -webkit-transition: right .5s cubic-bezier(.46,.37,.2,1);
       -moz-transition: right .5s cubic-bezier(.46,.37,.2,1);
        -ms-transition: right .5s cubic-bezier(.46,.37,.2,1);
         -o-transition: right .5s cubic-bezier(.46,.37,.2,1);
            transition: right .5s cubic-bezier(.46,.37,.2,1);
}




.collective section.menu > .circle {
    -webkit-transition: top 1s cubic-bezier(.46,.37,.2,1), left 1s cubic-bezier(.46,.37,.2,1);
       -moz-transition: top 1s cubic-bezier(.46,.37,.2,1), left 1s cubic-bezier(.46,.37,.2,1);
        -ms-transition: top 1s cubic-bezier(.46,.37,.2,1), left 1s cubic-bezier(.46,.37,.2,1);
         -o-transition: top 1s cubic-bezier(.46,.37,.2,1), left 1s cubic-bezier(.46,.37,.2,1);
            transition: top 1s cubic-bezier(.46,.37,.2,1), left 1s cubic-bezier(.46,.37,.2,1);
}

.collective section.menu .c-list > .person:hover h2,
.collective section.menu .c-list > .person:hover h4 {    
    -webkit-transition: color .3s ease, font-size .3s ease .1s;
       -moz-transition: color .3s ease, font-size .3s ease .1s;
        -ms-transition: color .3s ease, font-size .3s ease .1s;
         -o-transition: color .3s ease, font-size .3s ease .1s;
            transition: color .3s ease, font-size .3s ease .1s;
}

.collective section.menu .c-list > .person .social > a {   
    -webkit-transition: transform .3s ease;
       -moz-transition: transform .3s ease;
        -ms-transition: transform .3s ease;
         -o-transition: transform .3s ease;
            transition: transform .3s ease;
}







/* =============================================== 

    COLLECTIVE - SHOW ITEM ANIMATION                            

 =============================================== */










.collective section.menu .c-list > .person.selected,
.collective section.menu .c-list > .person:hover {
    -webkit-transition: background .3s ease, top .5s cubic-bezier(.46,.37,.2,1), left .5s cubic-bezier(.46,.37,.2,1), transform .5s cubic-bezier(.46,.37,.2,1);
       -moz-transition: background .3s ease, top .5s cubic-bezier(.46,.37,.2,1), left .5s cubic-bezier(.46,.37,.2,1), transform .5s cubic-bezier(.46,.37,.2,1);
        -ms-transition: background .3s ease, top .5s cubic-bezier(.46,.37,.2,1), left .5s cubic-bezier(.46,.37,.2,1), transform .5s cubic-bezier(.46,.37,.2,1);
         -o-transition: background .3s ease, top .5s cubic-bezier(.46,.37,.2,1), left .5s cubic-bezier(.46,.37,.2,1), transform .5s cubic-bezier(.46,.37,.2,1);
            transition: background .3s ease, top .5s cubic-bezier(.46,.37,.2,1), left .5s cubic-bezier(.46,.37,.2,1), transform .5s cubic-bezier(.46,.37,.2,1);
}




.collective section.menu.show-detailed .c-list .person.selected h2 {
    -webkit-transition: color .3s ease, font-size .3s ease;
       -moz-transition: color .3s ease, font-size .3s ease;
        -ms-transition: color .3s ease, font-size .3s ease;
         -o-transition: color .3s ease, font-size .3s ease;
            transition: color .3s ease, font-size .3s ease;
}




.collective section.menu.show-detailed .c-list .person.selected .preview {
    -webkit-transition: width .5s ease, height .5s ease, border-radius .5s ease, border .5s ease;
       -moz-transition: width .5s ease, height .5s ease, border-radius .5s ease, border .5s ease;
        -ms-transition: width .5s ease, height .5s ease, border-radius .5s ease, border .5s ease;
         -o-transition: width .5s ease, height .5s ease, border-radius .5s ease, border .5s ease;
            transition: width .5s ease, height .5s ease, border-radius .5s ease, border .5s ease;
}

.collective section.menu.show-detailed .c-list .person.selected .info {
    -webkit-transition: left .5s cubic-bezier(.46,.37,.2,1) , top  .5s ease , transform .5s ease;
       -moz-transition: left .5s cubic-bezier(.46,.37,.2,1) , top  .5s ease , transform .5s ease;
        -ms-transition: left .5s cubic-bezier(.46,.37,.2,1) , top  .5s ease , transform .5s ease;
         -o-transition: left .5s cubic-bezier(.46,.37,.2,1) , top  .5s ease , transform .5s ease;
            transition: left .5s cubic-bezier(.46,.37,.2,1) , top  .5s ease , transform .5s ease;
}










/* =============================================== 

    COLLECTIVE - HIDE ITEM ANIMATION                            

 =============================================== */
 









.collective section.menu .c-list > .person {
    -webkit-transition: background .3s ease-out .1s, top .7s cubic-bezier(.46,.37,.2,1), left .7s cubic-bezier(.46,.37,.2,1), transform .5s cubic-bezier(.46,.37,.2,1) ;
       -moz-transition: background .3s ease-out .1s, top .7s cubic-bezier(.46,.37,.2,1), left .7s cubic-bezier(.46,.37,.2,1), transform .5s cubic-bezier(.46,.37,.2,1) ;
        -ms-transition: background .3s ease-out .1s, top .7s cubic-bezier(.46,.37,.2,1), left .7s cubic-bezier(.46,.37,.2,1), transform .5s cubic-bezier(.46,.37,.2,1) ;
         -o-transition: background .3s ease-out .1s, top .7s cubic-bezier(.46,.37,.2,1), left .7s cubic-bezier(.46,.37,.2,1), transform .5s cubic-bezier(.46,.37,.2,1) ;
            transition: background .3s ease-out .1s, top .7s cubic-bezier(.46,.37,.2,1), left .7s cubic-bezier(.46,.37,.2,1), transform .5s cubic-bezier(.46,.37,.2,1) ;
}



.collective section.menu .c-list > .person .info {
    -webkit-transition: left .3s ease, top .3s ease, transform .3s ease;
       -moz-transition: left .3s ease, top .3s ease, transform .3s ease;
        -ms-transition: left .3s ease, top .3s ease, transform .3s ease;
         -o-transition: left .3s ease, top .3s ease, transform .3s ease;
            transition: left .3s ease, top .3s ease, transform .3s ease;
}



.collective h2,
.collective h4{
    -webkit-transition: color .3s ease, font-size .3s ease;
       -moz-transition: color .3s ease, font-size .3s ease;
        -ms-transition: color .3s ease, font-size .3s ease;
         -o-transition: color .3s ease, font-size .3s ease;
            transition: color .3s ease, font-size .3s ease;
}



.collective section.menu .c-list .person .preview {
    -webkit-transition: width .3s ease, height .3s ease, border-radius .3s ease;
       -moz-transition: width .3s ease, height .3s ease, border-radius .3s ease;
        -ms-transition: width .3s ease, height .3s ease, border-radius .3s ease;
         -o-transition: width .3s ease, height .3s ease, border-radius .3s ease;
            transition: width .3s ease, height .3s ease, border-radius .3s ease;
}












/* =============================================== 

    COLLECTIVE - EXTEND INFO                                

 =============================================== */











.collective .wrapper.extend-info {
    position: relative;
    overflow: auto;
    z-index: 1;
}

.collective .wrapper.extend-info section.menu .c-list > .person.selected .details {
    max-height: 5000px;
    overflow: visible;
}



.collective .wrapper.extend-info section.menu .c-list > .person.selected .details p {
    opacity: 1;
    -webkit-transition: opacity .5s ease;
       -moz-transition: opacity .5s ease;
        -ms-transition: opacity .5s ease;
         -o-transition: opacity .5s ease;
            transition: opacity .5s ease;
}

.collective .wrapper.extend-info section.menu.show-detailed .c-list .person.selected {
    position: relative;
    width: calc(100% - 70px);
    height: auto;
}


.collective .wrapper.extend-info section.menu.show-detailed .c-list .person.selected .person-wrapper .details p{
    max-width: 1110px;
}


@media only screen and (min-width:1670px) {
    .collective .wrapper.extend-info section.menu.show-detailed .c-list .person.selected .person-wrapper{
        max-width: 1607px;
    }
}


.collective .wrapper.extend-info section.menu .c-list > .person.selected .social {
    visibility: visible;
    opacity: 1;
}

.collective .wrapper.extend-info .bg {
    z-index: 0;
}









/* =============================================== 

    COLLECTIVE - EXTEND INFO ANIMATION                               

 =============================================== */






.collective .wrapper.extend-info section.menu .c-list > .person .social {
    -webkit-transition: visibility .0s linear, opacity .3s ease;
       -moz-transition: visibility .0s linear, opacity .3s ease;
        -ms-transition: visibility .0s linear, opacity .3s ease;
         -o-transition: visibility .0s linear, opacity .3s ease;
            transition: visibility .0s linear, opacity .3s ease;
}













/* =============================================== 

    RESPONSIVE                                 

 =============================================== */




@media only screen and (max-width:1180px) {
    .collective section.menu .c-list > .person:nth-child(1),
    .collective section.menu .c-list > .person:nth-child(4) {
        top: calc(50% - 200px);
    }

    .collective section.menu .c-list > .person:nth-child(2),
    .collective section.menu .c-list > .person:nth-child(5) {
        top: 50%;
    }


    .collective section.menu .c-list > .person:nth-child(3),
    .collective section.menu .c-list > .person:nth-child(6) {
        top: calc(50% + 200px);
    }

    .collective section.menu .c-list > .person:nth-child(1),
    .collective section.menu .c-list > .person:nth-child(3) {
        left: calc(50% - 310px);
    }

    .collective section.menu .c-list > .person:nth-child(2) {
        left: calc(50% - 380px);
    }


    .collective section.menu .c-list > .person:nth-child(4),
    .collective section.menu .c-list > .person:nth-child(6) {
        left: calc(50% + 310px);
    }

    .collective section.menu .c-list > .person:nth-child(5) {
        left: calc(50% + 380px);
    }
}





.collective section.menu a.btn.open-menu {
    display: none;
}

.collective section.menu .c-list > .person .back {
    display: none;
}




@media only screen and (max-width:980px) {
	
	

    .collective .wrapper {
        position: relative;
        min-height: 0;
    }


    .collective .sections-wrapper > section {
        position: relative;
        top: auto;
        min-height: 0;
        
    }

    .collective .sections-wrapper > section.home {
        margin-top: calc(200px + (400 - 200)*(100vw - 300px)/(980 - 300));
    }


    .collective .sections-wrapper > section.menu {
        margin-top: calc(30px + (80 - 30)*(100vw - 300px)/(980 - 300));
    }

    .collective .sections-wrapper {
        min-height: inherit;
    }

    .collective section.home {
        overflow: visible;
    }

    .collective section.home .content {
        top: 0;
        left: 0;
        position: relative;
        width: 90%;
        margin: 0 auto;
        -webkit-transform: translate(0,0);
           -moz-transform: translate(0,0);
            -ms-transform: translate(0,0);
             -o-transform: translate(0,0);
                transform: translate(0,0);
    }

    .collective section.home a.btn.open-menu {
        display: none;
    }
    
    .collective section.menu a.btn.open-menu {
        display: block;
        cursor: auto;
        margin: 0 auto;
        width: auto;
        text-align: center;
    }

    .collective section.menu a.btn.open-menu i {
        font-size: calc(70px + (180 - 70)*(100vw - 300px)/(980 - 300));
    }

    .collective section.menu > .circle {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        
        
    }

    .collective section.menu > .circle,
    .collective section.menu .c-list > .person {
        margin: 0 auto;
        -webkit-transform: translate(0,0);
           -moz-transform: translate(0,0);
            -ms-transform: translate(0,0);
             -o-transform: translate(0,0);
                transform: translate(0,0);
    }

    .collective section.menu .c-list > .person {
        position: relative;
        top: 0 !important;
        left: 0 !important;
    }

    .collective a.btn.back {
        position: fixed;
    }


    .collective h1 {
        font-size: calc(30px + (80 - 30)*(100vw - 300px)/(980 - 300));
    }

    .collective h3 {
        width: 80%;
        margin: 0 auto;
        font-size: calc(18px + (58 - 18)*(100vw - 300px)/(980 - 300));
    }

    
    .collective section.menu.show-detailed .c-list .person.selected h2,
    .collective h2 {
        font-size: calc(16px + (48 - 16)*(100vw - 300px)/(980 - 300));
        width: calc(110px + (550 - 110)*(100vw - 300px)/(980 - 300));
        white-space: nowrap;
    }
    
    .collective section.menu.show-detailed .c-list .person.selected h4,
    .collective h4 {
        font-size: calc(9px + (20 - 9)*(100vw - 300px)/(980 - 300));
		width: 85%;
    }
	


    .collective section.menu > .circle {
        width: calc(240px + (600 - 240)*(100vw - 300px)/(980 - 300));
        height: calc(240px + (600 - 240)*(100vw - 300px)/(980 - 300));
    }


    .collective section.menu .c-list > .person {
        width: 80%;
        height: calc(60px + (120 - 60)*(100vw - 300px)/(980 - 300));
        margin-bottom: calc(30px + (60 - 30)*(100vw - 300px)/(980 - 300));
    }
    
    .collective section.menu.show-detailed .c-list .person.selected .preview,
    .collective section.menu .c-list > .person .preview {
        height: calc(52px + (112 - 52)*(100vw - 300px)/(980 - 300));
        width: calc(52px + (112 - 52)*(100vw - 300px)/(980 - 300));
        border: calc(0px + (6 - 0)*(100vw - 300px)/(980 - 300)) solid transparent;
    }

    .collective .wrapper.extend-info section.menu.show-detailed .c-list .person.selected .preview {
        border: calc(0px + (6 - 0)*(100vw - 300px)/(980 - 300)) solid #d91928;
    }
    
    .collective section.menu.show-detailed .c-list .person.selected .info,
    .collective section.menu .c-list > .person .info {
        left: calc(65px + (130 - 65)*(100vw - 300px)/(980 - 300));
    }

    .collective section.menu.show-detailed .c-list .person.selected .info {
        top: calc(28px + (54 - 28)*(100vw - 300px)/(980 - 300));
    }

    .collective section.menu .c-list > .person.selected .social {
        display: block;
        right: auto;
        top: calc(60px + (140 - 60)*(100vw - 300px)/(980 - 300));
        left: calc(-4px + (8 + 4)*(100vw - 300px)/(980 - 300));
        background: transparent;
    }


    .collective section.menu .c-list > .person.selected .social > a {
        width: calc(25px + (50 - 25)*(100vw - 300px)/(980 - 300));
        height: calc(25px + (50 - 25)*(100vw - 300px)/(980 - 300));
        margin: calc(10px + (15 - 10)*(100vw - 300px)/(980 - 300));
    }


    .collective section.menu .c-list > .person.selected .social > a i {
        font-size: calc(14px + (24 - 14)*(100vw - 300px)/(980 - 300));
    }

    .collective section.menu .c-list > .person .details {
        padding: 0 calc(10px + (120 - 10)*(100vw - 300px)/(980 - 300)) 0 calc(10px + (125 - 10)*(100vw - 300px)/(980 - 300));
        margin-top: calc(15px + (40 - 15)*(100vw - 300px)/(980 - 300)); 
        margin-bottom: calc(0px + (80 - 0)*(100vw - 300px)/(980 - 300));
        
    }

    .collective section.menu .c-list > .person .details p {
        font-size: calc(14px + (28 - 14)*(100vw - 300px)/(980 - 300));
        padding-left: calc(50px + (0 - 50)*(100vw - 300px)/(980 - 300));
    }


    .collective .features .f-item {
        /*width: calc(185px + (620 - 185)*(100vw - 300px)/(980 - 300));*/
		width: calc(225px + (620 - 225)*(100vw - 300px)/(980 - 300));
        padding: calc(10px + (20 - 10)*(100vw - 300px)/(980 - 300));
    }

    .collective .features .f-item.blog-post .img-wrapper {
        /*width: calc(165px + (580 - 165)*(100vw - 300px)/(980 - 300));
        height: calc(110px + (420 - 110)*(100vw - 300px)/(980 - 300));*/
		 width: calc(205px + (580 - 205)*(100vw - 300px)/(980 - 300));
        height: calc(142px + (420 - 142)*(100vw - 300px)/(980 - 300));
    }
    
    .collective .features .f-item {
        background-color: #9a0b0d;
    }

    .collective .features .f-item.quote-post .img-wrapper, .collective .features .f-item.instagram-post .img-wrapper {
        /*width: calc(165px + (580 - 165)*(100vw - 300px)/(980 - 300));
        height: calc(165px + (580 - 165)*(100vw - 300px)/(980 - 300));*/
		width: calc(205px + (580 - 205)*(100vw - 300px)/(980 - 300));
        height: calc(205px + (580 - 205)*(100vw - 300px)/(980 - 300));
    }

    .collective .features .f-item .rq, .collective .features .f-item .title, .collective .features .f-item .excerpt {
        font-size: calc(12px + (24 - 12)*(100vw - 300px)/(980 - 300));
    }

    .collective section.menu.show-detailed .c-list .person.selected {
        background: #D51B28;
    }

    .collective .wrapper.extend-info section.menu .c-list > .person.selected .details {
        max-height: 15000px;
        overflow: hidden;
    }

    /*.collective .wrapper.extend-info section.menu.show-detailed .c-list .person {
        position: fixed;
        visibility: hidden;
        opacity: 0;
    }

    .collective .wrapper.extend-info section.menu.show-detailed .c-list .person.selected {
        position: relative;
        visibility: visible;
        opacity: 1;
    }*/

    .collective section.menu .c-list > .person {
        border-radius: calc(28px + (68 - 28)*(100vw - 300px)/(980 - 300));
    }

    .collective section.menu > a.btn.back {
        display: none;
    }


    .collective .extend-info section.menu .c-list > .person.selected .back {
        display: flex;
        width: auto;
    }

    .collective .extend-info section.menu.show-detailed .person a.btn.back {
        top: calc(-10px + (-20 + 10)*(100vw - 300px)/(980 - 300));
        right: calc(-10px + (20 + 10)*(100vw - 300px)/(980 - 300));
        font-size: calc(8px + (14 - 8)*(100vw - 300px)/(980 - 300));
    }

    .collective .extend-info section.menu.show-detailed .person a.btn.back.bottom {
        top: auto;
        bottom: calc(-15px + (-20 + 15)*(100vw - 300px)/(980 - 300));
    }

    .collective section.menu.show-detailed .person a.btn.back i {
        font-size: calc(30px + (120 - 30)*(100vw - 300px)/(980 - 300));
        padding-right: calc(0px + (10 - 0)*(100vw - 300px)/(980 - 300));
    }



    .collective section.menu .c-list > .person.selected,
    .collective section.menu .c-list > .person:hover {
        -webkit-transition: background .3s ease, width .3s ease;
           -moz-transition: background .3s ease, width .3s ease;
            -ms-transition: background .3s ease, width .3s ease;
             -o-transition: background .3s ease, width .3s ease;
                transition: background .3s ease, width .3s ease;
    }




    .collective section.menu.show-detailed .c-list .person.selected h2 {
        -webkit-transition: color .3s ease, font-size .3s ease;
           -moz-transition: color .3s ease, font-size .3s ease;
            -ms-transition: color .3s ease, font-size .3s ease;
             -o-transition: color .3s ease, font-size .3s ease;
                transition: color .3s ease, font-size .3s ease;
    }




    .collective section.menu .c-list .person .preview {
        -webkit-transition: none !important;
           -moz-transition: none !important;
            -ms-transition: none !important;
             -o-transition: none !important;
                transition: none !important;
    }
    
    .collective section.menu .c-list .person .info {
        -webkit-transition: none !important;
           -moz-transition: none !important;
            -ms-transition: none !important;
             -o-transition: none !important;
                transition: none !important;
    }

    .collective .bg {
        position: absolute;
        z-index: 0;
        left: calc(50vw - 1619px) !important;
        /*top: calc(-360px + (-730 + 360)*(100vw - 300px)/(980 - 300));*/
        top: calc(-150px + (-350 + 150)*(100vw - 300px)/(980 - 300)) !important;
        /*top: calc(-40px + (-80 + 40)*(100vw - 300px)/(980 - 300));*/
        -webkit-transform: scale(.8);
           -moz-transform: scale(.8);
            -ms-transform: scale(.8);
             -o-transform: scale(.8);
                transform: scale(.8);
        transform-origin: top center;
        
        -webkit-transition: top .5s ease, left .5s ease, transform .3s linear;
        -moz-transition: top .5s ease, left .5s ease, transform .3s linear;
        -ms-transition: top .5s ease, left .5s ease, transform .3s linear;
        -o-transition: top .5s ease, left .5s ease, transform .3s linear;
        transition: top .5s ease, left .5s ease, transform .3s linear;
    }
	
	
	.collective section.menu a.btn.close-menu {
		display: none;
	}

    .collective .home a.btn {
        position: absolute;
        top: calc(-220px + (-410 + 220)*(100vw - 300px)/(980 - 300));
        font-size: calc(12px + (14 - 12)*(100vw - 300px)/(980 - 300));
    }

    .collective .home a.btn i {
        font-size: calc(80px + (120 - 80)*(100vw - 300px)/(980 - 300));
        padding-right: calc(0px + (10 - 0)*(100vw - 300px)/(980 - 300));
    }

    .collective section.home a.btn.back{
        right: calc(0px + (40 - 0)*(100vw - 300px)/(980 - 300)) !important;
        position: absolute;
    }

    .collective .wrapper {
        overflow-x: hidden;
    }

}


@media only screen and (max-width:767px) { 
    .collective .bg {
        -webkit-transform: scale(.65);
           -moz-transform: scale(.65);
            -ms-transform: scale(.65);
             -o-transform: scale(.65);
                transform: scale(.65);
    }
}



@media only screen and (max-width:640px) { 
    .collective .bg {
        -webkit-transform: scale(.55);
           -moz-transform: scale(.55);
            -ms-transform: scale(.55);
             -o-transform: scale(.55);
                transform: scale(.55);
    }
	
	.collective .wrapper.extend-info section.menu.show-detailed .c-list .person.selected {
		width: calc(100% - 30px);
	}
}

@media only screen and (max-width:500px) { 
    .collective .bg {
        -webkit-transform: scale(.5);
           -moz-transform: scale(.5);
            -ms-transform: scale(.5);
             -o-transform: scale(.5);
                transform: scale(.5);
    }
}


@media only screen and (max-width:380px) { 
    .collective .bg {
        -webkit-transform: scale(.4);
           -moz-transform: scale(.4);
            -ms-transform: scale(.4);
             -o-transform: scale(.4);
                transform: scale(.4);
    }
}