/***************************************************
Section: global style
Created:
***************************************************/
html {
overflow-y: scroll;
}
html, body {
height: 100%;
}
body{
@media (max-width: 767px) {
font-size: 16px;
}
}
a{
color: #1874c3;
&:hover,&:focus{
color: #0b3356;
}
}
h1,h2,h3,h4,h5{
color: #000;
}
hr{
margin: 24px 0;
}
h4{
margin-bottom: 22px;
}
h5{
margin-bottom: 9px;
}
h2,h3, h4, h5{
&:first-child{
margin-top: 0;
}
}
/* ------ Section Form ----------- */
input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email] {
border: 1px solid #bdbdbd;
background-color: #fff;
@media (min-width: 900px) {
height: 64px;
}
}
textarea{
width: 100%;
height: 175px;
resize:vertical;
}
/* ------ Custom Font ----------- */
.site-header .header-navigation ul > li > a, table > thead > tr > td, .control-label{ font-family: 'robotomedium'; font-weight: normal !important; font-style: normal; }
h2, h3, h4, h5, .header-delivery span, .header-tell a, .btn, .link-more, .field_set legend, .table-type1 var, .table-type1 a, .tag, .table-type1 td:before, .g-card-link, .g-card-info h5, .bg-about-text, .about-item .about-link, .product-title{ font-family: 'robotobold'; font-weight: normal !important; font-style: normal; }
.form-newsletter .form-control, .header-form .form-control{ font-family: 'robotoitalic'; font-weight: normal !important; font-style: normal; }
.bg-hero-text, .about-header h2, .productsAmount .item var{ font-family: 'robotoblack'; font-weight: normal !important; font-style: normal; }
.g-tooltip{ font-family: Arial, sans-serif; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
.clear{
clear: both;
}
.push {
clear: both;
@media (min-width: 800px) {
height: @footer-height;
}
}
.container{
max-width: @content-width;
width: 100%;
}
input, textarea {
.placeholder(#9E9E9E);
}
.site-header{
position: relative;
z-index: 2;
font-size: 0;
padding-top: 16px;
.container{
position: relative;
}
img{
margin: 0;
}
.navbar-header{
@media (min-width: 900px) {
padding-top: 25px;
padding-right: 0;
}
@media (max-width: 480px) {
width: 100%;
}
}
.logo{
display: inline-block;
vertical-align: middle;
@media (max-width: 480px) {
display: block;
width: 80%;
margin: 0 auto;
}
}
.header-navigation{
margin-top: 18px;
background: #0b3356;
.box-shadow(~"5px 9px 20px rgba(0,0,0,.3)");
.btn-menu{
@media (max-width: 767px) {
display: block;
margin: 0 auto;
width: 75px;
color: #ffffff;
font-size: @font-size-base;
font-weight: 700;
text-decoration: none;
padding: 18px 0;
background: transparent;
&:hover, &:focus{
background: #fabd39;
color: @text-color;
}
}
}
ul{
margin: 0;
}
.list-unstyled{
width: 100%;
position: relative;
font-size: @font-size-base;
line-height: 1.277777777777778em; /* 23px */
@media (max-width: 767px) {
display: none;
&.open{
display: block;
max-height: 250px;
overflow-y: scroll;
}
}
@media (min-width: 768px) {
max-width: @content-width;
margin: 0 -16px 0 -12px;
}
>li{
vertical-align: middle;
&.lm-nav-firstitem{
a{
&:before{
display: none;
}
}
}
@media (min-width: 768px) {
float: left;
}
@media (min-width: 950px) {
padding: 0 16px 0 12px;
}
> a{
color: #ffffff;
font-size: @font-size-base;
text-decoration: none;
display: block;
padding: 18px 0;
@media (max-width: 767px) {
padding: 5px;
}
@media (min-width: 900px) {
padding: 24px 0;
}
span{
display: inline-block;
vertical-align: top;
position: relative;
padding: 0 10px;
@media (min-width: 900px) {
padding: 0 20px;
}
&:after{
.horisontal-center();
bottom: -6px;
border-bottom: 5px solid transparent;
width: 100%;
content: '';
}
}
&:hover, &:focus{
color: #fff;
span{
&:after{
border-color: #e8bc56;
}
}
}
}
&:hover, &:focus, &.hover{
> a{
// background: #fabd39;
color: #fff;
&:before{
border-color: transparent;
}
}
&.lm-nav-parentitem{
> a{
position: relative;
&:after{
content: '';
width: 100%;
height: 1px;
top: 100%;
background: #fabd39;
display: block;
position: absolute;
left: 0;
z-index: 1000;
}
}
}
}
}
}
}
}
.site-footer {
padding-top: 60px;
padding-bottom: 44px;
font-size: @font-size-base;
@media (min-width: 800px) {
//height: ceil(@footer-height - 10 - 18);
}
img{
margin: 0;
}
hr{
margin-bottom: 22px;
}
}
/* ------ Section Header Login ----------- */
.header-login{
@media (min-width: 767px) {
float: right;
margin-right: -20px;
}
@media (max-width: 767px) {
display: none;
}
font-size: 16px;
line-height: 1.277777777777778em; /* 23px */
}
.header-login-text{
padding: 20px;
display: block;
vertical-align: middle;
color: #fff;
text-decoration: none;
background: rgba(0,0,0,.35);
span{
font-size: 22px;
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
margin-right: 4px;
border: 1px solid #fff;
overflow: hidden;
.fa{
vertical-align: middle;
}
@media (max-width: 900px) {
display: none;
}
}
&:hover,&:focus{
background: #236eae;
color: #fff;
}
}
.header-delivery{
font-size: 14px;
line-height: 23px;
@media (min-width: 768px) {
display: inline-block;
vertical-align: top;
}
@media (max-width: 767px) {
display: none;
}
padding: 0 20px;
span{
text-transform: uppercase;
}
}
.color-type1{ color: #e4a51e; }
/* ------ Buttons ----------- */
.btn{
font-size: 1em;
padding: 13px 10px 12px;
max-width: 258px;
width: 100%;
text-decoration: none;
letter-spacing: 1px;
@media (max-width: 767px) {
max-width: 230px;
}
}
.btn-primary{
&:hover, &:focus{
background: #236eae;
border-color: #236eae;
color: #fff;
}
}
.btn-warning{
background: #f9b702;
border-color: #f9b702;
color: #000;
&:hover, &:focus{
background: #e1e1e1;
border-color: #e1e1e1;
color: #000;
}
}
/* ------ Section Header Tell ----------- */
.header-tell{
font-size: 14px;
line-height: 23px;
@media (min-width: 768px) {
display: inline-block;
vertical-align: top;
padding-left: 14px;
}
a{
padding: 0 0 0 7px;
text-decoration: none;
@media (min-width: 767px) {
font-size: 1.428571428571429em; /* 20px */
}
cursor: default;
color: #333;
}
}
/* ------ Section Header Top Right ----------- */
.header-top-right{
@media (min-width: 767px) {
margin-top: 19px;
}
@media (max-width: 990px) {
padding-left: 20px;
padding-right: 20px;
}
&:first-child{
margin-top: 0;
}
&:last-child{
@media (min-width: 990px) {
width: 64%;
}
}
.btn{
font-size: 18px;
text-decoration: none;
@media (min-width: 990px) {
max-width: 130px;
}
}
}
.input-group{
.form-control{
.box-sizing(border-box);
height: auto;
border-right: none;
}
}
.form-group{
margin-bottom: 19px;
}
/* ------ Section Header Form ----------- */
.header-form{
@media (max-width: 767px) {
display: none;
}
.input-group-btn{
font-size: 1em;
}
.form-group{
float: left;
margin-bottom: 0;
&:first-child{
width: 75%;
@media (min-width: 1025px) {
padding-left: 10px;
width: 81%;
}
}
&:last-child{
padding-left: 14px;
float: right;
width: 25%;
@media (min-width: 1025px) {
width: 19%;
}
text-align: right;
}
}
.form-horizontal .control-label{
padding-top: 15px;
}
.form-control{
height: 47px;
.placeholder(#000);
}
.input-group{
font-size: 1em;
float: left;
width: 100%;
.btn{
width: 51px;
border-radius: 0;
}
}
.btn{
@media (max-width: 990px) {
width: 93%;
}
padding: 10px;
height: 47px;
vertical-align: top;
}
}
/* ------ Section Content ----------- */
.content{
padding-top: 30px;
padding-bottom: 53px;
@media (max-width: 767px) {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
