body{
    margin: 0px;
    padding: 0px;
}
#container{
    position: absolute;
    width:960px;
    height:654px;
    /* border:1px solid black; */
    overflow: hidden;
}

.col--100 {
    width: 100%
}
.tab {
    margin: 0px 0 0 27px;
    display: inline-block;
}

#tab1
{
    background-image: url("tab1.png");
    width: 156px;
    height: 59px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 100% 0%;
    overflow: hidden;
    cursor: pointer;
}

#tab2
{
    background-image: url("tab2.png");
    width: 156px;
    height: 59px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 0% 100%;
    overflow: hidden;
    cursor: pointer;
}

#tab3
{
    background-image: url("tab3.png");
    width: 156px;
    height: 59px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 0% 100%;
    overflow: hidden;
    cursor: pointer;
}

#tab4
{
    background-image: url("tab4.png");
    width: 156px;
    height: 59px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 0% 100%;
    overflow: hidden;
    cursor: pointer;
}

#tab5
{
    background-image: url("tab5.png");
    width: 156px;
    height: 59px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 0% 100%;
    overflow: hidden;
    cursor: pointer;
}

.arrow {
    position: absolute;
    top: 272px;
    margin: 0px 0 0 0px; 
    display: inline-block;
    z-index: 1;
}

.arrowT2 {
    position: absolute;
    top: 272px;
    margin: 0px 0 0 0px; 
    display: inline-block;
    z-index: 1;
}

.arrowT3 {
    position: absolute;
    top: 272px;
    margin: 0px 0 0 0px; 
    display: inline-block;
    z-index: 1;
}

.arrowT4 {
    position: absolute;
    top: 272px;
    margin: 0px 0 0 0px; 
    display: inline-block;
    z-index: 1;
}

.arrowT5 {
    position: absolute;
    top: 272px;
    margin: 0px 0 0 0px; 
    display: inline-block;
    z-index: 1;
}

#arrowLeft
{
    left: 30px;
    background-image: url("arrow_left.png");
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    overflow: hidden;
    cursor: pointer;
}

#arrowRight
{
    right: 30px;
    background-image: url("arrow_right.png");
    float: right;
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    overflow: hidden;
    cursor: pointer;
}

#arrowTab2
{
    display: none;
}


#arrowLeftTab2
{
    left: 30px;
    background-image: url("arrow_left.png");
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    overflow: hidden;
    cursor: pointer;
}

#arrowRightTab2
{
    right: 30px;
    background-image: url("arrow_right.png");
    float: right;
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    overflow: hidden;
    cursor: pointer;
}

#arrowTab3
{
    display: none;
}

#arrowLeftTab3
{
    position: absolute;
    top: 272px;
    left: 30px;
    background-image: url("arrow_left.png");
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    overflow: hidden;
    cursor: pointer;
}

#arrowRightTab3
{
    position: absolute;
    top: 272px;
    right: 30px;
    background-image: url("arrow_right.png");
    float: right;
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    overflow: hidden;
    cursor: pointer;
}

#arrowTab4
{
    display: none;
}

#arrowLeftTab4
{
    position: absolute;
    top: 272px;
    left: 30px;
    background-image: url("arrow_left.png");
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    overflow: hidden;
    cursor: pointer;
}

#arrowRightTab4
{
    position: absolute;
    top: 272px;
    right: 30px;
    background-image: url("arrow_right.png");
    float: right;
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    overflow: hidden;
    cursor: pointer;
}

#arrowTab5
{
    display: none;
}

#arrowLeftTab5
{
    position: absolute;
    top: 272px;
    left: 30px;
    background-image: url("arrow_left.png");
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    overflow: hidden;
    cursor: pointer;
}

#arrowRightTab5
{
    position: absolute;
    top: 272px;
    right: 30px;
    background-image: url("arrow_right.png");
    float: right;
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    overflow: hidden;
    cursor: pointer;
}

.container1-pages {
    position: absolute;
    top: 436px;
    margin: 0px 0 0 0px; 
    display: inline-block;
}

.container2-pages {
    position: absolute;
    top: 436px;
    margin: 0px 0 0 0px; 
    display: none;
}

.container3-pages {
    position: absolute;
    top: 436px;
    margin: 0px 0 0 0px; 
    display: none;
}

.container4-pages {
    position: absolute;
    top: 436px;
    margin: 0px 0 0 0px; 
    display: none;
}

.container5-pages {
    position: absolute;
    top: 436px;
    margin: 0px 0 0 0px; 
    display: none;
}

