.jms-slideshow { position: relative; width: 100%; max-width: 920px; min-width: 640px; margin: -35px 0 40px; /*update line*/ height: 340px; } .jms-wrapper { width: auto; z-index: 1000; min-width: 920px; height: 340px; background-color: #eeeeee; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; border: 10px solid #eeeeee; border: 10px solid rgba(238, 238, 238, 0.9); outline: none; -webkit-transition: background-color 1s linear; -moz-transition: background-color 1s linear; -o-transition: background-color 1s linear; -ms-transition: background-color 1s linear; transition: background-color 1s linear; } .color-1 { background-color: #ffffff; } .color-2 { background-color: #ffffff; } .color-3 { background-color: #ffffff; } .color-4 { background-color: #ffffff; } .color-5{ background-color: #ffffff; } .step { width: 920px; height: 340px; display: block; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } .step:not(.active) { opacity: 0; filter: alpha(opacity=0); /* internet explorer */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/ } .jms-content{ /*margin: 0px 370px 0px 20px;*/ position: relative; clear: both; } .step h3{ color: #fff; font-size: 52px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); margin: 0; padding: 60px 0 10px 0; } .step p { color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); font-size: 34px; font-weight: normal; position: relative; margin: 0; } a.jms-link{ display: block; opacity: 1; clear: both; -webkit-transition: all 0.4s ease-in-out 1s; -moz-transition: all 0.4s ease-in-out 1s; -ms-transition: all 0.4s ease-in-out 1s; -o-transition: all 0.4s ease-in-out 1s; transition: all 0.4s ease-in-out 1s; } .step:not(.active) a.jms-link{ opacity: 0; margin-top: 80px; } .step img{ position: absolute; right: 0px; top: 0px; } .jms-dots{ width: 100%; position: absolute; text-align: center; left: 0px; bottom: 20px; z-index: 2000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .jms-dots span{ display: inline-block; position: relative; width: 12px; height: 12px; border-radius: 50%; background: #777; margin: 3px; cursor: pointer; box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 1px 1px 1px rgba(255,255,255,0.3); } .jms-dots span.jms-dots-current:after{ content: ''; width: 8px; height: 8px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ } .jms-arrows{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .jms-arrows span{ position: absolute; top: 50%; margin-top: -25px; height: 60px; width: 30px; cursor: pointer; z-index: 2000; border-radius: 3px; } .jms-arrows span.jms-arrows-prev{ background: url(/images/slider/arrow-right.png) no-repeat 50% 50%; left: -16px; } .jms-arrows span.jms-arrows-next{ background: url(/images/slider/arrow-left.png) no-repeat 50% 50%; right: -35px; } /* Not supported style */ .jms-wrapper.not-supported{ background-color: #ffffff; } .jms-wrapper.not-supported:after{ content: 'The slideshow functionality is not supported on your device.'; padding: 0px 0px 30px 0px; text-align: center; display: block; } .jms-wrapper.not-supported .step{ display: none; position: relative; opacity: 1; filter: alpha(opacity=99); /* internet explorer */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/ margin: 20px auto; } .jms-wrapper.not-supported .step:first-of-type{ display: block; } .jms-wrapper.not-supported .step:not(.active) a.jms-link{ opacity: 1; margin-top: 40px; }