/* except iphone portrate */
@media (min-width: 480px){
    .tab-content{
        width: 100%;
        position:relative;
        padding:54% 0 0 0;
        height:0;
        margin-top:52px;
        margin-bottom:52px;
    }

    .tab-content.x{
        padding:69% 0 0 0;
        margin-top:-10px;
        margin-bottom:0px;
    }

    .tab-content.twoImages{
        padding:112% 0 0 0;
    }

    /*use if images has the white border*/
    .tab-content.imageWithWhiteSpace{
        padding:62% 0 0 0;
        margin-top:0px;
        margin-bottom:0px;
    }

    .tab-content.imageWithWhiteSpace.x{
      padding:68% 0 0 0;
      margin-top:-10px;
    }

    /* sequence of two images with the white border */
    .tab-content.imageWithWhiteSpace.twoImages{
        padding:124% 0 0 0;
    }

    .tab-content.imageWithWhiteSpace.twoImages.x{
        padding:136% 0 0 0;
        margin-top:-10px;
    }

    .tab-pane{
        max-width:100%;
        position:absolute;
        left:0px;
        top:0px;
        right:0px;
        bottom:0px;
    }

    .tab-image-iphone{
        max-width:250px;
        max-height:100%;
        height:auto;
        width:auto;
        margin-top:0px !important;
        margin-bottom:0px !important;
    }

    .tab-image-iphone.x{
        margin-top:1.2% !important;
        max-width: 30.1%;
    }

    .tab-image-iphone-white-space{
        max-width:316px;
        max-height:100%;
        height:auto;
        width:auto;
        margin-top:0px !important;
        margin-bottom:0px !important;
    }

    .tab-image-iphone-white-space.x{
        max-width:38%;
        margin-top:0.4% !important;
    }

    .tab-image-ipad{
        max-width:594px;
        max-height:100%;
        height:auto;
        width:auto;
        margin-top:0px !important;
        margin-bottom:0px !important;
    }

    .tab-image-ipad.x{
        max-width:80%;
        max-height:100%;
        margin-top:3.7% !important;
    }

    .tab-image-ipad.twoImages{
        max-height:48%;
    }

    .tab-image-ipad-white-space{
        max-width:650px;
        max-height:100%;
        height:auto;
        width:auto;
        margin-top:0px !important;
        margin-bottom:0px !important;
    }

    .tab-image-ipad-white-space.x{
        max-width:88%;
        margin-top:-0.2% !important;
    }

    .tab-image-ipad-white-space.twoImages{
        max-height:50%;
    }

    .tab-image-mac{
        max-width:792px;
        max-height:100%;
        height:auto;
        width:auto;
        margin-top:0px !important;
        margin-bottom:0px !important;
    }

    .tab-image-mac.x{
        max-width: 99%;
        margin-top:5.5% !important;
    }

    .tab-image-mac.twoImages{
        max-height:48%;
    }

    .tab-image-mac-white-space{
        max-width:800px;
        max-height:100%;
        height:auto;
        width:auto;
        margin-top:0px !important;
        margin-bottom:0px !important;
    }

    .tab-image-mac-white-space.x{
        max-width:100%;
        margin-top:1% !important;
    }

    .tab-image-mac-white-space.twoImages{
        max-height:50%;
    }
}

/* iphone portrate */
@media (max-width: 479px){
    .tab-content{
        width: 100%;
        position:relative;
        padding:104% 0 0 0;
        height:0;
        margin-top:52px;
        margin-bottom:52px;
    }

    .tab-content.x{
        padding:136% 0 0 0;
        margin-top:-10px;
        margin-bottom:0px;
    }

    .tab-content.twoImages{
        padding:208% 0 0 0;
    }

    /*use when images has the white border*/
    .tab-content.imageWithWhiteSpace{
        padding:120% 0 0 0;
        margin-top:0px;
        margin-bottom:0px;
    }

    .tab-content.imageWithWhiteSpace.x{
        padding:136% 0 0 0;
    }

    /* sequence of two images with the white border */
    .tab-content.imageWithWhiteSpace.twoImages{
        padding:240% 0 0 0;
    }

    .tab-content.imageWithWhiteSpace.twoImages.x{
        padding:272% 0 0 0;
    }

    .tab-pane{
        max-width:100%;
        position:absolute;
        left:0px;
        top:0px;
        right:0px;
        bottom:0px;
    }

    .tab-image-iphone{
        max-width:250px;
        max-height:100%;
        height:auto;
        width:auto;
        margin-top:0px !important;
        margin-bottom:0px !important;
    }

    .tab-image-iphone.x{
        max-width:58.5%;
        margin-top:3% !important;
    }

    .tab-image-iphone-white-space{
        width:316px;
        max-height:100%;
        height:auto;
        width:auto;
        margin-top:0px !important;
        margin-bottom:0px !important;
    }

    .tab-image-iphone-white-space.x{
        max-width:74%;
        margin-top:0px !important;
    }

    .tab-image-ipad{
        max-width:594px;
        max-height:71%;
        height:auto;
        width:auto;
        margin-top:15% !important;
        margin-bottom:0px !important;
    }

    .tab-image-ipad.x{
        max-width:100%;
        max-height:100%;
        margin-top:27% !important;
    }

    .tab-image-ipad.twoImages{
        max-height:35%;
    }

    .tab-image-ipad-white-space{
        width:650px;
        max-width:650px;
        max-height:64%;
        height:auto;
        width:auto;
        margin-top:20% !important;
        margin-bottom:0px !important;
    }

    .tab-image-ipad-white-space.x{
        max-width:100%;
        max-height:100%;
        margin-top:27% !important;
    }

    .tab-image-ipad-white-space.twoImages{
        max-height:32%;
        margin-top:23% !important;
    }

    .tab-image-mac{
        max-width:792px;
        max-height:53%;
        height:auto;
        width:auto;
        margin-top:25% !important;
        margin-bottom:0px !important;
    }

    .tab-image-mac.x{
        max-width:100%;
        max-height:100%;
        margin-top:37% !important;
    }

    .tab-image-mac.twoImages{
        max-height:26%;
        margin-top:30% !important;
    }

    .tab-image-mac-white-space{
        max-width:800px;
        max-height:52%;
        height:auto;
        width:auto;
        margin-top:25% !important;
        margin-bottom:0px !important;
    }

    .tab-image-mac-white-space.x{
        max-width:100%;
        max-height:100%;
        margin-top:32% !important;
    }

    .tab-image-mac-white-space.twoImages{
        max-height:26%;
        margin-top:30% !important;
    }
}