/* ==================================================== RESET ==================================================== */ *, *:before, *:after { box-sizing:border-box; } body { position:relative; margin:0; padding:0; background-color:#f9f9f9; } /* ==================================================== MIN - BASICS ==================================================== */ _____MIN-BASICS{} html { font-family: 'Titillium Web', sans-serif; } /* ==================================================== MIN - RICH DROPDOWN ==================================================== */ _____MIN-RICH-DROPDOWN{} ul.dropdown-list li.dropdown-item { border-top:1px solid #ccc; margin:0; } ul.dropdown-list li.dropdown-item:first-child { border-top:none; } ul.dropdown-list .dropdown-link { padding:6px; } .wz-dropdown-item { display:flex; flex-direction:row; } .wz-dropdown-text { display:flex; flex-direction:column; justify-content:center; } .wz-dropdown-image { margin-right:8px; line-height:0; } .wz-dropdown-image image { width:32px; } ul.dropdown-list { padding:0!important; } /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ beneath old settings +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ _____OLD_SETTINGS_____{} {} ------------------------ {} USER LOGIN + PASSWORD ### {} body.page-user-login #page { width:80%; margin:48px auto; padding:48px; background-color: #f1f1f1; border-radius: 12px; } body.page-user-login #page .tabs { display: none; } body.page-user-login form#user-login, body.page-user-password form#user-pass { /* margin-top:48px; */ padding:48px; background-color: #f1f1f1; border-radius: 12px; } ------------------------ {} BLOCK TEASER {} .wz-block.block-teaser .teaser-image, .wz-block.block-teaser .teaser-headline { margin-bottom:12px; } .wz-block.block-teaser .teaser-headline h2 { text-align:center; /* font-size:125%; font-weight:600; text-transform: uppercase; */ } {} ================================================ {} XXS {} ================================================ {} ------------------------ {} XXS - GRID {} .wz-grid { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; -webkit-box-orient: inline-axis; -moz-box-orient: inline-axis; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-justify-content:space-around; -moz-box-justify-content:space-around; -ms-justify-content:space-around; -webkit-justify-content:space-around; justify-content:space-around; -webkit-box-flex-wrap: wrap; -moz-box-flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-left:0; margin-right:0; width:100%; } ------------------------ {} XXS - GRID - TYPO {} .gc-xxs-1 h2 {font-size: calc(22px + (32 - 22) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXS - GRID - COLUMNS {} .gc-xxs-1 > .grid-item-wrapper {width: 100%;} .gc-xxs-2 > .grid-item-wrapper {width: 50%;} .gc-xxs-3 > .grid-item-wrapper {width: 33%;} .gc-xxs-4 > .grid-item-wrapper {width: 25%;} .gc-xxs-5 > .grid-item-wrapper {width: 20%;} .gc-xxs-6 > .grid-item-wrapper {width: 16.666666%;} ------------------------ {} XXS - GRID - ITEM WIDTH {} .gw-xxs-100 > .grid-item-wrapper > .grid-item {width: 100%;} .gw-xxs-90 > .grid-item-wrapper > .grid-item {width: 90%;} .gw-xxs-80 > .grid-item-wrapper > .grid-item {width: 80%;} .gw-xxs-70 > .grid-item-wrapper > .grid-item {width: 70%;} ------------------------ {} XXS - GRID - ITEM PADDING 1-COLS {} .gc-xxs-1.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-1.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-1.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-1.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-1.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(72px + (288 - 72) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-1.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(96px + (384 - 96) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXS - GRID - ITEM PADDING 2-COLS {} .gc-xxs-2.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-2.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-2.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-2.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-2.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-2.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXS - GRID - ITEM PADDING 3-COLS {} .gc-xxs-3.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-3.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-3.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-3.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-3.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-3.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(32px + (128 - 32) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXS - GRID - ITEM PADDING 4-COLS {} .gc-xxs-4.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(3px + (12 - 3) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-4.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-4.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(9px + (36 - 9) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-4.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-4.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-4.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXS - GRID - ITEM PADDING 5-COLS {} .gc-xxs-5.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (10 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-5.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(5px + (19 - 5) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-5.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(7px + (29 - 7) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-5.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(10px + (38 - 10) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-5.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(14px + (58 - 14) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-5.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(19px + (77 - 19) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXS - GRID - ITEM PADDING 6-COLS {} .gc-xxs-6.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (8 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-6.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-6.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-6.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-6.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xxs-6.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} {} ================================================ {} XS {} ================================================ {} @media(min-width:374px) { {} ------------------------ {} XS - TYPO - PORTRAIT {} .wz-block.block-portrait .sidebar-content p {font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1040 - 320)));} {} ------------------------ {} XS - GRID - TYPO {} .gc-xs-2 h2 {font-size: calc(18px + (64 - 18) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XS - GRID GUTTER {} .wz-grid-gutter-10 {margin-left: calc(0 - (6px + (12 - 6) * ((100vw - 320px) / (1040 - 320))));margin-right: calc(0 - (6px + (12 - 6) * ((100vw - 320px) / (1040 - 320))));width:calc(100% + (2 * (6px + (12 - 6) * ((100vw - 320px) / (1040 - 320)))));} .wz-grid-gutter-10 > .grid-item-wrapper {padding: calc(6px + (12 - 6) * ((100vw - 320px) / (1040 - 320)));} .wz-grid-gutter-20 {margin-left: calc(0 - (12px + (24 - 12) * ((100vw - 320px) / (1040 - 320))));margin-right: calc(0 - (12px + (24 - 12) * ((100vw - 320px) / (1040 - 320))));width:calc(100% + (2 * (12px + (24 - 12) * ((100vw - 320px) / (1040 - 320)))));} .wz-grid-gutter-20 > .grid-item-wrapper {padding: calc(12px + (24 - 12) * ((100vw - 320px) / (1040 - 320)));} .wz-grid-gutter-30 {margin-left: calc(0 - (18px + (36 - 18) * ((100vw - 320px) / (1040 - 320))));margin-right: calc(0 - (18px + (36 - 18) * ((100vw - 320px) / (1040 - 320))));width:calc(100% + (2 * (18px + (36 - 18) * ((100vw - 320px) / (1040 - 320)))));} .wz-grid-gutter-30 > .grid-item-wrapper {padding: calc(18px + (36 - 18) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XS - GRID - COLUMNS {} .gc-xs-1 > .grid-item-wrapper {width: 100%;} .gc-xs-2 > .grid-item-wrapper {width: 50%;} .gc-xs-3 > .grid-item-wrapper {width: 33%;} .gc-xs-4 > .grid-item-wrapper {width: 25%;} .gc-xs-5 > .grid-item-wrapper {width: 20%;} .gc-xs-6 > .grid-item-wrapper {width: 16.666666%;} ------------------------ {} XS - GRID - ITEM WIDTH {} .gw-xs-100 > .grid-item-wrapper > .grid-item {width: 100%;} .gw-xs-90 > .grid-item-wrapper > .grid-item {width: 90%;} .gw-xs-80 > .grid-item-wrapper > .grid-item {width: 80%;} .gw-xs-70 > .grid-item-wrapper > .grid-item {width: 70%;} ------------------------ {} XS - GRID - ITEM PADDING 1-COLS {} .gc-xs-1.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-1.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-1.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-1.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-1.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(72px + (288 - 72) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-1.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(96px + (384 - 96) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XS - GRID - ITEM PADDING 2-COLS {} .gc-xs-2.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-2.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-2.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-2.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-2.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-2.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XS - GRID - ITEM PADDING 3-COLS {} .gc-xs-3.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-3.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-3.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-3.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-3.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-3.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(32px + (128 - 32) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XS - GRID - ITEM PADDING 4-COLS {} .gc-xs-4.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(3px + (12 - 3) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-4.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-4.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(9px + (36 - 9) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-4.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-4.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-4.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XS - GRID - ITEM PADDING 5-COLS {} .gc-xs-5.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (10 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-5.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(5px + (19 - 5) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-5.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(7px + (29 - 7) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-5.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(10px + (38 - 10) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-5.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(14px + (58 - 14) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-5.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(19px + (77 - 19) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XS - GRID - ITEM PADDING 6-COLS {} .gc-xs-6.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (8 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-6.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-6.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-6.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-6.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xs-6.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} } {} ================================================ {} SM {} ================================================ {} @media(min-width:442px) { {} ------------------------ {} SM - IMAGE 300 {} .inline-image.image-width-300 {display:inline-block;max-width:300px;width: calc(150px + (300 - 150) * ((100vw - 320px) / (1200 - 320)));} .inline-image.image-width-300.image-align-left {float:left;margin-right: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} .inline-image.image-width-300.image-align-right {float:right;margin-left: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} .inline-image.image-width-300.inline-image.image-align-center {display:block;float:none;margin-left:0;margin-right:0;width:100%;} .inline-image.image-width-300.inline-image.image-float-1 {display:inline-block;margin-bottom:3px;} ------------------------ {} SM - IMAGE 400 {} .inline-image.image-width-400 {width:75%;} {} ------------------------ {} SM - GRID - TYPO {} .gc-sm-2 h2 {font-size: calc(18px + (26 - 18) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} SM - GRID - COLUMNS {} .gc-sm-1 > .grid-item-wrapper {width: 100%;} .gc-sm-2 > .grid-item-wrapper {width: 50%;} .gc-sm-3 > .grid-item-wrapper {width: 33%;} .gc-sm-4 > .grid-item-wrapper {width: 25%;} .gc-sm-5 > .grid-item-wrapper {width: 20%;} .gc-sm-6 > .grid-item-wrapper {width: 16.666666%;} ------------------------ {} SM - GRID - ITEM WIDTH {} .gw-sm-100 > .grid-item-wrapper > .grid-item {width: 100%;} .gw-sm-90 > .grid-item-wrapper > .grid-item {width: 90%;} .gw-sm-80 > .grid-item-wrapper > .grid-item {width: 80%;} .gw-sm-70 > .grid-item-wrapper > .grid-item {width: 70%;} ------------------------ {} SM - GRID - ITEM PADDING 1-COLS {} .gc-sm-1.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-1.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-1.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-1.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-1.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(72px + (288 - 72) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-1.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(96px + (384 - 96) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} SM - GRID - ITEM PADDING 2-COLS {} .gc-sm-2.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-2.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-2.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-2.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-2.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-2.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} SM - GRID - ITEM PADDING 3-COLS {} .gc-sm-3.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-3.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-3.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-3.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-3.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-3.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(32px + (128 - 32) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} SM - GRID - ITEM PADDING 4-COLS {} .gc-sm-4.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(3px + (12 - 3) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-4.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-4.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(9px + (36 - 9) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-4.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-4.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-4.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} SM - GRID - ITEM PADDING 5-COLS {} .gc-sm-5.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (10 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-5.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(5px + (19 - 5) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-5.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(7px + (29 - 7) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-5.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(10px + (38 - 10) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-5.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(14px + (58 - 14) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-5.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(19px + (77 - 19) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} SM - GRID - ITEM PADDING 6-COLS {} .gc-sm-6.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (8 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-6.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-6.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-6.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-6.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-sm-6.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} } {} ================================================ {} MD {} ================================================ {} @media(min-width:527px) { {} ------------------------ {} MD - IMAGE 400 {} .inline-image.image-width-400 {display:inline-block;max-width:400px;width: calc(200px + (400 - 200) * ((100vw - 320px) / (1200 - 320)));} .inline-image.image-width-400.image-align-left {float:left;margin-right: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} .inline-image.image-width-400.image-align-right {float:right;margin-left: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} .inline-image.image-width-400.inline-image.image-align-center {display:block;float:none;margin-left:0;margin-right:0;width:100%;} .inline-image.image-width-400.inline-image.image-float-1 {display:inline-block;margin-bottom:3px;} {} ------------------------ {} MD - MENU {} .wz-block.wz-block-main-menu .menu { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; } .wz-block.wz-block-main-menu .collapsed-menu-button {display:none;} {} ------------------------ {} MD - GRID - TYPO {} .gc-md-2 h2 {font-size: calc(20px + (28 - 20) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} MD - GRID - COLUMNS {} .gc-md-1 > .grid-item-wrapper {width: 100%;} .gc-md-2 > .grid-item-wrapper {width: 50%;} .gc-md-3 > .grid-item-wrapper {width: 33%;} .gc-md-4 > .grid-item-wrapper {width: 25%;} .gc-md-5 > .grid-item-wrapper {width: 20%;} .gc-md-6 > .grid-item-wrapper {width: 16.666666%;} ------------------------ {} MD - GRID - ITEM WIDTH {} .gw-md-100 > .grid-item-wrapper > .grid-item {width: 100%;} .gw-md-90 > .grid-item-wrapper > .grid-item {width: 90%;} .gw-md-80 > .grid-item-wrapper > .grid-item {width: 80%;} .gw-md-70 > .grid-item-wrapper > .grid-item {width: 70%;} ------------------------ {} MD - GRID - ITEM PADDING 1-COLS {} .gc-md-1.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-md-1.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-md-1.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-md-1.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} .gc-md-1.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(72px + (288 - 72) * ((100vw - 320px) / (1040 - 320)));} .gc-md-1.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(96px + (384 - 96) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} MD - GRID - ITEM PADDING 2-COLS {} .gc-md-2.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-md-2.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-md-2.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-md-2.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-md-2.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-md-2.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} MD - GRID - ITEM PADDING 3-COLS {} .gc-md-3.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-md-3.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-md-3.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-md-3.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} .gc-md-3.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-md-3.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(32px + (128 - 32) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} MD - GRID - ITEM PADDING 4-COLS {} .gc-md-4.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(3px + (12 - 3) * ((100vw - 320px) / (1040 - 320)));} .gc-md-4.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-md-4.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(9px + (36 - 9) * ((100vw - 320px) / (1040 - 320)));} .gc-md-4.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-md-4.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-md-4.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} MD - GRID - ITEM PADDING 5-COLS {} .gc-md-5.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (10 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-md-5.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(5px + (19 - 5) * ((100vw - 320px) / (1040 - 320)));} .gc-md-5.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(7px + (29 - 7) * ((100vw - 320px) / (1040 - 320)));} .gc-md-5.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(10px + (38 - 10) * ((100vw - 320px) / (1040 - 320)));} .gc-md-5.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(14px + (58 - 14) * ((100vw - 320px) / (1040 - 320)));} .gc-md-5.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(19px + (77 - 19) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} MD - GRID - ITEM PADDING 6-COLS {} .gc-md-6.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (8 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-md-6.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-md-6.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-md-6.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-md-6.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-md-6.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} } {} ================================================ {} LG {} ================================================ {} @media(min-width:633px) { {} ------------------------ {} LG - GRID - TYPO {} .gc-lg-2 h2 {font-size: calc(18px + (26 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-3 h2 {font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} LG - GRID - COLUMNS {} .gc-lg-1 > .grid-item-wrapper {width: 100%;} .gc-lg-2 > .grid-item-wrapper {width: 50%;} .gc-lg-3 > .grid-item-wrapper {width: 33%;} .gc-lg-4 > .grid-item-wrapper {width: 25%;} .gc-lg-5 > .grid-item-wrapper {width: 20%;} .gc-lg-6 > .grid-item-wrapper {width: 16.666666%;} ------------------------ {} LG - GRID - ITEM WIDTH {} .gw-lg-100 > .grid-item-wrapper > .grid-item {width: 100%;} .gw-lg-90 > .grid-item-wrapper > .grid-item {width: 90%;} .gw-lg-80 > .grid-item-wrapper > .grid-item {width: 80%;} .gw-lg-70 > .grid-item-wrapper > .grid-item {width: 70%;} ------------------------ {} LG - GRID - ITEM PADDING 1-COLS {} .gc-lg-1.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-1.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-1.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-1.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-1.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(72px + (288 - 72) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-1.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(96px + (384 - 96) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} LG - GRID - ITEM PADDING 2-COLS {} .gc-lg-2.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-2.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-2.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-2.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-2.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-2.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} LG - GRID - ITEM PADDING 3-COLS {} .gc-lg-3.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-3.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-3.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-3.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-3.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-3.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(32px + (128 - 32) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} LG - GRID - ITEM PADDING 4-COLS {} .gc-lg-4.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(3px + (12 - 3) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-4.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-4.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(9px + (36 - 9) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-4.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-4.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-4.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} LG - GRID - ITEM PADDING 5-COLS {} .gc-lg-5.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (10 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-5.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(5px + (19 - 5) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-5.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(7px + (29 - 7) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-5.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(10px + (38 - 10) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-5.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(14px + (58 - 14) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-5.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(19px + (77 - 19) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} LG - GRID - ITEM PADDING 6-COLS {} .gc-lg-6.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (8 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-6.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-6.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-6.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-6.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-lg-6.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} } {} ================================================ {} XL {} ================================================ {} @media(min-width:767px) { {} ------------------------ {} XL - GRID - TYPO {} .gc-xl-2 h2 {font-size: calc(18px + (26 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-3 {font-size: calc(10px + (16 - 10) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-3 h2 {font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XL - GRID - COLUMNS {} .gc-xl-1 > .grid-item-wrapper {width: 100%;} .gc-xl-2 > .grid-item-wrapper {width: 50%;} .gc-xl-3 > .grid-item-wrapper {width: 33%;} .gc-xl-4 > .grid-item-wrapper {width: 25%;} .gc-xl-5 > .grid-item-wrapper {width: 20%;} .gc-xl-6 > .grid-item-wrapper {width: 16.666666%;} ------------------------ {} XL - GRID - ITEM WIDTH {} .gw-xl-100 > .grid-item-wrapper > .grid-item {width: 100%;} .gw-xl-90 > .grid-item-wrapper > .grid-item {width: 90%;} .gw-xl-80 > .grid-item-wrapper > .grid-item {width: 80%;} .gw-xl-70 > .grid-item-wrapper > .grid-item {width: 70%;} ------------------------ {} XL - GRID - ITEM PADDING 1-COLS {} .gc-xl-1.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-1.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-1.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-1.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-1.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(72px + (288 - 72) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-1.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(96px + (384 - 96) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XL - GRID ITEM PADDING 2-COLS {} .gc-xl-2.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-2.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-2.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-2.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-2.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-2.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XL - GRID ITEM PADDING 3-COLS {} .gc-xl-3.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-3.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-3.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-3.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-3.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-3.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(32px + (128 - 32) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XL - GRID ITEM PADDING 4-COLS {} .gc-xl-4.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(3px + (12 - 3) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-4.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-4.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(9px + (36 - 9) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-4.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-4.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-4.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XL - GRID ITEM PADDING 5-COLS {} .gc-xl-5.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (10 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-5.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(5px + (19 - 5) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-5.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(7px + (29 - 7) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-5.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(10px + (38 - 10) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-5.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(14px + (58 - 14) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-5.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(19px + (77 - 19) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XL - GRID ITEM PADDING 6-COLS {} .gc-xl-6.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (8 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-6.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-6.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-6.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-6.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xl-6.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} } {} ================================================ {} XXL {} ================================================ {} @media(min-width:942px) { {} ------------------------ {} XXL - TYPO - MAIN MENU {} .wz-block.wz-block-main-menu .menu > a { /* padding: 10px 16px; */ font-size: 15px; } {} ------------------------ {} XXL - GRID - TYPO {} .gc-xxl-4 h2 {font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXL - GRID - COLUMNS {} .gc-xxl-1 > .grid-item-wrapper {width: 100%;} .gc-xxl-2 > .grid-item-wrapper {width: 50%;} .gc-xxl-3 > .grid-item-wrapper {width: 33%;} .gc-xxl-4 > .grid-item-wrapper {width: 25%;} .gc-xxl-5 > .grid-item-wrapper {width: 20%;} .gc-xxl-6 > .grid-item-wrapper {width: 16.666666%;} ------------------------ {} XXL - GRID - ITEM WIDTH {} .gw-xxl-100 > .grid-item-wrapper > .grid-item {width: 100%;} .gw-xxl-90 > .grid-item-wrapper > .grid-item {width: 90%;} .gw-xxl-80 > .grid-item-wrapper > .grid-item {width: 80%;} .gw-xxl-70 > .grid-item-wrapper > .grid-item {width: 70%;} ------------------------ {} XXL - GRID - ITEM PADDING 1-COLS {} .gc-xxl-1.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-1.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-1.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-1.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-1.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(72px + (288 - 72) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-1.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(96px + (384 - 96) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXL - GRID - ITEM PADDING 2-COLS {} .gc-xxl-2.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-2.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-2.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-2.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-2.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(36px + (144 - 36) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-2.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(48px + (192 - 48) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXL - GRID - ITEM PADDING 3-COLS {} .gc-xxl-3.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-3.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-3.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-3.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-3.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-3.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(32px + (128 - 32) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXL - GRID - ITEM PADDING 4-COLS {} .gc-xxl-4.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(3px + (12 - 3) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-4.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-4.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(9px + (36 - 9) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-4.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-4.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(18px + (72 - 18) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-4.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(24px + (96 - 24) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXL - GRID - ITEM PADDING 5-COLS {} .gc-xxl-5.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (10 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-5.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(5px + (19 - 5) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-5.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(7px + (29 - 7) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-5.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(10px + (38 - 10) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-5.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(14px + (58 - 14) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-5.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(19px + (77 - 19) * ((100vw - 320px) / (1040 - 320)));} ------------------------ {} XXL - GRID - ITEM PADDING 6-COLS {} .gc-xxl-6.wz-grid-item-padding-12 > .grid-item-wrapper > .grid-item {padding: calc(2px + (8 - 2) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-6.wz-grid-item-padding-24 > .grid-item-wrapper > .grid-item {padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-6.wz-grid-item-padding-36 > .grid-item-wrapper > .grid-item {padding: calc(6px + (24 - 6) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-6.wz-grid-item-padding-48 > .grid-item-wrapper > .grid-item {padding: calc(8px + (32 - 8) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-6.wz-grid-item-padding-72 > .grid-item-wrapper > .grid-item {padding: calc(12px + (48 - 12) * ((100vw - 320px) / (1040 - 320)));} .gc-xxl-6.wz-grid-item-padding-96 > .grid-item-wrapper > .grid-item {padding: calc(16px + (64 - 16) * ((100vw - 320px) / (1040 - 320)));} } {} ================================================ {} MAX {} ================================================ {} @media(min-width:1020px) { {} .wz-block.wz-block-main-menu .menu .menu-icon { font-size: 36px; } ------------------------ {} MAX - TYPO {} p.teaser-text {font-size: 18px;} .wz-block.block-portrait .sidebar-content p, .wz-block.block-portrait .sidebar-content a {font-size:14px;} ------------------------ {} MAX - TYPO - GRID {} .wz-grid-xxl-cols-4 h2 {font-size: 20px;} .wz-grid-xl-cols-3 h2 {font-size: 24px;} {} ------------------------ {} MAX - BLOCKS - PADDING {} .wz-block.block-padding-top-10 > .wz-block-content > * {padding-top:48px;} .wz-block.block-padding-top-05 > .wz-block-content > * {padding-top:24px;} .wz-block.block-padding-top-15 > .wz-block-content > * {padding-top:72px;} .wz-block.block-padding-bottom-10 > .wz-block-content > * {padding-bottom:48px;} .wz-block.block-padding-bottom-05 > .wz-block-content > * {padding-bottom:24px;} .wz-block.block-padding-bottom-15 > .wz-block-content > * {padding-bottom:72px;} .wz-block.block-margin-10 > .wz-block-content {padding-left:48px;padding-right:48px;} /* .wz-block.blockpadding-side-normal > .wz-block-content {padding-left:48px;padding-right:48px;} .wz-block.blockpadding-side-narrow > .wz-block-content {padding-left:24px;padding-right:24px;} .wz-block.blockpadding-side-wide > .wz-block-content {padding-left:72px;padding-right:72px;} */ {} ------------------------ {} MAX - GRID - GUTTER {} .wz-grid-gutter-10 {margin-left:-12px;margin-right:-12px;width:calc(100% + 24px);} .wz-grid-gutter-10 > .grid-item-wrapper {padding:12px;} .wz-grid-gutter-20 {margin-left:-24px;margin-right:-24px;width:calc(100% + 36px);} .wz-grid-gutter-20 > .grid-item-wrapper {padding:24px;} .wz-grid-gutter-30 {margin-left:-36px;margin-right:-36px;width:calc(100% + 72px);} .wz-grid-gutter-30 > .grid-item-wrapper {padding:36px;} } /* ####################################################################### */ /* --------------------------------------------- */ b {font-weight:bold;} span.block { display:inline-block; } /* .inline-image.full { padding:0; border:none; float:none; margin:0 0 0 0; margin-right:0; padding-bottom:24px; max-width:960px; } .image-wrapper { width:100%; text-align:center; margin-top:24px; margin-bottom:24px; } .inline-image.full-center { padding:0; float:none; border:none; margin:0 auto; padding-bottom:24px; max-width:960px; } .inline-image.right { float:right; margin-right:0; margin-left:12px; } .inline-image .caption { display:block; font-size:75%; padding-top:4px; } */ {} ------------------------ {} TEST SETTINGS {} .blockname-TEST .wz-col-1 {background-color:#bbb;} .blockname-TEST .wz-col-2 {background-color:#bdb;} .blockname-TEST .wz-col-3 {background-color:#bbd;} .blockname-TEST .wz-col-4 {background-color:#dbb;} {} ############################################################ {} DEPRECATED {} /* ------------------------------------------------------------------------------------------------------ BREADCRUMB ------------------------------------------------------------------------------------------------------ */ section.breadcrumb { padding:12px 0 0 0; margin:0; background-color: transparent; } ol.breadcrumb { background-color: transparent; border-radius: 0; padding:3px 4px 12px 0; font-size:12px; border-bottom:1px solid #ddd; } ol.breadcrumb a { color:#999; } .breadcrumb li.active, .breadcrumb a:hover { color:#000; } /* ------------------------------------------------------------------------------------------------------ SEARCH OVERLAY ------------------------------------------------------------------------------------------------------ */ #menu-searchform { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,124,82,0.9); overflow:auto; z-index:1200; } #menu-searchform-close { position:fixed; top:20px; right:20px; cursor:pointer; font-size:24px; color:#fff; } #ne-search-form { max-width:800px; margin:0 auto; } #ne-search-form > div { padding-left:24px; padding-right:24px; text-align:center; } #ne-search-form .form-type-textfield { margin-top:20%; } /* ------------------------------------------------------------------------------------------------------ SEARCH RESULTS PAGE ------------------------------------------------------------------------------------------------------ */ body.page-search #search-form { max-width:800px; margin:0 auto; } body.page-search #block-system-main h2 { } /* ------------------------------------------------------------------------------------------------------ SEARCH ------------------------------------------------------------------------------------------------------ */ .page-search #block-system-main { margin-top:72px; } body.page-search #block-system-main > h2 { margin-top:12px; font-weight:300; /* font-size: 275%; */ color: #0054AB; } body.page-search #block-system-main .ds-search-extra { margin-top:24px !important; } body.page-search #block-system-main .group-result { margin-top:24px !important; padding:0 !important; } body.page-search ol.search-results li.search-result { margin-top:24px; } body.page-search ol.search-results li.search-result h3 { margin-bottom:0; } body.page-search ol.search-results .search-info { display:none; } .btn-primary { background-image: linear-gradient(#888888, #666666 60%, #444444); background-repeat: no-repeat; border-color: #666666; filter: none; } .btn-primary:hover { border-color: #666666; } /* ------------------------------------------------------------------------------------------------------ NEWS RUBRIK & DATUM ------------------------------------------------------------------------------------------------------ */ .news-rubrik { float:left; /* font-size:75%; */ font-weight:600; color:#666; text-transform: uppercase; } .news-datum { float:right; line-height:0; } .news-datum .date-display-single { /* font-size:75%; */ font-weight:600; color:#666; line-height:1.2em; } .news-rubrik-datum { margin-top:24px; } .owl-carousel .owl-item { text-align: center; } /* ------------------------------------------------------------------------------------------------------ ELEMENT - VOLLBILD ------------------------------------------------------------------------------------------------------ */ .list ul { list-style-position: inside; margin-top:.8em; } .list ul li { /* font-size: 87.5%; */ line-height: 1.4em; } {} ------------------------ {} INLINE STYLES {} span.bold { font-weight:700; } .fa-fw { width: 1.7em; text-align: center; } .col-sm-12 { padding:0; margin:0; } .grey {color: #aaa;} .grey-dark {color: #777;} .green {color: #0054AB;} {} ------------------------ {} BACKEND {} body.node-type-backend .wz-blocks {margin-top:100px;} ------------------------ {} USER - MENU {} .user-menu-wrapper {position: relative;} .user-menu-button {cursor: pointer;padding:0 6px;text-align:center;} /* .user-menu-button .fa {color:#fff;} */ .user-menu { position: absolute; top: 100%; right: 10px; z-index: 620; display: none; min-width: 160px; padding:0; margin: 2px 0 0; list-style: none; font-size: 13px; text-align: left; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; } .user-menu > a { display:block; background-color: #fff; border-radius: 0; white-space: nowrap; padding: 8px 16px 9px 16px; color:#444; } .user-menu > a:hover { background-color: #f1f1f1; color:#0054AB; } .user-menu > a.topline { border-top:1px solid #ccc; } .user-menu > a.topline:first-child { border-top:none; } .user-menu > a:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; } .user-menu > a:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } ------------------------ {} USER - PRIMARY TABS {} body.page-node-add ul.tabs.primary, body.page-node-edit ul.tabs.primary { position:relative; top:0; } ------------------------ {} REGISTERED - VIEWS{} body.node-type-wz-type-registered .views-table {width:100%;margin-top:12px;} body.node-type-wz-type-registered .views-table th, body.node-type-wz-type-registered .views-table td { padding: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320))); } body.node-type-wz-type-registered .view th { background-color: #f1f1f1; } body.node-type-wz-type-registered .view td { background-color: #fff; } body.node-type-wz-type-registered .views-table { border:1px solid #ccc; border-radius:4px; } body.node-type-wz-type-registered .views-table th:first-child { border-top-left-radius: 4px; } body.node-type-wz-type-registered .view-header {margin-top:12px;} body.node-type-wz-type-registered .view-menu a { display:inline-block; font-size: calc(10px + (14 - 10) * ((100vw - 320px) / (1200 - 320))); padding:6px 12px; border:1px solid #ccc; border-radius:4px; } body.node-type-wz-type-registered .view-menu a:hover { background-color:#f1f1f1; } ------------------------ {} BACKEND - VIEWS{} body.node-type-wz-type-backend .views-table {width:100%;margin-top:12px;} body.node-type-wz-type-backend .views-table th, body.node-type-wz-type-backend .views-table td { padding: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320))); } body.node-type-wz-type-backend .view th { background-color: #f1f1f1; } body.node-type-wz-type-backend .view td { background-color: #fff; } body.node-type-wz-type-backend .views-table { border:1px solid #ccc; border-radius:4px; } body.node-type-wz-type-backend .views-table th:first-child { border-top-left-radius: 4px; } body.node-type-wz-type-backend .view-header {margin-top:12px;} body.node-type-wz-type-backend .view-menu a { display:inline-block; font-size: calc(10px + (14 - 10) * ((100vw - 320px) / (1200 - 320))); padding:6px 12px; border:1px solid #ccc; border-radius:4px; } body.node-type-wz-type-backend .view-menu a:hover { background-color:#f1f1f1; } /* body.node-type-backend .view td:hover { background-color: #f5f5f5; } */ body.node-type-wz-type-backend .view td.active { background-color: #f5f5f5; } body.node-type-wz-type-backend .views-table td p { margin:0; padding:0; } body.node-type-wz-type-backend .view .item-list {margin-top:6px;} body.node-type-wz-type-backend h1 { font-size: calc(16px + (32 - 16) * ((100vw - 320px) / (1040 - 320))); margin-bottom: 12px; } body.node-type-backend .view-header {margin-bottom:6px;} body.node-type-wz-type-backend .view, body.node-type-wz-type-backend .view label, body.node-type-wz-type-backend .view select, body.node-type-wz-type-backend .view-header, body.node-type-wz-type-backend .views-table th a, body.node-type-wz-type-backend .views-table th, body.node-type-wz-type-backend .views-table td, body.node-type-wz-type-backend .views-table td div, body.node-type-wz-type-backend .views-table td span, body.node-type-wz-type-backend .views-table td p, body.node-type-wz-type-backend .views-table td p span, body.node-type-wz-type-backend .views-table td a, body.node-type-wz-type-backend .view ul.pager li, body.node-type-wz-type-backend .view ul.pager li a { font-size: calc(10px + (14 - 10) * ((100vw - 320px) / (1200 - 320))); } ------------------------ {} BACKEND - ADD/EDIT {} body.page-node-add .tabledrag-toggle-weight-wrapper, body.page-node-edit .tabledrag-toggle-weight-wrapper { display: none; } body.page-node-add .section > .tabs ul.primary, body.page-node-edit .section > .tabs ul.primary { margin:6px 0 0 0; } body.page-node-add .section > .tabs ul.primary li a, body.page-node-edit .section > .tabs ul.primary li a { display: inline-block; font-size: calc(10px + (14 - 10) * ((100vw - 320px) / (1200 - 320))); padding:4px; line-height:1.3em; } body.page-node-add .region, body.page-node-edit .region { width:95%; margin:0 auto; } body.page-node-add #field-page-blocks-values, body.page-node-edit #field-page-blocks-values { width:100%; } body.page-node-add .field-multiple-table, body.page-node-edit .field-multiple-table { width:100%; margin-bottom:12px; } body.page-node-add .field-multiple-table tbody, body.page-node-edit .field-multiple-table tbody { border: 1px solid #ccc; } body.page-node-add a.tabledrag-handle .handle, body.page-node-edit a.tabledrag-handle .handle { padding: 0.8em 0.5em; } body.page-node-add tr.even, body.page-node-add tr.odd, body.page-node-edit tr.even, body.page-node-edit tr.odd { background-color: #f5f5f5; } body.page-node-add #field-page-blocks-values > tbody > tr > td:nth-child(2), body.page-node-edit #field-page-blocks-values > tbody > tr > td:nth-child(2) { padding-right:24px; } body.page-node-add label, body.page-node-edit label, body.page-node-add a, body.page-node-edit a, body.page-node-add strong, body.page-node-edit strong, body.page-node-add span, body.page-node-edit span, body.page-node-add input, body.page-node-edit input, body.page-node-add textarea, body.page-node-edit textarea, body.page-node-add select, body.page-node-edit select, body.page-node-add #edit-field-page-blocks-und-0-access-info, body.page-node-edit #edit-field-page-blocks-und-0-access-info, body.page-node-add .form-wrapper, body.page-node-edit .form-wrapper, body.page-node-add .form-wrapper em, body.page-node-edit .form-wrapper em { font-size: calc(10px + (14 - 10) * ((100vw - 320px) / (1200 - 320))); } body.page-node-add input[type="submit"], body.page-node-edit input[type="submit"] { padding: 8px 12px; display: inline-block; margin: 6px; border: 1px solid #444; border-radius: 4px; background-color: #fff; } body.page-node-edit .description { font-size: calc(8px + (12 - 8) * ((100vw - 320px) / (1200 - 320))); } body.page-node-add input[type="text"], body.page-node-edit input[type="text"] { border:1px solid #ddd; border-radius:4px; padding:5px 10px; } body.page-node-add textarea, body.page-node-edit textarea { border:1px solid #ddd; /* border-radius:4px; */ padding:5px 10px; } body.page-node-add #edit-title, body.page-node-edit #edit-title { width:100%; background-color: #ffc; } body.page-node-add #edit-actions, body.page-node-edit #edit-actions { margin-bottom:0; } body.page-node-add #edit-actions input, body.page-node-edit #edit-actions input { margin-right:12px; } h2.node-add-title, h2.node-edit-title {margin-top:12px;} .wz-collapsed {display:none;} .wz-button.wz-button-style-3 { padding: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320))); padding-left: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); padding-right: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); } .wz-button-small { font-size: calc(10px + (14 - 10) * ((100vw - 320px) / (1200 - 320))); padding: calc(2px + (4 - 2) * ((100vw - 320px) / (1200 - 320))); padding-left: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); padding-right: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); margin-bottom: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320))); } .wz-button-light { color:#0054AB; font-weight:400; border: 1px solid #ccc; background-image: -webkit-linear-gradient(top,#fff 0,#fff 100%); background-image: -o-linear-gradient(top,#fff 0,#fff 100%); background-image: linear-gradient(to bottom,#fff 0,#fff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fff', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } /* hide paragraphs item add button ??? */ #edit-field-wz-page-assets-und-add-more, div[id^="edit-field-wz-page-assets-und"][id$="-access-info"], #edit-field-wz-page-teaser-und-add-more, div[id^="edit-field-wz-page-teaser-und"][id$="-access-info"] { /* display: none; */ } div.horizontal-tabs {} tr[class*="paragraphs-item-type-wz-block"] > * {padding-top:24px;background-color:#f1f1f1;} tr[class*="paragraphs-item-type-wz-block"] > td:nth-child(2) {padding-right:24px;} .horizontal-tabs-panes {padding-bottom:12px;} .field-group-htab .form-item {padding-top:12px;} .field-group-htab .form-item label { font-size: calc(10px + (13 - 10) * ((100vw - 320px) / (1200 - 320))); padding-bottom:2px; } div[id*="paragraph-bundle-title"].form-wrapper { font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1200 - 320))); } div[id*="paragraph-bundle-title"].form-wrapper em { font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1200 - 320))); font-style: normal; font-weight: 600; } .horizontal-tabs ul.horizontal-tabs-list {background-color:#f1f1f1;} .horizontal-tabs ul.horizontal-tabs-list li {background-color:#f1f1f1;} .horizontal-tabs ul.horizontal-tabs-list li.selected {background-color:#e5e5e5;} div.group-tabs-root {background-color:#e5e5e5;} .field-name-field-wz-block-name input { background-color: #ffc; } .chosen-container-single { width:auto!important; } .chosen-container-multi { width:100%!important; } .form-group {border-bottom:3px solid #999;margin-bottom:12px;} .form-group h3 span { font-size: calc(13px + (18 - 13) * ((100vw - 320px) / (1040 - 320))); font-weight:600; } input.chosen-search-input { font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1040 - 320)))!important; font-weight:400!ipmortant; } .node-wz_type_campaign-form .grippie {display: none;} .form-item .description { margin-top:12px; font-style: italic; line-height:1.1em; } /* div.messages {margin-top:130px;} */ body.page-node-add span.fa-2x, body.page-node-edit span.fa-2x { font-size: 2em; } .menu-login-form { padding-left:16px; padding-right:16px; } .menu-login-form input { width:100%; } /* login-form: modify gaps */ .menu-login-form .form-item, .menu-login-form .form-actions { margin-top:0; margin-bottom:.5em; } /* login-form: set font size of label and button text */ .menu-login-form label, .menu-login-form li a { font-size: calc(10px + (12 - 10) * ((100vw - 320px) / (1200 - 320)))!important; } /* login-form: modify link 'request new password' */ .menu-login-form .item-list ul li { list-style-type:none; margin:0; } /* registration-form: hide labels from (required) registration input fields */ .wz-form .form-item.form-type-textfield label, .wz-form .form-item.form-type-select label {display:none;} /* add/edit: hide required marker from collapsible buttons */ .field-group-format-toggler .form-required {display:none;} .align-center {text-align:center;} .center {text-align:center;} .wz-accordion .wz-accordion-label span.fa { width:calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320))); } .wz-accordion-label { cursor:pointer; } video { width:100%; } .wz-block-campaign-box2 .wz-col-wrapper, .wz-block-campaign-box3 .wz-col-wrapper, .wz-block-campaign-box4 .wz-col-wrapper { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; -webkit-box-orient: inline-axis; -moz-box-orient: inline-axis; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-justify-content: flex-start; -moz-box-justify-content: flex-start; -ms-justify-content: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; /* let flex items wrap */ -webkit-box-flex-wrap: wrap; -moz-box-flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .campaign-data-title, .campaign-macher .title { font-weight: 600; margin-bottom:calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320))); } .wz-col.campaign-data .wz-row, .wz-col.campaign-macher .wz-row { margin-bottom:calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320))); } /* .wz-col.campaign-data .campaign-data-value, .campaign-macher .text { padding-left:calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320))); } */ h1.campaign-title { color:#444; text-transform: none; font-size:calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320))); } .wz-block-campaign-box1 .wz-col img, .wz-block-campaign-box2 .wz-col img, .wz-block-campaign-box3 .wz-col img, .wz-block-campaign-box3 .wz-col video, .wz-block-campaign-box4 .wz-col img { -webkit-box-shadow: 0 2px 6px 0px #777; -moz-box-shadow: 0 2px 6px 0px #777; box-shadow: 0 2px 6px 0px #777; } /* masonry*/ .wz-masonry-item { width: 100%; } h2.teaser-title { font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1200 - 320))); } p.teaser-text { padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0; line-height:1.3em; } .wz-list-item a:hover { color:#444; } .wz-slideshow-item { width:100%; } .slider-controls-pager { z-index: 480; position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; display: block; } .slider-controls-pager > span { font-size: calc(24px + (42 - 24) * ((100vw - 320px) / (1200 - 320))); color:rgba(255,255,255,0.5); padding:0 3px; } .slider-controls-pager > span.cycle-pager-active { color:#fff; } .wz-form span.footnote { font-size: calc(8px + (12 - 8) * ((100vw - 320px) / (1200 - 320))); } .wz-form input[type="text"] { width:100%; } /* .wz-form select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; } .wz-form select::-ms-expand { display: none; } .wz-form select { width:100%; padding: 8px 8px; font-size: calc(10px + (14 - 10) * ((100vw - 320px) / (1200 - 320))); background-color:#fff; border:1px solid #ccc; border-radius:0; } */ /* ####################################################################### */ /* PAYWALL */ /* ####################################################################### */ .wz-noaccess .wz-block-format-inner { position:relative; } .wz-noaccess .wz-block-format-inner > .wz-rows:before { background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(rgba(255,255,255,0))); background-image: -webkit-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%); background-image: linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 100%); bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } /* TABLE */ .wz-block table { width:100%; } /* ####################################################################### */ /* CAMPAIGN LIST */ /* ####################################################################### */ table.user-campaign-list td { padding:6px 12px; } /* ####################################################################### */ /* DIALOG */ /* ####################################################################### */ .wz-dialog-layer { display:none; position: fixed; z-index: 510; top:0; left:0; width:100vw; height:100vh; justify-content:center; align-items:center; } .wz-dialog-data { display:none; } .wz-dialog-layer .wz-dialog { display:none; min-width:280px; background-color: #f1f1f1; padding:12px 24px; -webkit-box-shadow: 0 16px 16px rgba(0,0,0,.4); box-shadow: 0 16px 16px rgba(0,0,0,.4); border:1px solid #ccc; max-height:70vh; overflow-y:auto; } .wz-dialog-layer .wz-dialog .header { display:flex; justify-content:space-between; } .wz-dialog-layer .wz-dialog .body { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:left; } .wz-dialog-close { padding-left:12px; } .wz-dialog-width-75 { width: 75%; } .wz-dialog-search .register-form-buttons { text-align:center; } .wz-dialog-search label { display:none; } .wz-dialog-search input[type="text"] { font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1200 - 320))); padding-top: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); padding-bottom: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); padding-left: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); padding-right: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); text-align:center; } .wz-dialog-search input[type="text"]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #ddd; opacity: 1; /* Firefox */ } .wz-dialog-search input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ddd; } .wz-dialog-search input[type="text"]::-ms-input-placeholder { /* Microsoft Edge */ color: #ddd; } input:focus, select:focus, textarea:focus, button:focus { outline: none; } /* add/edit fieldset in datumsfeld modifizieren */ .field-name-field-wz-date fieldset { border:none; margin-bottom:0; } .field-name-field-wz-date fieldset legend { display:none; background:transparent !important; padding:12px 0 0 0 !important; margin:0 !important; font-weight:bold; } /* SLIDESHOW NAVIGATION */ div.cycle-prev, div.cycle-next { position: absolute; top: 0; width: 15%; opacity: 1; filter: alpha(opacity=100); z-index: 150; height: 100%; cursor: pointer; } div.cycle-prev span.fa, div.cycle-next span.fa { color:#fff; text-shadow: 0px 0px 4px #000; font-size: calc(16px + (48 - 16) * ((100vw - 320px) / (1200 - 320))); cursor:pointer; position:absolute; top:45%; } div.cycle-prev span.fa { left:24px; } div.cycle-next span.fa { right:24px; } div.cycle-prev { left:0; } div.cycle-next { right:0; } /* BUTTON STYLING */ .link.button { display: inline-block; padding: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); padding-left: calc(8px + (16 - 8) * ((100vw - 320px) / (1200 - 320))); padding-right: calc(8px + (16 - 8) * ((100vw - 320px) / (1200 - 320))); margin-bottom: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320))); border-radius: 0; cursor: pointer; } .link.button.button-style-1 { background-color: #000; border-color: #000; color: #fff; font-weight: 400; } .link.button.button-style-1:before { color: #fff; } .link.button { margin-top: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320))); margin-bottom: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320))); } .link.button-align-center, .btn-align-center { margin-left: auto; margin-right: auto; } .image-frame-10 { border:1px solid #ccc; } /* ----------------------------------------------------- MESSAGES ----------------------------------------------------- */ .wz-block-messages { margin-top:12px; } .wz-block-messages .wz-block-format-outer { border:1px solid #ccc; } .wz-block.wz-block-messages .wz-block-format-inner { padding-top:12px !important; padding-bottom:12px !important; } /* ----------------------------------------------------- CHECKBOX ----------------------------------------------------- */ div.field-checkbox { display:flex; flex-direction:row; align-items:baseline; padding:3px 0; } /* ----------------------------------------------------- CALENDAR ----------------------------------------------------- */ .wz-block-calendar .calendar-list .calendar-content { border:1px solid #999; border-bottom:none; } .wz-block-calendar .calendar-list .calendar-content > .wz-cell-inner > .wz-cell-wrapper > .wz-cell { border-bottom:1px solid #999; padding: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); } .wz-block-calendar .calendar-list > .wz-cell:first-child { border-top:none; } .wz-block-calendar .calendar-list-day-header { background-color:#EBE7D9; font-weight:600; } .wz-block-calendar .calendar-list-day-header, .wz-block-calendar .calendar-list-date { padding:12px; } /* calendar-week */ .wz-block-calendar .calendar-week .week { position: relative; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: stretch; width:100%; } .wz-block-calendar .calendar-week .week .weekday { width:13%; border-left:1px solid #999; } .wz-block-calendar .calendar-week .week .weekday.time-col { width:9%; } .wz-block-calendar .calendar-week .week .weekday > div { font-size:calc(9px + (13 - 9) * ((100vw - 320px) / (1200 - 320))); } .wz-block-calendar .calendar-week .week .weekday.time-col > div { padding:5px; } .wz-block-calendar .calendar-week .week .weekday:last-child { border-right:1px solid #999; } .wz-block-calendar .calendar-week .week .weekday.today { background-color:#f1f1f1; } .wz-block-calendar .calendar-week .week .weekday > div.weekday-header { height:24px; overflow: hidden; text-align:center; background-color:#EBE7D9; padding:6px; } .wz-block-calendar .calendar-week .week .weekday > div { position:relative; height:12px; } .wz-block-calendar .calendar-week .week .weekday > div.weekday-header, .wz-block-calendar .calendar-week .week .weekday > div.time-00 { border-top:1px solid #999; } .wz-block-calendar .calendar-week .week .weekday > div:last-child { border-bottom:1px solid #999; } .wz-block-calendar .calendar-week .week .weekday > div.time-30 { border-top:1px dotted #999; } .wz-block-calendar .calendar-week .week .weekday.time-col > div.time-30 { border-top:none; } /* calendar week date-item */ .wz-block-calendar .calendar-week .calendar-date-item { position:absolute; z-index:10; background-color:#EBE7D9; width:100%; overflow: hidden; margin-top:-1px; border-top:1px solid #999; border-bottom:1px solid #999; } .wz-block-calendar .calendar-week .calendar-date-item .date-item-time { background-color:#D3CFBF; } .wz-block-calendar .calendar-week .calendar-date-item .date-item-time, .wz-block-calendar .calendar-week .calendar-date-item .date-item-event { padding:3px; } .wz-disabled { color:#999; } /* calendar-month */ .calendar-month-day { height:120px; width:14.285714%; border-right:1px solid #999; border-bottom:1px solid #999; overflow:hidden; } .calendar-month-day.header { height:24px; width:14.285714%; background-color:#EBE7D9; border-top:1px solid #999; border-right:1px solid #999; border-bottom:1px solid #999; overflow:hidden; } .calendar-month-day.empty { background-color:#f1f1f1; } .calendar-month-day.day-1 { border-left:1px solid #999; } .calendar-month-day-title { background-color:#D3CFBF; text-align:right; padding:3px; } .wz-block-calendar .calendar-month .calendar-month-day { font-size:calc(10px + (14 - 10) * ((100vw - 320px) / (1200 - 320))); } .wz-block-calendar .calendar-month .calendar-date-item { background-color:#EBE7D9; padding:3px; white-space:nowrap; } /* ------------------------------------------------------------------------------------------------------ INLINE TEXT CENTERING ------------------------------------------------------------------------------------------------------ */ .wz-center { text-align:center; } /* ------------------------------------------------------------------------------------------------------ COLORS ------------------------------------------------------------------------------------------------------ */ .wz-color-drot { color:#660033; } .wz-color-orange { color:#fb7800; } .wz-color-grau { color:#999; } .wz-color-dgrau { color:#666; } .wz.cell.menu-logo .image-wrapper { max-width:500px; } i.button-icon-left { padding-right:4px; color: #C5D7F2; } /* ==================================================== BUTTONS ==================================================== */ .wz-button.btst-1 > .cfi > .cc { border:1px solid #ccc; border-radius:3px; background-color:#fff; color:#444; } .wz-button.btst-1:hover > .cfi > .cc { background-color:#f1f1f1; } .wz-button.btsz-sm > .cfi > .cc { padding: calc(2px + (5 - 2) * ((100vw - 320px) / (1200 - 320))); padding-left: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); padding-right: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); font-size: calc(9px + (13 - 9) * ((100vw - 320px) / (1200 - 320))); font-weight: 400; } .widget-dashboard .tile { } .wz.cell.clst-light2-skew {background-color: #f1f1f1;} .wz.cell.clst-light2-skew, .wz.cell.clst-light2-skew h1, .wz.cell.clst-light2-skew h2, .wz.cell.clst-light2-skew h3, .wz.cell.clst-light2-skew h4, .wz.cell.clst-light2-skew h5, .wz.cell.clst-light2-skew h6 {color:#333;} .wz.cell.clst-light2-skew strong, .wz.cell.clst-light2-skew p, .wz.cell.clst-light2-skew a {color:#3a3a3a;} .wz.cell.clst-light2-skew { transform: skewy(-1deg); } .wz.cell.clst-light2-skew > .ci { transform: skewy(1deg); } .wz.cell.clst-light4 { background-color: #f1f1f1; border: 1px solid #999; } a.wz.link > i { padding-right: calc(4px + (8 - 4) * ((100vw - 320px) / (1200 - 320))); } .ui-datepicker-title, .ui-datepicker-prev, .ui-datepicker-next { display:inline-block; padding: 2px 6px; } .ui-datepicker-prev, .ui-datepicker-next { border:1px solid #999; border-radius:3px; } .ui-datepicker-header { display:flex; gap: 4px; } /* STRUKTUR */ /* INITIAL SETTINGS {} SITE SETTINGS {} ============================================ XXS - TYPO {} -------------------------------------------- XXS - BLOCKS {} XXS - BLOCKS - FORMAT {} XXS - BLOCKS - STYLE {} XXS - BLOCKS - PADDING TOP {} XXS - BLOCKS - PADDING BOTTOM {} XXS - BLOCKS - PADDING SIDES {} -------------------------------------------- XXS - COLS {} XXS - COLS - DIVIDER {} XXS - COLS - WIDTH {} XXS - COLS - ALIGNMENT {} XXS - COLS - ORDER {} -------------------------------------------- XXS - GRID {} XXS - GRID - ITEM WIDTH {} XXS - GRID - GUTTER {} XXS - GRID - BORDER {} XXS - GRID - IMAGE RATIO {} XXS - GRID - ITEM WRAPPER {} XXS - GRID - ITEM {} XXS - GRID - COLUMNS {} XXS - GRID - ITEM PADDING 1-COLS {} XXS - GRID - ITEM PADDING 3-COLS {} XXS - GRID - ITEM PADDING 4-COLS {} XXS - GRID - ITEM PADDING 5-COLS {} XXS - GRID - ITEM PADDING 6-COLS {} ============================================ XS - TYPO - GRID {} -------------------------------------------- XS - COLS - DIVIDER {} XS - COLS - WIDTH {} XS - COLS - ALIGNMENT {} XS - COLS - ORDER {} -------------------------------------------- XS - GRID GUTTER {} XS - GRID - COLUMNS {} XS - GRID - ITEM WIDTH {} XS - GRID - ITEM PADDING 1-COLS {} XS - GRID - ITEM PADDING 2-COLS {} XS - GRID - ITEM PADDING 3-COLS {} XS - GRID - ITEM PADDING 4-COLS {} XS - GRID - ITEM PADDING 5-COLS {} XS - GRID - ITEM PADDING 6-COLS {} ============================================ SM - TYPO - GRID {} -------------------------------------------- SM - COLS - DIVIDER {} SM - COLS - WIDTH {} SM - COLS - ALIGNMENT {} SM - COLS - ORDER {} -------------------------------------------- SM - GRID - COLUMNS {} SM - GRID - ITEM WIDTH {} SM - GRID - ITEM PADDING 1-COLS {} SM - GRID - ITEM PADDING 2-COLS {} SM - GRID - ITEM PADDING 3-COLS {} SM - GRID - ITEM PADDING 4-COLS {} SM - GRID - ITEM PADDING 5-COLS {} SM - GRID - ITEM PADDING 6-COLS {} ============================================ MD - TYPO - GRID {} -------------------------------------------- MD - COLS - DIVIDER {} MD - COLS - WIDTH {} MD - COLS - ALIGNMENT {} MD - COLS - ORDER {} -------------------------------------------- MD - GRID - COLUMNS {} MD - GRID - ITEM WIDTH {} MD - GRID - ITEM PADDING 1-COLS {} MD - GRID - ITEM PADDING 2-COLS {} MD - GRID - ITEM PADDING 3-COLS {} MD - GRID - ITEM PADDING 4-COLS {} MD - GRID - ITEM PADDING 5-COLS {} MD - GRID - ITEM PADDING 6-COLS {} ============================================ LG - TYPO - GRID {} -------------------------------------------- LG - COLS - DIVIDER {} LG - COLS - WIDTH {} LG - COLS - ALIGNMENT {} LG - COLS - ORDER {} -------------------------------------------- LG - GRID - COLUMNS {} LG - GRID - ITEM WIDTH {} LG - GRID - ITEM PADDING 1-COLS {} LG - GRID - ITEM PADDING 2-COLS {} LG - GRID - ITEM PADDING 3-COLS {} LG - GRID - ITEM PADDING 4-COLS {} LG - GRID - ITEM PADDING 5-COLS {} LG - GRID - ITEM PADDING 6-COLS {} ============================================ XL - TYPO - GRID {} -------------------------------------------- XL - COLS - DIVIDER {} XL - COLS - WIDTH {} XL - COLS - ALIGNMENT {} XL - COLS - ORDER {} -------------------------------------------- XL - GRID - COLUMNS {} XL - GRID - ITEM WIDTH {} XL - GRID - ITEM PADDING 1-COLS {} XL - GRID ITEM PADDING 2-COLS {} XL - GRID ITEM PADDING 3-COLS {} XL - GRID ITEM PADDING 4-COLS {} XL - GRID ITEM PADDING 5-COLS {} XL - GRID ITEM PADDING 6-COLS {} ============================================ XXL - TYPO MAX {} XXL - TYPO - GRID {} -------------------------------------------- XXS - BLOCKS - PADDING MAX {} -------------------------------------------- XXL - COLS - DIVIDER {} XXL - COLS - WIDTH {} XXL - COLS - ALIGNMENT {} XXL - COLS - ORDER {} -------------------------------------------- XXL - GRID - GUTTER MAX {} XXL - GRID - COLUMNS {} XXL - GRID - ITEM WIDTH {} XXL - GRID - ITEM PADDING 1-COLS {} XXL - GRID - ITEM PADDING 2-COLS {} XXL - GRID - ITEM PADDING 3-COLS {} XXL - GRID - ITEM PADDING 4-COLS {} XXL - GRID - ITEM PADDING 5-COLS {} XXL - GRID - ITEM PADDING 6-COLS {} */ /* BLOCKBREITEN / SATZSPIEGEL */ /* Breiter Satzspiegel 1200px Normaler Satzspiegel 1020px Schmaler Satzspiegel 840px */ /* COLOR DEFINITIONS */ /* Schwarz #000000 D-Grau #333333 MD-Grau #555555 Grau #666666 H-Grau #f1f1f1 Blau #0054AB Beige #f3f0e9 Blau #004192 */ /* FONT SIZES */ /* pixel percent */ /* BREAKPOINTS */ /* ------------------------------------------------------------------------------------------------------ (320 - 1200 = ∂ 880) 0 A 320 54 B 374 130 C 450 230 D 550 368 E 688 560 F 880 880 xxs 1px - 399px xs 400px - 479px ( 80) sm 480px - 599px (120) md 600px - 719px (120) lg 720px - 879px (160) xl 880px - 1039px (160) xxl 1040px - ------------------------------------------------------------------------------------------------------ */ /* BLOCKS - FORMATE */ /* ------------------------------------------------------------------------------------------------------ full|Browserfenster 100 % narrow|schmaler Satzspiegel 840 px normal|normaler Satzspiegel 1020 px wide|breiter Satzspiegel 1200 px */ /* BLOCKS - STILE */ /* ------------------------------------------------------------------------------------------------------ 0|Hintergrund weiß, Text schwarz 10|Hintergrund beige, Text schwarz 20|Hintergrund grün, Text weiß 30|Hintergrund dunkelgrau, Text weiß */ /* ABSTÄNDE (Blocks, Rows, Columns) */ /* none|Kein Abstand xs|sehr schmal sm|Schmal md|Normal lg|Breit xl|Sehr breit none 0 (Kein Abstand) xs 12 (6) sm 24 (12) md 36 (18) lg 48 (24) xl 60 (30) ------------------------------------------------------------------------------------------------------ 000|Kein Rand 001|Normal: Oben 010|Normal: Unten 011|Normal: Oben, unten 100|Normal: Seitlich 101|Normal: Oben, seitlich 110|Normal: Unten, seitlich 111|Normal: Oben, unten, seitlich 002|Schmal: Oben 020|Schmal: Unten 022|Schmal: Oben, unten 200|Schmal: Seitlich 202|Schmal: Oben, seitlich 220|Schmal: Unten, seitlich 222|Schmal: Oben, unten, seitlich 003|Breit: Oben 030|Breit: Unten 033|Breit: Oben, unten 300|Breit: Seitlich 303|Breit: Oben, seitlich 330|Breit: Unten, seitlich 333|Breit: Oben, unten, seitlich */ /* GRID ITEM PADDING */ /* ------------------------------------------------------------------------------------------------------ Abstand 1 Spalte 2 Spalten 3 Spalten 4 Spalten 5 Spalten 6 Spalten 0,5 12 - 48 6 - 24 4 - 16 3 - 12 2 - 10 2 - 8 1,0 24 - 96 12 - 48 8 - 32 6 - 24 5 - 19 4 - 16 1,5 36 - 144 18 - 72 12 - 48 9 - 36 7 - 29 6 - 24 2,0 48 - 192 24 - 96 16 - 64 12 - 48 10 - 38 8 - 32 3,0 72 - 288 36 - 144 24 - 96 18 - 72 14 - 58 12 - 48 4,0 96 - 384 48 - 192 32 - 128 24 - 96 19 - 77 16 - 64 ------------------------------------------------------------------------------------------------------ */ /* IMAGE STYLES */ /* ------------------------------------------------------------------------------------------------------ Machine Name Name Manual Crop free_1200 Freier Ausschnitt, mind. 1200 Pixel free_800 Freier Ausschnitt, mind. 800 Pixel free_600 Freier Ausschnitt, mind. 600 Pixel free_400 Freier Ausschnitt, mind. 400 Pixel free_200 Freier Ausschnitt, mind. 200 Pixel square_600 Quadratisch, mind. 600 Pixel square_400 Quadratisch, mind. 400 Pixel square_200 Quadratisch, mind. 200 Pixel landscape_3to2_1800 landscape_3to2_1200 landscape_3to2_600 landscape_3to2_300 landscape_4to3 */ /* ####################################################################### */ /* DEPRECATED */ /* ####################################################################### */