/* Template Name: MobiCom - Mobile App Landing Page Template Theme URL: https://themeforest.net/user/dsathemes Description: MobiCom - Mobile App Landing Page Template Author: DSAThemes Author URL: https://themeforest.net/user/dsathemes Version: 1.2.0 Website: www.dsathemes.com Tags: Responsive, HTML5 template, DSAThemes, Mobile, Application, One Page, Landing, Mobile App */ /* =========================================================================== 01. GENERAL & BASIC STYLES =========================================================================== */ html { -webkit-font-smoothing: antialiased; font-size: 16px; } body { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; font-weight: 300; } /*------------------------------------------------------------------*/ /* IE10 in Windows 8 and Windows Phone 8 Bug fix /*-----------------------------------------------------------------*/ @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } /*------------------------------------------*/ /* PAGE CONTENT /*------------------------------------------*/ #page { overflow: hidden; } /*------------------------------------------*/ /* ONSCROLL ANIMATIONS /*------------------------------------------*/ .animated { visibility: hidden; } .visible { visibility: visible; } /*------------------------------------------*/ /* SPACING & INDENTS /*------------------------------------------*/ .ind-60 { padding-right: 60px; padding-left: 60px; } .ind-50 { padding-right: 50px; padding-left: 50px; } .ind-45 { padding-right: 45px; padding-left: 45px; } .ind-35 { padding-right: 35px; padding-left: 35px; } .ind-30 { padding-right: 30px; padding-left: 30px; } .ind-25 { padding-right: 25px; padding-left: 25px; } .ind-20 { padding-right: 20px; padding-left: 20px; } .ind-15 { padding-right: 15px; padding-left: 15px; } .ind-10 { padding-right: 10px; padding-left: 10px; } .ind-5 { padding-right: 5px; padding-left: 5px; } .wide-160 { padding-top: 160px; padding-bottom: 160px; } .wide-150 { padding-top: 150px; padding-bottom: 150px; } .wide-140 { padding-top: 140px; padding-bottom: 140px; } .wide-130 { padding-top: 130px; padding-bottom: 130px; } .wide-120 { padding-top: 120px; padding-bottom: 120px; } .wide-110 { padding-top: 110px; padding-bottom: 110px; } .wide-100 { padding-top: 100px; padding-bottom: 100px; } .wide-90 { padding-top: 100px; padding-bottom: 90px; } .wide-80 { padding-top: 100px; padding-bottom: 80px; } .wide-70 { padding-top: 100px; padding-bottom: 70px; } .wide-60 { padding-top: 100px; padding-bottom: 60px; } .wide-50 { padding-top: 100px; padding-bottom: 50px; } .wide-40 { padding-top: 100px; padding-bottom: 40px; } .wide-30 { padding-top: 100px; padding-bottom: 30px; } /*------------------------------------------*/ /* Margin Top /*------------------------------------------*/ .m-top-160 { margin-top: 160px; } .m-top-150 { margin-top: 150px; } .m-top-140 { margin-top: 140px; } .m-top-130 { margin-top: 130px; } .m-top-120 { margin-top: 120px; } .m-top-110 { margin-top: 110px; } .m-top-100 { margin-top: 100px; } .m-top-90 { margin-top: 90px; } .m-top-80 { margin-top: 80px; } .m-top-70 { margin-top: 70px; } .m-top-60 { margin-top: 60px; } .m-top-50 { margin-top: 50px; } .m-top-45 { margin-top: 45px; } .m-top-40 { margin-top: 40px; } .m-top-35 { margin-top: 35px; } .m-top-30 { margin-top: 30px; } .m-top-25 { margin-top: 25px; } .m-top-20 { margin-top: 20px; } .m-top-15 { margin-top: 15px; } .m-top-10 { margin-top: 10px; } .m-top-5 { margin-top: 5px; } /*------------------------------------------*/ /* Margin Bottom /*------------------------------------------*/ .m-bottom-160 { margin-bottom: 160px; } .m-bottom-150 { margin-bottom: 150px; } .m-bottom-140 { margin-bottom: 140px; } .m-bottom-130 { margin-bottom: 130px; } .m-bottom-120 { margin-bottom: 120px; } .m-bottom-110 { margin-bottom: 110px; } .m-bottom-100 { margin-bottom: 100px; } .m-bottom-90 { margin-bottom: 90px; } .m-bottom-80 { margin-bottom: 80px; } .m-bottom-70 { margin-bottom: 70px; } .m-bottom-60 { margin-bottom: 60px; } .m-bottom-50 { margin-bottom: 50px; } .m-bottom-45 { margin-bottom: 45px; } .m-bottom-40 { margin-bottom: 40px; } .m-bottom-35 { margin-bottom: 35px; } .m-bottom-30 { margin-bottom: 30px; } .m-bottom-25 { margin-bottom: 25px; } .m-bottom-20 { margin-bottom: 20px; } .m-bottom-15 { margin-bottom: 15px; } .m-bottom-10 { margin-bottom: 10px; } .m-bottom-5 { margin-bottom: 5px; } .m-bottom-0 { margin-bottom: 0; } /*------------------------------------------*/ /* Margin Left /*------------------------------------------*/ .m-left-70 { margin-left: 70px; } .m-left-60 { margin-left: 60px; } .m-left-50 { margin-left: 50px; } .m-left-45 { margin-left: 45px; } .m-left-40 { margin-left: 40px; } .m-left-35 { margin-left: 35px; } .m-left-30 { margin-left: 30px; } .m-left-25 { margin-left: 25px; } .m-left-20 { margin-left: 20px; } .m-left-15 { margin-left: 15px; } .m-left-10 { margin-left: 10px; } .m-left-5 { margin-left: 5px; } /*------------------------------------------*/ /* Margin Right /*------------------------------------------*/ .m-right-70 { margin-right: 70px; } .m-right-60 { margin-right: 60px; } .m-right-50 { margin-right: 50px; } .m-right-45 { margin-right: 45px; } .m-right-40 { margin-right: 40px; } .m-right-35 { margin-right: 35px; } .m-right-30 { margin-right: 30px; } .m-right-25 { margin-right: 25px; } .m-right-20 { margin-right: 20px; } .m-right-15 { margin-right: 15px; } .m-right-10 { margin-right: 10px; } .m-right-5 { margin-right: 5px; } /*------------------------------------------*/ /* Padding Top /*------------------------------------------*/ .p-top-160 { padding-top: 160px; } .p-top-150 { padding-top: 150px; } .p-top-140 { padding-top: 140px; } .p-top-130 { padding-top: 130px; } .p-top-120 { padding-top: 120px; } .p-top-110 { padding-top: 110px; } .p-top-100 { padding-top: 100px; } .p-top-90 { padding-top: 90px; } .p-top-80 { padding-top: 80px; } .p-top-70 { padding-top: 70px; } .p-top-60 { padding-top: 60px; } .p-top-50 { padding-top: 50px; } .p-top-45 { padding-top: 45px; } .p-top-40 { padding-top: 40px; } .p-top-35 { padding-top: 35px; } .p-top-30 { padding-top: 30px; } .p-top-25 { padding-top: 25px; } .p-top-20 { padding-top: 20px; } .p-top-15 { padding-top: 15px; } .p-top-10 { padding-top: 10px; } /*------------------------------------------*/ /* Padding Bottom /*------------------------------------------*/ .p-bottom-160 { padding-bottom: 160px; } .p-bottom-150 { padding-bottom: 150px; } .p-bottom-140 { padding-bottom: 140px; } .p-bottom-130 { padding-bottom: 130px; } .p-bottom-120 { padding-bottom: 120px; } .p-bottom-110 { padding-bottom: 110px; } .p-bottom-100 { padding-bottom: 100px; } .p-bottom-90 { padding-bottom: 90px; } .p-bottom-80 { padding-bottom: 80px; } .p-bottom-70 { padding-bottom: 70px; } .p-bottom-60 { padding-bottom: 60px; } .p-bottom-50 { padding-bottom: 50px; } .p-bottom-45 { padding-bottom: 45px; } .p-bottom-40 { padding-bottom: 40px; } .p-bottom-35 { padding-bottom: 35px; } .p-bottom-30 { padding-bottom: 30px; } .p-bottom-25 { padding-bottom: 25px; } .p-bottom-20 { padding-bottom: 20px; } .p-bottom-15 { padding-bottom: 15px; } .p-bottom-10 { padding-bottom: 10px; } .p-bottom-0 { padding-bottom: 0; } /*------------------------------------------*/ /* Padding Left /*------------------------------------------*/ .p-left-100 { padding-left: 100px; } .p-left-90 { padding-left: 90px; } .p-left-80 { padding-left: 80px; } .p-left-70 { padding-left: 70px; } .p-left-60 { padding-left: 60px; } .p-left-50 { padding-left: 50px; } .p-left-45 { padding-left: 45px; } .p-left-40 { padding-left: 40px; } .p-left-35 { padding-left: 35px; } .p-left-30 { padding-left: 30px; } .p-left-25 { padding-left: 25px; } .p-left-20 { padding-left: 20px; } .p-left-15 { padding-left: 15px; } .p-left-10 { padding-left: 10px; } .p-left-5 { padding-left: 5px; } .p-left-0 { padding-left: 0px; } /*------------------------------------------*/ /* Padding Right /*------------------------------------------*/ .p-right-100 { padding-right: 100px; } .p-right-90 { padding-right: 90px; } .p-right-80 { padding-right: 80px; } .p-right-70 { padding-right: 70px; } .p-right-60 { padding-right: 60px; } .p-right-50 { padding-right: 50px; } .p-right-45 { padding-right: 45px; } .p-right-40 { padding-right: 40px; } .p-right-35 { padding-right: 35px; } .p-right-30 { padding-right: 30px; } .p-right-25 { padding-right: 25px; } .p-right-20 { padding-right: 20px; } .p-right-15 { padding-right: 15px; } .p-right-10 { padding-right: 10px; } .p-right-5 { padding-right: 5px; } .p-right-0 { padding-right: 0px; } /*------------------------------------------*/ /* BACKGROUND SETTINGS /*------------------------------------------*/ .bg-scroll { width: 100%; background-attachment: fixed !important; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg-fixed { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } /*------------------------------------------*/ /* Background Colors for Sections /*------------------------------------------*/ .bg-lightgrey { background-color: #f0f0f0; } .bg-grey { background-color: #e8e8e8 } .bg-red { background-color: #e35029; } .bg-yellow { background-color: #feca16; } .bg-green { background-color: #42a045; } .bg-blue { background-color: #242d4d; } .bg-lightblue { background-color: #1e88e5; } .bg-purple { background-color: #783bb1; } .bg-lightpurple { background-color: #715fef; } /*------------------------------------------*/ /* BORDER SETTINGS FOR DEMOS /*------------------------------------------*/ .b-top { border-top: 1px solid #ddd; } .b-bottom { border-bottom: 1px solid #ddd; } .b-left { border-left: 1px solid #ddd; } .b-right { border-right: 1px solid #ddd; } /* ========================================================================== 02. TYPOGRAPHY =========================================================================== */ /*------------------------------------------*/ /* HEADERS /*------------------------------------------*/ h1, h2, h3, h4, h5, h6 { color: #222; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: -0.025rem; /* -0.4px */ } /* Header H5 */ h5.h5-xs { font-size: 1.125rem; } /* 18px */ h5.h5-sm { font-size: 1.1875rem; } /* 19px */ h5.h5-md { font-size: 1.25rem; } /* 20px */ h5.h5-lg { font-size: 1.375rem; } /* 22px */ h5.h5-xl { font-size: 1.5rem; } /* 24px */ /* Header H4 */ h4.h4-xs { font-size: 1.625rem; } /* 26px */ h4.h4-sm { font-size: 1.75rem; } /* 28px */ h4.h4-md { font-size: 1.875rem; } /* 30px */ h4.h4-lg { font-size: 2rem; } /* 32px */ h4.h4-xl { font-size: 2.125rem; } /* 34px */ /* Header H3 */ h3.h3-xs { font-size: 2.375rem; } /* 38px */ h3.h3-sm { font-size: 2.5rem; } /* 40px */ h3.h3-md { font-size: 2.625rem; } /* 42px */ h3.h3-lg { font-size: 2.75rem; } /* 44px */ h3.h3-xl { font-size: 3rem; } /* 48px */ /* Header H2 */ h2.h2-xs { font-size: 3.25rem; } /* 52px */ h2.h2-sm { font-size: 3.375rem; } /* 54px */ h2.h2-md { font-size: 3.5rem; } /* 56px */ h2.h2-lg { font-size: 3.75rem; } /* 60px */ h2.h2-xl { font-size: 4rem; } /* 64px */ /*------------------------------------------*/ /* PARAGRAPHS /*------------------------------------------*/ p.p-sm { font-size: 0.95rem; } /* 15.2px */ p { font-size: 1rem; } /* 16px */ p.p-md { font-size: 1.125rem; } /* 18px */ p.p-lg { font-size: 1.25rem; } /* 20px */ p.p-xl { font-size: 1.3175rem; } /* 22px */ /*------------------------------------------*/ /* LISTS /*------------------------------------------*/ ul { margin: 0; padding: 0; list-style: none; } /*------------------------------------------*/ /* LINK SETTINGS /*------------------------------------------*/ a { color: #333; text-decoration: none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } a:hover { color: #666; text-decoration: none; } a:focus { outline: none; text-decoration: none; } /*------------------------------------------*/ /* BUTTON SETTINGS /*------------------------------------------*/ .btn { background-color: #e35029; color: #fff; font-size: 1rem; line-height: 1; font-weight: 400; letter-spacing: 0; padding: 1rem 2rem; border: 2px solid #e35029; position:relative; z-index: 2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .btn:before { background-color: rgba(255, 255, 255, 0.15); position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content:''; z-index:-2; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; transition: 0.5s all ease; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .btn-white:before, .btn-tra-black:before { background-color: rgba(0, 0, 0, 0.75); } /*------------------------------------------*/ /* Button Color /*------------------------------------------*/ .btn-black { color: #fff; background-color: #333; border-color: #333; } .btn-white { color: #333; background-color: #fff; border-color: #fff; } .btn-tra-white { color: #fff; background-color: transparent; border-color: #fff; } .btn-tra-black { color: #333; background-color: transparent; border-color: #333; } .btn-yellow { color: #333; background-color: #feca16; border-color: #feca16; } .white-color .btn-yellow { color: #333; } .btn-lightblue { color: #fff; background-color: #42a5f5; border-color: #42a5f5; } .btn-green { color: #fff; background-color: #56a959; border-color: #56a959; } .btn-lightgreen { color: #fff; background-color: #41bf2b; border-color: #41bf2b; } .btn-purple { color: #fff; background-color: #513c97; border-color: #513c97; } .btn-lightpurple { color: #fff; background-color: #715fef; border-color: #715fef; } .btn-teal { color: #fff; background-color: #2c95ce; border-color: #2c95ce; } /*------------------------------------------*/ /* Button Hover /*------------------------------------------*/ .btn:hover { color: #fff; } .btn-tra-yellow:hover, .btn-yellow:hover { color: #333; } .btn-white:hover { border-color: #444; } .btn:hover::before { left: 0; right: 0; opacity: 1; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; transition: 0.5s all ease; } /*------------------------------------------*/ /* Button Focus /*------------------------------------------*/ .btn:focus { color: #fff; -webkit-box-shadow: none; box-shadow: none; } /*------------------------------------------*/ /* STORE BAGE ICONS /*------------------------------------------*/ a.store { margin-right: 15px; } .btn:last-child, a.store:last-child { margin-right: 0; } /*------------------------------------------*/ /* Video Link /*------------------------------------------*/ .modal-video { display: inline-block; vertical-align: middle; line-height: 2.15rem; } .modal-video a span { font-size: 2.15rem; line-height: 2.15rem; margin-right: 4px; vertical-align: middle; } .modal-video a { font-size: 1.05rem; line-height: 2.15rem; font-weight: 400; } /*------------------------------------------*/ /* Video Popup Icon /*------------------------------------------*/ .play-icon-green { width: 120px; height: 120px; background: url(../images/play-icon-green.png); position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -60px; opacity: .85; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .play-icon-green:hover { opacity: 1; } /*------------------------------------------*/ /* BOX ICONS /*------------------------------------------*/ .box-icon span { font-size: 4rem; } .box-icon-xs span { font-size: 3rem; } .box-icon-sm span { font-size: 3.5rem; } .box-icon-md span { font-size: 4.5rem; } .box-icon-lg span { font-size: 5rem; } .box-icon-xl span { font-size: 5.5rem; } /*------------------------------------------*/ /* BOX ICON COLOR /*------------------------------------------*/ .grey-icon span { color: #757575; } .red-icon span { background: -webkit-gradient(linear, left top, left bottom, from(#ee041a), to(#ff8212)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .green-icon span { background: -webkit-gradient(linear, left top, left bottom, from(#029c09), to(#02ce0b)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .blue-icon span { background: -webkit-gradient(linear, left top, left bottom, from(#1d07f4), to(#37a7fc)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .skyblue-icon span { color: #42a5f5; } .purple-icon span { background: -webkit-gradient(linear, left top, left bottom, from(#1d07f4), to(#f402b8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /*------------------------------------------*/ /* QUOTE /*------------------------------------------*/ .quote p { color: #666; font-style: italic; border-left: 3px solid #6bbb28; padding-left: 20px; margin-top: 25px; margin-bottom: 20px; } /*------------------------------------------*/ /* Quote Avatar /*------------------------------------------*/ .quote-avatar { display: inline-block; margin: 0 auto; } .quote-avatar img { width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .quote-author { display: inline-block; padding: 0 0 0 15px; text-align: left; position: relative; top: 10px; } /*------------------------------------------*/ /* Quote Avatar /*------------------------------------------*/ .quote-author h5 { margin-bottom: 0; } .quote-author span { font-size: 1rem; font-weight: 300; display: block; } /*------------------------------------------*/ /* APP DEVICES /*------------------------------------------*/ .app-devices { padding: 15px 0 0 5px; } /*------------------------------------------*/ /* App Devices Icons /*------------------------------------------*/ .app-devices .svg-inline--fa { color: rgba(50, 50, 50, 0.3); font-size: 2.6rem; line-height: 1!important; float: left; margin-right: 0.65rem; } .bg-green .app-devices .svg-inline--fa, .bg-lightpurple .app-devices .svg-inline--fa, .bg-lightblue .app-devices .svg-inline--fa { color: rgba(240, 240, 240, 0.5); } .app-devices .svg-inline--fa.f-tablet { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .app-devices .svg-inline--fa.f-phone { margin-right: 1.25rem; } .app-devices-desc p { font-style: italic; line-height: 1.25; padding-right: 20%; margin-bottom: 0; } /*------------------------------------------*/ /* BOX LIST /*------------------------------------------*/ .box-list-icon { font-size: 0.9rem; line-height: 1.5rem; float: left; margin-right: 10px; } .box-list p { overflow: hidden; margin-bottom: 8px; } /*------------------------------------------*/ /* SECTION TITLE /*------------------------------------------*/ .section-title { position: relative; text-align: center; margin-bottom: 60px; } .section-title h2 { letter-spacing: -1.5px; } .section-title p { font-size: 1.3125rem; /* 21px */ padding: 0 15%; } #content-7 .section-title p, #content-8 .section-title p { margin-top: 20px; padding: 0 5%; } #content-8 .section-title { margin-bottom: 20px; } /*------------------------------------------*/ /* TEXT WEIGHT /*------------------------------------------*/ .txt-300 { font-weight: 300; } .txt-400 { font-weight: 400; } .txt-500 { font-weight: 500; } .txt-600 { font-weight: 600; } .txt-700 { font-weight: 700; } .txt-800 { font-weight: 800; } .txt-900 { font-weight: 900; } .txt-upper { text-transform: uppercase; } /*------------------------------------------*/ /* TEXT SETTINGS FOR DEMOS /*------------------------------------------*/ .white-color, .white-color h2, .white-color h3, .white-color h4, .white-color h5, .white-color h6, .white-color p, .white-color a, .white-color li, .white-color i, .white-color span { color: #fff; } .grey-color, .grey-color h2, .grey-color h3, .grey-color h4, .grey-color h5, .grey-color h6, .grey-color p, .grey-color a, .grey-color li, .grey-color span { color: #666; } .lightgrey-color, .lightgrey-color h2, .lightgrey-color h3, .lightgrey-color h4, .lightgrey-color h5, .lightgrey-color p, .lightgrey-color a, .lightgrey-color li, .lightgrey-color span { color: #ccc; } .yellow-color, .yellow-color h2, .yellow-color h3, .yellow-color h4, .yellow-color h5, .yellow-color h6, .yellow-color p, .yellow-color a, .yellow-color li, .yellow-color i, .yellow-color span { color: #f4c744; } .green-color, .green-color h2, .green-color h3, .green-color h4, .green-color h5, .green-color h6, .green-color p, .green-color a, .green-color li, .green-color i, .green-color span { color: #42a045; } .blue-color, .blue-color h2, .blue-color h3, .blue-color h4, .blue-color h5, .blue-color h6, .blue-color p, .blue-color a, .blue-color li, .blue-color i, .blue-color span { color: #01b7de; } .red-color, .red-color h2, .red-color h3, .red-color h4, .red-color h5, .red-color h6, .red-color p, .red-color a, .red-color li, .red-color i, .red-color span { color: #e35029; } /* ========================================================================== 03. PRELOAD SPINNER =========================================================================== */ #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: #fff; } #loader { display: block; position: relative; left: 50%; top: 50%; margin: -50px 0 0 -50px; } .cssload-flex-container li { height: 100px; width: 100px; position: relative; text-align: center; } .cssload-loading { display: inline-block; position: relative; width: 83px; height: 83px; border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border: 5px solid transparent; border-bottom: 5px solid rgb(40,40,40); border-left: 5px solid rgb(40,40,40); animation: cssload-spinR 2.3s linear infinite; -o-animation: cssload-spinR 2.3s linear infinite; -ms-animation: cssload-spinR 2.3s linear infinite; -webkit-animation: cssload-spinR 2.3s linear infinite; -moz-animation: cssload-spinR 2.3s linear infinite; } .cssload-loading:before, .cssload-loading:after { content: ''; display: block; border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; position: absolute; } .cssload-loading:before { height: 49px; width: 49px; border: 3px solid transparent; border-top: 3px solid rgb(40,40,40); border-right: 3px solid rgb(40,40,40); animation: cssload-spinL 0.86s linear infinite; -o-animation: cssload-spinL 0.86s linear infinite; -ms-animation: cssload-spinL 0.86s linear infinite; -webkit-animation: cssload-spinL 0.86s linear infinite; -moz-animation: cssload-spinL 0.86s linear infinite; transform-origin: center center; -o-transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; -moz-transform-origin: center center; top: 11%; left: 11%; } .cssload-loading:after { height: 10px; width: 10px; background: transparent; border: 2px solid rgb(40,40,40); top: 35.5%; left: 35.5%; } @keyframes cssload-spinR { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes cssload-spinR { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @-ms-keyframes cssload-spinR { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-webkit-keyframes cssload-spinR { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes cssload-spinR { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes cssload-spinL { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @-o-keyframes cssload-spinL { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(-360deg); } } @-ms-keyframes cssload-spinL { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); } } @-webkit-keyframes cssload-spinL { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } @-moz-keyframes cssload-spinL { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } } /* ========================================================================== 03. HEADER & NAVIGATION =========================================================================== */ /*------------------------------------------*/ /* LOGO IMAGE /*------------------------------------------*/ .navbar-brand { padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; } .navbar-dark .navbar-nav .nav-link { color: #fff; } .navbar-light .navbar-nav .nav-link { color: #555; } .bg-light { background-color: #fff!important; box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); } .header .nb-line { border-bottom: 1px solid rgba(255, 255, 255, .18); } /*------------------------------------------*/ /* NAVIGATION BAR /*------------------------------------------*/ .navbar { padding: 0.75rem 1rem; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .navbar.bg-tra { padding: 2.25rem 1rem; background-color: transparent; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .navbar-expand-lg .navbar-nav .nav-link { font-size: 1.05rem; font-weight: 500; padding: 0.65rem 1.5rem; margin-left: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .navbar-expand-lg .navbar-nav .nav-link.pre-link { position: relative; } .navbar-expand-lg .navbar-nav .nav-link span { background-color: #41bf2b; width: 5px; height: 5px; display: block; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 14px; right: 18px; } .dropdown-item { padding-top: 0.5rem; padding-bottom: 0.5rem; } .dropdown-toggle::after { vertical-align: .175em; } /*------------------------------------------*/ /* Navbar Social Icons /*------------------------------------------*/ .header-socials { margin-top: 4px; margin-left: 4px; display: inline-block; text-align: center; } .header-socials span { float: left; width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; margin-left: 5px; } .header-socials a { width: 38px; height: 38px; background-color: transparent; display: block; color: #fff; font-size: 1rem; line-height: 34px !important; border: 2px solid #fff; margin-left: 3px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .navbar-light .header-socials a { color: #333; border: 2px solid #333; } .header-socials a:hover { background-color: rgba(255, 255, 255, .65); border-color: rgba(255, 255, 255, .45); color: #333; } .navbar-light .header-socials a:hover { background-color: rgba(20, 20, 20, .75); border-color: rgba(20, 20, 20, .45); color: #fff; } /*------------------------------------------*/ /* Navbar Store Badge /*------------------------------------------*/ .header-store { margin-left: 5px; } /*------------------------------------------*/ /* Navigation Menu Hover /*------------------------------------------*/ .navbar-light .nav-link:focus, .navbar-light .nav-link:hover { color: #fff; background-color: rgba(140, 140, 140, 0.2); } .navbar-dark .nav-link:focus, .navbar-dark .nav-link:hover { color: #fff; background-color: rgba(240, 240, 240, 0.2); } .dropdown-item:focus, .dropdown-item:hover { color: #333; text-decoration: none; background-color: #eee; } /*------------------------------------------*/ /* Navbar Scroll /*------------------------------------------*/ .navbar.scroll.bg-tra { padding: 12px 0; background-color: #fcfcfc; box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); } .navbar.scroll.navbar-dark.bg-tra .nav-link { color: #666; } .navbar.scroll.navbar-dark.bg-tra .nav-link:hover { background-color: rgba(200, 200, 200, 0.35); } .navbar.scroll .header-socials a { color: #666; border: 2px solid #666; } .navbar.scroll .header-socials a:hover { color: #fff; } .navbar.scroll .header-socials a.ico-facebook:hover { background-color: #3b5998; border-color: #3b5998; } .navbar.scroll .header-socials a.ico-twitter:hover { background-color: #00a9ed; border-color: #00a9ed; } .navbar.scroll .header-socials a.ico-behance:hover { background-color: #2473f6; border-color: #2473f6; } .navbar.scroll .header-socials a.ico-google-plus:hover { background-color: #cd1111; border-color: #cd1111; } .navbar.scroll .header-socials a.ico-linkedin:hover { background-color: #015886; border-color: #015886; } .navbar.scroll .header-socials a.ico-dribbble:hover { background-color: #d92d84; border-color: #d92d84; } .navbar.scroll .header-socials a.ico-instagram:hover { background-color: #beb3a8; border-color: #beb3a8; } .navbar.scroll .header-socials a.ico-pinterest:hover { background-color: #ac281a; border-color: #ac281a; } .navbar.scroll .header-socials a.ico-youtube:hover { background-color: #cd1b20; border-color: #cd1b20; } .navbar.scroll .header-socials a.ico-tumblr:hover { background-color: #3a5976; border-color: #3a5976; } .navbar.scroll .header-socials a.ico-vk:hover { background-color: #3b5998; border-color: #3b5998;} /*------------------------------------------*/ /* Responsive Burger Menu /*------------------------------------------*/ .navbar-light .navbar-toggler, .navbar.bg-tra .navbar-toggler { color: #888; border-color: #888; padding: 0.25rem 0.5rem; font-size: 1.05rem; } .navbar-dark.bg-tra .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .navbar-toggler:focus { outline: 0; } /*------------------------------------------*/ /* Logo Image /*------------------------------------------*/ .logo-white, .logo-black { display: block; } .navbar-dark.bg-tra .logo-black, .navbar-light.bg-tra .logo-white, .scroll.navbar-dark.bg-tra .logo-white, .navbar-dark.bg-dark .logo-black, .navbar-light.bg-light .logo-white { display: none; } .navbar-dark.bg-tra .logo-white, .navbar-light.bg-tra .logo-black, .scroll.navbar-dark.bg-tra .logo-black, .navbar-dark.bg-dark .logo-white, .navbar-light.bg-light .logo-black { display: block; } /* ========================================================================== 04. HERO =========================================================================== */ .hero-section .container { position: relative; z-index: 10; } #hero-1 { position: relative; background-image: url(../images/hero-1.jpg); background-position: center bottom; padding-top: 180px; padding-bottom: 100px; } #hero-2 { background-image: url(../images/hero-2.png); background-position: right bottom; padding-top: 160px; padding-bottom: 60px; } #hero-3 { position: relative; background-image: url(../images/bg-dotted.png); } #hero-4 { background-image: url(../images/tra-bg-1.png); padding-top: 170px; } #hero-5 { background-image: url(../images/hero-5.png); padding-top: 160px; padding-bottom: 80px; } #hero-6 { background-image: url(../images/hero-6.jpg); } #hero-7, #privacy-hero { background-image: url(../images/doctor_1.png); background-position: bottom center; padding-top: 150px; padding-bottom: 100px; } #hero-8 { background-image: url(../images/hero-8.jpg); } .hero-9-text { background-image: url(../images/hero-9.jpg); background-position: center bottom ; } #hero-10 { background-image: url(../images/hero-10.png); padding-top: 150px; padding-bottom: 100px; } #hero-11 { position: relative; background: -moz-linear-gradient(top, rgba(120, 59, 177, 1) 0%, rgba(71, 47, 173, 1) 100%); background: -webkit-linear-gradient(top, rgba(120, 59, 177, 1) 0%,rgba(71, 47, 173, 1) 100%); background: linear-gradient(to bottom, rgba(120, 59, 177, 1) 0%,rgba(71, 47, 173, 1) 100%); } #hero-12 { background-image: url(../images/hero-12.jpg); } /*------------------------------------------*/ /* HERO SPACING & ALIGNMENT /*------------------------------------------*/ .hero-row-200 { padding-top: 220px; padding-bottom: 180px; } .hero-row-180 { padding-top: 200px; padding-bottom: 160px; } .hero-row-160 { padding-top: 180px; padding-bottom: 140px; } .hero-row-140 { padding-top: 160px; padding-bottom: 140px; } .hero-row-120 { padding-top: 150px; padding-bottom: 120px; } .hero-row-100 { padding-top: 130px; padding-bottom: 100px; } /*------------------------------------------*/ /* HERO APP LOGO /*------------------------------------------*/ .hero-app-logo { margin-bottom: 25px; } #hero-4 .hero-app-logo { margin-bottom: 30px; } #hero-8 .hero-app-logo { margin-bottom: 40px; } /*------------------------------------------*/ /* HERO APP BIG TITLE /*------------------------------------------*/ .hero-app-logo span { font-size: 4.25rem; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: -3px; padding-left: 20px; } /*------------------------------------------*/ /* HERO TEXT /*------------------------------------------*/ #hero-1 .hero-txt { margin-top: 120px; } #hero-9-content { padding-top: 180px; padding-bottom: 380px; } /*------------------------------------------*/ /* Hero Headers /*------------------------------------------*/ .hero-section h4, .hero-section h3, .hero-section h2 { margin-bottom: 20px; } #hero-1.hero-section h2 { margin-bottom: 25px; } #hero-10.hero-section h2 { margin-bottom: 35px; } .hero-section h4 span, .hero-section h3 span, .hero-section h2 span { font-weight: 700; } /*------------------------------------------*/ /* Hero Paragraph /*------------------------------------------*/ #hero-1 .hero-txt p, #hero-11 .hero-txt p { padding-right: 5%; } #hero-5 .hero-txt p { padding-right: 15%; } #hero-8 .hero-txt p { padding-bottom: 30px; } #hero-9 .hero-txt p { padding: 0 10%; margin-bottom: 30px; } #hero-12 .hero-txt p { padding-bottom: 10px; } /*------------------------------------------*/ /* HERO LINKS /*------------------------------------------*/ .hero-links { margin-top: 10px; } .hero-links span { font-size: 0.95rem; line-height: 1; margin-right: 25px; } .hero-links span:last-child { margin-right: 0 } .hero-links span a { text-decoration: underline; } .hero-links span a:hover { color: #444; } /*------------------------------------------*/ /* HERO BUTTONS /*------------------------------------------*/ #hero-4 .btn { margin-top: 25px; margin-bottom: 50px; } /*------------------------------------------*/ /* HERO STORE BADGES /*------------------------------------------*/ .hero-stores-badge { margin-top: 40px; } #hero-12 .hero-stores-badge { margin-top: 30px; } .hero-stores-badge p { font-weight: 500; margin-bottom: : 10px; } .hero-stores-badge span { display: block; font-size: 0.9rem; font-style: italic; line-height: 1; margin-top: 20px; } /*------------------------------------------*/ /* HERO BOX /*------------------------------------------*/ .hero-boxes { margin-top: 70px; } .hbox { width: 20%; display: inline-block; float: left; text-align: center; } .hbox span { display: block; margin-bottom: 14px; } /*------------------------------------------*/ /* HERO IMAGE /*------------------------------------------*/ .hero-img { text-align: center; } .hero-img img { max-width: 120% !important; width: auto !important; height: auto !important; transform: scale(1.2); } .hero-3-img { background-image: url(../images/hero-3-img.png); background-repeat: no-repeat; background-position: left bottom; background-size: cover; position: absolute; top: 0; bottom: 2%; width: 50%; left: 50%; } .hero-9-image img { margin-top: -320px; } .hero-11-img { background-image: url(../images/hero-11-img.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: 0; bottom: 0; width: 40%; left: 60%; } /*------------------------------------------*/ /* HERO NEWSLETTER FORM /*------------------------------------------*/ #hero-2 .newsletter-form { margin-top: 40px; margin-right: 10%; } /*------------------------------------------*/ /* Newsletter Form Input /*------------------------------------------*/ #hero-2 .newsletter-form .form-control { height: 54px; background-color: #fff; border: 1px solid #eee; border-right: none; color: #222; font-size: 1.05rem; font-weight: 400; padding: 0 1.4rem; box-shadow: none; -webkit-border-radius: 20px 0 0 20px; -moz-border-radius: 20px 0 0 20px; -o-border-radius: 20px 0 0 20px; border-radius: 20px 0 0 20px; } #hero-2 .newsletter-form .form-control:focus { border: 1px solid #eee; border-right: none; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Placeholder /*------------------------------------------*/ #hero-2 .newsletter-form .form-control::-moz-placeholder { color: #999; } #hero-2 .newsletter-form .form-control:-ms-input-placeholder { color: #999; } #hero-2 .newsletter-form .form-control::-webkit-input-placeholder { color: #999; } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ #hero-2 .newsletter-form .btn { width: 100%; height: 54px; background-color: #fff; border-color: #fff; color: #f4c744; font-size: 1.25rem; margin-top: 0; padding: 0 1.4rem; -webkit-border-radius: 0 20px 20px 0; -moz-border-radius: 0 20px 20px 0; -o-border-radius: 0 20px 20px 0; border-radius: 0 20px 20px 0; } #hero-2 .newsletter-form .btn:hover { color: #444; } /* ========================================================================== 05. FEATURES =========================================================================== */ #features-4 .bg-inner { background-image: url(../images/tra-bg-1.png); background-position: center center; position: relative; z-index: 1; } #features-5 { position: relative; z-index: 1; padding-top: 120px; padding-bottom: 90px; margin-bottom: 50px; margin-top: 50px; } .features-6-content { position: relative; z-index: 1; } /*------------------------------------------*/ /* FEATURES TEXT /*------------------------------------------*/ #features-2 .col-md-6 { padding-right: 10px; padding-left: 10px; } /*------------------------------------------*/ /* FEATURE BOX /*------------------------------------------*/ .fbox-1 { text-align: center; margin-bottom: 40px; } .fbox-2 { background-color: #fff; text-align: center; padding: 50px 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 40px; } .fbox-3 { position: relative; text-align: center; background-color: #fff; border: 1px solid #d0d0d0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 50px 18px; margin-bottom: 30px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .fbox-3 .box-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: transparent; opacity: 0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .fbox-3 span { color: #555; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .fbox-3:hover { -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .fbox-3:hover h5 { color: #222; } .fbox-3.rose-hover:hover { border-top: 1px solid #f402b8; } .fbox-3.rose-hover:hover .box-line { background-color: #f402b8; opacity: 1; } .fbox-3.rose-hover:hover > span { color: #f402b8; } .fbox-3.red-hover:hover { border-top: 1px solid #ee041a; } .fbox-3.red-hover:hover .box-line { background-color: #ee041a; opacity: 1; } .fbox-3.red-hover:hover > span { color: #ee041a; } .fbox-3.orange-hover:hover { border-top: 1px solid #ff8212; } .fbox-3.orange-hover:hover .box-line { background-color: #ff8212; opacity: 1; } .fbox-3.orange-hover:hover > span { color: #ff8212; } .fbox-3.green-hover:hover { border-top: 1px solid #4fcb36; } .fbox-3.green-hover:hover .box-line { background-color: #4fcb36; opacity: 1; } .fbox-3.green-hover:hover > span { color: #4fcb36; } .fbox-3.blue-hover:hover { border-top: 1px solid #1d07f4; } .fbox-3.blue-hover:hover .box-line { background-color: #1d07f4; opacity: 1; } .fbox-3.blue-hover:hover > span { color: #1d07f4; } .fbox-3.skyblue-hover:hover { border-top: 1px solid #01b7de; } .fbox-3.skyblue-hover:hover .box-line { background-color: #01b7de; opacity: 1; } .fbox-3.skyblue-hover:hover > span { color: #01b7de; } .fbox-3.purple-hover:hover { border-top: 1px solid #783bb1; } .fbox-3.purple-hover:hover .box-line { background-color: #783bb1; opacity: 1; } .fbox-3.purple-hover:hover > span { color: #783bb1; } .fbox-5 { margin-bottom: 30px; } .fbox-6 { margin-bottom: 40px; } /*------------------------------------------*/ /* FEATURE BOX TYPOGRAPHY /*------------------------------------------*/ .fbox-5-txt, .fbox-6-txt { overflow: hidden; padding-left: 20px; } .fbox-1 h5, .fbox-2 h5, .fbox-3 h5 { margin-top: 15px; margin-bottom: 10px; } .fbox-4 h5 { margin-top: 8px; margin-bottom: 8px; } .fbox-3 h5 { color: #757575; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .fbox-1 p, .fbox-2 p, .fbox-3 p, .fbox-4 p, .fbox-5 p, .fbox-6 p { line-height: 1.5; margin-bottom: 0; } .fbox-1 p { padding: 0 5%; } /*------------------------------------------*/ /* FEATURE BOX ICON /*------------------------------------------*/ .fbox-5 span, .fbox-6 span { width: 65px; height: 65px; text-align: center; float: left; } /*------------------------------------------*/ /* FEATURES IMAGE /*------------------------------------------*/ .fbox-4-img { margin-top: -60px; margin-bottom: -60px; position: relative; z-index: 999; position: relative; } .features-5-img, .features-6-img { background-image: url(../images/features-5-img.html); background-repeat: no-repeat; background-position: left center; background-size: cover; position: absolute; top: 0; bottom: 0; width: 50%; left: 50%; } .features-6-img { background-image: url(../images/features-6-img.png); } /* ========================================================================== 05. CONTENT =========================================================================== */ #content-5 .bg-inner { position: relative; z-index: 1; } .content-7-image { background-image: url(../images/content-7.png); background-position: bottom bottom; padding-bottom: 60px; } #content-7 .content-img { margin-top: -80px; margin-bottom: 50px; } /*------------------------------------------*/ /* CONTENT SECTION TITLE /*------------------------------------------*/ #content-7 .section-title { margin-bottom: 120px; } /*------------------------------------------*/ /* CONTENT TEXT /*------------------------------------------*/ .content-txt { margin-bottom: 40px; } .cbox-1-txt { overflow: hidden; margin-left: 85px; } /*------------------------------------------*/ /* CONTENT TEXT TYPOGRAPHY /*------------------------------------------*/ .content-txt h2.h2-xs { margin-bottom: 25px; } .content-txt h5.h5-md { margin-top: 25px; margin-bottom: 10px; } .content-txt .cbox-1 h5.h5-md { line-height: 1.3; margin-top: 0; margin-bottom: 12px; } .content-txt .btn { margin-top: 20px; } /*------------------------------------------*/ /* CONTENT BOX ICON /*------------------------------------------*/ .cbox-1 { margin-bottom: 20px; } .cbox-1 span { width: 70px; height: 70px; text-align: center; float: left; } /*------------------------------------------*/ /* CONTENT IMAGE /*------------------------------------------*/ .content-img { text-align: center; margin-bottom: 40px; } .content-5-img { text-align: center; margin-bottom: -80px; position: relative; z-index: 999; position: relative; } /*------------------------------------------*/ /* CONTENT TABS /*------------------------------------------*/ #pills-tab { margin: 0 auto 80px; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #e35029; border-color: #e35029; color: #fff; box-shadow: 0 0 3px rgba(10, 10, 10, 0.05); } .nav-pills.yellow-navi .nav-link.active { background-color: #feca16; border-color: #feca16; color: #333; } .nav-pills.green-navi .nav-link.active { background-color: #41bf2b; border-color: #41bf2b; } .nav-pills.blue-navi .nav-link.active { background-color: #42a5f5; border-color: #42a5f5; } .nav-pills .nav-link { background-color: transparent; border: 1px solid #ccc; color: #999; font-size: 1.1rem; padding: 10px 30px; margin-right: 10px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } /* ========================================================================== 06. STATISTIC =========================================================================== */ #statistic-1 { background-image: url(../images/tra-bg-2.png); } /*------------------------------------------*/ /* STATISTIC BLOCK /*------------------------------------------*/ .statistic-block { text-align: center; margin-bottom: 30px; } #statistic-2 .statistic-block { padding: 40px; margin-bottom: 0; } /*------------------------------------------*/ /* Statistic Block Number /*------------------------------------------*/ .statistic-number { font-size: 4.25rem; line-height: 1; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; } #statistic-2 .statistic-number { font-size: 4rem; letter-spacing: -0.5px; margin-top: 12px; margin-bottom: 6px; } /*------------------------------------------*/ /* Statistic Text /*------------------------------------------*/ .statistic-txt { margin-top: 10px; } .statistic-txt p { padding: 0 2%; margin-bottom: 0; } #statistic-2 .b-bottom { border-bottom: 1px solid #ccc; } #statistic-2 .b-right { border-right: 1px solid #ccc; } /* ========================================================================== 07. VIDEO =========================================================================== */ #video-1 { background-image: url(../images/tra-bg-1.png); } #video-3 { background-image: url(../images/tra-bg-2.png); padding-top: 100px; padding-bottom: 150px; } #video-4 { padding-top: 150px; padding-bottom: 100px; } .video-inner-bg { background-color: rgba(255, 255, 255, .6); position: relative; z-index: 1; margin-right: 40px; margin-left: 40px; } #video-4 .video-inner-bg { margin-right: 30px; margin-left: 30px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #video-3 .section-title { margin-bottom: 6.25rem; } /*------------------------------------------*/ /* VIDEO CONTENT /*------------------------------------------*/ .video-content { background-color: #fff; padding: 100px 80px; position: relative; z-index: 999; margin-top: -50px; margin-bottom: -50px; } #video-4 .video-content { background-color: transparent; padding: 0; margin: -50px 70px; } /*------------------------------------------*/ /* VIDEO TYPOGRAPHY /*------------------------------------------*/ #video-2 h2 { margin-bottom: 25px; } #video-3 h4 { margin-bottom: 25px; } #video-1 p { padding: 0 5%; margin-top: 10px; margin-bottom: 30px; } .video-section .btn { margin-top: 20px; } /*------------------------------------------*/ /* VIDEO PREVIEW /*------------------------------------------*/ .video-preview { text-align: center; } #video-1 .video-preview { position: relative; margin-top: 60px; } /* =================================================================================== 08. SCREENSHOTS =================================================================================== */ #screens-1 { background-image: url(../images/tra-bg-5.html); padding-top: 100px; padding-bottom: 150px; } /*------------------------------------------*/ /* SCREENSHOTS CAROUSEL /*------------------------------------------*/ .screenshots-wrap { position: relative; margin-bottom: 100px; } #screens-1 .screenshots-wrap { margin-top: 78px; } .slick-slide { width: 298px; } .carousel-item { opacity: 0.25; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } #screens-2 .carousel-item { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } .carousel-item.slick-current { opacity: 1; } #screens-2 .carousel-item.slick-current { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /*------------------------------------------*/ /* IPHONE FRAME /*------------------------------------------*/ .iphone-frame { position: absolute; top: -75px; width: 100%; height: 100%; z-index: 2; } .iphone-frame img { max-width: 350px; margin: 0 auto; display: block; } /*------------------------------------------*/ /* Screens Slick Carousel Dots /*------------------------------------------*/ .screens-section .slick-dots { position: absolute; z-index: 4; bottom: -150px; } #screens-2.screens-section .slick-dots { bottom: -100px; } .screens-section .slick-dots li { margin: 0 2px; width: 15px; height: 15px; } .screens-section .slick-dots li button:before, .screens-section.bg-lightgrey .slick-dots li button:before { content: ""; background: #aaa; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 1; width: 8px; height: 8px; left: auto; -webkit-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; } .no-bg.screens-section .slick-dots li button:before, .no-bg.screens-section.bg-lightgrey .slick-dots li button:before { background: #ccc; } .bg-green.screens-section .slick-dots li button:before, .bg-purple.screens-section .slick-dots li button:before, .bg-green.screens-section.bg-lightgrey .slick-dots li button:before, .bg-purple.screens-section.bg-lightgrey .slick-dots li button:before { background: rgba(20, 20, 20, .2); } .screens-section .slick-dots li button:hover:before, .screens-section .slick-dots li.slick-active button:before { background: #fff; } .no-bg.screens-section .slick-dots li button:hover:before, .bg-lightgrey.screens-section .slick-dots li button:hover:before, .no-bg.screens-section .slick-dots li.slick-active button:before, .bg-lightgrey.screens-section .slick-dots li.slick-active button:before { background: #555; } /* =================================================================================== 09. TEAM =================================================================================== */ #team-1 { background-position: bottom center; } #team-1 .col-md-6 { padding-right: 10px; padding-left: 10px; } /*------------------------------------------*/ /* TEAM MEMBER /*------------------------------------------*/ .team-member { position: relative; background-color: #fff; padding: 50px 20px; text-align: center; margin-bottom: 50px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border-bottom: 1px solid transparent; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .team-member .box-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: transparent; opacity: 0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .team-member:hover { -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .team-member.rose-hover:hover { border-bottom: 1px solid #f402b8; } .team-member.rose-hover:hover .box-line { background-color: #f402b8; opacity: 1; } .team-member.rose-hover:hover .team-img-meta span { color: #f402b8; } .team-member.red-hover:hover { border-bottom: 1px solid #ee041a; } .team-member.red-hover:hover .box-line { background-color: #ee041a; opacity: 1; } .team-member.red-hover:hover .team-img-meta span { color: #ee041a; } .team-member.orange-hover:hover { border-bottom: 1px solid #ff8212; } .team-member.orange-hover:hover .box-line { background-color: #ff8212; opacity: 1; } .team-member.orange-hover:hover .team-img-meta span { color: #ff8212; } .team-member.green-hover:hover { border-bottom: 1px solid #4fcb36; } .team-member.green-hover:hover .box-line { background-color: #4fcb36; opacity: 1; } .team-member.green-hover:hover .team-img-meta span { color: #4fcb36; } .team-member.blue-hover:hover { border-bottom: 1px solid #1d07f4; } .team-member.blue-hover:hover .box-line { background-color: #1d07f4; opacity: 1; } .team-member.blue-hover:hover .team-img-meta span { color: #1d07f4; } .team-member.skyblue-hover:hover { border-bottom: 1px solid #01b7de; } .team-member.skyblue-hover:hover .box-line { background-color: #01b7de; opacity: 1; } .team-member.skyblue-hover:hover .team-img-meta span { color: #01b7de; } .team-member.purple-hover:hover { border-bottom: 1px solid #783bb1; } .team-member.purple-hover:hover .box-line { background-color: #783bb1; opacity: 1; } .team-member.purple-hover:hover .team-img-meta span { color: #783bb1; } /*------------------------------------------*/ /* TEAM MEMBER PHOTO /*------------------------------------------*/ .team-member-photo { position: relative; z-index: 1; margin: 0 25px 25px; } .team-member-photo img { -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } /*------------------------------------------*/ /* TEAM MEMBER TYPOGRAPHY /*------------------------------------------*/ .team-img-meta span { color: #888; font-size: 1rem; line-height: 1; font-weight: 300; display: block; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .join-team h4 { font-weight: 400; margin-bottom: 10px; } .join-team h4 span { font-weight: 700; margin-right: 5px; } .join-team p { margin-bottom: 25px; padding: 0 10%; } /*------------------------------------------*/ /* Team Member Social Links /*------------------------------------------*/ .tm-social ul { display: inline-block; padding-left: 0; margin: 25px auto 0; } .tm-social ul li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; } .tm-social a { color: #999; font-size: 1.1rem; line-height: 1; margin: 0 10px; display: block; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .tm-social a.ico-facebook:hover { color: #3b5998; } .tm-social a.ico-twitter:hover { color: #00a9ed; } .tm-social a.ico-instagram:hover { color: #e44772 } .tm-social a.ico-dribbble:hover { color: #d92d84; } .tm-social a.ico-behance:hover { color: #2473f6; } .tm-social a.ico-pinterest:hover { color: #ac281a; } .tm-social a.ico-linkedin:hover { color: #015886; } .tm-social a.ico-google-plus:hover { color: #cd1111; } .tm-social a.ico-youtube:hover { color: #cd1b20; } .tm-social a.ico-tumblr:hover { color: #3a5976; } .tm-social a.ico-vk:hover { color: #3b5998; } /* =================================================================================== 10. PRICING TABLES =================================================================================== */ /*------------------------------------------*/ /* PRICING TABLE /*------------------------------------------*/ .pricing-table { background-color: #fff; border: 1px solid #d0d0d0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 50px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .pricing-table:hover { -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } /*------------------------------------------*/ /* Pricing Table Price Plan /*------------------------------------------*/ .pricing-plan h4 { color: #444; font-weight: 400; letter-spacing: -1px; margin-bottom: 25px; } .pricing-plan h4 span { color: #222; font-weight: 700; } .pricing-table span.price { font-size: 50px; line-height: 50px; font-weight: 600; letter-spacing: -1px; } .pricing-table sup { font-size: 34px; font-weight: 500; top: -6px; right: 3px; } .pricing-table sup.validity { color: #757575; font-weight: 300; font-size: 1.25rem; top: 0px; left: 3px; } /*------------------------------------------*/ /* Pricing Table Body /*------------------------------------------*/ ul.features { color: #333; font-size: 1.1rem; line-height: 1; font-weight: 300; padding-top: 10px; } ul.features li { padding: 9px 0; } ul.features li .svg-inline--fa { margin-right: 6px; } ul.features li.disabled-option { color: #888; } /*------------------------------------------*/ /* Pricing Table Button /*------------------------------------------*/ .pricing-table .btn { display: block; width: 100%; margin-top: 30px; } /*------------------------------------------*/ /* PRICING NOTICE TEXT /*------------------------------------------*/ .pricing-notice p { margin-top: 10px; padding: 0 8%; } .pricing-notice p span { font-weight: 700; margin-right: 5px; } /* =================================================================================== 11. TESTIMONIALS =================================================================================== */ /*------------------------------------------*/ /* TESTIMONIALS CAROUSEL /*------------------------------------------*/ .review-1, .review-2 { text-align: center; margin-bottom: 40px; padding: 0 30px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .review-2 { padding: 0; -webkit-transform: scale(.85); -ms-transform: scale(.85); transform: scale(.85); } .review-2 .review-txt { background-color: #fff; border: 1px solid #eee; padding: 45px 40px 55px; margin: 0 2px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .review-1, .review-2 { opacity: 0.3; } .review-1.slick-current, .review-2.slick-current { opacity: 1; } .review-2.slick-current { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /*------------------------------------------*/ /* Testimonial Message Avatar /*------------------------------------------*/ .review-1 .testimonial-avatar img, .review-2 .testimonial-avatar img { width: 90px; height: 90px; display: inline-block; margin: 0 auto 15px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .review-2 .testimonial-avatar img { margin: -45px auto 15px; } /*------------------------------------------*/ /* Testimonial Message Text /*------------------------------------------*/ .review-2 h5 { margin-bottom: 20px; } .review-1 p, .review-2 p { color: #666; font-size: 1.05rem; font-style: italic; } p.testimonial-autor { color: #000; font-size: 1.1rem; font-weight: 600; font-style: normal; margin-bottom: 0; } .review-2 p.testimonial-autor { line-height: 1.2; margin-bottom: 0; } .testimonial-avatar span { font-size: 0.95rem; line-height: 1; } /*------------------------------------------*/ /* App Rating /*------------------------------------------*/ .app-rating .svg-inline--fa { color: #ff8000; font-size: 0.8rem; line-height: 1; margin-right: 1px; } .app-rating .svg-inline--fa:last-child { margin-right: 0; } /*------------------------------------------*/ /* Reviews Slick Carousel Dots /*------------------------------------------*/ .reviews-section .slick-dots { position: absolute; z-index: 4; bottom: -30px; } .reviews-section .slick-dots li { margin: 0 2px; width: 15px; height: 15px; } .reviews-section .slick-dots li button:before { content: ""; background: #ccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 1; width: 8px; height: 8px; left: auto; -webkit-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; } .reviews-section .slick-dots li button:hover:before { background: #999; } .reviews-section .slick-dots li.slick-active button:before { background: #666; } /* ========================================================================== 12. FAQs =========================================================================== */ #faqs-1 { background-position: center bottom; } /*------------------------------------------*/ /* FAQs TYPOGRAPHY /*------------------------------------------*/ .question { margin-bottom: 25px; } .question h5 { line-height: 1.4; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; } .question p { color: #666; } .more-questions-btn { margin-top: 50px; } .more-questions-btn .btn { margin-top: 20px; } /* ========================================================================== 13. DOWNLOAD =========================================================================== */ #download-1 { background-image: url(../images/tra-bg-1.png); } #download-2 .bg-inner { background-image: url(../images/download-2.png); position: relative; z-index: 1; } #download-3 .bg-inner { background-image: url(../images/world-map.png); position: relative; z-index: 1; } #download-4.bg-lightgrey { background-image: url(../images/tra-waves.png); background-position: bottom center; } /*------------------------------------------*/ /* DOWNLOAD TEXT /*------------------------------------------*/ #download-4 .download-txt { text-align: center; margin-bottom: 50px; } /*------------------------------------------*/ /* DOWNLOAD TYPOGRAPHY /*------------------------------------------*/ .download-section h2 { margin-bottom: 15px; } #download-1 p, #download-4 p { padding: 0 10%; } .download-section .stores-badge { margin-top: 30px; } /*------------------------------------------*/ /* DOWNLOAD IMAGE /*------------------------------------------*/ .download-2-img, .download-3-img { margin-top: -60px; margin-bottom: -60px; position: relative; z-index: 999; position: relative; } /* =================================================================================== 14. MORE APPS =================================================================================== */ .m-img { background-color: #f0f0f0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 60px 40px; } /*------------------------------------------*/ /* MORE APPS TYPOGRAPHY /*------------------------------------------*/ .more-app-box h5 { line-height: 1; margin-bottom: 5px; margin-top: 25px; } .more-app-box span.app-cat { color: #888; font-size: 0.95rem; line-height: 1; display: block; margin-bottom: 15px; } .more-app-box a { color: #888; margin-right: 12px; } .m-links a span { text-decoration: underline; margin-left: 1px; } .more-app-box a:hover { color: #222; } /* ========================================================================== 15. BRANDS =========================================================================== */ #brands-1 { padding-top: 70px; padding-bottom: 40px; } #brands-1.brands-section-thin { padding-top: 0; padding-bottom: 0; } /*------------------------------------------*/ /* BRANDS LOGO HOLDER /*------------------------------------------*/ #brands-1 .brand-logo { margin-bottom: 30px; } #brands-1 .brand-logo img { padding: 0 15px; } /* ========================================================================== 16. PRESS =========================================================================== */ /*------------------------------------------*/ /* PRESS LOGO /*------------------------------------------*/ .press-logo { overflow: hidden; position: relative; background-color: transparent; background-color: #fff; padding: 70px 30px; margin-bottom: 40px; text-align: center; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .press-logo img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); overflow: hidden; -webkit-transition: transform 450ms; -moz-transition: transform 450ms; -o-transition: transform 450ms; transition: transform 450ms; } .press-logo:hover { background-color: #fff; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); } .press-logo:hover img { transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); } /*------------------------------------------*/ /* PRESS TEXT /*------------------------------------------*/ .press-txt p { margin-bottom: 30px; padding: 0 10%; } /* ========================================================================== 17. NEWSLETTER =========================================================================== */ #newsletter-1 { background-image: url(../images/tra-bg-1.png); padding-top: 120px; padding-bottom: 100px; } #newsletter-2 { background-image: url(../images/tra-bg-2.png); padding-top: 100px; padding-bottom: 100px; } #newsletter-1 .newsletter-form { margin: 50px 15% 0; } /*------------------------------------------*/ /* Newsletter Form Input /*------------------------------------------*/ .newsletter-section .newsletter-form .form-control { height: 60px; background-color: transparent; border: none; border-bottom: 2px solid #fff; color: #fff; font-size: 1.35rem; font-weight: 400; padding: 0 0.5rem; margin-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0; -moz-box-shadow: 0 0; box-shadow: 0 0; } .newsletter-section .newsletter-form .form-control:focus { border: none; border-bottom: 2px solid #fff; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Placeholder /*------------------------------------------*/ .newsletter-section .newsletter-form .form-control::-moz-placeholder { color: #eee; } .newsletter-section .newsletter-form .form-control:-ms-input-placeholder { color: #eee; } .newsletter-section .newsletter-form .form-control::-webkit-input-placeholder { color: #eee; } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .newsletter-section .newsletter-form .btn { height: 60px; background-color: transparent; border: none; border-bottom: 2px solid #fff; font-size: 1.35rem; padding: 0 1rem; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0; -moz-box-shadow: 0 0; box-shadow: 0 0; } .newsletter-section .newsletter-form .btn:hover { padding: 0 1.25rem; } .newsletter-section .newsletter-form .btn:hover::before { opacity: 0; } /* ========================================================================== 18. BLOG =========================================================================== */ #blog-page { margin-top: 160px; margin-bottom: 100px; } #single-post-page { margin-top: 160px; margin-bottom: 60px; } /*------------------------------------------*/ /* BLOG POST /*------------------------------------------*/ .blog-post { margin-bottom: 40px; } .posts-holder .blog-post { margin-bottom: 60px; } /*------------------------------------------*/ /* BLOG TYPOGRAPHY /*------------------------------------------*/ .blog-post h5 { margin-bottom: 15px; } .blog-post-txt p { margin-bottom: 35px; } .blog-post-txt span, .sblog-post-txt span { font-size: 0.95rem; display: block; margin-bottom: 12px; } .posts-holder .blog-post-txt span { margin-bottom: 8px; } .blog-post-meta span { color: #888; font-size: 0.95rem; margin-right: 30px; } .blog-post a { color: #111; font-weight: 600; text-decoration: underline; } .blog-post a:hover { color: #888; } .post-inner-img p.p-sm { color: #999; font-style: italic; margin-top: 10px; margin-bottom: 0; } .blog-post-img { position: relative; } /*------------------------------------------*/ /* BLOG PAGE RIGHT SIDEBAR /*------------------------------------------*/ #sidebar-right h5.h5-md { margin-bottom: 20px; } /*------------------------------------------*/ /* Blog Search Form /*------------------------------------------*/ #search-field .btn { padding: 14px 18px; margin-top: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; } #search-field .form-control:focus { border-color: #999; outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* Blog Categories /*------------------------------------------*/ ul.blog-category-list > li { padding: 10px 0; border-bottom: 1px dashed #c0c0c0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } ul.blog-category-list > li:first-child { padding: 0 0 10px; } ul.blog-category-list > li:last-child { padding: 10px 0 0; border-bottom: none; } ul.blog-category-list > li a, ul.blog-category-list > li span { color: #555; } ul.blog-category-list li .svg-inline--fa { margin-right: 10px; } ul.blog-category-list li a:hover { color: #000; text-decoration: none; } /*------------------------------------------*/ /* Popular Posts /*------------------------------------------*/ .popular-posts li { padding: 14px 0; border-bottom: 1px dashed #c0c0c0; } .popular-posts li:first-child { padding: 0 0 14px; } .popular-posts li:last-child { padding: 14px 0 0; border-bottom: 0; } /*------------------------------------------*/ /* Popular Post Typography --------------------------------------------*/ .post-summary a { color: #555; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .popular-posts .post-summary a:hover { color: #000; text-decoration: underline; } .popular-posts p { color: #888; font-size: 0.875rem; margin-top: 6px; margin-bottom: 0; } /*------------------------------------------*/ /* Blog Page Popular Tags /*------------------------------------------*/ .badge { font-size: 0.75rem; font-weight: 600; color: #222; border: 1px solid #ddd; background-color: #fbfbfb; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; margin-bottom: 8px; padding: 5px 10px; margin-right: 2px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .badge a { color: #666!important; font-size: 0.75rem; font-weight: 300; text-transform: uppercase; line-height: 1.42857; } .badge:hover { background-color: #444; border-color: #444; color: #fff; } .badge:hover a { color: #fff!important; } /*------------------------------------------*/ /* BLOG PAGE PAGINATION /*------------------------------------------*/ .page-link { color: #666; padding: .65rem .95rem; } .page-link:hover, .page-link:focus { color: #444; background-color: #f2f2f2; border-color: #dee2e6; } .page-item.active .page-link { z-index: 1; color: #fff; background-color: #444; border-color: #444; } /*------------------------------------------*/ /* SINGLE POST SHARE ICONS /*-----------------------------------------*/ .share-social-icons { display: inline-block; padding-left: 0; } .share-social-icons li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; } a.share-ico { width: 90px; height: 35px; font-size: 18px; line-height: 35px !important; text-align: center; margin-right: 3px; display: block; opacity: 0.75; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } a.share-ico.ico-facebook {background-color: #3b5998; border-color: #3b5998; color: #fff;} a.share-ico.ico-twitter {background-color: #00a9ed; border-color: #00a9ed; color: #fff;} a.share-ico.ico-behance {background-color: #00a8e7; border-color: #00a8e7; color: #fff;} a.share-ico.ico-google-plus {background-color: #cd1111; border-color: #cd1111; color: #fff;} a.share-ico.ico-linkedin {background-color: #015886; border-color: #015886; color: #fff;} a.share-ico.ico-dribbble{background-color: #d92d84; border-color: #d92d84; color: #fff;} a.share-ico.ico-instagram {background-color: #beb3a8; border-color: #beb3a8; color: #fff;} a.share-ico.ico-pinterest {background-color: #ac281a; border-color: #ac281a; color: #fff;} a.share-ico.ico-dropbox {background-color: #008ad2; border-color: #008ad2; color: #fff;} a.share-ico.ico-skype {background-color: #00a9ed; border-color: #00a9ed;color: #fff;} a.share-ico.ico-youtube {background-color: #cd1b20; border-color: #cd1b20;color: #fff;} a.share-ico.ico-tumblr {background-color: #3a5976; border-color: #3a5976;color: #fff;} a.share-ico.ico-vimeo {background-color: #00adee; border-color: #00adee; color: #fff;} a.share-ico.ico-flickr {background-color: #d2d2d2; border-color: #d2d2d2; color: #fff;} a.share-ico.ico-github {background-color: #222; border-color: #222; color: #fff;} a.share-ico.ico-renren {background-color: #364a83; border-color: #364a83; color: #fff;} a.share-ico.ico-vk {background-color: #3b5998; border-color: #3b5998; color: #fff;} a.share-ico.ico-xing {background-color: #015f5e; border-color: #015f5e; color: #fff;} a.share-ico.ico-weibo {background-color: #be4443; border-color: #be4443; color: #fff;} a.share-ico.ico-rss {background-color: #ff6600; border-color: #ff6600; color: #fff;} a.share-ico.ico-digg {background-color: #222; border-color: #222; color: #fff;} a.share-ico.ico-deviantart {background-color: #57675d; border-color: #57675d; color: #fff;} a.share-ico.ico-envelope {background-color: #999; border-color: #999; color: #fff;} a.share-ico.ico-delicious {background-color: #0A0A0A; border-color: #0A0A0A; color: #fff;} a.share-ico:hover { opacity: 1; } /*------------------------------------------*/ /* SINGLE POST META /*------------------------------------------*/ .comment-meta { margin-bottom: 10px; } .comment-meta h5 { line-height: 1.1; margin-bottom: 0; } .comment-date { color: #888; font-size: 12px; font-weight: 400; text-transform: uppercase; margin-bottom: 5px; } .btn-reply a { background-color: #888; color: #fff; font-size: 12px; font-weight: 400; padding: 3px 8px; text-transform: uppercase; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .btn-reply a:hover { color: #fff; background-color: #48af4b; } .comment-reply { margin-left: 40px; } .single-post-comments hr { margin-top: 20px; margin-bottom: 20px; } /*------------------------------------------*/ /* SINGLE POST COMMENT FORM /*------------------------------------------*/ #leave-comment h4.h4-lg { margin-bottom: 5px; } .comment-form { position: relative; } .comment-form p { color: #333; font-size: 15px; line-height: 15px; font-weight: 700; margin-bottom: 10px; padding-left: 5px; display: block; } .comment-form .form-control { background-color: #fff; border-color: #ccc; color: #333; height: 46px; font-size: 15px; font-weight: 300; padding: 15px; margin-bottom: 20px; box-shadow: none; } .comment-form .form-control:focus { border-color: #48af4b; outline: 0px none; box-shadow: none; } .comment-form textarea { min-height: 200px; } /*------------------------------------------*/ /* Forms Message /*------------------------------------------*/ .comment-form label.error { color: #f6412d; font-size: 0.95rem; line-height: 1; margin-bottom: 20px; } .comment-form-msg { position: absolute; bottom: 10px; left: 350px; } .comment-form-msg .error, .comment-form-msg .loading { color: #45afff; font-size: 1.1rem; line-height: 1; font-weight: 600; } .comment-form-msg .error { color: #f6412d; } /* ========================================================================== 19. CONTACTS =========================================================================== */ #contacts-1.bg-lightgrey { background-image: url(../images/tra-waves.png); background-position: bottom center; } #contacts-2 { background-image: url(../images/tra-bg-5.html); } .contacts-section .form-holder { position: relative; } /*------------------------------------------*/ /* Contact Form Input /*------------------------------------------*/ .contact-form .form-control { height: 54px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 0 0 0; color: #444; font-size: 1rem; font-weight: 300; padding: 0 20px; margin-bottom: 25px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #contacts-2 .contact-form .form-control { background-color: transparent; border: none; border-bottom: 2px solid #666; color: #f5f5f5; font-size: 1.35rem; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: -0.5px; padding: 0 5px; margin-bottom: 35px; } .contact-form .custom-select { display: inline-block; width: 100%; height: 54px; line-height: 1; color: #444; font-size: 1rem; font-weight: 300; padding: 0 15px; margin-bottom: 25px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .bg-lightgrey .contact-form .form-control { border: 1px solid #ddd; } /*------------------------------------------*/ /* Contact Form Textarea /*------------------------------------------*/ .contact-form textarea { min-height: 220px; } .contact-form textarea.form-control { padding: 20px; } #contacts-2 .contact-form textarea.form-control { padding: 20px 5px; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .contact-form .form-control::-moz-placeholder { color: #555; } .contact-form .form-control:-ms-input-placeholder { color: #555; } .contact-form .form-control::-webkit-input-placeholder { color: #555; } #contacts-2 .contact-form .form-control::-moz-placeholder { color: #666; } #contacts-2 .contact-form .form-control:-ms-input-placeholder { color: #666; } #contacts-2 .contact-form .form-control::-webkit-input-placeholder { color: #666; } /*------------------------------------------*/ /* Contact Form Input Focus /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .custom-select:focus { outline: 0px none; box-shadow: none; border-color: #6bbb28; } #contacts-2 .contact-form .form-control:focus { outline: 0px none; box-shadow: none; border-color: #fff; } /*------------------------------------------*/ /* Contact Form Message /*------------------------------------------*/ .contact-form label.error { color: #f6412d; font-size: 0.95rem; line-height: 1; margin-bottom: 20px; margin-left: 35px; } #contacts-2 .contact-form label.error { margin-left: 5px; margin-bottom: 30px; } .contact-form-msg { position: absolute; bottom: 10px; left: 10px; } .contact-form-msg .error, .contact-form-msg .loading { color: #45afff; font-size: 1.1rem; line-height: 1; font-weight: 600; } .contact-form-msg .error { color: #f6412d; } /* ========================================================================== 20. FOOTER ========================================================================== */ .footer { background-position: bottom center; } /*------------------------------------------*/ /* FOOTER TYPOGRAPHY /*------------------------------------------*/ .bg-dark.footer .white-color p { color: #ddd; } .bg-dark.footer .white-color h5 a { color: #ccc; } .footer h5 { margin-bottom: 20px; } .footer-info p { font-size: 1.05rem; line-height: 1.65; margin-top: 20px; } .footer-socials-links h5 { letter-spacing: 0; margin-bottom: 13px; } .footer-socials-links h5 a { text-decoration: underline; } a.foo-facebook:hover { color: #3b5998; } a.foo-twitter:hover { color: #00a9ed; } a.foo-instagram:hover { color: #e44772 } a.foo-dribbble:hover { color: #d92d84; } a.foo-behance:hover { color: #2473f6; } a.foo-pinterest:hover { color: #ac281a; } a.foo-linkedin:hover { color: #015886; } a.foo-google-plus:hover { color: #cd1111; } a.foo-youtube:hover { color: #cd1b20; } a.foo-tumblr:hover { color: #3a5976; } a.foo-vk:hover { color: #3b5998; } .bg-dark.footer .white-color h5 a:hover { color: #fff; } /*------------------------------------------*/ /* FOOTER LOGO /*------------------------------------------*/ #footer-4 .footer-logo { margin-bottom: 40px; } /*------------------------------------------*/ /* FOOTER LINKS /*------------------------------------------*/ .foo-links { display: inline-block; padding-left: 0; margin: 0 auto; } .foo-links li { width: auto !important; display: block !important; vertical-align: top; clear: none !important; margin: 0 0 8px 0; padding: 0; } #footer-3 .foo-links li, #footer-4 .foo-links li, .bottom-footer .foo-links li { display: inline-block !important; margin-left: 22px; } .foo-links li a { font-size: 1.05rem; line-height: 1.5; } #footer-3 .foo-links li a, .bottom-footer .foo-links li a { color: #666; font-size: 0.95rem; line-height: 1.5; } .bg-dark .foo-links li a { color: #ddd; } .foo-links li a:hover { color: #000; text-decoration: underline; } .bg-dark .foo-links li a:hover { color: #ddd; } /*------------------------------------------*/ /* FOOTER STORE BADGES /*------------------------------------------*/ .footer-stores-badge a.store { display: block; margin-bottom: 14px; } /*------------------------------------------*/ /* BOTTOM FOOTER /*------------------------------------------*/ .bottom-footer { border-top: 1px solid #ddd; margin-top: 30px; padding-top: 50px; } .bg-grey .bottom-footer { border-color: #ccc; } .bg-dark .bottom-footer { border-color: #555; } /*------------------------------------------*/ /* FOOTER COPYRIGHT /*------------------------------------------*/ .footer-copyright p { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0; } #footer-2 .footer-copyright p { margin-bottom: 2px; } .footer-copyright p span { font-weight: 500; } /* ========================================================================== 21. BOTTOM QUICK FORM ========================================================================== */ .bottom-form { background-color: #fff; min-width: 260px; max-width: 260px; border-top-right-radius: 6px; border-top-left-radius: 6px; box-shadow: 0 1px 15px 0 rgba(0,0,0,.33); position: fixed; right: 6em; bottom: 0; z-index: 998; } /*------------------------------------------*/ /* QUICK FORM HEADER /*------------------------------------------*/ .bottom-form-header { background-color: #41bf2b; border-color: #41bf2b; padding: 14px 20px; min-height: 45px; border-top-right-radius: 6px; border-top-left-radius: 6px; cursor: pointer; } .bottom-form-header span { color: #fff; font-size: 30px; line-height: 1; display: inline-block; float: left; margin-right: 8px; } .bottom-form-header p { color: #fff; font-size: 0.9rem; line-height: 30px!important; display: inline-block; margin-bottom: 0; } /*------------------------------------------*/ /* QUICK FORM FORM /*------------------------------------------*/ .bottom-form-holder { height: 311px; padding-bottom: 30px; } .bottom-form-control { width: 100%; border: none; border-bottom: 1px solid #eee; font-size: 0.9rem; line-height: 1; padding: 18px; } .quick-contact-form textarea { min-height: 60px; border-bottom: none; } .quick-contact-form .btn { font-size: 0.9rem; padding: 0.6rem 1.75rem; margin-right: 30px; } /*------------------------------------------*/ /* Quick Form Message /*------------------------------------------*/ .quick-contact-form label.error { color: #f6412d; font-size: 0.95rem; line-height: 1; margin-bottom: 20px; margin-left: 35px; } .quick-contact-form .contact-form-msg { position: absolute; bottom: 80px; left: 20px; } .quick-contact-form .contact-form-msg .error, .quick-contact-form .contact-form-msg .loading { color: #45afff; font-size: 0.9rem; line-height: 1; font-weight: 300; } .quick-contact-form .contact-form-msg .error { color: #f6412d; } /* ========================================================================== 22. TERMS PAGE ========================================================================== */ #terms-page { margin-top: 160px; margin-bottom: 60px; } /*------------------------------------------*/ /* TERMS PAGE TYPOGRAPHY /*------------------------------------------*/ #terms-page p.p-notice { font-weight: 700; } .terms-box { margin-bottom: 40px; } .terms-box h4 { margin-bottom: 15px; } .terms-box p span { font-size: 1.1rem; line-height: 1; font-weight: 700; margin-right: 5px; } .terms-box p a { color: #333; font-weight: 700; text-decoration: underline; } .terms-box p a:hover { color: #666; } /*------------------------------------------*/ /* Terms / Privacy Title /*------------------------------------------*/ ul.terms-list { list-style: disc; margin: 20px 0 20px 25px; } ul.terms-list li { margin-bottom: 10px; } ul.terms-list li:last-child { margin-bottom: 0; } /* =================================================================================== 23. SCROLL TO TOP =================================================================================== */ #scrollUp { display: none; width: 50px; height: 50px; position: fixed; bottom: 20px; right: 20px; background-image: url(../images/back-to-top.png); background-repeat: no-repeat; background-position: 50% 48%; background-color: rgba(35, 35, 35, 0.5); -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 250ms linear; -moz-transition: all 250ms linear; transition: all 250ms linear; } #scrollUp:hover { background-color: #666; } nav a#pull { display: none; }