/** * Сброс CSS стилей * **/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; max-width: 100%; } html { -webkit-text-size-adjust: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } body { &.__hidden { overflow: hidden; } } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a {text-decoration: none;} input, textarea, button, select { resize: none; border: none; background-color: transparent; outline: none; padding: 0; } img { border: 0; vertical-align: top; } html,body { overflow-x: hidden; -webkit-overflow-scrolling: touch; } /** * Flex * **/ .flex_w { display: flex; flex-wrap: wrap; &.__ai_fs {align-items: flex-start;} &.__ai_fe {align-items: flex-end;} &.__ai_c {align-items: center;} &.__jc_sa {justify-content: space-around;} &.__jc_sb {justify-content: space-between;} &.__jc_c {justify-content: center;} } /** * Функции * **/ .radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .transition(@properties: all .3s) { -webkit-transition: @properties; -moz-transition: @properties; -ms-transition: @properties; -o-transition: @properties; transition: @properties; } .text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .box-shadow2 (@string, @string) { -webkit-box-shadow: @string, @string; -moz-box-shadow: @string, @string; box-shadow: @string, @string; } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); } .inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); } .box-sizing (@type: border-box) { -webkit-box-sizing: @type; -moz-box-sizing: @type; box-sizing: @type; } .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .opacity (@opacity: 0.5) { -webkit-opacity: @opacity; -moz-opacity: @opacity; opacity: @opacity; } .gradient (@startColor: #eee, @endColor: white) { background-color: @startColor; background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); background: -webkit-linear-gradient(top, @startColor, @endColor); background: -moz-linear-gradient(top, @startColor, @endColor); background: -ms-linear-gradient(top, @startColor, @endColor); background: -o-linear-gradient(top, @startColor, @endColor); } .horizontal-gradient (@startColor, @endColor) { background-color: @startColor; background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(left, @startColor, @endColor); background-image: -moz-linear-gradient(left, @startColor, @endColor); background-image: -ms-linear-gradient(left, @startColor, @endColor); background-image: -o-linear-gradient(left, @startColor, @endColor); } .vertical-gradient (@startColor, @endColor) { background-color: @endColor; background-image: -webkit-gradient(linear, top, bottom, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(bottom, @startColor, @endColor); background-image: -moz-linear-gradient(bottom, @startColor, @endColor); background-image: -ms-linear-gradient(bottom, @startColor, @endColor); background-image: -o-linear-gradient(bottom, @startColor, @endColor); } .animation (@name, @duration: 300ms, @delay: 0, @ease: ease) { -webkit-animation: @name @duration @delay @ease; -moz-animation: @name @duration @delay @ease; -ms-animation: @name @duration @delay @ease; } .transition (@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; } .transform(@string){ -webkit-transform: @string; -moz-transform: @string; -ms-transform: @string; -o-transform: @string; transform: @string; } .scale (@factor) { -webkit-transform: scale(@factor); -moz-transform: scale(@factor); -ms-transform: scale(@factor); -o-transform: scale(@factor); transform: scale(@factor); } .rotate (@deg) { -webkit-transform: rotate(@deg); -moz-transform: rotate(@deg); -ms-transform: rotate(@deg); -o-transform: rotate(@deg); transform: rotate(@deg); } .skew (@deg, @deg2) { -webkit-transform: skew(@deg, @deg2); -moz-transform: skew(@deg, @deg2); -ms-transform: skew(@deg, @deg2); -o-transform: skew(@deg, @deg2); transform: skew(@deg, @deg2); } .translate (@x, @y:0) { -webkit-transform: translate(@x, @y); -moz-transform: translate(@x, @y); -ms-transform: translate(@x, @y); -o-transform: translate(@x, @y); transform: translate(@x, @y); } .translate3d (@x, @y: 0, @z: 0) { -webkit-transform: translate3d(@x, @y, @z); -moz-transform: translate3d(@x, @y, @z); -ms-transform: translate3d(@x, @y, @z); -o-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } .perspective (@value: 1000) { -webkit-perspective: @value; -moz-perspective: @value; -ms-perspective: @value; perspective: @value; } .transform-origin (@x:center, @y:center) { -webkit-transform-origin: @x @y; -moz-transform-origin: @x @y; -ms-transform-origin: @x @y; -o-transform-origin: @x @y; } .background(@path, @position: center center, @repeat: no-repeat) { background: url(@path) @position @repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .text-overflow(@lineClamp, @lineHeight) { display: -webkit-box; display: -moz-box; -webkit-box-orient: vertical; -webkit-line-clamp: @lineClamp; overflow: hidden; height: @lineClamp * @lineHeight; } .placeholder-style(@placeholder-font, @placeholder-color) { &::-webkit-input-placeholder { font: @placeholder-font; color: @placeholder-color; } &::-moz-placeholder { font: @placeholder-font; color: @placeholder-color; } &:-moz-placeholder { font: @placeholder-font; color: @placeholder-color; } &:-ms-input-placeholder { font: @placeholder-font; color: @placeholder-color; } } /** * Подключение шрифтов * **/ .wrap{ width: 1830px; margin: 0 auto; } a{ color: inherit; } body{ font-family: "Open Sans"; background: #F7F0E9; } /** * Общие классы * **/ .show {display: block !important;} .hide, .xs-show, .sm-show, .md-show { display: none !important; } .flf {float: left !important;} .flr {float: right !important;} .clear { display: block; clear: both; } .t_center {text-align: center;} .t_right {text-align: right;} .pos_rel {position: relative;} .ypos_ab { position: absolute; top: 50%; .translate(0, -50%); } .xpos_ab { position: absolute; left: 50%; .translate(-50%, 0); } .pos_absc { position: absolute; top: 50%; left: 50%; .translate(-50%, -50%); } .c_img { width: 100% !important; height: 100% !important; object-fit: cover; } .b_img { background-size: cover; background-position: center center; background-repeat: no-repeat; } button{ cursor: pointer; } .header{ padding-bottom: 10px; background: #F7F0E9; position: relative; z-index: 4; border-bottom: 1px solid #000000; &-menu{ a{ margin: 0 40px; color: #000000; font-size: 24px; font-family: Oranienbaum; } } &-top-logo{ display: flex; justify-content: center; margin-bottom: 20px; position: relative; span{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 96px; line-height: 111px; position: absolute; left:50%; transform: translateX(-50%) translateY(-50%); letter-spacing: 1px; color: #03262F; opacity: 0.1; } } .wrap{ display: flex; justify-content: space-between; align-items: center; } &-left,&-right{ span{ color: #000000; font-family: Oranienbaum; font-size: 24px; line-height: 40px; } div{ color: #000000; font-size: 16px; line-height: 16px; background: #FDBE3F; border: 1px solid #000000; border-radius: 7px; padding: 7px 12px; width: 270px; } } &-right{ text-align: right; } } .d1{ .owl-dot{ width: 12px; margin:20px;height: 12px; background: #000000!important; border: 1px solid #FFFFFF!important; border-radius: 50%; } .owl-dots{ position: absolute; left: 0; right: 0; display: flex; justify-content: center; bottom: 30px; } .owl-prev{ position: absolute; top: 50%; transform: translateY(-50%); left: 50px; } .owl-next{ position: absolute; top: 50%; transform: translateY(-50%); right: 50px; } &-text{ font-family: Oranienbaum; text-align: center; font-size: 24px; line-height: 150%; color: #F7F0E9; } .wrap{ width: 1730px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } &-middle{ height: 100px; img{ .pos_absc; } } &-bottom{ display: flex; justify-content: space-between; align-items: center; } &-line{ width: 155px; height: 2px; background: #FFFFFF; opacity: 0.2; } &-top{ display: flex; justify-content: space-between; font-size: 16px; b{ display: block; } text-align: right; color: #FFFFFF; &-left{ display: flex; text-align: left; align-items: center; img{ margin-right: 15px; } } &-right{ text-align: right; } } .wrap{ display: flex; flex-direction: column; justify-content: space-between; } &-item{ height: 640px; padding: 100px 0; background: linear-gradient(180deg, #383E54 0%, #D17272 97.92%); position: relative; *{ max-width: 100% !important; } &-ttl { .pos_absc(); font-size: 288px; line-height: 333px; text-align: center; white-space: nowrap; letter-spacing: 1px; font-family: Oranienbaum; opacity: 0.1; } } } .standart-ttl{ align-items: center; display: flex; padding-top: 70px; justify-content: space-between; b{ font-family: Oranienbaum; font-size:58px; font-weight: 400; /* identical to box height */ text-align: center; color: #03262F; } span{ font-size: 18px; line-height: 150%; text-align: center; letter-spacing: -0.03em; color: #000000; opacity: 0.3; } &-center{ width: 600px; display: flex; position: relative; top: -30px; flex-direction: column; align-items: center; justify-content: center; } &-line{ opacity: 0.2; height: 2px; flex-grow: 1; background: #03262F; } } .home-date-btn{ width: 330px; height: 50px; margin: 0 auto; margin-top: 80px; background: #03262F; border: 2px solid #00222B; box-sizing: border-box; box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.25); border-radius: 13px; font-size: 18px; line-height: 22px; /* identical to box height */ display: flex; align-items: center; letter-spacing: -0.03em; justify-content: center; color: #F7F0E9; } .event{ width: 288px; margin-right: 30px; padding: 10px; background: #FFFFFF; box-shadow: 10px 10px 43px rgba(67, 67, 67, 0.25); &-btn{ display: flex; cursor: pointer; flex-direction: column; align-items: center; margin-top: 35px; b{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 24px; color: #000000; } span{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 18px; line-height: 150%; text-align: center; margin-bottom: 10px; color: rgba(0, 0, 0, 0.51); } } &-line{ width: 530px; margin: 10px 0; height: 2px; background: rgba(3, 38, 47, 0.21); } .event-btn{ cursor: pointer; margin: 0; &s{ display: flex; justify-content: space-between; margin-top: 15px; } &:first-child{ width: 149px; height: 42px; background: #F7F0E9; border: 1px solid #D2D2D2; box-sizing: border-box; border-radius: 13px; display: flex; font-family: Roboto Condensed; font-size: 18px; line-height: 21px; color: #000000; align-items: center; justify-content: center; .transition() ; &:hover{ background: #FDBE3F; border: 1px solid #D2D2D2; box-sizing: border-box; border-radius: 13px; } } &:nth-child(2){ font-family: Roboto Condensed; font-style: normal; font-weight: 300; font-size: 18px; line-height: 21px; display: flex; align-items: center; text-align: center; justify-content: center; background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 13px; width: 112px; height: 42px; color: #000000; border-radius: 13px; .transition() ; &:hover{ background: #03262F; border: 1px solid #000000; box-sizing: border-box; border-radius: 13px; color: white; } } } &-right{ text-align: right; color: rgba(0, 0, 0, 0.51); font-size: 14px; line-height: 17px; div{ color: #4F3434; font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 36px; line-height: 42px; } b{ margin-top: 10px; display: block; font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 24px; line-height: 28px; color: #4F3434; } } &-content{ display: flex; justify-content: space-between; padding-top: 5px; } &-left{ font-family: Oranienbaum; font-size: 24px; line-height: 28px; width: 156px; color: #000000; } &-img{ height: 264px; width: 100%; img{ .c_img } } &s{ &-row{ display: flex; align-items: center; margin-top: 70px; } &-date{ font-size: 36px; line-height: 42px; color: #4F3434; font-family: Oranienbaum; padding-left: 40px; margin-right: 140px; } } } .footer{ margin-top: 25px; .wrap{ &:first-child{ background: #03262F; padding: 50px; } &:nth-child(2){ padding-top: 10px; padding-bottom: 20px; overflow: hidden; font-size: 18px; line-height: 21px; justify-content: space-between; display: flex; align-items: center; letter-spacing: -0.292683px; color: #000000; position: relative; span{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 96px; line-height: 111px; /* identical to box height */ letter-spacing: 1px; position: absolute; transform: translateY(20%); text-align: center; width: 100%; color: #03262F; } } } &-politic{ font-style: normal; font-weight: normal; font-size: 18px; line-height: 21px; /* identical to box height */ display: flex; align-items: center; text-decoration-line: underline; justify-content: center; color: #FFFFFF; } &-right{ text-align: right; } &-menu{ display: flex; justify-content: space-between; font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 24px; line-height: 28px; color: #FFFFFF; } &-flex{ display: flex; align-items: center; font-size: 18px; line-height: 22px; margin: 40px 0; color: white; b{ font-family: Oranienbaum; font-size: 36px; font-weight: 400; line-height: 42px; display: block; letter-spacing: 1px; color: #FFFFFF; } justify-content: space-between; } } .home-date-btn{ .transition(); &:hover{ border: 2px solid #E7E1DA; box-shadow: none; } } .about-form-btn{ .transition(); &:hover{ color: white; background: #03262F; border: 2px solid #F7F0E9; box-sizing: border-box; border-radius: 13px; } } .header-menu a, .footer-menu a{ .transition(); &:hover { text-decoration: underline; } } .mbilet-right-btn, .cart-bilet-btn{ .transition(); img:nth-child(2){ display: none; } svg{ margin-right: 15px; } &:hover{ img:nth-child(1){ display: none; } img:nth-child(2){ display: inline; } svg{ fill: #FFFFFF!important; } color: #FFFFFF; background: #03262F; } } //Data Picker .ui-datepicker-group{ width: 370px!important; } .ui-datepicker.ui-datepicker-multi{ width: 1350px!important; margin: 0 auto; display: flex!important;justify-content: space-between; } .ui-datepicker-row-break{ display: none!important; } .ui-datepicker th span, .ui-datepicker td span, .ui-datepicker td a{ width: 38px; height: 38px; font-size: 16px; line-height: 32px; text-align: center; letter-spacing: -0.03em; color: #000000; } .ui-state-active{ } .ui-datepicker td{ padding: 7px; } .ui-state-disabled{ opacity: 0.3; } .ui-state-active{ a{ color: #2F40DC!important; font-weight: 700; } } .ui-datepicker td.selected{ &.selected-start{ a{ background: #3F8BFD; border: 1px solid #A0C6FF; box-sizing: border-box; /* 3dp */ box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 3px 3px rgba(0, 0, 0, 0.14); border-radius: 14px; color: white!important; } border-top-left-radius: 14px; border-bottom-left-radius: 14px; } &.selected-end{ a{ background: #3F8BFD; border: 1px solid #A0C6FF; box-sizing: border-box; /* 3dp */ box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 3px 3px rgba(0, 0, 0, 0.14); border-radius: 14px; color: white!important; } border-top-right-radius: 14px; border-bottom-right-radius: 14px; } background: rgba(35, 35, 35, 0.13); a{ //color: #FFFFFF; } } .ui-datepicker .ui-datepicker-header{ position: static; } .ui-datepicker.ui-datepicker-multi{ position: relative; } .ui-datepicker .ui-datepicker-next{ position: absolute; right: 0!important; background: url("../imgs/date-next.png"); background-position: center center; background-repeat: no-repeat; cursor: pointer; top: 200px!important; transform: translateY(-50%) !important; } .ui-datepicker .ui-datepicker-prev{ position: absolute; left: 0!important; cursor: pointer; background: url("../imgs/date-prev.png"); background-position: center center; background-repeat: no-repeat; top: 200px!important; transform: translateY(-50%) !important; } //Data Picker (END) .mwrap{ width: 1230px; } .psevdo-item{ height: 0 !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; } .mbilet{ position: relative; height: 200px; margin-top: 25px; &-bg{ .pos_absc } &-right{ &-ttl{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 36px; line-height: 42px; margin-bottom: 35px; letter-spacing: -0.03em; color: #000000; } &-btn{ width: 393px; background: #FDBE3F; border-radius: 13px 0 0 13px; display: flex; align-items: center; padding-left: 25px; height: 48px; font-size: 18px; line-height: 25px; letter-spacing: -0.292683px; color: #000000; img{ margin-right: 20px; } } } &-left{ &-ttl{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 36px; line-height: 42px; margin-bottom: 0px; padding-right: 70px; letter-spacing: -0.03em; color: #000000; } &-flex{ display: flex; } &-item{ margin-right: 30px; span{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 24px; line-height: 28px; letter-spacing: -0.03em; color: #000000; display: block; } label{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; line-height: 24px; letter-spacing: -0.03em; color: #000000; opacity: 0.5; } } } &-body{ position: absolute; overflow: hidden; padding-left: 75px; padding-top: 40px; width: 1207px; padding-bottom: 20px; display: flex; justify-content: space-between; } } .cart{ padding: 50px 0; &-gallery{ margin: 30px 0; display: flex; flex-wrap: wrap; position: relative; justify-content: space-between; &-play{ background: rgba(49, 43, 43, 0.5); border: 1px solid #FFFFFF; width: 87px; height: 87px; border-radius: 50%; box-sizing: border-box; box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.46); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; } &-content{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; bottom: 0 ; top: 0; span{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; line-height: 24px; letter-spacing: -0.03em; margin: 4px 0; color: #FFFFFF; } b{ font-size: 16px; line-height: 24px; letter-spacing: -0.03em; color: #FFFFFF; } } &-foto{ img{ .c_img } } &-video{ .cart-gallery-box { img{ top: -25px; bottom: -25px; left: -25px; right: -25px; filter: blur(4px); width: calc(100% + 50px); height:calc(100% + 50px); position: absolute; max-width: 1000px; } } } &-box{ overflow: hidden; height: 100%; position: relative;; } &-item{ width: 285px; height: 296px; box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.2), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 12px 17px rgba(0, 0, 0, 0.14); padding: 3px; margin-bottom: 25px; } &-bg{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 288px; line-height: 80px; letter-spacing: -0.03em; .pos_absc; max-width: 10000px; color: #000000; opacity: 0.1; } a{ position: relative; z-index: 3; } } &-about-event{ width: 870px; margin:25px auto; font-family: Open Sans; font-size: 18px; line-height: 150%; letter-spacing: -0.03em; color: #000000; .hide{ display: none; } &-more{ font-size: 18px; cursor: pointer; line-height: 150%; letter-spacing: -0.03em; text-decoration-line: underline; display: block; margin-top: 10px; color: #03262F; } } &-bilet{ margin: 30px 0; position: relative; height: 344px; &-btn{ width: 100%; background: #FDBE3F; border-radius: 12px 0 0 12px; height: 48px; display: flex; align-items: center; padding-left: 20px; font-family: Open Sans; cursor: pointer; font-style: normal; font-weight: normal; font-size: 18px; line-height: 25px; letter-spacing: -0.292683px; color: #000000; img{ margin-right: 30px; } } &-left{ display: flex; align-items: center; &-left{ width: 231px; p{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 36px; line-height: 42px; letter-spacing: -0.03em; color: #03262F; display: block; margin-bottom: 20px; } span{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 18px; line-height: 150%; letter-spacing: -0.03em; color: #000000; } } &-right{ width: 210px; position: relative; margin-left: 85px; a{ position: absolute; text-align: right; font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; width: 65px; top: 20px; right: -85px; text-align: right; letter-spacing: -0.03em; color: #000000; opacity: 0.5; } p{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 24px; line-height: 28px; letter-spacing: -0.03em; display: block; margin-bottom: 25px; color: #000000; } span{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; line-height: 24px; letter-spacing: -0.03em; color: #000000; opacity: 0.5; } } } &-right{ width: 400px; &-ttl{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 48px; line-height: 55px; display: flex; align-items: center; text-align: right; margin-bottom: 20px; letter-spacing: -0.03em; color: #000000; } &-ttl2{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 24px; line-height: 28px; letter-spacing: -0.03em; color: #000000; } &-flex{ display: flex; margin: 15px 0; } &-item{ margin-right: 35px; } &-label{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; line-height: 24px; letter-spacing: -0.03em; color: #000000; opacity: 0.5; } } &-content{ display: flex; justify-content: space-between; width: 100%; height: 100%; position: relative; z-index: 3; padding-left: 100px; padding-top: 45px; padding-bottom: 30px; } &-bg{ .pos_absc; max-width: 100000px; } } &-ttl{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 48px; line-height: 80px; text-align: center; letter-spacing: -0.03em; color: #03262F; &-label{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; line-height: 24px; text-align: center; letter-spacing: -0.03em; color: #000000; opacity: 0.5; } } &-descr{ position: relative; &-content{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 18px; line-height: 150%; letter-spacing: -0.03em; width: 909px; margin: 0 auto; color: #000000; text-align: center; } margin-bottom: 40px; } &-head{ &-shadow{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 288px; line-height: 235px; display: flex; align-items: center; text-align: center; letter-spacing: -0.03em; color: #000000; max-width: 10000000px; opacity: 0.03; .pos_absc; } display: flex; align-items: center; justify-content: center; &-label{ position: relative; font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 24px; line-height: 28px; letter-spacing: -0.03em; color: #03262F; } } &-head-ttl{ position: relative; font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 96px; line-height: 111px; text-align: center; letter-spacing: -0.03em; width: 804px; margin: 0 auto; color: #03262F; margin-bottom: 55px; } &-tags{ display: flex; justify-content: center; a{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; line-height: 30px; display: flex; align-items: center; justify-content: center; padding: 0 15px; margin: 0 5px; border: 1px solid #03262F; box-sizing: border-box; border-radius: 7px; color: #000000; } } } .actor{ width: 180px; height: 248px; //margin: 0 10px; margin-bottom: 20px; &-more{ width: 180px; height: 248px; border: 2px dashed #C4C4C4; padding: 25px 20px; margin: 0 15px; cursor: pointer; p{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 18px; line-height: 21px; text-align: center; letter-spacing: -0.03em; color: #224046; } &-number{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 48px; line-height: 55px; text-align: center; letter-spacing: 0.12em; text-transform: uppercase; color: #03262F; } &-content{ background: #EBE4DD; border-radius: 5px; display: flex; align-items: center; text-align: center; justify-content: center; flex-direction: column; height: 100%; span{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; line-height: 24px; text-align: center; letter-spacing: -0.03em; color: #03262F; opacity: 0.3; } } } &-name{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 18px; width: 100px; margin: 0 auto; line-height: 21px; margin-top: 15px; letter-spacing: -0.03em; color: #000000; } background: #FFFFFF; box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.2), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 12px 17px rgba(0, 0, 0, 0.14); padding: 20px; text-align: center; &-img{ width: 100%; height: 145px; overflow: hidden; border-radius: 50%; border: 3px solid #03262F; img{ .c_img; } } &s{ margin: 40px 0; display: flex; flex-wrap: wrap; justify-content: space-between; } } .about{ .cart-head-ttl { margin-bottom: 0; } .cart-head-shadow{ top: -40%; } &-form{ width: 451px; margin: 0 auto; margin-bottom: 20px; background: #EBE4DD; padding: 30px 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 3px; &-b{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 36px; line-height: 80px; color: #03262F; } &-btn{ width: 144px; height: 42.08px; display: flex; align-items: center; justify-content: center; font-family: Roboto Condensed; font-style: normal; font-weight: normal; font-size: 18px; line-height: 21px; cursor: pointer; margin-top: 30px; background: #EBE4DD; border: 2px solid #03262F; text-align: center; letter-spacing: -0.292683px; color: #03262F; border-radius: 13px; box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.12), 0px 9px 12px rgba(0, 0, 0, 0.14); } span{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 18px; line-height: 150%; /* or 27px */ text-align: center; letter-spacing: -0.03em; color: #000000; opacity: 0.5; } label{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; line-height: 24px; letter-spacing: -0.03em; position: relative; top: -15px; color: #000000; opacity: 0.5; } } } .partner{ width: 285px; margin-top: 25px; &-img{ background: #FFFFFF; width: 100%; padding: 40px; height: 641px; box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.2), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 12px 17px rgba(0, 0, 0, 0.14); margin-bottom: 25px; } &-add{ width: 285px; margin-top: 25px; position: relative; height: 641px; &-content{ text-align: center; width: 100%; display: flex; padding-top: 20px; flex-direction: column; justify-content: center; align-items: center; .pos_absc; span{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 24px; line-height: 30px; letter-spacing: -0.03em; color: #2B2B2B; } } } &-name{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 18px; line-height: 150%; /* or 27px */ letter-spacing: -0.03em; color: #000000; opacity: 0.5; } &s{ display: flex; flex-wrap: wrap; justify-content: space-between; } } /** * Адаптивка * **/ @media only screen and(max-width: 1699px) { .wrap,.d1 .wrap{ width: 1200px; padding-left: 15px ; padding-right: 15px; } .header-menu { position: absolute; display: flex; left: 50%; transform: translateX(-48.6%); justify-content: center; align-items: center; a{ margin: 0 25px; white-space: nowrap; } } .footer .wrap, .header .wrap { width: 96%; } .header-menu a:nth-child(3){ width: 135px; flex-shrink: 0; } .mwrap{ width: 1260px; } .ui-datepicker-group { width: 350px!important; } .events-date{ font-size: 36px; text-align: center; width: 100%; margin:0; padding: 0; margin-bottom: 20px; } .event { width: 280px; margin: 0px 6px; } .event .event-btn:first-child{ width: 135px; } .ui-datepicker td { padding: 5px; } .header-menu a{ margin: 0 15px; } body .events-date{ width: 100%; padding-left: 0; } .events-row{ flex-wrap: wrap; } //.home-date-btn{ // width: 249px; // height: 49px; // background: #03262F; // box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.25); // border-radius: 49px; //} } .js-events-more{ display: none; margin-left: -3px; } .cart-about-event p{ margin-bottom: 20px; } .oferta{ width: 797px; padding-top: 80px; padding-bottom: 30px; h2{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 48px; line-height: 80px; text-align: center; letter-spacing: -0.03em; margin-bottom: 45px; color: #000000; } p{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 18px; margin-bottom: 20px; line-height: 150%; /* or 27px */ letter-spacing: -0.03em; color: #000000; } h3{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 36px; margin-top: 45px; margin-bottom: 20px; letter-spacing: -0.03em; text-transform: uppercase; color: #000000; } } @media only screen and(max-width: 1199px) { .md-show {display: block !important;} .md-hide {display: none !important;} } //Правки .header-menu{ position: absolute; left: 50%; transform: translateX(-48.6%); } .headerm{ display: none; } .events-date{ padding-left: 74px; } .actor-more{ margin: 0; } .cart-ttl-bg{ .pos_absc; font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 288px; line-height: 80px; display: flex; align-items: center; letter-spacing: -0.03em; color: #000000; opacity: 0.1; top: 0; } .footer-menu{ a{ width: 20%; text-align: center; &:first-child{text-align: left} &:last-child{text-align: right} } } //body{ // position: relative; // &::after{ // content: ""; // z-index: 34; // position: fixed; // left: 50%; // bottom: 0; // transform: translateX(-50%); // top: 0; // width: 1px; // background: red; // } //} //Правки END .events .wrap{ width: 1230px; display: flex; justify-content: space-between; flex-wrap: wrap; .event{ margin-right: 0; margin-bottom: 30px; } } .footer-politic{ justify-content: space-between; &>div{ display: flex; a{ margin: 0 10px; } } } .d1{ .owl-item img{ //max-height: 500px; object-fit: cover; } } .header-top-logo { height: 50px; } .header-top-logo a{ position: relative; top: 25px; } .actors{ .owl-nav.disabled{ display: flex!important; } .owl-prev { left: -20px; } .owl-prev { position: absolute; top: 50%; transform: translateY(-50%); } .owl-next { right: -20px; } .owl-next { position: absolute; top: 50%; transform: translateY(-50%); } } .header-left div, .header-right div{ background: #03262F; font-style: normal; font-weight: normal; font-size: 16px; width: auto; white-space: nowrap; line-height: 16px; /* identical to box height, or 100% */ border-radius: 0; display: flex; align-items: center; text-align: right; letter-spacing: -0.292683px; color: #F7F0E9; } .burger{ display: none; } .rekvisit-more{ margin-top: 0; } .rekvisit-text{ display: none; } .dark{ position: fixed; top: 0; right: 0; display: none; bottom: 0; left: 0; z-index: 34; background: rgba(0, 0, 0, 0.5); } .d1-item-ttl{ opacity: 0.05; } .d1 .owl-dot.active{ background: white!important; } .home-date-btn{ margin-top: 0; &-in{ background: #EBE4DD; border-radius: 5px 5px 13px 13px; } &-text{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 18px; line-height: 21px; text-align: center; letter-spacing: -0.03em; padding: 10px; color: #224046; } &-body{ background: #F7F0E9; border: 2px dashed #C4C4C4; width: 376px; padding: 20px; margin: 0 auto; margin-top: 70px; } } .cart-gallery-more{ background: rgba(49, 43, 43, 0.5); width: 148px; height: 148px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: white; text-align: center; p{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 18px; line-height: 21px; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; } span{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 48px; line-height: 55px; letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; } .pos_absc(); box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.46); } .d1m { display: none; } .event-left{ display: flex; align-items: center; } .burger-content{ span{ font-size: 18px; line-height: 150%; /* identical to box height, or 27px */ display: flex; align-items: center; letter-spacing: -0.03em; text-decoration-line: underline; color: #000000; font-family: "Open Sans"; opacity: 0.4; } } .cart-tags a{ text-align: center; } .actors{ .actor{ box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.2), 0px 5px 5px rgba(0, 0, 0, 0.12), 0px 12px 5px rgba(0, 0, 0, 0.14); } .owl-item{ display: flex; justify-content: center; } } @media only screen and(max-width: 1260px) { .cart-bilet-left-left p{ height: 126px; } .cart{ padding-top: 100px; } .cart-bilet-left-left{ display: flex; justify-content: center; text-align: center; } .footer-bilet{ background: #01171D; font-style: normal; font-weight: normal; justify-content: center; font-size: 16px; margin-top: 10px; line-height: 24px; /* identical to box height, or 150% */ display: flex; align-items: center; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; } .cart-bilet-right-ttl{ height: 55px; } .cart-gallery-item.psevdo-item{ display: none!important; } .wrap{ width: 360px; } .d1{ display: none!important; &m{ display: flex; &-body{ height: 349px; background: #EBE4DD; display: flex; align-items: center; justify-content: center;flex-direction: column; } &-logo{ margin-bottom: 40px; } &-text{ font-size: 18px; line-height: 150%; font-family: Oranienbaum; text-align: center; letter-spacing: -0.03em; color: #03262F; } } } .events .wrap{ display: flex; justify-content: center; } .events .wrap .event{ margin: 0px 10px!important; margin-bottom: 20px!important; } .calendar-event-btn{ display: none!important; } .events-row{ display: none; &:first-child{ display: flex; } } .cart-gallery-more{width: 84px; height: 84px; span{ font-size: 24px; line-height: 28px; } p{ font-size: 13px; line-height: 15px; } } .oferta{ h2{ font-size: 36px; line-height: 36px; } p{ font-size: 16px; line-height: 24px; } h3{ font-size: 24px; line-height: 36px; } } .home-date-btn{ margin: 0!important; } .d1-item-ttl{ opacity: 0.05; } .cart-descr-content,.cart-about-event{ width: 240px; margin: 0 auto; } .cart-about-event-more{ text-align: center; } .cart-about-event{ margin: 25px auto; } .cart-ttl-bg{ display: none; } .cart-gallery-play img{ width: 10.7px; height: 11.26px; margin-left: 3px; } .date_range{ position: relative; } .cart-bottom{ .standart-ttl,.events-row{ display: none; } } .events-row{ justify-content: center; } .ui-datepicker .ui-datepicker-next{ right: -20px!important; } .ui-datepicker .ui-datepicker-prev{ left: -20px!important; } .ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev{ top: 160px!important; } .burger{ position: fixed; right: -100%; opacity: 0; width: 100%; top: 0; display: flex;flex-direction: column; justify-content: space-between; bottom: 0; z-index: 101; background: #F7F0E9; .transition(); padding: 30px; &-head{ display: flex; align-items: center; justify-content: space-between; font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 14px; line-height: 24px; letter-spacing: 0.055em; text-transform: uppercase; color: #03262F; } &-content{ a{ font-size: 36px; line-height: 42px; font-family: Oranienbaum; letter-spacing: -0.03em; display: block; margin-top: 35px; color: #000000; } } &.active{ opacity: 1; right: 0; } } .sm-show {display: block !important;} .sm-hide {display: none !important;} .header{ display: none; } .cart-bilet-content{ padding: 55px 15px 25px 15px; display: block; } .cart-bilet-left-right{ display: none; } .cart-bilet-left-left{ width: 100%; text-align: center; p{ font-size: 36px; line-height: 42px; display: flex; align-items: center; text-align: center; letter-spacing: -0.03em; color: #03262F; } span{ display: none; } } .cart-ttl{ font-size: 36px; line-height: 36px; &-label{ font-size: 16px; line-height: 24px; color: #000000; opacity: 0.5; } } .cart-bilet-right{ text-align: center; &-ttl{ margin-bottom: 10px; font-size: 36px; justify-content: center; } } .cart-bilet-btn{ padding: 0 20px; border-radius: 14px; } .cart-bilet-right-flex{ justify-content: space-around; margin-bottom: 60px; } .cart-bilet{ height: 517px; width: 300px; margin: 30px auto; } .headerm{ padding: 10px 0; display:block; .wrap{ font-size: 14px; line-height: 24px; text-transform: uppercase; color: #03262F; font-family: Oranienbaum; display: flex; align-items: center; justify-content: space-between; } } .d1 .owl-prev{ left: 15px;} .d1-line{ display: none; } .d1-top-left{ text-align: center; display: flex; flex-direction: column; align-items: center; img{ margin: 0; margin-bottom: 15px; } } .d1-item-ttl{ display: none; } .d1-middle{ display: none; } .d1-item{ height: auto; } .d1-top{ text-align: center; display: flex; flex-direction: column; align-items: center; } .d1-item{ padding: 50px 0; } .d1 .owl-dots{ bottom: 0; } .d1-text { font-size: 20px; line-height: 1.5; br{ display: none; } } .d1 .owl-next{ right: 15px;} .headerm-logo{ position: absolute; left: 50%; transform: translateX(-50%); top: 5px; width: 180px; img{ width: 100%; } } .headerm{ padding-top: 25px; } .d1-top-right{ text-align: center; margin: 15px 0; } .standart-ttl b{ font-size: 36px; } .home-date-btn{ margin-top: 30px; } .ui-datepicker{ width: 100%; } .ui-datepicker th span, .ui-datepicker td span, .ui-datepicker td a { width: 30px; height: 30px; font-size: 14px; line-height: 24px; } .event{ margin-bottom: 15px; } .home-date-block{ width: 290px ; margin: 0 auto; } .d1-text{ margin: 0 auto; } .footer .wrap:first-child{ overflow: hidden; width: 100% ; position: relative; margin: 0 auto; } .footer-center{ bottom: -60px; left: 50%; transform: translateX(-50%); } .footer .wrap:nth-child(2) span{ font-size: 46px; left: 0; right: 0; } .footer .wrap:nth-child(2) { div{ display: none; } } .footer-menu{ display: none; } .footer-politic{ justify-content: center; margin-top: 25px; &>a{ display: none; } } .footer .wrap:nth-child(2){ display: none; } .footer .wrap:first-child{ width: 100%; padding: 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .footer-right{ font-size: 16px; color: rgba(255, 255, 255, 0.51); text-align: center; margin: 0; line-height: 24px; } .footer-flex{ margin: 0; } .d1m{ background: transparent; height: auto; .wrap{ display: flex; flex-direction: column; align-items: center; justify-content: center; } margin-top: 70px; span{ background: #FFFFFF; padding: 3px 5px; margin-top: 5px; font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 24px; letter-spacing: -0.03em; color: #03262F; } } .footer-flex b{ font-size: 24px; color: white; line-height: 28px; } .footer-left{ display: none; } .footer-center{ position: absolute; width: 100%; bottom: 40px; img{ position: absolute; width: 108px; &:nth-child(3){ display: none; } &:nth-child(2){ right: 0; display: block; } } } .cart-head-label{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; line-height: 24px; text-align: center; letter-spacing: -0.03em; color: #000000; opacity: 0.5; &:last-child{display: none} } .cart-descr-content{ font-size: 18px; color: #000000; line-height: 150%; text-align: center; } .cart-head-shadow{ display: none; } .cart-head{ flex-direction: column; justify-content: center; margin-top: 40px; &-ttl{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 48px; line-height: 55px; letter-spacing: -0.03em; color: #03262F; } } .actor{ margin: 25px; &s{ width: 320px!important; .owl-prev { left: 15px; } .owl-prev { position: absolute; top: 50%; transform: translateY(-50%); } .owl-next { right: 15px; } .owl-next { position: absolute; top: 50%; transform: translateY(-50%); } margin: 0 auto; .owl-item{display: flex;justify-content: center} } } .actor-more,.cart-gallery-bg{ display: none; } .actors-all-btn{ margin-top: 0; margin-bottom: 35px; } .cart-gallery-item{ width: 105px; height: 104px; } .cart-gallery-content span, .cart-gallery-content b{ display: none; } .cart-gallery-play{ width: 40px; height: 40px; } .cart-gallery{ justify-content: center; &-item{ margin-left: 15px; margin-right: 15px; } } .mbilet-left,.mbilet-bg{ display: none; } .mbilet-body{ overflow: visible; } .cart{ padding-bottom: 0; } .mbilet-right-btn{ border-radius: 14px; width: 240px; box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.25); } .mbilet-right-ttl{ text-align: center; margin-bottom: 15px; } .mbilet-right{ margin: 0 auto; } .mbilet{ height: auto; } .mbilet-body{ position: static; height: auto; padding: 0; width: 100%; margin: 0 auto; } .about-form{ padding: 15px; } .about-form span{ font-size: 16px; } .partner-img{ display: none; } .partner{ margin-top: 0; &s{ margin-top: 25px; justify-content: center; } } .partner-name{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 18px; line-height: 24px; text-align: center; letter-spacing: -0.03em; opacity: 1; color: #000000; &::after{ content: "-"; display: block; margin: 10px 0; text-align: center; } } .partner-add{ order: 3; height: auto; img{ display: none; } &-content{ transform: none; position: static; border: 2px dashed #C4C4C4; padding: 40px 15px; } } } .actorsfd{ width: 1229px; background: #FFFFFF; display: none; box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.25); border-radius: 13px; padding: 40px 105px 50px; .pos_absc; position: fixed; z-index: 3454; &-item{ width: 20%; margin-bottom: 15px } &-close{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 16px; cursor: pointer; line-height: 24px; margin: 0 auto; margin-top: 25px; width: 70px; text-align: center; letter-spacing: -0.03em; color: #03262F; opacity: 0.5; } span.actorsfd-item{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 14px; line-height: 24px; /* or 171% */ text-align: center; letter-spacing: -0.03em; color: #7A7979; } &-flex{ display: flex; flex-wrap: wrap; font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 18px; line-height: 24px; text-align: center; letter-spacing: -0.03em; color: #000000; } &-ttl{ /* Title */ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 48px; line-height: 80px; text-align: center; margin-bottom: 25px; letter-spacing: -0.03em; color: #03262F; } } .actorsf{ position: fixed; bottom: -70vh; left: 0; right: 0; background: #FFFFFF; z-index: 434; height: 70vh; &-item{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 18px; line-height: 24px; margin-bottom: 10px; text-align: center; letter-spacing: -0.03em; color: #000000; } &-content{ text-align: center; padding: 25px; span{ font-family: Open Sans; font-style: normal; font-weight: normal; font-size: 14px; line-height: 24px; text-align: center; letter-spacing: -0.03em; color: #7A7979; } p{ font-family: Oranienbaum; font-style: normal; font-weight: normal; font-size: 24px; line-height: 36px; margin-bottom: 20px; display: block; letter-spacing: -0.03em; color: #03262F; } } &-head{ width: 100%; height: 40px; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; background: #F7F0E9; } .transition(); &.active{ bottom: 0; } .js-events-more{ margin-left: 0; } .calendar-event-btn{ display: none; } .events .wrap{ justify-content: center; .event{ margin-left: 0; } } } #response .event{ margin: 0 15px; margin-bottom: 30px; } .event-img{ display: block; } @media only screen and(max-width: 767px) { .xs-show {display: block !important;} .xs-hide {display: none !important;} .row { margin-left: -10px; margin-right: -10px; } [class*="col-"] { padding-left: 10px; padding-right: 10px; } } @media only screen and(max-width: 375px) { } @media only screen and(max-width: 320px) { } /** * Owl Carousel * **/ .owl-carousel { display: none; width: 100%; div{ max-width: 2432432px; } -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot { background: none; color: inherit; border: none; padding: 0 !important; font: inherit; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { animation-duration: 1000ms; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item { /** This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong calculation of the height of the owl-item that breaks page layouts */ } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { max-height: 0; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; }