@charset "utf-8";
 * {
    -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;    -ms-box-sizing: border-box;    -o-box-sizing: border-box;    box-sizing: border-box;    margin:0;    padding:0;}
html {    font-size: 16px;}
body {    font-family: Arial, sans-serif;    color: #fff;}

.showreels{ 	position:relative;  width:100%;height:100%; padding:0;margin-top:20px; background-color:#000; }
.video-slider {    width: 100%;    height: 1080px;    position: relative;    overflow: hidden;}
.slider-video{width:100%; height:100%;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:20px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-50px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:60%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
.play-button1 {  position: absolute;     top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button1 img {width:60%; height:auto;	}
.play-button1 img:hover{cursor:pointer;}
.play-button1:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-50px;	top:50%;    height: 80px;    width: 75px;    cursor: pointer;    opacity: .4;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrowb.png) no-repeat  ;	width:75px; height:80px;;left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrowb.png) no-repeat center ; width:75px; height:80px;	left:auto;    right: 30px;}

@media screen and (min-width: 320px) {
.video-slider {    width: 100%;    height: 200px;    position: relative;    overflow: hidden;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-5px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:40%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-5px;	top:50%;    height: 35px;    width: 40px;    cursor: pointer;    opacity: .4;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrow.png) no-repeat  center   ;	width:25px; height:30px; left:10px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrow.png) no-repeat center ; width:25px; height:30px;	left:auto;    right: 10px;}

}

@media screen and (min-width: 360px) {
.video-slider {    width: 100%;    height: 220px;    position: relative;    overflow: hidden;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-2px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:35%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-2px;	top:50%;    height: 15px;    width: 15px;    cursor: pointer;    opacity: .4;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrow.png) no-repeat  center   ;	width:30px; height:25px; left:10px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrow.png) no-repeat center ; width:30px; height:25px;	left:auto;    right: 10px;}	
}

@media screen and (min-width: 480px) {
.video-slider {    width: 100%;    height: 280px;    position: relative;    overflow: hidden;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-2px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:30%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-2px;	top:50%;    height: 15px;    width: 15px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrowb.png) no-repeat  center   ;	width:30px; height:35px; left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrowb.png) no-repeat center ; width:30px; height:35px;	left:auto;    right: 30px;}		

}

@media only screen and (min-width: 533px) {
.video-slider {    width: 100%;    height: 320px;    position: relative;    overflow: hidden;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-2px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:30%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-2px;	top:50%;    height: 15px;    width: 15px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrowb.png) no-repeat  center   ;	width:30px; height:35px; left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrowb.png) no-repeat center ; width:30px; height:35px;	left:auto;    right: 30px;}	

}

@media screen and (min-width: 640px) {

.video-slider {    width: 100%;    height: 360px;    position: relative;    overflow: hidden;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-5px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:30%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-25px;	top:50%;    height: 15px;    width: 15px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrow.png) no-repeat  center   ;	width:30px; height:35px; left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrow.png) no-repeat center ; width:30px; height:35px;	left:auto;    right: 30px;}	
}

@media only screen and (min-width: 720px) {
.video-slider {    width: 100%;    height: 400px;    position: relative;    overflow: hidden;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-2px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:30%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-25px;	top:50%;    height: 75px;    width: 80px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrow.png) no-repeat  center   ;	width:80px; height:75px; left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrow.png) no-repeat center ; width:80px; height:75px;	left:auto;    right: 30px;}	

 	
}

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

.video-slider {    width: 100%;    height: 430px;    position: relative;    overflow: hidden;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-2px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:30%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-25px;	top:50%;    height: 75px;    width: 80px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrow.png) no-repeat  center   ;	width:80px; height:75px; left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrow.png) no-repeat center ; width:80px; height:75px;	left:auto;    right: 30px;}	

} 

@media screen and (min-width: 800px) {
.video-slider {    width: 100%;    height: 450px;    position: relative;    overflow: hidden;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-2px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:30%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-25px;	top:50%;    height: 15px;    width: 15px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrow.png) no-repeat  center   ;	width:75px; height:80px; left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrow.png) no-repeat center ; width:75px; height:80px;	left:auto;    right: 30px;}	

}

@media screen and (min-width: 900px) and (max-width: 1024px) {
.video-slider {    width: 100%;    height: 560px;    position: relative;    overflow: hidden;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-2px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:40%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-25px;	top:50%;    height: 15px;    width: 15px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrow.png) no-repeat  center   ;	width:15px; height:15px; left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrow.png) no-repeat center ; width:15px; height:15px;	left:auto;    right: 30px;}	
		
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 900px) and (max-width: 1024px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 900px) and (max-width: 1024px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 900px) and (max-width: 1024px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 900px) and (max-width: 1024px),
only screen and (                min-resolution: 192dpi) and (min-width: 900px) and (max-width: 1024px),
only screen and (                min-resolution: 2dppx)  and (min-width: 900px) and (max-width: 1024px) { 
	
.video-slider {    width: 100%;    height: 560px;    position: relative;    overflow: hidden;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-25px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:20%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-25px;	top:50%;    height: 15px;    width: 15px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrow.png) no-repeat  center   ;	width:15px; height:15px; left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrow.png) no-repeat center ; width:15px; height:15px;	left:auto;    right: 30px;}	
}


