/* 2024-10-22 20:10 @charset "UTF-8"; /* VARIABLES */ /* FUNCTIONS */ /* RESET */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 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-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; margin-bottom: 18px; } /* RULES */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix, .row, .default__content, .content__right .finder, .contact__content { zoom: 1; } .clearfix:before, .row:before, .default__content:before, .content__right .finder:before, .contact__content:before, .clearfix:after, .row:after, .default__content:after, .content__right .finder:after, .contact__content:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after, .row:after, .default__content:after, .content__right .finder:after, .contact__content:after { clear: both; } /* animation mixin */ /* ELEMENTS */ /* HTML & BODY */ html, body { height: 100%; /* min-width: 320px; */} /***/ /* EXTEND-ONLY CLASSES */ /* ALL COLUMNS */ .col-3, .col-4, .col-6, .col-7, .col-8, .col-9, .col-max, .col-3-s, .col-4-s, .col-6-s, .advanced__filters .finder-selects, .col-7-s, .col-8-s, .col-9-s, .col-max-s, .col-3-m, .col-4-m, .col-6-m, .brugerflade__content .styled__form, .brugerflade__content .contact__form, .col-7-m, .col-8-m, .col-9-m, .col-max-m, .col-3-l, .col-4-l, .col-6-l, .col-7-l, .col-8-l, .col-9-l, .col-max-l { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } /* CLASSES */ /* DEFAULT COLUMNS */ .col-3, .col-4, .col-6, .col-7, .col-8, .col-9, .col-max { float: left; } .col-3 { width: 25%; } .col-4 { width: 33.3333333333%; } .col-6 { width: 50%; } .col-7 { width: 58.3333333333%; } .col-8 { width: 66.6666666667%; } .col-9 { width: 75%; } .col-max { width: 100%; } @media all and (min-width: 767px) { .col-3-s, .col-4-s, .col-6-s, .advanced__filters .finder-selects, .col-7-s, .col-8-s, .col-9-s, .col-max-s { float: left; } .col-3-s { width: 25%; } .col-4-s { width: 33.3333333333%; } .col-6-s, .advanced__filters .finder-selects { width: 50%; } .col-7-s { width: 58.3333333333%; } .col-8-s { width: 66.6666666667%; } .col-9-s { width: 75%; } .col-max-s { width: 100%; } } @media all and (min-width: 1006px) { .col-3-m, .col-4-m, .col-6-m, .brugerflade__content .styled__form, .brugerflade__content .contact__form, .col-7-m, .col-8-m, .col-9-m, .col-max-m { float: left; } .col-3-m { width: 25%; } .col-4-m { width: 33.3333333333%; } .col-6-m, .brugerflade__content .styled__form, .brugerflade__content .contact__form { width: 50%; } .col-7-m { width: 58.3333333333%; } .col-8-m { width: 66.6666666667%; } .col-9-m { width: 75%; } .col-max-m { width: 100%; } } @media all and (min-width: 1099px) { .col-3-l, .col-4-l, .col-6-l, .col-7-l, .col-8-l, .col-9-l, .col-max-l { float: left; } .col-3-l { width: 25%; } .col-4-l { width: 33.3333333333%; } .col-6-l { width: 50%; } .col-7-l { width: 58.3333333333%; } .col-8-l { width: 66.6666666667%; } .col-9-l { width: 75%; } .col-max-l { width: 100%; } } .push-3 { left: 25%; } .pull-3 { right: 25%; } .push-4 { left: 33.3333333333%; } .pull-4 { right: 33.3333333333%; } .push-6 { left: 50%; } .pull-6 { right: 50%; } .push-7 { left: 58.3333333333%; } .pull-7 { right: 58.3333333333%; } .push-8 { left: 66.6666666667%; } .pull-8 { right: 66.6666666667%; } .push-9 { left: 75%; } .pull-9 { right: 75%; } @media all and (min-width: 767px) { .push-3-s { left: 25%; } .pull-3-s { right: 25%; } .push-4-s { left: 33.3333333333%; } .pull-4-s { right: 33.3333333333%; } .push-6-s { left: 50%; } .pull-6-s { right: 50%; } .push-7-s { left: 58.3333333333%; } .pull-7-s { right: 58.3333333333%; } .push-8-s { left: 66.6666666667%; } .pull-8-s { right: 66.6666666667%; } .push-9-s { left: 75%; } .pull-9-s { right: 75%; }} @media all and (min-width: 1006px) { .push-3-m { left: 25%; } .pull-3-m { right: 25%; } .push-4-m { left: 33.3333333333%; } .pull-4-m { right: 33.3333333333%; } .push-6-m { left: 50%; } .pull-6-m { right: 50%; } .push-7-m { left: 58.3333333333%; } .pull-7-m { right: 58.3333333333%; } .push-8-m { left: 66.6666666667%; } .pull-8-m { right: 66.6666666667%; } .push-9-m { left: 75%; } .pull-9-m { right: 75%; } } @media all and (min-width: 1099px) { .push-3-l { left: 25%; } .pull-3-l { right: 25%; } .push-4-l { left: 33.3333333333%; } .pull-4-l { right: 33.3333333333%; } .push-6-l { left: 50%; } .pull-6-l { right: 50%; } .push-7-l { left: 58.3333333333%; } .pull-7-l { right: 58.3333333333%; } .push-8-l { left: 66.6666666667%; } .pull-8-l { right: 66.6666666667%; } .push-9-l { left: 75%; } .pull-9-l { right: 75%; } } /* Home page container */ .container{ display: block; margin-left: auto; margin-right: auto; width: 100%; } @media all and (min-width: 1023px) { .container{ max-width: 1070px; width: 100%; } } /* End Home page container */ /* TEXT ALIGN */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } @media all and (min-width: 767px) { .text-left-s { text-align: left; } .text-center-s { text-align: center; } .text-right-s { text-align: right; } .text-justify-s { text-align: justify; } } @media all and (min-width: 1006px) { .text-left-m { text-align: left; } .text-center-m { text-align: center; } .text-right-m { text-align: right; } .text-justify-m { text-align: justify; } } @media all and (min-width: 1099px) { .text-left-l { text-align: left; } .text-center-l { text-align: center; } .text-right-l { text-align: right; } .text-justify-l { text-align: justify; } } html, body { -webkit-text-size-adjust: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-y: scroll; background-color: #fff; -moz-osx-font-smoothing: grayscale; } @media all and (min-width: 1006px) { body { background-color: #ebebeb; height: 100%; } } .navigation__mobile, .navigation__desktop, .main__footer { flex: none; } .wrapper { flex: 1 0 auto; padding: var(--space) var(--space) 0; width: 100%; /* padding-top: 77px; */ } @media all and (min-width: 1006px) { .wrapper { padding-top: 0; position: relative; } } .wrapper::after { content: '\00a0'; /* */ display: block; margin-top: var(--space); height: 0px; visibility: hidden; } .fix__content { display: flex; flex-direction: column; height: 100%; width: 100%; } .button, .button-dark, .desktop__accounts .menu__item.active a, .button-ghost, .dg-answer-button-container .btn, .desktop__accounts .menu__item a { font-size: 0.875em; line-height: 1em; font-family: "Open Sans", sans-serif; cursor: pointer; display: inline-block; text-align: center; border-radius: 22px; border: 0; color: #fff; background-color: #72ac51; padding: 0.750em 1.786em; text-decoration: none; font-weight: 600; -webkit-transition: 0.25s ease false; -moz-transition: 0.25s ease false false; -o-transition: 0.25s ease false false; transition: 0.25s ease; } .button--started { max-width: 200px; margin-left: auto; margin-right: auto; font-size: 16px; line-height: 42px; font-weight: 600; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 25px; display: block; } .form-horizontal .button, .styled__form .button{ font-size: 0.938em; padding-top: 0.875em; } /* Delete user account - Begin*/ .delete-account-box{ margin-top: 2em; } .delete-account-info{ display: none; } .link-btn{ color: #999999; text-decoration: none; padding: 1em 0; cursor: pointer; } .link-btn:hover{ color: #72ac51; } .delete-account-box .ext-button-cancel { display: inline-block; height: 42px; font-size: .938em; font-family: "Open Sans",sans-serif; font-weight: 600; line-height: 1em; cursor: pointer; text-align: center; border-radius: 22px; border: 0; color: #fff; background-color: #999; padding: 0.875em 1.786em 1em; text-decoration: none; margin-left: 10px; } .delete-account-box .ext-button-cancel:hover { color: #fff; background-color: #565656; } .delete-account-box .red-btn{ background-color: #db4437; } .delete-account-box .red-btn:hover{ color: white; background-color: #b7291d; } /* Delete user account - End */ .btn, .dg-answer-button-container .btn, .submit-form-button, .button { padding: 1em 1.786em; height: 42px; } .submit-form-button { width: 100%; } .default__page__content .button--started:hover { color: #fff; } /* Google and Facebook login button */ .button--red { background-color: #DB4633; } .button--blue { background-color: #3B579D; } .w100p { width: 100%; } .mb15px { margin-bottom: 15px; } .p1em { padding: 1em; } .popup-separator { color: grey; padding: 22px 0 0 0; text-align: center; font-size: 18px; } .default__page__content a.button { color: #fff; } .button:hover, .button-dark:hover, .button-ghost:hover, .dg-answer-button-container .btn:hover, .desktop__accounts .menu__item a:hover { background-color: #47752d; text-decoration: none !important; } .button--red:hover { background-color: #a53427; } .button-dark, .desktop__accounts .menu__item.active a { background-color: #47752d; } .button-dark:hover, .desktop__accounts .menu__item.active a:hover { background-color: #72ac51; } /* Standard input elements */ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], textarea, select{ -webkit-appearance: none; padding: 12px 15px; /* outline: var(--field-border-width) var(--field-border-style) var(--color-light-gray);*/ outline: var(--field-border-width) var(--field-border-style) var(--color-gray); border-radius: var(--border-radius); border: 0; background: var(--color-white); font-family: var(--font-family); font-size: var(--font-size-text); line-height: 1.375em; color: #333; box-sizing: border-box; margin-left: var(--field-border-width); } input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, textarea:hover { /* outline-color: var(--color-green);*/ outline-color: var(--color-dark-gray-2); outline-offset: 0; /* Safari */ } input[type="text"]:active, input[type="password"]:active, input[type="email"]:active, textarea:active, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { outline-width: var(--field-border-width); outline-style: var(--field-border-style); /* outline-color: var(--color-light-gray); */ outline-color: var(--color-dark-gray-2); outline-offset: 0; /* Safari */ } input[type="submit"], button { -webkit-appearance: none; padding: 15px; } /* Standard drop down selectors (replaced by the "jQuery Choosen Select" script) */ select{ width: 100%; height: 45px; margin-bottom: 25px; background-position-x: calc(100% - 18px); background-position-y: center; background-repeat: no-repeat; background-attachment: scroll; background-image: url("../images/navigate_down_opacity.png"); background-size: auto; background-origin: padding-box; background-clip: border-box; background-size: 18px !important; } select:focus, select:hover{ background-image: url("../images/navigate_up_opacity.png"); outline-color: var(--color-dark-gray-2); } /* select::after{ content: ' '; transition: transform 0.3s; width: 18px; height: 40px; display: block; margin-bottom: 25px; transition: transform 0.3s; background: red; position: absolute; top:0; left: 0; } */ /* Fix for input field of type "number" */ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } /* Custom drop down selectors */ .chosen-container-single .chosen-single { display: block; height: 45px; position: relative; border: 0; border-radius: var(--border-radius); outline-width: var(--field-border-width); outline-color: var(--color-gray); outline-style: solid; padding-top: 1px; padding-left: 15px; box-shadow: none; overflow: hidden; background: none; background-color: #fff; background-clip: padding-box; color: #444; text-decoration: none; white-space: nowrap; line-height: 36px; /* margin-left: var(--field-border-width);*/ } .chosen-container-single .chosen-single:hover { /* border-color: var(--color-green);*/ border: 0; outline-color: var(--color-dark-gray-2); } .chosen-container-single .chosen-single div { position: absolute; top: 0; right: 0; display: block; width: 18px; height: 100%; margin-right: 13px; } .chosen-container-single .chosen-single div b { background: url(../images/navigate_down.png) 50% 55% no-repeat !important; background-size: 18px !important; /* background: url("../../../media/vendor/chosen/css/chosen-sprite.png") no-repeat 0px 9px; background-size: 80px; */ transition: transform 0.3s; opacity: 0.3; } .chosen-container-active.chosen-with-drop .chosen-single div b { transform: scaleY(-1); background-position: 0 16px; } .chosen-container-single .chosen-drop { border-radius: 0; } .chosen-container-active.chosen-with-drop .chosen-single { background-image: none; outline-width: var(--field-border-width); outline-color: var(--color-dark-gray-2); outline-style: solid; border: 0; } .chosen-container { position: relative; display: inline-block; max-width: var(--field-width-article); height: 45px; vertical-align: middle; font-size: 1em; zoom: 1; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-bottom: 10px; margin-left: var(--field-border-width); } .chosen-container .chosen-drop { position: absolute; top: 100%; left: -9999px; z-index: 1010; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; outline-width: var(--field-border-width); outline-color: var(--color-dark-gray-2); outline-style: solid; background: #fff; border: 0; box-shadow: none; } .chosen-container.chosen-with-drop .chosen-drop { left: 0; outline-width: var(--field-border-width); outline-color: var(--color-dark-gray-2); outline-style: solid; border-radius: 0 0 var(--border-radius) var(--border-radius); padding-top: 5px; } .chosen-container a { cursor: pointer; } /* @end */ /* @group Single Chosen */ .chosen-container-single .chosen-default { color: #999; } .chosen-container-single .chosen-single span { display: block; overflow: hidden; margin-right: 26px; text-overflow: ellipsis; white-space: nowrap; padding-top: 4px; } .chosen-container-single .chosen-single-with-deselect span { margin-right: 38px; } .chosen-container-single .chosen-single abbr { position: absolute; top: 6px; right: 26px; display: block; width: 12px; height: 12px; background: url("../images/chosen-sprite.png") -42px 1px no-repeat; font-size: 1px; } .chosen-container-single .chosen-single abbr:hover { background-position: -42px -10px; } .chosen-container-single.chosen-disabled .chosen-single abbr:hover { background-position: -42px -10px; } .chosen-container-single .chosen-drop { margin-top: -1px; background-clip: padding-box; } /* @end */ /* @group Results */ .chosen-container .chosen-results { position: relative; max-height: 240px; padding: 0px; margin: 0 0px 4px 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: var(--color-white); } .chosen-container .chosen-results li { display: none; margin: 0; padding: 5px 6px 5px 14px; list-style: none; line-height: 20px; } .chosen-container .chosen-results li.active-result { display: list-item; cursor: pointer; } .chosen-container .chosen-results li.highlighted { background-color: var(--color-light-gray); color: var(--color-dark-gray); background-image: none; } .chosen-container .chosen-results li em { font-style: normal; text-decoration: underline; } /* @end */ /* @group Active */ .chosen-container-active .chosen-single { border:0; } .chosen-container-active.chosen-with-drop .chosen-single { /* border-width: 2px; border-style: solid; border-color: var(--color-dark-gray-2); border-bottom-width: 0; */} .chosen-container-active.chosen-with-drop .chosen-single div { border-left: none; background: transparent; } .chosen-container-active .chosen-choices { border: 1px solid #72ac51; } .chosen-container-active .chosen-choices li.search-field input[type="text"] { color: #111 !important; } /* @end */ sub, sup { /* Specified in % so that the sup/sup is the right size relative to the surrounding text */ font-size: 75%; /* Zero out the line-height so that it doesn't interfere with the positioning that follows */ line-height: 0; /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */ position: relative; /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */ vertical-align: baseline; } sup { /* Move the superscripted text up */ top: -0.4em; } sub { /* Move the subscripted text down, but only half as far down as the superscript moved up */ bottom: -0.25em; } /** ** BULLET LISTE **/ ul.liste, .homepage__content__list { list-style-type: disc; } ul.liste li, .homepage__content__list li { margin-left: 35px; line-height: 24px;} ul.liste ul li, .homepage__content__list ul li { list-style-type: circle; } ol.liste { list-style-type: decimal; } ol.liste li { margin-left: 35px; } body { font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; font-style: normal; font-weight: normal; color: #1b1b1b; } .h1, .typography h1, .homepage h1, .article__full_column h1, .content__right .finder h1 { font-size: 2.125em; line-height: 1.176em; font-weight: 800; margin-bottom: 0.441em; color: #58585a; } .h1.default__page__title { /* font-size: 2em;*/ font-size: 32px; font-weight: 400; /* margin-bottom: 0.5em;*/ margin-bottom: 0.8em; color: #333333 } .h2, .typography h2, .homepage h2, .article__full_column h2, .content__right .finder h2, .default__page__title, .contact__title { font-size: 1.5em; line-height: 1.250em; font-weight: 600; margin-bottom: 0.633em; color: #1b1b1b; } .h3, .typography h3, .article__full_column h3, .content__right .finder h3, .sidebar__menu h3, .default__page__content h2, .profile__content .styled__input__intro { font-size: 1.125em; line-height: 1.00em; font-weight: 600; margin-bottom: 1.00em; color: #1b1b1b; } .homepage h3 { font-size: 1.25em; line-height: 1.25em; font-weight: 600; margin-bottom: 0.633em; color: #1b1b1b; } .default__page__content h2.foerste { margin-top: 0; padding-top: 0 } .default__page__content h2 { font-weight: 600; color: #1b1b1b } .article__content h2 { font-weight: 600; color: #1b1b1b; font-size: 1.3em } .article__full_column h2 { font-weight: 600; color: #1b1b1b; font-size: 1.3em } .default__page__content h3, .interactive__content h3 { font-weight: 600; color: #1b1b1b } .default__page__content > h3 { margin-top: -0.75em; } .default__page__content > p + h3, .default__page__content > ul + h3 { margin-top: 0; } .default__page__content > div + h3 { margin-top: 25px; } .article__content h3 { font-weight: 600; color: #1b1b1b; font-size: 1em; margin-bottom: 0; line-height: 1.6em; } .default__page__content ul { padding-bottom: 1.125em } .default__page__content ol { padding-bottom: 1.125em } .default__page__content ul ul { padding-bottom: 0em } .default__page__content ol ul { padding-bottom: 0.5em } .default__page__content p + ol { margin-top: -1.125em } .default__page__content img + a { margin-top: 0px; display: block; } .default__page__content .main_content_audio + a { margin-top: -5px; display: block; } .default__page__content h3 + img { margin-top: 0.5em } .default__page__content img + p { margin-top: 1.1em } .default__page__content img + h3 { margin-top: 0.6em } .default__page__content .tabellen + h3 { margin-top: 2.0em } .default__page__content img + .interactive { margin-top: 1.125em } .article__content ul { padding-bottom: 1.125em } .default__page__content th { font-weight: 600; color: #333 } .article__content th { font-weight: 600; color: #333 } .default__page__content b { font-weight: 600; color: #333 } .article__content b { font-weight: 600; color: #333 } .custom .article__full_column ul { padding-bottom: 0; margin-bottom: 0 } .custom .article__full_column table { margin-bottom: 0 } .h4, .typography h4, .homepage h4, .article__full_column h4, .content__right .finder h4, .alert h4, .interactive__content h4 { font-size: 0.938em; line-height: 1.400em; font-weight: 700; margin-bottom: 0.25em; color: #333; } .p, .typography p, .homepage p, .article__full_column p, .content__right .finder p, .default__page__content p, .brugerflade__content .styled__input__intro { font-weight: 400; font-size: 1em; line-height: 1.5em; } .brugerflade__content .styled__input__intro { padding-bottom: 1.125em; } .p + .p, .typography p + p, .homepage p + p, .article__full_column p + p, .content__right .finder p + p, .interactive__content p + p { padding-top: 1.125em; } .default__page__content p + ul { margin-top: -1.125em; } .default__page__content img + h2, .default__page__content ul + h2 { margin-top: 1.125em; } .img, .typography img, .homepage img, .article__full_column img, .content__right .finder img, .default__page__content img { display: block; max-width: 100%; margin: 1.5em auto; height: auto; vertical-align: middle; } .typography img { margin: 0; } .object, .typography object, .homepage object, .article__full_column object, .content__right .finder object, .default__page__content object { max-width: 100%; } .table, .typography table, .homepage table, .article__full_column table, .content__right .finder table, .default__page__content .tabellen { display: block; overflow-x: auto; overflow-y: hidden; font-size: 1em; line-height: 1.25em; } .table th, .typography table th, .homepage table th, .article__full_column table th, .content__right .finder table th, .default__page__content .table td, .typography table td, .homepage table td, .article__full_column table td, .content__right .finder table td, .default__page__content .article__full_column table { min-height: 109px } /* 4 punkter */ table th:last-child { /*width: 50%;*/ } .table th, .table td { background-color: #fbfbfb; border: 1px solid #ebebeb; } table .thin-column{ width: 1%; min-width: 70px; } table.block {display: block!important; } i { font-style: italic; } .a, .typography a, .homepage a, .article__full_column a, .content__right .finder a, .default__page__content a, .profile .btn-small { text-decoration: none; color: #878787; transition: 0.25s ease; } .a:hover, .typography a:hover, .homepage a:hover, .article__full_column a:hover, .content__right .finder a:hover, .default__page__content a:hover, .profile .btn-small:hover { color: #72ac51; } .a:active, .typography a:active, .homepage a:active, .article__full_column a:active, .content__right .finder a:active, .default__page__content a:active, .profile .btn-small:active { /* color: #72ac51; */ } .a:focus, .typography a:focus, .homepage a:focus, .article__full_column a:focus, .content__right .finder a:focus, .default__page__content a:focus, .profile .btn-small:focus { color: #72ac51; outline: none; } .strong, strong, b, .typography strong, .homepage strong, .article__full_column strong, .content__right .finder strong, .typography b, .homepage b, .article__full_column b, .content__right .finder b { font-weight: 700; } .list, .typography ul, .homepage ul, .article__full_column ul, .content__right .finder ul, .typography ol, .homepage ol, .article__full_column ol, .content__right .finder ol { padding-left: 1.5em; margin-bottom: 1.4em; list-style-position: outside; } .ul, .typography ul, .homepage ul, .article__full_column ul, .content__right .finder ul { list-style-type: disc; } .ol, .typography ol, .homepage ol, .article__full_column ol, .content__right .finder ol { list-style-type: decimal; } .li, .typography li, .homepage li, .article__full_column li, .content__right .finder li { margin: 0.7em 0; padding-left: 0em; } .navigation__top { background-color: #fff; /* opacity: 0.97;*/ opacity: 1; height: 75px; position: relative; } .musikipedia__logo { height: 75px; width: 160px; position: absolute; top: 0; left: 15px; } @media all and (min-width: 1006px) { .musikipedia__logo { position: relative; width: 180px; left: 0; float: left; } } .musikipedia__logo__url { display: inline-block; padding: 27.5px 0; } @media all and (min-width: 1006px) { .musikipedia__logo__url { padding: 22px 0; } } .musikipedia__logo__url img { max-width: 100%; width: 100%; height: auto; } .navigation__mobile { width: 100%; border-bottom: 2px solid #d8d8d8; z-index: 100; } .navigation__mobile .desktop_nav, .navigation__mobile .profile__wrap { display: none; } @media all and (min-width: 1006px) { .navigation__mobile { position: static; } .navigation__mobile .desktop_nav, .navigation__mobile .profile__wrap { display: block; } .navigation__mobile .mobile_nav, .navigation__mobile .mobile_menu__toggle { display: none; } } @media all and (max-width: 1005px) { .menu-mobile-active .navigation__mobile { border-bottom: 0; position: static; overflow-x: hidden; } .menu-mobile-active .fix__content { position: fixed; top: 77px; } .menu-mobile-active .gmf-icondesc-box_strike, .menu-mobile-active .gmf-icondesc-box{ display: none; } .mobile_nav { /* position: absolute;*/ width: 100%; } } @media all and (min-width: 1006px) { .menu-mobile-active .fix__content { position: static; } } .mobile__tools { height: 75px; position: absolute; top: 0; right: 0; } .navigation__account { font-size: 1.500em; color: #58585a; cursor: pointer; width: 30px; height: 100%; position: absolute; right: 50px; text-align: center; } .navigation__account__icon { padding-top: 25.5px; padding-bottom: 25.5px; display: inline-block; } .navigation__account__menu { display: none; position: absolute; padding: 0px; width: 100%; left: 0; top: 75px; z-index: 1; } .navigation__account.arrow:after, .mobile__search.arrow:after { content: ""; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #72ac51; position: absolute; bottom: 0; left: 6px; } .navigation__account__menu .menu { background-color: #72ac51; } .navigation__account__menu .menu__item { border-bottom: 1px solid rgba(88, 88, 90, 0.58); text-align: center; } .mobile_menu__toggle { font-size: 1.500em; height: 100%; width: 52px; } .mobile_menu__toggle a { display: block; height: 100%; padding: 26.5px 15px; } .mobile_menu__toggle i { color: #72ac51; } .menu_toggle__open { background-image: url('../images/menu-toggle-open@2x.png'); } .menu_toggle__close { background-image: url('../images/menu-toggle-close@2x.png'); } .menu_toggle__open, .menu_toggle__close { display: inline-block; width: 25px; height: 25px; background-repeat: no-repeat; background-position: center; -moz-background-size: 25px 25px; -webkit-background-size: 25px 25px; -o-background-size: 25px 25px; background-size: 25px 25px; } .navigation__desktop { display: none; } .navigation__bottom { background-color: #72ac51; display: none; } @media all and (min-width: 1006px) { .navigation__bottom { display: block; height: 50px; } } ul.menu_main { display: flex; flex-wrap: nowrap; justify-content: space-between; /* height: 100%; */ height: 75px; } .navigation__tools { height: 75px; position: absolute; top: 0; } @media all and (min-width: 1006px) { .navigation__tools { position: relative; float: right; right: 0; } } .desktop__accounts { display: none; height: 100%; float: left; } @media all and (min-width: 1006px) { .desktop__accounts { display: block; } } .desktop__accounts .menu { padding: 20px 0; } .desktop__accounts .menu__item { margin: 0 10px; } .desktop__accounts .menu__item.active a:hover { background-color: #47752d; } .navigation__fixed { position: static; width: 100%; border-bottom: 2px solid #d8d8d8; } .mobile__menu { background-color: #72ac51; } .mobile__menu a { display: block; color: #fff; text-decoration: none; } .mobile__menu li { position: relative; } .mobile__menu a.top_level { padding-left: 15px; padding-right: 65px; } .mobile__menu a.top_level { display: block; font-weight: 400; font-size: 1.250em; line-height: 1.3em; text-decoration: none; padding-top: 0.850em; padding-bottom: 0.800em; border-bottom: 1px solid #427228; } .mobile__menu li.current a, .mobile__menu .alias-parent-active a, .mobile__menu .alias-parent-active ul.nav-child li.mobile_menu__item.current a, .mobile__menu .alias-parent-active ul.nav-child li.mobile_menu__item.active a { font-weight: 700; } .mobile__menu .alias-parent-active ul.nav-child li.mobile_menu__item a { font-weight: 400; } .mobile_menu__item .nav__icon { display: block; position: absolute; right: 0; top: 0; width: 58px; height: 60px; line-height: 60px; border-left: 1px solid #427228; border-bottom: 1px solid #427228; text-align: center; color: #fff; } .mobile__menu ul a, .mobile__menu ul .submenu__title { display: block; background: #ebebeb; font-size: 1em; line-height: 1.250em; padding-top: 1.250em; padding-bottom: 1.188em; padding-left: 30px; padding-right: 65px; text-decoration: none; color: #464646; font-weight: 400; } .mobile__menu ul .nav__icon { border-left: 0; border-bottom: 0; color: #464646; } .mobile__menu .current ul a { font-weight: 400; } .mobile__menu ul ul a, .mobile__menu ul ul .submenu__title { font-weight: 400; font-size: 0.875em; line-height: 1.286em; padding-top: 15px; padding-bottom: 15px; padding-left: 45px; padding-right: 65px; background: #fff; color: #72ac51; } .mobile__menu ul ul .nav__icon { color: #72ac51; height: 48px; line-height: 48px; } .mobile__menu .current ul ul a { font-weight: 400; } .mobile__menu ul ul ul a, .mobile__menu ul ul ul .separator { font-weight: 400; background-color: #fff; padding-left: 60px; padding-top: 10px; padding-bottom: 10px; } .mobile__menu ul ul ul .nav__icon { color: #72ac51; } .mobile__menu .current ul ul ul a { font-weight: 400; } .navigation__account__menu .menu__item a { padding-top: 1em; padding-bottom: 1em; } .navigation__account__menu .menu__item.current a, .navigation__account__menu .menu__item.active a { border-bottom: 0; } .mobile__menu { display: none; } .mobile__menu ul { display: none; } .mobile__menu ul ul { display: none; } .navigation__main { height: 50px; } .menu__item { display: block; border-bottom: 2px solid #58585a; } @media all and (min-width: 1006px) { .menu__item { display: inline-block; border-bottom: 0; margin: 0 10px; } .menu__item:last-child { margin-right: 0; } .menu__item:first-child { margin-left: 0; } } .menu__item a { display: inline-block; color: #fff; font-size: 1em; line-height: 1.25em; padding: 15px 0 3px; font-weight: 600; text-decoration: none; -webkit-transition: ease 0.25s false; -moz-transition: ease 0.25s false false; -o-transition: ease 0.25s false false; transition: ease 0.25s; } .menu__item a:hover { color: #e6e6e6; border-color: #e6e6e6; } .menu__item a.login__btn:hover { color: #fff; } .menu__item a.desktop__create:hover { color: #fff; } .menu__item a.minsideknap:hover { color: #fff; } .menu__item a.logudknap:hover { color: #fff; } .menu__item.active a { border-bottom: 2px solid; border-color: #fff; } .menu__item.active a:hover { border-color: #e6e6e6; } /***/ .navigation__left { padding-right: 5px; display: none; } @media all and (min-width: 1006px) {/***/ .navigation__left { display: block; } } .navigation__pull { /* height: 100%; */ background-color: #fff; } @media all and (min-width: 1006px) { .navigation__pull { border-radius: 4px; } } .sidebar__title { background-color: #72ac51; padding: 15px 20px; height: auto; position: relative; } @media all and (min-width: 1006px) { .sidebar__title { border-top-left-radius: 4px; border-top-right-radius: 4px; } } .sidebar__title h2, .sidebar__title span { font-size: 1.250em; line-height: 1.2em; font-weight: 600; color: #fff; } .sidebar__title a { color: #fff; text-decoration: none; -webkit-transition: ease 0.25s false; -moz-transition: ease 0.25s false false; -o-transition: ease 0.25s false false; transition: ease 0.25s; } .sidebar__title a:hover { color: #e6e6e6; } .moduletable { padding: 20px; } .sidebar__title .moduletable { padding: 0; } .sidebar__menu h3 { color: #1b1b1b; font-weight: 600; margin-bottom: 5px; } .sidebar__menu .moduletable { border-bottom: 1px solid #ebebeb; } .sidebar__menu .moduletable:last-child { border-bottom: 0; } .sidebar__item { font-size: 0.875em; line-height: 1.429em; } .sidebar__item a { color: #000; padding: 1.5px 0; text-decoration: none; display: block; -webkit-transition: ease 0.25s false; -moz-transition: ease 0.25s false false; -o-transition: ease 0.25s false false; transition: ease 0.25s; } .sidebar__item a:hover { color: #72ac51; opacity: 0.8; } .sidebar__item.active a { font-weight: 600; text-decoration: none; color: #72ac51; } .sidebar__item.active ul li a { color: #000; text-decoration: none; font-weight: 400; font-size: 1.167em; line-height: 1.429em; padding-left: 15px; } .sidebar__item.active ul li a:hover { color: #72ac51; opacity: 0.8; } .sidebar__item.active ul li.active a { font-weight: 600; text-decoration: none; color: #72ac51; } .homepage { background-color: #ebebeb; } @media all and (min-width: 0px) and (max-width: 766px) { .homepage .container{ padding-left: 0; padding-right: 0; } } .homepage .button, .homepage .button-dark, .homepage .button-ghost, .homepage .dg-answer-button-container .btn, .dg-answer-button-container .homepage .btn, .homepage .desktop__accounts .menu__item a, .desktop__accounts .menu__item .homepage a { color: #fff; font-size: 0.875em; } .login-page-forgot a { display: block; font-size: .938em; } .login-page-forgot a + a { margin-top: 15px; } .item-page .icons { display: none !important; } @media all and (min-width: 767px) { .content { padding-bottom: 30px; } } @media all and (min-width: 1006px) { .content { padding-top: 20px; } } .article__header { background-repeat: no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 130px; position: absolute; top: 75px; left: 0; } @media all and (min-width: 767px) { .article__header { height: 160px; } } @media all and (min-width: 1006px) { .article__header { top: 0; height: 240px; } } .content__pull { position: relative; padding-top: 75px; } @media all and (min-width: 767px) { .content__pull { padding-top: 95px; } } @media all and (min-width: 1006px) { .content__pull { padding-top: 20px; } } .content__pull .flex__row { display: flex; align-items: stretch; } h1.page__title { color: #333333; font-weight: 400;} @media all and (min-width: 1006px) { h1.page__title { margin-left: 25px; font-size: 2.3em; font-weight: 400; color: #333333; } } .content__pull .page__title { margin-bottom: 30px; } @media all and (min-width: 1006px) { .content__pull .page__title { margin-top: 30px; /* NY */ margin-bottom: 30px; } } .article__content__row { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; } @media all and (min-width: 767px) { .article__content__row { flex-wrap: wrap; flex-direction: row; } } .article__column + .article__column { margin-top: -20px } @media all and (min-width: 767px) { .article__column + .article__column { margin-top: 0 } .article__column { background-color: #fff; width: 50%; margin-right: 10px; margin-left: 10px; } .article__column:first-child { margin-left: 0; } .article__column:last-child { margin-right: 0; } } .article__column__box { height: 100%; padding: 15px 0; } .article__column__box p { font-size: 0.938em; line-height: 1.6em; padding-bottom: 0.6em!important} @media all and (min-width: 767px) { .article__column__box { padding: 25px 30px 14px 30px; } } @media all and (min-width: 1006px) { .article__column__box { border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 30px 30px 14px 30px; } } .article__full_column { background-color: #fff; margin-top: 20px; padding: 15px 0; } @media all and (min-width: 1006px) { .article__full_column { padding: 30px; } } .default__content.themes__content, .content__right .themes__content.finder, .themes__content.contact__content { background-color: #fff; padding: 0 0 15px 0; } .article__full_column p, .brugerflade__content .styled__input__intro, .content__right .finder p, .default__page__content p, .homepage p, .p, .typography p { line-height: 24px; padding-bottom: 18px; } @media all and (min-width:767px){ .article__full_column p, .brugerflade__content .styled__input__intro, .content__right .finder p, .default__page__content p, .homepage p,.p, .typography p{ max-width: 623px; } } .theme__image img { margin: 0; width: 100%; } .default__content .themes__page__content, .content__right .finder .themes__page__content, .contact__content .themes__page__content { padding: 0 0 15px 0; } @media all and (min-width: 767px) { .default__content .themes__page__content, .content__right .finder .themes__page__content, .contact__content .themes__page__content { padding: 0px 60px 0; } } .themes__page__content .content__section:last-child { margin-bottom: 0; } .default__content .themes__page__header, .content__right .finder .themes__page__header, .contact__content .themes__page__header { padding: 45px 0 0; } @media all and (min-width: 767px) { .default__content .themes__page__header, .content__right .finder .themes__page__header, .contact__content .themes__page__header { padding: 45px 60px 0; } } @media all and (min-width: 0px) and (max-width: 766px) { .default__content .theme__image, .content__right .finder .theme__image, .contact__content .theme__image { margin-left: -15px; margin-right: -15px; } } .alert { padding: 8px 20px; margin-bottom: 18px; margin-top: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; color: #c09853; } .alert > div { padding: 4px 0; } .close { float: right; font-size: 20px; font-weight: bold; line-height: 18px; color: #000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); } .alert .close { position: relative; top: -2px; right: -12px; line-height: 18px; } .alert h4 { margin: 0; } .alert button { padding: 0; border: 0; background-color: #fcf8e3; } .alert .alert-message { /* font-size: 0.813em; */ /* line-height: 1.385em; */ margin: 0.5em 0; } .alert a{ color: #c09853; } @media all and (min-width: 1006px) { .default__content, .content__right .finder, .contact__content { padding: 15px 75px; max-width: 100%; border-radius: 4px; } } .content__right.col-ovelser { width: 100%; background-color: #fff; padding: 30px 15px; overflow-x: auto; } @media all and (min-width: 767px) { .content__right.col-ovelser { padding: 30px; } } @media all and (min-width: 1006px) { .content__right.col-ovelser { padding: 60px; overflow-x: hidden; } } .content__right.col-ovelser td { display: block; } .default__content dt, .content__right .finder dt, .contact__content dt, .default__content dd, .content__right .finder dd, .contact__content dd { float: left; margin-right: 10px; } .default__content dt:last-child, .content__right .finder dt:last-child, .contact__content dt:last-child, .default__content dd:last-child, .content__right .finder dd:last-child, .contact__content dd:last-child { margin-right: 0; } /* Google and Facebook Login Buttons */ .login_buttons > .button { position: static; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; width: 100%; } .login_buttons > .button + .button { margin-top: 15px; } @media all and (min-width: 767px) { .login_buttons { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; } .login_buttons > .button { flex-basis: 45%; max-width: 270px; } .login_buttons > .button + .button { margin-left: 15px; margin-top: 0; } } /* End Google and Facebook Login Buttons */ .contentRow + .contentRow { margin-top: 25px; } .default__content, .content__right .finder, .contact__content { background-color: #fff; position: relative; max-width: 750px; padding-top:10px; padding-bottom:30px; margin-left: auto; margin-right: auto; } article.default__content{ padding-left:0; padding-right:0; } @media all and (min-width: 767px) { .default__content, .content__right .finder, .contact__content { padding: 30px; } article.default__content, .its_setting_page.default__content { padding: 30px 60px; } } @media all and (max-width: 766px) { /* .default__content, .content__right .finder, .contact__content { padding-left: 15px; padding-right: 15px; } */ .col-9-m{ /* padding-left: 0; padding-right: 0;*/ } } @media all and (min-width: 1006px) { .default__content, .content__right .finder, .contact__content { padding: 15px 60px; max-width: 100%; } article.default__content, .its_setting_page.default__content { padding: 15px 75px; max-width: 100%; } .wrapper-main, article.wrapper-main { max-width: 570px; } } article.default__content { padding-bottom: 60px; border-radius: 4px; } @media all and (min-width: 1006px) { article.default__content { padding-bottom: 50px; } } .default__page__header { padding-top: 15px; } @media all and (min-width: 767px) { .default__page__header { /* max-width: 75%; */ } } @media all and (min-width: 1006px) { .default__page__header { padding-top: 52px; } } .default__page__title { font-weight: 600; } .default__page__content { font-size: 0.938em; line-height: 1.467em; } /* è¡¬æ®¥î® ì¦¤. à± ã©«ï¬ 2024-07-14, ã¯§í¯¦î® éµ ã¯®âº¥ å¡«é³¼? .default__page__content div { max-width: 100%; } */ .default__page__content > div { max-width: 100%; } .default__page__content img { display: inline-block; margin: 8px 0 8px 0; height: auto; max-width: 100%; } .default__page__content table img { margin: 0; } .billedeudenmargin img { margin: 0 } .default__page__content h2 { padding-top: 20px; margin-bottom: 10px; font-size: 1.30em; font-weight: 600; } .default__page__content h2 span { color: #999999; } .default__page__content h3 span { font-weight: normal; } .contentlist { width: 100%; padding: 15px; background-color: #f8f8f8; display: inline-block; margin-top: 10px; margin-bottom: 18px; border-radius: 4px; } @media all and (min-width: 550px) { .contentlist { width: auto; min-width: 50%; padding: 19px 25px 19px 25px; } } .contentlist p { font-weight: 700; padding-bottom: 4px; } .contentlist h3 { padding-top: 4px; } .contentlist ol.menulist { color: #999999; margin-left: 34px; margin-top: 4px; padding-bottom: 0em; list-style-type: decimal; list-style-position: outside; } .contentlist ol.menulist li { margin: 0; } .default__page__content ol.menulist a { color: #1b1b1b; font-weight: 400; padding: 4px 0; display: inline-block; transition: 0.25s ease; text-decoration: none; } .default__page__content ol.menulist a:hover { color: #72ac51; } .content__section { margin-bottom: 30px; } .default__content audio, .content__right .finder audio, .contact__content audio { width: 100%; max-width: 100%; } .table__scroll { overflow-x: auto; } .profile__content .default__page__header { margin-bottom: 15px; } .profile__toolbar { position: absolute; top: 45px; right: 50px; } .profile__edit { font-size: 0.813em; line-height: 1.462em; text-decoration: none; color: #72ac51; -webkit-transition: ease 0.25s false; -moz-transition: ease 0.25s false false; -o-transition: ease 0.25s false false; transition: ease 0.25s; } .profile__edit:hover { opacity: 0.8; } .user__profile__details { border-bottom: 1px solid #ebebeb; padding-bottom: 15px; margin-bottom: 25px; } .user__profile__core h3 { margin-bottom: 5px; } .user__profile__item { padding-bottom: 15px; } .user__profile__item .title { font-weight: 600; margin-bottom: 5px; } .profile_info p + h3 { margin-top: 10px; } @media all and (min-width: 767px) { .profile__content .styled__form, .profile__content .contact__form { width: 70%; } } .profile input { border: 0; padding: 15px 10px; } .profile .popover { display: none !important; } .profile .btn-small { background-color: transparent; border: 0; outline: 0; padding: 0; margin-bottom: 25px; font-size: 0.875em; } .profile button { margin-right: 20px; } @media all and (min-width: 1006px) { .content__right .finder { padding: 60px; } } .content__right.col-brugerflade { width: 100%; } /* .brugerflade input { border: 0; height: 45px; color: #333; font-family: 'Open Sans', sans-serif; } */ .brugerflade__content { overflow: hidden; background-color: #fff; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 767px) { .brugerflade__content { padding: 30px; } } @media all and (min-width: 1006px) { .brugerflade__content { padding: 60px; } } .reset.brugerflade__content { padding: 0 30px 50px 30px } #form-login-username { margin-bottom: 15px; } #form-login-password { margin-bottom: 27px; } #form-login-forgotten { margin-top: 16px; text-align: center; } .login .registration__title { margin-bottom: 30px; } .brugerflade__content .page__header { padding-left: 15px; padding-right: 15px; margin-bottom: 10px; } .page__header h1 { margin-bottom: 0; } .registration__controls button { /* margin-top: 27px; */ /* margin-right: 20px; */ font-family: "Open Sans", sans-serif; } .styled__form, .contact__form { padding-bottom: 0px; } @media all and (min-width: 1006px) { .styled__form, .contact__form { padding-bottom: 30px; } } .ext-signup > form, .ext-login>form .p{ padding-bottom: 45px; } .ext-signup > form .p, .ext-login>form .p{ font-size: .938em; } @media all and (min-width: 1006px) { .login.brugerflade__content { padding: 60px 60px 0; } } .styled__input__field{ /* margin-bottom: 25px;*/ margin-bottom: 20px; } .styled__input__label{ display: inline-block; font-weight: 600; padding-bottom: 10px; } /* .login_form__static .styled__input__field input#password { margin-bottom: 25px; } */ .styled__input__label .spacer, .contact__form label .spacer { font-weight: 400; } .styled__input__field input, .styled__input__field textarea { width: 100%; font-size: 1em; line-height: 1.375em; margin-bottom: 5px; } .styled__input__field input::placeholder { color: #757575; } .brugerflade .popover { display: none !important; } .checkbox .custom-checkbox { top: 5px; margin-left: 5px; } .registration__text { padding-top: 60px; } @media all and (min-width: 1006px) { .registration__text { padding-top: 0; } } @media all and (min-width: 1006px) { .contact__content { padding: 60px; } } h2.contact__title { margin-bottom: 15px; padding-top: 20px; font-size: 1.30em; } .contact__title { font-weight: 600; font-size: 1.65em; } .contact__info, .contact__intro { overflow: hidden; margin-bottom: 25px; } .contact__intro p { line-height: 1.5em; padding-bottom: 0 } @media all and (min-width: 767px) { .contact__form__container { max-width: 390px; } } /* .profile-edit input { width: 100%; font-size: 1em; margin-bottom: 12px; border: 0; } */ .contact__form input { width: 100%; font-size: 1em; margin-bottom: 25px; border: 0; /* padding: 15px 0; */ } .contact__form textarea { width: 100%; font-size: 1em; margin-bottom: 25px; border: 0; padding: 15px 10px; } .control-label .text label { font-weight: 400; } .registration .control-group:first-child .control-label { margin-bottom: 20px; } .contact__form fieldset .control-group:last-child .control-label { float: left; } .contact__form fieldset .control-group:last-child .controls { float: left; padding-left: 10px; } .contact .popover { display: none !important; } .profile-edit .star { display: none } .profile-edit { padding-bottom: 30px } article.my-profile { padding-bottom: 50px } .custom-checkbox { width: 20px; height: 20px; display: inline-block; position: relative; z-index: 1; top: -1px; background-image: url("../images/checkbox_no@2x.png"); background-repeat: no-repeat; -moz-background-size: 20px; -webkit-background-size: 20px; -o-background-size: 20px; background-size: 20px; cursor: pointer; } .custom-checkbox.selected { background-image: url("../images/checkbox_yes@2x.png"); } .custom-checkbox input[type="checkbox"] { margin: 0; position: absolute; z-index: 2; cursor: pointer; outline: none; opacity: 0; /* CSS hacks for older browsers */ _noFocusLine: expression(this.hideFocus=true); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; } .main__footer { background-color: #58585a; } .footer__menu { padding-top: 0; padding-bottom: 0; overflow: hidden; float: right; text-align:left; padding-right: 15px; padding-left: 15px; } @media all and (max-width: 1005px) { .footer__menu { float: none; text-align: center; } } .footer__menu .menu__item { border-bottom: 0; display: inline-block; margin:0 15px } @media all and (min-width: 400px) { .footer__menu .menu__item { width: auto; margin:0 20px } } @media all and (min-width: 465px) { .footer__menu .menu__item { margin:0 14px } } @media all and (max-width: 766px) { .footer__menu { padding-top: 15px; padding-bottom: 15px; } } @media all and (max-width: 1005px) { .content{ background-color: #fff; } } @media all and (min-width: 1006px) { .footer__menu .menu__item { /* margin:0 18px*/ margin:0 24px } .footer__menu .menu__item:first-child { margin-left:0 } .footer__menu .menu__item:last-child { margin-right:0 } } .footer__menu .menu__item.active a, .footer__menu .menu__item.current a { border-bottom:0 } .footer__menu .menu__item a { padding: 5px 0; font-size: .813em; line-height:1.379em } @media all and (min-width: 767px) { .footer__menu .menu__item a { padding: 20px 0; font-size:.95em } } .alert-heading { padding-top: 8px } #brugerflade #system-message-container { margin-top: 0 } #brugerflade { padding-right: 18px; } /*.brugerflade .content { padding-bottom: 0 }*/ @media all and (min-width: 1006px) { #brugerflade .registrationbrugerflade { padding-left: 15px; padding-right: 15px } } @media all and (min-width: 1006px) { #brugerflade .loginbrugerflade { padding-left: 15px; padding-right: 15px } } @media all and (min-width: 1006px) { #brugerflade .reset, .reset-confirmbrugerflade { margin-left: 15px; margin-right: 15px } } .brugerformular h1 { padding-top: 40px; padding-bottom: 14px; font-size: 1.25em; line-height: 1.25em; font-weight: 600; color: #333333 } .brugerformular .homepage__content__left { padding-top: 0; padding-bottom: 0; font-size: 1em } .brugerformular .homepage__box__container { display: block; margin-top: 0; margin-bottom: 0 } .brugerformular .homepage__box__container:first-child { margin-top: 0 } .brugerformular .homepage__box { padding-top: 0; padding-bottom: 0 } .brugerformular .form-actions { margin-top: 10px; margin-bottom: 10px } @media all and (min-width: 1006px) { .brugerformular .form-actions { margin-top: 34px; margin-bottom: 0 } } .brugerformular .styled__form { padding-bottom: 0 } .brugerformular .homepage__row { padding: 0; margin: 0 } .brugerformular .homepage__row:last-child { padding-bottom: 30px } /*.brugerformular .styled__input__field input#password { margin-bottom: 25px } */ .menulist a { scroll-behavior: smooth } .venner .default__page__content { padding-bottom: 2em } @media all and (max-width: 1006px) { .sektionsside .article__content { /* margin: 0 -15px; padding-left: 15px; padding-right: 15px*/ } } .sektionsside h1 { margin-left: 0; padding-top: 30px; padding-bottom: 10px;} @media all and (min-width: 767px) { .sektionsside h1 { margin-left: 25px; padding-top: 29px; padding-bottom: 14px; } } .ovelser .row {/* padding-left: 15px; padding-right: 15px */} /***/ .fuld-bredde { background: #ededed;} .fuld-bredde .col-9-m { width: 100%; padding-left: 0; padding-right: 0 } .fuld-bredde .content { padding-top: 0; padding-bottom: 20px } @media all and (min-width: 1006px) { .kunmobil { display: none; } .desktop__accounts .menu__item a.kunmobil { display: none; } ul.menu li.item-1086, li.item-1087, li.item-1088, li.item-1089, li.item-1090 { display: none; } } span.total { color: #ac5172; } #system-message h4::first-letter { text-transform: capitalize; } #system-message-container .alert-heading{ font-size: 1.2em !important; } #system-message-container .close{ cursor:pointer; } @media (max-width: 1006px){ #system-message-container .alert-message{ margin-bottom: 0px; max-width: 690px; margin-left: auto; margin-right: auto; margin-top: 20px; } } #brugerflade .registrationbrugerflade{ padding:0px; } .brugerformular > .reset{ margin:0px !important; } .btn-group-wrap { display: flex; justify-content: flex-start; } /* Reset password form */ .ext-reset .page__header .h2 { font-size: 2em; font-weight: 400; margin-bottom: 0.5em; } .ext-reset .control-group { margin-top: 20px; } .ext-reset .control-group .controls { margin-bottom: 5px; } .ext-reset p { font-size: 0.938em; line-height: 1.6em; } .ext-reset label > .star{ display: none; } .ext-reset .small.text-muted{ margin-bottom: 5px; } .ext-reset button[type=submit] { width: 100%; } /* .ext-confirm h1 { font-size: 2em; font-weight: 400; margin-bottom: 0.5em; padding-top: 60px; padding-bottom: 0; } .ext-confirm .homepage__box__container { width: 100%; } .ext-confirm p { font-size: 0.938em; line-height: 1.5em; max-width: 100%; } .ext-confirm .controls input { padding: 0 15px; color: #333; margin-bottom: 25px; height: 45px; font-family: 'Open Sans', sans-serif; outline: 1px solid #ebebeb; width: 100%; border: 0; } .ext-confirm .styled__input__field input[type=text]:hover { outline: 1px solid #72ac51; } .ext-confirm .styled__input__field input[type=text]:focus { outline: 2px solid #72ac51; } .ext-complete { background-color: #fff; padding: 15px 60px; } .ext-complete h1 { font-size: 2em; font-weight: 400; margin-bottom: 0.5em; padding-top: 45px; padding-bottom: 0; } .ext-complete p { font-size: 0.938em; line-height: 1.6em; max-width: 100%; } .ext-complete .control-group input { padding: 0 15px; color: #333; margin-bottom: 25px; height: 45px; font-family: 'Open Sans', sans-serif; outline: 1px solid #ebebeb; width: 100%; border: 0; } .ext-complete .controls button { margin-top: 5px; margin-bottom: 75px; } .ext-complete .control-group input:hover { outline: 1px solid #72ac51; } .ext-complete .control-group input:focus { outline: 2px solid #72ac51; } */ .form-actions .ext-button-cancel { font-size: 0.938em; line-height: 1em; font-family: "Open Sans", sans-serif; cursor: pointer; display: inline-block; text-align: center; border-radius: 22px; border: 0; color: #fff; background-color: #999999; /* padding: 0.750em 1.786em; */ padding: 1em 1.786em; text-decoration: none; font-weight: 600; margin-left: 10px; } .form-actions a:hover { color: #fff; background-color: #565656; } .page-header .ext-registration-title { font-size: 2em; font-weight: 400; margin-bottom: 0.5em; } .homepage__box .homepage__box__content .homepage__content__left { padding-left: 30px; padding-right: 30px; max-width: 750px; } .pretext .ext-login-title { font-size: 1.25em; } .register-title h2 { font-size: 1.3em; } .navigation__lang .lang-menu:before { top: -10px; right: 55px; } .container .default__content .profile-edit { padding-bottom: 53px; padding-right: 3px; } .homepage__box .homepage__box__content .page-header .registration__title { font-size: 2em; font-weight: 400; margin-bottom: 0.5em; padding-top: 60px; } @media all and (max-width: 1006px) { .homepage__box .homepage__box__content .page-header .registration__title { font-size: 2em; font-weight: 400; padding-top: 45px; padding-bottom: 16px; margin-bottom: 0; } .loginbrugerflade .homepage__box__content .homepage__content__left { padding: 0 15px; } .homepage__box .homepage__box__content .homepage__content__left { padding-left: 15px; padding-right: 15px; } .homepage__box__container .homepage__box .homepage__content__left label { font-size: 15.008px; line-height: 22.0167px; } } @media all and (min-width: 992px) { #brugerflade div.registrationbrugerflade { padding-left: 15px; padding-right: 15px; } .navigation__lang .lang-menu:before { right: 60px; } } .loginbrugerflade a.glemtlink { line-height: 19px; } .homepage__content__left div.registration__controls { margin-top: 4px; margin-bottom: 30px; } .ext-reset .reset .page__header h1.registration__title { padding-top: 45px; padding-bottom: 0px; } .ext-reset p.styled__input__intro { line-height: 1.5em; } .ext-reset .reset .res-submit-but { margin-bottom: 75px; } .confirm-submit-button { padding-bottom: 60px; } .ext-confirm .styled__input__label { font-size: 15.008px; font-weight: 600; line-height: 22.0167px; } .ext-confirm-text, .ext-complete-text { margin-bottom: 20px; } .ext-complete-label { font-size: 15.008px; font-weight: 600; line-height: 22.0167px; } @media all and (max-width: 768px) { .homepage__box { padding-left: 0px; padding-right: 0px; } .homepage__box .homepage__box__content .homepage__content__left { padding-left: 0px; padding-right: 0px; } .container #brugerflade .registrationbrugerflade { padding-left: 0px; padding-right: 0px; } } .registrationbrugerflade #member-registration .ext-form-registration { padding-bottom: 60px; } #member-registration .contentRow { padding-bottom: 0; } .styled__form { padding-bottom: 75px; } .alert { padding: 20px; font-size: 0.938em; max-width: 750px; margin-left: auto; margin-right: auto; line-height: 24px; } @media (min-width: 767px) { .alert { max-width: 690px; } } @media (min-width: 1006px) { .alert { max-width: 100%; } } @media (max-width: 1005px) { .alert { margin-top: 16px; } } .alert-heading { padding-top: 0; } .alert .alert-heading { padding-bottom: 4px; } .alert div { padding: 0; } .alert .close { top: -5px; right: 0; } #system-message-container .alert-heading { font-size: 1em !important; } .alert .alert-message { /* line-height: 1em; */ margin: 0; /* padding: 4px 0; */ } @media (max-width: 1006px) { a[id] { position: absolute; transform: translateY(-80px); } #system-message-container .alert-message { margin-top: 0; } } .jmoddiv.jmodinside { position: initial; } /*---------------LexiconPage-----*/ /*-------Aside----------*/ /* Base*/ html { background-color: #edeaea; } /* Container */ .containerModLeft{ background-color: white; width: 200px; margin-left: 0px; } .nav.menu__left li { font-size: 14px; } /* Arrows */ .arrow{ margin-left: 5px; } /*========Content=========*/ .wrapper { /* background-color: #fff; overflow: hidden; */ } .greybg .article__column__box { padding: 15px; border-top-left-radius: 4px; border-top-right-radius: 4px; } @media (min-width: 767px) { .greybg .article__column__box { padding: 25px 30px 14px; } } @media (min-width: 1006px) { .greybg .wrapper { background-color: #ebebeb; } .greybg .article__column__box { padding: 30px 30px 14px; } } @media (min-width: 767px) { table th:last-child { /*width: auto;*/ } :not(.metronome) > table { display: table!important; width: 100%; } .billedeudenmargin table table { width: auto; } } .default__content.item-page .default__page__content h2 { padding-top: 40px; } .default__content.item-page .home-page-content h1 { font-weight: 600; } .default__content.item-page .home-page-content h2 { text-align: left; font-size: 28px; } .default__content.item-page .home-page-content h2 + p { margin-top: 15px; font-size: 15px; max-width: 520px; } .home-page-content .fuldbredde:nth-child(2) .img-container, .home-page-content .fuldbredde:nth-child(3) .img-container { display: none; } .custom-styled .fuldbredde.section .button{ color: #fff; font-size: 14px; line-height: 5px; height: 36px; } .custom-styled .fuldbredde.section:first-child .button{ font-size: 16px; line-height: 42px; height: 42px; } @media (min-width: 768px) { .home-page-content .fuldbredde:nth-child(2) .img-container, .home-page-content .fuldbredde:nth-child(3) .img-container { display: flex; } .custom-styled .fuldbredde.section{ padding-top: 25px; padding-bottom: 25px; } } .fuldbredde h2 { margin-top: -19px; } /*------*/ .date { font-size: 12px; line-height: 1.500em; padding-top: 45px; } @media (min-width: 767px) { .content { padding-bottom: 0; } } @media (min-width: 1006px) { .content .container { background: none; } .content { padding-bottom: 30px; } } .sidebar__item.active ul li a { font-size: inherit; } .ui-menu .ui-menu-item-wrapper { padding: 6px 3px 6px 14px; font-size: 14px; } /* Audio player */ .main_content_audio { margin-bottom: 30px; margin-top: 6px; } .main_content__audio audio { width: 100%; } .audioplayer { height: 2.2em; /* 40 */ color: #58585a; position: relative; z-index: 1; background: #e9e9e9; border-radius:4px; } .audioplayer-mini { width: 2.5em; /* 40 */ margin: 0 auto; } .audioplayer > div { position: absolute; } .audioplayer-playpause { width: 2.5em; /* 40 */ height: 100%; text-align: left; text-indent: -9999px; cursor: pointer; z-index: 2; top: 0; left: 0; } .audioplayer:not(.audioplayer-mini) .audioplayer-playpause { border-right: 1px solid #555; border-right-color: rgba(255, 255, 255, 0.1); } .audioplayer-mini .audioplayer-playpause { width: 100%; } .audioplayer-playpause:hover, .audioplayer-playpause:focus { background-color: #e2e2e2; border-top-left-radius: 4px; border-bottom-left-radius: 4px;} .audioplayer-playpause a { display: block; } .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a { width: 0; height: 0; border: 0.5em solid transparent; /* 8 */ border-right: none; border-left-color: #fff; content: ''; position: absolute; top: 50%; left: 56%; transform: translate(-50%, -50%); } .audioplayer-playing .audioplayer-playpause a { width: 0.75em; /* 12 */ height: 0.75em; /* 12 */ position: absolute; top: 50%; left: 50%; margin: -0.375em 0 0 -0.375em; /* 6 */ } .audioplayer-playing .audioplayer-playpause a:before, .audioplayer-playing .audioplayer-playpause a:after { width: 40%; height: 100%; background-color: #fff; content: ''; position: absolute; top: 0; } .audioplayer-playing .audioplayer-playpause a:before { left: 0; } .audioplayer-playing .audioplayer-playpause a:after { right: 0; } .audioplayer-time { width: 4.375em; /* 70 */ height: 100%; line-height: 2.2em; /* 32.5 */ text-align: center; z-index: 2; top: 0; } .audioplayer-time-current { border-left: 1px solid #111; border-left-color: rgba(0, 0, 0, 0.25); left: 2.5em; /* 40 */ } .audioplayer-time-duration { display: none; border-right: 1px solid #555; border-right-color: rgba(255, 255, 255, 0.1); right: 2.5em; /* 40 */ } .audioplayer-bar { height: 0.875em; /* 14 */ background-color: #fcfcfc; cursor: pointer; z-index: 1; top: 50%; right: 0.775em ; /* 3.275em; */ /* 110 */ left: 6.875em; /* 110 */ margin-top: -0.438em; /* 7 */ } .audioplayer-bar div { width: 0; height: 100%; position: absolute; left: 0; top: 0; } .audioplayer-bar-loaded { background-color: #fcfcfc; z-index: 1; } .audioplayer-bar-played { background: #adadad; z-index: 2; } .audioplayer *, .audioplayer *:before, .audioplayer *:after { -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease; -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease; -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease; -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease; transition: color .25s ease, background-color .25s ease, opacity .5s ease; } /* End Audio player */ /* Small audio player */ span.inline_audio { display: inline-block; width: 110px;} .small_player .audioplayer { height: 1.5em; } .small_player .audioplayer .audioplayer-playpause { height: 1.5em; width: 1.5em; } .small_player .audioplayer .audioplayer-time { line-height: 1.575em; width: 3.975em; } .small_player .audioplayer .audioplayer-bar { display: none; } .small_player .audioplayer .audioplayer-time-current { left: 1.5em; } /* End Small audio player */ /* Exercises box in lessons */ .interactive { border-radius: 4px; background-color: #f8f8f8; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding-top: 15px; padding-right: 10px; padding-bottom: 15px; padding-left: 10px; margin-bottom: 20px; } @media all and (min-width: 767px) { .interactive { flex-direction: row; align-items: center; justify-content: flex-start; } } .interactive__content h4 { font-size: 1em; line-height: 1.400em; font-weight: 700; margin-bottom: 0.25em; color: #333; } .hidden-link { color: rgb(27, 27, 27)!important; } .interactive__img { display: none; margin: 5px; min-width: 40px; } @media all and (min-width: 510px) { .interactive__img { display: block; } } .interactive__img img { margin: 4px 0 0 0; width: 40px; height: 40px; max-width: 40px; } .interactive__content { padding: 5px 5px 8px 5px; flex-grow: 1; } @media all and (min-width: 510px) { .interactive__content { padding: 5px 10px 5px 10px; } } .interactive__content p { padding-bottom: 0; margin-bottom: 0px; font-size: 1em; line-height: 20px;} .interactive.akt-interaktiv { border-left: 10px solid #f4b400; } .akt-interaktiv .interactive__content h4 span { color: #f4b400; padding-left: 2px; } /* End Exercises box in lessons */ /* Double accidental image */ .double-sharp { margin: 0!important; padding-bottom: 1px; } /* End Double accidental image */ /* Custom table design */ .tabellen th { font-weight: bold; text-align: left; background-color: #f8f8f8; padding: 1em 0.8em 1em 0.8em; border-bottom: 1px solid #E0DEDE; } .tabellen th.right{ text-align: right; } .tabellen td { padding: 1em 0.7em; border-bottom: 1px solid #ebebeb; } .default__page__content .tabellen { font-size: 0.875em; line-height: 1.429em; margin-bottom: 23px; margin-top: 10px; } .default__page__content .tabellen tr { background: #f8f8f8;} .default__page__content .tabellen td { padding: 0.8em; vertical-align: middle; } .default__page__content .tabellen td table td { border: 0; } /* End Custom table design */ /* Drop down selectors */ .chzn-container-single .chzn-single { border-radius: 0; background: none; padding: 0 15px; box-shadow: none; border-radius: 4px; } .chzn-container-single .chzn-single div { margin-right: 5px; } .chzn-container-single .chzn-single div b { background: url('../images/navigate_down.png') 50% 55% no-repeat; background-size: 14px !important; transition: transform 0.3s; } .chzn-container-active.chzn-with-drop .chzn-single div b { transform: scaleY(-1); background-position: center; } .chzn-container-single .chzn-drop { border-radius: 0; } .chzn-container-active.chzn-with-drop .chzn-single { background-image: none; } .chzn-container .chzn-drop { box-shadow: none; } .chzn-container .chzn-results { background: none; padding: 0 0 0 1px; margin: 0 1px 4px 0; max-height: 150px; } .chzn-container .chzn-results li.highlighted { color: #000; background-color: #f8f8f8; background-image: none; } .chzn-container { position: relative; display: inline-block; vertical-align: middle; font-size: 1em; zoom: 1; *display: inline; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100% !important; margin-bottom: 25px; } .chzn-container .chzn-drop { position: absolute; top: 100%; left: -9999px; z-index: 1010; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 1px solid #ebebeb; background: #fff; } .chzn-container.chzn-with-drop .chzn-drop { left: 0; border: 2px solid #72ac51; } .chzn-container a { cursor: pointer; } /* @end */ /* @group Single Chosen */ .chzn-container-single .chzn-single { position: relative; display: block; overflow: hidden; padding: 0 0 0 8px; height: 40px; border: 1px solid #ebebeb; background-color: #fff; background-clip: padding-box; color: #444; text-decoration: none; white-space: nowrap; line-height: 36px; border-radius: 4px; } .chzn-container-single .chzn-single:hover { border-color: #72ac51; } .chzn-container-single .chzn-default { color: #999; } .chzn-container-single .chzn-single span { display: block; overflow: hidden; margin-right: 26px; text-overflow: ellipsis; white-space: nowrap; } .chzn-container-single .chzn-single-with-deselect span { margin-right: 38px; } .chzn-container-single .chzn-single abbr { position: absolute; top: 6px; right: 26px; display: block; width: 12px; height: 12px; background: url("../images/chosen-sprite.png") -42px 1px no-repeat; font-size: 1px; } .chzn-container-single .chzn-single abbr:hover { background-position: -42px -10px; } .chzn-container-single.chzn-disabled .chzn-single abbr:hover { background-position: -42px -10px; } .chzn-container-single .chzn-single div { position: absolute; top: 0; right: 0; display: block; width: 18px; height: 100%; } .chzn-container-single .chzn-single div b { display: block; width: 100%; height: 100%; background: url("../images/chosen-sprite.png") no-repeat 2px 10px; } .chzn-container-single .chzn-drop { margin-top: -1px; background-clip: padding-box; } /* @end */ /* @group Results */ .chzn-container .chzn-results { position: relative; overflow-x: hidden; overflow-y: auto; /*margin: 0 4px 4px 0;*/ /*padding: 0 0 0 4px;*/ max-height: 240px; -webkit-overflow-scrolling: touch; background-color: #fff; } .chzn-container .chzn-results li { display: none; margin: 0; padding: 5px 6px; list-style: none; line-height: 20px; } .chzn-container .chzn-results li.active-result { display: list-item; cursor: pointer; } .chzn-container .chzn-results li.highlighted { background-color: #72ac51; color: #fff; } .chzn-container .chzn-results li em { font-style: normal; text-decoration: underline; } /* @end */ /* @group Active */ .chzn-container-active .chzn-single { border: 1px solid #72ac51; } .chzn-container-active.chzn-with-drop .chzn-single { border: 2px solid #72ac51; border-bottom: 0; } .chzn-container-active.chzn-with-drop .chzn-single div { border-left: none; background: transparent; } .chzn-container-active.chzn-with-drop .chzn-single div b { background-position: -16px 10px; } .chzn-container-active .chzn-choices { border: 1px solid #72ac51; } .chzn-container-active .chzn-choices li.search-field input[type="text"] { color: #111 !important; } /* @end */ /* @group Retina compatibility */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) { .chzn-container-single .chzn-single abbr, .chzn-container-single .chzn-single div b, .chzn-container-single .chzn-search input[type="text"], .chzn-container-multi .chzn-choices .search-choice .search-choice-close, .chzn-container .chzn-results-scroll-down span, .chzn-container .chzn-results-scroll-up span { background-size: 52px 37px !important; background-repeat: no-repeat !important; } } /* End Drop down selectors */ /* Interval song chart audio */ .player-song-wrap { vertical-align:middle; text-align: center; } .player-song { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; } .player-song-overlay { position: absolute; height: 100%; width: 100%; cursor: pointer; } /* End Interval song chart audio */ /* Header content (menus and more) */ .navigation__fixed { z-index: 50; } .header-content { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; /***/ padding-left: 15px; padding-right: 15px; } .header-content .musikipedia__logo, .header-content .navigation__tools, .header-content .mobile__tools { /* position: relative;*/ position: static; float: none; } .header-content .musikipedia__logo { display: table; } .header-content .musikipedia__logo .musikipedia__logo__url { display: table-cell; vertical-align: middle; padding: 0; position: relative; } .header-content .mobile__tools { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .header-content .mobile__tools > div { margin-left: 12px; position: relative; } .header-content .desktop__accounts { float: none; } .header-content nav { flex-grow: 1; padding: 0 10px 0 20px; } .header-content .navigation__tools > div { display: inline-block; vertical-align: top; } .header-content .navigation__tools > div + div { margin-left: 20px; } /* Lang (Flags) menu */ .header-content .navigation__lang { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; height: 100%; } .header-content .navigation__lang .lang_button { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; height: 100%; } .header-content .navigation__lang .lang_button .current-lang { cursor: pointer; margin-top: 3px; } .header-content .navigation__lang .lang_button .current-lang > .sprite { -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; -webkit-transform: scale(0.875); -ms-transform: scale(0.875); -o-transform: scale(0.875); transform: scale(0.875); } .header-content .navigation__lang .lang_button .current-lang:hover > .sprite { opacity: 0.7; } .header-content .navigation__lang .lang_button .current-lang .lang-name { display: none; } .header-content .navigation__lang .lang_button .current-lang .lang-arrow { -webkit-transition: transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; } .header-content .navigation__lang .lang_button .current-lang.active .lang-arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .header-content .navigation__lang .lang_button > div + div { margin-left: 10px; } .header-content .navigation__lang .lang_button .lang-name { margin-left: 5px; font-size: 14px; font-weight: 600; } .header-content .navigation__lang .lang_button .lang-arrow { background: url('../images/flags/flags.png') no-repeat; -webkit-background-size: 582%; background-size: 582%; background-position: -83px -101px; width: 18px; height: 18px; display: inline-block; } .header-content .navigation__lang .lang-menu { /* position: absolute; top: calc(100% + 0px); */ top: 70px; position: fixed; /* z-index: 3000;*/ z-index: 2; width: 100%; max-height: calc(100vh - 75px); left: 0; transition: all 0.5s; overflow: scroll; font-family: Helvetica; } .lang-open { overflow: hidden; } .header-content .navigation__lang .lang-menu .hiddenContent { height: 0; -webkit-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; overflow: hidden; background-color: #fff; } .header-content .navigation__lang .lang-menu ul { padding: 0 0 20px 0; } .header-content .navigation__lang .lang-menu ul > li { border-top: 2px solid #d8d8d8; padding: 0 5px; display: table; width: 100%; } .header-content .navigation__lang .lang-menu ul > li:last-child { border-bottom: 2px solid #d8d8d8; } .header-content .navigation__lang .lang-menu ul > li:hover .name { color: #72ac51; } .header-content .navigation__lang .lang-menu ul > li:hover .lang-flag { opacity: 0.8; } .header-content .navigation__lang .lang-menu ul > li > div, .header-content .navigation__lang .lang-menu ul > li > a { display: table; vertical-align: middle; color: #000; width: 100%; max-width: 1070px; margin: 0 auto; padding: 15px; } .header-content .navigation__lang .lang-menu ul > li > a > div { -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; } .header-content .navigation__lang .lang-menu ul > li > a:hover > div { opacity: .7; } .lang-menu ul > li > a { text-decoration: none; } .header-content .navigation__lang .lang-menu li .name { padding-left: 20px; text-transform: capitalize; display: table-cell; vertical-align: middle; -webkit-transition: color 0.4s; -o-transition: color 0.4s; transition: color 0.4s; font-size: 14px; font-weight: 400; } .header-content .profile__wrap { height: 100%; } .header-content .profile__wrap .profile__link { display: inline-block; padding: 18px 0; transition: opacity 0.25s ease; text-decoration: none; } .header-content .profile__wrap .profile__link:hover { opacity: 0.8; } .header-content .profile__wrap .profile__link img { width: 38px; height: 38px; display: inline-block; border-radius: 50%; object-fit: cover; } .username { vertical-align: 90%; color: #000; font-size: .875em; font-weight: 600; } .username + img { margin-left: 10px; } @media (min-width: 1006px) { .header-content .musikipedia__logo__url { padding: 19px 0; } .header-content .navigation__lang .lang_button .current-lang { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; margin-top: 0; } .header-content .navigation__lang .lang-menu { width: 100%; overflow-x: hidden; overflow-y: auto; } .header-content .navigation__lang .lang_button .current-lang .lang-name { display: block; } } .header-content ul.menu_main { justify-content: flex-start; } .header-content .menu_main .menu__item { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; margin: 0; } .header-content .menu_main .menu__item + .menu__item { margin-left: 11px; } .header-content .menu_main .menu__item a { color: #000; font-size: 0.875em; padding: 10px 15px; border-radius: 75px; border: 0; } .header-content .menu_main .menu__item.active a, .header-content .menu_main .menu__item.current a { background-color: #eee; } .header-content .menu_main .menu__item a:hover, .header-content .menu_main .menu__item a.active { border-color: #fff; background-color: #f0f0f0; } .header-content .menu_main .menu__item a:active { background-color: #f0f0f0; } /* Fix to align the Main menu item in RU and BG */ @media screen and (max-width: 1030px) { html[lang="ru"] .header-content .menu_main .menu__item + .menu__item, html[lang="bg"] .header-content .menu_main .menu__item + .menu__item { margin-left: 0px; } } /* End Header content (menus and more) */ /* Section pages (fx /lessons) */ .article__content__row { margin: -10px; margin-bottom: 40px; } .article__column { padding: 10px; background-color: transparent; } .article__column + .article__column { padding-top: 45px; } .article__column img { width: 100%; display: table; margin-top: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .article__column__box { height: auto; background-color: #fff; } @media (min-width: 767px) { .article__column { margin-left: 0; margin-right: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .article__column .article__column__box { flex-grow: 1; } .article__column + .article__column { padding-top: 10px; } } @media (min-width: 1006px) { .article__content__row { margin-bottom: -10px; } .header-content .menu_main .menu__item.item-1201 { display: none; } } /* End Section pages (fx /lessons) */ /* Mobile menu */ .mobile_menu__toggle { width: auto; } .mobile_menu__toggle a { padding-right: 0; } .fa-angle-down, .fa-angle-up { display: inline-block; width: 12px; height: 16px; background-size: contain; background-repeat: no-repeat; background-position: center; } .fa-angle-down { background-image: url('../images/arrow-down-white.png'); } .fa-angle-up { background-image: url('../images/arrow-up-white.png'); } /* End Mobile menu */ /* Flexbox ? */ .flex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .flex.wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } /* End Flexbox ? */ /* Home page custom style */ .custom-styled div {max-width: none!important;} .custom-styled .section:first-child { margin-top: 0; padding-top: 30px; } @media(min-width: 421px) { .custom-styled .section:first-child .container { margin-top: -25px; } } @media(max-width: 420px) { .custom-styled .section:first-child .container { margin-top: -60px; } } .morozov .custom-styled .section:first-child { position: relative; display: flex; align-items: center; min-height: calc(100vh - 75px); padding-top: 0; } .morozov .custom-styled .section:nth-child(3) .img-container { text-align: center; } .morozov .custom-styled .section:nth-child(3) .img-container img { max-width: 500px; } @media screen and (min-width: 768px) { .morozov .custom-styled .section:nth-child(3) .img-container img { max-width: 100%; } } .custom-styled .row { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; margin-top: -15px; margin-bottom: -15px; } .custom-styled .content-container { padding: 15px 0 25px; } .custom-styled .section:first-child .container { height: 300px; } .custom-styled .row > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px;/**/ /***/ width: 100%; } .custom-styled .default__page__content img { margin-bottom: 0; } .custom-styled .section__title { font-size: 30px; font-weight: 400; line-height: normal; } .custom-styled .section__title + * { margin-top: 35px; } .home-page-content.custom-styled .section__title { color: #565656; font-weight: 600; } .custom-styled .description { font-size: 18px; } .custom-styled .moduletable .description { font-size: 18px; max-width: 800px; margin-left: auto; margin-right: auto; margin-top: 15px; text-align: center; } @media (min-width: 768px) { .custom-styled .moduletable .description { margin-top: 35px; } } .custom-styled .section + .section{ margin-top: 30px; } .custom-styled .inlineImg { background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; } .custom-styled .img-container img { margin-bottom: 0; } @media (max-width: 767px) { .custom-styled .img-container img { width: 100% !important; height: auto !important; margin-top: 15px; } } body.morozov article.default__content { padding: 0px 0px 60px; max-width: none; } @media (min-width: 767px) { .custom-styled .row > .img-container { width: 40%; display: flex; flex-direction: column; } .custom-styled .row > .content-container { width: 54.2%; } .custom-styled .section .content-container .description { padding-bottom: 25px; } .custom-styled .order1 { -webkit-order: 1; -moz-order: 1; -ms-order: 1; -o-order: 1; order: 1; } } @media (min-width: 768px) { .custom-styled .section:nth-child(2n+3) { padding: 55px 0; } /* .custom-styled .section:nth-child(2n+2) { padding-bottom: 10px; } */ .home-page-content .section:nth-child(2n+2) .content-container { padding-left: 65px; } .home-page-content .section:nth-child(1n+2) .img-container img { margin-top: auto; margin-bottom: auto; object-fit: contain; } } @media (min-width: 1006px) { .custom-styled .section:first-child { padding-top: 70px; padding-bottom: 50px; } .custom-styled .section__title { font-size: 37px; } } /* End Home page custom style */ /* Language menu sprite images */ .sprite { display: table-cell; background: url('../images/flags/flags.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; background-size: 500%; width: 32px; height: 32px; } /* .sprite.bg { background-position: -0px -0px; } */ .sprite.zh { background-position: -32px -0px; } .sprite.vi { background-position: -64px -0px; } .sprite.da { background-position: -96px -0px; } .sprite.tw { background-position: -128px -0px; } .sprite.fr { background-position: -0px -32px; } .sprite.de { background-position: -32px -32px; } .sprite.eng { background-position: -64px -32px; } .sprite.uk { background-position: -96px -32px; } .sprite.hi { background-position: -128px -32px; } .sprite.it { background-position: -0px -64px; } .sprite.ja { background-position: -32px -64px; } .sprite.ko { background-position: -64px -64px; } .sprite.es { background-position: -96px -64px; } .sprite.pt { background-position: -128px -64px; } .sprite.pl { background-position: -0px -96px; } .sprite.id { background-position: -32px -96px; } .sprite.ru { background-position: -64px -96px; } .sprite.sv { background-position: -96px -96px; } .sprite.tr { background-position: -128px -96px; } /* End Language menu sprite images */ /* Layout for shortcuts */ .shortcut-code { background: rgba(96,105,113,0.1); padding: 3px 5px; border-radius: 3px; line-height: 2em; font-size: 0.9em; color: #555; } /* End Layout for shortcuts */ /* Not found page */ .page-not-found { font-size: 40px; font-weight: 400; display: inline-block; margin-top: 70px; } @media only screen and (max-width: 550px) { .page-not-found { font-size: 30px!important; margin-top: 10px!important; } .not-found-image { width: 180px!important; } } /* End Not found page */ /* Sign up and log in page */ .divider { position: relative; margin-top: 40px; margin-bottom: 35px; color: #b2aeae; text-align: center; } .divider:before { content: ''; position: absolute; top: 50%; display: block; height: 1px; width: 100%; background-color: #f1f1f1; } .divider span { position: relative; padding: 0 25px; background-color: #fff; font-size: .938em; } /* .form-select { width: 100%; height: 45px; margin-bottom: 25px; padding: 0 8px; text-indent: 9px; border: 0; outline: 1px solid #ebebeb; background: transparent; color: #333; font-family: 'Open Sans',sans-serif; font-size: 1em; line-height: 1.375em; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; z-index: 1; } .form-select:invalid { color: #757575; } .form-select:hover { outline: 1px solid #72ac51; } .form-select:focus { outline: 2px solid #72ac51; } */ .select__field { position: relative; } .select__field:after { content: ''; position: absolute; top: 19px; right: 60px; display: block; width: 12px; height: 9px; background-image: url('../images/angle-down.svg'); background-repeat: no-repeat; background-size: contain; opacity: .8; z-index: 10; } .info-title { position: absolute; top: 12px; right: 20px; width: 22px; height: 22px; border-radius: 50%; color: #fff; background-color: #bbb; cursor: pointer; text-align: center; font-size: 19px; font-weight: bold; line-height: 22px; z-index: 1; } .relative { position: relative; } .isParentEmail { display: none; } /* End Sign up and log in page */ /* Home page bottom menu */ .menu-secondary-wrap { position: absolute; bottom: 0; left: 0; right: 0; display: none; padding: 15px 0; background: rgba(0,0,0,.10); text-align: center; } ul.menu-secondary { display: flex; justify-content: center; padding: 0; } .menu-secondary__link { display: flex; align-items: center; } .menu-secondary__link span { color: #000000; transition: color .25s ease; } .menu-secondary__link:hover span { color: #878787; } .menu-secondary__item { min-width: 110px; padding: 5px; margin: 0 10px; font-size: 16px; } .menu-secondary__img { display: inline-block; width: 36px; height: 36px; margin-bottom: 0; margin-right: 10px; background: url(../images/home-page-menu.png) no-repeat; background-size: 317%; background-position: -39px -39px; } .menu-secondary__item:nth-child(2) .menu-secondary__img { background-position: -39px -1px; } .menu-secondary__item:nth-child(3) .menu-secondary__img { background-position: -1px -1px; } .menu-secondary__item:nth-child(4) .menu-secondary__img { background-position: -77px -1px; } .menu-secondary__item:nth-child(5) .menu-secondary__img { background-position: -1px -39px; } @media all and (min-width: 1006px) { .menu-secondary-wrap { display: block; } } /* End Home page bottom menu */ /* Tooltip (word definitions and exercise help tips) */ .tooltip { color: #282828 ; cursor: help; border-bottom:1px dashed #505050 ; } .tooltip br { display: block; margin-top: 10px; line-height: 150%; } .opentip-container, .opentip-container * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .opentip-container { position: absolute; max-width: 300px; z-index: 100; -webkit-transition: -webkit-transform 1s ease-in-out; -moz-transition: -moz-transform 1s ease-in-out; -o-transition: -o-transform 1s ease-in-out; -ms-transition: -ms-transform 1s ease-in-out; transition: transform 1s ease-in-out; pointer-events: none; -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); -o-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } .opentip-container.ot-fixed.ot-hidden.stem-top.stem-center, .opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-center, .opentip-container.ot-fixed.ot-hiding.stem-top.stem-center { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -o-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } .opentip-container.ot-fixed.ot-hidden.stem-top.stem-right, .opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-right, .opentip-container.ot-fixed.ot-hiding.stem-top.stem-right { -webkit-transform: translateY(-5px) translateX(5px); -moz-transform: translateY(-5px) translateX(5px); -o-transform: translateY(-5px) translateX(5px); -ms-transform: translateY(-5px) translateX(5px); transform: translateY(-5px) translateX(5px); } .opentip-container.ot-fixed.ot-hidden.stem-middle.stem-right, .opentip-container.ot-fixed.ot-going-to-show.stem-middle.stem-right, .opentip-container.ot-fixed.ot-hiding.stem-middle.stem-right { -webkit-transform: translateX(5px); -moz-transform: translateX(5px); -o-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-right, .opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-right, .opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-right { -webkit-transform: translateY(5px) translateX(5px); -moz-transform: translateY(5px) translateX(5px); -o-transform: translateY(5px) translateX(5px); -ms-transform: translateY(5px) translateX(5px); transform: translateY(5px) translateX(5px); } .opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-center, .opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-center, .opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-center { -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -o-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } .opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-left, .opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-left, .opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-left { -webkit-transform: translateY(5px) translateX(-5px); -moz-transform: translateY(5px) translateX(-5px); -o-transform: translateY(5px) translateX(-5px); -ms-transform: translateY(5px) translateX(-5px); transform: translateY(5px) translateX(-5px); } .opentip-container.ot-fixed.ot-hidden.stem-middle.stem-left, .opentip-container.ot-fixed.ot-going-to-show.stem-middle.stem-left, .opentip-container.ot-fixed.ot-hiding.stem-middle.stem-left { -webkit-transform: translateX(-5px); -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); } .opentip-container.ot-fixed.ot-hidden.stem-top.stem-left, .opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-left, .opentip-container.ot-fixed.ot-hiding.stem-top.stem-left { -webkit-transform: translateY(-5px) translateX(-5px); -moz-transform: translateY(-5px) translateX(-5px); -o-transform: translateY(-5px) translateX(-5px); -ms-transform: translateY(-5px) translateX(-5px); transform: translateY(-5px) translateX(-5px); } .opentip-container.ot-fixed .opentip { pointer-events: auto; } .opentip-container.ot-hidden { display: none; } .opentip-container .opentip { position: relative; font-size: 14px; line-height: 140%; padding: 12px 14px; color: #1C1C1C; } .opentip-container .opentip a { text-decoration: none; color: #999999; transition: 0.25s ease; } .opentip-container .opentip a:hover { text-decoration: underline; } .opentip-container .opentip .header { margin: 0; padding: 0; } .opentip-container .opentip .ot-close { pointer-events: auto; display: block; position: absolute; top: -12px; left: 60px; color: rgba(0,0,0,0.5); background: rgba(0,0,0,0); text-decoration: none; } .opentip-container .opentip .ot-close span { display: none; } .opentip-container .opentip .ot-loading-indicator { display: none; } .opentip-container.ot-hide-effect-fade { -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 1s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out, opacity 1s ease-in-out; -o-transition: -o-transform 0.5s ease-in-out, opacity 1s ease-in-out; -ms-transition: -ms-transform 0.5s ease-in-out, opacity 1s ease-in-out; transition: transform 0.5s ease-in-out, opacity 1s ease-in-out; opacity: 1; -ms-filter: none; filter: none; } .opentip-container.ot-hide-effect-fade.ot-hiding { opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .opentip-container.ot-show-effect-appear.ot-going-to-show, .opentip-container.ot-show-effect-appear.ot-showing { -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 1s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out, opacity 1s ease-in-out; -o-transition: -o-transform 0.5s ease-in-out, opacity 1s ease-in-out; -ms-transition: -ms-transform 0.5s ease-in-out, opacity 1s ease-in-out; transition: transform 0.5s ease-in-out, opacity 1s ease-in-out; } .opentip-container.ot-show-effect-appear.ot-going-to-show { opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .opentip-container.ot-show-effect-appear.ot-showing { opacity: 1; -ms-filter: none; filter: none; } .opentip-container.ot-show-effect-appear.ot-visible { opacity: 1; -ms-filter: none; filter: none; } .home-page-content.custom-styled .container{ max-width: 1070px !important; } @-moz-keyframes otloading { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes otloading { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes otloading { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes otloading { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes otloading { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } /* End Tooltip (word definitions and exercise help tips) */ /************###************/ .content__right.col-9-m.col-greybg{ background: #ebebeb; } @media only screen and (max-width: 1039px) { .col-3-m { width: calc(100% - 780px) !important; } .col-9-m { max-width: 100% !important; width: 780px; } } .signup-form-adv-desc{ text-align: center; font-size: 12px; margin-top: 30px; } .signup-form-adv-desc a{ text-decoration: none; color: #878787; transition: .25s ease; white-space:nowrap; } .signup-form-adv-desc a:hover{ color: #72ac51; } @media only screen and (max-width: 1005px) { .col-9-m { width: initial; } /* .content__right.col-9-m{*/ /* .content__right.col-9-m.col-greybg{ background: white; } */} @media only screen and (max-width: 767px) { .custom-styled .row { flex-wrap: wrap-reverse; } } @media only screen and (max-width: 766px) { .footer__menu { padding-top: 15px; padding-bottom: 15px; } } @media only screen and (min-width: 991px) and (max-width: 1005px) { #table__opgave { /* margin-top: 100px;*/ } } @media only screen and (max-width: 600px) { .opentip-container{ width: 250px !important; } } @media only screen and (max-width: 400px) { .opentip-container{ width: 200px !important; } } .default__content.wrapper-main .ext-login{ padding-bottom: 30px; } /* Mobile menu button */ .toggle-menu-mobile span > span{ position: absolute; height: 1px; width: 1px; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; overflow: hidden; } .header-content .navigation__lang .lang-menu{ overflow-x: hidden; } /* Password block on the Profile page */ .input-password-toggle{ display: inline-block; height: 42px; padding: 0.875em 1.786em 1em; margin-bottom: 25px; line-height: 1em; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 0.938em; cursor: pointer; border-radius: 22px; border: 0; color: #fff; background-color: #999999; text-align: center; text-decoration: none !important; transition: 0.25s ease; } .input-password-toggle:hover{ background-color: #565656; } .form-control.validate-password{ margin-bottom: 10px; } /* Central paragraph of Home page */ .custom-styled .fuldbredde:first-child .description{ font-size: 20px; max-width: 700px; margin-left: auto; margin-right: auto; margin-top: 15px; text-align: center; line-height: 1.6; } @media (min-width: 768px) { .custom-styled .description { margin-top: 35px; } } /* System notification box */ .alert-heading .visually-hidden{ /* */ font-size: 1em !important; padding-bottom: 4px; line-height: 1.400em; font-weight: 700; color: #333; } joomla-alert[type="danger"], joomla-alert[type="info"], joomla-alert[type="success"]{ padding: 20px; font-size: 0.938em; margin-left: auto; margin-right: auto; line-height: 24px; margin-bottom: 18px; margin-top: 0; background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); color: #c09853; } joomla-alert .joomla-alert--close{ font-size: 20px; font-weight: bold; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; } joomla-alert .joomla-alert--close:hover{ opacity: 0.2; } /* General paragraph */ .default__page__content p, .contact__intro p{ line-height: 24px; } /* Login page links */ a.glemtlink { color: #2b2d2e; text-decoration: none; } a.glemtlink:hover { color: #72ac51; } /* Staff paper list */ ul.staff-paper-list li { line-height: 30px!important; } /* Fix for Safari overflow */ @media (max-width: 1005px) { .menu-mobile-active .mobile__tools{ overflow: hidden !important; } } /* The main float boxes (Gamification, Schools, etc.) */ .float-box{ text-align: center; visibility: hidden; } .float-box .float-content{ position: absolute; z-index: 9; min-width: 114px; border: 2px solid #d8d8d8; border-radius: 6px; text-align: left; background: white; } .triangle, .triangle:after{ position: relative; width: 0; height: 0; z-index: 10; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #d8d8d8; } .triangle{ top: -13px; margin-top: 0; margin-left: auto; margin-right: auto; margin-bottom: -13px; } .triangle::after{ content: ' '; top: -15px; left: -7px; border-bottom-color: white; } /* Fix for the box width (start) */ /* VI */ html[lang="vi"] .adv-top-menu .float-box .triangle { left: 57px; } html[lang="vi"] .float-box .float-content { min-width: 127px; } html[lang="vi"] .adv-top-menu .float-box { left: -79px; } /* KO */ html[lang="ko"] .adv-top-menu .float-box .triangle { left: 57px; } html[lang="ko"] .float-box .float-content { min-width: 127px; } html[lang="ko"] .adv-top-menu .float-box { left: -79px; } /* ID */ html[lang="id"] .adv-top-menu .float-box .triangle { left: 64px; } html[lang="id"] .float-box .float-content { min-width: 142px; } html[lang="id"] .adv-top-menu .float-box { left: -86px; } /* RU */ html[lang="ru"] .adv-top-menu .float-box .triangle { left: 63px; } html[lang="ru"] .adv-top-menu .float-box { left: -85px; } /* IT */ html[lang="it"] .adv-top-menu .float-box .triangle { left: 61px; } html[lang="it"] .adv-top-menu .float-box { left: -83px; } /* FR */ html[lang="fr"] .adv-top-menu .float-box .triangle { left: 60px; } html[lang="fr"] .adv-top-menu .float-box { left: -82px; } /* ES */ html[lang="es"] .adv-top-menu .float-box .triangle { left: 55px; } html[lang="es"] .adv-top-menu .float-box { left: -77px; } /* Fix for the box width (end) */ /*********** NEW RULES (to test and review) *************/ .button { white-space: nowrap; } /* Leaderboard box for Exercises */ .exercises-leaderboard-box h3{ line-height: 24px; text-align: center; } .exercises-leaderboard-box p{ font-weight: 600; font-size: .875em; line-height: 1.429em; margin: 10px 0 20px 0; text-align: center; } .exercises-leaderboard-box p span{ color: #72ac51; font-weight: 600; } .exercises-leaderboard-box a{ display: block; color: gray; text-align: center; text-decoration: none; font-size: 0.8em; } .exercises-leaderboard-box a:hover{ text-decoration: underline; } /* немного изменÑет кнопки на главной Ñтранице, обÑудить Ñ Ð›ÑÑÑи. ЕÑли ОК, заменить на вÑём Ñайте @media (max-width: 450px) { .button { display: block; margin-top: 10px; } .button:first-child { margin-top: 0px; } } */ /* By Lasse request */ .large-list li { margin-top: 12px; } /** Safari */ @media not all and (min-resolution: 0.001dpcm) { input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus{ height: 45px!important; margin-left: 0 !important; padding: 12px 15px !important; border: 0!important; } } /* Top "dropdown" menu (start) */ .nav.menu_main{ /* visibility: hidden;*/ } .header-content .menu_main .menu__item:last-child > a:hover{ background: white; } .adv-top-menu > span{ display: inline-block; letter-spacing: 0.8px; color: #000; font-size: 0.875em; font-weight: 600; line-height: 1.25em; padding: 10px 15px; border: 0; text-decoration: none; cursor: pointer; } .adv-top-menu > a::after, .adv-top-menu > span::after{ content: ' '; display: inline-block; width: 10px; height: 10px; position: relative; left: 5px; background: url('../../../templates/musicca/images/navigate_down.png') center no-repeat; background-size: contain; transition: all 0.5s 1s; } .adv-top-menu .float-box{ position: relative; left: -71px; top: 1.7em; opacity: 0; margin-left: 0; padding: 0; } .adv-top-menu:hover .float-box{ opacity: 1; visibility: visible; } .adv-top-menu .float-box .triangle{ left: 49px; margin-bottom: -13px; } .adv-top-menu .float-box .float-content{ padding: 0; } .adv-top-menu .float-box a{ width: 100%; border-radius: 0 !important; padding-left: 15px !important; padding-right: 20px !important; } .adv-top-menu ul{ margin-top: 6px; margin-bottom: 6px; } @media (min-width: 1006px) { .adv-top-menu .float-box .float-content { padding-bottom: 0px; padding-top: 0px; } } .header-content .menu_main .menu__item { margin-right: 5px; } .header-content .menu_main .menu__item:first-child { margin-right: 0; margin-left: 20px; } .header-content .menu_main .menu__item a{ letter-spacing: 0.8px; } /* Top "dropdown" menu (end) */ /* New section (start) */ :root{ /* Colors */ --color-white: #fff; /* green */ --color-green: #72ac51; --color-dark-green: #47752d; /* gray */ --color-light-gray: #ebebeb; --color-gray: #d8d8d8; --color-dark-gray: #444; --color-dark-gray-2: #aeaeae; --color-main-text: #1b1b1b; --border-radius: 4px; /* Fields */ --field-border-width: 2px; --field-border-style: solid; --field-width-article: 250px; /* Fonts */ --font-size-text: 15px; --font-family: 'Open Sans', sans-serif } /* New section (end) */ /* Testimonials */ .testimonials { text-align: center; padding-top: 10px; } .testimonials-row { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; padding-bottom: 24px; } .testimonials-col { flex: 50%; max-width: 50%; box-sizing: border-box; padding: 0 15px; } .testimonials-first-col { padding-left: 0; } .testimonials-second-col { padding-right: 0; } .testimonial { background: #f8f8f8; padding: 18px 20px 12px 20px; border-radius: 4px; } .testimonial img { width: 80px; height: 80px; border-radius: 50%; } .testimonials-name { font-size: 16px; margin: 8px 0 8px 0; } .testimonials-title { font-weight: bold; padding: 0 0 10px 0; } @media screen and (max-width: 766px) { .testimonials-row { flex-direction: column; padding-bottom: 0px; } .testimonials-col { flex: 100%; max-width: 100%; padding: 0 0 20px 0; } }