.content {
    text-align: center;
} 
ul.menu-center  li.active a {
    color: #d9186a;
}
.shape-container {
    display: inline-block;
    list-style: none;
    margin: auto;
    padding: 0px;
    text-align: left;
    margin-top: 100px;
}
.shape-row {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.shape-row li {
    display: inline-block;
}

.info {
    width: inherit;
    height: inherit;
    position: absolute;
}

.thumb {
        -webkit-transform-origin: 95% 40%;
	-moz-transform-origin: 95% 40%;
	-o-transform-origin: 95% 40%;
	-ms-transform-origin: 95% 40%;
	transform-origin: 95% 40%;
	
	-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;
}

.shadow {
    width: inherit;
    height: inherit;
    background: #FFF;
    position: absolute;
    display: inline-block;
}

 

.background-img {
    background: #16252e;
}

/* ...................triangle.................................*/
.triangle {
    width: 260px;
    height: 260px;
    position: absolute;
    left: 2px;
    top: 2px;   
}
 
.triangle-container {
    width: 264px;
    height: 264px;
}


.triangle-container.left50 {
    width: 132px;
}
.triangle-container.left50 .shadow, .triangle-container.left50 .info {
    width: 264px;
    margin-left: -132px;
}
 
.triangle-up {
    -webkit-clip-path: polygon(0% 100%, 50% 0%, 50% 0%, 100% 100%);
    clip-path: polygon(0% 100%, 50% 0%, 50% 0%, 100% 100%);
    -webkit-clip-path: url("#triangle-up");
    clip-path: url("#triangle-up");
}

.triangle-down {
    -webkit-clip-path: polygon(0% 0%, 50% 100%, 50% 100%, 100% 0%);
    clip-path: polygon(0% 0%, 50% 100%, 50% 100%, 100% 0%);
    -webkit-clip-path: url("#triangle-down");
    clip-path: url("#triangle-down");
}
.triangle.triangle-down {
    top: 2px;
}
/* ...................rhombus.................................*/
.rhombus-container {
    width: 264px;
    height: 528px;
}
.rhombus-container.left50 {
    width: 132px;
}
.rhombus-container.left50 .shadow, .rhombus-container.left50 .info {
    width: 264px;
    margin-left: -132px;
}
.rhombus {
    width:260px;
    height: 520px;
    position: absolute;
    left: 2px;
    top: 2px;
}

.rhombus-orginal {
    -webkit-clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
    clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
    -webkit-clip-path: url("#rhombus");
    clip-path: url("#rhombus");
}
/* ...................trapezoid.................................*/
.trapezoid-container {
    width: 394px;
    height: 264px;
}
.trapezoid-container.left50 {
    width: 264px;
}
.trapezoid-container.left50 .shadow, .trapezoid-container.left50 .info  {
    width: 394px;
    margin-left: -132px;
}
.trapezoid {
    width: 390px;
    height: 260px;
    position: absolute;
    left: 2px;
    top: 2px;
}
.trapezoid-orginal {
   
    -webkit-clip-path: polygon(0% 100%, 20% 0%, 100% 0%, 80% 100%);
    clip-path: polygon(0% 100%, 20% 0%, 100% 0%, 80% 100%);
    -webkit-clip-path: url("#trapezoid");
    clip-path: url("#trapezoid");
}
/* ..................................effect............................... */

.triangle-container:hover .thumb, .rhombus-container:hover .thumb, .trapezoid-container:hover .thumb{
    -webkit-transform: rotate(-110deg);
	-moz-transform: rotate(-110deg);
	-o-transform: rotate(-110deg);
	-ms-transform: rotate(-110deg);
	transform: rotate(-110deg);
} 
@media only screen and (min-width: 1024px){
    .shape-container {
        height: 351px;
        margin-top: 64px;
    }

    .triangle {
        width: 78px;
        height: 78px;   
    }

    .triangle-container {
        width: 82px;
        height: 82px;
    }

    .triangle-container.left50 {
        width: 41px;
    }
    
    .triangle-container.left50 .shadow, .triangle-container.left50 .info {
        width: 82px;
        margin-left: -41px;
    }
    
    .rhombus-container {
        width: 82px;
        height: 164px;
    }
    .rhombus-container.left50 {
        width: 41px;
    }
    .rhombus-container.left50 .shadow, .rhombus-container.left50 .info {
        width: 82px;
        margin-left: -41px;
    }
    .rhombus {
        width:78px;
        height: 158px;
        left: 2px;
        top: 2px;
    }
    
    .trapezoid-container {
        width: 124px;
        height: 82px;
    }
    .trapezoid-container.left50 {
        width: 41px;
    }
    .trapezoid-container.left50 .shadow, .trapezoid-container.left50 .info  {
        width: 124px;
        margin-left: -41px;
    }
    .trapezoid {
        width: 120px;
        height: 78px;  
        left: 2px;
        top: 2px;
    }
}
@media only screen and (min-width: 1600px){
    .shape-container {
        margin-top: 82px;
        height: 453px;
    }
    .triangle {
        width: 104px;
        height: 104px;
        left: 2px;
        top: 2px;   
    }

    .triangle-container {
        width: 108px;
        height: 108px;
    }

    .triangle-container.left50 {
        width:  54px;
    }
    .triangle-container.left50 .shadow, .triangle-container.left50 .info {
        width: 108px;
        margin-left: -54px;
    }
 
    .triangle.triangle-down {
        top: 2px;
    }
    /* ...................rhombus.................................*/
    .rhombus-container {
        width: 108px;
        height: 216px;
    }
    .rhombus-container.left50 {
        width: 54px;
    }
    .rhombus-container.left50 .shadow, .rhombus-container.left50 .info {
        width: 108px;
        margin-left: -54px;
    }
    .rhombus {
        width: 104px;
        height: 212px;
        left: 2px;
        top: 2px;
    }

    /* ...................trapezoid.................................*/
    .trapezoid-container {
        width: 162px;
        height: 108px;
    }
    .trapezoid-container.left50 {
        width: 108px;
    }
    .trapezoid-container.left50 .shadow, .trapezoid-container.left50 .info  {
        width: 162px;
        margin-left: -54px;
    }
    .trapezoid {
        width: 156px;
        height: 104px;
        left: 2px;
        top: 2px;
    }
}
@media only screen and (min-width: 1920px){
    .shape-container {
        margin-top: 100px;
        height: 552px;
    }
    .triangle {
        width: 128px;
        height: 128px;
        left: 2px;
        top: 2px;   
    }

    .triangle-container {
        width: 132px;
        height: 132px;
    }

    .triangle-container.left50 {
        width:  66px;
    }
    .triangle-container.left50 .shadow, .triangle-container.left50 .info {
        width: 132px;
        margin-left: -66px;
    }
 
    .triangle.triangle-down {
        top: 2px;
    }
    /* ...................rhombus.................................*/
    .rhombus-container {
        width: 132px;
        height: 264px;
    }
    .rhombus-container.left50 {
        width: 66px;
    }
    .rhombus-container.left50 .shadow, .rhombus-container.left50 .info {
        width: 132px;
        margin-left: -66px;
    }
    .rhombus {
        width: 128px;
        height: 260px;
        left: 2px;
        top: 2px;
    }

    /* ...................trapezoid.................................*/
    .trapezoid-container {
        width: 198px;
        height: 132px;
    }
    .trapezoid-container.left50 {
        width: 66px;
    }
    .trapezoid-container.left50 .shadow, .trapezoid-container.left50 .info  {
        width: 198px;
        margin-left: -66px;
    }
    .trapezoid {
        width: 192px;
        height: 128px;
        left: 2px;
        top: 2px;
    }
}
@media only screen and (min-width: 2560px){
    .shape-container {
        margin-top: 133px;
        height: 765px;
    }
    .triangle {
        width: 186px;
        height: 186px;
        left: 2px;
        top: 2px;   
    }

    .triangle-container {
        width: 190px;
        height: 190px;
    }

    .triangle-container.left50 {
        width: 95px;
    }
    .triangle-container.left50 .shadow, .triangle-container.left50 .info {
        width: 190px;
        margin-left: -95px;
    }
 
    .triangle.triangle-down {
        top: 2px;
    }
    /* ...................rhombus.................................*/
    .rhombus-container {
        width: 190px;
        height: 380px;
    }
    .rhombus-container.left50 {
        width: 95px;
    }
    .rhombus-container.left50 .shadow, .rhombus-container.left50 .info {
        width: 190px;
        margin-left: -95px;
    }
    .rhombus {
        width: 186px;
        height: 374px;
        left: 2px;
        top: 2px;
    }

    /* ...................trapezoid.................................*/
    .trapezoid-container {
        width: 285px;
        height: 190px;
    }
    .trapezoid-container.left50 {
        width: 285px;
    }
    .trapezoid-container.left50 .shadow, .trapezoid-container.left50 .info  {
        width: 285px;
        margin-left: -95px;
    }
    .trapezoid {
        width: 281px;
        height: 186px;
        left: 2px;
        top: 2px;
    }
}


/*..................................... shape order................................. */

.shape1 {
    z-index: 14; 
}

.shape2 {
    z-index: 13;
}

.shape3 {
    z-index: 12;
}
.shape4 {
    z-index: 11;
}

.shape5 {
    z-index: 10;
}

.shape6 {
    z-index: 9;
}
.shape7 {
    z-index: 8;
}

.shape8 {
    z-index: 7;
}

.shape9 {
    z-index: 6;
}
.shape10 {
    z-index: 5;
}

.shape11 {
    z-index: 4;
}

.shape12 {
    z-index: 3;
}
.shape13 {
    z-index: 2;
}

.shape14 {
    z-index: 1;
}