/*
Theme Name: WPZOOM Demos
Theme URI: http://demo.wpzoom.com/
Description: WPZOOM Demos switcher
Author: WPZOOM
*/

@font-face {
  font-family: 'demo';
  src: url('fonts/demo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'demo' !important;
  speak: none;
  font-style: normal;
	font-display: block;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* General reset rules */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, em, img,
strong, b, i, dl, dt, dd, ol, ul, li, fieldset, label {
    background: transparent;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

body {
    line-height: 1;
    font-size: 14px;
    *font-size:small;
    text-align: center;
    font-family: "proxima-nova-1","proxima-nova-2",sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    outline: none;
}

body, html  {
    height: 100%;
    overflow: hidden;
}

html { -webkit-font-smoothing: antialiased;  -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }


body {
    background: #f3f3f3 url("https://demo.wpzoom.com/wp-content/uploads/2020/12/preload.gif") no-repeat 50% 50%;
    overflow: visible;
}

#header {
    background: #2F4974;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    padding: 5px 0;

    -webkit-box-shadow: 0px 0px 20px 0px rgba(84,110,122,0.25);
    -moz-box-shadow: 0px 0px 20px 0px rgba(84,110,122,0.25);
    box-shadow: 0px 0px 20px 0px rgba(38,50,56,0.25);
}

#header_content {
    margin: 0 auto;
    max-width: 98%;
}


#logo {
  float: left;
  width: 130px; }

#logo a {
  max-width: 130px;
  display: block;
  overflow: hidden;
  height: 40px;
  margin-top: 18px; }

  #logo a img { max-width: 100%;
    height: auto;
}

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max-moz-device-pixel-ratio: 2) {
  #logo img {
    display: none; }
  #logo a {
    background: url(images/logo@2x.png) top no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100%; }
}

#menu {
    width: 100%;
}

#menu li, #menu .style, #menu .nextWP, #menu .close {
    display: block;
    float: left;
    text-align: left;
    line-height: 38px;
}

#menu .theme {
    line-height: 38px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background: #2F4974;
}

.theme_selector {
    margin: 8px 0;
    padding-right: 5px;
    width: 330px;
    float: left;
    text-align: left;
    background: #2F4974;
    position: relative;
    height: 39px;
}

#menu .list {
    display: none;
    background: #405d8c;
    overflow: auto;
    position: absolute;
    bottom: 38px;
    left: 0;
    width: 330px;
    text-align: left;
    box-shadow: 0 -2px 8px -4px #000;
    border-radius: 2px 2px 0 0;
}

#menu .theme_selector .list {
    height: 380px;
}

#menu .style .list {
    overflow:hidden;
    /*height: 150px;*/
    width: 194px;
}


#menu .lactive {
    display: block;
}

#menu .list li {
    width: 100%;
    position: relative;
}

#menu .list li:first-child a {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
#menu .style .list li:first-child a {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

#menu .list .p {
    display: none;
}

#menu .list a {
    display: block;
    height: 37px;
    padding: 0 15px;
    text-decoration: none;
}


#menu .list a span {
    padding-right: 0;
    color: #fff;
    opacity: .6;
}

#menu .list a:hover, #menu .list li.current {
    background: #298fef;
}

#menu .list a:hover h2, #menu .list li.current h2 {
    color: #fff;
}

#menu .list a:hover span, #menu .list li.current span {
    color: #fff;
}

#menu .style {
    margin: 8px 14px;
    padding-right: 5px;
    width: 194px;
    height: 41px;
    position: relative;
}

#menu .style span { display: none; }

#menu .style li {
    display: none;
}

.viewport {
    float: left;
}

.viewport button {
    float: left;
    display: block;
    margin: 0;
    height: 50px;
    min-width: 35px;
    background: none;
    border: none;

    color: #fff;
    font-size: 32px;
    font-family: 'demo' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.viewport button:focus {
    outline: none;
}

.viewport .b-n,
.viewport .b-n, .b-n.v-active {
    opacity: .1;
}

.viewport .b-a {
    opacity: .6;
}

.viewport .b-a:hover,
.viewport .b-a.v-active {
    opacity: 1;
    cursor: pointer;
}


.viewport .desktop {
    margin-top: 3px;
}

.viewport .desktop:before {
  content: "\e906";
  font-size: 33px;
}

.viewport .tablet {
    margin-left: 5px;
    margin-top: 2px;
}

.viewport .tablet:before {
    content: "\e908";
    font-size: 38px;
}

.viewport .mobile:before {
    content: "\e958";
    font-size: 26px;
}

#menu .nextWP {
    margin-left: 20px;
}

