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.
1078 lines
21 KiB
1078 lines
21 KiB
/*----------------------------------------*/
|
|
/* 01. Theme default CSS
|
|
/*----------------------------------------*/
|
|
|
|
/*-- Google Font --*/
|
|
@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900&display=swap');
|
|
|
|
/*-- Common Style --*/
|
|
*, *::after, *::before {
|
|
box-sizing: border-box;
|
|
}
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
body{
|
|
background-color: $white;
|
|
line-height: 23px;
|
|
font-size: 15px;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
visibility: visible;
|
|
font-family: $body-font;
|
|
color: $body-color;
|
|
position: relative;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: $heading-color;
|
|
font-family: $heading-font;
|
|
font-weight: 400;
|
|
margin-top: 0;
|
|
}
|
|
h1 {
|
|
font-size: 36px;
|
|
line-height: 42px;
|
|
}
|
|
h2 {
|
|
font-size: 30px;
|
|
line-height: 36px;
|
|
|
|
}
|
|
h3 {
|
|
font-size: 24px;
|
|
line-height: 30px;
|
|
}
|
|
h4 {
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
}
|
|
h5 {
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
}
|
|
h6 {
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
a, button {
|
|
color: inherit;
|
|
display: inline-block;
|
|
line-height: inherit;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
a, button, img, input, span {
|
|
transition: all 0.3s ease 0s;
|
|
}
|
|
*:focus {
|
|
outline: none !important;
|
|
}
|
|
a:focus {
|
|
color: inherit;
|
|
outline: none;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
button, input[type="submit"] {
|
|
cursor: pointer;
|
|
}
|
|
ul {
|
|
list-style: outside none none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
button:focus,
|
|
a:focus{
|
|
outline: none;
|
|
}
|
|
/*--
|
|
- Common Classes
|
|
-----------------------------------------*/
|
|
.fix {
|
|
overflow:hidden
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.clear{
|
|
clear: both;
|
|
}
|
|
.section {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
@media #{$large-mobile}{
|
|
.container {
|
|
width: 450px;
|
|
}
|
|
}
|
|
@media #{$small-mobile}{
|
|
.container {
|
|
width: 300px;
|
|
}
|
|
}
|
|
|
|
.bold {
|
|
font-weight: 700;
|
|
}
|
|
.semi-bold {
|
|
font-weight: 600;
|
|
}
|
|
.medium {
|
|
font-weight: 500;
|
|
}
|
|
.light {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
.uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
.text-black {
|
|
color: #333 !important;
|
|
}
|
|
.no-gutters {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
& > .col, & > [class*="col-"] {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/*-- Container Fluid --*/
|
|
.container-fluid {
|
|
padding: 0 120px;
|
|
|
|
// Responsive
|
|
@media #{$laptop-device}{
|
|
padding: 0 15px;
|
|
}
|
|
@media #{$desktop-device}{
|
|
padding: 0 15px;
|
|
}
|
|
@media #{$tablet-device}{
|
|
padding: 0 15px;
|
|
}
|
|
@media #{$large-mobile}{
|
|
padding: 0 15px;
|
|
width: 450px;
|
|
}
|
|
@media #{$small-mobile}{
|
|
padding: 0 15px;
|
|
width: 320px;
|
|
}
|
|
}
|
|
.footer-section {
|
|
& .container-fluid {
|
|
|
|
// Responsive
|
|
@media #{$laptop-device}{
|
|
padding: 0 15px;
|
|
width: 1200px;
|
|
}
|
|
@media #{$desktop-device}{
|
|
padding: 0 15px;
|
|
width: 960px;
|
|
}
|
|
@media #{$tablet-device}{
|
|
padding: 0 15px;
|
|
width: 750px;
|
|
}
|
|
@media #{$large-mobile}{
|
|
padding: 0 15px;
|
|
width: 450px;
|
|
}
|
|
@media #{$small-mobile}{
|
|
padding: 0 15px;
|
|
width: 320px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*--
|
|
- Custom Container
|
|
------------------------------------------*/
|
|
@for $i from 1 through 12 {
|
|
.container-ext-#{5 * $i} {
|
|
max-width: 1200px + ((5 * $i) * 2);
|
|
width: 100%;
|
|
}
|
|
}
|
|
/*--
|
|
- Custom Row
|
|
------------------------------------------*/
|
|
@for $i from 1 through 40 {
|
|
.row-#{1 * $i} {
|
|
margin-left: -1px * $i;
|
|
margin-right: -1px * $i;
|
|
|
|
// Responsive
|
|
@media #{$laptop-device}{
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
@media #{$desktop-device}{
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
@media #{$tablet-device}{
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
@media #{$large-mobile}{
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
|
|
& > [class*="col"] {
|
|
padding-left: 1px * $i;
|
|
padding-right: 1px * $i;
|
|
|
|
// Responsive
|
|
@media #{$laptop-device}{
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
@media #{$desktop-device}{
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
@media #{$tablet-device}{
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
@media #{$large-mobile}{
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*--
|
|
- Margin & Padding
|
|
-----------------------------------------*/
|
|
/*-- Margin Top --*/
|
|
@for $i from 1 through 40 {
|
|
.mt-#{5 * $i}{margin-top: 5px * $i;}
|
|
}
|
|
.mt-5 {
|
|
margin-top: 5px !important;
|
|
}
|
|
|
|
/*-- Margin Bottom --*/
|
|
@for $i from 1 through 40 {
|
|
.mb-#{5 * $i}{margin-bottom: 5px *$i;}
|
|
}
|
|
.mb-5 {
|
|
margin-bottom: 5px !important;
|
|
}
|
|
|
|
/*-- Margin Left --*/
|
|
@for $i from 1 through 40 {
|
|
.ml-#{5 * $i}{margin-left: 5px * $i;}
|
|
}
|
|
.ml-5 {
|
|
margin-left: 5px !important;
|
|
}
|
|
|
|
/*-- Margin Right --*/
|
|
@for $i from 1 through 40 {
|
|
.mr-#{5 * $i}{margin-right: 5px *$i;}
|
|
}
|
|
.mr-5 {
|
|
margin-right: 5px !important;
|
|
}
|
|
|
|
/*-- Padding Top --*/
|
|
@for $i from 1 through 40 {
|
|
.pt-#{5 * $i}{padding-top: 5px *$i;}
|
|
}
|
|
.pt-5 {
|
|
padding-top: 5px !important;
|
|
}
|
|
|
|
/*-- Padding Bottom --*/
|
|
@for $i from 1 through 40 {
|
|
.pb-#{5 * $i}{padding-bottom: 5px *$i;}
|
|
}
|
|
.pb-5 {
|
|
padding-bottom: 5px !important;
|
|
}
|
|
|
|
/*-- Padding Left --*/
|
|
@for $i from 1 through 40 {
|
|
.pl-#{5 * $i}{padding-left: 5px *$i;}
|
|
}
|
|
.pl-5 {
|
|
padding-left: 5px !important;
|
|
}
|
|
|
|
/*-- Padding Right --*/
|
|
@for $i from 1 through 40 {
|
|
.pr-#{5 * $i}{padding-right: 5px *$i;}
|
|
}
|
|
.pr-5 {
|
|
padding-right: 5px !important;
|
|
}
|
|
/*--
|
|
- Input Placeholder
|
|
-----------------------------------------*/
|
|
input:-moz-placeholder, textarea:-moz-placeholder {
|
|
opacity: 1;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
}
|
|
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
|
|
opacity: 1;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
}
|
|
input::-moz-placeholder, textarea::-moz-placeholder {
|
|
opacity: 1;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
}
|
|
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
|
|
opacity: 1;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
}
|
|
|
|
/*--
|
|
Scroll Up
|
|
-----------------------------------------*/
|
|
#scrollUp {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: $theme-color;
|
|
border: 3px solid #eeeeee;
|
|
color: $white;
|
|
right: 20px;
|
|
bottom: 60px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
border-radius: 50px;
|
|
z-index: 9811 !important;
|
|
@media #{$large-mobile}{
|
|
display: none !important;
|
|
}
|
|
& i {
|
|
display: block;
|
|
line-height: 34px;
|
|
font-size: 22px;
|
|
}
|
|
&:hover {
|
|
& i {
|
|
animation-name: fadeInUp;
|
|
animation-duration:1s;
|
|
animation-fill-mode:both;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*--
|
|
- Background Color
|
|
------------------------------------------*/
|
|
.bg-theme {
|
|
background-color: $theme-color;
|
|
}
|
|
.bg-theme-two {
|
|
background-color: $theme-color-2;
|
|
}
|
|
.bg-gray {
|
|
background-color: #f6f7f8;
|
|
}
|
|
.border-bm-1 {
|
|
border-bottom: 1px solid #224A5D;
|
|
}
|
|
img.mfp-img {
|
|
background-color: #f6f7f8;
|
|
padding: 0;
|
|
margin: 40px auto;
|
|
}
|
|
|
|
/*--
|
|
- Social Color
|
|
------------------------------------------*/
|
|
.facebook {
|
|
background-color: #3B5997;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #3B5997;
|
|
color: $white;
|
|
}
|
|
}
|
|
.twitter {
|
|
background-color: #1DA1F2;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #1DA1F2;
|
|
color: $white;
|
|
}
|
|
}
|
|
.linkedin {
|
|
background-color: #0077B5;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #0077B5;
|
|
color: $white;
|
|
}
|
|
}
|
|
.pinterest {
|
|
background-color: #BD081C;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #BD081C;
|
|
color: $white;
|
|
}
|
|
}
|
|
.google-plus {
|
|
background-color: #D11718;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #D11718;
|
|
color: $white;
|
|
}
|
|
}
|
|
.behance {
|
|
background-color: #005CFF;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #005CFF;
|
|
color: $white;
|
|
}
|
|
}
|
|
.dribbble {
|
|
background-color: #E84C88;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #E84C88;
|
|
color: $white;
|
|
}
|
|
}
|
|
.github {
|
|
background-color: #323131;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #323131;
|
|
color: $white;
|
|
}
|
|
}
|
|
.instagram {
|
|
background-color: #DC3472;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #DC3472;
|
|
color: $white;
|
|
}
|
|
}
|
|
.medium {
|
|
background-color: #00AB6C;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #00AB6C;
|
|
color: $white;
|
|
}
|
|
}
|
|
.reddit {
|
|
background-color: #FF4501;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #FF4501;
|
|
color: $white;
|
|
}
|
|
}
|
|
.skype {
|
|
background-color: #00AFF0;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #00AFF0;
|
|
color: $white;
|
|
}
|
|
}
|
|
.slack {
|
|
background-color: #63C1A0;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #63C1A0;
|
|
color: $white;
|
|
}
|
|
}
|
|
.snapchat {
|
|
background-color: #FFFC00;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #FFFC00;
|
|
color: $white;
|
|
}
|
|
}
|
|
.tumblr {
|
|
background-color: #01273A;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #01273A;
|
|
color: $white;
|
|
}
|
|
}
|
|
.vimeo {
|
|
background-color: #00ADEF;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #00ADEF;
|
|
color: $white;
|
|
}
|
|
}
|
|
.youtube {
|
|
background-color: #FE0002;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: #FE0002;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
/*-- Tab Content & Pane Fix --*/
|
|
.tab-content {
|
|
width: 100%;
|
|
& .tab-pane {
|
|
display: block;
|
|
height: 0;
|
|
max-width: 100%;
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
&.active {
|
|
height: auto;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
overflow: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*--
|
|
- Product Full Width
|
|
------------------------------------------*/
|
|
.full-width-product-wrap {
|
|
& > [class*="col-"], & > [class*="col"] {
|
|
&:nth-child(1) {
|
|
flex: 1 0 450px;
|
|
max-width: 450px;
|
|
|
|
// Responsive
|
|
@media #{$laptop-device}{
|
|
flex: 1 0 350px;
|
|
max-width: 350px;
|
|
}
|
|
@media #{$desktop-device}{
|
|
flex: 1 0 350px;
|
|
max-width: 350px;
|
|
}
|
|
@media #{$tablet-device}{
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
@media #{$large-mobile}{
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
flex: 0 0 calc(100% - 450px);
|
|
max-width: calc(100% - 450px);
|
|
|
|
// Responsive
|
|
@media #{$laptop-device}{
|
|
flex: 0 0 calc(100% - 350px);
|
|
max-width: calc(100% - 350px);
|
|
}
|
|
@media #{$desktop-device}{
|
|
flex: 0 0 calc(100% - 350px);
|
|
max-width: calc(100% - 350px);
|
|
}
|
|
@media #{$tablet-device}{
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
@media #{$large-mobile}{
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.desktop-full-width {
|
|
& > [class*="col-"], & > [class*="col"] {
|
|
&:nth-child(1) {
|
|
|
|
// Responsive
|
|
@media #{$desktop-device}{
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
|
|
// Responsive
|
|
@media #{$desktop-device}{
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.laptop-3-column {
|
|
& > [class*="col-"], & > [class*="col"] {
|
|
|
|
// Responsive
|
|
@media #{$laptop-device} {
|
|
flex: 1 0 33.3333%;
|
|
max-width: 33.3333%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*--
|
|
- Page Pagination
|
|
------------------------------------------*/
|
|
.page-pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin: -5px -8px;
|
|
& li {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
font-family: $heading-font;
|
|
color: $heading-color;
|
|
text-align: center;
|
|
margin: 5px 5px;
|
|
& a {
|
|
color: $heading-color;
|
|
border: 1px solid $theme-color;
|
|
border-radius: 50px;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
& i {
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
// Responsive
|
|
@media #{$small-mobile}{
|
|
font-size: 14px;
|
|
& a {
|
|
padding: 9px;
|
|
width: 35px;
|
|
height: 35px;
|
|
& i {
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
& a {
|
|
color: $white;
|
|
background-color: $theme-color;
|
|
}
|
|
}
|
|
&.active {
|
|
& a {
|
|
color: $white;
|
|
background-color: $theme-color;
|
|
}
|
|
}
|
|
&:first-child {
|
|
& a {
|
|
color: $heading-color;
|
|
width: 40px;
|
|
height: 40px;
|
|
&:hover {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
&:last-child {
|
|
& a {
|
|
color: $heading-color;
|
|
width: 40px;
|
|
height: 40px;
|
|
&:hover {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/*--
|
|
- Page Banner Section
|
|
------------------------------------------*/
|
|
|
|
/*-- Breadcrumb --*/
|
|
.breadcrumb {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
& h2 {
|
|
color: $white;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
& ul {
|
|
& li.breadcrumb-item {
|
|
display: inline-flex;
|
|
padding: 0 8px;
|
|
position: relative;
|
|
color: $white;
|
|
|
|
// Before Selector
|
|
&::before {
|
|
position: absolute;
|
|
right: -2px;
|
|
top: 50%;
|
|
content: "";
|
|
width: 4px;
|
|
height: 1px;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
background-color: $white;
|
|
}
|
|
|
|
// Last Child
|
|
&:last-child {
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
& a {
|
|
display: block;
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
color: #f1f1f1;
|
|
|
|
// Hover
|
|
&:hover {
|
|
color: $heading-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*-- Category Page Title --*/
|
|
.category-page-title {
|
|
& h4 {
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: $heading-color;
|
|
}
|
|
}
|
|
|
|
/*--
|
|
- Button
|
|
------------------------------------------*/
|
|
.btn {
|
|
border: 1px solid #626262;
|
|
padding: 10px 40px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: $heading-color;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: all 0.3s ease 0s;
|
|
|
|
&:focus{
|
|
outline: none;
|
|
}
|
|
|
|
// Before & After Selector
|
|
&::before {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
height: 0;
|
|
width: 100%;
|
|
background-color: $heading-color;
|
|
transition: all 0.3s ease 0s;
|
|
content: "";
|
|
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
// Hover
|
|
&:hover {
|
|
color: $theme-color-2;
|
|
|
|
&::before {
|
|
height: 300%;
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
|
|
// Hover
|
|
&.hover-theme {
|
|
|
|
// Before & After Selector
|
|
&::before {
|
|
background-color: $theme-color;
|
|
}
|
|
&:hover {
|
|
border-color: $theme-color;
|
|
color: $heading-color;
|
|
|
|
&::before {
|
|
height: 300%;
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
&.btn-circle {
|
|
border-radius: 50px;
|
|
}
|
|
&.btn-radius {
|
|
border-radius: 5px;
|
|
}
|
|
&.btn-square {
|
|
border-radius: 0;
|
|
}
|
|
|
|
&.btn-text {
|
|
border-radius: 0;
|
|
padding: 0;
|
|
line-height: 20px;
|
|
border: none;
|
|
&::before {
|
|
display: none;
|
|
}
|
|
// Hover
|
|
&.hover-theme {
|
|
&:hover {
|
|
color: $theme-color;
|
|
}
|
|
}
|
|
}
|
|
&.btn-underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&.btn-large {
|
|
padding: 15px 40px;
|
|
font-size: 16px;
|
|
|
|
// Responsive
|
|
@media #{$large-mobile}{
|
|
font-size: 12px;
|
|
padding: 7px 25px;
|
|
}
|
|
@media #{$small-mobile}{
|
|
font-size: 11px;
|
|
padding: 4px 15px;
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
&.btn-medium {
|
|
padding: 7px 20px;
|
|
font-size: 12px;
|
|
|
|
// Responsive
|
|
@media #{$large-mobile}{
|
|
font-size: 12px;
|
|
padding: 7px 25px;
|
|
}
|
|
@media #{$small-mobile}{
|
|
font-size: 11px;
|
|
padding: 4px 15px;
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
&.btn-small {
|
|
padding: 4px 15px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
// Responsive
|
|
@media #{$large-mobile}{
|
|
font-size: 12px;
|
|
padding: 7px 25px;
|
|
}
|
|
@media #{$small-mobile}{
|
|
font-size: 11px;
|
|
padding: 4px 15px;
|
|
}
|
|
}
|
|
|
|
/*--
|
|
- Blockquote
|
|
------------------------------------------*/
|
|
.blockquote {
|
|
margin: 35px 0;
|
|
max-width: 660px;
|
|
background-color: $theme-color;
|
|
padding: 30px 40px;
|
|
position: relative;
|
|
color: $white;
|
|
font-size: 15px;
|
|
font-style: italic;
|
|
|
|
// Responsive
|
|
@media #{$large-mobile}{
|
|
padding: 30px 40px;
|
|
}
|
|
@media #{$small-mobile}{
|
|
padding: 20px;
|
|
}
|
|
& p {
|
|
font-size: 16px;
|
|
line-height: 25px;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
.blockquote-2 {
|
|
& p {
|
|
&::first-letter {
|
|
font-size: 48px;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.section-title {
|
|
& h2 {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
margin: -5px 0 0 0;
|
|
@media #{$small-mobile}{
|
|
font-size: 26px;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
& p {
|
|
max-width: 640px;
|
|
margin-top: 16px;
|
|
margin-bottom: 0;
|
|
@media #{$large-mobile}{
|
|
br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&.text-center {
|
|
& p {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
&.text-right {
|
|
& p {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
.title-2 {
|
|
& h4 {
|
|
color: $theme-color;
|
|
font-weight: 600;
|
|
}
|
|
& h3 {
|
|
color: $theme-color;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.justify-content-between {
|
|
& [class*="col"], & [class*="col-"] {
|
|
flex-grow: 0;
|
|
}
|
|
}
|
|
/*-- Overlay styles --*/
|
|
[data-overlay],
|
|
[data-secondary-overlay],
|
|
[data-black-overlay],
|
|
[data-white-overlay] {
|
|
position: relative;
|
|
}
|
|
|
|
[data-overlay]>div,
|
|
[data-overlay]>*,
|
|
[data-secondary-overlay]>div,
|
|
[data-secondary-overlay]>*,
|
|
[data-black-overlay]>div,
|
|
[data-black-overlay]>*,
|
|
[data-white-overlay]>div,
|
|
[data-white-overlay]>* {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
[data-overlay]:before,
|
|
[data-secondary-overlay]:before,
|
|
[data-black-overlay]:before,
|
|
[data-white-overlay]:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
[data-overlay]:before {
|
|
background-color: $theme-color;
|
|
}
|
|
|
|
[data-secondary-overlay]:before {
|
|
background-color: #6564db;
|
|
}
|
|
|
|
[data-black-overlay]:before {
|
|
background-color: #000000;
|
|
}
|
|
|
|
[data-white-overlay]:before {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
@for $i from 1 through 10 {
|
|
|
|
[data-overlay="#{$i}"]:before,
|
|
[data-secondary-overlay="#{$i}"]:before,
|
|
[data-black-overlay="#{$i}"]:before,
|
|
[data-white-overlay="#{$i}"]:before {
|
|
opacity: #{$i * 0.10};
|
|
}
|
|
} |