.phone, .tablet, .desktop {
    content: ' ';
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 0;
    opacity: .25;
    transition: opacity .5s;
}

.phone {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNMzUsNDhIMTNjLTIuNzU3LDAtNS0yLjI0My01LTVWNWMwLTIuNzU3LDIuMjQzLTUsNS01aDIyYzIuNzU3LDAsNSwyLjI0Myw1LDV2MzhDNDAsNDUuNzU3LDM3Ljc1Nyw0OCwzNSw0OHogTTEzLDIgICAgIGMtMS42NTQsMC0zLDEuMzQ2LTMsM3YzOGMwLDEuNjU0LDEuMzQ2LDMsMywzaDIyYzEuNjU0LDAsMy0xLjM0NiwzLTNWNWMwLTEuNjU0LTEuMzQ2LTMtMy0zSDEzeiIvPjwvZz48Zz48cGF0aCBkPSJNMzksMTBIOWMtMC41NTMsMC0xLTAuNDQ4LTEtMXMwLjQ0Ny0xLDEtMWgzMGMwLjU1MywwLDEsMC40NDgsMSwxUzM5LjU1MywxMCwzOSwxMHoiLz48L2c+PGc+PHBhdGggZD0iTTM5LDQwSDljLTAuNTUzLDAtMS0wLjQ0OC0xLTFzMC40NDctMSwxLTFoMzBjMC41NTMsMCwxLDAuNDQ4LDEsMVMzOS41NTMsNDAsMzksNDB6Ii8+PC9nPjxnPjxwYXRoIGQ9Ik0yNCw0MWMtMS4xMDQsMC0yLDAuODk2LTIsMnMwLjg5NiwyLDIsMnMyLTAuODk2LDItMlMyNS4xMDQsNDEsMjQsNDFMMjQsNDF6Ii8+PC9nPjxnPjxwYXRoIGQ9Ik0yOSw2SDE5Yy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDEwYzAuNTUzLDAsMSwwLjQ0OCwxLDFTMjkuNTUzLDYsMjksNnoiLz48L2c+PC9nPjwvZz48L3N2Zz4=) center center no-repeat;
}


.tablet {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNMzksNDhIOWMtMi43NTcsMC01LTIuMjQzLTUtNVY1YzAtMi43NTcsMi4yNDMtNSw1LTVoMzBjMi43NTcsMCw1LDIuMjQzLDUsNXYzOEM0NCw0NS43NTcsNDEuNzU3LDQ4LDM5LDQ4eiBNOSwyICAgICBDNy4zNDYsMiw2LDMuMzQ2LDYsNXYzOGMwLDEuNjU0LDEuMzQ2LDMsMywzaDMwYzEuNjU0LDAsMy0xLjM0NiwzLTNWNWMwLTEuNjU0LTEuMzQ2LTMtMy0zSDl6Ii8+PC9nPjxnPjxwYXRoIGQ9Ik0yNC4xNjcsNDFjLTEuMTA1LDAtMiwwLjg5NS0yLDJzMC44OTUsMiwyLDJjMS4xMDQsMCwyLTAuODk1LDItMlMyNS4yNzEsNDEsMjQuMTY3LDQxTDI0LjE2Nyw0MXoiLz48L2c+PGc+PHBhdGggZD0iTTM5LDQwSDljLTAuNTUyLDAtMS0wLjQ0OC0xLTFWN2MwLTAuNTUyLDAuNDQ4LTEsMS0xaDMwYzAuNTUyLDAsMSwwLjQ0OCwxLDF2MzJDNDAsMzkuNTUyLDM5LjU1Miw0MCwzOSw0MHogTTEwLDM4aDI4VjggICAgIEgxMFYzOHoiLz48L2c+PGc+PHBhdGggZD0iTTI0LjE2NywzYy0wLjU1MywwLTEsMC40NDctMSwxczAuNDQ3LDEsMSwxYzAuNTUzLDAsMS0wLjQ0NywxLTFTMjQuNzE5LDMsMjQuMTY3LDNMMjQuMTY3LDN6Ii8+PC9nPjwvZz48L2c+PC9zdmc+) center center no-repeat;
}

.desktop {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNNDQsNDJINGMtMi4yMDYsMC00LTEuODc0LTQtNC4xNzdWOC4xNzdDMCw1Ljg3NCwxLjc5NCw0LDQsNGg0MGMyLjIwNiwwLDQsMS44NzQsNCw0LjE3N3YyOS42NDYgICAgIEM0OCw0MC4xMjYsNDYuMjA2LDQyLDQ0LDQyeiBNNCw2QzIuODk3LDYsMiw2Ljk3NywyLDguMTc3djI5LjY0NkMyLDM5LjAyMywyLjg5Nyw0MCw0LDQwaDQwYzEuMTAzLDAsMi0wLjk3NywyLTIuMTc3VjguMTc3ICAgICBDNDYsNi45NzcsNDUuMTAzLDYsNDQsNkg0eiIvPjwvZz48Zz48cGF0aCBkPSJNMzgsNDZIMTBjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoMjhjMC41NTIsMCwxLDAuNDQ4LDEsMVMzOC41NTIsNDYsMzgsNDZ6Ii8+PC9nPjxnPjxwYXRoIGQ9Ik0yNCw0NmMtMC41NTIsMC0xLTAuNDQ4LTEtMXYtNGMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxdjRDMjUsNDUuNTUyLDI0LjU1Miw0NiwyNCw0NnoiLz48L2c+PGc+PGNpcmNsZSBjeD0iMjQiIGN5PSIzNyIgcj0iMiIvPjwvZz48Zz48cmVjdCBoZWlnaHQ9IjIiIHdpZHRoPSI0NiIgeD0iMSIgeT0iMzIiLz48L2c+PC9nPjwvZz48L3N2Zz4=) center center no-repeat;
}

    .phone.active, .tablet.active, .desktop.active {
        opacity: 1;
        transition: opacity .5s;
    }


#preview .nav-tabs {
    display: inline-block;
    border: 1px solid #cccccc;
    border-radius: 100px;
    margin: 20px 0;
}
    #preview .nav-tabs > li > a {
        border-radius: 100px;
        margin: 4px;
        padding-left: 30px ;
        padding-right: 30px;
    }

    #preview .nav-tabs > li.active > a, #preview .nav-tabs > li.active > a:hover, #preview .nav-tabs > li.active > a:focus {
        background-color: #009fd3;
        border-radius: 100px;
        color: #fff;
    }

#preview .nav > li > a {
    color: #009fd3;
}

.tab-content-phone, .tab-content-phone iframe, .tab-content-phone #diamondRapnetIframe, .tab-content-phone #jewelryRapnetIframe {
    width: 320px;
    border: 1px solid rgb(242, 242, 242);
}

.tab-content-tablet, .tab-content-tablet iframe, .tab-content-tablet #diamondRapnetIframe, .tab-content-tablet #jewelryRapnetIframe {
    width: 768px;
    border: 1px solid rgb(242, 242, 242);
}
.tab-content-desktop, .tab-content-desktop iframe, .tab-content-desktop #diamondRapnetIframe, .tab-content-desktop #jewelryRapnetIframe {
    width: 100%;
    border: 1px solid rgb(242, 242, 242);
}

.tab-content {
    margin-left: auto;
    margin-right: auto;
}