/* ============================================================================ Theme Name: Elvyre Retina Ready HTML5 Template Theme URI: http://pixel-industry.com/html/elvyre Author: pixel-industry Version: 2.1 ============================================================================= */ /*=========================================================================== CONTENTS: 1. CSS RESET 2. PAGE CONTENT BACKGROUNDS (PARALLAX BACKGROUNDS) 3. TYPOGRAPHY 4. HEADER 4.1. Global styling 4.2. Main navigation 4.3. Search 4.4. Header style 3 4.5. Header style 4 4.6. Header style 5 5. PAGE TITLES 5.1. Page title 2 5.2. Page title 3 6. ELEMENTS 6.1. Accordion 6.2. Blockquote 6.3. Buttons 6.4. Client carousel 6.5. Development process boxes 6.6. Dropcaps 6.7. Heading centered 6.8. Heading with borders 6.9. Highlighted text 6.10. History section 6.11. Icons list 6.12. Information boxes 6.13. Notes 6.14. Portfolio carousel 6.15. Pricing tables 6.16. Services boxes 6.17. Services overview list 6.18. Services vertical tabs 6.19. Skills circular style 6.20. Skills rectangular style 6.21. Stats counter 6.22. Testimonials 6.23. Tabs horizontal 6.24. Tabs vertical 7. PAGE SPECIFIC STYLES 7.1. About pages 7.2. Portfolio 7.3. Blog 7.4. Contact page 8. WIDGETS 9. FOOTER ============================================================================= */ /* ========================================================================== 1. CSS RESET ============================================================================= */ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption,center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp { border: 0; margin: 0; padding: 0;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} b, strong {font-weight: bold;} img {color: transparent; font-size: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; max-width: 100%;} ul {list-style: none;} ol{ padding-left: 60px; margin-bottom: 20px; } table {border-collapse:collapse;border-spacing:0;border-color:#ccc;} tr th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#f0f0f0;} td{font-family:Arial, sans-serif;font-size:14px;padding:10px 7px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;} tr:nth-child(odd){background-color:#f9f9f9;} tr:nth-child(even){background-color:#ffffff;} ol li{ margin-bottom: 10px; } li {display: list-item;} table {border-collapse: collapse; border-spacing: 0;} th, td, caption {font-weight: normal; vertical-align: top; text-align: left;} q {quotes: none;} q:before, q:after {content: ''; content: none;} sub, sup, small {font-size: 75%;} sub,sup {line-height: 0; position: relative; vertical-align: baseline;} sub {bottom: -0.25em;} sup {top: -0.5em;} svg {overflow: hidden;} a{list-style: none; text-decoration: none;} a:active{outline: none;} a:focus{ outline: none;} :focus {outline: 0;} .clearfix{clear: both;} .pull-left {float: left;width: auto;} .pull-right{float: right;width: auto;} .pull-left+address{margin-left: 3px; display: inline-block; vertical-align: middle;} .text-center {text-align: center;} .text-center .btn-medium {margin-left: 0 !important; display: inline-block !important; float: none !important; border: none;} html,body{ width: 100%; max-width: 100%; overflow-x: hidden; } body { font-family: "Open Sans", Arial, sans-serif; font-size: 13px; line-height: 1.428571429; color: #000; background-color: #ffffff; padding-top: 109px; } .add-margin{ display: block; margin-bottom: 30px !important; float: left; } .no-bottom-margin{ margin-bottom: -10px; } /*jgrowl*/ div.jGrowl{z-index:9999;color:#fff;font-size:100%}div.ie6{position:absolute}div.ie6.top-right{right:auto;bottom:auto;left:expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop ) ) + 'px' )}div.ie6.top-left{left:expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop ) ) + 'px' )}div.ie6.bottom-right{left:expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop ) ) + 'px' )}div.ie6.bottom-left{left:expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop ) ) + 'px' )}div.ie6.center{left:expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop ) ) + 'px' );width:100%}div.jGrowl{position:absolute}body > div.jGrowl{position:fixed}div.jGrowl.top-left{left:0;top:0}div.jGrowl.top-right{right:0;top:120px;z-index: 9999999999}div.jGrowl.bottom-left{left:0;bottom:0}div.jGrowl.bottom-right{right:0;bottom:0}div.jGrowl.center{top:0;width:50%;left:25%}div.center div.jGrowl-notification,div.center div.jGrowl-closer{margin-left:auto;margin-right:auto}div.jGrowl div.jGrowl-notification,div.jGrowl div.jGrowl-closer{background-color:#000;opacity:.95;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85);zoom:1;width:245px;padding:15px 5%;margin-top:10px;margin-right:15px;margin-bottom:10px;font-family:Tahoma,Arial,Helvetica,sans-serif;font-size:120%;box-sizing:border-box;text-align:left;display:none;-moz-border-radius:5px;-webkit-border-radius:5px}div.jGrowl div.jGrowl-notification{min-height:40px}div.jGrowl div.jGrowl-notification,div.jGrowl div.jGrowl-closer{margin:10px}div.jGrowl div.jGrowl-notification div.jGrowl-header{font-weight:bold;font-size:.85em}div.jGrowl div.jGrowl-notification div.jGrowl-close{z-index:99;float:right;font-weight:bold;font-size:1em;cursor:pointer}div.jGrowl div.jGrowl-closer{display:none !important;padding-top:4px;padding-bottom:4px;cursor:pointer;font-size:.9em;font-weight:bold;text-align:center}@media print{div.jGrowl{display:none}} /* ajaxform */ @import url('./lib/jquery.jgrowl.min.css'); .af-message-success { background-color: green !important; } .af-message-error { background-color: brown !important; } .af-message-info { background-color: black !important; } .ajax_form.af_example { width: 100%; } .ajax_form.af_example .controls input, .ajax_form.af_example .controls textarea { width: 100%; } .ajax_form .error { color: brown; } @media screen and (min-width: 320px) { .ajax_form.af_example .controls button[type="submit"] { float: right; } } @media screen and (max-width: 320px) { .ajax_form.af_example .controls button { width: 100%; margin-top: 5px; } } /* 2. PAGE CONTENT BACKGROUNDS ============================================================================= */ .page-content{ width: 100%; margin: 0 auto; float: left; } .page-content.background-black{ background-color: #333; } .page-content.background-black h1, .page-content.background-black h2, .page-content.background-black h3, .page-content.background-black h4, .page-content.background-black h5, .page-content.background-black h6{ color: #fff; } .page-content.background-black p, .page-content.background-black a, .page-content.background-black span{ color: #ccc; } .page-content.parallax{ padding: 20px 0 0 0; width: 100%; border-top: 1px solid #eee; border-bottom: 1px solid #eee; overflow: hidden; } .page-content.pattern{ background: url('../../../webp/assets/template/img/pattern-1.png.webp') center center; background-size: cover; background-attachment: fixed; } .page-content.parallax-1{ background: url('../../../webp/assets/template/img/pictures/parallax-bkg-1.jpg.webp'); background-size: cover; background-attachment: fixed; background-repeat: repeat-y; } .page-content.parallax-2{ background: url('../../../webp/assets/template/img/pictures/city-view.jpg.webp'); background-size: cover; background-attachment: fixed; background-repeat: repeat-y; } .page-content.parallax-3{ background: url('../../../webp/assets/template/img/pictures/parallax-bkg-3.jpg.webp'); background-size: cover; background-attachment: fixed; background-repeat: repeat-y; } .page-content.parallax-4{ background: url('../../../webp/assets/template/img/pictures/parallax-bkg-4.jpg.webp'); background-size: cover; background-attachment: fixed; background-repeat: repeat-y; } .page-content.parallax + .page-content{ margin-top: 40px; } /* ========================================================================== 3. TYPOGRAPHY ============================================================================= */ p, a{ color: #000; font: 13px 'Open Sans', Arial, sans-serif; line-height: 22px; } a.read-more{ font-family: 'Raleway', Arial, sans-serif; position: relative; padding-top: 10px; } a.read-more span{ padding-left: 5px; } a { -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; color:#06f; } .underlined{ text-decoration: underline; } h1, h2, h3, h4, h5, h6{ font-weight: 400; color: #39414b; } h1,h2,h3{ margin-bottom: 30px!important; } h2+p{ margin-bottom: 40px!important; margin-top: -20px; } #content h2+p { margin-top: 0; margin-bottom: 1em !important; } h1{ font: 36px 'Raleway', Arial, sans-serif; line-height: 38px; } .h2, h2{ font: 26px 'Raleway', Arial, sans-serif; line-height: 28px; } h3{ font: 24px 'Raleway', Arial , sans-serif; line-height: 26px; } h4{ font: 22px 'Raleway', Arial, sans-serif; line-height: 24px; } h5{ font: 18px 'Raleway', Arial, sans-serif; line-height: 22px; } h6{ font: 16px 'Raleway', Arial, sans-serif; line-height: 20px; } img.float-left{ float: left; margin: 12px 12px 12px 0; } img.float-right{ float: right; margin: 12px 0px 12px 12px; } img + p, p+img{ display: block; margin-top: 15px; } .bottom-fixed{ margin-bottom: -80px; position: absolute; bottom: 0; } span.strong, b{ font-weight: 600; } .text-red{ color: #ce292d; } /* ========================================================================== 4. HEADER ============================================================================= */ /* 4.1. GLOBAL STYLING ----------------------------------------------------------------------------- */ #header-wrapper{ width: 100%; margin: 0 auto; z-index: 1000; position: relative; background: #fff; -webkit-transition: height 0.2s ease 0s; -moz-transition: height 0.2s ease 0s; -ms-transition: height 0.2s ease 0s; -o-transition: height 0.2s ease 0s; transition: height 0.2s ease 0s; } #header-wrapper.static{ position: fixed; top: 0; z-index: 99999999; } #top-bar-wrapper{ width: 100%; background: #fff; margin: 0 auto; min-height: 50px; } #top-bar{ margin: 0 auto; width: 1170px; } #top-bar .contact-info{ /* width: 50%; float: left; padding-top: 13px;*/ /* width: 30%;*/ /* float: right; */ padding-top: 5px; position: absolute; right: 16%; } .contact-info span{ font-size: 17px; } #top-bar .contact-info li{ float: left; margin-right: 25px; color: #888; font-size: 12px; } #top-bar .contact-info li a{ line-height: 24px; color: #888; } #top-bar .social-links { max-width: 50%; float: right; position: relative; margin: 9px 0 6px; } #top-bar .social-links li{ float: left; background: #fff; height: 35px; } #top-bar .social-links li a{ color: #bbb; width: 25px; height: 35px; display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; } #top-bar .social-links li:hover a{ color: #fff !important; } #top-bar .social-links li:last-child{ /*border-right: 1px solid #eee;*/ } .social-links.presentation li a{ float: left; width: 45px; height: 45px; margin-right: 2px; margin-bottom: 2px; font-size: 18px; } .header-wrapp-inn { background: #005C48; } #header{ width: 1170px; margin: 0 auto; position:relative; display: flex; } #header:before { content: ''; right: 100%; } #header:after { content: ''; left: 100%; } #logo{ margin: 7px 0; float: left; max-width: 137px; margin-right: 10px; } #logo img { width: 100%; display: block; height: auto; } #content ul { list-style: none; padding-left: 40px; } #content ul li { margin-bottom: 10px; color: #39414B; } #content ul li:before { top: 0px; position: relative; margin-right: 10px; } #content ul li:before { content: "\e0fe"; font-family: 'IconFont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } #content ul.tabs { list-style: none; padding-left: 0px; } #content ul.tabs li { margin-bottom: 0px; color: none; } #content ul.tabs li:before { top: 0px; position: relative; margin-right: 0px; } #content ul.tabs li:before { content: none; font-family: none; } #content table { /* width: 100% !important; */ } /* 4.2. MAIN NAVIGATION ----------------------------------------------------------------------------- */ #nav-container2, #nav-container{ /* width: 930px;*/ /* height: 35px;*/ /*margin-left: 30px;*/ /* z-index: 100; */ float: left; } #nav-container a{ color:#000; } #nav2, #nav{ height: 100%; list-style: none; max-width: 100%; float: left; } #nav2 { margin: 10px 0 8px; } #nav2 > ul, #nav > ul{ display: flex !important; } #nav2 >ul>li, #nav >ul>li{ float: left; height: 100%; cursor: default; max-width: 150px; text-align: center; } #nav2 >ul>li { max-width: 100%; } #nav2 > ul > li > span, #nav2 > ul > li > a, #nav > ul > li > span, #nav > ul > li > a{ font: 11px 'Open Sans', Arial, sans-serif; padding: 13px 10px 10px; text-transform: uppercase; /*padding-top: 25px; padding-bottom: 25px;*/ } #nav2 > ul > li > a { text-transform: none; } #top-bar #nav2 > ul > li > a, #top-bar #nav > ul > li > a{ padding: 5px 8px; } #nav2 ul li ul li a:hover, #nav ul li ul li a:hover{ text-decoration: underline; } #nav > ul > li.active > a, #nav > ul > li > a:hover{ background: #1b5e4f; color: #fff !important; } #nav2 > ul > li.active > a, #nav2 > ul > li > a:hover { border-color: #005C48; } #nav2 > ul > li, #nav > ul > li{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #nav2>ul>li> span, #nav2>ul>li> a, #nav>ul>li> span, #nav>ul>li> a{ float: none; display: block; font: 14px 'Open Sans', Arial, sans-serif; color: #3a3a3a; } #nav2>ul>li> span, #nav2>ul>li> a { border-radius: 5px; border: 1px solid transparent; } #nav>ul>li> span, #nav>ul>li> a { padding: 8px 10px; color: #fff; min-height: 38px; } #nav2 > ul > li.no-sub:hover, #nav > ul > li.no-sub:hover{ border-bottom: 4px solid #eee; } #nav2 .navlevel1, #nav .navlevel1 { position: relative; margin: 0 7px; } #nav2 ul li.navlevel1 ul, #nav ul li.navlevel1 ul { position: absolute !important; left: 0 !important; z-index: 9999 !important; column-count: 1 !important; -moz-column-count: 1 !important; -webkit-column-count: 1 !important; column-gap: 0 !important; -moz-column-gap: 0 !important; -webkit-column-gap: 0 !important; width: auto !important; padding: 5px !important; margin: 0 !important; text-align: left !important; height: auto !important; /* display:block !important; */ } #nav2 ul li.navlevel2, #nav ul li.navlevel2 { width: auto !important; min-width: 140px !important; padding: 5px !important; margin: 0 !important; text-align: left !important; height: auto !important; } #nav2 ul li.navlevel1 ul:after, #nav ul li.navlevel1 ul:after { content: ""; display: none !important; clear: both; height: 0; } #nav2 ul li.navlevel2 a, #nav ul li.navlevel2 a { width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; } #nav2 ul li.navlevel2 { white-space: pre; } /* MAIN NAVIGATION SECOND LEVEL ----------------------------------------------------------------------------- */ #nav2>ul>li>ul, #nav>ul>li>ul{ display: none; position: absolute; margin: 0; padding-top: 10px; padding-bottom: 10px; z-index: 100; text-align: left; background: #FFF; border: 1px solid #DDD; top: 90%; left: 0; column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-gap: 20px; -moz-column-gap: 20px; -webkit-column-gap: 20px; max-height: 77vh; overflow-y: hidden; } #nav2 > ul > li:hover ul { display: block; } #nav2>ul>li>ul>li, #nav>ul>li>ul>li{ min-width: 150px; display: block; background: #fff; /* border-right: 4px solid #eee; border-left: 4px solid #eee; */ -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; padding-bottom: 16px; } #nav2>ul>li>ul>li>span, #nav2>ul>li>ul>li>a, #nav>ul>li>ul>li>span, #nav>ul>li>ul>li>a{ text-transform: none !important; font: bold 13px 'Droid Sans', sans-serif; line-height: 15px; padding: 4px 15px !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; color: #1A404D !important; text-transform: uppercase!important; display: inline-block; } #nav2>ul>li>ul:after, #nav>ul>li>ul:after{ content: "."; display: block; clear: both; visibility: hidden; height: 0; } #nav2>li>ul>li, #nav>li>ul>li{ max-width: 150px; } #nav2 li.current-menu-item ul li.current-menu-item, #nav li.current-menu-item ul li.current-menu-item{ background: #f6f6f6; } /* MAIN NAVIGATION THIRD LEVEL ----------------------------------------------------------------------------- */ #nav2 li ul li ul, #nav li ul li ul { display: block!important; } #nav2 li ul li ul li, #nav li ul li ul li{ padding-left: 35px; margin-bottom: 5px; } #nav2 ul li ul li ul li ul li, #nav ul li ul li ul li ul li{ padding-left: 0px; } #nav2 ul li ul li ul li ul li a:before, #nav ul li ul li ul li ul li a:before{ content: '>'; display: inline-block; margin-right: 5px; font-size: 10px; color: #556C7A; } #nav2 ul li ul li ul li a, #nav ul li ul li ul li a{ line-height: 16px; } #nav2 li ul li ul li a, #nav li ul li ul li a{ display: inline-block; } #nav2 li ul li:hover>ul, #nav li ul li:hover>ul { /* left: 100%; top: -2px; padding-top: 0 !important; padding-left: 5px; position: absolute; display: block !important;*/ } /* 4.3. SEARCH ------------------------------------------------------------------------------*/ #search{ width: 40px; height: 40px; border-radius: 50%; position: relative; cursor: pointer; float: right; z-index: 1005; margin-top: 7px; margin-left: auto; } .search-submit{ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAXCAMAAAA4Nk+sAAAAUVBMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////9jlXTzAAAAGnRSTlMAeR7TYabo/d/zbpI1BBZCDlUqAoyGyOq+SUSGAA0AAADKSURBVCjPbZFXEsMgDETBmCJs4972/gcN1SaT6EfiwUirhbEcwyyNJrH1rI7RIId0L7UaEB3nkgCzFDoDao7V1Hme3zcE05Qnre+Tqg66muRPsc1A5T71IXQh98BYq5IQeeBUYw7KQ4YaW+iQbqCp8Q4VkgPaGh+4YhYQ60u9Als24K8+AZUUrAe0zdRdb8vdO3fdXo6zJ9IyURG8g9DmDM5u62OOabhKdh9l4VlH/4aRb3v7eH1rqK9t0m8RzuWHMgXqfymT6h/9AAbjDRm/4qKBAAAAAElFTkSuQmCC') center no-repeat; width: 40px; height: 40px; border: none; text-indent: -9999px; position: absolute; cursor: pointer; } #m_search{ background: #fff; border: 0; padding: 11px 15px; border-radius: 4px; position: absolute; top: 50%; right: 100%; margin-top: -15px; width: 200px; margin-left: -112px; font: italic 11px 'Raleway', Arial, sans-serif; color: #777; display: none; } /* ========================================================================== 4.4. HEADER STYLE 3 (grey colored top bar) ============================================================================= */ .header-style-3 #top-bar-wrapper{ background: #333; border-bottom: none; } .header-style-3 #top-bar .contact-info li, .header-style-3 #top-bar .contact-info li a{ color: #bbb; } .header-style-3 #top-bar .social-links li{ background: #444; border-left: 1px solid #555; border-right: 1px solid #333; } .header-style-3 #top-bar .social-links li:last-child{ border-right: none; } /* ========================================================================== 4.5. HEADER STYLE 4 ============================================================================= */ .header-style-4 .social-links{ float: right; margin-left: 30px; max-width: 1030px; margin-top: 25px; } .header-style-4 .social-links li{ float: left; margin-left: 10px; background-color: #eee; width: 30px; height: 30px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -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; } .header-style-4 .social-links li:hover a{ color: #fff !important; } .header-style-4 .social-links li a{ width: 30px; font-size: 10px; height: 30px;display: table-cell; vertical-align: middle; text-align: center; -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; } .header-style-4 #nav-container2, .header-style-4 #nav-container{ width: 100%; margin-left: 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .header-style-4 #nav-container2 #nav2, .header-style-4 #nav-container2 #nav, .header-style-4 #nav-container #nav{ max-width: 1100px; float: left; } /* ========================================================================== 4.6. HEADER STYLE 5 ============================================================================= */ .header-style-5 #logo{ width: 100%; max-width: 100%; margin: 20px auto; float: none; } .header-style-5 #logo a{ display: table; margin: 0 auto; } .header-style-5 #nav-container2, .header-style-5 #nav-container{ width: 100%; margin-left: 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .header-style-5 #nav-container2 #nav2, .header-style-5 #nav-container2 #nav, .header-style-5 #nav-container #nav{ max-width: 1100px; float: left; } /* ========================================================================== 5. PAGE TITLES ============================================================================= */ #page-title{ background: url(../img/page-titles/banner-bg.webp) center; padding: 13px 0 15px 0; background-size: cover; /* padding: 30px 0 0; */ overflow: hidden; position: relative; background-attachment: fixed; } #page-title.no-image .pt-title{ padding-bottom: 100px; } .pt-title{ padding: 20px 0; } .pt-title h1{ font-size: 36px; line-height: 38px; } .pt-image-container{ float: right; width: 100%; } .pt-image{ position: relative; bottom: 0; } .pt-image .float-right{ margin: 0; } .page-title-1 .breadcrumbs{ padding: 5px 10px; display: inline-block; color: #fff; float:right; position: relative; /*bottom: 0;*/ } .breadcrumbs li{ float: left; color:#333; padding: 0px 0px 0px 4px; line-height: 30px; } .breadcrumbs li:first-child{ padding-right: 5px; } .breadcrumbs li a{ color: #333; } .breadcrumbs li a:hover{ color: #333 !important; } .breadcrumbs li a:hover span { text-decoration: underline; } .breadcrumbs span{ font: 14px 'Raleway', Arial, sanserif; display: inline-block!important; padding: 2px 4px!important; line-height: 25px; } .breadcrumbs .active span { color: #005C48; } /* 5.1. PAGE TITLE 2 ============================================================================= */ #page-title.page-title-2{ padding: 50px 0; } #page-title.page-title-2 .pt-title{ padding: 0; float: left; margin-right: 40px; } #page-title.page-title-2 .pt-title h1{ margin-bottom: 0; } #page-title.page-title-2 .breadcrumbs{ float: right; padding: 5px 10px; display: inline-block; color: #fff; } /* 5.2. PAGE TITLE 3 ============================================================================= */ #page-title.page-title-3{ background: #f6f6f6; padding: 10px 0; } #page-title.page-title-3 .breadcrumbs li a{ color: #666; } /* ========================================================================== 6. ELEMENTS ============================================================================= */ /* 6.1. ACCORDION ============================================================================= */ .accordion .title{ background-repeat: no-repeat; background-position: 10px 8px; padding-left: 45px; padding-top: 10px; float: left; background-color: #f6f6f6; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; margin-bottom: 10px; } .accordion .title a{ font-size: 14px; font-family: 'Raleway', Arial, sans-serif; } .accordion .title span{ padding-right: 10px; font-size: 16px; } .accordion .title, .accordion .content{ padding-bottom: 10px; float: left; cursor: pointer; width: 100%; } .accordion .title.active a{ color: #222; font-weight: 500; } .accordion .title a:hover{ color: #333; } .accordion .content{ padding-bottom: 20px; } /* Accordion style 2 ----------------------------------------------------------------------------- */ .accordion.style-2 .title{ background-color: #fff; background-image: url('../img/accordion-closed2.png'); border: 1px solid #e6e6e6; } .accordion.style-2 .title.active{ background-image: url('../img/accordion-opened2.png'); } /* 6.2. BLOCKQUOTE ============================================================================= */ blockquote{ background: #f6f6f6; width: 100%; padding: 30px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-left: 3px solid #4F565F; float: left; margin-bottom: 15px; } blockquote p{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font: italic 16px 'Open Sans', Arial, sans-serif; font-weight: 300; line-height: 26px; } cite{ font-size: 12px; padding: 10px 0 0; display: block; width: 100%; font-weight: 400; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } p + blockquote, blockquote + p{ display: block; margin-top: 14px; float: left; } /* 6.3. BUTTONS ============================================================================= */ .btn-group{ width: 100%; float: left; } .btn-group a.btn-medium, .btn-group a.btn-big{ float: left; margin-right: 10px; margin-bottom: 10px; } .btn-medium i, .btn-big i{ padding-right: 8px; } .btn-medium{ padding: 10px 15px; font: 13px 'Open Sans', Arial, sans-serif; text-transform: uppercase; color: #fff; float: left; border: none; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .btn-big{ padding: 15px 18px; font: 14px 'Open Sans', Arial, sans-serif; text-transform: uppercase; color: #fff; 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; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .btn-medium:hover, .btn-big:hover{ color: #fff !important; } /* EMPTY BUTTONS ----------------------------------------------------------------------------- */ .btn-medium.empty, .btn-big.empty{ background: none; color: #333; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .btn-medium.empty:hover, .btn-big.empty:hover, .btn-medium.empty.white, .btn-big.empty.white{ color: #fff !important; } .btn-medium.empty.white, .btn-big.empty.white{ border: 1px solid #fff; } /* BUTTONS COLORS ============================================================================= */ /* Black ----------------------------------------------------------------------------- */ .btn-medium.black, .btn-big.black{ background: #333; } .btn-medium.black:hover, .btn-big.black:hover{ background: #555; } .btn-medium.empty.black, .btn-big.empty.black{ border: 1px solid #333; color: #333 !important; background: none; } .btn-medium.empty.black:hover, .btn-big.empty.black:hover{ background-color: #333; color: #fff !important; } /* Grey ----------------------------------------------------------------------------- */ .btn-medium.grey, .btn-big.grey{ background: #777; } .btn-medium.grey:hover, .btn-big.grey:hover{ background: #888; } .btn-medium.empty.grey, .btn-big.empty.grey{ border: 1px solid #777; color: #777 !important; background: none; } .btn-medium.empty.grey:hover, .btn-big.empty.grey:hover{ background-color: #777; color: #fff !important; } /* Silver ----------------------------------------------------------------------------- */ .btn-medium.silver, .btn-big.silver{ background: #aaa; } .btn-medium.silver:hover, .btn-big.silver:hover{ background: #bbb; } .btn-medium.empty.silver, .btn-big.empty.silver{ border: 1px solid #aaa; color: #777 !important; background: none; } .btn-medium.empty.silver:hover, .btn-big.empty.silver:hover{ background-color: #aaa; color: #fff !important; } /* Blue ----------------------------------------------------------------------------- */ .btn-medium.blue, .btn-big.blue{ background: #2277eb; } .btn-medium.blue:hover, .btn-big.blue:hover{ background: #4E92EF; } .btn-medium.empty.blue, .btn-big.empty.blue{ border: 1px solid #2277eb; color: #2277eb !important; background: none; } .btn-medium.empty.blue:hover, .btn-big.empty.blue:hover{ background-color: #2277eb; color: #fff !important; } /* Red ----------------------------------------------------------------------------- */ .btn-medium.red, .btn-big.red{ background: #d52b2a; } .btn-medium.red:hover, .btn-big.red:hover{ background: #DD5555; } .btn-medium.empty.red, .btn-big.empty.red{ border: 1px solid #d52b2a; color: #d52b2a !important; background: none; } .btn-medium.empty.red:hover, .btn-big.empty.red:hover{ background-color: #d52b2a; color: #fff !important; } /* Yellow ----------------------------------------------------------------------------- */ .btn-medium.yellow, .btn-big.yellow{ background: #fcc820; } .btn-medium.yellow:hover, .btn-big.yellow:hover{ background: #FDD34D; } .btn-medium.empty.yellow, .btn-big.empty.yellow{ border: 1px solid #fcc820; color: #fcc820 !important; background: none; } .btn-medium.empty.yellow:hover, .btn-big.empty.yellow:hover{ background-color: #fcc820; color: #fff !important; } /* Orange ----------------------------------------------------------------------------- */ .btn-medium.orange, .btn-big.orange{ background: #f8806c; } .btn-medium.orange:hover, .btn-big.orange:hover{ background: #F99989; } .btn-medium.empty.orange, .btn-big.empty.orange{ border: 1px solid #f8806c; color: #f8806c !important; background: none; } .btn-medium.empty.orange:hover, .btn-big.empty.orange:hover{ background-color: #f8806c; color: #fff !important; } /* Green ----------------------------------------------------------------------------- */ .btn-medium.green, .btn-big.green{ background: #9ab869; } .btn-medium.green:hover, .btn-big.green:hover{ background: #AEC687; } .btn-medium.empty.green, .btn-big.empty.green{ border: 1px solid #9ab869; color: #9ab869 !important; background: none; } .btn-medium.empty.green:hover, .btn-big.empty.green:hover{ background-color: #9ab869; color: #fff !important; } /* Aqua ----------------------------------------------------------------------------- */ .btn-medium.aqua, .btn-big.aqua{ background: #60cfc8; } .btn-medium.aqua:hover, .btn-big.aqua:hover{ background: #80D9D3; } .btn-medium.empty.aqua, .btn-big.empty.aqua{ border: 1px solid #60cfc8; color: #60cfc8 !important; background: none; } .btn-medium.empty.aqua:hover, .btn-big.empty.aqua:hover{ background-color: #60cfc8; color: #fff !important; } /* 6.4. CLIENT CAROUSEL ============================================================================= */ #client-carousel li{ width: 170px; margin-right: 30px; float: left; display: block; } /* 6.5. DEVELOPMENT PROCESS BOXESS ============================================================================= */ .process-box{ /* background: #fff; width: 90%;*/ height: 115px; float: right; padding: 25px 15px 25px 70px; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; cursor: pointer; -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; } .process-box::after{ position: absolute; display: block; content: ""; background: url('../img/development-shadow.png') no-repeat center 0; bottom: 0; width: 100%; height: 19px; left: 0; bottom: -19px; opacity: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; } .process-box:hover{ transform: translateY(-10px); -ms-transform: translateY(-10px); /* IE 9 */ -webkit-transform: translateY(-10px); /* Safari and Chrome */ } .process-box:hover h5, .process-box:hover p{ color: #fff; } .triggerAnimation.animated .process-box:hover p{ color: inherit; } .process-box:hover::after{ opacity: 0.7; } .process-box p { /* width: 80%; */ } .process-box:hover{background-image: none !important; background: none !important; } .grid_3:nth-child(4) .process-box p{margin-left: 30px;} .grid_3:nth-child(4) .process-box h5{margin-left: 30px;} .process-box .img-container{ /* width: 94px; height: 94px;*/ position: absolute; left: -37px; top: 49%; margin-top: -50px; display: block; float: left; /* border: 3px solid #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;*/ overflow: hidden; z-index: 30; } .process-box .img-container img{ /* width: 94px; height: 94px;*/ display: block; } .process-box h5{ margin-bottom: 15px; } /* 6.6. DROPCAPS ============================================================================= */ .dropcap{ color: #fff; background: #333; float: left; margin-right: 10px; font: 18px 'Open Sans', Arial, sans-serif; line-height: 18px; padding: 14px; position: relative; top: 8px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .dropcap.circle{ border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; top: 5px; } /* 6.7. HEADING CENTERED ============================================================================= */ .heading-centered{ width: 100%; margin-bottom: -40px; } .heading-centered h1, .heading-centered h2, .heading-centered h3, .heading-centered h4, .heading-centered h5, .heading-centered h6, .heading-centered p{ width: 100%; text-align: center; margin-bottom: 5px; } /* 6.8. HEADING WITH BORDERS ============================================================================= */ .heading-bordered{ border-bottom: 1px solid #e8eef6; margin-bottom: 30px; width: 100%; /*float: left;*/ } .heading-bordered h1, .heading-bordered h2, .heading-bordered h3, .heading-bordered h4, .heading-bordered h5, .heading-bordered h6, .heading-bordered .h2 { margin-bottom: 0; padding-bottom: 10px; border-bottom: 1px solid #a8b4c3; display: inline-block; margin-bottom: -1px !important; } .heading-bordered .h2 { font: 26px 'Raleway', Arial, sans-serif; line-height: 28px; width: auto; } /* 6.9. HIGHLIGHTED TEXT ============================================================================= */ .highlighted-color, .highlighted-color:hover{ color: #fff !important; margin-right: 3px; } /* 6.10. HISTORY SECTION ============================================================================= */ .history{ width: 100%; float: left; } .history .year-holder{ width: 104px; height: 104px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; float: left; margin-right: 30px; } .history .year-holder .inner-holder{ position: relative; top: 12px; left: 12px; } .history .year-holder span.year{ display: table-cell; vertical-align: middle; text-align: center; color: #fff; position: relative; font-size: 18px; font-weight: 300; width: 80px; height: 80px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .history h4{ margin-bottom: 12px; padding-top: 15px; padding-left: 140px; } .history-arrow-left, .history-arrow-right{ width: 100%; min-height: 104px; } .history p{ padding-left: 140px; } /* 6.11. ICONS LISTS ============================================================================= */ .icons-list li a, .icons-list li p { padding-left: 10px; display: inline; } .icons-list li{ padding-bottom: 3px; } .icons-list.big li{ font-size: 22px; padding-bottom: 8px; } .icons-list.big li p{ font-size: 18px; position: relative; top: -2px; font-family: 'Raleway', Arial, sans-serif; } /* 6.12. INFORMATIN BOXES ============================================================================= */ .information-boxes{ width: 100%; float: left; cursor: pointer; } .information-boxes .close{ width: 20px; height: 20px; display: block; position: absolute; background: url('../img/close.png') no-repeat; display: block; top: 5px; right: 5px; cursor: pointer; opacity: 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; } .information-boxes:hover .close{ opacity: 1; } /* INFORMATION BOXES - INFO BOX ----------------------------------------------------------------------------- */ .infobox{ background: #e0f2ff; border: 1px solid #c1def2; width: 100%; float: left; margin-bottom: 10px; position: relative; } .infobox p{ background: url('../img/info-box.png') no-repeat 0 center; margin: 10px 30px 10px 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; position: relative; } .warning-box p{ background: url('../img/warning-box.png') no-repeat 0 center; margin: 10px 30px 10px 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; position: relative; } .success-box p{ background: url('../img/success-box.png') no-repeat 0 center; margin: 10px 30px 10px 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; position: relative; } .error-box p{ background: url('../img/error-box.png') no-repeat 0 center; margin: 10px 30px 10px 10px; padding-left: 25px; color: #d86d6d; text-shadow: 0 1px 0 #fff; } /* 6.13. NOTES ============================================================================= */ .note h2{ width: 100%; text-align: center; margin-bottom: 20px; } .note .btn-medium, .note .btn-big{ float: none; display: table; margin: 0 auto; border: none; cursor: pointer; } /* NOTE WITH BACKGROUND CENTERED */ .note.has-background{ background: #f6f6f6; padding: 30px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .page-content.background-black .note{ padding: 40px 0; width: 100%; } .page-content.background-black .note h4{ color: #fff; text-align: center; } /* 6.14. PORTFOLIO CAROUSEL ============================================================================= */ .carousel-nav-container{ width: 100%; float: left; } .portfolio-carousel .isotope-item{ margin-bottom: 0; margin-right: 2px; display: block; float: left; height: auto; } .carousel-nav{ margin: 25px auto 0 ; display: table; } .carousel-nav li{ width: 30px; height: 30px; float: left; background-color: #eee; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-right: 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; } .carousel-nav li a[class^="c_prev"]{ background-image: url('../img/c_prev.png'); background-repeat: no-repeat; background-position: center; width: 30px; height: 30px; display: block !important; } .carousel-nav li a[class^="c_next"]{ background-image: url('../img/c_next.png'); background-repeat: no-repeat; background-position: center; width: 30px; height: 30px; display: block !important; } /* 6.15. PRICING TABLES ============================================================================= */ .pricing-table-col{ border: 10px 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: 22px; font-weight: 500; } .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 span{ font: 30px 'Open Sans', Arial, sans-serif; font-weight: 300; } .pricing-table-col.selected .head .price span, .pricing-table-col.selected .head .price{ 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; } .pricing-table-col li.odd{ background-color: #fcfcfc; } li.pricing-footer{ height: auto !important; width: 100%; float: left; box-sizing: border-box; -moz-box-sizing: border-box; border-top: none; } .pricing-footer .btn-small, .pricing-footer .btn-medium, .pricing-footer .btn-big{ margin: 5px auto; display: table; float: none; } /* 6.16. SERVICES BOXES ============================================================================= */ #services-carousel li{ margin-right: 30px; } /* Service box style 1 ----------------------------------------------------------------------------- */ .service-box-1{ width: 100%; float: left; cursor: pointer; /* margin-bottom: 10%;*/ } .service-box-1 .icon{ padding: 10px; margin-right: 10px; font-size: 16px; background: #333; color: #fff; float: left; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; display: table-cell; vertical-align: middle; text-align: center; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .service-box-1 h5{ padding-top: 7px; margin-bottom: 20px; padding-left: 50px; } .service-box-1:hover .icon{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } /* Service box 2 (background and shadow) ----------------------------------------------------------------------------- */ .service-box-2{ width: 100%; height: 260px; padding: 20px; cursor: pointer; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -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; } .service-box-2 .icon{ width: 100%; margin: 0 auto 15px; display: table; text-align: center; -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; } .service-box-2 .icon i{ font-size: 24px; padding: 20px; display: table; vertical-align: middle; text-align: center; margin: 0 auto; color: #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -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; } .service-box-2 .h5, .service-box-2 h5{ text-align: center; margin-bottom: 10px; font: 18px 'Raleway', Arial, sans-serif; line-height: 22px; color: #39414b; } .service-box-2 p{ text-align: center; } .service-box-2 a.read-more{ width: 100%; float: none; text-align: center; display: block; } .service-box-2:hover .icon i{ background-color: #fff; } .service-box-2:hover h5, .service-box-2:hover p, .service-box-2:hover a.read-more{ color: #fff; } .service-box-2 a.read-more:hover{ color: #fff !important; } .service-box-2:hover::before{ content: ""; position: absolute; display: block; background: url('../img/service-shadow-left.png') no-repeat; top: 0; left: -16px; width: 16px; height: 253px; } .service-box-2:hover::after{ content: ""; position: absolute; display: block; background: url('../img/service-shadow-right.png') no-repeat; top: 0; right: -16px; width: 16px; height: 253px; } /* 6.17. SERVICES OVERVIEW LIST ============================================================================= */ .services-overview li{ background: url('../img/checkmark.png') no-repeat 0 0; float: left; width: 100%; padding-left: 70px; margin-bottom: 30px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .services-overview li h3, .services-overview li h5{ margin-bottom: 15px !important; font: 18px 'Raleway', Arial, sans-serif; line-height: 22px; } /* 6.18. SERVICES VERTICAL TABS ----------------------------------------------------------------------------- */ .tabs.vertical.services-tabs{ width: 50%; } .tabs.vertical.services-tabs li{ background: none; border: none; margin-bottom: 30px; } .tabs.vertical.services-tabs li.active, .tabs.vertical.services-tabs li:first-child{ border: none !important; } .tabs.vertical.services-tabs li.active{ background: none; } .tabs.vertical.services-tabs li a{ padding: 0; } .tabs.vertical.services-tabs li.active a{ color: #fff !important; } .tabs.vertical.services-tabs li .icon{ font-size: 30px; padding: 20px; background: #fff; display: table-cell; float: left; border: 1px solid #eee; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -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; } .tabs.vertical.services-tabs li:hover .icon{ color: #fff; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .tabs.vertical.services-tabs li.active:hover .icon{ -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } .tabs.vertical.services-tabs li h5{ margin-bottom: 3px; padding-left: 92px; padding-top: 12px; } .tabs.vertical.services-tabs p{ padding-left: 92px; } .tab-content-wrap.vertical.services-tab-content-wrap{ background: none; padding: 0 0 0 30px; width: 50%; } .tab-content-wrap.vertical.services-tab-content-wrap .tab-content{ background: none; } /* 6.19. SKILLS CIRCULAR STYLE ============================================================================= */ .skills-circular{ width: 100%; float: left; } .skills-circular li{ float: left; margin-right: 30px; } .skills-circular.big li{ margin-left: 30px; margin-right: 60px; min-height: 155px; } .skills-circular li:last-child{ margin-right: 0; } .chart { position: relative; display: inline-block; width: 70px; height: 70px; text-align: center; } .skills-circular.big .chart{ width: 110px; height: 110px; } .chart canvas { position: absolute; top: 0; left: 0; } .percent-container{ top: 12px; left: 12px; position: relative; } .percent { display: table-cell; width: 46px; height: 46px; background: #4F565F; color: #fff; text-align: center; vertical-align: middle; z-index: 2; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .skills-circular.big .percent{ width: 86px; height: 86px; font-size: 22px; } .chart span.info{ padding-top: 30px; float: left; width: 100%; } /* 6.20. SKILLS RECTANLE STYLE ============================================================================= */ .skills-bar{ width: 100%; position: relative; float: left; } .skills{ padding-top: 20px; display: block; } .skills li em{ position: relative; top: -23px; font: 12px 'Open Sans', 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; box-sizing: border-box; -moz-box-sizing: border-box; } .expand{ height: 15px; position: absolute; margin-top: -1px; } .skills .percentage-10 { width:10%; -moz-animation:percentage-10 2s ease-out; -webkit-animation:percentage-10 2s ease-out;} .skills .percentage-20 { width:20%; -moz-animation:percentage-20 2s ease-out; -webkit-animation:percentage-20 2s ease-out;} .skills .percentage-30 { width:30%; -moz-animation:percentage-30 2s ease-out; -webkit-animation:percentage-30 2s ease-out;} .skills .percentage-40 { width:40%; -moz-animation:percentage-40 2s ease-out; -webkit-animation:percentage-40 2s ease-out;} .skills .percentage-50 { width:50%; -moz-animation:percentage-50 2s ease-out; -webkit-animation:percentage-50 2s ease-out;} .skills .percentage-60 { width:60%; -moz-animation:percentage-60 2s ease-out; -webkit-animation:percentage-60 2s ease-out;} .skills .percentage-70 { width:70%; -moz-animation:percentage-70 2s ease-out; -webkit-animation:percentage-70 2s ease-out;} .skills .percentage-80 { width:80%; -moz-animation:percentage-80 2s ease-out; -webkit-animation:percentage-80 2s ease-out;} .skills .percentage-90 { width:90%; -moz-animation:percentage-90 2s ease-out; -webkit-animation:percentage-90 2s ease-out;} .skills .percentage-100 { width:100%; -moz-animation:percentage-100 2s ease-out; -webkit-animation:percentage-100 2s ease-out;} /* 6.21. STATS COUNTER ============================================================================= */ .numbers-counter{ max-width: 450px; float: left; } .numbers-counter li span, .numbers-counter li p{ color: #fff; } .numbers-counter li{ margin-left: 1px; margin-bottom: 1px; float: left; } .numbers-counter li span{ font-size: 32px; width: 100%; text-align: center; display: block; } .numbers-counter li p{ width: 100%; display: block; text-align: center; } /* DIFFERENT GRIDS - FROM GRID_3 TO GRID_12 */ /* GRID_3 */ .grid_3 .numbers-counter li{ width: 134px; height: 134px; } .grid_3 .numbers-counter li span{ padding-top: 30px; } /* GRID_4 */ .grid_4 .numbers-counter li{ width: 184px; height: 184px; } .grid_4 .numbers-counter li span{ padding-top: 50px; } /* GRID_5 */ .grid_5 .numbers-counter li{ width: 155px; height: 155px; } .grid_5 .numbers-counter li span{ padding-top: 40px; } /* GRID_6 */ .grid_6 .numbers-counter li{ width: 189px; height: 189px; } .grid_6 .numbers-counter li span{ padding-top: 55px; } /* GRID_7 */ .grid_7 .numbers-counter li{ width: 166px; height: 166px; } .grid_7 .numbers-counter li span{ padding-top: 45px; } /* GRID_8 */ .grid_8 .numbers-counter li{ width: 191px; height: 191px; } .grid_8 .numbers-counter li span{ padding-top: 55px; } /* GRID_9 */ .grid_9 .numbers-counter li{ width: 173px; height: 173px; } .grid_9 .numbers-counter li span{ padding-top: 55px; } /* GRID_12 */ .grid_12 .numbers-counter li{ width: 194px; height: 194px; } .grid_12 .numbers-counter li span{ padding-top: 55px; } .grid_12>p{ margin: 10px 0px 40px; } .grid_3 .numbers-counter li:nth-child(2n), .grid_4 .numbers-counter li:nth-child(2n){ margin-right: 0; } .grid_5 .numbers-counter li:nth-child(3n), .grid_6 .numbers-counter li:nth-child(3n){ margin-right: 0; } /* 6.22. TESTIMONIALS ============================================================================= */ .caroufredsel_wrapper{ float: left !important; } .testimonial-carousel{ float: left; width: 100%; } .testimonial{ float: left; width: 100%; display: block; height: auto; } .testimonial .testimonial-text{ width: 100%; background: #f6f6f6; padding: 30px 30px 60px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .testimonial .testimonial-text p{ font-size: 14px; font-style: italic; } .testimonial-author{ width: 100%; position: relative; top: -40px; padding-left: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .testimonial-image-container{ float: left; width: 100px; height: 100px; margin-right: 20px; border: 4px solid #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; overflow: hidden; } .testimonial-image-container img{ dispaly: block; width: 100px; height: 100px; -webkit-border-radius: 50%; } .testimonial-author-name{ margin-bottom: 0; padding-top: 50px; } .testimonial-author-company{ width: 100%; display: block; font-style: italic; font-weight: 300; } /* TESTIMONIAL STYLE 02 ============================================================================= */ .testimonial.style-2 .testimonial-text{ background: none; padding-bottom: 0; } .testimonial.style-2 .testimonial-text p{ text-align: center; font-size: 18px; line-height: 28px; } .testimonial.style-2 .testimonial-text span{ text-align: center; padding-top: 10px; width: 100%; display: block; font-style: italic; } /* 6.23. TABS HORISONTAL ============================================================================= */ .tabs{ overflow: hidden; float: left; } .tabs i{ padding-right: 5px; font-size: 13px; } .tabs li{ float: left; border-left: 1px solid #eee; overflow: hidden; position: relative; padding: 0; line-height: 38px; top: 1px; background-color: #f6f6f6; cursor: pointer; } .tabs li a{ color: #333; padding: 0px 16px; font: 13px 'Raleway', Arial, sans-serif; line-height: 38px; padding-top: 2px; } .tabs li.active{ border-bottom: 1px solid #fff; background-color: #fff; } .tabs li:first-child{ border-left: none; } .tabs li.active:first-child{ border-left: 1px solid #eee; } .tabs li.active:last-child{ border-right: 1px solid #eee; } .tab-content-wrap{ width: 100%; border: 1px solid #eee; margin-top: -1px; overflow: hidden; float: left; padding: 30px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } /* 6.24. TABS VERTICAL ============================================================================= */ *[class*="grid_"].tabs.vertical, *[class*="grid_"].tabs.vertical li.active{ overflow: visible; } .tabs.vertical{ overflow: hidden; float: left; width: 30%; } .tabs.vertical li{ float: left; border-bottom: 1px solid #eee; border-right: 1px solid #eee; border-left: 1px solid #eee; border-top: none; overflow: hidden; 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: 15px; font: 13px 'Open Sans', Arial, sans-serif; float: left; width: 100%; box-sizing: border-box; } .tabs.vertical li a i{ font-size: 16px; padding-right: 15px; position: relative; top: 2px; } .tabs.vertical li.active{ border-bottom: 1px solid #eee; border-right: none; border-top: none; background: #fff; position: relative; } .tabs.vertical li.active a{ color: #fff; } .tab-content-wrap.vertical{ margin-top: 0; overflow: hidden; float: left; border: none; width: 70%; padding: 0; } .tab-content-wrap.vertical .tab-content{ padding-left: 30px; background: #fff; } /* ========================================================================== 7. PAGE SPECIFIC STYLES ============================================================================= */ /* ========================================================================== 7.1. ABOUT PAGES ============================================================================= */ /* 7.1.1. TEAM MEMBERS ============================================================================= */ .team{ width: 100%; float: left; } .team-img-container{ width: 100%; margin-bottom: 20px; position: relative; float: left; } .team-img-container .team-img-hover{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .team-img-container .team-img-hover .mask{ background: rgba(255, 255, 255, 0.2); box-shadow: inset 0px 0px 0px 8px rgba(255, 255, 255, 0.7); width: 100%; height: 100%; opacity: 0; display: block; cursor: pointer; -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; } .team-img-container:hover .mask{ opacity: 1; } .team h6{ margin-bottom: 0; } .team .position{ font-style: italic; font-weight: 300; margin-bottom: 10px; display: block; width: 100%; } .team-social-links{ width: 100%; margin-top: 15px; float: left; } .team-social-links li{ float: left; margin-right: 20px; } .team-social-links li a{ font-size: 16px; color: #aaa; } /* 7.1.2. TEAM MEMBERS ALTERNATIVE ============================================================================= */ .team-alternative li{ float: left; margin-right: 1px; margin-bottom: 1px; width: 284px; position: relative; overflow: hidden; cursor: pointer; } .team-member-hover{ position: absolute; width: 100%; height: 100%; opacity: 0; top: 0; left: 0; transform: scale(0, 0); -webkit-transform: scale(0, 0); -moz-transform: scale(0,0); -o-transform: scale(0,0); -ms-transform: scale(0,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; } .team-member-hover .mask{ opacity: 0.7; width: 100%; height: 100%; z-index: 1; } .team-member:hover .team-member-hover{ transform: scale(1, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); opacity: 1; } .team-member-hover .team-member-info{ position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; } .team-member-hover .team-member-info h5{ color: #fff; text-align: center; padding-top: 60px; margin-bottom: 3px; } .team-member-hover .team-member-info .position{ width: 100%; display: block; text-align: center; font-style: italic; color: #fff; margin-bottom: 30px; } .team-member-hover .btn-medium{ position: relative; left: 90px; } /* ========================================================================== 7.2. PORTFOLIO ============================================================================= */ .row.portfolio-items-holder{ margin-bottom: 30px; } /* Portfolio filters ----------------------------------------------------------------------------- */ .row.portfolio-filters{ margin-bottom: 30px; } .portfolio-filters.portfolio-full ul{ display: table; margin: 0 auto; } #filters li{ float: left; padding-right: 20px; margin-right: 20px; border-right: 1px solid #ddd; } #filters li .item-number{ background: #eee; min-width: 25px; min-height: 25px; display: inline-block; text-align: center; margin-left: 10px; font-family: 'Raleway', Arial, sans-serif; padding-top: 1px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -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; } #filters li a{ font-family: 'Raleway', Arial, sans-serif; } #filters li.active .item-number, #filters li:hover .item-number{ color: #fff; } #filters li:last-child{ border-right: none; } /* PORTFOLIO ITEMS ----------------------------------------------------------------------------- */ .isotope-hidden.isotope-item { z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; } .isotope-item{ float: left; margin-bottom: 30px; z-index: 2; } .portfolio-img-container .portfolio-img{ position: relative; overflow: hidden; width: 100%; } .portfolio-img-container .portfolio-img-hover{ width: 100%; height: 100%; opacity: 0; position: absolute; top:0; left: 0; transform: scale(0,0); -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -o-transform: scale(0,0); -ms-transform: scale(0,0); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .portfolio-img-container .portfolio-img:hover .portfolio-img-hover{ transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -o-transform: scale(1,1); -ms-transform: scale(1,1); opacity: 1; } .isotope-item .portfolio-style-2 .portfolio-img{ width: 100%; overflow: hidden; } .isotope-item .portfolio-img-container .portfolio-img img{ -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; } .portfolio-img-container .portfolio-img:hover img{ transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); } .portfolio-img-container .portfolio-img-hover .mask{ opacity: 0.7; width: 100%; height: 100%; } .portfolio-img-container .portfolio-img-hover li{ background: #222; width: 45px; height: 45px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; position: absolute; top: 50%; left: 50%; margin-top: -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; } .portfolio-img-container .portfolio-img-hover li.portfolio-zoom{ margin-left: -45px !important; } .portfolio-img-container .portfolio-img-hover li.portfolio-single{ margin-left: 5px !important; } .portfolio-img-container .portfolio-img-hover li a{ width: 45px; height: 45px; display: table-cell; text-align: center; vertical-align: middle; color: #eee; } .portfolio-img-container .portfolio-img-hover li:hover a{ color: #fff !important; } .portfolio-img-container figcaption{ width: 100%; background: #f6f6f6; padding: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .portfolio-img-container figcaption .portfolio-item-like{ float: right; padding-top: 5px; } .grid_6.isotope-item figcaption .title{ max-width: 500px; } #portfolioitems{ padding-left: 15px; } .portfolio-items-holder .isotope-item{ margin-bottom: 2px; margin-right: 2px; margin-left: 0; } .portfolio-items-holder .grid_6{ width: 584px; } .portfolio-items-holder .grid_4{ width: 388px; } .portfolio-items-holder .grid_3{ width: 291px; } .portfolio-items-holder .grid_6:nth-child(2n){ margin-right: 0; } .container.full #portfolioitems{ padding: 0; } .container.full .portfolio-items-holder .isotope-item{ width: 16.6%; margin-right: 1px; margin-bottom: 1px; } .pagination.portfolio-full{ width: 100%; margin: 0 auto; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 30px; } .pagination.portfolio-full ul{ float: none; display: table; margin: 0 auto; } /* Portfolio single project ----------------------------------------------------------------------------- */ .portfolio-info li{ width: 100%; padding-bottom: 3px; } .portfolio-single-like{ width: 100%; } .portfolio-single-like p{ display: inline; float: left; } .portfolio-single-like .portfolio-item-like{ float: left; padding-top: 5px; padding-left: 10px; } /* ========================================================================== 7.3. BLOG ============================================================================= */ .blog-posts li.blog-post{ float: left; margin-bottom: 20px; width: 100%; position: relative; } /* Blog media container (image, video, audio, ...) ----------------------------------------------------------------------------- */ #post-slider{ margin-bottom: 0; } .post a{ color:#000; } .post-media-container{ /* width: 100%;*/ margin-bottom: 30px; position: relative; float: left; margin-right: 20px; } .post-media-container .post-media-hover{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .post-media-container .post-media-hover .mask{ background: rgba(255, 255, 255, 0.3); box-shadow: inset 0px 0px 0px 8px rgba(255, 255, 255, 0.7); width: 100%; height: 100%; opacity: 0; display: block; cursor: pointer; -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-media-container:hover .mask{ opacity: 1; } /* Video iframe ----------------------------------------------------------------------------- */ .post-media-container iframe{ width: 100%; height: auto; min-height: 371px; } .grid_12.blog-posts .post-media-container iframe{ min-height: 500px; } /* Audio blog post ----------------------------------------------------------------------------- */ .post-media-container .audio-player{ width: 100%; } .post-media-container .audio-player.with-image{ position: absolute; bottom: 30px; width: 90%; left: 40px; } .grid_12.blog-posts .post-media-container .audio-player.with-image{ left: 60px; } /* Blog info icons ----------------------------------------------------------------------------- */ .post-info{ /*width: 110px;*/ float: left; /*margin-right: 30px;*/ margin-right: 10px; } .post-info li, .post-info-container .date-category li{ float: left; width: 60px; height: 60px; border-radius: 50%; } .post-info .post-date, .post-info-container .post-date{ background: #eee; position: relative; z-index: 20; } .post-info .post-date span, .post-info-container .post-date span{ width: 100%; display: block; text-transform: uppercase; } .post-info .post-date .day, .post-info-container .post-date .day{ text-align: center; font: 19px 'Open Sans'; line-height: 20px; font-weight: 600; padding-top: 14px; } .post-info .post-date .month, .post-info-container .post-date .month{ font-size: 9px; text-align: center; } .post-info .post-category, .post-info-container .post-category{ margin-left: -10px; } .post-info .post-category i, .post-info-container .post-category i{ width: 60px; height: 60px; display: table-cell; vertical-align: middle; text-align: center; font-size: 18px; color: #fff; } /* Post body ----------------------------------------------------------------------------- */ .post-body{ padding-left: 0; } .post-body h3{ margin-bottom: 10px!important; -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; } .post-body .img { width: 100%; margin-bottom: 20px !important; } .post-body .img img { width: 100%; } .consult-block { /*border-top: 1px solid #ededed;*/ border-bottom: 1px solid #ededed; display: flex !important; align-items: center; gap: 30px; padding: 20px; font-size: 15px; } .consult-block .links a.green { margin-bottom: 0; font-size: 16px; line-height: 1 !important; } .post-meta{ width: 100%; /* margin-bottom: 20px;*/ margin-bottom: 40px; /* float: left;*/ display: block; } .post-meta li{ float: left; padding-right: 15px; color: #666; line-height: 22px; } .post-meta li span{ font: 13px 'Open Sans', Arial, sans-serif; } .post-meta li a{ position: relative; display: inline-block; margin-right: 3px; } .post-meta li a::after{ position: absolute; top: 100%; left: 0; width: 100%; height: 1px; content: ""; opacity: 0; -webkit-transition: height 0.2s, opacity 0.2s, -webkit-transform 0.2s; -moz-transition: height 0.2s, opacity 0.2s, -moz-transform 0.2s; -o-transition: height 0.2s, opacity 0.2s, transform 0.2s; -ms-transition: height 0.2s, opacity 0.2s, transform 0.2s; transition: height 0.2s, opacity 0.2s, transform 0.2s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .post-meta li a:hover::after{ height: 2px; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } /* Pagination ----------------------------------------------------------------------------- */ .pagination{ float: right; } .pagination li{ float: left; margin-right: 5px; width: 30px; height: 30px; border-radius: 50%; background-color: #eee; -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; } .pagination li:last-child{ margin-right: 0; } .pagination li a{ width: 30px; height: 30px; display: table-cell; text-align: center; vertical-align: middle; } .pagination li:hover a, .pagination li.active a{ color: #fff !important; } .pagination li.current-page{ width: auto; height: auto; padding-top: 5px; background: none; margin-right: 25px; } .pagination li.current-page:hover{ background: none; } /* BLOG WITH SMALL IMAGES (BLOG.HTML) ============================================================================= */ .blog-posts.blog-post-small-image li .post-media-container{ width: 270px; margin-right: 30px; } .blog-posts.blog-post-small-image li .post-body{ padding-left: 300px; } .blog-posts.blog-post-small-image .post-info-container{ width: 100%; margin-bottom: 20px; } .blog-posts.blog-post-small-image .post-info-container .date-category{ width: 110px; height: 60px; margin-right: 20px; float: left; } .blog-posts.blog-post-small-image .post-info-container .post-info{ padding-left: 130px; width: 100%; margin-right: 0; float: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .blog-posts.blog-post-small-image .post-info-container .post-info li{ width: auto; height: auto; } .blog-posts.blog-post-small-image .post-media-container iframe{ min-height: 212px; } .blog-posts.blog-post-small-image .post-media-container .audio-player.with-image{ left: 15px; } /* BLOG MASONRY ============================================================================= */ .blog-posts.isotope.cols li.blog-post.isotope-item{ width: 420px; margin-right: 30px; margin-bottom: 50px; } .blog-posts.isotope.cols li.blog-post.isotope-item:nth-child(2n){ margin-right: 0; } .blog-post.isotope-item .post-info{ width: 70px; } .blog-post.isotope-item .post-info .post-category{ margin-left: 0; margin-top: -10px; } .blog-post.isotope-item .post-body{ padding-left: 100px; } .blog-post.isotope-item iframe{ min-height: 250px; } .grid_12.blog-posts .blog-post.isotope-item .post-media-container iframe{ min-height: 300px; } .blog-post.isotope-item .post-media-container .audio-player.with-image{ bottom: 20px; left: 20px; } .blog-posts.isotope.full li.blog-post.isotope-item{ width: 370px; margin-right: 30px; margin-bottom: 50px; } .blog-posts.isotope.full li.blog-post.isotope-item:nth-child(3n){ margin-right: 0; } .blog-posts.isotope.full li.blog-post.isotope-item .nivoSlider{ min-height: 158px; } /* BLOG SINGLE POST ============================================================================= */ .post-author{ float: left; margin-bottom: 80px; width: 100%; } .post-author .img-container{ width: 70px; height: 70px; float: left; margin-right: 30px; border: 3px solid #eee; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; } .post-author .info{ padding-left: 103px; } .post-author .info h6{ margin-bottom: 3px; -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-author .info span.member{ font-style: italic; margin-bottom: 10px; display: block; } /* ========================================================================== POST COMMENTS ============================================================================= */ .post-comments{ width: 100%; float: left; } .comments-li{ float: left; margin-bottom: 30px; } .comments-li > li{ float: left; width: 100%; margin-bottom: 30px; } .comments-li > li:last-child .comment{ border: none; margin-bottom: 0; } .comment{ float: left; min-height: 60px; border-bottom: 1px solid #ddd; padding-bottom: 30px; } .post-comments .comment + .children{ margin-top: 30px; } .post-comments .children + .children{ margin-top: 30px; } .comment .avatar{ width: 70px; height: 70px; margin-right: 30px; float: left; border: 3px solid #eee; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; } .comment-meta li{ font-style: italic; } .comment-meta .author{ font: 15px 'Raleway', Arial, sans-serif; font-weight: 600; } .comment .comment-body{ margin-left: 100px; margin-top: 15px; } .comment .comment-reply-link{ display: block; margin-top: 15px; background: url('../img/icon-reply.png') no-repeat 0 center; padding-left: 22px; cursor: pointer; text-transform: uppercase; } .post-comments .children{ margin-left: 20px; float: left; padding: 0 0 0 20px; } /* COMMENT FORM */ .comment-form, #respond{ float: left; width: 100%; } #respond form{ margin-top: 20px; } #respond fieldset{ margin-bottom: 10px; } #respond label{ width: 100%; 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: #f6F6F6; border: 1px solid #ddd; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; height: 30px; width: 308px; font: 13px 'Open Sans', Arial, sans-serif; padding-left: 10px; padding-right: 10px; float: left; color: #666; -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: #f6F6F6; border: 1px solid #ddd; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font: 13px 'Open Sans', Arial, sans-serif; line-height: 22px; padding: 10px; color: #666; } #respond #comment-reply{ color: #fff; font: 12px 'Open Sans', Arial,sans-serif; background-color: #333; cursor: pointer; padding: 8px 15px; border: none; float: right; margin-top: 10px; border-radius: 2px; -moz-border-radius: 2px; -webkit-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; } /* SHARRE BLOG POSTS AND PORTFOLIO POSTS ============================================================================= */ .share-post{ float: left; background: #f6f6f6; margin-top: 30px; padding: 10px 15px; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-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:#333; -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.portfolio-item-like .box{ background: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; padding: 0 5px 0 0; position: relative; top: -5px; color: #666; } .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:#555; 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:#ccc; 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:#fff; } .sharrre .box:hover{ padding-right:130px; } .sharrre.portfolio-item-like .box:hover{ padding-right: 5px; } .sharrre .middle a:hover{ text-decoration:none; color: #fff !important; } .sharrre .box:hover .middle{ width:90px; } .blog-post .share-post{ margin-bottom: 80px; } /* ========================================================================== 7.4. CONTACT PAGE ============================================================================= */ /* GOOGLE MAP ------------------------------------------------------------------------------*/ .map_canvas{ width: 100%; height: 550px; } .contact-info-list i{ padding-right: 10px; padding-bottom: 5px; } .widget .contact-info-list li{ background: none; border-bottom: none !important; padding-left: 0; } /* CONTACT FORM ------------------------------------------------------------------------------*/ .wpcf7{ float: left; width: 100%; } .wpcf7 fieldset{ max-width: 100%; margin-bottom: 20px; } .wpcf7 label{ color: #444; font: 13px Arial,sans-serif; line-height: 18px; margin-bottom: 5px; display: block; width: 100%; float: left; } .wpcf7-text{ max-width: 100%; background: #f6f6f6; border: 1px solid #ddd; padding: 8px 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .wpcf7-text#portfolio-link{ width: 100%; } .wpcf7-textarea{ width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; background: #f6f6f6; border: 1px solid #ddd; padding: 10px; } .wpcf7-text:focus, .wpcf7-textarea:focus{ border-color: #aaa; } .wpcf7-submit{ border: 0px solid; font: 12px 'Open Sans', Arial, sans-serif; text-transform: uppercase; line-height: 11px; color: #fff; background-color: #333; padding: 10px 17px; cursor: pointer; float: right; -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; } .wpcf7-select{ background: #f6f6f6; border: 1px solid #ddd; width: 100%; line-height: 29px !important; padding: 8px 8px 8px 10px; font: 12px 'Open Sans', Arial, sans-serif; color: #666; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } /* ========================================================================== 8. WIDGETS ============================================================================= */ /* SIDEBAR WIDGETS AND FOOTER WIDGETS GLOBAL STYLES ============================================================================= */ .widget h6{ margin-bottom: 20px; text-transform: uppercase; } .footer-widget-container .widget h6{ color: #eee; } #footer .footer-widget-container .widget .h6 { margin-bottom: 20px; text-transform: uppercase; font: 16px 'Raleway', Arial, sans-serif; line-height: 20px; color: #eee; } #footer .underlined{ margin-top:11px; display:inline-block; } .aside-left{ margin-bottom: 0; float: left; } .aside-right{ margin-bottom: 0; float: right; } .widget{ display: block; margin-bottom: 50px; float: left; width: 100%; } .widget li{ background: url('../img/aside-arrow.png') no-repeat 0 12px; border-bottom: 1px dotted #ddd; padding-left: 28px; padding-bottom: 5px; padding-top: 5px; } .widget li:last-child{ border-bottom: none !important; padding-bottom: 0; } .footer-widget-container .widget li{ border-bottom: 1px dotted #555; } .footer-widget-container li.widget:last-child{ margin-bottom: 70px; } aside>ul>li>ul>li>a{ text-transform: uppercase; } aside ul li ul li ul li a{ line-height: 16px; } aside>ul>li>ul>li.active>a{ color: #000000; } /* ASIDE SEARCH WIDGET ============================================================================= */ .widget_search form{ position: relative; } .widget_search #a_search{ background: #fff; border: 1px solid #ddd !important; width: 100%; display: block; font-size: 11px; font-family: 'Open Sans', Arial, sans-serif; color: #777; font-style: italic; left:0; top: 0; padding: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .widget_search .search-submit{ background: url('../img/aside-search.png') center center no-repeat; width: 20px; height: 100%; border: none; text-indent: -9999px; position: absolute; float: left; cursor: pointer; right: 6px; top: 1px; } /* WIDEGT RECENT POSTS ============================================================================= */ .pi_recent_posts ul > li{ float: left; border-bottom: none; background: none; margin-bottom: 15px; padding-bottom: 0; padding-left: 0; } .pi_recent_posts .post-media{ width: 70px; height: 70px; overflow: hidden; margin-right: 20px; float: left; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .pi_recent_posts .widget-post-info .meta li{ margin-bottom: 0px; } .pi_recent_posts .widget-post-info{ width: 100%; padding-left: 90px; padding-top: 8px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .pi_recent_posts .widget-post-info h6{ font-size: 15px; text-transform: none; margin-bottom: 0px; -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 .widget-post-info .meta{ width: 100%; float: left; } .pi_recent_posts .widget-post-info .meta li{ float: left; padding-right: 10px; color: #666; } .pi_recent_posts .widget-post-info .meta li span{ font: 13px 'Open Sans', Arial, sans-serif; line-height: 22px; color: #666; } .footer-widget-container .pi_recent_posts li{ border: none; } /* WIDEGT LATEST POSTS (ON HOME PAGE) - CAN GO IN GRID_3, GRID_6, GRID_9 AND GRID_12 ============================================================================= */ .latest-posts{ width: 50%; float: left; } .latest-posts li .post-media-container{ margin-bottom: 15px; } .latest-posts li h5{ width: 100%; margin-bottom: 5px; } .latest-posts li.post{ width: 100%; margin-right: 40px; margin-bottom: 25px; display: inline-block; vertical-align: top; } .latest-posts li.post:last-child{ margin-right: 0; } .facebook-box { width: 45%; float: left; margin-right: 5%; padding-bottom: 30px; } @media (max-width:768px) { .facebook-box { width: 100%; padding-bottom: 50px; margin-right: 0; } .latest-posts { width: 100%; overflow: hidden; } .blog-posts .vacancy-block { width: 100%; } } /* WIDEGT RECENT COMMENTS ============================================================================= */ .widget_recent_comments li{ background: url('../img/icon-comment.png') no-repeat 0 center; padding-left: 60px; padding-top: 0; min-height: 40px; border: none; margin-bottom: 15px; } .widget_recent_comments li a{ font-style: italic; } .widget_recent_comments li span{ font: 13px 'Open Sans', Arial, sans-serif; line-height: 22px; padding-left: 3px; } .footer-widget-container .widget_recent_comments li{ color: #bbb; } /* IMAGE PHOTO STREAMS/SOCIAL FEED WIDGET ============================================================================= */ .widget.social-feed li{ background: none; border: none; padding: 0; float: left; width: 66px; height: 66px; margin-right: 1px; margin-bottom: 1px; overflow: hidden; } .widget.social-feed li a img{ width: 66px; height: 66px; opacity: 0.6; -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; } .widget.social-feed li a img:hover{ opacity:1; } .widget.social-feed li:nth-child(4n){ margin-right: 0; } /* NEWSLETTER SUBSCRIBE WIDGET ============================================================================= */ .newsletter .email{ border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border: 1px solid #ddd; color: #666; width: 148px; height: 28px; padding: 0 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-size: 11px; float: left; margin-right: 3px; } .footer-widget-container .newsletter .email{ background: #444; border: 1px solid #555; color: #ccc; color: #bbb; } .widget .newsletter .submit{ height: 28px; color: #eee; font-size: 11px; position: relative; top: 0; padding: 0 15px; cursor: pointer; border: 1px solid #555; background: #444; border-radius: 2px; -webkit-border-radius: 2px; -moz-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; } /* TAG CLOUD WIDGET ============================================================================= */ .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: #444; color: #bbb; font-size: 12px; } /* TWITTER WIDGET ============================================================================= */ #tweet-sroll-wrapper.widget li{ border: none; background: url('../img/twitter_402x.png') no-repeat 0 5px; padding-left: 44px; margin-bottom: 8px; } .footer-widget-container #tweet-sroll-wrapper.widget li a{ color: #ccc; } #tweet-sroll-wrapper.widget .tweets-list-container{ overflow: hidden; width: 100%; } #tweet-sroll-wrapper.widget .tweet-list{ position: relative; } /* ========================================================================== 9. FOOTER ============================================================================= */ .footer-wrapper{ background: #333; color:#BBB; border-top: 10px solid #e5e8ec; width: 100%; float: left; padding: 70px 0 0 0; } #footer p, footer a{ color: #bbb; } /* COPYRIGHT CONTAINER ----------------------------------------------------------------------------- */ .copyright-container{ background: #fff; padding: 20px 0; width: 100%; margin: 0 auto; float: left; } .copyright-links { clear: both; text-align: right; } .copyright-links li { display: inline-block; padding: 10px 15px; } .copyright-links li a { text-transform: none; font-size: 85%; } .copyright-container a, .copyright-container p{ line-height: 12px; font-size: 12px; text-transform: uppercase; color: #39414b; } .copyright-container p{ padding-top: 7px; } .footer-breadcrumbs{ float: right; } .footer-breadcrumbs a { margin-right: 15px; padding-bottom: 3px; position: relative; display: inline-block; } .footer-breadcrumbs a::after{ position: absolute; top: 100%; left: 0; width: 100%; background: #666; height: 1px; content: ""; opacity: 0; -webkit-transition: height 0.2s, opacity 0.2s, -webkit-transform 0.2s; -moz-transition: height 0.2s, opacity 0.2s, -moz-transform 0.2s; -o-transition: height 0.2s, opacity 0.2s, transform 0.2s; -ms-transition: height 0.2s, opacity 0.2s, transform 0.2s; transition: height 0.2s, opacity 0.2s, transform 0.2s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .footer-breadcrumbs a:hover::after{ height: 2px; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .scroll-up{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url('../img/to-top.png') no-repeat; } .nicescroll-rails{ z-index: 10000 !important; } .main{ padding-top: 100px!important; } .services-list article .service-box-1{ height: 80px; } .services-list article .service-box-1 h5 { /*font-size: 17px!important;*/ margin-bottom: 15px!important; } p{ margin-bottom: 1em; width: 100%; } /*.widget_categories ul li ul{ display: none; } .widget_categories ul li ul.collapsed{ display: block; } .widget_categories ul li.active ul li.active ul li.active a{ font-weight: bold; }*/ .gmaps-wrap { height: 350px; } .gmaps-wrap iframe { height: 100%; width: 100%; } .widget_articles ul li.active a, .widget_categories ul li.active ul li.active a{ font-style: italic; color:#000; } .service{ margin-bottom: 5%; } .ajax_form .error { color: #777777!important; border-color: #A52A2A!important; } .sisea-result h4{ margin-bottom: 5px; } .sisea-result a{ font-size: 22px; } .auth{ display: none; } .auth_link{ font: 11px 'Open Sans', Arial, sans-serif; padding: 4px 10px; text-transform: uppercase; color: #333!important; /* height: 12px!important; */ top: -3px; left: 20px; position: relative; } .text-center { text-align: center; } .order{ display: none; /* width: 95%; */ width: 450px; /* height: 370px; */ background: #ffffff; border: 1px solid #888888; border-radius: 5px; padding: 10px; } @media (max-width:480px) { .order{width: 400px;} } @media (max-width:420px) { .order{width: 350px;} } @media (max-width:370px) { .order{width: 250px;} } .order.big-modal { max-width: 800px; width: 100%; height: auto; overflow: hidden; padding: 15px; box-sizing: border-box; } .big-modal .h3, .order .h3, .order h3{ color: inherit; padding-bottom: 0px; margin-bottom: 10px; text-align: center; } .big-modal .h3, .order .h3 { font: 24px 'Raleway', Arial , sans-serif; line-height: 26px; /* margin-bottom: 30px; */ } .visible2 p { margin-bottom: 10px !important; text-align: center; font: 18px 'Raleway', Arial, sans-serif; } .visible2 #theme { display: none; } .visible2 form input[type="text"], .visible2 form input[type="tel"], .visible2 form input[type="email"], .visible2 form textarea, .order form input[type="text"], .order form input[type="tel"], .order form input[type="email"], .order form textarea, .mainpage-form-wrap form input:not([type="submit"]), .mainpage-form-wrap form textarea, .input-style1 { display: block; margin-bottom: 10px; height: 30px; width: 100%; border: 1px solid #888888; border-radius: 5px; padding: 0px 5px; font: 13px Arial,sans-serif; box-sizing: border-box; } /* .iti { margin-bottom: 10px; width: 100%; } .mainpage-form-wrap form .iti { margin-bottom: 10px; width: 80%; } input.tel { padding-left: 52px !important; } .mainpage-form-wrap form .iti input { display: block; width: 100% !important; } */ form .int-phonemask__wrap { margin-bottom: 10px; } .mainpage-form-wrap form .int-phonemask__wrap { padding-left: 10%; } .mainpage-form-wrap form textarea { height: 150px; padding: 5px; } .visible2 form input[type="text"], .visible2 form textarea { width: 95.5%; } .visible2 form textarea, .order form textarea{ height: 100px; padding: 5px; } .visible2 .btn-medium, .order .btn-medium{ display: block; margin-left: 52px; border: none; } .visible2 .btn-medium { margin-left:78px; } .visible2 { padding-bottom: 30px; } .visible2:after { content: ''; display: block; clear: both; } .aside-left p { font-size: 16px; margin-bottom: 0; } .popups a{ display: inline-block; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); writing-mode: tb-rl; } .services-list{ padding-top: 20px; } .background-grey{ padding: 20px 0px; background: #4F565F; border-bottom: 1px solid rgba(0,0,0,.1); } .background-grey h4{ text-align: center; color: #ffffff; } .background-grey .white:hover{ border: 1px solid #fff!important; background: #4F5864!important; } aside ul li ul li ul{ display: none; } .collapsed{ display: block; } .lang { float: right; position: relative; right: 10px; margin: 8px 10px; } ul.icon-checkmark-circle-list li{ margin-bottom: 10px; } .note h3{ text-align: center; } .login{ width: 120px; float: left; top: 8px; position: relative; } #auth{ display: none; padding: 10px; } .phone { font-size: 1.5em; /* float:left; */ float: none; margin: 10px 10px; } @media only screen and (max-width:768px) { #top-bar .contact-info, #top-bar .social-links { width: auto !important; display: inline-block; float: left; margin-right: 25px; } .lang { float: right; top: 0; } .dl-back { display: none; } #search { top: 5px; position: absolute; right: 0; z-index: 100000; } .dl-menuwrapper { max-width: 100% !important; } .dl-menuwrapper li .dl-submenu { margin-left: 25px; background-color: #4a4a4a; } .dl-menuwrapper li .dl-submenu .dl-submenu { display: block !important; background-color: #656565; } .dl-menuwrapper li a.active { border-bottom: 2px solid #005C48; } .dl-menuwrapper li a.active:after { color: #005C48 !important; } .dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after { transform: rotate(90deg); } } .map_canvas small{ display: none!important; } .sh_btn { z-index: 999999; font-size: 14px; font-family: Arial; color: #fff; position: fixed; cursor: pointer; box-shadow: inset 0 0 1px rgba(255,255,255,.5); background: #4F565F!important; } .sh_header{ background: #4F565F!important; } .b-share_theme_counter .b-share-btn__wrap{ clear: both; display: block; margin-left: 0px!important; margin-bottom: 5px; } .social-likes{ position: fixed; top: 280px; z-index: 5; } .controls{ position: relative; } /*хак для Оперы*/ _:-o-prefocus, .call_link { position: relative; top: -2px; display: block; } .liqpay_form{ float: right; } .mistakes{ font-size: 14px; font-weight: bold; font-style: italic; padding: 7px 10px 10px; margin: 30px 0px; background: #E3E9EC; } .links { margin-left: -25px; margin-right: -25px; } .liqpay, .links a{ /*text-transform: uppercase;*/ float: right; color:#c00; background: #ffffff; border: 1px solid; padding: 6px 12px; margin-left: 10px; margin-top:-2px; margin-bottom:1em; } .links a{ display: inline-block; float: none; border: 2px solid #005C48; color: #10541a; font-size: 20px; height: 50px; line-height: 46px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding: 0 17px; margin: 0 12px 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; background: #fff; } .links a.green { background: #005C48; color: #fff; padding: 0 20px; } .links a:hover { background: #005C48; color: #fff !important; } .links a.green:hover { background: #fff; color: #10541a !important; } .liqpay{ padding: 10px 12px; position: relative; color:#c00; } .liqpay:hover{ background: #800; color: #ffffff!important; cursor: pointer; } .price-rd { margin-left: -15px; } .price{ display: inline-block; /* background: #4F565F; */ color: #381c1c; font-size: 18px; min-height: 17px; margin: 0 15px 15px; padding-left: 25px; position: relative; } .price:after { content: ''; display: block; position: absolute; top: 50%; margin-top: -8px; left: 0; width: 20px; height: 16px; background: url('../img/workday-icon.png') center no-repeat; } .price.fw { } .price.fw:after { content: ''; display: block; position: absolute; top: 50%; margin-top: -7px; left: 0; width: 20px; height: 17px; background: url('../img/price-icon.png') center no-repeat; } .price.fw span { font-size: 24px; font-weight: bold; } #call{ display: none; height: 180px; } .buttons .btn-medium{ background-color: #4F565F!important; } .buttons .btn-medium:hover{ background-color: #39414B!important; right:0px; } .buttons .consult_link, .buttons .msg_link{ position: fixed; top: 40%; right: -93px; font-size: 12px; transform: rotate(7deg); -ms-transform: rotate(7deg); -webkit-transform: rotate(-90deg); } .buttons .msg_link{ top: 65%; right: -107px; } .buttons .msg_link.r{ right: -95px; } .buttons .msg_link.r:hover{ right: 0px; } .buttons .consult_link.r{ right: -95px; } .buttons .consult_link.r:hover{ right: 0px; } .buy_with{ background: #F3F7F8; padding: 10px 10px; margin-bottom: 20px; border: 1px dotted; } .buy_with p{ margin-bottom: 5px; padding-left: 5px; } .buy_with ul li{ display: inline-block; margin: 0px 6px; } .buy_with ul li a{ font-size: 14px; font-style: italic; } .hybridauth .ha-info{ margin-left: 0px!important; } .quote-left{ width: 25px; left: 0; } .callback{ background: url(/img/iphone.png) left top no-repeat ; width: 396px; height: 449px; left: 0; bottom: 0; position: absolute; z-index: 9999; } .callback > form { margin-left: 170px; margin-top: 60px; width: 143px; } #contactForm input { margin-top: 20px; padding-bottom: 10px; padding-top: 10px; text-indent: 10px; width: 100%; } #contactForm input[type="submit"] { background: none repeat scroll 0 0 #45729b; border: 0 none; text-align: center; text-indent: 0; width: 100%; color: #fff; width: 143px; } #contactForm input[type="submit"]:hover{cursor: pointer;} #contactForm > strong { color: #fff; display: block; padding-top: 20px; text-align: center; } /* Document : Animated.css custom build Creadit: https://daneden.me/animate/ */ .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;-ms-animation-duration:1.5s;-o-animation-duration:1.5s;animation-duration:1.5s;}.animated.hinge{-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;-ms-animation-duration:1.5s;-o-animation-duration:1.5s;animation-duration:1.5s;}@-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-backface-visibility: visible !important; -moz-animation-name: flipInY; -o-backface-visibility: visible !important; -o-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } /* @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } */ .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } /* Document : darkblue style */ a:hover, #top-bar .contact-info li a:hover, .post-body a h3:hover, .pi_recent_posts .widget-post-info a h6:hover, #filters li.active a, .sharrre.portfolio-item-like:hover, .icons-list.colored, .btn-medium.empty, #page-title.page-title-3 .breadcrumbs li a:hover, .service-box-1 a:hover h5, .service-box-2:hover .icon i, .tabs.vertical li.active a, .latest-posts li a:hover h5{ color: #006622 !important; } .wpcf7-submit:hover, .widget .newsletter .submit:hover, .widget_tag_cloud a:hover, #top-bar .social-links li:hover a, .post-info .post-category, .post-info-container .post-category, .post-meta li a::after, .nivo-prevNav, .highlighted-color, .pagination li:hover, .sharrre .right, #respond #comment-reply:hover, #filters li.active .item-number, #filters li:hover .item-number, .portfolio-img-container .portfolio-img-hover li:hover, .btn-medium.empty:hover, .btn-big.empty:hover, .btn-medium:hover, .btn-big:hover, .carousel-nav li:hover, .expand, .team-member-hover .mask, .history .year-holder span.year, .service-box-1:hover .icon, .tabs.vertical.services-tabs li.active .icon, .tabs.vertical.services-tabs li:hover .icon, .service-box-2 .icon i, .service-box-2:hover, .process-box:hover, .header-style-4 .social-links li:hover, .pricing-table-col.selected .price, .pagination li.active, .dropcap.colored, .numbers-counter li{ background-color: #4F565F; } .nivo-prevNav, .nivo-nextNav{ background-color: rgba(114, 124, 137, 0.6); } .btn-medium.empty, .btn-big.empty, .btn-medium.empty.white:hover, .btn-big.empty.white:hover{ border: 1px solid #4F565F; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .history .year-holder{ border: 3px solid #4F565F; } .carousel-nav .c_next:hover{ background-image: url('../img/c_next_hover.png'); } .carousel-nav .c_prev:hover{ background-image: url('../img/c_prev_hover.png'); } .tabs li.active{ border-top: 1px solid #4F565F; } .accordion .title{ background-image: url('../img/accordion-closed.png'); } .accordion .title.active{ background-image: url('../img/accordion-opened.png'); } .history-arrow-right{ background: url('../img/timeline-right.png') no-repeat center center; background-size: 100%; } .history-arrow-left{ background: url('../img/timeline-left.png') no-repeat center center; background-size: 100%; } /* DARKER BLUE COLOR ==============================================================================*/ .widget .newsletter .submit:hover{ border: 1px solid #39414b; } .portfolio-img-container .portfolio-img-hover .mask, .btn-medium, .btn-big{ background: #39414b; } /*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 999999999; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } /* #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../images/fancybox_sprite.png'); } */ #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('../img/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; width: 30px; height: 30px; background: url('../img/close2.png') no-repeat!important; top: -10px; right: -10px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 99999999; background: url('../img/fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /* 1200px grid system ~ Core CSS. 12 Columns ~ Margin left: 15px ~ Margin right: 15px Based on the 960.gs grid system - http://960.gs/ by Nathan Smith Created by the Grid System Generator - v1.04 Learn more ~ http://www.gridsystemgenerator.com/ */ /* =Containers ----------------------------------------------------------------------------- */ .container { margin-right: auto; margin-left: auto; width: 1200px; } .container.full{ width: 100%; max-width: 100%; } .row:before, .row:after { content: " "; /* 1 */ display: table; /* 2 */ } .row:after { clear: both; } .page-content .row{ margin-top: 20px; margin-bottom: 20px; position: relative; } /* =Grid >> Global ----------------------------------------------------------------------------- */ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { min-height: 1px; margin-left: 15px; margin-right: 15px; float: left; display: inline; } /* =Grid >> Children (Alpha ~ First, Omega ~ Last) ----------------------------------------------------------------------------- */ .alpha {margin-left: 0;} .omega {margin-right: 0;} /* =Grid >> 12 Columns ----------------------------------------------------------------------------- */ .grid_1 {width: 70px;} .grid_2 {width: 170px;} .grid_3 {width: 270px;} .grid_4 {width: 370px;} .grid_5 {width: 470px;} .grid_6 {width: 570px;} .grid_7 {width: 670px;} .grid_8 {width: 770px;} .grid_9 {width: 870px;} .grid_10 {width: 970px;} .grid_11 {width: 1070px;} .grid_12 {width: 1170px;} /* `Clear Floated Elements ----------------------------------------------------------------------------- */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:before, .clearfix:after { content: "\0020"; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { clear: both; } /*@font-face { font-family: 'Grands'; src:url('../fonts/Grands.eot'); src:url('../fonts/Grands.eot?#iefix') format('embedded-opentype'), url('../fonts/Grands.svg#Grands') format('svg'), url('../fonts/Grands.woff') format('woff'), url('../fonts/Grands.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }*/ /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'Grands'; content: attr(data-icon); speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; } /* Use the following CSS code if you want to have a class per icon */ [class^="icon1-"]:before, [class*=" icon1-"]:before { font-family: 'Grands'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; } .icon1-YouTube:before { content: "\e000"; } .icon1-Yandex:before { content: "\e001"; } .icon1-Vkontakte:before { content: "\e002"; } .icon1-VK:before { content: "\e003"; } .icon1-vimeo:before { content: "\e004"; } .icon1-twitter:before { content: "\e005"; } .icon1-tumblr:before { content: "\e006"; } .icon1-Steam:before { content: "\e007"; } .icon1-StackOverflow:before { content: "\e008"; } .icon1-SoundCloud:before { content: "\e009"; } .icon1-Skype:before { content: "\e00a"; } .icon1-Share:before { content: "\e00b"; } .icon1-RSS:before { content: "\e00c"; } .icon1-Readability:before { content: "\e00d"; } .icon1-Read-it-Later:before { content: "\e00e"; } .icon1-Pocket:before { content: "\e00f"; } .icon1-Pinterest:before { content: "\e010"; } .icon1-Picasa:before { content: "\e011"; } .icon1-OpenID:before { content: "\e012"; } .icon1-MySpace:before { content: "\e013"; } .icon1-MoiKrug:before { content: "\e014"; } .icon1-Linked-in:before { content: "\e015"; } .icon1-LiveJournal:before { content: "\e016"; } .icon1-lastfm:before { content: "\e017"; } .icon1-Jabber:before { content: "\e018"; } .icon1-Instapaper:before { content: "\e019"; } .icon1-HabraHabr:before { content: "\e01a"; } .icon1-google:before { content: "\e01b"; } .icon1-GitHub-octoface:before { content: "\e01c"; } .icon1-GitHub-circle:before { content: "\e01d"; } .icon1-FourSquare:before { content: "\e01e"; } .icon1-flickr:before { content: "\e01f"; } .icon1-Flattr:before { content: "\e020"; } .icon1-facebook:before { content: "\e021"; } .icon1-Evernote:before { content: "\e022"; } .icon1-Email:before { content: "\e023"; } .icon1-DropBox:before { content: "\e024"; } .icon1-Blogspot:before { content: "\e025"; } .icon1-BitBucket:before { content: "\e026"; } .icon1-YouTube-play:before { content: "\e027"; } #mistake { background-image: url(../img/overlay.png); position: absolute; margin: auto; top: 0; left: 0; z-index: 99999999; width: 100%; } * html #mistake { background-image: none; } #m_window { position: absolute; background: #fff; border: 5px solid #aaa; overflow: auto; width: 350px; height: 400px; z-index: 150; } #m_frame { border: 0; overflow: auto; width: 100%; height: 378px; } * html #m_frame { margin-top: 7px; } /* Document : responsive style */ /* ========================================================================== RESPONSIVE NAVIGATION ============================================================================= */ .dl-menuwrapper { width: 100%; max-width: 300px; float: left; position: relative; /* -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; -webkit-perspective-origin: 50% 200%; -moz-perspective-origin: 50% 200%; perspective-origin: 50% 200%; */ display: none; z-index: 99999; } .dl-menuwrapper:first-child { margin-right: 100px; } .dl-menuwrapper button { background: #ccc; border: none; width: 48px; height: 45px; text-indent: -900em; overflow: hidden; position: relative; cursor: pointer; outline: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul { background: #aaa; } .dl-menuwrapper button:after { content: ''; position: absolute; width: 55%; height: 4px; background: #fff; top: 12px; left: 22.5%; box-shadow: 0 9px 0 #fff, 0 18px 0 #fff; } .dl-menuwrapper ul { padding: 0; list-style: none; /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ } .dl-menuwrapper li { position: relative; } .dl-menuwrapper li a { display: block; position: relative; padding: 15px 20px; font-size: 16px; line-height: 20px; font-weight: 300; color: #fff; outline: none; } .no-touch .dl-menuwrapper li a:hover { background: rgba(255,248,213,0.1); } .dl-menuwrapper li.dl-back > a { padding-left: 30px; background: rgba(0,0,0,0.1); } .dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after { position: absolute; top: 0; speak: none; -webkit-font-smoothing: antialiased; } .dl-menuwrapper li.dl-back:after { left: 10px; color: rgba(212,204,198,0.3); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } .dl-menuwrapper li > a:after { right: 10px; color: rgba(0,0,0,0.15); } .dl-menuwrapper .dl-menu { margin: 0 0 0 0; /* position: absolute; */ width: 100%; display: none; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); /* -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; */ } /* .dl-menuwrapper .dl-menu.absol { position: absolute; } */ .dl-menuwrapper .dl-menu.dl-menu-toggle { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } /* Hide the inner submenus */ .dl-menuwrapper li .dl-submenu { display: none; } /* When a submenu is openend, we will hide all li siblings. For that we give a class to the parent menu called "dl-subview". We also hide the submenu link. The opened submenu will get the class "dl-subviewopen". All this is done for any sub-level being entered. */ .dl-menu.dl-subview li, .dl-menu.dl-subview li.dl-subviewopen > a, .dl-menu.dl-subview li.dl-subview > a { display: none; } .dl-menu.dl-subview li.dl-subview, .dl-menu.dl-subview li.dl-subview .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { display: block; } /* Dynamically added submenu outside of the menu context */ .dl-menuwrapper > .dl-submenu { position: absolute; width: 100%; top: 50px; left: 0; margin: 0; } /* Animation classes for moving out and in */ .dl-menu.dl-animate-out-2 { -webkit-animation: MenuAnimOut2 0.3s ease-in-out; -moz-animation: MenuAnimOut2 0.3s ease-in-out; animation: MenuAnimOut2 0.3s ease-in-out; } @-webkit-keyframes MenuAnimOut2 { 100% { -webkit-transform: translateX(-100%); opacity: 0; } } @-moz-keyframes MenuAnimOut2 { 100% { -moz-transform: translateX(-100%); opacity: 0; } } @keyframes MenuAnimOut2 { 100% { transform: translateX(-100%); opacity: 0; } } .dl-menu.dl-animate-in-2 { -webkit-animation: MenuAnimIn2 0.3s ease-in-out; -moz-animation: MenuAnimIn2 0.3s ease-in-out; animation: MenuAnimIn2 0.3s ease-in-out; } @-webkit-keyframes MenuAnimIn2 { 0% { -webkit-transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-moz-keyframes MenuAnimIn2 { 0% { -moz-transform: translateX(-100%); opacity: 0; } 100% { -moz-transform: translateX(0px); opacity: 1; } } @keyframes MenuAnimIn2 { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } .dl-menuwrapper > .dl-submenu.dl-animate-in-2 { -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out; -moz-animation: SubMenuAnimIn2 0.3s ease-in-out; animation: SubMenuAnimIn2 0.3s ease-in-out; } @-webkit-keyframes SubMenuAnimIn2 { 0% { -webkit-transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-moz-keyframes SubMenuAnimIn2 { 0% { -moz-transform: translateX(100%); opacity: 0; } 100% { -moz-transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn2 { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } .dl-menuwrapper > .dl-submenu.dl-animate-out-2 { -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out; -moz-animation: SubMenuAnimOut2 0.3s ease-in-out; animation: SubMenuAnimOut2 0.3s ease-in-out; } @-webkit-keyframes SubMenuAnimOut2 { 0% { -webkit-transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(100%); opacity: 0; } } @-moz-keyframes SubMenuAnimOut2 { 0% { -moz-transform: translateX(0%); opacity: 1; } 100% { -moz-transform: translateX(100%); opacity: 0; } } @keyframes SubMenuAnimOut2 { 0% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } /* No JS Fallback */ .no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } .no-js .dl-menuwrapper li .dl-submenu { display: block; } .no-js .dl-menuwrapper li.dl-back { display: none; } .no-js .dl-menuwrapper li > a:not(:only-child) { background: rgba(0,0,0,0.1); } .no-js .dl-menuwrapper li > a:not(:only-child):after { content: ''; } .dl-menuwrapper button { background: #444; } .dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul { background: #333; } /* ========================================================================== RESPONSIVE STYLES - DEVICES RESOLUTION ============================================================================= */ @media only screen and (min-width: 320px) and (max-width: 479px){ .container{ max-width: 90%; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{ float: left; /* width: 270px; */ width: 92%; } .page-content .row{ margin-bottom: 0px; } .page-content *[class*="grid_"]{ margin-bottom: 30px; } *[class*="grid_"] *[class*="grid_"]:last-child{ margin-bottom: 0; } *[class*="grid_"] *[class*="grid_"]{ margin-left: 0 !important; } #header, #top-bar{ width: 270px; } #top-bar .contact-info, #top-bar .social-links{ width: 100%; max-width: 100%; } #top-bar .social-links{ margin-top: 10px; } #top-bar .social-links li{ border-top: 1px solid #eee; } .header-style-3 #top-bar .social-links li{ border-top: 1px solid #555; } #logo{ width: 100%; max-width: 100%; } #nav-container2, #nav-container{ display: none; } .dl-menuwrapper{ display: block; margin-bottom: 20px; max-width: 200px; } .dl-menuwrapper li a:hover{ color: #fff !important; } .header-style-4 .social-links{ max-width: 100%; float: left; width: 100%; margin-bottom: 20px; margin-left: 0; } .header-style-4 .social-links li:first-child{ margin-left: 0; } .tp-caption.list-left , .tp-caption.list-right { display: none; } .grid_3 .numbers-counter li, .grid_4 .numbers-counter li, .grid_5 .numbers-counter li, .grid_6 .numbers-counter li, .grid_8 .numbers-counter li, .grid_7 .numbers-counter li, .grid_9 .numbers-counter li, .grid_12 .numbers-counter li{ width: 134px; height: 134px; } .grid_3 .numbers-counter li span, .grid_4 .numbers-counter li span, .grid_5 .numbers-counter li span, .grid_6 .numbers-counter li span, .grid_7 .numbers-counter li span, .grid_8 .numbers-counter li span, .grid_9 .numbers-counter li span, .grid_12 .numbers-counter li span{ padding-top: 35px; } .latest-posts li.post{ width: 100%; } .tabs li{ width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .tabs.vertical, .tab-content-wrap.vertical{ width: 100%; } .tab-content-wrap.vertical .tab-content{ padding-left: 0; padding-top: 30px; } .team-alternative li{ width: 100%; } .team-member-hover .team-member-info .position{ margin-bottom: 20px; } .team-member-hover .btn-medium{ left: 85px; } .team-member-hover .team-member-info h5{ padding-top: 50px; } .team-img-container .team-img-hover{ display: none; } .history-arrow-right, .history-arrow-left{ background-size: 170px 35px !important; } #page-title.page-title-2 .pt-title{ width: 100%; text-align: center; float: none; margin-bottom: 10px; } #page-title.page-title-2 .breadcrumbs{ float: none; display: table; margin: 0 auto; } .tabs.vertical.services-tabs, .tab-content-wrap.vertical.services-tab-content-wrap{ width: 100%; } .chart{ width: 51px; height: 51px; min-height: 120px; margin-bottom: 20px; } .skills-circular.big .chart{ width: 96px; height: 96px; } .skills-circular.big .percent{ width: 68px; height: 68px; font-size: 18px; } .skills-circular.big canvas{ height: 92px !important; width: 92px !important; } .skills-circular.big li{ margin-right: 0; margin-left: 25px; } .widget.social-feed li:nth-child(4n){ margin-right: 0; } .portfolio-items-holder .grid_6{ width: 100% !important; margin-bottom: 2px; } .portfolio-items-holder .grid_4{ width: 100% !important; margin-bottom: 2px; } .portfolio-items-holder .grid_3{ width: 100% !important; margin-bottom: 2px; } .container.full .portfolio-items-holder .isotope-item{ width: 100%; margin-bottom: 2px; } .blog-posts.blog-post-small-image .post-info-container .date-category{ width: 100%; margin-bottom: 10px; } .blog-posts.blog-post-small-image .post-info-container .post-info{ padding-left: 0; } .blog-posts.blog-post-small-image li .post-media-container, .blog-posts.blog-post-small-image li .post-body, .blog-posts.blog-post-small-image li .post-media-container img{ width: 100%; } .blog-posts.blog-post-small-image li .post-body{ padding-left: 0; } .blog-posts.isotope.cols li.blog-post.isotope-item{ width: 100% !important; } #post-slider.nivoSlider{ min-height: 142px; } .blog-post.isotope-item iframe{ min-height: 142px; } .blog-posts.isotope.full li.blog-post.isotope-item{ width: 430px !important; } .post-body{ padding-left: 0; float: left; width: 100%; } #respond .name-container input, #respond .email-container input{ width: 100%; } .blog-posts.isotope.cols li.blog-post.isotope-item .post-body, .blog-posts.isotope.full li.blog-post.isotope-item .post-body{ float: none; } .grid_12.blog-posts .blog-post.isotope-item .post-media-container iframe{ min-height: 125px; } .blog-posts.isotope.full li.blog-post.isotope-item .nivoSlider{ min-height: 125px; } .map_canvas{ height: 300px; } .copyright-container p{ text-align: center; width: 100%; margin-bottom: 10px; } } @media only screen and (min-width: 480px) and (max-width: 767px){ .container{ max-width: 460px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_8, .grid_7, .grid_9, .grid_10, .grid_11, .grid_12{ float: left; width: 430px; } .page-content .row{ margin-bottom: 0px; } .page-content *[class*="grid_"]{ margin-bottom: 80px; } *[class*="grid_"] *[class*="grid_"]:last-child{ margin-bottom: 0; } *[class*="grid_"] *[class*="grid_"]{ margin-left: 0 !important; } #header, #top-bar{ width: 430px; } #logo{ width: 100%; max-width: 100%; } #nav-container2, #nav-container{ display: none; } .dl-menuwrapper{ display: block; margin-bottom: 20px; max-width: 220px; } .dl-menuwrapper li a:hover{ color: #fff !important; } .header-style-4 .social-links{ max-width: 200px; margin-top: 0; } .tp-caption.list-left , .tp-caption.list-right { display: none; } .grid_3 .numbers-counter li, .grid_4 .numbers-counter li, .grid_5 .numbers-counter li, .grid_6 .numbers-counter li, .grid_8 .numbers-counter li, .grid_7 .numbers-counter li, .grid_9 .numbers-counter li, .grid_12 .numbers-counter li{ width: 142px; height: 142px; } .grid_3 .numbers-counter li span, .grid_4 .numbers-counter li span, .grid_5 .numbers-counter li span, .grid_6 .numbers-counter li span, .grid_7 .numbers-counter li span, .grid_8 .numbers-counter li span, .grid_9 .numbers-counter li span, .grid_12 .numbers-counter li span{ padding-top: 35px; } .latest-posts li.post{ width: 100%; } .tabs li{ width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .tabs.vertical, .tab-content-wrap.vertical{ width: 100%; } .tab-content-wrap.vertical .tab-content{ padding-left: 0; padding-top: 30px; } .team-alternative li{ width: 214px; } .team-member-hover .team-member-info .position{ margin-bottom: 10px; } .team-member-hover .btn-medium{ left: 55px; } .team-member-hover .team-member-info h5{ padding-top: 30px; } .team-img-container .team-img-hover{ display: none; } .history-arrow-right, .history-arrow-left{ background-size: 170px 35px !important; } #page-title.page-title-2 .pt-title{ width: 100%; text-align: center; float: none; margin-bottom: 10px; } #page-title.page-title-2 .breadcrumbs{ float: none; display: table; margin: 0 auto; } .tabs.vertical.services-tabs, .tab-content-wrap.vertical.services-tab-content-wrap{ width: 100%; } .chart{ width: 51px; height: 51px; min-height: 120px; margin-bottom: 20px; } .skills-circular.big .chart{ width: 96px; height: 96px; } .skills-circular.big .percent{ width: 68px !important; height: 68px !important; font-size: 18px; } .skills-circular.big canvas{ height: 92px !important; width: 92px !important; } .skills-circular.big li{ margin-right: 20px; margin-left: 25px; } .widget.social-feed li:nth-child(6n){ margin-right: 0; } .widget.social-feed li:nth-child(4n){ margin-right: 1px; } .portfolio-items-holder .grid_6{ width: 100% !important; margin-bottom: 2px; } .portfolio-items-holder .grid_4{ width: 100% !important; margin-bottom: 2px; } .portfolio-items-holder .grid_3{ width: 100% !important; margin-bottom: 2px; } .container.full .portfolio-items-holder .isotope-item{ width: 100%; margin-bottom: 2px; } .blog-posts.blog-post-small-image li .post-media-container, .blog-posts.blog-post-small-image li .post-body, .blog-posts.blog-post-small-image li .post-media-container img{ width: 100%; } .blog-posts.blog-post-small-image li .post-body{ padding-left: 0; } .blog-posts.isotope.cols li.blog-post.isotope-item{ width: 430px !important; } #post-slider.nivoSlider{ min-height: 142px; } .blog-post.isotope-item iframe{ min-height: 142px; } .blog-posts.isotope.full li.blog-post.isotope-item{ width: 430px !important; } .post-body{ padding-left: 0; float: left; } .blog-posts.isotope.cols li.blog-post.isotope-item .post-body, .blog-posts.isotope.full li.blog-post.isotope-item .post-body{ float: none; } .grid_12.blog-posts .blog-post.isotope-item .post-media-container iframe{ min-height: 125px; } .blog-posts.isotope.full li.blog-post.isotope-item .nivoSlider{ min-height: 125px; } .map_canvas{ height: 300px; } .copyright-container p{ text-align: center; width: 100%; margin-bottom: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px){ .container { max-width: 756px; } .grid_1 { width: 33px !important; } .grid_2 { width: 96px !important; } .grid_3 { width: 159px !important; } .grid_4 { width: 222px !important; } .grid_5 { width: 285px !important; } .grid_6 { width: 348px !important; } .grid_7 { width: 411px !important; } .grid_8 { width: 474px !important; } .grid_9 { width: 537px !important; } .grid_10 { width: 600px !important; } .grid_11 { width: 663px !important; } .grid_12 { width: 726px !important; } #page-title .grid_8, #page-title .grid_4{ width: 100% !important; } #header, #top-bar{ width: 726px; } #logo{ width: 100%; max-width: 100%; } .header-style-4 .social-links{ max-width: 526px; } .header-style-4 #logo{ max-width: 170px; } #nav-container{ width: 656px; margin-left: 0; } #nav2, #nav{ float: left; } .header-style-4 #nav-container2 #nav2, .header-style-5 #nav-container2 #nav2, .header-style-4 #nav-container2 #nav, .header-style-5 #nav-container2 #nav, .header-style-4 #nav-container #nav, .header-style-5 #nav-container #nav{ max-width: 656px; } .header-style-5 #nav-container2, .header-style-5 #nav-container{ width: 100%; max-width: 100%; } .tp-caption.list-left p, .tp-caption.list-right p{ font-size: 14px !important; } .grid_3 .numbers-counter li{ width: 159px; height: 159px; } .grid_3 .numbers-counter li span{ padding-top: 45px; } .grid_4 .numbers-counter li{ width: 110px; height: 110px; } .grid_4 .numbers-counter li span{ padding-top: 25px; } .grid_5 .numbers-counter li{ width: 141px; height: 141px; } .grid_5 .numbers-counter li span{ padding-top: 35px; } .grid_6 .numbers-counter li{ width: 115px; height: 115px; } .grid_6 .numbers-counter li span{ padding-top: 27px; } .grid_7 .numbers-counter li{ width: 136px; height: 136px; } .grid_7 .numbers-counter li span{ padding-top: 32px; } .grid_8 .numbers-counter li{ width: 117px; height: 117px; } .grid_8 .numbers-counter li span{ padding-top: 28px; } .grid_9 .numbers-counter li{ width: 133px; height: 133px; } .grid_9 .numbers-counter li span{ padding-top: 30px; } .grid_12 .numbers-counter li{ width: 144px; height: 144px; } .grid_12 .numbers-counter li span{ padding-top: 37px; } .latest-posts li.post{ width: 159px; } .tabs li{ width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .tabs.vertical, .tab-content-wrap.vertical{ width: 100%; } .tab-content-wrap.vertical .tab-content{ padding-left: 0; padding-top: 30px; } .team-alternative li{ width: 173px; } .team-member-hover .team-member-info .position{ margin-bottom: 10px; } .team-member-hover .btn-medium{ left: 35px; } .team-member-hover .team-member-info h5{ padding-top: 20px; } .chart{ width: 51px; height: 51px; min-height: 120px; margin-bottom: 20px; } .skills-circular.big .chart{ width: 96px; height: 96px; } .skills-circular.big .percent{ width: 48px; height: 48px; font-size: 18px; } .skills-circular.big canvas{ height: 72px !important; width: 72px !important; } .skills-circular.big li{ margin-right: 0; margin-left: 25px; } .widget.social-feed li:nth-child(2n){ margin-right: 0; } .widget.social-feed li:nth-child(3n){ margin-right: 1px; } .portfolio-items-holder .grid_6{ width: 361px !important; } .portfolio-items-holder .grid_4{ width: 240px !important; } .portfolio-items-holder .grid_3{ width: 180px !important; } .portfolio-img-container figcaption .portfolio-item-like{ float: none; } .container.full .portfolio-items-holder .isotope-item{ width: 33%; } .blog-posts.blog-post-small-image .post-info-container .date-category{ width: 100%; margin-right: 0; margin-bottom: 10px; } .blog-posts.blog-post-small-image .post-info-container .post-info{ padding-left: 0; } .blog-posts.isotope.cols li.blog-post.isotope-item{ width: 100%; } #post-slider.nivoSlider{ min-height: 142px; } .blog-post.isotope-item iframe{ min-height: 142px; } .blog-posts.isotope.full li.blog-post.isotope-item{ width: 348px; } .grid_12.blog-posts .blog-post.isotope-item .post-media-container iframe{ min-height: 125px; } .blog-posts.isotope.full li.blog-post.isotope-item .nivoSlider{ min-height: 125px; } .map_canvas{ height: 300px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .container { max-width: 972px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11 { float: left; } .grid_1 { width: 51px; } .grid_2 { width: 132px; } .grid_3 { width: 213px; } .grid_4 { width: 294px; } .grid_5 { width: 375px; } .grid_6 { width: 456px; } .grid_7 { width: 537px; } .grid_8 { width: 618px; } .grid_9 { width: 699px; } .grid_10 { width: 780px; } .grid_11 { width: 861px; } .grid_12 { width: 942px; } #top-bar{ width: 942px; } .header-style-4 #nav-container #nav, .header-style-5 #nav-container #nav{ max-width: 872px; } .header-style-4 .social-links{ max-width: 742px; } #nav-container{ width: 702px; } .grid_3 .numbers-counter li{ width: 105px; height: 105px; } .grid_3 .numbers-counter li span{ padding-top: 15px; } .grid_4 .numbers-counter li{ width: 146px; height: 146px; } .grid_4 .numbers-counter li span{ padding-top: 35px; } .grid_5 .numbers-counter li{ width: 124px; height: 124px; } .grid_5 .numbers-counter li span{ padding-top: 23px; } .grid_6 .numbers-counter li{ width: 151px; height: 151px; } .grid_6 .numbers-counter li span{ padding-top: 37px; } .grid_7 .numbers-counter li{ width: 133px; height: 133px; } .grid_7 .numbers-counter li span{ padding-top: 31px; } .grid_8 .numbers-counter li{ width: 153px; height: 153px; } .grid_8 .numbers-counter li span{ padding-top: 38px; } .grid_9 .numbers-counter li{ width: 138px; height: 138px; } .grid_9 .numbers-counter li span{ padding-top: 34px; } .grid_12 .numbers-counter li{ width: 156px; height: 156px; } .grid_12 .numbers-counter li span{ padding-top: 40px; } .latest-posts li.post{ width: 213px; } .team-alternative li{ width: 227px; } .team-member-hover .btn-medium{ left: 65px; } .team-member-hover .team-member-info h5{ padding-top: 40px; } .chart{ width: 51px; height: 51px; } .skills-circular.big .chart{ width: 72px; height: 72px; } .skills-circular.big .percent{ width: 48px; height: 48px; font-size: 18px; } .skills-circular.big canvas{ height: 72px; width: 72px; } .widget.social-feed li:nth-child(4n){ margin-right: 1px; } .widget.social-feed li:nth-child(3n){ margin-right: 0; } .portfolio-items-holder .grid_6{ width: 470px; } .portfolio-items-holder .grid_4{ width: 312px; } .portfolio-items-holder .grid_3{ width: 234px; } .container.full .portfolio-items-holder .isotope-item{ width: 33%; } .blog-posts.isotope.cols li.blog-post.isotope-item{ width: 334px; } #post-slider.nivoSlider{ min-height: 142px; } .blog-post.isotope-item iframe{ min-height: 142px; } .blog-posts.isotope.full li.blog-post.isotope-item{ width: 294px; } .grid_12.blog-posts .blog-post.isotope-item .post-media-container iframe{ min-height: 125px; } .blog-posts.isotope.full li.blog-post.isotope-item .nivoSlider{ min-height: 125px; } .map_canvas{ height: 300px; } } @media (min-width: 1200px) { .container { max-width: 1200px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{ float: left; } .grid_1 { width: 70px; } .grid_2 { width: 170px; } .grid_3 { width: 270px; } .grid_4 { width: 370px; } .grid_5 { width: 470px; } .grid_6 { width: 570px; } .grid_7 { width: 670px; } .grid_8 { width: 100%; position: relative; } .grid_9 { width: 870px; } .grid_10 { width: 970px; } .grid_11 { width: 1070px; } .grid_12 { width: 1170px; } } @media (min-width: 1340px){ .container.full .portfolio-items-holder .isotope-item{ width: 16.5%; } } @media screen and (max-width: 1199px) { #nav2>ul>li, #nav>ul>li { max-width: 100px; } #nav2>ul>li a, #nav>ul>li a{ font-size: .9em; } } @media screen and (max-width: 1000px) { #header-wrapper.static{ position: relative; } body{ padding-top: 0px; } #nav2>ul>li a, #nav>ul>li a{ font-size: 1em; } .serv-nav{ width: 950px!important; } #nav2>ul>li, #nav>ul>li { max-width: 115px; } .buttons{ display: none!important; } } @media screen and (max-width: 600px) { h1 { font-size: 180%; text-align: center; } .footer-widget-container li.widget:last-child { margin-bottom: 30px; } .skills-circular { text-align: center; } .skills-circular.big .chart { display: inline-block; float: none; margin: 0 5% -20px; } .pt-title h1 { font-size: 180%; } .post-body .img { float: none !important; } .scroll-up { right: 0; } .process-box .img-container { position: static; text-align: center; float: none; margin-top: 0; padding-bottom: 15px; } .grid_3:nth-child(4) .process-box p { margin-left: 0; } #header, #top-bar { width: 90%; } } #editLinksNet { display: none; } #nav-container.main-menu{ width: auto; } /* Document : retina background images */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5){ .search-submit{ background: url('../img/search_402x.png') no-repeat; background-size: 40px; } .accordion.style-2 .title{ background-image: url('../img/accordion-closed2_402x.png'); background-size: 25px; } .accordion.style-2 .title.active{ background-image: url('../img/accordion-opened2_402x.png'); background-size: 25px; } .information-boxes .close{ background: url('../img/close_402x.png') no-repeat; background-size: 20px; } .infobox p{ background: url('../img/info-box_402x.png') no-repeat 0 center; background-size: 20px; } .warning-box p{ background: url('../img/warning-box_402x.png') no-repeat 0 center; background-size: 20px; } .success-box p{ background: url('../img/success-box_402x.png') no-repeat 0 center; background-size: 20px; } .error-box p{ background: url('../img/error-box_402x.png') no-repeat 0 center; background-size: 20px; } .services-overview li{ background: url('../img/checkmark_402x.png') no-repeat 0 0; background-size: 41px; } .carousel-nav li a[class^="c_prev"]{ background-image: url('../img/c_prev_402x.png'); background-size: 30px; } .carousel-nav li a[class^="c_next"]{ background-image: url('../img/c_next_402x.png'); background-size: 30px; } .comment .comment-reply-link{ background: url('../img/icon-reply_402x.png') no-repeat 0 center; background-size: 14px; } .widget li{ background: url('../img/aside-arrow_402x.png') no-repeat 0 12px; background-size: 4px 7px; } .widget_search .search-submit{ background: url('../img/aside-search_402x.png') center center no-repeat; background-size: 13px; } .widget_recent_comments li{ background: url('../img/icon-comment_402x.png') no-repeat 0 center; background-size: 40px; } #tweet-sroll-wrapper.widget li{ background: url('../img/twitter_402x.png') no-repeat 0 5px; background-size: 24px 17px; } .scroll-up{ background: url('../img/to-top_402x.png') no-repeat; background-size: 40px; } /* FROM COLOR STYLE.CSS ------------------------------------------------------------------------- */ .carousel-nav .c_next:hover{ background-image: url('../img/c_next_hover_402x.png'); background-size: 30px; } .carousel-nav .c_prev:hover{ background-image: url('../img/c_prev_hover_402x.png'); background-size: 30px; } .accordion .title{ background-image: url('../img/accordion-closed_402x.png'); background-size: 25px; } .accordion .title.active{ background-image: url('../img/accordion-opened_402x.png'); background-size: 25px; } .history-arrow-right{ background: url('../img/timeline-right_402x.png') no-repeat center center; background-size: 170px 35px; } .history-arrow-left{ background: url('../img/timeline-left_402x.png') no-repeat center center; background-size: 170px 35px; } /* FOR NIVO SLIDER ------------------------------------------------------------------------- */ .nivoSlider{ background: #f6f6f6; background-size: 48px; } .nivo-prevNav { background-image: url('../img/nivo-left_402x.png'); background-size: 17px 28px; } .nivo-nextNav{ background-image: url('../img/nivo-right_402x.png'); background-size: 17px 28px; } .nivo-prevNav:hover{ background-image: url('../img/nivo-left-hover_402x.png'); background-size: 17px 28px; } .nivo-nextNav:hover{ background-image: url('../img/nivo-right-hover_402x.png'); background-size: 17px 28px; } } .bnr{width:240px; height:400px; border: none;} .post-body .news-text { font-weight: normal !important; text-align: left !important; } .post-body .news-text * { font-size: 100%; margin: 0 !important; padding: 0; text-align: left; } .post-body .news-text strong { font-weight: normal !important; } .article-date { display: inline-block; font-size: 110%; font-weight: bold; padding: 10px 15px; background: #81cfbe; position: absolute; top: -10px;left: -10px; box-shadow: 3px 3px 3px rgba(0,0,0,.6); } .pic-modal { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 99999999; text-align: center; } .overlay-fon { background: rgba(0,0,0,.7); width: 100%; height: 100%; cursor: pointer; } .pic-serv { width: auto; position: fixed; margin:auto; top: 0; left: 0; right: 0; bottom: 0; width: 750px; height: 530px; } form#banner-form { position: absolute; bottom: 130px; right: 0; width: 39%; padding: 0 8%; } #banner-form #phone { border: 2px solid #fff; width: auto; width: 100%; background: none; color: #fff; font-size: 150%; padding: 10px 15px; box-sizing: border-box; border-radius: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,.7); } #banner-form #phone.error { color: #fff !important; } #banner-form .btn-medium { float: none; width: 100%; background: #fff; border: 2px solid #212e3f; color: #212e3f; margin-top: 10px; cursor: pointer; border-radius: 10px; font-size: 120%; font-weight: bold; box-shadow: 2px 2px 5px rgba(0,0,0,.7); } #banner-form .btn-medium:hover { color: #212e3f !important; } #banner-form input::-webkit-input-placeholder {color: #fff;} #banner-form input::-moz-placeholder {color: #fff;} #banner-form input.error::-webkit-input-placeholder {color: #A52A2A;} #banner-form input.error::-moz-placeholder {color: #A52A2A;} /* banner ликвидации */ #openModal2 #orderliq { display: block; } .modalDialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.4); z-index: 99999999; -webkit-transition: opacity .4s ease-in; -moz-transition: opacity .4s ease-in; transition: opacity .4s ease-in; display: none; cursor:pointer; } .modalDialog:target { display: block; pointer-events: auto; } .modalDialog > div { width: 234px; position: relative; margin: 15% auto; cursor: default; } .close1 { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; cursor:pointer; } .close1:hover {background: #41735c;} /* /banner ликвидации */ .mmix { float:right; } .mmix a { display: inline-block; float: right; } .mmix p { display: inline-block; width: auto; position: relative; vertical-align: middle; text-align: left; left: 25px; margin: 0 0 -30px 0; float:left; text-transform: none; } .mmix img { display: inline-block; vertical-align: middle; width: 75px; } .attention { border-left: 4px solid #c00; padding: 3px 10px 0 10px; margin-left: 35px; position: relative; } .attention:before { content: '!'; font-size: 110px; font-style: normal; position: absolute; font-family: arial; color: #c00; left: -45px; top: -7px; height: 100%; line-height: 100%; } .mainpage-capt { text-align: center; line-height: 1.1; } .contacts-tel:after { content: ', '; } .contacts-tel:last-child:after { content: ''; } .drop-wrap { position: relative; } .drop-block { display: none; } #top-bar-wrapper .drop-block { position: absolute; right: -10px; top: 100%; min-width: 100%; padding: 12px 10px 10px; z-index: 999999; } #top-bar-wrapper .drop-block > ul { position: relative; padding: 5px; background: #fff; box-shadow: 3px 3px 12px rgba(0,0,0,.6); } #top-bar-wrapper .drop-block > ul:before { content: ''; color: #fff; display: block; position: absolute; top: -14px; right: 10px; transform: scaleX(1.9); font-size: 15px; text-shadow: 1px 1px 5px rgba(0,0,0,.5); z-index: -1; } #top-bar-wrapper .drop-block > ul:after { content: ''; color: #fff; display: block; position: absolute; top: -14px; right: 10px; transform: scaleX(1.9); font-size: 15px; z-index: 1; } #top-bar-wrapper .drop-block > ul a:hover { text-decoration: underline; } .drop-btn { cursor: pointer; } .drop-btn ::selection { background: transparent; color: inherit; } .drop-btn ::-moz-selection { background: transparent; color: inherit; } .phone .drop-btn { position: relative; } .phone .drop-btn span { font-weight: bold; position: relative; padding-right: 12px; white-space: nowrap; } .phone .drop-btn span:after { content: ''; position: absolute; top: 50%; right: 0; margin-top: -2px; border-top: 4px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; } #top-bar-wrapper .phone .drop-block { right: -18px; margin-top: -4px; text-align: left; } #top-bar-wrapper .phone .drop-block > ul { padding: 15px 20px 3px 25px; } .phone .drop-block ul li { margin-bottom: 10px; } .phone .drop-block ul span, .phone .drop-block ul a { white-space: nowrap; position: relative; min-height: 18px; line-height: 18px; padding-left: 30px; font-size: 18px; color: #333; } .mess-icon, .phone .drop-block ul span i, .phone .drop-block ul a i { width: 18px; height: 18px; position: absolute; left: 0; top: 50%; margin-top: -9px; background-position: center; color: #005C48; } .messages-wrap { text-align: center; } #top-bar-wrapper .messages-wrap a { margin: 10px; } .messages-wrap a { display: inline-block; padding-left: 0; } #top-bar-wrapper .mess-icon { width: 35px; height: 35px; } footer .messages-wrap { text-align: left; padding-top: 10px; } footer .messages-wrap a + a { margin-left: 10px; } .mess-icon { width: 30px !important; height: 30px !important; position: static; display: inline-block; background-size: contain !important; } .phone .tel { background: url(../img/telephone-icon.png) center no-repeat; } .phone .mail { background: url(../img/email-icon.png) center no-repeat; } .phone .worktime { background: url(../img/worktime.png) center no-repeat; } .mess-icon.icon-viber { background: url(../img/viber.png) center no-repeat; } .mess-icon.icon-whatsapp { background: url(../img/whatsapp.png) center no-repeat; } .mess-icon.icon-telegram { background: url(../img/telegram.png) center no-repeat; } .mess-icon.icon-skype { background: url(../img/skype.png) center no-repeat; } .lang .drop-btn span { display: block; width: 32px; height: 32px; line-height: 32px; text-align: center; border: 1px solid #005C48; border-radius: 50%; text-transform: uppercase; color: #005C48; font-size: 87.5%; margin-right: 13px; } .lang .drop-btn { position: relative; } .lang .drop-btn:after { content: ''; position: absolute; top: 50%; right: 0; margin-top: -2px; border-top: 4px solid #005C48; border-left: 4px solid transparent; border-right: 4px solid transparent; } .lang .drop-block { text-align: center; margin-top: -6px; } #top-bar-wrapper .lang .drop-block > ul { padding: 10px 10px 5px; } .lang .drop-block ul li { margin-bottom: 5px; } .lang .drop-block a { font-size: 14px; color: #333; text-transform: uppercase; } .header-col-1 { width: 62.3%; float: left; } .header-col-2 { width: 21.4%; float: left; text-align: center; } .header-col-3 { width: 16.3%; float: left; } .star-rating { float: left; margin: 9px 0; } .breadcrumbs-wrap { padding-top: 21px; } .breadcrumbs-wrap .container { padding: 0 15px; box-sizing: border-box; } .breadcrumbs-wrap .container:after { content: ''; display: block; clear: both; } .breadcrumbs { float: right; padding: 14px 25px 13px 30px; background: #e0f2ee; position: relative; } .breadcrumbs:after { content: ''; width: 2000px; position: absolute; top: 0; bottom: 0; left: 100%; background: #e0f2ee; } .wrapper { overflow: hidden; } .pt-title { padding: 0; text-align: center; } .pt-title h1 { font: bold 28px "Open Sans", Arial, sans-serif; padding: 14px 85px; background: rgb(0,160,125); background: rgba(0,160,125,.3); display: inline-block; margin: 0 40px 18px !important; -webkit-transform: skew(-23deg); -moz-transform: skew(-23deg); -ms-transform: skew(-23deg); -o-transform: skew(-23); transform: skew(-23deg); } .hscew { display: block; color: #000; -webkit-transform: skew(23deg); -moz-transform: skew(23deg); -ms-transform: skew(23deg); -o-transform: skew(23); transform: skew(23deg); } #dl-menu2 { margin-top: -50px; text-align: left; margin-bottom: 0; } #dl-menu { top: 10px; } .tbl { display: table; } .tbl-row { display: table-row; } .tbl .cell { display: table-cell; vertical-align: middle; float: none; padding: 0 15px; } .serv-info { border: 4px solid rgb(118,222,199); border: 4px solid rgba(118,222,199,.83); background: #fff; background: rgba(255,255,255,.83); padding: 22px 25px 0 30px; color: #000; } .serv-info .capt { color: #000; font: 18px "Open Sans", Arial, sans-serif; margin-bottom: 8px; } .serv-info ul { padding-left: 5px; padding-bottom: 5px; margin-bottom: 20px; border-bottom: 2px solid #f5f5f5; } .serv-info ul li { position: relative; min-height: 8px; padding-left: 27px; color: #000; font-size: 16px; margin-bottom: 7px; } .serv-info ul li:after { content: ''; width: 11px; height: 8px; position: absolute; top: .5em; left: 0; background: url(../img/check.png) center no-repeat; } .file-wrap { box-shadow: 6px 6px 10px rgba(0,0,0,.7); width: 90%; margin: auto; } .file-wrap img { width: 100%; height: auto; display: block; } .rd-regions-serv { background: #f5f5f5; padding: 18px 25px 20px; width: auto; } .rd-regions-serv a { border-bottom: 1px dashed #005C48; color: #005C48; } form input.fr-name { display: none !important; } .jGrowl-close { float: right; border: none; background: transparent; font-size: 200%; color: #fff; } @media (max-width:1219px) { #logo { max-width: 150px; position: relative; z-index: 999999; } #logo img { height: auto !important; width: 100% !important; } #nav2 .navlevel1 { margin: 0 5px; } .phone { margin: 10px 5px; } .lang { margin: 8px 8px 0 0; } #top-bar .social-links li a { width: 25px; } .header-col-1 { width: 59%; } .header-col-2 { width: 22%; } .header-col-3 { width: 19%; } } @media (max-width:1199px) { .search-submit { margin-top: -4px; } #m_search { margin-top: -20px; } .file-wrap { width: 100%; } } @media (max-width:1000px) { .header-col-1 { width: 100%; } .header-col-2 { width: 50%; } .header-col-3 { width: 50%; } #search { float: none; right: 15px; } } @media (max-width:991px) { #page-title .tbl, #page-title .tbl-row, #page-title .tbl .cell { display: block; box-sizing: border-box; padding: 0; width: 100% !important; margin: 0; } #page-title .tbl .cell { } .serv-info { margin-bottom: 30px; } } @media (max-width:767px) { #top-bar-wrapper .phone .drop-block { right: auto; left: -18px; } .pt-title h1 { font-size: 22px; padding: 14px 35px; margin: 0 0 18px !important; } .links { text-align: center; } .links a { width: 90%; } .breadcrumbs { padding: 14px 20px; } .breadcrumbs:before { content: ''; width: 2000px; position: absolute; top: 0; bottom: 0; right: 100%; background: #e0f2ee; } .header-col-1 { text-align: center; } #logo { display: inline-block; width: auto; float: none; } #top-bar { position: relative; } #top-bar .social-links { position: absolute; top: 0; right: 0; margin-right: 0; z-index: 999999; } #top-bar-wrapper .phone .drop-block > ul { padding: 15px 15px 3px; } .phone { margin-left: 15px; } .fancybox-overlay { z-index: 1; } } .ya-share2 { position: fixed; left: 0; top: 35%; z-index: 99999; } .ya-share2__title { display: none !important; } .contacts-content { padding-top: 40px; clear: both; } .big-modal .input-style1 { width: 100%; box-sizing: border-box; } .drop-item2 { margin-bottom: 10px; text-align: left; } .drop-btn2 { cursor: pointer; padding: 13px 40px 13px 15px; color: #005C48; font-size: 14px; border: 2px solid #005C48; text-transform: uppercase; position: relative; user-select: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .drop-btn2:hover { color: #000; } .drop-btn2.active { background: #d6f5ee; color: #005C48; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .drop-block2 { display: none; border: 1px solid #b5b5b5; border-top: none; padding: 25px 15px 15px; line-height: 1.2; margin-top: -10px; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } .drop-block2 .check-style1 { float: right; } #strojCalc .drop-block2 label:hover { background: #eee; } .drop-block2 .stroj-span { float: left; padding-right: 10px; } .drop-btn2:before { content: ''; position: absolute; top: 50%; margin-top: -9px; right: 18px; width: 2px; height: 18px; background: #005C48; transition: all .3s ease-in-out; } .drop-btn2:after { content: ''; position: absolute; top: 50%; margin-top: -1px; right: 10px; width: 18px; height: 2px; background: #005C48; transition: all .2s ease-in-out; } .drop-btn2.active:before { transform: rotate(90deg); } .drop-btn2.active:after { transform: rotate(180deg); } .drop-wrap > .drop-btn2 { } .drop-wrap > .drop-btn2:before { display: none; } .drop-wrap > .drop-btn2:after { display: none; } .drop-wrap > .drop-btn2.active { background: #005C48; color: #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .drop-wrap > .drop-block2 { border: none; padding: 50px 15px 50px 15px; margin-top: -60px; } .newcheck-wrap { position: relative; display: block; overflow: hidden; transition: .2s; padding: 5px 30px 5px 5px; text-align: left; } .check-style1 { display: none; } .new-check-style1 { border: 2px solid #005C48; position: absolute; right: 5px; top: 50%; margin-top: -8px; width: 10px; height: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .check-style1:checked + .new-check-style1 { background: #005C48; } #strojCalc .stroj-span { padding-right: 10px; } .stroj-category { text-align: center; } #strojCalc .capt { font-size: 150%; margin-bottom: 10px; margin-top: 30px; text-align: center; } #strojCalc .capt .stroj-span { float: none; } .stroj-category-inn { display: inline-block; } .radio-style { position: relative; padding-right: 15px; display: block; padding: 5px 35px 5px 20px; vertical-align: middle; } .radio-style input { display: none; } .radio-style span { width: 10px; height: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #005C48; position: absolute; top: 50%; right: 10px; margin-top: -7px; } .radio-style input:checked + span { background: #005C48; } .stroj-form-inn { width: 70%; margin: auto; } @media (max-width: 980px) { body,p,a { font: 15px 'Open Sans',Arial,sans-serif!important; line-height:22px; } .grid_7.img-wrap,.page-content.parallax-1{ display:none; } .stroj-form-inn { width: 100%; } .contacts-tel{ margin-top: 11px; display: inline-block; } .footer-breadcrumbs a { margin-bottom:11px; } .header-col-3{ margin-bottom:11px; } } .btn-style1 { display: block; float: none; border: 2px solid #005C48; font-size: 20px; height: 50px; line-height: 46px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin-bottom: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; background: #005C48; color: #fff; padding: 0 20px; } .error-msg { font-size: 150%; color: #c00; margin-top: 25px; margin-bottom: -15px; border: 1px solid #c00; padding: 10px 15px; text-align: center; } .news-sidebar { padding-left: 15px; } .news-sidebar li { padding-bottom: 15px; } .news-sidebar li a { transition: .2s; display: block; } .news-sidebar li a:hover { background: #eaeaea; } .news-sidebar .img-wrap { position: relative; border: 2px solid rgba(0, 0, 0, 0.7); } .news-sidebar .img-wrap span { position: absolute; bottom: 0; right: 0; display: inline-block; padding: 3px 10px; background: rgba(0, 0, 0, 0.7); color: #fff; } .news-sidebar .capt { font: 12px "Open Sans", Arial, sans-serif; color: #39414B; padding: 5px 0; } .mrd-p { font: 18px 'Raleway', Arial, sans-serif; line-height: 1.3; } .testimonials-wrapp { position: relative; overflow: hidden; } .testimonials-pagi > div { position: absolute; top: 0; bottom: 0; cursor: pointer; padding: 0 10px; opacity: .3; transition: background-color .2s; } .testimonials-pagi > div:hover { background-color: #000; } #testimonials-prev { left: 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABpUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////z8/FpaWhkZGdnZ2QYGBrCwsFRUVOrq6i0tLXh4eDAwMJ9mrAQAAAAWdFJOUwDTA/qCeO3kqpUSCrHzkFdUHxu0OTZFpmNmAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABH0lEQVQ4T42V7XqDIAxGQUVR27W2G350s9vu/yIH8rYDCX1y/pSQ8wjSEEVE8aG0rMuyllq9F5hMuVSNCWiqCxIxXVvCeFK2HZIBpxrZiPqE9IPiDZmENtpqf8A0waGHZCleeMZc/5+ZXdfTQhNnTGQ5e6+PTo+i8dtUCF9QOa87IgpZPjHwHN3BVwhClttXbLpHSowDlts4xqYUYsAwwHnj+IPIMxCv4r3d2kpojJ6QntHJFmnPbnJXhBnPGIFfkPX24jo5cUYUsl96duZEmMnLZEyZHg9tauLASVNRf6E3V0SegSwKZ96/EWzYoiDLbJ5ibyszsnDXXww8W+GyrwL/crGvK78B8FsKu0nx256F2Ugt3NZsYTZ7R/bzIcQfNY5rbP/lslAAAAAASUVORK5CYII=') center 160px no-repeat; } #testimonials-next { right: 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABpUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////z8/FpaWhkZGdnZ2QYGBrCwsFRUVOrq6i0tLXh4eDAwMJ9mrAQAAAAWdFJOUwDTA/qCeO3kqpUSCrHzkFdUHxu0OTZFpmNmAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABG0lEQVQ4T42V6XaEIAxGUcR91rajts7W93/IBvmmJRp6cn8Fcg9ihGgY+burs9LaMqvdR47JLeeiukRUxRkJTttYGL/YpkUy4lAiyygPSL/IG2Q27NlWux7TAn0HicjfMCnS/62ZfG5gD80cMZHkGLyOVU+iCtssMPwH5712h1Hg+4YgZucLzxd83McJYUxBYoZ44XEfBsnMjDkhDNzGQTZPxiECU8J0pkb0ImHWfIse2cwMggjRtIJ4mUgcxlU9BXG+evHrE0OwFWXPbl5G9uhlVuVJeFQeXvCURwXnn/CZ8OgT8k36FSWPDsXqmM1XyVuO2ergzpK3HFz1VdBfLvV11TcAfUtRNyl92yOUjZTQtmZC2ew9yd+HMT8lCmtskSI4DQAAAABJRU5ErkJggg==') center 160px no-repeat; } .mainpage-form-wrap { margin: 0; clear: both; padding-top: 20px; } .mainpage-form-wrap .img-wrap img { width: 100%; display: block; } .mainpage-form-wrap form { text-align: center; padding: 55px 0 45px; } .mainpage-form-wrap form textarea, .mainpage-form-wrap form input:not([type="submit"]) { display: inline-block; width: 80%; } .mainpage-form-wrap form .btn-medium { float: none; } .no-bdb { border-bottom: none !important; } .liqpay_capt { font: italic 20px 'Open Sans', Arial, sans-serif; float: left; width: auto; } .likpay-btn { float: right; display: inline-block; border: 2px solid #005C48; color: #10541a; font-size: 20px; line-height: 35px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #005C48; color: #fff; padding: 0 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .likpay-btn:hover { color: #005C48 !important; background-color: #fff; } .vacancy-block { display: inline-block; vertical-align: top; width: 48.6%; margin: 0 .5%; } .vacancy-block a { display: block; text-align: center; box-sizing: border-box; margin-bottom: 40px; font-size: 110%; border: 1px solid #005C48; padding: 10px 15px; color: #113040; min-height: 145px; } .vacancy-block a .capt { display: inline-block; border-bottom: 1px solid #005C48; padding-bottom: 5px; margin-bottom: 10px; text-transform: uppercase; font-size: 125%; } .vacancy-block a .dscr { font-size: 80%; display: block; } .new-window { position: relative; padding-right: 19px; } .new-window:after { content: ''; width: 16px; height: 16px; position: absolute; right: 0; top: 0; bottom: 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAARVBMVEVHcEwAoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH0AoH3J0SsPAAAAFnRSTlMAmF5iWPuUSESw7iWf1GqNTx2HLs3HCniqxwAAAGhJREFUKM+90UkOgCAQRNEWmacEVO5/VGXoSJCl+nfUI2wA+CqfSu1krKoBBCllZAju4LVyIiwiJNk9RhgVM7h2mEHeZ7DmHYIfoe53COOOQNq+qAG2dv8B2L+guejbLQLVqc+Zl3//BCw0BjKz5BH1AAAAAElFTkSuQmCC') center center no-repeat; -webkit-background-size: contain; background-size: contain; } .sidebar-links a.green { height: auto !important; line-height: 1.2 !important; padding: 10px; width: 100%; } .article-waypoint { padding: 25px 0 15px; } .article-waypoint li { padding-bottom: 10px; } .article-waypoint li a { font-size: 16px; display: inline-block; color:#000; } .article-waypoint li.active a { color: #000; } .article-capt-sidebar a { font-weight: bold; } .article-capt-sidebar-inn { padding-left: 15px; font-size: 15px; } .order-block{ padding:0; } .order-block.links{ margin:2rem 0; } .order-block .link{ display:inline-block; } .order-block a{ display: inline-block; margin:1rem; float: none; border: 2px solid #005C48; color: #10541a; font-size: 12px; line-height: 30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding: 0 17px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; background: #fff; } .order-block a:hover{ background:#005C48; color:#fff!important; } .ank-row{ width:50%; float:left; display:flex; margin-bottom:.5rem; height:30px; margin-top:.5rem; font-family:'Roboto Condensed', sans-serif; } .ank-row label{ padding-right:1rem; display:flex; justify-content:center; align-items:center; } .ank-row h4{ float: left; width: 100%; text-align: center; } .anket_form button{ margin:1rem; padding:.5rem; font-family: 'Roboto Condensed', sans-serif; background: #005C48;/*#00a07d*/ border-radius: 5px; color:#fff; text-transform:uppercase; cursor:pointer; } .ms_accordeon { padding: 20px 0 40px; } .faq-drop-item { margin-top: 20px; } .faq-drop-btn { cursor: pointer; padding: 10px 35px 10px 10px; color: #005C48; font-size: 14px; border: 1px solid #005C48; text-transform: uppercase; position: relative; user-select: none; font-weight: bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 0; } .faq-drop-btn i { position: absolute; top: 50%; right: 15px; margin-top: -.6em; font-size: 1.2em; } .faq-drop-block { display: none; border: 1px solid #005C48; border-top: none; padding: 15px; line-height: 1.2; } .faq-drop-btn.active { background-color: #005C48; color: #fff; } #comment-form label { display: block; margin-bottom: 15px; } #comment-form .wpcf7-text, #comment-form .wpcf7-textarea { width: 100%; font: 14px Arial; } #comment-form .wpcf7-text { width: 100%; } #comment-form .wpcf7-textarea { height: 160px; min-height: 60px; resize: vertical; } #comments-wrapper ol { padding-left: 0; } #comments-wrapper ol ol { padding-left: 30px; } #comments-wrapper .comment { float: none; } #comments-wrapper .img-wrap { width: 50px; height: 50px; float: left; margin-right: 20px; } #comments-wrapper .content { padding-left: 70px; position: relative; } #comments-wrapper .comment-top { min-height: 50px; } #comments-wrapper .comment-top > span { display: block; } #comments-wrapper .comment-top .name { font-size: 20px; } #comments-wrapper .comment-top .date { color: #969696; font-size: 12px; } #comments-wrapper .comment-text { margin: 15px 0; } #comments-wrapper .comment-reply { position: absolute; right: 0; top: 0; } #comments-wrapper .comment-reply a { text-decoration: underline; } #comment-new-link .comment_btn { padding: 15px 25px; float: none; display: inline-block; } #comment-new-link .comment_btn:hover { color: #fff !important; } .mt-20 { margin-top: 20px; } #comment-box .h2 { margin-top: 40px; border-top: 1px solid #ddd; padding-top: 25px; } .youtube-channel { border: 3px solid #8de4d0; text-align: center; } .youtube-channel a { display: table; width: 100%; vertical-align: middle; color: #000; font-size: 18px; } .youtube-channel .table-cell { display: table-cell; vertical-align: middle; } .youtube-channel .table-cell:first-child { padding: 5px 5px; } .youtube-channel .img-wrap { width: 32%; } .youtube-video { text-align: center; margin: 20px 0; } .youtube-video iframe { max-width: 100% !important; } .responsible-employee { padding-bottom: 40px; } .responsible-employee .img-wrap { position: relative; } .responsible-employee img { } .responsible-employee .pl { background-color: #005C48; padding: 15px 10px 10px; color: #fff; } .responsible-employee .pl p { color: #fff; margin: 0; } .author-name { font-weight: bold; font-size: 150%; text-align: center; } .author-post { text-align: center; font-size: 110%; } .author-social-networks { text-align: center; position: absolute; bottom: 0; left: 0; right: 0; background-color: #000; background-color: rgba(0,0,0,.8); padding: 10px; line-height: 1; opacity: .5; transition: .15s; } .responsible-employee:hover .author-social-networks { opacity: 1; } .author-social-networks li { display: inline-block; padding: 0 10px; } .author-social-networks li a { display: block; line-height: 1; } .author-social-networks li svg { width: 20px; height: 20px; display: block; transition: .15s; } .author-social-networks li svg:hover { transform: scale(1.1); } .responsible-employee:hover li svg { width: 30px; height: 30px; } /* banner-benef block */ .banner-benef { text-align: center; background: #fed501; transition: .2s; color: #025abb; } .banner-benef .text.f_out { display: none; } .banner-benef:hover { background: #025abb; color: #fed501; } .banner-benef:hover .text { display: none; } .banner-benef:hover .f_out { display: block; } .banner-benef .text { padding: 12px 15px; font-size: 105%; display: block; font-weight: bold; } body { padding-top: 157px; } @media screen and (max-width: 1000px) { body { padding-top: 0px; } } @media screen and (max-width: 980px) { .file-wrap{ display:none; } } @media (max-width:768px) { .banner-benef .text {font-size: 95%;} } .calc-temp .serv-info li:nth-child(3) { display: none; }