#main
{
    background: url(img/bg.jpg) no-repeat #704b7a;
}
#progress
{
    background: #4781b1;
}
#line
{
    top: 98px;
    right: 254px;
    width: 11px;
    height: 638px;
    background-color: #fff;
}
.container
{
    position: absolute;
    top: 142px;
    left: 28px;
    width: 840px;
    height: 558px;
    border-radius: 10px;
    overflow: hidden;
}
.elems_img
{
    width: 840px;
    height: 450px;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
}
.mid_text
{
    min-height: 87px;
    background: #fff;
    padding: 10px;
    line-height: 35px;
    width: 820px;
    color: #000;
    position: absolute;
    bottom: 1px;
    left: 0px;
}
/* ---------------- elem style all and 5icons ---------------------*/
#icons .elems
{
    background-color: #e2dfd0;
    position: absolute;
    right: 29px;
    color: #000;
    padding: 5px;
    width: 167px;
    /*height: 109px;*/
	height: 85px;
    border-radius: 8px;
        padding-top: 25px;

}
#icons .elems:after
{
    content: '';
    top: 50%;
    background-color: #fff;
    position: absolute;
    right: 177px;
    height: 9px;
    width: 51px;
    z-index: -1;
}
#icons .elems:before
{
    content: '';
    top: 50%;
    position: absolute;
    right: 219px;
    height: 22px;
    width: 22px;
    z-index: 10;
    margin-top: -5px;
    background-color: #6f6e73;
    border-radius: 3px;
}
#icons .elems:hover, #icons .elems:hover:before
{
    background-color: #497eb0;
    color: #fff;
}
#icons .hover, #icons .hover:before
{
    background-color: #ff6d00;
    color: #fff;
}
#icons .elems:nth-child(1)
{
    top: 79px;
}
#icons .elems:nth-child(2)
{
    top: 218px;
}
#icons .elems:nth-child(3)
{
    top: 356px;
}
#icons .elems:nth-child(4)
{
    top: 493px;
}
#icons .elems:nth-child(5)
{
    top: 631px;
}
/* ---------------- elem style 4icons ---------------------*/
#timeline.icon_4 .elems
{
    /* height: 124px; */
        height: 80px;


}
#timeline.icon_4 #icons .elems:nth-child(1)
{
    top: 101px;
}
#timeline.icon_4 #icons .elems:nth-child(2)
{
    top: 273px;
}
#timeline.icon_4 #icons .elems:nth-child(3)
{
    top: 445px;
}
#timeline.icon_4 #icons .elems:nth-child(4)
{
    top: 614px;
}
/* ---------------- elem style 3icons ---------------------*/
#timeline.icon_3 .elems
{
    height: 131px;
}
#timeline.icon_3 #icons .elems:nth-child(1)
{
    top: 137px;
}
#timeline.icon_3 #icons .elems:nth-child(2)
{
    top: 354px;
}
#timeline.icon_3 #icons .elems:nth-child(3)
{
    top: 572px;
}
/* ---------------- elem style 2icons ---------------------*/
#timeline.icon_2 .elems
{
    height: 218px;
}
#timeline.icon_2 #icons .elems:nth-child(1)
{
    top: 145px;
}
#timeline.icon_2 #icons .elems:nth-child(2)
{
    top: 464px;
}
/*-------------- style for english -----------------*/
.en #line
{
    right: auto;
    left: 254px;
}
.en #icons .elems
{
    right: auto;
    left: 29px;
}
.en #icons .elems:before
{
    right: auto;
    left: 219px;
}
.en #icons .elems:after
{
    right: auto;
    left: 177px;
}
.en .container
{
    right: auto;
    right: 28px;
}
.en .mid_text
{
    direction: ltr;
}
.next, .prev {
    top: 520px;
    position: absolute;
    z-index: 100000000000;
    width: 36px;
    height: 37px;
    cursor:pointer;
}
 .next
{
    background: url(img/next.png) no-repeat;
    right: 445px;
}

