"slider "
Bootstrap 3.0.0 Snippet by vivekbisht109

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body class="loaded"> <!-- Header --> <header id="top" class="header" data-stellar-background-ratio="0.5" style="background-position: -2.08333325386047px -20px;"> <div class="text-vertical-center"> <div class="logo text-center"> <div class="wow fade-in-logo r animated" data-wow-delay="5s" style="visibility: visible; -webkit-animation-delay: 5s;"> <span>R</span> </div> <p class="big-text fade-blur slide1"><span>60+</span>awesome demos</p> <!--<p class="big-text frame-5"> <span> <strong>14000+</strong> <br/>Users CAN`T BE WRONG</span> </p>--> <!--<p class="big-text frame-6"><span></span></p>--> <p class="big-text fade-blur-in slide3"><span>Royal</span> Theme</p> <hr class="small fade-in-logo"> <p class="rage fade-blur-in slide4"> <img src="http://8theme.com/demo/royal/preview/img/rage-text.png" alt=""> </p> <a href="http://themeforest.net/item/royal-multipurpose-wordpress-theme/8611976?ref=LTonet" class="btn btn-xl fade-in-logo">Check this now!</a> </div> </div> </header> </body>
@media only screen and (min-width: 768px) { @font-face { font-family:Bodoni; src: url(../fonts/bod-r.ttf) } } * { margin: 0; padding: 0 } body,html { width: 100%; height: 100% } body { font-family: 'Open Sans',sans-serif; -ms-overflow-x: hidden; overflow-x: hidden } .text-vertical-center { text-align: center; vertical-align: middle; width: 100% } .text-vertical-center h1 { margin: 0; padding: 0; font-size: 4.5em; font-weight: 700 } a { color: #FFF } h1,h2,h3,h4,h5,h6 { text-transform: uppercase } .credentials-html h1,.credentials-html h2,.credentials-html h3 { text-transform: uppercase; font-family: Roboto,sans-serif; font-weight: 300 } h1 { font-size: 48px } p.lead { font-weight: 300; color: #727272; font-size: 18px!important; line-height: 1.8 } p { line-height: 1.8 } li { list-style: none } #logo-loader { display: table; width: 100%; height: 100%; background-color: #FFF; z-index: 100 } #logo-loader img { display: table-cell; vertical-align: middle; text-align: center } .btn-dark { border-radius: 0; color: #fff; background-color: rgba(0,0,0,.4) } .btn-dark:active,.btn-dark:focus,.btn-dark:hover { color: #fff; background-color: rgba(0,0,0,.7) } .btn-light { border-radius: 0; color: #333; background-color: #fff } .btn-light:active,.btn-light:focus,.btn-light:hover { color: #333; background-color: rgba(255,255,255,.8) } hr.small { width: 50px; margin: 20px auto; display: block; height: 2px; background: rgba(255,255,255,.5); border: none } hr.small.grey { background: #CDCDCD } .navbar-default { border-color: transparent; background-color: #222; height: 85px } .navbar-default .navbar-brand { font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive; color: #fed136 } .navbar-fixed-bottom,.navbar-fixed-top { z-index: 999 } .navbar-default .navbar-brand.active,.navbar-default .navbar-brand:active,.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover { color: #fec503 } .navbar-default .navbar-collapse { border-color: rgba(255,255,255,.02) } .navbar-default .navbar-toggle { border-color: #fed136; background-color: #fed136 } .navbar-default .navbar-toggle .icon-bar { background-color: #fff } .navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover { background-color: #fed136 } .navbar-default .nav li a { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; letter-spacing: 1px; color: transparent; visibility: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out } .navbar-default .nav li a.btn { border-color: transparent; visibility: hidden } .navbar-default .nav li a:focus,.navbar-default .nav li a:hover { outline: 0; color: #fed136 } .navbar-default .navbar-nav>.active>a { border-radius: 0; color: #fff; background-color: #fed136 } .navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover { color: #fff; background-color: #fec503 } @media(min-width: 768px) { .navbar-default { padding:25px 0; border: 0; background-color: transparent; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s } .navbar-default .navbar-brand { font-size: 2em; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s } .navbar-default .navbar-nav>.active>a { border-radius: 3px } .navbar-default.navbar-shrink { padding: 8px 0; background-color: rgba(34,34,34,.8) } .navbar-default.navbar-shrink .nav li a { color: #FFF; visibility: visible } .navbar-default.navbar-shrink .nav li a:hover { color: #cda85c } .navbar-default.navbar-shrink .nav li a.btn { border: 2px solid #fff; visibility: visible } .navbar-default.navbar-shrink .navbar-brand { font-size: 1.5em } } #sidebar-wrapper { z-index: 1000; position: fixed; right: 0; width: 250px; height: 100%; margin-right: -250px; overflow-y: auto; background: #222; -webkit-transition: all .4s ease 0s; -moz-transition: all .4s ease 0s; -ms-transition: all .4s ease 0s; -o-transition: all .4s ease 0s; transition: all .4s ease 0s } .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none } .sidebar-nav li { text-indent: 20px; line-height: 40px } .sidebar-nav li a { display: block; text-decoration: none; color: #999 } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,.2) } .sidebar-nav li a:active,.sidebar-nav li a:focus { text-decoration: none } .sidebar-nav>.sidebar-brand { height: 55px; font-size: 18px; line-height: 55px } .sidebar-nav>.sidebar-brand a { color: #999 } .sidebar-nav>.sidebar-brand a:hover { color: #fff; background: 0 0 } #menu-toggle { z-index: 1; position: fixed; top: 0; right: 0 } #sidebar-wrapper.active { right: 250px; width: 250px; -webkit-transition: all .4s ease 0s; -moz-transition: all .4s ease 0s; -ms-transition: all .4s ease 0s; -o-transition: all .4s ease 0s; transition: all .4s ease 0s } .toggle { margin: 5px 5px 0 0 } .navbar-right { position: absolute; right: 100px; top: 20px } .header { display: table; position: relative; width: 100%; height: 100%; -ms-overflow-x: hidden; overflow-x: hidden; background: url(http://8theme.com/demo/royal/preview/img/bg.jpg) repeat-x fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; animation: animatedBackground 120s linear infinite; -webkit-animation: animatedBackground 120s linear infinite; } @-webkit-keyframes animatedBackground { from { background-position: 0 0 } to { background-position: -3000px 0 } } @-o-keyframes animatedBackground { from { background-position: 0 0 } to { background-position: -3000px 0 } } @-moz-keyframes animatedBackground { from { background-position: 0 0 } to { background-position: -3000px 0 } } @keyframes animatedBackground { from { background-position: 0 0 } to { background-position: -3000px 0 } } .header .nav a { font-family: Roboto,sans-serif!important } .header .nav .btn { border: 2px solid #fff; padding: 8px 20px; top: 5px; font-family: Roboto,sans-serif; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-border-radius: 0; border-radius: 0 } .header .btn:hover { color: #222!important; background-color: #FFF!important } .logo { position: relative; height: 340px; top: -60px } .logo .rage { font-family: rageItalic; font-size: 22px; color: #FFF; letter-spacing: 1px } .logo p { font-size: 16px; font-family: Roboto,sans-serif; font-weight: 700; color: #fff; letter-spacing: 1px } .logo .big-text { font-family: Roboto; font-size: 92px; font-weight: 700; color: #FFF; text-transform: uppercase; line-height: 90px; position: absolute; top: 50%; left: 0; margin: 0!important; width: 100%; text-align: center } .logo .slide3 { font-family: Bodoni; font-weight: 400; letter-spacing: 0!important } .text-vertical-center { display: none } .loaded .text-vertical-center { display: table-cell } .logo .big-text span { color: #CDA85C } .r { width: 96px; height: 144px; margin: 0 auto; font-family: Bodoni; background-color: rgba(22,22,22,.7); text-align: center; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .r span { font-size: 86px; color: #FFF; text-transform: uppercase; line-height: 122px; display: block; border: 2px solid #fff } .loaded .fade-in-logo { -webkit-animation: fade-in-logo 1.5s ease-in 6s both; -moz-animation: fade-in-logo 1.5s ease-in 6s both; -ms-animation: fade-in-logo 1.5s ease-in 6s both; animation: fade-in-logo 1.5s ease-in 6s both } .loaded .btn.fade-in-logo { -webkit-animation-delay: 6.5s; -moz-animation-delay: 6.5s; -o-animation-delay: 6.5s; animation-delay: 6.5s } .loaded hr.fade-in-logo { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; position: absolute; top: 50%; right: 50%; margin-right: -25px; margin-top: 100px } @-webkit-keyframes fade-in-logo { 0% { opacity: 0 } 100%,20%,75% { opacity: 1 } } @keyframes fade-in-logo { 0% { opacity: 0 } 100%,20%,75% { opacity: 1 } } .logo .one-half-text { width: 50%; text-align: center; margin: 20px auto } .logo .big-text img { position: relative; top: -40px; left: -20px } .about { padding: 50px 0 0 } .demo-list,.features,.purchase { padding: 50px 0 } .demo-list .row >div:nth-child(1) { background-color: #00b5b5 } .demo-list .row>div:nth-child(2) { background-color: #00ac65 } .demo-list .row >div:nth-child(3) { background-color: #f7ce38 } .demo-list .row >div:nth-child(4) { background-color: #f1654c } .service-item { margin-bottom: 30px } .demo-list .row >div,.demo-list .row >div a { color: #FFF } .demo-list .row >div a:focus { outline: none; border: none; } .demo-list .row >div a:hover { text-decoration: underline } .demo-list .row >div a { display: inline; padding: 10px 55px } .demo-list .row >div a.new { background-image: url(../img/new_icon.png); background-repeat: no-repeat; background-position: right 3px } .demo-list .row >div a.sale { background-image: url(../img/sale_icon.png); background-repeat: no-repeat; background-position: right 3px } .demo-list .row >div a.hot { background-image: url(../img/hot.png); background-repeat: no-repeat; background-position: right 3px } .demo-list .list-content { position: relative; padding: 10px 0 30px; margin: 30px 0 } .demo-list .list-content:after,.demo-list .list-content:before { content: ""; position: absolute; width: 250px; height: 1px; background-color: rgba(255,255,255,.5); left: 50%; margin-left: -125px; top: 0 } .demo-list .list-content:after { bottom: 0; top: auto } .demo-list .list-content li { position: relative; width: 250px; padding: 15px 0; margin: 0 auto; -webkit-animation-duration: .5s; animation-duration: .5s } .demo-list .list-content li:after { content: ""; position: absolute; bottom: 0; left: 50%; width: 16px; height: 1px; background-color: rgba(255,255,255,.5); margin-left: -8px } .demo-list .row >div { padding: 80px 20px; font-size: 16px; font-weight: 300; min-height: 1300px } .demo-list .row { margin: 0!important } .demo-list .row >div h4 { font-size: 28px; font-weight: 300; letter-spacing: 1px; display: inline; padding: 0 32px } .demo-list .row >div:nth-child(1) h4 { background-image: url(../img/preview-icon1.png); background-repeat: no-repeat; background-position: 0 2px } .demo-list .row>div:nth-child(2) h4 { background-image: url(../img/preview-icon2.png); background-repeat: no-repeat; background-position: 0 2px } .demo-list .row >div:nth-child(3) h4 { background-image: url(../img/preview-icon3.png); background-repeat: no-repeat; background-position: 0 2px } .demo-list .row >div:nth-child(4) h4 { background-image: url(../img/preview-icon4.png); background-repeat: no-repeat; background-position: 0 2px } .demo-list .row >div:nth-child(1) .list-content li { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s } .demo-list .row >div:nth-child(2) .list-content li { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s } .demo-list .row >div:nth-child(3) .list-content li { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s } .demo-list .row >div:nth-child(4) .list-content li { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s } .demo-list .list-content li .hidden-image { position: absolute; left: 95%; display: none; top: 25px; background-color: #252525; z-index: 1; padding: 10px } .demo-list .list-content li .hidden-image a { padding: 0 } .demo-list .list-content li:hover .hidden-image { display: block } .demo-list .row >div:nth-child(3) .list-content li .hidden-image,.demo-list .row >div:nth-child(4) .list-content li .hidden-image { left: auto; right: 95% } .callout { display: table; width: 100%; height: 400px; color: #fff; background: url(../img/callout.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover } .portfolio { padding: 50px 0 } .portfolio-item { margin-bottom: 30px } .img-portfolio { margin: 0 auto } .img-portfolio:hover { opacity: .8 } .call-to-action { padding: 50px 0 } .call-to-action .btn { margin: 10px } .map { height: 500px } @media(max-width: 768px) { .map { height:75% } } .features { background-image: url(../img/3-6.jpg); background-repeat: no-repeat; color: #FFF; overflow: hidden; padding-top: 70px; padding-bottom: 0; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed } .features hr.small.grey { background: #5B5B5B } .color-white { color: #FFF!important } .features p { color: #717171 } .features p.lead { margin-bottom: 60px; padding: 0 30px } .par-bg { position: relative } .features .par-1,.features .par-2,.features .par-3,.features .par-4 { position: absolute; top: 0; font-size: 60px; color: #fff } .features .par-1 img,.features .par-2 img,.features .par-3 img,.features .par-4 img { position: relative; top: -180px } .features .owl-carousel { cursor: move } .features-item { display: inline-block } .features-item img { margin-right: 20px; display: table-cell; vertical-align: top } .features-item div { display: table-cell; vertical-align: middle } .features-item div h5 { letter-spacing: 1px } .features-item p { font-size: 13px } .features-slide { width: 100% } .features-slide img { max-width: 100%; display: inline-block!important } .features-item.animated:nth-child(1) { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s } .features-item.animated:nth-child(2) { -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s } .features-item.animated:nth-child(3) { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s } .features-item.animated:nth-child(4) { -webkit-animation-delay: .8s; -moz-animation-delay: .8s; -o-animation-delay: .8s; animation-delay: .8s } .features-item.animated:nth-child(5) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s } .features-item.animated:nth-child(6) { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s } .owl-pagination { text-align: center; position: absolute; bottom: 0; width: 100% } .owl-page { display: inline-block } .owl-page span { width: 15px; height: 15px; margin: 5px 7px; border: 2px solid #fff; display: block; cursor: pointer; -webkit-backface-visibility: visible; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100% } .owl-page span:hover,.owl-page.active span { background-color: #FFF } .owl-buttons div { font-size: 0; width: 32px; opacity: .8; height: 60px; position: absolute; top: 50%; margin-top: -30px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out } .owl-buttons .owl-prev { left: 40px; background-image: url(../img/arrow_left.png); background-repeat: no-repeat; background-position: center center } .owl-buttons .owl-next { right: 40px; background-image: url(../img/arrow_right.png); background-repeat: no-repeat; background-position: center center } .owl-buttons div:hover { opacity: 1 } footer { padding: 100px 0 50px; background-image: url(../img/3-6.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: ; -webkit-background-size: cover; -o-background-size: cover; background-size: cover } footer .f-logo { max-width: 100% } footer .foo-text { font-size: 16px; color: #FFF; font-weight: 300; margin-bottom: 20px; float: left; width: 100%; display: inline-block } footer .foo-text div { float: none; display: inline-block } footer .foo-text a { font-weight: 500; color: #FFF; text-decoration: underline } footer .list-inline { margin-bottom: 20px } footer .list-inline a img { opacity: .5; -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out } footer .list-inline a:hover img { opacity: .3 } footer .copyright { color: #fff; font-size: 14px; letter-spacing: .5px } footer .copyright a { color: #FFF } .btn.medium { padding: 9px 20px!important; border: 2px solid #fff; text-transform: uppercase; display: inline-block!important; border-radius: 0 } .big-btn-wrap { margin-top: 60px; margin-bottom: 40px } .btn-big { border: none; font-family: inherit; cursor: pointer; display: inline-block; margin: 15px 30px; text-transform: uppercase; letter-spacing: 1px; overflow: hidden; outline: 0; position: relative; background: #a7c736; color: #fff; font-size: 24px; box-shadow: 0 6px #85a80b; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; border-radius: 5px; top: -2px } .btn-big a { padding: 14px 65px } .btn-big div { padding: 10px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .btn-big:hover { box-shadow: 0 4px #85a80b; top: 0; color: #FFF; text-decoration: none } .btn-big:active { box-shadow: 0 0 #85a80b; top: 5px } .btn-5 a:before { content: "For Only $58"; position: absolute; height: 100%; width: 100%; color: #FFF; font-size: 24px; line-height: 91px; -webkit-transition: all .4s; -moz-transition: all .4s; transition: all .4s } .btn-5 span { display: inline-block; width: 100%; height: 100%; opacity: 1; -webkit-transition: all .4s; -webkit-backface-visibility: hidden; -moz-transition: all .4s; -moz-backface-visibility: hidden; transition: all .4s; backface-visibility: hidden } .btn-5:hover span { -webkit-transform: translateY(300%); -moz-transform: translateY(300%); -ms-transform: translateY(300%); transform: translateY(300%); opacity: 0 } .btn-5 a:before { left: 0; top: -100%; opacity: 1 } .btn-5 a:hover:before { top: 0 } .btn-xl { display: inline-block; position: absolute; bottom: -60px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); padding: 12px 32px; border: 2px solid #fff; background-color: transparent; color: #FFF; text-transform: uppercase; -webkit-border-radius: 0; border-radius: 0; letter-spacing: 2px; font-size: 13px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out } .btn-xl:hover { color: #252525; background-color: #FFF } body.js-preloader { display: none } .js-preloader #wpadminbar,.js-preloader .st-container { opacity: 0; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out } .js-preloader.loading-ready #wpadminbar,.js-preloader.loading-ready .st-container { opacity: 1 } #jpreContent { display: none } #jpreLoader { width: 100%; height: 4px; margin-top: 0 } #jpreSlide { width: 100%; text-align: center; top: auto!important; bottom: 50% } #jpreSlide #jpreContent { display: block; position: relative; margin-bottom: 40px } #jpreOverlay { background-color: #fff; height: 100%!important; position: fixed!important } #jprePercentage { display: block!important; text-align: center } #jpreBar { z-index: 2; background-color: #000 } #jpreButton { display: none!important } #jprePercentage { font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-top: 30px; font-family: Bodoni,Georgia; font-size: 24px } #jpreLoader { top: 50%!important } #preloader img { visibility: visible; position: relative; top: -90px } #jprePercentage { visibility: visible } #preloader { height: 0 } .loaded .fade-blur { -webkit-animation: fadeBlur 3.5s ease-in backwards; -moz-animation: fadeBlur 3.5s ease-in backwards; -ms-animation: fadeBlur 3.5s ease-in backwards; animation: fadeBlur 3.5s ease-in backwards; color: transparent!important } .fade-blur span { color: transparent!important } .loaded .fade-blur-in { -webkit-animation: fadeBlurIn 1s linear backwards; -moz-animation: fadeBlurIn 1s linear backwards; -ms-animation: fadeBlurIn 1s linear backwards; animation: fadeBlurIn 1s linear backwards } .loaded .fade-blur.slide1 { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; margin-top: -80px } .slide1 span { font-size: 160px; margin-top: -30px; margin-bottom: 50px; display: block; width: 100%; font-weight: 400; text-align: center } .loaded .fade-blur.slide2 { -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -o-animation-delay: 10s; animation-delay: 10s; margin-top: -105px } .loaded .fade-blur-in.slide3 { -webkit-animation-delay: 5.5s; -moz-animation-delay: 5.5s; -o-animation-delay: 5.5s; animation-delay: 5.5s; margin-top: -100px } .loaded .fade-blur-in.slide4 { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; margin-top: 150px } .loaded .logo .frame-5 { -webkit-animation: fadeBlurStatic 9s ease-in both; -moz-animation: fadeBlurStatic 9s ease-in both; -ms-animation: fadeBlurStatic 9s ease-in both; animation: fadeBlurStatic 9s ease-in both; color: transparent; font-size: 80px; margin-top: 0; text-shadow: 0 0 1px #fff } .loaded .logo .frame-5 span { -webkit-animation: fadeBlurIn 1.5s ease-in 5s backwards; -moz-animation: fadeBlurIn 1.5s ease-in 5s backwards; -ms-animation: fadeBlurIn 1.5s ease-in 5s backwards; animation: fadeBlurIn 1.5s ease-in 5s backwards; color: transparent; text-shadow: 0 0 1px #fff } .loaded .logo .frame-5 span strong { font-weight: 400; font-size: 150px; margin-top: -140px; margin-bottom: 50px; width: 100%; text-align: center } .logo .frame-5 span:nth-child(3) { -webkit-animation-delay: 5s; -moz-animation-delay: 5s; -ms-animation-delay: 5s; animation-delay: 5s } .logo .frame-5 span:nth-child(4) { -webkit-animation-delay: 5.5s; -moz-animation-delay: 5.5s; -ms-animation-delay: 5.5s; animation-delay: 5.5s } .logo .frame-6 { -webkit-animation: fadeBlurStatic 11.5s ease-in both; -moz-animation: fadeBlurStatic 11.5s ease-in both; -ms-animation: fadeBlurStatic 11.5s ease-in both; animation: fadeBlurStatic 11.5s ease-in both; color: transparent; font-size: 80px; margin-top: 0; text-shadow: 0 0 1px #fff } .logo .frame-6 span { -webkit-animation: fadeBlurIn 1.5s ease-in 7.5s backwards; -moz-animation: fadeBlurIn 1.5s ease-in 7.5s backwards; -ms-animation: fadeBlurIn 1.5s ease-in 7.5s backwards; animation: fadeBlurIn 1.5s ease-in 7.5s backwards; color: transparent; text-shadow: 0 0 1px #fff } .logo .frame-6 span:nth-child(2) { -webkit-animation-delay: 7.5s; -moz-animation-delay: 7.5s; -ms-animation-delay: 7.5s; animation-delay: 7.5s } .logo .frame-6 span:nth-child(3) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s } .logo .frame-6 span:nth-child(4) { -webkit-animation-delay: 9.5s; -moz-animation-delay: 9.5s; -ms-animation-delay: 9.5s; animation-delay: 9.5s } @-webkit-keyframes fadeBlur { 0% { opacity: 0; text-shadow: 0 0 40px #fff; -webkit-transform: scale(1.3) } 20%,75% { opacity: 1; text-shadow: 0 0 1px #fff; -webkit-transform: scale(1) } 100% { opacity: 0; text-shadow: 0 0 50px #fff; -webkit-transform: scale(0) } } @keyframes fadeBlur { 0% { opacity: 0; text-shadow: 0 0 40px #fff; transform: scale(1.3) } 20%,75% { opacity: 1; text-shadow: 0 0 1px #fff; transform: scale(1) } 100% { opacity: 0; text-shadow: 0 0 50px #fff; transform: scale(0) } } @keyframes fadeBlurIn { 0% { opacity: 0; text-shadow: 0 0 40px #fff; transform: scale(1.3) } 50% { opacity: .5; text-shadow: 0 0 10px #fff; transform: scale(1.1) } 100% { opacity: 1; text-shadow: 0 0 1px #fff; transform: scale(1) } } @-webkit-keyframes fadeBlurIn { 0% { opacity: 0; text-shadow: 0 0 40px #fff; -webkit-transform: scale(1.3) } 50% { opacity: .5; text-shadow: 0 0 10px #fff; -webkit-transform: scale(1.1) } 100% { opacity: 1; text-shadow: 0 0 1px #fff; -webkit-transform: scale(1) } } @-webkit-keyframes fadeBlurStatic { 0% { opacity: 0; text-shadow: 0 0 40px #fff; -webkit-transform: scale(1) } 50%,90% { opacity: 1; text-shadow: 0 0 1px #fff; -webkit-transform: scale(1) } 100% { opacity: 0; text-shadow: 0 0 50px #fff; -webkit-transform: scale(0) } } @keyframes fadeBlurStatic { 0% { opacity: 0; text-shadow: 0 0 40px #fff; transform: scale(1) } 50%,90% { opacity: 1; text-shadow: 0 0 1px #fff; transform: scale(1) } 100% { opacity: 0; text-shadow: 0 0 50px #fff; transform: scale(0) } } .md-perspective,.md-perspective body { height: 100%; overflow: hidden } .md-perspective body { background: #222; -webkit-perspective: 600px; -moz-perspective: 600px; perspective: 600px } .md-modal { position: fixed; top: 50%; left: 50%; width: 990px; min-width: 320px; min-height: 370px; height: auto; z-index: 0; visibility: hidden; -webkit-border-radius: 0; border-radius: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%) } .md-modal.md-show { visibility: visible; z-index: 2000 } .md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(0,0,0,.8); -webkit-transition: all .4s; -moz-transition: all .4s; transition: all .4s } .md-show~.md-overlay { opacity: 1; visibility: visible } .md-content { color: #fff; position: relative; margin: 0 auto; text-align: center; -webkit-box-shadow: 0 0 0 14px rgba(255,255,255,.2); box-shadow: 0 0 0 14px rgba(255,255,255,.2) } .md-content h3 { margin: 0; padding: .4em; text-align: center; font-size: 2.4em; font-weight: 300; opacity: .8; background: rgba(0,0,0,.1); border-radius: 3px 3px 0 0 } .md-content>div { padding: 15px 40px 30px; margin: 0; font-weight: 300; font-size: 1.15em } .md-content>div p { margin: 0; padding: 10px 0 } .md-content>div ul { margin: 0; padding: 0 0 30px 20px } .md-content>div ul li { padding: 5px 0 } .md-content button { display: block; margin: 0 auto; font-size: .8em } .md-effect-3 .md-content { -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; -webkit-transition: all .4s; -moz-transition: all .4s; transition: all .4s } .md-show.md-effect-3 .md-content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1 } .md-close { position: absolute; cursor: pointer; background-color: rgba(255,255,255,.2); color: #fff; font-size: 19px!important; text-align: center; width: 30px; height: 30px; padding: 0!important; top: -50px; right: -14px } @media (max-width: 1200px) { .header { -webkit-animation:none; -moz-animation: none; -o-animation: none; animation: none; background-attachment: scroll!important; background-position: center!important } .navbar-default { display: none } .features { background-attachment: scroll!important; background-position: center!important } .big-text { display: none } .big-text.slide3 { display: block!important } .loaded .fade-blur-in,.loaded .fade-in-logo { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; opacity: 1; display: block!important } .big-text { font-size: 64px!important } .demo-list .row >div { min-height: 700px!important; display: inline-block; } .demo-list .row >div .hidden-image { display: none!important } .features-item.animated { -webkit-animation: none!important; -moz-animation: none!important; -o-animation: none!important; animation: none!important } } @media (max-width: 979px) { .header { background:url(../img/bg-medium.jpg) } .demo-list .row >div h4 { background-image: none!important } .demo-list .row >div { padding: 40px 20px } } @media (max-width: 1400px) { .big-text { font-size:76px!important } .big-text.slide3 { font-size: 92px!important } } @media (max-width: 1030px) and (min-width:979px) { .hidden-ipad { display:none!important } .features-item { width: 50%; float: left } } @media (max-width: 600px) { .logo { height:280px; top: -30px } .big-text.slide3 { font-size: 56px!important } .r { width: 80px; height: 115px } .r span { font-size: 66px; line-height: 92px } .features { padding-top: 30px } .features .features-item { padding: 0 } h1 { font-size: 32px; line-height: 38px } .loaded .fade-blur-in.slide4 { margin-top: 130px } .loaded hr.fade-in-logo { margin-top: 90px } } @media (max-width: 480px) { .big-text.slide3 { font-size:36px!important } .btn-big { font-size: 18px; padding: 14px 15px; margin: 0 } .btn-big a { padding: 5px 40px } .btn-big:before { font-size: 18px; line-height: 82px } h1 { font-size: 24px } .demo-list { padding: 20px 0 } .features,.purchase { padding: 30px 0 } .features { display: none; padding-bottom: 0; background-image: none!important } footer { background-image: url(../img/red-polygon-small.jpg); background-attachment: scroll } .demo-list .row >div h4 { font-size: 24px } .header { background: url(../img/bg-small.jpg) } .features-slide img { display: none; visibility: hidden } .credentials-html { display: none!important; visibility: hidden!important } } .mfp-move-from-top .mfp-content { vertical-align: middle; opacity: 0; transition: all .3s; transform: translateY(100px); -webkit-box-shadow: 0 0 0 14px rgba(255,255,255,.2); box-shadow: 0 0 0 14px rgba(255,255,255,.2) } .mfp-iframe-scaler iframe { -webkit-box-shadow: none; box-shadow: none } .mfp-move-from-top.mfp-bg { opacity: 0; transition: all .2s } .mfp-move-from-top.mfp-ready .mfp-content { opacity: 1; transform: translateY(0) } .mfp-move-from-top.mfp-ready.mfp-bg { opacity: .8 } .mfp-move-from-top.mfp-removing .mfp-content { transform: translateY(-50px); opacity: 0 } .mfp-move-from-top.mfp-removing.mfp-bg { opacity: 0 } .mfp-iframe-holder .mfp-close { top: -50px; right: -20px } .QOverlay { background-color: transparent; z-index: 9999 } .QLoader { background-color: #CCC; height: 1px } .QAmt { color: #333; font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; font-size: 40px; font-weight: 700; line-height: 50px; height: 50px; width: 100px; margin: -60px 0 0 -50px } .google-iframe,.google-iframe iframe { height: 0!important; position: absolute; bottom: 0; z-index: -1 } .fb-share-button { background-image: url(../img/footer-icon2.png)!important; background-repeat: no-repeat; background-position: center center } #facebook img { display: none!important } .hidden-tooltip { position: relative } .hidden-tooltip .open-tooltip { color: #fff; margin-bottom: 10px; font-weight: 700; margin-left: 5px } .hidden-tooltip .open-tooltip i { padding: 5px 9px; border: 1px solid #bcbcbc; -webkit-border-radius: 100%; border-radius: 100%; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-animation: tooltip-color 1.5s ease-in infinite; -moz-animation: tooltip-color 1.5s ease-in infinite; -ms-animation: tooltip-color 1.5s ease-in infinite; animation: tooltip-color 1.5s ease-in infinite } .hidden-tooltip .open-tooltip i:hover { border: 1px solid #000; color: #000; -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none } .hidden-tooltip .tooltip-content { display: none; position: absolute; background-color: #222; bottom: -100%; margin-bottom: 40px; margin-left: 20px; color: #FFF; width: 300px; font-size: 13px; left: 100%; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 1001; padding: 20px } .hidden-tooltip .tooltip-content .btn-close { cursor: pointer; position: absolute; top: 20px; right: 20px } .hidden-tooltip .tooltip-content .btn-close i { font-size: 0; background-image: url(images/btn-close-tooltip.png); background-repeat: no-repeat; background-position: center center; width: 11px; height: 11px; position: relative; top: -12px } .hidden-tooltip .tooltip-content .btn-close i:hover { border: none } .hidden-tooltip .tooltip-content p { color: #a4a4a4; margin-bottom: 10px } .hidden-tooltip .tooltip-content img { max-width: 100% } .hidden-tooltip .tooltip-content .tooltip_inner { width: 260px; opacity: 0; text-align: left!important } .hidden-tooltip .tooltip-content.opened-tooltip .tooltip_inner { -webkit-animation: tooltip-animation .3s ease-in .2s forwards; -moz-animation: tooltip-animation .3s ease-in .2s forwards; -ms-animation: tooltip-animation .3s ease-in .2s forwards; animation: tooltip-animation .3s ease-in .2s forwards } @-webkit-keyframes tooltip-animation { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes tooltip-animation { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes tooltip-color { 0% { color: #fff } 50% { color: #333 } 100% { color: #fff } } @keyframes tooltip-color { 0% { color: #fff } 50% { color: #333 } 100% { color: #fff } } @-webkit-keyframes tooltip-color-white { 0% { color: #444 } 50% { color: #fff } 100% { color: #444 } } @keyframes tooltip-color-white { 0% { color: #444 } 50% { color: #fff } 100% { color: #444 } } .credentials-html { visibility: hidden; position: absolute; opacity: 0; top: -100%; width: 100%; height: 100%; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out } .credentials-html .credentials-content { display: table-cell; vertical-align: middle; text-align: center; width: 100% } .credentials-html .credentials-content a { color: #FFF } .credentials-html .credentials-content p { font-size: 16px; color: #9E9E9E } .credentials-html .credentials-content ul.rclick-list { position: absolute; right: 130px; top: 50px } .credentials-html .credentials-content ul.rclick-list li { display: inline-block; padding: 0 10px; border-right: 1px solid #fff } .credentials-html .credentials-content ul.rclick-list li:last-child { border-right: none } .credentials-html .credentials-content ul.rclick-list li a { text-transform: uppercase; font-size: 12px; font-weight: 700 } .credentials-html .credentials-content ul.rclick-list li a:hover { color: #CDA85C } .credentials-html .credentials-content .col-lg-8 { margin-top: 70px } .credentials-html .credentials-content a.rclick-btn { display: inline-block; padding: 12px 32px; border: 2px solid #616161; background-color: transparent; color: #FFF; text-transform: uppercase; -webkit-border-radius: 0; border-radius: 0; letter-spacing: 2px; font-size: 18px; font-weight: 500; margin-top: 30px; font-family: Roboto,sans-serif; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out } .credentials-html .credentials-content a.rclick-btn:hover { background-color: #FFF; text-decoration: none; color: #000; border-color: #fff } .credentials-html .close-credentials { font-size: 0; position: absolute; top: 40px; right: 40px; width: 35px; height: 35px; cursor: pointer } .credentials-html .close-credentials:before { content: ""; width: 35px; height: 35px; display: block; background-image: url(../img/medium-cross.png); background-repeat: no-repeat; background-position: center center } .shown-credentials { overflow: hidden } .shown-credentials .credentials-html { position: fixed; visibility: visible; display: table; width: 100%; height: 100%; opacity: 1; background-color: rgba(0,0,0,.9); left: 0; top: 0; z-index: 10000; color: #fff } hr.break { width: 50px; margin: 20px auto; display: block; height: 3px; background: #e6e6e6; border: none } .mfp-wrap { z-index: 100000!important }

Related: See More


Questions / Comments: