.our-history {
    position: relative;
    top: 160px;
    height: 2008px;
    padding-bottom: 0;
}

@media all and (min-width: 0px) and (max-width: 640px) {
    .our-history {
        height: auto;
    }
}

@media (max-width: 768px) {
    .our-history {
        height: 2008px;
    }
}

@media all and (min-width: 769px) and (max-width: 1024px) {
    .our-history {
        height: 1737px;
    }
}

#main {
    width: 35%;
    height: 0;
    position: relative;
    padding-bottom: 35%;
    margin: auto;
}

/*------------History Landing starts--------------*/
#our-history #contentwrapper {
    overflow: hidden;
}

.history-main-wrapper .box {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #ee1c25;
}

.diamond {
    position: relative;
}

    .diamond.abs {
        position: absolute;
        height: 100%;
        width: 100%;
    }

.diamondText {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    text-align: center;
    position: absolute;
    width: 50%;
}

    .diamondText p {
        color: #f3f3f3;
        margin: 0;
        line-height: 1.2em;
    }

        .diamondText p.year {
            font-size: 1.8em;
            line-height: 1.15em;
        }

        .diamondText p.description {
            line-height: 1.15em;
        }

.history-main-wrapper .box .bgImage {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    width: 100%;
    height: 100%;
    background-size: cover !important;
}

.history-main-wrapper .box0 {
    transform: translate(-76%, -86%) rotate(45deg);
    -moz-transform: translate(-76%, -86%) rotate(45deg);
    -webkit-transform: translate(-76%, -86%) rotate(45deg);
    -o-transform:translate(-76%, -86%) rotate(45deg);
    -ms-transform: translate(-76%, -86%) rotate(45deg);
    height: 135%;
    width: 135%;
    background: #f3f5f6;
}

/*------------History Landing ends--------------*/
.box7 .diamondText p.year,
.box13 .diamondText p.year {
    color: #555;
}


/* DIV 1*/

.history-main-wrapper div.box1 {
    background: #ee1c25;
    height: 70%;
    transform: translate(-3%, -50%) rotate(45deg);
    -webkit-transform: translate(-3%, -50%) rotate(45deg);
    -o-transform: translate(-3%, -50%) rotate(45deg);
    -ms-transform: translate(-3%, -50%) rotate(45deg);
    -moz-transform: translate(-3%, -50%) rotate(45deg);
    width: 70%;
    color: #FFFFFF;
}

/* DIV 2*/
.history-main-wrapper div.box2 {
    height: 89%;
    transform: translate(83.5%, 6%) rotate(45deg);
    -webkit-transform: translate(83.5%, 6%) rotate(45deg);
    -o-transform: translate(83.5%, 6%) rotate(45deg);
    -ms-transform: translate(83.5%, 6%) rotate(45deg);
    -moz-transform: translate(83.5%, 6%) rotate(45deg);
    width: 89%;
    background: none;
}
/* DIV 3 */
.history-main-wrapper div.box3 {
    transform: translate(-67.5%, 6%) rotate(45deg);
    -webkit-transform: translate(-67.5%, 6%) rotate(45deg);
    -moz-transform: translate(-67.5%, 6%) rotate(45deg);
    -o-transform: translate(-67.5%, 6%) rotate(45deg);
    -ms-transform: translate(-67.5%, 6%) rotate(45deg);
    height: 89%;
    width: 89%;
    background: none;
}

/* DIV 4 */
.history-main-wrapper div.box4 {
    transform: translate(202%, 237%) rotate(45deg);
    -webkit-transform: translate(202%, 237%) rotate(45deg);
    -moz-transform: translate(202%, 237%) rotate(45deg);
    -o-transform: translate(202%, 237%) rotate(45deg);
    -ms-transform: translate(202%, 237%) rotate(45deg);
    height: 40%;
    width: 40%;
    background: none;
}

/* DIV 5 */
.history-main-wrapper div.box5 {
    transform: translate(22.3%, 58%) rotate(45deg);
    -webkit-transform: translate(22.3%, 58%) rotate(45deg);
    -moz-transform: translate(22.3%, 58%) rotate(45deg);
    -o-transform: translate(22.3%, 58%) rotate(45deg);
    -ms-transform: translate(22.3%, 58%) rotate(45deg);
    height: 135%;
    width: 135%;
}

