@charset "UTF-8"; @import url("//hello.myfonts.net/count/32ebf0"); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @font-face { font-family: 'HelveticaNeueLTStd-Lt'; src: url("../../fonts/helvetica_neue_lt_std/32EBF0_0_0.eot"); src: url("../../fonts/helvetica_neue_lt_std/32EBF0_0_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/helvetica_neue_lt_std/32EBF0_0_0.woff2") format("woff2"), url("../../fonts/helvetica_neue_lt_std/32EBF0_0_0.woff") format("woff"), url("../../fonts/helvetica_neue_lt_std/32EBF0_0_0.ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLTStd-Bd'; src: url("../../fonts/helvetica_neue_lt_std/32EBF0_1_0.eot"); src: url("../../fonts/helvetica_neue_lt_std/32EBF0_1_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/helvetica_neue_lt_std/32EBF0_1_0.woff2") format("woff2"), url("../../fonts/helvetica_neue_lt_std/32EBF0_1_0.woff") format("woff"), url("../../fonts/helvetica_neue_lt_std/32EBF0_1_0.ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLTStd-Roman'; src: url("../../fonts/helvetica_neue_lt_std/32EBF0_2_0.eot"); src: url("../../fonts/helvetica_neue_lt_std/32EBF0_2_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/helvetica_neue_lt_std/32EBF0_2_0.woff2") format("woff2"), url("../../fonts/helvetica_neue_lt_std/32EBF0_2_0.woff") format("woff"), url("../../fonts/helvetica_neue_lt_std/32EBF0_2_0.ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLTStd-Th'; src: url("../../fonts/helvetica_neue_lt_std/32EBF0_3_0.eot"); src: url("../../fonts/helvetica_neue_lt_std/32EBF0_3_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/helvetica_neue_lt_std/32EBF0_3_0.woff2") format("woff2"), url("../../fonts/helvetica_neue_lt_std/32EBF0_3_0.woff") format("woff"), url("../../fonts/helvetica_neue_lt_std/32EBF0_3_0.ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLTStd-Md'; src: url("../../fonts/helvetica_neue_lt_std/32EBF0_4_0.eot"); src: url("../../fonts/helvetica_neue_lt_std/32EBF0_4_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/helvetica_neue_lt_std/32EBF0_4_0.woff2") format("woff2"), url("../../fonts/helvetica_neue_lt_std/32EBF0_4_0.woff") format("woff"), url("../../fonts/helvetica_neue_lt_std/32EBF0_4_0.ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLTStd-HvCn'; src: url("../../fonts/helvetica_neue_lt_std/32EBF0_5_0.eot"); src: url("../../fonts/helvetica_neue_lt_std/32EBF0_5_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/helvetica_neue_lt_std/32EBF0_5_0.woff2") format("woff2"), url("../../fonts/helvetica_neue_lt_std/32EBF0_5_0.woff") format("woff"), url("../../fonts/helvetica_neue_lt_std/32EBF0_5_0.ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLTStd-It'; src: url("../../fonts/helvetica_neue_lt_std/32EBF0_6_0.eot"); src: url("../../fonts/helvetica_neue_lt_std/32EBF0_6_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/helvetica_neue_lt_std/32EBF0_6_0.woff2") format("woff2"), url("../../fonts/helvetica_neue_lt_std/32EBF0_6_0.woff") format("woff"), url("../../fonts/helvetica_neue_lt_std/32EBF0_6_0.ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLTStd-Lt'; src: url("../../fonts/helvetica_neue_lt_std/32EBF0_0_0.eot"); src: url("../../fonts/helvetica_neue_lt_std/32EBF0_0_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/helvetica_neue_lt_std/32EBF0_0_0.woff2") format("woff2"), url("../../fonts/helvetica_neue_lt_std/32EBF0_0_0.woff") format("woff"), url("../../fonts/helvetica_neue_lt_std/32EBF0_0_0.ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLTStd-Hv'; src: url("../../fonts/helvetica_blog/376F57_0_0.eot"); src: url("../../fonts/helvetica_blog/376F57_0_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/helvetica_blog/376F57_0_0.woff2") format("woff2"), url("../../fonts/helvetica_blog/376F57_0_0.woff") format("woff"), url("../../fonts/helvetica_blog/376F57_0_0ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLTStd-Blk'; src: url("../../fonts/helvetica_blog/376F57_1_0.eot"); src: url("../../fonts/helvetica_blog/376F57_1_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/helvetica_blog/376F57_1_0.woff2") format("woff2"), url("../../fonts/helvetica_blog/376F57_1_0.woff") format("woff"), url("../../fonts/helvetica_blog/376F57_1_0ttf") format("truetype"); } .u-text-align-left { text-align: left; } .u-text-align-right { text-align: right; } .u-text-align-center { text-align: center; } .u-table { width: 100%; height: 100%; display: table; } .u-table-cell { display: table-cell; vertical-align: middle; text-align: center; } .u-clearfix, .header-slider-pager .slick-dots, #header #header-master-nav nav#main-navigation .menu-block-wrapper ul, #footer .block-webform form > div, .home-tiles__newsletter form > div, .products-overview .view-content, #edit-color-wrapper .SumoSelect.open > .optWrapper ul, #hsp__form .sumo_colors.open > .optWrapper ul, #textpage .textpage__form form, #textpage .textpage__form form .SumoSelect.open > .optWrapper ul, #contact-form form > div, #contact-form form .webform-component-checkboxes .form-type-checkbox, #sample-form form > div, #projects-overview-view .view-content, .p-slider-pager .slick-dots, #user-register-form > div { *zoom: 1; } .u-clearfix::before, .header-slider-pager .slick-dots::before, #header #header-master-nav nav#main-navigation .menu-block-wrapper ul::before, #footer .block-webform form > div::before, .home-tiles__newsletter form > div::before, .products-overview .view-content::before, #edit-color-wrapper .SumoSelect.open > .optWrapper ul::before, #hsp__form .sumo_colors.open > .optWrapper ul::before, #textpage .textpage__form form::before, #textpage .textpage__form form .SumoSelect.open > .optWrapper ul::before, #contact-form form > div::before, #contact-form form .webform-component-checkboxes .form-type-checkbox::before, #sample-form form > div::before, #projects-overview-view .view-content::before, .p-slider-pager .slick-dots::before, #user-register-form > div::before, .u-clearfix::after, .header-slider-pager .slick-dots::after, #header #header-master-nav nav#main-navigation .menu-block-wrapper ul::after, #footer .block-webform form > div::after, .home-tiles__newsletter form > div::after, .products-overview .view-content::after, #edit-color-wrapper .SumoSelect.open > .optWrapper ul::after, #hsp__form .sumo_colors.open > .optWrapper ul::after, #textpage .textpage__form form::after, #textpage .textpage__form form .SumoSelect.open > .optWrapper ul::after, #contact-form form > div::after, #contact-form form .webform-component-checkboxes .form-type-checkbox::after, #sample-form form > div::after, #projects-overview-view .view-content::after, .p-slider-pager .slick-dots::after, #user-register-form > div::after { display: table; content: ""; line-height: 0; } .u-clearfix::after, .header-slider-pager .slick-dots::after, #header #header-master-nav nav#main-navigation .menu-block-wrapper ul::after, #footer .block-webform form > div::after, .home-tiles__newsletter form > div::after, .products-overview .view-content::after, #edit-color-wrapper .SumoSelect.open > .optWrapper ul::after, #hsp__form .sumo_colors.open > .optWrapper ul::after, #textpage .textpage__form form::after, #textpage .textpage__form form .SumoSelect.open > .optWrapper ul::after, #contact-form form > div::after, #contact-form form .webform-component-checkboxes .form-type-checkbox::after, #sample-form form > div::after, #projects-overview-view .view-content::after, .p-slider-pager .slick-dots::after, #user-register-form > div::after { clear: both; } .u-pos-rel { position: relative; } .u-pos-abs { position: relative; } .u-pos-fix { position: relative; } .u-width, #footer .block-webform .content, .home-tiles__newsletter .content, #user-login, #user-register-form, #user-pass, #user-pass-reset, #user-profile-form { width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .u-full-height { height: 100%; } .u-visually-hidden, #footer .block-webform form .webform-component-email > label, .home-tiles__newsletter form .webform-component-email > label, #footer .block-webform form .webform-component-checkboxes > label, .home-tiles__newsletter form .webform-component-checkboxes > label { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } /** Retina background images */ /** Create space with a specific aspect ratio */ /** Set the color of the placeholders in a inputfield */ h1 { font-family: "HelveticaNeueLTStd-Bd", "Arial", "sans-serif"; font-size: 40px; margin-bottom: 25px; } h2 { font-family: "HelveticaNeueLTStd-Bd", "Arial", sans-serif; font-size: 30px; margin-bottom: 20px; } h2.line, .h2line, #page-info .main-content h2 { color: #000000; position: relative; } h2.line:after, .h2line:after, #page-info .main-content h2:after { content: ""; position: absolute; left: -100px; top: 15px; width: 80px; height: 1px; background-color: #000000; } h3 { font-family: "HelveticaNeueLTStd-Bd", "Arial", sans-serif; font-size: 20px; margin-bottom: 15px; } strong { font-family: "HelveticaNeueLTStd-Bd", "Arial", "sans-serif"; } em { font-style: italic; } sup { font-size: 0.7em; display: inline-block; -moz-transform: translateY(-30%); -ms-transform: translateY(-30%); -webkit-transform: translateY(-30%); transform: translateY(-30%); } sub { font-size: 0.7em; display: inline-block; -moz-transform: translateY(20%); -ms-transform: translateY(20%); -webkit-transform: translateY(20%); transform: translateY(20%); } .user-content h2, #footer .block-webform h2, .home-tiles__newsletter h2, #user-pass .user-pass__info h2 { margin-top: 10px; margin-bottom: 15px; } .user-content h3, #footer .block-webform h3, .home-tiles__newsletter h3, #user-pass .user-pass__info h3 { margin-top: 10px; margin-bottom: 10px; } .user-content p, #footer .block-webform p, .home-tiles__newsletter p, #user-pass .user-pass__info p { font-size: 16px; line-height: 23px; margin-bottom: 15px; } .user-content p:last-child, #footer .block-webform p:last-child, .home-tiles__newsletter p:last-child, #user-pass .user-pass__info p:last-child { margin-bottom: 0px; } .user-content p a, #footer .block-webform p a, .home-tiles__newsletter p a, #user-pass .user-pass__info p a { font-weight: 600; color: #000000; -moz-transition: color 300ms; -o-transition: color 300ms; -webkit-transition: color 300ms; transition: color 300ms; } .user-content p a:hover, #footer .block-webform p a:hover, .home-tiles__newsletter p a:hover, #user-pass .user-pass__info p a:hover { color: #6C6C6C; } .user-content ul, #footer .block-webform ul, .home-tiles__newsletter ul, #user-pass .user-pass__info ul, .user-content ol, #footer .block-webform ol, .home-tiles__newsletter ol, #user-pass .user-pass__info ol { list-style-type: square; margin-left: 20px; margin-bottom: 20px; } .user-content ul li, #footer .block-webform ul li, .home-tiles__newsletter ul li, #user-pass .user-pass__info ul li, .user-content ol li, #footer .block-webform ol li, .home-tiles__newsletter ol li, #user-pass .user-pass__info ol li { font-size: 16px; line-height: 24px; padding-bottom: 2px; } .user-content ol, #footer .block-webform ol, .home-tiles__newsletter ol, #user-pass .user-pass__info ol { list-style-type: decimal; } .user-content img, #footer .block-webform img, .home-tiles__newsletter img, #user-pass .user-pass__info img { max-width: 100%; height: auto !important; } .user-content table, #footer .block-webform table, .home-tiles__newsletter table, #user-pass .user-pass__info table { width: 100%; margin-bottom: 20px; } .user-content table tr th, #footer .block-webform table tr th, .home-tiles__newsletter table tr th, #user-pass .user-pass__info table tr th { padding: 8px 5px; color: #FFFFFF; background-color: #000000; border: 1px solid #000000; font-family: "HelveticaNeueLTStd-Bd", "Arial", sans-serif; } .user-content table tr td, #footer .block-webform table tr td, .home-tiles__newsletter table tr td, #user-pass .user-pass__info table tr td { padding: 5px; border: 1px solid #888888; } .user-content blockquote, #footer .block-webform blockquote, .home-tiles__newsletter blockquote, #user-pass .user-pass__info blockquote { margin-top: 20px; position: relative; } .user-content blockquote *, #footer .block-webform blockquote *, .home-tiles__newsletter blockquote *, #user-pass .user-pass__info blockquote * { font-size: 22px; line-height: 28px; font-family: "HelveticaNeueLTStd-Th"; } .user-content blockquote:after, #footer .block-webform blockquote:after, .home-tiles__newsletter blockquote:after, #user-pass .user-pass__info blockquote:after { top: -25px; left: -65px; position: absolute; font-size: 120px; content: '”'; content: "\201D"; font-family: "HelveticaNeueLTStd-Bd"; } @media only screen and (max-width: 700px) { h1 { font-size: 27px; } } @media only screen and (max-width: 450px) { h1 { font-size: 25px; } } html, body { font-family: "HelveticaNeueLTStd-Roman", "Arial", sans-serif; font-weight: 400; font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscaled; color: #000000; width: 100%; height: 100%; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } img { display: block; max-width: 100%; height: auto; } #wrapper { margin-top: 110px; } .logged-in.adminimal-menu #header { top: 29px; } #admin-menu, #admin-menu .dropdown { z-index: 3000; } ::selection { color: #FFFFFF; background: #000000; } @media only screen and (max-width: 970px) { #wrapper { margin-top: 96px; } } .js-sample-request { position: relative; } .js-sample-request .js-ajax-progress { font-size: 13px; position: absolute; top: 3px; right: -25px; display: none; } .js-sample-request .js-ajax-progress.show { display: block; } .ajax-response { display: none; background-color: #F1F1F1; padding: 30px 20px 20px 20px; position: relative; text-align: center; } .ajax-response.show { display: block; } .ajax-response .ajax-response__close { position: absolute; top: 10px; right: 12px; font-size: 13px; cursor: pointer; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; -webkit-transition: opacity 300ms; transition: opacity 300ms; } .ajax-response .ajax-response__close:hover { opacity: 0.6; } .ajax-response .ajax-response__message { display: block; } .ajax-response .ajax-response__link { display: inline-block; text-decoration: none; color: #000000; margin-top: 20px; font-family: "HelveticaNeueLTStd-Bd", "Arial", sans-serif; } .ajax-response .ajax-response__link i { font-size: 0.8em; } .view-pager { width: 100%; } .item-list { margin-top: 30px; } .item-list .pager { margin: 0px; margin-bottom: 30px; } .item-list .pager li { display: inline-block; } .item-list .pager a { font-weight: 600; color: #000000; text-decoration: none; } .item-list .pager li.pager-current { opacity: 0.4; } .item-list .ajax-progress-throbber { display: none; } .button, .products-overview .view-filters .views-submit-button input[type="submit"], #home-intro .intro-section__left a, #textpage .textpage__form form .form-actions input, #contact-form form .form-actions input, #downloads-page__form input[type="submit"], #sample-form form input[type="submit"], #sample-account .sample-account__login input[type="submit"], .page-user form input[type="submit"] { display: inline-block; outline: none; background-color: #000000; color: #FFFFFF; text-transform: uppercase; text-decoration: none; font-size: 14px; padding: 12px 16px; cursor: pointer; opacity: 1; font-family: "HelveticaNeueLTStd-Md", "Arial", sans-serif; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; -webkit-transition: opacity 300ms; transition: opacity 300ms; } .button:hover, .products-overview .view-filters .views-submit-button input[type="submit"]:hover, #home-intro .intro-section__left a:hover, #textpage .textpage__form form .form-actions input:hover, #contact-form form .form-actions input:hover, #downloads-page__form input[type="submit"]:hover, #sample-form form input[type="submit"]:hover, #sample-account .sample-account__login input[type="submit"]:hover, .page-user form input[type="submit"]:hover { opacity: 0.8; } .button--white, #csr-blocks .csr-block:nth-child(even) .csr-block__content .button, #csr-blocks .csr-block:nth-child(even) .csr-block__content .products-overview .view-filters .views-submit-button input[type="submit"], .products-overview .view-filters .views-submit-button #csr-blocks .csr-block:nth-child(even) .csr-block__content input[type="submit"], #csr-blocks .csr-block:nth-child(even) .csr-block__content #home-intro .intro-section__left a, #home-intro .intro-section__left #csr-blocks .csr-block:nth-child(even) .csr-block__content a, #csr-blocks .csr-block:nth-child(even) .csr-block__content #textpage .textpage__form form .form-actions input, #textpage .textpage__form form .form-actions #csr-blocks .csr-block:nth-child(even) .csr-block__content input, #csr-blocks .csr-block:nth-child(even) .csr-block__content #contact-form form .form-actions input, #contact-form form .form-actions #csr-blocks .csr-block:nth-child(even) .csr-block__content input, #csr-blocks .csr-block:nth-child(even) .csr-block__content #downloads-page__form input[type="submit"], #downloads-page__form #csr-blocks .csr-block:nth-child(even) .csr-block__content input[type="submit"], #csr-blocks .csr-block:nth-child(even) .csr-block__content #sample-form form input[type="submit"], #sample-form form #csr-blocks .csr-block:nth-child(even) .csr-block__content input[type="submit"], #csr-blocks .csr-block:nth-child(even) .csr-block__content #sample-account .sample-account__login input[type="submit"], #sample-account .sample-account__login #csr-blocks .csr-block:nth-child(even) .csr-block__content input[type="submit"], #csr-blocks .csr-block:nth-child(even) .csr-block__content .page-user form input[type="submit"], .page-user form #csr-blocks .csr-block:nth-child(even) .csr-block__content input[type="submit"] { color: #000000; background-color: #FFFFFF; } .button--border--white { border: 1px solid #FFFFFF; } .button--small { font-size: 13px; padding: 6px 8px; font-family: "HelveticaNeueLTStd-Roman", "Arial", sans-serif; } .button--edit { width: 100%; display: block; padding-top: 20px; padding-bottom: 20px; text-align: center; } .outline-button { margin-top: 10px; margin-bottom: 10px; padding: 15px 20px; color: #FFFFFF; border: 1px solid #FFFFFF; display: inline-block; text-decoration: none; text-transform: uppercase; position: relative; z-index: 200; overflow: hidden; font-family: "HelveticaNeueLTStd-Md", "Arial", sans-serif; -moz-transition: color 300ms; -o-transition: color 300ms; -webkit-transition: color 300ms; transition: color 300ms; } .outline-button:after { content: ''; top: 100%; left: 0px; width: 100%; height: 100%; z-index: -1; position: absolute; background-color: #FFFFFF; -moz-transition: top 300ms; -o-transition: top 300ms; -webkit-transition: top 300ms; transition: top 300ms; } .outline-button:hover { color: #000000; } .outline-button:hover:after { top: 0px; } .news-item { width: 100%; } .news-item a { color: #000000; text-decoration: none; } .news-item .news-item__inner { width: 100%; height: 100%; background-color: #FFFFFF; position: relative; } .news-item .news-item__image { border-bottom: 1px solid #F1F1F1; } .news-item .news-item__content { padding: 25px 25px 65px 25px; position: relative; background-color: #FFFFFF; } .news-item .news-item__content .news-item__content__title { font-size: 20px; margin-bottom: 5px; } .news-item .news-item__content .news-item__content_date_published { color: #848484; font-size: 15px; margin-bottom: 20px; display: inline-block; } .news-item .news-item__content__link { left: 25px; bottom: 25px; position: absolute; display: inline-block; color: #000000; font-weight: 600; text-decoration: none; } .news-item .news-item__content__link i { display: inline-block; margin-left: 5px; font-size: 11px; } .event-item { margin-bottom: 20px; } .event-item .event-item__date { width: 25%; float: left; background-color: #000000; position: relative; } .event-item .event-item__date:before { display: block; content: " "; width: 100%; padding-top: 100%; } .event-item .event-item__date > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .event-item .event-item__date .event-item__date__month, .event-item .event-item__date .event-item__date__day { display: block; font-size: 19px; color: #FFFFFF; font-family: "HelveticaNeueLTStd-Md", "Arial", sans-serif; } .event-item .event-item__date .event-item__date__day { font-size: 60px; margin-top: 10px; display: inline-block; font-family: "HelveticaNeueLTStd-HvCn", "Arial", sans-serif; } .event-item .event-item__info { width: 75%; float: left; margin-top: 1px; padding-left: 20px; padding-right: 40px; } .event-item .event-item__info .event-item__info__until { display: block; font-size: 13px; color: #b0b0b0; font-family: "HelveticaNeueLTStd-It", "Arial", sans-serif; margin-bottom: 7px; } .event-item .event-item__info .event-item__info__title { font-size: 18px; margin-bottom: 8px; font-family: "HelveticaNeueLTStd-Md", "Arial", sans-serif; } .event-item .event-item__info .event-item__info__location, .event-item .event-item__info .event-item__info__country { display: block; font-size: 16px; line-height: 22px; } .event-item .event-item__info .event-item__info__link { margin-top: 20px; display: inline-block; color: #000000; text-decoration: none; font-family: "HelveticaNeueLTStd-Bd", "Arial", sans-serif; } .line-block { padding-left: 100px; } .line-block .line { position: relative; } .line-block .line:after { content: ""; position: absolute; left: -100px; top: 15px; width: 80px; height: 1px; background-color: #000000; } .info-block { background-color: #F1F1F1; } .info-block .info-block__left { width: 60%; float: left; padding: 60px 50px 60px 0px; } .info-block .info-block__right { width: 40%; float: right; } .info-block__right__detail { padding: 40px; margin-bottom: 20px; background-color: #000000; } .info-block__right__detail * { color: #FFFFFF; } .info-block__right__detail p { margin-bottom: 20px !important; } .info-block__right__detail a { text-decoration: none; } #js-expandable-info-block #js-expandable-info-block__full-text { display: none; } #js-expandable-info-block-clone { position: relative; -moz-transition: width 500ms, height 500ms; -o-transition: width 500ms, height 500ms; -webkit-transition: width 500ms, height 500ms; transition: width 500ms, height 500ms; } #js-expandable-info-block-clone #js-expandable-close { position: absolute; top: 20px; right: 20px; font-size: 25px; cursor: pointer; } .embedded-video .player { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .embedded-video .player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .info-slider { padding-left: 50px; padding-right: 50px; position: relative; } .info-slider .info-slider__slide { outline: none; } .info-slider .info-slider__slide .info-slider__slide__image { background-position: center; background-size: cover; position: relative; } .info-slider .info-slider__slide .info-slider__slide__image:before { display: block; content: " "; width: 100%; padding-top: 50%; } .info-slider .info-slider__slide .info-slider__slide__image > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .info-slider .info-slider__slide .info-slider__slide__content { width: 50%; padding: 20px; margin-left: 40%; margin-bottom: -75px; background-color: #FFFFFF; -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -webkit-transform: translateY(-100px); transform: translateY(-100px); } .info-slider .info-slider__slide .info-slider__slide__content .info-slider__slide__content__title span { font-family: "HelveticaNeueLTStd-Th", "Arial", "sans-serif"; font-size: 18px; color: #777777; display: inline-block; border-left: 1px solid #777777; padding-left: 10px; } .info-slider .slick-arrow { position: absolute; font-size: 22px; padding: 15px 15px 15px 0px; cursor: pointer; } .info-slider .arrow-left { top: 35%; left: 0px; } .info-slider .arrow-right { top: 35%; right: 0px; padding: 15px 0px 15px 15px; } .social-block * { display: block; } .social-block .block--16 { float: left; width: 16.666666%; width: calc(100% / 6); } .social-block .block--20 { float: left; width: 20%; width: calc(100% / 5); } .social-block .block--33 { float: left; width: 33.333333%; width: calc(100% / 3); } .social-block .block--50 { float: left; width: 50%; } .social-block .block-66 { float: left; width: 66.666666%; width: calc(100% / 1.5); } .social-block .block--83 { float: left; width: calc(100% / 1.2); } .social-block .block-100 { float: left; width: 100%; } .social-block .block--square { position: relative; } .social-block .block--square:before { display: block; content: " "; width: 100%; padding-top: 100%; } .social-block .block--square > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .social-block .block--rect { position: relative; } .social-block .block--rect:before { display: block; content: " "; width: 100%; padding-top: 60%; } .social-block .block--rect > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .social-block .block--image { background-size: contain; background-position: center; background-repeat: no-repeat; } .social-block .block--quote .content { padding: 30px; } .social-block .block--quote span { color: #FFFFFF; font-size: 35px; line-height: 48px; font-weight: 300; margin-bottom: 0px; font-family: "HelveticaNeueLTStd-Th", "Arial", sans-serif; } .social-block .block--facebook { background-image: url("../../images/community/facebook.svg"); } .social-block .block--instagram { background-image: url("../../images/community/instagram.svg"); } .social-block .block--vimeo { background-image: url("../../images/community/vimeo.svg"); } .social-block .block--linkedin { background-image: url("../../images/community/linkedin.svg"); } .social-block .block--twitter { background-image: url("../../images/community/twitter.svg"); } .social-block .block--pinterest { position: absolute; top: 0px; right: 0px; background-image: url("../../images/community/pinterest.svg"); } .social-block .block--image-1, .social-block .block--image-2, .social-block .block--image-3, .social-block .block--image-4 { background-size: cover; } .social-block .block--black { background-color: #000000; } .social-block .block--grey { background-color: #343434; } @media only screen and (max-width: 1080px) { .social-block > .block--33, .social-block > .block-66 { width: 100%; } .social-block > .block--33 > .block--100.block--quote { width: 80%; float: left; position: relative; } .social-block > .block--33 > .block--100.block--quote:before { display: block; content: " "; width: 100%; padding-top: 43.75%; } .social-block > .block--33 > .block--100.block--quote > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .social-block > .block--33 > .block--100 { float: left; width: 20%; } .social-block > .block--33 > .block--100 > .block--33 { width: 100%; } .social-block > .block--33 > .block--100 > .block--33 a { background-position: center; background-repeat: no-repeat; position: relative; } .social-block > .block--33 > .block--100 > .block--33 a:before { display: block; content: " "; width: 100%; padding-top: 175%; } .social-block > .block--33 > .block--100 > .block--33 a > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .social-block > .block--33 > .block--100 > .block--33.block--square { display: none; } } @media only screen and (max-width: 800px) { .social-block > .block--33 > .block--100.block--quote { width: 100%; } .social-block > .block--33 > .block--100.block--quote span { font-size: 28px; line-height: 32px; } .social-block > .block--33 > .block--100 { width: 100%; } .social-block > .block--33 > .block--100 > .block--33 { width: 100%; } .social-block > .block--33 > .block--100 > .block--33 a { background-position: center; background-repeat: no-repeat; position: relative; } .social-block > .block--33 > .block--100 > .block--33 a:before { display: block; content: " "; width: 100%; padding-top: 13%; } .social-block > .block--33 > .block--100 > .block--33 a > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .social-block > .block-66 > .block--50.mobile--16 { width: 16.666666%; } .social-block > .block-66 > .block--50.mobile--16 .block--33 { width: 100%; } .social-block > .block-66 > .block--100 .block--16 { width: 33.333333%; } .social-block > .block-66 > .block--100 .block--16 .block--100 { width: 50%; float: left; } .social-block > .block-66 > .block--100 .block--83 { width: 100%; } .social-block > .block-66 > .block--100 .block--83 .block--20 { width: 16.666666%; } } @media only screen and (max-width: 470px) { .social-block > .block--33 > .block--100.block--quote { position: relative; } .social-block > .block--33 > .block--100.block--quote:before { display: block; content: " "; width: 100%; padding-top: 50%; } .social-block > .block--33 > .block--100.block--quote > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .social-block > .block--33 > .block--100.block--quote .content { padding: 20px; } .social-block > .block--33 > .block--100.block--quote span { font-size: 20px; line-height: 25px; } } .project-item { width: 25%; float: left; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; } .project-item .project-item__image { position: relative; } .project-item .project-item__image .project-item__image__overlay { opacity: 0; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.3); -moz-transition: opacity 300ms; -o-transition: opacity 300ms; -webkit-transition: opacity 300ms; transition: opacity 300ms; } .project-item .project-item__image .project-item__image__overlay span { opacity: 0; display: inline-block; color: #FFFFFF; font-size: 18px; -moz-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); -moz-transition: -moz-transform 300ms, opacity 300ms; -o-transition: -o-transform 300ms, opacity 300ms; -webkit-transition: -webkit-transform 300ms, opacity 300ms; transition: transform 300ms, opacity 300ms; } .project-item .project-item__image .project-item__image__overlay span i { display: inline-block; font-size: 14px; margin-left: 8px; } .project-item .project-item__content { padding: 10px; background-color: #FFFFFF; -moz-transition: background-color 400ms; -o-transition: background-color 400ms; -webkit-transition: background-color 400ms; transition: background-color 400ms; } .project-item .project-item__content .project-item__content__title { font-size: 15px; line-height: 19px; color: #000000; margin-bottom: 6px; text-transform: uppercase; -moz-transition: color 500ms; -o-transition: color 500ms; -webkit-transition: color 500ms; transition: color 500ms; } .project-item .project-item__content .project-item__content__country { color: #777777; font-size: 14px; -moz-transition: color 500ms; -o-transition: color 500ms; -webkit-transition: color 500ms; transition: color 500ms; } .project-item a { text-decoration: none; } .project-item a:hover .project-item__image .project-item__image__overlay { opacity: 1; } .project-item a:hover .project-item__image .project-item__image__overlay span { opacity: 1; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } .project-item a:hover .project-item__content { background-color: #333333; } .project-item a:hover .project-item__content__title, .project-item a:hover .project-item__content__country { color: #FFFFFF; } .project__ribbon { position: absolute; top: 10%; left: 0; background: black; color: white; font-weight: 900; font-size: 1.2rem; padding: 10px; text-transform: uppercase; } .product-item { width: 25%; float: left; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; } .product-item a { display: block; } .product-item .product-item__visual { position: relative; } .product-item .product-item__visual:before { display: block; content: " "; width: 100%; padding-top: 100%; } .product-item .product-item__visual > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .product-item .product-item__visual .product-item__visual__collection { overflow: hidden; } .product-item .product-item__visual .product-item__visual__collection .product-item__visual__collection__number { z-index: 600; position: absolute; bottom: -18px; left: 20px; font-size: 90px; color: #FFFFFF; font-family: "HelveticaNeueLTStd-HvCn"; } .product-item .product-item__info { margin-top: 10px; padding-bottom: 10px; position: relative; z-index: 600; } .product-item .product-item__info .product-item__info__title { font-size: 18px; padding-left: 20px; padding-right: 5px; width: 100%; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #000000; text-transform: uppercase; font-family: "HelveticaNeueLTStd-Bd"; -moz-transition: color 500ms; -o-transition: color 500ms; -webkit-transition: color 500ms; transition: color 500ms; } .product-item .product-item__overlay { left: 0px; right: 0px; bottom: 0px; width: 100%; height: 0px; z-index: 500; position: absolute; background-color: #000000; background-color: rgba(0, 0, 0, 0.8); -moz-transition: height 300ms; -o-transition: height 300ms; -webkit-transition: height 300ms; transition: height 300ms; } .product-item * { outline: none; text-decoration: none; } .product-item a:hover .product-item__overlay { height: 100%; } .product-item a:hover .product-item__info .product-item__info__title { color: #FFFFFF; } .mockup-block { margin-top: 80px; margin-bottom: 50px; background-color: #F1F1F1; } .mockup-block .mockup-block__img { width: 100%; margin-bottom: -50px; -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -webkit-transform: translateY(-50px); transform: translateY(-50px); } .mockup-block .mockup-block__content { padding: 0px 25px 25px 25px; } .header-slider .header-slider__slide { background-size: cover; background-position: center; background-repeat: no-repeat; outline: none; } .header-slider .header-slider__slide .header-slider__slide__overlay { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background-color: #000000; } .header-slider .header-slider__slide .header-slider__slide__content .header-slider__slide__content__wrapper { position: absolute; left: 20px; bottom: 150px; } .header-slider .header-slider__slide .header-slider__slide__content .header-slider__slide__content__title { font-family: "HelveticaNeueLTStd-Th", "Arial", sans-serif; color: #FFFFFF; font-size: 40px; margin-bottom: 10px; display: block; } .header-slider .header-slider__slide .header-slider__slide__content .header-slider__slide__content__subtitle { font-family: "HelveticaNeueLTStd-Md", "Arial", sans-serif; color: #FFFFFF; font-size: 18px; text-transform: uppercase; margin-bottom: 20px; display: block; } .header-slider-pager .slick-arrow { float: left; color: #FFFFFF; background-color: #000000; display: inline-block; cursor: pointer; line-height: 35px; padding: 0px 7px; } .header-slider-pager .slick-dots { float: left; margin-left: 10px; } .header-slider-pager .slick-dots li { float: left; line-height: 25px; margin-right: 5px; } .header-slider-pager .slick-dots li.slick-active button { background-color: #000000; } .header-slider-pager .slick-dots li button { cursor: pointer; outline: none; padding: 0px; width: 12px; height: 12px; font-size: 0px; border: 1px solid #000000; background-color: #FFFFFF; -moz-appearance: none; -webkit-appearance: none; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } .header-slider-pager .slick-dots li button:hover { background-color: #515151; } .intro-section .intro-section__video { width: 100%; display: block; } .intro-section .intro-section__left { float: left; width: 60%; z-index: 1999; padding: 30px 60px 10px 30px; background-color: #FFFFFF; margin-bottom: -70px; -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -webkit-transform: translateY(-100px); transform: translateY(-100px); } .intro-section .intro-section__left.intro-section__left--min-height { min-height: 400px; } .intro-section .intro-section__left p { font-size: 20px; line-height: 26px; font-family: "HelveticaNeueLTStd-Lt"; } .intro-section .intro-section__right { float: left; width: 40%; } .intro-section .intro-section__right.intro-section__right--absolute { float: none; position: absolute; right: 0px; bottom: 0px; } .intro-section .intro-section__half { width: 60%; margin-left: auto; margin-right: auto; padding: 50px 50px 10px 50px; background-color: #FFFFFF; margin-bottom: -70px; -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -webkit-transform: translateY(-100px); transform: translateY(-100px); } /* @media only screen and (max-width: 1200px) { .intro-section { .intro-section__left { width: 100%; min-height: auto !important; padding: 30px 30px 10px 30px; } .intro-section__right { float: left; width: 100%; &.intro-section__right--absolute { float: left; position: static; } } } } @media only screen and (max-width: 600px) { .intro-section { .intro-section__left { margin-bottom: 20px; padding-left: 0px; padding-right: 0px; @include translateY(0px); } } } */ .download-item { margin-bottom: 10px; } .download-item .download-item__category { cursor: pointer; padding: 20px 30px 20px 15px; background-color: #F1F1F1; } .download-item .download-item__category .download-item__category__title { color: #878787; font-size: 16px; } .download-item .download-item__category i { float: right; -moz-transition: -moz-transform 300ms; -o-transition: -o-transform 300ms; -webkit-transition: -webkit-transform 300ms; transition: transform 300ms; } .download-item .download-item__category--open i { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .download-item .download-item__dropdown { display: none; padding: 15px 20px; background-color: #FFFFFF; border: 1px solid #F1F1F1; border-top: none; } .download-item .download-item__dropdown .download-item__dropdown__item { display: block; } .download-item .download-item__dropdown .download-item__dropdown__item a { color: #878787; display: block; text-decoration: none; padding: 10px 10px 10px 0px; } .download-item .download-item__dropdown .download-item__dropdown__item a i { float: right; color: #000000; } .designer-link-block { margin-top: 60px; margin-bottom: 40px; padding: 30px 20px; } .designer-link-block .designer-link-block__left { width: 60%; float: left; padding-right: 10%; } .designer-link-block .designer-link-block__left * { color: #FFFFFF; } .designer-link-block .designer-link-block__left p { font-size: 15px; line-height: 20px; font-family: "HelveticaNeueLTStd-Lt", "Arial", sans-serif; } .designer-link-block .designer-link-block__right { width: 40%; float: left; padding-top: 40px; position: relative; } .designer-link-block .designer-link-block__right .designer-link-block__right__image { position: absolute; bottom: 70%; right: 0px; width: 100%; } .designer-link-block .designer-link-block__right a { display: block; text-align: center; } .rich-info-block { padding: 30px 0px; } .rich-info-block .rich-info-block__image { width: 100%; margin-bottom: 15px; } .rich-info-block .rich-info-block__title { font-size: 30px; padding: 0px 20px; } .rich-info-block .rich-info-block__content { padding: 0px 20px; /** { font-size: 14px; line-height: 20px; }*/ } .rich-info-block .rich-info-block__link { margin-top: 25px; } .image-info-block .image-info-block__image { position: relative; } .image-info-block .image-info-block__image img { width: 100%; display: block; } .image-info-block .image-info-block__image:before, .image-info-block .image-info-block__image:after { content: ''; display: block; position: absolute; top: -1px; left: -2000px; width: 2000px; height: 50%; background-color: #F1F1F1; } .image-info-block .image-info-block__image:after { left: auto; right: -2000px; } .image-info-block .image-info-block__content { padding-left: 100px; margin-bottom: -200px; -moz-transform: translateY(-230px); -ms-transform: translateY(-230px); -webkit-transform: translateY(-230px); transform: translateY(-230px); } .image-info-block .image-info-block__content h2 { color: #FFFFFF; position: relative; } .image-info-block .image-info-block__content h2:after { content: ""; position: absolute; left: -100px; top: 14px; width: 80px; height: 1px; background-color: #FFFFFF; } .image-info-block .image-info-block__content .image-info-block__content__wrapper { width: 55%; padding: 30px; background-color: #FFFFFF; } .image-info-block .image-info-block__content .image-info-block__content__wrapper .image-info-block__content__wrapper__link { margin-top: 15px; } .language-switcher { margin-left: 5px; display: inline-block; position: relative; } .language-switcher .language-switcher__active { color: #FFFFFF; cursor: pointer; } .language-switcher .language-switcher__active span { font-size: 13px; } .language-switcher .language-switcher__other { display: none; top: 27px; right: -3px; width: 215px; z-index: 2888; position: absolute; background-color: #000000; } .language-switcher .language-switcher__other ul li { padding: 5px 10px; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } .language-switcher .language-switcher__other ul li.active { display: none; } .language-switcher .language-switcher__other ul li:hover { background-color: #2e2e2e; } .language-switcher .language-switcher__other ul li a { display: block; width: 100%; padding: 4px 8px !important; text-align: center; border: none !important; } .header-aspect-ratio { background-color: #F1F1F1; position: relative; } .header-aspect-ratio:before { display: block; content: " "; width: 100%; padding-top: 33.33333%; } .header-aspect-ratio > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .header-aspect-ratio.header-bg-image { background-position: center; background-size: cover; background-repeat: no-repeat; } @media only screen and (max-width: 870px) { .header-aspect-ratio { position: relative; } .header-aspect-ratio:before { display: block; content: " "; width: 100%; padding-top: 50%; } .header-aspect-ratio > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } } #product-tiles { padding-top: 70px; padding-bottom: 70px; } #product-tiles .product-tiles__description { width: 50%; margin: 0 auto; } #product-tiles .product-tiles_items { max-width: 950px; margin: 0 auto; margin-top: 40px; } #product-tiles .tile { width: 24%; vertical-align: top; display: inline-block; padding-left: 10px; padding-right: 10px; margin-bottom: 30px; } #product-tiles .tile.new_shape_tile { width: 19%; } #product-tiles .tile.new_shape_tile .tile__image a { display: inline-block; padding: 0px 30px 0px 30px; } #product-tiles .tile .tile__image a { display: block; position: relative; text-decoration: none; } #product-tiles .tile .tile__image .tile__image__mto { top: 20px; left: 0px; font-size: 13px; padding: 8px 15px; position: absolute; color: #FFFFFF; background-color: #000000; } #product-tiles .tile .tile__link { text-decoration: none; } #product-tiles .tile .tile__title { font-size: 16px; line-height: 20px; text-align: center; color: #000000; font-family: "HelveticaNeueLTStd-Md", "Arial", sans-serif; margin-top: 10px; margin-bottom: 10px; } #product-tiles .tile .tile__sample { text-align: center; } #product-tiles .tile .tile__sample a { padding-top: 3px; padding-bottom: 3px; padding-left: 25px; color: #A2A2A2; text-decoration: none; display: inline-block; position: relative; } #product-tiles .tile .tile__sample a:after { content: ''; display: block; position: absolute; top: -4px; left: 0px; height: 100%; width: 40px; background-image: url("../../images/general/add_sample.svg"); background-size: contain; background-repeat: no-repeat; } #product-tiles .tile .tile__mto { display: block; font-size: 12px; margin-top: 10px; text-align: center; line-height: 17px; } #product-tiles .ajax-response { margin-top: 30px; max-width: 930px; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 870px) { #product-tiles .tile { width: 32%; } } @media only screen and (max-width: 680px) { #product-tiles .tile { width: 49%; } } @media only screen and (max-width: 450px) { #product-tiles .tile { width: 80%; margin-left: 10%; } } #core-projects-view { padding: 80px 0px 40px 0px; background-color: #F1F1F1; } #core-projects-view .view-header { margin-bottom: 40px; } #core-projects-view .view-pager { z-index: 500; position: relative; } #core-projects-view .info-slider .info-slider__slide__content__title { margin-bottom: 25px; } #search-bg { display: none; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 3000; position: fixed; } #search-bg #svg-search-bg { width: 100%; height: 100%; opacity: 0.9; } #search-content { display: none; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 3010; position: fixed; } #search-content #search-content__form { width: 88vw; top: 30vh; left: 6vw; position: fixed; opacity: 0; -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -webkit-transform: translateY(-40px); transform: translateY(-40px); -moz-transition: -moz-transform 300ms, opacity 300ms; -o-transition: -o-transform 300ms, opacity 300ms; -webkit-transition: -webkit-transform 300ms, opacity 300ms; transition: transform 300ms, opacity 300ms; } #search-content #search-content__form label { font-size: 40px; color: #FFFFFF; } #search-content #search-content__form input[type="text"] { font-size: 40px; color: #FFFFFF; border: none; border-bottom: 6px solid #FFFFFF; background-color: transparent; } #search-content .js-search-close { right: 20px; top: 20px; position: fixed; cursor: pointer; z-index: 3030; font-size: 40px; color: #FFFFFF; -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); -moz-transition: -moz-transform 300ms; -o-transition: -o-transform 300ms; -webkit-transition: -webkit-transform 300ms; transition: transform 300ms; } #search-content.show #search-content__form { opacity: 1; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #search-content.show .js-search-close { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } @media only screen and (max-width: 600px) { #search-content #search-content__form { width: 100%; left: 5%; } #search-content #search-content__form input[type="text"] { width: 90%; font-size: 25px; } } @media only screen and (max-width: 450px) { #search-content #search-content__form input[type="text"] { font-size: 18px; border-bottom: 3px solid #FFFFFF; } } #header { position: fixed; z-index: 2000; top: 0px; right: 0px; left: 0px; height: 110px; } #header #header-sub-nav { height: 35px; background-color: #000000; } #header #header-sub-nav #header-logo { position: absolute; top: 0px; left: 20px; display: block; width: auto; height: 145px; -moz-transition: height 300ms; -o-transition: height 300ms; -webkit-transition: height 300ms; transition: height 300ms; } #header #header-sub-nav #header-logo #logo-modulyss-svg { width: auto; height: 100%; } #header #header-sub-nav #header-logo.smaller { height: 110px; } #header #header-sub-nav > .u-width, #header #footer .block-webform #header-sub-nav > .content, #footer .block-webform #header #header-sub-nav > .content, #header .home-tiles__newsletter #header-sub-nav > .content, .home-tiles__newsletter #header #header-sub-nav > .content, #header #header-sub-nav > #user-login, #header #header-sub-nav > #user-register-form, #header #header-sub-nav > #user-pass, #header #header-sub-nav > #user-pass-reset, #header #header-sub-nav > #user-profile-form { height: 100%; } #header #header-sub-nav #header-sub-nav__menu { height: 100%; } #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper { text-align: right; } #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a { font-size: 14px; padding: 2px 8px; color: #FFFFFF; display: inline-block; text-decoration: none; position: relative; border-right: 1px solid #FFFFFF; } #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__sample { margin-left: 8px; padding-left: 22px; } #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__sample:after { content: ''; display: block; position: absolute; top: -2px; left: 0px; height: 100%; width: 40px; background-image: url("../../images/general/add_sample_white.svg"); background-size: contain; background-repeat: no-repeat; } #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__sample .header-sub-nav__menu__wrapper__sample__amount { display: none; background-color: #FFFFFF; color: #000000; font-size: 8px; padding: 3px; font-weight: 600; -moz-border-radius: 40%; -webkit-border-radius: 40%; border-radius: 40%; -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px); } #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__sample .header-sub-nav__menu__wrapper__sample__amount.show { display: inline-block; } #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__downloads--mobile, #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__sample--mobile { display: none; height: 18px; padding: 0px; -moz-transform: translateY(4px); -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); } #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__downloads--mobile img, #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__sample--mobile img { width: 18px; height: 18px; display: block; margin-left: 4px; margin-right: 8px; } #header .samples-ajax__header__wrapper { right: -100%; top: -100%; z-index: 99999; position: fixed; opacity: 0; -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); -moz-transition: -moz-transform 300ms, opacity 300ms; -o-transition: -o-transform 300ms, opacity 300ms; -webkit-transition: -webkit-transform 300ms, opacity 300ms; transition: transform 300ms, opacity 300ms; } #header .samples-ajax__header__wrapper.show { opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } #header .samples-ajax__header__wrapper .arrow_box { min-width: 200px; padding: 25px; text-align: center; position: relative; background: #000000; -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3); } #header .samples-ajax__header__wrapper .arrow_box:after { bottom: 100%; right: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-bottom-color: #000000; border-width: 15px; margin-left: -15px; } #header .samples-ajax__header__wrapper * { color: #FFFFFF; } #header .samples-ajax__header__wrapper .samples-ajax__header__wrapper__link { display: block; font-size: 14px; text-decoration: none; } #header .samples-ajax__header__wrapper .samples-ajax__header__wrapper__link i { display: inline-block; margin-left: 8px; font-size: 12px; } #header .samples-ajax__header__wrapper .samples-ajax__header__wrapper__title { display: block; margin-bottom: 12px; } #header #header-master-nav { height: 75px; background-color: #FFFFFF; -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); } #header #header-master-nav nav#main-navigation .menu-block-wrapper { text-align: right; } #header #header-master-nav nav#main-navigation .menu-block-wrapper ul { display: inline-block; } #header #header-master-nav nav#main-navigation .menu-block-wrapper ul li { display: block; float: left; padding-left: 15px; padding-right: 15px; } #header #header-master-nav nav#main-navigation .menu-block-wrapper ul li:last-child { padding-right: 0px; } #header #header-master-nav nav#main-navigation .menu-block-wrapper ul li a { display: inline-block; line-height: 75px; color: #000000; font-weight: 600; text-decoration: none; position: relative; } #header #header-master-nav nav#main-navigation .menu-block-wrapper ul li a:after { content: ''; background-color: transparent; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } #header #header-master-nav nav#main-navigation .menu-block-wrapper ul li a.active:after, #header #header-master-nav nav#main-navigation .menu-block-wrapper ul li a.active-trail:after, #header #header-master-nav nav#main-navigation .menu-block-wrapper ul li a:hover:after { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 3px; background-color: #000000; } #header #header-master-nav nav#main-navigation .menu-block-wrapper ul li a:hover:after { opacity: 0.6; } #header #mobile-nav-toggle { display: none; } @media only screen and (max-width: 970px) { #header #header-sub-nav #header-logo { height: 96px !important; } #header #header-master-nav { height: 60px; } #header #header-master-nav #main-navigation { display: none; top: 95px; left: 0px; right: 0px; position: fixed; border-top: 1px solid #F1F1F1; background-color: #FFFFFF; -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); } #header #header-master-nav #main-navigation .menu-block-wrapper { text-align: left !important; } #header #header-master-nav #main-navigation .menu-block-wrapper ul.menu { width: 100%; } #header #header-master-nav #main-navigation .menu-block-wrapper ul.menu li { width: 100%; display: block; border-bottom: 1px solid #F1F1F1; } #header #header-master-nav #main-navigation .menu-block-wrapper ul.menu li:last-child { border-bottom: none; } #header #header-master-nav #main-navigation .menu-block-wrapper ul.menu li a { text-align: center; display: block; font-size: 18px; line-height: 40px; color: #000000; } #header #header-master-nav #main-navigation .menu-block-wrapper ul.menu li a.active-trail:after { display: none; } #header #header-master-nav #main-navigation .menu-block-wrapper ul.menu li a:hover:after { display: none; } #header #header-master-nav #mobile-nav-toggle { height: 60px; display: block; text-align: right; overflow: hidden; } #header #header-master-nav #mobile-nav-toggle i { cursor: pointer; font-size: 21px; line-height: 60px; display: inline-block; padding: 0px 15px; margin-right: -15px; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; } } @media only screen and (max-width: 550px) { #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper .header-sub-nav__menu__wrapper__downloads, #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper .header-sub-nav__menu__wrapper__sample { display: none; } #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__downloads--mobile, #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__sample--mobile { display: inline-block; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #header-logo #logo-modulyss-svg { -moz-transform: translateX(-75px); -ms-transform: translateX(-75px); -webkit-transform: translateX(-75px); transform: translateX(-75px); } #header-logo.smaller #logo-modulyss-svg { -moz-transform: translateX(-95px); -ms-transform: translateX(-95px); -webkit-transform: translateX(-95px); transform: translateX(-95px); } #header #header-sub-nav #header-sub-nav__menu .header-sub-nav__menu__wrapper a.header-sub-nav__menu__wrapper__sample::after { background-position-x: -10px; } } #footer .block-hannibal-footer-block { background-color: #1A1A18; padding-top: 50px; padding-bottom: 25px; } #footer .block-hannibal-footer-block * { color: #FFFFFF; } #footer .block-hannibal-footer-block #footer__contact { float: left; width: 20%; width: calc(210px); } #footer .block-hannibal-footer-block #footer__contact .user-content *, #footer .block-hannibal-footer-block #footer__contact .block-webform *, #footer .block-hannibal-footer-block #footer__contact .home-tiles__newsletter *, #footer .block-hannibal-footer-block #footer__contact #user-pass .user-pass__info *, #user-pass #footer .block-hannibal-footer-block #footer__contact .user-pass__info * { color: #C5CCC5; font-size: 13px; line-height: 18px; } #footer .block-hannibal-footer-block #footer__contact strong { color: red !important; font-weight: 600; font-size: 15px; margin-bottom: 30px; } #footer .block-hannibal-footer-block #footer__contact a { text-decoration: none; -moz-transition: color 300ms; -o-transition: color 300ms; -webkit-transition: color 300ms; transition: color 300ms; } #footer .block-hannibal-footer-block #footer__contact a:hover { color: #FFFFFF; } #footer .block-hannibal-footer-block #footer__links { float: left; width: 60%; width: calc(100% - 420px); } #footer .block-hannibal-footer-block #footer__links .footer__links__col { float: left; width: 25%; padding-right: 8px; } #footer .block-hannibal-footer-block #footer__links .footer__links__col ul li { padding-bottom: 10px; } #footer .block-hannibal-footer-block #footer__links .footer__links__col ul li a { color: #C5CCC5; font-size: 13px; text-decoration: none; -moz-transition: color 300ms; -o-transition: color 300ms; -webkit-transition: color 300ms; transition: color 300ms; } #footer .block-hannibal-footer-block #footer__links .footer__links__col ul li a:hover { color: #FFFFFF; } #footer .block-hannibal-footer-block #footer__social { float: left; width: 20%; width: calc(210px); } #footer .block-hannibal-footer-block #footer__social a { display: inline-block; font-size: 20px; margin-right: 10px; } #footer .block-hannibal-footer-block #footer__social a i { color: #C5CCC5; -moz-transition: color 300ms; -o-transition: color 300ms; -webkit-transition: color 300ms; transition: color 300ms; } #footer .block-hannibal-footer-block #footer__social a:last-child { margin-right: 0px; } #footer .block-hannibal-footer-block #footer__social a:hover i { color: #FFFFFF; } #footer .block-hannibal-footer-block .footer-wrapper h3 { font-weight: 600; font-size: 15px; margin-bottom: 30px; } #footer .footer__bottom { margin-top: 40px; padding-top: 15px; border-top: 1px solid #858585; } #footer .footer__bottom a { text-decoration: none; -moz-transition: color 300ms; -o-transition: color 300ms; -webkit-transition: color 300ms; transition: color 300ms; } #footer .footer__bottom a:hover { color: #FFFFFF; } #footer .footer__bottom * { color: #858585; } #footer .footer__bottom .footer__bottom__left { float: left; } #footer .footer__bottom .footer__bottom__left span { display: inline-block; margin-left: 10px; padding-left: 10px; border-left: 1px solid #858585; } #footer .footer__bottom .footer__bottom__left span:first-child { padding-left: 0px; margin-left: 0px; border: none; } #footer .footer__bottom .footer__bottom__right { float: right; } #footer .block-webform, .home-tiles__newsletter { border-top: 1px solid #999999; padding-top: 70px; padding-bottom: 70px; } #footer .block-webform h2, .home-tiles__newsletter h2 { text-align: center; } #footer .block-webform form, .home-tiles__newsletter form { width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; position: relative; margin-bottom: 40px; } #footer .block-webform form .webform-component-markup, .home-tiles__newsletter form .webform-component-markup { text-align: center; margin-bottom: 25px; } #footer .block-webform form .webform-component-markup p, .home-tiles__newsletter form .webform-component-markup p { font-size: 16px; } #footer .block-webform form .webform-component-markup.webform-component--note, .home-tiles__newsletter form .webform-component-markup.webform-component--note { margin: 0px; bottom: -60px; right: 80px; position: absolute; opacity: 0.55; } #footer .block-webform form .webform-component-markup.webform-component--note p, .home-tiles__newsletter form .webform-component-markup.webform-component--note p { width: 180px; font-size: 14px; line-height: 18px; position: relative; display: inline-block; } #footer .block-webform form .webform-component-markup.webform-component--note p::after, .home-tiles__newsletter form .webform-component-markup.webform-component--note p::after { position: absolute; bottom: 10px; left: -50px; width: 70px; height: 25px; content: ''; background-image: url("../../images/general/round-arrow.svg"); background-repeat: no-repeat; -moz-transform: rotate(27deg); -ms-transform: rotate(27deg); -webkit-transform: rotate(27deg); transform: rotate(27deg); } #footer .block-webform form .webform-component-email, .home-tiles__newsletter form .webform-component-email { float: left; width: 80%; width: calc(100% - 150px); height: 50px; margin: 0px; } #footer .block-webform form .webform-component-email input, .home-tiles__newsletter form .webform-component-email input { font-size: 17px; height: 100%; padding: 5px 15px; } #footer .block-webform form .webform-component--privacy-policy, .home-tiles__newsletter form .webform-component--privacy-policy { left: 0px; margin: 0px; bottom: -35px; position: absolute; } #footer .block-webform form .webform-component--privacy-policy label, .home-tiles__newsletter form .webform-component--privacy-policy label { display: none; } #footer .block-webform form .webform-component--privacy-policy .form-type-checkbox, .home-tiles__newsletter form .webform-component--privacy-policy .form-type-checkbox { height: 13px; width: 25px !important; margin: 0px !important; } #footer .block-webform form .webform-component--privacy-policy .form-checkboxes, #footer .block-webform form .webform-component--privacy-policy .description, .home-tiles__newsletter form .webform-component--privacy-policy .form-checkboxes, .home-tiles__newsletter form .webform-component--privacy-policy .description { float: left; display: inline-block; } #footer .block-webform form .webform-component--privacy-policy .description, .home-tiles__newsletter form .webform-component--privacy-policy .description { color: #A3A3A3; font-size: 15px; -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -webkit-transform: translateY(-1px); transform: translateY(-1px); } #footer .block-webform form .webform-component--privacy-policy .description a, .home-tiles__newsletter form .webform-component--privacy-policy .description a { color: #8a8a8a; } #footer .block-webform form .webform-component-checkboxes .jquery-checkbox-wrapper, .home-tiles__newsletter form .webform-component-checkboxes .jquery-checkbox-wrapper { margin-right: 8px; -moz-transform: translateY(1px); -ms-transform: translateY(1px); -webkit-transform: translateY(1px); transform: translateY(1px); } #footer .block-webform form .webform-component-checkboxes .form-item, .home-tiles__newsletter form .webform-component-checkboxes .form-item { display: inline-block; margin-right: 25px; } #footer .block-webform form .webform-component-checkboxes .form-item:last-child, .home-tiles__newsletter form .webform-component-checkboxes .form-item:last-child { margin-right: 0px; } #footer .block-webform form .form-actions, .home-tiles__newsletter form .form-actions { float: left; width: 20%; width: 150px; height: 50px; margin: 0px; } #footer .block-webform form .form-actions input, .home-tiles__newsletter form .form-actions input { width: 100%; height: 100%; color: #FFFFFF; padding-left: 45px; text-transform: uppercase; font-size: 16px; background-color: #000000; background-image: url("../../images/general/paper_plane_send_icon.svg"); background-repeat: no-repeat; background-size: 40px 40px; background-position: 20px center; outline: none; } #footer.footer-blog .footer-newsletter .form-actions input { color: #000; background: none; } .home-tiles__newsletter form .webform-component-markup.webform-component--note { bottom: -48px; right: 0px; } .home-tiles__newsletter form .webform-component-markup.webform-component--note p { width: 320px; } .home-tiles__newsletter form .webform-component-markup.webform-component--note p:after { bottom: 2px; } .i18n-nl-BE #footer .block-webform form .form-actions, .i18n-nl-BE .home-tiles__newsletter form .form-actions, .i18n-nl-NL #footer .block-webform form .form-actions, .i18n-nl-NL .home-tiles__newsletter form .form-actions { width: 200px; } .i18n-nl-BE #footer .block-webform form .webform-component-email, .i18n-nl-BE .home-tiles__newsletter form .webform-component-email, .i18n-nl-NL #footer .block-webform form .webform-component-email, .i18n-nl-NL .home-tiles__newsletter form .webform-component-email { width: calc(100% - 200px); } .i18n-nl-BE #footer .block-webform form .webform-component-markup.webform-component--note p, .i18n-nl-BE .home-tiles__newsletter form .webform-component-markup.webform-component--note p, .i18n-nl-NL #footer .block-webform form .webform-component-markup.webform-component--note p, .i18n-nl-NL .home-tiles__newsletter form .webform-component-markup.webform-component--note p { width: 210px; } .i18n-fr-FR #footer .block-webform form .form-actions, .i18n-fr-FR .home-tiles__newsletter form .form-actions, .i18n-fr-BE #footer .block-webform form .form-actions, .i18n-fr-BE .home-tiles__newsletter form .form-actions { width: 180px; } .i18n-fr-FR #footer .block-webform form .webform-component-email, .i18n-fr-FR .home-tiles__newsletter form .webform-component-email, .i18n-fr-BE #footer .block-webform form .webform-component-email, .i18n-fr-BE .home-tiles__newsletter form .webform-component-email { width: calc(100% - 180px); } .i18n-fr-FR #footer .block-webform form .webform-component-markup.webform-component--note p, .i18n-fr-FR .home-tiles__newsletter form .webform-component-markup.webform-component--note p, .i18n-fr-BE #footer .block-webform form .webform-component-markup.webform-component--note p, .i18n-fr-BE .home-tiles__newsletter form .webform-component-markup.webform-component--note p { width: 280px; } .i18n-no-NO #footer .block-webform form .webform-component-markup.webform-component--note p, .i18n-no-NO .home-tiles__newsletter form .webform-component-markup.webform-component--note p { width: 220px; } .i18n-ru #footer .block-webform form .form-actions, .i18n-ru .home-tiles__newsletter form .form-actions { width: 180px; } .i18n-ru #footer .block-webform form .webform-component-email, .i18n-ru .home-tiles__newsletter form .webform-component-email { width: calc(100% - 180px); } .i18n-ru #footer .block-webform form .webform-component-markup.webform-component--note p, .i18n-ru .home-tiles__newsletter form .webform-component-markup.webform-component--note p { width: 280px; } @media only screen and (max-width: 980px) { #footer .block-hannibal-footer-block #footer__social { width: 100%; margin-top: 30px; } #footer .block-hannibal-footer-block #footer__links { width: 80%; width: calc(100% - 210px); } #footer .footer-block #footer__social { width: 100%; margin-top: 30px; } #footer .footer-block #footer__links { width: 80%; width: calc(100% - 210px); } } @media only screen and (max-width: 670px) { #footer .block-hannibal-footer-block #footer__contact, #footer .block-hannibal-footer-block #footer__social, #footer .block-hannibal-footer-block #footer__links { width: 100%; } #footer .block-hannibal-footer-block #footer__links, #footer .block-hannibal-footer-block #footer__social { margin-top: 25px; } #footer .footer-block #footer__contact, #footer .footer-block #footer__social, #footer .footer-block #footer__links { width: 100%; } #footer .footer-block #footer__links, #footer .footer-block #footer__social { margin-top: 25px; } #footer .block-webform  { padding-bottom: 90px; } #footer .block-webform form .webform-component-markup.webform-component--note { bottom: -90px; } } @media only screen and (max-width: 600px) { #footer .block-hannibal-footer-block .footer__bottom .footer__bottom__left, #footer .block-hannibal-footer-block .footer__bottom .footer__bottom__right { width: 100%; float: none; } #footer .block-hannibal-footer-block .footer__bottom .footer__bottom__right { margin-top: 10px; } #footer .footer-block .footer__bottom .footer__bottom__left, #footer .footer-block .footer__bottom .footer__bottom__right { width: 100%; float: none; } #footer .footer-block .footer__bottom .footer__bottom__right { margin-top: 10px; } } @media only screen and (max-width: 480px) { #footer .block-webform form .form-actions { width: 100px; } #footer .block-webform form .form-actions input[type="submit"] { padding-left: 10px; background-image: none; } #footer .block-webform form .webform-component-email { width: calc(100% - 100px); } #footer .block-webform form .webform-component-markup.webform-component--note { left: 85px; right: auto; } #footer .block-hannibal-footer-block #footer__links { display: none; } #footer .block-hannibal-footer-block #footer__contact, #footer .block-hannibal-footer-block #footer__social { margin-top: 0px; width: 50%; } #footer .block-hannibal-footer-block #footer__social a { margin-bottom: 10px; } #footer .block-hannibal-footer-block .footer__bottom .footer__bottom__right { margin-top: 20px; } #footer .block-hannibal-footer-block .footer__bottom .footer__bottom__left { line-height: 20px; } #footer .block-hannibal-footer-block .footer__bottom .footer__bottom__left span:first-child { width: 100%; margin-bottom: 10px; } #footer .block-hannibal-footer-block .footer__bottom .footer__bottom__left span:nth-child(2) { border: none; margin-left: 0px; padding-left: 0px; } #footer .footer-block #footer__links { display: none; } #footer .footer-block .footer__bottom .footer__bottom__right { margin-top: 20px; } #footer .footer-block .footer__bottom .footer__bottom__left { line-height: 20px; } #footer .footer-block .footer__bottom .footer__bottom__left span:first-child { width: 100%; margin-bottom: 10px; } #footer .footer-block .footer__bottom .footer__bottom__left span:nth-child(2) { border: none; margin-left: 0px; padding-left: 0px; } } form label { font-family: "HelveticaNeueLTStd-Md"; display: inline-block; margin-bottom: 10px; } form input[type="text"], form input[type="password"], form input[type="number"], form input[type="email"], form textarea { width: 100%; outline: none; border: 1px solid #C9C9C9; padding: 14px 15px; font-family: inherit; font-size: 16px; outline: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -moz-appearance: none; -webkit-appearance: none; } form input[type="submit"] { padding: 6px 10px; border: none; cursor: pointer; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -moz-appearance: none; -webkit-appearance: none; } .products-overview .view-filters { padding-top: 45px; padding-bottom: 30px; background-color: #F1F1F1; } .products-overview .view-filters .views-exposed-widgets { margin-left: -10px; margin-right: -10px; } .products-overview .view-filters .views-filters__title { display: block; font-size: 24px; margin-bottom: 15px; font-family: "HelveticaNeueLTStd-Bd"; } .products-overview .view-filters .views-exposed-widget { width: 25%; float: left; padding: 0px 10px; margin-bottom: 20px; } .products-overview .view-filters .views-exposed-widget > label { display: none; } .products-overview .view-filters .form-checkboxes { width: 100%; height: 50px; border: 1px solid #C9C9C9; background-color: #F1F1F1; } .products-overview .view-filters .form-checkboxes.checkbox-active { border-color: #b0b0b0; background-color: #FFFFFF; } .products-overview .view-filters .form-checkboxes .form-item { padding: 5px 8px; line-height: 40px; } .products-overview .view-filters .form-checkboxes .jquery-checkbox-wrapper { width: 12px; height: 12px; float: left; } .products-overview .view-filters .form-checkboxes .jquery-checkbox-wrapper a { display: inline-block; width: 12px; height: 12px; border: 1px solid #C9C9C9; } .products-overview .view-filters .form-checkboxes .jquery-checkbox-wrapper a.jquery-checkbox-on { background-color: #C9C9C9; } .products-overview .view-filters .form-checkboxes .jquery-checkbox-wrapper a.jquery-checkbox-on:after { display: none; } .products-overview .view-filters .form-checkboxes label { cursor: pointer; display: inline-block; padding-left: 10px; color: #878787; font-style: normal; font-weight: 400; font-family: "HelveticaNeueLTStd-Roman"; } .products-overview .view-filters .views-submit-button { width: auto; position: relative; } .products-overview .view-filters .views-submit-button input[type="submit"] { margin-top: 0px; height: 100%; height: 50px; line-height: 50px; padding-top: 0px; padding-bottom: 0px; } .products-overview .view-filters .views-submit-button .ajax-progress-throbber { top: 0px; left: 10px; right: 10px; bottom: 0px; position: absolute; background-color: #000000; } .products-overview .view-filters .views-submit-button .ajax-progress-throbber .throbber { width: 100%; height: 100%; background-size: 25px 25px; background-position: center !important; background-image: url("../../images/downloads/oval_white.svg"); } .products-overview .view-filters .view-reset-button { width: auto; margin-top: 16px; font-size: 16px; color: #878787; display: inline-block; text-decoration: none; padding: 0px 3px 0px 3px; border-bottom: 1px solid #878787; background-color: transparent; } .products-overview .view-content { padding-top: 50px; padding-bottom: 50px; margin-left: -10px; margin-right: -10px; } .views-exposed-form .SumoSelect, .webform-component--country .SumoSelect, #hsp__form .SumoSelect, .webform-component--company-type .SumoSelect { width: 100% !important; height: 50px; outline: none; } .views-exposed-form .SumoSelect > .CaptionCont, .webform-component--country .SumoSelect > .CaptionCont, #hsp__form .SumoSelect > .CaptionCont, .webform-component--company-type .SumoSelect > .CaptionCont { height: 100%; cursor: pointer; background-color: #F1F1F1; border-color: #C9C9C9 !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -moz-transition: border-color 300ms, background-color 300ms; -o-transition: border-color 300ms, background-color 300ms; -webkit-transition: border-color 300ms, background-color 300ms; transition: border-color 300ms, background-color 300ms; } .views-exposed-form .SumoSelect > .CaptionCont > label, .webform-component--country .SumoSelect > .CaptionCont > label, #hsp__form .SumoSelect > .CaptionCont > label, .webform-component--company-type .SumoSelect > .CaptionCont > label { cursor: pointer; margin-bottom: 0px; } .views-exposed-form .SumoSelect > .CaptionCont > label i, .webform-component--country .SumoSelect > .CaptionCont > label i, #hsp__form .SumoSelect > .CaptionCont > label i, .webform-component--company-type .SumoSelect > .CaptionCont > label i { background-image: none; } .views-exposed-form .SumoSelect > .CaptionCont > .placeholder, .views-exposed-form .SumoSelect > .CaptionCont > span, .webform-component--country .SumoSelect > .CaptionCont > .placeholder, .webform-component--country .SumoSelect > .CaptionCont > span, #hsp__form .SumoSelect > .CaptionCont > .placeholder, #hsp__form .SumoSelect > .CaptionCont > span, .webform-component--company-type .SumoSelect > .CaptionCont > .placeholder, .webform-component--company-type .SumoSelect > .CaptionCont > span { line-height: 40px; cursor: pointer; color: #878787; font-style: normal; font-family: "HelveticaNeueLTStd-Roman"; } .views-exposed-form .SumoSelect > .CaptionCont.search i, .webform-component--country .SumoSelect > .CaptionCont.search i, #hsp__form .SumoSelect > .CaptionCont.search i, .webform-component--company-type .SumoSelect > .CaptionCont.search i { padding-top: 5px; } .views-exposed-form .SumoSelect.open > .CaptionCont, .views-exposed-form .SumoSelect:hover > .CaptionCont, .views-exposed-form .SumoSelect.has-options-selected > .CaptionCont, .webform-component--country .SumoSelect.open > .CaptionCont, .webform-component--country .SumoSelect:hover > .CaptionCont, .webform-component--country .SumoSelect.has-options-selected > .CaptionCont, #hsp__form .SumoSelect.open > .CaptionCont, #hsp__form .SumoSelect:hover > .CaptionCont, #hsp__form .SumoSelect.has-options-selected > .CaptionCont, .webform-component--company-type .SumoSelect.open > .CaptionCont, .webform-component--company-type .SumoSelect:hover > .CaptionCont, .webform-component--company-type .SumoSelect.has-options-selected > .CaptionCont { border-color: #b0b0b0; background-color: #FFFFFF; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .views-exposed-form .SumoSelect.open .search-txt, .webform-component--country .SumoSelect.open .search-txt, #hsp__form .SumoSelect.open .search-txt, .webform-component--company-type .SumoSelect.open .search-txt { border: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } .views-exposed-form .SumoSelect.open > .optWrapper, .webform-component--country .SumoSelect.open > .optWrapper, #hsp__form .SumoSelect.open > .optWrapper, .webform-component--company-type .SumoSelect.open > .optWrapper { top: 49px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } .views-exposed-form .SumoSelect.open > .optWrapper *, .webform-component--country .SumoSelect.open > .optWrapper *, #hsp__form .SumoSelect.open > .optWrapper *, .webform-component--company-type .SumoSelect.open > .optWrapper * { -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } .views-exposed-form .SumoSelect.open > .optWrapper ul, .webform-component--country .SumoSelect.open > .optWrapper ul, #hsp__form .SumoSelect.open > .optWrapper ul, .webform-component--company-type .SumoSelect.open > .optWrapper ul { padding: 10px 0px; } .views-exposed-form .SumoSelect.open > .optWrapper ul li, .views-exposed-form .SumoSelect.open > .optWrapper ul li.opt, .webform-component--country .SumoSelect.open > .optWrapper ul li, .webform-component--country .SumoSelect.open > .optWrapper ul li.opt, #hsp__form .SumoSelect.open > .optWrapper ul li, #hsp__form .SumoSelect.open > .optWrapper ul li.opt, .webform-component--company-type .SumoSelect.open > .optWrapper ul li, .webform-component--company-type .SumoSelect.open > .optWrapper ul li.opt { border-bottom: none; } .views-exposed-form .SumoSelect.open > .optWrapper ul li span i, .views-exposed-form .SumoSelect.open > .optWrapper ul li.opt span i, .webform-component--country .SumoSelect.open > .optWrapper ul li span i, .webform-component--country .SumoSelect.open > .optWrapper ul li.opt span i, #hsp__form .SumoSelect.open > .optWrapper ul li span i, #hsp__form .SumoSelect.open > .optWrapper ul li.opt span i, .webform-component--company-type .SumoSelect.open > .optWrapper ul li span i, .webform-component--company-type .SumoSelect.open > .optWrapper ul li.opt span i { width: 12px; height: 12px; border: 1px solid #C9C9C9; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } .views-exposed-form .SumoSelect.open > .optWrapper ul li label, .views-exposed-form .SumoSelect.open > .optWrapper ul li.opt label, .webform-component--country .SumoSelect.open > .optWrapper ul li label, .webform-component--country .SumoSelect.open > .optWrapper ul li.opt label, #hsp__form .SumoSelect.open > .optWrapper ul li label, #hsp__form .SumoSelect.open > .optWrapper ul li.opt label, .webform-component--company-type .SumoSelect.open > .optWrapper ul li label, .webform-component--company-type .SumoSelect.open > .optWrapper ul li.opt label { display: inline-block; font-size: 13px; color: #878787; font-family: "HelveticaNeueLTStd-Roman"; font-weight: 400; margin-bottom: 0px; -moz-transform: translateY(1px); -ms-transform: translateY(1px); -webkit-transform: translateY(1px); transform: translateY(1px); } .views-exposed-form .SumoSelect.open > .optWrapper ul li.selected span i, .views-exposed-form .SumoSelect.open > .optWrapper ul li.opt.selected span i, .webform-component--country .SumoSelect.open > .optWrapper ul li.selected span i, .webform-component--country .SumoSelect.open > .optWrapper ul li.opt.selected span i, #hsp__form .SumoSelect.open > .optWrapper ul li.selected span i, #hsp__form .SumoSelect.open > .optWrapper ul li.opt.selected span i, .webform-component--company-type .SumoSelect.open > .optWrapper ul li.selected span i, .webform-component--company-type .SumoSelect.open > .optWrapper ul li.opt.selected span i { background-color: #C9C9C9; background-image: none; } #edit-color-wrapper .SumoSelect.open > .optWrapper ul, #hsp__form .sumo_colors.open > .optWrapper ul { padding: 0px; } #edit-color-wrapper .SumoSelect.open > .optWrapper ul li, #edit-color-wrapper .SumoSelect.open > .optWrapper ul li.opt, #hsp__form .sumo_colors.open > .optWrapper ul li, #hsp__form .sumo_colors.open > .optWrapper ul li.opt { padding-left: 6px; width: 16.666666%; float: left; } #edit-color-wrapper .SumoSelect.open > .optWrapper ul li span, #edit-color-wrapper .SumoSelect.open > .optWrapper ul li.opt span, #hsp__form .sumo_colors.open > .optWrapper ul li span, #hsp__form .sumo_colors.open > .optWrapper ul li.opt span { width: auto; display: block; margin-left: 0px; position: static; } #edit-color-wrapper .SumoSelect.open > .optWrapper ul li span i, #edit-color-wrapper .SumoSelect.open > .optWrapper ul li.opt span i, #hsp__form .sumo_colors.open > .optWrapper ul li span i, #hsp__form .sumo_colors.open > .optWrapper ul li.opt span i { width: 25px; height: 25px; display: block; position: static; margin-top: 5px; margin-bottom: 5px; border: 1px solid #e4e4e4; } #edit-color-wrapper .SumoSelect.open > .optWrapper ul li label, #edit-color-wrapper .SumoSelect.open > .optWrapper ul li.opt label, #hsp__form .sumo_colors.open > .optWrapper ul li label, #hsp__form .sumo_colors.open > .optWrapper ul li.opt label { display: none; } #edit-color-wrapper .SumoSelect.open > .optWrapper ul li.selected, #edit-color-wrapper .SumoSelect.open > .optWrapper ul li.opt.selected, #hsp__form .sumo_colors.open > .optWrapper ul li.selected, #hsp__form .sumo_colors.open > .optWrapper ul li.opt.selected { background-color: #E4E4E4; } .webform-confirmation { padding-top: 120px; padding-bottom: 120px; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .SumoSelect p { margin: 0; } .SumoSelect { width: 200px; } .SelectBox { padding: 5px 8px; } .sumoStopScroll { overflow: hidden; } /* Filtering style */ .SumoSelect .hidden { display: none; } .SumoSelect .search-txt { display: none; outline: none; } .SumoSelect .no-match { display: none; padding: 6px; } .SumoSelect.open .search-txt { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; margin: 0; padding: 5px 8px; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 5px; } .SumoSelect.open > .search > span, .SumoSelect.open > .search > label { visibility: hidden; } /*this is applied on that hidden select. DO NOT USE display:none; or visiblity:hidden; and Do not override any of these properties. */ .SelectClass, .SumoUnder { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .SelectClass { z-index: 1; } .SumoSelect > .optWrapper > .options li.opt label, .SumoSelect > .CaptionCont, .SumoSelect .select-all > label { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } .SumoSelect { display: inline-block; position: relative; outline: none; } .SumoSelect:focus > .CaptionCont, .SumoSelect:hover > .CaptionCont, .SumoSelect.open > .CaptionCont { box-shadow: 0 0 2px #7799D0; border-color: #7799D0; } .SumoSelect > .CaptionCont { position: relative; border: 1px solid #A4A4A4; min-height: 14px; background-color: #fff; border-radius: 2px; margin: 0; } .SumoSelect > .CaptionCont > span { display: block; padding-right: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: default; } /*placeholder style*/ .SumoSelect > .CaptionCont > span.placeholder { color: #ccc; font-style: italic; } .SumoSelect > .CaptionCont > label { position: absolute; top: 0; right: 0; bottom: 0; width: 30px; } .SumoSelect > .CaptionCont > label > i { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII="); background-position: center center; width: 16px; height: 16px; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-repeat: no-repeat; opacity: 0.8; } .SumoSelect > .optWrapper { display: none; z-index: 1000; top: 30px; width: 100%; position: absolute; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; border: 1px solid #ddd; box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.11); border-radius: 3px; overflow: hidden; } .SumoSelect.open > .optWrapper { top: 35px; display: block; } .SumoSelect.open > .optWrapper.up { top: auto; bottom: 100%; margin-bottom: 5px; } .SumoSelect > .optWrapper ul { list-style: none; display: block; padding: 0; margin: 0; overflow: auto; } .SumoSelect > .optWrapper > .options { border-radius: 2px; position: relative; /*Set the height of pop up here (only for desktop mode)*/ max-height: 250px; /*height*/ } .SumoSelect > .optWrapper > .options li.group.disabled > label { opacity: 0.5; } .SumoSelect > .optWrapper > .options li ul li.opt { padding-left: 22px; } .SumoSelect > .optWrapper.multiple > .options li ul li.opt { padding-left: 50px; } .SumoSelect > .optWrapper.isFloating > .options { max-height: 100%; box-shadow: 0 0 100px #595959; } .SumoSelect > .optWrapper > .options li.opt { padding: 6px 6px; position: relative; border-bottom: 1px solid #f5f5f5; } .SumoSelect > .optWrapper > .options > li.opt:first-child { border-radius: 2px 2px 0 0; } .SumoSelect > .optWrapper > .options > li.opt:last-child { border-radius: 0 0 2px 2px; border-bottom: none; } .SumoSelect > .optWrapper > .options li.opt:hover { background-color: #E4E4E4; } .SumoSelect > .optWrapper > .options li.opt.sel { background-color: #a1c0e4; border-bottom: 1px solid #a1c0e4; } .SumoSelect > .optWrapper > .options li label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; cursor: pointer; } .SumoSelect > .optWrapper > .options li span { display: none; } .SumoSelect > .optWrapper > .options li.group > label { cursor: default; padding: 8px 6px; font-weight: bold; } /*Floating styles*/ .SumoSelect > .optWrapper.isFloating { position: fixed; top: 0; left: 0; right: 0; width: 90%; bottom: 0; margin: auto; max-height: 90%; } /*disabled state*/ .SumoSelect > .optWrapper > .options li.opt.disabled { background-color: inherit; pointer-events: none; } .SumoSelect > .optWrapper > .options li.opt.disabled * { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; } /*styling for multiple select*/ .SumoSelect > .optWrapper.multiple > .options li.opt { padding-left: 35px; cursor: pointer; } .SumoSelect > .optWrapper.multiple > .options li.opt span, .SumoSelect .select-all > span { position: absolute; display: block; width: 30px; top: 0; bottom: 0; margin-left: -35px; } .SumoSelect > .optWrapper.multiple > .options li.opt span i, .SumoSelect .select-all > span i { position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; width: 14px; height: 14px; border: 1px solid #AEAEAE; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); background-color: #fff; } .SumoSelect > .optWrapper > .MultiControls { display: none; border-top: 1px solid #ddd; background-color: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.13); border-radius: 0 0 3px 3px; } .SumoSelect > .optWrapper.multiple.isFloating > .MultiControls { display: block; margin-top: 5px; position: absolute; bottom: 0; width: 100%; } .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls { display: block; } .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p { padding: 6px; } .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p:focus { box-shadow: 0 0 2px #a1c0e4; border-color: #a1c0e4; outline: none; background-color: #a1c0e4; } .SumoSelect > .optWrapper.multiple > .MultiControls > p { display: inline-block; cursor: pointer; padding: 12px; width: 50%; box-sizing: border-box; text-align: center; } .SumoSelect > .optWrapper.multiple > .MultiControls > p:hover { background-color: #f1f1f1; } .SumoSelect > .optWrapper.multiple > .MultiControls > p.btnOk { border-right: 1px solid #DBDBDB; border-radius: 0 0 0 3px; } .SumoSelect > .optWrapper.multiple > .MultiControls > p.btnCancel { border-radius: 0 0 3px 0; } /*styling for select on popup mode*/ .SumoSelect > .optWrapper.isFloating > .options li.opt { padding: 12px 6px; } /*styling for only multiple select on popup mode*/ .SumoSelect > .optWrapper.multiple.isFloating > .options li.opt { padding-left: 35px; } .SumoSelect > .optWrapper.multiple.isFloating { padding-bottom: 43px; } .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i, .SumoSelect .select-all.selected > span i, .SumoSelect .select-all.partial > span i { background-color: #11a911; box-shadow: none; border-color: transparent; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: center center; } /*disabled state*/ .SumoSelect.disabled { opacity: 0.7; cursor: not-allowed; } .SumoSelect.disabled > .CaptionCont { border-color: #ccc; box-shadow: none; } /**Select all button**/ .SumoSelect .select-all { border-radius: 3px 3px 0 0; position: relative; border-bottom: 1px solid #ddd; background-color: #fff; padding: 8px 0 3px 35px; height: 20px; cursor: pointer; } .SumoSelect .select-all > label, .SumoSelect .select-all > span i { cursor: pointer; } .SumoSelect .select-all.partial > span i { background-color: #ccc; } /*styling for optgroups*/ .SumoSelect > .optWrapper > .options li.optGroup { padding-left: 5px; text-decoration: underline; } /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%,43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 40%,43%,70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } 70% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%,43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 40%,43%,70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } 70% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%,50%,to { opacity: 1; } 25%,75% { opacity: 0; } } @keyframes flash { 0%,50%,to { opacity: 1; } 25%,75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 0%,11.1%,to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { 0%,11.1%,to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%,40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); } 50%,80% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%,40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); } 50%,80% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); } 60%,80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); } 60%,80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%,to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%,to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { transform-origin: center; opacity: 1; } 0%,to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center; opacity: 1; } 0%,to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { transform-origin: right bottom; opacity: 1; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; opacity: 1; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { transform-origin: right bottom; opacity: 1; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; opacity: 1; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { transform-origin: top left; } 0%,20%,60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%,60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); transform-origin: top left; } 40%,80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { transform-origin: top left; } 0%,20%,60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%,60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); transform-origin: top left; } 40%,80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50%,to { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50%,to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /** Lightcase - jQuery Plugin The smart and flexible Lightbox Plugin. @author Cornel Boppart @copyright Author @version 2.4.0 (09/04/2017) */ /** Lightcase settings Note: Override default settings for your project without touching this source code by simply defining those variables within a SASS map called '$lightcase-custom'. // Example usage $lightcase-custom: ( 'breakpoint': 768px ); */ @font-face { font-family: 'lightcase'; src: url("../../fonts/lightcase/lightcase.eot?55356177"); src: url("../../fonts/lightcase/lightcase.eot?55356177#iefix") format("embedded-opentype"), url("../../fonts/lightcase/lightcase.woff?55356177") format("woff"), url("../../fonts/lightcase/lightcase.ttf?55356177") format("truetype"), url("../../fonts/lightcase/lightcase.svg?55356177#lightcase") format("svg"); font-weight: normal; font-style: normal; } /* line 12, ../scss/components/fonts/lightcase/_font-lightcase.scss */ [class*='lightcase-icon-']:before { font-family: 'lightcase', sans-serif; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } /* Codes */ /* line 35, ../scss/components/fonts/lightcase/_font-lightcase.scss */ .lightcase-icon-play:before { content: '\e800'; } /* line 36, ../scss/components/fonts/lightcase/_font-lightcase.scss */ .lightcase-icon-pause:before { content: '\e801'; } /* line 37, ../scss/components/fonts/lightcase/_font-lightcase.scss */ .lightcase-icon-close:before { content: '\e802'; } /* line 38, ../scss/components/fonts/lightcase/_font-lightcase.scss */ .lightcase-icon-prev:before { content: '\e803'; } /* line 39, ../scss/components/fonts/lightcase/_font-lightcase.scss */ .lightcase-icon-next:before { content: '\e804'; } /* line 40, ../scss/components/fonts/lightcase/_font-lightcase.scss */ .lightcase-icon-spin:before { content: '\e805'; } /** Mixin providing icon defaults to be used on top of font-lightcase. Example usage: @include icon(#e9e9e9) */ /** Mixin providing icon defaults including a hover status to be used on top of font-lightcase. Example usage: @include icon-hover(#e9e9e9, #fff) */ /** Provides natural content overflow behavior and scrolling support even so for touch devices. Example usage: @include overflow() */ /** Neutralizes/resets dimensions including width, height, position as well as margins, paddings and styles. Used to enforce a neutral and unstyled look and behavoir! Example usage: @include clear(true) @param boolean $important */ @-webkit-keyframes lightcase-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } @-moz-keyframes lightcase-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } @-o-keyframes lightcase-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } @-ms-keyframes lightcase-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes lightcase-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } /* line 1, ../scss/components/modules/_case.scss */ #lightcase-case { display: none; position: fixed; z-index: 2002; top: 50%; left: 50%; font-family: arial, sans-serif; font-size: 13px; line-height: 1.5; text-align: left; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } @media screen and (max-width: 640px) { /* line 16, ../scss/components/modules/_case.scss */ html[data-lc-type=inline] #lightcase-case, html[data-lc-type=ajax] #lightcase-case { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; padding: 55px 0 70px 0; width: 100% !important; height: 100% !important; overflow: auto !important; } } @media screen and (min-width: 641px) { /* line 4, ../scss/components/modules/_content.scss */ html:not([data-lc-type=error]) #lightcase-content { position: relative; z-index: 1; text-shadow: none; background-color: #fff; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; } } @media screen and (min-width: 641px) { /* line 23, ../scss/components/modules/_content.scss */ html[data-lc-type=image] #lightcase-content, html[data-lc-type=video] #lightcase-content { background-color: #333; } } /* line 31, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content, html[data-lc-type=ajax] #lightcase-content, html[data-lc-type=error] #lightcase-content { -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } @media screen and (max-width: 640px) { /* line 31, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content, html[data-lc-type=ajax] #lightcase-content, html[data-lc-type=error] #lightcase-content { position: relative !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; } } /* line 43, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 640px) { /* line 43, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner { padding: 15px; } /* line 52, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=inline] #lightcase-content .lightcase-contentInner > *, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner > *, html[data-lc-type=error] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner > * { width: 100% !important; max-width: none !important; } /* line 59, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content .lightcase-contentInner > *:not(iframe), html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner > *:not(iframe), html[data-lc-type=error] #lightcase-content .lightcase-contentInner > *:not(iframe) { height: auto !important; max-height: none !important; } } @media screen and (max-width: 640px) { /* line 70, ../scss/components/modules/_content.scss */ html.lightcase-isMobileDevice[data-lc-type=iframe] #lightcase-content .lightcase-contentInner iframe { overflow: auto; -webkit-overflow-scrolling: touch; } } @media screen and (max-width: 640px) and (min-width: 641px) { /* line 74, ../scss/components/modules/_content.scss */ html[data-lc-type=image] #lightcase-content .lightcase-contentInner, html[data-lc-type=video] #lightcase-content .lightcase-contentInner { line-height: 0.75; } } /* line 82, ../scss/components/modules/_content.scss */ html[data-lc-type=image] #lightcase-content .lightcase-contentInner { position: relative; overflow: hidden !important; } @media screen and (max-width: 640px) { /* line 91, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap, html[data-lc-type=error] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { position: relative !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; } } @media screen and (min-width: 641px) { /* line 100, ../scss/components/modules/_content.scss */ html:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { padding: 30px; overflow: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } } @media screen and (max-width: 640px) { /* line 117, ../scss/components/modules/_content.scss */ #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p { color: #aaa; } } @media screen and (min-width: 641px) { /* line 117, ../scss/components/modules/_content.scss */ #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p { color: #333; } } /* line 3, ../scss/components/modules/_error.scss */ #lightcase-case p.lightcase-error { margin: 0; font-size: 17px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #aaa; } @media screen and (max-width: 640px) { /* line 3, ../scss/components/modules/_error.scss */ #lightcase-case p.lightcase-error { padding: 30px 0; } } @media screen and (min-width: 641px) { /* line 3, ../scss/components/modules/_error.scss */ #lightcase-case p.lightcase-error { padding: 0; } } /* line 4, ../scss/components/modules/_global.scss */ .lightcase-open body { overflow: hidden; } /* line 8, ../scss/components/modules/_global.scss */ .lightcase-isMobileDevice .lightcase-open body { max-width: 100%; max-height: 100%; } /* line 1, ../scss/components/modules/_info.scss */ #lightcase-info { position: absolute; padding-top: 15px; } /* line 9, ../scss/components/modules/_info.scss */ #lightcase-info #lightcase-title, #lightcase-info #lightcase-caption { margin: 0; padding: 0; line-height: 1.5; font-weight: normal; text-overflow: ellipsis; } /* line 19, ../scss/components/modules/_info.scss */ #lightcase-info #lightcase-title { font-size: 17px; color: #aaa; } @media screen and (max-width: 640px) { /* line 19, ../scss/components/modules/_info.scss */ #lightcase-info #lightcase-title { position: fixed; top: 10px; left: 0; max-width: 87.5%; padding: 5px 15px; background: #333; } } /* line 33, ../scss/components/modules/_info.scss */ #lightcase-info #lightcase-caption { clear: both; font-size: 13px; color: #aaa; } /* line 39, ../scss/components/modules/_info.scss */ #lightcase-info #lightcase-sequenceInfo { font-size: 11px; color: #aaa; } @media screen and (max-width: 640px) { /* line 45, ../scss/components/modules/_info.scss */ .lightcase-fullScreenMode #lightcase-info { padding-left: 15px; padding-right: 15px; } /* line 51, ../scss/components/modules/_info.scss */ html:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-info { position: static; } } /* line 1, ../scss/components/modules/_loading.scss */ #lightcase-loading { position: fixed; z-index: 9999; width: 1.123em; height: auto; font-size: 38px; line-height: 1; text-align: center; text-shadow: none; position: fixed; z-index: 2001; top: 50%; left: 50%; margin-top: -0.5em; margin-left: -0.5em; opacity: 1; font-size: 32px; text-shadow: 0 0 15px #fff; -moz-transform-origin: 50% 53%; -webkit-animation: lightcase-spin 0.5s infinite linear; -moz-animation: lightcase-spin 0.5s infinite linear; -o-animation: lightcase-spin 0.5s infinite linear; animation: lightcase-spin 0.5s infinite linear; } /* line 20, ../scss/components/mixins/_presets.scss */ #lightcase-loading, #lightcase-loading:focus { text-decoration: none; color: #fff; -webkit-tap-highlight-color: transparent; -webkit-transition: color, opacity, ease-in-out 0.25s; -moz-transition: color, opacity, ease-in-out 0.25s; -o-transition: color, opacity, ease-in-out 0.25s; transition: color, opacity, ease-in-out 0.25s; } /* line 32, ../scss/components/mixins/_presets.scss */ #lightcase-loading > span { display: inline-block; text-indent: -9999px; } /* line 2, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'] { position: fixed; z-index: 9999; width: 1.123em; height: auto; font-size: 38px; line-height: 1; text-align: center; text-shadow: none; outline: none; cursor: pointer; } /* line 20, ../scss/components/mixins/_presets.scss */ a[class*='lightcase-icon-'], a[class*='lightcase-icon-']:focus { text-decoration: none; color: rgba(255, 255, 255, 0.6); -webkit-tap-highlight-color: transparent; -webkit-transition: color, opacity, ease-in-out 0.25s; -moz-transition: color, opacity, ease-in-out 0.25s; -o-transition: color, opacity, ease-in-out 0.25s; transition: color, opacity, ease-in-out 0.25s; } /* line 32, ../scss/components/mixins/_presets.scss */ a[class*='lightcase-icon-'] > span { display: inline-block; text-indent: -9999px; } /* line 49, ../scss/components/mixins/_presets.scss */ a[class*='lightcase-icon-']:hover { color: white; text-shadow: 0 0 15px white; } /* line 10, ../scss/components/modules/_navigation.scss */ .lightcase-isMobileDevice a[class*='lightcase-icon-']:hover { color: #aaa; text-shadow: none; } /* line 17, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'].lightcase-icon-close { position: fixed; top: 15px; right: 15px; bottom: auto; margin: 0; opacity: 0; outline: none; } /* line 28, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'].lightcase-icon-prev { left: 15px; } /* line 33, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'].lightcase-icon-next { right: 15px; } /* line 38, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'].lightcase-icon-pause, a[class*='lightcase-icon-'].lightcase-icon-play { left: 50%; margin-left: -0.5em; } @media screen and (min-width: 641px) { /* line 38, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'].lightcase-icon-pause, a[class*='lightcase-icon-'].lightcase-icon-play { opacity: 0; } } @media screen and (max-width: 640px) { /* line 2, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'] { bottom: 15px; font-size: 24px; } } @media screen and (min-width: 641px) { /* line 2, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'] { bottom: 50%; margin-bottom: -0.5em; } /* line 57, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-']:hover, #lightcase-case:hover ~ a[class*='lightcase-icon-'] { opacity: 1; } } /* line 1, ../scss/components/modules/_overlay.scss */ #lightcase-overlay { display: none; width: 100%; min-height: 100%; position: fixed; z-index: 2000; top: -9999px; bottom: -9999px; left: 0; background: #333; } @media screen and (max-width: 640px) { /* line 1, ../scss/components/modules/_overlay.scss */ #lightcase-overlay { opacity: 1 !important; } } #not-found .not-found__wrapper { padding: 50px 0px; } #not-found .not-found__left, #not-found .not-found__right { width: 50%; float: left; } #not-found .not-found__left h1 { margin-bottom: 20px; } #not-found .not-found__left .not-found__subtitle { font-size: 28px; font-family: "HelveticaNeueLTStd-Th"; } #home-intro .intro-section__left a { margin-top: 20px; } #home-wl { padding-top: 60px; padding-bottom: 60px; } #home-wl .info-slider__slide h3 span { display: inline-block; font-family: "HelveticaNeueLTStd-Lt"; -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -webkit-transform: translateY(-1px); transform: translateY(-1px); } #home-blocks { border-top: 1px solid #999999; padding-top: 80px; padding-bottom: 80px; } #home-blocks .home-row { margin-left: -30px; margin-right: -30px; } #home-blocks .home-row .home-col { width: 50%; float: left; padding-left: 30px; padding-right: 30px; } #home-blocks .home-block { padding: 20px; background-color: #F1F1F1; } #home-news { background-color: #F1F1F1; padding-top: 70px; padding-bottom: 70px; } #home-news .news-item-wrapper { margin-left: -10px; margin-right: -10px; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #home-news .news-item-wrapper .news-item { max-width: 33.3333%; padding-left: 10px; padding-right: 10px; -webkit-flex: 1 0 33.3333%; flex: 1 0 33.3333%; } #home-news .home-news__more { display: inline-block; font-size: 16px; text-decoration: none; border-bottom: 2px solid #b3b3b3; color: gray; font-family: "HelveticaNeueLTStd-Md"; } #hps { margin-top: 30px; background-color: #F1F1F1; padding: 25px; margin-bottom: 60px; } #hps h2 { font-size: 24px; } #hps #hsp__form .SumoSelect { margin-bottom: 10px; } #hps #hsp__form .hsp__more__link { display: block; text-decoration: none; color: #878787; margin-top: 5px; margin-bottom: 15px; } #hps #hsp__form .hsp__more { display: none; } #home-spotlight-tiles { padding: 0px; position: relative; overflow: hidden; } #home-spotlight-tiles .home-spotlight-tile__wrapper { z-index: 200; position: relative; background-color: #000000; color: #FFFFFF; } #home-spotlight-tiles .home-spotlight-tile__img { width: 60%; float: left; padding: 0px; position: absolute; min-height: 100%; background-position: center center; background-size: cover; } #home-spotlight-tiles .home-spotlight-tile__content { width: 40%; float: right; padding: 50px 80px; } #home-tiles { padding: 60px 0px; position: relative; overflow: hidden; background-color: #F1F1F1; } #home-tiles:before { content: ''; top: 0px; left: 0px; width: 100%; height: 40%; z-index: 10; position: absolute; background-color: #FFFFFF; } #home-tiles .home-tiles__wrapper { margin-left: -10px; margin-right: -10px; z-index: 200; position: relative; } #home-tiles .home-tiles__left, #home-tiles .home-tiles__right { float: left; padding: 0px 10px; } #home-tiles .home-tiles__left { width: 66%; } #home-tiles .home-tiles__right { width: 34%; } #home-tiles .home-tiles__about_block { position: relative; } #home-tiles .home-tiles__about_block .home-tiles__about_block__img { width: 50%; } #home-tiles .home-tiles__about_block .home-tiles__about_block__content { width: 50%; height: 100%; top: 0px; right: 0px; position: absolute; padding: 20px 35px; color: #FFFFFF; background-color: #000000; } #home-tiles .home-tiles__about_block .home-tiles__about_block__content .u-table-cell { text-align: left; } #home-tiles .home-tiles__newsletter { padding: 35px; margin-top: 20px; border-top: none; background-color: #FFFFFF; } #home-tiles .home-tiles__newsletter form { max-width: none; } #home-tiles .home-tiles__newsletter .webform-component-markup { text-align: left; } #home-tiles .home-tiles__csr_block .home-tiles__csr_block__content { padding: 20px 35px; background-color: #b1bcc0; color: #FFFFFF; } #home-tiles .home-tiles__csr_block .home-tiles__csr_block__content .u-table-cell { text-align: left; } #home-tiles .home-tiles__csr_block .home-tiles__csr_block__content .outline-button:hover { color: #b1bcc0; } .home-tiles__split_two { height: 395px; } .home-tiles__split_two .tile { display: flex; flex-direction: column; width: 48%; margin: 0 1%; float: left; height: 100%; background: black; color: white; } .home-tiles__split_two .tile .user-content, .home-tiles__split_two .tile #footer .block-webform, #footer .home-tiles__split_two .tile .block-webform, .home-tiles__split_two .tile .home-tiles__newsletter, .home-tiles__split_two .tile #user-pass .user-pass__info, #user-pass .home-tiles__split_two .tile .user-pass__info { padding: 20px; text-align: left; } .home-tiles__split_two .tile .tile-img { background-size: cover; background-position: center center; min-height: 40%; height: 40%; } .home-tiles__split_two .tile .u-table-cell { text-align: left; padding: 0px 10px; } @media only screen and (max-width: 1050px) { #home-intro .intro-section__left { margin-bottom: 0px; padding-bottom: 30px; padding-left: 0px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } .header-slider .header-slider__slide .header-slider__slide__content .header-slider__slide__content__wrapper { bottom: 20px; } #home-tiles:before { display: none; } #home-tiles .home-tiles__left, #home-tiles .home-tiles__right { width: 100%; } #home-tiles .home-tiles__about_block { background-color: #000000; } #home-tiles .home-tiles__about_block .home-tiles__about_block__img { width: 40%; float: left; } #home-tiles .home-tiles__about_block .home-tiles__about_block__content { width: 60%; float: left; position: static; } #home-tiles .home-tiles__newsletter { margin-bottom: 20px; } #home-tiles .home-tiles__csr_block { background-color: #b1bcc0; } #home-tiles .home-tiles__csr_block .home-tiles__csr_block__img { width: 40%; float: left; } #home-tiles .home-tiles__csr_block .home-tiles__csr_block__content { width: 60%; float: left; height: auto !important; } .home-tiles__split_two .tile .tile-img { min-height: 150px; } #contact-image-block .image-info-block__image .image-info-block__image__extra { height: 90%; top: 60px; } } @media only screen and (max-width: 780px) { #home-news .news-item-wrapper .news-item { max-width: 100%; -webkit-flex: 1 0 50%; flex: 1 0 50%; } #home-news .news-item-wrapper .news-item:last-child { display: none; } #home-spotlight-tiles .home-spotlight-tile__img { width: 100%; position: relative; height: 300px; background-size: cover; } #home-spotlight-tiles .home-spotlight-tile__content { width: 100%; position: relative; } .home-tiles__split_two { height: 100%; margin-bottom: 20px; } .home-tiles__split_two .tile { width: 100%; margin-bottom: 40px; } .home-tiles__split_two .tile .tile-img { min-height: 250px; max-height: 500px; } } @media only screen and (max-width: 766px) { #home-tiles .home-tiles__about_block .home-tiles__about_block__img, #home-tiles .home-tiles__csr_block .home-tiles__csr_block__img, #home-tiles .home-tiles__csr_block .home-tiles__csr_block__content, #home-tiles .home-tiles__about_block .home-tiles__about_block__content { width: 100%; } #home-wl .info-slider .info-slider__slide .info-slider__slide__content { width: 60%; margin-left: 30%; } } @media only screen and (max-width: 670px) { #home-intro { width: 100%; padding-right: 0px; padding-bottom: 30px; } #home-intro .intro-section__left { width: 100%; padding-right: 0px; } #home-intro .intro-section__right { width: 100%; } #home-intro .intro-section__right #hps { margin-bottom: 0px; margin-top: 0px; } #home-intro .intro-section__right .header-slider-pager { display: none; } #home-tiles .home-tiles__newsletter form .webform-component-markup.webform-component--note { display: none; } #home-wl .info-slider { padding-right: 0px; padding-left: 0px; } #home-wl .info-slider .slick-arrow { display: none !important; } #home-wl .info-slider .info-slider__slide .info-slider__slide__image { position: relative; } #home-wl .info-slider .info-slider__slide .info-slider__slide__image:before { display: block; content: " "; width: 100%; padding-top: 60%; } #home-wl .info-slider .info-slider__slide .info-slider__slide__image > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #home-wl .info-slider .info-slider__slide .info-slider__slide__content { padding: 6px 20px; width: 90%; margin-left: 5%; -moz-transform: translateY(-70px); -ms-transform: translateY(-70px); -webkit-transform: translateY(-70px); transform: translateY(-70px); } } @media only screen and (max-width: 550px) { #home-news { padding-top: 40px; padding-bottom: 40px; } #home-news .news-item-wrapper .news-item { margin-bottom: 20px; -webkit-flex: 1 0 100%; flex: 1 0 100%; } #home-news .news-item-wrapper .news-item img { width: 100%; } #home-news .news-item-wrapper .news-item:last-child { display: block; } } @media only screen and (max-width: 500px) { .header-aspect-ratio { position: relative; } .header-aspect-ratio:before { display: block; content: " "; width: 100%; padding-top: 75%; } .header-aspect-ratio > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .header-slider .header-slider__slide .header-slider__slide__content .header-slider__slide__content__title { font-size: 30px; } .header-slider .header-slider__slide .header-slider__slide__content .header-slider__slide__content__subtitle { font-size: 15px; } .header-slider .header-slider__slide .header-slider__slide__content a.button, .header-slider .header-slider__slide .header-slider__slide__content #home-intro .intro-section__left a, #home-intro .intro-section__left .header-slider .header-slider__slide .header-slider__slide__content a { font-size: 14px; } } @media only screen and (max-width: 450px) { #home-tiles .home-tiles__csr_block .home-tiles__csr_block__content, #home-tiles .home-tiles__about_block .home-tiles__about_block__content { padding: 20px; } #home-tiles .home-tiles__newsletter { padding: 15px 20px 20px 20px; } #home-tiles .home-tiles__newsletter form .webform-component-email { width: 100%; } #home-tiles .home-tiles__newsletter form .form-actions { width: 100%; margin-top: 5px; } #home-wl { padding-top: 40px; padding-bottom: 40px; } #home-wl .info-slider .info-slider__slide .info-slider__slide__content { width: 100%; margin: 0px; padding: 6px 0px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } } #about-info { padding-bottom: 280px; } #about-info .info-block__left.arrow { position: relative; } #about-info .info-block__left.arrow::after { position: absolute; bottom: 30px; right: 0; width: 150px; height: 25px; content: ''; background-image: url("../../images/about/arrow.svg"); background-repeat: no-repeat; } #about-extra-info { margin-bottom: -170px; overflow-x: hidden; -moz-transform: translateY(-240px); -ms-transform: translateY(-240px); -webkit-transform: translateY(-240px); transform: translateY(-240px); } #about-extra-info .about-extra-info__wrapper { padding-left: 100px; padding-right: 100px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left, #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right { width: 50%; float: left; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left img, #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right img { width: 100%; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left { padding-right: 10px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left .about-extra-info__quote { position: relative; margin-top: 30px; background-color: #b1bcc0; padding: 20px 50px 30px 50px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left .about-extra-info__quote h4 { color: #FFFFFF; font-size: 14px; line-height: 19px; margin-top: 20px; text-transform: uppercase; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left .about-extra-info__quote blockquote { color: #FFFFFF; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left .about-extra-info__quote blockquote::after { color: #F1F1F1; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left .about-extra-info__balta { z-index: 800; margin-top: 60px; position: relative; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left .about-extra-info__balta h2.line:after { left: auto; right: -100px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right { padding-left: 10px; padding-top: 60px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right img { margin-bottom: 60px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right .line-block { -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right__img_3 { margin-top: 60px; } #about-info-block { padding-top: 80px; padding-bottom: 100px; background-color: #F1F1F1; } #about-info-block .img-bottom-block { position: relative; } #about-info-block .img-bottom-block .img-bottom-block__image { width: 65%; background-size: cover; background-position: center; position: relative; } #about-info-block .img-bottom-block .img-bottom-block__image:before { display: block; content: " "; width: 100%; padding-top: 56.25%; } #about-info-block .img-bottom-block .img-bottom-block__image > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #about-info-block .img-bottom-block .img-bottom-block__content { width: 40%; top: 25px; right: 0px; position: absolute; } #about-info-block .img-bottom-block .img-bottom-block__content h2 { color: #000000; margin-left: 120px; } #about-info-block .img-bottom-block .img-bottom-block__content h2:after { background-color: #000000; } #about-info-block .img-bottom-block .img-bottom-block__content .img-bottom-block__content__link { display: inline-block; text-decoration: none; color: #000000; font-family: "HelveticaNeueLTStd-Md"; margin-bottom: 10px; margin-top: 10px; } #about-info-block .img-bottom-block .img-bottom-block__content .img-bottom-block__content__link i { padding-left: 10px; -moz-transition: padding 300ms; -o-transition: padding 300ms; -webkit-transition: padding 300ms; transition: padding 300ms; } #about-info-block .img-bottom-block .img-bottom-block__content .img-bottom-block__content__link:hover i { padding-left: 20px; } #about-info-block .img-bottom-block .img-bottom-block__content .img-bottom-block__content__file { margin-bottom: 10px; margin-top: 10px; } #about-info-block .img-bottom-block .img-bottom-block__content .img-bottom-block__content__container { padding: 20px; background-color: #FFFFFF; } #about-stats { padding-top: 80px; padding-bottom: 80px; background-repeat: no-repeat; background-size: cover; background-image: url("../../images/about/about_stats_background.jpg"); } #about-stats .about-stats__row .about-stats__col { width: 33.3333%; float: left; padding-left: 8%; padding-right: 8%; } #about-stats .about-stat .about-stat__counter, #about-stats .about-stat .about-stat__info { color: #FFFFFF; display: block; text-align: center; } #about-stats .about-stat .about-stat__counter { font-size: 70px; margin-bottom: 20px; font-family: "HelveticaNeueLTStd-HvCn"; } #about-stats .about-stat .about-stat__counter span { position: relative; } #about-stats .about-stat .about-stat__counter sup { top: 6px; right: -27px; position: absolute; opacity: 0; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; -webkit-transition: opacity 300ms; transition: opacity 300ms; } #about-stats .about-stat .about-stat__counter sup.show { opacity: 1; } #about-stats .about-stat .about-stat__info { font-size: 18px; line-height: 25px; text-transform: uppercase; font-weight: 600; } #about-mockup { padding-top: 100px; padding-bottom: 60px; background-color: #F1F1F1; } #about-mockup .about-mockup__wrapper { padding: 30px; background-color: #FFFFFF; } #about-mockup .about-mockup__image { float: left; width: 30%; margin-bottom: -70px; -moz-transform: translateY(-70px); -ms-transform: translateY(-70px); -webkit-transform: translateY(-70px); transform: translateY(-70px); } #about-mockup .about-mockup__content { float: left; width: 70%; padding-left: 80px; } #about-clients { padding-top: 80px; padding-bottom: 80px; background-color: #F1F1F1; } #about-clients h2 { margin-bottom: 60px; } #about-clients #about-quotes .quotes-col { width: 50%; float: left; } #about-clients #about-quotes .quotes-col.quotes-col--left { padding-left: 20px; padding-right: 20px; } #about-clients #about-quotes .quotes-col.quotes-col--right { padding-left: 50px; } #about-clients #about-quotes .quote-block { padding: 30px 40px; margin-bottom: 50px; background-color: #FFFFFF; } #about-clients #about-quotes .quote-block.quote-block--black { background-color: #000000; } #about-clients #about-quotes .quote-block.quote-block--black * { color: #FFFFFF; } #about-clients #about-quotes .quote-block.quote-block--1 { width: 120%; margin-top: 70px; -moz-transform: translateX(-17%); -ms-transform: translateX(-17%); -webkit-transform: translateX(-17%); transform: translateX(-17%); } #about-clients #about-quotes .quote-block.quote-block--2 { width: 90%; margin-left: 5%; } #about-clients #about-quotes .quote-block.quote-block--3 { margin-left: 20px; } #about-clients #about-quotes .quote-block.quote-block--4 { width: 130%; z-index: 800; margin-left: 20px; position: relative; } #about-clients #about-quotes .quote-block__author { margin-top: 20px; margin-left: 10px; display: inline-block; font-family: "HelveticaNeueLTStd-Bd"; } #about-clients #about-quotes blockquote { margin-left: 10px; } #about-clients #about-quotes .quotes-image { margin-bottom: 50px; } @media only screen and (max-width: 1200px) { #about-info-block .img-bottom-block .img-bottom-block__image { width: 45%; position: absolute; top: 0px; left: 0px; bottom: 0px; } #about-info-block .img-bottom-block .img-bottom-block__content { position: static; margin-left: 45%; width: 55%; background-color: #FFFFFF; padding: 20px; } #about-info-block .img-bottom-block .img-bottom-block__content h2 { margin-left: 0px; } #about-info-block .img-bottom-block .img-bottom-block__content h2:after { display: none; } #about-info-block .img-bottom-block .img-bottom-block__content .img-bottom-block__content__container { padding: 0px; } } @media only screen and (max-width: 1000px) { #about-intro .intro-section__left { width: 100%; min-height: 100px; } #about-intro .intro-section__right { width: 76%; margin-left: 12%; float: left; margin-right: 12%; position: static; } #about-info.info-block .info-block__left { width: 100%; padding: 45px 0px 30px 0px; } #about-info.info-block .info-block__left .line-block { padding-left: 0px; } #about-info.info-block .info-block__left.arrow:after { display: none; } #about-info.info-block .info-block__right { width: 100%; } #about-info.info-block .info-block__right__detail { padding: 20px; } #about-extra-info .about-extra-info__wrapper { padding: 0px; } } @media only screen and (max-width: 850px) { #about-info-block { padding-top: 40px; padding-bottom: 40px; } #about-info-block .img-bottom-block .img-bottom-block__image { width: 100%; position: static; position: relative; } #about-info-block .img-bottom-block .img-bottom-block__image:before { display: block; content: " "; width: 100%; padding-top: 57.69231%; } #about-info-block .img-bottom-block .img-bottom-block__image > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #about-info-block .img-bottom-block .img-bottom-block__content { width: 100%; margin-left: 0px; } #about-clients #about-quotes .quotes-col { width: 100%; padding: 0px !important; } #about-clients #about-quotes .quotes-col .quotes-image--1 { display: none; } #about-clients #about-quotes .quotes-col .quotes-image--2 { width: 100%; margin-bottom: 0px; } #about-clients #about-quotes .quote-block.quote-block--1 { width: 100%; margin-top: 0px; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); margin-bottom: 25px; } #about-clients #about-quotes .quote-block.quote-block--2 { width: 100%; margin-left: 0px; margin-bottom: 25px; } #about-clients #about-quotes .quote-block.quote-block--3 { margin-left: 0px; margin-bottom: 25px; } #about-clients #about-quotes .quote-block.quote-block--4 { margin-left: 0px; width: 100%; margin-bottom: 25px; } } @media only screen and (max-width: 670px) { #about-intro > .u-width, #footer .block-webform #about-intro > .content, .home-tiles__newsletter #about-intro > .content, #about-intro > #user-login, #about-intro > #user-register-form, #about-intro > #user-pass, #about-intro > #user-pass-reset, #about-intro > #user-profile-form { padding-left: 0px; padding-right: 0px; } #about-intro .intro-section__left { margin-bottom: 0px; padding: 20px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #about-intro .intro-section__right { margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 20px; } #about-extra-info { margin-bottom: -200px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left, #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right { width: 100%; padding-right: 0px; padding-left: 0px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left .about-extra-info__balta { text-align: left; margin-top: 40px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__left .about-extra-info__balta h2:after { display: none; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right { padding-top: 40px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right img { margin-bottom: 40px; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right .line-block { padding-left: 0px; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right .line-block h2:after { display: none; } #about-extra-info .about-extra-info__wrapper .about-extra-info__wrapper__right__img_3 { margin-top: 40px; } #about-stats { padding: 30px 0px; } #about-stats .about-stats__row .about-stats__col { width: 100%; padding: 0px; margin-bottom: 25px; } #about-stats .about-stats__row .about-stats__col:last-child { margin-bottom: 0px; } } .node-type-csr-page #csr-info .info-block__left { position: relative; } .node-type-csr-page #csr-info .info-block__left:before { content: ''; width: 75px; height: 75px; display: block; top: -45px; left: 340px; opacity: 0.8; position: absolute; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("../../images/general/arrow-down.svg"); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } #csr-info { padding-bottom: 80px; } #csr-info .info-block__left__logos { margin-top: 20px; } #csr-info .info-block__left__logos .field-item { float: left; margin-right: 30px; } #csr-info .info-block__left--2 { margin-top: 40px; } #csr-info .info-block_image { margin-bottom: 30px; } #csr-info .info-block_image.detail { margin-top: 30px; } #csr-info .info-block_image.detail img { max-width: 444px; } #csr-info .info-block_image.margin-top--50 { margin-top: 50px; } #csr-info .info-block_image img { display: block; width: 100%; height: auto; } #csr-info .info-block_more { margin-top: 30px; width: 100%; } #csr-info .info-block_more .button a, #csr-info .info-block_more .products-overview .view-filters .views-submit-button input[type="submit"] a, .products-overview .view-filters .views-submit-button #csr-info .info-block_more input[type="submit"] a, #csr-info .info-block_more #home-intro .intro-section__left a a, #home-intro .intro-section__left #csr-info .info-block_more a a, #csr-info .info-block_more #textpage .textpage__form form .form-actions input a, #textpage .textpage__form form .form-actions #csr-info .info-block_more input a, #csr-info .info-block_more #contact-form form .form-actions input a, #contact-form form .form-actions #csr-info .info-block_more input a, #csr-info .info-block_more #downloads-page__form input[type="submit"] a, #downloads-page__form #csr-info .info-block_more input[type="submit"] a, #csr-info .info-block_more #sample-form form input[type="submit"] a, #sample-form form #csr-info .info-block_more input[type="submit"] a, #csr-info .info-block_more #sample-account .sample-account__login input[type="submit"] a, #sample-account .sample-account__login #csr-info .info-block_more input[type="submit"] a, #csr-info .info-block_more .page-user form input[type="submit"] a, .page-user form #csr-info .info-block_more input[type="submit"] a { color: #FFFFFF; text-decoration: none; } #csr-image-block { overflow: hidden; } #csr-blocks { padding-top: 100px; padding-bottom: 100px; border-top: 1px solid #999999; } #csr-blocks .csr-block { width: 50%; float: left; } #csr-blocks .csr-block:nth-child(even) { padding-left: 40px; } #csr-blocks .csr-block:nth-child(even) .csr-block__content { background-color: #000000; } #csr-blocks .csr-block:nth-child(even) .csr-block__content * { color: #FFFFFF; } #csr-blocks .csr-block:nth-child(odd) { padding-right: 40px; } #csr-blocks .csr-block:nth-child(odd) .csr-block__content { background-color: #F1F1F1; } #csr-blocks .csr-block .csr-block__image { width: 100%; } #csr-blocks .csr-block .csr-block__content { padding: 30px 50px 50px 50px; text-align: center; } #csr-blocks .csr-block .csr-block__content h3 { font-size: 35px; font-family: "HelveticaNeueLTStd-Md", "Arial", sans-serif; } #csr-blocks .csr-block .csr-block__content .csr-block__content__links { margin-top: 30px; } #csr-product-steward { margin-bottom: 50px; } #csr-product-steward .image-info-block__image:before, #csr-product-steward .image-info-block__image:after { display: none; } #report-block { margin-top: 100px; margin-bottom: 50px; background-color: #FFFFFF; } #report-block .report-block__image { width: 100%; margin-bottom: -50px; -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -webkit-transform: translateY(-50px); transform: translateY(-50px); } #report-block .report-block__content { padding: 10px 50px 20px 40px; } #bre-score { margin-bottom: 40px; background-color: #b1bcc0; } #bre-score .bre-score__content { padding: 40px 50px 0; } #bre-score .bre-score__content h3, #bre-score .bre-score__content p { color: #FFFFFF; } #bre-score .bre-score__bottom { position: relative; height: 150px; } #bre-score .bre-score__bottom img { position: absolute; display: block; width: 100%; max-width: 385px; height: auto; top: 30px; right: 20px; } #bre-score blockquote::after { color: #FFFFFF; } #bre-score h4 { font-size: 14px; line-height: 19px; color: #FFFFFF; margin-top: 20px; } @media only screen and (max-width: 1000px) { #csr-intro .intro-section__left { width: 100%; min-height: 100px; } #csr-intro .intro-section__right { width: 76%; margin-left: 12%; margin-right: 12%; position: static; } .node-type-csr-page #csr-info .info-block__left:before { display: none; } #csr-info.info-block .info-block__left { width: 100%; padding: 60px 0px 10px 0px; } #csr-info.info-block .info-block__left .info-block_image, #csr-info.info-block .info-block__left .line-block { width: 50%; float: left; } #csr-info.info-block .info-block__left .info-block_image .margin-top--50 { margin-top: 30px; } #csr-info.info-block .info-block__right { width: 100%; } #csr-info.info-block .info-block__right__detail { padding: 20px; } #csr-info.info-block .info-block__right #report-block { width: 48%; float: left; } #csr-info.info-block .info-block__right #bre-score { width: 48%; float: right; } } @media only screen and (max-width: 900px) { #csr-image-block .image-info-block .image-info-block__content .image-info-block__content__wrapper { width: 85%; } #csr-image-block .image-info-block .image-info-block__content { margin-bottom: -170px; -moz-transform: translateY(-190px); -ms-transform: translateY(-190px); -webkit-transform: translateY(-190px); transform: translateY(-190px); } #csr-blocks { padding-top: 60px; padding-bottom: 60px; } #csr-blocks .csr-block { width: 100%; padding: 0px !important; } #csr-blocks .csr-block img { width: 100%; } #csr-blocks .csr-block.csr-block--0 { margin-bottom: 25px; } #csr-blocks .csr-block .csr-block__content { height: auto !important; } } @media only screen and (max-width: 760px) { #csr-info.info-block .info-block__right #report-block { width: 100%; float: left; } #csr-info.info-block .info-block__right #bre-score { width: 100%; float: right; } #csr-image-block { padding-top: 30px; padding-bottom: 30px; } #csr-image-block .image-info-block .image-info-block__image:after, #csr-image-block .image-info-block .image-info-block__image:before { display: none; } #csr-image-block .image-info-block .image-info-block__content { margin-bottom: 0px; padding: 20px; background-color: #F1F1F1; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #csr-image-block .image-info-block .image-info-block__content .image-info-block__content__wrapper { width: 100%; background-color: transparent; padding: 0px; } #csr-image-block .image-info-block .image-info-block__content h2 { color: #000000; } } @media only screen and (max-width: 670px) { #csr-intro > .u-width, #footer .block-webform #csr-intro > .content, .home-tiles__newsletter #csr-intro > .content, #csr-intro > #user-login, #csr-intro > #user-register-form, #csr-intro > #user-pass, #csr-intro > #user-pass-reset, #csr-intro > #user-profile-form { padding-left: 0px; padding-right: 0px; } #csr-intro .intro-section__left { margin-bottom: 0px; padding: 20px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #csr-intro .intro-section__right { margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 20px; } #csr-info.info-block .info-block__left { width: 100%; padding: 60px 0px 10px 0px; } #csr-info.info-block .info-block__left .info-block_image, #csr-info.info-block .info-block__left .line-block { width: 100%; } #csr-info.info-block .info-block__left .info-block_image .margin-top--50 { margin-top: 0px; } #csr-info.info-block .info-block__left .csr-info-block--2 { margin-bottom: 20px; } #csr-info.info-block .info-block__left .info-block__left--2 { margin-top: 0px; } } @media only screen and (max-width: 450px) { #csr-info.info-block .info-block__left .line-block { padding-left: 0px; } #csr-info.info-block .info-block__left .line-block h2.line:after { display: none; } #csr-blocks .csr-block .csr-block__content { padding: 25px; } } #textpage { padding-top: 80px; padding-bottom: 80px; } #textpage .textpage__form { margin-top: 60px; } #textpage .textpage__form form { margin-left: -10px; margin-right: -10px; } #textpage .textpage__form form .form-item { width: 50%; float: left; padding-left: 10px; padding-right: 10px; } #textpage .textpage__form form .form-item.webform-component--project-name { width: 100%; } #textpage .textpage__form form .form-item input { background-color: #F1F1F1; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } #textpage .textpage__form form .form-item input:focus, #textpage .textpage__form form .form-item input.active-input { background-color: #FFFFFF; } #textpage .textpage__form form .webform-component--privacy-policy { margin: 0px; } #textpage .textpage__form form .webform-component--privacy-policy label { display: none; } #textpage .textpage__form form .webform-component--privacy-policy .form-type-checkbox { width: 25px !important; margin: 0px !important; padding: 0px !important; } #textpage .textpage__form form .webform-component--privacy-policy .form-checkboxes, #textpage .textpage__form form .webform-component--privacy-policy .description { float: left; display: inline-block; } #textpage .textpage__form form .webform-component--privacy-policy .description { color: #A3A3A3; font-size: 15px; -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -webkit-transform: translateY(-1px); transform: translateY(-1px); } #textpage .textpage__form form .webform-component--privacy-policy .description a { color: #8a8a8a; } #textpage .textpage__form form .form-actions { width: 100%; float: left; padding-left: 10px; padding-right: 10px; text-align: right; } #textpage .textpage__form form .SumoSelect.open > .optWrapper ul { padding: 0px; } #textpage .textpage__form form .SumoSelect.open > .optWrapper ul li, #textpage .textpage__form form .SumoSelect.open > .optWrapper ul li.opt { padding-left: 6px; width: 100%; float: left; } #textpage .textpage__form form .SumoSelect.open > .optWrapper ul li span, #textpage .textpage__form form .SumoSelect.open > .optWrapper ul li.opt span { width: auto; display: block; margin-left: 0px; position: static; } #textpage .textpage__form form .SumoSelect.open > .optWrapper ul li span i, #textpage .textpage__form form .SumoSelect.open > .optWrapper ul li.opt span i { width: 25px; height: 25px; display: block; position: static; margin-top: 5px; margin-bottom: 5px; border: 1px solid #e4e4e4; } #textpage .textpage__form form .SumoSelect.open > .optWrapper ul li.selected, #textpage .textpage__form form .SumoSelect.open > .optWrapper ul li.opt.selected { background-color: #E4E4E4; } #contact-map { background-color: #F1F1F1; } #contact-map #google-maps { width: 100%; height: 100%; } #contact-map .contact-map__image { width: 100%; height: 100%; background-size: cover; background-position: center; background-image: url("../../images/maps/modulyss-map.jpg"); } #contact-intro .intro-section__right { padding-top: 60px; padding-left: 60px; padding-bottom: 100px; } #contact-intro #contact__quote { position: relative; padding-bottom: 30px; margin-bottom: 30px; } #contact-intro #contact__quote h3 { font-size: 40px; line-height: 48px; font-weight: 300; margin-bottom: 0px; font-family: "HelveticaNeueLTStd-Th", "Arial", sans-serif; } #contact-intro #contact__quote blockquote { margin-left: 0px; } #contact-intro #contact__quote:after { content: ''; display: block; width: 100px; height: 1px; bottom: 0px; left: 0px; position: absolute; background-color: #000000; } #contact-intro #contact__social { margin-left: -10px; } #contact-intro #contact__social a { display: inline-block; text-decoration: none; padding: 10px; } #contact-intro #contact__social a i { font-size: 24px; display: inline-block; color: #C9C9C9; -moz-transition: color 300ms, -moz-transform 300ms; -o-transition: color 300ms, -o-transform 300ms; -webkit-transition: color 300ms, -webkit-transform 300ms; transition: color 300ms, transform 300ms; } #contact-intro #contact__social a:hover i { color: #000000; -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } #contact-form { padding-top: 70px; padding-bottom: 70px; background-color: #F1F1F1; } #contact-form .contact-info { margin-bottom: 30px; } #contact-form .row { margin: 40px 0px; display: flex; flex-direction: row; } #contact-form .row .col { flex: 1 1 auto; margin: 0px 10px; background-color: #FFFFFF; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } #contact-form .row .col:first-child { margin-left: 0px; } #contact-form .row .col:last-child { margin-right: 0px; } #contact-form .row .col .contact-info__item { padding: 20px; text-align: center; display: block; text-decoration: none; } #contact-form .row .col .contact-info__item .icon img { width: 80%; max-width: 100px; margin-bottom: 15px; display: inline-block; } #contact-form .row .col .contact-info__item .icon img.inverted-icon { display: none; } #contact-form .row .col .contact-info__item * { font-size: 15px; line-height: 18px; color: #000000; -moz-transition: color 300ms; -o-transition: color 300ms; -webkit-transition: color 300ms; transition: color 300ms; } #contact-form .row .col .contact-info__item strong { display: inline-block; margin-bottom: 10px; } #contact-form .row .col:hover { background-color: #000000; } #contact-form .row .col:hover .contact-info__item * { color: #FFFFFF; } #contact-form .row .col:hover .contact-info__item .icon img.inverted-icon { display: inline-block; } #contact-form .row .col:hover .contact-info__item .icon img.normal-icon { display: none; } #contact-form form > div { margin-left: -10px; margin-right: -10px; } #contact-form form label { font-family: "HelveticaNeueLTStd-Md"; display: inline-block; padding-left: 15px; margin-bottom: 10px; } #contact-form form input[type="text"], #contact-form form input[type="number"], #contact-form form input[type="email"], #contact-form form textarea, #contact-form form select { font-size: 16px; padding: 14px 15px; border: 1px solid #C9C9C9; outline: none; background-color: #F1F1F1; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } #contact-form form input[type="text"]:focus, #contact-form form input[type="text"].active-input, #contact-form form input[type="number"]:focus, #contact-form form input[type="number"].active-input, #contact-form form input[type="email"]:focus, #contact-form form input[type="email"].active-input, #contact-form form textarea:focus, #contact-form form textarea.active-input, #contact-form form select:focus, #contact-form form select.active-input { background-color: #FFFFFF; } #contact-form form select { width: 100%; height: 48px; } #contact-form form textarea { resize: none; height: 150px; } #contact-form form .captcha { width: 100%; float: left; padding-left: 10px; } #contact-form form .form-item { width: 50%; float: left; padding-left: 10px; padding-right: 10px; margin-top: 10px; margin-bottom: 10px; } #contact-form form .webform-component--company-type { width: 50%; } #contact-form form .webform-component--zip-code { width: 35%; } #contact-form form .webform-component--country { width: 65%; } #contact-form form .webform-component--state, #contact-form form .webform-component-textarea, #contact-form form .webform-component--yes-i-want-to-subscribe-to-the-newsletter { width: 100%; } #contact-form form .webform-component--privacy-policy { margin: 0px; } #contact-form form .webform-component--privacy-policy label { display: none; } #contact-form form .webform-component--privacy-policy .form-type-checkbox { width: 25px !important; margin: 0px !important; } #contact-form form .webform-component--privacy-policy .form-checkboxes, #contact-form form .webform-component--privacy-policy .description { float: left; display: inline-block; } #contact-form form .webform-component--privacy-policy .description { color: #A3A3A3; font-size: 15px; -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -webkit-transform: translateY(-1px); transform: translateY(-1px); } #contact-form form .webform-component--privacy-policy .description a { color: #8a8a8a; } #contact-form form .webform-component-checkboxes > label { display: none; } #contact-form form .webform-component-checkboxes .form-type-checkbox { width: 100%; padding: 0px; } #contact-form form .webform-component-checkboxes .form-type-checkbox input, #contact-form form .webform-component-checkboxes .form-type-checkbox label { float: left; } #contact-form form .webform-component-checkboxes .form-type-checkbox label { padding-left: 10px; color: #a3a3a3; font-family: "HelveticaNeueLTStd-Roman", "Arial", sans-serif; } #contact-form form .webform-component--required { text-align: right; padding-top: 8px; color: #a3a3a3; } #contact-form form .form-required { color: #a3a3a3; } #contact-form form .form-actions { width: 100%; float: left; padding-left: 10px; } .jquery-checkbox-wrapper { width: 12px; height: 12px; float: left; } .jquery-checkbox-wrapper a { display: inline-block; width: 12px; height: 12px; text-decoration: none; border: 1px solid #C9C9C9; } .jquery-checkbox-wrapper a.jquery-checkbox-on { position: relative; } .jquery-checkbox-wrapper a.jquery-checkbox-on:after { content: '\f14a'; top: -2px; left: -1px; color: #c9c9c9; position: absolute; font-family: 'FontAwesome'; } #contact-image-block { overflow: hidden; padding-top: 60px; padding-bottom: 60px; } #contact-image-block .image-info-block__image:before, #contact-image-block .image-info-block__image:after { display: none; } #contact-image-block .image-info-block__image .image-info-block__image__extra { position: absolute; z-index: 300; top: -20px; right: -50px; height: 115%; width: auto; } #contact-image-block .image-info-block .image-info-block__content .image-info-block__content__wrapper { padding-right: 220px; width: calc(40% + 200px); } @media only screen and (max-width: 800px) { .node-type-contactpage .intro-section .intro-section__left { width: 50%; min-height: auto !important; padding: 30px 30px 10px 30px; } .node-type-contactpage .intro-section .intro-section__right { float: left; width: 50%; } } @media only screen and (max-width: 1050px) { #contact-image-block .image-info-block__image .image-info-block__image__extra { height: 90%; top: 60px; } #contact-image-block .image-info-block .image-info-block__content .image-info-block__content__wrapper { padding-right: 100px; } } @media only screen and (max-width: 870px) { #contact-image-block .image-info-block .image-info-block__content { -moz-transform: translateY(-160px); -ms-transform: translateY(-160px); -webkit-transform: translateY(-160px); transform: translateY(-160px); } #contact-image-block .image-info-block__image .image-info-block__image__extra { height: 60%; top: auto; bottom: 78px; right: 4px; } #contact-image-block .image-info-block .image-info-block__content .image-info-block__content__wrapper { width: 90%; padding-right: 30px; } } @media only screen and (max-width: 790px) { #contact-form .contact-form__wrapper { padding-left: 0px; } } @media only screen and (max-width: 650px) { .node-type-contactpage .intro-section .intro-section__left, .node-type-contactpage .intro-section .intro-section__right { width: 100%; } #contact-form form .form-item { width: 100%; } #contact-form .row { display: block; } #contact-form .row .col { margin: 0px; margin-bottom: 10px; } #contact-image-block { display: none; } } @media only screen and (max-width: 450px) { .node-type-contactpage #contact-intro .intro-section__left { margin-bottom: 20px; padding-left: 0px; padding-right: 0px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } .node-type-contactpage #contact-intro .intro-section__right { padding-top: 10px; padding-bottom: 40px; } } #product-intro .intro-section__left { padding-bottom: 50px; } #product-intro .intro-section__left .intro-section__left__co2-neutral img { width: 80px; display: block; } #product-intro .product-intro__downloads { padding-top: 30px; padding-left: 50px; padding-bottom: 20px; } #product-images { padding-top: 70px; padding-bottom: 70px; background-color: #F1F1F1; } #product-images .detail-image-slider { padding-left: 50px; padding-right: 50px; position: relative; } #product-images .detail-image-slider img { outline: none; padding: 10px; height: 450px; opacity: 0.75; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; -webkit-transition: opacity 300ms; transition: opacity 300ms; } #product-images .detail-image-slider img.slick-center { opacity: 1; } #product-images .detail-image-slider .slick-arrow { position: absolute; font-size: 22px; padding: 15px 15px 15px 0px; cursor: pointer; } #product-images .detail-image-slider .arrow-left { top: 40%; left: 0px; } #product-images .detail-image-slider .arrow-right { top: 40%; right: 0px; padding: 15px 0px 15px 15px; } #product-images .product-images__button { margin-top: 30px; } #product-rel-projects { padding-top: 70px; padding-bottom: 40px; background-color: #F1F1F1; } #product-rel-projects .product-rel-projects__description { width: 50%; margin: 0 auto; } #product-rel-projects .info-slider { margin-top: 40px; } #product-rel-projects .info-slider .info-slider__slide__content__title { margin-bottom: 25px; } #product-rel-projects .info-slider__slide__content__body .product-rel-info { width: 50%; float: left; margin-top: 15px; margin-bottom: 20px; } #product-rel-projects .info-slider__slide__content__body .product-rel-info strong { margin-bottom: 6px; display: inline-block; text-transform: uppercase; } #product-rel-projects .info-slider__slide__content__body .product-rel-info p { font-size: 18px; line-height: 24px; } #product-rel-projects .info-slider__slide__content__body .product-rel-info a { font-weight: 400; text-decoration: none; display: inline-block; padding-bottom: 3px; border-bottom: 1px solid #000000; } #product-nav { padding-bottom: 60px; background-color: #F1F1F1; } #product-nav a.button, #product-nav #home-intro .intro-section__left a, #home-intro .intro-section__left #product-nav a { margin-bottom: 5px; } #product-nav a.button i, #product-nav #home-intro .intro-section__left a i, #home-intro .intro-section__left #product-nav a i { margin-right: 5px; display: inline-block; } #product-nav a.button.next i, #product-nav #home-intro .intro-section__left a.next i, #home-intro .intro-section__left #product-nav a.next i { margin-right: 0px; margin-left: 5px; } @media only screen and (max-width: 870px) { #product-intro .intro-section__left { width: 100%; padding-bottom: 10px; } #product-intro .intro-section__right { width: 100%; margin: 0px; padding-left: 30px; padding-right: 30px; } #product-intro .product-intro__downloads { padding-top: 0px; padding-left: 0px; } #product-rel-projects .info-slider { padding-left: 0px; padding-right: 0px; } #product-rel-projects .info-slider .slick-arrow { display: none; } } @media only screen and (max-width: 670px) { #product-intro > .u-width, #footer .block-webform #product-intro > .content, .home-tiles__newsletter #product-intro > .content, #product-intro > #user-login, #product-intro > #user-register-form, #product-intro > #user-pass, #product-intro > #user-pass-reset, #product-intro > #user-profile-form { padding-left: 0px; padding-right: 0px; } #product-intro .intro-section__left { margin-bottom: 0px; padding: 20px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #product-intro .intro-section__right { margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 20px; } #product-rel-projects .info-slider .info-slider__slide .info-slider__slide__content { width: 100%; margin-left: 0px; margin-bottom: 0px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } } @media only screen and (max-width: 600px) { #product-nav a.button, #product-nav #home-intro .intro-section__left a, #home-intro .intro-section__left #product-nav a { width: 100%; } } #project-intro .project-intro__info { margin-top: 25px; } #project-intro .project-intro__info .project-intro__info__item { width: 50%; float: left; margin-bottom: 30px; } #project-intro .project-intro__info .project-intro__info__item strong { display: block; text-transform: uppercase; font-size: 14px; margin-bottom: 6px; } #project-intro .project-intro__info .project-intro__info__item a { color: #000000; margin-bottom: 12px; text-decoration: none; display: inline-block; } #project-intro .project-intro__info .project-intro__info__item a:hover { text-decoration: underline; } #project-intro .mockup-block { margin-top: 40px; margin-bottom: 40px; } #project-intro .mockup-block .mockup-block__img { width: 40%; float: right; margin-bottom: 0px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #project-intro .mockup-block .mockup-block__content { width: 60%; float: right; padding: 20px; } .case-study-wrapper .case-study-cta { margin: 20px 0px; } #product-images { overflow: hidden; } #project-next { overflow: hidden; padding-top: 70px; padding-bottom: 40px; background-color: #F1F1F1; } #project-next .project-next__description { width: 70%; margin: 0 auto; } #project-next .info-slider { margin-top: 40px; } #project-next .info-slider .info-slider__slide__content__title { margin-bottom: 25px; } #projects-nav { padding-bottom: 60px; background-color: #F1F1F1; } #projects-nav a.button, #projects-nav #home-intro .intro-section__left a, #home-intro .intro-section__left #projects-nav a { margin-bottom: 5px; } #projects-nav a.button i, #projects-nav #home-intro .intro-section__left a i, #home-intro .intro-section__left #projects-nav a i { margin-right: 5px; display: inline-block; } @media only screen and (max-width: 870px) { #project-intro .intro-section__left { width: 100%; } #project-intro .intro-section__right { width: 76%; margin-left: 12%; margin-right: 12%; } #project-next .info-slider { padding-left: 0px; padding-right: 0px; } } @media only screen and (max-width: 670px) { #project-intro > .u-width, #footer .block-webform #project-intro > .content, .home-tiles__newsletter #project-intro > .content, #project-intro > #user-login, #project-intro > #user-register-form, #project-intro > #user-pass, #project-intro > #user-pass-reset, #project-intro > #user-profile-form { padding-left: 0px; padding-right: 0px; } #project-intro .intro-section__left { margin-bottom: 0px; padding: 20px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #project-intro .intro-section__right { margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 20px; } #project-intro .mockup-block { margin-top: 0px; } .case-study-wrapper.line-block { margin-top: 10px; } } @media only screen and (max-width: 600px) { #product-images .detail-image-slider { padding-right: 0px; padding-left: 0px; } #product-images .detail-image-slider .slick-arrow { display: none; } #project-next .info-slider .info-slider__slide .info-slider__slide__content { width: 100%; margin-left: 0px; margin-bottom: 0px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #projects-nav a.button, #projects-nav #home-intro .intro-section__left a, #home-intro .intro-section__left #projects-nav a { width: 100%; } } #downloads-page { padding-top: 100px; padding-bottom: 100px; } #downloads-page #sample-account { margin-top: 20px; } .downloads-page__intro { margin-bottom: 30px; } .downloads-page__pdfs { margin-left: -10px; margin-right: -10px; margin-bottom: 100px; } .downloads-page__pdfs .download-section { float: left; width: 33.333333%; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; } .downloads-page__pdfs .download-section:nth-child(3n+1) { clear: both; } .downloads-page__pdfs .download-section .download-section__category { padding: 15px; cursor: pointer; background-color: #F1F1F1; } .downloads-page__pdfs .download-section .download-section__category span { color: #878787; font-size: 16px; } .downloads-page__pdfs .download-section .download-section__category i { float: right; -moz-transition: -moz-transform 300ms; -o-transition: -o-transform 300ms; -webkit-transition: -webkit-transform 300ms; transition: transform 300ms; } .downloads-page__pdfs .download-section .download-section__category i.rotate { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .downloads-page__pdfs .download-section ul { display: none; padding: 15px 0px; background-color: #FFFFFF; border: 1px solid #F1F1F1; border-top: none; max-height: 400px; overflow-y: auto; } .downloads-page__pdfs .download-section ul li { display: block; padding: 0px 4px 0px 20px; } .downloads-page__pdfs .download-section ul li a { color: #878787; display: block; text-decoration: none; padding: 10px 10px 10px 0px; } .downloads-page__pdfs .download-section ul li a i { float: right; color: #000000; -moz-transition: -moz-transform 300ms; -o-transition: -o-transform 300ms; -webkit-transition: -webkit-transform 300ms; transition: transform 300ms; } .downloads-page__pdfs .download-section ul li a i.rotate { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .downloads-page__pdfs .download-section ul li:hover { background-color: #F1F1F1; } .downloads-page__pdfs .download-section ul ul { border: none; padding: 0px; display: none; max-height: none; border-top: 2px solid #f1f1f1; border-bottom: 2px solid #f1f1f1; background-color: #f4f4f4; } .downloads-page__roomshots .filemanager { width: 100%; position: relative; } .downloads-page__roomshots .filemanager .filemanager__overview { top: 0px; right: 0px; position: absolute; } .downloads-page__roomshots .filemanager .filemanager__overview.hide { display: none; } .downloads-page__roomshots .filemanager .filemanager__overview a { color: #000000; text-transform: uppercase; font-family: "HelveticaNeueLTStd-Bd"; font-size: 13px; text-decoration: none; } .downloads-page__roomshots .filemanager .filemanager__overview a i { margin-left: 5px; display: inline-block; } .downloads-page__roomshots .filemanager .filemanager__overview a:hover { text-decoration: underline; } .downloads-page__roomshots .filemanager .breadcrumbs { margin-bottom: 25px; } .downloads-page__roomshots .filemanager .breadcrumbs a, .downloads-page__roomshots .filemanager .breadcrumbs span.folderName { color: #000000; text-transform: uppercase; font-family: "HelveticaNeueLTStd-Bd"; font-size: 13px; text-decoration: none; } .downloads-page__roomshots .filemanager .breadcrumbs a:hover { text-decoration: underline; } .downloads-page__roomshots .filemanager .breadcrumbs span.divider { display: inline-block; padding-left: 10px; padding-right: 10px; } .downloads-page__roomshots .filemanager .breadcrumbs span.divider i { color: #cecece; } .downloads-page__roomshots .filemanager .preloader { margin-top: 40px; text-align: center; } .downloads-page__roomshots .filemanager .preloader img { display: inline-block; } .downloads-page__roomshots .filemanager .data { margin-left: -5px; margin-right: -5px; opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); -moz-transition: -moz-transform 300ms, opacity 250ms; -o-transition: -o-transform 300ms, opacity 250ms; -webkit-transition: -webkit-transform 300ms, opacity 250ms; transition: transform 300ms, opacity 250ms; } .downloads-page__roomshots .filemanager .data.hide { opacity: 0; -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } .downloads-page__roomshots .filemanager .data li.image, .downloads-page__roomshots .filemanager .data li.folders { padding: 5px; list-style-type: none; display: inline-block; width: 20%; overflow: hidden; z-index: 1; box-sizing: border-box; position: relative; } .downloads-page__roomshots .filemanager .data li.image:before, .downloads-page__roomshots .filemanager .data li.folders:before { display: block; content: " "; width: 100%; padding-top: 100%; } .downloads-page__roomshots .filemanager .data li.image > .content, .downloads-page__roomshots .filemanager .data li.folders > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .downloads-page__roomshots .filemanager .data li.image .file-wrapper, .downloads-page__roomshots .filemanager .data li.folders .file-wrapper { width: 100%; height: 100%; background-color: #000000; transition: 500ms border; background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border: 3px solid #FFFFFF; } .downloads-page__roomshots .filemanager .data li.image .file-wrapper.active-download, .downloads-page__roomshots .filemanager .data li.folders .file-wrapper.active-download { border: 3px solid #a0d4a2; } .downloads-page__roomshots .filemanager .data li.image.folders a, .downloads-page__roomshots .filemanager .data li.folders.folders a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .downloads-page__roomshots .filemanager .data li.image.folders.folders--background, .downloads-page__roomshots .filemanager .data li.folders.folders.folders--background { z-index: 500; } .downloads-page__roomshots .filemanager .data li.image.folders.folders--background .folder-overlay, .downloads-page__roomshots .filemanager .data li.folders.folders.folders--background .folder-overlay { z-index: 200; top: 0px; left: 0px; width: 100%; height: 100%; display: block; opacity: 0.55; position: absolute; background-size: cover; } .downloads-page__roomshots .filemanager .data li.image.folders .name, .downloads-page__roomshots .filemanager .data li.folders.folders .name { z-index: 400; padding-left: 20px; padding-right: 20px; width: 100%; color: #ffffff; font-size: 16px; line-height: 20px; display: block; position: absolute; top: 40px; font-family: "HelveticaNeueLTStd-Bd"; } .downloads-page__roomshots .filemanager .data li.image.folders .details, .downloads-page__roomshots .filemanager .data li.folders.folders .details { z-index: 400; color: #3a3a3a; font-size: 44px; font-family: "HelveticaNeueLTStd-HvCn"; bottom: -6px; right: -3px; white-space: nowrap; position: absolute; display: block; } .downloads-page__roomshots .filemanager .data li.image.files .file-overlay, .downloads-page__roomshots .filemanager .data li.folders.files .file-overlay { top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; background-color: transparent; position: absolute; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } .downloads-page__roomshots .filemanager .data li.image.files .file-overlay .file-data, .downloads-page__roomshots .filemanager .data li.folders.files .file-overlay .file-data { opacity: 0; left: 10px; bottom: -100px; width: calc(100% - 110px); position: absolute; -moz-transition: bottom 300ms; -o-transition: bottom 300ms; -webkit-transition: bottom 300ms; transition: bottom 300ms; } .downloads-page__roomshots .filemanager .data li.image.files .file-overlay .file-data .filename, .downloads-page__roomshots .filemanager .data li.folders.files .file-overlay .file-data .filename { width: 100%; display: inline-block; margin-bottom: 5px; color: #FFFFFF; font-family: "HelveticaNeueLTStd-Md"; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); } .downloads-page__roomshots .filemanager .data li.image.files .file-overlay .file-data .filesize, .downloads-page__roomshots .filemanager .data li.folders.files .file-overlay .file-data .filesize { width: 100%; font-size: 13px; color: #F5F5F5; font-family: "HelveticaNeueLTStd-Md"; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); } .downloads-page__roomshots .filemanager .data li.image.files .file-overlay .file-actions, .downloads-page__roomshots .filemanager .data li.folders.files .file-overlay .file-actions { top: 10px; right: 10px; position: absolute; } .downloads-page__roomshots .filemanager .data li.image.files .file-overlay .file-actions a, .downloads-page__roomshots .filemanager .data li.folders.files .file-overlay .file-actions a { padding: 5px 10px; color: #000000; display: inline-block; margin-left: 5px; background-color: #FFFFFF; -moz-transition: -moz-transform 300ms, color 300ms, background-color 300ms; -o-transition: -o-transform 300ms, color 300ms, background-color 300ms; -webkit-transition: -webkit-transform 300ms, color 300ms, background-color 300ms; transition: transform 300ms, color 300ms, background-color 300ms; } .downloads-page__roomshots .filemanager .data li.image.files .file-overlay .file-actions a:hover, .downloads-page__roomshots .filemanager .data li.folders.files .file-overlay .file-actions a:hover { color: #FFFFFF; background-color: #000000; } .downloads-page__roomshots .filemanager .data li.image.files .file-overlay .file-actions a.download, .downloads-page__roomshots .filemanager .data li.folders.files .file-overlay .file-actions a.download { -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -webkit-transform: translateY(-50px); transform: translateY(-50px); } .downloads-page__roomshots .filemanager .data li.image.files .file-overlay .file-actions a.view, .downloads-page__roomshots .filemanager .data li.folders.files .file-overlay .file-actions a.view { -moz-transform: translateY(-150px); -ms-transform: translateY(-150px); -webkit-transform: translateY(-150px); transform: translateY(-150px); } .downloads-page__roomshots .filemanager .data li.image.files:hover .file-overlay, .downloads-page__roomshots .filemanager .data li.folders.files:hover .file-overlay { background-color: rgba(0, 0, 0, 0.4); } .downloads-page__roomshots .filemanager .data li.image.files:hover .file-overlay .file-data, .downloads-page__roomshots .filemanager .data li.folders.files:hover .file-overlay .file-data { opacity: 1; bottom: 10px; } .downloads-page__roomshots .filemanager .data li.image.files:hover .file-overlay .file-actions a, .downloads-page__roomshots .filemanager .data li.folders.files:hover .file-overlay .file-actions a { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } .downloads-page__roomshots .filemanager .data li.doc { background-color: #000000; width: 100%; width: calc(100% - 10px); margin-left: 5px; margin-bottom: 5px; } .downloads-page__roomshots .filemanager .data li.doc * { color: #FFFFFF; } .downloads-page__roomshots .filemanager .data li.doc .file-wrapper { padding: 8px; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } .downloads-page__roomshots .filemanager .data li.doc .file-wrapper.active-download { background-color: #28bb69; } .downloads-page__roomshots .filemanager .data li.doc .file-overlay { position: relative; } .downloads-page__roomshots .filemanager .data li.doc .file-overlay .file-data .filename { display: inline-block; margin-bottom: 3px; color: #FFFFFF; font-family: "HelveticaNeueLTStd-Md"; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); } .downloads-page__roomshots .filemanager .data li.doc .file-overlay .file-data .filesize { display: inline-block; color: #F5F5F5; font-size: 12px; font-family: "HelveticaNeueLTStd-Md"; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); } .downloads-page__roomshots .filemanager .data li.doc .file-overlay .file-actions { top: 9px; right: 10px; position: absolute; } .downloads-page__roomshots .filemanager .data li.doc .file-overlay .file-actions .view { display: none; } #downloads-page__form { display: none; text-align: right; padding-right: 4px; } @media only screen and (max-width: 910px) { .downloads-page__roomshots .filemanager .data li { width: 25%; } } @media only screen and (max-width: 760px) { #downloads-page { padding-top: 60px; padding-bottom: 60px; } .downloads-page__pdfs { margin-bottom: 60px; } .downloads-page__pdfs .download-section { width: 100%; margin-bottom: 10px; } #sample-account .sample-account__login, #sample-account .sample-account__register { width: 100%; padding: 0px; border: none; } } @media only screen and (max-width: 690px) { .downloads-page__roomshots .filemanager .data li { width: 33.3333%; } } @media only screen and (max-width: 550px) { .downloads-page__roomshots .filemanager .data li { width: 50%; } } #community-news { padding-top: 100px; } #community-news .community-news__intro { margin-bottom: 160px; } #community-news .community-news__title { position: relative; padding-left: 100px; display: inline-block; margin-bottom: 40px; } #community-news .community-news__title:before { content: ''; top: 50%; left: 0px; position: absolute; width: 80px; height: 1px; display: block; background-color: #000000; } #community-news .community-news-wrapper { background-color: #F1F1F1; } #community-news .community-news-wrapper .news-item-wrapper { margin-left: -10px; margin-right: -10px; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); -webkit-transform: translateY(-80px); transform: translateY(-80px); } #community-news .community-news-wrapper .news-item-wrapper .news-item { max-width: 33.3333%; padding-left: 10px; padding-right: 10px; -webkit-flex: 1 0 33.3333%; flex: 1 0 33.3333%; } #community-news .community-news-wrapper .community-news-wrapper__more { float: left; width: 100%; margin-top: 40px; } #community-events { padding-top: 100px; padding-bottom: 80px; } #community-events .community-events__left, #community-events .community-events__right { width: 50%; float: left; } #community-events .designer-block { margin-top: 50px; } #community-events .designer-block .designer-block__image { width: 100%; margin-bottom: -70px; -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -webkit-transform: translateY(-100px); transform: translateY(-100px); } #community-events .designer-block .designer-block__content { padding: 0px 100px 60px 100px; } #community-events .designer-block .designer-block__content h2 { color: #FFFFFF; position: relative; } #community-events .designer-block .designer-block__content h2:after { content: ""; position: absolute; left: -100px; top: 14px; width: 80px; height: 1px; background-color: #FFFFFF; } #community-events .designer-block .designer-block__content p { color: #FFFFFF; } #community-events .designer-block .designer-block__content .button, #community-events .designer-block .designer-block__content .products-overview .view-filters .views-submit-button input[type="submit"], .products-overview .view-filters .views-submit-button #community-events .designer-block .designer-block__content input[type="submit"], #community-events .designer-block .designer-block__content #home-intro .intro-section__left a, #home-intro .intro-section__left #community-events .designer-block .designer-block__content a, #community-events .designer-block .designer-block__content #textpage .textpage__form form .form-actions input, #textpage .textpage__form form .form-actions #community-events .designer-block .designer-block__content input, #community-events .designer-block .designer-block__content #contact-form form .form-actions input, #contact-form form .form-actions #community-events .designer-block .designer-block__content input, #community-events .designer-block .designer-block__content #downloads-page__form input[type="submit"], #downloads-page__form #community-events .designer-block .designer-block__content input[type="submit"], #community-events .designer-block .designer-block__content #sample-form form input[type="submit"], #sample-form form #community-events .designer-block .designer-block__content input[type="submit"], #community-events .designer-block .designer-block__content #sample-account .sample-account__login input[type="submit"], #sample-account .sample-account__login #community-events .designer-block .designer-block__content input[type="submit"], #community-events .designer-block .designer-block__content .page-user form input[type="submit"], .page-user form #community-events .designer-block .designer-block__content input[type="submit"] { margin-top: 15px; } #community-social { padding-top: 80px; padding-bottom: 80px; border-top: 1px solid #999999; } #community-social .community-social__quote { width: 45%; margin-left: 50%; padding: 40px 60px; margin-bottom: -80px; background-color: #FFFFFF; -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); -webkit-transform: translateY(-80px); transform: translateY(-80px); } #community-social .community-social__quote blockquote { margin-top: 0px; margin-left: -10px; } #community-social .community-social__quote p { font-size: 20px; line-height: 26px; margin-bottom: 15px; font-family: "HelveticaNeueLTStd-Lt", "Arial", sans-serif; } #community-social .community-social__quote .community-social__quote__auther { margin-left: -10px; font-family: "HelveticaNeueLTStd-Bd", "Arial", sans-serif; } @media only screen and (max-width: 870px) { #community-news { padding-top: 50px; } #community-news .community-news__intro { margin-bottom: 60px; } #community-news .community-news-wrapper .news-item-wrapper { display: block; padding-top: 40px; padding-bottom: 55px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #community-news .community-news-wrapper .news-item-wrapper .news-item { width: 100%; max-width: none; margin-bottom: 15px; } #community-news .community-news-wrapper .news-item-wrapper .news-item img { width: 100%; } #community-events .community-events__left, #community-events .community-events__right { width: 100%; } #community-events .community-events__left { margin-bottom: 100px; } #community-events .event-item .event-item__date { width: 50%; position: relative; } #community-events .event-item .event-item__date:before { display: block; content: " "; width: 100%; padding-top: 50%; } #community-events .event-item .event-item__date > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #community-events .event-item .event-item__info { width: 50%; margin-top: 2px; } } @media only screen and (max-width: 800px) { #community-social .community-social__quote { width: 90%; margin-left: 5%; padding: 20px 30px; } #community-social .community-social__quote blockquote:after { display: none; } } @media only screen and (max-width: 540px) { #community-events { padding-top: 60px; } #community-events .event-item .event-item__date { width: 35%; position: relative; } #community-events .event-item .event-item__date:before { display: block; content: " "; width: 100%; padding-top: 100%; } #community-events .event-item .event-item__date > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #community-events .event-item .event-item__date .event-item__date__day { font-size: 38px; margin-top: 4px; } #community-events .event-item .event-item__info { width: 65%; } #community-events .event-item .event-item__info .event-item__info__link { margin-bottom: 10px; } #community-events .designer-block .designer-block__content { padding: 0px 40px 40px 40px; } } #news-header { background-image: url("../../images/news/default_header.jpg"); background-size: cover; background-position: center; } #news-body #back-to-news { display: inline-block; text-decoration: none; text-transform: uppercase; font-weight: 600; color: #777777; margin-bottom: 25px; font-size: 14px; -webkit-backface-visibility: hidden; } #news-body #back-to-news i { display: inline-block; margin-right: 10px; -moz-transition: margin 300ms; -o-transition: margin 300ms; -webkit-transition: margin 300ms; transition: margin 300ms; } #news-body #back-to-news:hover i { margin-right: 15px; } #news-body #news-body__published { display: block; margin-bottom: 50px; font-size: 14px; color: #848484; font-family: "HelveticaNeueLTStd-Lt"; } #news-body #news-body__images { margin-top: 30px; margin-left: -2px; margin-right: -2px; } #news-body #news-body__images img { width: 50%; float: left; padding: 2px; } #news-body #news-body__images.count-1 img { width: 100%; } #news-body #news-body__images.count-3 img { width: 50%; } #news-body #news-body__images.count-3 img:last-child { width: 100%; } #news-body #news-body__social { margin-top: 40px; margin-bottom: 80px; } #news-body #news-body__social span { text-transform: uppercase; font-weight: 600; color: #777777; display: inline-block; margin-right: 10px; } #news-body #news-body__social a { text-decoration: none; display: inline-block; padding-left: 8px; padding-right: 8px; font-size: 18px; color: #C9C9C9; -moz-transition: color 300ms, -moz-transform 300ms; -o-transition: color 300ms, -o-transform 300ms; -webkit-transition: color 300ms, -webkit-transform 300ms; transition: color 300ms, transform 300ms; } #news-body #news-body__social a:hover { color: #000000; -moz-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } @media only screen and (max-width: 1050px) { #news-body.intro-section .intro-section__half { width: 80%; margin-bottom: -45px; -moz-transform: translateY(-58px); -ms-transform: translateY(-58px); -webkit-transform: translateY(-58px); transform: translateY(-58px); } } @media only screen and (max-width: 870px) { #news-body.intro-section .intro-section__half { width: 100%; padding-left: 0px; padding-right: 0px; margin-bottom: 0px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #news-body #news-body__social { margin-top: 20px; margin-bottom: 30px; } } #page-intro .page-intro-quote { margin-top: 50px; margin-bottom: 50px; padding: 40px 50px; color: #FFFFFF; background-color: #000000; } #page-intro .page-intro-quote blockquote:after { color: #F1F1F1; } #page-intro .page-intro-quote strong { margin-top: 20px; display: inline-block; text-transform: uppercase; } #page-intro .page-intro__video { margin-top: 50px; } #page-info .mockup-block { margin-top: 80px; background-color: #FFFFFF; } #page-info .listing-block { margin-top: 60px; margin-bottom: 50px; padding: 40px; padding-left: 0px; position: relative; overflow: hidden; background-color: #FFFFFF; } #page-info .listing-block h3 { padding-left: 40px; } #page-info .listing-block .listing-block__wrapper { margin-top: 35px; } #page-info .listing-block .listing-block__wrapper__item { margin-bottom: 30px; min-height: 50px; } #page-info .listing-block .listing-block__wrapper__item:last-child { margin-bottom: 0px; } #page-info .listing-block .listing-block__wrapper__item .listing-block__wrapper__left { width: 80px; overflow: hidden; display: table-cell; vertical-align: middle; } #page-info .listing-block .listing-block__wrapper__item .listing-block__wrapper__left span { float: left; font-size: 45px; color: #F1F1F1; font-family: "HelveticaNeueLTStd-HvCn"; -moz-transform: translateX(-2px); -ms-transform: translateX(-2px); -webkit-transform: translateX(-2px); transform: translateX(-2px); } #page-info .listing-block .listing-block__wrapper__item .listing-block__wrapper__right { overflow: hidden; display: table-cell; vertical-align: middle; } #page-info .listing-block .listing-block__wrapper__item .listing-block__wrapper__right p { float: left; } #page-img-info { padding-top: 40px; padding-bottom: 40px; background-color: #F1F1F1; } #page-img-info .page-img-info__wrapper { padding-left: 100px; padding-right: 20px; } #page-img-info .page-img-info__left { width: 40%; float: right; } #page-img-info .page-img-info__right { width: 60%; float: left; margin-left: -80px; } #page-main-full { padding-top: 40px; padding-bottom: 40px; background-color: #F1F1F1; } #page-main-full .page-main-full__wrapper { padding-left: 100px; padding-right: 20px; } #page-main-full .page-main-full__img { width: 60%; } #page-main-full .page-main-full__img.left { float: left; margin-left: 0px; } #page-main-full .page-main-full__img.right { float: right; margin-left: 0px; } #page-main-full .page-main-full__content { width: 40%; } #page-main-full .page-main-full__content.left { float: left; margin-left: -80px; } #page-main-full .page-main-full__content.right { float: right; margin-left: 0px; } #page-extra-info { padding-top: 10px; padding-bottom: 80px; overflow: hidden; position: relative; } #page-extra-info:before { content: ''; z-index: 100; width: 100%; height: 40%; top: 0px; left: 0px; position: absolute; background-color: #F1F1F1; } #page-extra-info .page-extra-info__wrapper { padding-left: 100px; padding-right: 100px; position: relative; z-index: 200; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__left, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right { width: 50%; float: left; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__left img, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right img { width: 100%; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__left { padding-right: 10px; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right { padding-left: 10px; padding-top: 60px; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right img { margin-bottom: 60px; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .line-block { -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .user-content ul, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right #footer .block-webform ul, #footer #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .block-webform ul, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .home-tiles__newsletter ul, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right #user-pass .user-pass__info ul, #user-pass #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .user-pass__info ul { list-style-type: none; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .user-content ul li, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right #footer .block-webform ul li, #footer #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .block-webform ul li, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .home-tiles__newsletter ul li, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right #user-pass .user-pass__info ul li, #user-pass #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .user-pass__info ul li { padding-bottom: 12px; line-height: 20px; position: relative; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .user-content ul li:before, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right #footer .block-webform ul li:before, #footer #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .block-webform ul li:before, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .home-tiles__newsletter ul li:before, #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right #user-pass .user-pass__info ul li:before, #user-pass #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .user-pass__info ul li:before { content: '\f00c'; top: 1px; left: -21px; font-size: 13px; color: #6d6d6d; position: absolute; font-family: 'FontAwesome'; } #page-img-info-block { margin-top: 25px; margin-bottom: 40px; } #page-img-info-block .image-info-block .image-info-block__image:after, #page-img-info-block .image-info-block .image-info-block__image:before { display: none; } @media only screen and (max-width: 1000px) { #page-intro .intro-section__left { width: 100%; min-height: 100px; } #page-intro .intro-section__right { width: 76%; margin-left: 12%; float: left; margin-right: 12%; position: static; } #page-intro .page-intro-quote { margin-top: 20px; } #page-intro .page-intro__video { margin-top: 0px !important; } } @media only screen and (max-width: 950px) { #page-info .info-block__left { width: 55%; } #page-info .info-block__right { width: 45%; } #page-info .info-block__left .line-block { padding-left: 0px; } #page-info .info-block__right__detail { margin-top: 60px; } #page-extra-info { padding-top: 50px; padding-bottom: 40px; } #page-extra-info:before { display: none; } #page-extra-info .page-extra-info__wrapper { padding-left: 0px; padding-right: 0px; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__left { width: 45%; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right { width: 55%; padding-top: 20px; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right img { margin-bottom: 30px; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .line-block { width: 100%; padding-left: 0px; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right .line-block h2.line:after { display: none; } #page-img-info-block .image-info-block .image-info-block__content { margin-bottom: -190px; -moz-transform: translateY(-190px); -ms-transform: translateY(-190px); -webkit-transform: translateY(-190px); transform: translateY(-190px); } #page-img-info-block .image-info-block .image-info-block__content .image-info-block__content__wrapper { width: 75%; } #page-img-info .page-img-info__wrapper { padding-left: 0px; padding-right: 0px; } } @media only screen and (max-width: 800px) { #page-img-info-block .image-info-block .image-info-block__content { margin-bottom: -170px; -moz-transform: translateY(-150px); -ms-transform: translateY(-150px); -webkit-transform: translateY(-150px); transform: translateY(-150px); } } @media only screen and (max-width: 670px) { #page-intro > .u-width, #footer .block-webform #page-intro > .content, .home-tiles__newsletter #page-intro > .content, #page-intro > #user-login, #page-intro > #user-register-form, #page-intro > #user-pass, #page-intro > #user-pass-reset, #page-intro > #user-profile-form { padding-left: 0px; padding-right: 0px; } #page-intro .intro-section__left { margin-bottom: 0px; padding: 20px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #page-intro .intro-section__right { margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 20px; } #page-info .info-block__right__detail { margin-top: 5px; } #page-info .info-block__left, #page-info .info-block__right { width: 100%; padding-left: 0px; padding-right: 0px; } #page-info .mockup-block { margin-top: 80px; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__left { width: 100%; padding-right: 0px; } #page-extra-info .page-extra-info__wrapper .page-extra-info__wrapper__right { width: 100%; padding-left: 0px; } #page-img-info-block .image-info-block .image-info-block__content { margin-bottom: 0px; padding: 20px; background-color: #F1F1F1; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #page-img-info-block .image-info-block .image-info-block__content h2 { color: #000000; } #page-img-info-block .image-info-block .image-info-block__content .image-info-block__content__wrapper { padding: 0px; width: 100%; background-color: transparent; } #page-img-info .page-img-info__right { margin-left: 0px; } #page-img-info .page-img-info__right .line-block { padding-left: 20px; } #page-img-info .page-img-info__right .line-block h2:after { display: none; } #page-main-full .page-main-full__wrapper { padding: 0px; } #page-main-full .page-main-full__img { width: 100%; float: none; } #page-main-full .page-main-full__content { margin-left: 0px; } #page-main-full .page-main-full__content { width: 100%; float: none; } #page-main-full .page-main-full__content .line-block { padding-left: 0px; } #page-main-full .page-main-full__content .line-block h2:after { display: none; } } @media only screen and (max-width: 500px) { #page-img-info .page-img-info__left { width: 100%; } #page-img-info .page-img-info__right { width: 100%; } #page-img-info .page-img-info__right .line-block { padding-left: 0px; } } @media only screen and (max-width: 500px) { #page-main-full .page-main-full__wrapper { padding: 0px; } #page-main-full .page-main-full__img { width: 100%; float: none; } #page-main-full .page-main-full__content { margin-left: 0px; } #page-main-full .page-main-full__content { width: 100%; float: none; } #page-main-full .page-main-full__content .line-block { padding-left: 0px; } } .node-type-carpettilespage #block-system-main { overflow: hidden; } #carpet-tiles-info { padding-bottom: 60px; } #carpet-tiles-info .line-block { padding-left: 0px; } #carpet-tiles-info .line-block header { padding-left: 100px; } #carpet-tiles-info .info-summation .info-summation__item { position: relative; padding-left: 100px; margin-bottom: 40px; } #carpet-tiles-info .info-summation .info-summation__item:before { top: 0px; left: 0px; font-size: 55px; position: absolute; font-family: "HelveticaNeueLTStd-HvCn"; content: attr(data-number); } #carpet-tiles-info .info-summation .info-summation__item.info-summation__item--mobile { display: none; } #carpet-tiles-info .info-summation .info-summation__item p { margin-bottom: 10px; } #carpet-tiles-info .info-block__left { position: relative; } #carpet-tiles-info .info-block__left:before { content: ''; width: 75px; height: 75px; display: block; top: -40px; left: 480px; opacity: 0.8; position: absolute; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("../../images/general/arrow-down.svg"); } #carpet-tiles-info .info-block__right .info-summation { margin-top: 55px; } #carpet-tiles-info .carpet-tiles-fire { margin-top: 110px; width: 95%; } #carpet-tiles-info .carpet-tiles-fire .ctf-block { padding: 30px; background-color: #FFFFFF; position: relative; } #carpet-tiles-info .carpet-tiles-fire .ctf-block .ctf-block__img { width: 40%; top: -25px; left: -20px; z-index: 100; position: absolute; } #carpet-tiles-info .carpet-tiles-fire .ctf-block .ctf-block__content { z-index: 200; position: relative; padding-left: 41%; } #carpet-tiles-info .carpet-tiles-fire .ctf-block .ctf-block__content h2:after { display: none; } #carpet-tiles-image-block { overflow: hidden; } #carpet-tiles-image-block .ctib-left { float: left; width: 65%; } #carpet-tiles-image-block .ctib-left .image-info-block .image-info-block__content { margin-bottom: -100px; -moz-transform: translateY(-155px); -ms-transform: translateY(-155px); -webkit-transform: translateY(-155px); transform: translateY(-155px); } #carpet-tiles-image-block .ctib-left .image-info-block .image-info-block__content .image-info-block__content__wrapper { width: 90%; } #carpet-tiles-image-block .ctib-right { float: right; width: 30%; z-index: 500; position: relative; } #carpet-tiles-image-block .ctib-right #bre-score .bre-score__content { padding: 20px 30px 0px; } #carpet-tiles-image-block .ctib-right #bre-score .bre-score__bottom img { max-width: 310px; } #carpet-tiles-info-2 { border-top: 1px solid #999999; background-color: #FFFFFF; } #carpet-tiles-info-2 .info-block__right { padding: 60px 0px 60px 60px; } #carpet-tiles-bottom { padding-top: 80px; padding-bottom: 80px; background-color: #F1F1F1; } #carpet-tiles-bottom .img-bottom-block { position: relative; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__image { width: 65%; background-size: cover; background-position: center; position: relative; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__image:before { display: block; content: " "; width: 100%; padding-top: 56.25%; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__image > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content { width: 40%; top: 25px; right: 0px; position: absolute; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content h2 { color: #000000; margin-left: 120px; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content h2:after { background-color: #000000; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content .img-bottom-block__content__link { display: inline-block; text-decoration: none; color: #000000; font-family: "HelveticaNeueLTStd-Md"; margin-bottom: 10px; margin-top: 10px; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content .img-bottom-block__content__link i { padding-left: 10px; -moz-transition: padding 300ms; -o-transition: padding 300ms; -webkit-transition: padding 300ms; transition: padding 300ms; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content .img-bottom-block__content__link:hover i { padding-left: 20px; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content .img-bottom-block__content__file { margin-bottom: 10px; margin-top: 10px; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content .img-bottom-block__content__container { padding: 20px; background-color: #FFFFFF; } @media only screen and (max-width: 1200px) { #carpet-tiles-bottom .img-bottom-block .img-bottom-block__image { width: 45%; position: absolute; top: 0px; left: 0px; bottom: 0px; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content { position: static; margin-left: 45%; width: 55%; background-color: #FFFFFF; padding: 20px; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content h2 { margin-left: 0px; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content h2:after { display: none; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content .img-bottom-block__content__container { padding: 0px; } } @media only screen and (max-width: 1000px) { #carpet-tiles-intro .intro-section__left { width: 100%; min-height: 100px; } #carpet-tiles-intro .intro-section__right { width: 76%; margin-left: 12%; margin-right: 12%; position: static; } #carpet-tiles-info .info-block__left:before { display: none; } #carpet-tiles-info { padding-bottom: 30px; } #carpet-tiles-info .line-block header { padding-left: 0px; } #carpet-tiles-info h2.line:after { display: none; } #carpet-tiles-info .info-block__left { width: 100%; padding: 40px 0px; } #carpet-tiles-info .info-block__left .info-summation .info-summation__item { width: 50%; float: left; padding-right: 20px; padding-left: 80px; } #carpet-tiles-info .info-block__left .info-summation .info-summation__item:nth-child(odd) { clear: both; } #carpet-tiles-info .info-block__left .info-summation__item.info-summation__item--mobile { display: block; } #carpet-tiles-info .info-block__right { width: 100%; } #carpet-tiles-info .carpet-tiles-fire { width: 100%; margin-top: 0px; } #carpet-tiles-info .carpet-tiles-fire .ctf-block { padding: 20px; } #carpet-tiles-info .carpet-tiles-fire .ctf-block .ctf-block__img { float: left; width: 30%; padding-right: 30px; position: static; } #carpet-tiles-info .carpet-tiles-fire .ctf-block .ctf-block__content { width: 70%; float: left; padding-left: 0px; } #carpet-tiles-info .info-block__right .info-summation { display: none; } #carpet-tiles-info .info-block__right__detail { padding: 20px 30px; } #carpet-tiles-image-block .ctib-left, #carpet-tiles-image-block .ctib-right { width: 100%; float: none; } #carpet-tiles-image-block .ctib-left .image-info-block .image-info-block__content { margin-bottom: -130px; } #carpet-tiles-image-block .ctib-right #bre-score .bre-score__content { width: 75%; float: left; padding: 20px 30px 30px 30px; } #carpet-tiles-image-block .ctib-right #bre-score .bre-score__bottom { width: 25%; float: left; } #carpet-tiles-image-block .ctib-right #bre-score .bre-score__bottom img { display: static; width: 100%; } #carpet-tiles-info-2 .info-block__left { width: 50%; padding-right: 20px; } #carpet-tiles-info-2 .info-block__left .line-block { padding-left: 0px; } #carpet-tiles-info-2 .info-block__right { width: 50%; padding-left: 20px; } } @media only screen and (max-width: 850px) { #carpet-tiles-bottom { padding-top: 40px; padding-bottom: 40px; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__image { width: 100%; position: static; position: relative; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__image:before { display: block; content: " "; width: 100%; padding-top: 57.69231%; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__image > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #carpet-tiles-bottom .img-bottom-block .img-bottom-block__content { width: 100%; margin-left: 0px; } } @media only screen and (max-width: 720px) { #carpet-tiles-info-2 { padding-bottom: 40px; } #carpet-tiles-info-2 .info-block__left { width: 100%; padding: 40px 0px 40px 0px; } #carpet-tiles-info-2 .info-block__right { width: 100%; padding: 0px; } } @media only screen and (max-width: 670px) { #carpet-tiles-intro > .u-width, #footer .block-webform #carpet-tiles-intro > .content, .home-tiles__newsletter #carpet-tiles-intro > .content, #carpet-tiles-intro > #user-login, #carpet-tiles-intro > #user-register-form, #carpet-tiles-intro > #user-pass, #carpet-tiles-intro > #user-pass-reset, #carpet-tiles-intro > #user-profile-form { padding-left: 0px; padding-right: 0px; } #carpet-tiles-intro .intro-section__left { margin-bottom: 0px; padding: 20px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #carpet-tiles-intro .intro-section__right { margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 20px; } #carpet-tiles-info .info-block__left .info-summation .info-summation__item { width: 100%; float: none; padding-right: 0px; } #carpet-tiles-image-block .ctib-left .image-info-block .image-info-block__content { margin-bottom: 25px; padding: 20px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); background-color: #F1F1F1; } #carpet-tiles-image-block .ctib-left .image-info-block .image-info-block__content h2 { color: #000000; } #carpet-tiles-image-block .ctib-left .image-info-block .image-info-block__content .image-info-block__content__wrapper { width: 100%; padding: 0px; background-color: transparent; } #carpet-tiles-image-block .ctib-left .image-info-block .image-info-block__content .image-info-block__content__wrapper .image-info-block__content__wrapper__link { line-height: 22px; } } @media only screen and (max-width: 450px) { #carpet-tiles-info .carpet-tiles-fire .ctf-block .ctf-block__img { width: 70%; margin-left: 15%; } #carpet-tiles-info .carpet-tiles-fire .ctf-block .ctf-block__content { width: 100%; margin-top: 15px; } #carpet-tiles-image-block .ctib-right #bre-score .bre-score__content { width: 100%; } #carpet-tiles-image-block .ctib-right #bre-score .bre-score__bottom { width: 100%; } #carpet-tiles-image-block .ctib-right #bre-score .bre-score__bottom img { position: static; } } #news-overview-intro { padding-top: 70px; padding-bottom: 160px; } #news-overview-intro .news-overview-intro__title { font-size: 30px; position: relative; padding-left: 100px; display: inline-block; } #news-overview-intro .news-overview-intro__title:before { content: ''; top: 50%; left: 0px; position: absolute; width: 80px; height: 1px; display: block; background-color: #000000; } #news-overview { background-color: #F1F1F1; } #news-overview .news-overview__wrapper { margin-left: -10px; margin-right: -10px; -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); -webkit-transform: translateY(-80px); transform: translateY(-80px); display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #news-overview .news-overview__wrapper .news-item { max-width: 33.3333%; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; -webkit-flex: 1 0 33.3333%; flex: 1 0 33.3333%; } #news-overview .view-pager { padding-left: 10px; padding-right: 10px; } #news-overview .view-pager .item-list { border-top: 2px solid #888888; border-bottom: 2px solid #888888; } #news-overview .view-pager .item-list * { color: #888888; } @media only screen and (max-width: 870px) { #news-overview .news-overview__wrapper .news-item { max-width: 50%; -webkit-flex: 1 0 50%; flex: 1 0 50%; } } @media only screen and (max-width: 600px) { #news-overview-intro { padding-bottom: 110px; } #news-overview-intro .news-overview-intro__title { padding-left: 0px; } #news-overview-intro .news-overview-intro__title:before { display: none; } #news-overview .news-overview__wrapper .news-item { max-width: 100%; -webkit-flex: 1 0 100%; flex: 1 0 100%; } #news-overview .news-overview__wrapper .news-item .news-item__image { width: 100%; } } #sample-request { padding-top: 100px; padding-bottom: 60px; } #sample-request .sample-error { margin-top: 40px; padding: 12px 30px 12px 12px; position: relative; background-color: #edc8c4; border-top: 1px solid #d2443e; border-bottom: 1px solid #d2443e; } #sample-request .sample-error p { font-size: 14px; color: #d2443e; } #sample-request .sample-error .sample-error__close { top: 18px; right: 15px; color: #d2443e; position: absolute; } #sample-table { margin-top: 40px; } #sample-table table { width: 100%; } #sample-table table thead th { padding: 15px; font-size: 15px; color: #FFFFFF; background-color: #000000; } #sample-table table tbody tr { border-bottom: 1px solid #DFDFDF; -moz-transition: background-color 500ms; -o-transition: background-color 500ms; -webkit-transition: background-color 500ms; transition: background-color 500ms; } #sample-table table tbody tr:hover { background-color: #F4F4F4; } #sample-table table tbody tr td { padding: 15px; } #sample-table table tbody tr td.sample-table__image { min-width: 75px; width: 100px; padding: 10px; } #sample-table table tbody tr td.sample-table__name { width: 200px; } #sample-table table tbody tr td.sample-table__quantity { min-width: 100px; } #sample-table table tbody tr td.sample-table__quantity .sample-table__quantity__update { padding: 5px; cursor: pointer; font-size: 14px; color: #000000; display: inline-block; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; -webkit-transition: opacity 300ms; transition: opacity 300ms; } #sample-table table tbody tr td.sample-table__quantity .sample-table__quantity__update:hover { opacity: 0.5; } #sample-table table tbody tr td.sample-table__actions { width: 250px; } #sample-table table tbody tr td.sample-table__actions .sample-table__actions--mobile { display: none; color: #FFFFFF; text-decoration: none; padding: 3px 5px; background-color: #000000; } #sample-table table tbody tr td.sample-table__actions .sample-table__actions--mobile i { font-size: 11px; } #sample-table table tbody tr td.sample-table__name { min-width: 100px; } #sample-table .sample-table__name__tile { display: block; font-family: "HelveticaNeueLTStd-Bd", "Arial", "sans-serif"; } #sample-table .sample-table__name__collection { color: #666666; font-size: 14px; margin-top: 5px; display: inline-block; text-decoration: none; } #sample-table .sample-table__name__collection:hover { text-decoration: underline; } #sample-empty { margin-top: 50px; padding-top: 50px; border-top: 2px solid #000000; } #sample-form { margin-top: 40px; } #sample-form form > div { margin-left: -10px; margin-right: -10px; } #sample-form form label { font-family: "HelveticaNeueLTStd-Md"; display: inline-block; margin-bottom: 10px; } #sample-form form input[type="text"], #sample-form form input[type="email"], #sample-form form input[type="password"], #sample-form form textarea, #sample-form form select { width: 100%; max-width: 100%; font-size: 16px; padding: 14px 15px; border: 1px solid #C9C9C9; outline: none; background-color: #F1F1F1; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } #sample-form form input[type="text"]:focus, #sample-form form input[type="email"]:focus, #sample-form form input[type="password"]:focus, #sample-form form textarea:focus, #sample-form form select:focus { background-color: #FFFFFF; } #sample-form form input[type="text"].error, #sample-form form input[type="email"].error, #sample-form form input[type="password"].error, #sample-form form textarea.error, #sample-form form select.error { border: 1px solid #D94C4C; } #sample-form form .form-item { float: left; width: 33.333333%; padding: 0px 10px; margin-top: 20px; margin-bottom: 20px; } #sample-form form .form-item.form-item-name, #sample-form form .form-item.form-item-firstname { width: 50%; } #sample-form form .form-item.form-item-company-type select { height: 49px; } #sample-form form .form-item.form-item-comments { width: 100%; } #sample-form form .form-item.form-item-newsletter label { margin-left: 10px; } #sample-form form .description { margin-top: 4px; line-height: 16px; } #sample-form form input[type="submit"] { float: right; margin-right: 10px; } #sample-account { margin-top: 80px; padding: 40px; background-color: #F1F1F1; } #sample-account .sample-account__login, #sample-account .sample-account__register { width: 50%; float: left; padding: 10px 0px; } #sample-account .sample-account__register { padding-left: 40px; } #sample-account .sample-account__login { padding-right: 40px; border-right: 1px solid #CECECE; } #sample-account h2 { font-size: 24px; } @media only screen and (max-width: 870px) { #sample-request { padding-top: 40px; padding-bottom: 40px; } } @media only screen and (max-width: 760px) { #sample-account { padding: 20px; } #sample-account .sample-account__login, #sample-account .sample-account__register { width: 100%; padding: 0px; border: none; } #sample-account .sample-account__register { padding-top: 25px; margin-top: 25px; border-top: 1px solid #CECECE; } #sample-form form .form-item { width: 50%; } } @media only screen and (max-width: 450px) { #sample-table table tbody tr td { padding: 10px; } #sample-table table tbody tr td.sample-table__actions a.button, #sample-table table tbody tr td.sample-table__actions #home-intro .intro-section__left a, #home-intro .intro-section__left #sample-table table tbody tr td.sample-table__actions a { display: none; } #sample-table table tbody tr td.sample-table__actions a.sample-table__actions--mobile { display: inline-block; } #sample-table table thead th.sample-table__actions { text-indent: -99999999px; } #sample-form form .form-item { width: 100% !important; margin-top: 10px; margin-bottom: 10px; } } #search-overview { padding-top: 60px; padding-bottom: 60px; } #search-overview .views-exposed-form input[type="submit"] { height: 49px; padding-left: 15px; padding-right: 15px; margin-top: 24px; } #search-overview .views-row { padding: 25px 15px; border-bottom: 1px solid #000000; } #search-overview .views-row .views-field .field-content { font-size: 15px; display: block; margin-bottom: 10px; line-height: 18px; color: #898989; } #search-overview .views-row .views-field-title a { font-size: 16px; margin-bottom: 10px; display: inline-block; color: #000000; text-decoration: none; font-family: "HelveticaNeueLTStd-Md"; } #search-overview .views-row .views-field-url a { font-size: 14px; color: #000000; text-decoration: none; word-wrap: break-word; font-family: "HelveticaNeueLTStd-Md"; } #search-overview .pager { margin-top: 40px; } #search-overview .pager * { color: #000000; text-decoration: none; } #events-overview-intro { padding-top: 70px; padding-bottom: 70px; } #events-overview-intro .events-overview-intro__title { font-size: 30px; position: relative; padding-left: 100px; display: inline-block; } #events-overview-intro .events-overview-intro__title:before { content: ''; top: 50%; left: 0px; position: absolute; width: 80px; height: 1px; display: block; background-color: #000000; } #events-overview { padding-bottom: 70px; } #events-overview .event-item { float: left; width: 50%; margin-bottom: 30px; } #events-overview .views-row-odd { clear: both; } @media only screen and (max-width: 1100px) { #events-overview .event-item .event-item__date .event-item__date__day { font-size: 45px; margin-top: 3px; } #events-overview .event-item .event-item__date .event-item__date__month { font-size: 17px; } } @media only screen and (max-width: 780px) { #events-overview .event-item { width: 100%; } } @media only screen and (max-width: 470px) { #events-overview .event-item { margin-bottom: 45px; } #events-overview .event-item .event-item__date .event-item__date__day { font-size: 37px; margin-top: 3px; } #events-overview .event-item .event-item__date .event-item__date__month { font-size: 15px; } #events-overview-intro .events-overview-intro__title { padding-left: 0px; } #events-overview-intro .events-overview-intro__title:before { display: none; } } #projects-overview-intro .designer-link-block { margin-top: 60px; margin-bottom: 60px; } #projects-overview-intro .mockup-block .mockup-block__img { width: 85%; margin-left: auto; margin-right: auto; } #projects-overview-view .view-content { padding-top: 50px; padding-bottom: 50px; margin-left: -10px; margin-right: -10px; } #projects-overview-view #projects-view-content .project-item:nth-child(4n+1) { clear: both; } #projects-overview-view .view-empty { padding: 60px 0px; } .projects-spotlight .spotlight-col-item__content__title { margin-bottom: 30px; } .projects-spotlight .spotlight-col-item__content__title.no-margin { margin-bottom: 0px; } .projects-spotlight .spotlight-col-item--one .project__ribbon { margin-left: 10px; } .projects-spotlight .projects-spotlight__country { text-transform: none; display: inline !important; font-family: "HelveticaNeueLTStd-Lt"; } .projects-spotlight .projects-spotlight__content__item { margin-bottom: 25px; } .projects-spotlight .projects-spotlight__content__item strong { color: #FFFFFF; font-size: 14px; display: inline-block; text-transform: uppercase; margin-bottom: 8px; } .projects-spotlight .projects-spotlight__content__item a { color: #FFFFFF; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid #fff; } @media only screen and (max-width: 1000px) { #projects-overview-view .collection-spotlights .spotlight-col-item--one { width: 100%; } #projects-overview-view .collection-spotlights .spotlight-col-item--one .spotlight-col-item__img { max-height: 340px; overflow: hidden; } #projects-overview-view .collection-spotlights .spotlight-col-item--two { display: none; } } @media only screen and (max-width: 870px) { #projects-overview-view #projects-view-content .project-item { width: 33.333333%; } #projects-overview-view #projects-view-content .project-item:nth-child(4n+1) { clear: none; } #projects-overview-view #projects-view-content .project-item:nth-child(3n+1) { clear: both; } #projects-overview-intro .intro-section__left { width: 100%; } #projects-overview-intro .intro-section__right { width: 60%; margin-left: 20%; margin-right: 20%; } } @media only screen and (max-width: 700px) { #projects-overview-view .collection-spotlights .spotlight-col-item--one .spotlight-col-item__img { width: 100%; max-height: none; overflow: none; } #projects-overview-view .collection-spotlights .spotlight-col-item--one .spotlight-col-item__img img { width: 100%; } #projects-overview-view .collection-spotlights .spotlight-col-item--one .spotlight-col-item__content { width: 100%; } .products-overview .view-filters .views-exposed-widget { width: 50%; } } @media only screen and (max-width: 640px) { #projects-overview-view #projects-view-content .project-item { width: 50%; } #projects-overview-view #projects-view-content .project-item:nth-child(3n+1) { clear: none; } #projects-overview-view #projects-view-content .project-item:nth-child(2n+1) { clear: both; } } @media only screen and (max-width: 500px) { #projects-overview-view #projects-view-content .project-item { width: 100%; } #projects-overview-view #projects-view-content .project-item:nth-child(2n+1) { clear: none; } #projects-overview-intro > .u-width, #footer .block-webform #projects-overview-intro > .content, .home-tiles__newsletter #projects-overview-intro > .content, #projects-overview-intro > #user-login, #projects-overview-intro > #user-register-form, #projects-overview-intro > #user-pass, #projects-overview-intro > #user-pass-reset, #projects-overview-intro > #user-profile-form { padding-left: 0px; padding-right: 0px; } #projects-overview-intro .intro-section__left { margin-bottom: 0px; padding: 20px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #projects-overview-intro .intro-section__right { margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 20px; } } #products-overview-intro .designer-link-block { margin-top: 60px; margin-bottom: 60px; } #products-overview-view .view-empty { padding: 60px 0px; } .collection-spotlights { margin-bottom: 50px; position: relative; } .collection-spotlights .spotlight-col-item--one { width: 70%; padding-left: 10px; padding-right: 10px; } .collection-spotlights .spotlight-col-item--one .spotlight-col-item__inner { background-color: #000000; } .collection-spotlights .spotlight-col-item--one .spotlight-col-item__img { width: 45%; float: left; } .collection-spotlights .spotlight-col-item--one .spotlight-col-item__content { width: 55%; float: left; padding: 30px; } .collection-spotlights .spotlight-col-item--one .spotlight-col-item__content span { color: #FFFFFF; display: block; } .collection-spotlights .spotlight-col-item--one .spotlight-col-item__content .spotlight-col-item__content__number { font-size: 90px; margin-bottom: -10px; font-family: "HelveticaNeueLTStd-HvCn"; -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -webkit-transform: translateY(-50px); transform: translateY(-50px); } .collection-spotlights .spotlight-col-item--one .spotlight-col-item__content .spotlight-col-item__content__title { font-size: 20px; margin-bottom: 20px; text-transform: uppercase; font-family: "HelveticaNeueLTStd-Bd"; } .collection-spotlights .spotlight-col-item--one .spotlight-col-item__content .spotlight-col-item__content__description { line-height: 23px; } .collection-spotlights .spotlight-col-item--one .spotlight-col-item__content .spotlight-col-item__content__button { margin-top: 20px; padding: 15px 20px; color: #FFFFFF; text-decoration: none; display: inline-block; text-transform: uppercase; border: 1px solid #FFFFFF; -moz-transition: color 300ms, background-color 300ms; -o-transition: color 300ms, background-color 300ms; -webkit-transition: color 300ms, background-color 300ms; transition: color 300ms, background-color 300ms; } .collection-spotlights .spotlight-col-item--one .spotlight-col-item__content .spotlight-col-item__content__button:hover { color: #000000; background-color: #FFFFFF; } .collection-spotlights .spotlight-col-item--two { width: 30%; height: 100%; top: 0px; right: 0px; position: absolute; padding-left: 10px; padding-right: 10px; } .collection-spotlights .spotlight-col-item--two .spotlight-col-item__inner { position: relative; height: 100%; } .collection-spotlights .spotlight-col-item--two .spotlight-col-item__content { left: 0px; bottom: 0px; width: 100%; z-index: 300; position: absolute; color: #FFFFFF; } .collection-spotlights .spotlight-col-item--two .spotlight-col-item__content__inner { background-color: #000000; padding: 20px 15px; } .collection-spotlights .spotlight-col-item--two .spotlight-col-item__content__title { width: 50%; float: left; display: block; font-size: 16px; text-transform: uppercase; font-family: "HelveticaNeueLTStd-Bd"; } .collection-spotlights .spotlight-col-item--two .spotlight-col-item__content__button { width: 50%; float: left; display: block; font-size: 14px; text-align: right; color: #FFFFFF; text-decoration: none; font-family: "HelveticaNeueLTStd-Lt"; } .collection-spotlights .spotlight-col-item--two .spotlight-col-item__content__button i { font-size: 12px; margin-left: 5px; display: inline-block; -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -webkit-transform: translateY(-1px); transform: translateY(-1px); -moz-transition: margin 300ms; -o-transition: margin 300ms; -webkit-transition: margin 300ms; transition: margin 300ms; } .collection-spotlights .spotlight-col-item--two .spotlight-col-item__content__button:hover i { margin-left: 10px; } .collection-spotlights .spotlight-col-item--two .spotlight-col-item__content__number { left: 10px; bottom: 95%; z-index: -10; display: block; font-size: 90px; margin-bottom: -10px; position: absolute; font-family: "HelveticaNeueLTStd-HvCn"; } @media only screen and (max-width: 1020px) { #products-overview-intro .intro-section__left { width: 100%; } #products-overview-intro .intro-section__right { width: 60%; margin-left: 20%; margin-right: 20%; } .products-overview .view-filters #edit-new-shapes-wrapper { width: 50%; } } @media only screen and (max-width: 960px) { #products-overview-view .product-item { width: 33.3333%; } #products-overview-view .product-item .product-item__info .product-item__info__title { font-size: 16px; padding-left: 10px; } #products-overview-view .product-item .product-item__visual .product-item__visual__collection .product-item__visual__collection__number { font-size: 75px; left: 10px; bottom: -15px; } .collection-spotlights .spotlight-col-item--one { width: 100%; } .collection-spotlights .spotlight-col-item--two { display: none; } } @media only screen and (max-width: 780px) { #products-overview-intro .intro-section__right { width: 80%; margin-left: 10%; margin-right: 10%; } } @media only screen and (max-width: 650px) { #products-overview-intro > .u-width, #footer .block-webform #products-overview-intro > .content, .home-tiles__newsletter #products-overview-intro > .content, #products-overview-intro > #user-login, #products-overview-intro > #user-register-form, #products-overview-intro > #user-pass, #products-overview-intro > #user-pass-reset, #products-overview-intro > #user-profile-form { padding-left: 0px; padding-right: 0px; } #products-overview-intro .intro-section__left { margin-bottom: 0px; padding: 20px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #products-overview-intro .intro-section__right { margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 20px; } #products-overview-view .product-item { width: 50%; } #products-overview-view .product-item .product-item__info .product-item__info__title { font-size: 14px; } #products-overview-view .product-item .product-item__visual .product-item__visual__collection .product-item__visual__collection__number { font-size: 50px; bottom: -12px; } .collection-spotlights .spotlight-col-item--one .spotlight-col-item__img, .collection-spotlights .spotlight-col-item--one .spotlight-col-item__img img, .collection-spotlights .spotlight-col-item--one .spotlight-col-item__content { width: 100%; } } @media only screen and (max-width: 500px) { #products-overview-intro .designer-link-block { margin-top: 20px; margin-bottom: 40px; padding: 10px 20px 20px 20px; } #products-overview-intro .designer-link-block .designer-link-block__left { width: 100%; } #products-overview-intro .designer-link-block .designer-link-block__right { width: 100%; padding-top: 20px; } #products-overview-intro .designer-link-block .designer-link-block__right__image { display: none; } } @media only screen and (max-width: 470px) { .products-overview .view-filters #edit-new-shapes-wrapper { width: 100%; } } /* _blog.scss */ html, body { height: 100%; } body.page-blog, body.node-type-blog-homepage, body.node-type-blog-post { display: flex; flex-direction: column; font-family: "HelveticaNeueLTStd-Roman"; -webkit-font-smoothing: initial; -moz-osx-font-smoothing: grayscale; } body.page-blog #wrapper, body.node-type-blog-homepage #wrapper, body.node-type-blog-post #wrapper { margin-top: 75px !important; } body.page-blog h1, body.node-type-blog-homepage h1, body.node-type-blog-post h1 { font-family: "HelveticaNeueLTStd-Hv"; font-size: 3rem; line-height: 3rem; margin: 10px 0px; display: block; } header.blog-header { -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); background-color: #FFFFFF; z-index: 1; height: 75px; position: fixed; width: 100%; display: flex; align-items: center; transition: top 0.8s ease-in-all; } .nav-up { top: -75px; } .header-nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; } #mobile-nav-toggle { display: none; margin: auto 0 auto auto; } #mobile-nav-toggle i { font-size: 3rem; } #main-blog-navigation { margin-left: auto; } #main-blog-navigation .modulyss-link span { padding-right: 10px; } .nav_container { display: flex; flex-direction: row; } @media only screen and (max-width: 1250px) { #mobile-nav-toggle { display: block; overflow: hidden; } #mobile-nav-toggle i { cursor: pointer; font-size: 21px; line-height: 60px; display: inline-block; padding: 0px 15px; margin-right: -15px; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; } .header-nav { align-items: center; } #main-blog-navigation { display: none; top: 75px; left: 0px; right: 0px; position: fixed; border-top: 1px solid #F1F1F1; background-color: #FFFFFF; -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); } #main-blog-navigation .nav_container { text-align: center; flex-direction: column; } #main-blog-navigation .category-links { text-align: left !important; } #main-blog-navigation .category-links span { display: block; text-align: center; border-bottom: 1px solid #F1F1F1; } #main-blog-navigation .category-links a { width: 100%; display: inline; font-size: 18px; line-height: 40px; color: #000000; } #main-blog-navigation .category-links a:last-child { border-bottom: none; } #main-blog-navigation .search-link { border-right: none; margin-right: 0px; border-bottom: 1px solid #F1F1F1; padding: 10px; } #main-blog-navigation .search-link span { display: inline-block; padding-right: 5px; } #main-blog-navigation .modulyss-logo { text-align: right; margin-right: 20px; border-bottom: 1px solid #F1F1F1; padding: 10px; } } @media only screen and (max-width: 970px) { .header .header-nav { height: 60px; } .header .header-nav #header-logo { height: 96px !important; } } .blog-wrapper { flex: 1; display: flex; flex-direction: column; height: 100%; } .color-underline, .blog-header nav a.active, .blog-header nav a:hover, .item-list .pager a:hover, .blog-links a:hover, footer .footer-newsletter .form-actions input, #footer .footer-newsletter .form-actions input, .blog-featured:hover .blog-title a, .blog-teaser:hover .blog-title a, .view-blog-search-page .views-submit-button .form-submit { box-shadow: inset 0 -6px 0 #ffcccc, inset 0 -8.5px 0 #ffcccc; text-decoration: none; } .blog-section-title, footer .footer-social-block span, #footer .footer-social-block span, footer .footer-newsletter h2, #footer .footer-newsletter h2, .blog-related h3 { display: block; text-transform: uppercase; font-family: "HelveticaNeueLTStd-Bd", "Arial", sans-serif; font-size: 0.9rem; font-weight: unset; letter-spacing: 0.3rem; margin: 20px 10px; } .vertical-line, footer .footer-newsletter h2, #footer .footer-newsletter h2 { position: relative; width: auto; display: inline-block; margin-left: 5%; padding-top: 20px; text-transform: uppercase; color: #000; margin: 50px 20px; text-align: center; } .vertical-line:after, footer .footer-newsletter h2:after, #footer .footer-newsletter h2:after { content: ''; width: 1px; height: 100px; background: #000; position: absolute; bottom: 100%; left: 50%; margin-left: -1px; } @media only screen and (max-width: 900px) { .vertical-line, footer .footer-newsletter h2, #footer .footer-newsletter h2 { width: 100%; margin-left: 0; text-align: center; display: block; } } .square { min-width: 30%; width: 30%; padding-bottom: 30%; background: #f4f4f4; display: inline-block; } .blog-header-wrapper { display: flex; flex-direction: row; /* flex-wrap: wrap; */ } .blog-header-wrapper .line-block { display: flex; flex-direction: column; justify-content: center; padding-left: 60px; } @media only screen and (max-width: 670px) { .square { display: none; } .line-block { margin-top: 60px; margin-bottom: 60px; } } .blog-header nav a { font-family: inherit; font-weight: 900; text-decoration: none; color: #000; } .blog-header nav .category-links { margin-right: 10px; } .blog-header nav .category-links a { margin: 10px; } .blog-header nav .search-link { border-right: 2px solid #000; margin-right: 10px; } .blog-header nav .search-link a { padding-right: 10px; } .blog-header nav .search-link a span { display: none; } .blog-header nav .modulyss-logo a { text-decoration: underline; } .blog-logo a { font-family: "HelveticaNeueLTStd-Blk", "Arial", sans-serif; font-size: 2.8rem; font-weight: 900; color: #000; text-decoration: none; } .blog-logo a span { font-family: "HelveticaNeueLTStd-Lt"; font-weight: 400; font-size: 1.1rem; padding: 0px 10px; } @media only screen and (max-width: 450px) { .blog-logo a { font-size: 2rem; } .blog-logo a span { font-size: 1.1rem; } } @media only screen and (max-width: 380px) { .blog-logo a { font-size: 2.8rem; } .blog-logo a span { display: none; } } .blog-share { color: #888888; font-weight: 600; font-size: 120%; text-transform: uppercase; } .blog-share a { text-decoration: none; color: #888888; padding: 0px 10px; } .blog-share a:hover { color: #ffcccc; } .item-list .pager, .blog-links { margin: 0px 20px; text-transform: uppercase; text-align: center; letter-spacing: 3px; color: #000; font-family: "HelveticaNeueLTStd-Roman", "Arial", sans-serif; font-size: 0.8rem; font-weight: 600; margin: 50px auto; } .item-list .pager a, .blog-links a { margin: 0px 20px; color: #888888; font-family: "HelveticaNeueLTStd-Roman", "Arial", sans-serif; font-size: 0.8rem; font-weight: 600; text-decoration: none; } .item-list .pager a i, .blog-links a i { padding-right: 10px; } .item-list .pager li.pager-current, .blog-links li.pager-current { opacity: 1; } .field-name-field-tags .field-items .field-item { color: #888888; display: inline; padding-right: 10px; } .field-name-field-tags .field-items .field-item a { text-decoration: none; color: #888888; font-weight: 900; } .field-name-field-tags .field-items .field-item a:hover { color: #ffcccc; } .field-name-field-tags .field-items .field-item:before { content: '# '; color: #ffcccc; } .line-block .line:after { top: 5px; } .blog-image img { margin: auto; margin-top: -50px; } .pr-quote { padding: 0px 20px 40px 20px; } .pr-quote blockquote { position: relative; padding-left: 70px; padding-top: 0px; margin-top: 0px; margin-bottom: 40px; width: 80%; } .pr-quote blockquote p { display: inline; font-weight: 900; font-size: 1.6rem; line-height: 2.2rem; font-family: "HelveticaNeueLTStd-Bd"; } .pr-quote blockquote:after { top: 0px; left: 0px; position: absolute; font-size: 120px; content: "\201D"; font-family: "HelveticaNeueLTStd-Bd"; } .blog-detail .blog__body { font-family: "HelveticaNeueLTStd-Roman", "Arial", sans-serif; font-weight: 400; } .blog-detail-paragraphs .paragraph-block:first-of-type p:first-of-type::first-letter { color: #ffcccc; font-size: 4em; float: left; margin: 10px 5px 10px 0px; } .blog-detail-paragraphs .paragraph-block h2, .blog-detail-paragraphs .paragraph-block h3 { margin-bottom: 20px; } .blog-intro { width: 70%; margin: auto; padding-bottom: 40px; } .blog-intro p { color: #666; font-size: 140%; font-family: "HelveticaNeueLTStd-Lt", "Arial", sans-serif; font-weight: 400; line-height: 140%; } @media only screen and (max-width: 670px) { .blog-intro { width: 100%; } .blog-image img { margin-top: 0px; } } footer, #footer { margin-top: auto; } footer svg#logo-modulyss-svg, #footer svg#logo-modulyss-svg { max-width: 70px; height: 100%; } footer .logo-copyright, #footer .logo-copyright { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; /* padding: 20px; */ align-items: center; } footer .logo-copyright span, #footer .logo-copyright span { padding: 20px 20px; } footer .footer__bottom, #footer .footer__bottom { margin-top: 0; padding-top: 0; border: none; } footer .footer__bottom .footer__bottom__left span, #footer .footer__bottom .footer__bottom__left span { border: none; } footer .footer-middle, #footer .footer-middle { flex: 1; text-align: left; } footer .footer-middle span:not(:last-of-type):after, #footer .footer-middle span:not(:last-of-type):after { content: '|'; padding-left: 5px; padding-right: 5px; } footer .footer-social-block, #footer .footer-social-block { background-color: #f4f4f4; text-align: center; font-size: 2rem; color: #000; } footer .footer-social-block #footer__social, #footer .footer-social-block #footer__social { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 70px; } footer .footer-social-block .links-wrapper a, #footer .footer-social-block .links-wrapper a { padding: 10px; font-size: 1.8rem; } footer .footer-social-block i, #footer .footer-social-block i { color: #000; -moz-transition: color 300ms; -o-transition: color 300ms; -webkit-transition: color 300ms; transition: color 300ms; } footer .footer-social-block i:hover, #footer .footer-social-block i:hover { color: #CCC; } @media only screen and (max-width: 670px) { footer #footer-__social, #footer #footer-__social { flex-direction: column; } footer #footer-__social .links-wrapper, #footer #footer-__social .links-wrapper { width: 100%; } } @media only screen and (max-width: 900px) { footer .footer-block, #footer .footer-block { flex-direction: column; align-items: flex-start; } footer .footer-block > *, #footer .footer-block > * { text-align: center; margin: 10px; width: 100%; } footer .footer-left, #footer .footer-left { order: 2; } footer .footer-left .logo-copyright, #footer .footer-left .logo-copyright { display: flex; flex-direction: column; } footer .footer-left .logo-copyright > *, #footer .footer-left .logo-copyright > * { margin: auto; } footer .footer-middle, #footer .footer-middle { order: 1; text-align: center; } footer .footer-right, #footer .footer-right { order: 3; } } footer .footer-newsletter, #footer .footer-newsletter { position: relative; border-top: none; } footer .footer-newsletter .newsletter-bg, #footer .footer-newsletter .newsletter-bg { width: 100%; height: 90%; z-index: -1; background: url("../../images/blog/newsletter.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; } footer .footer-newsletter h2, #footer .footer-newsletter h2 { text-align: center; text-transform: uppercase; margin-left: 0; margin-right: 0; width: 100%; } footer .footer-newsletter .form-actions:after, #footer .footer-newsletter .form-actions:after { content: "\f061"; font-family: 'FontAwesome'; font-size: 12px; } footer .footer-newsletter .form-actions input, #footer .footer-newsletter .form-actions input { padding: 0 !important; margin: 10px 5px 10px 15px !important; width: auto !important; height: auto !important; text-transform: lowercase !important; font-weight: 400; font-size: 1.2rem !important; } footer .footer-nav, #footer .footer-nav { background-color: #1A1A18; color: #aaaaaa; } footer .footer-block, #footer .footer-block { padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } footer .footer-block *, #footer .footer-block * { color: #aaaaaa; vertical-align: middle; } footer .footer-block a, #footer .footer-block a { text-decoration: none; } footer .footer-block a:hover, #footer .footer-block a:hover { color: #FFFFFF; } footer .footer-block .blog-bylink, #footer .footer-block .blog-bylink { margin-left: auto; padding: 0px 20px; } .blog-detail-bottom { display: flex; width: 80%; margin: 50px auto; justify-content: center; } @media only screen and (max-width: 670px) { .blog-detail-bottom { flex-direction: column; } .blog-detail-bottom > * { width: 100%; text-align: center; padding-bottom: 30px; } } .pr-content-wrapper { display: flex; flex-wrap: wrap; } .pr-content-wrapper > div { /* padding: 10px; */ } .paragraph-block { padding-bottom: 0px; } .paragraph-block h3 { margin-top: 0px; } .paragraph-block img { margin-bottom: 20px; } .paragraph-block .left { width: 50%; order: 1; } .paragraph-block .right { width: 50%; order: 2; } .video-embed-description { padding: 20px 0px; color: grey; font-weight: 600; } .pr-title-text, .pr-video, .pr-pinterest { padding-top: 0px; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; } .pr-title-text.full, .pr-video.full, .pr-pinterest.full { width: 70%; padding-left: 0px; padding-right: 0px; margin: auto; } .pr-image { margin: auto; } .pr-pinterest.full { width: 100%; margin: auto; } .pr-slider-wrapper { width: 90%; margin: auto; } @media only screen and (max-width: 700px) { .pr-slider-wrapper { width: 100%; } .paragraph-block .left, .paragraph-block .right, .paragraph-block .full { width: 100%; padding-left: 0px; padding-right: 0px; margin: auto; } } .pinterest-container { text-align: center; } .pinterest-container > span { width: 100% !important; overflow: hidden; } .pinterest-container > span > span > span > span { min-width: 0; } .blog-latest-articles-wrapper { max-width: 900px; margin: auto; padding-bottom: 100px; } .blog-grid-wrapper { width: 100%; margin: auto; } .blog-grid-wrapper .view-blog-overview .views-row { padding-top: 40px; width: 40%; } .blog-grid-wrapper .view-blog-overview .views-row.left { float: left; clear: left; /*margin-left: 5%;*/ } .blog-grid-wrapper .view-blog-overview .views-row.right { float: right; clear: right; /*margin-right: 5%;*/ } .blog-grid-wrapper .view-blog-overview .views-row-first { margin-top: 0px; } @media only screen and (max-width: 700px) { .blog-grid-wrapper .view-blog-overview .views-row { width: 100%; max-width: 400px; margin: auto; padding-top: 40px; } .blog-grid-wrapper .view-blog-overview .views-row.left { float: none; clear: none; margin: auto; } .blog-grid-wrapper .view-blog-overview .views-row.right { float: none; clear: none; margin: auto; } .blog-grid-wrapper .blog-teaser { width: 100%; } } .blog-featured { position: relative; display: flex; flex-direction: row; justify-content: center; } .blog-featured .square { background: #f4f4f4; width: 60%; height: 100%; position: absolute; display: inline-block; top: 0; left: -5%; z-index: -1; /*min-width: 30%; */ padding-bottom: 40%; } .blog-featured .blog-item-content { width: 40%; flex: 1; margin: auto; } .blog-featured .blog-content { width: 90%; margin-right: auto; } .blog-featured .img-wrapper { width: 60%; padding-top: 100px; } @media only screen and (max-width: 900px) { .blog-featured { flex-direction: column; margin-bottom: 6rem; } .blog-featured .square { width: 100vw; } .blog-featured .blog-item-content { width: 80%; display: flex; flex-direction: column; justify-content: center; padding: 15% 0%; } .blog-featured .img-wrapper { width: 100%; margin-top: 0; margin-left: auto; padding-top: 0px; } } @media only screen and (max-width: 600px) { .blog-featured .square { width: 100%; } .blog-featured .blog-item-content  { width: 100%; padding: 10%; } .blog-featured .img-wrapper { width: 100%; margin-top: 0%; padding-top: 0px; } } .blog-featured-wrapper .view-blog-overview .views-row { margin-top: 0px; } .blog-featured .blog-title a, .blog-featured .blog-title a h3 { font-size: 3rem; font-family: "HelveticaNeueLTStd-Hv"; line-height: 3rem; } .blog-category, .blog-category-view-wrapper { display: inline-block; color: grey; text-transform: uppercase; text-decoration: none; font-family: "HelveticaNeueLTStd-Md"; font-size: 1rem; font-weight: 400; display: inline-block; padding-bottom: 10px; } .blog-category a, .blog-category-view-wrapper a { color: grey; text-transform: uppercase; text-decoration: none; font-family: "HelveticaNeueLTStd-Md"; font-size: 1rem; font-weight: 400; display: inline-block; } .blog-category-view-wrapper > a:not(:first-of-type), .blog-category-wrapper > div:not(:first-of-type) { padding: 5px 0; } .blog-category-view-wrapper > a:not(:last-of-type):after, .blog-category-wrapper > div:not(:last-of-type):after { content: "|"; padding: 0px 10px; } .blog-date { color: grey; font-size: 1rem; font-weight: 600; margin: 10px 0px 50px 0px; /* blog-image negative top margin as bottom margin */ } .blog-readmore a { color: #000; text-decoration: none; font-weight: 900; text-transform: lowercase; font-size: 1.2rem; } .blog-readmore a:after { content: "\f061"; padding-left: 10px; font-family: 'FontAwesome'; font-size: 12px; } .blog-title, .blog-title a { color: black; font-family: "HelveticaNeueLTStd-Hv"; font-size: 1.6rem; text-decoration: none; } .blog-teaser .blog-teaser-image { overflow: hidden; } .blog-teaser .blog-teaser-image img { -moz-transition: transform 1s; -webkit-transition: transform 1s; transition: transform 1s; } .blog-teaser .blog-category-view-wrapper a, .blog-teaser .blog-category { padding-top: 10px; padding-bottom: 10px; } .blog-teaser .blog-title a, .blog-teaser .blog-title a h3 { font-size: 1.8rem; line-height: 1.9rem; margin: 10px 0; } .blog-teaser .blog-teaser-content { padding: 10px 0px; } .blog-teaser:hover .blog-teaser-image img { -moz-transform: scale(1.01); -webkit-transform: scale(1.01); transform: scale(1.01); } .view-blog-overview .views-row { margin-top: 20px; } .view-blog-overview .views-row.left { float: left; clear: left; } .view-blog-overview .views-row.right { float: right; clear: right; } .blog-related { background-color: #F1F1F1; } .blog-related h3 { padding: 40px 20px; margin-bottom: 0px; } .blog-related .view-content { display: flex; flex-wrap: wrap; align-items: flex-start; } .blog-related .views-row { padding-bottom: 40px; } @media only screen and (min-width: 600px) { .blog-related h3 { width: 100%; text-align: left; } .blog-related .views-row { max-width: 250px; min-width: 250px; margin: 20px; } } @media only screen and (min-width: 1015px) { .blog-overview-title { text-align: center; } } /* taxonomy term display */ .blog-items .view-content { display: flex; flex-wrap: wrap; justify-content: space-around; } /* blog-taxonomy-overview */ .view-blog-search-page, .blog-taxonomy-overview { /*background: red;*/ margin-bottom: 100px; } .view-blog-search-page .view-content, .blog-taxonomy-overview .view-content { display: flex; flex-wrap: wrap; justify-content: flex-start; } .view-blog-search-page .views-row, .blog-taxonomy-overview .views-row { width: 80%; margin: 25px auto; } .blog-overview-title { text-transform: uppercase; color: #000; font-size: 1.2rem; margin: 50px 20px; text-align: center; } @media only screen and (min-width: 500px) { .view-blog-search-page .views-row, .blog-taxonomy-overview .views-row { max-width: 40%; min-width: 40%; margin: 25px auto; } } @media only screen and (min-width: 780px) { .blog-overview-title { text-align: left; } .view-blog-search-page, .blog-taxonomy-overview { /*background: orange;*/ } .view-blog-search-page h3, .blog-taxonomy-overview h3 { text-align: center; } .view-blog-search-page .views-row, .blog-taxonomy-overview .views-row { max-width: 30%; min-width: 30%; margin: 10px; } } @media only screen and (min-width: 1015px) { .view-blog-search-page .views-row, .blog-taxonomy-overview .views-row { max-width: 250px; min-width: 250px; margin: 20px; width: 30%; margin: 10px; } } .view-blog-search-page .blog-teaser { text-align: left; } .view-blog-search-page .view-blog-header-wrapper { margin-left: 20px; } .view-blog-search-page .view-blog-header-wrapper > div { padding-bottom: 40px; } .view-blog-search-page .views-exposed-widgets.clearfix { display: flex; width: 100%; margin: 0; max-width: 600px; margin-top: 50px; } .view-blog-search-page .views-submit-button .form-submit { font-weight: 900; padding: 0; font-weight: 900; font-size: 1rem; margin-top: 1em; background: none; } .view-blog-search-page .views-reset-button .form-submit { margin-top: 1em; background: none; } @media only screen and (max-width: 1050px) { .views-exposed-widgets.clearfix { width: 80%; margin: auto; } } .p-slider { min-height: 500px; position: relative; height: 500px; overflow: hidden; display: block; } .p-slider__slide { height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; outline: none; } .p-slider__slide .p-slider__slide__overlay { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background-color: #000000; } .p-slider__slide .p-slider__slide__content .p-slider__slide__content__wrapper { position: absolute; left: 20px; bottom: 150px; } .p-slider__slide .p-slider__slide__content .p-slider__slide__content__title { font-family: "HelveticaNeueLTStd-Th", "Arial", sans-serif; color: #FFFFFF; font-size: 40px; margin-bottom: 10px; display: block; } .p-slider__slide .p-slider__slide__content .p-slider__slide__content__subtitle { font-family: "HelveticaNeueLTStd-Md", "Arial", sans-serif; color: #FFFFFF; font-size: 18px; text-transform: uppercase; margin-bottom: 20px; display: block; } .p-slider-pager .slick-arrow { float: left; color: #FFFFFF; background-color: #000000; display: inline-block; cursor: pointer; line-height: 35px; padding: 0px 7px; } .p-slider-pager .slick-dots { float: left; margin-left: 10px; list-style: none; } .p-slider-pager .slick-dots ul { list-style: none !important; } .p-slider-pager .slick-dots li { float: left; line-height: 25px; margin-right: 5px; } .p-slider-pager .slick-dots li.slick-active button { background-color: #000000; } .p-slider-pager .slick-dots li button { cursor: pointer; outline: none; padding: 0px; width: 12px; height: 12px; font-size: 0px; border: 1px solid #000000; background-color: #FFFFFF; -moz-appearance: none; -webkit-appearance: none; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } .p-slider-pager .slick-dots li button:hover { background-color: #515151; } .page-user form label { font-family: "HelveticaNeueLTStd-Md"; display: inline-block; margin-bottom: 10px; } .page-user form input[type="text"], .page-user form input[type="email"], .page-user form input[type="password"], .page-user form textarea, .page-user form select { font-size: 16px; padding: 14px 15px; border: 1px solid #C9C9C9; outline: none; background-color: #F1F1F1; -moz-transition: background-color 300ms; -o-transition: background-color 300ms; -webkit-transition: background-color 300ms; transition: background-color 300ms; } .page-user form input[type="text"]:focus, .page-user form input[type="email"]:focus, .page-user form input[type="password"]:focus, .page-user form textarea:focus, .page-user form select:focus { background-color: #FFFFFF; } .page-user form input[type="text"].error, .page-user form input[type="email"].error, .page-user form input[type="password"].error, .page-user form textarea.error, .page-user form select.error { border: 1px solid #D94C4C; } .page-user form .form-item { margin-top: 20px; margin-bottom: 20px; } .page-user form .description { margin-top: 4px; line-height: 16px; } .page-user-register form { overflow: hidden; } .page-user-register form select { width: 100%; } .page-user-register .group-block-left, .page-user-register .group-block-right { width: 50%; float: left; padding-left: 30px; padding-right: 30px; } .page-user-register .group-block-left h3, .page-user-register .group-block-right h3 { display: none; } #user-login, #user-register-form, #user-pass, #user-pass-reset, #user-profile-form { padding-top: 80px; padding-bottom: 80px; } #user-pass .user-pass__info { margin-bottom: 40px; } #user-profile-form h3, #user-profile-form .group-block-right, #user-profile-form .field-group-tabs-wrapper { display: none; } #user-login > div, .sample-account__login { max-width: 600px; } #user-login > div .user-login__extra, .sample-account__login .user-login__extra { margin: 5px 0px 20px 0px; } #user-login > div .user-login__extra p, .sample-account__login .user-login__extra p { font-size: 14px; font-family: "HelveticaNeueLTStd-It"; } #user-login > div .user-login__extra p a, .sample-account__login .user-login__extra p a { text-decoration: none; color: #000000; font-weight: 600; } #user-register-form > div { margin-left: -30px; margin-right: -30px; } #user-register-form > div .form-type-password-confirm { margin-top: 35px; } #user-register-form > div .password-parent, #user-register-form > div .confirm-parent { width: 100%; } #user-register-form > div .password-parent { margin-bottom: 10px; } #user-register-form > div .password-parent label { margin-bottom: 15px; } #user-register-form > div .password-strength { width: 45%; margin-top: 0px; } #user-register-form > div .password-strength .password-indicator { margin-top: 4px; } #user-register-form > div .password-confirm { margin-top: 0px; } #user-register-form > div .captcha { width: 100%; float: left; padding-left: 30px; padding-right: 30px; margin-top: 25px; padding-top: 25px; border-top: 1px solid #F1F1F1; } #user-register-form > div .form-actions { width: 100%; float: left; padding-left: 30px; padding-right: 30px; } #user-profile-page { padding-top: 100px; padding-bottom: 60px; } @media only screen and (max-width: 780px) { #user-login, #user-register-form, #user-pass, #user-pass-reset, #user-profile-form { padding-top: 40px; padding-bottom: 40px; } .page-user-register .group-block-left, .page-user-register .group-block-right { width: 100%; } } body.i18n-ru, body.i18n-pl, body.i18n-tr { font-family: 'Arial' !important; font-weight: 400; } body.i18n-ru h1, body.i18n-pl h1, body.i18n-tr h1 { font-family: 'Arial'; font-weight: 600; font-size: 37px; } body.i18n-ru h2, body.i18n-pl h2, body.i18n-tr h2 { font-family: 'Arial'; font-weight: 600; font-size: 28px; } body.i18n-ru h3, body.i18n-pl h3, body.i18n-tr h3 { font-family: 'Arial'; font-weight: 600; font-size: 18px; } body.i18n-ru strong, body.i18n-pl strong, body.i18n-tr strong { font-family: 'Arial'; font-weight: 600; } body.i18n-ru .user-content p, body.i18n-ru #footer .block-webform p, #footer body.i18n-ru .block-webform p, body.i18n-ru .home-tiles__newsletter p, body.i18n-ru #user-pass .user-pass__info p, #user-pass body.i18n-ru .user-pass__info p, body.i18n-pl .user-content p, body.i18n-pl #footer .block-webform p, #footer body.i18n-pl .block-webform p, body.i18n-pl .home-tiles__newsletter p, body.i18n-pl #user-pass .user-pass__info p, #user-pass body.i18n-pl .user-pass__info p, body.i18n-tr .user-content p, body.i18n-tr #footer .block-webform p, #footer body.i18n-tr .block-webform p, body.i18n-tr .home-tiles__newsletter p, body.i18n-tr #user-pass .user-pass__info p, #user-pass body.i18n-tr .user-pass__info p { font-size: 14px; line-height: 20px; } body.i18n-ru .user-content table tr th, body.i18n-ru #footer .block-webform table tr th, #footer body.i18n-ru .block-webform table tr th, body.i18n-ru .home-tiles__newsletter table tr th, body.i18n-ru #user-pass .user-pass__info table tr th, #user-pass body.i18n-ru .user-pass__info table tr th, body.i18n-pl .user-content table tr th, body.i18n-pl #footer .block-webform table tr th, #footer body.i18n-pl .block-webform table tr th, body.i18n-pl .home-tiles__newsletter table tr th, body.i18n-pl #user-pass .user-pass__info table tr th, #user-pass body.i18n-pl .user-pass__info table tr th, body.i18n-tr .user-content table tr th, body.i18n-tr #footer .block-webform table tr th, #footer body.i18n-tr .block-webform table tr th, body.i18n-tr .home-tiles__newsletter table tr th, body.i18n-tr #user-pass .user-pass__info table tr th, #user-pass body.i18n-tr .user-pass__info table tr th { font-family: 'Arial'; font-weight: 600; } body.i18n-ru .user-content blockquote *, body.i18n-ru #footer .block-webform blockquote *, #footer body.i18n-ru .block-webform blockquote *, body.i18n-ru .home-tiles__newsletter blockquote *, body.i18n-ru #user-pass .user-pass__info blockquote *, #user-pass body.i18n-ru .user-pass__info blockquote *, body.i18n-pl .user-content blockquote *, body.i18n-pl #footer .block-webform blockquote *, #footer body.i18n-pl .block-webform blockquote *, body.i18n-pl .home-tiles__newsletter blockquote *, body.i18n-pl #user-pass .user-pass__info blockquote *, #user-pass body.i18n-pl .user-pass__info blockquote *, body.i18n-tr .user-content blockquote *, body.i18n-tr #footer .block-webform blockquote *, #footer body.i18n-tr .block-webform blockquote *, body.i18n-tr .home-tiles__newsletter blockquote *, body.i18n-tr #user-pass .user-pass__info blockquote *, #user-pass body.i18n-tr .user-pass__info blockquote * { font-family: 'Arial' !important; font-weight: 200 !important; font-size: 0.9em !important; } body.i18n-ru .intro-section .intro-section__left p, body.i18n-pl .intro-section .intro-section__left p, body.i18n-tr .intro-section .intro-section__left p { font-family: 'Arial'; font-size: 16px; font-weight: 200; } body.i18n-ru #contact-intro #contact__quote h3, body.i18n-pl #contact-intro #contact__quote h3, body.i18n-tr #contact-intro #contact__quote h3 { font-family: 'Arial'; font-size: 36px; font-weight: 600; line-height: 44px; } body.i18n-ru .social-block .block--quote span, body.i18n-pl .social-block .block--quote span, body.i18n-tr .social-block .block--quote span { font-family: 'Arial'; font-size: 30px; font-weight: 200; line-height: 45px; }