/* We are using the font awesome set. */
/*@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');  */

/* This applies the blur filter to the video/preview etc */
.video-js .vjs-tech.vjs-blur {
	-webkit-transition: .75s all;
	transition: .75s all;
	
	/*-webkit-filter: blur(5px);
	filter: blur(5px);*/
}

/* Basic overlay styles, we are using the table-cell layout hack to center the content */
.video-js .vjs-sharing-overlay {
	background: rgba( 0, 0, 0, 0.8 );
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	-webkit-transition: .75s all;
	transition: .75s all;
	
	/* Root "Table" element for hack */
	display: table;
	height: 100%;
	width: 100%;
}


/* Icon for our initial button */
.vjs-control.vjs-share-button {
	cursor: pointer;
	position: absolute;
	right: 68px;
	bottom: 13px;
	color: #bbb;
}
.vjs-control.vjs-share-button:hover {
	color: #fff;
}
.vjs-control.vjs-share-button:before {
	/*font-family: FontAwesome;*/
}

/* The styles for an on-screen button */
.video-js > .vjs-control.vjs-share-button {
	position: absolute;
	top: 1em;
	right: 1em;
}
.video-js > .vjs-control.vjs-share-button:hover:before {
	text-shadow: 0 0 .3em rgba( 255,255,255,0.8);
}

/* The styles for the button on a control bar */
.vjs-control-bar .vjs-control.vjs-share-button:before {
	content: '\e00e';
}

.video-js > .vjs-control.vjs-share-button:before {
	content: '\e00e';
	font-size: 2em;
	color: rgba(255,255,255,0.75);
	text-shadow: 0 0 .5em rgba(0,0,0,0.8);
}




/* Styling for the icons */
.vjs-sharing-container {
	/* The table-cell of the hack 
	display: table-cell;*/
	margin: 6% auto;
	height: 100%;
	max-width: 516px;
	width: 100%;
	padding: 10%;
	vertical-align: middle;
	text-align: center;
}

/* Icon body */
.vjs-sharing-container .vjs-share-icon {
	font-size: 7em;
	margin: .46em;
	margin-top: 0.4em;
	cursor: pointer;
	position: relative;
	float:left;
	opacity: 0.8;
}
.vjs-sharing-container .vjs-share-icon:hover {
	opacity: 1;
}
/* The actual Icon */
.vjs-sharing-container .vjs-share-icon:hover:before {
	color: #fff;
	text-shadow: 0 0 .5em rgba(255,255,255,0.5);
}

/* Show the text that is usually hidden in a videojs.Button */
.vjs-sharing-container .vjs-share-icon .vjs-control-text {
	position: relative;
	    width: 100%;
	    font-size: 13px!important;
	    text-align: center;
	    left: 0;
	    clip: initial;
	    height: initial;
	    margin: 0 auto;
		top: 30px;
		font-family: "AdelleSansSAGE"!important;
		color: #fff!important;
		font-style: normal;
}
#overlaytext, .overlayclosetext {
	height: 15%!important;
	font-family: "AdelleSansSAGE";
}


/* To show/hide the onscreen button.  Duplicate the showing / hiding of the control bar */

.vjs-has-started.vjs-user-inactive.vjs-playing > .vjs-control.vjs-share-button,
.video-js > .vjs-control.vjs-share-button {
	display: block;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 1s, opacity 1s;
	-moz-transition: visibility 1s, opacity 1s;
	-o-transition: visibility 1s, opacity 1s;
	transition: visibility 1s, opacity 1s;
}

.vjs-has-started  > .vjs-control.vjs-share-button {
	display: block;
	visibility: visible;
	opacity: 1;
	-webkit-transition: visibility 0.1s, opacity 0.1s;
	-moz-transition: visibility 0.1s, opacity 0.1s;
	-o-transition: visibility 0.1s, opacity 0.1s;
	transition: visibility 0.1s, opacity 0.1s;
}

.fa-facebook-square {
	background-image: url("../images/facebook.png");
	background-repeat: no-repeat;
	background-size: 64px;
	background-position: center center;
	width: 64px;
}

