/* BEGIN: Slide In Content Tile */


.slideinContentTile,
.imageContentTile
{
    overflow: hidden;
    height: auto;
    padding: 0;

    background-color: #FFFFFF;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
    cursor: default;
    /* Permalink - use to edit and share this 
    gradient: http://colorzilla.com/gradient-editor/#dcdcdc+0,bebebe+100 */
    background: #dcdcdc;
    background: -moz-linear-gradient(top, #dcdcdc 0%, #bebebe 10%);
    background: -webkit-linear-gradient(top, #dcdcdc 0%,#bebebe 10%);
    background: linear-gradient(to bottom, #dcdcdc 0%,#bebebe 10%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#bebebe',GradientType=0 );
}

.slideinContentTile > *,
.imageContentTile > *
{
    display: block;
}

.slideinContentTile input[type='checkbox']
{
    position: absolute;
    left: -10000px;
}

.slideinContentTile > h2,
.slideinContentTile label,
.imageContentTile > h2,
.imageContentTile > label
{
    text-align: center;
    margin: 0;
    padding: 0.1em 1.25em 0.15em 0.15em;
    min-height: 2.5em;
    font-size: 1.2em;
}

.imageContentTile > h2
{
    /* using flex to make the text float in the middle of the 
        heading container.
    */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imageContentTile > h2, 
.imageContentTile label
{
    cursor: pointer;
}

.slideinContentTile > h2, 
.slideinContentTile label
{
    cursor: pointer;

    background-position: calc(100% - 0.25em) 0.25em;

    background-size: 1em;
    background-image: url('/images/das2017/icons/32x32-sym-information.png');
    background-repeat: no-repeat;
}

.slideinContentTile:hover,
.imageContentTile:hover
{
    background: #acacac;
    background: -moz-linear-gradient(top, #acacac 0%, #bebebe 40%);
    background: -webkit-linear-gradient(top, #acacac 0%,#bebebe 40%);
    background: linear-gradient(to bottom, #acacac 0%,#bebebe 40%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#acacac', endColorstr='#bebebe',GradientType=0 );
}

.slideinContentTile > a,
.imageContentTile > a
{
    position: relative;
}

.slideinContentTile > a > img,
.imageContentTile > a > img
{
    width: 100%;
    height: 100%;
}

.slideinContentTile > a > div,
.imageContentTile > a > div
{
    display: none;
}

.slideinContentTile a:hover .descriptionWrapper,
.slideinContentTile input[type='checkbox']:checked ~ a .descriptionWrapper
{
    animation: slideinContentTile_slideDown 0.25s ease;
    display: block;
    position: absolute;
    top: 0;
    padding: 0.5em;
    height: 100%;
    width: 100%;
    background: rgba(40, 40, 40, 0.85);
    color: white;
}

@media (min-width: 768px)
{
    .slideinContentTile > h2, 
    .slideinContentTile label,
    .imageContentTile > h2
    .imageContentTile > label
    {
        background-size: 1em;
    }
}

@keyframes slideinContentTile_slideDown
{
    from
    {
        height: 0;
    }

    to
    {
        height: 100%;
    }
}

/* END: Slide In Content Tile */