body{
    background: none ;
}

.fond{
    background: -moz-linear-gradient(top,  rgba(252,236,156,1) 0%, rgba(252,236,156,0.5) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,236,156,1)), color-stop(50%,rgba(252,236,156,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(252,236,156,1) 0%,rgba(252,236,156,0.5) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(252,236,156,1) 0%,rgba(252,236,156,0.5) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(252,236,156,1) 0%,rgba(252,236,156,0.5) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(252,236,156,1) 0%,rgba(252,236,156,0.5) 50%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcec9c', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.fond_adresse{
    /*    Other    */
    width: 250px;    
    left: 75%;
    height: 200px ;
    font-size: 16px;
    
    position:absolute;
    width: 20vw;    
    left: 70vw;
    height: 10vw ;
    font-size: 1vw;
    
    background: -moz-linear-gradient(top,  rgba(252,236,156,1) 0%, rgba(252,236,156,0.5) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,236,156,1)), color-stop(50%,rgba(252,236,156,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(252,236,156,1) 0%,rgba(252,236,156,0.5) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(252,236,156,1) 0%,rgba(252,236,156,0.5) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(252,236,156,1) 0%,rgba(252,236,156,0.5) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(252,236,156,1) 0%,rgba(252,236,156,0.5) 50%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcec9c', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
   

}

.fond_logo{
    /* Other  */
    width: 100px;    
    height: 100px ;
    left: 45%;
    
    position:absolute;
    width: 10vw;    
    height: 10vw ;
    left: 45vw;
    bottom: 0;
}

.fond_logo img{
    position:absolute;
    width: 100%;    
    height: 100% ;
    left: 0;
    bottom: 0;
}

.rotate{
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    /*
    -webkit-transform-origin:50% 50%;
    -moz-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    -o-transform-origin:50% 50%;
    transform-origin:50% 50%;
    */
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
 
    overflow:hidden;
    }  
 
.rotate:hover
{
    -webkit-transform:rotate(70deg);
    -moz-transform:rotate(70deg);
    -ms-transform:rotate(70deg);
    -o-transform:rotate(70deg);
    transform:rotate(70deg);
}

.rotate_click
{
    -webkit-transform:rotate(70deg);
    -moz-transform:rotate(70deg);
    -ms-transform:rotate(70deg);
    -o-transform:rotate(70deg);
    transform:rotate(70deg);
    
}

.echelle{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.echelle:hover{
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
}

.echelle_click{
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
}

.texte_def{
    /*   Other   */
    font-size: 30px ;
    line-height: 24px;
    
    font-family: 'arialitalic', Arial, Helvetica, sans-serif;
    font-size: 2.5vw ;
    line-height: 2.5vw;
    font-style: oblique;
    font-weight: bold ;
    text-shadow:  1px 1px 3px rgba(255,255,255, 1);
    position: absolute;
    width: 25%;
    height: 25%;
    top: 10%;
    left: 5%;
    
}



/****************        EXT CSS    *********************/

.x-btn-default-small .x-btn-inner{
    font-size: 1.7vh;
    line-height: 2vh;
}

.x-btn-default-small-icon .x-btn-button, .x-btn-default-small-noicon .x-btn-button{
    height: 100%;
}

.x-grid-cell{
   font-size: 1.7vh;
    line-height: 2vh; 
}

.x-panel-header-text-container-default{
    font-size: 2vh;
    line-height: 2.5vh;
}

.x-column-header {
    font : 2vh tahoma,arial,verdana,sans-serif ;
}



/*  Generateur  : www.brenna.github.io/csshexagon/ */
/* Hexagon 250  */
@media only screen and (max-width: 320px) {
    /* ruleset for 0 - 320px */
    .member_infos_image {
        left: 120px;
    }
    
    .hexagon-250 {
        position: relative;
        width: 90px; 
        height: 51.96px;
        margin: 25.98px 0;
        background : white;
        background-size: auto 101.6136px;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-left: solid 1px #c9acac;
        border-right: solid 1px #c9acac;
    }

    .hexTop-250,
    .hexBottom-250 {
        position: absolute;
        z-index: 1;
        width: 63.64px;
        height: 63.64px;
        overflow: hidden;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background: inherit;
        left: 12.18px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /*counter transform the bg image on the caps*/
    .hexTop-250:after,
    .hexBottom-250:after {
        content: "";
        position: absolute;
        width: 88.0000px;
        height: 50.80682368868707px;
        -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-25.4034px);
        -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-25.4034px);
        transform:          rotate(45deg) scaleY(1.7321) translateY(-25.4034px);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        background: inherit;
    }

    .hexTop-250 {
        top: -31.8198px;
        border-top: solid 1.4142px #c9acac;
        border-right: solid 1.4142px #c9acac;
    }

    .hexTop-250:after {
        background-position: center top;
    }

    .hexBottom-250 {
        bottom: -31.8198px;
        border-bottom: solid 1.4142px #c9acac;
        border-left: solid 1.4142px #c9acac;
    }

    .hexBottom-250:after {
        background-position: center bottom;
    }

    .hexagon-250:after {
        content: "";
        position: absolute;
        top: 0.5774px;
        left: 0;
        width: 88.0000px;
        height: 50.8068px;
        z-index: 2;
        background: inherit;
    }
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* ruleset for 320px - 480px */
    .member_infos_image {
        left: 160px;
    }
    
    .hexagon-250 {
        position: relative;
        width: 130px; 
        height: 75.06px;
        margin: 37.53px 0;
        background : white;
        background-size: auto 145.4923px;
        background-position: center;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-left: solid 2px #c9acac;
        border-right: solid 2px #c9acac;
    }

    .hexTop-250,
    .hexBottom-250 {
        position: absolute;
        z-index: 1;
        width: 91.92px;
        height: 91.92px;
        overflow: hidden;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background: inherit;
        left: 17.04px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /*counter transform the bg image on the caps*/
    .hexTop-250:after,
    .hexBottom-250:after {
        content: "";
        position: absolute;
        width: 126.0000px;
        height: 72.74613391789285px;
        -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-36.3731px);
        -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-36.3731px);
        transform:          rotate(45deg) scaleY(1.7321) translateY(-36.3731px);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        background: inherit;
    }

    .hexTop-250 {
        top: -45.9619px;
        border-top: solid 2.8284px #c9acac;
        border-right: solid 2.8284px #c9acac;
    }

    .hexTop-250:after {
        background-position: center top;
    }

    .hexBottom-250 {
        bottom: -45.9619px;
        border-bottom: solid 2.8284px #c9acac;
        border-left: solid 2.8284px #c9acac;
    }

    .hexBottom-250:after {
        background-position: center bottom;
    }

    .hexagon-250:after {
        content: "";
        position: absolute;
        top: 1.1547px;
        left: 0;
        width: 126.0000px;
        height: 72.7461px;
        z-index: 2;
        background: inherit;
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    /* ruleset for 480px - 768px */
    .member_infos_image {
        left: 200px;
    }
    
    .hexagon-250 {
        position: relative;
        width: 170px; 
        height: 98.15px;
        margin: 49.07px 0;
        background : white;
        background-size: auto 189.3709px;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-left: solid 3px #c9acac;
        border-right: solid 3px #c9acac;
    }

    .hexTop-250,
    .hexBottom-250 {
        position: absolute;
        z-index: 1;
        width: 120.21px;
        height: 120.21px;
        overflow: hidden;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background: inherit;
        left: 21.90px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /*counter transform the bg image on the caps*/
    .hexTop-250:after,
    .hexBottom-250:after {
        content: "";
        position: absolute;
        width: 164.0000px;
        height: 94.68544414709864px;
        -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-47.3427px);
        -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-47.3427px);
        transform:          rotate(45deg) scaleY(1.7321) translateY(-47.3427px);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        background: inherit;
    }

    .hexTop-250 {
        top: -60.1041px;
        border-top: solid 4.2426px #c9acac;
        border-right: solid 4.2426px #c9acac;
    }

    .hexTop-250:after {
        background-position: center top;
    }

    .hexBottom-250 {
        bottom: -60.1041px;
        border-bottom: solid 4.2426px #c9acac;
        border-left: solid 4.2426px #c9acac;
    }

    .hexBottom-250:after {
        background-position: center bottom;
    }

    .hexagon-250:after {
        content: "";
        position: absolute;
        top: 1.7321px;
        left: 0;
        width: 164.0000px;
        height: 94.6854px;
        z-index: 2;
        background: inherit;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* ruleset for 768px - 1024px */
    .member_infos_image {
        left: 240px;
    }
    
    .hexagon-250 {
        position: relative;
        width: 210px; 
        height: 121.24px;
        margin: 60.62px 0;
        background : white;
        background-size: auto 233.2495px;
        background-position: center;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-left: solid 4px #c9acac;
        border-right: solid 4px #c9acac;
    }

    .hexTop-250,
    .hexBottom-250 {
        position: absolute;
        z-index: 1;
        width: 148.49px;
        height: 148.49px;
        overflow: hidden;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background: inherit;
        left: 26.75px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /*counter transform the bg image on the caps*/
    .hexTop-250:after,
    .hexBottom-250:after {
        content: "";
        position: absolute;
        width: 202.0000px;
        height: 116.62475437630441px;
        -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-58.3124px);
        -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-58.3124px);
        transform:          rotate(45deg) scaleY(1.7321) translateY(-58.3124px);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        background: inherit;
    }

    .hexTop-250 {
        top: -74.2462px;
        border-top: solid 5.6569px #c9acac;
        border-right: solid 5.6569px #c9acac;
    }

    .hexTop-250:after {
        background-position: center top;
    }

    .hexBottom-250 {
        bottom: -74.2462px;
        border-bottom: solid 5.6569px #c9acac;
        border-left: solid 5.6569px #c9acac;
    }

    .hexBottom-250:after {
        background-position: center bottom;
    }

    .hexagon-250:after {
        content: "";
        position: absolute;
        top: 2.3094px;
        left: 0;
        width: 202.0000px;
        height: 116.6248px;
        z-index: 2;
        background: inherit;
    }
}

@media only screen and (min-width: 1024px) {
    /* ruleset for 1024px - ~ */
    .member_infos_image {
        left: 280px;
    }
    
    .hexagon-250 {
        position: relative;
        width: 250px; 
        height: 144.34px;
        margin: 72.17px 0;
        background : white;
        background-size: auto 277.1281px;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-left: solid 5px #c9acac;
        border-right: solid 5px #c9acac;
    }

    .hexTop-250,
    .hexBottom-250 {
        position: absolute;
        z-index: 1;
        width: 176.78px;
        height: 176.78px;
        overflow: hidden;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background: inherit;
        left: 31.61px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /*counter transform the bg image on the caps*/
    .hexTop-250:after,
    .hexBottom-250:after {
        content: "";
        position: absolute;
        width: 240.0000px;
        height: 138.5640646055102px;
        -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-69.2820px);
        -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-69.2820px);
        transform:          rotate(45deg) scaleY(1.7321) translateY(-69.2820px);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        background: inherit;
    }

    .hexTop-250 {
        top: -88.3883px;
        border-top: solid 7.0711px #c9acac;
        border-right: solid 7.0711px #c9acac;
    }

    .hexTop-250:after {
        background-position: center top;
    }

    .hexBottom-250 {
        bottom: -88.3883px;
        border-bottom: solid 7.0711px #c9acac;
        border-left: solid 7.0711px #c9acac;
    }

    .hexBottom-250:after {
        background-position: center bottom;
    }

    .hexagon-250:after {
        content: "";
        position: absolute;
        top: 2.8868px;
        left: 0;
        width: 240.0000px;
        height: 138.5641px;
        z-index: 2;
        background: inherit;
    }
}


