/* New In 15 include styles.

   developer:   marionm
   requires:    framework
   ========================================================================== */

/* ==========================================================================
   set variables
   ========================================================================== */

:root {
    --inc-bg: #eaf5fb;
    --inc-border: #a4d3e7;
    --inc-navy: #357294;
    --inc-red: #dd1100;
    --inc-text: #404040;
}

/* ==========================================================================
   header
   ========================================================================== */

#_new-in-15-header {
    color: #333;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    padding: 3rem 0;
    text-align: center;
}

#_new-in-15-header h1 {
    color: var(--inc-text);
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

#_new-in-15-header a { color: var(--inc-text); }

#_new-in-15-header a:hover { color: var(--inc-red); }

#_new-in-15-header ._grid {
    align-items: center;
    display: flex;
    justify-content: center;
}

#_new-in-15-header ._try {
    border-right: 1px solid #979797;
    padding-right: 2rem;
}

#_new-in-15-header ._try a {
    background: #fff;
    border-radius: .5rem;
    border: 2px solid var(--inc-red);
    color: var(--inc-red);
    display: inline-block;
    font-size: 1.2rem;
    padding: .5rem 1.5rem;
}

#_new-in-15-header ._try a:hover {
    background: var(--inc-red);
    color: #fff;
}

#_new-in-15-header ._training {
    border-right: 1px solid #979797;
    padding-right: 2rem;
    padding-left: 1.8rem;
}

#_new-in-15-header ._access { padding-left: 1.8rem; }

/* ==========================================================================
   shared
   ========================================================================== */

#_new-in-15 {
    color: #333;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

#_new-in-15 section { padding: 3rem 0; }

#_new-in-15 a { color: var(--inc-text); }

#_new-in-15 a:hover { color: var(--inc-red); }

/* 3 column grid
   ========================================================================== */

#_new-in-15 ._grid {
    display: grid;
    gap: 2rem 3.5rem;
    grid-template-columns: 1fr 1fr 1fr;
}

#_new-in-15 ._grid > div { position: relative; }

#_new-in-15 ._grid img {
    box-sizing: content-box;
    cursor: pointer;
    margin-bottom: 1rem;
}

#_new-in-15 ._grid h2 {
    color: var(--inc-text);
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 600;
    background: url('/inc/new-in-15/img/arrow-down.svg') no-repeat;
    background-position: right center;
    background-size: 9px 6px;
    display: inline;
    padding-right: 1rem;
}

#_new-in-15 ._grid h2:hover {
    background: url('/inc/new-in-15/img/arrow-down-hover.svg') no-repeat;
    background-position: right center;
    background-size: 9px 6px;
    color: var(--inc-red);
}

#_new-in-15 ._card-trigger._open + ._card-popout h2 {
    background: url('/inc/new-in-15/img/arrow-up.svg') no-repeat;
    background-position: right center;
    background-size: 9px 6px;
    color: var(--inc-red);
}

#_new-in-15 ._grid p {
    color: var(--inc-text);
    font-size: 1rem;
    font-weight: 400;
}

/* card effect
   ================================== */

#_new-in-15 ._card-trigger { cursor: pointer; }

#_new-in-15 ._card-popout {
    background: var(--inc-bg);
    box-shadow: 0 1px .5rem rgb(0, 0, 0, .25);
    cursor: default;
    display: none;
    left: -1rem;
    outline: 2px solid var(--inc-border);
    padding: 1rem;
    position: absolute;
    right: -1rem;
    top: -1rem;
    z-index: 0;
}

#_new-in-15 ._card-trigger._open + ._card-popout {
    display: block;
    z-index: 1;
}

/* card dropdown
   ================================== */

#_new-in-15 ._dropdown {
    display: none;
    margin-top: 1rem;
}

#_new-in-15 ._card-trigger._open + ._card-popout ._dropdown { display: block; }

#_new-in-15 ._dropdown p {
    border-bottom: 1px solid #ccc;
    display: block;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
}

#_new-in-15 ._dropdown p:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#_new-in-15 ._dropdown p span {
    color: var(--inc-text);
    font-weight: 600;
}

#_new-in-15 ._dropdown p span a { color: var(--inc-text); }

#_new-in-15 ._dropdown p span a:hover { color: var(--inc-red); }

#_new-in-15 ._dropdown p > a {
    border-radius: .25rem;
    border: 1px solid var(--inc-navy);
    color: var(--inc-navy);
    display: inline-block;
    font-size: .75rem;
    margin: 0 .1rem;
    padding: 0 .25rem;
}

#_new-in-15 ._dropdown p > a:hover {
    border: 1px solid var(--inc-red);
    color: var(--inc-red);
}

/* ==========================================================================
   stripe
   ========================================================================== */

#_new-in-15-stripe {
    background: var(--inc-bg);
    padding: 3rem 0;
}

#_new-in-15-stripe ._grid h2 { margin-bottom: .25rem; }

/* ==========================================================================
   main
   ========================================================================== */

#_new-in-15-main ._grid img { border: 1px solid #c7c7c7; }

#_new-in-15-main ._grid img:hover { border-color: #5FACCC; }

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    #_new-in-15 ._inner-wrapper { max-width: calc(350px + 2rem); }
    #_new-in-15 ._grid { grid-template-columns: 1fr; }
}

/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {
}

/* printer styles
   ========================================================================== */

@media print {
}