A Pen by Luciano Tonet on CodePen.
Created
April 23, 2015 16:09
-
-
Save lucianotonet/c60fab7d4ea35c0dfc71 to your computer and use it in GitHub Desktop.
qdBKGp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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 | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment