.partner .c-a-header .h1 .l {
	display:block !important ;
}

/*.partner .p-footer-body {
	height: calc(var(--vh)*47) !important ;
	transform: translateY(calc(var(--p2)*var(--vh)*23)) !important;
}*/

#app section {
    position: relative;
    width: 100%
}

.container {
    position: relative;
    width: 90vw;
    margin: auto
}

@media all and (max-width: 1100px) and (orientation:portrait) {
    .container {
        width:80vw
    }
}

.container--medium {
    width: 80vw
}

@media all and (max-width: 1100px) and (orientation:portrait) {
    .container--medium {
        width:80vw
    }
}

.container--small {
    width: 70vw
}

@media all and (max-width: 1100px) and (orientation:portrait) {
    .container--small {
        width:80vw
    }
}

.container--wide {
    width: 100%
}

.columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	 background-color: var(--col-white);
}

.component {
    position: relative;
    padding-top: 5vw;
    padding-bottom: 5vw
}

@media all and (max-width: 1100px) and (orientation:portrait) {
    .component {
        padding-top:10vw;
        padding-bottom: 10vw
    }
}

.component:nth-child(2) {
    padding-top: 15vw
}

@media all and (max-width: 1100px) and (orientation:portrait) {
    .component:nth-child(2) {
        padding-top:30vw
    }
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%)
}

.image {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #cac7c3;
    background-color: var(--bg-medium)
}

.image img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 1200ms;
    transition-timing-function: cubic-bezier(.5,1,.89,1);
    transition-timing-function: var(--p2Out);
    will-change: transform,opacity
}

.image img.lazyload[src=""] {
    opacity: .0001
}

.image:before {
    content: '';
    display: block;
    padding-bottom: var(--ratio)
}

.image .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #18181a;
    background-color: var(--overlay);
    opacity: .2
}


.brand {
    display: block;
    position: relative;
    width: 100%;
    background-color: #000;
    background-color: var(--black)
}

.brand:before {
    content: "";
    display: block;
    padding-bottom: 100%;
	/*background-color: #55575a;*/
}

.brand .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:scale(1) translate(-50%,-50%);
    width: 12.5vw;
    height: 12.5vw;
    background-color: #fff;
    background-color: var(--white);
	transition: all 1s ease-in-out;

}

@media all and (max-width: 1100px) and (orientation:portrait) {
    .brand .center {
        width:40vw;
        height: 40vw
    }
}

.brand .image--outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
}

.brand .pbg1{
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}


.brand .pbg11{
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}

.brand:hover .pbg1{opacity:0;}
.brand:hover .pbg11{opacity:0;}


.brand:hover .image--outer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
/*    opacity: 1*/
}
.brand:hover .center{

    transform:translate(-50%,-50%) scale(1.04167);

}




@media all and (max-width: 1100px) and (orientation:portrait) {
    .brand .image--outer {
        opacity:.8
    }
}

.brand .image--logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.fb3d-modal {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: none
}

.list-brands {
    background-color: #2b2d2e;
    background-color: var(--grey100);
    padding: 0;
    /*min-height: 100vh*/
}

.list-brands .canvas {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    will-change: transform;
    background-color: #000;
    background-color: var(--black);
    cursor: pointer
}

@media all and (max-width: 1100px) and (orientation:portrait) {
    .list-brands .canvas {
        display:none
    }
}

.list-brands .columns {

    flex-wrap: wrap
}

.list-brands .columns__item {
    width: 25%;
    /*height: 25vw*/
}

@media all and (max-width: 1100px) and (orientation:portrait) {
    .list-brands .columns__item {
        width:100vw;
        height: 100vw
    }
}


@media all and (max-width: 760px) and (orientation:portrait) {
    .list-brands .columns__item {
        width:50vw;
        height: 50vw
    }
}