/*

	2016 layout CSS.

*/

/* ----------------------------------------------
   ----------------------------------------------
   Large Screen desktops (Default)
   ----------------------------------------------
   ---------------------------------------------- */

#container.landing {
	padding-top: 0;
	}
#container.landing #content {
	margin-bottom: 0;
	}

/* VC image margin fix */

#container.landing #content .wpb_single_image { margin-bottom: 0 !important; }


/* Add angle icon to links on demand */
#content a.icon:after {
	content: "\f105" !important;
	display: inline-block;
	font-family: "Font Awesome 5 Pro";
	font-style: normal;
	font-weight: 300;
	line-height: 1;
	font-size: 90%;
	margin-left: 8px;
	}


/* Carousel
----------------------- */
#carousel-container #carousel { margin-bottom: 0 !important; } /* No margin below experience carousel */


/* Breadcrumb
----------------------- */
.home #breadcrumb { display: none; } /* no breadcrumb on the primary front page */


/* TBN tweak
----------------------- */
#content .posts-trio ul li h2 {
	font-size: 1.4em !important;
	}


/* Instagram 
----------------------- */

#instagramfeed {
	margin: 0 auto -20px auto !important;
	display: block;
	width: 100%;
	position: relative;
	}
#instagramfeed ul {
	margin: 0 !important; padding: 0 !important;
	list-style: none;
	width: 100%;
	background: #fff;
	}
	#instagramfeed ul li {
		margin: 0 !important; padding: 0 !important;
		background: #fff;
		position: relative;
		display: block;
		overflow: hidden !important;
		}

	/* Using GRID */
	/* Not supported in IE11. */
	
	#instagramfeed ul {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-rows: 1fr 1fr; 
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		}

	/* #instagramfeed ul li:nth-child(1) { grid-area: 1 / 1 / 3 / 3; } /* Feature to the left */
	#instagramfeed ul li:nth-child(1) { grid-area: 1 / 5 / 3 / 3; } /* Feature to the center */
	
	/* IE 10 & up */
	
	_:-ms-lang(x), #instagramfeed ul { display: inline !important; }
	_:-ms-lang(x), #instagramfeed ul li { width: 16.67%; float: left; }
	_:-ms-lang(x), #instagramfeed ul li:first-child { width: 33.3%; }


/* Links & images */

#instagramfeed ul li a {
	border: none !important;	
	}	
#instagramfeed ul li a:after {
	content: none !important;
	}

#instagramfeed ul li a img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover; /* hack-fix for vertically stretched thumbnails. This happens when a non-square IGTV/video title image appears in the grid. */
	-webkit-transition: opacity .1s ease-out;
	   -moz-transition: opacity .1s ease-out;
		-ms-transition: opacity .1s ease-out;
	     -o-transition: opacity .1s ease-out;
		 	transition: opacity .1s ease-out;
	}
#instagramfeed ul li:hover,
#instagramfeed ul li a:hover > img {
	opacity: .8;
	}


/* ----------------------------------------------
   ----------------------------------------------
   Small Screen desktops
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (min-width : 1115px) and (max-width: 1700px) { 
	
	
	
}



/* ----------------------------------------------
   ----------------------------------------------
   Tablets
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (min-width : 768px) and (max-width: 1114px) {
	


}



/* ----------------------------------------------
   ----------------------------------------------
   Tablet - Portrait
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (min-device-width : 841px) and (max-device-width : 1024px) and (orientation : portrait) {
	
	
	/* no side padding for text fix */
	.vc_row[data-vc-full-width] { padding-left: 20px !important; padding-right: 20px !important; }
	
	/* Instagram side padding fix */	
	#content .vc_row-no-padding { padding-left: 0 !important; padding-right: 0 !important; }
			
	/* Text padding fix for event blocks (MIW + GoBadgers) */
	.inner-padding .wpb_text_column .wpb_wrapper { padding-left: 20px !important; padding-right: 20px !important; }
	
	
}





/* ----------------------------------------------
   ----------------------------------------------
   Mobile
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (max-width: 840px) {
	
	/*  Layout Overrides
	----------------------- */
	.home #main { padding-top: 0; } /* No padding when carousel is present */
	
	/* VC overrides
	   (full-width rows etc.)
	----------------------- */
	
	/* no side padding for text fix */
	.vc_row[data-vc-full-width] { padding-left: 20px !important; padding-right: 20px !important; }
	
	/* Instagram side padding fix */	
	#content .vc_row-no-padding { padding-left: 0 !important; padding-right: 0 !important; }
	
	/* text-wrap / size fix for alpha slab "experience" row */
	#experience-header-row p { word-break: normal !important; font-size: 1.2em !important; }
	
	/* text-wrap / size fix for alpha slab "Events & Brock" row */
	#events-at-brock-row p { word-break: normal !important; font-size: .8em !important; }
	
	/* Text padding fix for event blocks (MIW + GoBadgers) */
	.inner-padding .wpb_text_column .wpb_wrapper { padding-left: 20px !important; padding-right: 20px !important; }
	
	/* bottom margin fix for a few rows */
	#the-brock-news-row { margin-bottom: -40px !important; }
	#experience-header-row { padding-top: 30px !important; }
	#events-at-brock-row { margin: -10px 0 0 0 !important; }
	#events-row { margin-bottom: -40px !important; }
	
	/* Instagram
	----------------------- */
	
	#instagramfeed ul {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr; 
		grid-template-rows: 1fr 1fr; 
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		}
	
	#instagramfeed ul li:nth-child(1) { grid-area: 1 / 1 / 3 / 3; } /* Feature to the left */
	#instagramfeed ul li:nth-child(6),
	#instagramfeed ul li:nth-child(7),
	#instagramfeed ul li:nth-child(8),
	#instagramfeed ul li:nth-child(9) { display: none }
		
}


@media only screen 
and (max-width: 360px) {
	
	#the-brock-news-header-row p { float: none; width: 100%; margin-top: 0 !important; }
	

}