﻿/*=============================================
================ FLOW TABS  ================ */


.tab-container
{
    height: 150px;
    width: 1000px;
    overflow: hidden;
}

.tabs
{
    width: 4000px;
}

.tabs .tab
{
    color: White;
    text-align: left;
    width: 970px;
    padding: 15px;
    float: left;
    overflow: hidden;
}

.tabs .tab .img-block
{
    float: left;
    width: 250px;
    padding-right: 10px;
}
.tabs .tab .cont-block
{
    float: left;
    width: 310px;
    padding-right: 20px;
    font-style: italic;
}

.tabs .tab .cont-block ul
{
    padding-left: 10px;
}

.tabs .tab .cont-block li
{
    padding-bottom: 15px;
}

.tabs .tab  a
{
   color:White;
}

.tabs .tab .block
{
    float: left;
    font-style: italic;
}

.tabs .tab .block ul
{
    padding-left: 10px;
}

.tabs .tab .block li
{
    padding-bottom: 15px;
}



/*=============================================
================ TAB MENU ================ */

.tab-menu-bg
{
    background-color: #31353b;
    text-align: center;
    overflow: hidden;
}
.tab-menu
{
    max-width: 1000px;
}

.tab-menu .item
{
    min-width: 194px;
    width: 23%;
    float: left;
    position: relative;
}

.tab-menu .item:hover, .tab-menu .selected
{
    background-image: url(../images/menu/tap-menu-hover.png);
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #464a4f;
}

.tab-menu .item a
{
    height: 106px;
    display: block;
    width: 100%;
    color: White;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
    padding-top: 25px;
}

.tab-menu .item .menu-img
{
    padding-bottom: 5px;
}

.tab-menu .separator
{
    border-left: 1px solid #4b4f55;
    height: 70%;
    margin-top: 10%;
    float: left;
    position: absolute;
}

.tab-menu .selected a
{
    background-image: url(../images/menu/selected.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

/*=============================================
================ ADAPTIVE CSS  ================ */

@media screen and (max-width: 1020px)
{
    .tabs .tab .block
    {
        width: 47%;
    }

    .tabs .tab .cont-block
    {
        width: 47%;
    }

    .tabs .tab .img-block
    {
        display: none;
    }
}


@media screen and (max-width: 800px)
{



    .tab-menu .item
    {
        width: 100%;
        float: none;
        border-bottom: 1px solid #4b4f55;
    }

    .tab-menu .item a
    {
        height: auto;
        width: auto;
        line-height: 50px;
        display: block;
        text-align: left;
        padding-top: 0px;
        padding-left: 60px;
    }

    .tab-menu .item .menu-img
    {
        left: 0px;
        padding: 10px;
        float: left;
        position: absolute;
    }
    .tab-menu .item .menu-img img
    {
        height: 30px;
    }

    .tab-menu .separator
    {
        display: none;
    }

    .tab-menu .selected a
    {
        background-image: url(../images/menu/selected-mobile.png);
        background-repeat: no-repeat;
        background-position: right center;
    }

}

@media screen and (max-width: 780px)
{

    .tabs .tab .block, .tabs .tab .cont-block, .tabs .tab .img-block
    {
        width: auto;
        float: none;
    }

}
