.lt-ie10 .hexagon-news,
.lt-ie10 .hexagon,
.lt-ie10 .hexagon-pic {
    opacity: 1 !important;
}
/* ===================================================================================================

                                    HEXAGONS

=================================================================================================== */


/* ==========================================================================
HEXAGON NEWS
========================================================================== */


.hexagon-news {
    position: absolute;
    z-index: 1;
    width: 322px;
    height: 372px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    -webkit-backface-visibility: hidden;

}
.hexagon-news img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ;
    transition: all 0.3s ;
    -webkit-backface-visibility: hidden;
}
.hexagon-news.hovered img {
    opacity: 0.8;
}

.hexagon-news .text {
    display: table;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    top:0;
    left:0;
}

.hexagon-news .text div {
    display: table-cell;
    padding: 0 24px;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.hexagon-news .text h3 {
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    line-height: 31px;
    margin: 0 0 15px 0;
}

.hexagon-news .text h3 a {
    font-size: 20px;
    color: #fff;
    text-transform: none;
    line-height: 31px;	
}
.hexagon-news .text p {
    margin: 0;
    font-size:13px;
    color:#232323;
    line-height: 23px;
}

.hexagon-news .text a {
    color:#fff;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    font-size:13px;
}
.hexagon-news .text .fa {margin-right: 5px;}


.hexagon-news.pic {
    z-index: 0;
    height: 365px;
    margin-top: 4px;
}
.hexagon-news.pic div{
    position: absolute;
    display: block;
    border-left: 161px solid #fff;
    border-right: 162px solid #fff;
    width: 1px;
    left:-1px;
}

.hexagon-news.pic .top {
    top: -1px;
    border-bottom: 94px solid transparent;
}

.hexagon-news.pic .bottom{
    bottom: -1px;
    border-top: 94px solid transparent;
}

/* ==========================================================================
HEXAGON PICTURE
========================================================================== */


.hexagon-pic {
    width: 190px;
    height: 214px;
    position: relative;
    float: left;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-backface-visibility: hidden;
}

.hexagon-pic div {
    position: absolute;
    display: block;
    border-left: 95px solid #fff;
    border-right: 95px solid #fff;
    width: 1px;
    left:-1px;
}

.hexagon-pic .top {
    top: -1px;
    border-bottom: 54px solid transparent;
}

.hexagon-pic .bottom{
    bottom: -1px;
    border-top: 54px solid transparent;
}

/* ================================== SMALL ========================================*/

.hexagon-pic.small {
    width: 64px;
    height: 74px;
    position: relative;
    background-position: center center;
    background-size: auto 100% ;
    background-repeat: no-repeat;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}

.hexagon-pic.small div {
    border-left: 33px solid #fff;
    border-right: 32px solid #fff;
    width: 1px;
    left:-1px;
}

.hexagon-pic.small .top {
    top: -1px;
    border-bottom: 19px solid transparent;
}

.hexagon-pic.small .bottom{
    bottom: -1px;
    border-top: 19px solid transparent;
}

/* ==========================================================================
HEXAGON SIMPLE SMALL TEXT
========================================================================== */

.hex-simple .a {
    width: 0;
    border-bottom: 17px solid #252525;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: relative;
    top:1px;
}

.hex-simple .b {
    width: 60px;
    height: 35px;
    background-color: #252525;
    line-height: 35px;
    text-align: center;
}

.hex-simple .c {
    width: 0;
    border-top: 17px solid #252525;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: relative;
    top:-1px;
}

/* ==========================================================================
HEXAGON STANDARD TEXT + ICO
========================================================================== */

.hexagon {
    width: 214px;
    height: 122px;
    position: relative;
    float: left;
    margin-top: 60px;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: background 0.3s ease-out;
    transition: background 0.3s ease-out;

}


.hexagon:before {
    content: "";
    position: absolute;
    top: -59px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 107px solid transparent;
    border-right: 107px solid transparent;
    border-bottom: 60px solid transparent;

    -webkit-transition: border-bottom-color 0.3s ease-out;
    transition: border-bottom-color 0.3s ease-out;
    -moz-transform: scale(.9999);

}
.hexagon:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -59px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 107px solid transparent;
    border-right: 107px solid transparent;
    border-top: 60px solid transparent;
    -webkit-transition: border-top-color 0.3s ease-out;
    transition: border-top-color 0.3s ease-out;
    -moz-transform: scale(.9999);
}
.hexagon img.fake {
    position: absolute;
    z-index: 4;
    top:-59px;
    left:0;
    opacity: 0;
    filter:alpha(opacity=00);
    width:100%;
}

.hexagon .text {
    position: absolute;
    top:0;
    z-index: 3;
    color: #fff;
    text-align: center;
    width: 100%;
    height: 100%;
    display: table;
    font-family: 'Dosis', sans-serif;
    font-size: 16px;
    font-weight: 500;
}
.hexagon .text .table-cell {
    vertical-align: middle;
    text-transform: uppercase;
}

.hexagon .icon {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
}
.hexagon.hovered .icon {
    opacity: 0.7;
    filter:alpha(opacity=70);
}

/*========================  HEXAGON MAJOR  =======================*/

.hexagon.major {
    width: 320px;
    height: 180px;
    background: #f04e25;
    position: absolute;
    right:0;
    top:120px;
    float: left;
    margin-top: 60px;
    -webkit-transition: background 0.3s ease-out;
    transition: background 0.3s ease-out;
    -webkit-backface-visibility: hidden;
}

