/** Stylesheets for the Custom Preview Bar */
body { margin: 0; padding: 0; overflow: hidden; font-family: Helvetica, Arial, sans-serif; font-size: 14px; }
body.body-bg { background: #333; background: -webkit-linear-gradient(top, #444444, #333333); background: linear-gradient(to bottom, #444444, #333333); background-size: 100% 100%; }

img { margin: 0; padding: 0; border: none; height: auto; width: auto; max-width: 100%; max-height: 100%; }

#iframe-holder { margin: 0; }
#iframe-holder.mobile { padding: 109px calc(50% - 185px) 110px calc(50% - 190px); background: url("../images/iphone6.svg") no-repeat center 4px; background-size: 433px 884px; position: relative; }
#iframe-holder.mobile .qr-code { position: absolute; display: block; top: calc(50% - 74px); left: calc(50% + 270px); background-color: #fff; padding: 10px; }
#iframe-holder.mobile .qr-label { color: #aaa; font-size: 12px; height: 0; text-align: center; -webkit-transform: translateY(-35px); transform: translateY(-35px); }
#iframe-holder.tablet { padding: 113px calc(50% - 382px) 125px calc(50% - 386px); background: url("../images/ipad.svg") no-repeat center 4px; background-size: 838px 1236px; }
#iframe-holder.tablet #main-preview-frame, #iframe-holder.mobile #main-preview-frame { border-radius: 3px; }

.qr-code { display: none; }

#main-preview-frame { width: 100%; margin: 0; padding: 0; height: 999px; border: 2px solid #333; }

.purchase { position: relative; text-decoration: none; }

.purchase__text { position: absolute; left: 41px; text-transform: uppercase; font-family: Verdana, Arial, sans-serif; font-weight: bold; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); font-size: 13px; right: 5px; }
@media (max-width: 950px) { .purchase__text { font-size: 11px; left: 34px; } }
@media (max-width: 475px) { .purchase__text { font-size: 10px; left: 27px; } }

.fb_iframe_widget { margin: 0 15px 0 0; top: -43px; }
@media (max-width: 950px) { .fb_iframe_widget { top: -33px; } }
@media (max-width: 475px) { .fb_iframe_widget { top: -25px; } }

.preview-bar { z-index: 99999; background-color: #232323; border-bottom: 1px solid #000000; width: 100%; height: 54px; position: relative; }

.preview-bar__logo { float: left; padding-left: 11px; }
@media (min-width: 745px) { .preview-bar__logo { border-right: 1px solid #333333; } }
.preview-bar__logo a { text-indent: -9999px; display: inline-block; background: url("../images/logo-envato.svg"); margin: 20px 0 16px 4px; height: 14px; width: 118px; background-size: 118px 14px; }
@media (min-width: 569px) { .preview-bar__logo a { margin: 18px 20px 18px 9px; height: 18px; width: 152px; background-size: 152px 18px; } }

.preview-bar__select-theme { background-color: #454545; color: #dddddd; border-radius: 5px; padding: 9px 14px 8px; margin-top: 11px; margin-left: 20px; min-width: 200px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15); position: relative; float: left; display: none; }
@media (min-width: 745px) { .preview-bar__select-theme { display: inline-block; } }
.preview-bar__select-theme:after, .preview-bar__select-theme:before { position: absolute; content: ""; right: 10px; width: 0; height: 0; border-style: solid; }
.preview-bar__select-theme:before { top: 30%; border-width: 0 6px 5px 6px; border-color: transparent transparent #666666 transparent; }
.preview-bar__select-theme:after { top: 60%; border-width: 5px 6px 0 6px; border-color: #666666 transparent transparent transparent; }
.preview-bar__select-theme:hover .preview-bar__select-theme__all-themes { visibility: visible; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }

.preview-bar__select-theme__all-themes { visibility: hidden; opacity: 0; list-style: none; margin: 0; padding: 0; position: absolute; top: 97%; left: 0; right: 0; border-radius: 0 0 5px 5px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: translateY(-10px); transform: translateY(-10px); }
.preview-bar__select-theme__all-themes li a { display: block; background-color: #454545; color: #cccfd1; padding: 8px 14px; text-decoration: none; }
.preview-bar__select-theme__all-themes li a:hover { background-color: #cccfd1; color: #4a525a; }
.preview-bar__select-theme__all-themes li:last-of-type a { border-radius: 0 0 5px 5px; }

.preview-bar__proteusthemes { color: #828282; font-style: italic; padding: 20px 20px 18px 20px; float: left; display: none; }
@media (min-width: 990px) { .preview-bar__proteusthemes { display: inline-block; } }
.preview-bar__proteusthemes a { color: #999999; font-style: normal; text-decoration: none; font-weight: bold; }
.preview-bar__proteusthemes a:hover { text-decoration: underline; }

.preview-bar__purchase-button { float: right; background-color: #82b440; color: #ffffff; border-radius: 4px; padding: 7px 20px 8px 20px; text-decoration: none; position: relative; box-shadow: 0 2px 0 #6f9a37; margin: 11px 13px; }
@media (min-width: 569px) { .preview-bar__purchase-button { margin: 11px 23px; } }
.preview-bar__purchase-button::before { position: absolute; content: ""; width: 1px; height: 54px; top: -11px; left: -11px; background-color: #333333; }
@media (min-width: 569px) { .preview-bar__purchase-button::before { left: -21px; } }
.preview-bar__purchase-button:hover { background-color: #7aa93c; }

.preview-bar__remove-frame { float: right; color: #999999; text-decoration: none; padding: 0 20px 0 20px; border-left: 1px solid #333333; -webkit-transition: all .1s linear; transition: all .1s linear; font-size: 12px; line-height: 54px; }
.preview-bar__remove-frame:hover { color: #ffffff; }

.preview-bar__remove-frame__text { display: none; }
@media (min-width: 569px) { .preview-bar__remove-frame__text { display: inline-block; } }

.preview-bar__remove-frame__x { vertical-align: middle; padding-bottom: 2px; }
@media (min-width: 569px) { .preview-bar__remove-frame__x { padding-right: 7px; } }

.preview-bar__switcher { display: none; }
@media (min-width: 1100px) { .preview-bar__switcher { display: block; position: absolute; left: 60%; top: 12px; width: 120px; text-align: center; background-color: #121212; border-radius: 3px; overflow: hidden; } }
@media (min-width: 1600px) { .preview-bar__switcher { left: calc(50% - 60px); } }

.switcher-btn { display: block; float: left; width: 33.33%; box-sizing: border-box; height: 33px; padding-top: 7px; }
.switcher-btn > span { display: inline-block; background-repeat: no-repeat; background-position: center top; height: 19px; }
.switcher-btn--active { background-color: #454545; }
.switcher-btn--active > span { background-position: center bottom; }

.switcher--desktop > span { background-image: url("../images/desktop-icon.png"); background-size: 22px 38px; width: 22px; }
.switcher--tablet > span { background-image: url("../images/tablet-icon.png"); background-size: 15px 38px; width: 15px; }
.switcher--mobile > span { background-image: url("../images/mobile-icon.png"); background-size: 12px 38px; width: 12px; }