.workshop-list
{
    width             : 100%;
    display           : -webkit-box;    /* OLD - iOS 6-, Safari 3.1-6 */
    display           : -moz-box;       /* OLD - Firefox 19- (buggy but mostly works) */
    display           : -ms-flexbox;    /* TWEENER - IE 10 */
    display           : -webkit-flex;   /* NEW - Chrome */
    display           : flex;           /* NEW, Spec - Opera 12.1, Firefox 20+ */
    /* contained elements will flow in row direction */
    flex-direction    : row wrap;
    -webkit-flex-flow : row wrap;
    -moz-flex-flow    : row wrap;
    -ms-flex-flow     : row wrap;
    flex-flow         : row wrap;
    flex-wrap         : wrap;
    margin            : 0;
    float             : left;
    clear             : both;
}
.workshop-list::after {
    clear:both;
}
.workshop-box
{
    width             :   96%;
    -webkit-box-flex  : 1 96%;
    -moz-box-flex     : 1 96%;
    -webkit-flex      : 1 96%;
    -ms-flex          : 1 96%;
    flex              : 1 96%;
    border            : 1px solid #dddddd;
    border-top        : 1em solid #e0d2f9;
    margin            : 1%;
    margin-top        : 1em;
    margin-bottom     : 1em;
    padding           : 1%;
    border-radius     : 0.25em;
    background-color  : #efefef;
    position          : relative;
}
.workshop-box>a
{
    position         : absolute;
    width            : 100%;
    height           : 100%;
    top              : 0;
    left             : 0;
    text-decoration  : none;             /* Makes sure the link doesn't get underlined */
    z-index          : 10;               /* raises anchor tag above everything else in div */
    background-color : white;            /* workaround to make clickable in IE */
    opacity          : 0;                /* workaround to make clickable in IE */
    filter           : alpha(opacity=1); /* workaround to make clickable in IE */
}
.workshop-box:hover {
    background-color: #ffffe6;
}
.workshop-box-date
{
    font-size      : 1.0em;
    font-weight    : bold;
    color          : #336600;
    letter-spacing : 3px;
    margin-bottom  : 1em;
    margin-top     : 0.5em;
}

/* ------------------------------------------------------------------------------------ */
/*   workshop-box-title                                                                 */
/*   workshop-box-subtitle                                                              */
/* ------------------------------------------------------------------------------------ */

.workshop-box-title
{
    font-size      : 1.2em;
    font-weight    : bold;
    color          : #2C3E50;
    text-transform : uppercase;
}
.workshop-box-subtitle
{
    font-size      : 1.05em;
    letter-spacing : 2px;
    margin-bottom  : 1em;
    color          : #828282;
}

@media only screen and (min-width : 480px) and (max-width : 767px)
{
    .workshop-box-title    { font-size : 1.3em; }
    .workshop-box-subtitle { font-size : 1.1em; }
}

@media only screen and (min-width : 768px) and (max-width : 991px)
{
    .workshop-box-title    { font-size : 1.4em; }
    .workshop-box-subtitle { font-size : 1.15em; }
}

@media only screen and (min-width : 992px)
{
    .workshop-box-title    { font-size : 1.5em; }
    .workshop-box-subtitle { font-size : 1.2em; }
}

/* ------------------------------------------------------------------------------------ */

.workshop-box-abstract
{
    text-align: justify;
}
.workshop-box-details
{
    margin-top    : 1.5em;
    border-top    : 1px dashed #aaa;
    padding-top   : 1.5em;
    margin-bottom : 0.5em;
    height        : 100%;
}
.workshop-box-details-row
{
    margin-left    : 3.0em;
    margin-bottom  : 0.7em;
    letter-spacing : 2px;
}
.WorkshopGender
{
    /*width: 100%;
    text-align: right;*/
    line-height: 1;
    float: right;
}

/* <>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/*  Display size: 480px <= size <= 767px                                                */
/* <>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

@media only screen and (min-width : 480px) and (max-width : 767px)
{
    .workshop-box
    {
        width              :   50%;
        -webkit-box-flex   : 1 50%;
        -moz-box-flex      : 1 50%;
        -webkit-flex       : 1 50%;
        -ms-flex           : 1 50%;
        flex               : 1 50%;
    }
}

/* <>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/*  Display size: 768px <= size <= 991px                                                */
/* <>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

@media only screen and (min-width : 768px) and (max-width : 991px)
{
    .workshop-box
    {
        width              :   33.3333%;
        -webkit-box-flex   : 1 33.3333%;
        -moz-box-flex      : 1 33.3333%;
        -webkit-flex       : 1 33.3333%;
        -ms-flex           : 1 33.3333%;
        flex               : 1 33.3333%;
    }
    .workshop-box-date
    {
        font-size      : 1.1em;
    }
}

/* <>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/*  Display size: 992px <= size                                                         */
/* <>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

@media only screen and (min-width : 992px)
{
    .workshop-box
    {
        width            :   24%;
        -webkit-box-flex : 1 24%;
        -moz-box-flex    : 1 24%;
        -webkit-flex     : 1 24%;
        -ms-flex         : 1 24%;
        flex             : 1 24%;
    }
    .workshop-box-date
    {
        font-size      : 1.2em;
    }
}