/* 
	Machine Translations Custom Styles 
*******************************************

 INDEX

	1.	MAIN GRID
	2.	SUB GRID
	2.1		Sub Grid Media Queries
	3.	TYPOGRAPHY
	4.	LINKS
	5.	MENUS
	5.1		Menu Links
	5.1.1	Menu Media Queries
	5.2		Sub menu
	5.2.1	Sub Menu Media Queries
	6.	IMAGES

*/
/*
*******************************************
	1. MAIN GRID
*/
html,
body,
#header,
.content-container,
footer {
	width: 100%;
	margin: 0;
}

html {
	font-family: sans-serif;
}

#header {
	margin-bottom: 33%;
}
.content-container, footer {
	background: rgba(172, 134, 57, 0.76);
	float: left;
}

footer {
	text-align: center;
	padding: 20px 0;
}

/*
*******************************************
	1.1 Main Grid Media Queries
*/
/* Desktop - Large 1535px */
@media screen and ( min-width: 95.9375em ) {
	
	#header {
		margin-bottom: 27%;
	}
}

/*
*******************************************
	2. SUB GRID
*/
#body-content {
	width: 50%;
	margin: 0 auto;
	color: #f6f8fa;
}

#repaeter-container,
#repeater-container-audio {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

#repeater-container-audio {
	text-align: center;
	float: left;
}

.credit-box,
.media-box,
.video-box {
	width: 40%;
	margin: 0 4.99%;
	float:left;
}

.clear {
	clear: both;
}

.media-box {
	padding: 40px 0;
}

.media-box .wp-video {
	margin: 0 auto;
}

.audio-box {
	height: auto;
	width: 100%;
	background: rgba(0,0,0,0.3);
	margin: 20px 0;
	float: left;
}

.audio-box h4 {
	text-transform: uppercase;
}

.audio-inner {
	width: 80%;
	background: rgba(255,255,255,0.3);
	display: block;
	margin: 20px auto;
}

.flex-content {
	width: 100%;
	margin: 40px 0;
	float: left;
}

blockquote {
	font-style: italic;
}

.alignleft {
	align-content: flex-start;
}

.aligncenter {
	align-content: center;
}

.full {
	width: 100%;
}

.half {
	width:50%;
	float: left;
}

/*
*******************************************
	2.1 Sub Grid Media Queries
*/
/* Desktop - small 955px */
@media screen and ( max-width: 59.6875em ) {
	#body-content {
		width: 80%;
	}
	
	.credit-box,
	.media-box,
	.video-box {
		width: 95%;
		margin: 20px auto;
	}
	
	.half {
		width: 100%;
	}
}


/*
*******************************************
	3. TYPOGRAPHY
*/

h1,
.flex-content h4 {
	text-align: center;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: 100;
}

h1 {
	margin-bottom: 40px;
}

h4.full {
	margin: 20px 0 60px 0;
}

h4.half {
	margin: 0;
}

p {
	text-align: justify;
	line-height: 1.4;
	margin: 1em 0;
}

.half p:first-child {
	margin: 0 0 1em 0;
}

.credit-box p,
.media-box p {
	text-align: left;
}

footer,
footer p {
	text-align: center;
	color: #f7d9d9;
}

/*
*******************************************
	3.1 Footer Media Queries
*/
/* Desktop - small 955px */
@media screen and ( max-width: 59.6875em ) {
	p {
		font-size: 18px;
	}
	
	h4.half {
		margin: 40px 0;
	}
	
}

/*
*******************************************
	4. LINKS
*/
a:link,
a:visited {
	color: inherit;
}

a:hover,
a:focus,
a:active {
	color: #794e4e;
	text-shadow: 1px 1px 0 #aaa;
}


/*
*******************************************
	5. MENUS
*/
#header,
nav,
nav hr,
.menu-main-menu-container,
ul.menu,
li.menu-item {
	float: left;
}

nav {
	width: 100%;
	text-align: center;
}

nav hr {
	height: 50px;
	width: 10%;
	background: rgba(130,130,130,0.5);
	border: none;
	display: inline-block;
}

.menu-main-menu-container {
	width: 80%;
	display: inline-block;
}

ul.menu {
	width: 100%;
}

nav hr,
ul.menu,
ul.sub-menu,
li.menu-item {
	margin: 0;
	padding: 0;
}

