--- /dev/null
+/**
+ * @file
+ * Detailed stylings are all yours, get yourself dirty.
+ *
+ * Transform is more performed than positions.
+ */
+
+.slick--skin--classic .slick__slide {
+ overflow: hidden;
+}
+
+.slick--skin--classic .slide__caption {
+ background-color: #000;
+ background-color: rgba(0, 0, 0, 0.8);
+ color: #fff;
+ left: auto;
+ margin: 0;
+ min-height: 80px;
+ padding: 15px;
+ -webkit-transition: -webkit-transform 1s ease-in-out 0.2s;
+ transition: transform 1s ease-in-out 0.2s;
+ width: 100%;
+}
+
+.slick--skin--classic .slide__description {
+ margin: 0;
+}
+
+.slick--skin--classic .slide--caption--below .slide__caption {
+ background: none;
+ color: #38465c;
+}
+
+.slick--skin--classic .slide--caption--center .slide__caption {
+ color: #fff;
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+ opacity: 0;
+ visibility: hidden;
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ -webkit-backface-visibility: hidden;
+}
+
+.slick--skin--classic .slide--caption--center:hover .slide__caption {
+ filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+ opacity: 1;
+ visibility: visible;
+}
+
+@media (min-width: 64em) {
+ .slick--skin--classic .slide__caption {
+ height: 100%;
+ min-height: 100%;
+ padding: 60px 30px;
+ top: 0;
+ width: 22%;
+ }
+
+ .slick--skin--classic .slide__caption .slide__data {
+ margin: 0 !important;
+ padding: 15px;
+ width: 100%;
+ }
+
+ .slick--skin--classic .slide--caption--center .slide__caption {
+ height: 120px;
+ left: 50%;
+ margin: -60px 0 0 -40%;
+ min-height: 120px;
+ top: 50%;
+ width: 80%;
+ }
+
+ .slick--skin--classic .slide--caption--top .slide__caption,
+ .slick--skin--classic .slide--caption--center-top .slide__caption,
+ .slick--skin--classic .slide--caption--bottom .slide__caption,
+ .slick--skin--classic .slide--caption--below .slide__caption {
+ height: auto;
+ min-height: 80px;
+ padding: 30px;
+ width: 100%;
+ }
+
+ .slick--skin--classic .slide--caption--bottom .slide__caption {
+ bottom: 0;
+ -ms-transform: translateY(210px);
+ -webkit-transform: translateY(210px);
+ transform: translateY(210px);
+ min-height: 120px;
+ top: auto;
+ }
+
+ .slick--skin--classic .slide--caption--stage-zebra .slide__title {
+ margin-bottom: 30px;
+ }
+
+ .slick--skin--classic .slide--caption--stage-zebra:nth-child(odd) .slide__caption,
+ .slick--skin--classic .slide--caption--stage-left .slide__caption,
+ .slick--skin--classic .slide--caption--left .slide__caption {
+ left: 0;
+ -ms-transform: translateX(-320px);
+ -webkit-transform: translateX(-320px);
+ transform: translateX(-320px);
+ }
+
+ .slick--skin--classic .slide--caption--stage-zebra:nth-child(even) .slide__caption,
+ .slick--skin--classic .slide--caption--stage-right .slide__caption,
+ .slick--skin--classic .slide--caption--right .slide__caption {
+ left: auto;
+ right: 0;
+ -ms-transform: translateX(320px);
+ -webkit-transform: translateX(320px);
+ transform: translateX(320px);
+ }
+
+ .slick--skin--classic .slide--caption--top .slide__caption,
+ .slick--skin--classic .slide--caption--center-top .slide__caption {
+ top: 0;
+ -ms-transform: translateY(-210px);
+ -webkit-transform: translateY(-210px);
+ transform: translateY(-210px);
+ }
+
+ .slick--skin--classic .slick__slide.slick-active .slide__caption {
+ -ms-transform: translateY(0);
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ -webkit-transition-delay: 0s;
+ transition-delay: 0s;
+ }
+}