/*  Hexagon 100  */
@media only screen and (max-width: 320px) {
    /* ruleset for 0 - 320px */
    .Trend_p {
        width:50px; 
        text-align:center;
        word-wrap: break-word;
        word-break: break-all;
    }
    
    .hexagon-100 {
        position: relative;
        width: 50px; 
        height: 28.87px;
        margin: 14.43px 0;
        background : white;
        background-size: auto 53.1162px;
        background-position: center;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-left: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
    }

    .hexTop-100,
    .hexBottom-100 {
        position: absolute;
        z-index: 1;
        width: 35.36px;
        height: 35.36px;
        overflow: hidden;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background: inherit;
        left: 5.32px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /*counter transform the bg image on the caps*/
    .hexTop-100:after,
    .hexBottom-100:after {
        content: "";
        position: absolute;
        width: 46.0000px;
        height: 26.55811238272279px;
        -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-13.2791px);
        -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-13.2791px);
        transform:          rotate(45deg) scaleY(1.7321) translateY(-13.2791px);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        background: inherit;
    }

    .hexTop-100 {
        top: -17.6777px;
        border-top: solid 2.8284px #ffffff;
        border-right: solid 2.8284px #ffffff;
    }

    .hexTop-100:after {
        background-position: center top;
    }

    .hexBottom-100 {
        bottom: -17.6777px;
        border-bottom: solid 2.8284px #ffffff;
        border-left: solid 2.8284px #ffffff;
    }

    .hexBottom-100:after {
        background-position: center bottom;
    }

    .hexagon-100:after {
        content: "";
        position: absolute;
        top: 1.1547px;
        left: 0;
        width: 46.0000px;
        height: 26.5581px;
        z-index: 2;
        background: inherit;
    }
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* ruleset for 320px - 480px */
    .Trend_p {
        width:60px; 
        text-align:center;
        word-wrap: break-word;
        word-break: break-all;
    }
    
    .hexagon-100 {
        position: relative;
        width: 60px; 
        height: 34.64px;
        margin: 17.32px 0;
        background : white;
        background-size: auto 64.6632px;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-left: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
    }

    .hexTop-100,
    .hexBottom-100 {
        position: absolute;
        z-index: 1;
        width: 42.43px;
        height: 42.43px;
        overflow: hidden;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background: inherit;
        left: 6.79px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /*counter transform the bg image on the caps*/
    .hexTop-100:after,
    .hexBottom-100:after {
        content: "";
        position: absolute;
        width: 56.0000px;
        height: 32.331615074619044px;
        -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-16.1658px);
        -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-16.1658px);
        transform:          rotate(45deg) scaleY(1.7321) translateY(-16.1658px);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        background: inherit;
    }

    .hexTop-100 {
        top: -21.2132px;
        border-top: solid 2.8284px #ffffff;
        border-right: solid 2.8284px #ffffff;
    }

    .hexTop-100:after {
        background-position: center top;
    }

    .hexBottom-100 {
        bottom: -21.2132px;
        border-bottom: solid 2.8284px #ffffff;
        border-left: solid 2.8284px #ffffff;
    }

    .hexBottom-100:after {
        background-position: center bottom;
    }

    .hexagon-100:after {
        content: "";
        position: absolute;
        top: 1.1547px;
        left: 0;
        width: 56.0000px;
        height: 32.3316px;
        z-index: 2;
        background: inherit;
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    /* ruleset for 480px - 768px */
    .Trend_p {
        width:75px; 
        text-align:center;
        word-wrap: break-word;
        word-break: break-all;
    }
    
    .hexagon-100 {
        position: relative;
        width: 75px; 
        height: 43.30px;
        margin: 21.65px 0;
        background : white;
        background-size: auto 81.9837px;
        background-position: center;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-left: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
    }

    .hexTop-100,
    .hexBottom-100 {
        position: absolute;
        z-index: 1;
        width: 53.03px;
        height: 53.03px;
        overflow: hidden;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background: inherit;
        left: 8.98px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /*counter transform the bg image on the caps*/
    .hexTop-100:after,
    .hexBottom-100:after {
        content: "";
        position: absolute;
        width: 71.0000px;
        height: 40.991869112463434px;
        -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-20.4959px);
        -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-20.4959px);
        transform:          rotate(45deg) scaleY(1.7321) translateY(-20.4959px);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        background: inherit;
    }

    .hexTop-100 {
        top: -26.5165px;
        border-top: solid 2.8284px #ffffff;
        border-right: solid 2.8284px #ffffff;
    }

    .hexTop-100:after {
        background-position: center top;
    }

    .hexBottom-100 {
        bottom: -26.5165px;
        border-bottom: solid 2.8284px #ffffff;
        border-left: solid 2.8284px #ffffff;
    }

    .hexBottom-100:after {
        background-position: center bottom;
    }

    .hexagon-100:after {
        content: "";
        position: absolute;
        top: 1.1547px;
        left: 0;
        width: 71.0000px;
        height: 40.9919px;
        z-index: 2;
        background: inherit;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* ruleset for 768px - 1024px */
    .Trend_p {
        width:88px; 
        text-align:center;
        word-wrap: break-word;
        word-break: break-all;
    }
    
    .hexagon-100 {
        position: relative;
        width: 88px; 
        height: 50.81px;
        margin: 25.40px 0;
        background : white;
        background-size: auto 96.9948px;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-left: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
    }

    .hexTop-100,
    .hexBottom-100 {
        position: absolute;
        z-index: 1;
        width: 62.23px;
        height: 62.23px;
        overflow: hidden;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background: inherit;
        left: 10.89px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /*counter transform the bg image on the caps*/
    .hexTop-100:after,
    .hexBottom-100:after {
        content: "";
        position: absolute;
        width: 84.0000px;
        height: 48.49742261192856px;
        -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-24.2487px);
        -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-24.2487px);
        transform:          rotate(45deg) scaleY(1.7321) translateY(-24.2487px);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        background: inherit;
    }

    .hexTop-100 {
        top: -31.1127px;
        border-top: solid 2.8284px #ffffff;
        border-right: solid 2.8284px #ffffff;
    }

    .hexTop-100:after {
        background-position: center top;
    }

    .hexBottom-100 {
        bottom: -31.1127px;
        border-bottom: solid 2.8284px #ffffff;
        border-left: solid 2.8284px #ffffff;
    }

    .hexBottom-100:after {
        background-position: center bottom;
    }

    .hexagon-100:after {
        content: "";
        position: absolute;
        top: 1.1547px;
        left: 0;
        width: 84.0000px;
        height: 48.4974px;
        z-index: 2;
        background: inherit;
    }
}