.fa-twitter-square {
	background-image: url("../images/twitter.png");
	background-repeat: no-repeat;
	background-size: 64px;
	background-position: center center;
	width: 64px;
}

.fa-pinterest-square {
	background-image: url("../images/youtube.png");
	background-repeat: no-repeat;
	background-size: 64px;
	background-position: center center;
	width: 64px;
}

.fa-google-plus-square {
	background-image: url("../images/googleplus.png");
	background-repeat: no-repeat;
	background-size: 64px;
	background-position: center center;
	width: 64px;
}

.fa-linkedin-square {
	background-image: url("../images/linkedin.png");
	background-repeat: no-repeat;
	background-size: 64px;
	background-position: center center;
	width: 64px;
}

.fa-email-square {
	background-image: url("../images/email.png");
	background-repeat: no-repeat;
	background-size: 64px;
	background-position: center center;
	width: 64px;
}

#overlaytext {
    font-size: 25px;
    font-family: "AdelleSansSAGE";
}

.overlayclosetext {
	position: absolute;
	color: #000;
	bottom: 90px;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 64px;
	height: 18px!important;
	background-color: #fff;
	cursor: pointer;
	font-size: 11px;
	padding-top: 4px;
	font-family: "AdelleSansSAGE";
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	text-align: center;
}

.overlayclosetext2 {
	bottom: -430px;
}

.bigonly {
	display: inline;
}

@media only screen and (max-width: 321px) {
	.bigonly {
		display: none!important;
	}
	
}

@media only screen and (max-width: 600px) {
	
	.bigonly {
		display: inline;
	}
	
	.vjs-sharing-container {
		padding:0;
		padding-top: 2%;
		max-width: 296px;
		height: 65%;
	}
	
	.vjs-sharing-container .vjs-share-icon {
		margin: 0.21em;
		margin-top: 0;
	}
	
	.fa-facebook-square {
		background-size: 46px;
		width: 44px;
	}	

	.fa-twitter-square {
		background-size: 46px;
		width: 44px;
	}

	.fa-pinterest-square {
		background-size: 46px;
		width: 44px;
	}
	
	.fa-google-plus-square {
		background-size: 46px;
		width: 44px;
	}
	
	.fa-linkedin-square {
		background-size: 46px;
		width: 44px;
	}
	.fa-email-square {
		background-size: 46px;
		width: 44px;
	}
	.vjs-sharing-container .vjs-share-icon .vjs-control-text {
		top: 15px;
		font-size: 11px!important;
	}
	.overlayclosetext {
		/*top: 13px;
		right: 15px;
		font-size: 14px;*/
		bottom: 22px;
		/*right: 42%;*/
	}
	#spacer {
		display: block!important;
	}
	
	#overlaytext {
		font-size: 12px;
	}
	
}

@media only screen and (min-width: 601px) and (max-width: 959px) {
	
	.bigonly {
		display: inline;
	}
	
	.vjs-sharing-container {
		padding:0;
		padding-top: 10%;
		max-width: 405px;
	}
	
	.vjs-sharing-container .vjs-share-icon {
		margin: 0.29em;
		margin-top: 0;
	}
	
	.fa-facebook-square {
		background-size: 60px;
		width: 60px;
	}	

	.fa-twitter-square {
		background-size: 60px;
		width: 60px;
	}

	.fa-pinterest-square {
		background-size: 60px;
		width: 60px;
	}

	.fa-google-plus-square {
		background-size: 60px;
		width: 60px;
	}
	
	.fa-linkedin-square {
		background-size: 60px;
		width: 60px;
	}
	
	.fa-email-square {
		background-size: 60px;
		width: 60px;
	}
	
	.vjs-sharing-container .vjs-share-icon .vjs-control-text {
			top: 15px;	
	}
	
	.overlayclosetext {
		/*top: 13px;
		right: 15px;
		font-size: 14px;*/
		/*right: 46%;*/
		bottom: 70px;
	}
	
	#overlaytext {
	    font-size: 19px;
	}
	
	
}