.hexagon.major:before {
    content: "";
    position: absolute;
    top: -89px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 160px solid transparent;
    border-right: 160px solid transparent;
    border-bottom: 90px solid #f04e25;
    -webkit-transition: border-bottom-color 0.3s ease-out;
    transition: border-bottom-color 0.3s ease-out;

}
.hexagon.major:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -89px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 160px solid transparent;
    border-right: 160px solid transparent;
    border-top: 90px solid #f04e25;
    -webkit-transition: border-top-color 0.3s ease-out;
    transition: border-top-color 0.3s ease-out;
}
.hexagon.major img.fake {
    position: absolute;
    z-index: 4;
    top:-89px;
    left:0;
    opacity: 0;
    filter:alpha(opacity=00);
    width:100%;
}

.hexagon.major .text {
    font-size: 20px;
    font-family: 'Dosis', sans-serif;
    line-height: 34px;
}
.hexagon.major .text img {
    display: block;
    margin: 0 auto 10px auto;
    max-width: 50%;

}
.hexagon.major .text span {
    color: #232323;
    font-size: 13px;
    text-transform: none;
    display: block;
    font-family: 'Didact Gothic', sans-serif;
}

.hexagon.major.hovered {
    background: #f58569;

}
.hexagon.major.hovered:before{
    border-bottom-color:#f58569;
}
.hexagon.major.hovered:after {
    border-top-color:#f58569;

}


/*========================  GRAY COLOR  =======================*/


.hexagon.light-gray {
    background-color: #ababab;
}
.hexagon.light-gray:before {
    border-bottom-color: #ababab;

}
.hexagon.light-gray:after{
    border-top-color: #ababab;

}
.hexagon.light-gray.hovered {
    background-color:#c4c4c4;
}
.hexagon.light-gray.hovered:before {
    border-bottom-color:#c4c4c4;
}
.hexagon.light-gray.hovered:after {
    border-top-color:#c4c4c4;
}



.hexagon.middle-gray {
    background-color: #959595;

}
.hexagon.middle-gray:before {
    border-bottom-color: #959595;

}
.hexagon.middle-gray:after{
    border-top-color: #959595;
}

.hexagon.middle-gray.hovered {
    background-color: #b5b5b5;
}
.hexagon.middle-gray.hovered:before {
    border-bottom-color: #b5b5b5;
}
.hexagon.middle-gray.hovered:after{
    border-top-color: #b5b5b5;
}



.hexagon.dark-gray {
    background-color: #838383;
}

.hexagon.dark-gray:before {
    border-bottom-color: #838383;
}

.hexagon.dark-gray:after {
    border-top-color: #838383;
}


.hexagon.dark-gray.hovered {
    background-color: #a8a8a8;
}

.hexagon.dark-gray.hovered:before {
    border-bottom-color: #a8a8a8;
}

.hexagon.dark-gray.hovered:after {
    border-top-color: #a8a8a8;
}

/*========================  BLUE COLOR  =======================*/


.hexagon.light-blue {
    background-color: #56dae2;

}
.hexagon.light-blue:before {
    border-bottom-color: #56dae2;

}
.hexagon.light-blue:after{
    border-top-color: #56dae2;
}
.hexagon.light-blue.hovered {
    background-color:#84e4ea;

}
.hexagon.light-blue.hovered:before {
    border-bottom-color:#84e4ea;
}
.hexagon.light-blue.hovered:after {
    border-top-color:#84e4ea;
}



.hexagon.middle-blue {
    background-color: #3dc1c9;
}
.hexagon.middle-blue:before {
    border-bottom-color: #3dc1c9;
}
.hexagon.middle-blue:after{
    border-top-color: #3dc1c9;
}

.hexagon.middle-blue.hovered {
    background-color: #75d3d9;
}
.hexagon.middle-blue.hovered:before {
    border-bottom-color: #75d3d9;
}
.hexagon.middle-blue.hovered:after{
    border-top-color: #75d3d9;
}



.hexagon.dark-blue {
    background-color: #31aab1;
}

.hexagon.dark-blue:before {
    border-bottom-color: #31aab1;
}

.hexagon.dark-blue:after {
    border-top-color: #31aab1;
}


.hexagon.dark-blue.hovered {
    background-color: #6ec3c8;
}

.hexagon.dark-blue.hovered:before {
    border-bottom-color: #6ec3c8;
}

.hexagon.dark-blue.hovered:after {
    border-top-color: #6ec3c8;
}


/*========================  RED COLOR  =======================*/


.hexagon.light-red {
    background-color: #ff5057;

}
.hexagon.light-red:before {
    border-bottom-color: #ff5057;
}
.hexagon.light-red:after{
    border-top-color: #ff5057;
}
.hexagon.light-red.hovered {
    background-color:#ff888d;
}
.hexagon.light-red.hovered:before {
    border-bottom-color:#ff888d;
}
.hexagon.light-red.hovered:after {
    border-top-color:#ff888d;
}



.hexagon.middle-red {
    background-color: #ec2028;

}
.hexagon.middle-red:before {
    border-bottom-color: #ec2028;
}
.hexagon.middle-red:after{
    border-top-color: #ec2028;

}

.hexagon.middle-red.hovered {
    background-color: #ff5b62;
}
.hexagon.middle-red.hovered:before {
    border-bottom-color: #ff5b62;
}
.hexagon.middle-red.hovered:after{
    border-top-color: #ff5b62;
}



