File: /home/artinside/sites.artinside.com.br/paliar/themes/web/assets/css/custom.css
/* ----------------------------------------------------------------
Custom CSS
Add all your Custom Styled CSS here for New Styles or
Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
.open-sans {
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
.bebas-neue-regular {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-style: normal;
}
.bree-serif-regular {
font-family: "Bree Serif", serif;
font-weight: 400;
font-style: normal;
}
:root {
--cnvs-themecolor: #00547d !important;
--cnvs-themecolor-rgb: 00, 84, 125 !important;
--cnvs-themecolor: #00547d !important;
--cnvs-themecolor-rgb: 00, 84, 125 !important;
--cnvs-secondary-color: #3A9A36 !important;
--cnvs-secondary-color-rgb: 58, 154, 54 !important;
--cnvs-secondary-font: 'Bebas Neue', sans-serif;
--cnvs-primary-font: 'Bree Serif', serif;
--cnvs-body-font: 'Open Sans', sans-serif;
--bs-primary-bg-subtle: #d5d5d5 !important;
--bs-secondary-bg-subtle: #e2e3e5 !important;
--bs-primary: #00547d !important;
--bs-primary-rgb: 00, 84, 125 !important;
--bs-secondary: #3A9A36 !important;
--bs-secondary-rgb: 58, 154, 54 !important;
}
.text-primary{ color: #00547d !important;}
.border-primary {
border-color: #00547d !important;
}
.border-secondary {
border-color: #3A9A36 !important;
}
/* Tab */
#demo-drone-tab {
--bs-nav-tabs-border-width: 0px;
--bs-nav-link-color: #111;
}
#demo-drone-tab .nav-item {
position: relative;
}
#demo-drone-tab .nav-item .nav-link.active .tab-title {
font-weight: 600;
}
.nav-link.active{
background-color: transparent !important;
}
@media (min-width: 992px) {
#demo-drone-tab .nav-item .nav-link.active::after {
content: '';
position: absolute;
width: 0;
height: 0;
margin-left: -5px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid var(--cnvs-contrast-300);
bottom: 0;
left: 50%;
}
.img-overlap img {
width: calc(100% + 30%);
max-width: none;
}
.img-overlap + div {
border-radius: 0.3rem;
padding: 60px;
}
}
.card,
.portfolio-image {
--bs-card-border-width: 0;
--bs-card-bg: var(--cnvs-dark-100);
}
.portfolio-item .portfolio-image, .portfolio-item .portfolio-image > a, .portfolio-item .portfolio-image img {
border-radius: var(--cnvs-border-radius);
}
.portfolio .bg-overlay-content {
text-align: center;
}
.is-expanded-menu .portfolio .bg-overlay-content::before {
--cnvs-blur-offset: 100px;
content: "";
position: absolute;
width: calc(100% - var(--cnvs-blur-offset));
height: calc(100% - var(--cnvs-blur-offset));
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: var(--cnvs-border-radius) !important;
transition-property: width,height;
transition-duration: .3s;
transition-timing-function: ease;
transform-origin: center center;
}
.portfolio .bg-overlay:not(.no-hover-blur):hover .bg-overlay-content::before {
--cnvs-blur-offset: 50px;
background-color: rgba(248, 248, 250, 0.1);
backdrop-filter: blur(1.5rem);
-webkit-backdrop-filter: blur(1.5rem);
}
.is-expanded-menu .bg-overlay .portfolio-desc {
max-width: 60%;
margin: 0 auto;
}
.bg-overlay .portfolio-desc h3 {
font-size: 1.85rem;
margin-bottom: 0;
transition: transform .3s ease;
}
.bg-overlay:hover .portfolio-desc h3 {
transform: translateY(-7px);
}
.portfolio .bg-overlay-content p {
transform: translateY(20px);
opacity: 0;
height: 0;
margin-bottom: 0;
transition: all .3s ease;
font-size: 1.25rem;
line-height: 1.4;
}
.portfolio .bg-overlay:hover p {
opacity: 1;
visibility: visible;
transform: translateY(10px);
}
/* Carousel
-----------------------------------------------------------------*/
.oc-desc {
position: absolute;
top: 5%;
left: 5%;
bottom: 16px;
background-color: #FFF;
padding: 25px;
border-radius: 3px;
height: 90%;
width: 90%;
--cnvs-blur-offset: 20px;
background-color: rgba(248, 248, 250, 0.55);
backdrop-filter: blur(1rem);
-webkit-backdrop-filter: blur(1rem);
}
.charity-card p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.charity-card h3 { font-size: 16px; }
.charity-card h3 a { color: #111; }
.charity-card .skill-progress-percent::after {
content: "\F518";
font-family: 'bootstrap-icons';
color: var(--cnvs-themecolor);
position: absolute;
right: -8px;
top: 50%;
transform: translateY( -50% );
}
.charity-card .counter.counter-inherit.counter-instant { display: inline-block; }
.owl-carousel .owl-item .oc-desc {
opacity: 0;
transform: scale(0.7);
transition: all .3s cubic-bezier(0.4, 0.2, 0.2, 1);
}
/* .owl-carousel .owl-item:hover .oc-desc, */
.owl-carousel .owl-item.active.center .oc-desc {
opacity: 1;
transform: scale(1);
}
.img-overlap+div {
padding: 40px;
}
.white-blur{
--cnvs-blur-offset: 20px;
background-color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(2.5rem);
}
.gradient-border {
--borderWidth: 2px;
position: relative;
border-radius: 0;
}
.gradient-border::after {
content: '';
position: absolute;
top: calc(-1 * var(--borderWidth));
left: calc(-1 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 2);
width: calc(100% + var(--borderWidth) * 2);
background: linear-gradient(50deg, #008BD4, #54973A);
border-radius: var(--borderWidth);
z-index: -1;
animation: animatedgradient 8s ease alternate infinite;
background-size: 300% 300%;
}
.gradient-primary,
.h-gradient-primary:hover {
background-image: linear-gradient(60deg, #008BD4 0%, #54973A 100%) !important;
}
.gradient-primary-animated,
.h-gradient-primary-animated:hover {
background-image: linear-gradient(50deg, #008BD4 0%, #54973A 100%) !important;
animation: animatedgradient 8s ease alternate infinite;
background-size: 300% 300%;
}
@keyframes animatedgradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ----------------------------------------------------------------
Flip Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Flip Cards
-----------------------------------------------------------------*/
.flip-card2 {
transform-style: preserve-3d;
perspective: 1000px;
}
.flip-card-front2, .flip-card-back2 {
background-size: cover;
background-position: center;
/*transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);*/
backface-visibility: hidden;
width: 100%;
height: 380px;
border-radius: 6px;
color: #fff;
font-size: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
.flip-card-front2, .flip-card-back2 {
transition: none;
}
}
.flip-card-front2.no-after::after, .flip-card-back2.no-after::after {
content: none;
}
.flip-card-front2::after, .flip-card-back2::after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: "";
display: block;
opacity: 0.0;
background-color: #000;
backface-visibility: hidden;
border-radius: 6px;
}
.flip-card-front2:hover .flip-card-front2, .flip-card-front2:hover .flip-card-back2, .flip-card-back2:hover .flip-card-front2, .flip-card-back2:hover .flip-card-back2 {
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
.flip-card-front2:hover .flip-card-front2, .flip-card-front2:hover .flip-card-back2, .flip-card-back2:hover .flip-card-front2, .flip-card-back2:hover .flip-card-back2 {
transition: none;
}
}
.flip-card-back2 {
background-color: #666;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.flip-card-inner2 {
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
box-sizing: border-box;
outline: 1px solid transparent;
perspective: inherit;
z-index: 2;
}
.flip-card-back2 {
transform: rotateY(180deg);
transform-style: preserve-3d;
}
.top-to-bottom .flip-card-back2 {
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.flip-card-front2, .flip-card2:hover .flip-card-back2 {
transform: rotateY(0deg);
transform-style: preserve-3d;
}
.flip-card2:hover .flip-card-front2 {
transform: rotateY(-180deg);
transform-style: preserve-3d;
}
.top-to-bottom .flip-card-front2, .top-to-bottom:hover .flip-card-back2 {
transform: rotateX(0deg);
transform-style: preserve-3d;
}
.top-to-bottom:hover .flip-card-front2 {
transform: rotateX(-180deg);
transform-style: preserve-3d;
}
.flip-card-inner2 span {
font-size: 18px;
line-height: 20px;
font-weight: 300;
}
.flip-card-inner2 p {
position: relative;
font-size: 1rem;
margin-bottom: 0;
color: rgba(255, 255, 255, 0.7);
}
.flip-card-front::after, .flip-card-back::after {
opacity: 0.1;
background-color: #000;
backface-visibility: hidden;
border-radius: 6px;
}
.selected-filter{
background-color: #e9e9e9; padding: 1px 5px 1px 10px; margin-left: -9px!important; color: var(--cnvs-themecolor) !important;
}
.selected-filter:hover{
color: #e52424 !important;
}