/* START TEMPORARY CSS */

/* CSS below aplied to "View More" for the EVENTS and INSTAGRAM area */
/* move the CSS to the main CSS file */
.viewmore {
    vertical-align: text-bottom;
    font-size: 18;
}

/* DIV surrounding the WhatYouNeedToKnow area */
#WhatYouNeedToKnowMenu {
    overflow: hidden;
    clear: both;
}

/* extra space under WYNTK, but above the horizontal line */
#wyntk-home {
    margin-bottom: 40px;
}


/* add extra space above area with links located in three columns (below WYNTK) */
#secondMenu {
    padding-top: 43px;
}

/* height of area where event detail is displayed */
#tabs-home-events .flex-viewport  {
    /* height: 130px; 
    padding-bottom: 20px; */
}

/* space to left and bottom of events text */
#tabs-home-events .events-feed .events-flexslider .flex-viewport .slides li.eventCell {
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    /*
    height: 100%;
    border-right-style: solid;
    border-right-color: #ccc;
    border-right-width: 1px;
    padding-right: 3px;*/
}


/* END TEMPORARY CSS */







/* ************************************************************** */
/* Events Calendar                                                */
/* ************************************************************** */
#EventsCalendar .col-100 {
    margin-top: 20px;
}

/*
#Instagram .col-100 .row-title {
    margin-top: 20px;
}
*/

#EventsCalendar {
    margin-top: 40px;
}

#EventsCalendar {
    margin-top: 40px;
}

/* padding around the < More > in events */
#EventsCalendar .row-title .custom-navigation {
    padding-bottom: 15px;
    padding-top: 10px;
    padding-right: 10px;
}

 /* height of grey area where events are displayed */
#EventsCalendar .ui-tabs-panel {
    min-height: 200px;  
}

/* overwrite the "4_base.css" for margin-right instead */
@media (max-width: 1024px) {
#EventsCalendar .col .tabs {
    margin-left: 0px;
    /* margin-right: 30px; */
    
}
}

/* Instagram */

.instaslider {
    padding-bottom: 40px;
}

.instaslides {
    padding: 30px 0;
}

div#instagramSlider {
    margin-bottom: 40px;
}

.instaslider a {
    text-decoration: none;
    color: #444444;
}

.instaslider a:hover,
.instaslider a:focus {
    text-decoration: none;
    color: #330072;
}

.instaslider .slider_container {
    display: inline-block;
    width: 100%;
	position: relative;
	float: left;
}

.instaslider .slides {
    margin-left: 0px!important;
}

.instaslider .slides > li div {
	display: none;
	height: 280px;
	padding: 15px;
	line-height: 24px;
	background: #330072;
	color: #fff;
	overflow-x: auto;
}

.instaslider .slides > li img {
    width: 100%;
    max-height: 280px;
}

.instaslider .slides > li {
	width: 280px!important;
	padding: 20px;
	margin-left: 0px;
    margin-right: 0px!important;
}


/* Display the pointer icon on hover */
.instaslider .slides > li:hover {
	background: #E1E1E1;
	cursor: pointer;
}

/* Hide image on hover */
.instaslider .slides > li:hover img {	
	display: none;
}

/* Show DIV information on hover */
.instaslider .slides > li:hover div {
	display: block;
}

.emoji {
	display: inline-block !important;
	width: 18px !important;
}


/* Instagram text in upper left */
.row-title a {
    text-decoration: none;
    color: #444444;
    /* text-transform: uppercase; */
}

.row-title a:focus {
    outline: 2px dotted #330072;
}

/* Instagram nagivation in upper right */
.row .row-link {
    float: right;
    text-decoration: none;
    text-transform: none;
    color: #444444;
}

/* Instagram nagivation arrow in upper right */ 
.row .row-link span.icon.icon-toggleright,
.row .row-link span.icon.icon-toggleleft {
    vertical-align: middle;
}

/* Hide the AODA text sitting inside the span associated with the prev and next arrows */
/* CSS targeting is very specific here (we could be more loose with the selection) */
.instagram .col .custom-navigation .flex-prev span, 
.instagram .col .custom-navigation .flex-next span { 
    display: none; 
}

a#InstagramDisclaimer{ 
    font-size: 12px; text-decoration: none; text-transform: capitalize; 
}

a#InstagramDisclaimer > span{ 
    color: #444; 
    text-decoration: underline;
}

 /* Instagram 2018*/

.row.instagram a {
    text-decoration: none;
    color: #444444;
}



#instagramSlider .instaslides .instaslide > a:hover,
#instagramSlider .instaslides .instaslide > a:focus {
    text-decoration: none;
    color: #330072;
}

.row.instagram .slider_container {
    display: inline-block;
    width: 100%;
    position: relative;
    float: left;
}

#instagramSlider .instaslides .instaslide:hover a div {
    display: none;
    height: 280px;
    padding: 20px;
    line-height: 24px;
    background-color: #330072;
    color: #fff;
    overflow-x: auto;
}

#instagramSlider .instaslides .instaslide {
    width: 292.5px !important;
    height: 292.5px !important;
    padding: 11px;
    margin-left: 0;
    overflow: hidden;
    display: inline-block;
}

#instagramSlider .instaslides .instaslide > a{
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    display: block;
    width: 270px;
    height: 270px;
    line-height: 270px;
    position: relative;
}

#instagramSlider .instaslides .instaslide > a > img{
    max-width: 270px;
    /* max-height: 270px; */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    
}

#instagramSlider .instaslides .instaslide:hover {
    background: #E1E1E1;
    cursor: pointer;
}
#instagramSlider .instaslides .instaslide:hover img {	
    display: none;
}

#instagramSlider .instaslides .instaslide a div{ display: none;   position: absolute; top: 0;       left: 0; }
    
#instagramSlider .instaslides .instaslide:hover a div {
    display: block;
    width: 100%;
    text-align: left;
}


.emoji {
    display: inline-block !important;
    width: 18px !important;
}


#instagramSlider .instaslides .instaslide > a{
    display: block;
    overflow: hidden;
    max-height: 270px;
    line-height: 270px;
    height: 270px;
    background-color: #000;
}

#instagramSlider .instaslides .instaslide > a > img{
    display: inline-block; /*center image*/   
}