.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; } @media (max-width: 480px) { .nivoSlider { position: relative; width: 100%; height: 370px; } .nivo-main-image { width: 200% !important; height: 370px; } } /* .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; } */