/* DIV 6 */
.history-main-wrapper div.box6 {
    transform: translate(-194%, 136.5%) rotate(45deg);
    -webkit-transform: translate(-194%, 136.5%) rotate(45deg);
    -moz-transform: translate(-194%, 136.5%) rotate(45deg);
    -ms-transform: translate(-194%, 136.5%) rotate(45deg);
    -o-transform: translate(-194%, 136.5%) rotate(45deg);
    height: 62%;
    width: 62%;
    background: #0b386a;
}

/* DIV 7 */
.history-main-wrapper div.box7 {
    transform: translate(120%, 295%) rotate(45deg);
    -ms-transform: translate(120%, 295%) rotate(45deg);
    -webkit-transform: translate(120%, 295%) rotate(45deg);
    -o-transform: translate(120%, 295%) rotate(45deg);
    -moz-transform: translate(120%, 295%) rotate(45deg);
    height: 61%;
    width: 61%;
    background: #f3f5f6;
}

/* DIV 8 */
.history-main-wrapper div.box8 {
    transform: translate(-50%, 131%) rotate(45deg);
    -ms-transform: translate(-50%, 131%) rotate(45deg);
    -o-transform: translate(-50%, 131%) rotate(45deg);
    -moz-transform: translate(-50%, 131%) rotate(45deg);
    -webkit-transform: translate(-50%, 131%) rotate(45deg);
    height: 135%;
    width: 135%;
}

/* DIV 9 */
.history-main-wrapper div.box9 {
    transform: translate(46%, 260%) rotate(45deg);
    -ms-transform: translate(46%, 260%) rotate(45deg);
    -moz-transform: translate(46%, 260%) rotate(45deg);
    -o-transform: translate(46%, 260%) rotate(45deg);
    -webkit-transform: translate(46%, 260%) rotate(45deg);
    height: 89%;
    width: 89%;
}

/* DIV 10 */
.history-main-wrapper div.box10 {
    transform: translate(-27.5%, 334%) rotate(45deg);
    -ms-transform: translate(-27.5%, 334%) rotate(45deg);
    -o-transform: translate(-27.5%, 334%) rotate(45deg);
    -webkit-transform: translate(-27.5%, 334%) rotate(45deg);
    -moz-transform: translate(-27.5%, 334%) rotate(45deg);
    height: 89%;
    width: 89%;
}

/* DIV 11 */
.history-main-wrapper div.box11 {
    transform: translate(206%, 717%) rotate(45deg);
    -webkit-transform: translate(206%, 717%) rotate(45deg);
    -moz-transform: translate(206%, 717%) rotate(45deg);
    -o-transform: translate(206%, 717%) rotate(45deg);
    -ms-transform: translate(206%, 717%) rotate(45deg);
    height: 40%;
    width: 40%;
    background: #0b386a;
}

/* DIV 12 */
.history-main-wrapper div.box12 {
    transform: translate(85.5%, 368%) rotate(45deg);
    -ms-transform: translate(85.5%, 368%) rotate(45deg);
    -moz-transform: translate(85.5%, 368%) rotate(45deg);
    -webkit-transform: translate(85.5%, 368%) rotate(45deg);
    -o-transform: translate(85.5%, 368%) rotate(45deg);
    height: 89%;
    width: 89%;
}

/* DIV 13 */
.history-main-wrapper div.box13 {
    transform: translate(12%, 442%) rotate(45deg);
    -moz-transform: translate(12%, 442%) rotate(45deg);
    -webkit-transform: translate(12%, 442%) rotate(45deg);
    -o-transform: translate(12%, 442%) rotate(45deg);
    -ms-transform: translate(12%, 442%) rotate(45deg);
    height: 89%;
    width: 89%;
    background: #f3f5f6;
}

/* DIV 14 */
.history-main-wrapper div.box14 {
    transform: translate(-100.5%, 408%) rotate(45deg);
    -ms-transform: translate(-100.5%, 408%) rotate(45deg);
    -moz-transform: translate(-100.5%, 408%) rotate(45deg);
    -o-transform: translate(-100.5%, 408%) rotate(45deg);
    -webkit-transform: translate(-100.5%, 408%) rotate(45deg);
    height: 89%;
    width: 89%;
}

/* DIV 15 */
.history-main-wrapper div.box15 {
    transform: translate(85.5%, 516%) rotate(45deg);
    -ms-transform: translate(85.5%, 516%) rotate(45deg);
    -webkit-transform: translate(85.5%, 516%) rotate(45deg);
    -o-transform: translate(85.5%, 516%) rotate(45deg);
    -moz-transform: translate(85.5%, 516%) rotate(45deg);
    height: 89%;
    width: 89%;
}


/* DIV 16 */
.history-main-wrapper div.box16 {
    transform: translate(-23.5%, 347%) rotate(45deg);
    -moz-transform: translate(-23.5%, 347%) rotate(45deg);
    -o-transform: translate(-23.5%, 347%) rotate(45deg);
    -ms-transform: translate(-23.5%, 347%) rotate(45deg);
    -webkit-transform: translate(-23.5%, 347%) rotate(45deg);
    height: 135%;
    width: 135%;
    background: #0b386a;
}

/* DIV 17 */
.history-main-wrapper div.box17 {
    transform: translate(49%, 420%) rotate(45deg);
    -webkit-transform: translate(49%, 420%) rotate(45deg);
    -o-transform: translate(49%, 420%) rotate(45deg);
    -moz-transform: translate(49%, 420%) rotate(45deg);
    -ms-transform: translate(49%, 420%) rotate(45deg);
    height: 135%;
    width: 135%;
    background: #f3f5f6;
}

/*--------- iPad Landscape and Desktops ---------*/

@media all and (max-width: 1060px) {
    .diamondText p.year {
        font-size: 1.2em;
    }
}

@media all and (max-width: 1145px) {
    .box0 {
        transform: translate(47%, -94%) rotate(45deg);
        -webkit-transform: translate(47%, -94%) rotate(45deg);
        -o-transform: translate(47%, -94%) rotate(45deg);
        -ms-transform: translate(47%, -94%) rotate(45deg);
        -moz-transform: translate(47%, -94%) rotate(45deg);
        height: 175%;
        width: 175%;
    }

    .history-2006 .diamondText p.year {
        font-size: 2.5em;
    }
}

