.contenu_conteneur_modal{
    position: absolute;
    left: 0;
    top: 0;
    width: 100% ;
    height: 100%;
    background: transparent ;
}

.contenu_fond{
    position: absolute;
    left: 0;
    top: 0;
    width: 100% ;
    height: 100%;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#ffddaa));
    background: -webkit-linear-gradient(#ffffff, #ffddaa);
    background: -moz-linear-gradient(#ffffff, #ffddaa);
    background: -ms-linear-gradient(#ffffff, #ffddaa);
    background: -o-linear-gradient(#ffffff, #ffddaa);
    background: linear-gradient(#ffffff, #ffddaa);
    -pie-background: linear-gradient(#ffffff, #ffddaa);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    cursor: pointer;
    opacity : 0 ;
}

.contenu_fond_active{
    opacity : 0.75;
}

.contenu_pages{
    position: absolute;
    left: 49.5vw;
    top: 49.5vw;
    bottom: 49.5vw;
    right: 49.5vw;
    overflow: visible;
    opacity : 0;
    background: rgba(0,0,0,0.5);
    -webkit-box-shadow: #000 0px 1vw 2vw;
    -moz-box-shadow: #000 0px 1vw 2wv;
    box-shadow: #000 0px 1vw 2vw;
     -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.contenu_pages_active{
    left: 2vw;
    top: 2vw;
    bottom: 2vw;
    right: 2vw;
    opacity : 1;
}

.contenu_pages_body{
    position: absolute;
    left: 3%;
    top: 3%;
    width: 94%;
    height: 94%;
    overflow: visible;
    background: transparent ;
}

.header{
    position: absolute;
    background: transparent ;
    border: 1px solid #f00;
    bottom: 100% ;
    right:  -5% ;
    width: 15%;
    min-width: 100px;
    height: 5% ;
    min-height: 25px;
    -webkit-border-radius: 3vw;
    -moz-border-radius: 3vw;
    border-radius: 3vw;
    overflow: hidden;
    opacity : 0 ;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.header_active {
    opacity : 1 ;
}

.common_btn_icon{
    background-size : 100% 100% ; 
   
}

.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: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);
}


/*  Generateur  : www.brenna.github.io/csshexagon/ */
/* Hexagon 250  */
@media only screen and (max-width: 320px) {
    /* ruleset for 0 - 320px */
    
    .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 */
    
    .hexagon-250 {
        position: relative;
        width: 130px; 
        height: 75.06px;
        margin: 37.53px 0;
        background : white;
        background-size: auto 145.4923px;
        background-position: center;
        background-repeat: no-repeat;
        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 */
    
    .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 */
    
    .hexagon-250 {
        position: relative;
        width: 210px; 
        height: 121.24px;
        margin: 60.62px 0;
        background : white;
        background-size: auto 233.2495px;
        background-position: center;
        background-repeat: no-repeat;
        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 - ~ */
    
    .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;
        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: 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;
        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: 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;
        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: 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;
}