/** * Name: Buildtab * Version: 1.0 * Author: ThemetechMount * Author URI: http://www.themetechmount.com */ /** 1. General -fonts -css - Variables -Input Textarea - Extra-outer 2. Spacing 3. Color - Skin-color, Skin-bg-color, Skin-border-color - darkGrey-color, darkGrey-bg-color - white-color, white-bg-color, white-border-color - Grey-color, Grey-bg-color, grey-border-color 4. Pre-loader 5. SocialIcon / TooltipTop 6. Slick_dots/arrows 7. TopBar 8. Header - SiteBrand(logo) - SiteNavigation(Menu) - side-menu 9. Footer - FirstFooter - SecondFooter 10. GoTop BUtton 11. Page-Title-Row 12. Inner-Pages - single-pages-content - Classic_Blog - Single_Blog - Contact_page - Error_page - Map **/ /* =============================================== General ------------------------*/ /** fonts **/ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /** css **/ @import "font-awesome.css"; @import "flaticon.css"; @import "themify-icons.css"; @import "slick.css"; @import "prettyPhoto.css"; @import "animate.css"; /** Variables **/ :root { --skin-color: #019af4; --dark-grey-color: #0014ad; --dark-color: #000000; --body-fonts-color: #8592a6; --grey-color: #f1f4f9; --white-color: #fff; --body-fonts: 'Poppins', Tahoma, Geneva, sans-serif; --title-fonts: 'Inter', Arial, Helvetica, sans-serif; } ::-moz-selection { background: var(--skin-color); color: var(--white-color); text-shadow: none; } ::-moz-selection { background: var(--skin-color); color: var(--white-color); text-shadow: none; } ::selection { background: var(--skin-color); color: var(--white-color); text-shadow: none; } body { font-family: var(--body-fonts); font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 0.1px; color: var(--body-fonts-color); } h1, h2, h3, h4, h5, h6 { font-family: var(--title-fonts); margin-bottom: 15px; font-weight: 700; color: var(--dark-grey-color); font-style: normal; text-transform: capitalize; -ms-word-wrap: break-word; word-wrap: break-word; } h1 { font-size: 60px; line-height: 72px; font-style: normal; } h2 { font-size: 50px; line-height: 64px; font-style: normal; } h3 { font-size: 38px; line-height: 48px; font-style: normal; } h4 { font-size: 30px; line-height: 40px; font-style: normal; } h5 { font-size: 20px; line-height: 26px; font-style: normal; } h6 { font-size: 18px; line-height: 20px; font-style: normal; } /*h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }*/ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } a, a:hover, a:focus, a:active { text-decoration: none; outline: none; color: var(--skin-color); } a, button, input { outline: none; } ol, ul { padding: 0; margin: 0; } strong { font-weight: 800; } iframe { width: 100%; border: none; display: block; } p { margin: 0 0 15px; } menu, ol, ul { margin: 16px 0; padding: 0 0 0 25px; } /**Input Textarea**/ textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, select { font-family: inherit; -webkit-transition: border linear .2s, box-shadow linear .2s; -moz-transition: border linear .2s, box-shadow linear .2s; -o-transition: border linear .2s, box-shadow linear .2s; transition: border linear .2s, box-shadow linear .2s; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; vertical-align: middle; width: 100%; color: var(--dark-grey-color); padding: 13px 15px 14px; border-radius: 0; font-weight: 400; background-color: var(--white-color); text-transform: inherit; border: 1px solid rgba(119, 119, 119, .2); font-size: 14px; outline: none; line-height: inherit; letter-spacing: 0px; } button, input[type="submit"], input[type="button"], input[type="reset"] { display: inline-block; text-decoration: none; font-size: 13px; line-height: 21px; font-weight: 500; padding: 11px 40px 11px; border: 2px solid transparent; border-radius: 0; color: var(--white-color); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; cursor: pointer; outline: none; -webkit-font-smoothing: antialiased; } button:focus { box-shadow: none; outline: 0; border: 0; } textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="color"]:focus { border: 1px solid var(--skin-color); -webkit-box-shadow: none; -moz-box-shadow: none; -webkit-appearance: searchfield; } /* clears the 'X' from Internet Explorer */ input[type=search]::-ms-clear { display: none; width: 0; height: 0; } input[type=search]::-ms-reveal { display: none; width: 0; height: 0; } /* clears the 'X' from Chrome */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } textarea:-moz-placeholder, textarea::-moz-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder, textarea::-webkit-input-placeholder, input::-webkit-input-placeholde { color: var(--white-color); } /** Extra-outer **/ body .page { overflow: hidden; position: relative; z-index: 10; } body .site-main { background-color: var(--white-color); position: relative; z-index: 1; } body .page.sidebar-true .site-main { padding: 0; background-color: var(--white-color); } .container { max-width: 1200px; } /* =============================================== Spacing ------------------------*/ .col-lg-2dot4 { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } /** Padding **/ .spacing-1 { padding: 200px 79px 200px 170px; margin: -100px -140px 0 0px; } .spacing-2 { margin-top: 90px; margin-left: -100px; margin-bottom: -80px; padding: 80px 0 80px 60px; } .spacing-3 { padding: 100px 0; margin-top: -325px; margin-left: 100px; } .spacing-4 { padding: 105px 430px 105px 70px; margin-right: -185px; } .spacing-5 { padding: 80px 0 75px; margin-right: -150px; } .spacing-6 { padding: 40px 0 50px; margin-left: 380px; margin-right: -200px; } .spacing-7 { padding: 60px; margin-top: -100px; } .spacing-8 { padding: 70px 10px 70px 70px; margin-top: -70px; margin-left: -30px; } .spacing-9 { padding: 90px 140px 90px 0; } .spacing-10 { padding: 30px 50px 40px; margin-top: -470px; } .spacing-11 { padding: 80px 0 20px 0px; margin-left: 90px; } .p-10 { padding: 10px !important; } .p-15 { padding: 15px; } .p-20 { padding: 20px; } .p-30 { padding: 30px; } .p-40 { padding: 40px; } .p-50 { padding: 50px; } .p-60 { padding: 60px; } .p-80 { padding: 80px; } .p-100 { padding: 100px; } .padding_right0 { padding-right: 0 !important; } .padding_right5 { padding-right: 5px } .padding_right10 { padding-right: 10px; } .padding_right15 { padding-right: 15px; } .padding_right20 { padding-right: 20px; } .padding_right25 { padding-right: 25px; } .padding_right30 { padding-right: 30px; } .padding_right35 { padding-right: 35px; } .padding_right40 { padding-right: 40px; } .padding_right45 { padding-right: 45px; } .padding_right50 { padding-right: 50px; } .padding_right55 { padding-right: 55px; } .padding_right60 { padding-right: 60px; } .padding_right65 { padding-right: 65px; } .padding_right70 { padding-right: 70px; } .padding_right75 { padding-right: 75px; } .padding_right80 { padding-right: 80px; } .padding_right85 { padding-right: 85px; } .padding_right90 { padding-right: 90px; } .padding_right95 { padding-right: 95px; } .padding_right100 { padding-right: 100px; } .padding_right110 { padding-right: 110px; } .padding_left0 { padding-left: 0px !important; } .padding_left3 { padding-left: 3px; } .padding_left5 { padding-left: 5px; } .padding_left10 { padding-left: 10px; } .padding_left15 { padding-left: 15px; } .padding_left20 { padding-left: 20px; } .padding_left25 { padding-left: 25px; } .padding_left30 { padding-left: 30px; } .padding_left35 { padding-left: 35px; } .padding_left40 { padding-left: 40px; } .padding_left45 { padding-left: 45px; } .padding_left50 { padding-left: 50px; } .padding_left55 { padding-left: 55px; } .padding_left60 { padding-left: 60px; } .padding_left65 { padding-left: 65px; } .padding_left70 { padding-left: 70px; } .padding_left75 { padding-left: 75px; } .padding_left80 { padding-left: 80px; } .padding_left85 { padding-left: 85px; } .padding_left90 { padding-left: 90px; } .padding_left95 { padding-left: 95px; } .padding_left100 { padding-left: 100px; } .padding_top0 { padding-top: 0px !important; } .padding_top5 { padding-top: 5px; } .padding_top10 { padding-top: 10px; } .padding_top15 { padding-top: 15px; } .padding_top20 { padding-top: 20px; } .padding_top25 { padding-top: 25px; } .padding_top30 { padding-top: 30px; } .padding_top35 { padding-top: 35px; } .padding_top40 { padding-top: 40px; } .padding_top45 { padding-top: 45px; } .padding_top50 { padding-top: 50px; } .padding_top55 { padding-top: 55px; } .padding_top60 { padding-top: 60px; } .padding_top65 { padding-top: 65px; } .padding_top70 { padding-top: 70px; } .padding_top75 { padding-top: 75px; } .padding_top80 { padding-top: 80px; } .padding_top85 { padding-top: 85px; } .padding_top90 { padding-top: 90px; } .padding_top100 { padding-top: 100px; } .padding_top120 { padding-top: 120px; } .padding_top145 { padding-top: 145px; } .padding_top150 { padding-top: 150px; } .padding_bottom0 { padding-bottom: 0px !important; } .padding_bottom5 { padding-bottom: 5px; } .padding_bottom10 { padding-bottom: 10px; } .padding_bottom15 { padding-bottom: 15px; } .padding_bottom20 { padding-bottom: 20px; } .padding_bottom25 { padding-bottom: 25px; } .padding_bottom30 { padding-bottom: 30px; } .padding_bottom35 { padding-bottom: 35px; } .padding_bottom40 { padding-bottom: 40px; } .padding_bottom45 { padding-bottom: 45px; } .padding_bottom50 { padding-bottom: 50px; } .padding_bottom55 { padding-bottom: 55px; } .padding_bottom60 { padding-bottom: 60px; } .padding_bottom70 { padding-bottom: 70px; } .padding_bottom80 { padding-bottom: 80px; } .padding_bottom90 { padding-bottom: 90px; } .padding_bottom100 { padding-bottom: 100px; } .padding_bottom120 { padding-bottom: 120px; } .padding_bottom130 { padding-bottom: 130px; } .padding_bottom140 { padding-bottom: 140px; } .padding_bottom150 { padding-bottom: 150px; } .padding_bottom160 { padding-bottom: 160px; } .padding_bottom170 { padding-bottom: 170px; } .padding_bottom180 { padding-bottom: 180px; } .padding_bottom190 { padding-bottom: 190px; } .padding_bottom200 { padding-bottom: 200px; } /** Margin **/ .margin_top0 { margin-top: 0px !important; } .margin_top5 { margin-top: 5px; } .margin_top10 { margin-top: 10px; } .margin_top15 { margin-top: 15px; } .margin_top20 { margin-top: 20px; } .margin_top25 { margin-top: 25px; } .margin_top30 { margin-top: 30px; } .margin_top35 { margin-top: 35px; } .margin_top40 { margin-top: 40px; } .margin_top45 { margin-top: 45px; } .margin_top50 { margin-top: 50px; } .margin_top60 { margin-top: 60px; } .margin_top65 { margin-top: 65px; } .margin_top70 { margin-top: 70px; } .margin_top80 { margin-top: 80px; } .margin_top90 { margin-top: 90px; } .margin_top100 { margin-top: 100px; } .margin_top120 { margin-top: 120px; } .margin_top130 { margin-top: 130px; } .margin_top140 { margin-top: 140px; } .margin_top150 { margin-top: 150px; } .margin_top160 { margin-top: 160px; } .mt_5 { margin-top: -5px; } .mt_10 { margin-top: -10px; } .mt_15 { margin-top: -15px; } .mt_20 { margin-top: -20px; } .mt_25 { margin-top: -25px; } .mt_30 { margin-top: -30px; } .mt_35 { margin-top: -35px; } .mt_40 { margin-top: -40px; } .mt_50 { margin-top: -50px; } .mt_55 { margin-top: -55px; } .mt_60 { margin-top: -60px; } .mt_70 { margin-top: -70px; } .mt_80 { margin-top: -80px; } .mt_90 { margin-top: -90px; } .mt_100 { margin-top: -100px; } .mt_110 { margin-top: -110px; } .mt_120 { margin-top: -120px; } .mt_130 { margin-top: -130px; } .mt_140 { margin-top: -140px; } .mt_150 { margin-top: -150px; } .mt_160 { margin-top: -160px; } .mt_170 { margin-top: -170px; } .mt_180 { margin-top: -180px; } .mt_190 { margin-top: -190px; } .mt_200 { margin-top: -200px; } .mt_210 { margin-top: -210px; } .mt_220 { margin-top: -220px; } .mt_240 { margin-top: -240px; } .mt_260 { margin-top: -260px; } .mt_280 { margin-top: -280px; } .mt_325 { margin-top: -325px; } .mt_340 { margin-top: -340px; } .mt_350 { margin-top: -350px; } .margin_bottom0 { margin-bottom: 0px !important; } .margin_bottom5 { margin-bottom: 5px; } .margin_bottom10 { margin-bottom: 10px; } .margin_bottom15 { margin-bottom: 15px; } .margin_bottom25 { margin-bottom: 25px; } .margin_bottom20 { margin-bottom: 20px; } .margin_bottom30 { margin-bottom: 30px; } .margin_bottom35 { margin-bottom: 35px; } .margin_bottom40 { margin-bottom: 40px; } .margin_bottom45 { margin-bottom: 45px; } .margin_bottom50 { margin-bottom: 50px; } .margin_bottom60 { margin-bottom: 60px; } .margin_bottom65 { margin-bottom: 65px; } .margin_bottom70 { margin-bottom: 70px; } .margin_bottom80 { margin-bottom: 80px; } .margin_bottom90 { margin-bottom: 90px; } .margin_bottom100 { margin-bottom: 100px; } .mb_5 { margin-bottom: -5px; } .mb_10 { margin-bottom: -10px; } .mb_15 { margin-bottom: -15px; } .mb_20 { margin-bottom: -20px; } .mb_25 { margin-bottom: -25px; } .mb_30 { margin-bottom: -30px; } .mb_40 { margin-bottom: -40px; } .mb_50 { margin-bottom: -50px; } .mb_60 { margin-bottom: -60px; } .mb_70 { margin-bottom: -70px; } .mb_75 { margin-bottom: -75px; } .mb_80 { margin-bottom: -80px; } .mb_90 { margin-bottom: -90px; } .mb_100 { margin-bottom: -100px; } .mb_110 { margin-bottom: -110px; } .mb_120 { margin-bottom: -120px; } .mb_140 { margin-bottom: -140px; } .margin_left0 { margin-left: 0px !important; } .margin_left10 { margin-left: 10px; } .margin_left15 { margin-left: 15px; } .margin_left20 { margin-left: 20px; } .margin_left30 { margin-left: 30px; } .margin_left40 { margin-left: 40px; } .margin_left50 { margin-left: 50px; } .margin_left60 { margin-left: 60px; } .margin_left70 { margin-left: 70px; } .margin_left80 { margin-left: 80px; } .margin_left90 { margin-left: 90px; } .margin_left100 { margin-left: 100px; } .margin_left110 { margin-left: 110px; } .margin_left120 { margin-left: 120px; } .margin_left120 { margin-left: 120px; } .margin_left130 { margin-left: 130px; } .margin_left140 { margin-left: 140px; } .margin_left150 { margin-left: 150px; } .margin_left160 { margin-left: 160px; } .margin_left170 { margin-left: 170px; } .margin_left180 { margin-left: 180px; } .margin_left190 { margin-left: 190px; } .margin_left200 { margin-left: 200px; } .ml_10 { margin-left: -10px; } .ml_15 { margin-left: -15px; } .ml_20 { margin-left: -20px; } .ml_25 { margin-left: -25px; } .ml_30 { margin-left: -30px; } .ml_35 { margin-left: -35px; } .ml_40 { margin-left: -40px; } .ml_50 { margin-left: -50px; } .ml_60 { margin-left: -60px; } .ml_65 { margin-left: -65px; } .ml_70 { margin-left: -70px; } .ml_80 { margin-left: -80px; } .ml_90 { margin-left: -90px; } .ml_100 { margin-left: -100px; } .ml_110 { margin-left: -110px; } .ml_120 { margin-left: -120px; } .ml_130 { margin-left: -130px; } .ml_140 { margin-left: -140px; } .ml_150 { margin-left: -150px; } .ml_160 { margin-left: -160px; } .ml_180 { margin-left: -180px; } .ml_200 { margin-left: -200px; } .ml_210 { margin-left: -210px; } .ml_220 { margin-left: -220px; } .ml_240 { margin-left: -240px; } .ml_260 { margin-left: -260px; } .ml_280 { margin-left: -280px; } .ml_300 { margin-left: -300px; } .margin_right0 { margin-right: 0px !important; } .margin_right10 { margin-right: 10px; } .margin_right15 { margin-right: 15px; } .margin_right20 { margin-right: 20px; } .margin_right25 { margin-right: 25px; } .margin_right30 { margin-right: 30px; } .margin_right40 { margin-right: 40px; } .margin_right50 { margin-right: 50px; } .margin_right60 { margin-right: 60px; } .margin_right70 { margin-right: 70px; } .margin_right80 { margin-right: 80px; } .margin_right90 { margin-right: 90px; } .margin_right100 { margin-right: 100px; } .margin_right110 { margin-right: 110px; } .margin_right120 { margin-right: 120px; } .margin_right130 { margin-right: 130px; } .margin_right140 { margin-right: 140px; } .margin_right150 { margin-right: 150px; } .margin_right160 { margin-right: 160px; } .margin_right170 { margin-right: 170px; } .margin_right180 { margin-right: 180px; } .margin_right190 { margin-right: 190px; } .margin_right200 { margin-right: 200px; } .mr_10 { margin-right: -10px; } .mr_15 { margin-right: -15px; } .mr_20 { margin-right: -20px; } .mr_25 { margin-right: -25px; } .mr_30 { margin-right: -30px; } .mr_40 { margin-right: -40px; } .mr_50 { margin-right: -50px; } .mr_60 { margin-right: -60px; } .mr_70 { margin-right: -70px; } .mr_80 { margin-right: -80px; } .mr_90 { margin-right: -90px; } .mr_100 { margin-right: -100px; } .mr_130 { margin-right: -130px; } .mr_140 { margin-right: -140px; } .mr_150 { margin-right: -150px; } .mr_160 { margin-right: -160px; } .mr_180 { margin-right: -180px; } .mr_200 { margin-right: -200px; } .mr_210 { margin-right: -210px; } .mr_220 { margin-right: -220px; } .mr_240 { margin-right: -240px; } .mr_260 { margin-right: -260px; } .mr_280 { margin-right: -280px; } .mr_300 { margin-right: -300px; } /* =============================================== Color ------------------------*/ /** text-color **/ .ttm-textcolor-skincolor { color: var(--skin-color); } .ttm-textcolor-darkgreycolor { color: var(--dark-grey-color); } .ttm-textcolor-greycolor { color: var(--grey-color); } .ttm-textcolor-whitecolor { color: var(--white-color); } a { color: inherit; } a, img { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } label { font-size: 14px; } .fs-14 { font-size: 14px !important; line-height: 27px; } .fs-16 { font-size: 16px !important; line-height: 27px; } .fs-17 { font-size: 17px !important; line-height: 27px; } .fs-18 { font-size: 18px !important; line-height: 26px; } .fs-20 { font-size: 20px !important; line-height: 30px; } .fs-22 { font-size: 22px !important; line-height: 26px; } .fs-23 { font-size: 23px !important; line-height: 37px !important; } .fs-24 { font-size: 24px !important; line-height: 26px; } .fs-26 { font-size: 26px !important; line-height: 36px; } .fs-28 { font-size: 28px !important; line-height: 38px; } .fs-30 { font-size: 30px !important; line-height: 40px; } .fs-35 { font-size: 35px !important; line-height: 45px; } .font-weight-500 { font-weight: 500; } .font-weight-600 { font-weight: 600 !important; } .font-weight-800 { font-weight: 800 !important; } .box-shadow { box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 7%); } .border-rad_3 { border-radius: 3px; } .border-rad_4 { border-radius: 4px; } .border-rad_5 { border-radius: 5px; } .border-rad_6 { border-radius: 6px; } .border-rad_7 { border-radius: 7px; } .border-rad_8 { border-radius: 8px; } .border-rad_9 { border-radius: 9px; } .border-rad_10 { border-radius: 10px; } /**border **/ .alignleft { float: left; margin: .425em 1.75em 1.25em 0; } .alignright { float: right; margin: .425em 0 1.25em 1.75em; } .z-index_1 { z-index: -1; } .z-index-0 { z-index: 0; } .z-index-1 { z-index: 1; } .z-index-2 { z-index: 2; } .ttm_single_image-wrapper { position: relative; } .ttm_single_image_text:before { position: absolute; height: 90%; width: 85%; top: 70px; left: 88px; content: ""; display: block; z-index: -1; } .ttm_single_image_text p { border: none; background-color: transparent; color: var(--dark-grey-color); font-size: 18px; line-height: 28px; padding: 20px 0px 0px 110px; margin: 0 30px 0 40px; position: relative; font-weight: 500; font-style: italic; } .ttm_single_image_text p:before { webkit-mask: url(../images/quote-img1.svg); mask: url(../images/quote-img1.svg); -webkit-mask-box-image: url(../images/quote-img1.svg); -webkit-mask-size: cover; mask-size: cover; position: absolute; top: 25px; left: 100px; width: 30px; height: 22px; content: ''; background-color: var(--skin-color); display: block; } .imagestyle-two:before { position: absolute; height: 100%; width: 93%; top: 30px; left: 30px; content: ""; display: block; z-index: -1; background-color: var(--grey-color); } .ttm_single_image_text.style1 { position: absolute; left: 44%; top: 11.5%; } .ttm_single_image_text.style1:before { content: unset; } .ttm_single_image_text.style1 p { text-align: center; background-color: var(--white-color); border: 0; font-style: italic; padding: 40px 30px 30px; margin: 0; font-weight: 400; font-size: 19px; line-height: 31px; color: var(--dark-grey-color); -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 9%); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09); box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 9%); } .ttm_single_image_text.style1 p:before { webkit-mask: url(../images/quote-img1.svg); mask: url(../images/quote-img1.svg); -webkit-mask-box-image: url(../images/quote-img1.svg); -webkit-mask-size: cover; mask-size: cover; position: absolute; top: -11px; left: 0; right: 0; margin: 0 auto; display: block; width: 30px; height: 22px; content: ''; z-index: 3; } .ttm_single_image_text.style1 p:after { content: ''; position: absolute; background-color: var(--white-color); border-radius: 50%; box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px; width: 60px; height: 60px; top: -30px; left: 0; right: 0; margin: 0 auto; z-index: 1; display: block; } .imagestyle-four { border-style: solid; border-width: 2px 2px 2px 2px; border-color: #E3E3E3; transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; margin: 0px 0px 0px 0px; padding: 15px 15px 15px 15px; background-color: var(--white-color); } /* =============================================== Color ------------------------*/ /** 1.Skin-color **/ .ttm-textcolor-skincolor, .ttm-textcolor-skincolor h1, .ttm-textcolor-skincolor h2, .ttm-textcolor-skincolor h3, .ttm-textcolor-skincolor h4, .ttm-textcolor-skincolor h5, .ttm-textcolor-skincolor h6, .ttm-textcolor-skincolor a, .ttm-textcolor-skincolor i, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-skincolor a, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-skincolor i, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-skincolor a, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-skincolor i, a.ttm-textcolor-skincolor, i.ttm-textcolor-skincolor, :not(.ttm-bgcolor-darkgrey) a.ttm-textcolor-skincolor, :not(.ttm-bgcolor-darkgrey) i.ttm-textcolor-skincolor, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-skincolor, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h1, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h2, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h3, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h4, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h5, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h6, .ttm-bgcolor-darkgrey a:hover, .ttm-textcolor-white a:hover, .ttm-bgcolor-darkgrey a:hover i, .ttm-btn-color-skincolor, .ttm-bgcolor-darkgrey .ttm-btn-color-skincolor, .ttm-bgcolor-darkgrey .ttm-btn-color-skincolor i, .ttm-bgcolor-grey .ttm-btn-color-skincolor, .ttm-list-icon-color-skincolor li i, .ttm-icon_element-border.ttm-icon_element-color-skincolor, .ttm-icon_element-border.ttm-icon_element-color-grey, .ttm-btn-style-border.ttm-btn-color-skincolor, .ttm-icon_element-fill.ttm-icon_element-color-white, .ttm-icon_element-color-skincolor, .ttm-icon_element-color-skincolor:not(.ttm-icon_element-fill) i, .ttm-bgcolor-darkgrey .ttm-icon_element-color-skincolor i, .top_bar .top_bar_contact_item .top_bar_icon i, .ttm-bgcolor-darkgrey a:hover, .ttm-header-style-02 .header_btn i, .ttm-header-style-03 #site-header-menu .site-navigation ul.menu > li.active >a, .widget ul#menu-footer-quick-links li a:before, .breadcrumb-wrapper span, .widget .call_detail h3, .widget.offer_widget h2, .widget.offer_widget h3, .featured-imagebox-post.style2 .featured-content .post-meta span i, .slick-active.slick-current .testimonials.ttm-testimonial-box-view-style2 .testimonial-content blockquote:before, .ttm-highlight-quote blockquote:before, .ttm-page-title-row .breadcrumb-wrapper i, .featured-imagebox-post .ttm-btn i, h3.title span, .featured-imagebox-post .featured-content .post-meta span i, .featured-imagebox-post.style2 .featured-content h3:hover a, .featured-imagebox-services.style1:hover .featured-content .ttm-details-link a, .ttm-blog-classic .post-meta .ttm-meta-line i, .ttm-blog-single .post-meta .ttm-meta-line i, .ttm-blogbox-footer-readmore .ttm-btn i, .ttm-tags-links-title i, .footer .widget ul.ttm-recent-post-list>li> .post-detail a:hover { color: var(--skin-color); } /** Skin-bg-color **/ .ttm-bgcolor-skincolor, .ttm-bgcolor-skincolor > .ttm-bg-layer, .ttm-bgcolor-skincolor > .ttm-bg-layer > .ttm-col-wrapper-bg-layer-inner, .ttm-icon_element-fill.ttm-icon_element-color-skincolor, .ttm-btn-style-fill.ttm-btn-color-skincolor, .ttm-btn.ttm-btn-style-border.ttm-btn-color-skincolor:not(.btn-inline):hover:after, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-dark:not(.btn-inline):hover:after, .ttm-btn.ttm-btn-style-border.ttm-btn-color-skincolor:not(.btn-inline):hover:before, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-dark:not(.btn-inline):hover:before, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover:before, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover:after, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:not(.btn-inline):hover:after, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:not(.btn-inline):hover:before, .ttm-bgcolor-grey .tooltip:after, .ttm-bgcolor-grey [data-tooltip]:after, .ttm-bgcolor-darkgrey .tooltip:after, .ttm-bgcolor-darkgrey [data-tooltip]:after, .ttm-textcolor-skincolor .tooltip:after, .ttm-textcolor-skincolor [data-tooltip]:after, .slick_slider.slick-dots-style1 .slick-dots li.slick-active button, .slick_slider.slick-dots-style2 .slick-dots li.slick-active button, .slick_slider.slick-arrows-style3 .slick-arrow:hover, .slick_slider.slick-arrows-style4 .slick-arrow:hover, .slick_slider.slick-arrows-style1 .slick-prev:hover, .slick_slider.slick-arrows-style1 .slick-next:hover, .slide .slide__content--headings > h3:before, .slide .slide__content--headings > h3:after, .banner_slider_wrapper .slider-social-links-wrapper li a:hover, .banner_slider_3 .slide .slide__content--headings .highlight_text::after, nav.main-menu ul.menu li ul.mega-submenu li a:before, .ttm-header-style-01 .social-icons li a:hover, .ttm-header-style-03 .social-icons li a:hover, .ttm-play-icon-btn .ttm-play-icon-animation.ttm-play-icon-animation-skincolor:before, .ttm-play-icon-btn .ttm-play-icon-animation.ttm-play-icon-animation-skincolor:after, .featured-imagebox-procedure .process-num, .featured-imagebox-procedure .process-num:after, .featured-imagebox-portfolio.style2 .ttm-media-link a, .featured-imagebox-post.style2 .ttm-box-post-date, .featured-icon-box.style4:hover .featured-icon:before, .featured-icon-box.style5:hover i.ttm-num, .ttm-progress-bar .progress-bar-percent, .progress-bar-color-bar_white.progress-bar, .ttm-bgcolor-darkgrey .ttm-progress-bar.style1 .progress-bar.progress-bar-color-bar_skincolor, .footer .widget .widget-title:before, .footer .widget .widget-title:after, .testimonials.ttm-testimonial-box-view-style1 .testimonial-avatar:before, .featured-imagebox-post.style1 .ttm-box-post-date, .featured-imagebox-team.style1:hover .ttm-media-link, .featured-imagebox-portfolio.style1 .ttm-media-link a, .breadcrumb-wrapper span:first-child:after, .ttm-team-member-single-content .ttm-social-links-wrapper ul li a:hover, .sidebar .widget-area .widget:after, .ttm-blog-classic .ttm-box-post-date, .ttm-blog-single .ttm-box-post-date, .ttm-social-share-wrapper ul li a:hover, .widget .tagcloud a:hover, .pagination-block .page-numbers:hover, .pagination-block .page-numbers.current, #totop.top-visible { background-color: var(--skin-color); } /** Skin-border-color **/ .ttm-btn-style-fill.ttm-btn-color-skincolor, .ttm-btn-color-skincolor:hover, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-dark:hover, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:not(.btn-inline):hover, .ttm-icon.ttm-icon_element-border.ttm-icon_element-color-skincolor, .slick_slider.slick-arrows-style3 .slick-arrow:hover, .banner_slider_wrapper .slider-social-links-wrapper li a:hover, .ttm-page-title-row-inner .row, .social-icons.circle li>a:hover, .featured-imagebox-procedure:hover .featured-thumbnail img, .widget .tagcloud a:hover { border-color: var(--skin-color); } .ttm-bgcolor-darkgrey .tooltip-top:before, .ttm-bgcolor-darkgrey .tooltip:before, .ttm-textcolor-skincolor .tooltip-top:before, .ttm-textcolor-skincolor .tooltip:before, .ttm-bgcolor-grey .tooltip-top:before, .ttm-bgcolor-grey .tooltip:before, .ttm-bgcolor-grey [data-tooltip]:before, .ttm-bgcolor-skincolor .bottom-angle, .featured-icon-box.style1:hover:before, nav.main-menu, .header_search .header_search_content { border-top-color: var(--skin-color); } .header_search .header_search_content:before, .header_btn:before, .ttm-bgcolor-darkgrey .tooltip-bottom:before, .featured-icon-box.style1:hover, .featured-icon-box.style3::before, .featured-imagebox-team.style1 .featured-content::before { border-bottom-color: var(--skin-color); } /** 2.Darkgrey-color **/ .ttm-textcolor-darkgrey, .ttm-textcolor-darkgrey p, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-darkgrey h1, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-darkgrey h2, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-darkgrey h3, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-darkgrey h4, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-darkgrey h5, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-darkgrey h6, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-darkgrey p, :not(.ttm-bgcolor-skincolor) .ttm-textcolor-darkgrey span, .ttm-icon.ttm-icon_element-border.ttm-icon_element-color-darkgrey, .ttm-btn.ttm-btn-style-border.ttm-btn-color-dark:hover, .ttm-btn.ttm-btn-style-border.ttm-btn-color-white:hover, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-border.ttm-btn-color-white:hover, .ttm-btn-style-fill.ttm-btn-color-skincolor, .ttm-btn-style-fill.ttm-btn-color-skincolor i, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white i, .ttm-btn-style-fill.ttm-btn-color-skincolor:hover, .ttm-bgcolor-darkgrey .ttm-btn-style-fill.ttm-btn-color-skincolor:hover i, .ttm-textcolor-white .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover, .ttm-btn-color-dark, .ttm-bgcolor-skincolor a:hover, .ttm-bgcolor-skincolor a:hover i, .ttm-btn-color-skincolor:hover, .ttm-bgcolor-skincolor .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white, .ttm-bgcolor-skincolor .row > [class*='col-']:not(.ttm-bgcolor-white) a.ttm-btn.ttm-btn-style-fill.ttm-btn-color-white, .ttm-bgcolor-skincolor .row > [class*='col-']:not(.ttm-bgcolor-white) a.ttm-btn.ttm-btn-style-fill.ttm-btn-color-white, .ttm-btn-style-fill.ttm-btn-color-white, .ttm-bgcolor-skincolor .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover, .ttm-bgcolor-skincolor .ttm-btn.ttm-btn-style-border.ttm-btn-color-white:hover, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-grey:hover, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-border.ttm-btn-color-grey:hover, .ttm-btn.ttm-btn-style-border.ttm-btn-color-white:not(.btn-inline):hover, .ttm-icon_element-color-darkgrey, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-darkgrey > i, .ttm-icon_element-color-darkgrey:not(.ttm-icon_element-fill) i, .ttm-bgcolor-grey .top_bar_content, .ttm-header-style-01 .header_search .search_btn i, nav.main-menu ul.menu li > ul.mega-submenu li a:hover, .ttm-header-style-02 .social-icons li a, .ttm-header-style-02 .social-icons li a:hover, .ttm-header-style-02 .ttm-header-featured-iconbox h3, .ttm-header-style-02 .ttm-header-featured-iconbox h5, .ttm-progress-bar .progress-bar.progress-bar-color-bar_darkgrey, .ttm-progress-bar .progress-bar-title, .ttm-bgcolor-darkgrey .ttm-progress-bar.style1 .progress-bar-percent, .progress-bar-percent.ttm-textcolor-dark-grey, .featured-imagebox-portfolio.style1 .featured-title h3, .featured-imagebox-portfolio.style1 .featured-title h3 a, .ttm-tabs.ttm-tab-style-03 ul.tabs li a, .featured-imagebox-post .ttm-box-post-date .ttm-entry-date, .ttm-pf-single-content-area a.ttm-btn.ttm-btn-style-border.ttm-btn-color-darkgrey, .ttm-icon_element-fill.ttm-icon_element-color-white i, .pagination-block .page-numbers, .pagination-block .page-numbers.current { color: var(--dark-grey-color); } /** DarkGrey-bg-color **/ .ttm-bgcolor-darkgrey, .ttm-bgcolor-darkgrey > .ttm-bg-layer, .ttm-bgcolor-darkgrey > .ttm-bg-layer > .ttm-col-wrapper-bg-layer-inner, .ttm-bgcolor-skincolor .tooltip:after, .ttm-bgcolor-skincolor [data-tooltip]:after, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-dark, .ttm-btn-style-fill.ttm-btn-color-darkgrey, .tooltip:after, [data-tooltip]:after, .ttm-icon_element-fill.ttm-icon_element-color-darkgrey, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:not(.btn-inline):hover:after, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:not(.btn-inline):hover:before, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-grey:not(.btn-inline):hover:before, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-grey:not(.btn-inline):hover:after, .ttm-btn.ttm-btn-style-border.ttm-btn-color-grey:not(.btn-inline):hover:before, .ttm-btn.ttm-btn-style-border.ttm-btn-color-grey:not(.btn-inline):hover:after, .ttm-btn.ttm-btn-style-border.ttm-btn-color-dark:not(.btn-inline):hover:before, .ttm-btn.ttm-btn-style-border.ttm-btn-color-dark:not(.btn-inline):hover:after, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover, .ttm-bgcolor-skincolor .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:not(.btn-inline):hover:before, .ttm-bgcolor-skincolor .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:not(.btn-inline):hover:after, .ttm-toggle-title-bgcolor-darkgrey, .toggle.ttm-toggle_style_border.ttm-toggle-title-bgcolor-darkgrey .toggle-title a.active, .ttm-progress-bar .progress-bar.progress-bar-color-bar_darkgrey, .ttm-progress-bar .progress-bar-inner .progress-bar.progress-bar-color-bar_darkgrey:before, .widget.widget-nav-menu ul li a:before, .ttm-pf-single-content-area a:hover.ttm-btn.ttm-btn-style-border.ttm-btn-color-darkgrey, .ttm-btn.ttm-btn-style-border.ttm-btn-color-dark:hover, .ttm-btn-color-skincolor:hover, .ttm-toggle-title-bgcolor-white .toggle-title a.active { background-color: var(--dark-grey-color); } /**Dark-bg-color **/ .ttm-bgcolor-dark, .ttm-bgcolor-dark > .ttm-bg-layer { background-color: var(--dark-color); } .ttm-icon.ttm-icon_element-border.ttm-icon_element-color-darkgrey, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-dark, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-grey:hover, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:not(.btn-inline):hover, .ttm-btn.ttm-btn-style-border.ttm-btn-color-dark:hover, .ttm-bgcolor-skincolor .row > [class*='col-']:not(.ttm-bgcolor-white) a.ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover, .ttm-bgcolor-skincolor .row > [class*='col-']:not(.ttm-bgcolor-white) a.ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover, .tooltip-top:before, .tooltip:before, [data-tooltip]:before, .ttm-pf-single-content-area a.ttm-btn.ttm-btn-style-border.ttm-btn-color-darkgrey { border-color: var(--dark-grey-color); } .ttm-bgcolor-skincolor .tooltip-top:before, .ttm-bgcolor-skincolor .tooltip:before, .ttm-bgcolor-skincolor [data-tooltip]:before, .tooltip-top:before, .tooltip:before, [data-tooltip]:before { border-top-color: var(--dark-grey-color); } /** 3.White-color **/ .ttm-textcolor-white, .ttm-bgcolor-skincolor a, .ttm-textcolor-white a, .ttm-btn-color-white, .ttm-icon_element-color-white, .ttm-icon_element-color-white > i, .ttm-bgcolor-skincolor i, .ttm-bgcolor-darkgrey i, .ttm-bgcolor-skincolor .ttm-icon_element-color-white:not(.ttm-icon_element-fill) i, .ttm-bgcolor-darkgrey .ttm-icon_element-color-white:not(.ttm-icon_element-fill) i, .ttm-textcolor-white h1, .ttm-textcolor-white h2, .ttm-textcolor-white h3, .ttm-textcolor-white h4, .ttm-textcolor-white h5, .ttm-textcolor-white h6, .ttm-textcolor-white a, .ttm-bgcolor-skincolor h1, .ttm-bgcolor-skincolor h2, .ttm-bgcolor-skincolor h3, .ttm-bgcolor-skincolor h4, .ttm-bgcolor-skincolor h5, .ttm-bgcolor-skincolor h6, .ttm-bgcolor-skincolor a, :not(.ttm-bgcolor-skincolor) .ttm-textcolor-white span:not(.ttm-textcolor-skincolor), .ttm-bgcolor-darkgrey h1, .ttm-bgcolor-darkgrey h2, .ttm-bgcolor-darkgrey h3, .ttm-bgcolor-darkgrey h4, .ttm-bgcolor-darkgrey h5, .ttm-bgcolor-darkgrey h6, .ttm-bgcolor-darkgrey a, .ttm-bgcolor-darkgrey .section-title h3, .ttm-bgcolor-dark div, .ttm-bgcolor-darkgrey div, .ttm-bgcolor-skincolor div, .ttm-textcolor-white .ttm-social-links-wrapper ul li a, .ttm-icon_element-fill.ttm-icon_element-color-skincolor, .ttm-icon_element-fill.ttm-icon_element-color-skincolor i, .ttm-icon_element-fill.ttm-icon_element-color-darkgrey, .ttm-textcolor-white:not(.ttm-bgcolor-darkgrey) .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:not(.btn-inline):hover, .ttm-bgcolor-skincolor .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:not(.btn-inline):hover, .ttm-bgcolor-skincolor .ttm-btn.btn-inline.ttm-btn-color-white:hover, .ttm-btn.ttm-btn-style-border.ttm-btn-color-white:hover, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-grey:hover, .ttm-btn.ttm-btn-style-border.ttm-btn-color-dark:hover, .ttm-btn.ttm-btn-style-border.ttm-btn-color-skincolor:hover, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover i, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover i, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover, .ttm-bgcolor-darkgrey .ttm-btn-color-skincolor:hover i, .ttm-bgcolor-skincolor .row > [class*='col-']:not(.ttm-bgcolor-white) a.ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover, .ttm-bgcolor-skincolor .row > [class*='col-']:not(.ttm-bgcolor-white) a.ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-dark, .ttm-icon.ttm-icon_element-fill.ttm-icon_element-color-darkgrey i, .ttm-icon.ttm-icon_element-fill.ttm-icon_element-color-skincolor i, .ttm-bgcolor-skincolor .section-title h2.title, .ttm-bgcolor-darkgrey .section-title h2.title, .social-icons.circle li>a:hover, .social-icons.circle li>a:hover i, .ttm-toggle-title-bgcolor-darkgrey .toggle-title a, .ttm-toggle-title-bgcolor-skincolor .toggle-title a, .ttm-toggle-title-bgcolor-grey .toggle-title a.active, .ttm-toggle-title-bgcolor-white .toggle-title a.active, .toggle.ttm-toggle_style_border .toggle-title a.active, .slick_slider.slick-arrows-style1 .slick-prev:hover, .slick_slider.slick-arrows-style1 .slick-next:hover, .slick_slider.slick-arrows-style3 .slick-prev:hover, .slick_slider.slick-arrows-style3 .slick-next:hover, .slick_slider.slick-arrows-style4 .slick-prev:hover, .slick_slider.slick-arrows-style4 .slick-next:hover, .banner_slider_wrapper .slider-social-links-wrapper li a:hover, .featured-icon-box.style5:hover i.ttm-num, .ttm-header-style-01 .top_bar .social-icons li a, .ttm-header-style-03 .header-social-icon ul.social-icons li a, .ttm-bgcolor-skincolor .ttm-progress-bar .progressbar-title, .ttm-bgcolor-skincolor .ttm-progress-bar .progress-bar-percent, .ttm-bgcolor-darkgrey .ttm-progress-bar .progressbar-title, .ttm-bgcolor-darkgrey .ttm-progress-bar.style1 .progress-bar-title, .ttm-bgcolor-skincolor .inside h3, .ttm-bgcolor-skincolor .inside h3 span:not(.ttm-textcolor-skincolor), .ttm-bgcolor-darkgrey .inside h3, .ttm-bgcolor-darkgrey .inside h3 span:not(.ttm-textcolor-skincolor), .toggle.ttm-toggle-title-bgcolor-skincolor .toggle-content p, .toggle.ttm-toggle-title-bgcolor-darkgrey .toggle-content p, .widget .tagcloud a:hover, .ttm-social-share-wrapper ul li a:hover, .featured-imagebox-services.style1:hover .featured-content-services .category, .featured-imagebox-services.style1:hover .featured-content-services .featured-title a, .featured-imagebox-portfolio.style1 .ttm-media-link a i, .featured-imagebox-portfolio.style2 .ttm-media-link a i, .pagination-block .page-numbers:hover, .ttm-bgcolor-dark .section-title.style3 h2, .ttm-bgcolor-dark .ttm-play-icon-title h3, .ttm-bgcolor-dark .ttm-play-icon-title h3, .featured-imagebox-portfolio.style2 .featured-content .featured-title h3 a { color: var(--white-color); } .ttm-bgcolor-skincolor p, .ttm-bgcolor-darkgrey p, .ttm-bgcolor-skincolor span, .ttm-bgcolor-darkgrey span, .ttm-bgcolor-skincolor i, .ttm-bgcolor-darkgrey i { color: rgba(255, 255, 255, .85); } .ttm-bgcolor-darkgrey p { color: rgba(255, 255, 255, 0.75); } .ttm-bgcolor-dark p { color: rgba(255, 255, 255, 0.80); } .ttm-bgcolor-darkgrey .top_bar_content { color: rgba(255, 255, 255, 0.60); } /** White-bg-color **/ .ttm-bgcolor-white, .ttm-bgcolor-white > .ttm-bg-layer, .ttm-bgcolor-white > .ttm-bg-layer > .ttm-col-wrapper-bg-layer-inner, .ttm-icon_element-fill.ttm-icon_element-color-white, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:not(.btn-inline):hover:before, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-border.ttm-btn-color-white:hover, .ttm-btn.ttm-btn-style-border.ttm-btn-color-white:not(.btn-inline):hover:before, .ttm-btn-style-fill.ttm-btn-color-white, .ttm-icon_element-fill.ttm-icon_element-color-white, .ttm-header-style-01 .top_bar .social-icons li a:hover, .ttm-header-style-02 .social-icons li a:hover, .ttm-progress-bar .progress-bar.progress-bar-color-bar_white, .progress-bar-color-bar_white, .ttm-toggle-title-bgcolor-white .toggle-title a, .ttm-bgcolor-darkgrey .ttm-progress-bar.style1 .progress-bar-percent { background-color: var(--white-color); } /** White-border-color **/ .ttm-bgcolor-darkgrey > .sep_holder .sep_line, .ttm-bgcolor-skincolor > .sep_holder .sep_line { border-color: rgba(255, 255, 255, .06); } .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white, .ttm-icon.ttm-icon_element-border.ttm-icon_element-color-white, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:not(.btn-inline):hover { border-color: var(--white-color); } /** 4.Grey-color **/ .ttm-bgcolor-grey, .ttm-bgcolor-grey > .ttm-bg-layer, .ttm-bgcolor-grey > .ttm-bg-layer > .ttm-col-wrapper-bg-layer-inner, .ttm-btn-style-fill.ttm-btn-color-grey, .ttm-icon_element-fill.ttm-icon_element-color-grey, .ttm-toggle-title-bgcolor-grey .toggle-title, .header_search #search_query_top, .widget.widget-nav-menu ul li a, .ttm_single_image_text:before, .ttm-team-member-single-content .ttm-social-links-wrapper ul li a, .wrap-form.contact_form span.text-input input, .wrap-form.contact_form span.text-input textarea, .wrap-form.contact_form span.text-input select, .wrap-form.request_qoute_form span.text-input input, .wrap-form.request_qoute_form span.text-input textarea, .wrap-form.request_qoute_form span.text-input select, .widget.widget-nav-menu ul li a, .sidebar .widget-area .widget.with-title, .widget.widget-download, .ttm-pf-single-detail-box, .ttm-social-share-wrapper ul li a { background-color: var(--grey-color); } .ttm-btn-style-fill.ttm-btn-color-grey, .ttm-icon.ttm-icon_element-border.ttm-icon_element-color-grey { border-color: var(--grey-color); } .ttm-icon.ttm-icon_element-fill.ttm-icon_element-color-grey { color: inherit; } /* =============================================== Pre-loader ------------------------*/ #preloader { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -30px 0 0 -30px; } #status { position: fixed; z-index: 999999; top: 0; right: 0; bottom: 0; left: 0; display: block; background: #fff; background-image: url(../images/loader.gif); background-repeat: no-repeat; background-position: center; } /* =============================================== SocialIcon / TooltipTop ------------------------*/ ul.social-icons { margin: 0; padding: 0; } .social-icons li { display: inline-block; border: none; z-index: 1; position: relative; } .social-icons li { margin: 0 2px; } .social-icons li:last-child { margin-right: 0px; } .social-icons li a { display: block; min-width: 26px; text-align: center; } .social-icons.circle li>a { border-width: 1px; border-style: solid; height: 33px; width: 33px; line-height: 33px; text-align: center; display: block; background-color: transparent; font-size: 13px; border-radius: 50%; } /* TooltipTop */ .tooltip-top { position: relative; } .tooltip:after, .tooltip:before, [data-tooltip]:after, [data-tooltip]:before { position: absolute; visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(Opacity=0); opacity: 0; -webkit-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, -webkit-transform .2s cubic-bezier(.71, 1.7, .77, 1.24); -moz-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, -moz-transform .2s cubic-bezier(.71, 1.7, .77, 1.24); transition: opacity .2s ease-in-out, visibility .2s ease-in-out, transform .2s cubic-bezier(.71, 1.7, .77, 1.24); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: none; } .tooltip:before, [data-tooltip]:before { z-index: 1001; border: 6px solid transparent; background: 0 0; content: ""; } .tooltip-top:before, .tooltip:before, [data-tooltip]:before { margin-left: -6px; margin-bottom: -12px; border-top-color: #000; border-top-color: hsla(0, 0%, 20%, .9); } .tooltip-top:after, .tooltip-top:before, .tooltip:after, .tooltip:before, [data-tooltip]:after, [data-tooltip]:before { bottom: 100%; left: 50%; } .tooltip-bottom:after { bottom: -100%; } .tooltip-bottom:before { margin-left: -6px; margin-bottom: -12px; border-top-color: transparent; } .tooltip-bottom:before { bottom: -7px; } .tooltip-top:focus:after, .tooltip-top:focus:before, .tooltip-top:hover:after, .tooltip-top:hover:before, .tooltip:focus:after, .tooltip:focus:before, .tooltip:hover:after, .tooltip:hover:before, [data-tooltip]:focus:after, [data-tooltip]:focus:before, [data-tooltip]:hover:after, [data-tooltip]:hover:before { -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); transform: translateY(-12px); } .tooltip-top:after, .tooltip:after, [data-tooltip]:after { margin-left: -16px; } .tooltip:after, [data-tooltip]:after { z-index: 1000; padding: 8px; width: 120px; color: var(--white-color); content: attr(data-tooltip); font-size: 14px; line-height: 1.2; text-align: center; border-radius: 5px; } .tooltip:focus:after, .tooltip:focus:before, .tooltip:hover:after, .tooltip:hover:before, [data-tooltip]:focus:after, [data-tooltip]:focus:before, [data-tooltip]:hover:after, [data-tooltip]:hover:before { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(Opacity=100); opacity: 1; } /* =============================================== Slick_dots/arrows ------------------------*/ .slick-slide { padding: 0 15px; } .slick_slider.slick-dots-style1 .slick-dots { padding: 0; margin: 0; padding-top: 45px; top: 100%; text-align: center; line-height: 0; } .slick_slider.slick-dots-style1 .slick-dots li { width: auto; height: auto; margin: 0; display: inline-block; } .slick_slider.slick-dots-style1 .slick-dots li button { height: 5px; width: 115px; border: 0; position: relative; margin: 9px 0; padding: 0; font-size: 0; background-color: transparent; } .slick_slider.slick-dots-style1 .slick-dots li.slick-active button { background-color: var(--skin-color); height: 5px; bottom: 2px; left: 0; right: 0; margin: 0 auto; } .slick_slider.slick-dots-style1 .slick-dots li button { background-color: #e7e7e7; border-radius: 0; height: 2px; } .slick_slider .slick-arrow { width: 46px; height: 46px; z-index: 1; border: 0; border-radius: 100%; color: inherit; background-color: rgba(255, 255, 255, .07); box-shadow: 0 0 10px 0 rgba(0, 43, 92, 0.08); border: 0; } .ttm-bgcolor-skincolor .slick_slider .slick-arrow, .ttm-bgcolor-darkgrey .slick_slider .slick-arrow { color: rgba(255, 255, 255, 0.4); } .slick_slider .slick-prev:before, .slick_slider .slick-next:before { font-family: 'themify'; font-size: 15px; line-height: 1; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick_slider .slick-prev:before { content: "\e629"; } .slick_slider .slick-next:before { content: "\e628"; } .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } /* =============================================== rev slider ------------------------*/ .slide-text { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 800; display: inline-block; } /* =============================================== TopBar ------------------------*/ .top_bar { z-index: 3; height: 50px; line-height: 50px; } .top_bar_icon { display: inline-block; vertical-align: middle; margin-right: 8px; } .top_bar_contact_item { font-size: 13px; padding-right: 18px; padding-left: 18px; position: relative; display: inline-block; z-index: 1; } .top_bar_icon i { height: 50px; line-height: 46px; border: none; border-radius: 50%; text-align: center; font-size: 14px; color: var(--skin-color); } .top_bar_content { display: inline-block; } .top_bar_content a { color: rgba(255, 255, 255, 1); } .ttm-header-style-01 .top_bar_contact_item:first-child { padding-left: 0px; } .ttm-header-style-01 .top_bar_contact_item:first-child:before { background-color: rgba(255, 255, 255, 0.13); top: 14px; right: 0; content: ''; height: 19px; width: 1px; z-index: 1; position: absolute; } .ttm-header-style-01 .top_bar_contact_item:last-child { padding-right: 0; } .contact-info { text-align: end; } .top_bar .social-icons { padding: 0; } .ttm-header-style-01 .top_bar .social-icons li { margin: 0; height: 50px; line-height: 50px; } .top_bar .social-icons li a { border: none; width: 40px; height: 50px; line-height: 50px; font-size: 14px; font-weight: 500; text-align: center; margin: 0; border-radius: 0; } .top_bar .social-icons li a.ttm-social-facebook { background-color: #385da9; } .top_bar .social-icons li a.ttm-social-twitter { background-color: #33ccff; } .top_bar .social-icons li a.ttm-social-linkedin { background-color: #0073b1; } .top_bar .social-icons li a.ttm-social-pinteres { background-color: #bd081c; } .top_bar_contact_item.ttm-highlight-right:after { content: ""; width: 5000px; height: 100%; background-color: var(--skin-color); right: 0px; left: -4px; top: -1px; position: absolute; z-index: -1; } .top_bar_contact_item.ttm-highlight-right .top_bar_icon i, .top_bar_contact_item.ttm-highlight-right .top_bar_content, .top_bar_contact_item.ttm-highlight-right .top_bar_content a { color: white; font-size: 15px; font-weight: 600; } .header_search .search_btn i { font-size: 17px; position: relative; border-radius: 50%; height: 32px; width: 32px; line-height: 32px; font-weight: inherit; display: inline-block; vertical-align: middle; text-align: center; transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; } .header_search:before { content: ''; position: absolute; height: 26px; width: 1px; top: 0; left: 42px; margin-top: 2px; background-color: rgba(12, 45, 98, 0.1); } .header_btn { display: inline-block; position: relative; padding: 0; margin: 0; } .header_btn .ttm-btn.btn-inline { color: var(--dark-grey-color); } .header_btn .ttm-btn.btn-inline:hover { color: var(--skin-color); } /**/ .ttm-header-style-01 #site-header-menu .site-navigation ul.menu > li.active >a, .ttm-header-style-01 #site-header-menu .site-navigation ul.menu > li > a:hover { color: var(--skin-color); } .ttm-header-style-01 #site-header-menu .site-navigation ul.menu > li.active >a:after, .ttm-header-style-01 #site-header-menu .site-navigation ul.menu > li:hover > a:after { color: black; } .ttm-header-style-01 #site-header-menu .site-navigation nav.main-menu ul.menu li.active ul.mega-submenu li.active > a { color: var(--skin-color); } .ttm-header-style-01 #site-header-menu .site-navigation ul.menu > li >a { color: black; } .ttm-header-style-01 #site-header-menu .site-navigation ul.menu li.active > a { color: black; } .ttm-header-style-01 #site-header-menu .site-navigation ul.menu>li:hover>a { color: var(--skin-color); } /**/ .ttm-header-style-02 .header_btn:after { top: 14px; content: ''; height: 19px; width: 1px; background-color: rgba(0, 0, 0, 0.07); z-index: 1; position: absolute; right: auto; } .ttm-header-style-02 .top_bar_contact_item { font-size: 14px; padding: 0; } /* .widget_info */ .ttm-header-style-02 .widget_info { position: relative; z-index: 1; } .ttm-header-style-02 .widget_info:not(:first-child) { padding-left: 70px; } .ttm-header-style-02 .widget_info:not(:first-child):after { content: ""; height: 50px; width: 1px; background-color: rgba(0, 0, 0, 0.06); display: block; position: absolute; right: 0px; left: 35px; top: 35px; } .ttm-header-style-02 .widget_info .widget_icon { font-size: 20px; margin-right: 17px; margin-bottom: 0; } .ttm-header-style-02 .widget_info .widget_icon i { color: var(--dark-grey-color) !important; } .ttm-header-style-02 .widget_info h5 { font-size: 14px; line-height: 25px; font-weight: normal; color: inherit; margin-bottom: 0; } .ttm-header-style-02 .widget_info h3 { font-size: 16px; font-weight: 700; line-height: 24px; padding: 0; margin: 0; } .ttm-header-style-02 .ttm-header-featured-iconbox:after { content: ""; width: 100%; height: 70px; background-color: var(--skin-color); right: 0px; left: 0px; top: -11px; position: absolute; } .ttm-header-style-02 .ttm-header-featured-iconbox h5 { font-size: 16px; font-weight: 400; margin-bottom: 0; color: var(--dark-grey-color) !important; } .ttm-header-style-02 .header_search:before { content: ''; position: absolute; height: 26px; width: 1px; top: 0; left: 42px; margin-top: 2px; background-color: rgba(255, 255, 255, 0.1); } .ttm-header-style-02 .header_cart .cart_btn { position: relative; border-radius: 50%; height: 32px; width: 32px; line-height: 31px; display: inline-block; vertical-align: middle; text-align: center; color: var(--white-color); transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; } .ttm-header-style-02 .header_cart .cart_btn .cart_count { position: absolute; bottom: 22px; left: 17px; width: 17px; height: 17px; text-align: center; line-height: 18px; font-size: 10px; display: block; background-color: var(--skin-color); color: var(--dark-grey-color); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -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; } .ttm-header-style-02 .ttm-stickable-header.fixed-header .ttm-header-style-02 .widget_info h3, .ttm-header-style-02 .ttm-stickable-header.fixed-header .ttm-header-style-02 .widget_info h5 { color: var(--white-color) !important; } .ttm-header-style-02 #site-header-menu .site-navigation nav.main-menu ul.menu li ul.mega-submenu li a { color: var(--body-fonts-color); } .ttm-header-style-02 #site-header-menu .site-navigation nav.main-menu ul.menu li ul.mega-submenu li a:hover { color: var(--dark-grey-color); } .ttm-header-style-02 #site-header-menu .site-navigation nav.main-menu ul.menu li.active ul.mega-submenu li.active > a { color: var(--skin-color); } .ttm-header-style-02 #site-header-menu .site-navigation ul.menu>li.active>a { color: var(--skin-color); } .ttm-header-style-02 #site-header-menu .site-navigation ul.menu>li:hover>a { color: var(--skin-color); } .ttm-header-style-02 #site-header-menu .site-navigation ul.menu > li.active >a:after, .ttm-header-style-02 #site-header-menu .site-navigation ul.menu > li:hover > a:after { color: var(--skin-color); } /**/ .ttm-header-style-03 .header-social-icon ul.social-icons { margin: 0; padding: 0; } .ttm-header-style-03 .header-social-icon ul.social-icons li { display: inline-block !important; padding-left: 0px; margin: 0px; min-width: 23px; border: none; font-size: 14px; } .ttm-header-style-03 .header-social-icon ul.social-icons li a { border: none; width: 50px; height: 95px; border-radius: 0; line-height: 95px; } .ttm-header-style-03 .header-social-icon ul.social-icons li a:hover { background-color: var(--white-color) !important; color: var(--skin-color); } .ttm-header-style-03 .header-social-icon ul.social-icons li a.ttm-social-facebook { background-color: #385da9; } .ttm-header-style-03 .header-social-icon ul.social-icons li a.ttm-social-twitter { background-color: #33ccff; } .ttm-header-style-03 .header-social-icon ul.social-icons li a.ttm-social-linkedin { background-color: #0073b1; } .ttm-header-style-03 .header-social-icon ul.social-icons li a.ttm-social-pinteres { background-color: #bd081c; } .ttm-header-style-03 .header_cta:after { content: ""; width: 5000px; height: 96px; background-color: var(--skin-color); right: 0px; left: -18px; top: -13px; position: absolute; z-index: -1; } .ttm-header-style-03 .header_cta .ttm-icon.ttm-icon_element-size-md { height: 67px; width: 67px; line-height: 80px; } .ttm-header-style-03 .header_cta h6 { font-size: 14px; line-height: 26px; font-weight: 400; font-family: inherit; } .ttm-header-style-03 .header_cta h5 { line-height: 23px; font-size: 17px; } .ttm-header-style-03 #site-header-menu .site-navigation ul.menu > li.active >a, .ttm-header-style-03 #site-header-menu .site-navigation ul.menu > li > a:hover { color: var(--skin-color); } .ttm-header-style-03 #site-header-menu .site-navigation ul.menu li.active > a { color: var(--skin-color); } .ttm-header-style-03 #site-header-menu .site-navigation ul.menu>li:hover>a { color: var(--skin-color); } .ttm-header-style-03 #site-header-menu .site-navigation ul.menu > li.active >a:after, .ttm-header-style-03 #site-header-menu .site-navigation ul.menu > li:hover > a:after { color: var(--skin-color); } /* =============================================== Header ------------------------*/ /** SiteBrand(logo) **/ .ttm-header-style-01 .site-branding:before { content: ""; position: absolute; left: auto; right: 83%; top: 0; width: 1200px; height: 95px; background-color: white; margin-right: 0px; margin-left: 0px; z-index: -1 } /* header_extra */ .header_extra > div { margin-left: 18px; position: relative; } .header_search #searchbox { position: relative; } .header_extra .header_search { margin-left: 20px; position: relative; } .header_search .search_btn { position: relative; height: 32px; width: 32px; line-height: 31px; font-size: 17px; display: inline-block; vertical-align: middle; text-align: center; color: rgba(12, 45, 98, 1); transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; } .header_search .search_btn i { font-weight: 700; position: relative; } .header_search_content button.close-search { position: absolute; top: 0; bottom: 0; right: 0px; box-shadow: unset; font-size: 15px; width: 15%; border-radius: 0; height: 50px; text-align: center; display: block; line-height: 37px; color: var(--dark-grey-color); float: left; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-color: var(--skin-color); } .header_search .header_search_content { position: absolute; right: 50px; width: 400px; background: #ffffff; border-right: 3px solid var(--skin-color); opacity: 0; top: -25px; -webkit-transition: all ease .3s; -ms-transition: all ease .3s; transition: all ease .3s; z-index: 0; border-radius: 0px; padding: 15px; -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 9%); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09); box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 9%); } .header_search .header_search_content:before { position: absolute; right: -12px; top: 25px; width: 47px; height: 47px; text-align: center; width: 0; height: 0; border-left: 10px solid var(--skin-color); border-bottom: 10px solid transparent; border-top: 10px solid transparent; content: " "; } .header_search .header_search_content.on { opacity: 1; z-index: 2; transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; } .header_search #search_query_top { font-weight: 400; position: relative; clear: both; min-width: 240px; font-size: 14px; text-align: left; height: 50px; border-radius: 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: none !important; background-color: #f6f6f6; line-height: 51px; float: left; border: 1px solid rgba(0, 0, 0, .08); } /** SiteNavigation(Menu) **/ .site-navigation { position: relative; z-index: 2; } nav.main-menu ul { position: relative; margin: 0; } /* =============================================== Footer ------------------------*/ .footer { z-index: 1; background-position: center center; background-attachment: scroll; } .footer .footer-logo img { max-height: 46px; } .footer .footer-logo { position: relative; min-width: 260px; } .footer .footer-logo:after { display: block; height: 90%; content: ''; position: absolute; right: 55px; width: 1px; top: 5%; background-color: rgba(255, 255, 255, .07); } .footer .social-icons li { font-weight: normal; text-align: center; position: relative; margin: 0; } .footer .social-icons li a { width: 35px; height: 35px; line-height: 33px; border: 2px solid rgba(255, 255, 255, 0.48); text-align: center; display: block; margin: 0 3px; background-color: transparent; font-size: 16px; color: rgba(255, 255, 255, 0.48); } .footer .social-icons li a i { color: rgba(255, 255, 255, 0.48); } .footer .widget .widget-title { font-weight: 700; font-size: 20px; line-height: 30px; margin-bottom: 20px; display: inline-block; position: relative; } .footer .widget ul { margin: 0; padding: 0; list-style: none; } /* first-footer (newsletter) */ .first-footer { padding-top: 40px; padding-bottom: 25px; position: relative; background-color: var(--skin-color);; } .widget-latest-tweets-bg{ background-color: #092553; } .first-footer .featured-icon-box.icon-align-before-content { margin: 0; } .first-footer .featured-icon-box.icon-align-before-content .featured-title h3 { font-size: 25px; margin-bottom: 0; color: var(--dark-grey-color); font-weight: 700; } .first-footer .featured-icon-box.icon-align-before-content .featured-content .featured-desc p { color: var(--dark-grey-color); } /* second-footer */ .bg-footer { background-image: url(../images/bg-image/footer-bg.png); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; } .ttm-bgimage-yes.bg-footer >.ttm-bg-layer { opacity: 0.80 !important; } .footer .second-footer { padding: 35px 0 0 0px; } .second-footer .container { position: relative; } .second-footer .widget-area .widget { padding: 20px 0px 0px; } /** menu-footer-quick-links **/ .widget ul#menu-footer-quick-links li a { display: inline-block; position: relative; } .widget ul#menu-footer-quick-links li a i { padding-right: 10px; color: var(--skin-color); } .widget ul#menu-footer-quick-links li { display: block; padding: 0px 0px 15px 0; position: relative; } .widget ul#menu-footer-quick-links li:last-child { padding-bottom: 0; } .widget ul#menu-footer-quick-links li { display: inline-block; width: calc(50% - 2px); padding: 0 0 15px 0; position: relative; } .widget ul#menu-footer-quick-links li:last-child { padding-bottom: 0; } .widget ul#menu-footer-quick-links li:nth-child(9) { } .widget-latest-tweets { background-color: 019AF4; padding: 30px 30px 35px 30px; } .widget-latest-tweets .widgte-text .widgte-title h4 { font-size: 20px; margin-bottom: 15px; } .widget-latest-tweets .widgte-text ul.ttm-timelist-block { padding: 0; list-style: none; } .widget-latest-tweets .widgte-text ul.ttm-timelist-block li { padding: 10px 0 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); } .widget-latest-tweets .widgte-text ul.ttm-timelist-block li:last-child { border-bottom: none !important; padding-bottom: 0 !important; } .widget-latest-tweets .widgte-text ul.ttm-timelist-block li:first-child { padding-top: 0; } .widget-latest-tweets .widgte-text ul.ttm-timelist-block li .service-time { float: right; } .widget-latest-tweets .widgte-text ul.ttm-timelist-block li .sundaylist { float: right; color: var(--skin-color); } /** ttm-recent-post-list **/ .footer .widget ul.ttm-recent-post-list>li { padding: 0 0 30px !important; margin-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, .06); } .footer .widget ul.ttm-recent-post-list>li:last-child { padding-bottom: 0 !important; border-bottom: 0; margin-bottom: 0; } .footer .widget ul.ttm-recent-post-list>li> .post-detail a { font-size: 14px; line-height: 20px; display: block; font-weight: 400; position: relative; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--white-color); } .footer .widget ul.ttm-recent-post-list>li img { display: block; width: 70px; height: 70px; float: left; margin-right: 18px; } .footer .widget ul.ttm-recent-post-list>li .post-date { display: block; font-size: 14px; line-height: 20px; margin-bottom: 5px; color: rgba(255, 255, 255, 0.75); } .widget ul.ttm-recent-post-list>li .post-date i { margin-right: 5px; font-size: 11px; color: var(--skin-color) !important; } /** widget_contact_wrapper **/ ul.widget_contact_wrapper li { padding-left: 35px; position: relative; padding-bottom: 15px; margin-bottom: 15px; line-height: 25px; color: rgba(255, 255, 255, .75); border-bottom: 1px solid #29343b; } ul.widget_contact_wrapper li:last-child { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; } ul.widget_contact_wrapper li i { position: absolute; left: 0; top: 2px; line-height: 1; font-size: 18px; font-weight: 400; } .newsletter_widget { padding: 0 !important; } .newsletter_widget .newsletter-form { position: relative; } .newsletter_widget .newsletter-form input { background-color: var(--white-color); border: 1px solid rgba(255, 255, 255, 1) !important; font-size: 13px; width: 100%; height: 54px; outline: none; border-radius: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right: 145px; } .newsletter_widget .newsletter-form button[type="submit"] { position: absolute; top: 0; height: 54px; border: 0; z-index: 1; padding: 0 25px; right: 0; font-weight: 700; background-color: var(--dark-grey-color); color: var(--skin-color); font-size: 15px; border-radius: 0; display: inline-block; -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; } .newsletter_widget .newsletter-form button[type="submit"] i { color: var(--skin-color); } .bottom-footer-text:before { background-image: url(../images/fuel-truck.png); background-repeat: no-repeat; background-position: right bottom; background-size: contain; position: absolute; width: 80px; height: 80px; right: 0; top: -68px; animation: running-anim 20s linear infinite; content: ''; z-index: 9; } .bottom-footer-text:after { background-image: url(../images/crane-truck.png); background-repeat: no-repeat; background-position: right bottom; background-size: contain; position: absolute; width: 85px; height: 85px; right: 70%; top: -80px; animation: running-anim-left 35s linear infinite; content: ''; z-index: 9; } @-moz-keyframes running-anim { 0% { right: -30% } 100% { right: 100% } } @-webkit-keyframes running-anim { 0% { right: -30% } 100% { right: 100% } } @keyframes running-anim { 0% { right: -30% } 100% { right: 100% } } @-moz-keyframes running-anim-left { 0% { left: -30% } 100% { left: 100% } } @-webkit-keyframes running-anim-left { 0% { left: -30% } 100% { left: 100% } } @keyframes running-anim-left { 0% { left: -30% } 100% { left: 100% } } /** copyright **/ .copyright { padding-top: 20px; margin-top: 55px; padding-bottom: 15px; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, .03); } .copyright, .copyright .cpy-text { color: rgba(255, 255, 255, .75) !important; } .copyright ul.list-inline { margin: 0; } /** Footer-nav-menu **/ .footer-nav-menu { padding: 0; margin: 0; } .footer-nav-menu li { display: inline-block; padding-right: 18px; font-size: 14px; margin-top: 4px; } .footer-nav-menu li:last-child { padding-right: 0; } ul.footer-nav-menu li:after { position: absolute; content: "|"; color: var(--white-color); padding-left: 8px; } ul.footer-nav-menu li:last-child:after { content: unset; } /* =============================================== GoTop BUtton ------------------------*/ #totop { font-weight: 900; color: var(--dark-grey-color); display: none; position: fixed; right: 34px; bottom: 50px; z-index: 999; height: 0; width: 0; font-size: 0; text-align: center; padding-top: 3px; line-height: 34px; border-radius: 0px; transition: .3s ease-in-out; } #totop.top-visible { height: 40px; width: 40px; font-size: 22px; display: inline; } /* =============================================== Page-Title-Row ------------------------*/ .ttm-page-title { position: relative; background-position: center center; background-size: cover; background-repeat: repeat; background-attachment: scroll; width: 100%; z-index: 1; } .ttm-page-title:after { content: " "; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; opacity: .4; background-color: var(--dark-color); } .ttm-page-title-row { background: url(https://via.placeholder.com/1920x252?text=1920x252+pagetitle-row.jpg); background-color: rgba(0, 0, 0, 0.36); background-position: center center; background-size: cover; background-repeat: repeat; background-attachment: scroll; width: 100%; z-index: 1; } .ttm-page-title-row.ttm-bg.ttm-bgimage-yes >.ttm-bg-layer { opacity: 0.4; } .ttm-page-title-row-inner { width: 100%; text-align: center; position: relative; padding: 75px 0; margin: 0 auto; z-index: 2; } .page-title-heading h2 { font-weight: 800; text-transform: capitalize; font-size: 47px; line-height: 57px; display: inline-block; margin-bottom: 45px; color: var(--white-color); } .breadcrumb-wrapper span { font-weight: 400; text-transform: capitalize; font-size: 14px; color: white; line-height: 20px; position: relative; } .breadcrumb-wrapper span:first-child { padding-right: 20px; } .breadcrumb-wrapper span:first-child a { color: var(--white-color); } .breadcrumb-wrapper span:first-child:after { position: absolute; content: "\f105"; font-family: "FontAwesome"; font-size: 14px; line-height: 17px; margin-left: 4px; margin-top: 2px; opacity: 1; color: var(--white-color); background-color: transparent; } .breadcrumb-wrapper { z-index: 1; background-color: var(--dark-grey-color); padding: 12px 30px; line-height: 20px; margin: 0 auto; } .breadcrumb-wrapper { position: absolute; left: 0; right: 0; bottom: 0; width: max-content; } /* =============================================== Inner-Pages ------------------------*/ /*------------------------------------------------------------------------------*/ /* single_services /*------------------------------------------------------------------------------*/ .ttm-service-single-content-area div:not(.featured-title) > h3 { font-size: 24px; line-height: 34px; margin: 0; } /*------------------------------------------------------------------------------*/ /* single_team /*------------------------------------------------------------------------------*/ .ttm-team-details { border: 5px solid #e7e7e7; margin: 0; padding: 40px 25px 40px; } .ttm-team-member-content { position: relative; } .ttm-team-member-content .featured-icon-box { position: absolute; left: -150px; top: -10px; } .ttm-team-member-content .featured-icon-box .featured-icon .ttm-icon.ttm-icon_element-size-md { height: 60px; width: 60px; line-height: 60px; color: var(--white-color); font-size: 30px; text-align: center; } .ttm-team-member-content .featured-icon-box .featured-content .featured-title h3 { font-size: 24px; line-height: 30px; margin-bottom: 0; font-weight: 700; } .ttm-team-member-content .ttm-team-deatils-box { padding: 125px 20px 25px; } .ttm-team-member-content .ttm-team-deatils-box .ttm-team-details-list { padding: 0; margin: 0; } .ttm-team-member-content .ttm-team-deatils-box .ttm-team-details-list li { position: relative; font-size: 16px; line-height: 24px; display: block; float: left; padding: 10px 0; width: 100%; } .ttm-team-member-content .ttm-team-deatils-box .content-post.content-team-post .ttm-social-links-wrapper ul li a { margin: 0 2px; display: block; color: rgba(44, 44, 44, .6); } .ttm-team-member-content .ttm-team-deatils-box .ttm-social-links-wrapper { border: 0; padding: 0; margin: 21px 0 0; } .ttm-team-member-content .ttm-team-deatils-box .ttm-team-details-list .ttm-team-list-title { margin-right: 8px; position: relative; font-weight: 600; font-size: 16px; line-height: 26px; float: left; color: var(--dark-grey-color); } .ttm-team-member-content .ttm-team-deatils-box .ttm-team-details-list .ttm-team-list-value { font-size: 14px; } .ttm-team-member-content .ttm-team-deatils-box .ttm-social-links-wrapper { display: block; clear: both; padding-top: 10px; } .ttm-team-member-content .ttm-team-deatils-box .ttm-social-links-wrapper ul li a { display: block; background-color: transparent; font-size: 14px; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid rgba(133, 146, 166, 0.30); border-radius: 0; margin-right: 0px; color: inherit; } .ttm-team-member-content .ttm-team-deatils-box .ttm-social-links-wrapper ul li a:hover { background-color: var(--skin-color); color: var(--white-color); } .ttm-team-member-title h2 { font-size: 26px; line-height: 36px; position: relative; margin-bottom: 0; } .ttm-team-member-title.line-style { border-right: 5px solid #E7E7E7; height: 100%; display: flex; flex-direction: column; justify-content: center; } /*------------------------------------------------------------------------------*/ /* Classic_Blog /*------------------------------------------------------------------------------*/ article.ttm-blog-classic { margin-bottom: 40px; padding-bottom: 0; } article.ttm-blog-classic:last-child { margin-bottom: 15px; } article.ttm-blog-classic .ttm-post-featured-wrapper, article.ttm-blog-single .ttm-post-featured-wrapper { position: relative; overflow: hidden; } article.ttm-blog-classic .ttm-blog-classic-content, article.ttm-blog-single .ttm-blog-single-content { background: var(--grey-color); padding: 30px 30px 35px; position: relative; display: block; position: relative; } article.ttm-blog-single .ttm-blog-single-content { margin-bottom: 50px; } .ttm-blog-classic .ttm-box-post-date, .ttm-blog-single .ttm-box-post-date { z-index: 1; text-align: center; background-color: var(--skin-color); color: var(--dark-grey-color); position: relative; display: inline-block; padding: 4px 20px; margin-bottom: 15px; } .ttm-blog-classic .ttm-box-post-date .ttm-entry-date, .ttm-blog-single .ttm-box-post-date .ttm-entry-date { font-weight: 400; font-size: 12px; line-height: 26px; } .ttm-blog-classic .ttm-box-post-date .ttm-entry-date .entry-month, .ttm-blog-single .ttm-box-post-date .ttm-entry-date .entry-month { font-size: 14px; font-weight: 400; margin-top: 5px; text-transform: uppercase; } .ttm-blog-classic .post-meta .ttm-meta-line, .ttm-blog-single .post-meta .ttm-meta-line { font-size: 13px; line-height: 15px; display: inline-block; padding-right: 20px; position: relative; } .ttm-blog-classic .post-meta .ttm-meta-line:last-child { padding-right: 0; } .ttm-blog-classic .post-meta .ttm-meta-line:not(:last-child):after, .ttm-blog-single .post-meta .ttm-meta-line:not(:last-child):after { position: absolute; display: inline-block; content: ""; height: 17px; width: 1px; right: 10px; top: 0; margin-top: 2px; background-color: currentColor; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); opacity: 0.4; } .ttm-blog-classic .post-meta .ttm-meta-line i, .ttm-blog-single .post-meta .ttm-meta-line i { padding-right: 10px; font-size: 15px; } .ttm-blog-classic .entry-header .entry-title { font-size: 28px; line-height: 34px; margin-bottom: 10px; } .ttm-blog-classic .ttm-blogbox-footer { position: relative; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, 0.07); } .ttm-blog-classic .ttm-blogbox-footer { display: flex; justify-content: space-between; align-items: center; } .ttm-blog-classic .ttm-blogbox-footer a i { color: var(--skin-color); } .ttm-blog-classic .ttm-post-featured img { -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(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; } .ttm-blog-classic:hover .ttm-post-featured img { transform: scale(1.03) rotate(0.50deg); } /*------------------------------------------------------------------------------*/ /* Single_Blog /*------------------------------------------------------------------------------*/ .without-sidebar-container { max-width: 1024px; } .ttm-blog-single .post-meta { display: block; margin-bottom: 15px; } .ttm-blog-single h3 { font-size: 22px; line-height: 32px; margin-top: 20px; } .ttm-blog-single ol.ttm-post-num-list { position: relative; } .ttm-blog-single ol li { position: relative; padding-left: 40px; padding-bottom: 0; margin-bottom: 25px; } .ttm-blog-single ol li::marker { font-size: 20px; line-height: 26px; font-family: var(--title-fonts); font-weight: 700; position: relative; color: var(--dark-grey-color); } .ttm-blog-single ol li:before { content: ''; position: absolute; height: 100%; width: 2px; background-color: var(--skin-color); top: 0; left: 15px; } .ttm-blog-single .social-media-block { display: block; clear: both; overflow: hidden; padding-top: 10px; border-top: 1px solid #f3f3f3; margin-top: 20px; } .ttm-blog-single .ttm_tag_lists { } .ttm-blog-single .ttm_tag_lists { font-size: 16px; } .ttm-blog-single .ttm_tag_lists .ttm-tags-links-title { font-size: 16px; font-weight: 600; padding-right: 7px; color: var(--dark-grey-color); } .ttm-blog-single .ttm_tag_lists .ttm-tags-links-title i { padding-right: 5px; } .ttm-blog-single .social-media-block .ttm-tags-links a { position: relative; color: inherit; display: inline-block; padding: 7px 19px; margin: 0 3px 10px; border: 1px solid rgba(227, 227, 227, 0.7); background-color: var(--white-color); font-size: 14px; } .ttm-blog-single .social-media-block .ttm-tags-links a:hover { background-color: var(--skin-color); color: var(--white-color); } .ttm-blog-single .ttm-social-share-wrapper { display: flex; align-items: center; } .ttm-blog-single .ttm-social-share-wrapper ul li a { display: block; background-color: var(--white-color); font-size: 14px; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid rgba(133, 146, 166, 0.30); border-radius: 0; margin-right: 0px; color: inherit; } .ttm-blog-single .ttm-social-share-wrapper ul li a:hover { background-color: var(--skin-color); color: var(--white-color); } /**/ .featured-icon-box.icon-align-before-content .featured-title h4 { display: block; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 18px; line-height: 24px; font-weight: 700; } /*blog-comment*/ .comments-area { padding-top: 30px; margin-bottom: 0; } .comments-area p.comment-notes { margin-bottom: 10px; font-size: 15px; font-style: italic; } .comments-area h3.comment-reply-title { font-size: 30px; line-height: 40px; margin-bottom: 15px; } .comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { font-size: 15px; padding: 13px 15px; border-radius: 0; background-color: var(--white-color); } .comments-area .comment-form .comment-form-url { margin-right: 0; } .comment-form button.submit:hover { background-color: var(--skin-color); border-color: var(--skin-color); } /*------------------------------------------------------------------------------*/ /* Project_Blog /*------------------------------------------------------------------------------*/ .ttm-pf-single-detail-box { display: block; height: 100%; padding: 25px 30px 30px; overflow: hidden; } .ttm-pf-single-detail-box .ttm-short-desc { padding-bottom: 25px; border-bottom: 1px solid #e8e8e8; margin-bottom: 22px; } .ttm-pf-single-title h3 { position: relative; font-size: 24px; line-height: 28px; margin-bottom: 0; } .ttm-pf-single-detail-box ul { overflow: hidden; margin: 0; padding: 0; } .ttm-pf-single-detail-box ul li { display: grid; margin-bottom: 10px; padding: 8px 0px 8px 0px; } .ttm-pf-single-detail-box ul li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .ttm-pf-single-detail-box ul li h3 { font-size: 17px; line-height: 25px; font-weight: 600; margin-bottom: 0; } .ttm-pf-single-detail-box ul li > span:first-child { margin-right: 5px; font-size: 15px; color: var(--dark-grey-color); } .ttm-pf-single-content-area h2, .ttm-pf-single-related-wrapper h2 { text-align: left; font-size: 30px; line-height: 36px; margin-bottom: 20px; } .ttm-pf-single-content-wrapper ul.social-icons li a { display: block; background-color: var(--grey-color); color: #8592a6; font-size: 14px; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid rgba(133, 146, 166, 0.30); border-radius: 0; margin-right: 0px; color: inherit; } .ttm-pf-single-content-wrapper ul.social-icons li a:hover { background-color: var(--skin-color); color: var(--white-color); } .portfolio-single ul.social-icons:before, .portfolio-single ul.social-icons:after { content: ''; position: absolute; height: 1px; width: 42%; top: 17px; left: 0; background-color: rgba(0, 0, 0, 0.07); z-index: -1; } .portfolio-single ul.social-icons:after { left: auto; right: 0; } .ttm-pf-single-content-area a.ttm-btn.ttm-btn-style-border { position: relative; color: inherit; display: inline-block; padding: 10px 30px 10px 30px; margin: 0 3px 10px; border: 1px solid rgba(227, 227, 227, 0.7); background-color: var(--white-color); font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 0.1px; font-family: var(--body-fonts); } .ttm-pf-single-content-area a:hover.ttm-btn.ttm-btn-style-border { background-color: var(--skin-color); color: var(--white-color); } .ttm-pf-single-content-area a.ttm-btn.ttm-btn-style-border.ttm-btn-color-darkgrey { font-weight: 600; } /*------------------------------------------------------------------------------*/ /* Contact_page /*------------------------------------------------------------------------------*/ .ttm_contact_widget_wrapper { position: relative; z-index: 222; overflow: hidden; clear: both; background-color: var(--white-color); padding: 30px 50px 40px; position: absolute; top: -474px; min-width: 325px; } .ttm_contact_widget_wrapper h3 { font-size: 30px; line-height: 40px; } .ttm_contact_widget_wrapper ul { padding: 0; margin: 0; z-index: 2; list-style: none; clear: both; } .ttm_contact_widget_wrapper li { margin-bottom: 17px; } .ttm_contact_widget_wrapper li h6 { text-align: left; font-size: 22px; line-height: 32px; margin-bottom: 0; } /*------------------------------------------------------------------------------*/ /* Error_page /*------------------------------------------------------------------------------*/ .error-404 { background-image: url(../images/404-page-bg.png); background-color: #0014ad; background-position: right bottom; background-size: auto; background-repeat: repeat; background-attachment: scroll; } .page-header { margin: 40px 0 20px; } section.error-404 { padding: 150px 0; text-align: center; } section.error-404 .ttm-big-icon { font-size: 105px; } section.error-404 h1 { font-size: 70px; text-transform: uppercase; line-height: 100%; } section.error-404 .page-content p { font-size: 18px; margin-bottom: 30px; color: rgba(255, 255, 255, 0.50); } /*------------------------------------------------------------------------------*/ /* Map /*------------------------------------------------------------------------------*/ #map { display: block; height: 550px; width: 100%; }