#tab1-page1-image1
{
    position: absolute;
    top: -341px;
    left: 100px;
    pointer-events: none;
}

#tab1-page1-image2
{
    position: absolute;
    top: -190px;
    left: 420px;
    cursor: pointer;
}

#tab1-page1-image2-Click
{
    position: absolute;
    top: -154px;
    left: 140px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab1-page2-image1
{
    position: absolute;
    top: -316px;
    left: 1540px;
    display: block;
    opacity: 1;
    pointer-events: none;
}

#tab1-page2-image2
{
    position: absolute;
    top: -190px;
    left: 1265px;
    cursor: pointer;
    display: block;
}

#tab1-page2-image2-Click
{
    position: absolute;
    top: -154px;
    left: 1077px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab1-page3-image1
{
    position: absolute;
    top: -323px;
    left: 2025px;
    display: block;
    opacity: 1;
    pointer-events: none;
}

#tab1-page3-image2
{
    position: absolute;
    top: -190px;
    left: 2280px;
    cursor: pointer;
    display: block;
}

#tab1-page3-image2-Click
{
    position: absolute;
    top: -154px;
    left: 2002px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab1-page4-image1
{
    position: absolute;
    top: -190px;
    left: 3275px;
    cursor: pointer;
}

#tab1-page4-image1-Click
{
    position: absolute;
    top: -154px;
    left: 2928px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab1-page4-image2
{
    position: absolute;
    top: -30px;
    left: 3552px;
    cursor: pointer;
}

#tab1-page4-image2-Click
{
    position: absolute;
    top: 10px;
    left: 3130px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab1-page4-image3
{
    position: absolute;
    top: -301px;
    left: 2960px;
    pointer-events: none;
}

#tab2-page1-image1
{
    position: absolute;
    top: -341px;
    left: 100px;
    pointer-events: none;
}

#tab2-page1-image2
{
    position: absolute;
    top: -190px;
    left: 420px;
    cursor: pointer;
}

#tab2-page1-image2-Click
{
    position: absolute;
    top: -154px;
    left: 140px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab2-page2-image1
{
    position: absolute;
    top: -338px;
    left: 1455px;
    display: block;
    opacity: 1;
    pointer-events: none;
}

#tab2-page2-image2
{
    position: absolute;
    top: -190px;
    left: 1280px;
    cursor: pointer;
}

#tab2-page2-image2-Click
{
    position: absolute;
    top: -154px;
    left: 1085px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab2-page3-image1
{
    position: absolute;
    top: -323px;
    left: 2030px;
    display: block;
    opacity: 1;
    pointer-events: none;
}

#tab2-page3-image2
{
    position: absolute;
    top: -190px;
    left: 2285px;
    cursor: pointer;
}

#tab2-page3-image2-Click
{
    position: absolute;
    top: -154px;
    left: 2005px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab2-page4-image1
{
    position: absolute;
    top: -301px;
    left: 2970px;
    display: block;
    opacity: 1;
    pointer-events: none;
}

#tab2-page4-image2
{
    position: absolute;
    top: -190px;
    left: 3288px;
    cursor: pointer;
}

#tab2-page4-image2-Click
{
    position: absolute;
    top: -154px;
    left: 2970px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab3-page1-image1
{
    position: absolute;
    top: -341px;
    left: 100px;
    pointer-events: none;
}

#tab3-page1-image2
{
    position: absolute;
    top: -190px;
    left: 415px;
    cursor: pointer;
}

#tab3-page1-image2-Click
{
    position: absolute;
    top: -154px;
    left: 135px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab3-page2-image1
{
    position: absolute;
    top: -316px;
    left: 1108px;
    pointer-events: none;
}

#tab3-page2-image2
{
    position: absolute;
    top: -190px;
    left: 1525px;
    cursor: pointer;
}

#tab3-page2-image2-Click
{
    position: absolute;
    top: -154px;
    left: 1073px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab3-page3-image1
{
    position: absolute;
    top: -323px;
    left: 2030px;
    pointer-events: none;
}

#tab3-page3-image2
{
    position: absolute;
    top: -190px;
    left: 2277px;
    cursor: pointer;
}

#tab3-page3-image2-Click
{
    position: absolute;
    top: -154px;
    left: 1977px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab3-page4-image1
{
    position: absolute;
    top: -279px;
    left: 3009px;
    pointer-events: none;
}

#tab3-page4-image2
{
    position: absolute;
    top: -190px;
    left: 3315px;
    cursor: pointer;
}

#tab3-page4-image2-Click
{
    position: absolute;
    top: -154px;
    left: 2950px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab4-page1-image1
{
    position: absolute;
    top: -341px;
    left: 100px;
    pointer-events: none;
}

#tab4-page1-image2
{
    position: absolute;
    top: -190px;
    left: 415px;
    cursor: pointer;
}

#tab4-page1-image2-Click
{
    position: absolute;
    top: -154px;
    left: 135px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab4-page2-image1
{
    position: absolute;
    top: -316px;
    left: 1535px;
    pointer-events: none;
}

#tab4-page2-image2
{
    position: absolute;
    top: -190px;
    left: 1230px;
    cursor: pointer;
}

#tab4-page2-image2-Click
{
    position: absolute;
    top: -154px;
    left: 1075px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab4-page3-image1
{
    position: absolute;
    top: -323px;
    left: 2035px;
    pointer-events: none;
}

#tab4-page3-image2
{
    position: absolute;
    top: -190px;
    left: 2285px;
    cursor: pointer;
}

#tab4-page3-image2-Click
{
    position: absolute;
    top: -154px;
    left: 1975px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab4-page4-image1
{
    position: absolute;
    top: -316px;
    left: 3448px;
    pointer-events: none;
}

#tab4-page4-image2
{
    position: absolute;
    top: -190px;
    left: 3150px;
    cursor: pointer;
}

#tab4-page4-image2-Click
{
    position: absolute;
    top: -154px;
    left: 2923px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab4-page5-image1
{
    position: absolute;
    top: -316px;
    left: 4205px;
    pointer-events: none;
}

#tab4-page5-image2
{
    position: absolute;
    top: -190px;
    left: 4035px;
    cursor: pointer;
}

#tab4-page5-image2-Click
{
    position: absolute;
    top: -154px;
    left: 3915px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab5-page1-image1
{
    position: absolute;
    top: -341px;
    left: 100px;
    pointer-events: none;
}

#tab5-page1-image2
{
    position: absolute;
    top: -190px;
    left: 400px;
    cursor: pointer;
}

#tab5-page1-image2-Click
{
    position: absolute;
    top: -154px;
    left: 145px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab5-page2-image1
{
    position: absolute;
    top: -316px;
    left: 1535px;
    pointer-events: none;
}

#tab5-page2-image2
{
    position: absolute;
    top: -190px;
    left: 1230px;
    cursor: pointer;
}

#tab5-page2-image2-Click
{
    position: absolute;
    top: -154px;
    left: 1075px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab5-page3-image1
{
    position: absolute;
    top: -323px;
    left: 2035px;
    pointer-events: none;
}

#tab5-page3-image2
{
    position: absolute;
    top: -190px;
    left: 2285px;
    cursor: pointer;
}

#tab5-page3-image2-Click
{
    position: absolute;
    top: -154px;
    left: 2010px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab5-page4-image1
{
    position: absolute;
    top: -302px;
    left: 3290px;
    pointer-events: none;
}

#tab5-page4-image2
{
    position: absolute;
    top: -190px;
    left: 3150px;
    cursor: pointer;
}

#tab5-page4-image2-Click
{
    position: absolute;
    top: -154px;
    left: 2945px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab5-page5-image1
{
    position: absolute;
    top: -338px;
    left: 3942px;
    pointer-events: none;
}

#tab5-page5-image2
{
    position: absolute;
    top: -190px;
    left: 4250px;
    cursor: pointer;
}

#tab5-page5-image2-Click
{
    position: absolute;
    top: -154px;
    left: 3970px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#tab5-page6-image1
{
    position: absolute;
    top: -294px;
    left: 4890px;
    pointer-events: none;
}

#tab5-page6-image2
{
    position: absolute;
    top: -190px;
    left: 5235px;
    cursor: pointer;
}

#tab5-page6-image2-Click
{
    position: absolute;
    top: -154px;
    left: 4975px;
    cursor: pointer;
    display: none;
    opacity: 0;
}

#bg1
{
    position: absolute;
    top: 58px;
    left: 0px;
}

#bg2
{
    position: absolute;
    top: 58px;
    left: 0px;
    display: none;
}

#bg3
{
    position: absolute;
    top: 58px;
    left: 0px;
    display: none;
}

#bg4
{
    position: absolute;
    top: 58px;
    left: 0px;
    display: none;
}

#bg5
{
    position: absolute;
    top: 58px;
    left: 0px;
    display: none;
}

/*
   firefox fix
*/
@supports (-moz-appearance:none) and (text-align-last:auto) { #bg1 { top: 58px; } }