/** ================================================== * Name:Bhola App - Responsive Landing Page HTML * Version: 1.0 * Author: Theembazaar * Author URL: http://www.theembazaar.com =================================================== */ /*Table Content ================================================= * BASIC STYLE - Typography Style - Padding and Margin Style - General Style * HEADER * FOOTER ================================================ */ /*-------------------------------------------------------------------------------------------*/ /* BY BETO ------------------ */ /*-------------------------------------------------------------------------------------------*/ .vcontainer { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; margin-top: 40px; } .video { position: absolute; top: 0; left: 2%; width: 96%; height: 96%; } /*-------------------------------------------------------------------------------------------*/ /* BASIC STYLE ||---------------------------- */ /*-------------------------------------------------------------------------------------------*/ body, html { margin: 0; padding: 0; } body { line-height: 24px; color: #323232; font-size: 14px; font-weight: 400; font-family: 'Open Sans', Arial, Helvetica, sans-serif; } /* Typography Style ||-----------*/ h1 { font-size: 50px; margin-top: 0; font-family: 'Oswald', sans-serif; line-height: 1.3; text-transform: uppercase; position: relative; } h2 { font-size: 30px; margin-top: 0; font-family: 'Oswald', sans-serif; text-transform: uppercase; } h5 { font-size: 15px; line-height: 1.5; font-weight: 800; } h6 { font-size: 13px; letter-spacing: 2px; line-height: 17px; font-weight: 800; } @media (max-width: 767px) { h1 { font-size: 25px; line-height: 1.6; } h3 { font-size: 18px; line-height: 1.6; } } h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; text-transform: uppercase; margin-top: 10px } h2 span, h3 span { font-weight: 300; } a:hover, a:focus { text-decoration: none; outline: none; } a { color: #333; } *, *:before, *:after { box-sizing: border-box; } img { max-width: 100%; } .light-btn { background: #00d5c3; color: #fff; border: 1px solid #00d5c3; } .btn-primary { margin-right: 20px; border: none; } .btn { font-size: 14px; padding: 11px 27px; min-width: 162px; margin-bottom: 20px; } .icons { font-size: 21px; margin-left: 18px; vertical-align: -3px; } .icon-arrow-right-circle { font-size: 21px; margin-left: 18px; vertical-align: -3px; } .btn-lg { font-size: 19px; min-width: 202px; padding: 15px 11px; } .line-btn { background: transparent; border: 1px solid #00d5c3; color: #00d5c3; } .line2-btn { background: transparent; border: 1px solid #fff; color: #fff; } .line2-btn:hover, .line2-btn:focus, .line2-btn:active:focus { background: #00d5c3; color: #1a1c20; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; border-color: #00d5c3; } .line-btn:hover, .line-btn:focus, .line-btn:active:focus { background: #00d5c3; color: #fff; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; border-color: #00d5c3; } /*==================*/ .mtb { margin: 25px 0; } .panel-box, .panel-box-white { border: 1px solid #444; margin: 1em 0; padding: 3em 2em; } .table-block { height: 400px; width: 80%; margin: 0 auto; } .table-block .vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .apps-box a { font-weight: 300; color: #ddd; margin: 0.5em 0.25em; padding: 0.8em 1em; border: 1px solid #444; display: inline-block; border-radius: 5px; position: relative; width: 80%; } apps-box .zmdi { margin-right: 0.4em; font-size: 26px; position: absolute; left: 16px; } .icon-size { font-size: 60px; color: #fff; } @media (min-width: 35em) { .apps-box a { width: auto; padding: 0.8em 1em 0.8em 3em; } } .margin-top { margin-top: 1em; } .margin-bottom { margin-bottom: 1em; } .grey-dark-alt-bg { background-color: #292929; } .black-alt-bg { background-color: #202020; } .grey-dark-alt-bg p.grey-med, .grey-dark-alt-bg h1.grey-med, .grey-dark-alt-bg h2.grey-med, .grey-dark-alt-bg h3.grey-med, .grey-dark-alt-bg h4.grey-med, .grey-dark-alt-bg h5.grey-med, .grey-dark-alt-bg h6.grey-med, .grey-dark-alt-bg span.grey-med, .grey-dark-alt-bg li.grey-med { color: #cecaca; } .grey-dark-alt-bg p, .grey-dark-alt-bg h1, .grey-dark-alt-bg h2, .grey-dark-alt-bg h3, .grey-dark-alt-bg h4, .grey-dark-alt-bg h5, .grey-dark-alt-bg h6, .grey-dark-alt-bg span, .grey-dark-alt-bg li { color: #fff; } .black-alt-bg p, .black-alt-bg h1, .black-alt-bg h2, .black-alt-bg h3, .black-alt-bg h4, .black-alt-bg h5, .black-alt-bg h6, .black-alt-bg span, .black-alt-bg li { color: #fff; } .black-alt-bg p.grey-med, .black-alt-bg h1.grey-med, .black-alt-bg h2.grey-med, .black-alt-bg h3.grey-med, .black-alt-bg h4.grey-med, .black-alt-bg h5.grey-med, .black-alt-bg h6.grey-med, .black-alt-bg span.grey-med, .black-alt-bg li.grey-med { color: #cecaca; } .title-heading{ position:relative; } .title-heading:before{ position: absolute; top: 42px; left: 0; content: attr(data-title); font-size: 250px; color: #504d4d; z-index: -1; font-family: 'Oswald', sans-serif; opacity: 0.3; } h5 { font-weight: 300; font-size: 1.5em; } a { color: #008CBA; line-height: inherit; text-decoration: none; } .pad-large, .command-control { padding: 60px 0; } .pad-top { padding-top: 60px; } .pad-top-large { padding-top: 50px; } .pad-bottom-large { padding-bottom: 50px; } p { font-family: inherit; font-weight: normal; line-height: 1.6; margin-bottom: 1.25rem; text-rendering: optimizeLegibility; } @media (min-width: 40em) { .pad-large { padding: 100px 0; } .pad-top { padding-top: 100px; } } @media (min-width: 40em) { .pad-sides-15 { padding-left: 15%; padding-right: 15%; } } .black-alt-bg { background-color: #202020; } @media (min-width: 800px) { .launchkey-mobile-bg { background-image: url(https://dmjwor2go9n1u.cloudfront.net/website/images/mfa/9d487256fc0dc08592920cc797d8320560c544f2.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 900px; } } .launchkey-mobile-bg-padding { padding-bottom: 4em; } @media (min-width: 800px) { .launchkey-mobile-bg-padding { padding-bottom: 600px; } } .margin-bottom-large { margin-bottom: 4em; } @media (min-width: 40em) { .pad-sides-15 { padding-left: 15%; padding-right: 15%; } } .mobile-bg { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#202020+0,3c3c3c+48,202020+100 */ background: #202020; /* Old browsers */ background: -moz-linear-gradient(left, #202020 0%, #3c3c3c 48%, #202020 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #202020 0%, #3c3c3c 48%, #202020 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #202020 0%, #3c3c3c 48%, #202020 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#202020', GradientType=1 ); /* IE6-9 */ min-height: 600px; } .no-gutter { padding-left: 0; padding-right: 0; } .team-info-block { background: #191818; padding: 10px 70px 10px 54px; } .team-block { display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: stretch; } .team-block figure, .team-block .team-info-block { width: 50%; } .team-wrap img { width: 100%; } .txt-right { text-align: right; } .team-block { display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: stretch; } .team-block-rev { display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; } .team-info-block h4 { color: #4d4d4d; margin: 34px 0 5px 0; } .team-info-block strong { font-size: 1rem; color: #4d4d4d; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 23px; } .team-info-block p { color: #949494; font-size: 1.4rem; line-height: 2; margin-bottom: 27px; } .cont-email, .cont-email:hover { font-size: 1.4rem; display: block; text-decoration: none; vertical-align: middle; } .cont-email i { margin-right: 10px; vertical-align: middle; } @media (max-width: 767px) { .team-block { display: block; } .team-block figure, .team-block .team-info-block { width: 100%; float: none; display: block; } .team-info-block { padding: 40px 20px; text-align: center; } .table-block { height: auto; width: 100%; } .table-block .vertical-align { position: relative; top: 0; -webkit-transform: translateY(0); transform: translateY(0); padding-bottom: 60px; } } /*======Header=======*/ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; } .normal { position: static; } .logo { margin-top: 13px; } .anchor-nav { height: 64px; margin: 0; text-align: center; float: right; overflow: hidden; } .anchor-nav li { color: #868686; font-weight: 300; list-style-type: none; display: inline-block; } .anchor-nav a { color: #fff; font-size: 15px; font-weight: 300; padding: 1.3em 1.3em .1em 1.3em; display: block; } .shader { background: #1c2226; position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: .9; } section#top .secondary-phone { position: absolute; top: -50px; right: 0px; height: 598px; overflow: hidden; } section#top .main-phone { width: 345px; position: absolute; top: -100px; left: 50px; } section#top { background: url(../images/banner.jpg) top center no-repeat; background-size: cover; height: 700px; padding-top: 151px; z-index: 5; position: relative; } .white-color h1, .white-color h3 { color: #fff; } .menu { background: none; border: none; border-bottom: 4px solid #00d1d7; border-top: 4px solid #00d1d7; height: 29px; position: absolute; right: 29px; top: 4px; width: 44px; z-index: 10; } .menu:after { background: #00d1d7; content: ""; height: 4px; position: absolute; right: 0; top: 9px; width: 100%; } @media (max-width: 767px) { .logo { height: 52px; } .anchor-nav { overflow: visible; float: none; padding: 0; margin: 0; height: auto; } .anchor-nav li { float: none; display: block; } .navigation { background: rgba(14,13,13,0.98); left: 0; position: absolute; text-align: left; top: 0; width: 100%; padding-bottom: 20px; display: none; } section#top{ height: 578px; } .container, .container-fluid{ max-width:480px; width:100%; margin:0 auto; } } /*=======Footer======*/ .contact-form, .social-links { padding: 0; } .social-links li { display: inline-block; } .social-links li a { color: #c1c3c7; font-size: 21px; padding-left: 0; margin: 28px 25px 0 0; display: inline-block; } .footer-social-link li a { font-size: 12px; color: #bac0cb; } .copy-right { font-size: 12px; color: #bac0cb; } .dis-blk { display: block !important; } .copy-right span { height: 10px; width: 1px; margin: 0 6px; display: inline-block; background: #959ba6; } .cyan-color { color: #00d5c3 !important; } .mt-45 { margin-top: 45px; } /** * ================================ * Preloader Style * ================================ */ .loader-wrapper { background: #202020; } .ball-scale-multiple > div { background-color: #008ed6; } /** * ================================ * Preloader Style * ================================ */ .loader-wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99999999999999999; } .loader-wrapper .loader-inner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, 50%, 0) ; -moz-transform: translate3d(-50%, 50%, 0) ; -ms-transform: translate3d(-50%, 50%, 0) ; -o-transform: translate3d(-50%, 50%, 0) ; transform: translate3d(-50%, 50%, 0) ; } .ball-scale-multiple { position: relative; -webkit-transform: translateY(-30px) ; -moz-transform: translateY(-30px) ; -ms-transform: translateY(-30px) ; -o-transform: translateY(-30px) ; transform: translateY(-30px) ; } .ball-scale-multiple > div { width: 15px; height: 15px; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; left: -30px; top: 0px; opacity: 0; margin: 0; width: 60px; height: 60px; -webkit-animation: ball-scale-multiple 1s 0s linear infinite; animation: ball-scale-multiple 1s 0s linear infinite; } .ball-scale-multiple > div:nth-child(2) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .ball-scale-multiple > div:nth-child(3) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } @-webkit-keyframes ball-scale-multiple { 0% { -webkit-transform: scale(0) ; -moz-transform: scale(0) ; -ms-transform: scale(0) ; -o-transform: scale(0) ; transform: scale(0) ; opacity: 0; } 5% { opacity: 1; } 100% { -webkit-transform: scale(1) ; -moz-transform: scale(1) ; -ms-transform: scale(1) ; -o-transform: scale(1) ; transform: scale(1) ; opacity: 0; } } @keyframes ball-scale-multiple { 0% { -webkit-transform: scale(0) ; -moz-transform: scale(0) ; -ms-transform: scale(0) ; -o-transform: scale(0) ; transform: scale(0) ; opacity: 0; } 5% { opacity: 1; } 100% { -webkit-transform: scale(1) ; -moz-transform: scale(1) ; -ms-transform: scale(1) ; -o-transform: scale(1) ; transform: scale(1) ; opacity: 0; } }