<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
}