@media  screen and (min-width: 1080px) {
.video-slider {    width: 100%;    height: 800px;    position: relative;    overflow: hidden;}
.slider-video{width:100%; height:100%;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-2px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:60%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-20px;	top:50%;    height: 150px;    width: 150px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrowb.png) no-repeat  center   ;	width:150px; height:100px; left:20px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrowb.png) no-repeat center ; width:150px; height:100px;	left:auto;    right: 20px;}	

}


@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1080px) ,
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1080px) ,
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1080px) ,
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1080px) ,
only screen and (                min-resolution: 192dpi) and (min-width: 1080px) ,
only screen and (                min-resolution: 2dppx)  and (min-width: 1080px)  { 
.video-slider {    width: 100%;    height: 600px;    position: relative;    overflow: hidden;}
.slider-video{width:100%; height:100%;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-25px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:20%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-25px;	top:50%;    height: 15px;    width: 15px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrow.png) no-repeat  center   ;	width:75px; height:80px; left:20px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrow.png) no-repeat center ; width:75px; height:80px;	left:auto;    right: 20px;}	
}


@media screen and  (min-width: 1600px) {

.showreels{ 	position:relative;  width:100%;height:100%; padding:0;margin-top:20px; background-color:#000; }
.video-slider {    width: 100%;    height: 890px;    position: relative;    overflow: hidden;}
.slider-video{width:100%; height:100%;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-2px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:60%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-25px;	top:50%;    height: 75px;    width: 80px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrowb.png) no-repeat  center   ;	width:80px; height:75px; left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrowb.png) no-repeat center ; width:80px; height:75px;	left:auto;    right: 30px;}	
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1600px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1600px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1600px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1600px),
only screen and (                min-resolution: 192dpi) and (min-width: 1600px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1600px){ 

.showreels{ 	position:relative;  width:100%;height:100%; padding:0;margin-top:20px; background-color:#000; }
.video-slider {    width: 100%;    height: 890px;    position: relative;    overflow: hidden;}
.slider-video{width:100%; height:100%;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:10px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-25px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:50%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-25px;	top:50%;    height: 75px;    width: 80px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrow.png) no-repeat  center   ;	width:80px; height:75px; left:30px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrow.png) no-repeat center ; width:80px; height:75px;	left:auto;    right: 30px;}	
	
 }

@media  screen and (min-width: 1920px) {

.showreels{ 	position:relative;  width:100%;height:100%; padding:0;margin-top:20px; background-color:#000; }
.video-slider {    width: 100%;    height: 1080px;    position: relative;    overflow: hidden;}
.slider-video{width:100%; height:100%;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:20px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-5px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:80%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-75px;	top:50%;    height: 75px;    width: 80px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrowb.png) no-repeat  center   ;	width:80px; height:75px; left:10px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrowb.png) no-repeat center ; width:80px; height:75px;	left:auto;    right: 10px;}	
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1920px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1920px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1920px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1920px),
only screen and (                min-resolution: 192dpi) and (min-width: 1920px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1920px){ 

.showreels{ 	position:relative;  width:100%;height:100%; padding:0;margin-top:20px; background-color:#000; }
.video-slider {    width: 100%;    height: 1080px;    position: relative;    overflow: hidden;}
.slider-video{width:100%; height:100%;}
.slide {    position: absolute;    top: 20px;    left: 100%;	padding-bottom:20px;    height: 100%;    width: 100%;    text-align: center;   overflow: hidden; }
.slide:first-child{    left: 0;}
.play-button {  position: absolute;   margin-top:-25px;    top: 50%;      left: 50%;    transform: translate(-50%, -50%); }
.play-button img {width:70%; height:auto;	}
.play-button img:hover{cursor:pointer;}
.play-button:after {visibility:hidden;}
video{    max-height: 100%;    max-width: 100%;}
.slide-arrow{     position: absolute;	margin-top:-75px;	top:50%;    height: 75px;    width: 80px;    cursor: pointer;    opacity: .2;	z-index: 66;}
.slide-arrow:hover{     opacity: 1;}
.slide-arrow.left{  	background: url(../../img/leftarrowb.png) no-repeat  center   ;	width:80px; height:75px; left:10px;	right:auto;}
.slide-arrow.right{	background: url(../../img/rightarrowb.png) no-repeat center ; width:80px; height:75px;	left:auto;    right: 10px;}	
	
}