/*** *************************************************************************** ***/ 
/*** COPYRIGHT © 2023 SINNIQ GMBH, MUNICH – WWW.SINNIQ.COM – ALL RIGHTS RESERVED ***/
/*** *************************************************************************** ***/
  @font-face { font-family: "FontLight"; src: url("../../source/font/HelveticaNeueLTPro-Lt.otf") format("opentype"); } @font-face { font-family: "FontRegular"; src: url("../../source/font/HelveticaNeueLTPro-Roman.otf") format("opentype"); } @font-face { font-family: "FontBold"; src: url("../../source/font/HelveticaNeueLTPro-Bd.otf") format("opentype"); } @font-face { font-family: "MaterialIcons"; src: url("../../source/font/MaterialIcons-Regular.woff") format("woff"), url("../../source/font/MaterialIcons-Regular.ttf") format("truetype"); } * { text-rendering: auto !important; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .llilliiiilll p { margin: 0.33vw; } * { box-sizing: border-box; } body { font-family: "FontLight", Helvetica, Arial, sans-serif; margin:0; padding:0; background: #fff; color: rgba(44, 44, 44, 1); } p, .llliillilili ul, .llliillilili ol { font-size: 22px; line-height: 27px; font-family: 'FontLight'; font-weight: normal; margin-bottom: 11px; } strong { font-family: 'FontRegular'; font-weight: normal; } b { font-family: 'FontBold'; font-weight: normal; } h1 { font-size: 45px; font-family: 'FontLight'; font-weight: normal; } h2 { font-size: 38px; font-family: 'FontLight'; font-weight: normal; } h3 { font-size: 32px; font-family: 'FontRegular'; font-weight: normal; margin-top: 0.5em; margin-bottom: 0.5em; } h4 { font-size: 25px; font-family: 'FontLight'; font-weight: normal; margin-top: 0.5em; margin-bottom: 0.5em; } h5 { font-size: 15px; font-family: 'FontBold'; font-weight: normal; } @media all and (max-width: 888px) { p, .llliillilili ul, .llliillilili ol { font-size: 19.5px; line-height: 24px; margin-bottom: 11px; margin-top:5px; } h1 { font-size: 40px; } h2 { font-size: 33px; } h3 { font-size: 28px; margin-bottom:11px; } h4 { font-size: 20px; } h5 { font-size: 13px; } } a: { color: rgba(197, 14, 31, 1.00); } a:link { color: rgba(197, 14, 31, 1.00); } a:visited { color: rgba(197, 14, 31, 1.00); } a:hover { color: rgba(111, 11, 11, 1.00); cursor: pointer; } a:active { color: rgba(197, 14, 31, 1.00); } .llliillilili ul { list-style-type: disc; } #liilllllilli { cursor: pointer; } #ilililiiilii { background: #f8f8f8; width: 100%; font-size: 1.2em; color: #c51a1b; z-index: 111; position: fixed; padding: 10px; } #iiilllllliii { max-width: 1720px; margin: 0 auto; height: 100%; overflow: hidden; position: relative; } .lllillllllil .llilliiiilll { display:-webkit-flex; display: flex; flex-direction: column; padding: 0; width: 100%; overflow: hidden; } .iiiillliiiil img { max-width: 100%; height: auto; } .lllillllllil .llliillilili { display: flex; padding: 0; padding-bottom: 0.44em; width: 100%; } .lllillllllil .liiiilliliil { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } .liiliiiiilil .llliillilili { width: 50%; } @media all and (max-width: 888px) { .liiliiiiilil .llliillilili { width: 100%; } } .llilliiiilll { opacity:0.1; } @keyframes iilliillliii { 0% { opacity: 0.1; } 100% { opacity: 1.0; } } .llliiiiliill { animation: iilliillliii 0.88s; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.3s; } #iiilllllliii { overflow: initial; } .lilllllliiil { background-color:black; width: 100% !important; position: sticky; top: 72px; color: #fff; z-index:2; margin-top: -6px; opacity:1; } @media all and (max-width: 888px) { .lilllllliiil { margin-top: 6px; } } .lilllllliiil a { color: #fff; text-decoration:none; } .lilllllliiil a:hover { color: #ddd; } .iliiiiiillll { background-color:black; table-layout: fixed ; width: 100% !important; border-collapse:collapse; } .iliiiiiillll tr { width: 33% !important; } .iliiiiiillll td { font-family: FontBold; width: 33% !important; text-align:center; border-right:1px solid #ddd; padding: 11px 2px 2px 1px; } .iliiiiiillll td:last-of-type { border-right:0px none; } .hambutton { padding: 6px 33px 2px 33px; margin: 0px 22px 0px 22px; text-decoration: none; word-break: keep-all; white-space: nowrap; } .redbutton, .redbutton:link,.redbutton:visited,.redbutton:hover { color:white; background:rgba(197, 14, 31, 1.00); } .redbutton:hover { background:rgba(197, 14, 31, 0.80); } .whitebutton, .whitebutton:link,.whitebutton:visited,.whitebutton:hover { color:black; background:#fff; border: 1px solid black; } .whitebutton:hover { background:#ddd; } .blackbutton, .blackbutton:link,.blackbutton:visited,.blackbutton:hover { color:white; background:#000; } .blackbutton:hover { background:#444; } .ham_youtube_wrap { width: 100%; margin: 3vw 0 3vw 0; position: relative; overflow: hidden; } .ham_youtube_wrap::after { content: ""; padding-top: 56.25%; display: block; } .ham_youtube_wrap iframe { width: 100%; height: 100%; top: 0; left: 0; position: absolute; } .ham_youtube_wrap .mce-preview-object { display: initial; margin:0px; border: none; position: revert; } lliilillliii { width: 100%; } .liilillllili { max-width: 100%; height: auto; } .llilliiiilll p { margin:0 0 0.33vw 0; } .lilliiiillii { margin: 0 22vw 0 22vw; color: rgba(44, 44, 44, 1); } .lilliiiillii p { font-family: 'FontRegular'; } @media all and (max-width: 888px) { .lilliiiillii { margin: 0vw 11vw 0vw 11vw; } } @media all and (max-width: 555px) { .lilliiiillii { margin: 2vw 3vw 2vw 3vw; } } .illiiiliiiii { margin: 5vw 6vw 2vw 6vw; } .lliilillliii { width: 100%; height: auto; cursor: pointer; } @media all and (max-width: 888px) { .illiiiliiiii img { width: calc(100% + 4vw); margin: 0vw -2vw 0vw -2vw; } } @media all and (min-width: 1111px) { .illiiiliiiii { margin: 22.8167px 34.2167px 22.8167px 34.2167px ; } } .lilliiliilli { margin: 2vw 3vw 2vw 3vw; column-gap:5.6vw; column-rule: 1px solid #ddd; } .lilliiliilli img { width: 100%; height: auto; } .lilliiliilli h3 { -webkit-column-span: all; column-span: all; } .lilliiliilli p { margin:0 0 0.33vw 0; } @media all and (max-width: 888px) { .lilliiliilli { column-count: 1; margin: 5vw 6vw 2vw 6vw; } .lilliiliilli img { width: calc(100% + 4vw); margin: 0vw -2vw 0vw -2vw; } } @media all and (min-width: 1111px) { .lilliiliilli { margin: 22.8167px 34.2167px 22.8167px 34.2167px ; } } .llilliiiilll .illiiiiliiil { font-size: 15px; width:100%; display: block; background: rgba(196, 167, 152, 0.33); margin:0; margin-top: -6px; margin-bottom: 33px; } .llilliiiilll .illiiiiliiil { padding: 8px 10px 8px 22px; } .illiiiliiiii .illiiiiliiil { padding: 8px 10px 8px 10px; } @media all and (max-width: 888px) { .illiiiiliiil { font-size: 13px; } .llilliiiilll .illiiiiliiil { padding: 8px 2vw 8px 2vw; } .illiiiliiiii .illiiiiliiil, .lilliiliilli .illiiiiliiil { width: calc(100% + 4vw); margin: -6px -2vw 7px -2vw; } } .lilliiliilli .mceTmpl { } .llliiliillil { font-family: 'FontBold'; font-size: 13px; color: white; text-transform: uppercase; margin: 0 0 0 -22px; padding: 5px 16px 5px 16px; position: relative; width: 20%; min-width: 111px; display: inline-block; text-align: center; } .llliiliillil::after { content:""; background: red; position: absolute; top: 0; left: 0; height: 6px; width: 222%; } @media all and (max-width: 666px) { .llliiliillil { margin: 0 0 0 -11px; padding: 5px 16px 5px 16px; position: relative; width: 20%; min-width: 111px; display: block; text-align: center; } } .liliililiili::first-letter { font-family: 'FontBold'; font-size: 144px; color: rgba(222,222,222, 1.0); float: left; top:0; letter-spacing: -33px; margin: 8px 44px 0 0 ; padding:0; line-height: 133px; } @media screen and (-webkit-min-device-pixel-ratio:0) { .liliililiili::first-letter { } } @media all and (max-width: 1299px) { .liliililiili::first-letter { font-size: 101px; letter-spacing: -33px; padding: 0px 0px 5px 0px; line-height: 99px; } } @media all and (max-width: 888px) { .liliililiili::first-letter { font-size: 91px; letter-spacing: -33px; padding: 0px 0px 5px 0px; line-height: 83px; } } @media all and (max-width: 500px) { .liliililiili::first-letter { font-size: 81px; letter-spacing: -33px; padding: 0px 0px 5px 0px; line-height: 66px; } } .illliilliili { display:-webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; } .illliilliili .mceTmpl { margin: 0 0.5% 2vw 0.5%; } .ililliliiill { width: 500px; height: 500px; border: 1px solid #eee; border-radius: 5px; box-shadow: 5px 10px 18px #eee; } @media all and (max-width: 1050px) { .ililliliiill { width: 400px; height: 400px; } .ililliliiill p { font-size:15px; } } @media all and (max-width: 400px) { .ililliliiill { width: 100%; height: 380px; } } .lliliilillll { height: 55%; width: 100%; vertical-align:middle; text-align:center; } .lliliilillll img { height: 100%; width: auto; } .iililiililil { height: 45%; background:rgba(0, 82, 158, 0.2); padding: 3% 5% 3% 5%; } .iililiililil h4 { margin: 0 0 0 0; } .iililiililil p { margin: 8px 0 0 0; line-height: 22px; } .liiliiiiiill { text-align: center; margin-top: -36px; } .iiiiiiliiiii { color: white; width: 33px; height: 33px; font-size: 19px; line-height: 0px; display:inline-block; text-align: center; border-radius: 17px; padding-bottom: 4px; cursor: pointer; } .lilliiliiill { background-color: rgba(0,200,0, 1.0); } .lilliiliiill:hover { background-color: rgba(0,111,0, 1.0); } .iilillliilll { background-color: rgba(200,0,0, 1.0); } .iilillliilll:hover { background-color: rgba(111,0,0, 1.0); } .illiiilillil { border-radius: 5px; padding: 33px; z-index: 89; position:fixed; top: 50%; left: 50%; width:30em; height:12em; margin-top: -9em; margin-left: -15em; border: 2px solid #ccc; background-color: #f3f3f3; box-shadow: 5px 10px 18px #bbb; display: none; text-align: center; } .illillllllli { width: 111px; height: 33px; font-size: 12px; line-height: 0px; display:inline-block; text-align: center; border-radius: 2px; cursor: pointer; } .iilillliilll { background-color: rgba(200,0,0, 1.0); color: white; } .llilillilili { background-color: rgba(0,200,0, 1.0); color:black; } .illliilillil { padding: 16px 0px 0px 0px; display: block; text-align: center; overflow: hidden; white-space: nowrap; } .iliiilliliii { border: 1px solid rgba(197, 14, 31, 1.00); width: calc(100vw - 88px); } .illllillliii { padding: 16px 0px 0px 0px; display: block; text-align: center; overflow: hidden; white-space: nowrap; } .illllillliii > span { font-family: 'FontRegular'; font-size: 24px; color: rgba(197, 14, 31, 1.00); position: relative; display: inline-block; } .illllillliii > span:before, .illllillliii > span:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 2px; background: rgba(197, 14, 31, 1.00); } .illllillliii > span:before { right: 100%; margin-right: 22px; } .illllillliii > span:after { left: 100%; margin-left: 22px; } @media all and (max-width: 1920px) { .illllillliii > span:before, .illllillliii > span:after { width: calc(50vw - 155px) } } @media all and (max-width: 960px) { .illllillliii > span { font-size: 20px; } .illllillliii { padding: 16px 0px 0px 0px; } .illllillliii > span:before, .illllillliii > span:after { width: calc(50vw - 122px) } .illllillliii > span:before { margin-right: 14px; } .illllillliii > span:after { margin-left: 14px; } } @media all and (max-width: 600px) { .illllillliii > span { font-size: 16px; } .illllillliii { padding: 14px 0px 0px 0px; } .illllillliii > span:before, .illllillliii > span:after { width: calc(50vw - 88px) } .illllillliii > span:before { margin-right: 11px; } .illllillliii > span:after { margin-left: 11px; } } #iilliiilllil { width: 100%; height:68px; background: white; z-index: 999; position: fixed; left: 0; top: 0; box-shadow: 2px 2px 4px #bbb; display: flex; x-justify-content: space-around; x-align-items: stretch; } #liiiliiliiii { padding: 11px 0 5px 0; margin: 0 2% 0 3% ; height: 68px; overflow: hidden; width: 233px; flex: 0 0 233px; flex-shrink: 0; } #liiilililiii { width:233px; margin-top: 9px; } #lliiliililll { background: pink; width:auto; } #iiliillillii { margin: 0 3% 0 0; height:68px; width: 111px; flex: 0 0 111px; flex-shrink: 0; } #lililiililii { width: 100%; height: 11px; z-index: 998; position: fixed; left: 0; top: 61px; background: #f8f8f8; } ul.llllliiillii { list-style-type: none; height:68px; padding: 0; white-space: nowrap; margin:auto; visibility:hidden; text-align:center; flex-grow: 1; } ul.llllliiillii li { display:inline-block; padding-right:4%; } ul.llllliiillii li:last-child { padding-right:0; } @media all and (min-width: 1920px) { ul.llllliiillii li { padding-right:86.7px; } } ul.llllliiillii li a { display: inline-block; font-weight: normal; font-family: 'FontRegular'; text-transform: uppercase; color: #555; text-align: center; padding: 28px 2px 5px 2px; text-decoration: none; font-size: 22px; border-bottom: 4px solid white; line-height:14px; } @media all and (max-width: 999px) { ul.llllliiillii li { } } ul.llllliiillii li.ililiilliili a { font-size: 36px; padding: 12px 33px 12px 22px; } @keyframes illiiillilli { 0% { } 100% { opacity:1; } } #iiiilllillli { font-size: 38px; margin: 11px 0 10px 6px; width: 42px; height: 42px; background: none; border: none; cursor: pointer; visibility: hidden; } #iiiilllillli::before { font-family: 'MaterialIcons' !important; color: rgba(197, 14, 31, 1.00); content: "\E894"; } #illiliiiiill { position: absolute; background:white; margin: 0px 0px 0px 0px; width: 88px; height: auto; top: 68px; cursor: pointer; border: 1px solid #bbb; border-top: none; border-radius: 0px 0px 6px 6px; box-shadow: 1px 3px 4px #bbb; opacity:0; display:none; } #illiliiiiill ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: center; } #illiliiiiill li { margin: 16px 0px 16px 0px; padding: 0px 0px 0px 0px; list-style-type: none; } #illiliiiiill li a { text-decoration: none; font-family: 'FontRegular'; } @media all and (max-width: 999px) { #iiiilllillli { right: 80px; } } .llililliilll { animation: illiiillilli 0.33s; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.1s; } #llilllliliii { color: #aaa; } #ililiililili { margin: 14px 0 3px 6px; width: 25px; height: 18px; background: none; border: none; position: absolute; right: 2.2vw; top: 50%; visibility:hidden; transform: translate(0, -50%); cursor: pointer; z-index:3; } #liiiilliilli { visibility: hidden; width: 44px; height: 44px; margin: 12px 0 3px 6px; position: absolute; top:0; right: 1vw; cursor: pointer; z-index:4 } @media all and (max-width: 999px) { #ililiililili, #liiiilliilli { } } #ililiililili span { position: absolute; top: 50%; transform: translate(0, -50%); height: 3px; border-radius: 2px; background: $primary; width: 100%; left: 0; transition: background 500ms ease; } #ililiililili span, #ililiililili span::after, #ililiililili span::before { content: ''; width: 100%; background: rgba(197, 14, 31, 1.00); height: 3px; position: absolute; top: -7px; border-radius: 2px; left: 0; transform: rotate(0); transition: top 500ms ease, bottom 500ms ease, transform 500ms ease; } #ililiililili span::after { top: auto; bottom: -7px; } #ililiililili.iiilllilliii span{ background: white; } #ililiililili.iiilllilliii span::after { bottom: 0; transform: rotate(-45deg); } #ililiililili.iiilllilliii span::before { top: 0; transform: rotate(45deg); } #lilliiillili.responsive { width:100vw; padding: 14px 0 12px 12px; background: white; position: relative; height:auto; box-shadow: 2px 2px 4px #bbb; z-index:2; } ul.llllliiillii.responsive li { float: none; display: inline; } ul.llllliiillii.responsive li a { display: block; text-align: left; padding:14px 11vw 11px 0; width:40vw; } @media all and (max-width: 999px) { #lilliiillili.responsive{ width:399px; } ul.llllliiillii.responsive li a { width:80%; } } @media all and (max-width: 400px) { #lilliiillili.responsive{ width:100%; } ul.llllliiillii.responsive li a { width:80%; } } ul.llllliiillii.responsive li.illilllllill a { } ul.llllliiillii li.illilllllill a, ul.llllliiillii li a:hover{ border-bottom: 4px solid rgba(197, 14, 31, 1.00); line-height:14px; border-radius:2px; } ul.llllliiillii li.illilllllill.iliiliiliili a, ul.llllliiillii li.iliiliiliili a:hover{ border-color: #6E6E6E; } ul.llllliiillii li.illilllllill.iliiiillllii a, ul.llllliiillii li.iliiiillllii a:hover{ border-color: #9B1932; } ul.llllliiillii li.illilllllill.iiiiililiiil a, ul.llllliiillii li.iiiiililiiil a:hover{ border-color: rgba(197, 14, 31, 1.00); } #illiillilill { position: relative; color:black; width: 100%; overflow:hidden; background: white; z-index: 5; margin-top: 0; height: 80px; border-top: 1px solid black; } #liliillillli { position: relative; width: 100%; height: 100%; max-width: 1720px; margin:0 auto 0 auto; padding:0; z-index: 5; } #iiilliliilll { width: 111px; } #llllllllllii { padding-left: 0; } #ililliilllll { width: 177px; padding-right: 0; text-align: right; } #ililliilllll img { height: 30px; } #llllllllllii a { font-family: FontRegular; color: black; font-size: 13px; text-decoration: none; white-space:nowrap; text-transform: uppercase; } #llllllllllii a:hover { color: #555; } @media all and (max-width: 1920px) { #liliillillli { margin-left: 5vw; width: calc(100% - 8vw); } } @media all and (max-width: 1720px) { #liliillillli { margin-left: 5vw; width: calc(100% - 8.8vw); } } @media all and (max-width: 1344px) { #liiiliilliil{ visibility: hidden; } #liiiliilliil:after{ visibility: visible; content: "\a"; white-space: pre; } } @media all and (max-width: 955px) { #iiilliliilll { width: 77px; } } @media all and (max-width: 888px) { #illlliiiilil{ visibility: hidden; } #illlliiiilil:after{ visibility: visible; content: "\a"; white-space: pre; } } @media all and (max-width: 766px) { #liiillliiiil{ visibility: hidden; } #liiillliiiil:after{ visibility: visible; content: "\a"; white-space: pre; } #llllllllllii a { line-height: 15px; } #illiillilill { height:133px; } #ililliilllll { width: 60px; padding-top: 5px; text-align: center; } #iliiiliillii { margin-right: 10px; } #iiiiliiiiill { margin-right: 6px; } #iillliililli { margin-right: 5px; margin-top:1px; } } @media all and (max-width: 488px) { #llllllllllii a { font-size: 11.2px; line-height: 12px; } #llllllllllii { min-width:233px; } } #llliiiliiiii { width: 100%; height:200px; background: white; z-index: 99999999999; position: fixed; left: 0; top: 0; padding-bottom: 38.6px; padding-left: 4vw; padding-right: 4vw; padding-top: 38.6px; border-top: 1px solid #d9dadf; border-bottom: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2); color:rgba(197, 14, 31, 1.00); } #llliiiliiiii .iillllilllli { width:55%; float:left; } #llliiiliiiii .iillliilllil { width:500px; padding-left: 5%; float:left; } #llliiiliiiii h3 { font-size: 1.5em; font-weight: bolder; margin: 0; text-align: left; color: #333; } #llliiiliiiii p { font-size: 15px; line-height:1.15; color: #333; margin-bottom: 0.2em; } #llliiiliiiii .lllllilillll, #llliiiliiiii .lliliiillill { white-space: nowrap; cursor: pointer; display: inline-block; font-family: "FontRegular", sans-serif; font-size: 14px; line-height: 13px; margin-bottom: 30px; padding-bottom: 11px; padding-right: 22px; padding-top: 16px; border-radius: 4px; } #llliiiliiiii .lllllilillll { background-image: linear-gradient(rgb(197, 14, 31, 1.00) 0%, rgb(221, 53, 53) 100%); color:white; } #llliiiliiiii .lliliiillill { background-color: rgba(0, 0, 0, 0); background-image: none; border-style: none; border-width: 0px; color: #444; } #llliiiliiiii .lllllilillll span, #llliiiliiiii .lliliiillill span { position: relative; margin-left: 16px; } #llliiiliiiii .liillillilil { white-space: nowrap; font-size: 15px; color: #444; outline-color: #444; margin: 0; width: 100%; text-align: center; font-family: 'FontBold'; text-decoration: underline; } #llliiiliiiii .iliiiiliiili { position: absolute; right: 0px; top: 0px; height: 1.5em; width: 1.7em; display: flex; align-items: center; justify-content: center; color:#444; text-decoration: none; font-size: 2em; } #llliiiliiiii .iliiiiliiili::before { font-family: 'MaterialIcons' !important; content: "\e5c9"; color: #bbb; text-rendering: auto !important; } #llliiiliiiii .iliiiiliiili:hover::before { color:#888; } @media all and (max-width: 1222px) { #llliiiliiiii .iillliilllil { width: 40%; padding-left: 5%; } } @media all and (max-width: 950px) { #llliiiliiiii .iillllilllli { width:65%; } #llliiiliiiii .iillliilllil { width: 30%; padding-left: 5%; } #llliiiliiiii .lllllilillll, #llliiiliiiii .lliliiillill { margin-right: 33px; margin-bottom: 15px; } } @media all and (max-width: 666px) { #llliiiliiiii { padding: 4vw; } #llliiiliiiii .iillllilllli, #llliiiliiiii .iillliilllil { width:98%; margin-bottom: 5%;text-align: center; } #llliiiliiiii { height:300px; } #llliiiliiiii h3 { text-align: center; font-size: 1.1em; } #llliiiliiiii p { text-align: center font-size: 13px; line-height:14px; } #llliiiliiiii .lllllilillll, #llliiiliiiii .lliliiillill { margin-right: 25px; margin-left: 25px; } } @media all and (max-width: 466px) { #llliiiliiiii .lllllilillll, #llliiiliiiii .lliliiillill { margin-right: 50px; margin-left: 50px; margin-bottom: 2px; } } #liliillliiil{ cursor: pointer; z-index: 1111; position:fixed; top:0; left:0; background:rgba(250,250,250,0.88); width:100%; height:100%; display: inline; } #lliiiillilii { width: 100%; z-index: 9; margin-top: 66px; overflow:hidden; padding-bottom:0px; } #liililllilii { display:block; position:relative; } #iililllliiil, #illllillilli { display:none; } #lllliiiiilii { width: 100%; box-shadow: 2px 2px 4px #bbb; } @media all and (max-width: 960px) { #lliiiillilii { } #iililllliiil { } } @media all and (max-width:700px) { #lliiiillilii { } #iililllliiil { margin: 0 -7.5vw ; } } @media all and (max-width:500px) { #lliiiillilii { } #lllliiiiilii { margin:0; } #iililllliiil { margin: 0 -15vw ; } } #lliliilliiii { height: 100%; width: 100%; top: 0; left: 0; position: absolute; padding: 0; z-index:12; opacity:1; } .illiiillilll { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .illiiillilll ul { left: 0; top: 0; } .illiiillilll li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .illiiillilll li:first-child { position: relative; display: block; float: left; } .illiiillilll img { display: block; height: auto; float: left; width: 100%; border: 0; width: 100%; box-shadow: 2px 2px 4px #bbb; } #lllliiillili{ z-index: 10; position: fixed; left: 0px; bottom: 0px; } .iilliilliill{ z-index:88; position: absolute; right: 0; height: 9vw; width: 9vw; max-height: 88px; max-width: 88px; border: 0; padding: 0.5vw; } .iilliilliill img{ margin-top: 18px; height: 100%; width: 100%; cursor: pointer; } .dropzone { background: white; border-radius: 5px; border: 2px dashed rgb(0, 135, 247); border-image: none; border-radius: 11px; max-width: 555px; margin-top:11px; margin-bottom:33px; margin-left: auto; margin-right: auto; text-rendering: optimizeLegibility; } .dz-preview{ width:111px; } @media all { #iilliiiiilii .removebutton { float:left; width:120px; height: 22px; margin-top:11px; font-size: 9pt; } #iilliiiiilii input, .renameinput { font-size: 12px; font-weight: 300; float:left; width:120px; height: 33px; margin-top:5px; text-align: center } #iilliiiiilii b { font-family: 'FontBold'; } .ui-dialog-title, #iilliiiiilii, #iilliiiiilii p, #iilliiiiilii b, #iilliiiiilii button { font-family: 'FontRegular'; } .ui-dialog-title { font-family: 'FontBold'; font-size: 16px; font-weight: normal; } .ui-dialog h4 { font-family: 'FontBold'; font-size: 16px; margin: 18px 0 0 0; } .ui-dialog p { font-family: 'FontLight'; font-size: 14px; } } .liliilliilli { margin: 0 0.1vw 0vw; padding-bottom:0; height:326px; width:100%; position: relative; text-align: center; } .lililiiilill { height:15%; background-color:white; margin: 0.5vw 1vw 0.5vw 1vw; position: relative; } .illliiliiiil { height:85%; } .llillliiilii { width: 100%; height: 100%; border:none !important; table-layout:fixed; } .llillliiilii td{ padding: 10px 7px; } .llillliiilii .ilililiillii { width: 3%; text-align: right; vertical-align: middle; margin:0; padding:0; white-space:nowrap; } #llillliiilii .iiliillliill { vertical-align: middle; padding:0; } .lliilllillil { width: 30px; height: 6vw; overflow: auto; margin: auto; top: 0; left: 0; bottom: 0; right: 0; } .lliliiiliiii { position: relative; margin: 0; } .lllilliilili { height:310px; overflow: hidden; } .lllilliilili ul { list-style: none; margin: 0; padding: 0; height: 100%; } .lllilliilili ul li { float: left; width: 310px; height: 310px; margin: 0 11px 0 0; padding: 0; color: #ddd; text-align: center; cursor: pointer; overflow: hidden; text-indent:0; } .lllilliilili ul li img { width:310px; height:310px; transition: transform .33s ease; padding: 0; margin: 0; } .lllilliilili ul li.active { color: #fff; } .lllilliilili ul li::before { content: none; } .lilililiiiil { background-color: rgba(255, 255, 255, 0.81); height: 80px; width: 250px; position:relative; top: -295px; margin-left: 38px; padding: 21px 11px 0 11px; box-sizing: initial; z-index:3; } .lilililiiiil h4 { margin:0; text-align: left; font-family: 'FontRegular'; color: rgba(44, 44, 44, 1); font-size: 20.5px; line-height: 30px; margin-bottom: 14.5px text-indent:0; font-weight:normal; } .iillillliili { background-color: rgba(255, 255, 255, 0.81); height: 143px; width: 250px; color: rgba(44, 44, 44, 1); position:relative; top: -295px; margin-left: 38px; padding: 11px 11px 0 11px; opacity: 1; box-sizing: initial; opacity:0; z-index:3; } .iillillliili p { margin:0; text-align: left; font-family: 'FontLight'; font-size: 18px; line-height: 19px; text-indent:0; } .iiilliliiiii { width:310px; height:310px; position:relative; top: -580px; margin-left: 0px; padding: 21px 11px 0 11px; box-sizing: initial; z-index:2; display:none; } .lllliiiiilli { transform: rotate(-180deg); } .icon-arrow-left::before { font-family: 'testfont' !important; content: "\e913"; } .icon-arrow-right::before { font-family: 'testfont' !important; content: "\e913"; } .lliilllillil { font-size: 33px; color:rgba(197, 14, 31, 1.00); } .lliilllillil.disabled { opacity: 0.22; } .ililliiliiii { display:none; } .ililliiliiii .llllililiiii { list-style: none; margin: 0 0 5px 0; padding: 0; text-align: center; } .ililliiliiii .llllililiiii li { display: inline-block; width: 11px; height: 11px; margin: 0 4px; text-indent: -999px; border-radius: 6px; cursor: pointer; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); } .ililliiliiii .llllililiiii li.active { background: #666; } @media all and (max-width: 1299px) { .liliilliilli { margin: 0 0.1vw 0 0; height:303px; } .lllilliilili { height:288px; white-space: normal; } .lllilliilili ul li { width: 288px; height: 288px; margin: 0 11px 0 0; } .lllilliilili ul li img { width:288px; height:288px; } .lilililiiiil { height: 60px; width: 225px; top: -270px; margin-left: 46px; padding: 14px 9px 0 9px; } .iillillliili { height: 133px; width: 233px; top: -270px; margin-left: 46px; padding: 14px 9px 0 9px; } .lilililiiiil h4 { font-size: 18px; line-height: 24px; } .iillillliili p { font-size: 16px; line-height: 17px; } .iiilliliiiii { width:310px; height:310px; top: -540px; } } @media all and (max-width: 960px) { .liliilliilli { margin: 0 0.1vw 0vw; height: 254px; } .llillliiilii .ilililiillii { width: 4%; } .lllilliilili { height:240px; } .lllilliilili ul li { width: 244px; height: 244px; margin: 0 8px 0 0; } .lllilliilili ul li img { width:244px; height:244px; } .lilililiiiil { height: 44px; width: 180px; top: -220px; margin-left: 46px; padding: 6px 9px 0 9px; } .iillillliili { height: 105px; width: 180px; top: -220px; margin-left: 46px; padding: 0px 12px 0 11px; } .lilililiiiil h4 { font-size: 15px; line-height: 18px; } .iillillliili p { font-size: 13px; line-height: 15px; } .iiilliliiiii { width: 288px; height:288px; top: -444px; } } @media all and (max-width: 555px) { .llillliiilii { padding: 0; } .liliilliilli { margin: 0 0.1vw 0vw; height:290px; } .ililliiliiii { display:inline-block; } .llillliiilii .ilililiillii { width: 5%; } } @media all and (max-width: 400px) { .liliilliilli { height:70vw; padding-top: 2vw; } .iiliillliill { padding:7px 0 !important; } .lllilliilili { height: 55vw; } .ililliiliiii { display:inline-block; } .llillliiilii { border-collapse:collapse; } .llillliiilii .ilililiillii { width: 0; display:none; } .icon-arrow-right, .icon-arrow-left { display:none; } .lllilliilili ul li { width: 100vw; margin: 0; } .lllilliilili ul li img { width:100vw; height:auto; margin: -10vw 0 -10vw 0; } .lilililiiiil { height: 12.99vw; width: 65vw; top: -77vw; margin-left: 29vw; padding: 2vw 3.2vw 0 3.2vw; } .iillillliili { height: 30vw; width: 65vw; top: -77vw; margin-left: 29vw; padding: 2vw 3.2vw 0 3.2vw; } .lilililiiiil h4 { font-size: 5.2vw; line-height: 6vw; } .iillillliili p { font-size: 4vw; line-height: 4.5vw; } .iiilliliiiii { width:444px; height:244px; top: -540px; } } @keyframes lliiiliillii { 0% { background: rgba(11, 11, 11, 0.0); } 100% { background: rgba(11, 11, 11, 0.4); } } @keyframes llliiliiliii { 0% { } 100% { right:0px; opacity:1; } } .ililllilliii:hover .iillillliili { animation: llliiliiliii 0.55s; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.1s; } .ililllilliii:hover .iiilliliiiii { display:block; animation: lliiiliillii 0.22s; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.1s; } .ililllilliii img { transition: all 0.66s ease-in-out; } .ililllilliii:hover img { transform: scale(1.1); } @media all and (max-width: 550px) { .ililllilliii:hover .iillillliili { animation: llliiliiliii 0s; } .iillillliili { opacity:1; } } @keyframes lillliiiilll { 0% { opacity:0; } 100% { opacity:1; } } .liiiilliiill { overflow: hidden; height: 100%; z-index: 15; display: flex; align-items: center; } .llliilililll { height: auto; padding: 1% 1% 1% 2%; background: rgba(250, 250, 250, 0.80); width: 33%; border-radius: 0 2px 2px 0; border-right: 4px solid rgba(197, 14, 31, 1.00); opacity:0; box-shadow: 2px 2px 4px #bbb; animation: lillliiiilll 0.88s; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.5s; } .llliilililll h2, .llliilililll h3, .llliilililll h4, .llliilililll h5, .llliilililll h6 { margin:0 0 8px 0; } @media all and (max-width: 800px) { #lliiiillilii { overflow: inherit; } #liililllilii { position: inherit; } #lliliilliiii { position:relative; } .liiiilliiill { bottom:-44px; } .llliilililll { background:rgba(197, 14, 31, 1.00); color: white; width: 95%; padding: 2vw 3vw 2vw 6vw; margin: 2px 0 4px 0; } .llliilililll p { font-family: FontRegular; } } .liilliiiilii { overflow: hidden; height: 377px; z-index: 15; } .iiiillliiiil { height: auto; width: 100%; z-index: 21; } @keyframes lliiiliiliil { 0% { visibility: visible; transform: translateX(-100%); } 100% { visibility: visible; transform: translateX(0); } } @keyframes lllllliillll { 0% { visibility: visible; transform: translateX(+100%); } 100% { visibility: visible; transform: translateX(0); } } @keyframes iillllililll { 0% { opacity:0; } 25% { visibility: visible; opacity:0; } 100% { visibility: visible; opacity:1; } } .liilillllill { width: 55%; top: -444px; border-top: 9px solid; display: table-cell; } .lilllllillli { float: left; } .ilililiiiill { float: right; } .llillllillll { float: left; animation: lliiiliiliil 0.88s; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.1s; } .liiilllliili { float: right; animation: lllllliillll 0.88s; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.1s; } .illllillllil { padding: 22px 55px 33px 22px; background-color: rgba(255, 255, 255, 0.77); z-index: 88; position: absolute; min-width: calc(100% - 160px); } .lilllllillli .illllillllil { margin-left: 160px; } .ilililiiiill .illllillllil { margin-right: 160px; } .liilillllill p { font-size: 22px; line-height: 24px; font-weight: normal; font-family: 'FontLight'; color: rgba(44, 44, 44, 1); text-align: left; margin-top:10px; margin-bottom:10px; } .liilillllill h3 { font-size: 31px; line-height: 31px; font-weight: normal; font-family: 'FontBold'; color: rgba(44, 44, 44, 1); text-align: left; margin-top:0; margin-bottom:4px; margin-left:0; } .liilillllill h4 { font-size: 26px; line-height: 31px; font-weight: normal; font-family: 'FontRegular'; color: rgba(44, 44, 44, 1); text-align: left; margin-top:11px; margin-bottom:4px; margin-left:6px; } .liilillllill a { font-size: 22px; line-height: 24px; font-weight: normal; font-family: 'FontLight'; text-align: left; margin-top:20px; margin-bottom:0; } .illiiiiillll { position: absolute; margin-left: 99px; top: 0px; width: 658.667px; height: 192px; z-index:66; overflow:hidden; visibility: hidden; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.1s; } .lillililliil { animation: iillllililll 3.0s; animation-timing-function: ease-in; animation-fill-mode: forwards; } .illiiiiillll img { margin-left: -99px; margin-top: -47px; top:-99px; width: 984px; height: 343.25px; max-width: inherit; filter: grayscale(30%) blur(2px) brightness(120%); } @media all and (max-width: 1400px) { .liilillllill { top: -400px; width: 66%; } } @media all and (max-width: 1299px) { .liilillllill { top: -320px; width: 88%; } .illllillllil { padding: 22px 44px 22px 22px; min-width: calc(100% - 111px); } .lilllllillli .illllillllil { margin-left: 111px; } .ilililiiiill .illllillllil { margin-right: 111px; } .liilillllill p, .liilillllill a { font-size: 19px; line-height: 19px; margin-top:10px; margin-bottom:10px; } .liilillllill h3 { font-size: 28px; line-height: 28px; font-weight: normal; } .liilillllill h4 { font-size: 22px; line-height: 24px; font-weight: normal; margin-left:4px; } } @media all and (max-width: 1000px) { .liilillllill { top: -311px; width: 77%; } .illllillllil { padding: 22px 44px 22px 22px; min-width: calc(100% - 99px); } .lilllllillli .illllillllil { margin-left: 99px; } .ilililiiiill .illllillllil { margin-right: 99px; } .liilillllill p, .liilillllill a { font-size: 16px; line-height: 16px; margin-top:10px; margin-bottom:10px; } .liilillllill h3 { font-size: 25px; line-height: 25px; font-weight: normal; } .liilillllill h4 { font-size: 20px; line-height: 22px; font-weight: normal; margin-left:2px; } } @media all and (max-width: 800px) { .liilillllill { top: -300px; width: 95%; } .illllillllil { min-width: calc(100% - 77px); } .lilllllillli .illllillllil { margin-left: 77px; } .ilililiiiill .illllillllil { margin-right: 77px; } } @media all and (max-width: 740px) { .liilliiiilii { background:#efefef; border: 1px solid #ddd; } .liilillllill { top: -300px; width: 100%; border:none; } .illllillllil { padding: 0; background-color:transparent; min-width: 100%; } .lliililllili { background-color: rgba(255, 255, 255, 0.81); border-top: 9px solid; padding: 12px 10px 10px 22px; width:55%; } .liiillillill { padding: 12px 33px 10px 22px; } .lilllllillli .illllillllil { margin-left:0; } .ilililiiiill .illllillllil { margin-right:0; } .liilillllill h3 { font-size: 22px; line-height: 22px; } .liilillllill h4 { font-size: 18px; line-height: 19px; margin-left:2px; } .ilililiiiill .lliililllili { margin-left:45%; } .illiiiiillll { display:none; } } @media all and (max-width: 622px) { .liilillllill h3 { font-size: 20px; line-height: 20px; } .lliililllili { width:66%; } .ilililiiiill .lliililllili { margin-left:34%; } } @media all and (max-width: 500px) { .liilillllill { top: -300px; width: 100%; border:none; } .liilillllill h3 { font-size: 18px; line-height: 18px; } .liilillllill h4 { font-size: 17px; line-height: 18px; padding-bottom: 6px; } .lliililllili { background-color: initial; padding: 12px 10px 0px 22px; width:88%; } .liiillillill { padding: 0px 33px 10px 22px; } .ilililiiiill .lliililllili { margin-left:0; padding: 12px 10px 0px 22px; width: 88%; } .ilililiiiill .lliililllili h3 { text-align: left; } } .illliillliii, .iilliillllll .liilillllill, .iilliillllll .lliililllili { border-color: #6E6E6E; } .illiliiiilli, .liiiillillil .liilillllill, .liiiillillil .lliililllili { border-color: #9B1932; } .llliilililii, .liiliilliili .liilillllill, .liiliilliili .lliililllili { border-color: rgba(197, 14, 31, 1.00); } .iilliillllll .llliiliillil, .iilliillllll .llliiliillil::after { background: #6E6E6E; } .liiiillillil .llliiliillil, .liiiillillil .llliiliillil::after { background: #9B1932; } .liiliilliili .llliiliillil, .liiliilliili .llliiliillil::after { background: rgba(197, 14, 31, 1.00); } #lliililillli { height:75px; } .mce-container, .mce-panel, .mce-floatpanel, .mce-window, mce-menu { z-index: 9999999999 !important; } .llllliililii { width:100%; max-width: 1920px; } .llllliililii:after { content: ''; display: block; clear: both; } .iilillllllii { margin:0; padding:0; object-fit: scale-down; overflow:hidden; } .llllliililii .iililillllil { width: 24.6%; } .llllliililii .iliiliilliii { width: 24.6%; } .llllliililii .llililiillil { width: 49.6%; } .llllliililii .iliillillili { width: 49.6%; } .lilillllilil { width: 24.6%; } .ililliliilli { width: 0.5%; } @media all and (max-width: 1199px) { .llllliililii .iililillllil { width: 32.85%; } .llllliililii .iliiliilliii { width: 32.85%; } .llllliililii .llililiillil { width: 66.3%; } .llllliililii .iliillillili { width: 66.3%; } .lilillllilil { width: 32.85%; } .ililliliilli { width: 0.65%; } } @media all and (max-width: 866px) { .llllliililii .iililillllil { width: 49.4%; } .llllliililii .iliiliilliii { width: 49.6%; } .llllliililii .llililiillil { width: 99.4%; } .llllliililii .iliillillili { width: 99.4%; } .lilillllilil { width: 49.9%; } .ililliliilli { width: 0.2%; } } .iilillllllii:hover { border-color: hsla(0, 0%, 100%, 0.5); cursor:default; } .iilillllllii.is-dragging, .iilillllllii.is-positioning-post-drag { background: #C90; z-index: 2; } .packery-drop-placeholder { top:-5px; outline: 2px dashed rgba(197, 14, 31, 1.00); outline-offset: -6px; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; } .iliiillliiii, { position: relative; z-index: 1; user-drag: none !important; -webkit-user-drag: none !important; -moz-user-select: none !important; } .illiililiili { z-index: 43; position: absolute; top: 0px; right: 0px; height: 100%; width: 100%; display:none; } @keyframes illiiillliii { 0% { background: rgba(11, 11, 11, 0.0); } 100% { background: rgba(11, 11, 11, 0.4); } } .iilillllllii:hover .illiililiili { display:block; animation: illiiillliii 0.33s; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.1s; } .illilillilli { z-index: 44; position: absolute; top: 0px; right: 0px; height: 94%; width: 303px; font-family: 'FontLight'; color: rgba(44, 44, 44, 1); text-indent:0; font-weight:normal; cursor:default; padding-bottom:33px; overflow:hidden; } @keyframes ililiiliilli { 0% { } 100% { right:0px; } } @keyframes illlllllilii { 0% { right:0px; } 100% { opacity:1; } } .iilillllllii:hover .iilllilillli { animation: ililiiliilli 0.44s; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.1s; } .iilillllllii:hover .iiiiilllilli { animation: illlllllilii 0.33s; animation-timing-function: ease-in; animation-fill-mode: forwards; animation-delay: 0.55s; } .iliiillliiii img { transition: all 0.66s ease-in-out; max-width: 100%; } .iilillllllii:hover .iliiillliiii img { transform: scale(1.1); } .iilllilillli { position: absolute; background-color: rgba(255, 255, 255, 0.81); height: 63px; width: 288px; padding: 10px 99px 10px 10px; top: 22px; right: -99px; } .iilllilillli h4 { font-size: 18.5px; line-height: 21px; margin:0; } .iiiiilllilli { position: absolute; background-color: rgba(255, 255, 255, 0.81); height: 191px; width: 288px; padding: 2px 10px 22px 10px; top: 85px; right: 0px; opacity:0; } .iiiiilllilli p { font-size: 15px; line-height: 16.5px; margin:0; } .iiiiilllilli h5 { font-size: 14px; line-height: 14px; font-weight: normal; font-family: 'FontLight'; text-align: left; margin-top:11px; margin-right:11px; margin-bottom:0; } .iiiiilllilli strong { font-family: 'FontLight'; font-weight: normal; } @media all and (max-width: 600px) { .iilillllllii:hover .iiiiilllilli, .iilillllllii:hover .iilllilillli { animation-duration: 0s; } .iliiillliiii { margin-bottom: 88px; } .iilillllllii { } .illilillilli { top:inherit; bottom: 5px; left: 0px; height:92px; width: 100%; background: #efefef; border: 1px solid #ddd; overflow:visible; } .iilllilillli { height: 55px; width: 45vw; padding: 10px 10px 10px 10px; top: -66px; left: -1px; } .iilllilillli h4 { font-size: 17.5px; line-height: 17.5px; } .iiiiilllilli { background-color:transparent; height: 100%; width: 100%; padding: 10px 10px 6px 10px; top: 0px; left: 0px; opacity:1; } .iiiiilllilli p { font-size: 14px; line-height: 14.5px; } .iiiiilllilli h5 { font-size: 14px; line-height: 14.5px; margin-top:8px; margin-right:0; } .iililillllil .iliiillliiii, .iliiliilliii .iliiillliiii { margin-bottom: 122px; } .iililillllil .illilillilli, .iliiliilliii .illilillilli { height:122px; } } @media all and (max-width:500px) { .iliiillliiii { margin-bottom: 133px; } .illilillilli { height:133px; } .iilllilillli { background-color:transparent; height: 55px; width: 100%; top: 8px; } .iilllilillli h4 { font-size: 16.5px; line-height: 17px; } .iiiiilllilli { top: 48px; } .iiiiilllilli p { font-size: 13px; line-height: 13.5px; } .iiiiilllilli h5 { font-size: 13px; line-height: 13.5px; margin-top:6px; margin-right:0; } .iililillllil .iliiillliiii, .iliiliilliii .iliiillliiii { margin-bottom: 211px; } .iililillllil .illilillilli, .iliiliilliii .illilillilli { height:211px; } } .iliillillili .illilillilli { height: 90%; width: 565px; } .iliillillili .iliiillliiii img { transition: all 0.66s ease-in-out; } .iliillillili .iilllilillli { height: 63px; width: 555px; padding: 10px 233px 10px 10px; top: 22px; right: -222px; } .iliillillili .iiiiilllilli { height: 188px; width: 555px; } @media all and (max-width: 600px) { .iliillillili .illilillilli { height: inherit; width: 100%; background: #efefef; } .iliillillili .iilllilillli { height: 55px; width: 66vw; padding: 10px 10px 10px 10px; top: -66px; left: -1px; } .iliillillili .iiiiilllilli, .llililiillil .iiiiilllilli { height: auto; width: 100%; padding-bottom:22px; } } @media all and (max-width:500px) { .iliillillili .iilllilillli { height: 55px; width: 100%; top: 8px; background-color:transparent; } .iliillillili .iilllilillli h4 { font-size: 16.5px; line-height: 17px; } .iliillillili .iiiiilllilli { top: 48px; } } .lilillilliii, .illilillilli { cursor: pointer; } #llillllliill { display:none; } .iliilllliill { width: 99%; height: 88px; display: flex; align-items: center; border: 2px solid red; border-radius: 6px; margin: 5px; padding: 5 px; display:none; } .liiiillliili { width: 100%; height: 88px; display: flex; align-items: center; justify-content: center; } .lliiiillilli { width: 99.6%; height: 33px; background-color: rgba(197, 14, 31, 1.00); border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 3px; padding:0; text-transform: uppercase; } .lliiiillilli:hover { background-color: #00317c; } #lliiillllill { background-color: #ddd; } #lliiillllill:hover { background-color: #aaa; } #lliiiliiiili { display:none; background-color: red; } #lliiiliiiili:hover { background-color: #dd0000; } .llliliililil { z-index:55; position:relative; margin:33px; display:none; } .llllillllili { background-color: red; width: 44px; height: 44px; font-size: 33px; padding-left:11px; border-radius: 22px; border: 1px solid #bbb; color:#ddd; display:none; } .llllillllili:hover { cursor:no-drop; color:white; } #lliliillllil { width: 99.33%; height: 44px; margin:11px 5px 5px 5px; display:none; } #liliiiililii { width: 33px; height: 33px; } #iliilliiiiil { width: 33px; height: 66px; } #lliiiliiilii { width: 66px; height: 33px; } #iliiiliiiiii { width: 66px; height: 66px; } #iiiiiiiliill { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; opacity: 0.88; z-index: 10000; } #liillllilill { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.95); z-index: 16; justify-content: center; align-items: center; } #illiilllliil { font-family: 'FontBold'; font-size: 66px; color: rgba(197, 14, 31, 1.00); line-height:66px; position: absolute; width: 66px; height: 66px; top: 88px; right:9px; z-index: 3; cursor: pointer; } #illiilllliil:hover { color: rgba(111, 11, 11, 1.00); } #liliilliiiii { display: inline-block; width: 860px; height: 777px; padding: 0; margin: 30px 0; } #illlilliiill { height: 100%; overflow: hidden; } #illlilliiill ul { list-style: none; margin: 0; padding: 0; height: 100%; font-size: 22px; display:flex; justify-content: center; align-items: center; } #illlilliiill ul li { float: left; width: 100%; margin: 0 1px 0 0; padding: 0; display:inline-block; cursor: grab; } #illlilliiill ul li img { width: 860px; } #illlilliiill ul li.active { } #illlilliiill .illiiiiliiil { margin: -6px 0px 0px 0px; font-size: 16px; width: 100%; padding-left:8px; padding-right:8px; } #lliliiilliii { margin: 0 0 11px 0; height: 8px; background: #ccc; line-height: 0; } #lliliiilliii .handle { width: 100px; height: 100%; background: rgba(197, 14, 31, 1.00); cursor: grab; } #lliliiilliii .handle .mousearea { position: absolute; top: -9px; left: 0; width: 100%; height: 20px; } #liliililliil { position:fixed; overflow-x:hidden; top:0; left:0; width:100%; height:100%; background-color:white; opacity:0.88; z-index:10000; visibility:hidden; } #iiilliliilli { position:fixed; top:0; left:0; width:100%; height:100%; display:table-cell; vertical-align:middle; text-align:center; z-index:10001; visibility:hidden; overflow:scroll; } #llilliililii { position:relative; margin:0 auto; padding: 33px 33px 33px 33px; margin-top:3px; height:auto; width:66%; max-width:666px; max-height:888px; background-color:white; border:1px solid rgba(0, 82, 158, 0.88); border-radius:3px; } @media all and (max-width: 555px) { #llilliililii { padding: 22px 11px 22px 11px; width:90%; } } #llilliililii h3 { font-weight: normal; font-style: normal; font-size: 24px; margin-bottom: 0; } #llilliililii p { font-size: 18px; margin-top: 40px; margin-bottom: 33px; } #iiiilllilill { position:absolute; top:3px; right:5px; font-size:33px; font-weight:bold; height:33px; width:33px; cursor:pointer; z-index:10002; } #iiiilllilill::before { font-family: 'MaterialIcons' !important; content: "\e5c9"; color: #bbb; text-rendering: auto !important; } #iiiilllilill:hover::before { color:#888; } .lilllliiilll { width: 222px; color: white; margin: 33px 11px 0 11px; padding: 11px 8px 11px 8px; font-size: 16px; border: none; cursor: pointer; background-image: linear-gradient(rgb(197, 14, 31, 1.00) 0%, rgb(221, 53, 53) 100%); font-family: 'FontRegular'; } .lilllliiilll[disabled] { background-image: linear-gradient(rgb(111, 111, 111) 0%, rgb(188, 188, 188) 100%); } @media all and (max-width: 555px) { .lilllliiilll { width: 188px; font-size: 14px; } } .lllllllllili { position: relative; display: inline-block; } .liliiliillli { margin: 0 11px 0 11px; display: none; position: absolute; left:0; right:0; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .liliiliillli a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .liliiliillli a:hover { background-color: #f1f1f1; } .lllllllllili:hover .liliiliillli { display: block; } lllllllllili:hover .lilllliiilll[disabled] .liliiliillli { display:none; } .iliilillllll { display: inline-block; min-width: 24px; height: 16px; margin: 0 10px; margin-left: 8px; background-position: center center !important; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } #liliiillilli { position:fixed; overflow-x:hidden; top:0; left:0; width:100%; height:100%; background-color:white; opacity:0.88; z-index:10000; visibility:hidden; } #illiiillllli { position:fixed; top:0; left:0; width:100%; height:100%; display:table-cell; vertical-align:middle; text-align:center; z-index:10001; visibility:hidden; overflow:scroll; } #liiiliilllil { position:relative; margin:0 auto; padding: 33px 33px 33px 33px; margin-top:3px; height:auto; width:66%; max-width:666px; max-height:888px; background-color:white; border:1px solid rgba(0, 82, 158, 0.88); border-radius:3px; } @media all and (max-width: 555px) { #liiiliilllil { padding: 22px 11px 22px 11px; width:90%; } } #liiiliilllil h3 { font-weight: normal; font-style: normal; font-size: 24px; margin-bottom: 0; } #liiiliilllil p { font-size: 18px; margin-top: 40px; margin-bottom: 33px; } #iiliilliiill { position:absolute; top:0; right:5px; font-size:33px; font-weight:bold; color:#999; height:33px; width:33px; cursor:pointer; z-index:10002; } #iiliilliiill:hover { color:#222; } .iilliilillii { width: 222px; color: white; margin: 22px 11px 0 11px; padding: 11px 8px 11px 8px; font-size: 16px; border: none; cursor: pointer; background-image: linear-gradient(rgb(197, 14, 31, 1.00) 0%, rgb(221, 53, 53) 100%); font-family: 'FontRegular'; } @media all and (max-width: 555px) { .iilliilillii { width: 188px; font-size: 14px; } } .iilliilillii[disabled] { cursor: not-allowed; background-image: linear-gradient(rgb(111, 111, 111) 0%, rgb(188, 188, 188) 100%); } .iilliilillii:hover { background-image: linear-gradient(rgb(42, 132, 215) 0%, rgb(21, 96, 165) 100%); } .iilliilillii[disabled]:hover { background-image: linear-gradient(rgb(111, 111, 111) 0%, rgb(188, 188, 188) 100%); } #iiiiiiiiliii { text-align:left; width:22%; margin-top: 22px; margin: 22px auto 0px auto; position: relative; max-height: 288px; overflow: auto; font-size: 22px; } .lillilliiill { display: inline-block; min-width: 24px; height: 16px; margin: 0 10px; margin-left: 8px; background-position: center center !important; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .iillililiiii { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .iillililiiii input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .llilillliiil { position: absolute; top: 0; left: 0; height: 25px; width: 25px; border-radius:3px; border:1px solid #111; } .iillililiiii:hover input ~ .llilillliiil { background-color: #ccc; } .iillililiiii input:checked ~ .llilillliiil { background-color: rgb(21, 96, 165); } .iillililiiii input:disabled ~ .llilillliiil { background-color: white; border:1px solid #eee; } .co_lbl_disabled { cursor: not-allowed; color:#aaa; } .llilillliiil:after { content: ""; position: absolute; display: none; } .iillililiiii input:checked ~ .llilillliiil:after { display: block; } .iillililiiii .llilillliiil:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .iillililiiii input:disabled ~ .llilillliiil:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid #ddd; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .ui-tooltip, .lliiliiiiill:after { background: #c51a1b; border: 1px solid white; z-index: 88888888888; } .ui-tooltip { padding: 10px 20px; color: white; font-size: 12px; border-radius: 8px; text-transform: uppercase; box-shadow: 0 0 4px gray; } .lliiliiiiill { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .lliiliiiiill.top { top: -16px; bottom: auto; } .lliiliiiiill.left { } .lliiliiiiill:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .lliiliiiiill.top:after { bottom: -20px; top: auto; } .lliilllllili { width:100%; height:30vw; background:#eee; } .ilillillllll { display:inline-block; width:100%; } @media all and (max-width: 888px) { .lliilllllili { height:60vw; width: calc(100% + 4vw); margin: 0vw -2vw 0vw -2vw; } .ilillillllll { display:inline-block; } } @keyframes sqslfadeIn { from {opacity: .2;} to {opacity: .8;} } .lilllilillii { width:100%; margin: 22px auto 22px; } .lilllilillii button, .lilllilillii button { border: 0; color: #fff; opacity: .5; border-radius: 5px;} .lilllilillii button:hover, .lilllilillii button:hover { opacity: 1; } .lilllilillii button:disabled, .lilllilillii button:disabled { opacity: .1; } .lilllilillii .lillilliiiii, .lilllilillii .lliillillili { width:8%; min-width:19px; max-width:48px; background:#fff; float: left; height: 333px; } .lilllilillii .lillilliiiii { float: right; } .lilllilillii .liiiiiiliiil { background: #fbfbfb; margin: 0 auto; width:calc(100% - 111px); height: 333px; line-height: 333px; overflow: hidden; text-shadow: none; border-radius: 5px; } .lilllilillii .liiiiiiliiil ul { list-style: none; margin: 0; padding: 0; height: 100%; font-family: "FontRegular"; font-weight: normal; color:#222; line-height:20px; line-height: inherit;} .lilllilillii .liiiiiiliiil ul li { position: relative; text-indent: inherit; border-radius: 5px; float: left; width: 333px; height: 100%; margin: 0 1px 0 0; padding: 0; background: #eee; color: #3a3c47; text-align: center; cursor: pointer; opacity: 0.88; overflow:hidden; } .lilllilillii .liiiiiiliiil ul li img { width: 333px; height: 333px; opacity: 0.88; } .lilllilillii .liiiiiiliiil ul li.active { color: #fff; opacity: 1.0; } .lilllilillii .liiiiiiliiil ul li.active img { width: 333px; height: 333px; opacity: 1.0; } .lilllilillii .lliiilllliii { margin: 0 auto 22px; width:calc(100% - 111px); height: 2px; line-height: 0; background: #eee; } .lilllilillii .lliiilllliii .iiiliilliill { width: 100px; height: 100%; background: #aaa; cursor: pointer; } .lilllilillii .lliiilllliii .iiiliilliill .lilliliiiiii { position: absolute; top: -9px; left: 0; width: 100%; height: 20px; } .lilllilillii .pages { list-style: none; margin: 20px 0; padding: 0; text-align: center; } .lilllilillii .pages li { display: inline-block; width: 14px; height: 14px; margin: 0 4px; text-indent: -999px; border-radius: 10px; cursor: pointer; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); } .lilllilillii .pages li:hover { background: #aaa; } .lilllilillii .pages li.active { background: #666; } .lilllilillii ul li:before { content: none; } .lilllilillii .liiiiiiliiil ul li.active .iiillilillll { display:none; } .lilllilillii .liiiiiiliiil ul li.active .iiillilillll, .lilllilillii.liilliliiili .liiiiiiliiil ul li .iiillilillll { display:block; animation-name: sqslfadeIn; animation-timing-function: ease-in; box-sizing: initial; animation-fill-mode: forwards; animation-duration: 1s;height: 55px; position:absolute; top: 233px; width: 266px; background:#eee; opacity: .8; margin: 0; padding: 15px 10px 0px 26px; text-align: left; border-top-right-radius: 5px; border-bottom-right-radius: 5px;} .lilllilillii .iiillilillll { font-family: "FontRegular"; font-weight: normal; color:#222; line-height:20px; font-size:16px; margin:0;} .lilllilillii .iiillilillll a { color: rgba(44, 44, 44, 1); text-decoration: none; } .lilllilillii.liilliliiili .liiiiiiliiil ul li, .lilllilillii.liilliliiili .liiiiiiliiil ul li img { opacity: 1; overflow: inherit; } .lilllilillii .lliilliliill { position: absolute; top:0 ; width: 333px; height: 333px; opacity: 1; } .llllliliiill, .illiiiiiilli, .ilillllliili { display:none; position: absolute; top: -144px; left: 111px; font-family: 'MaterialIcons' !important; font-size: 44px; width: 44px; height: 44px; } .lilllilillii.liilliliiili .liilliililli:first-child .llllliliiill { display:block; left: -44px; } .lilllilillii.liilliliiili .illiiiiiilli { display:block; left: 333px; } .lilllilillii.liilliliiili .ilillllliili { display:block; left: 144px; } .llllliliiill::before, .illiiiiiilli::before { transition: 0.22s; content: "\E147"; color: #aaa; } .llllliliiill:hover:before, .illiiiiiilli:hover:before { transition: 0.22s; content: "\E147"; color: rgba(26, 222, 27, 1.00); cursor: copy; } .ilillllliili::before { transition: 0.22s; content: "\E15C"; color: #aaa; cursor: not-allowed; } .ilillllliili:hover:before { transition: 0.22s; color: rgba(222, 26, 27, 1.00); } .lilllilillii.liilliliiili .liiiiiiliiil { overflow-x: scroll !important; } .lilllilillii.liilliliiili .liiiiiiliiil ul { display: flex; } .lilllilillii.liilliliiili .liiiiiiliiil ul li { flex-direction: row; flex-shrink: 0; margin: 0 11px 0 31.5px; justify-content: space-between; } @media all and (max-width: 606px) { .cufufuffuuuu {margin:0;padding:0;} .cfuuuuufuffu {margin:0;} .cufufuffuuuu {width:100%;} .cufufuffuuuu .cuuufuufffuf { padding: 2em 1em 2em 1em; } .cr_dyn_svg { width:100%; } .lilllilillii .lillilliiiii, .lilllilillii .lliillillili { width:33px; min-width:19px; max-width:48px; background:#ddd; float: left; height: 222px; padding:5px;} .lilllilillii .lillilliiiii { float: right; } .lilllilillii .liiiiiiliiil { margin: 0 auto; width:calc(100% - 72px); height: 222px; line-height: 222px; overflow: hidden; text-shadow: none; border-radius: 5px; } .lilllilillii .liiiiiiliiil ul li { text-indent: inherit; border-radius: 5px; float: left; width: 222px; height: 100%; margin: 0 1px 0 0; padding: 0; background: #eee; color: #3a3c47; text-align: center; cursor: pointer; opacity: 0.88; overflow:hidden; } .lilllilillii .liiiiiiliiil ul li img { width: 222px; height: 222px; opacity: 0.88; } .lilllilillii .liiiiiiliiil ul li.active img { width: 222px; height: 222px; opacity: 1.0; } .lilllilillii .lliiilllliii { margin: 0 auto 22px; width:calc(100% - 72px); height: 2px; line-height: 0; background: #eee; } .lilllilillii .liiiiiiliiil ul li.active .iiillilillll { display:block; animation-name: sqslfadeIn; animation-timing-function: ease-in; box-sizing: initial; animation-fill-mode: forwards; animation-duration: 1s; height: 33px; position:relative; top: -160px; width: 190px; background:#eee; opacity: .8; margin: 0; padding: 8px 5px 6px 10px; text-align: left; border-top-right-radius: 5px; border-bottom-right-radius: 5px;} .lilllilillii .iiillilillll h3 { line-height:16px; font-size:12px; margin:0; }