html, body { padding: 0; margin: 0; overflow-x: hidden; overflow-y: auto; } body { position: relative; background-color: #FFF; font-family: 'Montserrat', sans-serif; line-height: 1.5; font-size: 18px; color: #333; -webkit-font-smoothing: antialiased; } a { color: #0040d8; text-decoration: none; } a:hover, a:focus { color: #0f3fb1; text-decoration: none; } a:focus { outline: none; } p { margin: 0 0 20px; font-weight: 300; } img { max-width: 100%; height: auto; } b, strong { font-weight: bold; font-weight: 600; } section { position: relative; } /* selection */ ::selection { color: #fff; text-shadow: none; background: #0040d8; } ::-moz-selection { color: #fff; text-shadow: none; background: #0040d8; /* Firefox */ } ::-webkit-selection { color: #fff; text-shadow: none; background: #0040d8; /* Safari */ } .small, small { font-size: 80%; } /* Linearicons line height fix */ .lnr { line-height: inherit; } /* lead */ .lead { font-size: 21px; font-weight: normal; } /* --------------------------------------------------------------------------------------- * * Page transitions / Page preloader (Animsition). Display loading animation while page loads * More info: http://git.blivesta.com/animsition/ /* --------------------------------------------------------------------------------------- */ /* circle loader */ .animsition-loading { z-index: 99999; border-top: 3px solid rgba(130, 130, 130, 0.3); border-right: 3px solid rgba(130, 130, 130, 0.3); border-bottom: 3px solid rgba(130, 130, 130, 0.3); border-left: 3px solid #0040d8; } /* slide overlay */ .overlay-slide-in-top, .overlay-slide-out-top { background-color: #FFF; z-index: 99998; } /* --------------------------------------------------------------------------------------- * * Lazy-loading plugin - jQuery Lazy * More info: http://jquery.eisbehr.de/lazy/ /* --------------------------------------------------------------------------------------- */ .lazy { position: relative; } .lazy.lazy-loader::after { position: absolute; display: block; content: ""; top: 50%; left: 50%; width: 54px; height: 54px; background-image: url(../img/loader.gif); background-repeat: no-repeat; background-position: 50% 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .lazy.lazy-error::after { position: absolute; display: block; content: ""; top: 50%; left: 50%; width: 100%; height: 100%; background-image: url(../img/about-image.png); background-repeat: no-repeat; background-position: 50% 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-size: contain; } /* if tag */ img.lazy.lazy-loader, img.lazy.lazy-error { width: 100%; height: 120px; } img.lazy.lazy-loader { background-image: url(../img/loader.gif); background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: inherit !important; background-size: inherit !important; -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; } img.lazy.lazy-error { background-image: url(../img/about-image.png); background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: inherit !important; background-size: inherit !important; } /* ----------------------------------------------------------------------------------------- * * Page boxed layout * Note: Class "boxed" in tag is connected with class "tt-wrap" in several places! /* ----------------------------------------------------------------------------------------- */ body.tt-boxed .tt-wrap { max-width: 1282px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } /* ------------------------------------------------------------- * * Cover /* ------------------------------------------------------------- */ .cover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #000; z-index: 2; opacity: 0; } /* Cover background colors =========================== */ /* template main color */ .cover.cover-color { background-color: #0040d8; } /* aditional colors */ .cover.cover-light { background-color: #FFF; } .cover.cover-red { background-color: #e80000; } .cover.cover-pink { background-color: #d800b6; } .cover.cover-purple { background-color: #800080; } .cover.cover-green { background-color: #56d800; } .cover.cover-blue { background-color: #0070de; } .cover.cover-yellow { background-color: #FFE800; } .cover.cover-brown { background-color: #b5851e; } .cover.cover-gradient-light { opacity: 1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3f3f3+0,f3f3f3+100&0.9+0,1+100 */ background: -moz-linear-gradient(top, rgba(243,243,243,0.9) 0%, #fff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(243,243,243,0.9) 0%, #fff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(243,243,243,0.9) 0%, #fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f3f3f3', endColorstr='#fff',GradientType=0 ); /* IE6-9 */ } .cover.cover-gradient-dark { opacity: 1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,111111+100&0.5+0,1+100 */ background: -moz-linear-gradient(top, rgba(24, 28, 37, 0.6) 0%, #13161b 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(24, 28, 37, 0.6) 0%, #13161b 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(24, 28, 37, 0.6) 0%, #13161b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#13161b',GradientType=0 ); /* IE6-9 */ } .cover.cover-gradient-color { opacity: 1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0032bc+30,cc0087+100 */ background: #0032bc; /* Old browsers */ background: -moz-linear-gradient(-45deg, #0032bc 30%, #cc0087 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #0032bc 30%,#cc0087 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #0032bc 30%,#cc0087 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0032bc', endColorstr='#cc0087',GradientType=1 ); /* IE6-9 */ } /* Cover opasity ================= */ .cover.cover-opacity-0 { opacity: 0; } .cover.cover-opacity-0-5 { opacity: .05; } .cover.cover-opacity-1 { opacity: .1; } .cover.cover-opacity-1-5 { opacity: .15; } .cover.cover-opacity-2 { opacity: .2; } .cover.cover-opacity-2-5 { opacity: .25; } .cover.cover-opacity-3 { opacity: .3; } .cover.cover-opacity-3-5 { opacity: .35; } .cover.cover-opacity-4 { opacity: .4; } .cover.cover-opacity-4-5 { opacity: .45; } .cover.cover-opacity-5 { opacity: .5; } .cover.cover-opacity-5-5 { opacity: .55; } .cover.cover-opacity-6 { opacity: .6; } .cover.cover-opacity-6-5 { opacity: .65; } .cover.cover-opacity-7 { opacity: .7; } .cover.cover-opacity-7-5 { opacity: .75; } .cover.cover-opacity-8 { opacity: .8; } .cover.cover-opacity-8-5 { opacity: .85; } .cover.cover-opacity-9 { opacity: .9; } .cover.cover-opacity-9-5 { opacity: .95; } /* ------------------------------------------------------------- * * Body content /* ------------------------------------------------------------- */ #body-content { position: relative; overflow: hidden; } /* ------------------------------------------------------------- * * Headings /* ------------------------------------------------------------- */ .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: bold; color: inherit; } .h1, .h2, .h3, h1, h2, h3 { line-height: 1.2; margin-top: 0px; margin-bottom: 20px; } .h4, .h5, .h6, h4, h5, h6 { line-height: 1.4; margin-top: 10px; margin-bottom: 20px; } .h1, h1 { font-size: 34px; } .h2, h2 { font-size: 28px; } .h3, h3 { font-size: 24px; } .h4, h4 { font-size: 18px; } .h5, h5 { font-size: 16px; } .h6, h6 { font-size: 14px; } /* hr short */ hr.hr-short { position: relative; max-width: 40px; margin-top: 20px; margin-bottom: 20px; margin-left: 0; margin-right: auto; border: 0; border-top: 9px solid #0040d8; text-align: left; } hr.hr-short.hr-center, .text-center hr.hr-short { margin-left: auto; margin-right: auto; } hr.hr-short.hr-right, .text-right hr.hr-short { margin-left: auto; margin-right: 0; } /* ------------------------------------------------------------- * * tt-heading /* ------------------------------------------------------------- */ .tt-heading { position: relative; z-index: 3; } .tt-heading.padding-on { padding: 6% 3% 5% 3%; } @media (max-width: 992px) { .tt-heading.padding-on { padding: 12% 3% 10% 3%; } } .tt-heading-inner { position: relative; z-index: 2; } /* tt-heading title */ .tt-heading-title { max-width: 800px; margin: 0; font-size: 32px; font-weight: 800; color: #1d1f65; } .tt-heading-title a { color: inherit; } .tt-heading-title a:hover { text-decoration: underline; color: #0040d8; } .tt-heading-subtitle { max-width: 800px; margin-top: 5px; font-size: 16px; } .tt-heading-subtitle a { color: inherit; } .tt-heading-subtitle a:hover { opacity: .8; } .tt-heading.text-center .tt-heading-title, .tt-heading.text-center .tt-heading-subtitle { margin-left: auto; margin-right: auto; } .tt-heading.text-right .tt-heading-title, .tt-heading.text-right .tt-heading-subtitle { margin-left: auto; } /* tt-heading hr-short */ .tt-heading .hr-short { } .tt-heading.text-center hr.hr-short { margin-left: auto; margin-right: auto; } .tt-heading.text-right hr.hr-short { margin-left: auto; margin-right: 0; } /* tt-heading text */ .tt-heading-text { max-width: 800px; margin-top: 20px; } .tt-heading.text-center .tt-heading-text { margin-left: auto; margin-right: auto; } .tt-heading.text-right .tt-heading-text { margin-left: auto; margin-right: 0; } /* tt-heading sizes ==================== */ /* tt-heading xs */ .tt-heading.tt-heading-xs .tt-heading-title { font-size: 24px; } .tt-heading.tt-heading-xs .zig-zag-separator { margin-top: 10px; margin-bottom: 20px; } /* tt-heading sm */ .tt-heading.tt-heading-sm .tt-heading-title { font-size: 28px; } .tt-heading.tt-heading-sm .zig-zag-separator { margin-top: 15px; margin-bottom: 25px; } /* tt-heading lg */ .tt-heading.tt-heading-lg .tt-heading-title { font-size: 38px; } .tt-heading.tt-heading-lg .tt-heading-subtitle { font-size: 21px; } @media (max-width: 768px) { .tt-heading.tt-heading-lg .tt-heading-title { font-size: 30px; } } .tt-heading.tt-heading-lg .zig-zag-separator { margin-top: 20px; margin-bottom: 30px; } /* tt-heading xlg */ .tt-heading.tt-heading-xlg .tt-heading-title { font-size: 46px; } .tt-heading.tt-heading-xlg .tt-heading-subtitle { margin-top: 5px; font-size: 21px; } @media (max-width: 992px) { .tt-heading.tt-heading-xlg .tt-heading-title { font-size: 38px; } } @media (max-width: 768px) { .tt-heading.tt-heading-xlg .tt-heading-title { font-size: 30px; } } .tt-heading.tt-heading-xlg .zig-zag-separator { margin-top: 20px; margin-bottom: 30px; } /* tt-heading xxlg */ .tt-heading.tt-heading-xxlg .tt-heading-title { font-size: 30px; color: #1d1f65; } .tt-heading.tt-heading-xxlg .tt-heading-subtitle { font-size: 24px; } @media (max-width: 992px) { .tt-heading.tt-heading-xxlg .tt-heading-title { font-size: 38px; } .tt-heading.tt-heading-xxlg .tt-heading-subtitle { font-size: 22px; } } .tt-heading.tt-heading-xxlg .zig-zag-separator { margin-top: 30px; margin-bottom: 40px; } /* ------------------------------------------------------------- * * Zig-Zag separator /* ------------------------------------------------------------- */ .zig-zag-separator { position: relative; margin-top: 20px; margin-bottom: 30px; font-family: Arial, sans-serif !important; /* Do not remove! */ } .zig-zag-separator span { position: relative; display: inline-block; left: 7px; width: 25px; height: 25px; margin-top: -5px; margin-left: -2px; border-width: 0 6px 6px 0; border-style: solid; border-color: #0e0e0e; filter:drop-shadow(0 0 0 rgba(0,0,0,0)); /* FireFox issue fix */ -webkit-transform: rotate(45.1deg); -moz-transform: rotate(45.1deg); -o-transform: rotate(45.1deg); -ms-transform: rotate(45.1deg); transform: rotate(45.1deg); } .zig-zag-separator span:first-child { margin-left: 0 !important; } .zig-zag-separator span:last-child { border-right-width: 0 !important; } /* zig-zag separator sizes =========================== */ /* zig-zag xs */ .zig-zag-separator.zig-zag-xs span { left: 5px; width: 15px; height: 15px; margin-top: 0; margin-left: -2px; border-width: 0 3px 3px 0; } /* zig-zag sm */ .zig-zag-separator.zig-zag-sm span { left: 5px; width: 21px; height: 21px; margin-top: -3px; margin-left: -2px; border-width: 0 5px 5px 0; } /* zig-zag lg */ @media (min-width: 992px) { .zig-zag-separator.zig-zag-lg { margin-bottom: 30px; } } .zig-zag-separator.zig-zag-lg span { left: 8px; width: 32px; height: 32px; margin-top: -8px; margin-left: -2px; border-width: 0 8px 8px 0; } /* zig-zag xlg */ @media (min-width: 992px) { .zig-zag-separator.zig-zag-xlg { margin-top: 30px; margin-bottom: 40px; } } .zig-zag-separator.zig-zag-xlg span { left: 10px; width: 40px; height: 40px; margin-top: -10px; margin-left: -3px; border-width: 0 11px 11px 0; } /* zig-zag separator sizes on smaller screens */ @media (max-width: 992px) { .zig-zag-separator.zig-zag-lg span, .zig-zag-separator.zig-zag-xlg span { left: 7px; width: 25px; height: 25px; margin-top: -5px; margin-left: -2px; border-width: 0 6px 6px 0; } } @media (max-width: 768px) { .zig-zag-separator span, .zig-zag-separator.zig-zag-lg span, .zig-zag-separator.zig-zag-xlg span { left: 5px; width: 21px; height: 21px; margin-top: -3px; margin-left: -2px; border-width: 0 5px 5px 0; } } /* zig-zag separator styles ============================ */ /* zig-zag light */ .zig-zag-separator.zig-zag-light span { border-color: #FFF !important; } /* zig-zag dark */ .zig-zag-separator.zig-zag-dark span { border-color: #181c25 !important; } /* ------------------------------------------------------------- * * Header /* ------------------------------------------------------------- */ #header { position: relative; top: 0; left: 0; width: 100%; background-color: #FFF; z-index: 9998; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media (max-width: 991px) { #header { z-index: 99999; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } } /* header inner */ .header-inner { position: relative; padding-left: 3%; padding-right: 3%; } .header-inner::after { content: ""; display: block; clear: both; } /* header fixed top */ #header.header-fixed-top { position: fixed !important; } /* hide header on scroll down and show on scroll up */ #header.header-show-hide-on-scroll { position: fixed !important; } #header.header-show-hide-on-scroll.fly-up { top: -150px; } body.tt-m-menu-open #header.header-show-hide-on-scroll { /* disable hide/show header on scroll if mobile menu is open */ top: 0; } /* header transparent */ @media (min-width: 992px) { #header.header-transparent { position: absolute; background-color: transparent; padding-top: 20px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #header.header-transparent .tt-menu-nav > li > a, #header.header-transparent .header-attributes > ul > li > a { color: #FFF; } #header.header-transparent .tt-menu-nav > li > a:hover { } #header.header-transparent #logo .logo-dark { display: none; } #header.header-transparent #logo .logo-light { display: block; } } /* header transparent dark */ @media (min-width: 992px) { #header.header-transparent-dark .tt-menu-nav > li > a, #header.header-transparent-dark .header-attributes > ul > li > a { color: #181c25; } #header.header-transparent-dark .tt-menu-nav > li > a:hover { } #header.header-transparent-dark #logo .logo-dark { display: block; } #header.header-transparent-dark #logo .logo-light { display: none; } } /* Header filled */ #header.header-filled { padding: 0; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } #header.header-transparent.header-filled { background-color: #FFF; padding-top: 0; } #header.header-transparent.header-filled .tt-menu-nav > li > a, #header.header-transparent.header-filled .header-attributes > ul > li > a { color: inherit; } @media (min-width: 992px) { #header.header-transparent.header-filled #logo .logo-dark { display: block; } #header.header-transparent.header-filled #logo .logo-light { display: none; } } /* ------------------------------------------------------------- * * Logo /* ------------------------------------------------------------- */ #logo { position: relative; top: 24px; margin-bottom: 30px; z-index: 9; line-height: 1.5; } #header #logo img { max-height: 60px } #logo .logo-light { display: none; } #logo .logo-light-m, #logo .logo-dark-m { display: none; } @media (max-width: 991px) { #header #logo { position: relative; float: left !important; top: 16px !important; } #header #logo img { max-height: 26px !important; } #logo .logo-dark { display: none; } #logo .logo-dark-m { display: block; } } /* ------------------------------------------------------------- * * Header attributes /* ------------------------------------------------------------- */ .header-attributes { float: right; margin-left: 20px; } @media (max-width: 1200px) { .header-attributes { margin-left: 10px; } } @media (max-width: 991px) { .header-attributes { margin-left: 0; margin-right: 5px; } } .header-attributes > ul { margin: 0; padding: 0; list-style: none; } .header-attributes > ul > li { float: left; margin-left: 8px; } .header-attributes > ul > li > a { position: relative; display: block; margin: 20px 0; padding: 10px 5px; line-height: 1.5; font-size: 15px; font-weight: normal; color: #181c25; z-index: 9; } .header-attributes > ul > li > a:hover { } @media (max-width: 991px) { .header-attributes > ul > li > a { margin: 0; padding: 20px 8px; } } /* Header attributes dropdown ============================== */ .h-attr-dropdown-wrap { position: relative; } .h-attr-dropdown { position: absolute; display: block; top: 110%; left: 0; min-width: 180px; background-color: #FFF; margin: 0; padding: 8px 0; list-style: none; z-index: 99999; text-align: left; visibility: hidden; opacity: 0; border-top: 1px solid #f1f1f1; -webkit-box-shadow: 0 10px 40px -5px rgba(0, 0, 0, .3); -moz-box-shadow: 0 10px 40px -5px rgba(0, 0, 0, .3); box-shadow: 0 10px 40px -5px rgba(0, 0, 0, .3); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .h-attr-dropdown-wrap.h-attr-dropdown-open > .h-attr-dropdown { top: 100%; visibility: visible; opacity: 1; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; } /* header attributes dropdown links */ .h-attr-dropdown li { } .h-attr-dropdown li:last-child { } .h-attr-dropdown li > a { position: relative; display: block; padding: 10px 25px 10px 20px; text-decoration: none; font-size: 14px; line-height: 1.4; color: #888; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .h-attr-dropdown li > a:hover { background-color: rgba(130, 130, 130, 0.09); color: #181c25; } .h-attr-dropdown > li.active > a { background-color: rgba(130, 130, 130, 0.09); color: #181c25; } /* header attributes dropdown right position */ .tt-menu-tools-menu-nav li:last-child > .h-attr-dropdown { left: auto; right: 0; } .h-attr-dropdown-master.h-attr-dropdown-right > .h-attr-dropdown { /* you can add class "h-attr-dropdown-right" manually if needed (works in dropdown master only!) */ left: auto; right: 0; } /* header attributes dropdown dark style */ .h-attr-dropdown-dark .h-attr-dropdown { background-color: #11141b; color: #DDD; border: none; } .h-attr-dropdown-dark .h-attr-dropdown li > a { color: #CCC; } .h-attr-dropdown-dark .h-attr-dropdown li > a:hover { color: #FFF; } .h-attr-dropdown-dark .h-attr-dropdown > li.active > a { color: #FFF; } /* header attributes dropdown colored style */ .h-attr-dropdown-color .h-attr-dropdown { background-color: #0040d8; color: #DDD; border: none; } .h-attr-dropdown-color .h-attr-dropdown li > a { color: #DDD; } .h-attr-dropdown-color .h-attr-dropdown li > a:hover { color: #FFF; } .h-attr-dropdown-color .h-attr-dropdown > li.active > a { color: #FFF; } /* Header attributes search ============================ */ /* header attributes search trigger */ .h-attr-search-trigger { } .h-attr-search-trigger:hover { } /* header attributes search */ .h-attr-search { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background-color: rgba(0, 0, 0, 0.95); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: scale(0.97); -moz-transform: scale(0.97); -o-transform: scale(0.97); -ms-transform: scale(0.97); transform: scale(0.97); } body.h-attr-search-open .h-attr-search { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .h-attr-search-inner { position: absolute; top: 45%; left: 50%; width: 100%; height: auto; max-width: 900px; padding: 0 40px; z-index: 2; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* header attributes search text */ .h-attr-search-text { margin-bottom: 20px; text-align: left; font-size: 72px; font-weight: bold; color: #DDD; } @media (max-width : 767px) { .h-attr-search-text { font-size: 32px; } } /* header attributes search form */ #h-attr-search-form { } .h-attr-search #h-attr-search-input { position: relative; width: 100%; height: 80px; background-color: rgba(255, 255, 255, 0.08); padding: 10px 60px 10px 20px; font-size: 22px; color: #FFF; border: none; } .h-attr-search #h-attr-search-input:focus { outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } @media (max-width : 767px) { .h-attr-search #h-attr-search-input { height: 60px; padding: 10px 55px 10px 10px; font-size: 16px; } } .h-attr-search .form-btn-inside button { font-size: 24px; color: #DDD; padding: 0 20px; } @media (max-width : 767px) { .h-attr-search .form-btn-inside button { font-size: 24px; padding: 0 10px; } } .h-attr-search .form-btn-inside button:hover { opacity: 1; color: #FFF; } /* header attributes search suggestions */ .h-attr-search-suggestions { margin-top: 8%; text-align: left; color: #DDD; } .h-attr-search-sugg-title { margin-bottom: 20px; font-size: 18px; font-weight: bold; font-weight: 600; } .h-attr-search-suggestions a { position: relative; display: inline-block; background-color: rgba(255, 255, 255, 0.14); margin-bottom: 5px; padding: 2px 5px; font-size: 12px; color: #FFF; } .h-attr-search-suggestions a::after { position: absolute; content: ""; left: 0; top: 50%; margin-top: 2px; width: 100%; max-width: 100%; z-index: -1; height: 10px; background: #0040d8; overflow: hidden; transform: scaleX(0); transform-origin: right center; -webkit-transition: transform .4s cubic-bezier(.645,.045,.355,1); -moz-transition: transform .4s cubic-bezier(.645,.045,.355,1); -o-transition: transform .4s cubic-bezier(.645,.045,.355,1); -ms-transition: transform .4s cubic-bezier(.645,.045,.355,1); transition: transform .4s cubic-bezier(.645,.045,.355,1); } .h-attr-search-suggestions a:hover::after { transform: none; transform-origin: left center; } /* header attributes search close */ .h-attr-search-close { position: absolute; top: 40px; right: 60px; font-size: 14px; color: #FFF; cursor: pointer; z-index: 9; } @media (max-width: 992px) { .h-attr-search-close { top: 20px; right: 30px; } .h-attr-search-close span { display: none; } } .h-attr-search-close:hover .tt-close-btn { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } /* Header attributes languages =============================== */ .h-attr-lang > a > img { position: relative; top: -2px; margin-right: 3px; } .h-attr-lang .h-attr-dropdown { min-width: 85px; } .h-attr-lang .h-attr-dropdown li > a { padding: 6px 20px; font-size: 14px; } .h-attr-lang .h-attr-dropdown li > a > img { position: relative; top: -2px; margin-right: 3px; } /* Header attributes side panel ================================= */ #h-attr-side-panel-trigger { width: 34px; height: 34px; line-height: 35px; background-color: rgba(148, 155, 171, 0.17); margin: 24px 0; padding: 0; text-align: center; font-size: 16px; border-radius: 50%; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media (max-width: 991px) { #h-attr-side-panel-trigger { margin: 14px 0; } } #h-attr-side-panel-trigger:hover { background-color: #0040d8; color: #FFF !important; } #h-attr-side-panel { position: fixed; height: 100vh; right: 0; top: 0; visibility: hidden; z-index: 99999; width: 400px; background-color: #181c25; color: #e2e2e2; overflow-y: auto; -webkit-box-shadow: -15px 0 22px -14px rgba(0, 0, 0, 0.4); -moz-box-shadow: -15px 0 22px -14px rgba(0, 0, 0, 0.4); box-shadow: -15px 0 22px -14px rgba(0, 0, 0, 0.4); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } @media (max-width: 768px) { #h-attr-side-panel { width: 100%; } } #h-attr-side-panel .h-attr-side-panel-inner { position: relative; margin-bottom: 60px; z-index: 3; } /* header attributes side panel widget */ .h-attr-side-panel-widget { padding: 0 8% 30px 8%; font-size: 15px; } @media (max-width: 768px) { .h-attr-side-panel-widget { padding-left: 5%; padding-right: 5%; } } .h-attr-side-panel-widget.sp-text-box a { font-weight: 400; color: inherit; border-bottom: 1px dotted; } .h-attr-side-panel-widget.sp-text-box a:hover, .h-attr-side-panel-widget.sp-text-box a.active { opacity: .8; } /* if header attributes side panel is open */ body.h-attr-side-panel-is-open #h-attr-side-panel { visibility: visible; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } /* header attributes side panel close button */ .h-attr-side-panel-close { position: relative; padding-top: 5px; padding-right: 15px; text-align: right; } /* header attributes side panel cover (page cover if side panel is open) */ .h-attr-side-panel-cover { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; background-color: #000; z-index: 99998; visibility: hidden; opacity: 0; cursor: url(../img/close.png), e-resize; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } body.h-attr-side-panel-is-open #body-content { } body.h-attr-side-panel-is-open .h-attr-side-panel-cover { visibility: visible; opacity: .4; } body.h-attr-side-panel-is-open #body-content { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* Header attributes call to action button =========================================== */ .h-attr-button { border: 1px solid white; border-radius: 15px; background-color: #1d1f65; margin: 22px 0 22px 10px !important; padding: 8px 12px !important; font-size: 16px !important; color: #ffffff !important; overflow: hidden; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .h-attr-button:hover { text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } @media (max-width: 1200px) { .h-attr-button { margin-left: 10px !important; } } @media (max-width: 991px) { .h-attr-button { display: none; margin: 13px 0 13px 8px !important; padding: 7px 10px !important; } } /* ------------------------------------------------------------- * * Main menu /* ------------------------------------------------------------- */ .tt-main-menu { display: inline-block; min-height: 80px; } /* menu collapse */ .tt-menu-collapse { display: inline-block !important; } /* menu nav */ .tt-menu-nav { margin: 0; padding: 0; list-style: none; } .tt-menu-nav > li { display: inline-block; margin: 0 6px; } .tt-menu-nav > li:first-child { margin-left: 0; } .tt-menu-nav > li:last-child { margin-right: 0; } @media (max-width: 1400px) { .tt-menu-nav > li { margin-left: 5px; margin-right: 5px; } } .tt-menu-nav > li > a { position: relative; display: block; margin: 0; padding: 30px 3px; text-decoration: none; line-height: 1.5; font-size: 16px; font-weight: bold; font-weight: 600; color: #181c25; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } /* menu nav hover/active */ .tt-menu-nav > li > a:hover, .tt-menu-nav > li.active > a { } .tt-menu-nav > li > a::after { position: absolute; content: ""; width: 100%; max-width: 100%; z-index: -1; height: 10px; background: #0040d8; left: 0; top: 50%; overflow: hidden; transform: scaleX(0); transform-origin: right center; -webkit-transition: transform .4s cubic-bezier(.645,.045,.355,1); -moz-transition: transform .4s cubic-bezier(.645,.045,.355,1); -o-transition: transform .4s cubic-bezier(.645,.045,.355,1); -ms-transition: transform .4s cubic-bezier(.645,.045,.355,1); transition: transform .4s cubic-bezier(.645,.045,.355,1); } .tt-menu-nav > li > a:hover::after, .tt-menu-nav > li.active > a::after { transform: none; transform-origin: left center; } /* menu nav hover/active opacity with different header styles. Note: depends on the hover/active pseudo element background color you may not need it! */ .tt-menu-nav > li > a::after, #header.header-transparent.header-filled .tt-menu-nav > li > a::after, #header.header-transparent.header-transparent-dark .tt-menu-nav > li > a::after { opacity: .2; } #header.header-transparent .tt-menu-nav > li > a::after { opacity: 1; } /* Submenu ============ */ .tt-submenu-wrap { position: relative; } .tt-submenu { position: relative; display: none; top: 100%; left: 0; min-width: 200px; background-color: #FFF; z-index: 99999; text-align: left; } @media (min-width: 992px) { .tt-submenu { position: absolute; display: block !important; top: 110%; padding-top: 20px; padding-bottom: 20px; visibility: hidden; opacity: 0; border-top: 1px solid #f1f1f1; -webkit-box-shadow: 0 10px 40px -5px rgba(0, 0, 0, .3); -moz-box-shadow: 0 10px 40px -5px rgba(0, 0, 0, .3); box-shadow: 0 10px 40px -5px rgba(0, 0, 0, .3); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tt-submenu-wrap.tt-submenu-open > .tt-submenu { top: 100%; visibility: visible; opacity: 1; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; } } /* sub-sub menu */ .tt-submenu .tt-submenu-wrap > .tt-submenu { left: 100%; right: auto; margin-top: -41px; margin-left: 0; } /* submenu links */ .tt-submenu-list { margin: 0; padding: 0; list-style: none; } .tt-submenu .tt-submenu-list li { margin-top: 2px; margin-bottom: 2px; } .tt-submenu .tt-submenu-list li:first-child { margin-top: 0; } .tt-submenu .tt-submenu-list li:last-child { margin-bottom: 0; } .tt-submenu .tt-submenu-list li > a { position: relative; display: block; padding: 6px 25px 6px 20px; text-decoration: none; font-size: 14px; line-height: 1.4; color: #333; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tt-submenu .tt-submenu-list li > a:hover { color: #0040d8; } .tt-submenu .tt-submenu-list > li.active > a { color: #0040d8; } /* submenu right position */ .tt-menu-nav > li:last-child > .tt-submenu { left: auto; right: 0; } .tt-submenu-master.tt-submenu-right > .tt-submenu { /* you can add class "tt-submenu-right" manually if needed (works in dropdown master only!) */ left: auto; right: 0; } /* caret (requires FontAwesome: https://fontawesome.com/) */ @media (min-width: 992px) { .tt-caret { position: relative; top: 1px; margin-left: 5px; font-size: 12px; line-height: 0; } .tt-caret::after { font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } /* caret in dropdowns */ .tt-submenu .tt-caret { position: absolute; right: 8px; top: 50%; -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -webkit-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } } /* dropdown title */ .tt-dropdown-title { padding: 10px 20px; font-size: 16px; font-weight: bold; font-weight: 600; border: none !important; box-shadow: none !important; } .tt-dropdown-title + li { border: none !important; box-shadow: none !important; } /* dropdown divider */ .tt-dropdown-divider { height: 1px; margin: 10px 0 !important; overflow: hidden; background-color: rgba(173, 173, 173, 0.21); border: none !important; box-shadow: none !important; } .tt-dropdown-divider + li { border: none !important; box-shadow: none !important; } /* Submenu style ================= */ /* submenu dark style */ .tt-submenu-dark .tt-submenu { background-color: #11141b; color: #DDD; border: none; } .tt-submenu-dark .tt-submenu .tt-submenu-list li > a { color: #BBB; } .tt-submenu-dark .tt-submenu .tt-submenu-list li > a:hover { color: #FFF; } .tt-submenu-dark .tt-submenu .tt-submenu-list > li.active > a { color: #FFF; } /* submenu colored style */ .tt-submenu-color .tt-submenu { background-color: #0040d8; color: #FFF; border: none; } .tt-submenu-color .tt-submenu .tt-submenu-list li > a { color: #DDD; } .tt-submenu-color .tt-submenu .tt-submenu-list li > a:hover { color: #FFF; } .tt-submenu-color .tt-submenu .tt-submenu-list > li.active > a { color: #FFF; } /* Menu aligns =============== */ /* menu align left */ #header.menu-align-left .tt-main-menu { display: block; text-align: left; } #header.menu-align-left #logo { top: 24px; float: left; margin: 0 4% 0 0; } /* menu align right */ #header.menu-align-right .tt-main-menu { float: right; text-align: left; } #header.menu-align-right #logo { top: 10px; float: left; margin: 0; } /* menu align center */ #header.menu-align-center { } @media (min-width: 992px) { #header.menu-align-center { text-align: center; padding-top: 40px; } #header.menu-align-center .header-inner { display: inline-block; } #header.menu-align-center #logo { padding: 0 0 30px 0; } #header.menu-align-center #logo img { max-height: 80px; } } /* Mobile menu toggle button ============================= */ #tt-m-menu-toggle-btn { position: relative; display: none; float: right; top: 21px; cursor: pointer; padding: 8px 25px 11px 0; margin-left: 10px; } /* hamburger */ #tt-m-menu-toggle-btn span, #tt-m-menu-toggle-btn span::before, #tt-m-menu-toggle-btn span::after { position: absolute; display: block; content: ''; height: 3px; width: 23px; background-color: #181c25; cursor: pointer; border-radius: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #tt-m-menu-toggle-btn span::before { top: -7px; } #tt-m-menu-toggle-btn span::after { bottom: -7px; } body.tt-m-menu-open #tt-m-menu-toggle-btn span { background-color: transparent !important; } body.tt-m-menu-open #tt-m-menu-toggle-btn span::before { top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } body.tt-m-menu-open #tt-m-menu-toggle-btn span::after { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* Mobile menu ================ */ @media (max-width: 991px) { #tt-m-menu-toggle-btn { display: block; } .tt-main-menu { display: block; float: none !important; min-height: 60px; } /* mobile menu collapse */ .tt-menu-collapse { position: absolute; display: block; top: 100%; left: 0; width: 50%; min-height: calc(100vh - 62px); height: calc(100vh - 62px); overflow-y: auto; background-color: #181c25 !important; text-align: left; color: #DDD; -webkit-box-shadow: 15px 0 22px -14px rgba(0, 0, 0, 0.4); -moz-box-shadow: 15px 0 22px -14px rgba(0, 0, 0, 0.4); box-shadow: 15px 0 22px -14px rgba(0, 0, 0, 0.4); z-index: 99998; visibility: hidden; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .tt-menu-collapse.tt-m-menu { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* if mobile menu is open */ body.tt-m-menu-open .tt-menu-collapse { visibility: visible; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } html.tt-m-menu-noscroll { /* disable page scroll if mobile menu is open (class "tt-m-menu-noscroll" handled by "theme.js" file) */ overflow-y: hidden !important; } .tt-m-menu-cover { /* page cover if mobile menu is open */ position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent; z-index: 99998; visibility: hidden; opacity: 0; } body.tt-m-menu-open .tt-m-menu-cover { visibility: visible; opacity: .6; } /* mobile menu nav */ .tt-menu-nav { } .tt-menu-nav > li { display: block; float: none; margin: 0; border-bottom: 1px solid #2f333c; } .tt-menu-nav > li > a { background-color: transparent; margin: 0; padding: 10px 20px; color: #CCC !important; } .tt-menu-nav > li > a:hover { background-color: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #FFF !important; border: none; } .tt-menu-nav > li.active > a { background-color: transparent; color: #FFF !important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; } .tt-menu-nav > li > a::after { display: none; } /* mobile submenu */ .tt-submenu { display: none; position: relative; top: auto; left: 0 !important; min-width: 100%; background-color: #11141b !important; padding-top: 10px; padding-bottom: 10px; text-align: left; color: #DDD !important; overflow: hidden; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-top: 1px solid rgba(134, 134, 134, 0.15); -webkit-box-shadow: inset 0 22px 10px -20px rgba(0, 0, 0, 0.3), inset 0 -22px 10px -20px rgba(0, 0, 0, 0.3) !important; -moz-box-shadow: inset 0 22px 10px -20px rgba(0, 0, 0, 0.3), inset 0 -22px 10px -20px rgba(0, 0, 0, 0.3) !important; box-shadow: inset 0 22px 10px -20px rgba(0, 0, 0, 0.3), inset 0 -22px 10px -20px rgba(0, 0, 0, 0.3) !important; } .tt-submenu .tt-submenu-wrap > .tt-submenu { left: 0 !important; margin-top: 0; padding-left: 5%; } /* mobile submnu links */ .tt-submenu .tt-submenu-list > li { margin-top: 0; margin-bottom: 0; border-top: 1px solid #181c25; } .tt-submenu .tt-submenu-list > li:first-child { border-top: none; } .tt-submenu .tt-submenu-list li > a { padding: 11px 55px 11px 30px; color: #CCC; } .tt-submenu .tt-submenu-list > li > a:hover { background-color: transparent; padding-left: 30px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #FFF; border: none; } .tt-submenu .tt-submenu-list > li.active > a { background-color: transparent; color: #FFF; border: none; } /* mobile menu link caret */ .tt-submenu-wrap .tt-m-submenu-toggle { width: 45px; height: 100%; line-height: 44px; background-color: rgba(128, 128, 128, 0.12); position: absolute; top: 0; right: 0; cursor: pointer; text-align: center; font-size: 18px; color: #DDD; border-left: 1px solid rgba(134, 134, 134, 0.06); } .tt-submenu-wrap .tt-m-submenu-toggle::after { position: relative; top: -1px; margin-left: 2px; line-height: 0; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .tt-submenu-wrap .tt-m-submenu-toggle.tt-m-dropdown-open::after { font-size: 16px; font-family: "Font Awesome 5 Free"; content: "\f00d"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } } @media (max-width: 767px) { /* mobile menu collapse */ .tt-menu-collapse { width: 85%; } } @media (max-width: 320px) { /* mobile menu collapse */ .tt-menu-collapse { width: 100%; } } /* ------------------------------------------------------------- * * Overlay menu /* ------------------------------------------------------------- */ #tt-overlay-menu { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.94); z-index: 99998; color: #FFF; visibility: hidden; opacity: 0; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .tt-ol-menu-open #tt-overlay-menu { visibility: visible; opacity: 1; } /* overlay menu inner */ #tt-ol-menu-inner { position: relative; height: 100%; z-index: 3; overflow-y: auto; padding-bottom: 85px; } /* overlay menu inner */ #tt-ol-menu-content { position: relative; height: 100%; overflow: auto; } /* overlay menu logo */ body.tt-ol-menu-on #header #logo { top: 24px; float: left; margin: 0; } /* Overlay menu navigation =========================== */ .tt-ol-menu-nav { position: relative; top: 23%; max-width: 370px; margin: 0 auto; } @media (max-width : 768px) { .tt-ol-menu-nav { top: 18%; padding: 0 5%; } } .tt-ol-menu-nav ul { padding-left: 0; list-style: none; } /* overlay menu list */ .tt-ol-menu-list { opacity: 0; text-align: center; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; -moz-transition: -webkit-transform 0.4s, opacity 0.4s; -o-transition: -webkit-transform 0.4s, opacity 0.4s; -ms-transition: -webkit-transform 0.4s, opacity 0.4s; transition: -webkit-transform 0.4s, opacity 0.4s; } .tt-ol-menu-open .tt-ol-menu-list { opacity: 1; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .tt-ol-menu-list > li > a { position: relative; display: inline-block; text-decoration: none; font-size: 38px; font-weight: 700; line-height: 1.5; color: #FFF; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media (max-width: 922px) { .tt-ol-menu-list > li > a { font-size: 30px; } } @media (max-width : 768px) { .tt-ol-menu-list > li > a { font-size: 28px; } } .tt-ol-menu-list > li > a::after { position: absolute; content: ""; width: 100%; max-width: 100%; z-index: -1; height: 14px; background: #0040d8; left: 0; top: 57%; overflow: hidden; transform: scaleX(0); transform-origin: right center; -webkit-transition: transform .4s cubic-bezier(.645,.045,.355,1); -moz-transition: transform .4s cubic-bezier(.645,.045,.355,1); -o-transition: transform .4s cubic-bezier(.645,.045,.355,1); -ms-transition: transform .4s cubic-bezier(.645,.045,.355,1); transition: transform .4s cubic-bezier(.645,.045,.355,1); } .tt-ol-menu-list > li > a:hover::after, .tt-ol-menu-list > li.active > a::after { transform: none; transform-origin: left center; } /* Overlay sub menu ==================== */ .tt-ol-menu-list .tt-ol-sub-menu { display: none; margin: 8px 0 10px 0; padding: 0; overflow: hidden; } .tt-ol-menu-list .tt-ol-sub-menu li { display: inline-block; margin: 0 5px; } .tt-ol-menu-list .tt-ol-sub-menu li > a { position: relative; display: block; padding: 0 0 6px 0; text-decoration: none; font-size: 16px; font-weight: 500; color: #CCC; word-spacing: -2px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media (max-width: 922px) { .tt-ol-menu-list .tt-ol-sub-menu li > a { padding: 2px 0; font-size: 17px; } } .tt-ol-menu-list .tt-ol-sub-menu li > a:hover { color: #FFF; } /* Overlay menu footer ======================= */ .tt-ol-menu-footer { position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px 40px 20px 40px; z-index: 3; opacity: 0; font-size: 12px; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; -moz-transition: -webkit-transform 0.4s, opacity 0.4s; -o-transition: -webkit-transform 0.4s, opacity 0.4s; -ms-transition: -webkit-transform 0.4s, opacity 0.4s; transition: -webkit-transform 0.4s, opacity 0.4s; } .tt-ol-menu-open .tt-ol-menu-footer { opacity: 1; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; transition-delay: 0.6s; } @media (max-width: 768px) { .tt-ol-menu-footer { text-align: center; } } .tt-ol-menu-footer .col-left { } .tt-ol-menu-footer .col-right { } @media (min-width: 768px) { .tt-ol-menu-footer .col-right { text-align: right; } } .tt-ol-menu-footer .tt-ol-menu-copyright { margin-top: 10px; color: #999; } /* Overlay menu close button ============================= */ .tt-ol-menu-close { position: absolute; top: 40px; right: 60px; font-size: 14px; color: #FFF; cursor: pointer; z-index: 9; } @media (max-width: 992px) { .tt-ol-menu-close { top: 20px; right: 30px; } } @media (max-width: 992px) { .tt-ol-menu-close span { display: none; } } .tt-ol-menu-close:hover .tt-close-btn { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } /* Overlay menu trigger (menu button) ====================================== */ #tt-ol-menu-trigger { display: inline-block; float: right; margin: 16px 0; cursor: pointer; } @media (max-width: 991px) { #tt-ol-menu-trigger { margin: 6px 0; } } /* overlay menu trigger inner */ #tt-ol-menu-trigger .mt-inner { position: relative; float: right; width: 50px; height: 50px; z-index: 2; } #tt-ol-menu-trigger .tt-ol-menu-text { float: left; width: auto; height: 50px; line-height: 50px; padding: 0; margin-left: 15px; font-size: 16px; font-weight: 500; color: #333; z-index: 1; } @media (max-width: 768px) { #tt-ol-menu-trigger .tt-ol-menu-text { display: none; } } /* overlay menu trigger stripes */ .tt-ol-menu-str { position: absolute; top: 50%; left: 50%; width: 32px; height: 18px; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .tt-ol-menu-str .str-1, .tt-ol-menu-str .str-2, .tt-ol-menu-str .str-3 { position: absolute; display: block; background-color: #000; width: 30px; height: 3px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tt-ol-menu-str .str-1 { top: 0px; width: 20px; } #tt-ol-menu-trigger:hover .tt-ol-menu-str .str-1 { width: 30px; } .tt-ol-menu-str .str-2 { top: 7px; width: 30px; } #tt-ol-menu-trigger:hover .tt-ol-menu-str .str-2 { width: 30px; } .tt-ol-menu-str .str-3 { top: 14px; width: 25px; } #tt-ol-menu-trigger:hover .tt-ol-menu-str .str-3 { width: 30px; } /* if header is transparent */ #header.header-transparent .tt-ol-menu-str .str-1, #header.header-transparent .tt-ol-menu-str .str-2, #header.header-transparent .tt-ol-menu-str .str-3 { background-color: #FFF; } #header.header-transparent #tt-ol-menu-trigger .tt-ol-menu-text { color: #FFF; } @media (max-width: 991px) { #header.header-transparent .tt-ol-menu-str .str-1, #header.header-transparent .tt-ol-menu-str .str-2, #header.header-transparent .tt-ol-menu-str .str-3 { background-color: #000; } #header.header-transparent #tt-ol-menu-trigger .tt-ol-menu-text { color: #333; } } /* if header is transparent dark */ #header.header-transparent.header-transparent-dark .tt-ol-menu-str .str-1, #header.header-transparent.header-transparent-dark .tt-ol-menu-str .str-2, #header.header-transparent.header-transparent-dark .tt-ol-menu-str .str-3 { background-color: #000; } #header.header-transparent.header-transparent-dark #tt-ol-menu-trigger .tt-ol-menu-text { color: #333; } /* if header is filled */ #header.header-filled .tt-ol-menu-str .str-1, #header.header-filled .tt-ol-menu-str .str-2, #header.header-filled .tt-ol-menu-str .str-3 { background-color: #000; } #header.header-filled #tt-ol-menu-trigger .tt-ol-menu-text { color: #333; } /* Overlay menu variations =========================== */ /* slide left */ #tt-overlay-menu.slide-left { opacity: 1; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } .tt-ol-menu-open #tt-overlay-menu.slide-left { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } #tt-overlay-menu.slide-left .tt-ol-menu-list { -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -webkit-transform: translateX(-40px); transform: translateX(-40px); } .tt-ol-menu-open #tt-overlay-menu.slide-left .tt-ol-menu-list { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } /* slide left half */ #tt-overlay-menu.slide-left-half { right: auto; top: 0; left: 0; width: 35.5%; height: 100%; opacity: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } .tt-ol-menu-open #tt-overlay-menu.slide-left-half { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } #tt-overlay-menu.slide-left-half .tt-ol-menu-list { text-align: left; -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); transform: translateX(-30px); } .tt-ol-menu-open #tt-overlay-menu.slide-left-half .tt-ol-menu-list { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .tt-ol-menu-open #tt-overlay-menu.slide-left-half .tt-ol-menu-footer { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } #tt-overlay-menu.slide-left-half .tt-ol-menu-list > li > a { font-size: 30px; } @media (max-width: 1300px) { #tt-overlay-menu.slide-left-half { width: 50.5%; } } @media (max-width: 992px) { #tt-overlay-menu.slide-left-half { width: 80%; } } @media (max-width: 768px) { #tt-overlay-menu.slide-left-half { width: 100%; } } /* slide right */ #tt-overlay-menu.slide-right { right: 0; left: auto; opacity: 1; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); } .tt-ol-menu-open #tt-overlay-menu.slide-right { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } #tt-overlay-menu.slide-right .tt-ol-menu-list { -moz-transform: translateX(40px); -ms-transform: translateX(40px); -webkit-transform: translateX(40px); transform: translateX(40px); } .tt-ol-menu-open #tt-overlay-menu.slide-right .tt-ol-menu-list { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } /* slide right half */ #tt-overlay-menu.slide-right-half { left: auto; top: 0; right: 0; width: 35.5%; height: 100%; opacity: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); } .tt-ol-menu-open #tt-overlay-menu.slide-right-half { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } #tt-overlay-menu.slide-right-half .tt-ol-menu-list { text-align: left; -moz-transform: translateX(30px); -ms-transform: translateX(30px); -webkit-transform: translateX(30px); transform: translateX(30px); } .tt-ol-menu-open #tt-overlay-menu.slide-right-half .tt-ol-menu-list { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .tt-ol-menu-open #tt-overlay-menu.slide-right-half .tt-ol-menu-footer { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } #tt-overlay-menu.slide-right-half .tt-ol-menu-list > li > a { font-size: 30px; } @media (max-width: 1300px) { #tt-overlay-menu.slide-right-half { width: 50.5%; } } @media (max-width: 992px) { #tt-overlay-menu.slide-right-half { width: 80%; } } @media (max-width: 768px) { #tt-overlay-menu.slide-right-half { width: 100%; } } /* slide top */ #tt-overlay-menu.slide-top { opacity: 1; -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-timing-function: cubic-bezier(.75, 0, .29, 1.01); transition-timing-function: cubic-bezier(.75, 0, .29, 1.01); } .tt-ol-menu-open #tt-overlay-menu.slide-top { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } #tt-overlay-menu.slide-top .tt-ol-menu-list { -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -webkit-transform: translateY(-40px); transform: translateY(-40px); } .tt-ol-menu-open #tt-overlay-menu.slide-top .tt-ol-menu-list { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } /* slide bottom */ #tt-overlay-menu.slide-bottom { opacity: 1; -moz-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition-timing-function: cubic-bezier(.75, 0, .29, 1.01); transition-timing-function: cubic-bezier(.75, 0, .29, 1.01); } .tt-ol-menu-open #tt-overlay-menu.slide-bottom { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } #tt-overlay-menu.slide-bottom .tt-ol-menu-list { -moz-transform: translateY(40px); -ms-transform: translateY(40px); -webkit-transform: translateY(40px); transform: translateY(40px); } .tt-ol-menu-open #tt-overlay-menu.slide-bottom .tt-ol-menu-list { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } /* zoom in */ #tt-overlay-menu.zoom-in { opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } .tt-ol-menu-open #tt-overlay-menu.zoom-in { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #tt-overlay-menu.zoom-in .tt-ol-menu-list { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } .tt-ol-menu-open #tt-overlay-menu.zoom-in .tt-ol-menu-list { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* Overlay menu styles ======================= */ /* light style */ #tt-overlay-menu.tt-ol-menu-light { background-color: #FFF; color: #181c25; /* -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.18); -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.18); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.18); */ } #tt-overlay-menu.tt-ol-menu-light .tt-ol-menu-list > li > a { color: #181c25; } #tt-overlay-menu.tt-ol-menu-light .tt-ol-menu-list > li > a::after { opacity: .2; } #tt-overlay-menu.tt-ol-menu-light .tt-ol-menu-list .tt-ol-sub-menu li > a { color: #181c25; } #tt-overlay-menu.tt-ol-menu-light .tt-ol-menu-list .tt-ol-sub-menu li > a:hover { color: #0040d8; } #tt-overlay-menu.tt-ol-menu-light .tt-ol-menu-close { color: #181c25; } #tt-overlay-menu.tt-ol-menu-light .tt-close-btn.tt-close-light::before, #tt-overlay-menu.tt-ol-menu-light .tt-close-btn.tt-close-light::after { background-color: #181c25; } #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link { text-shadow: 0 0 0 #181c25, 0 50px 0 #181c25; } #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link:hover, #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link.focus, #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link:focus, #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link.active, #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link:active, #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link.active.focus, #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link.active:focus, #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link.active:hover, #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link:active.focus, #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link:active:focus, #tt-overlay-menu.tt-ol-menu-light .btn-white.btn-link:active:hover, #tt-overlay-menu.tt-ol-menu-light .open > .dropdown-toggle.btn-white.btn-link, #tt-overlay-menu.tt-ol-menu-light .open > .dropdown-toggle.btn-white.btn-link.focus, #tt-overlay-menu.tt-ol-menu-light .open > .dropdown-toggle.btn-white.btn-link:focus, #tt-overlay-menu.tt-ol-menu-light .open > .dropdown-toggle.btn-white.btn-link:hover { text-decoration: none; text-shadow: 0 -50px 0 #181c25, 0 0 0 #181c25; } #tt-overlay-menu.tt-ol-menu-light .tt-ol-menu-footer .tt-ol-menu-copyright { color: #888; } /* --------------------------------------------------- * * Intro /* --------------------------------------------------- */ #tt-intro { position: relative; overflow: hidden; } .tt-intro-inner { position: relative; height: 100%; } @media (max-width: 1440px) { .tt-intro-inner { padding-left: 0 !important; padding-right: 0 !important; } } /* intro image */ #tt-intro .intro-image-wrap { position: relative; min-height: 400px; height: 80vh; } #tt-intro .intro-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* intro youtube background video */ #tt-intro .youtube-bg-wrap { position: relative; min-height: 400px; height: 70vh; } #tt-intro .youtube-bg, #tt-intro .inline-YTPlayer { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } #tt-intro .youtube-bg { padding-bottom: 0 !important; height: auto !important; } /* Intro sizes =============== */ #tt-intro.intro-xs .intro-image-wrap, #tt-intro.intro-xs .youtube-bg-wrap { height: 50vh; } #tt-intro.intro-sm .intro-image-wrap, #tt-intro.intro-sm .youtube-bg-wrap { height: 60vh; } #tt-intro.intro-lg .intro-image-wrap, #tt-intro.intro-lg .youtube-bg-wrap { height: 80vh; } #tt-intro.intro-xlg .intro-image-wrap, #tt-intro.intro-xlg .youtube-bg-wrap { height: 90vh; } /* intro full height offsets */ #tt-intro.intro-full .intro-image-wrap, #tt-intro.intro-full .youtube-bg-wrap { min-height: calc(100vh - 82px); /* same height as header */ } @media (max-width: 991px) { #tt-intro.intro-full .intro-image-wrap, #tt-intro.intro-full .youtube-bg-wrap { min-height: calc(100vh - 62px); /* same height as mobile header */ } } /* intro full height on small screen */ @media (max-width: 991px) { #tt-intro.intro-full-m .intro-image-wrap, #tt-intro.intro-full-m .youtube-bg-wrap { min-height: calc(100vh - 62px); /* same height as mobile header */ } body.header-transparent-on #tt-intro.intro-full-m .intro-image-wrap, body.header-transparent-on #tt-intro.intro-full-m .youtube-bg-wrap { min-height: 100vh; } } /* if header-transparent enabled */ @media (min-width: 992px) { body.header-transparent-on #tt-intro.intro-full .intro-image-wrap, body.header-transparent-on #tt-intro.intro-full .youtube-bg-wrap { min-height: 100vh; } } /* Intro caption ================= */ #tt-intro .intro-caption-wrap, #tt-intro .intro-caption-holder { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 8; } #tt-intro .intro-caption { position: absolute; max-width: 800px; z-index: 9; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* intro caption title */ #tt-intro .intro-title { display: block; margin: 0 0 15px 0; font-size: 68px; font-weight: bold; color: #FFF; text-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } @media (max-width: 992px) { #tt-intro .intro-title { font-size: 52px; } } @media (max-width: 768px) { #tt-intro .intro-title { font-size: 34px; } } /* intro caption subtitle */ #tt-intro .intro-subtitle { display: block; margin: 10px 0 30px 0; font-size: 26px; font-weight: bold; color: #FFF; text-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } @media (max-width: 768px) { #tt-intro .intro-caption .intro-subtitle { margin-bottom: 20px; font-size: 20px; } } /* intro caption description */ #tt-intro .intro-description { max-width: 800px; margin-top: 20px; margin-bottom: 0; font-weight: normal; color: #FFF; text-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } @media (max-width: 768px) { #tt-intro .intro-caption .intro-description { font-size: 15px; } } /* intro caption category */ #tt-intro .cc-category { display: inline-block; background-color: #0040d8; padding: 0 5px; margin: 10px 0 0 0; font-size: 14px; font-weight: normal; color: #FFF; } /* intro caption zig-zag separator */ @media (max-width: 1400px) { #tt-intro .zig-zag-separator { margin-bottom: 20px; } #tt-intro .zig-zag-separator span { left: 5px; width: 21px; height: 21px; margin-top: -3px; margin-left: -2px; border-width: 0 5px 5px 0; } } @media (max-width: 768px) { #tt-intro .zig-zag-separator { margin-top: 10px; margin-bottom: 20px; } #tt-intro .zig-zag-separator span { left: 5px; width: 15px; height: 15px; margin-top: 0; margin-left: -2px; border-width: 0 3px 3px 0; } } /* intro caption buttons */ #tt-intro .intro-buttons { margin-top: 30px; } @media (max-width: 992px) { #tt-intro .intro-buttons { margin-top: 20px; } #tt-intro .intro-caption .btn { padding: 8px 10px; font-size: 15px; } } @media (max-width: 768px) { #tt-intro .intro-caption .btn { padding: 6px 8px; font-size: 14px; } } /* Intro caption sizes ======================= */ /* intro caption xs */ #tt-intro .intro-caption-wrap.intro-caption-xs .intro-title { font-size: 48px; } #tt-intro .intro-caption-wrap.intro-caption-xs .intro-subtitle { font-size: 20px; } /* intro caption sm */ #tt-intro .intro-caption-wrap.intro-caption-sm .intro-title { font-size: 58px; } #tt-intro .intro-caption-wrap.intro-caption-sm .intro-subtitle { font-size: 26px; } @media (max-width: 992px) { #tt-intro .intro-caption-wrap.intro-caption-sm .intro-title { font-size: 52px; } } @media (max-width: 768px) { #tt-intro .intro-caption-wrap.intro-caption-sm .intro-title { font-size: 34px; } #tt-intro .intro-caption-wrap.intro-caption-sm .intro-subtitle { font-size: 20px; } #tt-intro .intro-caption-wrap.intro-caption-sm .intro-description { font-size: 15px; } } /* intro caption lg */ #tt-intro .intro-caption-wrap.intro-caption-lg .intro-title { font-size: 78px; } #tt-intro .intro-caption-wrap.intro-caption-lg .intro-subtitle { font-size: 32px; } #tt-intro .intro-caption-wrap.intro-caption-lg .intro-description { font-size: 18px; } @media (max-width: 992px) { #tt-intro .intro-caption-wrap.intro-caption-lg .intro-title { font-size: 72px; } } @media (max-width: 768px) { #tt-intro .intro-caption-wrap.intro-caption-lg .intro-title { font-size: 34px; } #tt-intro .intro-caption-wrap.intro-caption-lg .intro-subtitle { font-size: 20px; } #tt-intro .intro-caption-wrap.intro-caption-lg .intro-description { font-size: 15px; } } /* intro caption xlg */ #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-title { font-size: 92px; } #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-subtitle { font-size: 34px; } #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-description { font-size: 20px; } @media (max-width: 1400px) { #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-title { font-size: 64px; } #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-subtitle { margin-bottom: 10px; font-size: 30px; } #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-description { font-size: 18px; } } @media (max-width: 992px) { #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-title { font-size: 48px; } #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-subtitle { font-size: 24px; } #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-description { font-size: 16px; } } @media (max-width: 768px) { #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-title { font-size: 34px; } #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-subtitle { font-size: 20px; } #tt-intro .intro-caption-wrap.intro-caption-xlg .intro-description { font-size: 15px; } } /* intro caption xxlg */ #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-title { font-size: 110px; } #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-subtitle { font-size: 38px; } #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-description { font-size: 20px; } @media (max-width: 1400px) { #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-title { font-size: 64px; } #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-subtitle { font-size: 30px; } #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-description { font-size: 18px; } } @media (max-width: 992px) { #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-title { font-size: 48px; } #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-subtitle { font-size: 24px; } #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-description { font-size: 16px; } } @media (max-width: 768px) { #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-title { font-size: 34px; } #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-subtitle { font-size: 20px; } #tt-intro .intro-caption-wrap.intro-caption-xxlg .intro-description { font-size: 15px; } } /* Intro caption positions =========================== */ /* position top left */ #tt-intro .intro-caption-wrap.top-left .intro-caption { top: 10%; left: 17%; text-align: left; } @media (max-width: 1600px) { #tt-intro .intro-caption-wrap.top-left .intro-caption { left: 8%; } } @media (max-width: 992px) { #tt-intro .intro-caption-wrap.top-left .intro-caption { left: 5%; } } /* position top center */ #tt-intro .intro-caption-wrap.top-center .intro-caption { top: 10%; left: 50%; width: 100% !important; max-width: 800px !important; padding: 0 15px; text-align: center; -moz-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important; } /* position top right */ #tt-intro .intro-caption-wrap.top-right .intro-caption { top: 10%; right: 17%; text-align: right; } @media (max-width: 1600px) { #tt-intro .intro-caption-wrap.top-right .intro-caption { right: 8%; } } @media (max-width: 992px) { #tt-intro .intro-caption-wrap.top-right .intro-caption { right: 5%; } } /* position center left */ #tt-intro .intro-caption-wrap.center-left .intro-caption { top: 50%; left: 17%; margin-right: 5%; text-align: left; -moz-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } @media (max-width: 1600px) { #tt-intro .intro-caption-wrap.center-left .intro-caption { left: 8%; } } @media (max-width: 992px) { #tt-intro .intro-caption-wrap.center-left .intro-caption { left: 5%; } } /* position center */ #tt-intro .intro-caption-wrap.center .intro-caption { top: 50%; left: 50%; width: 100% !important; max-width: 1200px; padding: 0 15px; text-align: center; -moz-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; } #tt-intro .intro-caption-wrap.center .intro-description { max-width: 800px; margin-left: auto; margin-right: auto; } /* position center right */ #tt-intro .intro-caption-wrap.center-right .intro-caption { top: 50%; right: 17%; margin-left: 5%; text-align: right; -moz-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } @media (max-width: 1600px) { #tt-intro .intro-caption-wrap.center-right .intro-caption { right: 8%; } } @media (max-width: 992px) { #tt-intro .intro-caption-wrap.center-right .intro-caption { bottom: 60px; right: 5%; } } /* position bottom left */ #tt-intro .intro-caption-wrap.bottom-left .intro-caption { bottom: 15%; left: 17%; margin-right: 5%; text-align: left; } @media (max-width: 1600px) { #tt-intro .intro-caption-wrap.bottom-left .intro-caption { left: 8%; } } @media (max-width: 768px) { #tt-intro .intro-caption-wrap.bottom-left .intro-caption { bottom: 60px; left: 5%; } } /* position bottom center */ #tt-intro .intro-caption-wrap.bottom-center .intro-caption { bottom: 15%; left: 50%; width: 100% !important; max-width: 800px; padding: 0 15px; text-align: center; -moz-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important; } /* position bottom right */ #tt-intro .intro-caption-wrap.bottom-right .intro-caption { bottom: 15%; left: auto; right: 17%; text-align: right; } @media (max-width: 1600px) { #tt-intro .intro-caption-wrap.bottom-right .intro-caption { right: 8%; } } @media (max-width: 768px) { #tt-intro .intro-caption-wrap.bottom-right .intro-caption { bottom: 60px; right: 5%; } } /* Intro caption animated (for content carousel) ================================================= */ #tt-intro .owl-carousel .intro-caption-wrap.caption-animate .intro-caption-holder { opacity: 0; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } #tt-intro .owl-carousel .owl-item.active .intro-caption-wrap.caption-animate .intro-caption-holder { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translatey(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; } /* Intro image hover zoom (for content carousel) ================================================= */ #tt-intro .owl-carousel.cc-hover-zoom .intro-image { -webkit-transition: all 6s ease-in-out; -moz-transition: all 6s ease-in-out; -o-transition: all 6s ease-in-out; -ms-transition: all 6s ease-in-out; transition: all 6s ease-in-out; } #tt-intro .owl-carousel.cc-hover-zoom .cc-item:hover .intro-image { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* ------------------------------------------------------------- * * Page header /* ------------------------------------------------------------- */ #page-header { position: relative; overflow: hidden; } .page-header-inner { position: relative; padding: 100px 8%; } @media (max-width: 992px) { .page-header-inner { padding-top: 15%; padding-bottom: 12%; } } @media (max-width: 480px) { .page-header-inner { padding-top: 20%; padding-bottom: 12%; } } /* Page header caption ======================= */ .page-header-caption { position: relative; margin: 0 auto; z-index: 4; } @media (max-width: 1282px) { /* same as boxed layout width */ .page-header-caption { padding-left: 8%; padding-right: 8%; } } @media (max-width: 992px) { .page-header-caption { padding-left: 2%; padding-right: 2%; } } /* page header title */ .ph-title-wrap { } .page-header-title { max-width: 900px; margin: 0 0 15px 0; font-size: 52px; font-weight: 800; color: #181c25; } @media (max-width: 991px) { .page-header-title { font-size: 42px ; } } @media (max-width: 768px) { .page-header-title { font-size: 32px; } } /* page header subtitle */ .ph-subtitle-wrap { } .page-header-subtitle { max-width: 900px; margin: 10px 0 30px 0; font-size: 26px; color: #181c25; } @media (max-width: 992px) { .page-header-subtitle { margin-top: 8px; } } @media (max-width : 768px) { .page-header-subtitle { font-size: 21px; } } /* page header description */ .page-header-description { max-width: 760px; margin: 30px 0 0 0; line-height: inherit; font-size: 18px; color: #181c25; } .ph-desc-inner { } .page-header-description p { } @media (max-width: 767px) { .page-header-description { font-size: 16px; } } /* Page header caption sizes ============================= */ /* caption sizes xs */ .page-header-caption.ph-cap-xs .page-header-title { font-size: 32px; } .page-header-caption.ph-cap-xs .page-header-subtitle { font-size: 21px; } /* caption sizes sm */ .page-header-caption.ph-cap-sm .page-header-title { font-size: 44px; } .page-header-caption.ph-cap-sm .page-header-subtitle { font-size: 24px; } /* caption sizes lg */ .page-header-caption.ph-cap-lg .page-header-title { font-size: 68px; } .page-header-caption.ph-cap-lg .page-header-subtitle { font-size: 28px; } .page-header-caption.ph-cap-lg .page-header-description { font-size: 18px; } /* caption sizes xlg */ .page-header-caption.ph-cap-xlg .page-header-title { font-size: 86px; } .page-header-caption.ph-cap-xlg .page-header-subtitle { font-size: 34px; } .page-header-caption.ph-cap-xlg .page-header-description { font-size: 21px; } /* caption sizes on smaller screens */ @media (max-width: 991px) { .page-header-caption.ph-cap-sm .page-header-title, .page-header-caption.ph-cap-lg .page-header-title, .page-header-caption.ph-cap-xlg .page-header-title { font-size: 62px; } .page-header-caption.ph-cap-xlg .page-header-subtitle { font-size: 28px; } .page-header-caption.ph-cap-lg .page-header-description, .page-header-caption.ph-cap-xlg .page-header-description { font-size: 16px; } } @media (max-width: 768px) { .page-header-caption.ph-cap-sm .page-header-title, .page-header-caption.ph-cap-lg .page-header-title, .page-header-caption.ph-cap-xlg .page-header-title { font-size: 38px; } .page-header-caption.ph-cap-sm .page-header-subtitle, .page-header-caption.ph-cap-lg .page-header-subtitle, .page-header-caption.ph-cap-xlg .page-header-subtitle { font-size: 21px; } } /* Page header aligns ====================== */ /* page header align right */ .ph-right .page-header-caption { text-align: right; } .ph-right .page-header-caption .ph-title-wrap, .ph-right .page-header-caption .ph-subtitle-wrap, .ph-right .page-header-caption .page-header-description, .ph-right .page-header-caption .page-header-title, .ph-right .page-header-caption .page-header-subtitle { margin-left: auto; text-align: right; } .ph-right .page-header-caption .hr-short { margin-left: auto; margin-right: 0; } /* page header align center */ .ph-center .page-header-caption { text-align: center; } .ph-center .page-header-caption .ph-title-wrap, .ph-center .page-header-caption .ph-subtitle-wrap, .ph-center .page-header-caption .page-header-description, .ph-center .page-header-caption .page-header-title, .ph-center .page-header-caption .page-header-subtitle { margin-left: auto; margin-right: auto; text-align: center; } .ph-center .page-header-caption .hr-short { margin-left: auto; } /* Page header sizes ===================== */ #page-header.ph-xs .page-header-inner { padding-top: 40px; padding-bottom: 40px; } #page-header.ph-sm .page-header-inner { padding-top: 80px; padding-bottom: 80px; } #page-header.ph-lg .page-header-inner { padding-top: 140px; padding-bottom: 140px; } #page-header.ph-xlg .page-header-inner { padding-top: 200px; padding-bottom: 200px; } @media (max-width: 992px) { #page-header.ph-xs .page-header-inner, #page-header.ph-sm .page-header-inner, #page-header.ph-lg .page-header-inner, #page-header.ph-xlg .page-header-inner { padding-top: 15%; padding-bottom: 12%; } } @media (max-width: 480px) { #page-header.ph-xs .page-header-inner, #page-header.ph-sm .page-header-inner, #page-header.ph-lg .page-header-inner, #page-header.ph-xlg .page-header-inner { padding-top: 20%; padding-bottom: 12%; } } body.lg-on { overflow: hidden !important; } .lg-backdrop { z-index: 99999; } .lg-outer { z-index: 99999; } /* ------------------------------------------------------------- * * Forms /* ------------------------------------------------------------- */ .form-group { margin-bottom: 20px; } .form-control { height: 48px; background-color: #FFF; padding: 6px 12px; font-size: 14px; color: #333; border: 1px solid rgba(148, 148, 148, 0.3); border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .form-control:focus { border-color: #0040d8 !important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* select */ select { cursor: pointer; } select:required:invalid { color: #999; } option[value=""][disabled] { display: none; } option { color: black; } /* label */ label { display: block; max-width: 100%; margin-bottom: 5px; font-size: 17px; font-weight: 600; } /* placeholder */ ::-webkit-input-placeholder { color: #666 !important; } :-moz-placeholder { color: #666 !important; } ::-moz-placeholder { color: #666 !important; } :-ms-input-placeholder { color: #666 !important; } /* form with button inside */ .form-btn-inside { position: relative; } .form-btn-inside .form-control { padding-right: 68px; } .form-btn-inside button { position: absolute; top: 50%; right: 0; width: auto; height: 100%; line-height: 40px; background-color: transparent; padding: 0 15px 0 15px; font-size: 18px; color: #333; border: none; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .form-btn-inside button:hover { opacity: .8; } .form-btn-inside button:focus { outline: none; } /* input */ input[type=radio] { cursor: pointer; } /* input sizes */ .input-sm, select.input-sm { height: 35px; line-height: 35px; } /* ------------------------------------------------------------- * * Modal /* ------------------------------------------------------------- */ body.modal-open { overflow-y: hidden !important; padding-right: 0 !important; } .modal-open .modal { padding-right: 0 !important; } .modal { background-color: rgba(0, 0, 0, 0.85); z-index: 99999; } .modal.fade { -webkit-transition: opacity .2s linear; -o-transition: opacity .2s linear; transition: opacity .2s linear; } .modal-backdrop.in, .modal-backdrop.fade.in { opacity: 0; } .modal-dialog { background-color: #FFF; background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: cover; background-size: cover; } /* modal background image */ .modal-bg-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* modal header */ .modal-header { background-color: rgba(111, 111, 111, 0.09); padding: 15px; text-align: left; border-bottom: none; } .modal-header .close { margin-top: -7px; opacity: 1; font-size: 14px; font-weight: normal; text-shadow: none; } .modal-header .close:hover { } .modal-header .close:active, .modal-header .close:focus { outline: none; } .modal-title { font-size: 14px; } /* modal body */ .modal-body { padding: 1px 0 30px 0; } .modal-body-image-1 { width: 120px; height: 120px; margin: 20px auto 0 auto; overflow: hidden; border-radius: 50%; } .modal-body-image-2 { height: 140px; } /* modal body content */ .modal-body-content { padding: 30px 20px 20px 20px; } .modal-body .modal-body-heading { font-size: 21px; } /* modal footer */ .modal-footer { padding: 15px; text-align: left; font-size: 14px; color: #888; border: none; } /* modal content */ .modal-content { position: relative; background-color: transparent; z-index: 2; border: none; } @media (min-width: 768px) { .modal-content { -webkit-box-shadow: 0 1px 15px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 15px rgba(0,0,0,0.2); box-shadow: 0 1px 15px rgba(0,0,0,0.2); } } /* Modal position senter ========================= */ @media (min-width : 768px) { .modal-center .modal-dialog { position: absolute; top: 45%; left: 50%; -moz-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; } } /* Modal sidebar left/right ============================= */ .modal.modal-left .modal-dialog, .modal.modal-right .modal-dialog { position: fixed; margin: auto; width: 40%; height: 100%; -webkit-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } @media (max-width: 1282px) { /* boxed layout width */ .modal.modal-left .modal-dialog, .modal.modal-right .modal-dialog { width: 50%; } } @media (max-width: 768px) { .modal.modal-left .modal-dialog, .modal.modal-right .modal-dialog { width: 100%; } } /* Left */ .modal.modal-left.fade .modal-dialog{ left: -40%; -webkit-transition: opacity 0.3s linear, left 0.3s ease-out; -moz-transition: opacity 0.3s linear, left 0.3s ease-out; -o-transition: opacity 0.3s linear, left 0.3s ease-out; transition: opacity 0.3s linear, left 0.3s ease-out; } .modal.modal-left.fade.in .modal-dialog{ left: 0; } /* Right */ .modal.modal-right.fade .modal-dialog { right: -40%; -webkit-transition: opacity 0.3s linear, right 0.3s ease-out; -moz-transition: opacity 0.3s linear, right 0.3s ease-out; -o-transition: opacity 0.3s linear, right 0.3s ease-out; transition: opacity 0.3s linear, right 0.3s ease-out; } .modal.modal-right.fade.in .modal-dialog { right: 0; } /* Modal sidebar style ======================== */ .modal.modal-left, .modal.modal-right { background-color: rgba(0, 0, 0, 0.7); } .modal.modal-left .modal-content, .modal.modal-right .modal-content { height: 100%; padding-bottom: 104px; border-radius: 0; border: none; } .modal.modal-left .modal-header, .modal.modal-right .modal-header { background-color: transparent; border: none; } .modal.modal-left .modal-title, .modal.modal-right .modal-title { font-size: 14px; } .modal.modal-left .modal-header .close, .modal.modal-right .modal-header .close { } .modal.modal-left .modal-footer, .modal.modal-right .modal-footer { font-size: 14px; } .modal.modal-left .modal-body, .modal.modal-right .modal-body { height: 100%; overflow-y: auto; } .modal.modal-left .modal-body-content, .modal.modal-right .modal-body-content { padding: 5% 5% 20px 5%; } .modal.modal-left .modal-body .modal-body-heading, .modal.modal-right .modal-body .modal-body-heading { max-width: 590px; font-size: 38px; } @media (max-width: 1200px) { .modal.modal-left .modal-body .modal-body-heading, .modal.modal-right .modal-body .modal-body-heading { font-size: 32px; } } @media (max-width: 992px) { .modal.modal-left .modal-body .modal-body-heading, .modal.modal-right .modal-body .modal-body-heading { font-size: 24px; } } .modal.modal-left .modal-body .modal-body-image-1, .modal.modal-right .modal-body .modal-body-image-1 { width: 120px; height: 120px; margin: 0 auto 20px auto; } .modal.modal-left .modal-body .modal-body-image-2, .modal.modal-right .modal-body .modal-body-image-2 { height: 160px; } @media (max-width: 992px) { .modal.modal-left .modal-body .modal-body-image-2, .modal.modal-right .modal-body .modal-body-image-2 { height: 140px; } } /* ------------------------------------------------------------- * * Sticky share /* ------------------------------------------------------------- */ .sticky-share { position: fixed; left: 0; top: 30%; z-index: 9999; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } .sticky-share.sticky-share-open { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } body.h-attr-search-open .sticky-share { z-index: 999; } .sticky-share-inner { position: relative; background-color: #FFF; padding: 0 8px 8px 8px; border: 1px solid #e1e1e1; z-index: 2; } /* sticky share list */ ul.sticky-share-list { list-style: none; padding: 0; margin: 0; } ul.sticky-share-list > li { list-style: none; margin-bottom: 3px; } ul.sticky-share-list > li:last-child { margin-bottom: 0; } ul.sticky-share-list > li > .btn-social-min.btn { margin: 0; } ul.sticky-share-list > li > .btn-social-min.btn-sm { width: 40px; height: 40px; line-height: 36px; } .sticky-share-title { font-size: 12px; font-weight: 500; color: #222; } /* sticky share icon (trigger) */ .sticky-share-button { position: absolute; top: 12px; left: 100%; width: 42px; height: 42px; line-height: 42px; text-align: center; background-color: #FFF; margin-left: -1px; font-size: 17px; color: #333; cursor: pointer; z-index: 1; border: 1px solid #ededed; } .sticky-share-button:hover { } .sticky-share-button .ss-close { display: none; } .sticky-share.sticky-share-open .ss-close { display: inline-block; } .sticky-share.sticky-share-open .ss-icon { display: none; } /* Sticky share aligns ======================= */ /* aling right */ .sticky-share.ss-right { left: auto; right: 0; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); } .sticky-share.ss-right.sticky-share-open { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } .sticky-share.ss-right .sticky-share-button { left: auto; right: 100%; margin-left: 0; margin-right: -1px; } .split-box { } /* Split box image =================== */ .split-box-image { position: relative; /* background-color: rgba(91, 107, 140, 0.1); */ } /* split box image height */ .sbi-height { } @media (max-width: 1199px) { .sbi-height { padding-bottom: 60% !important; } } @media (max-width: 767px) { .sbi-height { padding-bottom: 80% !important; } } .sbi-height.full-height-vh { min-height: calc(100vh - 82px) !important; /* offset is same as header height */ } @media (max-width: 992px) { .sbi-height.full-height-vh { min-height: calc(100vh - 62px) !important; /* offset is same as mobile header height */ } } @media (min-width: 992px) { body.header-transparent-on .sbi-height.full-height-vh { min-height: 100vh !important; } } /* split box image frame (effect only on element boxed layout!) */ body.tt-boxed .tt-wrap .split-box-image.frame-left::before { position: absolute; display: block; content: ""; top: 0; bottom: 0; left: 0; right: 0; border: 17px solid #0040d8; outline: 1px solid transparent; z-index: 1; opacity: .8; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -o-transform: rotate(-6deg); -ms-transform: rotate(-6deg); transform: rotate(-6deg); } body.tt-boxed .tt-wrap .split-box-image:hover.frame-left::before { -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } body.tt-boxed .tt-wrap .split-box-image.frame-right::before { position: absolute; display: block; content: ""; top: 0; bottom: 0; left: 0; right: 0; border: 17px solid #0040d8; outline: 1px solid transparent; z-index: 1; opacity: .8; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -o-transform: rotate(6deg); -ms-transform: rotate(6deg); transform: rotate(6deg); } body.tt-boxed .tt-wrap .split-box-image:hover.frame-right::before { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); } @media (max-width: 420px) { body.tt-boxed .tt-wrap .split-box-image.frame-left::before, body.tt-boxed .tt-wrap .split-box-image.frame-right::before { border-width: 10px; } } /* split box image shadow (effect only on element boxed layout!) */ body.tt-boxed .tt-wrap .split-box-image.sbi-shadow { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-box-shadow: 0px 30px 40px -24px rgba(0, 0, 0, 0.45); -moz-box-shadow: 0px 30px 40px -24px rgba(0, 0, 0, 0.45); box-shadow: 0px 30px 40px -24px rgba(0, 0, 0, 0.45); } body.tt-boxed .tt-wrap .split-box-image.sbi-shadow:hover { -webkit-box-shadow: 0px 25px 40px -15px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 25px 40px -15px rgba(0, 0, 0, 0.5); box-shadow: 0px 25px 40px -15px rgba(0, 0, 0, 0.5); } /* Split box content ==================== */ .split-box-content { position: relative; padding: 10% 10%; z-index: 9; } @media (max-width: 1199px) { .split-box-content { padding: 10% 4% 10% 4%; } } /* if page boxed layout enabled */ @media (min-width: 1200px) { body.tt-boxed .tt-wrap .split-box-content.sb-content-left { padding-left: 0; } body.tt-boxed .tt-wrap .split-box-content.sb-content-right { padding-right: 0; } } /* split box content text */ .split-box-content-text { } /* Split box content styles ============================ */ /* split box content shifted left/right */ @media (min-width: 1200px) { .split-box-content.sb-shifted-left { background-color: #FFF; margin-top: 7%; margin-bottom: 7%; margin-left: -15% !important; } .split-box-content.sb-shifted-right { background-color: #FFF; margin-top: 7%; margin-bottom: 7%; margin-right: -15% !important; } } /* split box content colored */ .split-box-content.sb-content-color { background-color: transparent !important; padding: 10% !important; color: #fff !important; -webkit-box-shadow: 8px 8px 40px -10px rgba(0, 0, 0, 0.6); -moz-box-shadow: 8px 8px 40px -10px rgba(0, 0, 0, 0.6); box-shadow: 8px 8px 40px -10px rgba(0, 0, 0, 0.6); } .split-box-content.sb-content-color::before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; background-color: #0040d8; z-index: -1; opacity: .95; } .split-box-content.sb-content-color .tt-heading-title a:hover { color: inherit; } .split-box-content.sb-content-color .split-box-content-text a { color: #FFF; border-bottom: 1px dotted; } .split-box-content.sb-content-color .split-box-content-text a:hover { opacity: .8; } @media (min-width: 1200px) { .split-box-content.sb-content-color { margin-top: 7%; margin-bottom: 7%; margin-left: 10%; margin-right: 10%; } /* if page boxed layout enabled */ body.tt-boxed .tt-wrap .split-box-content.sb-content-color.sb-content-left { margin-left: 0; } body.tt-boxed .tt-wrap .split-box-content.sb-content-color.sb-content-right { margin-right: 0; } } .split-box-content.sb-content-color .zig-zag-separator span { border-color: #FFF; } .split-box-content.sb-content-color .signature-dark { display: none; } .split-box-content.sb-content-color .signature-light { display: block; } /* ------------------------------------------------------------- * * Buttons /* ------------------------------------------------------------- */ .btn { position: relative; margin: 8px 0; padding: 10px 20px; font-size: 16px; z-index: 9; color: transparent !important; text-shadow: 0 0 0 #222, 0 50px 0 #222; border-radius: 0; border: 3px solid rgba(0, 0, 0, 0); overflow: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .btn:hover, .btn.focus, .btn:focus, .btn.active, .btn:active, .btn.active.focus, .btn.active:focus, .btn.active:hover, .btn:active.focus, .btn:active:focus, .btn:active:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; text-shadow: 0 -50px 0 #222, 0 0 0 #222; } /* Button styles ================= */ /* Button default */ .btn-default { background-color: rgba(238, 238, 240, 1); border-color: transparent; text-shadow: 0 0 0 #222, 0 50px 0 #222; } .btn-default:hover, .btn-default.focus, .btn-default:focus, .btn-default.active, .btn-default:active, .btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .dropdown-toggle.btn-default, .open > .dropdown-toggle.btn-default.focus, .open > .dropdown-toggle.btn-default:focus, .open > .dropdown-toggle.btn-default:hover { background-color: rgba(238, 238, 240, 1); border-color: transparent; text-shadow: 0 -50px 0 #222, 0 0 0 #222; } .btn-default.btn-link { text-shadow: 0 0 0 #222, 0 50px 0 #222; } .btn-default.btn-link:hover, .btn-default.btn-link.focus, .btn-default.btn-link:focus, .btn-default.btn-link.active, .btn-default.btn-link:active, .btn-default.btn-link.active.focus, .btn-default.btn-link.active:focus, .btn-default.btn-link.active:hover, .btn-default.btn-link:active.focus, .btn-default.btn-link:active:focus, .btn-default.btn-link:active:hover, .open > .dropdown-toggle.btn-default.btn-link, .open > .dropdown-toggle.btn-default.btn-link.focus, .open > .dropdown-toggle.btn-default.btn-link:focus, .open > .dropdown-toggle.btn-default.btn-link:hover { text-decoration: none; text-shadow: 0 -50px 0 #222, 0 0 0 #222; } .btn-default-bordered { background-color: transparent; border-color: rgba(136, 136, 136, 0.35); box-shadow: none; text-shadow: 0 0 0 #222, 0 50px 0 #222; } .btn-default-bordered:hover, .btn-default-bordered.focus, .btn-default-bordered:focus, .btn-default-bordered.active, .btn-default-bordered:active, .btn-default-bordered.active.focus, .btn-default-bordered.active:focus, .btn-default-bordered.active:hover, .btn-default-bordered:active.focus, .btn-default-bordered:active:focus, .btn-default-bordered:active:hover, .open > .dropdown-toggle.btn-default-bordered, .open > .dropdown-toggle.btn-default-bordered.focus, .open > .dropdown-toggle.btn-default-bordered:focus, .open > .dropdown-toggle.btn-default-bordered:hover { background-color: rgba(238, 238, 240, 1); border-color: transparent; text-shadow: 0 -50px 0 #222, 0 0 0 #222; } /* Button primary */ .btn-primary { /* same as template main color */ background-color: #1d1f65; border-radius: 15px; border: 1px solid white; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-primary:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary.active, .btn-primary:active, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover { background-color: #0e0e0e; border-color: #0e0e0e; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } .btn-primary.btn-link { text-shadow: 0 0 0 #0040d8, 0 50px 0 #0040d8; } .btn-primary.btn-link:hover, .btn-primary.btn-link.focus, .btn-primary.btn-link:focus, .btn-primary.btn-link.active, .btn-primary.btn-link:active, .btn-primary.btn-link.active.focus, .btn-primary.btn-link.active:focus, .btn-primary.btn-link.active:hover, .btn-primary.btn-link:active.focus, .btn-primary.btn-link:active:focus, .btn-primary.btn-link:active:hover, .open > .dropdown-toggle.btn-primary.btn-link, .open > .dropdown-toggle.btn-primary.btn-link.focus, .open > .dropdown-toggle.btn-primary.btn-link:focus, .open > .dropdown-toggle.btn-primary.btn-link:hover { text-decoration: none; text-shadow: 0 -50px 0 #0040d8, 0 0 0 #0040d8; } .btn-primary-bordered { background-color: transparent; border-color: #0040d8; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: 0 0 0 #0040d8, 0 50px 0 #0040d8; } .btn-primary-bordered:hover, .btn-primary-bordered.focus, .btn-primary-bordered:focus, .btn-primary-bordered.active, .btn-primary-bordered:active, .btn-primary-bordered.active.focus, .btn-primary-bordered.active:focus, .btn-primary-bordered.active:hover, .btn-primary-bordered:active.focus, .btn-primary-bordered:active:focus, .btn-primary-bordered:active:hover, .open > .dropdown-toggle.btn-primary-bordered, .open > .dropdown-toggle.btn-primary-bordered.focus, .open > .dropdown-toggle.btn-primary-bordered:focus, .open > .dropdown-toggle.btn-primary-bordered:hover { background-color: #0040d8; border-color: #0040d8; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button success */ .btn-success { background-color: #41b541; border-color: #41b541; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-success:hover, .btn-success.focus, .btn-success:focus, .btn-success.active, .btn-success:active, .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .dropdown-toggle.btn-success, .open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover { background-color: #41b541; border-color: #41b541; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } .btn-success.btn-link { text-shadow: 0 0 0 #41b541, 0 50px 0 #41b541; } .btn-success.btn-link:hover, .btn-success.btn-link.focus, .btn-success.btn-link:focus, .btn-success.btn-link.active, .btn-success.btn-link:active, .btn-success.btn-link.active.focus, .btn-success.btn-link.active:focus, .btn-success.btn-link.active:hover, .btn-success.btn-link:active.focus, .btn-success.btn-link:active:focus, .btn-success.btn-link:active:hover, .open > .dropdown-toggle.btn-success.btn-link, .open > .dropdown-toggle.btn-success.btn-link.focus, .open > .dropdown-toggle.btn-success.btn-link:focus, .open > .dropdown-toggle.btn-success.btn-link:hover { text-decoration: none; text-shadow: 0 -50px 0 #5cb85c, 0 0 0 #5cb85c; } .btn-success-bordered { background-color: transparent; border-color: #41b541; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: 0 0 0 #41b541, 0 50px 0 #41b541; } .btn-success-bordered:hover, .btn-success-bordered.focus, .btn-success-bordered:focus, .btn-success-bordered.active, .btn-success-bordered:active, .btn-success-bordered.active.focus, .btn-success-bordered.active:focus, .btn-success-bordered.active:hover, .btn-success-bordered:active.focus, .btn-success-bordered:active:focus, .btn-success-bordered:active:hover, .open > .dropdown-toggle.btn-success-bordered, .open > .dropdown-toggle.btn-success-bordered.focus, .open > .dropdown-toggle.btn-success-bordered:focus, .open > .dropdown-toggle.btn-success-bordered:hover { background-color: #41b541; border-color: #41b541; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button info */ .btn-info { background-color: #31B0D5; border-color: #31B0D5; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-info:hover, .btn-info.focus, .btn-info:focus, .btn-info.active, .btn-info:active, .btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .dropdown-toggle.btn-info, .open > .dropdown-toggle.btn-info.focus, .open > .dropdown-toggle.btn-info:focus, .open > .dropdown-toggle.btn-info:hover { background-color: #31B0D5; border-color: #31B0D5; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } .btn-info.btn-link { text-shadow: 0 0 0 #31B0D5, 0 50px 0 #31B0D5; } .btn-info.btn-link:hover, .btn-info.btn-link.focus, .btn-info.btn-link:focus, .btn-info.btn-link.active, .btn-info.btn-link:active, .btn-info.btn-link.active.focus, .btn-info.btn-link.active:focus, .btn-info.btn-link.active:hover, .btn-info.btn-link:active.focus, .btn-info.btn-link:active:focus, .btn-info.btn-link:active:hover, .open > .dropdown-toggle.btn-info.btn-link, .open > .dropdown-toggle.btn-info.btn-link.focus, .open > .dropdown-toggle.btn-info.btn-link:focus, .open > .dropdown-toggle.btn-info.btn-link:hover { text-decoration: none; text-shadow: 0 -50px 0 #31B0D5, 0 0 0 #31B0D5; } .btn-info-bordered { background-color: transparent; border-color: #31B0D5; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: 0 0 0 #5BC0DE, 0 50px 0 #5BC0DE; } .btn-info-bordered:hover, .btn-info-bordered.focus, .btn-info-bordered:focus, .btn-info-bordered.active, .btn-info-bordered:active, .btn-info-bordered.active.focus, .btn-info-bordered.active:focus, .btn-info-bordered.active:hover, .btn-info-bordered:active.focus, .btn-info-bordered:active:focus, .btn-info-bordered:active:hover, .open > .dropdown-toggle.btn-info-bordered, .open > .dropdown-toggle.btn-info-bordered.focus, .open > .dropdown-toggle.btn-info-bordered:focus, .open > .dropdown-toggle.btn-info-bordered:hover { background-color: #31B0D5; border-color: #31B0D5; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button warning */ .btn-warning { background-color: #FBD320; border-color: #FBD320; text-shadow: 0 0 0 #222, 0 50px 0 #222; } .btn-warning:hover, .btn-warning.focus, .btn-warning:focus, .btn-warning.active, .btn-warning:active, .btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .dropdown-toggle.btn-warning, .open > .dropdown-toggle.btn-warning.focus, .open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning:hover { background-color: #FBD320; border-color: #FBD320; text-shadow: 0 -50px 0 #222, 0 0 0 #222; } .btn-warning.btn-link { text-shadow: 0 0 0 #d8b411, 0 50px 0 #d8b411; } .btn-warning.btn-link:hover, .btn-warning.btn-link.focus, .btn-warning.btn-link:focus, .btn-warning.btn-link.active, .btn-warning.btn-link:active, .btn-warning.btn-link.active.focus, .btn-warning.btn-link.active:focus, .btn-warning.btn-link.active:hover, .btn-warning.btn-link:active.focus, .btn-warning.btn-link:active:focus, .btn-warning.btn-link:active:hover, .open > .dropdown-toggle.btn-warning.btn-link, .open > .dropdown-toggle.btn-warning.btn-link.focus, .open > .dropdown-toggle.btn-warning.btn-link:focus, .open > .dropdown-toggle.btn-warning.btn-link:hover { text-decoration: none; text-shadow: 0 -50px 0 #d8b411, 0 0 0 #d8b411; } .btn-warning-bordered { background-color: transparent; border-color: #FBD320; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: 0 0 0 #d8b411, 0 50px 0 #d8b411; } .btn-warning-bordered:hover, .btn-warning-bordered.focus, .btn-warning-bordered:focus, .btn-warning-bordered.active, .btn-warning-bordered:active, .btn-warning-bordered.active.focus, .btn-warning-bordered.active:focus, .btn-warning-bordered.active:hover, .btn-warning-bordered:active.focus, .btn-warning-bordered:active:focus, .btn-warning-bordered:active:hover, .open > .dropdown-toggle.btn-warning-bordered, .open > .dropdown-toggle.btn-warning-bordered.focus, .open > .dropdown-toggle.btn-warning-bordered:focus, .open > .dropdown-toggle.btn-warning-bordered:hover { background-color: #FBD320; border-color: #FBD320; text-shadow: 0 -50px 0 #222, 0 0 0 #222; } /* Button danger */ .btn-danger { background-color: #EC3A35; border-color: #EC3A35; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-danger:hover, .btn-danger.focus, .btn-danger:focus, .btn-danger.active, .btn-danger:active, .btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open > .dropdown-toggle.btn-danger, .open > .dropdown-toggle.btn-danger.focus, .open > .dropdown-toggle.btn-danger:focus, .open > .dropdown-toggle.btn-danger:hover { background-color: #EC3A35; border-color: #EC3A35; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } .btn-danger.btn-link { text-shadow: 0 0 0 #EC3A35, 0 50px 0 #EC3A35; } .btn-danger.btn-link:hover, .btn-danger.btn-link.focus, .btn-danger.btn-link:focus, .btn-danger.btn-link.active, .btn-danger.btn-link:active, .btn-danger.btn-link.active.focus, .btn-danger.btn-link.active:focus, .btn-danger.btn-link.active:hover, .btn-danger.btn-link:active.focus, .btn-danger.btn-link:active:focus, .btn-danger.btn-link:active:hover, .open > .dropdown-toggle.btn-danger.btn-link, .open > .dropdown-toggle.btn-danger.btn-link.focus, .open > .dropdown-toggle.btn-danger.btn-link:focus, .open > .dropdown-toggle.btn-danger.btn-link:hover { text-decoration: none; text-shadow: 0 -50px 0 #EC3A35, 0 0 0 #EC3A35; } .btn-danger-bordered { background-color: transparent; border-color: #EC3A35; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: 0 0 0 #EC3A35, 0 50px 0 #EC3A35; } .btn-danger-bordered:hover, .btn-danger-bordered.focus, .btn-danger-bordered:focus, .btn-danger-bordered.active, .btn-danger-bordered:active, .btn-danger-bordered.active.focus, .btn-danger-bordered.active:focus, .btn-danger-bordered.active:hover, .btn-danger-bordered:active.focus, .btn-danger-bordered:active:focus, .btn-danger-bordered:active:hover, .open > .dropdown-toggle.btn-danger-bordered, .open > .dropdown-toggle.btn-danger-bordered.focus, .open > .dropdown-toggle.btn-danger-bordered:focus, .open > .dropdown-toggle.btn-danger-bordered:hover { background-color: #EC3A35; border-color: #EC3A35; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button dark */ .btn-dark { background-color: #181c25; border-color: #181c25; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-dark:hover, .btn-dark.focus, .btn-dark:focus, .btn-dark.active, .btn-dark:active, .btn-dark.active.focus, .btn-dark.active:focus, .btn-dark.active:hover, .btn-dark:active.focus, .btn-dark:active:focus, .btn-dark:active:hover, .open > .dropdown-toggle.btn-dark, .open > .dropdown-toggle.btn-dark.focus, .open > .dropdown-toggle.btn-dark:focus, .open > .dropdown-toggle.btn-dark:hover { background-color: #181c25; border-color: #181c25; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } .btn-dark.btn-link { text-shadow: 0 0 0 #181c25, 0 50px 0 #181c25; } .btn-dark.btn-link:hover, .btn-dark.btn-link.focus, .btn-dark.btn-link:focus, .btn-dark.btn-link.active, .btn-dark.btn-link:active, .btn-dark.btn-link.active.focus, .btn-dark.btn-link.active:focus, .btn-dark.btn-link.active:hover, .btn-dark.btn-link:active.focus, .btn-dark.btn-link:active:focus, .btn-dark.btn-link:active:hover, .open > .dropdown-toggle.btn-dark.btn-link, .open > .dropdown-toggle.btn-dark.btn-link.focus, .open > .dropdown-toggle.btn-dark.btn-link:focus, .open > .dropdown-toggle.btn-dark.btn-link:hover { text-decoration: none; text-shadow: 0 -50px 0 #181c25, 0 0 0 #181c25; } .btn-dark-bordered { background-color: transparent; border: 3px solid #181c25; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: 0 0 0 #181c25, 0 50px 0 #181c25; } .btn-dark-bordered:hover, .btn-dark-bordered.focus, .btn-dark-bordered:focus, .btn-dark-bordered.active, .btn-dark-bordered:active, .btn-dark-bordered.active.focus, .btn-dark-bordered.active:focus, .btn-dark-bordered.active:hover, .btn-dark-bordered:active.focus, .btn-dark-bordered:active:focus, .btn-dark-bordered:active:hover, .open > .dropdown-toggle.btn-dark-bordered, .open > .dropdown-toggle.btn-dark-bordered.focus, .open > .dropdown-toggle.btn-dark-bordered:focus, .open > .dropdown-toggle.btn-dark-bordered:hover { background-color: #181c25; border-color: #181c25; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button white */ .btn-white { color: transparent; background-color: #FFF; border-color: #FFF; text-shadow: 0 0 0 #222, 0 50px 0 #222; } .btn-white:hover, .btn-white.focus, .btn-white:focus, .btn-white.active, .btn-white:active, .btn-white.active.focus, .btn-white.active:focus, .btn-white.active:hover, .btn-white:active.focus, .btn-white:active:focus, .btn-white:active:hover, .open > .dropdown-toggle.btn-white, .open > .dropdown-toggle.btn-white.focus, .open > .dropdown-toggle.btn-white:focus, .open > .dropdown-toggle.btn-white:hover { border-color: #FFF; text-shadow: 0 -50px 0 #222, 0 0 0 #222; } .btn-white.btn-link { text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-white.btn-link:hover, .btn-white.btn-link.focus, .btn-white.btn-link:focus, .btn-white.btn-link.active, .btn-white.btn-link:active, .btn-white.btn-link.active.focus, .btn-white.btn-link.active:focus, .btn-white.btn-link.active:hover, .btn-white.btn-link:active.focus, .btn-white.btn-link:active:focus, .btn-white.btn-link:active:hover, .open > .dropdown-toggle.btn-white.btn-link, .open > .dropdown-toggle.btn-white.btn-link.focus, .open > .dropdown-toggle.btn-white.btn-link:focus, .open > .dropdown-toggle.btn-white.btn-link:hover { text-decoration: none; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } .btn-white-bordered { background-color: transparent; border: 3px solid #FFF; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-white-bordered:hover, .btn-white-bordered.focus, .btn-white-bordered:focus, .btn-white-bordered.active, .btn-white-bordered:active, .btn-white-bordered.active.focus, .btn-white-bordered.active:focus, .btn-white-bordered.active:hover, .btn-white-bordered:active.focus, .btn-white-bordered:active:focus, .btn-white-bordered:active:hover, .open > .dropdown-toggle.btn-white-bordered, .open > .dropdown-toggle.btn-white-bordered.focus, .open > .dropdown-toggle.btn-white-bordered:focus, .open > .dropdown-toggle.btn-white-bordered:hover { background-color: #FFF; border-color: #FFF; text-shadow: 0 -50px 0 #222, 0 0 0 #222; } /* Button link */ .btn-link { background-color: transparent !important; margin: 0; padding: 4px 0 !important; border: none; text-shadow: 0 0 0 #0040d8, 0 50px 0 #0040d8; /* same as template main link color */ } .btn-link:hover, .btn-link.focus, .btn-link:focus, .btn-link.active, .btn-link:active, .btn-link.active.focus, .btn-link.active:focus, .btn-link.active:hover, .btn-link:active.focus, .btn-link:active:focus, .btn-link:active:hover, .open > .dropdown-toggle.btn-link, .open > .dropdown-toggle.btn-link.focus, .open > .dropdown-toggle.btn-link:focus, .open > .dropdown-toggle.btn-link:hover { color: #0040d8; text-decoration: none; text-shadow: 0 -50px 0 #0040d8, 0 0 0 #0040d8; } /* Button shadow */ .btn-shadow { -webki-box-shadow: 0px 6px 25px -5px rgba(0, 0, 0, 0.45); -moz-box-shadow: 0px 6px 25px -5px rgba(0, 0, 0, 0.45); box-shadow: 0px 6px 25px -5px rgba(0, 0, 0, 0.45); } .btn-shadow:hover, .btn-shadow.focus, .btn-shadow:focus, .btn-shadow.active, .btn-shadow:active, .btn-shadow.active.focus, .btn-shadow.active:focus, .btn-shadow.active:hover, .btn-shadow:active.focus, .btn-shadow:active:focus, .btn-shadow:active:hover, .open > .dropdown-toggle.btn-shadow, .open > .dropdown-toggle.btn-shadow.focus, .open > .dropdown-toggle.btn-shadow:focus, .open > .dropdown-toggle.btn-shadow:hover { -webki-box-shadow: 0px 6px 25px -5px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 6px 25px -5px rgba(0, 0, 0, 0.6); box-shadow: 0px 6px 25px -5px rgba(0, 0, 0, 0.6); } /* Button with dropdown ======================== */ .btn-group > .btn + .dropdown-toggle { padding-right: 10px; padding-left: 10px; border-left: 1px solid rgba(0, 0, 0, 0.06); } /* Button social ================= */ .btn-social { position: relative; padding-left: 55px; text-align: left; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Button social icon */ .btn-social > .btn-social-icon { position: absolute; left: 0; top: 0; bottom: 0; width: 42px; line-height: 40px; font-size: 1.4em; text-align: center; border-right: 1px solid rgba(0,0,0,0.12); } .btn-social > .btn-social-icon > i { position: absolute; top: 50%; left: 50%; text-align: center; padding-right: 0; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* Button social sizes */ .btn-social.btn-xs { padding-left: 55px; } .btn-social.btn-sm { padding-left: 55px; } .btn-social.btn-lg { padding-left: 60px; } .btn-social.btn-xlg { padding-left: 65px; } /* Button social min */ .btn-social-min { position: relative; width: 46px; height: 46px; line-height: 40px; padding: 0 !important; text-align: center; font-size: 16px; } .btn-social-min.btn-xs { width: 28px; height: 28px; line-height: 22px; } .btn-social-min.btn-sm { width: 34px; height: 34px; line-height: 28px; } .btn-social-min.btn-lg { width: 54px; height: 54px; line-height: 48px; } .btn-social-min.btn-xlg { width: 68px; height: 68px; line-height: 62px; } /* Button facebook */ .btn-facebook { background-color: #3b5998; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .open > .dropdown-toggle.btn-facebook { background-color: #3b5998; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button twitter */ .btn-twitter { background-color: #55acee; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-twitter.active, .open > .dropdown-toggle.btn-twitter { background-color: #55acee; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button dropbox */ .btn-dropbox { background-color: #1087dd; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-dropbox:hover, .btn-dropbox:focus, .btn-dropbox:active, .btn-dropbox.active, .open > .dropdown-toggle.btn-dropbox { background-color: #1087dd; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button linkedin */ .btn-linkedin { background-color: #007bb6; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-linkedin:hover, .btn-linkedin:focus, .btn-linkedin:active, .btn-linkedin.active, .open > .dropdown-toggle.btn-linkedin { background-color: #007bb6; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button pinterest */ .btn-pinterest { background-color: #cb2027; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-pinterest:hover, .btn-pinterest:focus, .btn-pinterest:active, .btn-pinterest.active, .open > .dropdown-toggle.btn-pinterest { background-color: #cb2027; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button google */ .btn-google { background-color: #dd4b39; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-google:hover, .btn-google:focus, .btn-google:active, .btn-google.active, .open > .dropdown-toggle.btn-google { background-color: #dd4b39; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button instagram */ .btn-instagram { background-color: #3f729b; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-instagram:hover, .btn-instagram:focus, .btn-instagram:active, .btn-instagram.active, .open > .dropdown-toggle.btn-instagram { background-color: #3f729b; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button tumblr */ .btn-tumblr { background-color: #2c4762; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-tumblr:hover, .btn-tumblr:focus, .btn-tumblr:active, .btn-tumblr.active, .open > .dropdown-toggle.btn-tumblr { background-color: #2c4762; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button vk */ .btn-vk { background-color: #587ea3; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-vk:hover, .btn-vk:focus, .btn-vk:active, .btn-vk.active, .open > .dropdown-toggle.btn-vk { background-color: #587ea3; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button flickr */ .btn-flickr { background-color: #ff0084; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-flickr:hover, .btn-flickr:focus, .btn-flickr:active, .btn-flickr.active, .open > .dropdown-toggle.btn-flickr { background-color: #ff0084; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button soundcloud */ .btn-soundcloud { background-color: #f50; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-soundcloud:hover, .btn-soundcloud:focus, .btn-soundcloud:active, .btn-soundcloud.active, .open > .dropdown-toggle.btn-soundcloud { background-color: #f50; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button yahoo */ .btn-yahoo { background-color: #720e9e; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-yahoo:hover, .btn-yahoo:focus, .btn-yahoo:active, .btn-yahoo.active, .open > .dropdown-toggle.btn-yahoo { background-color: #720e9e; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button dribbble */ .btn-dribbble { background-color: #333; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-dribbble:hover, .btn-dribbble:focus, .btn-dribbble:active, .btn-dribbble.active, .open > .dropdown-toggle.btn-dribbble { background-color: #333; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button youtube */ .btn-youtube { background-color: #cc181e; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-youtube:hover, .btn-youtube:focus, .btn-youtube:active, .btn-youtube.active, .open > .dropdown-toggle.btn-youtube { background-color: #cc181e; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button behance */ .btn-behance { background-color: #0057ff; text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } .btn-behance:hover, .btn-behance:focus, .btn-behance:active, .btn-behance.active, .open > .dropdown-toggle.btn-behance { background-color: #0057ff; text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } /* Button close ================= */ .tt-close-btn { position: relative; display: inline-block; top: 6px; width: 21px; height: 21px; margin: 0; padding: 0; cursor: pointer; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tt-close-btn:hover { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .tt-close-btn::before, .tt-close-btn::after { content: ''; position: absolute; background-color: #181c25; } .tt-close-btn::before { left: 0; top: 9px; width: 100%; height: 3px; } .tt-close-btn::after { left: 9px; top: 0; width: 3px; height: 100%; } /* Button close light color*/ .tt-close-btn.tt-close-light::before, .tt-close-btn.tt-close-light::after { background-color: #FFF; } /* Button rounded ================== */ .btn-rounded { border-radius: 4px; } .btn-rounded-2x { border-radius: 8px; } .btn-rounded-3x { border-radius: 12px; } .btn-rounded-4x { border-radius: 20px; } .btn-rounded-5x { border-radius: 40px; } .btn-rounded-full { border-radius: 50%; } /* Button sizes ================ */ .btn-group-xs > .btn, .btn-xs { padding: 0 6px 0 6px; font-size: 13px; } .btn-group-sm > .btn, .btn-sm { padding: 5px 15px; font-size: 14px; } .btn-group-lg > .btn, .btn-lg { padding: 15px 25px; font-size: 17px; } .btn-group-xlg > .btn, .btn-xlg { /* Extra size */ padding: 20px 30px; font-size: 19px; } /* Button dropdown caret ========================= */ .btn .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-top-color: #FFF; border-right: 4px solid transparent; border-left: 4px solid transparent; } .btn.btn-primary-bordered .caret, .btn.btn-success-bordered .caret, .btn.btn-info-bordered .caret, .btn.btn-warning-bordered .caret, .btn.btn-danger-bordered .caret, .btn.btn-dark-bordered .caret { border-top-color: inherit; } .btn:hover .caret { border-top-color: #FFF; } .btn.btn-default .caret, .btn.btn-warning .caret, .btn.btn-white .caret, .btn.btn-default-bordered .caret, .btn.btn-default:hover .caret, .btn.btn-default-bordered:hover .caret, .btn.btn-warning:hover .caret, .btn.btn-warning-bordered:hover .caret, .btn.btn-white:hover .caret, .btn.btn-white-bordered:hover .caret { border-top-color: #222; } /* ------------------------------------------------------------- * * Social buttons /* ------------------------------------------------------------- */ .social-buttons { } .social-buttons ul { margin: 0; padding: 0; list-style: none; } .social-buttons ul > li { display: inline-block; margin: 0 2px; } .social-buttons ul > li:first-child { margin-left: 0; } .social-buttons ul > li:last-child { margin-right: 0; } .social-buttons .btn.btn-link { width: 30px; height: 30px; line-height: 30px; border: none !important; border: none !important; } /* ------------------------------------------------------------- * * Info box /* ------------------------------------------------------------- */ .info-box-wrap { } .info-box { position: relative; margin-bottom: 50px; text-align: center; } /* info box icon */ .info-box-icon { display: inline-block; margin-bottom: 15px; font-size: 38px; } /* info box info */ .info-box-info { } .info-box-heading { margin: 0 0 20px 0; font-size: 22px; } .info-box-heading a { position: relative; color: inherit; } .info-box-heading a:hover { text-decoration: underline; } .info-box-text { line-height: 1.5; } /* Enable element fixed height with ellipsis (class "tt-ellipsis"). Source: https://github.com/FrDH/jQuery.dotdotdot */ .info-box-text.tt-ellipsis { height: 81px; overflow: hidden; } /* Info box light (use class "ib-light" if the background is dark) =================================================================== */ .info-box-wrap.ib-light { color: #FFF; } /* Info boxes in service section if class "ss-light" is used. */ .info-box-wrap.ib-light.ib-boxed .info-box { background-color: rgba(250, 250, 250, 0.06); border: none; } .info-box-wrap.ib-light.ib-icon-bg-shape .info-box-icon { background-image: url(../img/icon-bg-shape-2.png); } /* Info box icon styles ======================== */ /* info box icon color */ .info-box-wrap.ib-icon-color .info-box-icon { color: #0040d8; } /* info box icon background shape */ .info-box-wrap.ib-icon-bg-shape .info-box-icon { width: 96px; height: 96px; line-height: 96px; font-size: 58px; background-image: url(../img/icon-bg-shape.png); background-position: center; background-repeat: no-repeat; background-size: 94%; text-align: center; } @media (max-width: 992px) { .info-box-wrap.ib-icon-bg-shape .info-box-icon { width: 84px; height: 84px; line-height: 84px; font-size: 48px; } } .info-box-wrap.ib-style-2.ib-icon-bg-shape .info-box-icon { /* if "ib-style-2" enabled */ width: 64px; height: 64px; line-height: 64px; font-size: 38px; } /* info box icon rounded */ .info-box-wrap.ib-icon-bg-color.ib-icon-rounded .info-box-icon, .info-box-wrap.ib-icon-bg-shape.ib-icon-bg-color.ib-icon-rounded .info-box-icon { width: 70px; height: 70px; line-height: 70px; font-size: 24px; border-radius: 50%; } /* info box icon with background color */ .info-box-wrap.ib-icon-bg-color .info-box-icon, .info-box-wrap.ib-icon-bg-shape.ib-icon-bg-color .info-box-icon { width: 60px; height: 60px; line-height: 60px; background-color: #0040d8; margin-bottom: 25px; text-align: center; font-size: 21px; color: #FFF; } .info-box-wrap.ib-icon-bg-shape.ib-icon-bg-color .info-box-icon { background-image: none; } /* Info box styles =================== */ /* info box style-2 (no effect on smaller screens!) */ .info-box-wrap.ib-style-2 .info-box { text-align: left; } .info-box-wrap.ib-style-2 .info-box-icon { float: left; margin-right: 20px; margin-bottom: 0; font-size: 32px; } @media (max-width: 992px) { .info-box-wrap.ib-style-2 .info-box-icon { float: none; } } .info-box-wrap.ib-style-2 .info-box-info { display: table; } .info-box-wrap.ib-style-2 .info-box-heading { margin: 10px 0 12px 0; } .info-box-wrap.ib-style-2.ib-icon-bg-color .info-box-icon { width: 52px; height: 52px; line-height: 52px; margin-bottom: 0; font-size: 21px; } .info-box-wrap.ib-style-2.ib-icon-bg-color.ib-icon-rounded .info-box-icon { width: 58px; height: 58px; line-height: 58px; font-size: 21px; border-radius: 50%; } /* info box boxed style */ .info-box-wrap.ib-boxed .info-box { margin-bottom: 30px; padding: 40px 30px; border: 1px solid #e6e6e6; -webkit-box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.6); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.6); } .info-box-wrap.ib-style-2.ib-boxed .info-box { padding: 30px; } /* ------------------------------------------------------------- * * About me section /* ------------------------------------------------------------- */ #about-me-section { } .about-me-inner { padding-top: 0; } /* if page boxed layout enabled */ body.tt-boxed #about-me-section .about-me-inner.tt-wrap { padding-top: 4%; } /* signature */ .signature { margin-top: 50px; } .signature img { } .signature .signature-dark { } .signature .signature-light { display: none; } #about-me-section .split-box-content-text { } /* Specific code for about me section styles (if needed) ========================================================= */ /* about me section style-1 */ #about-me-section.about-me-style-1 { } /* about me section style-2 */ #about-me-section.about-me-style-2 { } /* ------------------------------------------------------------- * * About us section /* ------------------------------------------------------------- */ #about-us-section { } /* if page boxed layout enabled */ body.tt-boxed #about-us-section .tt-wrap { margin-top: 80px; margin-bottom: 80px; } @media (max-width: 1200px) { body.tt-boxed #about-us-section .tt-wrap { margin-top: 5%; margin-bottom: 5%; } } .about-us-inner { } /* ------------------------------------------------------------- * * Contact section /* ------------------------------------------------------------- */ #contact-section { position: relative; padding: 80px 0; } @media (max-width: 1200px) { #contact-section { padding: 10% 0; } } .contact-section-inner { } /* Contact info ================= */ .contact-info-wrap { } .contact-info-text { margin-bottom: 40px; } .contact-info-title { } .contact-info-title a { text-decoration: underline; color: inherit; } .contact-info-title a:hover { color: #0040d8; } ul.contact-info { margin: 0; padding: 0; list-style: none; } ul.contact-info > li { margin-bottom: 3px; } ul.contact-info > li a { color: inherit; } ul.contact-info > li a:hover { opacity: .8; } .contact-info .address { } .contact-info .phone { } .contact-info .email { } /* Contact form ================ */ #contact-form { } .contact-form-inner { } .contact-form-text { margin-bottom: 40px; } /* Specific code for contact section styles (if needed) ======================================================== */ /* contact section style-1 */ #contact-section.contact-style-1 { } /* contact section style-2 */ #contact-section.contact-style-2 { } #contact-section.contact-style-2 .text-white .contact-info a { color: #FFF; border-bottom: 1px dotted; } #contact-section.contact-style-2 .text-white .contact-info .email a:hover { opacity: .8; } #contact-section.contact-style-2 #contact-form .form-control { border: 2px solid #222; } /* contact section style-3 */ #contact-section.contact-style-3 { } /* contact section style-4 */ #contact-section.contact-style-4 { } /* ------------------------------------------------------------- * * Call to action section /* ------------------------------------------------------------- */ .call-to-action-section { position: relative; padding: 120px 3%; } @media (max-width: 992px) { .call-to-action-section { padding: 12% 3%; } } .cta-bg-image { position: absolute; top: 0; bottom: 0; left: 0; bottom: 0; } .cta-inner { position: relative; z-index: 2; } /* Specific code for call to action section styles (if needed) =============================================================== */ /* call to action style-1 */ .call-to-action-section.cta-style-1 { } /* call to action style-2 */ .call-to-action-section.cta-style-2 { padding: 100px 3%; } @media (min-width: 992px) { .call-to-action-section.cta-style-2 .tt-heading { padding-right: 10%; } .call-to-action-section.cta-style-2 .col-md-push-6 .tt-heading, .call-to-action-section.cta-style-2 .col-lg-push-6 .tt-heading, .call-to-action-section.cta-style-2 .col-md-push-7 .tt-heading, .call-to-action-section.cta-style-2 .col-lg-push-7 .tt-heading, .call-to-action-section.cta-style-2 .col-md-push-8 .tt-heading, .call-to-action-section.cta-style-2 .col-lg-push-8 .tt-heading { padding-left: 10%; padding-right: 0; } } @media (max-width: 991px) { .call-to-action-section.cta-style-2 { padding: 12% 3%; } } /* ------------------------------------------------------------- * * Simple text section /* ------------------------------------------------------------- */ .simple-text-section { position: relative; padding: 120px 3%; } @media (max-width: 992px) { .simple-text-section { padding: 12% 3%; } } .simple-text-inner { } /* simple text section content */ .simple-text-section-content { position: relative; max-width: 1000px; z-index: 3; } .simple-text-section-content.text-center { margin: 0 auto; } .simple-text-section-content.text-right { margin: 0 0 0 auto; } /* ------------------------------------------------------------- * * Page section (for dummy pages) /* ------------------------------------------------------------- */ #page-section { padding: 80px 0; } @media (max-width: 992px) { #page-section { padding: 10% 0; } } .page-section-inner { padding: 0 3%; } /* if page boxed layout enabled */ body.tt-boxed #page-section .page-section-inner.tt-wrap { padding: 0 15px; } /* page content */ .page-content { } /* page sidebar */ .page-sidebar { } @media (min-width: 992px) { .page-sidebar.sidebar-left { padding-right: 20px; } .page-sidebar.sidebar-right { padding-left: 20px; } } /* Page modern ================ */ #page-section.page-modern { padding: 0; } #page-section.page-modern .page-section-inner { padding: 0; } /* if page boxed layout enabled */ body.tt-boxed #page-section.page-modern .page-section-inner.tt-wrap { padding: 80px 15px; } @media (max-width: 1200px) { body.tt-boxed #page-section.page-modern .page-section-inner.tt-wrap { padding: 0; } } /* ------------------------------------------------------------- * * Footer /* ------------------------------------------------------------- */ #footer { position: relative; height: 100%; margin-top: 80px; margin-left: auto; margin-right: auto; /* padding: 80px 0 0 0; */ /* border-top: 1px solid rgba(134, 134, 134, 0.15); */ } @media (max-width: 1200px) { #footer { margin-top: 60px; } } @media (max-width: 767px) { #footer { margin-top: 60px; padding-top: 60px; } } .footer-inner { } /* footer container */ .footer-container { padding-left: 15px; padding-right: 15px; } @media (min-width: 1282px) { /* boxed layout width */ .footer-container { padding-left: 5%; padding-right: 5%; } } @media (max-width: 1282px) { /* boxed layout width */ .footer-container { padding-left: 5% !important; padding-right: 5% !important; } } /* Footer blocks ================= */ .footer-block { margin-bottom: 30px; font-size: 14px; overflow: hidden; } .f-block-heading { margin: 0 0 15px 0; font-size: 16px; } /* footer logo */ .f-block-logo { margin: 30px 40px 0 0; } @media (max-width: 992px) { .f-block-logo { margin-bottom: 30px; } } @media (max-width: 420px) { .f-block-logo { text-align: inherit; } } .f-block-logo img { max-height: 62px; } .f-block-logo .logo-light { display: none; } .f-block-logo .logo-light-m, .f-block-logo .logo-dark-m { display: none; } @media (max-width: 767px) { .f-block-logo .logo-dark { display: none; } .f-block-logo .logo-dark-m { display: block; } } /* footer links */ ul.f-block-links { margin: 0; padding: 0; list-style: none; } ul.f-block-links > li { display: block; } ul.f-block-links > li > a { position: relative; display: inline-block; padding-bottom: 4px; font-size: 14px; color: #181c25; z-index: 1; } ul.f-block-links > li > a:hover { } ul.f-block-links > li > a::after { position: absolute; content: ""; left: 0; top: 50%; margin-top: -2px; width: 100%; max-width: 100%; z-index: -1; height: 10px; background: #0040d8; opacity: .2; overflow: hidden; transform: scaleX(0); transform-origin: right center; -webkit-transition: transform .4s cubic-bezier(.645,.045,.355,1); -moz-transition: transform .4s cubic-bezier(.645,.045,.355,1); -o-transition: transform .4s cubic-bezier(.645,.045,.355,1); -ms-transition: transform .4s cubic-bezier(.645,.045,.355,1); transition: transform .4s cubic-bezier(.645,.045,.355,1); } ul.f-block-links > li > a:hover::after { transform: none; transform-origin: left center; } /* footer text */ .f-block-text { } .f-block-text a { color: inherit; border-bottom: 1px dotted #AAA; } .f-block-text a:hover { color: #0040d8; border-bottom: 1px dotted #0040d8; } /* footer social buttons */ #footer .social-buttons { margin-bottom: 20px; } @media (min-width: 992px) { #footer .social-buttons { text-align: right; } } /* Footer bottom bar ===================== */ .footer-bottom { background-color: rgba(0, 0, 0, 0.03); margin-top: 40px; padding: 20px 0; font-size: 12px; color: #888; border-top: 1px solid rgba(128, 128, 128, 0.05); } @media (max-width: 768px) { .footer-bottom { padding: 20px 0 40px 0; } } /* footer bottom col left */ .footer-bottom-col-left { } /* footer bottom col right */ .footer-bottom-col-right { } @media (min-width: 992px) { .footer-bottom-col-right { text-align: right; } } /* Footer simple ================= */ #footer.footer-simple { padding: 100px 0 80px 0; text-align: center; } @media (max-width: 991px) { #footer.footer-simple { padding: 80px 0; } } #footer.footer-simple .f-block-logo { margin: 0 0 20px 0; } #footer.footer-simple ul.f-block-links > li { display: inline-block; margin: 0 10px; } #footer.footer-simple .social-buttons { text-align: center; } #footer.footer-simple .social-buttons .btn-link:hover { color: #0040d8; } #footer.footer-simple #footer-subscribe-form { max-width: 400px; margin-left: auto; margin-right: auto; margin-bottom: 40px; } #footer.footer-simple .footer-simple-copyright { font-size: 14px; text-align: center; } #footer.footer-simple .footer-simple-copyright p { margin-bottom: 5px; } /* Footer minimal ================== */ #footer.footer-minimal { background-color: rgba(0, 0, 0, 0.05); padding: 22px 0; border-top: 1px solid rgba(128, 128, 128, 0.05); } @media (max-width: 991px) { #footer.footer-minimal { height: auto; padding: 60px 0; } } @media (min-width: 1282px) { /* boxed layout width */ #footer.footer-minimal .footer-container { padding-left: 2%; padding-right: 2%; } } body.tt-boxed #footer.footer-minimal .footer-container { padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) { #footer.footer-minimal .footer-block { margin: 0; } } #footer.footer-minimal .social-buttons { margin-top: 3px; margin-bottom: 0; text-align: right; } @media (max-width: 991px) { #footer.footer-minimal .social-buttons { text-align: center; } } #footer.footer-minimal .social-buttons .btn-link { width: 30px; height: 30px; line-height: 30px; } #footer.footer-minimal .footer-minimal-copyright { font-size: 12px; } #footer.footer-minimal .footer-minimal-copyright p { margin-bottom: 0; } @media (max-width: 991px) { #footer.footer-minimal .footer-minimal-copyright { text-align: center; } } /* Footer dark =============== */ #footer.footer-dark { background-color: #181c25; color: #BBB; border-top: none; } #footer.footer-dark .f-block-heading { color: #DDD; } #footer.footer-dark ul.f-block-links > li > a { color: #BBB; } #footer.footer-dark ul.f-block-links > li > a::after { opacity: 1; } #footer.footer-dark ul.f-block-links > li > a:hover { color: #FFF; } #footer.footer-dark .f-block-text a:hover { color: #FFF; border-bottom: 1px dotted #FFF; } #footer.footer-dark .btn-default { background-color: rgba(189, 189, 189, 0.13); text-shadow: 0 0 0 #FFF, 0 50px 0 #FFF; } #footer.footer-dark .btn-default:hover { text-shadow: 0 -50px 0 #FFF, 0 0 0 #FFF; } #footer.footer-dark .form-control { background-color: #101010; color: #CCC; } #footer.footer-dark .form-btn-inside button { color: #CCC; } #footer.footer-dark .f-block-logo .logo-dark { display: none; } #footer.footer-dark .f-block-logo .logo-light { display: inline-block; } @media (max-width: 767px) { #footer.footer-dark .f-block-logo .logo-light { display: none; } #footer.footer-dark .f-block-logo .logo-dark-m { display: none; } #footer.footer-dark .f-block-logo .logo-light-m { display: inline-block; } } #footer.footer-dark .footer-bottom { background-color: #1d1f65; color: #ffffff; border-top-color: rgba(128, 128, 128, 0.08); } #footer.footer-dark .footer-bottom a { color: #DDD; } #footer.footer-dark .footer-bottom a:hover { color: #FFF; } #footer.footer-dark .footer-simple-copyright a { color: #DDD; } #footer.footer-dark .footer-simple-copyright a:hover { color: #FFF; } #footer.footer-dark .footer-minimal-copyright a { color: #DDD; } #footer.footer-dark .footer-minimal-copyright a:hover { color: #FFF; } /* Scroll to top button ======================== */ .scrolltotop { position: fixed; display: none; bottom: 20px; right: 20px; width: 34px; height: 34px; line-height: 34px; background-color: rgba(111, 111, 111, 0.19); text-align: center; color: #FFF; text-decoration: none; z-index: 3; font-size: 18px; } .scrolltotop::before { line-height: 34px; font-family: "Font Awesome 5 Free"; content: "\f106"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } #footer .scrolltotop { bottom: 70px; } #footer.footer-simple .scrolltotop { bottom: 20px; } #footer.footer-minimal .scrolltotop { bottom: 90px; } body.tt-boxed #footer .scrolltotop { bottom: 12px; } body.tt-boxed #footer.footer-simple .scrolltotop { bottom: 23px; } body.tt-boxed #footer.footer-minimal .scrolltotop { bottom: 23px; } @media (max-width: 1560px) { body.tt-boxed #footer .scrolltotop { bottom: 70px; } body.tt-boxed #footer.footer-minimal .scrolltotop { bottom: 90px; } } @media (max-width: 992px) { #footer .scrolltotop, body.tt-boxed #footer .scrolltotop, #footer.footer-minimal .scrolltotop, body.tt-boxed #footer.footer-minimal .scrolltotop { bottom: 20px; } } .scrolltotop:hover, .scrolltotop:focus { background-color: #0e0e0e; color: #FFF; }