@charset "utf-8"; /*--------------------------------------------------- Project: MARTIS DRUPAL THEME ---------------------------------------------------*/ /*---------------------------------------------------*/ /* GENERAL /*---------------------------------------------------*/ html, body { margin: 0; padding: 0; } body { font-family: 'Muli', sans-serif; font-size: 14px; font-weight: normal; font-style: normal; color: #444444; background-color: #ffffff; } p { margin: 0 0 15px 0; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color: #333333; margin-top: 0; font-weight: 600; } h1, .h1 { font-size: 35px; } h2, .h2 { font-size: 30px; } h3, .h3 { font-size: 24px; } h4, .h4 { font-size: 18px; } h5, .h5 { font-size: 15px; } img { max-width: 100%; height: auto; } a { color: #333333; } a, a:hover, a:focus, a:visited { text-decoration: none; outline: none; } ol, ul { padding: 0; margin-bottom: 0; list-style-position: inside; } .clearfix { clear: left; } .nav>li>a { padding: 0; } /* FIELD */ .field-label { font-weight: 700; color: #2a2a2a; } .field-label-inline .field-label, .field-label-inline .field-item { display: inline-block; } .field-label-inline .field-label { float: left; margin-right: 7px; } .field-label-inline .field-label:after { content: ":"; margin-left: 2px; } details > .details-wrapper { padding: 0.5em 1.5em; } /* PROFILE */ .profile > div { padding-right: 5px; display: inline-block; vertical-align: top; } .profile h4.label { color: #333333; display: block; text-align: left; margin-bottom: 5px; } /*---------------------------------------------------*/ /* LAYOUT /*---------------------------------------------------*/ .wrapper { padding: 0; margin: 0 auto; margin-bottom: -1px; display: block; position: relative; transition: all 0.3s; -webkit-transition: all 0.3s; } .layout-wrap { position: relative; } #page, .container-wrap { margin: 0 auto; } .region, .container-wrap { width: 100%; } .page-wrapper, .content-widget { padding: 0; padding-top: 30px; } .page-wrapper { padding-top: 20px; } .contextual-region { max-width: 100%; } /*---------------------------------------------------*/ /* BLOCK /*---------------------------------------------------*/ .block { position: relative; background-size: cover; } .page-wrapper .block, .content-widget .block { margin-top: 0; margin-bottom: 35px; padding-bottom: 1px; } .page-wrapper .main-content .block:first-child { padding-top: 30px; } .page-wrapper .main-content .block:last-child, .content-widget .block:last-child { margin-bottom: 40px; } .block-core, .page-wrapper .block-core, .block-system, .page-wrapper .block-system { margin: 0; padding: 0; } .page-wrapper .block-local-actions-block { margin-bottom: 35px; } .header .block { vertical-align: middle; } .header .block, .slide-block { margin: 0; } .content-wide .block { margin: 0; padding-top: 45px; padding-bottom: 45px; } .footer-widget .block { margin: 0; } .block-help { background-color: #e6e8ef; padding: 15px 20px 0 20px !important; margin: 0 0 15px !important; color: #2d4688; border: 1px solid #c8d3ee; border-color: #c8d3ee #c8d3ee #c8d3ee transparent; box-shadow: -8px 0 0 #2d4688; } .block.slide-block { padding-top: 0 !important; padding-bottom: 0 !important; } .content-wide .container-wrap { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .content-wide .fullwidth .container-wrap { max-width: 100% !important; padding: 0; } .post-content { position: relative; } /*---------------------------------------------------*/ /* BLOCK TITLE /*---------------------------------------------------*/ .block .block-title-wrap { position: relative; width: 100%; max-width: 1220px; margin-right: auto; margin-left: auto; margin-bottom: 35px; } .block .block-title-content { position: relative; max-width: 560px; } .content-layout .block .row.block-title-wrap { margin-right: 0; margin-left: 0; } .block-title { position: relative; margin-top: 0; margin-bottom: 10px; font-size: 30px; letter-spacing: -1px; } .sidebar .block-title, #footer .block-title { font-size: 18px; } .block-title-wrap .block-subtitle { font-weight: 300; /*letter-spacing: 1px;*/ opacity: 0.7; display: inline-block; display: block; margin-bottom: 0; margin-top: 0; } .sidebar .block-title-wrap { margin-bottom: 25px; } #footer .block-title-wrap { margin: 0; margin-bottom: 20px; } .title-light .block-title { color: #ffffff; } .title-light .block-subtitle { color: #f0f0f0; } .fullwidth .block-title-wrap { padding-right: 15px; padding-left: 15px; } /* BLOCK TITLE STYLE */ .block-title-2 .block-title-wrap .block-subtitle { margin-bottom: 15px; } /* BLOCK CENTER TITLE */ .title-center .block-title, .block-title-center .block-title-wrap { text-align: center; } .block-title-center .block-title-content, .text-center .block-title-content { margin-left: auto; margin-right: auto; } /* BLOCK RIGHT TITLE */ .block-title-right .block-title-wrap { text-align: right; } .block-title-right .block-subtitle { max-width: 100%; } /*---------------------------------------------------*/ /* PAGE TITLE /*---------------------------------------------------*/ #page-title { padding: 15px 0; margin-top: 0; margin-bottom: 40px; position: relative; /*background-color: #f7f7f7;*/ border-bottom: 1px solid rgba(0,0,0,0.02); } #page-title .container { display: flex; } #page-title h1 { font-size: 20px; display: block; margin-bottom: 0; } #page-title .block { margin: 0; display: inline-block; vertical-align: middle; } .page-title2 #page-title { padding: 60px 0; } .page-title2 #page-title .container { display: block; text-align: center; } .page-title2 #page-title .container, .page-title2 .region-breadcrumb { text-align: center; } .page-title2 #page-title h1 { font-size: 25px; margin-bottom: 10px; } /*---------------------------------------------------*/ /* BREADCRUMB /*---------------------------------------------------*/ .region-breadcrumb { text-align: right; } .breadcrumb { background: none; padding: 0; margin: 0; border: none; border-radius: 0; display: block; } .breadcrumb ul li { list-style-type: none; display: inline-block; position: relative; line-height: 1; padding-right: 15px; margin-right: 5px; } .breadcrumb a { color: #aaaaaa; } .breadcrumb ul li:after { content: ""; position: absolute; display: inline-block; top: 5px; right: 0; width: 6px; height: 6px; border-right: 2px solid #aaaaaa; border-bottom: 2px solid #aaaaaa; transform: rotate(-45deg); } .breadcrumb ul li:last-child { padding-right: 0; margin-right: 0; } .breadcrumb ul li:last-child:after { display: none; padding: 0; margin: 0; } /*---------------------------------------------------*/ /* PRELOADER IMAGE /*---------------------------------------------------*/ .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; z-index: 13000; height: 100%; } .preloader-spinner { width: 40px; height: 40px; background-color: #2ba9e0; border-radius: 50%; position: relative; top: 50%; margin: -20px auto auto auto; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; } } /*---------------------------------------------------*/ /* FORM /*---------------------------------------------------*/ input, button, select, textarea { padding: 12px 20px 12px 20px; border: 1px solid #e1e1e1; background-color: transparent; outline: none !important; max-width: 100%; } input[type=search] { background-color: #ffffff; color: #333333; } .form-control:focus { color: #495057; background-color: inherit !important; border-color: inherit !important; outline: 0; box-shadow: none !important; } [type="radio"] + span + label, [type="radio"] + label { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* RADIO BUTTONS */ .checkbox, .radio { margin-bottom: 20px; } /* CHECKBOXES */ [type="checkbox"] { position: absolute; left: -9999px; visibility: hidden; } [type="checkbox"] + label { position: relative; display: inline-block; padding-left: 30px; line-height: 20px; cursor: pointer; -webkit-user-select: none; } [type="checkbox"] + label:before, [type="checkbox"] + label:after { position: absolute; left: 0; z-index: 1; content: ""; -webkit-transition: background-color .25s; transition: background-color .25s; } [type="checkbox"] + label:before { position: absolute; top: 0; left: 0; z-index: 1; margin-top: 2px; } [type="checkbox"]:not(:checked) + label:before { top: 10px; left: 6px; width: 0; height: 0; border: 3px solid transparent; -webkit-transform: rotateZ(45deg); -ms-transform: rotate(45deg); transform: rotateZ(45deg); -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } [type="checkbox"]:not(:checked) + label:after { top: 0; z-index: 0; width: 20px; height: 20px; border: 2px solid #babad3; background-color: transparent; } [type="checkbox"]:checked + label:before { top: 1px; left: 2px; width: 6px; height: 12px; border-top: 2px solid transparent; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; border-left: 2px solid transparent; -webkit-transform: rotateZ(45deg); -ms-transform: rotate(45deg); transform: rotateZ(45deg); -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } [type="checkbox"]:checked + label:after { top: 0; z-index: 0; width: 20px; height: 20px; border: 2px solid #2ba9e0; background-color: #2ba9e0; } [type="checkbox"]:disabled + label { color: #777777; cursor: not-allowed; } [type="checkbox"]:disabled:checked + label:after { opacity: 0.3; } .path-user [type="checkbox"], .path-store [type="checkbox"] { position: initial; visibility: visible; } .sticky-header [type="checkbox"] { visibility: hidden !important; } /* FORM COMPONENTS */ form .field-multiple-table { margin: 0; } form .field-multiple-table .field-multiple-drag { width: 30px; padding-right: 0; } [dir="rtl"] form .field-multiple-table .field-multiple-drag { padding-left: 0; } form .field-multiple-table .field-multiple-drag .tabledrag-handle { padding-right: .5em; } [dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle { padding-right: 0; padding-left: .5em; } form .field-add-more-submit { margin: .5em 0 0; } .form-item, .form-actions { margin-top: 1em; margin-bottom: 1em; } tr.odd .form-item, tr.even .form-item { margin-top: 0; margin-bottom: 0; } .form-composite > .fieldset-wrapper > .description, .form-item .description { font-size: 0.85em; } label.option { display: inline; font-weight: 500; } label, .label, .form-composite > legend { display:inline; font-size: inherit; font-weight: 700; color: #2a2a2a; margin: 0; padding: 0; } .form-text { display: inline-block; } .form-checkboxes .form-item, .form-radios .form-item { margin-top: 0.4em; margin-bottom: 0.4em; } .form-type-radio .description, .form-type-checkbox .description { margin-left: 2.4em; } [dir="rtl"] .form-type-radio .description, [dir="rtl"] .form-type-checkbox .description { margin-left: 0; margin-right: 2.4em; } .marker { color: #e00; } .form-required:after { content: "*"; vertical-align: middle; display: inline-block; width: 6px; margin: 0 0.3em; color: red; background-image: none; } abbr.tabledrag-changed, abbr.ajax-changed { border-bottom: none; } .form-item input.error, .form-item textarea.error, .form-item select.error { border: 2px solid red; } .path-admin .form-type-textfield label, .form-type-commerce-number label, .path-store label, .commerce-product-form label, .commerce-store-form label { display: block; margin-bottom: 6px; margin-top: 10px; } .path-admin summary, .path-store summary, .commerce-product-form summary, .commerce-store-form summary { background-color: #f7f7f7; padding: 0.5em 0.6em; font-weight: bold; text-transform: uppercase; } .path-admin details, .path-store details, .commerce-product-form details, .commerce-store-form details { border: 1px solid #eee; border-radius: 3px; } .commerce-product-form legend { font-size: 1.2rem; font-weight: bold; margin-bottom: 0; } .commerce-product-form #edit-variations-wrapper { margin-top: 20px; } /* Inline error messages. */ .form-item--error-message:before { content: ""; display: inline-block; height: 14px; width: 14px; vertical-align: sub; color: red; background-size: contain; } /* CONTACT FORM */ .content-wide .contact-message-feedback-form { max-width: 840px; margin-left: auto; margin-right: auto; } .contact-message-form select option, .contact-message-form select * { color: #555555 !important; } .contact-message-form label { display: block; text-transform: uppercase; } .contact-message-form .form-item-copy label { display: inline-block; } .contact-message-feedback-form .form-item, .contact-message-feedback-form .form-actions { margin-top: 0; margin-bottom: 25px; } .contact-message-feedback-form .form-actions { margin-bottom: 0; } .contact-message-feedback-form input, .contact-message-feedback-form textarea { width: 100%; background-color: transparent; } .contact-message-feedback-form input[type="submit"] { width: auto; } .block-contact-block #edit-preview { display: none; } @media (min-width: 768px) { .contact-message-feedback-form.block-contact-block .form-item-name, .contact-message-feedback-form.block-contact-block .form-item-mail { width: 48%; float: left; } .contact-message-feedback-form.block-contact-block .form-item-name { margin-right: 4%; } } /* USER LOGIN FORM */ .user-login-form .form-text, .user-login-form .form-email, .user-form .form-text, .user-form .form-email, .user-pass .form-text{ width: 100%; } .form-composite > .fieldset-wrapper > .description, .form-item .description { font-size: 11px; color: #999; font-style: italic; } .path-user:not(.logged-in) .page-header { display: none; } .auth-user-form { margin: 40px auto; width: -webkit-calc(100% - 30px); width: calc(100% - 30px); max-width: 500px; border: 1px solid #efefef; } .auth-user-form .form-header { margin-top: 0; text-align: center; font-size: 25px; } .auth-user-form .form-header:after { margin-top: 20px; } .auth-user-form > form { padding: 50px 20px; background-color: #ffffff; } .auth-user-form .panel-default { background-color: transparent; } .auth-user-form .auth-user-form--footer { margin: 0 auto; padding: 50px 20px 60px 20px; text-align: center; background-color: #e9e9f2; } .auth-user-form .auth-user-form--footer .form-title { margin-top: 0; margin-bottom: 30px; } .auth-user-form .form-control { width: 100%; } .auth-user-form .details-title { text-transform: none; font-weight: normal; } .auth-user-form .button, .auth-user-form .form-wrapper__returning-customer a, .form-wrapper__returning-customer .auth-user-form a, .auth-user-form .cart-block--offcanvas-contents__links a, .cart-block--offcanvas-contents__links .auth-user-form a { width: 100%; } .auth-user-form .button + .button, .auth-user-form .form-wrapper__returning-customer a + .button, .form-wrapper__returning-customer .auth-user-form a + .button, .auth-user-form .cart-block--offcanvas-contents__links a + .button, .cart-block--offcanvas-contents__links .auth-user-form a + .button, .auth-user-form .form-wrapper__returning-customer .btn + a, .form-wrapper__returning-customer .auth-user-form .btn + a, .auth-user-form .form-wrapper__returning-customer a + a, .form-wrapper__returning-customer .auth-user-form a + a, .auth-user-form .cart-block--offcanvas-contents__links .form-wrapper__returning-customer a + a, .form-wrapper__returning-customer .cart-block--offcanvas-contents__links .auth-user-form a + a, .auth-user-form .cart-block--offcanvas-contents__links .btn + a, .cart-block--offcanvas-contents__links .auth-user-form .btn + a, .auth-user-form .form-wrapper__returning-customer .cart-block--offcanvas-contents__links a + a, .cart-block--offcanvas-contents__links .auth-user-form .form-wrapper__returning-customer a + a, .form-wrapper__returning-customer .auth-user-form .cart-block--offcanvas-contents__links a + a, .cart-block--offcanvas-contents__links .form-wrapper__returning-customer .auth-user-form a + a, .auth-user-form .cart-block--offcanvas-contents__links a + a, .cart-block--offcanvas-contents__links .auth-user-form a + a { margin-top: 20px; width: 100%; margin-left: 0; } @media screen and (min-width: 768px) { .auth-user-form .auth-user-form--footer, .auth-user-form > form { padding-left: 60px; padding-right: 60px; } } .form-header { margin-bottom: 30px; } .user-login-form .form-type-password { margin-bottom: 0; } .pass-link { float: right; margin-bottom: 40px; font-style: italic; } .form-control:focus { border-color: #41449f; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(65, 68, 159, 0.6); } /*---------------------------------------------------*/ /* BUTTONS /*---------------------------------------------------*/ .btn, .button, input[type="submit"]{ cursor: pointer; background-color: #2ba9e0; color: #ffffff; line-height: 48px; font-size: 13px; font-weight: 600; padding: 0 28px; border: none !important; display: inline-block; position: relative; white-space: nowrap; transition: all 0.2s linear 0s; margin: 0; outline: 0 none; text-align: center; } .btn.btn-primary:hover { opacity: 0.8; } .button + .button, .btn + .btn { margin-left: 10px; } .btn:hover, .button:hover, .button:focus, input[type="submit"]:hover{ background-color: #333333; color: #ffffff; } .button:focus { outline: 0; } .button-light { background-color: #ffffff; border: 1px solid #eeeeee; color: #111111 !important; } .button-dark { background-color: #111111; color: #ffffff; border-color: #111111; } /* BORDER BUTTONS */ .button.border { color: #444444; border: 2px solid #444444; background-color: transparent; } .button.border:hover { background-color: #444444; color: #ffffff; } .button.border.light { border: 2px solid #ffffff; background-color: transparent; color: #ffffff; } .button.border.light:hover { background-color: #ffffff; color: #252525 } .button.border.light:hover:hover i { color: #252525 } /* TRANSPARENT BUTTONS */ .button.transparent { background-color: transparent; border: 2px solid #ffffff; box-shadow: none; color: #ffffff; letter-spacing: 2px; } .button.transparent:hover, .button.transparent:active { background-color: #ffffff; color: #444444 !important; } /*BUTTON ICONS*/ .button i { font-size: 15px; margin-right: 10px; } .button.icon-left i { margin-right: 10px; } .button.icon-right i { margin-left: 10px; margin-right: 0; } /*DROPBUTTON*/ .dropbutton-widget { overflow: hidden; margin: 0.125em 0; padding: .2em 2em .2em 1em; cursor: pointer; border: 1px solid #e4e4e4; border-radius: 1em; background-color: #ffffff; background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8); background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8); } .dropbutton-widget .dropbutton li { border-bottom: 1px solid #e4e4e4; } .dropbutton-widget .dropbutton li:last-child { border: none; } .dropbutton-widget .dropbutton li a { line-height: 1.8; display: block; } /*---------------------------------------------------*/ /* TABLE /*---------------------------------------------------*/ table { width: 100%; margin-bottom: 20px; border: 1px solid #ecedee; } table tbody { border-top: none; border-bottom: 1px solid #ecedee; } table tr.even, table tr.odd, th { background-color: transparent; border-bottom: 1px solid #ecedee; } thead tr th, thead tr td, tbody tr th, tbody tr td { padding: 8px; line-height: 142%; vertical-align: middle; border-right: 1px solid #efefef; } td.active { background-color: transparent; } table thead { text-transform: uppercase; background: #f5f5f5; } table tr { border-bottom: 1px solid #eeeeee; } .flipped-table table { text-align: center; table-layout: fixed; } .flipped-table table th, .flipped-table table td { border-right: 1px solid #efefef; padding: 15px; } .flipped-table table th { background-color: #f8f8f8; font-size: 16px; width: 280px; padding: 15px 25px; } table .flag i { display: none; } /*---------------------------------------------------*/ /* TASK BAR /*---------------------------------------------------*/ .task-bar .tabs { margin: 1em 0; } ul.tabs, .task-bar ul.tabs { list-style: none; list-style-type: none; margin: 0 0 0.5em; padding: 0; } .task-bar .tabs > li { display: inline-block; margin-right: 0.3em; } [dir="rtl"] .tabs > li { margin-left: 0.3em; margin-right: 0; } .task-bar .tabs a { display: block; padding: 0.2em 1em; text-decoration: none; } .task-bar .tabs a.is-active { background-color: #eeeeee; } .task-bar .tabs a:focus, .task-bar .tabs a:hover { background-color: #f5f5f5; } .task-bar { text-align: center; } .task-bar.alert { margin-bottom: 0; padding: 0; } .task-bar ul.tabs { margin: 0; font-size: 12px; } .task-bar ul.tabs.primary { margin-bottom: 20px; } /* LOCAL TASKS */ .content-wide .block-local-tasks-block { padding: 0; } .page-wrapper .block-local-tasks-block .alert-dismissable .close { position: absolute; top: -10px; right: -10px; } .block-local-actions-block li { list-style-type: none; } /* VERTICAL TABS */ .vertical-tabs, .vertical-tabs__menu, .vertical-tabs__menu-item { border-color: #eaeaea; } .vertical-tabs__menu-item { background: #f7f7f7; } .vertical-tabs__menu-item a { padding: 0.5em 1em; } /* PAGER */ .pager { padding-left: 0; padding: 15px 0; } .pager ul { display: flex; } .pager li { display: inline-block; text-align: center; margin-right: 4px; line-height: 35px; } .pager li:last-child { margin: 0; } .pager li > a, .pager li > span { display: inline-block; padding: 0 15px; font-size: 12px; height: 38px; line-height: 38px; background-color: #ffffff; border: 1px solid #dddddd; color: #555555; } .pager li.is-active a, .pager li.pager__item.is-active > a, .pager li > a:hover { color: #ffffff; border-color: #2ba9e0; background-color: #2ba9e0; } .product-catalog footer { display: inline-block; padding: 15px 0; } .views-infinite-scroll-content-wrapper { margin-bottom: 30px; } /*---------------------------------------------------*/ /* STATUS MESSAGES /*---------------------------------------------------*/ .messages { padding: 15px 20px 15px 35px; /* LTR */ margin: 0 0 15px; word-wrap: break-word; border: 1px solid; border-width: 1px 1px 1px 0; /* LTR */ border-radius: 2px; background: no-repeat 10px 17px; /* LTR */ overflow-wrap: break-word; } [dir="rtl"] .messages { padding-right: 35px; padding-left: 20px; text-align: right; border-width: 1px 0 1px 1px; background-position: right 10px top 17px; } .messages + .messages { margin-top: 1.538em; } .messages__list { margin: 0; padding: 0; list-style: none; } .messages__item + .messages__item { margin-top: 0.769em; } .messages a { color: #333333; text-decoration:underline; } .messages.status, .messages--status { color: #325e1c; border-color: #c9e1bd #c9e1bd #c9e1bd transparent; /* LTR */ background-color: #f3faef; box-shadow: -8px 0 0 #77b259; /* LTR */ } [dir="rtl"] .messages--status { margin-left: 0; border-color: #c9e1bd transparent #c9e1bd #c9e1bd; box-shadow: 8px 0 0 #77b259; } .messages.warning, .messages--warning { color: #734c00; border-color: #f4daa6 #f4daa6 #f4daa6 transparent; /* LTR */ background-color: #fdf8ed; box-shadow: -8px 0 0 #e09600; /* LTR */ } [dir="rtl"] .messages--warning { border-color: #f4daa6 transparent #f4daa6 #f4daa6; box-shadow: 8px 0 0 #e09600; } .messages.error, .messages--error { color: #a51b00; border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */ background-color: #fcf4f2; box-shadow: -8px 0 0 #e62600; /* LTR */ } [dir="rtl"] .messages--error { border-color: #f9c9bf transparent #f9c9bf #f9c9bf; box-shadow: 8px 0 0 #e62600; } .messages--error p.error { color: #a51b00; } /*---------------------------------------------------*/ /* MENU NAVIGATION /*---------------------------------------------------*/ /* LINKS INLINE */ ul.links.inline { padding: 0; } ul.links.inline li { list-style: none; display: inline-block; padding-right: 10px; } .navbar { padding: 0; } .nav-button { border-color: #eaeaea; border-radius: 3px; padding: 0; height: 40px; width: 40px; line-height: 40px; margin-left: 7px; margin-top: -6px; } /* MAIN MENU */ .main-menu { z-index: 99; } .mega-menu a { font-weight: 600; } .menu-mobile { display: none; padding: 5px; position: absolute; top: 0; right: 15px; width: 24px; height: 24px; } .menu-mobile:before { content: ""; position: absolute; left: 0; top: 3px; width: 24px; height: 3px; background: #333333; box-shadow: 0 7px 0 0 #333333, 0 14px 0 0 #333333; border-radius: 3px; } .menu-dropdown:before { content: "\e61a"; font-family: "themify"; display: none; cursor: pointer; float: right; padding: 10px; background: #ffffff; color: #333333; } .mega-menu > ul { margin: 0 auto; width: 100%; list-style: none; padding: 0; position: relative; /* IF .mega-menu position=relative -> ul = container width, ELSE ul = 100% width */ box-sizing: border-box; } .mega-menu > ul:before, .mega-menu > ul:after { content: ""; display: table; } .mega-menu > ul:after { clear: both; } .mega-menu > ul > li { display: inline-block; background: none; padding: 0; margin: 0; } .mega-menu > ul > li a { text-decoration: none; padding: 1.5em 3em; display: block; } .mega-menu > ul > li > ul { display: none; width: 100%; background-color: #f0f0f0; padding: 20px; position: absolute; z-index: 99; left: 0; margin: 0; list-style: none; box-sizing: border-box; } .mega-menu > ul > li > ul:before, .mega-menu > ul > li > ul:after { content: ""; display: table; } .mega-menu > ul > li > ul:after { clear: both; } .mega-menu > ul > li > ul > li a { color: #333333; padding: .2em 0; display: block; border-bottom: 1px solid #ccc; } .mega-menu > ul > li > ul > li > ul { display: block; padding: 0; margin: 10px 0 0; list-style: none; box-sizing: border-box; } .mega-menu > ul > li > ul > li > ul:before, .mega-menu > ul > li > ul > li > ul:after { content: ""; display: table; } .mega-menu > ul > li > ul > li > ul:after { clear: both; } .mega-menu > ul > li > ul > li > ul > li { float: left; width: 100%; padding: 7px 0; margin: 0; font-size: 13px; } .mega-menu > ul > li > ul > li > ul > li a { border: 0; } .mega-menu > ul > li > ul.normal-sub { left: auto; width: 12em; padding: 0; } .mega-menu > ul > li > ul.normal-sub > li { width: 100%; } .mega-menu > ul > li > ul.normal-sub > li a { border: 0; padding: 10px 15px 10px 20px; } .mega-menu > ul > li > ul > li > ul > li > ul { padding-left: 10px; } /* SIDEBAR MENU */ .sidebar ul.menu { list-style-type: none; display: block; } .sidebar ul.menu li a { margin-bottom: 10px; display: block; position: relative; } .sidebar ul.menu li a.is-active { color: #2ba9e0; } .menu .list-count { position: absolute; right: 26px; top: 10px; } .nav>li>a:focus, .nav>li>a:hover { background-color: transparent; } .menu { list-style-type: none; } .sidebar .service-menu ul.menu { border: 1px solid #f0f0f0; } .sidebar .service-menu ul.menu li { border-bottom: 1px solid #f0f0f0; } .sidebar .service-menu ul.menu li:last-child { border-bottom: none; } .sidebar .service-menu ul.menu a { margin: 0; padding: 12px 17px; } .sidebar .service-menu ul.menu a.is-active { color: #ffffff; background-color: #2ba9e0; } /*---------------------------------------------------*/ /* BRANDING /*---------------------------------------------------*/ .site-branding { margin: 0; } .brand.logo { max-width: 160px; line-height: 45px; } .brand.logo a { display: inline-block; vertical-align: middle; } .site-name a { font-size: 25px; line-height: 1.2; } /*---------------------------------------------------*/ /* HEADER CONTENT /*---------------------------------------------------*/ .header { margin-bottom: 0; border: none; border-radius: 0; position: relative; } .sticky-header .header-content, .sticky-header .sticky .header-content { transition: 0.5s; position: relative; } .header-top { padding: 10px 0; border-bottom: 1px solid #f9f9f9; line-height: 1.2; } .header-top.light-header-top { border-color: rgba(0,0,0,0.15); } /* HEADER ELEMENTS */ .header-element { display: flex; align-items: center; } .header-element i { font-size: 25px; } .header-item .search-button { display: none; border: none; padding: 0; } .account-icon { padding: 0; } .header-account { position: relative; } .dropdown-toggle { border: none; padding-right: 15px; color: #495057; } a.dropdown-toggle { color: #495057; } .dropdown-toggle:after { display: inline-block; content: ""; border: none; border-bottom: 2px solid #999; border-right: 2px solid #999; height: 5px; width: 5px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-left: 0; margin-top: -3px; position: absolute; right: 0; top: 50%; } .dropdown-menu.user-account-block-wrap { left: auto; right: 0; padding: 0; } .dropdown-menu.user-account-block-wrap .nav { display: block; padding: 5px 0; } .dropdown-menu.user-account-block-wrap .nav a { display: block; padding: 0 15px; line-height: 40px; font-size: 14px } .dropdown-menu.user-account-block-wrap .nav a:hover { background-color: #f6f6f6; } .header-menu { width: 100%; } .header-menu .nav-menu { padding: 0; box-shadow: 0 3px 5px 0 rgba(210,217,237,.08); } .header-menu .nav-menu:before { content: ""; position: absolute; border-top: 1px solid; opacity: 0.05; width: 100%; top: 0; left: 0; } .header-top .block { display: inline-block; margin-right: 15px; border-right: 1px solid rgba(0,0,0,.2); padding-right: 15px; } .light-header-top .block { border-color: rgba(255,255,255,0.3); } .light-header-top .nice-select:after, .light-header-top .dropdown-toggle:after { border-color: #ffffff; } .header-top .block:last-child { margin-right: 0; padding-right: 0; border-color: transparent; } .commerce-currency-resolver-select-form input[type="submit"] { display: none; } .header-top .form-item { margin-top: 0; margin-bottom: 0; } .header-top .form-control, .header-top .nice-select { width: auto; height: auto !important; line-height: 1; border: none !important; padding-right: 15px !important; padding-left: 0 !important; } .header-top .nice-select:after { right: 2px; } .header-wrap { position: relative; } .header-top .nice-select .list, .header-top .nice-select .list *, .header-top .dropdown-menu .menu, .header-top .dropdown-menu .menu * { color: #333333; } .header-top .nice-select .list, .header-top .dropdown-menu.user-account-block-wrap { margin-top: 12px; } /* HEADER INFO */ .header-info { display: inline-block; } .header-info .header-info-container { display: flex; flex-wrap: wrap; align-items: center; } .header-info .header-info-item { margin-left: 40px; display: flex; flex-wrap: nowrap; position: relative; } .header-info .header-info-item:first-child { margin-left: 0; } .header-info .header-info-item:first-child:after { display: none; } .header-info .header-info-item i { font-size: 25px; margin-right: 15px; margin-top: 3px; } .header-info .header-info-item a, .header-info .header-info-item span { font-size: 13px; opacity: 0.8; display: block; } .header-info .header-info-desc { line-height: 1.2; } /*---------------------------------------------------*/ /* FOOTER /*---------------------------------------------------*/ .footer { /*color: #dddddd;*/ position: relative; } .footer a { /*color: #d0d0d0;*/ display: block; } .footer-widget { padding: 0; } .footer-widget .block { padding: 60px 0 40px 0; } .footer-widget .footer-widget-section .block:nth-child(2), .footer-widget .footer-widget-section .block:nth-child(3) { padding-top: 0; } .footer .block-title { /*color: #ffffff;*/ } /* FOOTERWIDGET MENU */ .footer-widget ul { list-style-type: none; } .footer-widget a:hover { /*color: #2ba9e0;*/ } .footer-widget ul li { margin-bottom: 10px; } .footer-widget ul li a { display: inline-block; } /* FOOTER COLOR */ .light-footer, .light-footer h1, .light-footer h2, .light-footer h3, .light-footer h4, .light-footer h5 { color: #f6f6f6; } .light-footer .contact-message-feedback-form input, .light-footer .contact-message-feedback-form textarea { border-color: #aaaaaa; } .light-footer .recent-post { border-color: #333333; } .footer.dark-footer, .footer.dark-footer a { color: #333333; } .footer.dark-footer h2 { color: #222222; } /* .footer.light-footer .footer-widget .border-list ul.menu li, .footer.light-footer .footer-bottom { border-color: #eeeeee; } */ /* FOOTERWIDGET BOTTOM */ .footer-bottom { border-top: 1px solid rgba(0,0,0,0.03); background-color: rgba(0,0,0,0.04); padding: 0; margin-top: 0; } .footer-bottom ul.menu li { display: inline-block; margin-left: 15px; } .footer-bottom .copyright { padding: 30px 0; } .footer-bottom .footer-bottom-second { text-align: right; } .footer-bottom .block { padding: 30px 0; margin: 0; } .footer-bottom p, .copyright p { margin: 0; } .footer-bottom a { display: inline-block; } /*---------------------------------------------------*/ /* SOCIAL MEDIA /*---------------------------------------------------*/ .social-icon { position: relative; padding: 0; margin: 0; } .social-icon li { display: inline-block; list-style: none; margin-right: 3px; } .social-icon li:last-child { margin-right: 0; } .social-icon li a { /*color: #505050;*/ text-decoration: none; transition: all 0.4s ease-in-out; width: 30px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #eaeaea; display: block; border-radius: 2px; } .social-media { display: inline-block; } .social-media ul { list-style-type: none; } .social-media ul li { display: inline-block; } .social-media li a { color: #ffffff; text-align: center; display: inline-block; width: 30px; } .social-media li a:hover { color: #2ba9e0; } .social-media.round-social ul li a { border-radius: 50% !important; width: 40px; height: 40px; } .social-media.round-social ul li a, .social-media.square-social ul li a { width: 30px !important; height: 30px !important; line-height: 30px !important; } .social-media.plain-social.round-social ul li a, .social-media.plain-social.square-social ul li a { border: 1px solid #eee !important; } .social-media.plain-social.normal-social ul li a { border: none } /* FOOTER SOCIAL */ .footer .social-media { line-height: 45px; } .footer .social-media ul li a { margin-left: 5px; } .footer .social-media.plain-social.normal-social ul li a { margin-left: 0; } /*---------------------------------------------------*/ /* SCROLL TO TOP /*---------------------------------------------------*/ .back-to-top { position: fixed; border: 1px solid #999999; color: #999999; width: 44px; height: 44px; line-height: 44px; bottom: 80px; right: 30px; cursor: pointer; text-align: center; display: none; z-index: 99; } .back-to-top:hover { color: #ffffff; background-color: #393939; border-color: #393939; filter: alpha(opacity=100); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } /*---------------------------------------------------*/ /* MAINTAINANCE PAGE /*---------------------------------------------------*/ .maintenance-page { text-align: center; padding: 180px 0; color: #000000; } .maintenance-msg { padding: 20px 30px; display: inline-block; color: #404040; font-size: 18px; } .maintenance-msg h1 { text-transform: uppercase; font-size: 40px; } .maintenance-icon { color: #2ba9e0; font-size: 50px; } .maintenance-page .brand, .maintenance-page .name-and-slogan { display: inline-block; vertical-align: middle; } .maintenance-page .site-name a { color: #404040; } .maintenance-page .site-slogan, .maintenance-page .name-and-slogan { display: none; } /*----------------------------------------------*/ /* 404 ERROR PAGE /*----------------------------------------------*/ .error-404 { padding: 80px 0 120px 0; } .error-404-number { color: #eeeeee; display: block; font-size: 15em; font-weight: 900; line-height: 1; } /*---------------------------------------------------*/ /* CONTACT ADDRESS /*---------------------------------------------------*/ .contact-address .contact-address-heading { text-align: center; margin-bottom: 0; padding: 18px 20px; background-color: #19212e; color: #ffffff; } .contact-address .contact-address-content { background-color: #f9f9f9; } .contact-address-content { padding: 40px; } .contact-address-line { position: relative; padding-left: 45px; min-height: 50px; margin-bottom: 25px; } .contact-address-line:last-child { margin-bottom: 0; } .contact-address-line h5 { font-weight: 700; margin-bottom: 5px; } .contact-address-line i { font-size: 25px; line-height: 40px; color: #2ba9e0; text-align: center; } .contact-address-content i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .contact-social.social-media ul li a { font-size: 20px; width: 40px; height: 40px; line-height: 40px; background-color: #2ba9e0; } .sidebar .contact-address-content { padding: 20px; } .sidebar .contact-address .contact-address-line { padding-left: 30px; } /*---------------------------------------------------*/ /* SLIDE BLOCK /*---------------------------------------------------*/ .slide-block { overflow: hidden; clear: left; position: relative; width: 100%; } .slider-image { position: relative; } .slide-block .hero { max-height: 100vh; } .slider-image img, .slide-block img { width: 100%; } .slide-block li { list-style-type: none; position: relative; } .slide-content-wrap, .slide-content-link { position: absolute; width: 100%; height: 100%; top: 0; } .slide-content-link { z-index: 1; text-indent: -9999px; } .slide-wrap { position: relative; display: table; height: 100%; max-height: 100vh; } .slide-content { position: relative; display: table-cell; vertical-align: middle; color: #555555; } .slide-content-main { position: relative; overflow: hidden; } .slide-content p { margin-bottom: 0; } .norm-width .slide-content { padding-right: 40px; padding-left: 40px; } .slide-button{ display: block; } .hero .heading-text .field-item:first-child { animation-delay: .25s; } .hero .heading-text .field-item:nth-child(2) { animation-delay: .7s; } .hero .heading-text .field-item:nth-child(3) { animation-delay: 1s; } .hero .slide-content-body { animation-delay: 1.15s; margin-top: 20px; } .hero .slide-button { animation-delay: 1.5s; } .slide-image { width: 100%; position: relative; } .slide-image img { width: 100%; } .pre-heading-text { font-size: 20px; font-weight: 600; line-height: 1.1; margin-bottom: 15px; } .heading-text { font-size: 50px; font-weight: 700; line-height: 1.1; color: #333333; } .heading-text .field-field-heading-text .heading-text-content { display: inline-block; } /*---------------------------------------------------*/ /* OWL CAROUSEL /*---------------------------------------------------*/ .owl-carousel { padding: 0; list-style-type: none; } .owl-stage-outer { direction: ltr; } .owl-slider-wrapper .owl-stage, .deals-layout .owl-stage, .owl-item, .owl-item-cont, .deals-layout .owl-item > .field-item { display: flex; } .owl-item { flex-wrap: wrap; } .owl-item-cont, .deals-layout .owl-item > .field-item { width: 100%; flex: 0 0 100%; } .owl-item-cont .contextual-region, .owl-item > div { width: 100%; } .owl-carousel .owl-nav { opacity: 0; -webkit-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; } .owl-carousel:hover .owl-nav { opacity: 1 } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { padding: 0; position: relative; transform: translateY(-50%); height: 40px; width: 40px; line-height: 40px; position: absolute; text-align: center; cursor: pointer; top: 50%; z-index: 2; margin: 0; -webkit-transition: all 0.25s ease-out 0s; transition: all 0.25s ease-out 0s; } .owl-carousel .owl-nav button { background-color: #ffffff; color: #333333 !important; border: none; border: 1px solid #f9f9f9; } .owl-carousel .owl-nav button:hover { color: #ffffff !important; background-color: #2ba9e0; } .owl-carousel .owl-nav button span { display: none; } .owl-carousel .owl-nav button:before { font-family: 'themify'; } .owl-carousel .owl-nav button.owl-prev:before { content: "\e64a"; } .owl-carousel .owl-nav button.owl-next:before { content: "\e649"; } .owl-carousel .owl-nav .owl-prev { left: -22px; } .owl-carousel .owl-nav .owl-next { right: -22px; } .owl-carousel .owl-dots { margin-top: 0; position: absolute; bottom: -45px; width: 100%; text-align: center; } .owl-carousel .owl-dots .owl-dot { display: inline-block; border: none !important; padding: 0; } .owl-carousel .owl-dots .owl-dot span { display: block; width: 5px; height: 5px; margin: 5px 5px; border-radius: 50%; background-color: #b0b0b0; } .owl-slider-wrapper .owl-stage-outer, .deals-layout .owl-stage-outer { padding-top: 3px; padding-left: 3px; padding-right: 3px; margin-left: -3px; margin-right: -3px; } .owl-slider-wrapper:hover .owl-stage-outer, .deals-layout:hover .owl-stage-outer { padding-bottom: 100px; margin-bottom: -100px; } .owl-slider-wrapper .owl-nav { position: absolute; top: 50%; left: 0; width: 100%; } .owl-slider-wrapper:hover .owl-nav { transform: translateY(-51px); } .owl-slider-wrapper { position: relative; } .owl-slider-wrapper .owl-nav .owl-prev { left: -5px; } .owl-slider-wrapper .owl-nav .owl-next { right: -5px; } .owl-slider-wrapper .owl-dots { margin-bottom: 0; } .owl-slider-wrapper:hover .owl-dots { margin-bottom: 100px; } .slide-block .owl-carousel .owl-nav button, .slide-carousel.owl-carousel .owl-nav button, .owl-slider-field.owl-carousel .owl-nav button { opacity: 0; } .slide-block .owl-carousel .owl-nav button { width: 55px; height: 55px; background-color: #ffffff !important; color: #333333 !important; border: none; } .slide-block .owl-carousel .owl-nav button:before { font-size: 20px; line-height: 55px; } .slide-block .owl-carousel:hover .owl-nav .owl-prev, .slide-carousel.owl-carousel:hover .owl-nav .owl-prev, .owl-slider-field.owl-carousel:hover .owl-nav .owl-prev { left: 15px; } .slide-block .owl-carousel:hover .owl-nav button, .slide-carousel.owl-carousel:hover .owl-nav button, .owl-slider-field.owl-carousel:hover .owl-nav button { opacity: 1; } .slide-block .owl-carousel:hover .owl-nav .owl-next, .slide-carousel.owl-carousel:hover .owl-nav .owl-next, .owl-slider-field.owl-carousel:hover .owl-nav .owl-next { right: 15px; } .slide-block:hover .owl-carousel .owl-nav .owl-prev, .slide-block:hover .owl-carousel .owl-nav .owl-next { top: 50%; } .slide-block .owl-item, .slide-carousel .owl-item { padding: 0; overflow: hidden; } .slide-block .owl-carousel { margin: auto; } .slide-block .owl-carousel .owl-dots, .owl-slider-field.owl-carousel .owl-dots { bottom: 10px; } .slide-carousel.owl-carousel .owl-dots, .owl-slider-field.owl-carousel .owl-dots { bottom: 5px; } .slide-block .owl-carousel .owl-dots .owl-dot span { width: 5px; height: 5px; background-color: #2a2a2a; position: relative; margin: 0; } .slide-block .owl-carousel .owl-dots .owl-dot span:after { content: ""; border: 2px solid transparent; width: 16px; height: 16px; border-radius: 50%; display: block; position: absolute; left: -50%; top: -50%; margin-left: -3px; margin-top: -3px; } .slide-block .owl-carousel .owl-dots .owl-dot.active span:after { border: 2px solid #2a2a2a; } .slide-block .owl-carousel .owl-dots .owl-dot { margin: 0 6px; } /*---------------------------------------------------*/ /* COLORBOX /*---------------------------------------------------*/ .colorbox { position: relative; display: block; cursor: url("../images/plus.png"), auto; } /*---------------------------------------------------*/ /* TESTIMONIALS /*---------------------------------------------------*/ .testimonial-content { max-width: 70%; margin-left: auto; margin-right: auto; text-align: center; padding-top: 80px; position: relative; } .testimonial .testimonial-body { position: relative; font-size: 15px; } .testimonial-body:after { content: "\e67f"; font-family: 'themify'; color: #999999; position: absolute; top: -35px; left: 50px; font-size: 50px; line-height: 0; opacity: 0.2; } .testimonial .testimonial-meta { position: relative; margin-top: 30px; } .testimonial .testimonial-title-wrap { text-align: left; } .testimonial .testimonial-title { margin-bottom: 2px; } .testimonial .testimonial-position { opacity: 0.6; font-size: 12px; } .testimonial .testimonial-image { margin-right: 15px; } .testimonial .testimonial-image img { max-width: 45px; } .testimonial .testimonial-image, .testimonial .testimonial-title-wrap { display: inline-block; vertical-align: middle; } .owl-responsive .testimonial, .grid-item .testimonial { background-color: #f9f9f9; border: 1px solid #f9f9f9; margin-bottom: 20px; } .owl-responsive .testimonial .testimonial-body, .grid-item .testimonial .testimonial-body { font-size: 14px; } .owl-responsive .testimonial .testimonial-content, .grid-item .testimonial .testimonial-content { max-width: 100%; padding: 90px 30px 50px 30px; } .owl-responsive .testimonial .testimonial-content:after, .grid-item .testimonial .testimonial-content:after { content: ""; position: absolute; left: 40px; bottom: -19px; width: 26px; height: 20px; border-top: 10px solid #f9f9f9; border-left: 13px solid #f9f9f9; border-right: 13px solid transparent; border-bottom: 10px solid transparent; } .owl-responsive .testimonial .testimonial-content *, .grid-item .testimonial .testimonial-content * { color: #555555; } /*---------------------------------------------------*/ /* CLIENTS /*---------------------------------------------------*/ .clients-wrapper .clients-list { padding: 0 !important; margin-bottom: 0; } .clients-wrapper .clients-list .field-field-image { text-align: center; } .clients-wrapper { overflow: hidden; } .clients-list img { padding: 20px; /*-webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s; transition: .3s;*/ } /* .clients-list:hover img { filter: grayscale(0%); }*/ /*---------------------------------------------------*/ /* FEATURE BLOCK /*---------------------------------------------------*/ .feat .feat-icon { margin-bottom: 15px; } .feat .feat-title { margin-bottom: 10px; } .feat .feat-icon i { font-size: 35px; line-height: 35px; } .feature-block .feat .feat-icon i { width: 52px; height: 52px; display: block; background-color: #eeeeee; border-radius: 50%; line-height: 52px; text-align: center; font-size: 25px; } .feature-block .feat .feat-icon i:before { background: -webkit-linear-gradient(#999999, #333333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .feature-block .feat-block-content { padding-bottom: 50px; z-index: 1; } .feature-block .feat { position: relative; padding: 45px 40px 50px 40px; background-color: #fcfcfc; border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: box-shadow 0.25s ease; transition: box-shadow 0.25s ease; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .feature-block .feat, .feature-block .feat .feat-icon i { transition: 0.3s; } .feature-block .feat:hover { background-color: #2ba9e0; color: #ffffff; -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1); } .feature-block .feat:hover .feat-title { color: #ffffff; } .feature-block .feat:hover .feat-icon i { background-color: #ffffff; transform: scale(1.1); } .feature-block-wrap .block-title-wrap .block-subtitle { max-width: 100%; } .feature-block .feat-block-text { margin-bottom: 30px; } .feature-block-wrap, .feat-block-image-wrap { overflow: hidden; position: relative; } .feature-block-wrap { min-height: 320px; } .feature-block .feat-block-image { text-align: center; background-size: cover; background-repeat: no-repeat; background-position: center top; } .feature-block .background-image .feat-block-image { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .feature-block-image-alt .feat-block-image img { width: 100%; height: auto; } /* FEATURE IMAGE */ .feat-item .portfolio-img .portfolio-overlay:before { margin-top: -25px; height: 50px; right: 60px; left: 60px; border: 1px solid #eeeeee; } .feat-item .portfolio-item { margin-bottom: 20px; } .feat-item, .feature-block .feat-item { position: relative; } .feat-node-content .post-content { padding-top: 40px; } .node-feat-icon { display: inline-block; float: left; margin-right: 20px; margin-bottom: 15px; font-size: 55px; line-height: 1.3; } .feat-image .post-content { padding: 30px 20px; border: 1px solid #f8f8f8; background-color: #ffffff; } .feat-icon-img { max-width: 40px; margin-bottom: 20px; } .feat-block-image-bg { visibility: hidden; } .content-wide .fullwidth.feature-block .container-wrap { max-width: 1220px; } .feat-block-video { position: relative; } .feat-block-video .colorbox { cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .feat-block-video .colorbox .video-link { position: absolute; top: 50%; left: 50%; background-color: #2ba9e0; color: #ffffff; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; margin-top: -30px; margin-left: -30px; font-size: 25px; z-index: 1; transition: all 0.4s ease-in-out; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .feat-block-video .colorbox .video-link:hover { -webkit-transform: scale3d(1.15, 1.15, 1.15); transform: scale3d(1.15, 1.15, 1.15); transform: scale(1.2,1.2); } .feat-block-video .colorbox:after, .feat-block-video .colorbox:before { width: 1px; height: 0; margin: 0 auto; opacity: 0; content: ''; display: block; position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; border-radius: 50%; border: 3px solid #2ba9e0; -webkit-animation: zoomBig 3.25s linear infinite; animation: zoomBig 3.25s linear infinite; -webkit-animation-delay: 0s; animation-delay: 0s; } .feat-block-video .colorbox:before { -webkit-animation-delay: .75s; animation-delay: .75s; } @-webkit-keyframes zoomBig { 0% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 3px; } 40% { opacity: .5; border-width: 2px; } 65% { border-width: 1px; } 100% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 0; border-width: 1px; } } @keyframes zoomBig { 0% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 3px; } 40% { opacity: .5; border-width: 2px; } 65% { border-width: 1px; } 100% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 0; border-width: 1px; } } @keyframes zoomBig { 0% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 3px; } 40% { opacity: .5; border-width: 2px; } 65% { border-width: 1px; } 100% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 0; border-width: 1px; } } /*---------------------------------------------------*/ /* SERVICE /*---------------------------------------------------*/ .service-teaser { position: relative; overflow: hidden; margin-bottom: 30px; } .service-teaser .service-title-wrap { display: table; width: 100%; height: 50px; padding: 0 5px 0 20px; position:relative; } .service-teaser .service-title-wrap:before { content: ""; background-color: #eaeaea; position: absolute; bottom: 3px; height: 10px; width: 5px; left: 3px; z-index: 2; border-radius: 20px; -webkit-transition: 0.4s; -khtml-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .service-teaser:hover .service-title-wrap:before { height: 100%; } .service-teaser .service-title { display: table-cell; vertical-align: bottom; margin-bottom: 0; letter-spacing: -0.025em; } .service-teaser .service-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; padding: 30px; display: flex; flex-wrap: wrap; align-items: center; -webkit-transition: all 320ms linear 0ms; -khtml-transition: all 320ms linear 0ms; -moz-transition: all 320ms linear 0ms; -ms-transition: all 320ms linear 0ms; -o-transition: all 320ms linear 0ms; transition: all 320ms linear 0ms; -webkit-transform: translateY(100%); -khtml-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); opacity: 0; } .service-teaser .service-content-container { width: 100%; } .service-teaser .service-content i { display: block; font-size: 40px; margin-bottom: 20px; } .service-teaser .service-content:before { content: ""; background-color: #fcfcfc; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .service-teaser:hover .service-content { -webkit-transform: translateY(0%); -khtml-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); opacity: 1; } .service-teaser .service-content .service-title { display: block; margin-bottom: 15px; } .service-teaser .service-icon img { display: block; } .service-teaser2 .service-icon { width: 60px; height: 60px; border-radius: 50%; background-color: #ffffff; padding: 14px; line-height: 60px; text-align: center; position: absolute; top: -32px; transition: 0.3s; } .service-teaser2:hover .service-icon { background-color: #2ba9e0; -webkit-transform: scale(1.2); transform: scale(1.15); } .service-teaser2:hover .service-icon img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .service-teaser2 .post-content { background-color: #f9f9f9; padding: 45px 30px 30px; width: 94%; margin: auto; margin-top: -50px; border-radius: 3px; } .node-service-image { margin-bottom: 30px; } .side-btn, .brochure-btn { width: 100%; } .brochure-btn:after { content: "\e6a7"; font-family: 'themify'; margin-left: 30px; } .number-count .grid-wrapper { counter-reset: grid-item; } .number-count .grid-item { padding-top: 50px; padding-right: 15px; padding-left: 15px; margin-bottom: 30px; } .number-count .grid-item:before { counter-increment: grid-item; content: counter(grid-item, decimal-leading-zero) "."; display: block; color: #2ba9e0; font-size: 40px; line-height: 1; font-weight: bold; position: absolute; top: 0; } .number-count-alt .grid-item { padding-top: 0; } .number-count-alt .post-content { padding: 50px 50px 50px 140px; background-color: rgba(0,0,0,0.1); } .number-count-alt .grid-item:before { top: 50%; left: 50px; width: 80px; height: 80px; border-radius: 50%; background-color: #000000; line-height: 80px; text-align: center; margin-top: -40px; } /*---------------------------------------------------*/ /* TEAM /*---------------------------------------------------*/ .team-teaser { position: relative; text-align: center; } .team-thumb { overflow: hidden; margin: 0; position: relative; } .team-thumb img { width: 100%; } .team-teaser .team-meta { margin-top: 0; padding: 15px; background-color: #fcfcfc; } .team-teaser:hover img { opacity: 0.9; background-color: #000000; } .team-thumb .team-social { display: inline-block; position: absolute; left: 50%; bottom: 20px; opacity: 0; transform: translateX(-50%); -webkit-transition: all 320ms linear 0ms; -khtml-transition: all 320ms linear 0ms; -moz-transition: all 320ms linear 0ms; -ms-transition: all 320ms linear 0ms; -o-transition: all 320ms linear 0ms; transition: all 320ms linear 0ms; background-color: #2ba9e0; padding: 5px 3px; border-radius: 50px; } .team-thumb:hover .team-social { opacity: 1; } .team-thumb .team-social a { display: inline-block; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; font-size: 14px; text-align: center; padding: 0; margin: 0 2px; background-color: #ffffff; color: #555555; border-right: 1px solid #eaeaea; } .team-thumb .team-social a:first-child { border-left: 1px solid #eaeaea; } .team-thumb .team-social a:hover { background-color: #19212e; color: #ffffff; } .team-teaser .team-name { margin-bottom: 3px; } /* TEAM SINGLE */ .team-content .team-meta { margin-bottom: 30px; padding: 0; padding-bottom: 15px; border-bottom: 1px solid #eeeeee; } .team-content .team-social { margin-top: 15px; } .team-content .team-social a { margin-left: 15px; } .team-content .team-social a:first-child { margin-left: 0; } /*---------------------------------------------------*/ /* BLOG /*---------------------------------------------------*/ .blog-post .post-title { margin-bottom: 15px; margin-top: 0; } .post-title { margin-bottom: 15px; } .blog-post .post-title a { color: #222222; } .blog-post .post-title a:hover { color: #2ba9e0; } .post-meta { display: block; margin-bottom: 15px; padding: 0 10px; } .post-meta .post-meta-item { display: inline-block; font-size: 11px; line-height: 11px; margin-right: 10px; } .post-meta .post-meta-item:last-child { margin-right: 0; } .post-meta .post-meta-item, .post-meta .post-meta-item a { color: #333333; } .post-meta .post-meta-item a:hover { color: #2ba9e0; } .post-meta .post-meta-item i{ padding-right: 5px; } .post-tags div { display: inline-block; } .post-tags div a { margin-right: 5px; } /* FEED ICON */ .feed-icon { display: block; clear: both; padding-left: 15px; } .feed-icon:before { content: "\e75f"; font-family: 'themify'; margin-right: 5px; } .path-frontpage .feed-icon { display: none !important; visibility: hidden !important; } .blog-post blockquote { padding: 0; margin: 0 0 20px; font-size: 17.5px; border-left: none; font-style: italic; } /* POST CONTENT */ .post-meta-item, .post-meta-item div { display: inline-block; } .post-content .post-image { margin-bottom: 20px; } .post-image img, .post-thumb img { width: 100%; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; } /*---------------------------------------------------*/ /* GRIDS /*---------------------------------------------------*/ /* GRID 5 */ .col-55, .col-sm-55, .col-md-55, .col-lg-55, .col-xl-55 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } @media (min-width: 576px) { .col-sm-55 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } @media (min-width: 768px) { .col-md-55 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } @media (min-width: 992px) { .col-lg-55 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } @media (min-width: 1200px) { .col-xl-55 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } /* GRID BOOTSTRAP */ .grid-wrapper { margin-right: -10px; margin-left: -10px; } .grid-item { margin-bottom: 20px; padding-left: 10px; padding-right: 10px; display: flex; } .grid-noppading { padding-left: 10px; padding-right: 10px; } .grid-noppading .grid-item { margin-bottom: 0; padding-left: 0; padding-right: 0; } /*---------------------------------------------------*/ /* LATEST POST /*---------------------------------------------------*/ .blog-post-teaser { position: relative; overflow: hidden; margin-bottom: 20px; } .blog-post-teaser .post-thumb { margin-bottom: 0; transition: 0.5s; min-height: 55px; position: relative; overflow: hidden; } .blog-post-teaser .post-thumb:hover img { transform: scale(1.02,1.02); } .blog-post-teaser .post-content-wrap { position: relative; z-index: 1; } .blog-post-teaser .post-title-wrap { position: relative; display: table; height: 40px; width: 100%; margin-bottom: 8px; } .blog-post-teaser .post-title { margin-bottom: 0; vertical-align: middle; display: table-cell; } .blog-post-teaser .post-meta { margin: 0; padding: 20px 0 5px 0; display: flex; } .latest-post .blog-post-teaser .post-content { padding-bottom: 0 !important; } .post-link { display: block; } .blog-post-teaser .post-cat:before { content: "."; margin: 0 10px 0 5px; font-size: 20px; line-height: 0; } .blog_standard .blog-post-teaser .post-title { font-size: 20px; } .blog_standard .blog-post-teaser .post-meta{ margin: 0; padding: 8px; margin-bottom: 10px; background-color: #f9f9f9; } .blog_standard .blog-post-teaser .post-title-wrap, .blog_list .blog-post-teaser .post-title-wrap { height: auto; margin-bottom: 15px; } .blog_standard .blog-post-teaser .post-content { padding: 20px 20px 15px 20px; } /* VIDEO POST */ .post-thumb .entry-video a:after { content: "\e6ad"; font-family: 'themify'; font-size: 20px; line-height: 46px; width: 50px; height: 50px; border: 2px solid #ffffff; border-radius: 50%; color: #ffffff; text-align: center; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } /* BLOG POST FULL */ .blog-post-full .post-meta { margin-bottom: 25px; padding: 0 0 10px 0; border-bottom: 1px solid #f8f8f8; } .blog-post-full .post-content { padding-top: 25px; } .recent-post { margin-bottom: 15px; } .recent-post .post-title { margin: 0 0 5px 0; font-size: 14px; font-weight: 600; line-height: 1.2; } .recent-post:last-child { border: none; margin-bottom: 0; } .recent-post .post-time { font-size: 11px; } .post-read-more { text-align: right !important; margin-top: 20px; } /* RECENT POST TAB */ .blog-tab .nav-tabs > li { margin-bottom: -2px; } .blog-tab .recent-post .post-title { font-size: 14px; } .post-slide-content { display: inline-block; background-color: rgba(255, 255, 255, 0.8); padding: 25px 40px; } .blog-slider-carousel .post-slide-content { background-color: rgba(0, 0, 0, 0.5); padding: 15px 15px; } .post-slider .slide-content { text-align: center; } .post-slide-content, .post-slide-content a { color: #333333; } .blog-slider-carousel .post-slide-content, .blog-slider-carousel .post-slide-content a { color: #ffffff; } .post-slide-content .post-slide-term a { text-transform: uppercase; font-size: 11px; padding: 5px; display: block; } .post-slide-content .post-slide-read-more a { font-size: 14px; } .blog-slider-carousel .post-slide-title { font-size: 15px; } /*Read more button*/ a.read-more { text-transform: uppercase; -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; } /*---------------------------------------------------*/ /* TAGS /*---------------------------------------------------*/ .tag-cloud li { display: inline-block; margin: 0 3px 0 0; position:relative; font-size: 12px; } .tag-cloud li a { border: 1px solid #f2f2f2; padding: 12px; line-height: 1; float: left; color: #999999; } .tag-cloud li a:hover { border-color: #2ba9e0; background-color: #2ba9e0; color: #ffffff; } .tag-cloud .tag-name{ color: #666666; display: inline-block; letter-spacing: 1px; float:left; } .tag-cloud .tag-count { background: rgba(0,0,0,0.01); border-color: #ecf0f1; border-style: solid; border-width: 1px; display: inline-block; padding: 7px 9px !important; color: #aaa; position: relative; margin-left: -1px; float: left; } .tag-cloud .tag-count:before { border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #d6d6d6; border-style: solid; border-width: 4px; content: ""; display: block; left: 0; position: absolute; top: 13px; } .tag-cloud .tag-count:after { border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #ffffff; border-style: solid; border-width: 4px; content: ""; display: block; left: -1px; position: absolute; top: 13px; } .tag-cloud li .tag-name a:hover { border-color: #ecf0f1; background-color: transparent; color: #2ba9e0; } /* MENU TAG */ .menu-tag li { display: inline-block; } .menu-tag a { margin-right: 4px; padding-right: 8px; line-height: 1; border-right: 1px solid #adadad; } .menu-tag li:last-child a { border-right: none; margin-right: 0; padding-right: 0; } /*---------------------------------------------------*/ /* COMMENT /*---------------------------------------------------*/ .comment-wrap{ overflow: hidden; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #F5F5F5; } .comment-wrap .author-details{ float: left; width: 20%; } .comment-wrap .author-comments { padding-left: 15px; float: left; width: 80%; } .comment-submitted { padding: 0; font-size: 12px; margin-bottom: 5px; display: block; } .comment-wrap .author-comments h3{ margin-top: 6px; font-size: 20px; } .comment-wrap .author-comments p{ margin-bottom: 10px; } .comment-wrap ul.links.inline { float: right; margin-bottom: 0; } .comment-wrap ul.links.inline .comment-reply a:before { font-family: 'themify'; content: "\e6bc"; margin-right: 5px; } .comment-form { margin-bottom: 5px; display: block; } .comment-form label { display: block; font-weight: 400; text-transform: uppercase; } .comment-form .form-text, .comment-form .form-textarea, .comment-form .form-email, .comment-form .form-url { width: 100%; } .comment-form .filter-wrapper { display: none; visibility: hidden; } .post-comment .post-stats { font-size: 20px; display: block; margin-bottom: 40px; border-bottom: 1px solid #eeeeee; padding-bottom: 8px; margin-top: 55px; font-weight: 600; } /* USER BLOCK */ .user-block { text-align: center; } .user-picture { width: 120px; height: 120px; margin: 0 auto 15px auto; } .user-bio { margin: 15px 0; } /*---------------------------------------------------*/ /* PORTFOLIO /*---------------------------------------------------*/ .portfolio-item { position: relative; margin: 0; padding: 0; white-space: nowrap; overflow: hidden; } .portfolio-img img { width: 100%; } .portfolio-img:hover img { opacity: 0.4; } .portfolio-item .portfolio-overlay { position: absolute; display: block; top: 10px; bottom: 10px; left: 10px; right: 10px; padding: 10px; opacity: 0; background-color: rgba(0, 0, 0, 0.7); -webkit-transition: all 0.3s ease-in 0.4s; transition: all 0.3s ease-in 0.4s; } .portfolio-item:hover .portfolio-overlay { opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; } .portfolio-item * { color: #ffffff; } .portfolio-item .portfolio-title { position: relative; font-size: 15px; line-height: 24px; opacity: 0; margin-bottom: 0; padding: 0 10px 5px; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all 0.3s ease-in-out 0.1s; transition: all 0.3s ease-in-out 0.1s; } .portfolio-item:hover .portfolio-title { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .portfolio-item .portfolio-term { font-size: 11px; text-transform: uppercase; position: relative; padding: 0 10px; opacity: 0; margin-bottom: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .portfolio-item:hover .portfolio-term { opacity: 0.9; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .portfolio-item .portfolio-label { position: absolute; top: 50%; text-align: center; width: 100%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .portfolio-item:hover .colorbox { background-color: rgba(0, 0, 0, 0.18); } .portfolio-item:hover .colorbox:before, .portfolio-item:hover .colorbox:after { opacity: 1; } /* SINGLE PORTFOLIO */ .portfolio-meta { margin-top: 40px; } .portfolio-meta-item { margin-bottom: 7px; } .portfolio-meta-item div { display: inline-block; } .portfolio-meta .btn { margin-top: 10px; font-size: 12px; } .portfolio-meta-item-title { font-weight: 700; text-transform: uppercase; } .portfolio-title-detail { border-bottom: 1px solid #eeeeee; padding-bottom: 10px; } .related-project .portfolio { width: 100%; } .thumb-list { padding: 0 3px 3px 0 ; } .thumb-list:hover img { opacity: 0.7; } .portfolio-slide .portfolio .portfolio-item { padding: 0; } .portfolio-meta .button { margin-top: 30px; } /*---------------------------------------------------*/ /* GALLERY /*---------------------------------------------------*/ .gallery-item { padding: 0; } .thumb-list .gallery-item { width: 100% !important; } /*---------------------------------------------------*/ /* DRUPAL COMMERCE /*---------------------------------------------------*/ /* CART */ .cart-form tbody tr td, .cart-form thead tr th { text-align: center; border: none; } td.subtotal-title { padding: 10px 0 10px 5px; } .cart-form .delete-order-item { background-image: url("../images/close.png"); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; background-color: transparent !important; background-size: 15px; padding: 8px; box-shadow: none; } .cart-block--summary { position: relative; } .cart-block--summary__count { display: inline-block; position: absolute; top: -7px; right: 7px; line-height: 1; width: auto; height: auto; background-color: #2ba9e0; text-align: center; border-radius: 50%; font-size: 10px; padding: 3px 5px; color: #ffffff; } .cart-block--contents { width: 300px; right: 0; padding: 5px; margin-top: 24px; color: #555555; background: #ffffff; border: 1px solid #eaeaea; box-shadow: 0 5px 9px rgba(0, 0, 0, 0.1); text-align: left; } .cart-block--contents__items { overflow-x: hidden; overflow-y: auto; max-height: 300px; font-size: 12px; } .light-cart_icon i { color: #ffffff; } .cart--cart-block img { width: 60px; } .cart--cart-block table, .cart--cart-block table tbody, .cart--cart-block tbody tr td, .layout-checkout-form .layout-region-checkout-secondary table tbody, .layout-checkout-form .layout-region-checkout-secondary tbody tr td { border: none; } .cart--cart-block table tr { border-bottom: 1px solid #f3f3f3; } .cart--cart-block tbody tr td { padding: 8px 5px; } .cart--cart-block td.views-field-quantity { padding-right: 0; } .cart--cart-block .cart-block-count { position: absolute; top: 0; left: 15px; display: table; width: 20px; height: 20px; line-height: 20px; font-size: 9px; background: #eaeaea; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .cart--cart-block .cart-block-link { font-weight: 600; margin-bottom: 10px; text-align: right; padding: 5px; line-height: normal; } .cart--cart-block .cart-block-link a { padding: 0 25px; background-color: #2ba9e0; color: #ffffff; height: 40px; line-height: 40px; text-align: center; display: block; } .cart--cart-block .cart-block-link a:hover { color: #ffffff; background-color: #333333; } .cart--cart-block .cart-block-empty { padding: 20px; } .cart--cart-block:hover .cart-block-empty { display: block; } .page-title .field-order-number .field-label, .page-title .field-order-number .field-item { float: none; display: inline-block; } /* CHECKOUT */ label, .customer-information .field_label, .customer-information .field__label { font-weight: 700; } .commerce-checkout-flow legend { border-bottom: 2px solid #d7d7d7; padding-bottom: 5px; margin-bottom: 15px; font-size: 20px; font-weight: 700; color: #2ba9e0; } .commerce-checkout-flow .form-composite > legend { border: none; font-size: inherit; color: inherit; border-bottom: 1px solid #f4f4f4; } .commerce-checkout-flow input:not(.button), .commerce-checkout-flow .form-select { width: 100%; } .commerce-checkout-flow input.form-radio { width: auto; } .commerce-checkout-flow .address-container-inline { display: flex; width: 100%; } .commerce-checkout-flow .address-container-inline .form-item { width: 100%; margin-right: 15px; } div.address-container-inline > .form-item:last-child { margin-right: 0; } .credit-card-form__expiration .form-select { min-width: 90px; } #shipping-information-wrapper { margin-bottom: 60px; } .checkout-pane-shipping-information .button { margin-top: 20px; } .layout-checkout-form .layout-region-checkout-secondary img { width: 70px; overflow: hidden; } .layout-region-checkout-secondary { margin-bottom: 30px; } table { margin: 0; border: none; } .layout-region-checkout-secondary .order-total-line { border-bottom: none; } .order-total-line, .order-total-line__total { padding: 10px; } .order-total-line__total { background-color: #efefef; } .layout-checkout-form .order-total-line__total { background-color: #efefef; } table .views-field-edit-quantity .form-item, table .views-field-remove-button .button { margin: 0; } .checkout-pane-order-summary { padding: 40px 25px; background-color: #f8f8f8; } .layout-checkout-form .layout-region-checkout-secondary table tr { border-bottom: 1px solid #efefef; } .checkout-pane-review .fieldset-legend a { color: #27b160; } .layout-checkout-form .form-actions a { font-weight: 600; margin-left: 10px; } .checkout-progress--step:before { content: counter(checkout-progress) ""; counter-increment: checkout-progress; display: inline-block; width: 25px; height: 25px; text-align: center; line-height: 25px; margin-right: 8px; background-color: #f6f6f6; } .checkout-progress .checkout-progress--step__current:before, .checkout-progress .checkout-progress--step__previous:before { background-color: #27b160; color: #ffffff; } .field--type-entity-reference, .form-wrapper { display: block; } .field--name-purchased-entity { margin-bottom: 25px; } .product-post .product-title { font-size: 20px; margin-bottom: 5px; } .commerce-order-item-add-to-cart-form .field--name-quantity { position: relative; margin-bottom: 20px; } .commerce-order-item-add-to-cart-form .field--name-quantity .form-type-number { position: relative; } .commerce-order-item-add-to-cart-form input[type=number]::-webkit-inner-spin-button, .commerce-order-item-add-to-cart-form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .commerce-order-item-add-to-cart-form input[type=number] { -moz-appearance: textfield; } .commerce-order-item-add-to-cart-form .field--name-quantity input { width: 50px; height: 42px; line-height: 42px; display: block; margin: 0; padding: 0; margin-left: 38px; border-radius: 0; text-align: center; } .commerce-order-item-add-to-cart-form .field--name-quantity input:focus { outline: 0; } .commerce-order-item-add-to-cart-form .field--name-quantity input, .quantity-button { border: 1px solid #eeeeee; } .quantity-nav { } .quantity-button { position: absolute; bottom: 0; left: 0; cursor: pointer; width: 40px; height: 42px; line-height: 38px; text-align: center; font-size: 17px; font-weight: 600; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .quantity-button.quantity-up { left: 87px; border-left: none; } .quantity-button.quantity-down { border-right: none; } .product-post .product-add-cart .form-actions { display: inline-block; min-width: 170px; } .product-post .product-content-wrap .form-actions input[type="submit"] { width: 100%; } .product-post .field-field-short-description { border-top: 1px solid #eaeaea; margin-top: 15px; padding-top: 30px; } .product-post legend, .product-post label { margin-bottom: 10px; display: block; } .product--rendered-attribute { margin-bottom: 15px; } .product--rendered-attribute .form-item { margin: 0; margin-right: 2px; } .product--rendered-attribute .form-item:last-child { margin-right: 0; } .product--rendered-attribute label.option, .product--rendered-attribute label.option .product-attribute--color { margin-bottom: 0; border: none !important; } .product--rendered-attribute label.option .product-attribute { border: 1px solid #eaeaea; padding: 5px 7px; font-size: 10px; text-align: center; background-color: #ffffff; color: #555555; } .product--rendered-attribute__selected ~ label.option .product-attribute { font-weight: 600; } .product--rendered-attribute label.option .product-attribute--color { padding: 0 !important; background-color: transparent !important; } .product--rendered-attribute .color_field__swatch { border: 1px solid #eaeaea; } .product--rendered-attribute label.option:hover .product-attribute, .product--rendered-attribute__selected ~ label.option .product-attribute, .product--rendered-attribute__selected ~ label.option .color_field__swatch { border-color: #2ba9e0; } .product--rendered-attribute label.option .product-attribute--size { padding: 0 !important; height: 28px; line-height: 28px; width: 28px; } fieldset { margin-top: 0; } /*---------------------------------------------------*/ /* PRODUCTS /*---------------------------------------------------*/ .product-item-wrap { border: 1px solid #fcfcfc; margin-bottom: 30px; background-color: #ffffff; padding: 10px; } .product-item, .product-list-meta { overflow: hidden; position: relative; } .product-list-meta { padding: 10px 0 0 0; display: block; height: 110px; text-align: center; } .product-title { font-weight: 600; line-height: 1.2; color: #333333; } .product-add-cart .form-actions { margin-top: 0; margin-bottom: 0; position: relative; } .product-item .btn, .product-item .button { padding: 15px; border-radius: 0; font-size: 12px; line-height: 1; } .product-item .product-detail-btn { margin-top: 50%; padding: 12px 15px; } .product-item .button, .product-item .product-add-cart { display: block; width: 100%; } .product-item-wrap .form-item-qty { display: none !important; visibility: hidden !important; } .product-item:hover .product-add-cart, .product-item:hover .product-add-cart .button { margin: 0; } .product-meta { padding: 10px 0; } /* TOOLTIP */ .flag-link { position: relative; display: inline-block; } .flag-link::before { position: absolute; top: -35px; left: 50%; margin-left: -60px; background-color: #2b222a; border-radius: 5px; color: #ffffff; content: attr(title); padding: 6px; text-transform: none; transition: all 0.5s ease; width: 110px; } .flag-link::after { position: absolute; top: -4px; left: 50%; margin-left: -3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #2B222A; content: ""; font-size: 0; line-height: 0; margin-left: -5px; width: 0; } .flag-link::before, .flag-link::after { color: #efefef; font-family: monospace; font-size: 13px; opacity: 0; pointer-events: none; text-align: center; } .flag-link:focus::before, .flag-link:focus::after, .flag-link:hover::before, .flag-link:hover::after { opacity: 1; transition: all 0.75s ease; } .js-flag-message { position: absolute; display: block; width: 200px; text-align: center; right: 40px; top: 40px; z-index: 999; font-size: 11px; font-style: italic; } .product-teaser-wrap { border: 1px solid #f2f2f2; margin-top: -1px; margin-right: -1px; margin-bottom: 0; background-color: #ffffff; text-align: center; position: relative; width: 100%; } .product-teaser { background-color: #ffffff; } .product-teaser-wrap, .product-teaser, .product-teaser .product-variation-wrap, .product-teaser .product-meta-wrap, .product-teaser input[type="submit"], .product-teaser .commerce-order-item-add-to-cart-form, .product-teaser .product-image img, .product-teaser .product-icon-wrap { -webkit-transition: 0.5s; -khtml-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .product-teaser .product-meta { padding: 0; } .product-teaser .product-icon { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; color: #191919; position: absolute; top: 15px; left: -50px; cursor: pointer; opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .product-teaser .product-icon i { width: 40px; height: 40px; line-height: 40px; display: block; box-shadow: 0 15px 25px rgba(0,0,0,.08); background-color: #ffffff; color: #555555; border-radius: 50%; } .product-teaser .product-image .product-icon:nth-child(2) { top: 60px; transition: all 0.5s; } .product-teaser .product-image .product-icon:nth-child(3) { top: 110px; transition: all 0.5s 0.2s; } .product-teaser .product-image .product-icon:nth-child(4) { top: 160px; transition: all 0.5s 0.4s; } .product-teaser .product-icon:hover i { background: #333333; color: #ffffff; } .product-teaser .product-icon .action-unflag i { background: #2ba9e0; color: #ffffff; } .product-teaser:hover .product-icon { opacity: 1; left: 15px } .product-icon i { font-size: 17px; } .product-icon .flag-title { display: none; } /* PRODUCT TEASER ICON PLACEMENT */ .product-teaser .product-icon-wrap { position:absolute; } .product-teaser .product-icon { display: inline-block; position: static; } .product-teaser .product-icon-wrap { width: 100%; top: 50%; margin-top: -20px; } .product-teaser .product-icon-container { padding: 0 10px; display: inline-block; } .product-icon .flag-title { display: none; } .product-teaser .product-image { position: relative; } .product-teaser .product-image .field-item:nth-child(2) { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; padding: 0; opacity: 0; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .product-teaser:hover .product-image .field-item:nth-child(2) { opacity: 1; } .product-teaser .product-meta-wrap { padding: 15px; position: relative; } .product-teaser .product-add-cart input[type="submit"], .product-teaser .product-add-cart .button { line-height: 42px; padding: 0 24px; } .product-teaser .product-title { width: 100%; margin-bottom: 5px; } .product-teaser .product-ratings { margin-bottom: 3px; } .product-teaser { position: relative; background-color: transparent; } .product-teaser:hover { z-index: 1; } .product-teaser .product-teaser-bg { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin-bottom: -53px; visibility: hidden; opacity: 0; background-color: #ffffff; -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.07); box-shadow: 0 0 8px rgba(0,0,0,0.07); } .product-teaser:hover .product-teaser-bg { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity .3s ease,visibility 0s ease,transform .3s ease; -webkit-transition: opacity .3s ease,visibility 0s ease,-webkit-transform .3s ease; transition: opacity .3s ease,visibility 0s ease,-webkit-transform .3s ease; transition: opacity .3s ease,visibility 0s ease,transform .3s ease; transition: opacity .3s ease,visibility 0s ease,transform .3s ease,-webkit-transform .3s ease; } .product-teaser:hover .product-badge { z-index: 1; } .product-teaser .product--rendered-attribute .color_field__swatch { height: 14px !important; width: 14px !important; } .product-teaser .product--rendered-attribute label.option .product-attribute { font-size: 8px; padding: 3px 5px; } .product-teaser .product--rendered-attribute label.option .product-attribute--size { height: 16px; line-height: 16px; width: 16px; } .product-teaser .product-variation-wrap { padding: 0; margin-top: 8px; position: relative; } .product-teaser .product-add-cart .form-actions { position: absolute; bottom: -50px; left: 0; width: 100%; opacity: 0; transition: 0.3s; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: opacity .3s ease,visibility 0s ease,transform .3s ease; -webkit-transition: opacity .3s ease,visibility 0s ease,-webkit-transform .3s ease; transition: opacity .3s ease,visibility 0s ease,-webkit-transform .3s ease; transition: opacity .3s ease,visibility 0s ease,transform .3s ease; transition: opacity .3s ease,visibility 0s ease,transform .3s ease,-webkit-transform .3s ease; } .product-teaser:hover .product-add-cart .form-actions { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } .product-teaser .commerce-order-item-add-to-cart-form .field--name-quantity, .product-teaser .field--name-purchased-entity legend { display: none !important; } .product-teaser .field--name-purchased-entity { margin-bottom: 0; } .product-teaser .product--rendered-attribute { margin: 0; } .product-teaser .product--rendered-attribute .radios { margin-bottom: 5px; } .product-teaser .product--rendered-attribute .product-teaser .product--rendered-attribute .form-item { margin-right: 0; } .product-teaser .product--rendered-attribute .form-item { vertical-align: top; } .product-teaser-no-attribute .product-variation-wrap .form-item, .product-teaser.has-no-options .has-option-variation .form-actions, .product-teaser.has-options .has-no-option-variation .form-actions { display: none; } .product-price, .product-old-price { display: inline-block; } .product-price { color: #2ba9e0; font-weight: 600; } .product-old-price { font-weight: normal; font-size: 14px; margin-right:5px; color: #b3b3b3; } .product-teaser .product-price { font-size: 16px; } .product-post .product-meta { margin-top: 20px; margin-bottom: 0; } .product-post .product-meta .form-item-qty label { display: none; } .product-post .product-icon-wrap, .product-post .product-icon, .product-post .product-add-cart { display: inline-block; } .product-post .product-variation-wrap { position: relative; margin-top: 20px; } .product-post .product-add-cart { width: 100%; } .product-post .product-price-wrap { margin-bottom: 10px; } .product-post .product-price { font-size: 25px; } .product-post .product-old-price { font-size: 19px; margin-left: 7px; } .product-post .product-meta .field-label-inline .field-label { min-width: 85px; } .product-post .product-meta .product-meta-item { margin-top: 7px; } .product-post .product-icon { margin-right: 10px; padding-right: 15px; position: relative; } .product-post .product-icon:last-child { margin: 0; padding: 0; } .product-post .product-icon:after { content: "|"; position: absolute; right: 0; top: 0; line-height: 13px; opacity: 0.4; } .product-post .product-icon:last-child:after { display: none; } .product-post .product-icon i, .product-post .product-icon .flag-title { display: block; float: left; line-height: 15px; } .product-post .product-icon i { height: auto; width: auto; font-size: 15px; margin-right: 10px; } .product-post .field-sku, .product-post .field-field-stock-level { display: inline-block; } .product-post .field-field-stock-level p { margin: 0; } .product-post .product-stock .available-stock, .product-post .product-stock .out-of-stock { font-weight: bold; } .vote-form, .product-post .product-stock, .product-post .product-stock.out-stock .available-stock, .product-post .product-stock.in-stock .out-of-stock { display: none; } .product-post .product-stock .stock-availability, .product-post .product-stock .available-stock, .product-post .product-stock .out-of-stock { display: inline-block; } .product-post .product-stock .stock-availability, .product-post .product-stock .available-stock, .product-post .product-stock .out-of-stock { float: left; margin-right: 7px; } .product-post .product-stock .stock-availability { min-width: 85px; } .product-post .product-stock .out-of-stock { color: red; } .product-post .product-stock .available-stock { color: green; } .product-info .panel-heading .panel-title > a:after { left: auto; right: 0; border: none; } .product-info .panel-heading .panel-title > a { padding: 12px 45px 12px 0; border: none; border-bottom: 1px solid #eeeeee; font-weight: 700; font-size: 20px; } .product-info .panel-group .panel-heading + .panel-collapse .panel-body { border: none; padding: 20px 0; } .taxonomy-term.vocabulary-brand { background: #eeeeee; padding: 20px; float: left; margin-bottom: 25px; width: 100%; } .path-taxonomy .taxonomy-term.vocabulary-brand .field-description { padding-top: 20px; } /* .details-title { font-size: 20px; text-transform: uppercase; font-weight: 700; } */ .views-element-container header { margin-bottom: 15px; } .product-catalog header { margin-bottom: 0; } /* LIST GRID SWITCH */ .product-catalog .switch-icon { position: absolute; top: 15px; left: 0; } .switch-icon span { display: inline-block; margin-right: 5px; cursor: pointer; } .switch-icon .active { color: #2ba9e0; } .list-grid { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .list-grid .product-teaser-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .list-grid .product-teaser .product-image { -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; } .list-grid .product-teaser .product-meta-wrap { -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; text-align: left; } .list-grid .product-teaser .product-meta-wrap { padding: 25px 15px 15px 30px; } .list-grid .product-teaser .product-add-cart .form-actions { transform: none !important; opacity: 1; bottom: 0; } .list-grid .product-teaser .product-teaser-bg, .product-teaser .product-desc { display: none; } .list-grid .product-teaser .product-desc { display: block; } .list-grid .product-teaser .product-desc, .list-grid .product-teaser .product-desc p { margin-top: 8px; } .list-grid .product-teaser .product-title { font-size: 17px; } .list-grid .product-teaser .product-variation-wrap { padding-bottom: 42px; } .list-grid .product-teaser:hover .product-price-wrap { opacity: 1; } .product-list-wrap { text-align: left; width: 100%; } .product-list-wrap:hover { -webkit-transform: scale(0.99); transform: scale(0.99); -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.07); box-shadow: 0 0 8px rgba(0,0,0,0.07); } .product-list-wrap .product-teaser { margin: 0; padding: 0; } .product-list-wrap .product-image, .product-list-wrap .product-meta-wrap { padding: 5px 15px; } .product-list-wrap .product-meta-wrap { padding-top: 20px; } .product-list-wrap .product-image .field-field-image { display: table; width: 100%; height: 100%; } .product-list-wrap .product-image .field-field-image .field-item { display: table-cell; vertical-align: middle; } .product-list-wrap .product-ratings { margin-top: 0; margin-bottom: 5px; } /* VIEWS EXPOSED FILTER */ .views-exposed-form { margin-bottom: 15px; padding: 0; } .views-exposed-form form { display: flex; background-color: #ffffff; } .views-exposed-form form .form-item * { color: #555555 !important; } .views-exposed-form .form-item, .views-exposed-form .form-actions { display: inline-block; margin: 0 0 0 5px; } .views-exposed-form select { padding-left: 15px; border: 1px solid #ecedee; } .header .views-exposed-form { margin-bottom: 0; } .header .views-exposed-form form { border: 1px solid #eaeaea; max-width: 600px; position: relative; padding-right: 50px; } .header .views-exposed-form input, .header .views-exposed-form .nice-select { border: none; margin-top: 0; height: 48px; line-height: 48px; width: 100%; } .header .views-exposed-form .nice-select { border: none; min-width: 130px; } .header .views-exposed-form .form-item { position: relative; } .header .views-exposed-form .form-item:before { content: ""; width: 1px; height: 22px; background-color: #eaeaea; display: block; position: absolute; top: 50%; left: 0; margin-top: -11px; } .header .views-exposed-form form .form-item:first-child:before { display: none; } .header .views-exposed-form .form-item, .header .views-exposed-form .form-actions { margin: 0; } .header .views-exposed-form .js-form-type-textfield { width: 100%; } .header .views-exposed-form .form-actions { position: absolute; top: -1px; right: -1px; } .header .views-exposed-form .form-actions .button { font-family: 'themify'; font-size: 20px; padding: 0; width: 50px; height: 50px; } .product-catalog .views-exposed-form { text-align: right; } .product-catalog .views-exposed-form .form-item label { text-transform: uppercase; font-size: 10px; margin-right: 5px; } .product-catalog .views-exposed-form .form-item .select-wrapper { display: inline-block; } .product-catalog .views-exposed-form .form-actions { display: none; } /* PRODUCT CATEGORY IMAGE */ .product-category { position: relative; overflow: hidden; } .product-category-name-wrap { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; z-index: 1; text-align: center; } .product-category-name-wrap a { position: relative; display: inline-block; top: 50%; margin-top: -24px; } .count-product-category .product-category-url { padding-right: 9px; } .product-category-count { background-color: #ffffff; display: inline-block; color: #555555; width: 30px; height: 30px; font-size: 11px; line-height: 30px; margin-left: 9px; position: relative; margin-top: 9px; } /* PRODUCT CATEGORY IMAGE 2 */ .product-category2 { width: 100%; transition: 0.3s; } .product-category2 .product-category-image { border-radius: 50%; overflow: hidden; transition: 0.3s; } .product-category2:hover .product-category-image { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.07); box-shadow: 0 0 8px rgba(0,0,0,0.07); } .product-category2 span, .product-category3 span, .product-category2 a, .product-category3 a { display: block; } .product-category2 .product-category-label { margin-top: 10px; font-weight: 600; line-height: 1.2; } .product-category3 .product-category-label { margin-top: 15px; font-weight: bold; line-height: 1.2; text-transform: uppercase; font-size: 11px; } /* PRODUCT CATEGORY ICON */ .product-category-icon { border: 1px solid #eaeaea; margin-bottom: 1px; width: 100%; background-color: #ffffff; } .product-category-icon a { display: block; padding: 20px; } .product-category-icon-image { display: block; padding: 20px; opacity: 0.7; transition: 0.3s; } .product-category-icon-image img { max-width: 60px; margin: auto; } .product-category-icon:hover { background-color: #2ba9e0; border-color: #2ba9e0; color: #ffffff; } .product-category-icon:hover .product-category-icon-image { opacity: 1; } .product-category-icon:hover .product-category-icon-image img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .product-category-icon:hover .product-category-label { color: #ffffff; } /* PRODUCT BRAND */ .brand-logo img { -webkit-transition: 0.5s; transition: 0.5s; opacity: 0.6; } .brand-logo:hover img { opacity: 1; } .grid-item .brand-logo { padding: 15px 30px; border: 1px solid rgba(0,0,0,0.02); margin-top: -1px; margin-left: -1px; } /* PRODUCT BADGES */ .product-badge { position: absolute; top: 10px; left: 10px; } .product-badge .badge-label { font-size: 8px; text-align:center; display: block; color: #ffffff; width: 35px; height: 35px; line-height: 35px; text-transform: uppercase; } .product-badge .badge-new { background-color: #53d542; } .product-badge .badge-sale { background-color: #4774c7; } .product-badge .badge-hot { background-color: #ff421d; } .product-icon-left .product-badge { left: auto; right: 10px; } .btn-curve .product-badge .badge-label { height: auto; line-height: 24px; } /* PRODUCT ICON BOX */ .box-icon .box-icon-items:last-child { border-right: none; } .box-icon .box-icon-title { margin-bottom: 3px; } .box-icon .box-icon-item .box-desc { text-align: left; } .box-icon .box-icon-item .box-desc, .box-icon .box-icon-item .box-icon { display: inline-block; vertical-align: middle; } .box-icon-item .box-desc p { color: #868686; } .box-icon .box-icon-item .box-desc p:last-child { margin-bottom: 0; } .box-icon .box-icon-item .box-icon { margin-right: 15px; font-size: 35px; -webkit-transform: translateZ(0); transform: translateZ(0); } .box-icon-plain { padding: 15px 20px; border: 1px solid rgba(0,0,0,0.1); border-radius: 2px; } .box-icon-plain .box-icon-items { padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,0.1); } .box-icon-plain .box-icon-items:last-child { border-bottom: none; } .box-icon-plain .box-icon-item .box-icon { font-size: 30px; } .box-icon-center .box-icon-item .box-icon { font-size: 35px; } .box-icon-item:hover .box-icon { -webkit-animation-name: icon-float, hvr-icon-bob; animation-name: icon-float, hvr-icon-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } @-webkit-keyframes hvr-icon-bob { 0% { -webkit-transform:translateY(-6px);transform:translateY(-6px) } 50% { -webkit-transform:translateY(-2px);transform:translateY(-2px) } 100% { -webkit-transform:translateY(-6px);transform:translateY(-6px) } } @keyframes hvr-icon-bob { 0% { -webkit-transform:translateY(-6px);transform:translateY(-6px) } 50% { -webkit-transform:translateY(-2px);transform:translateY(-2px) } 100% { -webkit-transform:translateY(-6px);transform:translateY(-6px) } } @-webkit-keyframes icon-float { 100% { -webkit-transform:translateY(-6px); transform:translateY(-6px) } } @keyframes icon-float { 100% { -webkit-transform:translateY(-6px); transform:translateY(-6px) } } /* RATING STARS */ .product-ratings .form-item { margin: 0; } .product-teaser .br-theme-css-stars .br-widget { height: 20px; } .product-teaser .br-theme-css-stars .br-widget a { float: none; font-size: 20px; margin-right: 1px; line-height: 1; } .br-theme-css-stars .br-widget a:last-child { margin-right: 0; } .br-theme-css-stars .br-widget a.br-selected:after { color: #f6d000; } .vote-result { color: #999999; font-size: 13px; } .product-teaser .product-icon .ajax-progress { line-height: 40px; } .product-category-link { position: relative; display: inline-block; padding-right: 25px; } .product-category-link .list-count { position: absolute; right: 0; top: 3px; width: 15px; height: 15px; background-color: #333333; color: #ffffff; text-align: center; line-height: 17px; font-size: 9px; } /* FACETS */ .js-facets-checkbox-links, .item-list__checkbox, .facet-item { list-style-type: none; } .facet-item { float: left; width: 100%; padding-top: 5px; padding-bottom: 5px; } .facets-checkbox { margin: 4px 0 0; margin-top: 1px; line-height: normal; display: inline-block; top: 3px; width: 15px; height: 15px; position: relative;; } .js-facets-checkbox-links input[type="checkbox"], .facet-list li { margin: 0; } .js-facets-checkbox-links label { margin: 0; font-weight: normal; float: left; } .facet-item label span { display: inline-block; } .facet-item__count { font-size: 13px; margin-left: 2px; } .facet-list .is-active { color: #222222; font-weight: 700; } .facet-list .is-active .js-facet-deactivate { color: #2ba9e0; } /* CATEGORY MENU */ .category-menu .block-title-wrap, .category-menu .block-title { line-height: 50px; } .category-menu, .category-menu .container-wrap { position: relative; } .cat-button { display: none; } .header .category-menu { display: block; } .category-menu .nav { position: relative; border: 1px solid #eaeaea; border-top: none; width: 100%; top: 100%; z-index: 9; padding: 0; padding: 10px 0 20px 0; } .category-menu .block-title-wrap { position: relative; cursor: pointer; background-color: #2ba9e0; padding: 0 25px; margin: 0; transition: 0.3s; } .sidebar .category-menu .block-title-wrap { border-radius: 5px 5px 0 0; } .sidebar .category-menu .block-title-wrap.active { border-radius: 0; } .category-menu .block-title { margin-bottom: 0; font-size: 17px; letter-spacing: normal; color: #ffffff; } .category-menu .cat-icon { line-height: 50px; font-size: 20px; position: absolute; right: 0; } .category-menu .nav { display: block; border-radius: 0 0 5px 5px; } .category-menu .mega-menu > ul > li { display: block; } .category-menu li, .category-menu li a { position: relative; } .category-menu li a { display: block; margin: 0; padding: 0 25px; } .category-menu ul.menu li a, .category-menu ul.menu .more-toggler { margin-bottom: 0; color: #333333; } .header .category-menu .nav { position: absolute; display: none; background-color: #ffffff; } .header .open.category-menu .nav { display: block; transition: 0.3s; } .header .open.category-menu.closed .nav { display: none; } .mega-menu > ul .more-toggler { padding: 0 25px; line-height: 50px; cursor: pointer; font-weight: 600; clear: both; } .more-toggler:after { content: "+"; font-size: 22px; right: 20px; position: absolute; } .more-toggler.less:after { content: "-"; } /* PICZOOMER */ .piczoomer, .piczoomer .field-item { position: relative; } .piclist { margin-top: 20px; } .piclist .field-item { cursor: pointer; } .piclist .selected { border: 2px solid #eaeaea; cursor: default; } .piczoomer-pic-wp { position: relative; overflow: hidden; } .piczoomer-pic-wp:hover .piczoomer-cursor { display: block; } .piczoomer-zoom-pic { position: absolute; top: 0; left: 0; } .piczoomer-zoom-wp { display: none; position: absolute; top: 0; left: 100%; height: 100% !important; z-index: 99; overflow: hidden; border: 1px solid #efefef; background-color: #ffffff; } .piczoomer-zoom-wp img { max-width: none !important; } .piczoomer-pic { width: 100%; } .piczoomer-cursor { display: block; cursor: pointer; width: 100px; height: 100px; position: absolute; top: 0; left: 0; } /* DIALOG */ .product-quick-view .product-teaser-wrap .form-actions input[type="submit"], .product-quick-view .product-teaser-wrap .form-actions .btn { width: auto !important; height: 46px !important; padding: 16px 25px !important; } .product-quick-view .product-post .field-title { font-size: 18px; } .ui-dialog { font-family: 'Muli', sans-serif; color: #555555; font-size: 12px; min-width: 300px; z-index: 9999; } .product-quick-view { padding: 0 0 2em 0; } .product-quick-view .ui-dialog-content { padding: 2em 2em 0 2em; height: auto !important; max-height: none !important; overflow-x: hidden; min-width: 300px; } .ui-dialog-position-side, .ui-dialog-position-side .ui-dialog-content { min-width: auto; } .product-quick-view .ui-widget-header { border: none; background: none; color: #333333; font-weight: 700; } /* .ui-dialog .ui-dialog-titlebar { padding: 0; position: relative; } */ .product-quick-view .ui-dialog-title { display: none !important; } .ui-dialog-position-side .ui-dialog-title { display: block; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; top: -15px; right: -15px; width: 30px; margin: 0; padding: 1px; height: 30px; font-size: 25px; color: #2a2a2a; background: #ffffff; text-indent: -9999px; z-index: 1; line-height: 30px; } .ui-dialog-titlebar-close { cursor: pointer; } #drupal-off-canvas .form-select { background-color: #ffffff !important; } .ui-button .ui-icon { background: none !important; } .ui-dialog .ui-dialog-titlebar-close span { display: none; } .ui-widget.ui-dialog-titlebar-close { line-height: 0; } .ui-dialog-titlebar-close:after { content: "×"; text-indent: 0; display: block; } .ui-dialog-titlebar-close:before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .product-quick-view .ui-dialog-buttonpane { display: none !important; visibility: hidden !important; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-widget-overlay { background: #000000; opacity: .6; } .ui-widget-content a { color: #2ba9e0; } .ui-draggable .ui-dialog-titlebar { cursor: move; } #drupal-off-canvas input[type="checkbox"], #drupal-off-canvas input[type="radio"] { position: absolute; } #drupal-off-canvas label.option { padding-left: 30px; } .ui-dialog .product-post .product-content-wrap .form-actions input[type="submit"] { display: block !important; } .ui-dialog .piczoomer-zoom-wp, .ui-dialog .product-meta { display: none !important; } .ui-dialog-content .product-post .product-price { font-size: 20px; } .ui-dialog-content .product-post .product-old-price { font-size: 15px; } .ui-dialog-content .color_field__swatch { width: 16px !important; height: 16px !important; } /* PROMOTION */ .promotion-container { position: relative; overflow: hidden; } .promotion-meta-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .promotion-meta { display: table; height: 100%; max-width: 65%; padding: 15px 40px; } .promotion-content { color: #555555; } .promotion-content-meta { display: table-cell; vertical-align: middle; } .promotion-item img, .promotion-layout3 .promotion-title, .promotion-layout4 .promotion-title { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .promotion-item .promotion-container:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.18); content: ""; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0); z-index: 1; opacity: 0; } .promotion-item:hover img { -webkit-transform: scale3d(1.05,1.05,1); transform: scale3d(1.05,1.05,1); } .promotion-item:hover .promotion-container:before { opacity: 1; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,120%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,120%,0); } .promotion-title { display: inline-block; position: relative; font-size: 25px; color: #333333; margin-top: 0; font-weight: bold; margin-bottom: .5rem; line-height: 1.2; } .promotion-link { display: block; } .promotion-layout1 .grid-item, .promotion-item, .promotion-item img { width: 100%; } .promotion-layout1 .grid-item:last-child { margin-bottom: 0; } .promotion-layout2 .promotion-meta { width: 70%; } /*---------------------------------------------------*/ /* DEALS BLOCK /*---------------------------------------------------*/ .deals-layout { position: relative; } .deals-block .is-countdown { background-color: transparent; border: none; } .deals-block .countdown-wrap { position: relative; top: 12px; } .deals-block .field-timer-jquery-countdown .countdown-section { font-weight: 600; padding: 0; margin-right: 20px; color: #f45000; } .deals-block .countdown-amount { text-shadow: 1px 0 1px #555555; line-height: 1.2; padding-right: 2px; } .deals-block .countdown-wrap, .deals-block .block-title-content { display: inline-block; } .deals-block .block-title-content { margin-right: 30px; } .deals-grid .field-field-product-block.row { margin-right: -10px; margin-left: -10px; } /*---------------------------------------------------*/ /* PRICE TABLE /*---------------------------------------------------*/ .pricing-table { margin-bottom: 30px; } .pricing-table .pricing-wrap { padding: 50px 30px; background: #ffffff; box-shadow: 0 1px 8px 0 rgba(0,0,0,.09); } .pricing-table .pricing-header p { margin: 0; } .pricing-table .pricing-amount div { display: inline-block; } .pricing-table .pricing-price { font-size: 45px; line-height: 1; } .pricing-table .pricing-currency { font-size: 30px; position: relative; top: -8px; } .pricing-table .pricing-duration { font-size: 12px; } .pricing-table .pricing-content { padding-top: 15px; } .pricing-table .pricing-body { position: relative; } .pricing-table .pricing-body p:last-child { margin: 0; } .pricing-table .pricing-name { margin: 15px 0; } .pricing-table .pricing-features { padding: 20px 0 10px 0; } .pricing-table .pricing-features .field-item { padding: 7px 0; font-size: 14px; } .pricing-table .pricing-features .field-item:before { content: "✓"; margin-right: 10px; } .pricing-table .featured .pricing-wrap { background-color: #19212e; color: #ffffff; } .pricing-table .featured .pricing-wrap * { color: #ffffff; } .pricing-table .featured .button:hover { background-color: #ffffff; color: #333333; } .pricing-table .pricing-btn { margin-top: 20px; padding: 0 50px; } .pricing-table .pricing-btn a { width: 100%; } /*---------------------------------------------------*/ /* SIMPLENEWS /*---------------------------------------------------*/ .simplenews-subscriber-form form { position: relative; } .simplenews-subscriber-form .block-content { max-width: 500px; min-width: 50%; margin: 0 auto; } .simplenews-subscriber-form .form-item, .simplenews-subscriber-form .form-actions, .simplenews-subscriber-form .button { margin: 0; } .simplenews-subscriber-form input { width: 100%; border-right: none; height: 48px; padding-left: 25px; padding-right: 120px; background-color: #ffffff; } .simplenews-subscriber-form .form-actions { position: absolute; right: 0; top: 0; z-index: 1; display: inline-block; } .simplenews-subscriber-form .button { width: 100%; padding: 0 20px; } .simplenews-subscriber-form .block-title-wrap { padding-left: 60px; } .simplenews-subscriber-form .block-title-wrap:before { content: "\e75a"; font-family: 'themify'; font-size: 40px; position: absolute; left: 0; } .simplenews-subscriber-form.title-light .block-title-wrap:before { color: #ffffff; } .simplenews-subscriber-form .block-title-wrap .block-subtitle { max-width: 100%; } .simplenews-subscriber-form .description, .simplenews-subscriber-form .form-item-message { display: none !important; visibility: hidden; } .user-logged-in .simplenews-subscriber-form form { height: 48px; background-color: #ffffff; border: 1px solid #eaeaea; overflow: hidden; } .user-logged-in .simplenews-subscriber-form .button { height: 46px; } .footer .simplenews-subscriber-form .field--name-mail input { padding-right: 100px; } .simplenews-subscriber-form.block-title-center .block-title-wrap { padding-left: 0; padding-right: 0; padding-top: 60px; } .simplenews-subscriber-form.block-title-center .block-title-wrap:before { left: auto; right: auto; top: 0; margin-left: -20px; } /*---------------------------------------------------*/ /* FACTS COUNTER /*---------------------------------------------------*/ .facts { margin-bottom: 20px; } .facts .count-number { font-size: 48px; font-weight: 400; } .facts .fact-title { margin: 0; font-size: 13px; text-transform: uppercase; } .facts .fact-icon { font-size: 50px; margin-right: 15px; } .fact-icon, .fact-value { display: block; width: 100%; line-height: 1.2; } .facts-border .fact-value { text-align: center !important; padding: 35px 0; border-radius: 3px; border: 2px solid rgba(234,234,234,.01); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .facts-border .facts:hover .fact-value { border: 2px solid rgba(0,0,0,0.1); } /*---------------------------------------------------*/ /* PROGRESS BAR /*---------------------------------------------------*/ .progress-content{ overflow: hidden; width: 100%; } .progress-title { display: inline-block; margin-bottom: 0; font-size: 13px; } .progress-item { margin-bottom: 20px; display: block; } .progress-bar-wrap { position: relative; display: block; margin-bottom: 10px; margin-top: 8px; background: #2ba9e0; height: 4px; width: 100%; } .progress-bar { width: 100%; background: #f2f2f2; height: 100%; position: absolute; left: 0; top: 0; } .progress-complete { position: absolute; left: -13px; display: block; top: -23px; color: #555555; font-size: 14px; } /*---------------------------------------------------*/ /* EASY PIE CHART ---------------------------------------------------- */ .chart-wrap { text-align: center; } .chart { position: relative; display: inline-block; width: 110px; height: 110px; margin-top: 5px; text-align: center; } .chart canvas { position: absolute; top: 0; left: 0; } .percent { display: inline-block; font-size: 20px; line-height: 110px; z-index: 2; } .percent:after { content: "%"; margin-left: 0.1em; font-size: .8em; } .angular { margin-top: 100px; } .angular .chart { margin-top: 0; } /*---------------------------------------------------*/ /* ACCORDION /*---------------------------------------------------*/ .collapse-item { width: 100% !important; margin-bottom: 20px; } .collapse-item .card-header { border-bottom: none; font-size: 16px; } .collapse-item .card-header a { display: block; position: relative; } .collapse-item .card-header > a:after { content: "\e622"; font-family: 'themify'; position: absolute; right: 0; top: 0; font-size: 14px; line-height: 1.5; transition: 0.3s; } .collapse-item .card-header > a.collapsed:after { content: "\e61a"; } .collapse-item .card { border: none; } /*---------------------------------------------------*/ /* TABS /*---------------------------------------------------*/ /* VERTCAL TABS */ .vertical-tabs .nav > li > a { border: 1px solid #e4e4e4; margin-bottom: 3px; } .vertical-tabs .nav > li.active a { color: #3B3B3B; } /* TABS CONTENT */ .tab-content { padding: 0; border-radius: 0 0 0 0; padding: 25px 15px; border: 1px solid #f2f2f2; display: block; margin-top: -2px; } .nav-tabs { border-bottom-color: transparent; margin-bottom: -1px; list-style-type: none; z-index: 1; position: relative; overflow: hidden; } .nav-tabs > li > a { padding: 13px 20px; margin-right: 2px; margin-top: 0; border: 1px solid #f2f2f2; border-radius: 0; display: block; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border-bottom-color: transparent; border-width: 1px; background-color: #ffffff; color: #3b3b3b; } .product-info .tab-content { margin-top: 0; border: none; padding: 0; } .product-info .nav-tabs { padding: 0; display: block; border-bottom: 1px solid #f0f0f0; margin-bottom: 40px; } .product-info .nav-tabs li { display: inline-block; } .product-info .nav-tabs > li > a { border: none !important; background-color: transparent !important; padding: 0; margin-bottom: 20px; margin-right: 30px; font-weight: 700; } .product-info h2 { font-size: 24px; } /*---------------------------------------------------*/ /* CALL TO ACTION /*---------------------------------------------------*/ .action-block { -moz-box-shadow: inset 0 0 2px #eeeeee; -webkit-box-shadow: inset 0 0 2px #eeeeee; box-shadow: inset 0 0 2px #eeeeee; } .text-light.action-block { box-shadow: none; } .action-block .cta-wrap { padding: 0; } .action-block .cta-text { margin-top: 10px; position: relative; } .action-block .block-title-wrap { padding-left: 0 !important; } .action-block .block-title-content { max-width: 700px; } .cta-link { display: inline-block; } .cta-style1 .action-block .cta-text { max-width: 70%; margin: auto; } .action-block-1.text-center .block-title { text-align: center !important; } .action-block-1 .block-title-wrap { margin-bottom: 20px; } .action-block-2 .cta-link { text-align: right; } .action-block-2 .block-title-wrap { margin-bottom: 0; } #page .cta-style2 .block, #page .cta-style3 .block { padding-top: 45px; padding-bottom: 40px; } .list-icon { list-style-type: none; font-weight: bold; } .list-icon li { line-height: 1; margin-bottom: 15px; } .list-icon i { display: inline-block; margin-right: 10px; color: #2ba9e0; } .dark-bg .list-icon i, .colored-bg .list-icon i, .text-light .list-icon i { color: #ffffff !important; } /*---------------------------------------------------*/ /* DROPCAPS /*---------------------------------------------------*/ .dropcap { font-size: 55px; font-weight: 700; text-transform: uppercase; text-align: center; float: left; display: inline-block; width: 55px; height: 55px; margin-right: 14px; position: relative; top: 9px; margin-top: 10px; } .dropcap.square-dropcap, .dropcap.round-dropcap { font-size: 35px; top: 3px; margin-top: 0; margin-right: 22px; padding-top: 17px; } .dropcap.square-dropcap.white-bg, .dropcap.round-dropcap.white-bg { border: 1px solid #333333; } /*---------------------------------------------------*/ /* BLOCKQUOTES /*---------------------------------------------------*/ blockquote { font-style: italic; font-family: 'times'; border-left: 3px solid #2ba9e0; position: relative; padding: 0 20px; margin: 30px 20px; } /* VIDEO STYLES */ iframe { max-width: 100%; } video { width: 100% !important; height: auto !important; min-width: 100%; max-width: 100%; max-height: 100%; } /* AJAX PROGRESS THROBBER */ .ajax-progress-fullscreen { background-color: transparent; background-image: url(../images/small-preloader.gif); border-radius: 0; height: 24px; opacity: 1; } .ajax-progress, .ajax-progress.ajax-progress-throbber { background-color: rgba(255, 255, 255, 0.5) !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; text-align: center; padding-top: 250px; } .ajax-progress-throbber .throbber { background: transparent url(../images/small-preloader.gif) no-repeat 0px center; display: inline-block; padding: 5px; width: 25px; height: 25px; vertical-align: middle; } .ajax-progress-throbber .message { font-size: 16px; margin-left: 15px; } /* QUICKTABS */ .quicktabs-tabs { margin-bottom: 35px; } .quicktabs-tabs li { margin-right: 20px; } .quicktabs-tabs li:last-child { margin-right: 0; } .quicktabs-tabs li a { font-weight: bold; } .quicktabs-tabs li.active a { color: #2ba9e0; } .block-title-center .quicktabs-tabs { text-align: center; } .block-title-right .quicktabs-tabs { text-align: right; } /* SIMPLE BLOCK POPUP */ .spb-popup-main-wrapper { padding: 0; border: none; background-color: rgb(254, 254, 254); } .spb-popup-main-wrapper .block-title { font-size: 26px; } .spb-popup-main-wrapper .simplenews-subscriber-form { padding: 50px 40px 50px 40px; } .spb-popup-main-wrapper .simplenews-subscriber-form.block-title-center .block-title-wrap { padding-top: 0; } .spb-popup-main-wrapper .simplenews-subscriber-form .block-title-wrap:before { display: none; } .spb-popup-main-wrapper .simplenews-subscriber-form .block-title-wrap, .spb-popup-main-wrapper .simplenews-subscriber-form .block-content { float: none !important; display: block !important; padding: 0 !important; } .spb-popup-main-wrapper .simplenews-subscriber-form .block-title-wrap { margin-bottom: 35px !important; } .spb-popup-main-wrapper .simplenews-subscriber-form input { height: 42px; } .spb-popup-main-wrapper .simplenews-subscriber-form input[type="submit"] { line-height: 42px; } .spb-controls { right: 15px; top: 5px; } .spb_close { font-size: 26px; line-height: 20px; } .spb_minimize { font-size: 35px; line-height: 19px; } .spb_close, .spb_minimize { border: none; background: none; padding: 0; margin-left: 10px; } .simple-popup-blocks-global .contextual { top: 35px; } .spb_minimized { background: rgba(255, 255, 255, 0.34) none repeat scroll 0 0; border-color: rgba(0, 0, 0, 0.04); border-radius: 0; padding: 0; right: 2%; width: 45px; height: 45px; line-height: 45px; text-align: center; } .spb_minimized:before { font-family: "themify"; content: "\e659"; } .spb_center { margin-top: 0; margin-left: 0; transform: translate(-50%, -50%); } /*---------------------------------------------------*/ /* CSS UTILITY /*---------------------------------------------------*/ .nomargin { margin: 0 !important; } .nomargin-left { margin-left: 0 !important; } .nomargin-right { margin-right: 0 !important; } .nomargin-top { margin-top: 0 !important; } .nomargin-bottom { margin-bottom: 0 !important; } .nopadding { padding: 0 !important; } .nopadding-left { padding-left: 0 !important; } .nopadding-right { padding-right: 0 !important; } .nopadding-top { padding-top: 0 !important; } .nopadding-bottom { padding-bottom: 0 !important; } .noborder { border: 0 !important; } .noborder-left { border-left: 0 !important; } .noborder-right { border-right: 0 !important; } .noborder-top { border-top: 0 !important; } .noborder-bottom { border-bottom: 0 !important; } .noradius { -webkit-border-radius: 0 !important; -moz-border-radius:0 !important; border-radius:0 !important; } .pointer { cursor: pointer; } .relative { position: relative; } .absolute { position: absolute !important; top:0; left:0; right:0; bottom:0; } .fullwidth { width: 100% !important; max-width:100% !important;/* overflow: hidden;*/ } .halfwidth { width: 50% !important; } ul>li>i { margin-right: 8px; } .btn>i { padding-right: 6px; } .display-table { display: table; width:100%; height:100%; position:relative; z-index:99; } .display-table-cell { display: table-cell; width:100%; height:100%; } .vcenter { display: inline-block; vertical-align: middle; float: none; } .vertical-align { position: relative;top: 50%; transform: translateY(-50%); } .vertical-align-middle { vertical-align: middle; } .float-center { margin-left: auto; margin-right: auto; } /* CIRCLE */ .circle { -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; } .border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: box-shadow 0.25s ease; -moz-transition: box-shadow 0.25s ease; -ms-transition: box-shadow 0.25s ease; transition: box-shadow 0.25s ease; -webkit-box-shadow: 0 1px 5px rgba(216, 216, 216, 0.75); -moz-box-shadow: 0 1px 5px rgba(216, 216, 216, 0.75); -ms-box-shadow: 0 1px 5px rgba(216, 216, 216, 0.75); box-shadow: 0 1px 5px rgba(216, 216, 216, 0.75); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* PADDING */ .padding-0, .no-padding { padding: 0 !important; } .padding-3 { padding: 3px !important; } .padding-6 { padding: 6px !important; } .padding-8 { padding: 8px !important; } .padding-10 { padding: 10px !important; } .padding-15 { padding: 15px !important; } .padding-20 { padding: 20px !important; } .padding-30 { padding: 30px !important; } .padding-40 { padding: 40px !important; } .padding-50 { padding: 50px !important; } .padding-60 { padding: 60px !important; } .padding-70 { padding: 70px !important; } .padding-80 { padding: 80px !important; } .padding-90 { padding: 90px !important; } .padding-100 { padding: 100px !important; } /* PADDING TOP */ .padding-top-0 { padding-top: 0 !important; } .padding-top-10 { padding-top: 10px !important; } .padding-top-15 { padding-top: 15px !important; } .padding-top-20 { padding-top: 20px !important; } .padding-top-30 { padding-top: 30px !important; } .padding-top-40 { padding-top: 40px !important; } .padding-top-50 { padding-top: 50px !important; } .padding-top-60 { padding-top: 60px !important; } .padding-top-70 { padding-top: 70px !important; } .padding-top-80 { padding-top: 80px !important; } .padding-top-90 { padding-top: 90px !important; } .padding-top-100 { padding-top: 100px !important; } .padding-top-120 { padding-top: 120px !important; } .padding-top-130 { padding-top: 130px !important; } .padding-top-150 { padding-top: 150px !important; } .padding-top-180 { padding-top: 180px !important; } .padding-top-200 { padding-top: 200px !important; } /* PADDING BOTTOM */ .padding-bottom-0 { padding-bottom: 0 !important; } .padding-bottom-10 { padding-bottom: 10px !important; } .padding-bottom-15 { padding-bottom: 15px !important; } .padding-bottom-20 { padding-bottom: 20px !important; } .padding-bottom-30 { padding-bottom: 30px !important; } .padding-bottom-40 { padding-bottom: 40px !important; } .padding-bottom-50 { padding-bottom: 50px !important; } .padding-bottom-60 { padding-bottom: 60px !important; } .padding-bottom-70 { padding-bottom: 70px !important; } .padding-bottom-80 { padding-bottom: 80px !important; } .padding-bottom-90 { padding-bottom: 90px !important; } .padding-bottom-100 { padding-bottom: 100px !important; } .padding-bottom-120 { padding-bottom: 120px !important; } .padding-bottom-130 { padding-bottom: 130px !important; } .padding-bottom-150 { padding-bottom: 150px !important; } .padding-bottom-180 { padding-bottom: 180px !important; } .padding-bottom-200 { padding-bottom: 200px !important; } /* MARGIN*/ /* MARGIN TOP */ .margin-top-0 { margin-top: 0 !important; } .margin-top-1 { margin-top: 1px !important; } .margin-top-2 { margin-top: 2px !important; } .margin-top-3 { margin-top: 3px !important; } .margin-top-6 { margin-top: 6px !important; } .margin-top-8 { margin-top: 8px !important; } .margin-top-10 { margin-top: 10px !important; } .margin-top-20 { margin-top: 20px !important; } .margin-top-30 { margin-top: 30px !important; } .margin-top-40 { margin-top: 40px !important; } .margin-top-50 { margin-top: 50px !important; } .margin-top-60 { margin-top: 60px !important; } .margin-top-70 { margin-top: 70px !important; } .margin-top-80 { margin-top: 80px !important; } .margin-top-90 { margin-top: 90px !important; } .margin-top-100 { margin-top: 100px !important; } .margin-top-130 { margin-top: 130px !important; } .margin-top-150 { margin-top: 150px !important; } .margin-top-180 { margin-top: 180px !important; } .margin-top-200 { margin-top: 200px !important; } /* MARGIN BOTTOM */ .margin-bottom-0 { margin-bottom: 0 !important; } .margin-bottom-1 { margin-bottom: 1px !important; } .margin-bottom-2 { margin-bottom: 2px !important; } .margin-bottom-3 { margin-bottom: 3px !important; } .margin-bottom-6 { margin-bottom: 6px !important; } .margin-bottom-8 { margin-bottom: 8px !important; } .margin-bottom-10 { margin-bottom: 10px !important; } .margin-bottom-20 { margin-bottom: 20px !important; } .margin-bottom-30 { margin-bottom: 30px !important; } .margin-bottom-40 { margin-bottom: 40px !important; } .margin-bottom-50 { margin-bottom: 50px !important; } .margin-bottom-60 { margin-bottom: 60px !important; } .margin-bottom-70 { margin-bottom: 70px !important; } .margin-bottom-80 { margin-bottom: 80px !important; } .margin-bottom-90 { margin-bottom: 90px !important; } .margin-bottom-100 { margin-bottom: 100px !important; } .margin-bottom-130 { margin-bottom: 130px !important; } .margin-bottom-150 { margin-bottom: 150px !important; } .margin-bottom-180 { margin-bottom: 180px !important; } .margin-bottom-200 { margin-bottom: 200px !important; } /* MARGIN LEFT */ .margin-left-0 { margin-left: 0 !important; } .margin-left-3 { margin-left: 3px !important; } .margin-left-6 { margin-left: 6px !important; } .margin-left-8 { margin-left: 8px !important; } .margin-left-10 { margin-left: 10px !important; } .margin-left-15 { margin-left: 15px !important; } .margin-left-20 { margin-left: 20px !important; } .margin-left-30 { margin-left: 30px !important; } .margin-left-40 { margin-left: 40px !important; } .margin-left-50 { margin-left: 50px !important; } .margin-left-60 { margin-left: 60px !important; } .margin-left-80 { margin-left: 80px !important; } .margin-left-100 { margin-left: 100px !important; } .margin-left-130 { margin-left: 130px !important; } .margin-left-150 { margin-left: 150px !important; } .margin-left-180 { margin-left: 180px !important; } .margin-left-200 { margin-left: 200px !important; } .margin-left-250 { margin-left: 250px !important; } .margin-left-300 { margin-left: 300px !important; } /* MARGIN RIGHT */ .margin-right-0 { margin-right: 0 !important; } .margin-right-3 { margin-right: 3px !important; } .margin-right-6 { margin-right: 6px !important; } .margin-right-8 { margin-right: 8px !important; } .margin-right-10 { margin-right: 10px !important; } .margin-right-15 { margin-right: 15px !important; } .margin-right-20 { margin-right: 20px !important; } .margin-right-30 { margin-right: 30px !important; } .margin-right-40 { margin-right: 40px !important; } .margin-right-50 { margin-right: 50px !important; } .margin-right-60 { margin-right: 60px !important; } .margin-right-80 { margin-right: 80px !important; } .margin-right-100 { margin-right: 100px !important; } .margin-right-130 { margin-right: 130px !important; } .margin-right-150 { margin-right: 150px !important; } .margin-right-180 { margin-right: 180px !important; } .margin-right-200 { margin-right: 200px !important; } .margin-right-250 { margin-right: 250px !important; } .margin-right-300 { margin-right: 300px !important; } /*---------------------------------------------------*/ /* BACKGROUND COLORS /*---------------------------------------------------*/ .no-bg { background: none;} .dark-bg { background-color: #222222 !important; } .colored-bg { background-color: #2ba9e0; } .dark-bg, .dark-bg a:not(.button), .dark-bg p, .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg h5, .dark-bg h6, .colored-bg, .colored-bg a, .colored-bg p, .colored-bg h1, .colored-bg h2, .colored-bg h3, .colored-bg h4, .colored-bg h5, .colored-bg h6 { color: #ffffff !important; } .dark-bg .btn, .dark-bg .button .colored-bg .btn, .colored-bg .button { border-color: #ffffff; } .colored-bg .btn, .colored-bg .button { color: #333333 !important; background-color: #ffffff; } .dark-bg .btn:hover, .dark-bg .button:hover .colored-bg .btn:hover, .colored-bg .button:hover { border-color: #333333; } .colored-bg .btn:hover, .colored-bg .button:hover { color: #ffffff !important; background-color: #333333; } .colored-bg.action-block, .dark-bg.action-block { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .white-bg, .light-bg { background-color: #ffffff !important; } .red-bg { background-color: #ff4d4d !important; color: #ffffff; } .blue-bg { background-color: #00bfff !important; color: #ffffff; } .gray-bg { background-color: #999999 !important; color: #ffffff; } .transparent-bg { background-color: transparent !important; } .foggy-white-bg { background-color: #f7f7f7 !important; } .smocky-white-bg { background-color: #eeeeee !important; } .milky-white-bg { background-color: #f9f9f9 !important; } .pinky-bg { background-color: #f2Dfd0 !important; } /* OVERLAY */ .overlay:after { content: ""; background-color: #000000; opacity: 0.4; position:absolute; left: 0; right:0; top:0; bottom:0; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } a.overlay:hover { background:rgba(255,255,255, 0.2); } .overlay.block { position: relative; z-index: 0; } .overlay.block:after { z-index: -1; } /*---------------------------------------------------*/ /* BACKGROUND IMAGES /*---------------------------------------------------*/ .bg-img { background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } .bg-img-1 { background-image: url(../images/bg/bg1.jpg); } /* PARALLAX BACKGROUND */ .parallax-bg { background-position: 0% 0%; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } .parallax-bg-1 { background: url(../images/bg/bg1.jpg) no-repeat fixed 0% 0% / cover; } /*---------------------------------------------------*/ /* TEXT PROPERTIES /*---------------------------------------------------*/ .text-middle { margin: auto; position: relative;} .text-bottom { display: table-cell; vertical-align: bottom; margin: auto; position: relative;} .text-sm { font-size: 75%; } .text-small { font-size: 35px !important; } /* TEXT COLOR */ .text-light, .text-light * { color: #ffffff; } .text-light .button, .text-light .btn, .text-light input[type="submit"] { border-color: #ffffff; background-color: #ffffff; color: #333333; } .text-light .button:hover { background-color: #f0f0f0; color: #333333; } .text-dark, .text-dark * { color: #333333; } .text-grey, .text-grey * { color: #cccccc; } .text-dark .button, .text-dark .btn, .text-dark input[type="submit"] { color: #ffffff; } .text-colored .button, .text-colored .btn, .text-colored input[type="submit"] { color: #ffffff; } .contextual-links a, .text-light .contextual-links a:not(.button), .dark-bg .contextual-links a:not(.button), .colored-bg .contextual-links a:not(.button) { color: #555555 !important; } .double-rows .two-row { margin-bottom: 20px; } /* ROUND STYLE */ input, button, select, .btn, .button, input[type="submit"], .simplenews-subscriber-form input, .user-logged-in .simplenews-subscriber-form form, .nice-select, .pager li > a, .pager li > span, .tag-cloud li a, .cart--cart-block .cart-block-link a, .header .views-exposed-form form, .product-category-count, .product-post .form-item-quantity-0-value .input-group, .deals-block .field-timer-jquery-countdown, .product--rendered-attribute label.option .product-attribute, .social-icon li a, .task-bar .tabs a { -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; } textarea { border-radius: 20px; } .back-to-top, .contact-social.social-media ul li a, .owl-carousel .owl-nav button, .user-picture img, .product--rendered-attribute label.option .product-attribute.product-attribute--size, .product--rendered-attribute .color_field__swatch, .layout-checkout-form .layout-region-checkout-secondary img, .checkout-progress--step:before, .product-badge .badge-label, .product-category-link .list-count, .ui-dialog .ui-dialog-titlebar-close, .testimonial .testimonial-image img, .comment-wrap .author-details img, [type="radio"] + span + label:before, [type="radio"] + span + label:after, [type="radio"] + label:before, [type="radio"] + label:after { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .header .views-exposed-form .form-actions .button, .quantity-button.quantity-up { border-radius: 0 50px 50px 0; } .quantity-button.quantity-down { border-radius: 50px 0 0 50px; } .category-menu .block-content { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .dropcap.round-dropcap { -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; } .product-item .product-detail-btn { border-radius: 20px; } .owl-responsive .testimonial, .grid-item .testimonial, #page .cta-style3 .block, .checkout-pane-order-summary { border-radius: 5px; } .cart-block--contents, .pricing-table .pricing-wrap { border-radius: 2px; } .block-help { border-radius: 4px; } /* CURVE STYLE */ .btn-curve input, .btn-curve button, .btn-curve select, .btn-curve .btn, .btn-curve .button, .btn-curve input[type="submit"], .btn-curve .simplenews-subscriber-form input, .user-logged-in .btn-curve .simplenews-subscriber-form form, .btn-curve .nice-select, .btn-curve .pager li > a, .btn-curve .pager li > span, .btn-curve .tag-cloud li a, .btn-curve .cart--cart-block .cart-block-link a, .btn-curve .header .views-exposed-form form, .btn-curve .product-category-count, .btn-curve .product-post .form-item-quantity-0-value .input-group, .btn-curve .deals-block .field-timer-jquery-countdown, .btn-curve .product--rendered-attribute label.option .product-attribute, .btn-curve .social-icon li a, .btn-curve .back-to-top, .btn-curve .contact-social.social-media ul li a, .btn-curve .owl-carousel .owl-nav button, .btn-curve .user-picture img, .btn-curve .product--rendered-attribute label.option .product-attribute.product-attribute--size, .btn-curve .product--rendered-attribute .color_field__swatch, .btn-curve .layout-checkout-form .layout-region-checkout-secondary img, .btn-curve .checkout-progress--step:before, .btn-curve .product-badge .badge-label, .btn-curve .product-category-link .list-count, .btn-curve .ui-dialog .ui-dialog-titlebar-close, .btn-curve .testimonial .testimonial-image img, .btn-curve .comment-wrap .author-details img, .btn-curve [type="radio"] + span + label:before, .btn-curve [type="radio"] + span + label:after, .btn-curve [type="radio"] + label:before, .btn-curve [type="radio"] + label:after, .btn-curve .task-bar .tabs a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .btn-curve .header .views-exposed-form .form-actions .button, .btn-curve .quantity-button.quantity-up { border-radius: 0 5px 5px 0; } .btn-curve .quantity-button.quantity-down { border-radius: 5px 0 0 5px; } .dark-scheme a, .dark-scheme .form-composite > legend, .dark-scheme label, .dark-scheme .label, .dark-scheme .h1, .dark-scheme .h2, .dark-scheme .h3, .dark-scheme .h4, .dark-scheme .h5, .dark-scheme .h6, .dark-scheme h1, .dark-scheme h2, .dark-scheme h3, .dark-scheme h4, .dark-scheme h5, .dark-scheme h6, .dark-scheme .mega-menu > ul > li > ul > li a, .dark-scheme .form-control, .dark-scheme .category-menu ul.menu li a, .dark-scheme .category-menu ul.menu .more-toggler, .dark-scheme .contact-message-feedback-form input, .dark-scheme .progress-complete, .dark-scheme .contact-message-feedback-form textarea, .dark-scheme .header-top .nice-select .list, .dark-scheme .testimonial-body:after, .dark-scheme .header-top .nice-select .list *, .dark-scheme .header-top .dropdown-menu .menu, .dark-scheme .header-top .dropdown-menu .menu * { color: #fafafa; } .dark-scheme .mega-menu > ul > li > ul, .dark-scheme .nice-select .list, .dark-scheme .product-teaser-wrap, .dark-scheme .product-category-icon, .dark-scheme .service-teaser .service-content:before, .dark-scheme .product-teaser-wrap, .dark-scheme .product-teaser .product-teaser-bg, .dark-scheme .product-category-icon, .dark-scheme .service-teaser2 .post-content, .dark-scheme .pricing-table .regular .pricing-wrap, .dark-scheme .header .category-menu .nav, .dark-scheme .feature-block .feat, .dark-scheme .team-teaser .team-meta, .dark-scheme .card-header, .dark-scheme .card, .dark-scheme .contact-address .contact-address-content, .dark-scheme .dropdown-menu { background-color: #151c25; } .dark-scheme .pricing-table .featured .pricing-wrap { background-color: #fcfcfc; color: #555555; } .dark-scheme .pricing-table .featured .pricing-wrap * { } .dark-scheme .nice-select .list * { color: #f2f2f2 !important; } .dark-scheme .nice-select .option:hover, .dark-scheme .nice-select .option.focus, .dark-scheme .nice-select .option.selected.focus, .dark-scheme .dropdown-menu.user-account-block-wrap .nav a:hover { color: #555555 !important; } .dark-scheme .mega-menu > ul > li > ul > li a { border-color: rgba(255,255,255,0.1); } .dark-scheme .product-teaser-wrap, .dark-scheme .product-category-icon, .dark-scheme .category-menu .nav { border-color: rgba(255,255,255,0.03); } .dark-scheme .number-count-alt .post-content { background-color: rgba(255,255,255,0.1); } .dark-scheme .action-block { box-shadow: inset 0 0 2px #151c25; } .dark-scheme .service-teaser .service-content .feat-icon-img img, .dark-scheme .product-category-icon-image img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .dark-scheme .product-category-icon-image { opacity: 1; } .dark-scheme .post-meta .post-meta-item, .dark-scheme .post-meta .post-meta-item a, .dark-scheme .profile h4.label { color: #cccccc; } .dark-scheme .tag-cloud li a { border-color: #bbbbbb; } .dark-scheme .contact-address .contact-address-heading { background-color: #030303; } .dark-scheme .task-bar .tabs a.is-active { background-color: #595959; } .dark-scheme .testimonial-body:after { opacity: 0.5; } .animted-bg-color { animation: bgcoloranimate 10s infinite; } @keyframes bgcoloranimate { 0% {background-color: #b31d55;} 25% {background-color: #2892ff;} 50% {background-color: #10d431;} 75% {background-color: #f19d21;} 100% {background-color: #ef2929;} } :root { --main-color: rgba(255,255,255,0.01); --second-main-color: rgba(0,0,0,0.2); --main-txt-color: #555555; --main-padding: 15px; } .btn, .button, input[type="submit"], .category-menu .block-title-wrap, .colored-bg { background-image: linear-gradient(133deg, var(--main-color), var(--second-main-color)); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09) } .ui-widget.ui-dialog.ui-dialog-off-canvas { overflow-y: auto; } /* LAYOUT */ .layout__region { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .layout--twocol-section.layout--twocol-section--50-50 .layout__region--first, .layout--twocol-section.layout--twocol-section--50-50 .layout__region--second, .layout--threecol-section--25-50-25 .layout__region--second, .layout--threecol-section--25-25-50 .layout__region--third, .layout--threecol-section--50-25-25 .layout__region--first { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .layout--twocol-section.layout--twocol-section--33-67 .layout__region--first, .layout--twocol-section.layout--twocol-section--67-33 .layout__region--second, .layout--threecol-section--33-34-33 .layout__region--first, .layout--threecol-section--33-34-33 .layout__region--third, .layout--threecol-section--33-34-33 .layout__region--second { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .layout--twocol-section.layout--twocol-section--33-67 .layout__region--second, .layout--twocol-section.layout--twocol-section--67-33 .layout__region--first { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .layout--twocol-section.layout--twocol-section--25-75 .layout__region--first, .layout--twocol-section.layout--twocol-section--75-25 .layout__region--second, .layout--threecol-section--25-50-25 .layout__region--first, .layout--threecol-section--25-50-25 .layout__region--third, .layout--threecol-section--25-25-50 .layout__region--first, .layout--threecol-section--25-25-50 .layout__region--second, .layout--threecol-section--50-25-25 .layout__region--second, .layout--threecol-section--50-25-25 .layout__region--third, .layout--fourcol-section .layout__region { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .layout--twocol-section.layout--twocol-section--25-75 .layout__region--second, .layout--twocol-section.layout--twocol-section--75-25 .layout__region--first { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } } .block-region { background-color: #98f3bc; color: #333333 !important; text-align: center; } label button { padding: 0; border: none; font-weight: bold; }