/* ==========================================================================
   ------------------ Event Listings ------------------------
   ========================================================================== */

.eventInfo {width: 76%; float: right; display: block; margin-left: 2%;}
.cowEventInfo {width: 100%; float: none; display: block; margin: 0 .5em;}
#page-content .eventName {margin: .25em 0; color: #900028; font-size: 1.5em; line-height: 1.0em; font-style: normal; font-weight:400;}
#page-content .eventWrapper p, #page-content .cowEventInfo p {margin: .125em 0; padding: 0; font-size: .9em; line-height: 1.125em;}
#page-content .eventWrapper .eventTime {font-size: 1em;}
#page-content .eventWrapper .eventDescription {margin: .5em 0; font-size: 1.0em; line-height: 1.25em;}
#page-content .eventWrapper .eventLocation p {font-weight: 700;}

.dateBlock, .townBlock {padding: .75em 0; color: #fff; text-align: center; text-transform: uppercase; background-color: #007f61;}
	.dateBlock, .eventRange {width: 21%; float: left; display: block;} 	
	.townBlock {width: 94%; float: none; display: block; margin: 0 0 1em 0; padding: .75em 3%;} 	
#page-content .eventWrapper .eventMonth {margin: 0; padding: 0; font-size: .9em; line-height: 1em;}
#page-content .eventWrapper .eventCity {display: inline; margin: 0 auto; padding: 0; font-size: 1em; line-height: 1em;}
#page-content .eventWrapper .eventDate {margin: .125em 0 0 0; padding: 0; font-size: 1.125em; line-height: 1em; font-weight: bold;}
#page-content .eventWrapper .eventState {display: inline; margin: .125em 0 0 0; padding: 0; font-size: 1em; line-height: 1em; font-weight: normal;}
#page-content .eventWrapper .eventRange {margin: 1em 0; padding: 0; text-align: center; font-size: .65em; line-height: 1em;}
	.eventCity:after {content: ","}

.buzzIntro {position: relative; min-height: 50px;}
#page-content .buzzHeadline {margin: 0 0 0 60px; color: #900028; font-size: 1.5em;} 
	#page-content .buzzHeadline:before {content: "\201C"}
	#page-content .buzzHeadline:after {content: "\201D"}
.buzzIcon {position: absolute; top: 0; left: 0; width: 55px; height: 34px;}
.buzzAuthor {font-weight: bold;}
	.buzzAuthor a {font-weight: normal;}
	
	/* 400px/16px = 25em */
	@media all and (min-width: 25em) {
	.eventInfo {width: 80%;}
	.dateBlock, .eventRange {width: 17%; margin: 0;}
	.townBlock {width: 31%; float: left; display: block; margin: 0; padding: .75em 2%;} 	
	.cowEventInfo {width: 60%; float: right; display: block; margin: 0 0 0 2%;}
	#page-content .eventWrapper .eventCity {display: block; font-size: .75em;}
		#page-content .eventWrapper .eventCity:after {content: "";}
	#page-content .eventWrapper .eventState {display: block; font-size: 1.5em; font-weight: bold;}
	}

	/* 430px/16px = 26.875em */
	@media all and (min-width: 26.875em) {
	.cowEventInfo {width: 67%;}
	.townBlock {width: 25%;}
	#page-content .eventWrapper .eventRange {font-size: .75em;}
	}

	/* 460px/16px = 28.75em */
	@media all and (min-width: 28.75em) {
	}

	/* 520px/16px = 32.5em */
	@media all and (min-width: 32.5em) {
	.eventInfo {width: 83%;}
	.dateBlock, .eventRange {width: 14%;}
	}

	/* 580px/16px = 36.25em */
	@media all and (min-width: 36.25em) {
	.cowEventInfo {width: 73%;}
	.townBlock {width: 19%;}
	}

	/* 600px/16px = 37.5em */
	@media all and (min-width: 37.5em) {
	.eventInfo {width: 86%;}
	.dateBlock, .eventRange {width: 11%;}
	}

	/* 700px/16px = 43.75em */
	@media all and (min-width: 43.75em) {
	.eventInfo {width: 81%;}
	.dateBlock, .eventRange {width: 16%;}
	.cowEventInfo {width: 68%;}
	.townBlock {width: 24%;}
	}

	/* 880px/16px = 55em */
	@media all and (min-width: 55em) {
	.cowEventInfo {width: 73%;}
	.townBlock {width: 19%;}
	}

	/* 920/16px = 57.5em */
	@media all and (min-width: 57.5em) {
	.eventInfo {width: 85%;}
	.dateBlock, .eventRange {width: 12%;}
	}
	
	/* 1100/16px = 68.75em */
	@media all and (min-width: 68.75em) {
	.eventInfo {width: 88%;}
	.dateBlock, .eventRange {width: 9%;}
	}


.samplingEvent {
    margin-top: 15px;
    /*margin-top:1em;*/
	/*margin-bottom:1em;*/
    background-color: #fff3c8;
    padding: 10px 20px;
    border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border: 0px solid #000000;
	-webkit-box-shadow: 3px 3px 0px 0px rgba(198,197,188,1);
    -moz-box-shadow: 3px 3px 0px 0px rgba(198,197,188,1);
    box-shadow: 3px 3px 0px 0px rgba(198,197,188,1);
	text-align:center;
    float: left;
}

.samplingEvent p {
    color: #9e032c;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: bold !important;
	/*font-family: 'open_sansbold';*/
	font-weight:normal;
	margin-bottom:0;
}

.samplingEvent p .fa {
	font-size: 2em;
    vertical-align: sub;
    margin-left: 10px;
	color:#111;
}

@media all and (min-width: 1000px) {
    .samplingEvent-Left {
        width: calc(100% - 190px);
        float: left;
    }

    .samplingEvent {
        float: right;
        margin-top: 5px;
    }
}