/*
*************************************************

United States Holocaust Memorial Museum

Common element styles, for elements that appear
on many pages across templates that aren't part
of the global site wrapper. Styles must be 
namespaced (id and class selectors only, 
no elements) to be safely included globally, and 
care should be taken to make sure this file only 
contains styles that are used often enough to 
justify their inclusion everywhere.

Author: Russ Sitka

*************************************************
*/

/* Breadcrumb share bar, located just below global header */

#breadcrumb-share {
	background-color:#F1EDE8;
	width:100%;
	box-shadow: 0 1px 10px #808080;
	position:relative;
	z-index:1;
	
	-webkit-box-shadow: 0 1px 10px #808080;
}

.breadcrumb-share-wrap { 
	padding: 0 20px;
	height:45px;
	max-width:1300px;
	display:flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	
	display:-webkit-flex;
	-webkit-justify-content: flex-end;
	-webkit-align-items: center;
}

.breadcrumb-share-wrap ul.breadcrumbs {
	margin: auto 0;
	padding:0;
    display:none;
}

.breadcrumb-share-wrap ul.breadcrumbs li {
	display:block;
	float:left;
    font: bold 11px Arial,sans-serif;
    list-style: outside none none;
    margin: 0 5px 0 0;
    white-space: nowrap;
    text-transform: uppercase;
}

.breadcrumb-share-wrap ul.breadcrumbs li::after {
    color: #666;
    content: ">";
    font: 11px Arial,sans-serif;
    padding-left: 5px;
}

.breadcrumb-share-wrap ul.breadcrumbs li:last-child::after {
	content: "";
}

.breadcrumb-share-wrap #social-share {
	display:flex;
	align-items: center;
	justify-alignment: space-between;
	max-width: 300px;
	
	display:-webkit-flex;
	-webkit-align-items: center;
	-webkit-justify-content: space-between;
}

.breadcrumb-share-wrap #social-share h4 {
	font: bold 11px Arial, sans-serif;
	text-transform:uppercase;
	margin:0 8px 0 0;
	vertical-align: text-top;
}

.breadcrumb-share-wrap #social-share a {
	background-color:#FFF;
	color:#AAA;
    border-radius: 25px;
    height: 38px;
    width: 38px;
    text-align: center;
    transition: all 300ms;
    opacity:.8;
    margin: 0px 2px;
    
    -webkit-border-radius: 25px;
    -webkit-transition: all 300ms;
}

.breadcrumb-share-wrap #social-share a:hover {
	opacity:1;
}

/* Color rollovers for Facebook/Twitter/G+/LinkedIn/Email */
.breadcrumb-share-wrap #social-share a:nth-child(2):hover {
	color:#425E9C;
}

.breadcrumb-share-wrap #social-share a:nth-child(3):hover {
	color:#55ACEE;
}

.breadcrumb-share-wrap #social-share a:nth-child(4):hover {
	color:#DD4B39;
}

.breadcrumb-share-wrap #social-share a:nth-child(5):hover {
	color:#0077B5;
}

.breadcrumb-share-wrap #social-share a:nth-child(6):hover {
	color:#FCA128;
}

.breadcrumb-share-wrap #social-share a i {
    font-size: 20px;
    padding: 8px 0;
    margin:1px 0 0 0;
    height: 20px;
    width: 20px;
}


/* Media queries */

@media (min-width:768px) {
	
	.breadcrumb-share-wrap ul.breadcrumbs {
		display:block;
    }
    .breadcrumb-share-wrap { 
    	justify-content: space-between;
    	
    	-webkit-justify-content: space-between;
	}
	
}

@media (min-width:1300px) {

	.breadcrumb-share-wrap { 	
		padding: 0;
	}
	
}