.hexagon.dark-red {
    background-color: #d5171f;

}

.hexagon.dark-red:before {
    border-bottom-color: #d5171f;

}

.hexagon.dark-red:after {
    border-top-color: #d5171f;

}


.hexagon.dark-red.hovered {
    background-color: #e25c62;
}

.hexagon.dark-red.hovered:before {
    border-bottom-color: #e25c62;
}

.hexagon.dark-red.hovered:after {
    border-top-color: #e25c62;
}


/* ===================================================================================================

                                    HEXAGONS GRIDS

=================================================================================================== */


/* ==========================================================================
HOME PAGE GRID
========================================================================== */

.home-grid {
    position: relative;
    height:1800px;
}



/*========================  GRAY GROUP  =======================*/

.gray-group header{
    position: absolute;
    right:0;
    top:881px;
    width: 286px;
}
.gray-group header h2 {
    font-family: 'Dosis', sans-serif;
    font-size: 28px;
    color: #515757;
    font-weight: 500;
    text-transform: uppercase;
}

.gray-group header p {
    font-size: 13px;
    color:#515757;
    line-height:21px;
}
.gray-group .hexagon {
    position: absolute;
}

.gray-group .hexagon:nth-child(1){
    top:527px;
    right:214px
}
.gray-group .hexagon:nth-child(2){
    top:649px;
    right:0px
}
.gray-group .hexagon:nth-child(3){
    top:706px;
    right:321px
}
.gray-group .hexagon:nth-child(4){
    top:826px;
    right:535px
}
.gray-group .hexagon:nth-child(5){
    top:947px;
    right:321px
}

.gray-group .hexagon:nth-child(6){
    top:1067px;
    right:107px
}
.gray-group .hexagon:nth-child(7){
    top:826px;
    right:749px
}
.gray-group .hexagon:nth-child(8){
    top:1247px;
    right:0px;

}


/*========================  blue GROUP  =======================*/

.blue-group header{
    position: absolute;
    left:0;
    top: 362px;
    width: 286px;
}
.blue-group header h2 {
    font-family: 'Dosis', sans-serif;
    font-size: 28px;
    color: #3dc1c9;
    font-weight: 500;
    text-transform: uppercase;
}

.blue-group header p {
    font-size: 13px;
    color:#515757;
    line-height:21px;
}
.blue-group .hexagon {
    position: absolute;
}

.blue-group .hexagon:nth-child(1){
    top: 168px;
    right: 856px;
}
.blue-group .hexagon:nth-child(2){
    top: 348px;
    right: 750px;
}
.blue-group .hexagon:nth-child(3){
    top: 528px;
    right: 856px;
}
.blue-group .hexagon:nth-child(4){
    top: 646px;
    right: 642px;
}
.blue-group .hexagon:nth-child(5){
    top: 226px;
    left: 531px;
}

.blue-group .hexagon:nth-child(6){
    top: 406px;
    left: 638px;
}
.blue-group .hexagon:nth-child(7){
    top: 646px;
    right: 1069px;
}
.blue-group .hexagon:nth-child(8){
    top: 46px;
    right: 642px;
}


/*========================  red GROUP  =======================*/

.red-group header{
    position: absolute;
    left:0;
    top: 1409px;
    width: 286px;
}
.red-group header h2 {
    font-family: 'Dosis', sans-serif;
    font-size: 28px;
    color: #ec2028;
    font-weight: 500;
    text-transform: uppercase;
}

.red-group header p {
    font-size: 13px;
    color:#515757;
    line-height:21px;
}
.red-group .hexagon {
    position: absolute;
}

.red-group .hexagon:nth-child(1){
    top: 1128px;
    right: 1069px;
}
.red-group .hexagon:nth-child(2){
    top: 1007px;
    right: 855px;
}
.red-group .hexagon:nth-child(3){
    top: 1186px;
    right: 747px;
}
.red-group .hexagon:nth-child(4){
    top: 1426px;
    right: 747px;
}
.red-group .hexagon:nth-child(5){
    top: 1306px;
    right: 533px;
}

.red-group .hexagon:nth-child(6){
    top: 1126px;
    right: 426px;
}
.red-group .hexagon:nth-child(7){
    top: 1306px;
    right: 319px;
}
.red-group .hexagon:nth-child(8){
    top: 1487px;
    right: 214px;

}

/* ==========================================================================
   SUBPAGE GRID
  ========================================================================== */

.subpage-grid {
    width: 100%;
    height: 1120px;
    clear: both;
    position: relative;
    top:20px;
}
.subpage-grid  .hexagon-pic {
    position: absolute;
    z-index: 1;
    opacity: 0;
}
.subpage-grid .hexagon {
    position: absolute;
    width: 190px;
    height: 110px;
    float: left;
    margin-top: 60px;
    opacity: 0;
    z-index: 2;
}

.subpage-grid .hexagon:before {
    content: "";
    position: absolute;
    top: -53px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 95px solid transparent;
    border-right: 95px solid transparent;
    border-bottom-width: 54px;

}
.subpage-grid .hexagon:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -53px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 95px solid transparent;
    border-right: 95px solid transparent;
    border-top-width: 54px;
}
.subpage-grid .hexagon .icon {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 70%;
}
.subpage-grid .hexagon img.fake {
    position: absolute;
    z-index: 4;
    top:-53px;
    left:0;
    opacity: 0;
    filter:alpha(opacity=00);
    width:100%;
}