@media only screen and (min-width: 1024px) {
    /* ruleset for 1024px - ~ */
    .Trend_p {
        width:100px; 
        text-align:center;
        word-wrap: break-word;
        word-break: break-all;
    }
    
    .hexagon-100 {
        position: relative;
        width: 100px; 
        height: 57.74px;
        margin: 28.87px 0;
        background : white;
        background-size: auto 110.8513px;
        background-position: center;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-left: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
    }

    .hexTop-100,
    .hexBottom-100 {
        position: absolute;
        z-index: 1;
        width: 70.71px;
        height: 70.71px;
        overflow: hidden;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background: inherit;
        left: 12.64px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /*counter transform the bg image on the caps*/
    .hexTop-100:after,
    .hexBottom-100:after {
        content: "";
        position: absolute;
        width: 96.0000px;
        height: 55.42562584220408px;
        -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-27.7128px);
        -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-27.7128px);
        transform:          rotate(45deg) scaleY(1.7321) translateY(-27.7128px);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        background: inherit;
    }

    .hexTop-100 {
        top: -35.3553px;
        border-top: solid 2.8284px #ffffff;
        border-right: solid 2.8284px #ffffff;
    }

    .hexTop-100:after {
        background-position: center top;
    }

    .hexBottom-100 {
        bottom: -35.3553px;
        border-bottom: solid 2.8284px #ffffff;
        border-left: solid 2.8284px #ffffff;
    }

    .hexBottom-100:after {
        background-position: center bottom;
    }

    .hexagon-100:after {
        content: "";
        position: absolute;
        top: 1.1547px;
        left: 0;
        width: 96.0000px;
        height: 55.4256px;
        z-index: 2;
        background: inherit;
    }
}


