/* * jQuery Nivo Slider v3.2 * http://nivo.dev7studios.com * * Copyright 2012, Dev7studios * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* The Nivo Slider styles */ /* #container { width:100%; height:100%; overflow:hidden; position:fixed; top:0px; left:0px; } .nivoSlider { position:fixed; top:-16px; left:0px; } .nivoSlider img {position:absolute; top:0px; left:0px; } */ .nivoSlider { position:relative; width:100%; height:500px; overflow: hidden; } .nivoSlider img { position:absolute; top:0px; left:0px; max-width: none; height:500px; } .nivo-main-image { display: block !important; position: relative !important; width: 100% !important; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; background:white; filter:alpha(opacity=0); opacity:0; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; top:0; } .nivo-box { display:block; position:absolute; z-index:5; overflow:hidden; } .nivo-box img { display:block; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; color:#fff; width:100%; z-index:8; padding: 5px 10px; opacity: 1; overflow: hidden; display: none; -moz-opacity: 1; filter:alpha(opacity=1); -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:0; z-index:99; cursor:pointer; } .nivo-prevNav { left:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav { text-align:center; padding: 15px 0; } .nivo-controlNav a { cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } /* ------------------------------ Default Theme ---------------------------------*/ .slider-direction { position: absolute; left:0; top:0; width: 100%; background: none; color: #fff; font-size: 16px; z-index: 999; display: block; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; background:white; filter:alpha(opacity=0); opacity:0; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; top:0; } .nivo-box { display:block; position:absolute; z-index:5; overflow:hidden; } .nivo-box img { display:block; } .nivo-caption { position:absolute; left:0; top:0; color:#fff; width:100%; height: 100%; z-index:8; } .nivo-main-image { display: block !important; position: relative !important; width: 100% !important; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; top:0; } .nivo-box { display:block; position:absolute; z-index:5; overflow:hidden; } @-webkit-keyframes myfirst { from {width: 0;} to {width: 100%;} } @keyframes myfirst { from {width: 0;} to {width: 100%;} } .slider-progress.pos_hover{ -webkit-animation-play-state: paused; animation-play-state: paused; } /* ------------------------------ custom slider ---------------------------------*/ .slider-progress{ position:absolute; top:0; left:0; background-color: rgba(255, 255, 255, .7); height:5px; -webkit-animation: myfirst 5000ms ease-in-out; -moz-animation: myfirst 5000ms ease-in-out; -ms-animation: myfirst 5000ms ease-in-out; animation: myfirst 5000ms ease-in-out; } .s-tb{ display: table; height: 100%; width: 100%; float: left; } .s-tb-c{ display: table-cell; vertical-align: middle; } .t-cn{text-align: center} .t-lft{text-align: left} .t-lfr{text-align: right} /* ------------------------------ slider animation ---------------------------------*/ /* -------------- Home 1 ---------------- */ .home1 .slider-1 h1{ -webkit-animation: bounceInUp 1000ms ease-in-out; -moz-animation: bounceInUp 1000ms ease-in-out; -ms-animation: bounceInUp 1000ms ease-in-out; animation: bounceInUp 1000ms ease-in-out; } .home1 .slider-1 h2{ -webkit-animation: fadeInRight 1500ms ease-in-out; -moz-animation: fadeInRight 1500ms ease-in-out; -ms-animation: fadeInRight 1500ms ease-in-out; animation: fadeInRight 1500ms ease-in-out; } .home1 .slider-2 h1{ -webkit-animation: fadeInLeft 500ms ease-in-out; -moz-animation: fadeInLeft 500ms ease-in-out; -ms-animation: fadeInLeft 500ms ease-in-out; animation: fadeInLeft 500ms ease-in-out; } .home1 .slider-2 h3{ -webkit-animation: fadeInLeft 1500ms ease-in-out; -moz-animation: fadeInLeft 1500ms ease-in-out; -ms-animation: fadeInLeft 1500ms ease-in-out; animation: fadeInLeft 1500ms ease-in-out; } /* -------------- Home 2 ---------------- */ .home2 .slider-2 h1{ -webkit-animation: fadeInLeft 500ms ease-in-out; -moz-animation: fadeInLeft 500ms ease-in-out; -ms-animation: fadeInLeft 500ms ease-in-out; animation: fadeInLeft 500ms ease-in-out; } .home2 .slider-2 h3{ -webkit-animation: fadeInLeft 1500ms ease-in-out; -moz-animation: fadeInLeft 1500ms ease-in-out; -ms-animation: fadeInLeft 1500ms ease-in-out; animation: fadeInLeft 1500ms ease-in-out; } .home2 .layer-1{ -webkit-animation: fadeInLeft 1500ms ease-in-out; -moz-animation: fadeInLeft 1500ms ease-in-out; -ms-animation: fadeInLeft 1500ms ease-in-out; animation: fadeInLeft 1500ms ease-in-out; } .home2 .layer-2{ -webkit-animation: bounceInUp 1000ms ease-in-out; -moz-animation: bounceInUp 1000ms ease-in-out; -ms-animation: bounceInUp 1000ms ease-in-out; animation: bounceInUp 1000ms ease-in-out; } .home2 .layer-3{ -webkit-animation: fadeInRight 1500ms ease-in-out; -moz-animation: fadeInRight 1500ms ease-in-out; -ms-animation: fadeInRight 1500ms ease-in-out; animation: fadeInRight 1500ms ease-in-out; } .home2 .layer-1-1{ -webkit-animation: fadeInRight 1500ms ease-in-out; -moz-animation: fadeInRight 1500ms ease-in-out; -ms-animation: fadeInRight 1500ms ease-in-out; animation: fadeInRight 1500ms ease-in-out; } /* -------------- Home 3 ---------------- */ .home3 .slider-1 h1{ -webkit-animation: fadeInLeft 500ms ease-in-out; -moz-animation: fadeInLeft 500ms ease-in-out; -ms-animation: fadeInLeft 500ms ease-in-out; animation: fadeInLeft 500ms ease-in-out; } .home3 .slider-1 h3{ -webkit-animation: fadeInLeft 1500ms ease-in-out; -moz-animation: fadeInLeft 1500ms ease-in-out; -ms-animation: fadeInLeft 1500ms ease-in-out; animation: fadeInLeft 1500ms ease-in-out; } .home3 .slider-2 h1{ -webkit-animation: bounceInUp 1000ms ease-in-out; -moz-animation: bounceInUp 1000ms ease-in-out; -ms-animation: bounceInUp 1000ms ease-in-out; animation: bounceInUp 1000ms ease-in-out; } .home3 .slider-2 h3{ -webkit-animation: fadeInLeft 1500ms ease-in-out; -moz-animation: fadeInLeft 1500ms ease-in-out; -ms-animation: fadeInLeft 1500ms ease-in-out; animation: fadeInLeft 1500ms ease-in-out; } .home3 .slider-3 h1{ -webkit-animation: fadeInRight 500ms ease-in-out; -moz-animation: fadeInRight 500ms ease-in-out; -ms-animation: fadeInRight 500ms ease-in-out; animation: fadeInRight 500ms ease-in-out; } .home3 .slider-3 h3{ -webkit-animation: fadeInRight 1500ms ease-in-out; -moz-animation: fadeInRight 1500ms ease-in-out; -ms-animation: fadeInRight 1500ms ease-in-out; animation: fadeInRight 1500ms ease-in-out; }