.subpage-grid .hexagon .text {
    position: absolute;
    top:0;
    z-index: 3;
    color: #fff;
    text-align: center;
    width: 100%;
    height: 100%;
    display: table;
    font-family: 'Dosis', sans-serif;
    font-size: 16px;
    font-weight: 500;
}
.subpage-grid .hexagon .text .table-cell {
    vertical-align: middle;
    text-transform: uppercase;
}

.subpage-grid  .hexagon:nth-child(1){
    top: 0px;
    left: 0px;
    right: auto;
}
.subpage-grid  .hexagon:nth-child(2){
    top: 0px;
    left: 380px;
    right: auto;
}
.subpage-grid  .hexagon:nth-child(3){
    top: 272px;
    left: 96px;
    right: auto;
}
.subpage-grid  .hexagon:nth-child(4){
    top: 273px;
    left: 476px;
    right: auto;
}
.subpage-grid  .hexagon:nth-child(5){
    top: 490px;
    left: 476px;
    right: auto;
}
.subpage-grid  .hexagon:nth-child(6){
    top: 596px;
    left: 97px;
    right: auto;
}
.subpage-grid  .hexagon:nth-child(7){
    top: 812px;
    left: 97px;
    right: auto;
}
.subpage-grid .hexagon:nth-child(8){
    top: 867px;
    left: 382px;
    right: auto;

}

.subpage-grid  .hexagon-pic:nth-child(9){
    top: 117px;
    left: 190px;
    right: auto;
}
.subpage-grid  .hexagon-pic:nth-child(10){
    top: 389px;
    left: 286px;
    right: auto;
}
.subpage-grid  .hexagon-pic:nth-child(11){
    top: 442px;
    left: 2px;
    right: auto;
}
.subpage-grid  .hexagon-pic:nth-child(12){
    top: 713px;
    left: 288px;
    right: auto;
}

/* ==========================================================================
NEWS GRID
========================================================================== */


.news-grid {
    position: relative;
    height: 2500px;
    overflow: hidden;
}

.news-grid .hexagon-news:nth-child(1){
    top:113px;
    left:478px;
}
.news-grid .hexagon-news:nth-child(2){
    top: 388px;
    left: 318px;
}
.news-grid .hexagon-news:nth-child(3){
    top: 204px;
    left: 0px;
}
.news-grid .hexagon-news:nth-child(4){
    top: 569px;
    left: 641px;
}
.news-grid .hexagon-news:nth-child(5){
    top: 384px;
    left: 962px;
}
.news-grid .hexagon-news:nth-child(6){
    top: 569px;
    left: 0;
}
.news-grid .hexagon-news:nth-child(7){
    top: 753px;
    left: 962px;

}
.news-grid .hexagon-news:nth-child(8){
    top: 844px;
    left: 160px;

}
.news-grid .hexagon-news:nth-child(9){
    top: 845px;
    left: 482px;

}
.news-grid .hexagon-news:nth-child(10){
    top: 1027px;
    left: 803px;

}
.news-grid .hexagon-news:nth-child(11){
    top: 1303px;
    left: 964px;

}
.news-grid .hexagon-news:nth-child(12){
    top: 1119px;
    left: 0px;

}
.news-grid .hexagon-news:nth-child(13){
    top: 1302px;
    left: 321px;


}
.news-grid .hexagon-news:nth-child(14){
    top: 1579px;
    left: 161px;
}

.news-grid .hexagon-news:nth-child(15) {
    top: 1761px;
    left: 482px;
}
.news-grid .hexagon-news:nth-child(16) {
	top: 1579px;
	left: 643px;
}

.news-grid .hexagon-news:nth-child(16) {
    top: 1485px;
    left: 642px;
}

.news-grid .hexagon-news:nth-child(17) {
    top: 1854px;
    left: 0;
}

.news-grid .hexagon-news:nth-child(18) {
    top: 2036px;
    left: 322px;
}

.news-grid .hexagon-news:nth-child(19) {
    top: 1943px;
    left: 803px;
}

.news-grid .hexagon-news:nth-child(20) {
    top: 1667px;
    left: 963px;
}

/* --------------------------------------------------------------------------------------------- SMALL DESKTOP */
/* --------------------------------------------------------------------------------------------- SMALL DESKTOP */
/* --------------------------------------------------------------------------------------------- SMALL DESKTOP */
/* --------------------------------------------------------------------------------------------- SMALL DESKTOP */
/* --------------------------------------------------------------------------------------------- SMALL DESKTOP */
/* --------------------------------------------------------------------------------------------- SMALL DESKTOP */