/*  Hexagon 50  */
.hexagon-50 {
    position: relative;
    width: 50px; 
    height: 28.87px;
    margin: 14.43px 0;
    background : white;
    background-size: auto 55.4256px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    border-left: solid 1px #ffffff;
    border-right: solid 1px #ffffff;
}

.hexTop-50,
.hexBottom-50 {
    position: absolute;
    z-index: 1;
    width: 35.36px;
    height: 35.36px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 6.32px;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

/*counter transform the bg image on the caps*/
.hexTop-50:after,
.hexBottom-50:after {
    content: "";
    position: absolute;
    width: 48.0000px;
    height: 27.71281292110204px;
    -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-13.8564px);
    -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-13.8564px);
    transform:          rotate(45deg) scaleY(1.7321) translateY(-13.8564px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
}

.hexTop-50 {
    top: -17.6777px;
    border-top: solid 1.4142px #ffffff;
    border-right: solid 1.4142px #ffffff;
}

.hexTop-50:after {
    background-position: center top;
}

.hexBottom-50 {
    bottom: -17.6777px;
    border-bottom: solid 1.4142px #ffffff;
    border-left: solid 1.4142px #ffffff;
}

.hexBottom-50:after {
    background-position: center bottom;
}

.hexagon-50:after {
    content: "";
    position: absolute;
    top: 0.5774px;
    left: 0;
    width: 48.0000px;
    height: 27.7128px;
    z-index: 2;
    background: inherit;
}