/* hexaAGON STARTS HERE */
.hexa {
    width: 158px;
    height: 90px;
    background-color: #ccc;
    position: relative;
    float: left;
    margin: 25px 5px;
    text-align: center;
    zoom: 1;
    font-size: 17px;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}
    

    .hexa.hexa-gap {
        margin-left: 86px;
        background-color: #8b8989;
    }

    /*.hexa a {
        display: block;
        width: 100%;
        height: 100%;
        text-indent: -9999em;
        position: absolute;
        top: 0;
        left: 0;
    }*/

    .hexa .corner-1,
    .hexa .corner-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        z-index: -2;
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .hexa .corner-1 {
        z-index: -1;
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .hexa .corner-2 {
        -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }

        .hexa .corner-1:before,
        .hexa .corner-2:before {
            width: 173px;
            height: 173px;
            content: '';
            position: absolute;
            background: inherit;
            top: 0;
            left: 0;
            z-index: 1;
            background: inherit;
            background-repeat: no-repeat;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            backface-visibility: hidden;
        }


    .hexa .corner-1:before {
        -webkit-transform: rotate(-60deg) translate(-87px, 0px);
        -moz-transform: rotate(-60deg) translate(-87px, 0px);
        -ms-transform: rotate(-60deg) translate(-87px, 0px);
        -o-transform: rotate(-60deg) translate(-87px, 0px);
        transform: rotate(-60deg) translate(-87px, 0px);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .hexa .corner-2:before {
        -webkit-transform: rotate(60deg) translate(-48px, -11px);
        -moz-transform: rotate(60deg) translate(-48px, -11px);
        -ms-transform: rotate(60deg) translate(-48px, -11px);
        -o-transform: rotate(60deg) translate(-48px, -11px);
        transform: rotate(60deg) translate(-48px, -11px);
        bottom: 0;
    }

    /* Custom styles*/
    .hexa .inner {
        color: #eee;
    }

    .hexa.hexa-1 {
        top: -5px;
        right: -3px;
    }

    .hexa.hexa-2 {
        clear: both;
    }

    .hexa.hexa-4 {
        clear: both;
        right: -86px;
        top: 5px;
    }

.bg-cc1 {
    background-color: #e28321 !important;
}

.bg-cc2 {
    background-color: #f56363 !important;
}

.bg-cc3 {
    background-color: #0919f7 !important;
}

.bg-cc4 {
    background-color: #0fd6ba !important;
}

.bg-cc5 {
    background-color: #b30ddc !important;
}

.bg-cc6 {
    background-color: #da312e !important;
}

.bg-cc7 {
    background-color: #edbf0d !important;
}

.bg-cc8 {
    background-color: #00acee !important;
}

.bg-cc9 {
    background-color: #a9b5c1 !important;
}

.bg-cc10 {
    background-color: #61b812 !important;
}

.front i {
    display: block;
    margin-bottom: 0px;
    font-size: 50px;
    color: #FFF;
}

.back-hex {
    font-size: 40px;
    display: none;
}

    .back-hex ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .back-hex ul li {
            padding: 5px 20px;
            display: inline-block;
            font-size: 14px;
            border-radius: 0px;
            background: rgba(255,255,255,0.20);
            margin: 0px;
        }
.hexa:hover{
    -webkit-transition: all .6s ease-out;
        transition: all .6s ease-out;
}
        .hexa:hover .back-hex{
            display:block;
            -webkit-transition: all .6s ease-out;
        transition: all .6s ease-out;
    }
.hexa:hover .front {
    display:none;
    -webkit-transition: all .6s ease-out;
        transition: all .6s ease-out;
}

.img-section.hexa-wrapper.flip .hexa .front, .img-section.hexa-wrapper.flip .hexa .back-hex {
    padding-top: 10px;
}

.hexa .back-hex img {
    width: 120px;
    margin-top: -27px;

}

.hexa.image-div {
    margin-bottom: 75px;
}

.enter-website.main-btn {
    margin-bottom: 50px;
}
.enter-website.edge {
    margin-bottom:30px;
}
.hexa .front img {
    width: 114px;
    margin-top: -27px;
}


.other-browser {
    display:none;
}

/*@font-face {
font-family: "Savoge LET Plain";
src: url("home-folders/fonts/Savoye LET Plain.ttf");
src: 
url("css/fonts/Harabara.woff") format("woff"),
url("css/fonts/Harabara.otf") format("opentype"),
url("css/fonts/Harabara.svg#filename") format("svg");
}*/