/* ANIMATIONS
--------------------------- */
@keyframes NAV-ROTATE {
  0% { transform:rotate(0); }
  100% { transform:rotate(-90deg); }
}

/* User Status */
.user-status { width:0; height:0; overflow:hidden; pointer-events:none; display:inherit; border:0; }


/* MAIN NAVS
--------------------------- */
[html-nav-active] [class*="-nav-wrap"] { z-index:2; }


/* LOGIN NAV
--------------------------- */
/* Logged-Out Nav */
[html-studio-user] .zc-login-nav-loggedout { display:none; }

/* Logged-In Nav */
.zc-login-nav-loggedin { display:none; }
[html-studio-user] .zc-login-nav-loggedin { display:flex; flex-direction:column; }

/* Login Nav Items */
.zc-login-nav-dropdown a {
  align-items:center; 
  background:hsla(0,0%,100%,var(--mobile-nav-item-background)); 
  border-radius:5px;
  box-sizing:border-box; 
  color:#fff; 
  cursor:pointer;
  display:flex; 
  flex-direction:row;
  padding:10px; 
  transition:background-color .3s;
  will-change:transform;
}
.zc-login-nav-dropdown a:hover { --mobile-nav-item-background:0; color:#fff; }
.zc-login-nav-dropdown a * { pointer-events:none; }
.zc-login-nav-dropdown > * > * + * { margin-top:var(--mobile-nav-gap); }
.zc-login-nav-dropdown svg { margin-right:10px; width:25px; height:25px; transform:translate3d(-2px,0,0); transition:transform .3s; }
.zc-login-nav-dropdown a:hover svg { transform:translate3d(0,0,0); }
.zc-login-nav-dropdown path { fill:#fff; }

/* Shared Header Item */
.zc-login-nav-dropdown .login-header { padding:5px 12px; display:flex; align-items:center; text-transform:capitalize; color:#fff; background:#13668f; border-radius:3px; }

/* User */
.zc-nav-user-avatar { margin-right:14px; width:20px; height:20px; border-radius:10px; transform:translateY(-1px); }
.zc-nav-user-avatar img { border-radius:10px; }
.zc-nav-user-name { flex:1 0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


/* MASKS
--------------------------- */
[class*="-nav-mask"] { z-index:1; position:fixed; top:0; left:0; width:100%; height:100%; display:none; }



/* MEDIA QUERIES (MIN)
----------------------------- */

/* TABLET:LANDSCAPE+ */
@media screen and (min-width:1024px) {
  /* PRIMARY NAV
  --------------------------- */
  /* Trigger */
  .zc-primary-nav-trigger { display:none !important; }
  /* Nav */
  .zc-primary-nav-wrap { height:100%; }
  .zc-primary-nav { height:100%; display:flex; align-items:center; }
  .zc-primary-nav > *,
  .zc-primary-nav > * > a { margin:0 .625rem; padding:0 .5rem; height:100%; display:flex; align-items:center; font-weight:600; color:#13668f; box-sizing:border-box; border:4px solid transparent; border-width:4px 0; }
  .zc-primary-nav > div { position:relative; margin:0; border:0; }
  .zc-primary-nav > * > a { margin:0; }
  .zc-primary-nav .active { border-bottom-color:#00baf0; }
  .zc-primary-nav .active-parent { border-bottom-color:#00baf0; }
  .zc-primary-nav [active] { color:#13668f; }
  .zc-primary-nav nav { position:absolute; top:46px; left:0; min-width:200px; visibility:hidden; pointer-events:none; background:#fff; border:1px solid #ebeef5; border-radius:10px; box-shadow:0 2px 10px rgba(110,110,110,.25); transform:translateY(3px); transition:transform .2s; }
  .zc-primary-nav nav:before,
  .zc-primary-nav nav:after { content:''; position:absolute; top:-21px; left:11px; border:1px solid transparent; }
  .zc-primary-nav nav:before { top:-20px; border-width:10px; border-bottom-color:#ebeef5; }
  .zc-primary-nav nav:after { top:-18px; left:12px; border-width:9px; border-bottom-color:#fff; }
  .zc-primary-nav > div:hover nav { visibility:visible; pointer-events:auto; transform:translateY(0); }
  .zc-primary-nav nav a { padding:.875rem 1rem; display:block; font-size:.9375rem; line-height:1.4; }
  .zc-primary-nav nav a + a { border-top:1px solid #ebeef5; }
  .zc-primary-nav .version { display:none; }
  .zc-primary-nav .download { display:none; }
  .zc-primary-nav .search { display:none; }
  .zc-primary-nav .login { display:none; }
  .zc-primary-nav svg { display:none; }
  /* Login Nav */
  .zc-primary-nav-wrap .zc-login-nav { display:none; }
}

/* CUSTOM DESKTOP */
@media screen and (min-width:1350px) {
  :root {
    --mobile-nav-border-radius:0 0 5px 5px;
    --mobile-nav-gap:10px;
    --mobile-nav-item-background:.05;
  }

  /* SECONDARY NAV
  --------------------------- */
  /* Trigger */
  .zc-secondary-nav-trigger { display:none !important; }
  /* Nav */
  .zc-secondary-nav-wrap { margin-left:auto; height:100%; display:flex; justify-content:flex-end; }
  .zc-nav-grid { height:100%; display:flex; align-items:center; justify-content:flex-end; }
  .zc-nav-grid > * { padding:0 .5rem; height:100%; display:flex; align-items:center; cursor:pointer; color:#13668f; font-weight:600; box-sizing:border-box; border:4px solid transparent; border-width:4px 0; }
  .zc-nav-grid > *:hover { color:#dc1257; }
  .zc-nav-grid .active { border-bottom-color:#00baf0; }
  .zc-nav-grid > * + * { margin-left:.75rem; }
  .zc-nav-grid > * * { pointer-events:none; }
  .zc-nav-grid svg { margin-right:.5rem; width:20px; height:20px; transform:scale(1); transition:transform .3s; }
  .zc-nav-grid > *:hover svg { transform:scale(1.1); }
  .zc-nav-grid path { --icon-fill:#00baf0; }
  .zc-nav-grid > .version { padding:0 12px; font-weight:400; background:#f4f4f4; border-left:1px solid #e9e9e9; border-right:1px solid #e9e9e9; }
  .zc-nav-grid > .version span span { font-weight:600; }
  .zc-nav-grid .version svg { width:21px; height:21px; transform:translateY(-1px) scale(1); }
  .zc-nav-grid > .version:hover svg { transform:translateY(-1px) scale(1.1); }
  /* Show and use secondary nav's mask for the user dropdown in desktop device widths */
  [html-nav-active="login"] .zc-secondary-nav-mask { display:block; }

  /* LOGIN NAV
  --------------------------- */
  .zc-login-nav { position:relative; }

  /* Login Trigger */
  .login { margin-left:1rem; width:50px; height:100%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:500; background:#f4f4f4; border:1px solid #e9e9e9; border-width:0 1px; transition:color .2s, background-color .05s, border-color .2s; }
  [html-nav-active="login"] .login { border-radius:0; color:#fff; background:#dc1257; border-color:#dc1257; }
  .login svg { margin:0; width:22px; height:22px; transform:scale(1); transition:transform .3s; }
  .login:hover svg { transform:scale(1.1); }
  .login path { --icon-fill:#00baf0; }
  [html-nav-active="login"] .login path { --icon-fill:#fff; }
  .zc-nav-user-avatar { margin-right:9px; transform:translateY(-1px); }
  
  /* Logged-In Nav */
  .zc-login-nav-loggedin { position:relative; height:100%; }
  .zc-login-nav-dropdown { 
    background:linear-gradient(135deg, #13668f, #00baf0); 
    border-radius:var(--mobile-nav-border-radius);
    box-sizing:border-box; 
    display:none;
    right:0;
    overflow:auto;
    padding:20px; 
    position:absolute; 
    top:50px;
    width:250px; 
    z-index:3;
  }
  [html-nav-active="login"] .zc-login-nav-dropdown { display:block; }

}



/* MEDIA QUERIES (ONLY)
----------------------------- */

/* TABLET:PORTRAIT TO CUSTOM DESKTOP WIDTH */
@media screen and (min-width:1024px) and (max-width:1349px) {
  :root {
    --mobile-nav-border-radius:0 0 5px 5px;
    --mobile-nav-gap:10px;
    --mobile-nav-item-background:.05;
    --mobile-nav-max-width:350px;
  }

  /* SECONDARY NAV
  --------------------------- */
  /* Trigger */
  .zc-secondary-nav-trigger { right:0; display:flex; border-left:1px solid transparent; }
  [html-nav-active="secondary"] .zc-secondary-nav-trigger { border-left-color:#e9e9e9; }
  /* Icon:3-Dots Vertical */
  .zc-secondary-nav-trigger .icon-more-vert { width:25px; height:25px; }
  [html-nav-active="secondary"] .icon-more-vert { display:none; } 
  /* Icon:3-Dots Vertical */
  [class*="-nav-trigger"] .icon-close { display:none; width:20px; height:20px; display:none; transform:rotate(0); }
  [html-nav-active="secondary"] [class*="-nav-trigger"] .icon-close { display:block; animation:NAV-ROTATE .4s forwards; }
  [class*="-nav-trigger"] .icon-close path { fill:#fff; }
  
  /* Nav */
  .zc-secondary-nav-wrap { 
    background:linear-gradient(180deg, #13668f, #00baf0); 
    border-radius:var(--mobile-nav-border-radius);
    box-sizing:border-box; 
    display:none;
    right:0;
    overflow:auto;
    padding:20px; 
    position:fixed; 
    top:50px; 
    max-width:var(--mobile-nav-max-width);
    width:100%; 
  }
  [html-nav-active="secondary"] .zc-secondary-nav-wrap { display:block; }
  .zc-nav-grid { 
    display:grid; 
    grid-template-columns:1fr;
    grid-column-gap:var(--mobile-nav-gap); 
    grid-row-gap:var(--mobile-nav-gap); 
  }
  .zc-nav-grid > * { 
    align-items:center; 
    background:hsla(0,0%,100%,var(--mobile-nav-item-background)); 
    border-radius:5px;
    box-sizing:border-box; 
    color:#fff; 
    cursor:pointer;
    display:flex; 
    flex-direction:row;
    justify-content:flex-start;
    min-height:1px;
    padding:10px; 
    transition:background-color .3s;
    will-change:transform;
  }
  .zc-nav-grid > *:hover { --mobile-nav-item-background:0; color:#fff; }
  .zc-nav-grid > * svg { margin:0 10px 0 0; width:25px; height:25px; transform:translate3d(-2px,0,0); transition:transform .3s; }
  .zc-nav-grid .download svg { width:22px; height:22px; transform:translate3d(1px,0,0); }
  .zc-nav-grid > *:hover svg { transform:translate3d(0,0,0); }
  .zc-nav-grid .download:hover svg { transform:translate3d(2px,0,0); }
  .zc-nav-grid > *:hover span { transform:scale(1); }
  .zc-nav-grid path { --icon-fill:#fff; }

  /* Logged-Out Nav *//* Logged-Out Nav */
  .zc-login-nav-loggedout { 
    display:grid; 
    grid-template-columns:1fr;
    grid-column-gap:var(--mobile-nav-gap); 
    grid-row-gap:var(--mobile-nav-gap); 
    margin-top:10px;
  }

  /* Mask */
  [html-nav-active="secondary"] .zc-secondary-nav-mask { display:block; }
}


/* MEDIA QUERIES (MAX)
----------------------------- */

/* NON-DESKTOP */
@media screen and (max-width:1349px) {
  /* TRIGGERS
  --------------------------- */
  [class*="-nav-trigger"] { 
    align-items:center;
    cursor:pointer;
    height:50px; 
    justify-content:center;
    opacity:1;
    pointer-events:auto;
    position:fixed; 
    top:0; 
    width:50px; 
    z-index:2; 
    transition:opacity .4s;
  }
  [class*="-nav-trigger"][init] { opacity:0; pointer-events:none; }
  [html-nav-active] [class*="-nav-trigger"] { background:#dc1257; }
  [class*="-nav-trigger"] > * { pointer-events:none; }
  /* Close Icon */
  [class*="-nav-trigger"] .icon-close { display:none; width:20px; height:20px; display:none; transform:rotate(0); }
  [html-nav-active] [class*="-nav-trigger"] .icon-close { display:block; animation:NAV-ROTATE .4s forwards; }
  [class*="-nav-trigger"] .icon-close path { fill:#fff; }

  /* Login Trigger */
  .login { display:none; }

  /* Studio Header */
  .zs-studio-header { margin-top:20px; padding:5px 12px !important; min-height:1px !important; display:flex; flex-direction:row !important; align-items:center; justify-content:flex-start !important; text-transform:capitalize; color:#fff !important; background:#13668f !important; border-radius:3px !important; }
  .zs-studio-header:hover { transform:none !important; }
  .zs-studio-header svg { margin:0 13px 0 0 !important; width:20px !important; height:20px !important; border-radius:10px; transform:translateY(-1px) !important; }
  .zs-studio-header:hover span { transform:none !important; }

  /* User */
  .zc-nav-user { margin-top:30px; }

}

/* MOBILE AND TABLET:PORTRAIT */
@media screen and (max-width:1023px) {
  :root {
    --mobile-nav-border-radius:0 0 5px 5px;
    --mobile-nav-height:auto;
    --mobile-nav-max-width:450px;
    --mobile-nav-gap:10px;
    --mobile-nav-item-background:.05;
    --mobile-nav-primary-trigger-width:23px;
  }
  
  /* PRIMARY NAV
  --------------------------- */
  /* Trigger */
  .zc-primary-nav-trigger { 
    display:flex;
    justify-content:flex-start;
    left:0;
    padding-left:calc(2rem + 2px);
    width:calc(50px - calc(var(--mobile-nav-primary-trigger-width) / 2) + calc(2px / 2));
  }
  /* IE 11 */ _:-ms-fullscreen, :root .zc-primary-nav-trigger { right:0; left:auto; padding-right:0; padding-left:0; justify-content:center; border-width:0 0 0 1px; }
  .zc-primary-nav-trigger .icon-menu { width:var(--mobile-nav-primary-trigger-width); height:20px; }
  [html-nav-active="primary"] .zc-primary-nav-trigger .icon-menu { display:none; }
  
  /* Nav */
  .zc-primary-nav-wrap { 
    background: linear-gradient(135deg, #13668f, #00baf0); 
    border-radius: var(--mobile-nav-border-radius);
    box-sizing: border-box; 
    display: none;
    height: var(--mobile-nav-height);
    left: 0;
    overflow: auto;
    padding: 2rem; 
    position: fixed; 
    top: 50px; 
    max-width: var(--mobile-nav-max-width);
    width: 100%; 
  }
  [html-nav-active="primary"] .zc-primary-nav-wrap { display:block; }
  .zc-primary-nav { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--mobile-nav-gap); 
    grid-row-gap: var(--mobile-nav-gap); 
  }
  /* IE 11 */ _:-ms-fullscreen, :root .zc-primary-nav { display:flex; flex-wrap:wrap; transform:translate(-10px,-2%); }
  .zc-primary-nav > * { 
    align-items: center; 
    background: hsla(0,0%,100%,var(--mobile-nav-item-background)); 
    border-radius: 5px;
    box-sizing: border-box; 
    color: #fff; 
    cursor: pointer;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    min-height: 90px;
    padding: 20px 0; 
    transition: background-color .3s;
    will-change: transform;
  }
  /* IE 11 */ _:-ms-fullscreen, :root .zc-primary-nav > * { margin-top:5px; margin-left:2%; padding:0; flex-basis:48%; background:rgba(255,255,255,.1); }
  .zc-primary-nav > * * { pointer-events:none; }
  .zc-primary-nav > div a { pointer-events:auto; }
  .zc-primary-nav > * > a { display:flex; flex-direction:column; align-items:center; color:#fff; }
  .zc-primary-nav > * > a:hover { color:#fff; }
  .zc-primary-nav > *:hover { --mobile-nav-item-background:0; color:#fff; }
  .zc-primary-nav > * svg { margin-bottom:var(--mobile-nav-gap); width:30px; height:30px; display:block; transform:scale(1); transition:transform .3s; }
  .zc-primary-nav nav { display:none; }
  .zc-primary-nav .download { display:none; }
  .zc-primary-nav.login { display:none; }
  .zc-primary-nav > *:hover svg { transform:scale(1.2) translate3d(0,1px,0); }
  .zc-primary-nav path { fill:#fff; }
  .zc-primary-nav > * span { transform:scale(1) translate3d(0,0,0); transition:transform .3s; }
  .zc-primary-nav > *:hover span { transform:scale(1.05) translate3d(0,-1px,0); }

  /* Login Nav */
  .zc-login-nav .login { display:none; }

  /* Mask */
  [html-nav-active="primary"] .zc-primary-nav-mask { display:block; }


  /* LOGIN NAV
  --------------------------- */
  /* Logged-Out Nav */
  .zc-login-nav-loggedout { margin-top:10px; grid-template-columns:1fr; }
  .zc-login-nav-loggedout > a { padding:10px; min-height:1px; flex-direction:row; justify-content:flex-start; }
  .zc-login-nav-loggedout > a svg { margin:0 10px 0 0; width:25px; height:25px; transform:translate3d(-2px,0,0); transition:transform .3s; }
  .zc-login-nav-loggedout > .download svg { width:18px; height:18px; transform:translate3d(1px,0,0); }
  .zc-login-nav-loggedout > a:hover svg { transform:translate3d(0,0,0); }
  .zc-login-nav-loggedout > .download:hover svg { transform:translate3d(3px,0,0); }
  .zc-login-nav-loggedout > a:hover span { transform:scale(1); }

  
  /* SECONDARY NAV
  --------------------------- */
  .zc-secondary-nav-trigger, .zc-secondary-nav-wrap { display:none; }
}

/* CUSTOM MOBILE */
@media screen and (max-width:500px) {
  :root {
    --mobile-nav-border-radius:0;
    --mobile-nav-height:calc(100% - 50px);
    --mobile-nav-max-width:none;
  }
  /* MASKS
  --------------------------- */
  [class*="-nav-mask"] { display:none; }

  /* PRIMARY NAV
  --------------------------- */
  /* Trigger */
  .zc-primary-nav-trigger { right:0; left:auto; padding-right:calc(2rem + 2px); padding-left:0; justify-content:flex-end; border-width:0 0 0 1px; }
}
@media screen and (max-width:370px) {
  /* PRIMARY NAV
  --------------------------- */
  .zc-primary-nav { grid-template-columns:1fr; }
  .zc-primary-nav > * { padding:10px; min-height:1px; flex-direction:row; justify-content:flex-start; }
  .zc-primary-nav > * * { pointer-events:none; }
  .zc-primary-nav > * svg { margin:0 10px 0 0; width:25px; height:25px; transform:translate3d(-2px,0,0); transition:transform .3s; }
  .zc-primary-nav > .download svg { width:18px; height:18px; transform:translate3d(1px,0,0); }
  .zc-primary-nav > *:hover svg { transform:translate3d(0,0,0); }
  .zc-primary-nav > .download:hover svg { transform:translate3d(3px,0,0); }
  .zc-primary-nav > *:hover span { transform:scale(1); }
}