.metaslider .msHtmlOverlay .animation_in, .metaslider .msHtmlOverlay .animation_out { width: 100%; height: 100%; } .metaslider .msHtmlOverlay .layer .content { overflow: hidden; width: auto; background: transparent; padding: 0; border: none; margin: 0; } .metaslider .msStaticOverlay .layer { z-index: 99; } .metaslider .msHtmlOverlay .layer * { margin: 0; padding: 0; line-height: 1.4em; font-size: 1em; } .metaslider .ms-layer { overflow: hidden; } .metaslider .msHtmlOverlay .layer img { height: auto !important; max-width: 100%; } .metaslider .msHtmlOverlay .layer .st-buttons, .metaslider .msHtmlOverlay .layer .st-buttons a { margin: auto; padding: inherit; line-height: inherit; font-size: inherit; } .metaslider .msHtmlOverlay .layer .youtube_sc.fluid.widescreen { padding-bottom: 56.25% } .metaslider .msHtmlOverlay .layer .youtube_sc.fluid.fourthree { padding-bottom: 75% } .metaslider-flex .msHtmlOverlay { overflow: hidden; } .metaslider iframe.vimeo, .metaslider .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .effect0 { z-index: 1; -webkit-box-shadow: 0 0 4px 1px #ccc; -moz-box-shadow: 0 0 4px 1px #ccc; box-shadow: 0 0 4px 1px #ccc; } .effect1 { z-index: 1; -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; } .effect2 { z-index: 1; } .effect2 .flexslider, .effect2 .rslides { background: white; } .effect2:before, .effect2:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .effect2:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } .effect3 { background: white; z-index: 1; position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect3 .flexslider, .effect3 .rslides { background: white; } .effect3:before, .effect3:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8); box-shadow: 0 0 20px rgba(0,0,0,0.8); top: 50%; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .effect3:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } .effect4 { z-index: 1; position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect4 .flexslider, .effect4 .rslides { background: white; } .effect4:before, .effect4:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8); box-shadow: 0 0 20px rgba(0,0,0,0.8); top: 0; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .effect4:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } .effect5 { z-index: 1; position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect5 .flexslider, .effect5 .rslides { background: white; } .effect5:before, .effect5:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8); box-shadow: 0 0 20px rgba(0,0,0,0.8); top: 10px; bottom: 10px; left: 0; right: 0; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .effect5:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); }