Current Path : /var/www/www-root/data/www/www.monolith-realty.ru/bitrix/templates/landing24/themes/app/ |
Current File : /var/www/www-root/data/www/www.monolith-realty.ru/bitrix/templates/landing24/themes/app/app.css |
/*------------------------------------ Default Styles ------------------------------------*/ body { color: #999; background-color: #fff; } a { color: #4fd2c2; outline: none; } a:focus, a:hover { color: #45c2b3; } .nav-link { color: #999; } .nav-link:focus, .nav-link:hover { color: #999; } figure { margin-bottom: 0; } /*------------------------------------ Headings ------------------------------------*/ .h1, .h2, .h3, .h4, .h5, .h6, .h7, h1, h2, h3, h4, h5, h6 { line-height: 1.4; } .h7 { font-size: .75rem; } /*------------------------------------ Displays ------------------------------------*/ .display-5 { font-size: 3rem; font-weight: 300; line-height: 1.1; } /*------------------------------------ Highlight Color ------------------------------------*/ ::-moz-selection { color: #fff; background-color: #4fd2c2; } ::selection { color: #fff; background-color: #4fd2c2; } .g-bg-primary ::-moz-selection { color: #4fd2c2; background-color: #fff; } .g-bg-primary ::selection { color: #4fd2c2; background-color: #fff; } /*------------------------------------ Components ------------------------------------*/ /*------------------------------------ Arrows ------------------------------------*/ .u-arrow-v1::before { display: inline-block; position: relative; top: 50%; left: 50%; vertical-align: top; -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .u-arrow-v1[class*="abs"]::before { position: absolute; } .u-arrow-custom-v1 .u-arrow-icon { display: block; } .u-arrow-custom-v1 .u-arrow-text { position: absolute; top: 50%; transition: transform .3s; } .u-arrow-custom-v1.js-prev .u-arrow-text { -ms-transform: translateY(-50%) translateX(-100%); transform: translateY(-50%) translateX(-100%); } .u-arrow-custom-v1.js-next .u-arrow-text { -ms-transform: translateY(-50%) translateX(100%); transform: translateY(-50%) translateX(100%); } .u-arrow-custom-v1:hover .u-arrow-text { -ms-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); } .u-arrow-custom-v2 { overflow: hidden; transition: background-color 0.3s; } .u-arrow-custom-v2 .u-arrow-icon { transition: transform 0.3s; } .u-arrow-custom-v2 .u-arrow-img { width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s, transform 0.3s; } .u-arrow-custom-v2.js-prev .u-arrow-icon { -ms-transform: translateY(-50%) translateX(10px); transform: translateY(-50%) translateX(10px); } .u-arrow-custom-v2.js-prev .u-arrow-img { -ms-transform: translateX(100%); transform: translateX(100%); } .u-arrow-custom-v2.js-next .u-arrow-icon { -ms-transform: translateY(-50%) translateX(-10px); transform: translateY(-50%) translateX(-10px); } .u-arrow-custom-v2.js-next .u-arrow-img { -ms-transform: translateX(-100%); transform: translateX(-100%); } .u-arrow-custom-v2:hover .u-arrow-icon { -ms-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); } .u-arrow-custom-v2:hover .u-arrow-img { opacity: .6; -ms-transform: translateX(0); transform: translateX(0); } .u-arrow-custom-v3 .u-arrow-helper { content: ""; opacity: 0; transition: transform 0.3s, opacity 0.3s; -ms-transform: scale(0.9); transform: scale(0.9); } .u-arrow-custom-v3 .u-arrow-icon { display: block; } .u-arrow-custom-v3 .u-arrow-icon-before, .u-arrow-custom-v3 .u-arrow-icon-after { position: absolute; left: 25%; transition: transform 0.3s, background-color 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .u-arrow-custom-v3 .u-arrow-icon-before { -ms-transform: translateX(-50%) rotate(30deg); transform: translateX(-50%) rotate(30deg); -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .u-arrow-custom-v3 .u-arrow-icon-after { top: 50%; -ms-transform: translateX(-50%) rotate(-30deg); transform: translateX(-50%) rotate(-30deg); -ms-transform-origin: 0 0; transform-origin: 0 0; } .u-arrow-custom-v3.js-next .u-arrow-icon { -ms-transform: rotate(180deg); transform: rotate(180deg); } .u-arrow-custom-v3:hover .u-arrow-helper { background-color: #fff; opacity: 1; -ms-transform: scale(1); transform: scale(1); } .u-arrow-custom-v3:hover .u-arrow-icon-before, .u-arrow-custom-v3:hover .u-arrow-icon-after { background-color: #4fd2c2; } .u-arrow-custom-v3:hover .u-arrow-icon-before { -ms-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); } .u-arrow-custom-v3:hover .u-arrow-icon-after { -ms-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); } .u-arrow-custom-v4 { width: 62px; height: 62px; transition: width 0.3s, background-color 0.3s; } .u-arrow-custom-v4 h4 { opacity: 0; transition: opacity 0.3s, transform 0.3s; } .u-arrow-custom-v4.js-prev h4 { -ms-transform: translateX(100%); transform: translateX(100%); } .u-arrow-custom-v4.js-next h4 { -ms-transform: translateX(-100%); transform: translateX(-100%); } .u-arrow-custom-v4:hover { width: 200px; } .u-arrow-custom-v4:hover .u-arrow-icon { color: #4fd2c2; } .u-arrow-custom-v4:hover h4 { opacity: 1; transition-delay: 0.1s; -ms-transform: translateX(0); transform: translateX(0); } .u-arrow-custom-v5 .u-arrow-icon::before { transition: transform .3s .3s; } .u-arrow-custom-v5 .u-arrow-text { transition: transform .3s .3s; perspective: 1000px; } .u-arrow-custom-v5 .u-arrow-title { position: absolute; top: 100%; width: 100%; height: 30%; transition: transform 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-transform-origin: 50% 0; transform-origin: 50% 0; transform: rotateX(-90deg); margin: 0; } .u-arrow-custom-v5 .u-arrow-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .u-arrow-custom-v5.js-prev .u-arrow-text { -ms-transform: translateX(-100%); transform: translateX(-100%); } .u-arrow-custom-v5.js-next .u-arrow-text { -ms-transform: translateX(100%); transform: translateX(100%); } .u-arrow-custom-v5:hover .u-arrow-text { -ms-transform: translateX(0); transform: translateX(0); } .u-arrow-custom-v5:hover .u-arrow-title { transition-delay: .6s; transform: rotateX(0deg); } .u-arrow-custom-v5:hover .u-arrow-icon::before { transition-delay: 0s; } .u-arrow-custom-v5:hover.js-prev .u-arrow-icon::before { -ms-transform: translateX(-100%); transform: translateX(-100%); } .u-arrow-custom-v5:hover.js-next .u-arrow-icon::before { -ms-transform: translateX(100%); transform: translateX(100%); } .u-arrow-custom-v6 { overflow: hidden; width: 40px; transition: width .4s, background-color .4s, z-index .4s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .u-arrow-custom-v6 .u-arrow-text { width: 400px; } .u-arrow-custom-v6:hover { width: 400px; z-index: 11; } .u-arrow-custom-v7 { perspective: 1000px; } .u-arrow-custom-v7 .u-arrow-icon::before { position: absolute; top: 50%; left: 50%; -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .u-arrow-custom-v7 .u-arrow-img { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.3s; } .u-arrow-custom-v7.js-prev { perspective-origin: 100% 50%; } .u-arrow-custom-v7.js-prev .u-arrow-img { -ms-transform-origin: 0 50%; transform-origin: 0 50%; transform: rotateY(90deg); } .u-arrow-custom-v7.js-next { perspective-origin: 0 50%; } .u-arrow-custom-v7.js-next .u-arrow-img { -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; transform: rotateY(-90deg); } .u-arrow-custom-v7:hover .u-arrow-icon { color: #4fd2c2; } .u-arrow-custom-v7:hover .u-arrow-img { transform: rotateY(0deg); } .u-arrow-custom-v8 { perspective: 1000px; } .u-arrow-custom-v8 .u-arrow-icon::before { position: absolute; top: 50%; left: 50%; -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .u-arrow-custom-v8 .u-arrow-title, .u-arrow-custom-v8 .u-arrow-img { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .u-arrow-custom-v8 .u-arrow-title { transition: transform 0.3s; } .u-arrow-custom-v8 .u-arrow-text { transition: transform 0.3s 0.3s; transform-style: preserve-3d; } .u-arrow-custom-v8.js-prev { perspective-origin: 100% 50%; } .u-arrow-custom-v8.js-prev .u-arrow-text, .u-arrow-custom-v8.js-prev .u-arrow-title { -ms-transform-origin: 0 50%; transform-origin: 0 50%; transform: rotateY(90deg); } .u-arrow-custom-v8.js-next { perspective-origin: 0 50%; } .u-arrow-custom-v8.js-next .u-arrow-text, .u-arrow-custom-v8.js-next .u-arrow-title { -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; transform: rotateY(-90deg); } .u-arrow-custom-v8:hover .u-arrow-icon { color: #4fd2c2; transition-delay: 0s; } .u-arrow-custom-v8:hover .u-arrow-icon::before { transition-delay: 0s; } .u-arrow-custom-v8:hover .u-arrow-text, .u-arrow-custom-v8:hover .u-arrow-title { transform: rotateY(0deg); } .u-arrow-custom-v8:hover .u-arrow-text { transition-delay: 0s; } .u-arrow-custom-v8:hover .u-arrow-title { transition-delay: .3s; } .u-arrow-custom-v9 { width: 60px; } .u-arrow-custom-v9 .u-arrow-icon::after { content: ""; position: absolute; top: 50%; width: 20px; height: 1px; background: #fff; transition: width .3s .2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .u-arrow-custom-v9 .u-arrow-text::after { content: attr(data-title); position: absolute; top: 100%; left: 0; width: 100%; color: #fff; text-transform: uppercase; opacity: 0; transition: transform 0.3s, opacity 0.3s; margin: 20px 5px 0; } .u-arrow-custom-v9 .u-arrow-img { opacity: 0; box-shadow: 0 1px 0 #fff, 0 -1px 0 #fff; transition: transform .3s, opacity .3s; -ms-transform: scale(0.3); transform: scale(0.3); } .u-arrow-custom-v9.js-prev .u-arrow-icon::after { left: calc(100% - 25px); } .u-arrow-custom-v9.js-next .u-arrow-icon::after { right: calc(100% - 25px); } .u-arrow-custom-v9.js-next .u-arrow-text::after { text-align: right; } .u-arrow-custom-v9:hover { width: 200px; } .u-arrow-custom-v9:hover .u-arrow-icon::after { width: 200px; transition-delay: 0s; } .u-arrow-custom-v9:hover .u-arrow-text { pointer-events: auto; } .u-arrow-custom-v9:hover .u-arrow-text::after { opacity: 1; transition-delay: .2s; -ms-transform: translateY(0); transform: translateY(0); } .u-arrow-custom-v9:hover .u-arrow-img { opacity: 1; -ms-transform: scale(1); transform: scale(1); } .u-arrow-custom-v9:hover .u-arrow-img:first-child { transition-delay: 0.3s; } .u-arrow-custom-v9:hover .u-arrow-img:nth-child(2) { transition-delay: 0.35s; } .u-arrow-custom-v9:hover .u-arrow-img:nth-child(3) { transition-delay: 0.4s; } .u-arrow-custom-v10 .u-arrow-text { opacity: 0; overflow: hidden; -ms-transform: scale(0.7); transform: scale(0.7); transition: transform .3s, opacity .3s, background-color .1s 0s; } .u-arrow-custom-v10 .u-arrow-img { transition: transform .3s; } .u-arrow-custom-v10.js-prev .u-arrow-img { -ms-transform: translateX(-100%); transform: translateX(-100%); } .u-arrow-custom-v10.js-next .u-arrow-img { -ms-transform: translateX(100%); transform: translateX(100%); } .u-arrow-custom-v10:hover .u-arrow-text { opacity: 1; background-color: transparent; -ms-transform: scale(1); transform: scale(1); transition: transform .3s, opacity .3s, background-color .1s .2s; } .u-arrow-custom-v10:hover .u-arrow-img { -ms-transform: translateX(0); transform: translateX(0); } .u-arrow-custom-v11 .u-arrow-icon { border-width: 0; transition: border-width .3s .15s; } .u-arrow-custom-v11 .u-arrow-text { opacity: 0; transition: transform .3s, opacity .3s; } .u-arrow-custom-v11.js-prev .u-arrow-text { -ms-transform: translateY(-50%) translateX(-100%) scale(0.75); transform: translateY(-50%) translateX(-100%) scale(0.75); } .u-arrow-custom-v11.js-next .u-arrow-text { -ms-transform: translateY(-50%) translateX(100%) scale(0.75); transform: translateY(-50%) translateX(100%) scale(0.75); } .u-arrow-custom-v11:hover .u-arrow-icon { border-top-width: 40px; border-bottom-width: 40px; transition-delay: 0s; } .u-arrow-custom-v11:hover .u-arrow-text { opacity: 1; transition-delay: .3s; -ms-transform: translateY(-50%) translateX(0) scale(1); transform: translateY(-50%) translateX(0) scale(1); } .u-arrow-custom-v12 .u-arrow-icon { position: relative; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .u-arrow-custom-v12 .u-arrow-icon::before { position: absolute; top: 50%; left: 50%; -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .u-arrow-custom-v12 .u-arrow-text { overflow: hidden; transition: transform .3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-transform: scale(0.6); transform: scale(0.6); } .u-arrow-custom-v12 .u-arrow-img { opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity .3s, transform .3s; } .u-arrow-custom-v12:hover .u-arrow-img { opacity: .8; } .u-arrow-custom-v12.js-prev .u-arrow-img { -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(2); transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(2); } .u-arrow-custom-v12.js-prev:hover .u-arrow-text { -ms-transform: scale(1) rotate(-45deg); transform: scale(1) rotate(-45deg); } .u-arrow-custom-v12.js-prev:hover .u-arrow-img { -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1); transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1); } .u-arrow-custom-v12.js-next .u-arrow-img { -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(2); transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(2); } .u-arrow-custom-v12.js-next:hover .u-arrow-text { -ms-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); } .u-arrow-custom-v12.js-next:hover .u-arrow-img { -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(1); transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(1); } .u-arrow-custom-v13 .u-arrow-icon { overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .u-arrow-custom-v13 .u-arrow-icon::before { position: relative; z-index: 2; } .u-arrow-custom-v13 .u-arrow-icon::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 110%; background: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .3s .3s; } .u-arrow-custom-v13 .u-arrow-text { transition: transform .3s; } .u-arrow-custom-v13.js-prev .u-arrow-icon::after { -ms-transform: translateX(-100%); transform: translateX(-100%); } .u-arrow-custom-v13.js-prev .u-arrow-text { -ms-transform: translateX(-100%); transform: translateX(-100%); } .u-arrow-custom-v13.js-next .u-arrow-icon::after { -ms-transform: translateX(100%); transform: translateX(100%); } .u-arrow-custom-v13.js-next .u-arrow-text { -ms-transform: translateX(100%); transform: translateX(100%); } .u-arrow-custom-v13:hover .u-arrow-icon::after { -ms-transform: translateX(0); transform: translateX(0); transition-delay: 0s; } .u-arrow-custom-v13:hover .u-arrow-text { transition-delay: .3s; -ms-transform: translateX(0); transform: translateX(0); } .u-arrow-custom-v14::before, .u-arrow-custom-v14::after, .u-arrow-custom-v14 .u-arrow-icon::before, .u-arrow-custom-v14 .u-arrow-icon::after { content: ""; position: absolute; left: 50%; width: 3px; height: 50%; background: #4fd2c2; transition: transform .3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .u-arrow-custom-v14::before, .u-arrow-custom-v14 .u-arrow-icon::before { top: 50%; -ms-transform: translateX(-50%) rotate(-135deg); transform: translateX(-50%) rotate(-135deg); -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .u-arrow-custom-v14::after, .u-arrow-custom-v14 .u-arrow-icon::after { top: 50%; -ms-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); -ms-transform-origin: 0 0; transform-origin: 0 0; } .u-arrow-custom-v14 .u-arrow-icon::before, .u-arrow-custom-v14 .u-arrow-icon::after { z-index: 2; height: 0; background: #fff; transition: height .3s, transform .3s; } .u-arrow-custom-v14 .u-arrow-title { position: absolute; top: 50%; opacity: 0; transition: transform .3s, opacity .3s; margin: 0; } .u-arrow-custom-v14.js-prev .u-arrow-title { left: 100%; -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .u-arrow-custom-v14.js-next::before, .u-arrow-custom-v14.js-next .u-arrow-icon::before { -ms-transform: translateX(-50%) rotate(135deg); transform: translateX(-50%) rotate(135deg); -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .u-arrow-custom-v14.js-next::after, .u-arrow-custom-v14.js-next .u-arrow-icon::after { -ms-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .u-arrow-custom-v14.js-next .u-arrow-title { right: 100%; text-align: right; -ms-transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%); } .u-arrow-custom-v14:hover::before, .u-arrow-custom-v14:hover .u-arrow-icon::before { -ms-transform: translateX(-50%) rotate(-125deg); transform: translateX(-50%) rotate(-125deg); } .u-arrow-custom-v14:hover::after, .u-arrow-custom-v14:hover .u-arrow-icon::after { -ms-transform: translateX(-50%) rotate(-55deg); transform: translateX(-50%) rotate(-55deg); } .u-arrow-custom-v14:hover .u-arrow-icon::before, .u-arrow-custom-v14:hover .u-arrow-icon::after { height: 50%; } .u-arrow-custom-v14:hover .u-arrow-title { opacity: 1; -ms-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); } .u-arrow-custom-v14:hover.js-next::before, .u-arrow-custom-v14:hover.js-next .u-arrow-icon::before { -ms-transform: translateX(-50%) rotate(125deg); transform: translateX(-50%) rotate(125deg); } .u-arrow-custom-v14:hover.js-next::after, .u-arrow-custom-v14:hover.js-next .u-arrow-icon::after { -ms-transform: translateX(-50%) rotate(55deg); transform: translateX(-50%) rotate(55deg); } /* NAVBAR menus */ .navbar a { color: #fff; } .navbar .hamburger-inner { background-color: #fff; } .navbar .active > a, .navbar a:hover { color: #4fd2c2 !important; } .u-header__section--light .navbar a { color: #999; } .u-header__section--light .navbar .hamburger-inner { background-color: #999; } .u-navbar-color-primary { color: #4fd2c2 !important; } .u-navbar-color-primary a, .js-header-fix-moment .u-navbar-color-primary--fix-moment, .js-header-fix-moment .u-navbar-color-primary--fix-moment a { color: #4fd2c2 !important; } .u-navbar-color-primary .hamburger-inner, .js-header-fix-moment .u-navbar-color-primary--fix-moment .hamburger-inner { background-color: #4fd2c2 !important; } .u-navbar-color-primary--hover:hover { color: #4fd2c2 !important; } .js-header-fix-moment .u-navbar-color-primary--fix-moment--hover:hover { color: #4fd2c2 !important; } .u-navbar-color-primary--hover .navbar-nav .nav-item.active > a, .u-navbar-color-primary--hover .navbar-nav a:hover, .js-header-fix-moment .u-navbar-color-primary--fix-moment--hover .navbar-nav .nav-item.active > a, .js-header-fix-moment .u-navbar-color-primary--fix-moment--hover .navbar-nav a:hover { color: #4fd2c2 !important; } .u-navbar-color-primary--fix-moment::after { color: #4fd2c2 !important; } .u-navbar-color-primary--fix-moment--hover::after { color: #4fd2c2 !important; } .u-navbar-color-main { color: #999 !important; } .u-navbar-color-main a, .js-header-fix-moment .u-navbar-color-main--fix-moment, .js-header-fix-moment .u-navbar-color-main--fix-moment a { color: #999 !important; } .u-navbar-color-main .hamburger-inner, .js-header-fix-moment .u-navbar-color-main--fix-moment .hamburger-inner { background-color: #999 !important; } .u-navbar-color-main--hover:hover { color: #999 !important; } .js-header-fix-moment .u-navbar-color-main--fix-moment--hover:hover { color: #999 !important; } .u-navbar-color-main--hover .navbar-nav .nav-item.active > a, .u-navbar-color-main--hover .navbar-nav a:hover, .js-header-fix-moment .u-navbar-color-main--fix-moment--hover .navbar-nav .nav-item.active > a, .js-header-fix-moment .u-navbar-color-main--fix-moment--hover .navbar-nav a:hover { color: #999 !important; } .u-navbar-color-main--fix-moment::after { color: #999 !important; } .u-navbar-color-main--fix-moment--hover::after { color: #999 !important; } .u-navbar-bg-primary .navbar-nav .nav-item > a, .u-navbar-bg-primary--hover .navbar-nav .nav-item > a:hover, .u-navbar-bg-primary--hover .navbar-nav .nav-item.active > a { background-color: #4fd2c2 !important; } .u-navbar-bg-primary::after { background-color: #4fd2c2 !important; } .u-navbar-bg-primary--hover::after { background-color: #4fd2c2 !important; } .u-navbar-bg-main .navbar-nav .nav-item > a, .u-navbar-bg-main--hover .navbar-nav .nav-item > a:hover, .u-navbar-bg-main--hover .navbar-nav .nav-item.active > a { background-color: #999 !important; } .u-navbar-bg-main::after { background-color: #999 !important; } .u-navbar-bg-main--hover::after { background-color: #999 !important; } /* Button Colors ------------------------------------*/ /* Button Sizes ------------------------------------*/ /* Button Types ------------------------------------*/ /* Material Styles ------------------------------------*/ /*------------------------------------ Box-shadows-v13 ------------------------------------*/ .u-shadow-v13 { box-shadow: inset 2px 2px 2px 0 #4fd2c2; } /*------------------------------------ Box-shadows-v33 ------------------------------------*/ .u-shadow-v33 { box-shadow: 0 6px 15px -6px rgba(79, 210, 194, 0.3); } /*------------------------------------ States ------------------------------------*/ /*------------------------------------ Focus state color ------------------------------------*/ /* Primary Colors */ .g-color-primary:focus { color: #4fd2c2; } /* Black Colors */ .g-color-black--focus:focus { color: #000; } /* White Colors */ .g-color-white--focus:focus { color: #fff !important; } /* Gray Colors */ .g-color-gray-light-v4:focus { color: #eee !important; } /*------------------------------------ Checked state background ------------------------------------*/ /* Primary Colors */ input[type="checkbox"]:checked + .g-bg-primary--checked, input[type="radio"]:checked + .g-bg-primary--checked, input[type="checkbox"]:checked + * .g-bg-primary--checked, input[type="radio"]:checked + * .g-bg-primary--checked { background-color: #4fd2c2 !important; } .g-bg-primary--checked.g-checked, .g-checked .g-bg-primary--checked { background-color: #4fd2c2 !important; } /* Black Colors */ input[type="checkbox"]:checked + .g-bg-black--checked, input[type="radio"]:checked + .g-bg-black--checked, input[type="checkbox"]:checked + * .g-bg-black--checked, input[type="radio"]:checked + * .g-bg-black--checked { background-color: #000 !important; } .g-bg-black--checked.g-checked, .g-checked .g-bg-black--checked { background-color: #000 !important; } /* White Colors */ input[type="checkbox"]:checked + .g-bg-white--checked, input[type="radio"]:checked + .g-bg-white--checked, input[type="checkbox"]:checked + * .g-bg-white--checked, input[type="radio"]:checked + * .g-bg-white--checked { background-color: #fff !important; } .g-bg-white--checked.g-checked, .g-checked .g-bg-white--checked { background-color: #fff !important; } /* Gray Colors */ input[type="checkbox"]:checked + .g-bg-dark-dark-v1--checked, input[type="radio"]:checked + .g-bg-dark-dark-v1--checked, input[type="checkbox"]:checked + * .g-bg-dark-dark-v1--checked, input[type="radio"]:checked + * .g-bg-dark-dark-v1--checked { background-color: #111 !important; } .g-bg-dark-dark-v1--checked.g-checked, .g-checked .g-bg-dark-dark-v1--checked { background-color: #111 !important; } input[type="checkbox"]:checked + .g-bg-dark-dark-v2--checked, input[type="radio"]:checked + .g-bg-dark-dark-v2--checked, input[type="checkbox"]:checked + * .g-bg-dark-dark-v2--checked, input[type="radio"]:checked + * .g-bg-dark-dark-v2--checked { background-color: #333 !important; } .g-bg-dark-dark-v2--checked.g-checked, .g-checked .g-bg-dark-dark-v2--checked { background-color: #333 !important; } input[type="checkbox"]:checked + .g-bg-dark-dark-v3--checked, input[type="radio"]:checked + .g-bg-dark-dark-v3--checked, input[type="checkbox"]:checked + * .g-bg-dark-dark-v3--checked, input[type="radio"]:checked + * .g-bg-dark-dark-v3--checked { background-color: #555 !important; } .g-bg-dark-dark-v3--checked.g-checked, .g-checked .g-bg-dark-dark-v3--checked { background-color: #555 !important; } input[type="checkbox"]:checked + .g-bg-dark-dark-v4--checked, input[type="radio"]:checked + .g-bg-dark-dark-v4--checked, input[type="checkbox"]:checked + * .g-bg-dark-dark-v4--checked, input[type="radio"]:checked + * .g-bg-dark-dark-v4--checked { background-color: #777 !important; } .g-bg-dark-dark-v4--checked.g-checked, .g-checked .g-bg-dark-dark-v4--checked { background-color: #777 !important; } input[type="checkbox"]:checked + .g-bg-dark-dark-v5--checked, input[type="radio"]:checked + .g-bg-dark-dark-v5--checked, input[type="checkbox"]:checked + * .g-bg-dark-dark-v5--checked, input[type="radio"]:checked + * .g-bg-dark-dark-v5--checked { background-color: #999 !important; } .g-bg-dark-dark-v5--checked.g-checked, .g-checked .g-bg-dark-dark-v5--checked { background-color: #999 !important; } input[type="checkbox"]:checked + .g-bg-dark-light-v1--checked, input[type="radio"]:checked + .g-bg-dark-light-v1--checked, input[type="checkbox"]:checked + * .g-bg-dark-light-v1--checked, input[type="radio"]:checked + * .g-bg-dark-light-v1--checked { background-color: #bbb !important; } .g-bg-dark-light-v1--checked.g-checked, .g-checked .g-bg-dark-light-v1--checked { background-color: #bbb !important; } input[type="checkbox"]:checked + .g-bg-dark-light-v2--checked, input[type="radio"]:checked + .g-bg-dark-light-v2--checked, input[type="checkbox"]:checked + * .g-bg-dark-light-v2--checked, input[type="radio"]:checked + * .g-bg-dark-light-v2--checked { background-color: #ccc !important; } .g-bg-dark-light-v2--checked.g-checked, .g-checked .g-bg-dark-light-v2--checked { background-color: #ccc !important; } input[type="checkbox"]:checked + .g-bg-dark-light-v3--checked, input[type="radio"]:checked + .g-bg-dark-light-v3--checked, input[type="checkbox"]:checked + * .g-bg-dark-light-v3--checked, input[type="radio"]:checked + * .g-bg-dark-light-v3--checked { background-color: #ddd !important; } .g-bg-dark-light-v3--checked.g-checked, .g-checked .g-bg-dark-light-v3--checked { background-color: #ddd !important; } input[type="checkbox"]:checked + .g-bg-dark-light-v4--checked, input[type="radio"]:checked + .g-bg-dark-light-v4--checked, input[type="checkbox"]:checked + * .g-bg-dark-light-v4--checked, input[type="radio"]:checked + * .g-bg-dark-light-v4--checked { background-color: #eee !important; } .g-bg-dark-light-v4--checked.g-checked, .g-checked .g-bg-dark-light-v4--checked { background-color: #eee !important; } input[type="checkbox"]:checked + .g-bg-dark-light-v5--checked, input[type="radio"]:checked + .g-bg-dark-light-v5--checked, input[type="checkbox"]:checked + * .g-bg-dark-light-v5--checked, input[type="radio"]:checked + * .g-bg-dark-light-v5--checked { background-color: #f7f7f7 !important; } .g-bg-dark-light-v5--checked.g-checked, .g-checked .g-bg-dark-light-v5--checked { background-color: #f7f7f7 !important; } /* Transparent */ input[type="checkbox"]:checked + .g-bg-transparent--checked, input[type="radio"]:checked + .g-bg-transparent--checked, input[type="checkbox"]:checked + * .g-bg-transparent--checked, input[type="radio"]:checked + * .g-bg-transparent--checked { background-color: transparent !important; } .g-bg-transparent--checked.g-checked, .g-checked .g-bg-transparent--checked { background-color: transparent !important; } /* Color Red */ input[type="checkbox"]:checked + .g-bg-red--checked, input[type="radio"]:checked + .g-bg-red--checked, input[type="checkbox"]:checked + * .g-bg-red--checked, input[type="radio"]:checked + * .g-bg-red--checked { background-color: #f00 !important; } .g-bg-red--checked.g-checked, .g-checked .g-bg-red--checked { background-color: #f00 !important; } /*------------------------------------ Checked state Colors ------------------------------------*/ /* Primary Colors */ input[type="checkbox"]:checked + .g-color-primary--checked, input[type="radio"]:checked + .g-color-primary--checked, input[type="checkbox"]:checked + * .g-color-primary--checked, input[type="radio"]:checked + * .g-color-primary--checked { color: #4fd2c2 !important; } .g-color-primary--checked.g-checked, .g-checked .g-color-primary--checked { color: #4fd2c2 !important; } /*------------------------------------ Focus state background ------------------------------------*/ /* Black Colors */ .g-bg-black--focus:focus { background-color: #000 !important; } .g-bg-black-opacity-0_2--focus:focus { background-color: rgba(0, 0, 0, 0.2) !important; } .g-bg-black-opacity-0_4--focus:focus { background-color: rgba(0, 0, 0, 0.4) !important; } /* Gray Colors */ .g-bg-gray-dark-v1--focus:focus { background-color: #111 !important; } .g-bg-gray-dark-v2--focus:focus { background-color: #333 !important; } .g-bg-gray-dark-v3--focus:focus { background-color: #555 !important; } .g-bg-gray-light-v4--focus:focus { background-color: #eee !important; } .g-bg-gray-light-v5--focus:focus { background-color: #f7f7f7 !important; } /* Transparent */ .g-bg-transparent--focus:focus { background-color: transparent; } /*------------------------------------ Checked state border ------------------------------------*/ /* Primary Colors */ input[type="checkbox"]:checked + .g-brd-primary--checked, input[type="radio"]:checked + .g-brd-primary--checked, input[type="checkbox"]:checked + * .g-brd-primary--checked, input[type="radio"]:checked + * .g-brd-primary--checked { border-color: #4fd2c2 !important; } .g-brd-primary--checked.g-checked, .g-checked .g-brd-primary--checked { border-color: #4fd2c2 !important; } /* Black Colors */ input[type="checkbox"]:checked + .g-brd-black--checked, input[type="radio"]:checked + .g-brd-black--checked, input[type="checkbox"]:checked + * .g-brd-black--checked, input[type="radio"]:checked + * .g-brd-black--checked { border-color: #000 !important; } .g-brd-black--checked.g-checked, .g-checked .g-brd-black--checked { border-color: #000 !important; } /* White */ input[type="checkbox"]:checked + .g-brd-white--checked, input[type="radio"]:checked + .g-brd-white--checked, input[type="checkbox"]:checked + * .g-brd-white--checked, input[type="radio"]:checked + * .g-brd-white--checked { border-color: #fff !important; } .g-brd-white--checked.g-checked, .g-checked .g-brd-white--checked { border-color: #fff !important; } /* Gray Colors */ input[type="checkbox"]:checked + .g-brd-gray-dark-v1--checked, input[type="radio"]:checked + .g-brd-gray-dark-v1--checked, input[type="checkbox"]:checked + * .g-brd-gray-dark-v1--checked, input[type="radio"]:checked + * .g-brd-gray-dark-v1--checked { border-color: #111 !important; } .g-brd-gray-dark-v1--checked.g-checked, .g-checked .g-brd-gray-dark-v1--checked { border-color: #111 !important; } input[type="checkbox"]:checked + .g-brd-gray-dark-v2--checked, input[type="radio"]:checked + .g-brd-gray-dark-v2--checked, input[type="checkbox"]:checked + * .g-brd-gray-dark-v2--checked, input[type="radio"]:checked + * .g-brd-gray-dark-v2--checked { border-color: #333 !important; } .g-brd-gray-dark-v2--checked.g-checked, .g-checked .g-brd-gray-dark-v2--checked { border-color: #333 !important; } input[type="checkbox"]:checked + .g-brd-gray-dark-v3--checked, input[type="radio"]:checked + .g-brd-gray-dark-v3--checked, input[type="checkbox"]:checked + * .g-brd-gray-dark-v3--checked, input[type="radio"]:checked + * .g-brd-gray-dark-v3--checked { border-color: #555 !important; } .g-brd-gray-dark-v3--checked.g-checked, .g-checked .g-brd-gray-dark-v3--checked { border-color: #555 !important; } input[type="checkbox"]:checked + .g-brd-gray-dark-v4--checked, input[type="radio"]:checked + .g-brd-gray-dark-v4--checked, input[type="checkbox"]:checked + * .g-brd-gray-dark-v4--checked, input[type="radio"]:checked + * .g-brd-gray-dark-v4--checked { border-color: #777 !important; } .g-brd-gray-dark-v4--checked.g-checked, .g-checked .g-brd-gray-dark-v4--checked { border-color: #777 !important; } input[type="checkbox"]:checked + .g-brd-gray-dark-v5--checked, input[type="radio"]:checked + .g-brd-gray-dark-v5--checked, input[type="checkbox"]:checked + * .g-brd-gray-dark-v5--checked, input[type="radio"]:checked + * .g-brd-gray-dark-v5--checked { border-color: #999 !important; } .g-brd-gray-dark-v5--checked.g-checked, .g-checked .g-brd-gray-dark-v5--checked { border-color: #999 !important; } input[type="checkbox"]:checked + .g-brd-gray-light-v1--checked, input[type="radio"]:checked + .g-brd-gray-light-v1--checked, input[type="checkbox"]:checked + * .g-brd-gray-light-v1--checked, input[type="radio"]:checked + * .g-brd-gray-light-v1--checked { border-color: #bbb !important; } .g-brd-gray-light-v1--checked.g-checked, .g-checked .g-brd-gray-light-v1--checked { border-color: #bbb !important; } input[type="checkbox"]:checked + .g-brd-gray-light-v2--checked, input[type="radio"]:checked + .g-brd-gray-light-v2--checked, input[type="checkbox"]:checked + * .g-brd-gray-light-v2--checked, input[type="radio"]:checked + * .g-brd-gray-light-v2--checked { border-color: #ccc !important; } .g-brd-gray-light-v2--checked.g-checked, .g-checked .g-brd-gray-light-v2--checked { border-color: #ccc !important; } input[type="checkbox"]:checked + .g-brd-gray-light-v3--checked, input[type="radio"]:checked + .g-brd-gray-light-v3--checked, input[type="checkbox"]:checked + * .g-brd-gray-light-v3--checked, input[type="radio"]:checked + * .g-brd-gray-light-v3--checked { border-color: #ddd !important; } .g-brd-gray-light-v3--checked.g-checked, .g-checked .g-brd-gray-light-v3--checked { border-color: #ddd !important; } input[type="checkbox"]:checked + .g-brd-gray-light-v4--checked, input[type="radio"]:checked + .g-brd-gray-light-v4--checked, input[type="checkbox"]:checked + * .g-brd-gray-light-v4--checked, input[type="radio"]:checked + * .g-brd-gray-light-v4--checked { border-color: #eee !important; } .g-brd-gray-light-v4--checked.g-checked, .g-checked .g-brd-gray-light-v4--checked { border-color: #eee !important; } input[type="checkbox"]:checked + .g-brd-gray-light-v5--checked, input[type="radio"]:checked + .g-brd-gray-light-v5--checked, input[type="checkbox"]:checked + * .g-brd-gray-light-v5--checked, input[type="radio"]:checked + * .g-brd-gray-light-v5--checked { border-color: #f7f7f7 !important; } .g-brd-gray-light-v5--checked.g-checked, .g-checked .g-brd-gray-light-v5--checked { border-color: #f7f7f7 !important; } /* Transparent */ input[type="checkbox"]:checked + .g-brd-transparent--checked, input[type="radio"]:checked + .g-brd-transparent--checked, input[type="checkbox"]:checked + * .g-brd-transparent--checked, input[type="radio"]:checked + * .g-brd-transparent--checked { border-color: transparent !important; } .g-brd-transparent--checked.g-checked, .g-checked .g-brd-transparent--checked { border-color: transparent !important; } /* Color Red */ input[type="checkbox"]:checked + .g-brd-red--checked, input[type="radio"]:checked + .g-brd-red--checked, input[type="checkbox"]:checked + * .g-brd-red--checked, input[type="radio"]:checked + * .g-brd-red--checked { border-color: #f00 !important; } .g-brd-red--checked.g-checked, .g-checked .g-brd-red--checked { border-color: #f00 !important; } /*------------------------------------ Focus state border ------------------------------------*/ /* Primary Colors */ .g-brd-primary--focus:focus, .g-brd-primary--focus.g-state-focus *, .g-brd-primary--focus.g-state-focus *:focus { border-color: #4fd2c2 !important; } /* Black Colors */ .g-brd-black--focus:focus, .g-brd-black--focus.g-state-focus *, .g-brd-black--focus.g-state-focus *:focus { border-color: #000 !important; } /* White */ .g-brd-white--focus:focus, .g-brd-white--focus.g-state-focus *, .g-brd-white--focus.g-state-focus *:focus { border-color: #fff !important; } /* Gray Colors */ .g-brd-gray-dark-v1--focus:focus, .g-brd-gray-dark-v1--focus.g-state-focus *, .g-brd-gray-dark-v1--focus.g-state-focus *:focus { border-color: #111 !important; } .g-brd-gray-dark-v2--focus:focus, .g-brd-gray-dark-v2--focus.g-state-focus *, .g-brd-gray-dark-v2--focus.g-state-focus *:focus { border-color: #333 !important; } .g-brd-gray-dark-v3--focus:focus, .g-brd-gray-dark-v3--focus.g-state-focus *, .g-brd-gray-dark-v3--focus.g-state-focus *:focus { border-color: #555 !important; } .g-brd-gray-dark-v4--focus:focus, .g-brd-gray-dark-v4--focus.g-state-focus *, .g-brd-gray-dark-v4--focus.g-state-focus *:focus { border-color: #777 !important; } .g-brd-gray-dark-v5--focus:focus, .g-brd-gray-dark-v5--focus.g-state-focus *, .g-brd-gray-dark-v5--focus.g-state-focus *:focus { border-color: #999 !important; } .g-brd-gray-dark-light-v1--focus:focus, .g-brd-gray-dark-light-v1--focus.g-state-focus *, .g-brd-gray-dark-light-v1--focus.g-state-focus *:focus { border-color: #bbb !important; } .g-brd-gray-dark-light-v2--focus:focus, .g-brd-gray-dark-light-v2--focus.g-state-focus *, .g-brd-gray-dark-light-v2--focus.g-state-focus *:focus { border-color: #ccc !important; } .g-brd-gray-dark-light-v3--focus:focus, .g-brd-gray-dark-light-v3--focus.g-state-focus *, .g-brd-gray-dark-light-v3--focus.g-state-focus *:focus { border-color: #ddd !important; } .g-brd-gray-dark-light-v4--focus:focus, .g-brd-gray-dark-light-v4--focus.g-state-focus *, .g-brd-gray-dark-light-v4--focus.g-state-focus *:focus { border-color: #eee !important; } .g-brd-gray-dark-light-v5--focus:focus, .g-brd-gray-dark-light-v5--focus.g-state-focus *, .g-brd-gray-dark-light-v5--focus.g-state-focus *:focus { border-color: #f7f7f7 !important; } /* Transparent */ .g-brd-transparent--focus:focus, .g-brd-transparent--focus.g-state-focus *, .g-brd-transparent--focus.g-state-focus *:focus { border-color: transparent !important; } /* Color Red */ .g-brd-red--focus:focus, .g-brd-red--focus.g-state-focus *, .g-brd-red--focus.g-state-focus *:focus { border-color: #f00 !important; } /*------------------------------------ Carousel indicators v1 ------------------------------------*/ .u-carousel-indicators-v1, .u-carousel-indicators-v1--white-inverse, .u-carousel-indicators-v1--white { display: -ms-flexbox !important; display: flex !important; width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 15px; -ms-flex-pack: center; justify-content: center; } .u-carousel-indicators-v1 li, .u-carousel-indicators-v1--white-inverse li, .u-carousel-indicators-v1--white li { margin: 0 5px 5px; } .u-carousel-indicators-v1 li.slick-active span, .u-carousel-indicators-v1--white-inverse li.slick-active span, .u-carousel-indicators-v1--white li.slick-active span { background-color: #4fd2c2; opacity: 1; } .u-carousel-indicators-v1 span, .u-carousel-indicators-v1--white-inverse span, .u-carousel-indicators-v1--white span { width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; opacity: .7; } .u-carousel-indicators-v1--white li.slick-active span { background-color: #fff; } .u-carousel-indicators-v1--white li span { opacity: .5; } .u-carousel-indicators-v1--white-inverse li.slick-active span { background-color: #fff; opacity: .3; } .u-carousel-indicators-v1--white-inverse li span { opacity: .9; } /*------------------------------------ Breadcrumbs for landing ------------------------------------*/ /* Default style */ .landing-breadcrumb-arrow:before { content: "\f105"; color: #ccc; } .landing-breadcrumb-link { color: #bbb; } .landing-breadcrumb-link:hover { color: #999; } .landing-breadcrumb-name--last { color: #4fd2c2; } /* Dark bg, white crumbs, divider -, center align */ .landing-breadcrumb-v1 .landing-breadcrumb-arrow:before { content: "\f068"; color: #fff; } .landing-breadcrumb-v1 .landing-breadcrumb-link { color: #fff; } .landing-breadcrumb-v1 .landing-breadcrumb-link:hover { color: #4fd2c2; } .landing-breadcrumb-v1 .landing-breadcrumb-name--last { color: #4fd2c2; } /*------------------------------------ Heading-v5 ------------------------------------*/ .u-heading-v5__title { position: relative; display: inline-block; line-height: 1; } .u-heading-v5__title::before { content: ""; position: absolute; display: inline-block; width: 0.85714rem; height: 0.85714rem; background: #999; } .u-heading-v5-color-primary .u-heading-v5__title::before { background: #4fd2c2; } .u-heading-v5-color-gray-light-v2 .u-heading-v5__title::before { background: #ccc; } .u-heading-v5-color-white .u-heading-v5__title::before { background: #fff; } .u-heading-v5-rounded-50x .u-heading-v5__title::before { border-radius: 50%; } /*------------------------------------ Heading-v5-1 ------------------------------------*/ .u-heading-v5-1 .u-heading-v5__title { padding-top: 1.78571rem; } .u-heading-v5-1 .u-heading-v5__title::before { top: 0; left: 2px; } .u-heading-v5-1.text-center .u-heading-v5__title::before { left: 50%; margin-left: -6px; } .u-heading-v5-1.text-right .u-heading-v5__title::before { left: auto; right: 2px; } /*------------------------------------ Heading-v5-2 ------------------------------------*/ .u-heading-v5-2 .u-heading-v5__title::before { left: 0; bottom: 3px; } .u-heading-v5-2.text-right .u-heading-v5__title::before { left: auto; right: 0; } .u-heading-v5-2 .u-heading-v5__title { padding-left: 1.78571rem; } .u-heading-v5-2.text-right .u-heading-v5__title { padding-right: 1.78571rem; } /*------------------------------------ Heading-v5-3 ------------------------------------*/ .u-heading-v5-3 .u-heading-v5__title::before { left: 2px; bottom: 0; } .u-heading-v5-3.text-center .u-heading-v5__title::before { left: 50%; margin-left: -6px; } .u-heading-v5-3.text-right .u-heading-v5__title::before { left: auto; right: 2px; } .u-heading-v5-3 .u-heading-v5__title { padding-bottom: 1.78571rem; } /*------------------------------------ Heading-v9 ------------------------------------*/ .u-heading-v9 { position: relative; text-align: center; } .u-heading-v9::before { content: ""; position: absolute; left: 50%; display: block; margin-left: -35px; width: 70px; height: 96px; border: 2px solid #4fd2c2; } .u-heading-v9--left { padding-left: 35px; text-align: left; } .u-heading-v9--left::before { left: 0; margin-left: 0; } .u-heading-v9--right { padding-right: 35px; text-align: right; } .u-heading-v9--right::before { left: auto; right: 0; margin-left: 0; } .u-heading-v9 * { position: relative; z-index: 3; } /*------------------------------------ Heading-v10 ------------------------------------*/ .u-heading-v10 { position: relative; text-align: center; } .u-heading-v10__downer { font-size: 115px; line-height: 1; opacity: .04; } .u-heading-v10__upper { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 34px; color: #4fd2c2; } /*------------------------------------ Nonstandard Background v1 ------------------------------------*/ [class*="u-ns-bg-v1"] { position: relative; } [class*="u-ns-bg-v1"]::before { content: ""; position: absolute; z-index: 3; width: 0; height: 0; border-style: solid; border-color: transparent; } .u-ns-bg-v1-top::before, .u-ns-bg-v1-bottom::before { left: 50%; margin-left: -20px; } .u-ns-bg-v1-left::before, .u-ns-bg-v1-right::before { top: 50%; margin-top: -20px; } .u-ns-bg-v1-top::before { top: -25px; border-width: 0 20px 25px 20px; } .u-ns-bg-v1-top.g-bg-primary::before, .g-parent.g-bg-primary .u-ns-bg-v1-top::before { border-bottom-color: #4fd2c2; } .u-ns-bg-v1-top.g-bg-white::before, .g-parent.g-bg-white .u-ns-bg-v1-top::before { border-bottom-color: #fff; } .u-ns-bg-v1-top.g-bg-gray-light-v2::before, .g-parent.g-bg-gray-light-v2 .u-ns-bg-v1-top::before { border-bottom-color: #ccc; } .u-ns-bg-v1-top.g-bg-black::before, .g-parent.g-bg-black .u-ns-bg-v1-top::before { border-bottom-color: #000; } .u-ns-bg-v1-bottom::before { bottom: -25px; border-width: 25px 20px 0 20px; } .u-ns-bg-v1-bottom.g-bg-primary::before, .g-parent.g-bg-primary .u-ns-bg-v1-bottom::before { border-top-color: #4fd2c2; } .u-ns-bg-v1-bottom.g-bg-white::before, .g-parent.g-bg-white .u-ns-bg-v1-bottom::before { border-top-color: #fff; } .u-ns-bg-v1-bottom.g-bg-gray-light-v2::before, .g-parent.g-bg-gray-light-v2 .u-ns-bg-v1-bottom::before { border-top-color: #ccc; } .u-ns-bg-v1-bottom.g-bg-black::before, .g-parent.g-bg-black .u-ns-bg-v1-bottom::before { border-top-color: #000; } .u-ns-bg-v1-left::before { left: -25px; border-width: 20px 25px 20px 0; } .u-ns-bg-v1-left.g-bg-primary::before, .g-parent.g-bg-primary .u-ns-bg-v1-left::before { border-right-color: #4fd2c2; } .u-ns-bg-v1-left.g-bg-white::before, .g-parent.g-bg-white .u-ns-bg-v1-left::before { border-right-color: #fff; } .u-ns-bg-v1-left.g-bg-gray-light-v2::before, .g-parent.g-bg-gray-light-v2 .u-ns-bg-v1-left::before { border-right-color: #ccc; } .u-ns-bg-v1-left.g-bg-black::before, .g-parent.g-bg-black .u-ns-bg-v1-left::before { border-right-color: #000; } .u-ns-bg-v1-right::before { right: -25px; border-width: 20px 0 20px 25px; } .u-ns-bg-v1-right.g-bg-primary::before, .g-parent.g-bg-primary .u-ns-bg-v1-right::before { border-left-color: #4fd2c2; } .u-ns-bg-v1-right.g-bg-white::before, .g-parent.g-bg-white .u-ns-bg-v1-right::before { border-left-color: #fff; } .u-ns-bg-v1-right.g-bg-gray-light-v2::before, .g-parent.g-bg-gray-light-v2 .u-ns-bg-v1-right::before { border-left-color: #ccc; } .u-ns-bg-v1-right.g-bg-black::before, .g-parent.g-bg-black .u-ns-bg-v1-right::before { border-left-color: #000; } @media (min-width: 768px) { .u-ns-bg-v1-top--md::before, .u-ns-bg-v1-bottom--md::before, .u-ns-bg-v1-left--md::before, .u-ns-bg-v1-right--md::before { top: auto; bottom: auto; left: auto; right: auto; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } .u-ns-bg-v1-top--md.g-bg-primary::before, .u-ns-bg-v1-top--md.g-bg-white::before, .u-ns-bg-v1-top--md.g-bg-gray-light-v2::before, .u-ns-bg-v1-top--md.g-bg-black::before, .u-ns-bg-v1-bottom--md.g-bg-primary::before, .u-ns-bg-v1-bottom--md.g-bg-white::before, .u-ns-bg-v1-bottom--md.g-bg-gray-light-v2::before, .u-ns-bg-v1-bottom--md.g-bg-black::before, .u-ns-bg-v1-left--md.g-bg-primary::before, .u-ns-bg-v1-left--md.g-bg-white::before, .u-ns-bg-v1-left--md.g-bg-gray-light-v2::before, .u-ns-bg-v1-left--md.g-bg-black::before, .u-ns-bg-v1-right--md.g-bg-primary::before, .u-ns-bg-v1-right--md.g-bg-white::before, .u-ns-bg-v1-right--md.g-bg-gray-light-v2::before, .u-ns-bg-v1-right--md.g-bg-black::before { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; } .u-ns-bg-v1-top--md::before, .u-ns-bg-v1-bottom--md::before { left: 50%; margin-left: -20px; } .u-ns-bg-v1-left--md::before, .u-ns-bg-v1-right--md::before { top: 50%; margin-top: -20px; } .u-ns-bg-v1-top--md::before { top: -25px; border-width: 0 20px 25px 20px; } .u-ns-bg-v1-top--md.g-bg-primary::before { border-bottom-color: #4fd2c2; } .u-ns-bg-v1-top--md.g-bg-white::before { border-bottom-color: #fff; } .u-ns-bg-v1-top--md.g-bg-gray-light-v2::before { border-bottom-color: #ccc; } .u-ns-bg-v1-top--md.g-bg-black::before { border-bottom-color: #000; } .u-ns-bg-v1-bottom--md::before { bottom: -25px; border-width: 25px 20px 0 20px; } .u-ns-bg-v1-bottom--md.g-bg-primary::before { border-top-color: #4fd2c2; } .u-ns-bg-v1-bottom--md.g-bg-white::before { border-top-color: #fff; } .u-ns-bg-v1-bottom--md.g-bg-gray-light-v2::before { border-top-color: #ccc; } .u-ns-bg-v1-bottom--md.g-bg-black::before { border-top-color: #000; } .u-ns-bg-v1-left--md::before { left: -25px; border-width: 20px 25px 20px 0; } .u-ns-bg-v1-left--md.g-bg-primary::before { border-right-color: #4fd2c2; } .u-ns-bg-v1-left--md.g-bg-white::before { border-right-color: #fff; } .u-ns-bg-v1-left--md.g-bg-gray-light-v2::before { border-right-color: #ccc; } .u-ns-bg-v1-left--md.g-bg-black::before { border-right-color: #000; } .u-ns-bg-v1-right--md::before { right: -25px; border-width: 20px 0 20px 25px; } .u-ns-bg-v1-right--md.g-bg-primary::before { border-left-color: #4fd2c2; } .u-ns-bg-v1-right--md.g-bg-white::before { border-left-color: #fff; } .u-ns-bg-v1-right--md.g-bg-gray-light-v2::before { border-left-color: #ccc; } .u-ns-bg-v1-right--md.g-bg-black::before { border-left-color: #000; } } /*------------------------------------ Nonstandard Background v7 ------------------------------------*/ [class*="u-ns-bg-v7"] { position: relative; } [class*="u-ns-bg-v7"]::before { content: ""; position: absolute; z-index: 3; width: 0; height: 0; border-style: solid; border-color: transparent; } .u-ns-bg-v7-top::before, .u-ns-bg-v7-bottom::before { left: 50%; margin-left: -5px; } .u-ns-bg-v7-left::before, .u-ns-bg-v7-right::before { top: 50%; margin-top: -5px; } .u-ns-bg-v7-top::before { top: -5px; border-width: 0 5px 5px 5px; } .u-ns-bg-v7-top.g-bg-primary::before { border-bottom-color: #4fd2c2; } .u-ns-bg-v7-top.g-bg-white::before { border-bottom-color: #fff; } .u-ns-bg-v7-top.g-bg-gray-light-v2::before { border-bottom-color: #ccc; } .u-ns-bg-v7-top.g-bg-black::before { border-bottom-color: #000; } .u-ns-bg-v7-bottom::before { bottom: -5px; border-width: 5px 5px 0 5px; } .u-ns-bg-v7-bottom.g-bg-primary::before { border-top-color: #4fd2c2; } .u-ns-bg-v7-bottom.g-bg-white::before { border-top-color: #fff; } .u-ns-bg-v7-bottom.g-bg-gray-light-v2::before { border-top-color: #ccc; } .u-ns-bg-v7-bottom.g-bg-black::before { border-top-color: #000; } .u-ns-bg-v7-left::before { left: -5px; border-width: 5px 5px 5px 0; } .u-ns-bg-v7-left.g-bg-primary::before { border-right-color: #4fd2c2; } .u-ns-bg-v7-left.g-bg-white::before { border-right-color: #fff; } .u-ns-bg-v7-left.g-bg-gray-light-v2::before { border-right-color: #ccc; } .u-ns-bg-v7-left.g-bg-black::before { border-right-color: #000; } .u-ns-bg-v7-right::before { right: -5px; border-width: 5px 0 5px 5px; } .u-ns-bg-v7-right.g-bg-primary::before { border-left-color: #4fd2c2; } .u-ns-bg-v7-right.g-bg-white::before { border-left-color: #fff; } .u-ns-bg-v7-right.g-bg-gray-light-v2::before { border-left-color: #ccc; } .u-ns-bg-v7-right.g-bg-black::before { border-left-color: #000; } /*------------------------------------ Progress Bars ------------------------------------*/ .progress-bar { min-height: 0 !important; } .u-progress__pointer-v1 { position: absolute; top: 50%; right: 0; width: 42px; height: 42px; margin: -21px -21px 0 0; background-color: transparent; line-height: 42px; z-index: 1; } .u-progress__pointer-v2 { position: absolute; bottom: 100%; right: 0; min-width: 46px; white-space: nowrap; padding-left: 5px; padding-right: 5px; -ms-transform: translateX(50%); transform: translateX(50%); margin-bottom: 5px; background-color: transparent; z-index: 1; } .u-progress__pointer-v2::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border-style: solid; border-color: #4fd2c2 transparent; border-width: 5px 5px 0; } .u-progress__pointer-v3 { position: relative; float: right; white-space: nowrap; } .u-progress__pointer-v3::after { content: ""; position: absolute; top: 0; right: 0; margin-top: -10px; margin-right: -5px; border-style: solid; border-color: #4fd2c2 transparent; border-width: 5px 5px 0; } [class*="u-progress-bar-vertical"] { display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -ms-flex-pack: end; justify-content: flex-end; } .u-progress-bar-vertical-v1 { height: 200px; } /*------------------------------------ Background Colors ------------------------------------*/ .u-label { display: inline-block; padding: .35rem .58rem; font-size: .9rem; line-height: 1; text-align: center; white-space: nowrap; color: #fff; /* Label Size ------------------------------------*/ /* Label Styles ------------------------------------*/ /* Label Num ------------------------------------*/ } .u-label:empty { display: none; } .btn .u-label { position: relative; top: -1px; } .u-label-default { background-color: #777; } .u-label-default[href]:hover, .u-label-default[href]:focus { background-color: #555; } .u-label-primary { background-color: #5cb85c; } .u-label-primary[href]:hover, .u-label-primary[href]:focus { background-color: #55b555; } .u-label-success { background-color: #5cb85c; } .u-label-success[href]:hover, .u-label-success[href]:focus { background-color: #55b555; } .u-label-info { background-color: #5bc0de; } .u-label-info[href]:hover, .u-label-info[href]:focus { background-color: #53bddc; } .u-label-warning { background-color: #f0ad4e; } .u-label-warning[href]:hover, .u-label-warning[href]:focus { background-color: #efa945; } .u-label-danger { background-color: #d9534f; } .u-label-danger[href]:hover, .u-label-danger[href]:focus { background-color: #d74b47; } .u-label.g-rounded-10 { padding: .35rem .7rem; } .u-label--sm { font-size: .8rem; } .u-label--lg { font-size: 1.1rem; } .u-label.u-label-with-icon { padding: .5rem .85rem; } .u-label.u-label-with-icon i { margin-right: .5rem; } .u-label-num { min-width: 2rem; height: 2rem; padding: 0 .35rem; line-height: 2rem; } .u-label-num.u-label--sm { min-width: 1.6rem; height: 1.6rem; line-height: 1.6rem; } .u-label-num.u-label--lg { min-width: 2.2rem; height: 2.2rem; line-height: 2.2rem; } /*------------------------------------ Ribbons ------------------------------------*/ .u-ribbon-v1 { position: absolute; font-size: .9rem; } .u-ribbon-center { left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); } .u-ribbon--sm { font-size: .7rem; } .u-ribbon--lg { font-size: 1.1rem; } /* Ribbon Style Type 1 ------------------------------------*/ .u-ribbon-v1 { display: inline-block; padding: .35rem .7rem; /* Ribbon Type 1 With icon */ } .u-ribbon-v1.u-ribbon-with-icon { padding: .5rem .85rem; } .u-ribbon-v1 .u-ribbon-icon--left { margin-right: .5rem; } .u-ribbon-v1 .u-ribbon-icon--right { margin-left: .5rem; } /* Ribbon Style Type 2 ------------------------------------*/ /* Bookmarked Ribbon ------------------------------------*/ /* Ribbon Colors ------------------------------------*/ /* Clipped-v1 Ribbon ------------------------------------*/ /* Clipped-v2 Ribbon ------------------------------------*/ /* Clipped-v3 Ribbon ------------------------------------*/ /* Clipped-v4 Ribbon ------------------------------------*/ /*------------------------------------ Typography ------------------------------------*/ .popovers--no-title .popover-title { display: none; } .g-nowrap { white-space: nowrap; } /*------------------------------------ Navigation ------------------------------------*/ /* Base Abstractions */ /* Base stylesheets */ .u-header__section--dark .navbar [class*="u-main-nav-v"] .nav-link { color: #fff; } .u-header__section--dark .navbar [class*="u-main-nav-v"] .nav-item.active > .nav-link, .u-header__section--dark .navbar [class*="u-main-nav-v"] .nav-item:hover > .nav-link, .u-header__section--dark .navbar [class*="u-main-nav-v"] .nav-item:focus > .nav-link, .u-header__section--dark .navbar [class*="u-main-nav-v"] .nav-item.show > .nav-link, .u-header__section--dark .navbar [class*="u-main-nav-v"] .nav-item.hs-sub-menu-opened > .nav-link, .u-header__section--dark .navbar [class*="u-main-nav-v"] .nav-item .nav-link:focus { color: #fff; } /* Import */ /* Main navigation styles */ /* Dropdown navigation styles */ /* Main navigation behaviors */ /* Secondary navigation styles */ /* Sidebar shortcode navigation styles */ /* Override vendor stylesheets */ .hamburger-inner::before, .hamburger-inner::after { background-color: inherit; } [class*="u-main-nav-"] .dropdown-toggle::after { width: auto; height: auto; vertical-align: inherit; border: none; } /* Overlay */ /* Override necessary navigation styles in side-header pages */ /* Scroll on mobile devices */ /*------------------------------------ Block Hovers ------------------------------------*/ [class*="u-block-hover"] { position: relative; max-width: 100%; margin: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } [class*="u-block-hover"], [class*="u-block-hover"]::before, [class*="u-block-hover"]::after { transition: all .3s ease; } [class*="u-block-hover__additional"] { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } [class*="u-block-hover__additional--v1"] { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 15px; opacity: 0; } .u-block-hover:hover .u-block-hover__additional--v1 { opacity: 1; } .u-block-hover--scale:hover, .u-block-hover--scale-img:hover .u-block-hover__img { transform: scale3d(1.1, 1.1, 1.1); } .u-block-hover__additional-scale { z-index: -1; max-width: initial; } .u-block-hover:hover .u-block-hover__additional-scale { top: -20px; right: -20px; bottom: -20px; left: -20px; } .u-block-hover--scale-down:hover, .u-block-hover--scale-down-img:hover .u-block-hover__img { transform: scale3d(0.9, 0.9, 0.9); } .u-block-hover__additional-scale-down { z-index: -1; max-width: initial; } .u-block-hover:hover .u-block-hover__additional-scale-down { top: 20px; right: 20px; bottom: 20px; left: 20px; } .u-block-hover:hover .u-block-hover__main--zoom-v1 { -ms-transform: scale(1.1); transform: scale(1.1); } .u-block-hover:hover .u-block-hover__main--zoom-v2 { -ms-transform: scale(1.04); transform: scale(1.04); } .u-block-hover [class*="icon-"] { padding: 1px; } .u-block-hover__additional--fade { opacity: 0; } .u-block-hover:hover .u-block-hover__additional--fade { opacity: 1; -ms-transform: translate(0, 0); transform: translate(0, 0); } .u-block-hover__additional--fade-up { -ms-transform: translate(0, 15%); transform: translate(0, 15%); } .u-block-hover__additional--fade-down { -ms-transform: translate(0, -15%); transform: translate(0, -15%); } .u-block-hover__additional--fade-left { -ms-transform: translate(-15%, 0); transform: translate(-15%, 0); } .u-block-hover__additional--fade-right { -ms-transform: translate(15%, 0); transform: translate(15%, 0); } .u-block-hover:hover [class*="u-block-hover__additional--push"] { -ms-transform: translate(0, 0); transform: translate(0, 0); } .u-block-hover:hover .u-block-hover__main--push-up { -ms-transform: translateY(-100%); transform: translateY(-100%); } .u-block-hover__additional--push-up { -ms-transform: translateY(100%); transform: translateY(100%); } .u-block-hover:hover .u-block-hover__main--push-down { -ms-transform: translateY(100%); transform: translateY(100%); } .u-block-hover__additional--push-down { -ms-transform: translateY(-100%); transform: translateY(-100%); } .u-block-hover:hover .u-block-hover__main--push-left { -ms-transform: translateX(-100%); transform: translateX(-100%); } .u-block-hover__additional--push-left { -ms-transform: translateX(100%); transform: translateX(100%); } .u-block-hover:hover .u-block-hover__main--push-right { -ms-transform: translateX(100%); transform: translateX(100%); } .u-block-hover__additional--push-right { -ms-transform: translateX(-100%); transform: translateX(-100%); } .u-block-hover:hover [class*="u-block-hover__additional--slide"], .u-block-hover:hover [class*="u-block-hover__additional--partially-slide"] { -ms-transform: translate(0, 0); transform: translate(0, 0); } .u-block-hover__additional--slide-up { -ms-transform: translateY(100%); transform: translateY(100%); } .u-block-hover__additional--slide-down { -ms-transform: translateY(-100%); transform: translateY(-100%); } .u-block-hover__additional--slide-left { -ms-transform: translateX(100%); transform: translateX(100%); } .u-block-hover__additional--slide-right { -ms-transform: translateX(-100%); transform: translateX(-100%); } .u-block-hover__additional--slide-bottom-right { -ms-transform: translate(-100%, -100%); transform: translate(-100%, -100%); } .u-block-hover__additional--slide-bottom-left { -ms-transform: translate(100%, -100%); transform: translate(100%, -100%); } .u-block-hover__additional--slide-top-right { -ms-transform: translate(-100%, 100%); transform: translate(-100%, 100%); } .u-block-hover__additional--slide-top-left { -ms-transform: translate(100%, 100%); transform: translate(100%, 100%); } .u-block-hover__additional--partially-slide-up { top: auto; transform: translate3d(0, 100%, 0); overflow: visible; } .u-block-hover__additional--partially-slide-up .u-block-hover__visible { position: absolute; bottom: 100%; margin-bottom: -1px; left: 0; right: 0; padding-left: inherit; padding-right: inherit; background: inherit; } .u-block-hover__additional--partially-slide-down { bottom: auto; transform: translate3d(0, -100%, 0); overflow: visible; } .u-block-hover__additional--partially-slide-down .u-block-hover__visible { position: absolute; top: 100%; margin-top: -1px; left: 0; right: 0; padding-left: inherit; padding-right: inherit; background: inherit; } .u-block-hover--cot { perspective: 50em; } [class*="u-block-hover__additional--cot"] { opacity: 0; z-index: 1; } .u-block-hover--cot:hover [class*="u-block-hover__main--cot"] { opacity: 0; } .u-block-hover--cot:hover [class*="u-block-hover__additional--cot"] { opacity: 1; transition-delay: 0.21s; } .u-block-hover__main--cot-up { -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .u-block-hover__additional--cot-up { transform: rotateX(90deg); -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .u-block-hover--cot:hover .u-block-hover__main--cot-up { transform: rotateX(-90deg); } .u-block-hover--cot:hover .u-block-hover__additional--cot-up { transform: rotateX(0deg); } .u-block-hover__main--cot-down { -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .u-block-hover__additional--cot-down { transform: rotateX(-90deg); -ms-transform-origin: 50% -50%; transform-origin: 50% -50%; } .u-block-hover--cot:hover .u-block-hover__main--cot-down { transform: rotateX(90deg); opacity: 0; } .u-block-hover--cot:hover .u-block-hover__additional--cot-down { transform: rotateX(0deg); } .u-block-hover__main--cot-left { -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; } .u-block-hover__additional--cot-left { transform: rotateY(-90deg); -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } .u-block-hover--cot:hover .u-block-hover__main--cot-left { transform: rotateY(90deg); } .u-block-hover--cot:hover .u-block-hover__additional--cot-left { transform: rotateY(0deg); } .u-block-hover__main--cot-right { -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } .u-block-hover__additional--cot-right { transform: rotateY(90deg); -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .u-block-hover--cot:hover .u-block-hover__main--cot-right { transform: rotateY(-90deg); } .u-block-hover--cot:hover .u-block-hover__additional--cot-right { transform: rotateY(0deg); } .u-block-hover--flip { perspective: 50em; } [class*="u-block-hover__main--flip"] { -webkit-backface-visibility: hidden; backface-visibility: hidden; } [class*="u-block-hover__additional--flip"] { opacity: 0; } .u-block-hover--flip:hover [class*="u-block-hover__main--flip"] { opacity: 0; } .u-block-hover--flip:hover [class*="u-block-hover__additional--flip"] { opacity: 1; transition-delay: 0.13999999999999999s; } .u-block-hover__additional--flip-horiz { transform: rotateX(90deg); -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .u-block-hover--flip:hover .u-block-hover__main--flip-horiz { transform: rotateX(-180deg); } .u-block-hover--flip:hover .u-block-hover__additional--flip-horiz { transform: rotateX(0deg); } .u-block-hover__additional--flip-vert { transform: rotateY(90deg); -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; } .u-block-hover--flip:hover .u-block-hover__main--flip-vert { transform: rotateY(-180deg); } .u-block-hover--flip:hover .u-block-hover__additional--flip-vert { transform: rotateY(0deg); } .u-block-hover__additional--flip-diag-1 { transform: rotate3d(1, 1, 0, 100deg); } .u-block-hover--flip:hover .u-block-hover__main--flip-diag-1 { transform: rotate3d(-1, -1, 0, 100deg); } .u-block-hover--flip:hover .u-block-hover__additional--flip-diag-1 { transform: rotate3d(0, 0, 0, 0deg); } .u-block-hover__additional--flip-diag-2 { transform: rotate3d(1, -1, 0, 100deg); } .u-block-hover--flip:hover .u-block-hover__main--flip-diag-2 { transform: rotate3d(-1, 1, 0, 100deg); } .u-block-hover--flip:hover .u-block-hover__additional--flip-diag-2 { transform: rotate3d(0, 0, 0, 0deg); } .u-block-hover--fold { perspective: 50em; } [class*="u-block-hover__main--fold"] { -ms-transform-origin: 50% 0; transform-origin: 50% 0; } [class*="u-block-hover__additional--fold"] { z-index: 1; opacity: 0; } .u-block-hover--fold:hover [class*="u-block-hover__main--fold"] { opacity: 0; transition-delay: 0; } .u-block-hover--fold:hover [class*="u-block-hover__additional--fold"] { transform: rotateX(0deg) translate3d(0, 0, 0) scale(1); opacity: 1; transition-delay: .21s; } .u-block-hover__main--fold-up { -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .u-block-hover__additional--fold-up { transform: rotateX(-90deg) translate3d(0, -50%, 0) scale(0.6); -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .u-block-hover--fold:hover .u-block-hover__main--fold-up { transform: rotateX(90deg) scale(0.6) translateY(50%); } .u-block-hover__main--fold-down { -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .u-block-hover__additional--fold-down { transform: rotateX(90deg) translate3d(0, 50%, 0) scale(0.6); -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .u-block-hover--fold:hover .u-block-hover__main--fold-down { transform: rotateX(-90deg) scale(0.6) translateY(-50%); } .u-block-hover__main--fold-left { -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .u-block-hover__additional--fold-left { transform: rotateY(90deg) translate3d(-50%, 0, 0) scale(0.6); -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } .u-block-hover--fold:hover .u-block-hover__main--fold-left { transform: rotateY(-90deg) scale(0.6) translateX(50%); } .u-block-hover__main--fold-right { -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } .u-block-hover__additional--fold-right { transform: rotateY(-90deg) translate3d(50%, 0, 0) scale(0.6); -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .u-block-hover--fold:hover .u-block-hover__main--fold-right { transform: rotateY(90deg) scale(0.6) translateX(-50%); } .u-block-hover__additional--zoom-in { opacity: 0; -ms-transform: scale(0.5); transform: scale(0.5); } .u-block-hover:hover .u-block-hover__additional--zoom-in { -ms-transform: scale(1); transform: scale(1); opacity: 1; } .u-block-hover__additional--zoom-out { -ms-transform: scale(0.5); transform: scale(0.5); -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; } .u-block-hover:hover .u-block-hover__main--zoom-out { -ms-transform: scale(0.5); transform: scale(0.5); opacity: 0; } .u-block-hover:hover .u-block-hover__additional--zoom-out { -ms-transform: scale(1); transform: scale(1); opacity: 1; transition-delay: .35s; } [class*="u-block-hover--shutter-out"]::after { content: ""; position: absolute; transition-delay: .105s; z-index: 1; } .u-block-hover__additional--shutter-out { opacity: 0; transition-delay: 0s; z-index: 2; } [class*="u-block-hover--shutter-out"]:hover::after { transition-delay: 0s; } [class*="u-block-hover--shutter-out"]:hover .u-block-hover__additional--shutter-out { opacity: 1; transition-delay: .105s; } .u-block-hover--shutter-out-horiz::after { left: 50%; right: 50%; top: 0; bottom: 0; } .u-block-hover--shutter-out-horiz:hover::after { left: 0; right: 0; } .u-block-hover--shutter-out-vert::after { top: 50%; bottom: 50%; left: 0; right: 0; } .u-block-hover--shutter-out-vert:hover::after { top: 0; bottom: 0; } .u-block-hover--shutter-out-diag-1::after { top: 50%; bottom: 50%; left: -35%; right: -35%; -ms-transform: rotate(45deg); transform: rotate(45deg); } .u-block-hover--shutter-out-diag-1:hover::after { top: -35%; bottom: -35%; } .u-block-hover--shutter-out-diag-2::after { top: 50%; bottom: 50%; left: -35%; right: -35%; -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .u-block-hover--shutter-out-diag-2:hover::after { top: -35%; bottom: -35%; } [class*="u-block-hover--shutter-in"]::after, [class*="u-block-hover--shutter-in"]::before { content: ""; position: absolute; z-index: 1; } [class*="u-block-hover--shutter-in"]::after { top: 0; left: 0; } [class*="u-block-hover--shutter-in"]::before { right: 0; bottom: 0; } .u-block-hover__additional--shutter-in { opacity: 0; z-index: 2; } [class*="u-block-hover--shutter-in"]:hover .u-block-hover__additional--shutter-in { opacity: 1; transition-delay: .21s; } .u-block-hover--shutter-in-horiz::after, .u-block-hover--shutter-in-horiz::before { width: 0; height: 100%; } .u-block-hover--shutter-in-horiz:hover::after, .u-block-hover--shutter-in-horiz:hover::before { width: 100%; } .u-block-hover--shutter-in-vert::after, .u-block-hover--shutter-in-vert::before { height: 0; width: 100%; } .u-block-hover--shutter-in-vert:hover::after, .u-block-hover--shutter-in-vert:hover::before { height: 100%; } .u-block-hover--shutter-in-diag-1::after, .u-block-hover--shutter-in-diag-1::before { width: 200%; height: 200%; transition: all .6s ease; } .u-block-hover--shutter-in-diag-1::after { -ms-transform: skew(-45deg) translateX(-150%); transform: skew(-45deg) translateX(-150%); } .u-block-hover--shutter-in-diag-1::before { -ms-transform: skew(-45deg) translateX(150%); transform: skew(-45deg) translateX(150%); } .u-block-hover--shutter-in-diag-1:hover::after { -ms-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); } .u-block-hover--shutter-in-diag-1:hover::before { -ms-transform: skew(-45deg) translateX(50%); transform: skew(-45deg) translateX(50%); } .u-block-hover--shutter-in-diag-2::after, .u-block-hover--shutter-in-diag-2::before { width: 200%; height: 200%; transition: all .6s ease; } .u-block-hover--shutter-in-diag-2::after { -ms-transform: skew(45deg) translateX(-100%); transform: skew(45deg) translateX(-100%); } .u-block-hover--shutter-in-diag-2::before { -ms-transform: skew(45deg) translateX(100%); transform: skew(45deg) translateX(100%); } .u-block-hover--shutter-in-diag-2:hover::after { -ms-transform: skew(45deg) translateX(0); transform: skew(45deg) translateX(0); } .u-block-hover--shutter-in-diag-2:hover::before { -ms-transform: skew(45deg) translateX(0); transform: skew(45deg) translateX(0); } [class*="u-block-hover--shutter-in-out"]::after, [class*="u-block-hover--shutter-in-out"]::before { content: ""; position: absolute; z-index: 1; } [class*="u-block-hover--shutter-in-out"]::after { top: 0; left: 0; } [class*="u-block-hover--shutter-in-out"]::before { right: 0; bottom: 0; } .u-block-hover__additional--shutter-in-out { opacity: 0; z-index: 2; } [class*="u-block-hover--shutter-in-out"]:hover .u-block-hover__additional--shutter-in-out { opacity: 1; transition-delay: .21s; } .u-block-hover--shutter-in-out-horiz::after, .u-block-hover--shutter-in-out-horiz::before { width: 0; height: 100%; } .u-block-hover--shutter-in-out-horiz:hover::after, .u-block-hover--shutter-in-out-horiz:hover::before { width: 100%; opacity: .75; } .u-block-hover--shutter-in-out-vert::after, .u-block-hover--shutter-in-out-vert::before { height: 0; width: 100%; } .u-block-hover--shutter-in-out-vert:hover::after, .u-block-hover--shutter-in-out-vert:hover::before { height: 100%; opacity: .75; } .u-block-hover--shutter-in-out-diag-1::after, .u-block-hover--shutter-in-out-diag-1::before { width: 200%; height: 200%; transition: all .6s ease; opacity: .75; } .u-block-hover--shutter-in-out-diag-1::after { -ms-transform: skew(-45deg) translateX(-150%); transform: skew(-45deg) translateX(-150%); } .u-block-hover--shutter-in-out-diag-1::before { -ms-transform: skew(-45deg) translateX(150%); transform: skew(-45deg) translateX(150%); } .u-block-hover--shutter-in-out-diag-1:hover::after { -ms-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); } .u-block-hover--shutter-in-out-diag-1:hover::before { -ms-transform: skew(-45deg) translateX(50%); transform: skew(-45deg) translateX(50%); } .u-block-hover--shutter-in-out-diag-2::after, .u-block-hover--shutter-in-out-diag-2::before { width: 200%; height: 200%; transition: all .6s ease; opacity: .75; } .u-block-hover--shutter-in-out-diag-2::after { -ms-transform: skew(45deg) translateX(-100%); transform: skew(45deg) translateX(-100%); } .u-block-hover--shutter-in-out-diag-2::before { -ms-transform: skew(45deg) translateX(100%); transform: skew(45deg) translateX(100%); } .u-block-hover--shutter-in-out-diag-2:hover::after { -ms-transform: skew(45deg) translateX(0); transform: skew(45deg) translateX(0); } .u-block-hover--shutter-in-out-diag-2:hover::before { -ms-transform: skew(45deg) translateX(0); transform: skew(45deg) translateX(0); } .u-block-hover--strip-shutter::before, .u-block-hover--strip-shutter::after, .u-block-hover__additional--strip-shutter::before, .u-block-hover__additional--strip-shutter::after { content: ""; position: absolute; top: 0; width: 25%; height: 100%; -ms-transform: scaleY(0); transform: scaleY(0); opacity: 0; } .u-block-hover--strip-shutter::before, .u-block-hover--strip-shutter::after { z-index: 1; } .u-block-hover--strip-shutter::before { left: 0; transition-delay: 0s; } .u-block-hover--strip-shutter::after { left: 25%; transition-delay: .105s; } .u-block-hover__additional--strip-shutter { z-index: 3; } .u-block-hover__additional--strip-shutter::before, .u-block-hover__additional--strip-shutter::after { z-index: -1; } .u-block-hover__additional--strip-shutter::before { left: 50%; transition-delay: .21s; } .u-block-hover__additional--strip-shutter::after { left: 75%; transition-delay: .35s; } .u-block-hover--strip-shutter:hover::before, .u-block-hover--strip-shutter:hover::after, .u-block-hover--strip-shutter:hover .u-block-hover__additional--strip-shutter::before, .u-block-hover--strip-shutter:hover .u-block-hover__additional--strip-shutter::after { -ms-transform: scale(1); transform: scale(1); opacity: 1; } .u-block-hover__additional--strip-shutter__inner { opacity: 0; } .u-block-hover--strip-shutter:hover .u-block-hover__additional--strip-shutter__inner { opacity: 1; transition-delay: .35s; } .u-block-hover--tile::before, .u-block-hover--tile::after, .u-block-hover__additional--tile::before, .u-block-hover__additional--tile::after { content: ""; position: absolute; width: 50%; height: 50%; -ms-transform: scale(0); transform: scale(0); opacity: 0; } .u-block-hover--tile::before, .u-block-hover--tile::after { z-index: 1; } .u-block-hover--tile::before { top: 0; left: 0; transition-delay: 0s; } .u-block-hover--tile::after { top: 0; left: 50%; transition-delay: .105s; } .u-block-hover__additional--tile { z-index: 3; } .u-block-hover__additional--tile::before, .u-block-hover__additional--tile::after { z-index: -1; } .u-block-hover__additional--tile::before { top: 50%; left: 0; transition-delay: .21s; } .u-block-hover__additional--tile::after { top: 50%; left: 50%; transition-delay: .35s; } .u-block-hover--tile:hover::before, .u-block-hover--tile:hover::after, .u-block-hover--tile:hover .u-block-hover__additional--tile::before, .u-block-hover--tile:hover .u-block-hover__additional--tile::after { -ms-transform: scale(1); transform: scale(1); opacity: 1; } .u-block-hover__additional--tile__inner { opacity: 0; } .u-block-hover--tile:hover .u-block-hover__additional--tile__inner { opacity: 1; transition-delay: .35s; } .u-block-hover--cube { overflow: visible; background-color: transparent; perspective: 50em; transform-style: preserve-3d; } [class*="u-block-hover__main--cube"] { transition-delay: .05s; } [class*="u-block-hover__additional--cube"] { opacity: 0; transition-delay: 0s; } .u-block-hover--cube:hover [class*="u-block-hover__main--cube"] { opacity: 0; transition-delay: 0s; } .u-block-hover--cube:hover [class*="u-block-hover__additional--cube"] { opacity: 1; transform: translateY(0%) rotateX(0deg); transition-delay: .05s; } .u-block-hover__additional--cube-up { transform: translateY(50%) rotateX(-90deg); } .u-block-hover--cube:hover .u-block-hover__main--cube-up { transform: translateY(-50%) rotateX(90deg); } .u-block-hover__additional--cube-down { transform: translateY(-50%) rotateX(90deg); } .u-block-hover--cube:hover .u-block-hover__main--cube-down { transform: translateY(50%) rotateX(-90deg); } .u-block-hover__additional--cube-left { transform: translateX(-50%) rotateY(-90deg); } .u-block-hover--cube:hover .u-block-hover__main--cube-left { transform: translateX(50%) rotateY(90deg); } .u-block-hover__additional--cube-right { transform: translateX(50%) rotateY(90deg); } .u-block-hover--cube:hover .u-block-hover__main--cube-right { transform: translateX(-50%) rotateY(-90deg); } .u-block-hover--border-reveal::before, .u-block-hover--border-reveal::after, .u-block-hover__additional--border-reveal::before, .u-block-hover__additional--border-reveal::after { content: ""; position: absolute; background-color: #fff; -ms-transform-origin: 0 0; transform-origin: 0 0; } .u-block-hover--border-reveal::before, .u-block-hover--border-reveal::after { left: 5px; right: 5px; height: 4px; z-index: 1; -ms-transform: scaleX(0); transform: scaleX(0); } .u-block-hover--border-reveal::before { top: 5px; transition-delay: .28s; } .u-block-hover--border-reveal:hover::before { transition-delay: 0s; } .u-block-hover--border-reveal::after { bottom: 5px; transition-delay: 0s; } .u-block-hover--border-reveal:hover::after { transition-delay: .28s; } .u-block-hover__additional--border-reveal { background-color: transparent; z-index: 3; } .u-block-hover__additional--border-reveal__inner { opacity: 0; } .u-block-hover__additional--border-reveal::before, .u-block-hover__additional--border-reveal::after { top: 5px; bottom: 5px; width: 4px; z-index: -1; -ms-transform: scaleY(0); transform: scaleY(0); } .u-block-hover__additional--border-reveal::before { left: 5px; transition-delay: .28s; } .u-block-hover--border-reveal:hover .u-block-hover__additional--border-reveal::before { transition-delay: 0s; } .u-block-hover__additional--border-reveal::after { right: 5px; transition-delay: 0s; } .u-block-hover--border-reveal:hover .u-block-hover__additional--border-reveal::after { transition-delay: .28s; } .u-block-hover--border-reveal:hover .u-block-hover__main--border-reveal { opacity: 0; } .u-block-hover--border-reveal:hover::before, .u-block-hover--border-reveal:hover::after, .u-block-hover--border-reveal:hover .u-block-hover__additional--border-reveal::before, .u-block-hover--border-reveal:hover .u-block-hover__additional--border-reveal::after { -ms-transform: scale(1); transform: scale(1); } .u-block-hover--border-reveal:hover .u-block-hover__additional--border-reveal__inner { opacity: 1; transition-delay: .35s; } .u-block-hover:hover img[class*="u-block-hover__main--mover-"], .u-block-hover:hover [class*="u-block-hover__additional--mover-"] { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } img[class*="u-block-hover__main--mover-"] { max-width: initial; width: calc(100% + 60px); transition-duration: 0.5s; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } [class*="u-block-hover__additional--mover-"] { opacity: 0; transition-duration: 0.5s; } img.u-block-hover__main--mover-left { transform: translate3d(-60px, 0, 0); } .u-block-hover__additional--mover-left { transform: translate3d(10px, 0, 0); } img.u-block-hover__main--mover-right { transform: translate3d(-60px, 0, 0); } .u-block-hover__additional--mover-right { transform: translate3d(-10px, 0, 0); } img.u-block-hover__main--mover-up { transform: translate3d(0, 20px, 0) scale3d(1.1, 1.1, 1.1); } .u-block-hover__additional--mover-up { transform: translate3d(0, 10px, 0); } img.u-block-hover__main--mover-down { transform: translate3d(0, -20px, 0) scale3d(1.1, 1.1, 1.1); } .u-block-hover__additional--mover-down { transform: translate3d(0, -10px, 0); } .u-block-hover__additional--focuser-element { top: 30px; right: 30px; bottom: 30px; left: 30px; opacity: .3; box-shadow: 0 0 0 31px rgba(0, 0, 0, 0.5); transform: scale3d(1.4, 1.4, 1.4); transition-duration: .5s; } .u-block-hover__additional--focuser-target { position: static; opacity: 0; transform: scale3d(1.4, 1.4, 1.4); transition-duration: .5s; } .u-block-hover:hover .u-block-hover__additional--focuser-target, .u-block-hover:hover .u-block-hover__additional--focuser-element { opacity: 1; transform: scale3d(1, 1, 1); transition-duration: .3s; } img[class*="u-block-hover__main--magnifier"] { max-width: initial; width: calc(100% + 10px); margin: -10px 0; } [class*="u-block-hover__additional--magnifier-element"] { width: 400px; height: 400px; border-radius: 50%; box-shadow: 0 0 0 4000px rgba(255, 255, 255, 0.3); z-index: 2; opacity: 0; transform: scale3d(0.7, 0.7, 0.7); -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .u-block-hover:hover [class*="u-block-hover__additional--magnifier-element"] { opacity: 1; transform: scale3d(1, 1, 1); } [class*="u-block-hover__additional--magnifier-description"] { max-width: 115px; z-index: 3; opacity: 0; } .u-block-hover:hover [class*="u-block-hover__additional--magnifier-description"] { opacity: 1; transform: translate3d(0, 0, 0); } .u-block-hover__additional--magnifier-element-bottom-right { top: auto; left: auto; bottom: -180px; right: -180px; } .u-block-hover__additional--magnifier-description-bottom-right { top: auto; right: 30px; bottom: 30px; left: auto; transform: translate3d(20px, 20px, 0); } .u-block-hover:hover img.u-block-hover__main--magnifier-bottom-right { transform: translate3d(-10px, -10px, 0); } .u-block-hover__additional--magnifier-element-top-right { top: -180px; right: -180px; bottom: auto; left: auto; } .u-block-hover__additional--magnifier-description-top-right { top: 30px; right: 30px; bottom: auto; left: auto; transform: translate3d(20px, -20px, 0); } .u-block-hover:hover img.u-block-hover__main--magnifier-top-right { transform: translate3d(-10px, 10px, 0); } img.u-block-hover__main--magnifier-bottom-left { transform: translate3d(-10px, 0, 0); } .u-block-hover__additional--magnifier-element-bottom-left { top: auto; left: -180px; bottom: -180px; right: auto; } .u-block-hover__additional--magnifier-description-bottom-left { top: auto; right: auto; bottom: 30px; left: 30px; transform: translate3d(-20px, 20px, 0); } .u-block-hover:hover img.u-block-hover__main--magnifier-bottom-left { transform: translate3d(0, -10px, 0); } img.u-block-hover__main--magnifier-top-left { transform: translate3d(-10px, 0, 0); } .u-block-hover__additional--magnifier-element-top-left { top: -180px; left: -180px; bottom: auto; right: auto; } .u-block-hover__additional--magnifier-description-top-left { top: 30px; right: auto; bottom: auto; left: 30px; transform: translate3d(-20px, -20px, 0); } .u-block-hover:hover img.u-block-hover__main--magnifier-top-left { transform: translate3d(0, 10px, 0); } [class*="u-block-hover__additional--pappercuter"] { -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .u-block-hover__additional--pappercuter-inner { width: 100%; transform: rotate3d(0, 0, 1, 5deg); } .u-block-hover__additional--pappercuter-front, .u-block-hover__additional--pappercuter-back { max-width: initial; width: 120%; top: -60px; bottom: -60px; left: -10%; z-index: 2; background-position: center; background-size: cover; transform: rotate3d(0, 0, 1, -5deg); } .u-block-hover__additional--pappercuter-front { clip: rect(0px, auto, 246px, 0px); } .u-block-hover__additional--pappercuter-back { top: -61px; clip: rect(246px, auto, auto, 0px); } .u-block-hover:hover .u-block-hover__additional--pappercuter-front { transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -10deg) translate3d(0, -45%, 0); } .u-block-hover:hover .u-block-hover__additional--pappercuter-back { transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -10deg) translate3d(0, 45%, 0); } [class*="u-block-hover__additional--outside"] { opacity: 0; visibility: hidden; transition-duration: .5s; transition-timing-function: cubic-bezier(0.7, -1.2, 0.8, 1.2); } .u-block-hover:hover [class*="u-block-hover__additional--outside"] { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); transition-timing-function: cubic-bezier(0.25, 1.8, 0.8, 1); } .u-block-hover__additional--outside-down { transform: translate3d(0, -100%, 0); } .u-block-hover__additional--outside-up { transform: translate3d(0, 100%, 0); } .u-block-hover__additional--outside-left { transform: translate3d(100%, 0, 0); } .u-block-hover__additional--outside-right { transform: translate3d(-100%, 0, 0); } [class*="u-block-hover__additional--lightspeed"] { visibility: hidden; opacity: 0; transition-duration: .7s; transition-timing-function: cubic-bezier(0.75, -1.2, 0.8, 2); } .u-block-hover:hover [class*="u-block-hover__additional--lightspeed"] { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) skew(0deg, 0deg); transition-timing-function: cubic-bezier(0.25, 2, 0.75, 1); } .u-block-hover__additional--lightspeed-left { -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; transform: translate3d(150%, 0, 0) skew(-35deg, 0deg); } .u-block-hover__additional--lightspeed-right { -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; transform: translate3d(-150%, 0, 0) skew(35deg, 0deg); } .u-block-hover__additional--lightspeed-down { -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; transform: translate3d(0, -150%, 0) skew(0deg, -35deg); } .u-block-hover__additional--lightspeed-up { -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; transform: translate3d(0, 150%, 0) skew(0deg, -35deg); } [class*="u-block-hover__additional--rotate"] { opacity: 0; visibility: hidden; } .u-block-hover:hover [class*="u-block-hover__additional--rotate"] { opacity: 1; visibility: visible; transform: rotate3d(0, 0, 0, 0deg) scale3d(1, 1, 1); } .u-block-hover__additional--rotate-in { opacity: 1; transition-property: transform, opacity, visibility; transition-duration: .4s; transform: rotate3d(0, 0, 1, 720deg) scale3d(0, 0, 0); } .u-block-hover__additional--rotate-down-left { -ms-transform-origin: 0 100%; transform-origin: 0 100%; transform: rotate3d(0, 0, 1, -45deg); } .u-block-hover__additional--rotate-down-right { -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; transform: rotate3d(0, 0, 1, 45deg); } .u-block-hover__additional--rotate-up-left { -ms-transform-origin: 0 100%; transform-origin: 0 100%; transform: rotate3d(0, 0, 1, 45deg); } .u-block-hover__additional--rotate-up-right { -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; transform: rotate3d(0, 0, 1, -45deg); } .u-block-hover__additional--jump { position: static; } .u-block-hover:hover .u-block-hover__additional--jump, .u-block-hover.u-block-hover__additional--jump:hover { transform: translate3d(0, -10px, 0); } /*------------------------------------ Dedicated Properties ------------------------------------*/ .u-block-hover:hover, .u-block-hover:focus { /* Opacity */ /* Colors */ /* Background-colors */ } .u-block-hover:hover .u-block-hover__prop-opacity-1, .u-block-hover:focus .u-block-hover__prop-opacity-1 { opacity: 1; } .u-block-hover:hover .u-block-hover__prop-color-white, .u-block-hover:focus .u-block-hover__prop-color-white { color: #fff; } .u-block-hover:hover .u-block-hover__prop-bg-primary, .u-block-hover:focus .u-block-hover__prop-bg-primary { background-color: #4fd2c2; } .u-block-hover:hover .u-block-hover__prop-bg-primary-opacity-0_9, .u-block-hover:focus .u-block-hover__prop-bg-primary-opacity-0_9 { background-color: rgba(79, 210, 194, 0.9); } /*------------------------------------ Blockquotes ------------------------------------*/ .u-blockquote-v7 { position: relative; padding-top: 55px; } .u-blockquote-v7::before { content: "\f10d"; position: absolute; top: 0; left: 50%; display: block; width: 35px; height: 35px; font-size: 12px; font-family: "FontAwesome"; color: #fff; line-height: 35px; background: #4fd2c2; border-radius: 50%; margin-left: -18px; } .u-blockquote-v8 { position: relative; background-color: #fff; box-shadow: 5px 6px 9px -6px rgba(153, 153, 153, 0.08); } .u-blockquote-v8::after { content: ""; position: absolute; left: 50px; bottom: -15px; display: block; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 0; border-color: #fff transparent transparent transparent; filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.05)); } /*------------------------------------ Accordions ------------------------------------*/ .u-accordion__header { padding: 0.71429rem 1.07143rem; } .u-accordion__body { padding: 1.07143rem; } .u-accordion__control-icon i:nth-child(1) { display: none; } .collapsed .u-accordion__control-icon i:nth-child(1) { display: inline; } .u-accordion__control-icon i:nth-child(2) { display: inline; } .collapsed .u-accordion__control-icon i:nth-child(2) { display: none; } .u-accordion-line-icon-pro { position: relative; top: 2px; } .u-accordion-color-primary .u-accordion__header [aria-expanded="true"] { color: #4fd2c2 !important; } .u-accordion-color-white .u-accordion__header [aria-expanded="true"] { color: #fff !important; } .u-accordion-bg-primary .u-accordion__header [aria-expanded="true"] { background-color: #4fd2c2 !important; border-color: #4fd2c2 !important; } .u-accordion-bg-white .u-accordion__header [aria-expanded="true"] { background-color: #fff !important; border-color: #fff !important; } .u-accordion-brd-primary .u-accordion__header [aria-expanded="true"] { border-color: #4fd2c2 !important; } .u-accordion-brd-white .u-accordion__header [aria-expanded="true"] { border-color: #fff !important; } /*------------------------------------ Carousels ------------------------------------*/ .u-carousel-v3 .slick-slide { opacity: .5; transition-property: opacity; transition-duration: .4s; transition-timing-function: ease-in; } .u-carousel-v3 .slick-center { opacity: 1; } .u-carousel-v5 .slick-list { height: 100%; } .u-carousel-v5 .slick-track { display: -ms-flexbox; display: flex; height: 100%; } .u-carousel-v5 .slick-track .slick-slide { display: -ms-flexbox; display: flex; height: auto; } /*------------------------------------ Slick Carousel v12 ------------------------------------*/ /*------------------------------------ Custom Bootstrap ------------------------------------*/ /* Paginations */ .progress { font-size: 1rem; line-height: inherit; background-color: #eee; } .progress-bar { height: auto; min-height: 12px; background-color: #4fd2c2; } .btn-primary { background-color: #4fd2c2; border-color: #4fd2c2; } .btn-primary:hover { color: #fff; background-color: #47d0bf; border-color: #47d0bf; } .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 2px rgba(79, 210, 194, 0.5); } .btn-primary.disabled, .btn-primary:disabled { background-color: #4fd2c2; border-color: #4fd2c2; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { background-color: #47d0bf; border-color: #47d0bf; } .btn-outline-primary { color: #4fd2c2; border-color: #4fd2c2; } .btn-outline-primary:hover { background-color: #47d0bf; border-color: #47d0bf; } .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 2px rgba(79, 210, 194, 0.5); } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #4fd2c2; } .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { background-color: #47d0bf; border-color: #47d0bf; } .card, .card-header { border-color: #eee; } .card-header { padding: 0.71429rem 1.07143rem; } .card-block { padding: 1.07143rem; } .form-control:focus, .custom-select:focus { box-shadow: none; } .form-control:-ms-input-placeholder { color: inherit; opacity: .5; } .form-control::placeholder { color: inherit; opacity: .5; } .slick-slide:focus { outline: 0 none; } [data-lazy] { opacity: 0; transition-property: opacity; transition-duration: .4s; transition-timing-function: ease-in; } .js-carousel .js-next, .js-carousel .js-prev { opacity: 0; } .js-carousel.slick-initialized .js-next, .js-carousel.slick-initialized .js-prev { opacity: 1; } .js-slide:first-child { height: auto; } .slick-vertical .slick-slide { border: none; } /*------------------------------------ Border Colors ------------------------------------*/ /* Primary Colors */ .slick-active .g-brd-primary--before--active::before { border-color: #4fd2c2 !important; } .slick-active .g-brd-primary--active { border-color: #4fd2c2 !important; } .js-pagination .g-brd-primary--before--hover:hover::before { border-color: #4fd2c2 !important; } /*------------------------------------ Border Width ------------------------------------*/ .slick-active .g-brd-3--before--active::before { border-width: 3px !important; } /*------------------------------------ Box shadows ------------------------------------*/ .g-parent.slick-current .u-shadow-v24--active { box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.06); } /*------------------------------------ Dot line v1 ------------------------------------*/ .slick-active .u-dot-line-v1__inner::before, .slick-active .u-dot-line-v1-2__inner::before { width: 100%; height: 100%; } /*------------------------------------ Dot line v2 ------------------------------------*/ .slick-active .u-dot-line-v2__inner::before, .slick-active .u-dot-line-v2-2__inner::before { width: 100%; height: 100%; } /* Add here all your css styles (customizations) */ .g-color-primary--hover:hover * { color: #4fd2c2 !important; } /* RESTAURANT */ .u-theme-restaurant-shadow-v1 { box-shadow: inset 2px 2px 2px #45c2b3; } .landing-highlight { background-color: #4fd2c2; } /* Custom box shadows */ .u-shadow-custom-v1 { box-shadow: 0 0 13px 11px rgba(0, 0, 0, 0.1); } .u-shadow-custom-v2 { box-shadow: 0 0 13px 11px #4fd2c2; } /*------------------------------------ Globals ------------------------------------*/ :root { --theme-color-primary: #4fd2c2; --theme-color-second: darken(#4fd2c2, 10%); --theme-color-light: lighten(#4fd2c2, 10%); --primary: #4fd2c2; --secondary: darken(#4fd2c2, 10%); } .text-primary { color: #4fd2c2 !important; } .text-secondary { color: #e74b3c !important; } .text-success { color: #5cb85c !important; } .text-danger { color: #d9534f !important; } .text-warning { color: #f0ad4e !important; } .text-info { color: #5bc0de !important; } .bg-primary { background-color: #4fd2c2 !important; } .bg-secondary { background-color: #e74b3c !important; } .bg-success { background-color: #5cb85c !important; } .bg-danger { background-color: #d9534f !important; } .bg-warning { background-color: #f0ad4e !important; } .bg-info { background-color: #5bc0de !important; } .bd-callout-primary { border-left-color: #4fd2c2 !important; } .bd-callout-secondary { border-left-color: #e74b3c !important; } .bd-callout-success { border-left-color: #5cb85c !important; } .bd-callout-danger { border-left-color: #d9534f !important; } .bd-callout-warning { border-left-color: #f0ad4e !important; } .bd-callout-info { border-left-color: #5bc0de !important; } .border-primary { border-color: #4fd2c2 !important; } .border-secondary { border-color: #e74b3c !important; } .border-success { border-color: #5cb85c !important; } .border-danger { border-color: #d9534f !important; } .border-warning { border-color: #f0ad4e !important; } .border-info { border-color: #5bc0de !important; } /*------------------------------------ Background Gradient Colors ------------------------------------*/ /* Simple Linear Gradients ------------------------------------*/ /* Gray Light v1 */ .g-bg-gray-light-gradient-v1--after::after { background: linear-gradient(to bottom, rgba(247, 247, 247, 0.5), #f7f7f7); } /* White v1 */ .g-bg-white-gradient-v1--after::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.9)); } /* Linear Gradients ------------------------------------*/ /* Gray Gradient */ .g-bg-gray-lineargradient { background-repeat: repeat-x; background-image: linear-gradient(180deg, #fff, #dbdbdb); } /* Blue Pink Gradient */ .g-bg-bluepink-lineargradient { background-repeat: repeat-x; background-image: linear-gradient(50deg, #2b7cb6, #f62d51); } /* Blue Gradient */ .g-bg-blue-lineargradient { background-repeat: repeat-x; background-image: linear-gradient(0deg, #73bec7, #4e66b0); } .g-bg-blue-lineargradient-v2 { background-repeat: repeat-x; background-image: linear-gradient(225deg, #429edc, #00629e); } .g-bg-blue-lineargradient-v3 { background-repeat: repeat-x; background-image: linear-gradient(225deg, #3266a2, #98cfbf); } .g-bg-blue-lineargradient-v4 { background-repeat: repeat-x; background-image: linear-gradient(225deg, #5b85df, #3ec2e3); } .g-bg-blue-lineargradient-v5 { background-repeat: repeat-x; background-image: linear-gradient(225deg, #0050c2, #5180fa); } /* Orange Gradient */ .g-bg-orange-lineargradient { background-repeat: repeat-x; background-image: linear-gradient(225deg, #be1715, #ed6d0f); } .g-bg-orange-lineargradient-v2 { background-repeat: repeat-x; background-image: linear-gradient(225deg, #f5cd21, #c22821); } /* Yellow Gradient */ .g-bg-yellow-lineargradient { background-repeat: repeat-x; background-image: linear-gradient(225deg, #f59b00, #f5d400); } /* Dark Purple Gradient */ .g-bg-darkpurple-lineargradient { background-repeat: repeat-x; background-image: linear-gradient(225deg, #0b011d, #330c3c); } /* Blue Gray Gradient */ .g-bg-bluegray-lineargradient { background-repeat: repeat-x; background-image: linear-gradient(225deg, #1d253c, #3e4757); } /* Pink Gradient */ .g-bg-pink-lineargradient { background-repeat: repeat-x; background-image: linear-gradient(225deg, #b6003b, #ed1261); } /* Pink-v2 Gradient */ .g-bg-pink-lineargradient-v2 { background-image: linear-gradient(to right top, #fc7279 10%, #ff7b9c 65%, #ffc019 125%); background-repeat: no-repeat; } /* Red Gradient */ .g-bg-red-lineargradient { background-repeat: repeat-x; background-image: linear-gradient(225deg, #d70417, #9f041b); } /* Black Gradient */ .g-bg-black-gradient-opacity-v1, .g-bg-black-gradient-opacity-v1--after::after { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); background-repeat: repeat-x; } /* Green Gradient */ .g-bg-green-gradient-opacity-v1, .g-bg-green-gradient-opacity-v1--after::after { background-image: linear-gradient(to bottom, rgba(51, 152, 220, 0.5) 0%, rgba(114, 192, 44, 0.8) 100%); background-repeat: repeat-x; } /* Purple Gradient */ .g-bg-purple-gradient-opacity-v1, .g-bg-purple-gradient-opacity-v1--after::after { background-image: linear-gradient(to bottom, rgba(114, 192, 44, 0.5) 0%, rgba(154, 105, 203, 0.8) 100%); background-repeat: repeat-x; } /* Pink Light Gradient */ .g-bg-pink-gradient-opacity-v1, .g-bg-pink-gradient-opacity-v1--after::after { background-image: linear-gradient(to bottom, rgba(114, 192, 44, 0.5) 0%, rgba(232, 28, 98, 0.8) 100%); background-repeat: repeat-x; } /* Cyan Gradient */ .g-bg-cyan-gradient-opacity-v1, .g-bg-cyan-gradient-opacity-v1--after::after { background-image: linear-gradient(to bottom, rgba(0, 0, 153, 0.5) 0%, rgba(0, 190, 214, 0.6) 100%); background-repeat: repeat-x; } /* Purple Gradient */ .g-bg-purple-gradient-opacity-v1, .g-bg-purple-gradient-opacity-v1--after::after { background-repeat: repeat-x; background-image: linear-gradient(150deg, #b7ebf6, rgba(228, 97, 210, 0.7)); } /* Primary Gradient */ .g-bg-primary-gradient-opacity-v1, .g-bg-primary-gradient-opacity-v1--after::after { background-repeat: repeat-x; background-image: linear-gradient(150deg, #72c02c, rgba(51, 152, 220, 0.7)); } /* Gray Gradient */ .g-bg-gray-gradient-opacity-v1, .g-bg-gray-gradient-opacity-v1--after::after { background-image: linear-gradient(to top, #f7f7f7 0%, white 100%); background-repeat: repeat-x; } /* White Gradient */ .g-bg-white-gradient-opacity-v1, .g-bg-white-gradient-opacity-v1--after::after { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); background-repeat: repeat-x; } /* White Gradient */ .g-bg-white-gradient-opacity-v2, .g-bg-white-gradient-opacity-v2--after::after { background-image: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.1) 100%); background-repeat: repeat-x; } /* White Gradient */ .g-bg-white-gradient-opacity-v3, .g-bg-white-gradient-opacity-v3--after::after { background-image: linear-gradient(to left, white 30%, rgba(255, 255, 255, 0.3) 100%); background-repeat: repeat-x; } /* White Gradient */ .g-bg-white-gradient-opacity-v4, .g-bg-white-gradient-opacity-v4--after::after { background-image: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0.3) 100%); background-repeat: repeat-x; } /* White Gradient */ .g-bg-white-gradient-opacity-v5, .g-bg-white-gradient-opacity-v5--after::after { background-image: linear-gradient(to right, white 47%, rgba(255, 255, 255, 0) 75%); background-repeat: repeat-x; } /* Bluegray Gradient */ .g-bg-bluegray-gradient-opacity-v1, .g-bg-bluegray-gradient-opacity-v1--after::after { background-image: linear-gradient(to top, rgba(88, 95, 105, 0.2) 0%, rgba(0, 0, 0, 0) 100%); background-repeat: repeat-x; } /* Bluegray Gradient */ .g-bg-bluegray-gradient-opacity-v2, .g-bg-bluegray-gradient-opacity-v2--after::after { background-image: linear-gradient(to top, rgba(88, 95, 105, 0.3) 0%, rgba(0, 0, 0, 0) 100%); background-repeat: repeat-x; } /* Bluegray Gradient */ .g-bg-bluegray-gradient-opacity-v3, .g-bg-bluegray-gradient-opacity-v3--after::after { background-repeat: repeat-x; background-image: linear-gradient(150deg, rgba(107, 125, 224, 0.85), #2a2734); } /* Radial Gradients (Ellipse) ------------------------------------*/ /* Lightblue Gradient */ .g-bg-lightblue-radialgradient-ellipse { background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fff 22%, #d6e2ee); background-repeat: no-repeat; } /* Gray Gradient */ .g-bg-gray-radialgradient-ellipse { background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #dbdbdb 22%, #bbb); background-repeat: no-repeat; } /* Gray Gradient */ .g-bg-graylight-radialgradient-ellipse { background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fff 25%, #eee); background-repeat: no-repeat; } /* Radial Gradients (Circle) ------------------------------------*/ /* Lightblue Gradient */ .g-bg-lightblue-radialgradient-circle { background-image: radial-gradient(circle farthest-corner at 75% 95%, #fff, #d6e2ee); background-repeat: no-repeat; } /* Blue Gradient */ .g-bg-blue-radialgradient-circle { background-image: radial-gradient(circle farthest-side at 50% 50%, #2294d7, #275296); background-repeat: no-repeat; } /* Dark Gray Gradient */ .g-bg-darkgray-radialgradient-circle { background-image: radial-gradient(circle farthest-side at 110% 0, #596070, #31353e); background-repeat: no-repeat; } .g-bg-blue-radialgradient-circle-endless { background-image: repeating-radial-gradient(circle at 50% 50%, #b9ecfe, #b9ecfe 10px, #82ddff 10px, #82ddff 20px); } .g-bg-gray-verticalstripes-endless { background: repeating-linear-gradient(to bottom, #fff, #fff 5px, #eee 5px, #eee 10px); } /*------------------------------------ Background Colors ------------------------------------*/ /* Basic Colors ------------------------------------*/ /* Main Colors */ .g-bg-main { background-color: #fff !important; } .g-bg-main--hover:hover { background-color: #fff !important; } .g-bg-main--after::after { background-color: #fff !important; } .g-bg-main--before::before { background-color: #fff !important; } /* Main Secondary */ .g-bg-secondary { background-color: #fafafa !important; } .g-bg-secondary--hover:hover { background-color: #fafafa !important; } .g-bg-secondary--after::after { background-color: #fafafa !important; } .g-bg-secondary--before::before { background-color: #fafafa !important; } /* Primary Colors */ .g-bg-primary { background-color: #4fd2c2 !important; } .g-bg-primary--hover:hover { background-color: #4fd2c2 !important; } .u-block-hover:hover .g-bg-primary--hover { background-color: #4fd2c2; } .g-parent:hover .g-bg-primary--parent-hover { background-color: #4fd2c2 !important; } .g-bg-primary--active.active, .active .g-bg-primary--active { background-color: #4fd2c2 !important; } .g-parent.active .g-bg-primary--parent-active { background-color: #4fd2c2 !important; } .g-bg-primary--before::before, .g-bg-primary--after::after { background-color: #4fd2c2 !important; } .g-bg-primary-dark-v1 { background-color: #47d0bf !important; } .g-bg-primary-dark-v1--hover:hover { background-color: #47d0bf !important; } .g-bg-primary-dark-v2 { background-color: #45c2b3 !important; } .g-bg-primary-dark-v2--hover:hover { background-color: #45c2b3 !important; } .g-bg-primary-dark-v3 { background-color: #41b5a7 !important; } .g-bg-primary-dark-v3--hover:hover { background-color: #41b5a7 !important; } .g-bg-primary-opacity-0_1 { background-color: rgba(79, 210, 194, 0.1) !important; } .g-bg-primary-opacity-0_1--hover:hover { background-color: rgba(79, 210, 194, 0.1) !important; } .g-bg-primary-opacity-0_1--before::before { background-color: rgba(79, 210, 194, 0.1) !important; } .g-bg-primary-opacity-0_2 { background-color: rgba(79, 210, 194, 0.2) !important; } .g-bg-primary-opacity-0_2--hover:hover { background-color: rgba(79, 210, 194, 0.2) !important; } .g-bg-primary-opacity-0_2--hover--after:hover::after { background-color: rgba(79, 210, 194, 0.2) !important; } .active .g-bg-primary-opacity-0_2--active { background-color: rgba(79, 210, 194, 0.2) !important; } .g-bg-primary-opacity-0_2--before::before, .g-bg-primary-opacity-0_2--after::after { background-color: rgba(79, 210, 194, 0.2) !important; } .g-bg-primary-opacity-0_3 { background-color: rgba(79, 210, 194, 0.3) !important; } .g-bg-primary-opacity-0_3--hover:hover { background-color: rgba(79, 210, 194, 0.3) !important; } .g-bg-primary-opacity-0_3--hover--after:hover::after { background-color: rgba(79, 210, 194, 0.3) !important; } .active .g-bg-primary-opacity-0_3--active { background-color: rgba(79, 210, 194, 0.3) !important; } .g-bg-primary-opacity-0_3--before::before, .g-bg-primary-opacity-0_3--after::after { background-color: rgba(79, 210, 194, 0.3) !important; } .g-bg-primary-opacity-0_4 { background-color: rgba(79, 210, 194, 0.4) !important; } .g-bg-primary-opacity-0_4--hover:hover { background-color: rgba(79, 210, 194, 0.4) !important; } .g-bg-primary-opacity-0_4--hover--after:hover::after { background-color: rgba(79, 210, 194, 0.4) !important; } .g-bg-primary-opacity-0_4--after::after { background-color: rgba(79, 210, 194, 0.4) !important; } .g-bg-primary-opacity-0_4--before::before { background-color: rgba(79, 210, 194, 0.4) !important; } .g-bg-primary-opacity-0_6 { background-color: rgba(79, 210, 194, 0.6) !important; } .g-bg-primary-opacity-0_6--hover:hover { background-color: rgba(79, 210, 194, 0.6) !important; } .g-bg-primary-opacity-0_6--hover--after:hover::after { background-color: rgba(79, 210, 194, 0.6) !important; } .g-bg-primary-opacity-0_6--after::after { background-color: rgba(79, 210, 194, 0.6) !important; } .g-bg-primary-opacity-0_6--before::before { background-color: rgba(79, 210, 194, 0.6) !important; } .g-bg-primary-opacity-0_8 { background-color: rgba(79, 210, 194, 0.8) !important; } .g-bg-primary-opacity-0_8--hover:hover { background-color: rgba(79, 210, 194, 0.8) !important; } .g-bg-primary-opacity-0_8--hover--after:hover::after { background-color: rgba(79, 210, 194, 0.8) !important; } .g-bg-primary-opacity-0_8--before::after, .g-bg-primary-opacity-0_8--after::after { background-color: rgba(79, 210, 194, 0.8) !important; } .g-bg-primary-opacity-0_8--before::before, .g-bg-primary-opacity-0_8--after::before { background-color: rgba(79, 210, 194, 0.8) !important; } .g-bg-primary-opacity-0_8--before--hover:hover::after, .g-bg-primary-opacity-0_8--after--hover:hover::after { background-color: rgba(79, 210, 194, 0.8) !important; } .g-bg-primary-opacity-0_9 { background-color: rgba(79, 210, 194, 0.9) !important; } .g-bg-primary-opacity-0_9--hover:hover { background-color: rgba(79, 210, 194, 0.9) !important; } .g-bg-primary-opacity-0_9--hover--after:hover::after { background-color: rgba(79, 210, 194, 0.9) !important; } .g-bg-primary-opacity-0_9--before::after, .g-bg-primary-opacity-0_9--after::after { background-color: rgba(79, 210, 194, 0.9) !important; } .g-bg-primary-opacity-0_9--before::before, .g-bg-primary-opacity-0_9--after::before { background-color: rgba(79, 210, 194, 0.9) !important; } .g-bg-primary-opacity-0_9--before--hover:hover::after, .g-bg-primary-opacity-0_9--after--hover:hover::after { background-color: rgba(79, 210, 194, 0.9) !important; } /* Primary Colors */ .g-fill-primary--first { fill: #4fd2c2 !important; } .g-fill-primary-opacity-0_1--first { fill: rgba(79, 210, 194, 0.1) !important; } .g-fill-primary-opacity-0_2--first { fill: rgba(79, 210, 194, 0.2) !important; } .g-fill-primary-opacity-0_3--first { fill: rgba(79, 210, 194, 0.3) !important; } .g-fill-primary-opacity-0_4--first { fill: rgba(79, 210, 194, 0.4) !important; } .g-fill-primary-opacity-0_6--first { fill: rgba(79, 210, 194, 0.6) !important; } .g-fill-primary-opacity-0_8--first { fill: rgba(79, 210, 194, 0.8) !important; } .g-fill-primary-opacity-0_9--first { fill: rgba(79, 210, 194, 0.9) !important; } .g-fill-primary--second { fill: #4fd2c2 !important; } .g-fill-primary-opacity-0_1--second { fill: rgba(79, 210, 194, 0.1) !important; } .g-fill-primary-opacity-0_2--second { fill: rgba(79, 210, 194, 0.2) !important; } .g-fill-primary-opacity-0_3--second { fill: rgba(79, 210, 194, 0.3) !important; } .g-fill-primary-opacity-0_4--second { fill: rgba(79, 210, 194, 0.4) !important; } .g-fill-primary-opacity-0_6--second { fill: rgba(79, 210, 194, 0.6) !important; } .g-fill-primary-opacity-0_8--second { fill: rgba(79, 210, 194, 0.8) !important; } .g-fill-primary-opacity-0_9--second { fill: rgba(79, 210, 194, 0.9) !important; } .g-fill-primary--first .fill-first { fill: #4fd2c2 !important; } .g-fill-primary-dark-v1--first { fill: #47d0bf !important; } .g-fill-primary-dark-v1--first .fill-first { fill: #47d0bf !important; } .g-fill-primary-dark-v2--first { fill: #45c2b3 !important; } .g-fill-primary-dark-v2--first .fill-first { fill: #45c2b3 !important; } .g-fill-primary-dark-v3--first { fill: #41b5a7 !important; } .g-fill-primary-dark-v3--first .fill-first { fill: #41b5a7 !important; } .g-fill-primary-opacity-0_1--first .fill-first { fill: rgba(79, 210, 194, 0.1) !important; } .g-fill-primary-opacity-0_2--first .fill-first { fill: rgba(79, 210, 194, 0.2) !important; } .g-fill-primary-opacity-0_3--first .fill-first { fill: rgba(79, 210, 194, 0.3) !important; } .g-fill-primary-opacity-0_4--first .fill-first { fill: rgba(79, 210, 194, 0.4) !important; } .g-fill-primary-opacity-0_6--first .fill-first { fill: rgba(79, 210, 194, 0.6) !important; } .g-fill-primary-opacity-0_8--first .fill-first { fill: rgba(79, 210, 194, 0.8) !important; } .g-fill-primary-opacity-0_9--first .fill-first { fill: rgba(79, 210, 194, 0.9) !important; } .g-fill-primary--second .fill-second { fill: #4fd2c2 !important; } .g-fill-primary-dark-v1--second { fill: #47d0bf !important; } .g-fill-primary-dark-v1--second .fill-second { fill: #47d0bf !important; } .g-fill-primary-dark-v2--second { fill: #45c2b3 !important; } .g-fill-primary-dark-v2--second .fill-second { fill: #45c2b3 !important; } .g-fill-primary-dark-v3--second .fill-second { fill: #41b5a7 !important; } .g-fill-primary-dark-v3--second { fill: #41b5a7 !important; } .g-fill-primary-opacity-0_1--second .fill-second { fill: rgba(79, 210, 194, 0.1) !important; } .g-fill-primary-opacity-0_2--second .fill-second { fill: rgba(79, 210, 194, 0.2) !important; } .g-fill-primary-opacity-0_3--second .fill-second { fill: rgba(79, 210, 194, 0.3) !important; } .g-fill-primary-opacity-0_4--second .fill-second { fill: rgba(79, 210, 194, 0.4) !important; } .g-fill-primary-opacity-0_6--second .fill-second { fill: rgba(79, 210, 194, 0.6) !important; } .g-fill-primary-opacity-0_8--second .fill-second { fill: rgba(79, 210, 194, 0.8) !important; } .g-fill-primary-opacity-0_9--second .fill-second { fill: rgba(79, 210, 194, 0.9) !important; } /*------------------------------------ Fill Colors Themes ------------------------------------*/ .g-fill-main--first { fill: #fff !important; } .g-fill-main--first .fill-first { fill: #fff !important; } .g-fill-main--second { fill: #fff !important; } .g-fill-main--second .fill-second { fill: #fff !important; } .g-fill-secondary--first { fill: #fafafa !important; } .g-fill-secondary--first .fill-first { fill: #fafafa !important; } .g-fill-secondary--second { fill: #fafafa !important; } .g-fill-secondary--second .fill-second { fill: #fafafa !important; } /*------------------------------------ Border Colors ------------------------------------*/ /* Basic Colors ------------------------------------*/ /* Primary Colors */ .g-brd-primary { border-color: #4fd2c2 !important; } .g-brd-primary--hover:hover { border-color: #4fd2c2 !important; } .g-brd-primary-top { border-top-color: #4fd2c2 !important; } .g-brd-primary-top[class*="g-brd-"] { border-top-color: #4fd2c2 !important; } .g-brd-primary-opacity-0_3 { border-color: rgba(79, 210, 194, 0.3) !important; } .g-brd-primary-opacity-0_3--hover:hover { border-color: rgba(79, 210, 194, 0.3) !important; } .g-brd-primary-opacity-0_3-top { border-top-color: rgba(79, 210, 194, 0.3) !important; } .g-brd-primary-opacity-0_3-top[class*="g-brd-"] { border-top-color: rgba(79, 210, 194, 0.3) !important; } .g-brd-primary-dark-dark-v1 { border-color: #47d0bf !important; } .g-brd-primary-dark-dark-v1--hover:hover { border-color: #47d0bf !important; } .g-brd-primary-dark-dark-v1-top { border-top-color: #47d0bf !important; } .g-brd-primary-dark-dark-v1-top[class*="g-brd-"] { border-top-color: #47d0bf !important; } .g-brd-primary-dark-dark-v2 { border-color: #45c2b3 !important; } .g-brd-primary-dark-dark-v2--hover:hover { border-color: #45c2b3 !important; } .g-brd-primary-dark-dark-v2-top { border-top-color: #45c2b3 !important; } .g-brd-primary-dark-dark-v2-top[class*="g-brd-"] { border-top-color: #45c2b3 !important; } .g-brd-primary-dark-dark-v3 { border-color: #41b5a7 !important; } .g-brd-primary-dark-dark-v3--hover:hover { border-color: #41b5a7 !important; } .g-brd-primary-dark-dark-v3-top { border-top-color: #41b5a7 !important; } .g-brd-primary-dark-dark-v3-top[class*="g-brd-"] { border-top-color: #41b5a7 !important; } .g-brd-primary-dark-v1 { border-color: #47d0bf !important; } .g-brd-primary-dark-v1--hover:hover { border-color: #47d0bf !important; } .g-brd-primary-dark-v1-top { border-top-color: #47d0bf !important; } .g-brd-primary-dark-v1-top[class*="g-brd-"] { border-top-color: #47d0bf !important; } .g-brd-primary-dark-v2 { border-color: #45c2b3 !important; } .g-brd-primary-dark-v2--hover:hover { border-color: #45c2b3 !important; } .g-brd-primary-dark-v2-top { border-top-color: #45c2b3 !important; } .g-brd-primary-dark-v2-top[class*="g-brd-"] { border-top-color: #45c2b3 !important; } .g-brd-primary-dark-v3 { border-color: #41b5a7 !important; } .g-brd-primary-dark-v3--hover:hover { border-color: #41b5a7 !important; } .g-brd-primary-dark-v3-top { border-top-color: #41b5a7 !important; } .g-brd-primary-dark-v3-top[class*="g-brd-"] { border-top-color: #41b5a7 !important; } /* Main Colors */ .g-brd-main { border-color: #999 !important; } .g-brd-main--hover:hover { border-color: #999 !important; } .g-brd-main-top { border-top-color: #999 !important; } .g-brd-main-top[class*="g-brd-"] { border-top-color: #999 !important; } .g-brd-bottom-primary--hover:hover { border-bottom-color: #4fd2c2 !important; } /*------------------------------------ Border Gradient Colors ------------------------------------*/ /* Cyan Gradient */ .g-brd-cyan-gradient-opacity-v1 { -o-border-image: linear-gradient(160deg, rgba(0, 0, 153, 0.55) 0%, rgba(0, 190, 214, 0.6) 100%); border-image: linear-gradient(160deg, rgba(0, 0, 153, 0.55) 0%, rgba(0, 190, 214, 0.6) 100%); border-image-slice: 1; } /* ------------------------------------ ------------ Button Primary ----------- -------------------------------------*/ .u-btn-primary { color: #fff; background-color: #4fd2c2; } .u-btn-primary:hover, .u-btn-primary.active { border-color: #78dcd0; background-color: #78dcd0; } .u-btn-primary:hover, .u-btn-primary:focus, .u-btn-primary.active { color: #fff; } /* Button color for palette */ .g-btn-primary { color: #fff; background-color: #4fd2c2; } .g-btn-primary:hover, .g-btn-primary.active { border-color: #78dcd0; background-color: #78dcd0; } .g-btn-primary.landing-ui-active { background-color: #4fd2c2 !important; } /* Button for Type default */ .g-btn-primary.g-btn-type-solid { color: #fff; background-color: #4fd2c2; } .g-btn-primary.g-btn-type-solid:hover, .g-btn-primary.g-btn-type-solid.active { border-color: #78dcd0; background-color: #78dcd0; } .g-btn-primary.g-btn-type-solid.landing-ui-active { background-color: #4fd2c2 !important; } /* Button for Type inset */ .g-btn-primary.u-btn-inset { color: #fff; background-color: #4fd2c2; } .g-btn-primary.u-btn-inset:hover, .g-btn-primary.u-btn-inset.active { border-color: #78dcd0; background-color: #78dcd0; } .g-btn-primary.u-btn-inset.landing-ui-active { background-color: #4fd2c2 !important; } /* ------------------------------------ -------- Outline Button Primary ------- -------------------------------------*/ .u-btn-outline-primary { color: #4fd2c2; border-color: #4fd2c2; background-color: transparent; } .u-btn-outline-primary:focus, .u-btn-outline-primary.active, .u-btn-outline-primary:hover { color: #fff; background-color: #4fd2c2; } /* Button for Type default outline */ .g-btn-primary.g-btn-type-outline { color: #4fd2c2; border-color: #4fd2c2; background-color: transparent; } .g-btn-primary.g-btn-type-outline:focus, .g-btn-primary.g-btn-type-outline.active, .g-btn-primary.g-btn-type-outline:hover { color: #fff; background-color: #4fd2c2; } /* Button for Type inset outline */ .g-btn-primary.g-btn-type-outline-double { color: #4fd2c2; border-color: #4fd2c2; background-color: transparent; } .g-btn-primary.g-btn-type-outline-double:focus, .g-btn-primary.g-btn-type-outline-double.active, .g-btn-primary.g-btn-type-outline-double:hover { color: #fff; background-color: #4fd2c2; } /* ---------------------------------------- -- Double border for Type outline double -- -----------------------------------------*/ .g-color-primary.g-btn-type-outline-double:hover:before { border: solid 1px #4fd2c2; } .g-color-primary-opacity-0_3.g-btn-type-outline-double:hover:before { border: solid 1px rgba(79, 210, 194, 0.3); } .g-color-primary-opacity-0_4.g-btn-type-outline-double:hover:before { border: solid 1px rgba(79, 210, 194, 0.4); } .g-color-primary-opacity-0_8.g-btn-type-outline-double:hover:before { border: solid 1px rgba(79, 210, 194, 0.8); } .g-color-main.g-btn-type-outline-double:hover:before { border: solid 1px #999; } /*------------------------------------ Colors ------------------------------------*/ /* Basic Colors ------------------------------------*/ /* Main Colors */ .g-color-main { color: #999 !important; } .g-color-main--hover:active, .g-color-main--hover:focus, .g-color-main--hover.active { color: #999 !important; } .g-color-main--hover:hover { color: #999 !important; } .g-color-main--hover:hover * { color: #999 !important; } .g-color-main *, .g-color-main p { color: #999; } /* Primary Colors */ .g-color-primary { color: #4fd2c2 !important; } .g-color-primary--hover:active, .g-color-primary--hover:focus, .g-color-primary--hover.active { color: #4fd2c2 !important; } .g-color-primary--hover:hover { color: #4fd2c2 !important; } .g-color-primary--hover:hover * { color: #4fd2c2 !important; } .u-block-hover:hover .g-color-primary--hover, .g-color-primary--hover:hover { color: #4fd2c2 !important; } .g-parent:hover .g-color-primary--parent-hover { color: #4fd2c2 !important; } .g-color-primary *, .g-color-primary p { color: #4fd2c2; } .g-color-primary-opacity-0_3 { color: rgba(79, 210, 194, 0.3) !important; } .g-color-primary-opacity-0_3 * { color: rgba(79, 210, 194, 0.3); } .g-color-primary-opacity-0_3 p { color: rgba(79, 210, 194, 0.3); } .g-color-primary-opacity-0_3--hover:active, .g-color-primary-opacity-0_3--hover:focus, .g-color-primary-opacity-0_3--hover.active { color: rgba(79, 210, 194, 0.3) !important; } .g-color-primary-opacity-0_3--hover:hover { color: rgba(79, 210, 194, 0.3) !important; } .g-color-primary-opacity-0_3--hover:hover * { color: rgba(79, 210, 194, 0.3) !important; } .g-color-primary-opacity-0_4 { color: rgba(79, 210, 194, 0.4) !important; } .g-color-primary-opacity-0_4 * { color: rgba(79, 210, 194, 0.4); } .g-color-primary-opacity-0_4 p { color: rgba(79, 210, 194, 0.4); } .g-color-primary-opacity-0_4--hover:active, .g-color-primary-opacity-0_4--hover:focus, .g-color-primary-opacity-0_4--hover.active { color: rgba(79, 210, 194, 0.4) !important; } .g-color-primary-opacity-0_4--hover:hover { color: rgba(79, 210, 194, 0.4) !important; } .g-color-primary-opacity-0_4--hover:hover * { color: rgba(79, 210, 194, 0.4) !important; } .g-color-primary-opacity-0_8 { color: rgba(79, 210, 194, 0.8) !important; } .g-color-primary-opacity-0_8 * { color: rgba(79, 210, 194, 0.8); } .g-color-primary-opacity-0_8 p { color: rgba(79, 210, 194, 0.8); } .g-color-primary-opacity-0_8--hover:active, .g-color-primary-opacity-0_8--hover:focus, .g-color-primary-opacity-0_8--hover.active { color: rgba(79, 210, 194, 0.8) !important; } .g-color-primary-opacity-0_8--hover:hover { color: rgba(79, 210, 194, 0.8) !important; } .g-color-primary-opacity-0_8--hover:hover * { color: rgba(79, 210, 194, 0.8) !important; } .g-color-primary--active.active { color: #4fd2c2 !important; } .active .g-color-primary--parent-active { color: #4fd2c2 !important; } .g-color-primary--before::before, .g-color-primary--after::after { color: #4fd2c2; } /* Secondary Colors */ .g-color-secondary { color: #e74b3c !important; } .u-block-hover:hover .g-color-secondary--hover, .g-color-secondary--hover:active, .g-color-secondary--hover:focus, .g-color-secondary--hover.active { color: #e74b3c !important; } .g-color-secondary--hover:hover { color: #e74b3c !important; } .g-color-secondary--hover:hover * { color: #e74b3c !important; } .g-parent:hover .g-color-secondary--parent-hover { color: #e74b3c !important; } a:hover, a:active, a:focus { color: #4fd2c2; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: #111; } /* Hamburger */ /* Background */ .g-bg-primary-dark-v2 { background-color: #45c2b3 !important; }