/* UTF-8 */

/*******************
 *      GENERAl
 * ******************/

body,html{
    background:#ffffff;
    font-family:'Roboto', sans-serif;
    margin:0px;
    padding:0px;
}
.column,.columns{
    height:100%;
}
/* ===== TAG ==== */
.NoPaddingBottom{padding-bottom: 0;}
.section-tag{
    background:#742B64;
    padding:5px 10px;
    color:#ffffff;
    font-size:0.8125rem;text-transform: uppercase;font-weight: 700;
}
.title-tag{margin-bottom: 0 !important;padding-bottom: 0;}
.title-tag .is-10{padding-bottom: 0;}
.title-tag .share{
    text-align:right;
    position:relative;
}
.title-tag .share img{
    width:35px;
    height:35px;
    display:inline-block;
    margin:0;
    padding:0;
    text-align:right;
}
.title-tag .share .social{
    position:absolute;
    width:auto;
    height:auto;
    padding:5px 12px;
    margin:0px;
    top:100%;
    right:0;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);

    background:#666666;
    color:#ffffff;
}
    .title-tag .share .social a{
        width:25%;
        margin-right:10px;
    }
        .title-tag .share .social a:last-of-type{
            margin-right:0;
        }

.title-tag .share .social.invisible{
    visibility:hidden;
}

.header .title-month.sub-intro > h1 {
    font-family:'Merriweather', serif;
    font-size:6.875rem;
    font-weight:bold;
    margin:0px;
    padding:0px;
}
    .header .title-month.sub-intro > h1{
        font-size:5rem;
    }
.header .title-month.sub-intro > p{
    font-size:1.125rem;
    font-family:'Roboto', sans-serif;
    font-weight:500;line-height: 1.5em;
}
.header .calendars{
    flex-wrap:wrap;
}
.header .calendar{
    flex-wrap:wrap;
}
.header .calendars p{
    display:block;
    line-height:1rem;
    text-align:right;
    font-family:'Merriweather', sans-serif;
    font-size:0.875rem;
}
.header .calendars .event-calendars{
    display:block;
    text-align:right;
    width:100%;
    margin:0px;
}
.header .calendars .event-calendars a{
    display:inline-block;
    text-align:center;
    margin-left:5%;
}
.header .calendadrs .event-calendars a img{
    width:22px;
    height:22px;
}

p.event  > span{
    font-size:12px;
    display:block;
    font-weight:bold;
    text-transform:uppercase;
}

/*******************
 *  SIDE COL FEAT.
 * ******************/
.content{margin-bottom: 0 !important;}
.feature-event{
    display:none;
    font-family:'Roboto', sans-serif;
    padding:0px;
    position:relative;
    width:33.33333%;
    height:auto;
    background:url('../img/main-feature.jpg') no-repeat;
    background-size: cover;
    background-position: top;  
}
.feature-event img{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
.feature-event span,
.main-feat-sm span{
    position:absolute;
    width:90%;
    height:auto;
    padding:10px 15px;
    left:0; right:0;
    bottom:2rem;
    background:rgba(0,0,0,0.85);
    color:#ffffff;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size:0.875rem;
    line-height:1rem;
    border-radius: 4px;
}
.main-feat-sm{
    display:none;
    position:relative;
}
/*******************
 *      CONTENT
 * ******************/
.theDates > div{
    border-right:solid 1px #dddddd; 
}
    .theDates > div:last-of-type{
    border-right:none;
    }
    @media screen and (max-width:1007px){
    }
    .theDates .aDate{
        line-height:1.35rem;
        min-height:125px;
 
    }
.theDates .aDate .date{
    font-size:1.875rem;
    font-family:'Merriweather', serif;
    font-weight:bold;
    color:#742B64;
    text-align:left;
    display:block;
    padding-left: 0;
    margin-bottom:.25em;
}
.theDates .aDate .event{
    font-family:'Roboto', sans-serif;
    font-size:1.2rem;
    font-weight: 400;
    color:#444;
    text-align:left;
}
 .aDate:not(:first-of-type){
    margin-top:20px;
}
/*******************
 *   MEDIA QUERIES
 * ******************/

@media screen and (max-width:767px){
    
     .aDate:not(:first-of-type){
        margin-top:5px;
    }
    .column, .columns{
        height:auto;
    }


    .header .calendars  p{
        text-align:left;font-size: 1.1rem;
    }
    .header .calendars .event-calendars{
        text-align:left;
    }
    .header .calendars .event-calendars a{
        float:left;
        margin-left:0px;
        margin-right:25px;
    }


    .feature-event{
        display:none;
    }
    .main-feat-sm{
        display:block;
    }
    .main-feat-sm img{
        width:100%;
        height:100%;
        display:block;
    }

    .header .calendars .event-calendars a img{width:30px;height:30px;}
    .theDates .aDate{
        margin-bottom: 20px;min-height: initial;border-bottom: 1px solid #ccc;padding-bottom: 20px;
    }
    
    .theDates > div{
        border-right:none;
    }
    
}

@media screen and (max-width:1008px){
    .main-feat-sm{
        display:block;
    }
    .main-feat-sm > img{
        width:100%;
    }

     .aDate:not(:first-of-type){
        margin-top:15px;
    }
}

/* TABLET */
@media screen and (min-width:678px){

}

/* LAPTOP */
@media screen and (min-width:1007px){
    .feature-event{
        display:block;
    }

}


/**
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}