﻿

.car{position:relative; height:400px; }
.car-images {}
.car-images > div {position:absolute; width:100%; overflow:hidden !important;}
.car-images > div img{max-width:inherit;} /*width:inherit;*/

.car-images > div.car-focus{display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;  overflow:hidden; }
.car-images > div.car-focus.topleft{align-items:flex-start; justify-content:flex-start;}
.car-images > div.car-focus.topcenter{align-items:flex-start; justify-content:center; }
.car-images > div.car-focus.topright{align-items:flex-start; justify-content:flex-end; }
.car-images > div.car-focus.middleleft{align-items:center; justify-content:flex-start;}
.car-images > div.car-focus.middlecenter{align-items:center; justify-content:center;}
.car-images > div.car-focus.middleright{align-items:center; justify-content:flex-end;}
.car-images > div.car-focus.bottomleft{align-items:flex-end; justify-content:flex-start;}
.car-images > div.car-focus.bottomcenter{align-items:flex-end; justify-content:center;}
.car-images > div.car-focus.bottomright{align-items:flex-end; justify-content:flex-end;}

.car .car-cmd {z-index:2; display:flex; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; justify-content:space-between; }
.car .car-cmd a, .car .car-cmd a:hover{color:#fff; opacity:0.5; text-decoration:none; font-size:48px; cursor:pointer; width:100px; text-align:center; }
.car .car-cmd a:hover{opacity:0.8 !important;}
.car .car-cmd i{line-height:inherit !important;}

.car:hover .car-cmd a:first-child{
	background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
	background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
	background-repeat: repeat-x;
}

.car:hover .car-cmd a:last-child{
	background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
	background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
	background-repeat: repeat-x;
}

/* Vertical */
.car.v .car-cmd {z-index:2; display:block; position:absolute; top:0; left:0; display:flex; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; flex-direction:column; justify-content:space-between;}
.car.v .car-cmd {width:100%;}
.car.v .car-cmd a{width:100%;}
.car.v .car-cmd a, .car.v car-cmd a:hover{color:#fff; opacity:0.5; text-decoration:none; font-size:48px; cursor:pointer; text-align:center; }
.car.v .car-cmd a:hover{opacity:0.8 !important;}
.car.v .car-cmd i{line-height:1;}

/* TODO: Crossbrowser */
.car.v:hover .car-cmd a:first-child{
	background-image: -webkit-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image: -o-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image: -webkit-gradient(linear, left top,right top, from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
	background-image: linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
	background-repeat: repeat-x;
}

.car.v:hover .car-cmd a:last-child{
	background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image: -o-linear-gradient(bottom, rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
	background-image: linear-gradient(to bottom,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
	background-repeat: repeat-x;
}


/* Slide */
.car.car-slide{overflow:hidden; width:100%;}
.car.car-slide .car-images{position:absolute; top:0; left:0; display:flex; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; flex-direction:row; width:100%; flex-wrap:nowrap; }
.car.car-slide.v .car-images{position:absolute; top:0; left:0; display:flex; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; flex-direction:column; width:100%; flex-wrap:nowrap; }
.car.car-slide .car-images > div{position:static; display:flex; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; flex-shrink:0; } 
.car.car-slide .car-images > div img{}/*width:inherit;*/

/*
.car.slide .car-images.clear{
	transition-duration:0s !important;
	transform:translateX(0px) !important;
}
*/
