/*!
*
* DO NOT OVERRIDE THIS FILE.
* Generated with "npm run build"
*
* ## Project Name : Uix Kit
* ## Project Description : A free web kits for fast web design and development, compatible with Bootstrap v4.
* ## Project URL : https://uiux.cc
* ## Version : 4.3.3
* ## Based on : Uix Kit (https://github.com/xizon/uix-kit)
* ## Last Update : August 8, 2020
* ## Created by : UIUX Lab (https://uiux.cc) (uiuxlab@gmail.com)
* ## Released under the MIT license.
*
*/
/**
TABLE OF CONTENTS
---------------------------
1.Basic
2.Brand
3.Bullet List
4.Entry
5.Footer
6.Header Area
7.Helper Classes
8.Basic Layout Styles
9.Loader
10.Mobile Menu
11.Navigation
12.Navs
13.Onepage Menu
14.Pagination
15.Sidebar
16.Social Media Icons
17.Spacing
18.Tags
19.Typography
20.Video
21.Custom Core Scripts & Stylesheets
22.Accordion Background Images
23.Accordion
24.Advanced Slider (Basic)
25.Advanced Slider (Special Effects)
26.Ajax Page Loader (Loading A Page via Ajax Into Div)
27.Back to Top
28.Circle Layout
29.Counter
30.Dropdown Menu
31.Dropdown Menu 2 (Multi-level drop-down navigation)
32.Flexslider
33.Floating Side Element
34.Form Progress
35.Form
36.Form ( Layout )-
37.Form ( Material Design Theme )
38.Form ( 3rd Party Plugin )
39.Gallery
40.Hybrid Content Slider
41.Image Shapes
42.Infinite Scrolling Element
43.Lava-Lamp Style Menu
44.Cutom Light Box
45.Bulleted List
46.List of Posts
47.List of Split Posts
48.Full Width Column to Edge
49.Login Templates
50.Modal Dialog
51.Multiple Items Carousel
52.Parallax
53.Periodical Scroll
54.Pricing
55.Progress Bar
56.Progress Line
57.Show More Less
58.Sticky Elements
59.SVG Map
60.3D Background
61.3D Carousel
62.3D Shatter Slider
63.3D Explosive Particle Slider
64.3D Liquid Scrollspy Slider
65.Table
66.Tabs
67.Team Focus
68.Text effect
69.Timeline
70.Vertical Menu
71.WordPress Core ( Do not use prefix "uix-" )
72.3rd Party Plugins
73.Badges
74.Blended Grid Layout
75.Breadcrumbs
76.Button
77.Cards
78.Badges
79.Coach Mark
80.Content Placeholder Animated
81.Dividing Line
82.Dotted Line
83.Equal-width Columns
84.Features
85.Footer Templates
86.Gallery Grid Layout
87.Heading
88.Image Animation
89.Brands List
90.Maintain Aspect Ratio List
91.Side by Side List
92.Side by Side List With Photo
93.Mouse Animation Scroll
94.Overlay
95.Ribbon
96.Separator of Rule With Text
97.Shape Animation
98.Comments ( Synchronize to WordPress's class name )
99.Editing Component
100.Striking
101.Team Fullwidth (Style using the Side by Side List With Photo module)
102.Team Gird
103.Testimonials Carousel
104.ToolTip
105.Wave Background
*/
/******/
/******/
/* must be placed in the first place */
/******/
/******/
/* base */
/* ======================================================
/* ====================================================== */
::placeholder {
color: #E6E6E8;
}
::selection,
::-moz-selection,
::-webkit-selection {
background: #1f1f1f;
color: #fff;
}
html,
body {
width: 100%;
height: 100%;
background-color: #ffffff;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 16px;
/* Required, global font size */
}
*,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
a {
margin: 0;
padding: 0;
}
body {
font-size: 1rem;
font-weight: 400;
line-height: 1.71428571429;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica Neue", Helvetica, "Microsoft YaHei", STXihei, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
color: #212121;
background-color:#ffffff;;
}
body.is-mobile {
padding-top: 0;
}
p,
pre,
table,
blockquote {
margin-bottom: 1.421875rem;
}
select {
max-width: 100%;
}
.wp-block-quote,
blockquote {
background: #fff;
border: 1px solid #F8F8F8 !important;
border-left: 5px solid #CE3A3E !important;
padding: 0 1.75rem 1.25rem !important;
margin-top: 1.421875rem !important;
line-height: 2;
font-size: 1rem;
}
.wp-block-quote::before,
blockquote::before {
color: #CE3A3E;
content: open-quote;
font-size: 5.25rem;
line-height: 0.1;
margin-right: 0.21875rem;
vertical-align: -2.055rem;
font-family: sans-serif;
content: "\201C";
/*Unicode for Left Double Quote*/
}
strong {
font-weight: 600;
color:white;
}
hr {
margin: 1.421875rem 0;
border-color: #DCDCDC;
}
hr.black {
border-color: rgba(255, 255, 255, 0.1);
}
a img {
border: none;
}
img {
max-width: 100%;
}
iframe {
border: none !important;
}
code {
color: #c7254e;
background-color: #f9f2f4;
border-radius: 3px;
display: inline-block;
margin: 0 .2rem .2rem .2rem;
padding: .1rem .4rem;
white-space: nowrap;
font-family: "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
pre {
background: #fff;
white-space: pre;
word-wrap: break-word;
overflow: auto;
padding: 0;
margin: 1rem 0;
}
pre.uix-precode {
white-space: normal;
border: 1px solid #d9d9d9;
border-radius: 2px;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
pre.uix-precode label {
font-family: sans-serif;
font-weight: normal;
font-size: 0.8125rem;
position: absolute;
left: -5px;
top: 1rem;
text-align: center;
width: 60px;
user-select: none;
pointer-events: none;
color: #ddd;
}
pre.uix-precode code {
font-family: "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
display: block;
margin: 0 0 0 3rem;
padding: 1rem;
border-left: 1px solid #d9d9d9;
overflow-x: auto;
font-size: 0.8125rem;
line-height: 1.125rem;
color: #444;
background: #fff;
white-space: pre;
}
pre.uix-precode.uix-precode--nolebel label {
display: none;
}
pre.uix-precode.uix-precode--nolebel code {
margin: 0;
border: none;
}
figure {
position: relative;
}
figure figcaption {
position: absolute;
bottom: 0;
width: 100%;
max-height: 100%;
overflow: auto;
padding: 1.5rem 1rem 1rem;
color: #fff;
text-align: center;
font-size: 0.875rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent);
}
/* ======================================================
/* ====================================================== */
.uix-brand {
float: left;
font-size: 1.3125rem;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
max-width: 95%;
overflow: hidden;
text-overflow: ellipsis;
}
.uix-brand img {
max-height: 50px;
margin-top: 0.75rem;
}
.uix-brand .uix-brand__description {
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
width: 90%;
line-height: 1.2;
font-weight: 100;
font-size: 0.75rem;
}
.uix-brand--mobile {
display: none;
}
@media all and (max-width: 768px) {
.uix-brand--mobile {
display: block;
text-align: center;
}
.uix-brand--mobile img {
max-width: 90%;
max-height: 100px;
margin: 20px auto;
}
.uix-brand img {
margin-bottom: 0.75rem;
}
}
/* ======================================================
/* ====================================================== */
/*
* 1. Normal List Styling
* 2. Normal Numbers Ordered List
* 3. Custom Circle Icons Ordered List
* 4. Big Numbers Ordered List
* 5. Step Timeline By Numbers
*/
ul,
ol {
list-style: none;
margin-bottom: 1.421875rem;
}
ul > li,
ol > li {
margin-bottom: 0;
transition: all 0.3s ease;
}
.uix-list::after {
content: '';
clear: both;
display: block;
}
/*
---------------------------
1. Normal List Styling
---------------------------
*/
ol.uix-list--normal,
ul.uix-list--normal,
.uix-list--normal ul,
.uix-list--normal ol {
display: block;
margin: 1.421875rem;
padding-left: 0.875rem;
}
ol.uix-list--normal ul,
ol.uix-list--normal ol,
ul.uix-list--normal ul,
ul.uix-list--normal ol,
.uix-list--normal ul ul,
.uix-list--normal ul ol,
.uix-list--normal ol ul,
.uix-list--normal ol ol {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
ul.uix-list--normal,
.uix-list--normal ul {
list-style-type: disc;
}
ol.uix-list--normal,
.uix-list--normal ol {
list-style-type: decimal;
}
/*-- Noemal List Effect by Default --*/
/* Compatible with Uix Shortcodes (WordPress Plugin) and Block Button Link */
.uix-list--normal a:not(.uix-sc-btn):not(.wp-block-button__link):not(.uix-btn) {
color: #CE3A3E;
}
.uix-list--normal a:not(.uix-sc-btn):not(.wp-block-button__link):not(.uix-btn):hover {
color: #DE510E;
text-decoration: underline;
}
.uix-list--normal a:not(.uix-sc-btn):not(.wp-block-button__link):not(.uix-btn):hover img {
text-decoration: none;
}
/*
---------------------------
2. Normal Numbers Ordered List
---------------------------
*/
ol.uix-list--numbered,
.uix-list--numbered ol {
list-style: none;
margin-left: 1rem;
counter-reset: line;
}
ol.uix-list--numbered > li,
.uix-list--numbered ol > li {
position: relative;
margin-bottom: .5rem;
margin-left: .5rem;
}
ol.uix-list--numbered > li::before,
.uix-list--numbered ol > li::before {
position: absolute;
left: -2.25em;
display: inline-block;
width: 22px;
height: 22px;
margin-right: 0.5em;
background-color: #CE3A3E;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 22px;
counter-increment: line;
content: "0" counter(line);
font-size: 0.75rem;
}
.uix-list--numbered.uix-list--numbered-1-digit > li::before {
content: counter(line);
}
/*
---------------------------
3. Custom Circle Icons Ordered List
---------------------------
*/
ol.uix-list--circle,
ul.uix-list--circle,
.uix-list--circle ol,
.uix-list--circle ul {
list-style: none;
margin-left: 1rem;
counter-reset: line;
}
ol.uix-list--circle > li,
ul.uix-list--circle > li,
.uix-list--circle ol > li,
.uix-list--circle ul > li {
position: relative;
margin-bottom: .5rem;
color: #212121;
margin-left: 1rem;
}
ol.uix-list--circle > li::before,
ul.uix-list--circle > li::before,
.uix-list--circle ol > li::before,
.uix-list--circle ul > li::before {
position: absolute;
left: -1.5em;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 10px;
height: 10px;
background-color: #CE3A3E;
color: #fff;
border-radius: 50%;
text-align: center;
counter-increment: line;
content: '';
}
/*
---------------------------
4. Big Numbers Ordered List
---------------------------
*/
ol.uix-list--numbered-large,
.uix-list--numbered-large ol {
counter-reset: item;
/*removes original number*/
list-style-type: none;
/*remove if full width*/
text-align: justify;
}
ol.uix-list--numbered-large li,
.uix-list--numbered-large ol li {
display: block;
padding-left: 2.5rem;
position: relative;
min-height: 3.5rem;
/*generic alignment*/
text-indent: 0;
list-style-position: outside;
margin-left: 1.2rem;
list-style-type: number;
}
ol.uix-list--numbered-large li::before,
.uix-list--numbered-large ol li::before {
content: "0" counter(item) ".";
counter-increment: item;
position: absolute;
margin-left: -3.5rem;
font-size: 3rem;
color: #AEAEAE;
line-height: 1;
}
.uix-list--numbered-large.uix-list--numbered-1-digit li::before {
content: counter(item) ".";
}
ol.uix-list--numbered-large.uix-list--numbered-bg li,
.uix-list--numbered-large.uix-list--numbered-bg ol li {
background: #e4e1e1;
min-height: 70px;
border-radius: 50px;
margin-bottom: 1rem;
margin-left: 0;
padding-left: 4.5rem;
}
ol.uix-list--numbered-large.uix-list--numbered-bg li p,
.uix-list--numbered-large.uix-list--numbered-bg ol li p {
padding-top: 1.5rem;
padding-right: 2rem;
line-height: 1.3;
}
ol.uix-list--numbered-large.uix-list--numbered-bg li::before,
.uix-list--numbered-large.uix-list--numbered-bg ol li::before {
background: #CE3A3E;
border-radius: 50%;
width: 50px;
height: 50px;
line-height: 50px;
content: "0" counter(item);
font-size: 1.5rem;
color: #fff;
text-align: center;
top: 50%;
transform: translateY(-50%);
margin-left: -4rem;
}
.uix-list--numbered-large.uix-list--numbered-bg.uix-list--numbered-1-digit li::before {
content: counter(item);
}
/*
---------------------------
5. Step Timeline By Numbers
---------------------------
*/
.uix-list--numbered-step {
counter-reset: step;
list-style-type: none;
margin-left: 1rem;
}
.uix-list--numbered-step li {
position: relative;
padding: 0 0 1.5rem 3.75rem;
min-height: 75px;
border-left: 2px solid #333;
}
.uix-list--numbered-step li::before {
counter-increment: step;
content: counters(step, ".") " ";
position: absolute;
left: -26px;
top: 0;
height: 50px;
width: 50px;
font-size: 1rem;
font-weight: 700;
line-height: 48px;
text-align: center;
color: #fff;
background-color: #CE3A3E;
border: 2px solid #333;
border-radius: 50%;
z-index: 2;
}
.uix-list--numbered-step li:last-child {
border-left: none;
}
.uix-list--numbered-step li:last-child::before {
content: '\2713';
}
@media all and (max-width: 768px) {
.uix-list--numbered-step li {
padding-left: 2.5rem;
}
}
/* ======================================================
/* ====================================================== */
/*
* 1. Spacing
* 2. Share
* 3. Title
* 4. Main Content
* 5. Meta Info
*/
/*
---------------------------
1. Spacing
---------------------------
*/
.uix-entry__box {
padding: 2.84375rem 0 1.75rem;
/*-- WordPress Style --*/
}
.uix-entry__box.uix-entry__box--top {
padding: 2.84375rem 0 0;
}
.uix-entry__box.uix-entry__box--mark a {
color: #CE3A3E;
}
.uix-entry__box.uix-entry__box--mark a:hover {
color: #DE510E;
}
.uix-entry__box .post-navigation {
width: 100%;
}
.uix-entry__box .nav-previous,
.uix-entry__box .nav-next {
display: inline-block;
width: 50%;
}
/*
---------------------------
2. Share
---------------------------
*/
.uix-entry__box__share .uix-btn {
margin: 0 .5rem 1rem;
}
/*
---------------------------
3. Title
---------------------------
*/
.uix-entry__box__title {
padding-bottom: 1.75rem;
}
@media all and (max-width: 768px) {
.uix-entry__box__title {
padding-bottom: 0.4375rem;
}
}
/*
---------------------------
4. Main Content
---------------------------
*/
.uix-entry__content {
word-wrap: break-word;
/* Align wide and full classes */
/* (Using WordPress default class name ) */
}
.uix-entry__content pre:not(.uix-precode) {
background: #fff;
border: 1px solid #d9d9d9;
border-left: 5px solid #CE3A3E;
padding: .3em .7em;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.uix-entry__content img {
height: auto !important;
}
.uix-entry__content iframe {
max-width: 100% !important;
}
.uix-entry__content img.alignfull,
.uix-entry__content img.alignwide,
.uix-entry__content .alignfull img,
.uix-entry__content .alignwide img {
margin-left: calc( -100vw / 2 + 100% / 2);
margin-right: calc( -100vw / 2 + 100% / 2);
max-width: 100vw;
width: 100vw !important;
}
@media only screen and (min-width: 950px) {
.uix-entry__content img.alignwide,
.uix-entry__content .alignwide img {
max-width: inherit;
}
}
/*
---------------------------
5. Meta Info
---------------------------
*/
ul.uix-entry__meta {
width: 500px;
display: block;
color: #999;
font-style: italic;
font-size: 0.75rem;
line-height: 1.33333333333;
}
ul.uix-entry__meta li {
display: inline-block;
/*require*/
margin-bottom: 0.62890625rem;
}
ul.uix-entry__meta li::before {
content: '/';
display: inline-block;
margin-right: 0.4375rem;
}
ul.uix-entry__meta li a {
color: #999;
}
ul.uix-entry__meta.uix-entry__meta--centered {
margin: 0 auto;
}
ul.uix-entry__meta.uix-entry__meta--wrap li {
display: block;
}
ul.uix-entry__meta.uix-entry__meta--wrap li::before {
display: none;
}
ul.uix-entry__meta.uix-entry__meta--wrap li strong {
padding-right: 0.4375rem;
font-size: 0.875rem;
color: #C9C9C9;
display: inline-block;
width: 130px;
vertical-align: top;
}
ul.uix-entry__meta.uix-entry__meta--wrap li span {
display: inline-block;
width: calc( 100% - 130px - 0.875rem);
}
ul.uix-entry__meta.uix-entry__meta--wrap li a {
color: #CE3A3E;
}
ul.uix-entry__meta.uix-entry__meta--wrap li a:hover {
color: #DE510E;
}
ul.uix-entry__meta:not(.uix-entry__meta--wrap) li:first-child::before {
display: none;
}
/* ======================================================
/* ====================================================== */
.uix-footer__container {
font-size: 0.75rem;
padding: 3rem 0;
}
/* ul li ul li -> all on one line */
.uix-footer__menu,
.uix-footer__menu ul,
.uix-footer__menu li {
display: inline;
position: relative;
}
.uix-footer__menu li a {
padding: 0 0.4375rem;
border-right: 1px solid #E1E1E1;
}
.uix-footer__menu li:last-child a {
border: none;
}
@media all and (max-width: 768px) {
.uix-footer__container .uix-f-l,
.uix-footer__container .uix-f-r {
float: none !important;
}
}
/* ======================================================
/* ====================================================== */
/*
* 1. Default
* 2. Theme - White
*/
/*
---------------------------
1. Default
---------------------------
*/
/* Don't use "margin" or "padding" to set up ".uix-header__container" */
.uix-header__container {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 90000;
border-bottom: 2.15px solid hsla(0,0%,100%,.2);
box-shadow: 0 5px 40px 0 rgba(0,0,0,.08);
background-color: #9c272a;
background-image: linear-gradient(90deg,#771a1c 0,#ac2125 20%,#b9272b);
/*
---------------------------
2. Overlay Header
---------------------------
*/
}
.uix-header__container.uix-header__container--overlay {
background: rgba(255, 255, 255, 0.15);
background: linear-gradient(to right, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%);
}
.uix-header__container.uix-header__container--overlay.is-fixed {
background-color: #CE3A3E;
background-image: linear-gradient(to right, #CE3A3E 0%, #C04645 20%, #DE510E 100%);
}
/* Show Toolbar when viewing site with WordPress */
.admin-bar .uix-header__container {
top: 32px;
}
/* Admin bar becomes taller on smaller devices with WordPress */
@media all and (max-width: 782px) {
.admin-bar .uix-header__container {
top: 0;
}
}
/* Don't use "margin" or "padding" to set up ".uix-header" */
.uix-header {
/* Floating layer protection for IE */
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.uix-header .uix-menu__right-box {
float: right;
}
/* Header Placeholder, to prevent floating elements from affecting layout */
.uix-header__placeholder {
height: 75px;
background: none;
display: block;
visibility: hidden;
width: 100%;
}
@media all and (max-width: 768px) {
.uix-header__container {
position: relative;
}
.uix-header__container.uix-header__container--overlay {
background-color: #CE3A3E;
background-image: linear-gradient(to right, #CE3A3E 0%, #C04645 20%, #DE510E 100%);
position: relative;
}
/* Header Placeholder, to prevent floating elements from affecting layout */
.uix-header__placeholder {
height: 0;
}
}
/* ======================================================
/* ====================================================== */
/*
* 1. Content Block
* 2. Elements after a floating element will flow around it.
* 3. Shadow Effect
* 4. Smooth Transition Effect
* 5. Element Floating
* 6. Element Alignment
* 7. Truncate String with Ellipsis
* 8. Vertically or Horizontally Aligned Blocks
* 9. Specifies Whether To Clip Content
* 10. Specifies a Default Height
* 11. Hidden The Element on Mobile Device
* 12. Tip Bubble
* 13. Image Hover Overlay Effects
* 14. Position
* 15. Element Hidden Style
* 16. Border Radius
* 17. Align Wide and Full Classes For Elements
* 18. HTML Disclosure Summary element
*/
/*
---------------------------
1. Content Block
---------------------------
*/
.uix-relative {
position: relative;
}
.uix-relative--inline {
display: inline-block;
position: relative;
/* Prevent content overflow */
max-width: 100%;
/* Behave like most inline-block elements */
vertical-align: middle;
/*
* Force hardware acceleration without creating a new stacking context
* to fix 1px glitch when combined with overlays and transitions in Webkit
*/
-webkit-backface-visibility: hidden;
}
/* Clip child elements */
.uix-relative--inline-clip {
overflow: hidden;
}
/*
---------------------------
2. Elements after a floating element will flow around it.
Use the "uix-clearfix" hack to fix the problem
---------------------------
*/
.uix-clearfix::before {
display: table;
content: "";
line-height: 0;
}
.uix-clearfix::after {
display: table;
content: "";
line-height: 0;
clear: both;
}
/*
---------------------------
3. Shadow Effect
---------------------------
*/
.uix-outer-shadow--regular {
box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, rgba(50, 50, 93, 0.1) 0px 15px 35px 0px;
}
.uix-outer-shadow--thick {
box-shadow: rgba(0, 0, 0, 0.18) 0 19px 38px, rgba(0, 0, 0, 0.08) 0 15px 12px;
}
.uix-outer-shadow--light {
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
}
.uix-outer-shadow--highlight {
box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, rgba(206, 58, 62, 0.2) 0px 15px 35px 0px;
}
.uix-none-shadow {
box-shadow: none !important;
text-shadow: none !important;
}
/*
---------------------------
4. Smooth Transition Effect
---------------------------
*/
.uix-trans {
transition: all 0.3s ease;
}
.uix-trans img,
.uix-trans a,
.uix-trans i,
.uix-trans li,
.uix-trans span {
transition: all 0.3s ease;
}
/*
---------------------------
5. Element Floating
---------------------------
*/
.uix-f-l {
float: left;
}
.uix-f-r {
float: right;
}
/*
---------------------------
6. Element Alignment
---------------------------
*/
.uix-t-r {
text-align: right;
}
.uix-t-l {
text-align: left;
}
.uix-t-c {
text-align: center;
}
@media all and (max-width: 768px) {
.uix-mobile-tc {
text-align: center;
}
.uix-mobile-tl {
text-align: left;
}
.uix-mobile-tr {
text-align: right;
}
}
/*
---------------------------
7. Truncate String with Ellipsis
---------------------------
*/
.uix-t-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
}
/*
---------------------------
8. Vertically or Horizontally Aligned Blocks
---------------------------
*/
/*-- Using transform property --*/
.uix-v-align--absolute,
.uix-v-align--relative {
position: absolute;
z-index: 6;
width: 100%;
/* Vertical Center */
top: 50%;
transform: translateY(-50%);
/* Vertical Bottom */
/* Vertical Top */
}
.uix-v-align--absolute.uix-v-align--absolute--b,
.uix-v-align--relative.uix-v-align--absolute--b {
top: auto;
bottom: 0;
transform: translateY(0);
}
.uix-v-align--absolute.uix-v-align--absolute--t,
.uix-v-align--relative.uix-v-align--absolute--t {
top: 0;
transform: translateY(0);
}
.uix-v-align--relative {
position: relative;
}
@media all and (max-width: 768px) {
.uix-v-align--relative {
top: 0;
transform: none;
}
}
/*-- Using table --*/
.uix-v-align--table {
display: table;
width: 100%;
height: 100%;
/* Vertical Bottom */
/* Vertical Top */
}
.uix-v-align--table > div {
display: table-cell;
vertical-align: middle;
}
.uix-v-align--table.uix-v-align--table--b > div {
vertical-align: bottom;
}
.uix-v-align--table.uix-v-align--table--t > div {
vertical-align: top;
}
/*
---------------------------
9. Specifies Whether To Clip Content
---------------------------
*/
.uix-hidden-scrollbar-x {
overflow-x: hidden;
}
.uix-hidden-scrollbar {
overflow: hidden;
}
/*
---------------------------
10. Specifies a Default Height
---------------------------
*/
.uix-height--10 {
height: 10vh !important;
}
.uix-height--20 {
height: 20vh !important;
}
.uix-height--30 {
height: 30vh !important;
}
.uix-height--40 {
height: 40vh !important;
}
.uix-height--50 {
height: 50vh !important;
}
.uix-height--60 {
height: 60vh !important;
}
.uix-height--70 {
height: 70vh !important;
}
.uix-height--80 {
height: 80vh !important;
}
.uix-height--90 {
height: 90vh !important;
}
.uix-height--100 {
height: 100vh !important;
}
@media all and (max-width: 768px) {
.uix-height--100:not(.is-mobile-still),
.uix-height--90:not(.is-mobile-still),
.uix-height--80:not(.is-mobile-still),
.uix-height--70:not(.is-mobile-still),
.uix-height--60:not(.is-mobile-still),
.uix-height--50:not(.is-mobile-still),
.uix-height--40:not(.is-mobile-still),
.uix-height--30:not(.is-mobile-still),
.uix-height--20:not(.is-mobile-still),
.uix-height--10:not(.is-mobile-still) {
height: auto !important;
}
}
/*
---------------------------
11. Hidden The Element on Mobile Device
---------------------------
*/
.uix-mobile-el {
display: none;
}
@media all and (max-width: 768px) {
.uix-mobile-el {
display: block;
}
.is-mobile-hide {
display: none;
}
}
/*
---------------------------
12. Tip Bubble
---------------------------
*/
.uix-bubble {
font-weight: 100;
text-transform: uppercase;
font-weight: 700;
line-height: 1.2;
background: #CE3A3E;
border-radius: 10px;
padding: .1rem .3rem !important;
margin-left: .5rem;
font-size: 0.625rem;
vertical-align: middle;
color: #fff !important;
position: absolute;
right: 2.3rem;
top: .5rem;
transform: scale(0.7);
}
@media all and (max-width: 768px) {
.uix-bubble {
right: 1rem;
top: .7rem;
}
}
/*
---------------------------
13. Image Hover Overlay Effects
---------------------------
*/
img.uix-filter-hover--color,
.uix-filter-hover--color img {
transition: filter 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
will-change: filter;
}
img.uix-filter-hover--color:hover,
.uix-filter-hover--color img:hover {
filter: brightness(120%) hue-rotate(45deg);
}
/*
---------------------------
14. Position
---------------------------
*/
/*--- Directions --- */
[class*='uix-dir--top'],
[class*='uix-dir--bottom'],
[class*='uix-dir--left'],
[class*='uix-dir--right'],
[class*='uix-dir--center'] {
position: absolute !important;
}
/* Don't use `width: 100%` because it is wrong if the parent has padding. */
.uix-dir--top {
top: 0 !important;
bottom: auto !important;
left: 0 !important;
right: 0 !important;
}
.uix-dir--bottom {
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
.uix-dir--left {
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
}
.uix-dir--right {
top: 0 !important;
bottom: 0 !important;
left: auto !important;
right: 0 !important;
}
.uix-dir--top-left {
top: 0 !important;
bottom: auto !important;
left: 0 !important;
right: auto !important;
}
.uix-dir--top-right {
top: 0 !important;
bottom: auto !important;
left: auto !important;
right: 0 !important;
}
.uix-dir--bottom-left {
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
}
.uix-dir--bottom-right {
top: auto !important;
bottom: 0 !important;
left: auto !important;
right: 0 !important;
}
/*
---------------------------
15. Element Hidden Style
---------------------------
*/
.uix-el--transparent {
opacity: 0;
}
.uix-el--zoom {
transform: scale(0);
}
.uix-el--skew {
transform: skew(0deg, -2deg);
}
/*
---------------------------
16. Border Radius
---------------------------
*/
.uix-border--rounded {
border-radius: 4px;
}
.uix-border--rounded.uix-border--rounded-img > img {
border-radius: 4px;
}
.uix-border--rounded.uix-border--rounded-only-img {
border-radius: 0;
}
.uix-border--rounded.uix-border--rounded-only-img > img {
border-radius: 4px;
}
.uix-border--circle {
border-radius: 50%;
}
.uix-border--circle.uix-border--circle-img > img {
border-radius: 50%;
}
.uix-border--circle.uix-border--circle-only-img {
border-radius: 0;
}
.uix-border--circle.uix-border--circle-only-img > img {
border-radius: 50%;
}
/*
---------------------------
17. Align Wide and Full Classes For Elements
---------------------------
*/
img.uix-alignfull,
.uix-alignfull img {
margin-left: calc( -100vw / 2 + 100% / 2);
margin-right: calc( -100vw / 2 + 100% / 2);
max-width: 100vw;
width: 100vw !important;
height: auto;
}
/*
---------------------------
18. HTML Disclosure Summary element
---------------------------
*/
details.uix-details-reset:not([open]) > *:not(summary) {
display: none !important;
}
details.uix-details-reset > summary {
cursor: pointer;
list-style: none;
}
details.uix-details-reset > summary::before {
display: none;
}
details.uix-details-reset > summary::-webkit-details-marker {
display: none;
}
/* ======================================================
/* ====================================================== */
/*
* 1. Bootstrap 4.x - Do not use prefix "uix-"
* 2. Material Container
* 3. Main Wrapper
* 4. Uix Grid (Core Grid)
* 5. Align Wide and Full Classes For Elements
*/
/*
---------------------------
1. Bootstrap 4.x
---------------------------
*/
/* New XL container for Bootstrap 4.x */
.container {
width: auto;
max-width: 1140px;
}
@media all and (min-width: 1430px) {
.container {
max-width: 1278px;
}
}
/*
---------------------------
2. Material Container
---------------------------
*/
.uix-container__bg {
position: relative;
z-index: 2;
overflow: hidden;
}
.uix-container__bg .row {
margin-left: 0;
margin-right: 0;
}
.uix-container__bg.uix-container__bg--no-gutter {
padding-left: 0;
padding-right: 0;
}
.uix-container__bg.uix-container__bg--white {
background: #fff;
}
.uix-container__bg.uix-container__bg--shadow {
box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, rgba(50, 50, 93, 0.1) 0px 15px 35px 0px;
}
.uix-container__bg.uix-container__bg--rounded-large {
border-radius: 15px;
}
.uix-container__bg.uix-container__bg--rounded-medium {
border-radius: 7px;
}
.uix-container__bg.uix-container__bg--rounded-small {
border-radius: 2px;
}
.uix-container__bg.uix-container__bg--totop-large {
margin-top: -15rem;
}
.uix-container__bg.uix-container__bg--totop-medium {
margin-top: -10rem;
}
.uix-container__bg.uix-container__bg--totop-small {
margin-top: -5rem;
}
@media all and (max-width: 768px) {
.uix-container__bg.uix-container__bg--totop-large {
margin-top: -7rem;
}
.uix-container__bg.uix-container__bg--totop-medium {
margin-top: -4rem;
}
.uix-container__bg.uix-container__bg--totop-small {
margin-top: -2rem;
}
}
/*
---------------------------
3. Main Wrapper
---------------------------
*/
/* Note: Do not use the "transform" property, otherwise it may affect the internal elements */
.uix-wrapper {
min-height: 100%;
width: 100%;
overflow: hidden;
}
/* Show Toolbar when viewing site with WordPress */
.admin-bar .uix-wrapper {
margin-top: 32px;
}
/* Admin bar becomes taller on smaller devices with WordPress */
@media all and (max-width: 782px) {
.admin-bar .uix-wrapper {
margin-top: 46px;
}
}
/*
---------------------------
4. Uix Grid
---------------------------
*/
[class*='uix-core-grid__col-'] {
box-sizing: border-box;
float: left;
position: relative;
}
.uix-core-grid__inline {
float: none;
display: inline-block;
}
.uix-core-grid__col-1 {
width: 8.333333333333%;
}
.uix-core-grid__col-2 {
width: 16.66666666666667%;
}
.uix-core-grid__col-3 {
width: 25%;
}
.uix-core-grid__col-4 {
width: 33.333333333333%;
}
.uix-core-grid__col-5 {
width: 41.666666666667%;
}
.uix-core-grid__col-6 {
width: 50%;
}
.uix-core-grid__col-7 {
width: 58.333333333333%;
}
.uix-core-grid__col-8 {
width: 66.666666666667%;
}
.uix-core-grid__col-9 {
width: 75%;
}
.uix-core-grid__col-10 {
width: 83.333333333333%;
}
.uix-core-grid__col-11 {
width: 91.666666666667%;
}
.uix-core-grid__col-12 {
width: 100%;
}
@media all and (max-width: 768px) {
.uix-core-grid__mobile-half {
width: 50%;
}
.uix-core-grid__mobile-stack {
width: 100%;
}
}
.uix-core-grid {
width: 100%;
}
.uix-core-grid .uix-core-grid__row {
width: calc( 100% + 15px);
/* Auto width, for automatic widths such as 5 columns */
}
.uix-core-grid .uix-core-grid__row::after {
/* Or @extend .uix-clearfix */
content: "";
display: table;
clear: both;
}
.uix-core-grid .uix-core-grid__row [class*='uix-core-grid__col-'] > div {
word-wrap: break-word;
position: relative;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--no-gutter {
width: 100%;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--no-gutter [class*='uix-core-grid__col-'] {
padding-right: 0 !important;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--auto-width {
display: flex;
flex-wrap: wrap;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--auto-width .uix-core-grid__col {
flex: 1;
padding-right: 15px;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--auto-width.uix-core-grid__row--no-gutter .uix-core-grid__col {
padding-right: 0;
}
.uix-core-grid [class*='uix-core-grid__col-'] {
padding-right: 15px;
}
.uix-core-grid__row .uix-core-grid [class*='uix-core-grid__col-']:last-of-type {
padding-right: 0;
}
.uix-core-grid__row .uix-core-grid [class*='uix-core-grid__col-']:last-of-type [class*='uix-core-grid__col-'] > div {
width: calc(100% - 15px);
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--loop .uix-core-grid__col-6:nth-child(2n+1),
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--loop .uix-core-grid__col-4:nth-child(3n+1),
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--loop .uix-core-grid__col-3:nth-child(4n+1),
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--loop .uix-core-grid__col-2:nth-child(6n+1) {
clear: both;
}
@media all and (max-width: 991px) {
.uix-core-grid {
/* 2 columns */
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--col-2 .uix-core-grid__col-2,
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--col-2 .uix-core-grid__col-3,
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--col-2 .uix-core-grid__col-4 {
width: 50%;
float: left;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--col-2 .uix-core-grid__col-2:nth-child(2n+1),
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--col-2 .uix-core-grid__col-3:nth-child(2n+1),
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--col-2 .uix-core-grid__col-4:nth-child(2n+1) {
padding-right: 15px;
clear: both;
}
}
@media all and (max-width: 768px) {
.uix-core-grid .uix-core-grid__row {
/* Auto width, for automatic widths such as 5 columns */
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--auto-width {
display: block;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--auto-width.uix-core-grid__row--no-gutter .uix-core-grid__col {
padding-right: 15px;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--nobreaking {
/* Auto width, for automatic widths such as 5 columns */
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--nobreaking.uix-core-grid__row--auto-width {
display: flex;
}
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking) {
/* 2 columns */
}
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--no-gutter {
width: calc(100% + 15px);
}
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking) [class*='uix-core-grid__col-'] {
float: none;
width: calc(100% - 15px);
padding-left: 0;
padding-right: 0;
}
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2 .uix-core-grid__col-2,
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2 .uix-core-grid__col-3,
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2 .uix-core-grid__col-4 {
width: 50%;
float: left;
}
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2.uix-core-grid__row--no-gutter .uix-core-grid__col-2,
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2.uix-core-grid__row--no-gutter .uix-core-grid__col-3,
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2.uix-core-grid__row--no-gutter .uix-core-grid__col-4 {
width: calc(50% - 7.5px);
}
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2 .uix-core-grid__col-2:nth-child(2n+1),
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2 .uix-core-grid__col-3:nth-child(2n+1),
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2 .uix-core-grid__col-4:nth-child(2n+1) {
clear: both;
}
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2 .uix-core-grid__col-2:nth-child(2n+0),
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2 .uix-core-grid__col-3:nth-child(2n+0),
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--nobreaking).uix-core-grid__row--col-2 .uix-core-grid__col-4:nth-child(2n+0) {
padding-right: 15px;
}
}
/* ======================================================
/* ====================================================== */
.uix-loader-progress {
text-align: center;
font-size: 0.75rem;
transform: translate(10px, -10px);
}
.uix-loader-progress__line {
top: 0;
left: 0;
width: 0;
height: 4px;
position: fixed;
background-color: #fff;
-webkit-touch-callout: none;
user-select: none;
pointer-events: none;
z-index: 99999;
box-shadow: 0 1px 5px 0 rgba(255, 255, 255, 0.3);
}
.uix-loader,
.uix-loader-progress {
bottom: 0;
left: 0;
width: 65px;
height: 65px;
position: fixed;
background-color: transparent;
-webkit-touch-callout: none;
user-select: none;
pointer-events: none;
/* Likely future */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
.uix-loader svg,
.uix-loader-progress svg {
width: 65px;
height: 65px;
}
.uix-loader svg path,
.uix-loader-progress svg path {
fill: #CE3A3E;
}
.uix-loader span,
.uix-loader-progress span {
font-family: Arial, sans-serif;
position: fixed;
z-index: 100000;
bottom: 10px;
left: 10px;
}
.uix-loader .uix-loader__spinner,
.uix-loader-progress .uix-loader__spinner {
animation: uix-cssAnim--rotate .5s linear infinite;
}
.uix-loader .uix-loader__spinner path,
.uix-loader-progress .uix-loader__spinner path {
stroke-dasharray: 1,150;
/* 1%, 101% circumference */
stroke-dashoffset: 0;
stroke: #CE3A3E;
stroke-linecap: round;
animation: uix-cssAnim--dash 1.5s ease-in-out infinite;
}
@keyframes uix-cssAnim--rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes uix-cssAnim--dash {
0% {
stroke-dasharray: 1,150;
/* 1%, 101% circumference */
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90,150;
/* 70%, 101% circumference */
stroke-dashoffset: -35;
/* 25% circumference */
}
100% {
stroke-dasharray: 90,150;
/* 70%, 101% circumference */
stroke-dashoffset: -124;
/* -99% circumference */
}
}
/* ======================================================
/* ====================================================== */
/* Mobile Menu Toggle */
.uix-menu-mobile__toggle {
transition: all 0.3s ease;
position: absolute;
display: none;
width: 40px;
height: 40px;
top: 15px;
right: 20px;
z-index: 90002;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
border-radius: 100%;
transition: .1s ease-in-out;
}
.uix-menu-mobile__mask {
content: '';
left: 0;
top: 0;
position: fixed;
z-index: 90001;
display: block;
background: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
display: none;
}
.js-uix-menu-opened .uix-menu-mobile__mask {
background: rgba(0, 0, 0, 0.7);
display: block;
}
/* Show Toolbar when viewing site with WordPress */
.admin-bar .uix-menu-mobile__toggle {
top: 66px;
}
.admin-bar .uix-menu-mobile__toggle.is-fixed {
top: 20px;
}
/* Admin bar becomes taller on smaller devices with WordPress */
@media all and (max-width: 782px) {
.admin-bar .uix-menu-mobile__toggle.is-fixed {
top: 66px;
}
}
@media all and (max-width: 600px) {
.admin-bar .uix-menu-mobile__toggle.is-fixed {
top: 20px;
}
}
@media all and (max-width: 768px) {
.uix-menu-mobile__toggle {
display: block;
}
}
.uix-menu-mobile__toggle span {
display: block;
position: absolute;
top: 14px;
left: 12px;
width: 20px;
height: 2px;
background: #fff;
transition: all 0.3s ease;
}
.uix-menu-mobile__toggle span:nth-child(2) {
top: 19px;
}
.uix-menu-mobile__toggle span:nth-child(3) {
top: 24px;
}
.uix-menu-mobile__toggle.is-opened span {
left: 16px;
}
.uix-menu-mobile__toggle.is-opened span:first-child {
transform: rotate(45deg) translate(0, 7px);
}
.uix-menu-mobile__toggle.is-opened span:nth-child(2) {
opacity: 0;
}
.uix-menu-mobile__toggle.is-opened span:nth-child(3) {
transform: rotate(-45deg) translate(0, -7px);
}
/* Mobile Menu Container */
.uix-menu__container.is-mobile {
transition: all 0.3s ease;
left: -300px;
display: block;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
width: 260px;
overflow-x: hidden;
overflow-y: auto;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 15px;
background: #f8f8f8;
color: #212121;
box-shadow: 0px 0px 37px 0px rgba(0, 0, 0, 0.1);
/* Mega & Dropdown */
/* Form Elements */
}
.uix-menu__container.is-mobile > .uix-menu__inner {
padding: 0 0 15px;
}
.uix-menu__container.is-mobile > .uix-menu__inner > p {
margin-left: 15px;
margin-right: 15px;
}
.uix-menu__container.is-mobile > .uix-menu__inner > .uix-menu__right-box {
padding-left: .5rem;
/* Social button for white color */
}
.uix-menu__container.is-mobile > .uix-menu__inner > .uix-menu__right-box a {
display: inline-block;
font-size: 1rem;
margin-right: .3rem;
}
.uix-menu__container.is-mobile > .uix-menu__inner > .uix-menu__right-box .uix-social-btn--white {
border-color: #212121;
color: #212121;
}
.uix-menu__container.is-mobile > .uix-menu__inner > .uix-menu__right-box .uix-social-btn--white:hover i {
color: #212121;
}
.uix-menu__container.is-mobile > .uix-menu__inner > .uix-menu__right-box .uix-social-btn--white:hover::after {
background-color: #fff;
}
.uix-menu__container.is-mobile h1, .uix-menu__container.is-mobile h2, .uix-menu__container.is-mobile h3, .uix-menu__container.is-mobile h4, .uix-menu__container.is-mobile h5, .uix-menu__container.is-mobile h6 {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RmZGZkZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
background-size: 100%;
background-image: linear-gradient(#ffffff, #dfdfdf);
font-size: 11px;
font-weight: normal;
padding: 0 15px;
margin: 0 0 5px;
color: #212121;
line-height: 24px;
box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2);
}
.uix-menu__container.is-mobile p {
font-size: 13px;
margin: 0 0 12px;
}
.uix-menu__container.is-mobile p a {
color: rgba(51, 51, 51, 0.9);
}
.uix-menu__container.is-mobile > p {
margin-left: 15px;
margin-right: 15px;
}
.uix-menu__container.is-mobile ul {
display: block;
margin: 0 0 15px;
padding: 0;
border-top: 1px solid #dfdfdf;
border-bottom: none;
}
.uix-menu__container.is-mobile ul li {
display: block;
margin: 0;
line-height: 48px;
border-top: none;
border-bottom: 1px solid #dfdfdf;
position: relative;
}
.uix-menu__container.is-mobile ul li a,
.uix-menu__container.is-mobile ul li span {
padding: 0 15px;
display: block;
text-decoration: none;
color: #212121;
}
.uix-menu__container.is-mobile ul li a:hover {
color: #000;
}
.uix-menu__container.is-mobile ul li.is-opened > a,
.uix-menu__container.is-mobile ul li.is-opened > span {
box-shadow: 0 0 15px 3px #ebebeb inset;
}
.uix-menu__container.is-mobile ul li ul {
border-bottom: 0;
margin: 0;
}
.uix-menu__container.is-mobile ul li ul li {
line-height: 40px;
font-size: 13px;
}
.uix-menu__container.is-mobile ul li ul li:last-child {
border-bottom: 0;
}
.uix-menu__container.is-mobile ul li ul li a:hover {
color: #000;
}
.uix-menu__container.is-mobile ul li ul li.is-opened > a,
.uix-menu__container.is-mobile ul li ul li.is-opened > span {
box-shadow: 0 0 15px 3px #ebebeb inset;
}
.uix-menu__container.is-mobile ul li ul li a,
.uix-menu__container.is-mobile ul li ul li span {
color: rgba(51, 51, 51, 0.8);
}
.uix-menu__container.is-mobile li > .sub-menu {
margin-top: 0 !important;
overflow: hidden;
height: 0;
}
.uix-menu__container.is-mobile li > .sub-menu ul {
height: auto;
}
.uix-menu__container.is-mobile li.multi-column ul {
border: none;
}
.uix-menu__container.is-mobile li.multi-column > ul .multi-column-title {
font-weight: bold;
color: #ABABAB;
}
.uix-menu__container.is-mobile li:not(.multi-column) ul ul {
padding-left: 0.721875rem;
}
.uix-menu__container.is-mobile .uix-menu__arrow-mobile {
position: absolute;
top: 0;
right: 10px;
font-style: normal;
font-weight: 100;
font-family: serif;
color: #ABABAB;
}
.uix-menu__container.is-mobile .uix-menu__arrow-mobile::after {
content: '+';
display: inline-block;
font-size: 1rem;
}
.uix-menu__container.is-mobile .uix-menu__arrow-mobile.is-opened::after {
content: '-';
}
.uix-menu__container.is-mobile form {
margin: 0 15px;
}
.uix-menu__container.is-mobile label {
font-size: 13px;
}
.uix-menu__container.is-mobile input:not([type="checkbox"]):not([type="radio"]) {
width: 100%;
font-size: 13px;
padding: 5px;
box-sizing: border-box;
margin: 0 0 10px;
border-radius: 2px;
border: 0;
background: rgba(0, 0, 0, 0.1);
color: rgba(51, 51, 51, 0.6);
display: block;
clear: both;
}
.uix-menu__container.is-mobile textarea,
.uix-menu__container.is-mobile select {
width: 100%;
font-size: 13px;
padding: 5px;
box-sizing: border-box;
margin: 0 0 10px;
border-radius: 2px;
border: 0;
background: rgba(0, 0, 0, 0.1);
color: rgba(51, 51, 51, 0.6);
display: block;
clear: both;
}
.uix-menu__container.is-mobile input[type="checkbox"] {
width: auto;
display: inline;
clear: none;
}
.uix-menu__container.is-mobile input[type="button"], .uix-menu__container.is-mobile input[type="submit"] {
color: #f8f8f8;
background: #212121;
}
.uix-menu__container.is-mobile input[type="button"]:hover, .uix-menu__container.is-mobile input[type="submit"]:hover {
background: rgba(51, 51, 51, 0.9);
}
.js-uix-menu-opened .uix-menu__container.is-mobile {
left: 0;
}
/* ======================================================
/* ====================================================== */
/*
* 1. Primary Menu
* 2. Sub Menu (Using WordPress default class name )
* 3. Mega/Dropdown Menu
* 4. Dropdown Arrow
*/
.uix-menu__container:not(.is-mobile) {
float: right;
padding-top: 1.25rem;
/*
---------------------------
1. Primary Menu
---------------------------
*/
/*
---------------------------
3. Mega/Dropdown Menu
---------------------------
*/
/* Multi-column */
/*
---------------------------
4. Dropdown Arrow
---------------------------
*/
}
.uix-menu__container:not(.is-mobile).is-fixed {
padding-bottom: 0;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu {
font-size: 0.75rem;
line-height: 2.34375;
float: left;
margin: 0;
/* Required*/
font-size: 0;
/*Fighting the Space Between Inline Block Elements*/
/*
---------------------------
2. Sub Menu (Using WordPress default class name )
---------------------------
*/
}
.uix-menu__container:not(.is-mobile) ul.uix-menu li {
position: relative;
margin-bottom: 0;
padding: 0 1.159375rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu li a {
display: block;
padding-left: 0.625rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li {
display: inline-block;
margin-right: 1.6875rem;
padding-bottom: 1.421875rem;
white-space: nowrap;
/* Required*/
font-size: 0.75rem;
/*Fighting the Space Between Inline Block Elements*/
/* Sync to WordPress activation class name ".current-menu-item" */
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li .uix-bubble {
right: 1rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li.is-active, .uix-menu__container:not(.is-mobile) ul.uix-menu > li.current-menu-item {
box-shadow: 0 2.15px 0 white;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li > a {
text-transform: uppercase;
font-weight: 700;
color: #DEDEDE;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li > a:hover {
color: #fff;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li ul {
min-width: 220px;
display: none;
position: absolute;
padding-bottom: 0.525rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li ul li {
padding-left: 1.25rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li > ul {
padding-top: 2.625rem;
opacity: 0;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li > ul::before {
box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, rgba(50, 50, 93, 0.1) 0px 15px 35px 0px;
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
margin-top: 0.75rem;
border: 1.15px solid rgba(33, 33, 33, 0.1);
background: #fff;
border-radius: 8px;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu ul.sub-menu {
top: 100%;
left: 0;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu ul.sub-menu a {
word-wrap: break-word;
white-space: normal;
/* Required*/
line-height: 1.4;
padding: 0.35rem 0;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu ul.sub-menu a:hover {
color: #000;
background: #F1F1F1;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li:not(.multi-column) > ul {
left: 1.784375rem;
/* arrow of sub menu, not mega menu */
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li:not(.multi-column) > ul::after {
content: "";
display: block;
position: absolute;
top: 5px;
left: 15px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li:not(.multi-column) > ul ul {
top: 0;
left: 100%;
padding: 1.421875rem 0;
margin-left: -0.071875rem;
box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, rgba(50, 50, 93, 0.1) 0px 15px 35px 0px;
border: 1.15px solid rgba(33, 33, 33, 0.1);
background: #fff;
border-radius: 8px;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li:not(.multi-column) > ul ul ul {
margin-left: 0;
}
.uix-menu__container:not(.is-mobile) li.multi-column span.multi-column-title {
text-transform: uppercase;
font-weight: 700;
color: #B9B9B9;
display: inline-block;
cursor: default;
padding-left: 1.159375rem;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul {
width: auto;
white-space: nowrap;
display: none;
padding: 0;
/* add scrollbar to per column */
max-height: calc(100vh - 50px);
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul li {
width: 270px;
/* Required, JS script needs to listen on it for calculation */
overflow: hidden;
display: inline-block;
vertical-align: top;
padding-left: 0.75rem;
/* add scrollbar to per column */
max-height: calc(100vh - 50px - 100px);
overflow-y: auto;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul li::-webkit-scrollbar-track {
border-radius: 0px;
background-color: #fff;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul li::-webkit-scrollbar {
width: 3px;
background-color: #FAFAFA;
transform: scaleY(0.8);
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul li::-webkit-scrollbar-thumb {
border-radius: 0px;
background-color: #FAFAFA;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul li .uix-bubble {
right: 1.2rem;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul li a:hover {
color: #000;
background: #F1F1F1;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul li ul {
position: relative;
box-shadow: none;
/* Prevent JS script from disturbing */
margin-top: 0 !important;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul ul {
display: block;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul ul li {
float: none;
display: block;
}
.uix-menu__container:not(.is-mobile) li.multi-column .uix-menu__arrow-mega {
content: '';
display: none;
position: absolute;
top: 56px;
left: 50%;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
opacity: 0;
z-index: 1;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu ul.sub-menu .uix-menu__arrow {
background-color: #000;
right: 2.159375rem;
margin-top: 0.3125rem;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul li .uix-menu__arrow {
display: none;
}
.uix-menu__container:not(.is-mobile) .uix-menu__arrow {
display: block;
position: absolute;
right: 0.284375rem;
top: 25%;
background-color: #fff;
width: 3px;
height: 3px;
border-radius: 100%;
}
@media all and (max-width: 1250px) {
.uix-menu__container:not(.is-mobile) ul.uix-menu > li {
padding-left: 0.875rem;
padding-right: 0.875rem;
margin-right: 1.125rem;
}
}
@media all and (max-width: 768px) {
.uix-menu__container:not(.is-mobile) {
display: none;
}
}
/* ======================================================
/* ====================================================== */
/*
* 1. Base Nav
* 2. Line Nav
* 3. Separation Line Nav
* 4. Dropdown
* 5. Responsive Dropdown Nav
*/
.uix-nav {
/*
---------------------------
1. Base Nav
---------------------------
*/
/*
---------------------------
2. Line Nav
---------------------------
*/
/*
---------------------------
3. Separation Line Nav
---------------------------
*/
/*
---------------------------
4. Dropdown
---------------------------
*/
/*
---------------------------
5. Responsive Dropdown Nav
---------------------------
*/
}
.uix-nav::before {
display: table;
content: "";
line-height: 0;
}
.uix-nav::after {
display: table;
content: "";
line-height: 0;
clear: both;
}
.uix-nav ul {
margin: 0;
font-size: 0;
/*Fighting the Space Between Inline Block Elements*/
}
.uix-nav ul li {
position: relative;
display: inline-block;
font-size: 0.875rem;
/*Fighting the Space Between Inline Block Elements*/
margin: 0 1rem 0 0;
padding: 0;
}
.uix-nav ul li a {
padding: .3rem 1.5rem;
border: #e8e8e8 1px solid;
border-radius: 3px;
display: block;
}
.uix-nav ul li a:hover {
color: #232323;
}
.uix-nav ul li.is-active a, .uix-nav ul li.current-cat a {
border-color: #CE3A3E;
color: #CE3A3E;
}
.uix-nav.uix-t-r ul li {
margin: 0 0 0 1rem;
}
.uix-nav.uix-nav--line ul li {
margin: 0;
padding: 1rem 2.5rem;
font-size: 1.25rem;
/*Fighting the Space Between Inline Block Elements*/
}
.uix-nav.uix-nav--line ul li a {
padding: 0;
border: none;
}
.uix-nav.uix-nav--line ul li.is-active, .uix-nav.uix-nav--line ul li.current-cat {
box-shadow: 0px 3px 0px 0px #CE3A3E;
}
.uix-nav.uix-nav--separation ul li {
margin: 0;
padding: 0;
}
.uix-nav.uix-nav--separation ul li::before {
content: '/';
opacity: .3;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.uix-nav.uix-nav--separation ul li:first-child::before {
display: none;
}
.uix-nav.uix-nav--separation ul li a {
padding: .5rem 1.5rem;
border: none;
}
.uix-nav ul li {
/*-- Fold Out --*/
}
.uix-nav ul li ul {
width: 200px;
position: absolute;
left: 0;
top: 100%;
z-index: 1;
max-height: 0;
overflow: hidden;
transform: perspective(400) rotate3d(1, 0, 0, -90deg);
transform-origin: 50% 0;
transition: all 0.3s ease;
background: #fff;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.18) 0 19px 38px, rgba(0, 0, 0, 0.08) 0 15px 12px;
}
.uix-nav ul li ul li,
.uix-nav ul li ul a {
border: none;
box-shadow: none;
margin: 0;
padding: 0;
}
.uix-nav ul li ul li {
padding: .3rem 1rem;
display: block;
}
.uix-nav ul li ul li::before {
display: none;
}
.uix-nav ul li ul li:first-child {
margin-top: .5rem;
}
.uix-nav ul li ul li:last-child {
margin-bottom: .5rem;
}
.uix-nav ul li:hover ul {
max-height: 1000px;
transform: perspective(400) rotate3d(0, 0, 0, 0);
}
.uix-nav.uix-nav--dropdown-mobile .uix-nav--dropdown-mobile__togglelabel {
display: none;
}
.uix-nav.uix-nav--dropdown-mobile .uix-nav--dropdown-mobile__togglelabel ~ input {
display: none;
}
@media all and (max-width: 768px) {
.uix-nav {
/*
---------------------------
5. Responsive Dropdown Nav
---------------------------
*/
}
.uix-nav.uix-nav--dropdown-mobile {
/* wrapping this in media querry to prevent fails while change screen size and checked inputs */
}
.uix-nav.uix-nav--dropdown-mobile .uix-nav--dropdown-mobile__togglelabel {
display: block;
cursor: pointer;
user-select: none;
}
.uix-nav.uix-nav--dropdown-mobile > ul {
box-shadow: rgba(0, 0, 0, 0.18) 0 19px 38px, rgba(0, 0, 0, 0.08) 0 15px 12px;
margin-top: -0.203125rem;
}
.uix-nav.uix-nav--dropdown-mobile > :checked ~ ul {
display: none;
}
.uix-nav.uix-nav--dropdown-mobile li {
padding: .2rem 0;
display: block;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text-align: left;
}
.uix-nav.uix-nav--dropdown-mobile li::before {
display: none;
}
.uix-nav.uix-nav--dropdown-mobile li:not(:last-child) {
margin-right: 0;
}
.uix-nav.uix-nav--dropdown-mobile li:not(:last-child)::after {
content: '';
margin-left: 0;
}
.uix-nav.uix-nav--dropdown-mobile li a {
display: block;
position: relative;
border: none;
padding: .5rem 1.5rem;
}
.uix-nav.uix-nav--dropdown-mobile li a::after {
font-family: 'Font Awesome 5 Free';
font-weight: 600;
content: "\f105";
font-size: 1rem;
float: right;
position: absolute;
right: .5rem;
top: 50%;
transform: translateY(-50%);
}
}
/* ======================================================
/* ====================================================== */
.uix-menu-sidefixed {
position: absolute;
z-index: 13;
margin-top: 200px;
width: 120px;
}
.uix-menu-sidefixed.is-fixed {
position: fixed;
top: 120px;
margin-top: 0;
}
.uix-menu-sidefixed li {
position: relative;
font-size: 0;
display: block;
width: 100px;
text-align: left;
cursor: pointer;
transition: none;
}
.uix-menu-sidefixed li strong {
position: absolute;
display: inline-block;
font-weight: normal;
left: 40px;
text-align: left;
}
.uix-menu-sidefixed li span {
font-size: 0.875rem;
display: inline-block;
padding-left: 1rem;
padding-right: .5rem;
font-weight: bold;
}
.uix-menu-sidefixed li a {
color: #fff;
display: block;
transition: none;
}
.uix-menu-sidefixed li.is-active {
font-size: 0.875rem;
color: #fff;
border-bottom: 2px solid #000;
}
.uix-menu-sidefixed li.is-active a {
color: #000;
}
.uix-menu-sidefixed li.is-active span {
font-weight: bold;
}
/* ======================================================
/* ====================================================== */
/*
* 1. Default
* 2. Paginate WordPress Posts
*/
/*
---------------------------
1. Default
---------------------------
*/
.uix-pagination__container {
margin-top: 2.84375rem;
}
.uix-pagination__container::before {
display: table;
content: "";
line-height: 0;
}
.uix-pagination__container::after {
display: table;
content: "";
line-height: 0;
clear: both;
}
.uix-pagination__container ul {
font-size: 0;
/*Fighting the Space Between Inline Block Elements*/
}
.uix-pagination__container ul li {
display: inline-block;
font-size: 1rem;
/*Fighting the Space Between Inline Block Elements*/
}
.uix-pagination__container ul li a,
.uix-pagination__container ul li > span {
display: inline-block;
width: 3.125rem;
height: 3.125rem;
padding-top: 0.25rem;
text-align: center;
background: none;
border: none;
color: #212121;
font-variant-ligatures: common-ligatures;
border-radius: 4px;
/*Ligatures and contextual forms are ways of combining glyphs to produce more harmonized forms.*/
margin-bottom: 0;
font-size: 0.875rem;
line-height: 3.25;
margin-top: 0;
margin-bottom: 2.06818181818rem;
}
.uix-pagination__container ul li a:hover {
background: #efefef;
color: #232323;
}
.uix-pagination__container ul li.is-active a {
color: #989898;
font-style: italic;
}
.uix-pagination__container ul li.is-active a:hover {
background: #e7e7e7;
color: #232323;
}
.uix-pagination__container ul li.is-active > span {
border-color: #CE3A3E;
background-color: #CE3A3E;
background-image: linear-gradient(to right, #CE3A3E 0%, #C04645 20%, #DE510E 100%);
box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, rgba(206, 58, 62, 0.2) 0px 15px 35px 0px;
color: #fff;
font-style: italic;
}
/*
---------------------------
2. Paginate WordPress Posts
---------------------------
*/
.uix-page-links {
margin: 0.875rem 0;
font-weight: 600;
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
border: 1px solid #dee2e6;
}
.uix-page-links > span {
display: inline-block;
margin: 0 0.13125rem;
font-weight: normal;
font-style: italic;
}
.uix-page-links a {
display: inline-block;
margin: 0 0.13125rem;
font-weight: normal;
font-style: italic;
}
.uix-page-links a > span {
color: #212121;
background: #F9F9F9;
padding: 0 0.2625rem;
border: 1px solid #DDDDDD;
border-radius: 2px;
}
/* ======================================================
/* ====================================================== */
/*
* 1. Basic - Synchronize to WordPress's class name
* 2. Calendar Widget - Synchronize to WordPress's class name
* 3. Link List - Synchronize to WordPress's class name
* 4. Tag cloud from sidebar - Synchronize to WordPress's class name
* 5. Post List
* 6. Post List with Featured Image
*/
/*
---------------------------
1. Basic
---------------------------
*/
.uix-sidebar__container {
position: relative;
word-wrap: break-word;
padding-left: 2.1875rem;
line-height: 1.825;
}
.uix-sidebar__container .widget {
padding-bottom: 2.625rem;
font-size: 0.875rem;
}
.uix-sidebar__container .widget.js-uix-sticky-el.is-active {
background: #fff;
padding-top: 10px;
}
.uix-sidebar__container .widget-title {
margin: 0 0 0.875rem;
}
@media all and (max-width: 768px) {
.uix-sidebar__container {
padding-left: 0;
}
}
/*
---------------------------
2. Calendar Widget
---------------------------
*/
.calendar_wrap > table {
padding: 1.3125rem 0;
width: 100%;
font-size: 0.5625rem;
}
.calendar_wrap > table caption {
text-align: center;
margin: 0.875rem 0;
font-size: 1.25rem;
}
.calendar_wrap > table thead th {
padding-bottom: 0.625rem;
text-align: center;
}
.calendar_wrap > table tbody td {
background: #f5f5f5;
border: 1px solid #fff;
text-align: center;
padding: 0.5rem;
}
.calendar_wrap > table tbody td:hover {
background: #fff;
}
.calendar_wrap > table tbody .pad {
background: none;
}
.calendar_wrap > table tfoot #next {
text-transform: uppercase;
text-align: right;
}
.calendar_wrap > table tfoot #prev {
text-transform: uppercase;
padding-top: 0.875rem;
}
/*
---------------------------
3. Link List
---------------------------
*/
.widget_categories ul,
.widget_nav_menu ul,
.widget_pages ul {
margin-left: 1.25rem;
}
.widget_categories ul li,
.widget_nav_menu ul li,
.widget_pages ul li {
margin-bottom: 0;
position: relative;
}
.widget_categories ul li a,
.widget_nav_menu ul li a,
.widget_pages ul li a {
display: inline-block;
padding: 0.35546875rem;
font-style: italic;
transition: 0.2s linear;
}
.widget_categories ul li a::before,
.widget_nav_menu ul li a::before,
.widget_pages ul li a::before {
content: '\203A';
opacity: 0.7;
margin-right: 0.721875rem;
}
.widget_categories ul li > .cat-item-count,
.widget_nav_menu ul li > .cat-item-count,
.widget_pages ul li > .cat-item-count {
position: absolute;
top: 0.875rem;
right: 0;
border: 1px solid #C2C2C2;
border-radius: 50px;
display: inline-block;
min-width: 16px;
height: 16px;
font-size: 0.625rem;
text-align: center;
line-height: 16px;
opacity: 0.5;
}
.widget_categories ul > li,
.widget_nav_menu ul > li,
.widget_pages ul > li {
border-bottom: 1px dashed #E6E6E6;
}
.widget_categories ul > li li,
.widget_nav_menu ul > li li,
.widget_pages ul > li li {
border-bottom: none;
}
.widget_categories ul.children li:last-child,
.widget_nav_menu ul.children li:last-child,
.widget_pages ul.children li:last-child {
border-bottom: none;
}
/*
---------------------------
4. Tag cloud from sidebar
---------------------------
*/
.tagcloud {
margin-bottom: 1.3125rem;
}
.tagcloud > a {
font-size: 0.875rem;
padding: 0.04375rem 0.109375rem;
margin-bottom: 0.175rem;
display: inline-block;
}
.tagcloud > a::after {
content: '/';
display: inline-block;
margin-left: 0.546875rem;
opacity: 0.5;
}
.tagcloud > a:last-child:after {
display: none;
}
.tagcloud.uix-tags-box--has-border > a {
border: 1px solid #E6E6E6;
}
/*
---------------------------
5. Post List
---------------------------
*/
.uix-sidebar__posts li {
border-bottom: 1px dashed #E6E6E6;
margin-bottom: 0.721875rem;
}
/*
---------------------------
6. Post List with Featured Image
---------------------------
*/
.uix-sidebar__posts-img {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.3;
}
.uix-sidebar__posts-img li {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.3;
border: none;
display: block;
margin-bottom: 0.875rem;
display: block;
height: auto;
position: relative;
}
.uix-sidebar__posts-img li::after {
display: block;
content: '';
clear: both;
border-bottom: 1px dashed #E6E6E6;
}
.uix-sidebar__posts-img li .uix-sidebar__posts-img__thumb {
float: left;
width: 39.4%;
margin-right: 0.875rem;
margin-bottom: 0.875rem;
padding: 0.125rem;
display: block;
text-align: left;
}
.uix-sidebar__posts-img li .uix-sidebar__posts-img__thumb img {
margin: 0;
padding: 0;
max-width: 100%;
}
.uix-sidebar__posts-img li .uix-sidebar__posts-img__desc {
float: left;
width: 50%;
}
.uix-sidebar__posts-img li .uix-sidebar__posts-img__desc.no-image {
float: none;
width: 100%;
}
.uix-sidebar__posts-img li.uix-sidebar__posts-img__no-thumb {
display: none;
}
.uix-sidebar__posts-img li .uix-sidebar__posts-img__date {
opacity: 0.65;
font-size: 0.75rem;
padding: 0.6125rem 0;
}
@media all and (max-width: 991px) {
.uix-sidebar__posts-img li .uix-sidebar__posts-img__thumb {
width: 15%;
}
}
@media all and (max-width: 480px) {
.uix-sidebar__posts-img li .uix-sidebar__posts-img__thumb {
width: 39.4%;
}
}
@media all and (max-width: 991px) {
.uix-sidebar__posts-img li .uix-sidebar__posts-img__desc {
width: 82.5%;
}
}
@media all and (max-width: 480px) {
.uix-sidebar__posts-img li .uix-sidebar__posts-img__desc {
width: 50%;
}
}
/* ======================================================
/* ====================================================== */
/*
* 1. Social Button
* 2. Social Background
*/
/*
---------------------------
1. Social Button
---------------------------
*/
.uix-social-btn {
position: relative;
border: 2px solid #212121;
text-align: center;
display: inline-block;
vertical-align: middle;
z-index: 1;
color: #212121;
padding: 0;
margin: 0;
/* white style */
}
.uix-social-btn.is-fill-white {
background: #fff;
color: #212121;
}
.uix-social-btn.uix-social-btn--no-border {
border-color: transparent !important;
}
.uix-social-btn.uix-social-btn--thin {
border-width: 1px;
}
.uix-social-btn.uix-social-btn--circle {
border-radius: 50%;
}
.uix-social-btn.uix-social-btn--circle::after {
border-radius: 50%;
}
.uix-social-btn.uix-social-btn--rounded {
border-radius: 4px;
}
.uix-social-btn.uix-social-btn--rounded::after {
border-radius: 4px;
}
.uix-social-btn.uix-social-btn--small {
width: 2rem;
height: 2rem;
line-height: 1.875rem;
margin-right: .5rem;
}
.uix-social-btn.uix-social-btn--small i {
font-size: 1rem;
}
.uix-social-btn.uix-social-btn--medium {
width: 2.875rem;
height: 2.875rem;
line-height: 2.875rem;
margin-right: .75rem;
}
.uix-social-btn.uix-social-btn--medium i {
font-size: 1.2rem;
}
.uix-social-btn.uix-social-btn--large {
width: 2.4rem;
height: 2.4rem;
line-height: 2.5rem;
margin-right: 1rem;
}
.uix-social-btn.uix-social-btn--large i {
font-size: 1.5rem;
}
.uix-social-btn::after {
transition: all 0.3s ease;
position: absolute;
content: '';
width: 100%;
height: 100%;
display: block;
left: 0;
top: 0;
background-color: #212121;
visibility: hidden;
opacity: 0;
transform: scale(0.5, 0.5);
z-index: -1;
}
.uix-social-btn:hover i {
color: #fff;
}
.uix-social-btn:hover::after {
visibility: visible;
opacity: 1;
transform: scale(1, 1);
}
.uix-social-btn.uix-social-btn--white {
border-color: #fff;
color: #fff;
}
.uix-social-btn.uix-social-btn--white:hover i {
color: #212121;
}
.uix-social-btn.uix-social-btn--white:hover::after {
background-color: #fff;
}
/*
---------------------------
2. Social Background
---------------------------
*/
.uix-social-bg {
color: #fff !important;
}
.uix-social-bg--twitter {
border-color: #53B9FD !important;
background-color: #53B9FD !important;
}
.uix-social-bg--facebook {
border-color: #78A4DD !important;
background-color: #78A4DD !important;
}
.uix-social-bg--google {
border-color: #FC5B5B !important;
background-color: #FC5B5B !important;
}
.uix-social-bg--instagram {
border-color: #6156C7 !important;
background-color: #6156C7 !important;
}
.uix-social-bg--lastfm {
border-color: #B90000 !important;
background-color: #B90000 !important;
}
.uix-social-bg--youtube {
border-color: #CC181E !important;
background-color: #CC181E !important;
}
.uix-social-bg--vimeo {
border-color: #1ab7ea !important;
background-color: #1ab7ea !important;
}
.uix-social-bg--dribbble {
border-color: #9b1212 !important;
background-color: #9b1212!important;
}
.uix-social-bg--github {
border-color: #652F51 !important;
background-color: #652F51 !important;
}
.uix-social-bg--flickr {
border-color: #fc4ca4 !important;
background-color: #fc4ca4 !important;
}
.uix-social-bg--medium {
border-color: #00AB6B !important;
background-color: #00AB6B !important;
}
.uix-social-bg--codepen {
border-color: #333 !important;
background-color: #333 !important;
}
.uix-social-bg--behance {
border-color: #4F8FD6 !important;
background-color: #4F8FD6 !important;
}
.uix-social-bg--dropbox {
border-color: #349BE9 !important;
background-color: #349BE9 !important;
}
.uix-social-bg--pinterest {
border-color: #F35359 !important;
background-color: #F35359 !important;
}
.uix-social-bg--reddit {
border-color: #FF4500 !important;
background-color: #FF4500 !important;
}
.uix-social-bg--soundcloud {
border-color: #FF7500 !important;
background-color: #FF7500 !important;
}
.uix-social-bg--producthunt {
border-color: #DA552F !important;
background-color: #DA552F !important;
}
.uix-social-bg--weibo {
border-color: #E6162D !important;
background-color: #E6162D !important;
}
.uix-social-bg--deviantart {
border-color: #05CC47 !important;
background-color: #05CC47 !important;
}
.uix-social-bg--spotify {
border-color: #A5CE3F !important;
background-color: #A5CE3F !important;
}
.uix-social-bg--wordpress {
border-color: #24A5DD !important;
background-color: #24A5DD !important;
}
.uix-social-bg--digg {
border-color: #333 !important;
background-color: #333 !important;
}
.uix-social-bg--tumblr {
border-color: #529ECC !important;
background-color: #529ECC !important;
}
.uix-social-bg--linkedin {
border-color: #24A5DD !important;
background-color: #24A5DD !important;
}
.uix-social-bg--stackoverflow {
border-color: #FF7500 !important;
background-color: #FF7500 !important;
}
.uix-social-bg--weixin {
border-color: #50b674 !important;
background-color: #50b674 !important;
}
.uix-social-bg--qq {
border-color: #30a5dd !important;
background-color: #30a5dd !important;
}
.uix-social-bg--colourful {
display: inline-block !important;
margin: .2em .5em !important;
}
.uix-social-bg--colourful {
color: #333333 !important;
}
.uix-social-bg--colourful[href*="twitter.com"] {
color: #53B9FD !important;
}
.uix-social-bg--colourful[href*="facebook.com"] {
color: #78A4DD !important;
}
.uix-social-bg--colourful[href*="google.com"] {
color: #FC5B5B !important;
}
.uix-social-bg--colourful[href*="instagram.com"] {
color: #6156C7 !important;
}
.uix-social-bg--colourful[href*="last.fm"] {
color: #B90000 !important;
}
.uix-social-bg--colourful[href*="youtube.com"] {
color: #CC181E !important;
}
.uix-social-bg--colourful[href*="vimeo.com"] {
color: #1ab7ea !important;
}
.uix-social-bg--colourful[href*="dribbble.com"] {
color: #FA8BBC !important;
}
.uix-social-bg--colourful[href*="github.com"] {
color: #652F51 !important;
}
.uix-social-bg--colourful[href*="flickr.com"] {
color: #fc4ca4 !important;
}
.uix-social-bg--colourful[href*="medium.com"] {
color: #00AB6B !important;
}
.uix-social-bg--colourful[href*="codepen.com"] {
color: #333 !important;
}
.uix-social-bg--colourful[href*="behance.net"] {
color: #4F8FD6 !important;
}
.uix-social-bg--colourful[href*="dropbox.com"] {
color: #349BE9 !important;
}
.uix-social-bg--colourful[href*="pinterest.com"] {
color: #F35359 !important;
}
.uix-social-bg--colourful[href*="reddit.com"] {
color: #FF4500 !important;
}
.uix-social-bg--colourful[href*="soundcloud.com"] {
color: #FF7500 !important;
}
.uix-social-bg--colourful[href*="producthunt.com"] {
color: #DA552F !important;
}
.uix-social-bg--colourful[href*="weibo.com"] {
color: #E6162D !important;
}
.uix-social-bg--colourful[href*="deviantart.com"] {
color: #05CC47 !important;
}
.uix-social-bg--colourful[href*="spotify.com"] {
color: #A5CE3F !important;
}
.uix-social-bg--colourful[href*="wordpress.com"] {
color: #24A5DD !important;
}
.uix-social-bg--colourful[href*="mailto"] {
color: #333 !important;
}
.uix-social-bg--colourful[href*="digg.com"] {
color: #333 !important;
}
.uix-social-bg--colourful[href*="tumblr.com"] {
color: #529ECC !important;
}
.uix-social-bg--colourful[href*="linkedin.com"] {
color: #24A5DD !important;
}
.uix-social-bg--colourful[href*="stackoverflow.com"] {
color: #FF7500 !important;
}
.uix-social-bg--colourful[href*="rss"],
.uix-social-bg--colourful[href*="feed"] {
color: #FF7500 !important;
}
/* ======================================================
/* ====================================================== */
.uix-spacing--s {
position: relative;
padding: 3rem 0;
}
.uix-spacing--m {
position: relative;
padding: 6.5625rem 0;
}
.uix-spacing--l {
position: relative;
padding: 11.375rem 0;
}
.uix-spacing--no-top {
padding-top: 0 !important;
}
.uix-spacing--no-bottom {
padding-bottom: 0 !important;
}
.uix-spacing--googlemap {
padding-top: 0 !important;
}
/* Without spacing */
.uix-spacing--no {
padding: 0 !important;
margin: 0 !important;
/* compatible with ,