File: /var/www/html/sudameris.sumar.com.py/scss/_header.scss
.header-area{
// position: absolute;
left: 0;
right: 0;
width: 100%;
top: 0;
z-index: 9;
position: relative;
// border-bottom: 1px solid rgba(255,255,255,.20);
// padding-top: 28px;
@media #{$mobile_device} {
padding-top: 0;
}
@media #{$tablet_device} {
padding-top: 0;
}
.main-header-area{
// padding: 18px 0;
background: #fff;
background: transparent;
&.details_nav_bg{
background: #727272;
padding-bottom: 0;
@media #{$mobile_device} {
padding-bottom: 10px;
}
}
&.details_nav{
background: #001D38;
}
padding: 25px 100px 25px 35px;
@media #{$mobile_device} {
padding: 10px 10px;
}
@media #{$tablet_device} {
padding: 10px 10px;
}
@media #{$mid_device} {
padding: 30px 20px;
}
@media #{$large_device} {
padding: 30px 20px;
}
.logo-img{
text-align: center;
@media #{$mobile_device} {
// padding-left: 20px;
text-align: left;
}
@media #{$tablet_device} {
// padding-left: 20px;
text-align: left;
}
@media #{$mid_device} {
// padding-left: 20px;
text-align: left;
}
img{
@media #{$mobile_device} {
// padding-left: 20px;
width: 70px;
}
@media #{$tablet_device} {
// padding-left: 20px;
width: 70px;
}
}
}
.main-menu{
padding: 12px 0;
position: relative;
&::before{
position: absolute;
left: 0;
height: 35px;
top: 50%;
@include transform(translateY(-50%));
width: 1px;
background:#EAEAEA;
content: '';
left: -10%;
@media #{$mid_device} {
display: none;
}
@media #{$large_device} {
display: none;
}
}
ul{
li{
display: inline-block;
position: relative;
margin: 0 35px 0 0;
@media #{$mid_device} {
margin-right: 15px;
}
// @media #{$large_device} {
// margin-right: 15px;
// }
a{
color: #040E27;
font-size: 16px;
text-transform: capitalize;
font-weight: 400;
display: inline-block;
padding: 0px 0px 0px 0px;
font-family: $font1;
position: relative;
text-transform:capitalize;
&:hover{
color: #1EC6B6;
}
@media #{$mid_device} {
// padding: 41px 0px 10px 0px;
font-size: 15px;
}
@media #{$large_device} {
// padding: 41px 0px 10px 0px;
font-size: 15px;
}
i{
font-size: 9px;
@media #{$mobile_device}{
display: none !important;
}
@media #{$tablet_device}{
display: none !important;;
}
}
// &::before {
// position: absolute;
// content: "";
// /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#FF4A52+0,fd8e5e+100 */
// background: rgb(253,174,92); /* Old browsers */
// background: -moz-linear-gradient(top, rgba(253,174,92,1) 0%, rgba(253,142,94,1) 100%); /* FF3.6-15 */
// background: -webkit-linear-gradient(top, rgba(253,174,92,1) 0%,rgba(253,142,94,1) 100%); /* Chrome10-25,Safari5.1-6 */
// background: linear-gradient(to bottom, rgba(253,174,92,1) 0%,rgba(253,142,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF4A52', endColorstr='#fd8e5e',GradientType=0 ); /* IE6-9 */
// width: 100%;
// height: 3px;
// bottom: -33px;
// left: 0;
// opacity: 0;
// transform: scaleX(0);
// @include transition(.3s);
// }
// &:hover::before{
// opacity: 1;
// transform: scaleX(1);
// }
// &.active{
// &::before{
// opacity: 1;
// transform: scaleX(1);
// }
// }
&:hover{
// color: #FF4A52;
}
}
.submenu {
position: absolute;
left: 0;
top: 160%;
background: #fff;
width: 200px;
z-index: 2;
box-shadow: 0 0 10px rgba(0,0,0,.02);
opacity: 0;
visibility: hidden;
text-align: left;
@include transition(.6s);
li{
display: block;
a{
padding: 10px 15px;
position: inherit;
@include transition(.3s);
display: block;
color: #040E27;
font-size: 14px;
&::before{
display: none;
}
}
&:hover a{
color: #000;
}
}
}
&:hover > .submenu{
opacity: 1;
visibility: visible;
top: 225%;
}
&:hover > a::before{
opacity: 1;
transform: scaleX(1);
}
&:first-child a {
padding-left: 0;
}
}
}
}
&.sticky {
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: -70px;
left: 0;
right: 0;
z-index: 990;
transform: translateY(70px);
transition: transform 500ms ease, background 500ms ease;
-webkit-transition: transform 500ms ease, background 500ms ease;
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
// padding: 10px 150px;
background: rgba(255, 255, 255,.96);
// padding-bottom: 0;
@media #{$mobile_device} {
padding: 10px 10px;
}
@media #{$tablet_device} {
// padding: 10px 10px;
}
@media #{$mid_device} {
padding: 10px 10px;
}
@media #{$large_device} {
padding: 10px 10px;
}
.main-menu{
padding: 0;
}
.header_bottom_border{
border-bottom: none;
}
.header_bottom_border.white_border {
border-bottom: none !important;
}
// ul{
// li{
// a{
// &::before {
// position: absolute;
// content: "";
// background: #FF4A52;
// width: 100%;
// height: 3px;
// bottom: -27px;
// left: 0;
// opacity: 0;
// transform: scaleX(0);
// @include transition(.3s);
// }
// }
// }
// }
}
}
.social_wrap{
@media #{$mid_device} {
margin-right: 100px;
}
@media #{$large_device} {
margin-right: 55px;
}
.social_links{
margin-right: 4px;
li{
display: inline-block ;
a{
display: inline-block;
color: #AAB1B7;
font-size: 16px;
margin: 0 11px;
&:hover{
color: #FF4A52;
}
}
}
}
.number{
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #EAEAEA;
@media #{$large_device} {
margin-right: 0;
padding-right: 10px;
}
@media #{$tablet_device} {
border-right: 1px solid transparent ;
}
@media #{$mid_device} {
border-right: 1px solid transparent ;
}
p{
font-size: 16px;
color: #040E27;
margin-bottom: 0;
font-weight: 400;
@media #{$large_device}{
font-size: 14px;
}
i{
color: #FF4A52;
font-size: 16px;
margin-right: 5px;
}
}
}
}
.seach_icon {
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 9;
background: #FF4A52;
width: 100px;
@media #{$mobile_device} {
width: 50px;
right: 60px;
}
@media #{$tablet_device} {
width: 100px;
right: 85px;
}
@media #{$large_device}{
width: 80px;
}
a {
text-align: center;
color:#fff;
width: 100%;
height: 100%;
display: block;
i{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
}
}