kode untuk wp
kode untuk update fileunknown
php
4 years ago
210 kB
5
Indexable
/* Theme Name: Dotted Theme URI: http://demo.oceanthemes.net/dotted Author: OceanThemes Author URI: http://oceanthemes.net/ Description: Introducing dotted the best premium website template for Freight, Logistics & Transportation. Dotted is easy to use, it provides everything you need to create great looking website. With dotted you can impress your customer by it’s professional design and the interactivity. dotted built with latest website technology to ensure your website is looks nice on desktop and mobile. Get dotted now! Version: 1.0.6 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: dotted Domain Path: /languages Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, sticky-post, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. Redux Theme is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ */ /*------------------------------------------------------------------ /*! [ DOTTED Stylesheet ] Project: Dotted Multipurpose HTML Template Version: 1.0 Last change: 05/06/2016 [release] Assigned to: RivaThemes Primary use: Online [Table of contents] 1. Top bar / .topbar 2. Header / header 3. Navigation / .navi-level-1 4. Blog / .lastest-blog-container 5. Sidebar / .main-sidebar 6. Search / .modal-search 7. Sub Header / .sub-header 8. Footer / footer */ /* #RESET CSS */ .wp-caption-text, .gallery-caption, .bypostauthor{ } .wp-caption { max-width: 100%; } img.aligncenter { margin-left: auto; margin-right: auto !important; display: block; clear: both; margin-top: 5px; width: auto !important; } .aligncenter { margin-left: auto; margin-right: auto; display: block; clear: both; } img.alignleft { margin: 5px 20px 20px 0; float: left; width: auto !important; } .alignleft { margin: 5px 10px 20px 0; float: left; } img.alignright { margin: 5px 0 20px 20px; float: right; width: auto !important; } .alignright { margin: 5px 0 20px 20px; float: right; } .transparent { z-index: 1; display: block; padding: 100px 0; position: relative; } .sticky .post { padding: 20px; background: #eee; } #main_content .sticky .post h2 { font-weight: bold; } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } pre, img { max-width: 100%; } .textwidget img { height: auto; } .btn { color: #fff; } .btn-default { color: inherit; } .widget_calendar table, .widget select { width: 100%; } .widget select { padding: 3px 5px; } .widget_calendar table td, .widget_calendar table th { padding: 9px 6px; text-align: center; border: 1px solid #ddd; } .rsswidget { color: #fff; } .recentcomments > a { font-style: italic; } .attachment-post-thumbnail { height: auto; } .widget ul { list-style: none; } .widget ul ul { padding-left: 20px; text-align: left; } .widget_nav_menu ul { padding-left: 0; text-align: left; } /* Typography ----------------------------------------------------------*/ h1 { font-size: 40px; line-height: 1.2; margin-top: 0; } h2 { font-size: 36px; line-height: 1.2; margin-top: 0; } h3 { font-size: 24px; line-height: 1.2; margin-top: 0; } h4 { font-size: 18px; line-height: 1.2; margin-top: 0; } h5 { font-size: 15px; line-height: 1.2; margin-top: 0; } h6 { font-size: 12px; line-height: 1.2; margin-top: 0; } h1, h2, h3, h4, h5, h6 { color: #444; font-family: 'Oswald', sans-serif; } h3, h4 { font-weight: 300; } h6 { color: #555; } a { text-decoration: none; transition: .3s; } a:hover { text-decoration: none; } a:hover, a:focus { outline: none; text-decoration: none; } ul{ padding: 0; margin: 0; } body { font-family: 'Lato', sans-serif; font-size: 13px; line-height: 20px; color: #999; } section { padding: 0px 0; overflow-x: hidden; } section.parallax{ background-attachment: fixed; background-position: top center!important; } /* ========================================================================== Bootstrap Custom ========================================================================== */ @media (min-width: 1200px) { .container { width: 1200px; } } ::selection { background: #73c026; color: #fff; /* WebKit/Blink Browsers */ } ::-moz-selection { background: #73c026; color: #fff; /* Gecko Browsers */ } /* Main Button Style ----------------------------------------------------------*/ /* Icon Social ----------------------------------------------------------*/ /* Button ----------------------------------------------------------*/ /*reset btn bootstrap */ .reset-btn { border: 0; outline: none; background: 0; -webkit-box-shadow: none; box-shadow: none; } /*button*/ .ot-btn { font-size: 13px; text-align: center; padding: 7px 20px 8px; outline: none; -webkit-transition: all 0.3s; transition: all 0.3s; font-family: 'Oswald', sans-serif; font-weight: 300; display: inline-block; } .btns .ot-btn{ margin-right: 10px; } .ot-btn:hover, .ot-btn:focus { text-decoration: none; } /*Style*/ .btn-rounded { -webkit-border-radius: 3px; border-radius: 3px; } .btn-pill { -webkit-border-radius: 25px; border-radius: 25px; } .block-btn { display: block; } /*Size*/ .ot-lg { padding: 10px 30px; font-size: 15px; } .ot-ex { padding: 13px 40px; font-size: 18px; } .btn-main-color { background: #73c026; color: #fff; } .btn-main-color i{ margin-left: 5px; font-size: 14px; } .btn-main-color:hover, .btn-main-color:focus { background: #222; color: #fff; } .btn-sub-color { background: #222; color: #fff; } .btn-sub-color:hover, .btn-sub-color:focus { background: #73c026; color: #fff; } .btn-border-main-color { background: transparent; color: #73c026; border: 1px solid #73c026; } .btn-border-main-color:hover, .btn-border-main-color:focus { background: transparent; color: #222; border-color: #222; } .btn-border-sub-color { background: transparent; color: #222; border: 1px solid #222; } .btn-border-sub-color:hover, .btn-border-sub-color:focus { background: transparent; color: #73c026; border-color: #73c026; } .strong-btn { border-width: 2px; font-weight: 600; } .ot-btn i { margin-left: 5px; font-size: 14px; } .ot-btn i.fa-angle-right{ font-size: 18px; } .iconbox .ot-btn i{ font-size: 13px; } /* ========================================================================== Main Navi ========================================================================== */ .navi-level-1 { font-size: 16px; font-family: 'Oswald', sans-serif; font-weight: 300; text-transform: uppercase; } .navi-level-1 li { display: inline-block; position: relative; } .navi-level-1 a { line-height: 30px; padding: 5px 20px; display: block; position: relative; } .navi-level-1 > li > a { color: #222; } .navi-level-1 a:after { content: "|"; font-family: "FontAwesome"; position: absolute; right: -3px; top: 50%; margin-top: -17px; display: block; color: #ddd; } .ver2 .navi-level-1 a:after{ content: "\f111"; right: -4px; font-size: 7px; margin-top: -14px; color: #73c026; } .ver3 .navi-level-1 a:after{ content: "\f10c"; right: -4px; font-size: 9px; margin-top: -14px; color: #73c026; } .navi-level-1 li:last-child a:after { display: none; } .navi-level-1 .fadeInUp { -webkit-animation-duration: .3s; animation-duration: .3s; } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 55px, 0); transform: translate3d(0, 55px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .navi-level-1 li:last-child ul.dropdown-menu { right: 0; left: auto; } .header-v1 .dropdown-menu { padding: 0; } .dropdown-menu { float: none; background: transparent; border: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; margin-top: 20px; padding: 0; height: auto; min-width: 215px; display: block; position: absolute; top: 100%; left: 0; z-index: 99999; visibility:hidden; opacity: 0; transition: 0.3s; } .navi-level-1 li:hover > .dropdown-menu{ opacity: 1; visibility: visible; margin-top: 0; } .dropdown-menu li { display: block; position: relative; width: 100%; } .dropdown-menu li a { display: block; padding: 10px 20px; width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 13px; background: #2e2d26; border-top: 1px solid rgba(0, 0, 0, 0.3); white-space: normal; color: #fff; line-height: 30px; text-transform: none; font-family: "Lato", Arial, sans-serif; } .header-v1 .dropdown-menu li a{ border-top: none; border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .dropdown-menu li a:after { display: none; } .dropdown-menu li a:hover { background: #73c026; color: #fff; } .dropdown-menu li:last-child { border-bottom: none; } .dropdown-menu-dark { height: auto; min-width: 215px; display: block; position: absolute; top: 100%; left: 0; z-index: 99999; display: none; } .dropdown-menu-dark li { display: block; position: relative; width: 100%; } .dropdown-menu-dark li a { display: block; padding: 10px 20px; width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 13px; } .dropdown-menu-dark li a:after { display: none; } .dropdown-menu-dark li a:hover { color: #fff; background: transparent; } .dropdown-menu-dark li:last-child { border-bottom: none; } .dropdown-menu > li ul { height: auto; min-width: 215px; display: block; position: absolute; top: 0!important; left: 100%!important; z-index: 99999; } .dropdown-menu > li ul li { display: block; position: relative; width: 100%; background: #444; } .dropdown-menu > li ul li a { display: block; padding: 10px 20px; width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 13px; background: #2e2d26; border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .dropdown-menu > li ul li a:after { display: none; } .dropdown-menu > li ul li a:hover { background: #73c026; color: #fff; } .dropdown-menu > li ul li:last-child { border-bottom: none; } .open-navi-2, .open-navi-3 { display: block!important; } .dropdown-menu > li.active > a, .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background: #73c026; } .navi-warp-h2 .navi-level-1 > li > a { color: #fff; } .navi-warp-h2 .navi-level-1 > li > a:hover{ opacity: 0.9; } .navi-warp-h2 .navi-level-1 a:after { color: #eee; } .header-v3 .navi-level-1 > li > a { color: #444; } .header-v3 .navi-level-1 a:after { background: #ddd; } .header-v1 .navi-level-1 > li > a:focus, .header-v1 .navi-level-1 > li > a:hover { color: #73c026; } .navi-warp-h2 .navi-level-1 > li > a:focus{ color: #fff; } /* ========================================================================== Navi Seperator Style ========================================================================== */ .line-seperator .navi-level-1 > li > a:after { content: "/"; background: transparent; top: 5px; color: #ddd; } .no-seperator .navi-level-1 > li > a:after { display: none; } /* ========================================================================== Sub Navi ========================================================================== */ .subnavi { font-size: 12px; font-family: 'Lato', sans-serif; font-weight: 400; float: left; } .subnavi a { color: #fff; text-transform: capitalize; line-height: 30px; padding: 0 7px; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; } .subnavi a:after { content: ""; width: 1px; height: 8px; position: absolute; right: -2px; top: 4px; background: rgba(255, 255, 255, 0.4); display: block; } .subnavi a:hover { color: #eee; } .subnavi li { display: inline-block; } .subnavi li:last-child a:after { display: none; } /* ========================================================================== Top bar ========================================================================== */ .topbar-1 { width: 100%; height: 40px; background: #444; } .topbar-1 .topbar-1-inner { width: 100%; max-width: 1170px; margin: 0 auto; height: 40px; padding: 5px 0; } .topbar-info span{ font-weight: bold; } .topbar-info li { display: inline-block; font-size: 12px; font-family: 'Lato', sans-serif; } .topbar-info-1 { float: right; } .topbar-info-1 li { line-height: 30px; color: #eee; margin-left: 25px; } .topbar-info-1 li a { color: #eee; } .topbar-info-2 { float: right; margin-top: 20px; } .topbar-info-2 li { line-height: 30px; color: #444; margin-right: 25px; } .topbar-info-2 li a { color: #999; } .topbar-info-3 { float: right; } .topbar-info-3 li { line-height: 30px; color: #444; margin-right: 25px; } .topbar-info-3 li span { color: #999; } .topbar-info-3 li a { color: #999; } /* ========================================================================== Logo ========================================================================== */ h1.logo { margin: 0; } .logo-1 { float: left; } .logo-1 img { margin: 20px 0; } .slogan-1 { text-transform: uppercase; font-size: 11px; } /* ========================================================================== Header ========================================================================== */ .header-line { height: 0px; background: #eee; width: 100%; clear: both; } .top-header-line { height: 3px; background: #444; width: 100%; } .top-header-line .top-header-line-inner { height: 3px; width: 100%; max-width: 1170px; margin: 0 auto; } /* Header V1 ========================================================================== */ .header-v1 { width: 100%; border-bottom: 0px solid #e5e5e5; float: left; } .header-v1-inner { width: 100%; margin: 0 auto; max-width: 1170px; } .header-v1-inner ul.navi-level-1 .dropdown-menu > li ul { padding-top: 0!important; } .navi-right { float: right; list-style: none; } .navi-right > li { display: inline-block; margin-left: 10px; position: relative; padding: 20px 0; } .header-v1 .navi-level-1 > li > a { padding: 30px 10px; } .none .navi-level-1 > li > a{ padding-left: 15px; padding-right: 15px; } .navi-right > li > a { line-height: 40px; width: 40px; height: 40px; display: block; border-width: 1px; border-style: solid; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; } .navi-right > li > a i { font-size: 18px; } .navi-right > li > a:hover, .navi-right > li > a:focus { background: #73c026; color: #fff; } .form-search-navi{ border-top: 3px solid #73c026; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.175); } .navi-right .fadeInUp { -webkit-animation-duration: .3s; animation-duration: .3s; } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 55px, 0); transform: translate3d(0, 55px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } /* Modal Search Box ----------------------- */ .modal-backdrop.in{ display: none; } .search-button .modal { overflow: hidden; } .modal { background: rgba(0, 0, 0, 0.9); z-index: 500000; overflow: hidden; } .modal-content { background: transparent; -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); border: 0px solid rgba(0, 0, 0, 0.2); } .modal-dialog { margin: 0 auto; text-align: center; position: absolute; top: 48%; left: 50%; margin-left: -300px; } .modal-body { padding: 0px; } .modal-body .search-form { width: 555px; display: inline-block; position: relative; margin-top: -60px; } .modal-body .search-form input[type="search"] { border: none; border-bottom: 3px solid #73c026; font-size: 36px; line-height: 36px; font-weight: 300; width: 100%; background: transparent; color: #fff; padding: 10px 0px; } .modal-body .search-form input[type="search"]:focus { outline: none; } .modal-body .search-form .search-submit { position: absolute; right: 0; top: 13px; border: none; background: transparent; outline: none; color: #aaa; font-size: 30px; } .modal-body .search-form .search-submit:hover{ color: #eee; } .modal .close { background: #73c026 none repeat scroll 0 0; -webkit-border-radius: 50%; border-radius: 50%; color: #fff; font-weight: normal; height: 30px; line-height: 30px; opacity: 1; position: absolute; right: 25px; top: 25px; width: 30px; z-index: 100000; font-family: arial; font-size: 16px; outline: none; } .nav-r { float: right; } .nav-l { float: left; } .header-v1.is_stuck { background: #fff; z-index: 999999; } /* Header V2 ========================================================================== */ .header-v2 { overflow: hidden; width: 100%; background: #fff; } .header-v2-inner { width: 100%; margin: 0 auto; max-width: 1170px; } .logo-2 { float: left; } .logo-2 img { margin: 20px 0; } .navi-warp-h2 { width: 100%; background: #444; height: 50px; } .navi-warp-h2-inner { width: 100%; max-width: 1170px; margin: 0 auto; height: 100%; } .navi-warp-h2-inner nav { padding: 5px 0; } .navi-right-2 { float: right; list-style: none; } .navi-right-2 > li { display: inline-block; margin-left: 1px; position: relative; } .navi-right-2 > li > a { line-height: 50px; width: 50px; height: 50px; display: block; text-align: center; background: rgba(0, 0, 0, 0.05); color: #fff; font-size: 18px; } .navi-right-2 > li > a:hover, .navi-right-2 > li > a:focus { background: #fff; color: #73c026; } .navi-right-2 .cart-button .dropdown-cart{ border-top-color: #fff; } .navi-right-2 .fadeInUp { -webkit-animation-duration: .3s; animation-duration: .3s; } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 55px, 0); transform: translate3d(0, 55px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .navi-right-2 .open-search-input { top: 100%; } .navi-warp-h2-inner .dropdown-menu { top: -webkit-calc(100%); top: calc(100%); } .navi-warp-h2 .navi-level-1 a { padding-top: 10px; padding-bottom: 10px; } .navi-warp-h2 .nav-l { padding: 0; } .stick-warp-2, .navi-warp-h2 { -webkit-transition: .2s; transition: .2s; } .stick-warp-2.is_stuck { z-index: 999999; } /* Header V3 ========================================================================== */ .header-v3 { width: 100%; position: relative; background: #fff; float: left; } .header-v3-inner { width: 100%; margin: 0 auto; max-width: 1170px; } .logo-3 { line-height: 25px; float: left; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .logo-3 img, .logo-3 p { display: inline-block; } .logo-3 p { margin: 0; vertical-align: middle; } .logo-3 span { margin: 0 20px; display: inline-block; width: 2px; height: 25px; vertical-align: bottom; } .header-v3 .navi-level-1 a:after { margin-top: -12px; } .header-v3 .navi-right li { padding: 0; } .header-v3 .navi-level-1 > li > a { padding-top: 5px; padding-bottom: 15px; } .header-v3 .social, .header-v3 .topbar-info, .header-v3 .nav-r { -webkit-transition: all .3s; transition: all .3s; } .stick-warp-3.is_stuck { z-index: 99999; } .stick-warp-3.is_stuck .header-v3 { padding: 0; height: 80px; -webkit-transition: all .3s; transition: all .3s; } .stick-warp-3.is_stuck .social, .stick-warp-3.is_stuck .topbar-info { opacity: 0; margin-top: -100px; -webkit-transition: all .3s; transition: all .3s; } .stick-warp-3.is_stuck .nav-r { -webkit-transition: all .3s; transition: all .3s; } /* ========================================================================== Sub Header ========================================================================== */ .breadcrumb { background: transparent; text-align: right; margin: 0; padding: 0; line-height: 36px; color: #444; } .breadcrumb i { margin: 0 15px; color: #999; } .breadcrumb li, .breadcrumb a { color: #999; -webkit-transition: all 0.3s; transition: all 0.3s; } .breadcrumb a:hover { color: #444; } .title-subheader { margin-bottom: 0; line-height: 36px; } .breadcrumb > li + li::before { content: ""; } .breadcrumb > li + li + li::before { content: "\f101"; color: inherit; font-family: 'FontAwesome'; } .sub-header-border { border-bottom: 1px solid #e5e5e5; padding: 20px 0; } .sub-header-2 { background: url(images/Header/bg-sub-header.jpg) no-repeat fixed; } .sub-header-2 .sub-header-warp { padding: 50px 0; overflow: hidden; } .sub-header-2 .sub-header-warp .title-subheader { } .sub-header-2 .sub-header-warp .breadcrumb li, .sub-header-2 .sub-header-warp .breadcrumb a { color: #777; font-size: 14px; } .sub-header-2 .sub-header-warp .breadcrumb a:hover { color: #222; } .sub-header-2 .sub-header-warp .breadcrumb > .active { color: #222; } .sub-header-3 { background-color: #f2f2f2; } .sub-header-3 .sub-header-warp { padding: 30px 0 35px 0; overflow: hidden; } .sub3 .breadcrumb { padding: 8px 15px 7px 0; float: left; } /* ========================================================================== Stick Navi HightLight ========================================================================== */ .mPS2id-highlight span { color: #73c026; } /* ========================================================================== Desktop Verison Demo ========================================================================== */ .dskt-padding-55 { padding: 55px 0; } .dskt-padding-bottom-0 { padding-bottom: 0; } .desk-no-padding-left { padding-left: 0; } .relative { position: relative; } .overflow-hidden { overflow: hidden; } #page { background: #fff; } /* ========================================================================== Button Mobile Menu ========================================================================== */ .btn-menu-mobile { display: none; float: right; color: #000000!important; position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; margin-top: -6px; } /* ========================================================================== Spaces ========================================================================== */ .div18 { display: inline-block; clear: both; width: 100%; height: 18px; } .div70 { display: inline-block; clear: both; width: 100%; height: 70px; } .no-padding { padding: 0; } .sm-padding { padding: 35px 0; } .border-top-section { border: 1px solid #e5e5e5; } .m-tb-20 { width: 100%; margin: 20px 0; } .m-t-10 { margin-top: 10px; } .m-t-20 { margin-top: 20px; } .line { border-bottom: 1px solid #e5e5e5; } .clearboth { display: inline-block; width: 100%; clear: both; } /* ========================================================================== Typography ========================================================================== */ .text-cap { text-transform: capitalize; } .text-up { text-transform: uppercase; } .white-text, .white-text:focus { color: #fff; } .dark-text { color: #222; } .soft-grey-text { color: #999; } /* ========================================================================== background & Overlay ========================================================================== */ .bg-light-grey { background: #f2f2f2; } .bg-mid-grey { background-color: rgba(34, 34, 34, 0.8); } .bg-dark-grey { background: #222; } .bg-overlay-img-1 { background: no-repeat fixed; -webkit-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; } section.bg-twitter { background-position: bottom center!important; } .bg-white { background: #fff; } .bg-overlay-img-2 { background: no-repeat fixed; -webkit-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; } .bg-overlay-color { background: rgba(222, 177, 82, 0.8); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; height: 100%; } /* ========================================================================== #PAGE LOAD ========================================================================== */ body.royal_loader { background: none; visibility: hidden; } #royal_preloader { width: 100%; height: 100%; font-family: Arial; font-size: 12px; visibility: visible; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 9999999999; -webkit-transition: opacity 0.2s linear 0.8s; transition: opacity 0.2s linear 0.8s; } #royal_preloader.complete { opacity: 0; } #royal_preloader .background { width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: #000000; -webkit-transition: background 0.5s linear; transition: background 0.5s linear; } #royal_preloader.number .name { position: absolute; top: 20%; left: 0px; right: 0px; text-transform: uppercase; color: #EEEEEE; text-align: center; opacity: 0; -webkit-transition: -webkit-transform 0.3s linear; transition: transform 0.3s linear; -webkit-animation: fly 0.3s; animation: fly 0.3s; } #royal_preloader.number .percentage { color: #FFFFFF; font-family: Impact, Arial; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-align: center; margin: -90px 0px 0px -90px; background-image: url('../images/loader.gif'); background-repeat: no-repeat; background-position: 50% 0; padding-top: 80px; width: 180px; position: absolute; font-size: 50px; top: 50%; left: 50%; -webkit-transition: all 0.3s linear 0.5s; transition: all 0.3s linear 0.5s; } #royal_preloader.text .loader { position: absolute; text-shadow: 0 0 15px rgba(0, 0, 0, 0.3); text-transform: uppercase; text-align: center; top: 50%; left: 50%; width: 240px; margin-left: -60px; height: 60px; line-height: 60px; margin-top: -30px; font-size: 30px; white-space: nowrap; } #royal_preloader.text .loader div { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0%; background-color: #000000; opacity: 0.7; filter: alpha(opacity=70); -webkit-transition: left 0.3s linear; transition: left 0.3s linear; } #royal_preloader.logo .loader { width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; margin: -74px 0px 0px -60px; -webkit-background-size: 100% auto; background-size: 100% auto; overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; /*background-size: cover;*/ } #royal_preloader.logo .loader div { position: absolute; bottom: 0%; left: 0px; right: 0px; height: 100%; opacity: 0.7; filter: alpha(opacity=70); -webkit-transition: bottom 0.3s linear; transition: bottom 0.3s linear; } #royal_preloader.logo .percentage { position: absolute; width: 80px; height: 30px; line-height: 30px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 18px; letter-spacing: 2px; top: 50%; left: 50%; margin: 53px 0px 0px -40px; color: #fff; text-align: center; } @-webkit-keyframes fly { 0% { opacity: 0; top: 50%; } 20% { opacity: 1; top: 40%; } 100% { opacity: 0; top: 20%; } } @keyframes fly { 0% { opacity: 0; top: 50%; } 20% { opacity: 1; top: 40%; } 100% { opacity: 0; top: 20%; } } /* ========================================================================== Head Line ========================================================================== */ .headline { height: 3px; background: #222; } .headline .headline-inner { display: block; max-width: 1170px; width: 100%; margin: 0 auto; height: 3px; } /* ========================================================================== Social ========================================================================== */ .social li { display: inline-block; } .social-1 { float: right; margin-left: 25px; } .social-1 li a { display: block; width: 24px; height: 24px; line-height: 24px; text-align: center; background: rgba(255, 255, 255, 0.5); -webkit-border-radius: 50%; border-radius: 50%; margin: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .social-1 li a:hover { background: #ffffff; } .social-2 { float: right; margin-top: 20px; } .social-2 li a { display: block; width: 24px; height: 24px; line-height: 24px; text-align: center; background: rgba(0, 0, 0, 0.3); -webkit-border-radius: 50%; border-radius: 50%; margin: 3px; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; } .social-2 li a:hover { background: rgba(0, 0, 0, 0.8); } .social-3 { float: right; } .social-3 li a { display: block; width: 24px; height: 24px; line-height: 24px; text-align: center; margin: 3px; color: #333; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 50%; border-radius: 50%; } .social-3 li a:hover { background: rgba(0, 0, 0, 0.8); color: #fff; } .social-f1 { margin-top: 20px; } .widget .social-f1 li a { display: block; width: 24px; height: 24px; line-height: 24px; text-align: center; background: rgba(255, 255, 255, 0.3); -webkit-border-radius: 50%; border-radius: 50%; margin: 3px; color: #222; -webkit-transition: all 0.3s; transition: all 0.3s; } .social-f1 li a:hover { background: #ffffff; } .social-fr { float: right; } .social-fr li a { display: block; width: 24px; height: 24px; line-height: 24px; text-align: center; background: rgba(255, 255, 255, 0.3); -webkit-border-radius: 50%; border-radius: 50%; margin: 3px; color: #222; } .social-fr li a:hover { background: #ffffff; } .social3-warp { clear: both; margin-top: 40px; width: 100%; display: inline-block; } .social-f3 { clear: both; width: 100%; display: inline-block; margin-top: 40px; } .social-f3 li a { width: 40px; height: 40px; color: #fff; background: #3a3a3a; margin-right: 5px; margin-bottom: 5px; display: inline-block; text-align: center; line-height: 40px; -webkit-transition: all 0.3s; transition: all 0.3s; } .social-f3 li a:hover { background: #fff; color: #222; } .social-single-team li a { display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; margin: 15px 10px 0 0; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 50%; border-radius: 50%; background: #222; font-size: 0; } .social-single-team li a i{ font-size: 14px; line-height: 30px; } .social-single-team li a:hover { background: #73c026; color: #fff; } .about-single-team-sum { min-height: 370px; } .about-single-team .personal-title { margin-top: 0; margin-bottom: 30px; } .form-single-team { margin-top: 28px; } .form-team-single-warp { width: 100%; } .form-team-single-warp .form-group { width: 100%; } .form-team-single-warp .form-control { width: 100%; margin-bottom: 30px; height: 40px; line-height: 40px; background: #f2f2f2; border: 1px solid #e5e5e5; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; border-radius: 3px; } .form-team-single-warp .form-control:focus { background: #fff; color: #444; } .form-team-single-warp .ot-btn { display: block; width: 100%; border: 0; color: #fff; padding-top: 10px; padding-bottom: 10px; } .form-team-single-warp textarea.form-control { width: 100%; background: #f2f2f2; min-height: 100px; resize: vertical; border: 1px solid #e5e5e5; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; border-radius: 3px; } .form-team-single-warp textarea.form-control:focus { background: #fff; color: #444; border-color: #73c026; } .customNavigation-skill { margin-top: 30px; } .skill-warp { clear: both; } .progress.vertical .progress-bar { -webkit-transition: height 1s ease-in-out; transition: height 1s ease-in-out; } .chart-v-item { height: 360px; display: block; width: 100px; position: relative; display: inline-block; margin-top: 45px; padding-bottom: 40px; } .chart-v-item .progress.vertical .progress-bar { width: 60px; left: 20px; } .chart-v-item:last-child { margin-right: 0; } .progress.progress-v { width: 100%; border: 0; -webkit-border-radius: 0; border-radius: 0; background: none; -webkit-box-shadow: none; box-shadow: none; margin: 0; } .label-v { color: #666; font-size: 13px; width: 100%; display: block; color: #666666; text-align: center; padding: 0; font-weight: normal; float: left; margin-top: 10px; } .percent-v { position: absolute; left: 20px; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .chart-home-2 { margin-top: 32px; } .chart-home-2 .chart-h-item { margin-bottom: 7px; } .demo-skill-2-warp { display: inline-block; width: 100%; clear: both; } /* ========================================================================== Icon box ========================================================================== */ .iconbox-set-1-warp, .iconbox-set-2-warp { margin-top: 70px; } .iconbox-set-1 { padding: 30px 20px; border: 1px solid #e5e5e5; text-align: center; } .iconbox-set-1 h4 { margin-top: 20px; font-family: 'Oswald', sans-serif; font-weight: 300; } .iconbox-set-1 a { margin-top: 12px; } .iconbox-set-1 p { margin-top: 20px; } .iconbox-set-1:hover .icon-1 { background: #2e2d26; } .icon-1 { width: 120px; height: 120px; border-width: 10px; border-style: solid; border-color: #e5e5e5; -webkit-border-radius: 50%; border-radius: 50%; line-height: 120px; text-align: center; margin: 0 auto; -webkit-transition: all 0.3s; transition: all 0.3s; } .icon-1 i { font-size: 44px; color: #73c026; } .des-text { font-size: 15px; } .iconbox-set-2 { padding: 30px 20px; border: 1px solid #e5e5e5; position: relative; float: left; width: 100%; } .iconbox-set-2 h4 { margin-top: 10px; margin-left: 150px; } .iconbox-set-2 p.sub-text { margin-left: 150px; display: inline-block; float: left; margin-bottom: 0; color: #999; font-size: 12px; } .iconbox-set-2 a { margin-top: 12px; margin-left: 150px; display: inline-block; float: left; margin-top: 0; } .iconbox-set-2 .ot-btn { margin-top: 20px; } .iconbox-set-2 .icon-1 { position: absolute; top: 30px; left: 30px; -webkit-transition: all 0.6s; transition: all 0.6s; } .iconbox-set-2:hover .icon-1 { background-color: #2e2d26; } .iconbox-set-3 { position: relative; margin: 15px 0; float: left; width: 100%; } .iconbox-set-3 h4 { margin-left: 90px; margin-top: 0; } .iconbox-set-3 p { margin-top: 12px; margin-left: 90px; display: inline-block; float: left; margin-top: 0; } .icon-2 { position: absolute; top: 0px; left: 0px; width: 70px; height: 70px; -webkit-border-radius: 50%; border-radius: 50%; border-width: 1px; border-style: solid; line-height: 72px; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; } .icon-2 i { font-size: 22px; -webkit-transition: all 0.3s; transition: all 0.3s; } .iconbox { -webkit-transition: all 0.6s; transition: all 0.6s; } .iconbox:hover { background: #fbfbfb; } .iconbox .hover-text-theme { -webkit-transition: all 0.6s; transition: all 0.6s; } .iconbox:hover .hover-text-theme { color: #73c026; } .iconbox-set-3:hover .icon-2 { background: #73c026; } .iconbox-set-3:hover .icon-2 i { color: #fff!important; } /* ========================================================================== Customnaivgation Owl ========================================================================== */ a.btn-1 { border-width: 2px; border-style: solid; border-color: #222; -webkit-border-radius: 50%; border-radius: 50%; color: #222; } .customNavigation-1 { display: inline-block; width: auto; margin-left: 20px; } .relate-post .customNavigation-1{ display: none; } .show-nav .customNavigation-1{ display: inline-block; } .customNavigation-1 a.btn-1 { position: relative; width: 24px; height: 24px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0 1px; text-align: center; cursor: pointer; font-size: 13px; font-weight: bold; vertical-align: top; } .customNavigation-1 a.btn-1 .fa-chevron-left { margin-left: -2px; } .customNavigation-1 a.btn-1 .fa-chevron-right { margin-right: -2px; } .customNavigation-2 { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: auto; margin-left: 20px; z-index: 9; } .customNavigation-2 a.btn-1 { position: relative; width: 24px; height: 24px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0 3px; text-align: center; cursor: pointer; font-size: 13px; font-weight: bold; vertical-align: top; } .customNavigation-2 a.btn-1 .fa-chevron-left { margin-left: -2px; } .customNavigation-2 a.btn-1 .fa-chevron-right { margin-right: -2px; } .customNavigation-3 { display: inline-block; width: auto; margin-left: 20px; } .customNavigation-3 a.btn-1 { position: relative; width: 24px; height: 24px; border: 2px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0 3px; text-align: center; cursor: pointer; font-size: 13px; font-weight: bold; vertical-align: top; } .customNavigation-3 a.btn-1 .fa-chevron-down { margin-left: 0px; margin-top: -2px; } .customNavigation-3 a.btn-1 .fa-chevron-up { margin-right: 0px; margin-top: -2px; } .customNavigation-3 a.btn-1:hover { border-color: #73c026; color: #73c026; } .customNavigation-4 { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 24px; margin-left: 20px; z-index: 9; } .customNavigation-4 a.btn-1 { position: relative; width: 24px; height: 24px; line-height: 19px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 3px 0px; text-align: center; cursor: pointer; font-size: 13px; font-weight: bold; } .customNavigation-4 a.btn-1 .fa-chevron-up { margin-left: 1px; } .customNavigation-4 a.btn-1 .fa-chevron-down { margin-left: 1px; } .customNavigation-5 { margin-left: 0; margin: 0 auto; float: none; text-align: center; display: block; margin-top: 30px; } /* ========================================================================== Title ========================================================================== */ .title-inline { float: left; display: inline-block; margin-bottom: 0; line-height: 1; } .relate-post .title-inline{ float: none; } .show-nav .title-inline{ float: left; } .title-center { text-align: center; } .des-text2 { padding-top: 26px; } .title-landing { margin-bottom: 38px; } /* ========================================================================== Lightbox ========================================================================== */ .overlay-1 { background: rgba(34, 34, 34, 0.9); opacity: 0; position: absolute; top: 0; left: 0; width: -webkit-calc(80%); width: calc(80%); border: 10px solid #73c026; height: -webkit-calc(80%); height: calc(80%); -webkit-transition: all 0.6s; transition: all 0.6s; z-index: 9; } .overlay-1 .fa { position: absolute; top: 50%; left: 50%; display: block; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; color: #444; line-height: 28px; border: 3px solid #ccc; text-align: center; width: 34px; height: 34px; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .overlay-1 .fa-expand { -webkit-transform: translate(-84px, -50%); -ms-transform: translate(-84px, -50%); transform: translate(-84px, -50%); } .overlay-1 .fa-link { -webkit-transform: translate(50px, -50%); -ms-transform: translate(50px, -50%); transform: translate(50px, -50%); } .project-lightbox-warp img { display: none; } /* ========================================================================== Lastest Project ========================================================================== */ .lastest-project-warp { clear: both; margin-top: 20px; display: block; width: 100%; float: left; } .project-item { border: 1px solid #e5e5e5; background: #fff; } .project-item h4 { font-size: 16px; text-align: center; margin-top: 16px; margin-bottom: 12px; -webkit-transition: all 0.3s; transition: all 0.3s; } .project-item h4 a{ color: #444; } .project-item h4 a:hover{ color: #000; } .project-item p { text-align: center; margin-bottom: 20px; color: #73c026; text-transform: lowercase; } .project-item img { padding: 9px; border-bottom: 1px solid #e5e5e5; } .project-item p a { -webkit-transition: all 0.3s; transition: all 0.3s; } .project-item:hover .overlay-1 { opacity: 1; } .project-item:hover .overlay-1 .fa { opacity: 1; } .project-item:hover .overlay-1 .fa-link { -webkit-transform: translate(10px, -50%); -ms-transform: translate(10px, -50%); transform: translate(10px, -50%); } .project-item:hover .overlay-1 .fa-expand { -webkit-transform: translate(-44px, -50%); -ms-transform: translate(-44px, -50%); transform: translate(-44px, -50%); } .project-item-img-container { position: relative; width: 100%; height: auto; display: block; } .owl-project .owl-wrapper-outer { width: 100%; } .owl-project{ width: auto; } .owl-project .item{ padding: 0 15px; } /* ========================================================================== Page Portfolio ========================================================================== */ .portfolio-warp { overflow: hidden; } .list-portfolio-warp { clear: both; } .element-item{ padding: 15px; } .no-padding.row{ margin: 0; } .no-padding .element-item, .no-padding .item{ padding: 0; } .portfolio-4-col .element-item { width: 25%; } .filter-portfolio-warp { width: 100%; float: left; clear: both; margin-bottom: 30px; } .project-style-1 { border: 1px solid #e5e5e5; -webkit-border-radius: 3px; border-radius: 3px; float: left; } .project-style-1 a { float: left; padding: 8px 20px; opacity: .8; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; font-family: 'Oswald', sans-serif; font-size: 16px; margin: 0; font-weight: 300; color: #444; } .project-style-1 a:hover { opacity: 1; background: #f2f2f2; } .project-style-1 a.current { opacity: 1; background: #73c026; color: #fff; } .project-style-1 a + a { border-left: 1px solid #e5e5e5; } .project-style-2 { border: 1px solid #e5e5e5; -webkit-border-radius: 3px; border-radius: 3px; float: left; background: #fff; } .project-style-2 a { display: inline-block; float: left; padding: 8px 20px; opacity: .5; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; } .project-style-2 a:hover { opacity: 1; background: #73c026; } .project-style-2 a:hover h4 { color: #fff; } .project-style-2 a h4 { font-family: 'Oswald', sans-serif; font-size: 16px; margin: 0; color: #000; } .project-style-2 a.current { opacity: 1; background: #73c026; } .project-style-2 a.current h4 { color: #fff; } .project-style-2 a + a { border-left: 1px solid #e5e5e5; } /* Landing Project */ .no-gutter .project-item { margin: 0; width: 100%; border: 0!important; position: relative; } .no-gutter .project-item .overlay-1 .fa { top: 40%; } .no-gutter .project-item img { padding: 0; border: none; } .no-gutter .project-item h4, .no-gutter .project-item p { display: block; position: absolute; } .no-gutter .project-item h4 a{ color: #fff; } .no-gutter .project-item h4 a:hover{ color: #73c026; } .no-gutter .project-item h4 { bottom: 45px; color: #ffffff; left: 50%; -webkit-transform: translate(-50%, 100px); -ms-transform: translate(-50%, 100px); transform: translate(-50%, 100px); opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; width: 80%; } .no-gutter .project-item p { bottom: 5px; left: 50%; -webkit-transform: translate(-50%, 100px); -ms-transform: translate(-50%, 100px); transform: translate(-50%, 100px); color: #ddd; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: .1s; transition-delay: .1s; } .no-gutter .project-item p a { color: #fff; } .no-gutter .project-item p a:hover { color: #73c026; } .no-gutter .project-item:hover h4, .no-gutter .project-item:hover p { opacity: 1; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .cate-project span:last-child{ display: none; } /* ========================================================================== Testimonial ========================================================================== */ .owl-testimonial-1 { float: left; clear: both; margin-bottom: 45px; } .arrow-down { width: 0; height: 0; border-left: 12px solid transparent!important; border-right: 12px solid transparent!important; border-top-width: 14px; border-top-style: solid; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); float: left; } .testimonial-1-item { padding: 40px 70px; font-style: italic; display: block; width: 100%; position: relative; background: #222; border-bottom-width: 3px; border-bottom-style: solid; } .testimonial-1-item i { position: absolute; top: 15px; left: 15px; font-size: 50px; color: #333; opacity: .5; } .testimonial-1-item blockquote { border: 0; text-align: center; margin: 0; padding: 0; background: transparent; } .testimonial-1-item blockquote p{ font-size: 18px; color: #999; } .testimonial-1-item footer { margin-top: 20px; padding: 0; font-size: 14px; font-style: normal; } blockquote { color: #f3f3f3; } .owl-testimonial-1 .owl-controls { position: absolute; width: 100%; bottom: -45px; text-align: center; } .owl-page { cursor: pointer; width: 10px; height: 10px; display: inline-block; background: #fff; -webkit-border-radius: 50%; border-radius: 50%; margin: 0 5px; } .title-testi, .title-clients{ margin-bottom: 35px; } .owl-testimonial-2 { display: inline-block; float: left; clear: both; margin-bottom: 15px; } .testimonial-2-item { padding: 40px ; font-style: italic; display: block; width: 100%; position: relative; background: #444; border-bottom-width: 3px; border-bottom-style: solid; } .testimonial-2-item i { position: absolute; top: 13px; left: 15px; z-index: 0; font-size: 45px; color: #3a3a3a; } .testimonial-2-item blockquote { border: 0; text-align: center; margin: 0; padding: 0; background: transparent; color: #c1c1c1; position: relative; } .testimonial-2-item blockquote { font-size: 16px; } .thumb-owl-testimonial-2 { display: inline-block; width: 100%; clear: both; } .thumb-owl-testimonial-2 .owl-item.synced .thumb-owl-2 .avatar-owl-2 { -webkit-transition: all 0.6s; transition: all 0.6s; border-color: #73c026; } .thumb-owl-testimonial-2 .thumb-owl-2 { margin-top: 0; } .thumb-owl-2 { cursor: pointer; margin-top: 25px; } .thumb-owl-2 .avatar-owl-2 { width: 70px; height: 70px; display: block; float: left; border-radius: 50%; overflow: hidden; } .thumb-owl-2 .avatar-owl-2 img { width: 100%; } .thumb-owl-2 .info-client { padding-left: 90px; text-transform: capitalize; } .thumb-owl-2 .info-client h4 { color: #444; font-size: 16px; padding-top: 10px; margin-bottom: 3px; } .arrow-down-l { width: 0; height: 0; border-left: 12px solid transparent!important; border-right: 12px solid transparent!important; border-top-width: 14px; border-top-style: solid; position: relative; left: 30px; float: left; } .owl-testimonial-3 { float: left; clear: both; } .testimonial-item { font-style: italic; position: relative; overflow: hidden; } .owl-carousel .testimonial-item { min-height: 105px; } .testimonial-item .avatar { width: 105px; height: 105px; padding: 10px; border: 1px solid #e5e5e5; position: absolute; top: 0; left: 0; } .testimonial-item blockquote { border: 0; margin: 0; background: none; margin-left: 125px; padding: 0; float: left; color: #999; } .testimonial-item blockquote, .testimonial-item footer { font-size: 14px; } .testimonial-item footer { margin-top: 20px; font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 300; color: #444; font-style: normal; padding: 0; background: transparent; } .testimonial-item footer cite { font-style: normal; } span.quote-square { display: inline-block; padding: 3px 12px; color: #fff; font-size: 12px; margin-right: 10px; margin-bottom: 5px; float: left; position: relative; overflow: visible; } .arrow-down-l-2 { width: 0; height: 0; border-left: 1px solid transparent !important; border-right: 8px solid transparent !important; border-top-width: 7px; border-top-style: solid; left: 5px; bottom: -7px; float: left; position: absolute; } /* Testimonial 3 Cols Page */ .testimonial-3-col-warp { margin-top: 40px; display: inline-block; } .testimonial-2-col-warp { margin-top: 40px; display: inline-block; } .testimonial-2-col-warp .testimonial-3-item { min-height: 160px; } /* Testimonial with Avatar */ .owl-with-avatar footer { margin-top: 20px; padding: 0; background: transparent; text-align: center; } /* ========================================================================== Partner ========================================================================== */ .partner-warp { clear: both; margin-top: 35px; display: block; width: 100%; float: left; } /* ========================================================================== Blog ========================================================================== */ .owl-blog{ width: auto; margin: 0 -15px; } .blog-item { border: 1px solid #e5e5e5; display: block; overflow: hidden; } .img-demo-blog { display: inline-block; float: left; width: 170px; height: 170px; padding: 10px; border-right: 1px solid #e5e5e5; background: #fff; } .img-demo-blog img { width: 100%; max-width: 100%; } .blog-sum-warp { width: -webkit-calc(100% - 169px); width: calc(100% - 169px); min-height: 100%; float: left; border-left:1px solid #e5e5e5; margin-left: -1px; } .wid100.blog-sum-warp{ width: 100%; } .blog-sum-inner { width: 100%; padding: 10px; position: relative; padding-left: 65px; min-height: 120px; } .blog-data { display: block; position: absolute; top: 10px; left: 10px; height: 110px; width: 40px; } .blog-data .date-time, .blog-data .blog-type { width: 100%; height: 50%; } .blog-item .blog-footer{ margin-top: 9px; position: static; } .blog-data .blog-type { background: #444; position: relative; color: #fff; line-height: 55px; text-align: center; font-size: 20px; } .blog-data .blog-type img { display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .blog-data .date-time { color: #fff; text-align: center; font-weight: 400; font-size: 18px; font-family: 'Oswald', sans-serif; padding: 7px 0; } .blog-data .date-time .date { line-height: 16px; } .blog-data .date-time .month { font-size: 13px; clear: both; display: block; width: 100%; } .blog-footer { width: 100%; float: left; padding: 10px; min-height: 38px; background: #f2f2f2; position: absolute; bottom: 0; font-size: 11px; border-top-width: 2px; border-top-style: solid; } .blog-footer ul { list-style: none; overflow: hidden; } .blog-footer ul li { float: left; padding: 0 7px; position: relative; font-style: italic; } .blog-footer ul li:after { display: block; width: 1px; position: absolute; content: ""; height: 9px; background: rgba(0, 0, 0, 0.2); top: 6px; right: -1px; } .blog-footer a { color: #444; } .blog-footer a:hover{ color: #73c026; } .blog-footer li:last-child:after { display: none; } .owl-blog .item{ padding: 0 15px; } .blog2-item { border: 1px solid rgba(225, 225, 225, 0.1); float: left; width: 100%; margin-bottom: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .blog2-item h3 { font-size: 16px; color: #fff; margin-top: 10px; } .blog2-img { width: 90px; height: 90px; padding: 10px; border-right: 1px solid rgba(225, 225, 225, 0.1); position: relative; float: left; } .no-thumb .blog2-img{ width: 0; padding: 0; border: none; } .blog2-detail { padding-left: 100px; padding-right: 10px; min-height: 80px; } .no-thumb .blog2-detail{ padding: 0 10px 10px; } .blog2-warp { clear: both; display: inline-block; float: left; width: 100%; margin-bottom: 15px; } .blog2-detail p{ margin-bottom: 0; } .hover-text-theme a{ color: #444; } footer .hover-text-theme a{ color: #fff; } .hover-text-theme a:hover{ color: #73c026; } /* ========================================================================== Call To Action ========================================================================== */ .call1 { display: block; width: 100%; background: #fff; position: relative; padding: 30px; } .call1 h3 { padding-right: 200px; } .call-action p{ margin-bottom: 0; } .call1 p { padding-right: 200px; } .call1 .ot-btn { position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .call2 { display: block; width: 100%; position: relative; padding: 40px 30px; } .call2 h3 { color: #fff; padding-right: 200px; } .call2 p { color: #999; padding-right: 200px; } .call2 .ot-btn { position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding-top: 7px; padding-bottom: 8px; } .call2 .ot-btn:hover { background: #fff!important; color: #444!important; } .call3 { text-align: center; } .call3 h3 { text-align: center; margin-bottom: 30px; } .call3 h3 b{ font-weight: 400; } .call3 .sub-heading-call3 { color: #73c026; margin-bottom: 25px; } .group-call-btn { width: 100%; display: inline-block; text-align: center; margin-top: 35px; } .group-call-btn .ot-btn { padding-bottom: 8px; padding-top: 8px; margin: 0 5px; min-width: 125px; } .group-call-btn .ot-btn i{ font-size: 17px; } /* ========================================================================== Feature ========================================================================== */ .feature-des-text { padding-top: 20px; } .discover { display: inline-block; width: 100%; margin-top: 30px; } .discover img { max-width: 200px; display: inline-block; float: left; } .discover ul.feature { display: block; float: left; width: -webkit-calc(-130%); width: calc(-130%); margin-left: 10px; } .discover ul.feature li { color: #444; display: inline-block; float: left; width: 50%; font-size: 16px; line-height: 30px; padding: 0 10px; font-family: 'Oswald', sans-serif; font-weight: 300; } .discover ul.feature li i { margin-right: 5px; } .discover .ot-btn { margin-left: 20px; margin-top: 30px; padding-top: 10px; padding-bottom: 10px; } .discover2 { display: inline-block; width: 100%; margin-top: 30px; } ul.feature { display: block; overflow: hidden; margin-top: 20px; } ul.features2{ margin-top: 0; } ul.feature li { color: #444; display: inline-block; float: left; width: 50%; font-size: 16px; line-height: 34px; padding-right: 10px; font-family: 'Oswald', sans-serif; font-weight: 300; } ul.feature li i { margin-right: 5px; } .service-box h3{ margin: 15px 0; } .service-box a{ margin-top: 10px; display: inline-block; } .service-box a:hover{ color: #444; } /* Tab + Accrodion ========================================================================== */ .panel { border: 0; } .panel-custom { margin: 0; -webkit-border-radius: 0; border-radius: 0; border-width: 1px; border-style: solid; border-left: 0; border-top-color: #e5e5e5!important; border-right-color: #e5e5e5!important; border-bottom: 0; } .panel-custom .panel-heading { padding: 0; -webkit-border-radius: 0; border-radius: 0; border-bottom: 0; } .panel-custom .panel-heading h4 { font-size: 16px; font-family: 'Oswald', sans-serif; font-weight: 300; margin-bottom: 0; } .panel-custom .panel-heading h4 i { margin-right: 10px; } .panel-custom .panel-heading a { padding: 15px 20px; color: #444; display: block; width: 100%; border-left-width: 3px; border-left-style: solid; border-left-color: #73c026; -webkit-transition: all 0.6s; transition: all 0.6s; } .panel-custom .panel-heading a.collapsed { border-left-color: #444; -webkit-transition: all 0.6s; transition: all 0.6s; } .panel-custom .panel-body { border-top: 1px solid #e5e5e5!important; padding: 15px 20px; } .panel-custom:last-child { border-bottom: 1px solid #e5e5e5!important; } .panel-collapse { border-left-width: 3px; border-left-style: solid; border-left-color: #444; -webkit-transition: all 0.3s; transition: all 0.3s; } .panel-collapse.collapse.in { border-left-color: #73c026; -webkit-transition: all 0.3s; transition: all 0.3s; } /* ========================================================================== Owl Partner ========================================================================== */ .owl-partner { border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; } .owl-partner .item { border: 1px solid #e5e5e5; margin-left: -1px; } .owl-partner img { max-width: 150px; display: block; margin: 0 auto; padding: 25px 5px; opacity: .7; -webkit-transition: all 0.6s; transition: all 0.6s; } .owl-partner img:hover { opacity: 1; } /* ========================================================================== Bx Slider ========================================================================== */ .bx-wrapper .bx-viewport { background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .widget .blog2-item h3 { margin-bottom: 10px; font-family: "Lato", Arial, sans-serif; font-size: 14px; font-weight: 400; } .bx-wrapper { max-width: 100%!important; } .bx-wrapper li { width: 100%!important; } /* ========================================================================== Twitter Widget ========================================================================== */ .twitter-warp { position: relative; } .twitter1-warp { min-height: 68px; width: -webkit-calc(100% - 100px); width: calc(100% - 100px); padding-left: 100px; } .twitter-widget-1 ul { display: inline-block; width: -webkit-calc(100% - 30px); width: calc(100% - 30px); font-size: 16px; list-style: none; } .twitter-widget-1 ul img { display: none; } .twitter-widget-1 ul a { color: #444; margin-right: 10px; } .twitter-widget-1 p.tweet{ font-style: italic; font-size: 15px; } .bg-dark { color: #aaa; } .nav-dark a.btn-1{ color: #fff; border-color: #fff; } .nav-dark a.btn-1:hover{ color: #73c026; border-color: #73c026; } .bg-dark ul a{ color: #eee; } .twitter-widget-1 ul a:hover { color: #73c026; } .twitter-widget-1 ul .interact { display: none; } .twitter-widget-1 ul .timePosted a { color: #73c026; text-align: right; margin-top: 10px; font-size: 12px; } .twitter-logo-fix { width: 68px; height: 68px; -webkit-border-radius: 50%; border-radius: 50%; border-width: 6px; border-style: solid; border-color: #73c026; display: inline-block; float: left; line-height: 56px; text-align: center; font-size: 36px; } .twitter-widget-2 { font-size: 13px; color: #999; margin-top: 0px; } .twitter-widget-2 li { min-height: 180px; padding-left: 50px; } .twitter-widget-2 a { color: #fff; } .twitter-widget-2 a:hover { color: #73c026; } .twitter-widget-2 img { display: none; } .twitter-widget-2 .interact { display: none; } .twitter-widget-2 .timePosted { text-align: right; font-style: italic; font-size: 12px; margin-top: 10px; } .twitter-widget-2 .timePosted a { color: #73c026; } .twitter-widget-2 ul > li:before { content: "\f099"; font-family: 'FontAwesome'; font-size: 36px; color: #00aced; position: absolute; top: 7px; left: 0px; } .icon-twitter-3 { width: 68px; height: 68px; -webkit-border-radius: 50%; border-radius: 50%; border-width: 2px; border-style: solid; border-color: #73c026; color: #73c026; display: block; line-height: 68px; text-align: center; font-size: 36px; margin: 0 auto 25px; } .twitter-owl-warp { color: #999; } .twitter-owl-warp.bg-dark { color: #aaa; } .twitter-owl-warp ul { list-style: none!important; } .twitter-owl-warp li { max-width: 760px; padding: 0 15px; margin: 0 auto; display: block; } .twitter-owl-warp a { color: #444; -webkit-transition: all 0.6s; transition: all 0.6s; } .bg-dark a{ color: #eee; } .twitter-owl-warp .owl-page { background: #444; } .bg-dark .owl-page{ background: #eee; } .twitter-owl-warp .owl-page.active { background: #73c026; } .twitter-owl-warp a:hover { color: #73c026; } .twitter-owl-warp .timePosted, .twitter-owl-warp .interact, .twitter-owl-warp .tweet { text-align: center; } .twitter-owl-warp .timePosted a { display: inline-block; margin: 25px auto; padding: 7px 25px; color: #fff; background: #73c026; } .twitter-owl-warp .timePosted a:hover{ background: #444; } .twitter-owl-warp .interact a { margin: 0 15px; } .twitter-owl-warp .owl-controls { text-align: center; margin-top: 25px; } /* ========================================================================== Tab responsive ========================================================================== */ .tab1 { border-bottom: 0; position: relative; border-right: 1px solid #e5e5e5; } .tab1:before { display: block; content: ""; width: 100%; height: 4px; background: #444; top: 0px; position: absolute; left: 0; } .tab1 > li > a { border: 0; border-left: 1px solid #e5e5e5!important; -webkit-border-radius: 0; border-radius: 0; border-top-width: 4px; border-top-style: solid; border-top-color: #444; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 0; float: left; -webkit-transition: all 0.3s; transition: all 0.3s; } .tab1 > li > a h4 { color: #999; } .tab1 > li:last-child > a { border-right: 1px solid #e5e5e5; } .tab-content-1 { padding: 20px; border: 1px solid #e5e5e5; float: left; width: 100%; } .tab-content-1 .img-tab-demo { float: left; } .tab-content-1 .tab-text-warp { padding-left: 280px; } .tab1 > li.active > a, .tab1 > li.active > a:hover, .tab1 > li.active > a:focus { border-bottom: 1px solid #e5e5e5; border-top-width: 4px; border-top-color: #73c026; border-right: 0; border-bottom: 0; } .tab1 > li.active > a h4, .tab1 > li.active > a:hover h4, .tab1 > li.active > a:focus h4 { color: #444; } .tab1 > li > a:hover, .tab1 > li > a:focus { border-left-color: #e5e5e5!important; border-right-color: #e5e5e5!important; border-top-color: #73c026; background: none; } .tab1 > li > a:hover h4, .tab1 > li > a:focus h4 { color: #444; } .tab1 > li:last-child.active > a { border-right: 1px solid #e5e5e5; } .tab2 > li > a { padding: 10px 25px; } .tab-content-2 { padding: 20px; padding-bottom: 0; } .nav-tabs > li { margin-bottom: 0; } p.rate .fa-star { color: #73c026; } .tab-content-2 { padding: 20px; border: 1px solid #e5e5e5; float: left; width: 100%; } .tab-content-2 .tab-text-warp { padding-left: 0px; } /* ========================================================================== Form Subcribe ========================================================================== */ .subcribe-warp { width: 100%; display: inline-block; padding: 40px 15px; } .subcribe1-warp h4 { font-size: 18px; line-height: 18px; margin-bottom: 5px; } .subcribe1 .form-control { height: 40px; -webkit-box-shadow: none; box-shadow: none; border: 0; width: -webkit-calc(100% - 25px); width: calc(100% - 25px); } .subcribe1 .form-group { width: -webkit-calc((100% - 227px)/2); width: calc((100% - 227px)/2); } .subcribe1 .btn { background: transparent; border: 2px solid #fff; color: #fff; width: 100%; max-width: 220px; font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 300; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 34px; padding: 0; outline: none!important; -webkit-transition: all 0.3s; transition: all 0.3s; } .subcribe1 button i { font-size: 11px; display: inline-block; vertical-align: 3px; margin-left: 5px; } .subcribe1 .btn:hover, .subcribe1 .btn:focus { background: #fff; color: #444; border: 2px solid #fff; } .mc4wp-error{ color: red; margin-top: 10px; } .mc4wp-success{ color: #237a91; padding: 10px; background: #fff; border-radius: 20px; text-align: center; } /* ========================================================================== About Page ========================================================================== */ /* Owl Core Feature ========================================================================== */ .core-feature-warp { clear: both; margin-top: 15px; float: left; width: 100%; } .owl-core-feature .iconbox-set-3 { padding-right: 15px; } /* Our Skill ========================================================================== */ .additional-text { margin-top: 30px; } .additional-text .ot-btn { margin-top: 25px; padding-top: 10px; padding-bottom: 10px; } .progress-warp { clear: both; margin-top: 20px; float: left; width: 100%; } .chart-h-item h4 { font-family: 18px; text-indent: 10px; } .chart-h-item .percent-h { margin-left: 10px; } .progress-h { border: 1px solid #e5e5e5; padding: 10px; -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; border-radius: 0; height: 30px; background: transparent; position: relative; } .progress-h:before { content: ""; background: #444; height: 10px; width: -webkit-calc(100% - 20px); width: calc(100% - 20px); top: 10px; left: 10px; position: absolute; } .progress-h .progress-bar { line-height: 30px; height: 10px; position: absolute; overflow: hidden; } .progress-bar { -webkit-transition: width 1s ease-in-out; transition: width 1s ease-in-out; } .demo-skill { display: block; position: absolute; top: -30px; width: 340px; -webkit-filter: drop-shadow(-7px 5px 4px rgba(0, 0, 0, 0.5)); filter: drop-shadow(-7px 5px 4px rgba(0, 0, 0, 0.5)); left: 70px; } /* ========================================================================== Our Team ========================================================================== */ .team-warp { clear: both; margin-top: 20px; display: block; width: 100%; float: left; } .owl-item .item .team-item { width: -webkit-calc(70%); width: calc(70%); } .team-item { width: 100%; border: 1px solid #e5e5e5; background: #fff; } .team-slider .steam{ padding: 0 15px; } .team-slider .owl-pagination{ text-align: center; margin-top: 25px; } .team-slider .owl-page{ background: #444; } .team-slider .owl-page.active{ background: #73c026; } .team-item h4 { font-size: 18px; text-align: center; margin-top: 16px; margin-bottom: 4px; -webkit-transition: all 0.3s; transition: all 0.3s; } .team-item p { text-align: center; margin-bottom: 15px; } .team-item img { padding: 9px; border-bottom: 1px solid #e5e5e5; } .team-item p a { -webkit-transition: all 0.3s; transition: all 0.3s; } .team-item:hover .overlay-1 { border-color: #73c026; opacity: 1; } .team-item:hover .overlay-1 .fa { opacity: 1; } .team-item:hover .overlay-1 .fa-link { -webkit-transform: translate(10px, -50%); -ms-transform: translate(10px, -50%); transform: translate(10px, -50%); } .team-item:hover .overlay-1 .fa-expand { -webkit-transform: translate(-44px, -50%); -ms-transform: translate(-44px, -50%); transform: translate(-44px, -50%); } .team-info { text-align: center; padding: 0 15px; } .team-social-warp { display: block; clear: both; width: 100%; background: #f2f2f2; height: 40px; border-top-width: 2px; border-top-style: solid; border-top-color: transparent; text-align: center; line-height: 38px; } .team-social-warp a { color: #444; font-size: 18px; margin: 0 7px; } .team-item-img-container { position: relative; } .overlay-1 { background: rgba(34, 34, 34, 0.85); opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.6s; transition: all 0.6s; z-index: 0; } .overlay-1 .fa { position: absolute; top: 50%; left: 50%; display: block; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; color: #444; line-height: 28px; border: 3px solid #ccc; text-align: center; width: 34px; height: 34px; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .overlay-1 .fa-expand { -webkit-transform: translate(-84px, -50%); -ms-transform: translate(-84px, -50%); transform: translate(-84px, -50%); } .overlay-1 .fa-link { -webkit-transform: translate(50px, -50%); -ms-transform: translate(50px, -50%); transform: translate(50px, -50%); } .team-item img { -webkit-filter: contrast(0.9); filter: contrast(0.9); -webkit-transition: all 0.6s; transition: all 0.6s; } .team-item:hover img { -webkit-filter: contrast(1.2); filter: contrast(1.2); } .hidden-control-owl .owl-controls { display: none!important; } .owl-team .owl-pagination { text-align: center; margin-top: 25px; } .owl-team .owl-page { background: #999; } .owl-team .owl-page.active { background: #73c026; } .team-warp-landing { margin-top: 0; } .team-item.team-circle { border: 0; } .team-item.team-circle img { -webkit-border-radius: 50%; border-radius: 50%; border: 0; } .team-item.team-circle .team-social-warp { background-color: #fff; border: 0; } .team-item.team-circle .team-social-warp a { display: inline-block; } .team-item.team-circle .overlay-1 { -webkit-border-radius: 50%; border-radius: 50%; } /* Team Single */ h3.personal-title { margin: 30px 0 10px 0; } .personal-information { list-style: none; padding: 0; margin: 0; display: inline-block; width: 100%; } .personal-information li { display: inline-block; width: 100%; border-bottom: 1px solid #e5e5e5; padding: 10px 0; } .personal-information li span { min-width: 70px; display: inline-block; } .personal-avatar { width: 100%; padding: 9px; border: 1px solid #e5e5e5; } .personal-avatar img { width: 100%; max-width: 100%; } .quote-single { font-size: 16px; color: #444; } /* ========================================================================== Blog Style ========================================================================== */ .main-page { width: 75%; padding-right: 15px; padding-left: 15px; float: left; } .sidebar-page { float: left; padding-left: 15px; padding-right: 15px; width: 25%; } .item-blog { clear: both; margin-bottom: 70px; } .blog-feature-warp { padding: 9px; border: 1px solid #e5e5e5; } .blog-feature-warp img { max-width: 100%; } .blog-feature-warp iframe { width: 100%; max-width: 100%; } .blog-single-feature-img .blog-feature-warp { width: 100%; } .blog-feature-content-inner { overflow: hidden; border-top: 1px solid #e5e5e5; margin-top: -1px; } .blog-footer-2 { width: 100%; padding: 10px; min-height: 38px; background: #f2f2f2; font-size: 12px; border-top-width: 2px; border-top-style: solid; overflow: hidden; } .blog-footer-2 ul { list-style: none; float: left; } .blog-footer-2 ul li { display: inline-block; float: left; padding: 0 7px; position: relative; } .blog-footer-2 ul li:after { display: block; width: 1px; position: absolute; content: ""; height: 8px; background: rgba(0, 0, 0, 0.3); top: 6px; right: -1px; } .blog-footer-2 ul.social-share { float: right; } .blog-footer-2 a { color: #444; } .blog-footer-2 li:last-child:after { display: none; } ul.social-share { list-style: none; } ul.social-share li { display: inline-block; padding: 0 5px; position: relative; } ul.social-share li a { font-size: 13px; -webkit-transition: all 0.3s; transition: all 0.3s; } ul.social-share li a:hover { color: #73c026; } ul.social-share li:after { display: none; } .blog-feature-content { border: 1px solid #e5e5e5; border-top: 0; } .blog-feature-content .blog-data { position: static; display: inline-block; margin: 9px; float: left; } .blog-feature-content .blog-text { float: left; width: -webkit-calc(100% - 58px); width: calc(100% - 58px); padding: 9px; } .timeline-panel .blog-feature-content .blog-text{ width: 100%; } .blog-feature-content .blog-text h4 a { -webkit-transition: all 0.3s; transition: all 0.3s; } .hover-text-theme{ color: #444; } .readmore { color: #444; display: inline-block; } .blog-video-popup { position: relative; width: 100%; height: 100%; float: left; display: block; border: 1px solid #e5e5e5; } .blog-video-popup .blog-feature-warp { width: 40%; display: inline-block; float: left; border-top: 0; border-left: 0; border-bottom: 0; position: relative; } .blog-video-popup .blog-feature-content { width: 60%; display: inline-block; float: left; border: 0; padding-bottom: 42px; } .blog-video-popup .blog-data { position: static; display: inline-block; margin: 9px; float: left; } .blog-video-popup .blog-text { display: inline-block; width: -webkit-calc(100% - 58px); width: calc(100% - 58px); float: left; padding: 9px; padding-left: 10px; } .blog-video-popup .blog-text h4 { -webkit-transition: all 0.3s; transition: all 0.3s; } .blog-video-popup .blog-footer-2 { position: absolute; bottom: 0; right: 0; width: 60%; } .overlay-btn-video { background: rgba(0, 0, 0, 0.1) url("images/Icon/btn-play.png") center center no-repeat; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: all 0.6s; transition: all 0.6s; } .overlay-btn-video:hover { background-color: rgba(0, 0, 0, 0.5); } .blog-gallery-feature-img .blog-feature-warp { position: relative; } .blog-gallery-feature-img .blog-feature-warp .prev-image { width: 20px; height: 37px; background: url("images/Icon/Left.png") no-repeat; display: block; position: absolute; left: 24px; top: 50%; -webkit-transform: translateY(-18px); -ms-transform: translateY(-18px); transform: translateY(-18px); z-index: 9; opacity: .1; -webkit-transition: all 0.6s; transition: all 0.6s; cursor: pointer; } .blog-gallery-feature-img .blog-feature-warp .prev-image:hover { opacity: .9; } .blog-gallery-feature-img .blog-feature-warp .next-image { width: 20px; height: 37px; background: url("images/Icon/Right.png") no-repeat; display: block; position: absolute; right: 24px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; opacity: .1; -webkit-transition: all 0.6s; transition: all 0.6s; cursor: pointer; } .blog-gallery-feature-img .blog-feature-warp .next-image:hover { opacity: .9; } .blog-gallery-feature-img .blog-feature-warp:hover .prev-image, .blog-gallery-feature-img .blog-feature-warp:hover .next-image { opacity: .9; } .pagination-blog{ clear: both; font-family: "Oswald"; } .pagination-blog li a { font-size: 16px; padding: 5px 15px; border: 1px solid #e5e5e5; margin-right: 5px; margin-bottom: 5px; color: #444; -webkit-border-radius: 3px; border-radius: 3px; } .pagination-blog li a:hover { background: #f2f2f2; font-size: 16px; padding: 5px 15px; border: 1px solid #e5e5e5; margin-right: 5px; margin-bottom: 5px; color: #444; -webkit-border-radius: 3px; border-radius: 3px; } .pagination-blog li span { background: #f2f2f2; font-size: 16px; padding: 5px 15px; border: 1px solid #e5e5e5; margin-right: 5px; margin-bottom: 5px; color: #444; -webkit-border-radius: 3px; border-radius: 3px; } .pagination-blog li span:hover { background-color: #f2f2f2; font-size: 16px; padding: 5px 15px; border: 1px solid #e5e5e5; margin-right: 5px; margin-bottom: 5px; color: #444; -webkit-border-radius: 3px; border-radius: 3px; } .owl-blog-landing { width: auto; margin: 0 -15px; } .owl-blog-landing .item-blog { border: 1px solid #e5e5e5; margin: 15px; background: #fff; } .owl-blog-landing .owl-pagination { text-align: center; margin-top: 25px; } .owl-blog-landing .owl-page { background: #999; } .owl-blog-landing .owl-page.active { background: #73c026; } /* ========================================================================== Main SideBar ========================================================================== */ .widget { margin-bottom: 50px; } footer .widget{ margin-bottom: 20px; } .widget h3 { margin-bottom: 20px; } .main-sidebar .widget li{ border-bottom: 1px solid #e5e5e5; padding: 10px 0; line-height: inherit; } .widget li a{ color: #444; } .widget li a:hover{ color: #73c026; } .widget-search form { position: relative; } .widget-search form button { position: absolute; top: 0; right: 0; height: 100%; width: 50px; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 18px; } .widget-search form button:hover { color: #73c026; } .widget-search .form-group { width: 100%; border: 0; background: #f2f2f2; -webkit-border-radius: 0; border-radius: 0; outline: none; -webkit-box-shadow: 0; box-shadow: 0; height: 40px; line-height: 40px; } .widget-search .form-control { border: 0; width: 100%; background: #f2f2f2; -webkit-border-radius: 0; border-radius: 0; outline: none; -webkit-box-shadow: 0; box-shadow: 0; -webkit-box-shadow: none; box-shadow: none; height: 40px; line-height: 40px; padding-right: 50px; } .widget_categories ul.category { list-style: none; } .widget_categoriesul.category li { border-bottom: 1px solid #e5e5e5; position: relative; } .widget_categories ul li:before { content: "\f115"; font-family: 'FontAwesome'; font-size: 15px; color: #999; margin-right: 10px; } .widget_categories ul.category li a { font-size: 13px; color: #444; padding: 10px 0; display: inline-block; text-indent: 10px; -webkit-transition: all 0.6s; transition: all 0.6s; } .widget_categories ul.category li .count { float: right; display: block; width: 28px; height: 28px; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #f2f2f2; text-align: center; line-height: 26px; margin: 5px 0; color: #999; } .widget-category ul.category li:hover a { color: #73c026; } .widget-tabs { display: inline-block; width: 100%; } .item-blog-sidebar { border: 1px solid #e5e5e5; min-height: 85px; margin-bottom: 20px; } .item-blog-sidebar .blog-feature-warp { width: 85px; height: 85px; padding: 10px; border: 0; border-right: 1px solid #e5e5e5; float: left; } .item-blog-sidebar .blog-feature-content { width: -webkit-calc(100% - 85px); width: calc(100% - 85px); display: inline-block; border: 0; padding: 6px 10px; } .item-blog-sidebar .blog-feature-content.none-img{ width: 100%; } .item-blog-sidebar .blog-feature-content a h4 { margin-top: 5px; margin-bottom: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; } .widget-accordion h3 { margin-bottom: 30px; } .widget-text .ot-btn { margin-top: 25px; } .widget_recentpost_widget li{ border: 1px solid #e5e5e5; padding: 0!important; line-height: inherit; margin-bottom: 10px; min-height: 70px; } .post-preview-small{ position: relative; padding-left: 60px; } .no-thumb .post-preview-small{ padding-left: 0; } .post-preview-small figure{ position: absolute; top: 0; left: 0; padding: 10px; border-right: 1px solid #e5e5e5; } .no-thumb .post-preview-small figure{ padding: 0; } .right-post { min-height: 40px; padding: 10px 20px; } .right-post h4{ font-family: 'Lato', sans-serif; font-weight: 400; margin-bottom: 8px; line-height: 1; } footer .right-post a{ color: #eee; } footer .widget_recentpost_widget li{ padding-bottom: 20px; } .right-post .meta{ font-size: 12px; margin-bottom: 0; } .right-post .meta i{ margin-right: 3px; } .post-preview-small .right-post a{ font-size: 14px; } .taglist{ margin-top: 10px; } .taglist a{ color: #444; } .tagcloud { list-style: none; display: inline-block; width: 100%; } .tagcloud li{ border: none; display: inline-block; padding: 0; margin: 0 3px 5px; } .tagcloud li a { display: block; line-height: 28px; padding: 0 20px; background: #3a3a3a; color: #999; -webkit-transition: all 0.3s; transition: all 0.3s; font-style: italic; } .tagcloud li a:hover { background: #333; color: #fff; } .main-sidebar .textwidget p{ margin-bottom: 15px; } /* ========================================================================== Single Blog ========================================================================== */ .single-blog-warp .item-blog { margin-bottom: 50px; } .single-feature-blog .blog-text { padding-left: 10px; padding-right: 10px; padding-bottom: 30px; } .single-feature-blog .blog-text .sapo { font-size: 16px; margin-bottom: 25px; margin-top: 10px; display: inline-block; width: 100%; } .single-feature-blog .blog-text h4{ margin-bottom: 20px; } .single-feature-blog .blog-text p { line-height: 20px; margin-bottom: 15px; } blockquote { background: #f2f2f2; color: #444; padding: 25px; padding-bottom: 10px; margin: 20px 0; border-color: #73c026; } blockquote p { font-size: 15px; font-style: italic; } blockquote i.fa-quote-left { font-size: 30px; float: left; } .pagination-single-blog { display: inline-block; width: 100%; } .pagination-single-blog li:last-child { float: right; } /* Author */ .author-warp { border: 1px solid #e5e5e5; min-height: 170px; margin: 40px 0 70px 0; } .author-warp .author-avatar-warp { width: 170px; height: 170px; padding: 10px; border: 0; border-right: 1px solid #e5e5e5; float: left; } .author-warp .author-info { width: -webkit-calc(-70%); width: calc(-70%); display: inline-block; border: 0; padding: 15px; } .author-warp .author-info h4 { margin-top: 5px; margin-bottom: 5px; } .author-warp .author-info h5.job-author { font-size: 16px; font-weight: 300; } .nav-links{ display: inline-block; width: 100%; margin-bottom: 50px; } .nav-links a{ color: #444; text-transform: uppercase; font-size: 16px; padding: 6px 10px; border: 1px solid #e5e5e5; border-radius: 3px; font-family: 'Oswald', sans-serif; font-weight: 300; display: block; } .nav-links a:hover{ color: #fff; background: #73c026; } .nav-links a i{ font-size: 23px; margin-right: 3px; } .nav-links .nav-previous{ float: left; } .nav-links .nav-next{ float: right; } .nav-links .nav-next i{ margin-left: 3px; margin-right: 0; } /* ========================================================================== Relate Blog OWL ========================================================================== */ .owl-relate-blog .item-blog-sidebar { margin-left: 30px; } .owl-relate-blog .item-blog-sidebar h4{ margin-bottom: 5px; } .owl-relate-blog p{ margin-bottom: 0; } .relate-post { overflow: hidden; margin-bottom: 40px; } .relate-blog-warp { clear: both; margin-top: 30px; display: block; margin-left: -30px; } /* Comment Area */ .comment-area ul, .comment-area ol{ list-style: none; padding: 0; } .comment-area ul{ padding-left: 40px; } .comment-list{ margin-bottom: 40px; } .comment-item { border: 1px solid #e5e5e5; margin-bottom: 30px; } .comment-list-item .com2 { width: 92%; } .comment-list-item .com3 { width: 84%; } .header-comment { border-bottom: 1px solid #e5e5e5; display: inline-block; width: 100%; position: relative; } .header-comment .avatar-comment { padding: 10px; border-right: 1px solid #e5e5e5; float: left; } .header-comment .avatar-comment img { width: 54px; height: 54px; } .header-comment .comment-reply-link { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 15px; font-size: 13px; text-align: center; padding: 5px 24px; outline: none; -webkit-transition: all 0.3s; transition: all 0.3s; font-family: 'Oswald', sans-serif; font-weight: 300; display: inline-block; background: #222; color: #fff; border-radius: 3px; text-transform: uppercase; } .header-comment .comment-reply-link:hover{ background: #73c026; } .header-comment p { padding-left: 94px; color: #444; } .header-comment p.author-name { margin-top: 15px; } .body-comment { padding: 15px; } .comment-count { margin-top: 35px; margin-bottom: 25px; } .comment-count span { color: #444; } .comment-form-warp { clear: both; display: inline-block; width: 100%; } .comment-form-warp form { display: inline-block; width: 100%; margin-top: 20px; } .comment-author{ padding: 0 10px 0 0; } .comment-email{ padding: 0 0 0 10px; } .left-form-comment { width: 31%; float: left; } .left-form-comment .form-group { width: 100%; } .comment-form .form-control { width: 100%; margin-bottom: 25px; height: 40px; line-height: 40px; background: #f2f2f2; border: 1px solid #e5e5e5; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; border-radius: 3px; } .left-form-comment .form-control:focus { background: #fff; color: #444; } .form-submit .ot-btn { border: 0; color: #fff; padding-top: 10px; padding-bottom: 10px; } .form-submit .ot-btn:hover{ background: #444; } .left-form-comment .wpcf7-submit{ border: none; display: block; width: 100%; padding: 10px; font-size: 14px; } .right-form-comment { width: 69%; float: left; padding-right: 30px; } .comment-form .comment-mess textarea, .right-form-comment textarea { width: 100%; background: #f2f2f2; border-color: #e5e5e5; height: 170px; line-height: inherit; resize: vertical; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; border-radius: 3px; outline: none; } .right-form-comment textarea{ } .right-form-comment textarea.form-control:focus, .comment-form .form-control:focus{ background: #fff; color: #444; border-color: #73c026; box-shadow: none; } .comment-reply-title a{ color: #73c026; font-size: 13px; text-transform: lowercase; font-weight: 300; } .comment-item .comment-respond{ padding: 20px; } .logged-in-as a{ color: #888; margin-bottom: 10px; display: inline-block; } /* ========================================================================== Single Portfolio ========================================================================== */ .single-portfolio-warp { display: inline-block; width: 100%; margin-bottom: 50px; } .owl-gallery-portfolio-post { position: relative; } .owl-gallery-portfolio-post .owl-controls { position: absolute; bottom: 15px; width: 100%; display: block; text-align: center; margin: 0 5px; } .owl-gallery-portfolio-post .owl-controls .owl-page { background: #444; width: 15px; height: 15px; } .owl-gallery-portfolio-post .owl-controls .owl-page.active { background: #73c026; } .portfolio-feature-warp { position: relative; padding: 10px; border: 1px solid #e5e5e5; } .portfolio-feature-warp img { width: 100%; max-width: 100%; } .portfolio-feature-warp .prev-portfolio-image { width: 70px; height: 70px; background: url("images/Icon/prev.png"); display: block; position: absolute; left: 9px; top: 50%; -webkit-transform: translateY(-35px); -ms-transform: translateY(-35px); transform: translateY(-35px); z-index: 9; opacity: .1; -webkit-transition: all 0.6s; transition: all 0.6s; cursor: pointer; } .portfolio-feature-warp .prev-portfolio-image:hover { opacity: .9; } .portfolio-feature-warp .next-portfolio-image { width: 70px; height: 70px; background: url("images/Icon/next.png"); display: block; position: absolute; right: 9px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; opacity: .1; -webkit-transition: all 0.6s; transition: all 0.6s; cursor: pointer; } .portfolio-feature-warp .next-portfolio-image:hover { opacity: .9; } .portfolio-feature-warp:hover .prev-image, .portfolio-feature-warp:hover .next-image { opacity: .9; } .portfolio-feature-content { width: 100%; } .porfolio-info-col h3 { margin-bottom: 25px; } .col-description .ot-btn { margin-top: 30px; } .col-description ul.social-share { float: left; margin: 15px 0 0 0; } .col-description ul.social-share li { padding: 0 10px 0 0; } .col-description ul.social-share a { color: #222; -webkit-transition: all 0.3s; transition: all 0.3s; } .col-description ul.social-share a:hover { color: #73c026; } .col-detail p { border-bottom: 1px solid #e5e5e5; padding-bottom: 12px; margin-bottom: 12px; color: #444; } .col-detail p span { color: #999; margin-right: 10px; } .col-skill p { border-bottom: 1px solid #e5e5e5; padding-bottom: 12px; margin-bottom: 12px; color: #444; } .col-skill p i { color: #73c026; margin-right: 10px; } /* Relate Project ========================================================================== */ .relate-project{ margin-bottom: 70px; } .relate-portfolio-warp { clear: both; margin-top: 35px; display: block; } .relate-portfolio-warp .item{ padding: 0 15px; } /* ========================================================================== Contact ========================================================================== */ .left-contact h3, .right-contact h3 { margin-bottom: 30px; } .address-info { margin-top: 10px; display: inline-block; width: 100%; } .address-info p { font-size: 16px; font-family: "Oswald"; color: #444; font-weight: 300; margin-bottom: 20px; } .address-info p i { margin-right: 10px; font-size: 20px; } /* contact form landing */ .form-inline .contact-form-landing .form-control { width: 100%; -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; border-radius: 0; height: 50px; border: 1px solid #e6e6e6; outline: none; -webkit-transition: all 0.6s; transition: all 0.6s; } .form-inline .contact-form-landing .form-control:focus { border-color: #73c026; } .form-inline .contact-form-landing .form-textarea { width: 100%; margin-top: 30px; } .form-inline .contact-form-landing textarea.form-control { width: 100%; height: auto; } .btn-submit-landing { border: 0; outline: none; -webkit-box-shadow: none; box-shadow: none; margin-left: 15px; margin-top: 30px; } .contact-2-comment-form { margin-top: 0; } .address-info-contact-2 p:first-child { margin-top: 0; } span.wpcf7-not-valid-tip{ clear: both; margin-top: -15px; } div.wpcf7-response-output{ clear: both;margin: 0; } /* ========================================================================== FAQs ========================================================================== */ .faq-heading { font-size: 18px; color: #73c026; font-style: italic; font-weight: 400; margin-bottom: 25px; } .faq-panel { margin-top: 25px; clear: both; } .widget-support .content-support { padding: 40px; } .widget-support .content-support h4 { color: #fff; font-size: 24px; margin-bottom: 40px; } .widget-support .content-support .ot-btn { margin-top: 25px; } .need-sp h4{ margin-bottom: 15px; } .need-sp .ot-btn{ margin-top: 15px; } /* ========================================================================== Services ========================================================================== */ .services-heading { font-size: 18px; color: #73c026; font-style: italic; font-weight: 400; margin-bottom: 25px; } .service-warp-text h3 { margin-bottom: 40px; } .service-warp-text .ot-btn { margin-top: 25px; } /* ========================================================================== 404 Page ========================================================================== */ .page404 { padding: 100px 0 140px; font-size: 14px; } .page404 h2 { font-size: 100px; } .page404 .color-theme { font-size: 38px; font-weight: 300; line-height: 1.6; } .page404 .widget-search{ margin-bottom: 20px; } .page404 .search-404 { margin: 20px auto; max-width: 400px; } .page404 .search-404 form { margin-top: 20px; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); } .page404 a { margin-top: 5px; } .full-height { height: 100vh; } .section { position: relative; width: 100%; } .hero-wrap { position: absolute; left: 0; top: 50%; width: 100%; z-index: 10; text-align: center; margin: 0 auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .bg404 { background: url("images/404/1.jpg") no-repeat; -webkit-background-size: cover; background-size: cover; background-attachment: fixed; } .overlay-404 { background: #303335; opacity: .8; position: absolute; top: 0; left: 0; width: 100%; } .hero-wrap-404 .heading-404 { font-size: 48px; text-transform: capitalize; font-weight: bold; line-height: 64px; margin-bottom: 25px; color: #fff; } .hero-wrap-404 .sub-heading-404 { color: #fff; margin-bottom: 30px; } .hero-wrap-404 a { color: #fff; } .btn-goback404 { display: inline-block; clear: both; margin: 25px auto; -webkit-transition: all 0.3s; transition: all 0.3s; } .btn-goback404:hover { color: #73c026; } .search404 { max-width: 500px; margin: 0 auto; } .search404 .form-control { height: 40px; -webkit-box-shadow: none; box-shadow: none; border: 0; width: -webkit-calc(75%); width: calc(75%); } .search404 .form-group { width: -webkit-calc(-127%); width: calc(-127%); } .search404 button { background: transparent; border: 2px solid #fff; color: #fff; width: 100%; max-width: 150px; font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 300; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 34px; padding: 0; outline: none!important; -webkit-transition: all 0.3s; transition: all 0.3s; } .search404 button i { font-size: 15px; display: inline-block; vertical-align: 3px; margin-left: 5px; } .search404 button:hover, .search404 button:focus { background: #fff; color: #444; border: 2px solid #fff; } /* ========================================================================== Coming Soon ========================================================================== */ .full-height { height: 100vh; } .section { position: relative; width: 100%; } .hero-wrap { position: absolute; left: 0; top: 50%; width: 100%; z-index: 10; text-align: center; margin: 0 auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .bgcms { background: url("images/ComingSoon/1.jpg") no-repeat; -webkit-background-size: cover; background-size: cover; background-attachment: fixed; } .overlay-cms { background: #303335; opacity: .8; position: absolute; top: 0; left: 0; width: 100%; } .hero-wrap-cms .heading-cms { font-size: 48px; text-transform: capitalize; font-weight: bold; line-height: 64px; margin-bottom: 25px; color: #fff; } .hero-wrap-cms .sub-heading-cms { color: #fff; } .hero-wrap-cms a { color: #fff; } .dotted-countdown { display: inline-block; margin: 40px 0px; background-color: rgba(255, 255, 255, 0.1); padding: 40px 20px; width: 100%; max-width: 650px; } .countdown { list-style: none; width: 100%; } .countdown li { width: 25%; display: inline-block; float: left; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0px 20px; } .countdown li span, .countdown li p { background: #222; padding: 20px 0; display: inline-block; width: 100%; position: relative; } .countdown li span { font-size: 24px; font-weight: bold; color: #fff; text-transform: uppercase; } .countdown li p { color: #fff; text-transform: uppercase; font-size: 11px; } .countdown li span:before { display: block; content: ""; background: #73c026; width: 60%; height: 2px; position: absolute; left: 20%; bottom: 0; } .social-big-white { display: inline-block; width: 100%; margin-top: 15px; } .social-big-white li { margin: 0px 20px; font-size: 24px; margin-top: 20px; display: inline-block; } .social-big-white li a { color: #fff; -webkit-transition: all 0.6s; transition: all 0.6s; } .social-big-white li a:hover { color: #73c026; } /* ========================================================================== Typography ========================================================================== */ .column_container { margin-bottom: 40px; } .main-page-typography h1, .main-page-typography h2, .main-page-typography h3, .main-page-typography h4, .main-page-typography h5, .main-page-typography h6 { font-weight: 400; } .main-page-typography h2{ font-size: 32px; } .icon-box.small .icon { height: 46px; width: 46px; } .icon-box .icon { position: absolute; } .icon { margin-bottom: 16px; } .icon-box.small > h3 { font-size: 24px; margin: 0 12px 10px 60px; } .icon-box.small > p { margin: 0 0 0px 60px; font-size: 14px; line-height: 1.6; } .icon-box.clean.small .icon i { font-size: 36px; color: #222; } .icon-box.small > span { margin: 25px 0 0px 60px; font-size: 42px; font-weight: 900; color: #222; display: block; } .icon-box.clean.small .icon-grey i { font-size: 36px; color: #f1f1f1!important; } .white-text h3, .white-text span { color: #fff!important; } /* ========================================================================== Pricing Table ========================================================================== */ .pricing-set-1 { margin-top: 40px; display: inline-block; width: 100%; } .pricing-table { border: 1px solid #e6e6e6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #ffffff; margin-bottom: 20px; position: relative; z-index: 1; -webkit-transition: -webkit-box-shadow 0.4s ease; transition: box-shadow 0.4s ease; } .pricing-table p{ margin-bottom: 0; } .pricing-table header { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 30px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e6e6e6; } .pricing-table header p.title { margin: 0px; background: rgba(0, 0, 0, 0.1); font-size: 1.2em; text-transform: uppercase; font-weight: bold; line-height: 35px; color: #222222; padding-left: 20px; } .pricing-table.featured header p.title, .pricing-table.featured header .price p.condition{ color: #eee; } .pricing-table header .price { width: 100%; margin-top: 40px; } .pricing-table header .price p.value { color: #fff; font-size: 3em; font-weight: bold; display: inline-block; } .pricing-table header .price p.condition { color: #222222; font-weight: bold; text-transform: uppercase; margin-top: 10px; } .pricing-table .content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 30px; } .pricing-table .content ul { list-style: none; } .pricing-table .content p { margin: 0px; margin-bottom: 20px; } .pricing-table .content ul li { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e6e6e6; line-height: 3em; } .pricing-table .content ul li i.fa { color: #73c026; margin-right: 5px; } .pricing-table .fplan { border-top-width: 1px; border-top-style: solid; border-top-color: #e6e6e6; background: #fff; padding: 25px 0 25px 30px; } .pricing-table .fplan .ot-btn { padding: 12px 30px; font-size: 15px; } .pricing-table.featured header { background-color: #73c026; padding-top: 30px; } .pricing-table.featured footer .ot-btn { background: #222; } .pricing-table header .price p.value { color: #73c026; } .pricing-table.featured header .price p.value { color: #fff; } .pricing-table:hover { z-index: 100; -webkit-box-shadow: #aeb3b6 0px 0px 15px; box-shadow: #aeb3b6 0px 0px 15px; } .pricing-table.featured { -webkit-box-shadow: #aeb3b6 0px 0px 15px; box-shadow: #aeb3b6 0px 0px 15px; border: 0px; z-index: 10; } /*set 2*/ .pricing-set-2 { margin-top: 40px; display: inline-block; width: 100%; } .pricing-tables-group-item { width: auto; float: left; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fborder .details, .fborder .buy, .fborder .desc{ border-left: 1px solid #e6e6e6; } .fborder p.title, .fborder p.price{ border-left: 1px solid rgba(0, 0, 0, 0.1); } .pricing-tables-group-item p.title { line-height: 3em; font-size: 22px; background-color: #303335; color: #fff; text-transform: uppercase; font-weight: bold; font-weight: 400; border-right: 1px solid rgba(0, 0, 0, 0.1); } .pricing-tables-group-item p.price { background-color: #414446; color: #fff; padding: 20px 0px; border-right: 1px solid rgba(0, 0, 0, 0.1); } .pricing-tables-group-item p { width: 100%; float: left; margin: 0px; padding: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pricing-tables-group-item p.desc { padding: 10px 0px; font-style: italic; border-bottom: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; } .pricing-tables-group-item .details { width: 100%; float: left; margin: 0px; padding: 0px; border-right: 1px solid #e6e6e6; } .pricing-tables-group-item p.buy { padding: 20px 0px; border-bottom: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; } .pricing-tables-group-item .details ul { list-style: none; } .pricing-tables-group-item .details li { width: 100%; float: left; margin: 0px; padding: 10px 0px; border-bottom-width: 1px; border-bottom-color: #e6e6e6; border-bottom-style: solid; } .pricing-tables-group-item p.buy a { padding: 10px 40px; } .pricing-tables-group-item.featured p.title { background: #73c026; } .pricing-tables-group-item.featured p.price { background: #5a951e; } .landing-pricing-table-warp { margin-top: 20px; } /* ========================================================================== Icon Box ========================================================================== */ .iconbox-set-3-demo { display: inline-block; width: 100%; margin-top: 40px; } /* ========================================================================== Reward ========================================================================== */ .reward-item { position: relative; min-height: 262px; padding: 20px; padding-left: 120px; margin: 40px 0; margin-bottom: 0; border: 1px solid #e5e5e5; background: #fff; } .reward-item .reward-item p { margin: 10px 0px; } .reward-item figure { position: absolute; left: 10px; top: 20px; width: 100px; text-align: center; } .reward-item figure img { max-width: 80px; } .reward-item p.title { margin-top: 0px; color: #222222; font-weight: 600; text-transform: capitalize; font-size: 18px; margin-bottom: 15px; } .reward-item p.date { color: #73c026; font-size: 13px; font-style: italic; margin-bottom: 15px; } /* ========================================================================== Element ========================================================================== */ .warp-element { margin-bottom: 40px; } .warp-element h3 { margin-bottom: 25px; } .warp-element .ot-btn { margin-right: 10px; margin-bottom: 10px; } .group-partner{ display: inline-block; width: 100%; } .logo-group-item { width: 25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e5e5e5; display: inline-block; float: left; margin-bottom: -1px; margin-right: -1px; } .logo-group-item img { max-width: 65%; display: block; margin: 25px auto; opacity: .8; -webkit-transition: all 0.6s; transition: all 0.6s; } .logo-group-item img:hover { opacity: 1; } /* ========================================================================== Time Line Layout ========================================================================== */ .timeline { list-style: none; position: relative; overflow: hidden; } .timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 50%; margin-left: -1.5px; height: -webkit-calc(100% - 27px); height: calc(100% - 27px); } .timeline > li { margin-bottom: 90px; position: relative; width: 50%; float: left; clear: left; } .timeline > li:last-child{ margin-bottom: 30px; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li > .timeline-panel { width: -webkit-calc(100% - 40px); width: calc(100% - 40px); float: left; border: 1px solid #d4d4d4; /*border-radius: 2px;*/ /*padding: 20px;*/ position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline-panel .item-blog { margin-bottom: 0; } .timeline-panel .blog-feature-warp { border: 0; } .timeline .blog-feature-content{ border: none; } .timeline-panel .blog-feature-content-inner { padding: 10px; } .timeline-panel .blog-video-popup { border: 0; } .timeline-panel .blog-video-popup .blog-feature-warp { width: 100%; } .timeline-panel .blog-video-popup .blog-feature-content { width: 100%; } .timeline-panel .blog-video-popup .blog-footer-2 { width: 100%; padding: 10px; min-height: 38px; background: #f2f2f2; font-size: 12px; border-top-width: 2px; border-top-style: solid; position: static; } .timeline-panel .blog-embed-video-feature { width: 100%; } .timeline-panel .overlay-btn-video { background: rgba(255, 255, 255, 0) url("images/Icon/btn-play.png") center center no-repeat; } .timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; } .timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } .timeline > li > .blog-data { position: absolute; top: 0; right: 0; left: auto; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } .timeline > li.timeline-inverted > .timeline-panel { float: right; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline-body > ul { padding: 20px; margin-bottom: 0; } .timeline > li.timeline-inverted { float: right; clear: right; margin-top: 60px; margin-bottom: 30px; } .timeline > li:nth-child(2) { margin-top: 140px; } .timeline > li.timeline-inverted > .blog-data { position: absolute; top: 0; left: 0; right: auto; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } /* Time Line One Side */ .timeline-1-side { list-style: none; padding-left: 20px; position: relative; } .timeline-1-side:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 20px; } .timeline-1-side .blog-feature-content .blog-text{ width: 100%; } .timeline-1-side > li { margin-bottom: 30px; position: relative; } .timeline-1-side > li:before, .timeline-1-side > li:after { content: " "; display: table; } .timeline-1-side > li:after { clear: both; } .timeline-1-side > li:before, .timeline-1-side > li:after { content: " "; display: table; } .timeline-1-side > li:after { clear: both; } .timeline-1-side > li > .timeline-panel { width: -webkit-calc(100% - 40px); width: calc(100% - 40px); float: right; border: 1px solid #d4d4d4; position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline-1-side .blog-feature-content{ border: none; } .timeline-1-side .timeline-panel .item-blog { margin-bottom: 0; } .timeline-1-side .timeline-panel .blog-feature-warp { border: 0; } .timeline-1-side .timeline-panel .blog-feature-content-inner { padding: 10px; } .timeline-1-side .timeline-panel .blog-video-popup { border: 0; } .timeline-1-side .timeline-panel .blog-video-popup .blog-feature-warp { width: 100%; } .timeline-1-side .timeline-panel .blog-video-popup .blog-feature-content { width: 100%; } .timeline-1-side .timeline-panel .blog-video-popup .blog-footer-2 { width: 100%; padding: 10px; min-height: 38px; background: #f2f2f2; font-size: 12px; border-top-width: 2px; border-top-style: solid; position: static; } .timeline-1-side .timeline-panel .blog-embed-video-feature { width: 100%; } .timeline-1-side .timeline-panel .overlay-btn-video { background: rgba(255, 255, 255, 0) url("images/Icon/btn-play.png") center center no-repeat; } .timeline-1-side > li > .timeline-panel:before { position: absolute; top: 26px; left: -15px; display: inline-block; border-top: 15px solid transparent; border-right: 15px solid #ccc; border-left: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; } .timeline-1-side > li > .timeline-panel:after { position: absolute; top: 27px; left: -14px; display: inline-block; border-top: 14px solid transparent; border-right: 14px solid #fff; border-left: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } .timeline-1-side > li > .blog-data { position: absolute; top: 0; left: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .timeline-1-side-body > ul { padding: 20px; margin-bottom: 0; } @media (max-width: 767px) { ul.timeline { padding-right: 15px; } ul.timeline:before { left: 40px; } ul.timeline > li { margin-bottom: 20px; position: relative; width: 100%; float: left; clear: left; } ul.timeline > li > .timeline-panel { width: -webkit-calc(100% - 80px); width: calc(100% - 80px); } ul.timeline > li.timeline-inverted > .blog-data { position: absolute; top: 0; right: auto; left: 0; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } ul.timeline > li > .blog-data { position: absolute; top: 0; right: auto; left: 0; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } ul.timeline > li > .timeline-panel { float: right; } ul.timeline > li > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } ul.timeline > li > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline > li.timeline-inverted { float: left; clear: left; margin-top: 30px; margin-bottom: 30px; } .team-item{ max-width: 400px; margin: 0 auto 30px; } .breadcrumb{ text-align: left; margin-top: 10px; } } /* ========================================================================== masonry layout ========================================================================== */ .masonry-warp-1 { width: 100%; overflow: hidden; } .main-page .full-masonry-layout .grid-item { width: -webkit-calc(50% - 15px); width: calc(50% - 15px); } .full-masonry-layout { width: -webkit-calc(100% + 15px); width: calc(100% + 15px); } .full-masonry-layout .item-blog { margin-bottom: 0; } .full-masonry-layout .grid-item, .full-masonry-layout .grid-sizer { width: -webkit-calc(18.3333%); width: calc(18.3333%); margin-bottom: 15px; } .full-masonry-layout .blog-video-popup .blog-feature-warp { width: 100%; } .full-masonry-layout .blog-video-popup .blog-feature-content { width: 100%; border-top: 1px solid #e5e6e6; } .full-masonry-layout .blog-video-popup .blog-footer-2 { width: 100%; padding: 10px; min-height: 38px; background: #f2f2f2; font-size: 12px; border-top-width: 2px; border-top-style: solid; position: static; } .full-masonry-layout .blog-embed-video-feature { width: 100%; } .full-masonry-layout .overlay-btn-video { background: rgba(255, 255, 255, 0) url("images/Icon/btn-play.png") center center no-repeat; } /* Backtotop ========================================================================== */ .fixbtt { display: none; position: fixed; text-align: center; right: 30px; bottom: 30px; color: #fff; cursor: pointer; -webkit-border-radius: 2px; border-radius: 2px; z-index: 10000; height: 40px; width: 40px; line-height: 40px; background-color: rgba(0, 0, 0, 0.4); background-repeat: no-repeat; background-position: center; -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } .fixbtt:hover { background-color: #73c026; color: #fff; } .center-btt { position: absolute!important; top: -35px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); color: #fff; -webkit-border-radius: 50%; border-radius: 50%; width: 70px!important; height: 70px!important; line-height: 95px!important; font-size: 25px; -webkit-border-radius: 50%!important; border-radius: 50%!important; text-align: center; cursor: pointer; } .center-btt:hover { color: #fff; } /* ========================================================================== Footer ========================================================================== */ footer { padding: 70px 0 50px; background: #222; background-size: cover; background-position: top center; background-repeat: no-repeat; background-attachment: fixed; } footer .widget h3 { color: #fff; margin-bottom: 30px; } .widget-footer { margin-bottom: 0; } .widget-footer-blog { display: inline-block; width: 100%; float: left; } .widget-footer-blog .ot-btn { float: left; } .useful-link { display: block; list-style: none; width: 100%; clear: both; } .useful-link li { display: block; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 12px 0; } .useful-link li:first-child{ padding-top: 0; } .useful-link li a { color: #999; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .useful-link li a:hover { color: #fff; } .useful-link li:last-child { border: 0; } .footer-v1 .text-about { margin-top: 14px; } .footer-v1 .ot-btn:hover { background: #fff; color: #444; } .footer-v1 .contact-f1 a { color: #999; -webkit-transition: all 0.3s; transition: all 0.3s; } .footer-v1 .contact-f1 a:hover { color: #fff; } .footer-v1 .contact-f1 img { width: 100%; max-width: 100%; margin-top: 25px; } .footer-v1 .contact-f2 { display: block; width: 100%; clear: both; margin-top: 12px; float: left; } .footer-v1 .contact-f2 ul { list-style: none; } .footer-v1 .contact-f2 ul li { display: inline-block; width: 100%; padding: 12px 0; color: #999; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer-v1 .contact-f2 ul li a { color: #999; -webkit-transition: slow; transition: slow; } .footer-v1 .contact-f2 ul li a:hover { color: #fff; } .footer-v1 .contact-f2 ul li i { color: #73c026; margin-right: 5px; } .footer-v1 .contact-f2 ul li:last-child { border: 0; } .logo-footer{ margin-bottom: 30px; } .footer-v2 .title-warp { display: block; width: 100%; margin-bottom: 35px; } .footer-v2 .flickr-warp { list-style: none; padding: 0; margin: 0; width: 100%; display: block; float: left; } .footer-v2 .flickr-warp img { display: inline-block; width: 75px; height: 75px; float: left; margin: 0px 5px 5px 0; } .footer-v3 { position: relative; overflow-y: hidden; } .footer-v3 .widget-footer-list-link { width: 25%; padding-right: 30px; display: inline-block; float: left; } .contact-f2 { clear: both; margin-top: 40px; } .contact-form-2 .form-control { height: 40px; -webkit-box-shadow: none; box-shadow: none; width: -webkit-calc(85%); width: calc(85%); background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); } .contact-form-2 .form-control:focus { background: #3a3a3a; color: #fff; } .contact-form-2 input ::-webkit-input-placeholder { color: #666; } .contact-form-2 input:-moz-placeholder { /* Firefox 18- */ color: #666; } .contact-form-2 input::-moz-placeholder { /* Firefox 19+ */ color: #666; } .contact-form-2 input:-ms-input-placeholder { color: #666; } .contact-form-2 .form-group { width: 50%; float: right; text-align: right; } .contact-form-2 .form-group:first-child { float: left; text-align: left; } .contact-form-2 textarea { width: 100%; background: transparent; -webkit-box-shadow: none; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.1); margin-top: 30px; padding: 6px 12px; resize: vertical; -webkit-border-radius: 3px; border-radius: 3px; } .contact-form-2 textarea:focus { background: #3a3a3a; color: #fff; } .contact-form-2 button { color: #fff; border: 0; font-family: 'Oswald', sans-serif; padding: 2px 20px; font-size: 16px; font-weight: 300; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 36px; outline: none!important; -webkit-transition: all 0.3s; transition: all 0.3s; float: right; margin-top: 30px; -webkit-border-radius: 3px; border-radius: 3px; } .contact-form-2 button i { font-size: 11px; display: inline-block; vertical-align: 3px; margin-right: 10px; } .contact-form-2 button:hover, .contact-form-2 button:focus { background: #fff!important; color: #444; } /* ========================================================================== Copyright ========================================================================== */ #copyright-1 { background: #1d1d1d; } .warp-copyright-1 { display: block; padding: 15px 0 10px 0; width: 100%; float: left; color: #c1c1c1; } ul.copyright-1 { float: left; list-style: none; text-transform: uppercase; } .copyright-1 li { display: inline-block; padding: 0 15px; position: relative; } .copyright-1 li a { color: #c1c1c1; font-family: 'Oswald', sans-serif; font-weight: 300; } .copyright-1 li a:hover { color: #fff; } .copyright-1 li:after { content: "|"; position: absolute; top: 0; right: 0; width: 1px; } .copyright-1 li:first-child { padding-left: 0; } .copyright-1 li:last-child:after { display: none; } .text-copyright-1 { float: right; margin-bottom: 0; font-size: 12px; } .text-copyright-1 a { color: #fff; } .warp-copyright-2 { border-top-width: 2px; border-top-style: solid; border-top-color: transparent; padding: 30px 0; display: block; float: left; width: 100%; } .text-copyright-2 { float: left; } .text-copyright-2 a { color: #fff; } /*Layer Slider*/ div.ls-overflow-visible{ overflow: hidden!important; } div.mm-page{ overflow: visible!important; } .text-block-2 { background-color: rgba(255, 255, 255, 0.12); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px; } .text-block-2 h4 { font-size: 36px; font-weight: 300; font-family: 'Oswald', sans-serif; color: #fff; margin-bottom: 15px; } .text-block-2 p { color: #eee; line-height: 1.6; white-space: normal; } .text-block-2 .ot-btn { padding-top: 10px; padding-bottom: 10px; -webkit-transition: background-color 0.3s !important; transition: background-color 0.3s !important; margin-top: 20px; } .text-block-2 a{ transition: none; } .typo-2{ color: #000; font-size: 15px; } .typo-2 i{ margin-right: 5px; } /* ========================================================================== Revolution Slider ========================================================================== */ .tparrows { width: 70px; height: 70px; } .tparrows::before { width: 32px; height: 32px; border: 2px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; line-height: 28px; margin-left: 17px; margin-top: 17px; font-weight: bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tp-leftarrow { -webkit-transform: matrix(1, 0, 0, 1, 0, -35) !important; -ms-transform: matrix(1, 0, 0, 1, 0, -35) !important; transform: matrix(1, 0, 0, 1, 0, -35) !important; } .tp-rightarrow { -webkit-transform: matrix(1, 0, 0, 1, -70, -35) !important; -ms-transform: matrix(1, 0, 0, 1, -70, -35) !important; transform: matrix(1, 0, 0, 1, -70, -35) !important; } /* ========================================================================== Animate.css ========================================================================== */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes rubberBand { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-100px); transform: translateX(-100px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(100px); transform: translateY(100px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-100px); transform: translateX(-100px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-100px); transform: translateX(-100px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(0.95); -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); -ms-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); -ms-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(48px); transform: scale(0.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); -ms-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(48px); -ms-transform: scale(0.475) translateX(48px); transform: scale(0.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(-48px); transform: scale(0.475) translateX(-48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); -ms-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(-48px); -ms-transform: scale(0.475) translateX(-48px); transform: scale(0.475) translateX(-48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); -ms-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); -ms-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-transform-origin: center bottom; transform-origin: center bottom; } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); -ms-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); -ms-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(42px); transform: scale(0.475) translateX(42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(42px); -ms-transform: scale(0.475) translateX(42px); transform: scale(0.475) translateX(42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); -ms-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(-42px); transform: scale(0.475) translateX(-42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(-42px); -ms-transform: scale(0.475) translateX(-42px); transform: scale(0.475) translateX(-42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); -ms-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-transform-origin: center top; transform-origin: center top; } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); -ms-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); -ms-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } .fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2; } @-webkit-keyframes fadeInUp2 { 0% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp2 { 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /*PRELOADER*/ .images-preloader { position: fixed; z-index: 999999999; background-color: #fff; width: 100%; height: 100%; } .preloader4 { width: 35px; height: 35px; display: inline-block; padding: 0px; -webkit-border-radius: 100%; border-radius: 100%; border: 3px solid; border-top-color: rgba(0,0,0,0.6); border-bottom-color: #73c026; border-left-color: #73c026; border-right-color: #73c026; -webkit-animation: preloader4 0.8s linear infinite; animation: preloader4 0.8s linear infinite; text-align: center; position: absolute; top: 50%; left: 50%; margin-left: -10px; margin-top: -10px; } @keyframes preloader4 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes preloader4 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } /* ========================================================================== Option Switch ========================================================================== */ .boxed { max-width: 1230px; width: 100%; margin: 0 auto; position: relative; -webkit-border-radius: 5px; border-radius: 5px; } .boxed:before { position: absolute; width: 100%; height: -webkit-calc(70%); height: calc(70%); -webkit-border-radius: 0.1px; border-radius: 0.1px; z-index: -1; bottom: 10px; content: ""; -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); display: block; } /* ========================================================================== Theme ========================================================================== */ .bg-theme { background: #73c026; } .bg-theme-callback { background: #73c026; } .color-theme { color: #73c026; } .border-color-theme { border-color: #73c026; } .bg-hover-theme:hover { background: #73c026; } .hover-text-theme:hover { color: #73c026; } .hover-border-theme:hover { border-color: #73c026; } .hover-text-dark:hover, .hover-text-dark:focus { color: #222; } .bg-sub { background: #222; } .bg-sub-theme-callback { background: #222; } .bg-sub-theme-callback:hover { background: #73c026; } /* Responsive ----------------------------------------------------------*/ /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width: 1229px) { body #page, body #page.ot-boxed{ margin: 0; } } @media only screen and (max-width: 1199px) { header, .header-v1, .header-v2, .header-v3 { padding-left: 15px; padding-right: 15px; } .topbar-1 .topbar-1-inner{ padding-left: 15px; padding-right: 15px; } .iconbox-set-2 { text-align: center; } .iconbox-set-2 .icon-1 { position: static; margin-bottom: 25px; } .iconbox-set-2 h4, .iconbox-set-2 p.sub-text { float: none; margin-left: 0; display: block; } .iconbox-set-2 .ot-btn { float: none; margin-left: 0; } .panel-group { margin-bottom: 30px; } .team-warp-page .team-item { margin: 15px 0; } .team-warp-page .team-item-img-container img { width: 100%; max-width: 100%; } .blog2-warp { height: 170px; overflow: hidden; } .twitter-widget-2 li { min-height: auto; } } /* Medium Devices, Desktops */ @media only screen and (max-width: 991px) { .btn-menu-mobile { display: inline-block; } header { position: relative; } .header-v1 .nav-r, .header-v1 ul.navi-right { display: none; } .header-v2 { position: relative; } .header-v2 .topbar-info{ margin-right: 30px; } .header-v2 .social { display: none; } .navi-warp-h2 { display: none; } .header-v3 { height: 80px; } .header-v3 .navi-right, .header-v3 .nav-r, .header-v3 .social-3, .header-v3 .topbar-info, .header-v3 .div18 { display: none; } .subnavi{ display: none; } .topbar-info-1{ float: left; } .topbar-info-1 li{ margin-left: 0; margin-right: 20px; } .iconbox { margin-bottom: 15px; } .discover { margin-bottom: 30px; } .blog2-item { display: inline-block; width: 100%; clear: both; } .blog2-item .blog2-detail { display: inline-block; float: right; padding-left: 15px; width: -webkit-calc(100% - 100px); width: calc(100% - 100px); } .main-page { width: 100%; margin-bottom: 25px; } .sidebar-page { width: 100%; } .owl-blog { float: none; margin-bottom: 40px; } .img-tab-demo { margin: 25px auto; margin-top: 10px; display: block; } .tab1 { clear: both; } .reward-item { height: auto; min-height: auto; } .demo-skill { display: none; } .icon-box.effect { text-align: center; } .icon-box.effect h3, .icon-box.effect p, .icon-box.effect span { margin-left: 0; } .icon-box.small .icon { position: static; margin: 50px auto; margin-bottom: 5px; padding: 0; } .about-single-team { margin-top: 30px; } .widget-footer-blog { float: none; } .widget-footer { clear: both; margin-bottom: 30px; } .widget-footer .social-f1 { float: none; display: inline-block; width: 100%; } .widget-footer .contact-f1 img { max-width: 200px; margin: 30px 0; display: block; } .blog2-warp { height: 220px; overflow: hidden; } } /* Small Devices, Tablets */ @media only screen and (max-width: 767px) { .topbar-1, .topbar-1 .topbar-1-inner{ height: auto; } .topbar-1 .social-1, .topbar-1 .topbar-info { float: none; margin-left: 0; } .header-v2 .topbar-info-2{ display: none; } .sub-header-warp { padding: 0 15px; } .header-iconbox { padding-left: 15px; padding-right: 15px; } /* Slider 1 */ .slider1 p { display: none; } .slider1 .ls-nav-prev, .slider1 .ls-nav-next { display: none !important; } .slider2 h3, .slider2 p { display: none; } .slider2 .ls-nav-prev, .slider2 .ls-nav-next { display: none !important; } .slider3 p { display: none; } .slider3 h4 { font-size: 28px; } .slider3 .ot-btn { margin-top: 0; } .slider5 p { display: none; } .twitter1-warp { width: -webkit-calc(100% - 45px); width: calc(100% - 45px); height: 110px; } .panel-group { clear: both; } .panel-group .panel { border: 1px solid #ddd; } .testimonial-3-warp { display: inline-block; width: 100%; } .call1 h3 { padding: 0; } .call1 .ot-btn { position: static; margin-top: 25px; -webkit-transform: none; -ms-transform: none; transform: none; } .call1 p { padding-right: 0px; } .call2 h3, .call2 p { padding-right: 0; } .call2 .ot-btn { position: static; -webkit-transform: none; -ms-transform: none; transform: none; margin-top: 25px; } .call3 { padding: 0 15px; } .group-call-btn .ot-btn { margin-bottom: 25px; } .list-portfolio-warp { width: 100%; margin-left: 0; } .portfolio-3-col .element-item { width: 50%; } .portfolio-4-col .element-item { width: 50%; } .filter-portfolio-warp { padding: 0 15px; } .portfolio-feature-content .porfolio-info-col { width: 100%; margin-bottom: 25px; } .subcribe1 { margin-top: 25px; } .subcribe1 .form-group { width: 100%; } .bg-overlay-img-1 { background-position: 0 0!important; -webkit-background-size: auto 100%!important; background-size: auto 100%!important; } .blog-video-popup .blog-feature-warp { width: 100%; } .img-tab-demo { margin: 25px auto; margin-top: 10px; display: block; } .discover ul.feature li { width: 100%; } .blog-footer-2 { height: auto; min-height: auto; display: inline-block; } .blog-video-popup .blog-feature-content { width: 100%; } .blog-video-popup .blog-footer-2 { width: 100%; } /* page service ========================================================================== */ .main-services-warp, .heading-services { padding: 0 15px; } .hero-wrap-404 .heading-404 { font-size: 32px; line-height: 40px; } .search404 .form-group { width: 100%; } .search404 .form-control { margin-left: 5%; width: 90%; } .pricing-tables-group-item { width: 50%!important; } .product-item { width: 50%; float: left; } .left-header-shop { width: 100%; margin-bottom: 25px; } .order-select { width: 50%; padding-left: 0; } .order-select { padding-right: 15px; } .right-checkout, .left-checkout { width: 100%; margin-bottom: 25px; } .form-coupon-input { display: inline-block; } .review-product, .additional-product { margin-bottom: 25px; width: 100%; padding: 0 15px; } /*Group Logo*/ .logo-group-item { width: 50%; } .logo-group-item:nth-child(2n+2) { border-right-color: transparent; } .logo-group-item:nth-child(5), .logo-group-item:nth-child(6) { border-bottom: 1px solid #e5e5e5; } .portfolio-feature-content .col-description ul.social-share { float: none; display: block; width: 100%; } .portfolio-feature-content .col-description .ot-btn { clear: both; } .full-masonry-layout { width: 100%; } .main-page .full-masonry-layout .grid-item { width: 100%; } .full-masonry-layout .grid-item, .full-masonry-layout .grid-sizer { width: 100%; } .left-form-comment, .right-form-comment { width: 100%; padding: 0; } .right-form-comment { margin-bottom: 25px; } ul.copyright-1 { display: none; } .text-copyright-1 { text-align: center; float: none; } .desk-no-padding-left { padding-left: 15px; } .footer-v3 .widget-footer-list-link { width: 100%; margin-bottom: 15px; } } /*Custom*/ @media only screen and (max-width: 561px) { .blog-footer { position: static; } } /* Extra Small Devices, Phones */ @media only screen and (max-width: 479px) { /* Reset */ /* LAYOUT */ .product { width: 100%; } .order-select { width: 100%; padding-left: 0; margin-bottom: 15px; } .order-select { padding-right: 0; } .discover2 ul.feature li { width: 100%; } .discover ul.feature { width: 100%; margin-top: 25px; } .discover { margin-bottom: 30px; } .discover img { margin: 10px auto; float: none; display: block; } .img-demo-blog, .blog-sum-warp { width: 100%; height: auto; } .twitter-logo-fix { width: 25px; height: 25px; -webkit-border-radius: 50%; border-radius: 50%; border-width: 1px; border-style: solid; border-color: #73c026; display: inline-block; float: left; line-height: 25px; text-align: center; font-size: 15px; } .twitter1-warp { padding-left: 30px; } .twitter-widget-1 ul li .tweets_txt { font-size: 13px; } .twitter-widget-1 ul li .tweets_txt li, .twitter-widget-1 ul li .tweets_txt a, .twitter-widget-1 ul li .tweets_txt p { font-size: 13px; } .iconbox-set-2 .icon-1 { position: static; } .iconbox-set-2 h4, .iconbox-set-2 .ot-btn, .iconbox-set-2 p.sub-text { margin-left: 0; text-align: center; float: none; display: block; } .iconbox-set-2 h4 { margin-top: 15px; } .countdown li { width: 80%; margin: 10px auto; float: none; } .hero-wrap-cms .heading-cms { font-size: 32px; } .bgcms, .overlay-cms { height: 100%; } .hero-wrap-cms { position: relative; -webkit-transform: none; -ms-transform: none; transform: none; } .portfolio-3-col .element-item { width: 100%; } .portfolio-4-col .element-item { width: 100%; } .pricing-tables-group-item { width: 100%!important; } .header-comment .ot-btn { position: static; margin: 15px; -webkit-transform: none; -ms-transform: none; transform: none; } .social-fr { display: none; } .text-copyright-2 { float: none; text-align: center; } } /* Smallest Devices, Phones */ @media only screen and (max-width: 319px) { /* Slider */ .slider-home-2 .heading-1 { font-size: 20px!important; } .slider-home-2 .heading-2 { font-size: 13px!important; } .slider-home-3 .heading-3 { font-size: 13px!important; } .slider-home-3 .heading-4 { font-size: 20px!important; } /* Footer Navi */ .footer-v1 nav ul li a::after { display: none; } } .container .container{ width: 100%; } div .wpb_button, div .wpb_content_element, div ul.wpb_thumbnails-fluid>li{ margin-bottom: 0; } .w100 .row{ margin: 0; } /*Accrodion*/ div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel.vc_active .vc_tta-panel-heading, div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-heading, div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-heading:focus, div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-heading:hover, div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-body, div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab>a, div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab.vc_active>a, div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab>a:focus, div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab>a:hover, div.vc_tta-color-grey.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels .vc_tta-panel-body{ background: #fff; } div.vc_tta.vc_general .vc_tta-panel-title > a{ font-size: 16px; line-height: 1.4; } div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-title>a{ color: #444; } div.vc_tta-color-grey.vc_tta-accordion .vc_tta-panel .vc_tta-panel-heading, div.vc_tta-color-grey.vc_tta-accordion .vc_tta-panel .vc_tta-panel-body{ border-left: 3px solid #444; } div.vc_tta-color-grey.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading, div.vc_tta-color-grey.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-body{ border-left: 3px solid #73c026; } div.vc_tta-color-grey.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels .vc_tta-panel-body, div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab>a{ border-color: #f0f0f0!important; } div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab{ border-top: 3px solid #444; } div.ot-tab.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab{ width: calc( 100% / 3 ); } div.ot-tab.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab:last-child{ border-right: 1px solid; } div.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab.vc_active{ border-top: 3px solid #73c026; } div.ot-tab.vc_tta.vc_tta-style-classic .vc_tta-tabs-list{ margin-right: -5px; } div.vc_tta-container{ margin-bottom: 0; } .vc_tta-tab .vc_tta-title-text{ font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 18px; } .wpb_layerslider_element { overflow: hidden; } section.vc_row{ margin: 0; } .wpb_row.vc_row-o-equal-height .vc_column_container { display: flex; } .wpb_row.vc_row-o-equal-height .row { box-sizing: border-box; display: flex; flex-wrap: wrap; } .wpb_row.vc_row-o-equal-height .vc_column_container { -moz-box-align: stretch; align-items: stretch; } .wpb_row.vc_row-o-content-middle .vc_column_container .vc_column-inner { -moz-box-pack: center; justify-content: center; } .wpb_row.vc_row-flex .vc_column_container .vc_column-inner { -moz-box-flex: 1; display: flex; flex-direction: column; flex-grow: 1; } .wpb_row.vc_row-o-content-bottom .vc_column_container .vc_column-inner { -moz-box-pack: end; justify-content: flex-end; } .wpb_row.vc_row-o-content-top .vc_column_container .vc_column-inner { -moz-box-pack: start; justify-content: flex-start; }
Editor is loading...