@media (max-width: 1340px) {


    /* ===================================================================================================

                                         HEXAGONS/GRIDS

     =================================================================================================== */


    /* ==========================================================================
    HEXAGON STANDARD TEXT + ICO
    ========================================================================== */

    .hexagon {
        width: 136px;
        height: 77px;
        position: relative;
        float: left;
        margin-top: 60px;
    }

    .hexagon:before {
        content: "";
        position: absolute;
        top: -37px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 68px solid transparent;
        border-right: 68px solid transparent;
        border-bottom: 38px solid transparent;

    }
    .hexagon:after {
        content: "";
        position: absolute;
        z-index: 1;
        bottom: -36px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 68px solid transparent;
        border-right: 68px solid transparent;
        border-top: 37px solid transparent;
    }

    .hexagon .icon {
        position: absolute;
        width: 100%;
        left: 0;
        height: 100%;
        z-index: 2;
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 80%;
    }

    .hexagon .text {
        font-size: 12px;

    }
    .hexagon .text .table-cell {
        padding:0 15px;
    }

    .hexagon img.fake  {
        top: -41px;
    }

    /*========================  HEXAGON MAJOR  =======================*/

    .hexagon.major {
        width: 168px;
        height: 96px;
        background: #f04e25;
        position: absolute;
        right:0;
        top:65px;
        float: left;
        margin-top: 60px;

    }

    .hexagon.major:before {
        content: "";
        position: absolute;
        top: -49px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 84px solid transparent;
        border-right: 84px solid transparent;
        border-bottom: 50px solid #f04e25;


    }
    .hexagon.major:after {
        content: "";
        position: absolute;
        z-index: 1;
        bottom: -49px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 84px solid transparent;
        border-right: 84px solid transparent;
        border-top: 50px solid #f04e25;

    }

    .hexagon.major .text {
        font-size: 12px;
        line-height: 16px;
    }

    .hexagon.major .text span {
        font-size: 9px;
    }

    .hexagon.major .text img {
        width:25%;
        margin-bottom: 3px;
    }

    /* ==========================================================================
    HOME PAGE GRID
    ========================================================================== */



    .home .main-content .inner {
        overflow: hidden;
    }

    .home-grid {
        width: 725px;
        margin: 0 auto;
        -webkit-font-smoothing: antialiased;

        -webkit-transform: scale(1.2)  translate(20px,100px);
        -ms-transform: scale(1.2)  translate(20px,100px);
        transform: scale(1.2)  translate(20px,100px);

        height: 1480px;
        overflow: hidden;
    }

    /*========================  GRAY GROUP  =======================*/

    .gray-group header{
        position: absolute;
        right:auto;
        left:507px;
        top:635px;
        width: 194px;
    }
    .gray-group header h2 {
        font-family: 'Dosis', sans-serif;
        font-size: 18px;
        color: #515757;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .gray-group header p {
        font-size: 11px;
        color:#515757;
        line-height:16px;
        margin-top: 5px
    }

    .gray-group .hexagon {
        position: absolute;
    }

    .gray-group .hexagon:nth-child(1){
        top: 390px;
        left: 405px;
        right: auto;
    }
    .gray-group .hexagon:nth-child(2){
        top: 466px;
        left: 541px;
        right: auto;
    }
    .gray-group .hexagon:nth-child(3){
        top: 502px;
        left: 337px;
        right: auto;
    }
    .gray-group .hexagon:nth-child(4){
        top: 579px;
        left: 201px;
        right: auto;
    }
    .gray-group .hexagon:nth-child(5){
        top: 652px;
        left: 337px;
        right: auto;
    }

    .gray-group .hexagon:nth-child(6){
        top: 728px;
        left: 472px;
        right: auto;

    }
    .gray-group .hexagon:nth-child(7){
        top: 579px;
        left: 65px;
        right: auto;
    }
    .gray-group .hexagon:nth-child(8){
        top: 840px;
        left: 540px;
        right: auto;

    }


    /*========================  blue GROUP  =======================*/

    .blue-group header{
        position: absolute;
        left:0;
        top: 221px;
        width: 184px;
    }
    .blue-group header h2 {
        font-family: 'Dosis', sans-serif;
        font-size: 18px;
        color: #3dc1c9;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .blue-group header p {
        font-size: 11px;
        color:#515757;
        line-height:16px;
        margin-top: 5px;
    }
    .blue-group .hexagon {
        position: absolute;
    }

    .blue-group .hexagon:nth-child(1){
        top: 90px;
        left: 133px;
        right:auto;
    }
    .blue-group .hexagon:nth-child(2){
        top: 202px;
        left: 201px;
        right: auto;
    }
    .blue-group .hexagon:nth-child(3){
        top: 314px;
        left: 133px;
        right: auto;
    }
    .blue-group .hexagon:nth-child(4){
        top: 390px;
        left: 270px;
        right: auto;
    }
    .blue-group .hexagon:nth-child(5){
        top: 127px;
        left: 337px;
        right: auto;
    }

    .blue-group .hexagon:nth-child(6){
        top: 240px;
        left: 404px;
        right: auto;
    }
    .blue-group .hexagon:nth-child(7){
        top: 390px;
        left: 0px;
        right: auto;
    }
    .blue-group .hexagon:nth-child(8){
        top: 15px;
        left: 268px;
        right: auto;
    }


    /*========================  red GROUP  =======================*/

    .red-group header{
        position: absolute;
        left:0;
        top: 1030px;
        width: 170px;
    }
    .red-group header h2 {

        font-family: 'Dosis', sans-serif;
        font-size: 18px;
        color: #ec2028;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .red-group header p {
        font-size: 11px;
        color:#515757;
        line-height:16px;
        margin-top: 5px;
    }
    .red-group .hexagon {
        position: absolute;
    }

    .red-group .hexagon:nth-child(1){
        top: 842px;
        left: -4px;
        right: auto;
    }
    .red-group .hexagon:nth-child(2){
        top: 766px;
        left: 132px;
        right: auto;
    }
    .red-group .hexagon:nth-child(3){
        top: 878px;
        left: 201px;
        right: auto;
    }
    .red-group .hexagon:nth-child(4){
        top: 1028px;
        left: 201px;
        right: auto;
    }
    .red-group .hexagon:nth-child(5){
        top: 953px;
        left: 337px;
        right: auto;
    }

    .red-group .hexagon:nth-child(6){
        top: 840px;
        left: 404px;
        right: auto;
    }
    .red-group .hexagon:nth-child(7){
        top: 951px;
        left: 473px;
        right: auto;
    }
    .red-group .hexagon:nth-child(8){
        top: 1063px;
        left: 541px;
        right: auto;

    }

    /* ==========================================================================
NEWS GRID
========================================================================== */


    .news-grid {
        position: relative;
        height:3150px;
    }

    .news-grid .hexagon-news:nth-child(1){
        top:113px;
        left:478px;
    }
    .news-grid .hexagon-news:nth-child(2){
        top: 388px;
        left: 320px;
    }
    .news-grid .hexagon-news:nth-child(3){
        top: 204px;
        left: 0px;
    }
    .news-grid .hexagon-news:nth-child(4){
        top: 569px;
        left: 641px;
    }
    .news-grid .hexagon-news:nth-child(5){
        top: 1487px;
        left: 643px;
    }
    .news-grid .hexagon-news:nth-child(6){
        top: 569px;
        left: 0;
    }
    .news-grid .hexagon-news:nth-child(7){
        top: 1853px;
        left: 0;

    }
    .news-grid .hexagon-news:nth-child(8){
        top: 844px;
        left: 160px;

    }
    .news-grid .hexagon-news:nth-child(9){
        top: 844px;
        left: 481px;

    }
    .news-grid .hexagon-news:nth-child(10){
        top: 1121px;
        left: 643px;

    }
    .news-grid .hexagon-news:nth-child(11){
        top: 1761px;
        left: 482px;

    }
    .news-grid .hexagon-news:nth-child(12){
        top: 1119px;
        left: 0px;

    }
    .news-grid .hexagon-news:nth-child(13){
        top: 1302px;
        left: 321px;


    }
    .news-grid .hexagon-news:nth-child(14){
        top: 1579px;
        left: 161px;

    }
	.news-grid .hexagon-news:nth-child(15) {
		top: 2226px;
		left: 0;
	}
	.news-grid .hexagon-news:nth-child(16) {
		top: 2038px;
		left: 642px;
	}
	.news-grid .hexagon-news:nth-child(17) {
		top: 2408px;
		left: 322px;
	}
	.news-grid .hexagon-news:nth-child(19) {
		top: 2590px;
		left: 643px;
	}
	.news-grid .hexagon-news:nth-child(20) {
		top: 2685px;
		left: 162px;
	}



}


