/* --------------------------------------------------------------------------------------------- 1. Document Setup 2. Header Menu 3. Homepage Hero 4. Hero Image & Page Title 5. Stripe Sections 6. Picture Boxes 7. Icon Boxes 8. Stages 9. Feature List 10. Carousel Plugin 11. Info Box 12. Standard Gallery 13. Gallery: Simple Metro Style 14. Preview Image List 15. Testimonials 16. Staff 17. Case Studies 18. Tabs 19. Accordion / Toggle 20. Stat Data 21. Diagrams 22. Blog 23. Pagination 24. Single Post 25. Recent Posts & Related Posts 26. Split Sections 27. Twitter Feed 28. Flickr Photostream 29. Standard Table 30. Pricing Table 31. Preview Image Overlay & Lightbox Overlay 32. Forms 33. Contact Info & Google Map 34. Sidebar 35. Footer 36. Typography 37. Other Elements and Misc. */ /*-----------------------------------------------------------------------------------*/ /* 1. Document Setup /*-----------------------------------------------------------------------------------*/ @media (min-width: 1921px) { body { width: 1920px; margin-left: auto; margin-right: auto; } } @media (min-width: 992px) { body { background-image: url(../images/backgrounds/body-bg.png); background-repeat: repeat-y; background-attachment: fixed; } body.touch-screen { background-attachment: scroll; } } /* adjust body background appearance at the page's right side */ @media (min-width: 1520px) { /* screen width 1600px, 1680px, 1920px */ body { background-position: right calc(50vw - 900px) top; /* 900px = 1320px/2 + 240px */ } } @media (min-width: 1360px) and (max-width: 1519px) { /* screen width: 1360px, 1366px, 1440px */ body { background-position: right calc(50vw - 855px) top; /* 855px = 1170px/2 + 270px */ } } @media (min-width: 1200px) and (max-width: 1359px) { /* screen width: 1280px */ body { background-position: right -218px top; } } @media (min-width: 992px) and (max-width: 1199px) { /* screen width: 1024px */ body { background-position: right -260px top; } } #header { position: relative; z-index: 4; background-color: #B0B813; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #header .columns { position: relative; } #main { position: relative; z-index: 1; } /* "Page content" section --------------------------------------------------- */ #page-content { position: relative; /* Colored border. Colors: #00b6de #ed5f4a #f5ae3d #aac713 #5f73c2 #848891 */ background-image: -webkit-linear-gradient(left, #00b6de, #00b6de 16.66%, #ed5f4a 16.66%, #ed5f4a 33.32%, #f5ae3d 33.32%, #f5ae3d 50%, #aac713 50%, #aac713 66.66%, #5f73c2 66.66%, #5f73c2 83.32%, #848891 83.32%); background-image: -o-linear-gradient(left, #00b6de, #00b6de 16.66%, #ed5f4a 16.66%, #ed5f4a 33.32%, #f5ae3d 33.32%, #f5ae3d 50%, #aac713 50%, #aac713 66.66%, #5f73c2 66.66%, #5f73c2 83.32%, #848891 83.32%); background-image: linear-gradient(to right, #00b6de, #00b6de 16.66%, #ed5f4a 16.66%, #ed5f4a 33.32%, #f5ae3d 33.32%, #f5ae3d 50%, #aac713 50%, #aac713 66.66%, #5f73c2 66.66%, #5f73c2 83.32%, #848891 83.32%); background-size: 1600px 6px; background-position: center top; background-repeat: no-repeat; padding: 76px 0 45px; overflow: hidden; } #page-content::before { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 6px; content: ""; background-color: #848891; z-index: -1; } #hero-image + #page-content { background-size: 1600px 4px; padding-top: 74px; } #hero-image + #page-content::before { height: 4px; } #hero-image.gradient-bg + #page-content { background-size: 1600px 3px; padding-top: 73px; } #hero-image.gradient-bg + #page-content::before { height: 3px; } @media (min-width: 992px) and (max-width: 1199px) { #page-content { background-size: 1300px 5px; } #page-content::before { height: 5px; } #hero-image + #page-content { background-size: 1300px 4px; } } @media (min-width: 768px) and (max-width: 991px) { #page-content { background-size: 1000px 5px; } #page-content::before { height: 5px; } #hero-image + #page-content { background-size: 1000px 4px; } } @media (max-width: 767px) { #page-content, #hero-image + #page-content { padding-top: 54px; } } @media (min-width: 480px) and (max-width: 767px) { #page-content { background-size: 800px 4px; } #page-content::before { height: 4px; } #hero-image + #page-content { background-size: 800px 4px; } } @media (max-width: 479px) { #page-content { background-size: 700px 4px; } #page-content::before { height: 4px; } #hero-image + #page-content { background-size: 700px 4px; } } /* Page layout with sidebar --------------------------------------------------- */ #main-content { margin-bottom: 60px; } @media (min-width: 768px) { .contact-page .contact-info.columns { float: right; } } @media (min-width: 992px) { #sidebar.page-right-col.columns, .side-menu-widget.columns, .single-post-details.columns { float: right; } } @media (min-width: 1520px) { /* screen width 1600px, 1680px, 1920px */ #page-content.fullwidth-layout .page-intro.columns, #main-content.page-left-col.columns { padding-right: 35px; } /* width 330px */ #sidebar.page-right-col.columns, .side-menu-widget.columns, .single-post-details.columns, .contact-page .contact-info.columns { padding-left: 95px; } } @media (min-width: 1200px) and (max-width: 1519px) { /* screen width: 1280px, 1360px, 1366px, 1440px */ #page-content.fullwidth-layout .page-intro.columns, #main-content.page-left-col.columns { padding-right: 15px; } /* width 300px */ #sidebar.page-right-col.columns, .side-menu-widget.columns, .single-post-details.columns, .contact-page .contact-info.columns { padding-left: 75px; } } @media (min-width: 992px) and (max-width: 1199px) { /* screen width: 1024px */ #page-content.fullwidth-layout .page-intro.columns, #main-content.page-left-col.columns { padding-right: 32px; } .contact-page #main-content.page-left-col.columns { padding-right: 62px; } /* width 280px */ #sidebar.page-right-col.columns, .side-menu-widget.columns, .single-post-details.columns { padding-left: 28px; } /* width 300px */ .contact-page .contact-info.columns { padding-left: 8px; } } @media (min-width: 768px) and (max-width: 991px) { /* screen width: 768px */ .contact-page #main-content.page-left-col.columns { padding-right: 65px; } /* width 298px */ .contact-page .contact-info.columns { padding-left: 0; } } /* Logo --------------------------------------------------- */ #logo { position: absolute; left: 15px; bottom: 20px; } #header.extended #logo { bottom: 13px; } #logo > a { display: block; width: 180px; /* The width of theme's default logo image. Set the width of your logo in custom.css */ } #logo .high-dpi { display: none; } /* for high-resolution devices */ @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) { #logo .normal-dpi { display: block; } #logo .high-dpi { display: block; } } @media (max-width: 991px) { #logo { position: static; float: left; margin: 20px 0; } } /*-----------------------------------------------------------------------------------*/ /* 2. Header Menu /*-----------------------------------------------------------------------------------*/ #navigation { float: right; margin-top: 40px; } #header.extended #navigation { margin-top: 10px; } #primary-nav { float: right; margin-bottom: 10px; } #primary-nav ul { list-style: none; margin: 0; padding: 0; } #primary-nav ul a { display: block; position: relative; } #primary-nav > ul > li > a { font: 500 14px/20px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #1f2438; text-transform: uppercase; padding: 8px 17px; } #primary-nav > ul > li:not(.button-item) > a { /*height: 44px;*/ } #primary-nav ul li { position: relative; margin: 0; } #primary-nav > ul > li { float: left; } #primary-nav > ul > li:not(.button-item):last-child > a { padding-right: 0; } #primary-nav > ul > li:not(.button-item) > a:hover, #primary-nav > ul > li:not(.button-item).sfHover > a { color: #444a61; } #primary-nav > ul > li:not(.button-item).current-menu-item > a, #primary-nav > ul > li:not(.button-item).top-current-menu-ancestor > a, #primary-nav > ul > li:not(.button-item).current-menu-item > a:hover, #primary-nav > ul > li:not(.button-item).top-current-menu-ancestor > a:hover { color: #d99a36; } #primary-nav > ul > li.button-item > a { color: #fff; background-color: #3e4d87; margin: 0 12px; padding: 8px 13px; } #primary-nav > ul > li.button-item:last-child > a { margin-right: 0; } #primary-nav > ul > li.button-item > a:hover, #primary-nav > ul > li.button-item.sfHover > a { color: #fff; background-color: #5f73c2; } #primary-nav ul ul { position: absolute; top: -999em; width: 170px; /* left offset of submenus need to match (see below) */ -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); z-index: 2; } #primary-nav ul ul a { padding: 6px 24px; text-transform: none; overflow: hidden; } .js #primary-nav ul ul { width: auto; min-width: 160px; } .js #primary-nav ul ul a { white-space: nowrap; } #primary-nav ul ul li:not(.sf-mega-section) { width: 100%; background-color: #fff; } /* Item's bottom divider */ #primary-nav ul ul li.bottom-divider { padding-bottom: 6px; } #primary-nav ul ul li.bottom-divider::after { position: absolute; bottom: 0; left: 18px; right: 18px; height: 0; content: ""; border-bottom: 1px dashed #ccc; } #primary-nav ul ul li.bottom-divider + li { padding-top: 6px; } #primary-nav > ul > li > ul > li:first-child { border-top: 1px solid #eaeaea; } #primary-nav ul ul li:first-child { padding-top: 10px; } #primary-nav ul ul li:last-child { padding-bottom: 10px; } #primary-nav ul ul li a { font-size: 15px; line-height: 26px; color: #666; } #primary-nav ul .sub-menu .menu-item-child > a { font-weight: normal; } #primary-nav ul ul li a:hover, #primary-nav ul ul li.current-menu-item a:hover, #primary-nav ul ul li.sfHover > a { color: #1f2438; background-color: rgba(141, 146, 166, 0.1); /* #8d92a6 */ } #primary-nav ul ul li.current-menu-item > a, #primary-nav ul ul li.current-menu-ancestor > a { color: #1f2438; } /* 3nd level */ #primary-nav ul ul ul { width: 170px; } .js #primary-nav ul ul ul { width: auto; min-width: 160px; } #primary-nav ul ul ul li:first-child { padding-top: 5px; } #primary-nav ul ul ul li:last-child { padding-bottom: 5px; } #primary-nav ul ul li:not(.sf-mega-section) li { background-color: #fff; background-image: -webkit-linear-gradient(left, rgba(141, 146, 166, 0.1), rgba(141, 146, 166, 0.1)); background-image: -o-linear-gradient(left, rgba(141, 146, 166, 0.1), rgba(141, 146, 166, 0.1)); background-image: linear-gradient(to right, rgba(141, 146, 166, 0.1), rgba(141, 146, 166, 0.1)); /* #8d92a6 */ } /* Make sub menus appear */ #primary-nav ul li:hover ul, #primary-nav ul li.sfHover ul { left: 0; top: 43px; /* match top ul list item height - 1px */ } /* Hide all subs subs (3 levels deep) */ #primary-nav ul li:hover li ul, #primary-nav ul li.sfHover li ul, #primary-nav ul li li:hover li ul, #primary-nav ul li li.sfHover li ul { top: -999em; } /* Display all subs subs (3 levels deep) */ #primary-nav ul li li:hover ul, #primary-nav ul li li.sfHover ul, #primary-nav ul li li li:hover ul, #primary-nav ul li li li.sfHover ul { left: 170px; /* match ul width */ top: -5px; z-index: 2; } #primary-nav ul li li.bottom-divider:hover > ul, #primary-nav ul li li.bottom-divider.sfHover > ul, #primary-nav ul li li li.bottom-divider:hover > ul, #primary-nav ul li li li.bottom-divider.sfHover > ul { /*top: 1px;*/ } #primary-nav ul li li.bottom-divider + li:hover > ul, #primary-nav ul li li.bottom-divider + li.sfHover > ul, #primary-nav ul li li li.bottom-divider + li:hover > ul, #primary-nav ul li li li.bottom-divider + li.sfHover > ul { top: 1px; } /* Submenu arrows */ #primary-nav .sf-arrows ul .sf-with-ul::after { position: absolute; top: 50%; right: 16px; margin-top: -7px; font-family: Ionicons; font-size: 15px; line-height: 1; color: #8d92a6; content: "\f363"; } #primary-nav .sf-arrows ul .sf-with-ul:hover::after, #primary-nav ul ul li.sfHover > .sf-with-ul::after { color: #f5ae3d; } #primary-nav ul ul .sf-with-ul { padding-right: 40px; } /* Megamenu --------------------------------------------------- */ #primary-nav > ul { position: relative; } #primary-nav .sf-mega-parent { position: static; } #primary-nav .sf-mega { position: absolute; left: 0; top: -999em; max-width: 1036px; padding: 20px 28px; background-color: #fff; border-top: 1px solid #eaeaea; -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); z-index: 2; } #primary-nav .sf-mega > .sub-menu { display: table; width: 100%; } #primary-nav ul li:hover .sf-mega { top: 43px; /* match top ul list item height - 1px */ } #primary-nav .sf-mega-section { position: static; display: table-cell; min-width: 150px; padding-left: 30px; } #primary-nav .sf-mega-section:first-child { min-width: 120px; padding-left: 0; } #primary-nav .sf-mega-section ul { position: static; display: block !important; opacity: 1 !important; margin-left: -12px; } #primary-nav .sf-mega-section h6 { font-size: 17px; color: #666; margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px dotted #ccc; } #primary-nav .sf-mega-section:first-child h6 { margin-left: 0; padding-left: 0; } #primary-nav .sf-mega-section.title-merged h6 { margin-left: -30px; padding-left: 30px; text-indent: -999em; } #primary-nav .sf-mega ul { position: static; top: auto; width: auto !important; min-width: 0 !important; -webkit-box-shadow: none; box-shadow: none; } #primary-nav .sf-mega .sf-mega-section li { width: auto; height: auto; background-color: transparent; } #primary-nav .sf-mega a { position: static; height: auto; padding: 4px 12px; overflow: visible; white-space: normal !important; } /* Sticky menu --------------------------------------------------- */ @media (min-width: 992px) { body.sticky-menu-active #header { position: fixed; /* "top" = sticky header height: 44px (#primary-nav height) + 25px (#navigation margin-top) + 15px (#primary-nav margin-bottom) The adjustStickyMenu JS function (custom.js) overrides #header's "top" property. */ top: -84px; left: 0; width: 100%; } body.sticky-menu-active #navigation, body.sticky-menu-active #header.extended #navigation { margin-top: 25px; } body.sticky-menu-active #secondary-nav { display: none; } body.sticky-menu-active #primary-nav { margin-bottom: 15px; } body.sticky-menu-active #logo { top: 50%; bottom: auto !important; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } body.sticky-menu-active #logo > a { position: relative; width: auto; height: 64px; /* 64px = 84px (sticky header height) - 2 * 10px (space before & space after) */ } body.sticky-menu-active #logo img { position: relative; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); max-height: 100%; } } /* Mobile side menu --------------------------------------------------- */ /* Mobile menu toggle */ #mobile-nav-toggle { display: none; float: right; margin: 0 -5px 0 40px; } #mobile-menu-button { display: block; padding: 5px; } #mobile-menu-button .fa { /* vector icons - Font Awesome */ font-size: 24px; color: #606680; -webkit-transition: color 0.15s ease; -o-transition: color 0.15s ease; transition: color 0.15s ease; } #mobile-menu-button:hover .fa { color: #1f2438; } /* Mobile menu close button */ #mobile-menu-close { display: inline-block; float: right; padding: 5px; } #mobile-menu-close .fa { /* vector icons - Font Awesome */ font-size: 16px; color: #b5b5b5; } #mobile-menu-close:hover .fa { color: #ccc; } /* Side menu */ .sidr { display: none; position: fixed; top: 0; right: -380px; height: 100%; width: 100%; max-width: 380px; overflow-x: visible; overflow-y: auto; z-index: 100002; background-color: #555; } .sidr .sidr-inner { padding: 15px 20px; } .sidr .sidr-inner:first-child { padding: 5px 20px; background-color: #444; } .sidr ul { list-style: none; margin: 0; padding: 0; } .sidr ul a, .sidr .sidr-class-sf-mega-section h6 { display: block; position: relative; padding: 0 5px; margin: 0; } .sidr ul li, .sidr .sidr-class-sf-mega-section { margin: 0; background-color: #555; border-top: 1px dotted #696969; } .sidr > .sidr-inner > ul > li:first-child { border-top: none; } .sidr ul li a, .sidr .sidr-class-sf-mega-section h6 { font-size: 16px; font-weight: normal; line-height: 50px; color: #b5b5b5; } .sidr > .sidr-inner > ul > li > a { font-size: 19px; color: #ccc; white-space: nowrap; } .sidr ul li.sidr-class-current-menu-item > a, .sidr ul ul li.sidr-class-current-menu-item a::before, .sidr ul li.sidr-class-current-menu-ancestor > a, .sidr ul ul li.sidr-class-current-menu-ancestor > a::before { color: #e5e5e5; } #sidr-id-main-menu > li > ul > li > a, .sidr .sidr-class-sf-mega-section h6 { padding-left: 30px; padding-top: 13px; padding-bottom: 13px; line-height: 24px; } #sidr-id-main-menu > li > ul > li > ul > li a, .sidr .sidr-class-sf-mega-section .sidr-class-sub-menu a { font-size: 15px; padding-left: 60px; padding-top: 13px; padding-bottom: 13px; line-height: 24px; } /* Marker for submenu item */ .sidr .sidr-class-sub-menu a::before, .sidr .sidr-class-sf-mega-section h6::before { position: absolute; left: 20px; top: 13px; font-size: 10px; line-height: 24px; content: "-"; } .sidr ul ul .sidr-class-sub-menu a::before { left: 50px; } /* Submenu arrows */ .sidr .dropdown-toggle { position: absolute; display: block; top: 11px; right: 0; width: 28px; height: 28px; line-height: 18px; background-color: #444; -webkit-border-radius: 50%; border-radius: 50%; padding: 5px 0; text-align: center; } .sidr .dropdown-toggle .fa { /* vector icons - Font Awesome */ font-size: 18px; color: #b5b5b5; } .sidr .dropdown-toggle:hover .fa { color: #f5f5f5; } .sidr a.sidr-class-sf-with-ul { padding-right: 46px; } .sidr .sidr-class-sf-mega-section .dropdown-toggle:hover { cursor: pointer; } .sidr .sidr-class-sub-menu, .sidr .sidr-class-sf-mega { display: none; } .sidr .sidr-class-sf-mega > .sidr-class-sub-menu, .sidr .sidr-class-top-current-menu-ancestor > .sidr-class-sub-menu, .sidr .sidr-class-top-current-menu-ancestor > .sidr-class-sf-mega, .sidr li .sidr-class-current-menu-ancestor > .sidr-class-sub-menu { display: block; } /* Secondary menu (Header Quick Links) + phone number --------------------------------------------------- */ #secondary-nav { overflow: hidden; margin-bottom: 10px; border-bottom: 1px dashed #ccc; padding: 5px 7px; background-color: #61651b; } #secondary-nav .quick-links { float: right; } #secondary-nav .quick-links { list-style: none; margin: 0; padding: 0; } #secondary-nav .quick-links li { display: inline-block; font-size: 15px; line-height: 33px; margin: 0 0px 0 10px; border-right: cadetblue; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #secondary-nav .quick-links li:first-child { margin-left: 0; border-right: 1px solid #ccc; padding-right: 20px; } #secondary-nav .quick-links li:nth-child(2){ border-right: 1px solid #ccc; padding-right: 20px; } #secondary-nav .quick-links li:nth-child(3){ border-right: 1px solid #ccc; padding-right: 20px; } #secondary-nav .quick-links li:first-child a{ background-color: #349ccf; color: #ffffff; padding: 0px 10px; border-radius: 3px; } .menu-item a:hover { text-decoration:none; } #secondary-nav .quick-links li.book a{ background-color: #222; color: #ffffff; padding: 0px 10px; border-radius: 3px; } #secondary-nav .quick-links li.regis a{ background-color: #d44147; color: #ffffff; padding: 0px 10px; border-radius: 3px; } #secondary-nav .quick-links li.number span{ background-color: #113d68; color: #ffffff; padding: 8px 10px; border-radius: 3px; margin-right: 5px; } #secondary-nav .quick-links .menu-item a { display: block; color: #606680; } #secondary-nav .quick-links .menu-item a:hover { color: #1f2438; } #secondary-nav .quick-links .contact-phone { line-height: 33px; color: #ffffff; margin-left: 20px; } #secondary-nav .quick-links .phone-number { font-size: 19px; color: #606680; margin-left: 3px; } #secondary-nav .quick-links .phone-number:hover { color: #1f2438; } .trapezium-bg2 { position: absolute; top: 0; left: 308px; width: 9%; height: 100%; z-index: 1; right: 0; /* background-color: #222; */ } .trapezium-bg2::before { position: absolute; display: block; top: 0; left: 0; width: 87%; height: 100%; content: ""; /* padding-left: 99px; */ /* 184px = 8/23 * 529px */ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: 5; } .trapezium-bg2::after { position: absolute; display: block; top: 0; bottom: 0; left: 0; left: 0px; /* 40px = 8/23 * (644px-529px) */ content: ""; background:; z-index: 4; } .trapezium-bg2 span { position: absolute; display: block; top: 0; left: 0; height: 0; width: 50%; border-top: 100px solid #222222; /* must be equal to #home-hero height */ border-left: 77px solid transparent; /* 184px = 8/23 * 529px */ border-left-color: transparent !important; opacity: 0.55; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* Media queries --------------------------------------------------- */ @media (min-width: 992px) and (max-width: 1199px) { #primary-nav > ul > li > a { padding-left: 15px; padding-right: 15px; } } @media (min-width: 992px) { #mobile-nav { display: none !important; right: -380px !important; } } @media (max-width: 991px) { .js #primary-nav, .js #secondary-nav .quick-links { float: none; } .js #secondary-nav { float: right; margin: 2px 0 0; overflow: visible; } .js #navigation { position: absolute; top: 50%; right: 15px; float: none; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } .js #navigation, .js #header.extended #navigation { margin-top: 0; } .js #main-menu { display: none; } .js #header #mobile-nav-toggle { display: block; } } @media (max-width: 767px) { #secondary-nav .quick-links .menu-item { display: none; } #mobile-nav-toggle { margin-left: 30px; } } @media (max-width: 479px) { #secondary-nav { display: none; } } /*-----------------------------------------------------------------------------------*/ /* 3. Homepage Hero /*-----------------------------------------------------------------------------------*/ #home-hero { position: relative; height: 429px; /* possible max value - 644px */ width: 100%; margin-right: auto; margin-left: auto; } #home-slider .slide { display: none; height: 429px; /* must be equal to #home-hero height */ width: 100%; background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: 100% auto; } #home-slider .slide:first-of-type { display: block; } .ie9 #home-slider .slide { background-attachment: scroll; background-position: center 40%; } /* Images --------------------------------------------------- */ /* NOTE: All images for the homepage slider should be set in custom.css */ #home-slider .slide .container { height: 363px; /* 449px = 529px - 80px */ padding-top: 30px; overflow: hidden; z-index: 2; } #home-slider .slide .container .row { display: table; width: 50%; height: 100%; } #home-slider .slide .columns { display: table-cell; width: 100%; float: none; padding-right: 0; vertical-align: middle; } #home-slider .slide .column .row{ width:100% !important; } #home-slider .slide .columns > * { margin-right: -15px; } #home-slider .slide .columns .h1-slogan, #home-slider .slide .columns .h2-slogan, #home-slider .slide .columns .h3-slogan, #home-slider .slide .columns .h4-slogan { margin-right: -40px; } #home-slider .slide .columns .lead-text-large { margin-bottom: 40px; } /* banner-section boxes */ #home-slider .slide .columns .gray-box{ background: #dedede; color: #123d69; border-radius: 3px; padding: 15px; margin: 10px 0; min-height: 100px; } #home-slider .slide .columns .gray-box p{ margin-bottom:0px; line-height:20px; } #home-slider .slide .columns .gray-box a.first{ color: #123d69; overflow: hidden; } #home-slider .slide .columns .gray-box a.first i{ font-size:20px; } #home-slider .slide .columns a.first span{ display:block; } #home-slider .slide .columns .fiest-box{ } #home-slider .slide .columns .fiest-box:hover{ background-color:#d44147; } #home-slider .slide .columns .second-box{ background-color:#ffcb05 !important; } #home-slider .slide .columns .second-box:hover{ background-color:#dedede !important;; } #home-slider .slide .columns .third-box{ background-color:#d44147 !important; } #home-slider .slide .columns .third-box:hover{ background-color:#ffcb05 !important;; } #home-slider .slide .columns .firth-box{ background-color:#349ccf !important; } #home-slider .slide .columns .firth-box:hover{ background-color:#dedede !important;; } #home-slider .slide .columns .six-box{ background-color:#d44147 !important; } #home-slider .slide .columns .six-box:hover{ background-color:#dedede !important;; } #home-slider .slide .columns .seven-box{ background-color:#ffcb05 !important; } #home-slider .slide .columns .seven-box:hover{ background-color:#dedede !important;; } /* Button and link */ #home-slider .slide .button { color: #dedede; background-color: transparent; border-color: #ccc; padding-left: 20px; padding-right: 20px; } #home-slider .slide .button.button-medium { font-weight: normal; padding: 8px 15px; } #home-slider .slide .button:hover { color: #f5f5f5; border-color: #f5f5f5; } #home-slider .slide .button-colored { color: #fff; background-color: transparent; border-color: #f5cb87; } #home-slider .slide .button-colored:hover { color: #f5f5f5; border-color: #f5f5f5; } #home-slider .slide .button.play-icon { padding-left: 55px; } #home-slider .slide .button-colored.play-icon::before { border-color: #f5cb87; } #home-slider .slide .button-colored.play-icon::after { border-left-color: #f5cb87; } #home-slider .slide .button-colored.play-icon:hover::before { background-color: #f5cb87; } #home-slider .slide a:not(.button) { position: relative; line-height: 1.5; font-weight: bold; color: #d9e0ff; } #home-slider .slide a:not(.button)::before { position: absolute; display: block; bottom: -2px; left: 0; right: 0; border-bottom: 1px dotted #d9e0ff; -webkit-transition: border-color 0.15s ease; -o-transition: border-color 0.15s ease; transition: border-color 0.15s ease; content: ""; } #home-slider .slide a:not(.button):hover { color: #f5f5f5; } #home-slider .slide a:not(.button):hover::before { border-bottom-color: #f5f5f5; } #home-slider .slide a.text-secondary-color:not(.button) { color: #f5cb87 !important; } #home-slider .slide a.text-secondary-color:not(.button)::before { border-bottom-color: #fff; } #home-slider .slide a.text-secondary-color:not(.button):hover { color: #f5f5f5 !important; } /* Caption background --------------------------------------------------- */ #home-hero .trapezium-bg { position: absolute; top: 0; left: 0; width: 50%; height: 100%; z-index: 1; } #home-hero .trapezium-bg::before { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; content: ""; padding-right: 184px; /* 184px = 8/23 * 529px */ background: url(../images/backgrounds/home-slider-triangle-bg.png) no-repeat right top; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: 5; } #home-hero .trapezium-bg::after { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 40px; /* 40px = 8/23 * (644px-529px) */ content: ""; background: url(../images/backgrounds/sq-dense-pattern.png) repeat right top; z-index: 4; } #home-hero .trapezium-bg span { position: absolute; display: block; top: 0; left: 0; height: 0; width: 100%; border-top: 429px solid #73798c; /* must be equal to #home-hero height */ border-right: 184px solid transparent; /* 184px = 8/23 * 529px */ border-right-color: transparent !important; opacity: 0.55; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* Possible colors for each slide's caption background NOTE: It is also used for page title background (see "Hero Image & Page Title" section) */ #main [id*="hero"] .slide[data-caption-bg-color="red"] .trapezium-bg span { border-color: #8c7373; } #main [id*="hero"] .slide[data-caption-bg-color="tomato"] .trapezium-bg span { border-color: #8c7773; } #main [id*="hero"] .slide[data-caption-bg-color="orange-red"] .trapezium-bg span { border-color: #8c7a73; } #main [id*="hero"] .slide[data-caption-bg-color="chocolate"] .trapezium-bg span { border-color: #8c7e73; } #main [id*="hero"] .slide[data-caption-bg-color="orange"] .trapezium-bg span { border-color: #8c8373; } #main [id*="hero"] .slide[data-caption-bg-color="dark-yellow"] .trapezium-bg span { border-color: #8c8873; } #main [id*="hero"] .slide[data-caption-bg-color="yellow"] .trapezium-bg span { border-color: #8c8c73; } #main [id*="hero"] .slide[data-caption-bg-color="olive"] .trapezium-bg span { border-color: #888c73; } #main [id*="hero"] .slide[data-caption-bg-color="green-yellow"] .trapezium-bg span { border-color: #828c73; } #main [id*="hero"] .slide[data-caption-bg-color="green"] .trapezium-bg span { border-color: #738c73; } #main [id*="hero"] .slide[data-caption-bg-color="see-green"] .trapezium-bg span { border-color: #738c7e; } #main [id*="hero"] .slide[data-caption-bg-color="turquoise"] .trapezium-bg span { border-color: #738c8a; } #main [id*="hero"] .slide[data-caption-bg-color="light-blue"] .trapezium-bg span { border-color: #73868c; } #main [id*="hero"] .slide[data-caption-bg-color="steel-blue"] .trapezium-bg span { border-color: #73818c; } #main [id*="hero"] .slide[data-caption-bg-color="royal-blue"] .trapezium-bg span { border-color: #73798c; } #main [id*="hero"] .slide[data-caption-bg-color="blue"] .trapezium-bg span { border-color: #73738c; } #main [id*="hero"] .slide[data-caption-bg-color="blue-violet"] .trapezium-bg span { border-color: #80738c; } #main [id*="hero"] .slide[data-caption-bg-color="purple"] .trapezium-bg span { border-color: #8c738c; } #main [id*="hero"] .slide[data-caption-bg-color="deep-pink"] .trapezium-bg span { border-color: #8c7380; } #main [id*="hero"] .slide[data-caption-bg-color="grey"] .trapezium-bg span { border-color: #8c8c8c; } /* Controls (pager) --------------------------------------------------- */ #home-slider .cycle-pager { position: absolute; left: 0; bottom: 15px; width: 100%; overflow: hidden; z-index: 500; } #home-slider .cycle-pager span { display: block; width: 12px; height: 12px; float: left; font-size: 0; line-height: 0; border: 1px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; margin: 5px; cursor: pointer; } #home-slider .cycle-pager span.cycle-pager-active { background-color: #fff; } #home-slider .cycle-pager span:not(.cycle-pager-active):hover { } /* Media queries --------------------------------------------------- */ /* for high-resolution devices with screens larger than 767 pixels wide */ @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 3/2), (min-width: 768px) and (min-resolution: 1.5dppx), (min-width: 768px) and (min-resolution: 144dpi) { #home-hero .trapezium-bg::before { background-image: url(../images/backgrounds/home-slider-triangle-bg-2x.png); background-size: 224px 644px; } #home-hero .trapezium-bg::after { background-image: url(../images/backgrounds/sq-dense-pattern-2x.png); background-size: 9px 9px; } } @media (min-width: 1920px) { #home-slider .slide { background-size: 1920px auto; background-position: center 25%; } #home-hero, #home-slider .slide { height: 644px; } #home-slider .slide .container { height: 544px; /* 544px = 644px - 100px */ } #home-slider .slide .container .row, #home-hero .trapezium-bg { width: 45%; } #home-hero .trapezium-bg::before { padding-right: 224px; /* 224px = 8/23 * 644px */ } #home-hero .trapezium-bg::after { right: 0; /* 0px = 8/23 * (644px-644px) */ } #home-hero .trapezium-bg span { border-top-width: 644px; /* must be equal to #home-hero height */ border-right-width: 224px; /* 224px = 8/23 * 644px */ } } @media (min-width: 1520px) and (max-width: 1919px) { #home-hero, #home-slider .slide { height: 552px; } #home-slider .slide .container { height: 472px; /* 472px = 552px - 80px */ } #home-slider .slide .container .row, #home-hero .trapezium-bg { width: 45%; } #home-hero .trapezium-bg::before { padding-right: 192px; /* 192px = 8/23 * 552px */ } #home-hero .trapezium-bg::after { right: 32px; /* 32px = 8/23 * (644px-552px) */ } #home-hero .trapezium-bg span { border-top-width: 552px; /* must be equal to #home-hero height */ border-right-width: 192px; /* 192px = 8/23 * 552px */ } } @media (max-width: 1199px) { #home-slider .slide { background-attachment: scroll; } } @media (min-width: 992px) and (max-width: 1199px) { #home-hero, #home-slider .slide { height: 460px; } #home-slider .slide { background-position: center 30%; } #home-slider .slide .container { height: 385px; /* 385px = 460px - 75px */ } #home-slider .slide .container .row, #home-hero .trapezium-bg { width: 55%; } #home-slider .slide .h1-slogan, #home-slider .slide .h2-slogan { font-size: 65px; } #home-slider .slide .h3-slogan { font-size: 55px; } #home-slider .slide .h4-slogan { font-size: 46px; } #home-slider .slide .h5-slogan { font-size: 36px; } #home-slider .slide .columns .lead-text-large { font-size: 28px; margin-bottom: 30px; } #home-slider .slide .button { font-size: 15px; line-height: 20px; padding: 10px 18px; } #home-slider .slide .button.play-icon { padding-left: 51px; } #home-slider .slide .button.play-icon::before { width: 40px; height: 40px; } #home-slider .slide .button.play-icon::after { margin: 12px 0 0 16px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; } #home-hero .trapezium-bg::before { padding-right: 160px; /* 160px = 8/23 * 460px */ } #home-hero .trapezium-bg::after { right: 64px; /* 64px = 8/23 * (644px-460px) */ } #home-hero .trapezium-bg span { border-top-width: 460px; /* must be equal to #home-hero height */ border-right-width: 160px; /* 160px = 8/23 * 460px */ } } @media (min-width: 768px) and (max-width: 991px) { #home-hero, #home-slider .slide { height: 506px; } #home-slider .slide { background-position: center; background-size: cover; } #home-slider .slide .container { height: 430px; /* 430px = 506px - 76px */ } #home-slider .slide .container .row, #home-hero .trapezium-bg { width: 60%; } #home-slider .slide .h1-slogan, #home-slider .slide .h2-slogan { font-size: 65px; } #home-slider .slide .h3-slogan { font-size: 55px; } #home-slider .slide .h4-slogan { font-size: 46px; } #home-slider .slide .h5-slogan { font-size: 36px; } #home-slider .slide .columns .lead-text-large { font-size: 28px; margin-bottom: 30px; } #home-slider .slide .button { font-size: 15px; line-height: 20px; padding: 10px 18px; } #home-slider .slide .button.play-icon { padding-left: 51px; } #home-slider .slide .button.play-icon::before { width: 40px; height: 40px; } #home-slider .slide .button.play-icon::after { margin: 12px 0 0 16px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; } #home-hero .trapezium-bg::before { padding-right: 176px; /* 176px = 8/23 * 506px */ } #home-hero .trapezium-bg::after { right: 48px; /* 56px = 8/23 * (644px-506px) */ } #home-hero .trapezium-bg span { border-top: 506px solid #73798c; /* must be equal to #home-hero height */ border-right: 176px solid transparent; /* 176px = 8/23 * 483px */ } #home-slider .cycle-pager { bottom: 20px; } } @media (max-width: 767px) { #home-slider .slide { background-position: center; background-size: cover; } #home-slider .slide .h1-slogan, #home-slider .slide .h2-slogan { font-size: 42px; margin-bottom: 7px; } #home-slider .slide .h3-slogan { font-size: 34px; margin-bottom: 10px; } #home-slider .slide .h4-slogan { font-size: 28px; margin-bottom: 7px; } #home-slider .slide .h5-slogan { font-size: 23px; margin-bottom: 7px; } #home-slider .slide .columns .lead-text-large { font-size: 22px; margin-bottom: 15px; } #home-slider .slide .button { font-size: 14px; line-height: 19px; padding: 7px 14px; border-width: 1px; } #home-slider .slide .button.play-icon { padding-left: 45px; } #home-slider .slide .button.play-icon::before { width: 34px; height: 34px; } #home-slider .slide .button.play-icon::after { margin: 11px 0 0 14px; border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; } #home-slider .cycle-pager { bottom: 10px; } } @media (min-width: 480px) and (max-width: 767px) { #home-hero, #home-slider .slide { height: 276px; } #home-slider .slide .container { height: 230px; /* 230px = 276px - 46px */ padding-top: 20px; } #home-slider .slide .container .row, #home-hero .trapezium-bg { width: 65%; } #home-slider .slide .columns > * { margin-right: -20px; } #home-hero .trapezium-bg::before { padding-right: 96px; /* 96px = 8/23 * 276px */ } #home-hero .trapezium-bg::after { right: 128px; /* 128px = 8/23 * (644px-276px) */ } #home-hero .trapezium-bg span { border-top-width: 276px; /* must be equal to #home-hero height */ border-right-width: 96px; /* 96px = 8/23 * 276px */ } } @media (max-width: 479px) { #home-hero, #home-slider .slide { height: 345px; } #home-slider .slide .container { height: 300px; /* 300px = 345px - 45px */ padding-top: 20px; } #home-slider .slide .container .row, #home-hero .trapezium-bg { width: 100%; margin: 0; } #home-slider .slide[data-caption-bg-color="none"] .container .row { width: 80%; } #home-slider .slide .columns { padding: 0; } #home-slider .slide .columns > *, #home-slider .slide .columns .h1-slogan, #home-slider .slide .columns .h2-slogan, #home-slider .slide .columns .h3-slogan, #home-slider .slide .columns .h4-slogan { margin-right: 0; } #home-slider .slide[data-caption-bg-color="none"] .columns .h1-slogan, #home-slider .slide[data-caption-bg-color="none"] .columns .h2-slogan, #home-slider .slide[data-caption-bg-color="none"] .columns .h3-slogan, #home-slider .slide[data-caption-bg-color="none"] .columns .h4-slogan { margin-right: -40px; } #home-hero .trapezium-bg::before { display: none; } #home-hero .trapezium-bg::after { right: 0; } #home-hero .trapezium-bg span { border-top-width: 345px; /* must be equal to #home-hero height */ border-right: none; } #home-slider .cycle-pager .container { padding: 0; text-align: center; } #home-slider .cycle-pager span { display: inline-block; float: none; margin: 6px; } } /*-----------------------------------------------------------------------------------*/ /* 4. Hero Image & Page Title /*-----------------------------------------------------------------------------------*/ #hero-image { position: relative; width: 100%; margin-right: auto; margin-left: auto; overflow: hidden; } /* Image background in the page header */ #hero-image.image-bg, #hero-image.image-bg .slide { height: 276px; /* possible max value - 460px */ } #hero-image.image-bg .slide { width: 100%; background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: 100% auto; } .ie9 #hero-image.image-bg .slide { background-attachment: scroll; background-position: center 40%; } /* Images --------------------------------------------------- */ /* NOTE: All hero images for pages should be set in custom.css */ #hero-image.image-bg .container, #hero-image.image-bg .row { height: 100%; } #hero-image.image-bg .columns { position: relative; float: left; width: auto; min-width: 200px; max-width: 50%; height: 100%; margin-left: -680px; padding-left: 695px; padding-right: 96px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* Gradient background in the page header */ #hero-image.gradient-bg, #hero-image.gradient-bg .banner-gradient { height: 160px; max-height: 170px; } #hero-image.gradient-bg .banner-gradient { width: 100%; background-image: url(../images/backgrounds/blue/header-gradient-bg.png); background-position: center top; background-repeat: no-repeat; background-size: auto; } #hero-image.gradient-bg .container, #hero-image.gradient-bg .row, #hero-image.gradient-bg .columns { height: 100%; } /* Page Title --------------------------------------------------- */ #hero-image .page-title-wrapper { position: relative; display: table; height: 100%; z-index: 2; } #hero-image .page-title { display: table-cell; } /* for image background */ #hero-image.image-bg .page-title { vertical-align: bottom; padding-bottom: 33px; } #hero-image.image-bg h1 { color: #fff; margin-bottom: 0; } #hero-image.image-bg h5 { font-weight: normal; color: #f5cb87; margin-bottom: 0; } /* for gradient background */ #hero-image.gradient-bg .page-title { vertical-align: middle; padding-top: 30px; padding-bottom: 10px; } #hero-image.gradient-bg h1 { font-size: 32px; line-height: 1.2; font-weight: 400; color: #1f2438; margin-bottom: 0; } #hero-image.gradient-bg h1:last-child { /* page title contains only heading */ margin-bottom: 20px; } #hero-image.gradient-bg .page-title .post-meta { margin-top: 7px; } #hero-image.gradient-bg .page-title .post-date { color: #666; } #hero-image.gradient-bg .page-title .post-category a { color: #d99a36; margin-left: 10px; } #hero-image.gradient-bg .page-title .post-category a:hover { text-decoration: underline; } /* Page title background */ #hero-image.image-bg .trapezium-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } #hero-image.image-bg .trapezium-bg::before { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: url(../images/backgrounds/hero-image-triangle-bg.png) no-repeat right bottom; z-index: 5; } #hero-image.image-bg .trapezium-bg::after { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 160px; /* 160px = 8/23 * 460px */ content: ""; background: url(../images/backgrounds/sq-dense-pattern.png) repeat right top; z-index: 4; } #hero-image.image-bg .trapezium-bg span { position: absolute; display: block; top: 0; left: 0; right: 0; height: 0; border-bottom: 276px solid #73798c; /* must be equal to #hero-image height */ border-right: 96px solid transparent; /* 96px = 8/23 * 276px */ border-right-color: transparent !important; opacity: 0.55; } /* Media queries --------------------------------------------------- */ /* for high-resolution devices */ @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) { #hero-image.image-bg .trapezium-bg::before { background-image: url(../images/backgrounds/hero-image-triangle-bg-2x.png); background-size: 160px 460px; } #hero-image.image-bg .trapezium-bg::after { background-image: url(../images/backgrounds/sq-dense-pattern-2x.png); background-size: 9px 9px; } } @media (min-width: 1920px) { #hero-image.image-bg .slide { background-size: 1920px auto; } #hero-image.image-bg, #hero-image.image-bg .slide { height: 460px; } #hero-image.image-bg .trapezium-bg span { border-bottom-width: 460px; /* must be equal to #hero-image height */ border-right-width: 160px; /* 160px = 8/23 * 460px */ } } @media (min-width: 1520px) and (max-width: 1919px) { #hero-image.image-bg, #hero-image.image-bg .slide { height: 391px; } #hero-image.image-bg .trapezium-bg span { border-bottom-width: 391px; /* must be equal to #hero-image height */ border-right-width: 136px; /* 136px = 8/23 * 391px */ } } @media (max-width: 1199px) { #hero-image.image-bg .slide { background-attachment: scroll; } } @media (min-width: 992px) and (max-width: 1199px) { #hero-image.image-bg, #hero-image.image-bg .slide { height: 299px; } #hero-image.image-bg .slide { background-position: center 40%; } #hero-image.image-bg .columns { padding-right: 70px; } #hero-image.image-bg .page-title { padding-bottom: 25px; } #hero-image.image-bg h1 { font-size: 36px; } #hero-image.image-bg h5 { font-size: 18px; } #hero-image.image-bg .trapezium-bg span { border-bottom-width: 299px; /* must be equal to #hero-image height */ border-right-width: 104px; /* 104px = 8/23 * 299px */ } } @media (min-width: 768px) and (max-width: 991px) { #hero-image.image-bg .slide { background-position: center; background-size: cover; } #hero-image.image-bg .columns { padding-right: 70px; } #hero-image.image-bg .page-title { padding-bottom: 25px; } #hero-image.image-bg h1 { font-size: 36px; } #hero-image.image-bg h5 { font-size: 18px; } #hero-image.gradient-bg .page-title { padding-top: 25px; padding-bottom: 15px; } #hero-image.gradient-bg h1 { font-size: 30px; } #hero-image.gradient-bg h1:last-child { margin-bottom: 10px; } } @media (max-width: 767px) { #hero-image.image-bg .slide { background-position: center; background-size: cover; } #hero-image.image-bg .columns { min-width: 130px; } #hero-image.image-bg .page-title { padding-bottom: 20px; } #hero-image.image-bg h1 { font-size: 25px; line-height: 1.2; } #hero-image.image-bg h5 { font-size: 14px; } #hero-image.gradient-bg, #hero-image.gradient-bg .banner-gradient { height: auto; } #hero-image.gradient-bg .page-title { padding-top: 25px; padding-bottom: 20px; } #hero-image.gradient-bg h1 { font-size: 27px; } #hero-image.gradient-bg h1:last-child { margin: 5px 0 10px; } } @media (min-width: 480px) and (max-width: 767px) { #hero-image.image-bg, #hero-image.image-bg .slide { height: 207px; } #hero-image.image-bg .columns { padding-right: 50px; } #hero-image.image-bg .trapezium-bg span { border-bottom-width: 207px; /* must be equal to #hero-image height */ border-right-width: 72px; /* 72px = 8/23 * 207px */ } } @media (max-width: 479px) { #hero-image.image-bg, #hero-image.image-bg .slide { height: 184px; } #hero-image.image-bg .columns { max-width: 60%; padding-right: 40px; } #hero-image.image-bg .trapezium-bg span { border-bottom-width: 184px; /* must be equal to #hero-image height */ border-right-width: 64px; /* 64px = 8/23 * 184px */ } #hero-image.gradient-bg, #hero-image.gradient-bg .banner-gradient { max-height: none; } #hero-image.gradient-bg .banner-gradient { background-size: cover; } #hero-image.gradient-bg h1 { font-size: 25px; } } /*-----------------------------------------------------------------------------------*/ /* 5. Stripe Sections /*-----------------------------------------------------------------------------------*/ .stripe { position: relative; margin: 60px 0; padding: 80px 0; } .stripe-bottom { margin: 60px 0 -45px; padding: 70px 0 55px; } #page-content.sidebar-layout .stripe-bottom { margin-top: 0; } .stripe-narrow { padding: 50px 0; } .stripe + .stripe { margin-top: -60px; } #page-content > .stripe:first-child { margin-top: -70px; padding-top: 70px; } #page-content > .stripe-narrow:first-child { margin-top: -50px; padding-top: 50px; } #page-content > .container:first-child + .stripe-transparent-bg, #page-content > .container:first-child + .stripe-white-bg { margin-top: -30px; } #page-content > .container:first-child { z-index: 2; } /* For category navigation below the page title area */ #page-content > .stripe-category-nav:first-child { margin-top: -70px; padding: 25px 0; } @media (max-width: 767px) { #page-content > .stripe:first-child, #page-content > .stripe-narrow:first-child { margin-top: -50px; padding-top: 50px; } #page-content > .stripe-category-nav:first-child { margin-top: -50px; padding: 25px 0 30px; } } /* Slogan text in the bottom stripe */ .stripe-bottom > .container > .row > .columns p.lead-text-large:first-child:last-child { margin-bottom: 15px; } .stripe > .container > .row:last-child > .columns > p:last-child, .stripe > .container > .row:last-child > .columns > ul:last-child, .stripe > .container > .row:last-child > .columns > ol:last-child, .stripe > .container > .row:last-child > .columns > blockquote:last-child, #main-content .stripe > .row:last-child > .columns > p:last-child, #main-content .stripe > .row:last-child > .columns > ul:last-child, #main-content .stripe > .row:last-child > .columns > ol:last-child, #main-content .stripe > .row:last-child > .columns > blockquote:last-child { margin-bottom: 0; } .stripe-transparent-bg + .stripe-transparent-bg, .stripe-transparent-bg + .stripe-white-bg, .stripe-white-bg + .stripe-transparent-bg, .stripe-white-bg + .stripe-white-bg { padding-top: 0; } /* White gradients at the top and bottom of transparent stripe section */ @media (min-width: 992px) { .stripe-transparent-bg::before, .stripe-transparent-bg::after { position: absolute; display: block; right: 0; width: 100%; height: 100px; content: ""; z-index: -1; } .stripe-transparent-bg::before { top: 0; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); } .stripe-transparent-bg::after { bottom: 0; background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); } #page-content > .stripe-transparent-bg:first-child::before, #page-content > .container:first-child + .stripe-transparent-bg::before, .stripe-transparent-bg + .stripe-transparent-bg::before { display: none; } } /* Upper background layer */ .stripe .stripe-upper-bg { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; } .stripe .stripe-upper-bg::before, .stripe .stripe-upper-bg::after { position: absolute; display: block; left: 0; width: 100%; height: 50px; content: ""; } /* Solid backgrounds: - light grey - white - primary color - secondary color - pale --------------------------------------------------- */ .stripe-light-grey-bg { background-color: #fff; } .stripe-white-bg { background-color: #fff; } .stripe-primary-color-bg { background-color: #60698a; } .stripe-secondary-color-bg { background-color: #ebac46; } .stripe-pale-bg { background-color: #f2f1ed; } /* Bars at the bottom of stripe with light grey or pale background - light bars - dark bars */ .stripe-light-grey-bg.bottom-bars-light, .stripe-pale-bg.bottom-bars-light { background-image: -webkit-linear-gradient(bottom, #ececec, rgba(245, 245, 245, 0) 180px); background-image: -o-linear-gradient(bottom, #ececec, rgba(245, 245, 245, 0) 180px); background-image: linear-gradient(to top, #ececec, rgba(245, 245, 245, 0) 180px); padding-bottom: 115px; } .stripe-light-grey-bg.bottom-bars-light .stripe-upper-bg, .stripe-pale-bg.bottom-bars-light .stripe-upper-bg { background: url(../images/backgrounds/bars-bg-light.png) repeat-x; background-position: left bottom; } .stripe-light-grey-bg.bottom-bars-light.stripe-narrow, .stripe-pale-bg.bottom-bars-light.stripe-narrow { background-image: -webkit-linear-gradient(bottom, #ececec, rgba(245, 245, 245, 0) 100px); background-image: -o-linear-gradient(bottom, #ececec, rgba(245, 245, 245, 0) 100px); background-image: linear-gradient(to top, #ececec, rgba(245, 245, 245, 0) 100px); padding-bottom: 90px; } .stripe-light-grey-bg.bottom-bars-light.stripe-narrow .stripe-upper-bg, .stripe-pale-bg.bottom-bars-light.stripe-narrow .stripe-upper-bg { background-position: left bottom; background-position: left bottom -25px; } .stripe-light-grey-bg.bottom-bars-dark, .stripe-pale-bg.bottom-bars-dark { padding-bottom: 115px; } .stripe-light-grey-bg.bottom-bars-dark .stripe-upper-bg, .stripe-pale-bg.bottom-bars-dark .stripe-upper-bg { background: url(../images/backgrounds/bars-bg-dark.png) repeat-x; background-position: left bottom; } .stripe-light-grey-bg.bottom-bars-dark.stripe-narrow, .stripe-pale-bg.bottom-bars-dark.stripe-narrow { padding-bottom: 90px; } .stripe-light-grey-bg.bottom-bars-dark.stripe-narrow .stripe-upper-bg, .stripe-pale-bg.bottom-bars-dark.stripe-narrow .stripe-upper-bg { background-position: left bottom; background-position: left bottom -25px; } /* Page layout with right-aligned sidebar: pale or light grey backgrounds - gradient or solid --------------------------------------------------- */ @media (min-width: 992px) { #main-content.page-left-col .stripe-pale-gradient-bg { background-color: #f2f1ed; background: -webkit-linear-gradient(right, rgba(242, 241, 237, 0), #f2f1ed 400px); background: -o-linear-gradient(right, rgba(242, 241, 237, 0), #f2f1ed 400px); background: linear-gradient(to left, rgba(242, 241, 237, 0), #f2f1ed 400px); /* #f2f1ed */ padding: 60px 0 60px 595px; margin: 50px 0 65px -595px; } #main-content.page-left-col .stripe-light-grey-gradient-bg { background-color: #f5f5f5; background: -webkit-linear-gradient(right, rgba(245, 245, 245, 0), #f5f5f5 400px); background: -o-linear-gradient(right, rgba(245, 245, 245, 0), #f5f5f5 400px); background: linear-gradient(to left, rgba(245, 245, 245, 0), #f5f5f5 400px); padding: 60px 0 60px 595px; margin: 50px 0 65px -595px; } #main-content.page-left-col .stripe-pale-bg, #main-content.page-left-col .stripe-light-grey-bg, .ie9 #main-content.page-left-col .stripe-pale-gradient-bg, .ie9 #main-content.page-left-col .stripe-light-grey-gradient-bg { padding: 60px 50px 60px 595px; margin: 50px 0 65px -595px; } } @media (max-width: 991px) { #main-content.page-left-col .stripe-pale-gradient-bg, #main-content.page-left-col .stripe-pale-bg { background-color: #f2f1ed; padding: 60px 136px; margin-left: -136px; margin-right: -136px; } #main-content.page-left-col .stripe-light-grey-gradient-bg, #main-content.page-left-col .stripe-light-grey-bg { background-color: #f5f5f5; padding: 60px 136px; margin-left: -136px; margin-right: -136px; } } /* Light bars at the bottom of stripe with pale or light grey background */ #main-content.page-left-col .stripe-pale-gradient-bg.bottom-bars-light, #main-content.page-left-col .stripe-light-grey-gradient-bg.bottom-bars-light { padding-bottom: 90px; } #main-content .stripe-pale-gradient-bg.bottom-bars-light .stripe-upper-bg, #main-content .stripe-light-grey-gradient-bg.bottom-bars-light .stripe-upper-bg { background: url(../images/backgrounds/bars-bg-light.png) repeat-x; background-position: left bottom; background-position: left bottom -25px; } /* Default/custom background image --------------------------------------------------- */ /* Default background image (different for each color scheme) */ .stripe-default-bg-image { background-image: url(../images/backgrounds/blue/stripe-default-bg-image.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; } /* Custom background image */ .stripe-custom-bg-image { background-position: center; background-size: auto; background-repeat: no-repeat; } .stripe-custom-bg-image.stripe-bg-size-cover { background-size: cover; } /* NOTE: Images for the "Custom Background Image" stripe section should be set in custom.css */ /* Upper background layer: - transparent (primary color) - gradient (2 colors - primary & secondary) --------------------------------------------------- */ .stripe-upper-bg-transparent .stripe-upper-bg { background-color: #5d6275; opacity: 0.8; } .stripe-upper-bg-gradient .stripe-upper-bg { background-color: rgba(93, 98, 117, 0.75); /* #5d6275 */ background: -webkit-linear-gradient(135deg, rgba(93, 98, 117, 0.8), rgba(93, 98, 117, 0.5)); background: -o-linear-gradient(135deg, rgba(93, 98, 117, 0.8), rgba(93, 98, 117, 0.5)); background: linear-gradient(135deg, rgba(93, 98, 117, 0.8), rgba(93, 98, 117, 0.5)); /* #5d6275 */ } .stripe-upper-bg-gradient .stripe-upper-bg::before { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(135deg, rgba(235, 172, 70, 0), rgba(235, 172, 70, 0.7)); background-image: -o-linear-gradient(135deg, rgba(235, 172, 70, 0), rgba(235, 172, 70, 0.7)); background-image: linear-gradient(135deg, rgba(235, 172, 70, 0), rgba(235, 172, 70, 0.7)); /* #ebac46 */ content: ""; } /* Pattern image backgrounds: - light grey pattern - dark colored pattern --------------------------------------------------- */ .stripe-light-grey-pattern-bg .stripe-upper-bg { background-color: #f5f5f5; background-image: url(../images/backgrounds/pattern-bg-light-grey.jpg); background-position: center top; background-size: auto; } .stripe-light-grey-pattern-bg .stripe-upper-bg::after { bottom: 0; background-image: -webkit-linear-gradient(bottom, rgba(229, 229, 229, 0.5), rgba(229, 229, 229, 0)); background-image: -o-linear-gradient(bottom, rgba(229, 229, 229, 0.5), rgba(229, 229, 229, 0)); background-image: linear-gradient(to top, rgba(229, 229, 229, 0.5), rgba(229, 229, 229, 0)); /* #e5e5e5 */ } .stripe-dark-colored-pattern-bg { background-color: rgba(62, 77, 135, 0.85); /* #3e4d87 */ background: -webkit-linear-gradient(135deg, rgba(62, 77, 135, 0.15), rgba(62, 77, 135, 0.9) 35%, rgba(62, 77, 135, 0.9) 65%, rgba(62, 77, 135, 0.15)); background: -o-linear-gradient(135deg, rgba(62, 77, 135, 0.15), rgba(62, 77, 135, 0.9) 35%, rgba(62, 77, 135, 0.9) 65%, rgba(62, 77, 135, 0.15)); background: linear-gradient(135deg, rgba(62, 77, 135, 0.15), rgba(62, 77, 135, 0.9) 35%, rgba(62, 77, 135, 0.9) 65%, rgba(62, 77, 135, 0.15)); /* #3e4d87 */ } .stripe-dark-colored-pattern-bg::before { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(135deg, rgba(235, 172, 70, 0.4), rgba(235, 172, 70, 0) 35%, rgba(235, 172, 70, 0) 65%, rgba(235, 172, 70, 0.4)); background-image: -o-linear-gradient(135deg, rgba(235, 172, 70, 0.4), rgba(235, 172, 70, 0) 35%, rgba(235, 172, 70, 0) 65%, rgba(235, 172, 70, 0.4)); background-image: linear-gradient(135deg, rgba(235, 172, 70, 0.4), rgba(235, 172, 70, 0) 35%, rgba(235, 172, 70, 0) 65%, rgba(235, 172, 70, 0.4)); /* #ebac46 */ content: ""; z-index: 1; } .stripe-dark-colored-pattern-bg::after { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: url(../images/backgrounds/sq-dense-pattern.png) repeat left top; z-index: 2; } .stripe-dark-colored-pattern-bg .stripe-upper-bg { background-color: #616161; background-image: url(../images/backgrounds/pattern-bg-dark-grey.png); background-position: center 25%; background-size: auto; opacity: 0.65; z-index: 3; } .stripe-dark-colored-pattern-bg .container { z-index: 4; } @media (max-width: 767px) { .stripe-dark-colored-pattern-bg .stripe-upper-bg { background-position: center top; background-size: cover; } } /* Dark colored gradient background --------------------------------------------------- */ .stripe-dark-colored-gradient-bg { background-color: #5d6275; background: #5f73c2 -webkit-linear-gradient(135deg, rgba(93, 98, 117, 0), #5d6275 30%, #5d6275 70%, rgba(93, 98, 117, 0)); background: #5f73c2 -o-linear-gradient(135deg, rgba(93, 98, 117, 0), #5d6275 30%, #5d6275 70%, rgba(93, 98, 117, 0)); background: #5f73c2 linear-gradient(135deg, rgba(93, 98, 117, 0), #5d6275 30%, #5d6275 70%, rgba(93, 98, 117, 0)); /* #5d6275 */ } .stripe-dark-colored-gradient-bg .stripe-upper-bg { background-image: -webkit-linear-gradient(135deg, rgba(235, 172, 70, 0.4), rgba(235, 172, 70, 0) 30%, rgba(235, 172, 70, 0) 70%, rgba(235, 172, 70, 0.4)); background-image: -o-linear-gradient(135deg, rgba(235, 172, 70, 0.4), rgba(235, 172, 70, 0) 30%, rgba(235, 172, 70, 0) 70%, rgba(235, 172, 70, 0.4)); background-image: linear-gradient(135deg, rgba(235, 172, 70, 0.4), rgba(235, 172, 70, 0) 30%, rgba(235, 172, 70, 0) 70%, rgba(235, 172, 70, 0.4)); /* #ebac46 */ } /* Diagonal lines and diagonal pinstripe - optional background patterns for "dark colored" backgrounds */ .stripe.diagonal-lines-bg .stripe-upper-bg::after, .stripe.diagonal-pinstripe-bg .stripe-upper-bg::after { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: url(../images/backgrounds/diag-lines-pattern.svg) repeat left top; opacity: 0.2; } .stripe.diagonal-pinstripe-bg .stripe-upper-bg::after { background-image: url(../images/backgrounds/diag-pinstripe-pattern.svg); } /* Wordgram background image: - on the left side - at the top of stripe --------------------------------------------------- */ .stripe-wordgram-bg-top .stripe-upper-bg { background-image: url(../images/backgrounds/wordgram-bg-top.png); background-position: center top; background-size: auto; background-repeat: repeat-x; } @media (min-width: 768px) { .stripe-wordgram-bg-left .stripe-upper-bg { background-image: url(../images/backgrounds/wordgram-bg-left.png); background-position: left -360px top; background-size: auto; } } @media (min-width: 1921px) { .stripe-wordgram-bg-left .stripe-upper-bg { background-position: left -115px top; } } @media (min-width: 1520px) and (max-width: 1920px) { .stripe-wordgram-bg-left .stripe-upper-bg { background-position: left calc(50vw - 1075px) top; } } @media (min-width: 1200px) and (max-width: 1519px) { .stripe-wordgram-bg-left .stripe-upper-bg { background-position: left calc(50vw - 1000px) top; } } @media (min-width: 992px) and (max-width: 1199px) { .stripe-wordgram-bg-left .stripe-upper-bg { background-position: left -436px top; } } @media (min-width: 768px) and (max-width: 991px) { .stripe-wordgram-bg-left .stripe-upper-bg { background-position: left -480px top; } } /* Full-width image in stripe's left column --------------------------------------------------- */ @media (max-width: 991px) { .stripe-left-col-fullwidth-image { background-color: transparent !important; padding: 0; } .stripe-left-col-fullwidth-image .columns:first-child { width: auto; margin: 0; /* fallback */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; } .stripe-left-col-fullwidth-image .columns:last-child { width: auto; margin: 0; /* fallback */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 60px 15px 70px; /* fallback */ padding: 60px calc(50vw - 50% + 15px) 70px; padding-top: 60px !important; } .stripe-left-col-fullwidth-image.stripe-primary-color-bg .columns:last-child { background-color: #60698a; } .stripe-left-col-fullwidth-image.stripe-secondary-color-bg .columns:last-child { background-color: #ebac46; } .stripe-left-col-fullwidth-image.stripe-light-grey-bg .columns:last-child { background-color: #f5f5f5; } .stripe-left-col-fullwidth-image.stripe-pale-bg .columns:last-child { background-color: #f2f1ed; } } @media (min-width: 992px) { .stripe-left-col-fullwidth-image { min-height: 400px; overflow: hidden; } .stripe-left-col-fullwidth-image .columns:first-child { padding-right: 0; } .stripe-left-col-fullwidth-image .columns:last-child { padding-left: 55px; } .stripe-left-col-fullwidth-image figure { position: relative; margin: -80px -30px -80px calc(100% - 50vw); } .stripe-left-col-fullwidth-image.stripe-narrow figure { margin-top: -50px; margin-bottom: -50px; } .stripe-left-col-fullwidth-image figure::after { position: absolute; display: block; top: 0; right: 0; width: 0; height: 0; content: ""; border-bottom: 920px solid transparent; border-left: 160px solid transparent; /* width/height ratio = 4/23 */ } .stripe-left-col-fullwidth-image.stripe-primary-color-bg figure::after { border-bottom-color: #60698a; } .stripe-left-col-fullwidth-image.stripe-secondary-color-bg figure::after { border-bottom-color: #ebac46; } .stripe-left-col-fullwidth-image.stripe-light-grey-bg figure::after { border-bottom-color: #f5f5f5; } .stripe-left-col-fullwidth-image.stripe-pale-bg figure::after { border-bottom-color: #f2f1ed; } .stripe-left-col-fullwidth-image figure img { position: absolute; right: 0; top: 0; } } @media (min-width: 992px) and (max-width: 1199px) { .stripe-left-col-fullwidth-image { padding: 60px 0; } .stripe-left-col-fullwidth-image figure { margin-right: -50px; } .stripe-left-col-fullwidth-image figure img { max-width: 150%; } } @media (min-width: 1200px) and (max-width: 1359px) { .stripe-left-col-fullwidth-image { padding: 70px 0; } .stripe-left-col-fullwidth-image figure img { max-width: 115%; } } @media (min-width: 1520px) { .stripe-left-col-fullwidth-image { min-height: 520px; } .stripe-left-col-fullwidth-image figure { margin-right: -20px; } } /* Full-width grey background in stripe's left/right column --------------------------------------------------- */ @media (max-width: 991px) { .stripe-left-col-fullwidth-grey, .stripe-right-col-fullwidth-grey { background-color: transparent; padding: 0 !important; } .stripe-left-col-fullwidth-grey .columns:first-child, .stripe-right-col-fullwidth-grey .columns:last-child { background-color: #e5e5e5; } .stripe-left-col-fullwidth-grey .columns:first-child, .stripe-left-col-fullwidth-grey .columns:last-child, .stripe-right-col-fullwidth-grey .columns:first-child, .stripe-right-col-fullwidth-grey .columns:last-child { width: auto; margin: 0; /* fallback */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 70px 15px; /* fallback */ padding: 70px calc(50vw - 50% + 15px); } .stripe-left-col-fullwidth-grey .columns, .stripe-right-col-fullwidth-grey .columns { padding-top: 70px !important; } .stripe-left-col-fullwidth-grey.stripe-narrow .columns, .stripe-right-col-fullwidth-grey.stripe-narrow .columns { padding-top: 50px !important; padding-bottom: 50px; } .stripe-left-col-fullwidth-grey.stripe-primary-color-bg .columns:last-child, .stripe-right-col-fullwidth-grey.stripe-primary-color-bg .columns:first-child { background-color: #60698a; } .stripe-left-col-fullwidth-grey.stripe-secondary-color-bg .columns:last-child, .stripe-right-col-fullwidth-grey.stripe-secondary-color-bg .columns:first-child { background-color: #ebac46; } } @media (min-width: 992px) { .stripe-left-col-fullwidth-grey .row { background: url(../images/backgrounds/col-left-grey-bg-ie9.png) repeat-y center top; background: -webkit-linear-gradient(left, #e5e5e5 50%, transparent 50%); background: -o-linear-gradient(left, #e5e5e5 50%, transparent 50%); background: linear-gradient(to right, #e5e5e5 50%, transparent 50%); } .stripe-right-col-fullwidth-grey .row { background: url(../images/backgrounds/col-right-grey-bg-ie9.png) repeat-y center top; background: -webkit-linear-gradient(right, #e5e5e5 50%, transparent 50%); background: -o-linear-gradient(right, #e5e5e5 50%, transparent 50%); background: linear-gradient(to left, #e5e5e5 50%, transparent 50%); } .stripe-left-col-fullwidth-grey .row, .stripe-right-col-fullwidth-grey .row { margin: -80px calc(50% - 50vw); padding: 80px calc(50vw - 50% - 15px); } .stripe-left-col-fullwidth-grey.stripe-narrow .row, .stripe-right-col-fullwidth-grey.stripe-narrow .row, .stripe-left-col-fullwidth-grey.stripe-bottom.stripe-narrow .row, .stripe-right-col-fullwidth-grey.stripe-bottom.stripe-narrow .row { margin-top: -50px; margin-bottom: -50px; padding-top: 50px; padding-bottom: 50px; } .stripe-left-col-fullwidth-grey.stripe-bottom .row, .stripe-right-col-fullwidth-grey.stripe-bottom .row { margin-top: -70px; margin-bottom: -70px; padding-top: 70px; padding-bottom: 70px; } } /* V-shaped notch at the top of stripe --------------------------------------------------- */ .stripe.v-notch::after { position: absolute; left: 50%; top: 0; width: 0; height: 0; margin-left: -35px; content: ""; border-top: 25px solid #fff; border-left: 35px solid transparent; border-right: 35px solid transparent; } .stripe.v-notch.v-notch-stick-heading::after { display: none; } .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { position: absolute; left: 0; top: -80px; width: 0; height: 0; content: ""; border-top: 25px solid #fff; border-left: 35px solid transparent; border-right: 35px solid transparent; } .stripe-narrow.v-notch.v-notch-stick-heading .columns:first-child::before { top: -50px; } @media (max-width: 767px) { .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { left: 23px; } .stripe-upper-bg-gradient + .stripe.v-notch::after, .stripe-upper-bg-gradient + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { display: none; } } .stripe-light-grey-bg + .stripe.v-notch::after, .stripe-light-grey-bg + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { border-top-color: #f5f5f5; } .stripe-primary-color-bg + .stripe.v-notch::after, .stripe-primary-color-bg + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { border-top-color: #60698a; } .stripe-secondary-color-bg + .stripe.v-notch::after, .stripe-secondary-color-bg + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { border-top-color: #ebac46; } .stripe-pale-bg + .stripe.v-notch::after, .stripe-pale-bg + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { border-top-color: #f2f1ed; } .stripe-upper-bg-transparent + .stripe.v-notch::after, .stripe-dark-colored-gradient-bg + .stripe.v-notch::after, .stripe-dark-colored-pattern-bg + .stripe.v-notch::after, .stripe-upper-bg-transparent + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .stripe-dark-colored-gradient-bg + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .stripe-dark-colored-pattern-bg + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { border-top-color: #5d6275; } .stripe-light-grey-gradient-bg + .stripe.v-notch::after, .stripe-pale-gradient-bg + .stripe.v-notch::after, .stripe.bottom-bars-light + .stripe.v-notch::after, .stripe.bottom-bars-dark + .stripe.v-notch::after, .stripe-upper-bg-gradient + .stripe.v-notch::after, .stripe-light-grey-pattern-bg + .stripe.v-notch::after, .stripe-left-col-fullwidth-image + .stripe.v-notch::after, .stripe-left-col-fullwidth-grey + .stripe.v-notch::after, .stripe-right-col-fullwidth-grey + .stripe.v-notch::after, .stripe-light-grey-gradient-bg + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .stripe-pale-gradient-bg + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .stripe.bottom-bars-light + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .stripe.bottom-bars-dark + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .stripe-upper-bg-gradient + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .stripe-light-grey-pattern-bg + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .stripe-left-col-fullwidth-image + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .stripe-left-col-fullwidth-grey + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .stripe-right-col-fullwidth-grey + .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { display: none; } /*-----------------------------------------------------------------------------------*/ /* 6. Picture Boxes /*-----------------------------------------------------------------------------------*/ .picture-boxes article { position: relative; margin-top: 45px; } .picture-boxes .row:first-child article { margin-top: 0; } .picture-boxes > article:first-child { margin-top: 0; } .picture-boxes.centered-content article { text-align: center; } .picture-boxes.centered-content .box-image { margin-left: auto; margin-right: auto; } .picture-boxes .box-image { line-height: 0; } .picture-boxes .box-image img { display: inline; } .picture-boxes .box-text { margin-top: 20px; } .picture-boxes article h4 { line-height: 1.33; margin-bottom: 0; } .picture-boxes article h5 { line-height: 1.38; margin-bottom: 0; font-size: 20px; } .picture-boxes article h6 { line-height: 1.47; margin-bottom: 0; } .picture-boxes:not(.recent-posts) article h6:not(.text-uppercase) { font-size: 21px; line-height: 1.33; } .picture-boxes .box-text .title a { padding: 5px 0; } .picture-boxes .box-text p { font-size: 16px; line-height: 1.625; margin: 10px 0 0; } .picture-boxes .box-text p em { font-size: 19px; } .picture-boxes .box-text h6 + p { margin-top: 7px; } .picture-boxes.short-description .box-text p { margin-top: 3px; } .picture-boxes .box-text .button { margin-top: 20px; } .picture-boxes .box-text .read-more-link { margin-top: 10px; } /* Round image */ .picture-boxes.round-image .box-image { position: relative; width: 75%; max-width: 360px; } .picture-boxes.round-image .box-image img { -webkit-border-radius: 50%; border-radius: 50%; } .picture-boxes.round-image .columns[class*="col-"][class*="-3"] .box-image { /* 4 columns */ max-width: 260px; } .picture-boxes.round-image .box-text { margin-top: 25px; } /* for dark colored background */ .dark-colored-bg .picture-boxes .box-image img { border: 2px solid rgba(255, 255, 255, 0.3); -webkit-transition: border-color 0.15s ease; -o-transition: border-color 0.15s ease; transition: border-color 0.15s ease; } .dark-colored-bg .picture-boxes.round-image .box-image img { border-width: 4px; } .dark-colored-bg .picture-boxes .box-image a:hover img { border-color: rgba(255, 255, 255, 0.5); } .dark-colored-bg .picture-boxes .box-text .title, .dark-colored-bg .picture-boxes .box-text .title a { color: #fff; } .dark-colored-bg .picture-boxes .box-text .title a:hover { color: #d9e0ff; } .dark-colored-bg .picture-boxes .box-text p { color: #fff; color: rgba(255, 255, 255, 0.8); } /* for secondary color background */ .stripe-secondary-color-bg .picture-boxes.round-image .box-image::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.7); content: ""; } .stripe-secondary-color-bg .picture-boxes .box-text .title, .stripe-secondary-color-bg .picture-boxes .box-text .title a { color: #664b1f; } .stripe-secondary-color-bg .picture-boxes .box-text .title a:hover { color: #333; } .stripe-secondary-color-bg .picture-boxes .box-text p { color: #fff; } /* Box with overlaid title */ .picture-boxes.overlaid-title article { text-align: center; } .picture-boxes.overlaid-title .box-image { margin-left: auto; margin-right: auto; } .picture-boxes.overlaid-title .box-text { margin: 0 0 -20px; } .picture-boxes.overlaid-title .box-text a { position: relative; display: block; top: -20px; left: 0; right: 0; width: 75%; height: 40px; margin-left: auto; margin-right: auto; padding: 0 10px; font: 16px/40px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #fff; background-color: #3e4d87; text-transform: uppercase; overflow: hidden; } .picture-boxes.overlaid-title .box-text a:hover { color: #fff; background-color: #5f73c2; } /* Box with filled background */ .picture-boxes.box-filled-bg { margin-top: -30px; } .picture-boxes.box-filled-bg article { margin-top: 30px; background-color: #f9f9f9; background-image: -webkit-linear-gradient(top, rgba(218, 221, 232, 0.4), rgba(218, 221, 232, 0) 300px); background-image: -o-linear-gradient(top, rgba(218, 221, 232, 0.4), rgba(218, 221, 232, 0) 300px); background-image: linear-gradient(to bottom, rgba(218, 221, 232, 0.4), rgba(218, 221, 232, 0) 300px); /* #dadde8 */ padding: 40px 0 35px; text-align: center; } .picture-boxes.box-filled-bg .row:first-child article { margin-top: 30px; } .picture-boxes.box-filled-bg article::after { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; content: ""; border: 2px solid transparent; -webkit-transition: border-color 0.3s ease; -o-transition: border-color 0.3s ease; transition: border-color 0.3s ease; z-index: 3; } .no-touch-screen .picture-boxes.box-filled-bg a:hover > article::after { border-color: #f5ae3d; } .picture-boxes.box-filled-bg .box-image { position: relative; width: 75%; max-width: 360px; margin-left: auto; margin-right: auto; z-index: 1; } .picture-boxes.box-filled-bg .box-image img { -webkit-border-radius: 50%; border-radius: 50%; } .picture-boxes.box-filled-bg .box-text { position: relative; height: 175px; background-color: #f9f9f9; margin-top: -35px; overflow: hidden; z-index: 2; } .picture-boxes.box-filled-bg .box-text::after { position: absolute; display: block; left: 0; bottom: 0; width: 100%; height: 20px; content: ""; background-image: -webkit-linear-gradient(bottom, #f9f9f9, rgba(249, 249, 249, 0)); background-image: -o-linear-gradient(bottom, #f9f9f9, rgba(249, 249, 249, 0)); background-image: linear-gradient(to top, #f9f9f9, rgba(249, 249, 249, 0)); } .picture-boxes.box-filled-bg .box-text .title { background-color: rgba(218, 221, 232, 0.2); /* #dadde8 */ background: -webkit-linear-gradient(left, rgba(218, 221, 232, 0.1), rgba(218, 221, 232, 0.3) 50%, rgba(218, 221, 232, 0)); background: -o-linear-gradient(left, rgba(218, 221, 232, 0.1), rgba(218, 221, 232, 0.3) 50%, rgba(218, 221, 232, 0)); background: linear-gradient(to right, rgba(218, 221, 232, 0.1), rgba(218, 221, 232, 0.3) 50%, rgba(218, 221, 232, 0)); /* #dadde8 */ padding: 15px 25px 12px; -webkit-transition: color 0.15s ease; -o-transition: color 0.15s ease; transition: color 0.15s ease; } .no-touch-screen .picture-boxes.box-filled-bg a:hover > article .box-text .title { color: #606680; } .picture-boxes.box-filled-bg .box-text p { margin: 15px 25px 0; } /* Media queries --------------------------------------------------- */ @media (min-width: 1520px) { /* small column space */ .picture-boxes.small-col-space { margin: 0 -10px; } .picture-boxes.small-col-space article { margin-left: 10px; margin-right: 10px; } /* medium column space */ .picture-boxes.medium-col-space { margin: 0 -15px; } .picture-boxes.medium-col-space article { margin-left: 15px; margin-right: 15px; } } @media (min-width: 1200px) and (max-width: 1519px) { .picture-boxes.small-col-space { margin: 0 -7px; } .picture-boxes.small-col-space article { margin-left: 7px; margin-right: 7px; } .picture-boxes.medium-col-space { margin: 0 -10px; } .picture-boxes.medium-col-space article { margin-left: 10px; margin-right: 10px; } } @media (min-width: 992px) { .picture-boxes.box-filled-bg .columns[class*="col-"][class*="-4"]:nth-child(even) article { /* 3 columns */ background-image: -webkit-linear-gradient(top, rgba(245, 203, 135, 0.15), rgba(245, 203, 135, 0) 300px); background-image: -o-linear-gradient(top, rgba(245, 203, 135, 0.15), rgba(245, 203, 135, 0) 300px); background-image: linear-gradient(to bottom, rgba(245, 203, 135, 0.15), rgba(245, 203, 135, 0) 300px); /* #f5cb87 */ } } @media (min-width: 992px) and (max-width: 1199px) { .picture-boxes.small-col-space { margin: 0 -3px; } .picture-boxes.small-col-space article { margin-left: 3px; margin-right: 3px; } .picture-boxes.medium-col-space { margin: 0 -5px; } .picture-boxes.medium-col-space article { margin-left: 5px; margin-right: 5px; } .dark-colored-bg .picture-boxes.round-image .columns[class*="col-"][class*="-3"] .box-image { /* 4 columns */ width: 85%; } /* overlaid title */ .picture-boxes.overlaid-title .box-text { margin-bottom: -19px; } .picture-boxes.overlaid-title .box-text a { top: -19px; width: 80%; height: 38px; font-size: 15px; line-height: 38px; } } @media (min-width: 768px) and (max-width: 991px) { /* for long description in .box-text - 4 columns >> 1 column */ .picture-boxes .col-sm-12.col-md-3 article { margin-top: 45px !important; text-align: left; } .picture-boxes .row:first-child .col-sm-12.col-md-3:first-child article { margin-top: 0 !important; } .picture-boxes .col-sm-12.col-md-3 .box-image { display: table-cell; width: 250px !important; } .picture-boxes.round-image .col-sm-12.col-md-3 .box-image { width: 150px !important; } .picture-boxes.round-image .col-sm-12.col-md-3 .box-image .image-overlay { height: 150px; } .picture-boxes .col-sm-12.col-md-3 .box-text { display: table-cell; vertical-align: middle; margin-top: 0; padding-left: 30px; padding-bottom: 15px; } /* for short description in .box-text - 4 columns >> 2 columns */ .picture-boxes .col-sm-6.col-md-3 article { margin-top: 45px !important; } .picture-boxes.round-image .col-sm-6.col-md-3 article { text-align: left; } .picture-boxes .row:first-child .col-sm-6.col-md-3:nth-child(1) article, .picture-boxes .row:first-child .col-sm-6.col-md-3:nth-child(2) article { margin-top: 0 !important; } .picture-boxes.round-image .col-sm-6.col-md-3 .box-image { float: left; width: 150px !important; } .picture-boxes.round-image .col-sm-6.col-md-3 .box-text { margin: 0 0 0 175px; padding-top: 25px; } /* overlaid title */ .picture-boxes.overlaid-title .box-text { margin-bottom: -16px; } .picture-boxes.overlaid-title .box-text a { top: -16px; width: 85%; height: 32px; font-size: 13px; line-height: 32px; padding: 0 7px; } /* box with filled background - 3 columns >> 2 columns */ .picture-boxes.box-filled-bg .col-sm-6.col-md-4:nth-child(4n+2) article, .picture-boxes.box-filled-bg .col-sm-6.col-md-4:nth-child(4n+3) article { background-image: -webkit-linear-gradient(top, rgba(245, 203, 135, 0.15), rgba(245, 203, 135, 0) 300px); background-image: -o-linear-gradient(top, rgba(245, 203, 135, 0.15), rgba(245, 203, 135, 0) 300px); background-image: linear-gradient(to bottom, rgba(245, 203, 135, 0.15), rgba(245, 203, 135, 0) 300px); /* #f5cb87 */ } } @media (max-width: 767px) { .picture-boxes article, .picture-boxes .row:first-child article { margin-top: 45px; } .picture-boxes .row:first-child .columns:first-child article { margin-top: 0; } .picture-boxes:not(.owl-carousel):not(.round-image) article { max-width: 540px; /* the width is limited to 540px */ margin-right: auto; margin-left: auto; } /* box with filled background */ .picture-boxes.box-filled-bg { margin-top: 0; } .picture-boxes.box-filled-bg .box-text { height: auto; overflow: visible; } .picture-boxes.box-filled-bg .box-text::after { display: none; } .picture-boxes.box-filled-bg .columns:nth-child(even) article { background-image: -webkit-linear-gradient(top, rgba(245, 203, 135, 0.15), rgba(245, 203, 135, 0) 300px); background-image: -o-linear-gradient(top, rgba(245, 203, 135, 0.15), rgba(245, 203, 135, 0) 300px); background-image: linear-gradient(to bottom, rgba(245, 203, 135, 0.15), rgba(245, 203, 135, 0) 300px); /* #f5cb87 */ } } @media (min-width: 480px) and (max-width: 767px) { .picture-boxes:not(.owl-carousel):not(.round-image) .columns { padding-left: 15%; padding-right: 15%; } .picture-boxes:not(.owl-carousel).round-image article { text-align: left; } .picture-boxes:not(.owl-carousel).round-image .box-image { display: table-cell; width: 150px !important; } .picture-boxes:not(.owl-carousel).round-image .box-image .image-overlay { height: 150px; } .picture-boxes:not(.owl-carousel).round-image .box-text { display: table-cell; vertical-align: middle; padding-left: 30px; padding-bottom: 15px; } /* overlaid title */ .picture-boxe.overlaid-title .box-text { margin-bottom: -19px; } .picture-boxes.overlaid-title .box-text a { top: -19px; height: 38px; font-size: 15px; line-height: 38px; } /* box with filled background */ .picture-boxes.box-filled-bg .columns { padding-left: 10%; padding-right: 10%; } } @media (max-width: 479px) { /* overlaid title */ .picture-boxes.overlaid-title .box-text { margin-bottom: -17px; } .picture-boxes.overlaid-title .box-text a { top: -17px; width: 80%; height: 34px; font-size: 14px; line-height: 34px; } } /*-----------------------------------------------------------------------------------*/ /* 7. Icon Boxes /*-----------------------------------------------------------------------------------*/ .icon-boxes article { position: relative; margin-top: 45px; } .icon-boxes .row:first-child article { margin-top: 0; } .icon-boxes article h4 { line-height: 1.33; margin-bottom: 0; } .icon-boxes article h5 { line-height: 1.38; margin-bottom: 0; font-size: 22px; } .icon-boxes article h6 { line-height: 1.47; margin-bottom: 0; } .icon-boxes article h6:not(.text-uppercase) { font-size: 21px; line-height: 1.33; } .icon-boxes .box-text .title a { padding: 5px 0; } .icon-boxes .box-text p { font-size: 16px; line-height: 1.625; margin: 10px 0 0; } .icon-boxes .box-text p em { font-size: 19px; } .icon-boxes .box-text h6 + p { margin-top: 7px; } .icon-boxes.short-description .box-text p { margin-top: 3px; } .icon-boxes .box-text .button { margin-top: 20px; } .icon-boxes .box-text .read-more-link { margin-top: 10px; } /* for dark colored background */ .dark-colored-bg .icon-boxes .box-text .title, .dark-colored-bg .icon-boxes .box-text .title a { color: #fff; } .dark-colored-bg .icon-boxes .box-text .title a:hover { color: #d9e0ff; } .dark-colored-bg .icon-boxes .box-text p { color: #fff; color: rgba(255, 255, 255, 0.8); } .ion-fw { /* fixed width for Ionicons */ width: 1.2em; text-align: center; } /* Box with top icon --------------------------------------------------- */ .icon-boxes.top-icon-box article { text-align: center; } .icon-boxes.top-icon-box .box-text { margin-top: 20px; } /* Large icon on round background */ .icon-boxes.top-icon-box.icon-large-round-bg .box-icon { position: relative; width: 140px; height: 140px; margin-left: auto; margin-right: auto; background-color: #ebac46; border: 15px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon::before { position: absolute; display: block; top: -15px; bottom: -15px; left: -15px; right: -15px; border: 15px solid rgba(245, 203, 135, 0.5); /* #f5cb87 */ -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; content: ""; } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon.secondary-color-bg, .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon.secondary-color-bg { background-color: #ebac46; } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon.secondary-color-bg::before, .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon.secondary-color-bg::before { border-color: rgba(245, 203, 135, 0.5); /* #f5cb87 */ } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon.primary-color-bg, .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon.primary-color-bg { background-color: #8d92a6; } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon.primary-color-bg::before, .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon.primary-color-bg::before { border-color: #dadde8; } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon a { position: relative; display: block; width: 100%; height: 100%; } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon:hover::before { opacity: 0.8; } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon i, .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon i { position: absolute; display: block; top: 50%; left: 50%; line-height: 1; color: #fff; } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon .fa { /* vector icons - Font Awesome */ font-size: 56px; margin-top: -28px; margin-left: -36px; /* 72px - fixed width (.fa-fw) */ } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon .ion { /* vector icons - Ionicons */ font-size: 70px; margin-top: -35px; margin-left: -42px; /* 84px - fixed width (.ion-fw) */ } /* Medium icon on round background */ .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon { position: relative; width: 100px; height: 100px; margin-left: auto; margin-right: auto; background-color: #8d92a6; border: 10px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; } .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon::before { position: absolute; display: block; top: -10px; bottom: -10px; left: -10px; right: -10px; border: 10px solid #dadde8; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; content: ""; } .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon a { position: relative; display: block; width: 100%; height: 100%; } .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon:hover::before { opacity: 0.8; } .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon .fa { /* vector icons - Font Awesome */ font-size: 42px; margin-top: -21px; margin-left: -27px; /* 54px - fixed width (.fa-fw) */ } .icon-boxes.top-icon-box.icon-medium-round-bg .box-icon .ion { /* vector icons - Ionicons */ font-size: 52px; margin-top: -26px; margin-left: -31px; /* 62px - fixed width (.ion-fw) */ } /* Number at the left top of circle background */ .icon-boxes.top-icon-box.icon-large-round-bg.number-icon-box .box-icon .digit, .icon-boxes.top-icon-box.icon-medium-round-bg.number-icon-box .box-icon .digit { position: relative; display: block; top: -10px; left: -10px; width: 38px; height: 38px; font: 18px/32px Verdana, Geneva, sans-serif; color: #fff; border: 3px solid #f5f5f5; text-align: center; background-color: #8d92a6; -webkit-border-radius: 50%; border-radius: 50%; } .icon-boxes.top-icon-box.icon-medium-round-bg.number-icon-box .box-icon .digit { width: 32px; height: 32px; font-size: 17px; line-height: 28px; border-width: 2px; } /* Large icon without background */ .icon-boxes.top-icon-box.icon-large .box-icon { position: relative; height: 90px; } .icon-boxes.top-icon-box.icon-large .box-icon i, .icon-boxes.top-icon-box.icon-small .box-icon i, .icon-boxes.top-icon-box.box-filled-bg .box-icon i { position: absolute; display: block; top: 50%; left: 50%; line-height: 1; } .icon-boxes.top-icon-box.icon-large .box-icon .fa { /* vector icons - Font Awesome */ font-size: 76px; margin-top: -38px; margin-left: -49px; /* 98px - fixed width (.fa-fw) */ } .icon-boxes.top-icon-box.icon-large .box-icon .ion { /* vector icons - Ionicons */ font-size: 90px; margin-top: -45px; margin-left: -54px; /* 108px - fixed width (.ion-fw) */ } .icon-boxes.top-icon-box.icon-large .box-icon.primary-color i, .icon-boxes.top-icon-box.icon-small .box-icon.primary-color i { color: #5f73c2; } .icon-boxes.top-icon-box.icon-large .box-icon.primary-color-dark i, .icon-boxes.top-icon-box.icon-small .box-icon.primary-color-dark i { color: #3e4d87; } .icon-boxes.top-icon-box.icon-large .box-icon.primary-color-light i, .icon-boxes.top-icon-box.icon-small .box-icon.primary-color-light i { color: #8d92a6; } .icon-boxes.top-icon-box.icon-large .box-icon.secondary-color i, .icon-boxes.top-icon-box.icon-small .box-icon.secondary-color i { color: #ebac46; } .icon-boxes.top-icon-box.icon-large .box-text, .icon-boxes.top-icon-box.icon-small .box-text { margin-top: 15px; } /* Small icon without background */ .icon-boxes.top-icon-box.icon-small .box-icon { position: relative; height: 42px; } .icon-boxes.top-icon-box.icon-small .box-icon .fa { /* vector icons - Font Awesome */ font-size: 36px; margin-top: -18px; margin-left: -23px; /* 46px - fixed width (.fa-fw) */ } .icon-boxes.top-icon-box.icon-small .box-icon .ion { /* vector icons - Ionicons */ font-size: 42px; margin-top: -21px; margin-left: -25px; /* 50px - fixed width (.ion-fw) */ } /* Box with left icon --------------------------------------------------- */ .icon-boxes.left-icon-box article { margin-top: 40px; } .icon-boxes.left-icon-box .row:first-child article { margin-top: 0; } .icon-boxes.left-icon-box > article:first-child { margin-top: 0; } /* Small icon on round background */ .icon-boxes.left-icon-box.icon-small-round-bg .box-icon { position: relative; float: left; width: 70px; height: 70px; background-color: #ebac46; -webkit-border-radius: 50%; border-radius: 50%; margin-top: 3px; } .icon-boxes.left-icon-box.icon-small-round-bg .box-icon.secondary-color-bg { background-color: #ebac46; } .icon-boxes.left-icon-box.icon-small-round-bg .box-icon.primary-color-bg { background-color: #8d92a6; } .icon-boxes.left-icon-box.icon-small-round-bg .box-icon i { position: absolute; display: block; top: 50%; left: 50%; line-height: 1; color: #fff; } .icon-boxes.left-icon-box.icon-small-round-bg .box-icon .fa { /* vector icons - Font Awesome */ font-size: 34px; margin-top: -17px; margin-left: -22px; /* 44px - fixed width (.fa-fw) */ } .icon-boxes.left-icon-box.icon-small-round-bg .box-icon .ion { /* vector icons - Ionicons */ font-size: 38px; margin-top: -19px; margin-left: -23px; /* 46px - fixed width (.ion-fw) */ } .icon-boxes.left-icon-box.icon-small-round-bg .box-text { margin-left: 100px; } /* Large icon without background */ .icon-boxes.left-icon-box.icon-large .box-icon { position: relative; float: left; width: 108px; height: 90px; } .icon-boxes.left-icon-box.icon-large .box-icon i, .icon-boxes.left-icon-box.icon-medium .box-icon i, .icon-boxes.left-icon-box.icon-heading .box-icon i, .icon-boxes.left-icon-box.box-filled-bg .box-icon i { position: absolute; display: block; top: 50%; left: 50%; line-height: 1; } .icon-boxes.left-icon-box.icon-large .box-icon .fa { /* vector icons - Font Awesome */ font-size: 76px; margin-top: -38px; margin-left: -49px; /* 98px - fixed width (.fa-fw) */ } .icon-boxes.left-icon-box.icon-large .box-icon .ion { /* vector icons - Ionicons */ font-size: 90px; margin-top: -45px; margin-left: -54px; /* 108px - fixed width (.ion-fw) */ } .icon-boxes.left-icon-box.icon-large .box-icon.primary-color i, .icon-boxes.left-icon-box.icon-medium .box-icon.primary-color i, .icon-boxes.left-icon-box.icon-heading .box-icon.primary-color i, .icon-boxes.left-icon-box.box-filled-bg .box-icon.primary-color i { color: #5f73c2; } .icon-boxes.left-icon-box.icon-large .box-icon.primary-color-dark i, .icon-boxes.left-icon-box.icon-medium .box-icon.primary-color-dark i, .icon-boxes.left-icon-box.icon-heading .box-icon.primary-color-dark i, .icon-boxes.left-icon-box.box-filled-bg .box-icon.primary-color-dark i { color: #3e4d87; } .icon-boxes.left-icon-box.icon-large .box-icon.primary-color-light i, .icon-boxes.left-icon-box.icon-medium .box-icon.primary-color-light i, .icon-boxes.left-icon-box.icon-heading .box-icon.primary-color-light i, .icon-boxes.left-icon-box.box-filled-bg .box-icon.primary-color-light i { color: #8d92a6; } .icon-boxes.left-icon-box.icon-large .box-icon.secondary-color i, .icon-boxes.left-icon-box.icon-medium .box-icon.secondary-color i, .icon-boxes.left-icon-box.icon-heading .box-icon.secondary-color i, .icon-boxes.left-icon-box.box-filled-bg .box-icon.secondary-color i { color: #ebac46; } .icon-boxes.left-icon-box.icon-large .box-text { margin-left: 123px; } /* Medium icon without background */ .icon-boxes.left-icon-box.icon-medium article { margin-top: 30px; } .icon-boxes.left-icon-box.icon-medium > article:first-child { margin-top: 0; } .icon-boxes.left-icon-box.icon-medium .box-icon { position: relative; float: left; width: 62px; height: 52px; } .icon-boxes.left-icon-box.icon-medium .box-icon .fa, /* vector icons - Font Awesome */ .icon-boxes.left-icon-box.icon-heading .box-icon .fa { font-size: 42px; margin-top: -21px; margin-left: -27px; /* 54px - fixed width (.fa-fw) */ } .icon-boxes.left-icon-box.icon-medium .box-icon .ion, /* vector icons - Ionicons */ .icon-boxes.left-icon-box.icon-heading .box-icon .ion { font-size: 52px; margin-top: -26px; margin-left: -31px; /* 62px - fixed width (.ion-fw) */ } .icon-boxes.left-icon-box.icon-medium .box-text { margin-left: 77px; } /* Icon in box heading */ .icon-boxes.left-icon-box.icon-heading article { margin-top: 35px; } .icon-boxes.left-icon-box.icon-heading > article:first-child { margin-top: 0; } .icon-boxes.left-icon-box.icon-heading article header { position: relative; height: 52px; } .icon-boxes.left-icon-box.icon-heading .box-icon { position: relative; left: -7px; width: 62px; height: 52px; } .icon-boxes.left-icon-box.icon-heading .box-heading { position: absolute; top: 50%; left: 65px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } .icon-boxes.left-icon-box.icon-heading article p { margin: 20px 0 0; } .icon-boxes.left-icon-box.icon-heading article header + p { margin-top: 15px; } /* Box with filled background */ .icon-boxes.left-icon-box.box-filled-bg { margin-top: -30px; } .icon-boxes.left-icon-box.box-filled-bg article { height: 122px; margin-top: 30px; padding: 30px 25px; background-color: #f9f9f9; border: 2px solid transparent; -webkit-transition: border-color 0.3s ease; -o-transition: border-color 0.3s ease; transition: border-color 0.3s ease; } .icon-boxes.left-icon-box.box-filled-bg .row:first-child article { margin-top: 30px; } .no-touch-screen .icon-boxes.left-icon-box.box-filled-bg a:hover > article { border-color: #f5ae3d; } .icon-boxes.left-icon-box.box-filled-bg .box-icon { position: relative; width: 70px; height: 58px; } .icon-boxes.left-icon-box.box-filled-bg .box-icon .fa { /* vector icons - Font Awesome */ font-size: 48px; margin-top: -24px; margin-left: -31px; /* 62px - fixed width (.fa-fw) */ } .icon-boxes.left-icon-box.box-filled-bg .box-icon .ion { /* vector icons - Ionicons */ font-size: 58px; margin-top: -29px; margin-left: -35px; /* 70px - fixed width (.ion-fw) */ } .icon-boxes.left-icon-box.box-filled-bg .box-text { position: absolute; top: 50%; left: 105px; right: 25px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } .icon-boxes.left-icon-box.box-filled-bg .box-text p { line-height: 1.25; margin-top: 2px; } /* Media queries --------------------------------------------------- */ @media (min-width: 1520px) { /* small column space */ .icon-boxes.small-col-space { margin: 0 -10px; } .icon-boxes.small-col-space article { margin-left: 10px; margin-right: 10px; } /* medium column space */ .icon-boxes.medium-col-space { margin: 0 -15px; } .icon-boxes.medium-col-space article { margin-left: 15px; margin-right: 15px; } } @media (min-width: 1200px) and (max-width: 1519px) { .icon-boxes.small-col-space { margin: 0 -7px; } .icon-boxes.small-col-space article { margin-left: 7px; margin-right: 7px; } .icon-boxes.medium-col-space { margin: 0 -10px; } .icon-boxes.medium-col-space article { margin-left: 10px; margin-right: 10px; } } @media (min-width: 992px) { .icon-boxes.left-icon-box.box-filled-bg .columns[class*="col-"][class*="-4"]:nth-child(odd) article { /* 3 columns */ background-color: #f2f1ed; } } @media (min-width: 992px) and (max-width: 1199px) { .icon-boxes.small-col-space { margin: 0 -3px; } .icon-boxes.small-col-space article { margin-left: 3px; margin-right: 3px; } .icon-boxes.medium-col-space { margin: 0 -5px; } .icon-boxes.medium-col-space article { margin-left: 5px; margin-right: 5px; } } @media (max-width: 991px) { .icon-boxes.top-icon-box.icon-large-round-bg .box-icon { width: 110px; height: 110px; border-width: 10px; } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon::before { top: -10px; bottom: -10px; left: -10px; right: -10px; border-width: 10px; } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon .fa { /* vector icons - Font Awesome */ font-size: 42px; margin-top: -21px; margin-left: -27px; /* 54px - fixed width (.fa-fw) */ } .icon-boxes.top-icon-box.icon-large-round-bg .box-icon .ion { /* vector icons - Ionicons */ font-size: 52px; margin-top: -26px; margin-left: -31px; /* 62px - fixed width (.ion-fw) */ } .icon-boxes.top-icon-box .box-text { margin-top: 15px; } .icon-boxes.top-icon-box.icon-large-round-bg.number-icon-box .box-icon .digit { width: 34px; height: 34px; font-size: 17px; line-height: 30px; border-width: 2px; } } @media (min-width: 768px) { .icon-boxes.left-icon-box.box-filled-bg .col-sm-6:not(.col-md-4):nth-child(4n+0) article, .icon-boxes.left-icon-box.box-filled-bg .col-sm-6:not(.col-md-4):nth-child(4n+1) article { background-color: #f2f1ed; } } @media (min-width: 768px) and (max-width: 991px) { /* 2 columns >> 1 column */ .icon-boxes.left-icon-box .col-sm-12.col-md-6 article { margin-top: 35px !important; } .icon-boxes.left-icon-box.icon-medium .col-sm-12.col-md-6 article { margin-top: 30px !important; } .icon-boxes.left-icon-box .row:first-child .col-sm-12.col-md-6:first-child article { margin-top: 0 !important; } /* box with filled background - 3 columns >> 2 columns */ .icon-boxes.left-icon-box.box-filled-bg .col-sm-6.col-md-4:nth-child(4n+0) article, .icon-boxes.left-icon-box.box-filled-bg .col-sm-6.col-md-4:nth-child(4n+1) article { background-color: #f2f1ed; } } @media (max-width: 767px) { .icon-boxes article, .icon-boxes.left-icon-box article, .icon-boxes .row:first-child article, .icon-boxes.left-icon-box .row:first-child article { margin-top: 35px; } .icon-boxes.left-icon-box.icon-medium article, .icon-boxes.left-icon-box.icon-medium .row:first-child article { margin-top: 30px; } .icon-boxes .row:first-child .columns:first-child article, .icon-boxes.left-icon-box.icon-medium .row:first-child .columns:first-child article { margin-top: 0; } /* box with filled background */ .icon-boxes.left-icon-box.box-filled-bg { margin-top: 0; } .icon-boxes.left-icon-box.box-filled-bg .columns:nth-child(odd) article { background-color: #f2f1ed; } } @media (min-width: 480px) and (max-width: 767px) { .icon-boxes:not(.owl-carousel).top-icon-box article { text-align: left; } .icon-boxes:not(.owl-carousel).top-icon-box .box-icon { float: left; margin: 0; } .icon-boxes:not(.owl-carousel).top-icon-box.icon-large .box-icon { width: 108px; } .icon-boxes:not(.owl-carousel).top-icon-box.icon-small .box-icon { width: 50px; } .icon-boxes:not(.owl-carousel).top-icon-box.icon-large-round-bg .box-text { margin: 5px 0 0 135px; } .icon-boxes:not(.owl-carousel).top-icon-box.icon-medium-round-bg .box-text { margin: 5px 0 0 125px; } .icon-boxes:not(.owl-carousel).top-icon-box.icon-large .box-text { margin: 5px 0 0 123px; } .icon-boxes:not(.owl-carousel).top-icon-box.icon-small .box-text { margin: 0 0 0 65px; } } @media (max-width: 479px) { .icon-boxes.left-icon-box.icon-small-round-bg article, .icon-boxes.left-icon-box.icon-large article, .icon-boxes.left-icon-box.icon-medium article { text-align: center; } .icon-boxes.left-icon-box.icon-small-round-bg .box-icon, .icon-boxes.left-icon-box.icon-large .box-icon, .icon-boxes.left-icon-box.icon-medium .box-icon { float: none; margin: 0 auto; } .icon-boxes.left-icon-box.icon-small-round-bg .box-text, .icon-boxes.left-icon-box.icon-large .box-text, .icon-boxes.left-icon-box.icon-medium .box-text { margin: 15px 0 0; } .icon-boxes.left-icon-box.icon-small-round-bg .box-text h4 + p, .icon-boxes.left-icon-box.icon-small-round-bg .box-text h5 + p { margin-top: 15px; } } /*-----------------------------------------------------------------------------------*/ /* 8. Stages /*-----------------------------------------------------------------------------------*/ .stages article { position: relative; margin-top: 50px; } .stages > article:first-child { margin-top: 0; } .stages article::before { position: absolute; display: block; top: 77px; bottom: -43px; left: 34px; width: 2px; background-color: rgba(245, 203, 135, 0.5); /* #f5cb87 */ content: ""; } .stages.stage-digit article::before { top: 67px; left: 29px; } .stages article:last-child::before { display: none; } .stages article h4 { line-height: 1.33; margin-bottom: 0; } .stages article h5 { line-height: 1.38; margin-bottom: 0; } .stages article h6 { line-height: 1.47; margin-bottom: 0; } .stages article h6:not(.text-uppercase) { font-size: 21px; line-height: 1.33; } .stages .box-text p { font-size: 16px; line-height: 1.625; margin: 10px 0 0; } .stages .box-text p em { font-size: 17px; } .stages .box-text h6 + p { margin-top: 7px; } .stages.short-description .box-text p { margin-top: 3px; } /* for dark colored background */ .dark-colored-bg .stages .box-text .title { color: #fff; } .dark-colored-bg .stages .box-text p { color: #fff; color: rgba(255, 255, 255, 0.8); } .stages .box-icon { position: relative; float: left; width: 70px; height: 70px; background-color: #8d92a6; border: 7px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; } .stages .box-icon::before { position: absolute; display: block; top: -7px; bottom: -7px; left: -7px; right: -7px; border: 7px solid #dadde8; -webkit-border-radius: 50%; border-radius: 50%; content: ""; } .stages.stage-digit .box-icon { width: 60px; height: 60px; } .stages .box-icon.primary-color-bg { background-color: #8d92a6; } .stages .box-icon.primary-color-bg::before { border-color: #dadde8; } .stages .box-icon.secondary-color-bg { background-color: #ebac46; } .stages .box-icon.secondary-color-bg::before { border-color: rgba(245, 203, 135, 0.5); /* #f5cb87 */ } .stages .box-icon i { position: absolute; display: block; top: 50%; left: 50%; line-height: 1; color: #fff; } .stages.stage-year .box-icon .number, /* year - XXXX */ .stages.stage-digit .box-icon .number { /* digit - X */ top: 0; left: 0; width: 100%; font: 600 17px/56px "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; /* or font-size: 15px; */ text-align: center; } .stages.stage-digit .box-icon .number { font-size: 20px; line-height: 46px; } .stages .box-icon .fa { /* vector icons - Font Awesome */ font-size: 28px; margin-top: -14px; margin-left: -18px; /* 36px - fixed width (.fa-fw) */ } .stages .box-icon .ion { /* vector icons - Ionicons */ font-size: 32px; margin-top: -16px; margin-left: -19px; /* 38px - fixed width (.ion-fw) */ } .stages .box-text { margin-left: 100px; } .stages.stage-digit .box-text { margin-left: 85px; } /* Media queries --------------------------------------------------- */ @media (max-width: 767px) { .stages article { margin-top: 45px; } } @media (max-width: 479px) { .stages article { text-align: center; line-height: 0; } .stages article::before, .stages.stage-digit article::before { position: relative; display: inline-block; top: -7px; left: auto; height: 25px; margin-top: -25px; } .stages article:first-child::before { display: none; } .stages article:last-child::before { display: inline-block; } .stages .box-icon { float: none; margin: 0 auto; } .stages .box-text, .stages.stage-digit .box-text { margin: 15px 0 0; } .stages .box-text h4 + p, .stages .box-text h5 + p { margin-top: 15px; } } /*-----------------------------------------------------------------------------------*/ /* 9. Feature List /*-----------------------------------------------------------------------------------*/ .feature-list article { position: relative; margin-top: 25px; } .feature-list .row:first-child article { margin-top: 0; } .feature-list > article:first-child { margin-top: 0; } .feature-list article h4 { font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: normal; margin: -3px 0 0; } .feature-list article h5 { line-height: 1.38; margin-bottom: 0; } .feature-list article h6 { line-height: 1.47; margin-bottom: 0; } .feature-list .box-text p { margin: 10px 0 0; } .feature-list .box-text ul { margin: 15px 0 0; } .feature-list .box-text h6 + p { margin-top: 5px; } .feature-list.short-description .box-text p { margin-top: 3px; } /* for dark colored background */ .dark-colored-bg .feature-list .box-text .title { color: #fff; } .dark-colored-bg .feature-list .box-text p { color: #fff; color: rgba(255, 255, 255, 0.8); } /* Numeric list */ .feature-list.numeric-list .box-icon { position: relative; float: left; width: 36px; height: 36px; background-color: #f5ae3d; -webkit-border-radius: 50%; border-radius: 50%; margin-top: 0; } .feature-list.numeric-list .box-icon.secondary-color-bg { background-color: #f5ae3d; } .feature-list.numeric-list .box-icon.primary-color-bg { background-color: #8d92a6; } .feature-list.numeric-list .box-icon i, .feature-list.check-list .box-icon i, .feature-list.arrow-list .box-icon i { position: absolute; display: block; top: 50%; left: 50%; line-height: 1; } .feature-list.numeric-list .box-icon i { color: #fff; } .feature-list.numeric-list .box-icon .number { top: 0; left: 0; width: 100%; font: 18px/36px Verdana, Geneva, sans-serif; text-align: center; } .feature-list.numeric-list .box-text { margin-left: 52px; } /* Check list */ .feature-list.check-list .box-icon { position: relative; float: left; width: 37px; height: 37px; border: 1px solid #f5ae3d; -webkit-border-radius: 50%; border-radius: 50%; margin-top: 5px; } .feature-list.check-list .box-icon.secondary-color-bg { border-color: #f5ae3d; } .feature-list.check-list .box-icon i, .feature-list.check-list .box-icon.secondary-color-bg i { color: #d99a36; } .feature-list.check-list .box-icon.primary-color-bg { border-color: #8d92a6; } .feature-list.check-list .box-icon.primary-color-bg i { color: #8d92a6; } .feature-list.check-list .box-icon .fa { /* vector icons - Font Awesome */ font-size: 18px; margin-top: -9px; margin-left: -11px; /* 23px - fixed width (.fa-fw) */ } .feature-list.check-list .box-icon .ion { /* vector icons - Ionicons */ font-size: 19px; margin-top: -10px; margin-left: -10px; /* 23px - fixed width (.ion-fw) */ } .feature-list.check-list .box-text { margin-left: 50px; } .feature-list.check-list .box-text p { line-height: 1.625; } .feature-list.check-list .box-text h4 + p, .feature-list.check-list .box-text h6 + p { margin-top: 3px; } .feature-list.check-list .box-text h5 + p { margin-top: 5px; } /* Arrow list */ .feature-list.arrow-list .box-icon { position: relative; float: left; left: -6px; width: 26px; height: 22px; margin-top: 5px; } .feature-list.arrow-list .box-icon i, .feature-list.arrow-list .box-icon.extra-color i { color: #ed5f4a; } .feature-list.arrow-list .box-icon.primary-color i { color: #b8bfd9; } .feature-list.arrow-list .box-icon.secondary-color i { color: #ebac46; } .feature-list.arrow-list .box-icon .fa { /* vector icons - Font Awesome */ font-size: 20px; margin-top: -10px; margin-left: -13px; /* 26px - fixed width (.fa-fw) */ } .feature-list.arrow-list .box-icon .ion { /* vector icons - Ionicons */ font-size: 22px; margin-top: -11px; margin-left: -13px; /* 26px - fixed width (.ion-fw) */ } .feature-list.arrow-list .box-text { margin-left: 28px; } .feature-list.arrow-list .box-text h4 { margin-top: -5px; } .feature-list.arrow-list .box-text h5 { margin-top: -2px; } /* Media queries --------------------------------------------------- */ @media (min-width: 1520px) { /* small column space */ .feature-list.small-col-space { margin: 0 -10px; } .feature-list.small-col-space article { margin-left: 10px; margin-right: 10px; } /* medium column space */ .feature-list.medium-col-space { margin: 0 -15px; } .feature-list.medium-col-space article { margin-left: 15px; margin-right: 15px; } } @media (min-width: 1200px) and (max-width: 1519px) { .feature-list.small-col-space { margin: 0 -7px; } .feature-list.small-col-space article { margin-left: 7px; margin-right: 7px; } .feature-list.medium-col-space { margin: 0 -10px; } .feature-list.medium-col-space article { margin-left: 10px; margin-right: 10px; } } @media (min-width: 992px) and (max-width: 1199px) { .feature-list.small-col-space { margin: 0 -3px; } .feature-list.small-col-space article { margin-left: 3px; margin-right: 3px; } .feature-list.medium-col-space { margin: 0 -5px; } .feature-list.medium-col-space article { margin-left: 5px; margin-right: 5px; } } @media (min-width: 768px) and (max-width: 991px) { /* 2/3 columns >> 1 column */ .feature-list .col-sm-12.col-md-6 article, .feature-list .col-sm-12.col-md-4 article { margin-top: 25px !important; } .feature-list .row:first-child .col-sm-12.col-md-6:first-child article, .feature-list .row:first-child .col-sm-12.col-md-4:first-child article { margin-top: 0 !important; } } @media (max-width: 767px) { .feature-list .row:first-child article { margin-top: 25px; } .feature-list .row:first-child .columns:first-child article { margin-top: 0; } } /*-----------------------------------------------------------------------------------*/ /* 10. Carousel Plugin /*-----------------------------------------------------------------------------------*/ .owl-carousel.picture-boxes article, .owl-carousel.icon-boxes article { margin-top: 0 !important; } .owl-carousel.picture-boxes .owl-item img { display: inline; width: auto; } /* dots navigation */ .owl-carousel.owl-theme .owl-dots, .owl-carousel.owl-theme .owl-nav.disabled + .owl-dots { margin: 20px 0 -9px; } .owl-carousel.owl-theme .owl-dots .owl-dot.active span, .owl-carousel.owl-theme .owl-dots .owl-dot:hover span { background-color: #8d92a6; } /* next/prev buttons */ .owl-carousel.owl-theme .owl-nav { position: absolute; top: 50%; width: 100%; margin-top: -47px; } .owl-carousel.owl-theme[data-dots="false"] .owl-nav { margin-top: -22px; } .owl-carousel.owl-theme .owl-nav [class*='owl-'] { position: absolute; width: 44px; height: 44px; line-height: 1; margin: 0; padding: 0; background-color: #e5e5e5; border: 2px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; opacity: 0.7; } .owl-carousel.owl-theme .owl-nav [class*='owl-']:hover { background-color: #eee; opacity: 1; } .owl-carousel.owl-theme .owl-nav .owl-prev { left: -35px; } .owl-carousel.owl-theme .owl-nav .owl-next { right: -35px; } .owl-carousel.owl-theme .owl-nav [class*='owl-']::before { display: block; font-family: Ionicons; font-size: 28px; line-height: 1; color: #8d92a6; margin-top: 6px; } .owl-carousel.owl-theme .owl-nav .owl-prev::before { content: "\f3cf"; } .owl-carousel.owl-theme .owl-nav .owl-next::before { content: "\f3d1"; } /* for dark colored background */ .dark-colored-bg .owl-carousel.owl-theme .owl-dots .owl-dot span { background-color: #8d92a6; } .dark-colored-bg .owl-carousel.owl-theme .owl-dots .owl-dot.active span, .dark-colored-bg .owl-carousel.owl-theme .owl-dots .owl-dot:hover span { background-color: #b8bfd9; } .dark-colored-bg .owl-carousel.owl-theme .owl-nav [class*='owl-'] { width: 40px; height: 40px; background-color: rgba(229, 229, 229, 0.8); border: none; opacity: 0.5; } .dark-colored-bg .owl-carousel.owl-theme .owl-nav [class*='owl-']:hover { background-color: rgba(229, 229, 229, 0.8); opacity: 0.8; } .dark-colored-bg .owl-carousel.owl-theme .owl-nav [class*='owl-']::before { margin-top: 6px; } /* for secondary color background */ .stripe-secondary-color-bg .owl-carousel.owl-theme .owl-dots .owl-dot span { background-color: rgba(102, 75, 31, 0.3); /* #664b1f */ } .stripe-secondary-color-bg .owl-carousel.owl-theme .owl-dots .owl-dot.active span, .stripe-secondary-color-bg .owl-carousel.owl-theme .owl-dots .owl-dot:hover span { background-color: #664b1f; } .stripe-secondary-color-bg .owl-carousel.owl-theme .owl-nav [class*='owl-'] { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.7); border: none; opacity: 0.5; } .stripe-secondary-color-bg .owl-carousel.owl-theme .owl-nav [class*='owl-']:hover { background-color: rgba(255, 255, 255, 0.7); opacity: 0.8; } .stripe-secondary-color-bg .owl-carousel.owl-theme .owl-nav [class*='owl-']::before { color: #664b1f; margin-top: 6px; } /* Image Slider --------------------------------------------------- */ /* dots navigation */ .owl-carousel.image-slider .owl-dots { position: absolute; right: 0; bottom: 0; margin: 0 15px 3px 0; } .owl-carousel.image-slider .owl-dots .owl-dot span { background: none; border: 2px solid #fff; -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3); } .owl-carousel.image-slider .owl-dots .owl-dot.active span, .owl-carousel.image-slider .owl-dots .owl-dot:hover span { background: #fff !important; } /* next/prev buttons */ .owl-carousel.image-slider .owl-nav, .owl-carousel.image-slider[data-dots="false"] .owl-nav { margin-top: -36px; } .owl-carousel.image-slider .owl-nav [class*='owl-'] { width: 36px; height: 72px; background-color: rgba(0, 0, 0, 0.3); border: none; -webkit-transition: opacity 0.3s, background 0.15s; -o-transition: opacity 0.3s, background 0.15s; transition: opacity 0.3s, background 0.15s; } .owl-carousel.image-slider .owl-stage-outer:hover + .owl-nav [class*='owl-'] { opacity: 1; } .owl-carousel.image-slider .owl-nav [class*='owl-']:hover { background-color: rgba(245, 203, 135, 0.5); /* #f5cb87 */ } .owl-carousel.image-slider .owl-nav .owl-prev { left: 0 !important; -webkit-border-radius: 0 36px 36px 0; border-radius: 0 36px 36px 0; } .owl-carousel.image-slider .owl-nav .owl-next { right: 0 !important; -webkit-border-radius: 36px 0 0 36px; border-radius: 36px 0 0 36px; } .owl-carousel.image-slider .owl-nav [class*='owl-']::before { position: relative; color: #fff !important; margin-top: 22px; } .owl-carousel.image-slider .owl-nav .owl-prev::before { left: -2px; } .owl-carousel.image-slider .owl-nav .owl-next::before { left: 2px; } /* captions */ .image-slider .slide .item-label { position: absolute; display: block; left: 0; bottom: 0; margin-top: 0; padding: 5px 12px; color: #fff; background: rgba(0, 0, 0, 0.4); text-align: left; cursor: default; z-index: 15; } /* Media queries --------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { .owl-carousel.owl-theme .owl-nav .owl-prev { left: -30px; } .owl-carousel.owl-theme .owl-nav .owl-next { right: -30px; } } @media (max-width: 767px) { .owl-carousel.owl-theme .owl-nav .owl-prev { left: -21px; } .owl-carousel.owl-theme .owl-nav .owl-next { right: -21px; } } /*-----------------------------------------------------------------------------------*/ /* 11. Info Box /*-----------------------------------------------------------------------------------*/ /* White (or transparent) background */ .info-box { position: relative; } .info-box .info-media + .info-text, .info-box.shadow .info-media + .info-text, .info-box.pale-bg .info-media + .info-text { padding-top: 25px; } .info-box .info-text > p:last-child, .info-box .info-text > ul:last-child, .info-box .info-text > ol:last-child, .info-box .info-text > blockquote:last-child { margin-bottom: 0; } .info-box.shadow { background-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: 5px 5px 40px -10px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 40px -10px rgba(0, 0, 0, 0.2); } .info-box.shadow .info-text { padding: 35px 30px 40px; } .info-box .info-text .button { max-width: 100%; overflow: hidden; } .info-box .info-text .button.button-medium { border-width: 1px; } /* Pale background */ .info-box.pale-bg { background-color: #f2f1ed; } .info-box.pale-bg .info-text { padding: 40px 40px 50px; } .info-box.pale-bg.shadow { -webkit-box-shadow: 45px 45px 44px -16px rgba(0, 0, 0, 0.12); box-shadow: 45px 45px 44px -16px rgba(0, 0, 0, 0.12); } .info-box.info-sign::before, .info-box.quote-sign::before { position: absolute; display: block; left: -15px; top: -15px; width: 50px; height: 50px; font-family: FontAwesome; color: rgba(245, 203, 135, 0.5); /* #f5cb87 */ text-align: center; background-color: #fff; -webkit-border-radius: 50%; border-radius: 50%; } .info-box.info-sign::before { padding-left: 5px; content: "\f129"; font-size: 30px; line-height: 54px; } .info-box.quote-sign::before { padding-left: 1px; content: "\f10d"; font-size: 27px; line-height: 50px; } .info-box.pale-bg.bottom-bars-light { background-image: url(../images/backgrounds/bars-bg-light.png); background-position: left bottom; background-position: left 10px bottom -25px; background-repeat: repeat-x; } .info-box.pale-bg.bottom-bars-light .info-text { padding: 40px 40px 90px; } /* Pinstriped background */ .info-box.pinstriped-bg { background: url(../images/backgrounds/pinstriped-bg.png) repeat left top; } .info-box.pinstriped-bg .info-text { padding: 40px 40px 50px; } .info-box.pinstriped-bg .info-media + .info-text { padding-top: 35px; } .info-box.pinstriped-bg.shadow { -webkit-box-shadow: 45px 45px 44px -16px rgba(0, 0, 0, 0.12); box-shadow: 45px 45px 44px -16px rgba(0, 0, 0, 0.12); } /* Title under the info media */ .info-box .info-media + .info-text.info-bottom-title { position: relative; font: 21px/29px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; padding: 15px 15px 18px; text-align: center; z-index: 3; } .info-box .info-media + .info-text.info-bottom-title::after { position: absolute; left: 50%; top: 0; width: 0; height: 0; margin: -25px 0 0 -35px; content: ""; border-left: 35px solid transparent; border-right: 35px solid transparent; border-bottom: 25px solid #fff; } .info-box.pale-bg .info-media + .info-text.info-bottom-title::after { border-bottom-color: #f2f1ed; } /* Media queries --------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { .col-sm-12 .info-box { max-width: 600px; /* the width is limited to 600px */ margin-right: auto; margin-left: auto; } .col-sm-12 .info-box.pale-bg.shadow, .col-sm-12 .info-box.pinstriped-bg.shadow { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 35px 35px 22px -24px rgba(0, 0, 0, 0.12); box-shadow: 35px 35px 22px -24px rgba(0, 0, 0, 0.12); } .info-box .info-text.info-bottom-title { font-size: 19px; line-height: 27px; padding-left: 12px; padding-right: 12px; } } @media (max-width: 767px) { .info-box { max-width: 540px; /* the width is limited to 540px */ margin-right: auto; margin-left: auto; } .info-box.shadow, .info-box.pale-bg.shadow, .info-box.pinstriped-bg.shadow { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); } .info-box.shadow:not(.pale-bg):not(.pinstriped-bg) { background-color: #fafafa; } } @media (max-width: 479px) { .info-box.pale-bg .info-text, .info-box.pinstriped-bg .info-text { padding: 40px 30px 45px; } } /*-----------------------------------------------------------------------------------*/ /* 12. Standard Gallery /*-----------------------------------------------------------------------------------*/ .gallery-standard { margin: -5px; } .gallery-2-cols .gallery-item { width: 50%; } .gallery-3-cols .gallery-item { width: 33.33333333%; } .gallery-4-cols .gallery-item { width: 25%; } .gallery-5-cols .gallery-item { width: 20%; } .gallery-6-cols .gallery-item { width: 16.66666667%; } .gallery-7-cols .gallery-item { width: 14.28571429%; } .gallery-8-cols .gallery-item { width: 12.5%; } .gallery-item { position: relative; float: left; padding: 5px; } .gallery-item .item-label { position: absolute; display: block; left: 5px; bottom: 5px; margin: 0 5px 0 0; padding: 3px 10px; color: #fff; background-color: rgba(0, 0, 0, 0.25); cursor: default; opacity: 0; -webkit-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; z-index: 15; } .gallery-item:hover .item-label, .gallery-item:hover .overlay-enabled .image-overlay { opacity: 1; } /* Touch-screen devices */ .touch-screen .gallery-item .item-label { display: none; } /* Media queries --------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { /* 2 columns >> 4 columns */ .col-sm-12.col-md-3 .gallery-2-cols .gallery-item, .col-sm-12.col-md-4 .gallery-2-cols .gallery-item { width: 25%; } /* 2 columns >> 3 columns */ .col-sm-12.col-md-5 .gallery-2-cols .gallery-item { width: 33.33333333%; } /* 3 columns >> 5 columns */ .col-sm-12.col-md-4 .gallery-3-cols .gallery-item { width: 20%; } /* 3 columns >> 4 columns */ .col-sm-12.col-md-5 .gallery-3-cols .gallery-item { width: 25%; } /* 3 columns >> 2 columns */ .col-sm-4 .gallery-3-cols .gallery-item, .col-sm-5 .gallery-3-cols .gallery-item { width: 50%; } /* 4 columns >> 5 columns */ .col-sm-12.col-md-5 .gallery-4-cols .gallery-item { width: 20%; } /* 4 columns >> 3 columns */ .col-sm-5 .gallery-4-cols .gallery-item, .col-sm-6 .gallery-4-cols .gallery-item { width: 33.33333333%; } /* 5 columns >> 3 columns */ .col-sm-6 .gallery-5-cols .gallery-item { width: 33.33333333%; } /* 5 columns >> 4 columns */ .col-sm-7 .gallery-5-cols .gallery-item, .col-sm-8 .gallery-5-cols .gallery-item { width: 25%; } /* 6 columns >> 4 columns */ .col-sm-7 .gallery-6-cols .gallery-item, .col-sm-8 .gallery-6-cols .gallery-item { width: 25%; } /* 7 columns >> 6 columns */ .gallery-7-cols .gallery-item { width: 16.66666667%; } /* 7 columns >> 5 columns */ .col-sm-8 .gallery-7-cols .gallery-item { width: 20%; } /* 8 columns >> 6 columns */ .gallery-8-cols .gallery-item { width: 16.66666667%; } /* 8 columns >> 5 columns */ .col-sm-9 .gallery-8-cols .gallery-item { width: 20%; } } @media (min-width: 480px) and (max-width: 767px) { /* 2 columns >> 4 columns */ .col-md-3 .gallery-2-cols .gallery-item, .col-sm-3 .gallery-2-cols .gallery-item, .col-md-4 .gallery-2-cols .gallery-item, .col-sm-4 .gallery-2-cols .gallery-item { width: 25%; } /* 2 columns >> 3 columns */ .col-md-5 .gallery-2-cols .gallery-item, .col-sm-5 .gallery-2-cols .gallery-item { width: 33.33333333%; } /* 3 columns >> 2 columns */ .gallery-3-cols .gallery-item { width: 50%; } /* 3 columns >> 5 columns */ .col-md-4 .gallery-3-cols .gallery-item, .col-sm-4 .gallery-3-cols .gallery-item { width: 20%; } /* 3 columns >> 4 columns */ .col-md-5 .gallery-3-cols .gallery-item, .col-sm-5 .gallery-3-cols .gallery-item { width: 25%; } /* 3 columns */ .col-md-6 .gallery-3-cols .gallery-item, .col-sm-6 .gallery-3-cols .gallery-item, .col-md-7 .gallery-3-cols .gallery-item, .col-sm-7 .gallery-3-cols .gallery-item, .col-md-8 .gallery-3-cols .gallery-item, .col-sm-8 .gallery-3-cols .gallery-item, .col-md-9 .gallery-3-cols .gallery-item, .col-sm-9 .gallery-3-cols .gallery-item { width: 33.33333333%; } /* 4 columns >> 3 columns */ .gallery-4-cols .gallery-item { width: 33.33333333%; } /* 4 columns >> 5 columns */ .col-md-5 .gallery-4-cols .gallery-item, .col-sm-5 .gallery-4-cols .gallery-item { width: 20%; } /* 4 columns */ .col-md-6 .gallery-4-cols .gallery-item, .col-sm-6 .gallery-4-cols .gallery-item, .col-md-7 .gallery-4-cols .gallery-item, .col-sm-7 .gallery-4-cols .gallery-item, .col-md-8 .gallery-4-cols .gallery-item, .col-sm-8 .gallery-4-cols .gallery-item, .col-md-9 .gallery-4-cols .gallery-item, .col-sm-9 .gallery-4-cols .gallery-item { width: 25%; } /* 5 columns >> 4 columns */ .gallery-5-cols .gallery-item { width: 25%; } /* 5 columns */ .col-md-6 .gallery-5-cols .gallery-item, .col-sm-6 .gallery-5-cols .gallery-item, .col-md-7 .gallery-5-cols .gallery-item, .col-sm-7 .gallery-5-cols .gallery-item, .col-md-8 .gallery-5-cols .gallery-item, .col-sm-8 .gallery-5-cols .gallery-item, .col-md-9 .gallery-5-cols .gallery-item, .col-sm-9 .gallery-5-cols .gallery-item { width: 20%; } /* 6 columns >> 4 columns */ .gallery-6-cols .gallery-item { width: 25%; } /* 6 columns >> 5 columns */ .col-md-7 .gallery-6-cols .gallery-item, .col-sm-7 .gallery-6-cols .gallery-item, .col-md-8 .gallery-6-cols .gallery-item, .col-sm-8 .gallery-6-cols .gallery-item, .col-md-9 .gallery-6-cols .gallery-item, .col-sm-9 .gallery-6-cols .gallery-item { width: 20%; } /* 7 columns >> 5 columns */ .gallery-7-cols .gallery-item { width: 20%; } /* 8 columns >> 5 columns */ .gallery-8-cols .gallery-item { width: 20%; } } @media (max-width: 479px) { .gallery-2-cols, .gallery-3-cols { max-width: 370px; /* the width is limited to 370px */ margin-right: auto; margin-left: auto; } /* 2-3 columns >> 1 column */ .gallery-2-cols .gallery-item, .gallery-3-cols .gallery-item { width: 100%; } .col-md-3 .gallery-2-cols, .col-sm-3 .gallery-2-cols, .col-md-4 .gallery-2-cols, .col-sm-4 .gallery-2-cols, .col-md-5 .gallery-2-cols, .col-sm-5 .gallery-2-cols, .col-md-4 .gallery-3-cols, .col-sm-4 .gallery-3-cols, .col-md-5 .gallery-3-cols, .col-sm-5 .gallery-3-cols, .col-md-6 .gallery-3-cols, .col-sm-6 .gallery-3-cols, .col-md-7 .gallery-3-cols, .col-sm-7 .gallery-3-cols, .col-md-8 .gallery-3-cols, .col-sm-8 .gallery-3-cols, .col-md-9 .gallery-3-cols, .col-sm-9 .gallery-3-cols { max-width: none; margin-right: -5px; margin-left: -5px; } /* 3 columns */ .col-md-3 .gallery-2-cols .gallery-item, .col-sm-3 .gallery-2-cols .gallery-item, .col-md-4 .gallery-3-cols .gallery-item, .col-sm-4 .gallery-3-cols .gallery-item, .col-md-5 .gallery-3-cols .gallery-item, .col-sm-5 .gallery-3-cols .gallery-item { width: 33.33333333%; } /* 3 columns >> 2 columns */ .col-md-4 .gallery-2-cols .gallery-item, .col-sm-4 .gallery-2-cols .gallery-item, .col-md-5 .gallery-2-cols .gallery-item, .col-sm-5 .gallery-2-cols .gallery-item, .col-md-6 .gallery-3-cols .gallery-item, .col-sm-6 .gallery-3-cols .gallery-item, .col-md-7 .gallery-3-cols .gallery-item, .col-sm-7 .gallery-3-cols .gallery-item, .col-md-8 .gallery-3-cols .gallery-item, .col-sm-8 .gallery-3-cols .gallery-item, .col-md-9 .gallery-3-cols .gallery-item, .col-sm-9 .gallery-3-cols .gallery-item { width: 50%; } /* 4 columns >> 2 columns */ .gallery-4-cols .gallery-item { width: 50%; } /* 4 columns >> 3 columns */ .col-md-5 .gallery-4-cols .gallery-item, .col-sm-5 .gallery-4-cols .gallery-item, .col-md-6 .gallery-4-cols .gallery-item, .col-sm-6 .gallery-4-cols .gallery-item, .col-md-7 .gallery-4-cols .gallery-item, .col-sm-7 .gallery-4-cols .gallery-item, .col-md-8 .gallery-4-cols .gallery-item, .col-sm-8 .gallery-4-cols .gallery-item { width: 33.33333333%; } /* 5 columns >> 2 columns */ .gallery-5-cols .gallery-item { width: 50%; } /* 5 columns >> 3 columns */ .col-md-6 .gallery-5-cols .gallery-item, .col-sm-6 .gallery-5-cols .gallery-item, .col-md-7 .gallery-5-cols .gallery-item, .col-sm-7 .gallery-5-cols .gallery-item, .col-md-8 .gallery-5-cols .gallery-item, .col-sm-8 .gallery-5-cols .gallery-item, .col-md-9 .gallery-5-cols .gallery-item, .col-sm-9 .gallery-5-cols .gallery-item { width: 33.33333333%; } /* 6 columns >> 3 columns */ .gallery-6-cols .gallery-item { width: 33.33333333%; } /* 7 columns >> 3 columns */ .gallery-7-cols .gallery-item { width: 33.33333333%; } /* 8 columns >> 3 columns */ .gallery-8-cols .gallery-item { width: 33.33333333%; } } /*-----------------------------------------------------------------------------------*/ /* 13. Gallery: Simple Metro Style /*-----------------------------------------------------------------------------------*/ .gallery-metro { margin: -5px; } .gallery-metro-3-cols .gallery-item { width: 33.33333333%; } .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 66.66666667%; } .gallery-metro-4-cols .gallery-item { width: 25%; } .gallery-metro-4-cols .gallery-item[class*="item-big"] { width: 50%; } .gallery-metro-5-cols .gallery-item { width: 20%; } .gallery-metro-5-cols .gallery-item[class*="item-big"] { width: 40%; } .gallery-metro-6-cols .gallery-item { width: 16.66666667%; } .gallery-metro-6-cols .gallery-item[class*="item-big"] { width: 33.33333333%; } .gallery-metro .gallery-item { padding: 0; } .gallery-metro .gallery-item.item-big-top-right { float: right; } .gallery-metro .gallery-item .overlay-enabled::before { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; border: 5px solid #fff; content: ""; z-index: 2; } .js .gallery-metro .gallery-item .overlay-enabled::before { display: none; } .js .gallery-metro .gallery-item img { visibility: hidden; } .gallery-metro .gallery-item .image-overlay { left: 5px; top: 5px; right: 5px; bottom: 5px; } /* after running JS function and adding "bg-image-active" class */ .gallery-metro .gallery-item.bg-image-active img { visibility: hidden; } .gallery-metro .gallery-item.bg-image-active .overlay-enabled::before { display: none; } .gallery-metro .gallery-item.bg-image-active .item-bg-image { position: absolute; display: block; left: 5px; top: 5px; right: 5px; bottom: 5px; background-size: cover; z-index: 1; } /* Media queries --------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { /* 3 columns >> 5 columns */ .col-sm-12.col-md-4 .gallery-metro-3-cols .gallery-item { width: 20%; } .col-sm-12.col-md-4 .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 40%; } /* 3 columns >> 4 columns */ .col-sm-12.col-md-5 .gallery-metro-3-cols .gallery-item { width: 25%; } .col-sm-12.col-md-5 .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 50%; } /* 3 columns >> 2 columns */ .col-sm-4 .gallery-metro-3-cols .gallery-item, .col-sm-5 .gallery-metro-3-cols .gallery-item { width: 50%; } .col-sm-4 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-5 .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 100%; } /* 4 columns >> 5 columns */ .col-sm-12.col-md-5 .gallery-metro-4-cols .gallery-item { width: 20%; } .col-sm-12.col-md-5 .gallery-metro-4-cols .gallery-item[class*="item-big"] { width: 40%; } /* 4 columns >> 3 columns */ .col-sm-5 .gallery-metro-4-cols .gallery-item, .col-sm-6 .gallery-metro-4-cols .gallery-item { width: 33.33333333%; } .col-sm-5 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-sm-6 .gallery-metro-4-cols .gallery-item[class*="item-big"] { width: 66.66666667%; } /* 5 columns >> 3 columns */ .col-sm-6 .gallery-metro-5-cols .gallery-item { width: 33.33333333%; } .col-sm-6 .gallery-metro-5-cols .gallery-item[class*="item-big"] { width: 66.66666667%; } /* 5 columns >> 4 columns */ .col-sm-7 .gallery-metro-5-cols .gallery-item, .col-sm-8 .gallery-metro-5-cols .gallery-item { width: 25%; } .col-sm-7 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-sm-8 .gallery-metro-5-cols .gallery-item[class*="item-big"] { width: 50%; } /* 6 columns >> 4 columns */ .col-sm-7 .gallery-metro-6-cols .gallery-item, .col-sm-8 .gallery-metro-6-cols .gallery-item { width: 25%; } .col-sm-7 .gallery-metro-6-cols .gallery-item[class*="item-big"], .col-sm-8 .gallery-metro-6-cols .gallery-item[class*="item-big"] { width: 50%; } } @media (min-width: 480px) and (max-width: 767px) { /* 3 columns >> 2 columns */ .gallery-metro-3-cols .gallery-item { width: 50%; } .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 100%; } /* 3 columns >> 5 columns */ .col-md-4 .gallery-metro-3-cols .gallery-item, .col-sm-4 .gallery-metro-3-cols .gallery-item { width: 20%; } .col-md-4 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-4 .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 40%; } /* 3 columns >> 4 columns */ .col-md-5 .gallery-metro-3-cols .gallery-item, .col-sm-5 .gallery-metro-3-cols .gallery-item { width: 25%; } .col-md-5 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-5 .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 50%; } /* 3 columns */ .col-md-6 .gallery-metro-3-cols .gallery-item, .col-sm-6 .gallery-metro-3-cols .gallery-item, .col-md-7 .gallery-metro-3-cols .gallery-item, .col-sm-7 .gallery-metro-3-cols .gallery-item, .col-md-8 .gallery-metro-3-cols .gallery-item, .col-sm-8 .gallery-metro-3-cols .gallery-item, .col-md-9 .gallery-metro-3-cols .gallery-item, .col-sm-9 .gallery-metro-3-cols .gallery-item { width: 33.33333333%; } .col-md-6 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-6 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-md-7 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-7 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-md-8 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-8 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-md-9 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-9 .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 66.66666667%; } /* 4 columns >> 3 columns */ .gallery-metro-4-cols .gallery-item { width: 33.33333333%; } .gallery-metro-4-cols .gallery-item[class*="item-big"] { width: 66.66666667%; } /* 4 columns */ .col-md-6 .gallery-metro-4-cols .gallery-item, .col-sm-6 .gallery-metro-4-cols .gallery-item, .col-md-7 .gallery-metro-4-cols .gallery-item, .col-sm-7 .gallery-metro-4-cols .gallery-item, .col-md-8 .gallery-metro-4-cols .gallery-item, .col-sm-8 .gallery-metro-4-cols .gallery-item, .col-md-9 .gallery-metro-4-cols .gallery-item, .col-sm-9 .gallery-metro-4-cols .gallery-item { width: 25%; } .col-md-6 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-sm-6 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-md-7 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-sm-7 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-md-8 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-sm-8 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-md-9 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-sm-9 .gallery-metro-4-cols .gallery-item[class*="item-big"] { width: 50%; } /* 4 columns >> 5 columns */ .col-md-5 .gallery-metro-4-cols .gallery-item, .col-sm-5 .gallery-metro-4-cols .gallery-item { width: 20%; } .col-md-5 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-sm-5 .gallery-metro-4-cols .gallery-item[class*="item-big"] { width: 40%; } /* 5 columns >> 4 columns */ .gallery-metro-5-cols .gallery-item { width: 25%; } .gallery-metro-5-cols .gallery-item[class*="item-big"] { width: 50%; } /* 5 columns */ .col-md-6 .gallery-metro-5-cols .gallery-item, .col-sm-6 .gallery-metro-5-cols .gallery-item, .col-md-7 .gallery-metro-5-cols .gallery-item, .col-sm-7 .gallery-metro-5-cols .gallery-item, .col-md-8 .gallery-metro-5-cols .gallery-item, .col-sm-8 .gallery-metro-5-cols .gallery-item, .col-md-9 .gallery-metro-5-cols .gallery-item, .col-sm-9 .gallery-metro-5-cols .gallery-item { width: 20%; } .col-md-6 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-sm-6 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-md-7 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-sm-7 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-md-8 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-sm-8 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-md-9 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-sm-9 .gallery-metro-5-cols .gallery-item[class*="item-big"] { width: 40%; } /* 6 columns >> 4 columns */ .gallery-metro-6-cols .gallery-item { width: 25%; } .gallery-metro-6-cols .gallery-item[class*="item-big"] { width: 50%; } /* 6 columns >> 5 columns */ .col-md-7 .gallery-metro-6-cols .gallery-item, .col-sm-7 .gallery-metro-6-cols .gallery-item, .col-md-8 .gallery-metro-6-cols .gallery-item, .col-sm-8 .gallery-metro-6-cols .gallery-item, .col-md-9 .gallery-metro-6-cols .gallery-item, .col-sm-9 .gallery-metro-6-cols .gallery-item { width: 20%; } .col-md-7 .gallery-metro-6-cols .gallery-item[class*="item-big"], .col-sm-7 .gallery-metro-6-cols .gallery-item[class*="item-big"], .col-md-8 .gallery-metro-6-cols .gallery-item[class*="item-big"], .col-sm-8 .gallery-metro-6-cols .gallery-item[class*="item-big"], .col-md-9 .gallery-metro-6-cols .gallery-item[class*="item-big"], .col-sm-9 .gallery-metro-6-cols .gallery-item[class*="item-big"] { width: 40%; } } @media (max-width: 479px) { .gallery-metro-3-cols { max-width: 370px; /* the width is limited to 370px */ margin-right: auto; margin-left: auto; } /* 3 columns >> 1 column */ .gallery-metro-3-cols .gallery-item, .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 100%; } .col-md-4 .gallery-metro-3-cols, .col-sm-4 .gallery-metro-3-cols, .col-md-5 .gallery-metro-3-cols, .col-sm-5 .gallery-metro-3-cols, .col-md-6 .gallery-metro-3-cols, .col-sm-6 .gallery-metro-3-cols, .col-md-7 .gallery-metro-3-cols, .col-sm-7 .gallery-metro-3-cols, .col-md-8 .gallery-metro-3-cols, .col-sm-8 .gallery-metro-3-cols, .col-md-9 .gallery-metro-3-cols, .col-sm-9 .gallery-metro-3-cols { max-width: none; margin-right: -5px; margin-left: -5px; } /* 3 columns */ .col-md-4 .gallery-metro-3-cols .gallery-item, .col-sm-4 .gallery-metro-3-cols .gallery-item, .col-md-5 .gallery-metro-3-cols .gallery-item, .col-sm-5 .gallery-metro-3-cols .gallery-item { width: 33.33333333%; } .col-md-4 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-4 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-md-5 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-5 .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 66.66666667%; } /* 3 columns >> 2 columns */ .col-md-6 .gallery-metro-3-cols .gallery-item, .col-sm-6 .gallery-metro-3-cols .gallery-item, .col-md-7 .gallery-metro-3-cols .gallery-item, .col-sm-7 .gallery-metro-3-cols .gallery-item, .col-md-8 .gallery-metro-3-cols .gallery-item, .col-sm-8 .gallery-metro-3-cols .gallery-item, .col-md-9 .gallery-metro-3-cols .gallery-item, .col-sm-9 .gallery-metro-3-cols .gallery-item { width: 50%; } .col-md-6 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-6 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-md-7 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-7 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-md-8 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-8 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-md-9 .gallery-metro-3-cols .gallery-item[class*="item-big"], .col-sm-9 .gallery-metro-3-cols .gallery-item[class*="item-big"] { width: 100%; } /* 4 columns >> 2 columns */ .gallery-metro-4-cols .gallery-item { width: 50%; } .gallery-metro-4-cols .gallery-item[class*="item-big"] { width: 100%; } /* 4 columns >> 3 columns */ .col-md-5 .gallery-metro-4-cols .gallery-item, .col-sm-5 .gallery-metro-4-cols .gallery-item, .col-md-6 .gallery-metro-4-cols .gallery-item, .col-sm-6 .gallery-metro-4-cols .gallery-item, .col-md-7 .gallery-metro-4-cols .gallery-item, .col-sm-7 .gallery-metro-4-cols .gallery-item, .col-md-8 .gallery-metro-4-cols .gallery-item, .col-sm-8 .gallery-metro-4-cols .gallery-item { width: 33.33333333%; } .col-md-5 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-sm-5 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-md-6 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-sm-6 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-md-7 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-sm-7 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-md-8 .gallery-metro-4-cols .gallery-item[class*="item-big"], .col-sm-8 .gallery-metro-4-cols .gallery-item[class*="item-big"] { width: 66.66666667%; } /* 5 columns >> 2 columns */ .gallery-metro-5-cols .gallery-item { width: 50%; } .gallery-metro-5-cols .gallery-item[class*="item-big"] { width: 100%; } /* 5 columns >> 3 columns */ .col-md-6 .gallery-metro-5-cols .gallery-item, .col-sm-6 .gallery-metro-5-cols .gallery-item, .col-md-7 .gallery-metro-5-cols .gallery-item, .col-sm-7 .gallery-metro-5-cols .gallery-item, .col-md-8 .gallery-metro-5-cols .gallery-item, .col-sm-8 .gallery-metro-5-cols .gallery-item, .col-md-9 .gallery-metro-5-cols .gallery-item, .col-sm-9 .gallery-metro-5-cols .gallery-item { width: 33.33333333%; } .col-md-6 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-sm-6 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-md-7 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-sm-7 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-md-8 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-sm-8 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-md-9 .gallery-metro-5-cols .gallery-item[class*="item-big"], .col-sm-9 .gallery-metro-5-cols .gallery-item[class*="item-big"] { width: 66.66666667%; } /* 6 columns >> 3 columns */ .gallery-metro-6-cols .gallery-item { width: 33.33333333%; } .gallery-metro-6-cols .gallery-item[class*="item-big"] { width: 66.66666667%; } } /*-----------------------------------------------------------------------------------*/ /* 14. Preview Image List /*-----------------------------------------------------------------------------------*/ .preview-image-list.gallery-standard { margin: -1px; overflow: hidden; } .stripe .container-fluid .columns > .preview-image-list.gallery-standard:first-child { margin-top: -81px; } .stripe .container-fluid .columns > .preview-image-list.gallery-standard:last-child { margin-bottom: -81px; } .stripe-narrow .container-fluid .columns > .preview-image-list.gallery-standard:first-child { margin-top: -51px; } .stripe-narrow .container-fluid .columns > .preview-image-list.gallery-standard:last-child { margin-bottom: -51px; } .stripe-bottom .container-fluid .columns > .preview-image-list.gallery-standard:last-child { margin-bottom: -56px; } .preview-image-list.gallery-standard .gallery-item { padding: 1px; overflow: hidden; } .preview-image-list.gallery-standard .gallery-item .item-label { top: 50%; bottom: auto; left: 1px; right: 1px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); line-height: 1.5; margin: 0; padding: 15px; background: none; -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; z-index: 9; } .preview-image-list.gallery-standard .gallery-item .image-overlay { background: none; } .preview-image-list.gallery-standard .gallery-item::after { position: absolute; display: block; top: 1px; left: 1px; bottom: 1px; right: 1px; background-color: rgba(235, 172, 70, 0.9); /* #ebac46 */ opacity: 0; -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; content: ""; } .preview-image-list.gallery-standard .gallery-item:hover::after { opacity: 1; } /* Touch-screen devices */ .touch-screen .preview-image-list.gallery-standard .gallery-item::after { display: none; } .touch-screen .preview-image-list.gallery-standard .gallery-item.label-bg-active::after { display: block; opacity: 1; } /* Media queries --------------------------------------------------- */ @media (min-width: 1681px) { .stripe .container-fluid .preview-image-list.gallery-standard { max-width: 1680px; margin-left: auto; margin-right: auto; } .preview-image-list.gallery-standard .gallery-item .item-label { padding: 25px; } } @media (min-width: 992px) { .preview-image-list.gallery-standard .gallery-item .item-label { font-size: inherit; } } @media (min-width: 768px) and (max-width: 991px) { .preview-image-list.gallery-5-cols .gallery-item .item-label { padding: 10px; } } @media (max-width: 767px) { .preview-image-list.gallery-standard .gallery-item .item-label { padding: 10px; } } @media (min-width: 480px) and (max-width: 767px) { .stripe .container-fluid .preview-image-list.gallery-4-cols .gallery-item { width: 25%; /* leave 4 columns */ } .stripe .container-fluid .preview-image-list.gallery-5-cols .gallery-item { width: 33.33333333%; /* 5 columns >> 3 columns */ } .preview-image-list.gallery-standard .gallery-item .item-label { line-height: 1.25; } .preview-image-list.gallery-5-cols .gallery-item .item-label { line-height: 1.5; } } /*-----------------------------------------------------------------------------------*/ /* 15. Testimonials /*-----------------------------------------------------------------------------------*/ /* Testimonial boxes --------------------------------------------------- */ .testimonial-boxes .columns { margin-top: 30px; padding: 30px 45px; overflow: hidden; } .testimonial-boxes .row:first-child .columns { margin-top: 0; } .testimonial-boxes .columns::before { position: absolute; display: block; top: 0; bottom: 0; left: 15px; right: 15px; content: ""; background-color: #f5f5f5; border: 1px solid rgba(141, 146, 166, 0.2); /* #8d92a6 */ } .testimonial-boxes .columns::after { position: absolute; display: block; right: 30px; bottom: -20px; height: 110px; content: '"'; font: italic 300px/1 "Times New Roman", Times, serif; color: rgba(141, 146, 166, 0.03); /* #8d92a6 */ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .testimonial-boxes > article { margin-top: 40px; } .testimonial-boxes > article:first-child { margin-top: 0; } .testimonial-boxes article { position: relative; } .testimonial-boxes .testimonial-image { float: left; } .testimonial-boxes .testimonial-image img { width: 90px; height: 90px; -webkit-border-radius: 50%; border-radius: 50%; } .testimonial-boxes .testimonial-content { position: relative; z-index: 1; } .testimonial-boxes .testimonial-image + .testimonial-content { margin-left: 120px; } .testimonial-boxes .testimonial-content blockquote { font-size: inherit; line-height: 1.625; font-style: normal; letter-spacing: 0; border-left: none; margin-bottom: 0; padding: 0; } .testimonial-boxes .testimonial-content blockquote p { font-family: inherit; color: inherit; } .testimonial-boxes .testimonial-content .author-info { font-size: 15px; line-height: 1.5; color: #666; margin-top: 10px; } .testimonial-boxes .testimonial-content .author-info::before { content: "\2014 \00A0"; } .testimonial-boxes .testimonial-content .author-info span { font-style: italic; color: #909090; } /* for light grey background */ .stripe-light-grey-bg .testimonial-boxes .columns::before { background-color: #fff; } .stripe-light-grey-bg .testimonial-boxes .columns::after { color: rgba(245, 203, 135, 0.07); /* #f5cb87 */ } /* for secondary color background */ .stripe-secondary-color-bg .testimonial-boxes .columns::before { background-color: rgba(255, 255, 255, 0.7); border: none; } .stripe-secondary-color-bg .testimonial-boxes .columns::after { color: rgba(245, 203, 135, 0.07); /* #f5cb87 */ } /* for dark colored background */ .dark-colored-bg .testimonial-boxes .columns::before { border: none; } /* Testimonial in sidebar widget --------------------------------------------------- */ .testimonial-aside { position: relative; padding: 25px 30px 30px; background-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); } .testimonial-aside::before { position: absolute; display: block; top: -5px; left: -30px; width: 60px; height: 55px; text-indent: -15px; font: italic 120px/90px Verdana, Geneva, sans-serif; color: #dadde8; background-color: #fff; content: '"'; } .testimonial-aside .testimonial-item blockquote { border-left: none; margin-bottom: 0; padding: 0; } .testimonial-aside .testimonial-item blockquote p { color: #8d92a6; } .testimonial-aside .testimonial-item .testimonial-author { display: table; margin-top: 15px; } .testimonial-aside .testimonial-item .author-image { display: table-cell; width: 75px; vertical-align: middle; } .testimonial-aside .testimonial-item .author-image img { width: 60px; height: 60px; -webkit-border-radius: 50%; border-radius: 50%; } .testimonial-aside .testimonial-item .author-info { display: table-cell; vertical-align: middle; font-size: 16px; line-height: 1.5; } .testimonial-aside .testimonial-item .author-info span { font-style: italic; color: #909090; } /* Testimonial - main style 1 --------------------------------------------------- */ .testimonial-main-style-1 { background: url(../images/icons/quotes-dark.png) no-repeat left top; margin: 0 120px; } .testimonial-main-style-1 .testimonial-item { padding-left: 90px; } .testimonial-main-style-1 .testimonial-item .testimonial-title { position: relative; height: 58px; } .testimonial-main-style-1 .testimonial-item h4 { position: absolute; left: 0; bottom: 0; text-transform: uppercase; margin-bottom: 0; } .testimonial-main-style-1 .testimonial-item h4 span { color: #8d92a6; } .testimonial-main-style-1 .testimonial-item .testimonial-text { margin-top: 20px; } .testimonial-main-style-1 .testimonial-item .testimonial-text p { font-size: 19px; line-height: 1.75; margin-bottom: 0; } .testimonial-main-style-1 .testimonial-item .testimonial-author { display: table; width: 100%; margin-top: 10px; } .testimonial-main-style-1 .testimonial-item .author-image { display: table-cell; width: 85px; vertical-align: middle; padding-left: 15px; } .testimonial-main-style-1 .testimonial-item .author-image img { width: 70px; height: 70px; border: 2px solid rgba(255, 255, 255, 0.3); -webkit-border-radius: 50%; border-radius: 50%; } .testimonial-main-style-1 .testimonial-item .author-info { display: table-cell; vertical-align: middle; font-size: 17px; line-height: 1.5; text-align: right; } .testimonial-main-style-1 .testimonial-item .author-info span { display: block; color: #909090; } .testimonial-main-style-1 .testimonial-item .author-info span a { color: inherit; } .testimonial-main-style-1 .testimonial-item .author-info span a:hover { color: #666; } /* for dark colored background */ .dark-colored-bg .testimonial-main-style-1 { background-image: url(../images/icons/quotes-light.png); } .dark-colored-bg .testimonial-main-style-1 .testimonial-item h4 { color: #fff; } .dark-colored-bg .testimonial-main-style-1 .testimonial-item h4 span { color: #b8bfd9; } .dark-colored-bg .testimonial-main-style-1 .testimonial-item .testimonial-text p { color: #fff; color: rgba(255, 255, 255, 0.8); } .dark-colored-bg .testimonial-main-style-1 .testimonial-item .author-info { color: #fff; } .dark-colored-bg .testimonial-main-style-1 .testimonial-item .author-info span { color: #dadde8; } .dark-colored-bg .testimonial-main-style-1 .testimonial-item .author-info span a:hover { color: #d9e0ff; } /* for secondary color background */ .stripe-secondary-color-bg .testimonial-main-style-1 { background-image: url(../images/icons/quotes-light.png); } .stripe-secondary-color-bg .testimonial-main-style-1 .testimonial-item h4, .stripe-secondary-color-bg .testimonial-main-style-1 .testimonial-item .author-info { color: #fff; } .stripe-secondary-color-bg .testimonial-main-style-1 .testimonial-item h4 span, .stripe-secondary-color-bg .testimonial-main-style-1 .testimonial-item .author-info span { color: #664b1f; } .stripe-secondary-color-bg .testimonial-main-style-1 .testimonial-item .testimonial-text p, .stripe-secondary-color-bg .testimonial-main-style-1 .testimonial-item .author-info span a:hover { color: #333; } /* Testimonial - main style 2 --------------------------------------------------- */ .testimonial-main-style-2.top-icon-enabled .top-icon { margin-bottom: 10px; text-align: center; } .testimonial-main-style-2.top-icon-enabled .top-icon .fa { /* vector icons - Font Awesome */ font-size: 40px; color: #dadde8; } .testimonial-main-style-2 .testimonial-item .testimonial-text { text-align: center; } .testimonial-main-style-2 .testimonial-item .testimonial-text p { font-size: 22px; line-height: 1.75; font-style: italic; color: #606680; margin-bottom: 0; } .testimonial-main-style-2 .testimonial-item .testimonial-author { position: relative; margin: 20px 0 15px; line-height: 0; text-align: center; } .testimonial-main-style-2 .testimonial-item .author-image { position: relative; display: inline-block; } .testimonial-main-style-2 .testimonial-item .author-image img { width: 90px; height: 90px; -webkit-border-radius: 50%; border-radius: 50%; } .testimonial-main-style-2 .testimonial-item .author-image::after { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: inset 0 0 4px 3px rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 4px 3px rgba(255, 255, 255, 0.7); content: ""; } .testimonial-main-style-2 .testimonial-item .author-info { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); margin-left: 65px; line-height: 1.5; text-align: left; } .testimonial-main-style-2 .testimonial-item .author-info span { display: block; color: #909090; } .testimonial-main-style-2 .testimonial-item .author-info span a { color: inherit; } .testimonial-main-style-2 .testimonial-item .author-info span a:hover { color: #666; } /* for dark colored background */ .dark-colored-bg .testimonial-main-style-2.top-icon-enabled .top-icon .fa { color: #b8bfd9; } .dark-colored-bg .testimonial-main-style-2 .testimonial-item .testimonial-text p { color: #fff; color: rgba(255, 255, 255, 0.8); } .dark-colored-bg .testimonial-main-style-2 .testimonial-item .author-image::after { display: block; } .dark-colored-bg .testimonial-main-style-2 .testimonial-item .author-info { color: #fff; } .dark-colored-bg .testimonial-main-style-2 .testimonial-item .author-info span { color: #dadde8; } .dark-colored-bg .testimonial-main-style-2 .testimonial-item .author-info span a:hover { color: #d9e0ff; } /* for secondary color background */ .stripe-secondary-color-bg .testimonial-main-style-2.top-icon-enabled .top-icon .fa { color: #f5cb87; } .stripe-secondary-color-bg .testimonial-main-style-2 .testimonial-item .testimonial-text p { color: #444; } .stripe-secondary-color-bg .testimonial-main-style-2 .testimonial-item .author-image::after { display: block; -webkit-box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.7); } .stripe-secondary-color-bg .testimonial-main-style-2 .testimonial-item .author-info { color: #fff; } .stripe-secondary-color-bg .testimonial-main-style-2 .testimonial-item .author-info span { color: #664b1f; } .stripe-secondary-color-bg .testimonial-main-style-2 .testimonial-item .author-info span a:hover { color: #333; } /* Testimonial - main style 3 --------------------------------------------------- */ .testimonial-main-style-3.top-icon-enabled .top-icon { margin-bottom: 10px; text-align: center; } .testimonial-main-style-3.top-icon-enabled .top-icon .fa { /* vector icons - Font Awesome */ font-size: 40px; color: #dadde8; } .testimonial-main-style-3 .testimonial-item .testimonial-text { text-align: center; } .testimonial-main-style-3 .testimonial-item .testimonial-text p { font-family: "Roboto Slab", "Times New Roman", Times, serif; font-size: 26px; line-height: 1.65; color: #606680; margin-bottom: 0; } .testimonial-main-style-3 .testimonial-item .testimonial-author { position: relative; margin-top: 20px; line-height: 0; text-align: center; overflow: hidden; } .testimonial-main-style-3.author-info-inline .testimonial-item .testimonial-author { margin-bottom: 15px; } .testimonial-main-style-3 .testimonial-item .author-image { position: relative; display: inline-block; } .testimonial-main-style-3 .testimonial-item .author-image img { width: 80px; height: 80px; -webkit-border-radius: 50%; border-radius: 50%; } .testimonial-main-style-3 .testimonial-item .author-image::after { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: inset 0 0 4px 3px rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 4px 3px rgba(255, 255, 255, 0.7); content: ""; } .testimonial-main-style-3 .testimonial-item .author-info { font-size: 19px; line-height: 1.5; } .testimonial-main-style-3 .testimonial-item .author-image + .author-info { margin-top: 15px; } .testimonial-main-style-3 .testimonial-item .author-info span { display: block; color: #909090; } .testimonial-main-style-3.author-info-inline .testimonial-item .author-info span { display: inline; } .testimonial-main-style-3.author-info-inline .testimonial-item .author-info strong::after { content: ", "; font-weight: normal; } .testimonial-main-style-3 .testimonial-item .author-info span a { color: inherit; } .testimonial-main-style-3 .testimonial-item .author-info span a:hover { color: #666; } /* for dark colored background */ .dark-colored-bg .testimonial-main-style-3.top-icon-enabled .top-icon .fa { color: #b8bfd9; } .dark-colored-bg .testimonial-main-style-3 .testimonial-item .testimonial-text p, .dark-colored-bg .testimonial-main-style-3 .testimonial-item .author-info span { color: #dadde8; } .dark-colored-bg .testimonial-main-style-3 .testimonial-item .author-image::after { display: block; } .dark-colored-bg .testimonial-main-style-3 .testimonial-item .author-info { color: #fff; } .dark-colored-bg .testimonial-main-style-3 .testimonial-item .author-info span a:hover { color: #d9e0ff; } /* for secondary color background */ .stripe-secondary-color-bg .testimonial-main-style-3.top-icon-enabled .top-icon .fa { color: #f5cb87; } .stripe-secondary-color-bg .testimonial-main-style-3 .testimonial-item .testimonial-text p, .stripe-secondary-color-bg .testimonial-main-style-3 .testimonial-item .author-info span { color: #664b1f; } .stripe-secondary-color-bg .testimonial-main-style-3 .testimonial-item .author-image::after { display: block; -webkit-box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.7); } .stripe-secondary-color-bg .testimonial-main-style-3 .testimonial-item .author-info { color: #fff; } .stripe-secondary-color-bg .testimonial-main-style-3 .testimonial-item .author-info span a:hover { color: #333; } /* Slider controls --------------------------------------------------- */ .testimonial-slider .testimonial-item { display: none; } .testimonial-slider .testimonial-item:first-of-type { display: block; } .testimonial-slider .cycle-pager { position: relative; margin-top: 10px; text-align: center; } .testimonial-main-style-2 .testimonial-slider .cycle-pager { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); margin-top: -9px; margin-left: -75px; line-height: 0; text-align: center; } .testimonial-main-style-3 .testimonial-slider .cycle-pager { position: absolute; top: 22px; left: 0; right: 0; margin-top: 0; line-height: 0; } .testimonial-slider .cycle-pager .paging-control { display: inline-block; } .testimonial-slider .cycle-pager span { display: block; width: 8px; height: 8px; float: left; font-size: 0; line-height: 0; border: 1px solid #8d92a6; -webkit-border-radius: 50%; border-radius: 50%; margin: 5px; cursor: pointer; } .testimonial-slider .cycle-pager span.cycle-pager-active { background-color: #8d92a6; } .testimonial-slider .cycle-prev, .testimonial-slider .cycle-next { display: inline-block; height: 36px; padding: 6px 10px; cursor: pointer; opacity: 0.7; -webkit-transition: opacity 0.15s ease; -o-transition: opacity 0.15s ease; transition: opacity 0.15s ease; } .testimonial-slider .cycle-prev { margin-right: 20px; } .testimonial-slider .cycle-next { margin-left: 20px; } .testimonial-main-style-3 .testimonial-slider .cycle-prev { margin-right: 70px; } .testimonial-main-style-3 .testimonial-slider .cycle-next { margin-left: 70px; } .testimonial-slider .cycle-prev:hover, .testimonial-slider .cycle-next:hover { opacity: 1; } .testimonial-slider .cycle-pager .fa { /* vector icons - Font Awesome */ font-size: 24px; line-height: 1; color: #8d92a6; } /* for dark colored background */ .dark-colored-bg .testimonial-slider .cycle-pager span { border-color: #b8bfd9; } .dark-colored-bg .testimonial-slider .cycle-pager span.cycle-pager-active { background-color: #b8bfd9; } .dark-colored-bg .testimonial-slider .cycle-pager .fa { color: #b8bfd9; } /* for secondary color background */ .stripe-secondary-color-bg .testimonial-slider .cycle-pager span { border-color: #664b1f; } .stripe-secondary-color-bg .testimonial-slider .cycle-pager span.cycle-pager-active { background-color: #664b1f; } .stripe-secondary-color-bg .testimonial-slider .cycle-pager .fa { color: #664b1f; } /* Media queries --------------------------------------------------- */ /* for high-resolution devices */ @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) { .testimonial-main-style-1 { background-image: url(../images/icons/quotes-dark-2x.png); background-size: 60px 54px; } .dark-colored-bg .testimonial-main-style-1, .stripe-secondary-color-bg .testimonial-main-style-1 { background-image: url(../images/icons/quotes-light-2x.png); } } @media (min-width: 992px) and (max-width: 1199px) { .testimonial-boxes .columns { padding: 30px 40px; } .testimonial-boxes .testimonial-image + .testimonial-content { margin-left: 110px; } .testimonial-aside::before { left: -25px; } .testimonial-main-style-1 { margin: 0; } } @media (min-width: 768px) { .testimonial-boxes .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .testimonial-boxes .columns { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } } @media (min-width: 768px) and (max-width: 991px) { /* 2 columns >> 1 column */ .testimonial-boxes .col-sm-12.col-md-6, .testimonial-boxes .row:first-child .col-sm-12.col-md-6 { -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; margin-top: 30px; } .testimonial-boxes .row:first-child .col-sm-12.col-md-6:first-child { margin-top: 0; } .testimonial-boxes .col-sm-6 { padding: 30px 40px; } .testimonial-boxes .col-sm-6 .testimonial-image + .testimonial-content { margin-left: 110px; } .testimonial-aside::before { left: -20px; } .testimonial-main-style-1 { margin: 0; background-size: 50px 45px; } .testimonial-main-style-1 .testimonial-item { padding-left: 75px; } .testimonial-main-style-1 .testimonial-item .testimonial-title { height: 49px; } } @media (max-width: 767px) { .testimonial-boxes .columns, .testimonial-boxes .row:first-child .columns { width: 100%; margin-top: 30px; } .testimonial-boxes .row:first-child .columns:first-child { margin-top: 0; } .testimonial-aside::before { left: -8px; width: 48px; height: 46px; text-indent: -15px; font-size: 100px; line-height: 75px; } .testimonial-main-style-1 { margin: 0; background-size: 50px 45px; } .testimonial-main-style-1 .testimonial-item { padding-left: 0; } .testimonial-main-style-1 .testimonial-item .testimonial-title { height: 49px; margin-left: 75px; } .testimonial-main-style-1 .cycle-pager { margin-top: 15px; } .testimonial-main-style-3 .testimonial-item .testimonial-text p { font-size: 24px; } } @media (max-width: 479px) { .testimonial-boxes .columns { padding: 30px 40px; } .testimonial-boxes .testimonial-image { margin: 0 20px 15px 0; } .testimonial-boxes .testimonial-image img { width: 80px; height: 80px; } .testimonial-boxes .testimonial-image + .testimonial-content { margin-left: 0; } .testimonial-boxes .testimonial-content blockquote { min-height: 95px; } .testimonial-main-style-1 { background-size: 40px 36px; } .testimonial-main-style-1 .testimonial-item .testimonial-title { height: 42px; margin-left: 55px; } .testimonial-main-style-1 .testimonial-item h4 { font-size: 21px; text-transform: none; } .testimonial-main-style-1 .testimonial-item .testimonial-text p { font-size: 17px; } .testimonial-main-style-1 .testimonial-item .author-info { font-size: 16px; } .testimonial-main-style-2 .testimonial-item .testimonial-text p { font-size: 20px; } .testimonial-main-style-2 .testimonial-item .author-image img { width: 70px; height: 70px; } .testimonial-main-style-2 .testimonial-item .author-info { font-size: 15px; margin-left: 45px; } .testimonial-main-style-2 .testimonial-slider .cycle-pager { margin-left: -55px; } } /*-----------------------------------------------------------------------------------*/ /* 16. Staff /*-----------------------------------------------------------------------------------*/ .staff .box-text p { font-size: 15px; line-height: 1.5; font-weight: bold; color: #666; margin-top: 5px; } /* Staff member profile --------------------------------------------------- */ .staff-member-profile .profile-header { margin-bottom: 25px; } .staff-member-profile .profile-header .title { margin-bottom: 0; } .staff-member-profile .profile-header .subtitle { color: #d99a36; font-weight: bold; font-style: italic; margin: 5px 0 0; } .staff-member-profile .profile-header .subtitle.lead-text-basic { line-height: 1.5; } .staff-member-profile .profile-header.extended .subtitle { margin-top: 10px; } .staff-member-profile .profile-header > *:last-child { margin-bottom: 0; } /* Contact details */ .staff-member-profile .contact-details { margin-top: 20px; } .staff-member-profile .contact-details > div[class*="contact-"] { margin-top: 7px; } .staff-member-profile .contact-details > div[class*="contact-"]:first-child { margin-top: 0; } .staff-member-profile .contact-email div, .staff-member-profile .contact-phone div, .staff-member-profile .contact-skype div { margin-left: 32px; font-weight: bold; } .staff-member-profile .contact-phone div { font-size: 18px; } .staff-member-profile .contact-email .fa { /* vector icons - Font Awesome */ float: left; font-size: 20px; color: #ccc; margin: 4px 0 0 0; } .staff-member-profile .contact-phone .fa { float: left; font-size: 28px; color: #ccc; margin: 1px 0 0 3px; } .staff-member-profile .contact-skype .fa { float: left; font-size: 22px; color: #ccc; margin: 5px 0 0 0; } .staff-member-profile .contact-email a, .staff-member-profile .contact-phone .phone-number, .staff-member-profile .contact-skype { color: #666; } .staff-member-profile .contact-email a:hover, .staff-member-profile .contact-phone .phone-number:hover { color: #333; } .staff-member-profile .fa-icon-list { margin-top: 20px; } .staff-member-profile .fa-icon-list li a { display: block; width: 33px; height: 33px; text-align: center; background-color: #fff; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); -webkit-transition: box-shadow 0.15s ease; -o-transition: box-shadow 0.15s ease; transition: box-shadow 0.15s ease; } .staff-member-profile .fa-icon-list li a:hover { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); } .staff-member-profile .fa-icon-list li .fa { width: 23px; line-height: 33px; } /* Profile in popup */ .mfp-content .staff-member-profile .fa-icon-list li .fa { color: #d99a36; } /* Profile on single page */ .single-staff .staff-member-profile .contact-details { margin-top: 0px; } .single-staff .staff-member-profile .fa-icon-list li .fa { color: #8d92a6; } .single-staff .staff-member-profile .profile-description { margin-top: 45px; } .single-staff .staff-member-profile .profile-description p:last-child, .single-staff .staff-member-profile .profile-description ul:last-child, .single-staff .staff-member-profile .profile-description ol:last-child, .single-staff .staff-member-profile .profile-description blockquote:last-child { margin-bottom: 5px; } /* Media queries --------------------------------------------------- */ @media (min-width: 992px) { /* Profile in popup */ .mfp-content .staff-member-profile .profile-header.columns { float: right; padding-left: 35px; } .mfp-content .staff-member-profile .profile-description.columns { padding-left: 35px; } } @media (max-width: 991px) { /* Profile in popup */ .mfp-content .staff-member-profile .profile-description.columns { margin-top: 45px; } } @media (min-width: 768px) { /* Profile on single page */ .single-staff .staff-member-profile .profile-header.columns { float: right; padding-left: 35px; } .single-staff .staff-member-profile .profile-header .title { margin-top: 20px; } .single-staff .staff-member-profile .profile-info.columns { padding-left: 35px; } } @media (min-width: 992px) and (max-width: 1199px) { /* Profile on single page */ .single-staff .staff-member-profile .profile-header .title { margin-top: 5px; } } @media (max-width: 767px) { /* Profile on single page */ .single-staff .staff-member-profile .profile-image img.img-round { -webkit-border-radius: 0; border-radius: 0; } .single-staff .staff-member-profile .contact-details { margin-top: 25px; } } @media (max-width: 479px) { /* Profile in popup */ .mfp-content .staff-member-profile .profile-header.columns, .mfp-content .staff-member-profile .profile-info.columns, .mfp-content .staff-member-profile .profile-description.columns { padding-left: 0; padding-right: 0; } .mfp-content .staff-member-profile .contact-email div { margin-right: -10px; } .staff-member-profile .contact-email div, .staff-member-profile .contact-phone div, .staff-member-profile .contact-skype div { margin-left: 25px; } .staff-member-profile .contact-email .fa { font-size: 17px; } .staff-member-profile .contact-phone .fa { font-size: 26px; } .staff-member-profile .contact-skype .fa { font-size: 20px; } } /*-----------------------------------------------------------------------------------*/ /* 17. Case Studies /*-----------------------------------------------------------------------------------*/ .stripe + .case-studies, .case-studies + .stripe { margin-top: -60px; } .case-studies.picture-boxes[class*="-col-space"] { margin-left: 0; margin-right: 0; } .case-studies.picture-boxes .stripe > .container > .row article { margin-top: 60px; } .case-studies.picture-boxes .stripe > .container > .row:first-of-type article { margin-top: 15px; } /* Media queries --------------------------------------------------- */ @media (min-width: 1520px) { /* small column space */ .case-studies.picture-boxes.small-col-space .stripe > .container { padding: 0 5px; /* 5px = 15px - 10px */ } /* medium column space */ .case-studies.picture-boxes.medium-col-space .stripe > .container { padding: 0; /* 0 = 15px - 15px */ } } @media (min-width: 1200px) and (max-width: 1519px) { .case-studies.picture-boxes.small-col-space .stripe > .container { padding: 0 8px; /* 8px = 15px - 7px */ } .case-studies.picture-boxes.medium-col-space .stripe > .container { padding: 0 5px; /* 5px = 15px - 10px */ } } @media (min-width: 992px) and (max-width: 1199px) { .case-studies.picture-boxes.small-col-space .stripe > .container { padding: 0 12px; /* 12px = 15px - 3px */ } .case-studies.picture-boxes.medium-col-space .stripe > .container { padding: 0 10px; /* 10px = 15px - 5px */ } } @media (max-width: 767px) { .case-studies.picture-boxes .stripe > .container > .row > .columns { padding-top: 0; } } @media (min-width: 480px) and (max-width: 767px) { .case-studies.picture-boxes .stripe > .container > .row article, .case-studies.picture-boxes .stripe > .container > .row:first-of-type article { margin-top: 45px; } .case-studies.picture-boxes .stripe > .container > .row:first-of-type .columns:first-child article { margin-top: 0; } } @media (max-width: 479px) { .case-studies.picture-boxes .stripe > .container > .row article, .case-studies.picture-boxes .stripe > .container > .row:first-of-type article { margin-top: 55px; } .case-studies.picture-boxes .stripe > .container > .row:first-of-type .columns:first-child article { margin-top: 5px; } } /*-----------------------------------------------------------------------------------*/ /* 18. Tabs /*-----------------------------------------------------------------------------------*/ /* Standard --------------------------------------------------- */ .tabs .tabs-nav .tabs-list { list-style: none; margin: 0; padding: 0; } .tabs .tabs-nav .tabs-list li { display: inline-block; font-weight: bold; margin: 0 30px 0 0; } .tabs .tabs-nav .tabs-list li:last-child { margin-right: 0; } .tabs .tabs-nav .tabs-list a { display: block; border-bottom: 2px solid transparent; } .tabs .tabs-nav .tabs-list li.active a { color: #444a61; border-bottom-color: #f5ae3d; } /* for dark colored background */ .dark-colored-bg .tabs .tabs-nav .tabs-list a { color: #dadde8; } .dark-colored-bg .tabs .tabs-nav .tabs-list a:hover { color: #fff; } .dark-colored-bg .tabs .tabs-nav .tabs-list li.active a { color: #d9e0ff; border-bottom-color: #d9e0ff; } /* for secondary color background */ .stripe-secondary-color-bg .tabs .tabs-nav .tabs-list a { color: #fff; } .stripe-secondary-color-bg .tabs .tabs-nav .tabs-list a:hover { color: #f5f5f5; } .stripe-secondary-color-bg .tabs .tabs-nav .tabs-list li.active a { color: #fff; border-bottom-color: #f9f9f9; } .tabs .tabs-content { margin-top: 20px; } .tabs .tabs-content .tab-pane { display: none; } .tabs .tabs-content .tab-pane:first-child { display: block; } .tabs .tab-pane p:last-child, .tabs .tab-pane ul:last-child, .tabs .tab-pane ol:last-child, .tabs .tab-pane blockquote:last-child { margin-bottom: 0; } /* Full-width --------------------------------------------------- */ .stripe + .tabs-full-width, .tabs-full-width .tabs-content, .tabs-full-width + .stripe { margin-top: -60px; } .tabs-full-width.nav-light-grey-bg .tab-pane > .stripe.v-notch::after, .tabs-full-width.nav-light-grey-bg .tab-pane > .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { border-top-color: #f5f5f5; } .tabs-full-width.nav-primary-color-bg .tab-pane > .stripe.v-notch::after, .tabs-full-width.nav-primary-color-bg .tab-pane > .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { border-top-color: #60698a; } .tabs-full-width.nav-secondary-color-bg .tab-pane > .stripe.v-notch::after, .tabs-full-width.nav-secondary-color-bg .tab-pane > .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { border-top-color: #ebac46; } .tabs-full-width.nav-pale-bg .tab-pane > .stripe.v-notch::after, .tabs-full-width.nav-pale-bg .tab-pane > .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { border-top-color: #f2f1ed; } .tabs-full-width.nav-upper-bg-transparent .tab-pane > .stripe.v-notch::after, .tabs-full-width.nav-dark-colored-gradient-bg .tab-pane > .stripe.v-notch::after, .tabs-full-width.nav-dark-colored-pattern-bg .tab-pane > .stripe.v-notch::after, .tabs-full-width.nav-upper-bg-transparent .tab-pane > .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .tabs-full-width.nav-dark-colored-gradient-bg .tab-pane > .stripe.v-notch.v-notch-stick-heading .columns:first-child::before, .tabs-full-width.nav-dark-colored-pattern-bg .tab-pane > .stripe.v-notch.v-notch-stick-heading .columns:first-child::before { border-top-color: #5d6275; } .tabs-full-width .tabs-nav .tabs-list { list-style: none; margin: 0; padding: 0; } .tabs-full-width .tabs-nav .tabs-list li { display: inline-block; margin: 0 30px 0 0; } .tabs-full-width .tabs-nav .tabs-list li:last-child { margin-right: 0; } .tabs-full-width .tabs-nav .tabs-list a { display: block; padding-bottom: 2px; border-bottom: 2px solid transparent; } .tabs-full-width .tabs-nav .tabs-list li.active a { color: #444a61; border-bottom-color: #f5ae3d; } /* for dark colored background */ .tabs-full-width .tabs-nav .dark-colored-bg .tabs-list a { color: #dadde8; } .tabs-full-width .tabs-nav .dark-colored-bg .tabs-list a:hover { color: #fff; } .tabs-full-width .tabs-nav .dark-colored-bg .tabs-list li.active a { color: #d9e0ff; border-bottom-color: #d9e0ff; } /* for secondary color background */ .tabs-full-width .tabs-nav .stripe-secondary-color-bg .tabs-list a { color: #fff; } .tabs-full-width .tabs-nav .stripe-secondary-color-bg .tabs-list a:hover { color: #f5f5f5; } .tabs-full-width .tabs-nav .stripe-secondary-color-bg .tabs-list li.active a { color: #664b1f; border-bottom-color: #664b1f; } .tabs-full-width .tabs-content .tab-pane { display: none; } .tabs-full-width .tabs-content .tab-pane:first-child { display: block; } /* Media queries --------------------------------------------------- */ @media (min-width: 992px) and (max-width: 1199px) { .tabs .tabs-nav .tabs-list li { margin-right: 25px; } } @media (max-width: 991px) { .tabs-full-width .tabs-nav .tabs-list li { line-height: 1.3; margin: 0 20px 5px 0; } .tabs-full-width .tabs-nav .tabs-list a { padding-bottom: 0; border-bottom-width: 1px; } /* for dark colored & secondary color background */ .tabs-full-width .tabs-nav .dark-colored-bg .tabs-list a, .tabs-full-width .tabs-nav .stripe-secondary-color-bg .tabs-list a { border-bottom-style: dotted; } } @media (min-width: 768px) and (max-width: 991px) { .tabs .tabs-nav .tabs-list li { margin-right: 20px; } } @media (max-width: 767px) { .tabs .tabs-nav .tabs-list li { line-height: 1.5; margin: 0 20px 5px 0; } } /*-----------------------------------------------------------------------------------*/ /* 19. Accordion / Toggle /*-----------------------------------------------------------------------------------*/ .toggle-trigger { position: relative; border-top: 1px dotted #ccc; padding: 16px 60px 16px 0; cursor: pointer; } .toggle-trigger:first-child { border-top: none; margin-top: -16px; } .toggle-trigger::after { position: absolute; display: block; top: 50%; right: 10px; width: 28px; height: 28px; margin-top: -14px; font-family: FontAwesome; content: "\f107"; font-size: 28px; line-height: 1; color: #8d92a6; text-align: center; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .toggle-trigger.active::after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .toggle-trigger a { display: block; padding: 0; } .toggle-trigger .title { margin-bottom: 0; } .toggle-trigger .title a{ font-family: "Quattrocento Sans", Arial, "Helvetica Neue", Helvetica, sans-serif ; font-size: 20px; color: #3e4d87; font-weight: 600; text-decoration: none; } .toggle-trigger:hover a, .toggle-trigger:hover::after { color: #5f73c2; } .toggle-container .toggle-content { font-family: "Quattrocento Sans", Arial, "Helvetica Neue", Helvetica, sans-serif ; padding: 0 0 35px; font-size: 16px; line-height: 22px; } .toggle-container:last-child .toggle-content { padding-bottom: 16px; } .toggle-container .toggle-content > *:last-child { margin-bottom: 0; } /*-----------------------------------------------------------------------------------*/ /* 20. Stat Data /*-----------------------------------------------------------------------------------*/ .stripe-bottom:not(.stripe-narrow) .stat-data[class*="-cols"] { margin-bottom: 15px; } .stat-data[class*="-cols"] .columns { position: relative; } .stat-data[class*="-cols"] .columns::before { position: absolute; display: block; right: -1px; top: -80px; bottom: -80px; border-left-style: dashed; border-left-color: #ccc; content: ""; } .stat-data.stat-2-cols .columns::before { border-left-width: 3px; } .stat-data.stat-3-cols .columns::before { border-left-width: 2px; } .stat-data[class*="-cols"] .columns:last-child::before { display: none; } .stripe-bottom .stat-data[class*="-cols"] .columns::before { top: -70px; bottom: -70px; } .stripe-narrow .stat-data[class*="-cols"] .columns::before, .stripe-bottom.stripe-narrow .stat-data[class*="-cols"] .columns::before { top: -50px; bottom: -50px; } .stat-data > article { margin-top: 25px; } .stat-data > article:first-child { margin-top: 0; } .stat-data.stat-2-cols article { text-align: center; } .stat-data .fact-number { font: 42px/1 Verdana, Geneva, sans-serif; margin-bottom: 15px; } .stat-data.stat-2-cols .fact-number { font-size: 48px; margin-bottom: 3px; } .stat-data .fact-title { margin-bottom: 10px; } .stat-data .fact-title .title { color: #d99a36; margin-bottom: 0; } .stat-data .fact-statement p { font-size: 19px; line-height: 1.2; margin-bottom: 0; } .stat-data.stat-2-cols .fact-statement p { line-height: 1.5; } /* for dark colored background */ .dark-colored-bg .stat-data[class*="-cols"] .columns::before { border-left-color: #b5b5b5; } .dark-colored-bg .stat-data.stat-2-cols .fact-number { color: #fff; } .dark-colored-bg .stat-data.stat-3-cols .fact-number { color: #dadde8; } .dark-colored-bg .stat-data .fact-title .title { color: #f5cb87; } .dark-colored-bg .stat-data.stat-2-cols .fact-statement p { color: #e5e5e5; } .dark-colored-bg .stat-data.stat-3-cols .fact-statement p { color: #fff; } /* for secondary color background */ .stripe-secondary-color-bg .stat-data[class*="-cols"] .columns::before { border-left-color: rgba(102, 75, 31, 0.5); /* #664b1f */ } .stripe-secondary-color-bg .stat-data .fact-number, .stripe-secondary-color-bg .stat-data .fact-statement p { color: #fff; } .stripe-secondary-color-bg .stat-data .fact-title .title { color: #664b1f; } /* Media queries --------------------------------------------------- */ @media (min-width: 1520px) { .stat-data.stat-2-cols { margin-left: -40px; margin-right: -40px; } .stat-data.stat-2-cols article { margin-left: 40px; margin-right: 40px; } .stat-data.stat-3-cols { margin-left: -35px; margin-right: -35px; } .stat-data.stat-3-cols article { margin-left: 35px; margin-right: 35px; } } @media (min-width: 1200px) and (max-width: 1519px) { .stat-data.stat-2-cols { margin-left: -35px; margin-right: -35px; } .stat-data.stat-2-cols article { margin-left: 35px; margin-right: 35px; } .stat-data.stat-3-cols { margin-left: -30px; margin-right: -30px; } .stat-data.stat-3-cols article { margin-left: 30px; margin-right: 30px; } } @media (min-width: 992px) and (max-width: 1199px) { .stat-data.stat-2-cols { margin-left: -30px; margin-right: -30px; } .stat-data.stat-2-cols article { margin-left: 30px; margin-right: 30px; } .stat-data.stat-3-cols { margin-left: -15px; margin-right: -15px; } .stat-data.stat-3-cols article { margin-left: 15px; margin-right: 15px; } } @media (min-width: 768px) { .stat-data[class*="-cols"] .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .stat-data[class*="-cols"] .columns { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } } @media (min-width: 768px) and (max-width: 991px) { .stat-data.stat-2-cols { margin-left: -25px; margin-right: -25px; } .stat-data.stat-2-cols article { margin-left: 25px; margin-right: 25px; } .stat-data.stat-3-cols { margin-left: -7px; margin-right: -7px; } .stat-data.stat-3-cols article { margin-left: 7px; margin-right: 7px; } } @media (max-width: 767px) { .stat-data.stat-2-cols .columns article { margin-top: 35px; } .stat-data.stat-3-cols .columns article { margin-top: 30px; } .stat-data[class*="-cols"] .columns:first-child article { margin-top: 0; } .stat-data[class*="-cols"] .columns::before { display: none; } } /*-----------------------------------------------------------------------------------*/ /* 21. Diagrams /*-----------------------------------------------------------------------------------*/ /* Venn diagram --------------------------------------------------- */ .venn-diagram { position: relative; margin-top: 10px; } .venn-diagram .circle { float: left; width: 250px; height: 250px; background-color: rgba(237, 95, 74, 0.85); /* #ed5f4a */ border: 2px solid #ed5f4a; -webkit-border-radius: 50%; border-radius: 50%; } .venn-diagram.three-sets .circle1 { margin-top: 130px; /* 130px = (250px - 40%) * 0.866 */ margin-right: -175px; /* 175px = 250px - (250px - 40%) * 0.5 */ } .venn-diagram.three-sets .circle3 { margin-top: 130px; /* 130px =(250px - 40%) * 0.866 */ margin-left: -175px; /* 175px = 250px - (250px - 40%) * 0.5 */ } .venn-diagram.three-sets .overlap { position: absolute; top: 180px; left: 150px; /* 150px = (250px - 20%) - 100px/2 */ width: 100px; height: 70px; } .venn-diagram .label-wrapper { position: relative; display: table; width: 100%; height: 100%; } .venn-diagram.three-sets .circle1 .label-wrapper { width: 160px; margin-top: 15px; margin-left: 10px; z-index: 1; } .venn-diagram.three-sets .circle2 .label-wrapper { height: 70%; z-index: 2; } .venn-diagram.three-sets .circle3 .label-wrapper { width: 160px; margin-top: 15px; margin-left: 75px; z-index: 3; } .venn-diagram .label { display: table-cell; font-size: 20px; line-height: 1.1; font-weight: 700; color: #fff; text-align: center; vertical-align: middle; } .venn-diagram .circle .label { text-transform: uppercase; } .venn-diagram .overlap .label { font-style: italic; } /* Two sets */ .venn-diagram.two-sets .circle2 { margin-top: 125px; /* 125px = 250px - 50% */ margin-left: -250px; } .venn-diagram.two-sets .circle1 .label-wrapper { height: 65%; z-index: 1; } .venn-diagram.two-sets .circle2 .label-wrapper { height: 65%; margin-top: 35%; z-index: 2; } .venn-diagram.two-sets .overlap { position: absolute; top: 50%; left: 30px; width: 190px; height: 90px; margin-top: -45px; } /* Bar chart --------------------------------------------------- */ .bar-chart { margin-top: 10px; } .bar-chart .bar-group { display: table-cell; border-left: 1px solid #e5e5e5; padding: 20px 0; } .bar-chart .bar-group:first-child { border-left: none; } .bar-chart .bar-wrapper { display: table-cell; } .bar-chart .bar { position: relative; display: block; width: 37px; height: 40px; } .bar-chart .light-bar { background-color: #cecece; background: -webkit-linear-gradient(top, #e7e7e7, #bdbdbd); background: -o-linear-gradient(top, #e7e7e7, #bdbdbd); background: linear-gradient(to bottom, #e7e7e7, #bdbdbd); } .bar-chart .dark-bar { background-color: #7e7e7e; background: -webkit-linear-gradient(top, #b1b1b1, #5a5a5a); background: -o-linear-gradient(top, #b1b1b1, #5a5a5a); background: linear-gradient(to bottom, #b1b1b1, #5a5a5a); } .bar-chart .colored-bar { background-color: #ed5f4a; } .bar-chart .colored-bar::before { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, #f5ae3d, rgba(245, 174, 61, 0)); background: -o-linear-gradient(top, #f5ae3d, rgba(245, 174, 61, 0)); background: linear-gradient(to bottom, #f5ae3d, rgba(245, 174, 61, 0)); /* #f5ae3d */ content: ""; } .bar-chart .bar-wrapper.negative { padding-bottom: 60px; } .bar-chart .bar-wrapper.negative .bar { height: 60px; margin-bottom: -59px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* Media queries --------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .venn-diagram .circle { width: 240px; height: 240px; } .venn-diagram.three-sets .circle1 { margin-top: 125px; /* 125px = (240px - 40%) * 0.866 */ margin-right: -168px; /* 168px = 240px - (240px - 40%) * 0.5 */ } .venn-diagram.three-sets .circle3 { margin-top: 125px; /* 125px =(240px - 40%) * 0.866 */ margin-left: -168px; /* 168px = 240px - (240px - 40%) * 0.5 */ } .venn-diagram.three-sets .overlap { top: 170px; left: 147px; /* 147px = (240px - 20%) - 90px/2 */ width: 90px; } .venn-diagram.three-sets .circle1 .label-wrapper { width: 155px; } .venn-diagram.three-sets .circle3 .label-wrapper { width: 155px; margin-left: 70px; } .venn-diagram .label { font-size: 19px; } .venn-diagram.two-sets .circle2 { margin-top: 120px; /* 120px = 240px - 50% */ margin-left: -240px; } .venn-diagram.two-sets .overlap { width: 180px; } .bar-chart .bar { width: 33px; } } @media (min-width: 768px) and (max-width: 991px) { .col-sm-6 .venn-diagram .circle, .col-sm-7 .venn-diagram .circle, .col-sm-8 .venn-diagram .circle { width: 210px; height: 210px; } .col-sm-6 .venn-diagram.three-sets .circle1, .col-sm-7 .venn-diagram.three-sets .circle1, .col-sm-8 .venn-diagram.three-sets .circle1 { margin-top: 109px; /* 109px = (210px - 40%) * 0.866 */ margin-right: -147px; /* 147px = 210px - (210px - 40%) * 0.5 */ } .col-sm-6 .venn-diagram.three-sets .circle3, .col-sm-7 .venn-diagram.three-sets .circle3, .col-sm-8 .venn-diagram.three-sets .circle3 { margin-top: 109px; /* 109px = (210px - 40%) * 0.866 */ margin-left: -147px; /* 147px = 210px - (210px - 40%) * 0.5 */ } .col-sm-6 .venn-diagram.three-sets .overlap, .col-sm-7 .venn-diagram.three-sets .overlap, .col-sm-8 .venn-diagram.three-sets .overlap { top: 145px; left: 123px; /* 123px = (210px - 20%) - 90px/2 */ width: 90px; } .col-sm-6 .venn-diagram.three-sets .circle1 .label-wrapper, .col-sm-7 .venn-diagram.three-sets .circle1 .label-wrapper, .col-sm-8 .venn-diagram.three-sets .circle1 .label-wrapper { width: 135px; } .col-sm-6 .venn-diagram.three-sets .circle3 .label-wrapper, .col-sm-7 .venn-diagram.three-sets .circle3 .label-wrapper, .col-sm-8 .venn-diagram.three-sets .circle3 .label-wrapper { width: 135px; margin-left: 55px; } .col-sm-6 .venn-diagram .label, .col-sm-7 .venn-diagram .label, .col-sm-8 .venn-diagram .label { font-size: 18px; line-height: 20px; } .col-sm-6 .venn-diagram.two-sets .circle2, .col-sm-7 .venn-diagram.two-sets .circle2, .col-sm-8 .venn-diagram.two-sets .circle2 { margin-top: 105px; /* 105px = 210px - 50% */ margin-left: -210px; } .col-sm-6 .venn-diagram.two-sets .overlap, .col-sm-7 .venn-diagram.two-sets .overlap, .col-sm-8 .venn-diagram.two-sets .overlap { width: 150px; } .col-sm-6 .bar-chart .bar, .col-sm-7 .bar-chart .bar, .col-sm-8 .bar-chart .bar { width: 28px; } } @media (min-width: 480px) and (max-width: 767px) { .venn-diagram.three-sets { width: 400px !important; max-width: none; } .venn-diagram.two-sets { width: 250px !important; } .bar-chart.four-sets { width: 423px !important; } .bar-chart .bar { width: 35px; } } @media (max-width: 479px) { .venn-diagram.three-sets { width: 295px !important; max-width: none; } .venn-diagram.two-sets { width: 184px !important; } .venn-diagram .circle { width: 184px; height: 184px; } .venn-diagram.three-sets .circle1 { margin-top: 96px; /* 96px = (184px - 40%) * 0.866 */ margin-right: -129px; /* 129px = 184px - (184px - 40%) * 0.5 */ } .venn-diagram.three-sets .circle3 { margin-top: 96px; /* 96px = (184px - 40%) * 0.866 */ margin-left: -129px; /* 129px = 184px - (184px - 40%) * 0.5 */ } .venn-diagram.three-sets .overlap { top: 125px; left: 107px; /* 107px = (184px - 20%) - 80px/2 */ width: 80px; } .venn-diagram.three-sets .circle1 .label-wrapper { width: 115px; } .venn-diagram.three-sets .circle3 .label-wrapper { width: 115px; margin-left: 40px; } .venn-diagram .label { font-size: 17px; line-height: 19px; } .venn-diagram.two-sets .circle2 { margin-top: 92px; /* 92px = 184px - 50% */ margin-left: -184px; } .venn-diagram.two-sets .overlap { width: 124px; } .bar-chart.four-sets { width: 291px !important; } .bar-chart .bar { width: 24px; } } /*-----------------------------------------------------------------------------------*/ /* 22. Blog /*-----------------------------------------------------------------------------------*/ /* Category navigation --------------------------------------------------- */ .category-navigation { list-style: none; padding: 0; margin: -5px 0 35px; text-align: center; } #page-content .stripe-category-nav .category-navigation { margin: 0 0 -10px; } .category-navigation li { display: inline-block; margin: 0 15px 10px 0; } .category-navigation li:last-child { margin-right: 0; } .category-navigation li a { display: block; font-size: 19px; line-height: 1.25; font-weight: bold; color: #606680; padding: 2px 3px; } .category-navigation li a:hover { color: #1f2438; } /* Blog - list layout --------------------------------------------------- */ .blog-list-layout article { position: relative; margin-left: -20px; padding: 50px 0 50px 20px; } .blog-list-layout article .entry-wrapper { position: relative; } .blog-list-layout article:first-child { padding-top: 0; } .blog-list-layout article:last-child { padding-bottom: 0; } .blog-list-layout article::before { position: absolute; display: block; top: 0; right: 0; width: 100%; height: 2px; background-color: #dedede; background: -webkit-linear-gradient(right, rgba(222, 222, 222, 0), #dedede 800px, #dedede); background: -o-linear-gradient(right, rgba(222, 222, 222, 0), #dedede 800px, #dedede); background: linear-gradient(to left, rgba(222, 222, 222, 0), #dedede 800px, #dedede); content: ""; } .blog-list-layout article:first-child::before { background: none; } /* Post date */ .blog-list-layout article .post-date { position: absolute; top: 0; left: 0; width: 90px; padding-right: 20px; text-align: right; } .blog-list-layout article .post-date .day { display: block; font: 56px/1 Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #8d92a6; letter-spacing: -2px; } .blog-list-layout article .post-date .month { display: block; margin-top: 2px; padding-right: 4px; font: 700 13px/22px Arial, "Helvetica Neue", Helvetica, sans-serif; color: #8d92a6; text-transform: uppercase; white-space: nowrap; } .blog-list-layout article .post-date::after { position: absolute; display: block; top: 9px; right: 0; width: 5px; height: 76px; background-color: #e5e5e5; content: ""; -webkit-transform: skew(-8deg); -ms-transform: skew(-8deg); -o-transform: skew(-8deg); transform: skew(-8deg); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } /* Post content */ .blog-list-layout article .post-content { margin-left: 150px; } .blog-list-layout article .post-content .title { margin-bottom: 0; } .blog-list-layout article .post-content .title a { color: inherit; padding: 5px 0; } .blog-list-layout article .post-content .title a:hover { color: #606680; } .blog-list-layout article .post-meta { font-size: 15px; color: #909090; font-style: italic; margin-top: 10px; } .blog-list-layout article .post-meta a { color: #d99a36; font-weight: bold; } .blog-list-layout article .post-meta a:hover { color: #606680; } .blog-list-layout article .post-media { margin-top: 15px; } .blog-list-layout article .post-excerpt { margin-top: 15px; } .blog-list-layout article .post-media + .post-excerpt { margin-top: 30px; } .blog-list-layout article .post-excerpt p:last-of-type { margin-bottom: 0; } .blog-list-layout article .post-excerpt .button { border-width: 1px; margin-top: 25px; } /* Blog - grid layout --------------------------------------------------- */ .blog-grid-layout { margin: 0 -15px; } .blog-grid-layout article { margin: 60px 15px 0; background-color: #fff; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); } .blog-grid-layout article .post-content { position: relative; } /* Post tag */ .blog-grid-layout article .post-category { font-size: 15px; padding: 15px 20px 0; } .blog-grid-layout article .post-category a { color: #d99a36; font-weight: bold; } .blog-grid-layout article .post-category a:hover { color: #ebac46; } /* Post description */ .blog-grid-layout article .post-description { position: relative; padding: 25px 20px; } .blog-grid-layout article .post-category + .post-description { padding-top: 0; } .blog-grid-layout article .post-description .title { margin-bottom: 0; color: inherit; overflow: hidden; } .blog-grid-layout article .post-description h2.title { height: 90px; /* 3 x line-height */ font-size: 20px; line-height: 1.5; font-weight: bold; } .blog-grid-layout article .post-description .title a { color: inherit; padding: 5px 0; } .blog-grid-layout article .post-description .title a:hover { color: #606680; } /* Post meta */ .blog-grid-layout article .post-meta { position: relative; font-size: 15px; color: #a5a5a5; padding: 10px 20px 12px; border-top: 1px solid rgba(245, 203, 135, 0.5); /* #f5cb87 */ } .blog-grid-layout article .post-meta a { color: #606680; font-style: italic; } .blog-grid-layout article .post-meta a:hover { text-decoration: underline; } /* Media queries --------------------------------------------------- */ @media (min-width: 992px) { .blog-grid-layout .col-md-4:nth-child(1) article, .blog-grid-layout .col-md-4:nth-child(2) article, .blog-grid-layout .col-md-4:nth-child(3) article { margin-top: 0; } } @media (min-width: 992px) and (max-width: 1199px) { .blog-list-layout article .post-date { width: 80px; padding-right: 15px; } .blog-list-layout article .post-date .day { font-size: 52px; letter-spacing: 0; } .blog-list-layout article .post-date::after { height: 70px; } .blog-list-layout article .post-content { margin-left: 130px; } .blog-grid-layout { margin: 0; } .blog-grid-layout article { margin: 30px 0 0; } .blog-grid-layout article .post-content::after { display: none !important; } .blog-grid-layout article .post-meta { padding-left: 15px; padding-right: 15px; } } @media (max-width: 991px) { .blog-list-layout article { margin: 0; padding: 50px 0; } .blog-list-layout article::before { height: 1px; background: #dedede; } } @media (min-width: 768px) { .blog-grid-layout article .post-content::before { position: absolute; display: block; right: 0; bottom: -35px; height: 110px; content: '"'; font: italic 300px/1 "Times New Roman", Times, serif; color: rgba(141, 146, 166, 0.03); /* #8d92a6 */ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } @media (min-width: 768px) and (max-width: 991px) { .category-navigation li { margin: 0 10px 8px 0; } .category-navigation li a { font-size: 18px; } .blog-grid-layout { margin-left: -5px; margin-right: -5px; } .blog-grid-layout article { margin: 40px 5px 0; } /* 3 columns >> 2 columns */ .blog-grid-layout .col-sm-6:nth-child(1) article, .blog-grid-layout .col-sm-6:nth-child(2) article { margin-top: 0; } } @media (max-width: 767px) { .category-navigation li { margin: 0 10px 7px 0; } .category-navigation li a { font-size: 17px; } .blog-grid-layout article { max-width: 540px; /* the width is limited to 540px */ margin-right: auto; margin-left: auto; } .blog-grid-layout .columns:first-child article { margin-top: 0; } .blog-grid-layout article .post-description .title { height: auto !important; overflow: visible; } .blog-grid-layout article .post-description h2.title { min-height: 45px; /* 1.5 x line-height */ } } @media (min-width: 480px) and (max-width: 767px) { .blog-list-layout article .post-date { width: 66px; padding-right: 15px; } .blog-list-layout article .post-date .day { font-size: 42px; letter-spacing: 0; } .blog-list-layout article .post-date .month { padding-right: 2px; font-size: 12px; line-height: 19px; } .blog-list-layout article .post-date::after { top: 6px; width: 4px; height: 60px; } .blog-list-layout article .post-content { margin-left: 110px; } .blog-grid-layout .columns { padding-left: 15%; padding-right: 15%; } } @media (max-width: 479px) { .blog-list-layout article .post-date { position: static; display: block; width: auto; margin-bottom: 5px; padding: 0; text-align: left; } .blog-list-layout article .post-date .day, .blog-list-layout article .post-date .month { display: inline; font: inherit; font-weight: bold; } .blog-list-layout article .post-date .day { letter-spacing: 0; } .blog-list-layout article .post-date .month { margin: 0; padding: 0; } .blog-list-layout article .post-date::after { display: none; } .blog-list-layout article .post-content { margin-left: 0; } .blog-grid-layout { margin: 0; } } /*-----------------------------------------------------------------------------------*/ /* 23. Pagination /*-----------------------------------------------------------------------------------*/ .post-pagination { margin-top: 50px; margin-bottom: 20px; } .blog-posts.blog-list-layout + .post-pagination { position: relative; margin-left: -20px; padding: 35px 0 0 20px; } .blog-posts.blog-list-layout + .post-pagination::before { position: absolute; display: block; top: 0; right: 0; width: 100%; height: 2px; background-image: -webkit-linear-gradient(right, rgba(222, 222, 222, 0), #dedede 800px, #dedede); background-image: -o-linear-gradient(right, rgba(222, 222, 222, 0), #dedede 800px, #dedede); background-image: linear-gradient(to left, rgba(222, 222, 222, 0), #dedede 800px, #dedede); content: ""; } .blog-posts.blog-grid-layout + .post-pagination { margin-top: 55px; margin-bottom: 0; text-align: center; } .post-pagination a, .post-pagination > span { display: inline-block; width: 40px; height: 40px; font: 18px/40px Verdana, Geneva, sans-serif; text-align: center; background-color: transparent; margin: 0 2px; -webkit-border-radius: 35px; border-radius: 35px; } .post-pagination a:first-child, .post-pagination > span:first-child, .post-pagination > span.current:first-child { margin-left: 0; } .post-pagination a:last-child, .post-pagination > span:last-child, .post-pagination > span.current:last-child { margin-right: 0; } .post-pagination span.current { color: #666; background-color: #eee; margin: 0 8px; } .stripe-light-grey-bg .post-pagination span.current { background-color: #fff; } .post-pagination span.dots { color: #666; } .post-pagination .prev .ion, /* vector icons - Ionicons */ .post-pagination .next .ion { font-size: 18px; } /* Media queries --------------------------------------------------- */ @media (max-width: 991px) { .blog-posts.blog-list-layout + .post-pagination { margin-left: 0; padding-left: 0; } .blog-posts.blog-list-layout + .post-pagination::before { height: 1px; background: #dedede; } } @media (max-width: 479px) { .post-pagination a, .post-pagination > span { width: 36px; height: 36px; font-size: 17px; line-height: 36px; margin: 0; } .post-pagination span.current { margin: 0 6px; } } /*-----------------------------------------------------------------------------------*/ /* 24. Single Post /*-----------------------------------------------------------------------------------*/ /* Post media */ .single-post .blog-posts .post-media { margin: 10px 0 40px; } /* Post content */ .single-post .blog-posts .post-content p:last-child, .single-post .blog-posts .post-content ul:last-child, .single-post .blog-posts .post-content ol:last-child, .single-post .blog-posts .post-content blockquote:last-child { margin-bottom: 0; } /* Post details --------------------------------------------------- */ .single-post-details { margin: 10px 0 70px; } /* Author info */ .single-post-details .post-author .author-info .title { text-align: center; margin: 7px 0 0; } .single-post-details .post-author .author-info .subtitle { text-align: center; margin-bottom: 0; } /* Post share - at the right side */ .single-post-details .post-share { margin-top: 30px; padding-top: 30px; border-top: 2px solid rgba(245, 203, 135, 0.5); /* #f5cb87 */ } .single-post-details .post-share .title { text-align: center; margin-bottom: 10px; } .single-post-details .post-share .social-share { text-align: center; } /* Social share icons */ .fa-icon-list.social-share li a { display: block; width: 44px; height: 44px; text-align: center; background-color: rgba(255, 255, 255, 0.4); border: 2px solid #e5e5e5; -webkit-border-radius: 50%; border-radius: 50%; } .fa-icon-list.social-share li a:hover { border-color: rgba(237, 95, 74, 0.7); /* #ed5f4a */ } .fa-icon-list.social-share li .fa { line-height: 40px; color: #ed5f4a; } /* Post share - below the article text */ .single-post .blog-posts article .post-share { margin-top: 40px; } .single-post .blog-posts article .post-share .title { float: left; color: #666; margin: 0 15px 0 0; padding-top: 4px; } .single-post .blog-posts article .post-share .social-share li a { width: 38px; height: 38px; } .single-post .blog-posts article .post-share .social-share li .fa { font-size: 16px; line-height: 34px; } /* Post tags */ .single-post-details .post-tags { margin-top: 40px; padding-top: 30px; border-top: 2px solid rgba(245, 203, 135, 0.5); /* #f5cb87 */ } .single-post-details .post-tags .title { text-align: center; margin-bottom: 10px; } .single-post-details .post-tags .tagcloud { text-align: center; line-height: 22px; } .single-post-details .post-tags .tagcloud a { font: 700 13px/22px Verdana, Geneva, sans-serif; color: #777; } .single-post-details .post-tags .tagcloud a::after { font-weight: normal; content: ", "; } .single-post-details .post-tags .tagcloud a:last-child::after { content: ""; } .single-post-details .post-tags .tagcloud a:hover { color: #444; } /* Comments --------------------------------------------------- */ .single-post .blog-posts article + .stripe { margin-top: 60px; } #comments > .title:first-child { margin-bottom: 50px; } .comment-list { list-style: none; margin: 30px 0 0; padding: 0; } .comment-list .comment { border-top: 1px dotted #b5b5b5; margin: 30px 0 0; padding: 25px 0 0; } .comment-list .comment:first-child { border: none; margin-top: 0; padding-top: 0; } .comment-list article { border: none; margin: 0; padding: 0; } .comment-list .comment-avatar { float: left; width: 62px; height: 62px; margin-bottom: 10px; } .comment-list .comment-avatar img { border: 1px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; } .comment-list .comment-meta { margin: 0 0 10px 85px; } .comment-list .comment-meta span { padding: 0 6px 0 3px; } .comment-list .comment-meta .date { display: block; font-size: 15px; font-style: italic; } .comment-list .comment-meta .date a { color: #909090; } .comment-list .comment-meta .date a:hover, .comment-list .comment-meta .date a:hover * { color: #666; } .comment-list .comment-content { margin-left: 85px; word-wrap: break-word; } .comment-list .comment-content > *:last-child { margin-bottom: 0; } .comment-list.avatars-disabled .comment-meta, .comment-list.avatars-disabled .comment-content { margin-left: 0; } .comment-list .comment-content p { font-size: 16px; margin-bottom: 15px; } .comment-list .comment-reply-link { float: right; font-size: 15px; color: #666; } .comment-list .comment-reply-link .ion { /* vector icons - Ionicons */ margin-right: 5px; } .comment-list .comment-reply-link:hover { text-decoration: underline; } .comment-list .comment .children { list-style: none; margin: 0; padding: 0 0 0 50px; } .comment-list .comment .children .comment { border-top: 1px dotted #b5b5b5; margin: 30px 0 0; padding-top: 25px; } /* Media queries --------------------------------------------------- */ @media (min-width: 992px) { .single-post-details .post-author .author-image { width: 160px; margin: 0 auto; text-align: center; } .single-post-details .post-author .author-image img { display: inline; } } @media (max-width: 991px) { .single-post-details { margin: -20px 0 0; } .single-post-details .post-author .author-image, .single-post-details .post-author .author-info .subtitle, .single-post-details .post-share, .single-post-details .post-tags { display: none; } .single-post-details .post-author .author-info .title { font-size: inherit; font-weight: normal; text-align: left; margin-bottom: 5px; } .single-post-details .post-author .author-info .title::before { content: "Posted by "; } } @media (max-width: 767px) { .single-post-details { margin-top: -30px; } } @media (max-width: 479px) { .comment-list .comment-meta, .comment-list .comment-content { margin-left: 75px; } .comment-list .comment .children { list-style: none; padding: 0 0 0 30px; } } /*-----------------------------------------------------------------------------------*/ /* 25. Recent Posts & Related Posts /*-----------------------------------------------------------------------------------*/ /* Recent Posts --------------------------------------------------- */ .recent-posts.picture-boxes .box-text { margin-top: 15px; } .recent-posts.picture-boxes .box-text p, .recent-posts.picture-boxes .box-text .post-meta { font-size: 15px; font-style: italic; color: #666; margin-top: 5px; } /* for dark colored background */ .dark-colored-bg .recent-posts.picture-boxes .box-image img { border-width: 0; } .dark-colored-bg .recent-posts.picture-boxes.round-image .box-image img { border-width: 3px; } .dark-colored-bg .recent-posts.picture-boxes .box-text p, .dark-colored-bg .recent-posts.picture-boxes .box-text .post-meta { color: #dadde8; } /* for secondary color background */ .stripe-secondary-color-bg .recent-posts.picture-boxes .box-text p, .stripe-secondary-color-bg .recent-posts.picture-boxes .box-text .post-meta { color: #fff; } /* Related Posts --------------------------------------------------- */ .related-posts article { text-align: center; } .related-posts article .title { font-family: inherit; margin-bottom: 0; } .related-posts article .title a { padding: 5px 0; } .related-posts article .post-meta { margin-top: 10px; } .related-posts article .post-date { color: #666; } .related-posts article .post-category a { color: #d99a36; margin-left: 10px; } .related-posts article .post-category a:hover { text-decoration: underline; } /* for primary color background */ .stripe-left-col-fullwidth-grey.stripe-primary-color-bg .related-posts .columns:last-child article .post-date, .stripe-right-col-fullwidth-grey.stripe-primary-color-bg .related-posts .columns:first-child article .post-date { color: #dadde8; } .stripe-left-col-fullwidth-grey.stripe-primary-color-bg .related-posts .columns:last-child article .post-category a, .stripe-right-col-fullwidth-grey.stripe-primary-color-bg .related-posts .columns:first-child article .post-category a { color: #f5cb87; } /* for secondary color background */ .stripe-left-col-fullwidth-grey.stripe-secondary-color-bg .related-posts .columns:last-child article .post-date, .stripe-right-col-fullwidth-grey.stripe-secondary-color-bg .related-posts .columns:first-child article .post-date { color: #f5f5f5; } .stripe-left-col-fullwidth-grey.stripe-secondary-color-bg .related-posts .columns:last-child article .post-category a, .stripe-right-col-fullwidth-grey.stripe-secondary-color-bg .related-posts .columns:first-child article .post-category a { color: #664b1f; } /* Media queries --------------------------------------------------- */ @media (min-width: 992px) { .recent-posts.picture-boxes.round-image .box-image { width: 140px !important; } } @media (min-width: 768px) and (max-width: 991px) { .recent-posts.picture-boxes.round-image .box-image { width: 120px !important; } /* 4 columns */ .recent-posts.picture-boxes .col-sm-3 article h6 { font-size: 17px; } } @media (min-width: 480px) and (max-width: 767px) { .recent-posts.picture-boxes.round-image .box-image { width: 130px !important; } } @media (max-width: 479px) { .recent-posts.picture-boxes.round-image .box-image { width: 170px !important; } } /*-----------------------------------------------------------------------------------*/ /* 26. Split Sections /*-----------------------------------------------------------------------------------*/ .split-sections .box-text { position: relative; display: table-cell; background-color: #f5f5f5; vertical-align: middle; text-align: center; } .split-sections .box-text p { margin-bottom: 15px; } .split-sections .box-text > *:last-child { margin-bottom: 0; } /* Media queries --------------------------------------------------- */ @media (max-width: 991px) { .split-sections .box-image { margin-top: 60px; } .split-sections .row:first-child .box-image { margin-top: 0; } .split-sections .columns, .split-sections .box-text, .split-sections .box-image { height: auto; } .split-sections .box-text { padding: 35px 40px 40px; } } @media (max-width: 479px) { .split-sections .box-text { padding: 30px 30px 35px; } } @media (min-width: 992px) { .split-sections .row:nth-child(odd) .columns:first-child { float: right; } .split-sections .row:nth-child(odd) .columns:nth-child(odd), .split-sections .row:nth-child(even) .columns:nth-child(even) { padding-left: 0; overflow: hidden; } .split-sections .row:nth-child(odd) .columns:nth-child(even), .split-sections .row:nth-child(even) .columns:nth-child(odd) { padding-right: 0; overflow: hidden; } .split-sections .box-text::after { position: absolute; display: block; left: 0; bottom: 0; width: 100%; height: 40px; content: ""; background-image: -webkit-linear-gradient(bottom, #f5f5f5 20px, rgba(245, 245, 245, 0)); background-image: -o-linear-gradient(bottom, #f5f5f5 20px, rgba(245, 245, 245, 0)); background-image: linear-gradient(to top, #f5f5f5 20px, rgba(245, 245, 245, 0)); } .split-sections .box-image { overflow: hidden; } .split-sections .box-image figure { position: relative; left: 0; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } } @media (min-width: 992px) and (max-width: 1199px) { .split-sections .columns, .split-sections .box-text, .split-sections .box-image { height: 350px; } .split-sections .box-text { padding: 30px 40px; } } @media (min-width: 1200px) and (max-width: 1519px) { .split-sections .columns, .split-sections .box-text, .split-sections .box-image { height: 380px; } .split-sections .box-text { padding: 30px 50px; } } @media (min-width: 1520px) { .split-sections .columns, .split-sections .box-text, .split-sections .box-image { height: 400px; } .split-sections .box-text { padding: 30px 60px; } } /*-----------------------------------------------------------------------------------*/ /* 27. Twitter Feed /*-----------------------------------------------------------------------------------*/ .twitter-feed .tweet_list { list-style: none; margin: 0; padding: 0; } .twitter-feed .tweet_list li { margin-bottom: 15px; word-wrap: break-word; } .twitter-feed .tweet_even:last-child, .twitter-feed .tweet_odd:last-child { margin-bottom: 0; } .twitter-feed .tweet_text { display: block; } .twitter-feed .tweet_time { display: block; font-size: 15px; font-style: italic; margin-top: 5px; } .twitter-feed .tweet_text, .twitter-feed .tweet_time { margin-left: 23px; } .twitter-feed[data-avatar="yes"] .tweet_text, .twitter-feed[data-avatar="yes"] .tweet_time { margin-left: 38px; } .twitter-feed .tweet_avatar { padding-right: 10px; float: left; } .twitter-feed[data-avatar="no"] .tweet_list li { position: relative; } .twitter-feed[data-avatar="no"] .tweet_list li::before { position: absolute; top: 5px; left: -2px; font-family: FontAwesome; font-size: 19px; line-height: 1; color: rgba(85, 172, 238, 0.5); content: "\f099"; } /* in the sidebar or info box */ aside .twitter-feed { font-size: 16px; color: #666; } aside .twitter-feed .tweet_text { font-size: 16px; line-height: 1.75; color: #666; } aside .twitter-feed .tweet_text a { color: #5f73c2; } aside .twitter-feed .tweet_text a:hover { color: #f5ae3d; } aside .twitter-feed .tweet_time a { color: #606680; } aside .twitter-feed .tweet_time a:hover { text-decoration: underline; } /* inside the wrapper */ .twitter-feed-wrapper { text-align: center; } .stripe-bottom:not(.stripe-narrow) .twitter-feed-wrapper { margin-bottom: 15px; } .twitter-feed-wrapper .top-icon { margin: -10px 0 25px; } .twitter-feed-wrapper .top-icon .fa { /* vector icons - Font Awesome */ font-size: 48px; color: rgba(85, 172, 238, 0.5); } .twitter-feed-wrapper .twitter-feed .tweet_list li { margin-bottom: 20px; } .twitter-feed-wrapper .twitter-feed .tweet_even:last-child, .twitter-feed-wrapper .twitter-feed .tweet_odd:last-child { margin-bottom: 0; } .twitter-feed-wrapper .twitter-feed .tweet_list li::before, .twitter-feed-wrapper .twitter-feed .tweet_avatar { display: none; } .twitter-feed-wrapper .twitter-feed .tweet_text { font-size: 22px; line-height: 1.5; color: inherit; } .twitter-feed-wrapper .twitter-feed .tweet_text a { color: #5f73c2; } .twitter-feed-wrapper .twitter-feed .tweet_time { font-size: 18px; margin-top: 10px; } .twitter-feed-wrapper .twitter-feed .tweet_time a { color: #909090; } .twitter-feed-wrapper .twitter-feed .tweet_text a:hover, .twitter-feed-wrapper .twitter-feed .tweet_time a:hover { color: #3e4d87; } /* for dark colored background */ .dark-colored-bg .twitter-feed-wrapper .top-icon .fa { color: #b8bfd9; } .dark-colored-bg .twitter-feed-wrapper .twitter-feed, .dark-colored-bg .twitter-feed-wrapper .twitter-feed .tweet_text { color: #fff; } .dark-colored-bg .twitter-feed-wrapper .twitter-feed .tweet_text a { color: #d9e0ff; } .dark-colored-bg .twitter-feed-wrapper .twitter-feed .tweet_time a { color: #e5e5e5; } .dark-colored-bg .twitter-feed-wrapper .twitter-feed .tweet_text a:hover, .dark-colored-bg .twitter-feed-wrapper .twitter-feed .tweet_time a:hover { color: #f5cb87; } /* for secondary color background */ .stripe-secondary-color-bg .twitter-feed-wrapper .top-icon .fa { color: #f5cb87; } .stripe-secondary-color-bg .twitter-feed-wrapper .twitter-feed, .stripe-secondary-color-bg .twitter-feed-wrapper .twitter-feed .tweet_text { color: #664b1f; } .stripe-secondary-color-bg .twitter-feed-wrapper .twitter-feed .tweet_text a { color: #fff; } .stripe-secondary-color-bg .twitter-feed-wrapper .twitter-feed .tweet_time a { color: #666; } .stripe-secondary-color-bg .twitter-feed-wrapper .twitter-feed .tweet_text a:hover, .stripe-secondary-color-bg .twitter-feed-wrapper .twitter-feed .tweet_time a:hover { color: #eee; } /*-----------------------------------------------------------------------------------*/ /* 28. Flickr Photostream /*-----------------------------------------------------------------------------------*/ .flickr-photostream { margin: -20px -20px 0 0; } .flickr-photostream img { -webkit-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .flickr-photostream .flickr_badge_image { float: left; width: 75px; height: 75px; margin: 20px 20px 0 0; } .flickr-photostream a:hover img { opacity: 0.8; } /*-----------------------------------------------------------------------------------*/ /* 29. Standard Table /*-----------------------------------------------------------------------------------*/ table.standard-table { width: 100%; border-collapse: collapse; border-spacing: 0; background-color: #fff; margin-bottom: 20px; } .standard-table-wrapper { margin-bottom: 20px; } .standard-table-wrapper table.standard-table { margin-bottom: 0; } table.standard-table th { font-weight: bold; font-size: 16px; line-height: 1.5; border: 1px solid rgba(141, 146, 166, 0.4); /* #8d92a6 */ border-bottom-color: rgba(141, 146, 166, 0.8); /* #8d92a6 */ background-color: rgba(141, 146, 166, 0.1); /* #8d92a6 */ padding: 8px 15px; vertical-align: top; } table.standard-table td { font-size: 16px; line-height: 1.5; border: 1px solid rgba(141, 146, 166, 0.4); /* #8d92a6 */ padding: 8px 15px; vertical-align: middle; } table.standard-table caption { font-size: 15px; color: #909090; text-align: right; font-style: italic; padding-bottom: 7px; } /* Highlighted first column */ table.standard-table.first-col-bg tr th:first-child { background: none; } table.standard-table.first-col-bg td:first-child { background-color: rgba(141, 146, 166, 0.1); /* #8d92a6 */ } /* Header with dark colored background */ table.standard-table.dark-bg-header th { color: #fff; background-color: #8d92a6; border-color: #8d92a6; border-right-color: #b8bfd9; letter-spacing: 0.3px; } table.standard-table.dark-bg-header th:last-child { border-right-color: #8d92a6; } table.standard-table.dark-bg-header.first-col-bg th:first-child { border-color: rgba(141, 146, 166, 0.4); /* #8d92a6 */ border-right-color: #8d92a6; } /* Checkmark */ table.standard-table td .fa { /* .fa-check */ color: #ed5f4a; } /* Small text */ table.standard-table.text-small th, table.standard-table.text-small td { font-size: inherit; } /* Footer trim */ table.standard-table .footer-trim td { border-bottom-color: rgba(141, 146, 166, 0.8); /* #8d92a6 */ } /* for light grey background */ .stripe-light-grey-bg table.standard-table td { background-color: #fcfcfc; } /* for dark colored background */ .dark-colored-bg table.standard-table { background-color: rgba(255, 255, 255, 0.15); } .dark-colored-bg table.standard-table th { color: #fff; background-color: rgba(255, 255, 255, 0.25); border: none; border-right: 1px solid #606680; letter-spacing: 0.3px; padding-top: 10px; padding-bottom: 10px; } .dark-colored-bg table.standard-table th:last-child { border-right: none; } .dark-colored-bg table.standard-table td { color: #e5e5e5; border-color: #606680; } .dark-colored-bg table.standard-table td:first-child { border-left: none; } .dark-colored-bg table.standard-table td:last-child { border-right: none; } .dark-colored-bg table.standard-table tr:first-child + tr td { border-top: none; } .dark-colored-bg table.standard-table tr:last-child td { border-bottom: none; } /* for secondary color background */ .stripe-secondary-color-bg table.standard-table { background-color: rgba(255, 255, 255, 0.2); } .stripe-secondary-color-bg table.standard-table th { color: #fff; background-color: rgba(102, 75, 31, 0.4); /* #664b1f */ border: none; border-right: 1px solid #ebac46; letter-spacing: 0.3px; padding-top: 10px; padding-bottom: 10px; } .stripe-secondary-color-bg table.standard-table th:last-child { border-right: none; } .stripe-secondary-color-bg table.standard-table td { color: #664b1f; border-color: #ebac46; } .stripe-secondary-color-bg table.standard-table td:first-child { border-left: none; } .stripe-secondary-color-bg table.standard-table td:last-child { border-right: none; } .stripe-secondary-color-bg table.standard-table tr:first-child + tr td { border-top: none; } .stripe-secondary-color-bg table.standard-table tr:last-child td { border-bottom: none; } /* Media queries --------------------------------------------------- */ @media (max-width: 991px) { table.standard-table th, table.standard-table td { font-size: 15px; padding-left: 8px; padding-right: 8px; } } @media (max-width: 767px) { .standard-table-wrapper { overflow-x: auto; overflow-y: visible; width: 100%; } .standard-table-wrapper table.standard-table { margin-bottom: 10px; } table.standard-table caption { text-align: left; } } /*-----------------------------------------------------------------------------------*/ /* 30. Pricing Table /*-----------------------------------------------------------------------------------*/ .pricing-table .table-column { float: left; position: relative; margin-bottom: 10px; padding: 15px 0; } .pricing-table.two-cols .table-column { width: 50%; } .pricing-table.three-cols .table-column { width: 33.333333%; } .pricing-table.four-cols .table-column { width: 25%; } .pricing-table.five-cols .table-column { width: 20%; } /* Column's header --------------------------------------------------- */ .pricing-table .header { background-color: #fff; border-left: 1px solid #dedede; border-top: 2px solid rgba(141, 146, 166, 0.2); /* #8d92a6 */ text-align: center; } .pricing-table .table-column:first-child .header { border-left: 2px solid rgba(141, 146, 166, 0.2); /* #8d92a6 */ } .pricing-table .table-column:last-child .header { border-right: 2px solid rgba(141, 146, 166, 0.2); /* #8d92a6 */ } .pricing-table .title { height: 54px; /* 34px + 20px */ line-height: 34px; margin: 0; padding: 20px 15px 0; overflow: hidden; } .pricing-table .header.short .title { height: 41px; /* 34px + 7px */ padding-top: 7px; } .pricing-table .description { font-size: 16px; line-height: 24px; color: #909090; padding: 7px 15px 0; } .pricing-table .price { height: 62px; /* 36px + 26px */ background-color: rgba(141, 146, 166, 0.2); /* #8d92a6 */ margin: 20px 0 0; padding: 13px 15px; overflow: hidden; } .pricing-table .header.short .price { margin-top: 7px; } .pricing-table .price h6 { font: 36px/1 "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; color: #444a61; margin-bottom: 0; } .pricing-table .price h6 span { font-size: 14px; color: #666; } .pricing-table .price .sub { } /* Column's content --------------------------------------------------- */ .pricing-table .features { list-style: none; margin: 0; padding: 0; border-left: 1px solid #dedede; } .pricing-table .table-column:first-child .features { border-left: 2px solid rgba(141, 146, 166, 0.2); /* #8d92a6 */ } .pricing-table .table-column:last-child .features { border-right: 2px solid rgba(141, 146, 166, 0.2); /* #8d92a6 */ } .pricing-table .features li { line-height: 25px; /* important: used in JS function */ color: #606680; background-color: #fff; margin: 0; padding: 10px 10px; text-align: center; } .pricing-table .features li:nth-child(even) { background-color: #fafafa; } .pricing-table .features li .fa { /* .fa-check */ color: #ed5f4a; } /* Column's footer --------------------------------------------------- */ .pricing-table .footer { background-color: #fff; background-image: -webkit-linear-gradient(left, rgba(141, 146, 166, 0.2), rgba(141, 146, 166, 0.2)); background-image: -o-linear-gradient(left, rgba(141, 146, 166, 0.2), rgba(141, 146, 166, 0.2)); background-image: linear-gradient(to right, rgba(141, 146, 166, 0.2), rgba(141, 146, 166, 0.2)); /* #8d92a6 */ border-left: 1px solid #dedede; padding: 20px 15px; text-align: center; } .pricing-table .table-column:first-child .footer { border-left: none; } .ie9 .pricing-table .footer { background-color: #8d92a6; } .pricing-table .footer .button { border-width: 1px; background-color: #fff; } .pricing-table .footer .button:not(.button-grey):not(.button-colored) { color: #606680; border-color: #606680; } .pricing-table .footer .button:not(.button-grey):not(.button-colored):hover { color: #fff; background-color: #606680; } .pricing-table .footer .button.button-colored:hover { background-color: #f5ae3d; } .pricing-table .footer .button.button-grey:hover { background-color: #727378; } /* Table without footer */ .pricing-table.no-footer .footer { padding: 2px 15px 0; } .pricing-table.no-footer .featured .footer { padding: 1px 15px 0; } /* Featured column --------------------------------------------------- */ .pricing-table .featured { -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15); z-index: 1; padding-top: 0; padding-bottom: 0; } .pricing-table .featured .header { background-color: #ebac46; border: 2px solid #ebac46; border-bottom: none; } .pricing-table .table-column.featured:first-child .header { border-left-color: #ebac46; } .pricing-table .table-column.featured:last-child .header { border-right-color: #ebac46; } .pricing-table .featured .title { height: 69px; /* 34px + 35px */ padding-top: 35px; color: #fff; } .pricing-table .featured .header.short .title { height: 56px; /* 34px + 22px */ padding-top: 22px; } .pricing-table .featured .description { color: #fff; } .pricing-table .featured .price { background-color: #fff; background-image: -webkit-linear-gradient(left, rgba(245, 203, 135, 0.2), rgba(245, 203, 135, 0.2)); background-image: -o-linear-gradient(left, rgba(245, 203, 135, 0.2), rgba(245, 203, 135, 0.2)); background-image: linear-gradient(to right, rgba(245, 203, 135, 0.2), rgba(245, 203, 135, 0.2)); /* #f5cb87 */ } .pricing-table .featured .price h6 { color: #444a61; } .pricing-table .featured .price h6 span { color: #666; } .pricing-table .featured .features { border-left: 2px solid #f5ae3d; border-right: 2px solid #f5ae3d; } .pricing-table .table-column.featured:first-child .features { border-left: 2px solid #f5ae3d; } .pricing-table .table-column.featured:last-child .features { border-right: 2px solid #f5ae3d; } .pricing-table .featured .footer { background-color: rgba(245, 203, 135, 0.2); /* #f5cb87 */ background-image: none; padding-bottom: 35px; border: 2px solid #f5ae3d; border-top: none; } .pricing-table .table-column.featured:first-child .footer { border-left: 2px solid #f5ae3d; } /* the next column after featured one */ .pricing-table .featured + .table-column .header, .pricing-table .featured + .table-column .features, .pricing-table .featured + .table-column .footer { border-left: none; } /* First column as row labels --------------------------------------------------- */ .pricing-table .table-column.row-labels .header { background: none; border-top-color: transparent; border-left: none; } .pricing-table .table-column.row-labels .price h6 span { font-size: 15px; font-weight: 600; color: inherit; } .pricing-table .table-column.row-labels .footer { background: none; border-top: 1px solid rgba(141, 146, 166, 0.2); /* #8d92a6 */ padding: 1px 10px 0; } .pricing-table .table-column.row-labels + .table-column .footer { border-left: none; } .pricing-table .table-column.row-labels.text-align-left .header, .pricing-table .table-column.row-labels.text-align-left .features li { text-align: left; } .pricing-table .table-column.row-labels.text-align-right .header, .pricing-table .table-column.row-labels.text-align-right .features li { text-align: right; } /* Row with empty price and recurrence --------------------------------------------------- */ .pricing-table .header.empty-price-row .price { height: 2px; padding: 0 15px; } /* Tooltip --------------------------------------------------- */ .pricing-table .features li[data-tooltip] { position: relative; cursor: help; -webkit-transition: color 0.15s ease; -o-transition: color 0.15s ease; transition: color 0.15s ease; } .pricing-table .features li[data-tooltip]:hover { color: #1f2438; } .pricing-table .features li[data-tooltip]:hover::before { position: absolute; display: block; width: 250px; left: 100px; bottom: 42px; content: attr(data-tooltip); background-color: #fcfbed; border: 1px solid #ede8bf; -webkit-border-radius: 2px; border-radius: 2px; font-size: 14px; line-height: 1.4; color: #7c6c28; text-align: left; padding: 7px 10px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); z-index: 3; } .pricing-table .features li[data-tooltip]:hover::after { position: absolute; width: 10px; height: 10px; left: 120px; bottom: 37px; content: ""; background-color: #fcfbed; border-bottom: 1px solid #ede8bf; border-right: 1px solid #ede8bf; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.03); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.03); z-index: 4; } .pricing-table .features.tooltip-150px li[data-tooltip]:hover::before { width: 150px; } .pricing-table .features.tooltip-200px li[data-tooltip]:hover::before { width: 200px; } .pricing-table .features.tooltip-300px li[data-tooltip]:hover::before { width: 300px; } .touch-screen .pricing-table .features li[data-tooltip]::before, .touch-screen .pricing-table .features li[data-tooltip]::after { display: none; } /* Media queries --------------------------------------------------- */ @media (min-width: 992px) and (max-width: 1199px) { .pricing-table .title, .pricing-table .price, .pricing-table .footer { padding-left: 10px; padding-right: 10px; } } @media (min-width: 768px) and (max-width: 991px) { .pricing-table .title, .pricing-table .price, .pricing-table .footer { padding-left: 7px; padding-right: 7px; } .pricing-table h4.title { font-size: 21px; } .pricing-table h5.title { font-size: 19px; } .pricing-table .title { font-weight: normal; } .pricing-table .price h6 { font-size: 32px; } .pricing-table .price h6 span { font-size: 13px; } .pricing-table .footer .button { padding-left: 12px; padding-right: 12px; } } @media (max-width: 767px) { .pricing-table { margin-top: -25px; } .pricing-table .table-column { margin-top: 25px; margin-bottom: 0; } .pricing-table .table-column.row-labels { display: none; } .pricing-table .table-column.row-labels ~ .table-column .features li:before { content: attr(data-feature) ':'; display: block; font-weight: bold; text-align: center; } } @media (min-width: 480px) { /* For equal cell height in a row */ /* r = line-height (25px) */ .pricing-table .features li.r1 { height: 45px; /* 20px + r */ } .pricing-table .features li.r2 { height: 70px; } .pricing-table .features li.r3 { height: 95px; } .pricing-table .features li.r4 { height: 120px; } .pricing-table .features li.r5 { height: 145px; } .pricing-table .features li.r6 { height: 170px; } /* r = line-height (24px) */ .pricing-table .description.r1 { height: 31px; /* 7px + r */ } .pricing-table .description.r2 { height: 55px; } .pricing-table .description.r3 { height: 79px; } .pricing-table .description.r4 { height: 103px; } } @media (min-width: 480px) and (max-width: 767px) { .pricing-table .table-column { width: 50% !important; } .pricing-table.basic .table-column:nth-child(odd) .header, .pricing-table.basic .table-column:nth-child(odd) .features, .pricing-table.extended .table-column:nth-child(even) .header, .pricing-table.extended .table-column:nth-child(even) .features { border-left: 2px solid rgba(141, 146, 166, 0.2); /* #8d92a6 */ } .pricing-table.basic .table-column.featured:nth-child(odd) .header, .pricing-table.basic .table-column.featured:nth-child(odd) .features, .pricing-table.extended .table-column.featured:nth-child(even) .header, .pricing-table.extended .table-column.featured:nth-child(even) .features { border-left-color: #ebac46; } .pricing-table.basic .table-column:nth-child(even) .header, .pricing-table.basic .table-column:nth-child(even) .features, .pricing-table.extended .table-column:nth-child(odd) .header, .pricing-table.extended .table-column:nth-child(odd) .features { border-right: 2px solid rgba(141, 146, 166, 0.2); /* #8d92a6 */ } .pricing-table.basic .table-column.featured:nth-child(even) .header, .pricing-table.basic .table-column.featured:nth-child(even) .features, .pricing-table.extended .table-column.featured:nth-child(odd) .header, .pricing-table.extended .table-column.featured:nth-child(odd) .features { border-right-color: #ebac46; } .pricing-table.extended .table-column.row-labels + .table-column.featured .footer { border-left: 2px solid #ebac46; } .pricing-table .title, .pricing-table .price, .pricing-table .footer { padding-left: 7px; padding-right: 7px; } .pricing-table h4.title { font-size: 21px; } .pricing-table h5.title { font-size: 19px; } .pricing-table .title { font-weight: normal; } .pricing-table .price h6 { font-size: 32px; } .pricing-table .price h6 span { font-size: 13px; } .pricing-table .footer .button { padding-left: 12px; padding-right: 12px; } } @media (max-width: 479px) { .pricing-table .table-column { width: 100% !important; margin-top: 0; padding: 35px 0 0; } .pricing-table .table-column .header, .pricing-table .table-column .features { border-left: 2px solid rgba(141, 146, 166, 0.2) !important; /* #8d92a6 */ border-right: 2px solid rgba(141, 146, 166, 0.2) !important; /* #8d92a6 */ } .pricing-table .featured { -webkit-box-shadow: none; box-shadow: none; } .pricing-table .featured .header, .pricing-table .featured .features { border-left-color: #ebac46 !important; border-right-color: #ebac46 !important; } } /*-----------------------------------------------------------------------------------*/ /* 31. Preview Image Overlay & Lightbox Overlay /*-----------------------------------------------------------------------------------*/ .overlay-enabled { position: relative; max-width: 100%; } /* Image overlay --------------------------------------------------- */ .image-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.4); cursor: pointer; -webkit-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; opacity: 0; } .round-image .image-overlay, .img-round + .image-overlay { -webkit-border-radius: 50%; border-radius: 50%; } .image-overlay.default-cursor { cursor: default; } .image-overlay span { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; } .image-overlay span::before { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: Ionicons; line-height: 1; color: #fff; } .image-overlay .link::before { font-size: 48px; content: "\f2c7"; } .image-overlay .zoom::before { font-size: 40px; content: "\f386"; } .image-overlay .video::before { width: 42px; height: 42px; background-color: rgba(255, 255, 255, 0.25); -webkit-border-radius: 50%; border-radius: 50%; content: ""; } .image-overlay .video::after { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -12px 0 0 -6px; border-left: 16px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; content: ""; } .no-touch-screen .overlay-enabled:hover .image-overlay { opacity: 1; } /* Touch-screen devices */ .touch-screen .overlay-enabled .image-overlay a.mfp-lightbox span { display: none; } .touch-screen .owl-carousel .overlay-enabled .image-overlay span { display: block; } /* Video preview --------------------------------------------------- */ .video-preview { max-width: 100%; } .video-preview a.mfp-lightbox { position: relative; display: block; } .video-preview .overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; background-color: rgba(245, 203, 135, 0.1); /* #f5cb87 */ -webkit-transition: background-color 0.3s ease-out; -o-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } .video-preview .play-button { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; background-color: rgba(0, 0, 0, 0.4); border: 7px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1); -webkit-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; opacity: 0.8; cursor: pointer; } .video-preview .play-button::after { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -20px 0 0 -10px; border-left: 28px solid #fff; border-top: 20px solid transparent; border-bottom: 20px solid transparent; content: ""; } .no-touch-screen .video-preview a.mfp-lightbox:hover .overlay { background-color: rgba(93, 98, 117, 0.3); /* #5d6275 */ } .no-touch-screen .video-preview a.mfp-lightbox:hover .overlay .play-button { opacity: 0.95; } /* Lightbox overlay --------------------------------------------------- */ /* Fade animation */ .mfp-fade.mfp-bg { /* overlay at start */ opacity: 0; -webkit-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-fade.mfp-bg.mfp-ready { /* overlay animate in */ opacity: 0.8; } .mfp-fade.mfp-bg.mfp-removing { /* overlay animate out */ opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { /* content at start */ opacity: 0; -webkit-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { /* content animate it */ opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { /* content animate out */ opacity: 0; } /* Zoom animation */ .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; /* ideally, transition speed should match zoom duration */ -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } /* Popup with inline element */ .white-bg-popup { position: relative; width: auto; width: 1100px; max-width: 95%; background: #fff; margin: 20px auto; padding: 40px; } /*-----------------------------------------------------------------------------------*/ /* 32. Forms /*-----------------------------------------------------------------------------------*/ /* Submit button */ .comment-form input[type="submit"], #page-content .contact-form input[type="submit"], #main .subscription-form input[type="submit"] { height: 34px; color: #fff; padding: 7px 18px; background-color: #3e4d87; border: none; } .comment-form input[type="submit"]:hover, #page-content .contact-form input[type="submit"]:hover, #main .subscription-form input[type="submit"]:hover { background-color: #5f73c2; } /* Notification */ #comment-form-message.success, #page-content #contact-form-message.success, #main .subscription-form-message.success { font-weight: bold; } #comment-form-message.error, #page-content #contact-form-message.error, #main .subscription-form-message.error { color: #ff5555; font-weight: bold; } /* Comment Form --------------------------------------------------- */ .comment-form .comment-notes { color: #666; margin-bottom: 10px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { width: 60%; min-width: 290px; height: 38px; background-color: #eee; border: none; border-bottom: 2px solid #eee; padding: 6px 12px 7px; } .comment-form textarea { height: 150px; background-color: #eee; border: none; border-bottom: 2px solid #eee; } .comment-form input[type="text"]:focus, .comment-form input[type="email"]:focus, .comment-form input[type="url"]:focus, .comment-form textarea:focus { background-color: #f5f5f5; border-bottom-color: #f5cb87; } /* Placeholders */ .comment-form ::-webkit-input-placeholder { color: #606680; opacity: 1; -webkit-transition: opacity 0.15s ease; transition: opacity 0.15s ease; } .comment-form :-moz-placeholder { /* Firefox 18- */ color: #606680; opacity: 1; -moz-transition: opacity 0.15s ease; transition: opacity 0.15s ease; } .comment-form ::-moz-placeholder { /* Firefox 19+ */ color: #606680; opacity: 1; transition: opacity 0.15s ease; } .comment-form :-ms-input-placeholder { color: #606680; opacity: 1; transition: opacity 0.15s ease; } .comment-form :focus::-webkit-input-placeholder { opacity: 0.6; } .comment-form :focus::-moz-placeholder { opacity: 0.6; } .comment-form :focus:-moz-placeholder { opacity: 0.6; } .comment-form :focus:-ms-input-placeholder { /* native IE10+ placeholder behavior - disappearing text on focus */ } /* Submit */ .comment-form .field-submit { margin-top: 25px; } .comment-form .field-submit .loader { display: inline-block; width: 16px; height: 11px; background: url(../images/icons/ajax-loader.gif) no-repeat 0 0; margin-left: 30px; } .comment-form div.error > input, .comment-form div.error > textarea { border-bottom-color: #ff8888; } #comment-form-message p { font-size: 15px; margin: 10px 0 0; } /* Contact Form --------------------------------------------------- */ #page-content .contact-form { width: 80%; } #page-content .contact-form label { font-weight: bold; color: #666; margin-bottom: 3px; } #page-content .contact-form label span { font-weight: normal; } #page-content .contact-form span.required { color: #ff5555; } #page-content .contact-form input[type="text"], #page-content .contact-form input[type="email"], #page-content .contact-form input[type="url"] { height: 38px; background-color: #eee; border: none; border-bottom: 2px solid #eee; padding: 6px 12px 7px; } #page-content .contact-form textarea { height: 150px; background-color: #eee; border: none; border-bottom: 2px solid #eee; } #page-content .contact-form input[type="text"]:focus, #page-content .contact-form input[type="email"]:focus, #page-content .contact-form input[type="url"]:focus, #page-content .contact-form textarea:focus, #page-content .contact-form div.error > textarea:focus { background-color: #f5f5f5; border-bottom-color: #f5cb87; } /* Select */ #page-content .contact-form .select-wrapper::after { border-left-width: 6px; border-right-width: 6px; border-top-width: 7px; } #page-content .contact-form select { height: 38px; background-color: #eee; border: none; border-bottom: 2px solid #eee; padding-top: 4px; } #page-content .contact-form select:focus { background-color: #f5f5f5; } #page-content .contact-form select option[value=""] { text-transform: uppercase; } #page-content .contact-form select:focus > option { background-color: #fff; } /* Checkbox */ .contact-form input[type="checkbox"] { position: relative; top: 2px; margin-right: 5px; } .contact-form .field-checkbox label { display: inline; margin-bottom: 0; } /* Submit */ #page-content .contact-form .field-submit { margin-top: 25px; } #page-content .contact-form .field-submit .loader { display: inline-block; width: 16px; height: 11px; background: url(../images/icons/ajax-loader.gif) no-repeat 0 0; margin-left: 30px; } #page-content .contact-form div.error > input, #page-content .contact-form div.error > textarea, #page-content .contact-form div.error > select { border-bottom-color: #ff8888; } #page-content #contact-form-message p { font-size: 15px; margin: 10px 0 0; } /* Subscription Form --------------------------------------------------- */ #page-content.fullwidth-layout .subscription-form .subscription-fields-wrapper, #main-content .subscription-form .subscription-fields-wrapper { width: 60%; min-width: 290px; } #main .subscription-form input[type="text"], #main .subscription-form input[type="email"] { height: 34px; } #main .subscription-form input[type="text"]:focus, #main .subscription-form input[type="email"]:focus { border-color: #f5cb87; -webkit-box-shadow: 0 0 3px rgba(245, 203, 135, 0.7); box-shadow: 0 0 3px rgba(245, 203, 135, 0.7); /* #f5cb87 */ } /* Submit */ #main .subscription-form .field-submit .loader { display: inline-block; width: 16px; height: 11px; background: url(../images/icons/ajax-loader.gif) no-repeat 0 0; margin-left: 30px; } #main .subscription-form div.error > input { border-color: #ff8888; } #main .subscription-form-message p { font-size: 15px; margin: 10px 0 0; } /* Media queries --------------------------------------------------- */ @media (min-width: 992px) and (max-width: 1199px) { #page-content .contact-form { width: 90%; } } @media (min-width: 768px) and (max-width: 991px) { #page-content .contact-form { width: 95%; } } @media (max-width: 479px) { #page-content .contact-form { width: 100%; } } /*-----------------------------------------------------------------------------------*/ /* 33. Contact Info & Google Map /*-----------------------------------------------------------------------------------*/ /* Contact Information --------------------------------------------------- */ .contact-page .contact-info { margin-top: -70px; } /* Address details */ .contact-page .contact-info .address-details { margin: 0 -70px 0 -60px; } .contact-page .contact-info .tabs-nav { background: url(../images/backgrounds/pinstriped-bg.png) repeat left top; padding: 70px 70px 20px 60px; } .contact-page .contact-info .tabs-nav .title { font-family: inherit; margin-bottom: 0; } .contact-page .contact-info .tabs-list li { font-weight: bold; margin-right: 20px; } .contact-page .contact-info .tabs-content { position: relative; background-color: #ebac46; margin-top: 0; padding: 40px 70px 40px 60px; overflow: hidden; } .contact-page .contact-info .tabs-content .tab-pane { position: relative; z-index: 2; } .contact-page .contact-info .tabs-content::before { position: absolute; display: block; bottom: -40px; right: -20px; font-family: Ionicons; font-size: 320px; line-height: 1; color: #fff; content: "\f10c"; opacity: 0.12; z-index: 1; } .contact-page .contact-info .tabs-content .title { color: #fff; } /* Contact details */ .contact-page .contact-info .contact-details { margin-top: 40px; } .contact-page .contact-info .contact-details .underline-small { margin-bottom: 40px; } .contact-page .contact-info .contact-details div[class*="contact-"] + div[class*="contact-"] { margin-top: 7px; } .contact-page .contact-info .contact-email div, .contact-page .contact-info .contact-phone div, .contact-page .contact-info .contact-skype div { font-size: 19px; margin-left: 32px; } .contact-page .contact-info .contact-email .fa { /* vector icons - Font Awesome */ float: left; font-size: 20px; color: #848891; margin: 5px 0 0 0; } .contact-page .contact-info .contact-phone .fa { float: left; font-size: 28px; color: #848891; margin: 1px 0 0 3px; } .contact-page .contact-info .contact-skype .fa { float: left; font-size: 22px; color: #848891; margin: 5px 0 0 0; } .contact-page .contact-info .contact-email a, .contact-page .contact-info .contact-phone .phone-number, .contact-page .contact-info .contact-skype { color: #3e4d87; } .contact-page .contact-info .contact-email a:hover, .contact-page .contact-info .contact-phone .phone-number:hover { color: #5f73c2; } .contact-page .contact-info .social-share { margin-top: 30px; } .phone-number * { color: inherit !important; /* overwrite style applied by iOS for automatically detected phone numbers */ } /* Google Maps --------------------------------------------------- */ .stripe.map-wrapper { padding: 0; } .stripe.map-wrapper .columns { float: none; } .google-map { position: relative; width: 100%; height: 400px; } .google-map > span { position: absolute; left: 0; top: 50%; width: 100%; display: block; font-size: 15px; text-align: center; color: #666; margin-top: -15px; } .google-map .gm-title { margin-bottom: 3px; } .google-map p { font: 15px/1.5 "Quattrocento Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; margin-bottom: 5px; } /* Media queries --------------------------------------------------- */ @media (min-width: 1520px) { .contact-page .contact-info .tabs-list li { margin-right: 25px; } } @media (min-width: 992px) and (max-width: 1199px) { .contact-page .contact-info .address-details { margin-left: -40px; } .contact-page .contact-info .tabs-nav, .contact-page .contact-info .tabs-content { padding-left: 40px; } } @media (min-width: 768px) and (max-width: 991px) { .contact-page .contact-info .address-details { margin-left: -35px; } .contact-page .contact-info .tabs-nav, .contact-page .contact-info .tabs-content { padding-left: 35px; } } @media (max-width: 767px) { .contact-page .contact-info { margin-bottom: 50px; } .contact-page .contact-info .address-details { margin-left: -15px; margin-right: -15px; } .contact-page .contact-info .tabs-nav { padding: 50px 15px 20px; } .contact-page .contact-info .tabs-content { padding-left: 15px; padding-right: 15px; } } @media (min-width: 480px) and (max-width: 767px) { .contact-page .contact-info .tabs-content br { display: none; } } /*-----------------------------------------------------------------------------------*/ /* 34. Sidebar /*-----------------------------------------------------------------------------------*/ /* Side menu --------------------------------------------------- */ .side-menu, .side-menu > li ul { list-style: none; margin: 0; padding: 0; } @media (min-width: 992px) { #page-content.fullwidth-layout .side-menu-widget { margin-bottom: 20px; } #page-content.sidebar-layout .side-menu-widget { margin-bottom: 70px; } .side-menu > li { margin-bottom: 14px; } .side-menu > li:last-child { margin-bottom: 0; } .side-menu > li > a, .side-menu > li.heading > span { display: block; height: 40px; font: 16px/40px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #fff; background-color: #3e4d87; padding: 0 15px; text-align: center; text-transform: uppercase; } .side-menu > li.menu-item-has-children.current-menu-item > a, .side-menu > li.menu-item-has-children.current-menu-ancestor > a, .side-menu > li.menu-item-has-children.heading > span { margin-bottom: 1px; } .side-menu > li > a:hover, .side-menu > li.current-menu-item > a, .side-menu > li.current-menu-ancestor > a, .side-menu > li.menu-item-has-children.heading > span { color: #fff; background-color: #5f73c2; } .side-menu > li ul { background-color: rgba(255, 255, 255, 0.7); } .side-menu > li ul li { margin-bottom: 0; } .side-menu > li ul li a { display: block; font-size: 16px; line-height: 1.65; color: #3e4d87; background-color: rgba(218, 221, 232, 0.25); /* #dadde8 */ background: -webkit-linear-gradient(left, rgba(218, 221, 232, 0.25), rgba(255, 255, 255, 0.4)); background: -o-linear-gradient(left, rgba(218, 221, 232, 0.25), rgba(255, 255, 255, 0.4)); background: linear-gradient(to right, rgba(218, 221, 232, 0.25), rgba(255, 255, 255, 0.4)); /* #dadde8 */ padding: 7px 20px; margin-bottom: 1px; } .side-menu > li ul li:first-child a { padding-top: 8px; } .side-menu > li ul li:last-child a { margin-bottom: 0; } .side-menu > li ul li.current-menu-item a { color: #1f2438; } .side-menu > li ul li a:hover { background-color: rgba(218, 221, 232, 0.6); /* #dadde8 */ background: -webkit-linear-gradient(left, rgba(218, 221, 232, 0.6), #fff); background: -o-linear-gradient(left, rgba(218, 221, 232, 0.6), #fff); background: linear-gradient(to right, rgba(218, 221, 232, 0.6), #fff); /* #dadde8 */ } .side-menu > li ul li span { color: #8d92a6; margin-left: 5px; white-space: nowrap; } } @media (max-width: 991px) { #page-content .side-menu-widget { background-color: #f5f5f5; margin: -70px 0 45px; /* fallback */ margin: -70px calc(50% - 50vw) 45px; padding: 15px 15px 14px; /* fallback */ padding: 15px calc(50vw - 50% + 15px) 14px; } .side-menu > li { display: inline-block; line-height: 24px; margin: 0 20px 0 0; } .side-menu > li:last-child { margin-right: 0; } .side-menu > li > a { display: block; font: 13px/24px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #909090; text-transform: uppercase; } .side-menu > li > a:hover { color: #444; } .side-menu > li.current-menu-item > a, .side-menu > li.current-menu-ancestor > a { color: #444; } .side-menu > li.menu-item-has-children > ul { display: none; } } @media (max-width: 767px) { #page-content .side-menu-widget { margin-top: -50px; } .side-menu > li { margin-right: 15px; } .side-menu > li > a { text-transform: none; } } @media (max-width: 479px) { #page-content .side-menu-widget { display: none; } } /* Sidebar widgets --------------------------------------------------- */ #sidebar .widget { margin-bottom: 55px; } #sidebar .widget .widget-title { margin-bottom: 20px; } /* Widget title underline */ #sidebar .widget.widget-title-underline .widget-title { position: relative; margin-bottom: 35px; } #sidebar .widget.widget-title-underline .widget-title::before, #sidebar .widget.widget-title-underline .widget-title::after { position: absolute; display: block; left: 0; bottom: -11px; height: 4px; content: ""; -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); -o-transform: skew(-45deg); transform: skew(-45deg); } #sidebar .widget.widget-title-underline .widget-title::before { width: 60px; background-color: #f5cb87; background: -webkit-linear-gradient(left, #f5cb87 50%, rgba(245, 203, 135, 0.5)); background: -o-linear-gradient(left, #f5cb87 50%, rgba(245, 203, 135, 0.5)); background: linear-gradient(to right, #f5cb87 50%, rgba(245, 203, 135, 0.5)); /* #f5cb87 */ } #sidebar .widget.widget-title-underline .widget-title::after { width: 6px; background-color: #fff; margin-left: 15px; } .ie9 #sidebar .widget.widget-title-underline .widget-title::after { display: none; } /* Recent Posts widget --------------------------------------------------- */ #sidebar .widget-recent-posts { margin-bottom: 35px; } #sidebar .widget-recent-posts .widget-title { margin-bottom: -5px; } #sidebar .widget-recent-posts.widget-title-underline .widget-title { margin-bottom: 7px; } #sidebar .widget-recent-posts ul { list-style: none; background-color: rgba(255, 255, 255, 0.8); background: -webkit-linear-gradient(150deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0.8) 150px); background: -o-linear-gradient(150deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0.8) 150px); background: linear-gradient(150deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0.8) 150px); margin: 0; padding: 25px 25px 20px 0; } #sidebar .widget-recent-posts li { font-size: 16px; line-height: 1.625; margin-bottom: 15px; } #sidebar .widget-recent-posts li:last-child { margin-bottom: 0; } #sidebar .widget-recent-posts ul a { font-weight: bold; padding: 6px 0; } #sidebar .widget-recent-posts .post-date { display: block; font-size: 15px; font-style: italic; color: #909090; margin-top: 5px; } /* Text Block widget --------------------------------------------------- */ #sidebar .widget-text-block:not(.text-no-bg) { margin-bottom: 25px; } #sidebar .widget-text-block .widget-title { margin-bottom: -8px; } #sidebar .widget-text-block.widget-title-underline .widget-title { margin-bottom: 7px; } #sidebar .widget-text-block.text-no-bg .widget-title { margin-bottom: 10px; } #sidebar .widget-text-block.text-no-bg.widget-title-underline .widget-title { margin-bottom: 30px; } #sidebar .widget-text-block:not(.text-no-bg) .text-wrapper { background-color: rgba(255, 255, 255, 0.8); background: -webkit-linear-gradient(150deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0.8) 150px); background: -o-linear-gradient(150deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0.8) 150px); background: linear-gradient(150deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0.8) 150px); padding: 25px 25px 30px 0; } #sidebar .widget-text-block p:last-child, #sidebar .widget-text-block ul:last-child, #sidebar .widget-text-block ol:last-child, #sidebar .widget-text-block blockquote:last-child { margin-bottom: 0; } #sidebar .widget-text-block.text-no-bg .button { width: 100%; } #sidebar .widget-text-block.text-no-bg .widget-title + .text-wrapper > .button:first-child { margin-top: 10px; } /* Info Box widget --------------------------------------------------- */ #sidebar .widget-info-box .info-box.shadow { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); } #sidebar .widget-info-box .info-box .info-text { padding-top: 15px; } #sidebar .widget-info-box .info-box.shadow .info-text { padding: 20px 20px 30px; } /* Featured Article widget --------------------------------------------------- */ #sidebar .widget-featured-article .info-box.shadow { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); } #sidebar .widget-featured-article .info-box .info-text { padding: 20px 20px 30px; } #sidebar .widget-featured-article .info-text .title { margin-bottom: 5px; } #sidebar .widget-featured-article .info-text .title a { padding: 5px 0; } #sidebar .widget-featured-article .info-text h6 { line-height: 1.47; } #sidebar .widget-featured-article .info-text p { font-size: 16px; color: #666; margin-bottom: 0; } #sidebar .widget-featured-article .info-text .post-meta { font-size: 15px; color: #a5a5a5; margin-top: 10px; } #sidebar .widget-featured-article .info-text .post-meta a { color: #606680; font-style: italic; } #sidebar .widget-featured-article .info-text .post-meta a:hover { text-decoration: underline; } /* Testimonials widget --------------------------------------------------- */ #sidebar .widget-testimonials .widget-title { margin-bottom: 25px; } #sidebar .widget-testimonials.widget-title-underline .widget-title { margin-bottom: 40px; } /* Social Profiles widget --------------------------------------------------- */ #sidebar .widget-social-profiles { margin-top: 2px; margin-bottom: 50px; } #sidebar .widget-social-profiles .widget-title { float: left; color: #666; margin: 0 15px 0 0; padding-top: 2px; } #sidebar .widget-social-profiles .fa-icon-list { margin: 0 0 -8px; } #sidebar .widget-social-profiles .fa-icon-list li { margin: 0 8px 8px 0; } #sidebar .widget-social-profiles .fa-icon-list li:last-child { margin-right: 0; } #sidebar .widget-social-profiles .fa-icon-list li a { display: block; width: 29px; height: 29px; text-align: center; background-color: #3e4d87; border: none; -webkit-border-radius: 50%; border-radius: 50%; opacity: 0.8; } #sidebar .widget-social-profiles .fa-icon-list li a:hover { opacity: 1; } #sidebar .widget-social-profiles .fa-icon-list li[class*="icon-"] a { opacity: 0.7; } #sidebar .widget-social-profiles .fa-icon-list li[class*="icon-"] a:hover { opacity: 0.9; } #sidebar .widget-social-profiles .fa-icon-list li.icon-twitter a { background-color: #55acee; } #sidebar .widget-social-profiles .fa-icon-list li.icon-facebook a { background-color: #3b5998; } #sidebar .widget-social-profiles .fa-icon-list li.icon-linkedin a { background-color: #0077b5; } #sidebar .widget-social-profiles .fa-icon-list li.icon-google-plus a { background-color: #dd4b39; } #sidebar .widget-social-profiles .fa-icon-list li.icon-pinterest a { background-color: #bd081c; } #sidebar .widget-social-profiles .fa-icon-list li.icon-instagram a { background-color: #e4405f; } #sidebar .widget-social-profiles .fa-icon-list li.icon-youtube a { background-color: #cd201f; } #sidebar .widget-social-profiles .fa-icon-list li.icon-vimeo a { background-color: #1ab7ea; } #sidebar .widget-social-profiles .fa-icon-list li.icon-vk a { background-color: #4c75a3; } #sidebar .widget-social-profiles .fa-icon-list li.icon-dribbble a { background-color: #ea4c89; } #sidebar .widget-social-profiles .fa-icon-list li.icon-behance a { background-color: #131418; } #sidebar .widget-social-profiles .fa-icon-list li .fa { width: 23px; color: #fff; line-height: 29px; } /* Subscription Form widget --------------------------------------------------- */ #sidebar .widget-subscription-form { background-color: #f5f5f5; background: -webkit-linear-gradient(45deg, #eee, #fafafa); background: -o-linear-gradient(45deg, #eee, #fafafa); background: linear-gradient(45deg, #eee, #fafafa); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); padding: 40px 30px; } #sidebar .widget-subscription-form .widget-title { text-align: center; margin-bottom: 10px; } #sidebar .widget-subscription-form p.text-aside { color: #333; text-align: center; } #sidebar .widget-subscription-form .subscription-form .field-submit { position: relative; text-align: center; } #sidebar .widget-subscription-form .subscription-form .field-submit .loader { position: absolute; top: 40px; left: 50%; margin-left: -8px; } #sidebar .widget-subscription-form .subscription-form-message p { text-align: center; margin-top: 15px; } /* Banner widget --------------------------------------------------- */ #sidebar .widget-banner { position: relative; width: 300px; overflow: hidden; } #sidebar .widget-banner.banner-portrait { /* width/height ratio = 4/5 */ height: 375px; } #sidebar .widget-banner.banner-square { /* width/height ratio = 1/1 */ height: 300px; } #sidebar .widget-banner a.block-link { position: relative; display: block; width: 100%; height: 100%; } #sidebar .widget-banner img { position: relative; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; -webkit-filter: saturate(70%); filter: saturate(70%); z-index: 1; } #sidebar .widget-banner a.block-link:hover img { opacity: 0.9; } #sidebar .widget-banner::before { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background-color: #606680; opacity: 0.5; content: ""; z-index: 2; } #sidebar .widget-banner.primary-color-bg::before { background-color: #606680; -webkit-filter: saturate(60%); filter: saturate(60%); } #sidebar .widget-banner.secondary-color-bg::before { background-color: #664b1f; -webkit-filter: saturate(50%); filter: saturate(50%); } #sidebar .widget-banner .banner-text-wrapper { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 3; } #sidebar .widget-banner .banner-text { position: absolute; left: 0; bottom: 0; width: 100%; } #sidebar .widget-banner .banner-text .banner-title { font-family: Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #fff; margin: 0 20px 15px; } #sidebar .widget-banner .banner-text .h2-title { font-size: 60px; line-height: 0.87; font-weight: normal; } #sidebar .widget-banner .banner-text .h3-title { font-size: 50px; line-height: 0.9; font-weight: normal; } #sidebar .widget-banner .banner-text .h4-title { font-size: 40px; line-height: 0.92; font-weight: normal; } #sidebar .widget-banner .banner-text .banner-description { position: relative; padding: 12px 20px; } #sidebar .widget-banner .banner-text .banner-description::before { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; content: ""; -webkit-filter: saturate(50%); filter: saturate(50%); z-index: 1; } #sidebar .widget-banner.primary-color-bg .banner-text .banner-description::before { background-color: rgba(96, 102, 128, 0.9); /* #606680 */ background: -webkit-linear-gradient(to bottom, rgba(96, 102, 128, 0.8), rgba(96, 102, 128, 0.95)); background: -o-linear-gradient(to bottom, rgba(96, 102, 128, 0.8), rgba(96, 102, 128, 0.95)); background: linear-gradient(to bottom, rgba(96, 102, 128, 0.8), rgba(96, 102, 128, 0.95)); /* #606680 */ } #sidebar .widget-banner.secondary-color-bg .banner-text .banner-description::before { background-color: rgba(102, 75, 31, 0.8); /* #664b1f */ background: -webkit-linear-gradient(to bottom, rgba(102, 75, 31, 0.7), rgba(102, 75, 31, 0.9)); background: -o-linear-gradient(to bottom, rgba(102, 75, 31, 0.7), rgba(102, 75, 31, 0.9)); background: linear-gradient(to bottom, rgba(102, 75, 31, 0.7), rgba(102, 75, 31, 0.9)); /* #664b1f */ } #sidebar .widget-banner .banner-text .banner-description > * { position: relative; z-index: 2; } #sidebar .widget-banner .banner-text .banner-description p { color: #fff; line-height: 1.2; margin-bottom: 0; } #sidebar .widget-banner .banner-text .banner-description .banner-link { color: #f5cb87; margin: 5px 0 0; } #sidebar .widget-banner .banner-text .banner-description .banner-link .fa { /* vector icons - Font Awesome */ font-size: 13px; margin-left: 10px; -webkit-transition: color 0.15s ease; -o-transition: color 0.15s ease; transition: color 0.15s ease; } #sidebar .widget-banner a.block-link:hover .banner-text .banner-link .fa { color: #eee; } /* Stats widget --------------------------------------------------- */ #sidebar .widget-stats .stat-data { padding-top: 10px; } #sidebar .widget-stats.primary-color-bg .stat-data { background-color: #60698a; padding: 35px 30px; } #sidebar .widget-stats.secondary-color-bg .stat-data { background-color: #ebac46; padding: 35px 30px; } #sidebar .widget-stats.secondary-color-bg .stat-data .fact-number, #sidebar .widget-stats.secondary-color-bg .stat-data .fact-statement p, #sidebar .widget-stats.primary-color-bg .stat-data .fact-statement p { color: #fff; } #sidebar .widget-stats.primary-color-bg .stat-data .fact-number { color: #dadde8; } /* Twitter Feed widget --------------------------------------------------- */ #sidebar .widget-twitter-feed { margin-bottom: 35px; } #sidebar .widget-twitter-feed .widget-title { margin-bottom: -5px; } #sidebar .widget-twitter-feed.widget-title-underline .widget-title { margin-bottom: 7px; } #sidebar .widget-twitter-feed .twitter-feed { background-color: rgba(255, 255, 255, 0.8); background: -webkit-linear-gradient(150deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0.8) 150px); background: -o-linear-gradient(150deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0.8) 150px); background: linear-gradient(150deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0.8) 150px); padding: 25px 25px 20px 0; } /* Flickr Photostream --------------------------------------------------- */ #sidebar .widget-flickr-photostream { } /* Video widget --------------------------------------------------- */ #sidebar .widget-video .video-description { font-size: 16px; color: #666; margin-top: 15px; } /* Tag Cloud widget --------------------------------------------------- */ #sidebar .widget-tag-cloud { margin-bottom: 45px; } #sidebar .widget-tag-cloud a { display: inline; float: left; font: 13px/22px Verdana, Geneva, sans-serif; color: #fff; padding: 1px 8px 2px; margin: 0 6px 6px 0; background-color: #8d92a6; } #sidebar .widget-tag-cloud a:hover { background-color: #606680; } /* Archive widget --------------------------------------------------- */ #sidebar .widget-archive ul { list-style: none; margin: 0; padding: 0; } #sidebar .widget-archive li { margin-bottom: 7px; } #sidebar .widget-archive li:last-child { margin-bottom: 0; } #sidebar .widget-archive select { height: 34px; background-color: #f9f9f9; } #sidebar .widget-archive select:focus { background-color: #f3f3f3; } #sidebar .widget-archive select option[value=""] { text-transform: uppercase; } #sidebar .widget-archive select:focus > option { background-color: #fff; } /* Media queries --------------------------------------------------- */ /* Disable auto zoom in input/textarea/select fields - Safari on iPhone */ @media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) { #sidebar .widget-archive select { font-size: 16px; } } /* For IE10 and higher */ @media (-ms-high-contrast: active), (-ms-high-contrast: none) { #sidebar .widget-archive select option[value=""] { text-transform: none; } #sidebar .widget.widget-title-underline .widget-title::after { bottom: -12px; height: 6px; } } @media (min-width: 1520px) { #sidebar .widget-banner { width: 330px; } #sidebar .widget-banner.banner-portrait { height: 412px; } #sidebar .widget-banner.banner-square { height: 330px; } } @media (min-width: 992px) and (max-width: 1199px) { #sidebar .widget-banner { width: 280px; } #sidebar .widget-banner.banner-portrait { height: 350px; } #sidebar .widget-banner.banner-square { height: 280px; } } @media (max-width: 991px) { /* top border gradient if the sidebar contains visible widgets */ #sidebar.sidebar-visible-sm-down { padding-top: 60px; } #sidebar.sidebar-visible-sm-down::before { position: absolute; display: block; top: 0; left: 0; right: 0; height: 85px; margin: 0 -15px; /* fallback */ margin: 0 calc(50% - 50vw); background-image: -webkit-linear-gradient(top, #f5f5f5 20px, rgba(245, 245, 245, 0)); background-image: -o-linear-gradient(top, #f5f5f5 20px, rgba(245, 245, 245, 0)); background-image: linear-gradient(to bottom, #f5f5f5 20px, rgba(245, 245, 245, 0)); border-top: 1px solid #eee; content: ""; } /* space between the last visible widget in sidebar and the "bottom stripe" section */ #sidebar .widget.mb-last-child { margin-bottom: 70px; } #sidebar .widget-recent-posts.mb-last-child, #sidebar .widget-twitter-feed.mb-last-child { margin-bottom: 50px; } #sidebar .widget-text-block:not(.text-no-bg).mb-last-child { margin-bottom: 40px; } #sidebar .widget-social-profiles.mb-last-child { margin-bottom: 65px; } #sidebar .widget-tag-cloud.mb-last-child { margin-bottom: 60px; } } @media (min-width: 571px) and (max-width: 991px) { /* the width of content inside the sidebar is limited to 540px */ #sidebar .widget { max-width: 540px; margin-right: auto; margin-left: auto; } #sidebar .widget-banner { width: 540px; } #sidebar .widget-flickr-photostream .flickr-photostream { margin: -18px -18px 0 0; } #sidebar .widget-flickr-photostream .flickr-photostream .flickr_badge_image { margin: 18px 18px 0 0; } } @media (max-width: 767px) { #sidebar .widget-info-box .info-box, #sidebar .widget-featured-article .info-box { margin-right: 0; margin-left: 0; } #sidebar .widget-info-box .info-box.shadow, #sidebar .widget-featured-article .info-box.shadow { background-color: #fafafa; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); } #sidebar .widget-banner .banner-text .banner-description .banner-link .fa { font-size: 12px; } } @media (max-width: 570px) { #sidebar .widget-banner { width: 100%; } } @media (max-width: 329px) { #sidebar .widget-banner.banner-portrait { height: 362px; } #sidebar .widget-banner.banner-square { height: 290px; } } /*-----------------------------------------------------------------------------------*/ /* 35. Footer /*-----------------------------------------------------------------------------------*/ #footer { position: relative; background:#000; /*background-image: url(../images/backgrounds/footer-bg-image.jpg);*/ background-position: center; background-repeat: no-repeat; background-size: cover; padding: 65px 0 55px; } #footer.footer-style-2 { padding: 51px 7px 15px; } #footer::before { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 4px; content: ""; /* Colored border. Colors: #00b6de #ed5f4a #f5ae3d #aac713 #5f73c2 #848891 */ background-image: -webkit-linear-gradient(left, #00b6de, #00b6de 16.66%, #ed5f4a 16.66%, #ed5f4a 33.32%, #f5ae3d 33.32%, #f5ae3d 50%, #aac713 50%, #aac713 66.66%, #5f73c2 66.66%, #5f73c2 83.32%, #848891 83.32%); background-image: -o-linear-gradient(left, #00b6de, #00b6de 16.66%, #ed5f4a 16.66%, #ed5f4a 33.32%, #f5ae3d 33.32%, #f5ae3d 50%, #aac713 50%, #aac713 66.66%, #5f73c2 66.66%, #5f73c2 83.32%, #848891 83.32%); background-image: linear-gradient(to right, #00b6de, #00b6de 16.66%, #ed5f4a 16.66%, #ed5f4a 33.32%, #f5ae3d 33.32%, #f5ae3d 50%, #aac713 50%, #aac713 66.66%, #5f73c2 66.66%, #5f73c2 83.32%, #848891 83.32%); background-size: 1600px 4px; background-position: center top; background-repeat: no-repeat; z-index: 3; } #footer::after { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 4px; content: ""; background-color: #848891; z-index: 2; } #footer.footer-trim-lite::before{ height: 3px; } #footer.footer-trim-lite::after { height: 3px; } #footer .title { text-transform: uppercase; margin-bottom: 20px; font-weight: 600; font-size: 19px; font-family: sans-serif; color: #fff; } #footer p { margin-bottom: 0; } .imp-links { list-style:none; } .imp-links a:hover { text-decoration:none; } .imp-links li { line-height: 1.625; } .imp-links li a { line-height: 1.625; color:#fff; } /* Contact Details --------------------------------------------------- */ #footer .contact-details-title { display: inline-block; min-width: 150px; font: 24px/33px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #fff; text-align: center; text-transform: uppercase; background-color: #3e4d87; margin-bottom: 20px; padding: 11px 20px 12px; } #footer .contact-address { line-height: 1.625; } #footer .contact-phone { font-size: 18px; font-weight: bold; margin-top: 10px; } .columns p a:hover {text-decoration:none; } #footer.footer-style-1 .contact-phone { margin-top: 5px; } #footer.footer-style-2 .contact-phone { color: #606680; } #footer .phone-number { color: inherit; } #footer.footer-style-1 .phone-number:hover { color: #5f73c2; } #footer.footer-style-2 .phone-number:hover { color: #1f2438; } #footer .contact-email { font-size: 18px; } #footer.footer-style-2 .contact-email a { color: #606680; } #footer.footer-style-2 .contact-email a:hover { color: #1f2438; } /* Social profile icons */ #footer .fa-icon-list { margin-top: 10px; } #footer .fa-icon-list li a { display: block; width: 33px; height: 33px; text-align: center; border: 2px solid #f5ae3d; -webkit-border-radius: 50%; border-radius: 50%; } #footer .fa-icon-list li a:hover { border-color: #5f73c2; } #footer .fa-icon-list li .fa { width: 23px; line-height: 29px; color: #5f73c2; } /* Contact Form --------------------------------------------------- */ #footer.footer-style-1 .contact-fields-wrapper { float: left; width: 50%; padding: 0 0 0 20px; } #footer.footer-style-1 .contact-fields-wrapper:first-child { padding: 0 20px 0 0; } #footer [class*="-form"] input[type="text"], #footer [class*="-form"] input[type="email"], #footer [class*="-form"] input[type="url"] { height: 32px; color: #fff; background-color: #8d92a6; border: none; margin-bottom: 0; } #footer [class*="-form"] textarea { height: 130px; color: #fff; background-color: #8d92a6; border: none; margin-bottom: 0; } #footer [class*="-form"] select { height: 32px; font: 14px/26px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #e5e5e5; background-color: #8d92a6; border: none; margin-bottom: 0; } #footer [class*="-form"] select option { font-family: "Quattrocento Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: none; } #footer [class*="-form"] select:focus > option { color: #3e4d87; background-color: #ebebed; } #footer [class*="-form"] .select-wrapper::after { border-top-color: #eee; } /* Placeholders */ #footer [class*="-form"] ::-webkit-input-placeholder { font: 14px/26px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #e5e5e5; letter-spacing: 0.5px; opacity: 1; -webkit-transition: opacity 0.15s ease; transition: opacity 0.15s ease; } #footer [class*="-form"] :-moz-placeholder { /* Firefox 18- */ font: 14px/26px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #e5e5e5; letter-spacing: 0.5px; opacity: 1; -moz-transition: opacity 0.15s ease; transition: opacity 0.15s ease; } #footer [class*="-form"] ::-moz-placeholder { /* Firefox 19+ */ font: 14px/26px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #e5e5e5; letter-spacing: 0.5px; opacity: 1; transition: opacity 0.15s ease; } #footer [class*="-form"] :-ms-input-placeholder { font: 14px/26px Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #fff; letter-spacing: 0.5px; opacity: 1; transition: opacity 0.15s ease; } #footer [class*="-form"] :focus::-webkit-input-placeholder { opacity: 0.6; } #footer [class*="-form"] :focus::-moz-placeholder { opacity: 0.6; } #footer [class*="-form"] :focus:-moz-placeholder { opacity: 0.6; } #footer [class*="-form"] :focus:-ms-input-placeholder { /* native IE10+ placeholder behavior - disappearing text on focus */ } #footer [class*="-form"] input[type="text"]:focus, #footer [class*="-form"] input[type="email"]:focus, #footer [class*="-form"] input[type="url"]:focus, #footer [class*="-form"] textarea:focus, #footer [class*="-form"] select:focus { background-color: #606680; -webkit-box-shadow: none; box-shadow: none; } /* For IE10 and higher */ @media (-ms-high-contrast: active), (-ms-high-contrast: none) { #footer [class*="-form"] select { color: #fff; } #footer [class*="-form"] select:focus > option { color: #fff !important; background-color: #606680 !important; } } /* Submit */ #footer .contact-form .field-submit { position: relative; } #footer .contact-form input[type="submit"] { width: 100%; height: 32px; color: #fff; padding: 5px 25px; background-color: #3e4d87; border: none; } #footer .contact-form input[type="submit"]:hover { background-color: #5f73c2; } #footer .contact-form .field-submit .loader { position: absolute; display: inline-block; top: 40px; left: 50%; width: 16px; height: 11px; margin-left: -8px; background: url(../images/icons/ajax-loader.gif) no-repeat 0 0; } #footer [class*="-form"] [class*="-fields-wrapper"] > div { position: relative; margin-bottom: 17px; z-index: 1; } #footer [class*="-form"] [class*="-fields-wrapper"] > div.error::before { position: absolute; display: block; top: 0; bottom: -3px; left: 0; right: 0; content: ""; background-color: #fff; border-bottom: 2px solid #ff8888; z-index: -1; } #footer #contact-form-message { min-height: 25px; font-size: 15px; line-height: 25px; } #footer #contact-form-message.success { font-weight: bold; } #footer #contact-form-message.error { color: #ff5555; font-weight: bold; } /* Subscription Form --------------------------------------------------- */ #footer .subscription-form .subscription-fields-wrapper { position: relative; } #footer .subscription-form .field-subscriber-email { margin-right: 34px; } #footer .subscription-form .subscription-fields-wrapper .field-submit { position: absolute; display: block; top: 49px; right: 0; width: 32px; height: 32px; margin-bottom: 0; background-color: #dadde8; -webkit-transition: background-color 0.15s ease; -o-transition: background-color 0.15s ease; transition: background-color 0.15s ease; z-index: 1; } #footer .subscription-form input[type="submit"] { position: relative; display: block; width: 32px; height: 32px; background: none; border: none; padding: 0; } #footer .subscription-form .field-submit::before { position: absolute; display: block; top: 9px; left: 10px; font-family: Ionicons; font-size: 14px; line-height: 1; color: #606680; content: "\f2f6"; -webkit-transition: color 0.15s ease; -o-transition: color 0.15s ease; transition: color 0.15s ease; } #footer .subscription-form .field-submit:hover { background-color: #b8bfd9 !important; } #footer .subscription-form .field-submit:hover::before { color: #f5f5f5; } #footer .subscription-form .field-submit .loader { position: absolute; display: inline-block; top: 11px; left: 47px; width: 16px; height: 11px; background: url(../images/icons/ajax-loader.gif) no-repeat 0 0; } #footer .subscription-form-message { min-height: 25px; font-size: 15px; line-height: 25px; } #footer .subscription-form-message.success { font-weight: bold; } #footer .subscription-form-message.error { color: #ff5555; font-weight: bold; } /* Footer menu --------------------------------------------------- */ #footer .footer-menu { list-style: none; margin: 0; padding: 0; } #footer .footer-menu li { line-height: 1.5; margin-bottom: 10px; } #footer .footer-menu li:last-child { margin-bottom: 0; } #footer .footer-menu a { color: #606680; text-decoration: underline; padding: 6px 0; } #footer .footer-menu a:hover { color: #1f2438; } /*.columns p { color:#fff !important; }*/ .columns p a { color:#fff !important; } /* Recent posts --------------------------------------------------- */ #footer .recent-posts { list-style: none; margin: 0; padding: 0; } #footer .recent-posts li { line-height: 24px; color:#fff; margin-bottom: 15px; } #footer .recent-posts li:last-child { margin-bottom: 0; } #footer .recent-posts a { font-weight: bold; color: #606680; padding: 6px 0; } #footer .recent-posts a:hover { color: #1f2438; } #footer .recent-posts .post-date { display: block; font-size: 15px; font-style: italic; color: #666; margin-top: 5px; } /* Footer Bottom --------------------------------------------------- */ #footer-bottom { padding: 8px 0; background-color: #3e4d87; } #footer-bottom .columns.bottom-left-col { float: left; } #footer-bottom .columns.bottom-right-col { float: right; } #footer-bottom * { font-size: 15px; line-height: 25px; color: #b8bfd9; } #footer-bottom p { margin: 0; } /* Scroll Top */ #footer-bottom .scroll-top { position: absolute; display: block; top: -40px; right: 15px; width: 50px; height: 32px; padding-top: 7px; text-align: center; cursor: pointer; background-color: #d44147; -webkit-border-radius: 25px 25px 0 0; border-radius: 25px 25px 0 0; -webkit-transition: opacity 0.15s ease; -o-transition: opacity 0.15s ease; transition: opacity 0.15s ease; opacity: 0.8; } #footer-bottom .scroll-top .ion { /* vector icons - Ionicons */ font-size: 24px; color: #8d92a6; -webkit-transition: color 0.15s ease; -o-transition: color 0.15s ease; transition: color 0.15s ease; } #footer-bottom .scroll-top:hover { opacity: 1; } #footer-bottom .scroll-top:hover .ion { color: #f5ae3d; } /* Bottom Links */ #footer-bottom .links { float: right; list-style: none; margin: 0; padding: 0; } #footer-bottom .links a:hover { text-decoration:none; } #footer-bottom .links li { display: inline-block; margin: 0 -4px 0 0; } #footer-bottom .links li:last-child { margin-right: 0; } #footer-bottom .links li span { color: #5f73c2; padding: 0 10px; } #footer-bottom .links li:last-child span { display: none; } #footer-bottom .links a:hover { color: #fff; } /* Media queries --------------------------------------------------- */ @media (min-width: 992px) and (max-width: 1199px) { #footer::before { background-size: 1300px 4px; } } @media (min-width: 768px) and (max-width: 991px) { #footer::before { background-size: 1000px 4px; } #footer.footer-style-1 .contact-fields-wrapper, #footer.footer-style-1 .contact-fields-wrapper:first-child { float: none; width: auto; padding: 0; } #footer.footer-style-1 .contact-fields-wrapper:first-child > div { float: left; width: 50%; } #footer.footer-style-1 .contact-fields-wrapper:first-child > div:nth-child(odd) { padding-right: 8px; } #footer.footer-style-1 .contact-fields-wrapper:first-child > div:nth-child(even) { padding-left: 8px; } #footer.footer-style-1 .contact-fields-wrapper:first-child > div.error:nth-child(odd)::before { right: 8px; } #footer.footer-style-1 .contact-fields-wrapper:first-child > div.error:nth-child(even)::before { left: 8px; } #footer #contact-form-message { min-height: 0; } } @media (max-width: 767px) { #footer .title { margin-top: 40px; } #footer .columns:first-child .title { margin-top: 0; } #footer .contact-address br { display: none; } #footer .contact-form { margin-top: 40px; } #footer.footer-style-1 .contact-fields-wrapper, #footer.footer-style-1 .contact-fields-wrapper:first-child { float: none; width: auto; padding: 0; } #footer #contact-form-message, #footer .subscription-form-message { min-height: 0; } #footer-bottom .columns.bottom-left-col, #footer-bottom .columns.bottom-right-col, #footer-bottom .links { float: none; } #footer-bottom .columns { text-align: center; } } @media (min-width: 480px) and (max-width: 767px) { #footer::before { background-size: 800px 4px; } #footer .contact-email { float: left; margin-right: 40px; margin-top: 4px; } #footer .contact-email + .fa-icon-list { margin-top: 0; } #footer .subscription-form .subscription-fields-wrapper { max-width: 538px; } } @media (max-width: 479px) { #footer::before { background-size: 700px 4px; } #footer [class*="-form"] { overflow: hidden; } #footer-bottom * { font-size: 14px; line-height: 24px; } } /*-----------------------------------------------------------------------------------*/ /* 36. Typography /*-----------------------------------------------------------------------------------*/ /* Highlights --------------------------------------------------- */ .highlight { color: #7c6c28; background-color: #fcfbe2; padding: 1px 4px 3px; } .highlight-dashline { font-weight: bold; border-bottom: 1px dashed #d99a36; } /* Lists --------------------------------------------------- */ .check-list, .check-small-list, .arrow-list, .dot-list { display: block; list-style: none; padding: 0; } .check-list{ margin-bottom: 40px; } /* Check marker */ .check-list li { position: relative; padding-left: 40px; margin-bottom: 20px; } .check-list li::before { position: absolute; top: 0; left: 0; font-family: FontAwesome; font-size: 165%; font-weight: normal; line-height: 1; color: #ed5f4a; content: "\f00c"; } .check-list.lead-text-medium li::before, .check-list.lead-text-basic li::before { top: 1px; font-size: 28px; } .check-small-list li { position: relative; padding-left: 29px; margin-bottom: 15px; } .check-small-list li::before { position: absolute; top: 5px; left: 0; font-family: FontAwesome; font-size: 100%; font-weight: normal; line-height: 1; color: #ed5f4a; content: "\f00c"; } .check-small-list.lead-text-medium li::before, .check-small-list.lead-text-basic li::before { top: 6px; font-size: 17px; } /* Arrow marker */ .arrow-list li { position: relative; padding-left: 25px; margin-bottom: 15px; } .arrow-list li::before { position: absolute; top: 6px; left: 0; font-family: FontAwesome; font-size: 100%; font-weight: normal; line-height: 1; color: #ed5f4a; content: "\f054"; } .arrow-list.lead-text-medium li::before, .arrow-list.lead-text-basic li::before { top: 7px; font-size: 17px; } /* Dot marker */ .dot-list li { position: relative; padding-left: 15px; } .dot-list li::before { position: absolute; top: 12px; left: 0; font-family: FontAwesome; font-size: 32%; font-weight: normal; line-height: 1; color: #ed5f4a; content: "\f04d"; } .check-list.marker-grey li::before, .check-small-list.marker-grey li::before, .arrow-list.marker-grey li::before, .dot-list.marker-grey li::before { color: #666; } .check-list.marker-secondary-color-dark li::before, .check-small-list.marker-secondary-color-dark li::before, .arrow-list.marker-secondary-color-dark li::before, .dot-list.marker-secondary-color-dark li::before { color: rgba(102, 75, 31, 0.7); /* #664b1f */ } .check-list.marker-white li::before, .check-small-list.marker-white li::before, .arrow-list.marker-white li::before, .dot-list.marker-white li::before { color: rgba(255, 255, 255, 0.8); } .check-list li:last-child, .check-small-list li:last-child, .arrow-list li:last-child, .dot-list li:last-child { margin-bottom: 0; } .check-list.indent-small, .check-small-list.indent-small, .arrow-list.indent-small, .dot-list.indent-small { padding-left: 10px; } .check-list.indent-medium, .check-small-list.indent-medium, .arrow-list.indent-medium, .dot-list.indent-medium { padding-left: 20px; } .check-list.indent-large, .check-small-list.indent-large, .arrow-list.indent-large, .dot-list.indent-large { padding-left: 30px; } /* Dividers --------------------------------------------------- */ .divider-line { position: relative; height: 0; margin-bottom: 0; border-bottom: 1px solid #dedede; } .divider-line.double { border-bottom-width: 2px; } .divider-line.triple { border-bottom-width: 3px; } .divider-line.grey-divider { border-bottom-color: #dedede; } .divider-line.white-divider { border-bottom-color: #fff; } .divider-line.colored-divider { border-bottom-color: rgba(245, 203, 135, 0.5); /* #f5cb87 */ } /* Gradient line with "arrow down" */ .divider-gradient { position: relative; height: 0; margin-bottom: 0; border-bottom: 1px solid #dedede; border-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 4%, #e5e5e5 30%, #e5e5e5 48%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 52%, #e5e5e5 52%, #e5e5e5 70%, rgba(255, 255, 255, 0) 96%) 1; border-image: -o-linear-gradient(right, rgba(255, 255, 255, 0) 4%, #e5e5e5 30%, #e5e5e5 48%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 52%, #e5e5e5 52%, #e5e5e5 70%, rgba(255, 255, 255, 0) 96%) 1; border-image: linear-gradient(to left, rgba(255, 255, 255, 0) 4%, #e5e5e5 30%, #e5e5e5 48%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 52%, #e5e5e5 52%, #e5e5e5 70%, rgba(255, 255, 255, 0) 96%) 1; } .divider-gradient::after { position: absolute; display: block; top: 0; left: 50%; width: 28px; height: 28px; margin-top: -12px; margin-left: -14px; font-family: FontAwesome; font-size: 28px; line-height: 1; color: #e5e5e5; text-align: center; content: "\f107"; } .divider-gradient.double { border-bottom-width: 2px; } /* Dotted line */ .divider-dotline { position: relative; height: 0; margin-bottom: 0; border-bottom: 1px dotted #dedede; } .divider-dotline.grey-divider { border-bottom-color: #ccc; } .divider-dotline.colored-divider { border-bottom-color: #f5cb87; } /* Small bar */ .small-bar { position: relative; width: 100%; height: 1px; padding-top: 4px; margin-bottom: 25px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .small-bar::before, .small-bar::after { position: absolute; display: block; left: 0; top: 4px; height: 4px; content: ""; -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); -o-transform: skew(-45deg); transform: skew(-45deg); } .small-bar::before { width: 80px; background-color: #b9b9b9; background: -webkit-linear-gradient(left, #b9b9b9 50%, rgba(185, 185, 185, 0.5)); background: -o-linear-gradient(left, #b9b9b9 50%, rgba(185, 185, 185, 0.5)); background: linear-gradient(to right, #b9b9b9 50%, rgba(185, 185, 185, 0.5)); } .small-bar::after { width: 6px; background-color: #fff; margin-left: 20px; } .ie9 .small-bar::after { display: none; } .small-bar.grey-bar::before { background-color: #b9b9b9; background: -webkit-linear-gradient(left, #b9b9b9 50%, rgba(185, 185, 185, 0.5)); background: -o-linear-gradient(left, #b9b9b9 50%, rgba(185, 185, 185, 0.5)); background: linear-gradient(to right, #b9b9b9 50%, rgba(185, 185, 185, 0.5)); } .small-bar.colored-bar::before { background-color: #f5cb87; background: -webkit-linear-gradient(left, #f5cb87 50%, rgba(245, 203, 135, 0.5)); background: -o-linear-gradient(left, #f5cb87 50%, rgba(245, 203, 135, 0.5)); background: linear-gradient(to right, #f5cb87 50%, rgba(245, 203, 135, 0.5)); /* #f5cb87 */ } .small-bar.text-center::before, .small-bar[style*="text-align: center"]::before { left: 50%; width: 60px; margin-left: -30px; } .small-bar.text-center::after, .small-bar[style*="text-align: center"]::after { left: 50%; margin-left: -10px; } /* Note separator */ .note-separator { width: 54px; height: 0; padding-top: 10px; border-bottom: 1px solid #d5d5d5; margin-bottom: 15px; } .note-separator.grey-separator { border-bottom-color: #d5d5d5; } .note-separator.colored-separator { border-bottom-color: #f5ae3d; } /* For IE10 and higher */ @media (-ms-high-contrast: active), (-ms-high-contrast: none) { .small-bar::after { top: 3px; height: 6px; } } /*-----------------------------------------------------------------------------------*/ /* 37. Other Elements and Misc. /*-----------------------------------------------------------------------------------*/ /* Vector icons - Font Awesome --------------------------------------------------- */ .fa-icon-list { list-style: none; margin: 0 0 -10px; padding: 0; font-size: 0; line-height: 0; } .fa-icon-list li { display: inline-block; margin: 0 10px 10px 0; } .fa-icon-list li:last-child { margin-right: 0; } .fa-icon-list li .fa { font-size: 17px; color: inherit; } /* Dot leaders --------------------------------------------------- */ .dot-leaders { list-style: none; margin: 0; padding: 0; } .dot-leaders li { display: table; width: 100%; } .dot-leaders li > span { display: table-cell; vertical-align: bottom; } .dot-leaders span.param { padding-right: 6px; white-space: nowrap; } .dot-leaders span.dotted-separator { width: 100%; height: 10px; background-image: -webkit-radial-gradient(#ccc 1px, transparent 0px); background-image: -o-radial-gradient(#ccc 1px, transparent 0px); background-image: radial-gradient(#ccc 1px, transparent 0px); background-size: 6px 6px; background-repeat: repeat-x; background-position: left 0 bottom 6px; } .dot-leaders span.value { padding-left: 6px; white-space: nowrap; } @media (max-width: 570px) { .dot-leaders span.param { white-space: normal; } .dot-leaders span.dotted-separator { width: 30px; } .dot-leaders span.value { width: 1%; } } /* Videos (inline player) --------------------------------------------------- */ video { max-width: 100%; } .html5-video-container { position: relative; max-width: 100%; } .html5-video-container .player { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; } /* YouTube, Vimeo, and other oEmbed videos */ iframe[src*="oembed"] { max-width: 100%; } .video-container { position: relative; } .video-container iframe { border: none; } .fluid-width-video-wrapper { width: 100%; position: relative; padding-top: 56.25%; } .fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /* Misc. --------------------------------------------------- */ .error-404 { font: 220px/1 Verdana, Geneva, sans-serif; color: #dadde8; text-align: center; } .grid-col { background-color: #eee; padding: 5px 0; margin-bottom: 2px; text-align: center; } @media (min-width: 992px) and (max-width: 1199px) { .error-404 { font-size: 200px; } } @media (max-width: 991px) { .error-404 { font-size: 180px; margin-top: -30px; } } @media (max-width: 479px) { .error-404 { font-size: 140px; } } /* Fixing known bug with fixed background images in IE 10 and higher ---------------------------------------------------------------------- */ @media (-ms-high-contrast: active), (-ms-high-contrast: none) { html { overflow: hidden; height: 100%; } body { overflow: auto; height: 100%; } } /* ---- SERVICES 3 CSS ---- */ .services-3 { position: relative; } .services-grid-3 { padding: 30px 15px; transition: all 0.3s ease 0s; o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; background-color: #f4f7fa; margin-bottom: 30px; position: relative; overflow: hidden; box-shadow: 0 6px 6px -7px rgba(0, 0, 0, 0.7); } .services-grid-3::after { border-bottom: 50px solid #eee; border-right: 50px solid #FFF; box-shadow: 0 6px 6px -7px rgba(0, 0, 0, 0.7); content: ""; height: 0; left: auto; opacity: 1; position: absolute; right: 0; top: 0; width: 0; z-index: 9; } .services-grid-3 i { background-color: #fff; bottom: 0; color: #999; float: left; font-size: 40px; margin-right: 10px; padding: 20px 15px; } .services-grid-3:hover h4 { color: #f8b947; } .services-grid-3 h4 { color: #242424; font-size: 24px; font-weight: 500; margin-top: 0; margin-bottom: 10px; text-transform: capitalize; } .services-grid-3 p { color: #242424; margin-bottom: 0; } .services-grid-3 a img { float: left; margin-right: 12px; margin-top: 7px; position: relative; width: 60px; } .services-grid-3 .img-icon-bg img { position: absolute; right: 0; opacity: 0.04; top: 0; -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .content-area h4 { margin: 0; font-size: 18px; } .content-area p { margin: 0; } /************** banner-bottom boxes ****************************/ .bottom-box{ width: 100%; padding: 15px; background-color: #337ab7; border: 5px solid #a0bfda; color: #fff; text-align: center; line-height: 20px; border-radius: 5px; -webkit-transition: width 5s; /* Safari 3.1 to 6.0 */ transition: width 5s } .bottom-box i{ font-size: 30px; margin-bottom: 10px; } .bottom-box p{ font-size:16px; } .bottom-box:hover{ background-color: #a0bfda; border: 5px solid #337ab7; cursor:pointer; } /****************** have any quetion **********************/ .qut{ width: 100%; margin-top: 40px; background-color: #d44147; overflow: hidden; border: 1px solid #c9292f; border-radius: 5px; } .qut h3{ color: #fff; margin: 20px 0; font-size: 28px; font-weight: 500; text-align: left; width: 60%; float: left; padding-left: 15%; } .qut h3 span{ margin-left:50px; } .qut h3 a{ color: #fff; text-decoration: none; background-color: #337ab7; padding: 5px 10px; border-radius: 3px; } .qut h3 a:hover{ background-color: #a0bfda; } .qut a{ color: #fff; text-decoration: none; background-color: #337ab7; padding: 5px 10px; border-radius: 3px; font-size: 28px; line-height: 68px; } .qut a:hover{ background-color: #a0bfda; } /*** ==================================================================== Fact Counter Section ==================================================================== ***/ .fact-counter{ position:relative; padding: 70px 0px 40px; background-repeat:no-repeat; background-size:cover; background-position:center center; overflow:hidden; color:#ffffff; margin-bottom: 3px; } /*.fact-counter:before{ content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background: rgba(10, 27, 34, 0.95); z-index:0; }*/ .fact-counter .auto-container{ position:relative; z-index:1; } .fact-counter .column{ position:relative; margin-bottom:40px; text-align:center; z-index:5; } .fact-counter .item { position: relative; border: 2px dashed #19333e; border-radius: 50%; color: #19333e; padding: 41px 0 46px; background-color: #fff; width: 75%; margin: 0 auto; } .fact-counter .column .icon i { font-size: 30px; position: absolute; bottom: -10px; right: 5px; margin-bottom:20px; color: #19333e; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .fact-counter .count-outer{ position:relative; font-size: 36px; font-weight: 600; padding: 0px 10px 5px; font-family: 'Poppins', Sans-serif; } .fact-counter .count-outer:before { } .fact-counter .column .counter-title{ position:relative; font-size: 18px; font-weight: 300; font-family: "Hind", Sans-serif; color: #d44147; } .table-bordered { border: 1px solid #ddd; } .table-bordered > thead > tr > th{ font-weight: 600; } @media (max-width: 480px) { .trapezium-bg2{ display: none; } #navigation:before{ display: none; } #header.extended #navigation{ background-color: #b0b813 !important; } .diamond-square{ margin-top: -47px !important; } .diamond-shapes-preview{ margin-top: 100px !important; } } .impdates .dates-list { padding: 0; list-style: none; } .impdates .dates-list li { width: 49%; display: inline-block; background: #ebebeb; font-size: 14px; padding: 0px; font-family: tahoma; } .impdates .dates-list li:last-child, ol li:last-child { margin-bottom:10px; } .impdates .dates-list li .square-box.b6 { background: #1B998B; } .impdates .dates-list li .square-box.b1 { background: #1B998B; } .impdates .dates-list li .square-box { display: inline-block; float: left; width: 144px; height: 44px; } .impdates .dates-list li .square-content { color: #fff; font-size: 13px; text-align: center; line-height: 2em; margin-top: 3px; } .impdates h4 { color: #fff; font-size: 22px; font-weight: 600; } .impdates .impcont { margin-top: 11px; float: left; width: 53%; color: #000 !important; padding-left: 12px; font-size: 13px; } .aab P { font-size: 18px; color: #000; font-weight: 600; background: #b0b813; padding: 6px; } .impdates .dates-list li .square-box.b2 { background: #d44147; } .impdates .dates-list li .square-box.b3 { background: #61651b; } .impdates .dates-list li .square-box.b4 { background: #b0b813; } .impdates .dates-list li .square-box.b5 { background: #113d68; } .gst-fill { list-style: none; padding: 53px 0;} .gst-fil-banner img { width:100%; } #jumbotron-small-id { margin: auto; max-width: 300px; margin-top: 12%; background: #b0b813; } .jumbotron.jumbotron-small { padding: 24px 30px 26px; } .jumbotron h3 { font-weight: 700; font-size: 22px; color: #fff; } .jumbo { margin-bottom: 15px !important; font-size: 16px!important; font-weight: 200!important; } .design_fast { border: 1px solid #ececec; padding: 2.78571429em; border-radius: 6px; } .design_fast .three_icon_feature { overflow: hidden; margin-bottom: 30px; } .three_icon_feature .feature__body { width: 75%; float: right; } .three_icon_feature img { float:left; } .background-grey { background-color: #F6F6F6!important; } .heading-center { text-align: center; float: none; } .heading h3+span, .heading h3+span.lead { font-size: 18px; } .heading.heading-center>span, .heading.title-center>span { max-width: 700px; margin-left: auto; margin-right: auto; } .heading>span { display: block; color: #888; } .terms-p p { color:#000 !important; } .thanku { background :url(../images/thnku.jpg); height:400px; padding: 77px; } .thankx h3 { text-align: center; font-size: 54px; margin: 0px; color: red; font-weight: 600; font-family: initial; } .thankx p { } .home-active { background:#000; } .field-submit{ margin-top: 15px; } .lead-text-basic em{ color: #000; } .imp-links li { line-height: 1.625; color: #fff; } @media (min-width: 320px) and (max-width: 480px) { #home-slider .slide .columns .h2-slogan{ font-size: 24px;} .banner-top li p{ font-size: 12px !important; margin-top: -5px; line-height: 14px; } .banner-top{ padding-left:0px; } .banner-top li{ padding: 6px 6px !important; width: 90px !important; height: 90px !important; } .qut{ margin-top: 75px; } .qut h3 { text-align: center; width: 100%; padding-left: 0; margin-bottom: 10px; } .qut a{ line-height: 55px; margin-left: 19%; } .video-frame{ width:100% !important; } .pay-apply p{ width: 65%; } ul.opcList li:after{ background: none; } ul.opcList{ margin-left: 120px; } ul.opcList li{ margin: 0px 0px 50px; } .docforgst { width: 100%; } .design_fast{ padding: 15px; } .hr-title.hr-long { width: 100%; text-align: center; } .hr-title abbr { font-size: 18px; } #sidebar .widget.mb-last-child{ margin-bottom: 0; } .fact-counter{ padding: 40px 0px 0px; } .fact-counter .column:last-child{ margin-bottom:0px; } }