/* ============================================================================ Theme Name: Metropolis - Multipurpose HTML5 Theme Theme URI: http://pixel-industry.com/html/metropolis Author: pixel-industry Version: 1.1 ============================================================================= */ /* ----------------------------------------------------------------------------- CSS CONTENTS 1. Typography 2. Elements 2.1. Entry Note 2.2. Note 2.3. Arrow List 2.4. Section Title 2.5. Blockquote 2.6. Buttons 2.7. Tabs 2.8. Tabs Vertical 2.9. Accordion 2.10. Dropcaps 2.11. Information Boxes 2.12. Image sliders (for sliders on regular pages) 3. Header Styles 4. Content and Page Wrappers 5. About Us 6. Services 7. FAQ Page 8. Pricing Tables 9. Portfolio 10. Blog 11. Contact 12. Widgets 13. Footer ----------------------------------------------------------------------------- */ /* ============================================================================= 1. TYPOGRAPHY ============================================================================= */ /* Headings ----------------------------------------------------------------------------- */ @font-face { font-family: 'mysticalregular'; src: url('../fonts/mystical-webfont.eot'); src: url('../fonts/mystical-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/mystical-webfont.woff2') format('woff2'), url('../fonts/mystical-webfont.woff') format('woff'), url('../fonts/mystical-webfont.ttf') format('truetype'), url('../fonts/mystical-webfont.svg#mysticalregular') format('svg'); font-weight: normal; font-style: normal; } h1{ font: 20px 'Open Sans', Arial, sans-serif; font-weight: 600; color: #444; margin-bottom: 20px; } h2{ font: 18px 'Open Sans', Arial , sans-serif; font-weight: 600; color: #444; margin-bottom: 20px; } h3{ font: 16px 'Open Sans', Arial, sans-serif; font-weight: 600; color: #444; margin-bottom: 15px; } h4{ font: 15px 'Open Sans', Arial, sans-serif; font-weight: 600; color: #444; margin-bottom: 20px; } h5{ font: 14px 'Open Sans', Arial, sans-serif; font-weight: 600; color: #444; margin-bottom: 20px; } h6{ font: 13px 'Open Sans', Arial, sans-serif; font-weight: 600; color: #444; margin-bottom: 20px; } p{ font: 13px 'Open Sans', Arial, sans-serif; font-weight: 400; line-height: 20px; color: #777; } .gray{ font: 13px 'Open Sans', Arial, sans-serif; font-weight: 700; line-height: 20px; color: #666666; } a{ font: 12px 'Open Sans', Arial, sans-serif; font-weight: 400; color: #777; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } /* Read more button ----------------------------------------------------------------------------- */ .read-more-btn{ background: #f6f6f6; float: right; cursor: pointer; margin-top: 12px; } .read-more-btn a{ float: left; padding: 4px 8px 3px; font-size: 11px; line-height: 11px; display: block; height: 20px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; color:#fff; } .read-more-btn .plus{ background: #dfdfdf; display: table-cell; width: 18px; height: 20px; text-align: center; vertical-align: middle; font-weight: bold; float: left; color:#fff; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .read-more-btn:hover .plus, .read-more-btn:hover a{ color: #fff !important; } img.float-left{ margin-right: 20px; float: left; margin-top: 5px; } img.float-right{ float: right; margin-left: 20px; margin-top: 5px; } .text-dark{ color: #333; } .text-big{ font-size: 13px; } .social-links li a{ font-size: 12px; color: #fff; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } img + p, p + img{ display: block; margin-top: 14px; } p + blockquote, blockquote + p{ display: block; margin-top: 14px; float: left; } /* ============================================================================ 2. ELEMENTS ============================================================================ */ /* 2.1. ENTRY NOTE ----------------------------------------------------------------------------- */ .entry-note{ width: 100%; float: left; } .entry-note h1{ width: 100%; margin-bottom: 10px; text-align: center; font-size: 22px; font-family: Arial, sans-serif; color:#005b89; line-height: 28px; } .entry-note p{ font-size: 13px; line-height: 22px; width: 100%; padding: 0 90px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; text-align: center; } /* 2.2. NOTE ----------------------------------------------------------------------------- */ .note-container{ float: left; width: 100%; padding: 3px; border: 1px solid #e6e6e6; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .note-container .note-content{ background: #fcfcfc; border: 1px solid #e6e6e6; padding: 20px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; position: relative; } .note-container .note-content h1, .note-container .note-content h2, .note-container .note-content h3, .note-container .note-content h4, .note-container .note-content h5, .note-container .note-content h6{ margin-bottom: 2px; display: block; width: 100%; } .note-container .note-content span{ width: 100%; } /* NOTE FOR ALL COLUMNS */ .grid_12 .note-container .note-content .note{ max-width: 780px; float: left; } .grid_12 .note-container .note-content .note-btn{ max-width: 130px; position: absolute; right: 20px; display: block; margin-top: -20px; top: 50%; } /* 2.3. ARROW LIST ----------------------------------------------------------------------------- */ .arrow-list{ padding: 0; } .arrow-list li{ min-height: 15px; padding-left: 25px; margin-bottom: 5px; } /* 2.4. SECTION TITLE ----------------------------------------------------------------------------- */ .section-title{ width: 100%; background: url('../images/divider.png') repeat-x 0 center; float: left; margin-bottom: 20px; } .section-title.center{ margin-bottom: 30px; } .section-title.center .title-container{ background: #fff; display: table; margin: 0 auto; position: relative; } .section-title.center .title-container:after{ background: url('../images/sb.png') no-repeat; background-size: 10px; content: ''; position: absolute; display: block; width: 10px; height: 10px; top: 50%; right: 0; margin-top: -5px; } .section-title.center .title-container:before{ background: url('../images/sb.png') no-repeat; background-size: 10px; content: ''; position: absolute; display: block; width: 10px; height: 10px; top: 50%; left: 0; margin-top: -5px; } .section-title.center .title-container .title{ padding: 0 30px; } .section-title.center h1, .section-title.center h2, .section-title.center h3, .section-title.center h4, .section-title.center h5, .section-title.center h6{ margin-bottom: 3px; text-align: center; } .section-title.center span{ text-align: center; } .section-title.left h1, .section-title.left h2, .section-title.left h3, .section-title.left h4, .section-title.left h5, .section-title.left h6{ margin-bottom: 0; background: #fff; padding-right: 30px; position: relative; display: block; } .section-title.left h1:after, .section-title.left h2:after, .section-title.left h3:after, .section-title.left h4:after, .section-title.left h5:after, .section-title.left h6:after{ background: url('../images/sb.png') no-repeat; background-size: 10px; content: ''; position: absolute; display: block; width: 10px; height: 10px; top: 50%; right: 0; margin-top: -5px; } /* 2.5. BLOCKQUOTE ----------------------------------------------------------------------------- */ blockquote{ background: #f6f6f6; padding: 20px; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; font: 14px 'Open Sans', Arial, sans-serif; line-height: 22px; font-style: italic; font-weight: 300; float: left; } cite{ font-size: 12px; padding-top: 10px; display: block; width: 100%; font-weight: 400; } blockquote.style2{ background: #fff; padding: 20px 0 20px 20px; } /* 2.6. BUTTONS ----------------------------------------------------------------------------- */ .btn-group{ float: left; width: 100%; } .btn-group .btn-medium, .btn-group .btn-big{ float: left; margin-right: 10px; } .btn-medium, .btn-big{ border: 0px solid; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; text-transform: none; color: #fff; cursor: pointer; float: left; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .btn-medium{ padding: 7px 15px; font: 11px 'Open Sans', Arial, sans-serif; } .btn-big{ padding: 10px 17px; font: 13px 'Open Sans', Arial, sans-serif; } /* BLACK BUTTONS ----------------------------------------------------------------------------- */ .btn-medium.black, .btn-big.black{ background: rgb(85,85,85); /* Old browsers */ background: -moz-linear-gradient(top, rgba(85,85,85,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,85,85,1)), color-stop(100%,rgba(68,68,68,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(68,68,68,1) 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, rgba(85,85,85,1) 0%,rgba(68,68,68,1) 100%); /* W3C */ border: 1px solid #333; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } .btn-medium.black:hover, .btn-big.black:hover{ background: rgb(68,68,68); /* Old browsers */ background: -moz-linear-gradient(top, rgba(68,68,68,1) 0%, rgba(85,85,85,1) 99%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,68,68,1)), color-stop(99%,rgba(85,85,85,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(85,85,85,1) 99%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(85,85,85,1) 99%); /* Opera 11.10+ */ background: linear-gradient(to bottom, rgba(68,68,68,1) 0%,rgba(85,85,85,1) 99%); /* W3C */ } .btn-medium.black span, .btn-big.black span{ color: #fff; font-weight: 500; } /* WHITE BUTTONS ----------------------------------------------------------------------------- */ .btn-medium.white, .btn-big.white{ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* W3C */ border: 1px solid #ddd; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; color: #fff; } .btn-medium.white:hover, .btn-big.white:hover{ background: rgb(246,246,246); /* Old browsers */ background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* W3C */ } .btn-medium.white span, .btn-big.white span{ color: #444; font-weight: 500; } /* WHITE BUTTONS ----------------------------------------------------------------------------- */ .btn-medium.white, .btn-big.white{ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* W3C */ border: 1px solid #ddd; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; color: #fff; } .btn-medium.white:hover, .btn-big.white:hover{ background: rgb(246,246,246); /* Old browsers */ background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* W3C */ } /* ORANGE BUTTONS ----------------------------------------------------------------------------- */ .btn-medium.orange, .btn-big.orange{ background: #f97965; /* Old browsers */ background: -moz-linear-gradient(top, #f97965 0%, #fb6148 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f97965), color-stop(100%,#fb6148)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f97965 0%,#fb6148 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f97965 0%,#fb6148 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #f97965 0%,#fb6148 100%); /* W3C */ border: 1px solid #cf5541; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; color: #fff; } .btn-medium.orange:hover, .btn-big.orange:hover{ background: #fb6148; /* Old browsers */ background: -moz-linear-gradient(top, #fb6148 0%, #f97965 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb6148), color-stop(100%,#f97965)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fb6148 0%,#f97965 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fb6148 0%,#f97965 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #fb6148 0%,#f97965 100%); /* W3C */ } /* GREEN BUTTONS ----------------------------------------------------------------------------- */ .btn-medium.green, .btn-big.green{ background: #c7e487; /* Old browsers */ background: -moz-linear-gradient(top, #c7e487 0%, #b9d57c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7e487), color-stop(100%,#b9d57c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #c7e487 0%,#b9d57c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #c7e487 0%,#b9d57c 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #c7e487 0%,#b9d57c 100%); /* W3C */ border: 1px solid #a6c06c; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; color: #697a44; } .btn-medium.green:hover, .btn-big.green:hover{ background: #b9d57c; /* Old browsers */ background: -moz-linear-gradient(top, #b9d57c 0%, #c7e487 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9d57c), color-stop(100%,#c7e487)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #b9d57c 0%,#c7e487 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b9d57c 0%,#c7e487 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #b9d57c 0%,#c7e487 100%); /* W3C */ } .btn-medium.green span, .btn-medium.green:hover span, .btn-big.green span, .btn-medium.green:hover span{ color: #697a44; } /* BLUE BUTTON ----------------------------------------------------------------------------- */ .btn-medium.blue, .btn-big.blue{ background: #8fd1f3; /* Old browsers */ background: -moz-linear-gradient(top, #8fd1f3 0%, #7abcde 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fd1f3), color-stop(100%,#7abcde)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #8fd1f3 0%,#7abcde 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #8fd1f3 0%,#7abcde 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #8fd1f3 0%,#7abcde 100%); /* W3C */ border: 1px solid #70a7c3; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; color: #396a83; } .btn-medium.blue:hover, .btn-big.blue:hover{ background: #7abcde; /* Old browsers */ background: -moz-linear-gradient(top, #7abcde 0%, #8fd1f3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcde), color-stop(100%,#8fd1f3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7abcde 0%,#8fd1f3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7abcde 0%,#8fd1f3 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #7abcde 0%,#8fd1f3 100%); /* W3C */ } .btn-medium.blue span, .btn-medium.blue:hover span, .btn-big.blue span, .btn-medium.blue:hover span{ color: #396a83; } /* YELLOW BUTTON ----------------------------------------------------------------------------- */ .btn-medium.yellow, .btn-big.yellow{ background: #f7d58f; /* Old browsers */ background: -moz-linear-gradient(top, #f7d58f 0%, #f8c866 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7d58f), color-stop(100%,#f8c866)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f7d58f 0%,#f8c866 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f7d58f 0%,#f8c866 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #f7d58f 0%,#f8c866 100%); /* W3C */ border: 1px solid #d6aa51; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; color: #9a7221; } .btn-medium.yellow:hover, .btn-big.yellow:hover{ background: #f8c866; /* Old browsers */ background: -moz-linear-gradient(top, #f8c866 0%, #f7d58f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8c866), color-stop(100%,#f7d58f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f8c866 0%,#f7d58f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f8c866 0%,#f7d58f 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #f8c866 0%,#f7d58f 100%); /* W3C */ } .btn-medium.yellow span, .btn-medium.yellow:hover span, .btn-big.yellow span, .btn-medium.yellow:hover span{ color: #9a7221; } /* RED BUTTON ----------------------------------------------------------------------------- */ .btn-medium.red, .btn-big.red{ background: #e83130; /* Old browsers */ background: -moz-linear-gradient(top, #e83130 0%, #d52b2a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e83130), color-stop(100%,#d52b2a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e83130 0%,#d52b2a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e83130 0%,#d52b2a 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #e83130 0%,#d52b2a 100%); /* W3C */ border: 1px solid #a71818; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; color: #fff; } .btn-medium.red:hover, .btn-big.red:hover{ background: #d52b2a; /* Old browsers */ background: -moz-linear-gradient(top, #d52b2a 0%, #e83130 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d52b2a), color-stop(100%,#e83130)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #d52b2a 0%,#e83130 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #d52b2a 0%,#e83130 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #d52b2a 0%,#e83130 100%); /* W3C */ } .btn-medium.yellow span, .btn-medium.yellow:hover span, .btn-big.yellow span, .btn-medium.yellow:hover span{ color: #9a7221; } /* RED AND ORANGE BUTTONS SPANS ----------------------------------------------------------------------------- */ .btn-medium.red span, .btn-medium.red:hover span, .btn-big.red span, .btn-big.red:hover span, .btn-medium.orange span, .btn-medium.orange:hover span, .btn-big.orange span, .btn-big.orange:hover span{ color: #fff; } /* Only for presentation purposes */ .grid_12.buttons .grid_2{ margin-bottom: 20px; } /* 2.7. TABS ----------------------------------------------------------------------------- */ .tabs{ width: 100%; overflow: hidden; float: left; } .tabs i{ padding-right: 5px; font-size: 13px; } .tabs li{ background: #f6f6f6; float: left; border-top: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee; overflow: hidden; position: relative; padding: 0; line-height: 32px; } .tabs li:first-child{ border-left: 1px solid #eee; } .tabs li a{ color: #333; padding: 0px 16px; font: 12px 'Open Sans', Arial, sans-serif; line-height: 33px; padding-top: 2px; } .tabs li.active{ background: #fff; border-bottom: 1px solid #fff; } .tab-content-wrap{ border: 1px solid #eee; margin-top: -1px; overflow: hidden; width: 100%; float: left; } .tab-content{ padding: 15px; background: #fff; } /* 2.8. TABS VERTICAL ----------------------------------------------------------------------------- */ .tabs.vertical{ overflow: hidden; float: left; } .tabs.vertical li{ background: #f6f6f6; float: left; border-bottom: 1px solid #eee; border-right: 1px solid #eee; border-left: 1px solid #eee; border-top: none; overflow: hidden; position: relative; padding: 0; line-height: 42px; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; } .tabs.vertical li:first-child{ border-top: 1px solid #eee !important; } .tabs.vertical li a{ color: #333; padding: 12px 15px; font: 14px 'Open Sans', Arial, sans-serif; float: left; width: 100%; box-sizing: border-box; } .tabs.vertical li a i{ font-size: 16px; padding-right: 10px; } .tabs.vertical li.active{ border-bottom: 1px solid #eee; border-right: none; border-top: none; background: #fff; } .tab-content-wrap.vertical{ margin-top: 0; overflow: hidden; float: left; border: none; } .tab-content-wrap.vertical .tab-content{ padding: 0; background: #fff; } /* 2.9. ACCORDION ------------------------------------------------------------------------------*/ .accordion{ position: relative; float: left; width:100%; } .accordion .title{ float: left; margin-bottom: 5px !important; width: 100%; background: #fbfbfb; border:1px solid #F3F3F3; padding: 5px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .accordion .title a{ background: url('../images/acc-closed.png') no-repeat 0 center; padding-left: 36px; padding-top: 3px; padding-bottom: 3px; color: #333; cursor: pointer; display: block; font: 13px 'Open Sans', Arial, sans-serif; display: block; } .accordion .title:last-child{ margin-bottom: 0 !important; } .accordion .content{ display:none; float: left; overflow: hidden; margin-bottom: 20px; } /* 2.10. DROPCAPS ------------------------------------------------------------------------------*/ span.dropcap-color{ color: #fff; float: left; margin-right: 10px; font: 18px 'Open Sans', Arial,sans-serif; line-height: 18px; padding: 8px 10px; position: relative; top: 3px; } span.dropcap{ color: #fff; background: #555; float: left; margin-right: 10px; font: 18px 'Open Sans', Arial,sans-serif; line-height: 18px; padding: 8px 10px; position: relative; top: 3px; } /* 2.11. INFORMATION BOXES - INFO BOX ----------------------------------------------------------------------------- */ .infobox{ background: #e0f2ff; border: 1px solid #c1def2; width: 100%; float: left; margin-bottom: 10px; } .infobox p{ background: url('../images/info-box.png') no-repeat 0 center; margin: 10px; padding-left: 25px; color: #61adb0; text-shadow: 0 1px 0 #fff; } /* Infromation boxes - WARNING BOX ----------------------------------------------------------------------------- */ .warning-box{ background: #f8f6bc; border: 1px solid #e7e48b; width: 100%; float: left; margin-bottom: 10px; } .warning-box p{ background: url('../images/warning-box.png') no-repeat 0 center; margin: 10px; padding-left: 27px; color: #989426; text-shadow: 0 1px 0 #fff; } /* Infromation boxes - SUCCES BOX ----------------------------------------------------------------------------- */ .success-box{ background: #ebfdd7; border: 1px solid #cef4a4; border-radius: 3px; width: 100%; float: left; margin-bottom: 10px; } .success-box p{ background: url('../images/success-box.png') no-repeat 0 center; margin: 10px; padding-left: 25px; color: #7eb244; text-shadow: 0 1px 0 #fff; } /* Infromation boxes - ERROR BOX ----------------------------------------------------------------------------- */ .error-box{ background: #fadddd; border: 1px solid #fcc1c1; border-radius: 3px; width: 100%; float: left; margin-bottom: 10px; } .error-box p{ background: url('../images/error-box.png') no-repeat 0 center; margin: 10px; padding-left: 25px; color: #d86d6d; text-shadow: 0 1px 0 #fff; } /* 2.12. IMAGE SLIDERS (FOR SLIDERS ON REGULAR PAGES) ---------------------------------------------------------------------------- */ .image-slider .nivo-directionNav a{ top: 100%; margin-top: -15px; } .image-slider .nivo-prevNav{ left: 50%; margin-left: -31px; } .image-slider .nivo-nextNav{ right: 50%; margin-right: -31px; } .grid_7 .image-slider .nivo-caption h3, .grid_7 .image-slider .nivo-caption span{ max-width: 460px; } .nivoSlider.image-slider{ margin-bottom: 17px; } /* ============================================================================ 3. HEADER STYLES ============================================================================ */ body { padding-top:0; } #header-wrapper{ width: 100%; margin: 0 auto; /*position: fixed; top:0;*/ z-index:9999; background: #106592; /* Old browsers */ background: -moz-linear-gradient(top, #106592 0%, #2181b3 60%, #2181b3 100% ); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#106592), color-stop(60%,#2181b3), color-stop(100%,#2181b3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #106592 0%,#2181b3 60%,#2181b3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #106592 0%,#2181b3 60%,#2181b3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #106592 0%,#2181b3 60%,#2181b3 100%); /* IE10+ */ background: linear-gradient(to bottom, #106592 0%,#2181b3 60%,#2181b3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#106592', endColorstr='#2181b3',GradientType=0 ); /* IE6-9 */ } #header{ width: 940px; margin: 10px auto 10px; } #header .mid { color: #fff; float: left; font-size: 22px; font-family:"mysticalregular", sans-serif; line-height: 50px; padding:10px 0 0; } #logo{ float: left; margin-right: 10px; position:relative; } #logo img{ height:72px; } #contact-info-container{ float: right; width: 200px; } #contact-info-container .info{ float: right; display: block; margin-bottom: 5px; } #contact-info-container .info li{ float: left; text-align: right; margin-right: 20px; display: block; } #contact-info-container .info li:last-child{ margin-right: 0; } #contact-info-container .info li img{color: transparent; font-size: 0; position: relative; top: -3px; vertical-align: middle;} #contact-info-container .social-links{ float: right; width: 100%; display: block; } #contact-info-container .social-links li{ float: right; margin-right: 20px; color:#fff; } #contact-info-container .social-links li:first-child{ margin-right: 0; } .top-shadow{ background: url('../images/shadow.png') no-repeat; width: 960px; height: 38px; margin: 0 auto -38px; position: relative; z-index: 100; } /* Navigation ----------------------------------------------------------------------------- */ #nav-container{ float: left; width: 100%; z-index: 900; position: relative; height: 48px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fafafa)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#fafafa 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#fafafa 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #ffffff 0%,#fafafa 100%); /* W3C */ } #nav-container.stick{ position:fixed; top:0; box-shadow:0 0px 4px 0 rgba(0, 0, 0, .5); z-index:9999; } #nav-container select{ display: none; } #nav-container .grid_12{ margin-bottom: 0; } #nav{ height: 100%; margin-right: 20px; list-style: none; float: left; } #nav li > a{ } .nav-icon{ color: #444; font-size: 14px; margin-bottom: 3px; text-align: center; display: block !important; width: 100%; } #nav > ul{ display: block !important; } #nav li{ float: left; position: relative; cursor: pointer; } #nav > ul > li{ height: 48px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; border-right: 1px solid #e8e8e8; } #nav > ul > li.logo-mini { display:none; } #nav-container.stick #nav > ul > li.logo-mini { display:block; border-left:0; } #nav-container.stick #nav > ul > li.logo-mini a { padding:0 10px; } #nav > ul > li:first-child{ border-left: 1px solid #e8e8e8; } #nav li a{ float: none; display: block; padding: 15px 20px; font: 14px 'Open Sans', Arial, sans-serif; color: #333; } #nav > ul > li.current-menu-item a, #nav > ul > li.current-menu-item span, #nav > ul > li:hover span, #nav > ul > li:hover a{ color: #fff; }#nav > ul > li a:hover{ color: #fff !important; } /* MAIN NAVIGATION SECOND LEVEL ----------------------------------------------------------------------------- */ #nav li ul{ display: none; position: absolute; padding-top: 2px; margin: 0; top: 100%; left: 0; z-index: 100; } #nav li ul li{ border-right: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background: #fff; padding: 0px 10px !important; } #nav li ul li:first-child{ border-top: 1px solid #e6e6e6; } #nav li ul li:hover > a{ text-indent: 3px; } #nav li ul li a{ text-transform: none !important; font: 12px 'Droid Sans', sans-serif; line-height: 15px; color: #555 !important; transition-property: text-indent; transition-duration: 0.2s; -webkit-transition-property: text-indent; -webkit-transition-duration: 0.2s; -moz-transition-property: text-indent; -moz-transition-duration: 0.2s; -o-transition-property: text-indent; -o-transition-duration: 0.2s; } #nav li ul li, #nav li ul li a{ float: none; } #nav li ul li a { width: 190px; display: block; padding:10px; } /* MAIN NAVIGATION THIRD LEVEL ----------------------------------------------------------------------------- */ #nav li ul li ul { display: none; left: 225px; } #nav li ul li:hover ul { left: 225px; top: -1px; padding-top: 0 !important; padding-left: 5px; } #nav li ul li ul ul { display: none !important; } /* Search bar ----------------------------------------------------------------------------- */ #search-box{ width: 190px; float: right; height: 65px; border-right: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; padding: 20px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } #search-box #m_search{ background: none; border: none; width: 115px; font: 12px 'Open Sans', Arial, sans-serif; float: left; margin-right: 10px; } #search-box .search-submit{ background: url('../images/search.png') no-repeat center 3px; width: 15px; height: 18px; display: block; text-indent: -9999px; float: left; border: none; cursor: pointer; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } /* ============================================================================= 4. CONTENT AND PAGE WRAPPERS ============================================================================ */ .page-title-container{ width: 100%; background-image: url('../images/page-title.png'); background-repeat: no-repeat; background-position: center; background-color: #eee; display: block; margin: 0 auto 10px; padding: 32px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .page-title{ width: 940px; margin-bottom: 0; } .page-title .title{ float: left; max-width: 700px; box-sizing: border-box; } .page-title .title h1{ display: inline-block; font: 20px Arial, sans-serif; font-weight: normal; padding: 5px 10px; background: #fff; float: left; margin-right: 20px; line-height: 20px; text-transform: none; margin-bottom: 0; color:#005B89; } .breadcrumbs{ float: left; background: #fff; padding: 5px 10px 5px 0; } .breadcrumbs li{ float: left; padding-left: 8px; font: 12px 'Open Sans', Arial, sans-serif; color: #777; padding-top: 2px; } .breadcrumbs li a.home{ background: url('../images/icon-home.png') no-repeat center 2px; display: block; width: 13px; height: 13px; text-indent: -9999px; } #content-wrapper{ width: 960px; margin: 0 auto; } /* ============================================================================ HOME PAGE LATEST BLOG POSTS WIDGET ============================================================================= */ .latest-blog-posts{ width: 100%; float: left; } .latest-blog-posts .post-info{ float: left; width: 140px; margin-right: 20px; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .latest-blog-posts .post-info img{ border: 2px solid #ddd; } .latest-blog-posts .post-info .comments{ width: auto; display: inline; background: #333; position: absolute; bottom: 2px; left: 2px; padding: 2px 5px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .latest-blog-posts .title-date a{ float: left; width: 100%; } .latest-blog-posts .title-date a h6{ -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .latest-blog-posts .post-info .comments a, .latest-blog-posts .post-info .comments a:hover{ color: #fff !important; font-size: 11px; } .latest-blog-posts .post-body{ float: left; width: 300px; } .latest-blog-posts .post-body .post-meta{ width: 100%; margin-bottom: 10px; float: left; } .latest-blog-posts .post-body .post-meta .category{ width: 40px; height: 40px; float: left; background: #333; cursor: pointer; margin-right: 15px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .latest-blog-posts .post-body .post-meta .category i{ color: #fff; font-size: 20px; width: 40px; height: 40px; display: table-cell; vertical-align: middle; text-align: center; } .latest-blog-posts .post-body .post-meta .title-date{ float: left; width: 245px; } .latest-blog-posts .post-body .post-meta .title-date h1, .latest-blog-posts .post-body .post-meta .title-date h2, .latest-blog-posts .post-body .post-meta .title-date h3, .latest-blog-posts .post-body .post-meta .title-date h4, .latest-blog-posts .post-body .post-meta .title-date h5, .latest-blog-posts .post-body .post-meta .title-date h6{ margin-bottom: 3px; width: 100%; }.latest-blog-posts .post-body .post-meta .title-date span.date{ text-transform: uppercase; width: 100%; display: block; } /* ============================================================================ 5. ABOUT US ============================================================================ */ /* Team members ----------------------------------------------------------------------------- */ .team-info{ width: 100%; margin-bottom: 15px; position: relative; float: left; } .team-info img{ width: 100%; } .team-info .title-position{ position: absolute; bottom: 10%; left: 15px; width: 85%; } .team-info .title-position .title{ background: #fff; color: #333; padding: 5px; text-align: left; display: inline-block; float: left; max-width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .team-info .title-position h6{ margin-bottom: 0; width: auto; word-wrap: break-word; text-transform: none; } .team-info .title-position .position{ text-align: left; display: inline-block; padding: 5px; float: left; max-width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .team-info .title-position .position span{ color: #fff; width: auto; word-wrap: break-word; } .team-cv{ width: 100%; float: left; margin-bottom: 10px; } .team-social-links{ width: 100%; float: left; padding: 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .team-social-links li{ float: left; margin-right: 20px; } .team-social-links li a{ color: #aaa; font-size: 16px; } .team-social-links li:last-child{ margin-right: 0; } /* Skills ----------------------------------------------------------------------------- */ .skills-bar{ width: 100%; position: relative; float: left; } .skills{ padding-top: 20px; display: block; } .skills li em{ position: relative; top: -23px; font: 11px Arial, sans-serif; font-style: normal; } .skills li{ display: block; height: 15px; margin-bottom: 35px; background: rgb(246,246,246); /* Old browsers */ background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(238,238,238,1) 100%); /* W3C */ border: 1px solid #ddd; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; box-sizing: border-box; -moz-box-sizing: border-box; } .expand{ height: 13px; position: absolute; margin-top: -1px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; -o-border-radius-topleft: 5px; -o-border-radius-bottomleft: 5px; } .web-design { width:80%; -moz-animation:web-design 2s ease-out; -webkit-animation:web-design 2s ease-out;} .web-development { width:70%; -moz-animation:web-development 2s ease-out; -webkit-animation:web-development 2s ease-out;} .wordpress { width:90%; -moz-animation:wordpress 2s ease-out; -webkit-animation:wordpress 2s ease-out;} .marketing { width:60%; -moz-animation:marketing 2s ease-out; -webkit-animation:marketing 2s ease-out;} @-webkit-keyframes web-design { 0% { width:0px;} 100%{ width:80%;} } @-webkit-keyframes web-development { 0% { width:0px;} 100%{ width:70%;} } @-webkit-keyframes wordpress { 0% { width:0px;} 100%{ width:90%;} } @-webkit-keyframes marketing { 0% { width:0px;} 100%{ width:60%;} } /* Client Carousel ----------------------------------------------------------------------------- */ .client-carousel .caroufredsel_wrapper{ width: 940px !important; min-height: 107px !important; } .title-container.carousel:before, .title-container.carousel:after{ background: none !important; } .carousel-nav-container{ position: absolute; top: 50%; margin-top: -11px; width: 100%; }.carousel-nav{ position: relative; width: 100%; } .carousel-nav li{ float: left; width: 22px; height: 22px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; z-index: 600; } .carousel-nav li a.next{ background-image: url('../images/cr.png'); width: 22px; height: 22px; display: block; position: absolute; right: -22px; } .carousel-nav li a.prev{ background-image: url('../images/cl.png'); width: 22px; height: 22px; display: block; position: absolute; left: -22px; } #client-carousel li{ float: left; width: 186px !important; border: 1px solid #eee; display: block; min-height: 105px !important; } #client-carousel li img{ margin: 0 auto; display: table-cell; vertical-align: middle; opacity: 0.7; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #client-carousel li img:hover{ opacity: 1.0; } /* ============================================================================= 6. SERVICES ============================================================================= */ /* SERVICE BOX STYLE 1 - ICON ON LEFT, TITLE AND TEXT ON RIGHT ----------------------------------------------------------------------------- */ .service-box-1 .icon{ float: left; width: 52px; height: 44px; margin-right: 20px; } .service-box-1 .icon i{ font-size: 20px; line-height: 10px; width: 44px; height: 44px; margin: 0 auto; color: #fff; display: table-cell; vertical-align: middle; text-align: center; } .service-box-1 .content .title{ margin-bottom: 10px; float: left; width: 100%; } .service-box-1 .content .description{ float: left; width: 100%; margin-bottom: 14px; } .service-box-1 .content .title h1, .service-box-1 .content .title h2, .service-box-1 .content .title h3, .service-box-1 .content .title h4, .service-box-1 .content .title h5, .service-box-1 .content .title h6{ margin-bottom: 2px; width: 100%; float: left; } .service-box-1 .content .title span{ width: 100%; float: left; } /* SERVICES BOX-1 FOR ALL COLUMNS */ .grid_3 .service-box-1 .content{float: left;width: 148px;} .grid_4 .service-box-1 .content{float: left;width: 228px;} .grid_5 .service-box-1 .content{float: left;width: 308px;} .grid_6 .service-box-1 .content{float: left;width: 388px;} .grid_7 .service-box-1 .content{float: left;width: 468px;} .grid_8 .service-box-1 .content{float: left;width: 548px;} .grid_9 .service-box-1 .content{float: left;width: 628px;} .grid_12 .service-box-1 .content{float: left;width: 868px;} .service-box-2-container{ width: 100%; float: left; }.service-box-2-container .icon{ float: left; width: 60px; height: 71px; position: relative; top: 0; left: 50%; margin-left: -30px; background: url('../images/service-bkg.png') no-repeat; z-index: 20; } .service-box-2-container .icon i{ font-size: 24px; line-height: 10px; width: 60px; height: 60px; margin: 0 auto; color: #fff; display: table-cell; vertical-align: middle; text-align: center; } .service-box-2-container .service-box-2{ background: #fff; border: 1px solid #ddd; position: relative; top: -35px; z-index: 10; padding: 20px 20px 20px; text-align: justify; float: left; } .service-box-2-container .service-box-2 .title{ float: left; margin-bottom: 0; width: 100%; } .service-box-2-container .service-box-2 .title a{ width: 100%; float: left; } .service-box-2-container .service-box-2 h1, .service-box-2-container .service-box-2 h2, .service-box-2-container .service-box-2 h3, .service-box-2-container .service-box-2 h4, .service-box-2-container .service-box-2 h5, .service-box-2-container .service-box-2 h6{ border-bottom: 1px dashed; color: #005b89; padding-bottom: 5px; } .service-box-2-container .service-box-2 .read-more-btn{ float: right; margin: 12px 0 0; display: table; background: #1079ae; } .service-box-2-container .service-box-2 .read-more-btn span{ background: #005b89; } .service-box-2-container .service-box-2:hover{ border: 1px solid #DDDDDD; } /* ============================================================================= 7. FAQ PAGE ============================================================================= */ .accordion.faq .title a{ background: url('../images/faq-closed.png') no-repeat 0 center; font-size: 15px; color: #333; font-weight: 600; } /* ============================================================================= 9. PRICING TABLES ============================================================================ */ .pricing-table-col{ width: 100%; border: 5px solid #eee; float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .pricing-table-col .head{ width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0; } .pricing-table-col .head h2{ padding: 20px 0; text-align: center; margin-bottom: 0; font-size: 19px; } .pricing-table-col .head .price{ background: #f6f6f6; width: 100%; padding: 10px 0; text-align: center; border-top: 1px solid #eee; border-bottom: 1px solid #eee; display: block; font: 12px Arial, sans-serif; color: #333; } .head .price .text-color{ font: 30px Arial, sans-serif; } .pricing-table-col.selected .head .price .text-color{ color: #fff !important; } .pricing-table-col li{ color: #777; padding: 8px; border-bottom: 1px solid #f2f2f2; border-top: 1px solid #fff; text-align: center; width: 100%; float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .pricing-table-col li:first-child{ border: none; float: none; } li.pricing-footer{ height: auto !important; background: #f6f6f6; width: 100%; float: left; box-sizing: border-box; -moz-box-sizing: border-box; border-top: none; } .pricing-footer .btn-small, .pricing-footer .btn-small.black, .pricing-footer .btn-medium, .pricing-footer .btn-medium.black, .pricing-footer .btn-big, .pricing-footer .btn-big.black{ margin: 5px auto; display: table; float: none; } /* PRICING TABELS SECOND STYLE */ .pricing-table-col.labels{ margin-top: 72px; } .pricing-table-col.labels .head{ width: 100%; background: #f6f6f6; padding: 15px 20px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-bottom: 1px solid #eee; text-align: left; } .pricing-table-col.labels .head i{ font-size: 15px; } .pricing-table-col.labels .head h5{ margin-bottom: 0; display: inline; padding-left: 10px; } .pricing-table-col.labels li{ text-align: left; padding-left: 20px; } .pricing-table-col span.label{ display: none; } .pricing-check{ background: url('../images/check.png') no-repeat center center; min-height: 38px; } /* ============================================================================= 8. PORTFOLIO ============================================================================ */ .portfolio{ overflow: hidden; position:relative; } .quicksand-filter-container{ width: 100%; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } .quicksand-filter-container span{ float: left; margin-right: 20px; padding-top: 4px; } .quicksand-filter-container #quicksand-filter{ float: left; } .quicksand-filter-container #quicksand-filter li{ float: left; padding: 4px 10px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .quicksand-filter-container #quicksand-filter li a{ -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; } .quicksand-filter-container #quicksand-filter li.active a, .quicksand-filter-container #quicksand-filter li.active a:hover, .quicksand-filter-container #quicksand-filter li:hover a{ color: #fff !important; } /* PORTTFOLIO HOVER EFFECT ----------------------------------------------------------------------------- */ .portfolio-hover{ width: 100%; height: 100%; position: absolute; top:0; left: 0; opacity: 0; } .portfolio-hover .mask{ width: 100%; height: 100%; background: #444; opacity: 0.6; position: absolute; top:0; left: 0; } .portfolio-hover ul{ display: block; } .portfolio-hover li{ float: left; background: #222; width: 36px; height: 36px; opacity: 1; top: 50%; margin-top: -18px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .portfolio-hover .portfolio-zoom{ margin-right: 4px; position: absolute; left: -42px; } .portfolio-hover .portfolio-zoom a{ text-indent: -9999px; background: url('../images/zoom.png') no-repeat center center; display: block; width: 36px; height: 36px; } .portfolio-hover .portfolio-single a{ text-indent: -9999px; background: url('../images/link.png') no-repeat center center; display: block; width: 36px; height: 36px; } .portfolio:hover .portfolio-hover{ opacity: 1; } .portfolio-hover .portfolio-single{ position: absolute; right: -42px; } .portfolio:hover .portfolio-single{ right: 50%; margin-right: -45px; } .portfolio:hover .portfolio-zoom{ left: 50%; margin-left: -20px; } /* PORTFOLIO STYLE 1 FOR ALL COLUMNS ----------------------------------------------------------------------------- */ .grid_12.portfolio-style-1 .portfolio{ width: 540px; margin-right: 20px; float: left; position: relative; } .grid_6.portfolio-style-1 .portfolio{ width: 460px; margin-right: 0; margin-bottom: 15px; position: relative; float: left; } .grid_4.portfolio-style-1 .portfolio{ width: 300px; margin-right: 0; margin-bottom: 15px; position: relative; float: left; } .grid_3.portfolio-style-1 .portfolio{ width: 220px; margin-right: 0; margin-bottom: 15px; position: relative; float: left; } .grid_12.portfolio-style-1 .portfolio-info{ float: left; width: 380px; } .grid_6.portfolio-style-1 .portfolio-info, .grid_4.portfolio-style-1 .portfolio-info, .grid_3.portfolio-style-1 .portfolio-info{ width: 100%; float: left; } .portfolio-info h3, .portfolio-description h3{ margin-bottom: 10px; } .portfolio-info .meta, .portfolio-description .meta{ float: left; width: 100%; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 5px 0; margin-bottom: 15px; } .portfolio-info .meta li, .portfolio-description .meta li{ float: left; margin-right: 10px; font-size: 11px; } .portfolio-info .meta li span, .portfolio-description .meta li span{ padding-right: 8px; } /* PORTFOLIO STYLE 2 FOR ALL COLUMNS ----------------------------------------------------------------------------- */ .grid_6.portfolio-style-2, .grid_4.portfolio-style-2, .grid_3.portfolio-style-2{ margin-bottom: 20px; } .grid_6.portfolio-style-2:last-child, .grid_4.portfolio-style-2:last-child, .grid_3.portfolio-style-2:last-child{ margin-bottom: 60px; } .portfolio-style-2 .portfolio{ cursor: pointer; } .portfolio-style-2 .portfolio .portfolio-image{ width: 100%; margin-right: 0; margin-bottom: 0; position: relative; float: left; text-align:center; min-height:66px; } .portfolio figcaption{ float: left; width: 100%; background: #f6f6f6; border-top: 3px solid #ddd; padding: 5px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .portfolio figcaption a{ font-size: 13px; font-weight: 600; color: #333; text-align: center; width: 100%; display: block; } .portfolio figcaption span{ width: 100%; text-align: center; display: block; font-style: italic; } /* PORTFOLIO STYLE GALLERY FOR THREE COLUMNS ----------------------------------------------------------------------------- */ .gallery{ padding: 0 8px; } .gallery .grid_4.portfolio-style-gallery{ margin-right: 1px; margin-left: 1px; margin-bottom: 2px; width: 312px; } .gallery .grid_4.portfolio-style-gallery:last-child{ margin-bottom: 60px; } .gallery .grid_4.portfolio-style-gallery .portfolio{ width: 100%; position: relative; } /* PORTFOLIO PAGINATION ----------------------------------------------------------------------------- */ .portfolio-pagination .pager{ width: 560px; } /* PORTFOLIO SINGLE PROJECT ----------------------------------------------------------------------------- */ .grid_7 .nivoSlider.image-slider.portfolio-slider, .grid_7 .nivoSlider.image-slider.portfolio-slider img{ width: 100%; float: left; } .grid_7 .nivoSlider.image-slider{ margin-bottom: 17px; } .carousel-portfolio .caroufredsel_wrapper{ width: 940px !important; min-height: 102px !important; } .carousel-portfolio .carousel-li > li{ border: 1px solid #f1f1f1; float: left; margin-right: 14px; min-height: 108px !important; width: 160px !important; padding: 5px 7px; } .carousel-portfolio .carousel-pagination{ margin: 30px auto 0; float: none; display:none !important; } .carousel-portfolio .carousel-pagination a { background: url('../images/sb.png') no-repeat; width: 13px; height: 13px; margin: 0 5px 0 0; display: inline-block; } .carousel-portfolio .carousel-pagination a.selected { cursor: default; } .carousel-portfolio .carousel-li > li img { width:100%; -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .carousel-portfolio .carousel-li > li img:hover { -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%); } /* ============================================================================ 9. BLOG ============================================================================= */ .blog-posts li.blog-post{ float: left; border-bottom: 1px solid #eee; padding-bottom: 50px; margin-bottom: 50px; } .blog-posts .blog-post:nth-last-of-type(-n+2){ padding-bottom: 0; border-bottom: none; } .blog-info{ float: left; width: 100%; margin-bottom: 15px; } .blog-meta{ float: left; width: 110px; margin-right: 20px; } .blog-meta .category{ width: 40px; height: 40px; float: right; background: #333; cursor: pointer; margin-bottom: 15px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .blog-meta .category i{ color: #fff; font-size: 20px; width: 40px; height: 40px; display: table-cell; vertical-align: middle; text-align: center; } .blog-meta > ul{ float: right; width: 100%; } .blog-meta li{ text-align: right; width: 100%; font-size: 11px; } .post-body, .post-body-container{ float: left; width: 490px; } .post-body-container .post-body{ margin-bottom: 30px; } .post-body .post-img{ margin-bottom: 15px; float: left; opacity: 1.0; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .post-body .post-img:hover, .blog-info .post-img:hover{ opacity: 0.8; } .post-body h3, .blog-info h3{ margin-bottom: 10px; } .post-body .tags, .blog-info .tags{ border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 3px 0; float: left; width: 100%; margin-bottom: 15px; } .post-body .tags li, .blog-info .tags li{ float: left; padding-left: 3px; } /* Blog Post Format Link ----------------------------------------------------------------------------- */ .blog-post a.link{ width: 100%; background: #f6f6f6; padding: 5px 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; display: block; float: left; margin-bottom: 10px; } /* Blog Post Format Gallery ----------------------------------------------------------------------------- */ .post-body .nivoSlider.blog-slider{ margin-bottom: 15px; } .post-body .nivoSlider.blog-slider, .post-body .nivoSlider.blog-slider img{ width: 490px; height: 243px; } /* Blog Post Format Video ----------------------------------------------------------------------------- */ .post-body iframe{ width: 490px; height: 243px; margin-bottom: 15px; background: #eee url('../images/loading.gif') no-repeat 50% 50%; } .blog-info iframe{ width: 100%; height: 308px; background: #eee url('../images/loading.gif') no-repeat 50% 50%; } /*Audio Blog post ----------------------------------------------------------------------------- */ .jp-jplayer{ background: none !important; border: none !important; float: left !important; } .jp-audio{ float: left !important; margin-bottom: 20px !important; } /* Pagination ----------------------------------------------------------------------------- */ .pagination{ float: left; width: 100%; padding: 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .pagination .pagination-prev{ float: left; max-width: 70px; } .pagination .pagination-next{ float: right; max-width: 70px; } .pager{ float: left; width: 440px; padding: 0 20px; } .pager ul{ display: table; margin: 0 auto; float: none; } .pager li{ float: left; width: 20px; height: 20px; margin-right: 5px; background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* W3C */ border: 1px solid #ddd; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .pager li a{ width: 20px; height: 20px; display: table-cell; vertical-align: middle; color: #333; text-align: center; font-size: 11px; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; } .pager li.active a, .pager li:hover a{ color: #fff !important; } /* Blog Single ----------------------------------------------------------------------------- */ .share-post{ float: left; background: #f6f6f6; margin-bottom: 40px; padding: 20px; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } .share-post span{ float: left; display: block; margin-right: 20px; color: #333; position: relative; top: 2px; } .share-post #shareme{ float: left; } .sharrre .box{ background:#6f838c; background:-webkit-gradient(linear,left top,left bottom,color-stop(#6f838c,0),color-stop(#4d5e66,1)); background:-webkit-linear-gradient(top, #6f838c 0%, #4d5e66 100%); background:-moz-linear-gradient(top, #6f838c 0%, #4d5e66 100%); background:-o-linear-gradient(top, #6f838c 0%, #4d5e66 100%); -webkit-box-shadow:0 1px 1px #d3d3d3; -moz-box-shadow:0 1px 1px #d3d3d3; box-shadow:0 1px 1px #d3d3d3; height:22px; display:inline-block; position:relative; padding:0px 55px 0 8px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; font-size:12px; float:left; clear:both; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; cursor: pointer; } .sharrre .left{ line-height:22px; display:block; white-space:nowrap; text-shadow:0px 1px 1px rgba(255,255,255,0.3); color:#ffffff; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .sharrre .middle{ position:absolute; height:22px; top:0px; right:30px; width:0px; background:#63707e; text-shadow:0px -1px 1px #363f49; color:#fff; white-space:nowrap; text-align:left; overflow:hidden; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear; } .sharrre .middle a{ color:#fff; font-weight:bold; padding:0 9px 0 9px; text-align:center; float:left; line-height:22px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; } .sharrre .right{ position:absolute; right:0px; top:0px; height:100%; width:45px; text-align:center; line-height:22px; color:#4b5d61; background:#f1faf9; background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1faf9,0),color-stop(#bacfd2,1)); background:-webkit-linear-gradient(top, #f1faf9 0%, #bacfd2 100%); background:-moz-linear-gradient(top, #f1faf9 0%, #bacfd2 100%); background:-o-linear-gradient(top, #f1faf9 0%, #bacfd2 100%); }.sharrre .box:hover{ padding-right:130px; } .sharrre .middle a:hover{ text-decoration:none; color: #bacfd2 !important; } .sharrre .box:hover .middle{ width:90px; } .post-author{ float: left; margin-bottom: 70px; width: 100%; } .post-author img{ border: 1px solid #ddd; width: 84px; height: 84px; float: left; margin-right: 20px; } .post-author .info{ float: left; width: 384px; } .post-author .info h6{ margin-bottom: 10px; } /* COMMENTS ----------------------------------------------------------------------------- */ .post-comments{ width: 100%; float: left; } .comments-li{ float: left; margin-bottom: 20px; } .comments-li > li{ float: left; width: 100%; margin-bottom: 20px; } .comment{ float: left; min-height: 60px; } .post-comments .comment + .children{ margin-top: 20px; } .post-comments .children + .children{ margin-top: 20px; } /* COMMENT AVATAR ----------------------------------------------------------------------------- */ .comment .avatar{ width: 60px; height: 60px; margin-right: 15px; float: left; } /* COMMENT META ----------------------------------------------------------------------------- */ .comment .comment-meta{ color: #777; font: italic 11px Arial, sans-serif; margin: 0 0 10px 80px; } .post-comments .comments-li .comment .comment-meta li{ padding-top: 2px; display: block; } .comment .comment-meta a{ border-bottom: none; font: 11px Arial, sans-serif; display: inline; margin-bottom: 3px; color: #777; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .comment .comment-meta a.author{ font: bold 13px Arial, sans-serif; color: #444; margin-right: 10px; display: block; float: left; } .comment .comment-body{ margin-left: 80px; } /* BLOG POSTS CHILD COMMENT ----------------------------------------------------------------------------- */ .post-comments .children{ margin-left: 30px; float: left; padding: 0 0 0 50px; } .comment-reply-link{ float: left; color: #fff; padding: 4px 10px; cursor: pointer; margin-top: 10px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } .comment-reply-link:hover{ color: #fff !important; } .comment-form, #respond{ float: left; width: 100%; } h5#reply-title{ text-transform: none !important; } #respond form{ margin-top: 20px; } #respond fieldset{ margin-bottom: 10px; } #respond label{ width: 100%; font: 11px Arial, sans-serif; color: #444; display: block; margin-bottom: 7px; } #respond .name-container{ margin-right: 20px; float: left; } #respond .email-container{ float: left; } #respond .name-container input, #respond .email-container input{ background: #fff; border: 1px solid #ddd; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; height: 30px; width: 308px; font: 12px 'Open Sans', Arial, sans-serif; padding-left: 10px; padding-right: 10px; float: left; color: #a9a9a9; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #respond .message{ float: left; margin-top: 5px; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #respond .message textarea{ background: #fff; border: 1px solid #ddd; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font: 11px Arial, sans-serif; line-height: 22px; padding: 10px; color: #a9a9a9; } #respond #comment-reply{ color: #fff; font: 12px 'Open Sans', Arial,sans-serif; cursor: pointer; padding: 8px 15px; border: none; float: right; margin-top: 10px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; text-transform: uppercase; } #respond .name-container input:focus, #respond .email-container input:focus, #respond .message textarea:focus{ border-color: #aaa; } /* ============================================================================ 10. CONTACT ============================================================================ */ .info-container{ padding: 20px; width: 100%; background: #f6f6f6; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } .map_canvas{ width: 100%; height: 470px; } .wpcf7 fieldset{ display: block; float: left; margin-bottom: 10px; width: 50%; } .wpcf7 label{ color: #444; font: 11px Arial,sans-serif; line-height: 18px; margin-bottom: 5px; display: block; width: 100%; float: left; } .wpcf7-text{ width: 240px; background: #fff; border: 1px solid #ddd; padding: 8px 10px; border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px; float: left; } .wpcf7-textarea{ width: 88%; box-sizing: border-box; -moz-box-sizing: border-box; background: #fff; border: 1px solid #ddd; padding: 10px; border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px; height: 120px; float: left; } .wpcf7-submit{ border: 0px solid; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; font: 12px 'Open Sans', Arial, sans-serif; text-transform: uppercase; line-height: 11px; color: #fff; padding: 10px 17px; cursor: pointer; float: left; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } .wpcf7-submit:hover{ background: rgb(68,68,68); /* Old browsers */ background: -moz-linear-gradient(top, rgba(68,68,68,1) 0%, rgba(85,85,85,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,68,68,1)), color-stop(100%,rgba(85,85,85,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(85,85,85,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(85,85,85,1) 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, rgba(68,68,68,1) 0%,rgba(85,85,85,1) 100%); /* W3C */ } .contact-info li{ width: 100%; float: left; margin-bottom: 5px; } .contact-info li.address span{ padding-left: 20px; float: left; } /* ============================================================================ 11. WIDGETS ============================================================================ */ .aside-left{ width: 280px !important; padding-right: 20px; margin-bottom: 0; } .aside-right{ width: 280px !important; padding-left: 20px; margin-bottom: 0; } .widget{ display: block; margin-bottom: 50px; float: left; width: 100%; } .widget li{ background: url('../images/aside-arrow.png') no-repeat 0 7px; border-bottom: 1px dotted #ddd; padding-left: 28px; padding-bottom: 5px; padding-top: 5px; } .footer-widget-container .widget li{ border-bottom: 1px dotted #555; } .widget li:last-child{ border-bottom: none; } .widget .title{ margin-bottom: 20px; text-transform: uppercase; } .footer-widget-container .widget .title h1, .footer-widget-container .widget .title h2, .footer-widget-container .widget .title h3, .footer-widget-container .widget .title h4, .footer-widget-container .widget .title h5, .footer-widget-container .widget .title h6{ color: #ddd } /* WIDGET TAG CLOUD ----------------------------------------------------------------------------- */ .widget_tag_cloud a{ background: #f6f6f6; color: #777; display: inline-block; padding: 5px 10px; margin-bottom: 5px; margin-right: 2px; } .widget_tag_cloud a:hover{ color: #fff !important; } .footer-widget-container .widget_tag_cloud a{ background: #303030; } .footer-widget-container .widget_tag_cloud a:hover{ color: #fff !important; } /* WIDGET SEARCH ----------------------------------------------------------------------------- */ .widget_search form{ position: relative; } .widget_search #a_search{ background: #fff; border: 1px solid #ddd !important; width: 100%; display: block; height: 25px; font-size: 11px; font-family: 'Open Sans', Arial, sans-serif; color: #777; font-style: italic; left:0; top: 0; padding: 0 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } .widget_search .search-submit{ background: url('../images/aside-search.png') center center no-repeat; width: 20px; height: 22px; border: none; text-indent: -9999px; position: absolute; float: left; cursor: pointer; right: 6px; top: 1px; } /* WIDGET TEXT ----------------------------------------------------------------------------- */ .widget_text li{ border-bottom: 0; background: none; padding: 0; } .footer-widget-container .widget_text li{ border: none; }/* WIDGET PI_RECENT_POSTS ----------------------------------------------------------------------------- */ .pi_recent_posts li{ float: left; width: 100%; margin-bottom: 7px; padding: 0; border: none; padding-left:10px; } .pi_recent_posts .meta{ width: 40px; height: 40px; margin-right: 10px; float: left; background: #333; cursor: pointer; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .pi_recent_posts .meta a{ color: #fff !important; font-size: 20px !important; position: relative; display: table-cell; width: 40px; height: 40px; margin: 0 auto; text-align: center; vertical-align: middle; } .pi_recent_posts .post .info, .pi_recent_posts .post .info a{ font-size: 10px !important; } .pi_recent_posts .post a{ color: #333; } .pi_recent_posts .meta a:hover{ color: #fff !important; } .footer-widget-container .pi_recent_posts li{ border: none; } .footer-widget-container .pi_recent_posts .meta{ background: #303030; } /* NEWSLETTER WIDGET ----------------------------------------------------------------------------- */ .aside_widgets .newsletter .email{ background: #fff; border: 1px solid #ddd; } .aside_widgets .newsletter .submit{ background: #fff; border: 1px solid #ddd; color: #777; } .aside_widgets .newsletter .submit:hover{ color: #fff; } .newsletter .email{ background: #fff; border: 1px solid #ddd; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; width: 148px; height: 28px; padding: 0 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; font-size: 11px; } .newsletter .submit{ height: 28px; background: #fff; color: #777; font-size: 11px; position: relative; top: 0; padding: 0 15px; cursor: pointer; border: 1px solid #ddd; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .newsletter .submit:hover{ background: #f6f6f6; border: 1px solid #ddd; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } .footer-widget-container .newsletter .email{ background: #303030; border: 1px solid #222; color: #ccc; } .footer-widget-container .newsletter .submit{ background: #222; border: 1px solid #000; } .footer-widget-container .newsletter .submit:hover{ color: #fff; } /* CONTACT INFO WIDGET ----------------------------------------------------------------------------- */ .widget .contact-info li{ float: left; display: block; width: 100%; min-height: 24px; margin-bottom:10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } .widget .contact-info li p{ padding-top: 3px; } .widget .contact-info li.address{ display: block; padding-left: 36px; } .widget .contact-info li.address p{ padding-top: 0 !important; } .widget .contact-info li.phone{ display: block; padding-left: 36px; width:85% !important; } .widget .contact-info li.mail{ display: block; padding-left: 36px; } /* TESTIMONIAL WIDGET ----------------------------------------------------------------------------- */ .carousel-testimonial li{ border: none; background: none; padding: 0; float: left; margin-right: 10px; } .carousel-testimonial .caroufredsel_wrapper{ width: 100%; } .carousel-testimonial{ float: left; width: 100%; } .grid_3 .carousel-testimonial .caroufredsel_wrapper{width: 220px !important;} .grid_3 .carousel-testimonial .carousel-li > li{width: 220px !important;} .grid_4 .carousel-testimonial .caroufredsel_wrapper{width: 300px !important} .grid_4 .carousel-testimonial .carousel-li > li{width: 300px !important;} .grid_4.aside-right .carousel-testimonial .caroufredsel_wrapper, .grid_4.aside-left .carousel-testimonial .caroufredsel_wrapper{width: 280px !important;} .grid_4.aside-right .carousel-testimonial .carousel-li > li, .grid_4.aside-left .carousel-testimonial .carousel-li > li{width: 280px !important;} .grid_5 .carousel-testimonial .caroufredsel_wrapper{width: 380px !important;} .grid_5 .carousel-testimonial .carousel-li > li{width: 380px !important;} .grid_6 .carousel-testimonial .caroufredsel_wrapper{width: 460px !important;} .grid_6 .carousel-testimonial .carousel-li > li{width: 460px !important;} .grid_7 .carousel-testimonial .caroufredsel_wrapper{width: 540px !important;} .grid_7 .carousel-testimonial .carousel-li > li{ width: 540px !important;} .grid_8 .carousel-testimonial .caroufredsel_wrapper{width: 620px !important;} .grid_8 .carousel-testimonial .carousel-li > li{width: 620px !important;} .grid_9 .carousel-testimonial .caroufredsel_wrapper{width: 700px !important;} .grid_9 .carousel-testimonial .carousel-li > li{width: 700px !important;} .grid_12 .carousel-testimonial .caroufredsel_wrapper{width: 940px !important;} .grid_12 .carousel-testimonial .carousel-li > li{width: 940px !important;} .footer-widget-container .carousel-testimonial .content{ background: #303030 ; } .carousel-testimonial .content{ background: #f6f6f6; padding: 15px; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; position: relative; font-size: 12px; font-style: italic; } .carousel-testimonial .content:after{ position: absolute; display: block; content: ''; background: url('../images/testimonial-arrow.png') no-repeat; width: 14px; height: 11px; bottom: -10px; left: 10px; } .footer-widget-container .carousel-testimonial .content:after{ background: url('../images/testimonial-arrow-footer.png') no-repeat; } .carousel-testimonial span.author{ display: block; margin-left: 24px; padding-left: 24px; padding-top: 5px; margin-top: 5px; background: url('../images/testimonial.png') no-repeat 0 center; } /* TESTIMONIAL ALTERNATIVE ----------------------------------------------------------------------------- */ .testimonials-alternative-nav{ margin-bottom: 18px; float: left; } .testimonials-alternative-nav li{ margin-right: 18px; float: left; position: relative; } .testimonials-alternative-nav li:last-child{ margin: 0; } .testimonials-alternative-nav li img{ border: 3px solid #ddd; width: 55px; } .testimonials-alternative-nav li a:after{ position: absolute; content: "."; text-indent: -9999px; left: 50%; bottom: -18px; margin-left: -4px; display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; display: none; } .testimonials-alternative-nav li a.active:after{ display: block; } .testimonials-alternative-content{ float: left; } .testimonials-alternative-content .content{ background: #fafafa; padding: 22px 11px; display: none; } .testimonials-alternative-content .content.active{ display: block; } .testimonials-alternative-content .content .text, .testimonials-alternative-content .content .author{ font-style: italic; text-align: center; } .testimonials-alternative-content .content .author{ color: #999; font-size: 11px; padding-top: 5px; } /* SLIDING TEXT ARTICLE WIDGET ----------------------------------------------------------------------------- */ .widget .carousel-article li{ border: none; background: none; }.carousel-article .caroufredsel_wrapper{ width: 100% !important } .carousel-article{ float: left; width: 100%; } .grid_3 .carousel-article .carousel-li > li{ width: 220px !important; margin-right: 0; } .grid_4 .carousel-article .carousel-li > li{ width: 300px !important; margin-right: 0; } .grid_4.aside-left .carousel-article .carousel-li > li, .grid_4.aside-right .carousel-article .carousel-li > li{ width: 280px !important; } .grid_5 .carousel-article .carousel-li > li{ width: 380px !important; margin-right: 0; } .grid_6 .carousel-article .carousel-li > li{ width: 460px !important; margin-right: 0; } .grid_7 .carousel-article .carousel-li > li{ width: 540px !important; margin-right: 0; } .grid_8 .carousel-article .carousel-li > li{ width: 620px !important; margin-right: 0; } .grid_9 .carousel-article .carousel-li > li{ width: 700px !important; margin-right: 0; } .grid_12 .carousel-article .carousel-li > li{ width: 940px !important; margin-right: 0; } .carousel-pagination { text-align: center; float: left; margin-top: 10px; } .footer-widget-container .carousel-pagination a{ background: url('../images/db-footer.png') no-repeat; } .carousel-pagination a { background: url('../images/db.png') no-repeat; width: 10px; height: 10px; margin: 0 5px 0 0; display: inline-block; } .carousel-pagination a.selected { cursor: default; } .carousel-pagination a span { display: none; } /* WIDGET RECENT COMMENTS -----------------------------------------------------------------------------*/ .widget_recent_comments li{ background: url('../images/comment.png') no-repeat 0 10px; padding-left: 26px; color: #444; } .widget_recent_comments li:hover{ background: url('../images/comment.png') no-repeat 0 10px; } .widget_recent_comments li a{ text-decoration: underline; font-style: italic; color: #888; } .footer-widget-container .widget_recent_comments li{ color: #ccc; } /* ============================================================================ 12. FOOTER ============================================================================ */ #footer-wrapper{ width: 100%; margin: 0 auto; background-color: #2181b2; background-image: url('../images/shadow.png'); background-position: center 0; background-repeat: no-repeat; margin-top: 10px; border-top: 10px solid #e6e6e6; } #footer{ padding-top: 60px; } #footer p, #footer a{ font-size: 11px; line-height: 18px; color: #fff; } #footer a:hover{ font-size: 11px; line-height: 18px; color: #fff !important; } .copyright-container{ background: #005b89; padding: 15px 0px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } .copyright-container p{ color: #fff; font-size: 11px; text-align:center; } .copyright-container .grid_6, .copyright-container .grid_12{ margin-bottom: 0; } .footer-breadcrumbs{ float: right; } .footer-breadcrumbs li{ float: left; margin-right: 10px; padding-right: 10px; display: block; border-right: 1px solid #aaa; line-height: 10px; } .footer-breadcrumbs li a, .footer-breadcrumbs li a.active{ color: #aaa; text-transform: uppercase; font-size: 11px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .footer-breadcrumbs li:last-child{ border-right: 0; margin-right: 0; padding-right: 0; } /* FOOTER WIDGETS -----------------------------------------------------------------------------*/ .footer-widget-container .widget:last-child{ margin-bottom: 0; } .frm_top input { border: 1px solid #ccc; margin: 5px 0 4px; padding: 7px 5px; width: 250px; font-size:13px; font-family:Arial, Helvetica, sans-serif; }.frm_top textarea { border: 1px solid #ccc; margin: 5px 0 4px 0px; min-height: 100px; padding: 7px 5px; width: 250px; font-size:13px; font-family:Arial, Helvetica, sans-serif; } .logo-flash1 { left: 25px; margin: 0; padding: 0; position: absolute; top: 18px; } .frm_top{ background: url("../images/top_frm_bg.png") repeat scroll 0 0 transparent; border-left: 1px solid #fff; border-right: 1px solid #fff; min-height: 373px; padding: 20px 15px; right: 0; top: 49px; width: 262px; position:absolute; display:none; } .frm_top h2{ margin-bottom:10px; color:#FFFFFF; } .policy2 { color: #FFFFFF; float: right; font-family: "Trebuchet MS",sans-serif; font-size: 12px; line-height: 24px; text-align: right; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);} .policy2 a { color: #FFFFFF; } .policy2 a:hover { color: #FFFFFF !important; text-decoration: underline; } .lft_nav{ width:230px; float:left; padding-right: 10px; background:url(../images/inner_lft_bg.png) no-repeat right bottom; padding-bottom:50px; } .lft_nav > p { font-family:Arial, Helvetica, sans-serif; } .rgt_contant{ width:700px; float:right; text-align: justify; } .fblue{ color:#005B89; font: 16px 'Open Sans', Arial, sans-serif; font-weight: 600; margin-bottom: 15px; border-bottom:1px dotted; padding-bottom:5px; } .fblue2{ color:#005B89; font: 16px 'Open Sans', Arial, sans-serif; font-weight: 600; margin-bottom: 15px; border-bottom:1px dotted; padding-bottom:5px; margin-top:10px; } .lft_nav ul{ margin:10px 0; } .lft_nav ul li { } .lft_nav ul li a { background: url(../images/bullet.png) no-repeat scroll left center rgba(0, 0, 0, 0); border-bottom: 1px dotted #CCCCCC; display: block; font-size: 13px; color:#005b89; padding: 5px 0 5px 24px; } .lft_nav ul li a:hover { background: url(../images/bullet.png) no-repeat scroll 3px center rgba(0, 0, 0, 0); } .lft_nav ul ul{ margin:5px 0; } .lft_nav ul li li { } .lft_nav ul li li a { background: url(../images/arrow2.png) no-repeat scroll left center rgba(0, 0, 0, 0); border-bottom: 1px dotted #CCCCCC; display: block; color:#555; font-size: 12px; padding: 5px 0 5px 16px; margin-left:15px; } .lft_nav ul li li a:hover { background: url(../images/arrow2.png) no-repeat scroll left center rgba(0, 0, 0, 0); } .one_fouth{ width:158px; min-height:100px; border:1px solid #666666; margin-right:20px; float:left; } .one_fouth.last{ margin:0; } .grid_2.portfolio-style-2{margin-bottom:20px; } .support{ width:100%; margin-top: 20px; } .support .one_half{ width:46%; float:left; margin-right:8%; margin-bottom: 10px; } .support .one_half.last{ margin-right: 0px; } .support .one_half h2{ color:#005b89; line-height:24px; margin-bottom: 10px; } .ccb{ border-bottom: 1px dotted #666666; padding-bottom:5px; } .ccb h2 a{ color:#005b89; line-height:24px; margin-bottom: 10px; font: 18px 'Open Sans', Arial , sans-serif; font-weight: 600; margin-bottom: 20px; } .ccb h2 a:hover{ color: #444 !important; } .ccb h2 img{ float:left; margin-right:10px; } .support .one_half h3{ color:#005b89; line-height:24px; margin-bottom: 10px; font-size:16px; } .support .one_half h2 span{ font-size:14px; color: #333333; font-weight: 100; } .support .one_half p a{ color:#005b89; font-size:13px; } .support .one_half p a:hover{ color:#005b89; text-decoration:underline; } .support .one_half .map{ border:2px solid #005b89; } .support .one_half.bor{ border-bottom: 1px dotted; padding-bottom: 10px; } .support .one_half.bor a{ font-size:11px; } .press{ padding-bottom:10px; border-bottom:1px dotted; margin-bottom: 10px; } .press img{ border:1px solid #999999; float:left; margin:0px 10px 10px 0; padding:2px; max-width:200px; } .press span{ color:#005b89; } .press h3{ color:#005B89; font-size:16px; font-weight:400; } .press2{ padding-bottom:10px; border-bottom:1px dotted; margin-bottom: 10px; } .press2 .lft{ width:64px; float:left; margin-right: 10px; display: block; text-align:center; } .press2 .lft a { font-weight: bold; color: #005b89; } .press2 .lft a:hover { text-decoration:underline; } .press2 img{ max-width:50px; } .press2 .rgt { float:right; width:625px; } .mb_20{ margin-bottom:20px !important; } .txtplate-cigma{ border-collapse:collapse; border:1px solid #CCCCCC; margin-bottom:20px; } .txtplate-cigma td{ border-collapse:collapse; padding:3px 4px; text-align:center; border:1px solid #CCCCCC; } .superscript{ font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 8px; font-weight: bold; vertical-align: super; } #nav li ul.tp_nav{ width:480px !important; background:#fff; padding:10px 0; border:1px solid #005B89; display:block !important; visibility:hidden; } #nav li ul.tp_nav li { width:135px !important; float:left; padding:8px 12px 0px 12px !important; border:0; border-right:1px solid #ccc; } #nav li ul.tp_nav li.last { border-right:0px solid #ccc; } #nav li ul.tp_nav li:first-child { border-top: 0px solid #E6E6E6; } #nav li ul.tp_nav li a{ color:#FF0000; width:auto !important; padding:0px 0 5px 0; border-bottom:1px dotted #ccc; } .certi{ width:220px; margin-right:20px; float:left; margin-bottom:20px; } .certi.last{ margin-right:0px; } .pro_img{ float:right; margin-left:10px; border:3px solid #E7E7E7; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); } ul.sub_pro{ list-style:none; margin:10px 0 0; width:440px; } ul.sub_pro li{ width:200px; float:left; margin:0 10px 5px; } ul.sub_pro li a { background: url(../images/arrow2.png) no-repeat scroll left center rgba(0, 0, 0, 0); border-bottom: 1px dotted #CCCCCC; display: block; color:#005B89; font-size: 12px; padding:3px 0 3px 16px; } ul.sub_pro li a:hover { background: url(../images/arrow2.png) no-repeat scroll left center rgba(0, 0, 0, 0); color:#555555!important; border-bottom: 1px dotted #999; } #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { }#cssmenu a { line-height: 1.4; } #cssmenu { } #cssmenu > ul > li > a { display: block; } #cssmenu > ul > li > a > span { padding: 0; display: block; font-size: 14px; font-weight: 300; font-family: Arial, Helvetica, sans-serif; color: #005B89; } #cssmenu > ul > li > a:hover { text-decoration: none; } #cssmenu > ul > li.active { border-bottom: none; } #cssmenu > ul > li.active > a { } #cssmenu > ul > li.active > a span { } #cssmenu span.cnt { position: absolute; top: 8px; right: 15px; padding: 0; margin: 0; background: none; }/* Sub menu */ #cssmenu ul ul { display: none; } #cssmenu ul ul a { display: block; } #cssmenu ul ul a:hover { color: #bd0e36; } .call{ background:url(../images/top-phone.png) no-repeat 0 5px; padding:0 0 0 20px; width:130px; text-align:left!important; color:#d9251d; font-size: 16px; } .call span{ display:block; padding-left:5px; font-size:18px; color:#005b89; } .copyright-container .grid_3, .copyright-container .grid_4, .copyright-container .grid_5 { margin:0; } .copyright-container .grid_5 { text-align:center; } ul.ft-social { } ul.ft-social li { float:left; width:25px; height:25px; margin:0 5px; } .description p{ margin-bottom:15px; } ul.certi-list { width:100%; margin:20px 0 0; } ul.certi-list li { width:214px; float:left; border:1px solid #ccc; padding:2px; margin:0 20px 20px 0; } .certi-list > li:nth-child(3n) { margin:0; } ul.inner-list { float:left; } ul.inner-list li { padding: 2px 0 2px 16px; background:url(../images/arrow2.png) no-repeat 0 7px; } .circle-box { width:140px; height:100px; background:#fff; border-radius:50%; color:#005b89 !important; padding:30px 10px!important; display:block; font-size:18px !important; box-shadow:0 0 6px 0px rgba(0, 0, 0, .5) inset; } .circle-box span { display:block; text-align:center; font-size:16px; } .circle-box span.hd { font-size:28px; font-weight:700; margin:20px 0 10px; color:#949494; } .circle-box a.btn { width:80px; padding:4px 0; background:#000; margin:8px auto 0; display:block; text-align:center; background:#ffa902; color:#fff; border-radius:4px; } .circle-box a.btn:hover { color:#333 !important; } .main-banner-box { background:rgba(255, 255, 255, .75); width:400px; padding:10px !important; } .main-banner-box span { display:block; font-size:13px; margin:10px 0 10px; color:#333 !important; } .main-banner-box span.hd { display:block; font-size:17px; font-weight:700; margin:10px 0 10px; color:#949494; color:#005b89 !important; } /*ul.milestones-list { list-style:none; } ul.milestones-list li { display:block; position:relative; } ul.milestones-list li strong { display:inline-block; line-height:50px; padding-right:20px; margin-right:20px; padding-bottom:10px; border-right:2px solid #f0ad4e; position:relative; } ul.milestones-list li strong:after { background: #f0ad4e; border-radius: 50%; content: " "; height: 14px; left: 42px; position: absolute; top: 18px; width: 14px; } ul.milestones-list li span { content:""; position:absolute; left:70px; width:300px; line-height:1.5; padding:10px; margin-right:20px; border:1px solid #d4d4d4; box-shadow:0 1px 6px rgba(0, 0, 0, 0.176); top:6px; } ul.milestones-list li span:after { border-color: transparent #fff; border-style: solid; border-width: 9px 9px 9px 0; content: " "; display: inline-block; left: -9px; position: absolute; right: auto; top: 8px; } ul.milestones-list li span:before { border-color: transparent #ccc; border-style: solid; border-width: 10px 10px 10px 0; content: " "; display: inline-block; left: -10px; position: absolute; right: auto; top: 7px; }*/ ul.milestones-list { list-style:none; } ul.milestones-list li { border-radius: 0 80px 80px 0; box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15); display: block; max-width: 440px; min-height: 90px; position: relative; background:url(../images/milestones-icon.png) no-repeat 4px -438px; } ul.milestones-list li:nth-child(2n) { max-width:500px; background-color:fbfbfb; } ul.milestones-list li:after { content:''; height:26px; width:400px; position:absolute; top:0; background:url(../images/milestones-shadow.png) no-repeat 0 0; } ul.milestones-list li strong { background: #ffb236; border-radius: 50%; color: #fff; display: block; font-size: 18px; font-weight: 700; height: 66px; right: 12px; line-height: 66px; margin: 0; position: absolute; text-align: center; top: 12px; width: 66px; box-shadow:0 2px 7px rgba(0, 0, 0, 0.65) inset; } ul.milestones-list li:nth-child(2) strong, ul.milestones-list li:nth-child(7) strong { background: #2ab892; } ul.milestones-list li:nth-child(3) strong, ul.milestones-list li:nth-child(8) strong { background: #606060; } ul.milestones-list li:nth-child(4) strong, ul.milestones-list li:nth-child(9) strong { background: #ff2b58; } ul.milestones-list li:nth-child(5) strong { background: #005b89; } ul.milestones-list li:nth-child(2) { background-position:4px 9px; } ul.milestones-list li:nth-child(3) { background-position:4px -527px; } ul.milestones-list li:nth-child(4) { background-position:4px -258px; } ul.milestones-list li:nth-child(5) { background-position:4px -706px; } ul.milestones-list li:nth-child(6) { background-position:4px -618px; } ul.milestones-list li:nth-child(7) { background-position:4px -168px; } ul.milestones-list li:nth-child(8) { background-position:4px -348px; } ul.milestones-list li:nth-child(9) { background-position:4px -78px; } ul.milestones-list li span { font-size: 14px; left: 100px; line-height: 90px; position: absolute; width: 300px; } ul.level-support-list { list-style:none; } ul.level-support-list li {border-top-left-radius: 50px;border-bottom-left-radius: 50px;box-shadow: -1px 0px 1px rgba(0, 0, 0, 0.15);display: block;max-width: 702px;min-height: 100px;position: relative;background: url(../images/milestones-icon-flip.png) no-repeat 600px 8px;} ul.level-support-list li:nth-child(2n) { max-width:702px; background-color:fbfbfb; } ul.level-support-list li:after { content: '';height: 26px;width: 702px;position: absolute;top: 0;background: url(../images/milestones-shadow-flip.png) no-repeat 21px 0px;background-size: 680px 22px; } ul.level-support-list li strong {background: #ffb236;border-radius: 50% 0 0 50%; color: #fff;display: block;font-size: 18px;font-weight: 700;height: 76px;left: 12px;line-height: 76px;margin: 0;position: absolute;text-align: center;top: 12px;width: 76px;box-shadow: 0 2px 7px rgba(0, 0, 0, 0.65) inset;} ul.level-support-list li:nth-child(2) strong, ul.level-support-list li:nth-child(7) strong { background: #2ab892; } ul.level-support-list li:nth-child(3) strong, ul.level-support-list li:nth-child(8) strong { background: #606060; } ul.level-support-list li:nth-child(4) strong, ul.level-support-list li:nth-child(9) strong { background: #ff2b58; } ul.level-support-list li:nth-child(5) strong { background: #005b89; } ul.level-support-list li:nth-child(2) { background-position:600px -79px; } ul.level-support-list li:nth-child(3) { background-position:600px -173px; } ul.level-support-list li:nth-child(4) { background-position:600px -263px; } ul.level-support-list li:nth-child(5) { background-position:600px -347px; } ul.level-support-list li span { font-size: 13px;left: 100px;line-height: 1.3;position: absolute;width: 490px; padding-top: 38px;font-family: arial;} ul.level-support-list li p { position: absolute;left: 100px;line-height: 3;font-size: 16px;color:#106592;} ul.vision-list { list-style:none; } ul.vision-list li { border-radius: 20px; box-shadow: 0px 0 4px rgba(0, 0, 0, 0.15); display: block; position: relative; width:329px; margin:50px 10px 0 10px; float:left; } ul.vision-list li:before { content:''; width:100px; height:100px; border-radius: 50%; background:#fff url(../images/vision-mission.png) no-repeat 16px 18px; position:absolute; top:-40px; box-shadow: 0px 0 4px rgba(0, 0, 0, 0.15); left:calc(50% - 50px); } ul.vision-list li:last-child:before { background-position:12px -83px; } ul.vision-list li span { display: block; font-size: 13px; line-height: 1.6; padding: 80px 15px 20px 15px; } .grid_4.about-icon { padding:100px 0 0 0; position:relative; } .grid_4.about-icon:after { content:''; position:absolute; width:64px; height:64px; background:url(../images/about-icon.png) no-repeat -1px 2px; top:15px; left:calc(50% - 32px); } .grid_4.about-icon.mission:after { background-position: -93px 5px; width:80px; left:calc(50% - 40px); } .grid_4.about-icon.milestone:after { background-position: -195px 2px; } .grid_4.about-icon .entry-note h1 { font-weight:100; } .grid_4.about-icon .entry-note a { display:block; width:100px; text-align:center; margin:15px auto; background:#005b89; color:#fff; font-size:14px; padding:8px 10px; } .grid_4.about-icon .entry-note a:hover { background:#e68c22; color:#fff !important; } .award-main { background:url(../images/award-bg.jpg) no-repeat 0 0; width:100% !important; margin-bottom:20px; padding:40px 0 0; background-size: cover; } .award-main h1.hd { text-align:center; color:#fff; border-bottom:1px solid #fff; padding-bottom:10px; } .award-main .grid_4 { text-align:center; } .clientele-block { } .clientele-block li.clientele {border: 1px solid #cfcfcf; float: left; margin: 0 7px 14px; min-height: 108px !important; width: 203px !important; padding: 5px 7px; text-align:center; } ul.pro-block { display:block; } ul.pro-block li { float:left; display:block; margin:10px; float:left; width:220px; } .pro-block > li:nth-child(3n+1) { margin-left:0; } .pro-block > li:nth-child(3n) { margin-right:0; } .pro-block > li a { display:block; } .pro-block > li a img { display:block; width:214px; border:3px solid #E7E7E7; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); } .pro-block > li h2 { font-size:14px; text-align:center; display:block; margin:7px 0; } h4.support-hd {border-bottom: 1px dotted #ccc; margin-bottom: 10px; padding-bottom: 5px; color:#fff; } ul.block-support { list-style:none; } ul.block-support li { float: left; list-style:none; padding: 10px 15px; width: 33.33%; box-sizing: border-box; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.6); margin:0 6px 20px; width:220px; min-height:211px; background:#93d94a; border:1px solid rgba(0, 0, 0, .2); } ul.block-support li p { color:#fff; } ul.block-support li:nth-child(2) { background:#8d6cdb; } ul.block-support li:nth-child(3) { background:#5b97f3; } ul.block-support li:nth-child(4) { background:#e05f3e; } ul.block-support li:nth-child(5) { background:#b94bb1; } ul.news-block {} ul.news-block li {} ul.news-block li h4 { padding-bottom:3px; border-bottom:1px solid #ccc; margin-bottom:10px; } ul.news-block li .news-gallery { } ul.news-block li .news_img { border: 1px solid #ccc; float: left; margin: 0 20px 20px 0; padding: 2px; width: 214px; } ul.news-block li .news_img:nth-child(3n) { margin-right:0; } ul.block-support-list { padding:220px 0 0; } ul.block-support-list li { position:relative; margin-left:568px; } ul.block-support-list li:nth-child(2) { margin-left:426px; } ul.block-support-list li:nth-child(3) { margin-left:284px; } ul.block-support-list li:nth-child(4) { margin-left:142px; } ul.block-support-list li:nth-child(5) { margin-left:0; } ul.block-support-list li:before { content:'Level 1'; position:absolute; top:-234px; font-size:13px; color:#777; width:132px; text-align:left; font-weight:700; } ul.block-support-list li:nth-child(4):before { content:'Level 2'; } ul.block-support-list li:nth-child(3):before { content:'Level 3'; } ul.block-support-list li:nth-child(2):before { content:'Level 4'; } ul.block-support-list li:nth-child(1):before { content:'Level 5'; } ul.block-support-list li h4.support-hd { background:#0089bf; border:1px solid rgba(0, 0, 0, 0.2); padding:5px; border-radius:3px; } ul.block-support-list li:nth-child(1) h4.support-hd { background:#565654; } ul.block-support-list li:nth-child(2) h4.support-hd { background:#629341; } ul.block-support-list li:nth-child(3) h4.support-hd { background:#d71730; } ul.block-support-list li:nth-child(4) h4.support-hd { background:#e3aa36; } ul.block-support-list li:nth-child(5) h4.support-hd { background:#0089bf; } ul.block-support-list li p { position:absolute; width:112px; background:#000; bottom:16px; padding:5px 10px; text-align:left; font-family:Arial, Helvetica, sans-serif; min-height:150px; min-height:204px; z-index:-1; line-height:1.3; color:#fff; box-shadow:0 0 5px 0 rgba(0, 0, 0, .5) inset; } ul.block-support-list li:nth-child(1) p { right:0;background:#565654; } ul.block-support-list li:nth-child(2) p { right:142px;background:#629341; } ul.block-support-list li:nth-child(3) p { right:284px;background:#d71730; } ul.block-support-list li:nth-child(4) p { right:426px; background:#e3aa36; } ul.block-support-list li:nth-child(5) p { left:0; background:#0089bf; } .core-value-list{ list-style: none; } .core-value-list li{ margin: 0 0 10px; background: url(../images/check.png) 0 0 no-repeat; background-size: 18px; padding-left: 24px; } background: #000 none repeat scroll 0 0; border-radius: 4px; color: #fff; content: ""; display: block; height: 30px; line-height: 30px; margin: 0 10px 0 0; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); transition: all 300ms ease-in-out 0s; width: 30px;