You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
3.7 KiB
189 lines
3.7 KiB
@import "config";
|
|
@import "../../zcore/assets/scss/core";
|
|
|
|
/* Preloader */
|
|
#preloader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
background-color: map-get($colors, primary);
|
|
transition: opacity 0.8s cubic-bezier(.77, 0, .18, 1);
|
|
opacity: 0;
|
|
&.loading{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
// patches for elixir
|
|
|
|
|
|
|
|
.navbar-elixir{
|
|
background: rgba(255,255,255,0.85);
|
|
margin-bottom: -59px;
|
|
color: rgb(42, 56, 85);
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.15);
|
|
}
|
|
.znav-container{
|
|
.dropdown, .megamenu{ @include mq($from: desktop) { box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08); } }
|
|
|
|
a:not(.btn){
|
|
color: map-get($colors, primary);
|
|
}
|
|
}
|
|
|
|
.znav-container .has-dropdown .dropdown{
|
|
min-width: 178px;
|
|
}
|
|
|
|
|
|
a{font-weight: 600;}
|
|
|
|
h1, h2, h3, h4, h5, h6{
|
|
color: map-get($colors, primary);
|
|
font-weight: 700;
|
|
}
|
|
h1{letter-spacing: -0.25rem;}
|
|
// {letter-spacing: -0.2rem;}
|
|
h2, h3{letter-spacing: -0.15rem;}
|
|
h4, h5{letter-spacing: -0.05rem;}
|
|
|
|
hr{
|
|
background-color: map-get($colors, primary);
|
|
border-width: 0;
|
|
margin-top: map-get($spacers, 3);
|
|
opacity: .8;
|
|
height: 3px;
|
|
border-radius: 1.5px;
|
|
&.muted{
|
|
height: 1px;
|
|
border-radius: 0.5px;
|
|
opacity: .15;
|
|
}
|
|
}
|
|
|
|
|
|
.hoverbox-bg{background-color: rgba(42, 56, 85, 0.9);}
|
|
|
|
.dropcap:first-letter{color: map-get($colors, primary); font-weight: 600;}
|
|
|
|
p{color: map-get($colors, 5);}
|
|
|
|
.btn{font-weight: 700 !important;}
|
|
.btn-outline-primary { @include button-outline-variant(map-get($colors, primary)); }
|
|
// .btn-primary{color: map-get($colors, warning)}
|
|
.btn-warning{
|
|
color: map-get($colors, primary);
|
|
@include hover-focus {
|
|
color: map-get($colors, primary);
|
|
}
|
|
}
|
|
|
|
|
|
// Bootstrap
|
|
.breadcrumb {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: .75rem 1rem .75rem 0rem;
|
|
margin-bottom: 1rem;
|
|
list-style: none;
|
|
background-color: transparent;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.breadcrumb-item.active {
|
|
color: #ffffff;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.breadcrumb-item+.breadcrumb-item::before {
|
|
display: inline-block;
|
|
padding-right: .5rem;
|
|
padding-left: .5rem;
|
|
color: #ffffff;
|
|
font-size: inherit;
|
|
line-height: 1;
|
|
font-family: FontAwesome;
|
|
content: "\f101";
|
|
}
|
|
|
|
|
|
|
|
// About Drirection Caret
|
|
.elixir-caret{
|
|
position: absolute;
|
|
background-color: #fff;
|
|
top: 50%;
|
|
left: 50%;
|
|
height: 25px;
|
|
width: 25px;
|
|
z-index: 99;
|
|
transform: translate3d(-50%, -50%, 0) rotate(45deg);
|
|
}
|
|
|
|
|
|
// Modal Video Background color Fix
|
|
#videoModal .embed-responsive {
|
|
background-color: black;
|
|
}
|
|
|
|
|
|
// Elixir Special Play Button
|
|
.btn-elixir-play{
|
|
display: inline-block;
|
|
height: 80px;
|
|
width: 80px;
|
|
line-height: 80px;
|
|
background-color: map-get($colors, white);
|
|
border-radius: 100%;
|
|
position: relative;
|
|
font-size: 1.414rem;
|
|
color: map-get($colors, primary);
|
|
margin-bottom: 40px;
|
|
&:before{
|
|
content: '';
|
|
height: 100px;
|
|
width: 100px;
|
|
position: absolute;
|
|
left: -10px;
|
|
top: -10px;
|
|
border: 10px solid rgba(map-get($colors, white), 0.5);
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
|
|
// Elixir Special class
|
|
.column-lg-2{
|
|
@include mq($from: desktop) {
|
|
column-count: 2;
|
|
column-gap: 3em;
|
|
}
|
|
}
|
|
|
|
.blockquote{
|
|
position: relative;
|
|
padding-left: 50px;
|
|
&:after{
|
|
content: "";
|
|
background: url("../images/icon-quote.svg") no-repeat;
|
|
background-size: contain;
|
|
width: 50px;
|
|
height: 50px;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: -5px;
|
|
}
|
|
}
|
|
|
|
.background-holder.overlay.overlay-elixir:before{
|
|
background-color: rgba(44, 56, 85, 0.70);
|
|
}
|
|
|
|
.animated {
|
|
animation-duration : 0ms ;
|
|
animation-fill-mode : both ;
|
|
}
|