#menu .nextWP a {
   display: block;
    vertical-align: middle;
    background-color: #2B6;
    color: #fff;
    font-weight: 600;
    line-height: 100%;
    font-size: 18px;
    margin-top: 7px;
    padding: 10px 20px 12px;
    text-decoration: none;
    border-radius: 2px;
    cursor: pointer;
     outline: none;
    position: relative;
}

#menu .nextWP a:before {
    -webkit-font-smoothing: antialiased;
    font-family: 'demo';
    margin: 0 8px 0 0;
    color: #fff;
    content: "\e901";
    font-size: 18px;
}

#menu .nextWP.download a:before {
    content: "\e905";
    font-size: 20px;
    font-weight: normal;

}

#menu .download a {
    background: #3496ff;
}
#menu .download a:hover {
    background: #4fa3fd;
}
#menu .purchase a:hover {
    background: #0C7;
    color: #fff;
}




#menu .close a {
    display: block;
    height: 22px;
    width: 23px;
    position: relative;
    margin: 7px 0 0 20px;
    opacity: 1;
    text-decoration: none;
}

#menu .close a:before {
    -webkit-font-smoothing: antialiased;
    font-family: 'demo';
    margin: 0 8px 0 0;
    color: #fff;
    content: "\e902";
    display: block;
    font-size: 18px;
}

#menu .close a:hover {
    opacity: 1;
}


#menu .theme h2 {
    color: #fff;
    padding-right: 14px;
    font-size: 16px;
    font-weight: 600;
    vertical-align: middle;
    display: inline-block;
}

#menu .style h2 {
    color: #fff;
    padding-right: 14px;
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}

#menu .style .list li {
    line-height: 1;
    height: auto;
}

#menu .style .list a {
    height: auto;
    padding: 8px 15px;
}

#menu .theme span {
    padding-right: 44px;
    color: #A5B8D0;
    font-size: 12px;
    font-weight: 600;
    float: right;
    text-transform: uppercase;
    padding-top: 0;
}

#menu .theme span.popular {
    font-size: 12px;
    font-weight: 600;
    float: none;
    display: inline-block;
    width: auto;
    vertical-align: middle;
    background-color: #2B6;
    color: #fff;
    text-transform: uppercase;
    line-height: 100%;
    padding: 4px 10px;
    text-decoration: none;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    position: relative;
    color: #fff;
    opacity: .8;
}


    #menu .purchase a:hover {
        background: #0C7;
        color: #fff;
    }


.input-outer {
    z-index: 100;
    position: relative;
    height: 33px;
    padding: 0px 0 6px 15px;
    border-radius: 2px;
    background: #405d8c;
}

.input-outer:hover,
#menu div .active {
    background: #3c567f;
}

#menu div .active {
    border-radius: 0 0 2px 2px;
}

.input-inner {
    background: none;
    display: block;
    position: relative;
    left: 0;
    height: 39px;
    text-decoration: none;
}

.input-inner:after {
    -webkit-font-smoothing: antialiased;
    font-family: 'demo';
    margin: 0 8px 0 0;
    color: #fff;
    content: "\e900";
    font-size: 18px;
    position: absolute;
    right: 0;
    top: 10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

#menu .active .input-inner:after {
    transition: all .25s;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.right-fixed-group {
    float: right;
}

#preview {
    background: #2F4974;
    padding: 4px 4px 0;
    position: absolute;
    height: auto;
    width: 350px;
    text-align: left;
}

#preview img {
    max-width: 100%;
    height: auto;
}

.loading-cursor {
    cursor: progress;
}

.tipsy { font-size: 12px; position: absolute; padding: 5px; z-index: 100000; display: none; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }

.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }

/* Rules to colour arrows */
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }

.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }

@media screen and (max-width: 1180px) {

    .left-fixed-group { display: none;   }

    #menu .theme { float: left; }

}

@media screen and (max-width: 980px) {

    #menu .style { display: none; }

    .theme_selector { margin-right: 8px; }
}

@media screen and (max-width: 800px) {
    #menu .list a span ,
    #menu .theme span { display: none; }
}

@media screen and (max-width: 700px) {


    #menu .viewport { display: none; }
}

@media screen and (max-width: 580px) {
    #menu .nextWP { display:none; }
}


@media screen and (max-width: 400px) {

    #menu .theme_selector .list,
    .theme_selector { width: 280px; }

}

@media screen and (max-width: 330px) {

    #menu .theme_selector .list,
    .theme_selector { width: 250px; }

}


.blackf { position: relative; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);  text-align: center;  padding: 13px 0;   font-size: 16px;background: #FFD246; border-bottom: 2px solid #E89F13;color: #735A1B;}
.blackf code { font-family: monospace; background: #EC6016; color: #fff; padding: 5px 8px;}