@media all and (max-width: 991px) {
    .history-main-wrapper .box:first-child, .history-main-wrapper .box:last-child, .history-main-wrapper div.box4 {
        display: none;
    }

    .history-main-wrapper div.box1 {
        transform: translate(0%, -68%) rotate(45deg);
    }
    /*box1*/
    .history-main-wrapper div.box2 {
        transform: translate(-73.5%, 6%) rotate(45deg);
        -webkit-transform: translate(-73.5%, 6%) rotate(45deg);
        -o-transform: translate(-73.5%, 6%) rotate(45deg);
        -ms-transform: translate(-73.5%, 6%) rotate(45deg);
        -moz-transform: translate(-73.5%, 6%) rotate(45deg);
    }
    /*box2*/
    .history-main-wrapper div.box3 {
        transform: translate(73.5%, 6%) rotate(45deg);
        -webkit-transform: translate(73.5%, 6%) rotate(45deg);
        -o-transform: translate(73.5%, 6%) rotate(45deg);
        -ms-transform: translate(73.5%, 6%) rotate(45deg);
        -moz-transform: translate(73.5%, 6%) rotate(45deg);
    }

    /*box4*/
    .history-main-wrapper div.box5 {
        transform: translate(0, 81%) rotate(45deg);
        -webkit-transform: translate(0, 81%) rotate(45deg);
        -o-transform: translate(0, 81%) rotate(45deg);
        -ms-transform: translate(0, 81%) rotate(45deg);
        -moz-transform: translate(0, 81%) rotate(45deg);
    }
    /*box5*/
    .history-main-wrapper div.box6 {
        transform: translate(-74.5%, 155%) rotate(45deg);
        -webkit-transform: translate(-74.5%, 155%) rotate(45deg);
        -o-transform: translate(-74.5%, 155%) rotate(45deg);
        -ms-transform: translate(-74.5%, 155%) rotate(45deg);
        -moz-transform: translate(-74.5%, 155%) rotate(45deg);
    }
    /*box6*/
    .history-main-wrapper div.box7 {
        transform: translate(74%, 155%) rotate(45deg);
        -webkit-transform: translate(74%, 155%) rotate(45deg);
        -o-transform: translate(74%, 155%) rotate(45deg);
        -ms-transform: translate(74%, 155%) rotate(45deg);
        -moz-transform: translate(74%, 155%) rotate(45deg);
    }
    /*box7*/
    .history-main-wrapper div.box8 {
        transform: translate(-0.5%, 229%) rotate(45deg);
        -webkit-transform: translate(-0.5%, 229%) rotate(45deg);
        -o-transform: translate(-0.5%, 229%) rotate(45deg);
        -ms-transform: translate(-0.5%, 229%) rotate(45deg);
        -moz-transform: translate(-0.5%, 229%) rotate(45deg);
    }
    /*box8*/
    .history-main-wrapper div.box9 {
        transform: translate(73%, 304%) rotate(45deg);
        -webkit-transform: translate(73%, 304%) rotate(45deg);
        -o-transform: translate(73%, 304%) rotate(45deg);
        -ms-transform: translate(73%, 304%) rotate(45deg);
        -moz-transform: translate(73%, 304%) rotate(45deg);
    }

    /*box9*/
    .history-main-wrapper div.box10 {
        transform: translate(-74.5%, 453%) rotate(45deg);
        -webkit-transform: translate(-74.5%, 453%) rotate(45deg);
        -o-transform: translate(-74.5%, 453%) rotate(45deg);
        -ms-transform: translate(-74.5%, 453%) rotate(45deg);
        -moz-transform: translate(-74.5%, 453%) rotate(45deg);
    }
    /*box10*/
    .history-main-wrapper div.box11 {
        transform: translate(-73%, 303%) rotate(45deg);
        -webkit-transform: translate(-73%, 303%) rotate(45deg);
        -o-transform: translate(-73%, 303%) rotate(45deg);
        -ms-transform: translate(-73%, 303%) rotate(45deg);
        -moz-transform: translate(-73%, 304%) rotate(45deg);
    }

    /*box11*/
    .history-main-wrapper div.box12 {
        transform: translate(-0.5%, 379%) rotate(45deg);
        -webkit-transform: translate(-0.5%, 379%) rotate(45deg);
        -o-transform: translate(-0.5%, 379%) rotate(45deg);
        -ms-transform: translate(-0.5%, 379%) rotate(45deg);
        -moz-transform: translate(-0.5%, 379%) rotate(45deg);
    }
    /*box13*/
    .history-main-wrapper div.box13 {
        transform: translate(0%, 527%) rotate(45deg);
        -webkit-transform: translate(0%, 527%) rotate(45deg);
        -o-transform: translate(0%, 527%) rotate(45deg);
        -ms-transform: translate(0%, 527%) rotate(45deg);
        -moz-transform: translate(0%, 527%) rotate(45deg);
    }
    /*box12*/
    .history-main-wrapper div.box14 {
        transform: translate(74%, 453%) rotate(45deg);
        -webkit-transform: translate(74%, 453%) rotate(45deg);
        -o-transform: translate(74%, 453%) rotate(45deg);
        -ms-transform: translate(74%, 453%) rotate(45deg);
        -moz-transform: translate(74%, 453%) rotate(45deg);
    }
    /*box14*/
    .history-main-wrapper div.box15 {
        transform: translate(73.5%, 601%) rotate(45deg);
        -webkit-transform: translate(73.5%, 601%) rotate(45deg);
        -o-transform: translate(73.5%, 601%) rotate(45deg);
        -ms-transform: translate(73.5%, 601%) rotate(45deg);
        -moz-transform: translate(73.5%, 601%) rotate(45deg);
    }
    /*box15*/
    .history-main-wrapper div.box16 {
        transform: translate(-73.5%, 601%) rotate(45deg);
        -webkit-transform: translate(-73.5%, 601%) rotate(45deg);
        -o-transform: translate(-73.5%, 601%) rotate(45deg);
        -ms-transform: translate(-73.5%, 601%) rotate(45deg);
        -moz-transform: translate(-73.5%, 601%) rotate(45deg);
    }

    .diamondText {
        width: 75% !important;
    }

    .history-main-wrapper .box {
        width: 100% !important;
        height: 100% !important;
    }
}


/* Font size of year */
@media all and (min-width: 992px) {
    .box1 .diamondText {
    }

    .box4 .diamondText,
    .box11 .diamondText {
        font-size: 0.8em;
    }

    .box5 .diamondText,
    .box8 .diamondText,
    .box16 .diamondText {
        font-size: 1.6em;
    }

    .box6 .diamondText,
    .box7 .diamondText {
    }
}


@media all and (min-width: 768px) and (max-width: 991px) {
    .our-history {
        top: 192px;
        height: 2200px;
    }
    .diamondText {
        font-size: 1em;
    }
    .diamondText p.year {
        font-size: 1.6em !important;
    }
}


@media all and (max-width: 768px) {
    .our-history {
        top: auto;
        height: auto;
    }

    p.year {
        color: #aaa;
        font-size: 1.2em;
        font-family: nazaninBold;
    }
}

@media (max-width: 767px) {
    .diamondThumbWrap img, .mask img {
        width: 100%;
    }

    .diamondThumbWrap {
        margin-bottom: 20px;
    }
}