/*diamond layout start*/
        .diamond-header {
            margin-top: 30px;
            font-size:20px; 
            background-image:linear-gradient(to right, #b7dcfb, #f7f8f9);
            background-size: 300px 10px;
            background-repeat:no-repeat;
            background-position:bottom left;
        }
        .diamond-body {
            position:relative;
            width:900px;
            margin:20px auto;
        }

        .diamond {
            display:none;
            position:absolute;
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            position: relative;
            border: solid 1px rgba(255, 255, 255, 0.2);
            overflow: hidden;
        }
            .diamond a {
                display:table;
                width:100%;
                height:100%;
                background-color:#4298d5;
                background:url('../img/diamond-bg.png') top left no-repeat;
                background-size:100% 100%;
                color: white;
                text-decoration:none;
                font-size:0px;
            }
                .diamond a:hover {
                    background-color:#ffbd7c;
                    background-image:url('../img/diamond-bg-hover.png');
                }
                .diamond a span {
                    display:table-cell;
                    text-align:center;
                    vertical-align:middle;      
                    width:100%; height:100%;
                    -moz-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                    font-size:16px;
                }

        .diamond-1 {
            top:10%; left: 4%;
            z-index: 1;
            position:absolute;
        }
        .diamond-2 {
            top:50%; left: 22%;
            z-index: 2;
            position:absolute;
        }
        .diamond-3 {
            top:10%; left: 40.5%;
            z-index: 3;
            position:absolute;
        }
        .diamond-4 {
            top:50%; right: 22%;
            z-index: 4;
            position:absolute;
        }
        .diamond-5 {
            top:10%; right: 4%;
            z-index: 5;
            position:absolute;
        }

/*diamond layout end*/

/*butterfly layout start*/
    .butterfly-header {
        font-size:20px; 
        margin-top: 30px;
        background-image:linear-gradient(to right, #b7dcfb, #f7f8f9);
        background-size: 160px 10px;
        background-repeat:no-repeat;
        background-position:bottom left;
    }

    .butterfly-body {
        position:relative;
        width:900px;
        margin:30px auto;
    }
        .butterfly-body:after {
            clear:both; content: ''; display:block; float:none;
        }

    .butterfly-item {
        width:48%;
        overflow:hidden;
    }
        .butterfly-item a {
            display:block; width: 100%;
            position:relative; text-decoration:none; color:white;
            background-color:#b9d1e3; padding:0px; margin:0px; font-size:0px;
        }
            .butterfly-item a img {
                width:100%; position:relative; z-index:1; border:0px;
            }
            .butterfly-item a span {
                position:absolute; z-index: 2;
                bottom: 0px; padding: 10px 40px;
                display:block; width:100%;
                line-height: 200%; font-size:16px;
                background-image:linear-gradient(to top, rgba(0,0,0,0.7), rgba(255,255,255,0.0));
            }
            .butterfly-item a:hover img {
                opacity: 0.7;
                filter: alpha(opacity:70);
            }

        .butterfly-item.butterfly-left-top {
            float:left; border-radius: 5px 50px 0px 50px;
        }
        .butterfly-item.butterfly-left-bottom {
            float:left; border-radius: 50px 0px 50px 5px;
            margin-top: 4%;
        }
        .butterfly-item.butterfly-right-top {
            float:right; border-radius: 50px 5px 50px 0px;
            margin-top: 4%;
        }
        .butterfly-item.butterfly-right-bottom {
            float:right; border-radius: 0px 50px 5px 50px;
            margin-top:4%;
        }

/*butterfly layout end*/