| Server IP : 5.161.254.237 / Your IP : 216.73.216.242 Web Server : Apache System : Linux diamond.sialwebvps.com 4.18.0-553.8.1.el8_10.x86_64 #1 SMP Tue Jul 2 07:26:33 EDT 2024 x86_64 User : stellasp ( 1131) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/stellasp/public_html/frontend/scss/ |
Upload File : |
$boldfont:'Archivo Black', sans-serif;
$normalfont:'Archivo Narrow', sans-serif;
$dosifont:'Dosis', sans-serif;
$hover: #05ce7c;
$border-color:#e5e3e3;
$margin:15px;
.responsive-img {
width: 100%;
}
* {
margin:0px;
padding:0px;
}
body {
font-family:$normalfont;
}
ul.nav, ul.nav li, ul.nav li:before, ul, li {
list-style-type:none;
margin:0px;
padding:0px;
list-style:none !important;
}
@mixin prefix(){
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}
@mixin heading() {
text-align: center;
font-family: $boldfont;
// font-weight:700;
font-size: 50px;
color:#000;
text-transform: uppercase;
@media only screen and (max-width: 479px) {
font-size: 24px;
}
}
a {
border-bottom:none;
color:#000000;
text-decoration: none;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.logo {
// background: #283436;
padding: 0px 10px;
height: 85px;
margin-top: -17px;
img {
width:260px;
height:65px;
margin-top: 10px;
}
}
.c-nav {
font-family: $normalfont !important;
}
.c-nav_menu_button {
font-size:14px;
}
.c-nav_menu {
margin:0px;
}
.search {
height: 60px;
border: 2px solid $hover;
}
.main-banner {
padding-top:85px;
}
.c-nav_banner {
background:#fff;
}
.c-nav_menu_button {
color:#000;
}
.c-nav_burger_item, .c-nav_burger_item:nth-child(2)::after {
background: #000;
}
.heading {
padding:40px 0;
@include heading();
}
.products-wraper {
font-family:$normalfont;
a {
color:#000;
text-transform: uppercase;
&:hover {
text-decoration: none;
}
}
h2 {
margin-bottom: 0px;
padding:10px 3px 5px 3px;
font-size:20px;
}
p {
padding:0 3px;
font-size:18px;
}
&:hover a {
// transform: scale(1.2);
color:$hover;
}
img {
@include prefix();
}
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background-color:$hover;
}
.promo-video-section {
background: url(../images/promo-video.jpg) no-repeat top center;
background-size: cover;
height: 1000px;
background-attachment: fixed;
}
.main-categories-section {
margin:$margin*5 $margin*2;
}
.innovation {
img {
margin:$margin*2 0;
}
h4 {
color:#111a25;
font-family: $normalfont;
font-weight:500;
font-size: 5vw;
margin:$margin*2 0;
}
p {
color:#111a25;
font-family: $normalfont;
font-size:24px;
}
}
.owl-carousel-1 {
overflow: hidden;
}
.owl-stage {
display: flex;
}
.circle {
// position:relative;
img {
position: absolute;
top:5px;
left:-15px;
z-index: 999999 !important;
}
}
.product-thumbnail {
position:relative;
overflow:hidden;
}
.product-thumbnail .mask {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
margin-top:-200%;
/*border-radius:5px;*/
background-color: rgba(5,206,124,0.75);
}
.item:hover .mask {
margin-top:0;
}
.mask {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
transform: rotate(360deg);
}
.mask img {
-webkit-transition: .1s; transition: .5s;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.item:hover .mask img {
opacity: 1;
top: -0px;
-webkit-transform: rotate(360deg) !important;
transform: rotate(360deg) !important;
}
.products-wraper:hover {
position: relative;
@include prefix();
&:hover img {
// transform: scale(1.2);
}
}
.inside-wraper {
// height: 490px;
// background: #f4f5f4;
// overflow: hidden;
// &:hover img {
// transform: scale(1.2);
// }
}
.production-steps {
background: #05ce7c;
padding:30px 40px 100px 40px;
h4 {
font-size: 5vw;
color:#fff;
text-transform: uppercase;
}
}
footer {
margin:50px 0 0 0;
background: #05ce7c;
padding:40px 0;
.footer-top-section {
padding:20px 0 60px;
border-bottom: 1px solid #fff;
}
}
.col-new-5 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.footer-col {
padding:0 20px 0 0;
h4 {
font-size:20px;
font-family: $normalfont;
color:#fff;
text-transform: uppercase;
border-bottom: 1px solid #000;
padding:0 0 10px 0;
margin-bottom: 25px;
}
ul, li {
list-style: none;
list-style-type: none;
}
ul li a {
font-family: $normalfont;
color:#000;
font-size: 16px;
line-height:30px;
&:hover {
color:#fff;
}
}
}
.copy-right-footer {
padding:40px 0 10px 0;
.copyright {
font-family:$normalfont;
font-size: 16px;
p {
color:#000;
a {
color:#fff;
&:hover {
color:#000;
}
}
}
}
}
.social-media {
list-style-type: none;
list-style: none;
display: flex;
justify-content: start;
align-content: center;
align-items: center;
li {
margin:15px 10px 15px 0px;
display: flex;
font-size: 25px;
justify-content:center;
align-items: center;
border:1px solid #fff;
width:45px;
height: 45px;
border-radius: 360px;
a {
color:#fff;
&:hover {
color:#000;
}
}
}
}
.news-letter {
font-family:$normalfont;
color:#fff;
h5 {
color:#fff;
font-size:25px;
font-family:$normalfont;
margin:0 0 15px 0;
}
.news-letter-field {
height:50px;
width:80%;
float: left;
padding:0 5px;
font-family: $normalfont;
color:#fff;
background-color:#01b56c;
}
.signup-button {
width: 20%;
float: left;
color:#000;
background:#fff;
height:50px;
text-transform: uppercase;
font-family: $normalfont;
&:hover {
color:#fff;
background: #000;
}
}
}
#example5 {
padding:100px 0 0 0;
}
.categoies-main-wraper {
padding-bottom: 50px;
}
.categoies-main-wraper .custom-product {
margin: 15px 0;
}
.categoies-main-wraper .custom-product h2 {
text-align: center;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 15px 0;
a {
display: block;
color:#fff;
&:hover {
color:$hover;
text-decoration: none;
}
}
}
.custom-product .custom-pro-thumbnail {
width: 100%;
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.custom-product .custom-pro-thumbnail .over-lap-text {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
color: #fff;
text-align: center;
text-transform: uppercase;
}
.custom-product .custom-pro-thumbnail:hover .over-lap-text {
bottom: 0;
height: 100%;
a {
color:$hover;
}
}
.custom-product .custom-pro-thumbnail .text {
border: 2px solid #fff;
padding: 5px 20px;
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.custom-heading {
width: 100%;
font-weight: 900;
font-size: 7vw;
color: #06cf7f;
text-shadow: 2px 3px 3px #09ae6c;
text-transform: uppercase;
text-align: center;
padding-top: 1rem;
}
.filter-toggle {
font-family: $normalfont;
font-size: 22px;
}
.filter-toggle:hover {
color:#000;
text-decoration: none;
}
.contact-main-wraper {
padding:110px 0 0 0;
}
.comp-addres {
position: relative;
margin-top: 100px;
&:before {
content: "\f18e";
font-family: FontAwesome;
color: $hover;
position: absolute;
right: -15px;
top: 50px;
font-size: 25px;
}
address {
color: #aeaeae;
text-transform: uppercase;
strong {
color: $hover;
}
}
}
.comp-contacts address strong {
display: inline-block;
width: 120px;
font-weight: 600;
color: #2f2f2f;
}
.comp-email i.fa {
font-size: 50px;
display: inline-block;
}
.comp-email a {
color:$hover;
}
.company-msg h6 {
color: #353535;
text-transform: uppercase;
margin-bottom: 15px;
font-size: 35px;
padding-left: 10px;
}
.comp-fileds {
width: 50%;
padding: 0 10px;
float: left;
}
.sendbtn {
color: #4c4c4c;
font-size: 30px;
position: relative;
display: block;
text-align: right;
}
.sendbtn span {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
background: #fff;
padding-top: 0px;
border-radius: 360px;
}
.contactus-filed-wraper {
padding: 100px 0;
background: #f0f0f0;
}
.comp-contacts:before {
content: "\f18e";
font-family: FontAwesome;
color: $hover;
position: absolute;
right: -15px;
top: 0px;
font-size: 25px;
}
@media (max-width:599px) {
.logo {
// top:15px;
margin-top:0px;
// background: #fff;
padding: 0px 10px;
img {
width:260px;
height:65px;
}
}
.inside-wraper {
height: auto !important;
}
.production-steps {
margin-bottom: 20px;
}
}
.contactus-inner-banner {
padding-top:120px;
position: relative;
}
.brands-history-sec {
padding-top:120px;
}
.banner-text {
position: absolute;
top: 40%;
bottom: 50%;
width: 100%;
h4 {
text-align: center;
font-size: 5vw;
color: #fff;
text-transform: uppercase;
}
}
.MagicZoom, figure.mz-figure {
width: 50%;
margin:10px auto !important;
display: block !important;
}
figure.mz-figure {
img {
margin:0 auto !important;
}
}
.different-views {
width: 320px;
margin:0px auto;
ul>li {
float: left;
width:75px;
margin:5px 0 0 5px;
}
}
.pro-description {
margin:25px 0;
padding:20px 0;
.large-product-title {
width: 100%;
h2 {
padding:0px;
font-size: 25px;
text-transform: uppercase;
display: block;
}
}
}
.breadcrums-section {
margin-top:86px;
}
.inquiry-btn {
background:$hover !important;
border:1px solid $hover;
}
.breadcrumb, ul, ol {
margin:0px;
}