File: /home/e/x/h/exhehbu/www/wp-content/themes/revolution/assets/sass/_utilities.scss
@mixin min-break($size) {
@media only screen and (min-width: $size) { @content; }
}
@mixin max-break($size) {
@media only screen and (max-width: $size) { @content; }
}
@mixin input-placeholder {
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}
@mixin ie11() {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { @content; }
}
@mixin firefox() {
@-moz-document url-prefix() { @content; }
}
@mixin clip-path($clip) {
-webkit-clip-path: $clip;
-moz-clip-path: $clip;
-ms-clip-path: $clip;
clip-path: $clip;
}
@mixin text-fill-color($value) {
-webkit-text-fill-color: $value;
-moz-text-fill-color: $value;
-o-text-fill-color: $value;
-ms-text-fill-color: $value;
text-fill-color: $value;
}
@mixin text-stroke-color($value) {
-webkit-text-stroke-color: $value;
-moz-text-stroke-color: $value;
-o-text-stroke-color: $value;
-ms-text-stroke-color: $value;
text-stroke-color: $value;
}
@mixin text-stroke-width($value) {
-webkit-text-stroke-width: $value;
-moz-text-stroke-width: $value;
-o-text-stroke-width: $value;
-ms-text-stroke-width: $value;
text-stroke-width: $value;
}
.reset {
margin: 0;
padding: 0;
list-style: none;
}
.cf {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.endcolumn {
[class*="column"] + [class*="column"]:last-child {
float: left;
}
}
.transition {
transition: all 1s $transition;
}
.transition2 {
transition: all 1s cubic-bezier(0.645,.045,.095,1.08);
}
.quick-transition {
transition: all .25s $transition;
}
.mid-transition {
transition: all .5s $transition;
}
.linear-transition {
transition: all 1s $transition;
}
.linear-quick-transition {
transition: all .25s linear;
}
.linear-mid-transition {
transition: all .5s linear;
}
.general-shadow-styles {
&.small-shadow {
@include box-shadow(0 2px 7px rgba(0,0,0,0.1));
}
&.medium-shadow {
@include box-shadow(0 4px 20px rgba(0,0,0,0.1));
}
&.large-shadow {
@include box-shadow(0 6px 30px rgba(0,0,0,0.1));
}
&.xlarge-shadow {
@include box-shadow(0 8px 40px rgba(0,0,0,0.08));
}
}
.admin-style {
.admin-bar & {
top: 0;
@media screen and (min-width: 601px){
top: 46px;
}
@media screen and (min-width: 783px){
top: 32px;
}
}
}
.custom_scroll {
overflow: hidden;
height: 100%;
position: relative;
}
.flex-video {
margin: 0;
&.widescreen {
.vc_video-aspect-ratio-235 & {
padding-bottom: 42.5%;
}
}
}
.center-contents {
display: flex;
justify-content: center;
align-items: center;
}
.cover-bg {
flex-direction: column;
background-position: center;
background-size: cover;
}
.no-padding {
margin: 0;
&>.columns {
padding: 0;
}
@include min-break($break-small) {
padding: 0;
}
}
.columns {
.vc_video-bg {
& + .vc_column-inner {
position: relative;
z-index: 20;
}
}
&.thb_video_bg {
position: relative;
overflow: hidden;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
.wpb_wrapper {
z-index: 5;
position: relative;
}
.thb-row-video-bg {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -1;
transform: translate3d(-50%, -50%, 0);
}
.thb_video_overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
transform: translateZ(0);
}
}
.vc_editor.compose-mode .vc_element> & {
width: 100%;
max-width: 100%;
}
.vc_column-inner {
width: 100%;
@extend .general-shadow-styles;
}
&:not(.full-height) {
.vc_column-inner:not(.thb-fixed) {
min-height: 100%;
}
}
&.thb-dark-column {
.thb-image-slider {
.thb-animated-arrow.circular {
border-color: rgba($black,0.4);
svg {
fill: $black;
}
}
}
}
&.thb-light-column {
color: #e6e6e6;
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
background: rgba(#fff,0.05);
color: #c1c1c1;
&:not(:focus) {
border-color: rgba(#fff,0.15);
}
&:focus {
color: #c1c1c1;
}
}
.btn-text {
@extend .light-button-text;
}
.btn-block,
.masonry_btn {
color: #fff;
&:hover {
color: #fff;
}
}
.thb-video-lightbox.thb-video-lightbox-icon-style-style4 {
border-color: rgba(#fff,0.2);
}
.thb-share-icons.style2 svg {
fill: #fff;
}
.thb-share-icons.style2 a,
.thb-page-menu.style2 li a {
color: #fff;
}
.thb-page-menu.style2 li {
border-color: rgba(#fff,0.3);
}
.thb_location_container.center-arrows.row .slick-nav,
.thb-content-carousel.center-arrows.row .slick-nav {
border-color: rgba(#fff,0.4);
&:hover {
border-color: #fff;
}
svg {
fill: #fff;
}
}
.wp-caption-text {
color: #575757;
}
.boxed-icon:not(:hover) {
border-color: rgba(#fff,0.1);
color: #fff;
svg {
fill: #fff;
}
}
.btn-text.style4 .arrow svg:first-child,
.thb-portfolio-slider-style3.thb-carousel-dark .thb-animated-arrow.circular svg {
fill: #fff;
}
.wpcf7-checkbox label {
border-color: rgba(#fff,0.2);
}
.thb-iconbox.has-link {
color: #e6e6e6;
}
.thb-iconbox.top.type1 figure .thb-iconbox-line,
.thb-iconbox.top.type2 figure .thb-iconbox-line,
.thb-iconbox.top.type4 {
border-color: rgba(#fff,0.2);
&:hover {
border-color: #fff;
}
}
.thb-iconbox .thb-read-more svg,
.thb-portfolio .type-portfolio.style4:hover svg,
.thb-portfolio .type-portfolio.style4 svg,
.thb-portfolio .type-portfolio.style4 .thb-portfolio-content svg .bar {
fill: #fff;
}
.thb-tabs.style2 .vc_tta-panel-heading h4 a {
color: rgba(#fff,0.6);
}
.thb-tabs.style2 .vc_tta-panel-heading h4 {
border-bottom-color: rgba(#fff,0.15);
}
.thb-portfolio-filter.style3 ul li a {
color: rgba(#fff,0.8);
}
.thb-tabs.style2 .vc_tta-panel-heading h4 a.active,
.thb-tabs.style4 .vc_tta-panel-heading h4 a:not(.active),
.thb-tabs.style3 .vc_tta-panel-heading h4 a:not(.active),
.thb-portfolio-filter.style1 ul li a:not(.active),
.thb-portfolio-filter.style2 .thb-filter-by,
.portfolio-attributes a,
.thb-portfolio-filter.style3 ul li a:hover, .thb-portfolio-filter.style3 ul li a.active {
color: #fff;
}
.portfolio-attributes h6,
.thb-portfolio-slider.thb-portfolio-slider-style3 .portfolio-slide .content-side a:not(:hover) {
color: #fff;
}
.portfolio-attributes p,
.portfolio-attributes.style2 .attribute p {
color: rgba(#fff,0.8);
}
.portfolio-attributes.style2 .attribute {
border-color: rgba(#fff,0.2);
}
.thb-portfolio-slider-style3.thb-carousel-dark .thb-animated-arrow.circular {
border-color: rgba(#fff,0.2);
}
.thb-carousel .slick-dots li button {
background: rgba(#fff,0.2);
}
.thb-carousel .slick-dots li.slick-active button,
.thb-carousel .slick-dots .select {
background: #fff;
}
.thb-like-button {
border-color: rgba(#fff,0.2);
.counter {
color: #fff;
}
&:hover {
border-color: #fff;
}
}
.thb-stroketype * {
@include text-stroke-color(#fff);
}
.thb-horizontal-list {
border-bottom-color: rgba(255,255,255,0.09);
}
.thb-accordion.style1 .vc_tta-panel {
border-bottom-color: rgba(255,255,255,0.15);
}
.thb-tabs.style1 .vc_tta-panel-heading h4 a {
color: rgba(#fff,0.55);
&.active {
color: #fff;
}
}
.thb-accordion.style1 .vc_tta-panel-heading h4 a:after,
.thb-accordion.style1 .vc_tta-panel-heading h4 a:before {
background: rgba(#fff,0.55);
}
.thb-accordion.style3 .vc_tta-panel-heading h4 a:after,
.thb-accordion.style3 .vc_tta-panel-heading h4 a:before {
background: rgba(#fff,0.55);
}
.thb-accordion.style3 .vc_tta-panel {
border-color: rgba(#fff,0.25);
}
.thb-accordion.style3 .vc_tta-panel.active {
background: #1c1c1c;
}
.thb-accordion.style3 .vc_tta-panel-heading h4 a {
color:#fff;
}
.thb_twitter_container p {
color: rgba(#fff, 0.7);
}
h1,h2,h3,h4,h5,h6,
.thb-portfolio .type-portfolio h1, .thb-portfolio .type-portfolio h2,
.thb-portfolio .type-portfolio.style6 .portfolio-holder,
.thb-awards-parent,
.thb-awards .award-container .thb-award-description strong,
.thb-awards .award-container .thb-award-description b,
.thb-experience .thb-experience-description strong, .thb-experience .thb-experience-position strong,
.thb-experience .thb-experience-description b, .thb-experience .thb-experience-position b,
.thb-experience,
label,
.thb-counter,
.post .post-title a,
.post .post-category a,
.thb-accordion.style1 .vc_tta-panel-heading h4 a,
.post.style9 .style9-content .style9-readmore,
.thb_twitter_container .thb_tweet_time,
.thb_twitter_container p a,
.thb_twitter_container .thb_follow_us a {
color: #fff;
}
.thb-awards-parent + .thb-awards-parent {
border-top-color: rgba(#fff, 0.6);
}
.thb-awards .award-container,
.thb-experience {
border-bottom-color: rgba(#fff,0.2);
}
.post.style9 {
border-bottom-color: rgba(#fff, 0.15);
}
.post.style9 .post-category a {
color: $color2;
}
.post.style9:not(.active) .style9-title .style9-arrow:not(:hover) {
border-color: rgba(#fff, 0.18);
}
.post.style9:not(.active) .style9-title .style9-arrow svg {
fill: rgba(#fff, 0.36);
}
.wpb_text_column a {
color: #fff;
&:after {
border-bottom-color: #fff;
}
}
.thb-awards .award-container .thb-award-description,
.thb-experience .experience-date {
color: #b8b8b8;
}
.thb-iconbox figure svg path, .thb-iconbox figure svg circle, .thb-iconbox figure svg rect, .thb-iconbox figure svg ellipse {
stroke: #fff;
}
.thb-pricing-table.style2 .pricing-container .thb_pricing_head .pricing_sub_title,
.thb-pricing-table.style2 .pricing-container .thb_pricing_head .thb-price,
.thb-tabs.style4 .thb-tab-menu {
border-color: rgba(#fff,0.1);
}
.thb-team-row .thb-team-member.member_style1 h6,
.thb-team-row .thb-team-member.member_style1 .job-title,
.thb-team-row .thb-team-member.member_style4 h6,
.thb-team-row .thb-team-member.member_style1 .job-title {
color: #fff;
}
}
}
.light-button-text {
color: #fff;
&.style1 {
&:before {
background: rgba(#fff,0.35);
}
&:hover {
color: #fff;
&:before {
background: rgba(#fff,1);
}
}
}
&.style2 {
&:before {
background: rgba(#fff,0.35);
}
&:after {
background: rgba(#fff,1);
}
}
&.style3 {
&:hover {
color: #fff;
}
span:after {
background: rgba(#fff,1);
}
}
&.style4 {
&:hover {
color: #fff;
}
svg {
&:nth-child(2n) {
fill: #fff;
}
}
}
&.style5 {
&:hover {
color: #fff;
}
svg,
svg .bar {
fill: #fff;
}
}
}
/* 5 Columns */
// 1/5
.small-1\/5 {
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.thb-5,
.medium-1\/5 {
@include min-break($break-medium) {
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
.large-1\/5 {
@include min-break($break-large) {
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
// 2/5
.small-2\/5 {
-webkit-flex: 0 0 40%;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
.thb-5-2,
.medium-2\/5 {
@include min-break($break-medium) {
-webkit-flex: 0 0 40%;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
}
.large-2\/5 {
@include min-break($break-large) {
-webkit-flex: 0 0 40%;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
}
// 3/5
.small-3\/5 {
-webkit-flex: 0 0 60%;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
.thb-5-3,
.medium-3\/5 {
@include min-break($break-medium) {
-webkit-flex: 0 0 60%;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
}
.large-3\/5 {
@include min-break($break-large) {
-webkit-flex: 0 0 60%;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
}
/* Others */
.thb-fixed,
.woocommerce-MyAccount-navigation {
will-change: top;
@extend .cf;
@include transition(top .25s $transition);
@include backface-visibility(hidden);
@include max-break($break-small) {
position: static !important;
}
}
/* Padding Sizes */
.thb-padding-sizes {
&.regular-padding {
.columns {
margin-bottom: 20px;
@include min-break($break-small) {
margin-bottom: 30px;
}
@include min-break($break-medium) {
margin-bottom: 40px;
}
}
}
&.medium-padding {
.columns {
margin-bottom: 20px;
@include min-break($break-small) {
margin-bottom: 30px;
}
}
}
&.mini-padding {
margin: 0 -5px;
.columns {
padding: 0 5px;
margin-bottom: 10px;
}
}
&.pixel-padding {
margin: 0 -1px;
.columns {
padding: 0 1px;
margin-bottom: 2px;
}
}
&.no-padding {
margin: 0;
.columns {
padding: 0;
margin-bottom: 0;
}
}
}
/* Animated Arrow */
.thb-animated-arrow {
cursor: pointer;
opacity: 1;
svg {
fill: #fff;
path {
@extend .quick-transition;
}
.handle {
@include translateX(8px);
}
.bar {
opacity: 0;
transform-origin: left center;
@include translateX(16px);
}
}
&:hover {
.handle {
@include translateX(4px);
}
.bar {
opacity: 1;
@include transform(translateX(4px) scale(0.8));
}
}
&.dark,
.thb-carousel-dark & {
svg {
fill: $black;
}
&.circular {
border-color: rgba($black,0.4);
}
}
&.arrow-right {
@include rotateZ(180deg);
}
&.circular {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 21px;
width: 42px;
height: 42px;
border: 1px solid rgba(255,255,255,0.4);
svg {
width: 20px;
height: 20px;
overflow: visible;
}
&.slick-next {
.handle {
@include translateX(-8px);
}
.bar {
@include translateX(-12px);
}
&:hover {
.handle {
@include translateX(-4px);
}
.bar {
@include transform(translateX(0px) scale(0.8));
}
}
}
}
}
/* Preloader Icons */
/* Material Spinner */
.material-spinner {
animation: material-rotator 1.4s linear infinite;
.material-path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
animation:
material-dash 1.4s ease-in-out infinite,
material-colors 5.6s ease-in-out infinite;
}
@keyframes material-rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
@keyframes material-colors {
0% { stroke: #4285F4; }
25% { stroke: #DE3E35; }
50% { stroke: #F7C223; }
75% { stroke: #1B9A59; }
100% { stroke: #4285F4; }
}
@keyframes material-dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform:rotate(450deg);
}
}
}
/* Material Spinner - 2 */
.preloader-style2-container {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: auto;
@include filter(url('#thb-goo'));
@include animation(rotate-move 2s ease-in-out infinite);
}
.preloader-style3-container {
width: 100%;
height: 1px;
overflow: hidden;
position: relative;
&:before {
content: '';
display: block;
top: 0;
bottom: 0;
position: absolute;
left: 0;
background: $color2;
will-change: left, right;
@include animation(loading-line 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite);
}
&:after {
content: '';
display: block;
bottom: 0;
position: absolute;
top: 0;
left: 0;
background: $color2;
will-change: left, right;
@include animation(loading-line-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite);
@include animation-delay(1.15s);
}
@include keyframes(loading-line) {
0% {left:-35%; right:100%;}
60% {left:100%; right: -90%;}
100% {left:100%; right: -90%;}
}
@include keyframes(loading-line-short) {
0% {left:-200%; right:100%;}
60% {left:107%; right:-8%;}
100% {left:107%; right:-8%;}
}
}
.thb-dot {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.dot-3 {
background-color: #f74d75;
@include animation(dot-3-move 2s ease infinite, index 6s ease infinite);
}
.dot-2 {
background-color: #54f3c0;
@include animation(dot-2-move 2s ease infinite, index 6s -4s ease infinite);
}
.dot-1 {
background-color: #54ccf3;
@include animation(dot-1-move 2s ease infinite, index 6s -2s ease infinite);
}
@include keyframes(dot-3-move) {
0% {@include transform(scale(1))}
20% {@include transform(scale(1))}
45% {@include transform(translateY(-18px) scale(0.5))}
60% {@include transform(translateY(-45px) scale(0.5))}
80% {@include transform(translateY(-45px) scale(0.5))}
100% {@include transform(translateY(0px) scale(1))}
}
@include keyframes(dot-2-move) {
0% {@include transform(scale(1))}
20% {@include transform(scale(1))}
45% {@include transform(translate(-16px, 12px) scale(0.5))}
60% {@include transform(translate(-40px, 30px) scale(0.5))}
80% {@include transform(translate(-40px, 30px) scale(0.5))}
100% {@include transform(translateY(0px) scale(1))}
}
@include keyframes(dot-1-move) {
0% {@include transform(scale(1))}
20% {@include transform(scale(1))}
45% {@include transform(translate(16px, 12px) scale(0.5))}
60% {@include transform(translate(40px, 30px) scale(0.5))}
80% {@include transform(translate(40px, 30px) scale(0.5))}
100% {@include transform(translateY(0px) scale(1))}
}
@include keyframes(rotate-move) {
0% {@include transform(translate(-50%, -50%) rotate(0deg))}
55% {@include transform(translate(-50%, -50%) rotate(0deg))}
80% {@include transform(translate(-50%, -50%) rotate(360deg))}
100% {@include transform(translate(-50%, -50%) rotate(360deg))}
}
@include keyframes(index) {
0% {z-index: 3}
33.3% {z-index: 2}
66.6% {z-index: 1}
100% {z-index: 3}
}
/* Lazy Load */
.lazyload,
.lazyloading {
opacity: 0.3;
//@include filter(blur(5px));
&.thb_3dimage {
opacity: 1;
}
}
.lazyloaded {
opacity: 1;
@include transition(opacity .25s $transition);
}