/* @group how-it-works PAGE*/

#howItWorksTabs .tab a {
    letter-spacing: 1px;
}

#howItWorksTabs .tab:first-of-type {
    /*padding-left: 15px;*/
}


table.howItWorks {
    line-height: 22px;
}

table.howItWorks td {
    padding: 15px;
}

/* @end */

/* @group how-it-works SIDEBAR*/

.howItWorksHeader{
    background: url("../img/icon-hoewerkthet-transparant.png") no-repeat;
    padding: 9px 0 15px 50px;
    margin-top: -9px;
}

[class^=howItWorks-]{
    min-height: 240px;
    margin-bottom: 20px;
    position: relative;
}

.howItWorks-client1, .howItWorks-expert1 {
    background: url(../img/how-it-works1.jpg) no-repeat left #E7F5F6;
}

.howItWorks-client2 {
    background: url(../img/how-it-works2-client.jpg) no-repeat left #E7F5F6;
}

.howItWorks-expert2 {
    background: url(../img/how-it-works2-expert.jpg) no-repeat left #E7F5F6;
}

.howItWorks-client3, .howItWorks-expert3 {
    background: url(../img/how-it-works3.jpg) no-repeat left #E7F5F6;
}

.howItWorksShortDescription {
    bottom: 0;
    color: #FFFFFF;
    height: 80px;
    left: 12px;
    position: absolute;
    width: 282px;
    display: table;
}

.howItWorksShortDescriptionContent {
    display: table-cell;
    vertical-align: middle;
}

.howItWorksTitle {
    font: 22px/18px 'PT Sans Narrow',sans-serif;
    margin-bottom: 5px;
}

.howItWorksLongDescription {
    padding: 4px 12px 0px 345px;
    line-height: 20px;
}

@media screen and (min-width: 850px) and (max-width: 1100px),  screen and (max-width: 750px){

    .tabPanel [class^=howItWorks-]{
        background: #e7f5f6;
    }

    .tabPanel .howItWorksShortDescription {
        color: #ff5e00;
        display: block;
        height: auto;
        padding: 20px 20px 5px 20px;
        position: static;
    }

    .tabPanel .howItWorksLongDescription {
        float: none;
        padding: 0 20px 10px 20px;
        width: auto;
    }
}