.prev
{
    right: 391px;
    background: url(img/prev.png) no-repeat;
}
@media (max-height: 780px)
{
    #line
    {
        top: 68px;
        right: 155px;
        width: 8px;
        height: 410px;
    }
    .container
    {
        top: 90px;
        left: 45px;
        width: 650px;
        /*height: 345px;*/

        /*Edited for adding prev and next buttons*/
            height: 387px;

    }
   
    .en .next {
    left: 163px;
    background: url(img/prev.png) no-repeat;
}
    .next {
    right: 328px;
}
    .next, .prev {
    top: 348px;
    position: absolute;
    z-index: 100000000000;
    width: 36px;
    height: 37px;
}
    .en .prev {
    left: 112px;
    background: url(img/next.png) no-repeat;
}
    .prev {
    right: 281px;
}
    .elems_img
    {
        width: 650px;
        height: 295px;
        background-color: white;
    text-align: center;
    }
    .mid_text
    {
        /*min-height: 36px;*/
        /*editted for adding next and prev buttons*/
            min-height: 76px;
        padding: 8px;
        line-height: 25px;
        width: 637px;
    }
    /* ---------------- elem style all and 5icons ---------------------*/
    #icons .elems
    {
        right: 15px;
        padding: 4px;
        width: 100px;
        /*height: 65px;*/
		height: 55px;
        font-size: 18px;
        
		/*padding-top: 25px;*/
    }
    #icons .elems:after
    {
        right: 108px;
        height: 6.7px;
        width: 28px;
    }
    #icons .elems:before
    {
        right: 137px;
        height: 15px;
        width: 15px;
        margin-top: -4px;
    }
    #icons .elems:nth-child(1)
    {
        top: 50px;
    }
    #icons .elems:nth-child(2)
    {
        top: 140px;
    }
    #icons .elems:nth-child(3)
    {
        top: 230px;
    }
    #icons .elems:nth-child(4)
    {
        top: 320px;
    }
    #icons .elems:nth-child(5)
    {
        top: 410px;
    }
    /* ---------------- elem style 4icons ---------------------*/
    #timeline.icon_4 .elems
    {
        height: 70px;
       /*height: 60px;*/
    }
    #timeline.icon_4 #icons .elems:nth-child(1)
    {
        top: 60px;
    }
    #timeline.icon_4 #icons .elems:nth-child(2)
    {
        top: 175px;
    }
    #timeline.icon_4 #icons .elems:nth-child(3)
    {
        top: 285px;
    }
    #timeline.icon_4 #icons .elems:nth-child(4)
    {
        top: 395px;
    }
    /* ---------------- elem style 3icons ---------------------*/
    #timeline.icon_3 .elems
    {
        height: 85px;
    }
    #timeline.icon_3 #icons .elems:nth-child(1)
    {
        top: 80px;
    }
    #timeline.icon_3 #icons .elems:nth-child(2)
    {
        top: 223px;
    }
    #timeline.icon_3 #icons .elems:nth-child(3)
    {
        top: 365px;
    }
    /* ---------------- elem style 2icons ---------------------*/
    #timeline.icon_2 .elems
    {
        height: 120px;
    }
    #timeline.icon_2 #icons .elems:nth-child(1)
    {
        top: 95px;
    }
    #timeline.icon_2 #icons .elems:nth-child(2)
    {
        top: 310px;
    }
    .en #icons .elems:before
    {
        left: 129px;
    }
    .en #icons .elems:after
    {
        left: 105px;
    }
    .en #line
    {
        left: 161px;
    }
    .en .container
    {
        right: 38px;
    }
}

#title {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    min-width: 290px;
    font-size: 30px;
    position: relative;
    background-color: #eb8c38;
    color: #FFF;
    padding: 0 30px;
    border-radius: 15px;
    text-align: center;
    top: 10px;
    max-width: none;
    z-index: 5;
    right: 0;
}

    #title:before {
        content: '';
        position: absolute;
        background: url(img/shadow.png) no-repeat center bottom;
        width: 216px;
        height: 15px;
        bottom: -11px;
        right: -15px;
        z-index: 0;
    }

    #title:after {
        content: '';
        position: absolute;
        background: url(img/icon.png) no-repeat center bottom;
        width: 135px;
        height: 61px;
        background-size: 135px 61px;
        bottom: -11px;
        left: -15px;
        right: auto;
        z-index: 0;
    }

.en #title:before {
    background: url(img/shadow_en.png) no-repeat center bottom;
    width: 180px;
    height: 15px;
    bottom: -15px;
    left: -35px;
}

.en #title:after {
    background: url(img/icon_en.png) no-repeat center bottom;
    width: 135px;
    height: 61px;
    background-size: 135px 61px;
    bottom: -20px;
    right: -15px;
    left: auto;
}

@media (max-height : 780px) {
    #title {
        line-height: 50px;
        min-width: 270px;
        font-size: 22px;
        top: 0px;
        height: 50px;
        right: -5px;
    }

    .en #title:before {
        left: -41px;
        bottom: -13px;
        height: 14px;
        right: auto;
    }

    .en #title:after {
        width: 105px;
        height: 45px;
        bottom: -15px;
        background-size: 105px 45px;
        right: -11px;
        left: auto;
    }

    #title:before {
        right: -45px;
        bottom: -10px;
        left: auto;
    }

    #title:after {
        width: 105px;
        height: 45px;
        bottom: -8px;
        background-size: 105px 45px;
    }
}