/* * Appiya - App Landing Page * Build Date: December 2022 * Last Update: December 2022 * Author: ThemeAtelier * Author URL: http://www.themeatelier.net * Copyright (C) 2022 ThemeAtelier * EXCLUSIVE ON themeforest.net */ /* TABLE OF CONTENTS 1. IMPORT GOOGLE FONTS 2. THEMEING 3. GENERAL 4. ANIMATIONS 5. PRELOADER 6. HEADER NAV 7. HERO SECTION 8. SERVICES SECTION 9. PREFACE SECTION 10. HOW IT WORKS SECTION 11. APP FEATURES SECTION 12. TESTIMONIALS SECTION 13. SCREENSHOTS SECTION 14. PRICING TABLE SECTION 15. FEATURES SECTION 16. LATEST BLOG SECTION 17. CONTACT SECTION 18. FOOTER SECTION 19. BLOG PAGES 20. MARGINS 21. PADDINGS 22. RESPONSIVE */ /* ---------------------------------------------------- 1. IMPORT GOOGLE FONTS -------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"); @import url("https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700"); /* ---------------------------------------------------- 2. THEMEING -------------------------------------------------------- */ .gredient-bg, .btn-filled, .btn-default:hover, .circle, .loader:before, .hero-area, .bordered-circle, .bordered-circle2, .bordered-box, .filled-circle, .testimonials, .screenshot-swiper .swiper-button-prev:hover, .screenshot-swiper .swiper-container-rtl .swiper-button-next:hover, .screenshot-swiper .swiper-button-next:hover, .screenshot-swiper .swiper-container-rtl .swiper-button-prev:hover, .swiper-pagination-bullet-active, .single-pricing:before, .pricing-head .wave, .pricing-head .wave:nth-of-type(3), .featured-2, .read-more, .social-network .social-icon:hover, #page-header, .blog-tag a, .app-pagenation .page-item.active .page-link, .single-widget ul.tags-cloud li a:hover, a.comment-reply-link:hover { background: -webkit-linear-gradient(to right bottom, #FFBD59, #E89F30); /* Webkit browsers */ background: -moz-linear-gradient(to right bottom, #FFBD59, #E89F30); /* Firefox(old) */ background: -o-linear-gradient(to right bottom, #FFBD59, #E89F30); /* Opera(old) */ background: -ms-linear-gradient(to right bottom, #FFBD59 40%, #E89F30 70%); /* IE10 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, start-colorstr=#FFBD59, end-colorstr=#E89F30); /* IE9 */ ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, start-colorstr=#FFBD59, end-colorstr=#E89F30)"; /* IE8 */ background: linear-gradient(to right bottom, #FFBD59 40%, #E89F30 70%); /* W3C */ background-color: #E89F30; } .gredient-bg-hover, .animated-btn:before, .read-more:before, .loader:after, .read-more:hover { background: -webkit-linear-gradient(to right bottom, #E89F30, #FFBD59); /* Webkit browsers */ background: -moz-linear-gradient(to right bottom, #E89F30, #FFBD59); /* Firefox(old) */ background: -o-linear-gradient(to right bottom, #E89F30, #FFBD59); /* Opera(old) */ background: -ms-linear-gradient(to right bottom, #E89F30 40%, #FFBD59 70%); /* IE10 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, start-colorstr=#E89F30, end-colorstr=#FFBD59); /* IE9 */ ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, start-colorstr=#E89F30, end-colorstr=#FFBD59)"; /* IE8 */ background: linear-gradient(to right bottom, #E89F30 40%, #FFBD59 70%); /* W3C */ background-color: #FFBD59; } .gredient-color, .service-box:hover i, .how-it-box:hover i, .address-box:hover i, .single-feature:hover i, .how_works_arrow, .how-it-box i, .address-box i, .single-feature:hover h4 { background: -webkit-linear-gradient(to right bottom, #FFBD59, #E89F30); /* Webkit browsers */ background: -moz-linear-gradient(to right bottom, #FFBD59, #E89F30); /* Firefox(old) */ background: -o-linear-gradient(to right bottom, #FFBD59, #E89F30); /* Opera(old) */ background: -ms-linear-gradient(to right bottom, #FFBD59 40%, #E89F30 70%); /* IE10 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, start-colorstr=#FFBD59, end-colorstr=#E89F30); /* IE9 */ ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, start-colorstr=#FFBD59, end-colorstr=#E89F30)"; /* IE8 */ background: linear-gradient(to right bottom, #FFBD59 40%, #E89F30 70%); /* W3C */ -webkit-background-clip: text; background-clip: text; /* Firefox 4.0, IE9+, Opera 10.5+, Chrome, Safari 3.0+ */ -webkit-text-fill-color: transparent; text-fill-color: transparent; /* Firefox 4.0, IE9+, Opera 10.5+, Chrome, Safari 3.0+ */ color: #E89F30; } .border-color { background: -webkit-linear-gradient(to right bottom, #FFBD59, #E89F30); /* Webkit browsers */ background: -moz-linear-gradient(to right bottom, #FFBD59, #E89F30); /* Firefox(old) */ background: -o-linear-gradient(to right bottom, #FFBD59, #E89F30); /* Opera(old) */ background: -ms-linear-gradient(to right bottom, #FFBD59 40%, #E89F30 70%); /* IE10 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, start-colorstr=#FFBD59, end-colorstr=#E89F30); /* IE9 */ ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, start-colorstr=#FFBD59, end-colorstr=#E89F30)"; /* IE8 */ background: linear-gradient(to right bottom, #FFBD59 40%, #E89F30 70%); /* W3C */ background-color: #E89F30; } .dark-purple-color, #testimonials .rotate-heading h2, .single-blog h2:hover, .page-content h2:hover, .post-comments h2:hover, .post-meta ul li a:hover, .single-widget ul a:hover { color: #E89F30; } .medium-purple-color, a:hover { color: #FFBD59; } .border-color { color: #dfdfdf; } .dark-purple, .header-nav .navbar-nav > li .sub-menu li > a:hover, .header-nav.fixed-header { background: #E89F30; } .medium-purple { background: #FFBD59; } .primary_color, body, .post-meta ul li a { color: #858585; } .heading_color, h1, h2, h3, h4, h5, h6, .btn-default, .header-nav .navbar-nav > li .sub-menu li > a, .screenshot-swiper .swiper-button-prev, .screenshot-swiper .swiper-container-rtl .swiper-button-next, .screenshot-swiper .swiper-button-next, .screenshot-swiper .swiper-container-rtl .swiper-button-prev, .blog-content h2, .blog-content .blog-meta, .single-blog-post { color: #151515; } .primary-border-color, .screenshot-swiper .swiper-button-prev, .screenshot-swiper .swiper-container-rtl .swiper-button-next, .screenshot-swiper .swiper-button-next, .screenshot-swiper .swiper-container-rtl .swiper-button-prev, .contact-form input:focus, .contact-form textarea:focus, .single-widget h3, .single-widget .form-control:focus { border-color: #E89F30 !important; } .gray-bg, .contact-address, .contact-form { background-color: #f1f1f1; } .body_font, body { font-family: "Quicksand", sans-serif; } .heading_font, h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; } /* ---------------------------------------------------- 3. GENERAL -------------------------------------------------------- */ /* アイコン色のオレンジゴールド化 */ [class*=" icofont-"], [class^="icofont-"] { color: #FFBD59 !important; } /* リンク色のオレンジゴールド化 */ a { color: #FFBD59 !important; text-decoration: none; } a:hover, a:focus { color: #E89F30 !important; text-decoration: none; } /* コンテンツ内のリンクのみ下線を追加 */ .content a:not(.btn):not(.nav-link), article a:not(.btn):not(.nav-link), .single-blog a:not(.btn):not(.nav-link), .page-content a:not(.btn):not(.nav-link), .post-content a:not(.btn):not(.nav-link), p a:not(.btn):not(.nav-link) { text-decoration: underline; } /* ナビゲーションリンクの特別スタイル */ .navbar-brand, .nav-link { text-decoration: none !important; } .navbar-brand:hover, .nav-link:hover { text-decoration: none !important; } /* 背景色のオレンジゴールド化 */ .solution-section, .value-proposition-section { background: linear-gradient(135deg, #FFCE7F 0%, #FFBD59 50%, #E89F30 100%) !important; } /* 紫色の背景画像を上書き */ [style*="background-image"] { position: relative; } [style*="background-image"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,189,89,0.85) 0%, rgba(232,159,48,0.85) 100%); pointer-events: none; } /* Bootstrapクラスのオレンジゴールド化 */ .text-primary { color: #FFBD59 !important; } .text-secondary { color: #FFA668 !important; } .text-success { color: #FFBD59 !important; } .text-info { color: #FFCE7F !important; } .text-warning { color: #E89F30 !important; } .text-danger { color: #E66F28 !important; } .text-muted { color: #9B7E5C !important; } .lead { font-size: 1.25rem; font-weight: 300; } .lead.text-primary { color: #FFBD59 !important; } .alert-primary { background: linear-gradient(135deg, rgba(255, 189, 89, 0.08) 0%, rgba(255, 206, 127, 0.08) 100%) !important; border: 1px solid rgba(255, 189, 89, 0.2) !important; color: #E89F30 !important; border-radius: 16px !important; box-shadow: 0 2px 12px rgba(255, 189, 89, 0.08) !important; position: relative; padding: 24px 30px !important; backdrop-filter: blur(10px); } .alert-primary .alert-heading { color: #E89F30 !important; font-weight: 600 !important; margin-bottom: 8px; font-size: 1.2rem !important; letter-spacing: -0.02em; } /* コンテンツ内のリスト要素のスタイリング（ナビゲーション、パンくずリスト等は除外） */ .content ul:not(.breadcrumb):not(.pagination), .content ol:not(.breadcrumb), article ul:not(.breadcrumb):not(.pagination), article ol:not(.breadcrumb), .single-blog ul:not(.breadcrumb):not(.pagination), .single-blog ol:not(.breadcrumb), .page-content ul:not(.breadcrumb):not(.pagination), .page-content ol:not(.breadcrumb), .post-content ul:not(.breadcrumb):not(.pagination), .post-content ol:not(.breadcrumb), section ul:not(.navbar-nav):not(.social-icon):not(.tags-cloud):not(.breadcrumb):not(.pagination):not(.list-unstyled), section ol:not(.breadcrumb) { padding: 0; position: relative; margin: 20px 0; } .content ul:not(.breadcrumb):not(.pagination) li, .content ol:not(.breadcrumb) li, article ul:not(.breadcrumb):not(.pagination) li, article ol:not(.breadcrumb) li, .single-blog ul:not(.breadcrumb):not(.pagination) li, .single-blog ol:not(.breadcrumb) li, .page-content ul:not(.breadcrumb):not(.pagination) li, .page-content ol:not(.breadcrumb) li, .post-content ul:not(.breadcrumb):not(.pagination) li, .post-content ol:not(.breadcrumb) li, section ul:not(.navbar-nav):not(.social-icon):not(.tags-cloud):not(.breadcrumb):not(.pagination):not(.list-unstyled) li, section ol:not(.breadcrumb) li { color: #333; border-left: solid 3px #FFBD59; background: linear-gradient(90deg, rgba(255, 189, 89, 0.05) 0%, rgba(255, 189, 89, 0) 100%); margin-bottom: 8px; line-height: 1.8; border-radius: 0 12px 12px 0; padding: 12px 20px; list-style-type: none !important; transition: all 0.3s ease; position: relative; } .content ul:not(.breadcrumb):not(.pagination) li:hover, .content ol:not(.breadcrumb) li:hover, article ul:not(.breadcrumb):not(.pagination) li:hover, article ol:not(.breadcrumb) li:hover, .single-blog ul:not(.breadcrumb):not(.pagination) li:hover, .single-blog ol:not(.breadcrumb) li:hover, .page-content ul:not(.breadcrumb):not(.pagination) li:hover, .page-content ol:not(.breadcrumb) li:hover, .post-content ul:not(.breadcrumb):not(.pagination) li:hover, .post-content ol:not(.breadcrumb) li:hover, section ul:not(.navbar-nav):not(.social-icon):not(.tags-cloud):not(.breadcrumb):not(.pagination):not(.list-unstyled) li:hover, section ol:not(.breadcrumb) li:hover { background: linear-gradient(90deg, rgba(255, 189, 89, 0.1) 0%, rgba(255, 189, 89, 0) 100%); border-left-color: #E89F30; transform: translateX(4px); } /* ボタンスタイルの改善 */ .btn-filled, .btn-default.btn-filled { background: linear-gradient(135deg, #FFBD59 0%, #E89F30 100%) !important; color: #FFFFFF !important; border: none !important; font-weight: 600 !important; letter-spacing: 0.02em; box-shadow: 0 4px 15px rgba(255, 189, 89, 0.3) !important; transition: all 0.3s ease !important; } .btn-filled:hover, .btn-default.btn-filled:hover { background: linear-gradient(135deg, #E89F30 0%, #E66F28 100%) !important; color: #FFFFFF !important; box-shadow: 0 6px 20px rgba(232, 159, 48, 0.4) !important; transform: translateY(-2px); } /* ヒーローエリアのボタン特別スタイル */ .hero-area .btn-filled, .hero-area .btn-default { padding: 15px 35px !important; font-size: 1.1rem !important; } /* サービスカードのスタイル改善 */ .service-card { border: 1px solid rgba(255, 189, 89, 0.2) !important; border-radius: 16px !important; overflow: hidden; transition: all 0.3s ease; border-left: none !important; } .service-card:hover { box-shadow: 0 8px 30px rgba(255, 189, 89, 0.15) !important; transform: translateY(-4px); } /* サービスカードのアイコンスタイル */ .service-card i, .service-icon i, .card i[class*="icofont"] { background: linear-gradient(135deg, #FFBD59, #E89F30); color: #FFFFFF !important; padding: 20px; border-radius: 12px; font-size: 2rem; display: inline-block; margin-bottom: 20px; } /* カード内の緑や青のボーダーを削除 */ .card.border-success, .card.border-primary, .card.border-info { border-color: rgba(255, 189, 89, 0.2) !important; border-left: none !important; } .border-left-success, .border-left-primary, .border-left-info, .border-start-success, .border-start-primary { border-left: none !important; } /* その他のBootstrapカラークラス */ .bg-primary { background-color: #FFBD59 !important; } .border-primary { border-color: #FFBD59 !important; } .btn-primary { background-color: #FFBD59 !important; border-color: #FFBD59 !important; color: #FFFFFF !important; } .btn-primary:hover { background-color: #E89F30 !important; border-color: #E89F30 !important; color: #FFFFFF !important; } /* h1からh6要素の色確認 */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #151515; } h1.text-primary, h2.text-primary, h3.text-primary, h4.text-primary, h5.text-primary, h6.text-primary, .h1.text-primary, .h2.text-primary, .h3.text-primary, .h4.text-primary, .h5.text-primary, .h6.text-primary { color: #FFBD59 !important; } body { font-size: 16px; font-weight: 400; line-height: 1.7; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } a:hover { text-decoration: none; } a:focus, a:active { outline: none; } .btn.focus, .btn:focus { -webkit-box-shadow: none; /* Webkit browsers */ -moz-box-shadow: none; /* Firefox */ -ms-box-shadow: none; /* IE9 */ -o-box-shadow: none; /* Opera(Old) */ box-shadow: none; /* IE9+, News */ } .section-title h2 { font-size: 42px; } h1 { font-size: 34px; } h2 { font-size: 30px; } h3 { font-size: 26px; } h4 { font-size: 22px; } h5 { font-size: 20px; } h6 { font-size: 22px; } img { max-width: 100%; height: auto; } .section-title h2 { text-transform: uppercase; } .bg-overlay .section-title h2 { color: #ffffff; } /* BACKGROUNDS */ .parallax { background-attachment: fixed; background-repeat: no-repeat; -webkit-background-size: cover; /* Chrome, iOS, Safari */ -moz-background-size: cover; /* Firefox 3.6~4.0 */ -o-background-size: cover; /* Opera 9.5 */ background-size: cover; /* IE9+, New */ } .bg-overlay { position: relative; } .bg-overlay:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(21, 21, 21, 0.8); } /* BUTTTONS */ .btn-default { padding: 15px 25px; border: 1px solid #ffffff; background-color: #ffffff; font-weight: 700; overflow: hidden; border-radius: 0px; } .btn-filled { color: #ffffff !important; border-color: transparent; } .btn-default.btn-default-outline { background-color: transparent; color: #ffffff; } .btn-default:hover { color: #ffffff; } .animated-btn:before, .read-more:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0); transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: transform 0.5s, background-color 0.5s; /* Safari, Chrome */ -moz-transition: transform 0.5s, background-color 0.5s; /* Firefox 4.0~16.0 */ transition: transform 0.5s, background-color 0.5s; /* IE >9, FF >15, Opera >12.0 */ } .animated-btn:hover:before, .read-more:hover:before { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ -webkit-transform: rotate3d(0, 0, 1, 0deg); /* Safari, Chrome */ -moz-transform: rotate3d(0, 0, 1, 0deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate3d(0, 0, 1, 0deg); /* IE9~10 */ -o-transform: rotate3d(0, 0, 1, 0deg); /* Opera 10.5~12.10 */ transform: rotate3d(0, 0, 1, 0deg); -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); -moz-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); /* Firefox 4.0~16.0 */ transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .animated-btn, .read-more { -webkit-transition: 0.4s; /* Safari, Chrome */ -moz-transition: 0.4s; /* Firefox 4.0~16.0 */ transition: 0.4s; /* IE >9, FF >15, Opera >12.0 */ } .animated-btn:hover, .read-more:hover { -webkit-transform: translateY(-3px); /* Safari, Chrome */ -moz-transform: translateY(-3px); /* Firefox 3.5~16.0 */ -ms-transform: translateY(-3px); /* IE9~10 */ -o-transform: translateY(-3px); /* Opera 10.5~12.10 */ transform: translateY(-3px); -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Webkit browsers */ -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Firefox */ -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* IE9 */ -o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Opera(Old) */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .animated-btn:active, .read-more:active { -webkit-transform: translateY(-1px); /* Safari, Chrome */ -moz-transform: translateY(-1px); /* Firefox 3.5~16.0 */ -ms-transform: translateY(-1px); /* IE9~10 */ -o-transform: translateY(-1px); /* Opera 10.5~12.10 */ transform: translateY(-1px); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Webkit browsers */ -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Firefox */ -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* IE9 */ -o-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Opera(Old) */ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .read-more { overflow: hidden; border: none; } /* Circle animation */ .circle-wrap { overflow: hidden; position: relative; } .circle { width: 70px; height: 70px; position: absolute; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .x1 { -webkit-animation: movecircles 15s linear infinite; -moz-animation: movecircles 15s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 15s linear infinite; /* IE10+ */ top: 150px; } .x2 { left: 200px; top: 200px; -webkit-transform: scale(0.6); /* Safari, Chrome */ -moz-transform: scale(0.6); /* Firefox 3.5~16.0 */ -ms-transform: scale(0.6); /* IE9~10 */ -o-transform: scale(0.6); /* Opera 10.5~12.10 */ transform: scale(0.6); -webkit-animation: movecircles 25s linear infinite; -moz-animation: movecircles 25s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 25s linear infinite; /* IE10+ */ } .x3 { left: -250px; top: 250px; -webkit-transform: scale(0.8); /* Safari, Chrome */ -moz-transform: scale(0.8); /* Firefox 3.5~16.0 */ -ms-transform: scale(0.8); /* IE9~10 */ -o-transform: scale(0.8); /* Opera 10.5~12.10 */ transform: scale(0.8); -webkit-animation: movecircles 20s linear infinite; -moz-animation: movecircles 20s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 20s linear infinite; /* IE10+ */ } .x4 { left: 470px; top: 300px; -webkit-transform: scale(0.75); /* Safari, Chrome */ -moz-transform: scale(0.75); /* Firefox 3.5~16.0 */ -ms-transform: scale(0.75); /* IE9~10 */ -o-transform: scale(0.75); /* Opera 10.5~12.10 */ transform: scale(0.75); -webkit-animation: movecircles 18s linear infinite; -moz-animation: movecircles 18s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 18s linear infinite; /* IE10+ */ } .x5 { left: -150px; top: 100px; -webkit-transform: scale(0.8); /* Safari, Chrome */ -moz-transform: scale(0.8); /* Firefox 3.5~16.0 */ -ms-transform: scale(0.8); /* IE9~10 */ -o-transform: scale(0.8); /* Opera 10.5~12.10 */ transform: scale(0.8); -webkit-animation: movecircles 20s linear infinite; -moz-animation: movecircles 20s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 20s linear infinite; /* IE10+ */ } .x6 { -webkit-animation: movecircles 15s linear infinite; -moz-animation: movecircles 15s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 15s linear infinite; /* IE10+ */ bottom: 150px; } .x7 { left: 200px; bottom: 200px; -webkit-transform: scale(0.6); /* Safari, Chrome */ -moz-transform: scale(0.6); /* Firefox 3.5~16.0 */ -ms-transform: scale(0.6); /* IE9~10 */ -o-transform: scale(0.6); /* Opera 10.5~12.10 */ transform: scale(0.6); -webkit-animation: movecircles 25s linear infinite; -moz-animation: movecircles 25s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 25s linear infinite; /* IE10+ */ } .x8 { left: -250px; bottom: 250px; -webkit-transform: scale(0.8); /* Safari, Chrome */ -moz-transform: scale(0.8); /* Firefox 3.5~16.0 */ -ms-transform: scale(0.8); /* IE9~10 */ -o-transform: scale(0.8); /* Opera 10.5~12.10 */ transform: scale(0.8); -webkit-animation: movecircles 20s linear infinite; -moz-animation: movecircles 20s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 20s linear infinite; /* IE10+ */ } .x9 { left: 470px; bottom: 300px; -webkit-transform: scale(0.75); /* Safari, Chrome */ -moz-transform: scale(0.75); /* Firefox 3.5~16.0 */ -ms-transform: scale(0.75); /* IE9~10 */ -o-transform: scale(0.75); /* Opera 10.5~12.10 */ transform: scale(0.75); -webkit-animation: movecircles 18s linear infinite; -moz-animation: movecircles 18s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 18s linear infinite; /* IE10+ */ } .x10 { left: -150px; bottom: 100px; -webkit-transform: scale(0.8); /* Safari, Chrome */ -moz-transform: scale(0.8); /* Firefox 3.5~16.0 */ -ms-transform: scale(0.8); /* IE9~10 */ -o-transform: scale(0.8); /* Opera 10.5~12.10 */ transform: scale(0.8); -webkit-animation: movecircles 20s linear infinite; -moz-animation: movecircles 20s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 20s linear infinite; /* IE10+ */ } /* ---------------------------------------------------- 4. ANIMATIONS -------------------------------------------------------- */ /* moveInLeft Animation */ @-webkit-keyframes moveInLeft { 0% { opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-transform: translateX(-50px); /* Safari, Chrome */ -moz-transform: translateX(-50px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(-50px); /* IE9~10 */ -o-transform: translateX(-50px); /* Opera 10.5~12.10 */ transform: translateX(-50px); } 80% { -webkit-transform: translateX(10px); /* Safari, Chrome */ -moz-transform: translateX(10px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(10px); /* IE9~10 */ -o-transform: translateX(10px); /* Opera 10.5~12.10 */ transform: translateX(10px); } 100% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ -webkit-transform: translate(0); /* Safari, Chrome */ -moz-transform: translate(0); /* Firefox 3.5~16.0 */ -ms-transform: translate(0); /* IE9~10 */ -o-transform: translate(0); /* Opera 10.5~12.10 */ transform: translate(0); } } @-moz-keyframes moveInLeft { 0% { opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-transform: translateX(-50px); /* Safari, Chrome */ -moz-transform: translateX(-50px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(-50px); /* IE9~10 */ -o-transform: translateX(-50px); /* Opera 10.5~12.10 */ transform: translateX(-50px); } 80% { -webkit-transform: translateX(10px); /* Safari, Chrome */ -moz-transform: translateX(10px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(10px); /* IE9~10 */ -o-transform: translateX(10px); /* Opera 10.5~12.10 */ transform: translateX(10px); } 100% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ -webkit-transform: translate(0); /* Safari, Chrome */ -moz-transform: translate(0); /* Firefox 3.5~16.0 */ -ms-transform: translate(0); /* IE9~10 */ -o-transform: translate(0); /* Opera 10.5~12.10 */ transform: translate(0); } } @keyframes moveInLeft { 0% { opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-transform: translateX(-50px); /* Safari, Chrome */ -moz-transform: translateX(-50px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(-50px); /* IE9~10 */ -o-transform: translateX(-50px); /* Opera 10.5~12.10 */ transform: translateX(-50px); } 80% { -webkit-transform: translateX(10px); /* Safari, Chrome */ -moz-transform: translateX(10px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(10px); /* IE9~10 */ -o-transform: translateX(10px); /* Opera 10.5~12.10 */ transform: translateX(10px); } 100% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ -webkit-transform: translate(0); /* Safari, Chrome */ -moz-transform: translate(0); /* Firefox 3.5~16.0 */ -ms-transform: translate(0); /* IE9~10 */ -o-transform: translate(0); /* Opera 10.5~12.10 */ transform: translate(0); } } /* moveInRight Animation */ @-webkit-keyframes moveInRight { 0% { opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-transform: translateX(50px); /* Safari, Chrome */ -moz-transform: translateX(50px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(50px); /* IE9~10 */ -o-transform: translateX(50px); /* Opera 10.5~12.10 */ transform: translateX(50px); } 80% { -webkit-transform: translateX(-10px); /* Safari, Chrome */ -moz-transform: translateX(-10px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(-10px); /* IE9~10 */ -o-transform: translateX(-10px); /* Opera 10.5~12.10 */ transform: translateX(-10px); } 100% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ -webkit-transform: translate(0); /* Safari, Chrome */ -moz-transform: translate(0); /* Firefox 3.5~16.0 */ -ms-transform: translate(0); /* IE9~10 */ -o-transform: translate(0); /* Opera 10.5~12.10 */ transform: translate(0); } } @-moz-keyframes moveInRight { 0% { opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-transform: translateX(50px); /* Safari, Chrome */ -moz-transform: translateX(50px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(50px); /* IE9~10 */ -o-transform: translateX(50px); /* Opera 10.5~12.10 */ transform: translateX(50px); } 80% { -webkit-transform: translateX(-10px); /* Safari, Chrome */ -moz-transform: translateX(-10px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(-10px); /* IE9~10 */ -o-transform: translateX(-10px); /* Opera 10.5~12.10 */ transform: translateX(-10px); } 100% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ -webkit-transform: translate(0); /* Safari, Chrome */ -moz-transform: translate(0); /* Firefox 3.5~16.0 */ -ms-transform: translate(0); /* IE9~10 */ -o-transform: translate(0); /* Opera 10.5~12.10 */ transform: translate(0); } } @keyframes moveInRight { 0% { opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-transform: translateX(50px); /* Safari, Chrome */ -moz-transform: translateX(50px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(50px); /* IE9~10 */ -o-transform: translateX(50px); /* Opera 10.5~12.10 */ transform: translateX(50px); } 80% { -webkit-transform: translateX(-10px); /* Safari, Chrome */ -moz-transform: translateX(-10px); /* Firefox 3.5~16.0 */ -ms-transform: translateX(-10px); /* IE9~10 */ -o-transform: translateX(-10px); /* Opera 10.5~12.10 */ transform: translateX(-10px); } 100% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ -webkit-transform: translate(0); /* Safari, Chrome */ -moz-transform: translate(0); /* Firefox 3.5~16.0 */ -ms-transform: translate(0); /* IE9~10 */ -o-transform: translate(0); /* Opera 10.5~12.10 */ transform: translate(0); } } /* movecircles Animation */ @-webkit-keyframes movecircles { 0% { margin-left: 1000px; } 100% { margin-left: -1000px; } } @-moz-keyframes movecircles { 0% { margin-left: 1000px; } 100% { margin-left: -1000px; } } @keyframes movecircles { 0% { margin-left: 1000px; } 100% { margin-left: -1000px; } } /* Rotate Animation */ @-webkit-keyframes roatateAnim { 0% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ -webkit-transform: translateY(10px); /* Safari, Chrome */ -moz-transform: translateY(10px); /* Firefox 3.5~16.0 */ -ms-transform: translateY(10px); /* IE9~10 */ -o-transform: translateY(10px); /* Opera 10.5~12.10 */ transform: translateY(10px); -webkit-transform: rotate(10deg); /* Safari, Chrome */ -moz-transform: rotate(10deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(10deg); /* IE9~10 */ -o-transform: rotate(10deg); /* Opera 10.5~12.10 */ transform: rotate(10deg); } 100% { opacity: 2; /* W3C */ filter: alpha(opacity=200); /* IE */ -webkit-transform: translate(0); /* Safari, Chrome */ -moz-transform: translate(0); /* Firefox 3.5~16.0 */ -ms-transform: translate(0); /* IE9~10 */ -o-transform: translate(0); /* Opera 10.5~12.10 */ transform: translate(0); -webkit-transform: rotate(360deg); /* Safari, Chrome */ -moz-transform: rotate(360deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(360deg); /* IE9~10 */ -o-transform: rotate(360deg); /* Opera 10.5~12.10 */ transform: rotate(360deg); } } @-moz-keyframes roatateAnim { 0% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ -webkit-transform: translateY(10px); /* Safari, Chrome */ -moz-transform: translateY(10px); /* Firefox 3.5~16.0 */ -ms-transform: translateY(10px); /* IE9~10 */ -o-transform: translateY(10px); /* Opera 10.5~12.10 */ transform: translateY(10px); -webkit-transform: rotate(10deg); /* Safari, Chrome */ -moz-transform: rotate(10deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(10deg); /* IE9~10 */ -o-transform: rotate(10deg); /* Opera 10.5~12.10 */ transform: rotate(10deg); } 100% { opacity: 2; /* W3C */ filter: alpha(opacity=200); /* IE */ -webkit-transform: translate(0); /* Safari, Chrome */ -moz-transform: translate(0); /* Firefox 3.5~16.0 */ -ms-transform: translate(0); /* IE9~10 */ -o-transform: translate(0); /* Opera 10.5~12.10 */ transform: translate(0); -webkit-transform: rotate(360deg); /* Safari, Chrome */ -moz-transform: rotate(360deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(360deg); /* IE9~10 */ -o-transform: rotate(360deg); /* Opera 10.5~12.10 */ transform: rotate(360deg); } } @keyframes roatateAnim { 0% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ -webkit-transform: translateY(10px); /* Safari, Chrome */ -moz-transform: translateY(10px); /* Firefox 3.5~16.0 */ -ms-transform: translateY(10px); /* IE9~10 */ -o-transform: translateY(10px); /* Opera 10.5~12.10 */ transform: translateY(10px); -webkit-transform: rotate(10deg); /* Safari, Chrome */ -moz-transform: rotate(10deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(10deg); /* IE9~10 */ -o-transform: rotate(10deg); /* Opera 10.5~12.10 */ transform: rotate(10deg); } 100% { opacity: 2; /* W3C */ filter: alpha(opacity=200); /* IE */ -webkit-transform: translate(0); /* Safari, Chrome */ -moz-transform: translate(0); /* Firefox 3.5~16.0 */ -ms-transform: translate(0); /* IE9~10 */ -o-transform: translate(0); /* Opera 10.5~12.10 */ transform: translate(0); -webkit-transform: rotate(360deg); /* Safari, Chrome */ -moz-transform: rotate(360deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(360deg); /* IE9~10 */ -o-transform: rotate(360deg); /* Opera 10.5~12.10 */ transform: rotate(360deg); } } /* MoveUpDown Animation */ @-webkit-keyframes MoveUpDown { 0% { -webkit-transform: translateY(0); /* Safari, Chrome */ -moz-transform: translateY(0); /* Firefox 3.5~16.0 */ -ms-transform: translateY(0); /* IE9~10 */ -o-transform: translateY(0); /* Opera 10.5~12.10 */ transform: translateY(0); } 100% { -webkit-transform: translateY(30px); /* Safari, Chrome */ -moz-transform: translateY(30px); /* Firefox 3.5~16.0 */ -ms-transform: translateY(30px); /* IE9~10 */ -o-transform: translateY(30px); /* Opera 10.5~12.10 */ transform: translateY(30px); } } @-moz-keyframes MoveUpDown { 0% { -webkit-transform: translateY(0); /* Safari, Chrome */ -moz-transform: translateY(0); /* Firefox 3.5~16.0 */ -ms-transform: translateY(0); /* IE9~10 */ -o-transform: translateY(0); /* Opera 10.5~12.10 */ transform: translateY(0); } 100% { -webkit-transform: translateY(30px); /* Safari, Chrome */ -moz-transform: translateY(30px); /* Firefox 3.5~16.0 */ -ms-transform: translateY(30px); /* IE9~10 */ -o-transform: translateY(30px); /* Opera 10.5~12.10 */ transform: translateY(30px); } } @keyframes MoveUpDown { 0% { -webkit-transform: translateY(0); /* Safari, Chrome */ -moz-transform: translateY(0); /* Firefox 3.5~16.0 */ -ms-transform: translateY(0); /* IE9~10 */ -o-transform: translateY(0); /* Opera 10.5~12.10 */ transform: translateY(0); } 100% { -webkit-transform: translateY(30px); /* Safari, Chrome */ -moz-transform: translateY(30px); /* Firefox 3.5~16.0 */ -ms-transform: translateY(30px); /* IE9~10 */ -o-transform: translateY(30px); /* Opera 10.5~12.10 */ transform: translateY(30px); } } /* Drift Animation */ @-webkit-keyframes drift { from { -webkit-transform: rotate(360deg); /* Safari, Chrome */ -moz-transform: rotate(360deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(360deg); /* IE9~10 */ -o-transform: rotate(360deg); /* Opera 10.5~12.10 */ transform: rotate(360deg); } } @-moz-keyframes drift { from { -webkit-transform: rotate(360deg); /* Safari, Chrome */ -moz-transform: rotate(360deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(360deg); /* IE9~10 */ -o-transform: rotate(360deg); /* Opera 10.5~12.10 */ transform: rotate(360deg); } } @keyframes drift { from { -webkit-transform: rotate(360deg); /* Safari, Chrome */ -moz-transform: rotate(360deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(360deg); /* IE9~10 */ -o-transform: rotate(360deg); /* Opera 10.5~12.10 */ transform: rotate(360deg); } } /* Left Animation */ @-webkit-keyframes animationLeft { 49% { -webkit-transform: translateX(100%); /* Safari, Chrome */ -moz-transform: translateX(100%); /* Firefox 3.5~16.0 */ -ms-transform: translateX(100%); /* IE9~10 */ -o-transform: translateX(100%); /* Opera 10.5~12.10 */ transform: translateX(100%); } 50% { opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-transform: translateX(-100%); /* Safari, Chrome */ -moz-transform: translateX(-100%); /* Firefox 3.5~16.0 */ -ms-transform: translateX(-100%); /* IE9~10 */ -o-transform: translateX(-100%); /* Opera 10.5~12.10 */ transform: translateX(-100%); } 51% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ } } @-moz-keyframes animationLeft { 49% { -webkit-transform: translateX(100%); /* Safari, Chrome */ -moz-transform: translateX(100%); /* Firefox 3.5~16.0 */ -ms-transform: translateX(100%); /* IE9~10 */ -o-transform: translateX(100%); /* Opera 10.5~12.10 */ transform: translateX(100%); } 50% { opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-transform: translateX(-100%); /* Safari, Chrome */ -moz-transform: translateX(-100%); /* Firefox 3.5~16.0 */ -ms-transform: translateX(-100%); /* IE9~10 */ -o-transform: translateX(-100%); /* Opera 10.5~12.10 */ transform: translateX(-100%); } 51% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ } } @keyframes animationLeft { 49% { -webkit-transform: translateX(100%); /* Safari, Chrome */ -moz-transform: translateX(100%); /* Firefox 3.5~16.0 */ -ms-transform: translateX(100%); /* IE9~10 */ -o-transform: translateX(100%); /* Opera 10.5~12.10 */ transform: translateX(100%); } 50% { opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-transform: translateX(-100%); /* Safari, Chrome */ -moz-transform: translateX(-100%); /* Firefox 3.5~16.0 */ -ms-transform: translateX(-100%); /* IE9~10 */ -o-transform: translateX(-100%); /* Opera 10.5~12.10 */ transform: translateX(-100%); } 51% { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ } } /* ---------------------------------------------------- 5. PRELOADER -------------------------------------------------------- */ .loader-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fefefe; z-index: 99999; height: 100%; width: 100%; overflow: hidden !important; } .loader { position: absolute; width: 5vh; height: 5vh; top: 50%; left: 50%; margin-top: -10vh; margin-left: -10vh; -webkit-perspective: 60vh; perspective: 60vh; z-index: 999; } .loader:before, .loader:after { content: " "; position: absolute; width: 100%; height: 100%; border-radius: 50%; } .loader:before { left: -13.333333333333334vh; -webkit-transform: translateZ(0vh); transform: translateZ(0vh); z-index: 1; -webkit-animation: rotation1 2.5s ease-out infinite; animation: rotation1 2.5s ease-out infinite; } .loader:after { right: -13.333333333333334vh; -webkit-transform: translateZ(0vh); transform: translateZ(0vh); z-index: 1; -webkit-animation: rotation2 2.5s ease-out infinite; animation: rotation2 2.5s ease-out infinite; } @-webkit-keyframes rotation1 { 25% { left: 0; -webkit-transform: translateZ(-10vh); transform: translateZ(-10vh); } 50% { left: 13.333333333333334vh; -webkit-transform: translateZ(0vh); transform: translateZ(0vh); } 75% { left: 0; -webkit-transform: translateZ(20vh); transform: translateZ(20vh); z-index: 2; } } @keyframes rotation1 { 25% { left: 0; -webkit-transform: translateZ(-10vh); transform: translateZ(-10vh); } 50% { left: 13.333333333333334vh; -webkit-transform: translateZ(0vh); transform: translateZ(0vh); } 75% { left: 0; -webkit-transform: translateZ(20vh); transform: translateZ(20vh); z-index: 2; } } @-webkit-keyframes rotation2 { 25% { right: 0; -webkit-transform: translateZ(20vh); transform: translateZ(20vh); z-index: 2; } 50% { right: 13.333333333333334vh; -webkit-transform: translateZ(0vh); transform: translateZ(0vh); } 75% { right: 0; -webkit-transform: translateZ(-10vh); transform: translateZ(-10vh); } } @keyframes rotation2 { 25% { right: 0; -webkit-transform: translateZ(20vh); transform: translateZ(20vh); z-index: 2; } 50% { right: 13.333333333333334vh; -webkit-transform: translateZ(0vh); transform: translateZ(0vh); } 75% { right: 0; -webkit-transform: translateZ(-10vh); transform: translateZ(-10vh); } } /* ---------------------------------------------------- 6. HEADER NAV -------------------------------------------------------- */ .header-nav { padding-top: 15px; padding-bottom: 15px; -webkit-transition: 0.4s; /* Safari, Chrome */ -moz-transition: 0.4s; /* Firefox 4.0~16.0 */ transition: 0.4s; /* IE >9, FF >15, Opera >12.0 */ } .navbar-brand, .navbar-brand:hover { color: #ffffff; font-weight: 700; font-size: 25px; text-transform: uppercase; } .header-nav .navbar-nav > li { margin-left: 12px; position: relative; } .header-nav .navbar-nav .nav-btn.nav-link { border: 1px solid #ffffff; padding-left: 15px; padding-right: 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; text-transform: uppercase; font-weight: 500; } .header-nav .navbar-nav .nav-btn.nav-link i { margin-left: 5px; } .navbar-toggler { border: 1px solid #ffffff; } .navbar-nav .nav-link { color: #ffffff; float: left; font-weight: 700; } .fixed-header .navbar-toggler { border: 1px solid #ffffff; } .fixed-header .navbar-toggler i { color: #ffffff; } .header-nav .navbar-nav > li .sub-menu li > a { font-size: 14px; display: block; padding: 5px 20px 5px 20px; font-weight: 400; letter-spacing: 0.5px; text-decoration: none; -webkit-transition: 0.3s; /* Safari, Chrome */ -moz-transition: 0.3s; /* Firefox 4.0~16.0 */ transition: 0.3s; /* IE >9, FF >15, Opera >12.0 */ } .header-nav .navbar-nav > li .sub-menu li > a:hover { color: #ffffff; } .header-nav .navbar-nav > li .sub-menu li:hover > a { padding-left: 28px; } .header-nav .navbar-nav > li .sub-menu li:hover > a:after { width: 5px; height: 5px; } /* Navbar Toogle */ .navbar-toggler { border: none; width: 40px; height: 40px; line-height: 40px; padding: 0px; outline: none !important; } .navbar-toggler i { color: #ffffff; } .header-nav.fixed-header { top: 0; margin-top: 0; padding: 12px 10px; -webkit-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2); /* Webkit browsers */ -moz-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2); /* Firefox */ -ms-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2); /* IE9 */ -o-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2); /* Opera(Old) */ box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .header-nav .navbar-nav > li:hover .sub-menu { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ } @media (min-width: 992px) { .header-nav .navbar-nav > li a { position: relative; } .header-nav .navbar-nav > li a::after { position: absolute; top: 100%; left: 0; width: 0; height: 2px; background: #ffffff; content: ''; opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-transition: opacity 0.3s, width 0.4s; /* Safari, Chrome */ -moz-transition: opacity 0.3s, width 0.4s; /* Firefox 4.0~16.0 */ transition: opacity 0.3s, width 0.4s; /* IE >9, FF >15, Opera >12.0 */ } .header-nav .navbar-nav > li a:hover::after, .header-nav .navbar-nav > li a.active:after { opacity: 1; width: 35px; } .header-nav .navbar-nav > li .sub-menu { background: #ffffff; margin: 0; padding: 10px 0; min-width: 200px; max-width: 100%; position: absolute; left: 0; top: calc(100% + 30px); list-style: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ z-index: 999; -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16); /* Webkit browsers */ -moz-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16); /* Firefox */ -ms-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16); /* IE9 */ -o-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16); /* Opera(Old) */ box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16); /* IE9+, News */ pointer-events: none; -webkit-transition: 0.3s; /* Safari, Chrome */ -moz-transition: 0.3s; /* Firefox 4.0~16.0 */ transition: 0.3s; /* IE >9, FF >15, Opera >12.0 */ } .header-nav .navbar-nav > li .sub-menu-toggle { font-size: 15px; line-height: 42px; color: #ffffff; } .header-nav .navbar-nav > li:hover .sub-menu { pointer-events: auto; top: 100%; } ul.sub-menu { background: #ffffff; margin: 0; padding: 10px 0; min-width: 200px; max-width: 100%; position: absolute; left: 0; top: calc(100% + 30px); list-style: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16); /* Webkit browsers */ -moz-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16); /* Firefox */ -ms-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16); /* IE9 */ -o-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16); /* Opera(Old) */ box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16); /* IE9+, News */ pointer-events: none; -webkit-transition: 0.3s; /* Safari, Chrome */ -moz-transition: 0.3s; /* Firefox 4.0~16.0 */ transition: 0.3s; /* IE >9, FF >15, Opera >12.0 */ } } @media (max-width: 991px) { .header-nav { top: 0; padding: 10px 15px; } .header-nav.fixed-header { padding: 10px 15px; } .navbar-nav { padding-top: 5px; } .header-nav .navbar-nav > li { margin: 0px; padding-left: 10px; padding-right: 10px; } .header-nav .navbar-nav > li .sub-menu-toggle { position: absolute; top: 0; right: 0; color: #ffffff; width: 100%; height: 44px; width: 44px; line-height: 44px; margin-right: 10px; cursor: pointer; text-align: center; z-index: 1; } .header-nav .navbar-nav > li .sub-menu { margin: 0; list-style: none; padding-left: 10px; padding-top: 0px; } .navbar-nav .nav-link { float: none; } .header-nav .navbar-nav > li .sub-menu { display: none; } .header-nav .navbar-nav > li.show .sub-menu { display: block; } .header-nav .navbar-nav > li .sub-menu li > a { font-weight: 700; padding: 5px 0; color: #ffffff; } .header-nav .navbar-nav > li .sub-menu li > a:after { left: -15px; } .header-nav .navbar-nav > li .sub-menu li:hover > a { padding-left: 0px; } .navbar-nav .nav-link { padding-left: 15px; padding-right: 15px; } .nav-link:hover, .nav-link.active { background: #151515; } } /* ---------------------------------------------------- 7. HERO SECTION -------------------------------------------------------- */ .hero-area { color: #ffffff; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; backface-visibility: hidden; } .full-height { min-height: 100vh; } .moveUpDown, .hero-area img, .phone-1, .phone-2 { -webkit-animation-name: MoveUpDown; -moz-animation-name: MoveUpDown; /* Firefox 5.0~16.0 */ animation-name: MoveUpDown; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; /* Firefox 5.0~16.0 */ animation-duration: 3s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; /* Firefox 5.0~16.0 */ animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; /* Firefox 5.0~16.0 */ animation-direction: alternate; } .animate-left, .hero-area h2, .hero-area .btn-default { -webkit-animation-name: moveInLeft; -moz-animation-name: moveInLeft; /* Firefox 5.0~16.0 */ animation-name: moveInLeft; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; /* Firefox 5.0~16.0 */ animation-duration: 2s; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; /* Firefox 5.0~16.0 */ animation-timing-function: ease-in; } .animate-right, .hero-area p, .hero-area .btn-default.btn-default-outline { -webkit-animation-name: moveInRight; -moz-animation-name: moveInRight; /* Firefox 5.0~16.0 */ animation-name: moveInRight; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; /* Firefox 5.0~16.0 */ animation-duration: 2s; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; /* Firefox 5.0~16.0 */ animation-timing-function: ease-in; } .hero-area h2 { font-size: 45px; } .hero-area .btn { margin-right: 20px; margin-bottom: 20px; } .hero-area h1, .hero-area h2, .hero-area h3, .hero-area h4, .hero-area h5, .hero-area h6 { color: #ffffff; } /* ---------------------------------------------------- 8. SERVICES SECTION -------------------------------------------------------- */ .service-box, .how-it-box, .address-box, .single-feature { border: 1px solid #dfdfdf; background: #ffffff; -webkit-transition: 0.3s; /* Safari, Chrome */ -moz-transition: 0.3s; /* Firefox 4.0~16.0 */ transition: 0.3s; /* IE >9, FF >15, Opera >12.0 */ } .service-box:hover, .how-it-box:hover, .address-box:hover, .single-feature:hover { -webkit-transform: translateY(-10px); /* Safari, Chrome */ -moz-transform: translateY(-10px); /* Firefox 3.5~16.0 */ -ms-transform: translateY(-10px); /* IE9~10 */ -o-transform: translateY(-10px); /* Opera 10.5~12.10 */ transform: translateY(-10px); -webkit-box-shadow: 0px 25px 35px 0px rgba(0, 0, 0, 0.1); /* Webkit browsers */ -moz-box-shadow: 0px 25px 35px 0px rgba(0, 0, 0, 0.1); /* Firefox */ -ms-box-shadow: 0px 25px 35px 0px rgba(0, 0, 0, 0.1); /* IE9 */ -o-box-shadow: 0px 25px 35px 0px rgba(0, 0, 0, 0.1); /* Opera(Old) */ box-shadow: 0px 25px 35px 0px rgba(0, 0, 0, 0.1); /* IE9+, News */ } .service-box i, .how-it-box i, .address-box i, .single-feature i { margin-bottom: 30px; font-size: 40px; display: inline-block; color: #FFBD59 !important; } .service-box h4, .how-it-box h4, .address-box h4, .single-feature h4 { margin-bottom: 25px; font-size: 20px; font-weight: 600; } .service-box p, .how-it-box p, .address-box p, .single-feature p { margin-bottom: 0px; } /* ---------------------------------------------------- 9. PREFACE SECTION -------------------------------------------------------- */ .bordered-circle, .bordered-circle2 { width: 600px; height: 600px; top: -50px; position: absolute; left: -300px; z-index: 0; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } #preface img { position: relative; } .apps-buttons .btn.btn-default { margin-right: 30px; margin-bottom: 25px; padding-left: 60px; position: relative; } .apps-buttons .btn.btn-default i { position: absolute; left: 25px; top: 50%; font-size: 30px; -webkit-transform: translate(0, -50%); /* Safari, Chrome */ -moz-transform: translate(0, -50%); /* Firefox 3.5~16.0 */ -ms-transform: translate(0, -50%); /* IE9~10 */ -o-transform: translate(0, -50%); /* Opera 10.5~12.10 */ transform: translate(0, -50%); } /* ---------------------------------------------------- 10. HOW IT WORKS SECTION -------------------------------------------------------- */ .how_works_arrow { font-size: 45px; } .how-it-box h4, .address-box h4 { margin-bottom: 20px; } /* ---------------------------------------------------- 11. APP FEATURES SECTION -------------------------------------------------------- */ #feature { overflow: hidden; } .single-feature { border: none; margin-top: 20px; margin-bottom: 20px; background: transparent; } .single-feature i { margin-bottom: 15px; } .single-feature h4 { margin-bottom: 15px; } .single-feature:hover { -webkit-box-shadow: none; /* Webkit browsers */ -moz-box-shadow: none; /* Firefox */ -ms-box-shadow: none; /* IE9 */ -o-box-shadow: none; /* Opera(Old) */ box-shadow: none; /* IE9+, News */ } .featured-mockup, .featured-mockup2 { min-height: 450px; } .bordered-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-size: 100% 100%; /* Chrome, iOS, Safari */ -moz-background-size: 100% 100%; /* Firefox 3.6~4.0 */ -o-background-size: 100% 100%; /* Opera 9.5 */ background-size: 100% 100%; /* IE9+, New */ -webkit-animation: roatateAnim 15s linear infinite; -moz-animation: roatateAnim 15s linear infinite; /* Firefox 5.0~16.0 */ animation: roatateAnim 15s linear infinite; /* IE10+ */ background-position: 0 0, 0 100%; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; left: 80px; top: -30px; } .filled-circle { -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-animation: movecircles 15s linear infinite; -moz-animation: movecircles 15s linear infinite; /* Firefox 5.0~16.0 */ animation: movecircles 15s linear infinite; /* IE10+ */ width: 150px; height: 150px; position: absolute; top: 150px; z-index: -1; } .phone-1, .phone-2 { position: absolute; left: 0; z-index: 1; } .phone-2 { left: 180px; z-index: 0; } /* ---------------------------------------------------- 12. TESTIMONIALS SECTION -------------------------------------------------------- */ .rotate-heading { -webkit-transform: rotate(-90deg); /* Safari, Chrome */ -moz-transform: rotate(-90deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(-90deg); /* IE9~10 */ -o-transform: rotate(-90deg); /* Opera 10.5~12.10 */ transform: rotate(-90deg); } .rotate-heading h2 { font-size: 100px; text-transform: uppercase; font-weight: 700; } #testimonials .rotate-heading { position: absolute; left: 30px; top: 50%; -webkit-transform: translateY(-50%) rotate(-90deg); /* Safari, Chrome */ -moz-transform: translateY(-50%) rotate(-90deg); /* Firefox 3.5~16.0 */ -ms-transform: translateY(-50%) rotate(-90deg); /* IE9~10 */ -o-transform: translateY(-50%) rotate(-90deg); /* Opera 10.5~12.10 */ transform: translateY(-50%) rotate(-90deg); } #testimonials .rotate-heading h2 { opacity: 0.3; /* W3C */ filter: alpha(opacity=30); /* IE */ } .single-testimonial { color: #ffffff; } .single-testimonial img { border: 3px solid #dfdfdf; } .single-testimonial p { margin-bottom: 25px; } .single-testimonial h5 { color: #ffffff; font-size: 20px; margin-bottom: 0px; } .single-testimonial .designation { font-size: 12px; margin-bottom: 0px; } .single-testimonial .ratings { color: #e79120; font-size: 12px; margin-bottom: 0px; } .single-testimonial .ratings i { marginr-right: 5px; } .testimonialSwiper .swiper-pagination-bullet-active { background: #ffffff; } /* ---------------------------------------------------- 13. SCREENSHOTS SECTION -------------------------------------------------------- */ #screenshots { overflow: hidden; } .screenshot-swiper .col-sm-4 { padding: 0px; text-align: center; } .screenshot-swiper img { margin: 0 auto; } .screenshot-swiper .swiper-button-prev, .screenshot-swiper .swiper-container-rtl .swiper-button-next, .screenshot-swiper .swiper-button-next, .screenshot-swiper .swiper-container-rtl .swiper-button-prev { background: none; line-height: 44px; font-size: 28px; text-align: center; width: 44px; height: 44px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; border-width: 2px; border-style: solid; -webkit-transition: 0.3s; /* Safari, Chrome */ -moz-transition: 0.3s; /* Firefox 4.0~16.0 */ transition: 0.3s; /* IE >9, FF >15, Opera >12.0 */ opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ } .screenshot-swiper .swiper-button-prev:hover, .screenshot-swiper .swiper-container-rtl .swiper-button-next:hover { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ } .screenshot-swiper .swiper-button-next:hover, .screenshot-swiper .swiper-container-rtl .swiper-button-prev:hover { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ } .screenshot-swiper .swiper-button-prev:hover, .screenshot-swiper .swiper-container-rtl .swiper-button-next:hover, .screenshot-swiper .swiper-button-next:hover, .screenshot-swiper .swiper-container-rtl .swiper-button-prev:hover { color: #ffffff; } /* ---------------------------------------------------- 14. PRICING TABLE SECTION -------------------------------------------------------- */ .single-pricing { background: #ffffff; overflow: hidden; position: relative; } .single-pricing:before { -webkit-transition: 0.3s; /* Safari, Chrome */ -moz-transition: 0.3s; /* Firefox 4.0~16.0 */ transition: 0.3s; /* IE >9, FF >15, Opera >12.0 */ content: ""; width: 100%; height: 0px; left: 0; top: 0; position: absolute; z-index: 0; } .single-pricing:hover:before { bottom: 0; height: 100%; z-index: 0; } .single-pricing:hover .pricing-body li { color: #ffffff; } .single-pricing .pricing-footer { margin-top: 30px; margin-bottom: 30px; padding-top: 10px; text-align: center; z-index: 1; position: relative; overflow: hidden; } .featured-pricing:before { height: 100%; } .featured-pricing .pricing-body li { color: #ffffff; } .pricing-body { z-index: 1; position: relative; margin-top: 15px; margin-bottom: 15px; overflow: hidden; } .pricing-body ul { margin: 0; padding: 0; list-style: none; } .pricing-body li { margin-top: 15px; margin-bottom: 15px; display: block; -webkit-transition: 0.3s; /* Safari, Chrome */ -moz-transition: 0.3s; /* Firefox 4.0~16.0 */ transition: 0.3s; /* IE >9, FF >15, Opera >12.0 */ } .pricing-head { position: relative; height: 250px; } .pricing-head-text { position: absolute; z-index: 1; width: 100%; left: 0; top: 0; padding-top: 50px; padding-left: 50px; padding-right: 50px; color: #ffffff; } .pricing-head-text .package-price { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ffffff; } .pricing-head-text .package-price .price { font-size: 48px; line-height: auto; } .pricing-head-text .package-name h5 { font-size: 20px; color: #ffffff; margin-bottom: 25px; font-weight: 600; } .pricing-head .wave { -webkit-border-radius: 43%; -moz-border-radius: 43%; -ms-border-radius: 43%; -o-border-radius: 43%; border-radius: 43%; -webkit-filter: opacity(0.8); /* Chrome 23+, Safari 6.0+, Blackberry 10.0+ */ filter: opacity(0.8); /* None yet */ -webkit-animation: drift linear infinite; -moz-animation: drift linear infinite; /* Firefox 5.0~16.0 */ animation: drift linear infinite; /* IE10+ */ -webkit-transform-origin: 50% 48%; -moz-transform-origin: 50% 48%; /* Firefox 3.5~16.0 */ -ms-transform-origin: 50% 48%; /* IE9~10 */ -o-transform-origin: 50% 48%; /* Opera 10.5~12.10 */ transform-origin: 50% 48%; position: absolute; top: -250px; left: -50px; width: 475px; height: 475px; } .pricing-head .wave:nth-of-type(1) { -webkit-animation-duration: 5s; -moz-animation-duration: 5s; /* Firefox 5.0~16.0 */ animation-duration: 5s; } .pricing-head .wave:nth-of-type(2) { -webkit-animation-duration: 7s; -moz-animation-duration: 7s; /* Firefox 5.0~16.0 */ animation-duration: 7s; } .pricing-head .wave:nth-of-type(3) { -webkit-animation-duration: 9s; -moz-animation-duration: 9s; /* Firefox 5.0~16.0 */ animation-duration: 9s; } /* ---------------------------------------------------- 15. FEATURES SECTION -------------------------------------------------------- */ .featured-1 { overflow: hidden; } .featured-1 h2 { margin-bottom: 15px; } .featured-1 p { margin-bottom: 25px; } .featured-1 .bordered-circle2 { top: -60px; right: -60px; left: inherit; opacity: 0.8; } .featured-2 { overflow: hidden; } .featured-2 h2 { margin-bottom: 20px; } .featured-2 p { margin-bottom: 50px; } .featured-2 h2, .featured-2 p { color: #ffffff; } .bordered-circle2 { width: 300px; height: 300px; top: -80px; left: -70px; } .featured-mockup2 { min-height: 265px; } /* ---------------------------------------------------- 16. LATEST BLOG SECTION -------------------------------------------------------- */ .single-blog, .page-content, .post-comments { background: #ffffff; margin-bottom: 25px; -webkit-transition: 0.4s; /* Safari, Chrome */ -moz-transition: 0.4s; /* Firefox 4.0~16.0 */ transition: 0.4s; /* IE >9, FF >15, Opera >12.0 */ } .single-blog .blog-content, .page-content .blog-content, .post-comments .blog-content { padding: 25px; } .single-blog .blog-content .blog-meta, .page-content .blog-content .blog-meta, .post-comments .blog-content .blog-meta { font-weight: 600; color: #858585; } .single-blog .blog-content .blog-meta a, .page-content .blog-content .blog-meta a, .post-comments .blog-content .blog-meta a { color: #858585; } .blog-content h2 { font-size: 20px; margin-bottom: 20px; } .blog-content .blog-meta { font-size: 12px; } .col-lg-4 .page-content .blog-content, .col-lg-4 .post-comments .blog-content { padding: 15px; } .col-lg-4 .page-content .blog-content h2, .col-lg-4 .post-comments .blog-content h2 { font-size: 20px; } .col-lg-4 .page-content .blog-content .post-meta li, .col-lg-4 .post-comments .blog-content .post-meta li { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; border: none; } .read-more { padding: 8px 15px; border: 1px solid #dfdfdf; display: inline-block; text-transform: uppercase; color: #ffffff; font-weight: 600; -webkit-transition: 0.4s; /* Safari, Chrome */ -moz-transition: 0.4s; /* Firefox 4.0~16.0 */ transition: 0.4s; /* IE >9, FF >15, Opera >12.0 */ } .read-more:hover { color: #ffffff; } /* ---------------------------------------------------- 17. CONTACT SECTION -------------------------------------------------------- */ .address-box h5 { font-weight: 600; } .address-box:hover { -webkit-transform: translateY(0px); /* Safari, Chrome */ -moz-transform: translateY(0px); /* Firefox 3.5~16.0 */ -ms-transform: translateY(0px); /* IE9~10 */ -o-transform: translateY(0px); /* Opera 10.5~12.10 */ transform: translateY(0px); } .address-box i { margin-bottom: 10px; } .address-box p { font-weight: 400; } .contact-address { border-right: 1px solid #dfdfdf; } .email-success, .email-failed, .email-loading, .success-msg, .error-msg { padding: 10px; display: none; } .email-loading img { width: 20px; margin: 0 auto; } .contact-form input, .contact-form textarea { width: 100%; border: none; padding: 10px; margin-bottom: 15px; background-color: #ffffff; border-bottom: 2px solid transparent; -webkit-transition: 0.4s; /* Safari, Chrome */ -moz-transition: 0.4s; /* Firefox 4.0~16.0 */ transition: 0.4s; /* IE >9, FF >15, Opera >12.0 */ } .contact-form input:focus, .contact-form textarea:focus { outline: none; border: none; border-bottom: 2px solid; } .contact-form textarea { min-height: 92px; } /* ---------------------------------------------------- 18. FOOTER SECTION -------------------------------------------------------- */ .footer { color: #ffffff; background: #151515; } .footer-top { border-bottom: 1px solid #dfdfdf; } a.footer-logo { margin-bottom: 15px; display: inline-block; } .footer-top p { margin-bottom: 30px; } .social-network a { display: inline-block; margin: 0.5em; } .social-network .social-icon { display: inline-block; font-size: 0px; cursor: pointer; width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; text-align: center; position: relative; z-index: 1; color: #ffffff; -webkit-box-shadow: 0 0 0 2px #ffffff; /* Webkit browsers */ -moz-box-shadow: 0 0 0 2px #ffffff; /* Firefox */ -ms-box-shadow: 0 0 0 2px #ffffff; /* IE9 */ -o-box-shadow: 0 0 0 2px #ffffff; /* Opera(Old) */ box-shadow: 0 0 0 2px #ffffff; /* IE9+, News */ overflow: hidden; -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s; transition: background 0.3s, color 0.3s, box-shadow 0.3s; } .social-network .social-icon:after { display: none; pointer-events: none; position: absolute; width: 100%; height: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; box-sizing: content-box; } .social-network .social-icon:before { speak: none; font-size: 25px; line-height: 50px; display: block; -webkit-font-smoothing: antialiased; } .social-network .social-icon:hover { color: #ffffff; -webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05); /* Webkit browsers */ -moz-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05); /* Firefox */ -ms-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05); /* IE9 */ -o-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05); /* Opera(Old) */ box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05); /* IE9+, News */ } .social-network .social-icon:hover:before { -webkit-animation: animationLeft 0.3s forwards; -moz-animation: animationLeft 0.3s forwards; /* Firefox 5.0~16.0 */ animation: animationLeft 0.3s forwards; /* IE10+ */ } .footer-copyright a { color: #ffffff; } /* ---------------------------------------------------- 19. BLOG PAGES -------------------------------------------------------- */ /* FULL WIDTH BLOG */ .white-text { color: #ffffff; } .post-meta ul { margin: 0; padding: 0; list-style: none; } .post-meta ul li { display: inline-block; margin-right: 8px; margin-bottom: 8px; } .post-meta ul li a { font-weight: 600; font-size: 12px; } .blog-tag a { display: inline-block; position: absolute; bottom: -50px; left: 0; margin: 15px; color: #fff; padding: 10px 15px; opacity: 0; font-weight: 600; -webkit-transition: 0.4s; /* Safari, Chrome */ -moz-transition: 0.4s; /* Firefox 4.0~16.0 */ transition: 0.4s; /* IE >9, FF >15, Opera >12.0 */ } .single-blog:hover .blog-tag a, .page-content:hover .blog-tag a, .post-comments:hover .blog-tag a { bottom: 0; opacity: 1; } .page-content, .post-comments { margin-bottom: 35px; border-radius: 5px; box-shadow: 0px 0px 76px 0px rgba(231, 231, 231, 0.66); } .page-content .blog-tag a, .post-comments .blog-tag a { margin: 5px; font-size: 12px; padding: 5px 8px; } .page-content h2, .post-comments h2 { font-size: 26px; } .blog-post-img { position: relative; } .app-pagenation .page-link { margin-right: 10px; border: 1px solid #dfdfdf; color: #151515; } .app-pagenation .page-item:first-child .page-link, .app-pagenation .page-item:last-child .page-link { border-radius: 0px; } .app-pagenation .page-item.active .page-link { border: transparent; } /* BLOG SIDEBAR */ .single-widget { padding: 30px; margin-bottom: 30px; box-shadow: 0px 0px 76px 0px rgba(231, 231, 231, 0.66); border: 1px solid #dfdfdf; background: #ffffff; } .single-widget h3 { display: inline-block; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px solid; } .single-widget ul { margin: 0; padding: 0; list-style: none; } .single-widget ul li:last-child a { border: none; margin-bottom: 0px; padding-bottom: 0px; } .single-widget ul a { -webkit-transition: 0.4s; /* Safari, Chrome */ -moz-transition: 0.4s; /* Firefox 4.0~16.0 */ transition: 0.4s; /* IE >9, FF >15, Opera >12.0 */ margin-bottom: 5px; padding-bottom: 5px; color: #858585; border-bottom: 1px solid #dfdfdf; display: block; } .single-widget ul.tags-cloud li { display: inline; } .single-widget ul.tags-cloud li a { padding: 2px 5px; display: inline-block; border: 1px solid #dfdfdf; } .single-widget ul.tags-cloud li a:hover { color: #fff; } .single-widget .search .form-control { border-radius: 0px; height: 45px; } .single-widget .form-control:focus { -webkit-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2); /* Webkit browsers */ -moz-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2); /* Firefox */ -ms-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2); /* IE9 */ -o-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2); /* Opera(Old) */ box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .add-banner { padding: 5px; } /* SINGLE BLOG */ .social-share p { display: inline-block; margin-bottom: 0px; margin-top: 15px; margin-right: 10px; float: left; } .social-share .social-network .social-icon { color: #151515; -webkit-box-shadow: 0 0 0 2px #dfdfdf; /* Webkit browsers */ -moz-box-shadow: 0 0 0 2px #dfdfdf; /* Firefox */ -ms-box-shadow: 0 0 0 2px #dfdfdf; /* IE9 */ -o-box-shadow: 0 0 0 2px #dfdfdf; /* Opera(Old) */ box-shadow: 0 0 0 2px #dfdfdf; /* IE9+, News */ } .social-share .social-network .social-icon:hover { color: #ffffff; } .post-comments { padding: 25px; } /* Comment lists */ .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list .the-comment { border-bottom: 1px solid #e1e1e1; padding-bottom: 25px; margin-bottom: 25px; } .comment-box { padding-left: 80px; } .avatar { float: left; margin-right: 15px; padding: 3px; bottom: #dfdfdf; } .avatar img { max-width: 60px; border-radius: 100%; } .comment-author.meta { margin-bottom: 10px; } .children { list-style: none; } .comment-reply-link { background: #e1e1e1; color: #000; padding: 3px 5px; margin-left: 5px; display: inline-block; -webkit-transition: 0.4s; /* Safari, Chrome */ -moz-transition: 0.4s; /* Firefox 4.0~16.0 */ transition: 0.4s; /* IE >9, FF >15, Opera >12.0 */ } a.comment-reply-link:hover { color: #fff; } /* Comment form */ .card-block { padding: 20px; overflow: hidden; } .post-comments input { padding: 10px; width: 100%; border: 1px solid #dfdfdf; margin-bottom: 15px; } .post-comments textarea { resize: none; padding: 10px; height: 130px; width: 100%; border: 1px solid #dfdfdf; margin-bottom: 15px; } .card-block button { margin-top: 15px; } .post-comments .btn-group button:hover { background: #dfdfdf; } .card-block .form-control { border-radius: 0px; } /* ---------------------------------------------------- 20. MARGINS -------------------------------------------------------- */ /*============================== Margins ================================*/ /*Margin All*/ .m-auto-all { margin: auto; } .m-0px { margin: 0; } .m-5px { margin: 5px; } .m-10px { margin: 10px; } .m-15px { margin: 15px; } .m-20px { margin: 20px; } .m-25px { margin: 25px; } .m-30px { margin: 30px; } .m-35px { margin: 35px; } .m-40px { margin: 40px; } .m-45px { margin: 45px; } .m-50px { margin: 50px; } .m-55px { margin: 55px; } .m-60px { margin: 60px; } .m-65px { margin: 65px; } .m-70px { margin: 70px; } .m-75px { margin: 75px; } .m-80px { margin: 80px; } .m-85px { margin: 85px; } .m-90px { margin: 90px; } .m-95px { margin: 95px; } .m-100px { margin: 100px; } /*Margin top buttom*/ .m-0px-tb { margin-top: 0px; margin-bottom: 0px; } .m-5px-tb { margin-top: 5px; margin-bottom: 5px; } .m-10px-tb { margin-top: 10px; margin-bottom: 10px; } .m-15px-tb { margin-top: 15px; margin-bottom: 15px; } .m-20px-tb { margin-top: 20px; margin-bottom: 20px; } .m-25px-tb { margin-top: 25px; margin-bottom: 25px; } .m-30px-tb { margin-top: 30px; margin-bottom: 30px; } .m-35px-tb { margin-top: 35px; margin-bottom: 35px; } .m-40px-tb { margin-top: 40px; margin-bottom: 40px; } .m-45px-tb { margin-top: 45px; margin-bottom: 45px; } .m-50px-tb { margin-top: 50px; margin-bottom: 50px; } .m-55px-tb { margin-top: 55px; margin-bottom: 55px; } .m-60px-tb { margin-top: 60px; margin-bottom: 60px; } .m-65px-tb { margin-top: 65px; margin-bottom: 65px; } .m-70px-tb { margin-top: 70px; margin-bottom: 70px; } .m-75px-tb { margin-top: 75px; margin-bottom: 75px; } .m-80px-tb { margin-top: 80px; margin-bottom: 80px; } .m-85px-tb { margin-top: 85px; margin-bottom: 85px; } .m-90px-tb { margin-top: 90px; margin-bottom: 90px; } .m-95px-tb { margin-top: 95px; margin-bottom: 95px; } .m-100px-tb { margin-top: 100px; margin-bottom: 100px; } /*Margin left right*/ .m-0px-lr { margin-left: 0px; margin-right: 0px; } .m-5px-lr { margin-left: 5px; margin-right: 5px; } .m-10px-lr { margin-left: 10px; margin-right: 10px; } .m-15px-lr { margin-left: 15px; margin-right: 15px; } .m-20px-lr { margin-left: 20px; margin-right: 20px; } .m-25px-lr { margin-left: 25px; margin-right: 25px; } .m-30px-lr { margin-left: 30px; margin-right: 30px; } .m-35px-lr { margin-left: 35px; margin-right: 35px; } .m-40px-lr { margin-left: 40px; margin-right: 40px; } .m-45px-lr { margin-left: 45px; margin-right: 45px; } .m-50px-lr { margin-left: 50px; margin-right: 50px; } .m-55px-lr { margin-left: 55px; margin-right: 55px; } .m-60px-lr { margin-left: 60px; margin-right: 60px; } .m-65px-lr { margin-left: 65px; margin-right: 65px; } .m-70px-lr { margin-left: 70px; margin-right: 70px; } .m-75px-lr { margin-left: 75px; margin-right: 75px; } .m-80px-lr { margin-left: 80px; margin-right: 80px; } .m-85px-lr { margin-left: 85px; margin-right: 85px; } .m-90px-lr { margin-left: 90px; margin-right: 90px; } .m-95px-lr { margin-left: 95px; margin-right: 95px; } .m-100px-lr { margin-left: 100px; margin-right: 100px; } /*Margin top*/ .m-0px-t { margin-top: 0px; } .m-5px-t { margin-top: 5px; } .m-10px-t { margin-top: 10px; } .m-15px-t { margin-top: 15px; } .m-20px-t { margin-top: 20px; } .m-25px-t { margin-top: 25px; } .m-30px-t { margin-top: 30px; } .m-35px-t { margin-top: 35px; } .m-40px-t { margin-top: 40px; } .m-45px-t { margin-top: 45px; } .m-50px-t { margin-top: 50px; } .m-55px-t { margin-top: 55px; } .m-60px-t { margin-top: 60px; } .m-65px-t { margin-top: 65px; } .m-70px-t { margin-top: 70px; } .m-75px-t { margin-top: 75px; } .m-80px-t { margin-top: 80px; } .m-85px-t { margin-top: 85px; } .m-90px-t { margin-top: 90px; } .m-95px-t { margin-top: 95px; } .m-100px-t { margin-top: 100px; } /*Margin Bottom*/ .m-0px-b { margin-bottom: 0px; } .m-5px-b { margin-bottom: 5px; } .m-10px-b { margin-bottom: 10px; } .m-15px-b { margin-bottom: 15px; } .m-20px-b { margin-bottom: 20px; } .m-25px-b { margin-bottom: 25px; } .m-30px-b { margin-bottom: 30px; } .m-35px-b { margin-bottom: 35px; } .m-40px-b { margin-bottom: 40px; } .m-45px-b { margin-bottom: 45px; } .m-50px-b { margin-bottom: 50px; } .m-55px-b { margin-bottom: 55px; } .m-60px-b { margin-bottom: 60px; } .m-65px-b { margin-bottom: 65px; } .m-70px-b { margin-bottom: 70px; } .m-75px-b { margin-bottom: 75px; } .m-80px-b { margin-bottom: 80px; } .m-85px-b { margin-bottom: 85px; } .m-90px-b { margin-bottom: 90px; } .m-95px-b { margin-bottom: 95px; } .m-100px-b { margin-bottom: 100px; } /*Margin Left*/ .m-0px-l { margin-left: 0px; } .m-5px-l { margin-left: 5px; } .m-10px-l { margin-left: 10px; } .m-15px-l { margin-left: 15px; } .m-20px-l { margin-left: 20px; } .m-25px-l { margin-left: 25px; } .m-30px-l { margin-left: 30px; } .m-35px-l { margin-left: 35px; } .m-40px-l { margin-left: 40px; } .m-45px-l { margin-left: 45px; } .m-50px-l { margin-left: 50px; } .m-55px-l { margin-left: 55px; } .m-60px-l { margin-left: 60px; } .m-65px-l { margin-left: 65px; } .m-70px-l { margin-left: 70px; } .m-75px-l { margin-left: 75px; } .m-80px-l { margin-left: 80px; } .m-85px-l { margin-left: 85px; } .m-90px-l { margin-left: 90px; } .m-95px-l { margin-left: 95px; } .m-100px-l { margin-left: 100px; } /*Margin right*/ .m-0px-r { margin-right: 0px; } .m-5px-r { margin-right: 5px; } .m-10px-r { margin-right: 10px; } .m-15px-r { margin-right: 15px; } .m-20px-r { margin-right: 20px; } .m-25px-r { margin-right: 25px; } .m-30px-r { margin-right: 30px; } .m-35px-r { margin-right: 35px; } .m-40px-r { margin-right: 40px; } .m-45px-r { margin-right: 45px; } .m-50px-r { margin-right: 50px; } .m-55px-r { margin-right: 55px; } .m-60px-r { margin-right: 60px; } .m-65px-r { margin-right: 65px; } .m-70px-r { margin-right: 70px; } .m-75px-r { margin-right: 75px; } .m-80px-r { margin-right: 80px; } .m-85px-r { margin-right: 85px; } .m-90px-r { margin-right: 90px; } .m-95px-r { margin-right: 95px; } .m-100px-r { margin-right: 100px; } @media (max-width: 1200px) { /*Margin All*/ .lg-m-0px { margin: 0; } .lg-m-5px { margin: 5px; } .lg-m-10px { margin: 10px; } .lg-m-15px { margin: 15px; } .lg-m-20px { margin: 20px; } .lg-m-25px { margin: 25px; } .lg-m-30px { margin: 30px; } .lg-m-35px { margin: 35px; } .lg-m-40px { margin: 40px; } .lg-m-45px { margin: 45px; } .lg-m-50px { margin: 50px; } .lg-m-55px { margin: 55px; } .lg-m-60px { margin: 60px; } .lg-m-65px { margin: 65px; } .lg-m-70px { margin: 70px; } .lg-m-75px { margin: 75px; } .lg-m-80px { margin: 80px; } .lg-m-85px { margin: 85px; } .lg-m-90px { margin: 90px; } .lg-m-95px { margin: 95px; } .lg-m-100px { margin: 100px; } /*Margin top buttom*/ .lg-m-0px-tb { margin-top: 0px; margin-bottom: 0px; } .lg-m-5px-tb { margin-top: 5px; margin-bottom: 5px; } .lg-m-10px-tb { margin-top: 10px; margin-bottom: 10px; } .lg-m-15px-tb { margin-top: 15px; margin-bottom: 15px; } .lg-m-20px-tb { margin-top: 20px; margin-bottom: 20px; } .lg-m-25px-tb { margin-top: 25px; margin-bottom: 25px; } .lg-m-30px-tb { margin-top: 30px; margin-bottom: 30px; } .lg-m-35px-tb { margin-top: 35px; margin-bottom: 35px; } .lg-m-40px-tb { margin-top: 40px; margin-bottom: 40px; } .lg-m-45px-tb { margin-top: 45px; margin-bottom: 45px; } .lg-m-50px-tb { margin-top: 50px; margin-bottom: 50px; } .lg-m-55px-tb { margin-top: 55px; margin-bottom: 55px; } .lg-m-60px-tb { margin-top: 60px; margin-bottom: 60px; } .lg-m-65px-tb { margin-top: 65px; margin-bottom: 65px; } .lg-m-70px-tb { margin-top: 70px; margin-bottom: 70px; } .lg-m-75px-tb { margin-top: 75px; margin-bottom: 75px; } .lg-m-80px-tb { margin-top: 80px; margin-bottom: 80px; } .lg-m-85px-tb { margin-top: 85px; margin-bottom: 85px; } .lg-m-90px-tb { margin-top: 90px; margin-bottom: 90px; } .lg-m-95px-tb { margin-top: 95px; margin-bottom: 95px; } .lg-m-100px-tb { margin-top: 100px; margin-bottom: 100px; } /*Margin left right*/ .lg-m-0px-lr { margin-left: 0px; margin-right: 0px; } .lg-m-5px-lr { margin-left: 5px; margin-right: 5px; } .lg-m-10px-lr { margin-left: 10px; margin-right: 10px; } .lg-m-15px-lr { margin-left: 15px; margin-right: 15px; } .lg-m-20px-lr { margin-left: 20px; margin-right: 20px; } .lg-m-25px-lr { margin-left: 25px; margin-right: 25px; } .lg-m-30px-lr { margin-left: 30px; margin-right: 30px; } .lg-m-35px-lr { margin-left: 35px; margin-right: 35px; } .lg-m-40px-lr { margin-left: 40px; margin-right: 40px; } .lg-m-45px-lr { margin-left: 45px; margin-right: 45px; } .lg-m-50px-lr { margin-left: 50px; margin-right: 50px; } .lg-m-55px-lr { margin-left: 55px; margin-right: 55px; } .lg-m-60px-lr { margin-left: 60px; margin-right: 60px; } .lg-m-65px-lr { margin-left: 65px; margin-right: 65px; } .lg-m-70px-lr { margin-left: 70px; margin-right: 70px; } .lg-m-75px-lr { margin-left: 75px; margin-right: 75px; } .lg-m-80px-lr { margin-left: 80px; margin-right: 80px; } .lg-m-85px-lr { margin-left: 85px; margin-right: 85px; } .lg-m-90px-lr { margin-left: 90px; margin-right: 90px; } .lg-m-95px-lr { margin-left: 95px; margin-right: 95px; } .lg-m-100px-lr { margin-left: 100px; margin-right: 100px; } /*Margin top*/ .lg-m-0px-t { margin-top: 0px; } .lg-m-5px-t { margin-top: 5px; } .lg-m-10px-t { margin-top: 10px; } .lg-m-15px-t { margin-top: 15px; } .lg-m-20px-t { margin-top: 20px; } .lg-m-25px-t { margin-top: 25px; } .lg-m-30px-t { margin-top: 30px; } .lg-m-35px-t { margin-top: 35px; } .lg-m-40px-t { margin-top: 40px; } .lg-m-45px-t { margin-top: 45px; } .lg-m-50px-t { margin-top: 50px; } .lg-m-55px-t { margin-top: 55px; } .lg-m-60px-t { margin-top: 60px; } .lg-m-65px-t { margin-top: 65px; } .lg-m-70px-t { margin-top: 70px; } .lg-m-75px-t { margin-top: 75px; } .lg-m-80px-t { margin-top: 80px; } .lg-m-85px-t { margin-top: 85px; } .lg-m-90px-t { margin-top: 90px; } .lg-m-95px-t { margin-top: 95px; } .lg-m-100px-t { margin-top: 100px; } /*Margin Bottom*/ .lg-m-0px-b { margin-bottom: 0px; } .lg-m-5px-b { margin-bottom: 5px; } .lg-m-10px-b { margin-bottom: 10px; } .lg-m-15px-b { margin-bottom: 15px; } .lg-m-20px-b { margin-bottom: 20px; } .lg-m-25px-b { margin-bottom: 25px; } .lg-m-30px-b { margin-bottom: 30px; } .lg-m-35px-b { margin-bottom: 35px; } .lg-m-40px-b { margin-bottom: 40px; } .lg-m-45px-b { margin-bottom: 45px; } .lg-m-50px-b { margin-bottom: 50px; } .lg-m-55px-b { margin-bottom: 55px; } .lg-m-60px-b { margin-bottom: 60px; } .lg-m-65px-b { margin-bottom: 65px; } .lg-m-70px-b { margin-bottom: 70px; } .lg-m-75px-b { margin-bottom: 75px; } .lg-m-80px-b { margin-bottom: 80px; } .lg-m-85px-b { margin-bottom: 85px; } .lg-m-90px-b { margin-bottom: 90px; } .lg-m-95px-b { margin-bottom: 95px; } .lg-m-100px-b { margin-bottom: 100px; } /*Margin Left*/ .lg-m-0px-l { margin-left: 0px; } .lg-m-5px-l { margin-left: 5px; } .lg-m-10px-l { margin-left: 10px; } .lg-m-15px-l { margin-left: 15px; } .lg-m-20px-l { margin-left: 20px; } .lg-m-25px-l { margin-left: 25px; } .lg-m-30px-l { margin-left: 30px; } .lg-m-35px-l { margin-left: 35px; } .lg-m-40px-l { margin-left: 40px; } .lg-m-45px-l { margin-left: 45px; } .lg-m-50px-l { margin-left: 50px; } .lg-m-55px-l { margin-left: 55px; } .lg-m-60px-l { margin-left: 60px; } .lg-m-65px-l { margin-left: 65px; } .lg-m-70px-l { margin-left: 70px; } .lg-m-75px-l { margin-left: 75px; } .lg-m-80px-l { margin-left: 80px; } .lg-m-85px-l { margin-left: 85px; } .lg-m-90px-l { margin-left: 90px; } .lg-m-95px-l { margin-left: 95px; } .lg-m-100px-l { margin-left: 100px; } /*Margin right*/ .lg-m-0px-r { margin-right: 0px; } .lg-m-5px-r { margin-right: 5px; } .lg-m-10px-r { margin-right: 10px; } .lg-m-15px-r { margin-right: 15px; } .lg-m-20px-r { margin-right: 20px; } .lg-m-25px-r { margin-right: 25px; } .lg-m-30px-r { margin-right: 30px; } .lg-m-35px-r { margin-right: 35px; } .lg-m-40px-r { margin-right: 40px; } .lg-m-45px-r { margin-right: 45px; } .lg-m-50px-r { margin-right: 50px; } .lg-m-55px-r { margin-right: 55px; } .lg-m-60px-r { margin-right: 60px; } .lg-m-65px-r { margin-right: 65px; } .lg-m-70px-r { margin-right: 70px; } .lg-m-75px-r { margin-right: 75px; } .lg-m-80px-r { margin-right: 80px; } .lg-m-85px-r { margin-right: 85px; } .lg-m-90px-r { margin-right: 90px; } .lg-m-95px-r { margin-right: 95px; } .lg-m-100px-r { margin-right: 100px; } } @media (max-width: 991px) { /*Margin All*/ .md-m-0px { margin: 0; } .md-m-5px { margin: 5px; } .md-m-10px { margin: 10px; } .md-m-15px { margin: 15px; } .md-m-20px { margin: 20px; } .md-m-25px { margin: 25px; } .md-m-30px { margin: 30px; } .md-m-35px { margin: 35px; } .md-m-40px { margin: 40px; } .md-m-45px { margin: 45px; } .md-m-50px { margin: 50px; } .md-m-55px { margin: 55px; } .md-m-60px { margin: 60px; } .md-m-65px { margin: 65px; } .md-m-70px { margin: 70px; } .md-m-75px { margin: 75px; } .md-m-80px { margin: 80px; } .md-m-85px { margin: 85px; } .md-m-90px { margin: 90px; } .md-m-95px { margin: 95px; } .md-m-100px { margin: 100px; } /*Margin top buttom*/ .md-m-0px-tb { margin-top: 0px; margin-bottom: 0px; } .md-m-5px-tb { margin-top: 5px; margin-bottom: 5px; } .md-m-10px-tb { margin-top: 10px; margin-bottom: 10px; } .md-m-15px-tb { margin-top: 15px; margin-bottom: 15px; } .md-m-20px-tb { margin-top: 20px; margin-bottom: 20px; } .md-m-25px-tb { margin-top: 25px; margin-bottom: 25px; } .md-m-30px-tb { margin-top: 30px; margin-bottom: 30px; } .md-m-35px-tb { margin-top: 35px; margin-bottom: 35px; } .md-m-40px-tb { margin-top: 40px; margin-bottom: 40px; } .md-m-45px-tb { margin-top: 45px; margin-bottom: 45px; } .md-m-50px-tb { margin-top: 50px; margin-bottom: 50px; } .md-m-55px-tb { margin-top: 55px; margin-bottom: 55px; } .md-m-60px-tb { margin-top: 60px; margin-bottom: 60px; } .md-m-65px-tb { margin-top: 65px; margin-bottom: 65px; } .md-m-70px-tb { margin-top: 70px; margin-bottom: 70px; } .md-m-75px-tb { margin-top: 75px; margin-bottom: 75px; } .md-m-80px-tb { margin-top: 80px; margin-bottom: 80px; } .md-m-85px-tb { margin-top: 85px; margin-bottom: 85px; } .md-m-90px-tb { margin-top: 90px; margin-bottom: 90px; } .md-m-95px-tb { margin-top: 95px; margin-bottom: 95px; } .md-m-100px-tb { margin-top: 100px; margin-bottom: 100px; } /*Margin left right*/ .md-m-0px-lr { margin-left: 0px; margin-right: 0px; } .md-m-5px-lr { margin-left: 5px; margin-right: 5px; } .md-m-10px-lr { margin-left: 10px; margin-right: 10px; } .md-m-15px-lr { margin-left: 15px; margin-right: 15px; } .md-m-20px-lr { margin-left: 20px; margin-right: 20px; } .md-m-25px-lr { margin-left: 25px; margin-right: 25px; } .md-m-30px-lr { margin-left: 30px; margin-right: 30px; } .md-m-35px-lr { margin-left: 35px; margin-right: 35px; } .md-m-40px-lr { margin-left: 40px; margin-right: 40px; } .md-m-45px-lr { margin-left: 45px; margin-right: 45px; } .md-m-50px-lr { margin-left: 50px; margin-right: 50px; } .md-m-55px-lr { margin-left: 55px; margin-right: 55px; } .md-m-60px-lr { margin-left: 60px; margin-right: 60px; } .md-m-65px-lr { margin-left: 65px; margin-right: 65px; } .md-m-70px-lr { margin-left: 70px; margin-right: 70px; } .md-m-75px-lr { margin-left: 75px; margin-right: 75px; } .md-m-80px-lr { margin-left: 80px; margin-right: 80px; } .md-m-85px-lr { margin-left: 85px; margin-right: 85px; } .md-m-90px-lr { margin-left: 90px; margin-right: 90px; } .md-m-95px-lr { margin-left: 95px; margin-right: 95px; } .md-m-100px-lr { margin-left: 100px; margin-right: 100px; } /*Margin top*/ .md-m-0px-t { margin-top: 0px; } .md-m-5px-t { margin-top: 5px; } .md-m-10px-t { margin-top: 10px; } .md-m-15px-t { margin-top: 15px; } .md-m-20px-t { margin-top: 20px; } .md-m-25px-t { margin-top: 25px; } .md-m-30px-t { margin-top: 30px; } .md-m-35px-t { margin-top: 35px; } .md-m-40px-t { margin-top: 40px; } .md-m-45px-t { margin-top: 45px; } .md-m-50px-t { margin-top: 50px; } .md-m-55px-t { margin-top: 55px; } .md-m-60px-t { margin-top: 60px; } .md-m-65px-t { margin-top: 65px; } .md-m-70px-t { margin-top: 70px; } .md-m-75px-t { margin-top: 75px; } .md-m-80px-t { margin-top: 80px; } .md-m-85px-t { margin-top: 85px; } .md-m-90px-t { margin-top: 90px; } .md-m-95px-t { margin-top: 95px; } .md-m-100px-t { margin-top: 100px; } /*Margin Bottom*/ .md-m-0px-b { margin-bottom: 0px; } .md-m-5px-b { margin-bottom: 5px; } .md-m-10px-b { margin-bottom: 10px; } .md-m-15px-b { margin-bottom: 15px; } .md-m-20px-b { margin-bottom: 20px; } .md-m-25px-b { margin-bottom: 25px; } .md-m-30px-b { margin-bottom: 30px; } .md-m-35px-b { margin-bottom: 35px; } .md-m-40px-b { margin-bottom: 40px; } .md-m-45px-b { margin-bottom: 45px; } .md-m-50px-b { margin-bottom: 50px; } .md-m-55px-b { margin-bottom: 55px; } .md-m-60px-b { margin-bottom: 60px; } .md-m-65px-b { margin-bottom: 65px; } .md-m-70px-b { margin-bottom: 70px; } .md-m-75px-b { margin-bottom: 75px; } .md-m-80px-b { margin-bottom: 80px; } .md-m-85px-b { margin-bottom: 85px; } .md-m-90px-b { margin-bottom: 90px; } .md-m-95px-b { margin-bottom: 95px; } .md-m-100px-b { margin-bottom: 100px; } /*Margin Left*/ .md-m-0px-l { margin-left: 0px; } .md-m-5px-l { margin-left: 5px; } .md-m-10px-l { margin-left: 10px; } .md-m-15px-l { margin-left: 15px; } .md-m-20px-l { margin-left: 20px; } .md-m-25px-l { margin-left: 25px; } .md-m-30px-l { margin-left: 30px; } .md-m-35px-l { margin-left: 35px; } .md-m-40px-l { margin-left: 40px; } .md-m-45px-l { margin-left: 45px; } .md-m-50px-l { margin-left: 50px; } .md-m-55px-l { margin-left: 55px; } .md-m-60px-l { margin-left: 60px; } .md-m-65px-l { margin-left: 65px; } .md-m-70px-l { margin-left: 70px; } .md-m-75px-l { margin-left: 75px; } .md-m-80px-l { margin-left: 80px; } .md-m-85px-l { margin-left: 85px; } .md-m-90px-l { margin-left: 90px; } .md-m-95px-l { margin-left: 95px; } .md-m-100px-l { margin-left: 100px; } /*Margin right*/ .md-m-0px-r { margin-right: 0px; } .md-m-5px-r { margin-right: 5px; } .md-m-10px-r { margin-right: 10px; } .md-m-15px-r { margin-right: 15px; } .md-m-20px-r { margin-right: 20px; } .md-m-25px-r { margin-right: 25px; } .md-m-30px-r { margin-right: 30px; } .md-m-35px-r { margin-right: 35px; } .md-m-40px-r { margin-right: 40px; } .md-m-45px-r { margin-right: 45px; } .md-m-50px-r { margin-right: 50px; } .md-m-55px-r { margin-right: 55px; } .md-m-60px-r { margin-right: 60px; } .md-m-65px-r { margin-right: 65px; } .md-m-70px-r { margin-right: 70px; } .md-m-75px-r { margin-right: 75px; } .md-m-80px-r { margin-right: 80px; } .md-m-85px-r { margin-right: 85px; } .md-m-90px-r { margin-right: 90px; } .md-m-95px-r { margin-right: 95px; } .md-m-100px-r { margin-right: 100px; } } @media (max-width: 767px) { /*Margin All*/ .sm-m-0px { margin: 0; } .sm-m-5px { margin: 5px; } .sm-m-10px { margin: 10px; } .sm-m-15px { margin: 15px; } .sm-m-20px { margin: 20px; } .sm-m-25px { margin: 25px; } .sm-m-30px { margin: 30px; } .sm-m-35px { margin: 35px; } .sm-m-40px { margin: 40px; } .sm-m-45px { margin: 45px; } .sm-m-50px { margin: 50px; } .sm-m-55px { margin: 55px; } .sm-m-60px { margin: 60px; } .sm-m-65px { margin: 65px; } .sm-m-70px { margin: 70px; } .sm-m-75px { margin: 75px; } .sm-m-80px { margin: 80px; } .sm-m-85px { margin: 85px; } .sm-m-90px { margin: 90px; } .sm-m-95px { margin: 95px; } .sm-m-100px { margin: 100px; } /*Margin top buttom*/ .sm-m-0px-tb { margin-top: 0px; margin-bottom: 0px; } .sm-m-5px-tb { margin-top: 5px; margin-bottom: 5px; } .sm-m-10px-tb { margin-top: 10px; margin-bottom: 10px; } .sm-m-15px-tb { margin-top: 15px; margin-bottom: 15px; } .sm-m-20px-tb { margin-top: 20px; margin-bottom: 20px; } .sm-m-25px-tb { margin-top: 25px; margin-bottom: 25px; } .sm-m-30px-tb { margin-top: 30px; margin-bottom: 30px; } .sm-m-35px-tb { margin-top: 35px; margin-bottom: 35px; } .sm-m-40px-tb { margin-top: 40px; margin-bottom: 40px; } .sm-m-45px-tb { margin-top: 45px; margin-bottom: 45px; } .sm-m-50px-tb { margin-top: 50px; margin-bottom: 50px; } .sm-m-55px-tb { margin-top: 55px; margin-bottom: 55px; } .sm-m-60px-tb { margin-top: 60px; margin-bottom: 60px; } .sm-m-65px-tb { margin-top: 65px; margin-bottom: 65px; } .sm-m-70px-tb { margin-top: 70px; margin-bottom: 70px; } .sm-m-75px-tb { margin-top: 75px; margin-bottom: 75px; } .sm-m-80px-tb { margin-top: 80px; margin-bottom: 80px; } .sm-m-85px-tb { margin-top: 85px; margin-bottom: 85px; } .sm-m-90px-tb { margin-top: 90px; margin-bottom: 90px; } .sm-m-95px-tb { margin-top: 95px; margin-bottom: 95px; } .sm-m-100px-tb { margin-top: 100px; margin-bottom: 100px; } /*Margin left right*/ .sm-m-0px-lr { margin-left: 0px; margin-right: 0px; } .sm-m-5px-lr { margin-left: 5px; margin-right: 5px; } .sm-m-10px-lr { margin-left: 10px; margin-right: 10px; } .sm-m-15px-lr { margin-left: 15px; margin-right: 15px; } .sm-m-20px-lr { margin-left: 20px; margin-right: 20px; } .sm-m-25px-lr { margin-left: 25px; margin-right: 25px; } .sm-m-30px-lr { margin-left: 30px; margin-right: 30px; } .sm-m-35px-lr { margin-left: 35px; margin-right: 35px; } .sm-m-40px-lr { margin-left: 40px; margin-right: 40px; } .sm-m-45px-lr { margin-left: 45px; margin-right: 45px; } .sm-m-50px-lr { margin-left: 50px; margin-right: 50px; } .sm-m-55px-lr { margin-left: 55px; margin-right: 55px; } .sm-m-60px-lr { margin-left: 60px; margin-right: 60px; } .sm-m-65px-lr { margin-left: 65px; margin-right: 65px; } .sm-m-70px-lr { margin-left: 70px; margin-right: 70px; } .sm-m-75px-lr { margin-left: 75px; margin-right: 75px; } .sm-m-80px-lr { margin-left: 80px; margin-right: 80px; } .sm-m-85px-lr { margin-left: 85px; margin-right: 85px; } .sm-m-90px-lr { margin-left: 90px; margin-right: 90px; } .sm-m-95px-lr { margin-left: 95px; margin-right: 95px; } .sm-m-100px-lr { margin-left: 100px; margin-right: 100px; } /*Margin top*/ .sm-m-0px-t { margin-top: 0px; } .sm-m-5px-t { margin-top: 5px; } .sm-m-10px-t { margin-top: 10px; } .sm-m-15px-t { margin-top: 15px; } .sm-m-20px-t { margin-top: 20px; } .sm-m-25px-t { margin-top: 25px; } .sm-m-30px-t { margin-top: 30px; } .sm-m-35px-t { margin-top: 35px; } .sm-m-40px-t { margin-top: 40px; } .sm-m-45px-t { margin-top: 45px; } .sm-m-50px-t { margin-top: 50px; } .sm-m-55px-t { margin-top: 55px; } .sm-m-60px-t { margin-top: 60px; } .sm-m-65px-t { margin-top: 65px; } .sm-m-70px-t { margin-top: 70px; } .sm-m-75px-t { margin-top: 75px; } .sm-m-80px-t { margin-top: 80px; } .sm-m-85px-t { margin-top: 85px; } .sm-m-90px-t { margin-top: 90px; } .sm-m-95px-t { margin-top: 95px; } .sm-m-100px-t { margin-top: 100px; } /*Margin Bottom*/ .sm-m-0px-b { margin-bottom: 0px; } .sm-m-5px-b { margin-bottom: 5px; } .sm-m-10px-b { margin-bottom: 10px; } .sm-m-15px-b { margin-bottom: 15px; } .sm-m-20px-b { margin-bottom: 20px; } .sm-m-25px-b { margin-bottom: 25px; } .sm-m-30px-b { margin-bottom: 30px; } .sm-m-35px-b { margin-bottom: 35px; } .sm-m-40px-b { margin-bottom: 40px; } .sm-m-45px-b { margin-bottom: 45px; } .sm-m-50px-b { margin-bottom: 50px; } .sm-m-55px-b { margin-bottom: 55px; } .sm-m-60px-b { margin-bottom: 60px; } .sm-m-65px-b { margin-bottom: 65px; } .sm-m-70px-b { margin-bottom: 70px; } .sm-m-75px-b { margin-bottom: 75px; } .sm-m-80px-b { margin-bottom: 80px; } .sm-m-85px-b { margin-bottom: 85px; } .sm-m-90px-b { margin-bottom: 90px; } .sm-m-95px-b { margin-bottom: 95px; } .sm-m-100px-b { margin-bottom: 100px; } /*Margin Left*/ .sm-m-0px-l { margin-left: 0px; } .sm-m-5px-l { margin-left: 5px; } .sm-m-10px-l { margin-left: 10px; } .sm-m-15px-l { margin-left: 15px; } .sm-m-20px-l { margin-left: 20px; } .sm-m-25px-l { margin-left: 25px; } .sm-m-30px-l { margin-left: 30px; } .sm-m-35px-l { margin-left: 35px; } .sm-m-40px-l { margin-left: 40px; } .sm-m-45px-l { margin-left: 45px; } .sm-m-50px-l { margin-left: 50px; } .sm-m-55px-l { margin-left: 55px; } .sm-m-60px-l { margin-left: 60px; } .sm-m-65px-l { margin-left: 65px; } .sm-m-70px-l { margin-left: 70px; } .sm-m-75px-l { margin-left: 75px; } .sm-m-80px-l { margin-left: 80px; } .sm-m-85px-l { margin-left: 85px; } .sm-m-90px-l { margin-left: 90px; } .sm-m-95px-l { margin-left: 95px; } .sm-m-100px-l { margin-left: 100px; } /*Margin right*/ .sm-m-0px-r { margin-right: 0px; } .sm-m-5px-r { margin-right: 5px; } .sm-m-10px-r { margin-right: 10px; } .sm-m-15px-r { margin-right: 15px; } .sm-m-20px-r { margin-right: 20px; } .sm-m-25px-r { margin-right: 25px; } .sm-m-30px-r { margin-right: 30px; } .sm-m-35px-r { margin-right: 35px; } .sm-m-40px-r { margin-right: 40px; } .sm-m-45px-r { margin-right: 45px; } .sm-m-50px-r { margin-right: 50px; } .sm-m-55px-r { margin-right: 55px; } .sm-m-60px-r { margin-right: 60px; } .sm-m-65px-r { margin-right: 65px; } .sm-m-70px-r { margin-right: 70px; } .sm-m-75px-r { margin-right: 75px; } .sm-m-80px-r { margin-right: 80px; } .sm-m-85px-r { margin-right: 85px; } .sm-m-90px-r { margin-right: 90px; } .sm-m-95px-r { margin-right: 95px; } .sm-m-100px-r { margin-right: 100px; } } /* ---------------------------------------------------- 21. PADDINGS -------------------------------------------------------- */ /*============================== Padding ================================*/ /*Padding All*/ .p-0px { padding: 0; } .p-5px { padding: 5px; } .p-10px { padding: 10px; } .p-15px { padding: 15px; } .p-20px { padding: 20px; } .p-25px { padding: 25px; } .p-30px { padding: 30px; } .p-35px { padding: 35px; } .p-40px { padding: 40px; } .p-45px { padding: 45px; } .p-50px { padding: 50px; } .p-55px { padding: 55px; } .p-60px { padding: 60px; } .p-65px { padding: 65px; } .p-70px { padding: 70px; } .p-75px { padding: 75px; } .p-80px { padding: 80px; } .p-85px { padding: 85px; } .p-90px { padding: 90px; } .p-95px { padding: 95px; } .p-100px { padding: 100px; } /*Padding Left Right*/ .p-0px-lr { padding-left: 0; padding-right: 0; } .p-5px-lr { padding-left: 5px; padding-right: 5px; } .p-10px-lr { padding-left: 10px; padding-right: 10px; } .p-15px-lr { padding-left: 15px; padding-right: 15px; } .p-20px-lr { padding-left: 20px; padding-right: 20px; } .p-25px-lr { padding-left: 25px; padding-right: 25px; } .p-30px-lr { padding-left: 30px; padding-right: 30px; } .p-35px-lr { padding-left: 35px; padding-right: 35px; } .p-40px-lr { padding-left: 40px; padding-right: 40px; } .p-45px-lr { padding-left: 45px; padding-right: 45px; } .p-50px-lr { padding-left: 50px; padding-right: 50px; } .p-55px-lr { padding-left: 55px; padding-right: 55px; } .p-60px-lr { padding-left: 60px; padding-right: 60px; } .p-65px-lr { padding-left: 65px; padding-right: 65px; } .p-70px-lr { padding-left: 70px; padding-right: 70px; } .p-75px-lr { padding-left: 75px; padding-right: 75px; } .p-80px-lr { padding-left: 80px; padding-right: 80px; } .p-85px-lr { padding-left: 85px; padding-right: 85px; } .p-90px-lr { padding-left: 90px; padding-right: 90px; } .p-95px-lr { padding-left: 95px; padding-right: 95px; } .p-100px-lr { padding-left: 100px; padding-right: 100px; } /*Padding Top Bottm*/ .p-0px-tb { padding-top: 0; padding-bottom: 0; } .p-5px-tb { padding-top: 5px; padding-bottom: 5px; } .p-10px-tb { padding-top: 10px; padding-bottom: 10px; } .p-15px-tb { padding-top: 15px; padding-bottom: 15px; } .p-20px-tb { padding-top: 20px; padding-bottom: 20px; } .p-25px-tb { padding-top: 25px; padding-bottom: 25px; } .p-30px-tb { padding-top: 30px; padding-bottom: 30px; } .p-35px-tb { padding-top: 35px; padding-bottom: 35px; } .p-40px-tb { padding-top: 40px; padding-bottom: 40px; } .p-45px-tb { padding-top: 45px; padding-bottom: 45px; } .p-50px-tb { padding-top: 50px; padding-bottom: 50px; } .p-55px-tb { padding-top: 55px; padding-bottom: 55px; } .p-60px-tb { padding-top: 60px; padding-bottom: 60px; } .p-65px-tb { padding-top: 65px; padding-bottom: 65px; } .p-70px-tb { padding-top: 70px; padding-bottom: 70px; } .p-75px-tb { padding-top: 75px; padding-bottom: 75px; } .p-80px-tb { padding-top: 80px; padding-bottom: 80px; } .p-85px-tb { padding-top: 85px; padding-bottom: 85px; } .p-90px-tb { padding-top: 90px; padding-bottom: 90px; } .p-95px-tb { padding-top: 95px; padding-bottom: 95px; } .p-100px-tb { padding-top: 100px; padding-bottom: 100px; } .p-175px-tb { padding-top: 175px; padding-bottom: 175px; } /*Padding top*/ .p-0px-t { padding-top: 0px; } .p-5px-t { padding-top: 5px; } .p-10px-t { padding-top: 10px; } .p-15px-t { padding-top: 15px; } .p-20px-t { padding-top: 20px; } .p-25px-t { padding-top: 25px; } .p-30px-t { padding-top: 30px; } .p-35px-t { padding-top: 35px; } .p-40px-t { padding-top: 40px; } .p-45px-t { padding-top: 45px; } .p-50px-t { padding-top: 50px; } .p-55px-t { padding-top: 55px; } .p-60px-t { padding-top: 60px; } .p-65px-t { padding-top: 65px; } .p-70px-t { padding-top: 70px; } .p-75px-t { padding-top: 75px; } .p-80px-t { padding-top: 80px; } .p-85px-t { padding-top: 85px; } .p-90px-t { padding-top: 90px; } .p-95px-t { padding-top: 95px; } .p-100px-t { padding-top: 100px; } .p-150px-t { padding-top: 150px; } /*Padding Bottom*/ .p-0px-b { padding-bottom: 0px; } .p-5px-b { padding-bottom: 5px; } .p-10px-b { padding-bottom: 10px; } .p-15px-b { padding-bottom: 15px; } .p-20px-b { padding-bottom: 20px; } .p-25px-b { padding-bottom: 25px; } .p-30px-b { padding-bottom: 30px; } .p-35px-b { padding-bottom: 35px; } .p-40px-b { padding-bottom: 40px; } .p-45px-b { padding-bottom: 45px; } .p-50px-b { padding-bottom: 50px; } .p-55px-b { padding-bottom: 55px; } .p-60px-b { padding-bottom: 60px; } .p-65px-b { padding-bottom: 65px; } .p-70px-b { padding-bottom: 70px; } .p-75px-b { padding-bottom: 75px; } .p-80px-b { padding-bottom: 80px; } .p-85px-b { padding-bottom: 85px; } .p-90px-b { padding-bottom: 90px; } .p-95px-b { padding-bottom: 95px; } .p-100px-b { padding-bottom: 100px; } /*Padding Left*/ .p-0px-l { padding-left: 0px; } .p-5px-l { padding-left: 5px; } .p-10px-l { padding-left: 10px; } .p-15px-l { padding-left: 15px; } .p-20px-l { padding-left: 20px; } .p-25px-l { padding-left: 25px; } .p-30px-l { padding-left: 30px; } .p-35px-l { padding-left: 35px; } .p-40px-l { padding-left: 40px; } .p-45px-l { padding-left: 45px; } .p-50px-l { padding-left: 50px; } .p-55px-l { padding-left: 55px; } .p-60px-l { padding-left: 60px; } .p-65px-l { padding-left: 65px; } .p-70px-l { padding-left: 70px; } .p-75px-l { padding-left: 75px; } .p-80px-l { padding-left: 80px; } .p-85px-l { padding-left: 85px; } .p-90px-l { padding-left: 90px; } .p-95px-l { padding-left: 95px; } .p-100px-l { padding-left: 100px; } /*Padding right*/ .p-0px-r { padding-right: 0px; } .p-5px-r { padding-right: 5px; } .p-10px-r { padding-right: 10px; } .p-15px-r { padding-right: 15px; } .p-20px-r { padding-right: 20px; } .p-25px-r { padding-right: 25px; } .p-30px-r { padding-right: 30px; } .p-35px-r { padding-right: 35px; } .p-40px-r { padding-right: 40px; } .p-45px-r { padding-right: 45px; } .p-50px-r { padding-right: 50px; } .p-55px-r { padding-right: 55px; } .p-60px-r { padding-right: 60px; } .p-65px-r { padding-right: 65px; } .p-70px-r { padding-right: 70px; } .p-75px-r { padding-right: 75px; } .p-80px-r { padding-right: 80px; } .p-85px-r { padding-right: 85px; } .p-90px-r { padding-right: 90px; } .p-95px-r { padding-right: 95px; } .p-100px-r { padding-right: 100px; } /*Padding All %*/ .p-1 { padding: 1%; } .p-1-half { padding: 1.5%; } .p-2 { padding: 2%; } .p-2-half { padding: 2.5%; } .p-3 { padding: 3%; } .p-3-half { padding: 3.5%; } .p-4 { padding: 4%; } .p-4-half { padding: 4.5%; } .p-5 { padding: 5%; } .p-5-half { padding: 5.5%; } .p-6 { padding: 6%; } .p-6-half { padding: 6.5%; } .p-7 { padding: 7%; } .p-7-half { padding: 7.5%; } .p-8 { padding: 8%; } .p-8-half { padding: 8.5%; } .p-9 { padding: 9%; } .p-9-half { padding: 9.5%; } .p-10 { padding: 10%; } .p-10-half { padding: 10.5%; } .p-11 { padding: 11%; } .p-11-half { padding: 11.5%; } .p-12 { padding: 12%; } .p-12-half { padding: 12.5%; } .p-13 { padding: 13%; } .p-13-half { padding: 13.5%; } .p-14 { padding: 14%; } .p-14-half { padding: 14.5%; } .p-15 { padding: 15%; } .p-15-half { padding: 15.5%; } .p-16 { padding: 16%; } .p-16-half { padding: 16.5%; } .p-17 { padding: 17%; } .p-17-half { padding: 17.5%; } .p-18 { padding: 18%; } .p-18-half { padding: 18.5%; } .p-19 { padding: 19%; } .p-19-half { padding: 19.5%; } .p-20 { padding: 20%; } .p-20-half { padding: 20.5%; } .p-21 { padding: 21%; } .p-21-half { padding: 21.5%; } .p-22 { padding: 22%; } .p-22-half { padding: 22.5%; } .p-23 { padding: 23%; } .p-23-half { padding: 23.5%; } .p-24 { padding: 24%; } .p-24-half { padding: 24.5%; } .p-25 { padding: 25%; } .p-25-half { padding: 25.5%; } .p-1-l { padding-left: 1%; } .p-1-half-l { padding-left: 1.5%; } .p-2-l { padding-left: 2%; } .p-2-half-l { padding-left: 2.5%; } .p-3-l { padding-left: 3%; } .p-3-half-l { padding-left: 3.5%; } .p-4-l { padding-left: 4%; } .p-4-half-l { padding-left: 4.5%; } .p-5-l { padding-left: 5%; } .p-5-half-l { padding-left: 5.5%; } .p-6-l { padding-left: 6%; } .p-6-half-l { padding-left: 6.5%; } .p-7-l { padding-left: 7%; } .p-7-half-l { padding-left: 7.5%; } .p-8-l { padding-left: 8%; } .p-8-half-l { padding-left: 8.5%; } .p-9-l { padding-left: 9%; } .p-9-half-l { padding-left: 9.5%; } .p-10-l { padding-left: 10%; } .p-10-half-l { padding-left: 10.5%; } .p-11-l { padding-left: 11%; } .p-11-half-l { padding-left: 11.5%; } .p-12-l { padding-left: 12%; } .p-12-half-l { padding-left: 12.5%; } .p-13-l { padding-left: 13%; } .p-13-half-l { padding-left: 13.5%; } .p-14-l { padding-left: 14%; } .p-14-half-l { padding-left: 14.5%; } .p-15-l { padding-left: 15%; } .p-15-half-l { padding-left: 15.5%; } .p-16-l { padding-left: 16%; } .p-16-half-l { padding-left: 16.5%; } .p-17-l { padding-left: 17%; } .p-17-half-l { padding-left: 17.5%; } .p-18-l { padding-left: 18%; } .p-18-half-l { padding-left: 18.5%; } .p-19-l { padding-left: 19%; } .p-19-half-l { padding-left: 19.5%; } .p-20-l { padding-left: 20%; } .p-20-half-l { padding-left: 20.5%; } .p-21-l { padding-left: 21%; } .p-21-half-l { padding-left: 21.5%; } .p-22-l { padding-left: 22%; } .p-22-half-l { padding-left: 22.5%; } .p-23-l { padding-left: 23%; } .p-23-half-l { padding-left: 23.5%; } .p-24-l { padding-left: 24%; } .p-24-half-l { padding-left: 24.5%; } .p-25-l { padding-left: 25%; } .p-25-half-l { padding-left: 25.5%; } .p-1-r { padding-right: 1%; } .p-1-half-r { padding-right: 1.5%; } .p-2-r { padding-right: 2%; } .p-2-half-r { padding-right: 2.5%; } .p-3-r { padding-right: 3%; } .p-3-half-r { padding-right: 3.5%; } .p-4-r { padding-right: 4%; } .p-4-half-r { padding-right: 4.5%; } .p-5-r { padding-right: 5%; } .p-5-half-r { padding-right: 5.5%; } .p-6-r { padding-right: 6%; } .p-6-half-r { padding-right: 6.5%; } .p-7-r { padding-right: 7%; } .p-7-half-r { padding-right: 7.5%; } .p-8-r { padding-right: 8%; } .p-8-half-r { padding-right: 8.5%; } .p-9-r { padding-right: 9%; } .p-9-half-r { padding-right: 9.5%; } .p-10-r { padding-right: 10%; } .p-10-half-r { padding-right: 10.5%; } .p-11-r { padding-right: 11%; } .p-11-half-r { padding-right: 11.5%; } .p-12-r { padding-right: 12%; } .p-12-half-r { padding-right: 12.5%; } .p-13-r { padding-right: 13%; } .p-13-half-r { padding-right: 13.5%; } .p-14-r { padding-right: 14%; } .p-14-half-r { padding-right: 14.5%; } .p-15-r { padding-right: 15%; } .p-15-half-r { padding-right: 15.5%; } .p-16-r { padding-right: 16%; } .p-16-half-r { padding-right: 16.5%; } .p-17-r { padding-right: 17%; } .p-17-half-r { padding-right: 17.5%; } .p-18-r { padding-right: 18%; } .p-18-half-r { padding-right: 18.5%; } .p-19-r { padding-right: 19%; } .p-19-half-r { padding-right: 19.5%; } .p-20-r { padding-right: 20%; } .p-20-half-r { padding-right: 20.5%; } .p-21-r { padding-right: 21%; } .p-21-half-r { padding-right: 21.5%; } .p-22-r { padding-right: 22%; } .p-22-half-r { padding-right: 22.5%; } .p-23-r { padding-right: 23%; } .p-23-half-r { padding-right: 23.5%; } .p-24-r { padding-right: 24%; } .p-24-half-r { padding-right: 24.5%; } .p-25-r { padding-right: 25%; } .p-25-half-r { padding-right: 25.5%; } .p-1-t { padding-top: 1%; } .p-1-half-t { padding-top: 1.5%; } .p-2-t { padding-top: 2%; } .p-2-half-t { padding-top: 2.5%; } .p-3-t { padding-top: 3%; } .p-3-half-t { padding-top: 3.5%; } .p-4-t { padding-top: 4%; } .p-4-half-t { padding-top: 4.5%; } .p-5-t { padding-top: 5%; } .p-5-half-t { padding-top: 5.5%; } .p-6-t { padding-top: 6%; } .p-6-half-t { padding-top: 6.5%; } .p-7-t { padding-top: 7%; } .p-7-half-t { padding-top: 7.5%; } .p-8-t { padding-top: 8%; } .p-8-half-t { padding-top: 8.5%; } .p-9-t { padding-top: 9%; } .p-9-half-t { padding-top: 9.5%; } .p-10-t { padding-top: 10%; } .p-10-half-t { padding-top: 10.5%; } .p-11-t { padding-top: 11%; } .p-11-half-t { padding-top: 11.5%; } .p-12-t { padding-top: 12%; } .p-12-half-t { padding-top: 12.5%; } .p-13-t { padding-top: 13%; } .p-13-half-t { padding-top: 13.5%; } .p-14-t { padding-top: 14%; } .p-14-half-t { padding-top: 14.5%; } .p-15-t { padding-top: 15%; } .p-15-half-t { padding-top: 15.5%; } .p-16-t { padding-top: 16%; } .p-16-half-t { padding-top: 16.5%; } .p-17-t { padding-top: 17%; } .p-17-half-t { padding-top: 17.5%; } .p-18-t { padding-top: 18%; } .p-18-half-t { padding-top: 18.5%; } .p-19-t { padding-top: 19%; } .p-19-half-t { padding-top: 19.5%; } .p-20-t { padding-top: 20%; } .p-20-half-t { padding-top: 20.5%; } .p-21-t { padding-top: 21%; } .p-21-half-t { padding-top: 21.5%; } .p-22-t { padding-top: 22%; } .p-22-half-t { padding-top: 22.5%; } .p-23-t { padding-top: 23%; } .p-23-half-t { padding-top: 23.5%; } .p-24-t { padding-top: 24%; } .p-24-half-t { padding-top: 24.5%; } .p-25-t { padding-top: 25%; } .p-25-half-t { padding-top: 25.5%; } .p-1-b { padding-bottom: 1%; } .p-1-half-b { padding-bottom: 1.5%; } .p-2-b { padding-bottom: 2%; } .p-2-half-b { padding-bottom: 2.5%; } .p-3-b { padding-bottom: 3%; } .p-3-half-b { padding-bottom: 3.5%; } .p-4-b { padding-bottom: 4%; } .p-4-half-b { padding-bottom: 4.5%; } .p-5-b { padding-bottom: 5%; } .p-5-half-b { padding-bottom: 5.5%; } .p-6-b { padding-bottom: 6%; } .p-6-half-b { padding-bottom: 6.5%; } .p-7-b { padding-bottom: 7%; } .p-7-half-b { padding-bottom: 7.5%; } .p-8-b { padding-bottom: 8%; } .p-8-half-b { padding-bottom: 8.5%; } .p-9-b { padding-bottom: 9%; } .p-9-half-b { padding-bottom: 9.5%; } .p-10-b { padding-bottom: 10%; } .p-10-half-b { padding-bottom: 10.5%; } .p-11-b { padding-bottom: 11%; } .p-11-half-b { padding-bottom: 11.5%; } .p-12-b { padding-bottom: 12%; } .p-12-half-b { padding-bottom: 12.5%; } .p-13-b { padding-bottom: 13%; } .p-13-half-b { padding-bottom: 13.5%; } .p-14-b { padding-bottom: 14%; } .p-14-half-b { padding-bottom: 14.5%; } .p-15-b { padding-bottom: 15%; } .p-15-half-b { padding-bottom: 15.5%; } .p-16-b { padding-bottom: 16%; } .p-16-half-b { padding-bottom: 16.5%; } .p-17-b { padding-bottom: 17%; } .p-17-half-b { padding-bottom: 17.5%; } .p-18-b { padding-bottom: 18%; } .p-18-half-b { padding-bottom: 18.5%; } .p-19-b { padding-bottom: 19%; } .p-19-half-b { padding-bottom: 19.5%; } .p-20-b { padding-bottom: 20%; } .p-20-half-b { padding-bottom: 20.5%; } .p-21-b { padding-bottom: 21%; } .p-21-half-b { padding-bottom: 21.5%; } .p-22-b { padding-bottom: 22%; } .p-22-half-b { padding-bottom: 22.5%; } .p-23-b { padding-bottom: 23%; } .p-23-half-b { padding-bottom: 23.5%; } .p-24-b { padding-bottom: 24%; } .p-24-half-b { padding-bottom: 24.5%; } .p-25-b { padding-bottom: 25%; } .p-25-half-b { padding-bottom: 25.5%; } @media (max-width: 1200px) { .lg-p-0px { padding: 0; } .lg-p-5px { padding: 5px; } .lg-p-10px { padding: 10px; } .lg-p-15px { padding: 15px; } .lg-p-20px { padding: 20px; } .lg-p-25px { padding: 25px; } .lg-p-30px { padding: 30px; } .lg-p-35px { padding: 35px; } .lg-p-40px { padding: 40px; } .lg-p-45px { padding: 45px; } .lg-p-50px { padding: 50px; } .lg-p-55px { padding: 55px; } .lg-p-60px { padding: 60px; } .lg-p-65px { padding: 65px; } .lg-p-70px { padding: 70px; } .lg-p-75px { padding: 75px; } .lg-p-80px { padding: 80px; } .lg-p-85px { padding: 85px; } .lg-p-90px { padding: 90px; } .lg-p-95px { padding: 95px; } .lg-p-100px { padding: 100px; } /*Padding Left Right*/ .lg-p-0px-lr { padding-left: 0; padding-right: 0; } .lg-p-5px-lr { padding-left: 5px; padding-right: 5px; } .lg-p-10px-lr { padding-left: 10px; padding-right: 10px; } .lg-p-15px-lr { padding-left: 15px; padding-right: 15px; } .lg-p-20px-lr { padding-left: 20px; padding-right: 20px; } .lg-p-25px-lr { padding-left: 25px; padding-right: 25px; } .lg-p-30px-lr { padding-left: 30px; padding-right: 30px; } .lg-p-35px-lr { padding-left: 35px; padding-right: 35px; } .lg-p-40px-lr { padding-left: 40px; padding-right: 40px; } .lg-p-45px-lr { padding-left: 45px; padding-right: 45px; } .lg-p-50px-lr { padding-left: 50px; padding-right: 50px; } .lg-p-55px-lr { padding-left: 55px; padding-right: 55px; } .lg-p-60px-lr { padding-left: 60px; padding-right: 60px; } .lg-p-65px-lr { padding-left: 65px; padding-right: 65px; } .lg-p-70px-lr { padding-left: 70px; padding-right: 70px; } .lg-p-75px-lr { padding-left: 75px; padding-right: 75px; } .lg-p-80px-lr { padding-left: 80px; padding-right: 80px; } .lg-p-85px-lr { padding-left: 85px; padding-right: 85px; } .lg-p-90px-lr { padding-left: 90px; padding-right: 90px; } .lg-p-95px-lr { padding-left: 95px; padding-right: 95px; } .lg-p-100px-lr { padding-left: 100px; padding-right: 100px; } /*Padding Top Bottm*/ .lg-p-0px-tb { padding-top: 0; padding-bottom: 0; } .lg-p-5px-tb { padding-top: 5px; padding-bottom: 5px; } .lg-p-10px-tb { padding-top: 10px; padding-bottom: 10px; } .lg-p-15px-tb { padding-top: 15px; padding-bottom: 15px; } .lg-p-20px-tb { padding-top: 20px; padding-bottom: 20px; } .lg-p-25px-tb { padding-top: 25px; padding-bottom: 25px; } .lg-p-30px-tb { padding-top: 30px; padding-bottom: 30px; } .lg-p-35px-tb { padding-top: 35px; padding-bottom: 35px; } .lg-p-40px-tb { padding-top: 40px; padding-bottom: 40px; } .lg-p-45px-tb { padding-top: 45px; padding-bottom: 45px; } .lg-p-50px-tb { padding-top: 50px; padding-bottom: 50px; } .lg-p-55px-tb { padding-top: 55px; padding-bottom: 55px; } .lg-p-60px-tb { padding-top: 60px; padding-bottom: 60px; } .lg-p-65px-tb { padding-top: 65px; padding-bottom: 65px; } .lg-p-70px-tb { padding-top: 70px; padding-bottom: 70px; } .lg-p-75px-tb { padding-top: 75px; padding-bottom: 75px; } .lg-p-80px-tb { padding-top: 80px; padding-bottom: 80px; } .lg-p-85px-tb { padding-top: 85px; padding-bottom: 85px; } .lg-p-90px-tb { padding-top: 90px; padding-bottom: 90px; } .lg-p-95px-tb { padding-top: 95px; padding-bottom: 95px; } .lg-p-100px-tb { padding-top: 100px; padding-bottom: 100px; } /*Padding top*/ .lg-p-5px-0 { padding-top: 0px; } .lg-p-5px-t { padding-top: 5px; } .lg-p-10px-t { padding-top: 10px; } .lg-p-15px-t { padding-top: 15px; } .lg-p-20px-t { padding-top: 20px; } .lg-p-25px-t { padding-top: 25px; } .lg-p-30px-t { padding-top: 30px; } .lg-p-35px-t { padding-top: 35px; } .lg-p-40px-t { padding-top: 40px; } .lg-p-45px-t { padding-top: 45px; } .lg-p-50px-t { padding-top: 50px; } .lg-p-55px-t { padding-top: 55px; } .lg-p-60px-t { padding-top: 60px; } .lg-p-65px-t { padding-top: 65px; } .lg-p-70px-t { padding-top: 70px; } .lg-p-75px-t { padding-top: 75px; } .lg-p-80px-t { padding-top: 80px; } .lg-p-85px-t { padding-top: 85px; } .lg-p-90px-t { padding-top: 90px; } .lg-p-95px-t { padding-top: 95px; } .lg-p-100px-t { padding-top: 100px; } /*Padding Bottom*/ .lg-p-0px-b { padding-bottom: 0px; } .lg-p-5px-b { padding-bottom: 5px; } .lg-p-10px-b { padding-bottom: 10px; } .lg-p-15px-b { padding-bottom: 15px; } .lg-p-20px-b { padding-bottom: 20px; } .lg-p-25px-b { padding-bottom: 25px; } .lg-p-30px-b { padding-bottom: 30px; } .lg-p-35px-b { padding-bottom: 35px; } .lg-p-40px-b { padding-bottom: 40px; } .lg-p-45px-b { padding-bottom: 45px; } .lg-p-50px-b { padding-bottom: 50px; } .lg-p-55px-b { padding-bottom: 55px; } .lg-p-60px-b { padding-bottom: 60px; } .lg-p-65px-b { padding-bottom: 65px; } .lg-p-70px-b { padding-bottom: 70px; } .lg-p-75px-b { padding-bottom: 75px; } .lg-p-80px-b { padding-bottom: 80px; } .lg-p-85px-b { padding-bottom: 85px; } .lg-p-90px-b { padding-bottom: 90px; } .lg-p-95px-b { padding-bottom: 95px; } .lg-p-100px-b { padding-bottom: 100px; } /*Padding Left*/ .lg-p-0px-l { padding-left: 0px; } .lg-p-5px-l { padding-left: 5px; } .lg-p-10px-l { padding-left: 10px; } .lg-p-15px-l { padding-left: 15px; } .lg-p-20px-l { padding-left: 20px; } .lg-p-25px-l { padding-left: 25px; } .lg-p-30px-l { padding-left: 30px; } .lg-p-35px-l { padding-left: 35px; } .lg-p-40px-l { padding-left: 40px; } .lg-p-45px-l { padding-left: 45px; } .lg-p-50px-l { padding-left: 50px; } .lg-p-55px-l { padding-left: 55px; } .lg-p-60px-l { padding-left: 60px; } .lg-p-65px-l { padding-left: 65px; } .lg-p-70px-l { padding-left: 70px; } .lg-p-75px-l { padding-left: 75px; } .lg-p-80px-l { padding-left: 80px; } .lg-p-85px-l { padding-left: 85px; } .lg-p-90px-l { padding-left: 90px; } .lg-p-95px-l { padding-left: 95px; } .lg-p-100px-l { padding-left: 100px; } /*Padding right*/ .lg-p-0px-r { padding-left: 0px; } .lg-p-5px-r { padding-left: 5px; } .lg-p-10px-r { padding-left: 10px; } .lg-p-15px-r { padding-left: 15px; } .lg-p-20px-r { padding-left: 20px; } .lg-p-25px-r { padding-left: 25px; } .lg-p-30px-r { padding-left: 30px; } .lg-p-35px-r { padding-left: 35px; } .lg-p-40px-r { padding-left: 40px; } .lg-p-45px-r { padding-left: 45px; } .lg-p-50px-r { padding-left: 50px; } .lg-p-55px-r { padding-left: 55px; } .lg-p-60px-r { padding-left: 60px; } .lg-p-65px-r { padding-left: 65px; } .lg-p-70px-r { padding-left: 70px; } .lg-p-75px-r { padding-left: 75px; } .lg-p-80px-r { padding-left: 80px; } .lg-p-85px-r { padding-left: 85px; } .lg-p-90px-r { padding-left: 90px; } .lg-p-95px-r { padding-left: 95px; } .lg-p-100px-r { padding-left: 100px; } /*Padding All %*/ .lg-p-1 { padding: 1%; } .lg-p-1-half { padding: 1.5%; } .lg-p-2 { padding: 2%; } .lg-p-2-half { padding: 2.5%; } .lg-p-3 { padding: 3%; } .lg-p-3-half { padding: 3.5%; } .lg-p-4 { padding: 4%; } .lg-p-4-half { padding: 4.5%; } .lg-p-5 { padding: 5%; } .lg-p-5-half { padding: 5.5%; } .lg-p-6 { padding: 6%; } .lg-p-6-half { padding: 6.5%; } .lg-p-7 { padding: 7%; } .lg-p-7-half { padding: 7.5%; } .lg-p-8 { padding: 8%; } .lg-p-8-half { padding: 8.5%; } .lg-p-9 { padding: 9%; } .lg-p-9-half { padding: 9.5%; } .lg-p-10 { padding: 10%; } .lg-p-10-half { padding: 10.5%; } .lg-p-11 { padding: 11%; } .lg-p-11-half { padding: 11.5%; } .lg-p-12 { padding: 12%; } .lg-p-12-half { padding: 12.5%; } .lg-p-13 { padding: 13%; } .lg-p-13-half { padding: 13.5%; } .lg-p-14 { padding: 14%; } .lg-p-14-half { padding: 14.5%; } .lg-p-15 { padding: 15%; } .lg-p-15-half { padding: 15.5%; } .lg-p-16 { padding: 16%; } .lg-p-16-half { padding: 16.5%; } .lg-p-17 { padding: 17%; } .lg-p-17-half { padding: 17.5%; } .lg-p-18 { padding: 18%; } .lg-p-18-half { padding: 18.5%; } .lg-p-19 { padding: 19%; } .lg-p-19-half { padding: 19.5%; } .lg-p-20 { padding: 20%; } .lg-p-20-half { padding: 20.5%; } .lg-p-21 { padding: 21%; } .lg-p-21-half { padding: 21.5%; } .lg-p-22 { padding: 22%; } .lg-p-22-half { padding: 22.5%; } .lg-p-23 { padding: 23%; } .lg-p-23-half { padding: 23.5%; } .lg-p-24 { padding: 24%; } .lg-p-24-half { padding: 24.5%; } .lg-p-25 { padding: 25%; } .lg-p-25-half { padding: 25.5%; } .lg-p-1-l { padding-left: 1%; } .lg-p-1-half-l { padding-left: 1.5%; } .lg-p-2-l { padding-left: 2%; } .lg-p-2-half-l { padding-left: 2.5%; } .lg-p-3-l { padding-left: 3%; } .lg-p-3-half-l { padding-left: 3.5%; } .lg-p-4-l { padding-left: 4%; } .lg-p-4-half-l { padding-left: 4.5%; } .lg-p-5-l { padding-left: 5%; } .lg-p-5-half-l { padding-left: 5.5%; } .lg-p-6-l { padding-left: 6%; } .lg-p-6-half-l { padding-left: 6.5%; } .lg-p-7-l { padding-left: 7%; } .lg-p-7-half-l { padding-left: 7.5%; } .lg-p-8-l { padding-left: 8%; } .lg-p-8-half-l { padding-left: 8.5%; } .lg-p-9-l { padding-left: 9%; } .lg-p-9-half-l { padding-left: 9.5%; } .lg-p-10-l { padding-left: 10%; } .lg-p-10-half-l { padding-left: 10.5%; } .lg-p-11-l { padding-left: 11%; } .lg-p-11-half-l { padding-left: 11.5%; } .lg-p-12-l { padding-left: 12%; } .lg-p-12-half-l { padding-left: 12.5%; } .lg-p-13-l { padding-left: 13%; } .lg-p-13-half-l { padding-left: 13.5%; } .lg-p-14-l { padding-left: 14%; } .lg-p-14-half-l { padding-left: 14.5%; } .lg-p-15-l { padding-left: 15%; } .lg-p-15-half-l { padding-left: 15.5%; } .lg-p-16-l { padding-left: 16%; } .lg-p-16-half-l { padding-left: 16.5%; } .lg-p-17-l { padding-left: 17%; } .lg-p-17-half-l { padding-left: 17.5%; } .lg-p-18-l { padding-left: 18%; } .lg-p-18-half-l { padding-left: 18.5%; } .lg-p-19-l { padding-left: 19%; } .lg-p-19-half-l { padding-left: 19.5%; } .lg-p-20-l { padding-left: 20%; } .lg-p-20-half-l { padding-left: 20.5%; } .lg-p-21-l { padding-left: 21%; } .lg-p-21-half-l { padding-left: 21.5%; } .lg-p-22-l { padding-left: 22%; } .lg-p-22-half-l { padding-left: 22.5%; } .lg-p-23-l { padding-left: 23%; } .lg-p-23-half-l { padding-left: 23.5%; } .lg-p-24-l { padding-left: 24%; } .lg-p-24-half-l { padding-left: 24.5%; } .lg-p-25-l { padding-left: 25%; } .lg-p-25-half-l { padding-left: 25.5%; } .lg-p-1-r { padding-right: 1%; } .lg-p-1-half-r { padding-right: 1.5%; } .lg-p-2-r { padding-right: 2%; } .lg-p-2-half-r { padding-right: 2.5%; } .lg-p-3-r { padding-right: 3%; } .lg-p-3-half-r { padding-right: 3.5%; } .lg-p-4-r { padding-right: 4%; } .lg-p-4-half-r { padding-right: 4.5%; } .lg-p-5-r { padding-right: 5%; } .lg-p-5-half-r { padding-right: 5.5%; } .lg-p-6-r { padding-right: 6%; } .lg-p-6-half-r { padding-right: 6.5%; } .lg-p-7-r { padding-right: 7%; } .lg-p-7-half-r { padding-right: 7.5%; } .lg-p-8-r { padding-right: 8%; } .lg-p-8-half-r { padding-right: 8.5%; } .lg-p-9-r { padding-right: 9%; } .lg-p-9-half-r { padding-right: 9.5%; } .lg-p-10-r { padding-right: 10%; } .lg-p-10-half-r { padding-right: 10.5%; } .lg-p-11-r { padding-right: 11%; } .lg-p-11-half-r { padding-right: 11.5%; } .lg-p-12-r { padding-right: 12%; } .lg-p-12-half-r { padding-right: 12.5%; } .lg-p-13-r { padding-right: 13%; } .lg-p-13-half-r { padding-right: 13.5%; } .lg-p-14-r { padding-right: 14%; } .lg-p-14-half-r { padding-right: 14.5%; } .lg-p-15-r { padding-right: 15%; } .lg-p-15-half-r { padding-right: 15.5%; } .lg-p-16-r { padding-right: 16%; } .lg-p-16-half-r { padding-right: 16.5%; } .lg-p-17-r { padding-right: 17%; } .lg-p-17-half-r { padding-right: 17.5%; } .lg-p-18-r { padding-right: 18%; } .lg-p-18-half-r { padding-right: 18.5%; } .lg-p-19-r { padding-right: 19%; } .lg-p-19-half-r { padding-right: 19.5%; } .lg-p-20-r { padding-right: 20%; } .lg-p-20-half-r { padding-right: 20.5%; } .lg-p-21-r { padding-right: 21%; } .lg-p-21-half-r { padding-right: 21.5%; } .lg-p-22-r { padding-right: 22%; } .lg-p-22-half-r { padding-right: 22.5%; } .lg-p-23-r { padding-right: 23%; } .lg-p-23-half-r { padding-right: 23.5%; } .lg-p-24-r { padding-right: 24%; } .lg-p-24-half-r { padding-right: 24.5%; } .lg-p-25-r { padding-right: 25%; } .lg-p-25-half-r { padding-right: 25.5%; } .lg-p-1-t { padding-top: 1%; } .lg-p-1-half-t { padding-top: 1.5%; } .lg-p-2-t { padding-top: 2%; } .lg-p-2-half-t { padding-top: 2.5%; } .lg-p-3-t { padding-top: 3%; } .lg-p-3-half-t { padding-top: 3.5%; } .lg-p-4-t { padding-top: 4%; } .lg-p-4-half-t { padding-top: 4.5%; } .lg-p-5-t { padding-top: 5%; } .lg-p-5-half-t { padding-top: 5.5%; } .lg-p-6-t { padding-top: 6%; } .lg-p-6-half-t { padding-top: 6.5%; } .lg-p-7-t { padding-top: 7%; } .lg-p-7-half-t { padding-top: 7.5%; } .lg-p-8-t { padding-top: 8%; } .lg-p-8-half-t { padding-top: 8.5%; } .lg-p-9-t { padding-top: 9%; } .lg-p-9-half-t { padding-top: 9.5%; } .lg-p-10-t { padding-top: 10%; } .lg-p-10-half-t { padding-top: 10.5%; } .lg-p-11-t { padding-top: 11%; } .lg-p-11-half-t { padding-top: 11.5%; } .lg-p-12-t { padding-top: 12%; } .lg-p-12-half-t { padding-top: 12.5%; } .lg-p-13-t { padding-top: 13%; } .lg-p-13-half-t { padding-top: 13.5%; } .lg-p-14-t { padding-top: 14%; } .lg-p-14-half-t { padding-top: 14.5%; } .lg-p-15-t { padding-top: 15%; } .lg-p-15-half-t { padding-top: 15.5%; } .lg-p-16-t { padding-top: 16%; } .lg-p-16-half-t { padding-top: 16.5%; } .lg-p-17-t { padding-top: 17%; } .lg-p-17-half-t { padding-top: 17.5%; } .lg-p-18-t { padding-top: 18%; } .lg-p-18-half-t { padding-top: 18.5%; } .lg-p-19-t { padding-top: 19%; } .lg-p-19-half-t { padding-top: 19.5%; } .lg-p-20-t { padding-top: 20%; } .lg-p-20-half-t { padding-top: 20.5%; } .lg-p-21-t { padding-top: 21%; } .lg-p-21-half-t { padding-top: 21.5%; } .lg-p-22-t { padding-top: 22%; } .lg-p-22-half-t { padding-top: 22.5%; } .lg-p-23-t { padding-top: 23%; } .lg-p-23-half-t { padding-top: 23.5%; } .lg-p-24-t { padding-top: 24%; } .lg-p-24-half-t { padding-top: 24.5%; } .lg-p-25-t { padding-top: 25%; } .lg-p-25-half-t { padding-top: 25.5%; } .lg-p-1-b { padding-bottom: 1%; } .lg-p-1-half-b { padding-bottom: 1.5%; } .lg-p-2-b { padding-bottom: 2%; } .lg-p-2-half-b { padding-bottom: 2.5%; } .lg-p-3-b { padding-bottom: 3%; } .lg-p-3-half-b { padding-bottom: 3.5%; } .lg-p-4-b { padding-bottom: 4%; } .lg-p-4-half-b { padding-bottom: 4.5%; } .lg-p-5-b { padding-bottom: 5%; } .lg-p-5-half-b { padding-bottom: 5.5%; } .lg-p-6-b { padding-bottom: 6%; } .lg-p-6-half-b { padding-bottom: 6.5%; } .lg-p-7-b { padding-bottom: 7%; } .lg-p-7-half-b { padding-bottom: 7.5%; } .lg-p-8-b { padding-bottom: 8%; } .lg-p-8-half-b { padding-bottom: 8.5%; } .lg-p-9-b { padding-bottom: 9%; } .lg-p-9-half-b { padding-bottom: 9.5%; } .lg-p-10-b { padding-bottom: 10%; } .lg-p-10-half-b { padding-bottom: 10.5%; } .lg-p-11-b { padding-bottom: 11%; } .lg-p-11-half-b { padding-bottom: 11.5%; } .lg-p-12-b { padding-bottom: 12%; } .lg-p-12-half-b { padding-bottom: 12.5%; } .lg-p-13-b { padding-bottom: 13%; } .lg-p-13-half-b { padding-bottom: 13.5%; } .lg-p-14-b { padding-bottom: 14%; } .lg-p-14-half-b { padding-bottom: 14.5%; } .lg-p-15-b { padding-bottom: 15%; } .lg-p-15-half-b { padding-bottom: 15.5%; } .lg-p-16-b { padding-bottom: 16%; } .lg-p-16-half-b { padding-bottom: 16.5%; } .lg-p-17-b { padding-bottom: 17%; } .lg-p-17-half-b { padding-bottom: 17.5%; } .lg-p-18-b { padding-bottom: 18%; } .lg-p-18-half-b { padding-bottom: 18.5%; } .lg-p-19-b { padding-bottom: 19%; } .lg-p-19-half-b { padding-bottom: 19.5%; } .lg-p-20-b { padding-bottom: 20%; } .lg-p-20-half-b { padding-bottom: 20.5%; } .lg-p-21-b { padding-bottom: 21%; } .lg-p-21-half-b { padding-bottom: 21.5%; } .lg-p-22-b { padding-bottom: 22%; } .lg-p-22-half-b { padding-bottom: 22.5%; } .lg-p-23-b { padding-bottom: 23%; } .lg-p-23-half-b { padding-bottom: 23.5%; } .lg-p-24-b { padding-bottom: 24%; } .lg-p-24-half-b { padding-bottom: 24.5%; } .lg-p-25-b { padding-bottom: 25%; } .lg-p-25-half-b { padding-bottom: 25.5%; } } @media (max-width: 991px) { .md-p-0px { padding: 0; } .md-p-5px { padding: 5px; } .md-p-10px { padding: 10px; } .md-p-15px { padding: 15px; } .md-p-20px { padding: 20px; } .md-p-25px { padding: 25px; } .md-p-30px { padding: 30px; } .md-p-35px { padding: 35px; } .md-p-40px { padding: 40px; } .md-p-45px { padding: 45px; } .md-p-50px { padding: 50px; } .md-p-55px { padding: 55px; } .md-p-60px { padding: 60px; } .md-p-65px { padding: 65px; } .md-p-70px { padding: 70px; } .md-p-75px { padding: 75px; } .md-p-80px { padding: 80px; } .md-p-85px { padding: 85px; } .md-p-90px { padding: 90px; } .md-p-95px { padding: 95px; } .md-p-100px { padding: 100px; } /*Padding Left Right*/ .md-p-0px-lr { padding-left: 0; padding-right: 0; } .md-p-5px-lr { padding-left: 5px; padding-right: 5px; } .md-p-10px-lr { padding-left: 10px; padding-right: 10px; } .md-p-15px-lr { padding-left: 15px; padding-right: 15px; } .md-p-20px-lr { padding-left: 20px; padding-right: 20px; } .md-p-25px-lr { padding-left: 25px; padding-right: 25px; } .md-p-30px-lr { padding-left: 30px; padding-right: 30px; } .md-p-35px-lr { padding-left: 35px; padding-right: 35px; } .md-p-40px-lr { padding-left: 40px; padding-right: 40px; } .md-p-45px-lr { padding-left: 45px; padding-right: 45px; } .md-p-50px-lr { padding-left: 50px; padding-right: 50px; } .md-p-55px-lr { padding-left: 55px; padding-right: 55px; } .md-p-60px-lr { padding-left: 60px; padding-right: 60px; } .md-p-65px-lr { padding-left: 65px; padding-right: 65px; } .md-p-70px-lr { padding-left: 70px; padding-right: 70px; } .md-p-75px-lr { padding-left: 75px; padding-right: 75px; } .md-p-80px-lr { padding-left: 80px; padding-right: 80px; } .md-p-85px-lr { padding-left: 85px; padding-right: 85px; } .md-p-90px-lr { padding-left: 90px; padding-right: 90px; } .md-p-95px-lr { padding-left: 95px; padding-right: 95px; } .md-p-100px-lr { padding-left: 100px; padding-right: 100px; } /*Padding Top Bottm*/ .md-p-0px-tb { padding-top: 0; padding-bottom: 0; } .md-p-5px-tb { padding-top: 5px; padding-bottom: 5px; } .md-p-10px-tb { padding-top: 10px; padding-bottom: 10px; } .md-p-15px-tb { padding-top: 15px; padding-bottom: 15px; } .md-p-20px-tb { padding-top: 20px; padding-bottom: 20px; } .md-p-25px-tb { padding-top: 25px; padding-bottom: 25px; } .md-p-30px-tb { padding-top: 30px; padding-bottom: 30px; } .md-p-35px-tb { padding-top: 35px; padding-bottom: 35px; } .md-p-40px-tb { padding-top: 40px; padding-bottom: 40px; } .md-p-45px-tb { padding-top: 45px; padding-bottom: 45px; } .md-p-50px-tb { padding-top: 50px; padding-bottom: 50px; } .md-p-55px-tb { padding-top: 55px; padding-bottom: 55px; } .md-p-60px-tb { padding-top: 60px; padding-bottom: 60px; } .md-p-65px-tb { padding-top: 65px; padding-bottom: 65px; } .md-p-70px-tb { padding-top: 70px; padding-bottom: 70px; } .md-p-75px-tb { padding-top: 75px; padding-bottom: 75px; } .md-p-80px-tb { padding-top: 80px; padding-bottom: 80px; } .md-p-85px-tb { padding-top: 85px; padding-bottom: 85px; } .md-p-90px-tb { padding-top: 90px; padding-bottom: 90px; } .md-p-95px-tb { padding-top: 95px; padding-bottom: 95px; } .md-p-100px-tb { padding-top: 100px; padding-bottom: 100px; } /*Padding top*/ .md-p-0px-t { padding-top: 0px; } .md-p-5px-t { padding-top: 5px; } .md-p-10px-t { padding-top: 10px; } .md-p-15px-t { padding-top: 15px; } .md-p-20px-t { padding-top: 20px; } .md-p-25px-t { padding-top: 25px; } .md-p-30px-t { padding-top: 30px; } .md-p-35px-t { padding-top: 35px; } .md-p-40px-t { padding-top: 40px; } .md-p-45px-t { padding-top: 45px; } .md-p-50px-t { padding-top: 50px; } .md-p-55px-t { padding-top: 55px; } .md-p-60px-t { padding-top: 60px; } .md-p-65px-t { padding-top: 65px; } .md-p-70px-t { padding-top: 70px; } .md-p-75px-t { padding-top: 75px; } .md-p-80px-t { padding-top: 80px; } .md-p-85px-t { padding-top: 85px; } .md-p-90px-t { padding-top: 90px; } .md-p-95px-t { padding-top: 95px; } .md-p-100px-t { padding-top: 100px; } /*Padding Bottom*/ .md-p-0px-b { padding-bottom: 0px; } .md-p-5px-b { padding-bottom: 5px; } .md-p-10px-b { padding-bottom: 10px; } .md-p-15px-b { padding-bottom: 15px; } .md-p-20px-b { padding-bottom: 20px; } .md-p-25px-b { padding-bottom: 25px; } .md-p-30px-b { padding-bottom: 30px; } .md-p-35px-b { padding-bottom: 35px; } .md-p-40px-b { padding-bottom: 40px; } .md-p-45px-b { padding-bottom: 45px; } .md-p-50px-b { padding-bottom: 50px; } .md-p-55px-b { padding-bottom: 55px; } .md-p-60px-b { padding-bottom: 60px; } .md-p-65px-b { padding-bottom: 65px; } .md-p-70px-b { padding-bottom: 70px; } .md-p-75px-b { padding-bottom: 75px; } .md-p-80px-b { padding-bottom: 80px; } .md-p-85px-b { padding-bottom: 85px; } .md-p-90px-b { padding-bottom: 90px; } .md-p-95px-b { padding-bottom: 95px; } .md-p-100px-b { padding-bottom: 100px; } /*Padding Left*/ .md-p-0px-l { padding-left: 0px; } .md-p-5px-l { padding-left: 5px; } .md-p-10px-l { padding-left: 10px; } .md-p-15px-l { padding-left: 15px; } .md-p-20px-l { padding-left: 20px; } .md-p-25px-l { padding-left: 25px; } .md-p-30px-l { padding-left: 30px; } .md-p-35px-l { padding-left: 35px; } .md-p-40px-l { padding-left: 40px; } .md-p-45px-l { padding-left: 45px; } .md-p-50px-l { padding-left: 50px; } .md-p-55px-l { padding-left: 55px; } .md-p-60px-l { padding-left: 60px; } .md-p-65px-l { padding-left: 65px; } .md-p-70px-l { padding-left: 70px; } .md-p-75px-l { padding-left: 75px; } .md-p-80px-l { padding-left: 80px; } .md-p-85px-l { padding-left: 85px; } .md-p-90px-l { padding-left: 90px; } .md-p-95px-l { padding-left: 95px; } .md-p-100px-l { padding-left: 100px; } /*Padding right*/ .md-p-0px-r { padding-right: 0px; } .md-p-5px-r { padding-right: 5px; } .md-p-10px-r { padding-right: 10px; } .md-p-15px-r { padding-right: 15px; } .md-p-20px-r { padding-right: 20px; } .md-p-25px-r { padding-right: 25px; } .md-p-30px-r { padding-right: 30px; } .md-p-35px-r { padding-right: 35px; } .md-p-40px-r { padding-right: 40px; } .md-p-45px-r { padding-right: 45px; } .md-p-50px-r { padding-right: 50px; } .md-p-55px-r { padding-right: 55px; } .md-p-60px-r { padding-right: 60px; } .md-p-65px-r { padding-right: 65px; } .md-p-70px-r { padding-right: 70px; } .md-p-75px-r { padding-right: 75px; } .md-p-80px-r { padding-right: 80px; } .md-p-85px-r { padding-right: 85px; } .md-p-90px-r { padding-right: 90px; } .md-p-95px-r { padding-right: 95px; } .md-p-100px-r { padding-right: 100px; } /*Padding All %*/ .md-p-1 { padding: 1%; } .md-p-1-half { padding: 1.5%; } .md-p-2 { padding: 2%; } .md-p-2-half { padding: 2.5%; } .md-p-3 { padding: 3%; } .md-p-3-half { padding: 3.5%; } .md-p-4 { padding: 4%; } .md-p-4-half { padding: 4.5%; } .md-p-5 { padding: 5%; } .md-p-5-half { padding: 5.5%; } .md-p-6 { padding: 6%; } .md-p-6-half { padding: 6.5%; } .md-p-7 { padding: 7%; } .md-p-7-half { padding: 7.5%; } .md-p-8 { padding: 8%; } .md-p-8-half { padding: 8.5%; } .md-p-9 { padding: 9%; } .md-p-9-half { padding: 9.5%; } .md-p-10 { padding: 10%; } .md-p-10-half { padding: 10.5%; } .md-p-11 { padding: 11%; } .md-p-11-half { padding: 11.5%; } .md-p-12 { padding: 12%; } .md-p-12-half { padding: 12.5%; } .md-p-13 { padding: 13%; } .md-p-13-half { padding: 13.5%; } .md-p-14 { padding: 14%; } .md-p-14-half { padding: 14.5%; } .md-p-15 { padding: 15%; } .md-p-15-half { padding: 15.5%; } .md-p-16 { padding: 16%; } .md-p-16-half { padding: 16.5%; } .md-p-17 { padding: 17%; } .md-p-17-half { padding: 17.5%; } .md-p-18 { padding: 18%; } .md-p-18-half { padding: 18.5%; } .md-p-19 { padding: 19%; } .md-p-19-half { padding: 19.5%; } .md-p-20 { padding: 20%; } .md-p-20-half { padding: 20.5%; } .md-p-21 { padding: 21%; } .md-p-21-half { padding: 21.5%; } .md-p-22 { padding: 22%; } .md-p-22-half { padding: 22.5%; } .md-p-23 { padding: 23%; } .md-p-23-half { padding: 23.5%; } .md-p-24 { padding: 24%; } .md-p-24-half { padding: 24.5%; } .md-p-25 { padding: 25%; } .md-p-25-half { padding: 25.5%; } .md-p-1-l { padding-left: 1%; } .md-p-1-half-l { padding-left: 1.5%; } .md-p-2-l { padding-left: 2%; } .md-p-2-half-l { padding-left: 2.5%; } .md-p-3-l { padding-left: 3%; } .md-p-3-half-l { padding-left: 3.5%; } .md-p-4-l { padding-left: 4%; } .md-p-4-half-l { padding-left: 4.5%; } .md-p-5-l { padding-left: 5%; } .md-p-5-half-l { padding-left: 5.5%; } .md-p-6-l { padding-left: 6%; } .md-p-6-half-l { padding-left: 6.5%; } .md-p-7-l { padding-left: 7%; } .md-p-7-half-l { padding-left: 7.5%; } .md-p-8-l { padding-left: 8%; } .md-p-8-half-l { padding-left: 8.5%; } .md-p-9-l { padding-left: 9%; } .md-p-9-half-l { padding-left: 9.5%; } .md-p-10-l { padding-left: 10%; } .md-p-10-half-l { padding-left: 10.5%; } .md-p-11-l { padding-left: 11%; } .md-p-11-half-l { padding-left: 11.5%; } .md-p-12-l { padding-left: 12%; } .md-p-12-half-l { padding-left: 12.5%; } .md-p-13-l { padding-left: 13%; } .md-p-13-half-l { padding-left: 13.5%; } .md-p-14-l { padding-left: 14%; } .md-p-14-half-l { padding-left: 14.5%; } .md-p-15-l { padding-left: 15%; } .md-p-15-half-l { padding-left: 15.5%; } .md-p-16-l { padding-left: 16%; } .md-p-16-half-l { padding-left: 16.5%; } .md-p-17-l { padding-left: 17%; } .md-p-17-half-l { padding-left: 17.5%; } .md-p-18-l { padding-left: 18%; } .md-p-18-half-l { padding-left: 18.5%; } .md-p-19-l { padding-left: 19%; } .md-p-19-half-l { padding-left: 19.5%; } .md-p-20-l { padding-left: 20%; } .md-p-20-half-l { padding-left: 20.5%; } .md-p-21-l { padding-left: 21%; } .md-p-21-half-l { padding-left: 21.5%; } .md-p-22-l { padding-left: 22%; } .md-p-22-half-l { padding-left: 22.5%; } .md-p-23-l { padding-left: 23%; } .md-p-23-half-l { padding-left: 23.5%; } .md-p-24-l { padding-left: 24%; } .md-p-24-half-l { padding-left: 24.5%; } .md-p-25-l { padding-left: 25%; } .md-p-25-half-l { padding-left: 25.5%; } .md-p-1-r { padding-right: 1%; } .md-p-1-half-r { padding-right: 1.5%; } .md-p-2-r { padding-right: 2%; } .md-p-2-half-r { padding-right: 2.5%; } .md-p-3-r { padding-right: 3%; } .md-p-3-half-r { padding-right: 3.5%; } .md-p-4-r { padding-right: 4%; } .md-p-4-half-r { padding-right: 4.5%; } .md-p-5-r { padding-right: 5%; } .md-p-5-half-r { padding-right: 5.5%; } .md-p-6-r { padding-right: 6%; } .md-p-6-half-r { padding-right: 6.5%; } .md-p-7-r { padding-right: 7%; } .md-p-7-half-r { padding-right: 7.5%; } .md-p-8-r { padding-right: 8%; } .md-p-8-half-r { padding-right: 8.5%; } .md-p-9-r { padding-right: 9%; } .md-p-9-half-r { padding-right: 9.5%; } .md-p-10-r { padding-right: 10%; } .md-p-10-half-r { padding-right: 10.5%; } .md-p-11-r { padding-right: 11%; } .md-p-11-half-r { padding-right: 11.5%; } .md-p-12-r { padding-right: 12%; } .md-p-12-half-r { padding-right: 12.5%; } .md-p-13-r { padding-right: 13%; } .md-p-13-half-r { padding-right: 13.5%; } .md-p-14-r { padding-right: 14%; } .md-p-14-half-r { padding-right: 14.5%; } .md-p-15-r { padding-right: 15%; } .md-p-15-half-r { padding-right: 15.5%; } .md-p-16-r { padding-right: 16%; } .md-p-16-half-r { padding-right: 16.5%; } .md-p-17-r { padding-right: 17%; } .md-p-17-half-r { padding-right: 17.5%; } .md-p-18-r { padding-right: 18%; } .md-p-18-half-r { padding-right: 18.5%; } .md-p-19-r { padding-right: 19%; } .md-p-19-half-r { padding-right: 19.5%; } .md-p-20-r { padding-right: 20%; } .md-p-20-half-r { padding-right: 20.5%; } .md-p-21-r { padding-right: 21%; } .md-p-21-half-r { padding-right: 21.5%; } .md-p-22-r { padding-right: 22%; } .md-p-22-half-r { padding-right: 22.5%; } .md-p-23-r { padding-right: 23%; } .md-p-23-half-r { padding-right: 23.5%; } .md-p-24-r { padding-right: 24%; } .md-p-24-half-r { padding-right: 24.5%; } .md-p-25-r { padding-right: 25%; } .md-p-25-half-r { padding-right: 25.5%; } .md-p-1-t { padding-top: 1%; } .md-p-1-half-t { padding-top: 1.5%; } .md-p-2-t { padding-top: 2%; } .md-p-2-half-t { padding-top: 2.5%; } .md-p-3-t { padding-top: 3%; } .md-p-3-half-t { padding-top: 3.5%; } .md-p-4-t { padding-top: 4%; } .md-p-4-half-t { padding-top: 4.5%; } .md-p-5-t { padding-top: 5%; } .md-p-5-half-t { padding-top: 5.5%; } .md-p-6-t { padding-top: 6%; } .md-p-6-half-t { padding-top: 6.5%; } .md-p-7-t { padding-top: 7%; } .md-p-7-half-t { padding-top: 7.5%; } .md-p-8-t { padding-top: 8%; } .md-p-8-half-t { padding-top: 8.5%; } .md-p-9-t { padding-top: 9%; } .md-p-9-half-t { padding-top: 9.5%; } .md-p-10-t { padding-top: 10%; } .md-p-10-half-t { padding-top: 10.5%; } .md-p-11-t { padding-top: 11%; } .md-p-11-half-t { padding-top: 11.5%; } .md-p-12-t { padding-top: 12%; } .md-p-12-half-t { padding-top: 12.5%; } .md-p-13-t { padding-top: 13%; } .md-p-13-half-t { padding-top: 13.5%; } .md-p-14-t { padding-top: 14%; } .md-p-14-half-t { padding-top: 14.5%; } .md-p-15-t { padding-top: 15%; } .md-p-15-half-t { padding-top: 15.5%; } .md-p-16-t { padding-top: 16%; } .md-p-16-half-t { padding-top: 16.5%; } .md-p-17-t { padding-top: 17%; } .md-p-17-half-t { padding-top: 17.5%; } .md-p-18-t { padding-top: 18%; } .md-p-18-half-t { padding-top: 18.5%; } .md-p-19-t { padding-top: 19%; } .md-p-19-half-t { padding-top: 19.5%; } .md-p-20-t { padding-top: 20%; } .md-p-20-half-t { padding-top: 20.5%; } .md-p-21-t { padding-top: 21%; } .md-p-21-half-t { padding-top: 21.5%; } .md-p-22-t { padding-top: 22%; } .md-p-22-half-t { padding-top: 22.5%; } .md-p-23-t { padding-top: 23%; } .md-p-23-half-t { padding-top: 23.5%; } .md-p-24-t { padding-top: 24%; } .md-p-24-half-t { padding-top: 24.5%; } .md-p-25-t { padding-top: 25%; } .md-p-25-half-t { padding-top: 25.5%; } .md-p-1-b { padding-bottom: 1%; } .md-p-1-half-b { padding-bottom: 1.5%; } .md-p-2-b { padding-bottom: 2%; } .md-p-2-half-b { padding-bottom: 2.5%; } .md-p-3-b { padding-bottom: 3%; } .md-p-3-half-b { padding-bottom: 3.5%; } .md-p-4-b { padding-bottom: 4%; } .md-p-4-half-b { padding-bottom: 4.5%; } .md-p-5-b { padding-bottom: 5%; } .md-p-5-half-b { padding-bottom: 5.5%; } .md-p-6-b { padding-bottom: 6%; } .md-p-6-half-b { padding-bottom: 6.5%; } .md-p-7-b { padding-bottom: 7%; } .md-p-7-half-b { padding-bottom: 7.5%; } .md-p-8-b { padding-bottom: 8%; } .md-p-8-half-b { padding-bottom: 8.5%; } .md-p-9-b { padding-bottom: 9%; } .md-p-9-half-b { padding-bottom: 9.5%; } .md-p-10-b { padding-bottom: 10%; } .md-p-10-half-b { padding-bottom: 10.5%; } .md-p-11-b { padding-bottom: 11%; } .md-p-11-half-b { padding-bottom: 11.5%; } .md-p-12-b { padding-bottom: 12%; } .md-p-12-half-b { padding-bottom: 12.5%; } .md-p-13-b { padding-bottom: 13%; } .md-p-13-half-b { padding-bottom: 13.5%; } .md-p-14-b { padding-bottom: 14%; } .md-p-14-half-b { padding-bottom: 14.5%; } .md-p-15-b { padding-bottom: 15%; } .md-p-15-half-b { padding-bottom: 15.5%; } .md-p-16-b { padding-bottom: 16%; } .md-p-16-half-b { padding-bottom: 16.5%; } .md-p-17-b { padding-bottom: 17%; } .md-p-17-half-b { padding-bottom: 17.5%; } .md-p-18-b { padding-bottom: 18%; } .md-p-18-half-b { padding-bottom: 18.5%; } .md-p-19-b { padding-bottom: 19%; } .md-p-19-half-b { padding-bottom: 19.5%; } .md-p-20-b { padding-bottom: 20%; } .md-p-20-half-b { padding-bottom: 20.5%; } .md-p-21-b { padding-bottom: 21%; } .md-p-21-half-b { padding-bottom: 21.5%; } .md-p-22-b { padding-bottom: 22%; } .md-p-22-half-b { padding-bottom: 22.5%; } .md-p-23-b { padding-bottom: 23%; } .md-p-23-half-b { padding-bottom: 23.5%; } .md-p-24-b { padding-bottom: 24%; } .md-p-24-half-b { padding-bottom: 24.5%; } .md-p-25-b { padding-bottom: 25%; } .md-p-25-half-b { padding-bottom: 25.5%; } } @media (max-width: 767px) { .sm-p-0px { padding: 0; } .sm-p-5px { padding: 5px; } .sm-p-10px { padding: 10px; } .sm-p-15px { padding: 15px; } .sm-p-20px { padding: 20px; } .sm-p-25px { padding: 25px; } .sm-p-30px { padding: 30px; } .sm-p-35px { padding: 35px; } .sm-p-40px { padding: 40px; } .sm-p-45px { padding: 45px; } .sm-p-50px { padding: 50px; } .sm-p-55px { padding: 55px; } .sm-p-60px { padding: 60px; } .sm-p-65px { padding: 65px; } .sm-p-70px { padding: 70px; } .sm-p-75px { padding: 75px; } .sm-p-80px { padding: 80px; } .sm-p-85px { padding: 85px; } .sm-p-90px { padding: 90px; } .sm-p-95px { padding: 95px; } .sm-p-100px { padding: 100px; } /*Padding Left Right*/ .sm-p-0px-lr { padding-left: 0; padding-right: 0; } .sm-p-5px-lr { padding-left: 5px; padding-right: 5px; } .sm-p-10px-lr { padding-left: 10px; padding-right: 10px; } .sm-p-15px-lr { padding-left: 15px; padding-right: 15px; } .sm-p-20px-lr { padding-left: 20px; padding-right: 20px; } .sm-p-25px-lr { padding-left: 25px; padding-right: 25px; } .sm-p-30px-lr { padding-left: 30px; padding-right: 30px; } .sm-p-35px-lr { padding-left: 35px; padding-right: 35px; } .sm-p-40px-lr { padding-left: 40px; padding-right: 40px; } .sm-p-45px-lr { padding-left: 45px; padding-right: 45px; } .sm-p-50px-lr { padding-left: 50px; padding-right: 50px; } .sm-p-55px-lr { padding-left: 55px; padding-right: 55px; } .sm-p-60px-lr { padding-left: 60px; padding-right: 60px; } .sm-p-65px-lr { padding-left: 65px; padding-right: 65px; } .sm-p-70px-lr { padding-left: 70px; padding-right: 70px; } .sm-p-75px-lr { padding-left: 75px; padding-right: 75px; } .sm-p-80px-lr { padding-left: 80px; padding-right: 80px; } .sm-p-85px-lr { padding-left: 85px; padding-right: 85px; } .sm-p-90px-lr { padding-left: 90px; padding-right: 90px; } .sm-p-95px-lr { padding-left: 95px; padding-right: 95px; } .sm-p-100px-lr { padding-left: 100px; padding-right: 100px; } /*Padding Top Bottm*/ .sm-p-0px-tb { padding-top: 0; padding-bottom: 0; } .sm-p-5px-tb { padding-top: 5px; padding-bottom: 5px; } .sm-p-10px-tb { padding-top: 10px; padding-bottom: 10px; } .sm-p-15px-tb { padding-top: 15px; padding-bottom: 15px; } .sm-p-20px-tb { padding-top: 20px; padding-bottom: 20px; } .sm-p-25px-tb { padding-top: 25px; padding-bottom: 25px; } .sm-p-30px-tb { padding-top: 30px; padding-bottom: 30px; } .sm-p-35px-tb { padding-top: 35px; padding-bottom: 35px; } .sm-p-40px-tb { padding-top: 40px; padding-bottom: 40px; } .sm-p-45px-tb { padding-top: 45px; padding-bottom: 45px; } .sm-p-50px-tb { padding-top: 50px; padding-bottom: 50px; } .sm-p-55px-tb { padding-top: 55px; padding-bottom: 55px; } .sm-p-60px-tb { padding-top: 60px; padding-bottom: 60px; } .sm-p-65px-tb { padding-top: 65px; padding-bottom: 65px; } .sm-p-70px-tb { padding-top: 70px; padding-bottom: 70px; } .sm-p-75px-tb { padding-top: 75px; padding-bottom: 75px; } .sm-p-80px-tb { padding-top: 80px; padding-bottom: 80px; } .sm-p-85px-tb { padding-top: 85px; padding-bottom: 85px; } .sm-p-90px-tb { padding-top: 90px; padding-bottom: 90px; } .sm-p-95px-tb { padding-top: 95px; padding-bottom: 95px; } .sm-p-100px-tb { padding-top: 100px; padding-bottom: 100px; } /*Padding top*/ .sm-p-0px-t { padding-top: 0px; } .sm-p-5px-t { padding-top: 5px; } .sm-p-10px-t { padding-top: 10px; } .sm-p-15px-t { padding-top: 15px; } .sm-p-20px-t { padding-top: 20px; } .sm-p-25px-t { padding-top: 25px; } .sm-p-30px-t { padding-top: 30px; } .sm-p-35px-t { padding-top: 35px; } .sm-p-40px-t { padding-top: 40px; } .sm-p-45px-t { padding-top: 45px; } .sm-p-50px-t { padding-top: 50px; } .sm-p-55px-t { padding-top: 55px; } .sm-p-60px-t { padding-top: 60px; } .sm-p-65px-t { padding-top: 65px; } .sm-p-70px-t { padding-top: 70px; } .sm-p-75px-t { padding-top: 75px; } .sm-p-80px-t { padding-top: 80px; } .sm-p-85px-t { padding-top: 85px; } .sm-p-90px-t { padding-top: 90px; } .sm-p-95px-t { padding-top: 95px; } .sm-p-100px-t { padding-top: 100px; } /*Padding Bottom*/ .sm-p-0px-b { padding-bottom: 0px; } .sm-p-5px-b { padding-bottom: 5px; } .sm-p-10px-b { padding-bottom: 10px; } .sm-p-15px-b { padding-bottom: 15px; } .sm-p-20px-b { padding-bottom: 20px; } .sm-p-25px-b { padding-bottom: 25px; } .sm-p-30px-b { padding-bottom: 30px; } .sm-p-35px-b { padding-bottom: 35px; } .sm-p-40px-b { padding-bottom: 40px; } .sm-p-45px-b { padding-bottom: 45px; } .sm-p-50px-b { padding-bottom: 50px; } .sm-p-55px-b { padding-bottom: 55px; } .sm-p-60px-b { padding-bottom: 60px; } .sm-p-65px-b { padding-bottom: 65px; } .sm-p-70px-b { padding-bottom: 70px; } .sm-p-75px-b { padding-bottom: 75px; } .sm-p-80px-b { padding-bottom: 80px; } .sm-p-85px-b { padding-bottom: 85px; } .sm-p-90px-b { padding-bottom: 90px; } .sm-p-95px-b { padding-bottom: 95px; } .sm-p-100px-b { padding-bottom: 100px; } /*Padding Left*/ .sm-p-0px-l { padding-left: 0px; } .sm-p-5px-l { padding-left: 5px; } .sm-p-10px-l { padding-left: 10px; } .sm-p-15px-l { padding-left: 15px; } .sm-p-20px-l { padding-left: 20px; } .sm-p-25px-l { padding-left: 25px; } .sm-p-30px-l { padding-left: 30px; } .sm-p-35px-l { padding-left: 35px; } .sm-p-40px-l { padding-left: 40px; } .sm-p-45px-l { padding-left: 45px; } .sm-p-50px-l { padding-left: 50px; } .sm-p-55px-l { padding-left: 55px; } .sm-p-60px-l { padding-left: 60px; } .sm-p-65px-l { padding-left: 65px; } .sm-p-70px-l { padding-left: 70px; } .sm-p-75px-l { padding-left: 75px; } .sm-p-80px-l { padding-left: 80px; } .sm-p-85px-l { padding-left: 85px; } .sm-p-90px-l { padding-left: 90px; } .sm-p-95px-l { padding-left: 95px; } .sm-p-100px-l { padding-left: 100px; } /*Padding right*/ .sm-p-0px-r { padding-right: 0px; } .sm-p-5px-r { padding-right: 5px; } .sm-p-10px-r { padding-right: 10px; } .sm-p-15px-r { padding-right: 15px; } .sm-p-20px-r { padding-right: 20px; } .sm-p-25px-r { padding-right: 25px; } .sm-p-30px-r { padding-right: 30px; } .sm-p-35px-r { padding-right: 35px; } .sm-p-40px-r { padding-right: 40px; } .sm-p-45px-r { padding-right: 45px; } .sm-p-50px-r { padding-right: 50px; } .sm-p-55px-r { padding-right: 55px; } .sm-p-60px-r { padding-right: 60px; } .sm-p-65px-r { padding-right: 65px; } .sm-p-70px-r { padding-right: 70px; } .sm-p-75px-r { padding-right: 75px; } .sm-p-80px-r { padding-right: 80px; } .sm-p-85px-r { padding-right: 85px; } .sm-p-90px-r { padding-right: 90px; } .sm-p-95px-r { padding-right: 95px; } .sm-p-100px-r { padding-right: 100px; } /*Padding All %*/ .sm-p-1 { padding: 1%; } .sm-p-1-half { padding: 1.5%; } .sm-p-2 { padding: 2%; } .sm-p-2-half { padding: 2.5%; } .sm-p-3 { padding: 3%; } .sm-p-3-half { padding: 3.5%; } .sm-p-4 { padding: 4%; } .sm-p-4-half { padding: 4.5%; } .sm-p-5 { padding: 5%; } .sm-p-5-half { padding: 5.5%; } .sm-p-6 { padding: 6%; } .sm-p-6-half { padding: 6.5%; } .sm-p-7 { padding: 7%; } .sm-p-7-half { padding: 7.5%; } .sm-p-8 { padding: 8%; } .sm-p-8-half { padding: 8.5%; } .sm-p-9 { padding: 9%; } .sm-p-9-half { padding: 9.5%; } .sm-p-10 { padding: 10%; } .sm-p-10-half { padding: 10.5%; } .sm-p-11 { padding: 11%; } .sm-p-11-half { padding: 11.5%; } .sm-p-12 { padding: 12%; } .sm-p-12-half { padding: 12.5%; } .sm-p-13 { padding: 13%; } .sm-p-13-half { padding: 13.5%; } .sm-p-14 { padding: 14%; } .sm-p-14-half { padding: 14.5%; } .sm-p-15 { padding: 15%; } .sm-p-15-half { padding: 15.5%; } .sm-p-16 { padding: 16%; } .sm-p-16-half { padding: 16.5%; } .sm-p-17 { padding: 17%; } .sm-p-17-half { padding: 17.5%; } .sm-p-18 { padding: 18%; } .sm-p-18-half { padding: 18.5%; } .sm-p-19 { padding: 19%; } .sm-p-19-half { padding: 19.5%; } .sm-p-20 { padding: 20%; } .sm-p-20-half { padding: 20.5%; } .sm-p-21 { padding: 21%; } .sm-p-21-half { padding: 21.5%; } .sm-p-22 { padding: 22%; } .sm-p-22-half { padding: 22.5%; } .sm-p-23 { padding: 23%; } .sm-p-23-half { padding: 23.5%; } .sm-p-24 { padding: 24%; } .sm-p-24-half { padding: 24.5%; } .sm-p-25 { padding: 25%; } .sm-p-25-half { padding: 25.5%; } .sm-p-1-l { padding-left: 1%; } .sm-p-1-half-l { padding-left: 1.5%; } .sm-p-2-l { padding-left: 2%; } .sm-p-2-half-l { padding-left: 2.5%; } .sm-p-3-l { padding-left: 3%; } .sm-p-3-half-l { padding-left: 3.5%; } .sm-p-4-l { padding-left: 4%; } .sm-p-4-half-l { padding-left: 4.5%; } .sm-p-5-l { padding-left: 5%; } .sm-p-5-half-l { padding-left: 5.5%; } .sm-p-6-l { padding-left: 6%; } .sm-p-6-half-l { padding-left: 6.5%; } .sm-p-7-l { padding-left: 7%; } .sm-p-7-half-l { padding-left: 7.5%; } .sm-p-8-l { padding-left: 8%; } .sm-p-8-half-l { padding-left: 8.5%; } .sm-p-9-l { padding-left: 9%; } .sm-p-9-half-l { padding-left: 9.5%; } .sm-p-10-l { padding-left: 10%; } .sm-p-10-half-l { padding-left: 10.5%; } .sm-p-11-l { padding-left: 11%; } .sm-p-11-half-l { padding-left: 11.5%; } .sm-p-12-l { padding-left: 12%; } .sm-p-12-half-l { padding-left: 12.5%; } .sm-p-13-l { padding-left: 13%; } .sm-p-13-half-l { padding-left: 13.5%; } .sm-p-14-l { padding-left: 14%; } .sm-p-14-half-l { padding-left: 14.5%; } .sm-p-15-l { padding-left: 15%; } .sm-p-15-half-l { padding-left: 15.5%; } .sm-p-16-l { padding-left: 16%; } .sm-p-16-half-l { padding-left: 16.5%; } .sm-p-17-l { padding-left: 17%; } .sm-p-17-half-l { padding-left: 17.5%; } .sm-p-18-l { padding-left: 18%; } .sm-p-18-half-l { padding-left: 18.5%; } .sm-p-19-l { padding-left: 19%; } .sm-p-19-half-l { padding-left: 19.5%; } .sm-p-20-l { padding-left: 20%; } .sm-p-20-half-l { padding-left: 20.5%; } .sm-p-21-l { padding-left: 21%; } .sm-p-21-half-l { padding-left: 21.5%; } .sm-p-22-l { padding-left: 22%; } .sm-p-22-half-l { padding-left: 22.5%; } .sm-p-23-l { padding-left: 23%; } .sm-p-23-half-l { padding-left: 23.5%; } .sm-p-24-l { padding-left: 24%; } .sm-p-24-half-l { padding-left: 24.5%; } .sm-p-25-l { padding-left: 25%; } .sm-p-25-half-l { padding-left: 25.5%; } .sm-p-1-r { padding-right: 1%; } .sm-p-1-half-r { padding-right: 1.5%; } .sm-p-2-r { padding-right: 2%; } .sm-p-2-half-r { padding-right: 2.5%; } .sm-p-3-r { padding-right: 3%; } .sm-p-3-half-r { padding-right: 3.5%; } .sm-p-4-r { padding-right: 4%; } .sm-p-4-half-r { padding-right: 4.5%; } .sm-p-5-r { padding-right: 5%; } .sm-p-5-half-r { padding-right: 5.5%; } .sm-p-6-r { padding-right: 6%; } .sm-p-6-half-r { padding-right: 6.5%; } .sm-p-7-r { padding-right: 7%; } .sm-p-7-half-r { padding-right: 7.5%; } .sm-p-8-r { padding-right: 8%; } .sm-p-8-half-r { padding-right: 8.5%; } .sm-p-9-r { padding-right: 9%; } .sm-p-9-half-r { padding-right: 9.5%; } .sm-p-10-r { padding-right: 10%; } .sm-p-10-half-r { padding-right: 10.5%; } .sm-p-11-r { padding-right: 11%; } .sm-p-11-half-r { padding-right: 11.5%; } .sm-p-12-r { padding-right: 12%; } .sm-p-12-half-r { padding-right: 12.5%; } .sm-p-13-r { padding-right: 13%; } .sm-p-13-half-r { padding-right: 13.5%; } .sm-p-14-r { padding-right: 14%; } .sm-p-14-half-r { padding-right: 14.5%; } .sm-p-15-r { padding-right: 15%; } .sm-p-15-half-r { padding-right: 15.5%; } .sm-p-16-r { padding-right: 16%; } .sm-p-16-half-r { padding-right: 16.5%; } .sm-p-17-r { padding-right: 17%; } .sm-p-17-half-r { padding-right: 17.5%; } .sm-p-18-r { padding-right: 18%; } .sm-p-18-half-r { padding-right: 18.5%; } .sm-p-19-r { padding-right: 19%; } .sm-p-19-half-r { padding-right: 19.5%; } .sm-p-20-r { padding-right: 20%; } .sm-p-20-half-r { padding-right: 20.5%; } .sm-p-21-r { padding-right: 21%; } .sm-p-21-half-r { padding-right: 21.5%; } .sm-p-22-r { padding-right: 22%; } .sm-p-22-half-r { padding-right: 22.5%; } .sm-p-23-r { padding-right: 23%; } .sm-p-23-half-r { padding-right: 23.5%; } .sm-p-24-r { padding-right: 24%; } .sm-p-24-half-r { padding-right: 24.5%; } .sm-p-25-r { padding-right: 25%; } .sm-p-25-half-r { padding-right: 25.5%; } .sm-p-1-t { padding-top: 1%; } .sm-p-1-half-t { padding-top: 1.5%; } .sm-p-2-t { padding-top: 2%; } .sm-p-2-half-t { padding-top: 2.5%; } .sm-p-3-t { padding-top: 3%; } .sm-p-3-half-t { padding-top: 3.5%; } .sm-p-4-t { padding-top: 4%; } .sm-p-4-half-t { padding-top: 4.5%; } .sm-p-5-t { padding-top: 5%; } .sm-p-5-half-t { padding-top: 5.5%; } .sm-p-6-t { padding-top: 6%; } .sm-p-6-half-t { padding-top: 6.5%; } .sm-p-7-t { padding-top: 7%; } .sm-p-7-half-t { padding-top: 7.5%; } .sm-p-8-t { padding-top: 8%; } .sm-p-8-half-t { padding-top: 8.5%; } .sm-p-9-t { padding-top: 9%; } .sm-p-9-half-t { padding-top: 9.5%; } .sm-p-10-t { padding-top: 10%; } .sm-p-10-half-t { padding-top: 10.5%; } .sm-p-11-t { padding-top: 11%; } .sm-p-11-half-t { padding-top: 11.5%; } .sm-p-12-t { padding-top: 12%; } .sm-p-12-half-t { padding-top: 12.5%; } .sm-p-13-t { padding-top: 13%; } .sm-p-13-half-t { padding-top: 13.5%; } .sm-p-14-t { padding-top: 14%; } .sm-p-14-half-t { padding-top: 14.5%; } .sm-p-15-t { padding-top: 15%; } .sm-p-15-half-t { padding-top: 15.5%; } .sm-p-16-t { padding-top: 16%; } .sm-p-16-half-t { padding-top: 16.5%; } .sm-p-17-t { padding-top: 17%; } .sm-p-17-half-t { padding-top: 17.5%; } .sm-p-18-t { padding-top: 18%; } .sm-p-18-half-t { padding-top: 18.5%; } .sm-p-19-t { padding-top: 19%; } .sm-p-19-half-t { padding-top: 19.5%; } .sm-p-20-t { padding-top: 20%; } .sm-p-20-half-t { padding-top: 20.5%; } .sm-p-21-t { padding-top: 21%; } .sm-p-21-half-t { padding-top: 21.5%; } .sm-p-22-t { padding-top: 22%; } .sm-p-22-half-t { padding-top: 22.5%; } .sm-p-23-t { padding-top: 23%; } .sm-p-23-half-t { padding-top: 23.5%; } .sm-p-24-t { padding-top: 24%; } .sm-p-24-half-t { padding-top: 24.5%; } .sm-p-25-t { padding-top: 25%; } .sm-p-25-half-t { padding-top: 25.5%; } .sm-p-1-b { padding-bottom: 1%; } .sm-p-1-half-b { padding-bottom: 1.5%; } .sm-p-2-b { padding-bottom: 2%; } .sm-p-2-half-b { padding-bottom: 2.5%; } .sm-p-3-b { padding-bottom: 3%; } .sm-p-3-half-b { padding-bottom: 3.5%; } .sm-p-4-b { padding-bottom: 4%; } .sm-p-4-half-b { padding-bottom: 4.5%; } .sm-p-5-b { padding-bottom: 5%; } .sm-p-5-half-b { padding-bottom: 5.5%; } .sm-p-6-b { padding-bottom: 6%; } .sm-p-6-half-b { padding-bottom: 6.5%; } .sm-p-7-b { padding-bottom: 7%; } .sm-p-7-half-b { padding-bottom: 7.5%; } .sm-p-8-b { padding-bottom: 8%; } .sm-p-8-half-b { padding-bottom: 8.5%; } .sm-p-9-b { padding-bottom: 9%; } .sm-p-9-half-b { padding-bottom: 9.5%; } .sm-p-10-b { padding-bottom: 10%; } .sm-p-10-half-b { padding-bottom: 10.5%; } .sm-p-11-b { padding-bottom: 11%; } .sm-p-11-half-b { padding-bottom: 11.5%; } .sm-p-12-b { padding-bottom: 12%; } .sm-p-12-half-b { padding-bottom: 12.5%; } .sm-p-13-b { padding-bottom: 13%; } .sm-p-13-half-b { padding-bottom: 13.5%; } .sm-p-14-b { padding-bottom: 14%; } .sm-p-14-half-b { padding-bottom: 14.5%; } .sm-p-15-b { padding-bottom: 15%; } .sm-p-15-half-b { padding-bottom: 15.5%; } .sm-p-16-b { padding-bottom: 16%; } .sm-p-16-half-b { padding-bottom: 16.5%; } .sm-p-17-b { padding-bottom: 17%; } .sm-p-17-half-b { padding-bottom: 17.5%; } .sm-p-18-b { padding-bottom: 18%; } .sm-p-18-half-b { padding-bottom: 18.5%; } .sm-p-19-b { padding-bottom: 19%; } .sm-p-19-half-b { padding-bottom: 19.5%; } .sm-p-20-b { padding-bottom: 20%; } .sm-p-20-half-b { padding-bottom: 20.5%; } .sm-p-21-b { padding-bottom: 21%; } .sm-p-21-half-b { padding-bottom: 21.5%; } .sm-p-22-b { padding-bottom: 22%; } .sm-p-22-half-b { padding-bottom: 22.5%; } .sm-p-23-b { padding-bottom: 23%; } .sm-p-23-half-b { padding-bottom: 23.5%; } .sm-p-24-b { padding-bottom: 24%; } .sm-p-24-half-b { padding-bottom: 24.5%; } .sm-p-25-b { padding-bottom: 25%; } .sm-p-25-half-b { padding-bottom: 25.5%; } } /* ---------------------------------------------------- 22. RESPONSIVE -------------------------------------------------------- */ @media only screen and (min-width: 1200px) and (max-width: 1431px) { .bordered-box { width: 70%; top: 30px; } .phone-2 { left: 150px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .bordered-box { width: 50%; height: 80%; top: 30px; } .phone-2 { left: 110px; } .phone-1, .phone-2, .phone-2 { width: 70%; } .featured-mockup, .featured-mockup2, .featured-mockup2 { max-height: 300px; } #testimonials .rotate-heading { left: 10px; } .pricing-head .wave { left: -85px; } } /* Tablet Layout: 768px. */ @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-area h2 { font-size: 28px; } .bordered-box { width: 50%; height: 80%; top: 80px; } .bordered-circle, .bordered-circle2 { width: 400px; height: 400px; left: -200px; } .how_works_arrow { -webkit-transform: rotate(90deg); /* Safari, Chrome */ -moz-transform: rotate(90deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(90deg); /* IE9~10 */ -o-transform: rotate(90deg); /* Opera 10.5~12.10 */ transform: rotate(90deg); } #testimonials .rotate-heading { left: 0px; } #testimonials .rotate-heading h2 { font-size: 50px; } .section-title h2.tlt1 { font-size: 25px; } .featured-1 .bordered-circle2 { right: inherit; left: -60px; } .featured-mockup2 .phone-2 { bottom: -70px; left: 50px; } .apps-buttons .btn.btn-default { margin-right: 10px; padding-left: 40px; font-size: 14px; padding-right: 15px; } .apps-buttons .btn.btn-default i { left: 10px; font-size: 20px; } } /* Mobile Layout: 320px. */ @media only screen and (max-width: 767px) { .hero-area h2 { font-size: 28px; font-weight: 600; } .btn-default { padding: 12px 15px; } .apps-buttons .btn.btn-default { margin-right: 10px; } #feature2 .apps-buttons .btn.btn-default { margin-bottom: 15px; } .hero-area .btn { margin-right: 12px; } .btn-default:last-child { margin-right: 0px; } .section-title h2 { font-size: 32px; } .apps-buttons { text-align: center; } .how_works_arrow { -webkit-transform: rotate(90deg); /* Safari, Chrome */ -moz-transform: rotate(90deg); /* Firefox 3.5~16.0 */ -ms-transform: rotate(90deg); /* IE9~10 */ -o-transform: rotate(90deg); /* Opera 10.5~12.10 */ transform: rotate(90deg); } .bordered-box { width: 60%; top: 30px; height: 50%; } .bordered-circle, .bordered-circle2, .bordered-circle2 { width: 300px; height: 300px; left: -150px; right: inherit; } .section-title h2.tlt1 { font-size: 25px; } .single-testimonial { text-align: center; } .single-testimonial img { margin-bottom: 25px; } #testimonials .rotate-heading { top: 20px; left: 15px; -webkit-transform: translateY(0%) rotate(0deg); /* Safari, Chrome */ -moz-transform: translateY(0%) rotate(0deg); /* Firefox 3.5~16.0 */ -ms-transform: translateY(0%) rotate(0deg); /* IE9~10 */ -o-transform: translateY(0%) rotate(0deg); /* Opera 10.5~12.10 */ transform: translateY(0%) rotate(0deg); } #testimonials .rotate-heading h2 { font-size: 25px; } .single-testimonial { padding-left: 15px; padding-right: 15px; } .phone-2 { left: 100px; z-index: 0; bottom: -50px; } .featured-mockup2 .phone-2 { left: 0; bottom: -60px; } .address-box h5 { font-size: 16px; } } /* Wide Mobile Layout: 480px. */ @media only screen and (min-width: 480px) and (max-width: 767px) { .phone-2 { left: 180px; bottom: 0px; } .featured-mockup2 .phone-2 { left: 0; bottom: 40px; } .pricing-head .wave { top: -265px; left: -40px; width: 595px; height: 450px; } } /*# sourceMappingURL=style.css.map */ /* === ProtoAI Custom Fixes === */ /* Fix double icon display in ServicesGrid */ .services-premium-card .service-icon-wrapper .service-icon::before { display: none !important; } /* Remove any pseudo-element icons */ .services-premium-card .service-icon::before, .services-premium-card .service-icon::after { display: none !important; } /* Ensure only the i element shows the icon */ .services-premium-card .service-icon i { color: white !important; font-size: 3rem !important; } /* Improved list styling for benefit cards */ .benefit-card { background: linear-gradient(135deg, #fff5e6 0%, #ffffff 100%) !important; border-left: none !important; box-shadow: 0 2px 10px rgba(255, 189, 89, 0.1) !important; transition: all 0.3s ease !important; } .benefit-card:hover { box-shadow: 0 5px 20px rgba(255, 189, 89, 0.2) !important; transform: translateY(-3px) !important; } .benefit-card .benefit-icon i { color: #FFBD59 !important; } /* Better color consistency for lead text */ .lead.text-primary { color: #E89F30 !important; /* Darker orange for better readability */ } /* Ensure h3.text-primary has consistent color */ h3.text-primary { color: #E89F30 !important; } /* Better styling for value proposition section */ .value-proposition .lead.text-primary { color: #E89F30 !important; font-size: 1.15rem !important; } /* Clean and modern alert styling */ .alert-primary { background: linear-gradient(135deg, #fff5e6 0%, #ffefdb 100%) !important; border: 1px solid #FFBD59 !important; border-left: none !important; border-radius: 8px !important; color: #333 !important; } .alert-primary .alert-heading { color: #E89F30 !important; } /* Improved list styling for benefits */ .fast-dev-service ul, .solution-section ul, .value-proposition ul { list-style: none !important; padding-left: 0 !important; } .fast-dev-service ul li, .solution-section ul li, .value-proposition ul li { position: relative !important; padding-left: 30px !important; margin-bottom: 12px !important; color: #333 !important; line-height: 1.6 !important; } .fast-dev-service ul li::before, .solution-section ul li::before, .value-proposition ul li::before { content: "▸" !important; position: absolute !important; left: 0 !important; color: #FFBD59 !important; font-weight: bold !important; font-size: 1.2em !important; } /* Fix specific text elements for consistency */ p.lead { font-size: 1.15rem !important; line-height: 1.6 !important; } p.lead.text-primary, .text-primary.lead { color: #E89F30 !important; } /* Ensure proper font weight for headings */ h2.section-title, h3.h3, h3.h4, h4.font-weight-bold { font-weight: 700 !important; } /* === FORCE OVERRIDE STYLES === */ /* Force service icon fix with higher specificity */ .services-premium-card .service-icon-wrapper .service-icon i::before { color: white !important; } .services-premium-card .service-icon::before, .services-premium-card .service-icon::after, .service-icon-wrapper::before, .service-icon-wrapper::after { content: none !important; display: none !important; } /* Force benefit list styles - remove left border from cards */ div.benefit-card, .col-lg-6 .benefit-card, .fast-dev-service .benefit-card { border: none !important; border-left: none !important; background: linear-gradient(135deg, #fff5e6 0%, #ffffff 100%) !important; } /* Force lead text color */ p.lead.text-primary, p.lead.text-primary.font-weight-bold, .lead.text-primary.font-weight-bold.m-20px-b { color: #E89F30 !important; } /* Force benefit items in lists to have proper styling */ .fast-dev-service .benefit-card h4, .fast-dev-service h4.font-weight-bold { color: #333 !important; } .fast-dev-service .benefit-card .benefit-icon i, .benefit-icon i.icofont-3x { color: #FFBD59 !important; } /* Override any conflicting styles for lists in ValueProposition */ .value-proposition p.lead.text-primary.font-weight-bold { color: #E89F30 !important; font-weight: 700 !important; } /* === SPECIFIC FIXES FOR SERVICE CARDS === */ /* Fix benefit preview items styling */ .service-benefits-preview { margin-top: 20px !important; } .service-benefits-preview .benefit-preview-item { display: flex !important; align-items: center !important; margin-bottom: 12px !important; padding: 10px 15px !important; background: linear-gradient(135deg, #fff5e6 0%, #ffffff 100%) !important; border-radius: 6px !important; border: none !important; border-left: none !important; transition: all 0.3s ease !important; } .service-benefits-preview .benefit-preview-item:hover { background: linear-gradient(135deg, #ffefdb 0%, #fff5e6 100%) !important; transform: translateX(5px) !important; } .service-benefits-preview .benefit-preview-item i { color: #FFBD59 !important; font-size: 1.2rem !important; margin-right: 10px !important; flex-shrink: 0 !important; } .service-benefits-preview .benefit-preview-item span { color: #333 !important; font-size: 0.95rem !important; line-height: 1.5 !important; } /* Fix double icon in service-icon */ .service-icon { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } .service-icon::before, .service-icon::after { display: none !important; content: none !important; } .service-icon i { position: relative !important; z-index: 2 !important; color: white !important; font-size: 3rem !important; } /* Remove any additional pseudo elements */ .service-icon i::before { position: relative !important; z-index: 2 !important; } .service-icon i::after { display: none !important; content: none !important; } /* Ensure service-icon-wrapper doesn't create duplicates */ .service-icon-wrapper::before, .service-icon-wrapper::after, .service-icon-wrapper .service-icon::before, .service-icon-wrapper .service-icon::after { display: none !important; content: none !important; } /* === FIX SERVICE ICON CENTERING === */ /* Reset and center service icon */ .service-icon-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 120px !important; margin-bottom: 20px !important; } .service-icon-wrapper .service-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 100px !important; height: 100px !important; background: linear-gradient(135deg, #FFBD59 0%, #E89F30 100%) !important; border-radius: 50% !important; position: relative !important; } .service-icon-wrapper .service-icon i { position: static !important; display: block !important; color: white !important; font-size: 3rem !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; } /* Ensure icon is properly centered */ .services-premium-card .service-icon-wrapper { text-align: center !important; } .services-premium-card .service-icon { margin: 0 auto !important; } /* === FIX CTA BUTTON TEXT VISIBILITY === */ /* Premium action button text to white */ .btn-premium-action, .btn-premium-action span, .service-premium-action a, .service-premium-action a span { color: white !important; } .btn-premium-action i, .service-premium-action a i { color: white !important; } /* Premium CTA button text to white */ .btn-premium-cta, .btn-premium-cta span, .services-premium-cta a, .services-premium-cta a span { color: white !important; } .btn-premium-cta i, .services-premium-cta a i { color: white !important; } /* Ensure hover states maintain white text */ .btn-premium-action:hover, .btn-premium-action:hover span, .btn-premium-cta:hover, .btn-premium-cta:hover span { color: white !important; } /* Fix any consultation/contact button text */ a[href="/contact"], a[href="/contact"] span { color: white !important; } /* === FIX HERO DOWNLOAD BUTTON === */ /* Hero area download button text to white */ .hero-area .btn-filled, .hero-area .btn-default, .hero-area a.btn, .hero-area button { color: white !important; } /* Specifically target download button */ .hero-area .btn-filled:hover, .hero-area .btn-default:hover { color: white !important; opacity: 0.9; } /* Ensure all text in hero buttons is white */ .hero-content .btn, .hero-content .btn-filled, .hero-content a[class*="btn"] { color: white !important; } /* ProtoHero component buttons */ .proto-hero .btn, .proto-hero .btn-filled, .proto-hero button { color: white !important; } /* === FIX: Revert consultation button while keeping download button white === */ /* Reset consultation buttons to original style */ .btn-premium-action, .btn-premium-cta, .services-premium-cta a.btn-premium-cta { background: linear-gradient(135deg, #FFBD59 0%, #E89F30 100%) !important; color: white !important; } /* Keep only hero download button white text */ .hero-area .btn-filled, .proto-hero .btn-filled, .hero-content a.btn-filled { color: white !important; } /* Ensure consultation buttons maintain their gradient background */ a[href="/contact"].btn-premium-action, a[href="/contact"].btn-premium-cta { background: linear-gradient(135deg, #FFBD59 0%, #E89F30 100%) !important; } /* === FINAL FIX: Hero download button proper styling === */ /* Hero download button - white border with white text */ .hero-area .btn-filled, .proto-hero .btn-filled, .hero-content .btn-filled, .proto-hero-content .btn-filled, .btn.btn-filled { background: transparent !important; border: 2px solid white !important; color: white !important; } .hero-area .btn-filled:hover, .proto-hero .btn-filled:hover, .hero-content .btn-filled:hover, .proto-hero-content .btn-filled:hover, .btn.btn-filled:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: white !important; color: white !important; } /* Specific fix for download button */ .proto-hero-content a.btn-filled, .hero-content a[href*="download"], a.btn-filled[href*="download"] { background: transparent !important; border: 2px solid white !important; color: white !important; padding: 12px 30px !important; } /* === PROPER FIX: Hero download button with orange background === */ /* Override previous styles - give download button orange background */ .hero-area .btn-filled, .proto-hero .btn-filled, .hero-content .btn-filled, .proto-hero-content .btn-filled, .btn.btn-filled, .proto-hero-content a.btn-filled, .hero-content a[href*="download"], a.btn-filled[href*="download"] { background: linear-gradient(135deg, #FFBD59 0%, #E89F30 100%) !important; border: none !important; color: white !important; padding: 12px 30px !important; box-shadow: 0 4px 15px rgba(255, 189, 89, 0.3) !important; } .hero-area .btn-filled:hover, .proto-hero .btn-filled:hover, .hero-content .btn-filled:hover, .proto-hero-content .btn-filled:hover, .btn.btn-filled:hover, .proto-hero-content a.btn-filled:hover, a.btn-filled[href*="download"]:hover { background: linear-gradient(135deg, #E89F30 0%, #FFBD59 100%) !important; color: white !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(255, 189, 89, 0.4) !important; } /* === FIX: Specific btn-default button styling === */ /* Hero area consultation button with btn-default class */ .hero-area .btn-default, .proto-hero .btn-default, .hero-content .btn-default, .proto-hero-content .btn-default, a.btn.btn-default { background: linear-gradient(135deg, #FFBD59 0%, #E89F30 100%) !important; border: none !important; color: white !important; padding: 12px 30px !important; box-shadow: 0 4px 15px rgba(255, 189, 89, 0.3) !important; } .hero-area .btn-default:hover, .proto-hero .btn-default:hover, .hero-content .btn-default:hover, .proto-hero-content .btn-default:hover, a.btn.btn-default:hover { background: linear-gradient(135deg, #E89F30 0%, #FFBD59 100%) !important; color: white !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(255, 189, 89, 0.4) !important; } /* Specifically target the consultation button */ a.btn.btn-default[href="/contact"] { background: linear-gradient(135deg, #FFBD59 0%, #E89F30 100%) !important; color: white !important; } a.btn.btn-default[href="/contact"]:hover { background: linear-gradient(135deg, #E89F30 0%, #FFBD59 100%) !important; color: white !important; } /* === SEPARATE BUTTON DESIGNS === */ /* Reset and separate the two button styles */ /* 資料ダウンロード - Outline style (white border) */ .hero-area .btn-filled, .proto-hero .btn-filled, .hero-content .btn-filled, .proto-hero-content .btn-filled { background: transparent !important; border: 2px solid white !important; color: white !important; padding: 12px 30px !important; } .hero-area .btn-filled:hover, .proto-hero .btn-filled:hover, .hero-content .btn-filled:hover, .proto-hero-content .btn-filled:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: white !important; color: white !important; } /* 無料相談を申し込む - Solid fill style */ .hero-area .btn-default, .proto-hero .btn-default, .hero-content .btn-default, .proto-hero-content .btn-default, a.btn.btn-default[href="/contact"] { background: white !important; border: 2px solid white !important; color: #E89F30 !important; /* Orange text on white background */ padding: 12px 30px !important; font-weight: bold !important; } .hero-area .btn-default:hover, .proto-hero .btn-default:hover, .hero-content .btn-default:hover, .proto-hero-content .btn-default:hover, a.btn.btn-default[href="/contact"]:hover { background: rgba(255, 255, 255, 0.9) !important; border-color: white !important; color: #E89F30 !important; transform: translateY(-2px) !important; } /* === FINAL BUTTON STYLING FIX === */ /* 資料ダウンロード - White outline from the start */ .hero-area .btn-filled, .proto-hero .btn-filled, .hero-content .btn-filled, .proto-hero-content .btn-filled, a.btn-filled { background: transparent !important; border: 2px solid white !important; color: white !important; padding: 12px 30px !important; } .hero-area .btn-filled:hover, .proto-hero .btn-filled:hover, .hero-content .btn-filled:hover, .proto-hero-content .btn-filled:hover, a.btn-filled:hover { background: rgba(255, 255, 255, 0.1) !important; border: 2px solid white !important; color: white !important; } /* 無料相談を申し込む - White background, orange text, white text on hover */ .hero-area .btn-default, .proto-hero .btn-default, .hero-content .btn-default, .proto-hero-content .btn-default, a.btn.btn-default[href="/contact"] { background: white !important; border: 2px solid white !important; color: #E89F30 !important; padding: 12px 30px !important; font-weight: bold !important; } .hero-area .btn-default:hover, .proto-hero .btn-default:hover, .hero-content .btn-default:hover, .proto-hero-content .btn-default:hover, a.btn.btn-default[href="/contact"]:hover { background: #E89F30 !important; border: 2px solid #E89F30 !important; color: white !important; /* White text on hover */ transform: translateY(-2px) !important; } /* === BUTTON STYLES - FILLED BUTTONS WITH GRADIENT === */ /* btn-filled: Gradient background with white text for all contexts */ .btn-filled, .hero-area .btn-filled, .proto-hero .btn-filled, .hero-content .btn-filled, .proto-hero-content .btn-filled, a.btn-filled, .btn.btn-filled, .btn-default.btn-filled, *[class*="btn-filled"] { background: linear-gradient(135deg, #FFBD59 0%, #E89F30 100%) !important; border: 2px solid transparent !important; color: #FFFFFF !important; padding: 12px 30px !important; box-sizing: border-box !important; } /* Hover state for filled buttons - reverse gradient */ .btn-filled:hover, a.btn-filled:hover, .btn.btn-filled:hover, .btn-default.btn-filled:hover, *[class*="btn-filled"]:hover { background: linear-gradient(135deg, #E89F30 0%, #FFBD59 100%) !important; border: 2px solid transparent !important; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, .2); } /* === CORRECT CLASS FOR DOWNLOAD BUTTON === */ /* 資料ダウンロード - btn-default-outline with white border */ .btn-default-outline, .btn.btn-default-outline, a.btn-default-outline, .hero-area .btn-default-outline, .proto-hero .btn-default-outline { background: transparent !important; border: 2px solid white !important; color: white !important; padding: 12px 30px !important; } .btn-default-outline:hover, .btn.btn-default-outline:hover, a.btn-default-outline:hover, .hero-area .btn-default-outline:hover, .proto-hero .btn-default-outline:hover { background: rgba(255, 255, 255, 0.1) !important; border: 2px solid white !important; color: white !important; } /* Specific targeting for the download button */ a.btn.btn-default.btn-default-outline { background: transparent !important; border: 2px solid white !important; color: white !important; } a.btn.btn-default.btn-default-outline:hover { background: rgba(255, 255, 255, 0.1) !important; border: 2px solid white !important; color: white !important; }