/*-----------------------------------*/
/***** COLLECTIONS (image grid) *****/
/*---------------------------------*/

.grid {
    position: relative;
    clear: both;
    margin: 0 auto;
    padding: 1em 0 4em;
    max-width: auto;
    list-style: none;
    text-align: center;
}
/* Common style */

.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    /*margin: 10px 1%;*/
    /*min-width: 390px;*/
    /*max-width: 420px;*/
    /*max-height: 246px;*/

    width: 100%;
    height: auto;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure img {
    /*position: relative;*/

    display: block;
    min-height: 100%;
    width: 100%;
    opacity: 1;
}

.grid figure figcaption {
    padding: 2em;
    color: #000;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */

.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h2 {
    word-spacing: -0.15em;
    font-weight: 300;
}

.grid figure h2 span {
    font-weight: 800;
}

.grid figure h2,
.grid figure p {
    margin: 0;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 14px;
}

figure.effect-duke {
    background: #ffffff;
}

figure.effect-duke img,
figure.effect-duke figcaption p {
    transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-duke:hover img {
    opacity: 0.2;
    -webkit-transform: scale3d(2, 2, 1);
    transform: scale3d(1, 2, 1);
}

figure.effect-duke h2 {
    transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

figure.effect-duke figcaption p {
    position: relative;
    top: 25%;
    bottom: 0;
    left: 0;
    margin: 20px;
    padding: 30px;
    border: 0px solid #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.2em;
    opacity: 0;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -100%;
}

figure.effect-duke:hover h2,
figure.effect-duke:hover figcaption p {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
/*-------------------------------*/
/*--MATERIAL (material hover)---*/
/*-----------------------------*/

.grid-box {
    padding: 0 0 4em;
    clear: both;
    height: auto;
    list-style: outside none none;
    margin: 0 auto;
    max-width: auto;
    min-height: 20px;
    max-height: 238px;
    position: relative;
    text-align: center;
}

.grid-box figure {
    position: relative;
    float: left;
    overflow: hidden;
    max-height: 238px;
    width: 100%;
    height: auto;
    text-align: center;
    cursor: pointer;
}

.grid-box figure figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#caption {
    bottom: 0;
    color: #ffffff;
    font-size: 18px;
    left: 0;
    letter-spacing: 2.5px;
    margin: 0 0 0;
    position: relative;
    top: 112px;
    transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
}
/*div.grid-box:hover #caption{
    transition: 0.5s;
    -webkit-transition: 0.5s;
    top: 112px;
    left: -90%;
    bottom: 0;
    margin: 0 0 0;
}*/

div.grid-box .wood {
    background: url("../img/material/reclaimed_wood_hovering.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    height: 100%;
    max-height: 238px;
    transition: all 1s ease;
}

div.grid-box:hover .wood {
    background: url("../img/material/reclaimed_wood_unhover.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    transition: all 1s ease;
}

div.grid-box .rubber {
    background: url("../img/material/reclaimed_rubber_hovering.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    height: 100%;
    max-height: 238px;
    transition: all 1s ease;
}

div.grid-box:hover .rubber {
    background: url("../img/material/reclaimed_rubber_unhover.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    transition: all 1s ease;
}

div.grid-box .denim {
    background: url("../img/material/reclaimed_denim_hovering.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    height: 100%;
    max-height: 238px;
    transition: all 1s ease;
}

div.grid-box:hover .denim {
    background: url("../img/material/reclaimed_denim_unhover.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    transition: all 1s ease;
}

div.grid-box .iron {
    background: url("../img/material/reclaimed_iron_hovering.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    height: 100%;
    max-height: 238px;
    transition: all 1s ease;
}

div.grid-box:hover .iron {
    background: url("../img/material/reclaimed_iron_unhover.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    transition: all 1s ease;
}

div.grid-box .paper {
    background: url("../img/material/reclaimed_paper_hovering.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    height: 100%;
    max-height: 238px;
    transition: all 1s ease;
}

div.grid-box:hover .paper {
    background: url("../img/material/reclaimed_paper_unhover.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    transition: all 1s ease;
}

div.grid-box .plate {
    background: url("../img/material/reclaimed_plate_hovering.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    height: 100%;
    max-height: 238px;
    transition: all 1s ease;
}

div.grid-box:hover .plate {
    background: url("../img/material/reclaimed_plate_unhover.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: 100% auto;
    transition: all 1s ease;
}
/*---------------------------------------------*/
/***** STORE LOCATOR (ambassador profile) *****/
/*-------------------------------------------*/

figure.ambs {
    background: #000000;
}

figure.ambs img {
    transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(2, 2, 1);
    transform: scale3d(2, 2, 1);
}

figure.ambs:hover img {
    opacity: 0.2;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

figure.ambs h2 {
    opacity: 0;
    color: #ffffff;
    transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

figure.ambs p {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 20px;
    padding: 30px;
    color: #ffffff;
    border: 0px solid #fff;
    text-transform: none;
    font-size: 15px;
    opacity: 0;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -100%;
}

figure.ambs:hover p {
    opacity: 1;
}

figure.ambs:hover h2 {
    margin-top: 25%;
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
/*### SEASON STORE ###*/

figure.z-out {
    background: #000;
}

figure.z-out img {
    display: block;
    width: 100%;
    position: relative;
    /*-webkit-transition: all 1s ease, -webkit-transform 1s;
    transition: all 1s ease, transform 0.35s;
    opacity: 0.5;*/
}

figure.z-out:hover img {
    opacity: 1;
    /*-webkit-transition: all 1s ease, -webkit-transform 1s;
    transition: all 1s ease, transform 0.35s;*/
}
/*--------------------------------*/
/***** HOME (material image) *****/
/*------------------------------*/

.left,
.right {
    -webkit-perspective: 1000;
    perspective: 1000;
}

.flipper {
    transition: 0.8s;
    -webkit-transition: 0.8s;
    /*-moz-transition:0.8s;
    -ms-transition:0.8s;
    -o-transition:0.8s;*/

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    height: 100%;
    position: relative;
}

.left:hover .flipper,
.right:hover .flipper {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    /*-o-transition:rotateY(180deg);
    -moz-transition:rotateY(180deg);
    -ms-transition:rotateY(180deg);*/
}

.flip-container,
.front,
.back {
    width: 100%;
    height: 100%;
}

.front,
.back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    z-index: 2;
    /* for firefox 31 */

    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    /*-o-transition:rotateY(0deg);
    -moz-transition:rotateY(0deg);
    -ms-transition:rotateY(0deg);*/
}

.back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    /*-o-transition:rotateY(180deg);
    -moz-transition:rotateY(180deg);
    -ms-transition:rotateY(180deg);*/
}

.left:hover .flipper {
    background: transparent;
}

.left > figure {
    overflow: hidden;
    float: right;
    /*height:380px;*/

    height: auto;
    /*max-height: 380px;*/

    max-height: 100%;
    /*margin-right: 5px;*/

    position: relative;
    width: 100%;
    /*max-width: 146px;*/

    text-align: center;
    cursor: pointer;
    background: #000000;
}

.right > figure {
    overflow: hidden;
    float: left;
    /*height:380px;*/

    height: auto;
    /*max-height: 380px;*/

    max-height: 100%;
    margin-right: 0px;
    position: relative;
    width: 100%;
    /*max-width: 146px;*/

    text-align: center;
    cursor: pointer;
    background: #000000;
}

.left > figure#unique {
    background: #ffffff;
}

.left figure.back {
    background: #000;
}

.right figure.back {
    background: #000;
}

.left figure.frame-img-home img,
.right figure.frame-img-home img {
    /*-webkit-transition: all 0.10s ease, -webkit-transform 0.1s;
    transition: all 0.10s ease, transform 0.1s;*/

    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 0.5);
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
}

figure.frame-img-home figcaption,
figure.back figcaption {
    font-size: 16.5px;
    letter-spacing: 0.3em;
    font-weight: 600;
    top: 45%;
    color: #fff;
    text-transform: uppercase;
    position: absolute;
    /*-webkit-backface-visibility: hidden;
    backface-visibility: hidden;*/
}

figure.frame-img-home figcaption.unique {
    font-size: 16.5px;
    letter-spacing: 0.3em;
    top: 40%;
    left: 0px;
    color: #000;
    text-transform: uppercase;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.frame-img-home figcaption,
figure.frame-img-home2 figcaption,
figure.frame-img-home2 figcaption.unique {
    width: 100%;
    height: 5%;
}

.left:hover .flipper figure.back img,
.right:hover .flipper figure.back img {
    opacity: 0.3;
}

figure.frame-img-home p,
figure.frame-img-home2 p {
    text-align: center;
    top: 0;
    margin: 0;
    left: 0;
    float: none;
    position: relative;
    font-size: 21px;
    opacity: 1;
    text-align: center;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -50%;
}

figure.frame-img-home figcaption.unique p {
    text-align: center;
    left: 0px;
    margin: 0px;
    padding: 0px;
    opacity: 1;
}

figure.back figcaption p {
    text-align: center;
    left: 0px;
    margin: 0px;
    padding: 0px;
    opacity: 1;
}
/*--------------------------------*/
/***** HOME (store of season) *****/
/*------------------------------*/

.season-box figure.season-store {
    position: relative;
    float: left;
    overflow: hidden;
    height: 65%;
    width: 100%;
    text-align: center;
    cursor: pointer;
    background: #000;
}

figure.season-store img.img-stores {
    height: auto;
    display: block;
    width: 100%;
    position: relative;
    /*-webkit-transition: all 1s ease, -webkit-transform 1s;
    transition: all 1s ease, transform 0.35s;*/
    /*-webkit-transform: scale3d(2,2,1);
    transform: scale3d(2,2,1);*/
    /*opacity: 0.6;*/
}

figure.season-store:hover img.img-stores {
    opacity: 1;
    /*-webkit-transition: all 1s ease, -webkit-transform 1s;
    transition: all 1s ease, transform 0.35s;*/
    /*-webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);*/
}
/*-------------------------------------*/
/***** HOME ( eco awareness icon )*****/
/*-----------------------------------*/

.hi-icon-wrap {
    text-align: center;
    margin: 0 auto;
    padding: 1em 0 0 0;
}

.hi-icon {
    display: inline-block;
    font-size: 0.86em;
    letter-spacing: 0;
    cursor: pointer;
    /*margin:5px 5px;*/

    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #eee;
}

.hi-icon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    box-sizing: content-box;
}

.hi-icon:before {
    display: block;
    -webkit-font-smoothing: antialiased;
}

.a-recycle-icon p,
.a-tree-icon p,
.a-respect-icon p {
    color: #333333;
    float: none;
    position: absolute;
    margin: 0 auto;
    padding-top: 0px;
    position: absolute;
    width: 100%;
}

.a-tree-icon {
    margin-right: 26px;
    margin-left: 32px;
}

.a-tree-icon:before {
    background: url("../img/d-Bodhi_awareness_icons.png") no-repeat scroll 5px 3px rgba(0, 0, 0, 0);
    content: "";
    float: none;
    height: 70px;
    width: 64px;
    margin-bottom: 17px;
}

.a-tree-icon:hover:before {
    background: url("../img/d-Bodhi_awareness_icons_hover.png") no-repeat scroll 5px 3px rgba(0, 0, 0, 0);
    content: "";
    float: none;
    height: 70px;
    width: 64px;
    margin-bottom: 17px;
}

.a-recycle-icon {
    margin-right: 26px;
}

.a-recycle-icon:before {
    content: "";
    float: none;
    height: 77px;
    width: 64px;
    margin: 0 0 10px 0;
    background: url("../img/d-Bodhi_awareness_icons.png") no-repeat scroll -64px 3px rgba(0, 0, 0, 0);
}

.a-recycle-icon:hover:before {
    content: "";
    float: none;
    height: 77px;
    width: 64px;
    margin: 0 0 10px 0;
    background: url("../img/d-Bodhi_awareness_icons_hover.png") no-repeat scroll -64px 3px rgba(0, 0, 0, 0);
}

.a-respect-icon:before {
    content: "";
    float: none;
    height: 70px;
    width: 64px;
    margin: 0 0 17px 0;
    background: url("../img/d-Bodhi_awareness_icons.png") no-repeat scroll -130px 3px rgba(0, 0, 0, 0);
}

.a-respect-icon:hover:before {
    content: "";
    float: none;
    height: 70px;
    width: 64px;
    margin: 0 0 17px 0;
    background: url("../img/d-Bodhi_awareness_icons_hover.png") no-repeat scroll -130px 3px rgba(0, 0, 0, 0);
}

.hi-icon-effect-1 .hi-icon {
    /*background: rgba(0,0,0,0.08);*/

    transition: background 0.2s, color 0.2s;
}

.hi-icon-effect-1 .hi-icon:after {
    top: -7px;
    left: -7px;
    padding: 7px;
    box-shadow: 0 0 0 4px #eee;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    transition: transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    opacity: 0;
}
/* Effect 1a */
/*.hi-icon-effect-1a .hi-icon:hover {
    background: rgba(255, 255, 255, 1);
    color: #41ab6b;
}
.hi-icon-effect-1a .hi-icon:hover:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}*/

.hi-icon-effect-1b .hi-icon:hover {
    background: rgba(0, 0, 0, 0.18);
    color: #b0c53a;
}

.hi-icon-effect-1b .hi-icon:after {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.hi-icon-effect-1b .hi-icon:hover:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/*-----------------------------*/
/***** HOME ( world maps )*****/
/*---------------------------*/

div#frame-world-map img.world-map {
    transition: all 1s ease, -webkit-transform 0.35s;
    transition: all 1s ease, transform 0.35s;
    -webkit-transform: scale3d(0.78, 0.89, 0.5);
    transform: scale3d(0.78, 0.89, 0.5);
    height: auto;
    left: 0;
    position: relative;
    -webkit-transform: scale3d(0.78, 0.89, 0.5);
    transform: scale3d(0.78, 0.89, 0.5);
    transition: all 1s ease 0s, -webkit-transform 0.35s ease 0s;
    transition: all 1s ease 0s, transform 0.35s ease 0s;
    width: 100%;
    /*left: -5%;*/
}

div#frame-world-map:hover img.world-map {
    transition: all 1s ease, -webkit-transform 0.35s;
    transition: all 1s ease, transform 0.35s;
    -webkit-transform: scale3d(0.8, 0.94, 1);
    transform: scale3d(0.8, 0.94, 1);
    -webkit-transform-origin: content-box;
    transform-origin: content-box;
}
/*DESIGN by COLLECTION*/

.images-item a.zof-link {
    color: #000;
}

.images-item a.zof-link:hover {
    color: #000;
    font-weight: bold;
}

.images-item figure.z-out-flash {
    /* max-height: 250px;*/

    height: 250px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.images-item figure.z-out-flash img.imgs {
    height: 250px;
    width: 100%;
}

.images-item figure.z-out-flash figcaption {
    padding: 2em;
    color: #000;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.z-out-flash figcaption h4 {
    position: relative;
    top: -25%;
    bottom: 0;
    left: 0;
    margin: 20px;
    padding: 30px 0;
    border: 0px solid #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.2em;
    opacity: 0;
    text-align: center;
    transition: 0.5s;
}

figure.z-out-flash:hover figcaption h4 {
    opacity: 1;
    transition: 0.5s;
    top: 0;
}

.images-item figure.z-out-flash img.imgs {
    display: block;
    /* height: 100%;*/

    height: auto;
    opacity: 1;
    width: 100%;
    position: relative;
}

figure.z-out-flash img.imgs {
    transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

figure.z-out-flash:hover img.imgs {
    opacity: 0.2;
    -webkit-transform: scale3d(2, 2, 1);
    transform: scale3d(2, 2, 1);
}
/*LIBRARY IMAGE*/

.item-libr img {
    opacity: 0.6;
}

.item-libr:hover img {
    opacity: 1;
}