@charset "utf-8";
/* CSS Document */


/*----------------- SLICK CAROUSEL ---------------------------------------------------------------------------------- */


.videobox

{width: 304px;
margin: auto auto auto auto;}


.slider-for {width: 300px; height: 245px; margin: 10px auto 10px auto;}

.slider-for img {width: 300px; height: auto; margin: 0 auto 10px auto;}

.slider-nav {width: 304px; margin: 70px auto 10px auto;}

.videothumb {width: 90px; margin: 0 7px 0 7px; height: auto; border: 1px #FFFFFF solid;
-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition: .5s;}

.videothumb:hover {cursor: pointer;}

.videoscreen {width: 300px; height: 225px; margin: 0 auto 10px auto;}

iframe {border: none;}


.home-youtube-container {cursor: pointer;  position: relative; background: #000000 url(css/video/videoloader.gif) no-repeat center center;} 

.homeVideoThumbnail {
position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 75%;

}

.homeVideoThumbnail iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}


.videoscreen
		{
		
		float: none;
		padding: 0;
		width: 100%;
		min-width: 300px;
		max-width: 800px;
		height: auto;
		margin: auto auto auto auto;
		
		opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
		
		-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
		}
		
		.videoscreen:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */

	
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.videooverlay
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
 background: url(video/videothumb.png);
    background-repeat: no-repeat;
    background-size: 100px 75px;
    background-attachment: inherit;
    background-position: center; 

		opacity: 0.5;
    filter: alpha(opacity=100); /* For IE8 and earlier */
		
		-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;

}

.col-cont {margin: 0 auto; max-width: 700px;}
.col-cont-front {margin: 0 auto; max-width: 800px; background: #009900;}

.thumb-container {
position:relative;

}

.thumb-caption
{
position: absolute;
top: 1px;
left: 8px;
background: url(css/video/image_hover.png) repeat;
width: 85px;
padding: 0 0 0 5px;
cursor: pointer;
}

.thumb-caption p

{color:#ffffff;
padding: 5px 0;
font-size: 1.3em;

-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition: .5s;}

.thumb-container:hover .thumb-caption > p

{color:#FF65C3;
}

.thumb-container:hover .videothumb
{
border: 1px solid #FF65C3;

}

@media (max-width: 920px) and (min-width: 601px) {



/*----------------- SLICK CAROUSEL ---------------------------------------------------------------------------------- */

.videobox

{width: 500px;
margin: auto auto auto auto;}

.slider-for {width: 500px; height: 400px; margin: 10px auto 10px auto;}

.slider-for img {width: 500px; height: auto; margin: 0 auto 10px auto;}

.slider-nav {width: 500px; margin: 0 auto 10px auto;}

.videothumb {width: 150px; margin: 0 11px 0 11px; height: auto;}

.videothumb:hover {cursor: pointer;}

.videoscreen { margin: 0 auto 10px auto;}

iframe {border: none;}

.thumb-caption
{
position: absolute;
top: 1px;
left: 12px;
background: url(css/video/image_hover.png) repeat;
width: 140px;
padding: 0 0 0 10px;
}

.thumb-caption p

{color:#ffffff;
padding: 5px 0;
font-size: 1.4em;}

}


















/*----------------- SLICK CAROUSEL ---------------------------------------------------------------------------------- */
@media (min-width: 921px) {
.videobox

{width: 800px;
margin: auto auto auto auto;}

.slider-for {width: 700px; height: 575px; margin: 10px auto 10px auto;}

.slider-for img {width: 700px; height: auto; margin: 0 auto 10px auto;}

.slider-nav {width: 700px; margin: 0 auto 10px auto;}

.videothumb {width: 200px; margin: 0 23px 0 23px; height: auto;}

.videothumb:hover {cursor: pointer;}

.videoscreen {margin: 0 auto 10px auto;}

iframe {border: none;}

.thumb-caption
{
position: absolute;
top: 1px;
left: 24px;
background: url(css/video/image_hover.png) repeat;
width: 190px;
padding: 0 0 0 10px;
}


.thumb-caption p

{color:#ffffff;
padding: 5px 0;
font-size: 1.4em;}



}