File: /home/pengthai/domains/pengthaicurry.com/public_html/css/style.css
html{ font-size:14px;}
@font-face {
font-family: 'BigCaslon';
src: url('fonts/BigCaslon.eot');
src: url('fonts/BigCaslon.eot?#iefix') format('embedded-opentype'),
url('fonts/BigCaslon.woff') format('woff'),
url('fonts/BigCaslon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
unicode-range: U+41-5A, U+61-7A, U+C0-FF;
}
@font-face {
font-family: 'JS Chusri Normal';
src: url('fonts/JS Chusri Normal.eot');
src: url('fonts/JS Chusri Normal.eot?#iefix') format('embedded-opentype'),
url('fonts/JS Chusri Normal.woff') format('woff'),
url('fonts/JS Chusri Normal.ttf') format('truetype');
font-weight: normal;
font-style: normal;
unicode-range: U+0E00–U+0E7F;
}
body{
font-family: 'BigCaslon';
cursor: default;
position: relative;
line-height:normal;
color: #010101;
font-size: 1rem;
letter-spacing:1px;
}
.fontsAll{
font-family: 'BigCaslon','JS Chusri Normal';
}
img{ border:0; margin:auto;}
a{ text-decoration:none;}
a:hover{ text-decoration: none;}
.h30{clear:both; width:100%; height:3rem;}
.h20{clear:both; width:100%; height:2rem;}
.h10{clear:both; width:100%; height:1rem;}
.img-filter{filter: brightness(0) invert(1);}
a{text-decoration:none;color:inherit;}
a:hover{color:inherit;}
ul{padding-left: 0;margin-bottom: 0;}
.thai-font{font-family: 'JS Chusri Normal';}
.font-style01{font-size: 1rem !important;}
.font-style0{font-size: 0.8rem !important;}
.font-style1{font-size: 1.2rem !important;}
.font-style2{font-size: 1.4rem !important;}
.font-style3{font-size: 1.6rem !important;}
.font-style4{font-size: 1.8rem !important;}
.font-style5{font-size: 2rem !important;}
.font-style6{font-size: 2.5rem !important;}
.font-style7{font-size: 1.5rem !important;}
.lineheight1{line-height:1.6; letter-spacing:1px;}
.lineheight2{line-height:1.8;}
.letterspacing1{letter-spacing:5px;}
.letterspacing13{letter-spacing:13px;}
.text-indent1{text-indent:3rem;}
.content-box{padding: 10% 0;}
#back-to-top {
width: 50px;
height: 25px;
position: fixed;
z-index: 9999;
bottom: 0%;
left: 50%;
transform: translate(-50%,0);
text-align: center;
display: none;
background-color: #801B18;
border-radius: 50px 50px 0 0;
border: 2px solid #FFF;
border-bottom: 0;
font-size: 20px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
#back-to-top:hover{
opacity: 1;
}
#back-to-top a {
color: #FFF;
}
button:focus {
outline: none;
}
#nav-icon3{
z-index: 88;
width: 35px;
height: 30px;
position: absolute;
top: 25%;
right: 5%;
margin:0px 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #FFF;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 10px;
}
#nav-icon3 span:nth-child(4) {
top: 20px;
}
#nav-icon3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.submenu{
width:100%;
background:#FFF;
padding:8px 5px 5px;
position: fixed;
top:110px;
z-index:99;
text-transform:uppercase;
font-size:1.1rem;
}
/*head--//////////////////////////////////////////////////////////////////////////*/
.headbar-main{
transition: all 0.5s;
padding:.5rem;
border-top: 1px solid #FFF;
}
.slim.headbar-main,.slim2.headbar-main{
background: #801b17;
}
.hamburgers-box{
width: 100%;
position: relative;
transition: all 0.5s;
}
.navbar-brand {
width:100%;
padding: 0;
margin-right: 0;
text-align: left;
}
.navbar-brand img{
width: 100px;
transition: all 0.5s;
}
.slim .navbar-brand img,.slim2 .navbar-brand img{width: 70px;}
.navbar-logo-mobile {
width: 100%;
padding: 5% 0;
display: block;
text-align: center;
color: #443e8f;
font-weight: 700;
font-size: 2rem;
}
.navbar-logo-mobile img{width: 50%;}
.navbar-collapse ul li{
padding: 0;
transition: all 0.5s;
font-size: 1rem;
letter-spacing: 3px;
}
.navbar-collapse ul li a {
width: 100%;
margin: auto;
color: #FFF;
padding:10px 15px;
position: relative;
display: block;
text-align: center;
}
/*.navbar-collapse ul li.active a, .navbar-collapse ul li a:hover, .navbar-collapse ul li:hover a{ color: #FFF; }*/
.navbar-collapse ul li.active, .navbar-collapse ul li:hover{
background-color: transparent;
/* border-bottom:2px solid #FFF;*/
}
.social-header{margin-top: 1rem;}
.social-header img{width: 1.5rem;}
.language-mobile{
position: absolute;
top: 2rem;
right: 5rem;
}
.language-mobile a{color: #FFF; padding: 5px 5px;}
.language-mobile a:hover{
background: #801B18;
}
.language-mobile a:first-child{border-right: 1px solid #FFF;}
/*slide-banner--//////////////////////////////////////////////////////////////////////////*/
#slide-zone{
position: relative;
}
#slide-zone .banner-slide{
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
#slide-zone .banner-slide video, #slide-zone .banner-slide img{
object-fit: cover;
width: 100%;
height: 100%;
}
#slide-zone .banner-slide .banner-caption{
width: 100%;
height: 100%;
background: rgba(0,0,0,.4);
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
z-index: 88;
position: absolute;
top: 0;
left: 0;
letter-spacing: 13px;
}
#slide-zone .banner-slide .banner-caption p{font-size: 1.5rem; }
#slide-zone .banner-slide .banner-caption h1{font-size: 2.5rem;}
.slide-aboutus .owl-dots{
display: block !important;
position: absolute;
bottom: 1rem;
left: 50%;
z-index: 999;
transform: translate(-50%,0);
}
.slide-aboutus .owl-carousel button.owl-dot{
width:12px;
height: 12px;
margin: 0 4px;
border-radius: 50%;
border: 2px solid #FFF;
}
.slide-aboutus .owl-carousel button.owl-dot.active{
background: rgba(255,255,255,1);
}
/*content--//////////////////////////////////////////////////////////////////////////*/
.sup-menu{
padding: 3% 0;
background: #801B18;
}
.menu-left ul, .menu-right ul{
list-style: none;
display: flex;
align-items: center;
font-size: .9rem;
}
.menu-left ul li, .menu-right ul li{
width: auto;
margin: auto;
letter-spacing: 3px;
}
.menu-left ul li a, .menu-right ul li a{color: #FFF;}
.language-box a{
padding: 0 4px;
transition: all 0.5s;
border: 1px solid transparent;
background-color: transparent;
}
.language-box a:hover ,.language-box a.active{
color: #FFF;
background: #801B18;
border-color: #FFF;
}
.language-box a:first-child{border-right: 1px solid #FFF;}
.box-1{
position: relative;
padding-bottom: 45%;
background: url("../images/bg-1.1.png") center center no-repeat;
}
.title-boxmenu{
color: #801B18;
font-size: 1.5rem;
}
.title-boxmenu h1{
color: #010101;
letter-spacing: 2px;
}
.title-boxmenu .img-1{width: 50%;}
.readmore-btn {
border: 1px solid #801B18;
padding: 8px;
width: 205px;
text-align: center;
margin: 1rem auto 1rem !important;
font-size: 1.2rem;
transition: all 0.5s;
}
.readmore-btn:hover{
background: #801B18;
color: #FFF;
}
.box-1 .img-2{
position: absolute;
width: 65%;
bottom: -80%;
right: 0;
}
.box-2{
background: url("../images/h-20.png") center bottom no-repeat;
background-size: 100% !important;
}
.title-box h1{letter-spacing: 2px;}
.title-box p{color: #801B18;}
.menu-recome{color: #FFF;}
.menu-recome img{width: 100%; transition: all 1s;}
.menu-recome:hover img{transform:rotate(180deg);}
.box-3{padding: 0 !important;}
.img-box {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
/*<!--.img-box h1{
position: absolute;
width: 100%;
top: 50%;
left: 0;
transform: translate(0,-50%);
color: #FFF;
padding-left: 1rem;
letter-spacing: 3px;
font-size: 1.2rem;
z-index: 5;
}-->*/
.img-box img{
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s;
}
.img-box img:hover{transform: scale(1.03);}
.promotion-box-img{
/*height:380px;*/
}
.promotion-box-img img{
width: 100%;
/*height: 380px;*/
object-fit: cover;
object-position: 50% 50%;
transition: all 0.5s;
}
.promotion-box-img:hover img{
transform: scale(1.03);
}
.promotion-box-detail{
transition: all 0.5s;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.2;
height: calc(1rem * 1.2 * 2);
margin-bottom: 0;
overflow:hidden;
}
.promotion-box-detail p{
margin-bottom: 0;
}
.box-4{position: relative;width: 100%;}
.social-contact{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
z-index: 33;
}
.followus-btn img{transition: all 0.5s;}
.followus-btn img:hover{transform: translateY(-5px);}
.followus-btn{
width: 180px;
margin:1rem auto;
padding: 7px;
background: #801B18;
color: #FFF;
border: 1px solid #801B18;
transition: all 0.5s;
letter-spacing: 3px;
}
.followus-btn:hover{
background: #FFF;
color: #801B18;
}
/*footer--//////////////////////////////////////////////////////////////////////////*/
.footer {
color: #FFF;
padding: 6% 0;
background: #000;
text-align: left;
}
.footer a:hover{ color: #801B18;}
.logo-footer img{width: 100%;}
.logo-footer{margin-bottom: 1.5rem; text-align: center;}
.social-footer{margin-top: 1rem;}
.social-footer img{width: 1.5rem; transition: all 0.5s;}
.social-footer img:hover{transform: translateY(-5px);}
.social-footer.font-style2:hover img{transform: translateY(-5px);}
.social-footer a{padding: 0 5px;}
.footer h1, .social-footer {
letter-spacing: 3px;
font-size: .9rem;
}
/*///////////////////////////////////////////////////////////////////////////media///////////////////////////////////////////////////////////////////////////*/
/*----------------------------------otherpage-box-------------------------------------------------------*/
.text-red{color: #801B18;}
.text-black{color: #010101;}
.main-box .headbar-main{
position: sticky;
background: #801B18;
}
.bg-left-about{
height: 100%;
background: url("../images/bg-1.1.png") center center no-repeat;
background-size: cover;
}
.about-box {
padding: 10% 10%;
text-align: center;
font-size: 1.2rem;
}
.about-box h1{letter-spacing: 2px;}
.icon-box img{width: 100%;}
.content-otherpage{
background: url("../images/about_6.jpg") center center no-repeat;
background-attachment: fixed !important;
background-size: cover !important;
padding: 7% 0;
}
.icon-box {width: 100%; overflow: hidden;}
.icon-box img{width: 100%;}
.detail-about{
color: #FFF;
margin: 1.5rem auto 0;
font-size: 1.2rem;
}
.readmenu-btn{
border: 1px solid #801B18;
padding: 8px;
width: 180px;
text-align: center;
margin: 1rem auto 1rem !important;
font-size: 1.2rem;
transition: all 0.5s;
}
.readmenu-btn:hover{
background: #801B18;
color: #FFF;
}
.vision-otherpage{
background: url("../images/about_08.jpg") center center no-repeat;
padding: 5% 0;
background-size: cover;
}
.line-color{
width: 80%;
height: 1px;
margin: 1rem auto;
border-bottom: 1px solid #801B18;
}
.mision-otherpage{
background: url( "../images/bg-1.1.png") right bottom no-repeat;
background-size: cover !important;
padding: 10% 0 40%;
position: relative;
}
.mision-otherpage .img-3{
width: 70%;
position: absolute;
right: 0 ;
bottom: 0;
}
.mision-otherpage .about-box .text-red{font-size: 1.4rem;}
.title-vision{
letter-spacing: 4px;
}
.banner-menutop{
background: url("../images/menu_2.png") top center no-repeat;
padding: 10% 0;
background-size: cover!important;
background-attachment: fixed !important;
}
.line-menu{
width: 80%;
height: 1px;
margin: 1rem auto;
border-bottom: 1px solid #FFF;
}
.menu-normal{
background: url( "../images/Background-cream.jpg") top center no-repeat;
background-size: cover !important;
padding: 10% 0;
}
.menu-list img{width: 100%;}
.menu-normal .line-menu{
border-color: #801B18;
margin: 0 auto;
width: 100%;
}
.title-menu {
padding: 5px;
border: 1px solid #801B18;
border-top: 0;
color: #801B18;
}
.fried-list ul{list-style: none;}
.fried-list ul li{
padding: 10px 0;
border-bottom: 1px solid #801B18;
color: #801B18;
font-size: 1.2rem;
}
.fried-list ul li a{transition: all 0.5s;}
.fried-list ul li a:hover{
color: #000;
}
.food-view {
width: 100%;
overflow: hidden;
position: relative;
margin-top: 2rem;
cursor: pointer;
}
.food-view img{
width: 100%;
transition: all 0.5s;
}
.show-detail{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
color: #801B18;
font-size: 1.5rem;
opacity: 0;
z-index: 55;
transition: all 0.5s;
background: rgba(255,255,255,.7);
padding: 0 5%;
text-align: center;
}
.food-view:hover .show-detail{
opacity: 1;
}
.viewmore-show h1{color: #801B18;}
.food-view .modal-dialog, .promotion-box .modal-dialog{margin: 0 auto;}
.food-view .modal, .promotion-box .modal{cursor: default;}
.modal-backdrop {background-color: #801B18;}
.modal-backdrop.show{opacity: 0.94;}
.promotion-box{
padding:10px;
cursor: pointer;
margin-bottom: 2rem;
transition: all 0.5s;
border: 1px solid #801B18;
}
.promotion-box:hover{
background: #FFF;
border-color: transparent;
}
.promotion-box .img-box:hover img{transform: scale(1);}
.readmore-btn-promotion{
letter-spacing: 2px;
border: 1px solid #801B18;
padding: 7px;
color: #801B18;
transition: all 0.5s;
text-align: center;
font-family: 'BigCaslon';
font-size: .8rem;
}
.readmore-btn-promotion:hover{
background: #801B18;
color: #FFF;
}
.detail-promotion{
font-size: 1rem;
color: #801B18;
margin: 1rem auto;
}
.detail-promotion h1{
color: #000;
font-size: 1.2rem;
}
.contact-propage{color:#801B18; }
.banner-contact{
padding: 10% 0;
background: url("../images/Contact-02.jpg") top center no-repeat;
background-size: cover !important;
background-attachment: fixed !important;
}
.banner-lunchbox{
padding: 7% 0 10% 0;
background: url("../lunchbox/images/cover-lunchbox.jpg") top center no-repeat;
background-size: cover !important;
background-attachment: fixed !important;
}
.map-box{
width: 100%;
overflow: hidden;
}
.map-box iframe{
width: 100%;
height: 100%;
}
.detail-map{
font-size: 1.4rem;
margin: 2rem auto;
}
/*----------------End------------------otherpage-box-------------------------------------------------------*/
/*-----New CSS-----/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.navbar-pengthai{
z-index:3 !important;
}
.navbar-pengthai .dropdown-menu{
background:none;
color:#000;
border-radius:0;
right: 0;
left: -83vw !important;
top:65px;
/* transform: translate(-36%,0); */
padding:0;
padding-left: 50vw;
width: 200vw;
z-index: -1;
border:none;
}
.slim .navbar-pengthai .dropdown-menu,.slim2 .navbar-pengthai .dropdown-menu{
background-color: #FFF;
}
.slim .navbar-pengthai .dropdown-menu .dropdown-item a ,.slim2 .navbar-pengthai .dropdown-menu .dropdown-item a{
color:#000 !important;
}
.navbar-pengthai .dropdown-menu .dropdown-item{
width:auto !important;
display:inline-block !important;
color:#000 !important;
background:none;
text-transform:uppercase;
}
.navbar-pengthai .dropdown-menu .dropdown-item a{
width:auto !important;
text-align:center;
padding:0;
}
.navbar-pengthai .dropdown-menu .dropdown-item a:hover{
color:#801b18 !important;
}
.navbar-pengthai .dropdown-toggle::after{
display:none;
}
/*ul li.dropdown:hover .dropdown-menu{
display:block;
}*/
.slim2 .top-logo{
display:none !important;
}
.slim2 .bottom-logo{
display:block !important;
}
*:first-child + html .tabs {
zoom: 1;
}
#example-one {
position: relative;
}
.main-box .headbar-main.slim{
position: fixed;
}
#magic-line {
position: absolute;
bottom: 0px;
left: 0;
width:auto;
height: 2px;
background: #5e100e;
}
.slim #magic-line {
background: #FFF;
}
.slim2 #magic-line {
background: #FFF;
}
/*-----New CSS-----/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.language-box2{
position: absolute;
top: 30px;
right: 1%;
}
.lunch-box{
font-size: 1.3rem;
}
.indent30{
text-indent: 30px;
}
.customer-box{
padding:2px;
cursor: pointer;
margin-bottom: 2rem;
transition: all 0.5s;
border: 1px solid #801B18;
}
.customer-box:hover{
background: #FFF;
border-color: transparent;
}
.customer-box .img-box:hover img{transform: scale(1);}
.detail-customer{
font-size: 1rem;
color: #801B18;
margin: 0;
padding: 10px 5px;
}
.detail-customer h1{
color: #000;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*/////////////////////////*/
#icon-lunchbox{
position: fixed;
right: 0.5%;
bottom: 2%;
width: 56px;
height: 56px;
}
#icon-lunchbox label{
margin-bottom: 0;
cursor: pointer;
}
.button-trigger{
width: 56px;
height: 56px;
background: #ca231e;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 50%;
color: #FFF;
font-size: 1.2rem;
box-shadow: 2px 2px 5px rgba(0,0,0,.25);
transition: all(0.25);
outline: #CCC;
border: none;
}
.lunchbox-checkbox{
display: none
}
.button-trigger svg {
transition: all .34s ease-in-out;
}
.button-trigger:hover svg {
transform: translate(0%,0%) rotate(360deg);
}
.lunchbox-checkbox:checked .button-trigger svg {
transform: translate(0%,0%) rotate(180deg);
}
.button-option {
position: absolute;
display: flex;
z-index: -1;
width: 56px;
height: 56px;
cursor: pointer;
align-items: center;
justify-content: center;
background: #CCC;
color: #FFF;
border-radius: 50%;
transition: all 0.34s ease-in-out;
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 14%), 0 2px 2px 0 rgb(0 0 0 / 10%), 0 1px 5px 0 rgb(0 0 0 / 8%);
transform: translate(0%, -100%);
font-size: 1.3rem;
}
.lunchbox-checkbox:checked ~ .button-option {
transition: all 0.34s ease-in-out;
display:flex;
color: #FFF;
}
.button-option:hover {
box-shadow: rgba(60, 64, 67, .8) 0px 1px 2px 0px, rgba(60, 64, 67, .8) 0px 2px 6px 2px;
}
.btn-lunch-link{background: #ffc801;}
.btn-lunch-line{background: #00c300;}
.btn-lunch-mail{background: #00BDFF;}
.btn-lunch-phone{background: #1e59ff;}
.lunchbox-checkbox:checked ~ .arrow_box {
display: none;
}
.lunchbox-checkbox:checked ~ .button-option:nth-of-type(1) {
transform: translate(0%, -210%);
}
.lunchbox-checkbox:checked ~ .button-option:nth-of-type(2) {
transform: translate(0%, -320%);
}
.lunchbox-checkbox:checked ~ .button-option:nth-of-type(3) {
transform: translate(0%, -430%);
}
.lunchbox-checkbox:checked ~ .button-option:nth-of-type(4) {
transform: translate(0%, -540%);
}
.arrow_box {
position: absolute;
background: #FFF;
border: 1px solid #CCC;
width: 130px;
height: auto;
right:70px;
top: 20%;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #FFF;
border-width: 8px;
margin-top: -8px;
}
.arrow_box:before {
border-color: rgba(204, 204, 204, 0);
border-left-color: #CCC;
border-width: 9px;
margin-top: -9px;
}
.button-option .arrow_box {
display: none;
top: 18%;
color: #000;
font-size: 1rem;
}
.button-option:hover .arrow_box{
display: block;
}
.btn-lunch-link img{
filter: brightness(0) invert(1);
}
.menu-hot{
font-size: 1rem;
text-align: center;
}
.menu-hot .img-box{
border: 1px solid #801B18;
padding: 5px;
margin-bottom: 5px;
}
@media (max-height: 812px ) {
.box-1 .img-2 {
bottom: -15%;
}
}
@media (max-width: 812px ) {
body{
max-width: 100% !important;
}
.navbar-collapse{
position: fixed;
width: 250px;
background-color: #000;
height: 100% !important;
max-height: none !important;
top: 0;
display: block;
left: -250px;
margin: 0 !important;
z-index: 55;
overflow-y: scroll;
box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.navbar-collapse.in{
left: 0 !important;
}
.navbar-collapse.show{
display:block;
left: 0 !important;
}
.all-container{
width: 100%;
}
.all-container.-collapse{
/*margin-left: 250px;*/
}
.navbar-expand-lg, .navbar-collapse, .navbar-collapse.collapsing, .all-container.all-container.all-container {
transition: all 0.5s !important;
}
.navbar-expand-lg.-collapse {
/*margin-left: 250px;*/
width:100%;
}
.navbar-nav .dropdown-menu{
background:#000;
}
}
/* Underline From Left */
.hvr-underline-from-left {
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: #801B18;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar-collapse ul li.active .hvr-underline-from-left:before, .navbar-collapse ul li:hover .hvr-underline-from-left:before{
right: 0;
}
.menu-left ul li.active .hvr-underline-from-left:before, .menu-left ul li:hover .hvr-underline-from-left:before{
right: 0;
}
.menu-right ul li.active .hvr-underline-from-left:before, .menu-right ul li:hover .hvr-underline-from-left:before{
right: 0;
}
.menu-right .hvr-underline-from-left:before, .menu-left .hvr-underline-from-left:before{
background: #FFF;
}
.slim .hvr-underline-from-left:before,.slim2 .hvr-underline-from-left:before{background: #FFF;}
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 568px) {
}