li.menu-item {
	display: inline-block;
	min-height: 50px;
	background: rgba(130,130,130,0.5);
}

/*
*******************************************
	5.1 Menu Links
*/
li.menu-item a:link,
li.menu-item a:visited {
	color: #fff;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	margin: 0;
	padding: 15px 0;
}

li.menu-item a:hover,
li.menu-item a:focus,
li.menu-item a:active {
	color: #4e505e;
	text-shadow: 0 1px 1px #fff;
}

li.current-menu-item,
li.current-menu-parent,
li.current-menu-item a:link,
li.current-menu-item a:visited,
li.current-menu-parent a:link,
li.current-menu-parent a:visited {
	background: none;
	color: #000;
	text-shadow: 0 1px 1px #fff;
}

li.current-menu-item > ul.sub-menu,
li.current-menu-parent > ul.sub-menu {
	background: rgba(255, 255, 255, 0.7);	
}

/*
*******************************************
	5.1.1 Menu Media Queries
*/

/* Desktop - small 1159px */
@media screen and ( max-width: 72.4375em ) {
	
	nav hr {
		display: none;
	}	
	
	.menu-main-menu-container {
		width: 100%;
		display: block;
	}
	
	li.menu-item {
		height: 50px;
		float: left;
	}
}

/* Desktop - small 1159px */
@media screen and ( max-width: 72.4375em ) {	

	
	li.menu-item a:link,
	li.menu-item a:visited {
		background: none;
		padding: 15px;
	}
}

/* Mobile - large 640px */
@media screen and ( max-width: 40em ) {
	
	li.menu-item {
		height: auto;
		width: 100%;
		display: block;
	}
	
	li.menu-item a:link, li.menu-item a:visited {
		min-height: 49px;
/* 		background: rgba(255, 255, 255, 0.9); */
		box-sizing: border-box;
		color: #333;
		font-size: 0.8em;
	}
	.sub-menu {
		display: none;
	}
	.drop-arrow {
		height: 50px;
		width: 60px;
		display: block;
		box-sizing: border-box;
		position: absolute;
		right: 0;
		margin-top: -50px;
		padding: 15px 0;
	}
/*
	.sub-toggle, .sub-menu.sub-toggle {
		min-height: auto;
	}
*/
}

/*
*******************************************
	5.2 Sub Menu
*/

ul.sub-menu {
	max-height: 0;
	/*width: 40%;
	width: 26.666666667%;*/
	overflow: hidden;
	position: absolute;
	top: 0;
	margin: 0;
	padding: 50px 0 0 0;
	z-index: -1;
	transition: max-height 0.3s ease-out;
	transition-delay: 0.3s;
}

/* Destop only - mobile behavior is handled by jQuery */
@media screen and (min-width: 48em){
	li.menu-item:hover ul.sub-menu {
		max-height: 500px;
		display: block;
		transition: max-height 0.3s ease-in;
	}
}

ul.sub-menu li {
	width: 100%;
	margin: 0;
	background: rgba(130,130,130, 0.5);
	display: block;
}

li.current-menu-item ul.sub-menu li,
li.current-menu-parent ul.sub-menu li,
ul.sub-menu li a:link,
ul.sub-menu li a:visited {
	background: none;
}

/*
*******************************************
	5.2.1 Sub Menu Media Queries
*/
/* Desktop - small 1159px */
@media screen and ( max-width: 72.4375em ) {
	ul.sub-menu {
		overflow: auto;
	}
	
	li.menu-item:hover ul.sub-menu {
		margin: 0;
	}
	
	ul.sub-menu li {
		margin: 0;
	}
}

/* Mobile - large 640px */
@media screen and ( max-width: 40em ) {
	
	ul.sub-menu {
		max-height: 200px; /* temporary hack until mobile menu can be figured out */
		width: 100%;
		background: rgba(248, 248, 248, 0.7);
		overflow: hidden;
		padding: 0;
		position: relative;
		top: auto;
		z-index: auto;
	}
	
	ul.sub-menu li {
		min-height: 10px;
		background-color: rgba(255,255,255,0.5);
		text-align: center;
	}
}

/*
*******************************************
	6. IMAGES
*/
.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}
.size-medium {
	height: auto;
	width: 200px;
}