/* --------------------------------------------------------------------------------------------- TABLET */
/* --------------------------------------------------------------------------------------------- TABLET */
/* --------------------------------------------------------------------------------------------- TABLET */
/* --------------------------------------------------------------------------------------------- TABLET */
/* --------------------------------------------------------------------------------------------- TABLET */

@media (max-width: 980px) {




    /* ===================================================================================================

                                      HEXAGONS/GRIDS

   =================================================================================================== */

    /* ==========================================================================
    HOME PAGE GRID
    ========================================================================== */



    .home .main-content .inner {
        overflow: visible;
    }

    .home-grid {
        width: 680px;
        margin: 0 auto;

        -webkit-transform: none;
        -ms-transform: none;
        transform: none;

        height: 1000px;
        overflow: visible;
    }

    .hexagon.major {
        right:0;
        top:-60px;
        z-index: 1;
    }

    /* ==========================================================================
   SUBPAGE GRID
  ========================================================================== */

    .subpage-grid {
        width: 100%;
        height: 720px;
        clear: both;
        position: relative;
        top:20px;
    }
    .subpage-grid  .hexagon-pic {
        position: absolute;
        z-index: 1;
    }
    .hexagon-pic {
        width: 136px;
        height: 150px;
        position: relative;
        float: left;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .hexagon-pic div {
        position: absolute;
        display: block;
        border-left: 69px solid #fff;
        border-right: 69px solid #fff;
        width: 1px;
        left:-1px;
    }

    .hexagon-pic .top {
        top: -1px;
        border-bottom: 37px solid transparent;
    }

    .hexagon-pic .bottom{
        bottom: -1px;
        border-top: 37px solid transparent;
    }

    .subpage-grid .hexagon {
        position: absolute;
        width: 136px;
        height: 76px;
        float: left;
        margin-top: 37px;
        z-index: 2;
    }
    .subpage-grid .hexagon .text .table-cell {
        font-size: 12px;
    }
    .subpage-grid .hexagon:before {
        content: "";
        position: absolute;
        top: -36px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 68px solid transparent;
        border-right: 68px solid transparent;
        border-bottom-width: 37px;

    }
    .subpage-grid .hexagon:after {
        content: "";
        position: absolute;
        z-index: 1;
        bottom: -36px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 68px solid transparent;
        border-right: 68px solid transparent;
        border-top-width: 37px;
    }
    .subpage-grid .hexagon .icon {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 70%;
    }
    .subpage-grid .hexagon img.fake {
        position: absolute;
        z-index: 4;
        top:-36px;
        left:0;
        opacity: 0;
        filter:alpha(opacity=00);
        width:100%;
    }

    .subpage-grid .hexagon .text {
        position: absolute;
        top:0;
        z-index: 3;
        color: #fff;
        text-align: center;
        width: 100%;
        height: 100%;
        display: table;
        font-family: 'Dosis', sans-serif;
        font-size: 16px;
        font-weight: 500;
    }
    .subpage-grid .hexagon .text .table-cell {
        vertical-align: middle;
        text-transform: uppercase;
    }

    .subpage-grid  .hexagon:nth-child(1){
        top: 0px;
        left: 0px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(2){
        top: 0px;
        left: 271px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(3){
        top: 190px;
        left: 68px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(4){
        top: 193px;
        left: 341px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(5){
        top: 341px;
        left: 341px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(6){
        top: 418px;
        left: 68px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(7){
        top: 607px;
        left: 137px;
        right: auto;
    }
    .subpage-grid .hexagon:nth-child(8){
        top: 573px;
        left: 340px;
        right: auto;

    }

    .subpage-grid  .hexagon-pic:nth-child(9){
        top: 77px;
        left: 135px;
        right: auto;
    }
    .subpage-grid  .hexagon-pic:nth-child(10){
        top: 268px;
        left: 205px;
        right: auto;
    }
    .subpage-grid  .hexagon-pic:nth-child(11){
        top: 304px;
        left: 0px;
        right: auto;
    }
    .subpage-grid  .hexagon-pic:nth-child(12){
        top: 494px;
        left: 204px;
        right: auto;
    }

    /* ==========================================================================
NEWS GRID
========================================================================== */

    .hexagon-news {
        width:273px;
        height: 315px;
    }

    .hexagon-news.pic {
        width:273px;
        height: 315px;
    }

    .hexagon-news.pic .top {
        top: -1px;
        border-bottom: 80px solid transparent;
    }
    .hexagon-news.pic .bottom {
        bottom: -1px;
        border-top: 80px solid transparent;
    }
	.hexagon-news.pic div {
		position: absolute;
		display: block;
		border-left: 186px solid #fff;
		border-right: 186px solid #fff;
		width: 1px;
		left: -1px;
	}
    .news-grid {
        position: relative;
        height:auto;
		padding: 50px 0;
		text-align: center;
    }

    .news-grid .hexagon-news {
		width: 370px;
		height: 415px;
		position: relative;
		display: inline-block;
		top: auto !important;
		left: auto !important;
		margin: 0;
		vertical-align: top;
	}


}


/* --------------------------------------------------------------------------------------------- MOBILE */
/* --------------------------------------------------------------------------------------------- MOBILE */
/* --------------------------------------------------------------------------------------------- MOBILE */
/* --------------------------------------------------------------------------------------------- MOBILE */
/* --------------------------------------------------------------------------------------------- MOBILE */

@media (max-width: 767px) {


    /* ===================================================================================================

                                         HEXAGONS/GRIDS

     =================================================================================================== */


    /* ==========================================================================
    HEXAGON STANDARD TEXT + ICO
    ========================================================================== */

    .hexagon {
        width: 98px;
        height: 54px;
        position: relative;
        float: left;
        margin-top: 140px;
    }

    .hexagon:before {
        content: "";
        position: absolute;
        top: -26px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 49px solid transparent;
        border-right: 49px solid transparent;
        border-bottom: 27px solid transparent;

    }
    .hexagon:after {
        content: "";
        position: absolute;
        z-index: 1;
        bottom: -26px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 49px solid transparent;
        border-right: 49px solid transparent;
        border-top: 27px solid transparent;
    }

    .hexagon .icon {
        position: absolute;
        width: 100%;
        left: 0;
        height: 100%;
        z-index: 2;
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 80%;
    }

    .hexagon .text {
        font-size: 11px;
        line-height: 16px;

    }
    .hexagon .text .table-cell {
        padding:0 15px;
    }

    .hexagon img.fake  {
        top: -27px;
    }

    /*========================  HEXAGON MAJOR  =======================*/

    .hexagon.major:after {
        bottom: -50px;
    }


    /* ==========================================================================
    HOME PAGE GRID
    ========================================================================== */


    .home-grid {
        width: 296px;
        height: auto;
        overflow: visible;
        padding-top: 140px;
    }

    .blue-group,
    .red-group,
    .gray-group {
        position: relative;
        height: 540px;
    }
    /*========================  GRAY GROUP  =======================*/


    .gray-group header{
        position: relative;
        right:auto;
        left:0px;
        top:0px;
        width:100%;
    }

    .gray-group .hexagon {
        position: absolute;
    }

    .gray-group .hexagon:nth-child(1){
        top: 0px;
        left: 0px;
        right:auto;
    }
    .gray-group .hexagon:nth-child(2){
        top: 54px;
        left: 98px;
        right: auto;
    }
    .gray-group .hexagon:nth-child(3){
        top: 107px;
        left: 197px;
        right: auto;
    }
    .gray-group .hexagon:nth-child(4){
        top: -24px;
        left: 148px;
        right: auto;
    }
    .gray-group .hexagon:nth-child(5){
        top: 159px;
        left: 98px;
        right: auto;
    }

    .gray-group .hexagon:nth-child(6){
        top: 213px;
        left: 197px;
        right: auto;

    }
    .gray-group .hexagon:nth-child(7){
        top: 292px;
        left: 149px;
        right: auto;
    }
    .gray-group .hexagon:nth-child(8){
        top: 213px;
        left: 0px;
        right: auto;

    }


    /*========================  blue GROUP  =======================*/

    .blue-group header{
        position: relative;
        right:auto;
        left:0px;
        top:0px;
        width:100%;
    }

    .blue-group .hexagon {
        position: absolute;
    }

    .blue-group .hexagon:nth-child(1){
        top: 0px;
        left: 0;
        right:auto;
    }
    .blue-group .hexagon:nth-child(2){
        top: 79px;
        left: 49px;
        right: auto;
    }
    .blue-group .hexagon:nth-child(3){
        top: 158px;
        left: 0px;
        right: auto;
    }
    .blue-group .hexagon:nth-child(4){
        top: 211px;
        left: 98px;
        right: auto;
    }
    .blue-group .hexagon:nth-child(5){
        top: 26px;
        left: 146px;
        right: auto;
    }

    .blue-group .hexagon:nth-child(6){
        top: 105px;
        left: 195px;
        right: auto;

    }
    .blue-group .hexagon:nth-child(7){

        top: 264px;
        left: 0;
        right: auto;
    }
    .blue-group .hexagon:nth-child(8){
        top: 211px;
        left: 195px;
        right: auto;
    }


    /*========================  red GROUP  =======================*/

    .red-group header{
        position: relative;
        right:auto;
        left:0px;
        top:0px;
        width:100%;
    }

    .red-group .hexagon {
        position: absolute;
    }

    .red-group .hexagon:nth-child(1){
        top: 0px;
        left: 0;
        right:auto;
    }
    .red-group .hexagon:nth-child(2){
        top: 79px;
        left: 49px;
        right: auto;
    }
    .red-group .hexagon:nth-child(3){
        top: 158px;
        left: 0px;
        right: auto;
    }
    .red-group .hexagon:nth-child(4){
        top: 211px;
        left: 98px;
        right: auto;
    }
    .red-group .hexagon:nth-child(5){
        top: 26px;
        left: 146px;
        right: auto;
    }

    .red-group .hexagon:nth-child(6){
        top: 105px;
        left: 195px;
        right: auto;

    }
    .red-group .hexagon:nth-child(7){

        top: 264px;
        left: 0;
        right: auto;
    }
    .red-group .hexagon:nth-child(8){
        top: 211px;
        left: 195px;
        right: auto;
    }

    /* ==========================================================================
   SUBPAGE GRID
  ========================================================================== */

    .subpage-grid {
        width: 100%;
        height: 490px;
        clear: both;
        position: relative;
        top:0px;
    }
    .subpage-grid  .hexagon-pic {
        position: absolute;
        z-index: 1;
    }
    .hexagon-pic {
        width: 84px;
        height: 96px;
        position: relative;
        float: left;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .hexagon-pic div {
        position: absolute;
        display: block;
        border-left: 42px solid #fff;
        border-right: 43px solid #fff;
        width: 1px;
        left:-1px;
    }

    .hexagon-pic .top {
        top: -1px;
        border-bottom: 25px solid transparent;
    }

    .hexagon-pic .bottom{
        bottom: -1px;
        border-top: 25px solid transparent;
    }

    .subpage-grid .hexagon {
        position: absolute;
        width: 84px;
        height: 50px;
        float: left;
        margin-top: 37px;
        z-index: 2;
    }
    .subpage-grid .hexagon .text .table-cell {
        font-size: 12px;
    }
    .subpage-grid .hexagon:before {
        content: "";
        position: absolute;
        top: -24px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 42px solid transparent;
        border-right: 42px solid transparent;
        border-bottom-width: 25px;

    }
    .subpage-grid .hexagon:after {
        content: "";
        position: absolute;
        z-index: 1;
        bottom: -24px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 42px solid transparent;
        border-right: 42px solid transparent;
        border-top-width: 25px;
    }
    .subpage-grid .hexagon .icon {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 70%;
    }
    .subpage-grid .hexagon img.fake {
        position: absolute;
        z-index: 4;
        top:-36px;
        left:0;
        opacity: 0;
        filter:alpha(opacity=00);
        width:100%;
    }


    .subpage-grid .hexagon .text .table-cell {

        font-size: 10px;
    }

    .subpage-grid  .hexagon:nth-child(1){
        top: 0px;
        left: 0px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(2){
        top: 0px;
        left: 169px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(3){
        top: 122px;
        left: 43px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(4){
        top: 119px;
        left: 211px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(5){
        top: 217px;
        left: 211px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(6){
        top: 268px;
        left: 43px;
        right: auto;
    }
    .subpage-grid  .hexagon:nth-child(7){
        top: 391px;
        left: 84px;
        right: auto;
    }
    .subpage-grid .hexagon:nth-child(8){
        top: 367px;
        left: 210px;
        right: auto;

    }

    .subpage-grid  .hexagon-pic:nth-child(9){
        top: 63px;
        left: 85px;
        right: auto;
    }
    .subpage-grid  .hexagon-pic:nth-child(10){
        top: 182px;
        left: 127px;
        right: auto;
    }
    .subpage-grid  .hexagon-pic:nth-child(11){
        top: 209px;
        left: 0px;
        right: auto;
    }
    .subpage-grid  .hexagon-pic:nth-child(12){
        top: 331px;
        left: 126px;
        right: auto;
    }
    /* ==========================================================================
    NEWS GRID
    ========================================================================== */

    .news-grid {
        height: auto;
        padding: 30px 0;
    }
    .hexagon-news {
        position: relative;
        width:273px;
        height: 315px;
        left:0 !important;
        top:0 !important;
        margin: 0 auto;
		max-width: 100%;
    }
    .hexagon-news.gray,
    .hexagon-news.pic {
        display: none;
    }
}