File manager

File manager - Edit - /home/carfac/public_html/scooterthetort/wp-content/plugins/ttbase-framework/css/shortcodes.css

Back
/!---------- 2. MIXINS ----------/ /-----------------------------------------------------------------------------------/ /* Global Styles /-----------------------------------------------------------------------------------/ .ttbase-clear-floats { clear: both; } .ttbase-clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .ttbase-fadein { opacity: 0; } .vc_editor .ttbase-fadein { opacity: 1; } /* Grid > Main Classes / .ttbase-grid { margin: 0 -15px; } .ttbase-col { float: left; margin: 0 0 30px; padding: 0 15px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .ttbase-col.ttbase-count-1 { clear: both; } .ttbase-col-1 { float: none; width: 100%; } .ttbase-col-2 { width: 50%; } .ttbase-col-3 { width: 33.33%; } .ttbase-col-4 { width: 25%; } .ttbase-col-5 { width: 20%; } .ttbase-col-6 { width: 16.66666667%; } .ttbase-col-7 { width: 14.28%; } /-----------------------------------------------------------------------------------/ / Spacing /-----------------------------------------------------------------------------------/ .ttbase-spacing { display: block; height: auto; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; outline: none !important; } /-----------------------------------------------------------------------------------/ /* Background /-----------------------------------------------------------------------------------/ .ttbase-background p:last-child { margin: 0; } .ttbase-background.style-centered { background-image-repeat: repeat; } .ttbase-background.style-fixed, .ttbase-background.style-parallax { background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /-----------------------------------------------------------------------------------/ /* Social /-----------------------------------------------------------------------------------/ .ttbase-social-icon { display: inline-block; margin-right: 5px; border: none !important; outline: none; text-decoration: none !important; } .ttbase-social-icon img { display: inline; border: none; outline: none; padding: 0; margin: 0; box-shadow: none !important; } .ttbase-social-icon img:hover { opacity: 0.8; } /-----------------------------------------------------------------------------------/ /* Columns /-----------------------------------------------------------------------------------/ .ttbase-one-half { width: 48%; } .ttbase-one-third { width: 30.66%; } .ttbase-two-third { width: 65.33%; } .ttbase-one-fourth { width: 22%; } .ttbase-three-fourth { width: 74%; } .ttbase-one-fifth { width: 16.8%; } .ttbase-two-fifth { width: 37.6%; } .ttbase-three-fifth { width: 58.4%; } .ttbase-four-fifth { width: 67.2%; } .ttbase-one-sixth { width: 13.33%; } .ttbase-five-sixth { width: 82.67%; } .ttbase-one-half, .ttbase-one-third, .ttbase-two-third, .ttbase-three-fourth, .ttbase-one-fourth, .ttbase-one-fifth, .ttbase-two-fifth, .ttbase-three-fifth, .ttbase-four-fifth, .ttbase-one-sixth, .ttbase-five-sixth { position: relative; margin-right: 4%; margin-bottom: 2em; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ttbase-column-last { margin-right: 0 !important; clear: right; } .ttbase-column-last:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /-----------------------------------------------------------------------------------/ /* Buttons /-----------------------------------------------------------------------------------/ .btn-primary { background-color: transparent; border: solid 2px #4fc198; padding: 10px 25px; text-transform: uppercase; border-radius: 34px; color: #4fc198; font-family: "Montserrat", sans-serif; font-size: 15px; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; } .btn-primary.style-2 { background-color: #4fc198; color: #ffffff; } .btn-primary:hover, .btn-primary.style-2:hover, .btn-primary:focus, .btn-primary.style-2:focus { background-color: #2c3449; color: #ffffff; border-color: #2c3449; } .ttbase-button-inner { border: none; } .ttbase-button-inner .sl { position: relative; top: 1px; } .ttbase-button-inner .im { position: relative; top: 2px; } .btn-large.btn-primary { font-size: 16px; font-size: 1rem; padding: 14px 30px; } .btn-medium.btn-primary { font-size: 15px; font-size: 0.9375rem; } .btn-small.btn-primary { font-size: 14px; font-size: 0.875rem; padding: 8px 20px; } .btn-primary.left { float: left; } .btn-primary.right { float: right; margin-right: 0; margin-left: 5px; } .ttbase-button-icon-left { margin-right: 7px; } .ttbase-button-icon-right { margin-left: 7px; } .btn-primary.aligncenter { display: block; margin: 0 auto; } .btn-width-100 { width: 100%; } .btn-primary.color-2 { border-color: #2c3449; color: #2c3449; } .btn-primary.color-2:hover, .btn-primary.style-2.color-2:hover { background-color: #4fc198; color: #ffffff; border-color: #4fc198; } .btn-primary.style-2.color-2 { background-color: #2c3449; color: #ffffff; border-color: #2c3449; } .btn-primary.color-3 { border-color: #4fc198; color: #4fc198; } .btn-primary.color-3:hover, .btn-primary.style-2.color-3:hover { background-color: #1b274a; color: #ffffff; border-color: #1b274a; } .btn-primary.style-2.color-3 { background-color: #4fc198; color: #ffffff; border-color: #4fc198; } .btn-primary.color-4 { border-color: #1b274a; color: #1b274a; } .btn-primary.color-4:hover, .btn-primary.style-2.color-4:hover { background-color: #4fc198; color: #ffffff; border-color: #4fc198; } .btn-primary.style-2.color-4 { background-color: #1b274a; color: #ffffff; border-color: #1b274a; } .btn-primary.color-5 { border-color: #1a1a1a; color: #1a1a1a; } .btn-primary.color-5:hover, .btn-primary.style-2.color-5:hover { background-color: #f0f0f0; color: #1a1a1a; border-color: #f0f0f0; } .btn-primary.style-2.color-5 { background-color: #1a1a1a; color: #ffffff; border-color: #1a1a1a; } .btn-primary.color-6 { border-color: #f0f0f0; color: #1a1a1a; } .btn-primary.color-6:hover, .btn-primary.style-2.color-6:hover { background-color: #1a1a1a; color: #ffffff; border-color: #1a1a1a; } .btn-primary.style-2.color-6 { background-color: #f0f0f0; color: #1a1a1a; border-color: #f0f0f0; } /-----------------------------------------------------------------------------------/ /* Highlights /-----------------------------------------------------------------------------------/ .ttbase-highlight { font-size: 18px; font-size: 1.125rem; display: inline-block; } .ttbase-highlight-yellow, .ttbase-highlight-yellow a { background-color: #FFF7A8; color: #695D43; } .ttbase-highlight-blue, .ttbase-highlight-blue a { color: #5091b2; background: #e9f7fe; } .ttbase-highlight-green, .ttbase-highlight-green a { color: #5f9025; background: #ebf6e0; } .ttbase-highlight-red, .ttbase-highlight-red a { color: #de5959; background: #ffe9e9; } .ttbase-highlight-gray, .ttbase-highlight-gray a { color: #666; background: #f9f9f9; } /-----------------------------------------------------------------------------------/ /* Pricing Table /-----------------------------------------------------------------------------------/ .ttbase-pricing-table { padding: 48px 32px; } .ttbase-pricing-table .price { font-size: 80px; font-size: 5rem; line-height: 80px; font-weight: 300; color: #1b274a; display: inline-block; margin-bottom: 16px; } .ttbase-pricing-table p:last-child { margin-bottom: 0; } .ttbase-pricing-table .btn { margin-bottom: 20px; } .ttbase-pricing-table.boxed, .pricing-table.emphasis { background: #f2f2f3; } .ttbase-pricing-table.emphasis { background: #4fc198; color: #ffffff; } .ttbase-pricing-table.emphasis a:not(.btn) { color: #ffffff; } .ttbase-pricing-table.emphasis .price, .ttbase-pricing-table.emphasis h5 { color: #ffffff; } .ttbase-pricing-table.emphasis .btn-primary { color: #ffffff; border-color: #ffffff; } .ttbase-pricing-table.emphasis .btn-primary:hover { color: #ffffff; border-color: #4fc198; } .ttbase-pricing-table ul, .content-area .ttbase-pricing-table ul { line-height: 36px; list-style: none outside none; margin: 0; } /-----------------------------------------------------------------------------------/ /* Heading /-----------------------------------------------------------------------------------/ .ttbase-heading span { background: transparent; } .ttbase-heading.text-align-center { text-align: center; } .ttbase-heading.text-align-center span { padding-right: 15px; padding-left: 15px; } .ttbase-heading.text-align-left { text-align: left; } .ttbase-heading.text-align-left span { padding-right: 15px; } .ttbase-heading.text-align-right { text-align: right; } .ttbase-heading.text-align-right span { padding-left: 15px; } .ttbase-heading-single-line:after { border-bottom: 2px solid; border-color: #4fc198; bottom: 0; content: ""; left: 0; position: absolute; width: 70px; } h1.ttbase-heading { padding-bottom: 30px; margin-bottom: 35px; } h1.ttbase-heading-single-line:after { width: 120px; } .ttbase-heading-single-line.text-align-center:after { right: 0; margin-left: auto; margin-right: auto; } .ttbase-heading-single-line.text-align-right:after { left: auto; right: 0; } h1.ttbase-heading-none, h2.ttbase-heading-none { margin-bottom: 0; } .ttbase-heading-none:after { display: none; } .ttbase-heading-icon-left { margin-right: 10px; } .ttbase-heading-icon-right { margin-left: 10px; } /-----------------------------------------------------------------------------------/ /* Googlemap /-----------------------------------------------------------------------------------/ .googlemap { position: relative; max-width: inherit; } .googlemap .map_canvas { width: 100%; height: 100%; } .googlemap .map_canvas h3 { margin: 0 0 10px; font-size: 14px; font-size: 0.875rem; } .map_canvas img { max-width: none !important; } .api-warning { background: #f2f2f3; padding: 25px; } /-----------------------------------------------------------------------------------/ /* Skillbars /-----------------------------------------------------------------------------------/ .ttbase-skillbar-wrapper { position: relative; } .ttbase-skillbar { position: relative; display: block; margin-bottom: 15px; width: 100%; background: #f2f2f3; height: 10px; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -ms-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; } .ttbase-skillbar-title { font-weight: 600; font-size: 15px; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 1px; color: #1e2331; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .ttbase-skillbar-title span { display: block; padding: 0; height: 40px; line-height: 40px; } .ttbase-skillbar-bar { height: 10px; width: 0px; background: #4fc198; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .ttbase-skill-bar-percent { position: absolute; right: 0; top: 0; font-size: 15px; font-size: 0.9375rem; font-weight: 600; height: 40px; line-height: 40px; color: #1e2331; } /-----------------------------------------------------------------------------------/ /* Counter /-----------------------------------------------------------------------------------/ .ttbase-counter { border: solid 1px #dfdfdf; background-color: #ffffff; padding: 50px; } .ttbase-counter .separator { width: 30px; border-top: solid 1px; border-color: #4fc198; margin: 5px auto 18px; } .ttbase-counter-number { font-size: 62px; font-size: 3.875rem; height: 50px; font-weight: 400; color: #4fc198; text-align: center; } .ttbase-counter-title { font-size: 15px; font-size: 0.9375rem; color: #1b274a; text-transform: uppercase; font-weight: 600; text-align: center; } /-----------------------------------------------------------------------------------/ /* Callout /-----------------------------------------------------------------------------------/ .ttbase-callout { padding: 42px; background: #f2f2f3; position: relative; } .ttbase-callout-caption { font-size: 15px; font-size: 0.9375rem; font-weight: 400; margin-bottom: 25px; } .ttbase-callout-caption p { font-size: 15px; font-size: 0.9375rem; font-weight: 400; margin-bottom: 0; } .ttbase-callout-caption h1, .ttbase-callout-caption h2, .ttbase-callout-caption h3, .ttbase-callout-caption h4, .ttbase-callout-caption h5 { color: #1e2331; margin: 0; padding-bottom: 20px; } .ttbase-callout-button { float: left; } /-----------------------------------------------------------------------------------/ /* Icons /-----------------------------------------------------------------------------------/ .ttbase-icon { text-decoration: none !important; } a:hover .ttbase-icon { text-decoration: none; opacity: 0.8; } .ttbase-icon a { color: inherit; } .ttbase-icon.ttbase-icon-circle { display: block; text-align: center; background: #000; color: #fff; border-radius: 100%; } .ttbase-icon.ttbase-icon-custom { margin-bottom: 30px; } .ttbase-icon.ttbase-icon-xlarge { font-size: 70px; font-size: 4.375rem; height: 150px; line-height: 150px; width: 150px; margin-bottom: 30px; } .ttbase-icon.ttbase-icon-xlarge.ttbase-icon-float-left { margin-right: 30px; } .ttbase-icon.ttbase-icon-xlarge.ttbase-icon-float-right { margin-left: 30px; } .ttbase-icon.ttbase-icon-large { font-size: 32px; font-size: 2rem; height: 80px; line-height: 80px; width: 80px; margin-bottom: 20px; } .ttbase-icon.ttbase-icon-large.ttbase-icon-float-left { margin-right: 20px; } .ttbase-icon.ttbase-icon-large.ttbase-icon-float-right { margin-left: 20px; } .ttbase-icon.ttbase-icon-normal { font-size: 18px; font-size: 1.125rem; height: 45px; line-height: 45px; width: 45px; margin-bottom: 20px; } .ttbase-icon.ttbase-icon-normal.ttbase-icon-float-left { margin-right: 20px; } .ttbase-icon.ttbase-icon-normal.ttbase-icon-float-right { margin-left: 20px; } .ttbase-icon.ttbase-icon-small { font-size: 14px; font-size: 0.875rem; height: 30px; line-height: 30px; width: 30px; margin-bottom: 15px; } .ttbase-icon.ttbase-icon-small.ttbase-icon-float-left { margin-right: 15px; } .ttbase-icon.ttbase-icon-small.ttbase-icon-float-right { margin-left: 15px; } .ttbase-icon.ttbase-icon-tiny { font-size: 12px; font-size: 0.75rem; height: 25px; line-height: 25px; width: 25px; margin-bottom: 10px; } .ttbase-icon.ttbase-icon-tiny.ttbase-icon-float-left { margin-right: 10px; } .ttbase-icon.ttbase-icon-tiny.ttbase-icon-float-right { margin-left: 10px; } .ttbase-icon-float-left { display: block; float: left; margin-right: 20px; } .ttbase-icon-float-right { display: block; float: right; margin-left: 20px; } .ttbase-icon-float-center { margin: 0 auto; display: block; width: 100%; text-align: center; float: none; } .ttbase-icon-box-icon { font-size: 24px; font-size: 1.5rem; color: #4fc198; display: inline-block; zoom: 1; line-height: 1; } .ttbase-icon-box-icon-with-bg { text-align: center; vertical-align: middle; } /icon sizes/ .ttbase-icon.ttbase-icon-xlarge .fa { font-size: 100px; font-size: 6.25rem; height: 180px; line-height: 180px; width: 180px; } .ttbase-icon.ttbase-icon-large .fa { font-size: 80px; font-size: 5rem; height: 140px; line-height: 140px; width: 140px; } .ttbase-icon.ttbase-icon-normal .fa { font-size: 40px; font-size: 2.5rem; height: 70px; line-height: 70px; width: 70px; } .ttbase-icon.ttbase-icon-small .fa { font-size: 20px; font-size: 1.25rem; height: 35px; line-height: 35px; width: 35px; } .ttbase-icon.ttbase-icon-tiny .fa { font-size: 15px; font-size: 0.9375rem; height: 25px; line-height: 25px; width: 25px; } /other/ .ttbase-icon.remove-dimensions { height: auto; width: auto; margin: auto; line-height: normal; } .ttbase-icon.has-bg span { text-align: center; } /custom icon size/ .ttbase-icon.has-bg .fa { display: inline-block; height: auto; width: auto; line-height: 1; padding: 20px; } .ttbase-icon.has-bg.remove-padding .fa { padding: 0; } /-------------------------------------------------------------- - Icon Boxes --------------------------------------------------------------/ /general/ .font-weight-100 { font-weight: 100; } .font-weight-200 { font-weight: 200; } .font-weight-300 { font-weight: 300; } .font-weight-400 { font-weight: 400; } .font-weight-500 { font-weight: 500; } .font-weight-600 { font-weight: 600; } .font-weight-700 { font-weight: 700; } .font-weight-800 { font-weight: 800; } .text-transform-none { text-transform: none; } .text-transform-capitalize { text-transform: capitalize; } .text-transform-lowercase { text-transform: lowercase; } .text-transform-uppercase { text-transform: uppercase; } .ttbase-icon-box-one-heading, .ttbase-icon-box-two-heading, .ttbase-icon-box-three-heading, .ttbase-icon-box-four-heading, .ttbase-icon-box-five-heading, .ttbase-icon-box-six-heading, .ttbase-icon-box-seven-heading { display: block; } /* icon box style 1 / .ttbase-icon-box-one { position: relative; padding-left: 50px; } .ttbase-icon-box-one p { margin: 0 0 10px; } .ttbase-icon-box-one-link { text-decoration: none !important; } .ttbase-icon-box-one .ttbase-icon-box-one-icon { position: absolute; left: 0; top: 0; font-size: 28px; font-size: 1.75rem; color: #4fc198; } .ttbase-icon-box-one .ttbase-icon-box-icon-with-bg { padding: 15px; } .ttbase-icon-box-one.with-background { padding-left: 80px; } .ttbase-icon-box-one .ttbase-icon-box-one-heading { margin: 0 0 10px; } .ttbase-icon-box-one-img-alt { position: absolute; left: 0; top: 0; display: block; color: #4fc198; } / icon box style 2 / .ttbase-icon-box-two { position: relative; text-align: center; margin-bottom: 30px; } .ttbase-icon-box-two p { margin: 0 0 10px; } .ttbase-icon-box-two-link { text-decoration: none !important; } .ttbase-icon-box-two .ttbase-icon-box-two-icon { font-size: 26px; font-size: 1.625rem; margin: 0 0 20px; display: inline-block; color: #4fc198; } .ttbase-icon-box-two .ttbase-icon-box-icon-with-bg { padding: 20px; } .ttbase-icon-box-two .ttbase-icon-box-two-heading { margin: 0 0 15px; } .ttbase-icon-box-two-img-alt { display: block; margin: 0 auto 20px; } .ttbase-icon-box-two.align-left { text-align: left; } .ttbase-icon-box-two.align-right { text-align: right; } .ttbase-icon-box-two.align-left .ttbase-icon-box-two-img-alt, .ttbase-icon-box-two.align-right .ttbase-icon-box-two-img-alt { display: inline-block; } / icon box style 3 / .ttbase-icon-box-three { position: relative; text-align: center; } .ttbase-icon-box-three p { margin: 0 0 10px; } .ttbase-icon-box-three-link { text-decoration: none !important; } .ttbase-icon-box-three .ttbase-icon-box-three-icon { height: 80px; line-height: 80px; width: 80px; font-size: 24px; font-size: 1.5rem; color: #4fc198; margin: 0 auto 30px; border-radius: 99px; -webkit-border-radius: 99px; -moz-border-radius: 99px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ttbase-icon-box-three-link:hover .ttbase-icon-box-three-icon { opacity: 0.85; } .ttbase-icon-box-three .ttbase-icon-box-three-heading { margin: 0 0 15px; } .ttbase-icon-box-three-img-alt { display: block; margin: 0 auto 20px; } / icon box style 4 / .ttbase-icon-box-four { position: relative; text-align: center; padding: 30px; border: 1px solid #dfdfdf; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .ttbase-icon-box-four p { margin: 0 0 10px; } .ttbase-icon-box-four-link { text-decoration: none !important; color: #555; } .ttbase-icon-box-four .ttbase-icon-box-four-icon { font-size: 28px; font-size: 1.75rem; margin: 0 0 20px; color: #4fc198; } .ttbase-icon-box-four .ttbase-icon-box-four-heading { margin: 0; } .ttbase-icon-box-four-content { margin-top: 15px; } .ttbase-icon-box-four-link { display: block; } .ttbase-icon-box-four.ttbase-icon-box-with-link:hover { background: #1e2331; color: #fff; } .ttbase-icon-box-four.ttbase-icon-box-with-link:hover .ttbase-icon-box-four-link { color: #fff; } .ttbase-icon-box-four.ttbase-icon-box-with-link:hover .ttbase-icon-box-four-icon { color: #fff !important; } .ttbase-icon-box-four.ttbase-icon-box-with-link:hover .ttbase-icon-box-four-heading { color: #fff; } .ttbase-icon-box-four-img-alt { display: block; margin: 0 auto 40px; } / icon box style 5 / .ttbase-icon-box-five { position: relative; text-align: center; padding: 30px; background-color: #f2f2f3; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .ttbase-icon-box-five p { margin: 0 0 10px; } .ttbase-icon-box-five-link { text-decoration: none !important; color: #555; } .ttbase-icon-box-five .ttbase-icon-box-five-icon { font-size: 32px; font-size: 2rem; margin: 0 0 20px; color: #4fc198; } .ttbase-icon-box-five .ttbase-icon-box-five-heading { margin: 0; } .ttbase-icon-box-five-content { margin-top: 15px; } .ttbase-icon-box-five-link { display: block; } .ttbase-icon-box-five.ttbase-icon-box-with-link:hover { background: #1e2331; color: #fff; } .ttbase-icon-box-five.ttbase-icon-box-with-link:hover .ttbase-icon-box-five-link { color: #fff; } .ttbase-icon-box-five.ttbase-icon-box-with-link:hover .ttbase-icon-box-five-icon { color: #fff !important; } .ttbase-icon-box-five.ttbase-icon-box-with-link:hover .ttbase-icon-box-five-heading { color: #fff; } .ttbase-icon-box-five-img-alt { display: block; margin: 0 auto 20px; } / icon box style 6 / .ttbase-icon-box-six { position: relative; text-align: center; padding: 30px; background-color: #4fc198; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: relative; color: #fff; } .ttbase-icon-box-six p { margin: 0 0 10px; color: #fff; } .ttbase-icon-box-six-link { text-decoration: none !important; color: #555; padding: 30px; display: block; } .ttbase-icon-box-six .ttbase-icon-box-six-icon { font-size: 32px; font-size: 2rem; margin: 0 0 20px; color: #1b274a; } .ttbase-icon-box-six .ttbase-icon-box-six-heading { margin: 0; } .ttbase-icon-box-six .ttbase-icon-box-six-content { margin-top: 15px; color: #ffffff; } .ttbase-icon-box-six .ttbase-icon-box-six-content p { color: #ffffff; } .ttbase-icon-box-six.ttbase-icon-box-with-link:hover { position: relative; top: -10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); } .ttbase-icon-box-six-img-alt { display: block; margin: 0 auto 20px; } / icon box style 7 / .ttbase-icon-box-seven { position: relative; padding-right: 45px; text-align: right; } .ttbase-icon-box-seven p { margin: 0 0 10px; } .ttbase-icon-box-seven-link { text-decoration: none !important; } .ttbase-icon-box-seven .ttbase-icon-box-seven-icon { position: absolute; right: 0; top: 0; font-size: 28px; } .ttbase-icon-box-seven .ttbase-icon-box-icon-with-bg { padding: 15px; } .ttbase-icon-box-seven .ttbase-icon-box-seven-heading { margin: 0 0 10px; } .ttbase-icon-box-seven-img-alt { position: absolute; right: 0; top: 0; display: block; } .ttbase-icon-box-seven.with-background { padding-right: 80px; } / icon box style 8 (Flipped) / .ttbase-icon-box-eight p { margin: 0 0 10px; } .ttbase-icon-box-eight-link { text-decoration: none !important; color: #555; } .ttbase-icon-box-eight .ttbase-icon-box-eight-icon { font-size: 32px; font-size: 2rem; margin: 0 0 20px; color: #4fc198; } .ttbase-icon-box-eight .ttbase-icon-box-eight-heading { margin: 0; } .ttbase-icon-box-eight-content { margin-top: 15px; } .ttbase-icon-box-eight-link { display: block; } .ttbase-icon-box-eight.ttbase-icon-box-with-link:hover { background: #1e2331; color: #fff; } .ttbase-icon-box-eight.ttbase-icon-box-with-link:hover .ttbase-icon-box-eight-link { color: #fff; } .ttbase-icon-box-eight.ttbase-icon-box-with-link:hover .ttbase-icon-box-eight-icon { color: #fff !important; } .ttbase-icon-box-eight.ttbase-icon-box-with-link:hover .ttbase-icon-box-eight-heading { color: #fff; } .ttbase-icon-box-eight-img-alt { display: block; margin: 0 auto 20px; } .ttbase-icon-box-eight .ttbase-icon-box-eight-subtitle { margin-top: 10px; text-transform: uppercase; font-weight: 500; font-size: 14px; font-size: 0.875rem; } .flip { -webkit-perspective: 800; -ms-perspective: 800; -moz-perspective: 800; -o-perspective: 800; width: 100%; min-height: 260px; height: 260px; position: relative; display: block; margin: 0px auto; } .flip .ttbase-icon-box-eight { width: 100%; height: 100%; } .flip .ttbase-icon-box-eight .front, .flip .ttbase-icon-box-eight .back { -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; display: flex; justify-content: center; align-items: center; } .flip:hover .ttbase-icon-box-eight .front { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } .flip:hover .ttbase-icon-box-eight .back { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .flip .ttbase-icon-box-eight .face { width: 100%; height: 100%; position: absolute; text-align: center; padding: 30px; } .flip .ttbase-icon-box-eight .front { position: absolute; z-index: 1; background: #ffffff; border: solid 1px #4fc198; opacity: 1; } .flip .ttbase-icon-box-eight .back { background: #4fc198; border: solid 1px #4fc198; color: #ffffff; opacity: 0; } /-------------------------------------------------------------- - Image Blocks --------------------------------------------------------------/ .v-align-transform { position: relative; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); top: 50%; z-index: 2; } .ttbase-content-image { position: relative; } .ttbase-content-image .right { right: 0; } .background-image-holder { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background: #1b274a; background-size: cover !important; background-position: 50% 50% !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .background-image-holder img { display: none; } .background-image-holder.fadeIn { opacity: 1; } .ttbase-modal .overlay { display: block; } .ttbase-modal .overlay:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: #292929; opacity: .3; z-index: 2; } .image-md { max-height: 120px; } .image-small { max-height: 80px; } .image-xs { max-height: 50px; } .image-xxs { max-height: 40px; } .fade-half { opacity: 0.5; } .fade-1-4 { opacity: 0.75; } .fade-3-4 { opacity: 0.25; } .fade-on-hover { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; opacity: .5; } .fade-on-hover:hover { opacity: 1; } .cast-shadow { -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); } .cast-shadow-light { -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2); } .image-block, .image-block .image-bg { padding: 0; height: 50vw; max-height: 700px; } .image-block .container { height: 100%; } .image-block-right .image-bg { position: absolute; top: 0; } @media all and (max-width: 768px) { .image-block { height: auto; max-height: 1000000px; } .image-block .image-bg { height: 350px; } .image-block .v-align-transform { top: 0; transform: none; -webkit-transform: none; } .image-block-right .image-bg { position: relative; } } .image-edge .container { position: relative; } .image-edge .container div[class='col-'] { position: absolute; } @media all and (max-width: 990px) { .image-edge .container div[class='col-'] { position: relative; top: 0; transform: none; -webkit-transform: none; } } .image-square { height: 50vw; max-height: 640px; overflow: hidden; padding: 0; } .image-square .image, .image-square > .content { position: absolute; } .image-square .image { height: 100%; } .image-square .content { padding: 0 10%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); } .image-square.left .image { left: 0; } .image-square.left .content { right: 0; } .image-square.right .image { right: 0; } .image-square.right > .content { left: 0; } @media all and (max-width: 990px) { .image-square { height: auto; max-height: 100000px; padding-bottom: 48px; } .image-square .image, .image-square > .content { position: relative; } .image-square .image { height: 100vw; margin-bottom: 48px; max-height: 500px; } .image-square > .content { top: 0; transform: none; -webkit-transform: none; padding: 0 20%; } } @media all and (max-width: 767px) { .image-square > .content { padding: 0 15px; } } @media only screen and (min-width: 768px) and (max-device-width: 1024px) { .image-square > .content { padding: 0 25px; } } .image-zoom img { -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; } .image-zoom:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .image-caption { position: relative; overflow: hidden; } .image-caption .caption { position: absolute; width: 100%; bottom: 0; padding: 16px; color: #fff; } .image-caption .caption p { position: relative; z-index: 4; margin: 0; } .image-caption .caption:before { content: "" attr(data-caption) ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 1; background: -moz-linear-gradient(top, transparent 0%, rgba(34, 34, 34, 0.7) 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(34, 34, 34, 0.7))); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, transparent 0%, rgba(34, 34, 34, 0.7) 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, transparent 0%, rgba(34, 34, 34, 0.7) 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, transparent 0%, rgba(34, 34, 34, 0.7) 100%); / IE10+ / background: linear-gradient(to bottom, transparent 0%, rgba(34, 34, 34, 0.7) 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6222222',GradientType=0 ); / IE6-9 / } .image-caption.hover-caption .caption { opacity: 0; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; -webkit-transform: translate3d(100px, 0, 0); -moz-transform: translate3d(100px, 0, 0); -ms-transform: translate3d(100px, 0, 0); -o-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } .image-caption.hover-caption:hover .caption { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /-------------------------------------------------------------- - Half Carousel --------------------------------------------------------------/ .half-carousel.owl-theme .owl-nav div { position: static; margin: 0; background: none !important; } .half-carousel.owl-theme .owl-nav { max-width: 100px; position: relative; z-index: 99; margin-top: -100px; padding-bottom: 100px; margin-left: 10%; } /-------------------------------------------------------------- - Image Carousel --------------------------------------------------------------/ .image-carousel img { margin: 0 auto; } .image-carousel-item hr { clear: both; } .image-carousel-item { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .center .image-carousel-item { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .image-carousel-item .text-holder { opacity: 0; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; } .center .image-carousel-item .text-holder { opacity: 1; } .image-carousel { margin-bottom: 40px; } .image-carousel .owl-dots { text-align: center; } .image-carousel.owl-carousel .owl-nav.disabled, .image-carousel.owl-carousel .owl-dots.disabled { display: block; } @media all and (max-width: 767px) { .image-carousel-item { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); padding: 0 30px; } .image-carousel-item img { width: 75% !important; } .image-carousel-item .text-holder { opacity: 1; } .image-carousel .owl-theme .owl-controls .owl-buttons { display: none; } } /-------------------------------------------------------------- - Modal --------------------------------------------------------------/ .ttbase-modal { overflow-y: auto; -webkit-overflow-scrolling: auto; max-height: 100%; max-width: 50%; width: 50%; position: fixed; padding: 80px 48px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; visibility: hidden; top: 50%; left: 50%; background: #ffffff; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); z-index: -1; } .ttbase-modal.no-bg { background: none; } .modal-screen { position: fixed; width: 100%; height: 100%; background: #202229; opacity: 0; z-index: 9998; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; top: 0; left: 0; } .modal-screen.reveal-modal { opacity: .8; visibility: visible; } .ttbase-modal.reveal-modal { opacity: 1; visibility: visible; z-index: 9999; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); } .ttbase-modal .close-modal { z-index: 4; position: absolute; top: 24px; right: 32px; cursor: pointer; font-size: 18px; font-size: 1.125rem; } .ttbase-modal :not(.background-image-holder):not(.close-modal) { z-index: 4; position: relative; } .ttbase-modal.image-bg .close-modal, .ttbase-modal.no-bg .close-modal { color: #ffffff; } .ttbase-modal iframe { width: 100%; min-height: 400px; } .ttbase-modal.fullwidth { max-width: 100%; width: 100%; height: 100%; top: 0; transform: translateX(0%) translateY(0%); -webkit-transform: translateX(0%) translateY(0%); left: 0; } .ttbase-modal.fullscreen { height: 100vh; overflow-y: hidden; overflow-x: hidden; } .ttbase-modal.fullwidth .ttbase-modal-content { overflow-x: hidden; overflow-y: scroll; height: 100%; } @media all and (min-width: 1500px) { .ttbase-modal { max-width: 45%; width: 45%; } } @media all and (max-width: 1190px) { .ttbase-modal { max-width: 70%; width: 70%; padding: 64px 32px; } } @media all and (max-width: 990px) { .ttbase-modal { max-width: 80%; width: 80%; padding: 64px 32px; } } @media all and (max-width: 767px) { .ttbase-modal { max-width: 90%; width: 90%; padding: 48px 15px; transform: translateX(0%) translateY(50%); -webkit-transform: translateX(0%) translateY(50%); } .ttbase-modal .close-modal { right: 18px; } } .iframe-modal { width: 90%; height: 90%; max-width: 90%; padding: 0; } .iframe-modal .close-modal { z-index: 9999; } .iframe-modal iframe { width: 100%; height: 100%; } /-----------------------------------------------------------------------------------/ /* TTBase Image Gallery /-----------------------------------------------------------------------------------/ .ttbase-gallery .ttbase-gallery-item { display: block; float: left; overflow: hidden; } .ttbase-gallery .ttbase-gallery-item a, .ttbase-gallery .ttbase-gallery-item .item-inner { display: block; position: relative; overflow: hidden; } .ttbase-gallery .ttbase-gallery-item img { position: relative; width: 100%; height: auto; } .ttbase-gallery.gap-2 { padding: 2px; } .ttbase-gallery.gap-5 { padding: 5px; } .ttbase-gallery.gap-10 { padding: 10px; } .ttbase-gallery.gap-15 { padding: 15px; } .ttbase-gallery.gap-2 .ttbase-gallery-item a, .ttbase-gallery .ttbase-gallery-item .item-inner { margin: 2px; } .ttbase-gallery.gap-5 .ttbase-gallery-item a { margin: 5px; } .ttbase-gallery.gap-10 .ttbase-gallery-item a { margin: 10px; } .ttbase-gallery.gap-15 .ttbase-gallery-item a { margin: 15px; } .ttbase-gallery.style-1 .ttbase-gallery-item a { margin-bottom: 0; } .ttbase-gallery.style-1.gap-2 .ttbase-gallery-item a { margin-bottom: 2px; } .ttbase-gallery.style-1.gap-5 .ttbase-gallery-item a { margin-bottom: 5px; } .ttbase-gallery.style-1.gap-10 .ttbase-gallery-item a { margin-bottom: 10px; } .ttbase-gallery.style-1.gap-15 .ttbase-gallery-item a { margin-bottom: 15px; } .ttbase-gallery.style-1.gap-2 .ttbase-gallery-item .image-title { margin: 0 2px 2px; } .ttbase-gallery.style-1.gap-5 .ttbase-gallery-item .image-title { margin: 0 5px 5px; } .ttbase-gallery.style-1.gap-10 .ttbase-gallery-item .image-title { margin: 0 10px 10px; } .ttbase-gallery.style-1.gap-15 .ttbase-gallery-item .image-title { margin: 0 10px 10px; } .ttbase-gallery.cols-1 .ttbase-gallery-item { width: 100%; } .ttbase-gallery.cols-2 .ttbase-gallery-item { width: 50%; } .ttbase-gallery.cols-3 .ttbase-gallery-item { width: 33.333333%; } .ttbase-gallery.cols-4 .ttbase-gallery-item { width: 25%; } .ttbase-gallery.cols-5 .ttbase-gallery-item { width: 20%; } .ttbase-gallery.cols-6 .ttbase-gallery-item { width: 16.66666%; } .ttbase-gallery.cols-7 .ttbase-gallery-item { width: 14.285%; } .ttbase-gallery.cols-8 .ttbase-gallery-item { width: 12.5%; } .ttbase-gallery.cols-9 .ttbase-gallery-item { width: 11.111%; } .ttbase-gallery .ttbase-gallery-item .overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: block; z-index: 44; text-align: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* Style 1 / .ttbase-gallery.style-1 .ttbase-gallery-item .overlay { background-color: rgba(79, 193, 152, 0.7); opacity: 0; } .ttbase-gallery.style-1 .ttbase-gallery-item:hover .overlay { opacity: 1; } .ttbase-gallery .ttbase-gallery-item img { position: relative; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .ttbase-gallery.style-1 .ttbase-gallery-item:hover img, .ttbase-gallery.style-3 .ttbase-gallery-item:hover img, .ttbase-gallery.style-4 .ttbase-gallery-item:hover img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ttbase-gallery.style-1 .ttbase-gallery-item .overlay h5 { display: none; } .ttbase-gallery.style-1 .ttbase-gallery-item .overlay:hover h5 { display: none; } .ttbase-gallery.style-1 .ttbase-gallery-item .overlay i { opacity: 0; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 42px; font-size: 2.625rem; color: #ffffff; display: block; -webkit-transition: opacity 0.6s ease-in-out; -moz-transition: opacity 0.6s ease-in-out; -ms-transition: opacity 0.6s ease-in-out; -o-transition: opacity 0.6s ease-in-out; transition: opacity 0.6s ease-in-out; } .ttbase-gallery.style-1 .ttbase-gallery-item:hover .overlay i { opacity: 1; } .ttbase-gallery.style-1 .image-title { text-transform: uppercase; padding: 25px 20px; color: #1e2331; border: solid 1px #dfdfdf; font-weight: 600; letter-spacing: 0.075em; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .ttbase-gallery.style-1 .image-title i { font-size: 22px; font-size: 1.375rem; color: #4fc198; } .ttbase-gallery.style-1 .ttbase-gallery-item:hover .image-title { background-color: #4fc198; color: #ffffff; border-color: #4fc198; } .ttbase-gallery.style-1 .image-title h5 { display: inline; } .ttbase-gallery.style-1 .ttbase-gallery-item:hover .image-title i { color: #ffffff; } / Style 2 - Grayscale / .ttbase-gallery.style-2 .ttbase-gallery-item img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: gray; filter: grayscale(100%); filter: url(img/desaturate.svg#grayscale); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ttbase-gallery.style-2 .ttbase-gallery-item:hover img { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: none; } .ttbase-gallery.style-2 .ttbase-gallery-item .overlay, .ttbase-gallery.style-2 .image-title { display: none; } /-----------------------------------------------------------------------------------/ / Recent Posts Grid /-----------------------------------------------------------------------------------/ .ttbase-recent-posts:after, .ttbase-grid-col:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; zoom: 1; } .ttbase-recent-posts-entry-media .ttbase-recent-posts-entry-img { overflow: hidden; display: block; position: relative; margin: 0; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; z-index: 1; } .ttbase-recent-posts-entry-media .ttbase-recent-posts-entry-img img { max-width: 100%; height: auto; display: block; -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: none; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } .grayscale .ttbase-recent-posts-entry-media .ttbase-recent-posts-entry-img img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: gray; filter: grayscale(100%); filter: url(img/desaturate.svg#grayscale); } .ttbase-recent-posts-entry-media .ttbase-recent-posts-entry-img:hover img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .grayscale .ttbase-recent-posts-entry-media .ttbase-recent-posts-entry-img:hover img { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ttbase-recent-posts-entry-title { margin: 10px 0 20px 0; padding: 0; } .ttbase-recent-posts-entry-title a { color: #1e2331; } .ttbase-recent-posts-entry-title a:hover { color: #4fc198; } .ttbase-recent-posts-entry-details { background-color: #ffffff; padding: 30px 35px; } .ttbase-recent-posts-entry-readmore-wrap { display: block; margin-top: 30px; } .ttbase-recent-posts-entry-posted-on { color: #707275; display: block; margin: 15px 0 0 0; font-weight: 600; text-transform: uppercase; font-size: 12px; font-size: 0.75rem; } .ttbase-grid-pagination { margin: 15px 0; } .ttbase-grid-pagination ul { padding: 0; margin: 0; text-align: center; } .ttbase-grid-pagination ul li { display: inline; } .ttbase-grid-pagination ul li .page-numbers { padding: 8px 15px 10px; border: solid 1px #dfdfdf; margin: 0 2px; display: inline-block; } .ttbase-grid-pagination ul li .page-numbers.dots, .ttbase-grid-pagination ul li .page-numbers.next, .ttbase-grid-pagination ul li .page-numbers.prev { padding: 8px 12px 10px; } .ttbase-grid-pagination ul li .next:after { font-family: 'ttbase'; content: "\e90a"; position: relative; top: 2px; } .ttbase-grid-pagination ul li .prev:after { font-family: 'ttbase'; content: "\e902"; position: relative; top: 2px; } .ttbase-grid-pagination ul li .page-numbers.dots { padding: 8px 12px 10px; } /-----------------------------------------------------------------------------------/ /* Recent Posts Carousel /-----------------------------------------------------------------------------------/ .ttbase-latest-blog { margin: 0 0px; } .ttbase-latest-blog .blog-item { margin: 0 0px 40px 0px; display: block; position: relative; background: #ffffff; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; z-index: 1; } .ttbase-latest-blog .blog-item .blog-pic { overflow: hidden; display: block; position: relative; margin: 0; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; z-index: 1; } .ttbase-latest-blog .blog-item .blog-pic img { max-width: 100%; height: auto; display: block; -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: none; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } .ttbase-latest-blog .blog-item .blog-pic.grayscale img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: gray; filter: grayscale(100%); filter: url(img/desaturate.svg#grayscale); } .ttbase-latest-blog .blog-item .blog-pic:hover img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ttbase-latest-blog .blog-item .blog-pic.grayscale:hover img { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ttbase-latest-blog .blog-item .blog-overlay { width: 100%; height: 100%; background: #4fc198; position: absolute; top: 0; left: 0; opacity: 0; } .ttbase-latest-blog .blog-item .blog-pic i { display: block; width: 66px; height: 66px; position: absolute; left: 50%; top: 50%; margin: 23px 0 0 -33px; text-align: center; line-height: 68px; opacity: 0; font-size: 26px; font-size: 1.625rem; color: #ffffff; font-weight: 400; } .ttbase-latest-blog .blog-item .blog-item-description { padding: 30px 35px; } .ttbase-latest-blog .blog-item h5 { margin: 10px 0 20px 0; padding: 0; } .ttbase-latest-blog .blog-item h5 a { color: #1e2331; } .ttbase-latest-blog .blog-item h5 a:hover { color: #4fc198; } .ttbase-latest-blog .blog-item .blog-item-description div { display: block; } .ttbase-latest-blog .blog-item .blog-item-description span { color: #2e323f; display: block; margin: 15px 0 0 0; font-weight: 600; text-transform: uppercase; font-size: 12px; font-size: 0.75rem; } .read-more-link { margin-top: 25px; padding-bottom: 5px; position: relative; display: inline-block; border-bottom: solid 1px #dfdfdf; font-size: 13px; font-size: 0.8125rem; font-weight: 400; text-transform: uppercase; } .read-more-link i { margin-left: 20px; font-size: 15px; color: #2e323f; position: relative; top: 2px; } /* grey / .ttbase-latest-blog.style-grey .blog-item { background: #f9f9f9; } /-----------------------------------------------------------------------------------/ / Testimonial Carousel /-----------------------------------------------------------------------------------/ .ttbase-testimonial-carousel { padding-top: 30px; } .ttbase-testimonial-carousel .testimonial-title { color: #ffffff; } .ttbase-testimonial-carousel .testimonial-title:after { right: 0; margin: 0 auto; } .ttbase-testimonial-carousel .testimonial-item { text-align: center; padding-bottom: 35px; } .ttbase-testimonial-carousel .testimonial-carousel .testimonial-author-image { border-radius: 50%; margin: 0 auto; width: auto; } .ttbase-testimonial-carousel .testimonial-quote { color: #ffffff; margin-top: 60px; font-size: 24px; font-size: 1.5rem; line-height: 34px; } .ttbase-testimonial-carousel .testimonial-quote:before { content: open-quote; font-family: 'Merriweather', serif; color: #4fc198; font-size: 28px; font-size: 1.75rem; } .ttbase-testimonial-carousel .testimonial-quote:after { content: close-quote; font-family: 'Merriweather', serif; color: #4fc198; font-size: 28px; font-size: 1.75rem; } .testimonial-author { margin-top: 50px; display: inline-block; } .testimonial-company, .testimonial-companyurl { color: #4fc198; } .testimonial-companyurl:hover { color: #4fc198; } /-----------------------------------------------------------------------------------/ /* Testimonial Grid /-----------------------------------------------------------------------------------/ .ttbase-testimonial-filters { margin-bottom: 50px; } .ttbase-testimonial-filter-list { list-style: none; padding: 0; } .ttbase-testimonial-filter-list li { display: inline-block; } .ttbase-testimonial-filter-list li a { text-transform: uppercase; color: #2e323f; margin: 0 10px; position: relative; display: block; padding-bottom: 10px; } .ttbase-testimonial-filter-list li a:after { border-bottom: 1px solid #dfdfdf; bottom: 0; content: ""; left: 0; position: absolute; width: 100%; } .ttbase-testimonial-filter-list li:first-child a { margin-left: 0; } .ttbase-testimonial-filter-list li a.active, .testimonial-filter-list li a:hover { color: #4fc198; } .ttbase-testimonial-filter-list li a.active:after, .testimonial-filter-list li a:hover:after { border-color: #4fc198; } .ttbase-testimonial-item { background-color: #ffffff; border: solid 1px; border-color: #dfdfdf; padding: 32px; } .ttbase-testimonial-grid .ttbase-testimonial-item-image { border-radius: 50%; margin: 0 auto; width: auto; } .ttbase-testimonial-grid .testimonial-quote { margin-bottom: 25px; } /-----------------------------------------------------------------------------------/ /* Team Grid /-----------------------------------------------------------------------------------/ .ttbase-team-filters { margin-bottom: 50px; } .ttbase-team-filter-list, .ttbase-team-item-social { list-style: none; padding: 0; } .ttbase-team-filter-list li, .ttbase-team-item-social li { display: inline-block; } .ttbase-team-filter-list li a { text-transform: uppercase; color: #2e323f; margin: 0 10px; position: relative; display: block; padding-bottom: 10px; } .ttbase-team-filter-list li a:after { border-bottom: 1px solid #dfdfdf; bottom: 0; content: ""; left: 0; position: absolute; width: 100%; } .ttbase-team-filter-list li:first-child a { margin-left: 0; } .ttbase-team-filter-list li a.active, .team-filter-list li a:hover, .ttbase-team-item-social li a:hover { color: #4fc198; } .ttbase-team-filter-list li a.active:after, .team-filter-list li a:hover:after { border-color: #4fc198; } .ttbase-team-item { background-color: #ffffff; border: solid 1px; border-color: #dfdfdf; padding: 50px 35px; } .ttbase-team-item-image img { width: 150px; height: auto; border-radius: 50%; margin: 0 auto; } .ttbase-team-item-name { margin-top: 50px; margin-bottom: 5px; } .ttbase-team-item-name a { color: #1e2331; } .ttbase-team-item-position { text-transform: uppercase; font-weight: 600; } .ttbase-team-item-contact { font-size: 14px; font-size: 0.875rem; } .ttbase-team-item-social { text-align: center; margin-top: 30px; } .ttbase-team-item-social li { padding: 10px 10px 0; } .ttbase-team-item-social li a { color: #2e323f; } .ttbase-team-item-social li a i { font-size: 24px; font-size: 1.5rem; } .ttbase-team-item-excerpt { margin-top: 35px; } /-----------------------------------------------------------------------------------/ /* Service Grid /-----------------------------------------------------------------------------------/ .ttbase-service-filters { margin-bottom: 50px; } .ttbase-service-filter-list, .ttbase-service-item-social { list-style: none; padding: 0; } .ttbase-service-filter-list li, .ttbase-service-item-social li { display: inline-block; } .ttbase-service-filter-list li a { text-transform: uppercase; color: #2e323f; margin: 0 10px; position: relative; display: block; padding-bottom: 10px; } .ttbase-service-filter-list li a:after { border-bottom: 1px solid #dfdfdf; bottom: 0; content: ""; left: 0; position: absolute; width: 100%; } .ttbase-service-filter-list li:first-child a { margin-left: 0; } .ttbase-service-filter-list li a.active, .service-filter-list li a:hover, .ttbase-service-item-social li a:hover { color: #4fc198; } .ttbase-service-filter-list li a.active:after, .service-filter-list li a:hover:after { border-color: #4fc198; } .ttbase-service-item { background-color: #ffffff; padding-bottom: 50px; } .outlined .ttbase-service-item { border: solid 1px #dfdfdf; } .ttbase-service-item-image img { margin: 0 auto; } .ttbase-service-item-header { padding: 0 35px; } .plain.ttbase-service-item-header { padding: 0; } .ttbase-service-item-name { margin-top: 50px; margin-bottom: 5px; } .ttbase-service-item-name a { color: #1e2331; } .ttbase-service-item-position { text-transform: uppercase; font-weight: 600; } .ttbase-service-item-contact { font-size: 14px; font-size: 0.875rem; } .ttbase-service-item-social { text-align: center; margin-top: 30px; } .ttbase-service-item-social li { padding: 10px 10px 0; } .ttbase-service-item-social li a { color: #2e323f; } .ttbase-service-item-social li a i { font-size: 24px; font-size: 1.5rem; } .ttbase-service-item-excerpt { margin-top: 35px; padding: 0 35px; } .plain .ttbase-service-item-excerpt { padding: 0; } /-----------------------------------------------------------------------------------/ /* Items List /-----------------------------------------------------------------------------------/ ul.styled-list, .content-area ul.styled-list { list-style: none; margin: 0; padding: 0; } .fa-li { position: absolute; left: -20px; top: 10px; text-align: center; } ul.styled-list li { padding: 4px 0 4px 4px; } ul.styled-list li div i { position: absolute; left: 0; top: 4px; margin-right: 10px; font-size: 15px; font-size: 0.9375rem; text-align: center; } ul.styled-list li div { display: inline-block; position: relative; padding-left: 30px; vertical-align: middle; } .widget_text ul.styled-list li { padding: 0 !important; background: none !important; } /* --- list --- / .list { clear: both; padding: 25px 0; margin: 0; list-style: none; } .list li { width: 100%; padding: 5px 0 5px 20px; } /-----------------------------------------------------------------------------------/ / Image Box /-----------------------------------------------------------------------------------/ a.ttbase-imagebox { position: relative; display: block; overflow: hidden; width: 100%; z-index: 1; } a.ttbase-imagebox .img-responsive { background-position: center center; background-size: cover; -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; transition: transform 0.4s ease; } a.ttbase-imagebox .ttbase-imagebox-overlay { position: absolute; width: 100%; top: 0; height: 100%; left: 0; padding: 10%; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; -ms-transition: background 0.4s ease; -o-transition: background 0.4s ease; transition: background 0.4s ease; } a.ttbase-imagebox .ttbase-imagebox-overlay i { font-size: 60px; font-size: 3.75rem; color: #4fc198; } a.ttbase-imagebox .ttbase-imagebox-content { position: absolute; bottom: 14%; } a.ttbase-imagebox:hover .img-responsive { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } a.ttbase-imagebox:hover .ttbase-imagebox-overlay { background: transparent !important; } a.ttbase-imagebox .ttbase-imagebox-heading { margin-bottom: 0; padding-bottom: 0; color: #fff; } a.ttbase-imagebox .ttbase-imagebox-heading:after { display: none; } a.ttbase-imagebox .ttbase-imagebox-subtitle { font-size: 16px; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: #4fc198; margin-top: 10px; margin-bottom: 0; } /* Flickity Image Carousel / .ttbase-ft-carousel .carousel-cell { width: 44.2%; margin-right: 9%; backface-visibility: hidden; -webkit-box-shadow: 0 35px 75px rgba(0, 0, 0, 0.13), 0 25px 80px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 35px 75px rgba(0, 0, 0, 0.13), 0 25px 80px rgba(0, 0, 0, 0.1); box-shadow: 0 35px 75px rgba(0, 0, 0, 0.13), 0 25px 80px rgba(0, 0, 0, 0.1); } .ttbase-ft-carousel .carousel-cell a { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; } .flickity-prev-next-button:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .ttbase-ft-carousel .flickity-prev-next-button svg { display: none; } .ttbase-ft-carousel .flickity-prev-next-button.next:after { font-family: 'ttbase'; content: '\e90a'; font-size: 36px; font-size: 2.25rem; color: #2e323f; } .ttbase-ft-carousel .flickity-prev-next-button.previous:after { font-family: 'ttbase'; content: '\e902'; font-size: 36px; font-size: 2.25rem; color: #2e323f; } / Owl Theme Design / .owl-theme .owl-nav { margin: 10px 0 35px; text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-nav [class=owl-] { color: #fff; cursor: pointer; } .owl-theme .owl-nav .owl-prev:after { font-family: 'ttbase'; font-size: 36px; font-size: 2.25rem; height: 36px; line-height: 36px; display: block; content: '\e902'; color: #a1a6a4; } .owl-theme .owl-nav .owl-prev { float: left; } .owl-theme .owl-nav .owl-next:after { font-family: 'ttbase'; font-size: 36px; font-size: 2.25rem; height: 36px; line-height: 36px; display: block; content: '\e90a'; color: #a1a6a4; } .owl-theme .owl-nav .owl-next { float: right; } .owl-theme .owl-nav .owl-next:hover:after, .owl-theme .owl-nav .owl-prev:hover:after { color: #4fc198; } .owl-theme .owl-nav [class=owl-]:hover { opacity: 1; } .owl-theme .owl-nav .disabled { opacity: .5; cursor: default; } .owl-theme .owl-dots { padding-top: 6px; text-align: center; } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; display: inline; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 0 4px; border: 1px solid #a1a6a4; background: transparent; display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; } .owl-theme .owl-dots .owl-dot.active span { border-color: #4fc198; } .owl-theme .owl-dots .owl-dot:hover span { border-color: #4fc198; background-color: #4fc198; } /-----------------------------------------------------------------------------------/ /* Provide some responsive support for the ttbase Shortcodes /-----------------------------------------------------------------------------------/ @media screen and (max-width: 992px) { .ttbase-shortcodes-responsive .ttbase-flexslider-wrap .flex-direction-nav .flex-prev { opacity: 1; left: 10px; } .ttbase-shortcodes-responsive .ttbase-flexslider-wrap .flex-direction-nav .flex-next { opacity: 1; right: 10px; } .ttbase-gallery.cols-4 .ttbase-gallery-item, .ttbase-gallery.cols-6 .ttbase-gallery-item, .ttbase-gallery.cols-8 .ttbase-gallery-item { width: 50%; } .ttbase-gallery.cols-5 .ttbase-gallery-item, .ttbase-gallery.cols-7 .ttbase-gallery-item, .ttbase-gallery.cols-9 .ttbase-gallery-item { width: 33.333333%; } } @media only screen and (max-width: 768px) { .ttbase-shortcodes-responsive .ttbase-col { width: 100%; } .ttbase-shortcodes-responsive .ttbase-one-half, .ttbase-shortcodes-responsive .ttbase-one-third, .ttbase-shortcodes-responsive .ttbase-two-third, .ttbase-shortcodes-responsive .ttbase-three-fourth, .ttbase-shortcodes-responsive .ttbase-one-fourth, .ttbase-shortcodes-responsive .ttbase-one-fifth, .ttbase-shortcodes-responsive .ttbase-two-fifth, .ttbase-shortcodes-responsive .ttbase-three-fifth, .ttbase-shortcodes-responsive .ttbase-four-fifth, .ttbase-shortcodes-responsive .ttbase-one-sixth, .ttbase-shortcodes-responsive .ttbase-five-sixth { width: 100%; float: none; margin-right: 0; margin-bottom: 20px; } .ttbase-shortcodes-responsive .ttbase-shortcodes-responsive .ttbase-pricing-table > div { margin-bottom: 25px; } .ttbase-shortcodes-responsive .ttbase-shortcodes-responsive .ttbase-box, .ttbase-shortcodes-responsive .ttbase-box.left, .ttbase-shortcodes-responsive .ttbase-box.right { float: none; width: 100% !important; } .ttbase-shortcodes-responsive .ttbase-tabs ul.ui-tabs-nav { margin-left: 0; } .ttbase-shortcodes-responsive .ttbase-tabs ul.ui-tabs-nav li { width: 100%; } .ttbase-shortcodes-responsive .ttbase-tabs ul.ui-tabs-nav li a { border-left-width: 1px; } .ttbase-gallery.cols-2 .ttbase-gallery-item, .ttbase-gallery.cols-3 .ttbase-gallery-item, .ttbase-gallery.cols-4 .ttbase-gallery-item, .ttbase-gallery.cols-5 .ttbase-gallery-item, .ttbase-gallery.cols-6 .ttbase-gallery-item, .ttbase-gallery.cols-7 .ttbase-gallery-item, .ttbase-gallery.cols-8 .ttbase-gallery-item, .ttbase-gallery.cols-9 .ttbase-gallery-item { width: 50%; } .ttbase-icon-box { margin-bottom: 30px; } } @media only screen and (max-width: 480px) { .ttbase-gallery.cols-2 .ttbase-gallery-item, .ttbase-gallery.cols-3 .ttbase-gallery-item, .ttbase-gallery.cols-4 .ttbase-gallery-item, .ttbase-gallery.cols-5 .ttbase-gallery-item, .ttbase-gallery.cols-6 .ttbase-gallery-item, .ttbase-gallery.cols-7 .ttbase-gallery-item, .ttbase-gallery.cols-8 .ttbase-gallery-item, .ttbase-gallery.cols-9 .ttbase-gallery-item { width: 100%; } }

| ver. 1.4 | Github | . | PHP 8.2.31 | Generation time: 0.25 | proxy | phpinfo | Settings