/* * 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:auto; overflow: hidden; } .nivoSlider img { position:absolute; top:0px; left:0px; max-width: none; } .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 { text-align: center; position:absolute; left:0px; bottom:0px; color:#fff; width:100%; z-index:8; padding: 5px 10px; opacity: 0.8; overflow: hidden; display: none; -moz-opacity: 0.8; filter:alpha(opacity=8); -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-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right: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: none; } /* 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:6; } .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 ---------------------------------*/ /* -------------Slider 1------------- */ .slider-area .slide-1 h1 { -webkit-animation: fadeInLeft 1000ms ease-in-out; -moz-animation: fadeInLeft 1000ms ease-in-out; -ms-animation: fadeInLeft 1000ms ease-in-out; animation: fadeInLeft 1000ms ease-in-out; } .slider-area .slide-1 p { -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; } .slider-area .slide-1 .slider-btn-area { -webkit-animation: fadeInLeft 2000ms ease-in-out; -moz-animation: fadeInLeft 2000ms ease-in-out; -ms-animation: fadeInLeft 2000ms ease-in-out; animation: fadeInLeft 2000ms ease-in-out; } .slider-area .slide-2 h1 { -webkit-animation: fadeInRight 1000ms ease-in-out; -moz-animation: fadeInRight 1000ms ease-in-out; -ms-animation: fadeInRight 1000ms ease-in-out; animation: fadeInRight 1000ms ease-in-out; } .slider-area .slide-2 p { -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; } .slider-area .slide-2 .slider-btn-area { -webkit-animation: fadeInRight 2000ms ease-in-out; -moz-animation: fadeInRight 2000ms ease-in-out; -ms-animation: fadeInRight 2000ms ease-in-out; animation: fadeInRight 2000ms ease-in-out; } .slider-area .slide-3 h1 { -webkit-animation: bounceInDown 2000ms ease-in-out; -moz-animation: bounceInDown 2000ms ease-in-out; -ms-animation: bounceInDown 2000ms ease-in-out; animation: bounceInDown 2000ms ease-in-out; } .slider-area .slide-3 p { -webkit-animation: zoomIn 1000ms ease-in-out; -moz-animation: zoomIn 1000ms ease-in-out; -ms-animation: zoomIn 1000ms ease-in-out; animation: zoomIn 1000ms ease-in-out; } .slider-area .slide-3 .slider-btn-area { -webkit-animation: bounceInUp 2000ms ease-in-out; -moz-animation: bounceInUp 2000ms ease-in-out; -ms-animation: bounceInUp 2000ms ease-in-out; animation: bounceInUp 2000ms ease-in-out; } .slider-area .slide-4 h1 { -webkit-animation: rubberBand 2500ms ease-in-out; -moz-animation: rubberBand 2500ms ease-in-out; -ms-animation: rubberBand 2500ms ease-in-out; animation: rubberBand 2500ms ease-in-out; } .slider-area .slide-4 p { -webkit-animation: zoomIn 1000ms ease-in-out; -moz-animation: zoomIn 1000ms ease-in-out; -ms-animation: zoomIn 1000ms ease-in-out; animation: zoomIn 1000ms ease-in-out; } .slider-area .slide-4 .slider-btn-area { -webkit-animation: bounceInUp 2000ms ease-in-out; -moz-animation: bounceInUp 2000ms ease-in-out; -ms-animation: bounceInUp 2000ms ease-in-out; animation: bounceInUp 2000ms ease-in-out; } .slider-area .slide-5 h1 { -webkit-animation: bounceInDown 2000ms ease-in-out; -moz-animation: bounceInDown 2000ms ease-in-out; -ms-animation: bounceInDown 2000ms ease-in-out; animation: bounceInDown 2000ms ease-in-out; } .slider-area .slide-5 p { -webkit-animation: zoomIn 1000ms ease-in-out; -moz-animation: zoomIn 1000ms ease-in-out; -ms-animation: zoomIn 1000ms ease-in-out; animation: zoomIn 1000ms ease-in-out; } .slider-area .slide-5 .slider-btn-area { -webkit-animation: bounceInUp 2000ms ease-in-out; -moz-animation: bounceInUp 2000ms ease-in-out; -ms-animation: bounceInUp 2000ms ease-in-out; animation: bounceInUp 2000ms ease-in-out; } /* .slider4-area .slider-2 h1 { -webkit-animation: fadeInLeft 1000ms ease-in-out; -moz-animation: fadeInLeft 1000ms ease-in-out; -ms-animation: fadeInLeft 1000ms ease-in-out; animation: fadeInLeft 1000ms ease-in-out; } .slider4-area .slider-2 .slider-btn-area { -webkit-animation: bounceInDown 2500ms ease-in-out; -moz-animation: bounceInDown 2500ms ease-in-out; -ms-animation: bounceInDown 2500ms ease-in-out; animation: bounceInDown 2500ms ease-in-out; } .slider4-area .slider-3 span { -webkit-animation: rubberBand 3000ms ease-in-out; -moz-animation: rubberBand 3000ms ease-in-out; -ms-animation: rubberBand 3000ms ease-in-out; animation: rubberBand 3000ms ease-in-out; } .slider4-area .slider-3 h1 { -webkit-animation: fadeOut 2500ms ease-in-out; -moz-animation: fadeOut 2500ms ease-in-out; -ms-animation: fadeOut 2500ms ease-in-out; animation: fadeOut 2500ms ease-in-out; } .slider4-area .slider-3 .slider-btn-area { -webkit-animation: bounceInUp 2500ms ease-in-out; -moz-animation: bounceInUp 2500ms ease-in-out; -ms-animation: bounceInUp 2500ms ease-in-out; animation: bounceInUp 2500ms ease-in-out; } .slider4-area .slider-4 span { -webkit-animation: fadeInRight 3000ms ease-in-out; -moz-animation: fadeInRight 3000ms ease-in-out; -ms-animation: fadeInRight 3000ms ease-in-out; animation: fadeInRight 3000ms ease-in-out; } .slider4-area .slider-4 h1 { -webkit-animation: zoomIn 2500ms ease-in-out; -moz-animation: zoomIn 2500ms ease-in-out; -ms-animation: zoomIn 2500ms ease-in-out; animation: zoomIn 2500ms ease-in-out; } .slider4-area .slider-4 .slider-btn-area { -webkit-animation: bounceInDown 2500ms ease-in-out; -moz-animation: bounceInDown 2500ms ease-in-out; -ms-animation: bounceInDown 2500ms ease-in-out; animation: bounceInDown 2500ms ease-in-out; } -------------Home 1------------- .slider1-area .slider-1 h1 { -webkit-animation: zoomIn 2500ms ease-in-out; -moz-animation: zoomIn 2500ms ease-in-out; -ms-animation: zoomIn 2500ms ease-in-out; animation: zoomIn 2500ms ease-in-out; } .slider1-area .slider-1 p { -webkit-animation: fadeInRight 1000ms ease-in-out; -moz-animation: fadeInRight 1000ms ease-in-out; -ms-animation: fadeInRight 1000ms ease-in-out; animation: fadeInRight 1000ms ease-in-out; } .slider1-area .slider-1 .slider-btn-area { -webkit-animation: bounceInDown 2500ms ease-in-out; -moz-animation: bounceInDown 2500ms ease-in-out; -ms-animation: bounceInDown 2500ms ease-in-out; animation: bounceInDown 2500ms ease-in-out; } .slider1-area .slider-2 h1 { -webkit-animation: fadeInLeft 1000ms ease-in-out; -moz-animation: fadeInLeft 1000ms ease-in-out; -ms-animation: fadeInLeft 1000ms ease-in-out; animation: fadeInLeft 1000ms ease-in-out; } .slider1-area .slider-2 p { -webkit-animation: fadeInRight 1000ms ease-in-out; -moz-animation: fadeInRight 1000ms ease-in-out; -ms-animation: fadeInRight 1000ms ease-in-out; animation: fadeInRight 1000ms ease-in-out; } .slider1-area .slider-2 .slider-btn-area { -webkit-animation: zoomIn 2500ms ease-in-out; -moz-animation: zoomIn 2500ms ease-in-out; -ms-animation: zoomIn 2500ms ease-in-out; animation: zoomIn 2500ms ease-in-out; } .slider1-area .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; } .slider1-area .slider-3 p { -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; } .slider1-area .slider-3 .slider-btn-area { -webkit-animation: fadeInRight 2500ms ease-in-out; -moz-animation: fadeInRight 2500ms ease-in-out; -ms-animation: fadeInRight 2500ms ease-in-out; animation: fadeInRight 2500ms ease-in-out; } -------------Home 2------------- .slider2-area .slider-1 h1 { -webkit-animation: zoomIn 2500ms ease-in-out; -moz-animation: zoomIn 2500ms ease-in-out; -ms-animation: zoomIn 2500ms ease-in-out; animation: zoomIn 2500ms ease-in-out; } .slider2-area .slider-1 p { -webkit-animation: fadeInRight 1000ms ease-in-out; -moz-animation: fadeInRight 1000ms ease-in-out; -ms-animation: fadeInRight 1000ms ease-in-out; animation: fadeInRight 1000ms ease-in-out; } .slider2-area .slider-1 .slider-btn-area { -webkit-animation: fadeInLeft 2500ms ease-in-out; -moz-animation: fadeInLeft 2500ms ease-in-out; -ms-animation: fadeInLeft 2500ms ease-in-out; animation: fadeInLeft 2500ms ease-in-out; } .slider2-area .slider-2 h1 { -webkit-animation: fadeInLeft 1000ms ease-in-out; -moz-animation: fadeInLeft 1000ms ease-in-out; -ms-animation: fadeInLeft 1000ms ease-in-out; animation: fadeInLeft 1000ms ease-in-out; } .slider2-area .slider-2 p { -webkit-animation: fadeInRight 1000ms ease-in-out; -moz-animation: fadeInRight 1000ms ease-in-out; -ms-animation: fadeInRight 1000ms ease-in-out; animation: fadeInRight 1000ms ease-in-out; } .slider2-area .slider-2 .slider-btn-area { -webkit-animation: fadeInRight 2500ms ease-in-out; -moz-animation: fadeInRight 2500ms ease-in-out; -ms-animation: fadeInRight 2500ms ease-in-out; animation: fadeInRight 2500ms ease-in-out; } .slider2-area .slider-3 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; } .slider2-area .slider-3 p { -webkit-animation: fadeInRight 1000ms ease-in-out; -moz-animation: fadeInRight 1000ms ease-in-out; -ms-animation: fadeInRight 1000ms ease-in-out; animation: fadeInRight 1000ms ease-in-out; } .slider2-area .slider-3 .slider-btn-area { -webkit-animation: zoomIn 2500ms ease-in-out; -moz-animation: zoomIn 2500ms ease-in-out; -ms-animation: zoomIn 2500ms ease-in-out; animation: zoomIn 2500ms ease-in-out; } .slider2-area .slider-4 h1 { -webkit-animation: fadeInRight 2500ms ease-in-out; -moz-animation: fadeInRight 2500ms ease-in-out; -ms-animation: fadeInRight 2500ms ease-in-out; animation: fadeInRight 2500ms ease-in-out; } .slider2-area .slider-4 p { -webkit-animation: fadeInLeft 1000ms ease-in-out; -moz-animation: fadeInLeft 1000ms ease-in-out; -ms-animation: fadeInLeft 1000ms ease-in-out; animation: fadeInLeft 1000ms ease-in-out; } .slider2-area .slider-4 .slider-btn-area { -webkit-animation: zoomIn 2500ms ease-in-out; -moz-animation: zoomIn 2500ms ease-in-out; -ms-animation: zoomIn 2500ms ease-in-out; animation: zoomIn 2500ms ease-in-out; } -------------Home 3------------- .slider3-area .slider-1 h1 { -webkit-animation: zoomIn 2500ms ease-in-out; -moz-animation: zoomIn 2500ms ease-in-out; -ms-animation: zoomIn 2500ms ease-in-out; animation: zoomIn 2500ms ease-in-out; } .slider3-area .slider-1 p { -webkit-animation: fadeInRight 1000ms ease-in-out; -moz-animation: fadeInRight 1000ms ease-in-out; -ms-animation: fadeInRight 1000ms ease-in-out; animation: fadeInRight 1000ms ease-in-out; } .slider3-area .slider-1 .slider-btn-area { -webkit-animation: fadeInLeft 2500ms ease-in-out; -moz-animation: fadeInLeft 2500ms ease-in-out; -ms-animation: fadeInLeft 2500ms ease-in-out; animation: fadeInLeft 2500ms ease-in-out; } .slider3-area .slider-2 h1 { -webkit-animation: fadeInLeft 1000ms ease-in-out; -moz-animation: fadeInLeft 1000ms ease-in-out; -ms-animation: fadeInLeft 1000ms ease-in-out; animation: fadeInLeft 1000ms ease-in-out; } .slider3-area .slider-2 p { -webkit-animation: fadeInRight 1000ms ease-in-out; -moz-animation: fadeInRight 1000ms ease-in-out; -ms-animation: fadeInRight 1000ms ease-in-out; animation: fadeInRight 1000ms ease-in-out; } .slider3-area .slider-2 .slider-btn-area { -webkit-animation: fadeInLeft 2500ms ease-in-out; -moz-animation: fadeInLeft 2500ms ease-in-out; -ms-animation: fadeInLeft 2500ms ease-in-out; animation: fadeInLeft 2500ms ease-in-out; } .slider3-area .slider-3 h1 { -webkit-animation: bounceInDown 2500ms ease-in-out; -moz-animation: bounceInDown 2500ms ease-in-out; -ms-animation: bounceInDown 2500ms ease-in-out; animation: bounceInDown 2500ms ease-in-out; } .slider3-area .slider-3 p { -webkit-animation: fadeInRight 1000ms ease-in-out; -moz-animation: fadeInRight 1000ms ease-in-out; -ms-animation: fadeInRight 1000ms ease-in-out; animation: fadeInRight 1000ms ease-in-out; } .slider3-area .slider-3 .slider-btn-area { -webkit-animation: zoomIn 2500ms ease-in-out; -moz-animation: zoomIn 2500ms ease-in-out; -ms-animation: zoomIn 2500ms ease-in-out; animation: zoomIn 2500ms ease-in-out; } */