@charset "utf-8"; @import "../initial"; // // Widget // // Widget // ## gerenral styles .jarallax-video-audio, .jarallax-video-control-play{ bottom: 2%!important; top: auto!important; } .jarallax-video-control-play{ margin-bottom: 66px!important; } .w-ba-banner { position: relative; z-index: 0; height: auto!important; .cursor { cursor: pointer; } } .ad-banner-widget-6{ .w-ad-banner__caption a{ display: block; width: 100%; height: 100%; } } .w-ba-banner__wrap { width: 100%; max-width: 100%; height: auto; overflow: hidden; } .w-ba-banner__slide { width: 100%; } [data-cycle-carousel-visible="3"] .w-ba-banner__slide { width: auto; height: auto } [data-cycle-carousel-visible="3"]{ padding-bottom: 0; } .header-banner{ .ad-overlay{ h3{ display: none; } } } .ad-overlay { color: #333333; z-index: 200; font-family: $main-font; width: 100%; bottom: 0; // background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40%,#000); h3 { margin: 0; padding: 0 0.5rem; color: #fff; font-size: 33px; font-weight: 400; } p { margin: 0; padding: 0.5rem; color: $theme-white; } @media(max-width: $screen-sm) { padding: 0.5em 1em; h3 { font-size: 1em; } p { font-size: 0.75em; padding: 0.3rem 0.5rem 0.8rem 0.5rem; } } } .banner-pager { @include list-reset; position: absolute; bottom: 0.5rem; z-index: 200; text-align:center; width: 100%; li { display: inline-block; height: 3px; width: 4%; cursor: pointer; margin: 0 2px; } button { background: hsla(0,0%,100%,.4); width: 100%; height: 3px; border: unset; } .active-slide button { opacity: 1; background: $theme-color-green; } a { background: white; display: inline-block; margin-right: 0.25em; width: 0.8em; height: 0.8em; border-radius: 50%; behavior: url("/assets/ie_support/PIE2/PIE.htc"); opacity: .5; cursor:pointer; border:0; } .active-slide a { opacity: 1; } } .controlplay{ position: absolute; right: 1em; top: 3%; z-index: 200; a { display: inline-block; margin-right: 0.25em; cursor: pointer; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.2); i { font-family: FontAwesome; position: relative; font-size: 1rem; line-height: 1; color: #FFF; vertical-align: middle; font-style: unset; } } .resume-slide i::before{ content:"\f04b" } .pause-slide i::before{ content:"\f04c" } @media(max-width: $screen-sm) { right: 0; a { padding: 0 5px;} a i { font-size: 0.75em; } } } ul.button-mid{ .prev-button{ cursor: pointer; border-radius: 50%; behavior: url("/assets/ie_support/PIE2/PIE.htc"); transition: 0.4s; position: relative; float:left; left: 0.5rem; width: 2.5rem; height: 2.5rem; font-size: 2.2rem; color: #ffffff; background: rgba(0,0,0,0.2); text-align: center; line-height: 2.5rem; top: 50%; position: absolute; transform: translateY(-50%); z-index: 999; &:hover { background: rgba(0,0,0,0.1); } @media(max-width: $screen-xs) { line-height: 1.5rem; height: 1.5rem; font-size: 1.5rem; width: 1.5rem; } } .next-button{ cursor: pointer; border-radius: 50%; behavior: url("/assets/ie_support/PIE2/PIE.htc"); float: right; transition: 0.4s; position: relative; right: 0.5rem; width: 2.5rem; height: 2.5rem; font-size: 2.2rem; color: $theme-white; background: rgba(0,0,0,0.2); text-align: center; line-height: 2.5rem; top: 50%; position: absolute; transform: translateY(-50%); z-index: 999; &:hover { background: rgba(0,0,0,0.1); } @media(max-width: $screen-xs) { line-height: 1.5rem; height: 1.5rem; font-size: 1.5rem; width: 1.5rem; } } } .banner-responsive { width: 100%; } .background-overlay{ background-color: #F5F5F5; opacity: 0.95; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; height: 100%; top: 0; left: 0; z-index: 100; position: absolute; width: 100%; } // Widget 7 .ba-banner-widget-7 { .ad-overlay h3{ color: #333333; } .w-ba-banner__caption { color: $theme-color-main; z-index: 200; background-image: none; padding:2em 11% 4em; h2 { font-family: $main-font; font-size: $w-caption-font-size; margin: 0.5em 0; } p { font-family: $main-font; font-size: $w-caption-desc; } } @media(max-width: $screen-sm) { .ad-overlay { padding: 2.5em 1em; h3 { font-size: 2em; } p { font-size: 0.75em; } } .controlplay { right: 0; a { padding: 0 5px;} a i { font-size: 0.75em; } } img{ max-width:none!important; } .banner-responsive { width: unset!important; } } } // Widget 6 .ba-banner-widget-6 { height: 100%; .w-ba-banner__wrap{ height: 100%; } .w-ba-banner__caption { color: $theme-color-main; z-index: 200; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); transition: all .25s; &:hover{ background: transparent; } h3{ font-size: 1.2rem; } h2 { font-family: $main-font; font-size: $w-caption-font-size; margin: 0.5em 0; } p { font-family: $main-font; font-size: $w-caption-desc; font-weight: initial; } } @media(min-width:$screen-xs){ .w-ba-banner__slide{ height: 100%; } img{ width: auto; height: 100%; max-width: initial; left: 10%; } .w-ba-banner__wrap{ height: 100%; } } @media(max-width: $screen-sm) { .ad-overlay { h3 { font-size: 0.6em; } p { font-size: 0.5em; } } .controlplay { right: 0; a { padding: 0 5px;} a i { font-size: 0.75em; } } } } // Widget 0 .ba-banner-widget-0 { .w-ba-banner__wrap{ position: fixed; } .w-ba-banner__slide{ @media(min-width:1601px){ height: 1080px; } @media screen and (min-width:1451px) and (max-width:1600px){ height: 900px; } @media screen and (min-width:1281px) and (max-width:1450px){ height: 900px; } @media screen and (min-width:1026px) and (max-width:1280px){ height: 800px; } @media screen and (min-width:991px) and (max-width:1025px){ height: 1360px; } @media screen and (min-width:$screen-xs) and (max-width:990px){ height: 1024px; } @media(max-width: $screen-xs){ height: 820px; } } .banner-responsive{ @media(max-width: 1024px){ width: auto; height: 100%; max-width: fit-content; transform:translate(0%, 63%) scale(2.2); } @media(max-width: 768px){ width: auto; height: 100%; max-width: fit-content; transform:translate(-10%, 50%) scale(2); } @media(max-width: $screen-xs){ width: auto; height: 100%; max-width: fit-content; transform:translate(45%, 100%) scale(3.5); } } .w-ba-banner__image { width: 100%; height: auto; } .youtube, .cycle-youtube { width: 100%; height: 100%; } object, embed { width: 100%; height: 100%; } .banner-pager { right: 1em; top: -2em; z-index: 102; display: none; } .ad-overlay{ text-align: center; padding-top: 20%; position: relative; background: none; // text-shadow: 1px 1px 1px #0000008c; @media screen and (min-width:$screen-xs) and (max-width:1025px){ padding-top: 30%; } @media(max-width: $screen-xs){ padding-top: 60%; } } } // Widget 1 .ba-banner-widget-1 { .w-ba-banner__caption { color: $theme-color-main; z-index: 200; h2 { font-family: $main-font; font-size: $w-caption-font-size; margin: 0.5em 0; } p { font-family: $main-font; font-size:1.2rem; } } @media(max-width: $screen-sm) { .ad-overlay { padding: 1.5em 1em; position: relative; background:#72bcad; h3 { font-size: 1em; } p { font-size: 0.75em; } } .controlplay { right: 0; a { padding: 0 5px;} a i { font-size: 0.75em; } } } } // Widget 2 .ba-banner-widget-2 { .w-ba-banner__image { width: 100%; height: auto; } .youtube, .cycle-youtube { width: 100%; height: 100%; } object, embed { width: 100%; height: 100%; } .banner-pager { right: 1em; top: -2em; z-index: 102; display: none; } } // Widget 3 .ba-banner-widget-3 { .w-ba-banner__wrap { width: 100%; } .w-ba-banner__slide { width: 100%; } .banner-pager { right: 0; bottom: 2em; li { height: unset; width: unset; } } ul.button-mid { display: none; } } //Widget 4 .ba-banner-widget-4 { .w-ba-banner__wrap { text-align: center; // img { margin-bottom: 0.5rem; } } } // specific style for youtube widget .ba-banner-widget-youtube { .cycle-slide-active { z-index: 101 !important; } } //Widget 5 .ba-banner-widget-5 { background: url(/assets/BANNER-BG-01.jpg) 0 0 no-repeat; .slide-img { padding: 1rem 1.5rem; } .slide-content { z-index: 200; font-family: $main-font; padding-top: 0.5rem; padding-left: 0; h3 { font-size: 1rem; margin: 0.5em 0; color: #12517a; } div { white-space: normal; word-break: break-all; font-size: 1rem; color: #373634; padding: 0 2em 0.5em 0; } } .controlplay { display: none; } .banner-pager { right: 1rem; top: 0; width: unset; li { height: unset; width: unset; } a { background: #a0d2f3;} } @media(max-width: $screen-sm) { .slide-content { padding: 0.5em 1em; position: relative; background: #a0d2f3; h3 { font-size: 1em; } div { font-size: 0.75em; } } .controlplay { right: 0; a { padding: 0 5px;} a i { font-size: 0.75em; } } } @media(max-width: $screen-sm -1) { ul.button-mid.next-button, ul.button-mid.prev-button{ top: 35%; transform: translateY(-35%); } .slide-content h3, .slide-content div { color: $theme-white; } .w-ba-banner__wrap { overflow: visible;} } } .controlplay{ width: auto; } .button-mid{ position: absolute; width: 100%; height: 100%; }