html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {; -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; margin: 0; }
body {
/*font-family:'Open Sans', 'Trirong', sans-serif !important;*/
/*font-family: Tahoma, Geneva, sans-serif;*/
font-family: 'Roboto','Kanit', sans-serif !important;
padding: 0;
margin: 0;
background-color: #ffffff !important;
}
/**************************************
|
GLOBAL
|
**************************************/
body {
color: #767679;
}
.body-wrapper {
position: relative;
height: 100%;
}
.bx-row{
width: 100%;
float: left;
}
.row {
margin-left: -7.5px;
margin-right: -7.5px;
}
[class^='col'] {
float: left;
padding: 0 7.5px;
}
p{
font-size: 16px;
line-height: 25px;
margin-bottom: 20px;
float: left;
color:#000000;
}
/**************************************
|
BODY TRANSFORM
|
**************************************/
body.active{
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
.body-wrapper{
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.body-wrapper.active{
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
height: 100%;
}
.body-inner {
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
}
.overlay{
z-index: 100;
top: 0;
left: 0;
width: 0;
height: 0;
background-color: #000000;
opacity: 0;
-webkit-transition: opacity .3s,width 0s .3s,height 0s .3s;
transition: opacity .3s,width 0s .3s,height 0s .3s;
overflow: hidden;
position: fixed;
cursor: pointer;
}
.overlay.active{
width: 100%;
height: 100%;
opacity: .7;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
/**************************************
|
NAVTOP
|
**************************************/
.navtop-wrapper {
height: 140px;
background-color: #391754;
position: relative;
width: 100%;
float: left;
transition: all 0.15s;
border-bottom: 3px solid #270442;
z-index: 20;
margin-top: -1px;
}
/**************************************
|
NAV-LOGO
|
**************************************/
.main-logo {
width: 120px;
height: 140px;
position: relative;
float: left;
background-color: #501f78;
padding: 5px;
transition: all 0.15s;
}
.main-logo figure,
.main-logo figure a {
height: 100%;
}
.main-logo > a {
width: 100%;
height: 100%;
float: left;
}
.main-logo img {
max-width: 100%;
float: left;
width: 70%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.25s;
}
/**************************************
|
NAV-BAR
|
**************************************/
.navbar {
padding: 0;
margin: 0;
float: left;
height: 140px;
display: block;
}
.navbar > li {
list-style: none;
float: left;
height: 100%;
position: relative;
}
.navbar > li > a {
line-height: 140px;
padding: 0 18px 0 0;
color: #ffffff;
font-weight: 300;
transition: all 0.15s;
font-size: 15px;
position: relative;
float: left;
}
li.has-sub {
padding-right: 15px;
cursor:pointer;
}
.navbar > li.has-sub i {
position: absolute;
top: 0;
font-size: 12px;
top: 50%;
transform: translateY(-50%);
right: 0;
color: #ffffff;
cursor:pointer;
}
.navbar > li a:hover,
.navbar > li a:focus,
.navbar > li i:hover,
.navbar > li i:focus,
.navbar > li a:hover i{
color: #e3cdf5;
text-decoration: none;
}
/**************************************
|
RIGHT-SIDE ICON
|
**************************************/
.side-menu {
float: left;
height: 126px;
}
.side-menu-icon {
float: left;
padding: 0 10px;
position: relative;
}
.side-menu-icon > i {
position: relative;
top: 0;
font-size: 20px;
cursor: pointer;
transition:all 0.25s;
height: 126px;
line-height: 126px;
float: left;
}
.side-menu-icon > i:hover,
.side-menu-icon > i:focus{
color: #8b8b8b;
}
.sidemenu-icon {
display: none;
}
/**************************************
|
SECTION
|
**************************************/
.sec {
position: relative;
}
.section {
padding: 65px 0 50px 0;
width: 100%;
float: left;
}
.body-content>section:nth-of-type(1) {
padding-top: 35px;
}
/**************************************
|
HEADINGS GROUP
|
**************************************/
.entry-title {
font-weight: 400;
font-size: 20px;
line-height: 28px;
margin: 15px 0 0 0;
}
.entry-title > strong::after {
content: " | ";
position: relative;
top: -3px;
margin: 0 5px;
}
.separator {
position: relative;
display: block;
height: 1px;
background-color: #eeeeee;
margin: 15px 0 15px 0;
float: left;
width: 100%;
}
.separator.length {
margin: 10px 0 10px 0;
}
/**************************************
|
CARD ITEM BOX RELATED
|
**************************************/
.box-related .post-sm-img {
height: 185px;
}
/**************************************
|
ANALIZE GROUP
|
**************************************/
.list-header {
height: 123px;
}
.list-text {
width: 100%;
border: 0;
}
.list-text li {
height: 50px;
line-height: 50px;
padding: 0 15px;
width: 100%;
float: left;
border-top: 1px solid #ebebeb;
font-size: 15px;
}
.list-text li > span {
float: left;
text-align: left;
font-weight: 300;
}
.list-text li > label {
float: right;
text-align: right;
font-weight: 300;
}
/**************************************
|
BOX TEXT DETAIL
|
**************************************/
.box-detail > p {
line-height: 25px;
font-size: 16px;
}
/**************************************
|
ICON HOLDER
|
**************************************/
.icon-wrap {
margin-bottom: 15px;
min-height: 50px;
padding: 0 0 0 65px;
position: relative;
}
.icon-sign {
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
color: #656565;
border: 1px solid #e5e5e5;
border-radius: 4px;
float: left;
position: absolute;
top: 0;
left: 0;
}
.icon-sign > i {
font-size: 24px;
position: relative;
top: 6px;
}
.icon-text {
height: 50px;
position: relative;
}
.icon-text > span {
position: relative;
top: 50%;
transform: translateY(-50%);
float: left;
font-size: 15px;
font-weight: 300;
}
/**************************************
|
POST CONTENT
|
**************************************/
/*-- BOX GLOBAL --*/
.post-content-holder {
background-color: #ffffff;
display: inline-block;
transition: all 0.25s;
}
.post-content-holder:hover{
box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.14);
transition: all 0.25s;
}
/*-- BOX POST PRODUCT --*/
.post-content-image {
height: 270px;
}
.post-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
font-size: 18px;
transition: all 0.15s;
line-height: 25px;
}
.post-title > a {
transition: all 0.15s;
line-height: 25px;
}
.post-text {
font-weight: 300;
font-size: 16px;
height: 50px;
line-height: 25px;
overflow: hidden;
float: left;
margin-bottom: 5px;
margin-top: 5px;
}
.post-meta {
width: 100%;
float: left;
line-height: 50px;
position: relative;
}
.post-meta > span {
transition: all 0.15s;
width: 100%;
float: left;
cursor: pointer;
position: absolute;
padding: 0 110px 0 20px;
z-index: 1;
font-size: 15px;
}
.post-more {
float: right;
z-index: 3;
position: relative;
}
.post-more li {
float: left;
width: 50px;
height: 50px;
text-align: center;
border-left: 1px solid #ebebeb;
}
.post-more li a{
width:100%;
float: left;
}
.post-more li i {
transition: all 0.15s;
width: 100%;
float: left;
height: 50px;
line-height: 50px;
cursor:pointer;
}
.post-more li i.fa.fa-ellipsis-h {
font-size: 24px;
position: relative;
}
.post-more li:hover i.add-favorite{
color: #ce201f;
}
.post-more .add-favorite.active {
color: #ce201f;
}
/*-- BOX POST ARTICLE --*/
.post-sm-img {
height: 250px;
}
.post-view {
height: 30px;
line-height: 30px;
font-size: 14px;
padding: 0 !important;
margin-top: 10px !important;
}
.post-view li {
left: 0 !important;
transform: translateX(0) !important;
margin: 0 !important;
}
.post-view > li > i,
.post-view li i {
position: relative;
font-size: 16px;
top: 3px;
margin-right: 5px;
}
/*-- BOX CARD --*/
.card-info-item {
width: 100%;
position: relative;
border: 1px solid #ebebeb;
}
.card-info-img {
height: 273px;
}
.contact-container{
display: flex;
width: 100%;
}
.inono{
width:50%
}
.row-contac-line-container{
width:50%;
display: flex;
gap: 5rem;
}
.line-qr-wrap{
width: 100%;
padding: 1rem;
}
.line-img{
width: 100%;
padding: 1rem;
}
.line-img img{
width:100%
}
.line-card-text{
width: 100%;
text-align: center;
color: black;
margin-top: 1rem;
}
.line-qr-container{
width: 50%;
border: 1px solid #bdbdbd;
}
.graph-container{
width:50%
}
.card-info-text {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
border-top: 1px solid #ebebeb;
}
.card-info-text > span {
font-size: 16px;
font-weight: 400;
}
.line-qr .card-info-text {
width: 100%;
padding: 5px;
height: 50px;
line-height: 1.42857143;
text-align: center;
border-top: 1px solid #ebebeb;
}
/**************************************
|
NAVTOP HEADER
|
**************************************/
/*-- RIGHT GROUP --*/
.right-group {
float: right;
height: 140px;
z-index: 20;
}
/*-- CART GROUP --*/
.cart-wrap,
.user-wrap {
float: left;
height: 140px;
margin-right: 5px;
position: relative;
}
.cart-group,
.user-group {
height: 40px;
border-radius: 4px;
position: relative;
top: 50%;
transform: translateY(-50%);
transition: all 0.25s;
}
.cart-outer {
position: static;
height: 100%;
}
.cart-icon {
width: auto;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px 0 50px;
height: 40px;
color: #ffffff;
text-align: center;
font-size: 14px;
line-height: 40px;
cursor: pointer;
border: 1px solid #501f78;
position: relative;
float: left;
/* overflow: hidden; */
background-color: #391754;
}
.cart-icon:hover,
.cart-icon:hover label {
color: #e3cdf5 !important;
}
.cart-icon > i.icon-cart{
position: absolute;
font-size: 20px;
float: left;
line-height: 40px;
height: 40px;
width: 40px;
top: 0;
left: 0;
border-right: 1px solid #501f78;
overflow: visible;
}
.cart-icon > label {
font-size: 10px;
color: #ffffff !important;
position: absolute;
top: 2px;
left: 24px;
z-index: 10;
line-height: initial;
font-weight: 100;
}
.user-wrap.user-dropdown .cart-icon {
padding: 0 10px;
font-size:14px;
width: auto;
}
.user-wrap.user-dropdown .cart-icon > i.icon-drop {
right: 0 !important;
position: absolute;
font-size: 20px;
float: left;
line-height: 40px;
height: 40px;
width: 40px;
top: 0;
border-left: 1px solid #501f78;
overflow: visible;
}
.cart-icon > span {
width: 100%;
float: left;
text-align: center;
/* padding: 0 0 0 40px; */
}
.user-icon {
float: left;
width: 40px;
height: 40px;
border: 1px solid #501f78;
border-radius: 4px;
text-align: center;
cursor: pointer;
overflow: hidden;
}
.user-icon i {
color: #ffffff;
font-size: 20px;
line-height: 40px;
width: 100%;
float: left;
background-color: #391754;
}
.icon-login {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
position: relative;
top: -1px;
}
.icon-logout {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
top: -1px;
}
.user-wrap.user-dropdown ul.dropdown-menu{
padding:0;
margin: -1px 0 0;
}
.user-wrap.user-dropdown ul.dropdown-menu li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #501f78 !important;
}
.user-wrap.user-dropdown ul.dropdown-menu li a {
width: 100%;
float: left;
padding: 0 50px 0 15px;
background-color: #391754;
color: #ffffff;
line-height: 39px;
font-size: 14px;
font-weight: 300;
}
.user-wrap.user-dropdown ul.dropdown-menu li a:hover,
.user-wrap.user-dropdown ul.dropdown-menu li a:focus{
background-color: #270442;
color: #ffffff;
}
/*-- SOCIAL GROUP --*/
.social-wrap {
float: left;
height: 140px;
}
.social-group {
position: relative;
top: 50%;
transform: translateY(-50%);
float: left;
transition: all 0.25s;
}
.social-group > li {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
float: left;
margin-right: 5px;
border: 1px solid #501f78;
border-radius: 4px;
}
.social-group > li > a {
color: #ffffff;
width: 100%;
float: left;
}
.social-group > li > a > i {
font-size: 15px;
width: 100%;
float: left;
height: 38px;
line-height: 40px;
}
.social-group > li > a > i.fa.fa-youtube-play {
background-color: #ce201f;
}
.social-group li.youtube {
border: 1px solid #ce201f;
}
.social-group > li > a > i.fa.fa-facebook {
background-color: #3b5999;
}
.social-group li.facebook {
border: 1px solid #3b5999 !important;
}
/*-- ICON MOBILE --*/
.icon-mobile {
float: left;
height: 140px;
cursor: pointer;
display:none;
margin-right: 5px;
}
.icon-mobile > i {
position: relative;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 20px;
color: #ffffff;
border: 1px solid #501f78;
/* border-radius: 4px; */
background-color: #391754;
}
/**************************************
|
SLIDE ONE
|
**************************************/
.slide-one {
position: relative;
}
.carousel-indicators .active {
width: 10px;
height: 10px;
margin:5px;
background-color: #ffffff !important;
border: 0 !important;
}
.carousel-indicators li {
width: 10px;
height: 10px;
margin:5px;
border: 0 !important;
background-color: #8c9487;
z-index: 1;
}
.blogInner {
position: relative;
float: left;
width: 100%;
height: auto;
overflow: hidden;
background-size: cover;
}
.blogInner figure {
height: 100%;
}
.blogInner img {
/* position: absolute; */
/* left: 50%; */
/* top: 0; */
/* min-width: 480px; */
/* min-height: 250px; */
/* -webkit-transform: translate(-50%,-50%); */
-ms-transform: translate(-50%,-50%);
/* transform: translate(-50%,-0%); */
width: 100%;
}
.carousel-control i {
font-size: 40px;
color: rgba(255, 255, 255, 0.66);
position: relative;
top: 50%;
transform: translateY(-50%);
}
/**************************************
|
EFFECT
|
**************************************/
.navFix {
position: fixed !important;
top: 0%;
left: 0;
width: 100%;
z-index: 6;
height: 140px;
}
.fadedown{
top: -40px !important;
transition: all 0.15s;
box-shadow: 8px 8px 20px rgba(0,0,0,.15);
}
.body-inner.active{
margin-top: 140px;
}
.navbar-dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 260px;
padding: 0;
margin: 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-dropdown > li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #501f78 !important;
}
.navbar-dropdown > li > a {
width: 100%;
float: left;
padding: 0 10px;
background-color: #391754;
color: #ffffff;
line-height: 39px;
font-size: 14px;
font-weight: 300;
}
.navbar-dropdown > li > a:hover,
.navbar-dropdown > li > a:focus {
background-color: #270442;
color: #ffffff;
}
/**************************************
|
BACK-TO-TOP
|
**************************************/
span#top-link-block {
position: fixed;
right: 3%;
bottom: 3%;
z-index: 50;
display: none;
}
span#top-link-block a {
opacity: 0.8;
font-size: 22px;
border: 2px solid #e8e8e8;
width: 60px;
float: left;
height: 60px;
line-height: 33px;
text-decoration: none;
padding: 11px 18px;
border-radius: 52px;
}
span#top-link-block a:hover {
transition: all 0.35s;
border-color: #db1d4d;
background-color: #db1d4d;
border-color: #501f78;
background-color:#501f78;
color: #cccccc;
}
span#top-link-block a {
color: #b0b0b0;
}
/**************************************
|
PAGINATION
|
**************************************/
.pagi-custom {
width: 100%;
float: left;
background-color: #ffffff;
position: relative;
border: 1px solid #eeeeee;
padding: 0;
margin: 0 0 30px 0;
height: 50px;
}
.pagination {
height: 48px;
width: auto;
margin: 0 auto;
position: relative;
left: 50%;
transform: translateX(-50%);
border-radius: 0;
border: transparent;
}
.pagination li a,
.pagination li a i {
width: 50px;
height: 48px;
margin: 0;
padding: 0;
text-align: center;
line-height: 50px;
border: 0;
border:transparent;
border-radius: 0 !important;
font-weight:400;
background-color: transparent;
}
.pagination li {
border: 0 !important;
}
.pagination li:last-child a,
.pagination li:last-child a i{
border: 0 !important;
}
.pagination li.active a{
background-color:transparent;
border-color:#ddd;
font-weight:600;
}
.pagination li.active a:hover{
background-color:transparent;
}
.link-first,
.link-last {
float: left;
position: relative;
}
.link-last{
float:right
}
.link-first > i,
.link-last > i {
width: 50px;
float: left;
height: 48px;
text-align: center;
line-height: 50px;
border-right: 1px solid #eeeeee;
}
.link-last > i {
border-left: 1px solid #eeeeee;
border-right:0;
}
.link-first > i:hover,
.link-last > i:hover{
background-color:#f3f3f3;
}
/**************************************
|
LEFTBOX HEADER
|
**************************************/
.cat-haeder {
height: 52px;
line-height: 52px;
margin: 0;
background-color: #501f78;
color: #ffffff;
text-align: center;
position: relative;
border-bottom: 3px solid #270442;
}
.cat-icon {
position: relative;
top: 6px;
margin-right: 5px;
}
.cat-text {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
height: 50px;
line-height: 50px;
z-index: 10;
text-align: center;
width: 100%;
}
.repons-leftIcon {
display: none;
position: absolute;
top: 53%;
transform: translateY(-50%);
right: 20px;
}
.repons-leftIconWrap {
position: absolute;
top: 0;
left: 0;
height: 50px;
z-index: 2;
width: 100%;
float: left;
display: none;
}
/**************************************
|
SIDEBAR MENU
|
**************************************/
#sidebar-menu {
position: relative;
line-height: 1;
width: 100%;
float: left;
border-radius: 0;
display: block;
background-color: #ffffff;
}
#sidebar-menu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
width: 100%;
float: left;
border-radius: 0;
border-left: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
}
#sidebar-menu ul li {
position: relative;
margin: 0;
padding: 0;
border-bottom: 1px solid #eeeeee;
width: 100%;
float: left;
top: 0;
left: 0;
transform: translate(0%,0);
}
#sidebar-menu ul li.active > a {
background-color: #e6e6e6;
}
#sidebar-menu ul ul ul li a:hover,
#sidebar-menu ul li a:hover,
#sidebar-menu ul ul ul li:hover{
background-color: #e6e6e6;
color:#252525;
}
#sidebar-menu ul ul ul li a:hover {
background-color: #e0e0e0;
color:#252525;
}
li.has-sub.open ul li:last-child,
li.has-sub.open ul li:last-child a {
border-bottom: 0 !important;
}
#sidebar-menu ul li a {
text-decoration: none !important;
cursor: pointer;
}
#sidebar-menu > ul > li > a {
color: #464645;
display: block;
padding: 17px 7px;
letter-spacing: 1px;
font-size: 14px;
font-weight: 600;
position: relative;
width: 100%;
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#sidebar-menu ul li.open a,
#sidebar-menu ul li.active a {
color: #252525;
transition: all 0s;
}
#sidebar-menu ul li.open > ul{
border-top: 1px solid #e5e5e5;
}
#sidebar-menu ul li.open > li > a {
border-top: 1px solid #e5e5e5;
}
li.has-sub.open>a {
border-top: 0 !important;
}
#sidebar-menu ul li.open li:last-child ul li:last-child a {
border: 0 !important;
}
#sidebar-menu ul li a:hover{
color: #252525;
}
#sidebar-menu ul > li.has-sub:hover::after{
color: #cccccc !important;
}
#sidebar-menu ul li a:focus{
color: #000000;
}
#sidebar-menu ul > li.has-sub::after {
font-family: FontAwesome;
content: "+";
top: 18px;
right: 20px;
position: absolute;
font-size: 14px;
text-shadow: 0px 0px 0.1px #999999;
color: #000000;
opacity: 1;
float: right;
z-index: 6;
transition:all0.25s ease-in-out;
content="+";
min-width: 8px;
float: right;
height: 11px;
transition: transform 0.3s cubic-bezier(0.5, 0, 0, 1);
}
#sidebar-menu ul > li.has-sub.open::after,
#sidebar-menu ul ul > li.open.has-sub.open::after {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition:all0.25s ease-in-out;
font-family: FontAwesome;
content:"_";
top: 11px;
right: 20px;
position: absolute;
font-size: 14px;
text-shadow: 0px 0px 0.1px #999999;
color: #000000;
opacity: 1;
float: right;
z-index: 6;
transition:all0.25s ease-in-out;
}
#sidebar-menu ul ul li a::before {
font-family: FontAwesome;
content: "\f111";
font-size: 5px;
position: relative;
top: -2px;
margin-right: 5px;
color: #252525;
}
#sidebar-menu ul ul li a:hover::before{
color:#252525;
}
#sidebar-menu ul > li:hover::after,
#sidebar-menu ul > li.active::after,
#sidebar-menu ul > li.open::after {
border-top-color: #ffffff;
}
#sidebar-menu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#sidebar-menu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#sidebar-menu ul ul {
display: none;
width: 100%;
float: left;
border: 0;
}
#sidebar-menu ul ul li a {
background: #f5f5f5;
background-color: #f2f2f2;
display: block;
position: relative;
font-size: 14px;
padding: 0 14px;
color: #555555;
font-weight: 500;
width: 100%;
float: left;
height: 50px;
line-height: 50px;
overflow: hidden;
}
#sidebar-menu ul ul ul li {
border-bottom: 1px solid #e3e3e3;
}
#sidebar-menu ul ul > li.has-sub > a::after {
border-top: 13px solid #dddddd;
}
#sidebar-menu ul ul ul li a {
padding-left: 21px;
height: 40px !important;
line-height: 40px;
font-size: 14px !important;
text-align: left;
background-color: #ebebeb;
}
#sidebar-menu ul ul > li:hover::after,
#sidebar-menu ul ul > li.active::after,
#sidebar-menu ul ul > li.open::after {
border-top-color: #666666;
}
/**************************************
|
SEARCH GROUP
|
**************************************/
.search-bar {
height: 50px;
position: relative;
background-color: #ffffff;
border: 1px solid #eeeeee;
line-height: 50px;
margin-bottom: 15px;
padding: 0;
z-index: 1;
}
.main-search {
width: 100%;
height: 50px;
float: left;
position: relative;
}
.input-search {
width: 100%;
height: 48px;
border: 0;
position: absolute;
top: 0;
left: 0;
outline: none;
padding: 0 270px 0 60px;
}
.search-bar.search-inner .main-search > input {
padding: 0 110px 0 60px;
}
.btn-searchForm {
background-color: #ffffff;
width: 50px;
position: absolute;
top: 0;
left: 0px;
height: 48px;
line-height: 48px;
margin: 0;
border: 1px solid #ffffff !important;
border-width: 0 1px 0 0 !important;
outline: none !important;
box-shadow: none !important;
}
.btn.btn-searchForm:focus{
box-shadow:transparent !important;
}
.search-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
.right-wrap {
position: absolute;
top: 0;
right: 0;
height: 50px;
}
input::-webkit-input-placeholder {
color: #cccccc;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
/**************************************
|
GRID and LIST
|
**************************************/
.grid,
.list {
width: 50px;
height: 48px;
float: left;
position: relative;
border-left: 1px solid #eeeeee;
cursor: pointer !important;
transition: all 0.25s;
background-color: #f9f9f9;
}
.grid-icon,
.list-icon {
width: 24px;
height: 24px;
float: left;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.grid-icon > i,
.list-icon > i {
float: left;
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.grid:hover,
.list:hover,
.grid:focus,
.list:focus {
background-color: #501f78;
}
.grid:hover i,
.list:hover i,
.grid:focus i,
.list:focus i {
color: #ffffff;
}
.grid.active,
.list.active {
background-color: #501f78;
}
.grid.active i,
.list.active i {
color: #ffffff;
}
.pItm{
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
-ms-transition: all 350ms;
-o-transition: all 350ms;
transition: all 350ms;
}
.pItm.l-list {
width: 100%;
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
-ms-transition: all 350ms;
-o-transition: all 350ms;
transition: all 350ms;
}
.pItm.l-list .post-content-image {
width: 180px;
float: left;
height: 178px;
margin: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
border-right: 1px solid #eeeeee;
}
.pItm.l-list .post-content-holder {
position:relative;
padding: 0 0 0 180px;
height: 180px;
}
.pItm.l-list .post-content-text{
border-top:0;
height: 129px;
}
.pItm.l-list .box-holder.border-top {
border: 0;
}
/**************************************
|
BREADCRUMBS
|
**************************************/
.bread-crumb {
margin: 0;
}
.breadcrumb {
margin: 0;
background-color: #ffffff;
border-radius: 0;
padding: 15px 0 15px 15px;
margin-top: 15px;
margin-bottom: 15px;
border: 1px solid #eeeeee;
}
.breadcrumb a {
font-size: 14px;
}
.breadcrumb a.active{
color:#000000;
}
.breadcrumb.account-breadcrumb {
margin-top: 0;
margin-bottom: 0;
border: 0;
padding: 15px 0;
}
/**************************************
|
PRODUCTS VIEW
|
**************************************/
.view-contain {
margin-bottom: 15px;
border-bottom: 1px solid #e5e5e5;
}
.allproduct .perspect-wrap button {
margin-top: 20px;
}
.img-contain {
margin-bottom: 15px;
}
.large-pic {
background-color: #fafafa;
height: 500px;
border: 1px solid #eeeeee;
margin-bottom: 15px;
padding: 0;
}
.large-pic img {
min-width: 400px;
margin: 0 !important;
}
.large-pic-wrap {
width: 100%;
margin: auto;
height: 100%;
overflow: hidden;
background-color: #ffffff;
}
.large-pic-wrap img {
width: 100%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.icon-pic-wrap img {
position: relative;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.icon-pic-wrap {
height: 175px;
overflow: hidden;
background-color: #fafafa;
border: 1px solid #eeeeee;
cursor: pointer;
}
.icon-pic-wrap img {
margin: 0 !important;
}
.icon-pic-in {
overflow: hidden;
height: 100%;
}
.exp .perspect-wrap {
padding: 0;
}
.article .perspect-info h5 {
width: 100%;
float: left;
font-size: 15px;
margin-bottom: 10px;
}
.spect p {
margin-bottom: 0;
}
.spect img {
width: 100%;
margin: 15px 0;
}
.related .tab-title {
width: 100%;
}
.view--info h1,
.view--info h2,
.view--info h3,
.view--info h4,
.view--info h5 {
width: 100%;
float: left;
margin-bottom: 10px;
line-height: 23px;
}
.view--info h1{
font-size:20px;
}
.view--info h2{
font-size:18px;
margin: 0;
}
.view--info h3{
font-size:16px;
margin: 0;
}
.view--info h4{
font-size:14px;
}
.view--info h5{
font-size:12px;
}
.view--info p,
.view--info span {
font-size: 15px;
line-height: 22px;
}
.count {
height: 52px;
position: relative;
border: 1px solid #eeeeee;
}
.count-num {
width: 100%;
float: right;
padding: 0;
position: relative;
}
.count-favorite i {
font-size: 20px;
position: relative;
top: 50%;
transform: translateY(-100%);
transition: all 0.25s;
}
.count-favorite:hover i{
transition: all 0.25s;
color: #ee2d24;
}
.count-favorite.active i{
color: #ee2d24;
}
.count-inner {
position: relative;
float: left;
width: 100%;
height: 50px;
}
.count .count-inner span {
width: 50px;
height: 100%;
position: absolute;
z-index: 2;
}
.count-inner span.minus {
left: 0;
top: 0;
}
.count-inner span.plus {
right: 0;
top: 0;
}
.count-inner span.minus button {
width: 100%;
height: 100%;
border: 0;
outline: none;
background: transparent;
border-right: 1px solid #e5e5e5;
}
.count-inner span.plus button {
width: 100%;
height: 100%;
border: 0;
outline: none;
background: transparent;
border-left: 1px solid #e5e5e5;
}
.count-inner input {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 60px 0 60px;
z-index: 1;
border: 0;
outline: none;
text-align: center;
background-color: #fff;
}
.count-inner input::-webkit-input-placeholder {
color: #cbcbcb;
}
.count-inner input:focus::-webkit-input-placeholder{
color:#ffffff;
}
.count-inner span.minus button:focus {
border: 1px solid #501f78;
}
.count-inner span.plus button:focus {
border: 1px solid #501f78;
}
.add-meta {
width: 100%;
float: left;
position: relative;
height: 50px;
padding: 0 0 0 50px;
}
.favorite-icon {
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
border-right: 1px solid #eeeeee;
}
.favorite-icon > i {
float: left;
text-align: center;
line-height: 50px;
width: 50px;
cursor: pointer;
}
.favorite-icon > i:hover,
.favorite-icon > i:focus,
.favorite-icon > i.active {
color: #ce201f;
}
/**************************************
|
EMPTY SPACE
|
**************************************/
.empty-space {
margin-top: 35px;
width: 100%;
float: left;
}
.empty-space-sm{
margin-top: 15px;
width: 100%;
float: left;
}
.empty-space-xs{
margin-top: 400px;
width: 100%;
float: left;
}
/**************************************
|
DETAIL
|
**************************************/
.box-detail .text-date {
width: auto;
line-height: 40px;
padding-right:15px;
}
.box-detail .social {
width: auto;
float: right;
}
.box-detail .social li {
float: right;
list-style: none;
width: 40px;
height: 40px;
text-align: center;
margin: 0;
margin-right: 10px;
border-radius: 0;
left: 0;
transform: translateX(0);
}
.box-detail .social li.facebook {
background-color: #3c5a9a;
}
.box-detail .social li.twitter {
background-color: #55acef;
}
.box-detail .social li.instagram {
background-color: #e54060;
}
.box-detail .social li.youtube {
background-color: #e62117;
}
.box-detail .social li.google {
background-color: #dd5044;
}
.social li a {
padding: 0 0 0 0;
width: 100%;
height: 100%;
float: left;
color: #ffffff;
line-height: 40px;
}
.box-detail .text-date i {
font-size: 13px;
float: left;
line-height: 40px;
margin-right: 5px;
}
.box-detail .text-date span {
float: left;
width: auto;
line-height: 40px;
}
.share-wrap {
float: right;
line-height: 40px;
}
.share-wrap > span{
line-height: 40px !important;
width: auto !important;
top: 0;
}
.box-share {
margin: 30px 0 0 0;
}
.text-label {
position: relative;
top: 10px;
}
.box-detail p,
.box-detail span,
.box-detail img {
margin-bottom: 5px;
width: 100%;
float: left;
line-height: 25px;
}
.box-detail img,
.box-detail iframe,
.box-detail ul li {
width: auto;
max-width: 100%;
position: relative;
margin: 15px 0 15px 0;
float: left;
left: 50%;
transform: translateX(-50%);
}
.box-detail iframe {
min-width: 300px;
width: 650px;
min-height: 300px;
height: 450px;
}
.box-detail ul,
.box-detail ol {
padding: 0 20px;
margin: inherit;
width: 100%;
float: left;
}
/**************************************
|
CONTACT MAP
|
**************************************/
.ft-map {
position: relative;
margin-top: 15px;
margin-bottom: 30px;
height: 450px;
overflow: hidden;
}
.google-map-canvas{
margin-bottom: 0 !important;
}
/**************************************
|
DROPDOWN
|
**************************************/
.cart-dropdown {
position: absolute;
top: 100%;
margin-top: 0;
background-color: #000000;
background-color: #391754;
width: 300px;
height: auto;
z-index: 20;
left: 0;
right: initial;
display: none;
}
.cart-product-img {
width: 75px;
height: 75px;
float: left;
margin: 0 5px 5px 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.cart-product-img figure {
height: 100%;
}
.cart-product-img img {
max-width: 100%;
left: 50%;
}
.cart-product-item {
position: relative;
padding: 0 0 0 80px;
margin-bottom: 10px;
}
.cart-product-text {
width: 100%;
position: relative;
}
.cart-dropdown-wrap {
width: 100%;
float: left;
padding: 10px 25px 10px 10px;
border-bottom: 1px solid #3d3d3d;
border-bottom: 1px solid #501f78;
}
.quantity {
float: left;
color: #ffffff;
}
.total {
float: right;
line-height: 30px;
color: #d8d8d8;
}
.amount {
margin: 0 10px;
float: right;
color: #ffffff;
}
.cart-productname {
width: 100%;
float: left;
margin: 0 0 5px 0;
color: #ffffff;
height: 40px;
vertical-align: inherit;
line-height: 20px;
}
.cart-productname:hover,
.cart-productname:focus{
color: #e3cdf5;
}
.remove-item {
position: absolute;
top: -10px;
right: -25px;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 16px;
background-color: #c8001d;
color: #ffffff;
text-align: center;
cursor: pointer;
}
.cart-dropdown-body {
position: relative;
}
/**************************************
|
CART
|
**************************************/
ul.h-cart {
width: 100%;
float: left;
border: 1px solid #eeeeee;
background-color: #f9f9f9;
}
ul.h-cart li {
float: left;
width: 25%;
list-style: none;
padding: 12px 10px;
font-size: 16px;
font-weight: 400;
color: #000000;
text-align: center;
}
ul.h-cart li:first-child {
text-align: left;
}
ul.h-cart li:nth-of-type(3) {
text-align: center;
}
ul.h-cart li:nth-of-type(2) {
text-align: left;
}
ul.body-cart {
width: 100%;
float: left;
border: 1px solid #eeeeee;
border-width: 0 1px 1px 1px;
position: relative;
}
ul.body-cart li {
float: left;
width: 25%;
list-style: none;
padding: 23px 10px;
vertical-align: middle;
position: relative;
}
ul.body-cart li:first-child {
width: 10%;
}
ul.body-cart li.t-detail-food {
width: 100%;
padding: 10px 0;
}
.iclose-menu {
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
font-size: 14px;
text-align: center;
background-color: #c8001d;
line-height: 20px;
color: #ffffff;
border-radius: 0 0 0 4px;
cursor: pointer;
z-index: 5;
}
.iclose-menu:hover,
.iclose-menu:focus{
background-color: #a00017;
}
.quantity .minus,
.quantity .plus {
padding: 0;
width: 21px;
height: 21px;
float: left;
text-align: center;
line-height: 19px;
margin: 0;
font-weight: 600;
display: inline;
font-size: 16px;
border: 0;
cursor: pointer;
outline: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
background-color: #efefef;
color: #fff;
border-radius: 500px;
z-index: 3;
}
.quantity.buttons-added {
position: relative;
width: 82px;
margin: 0 auto;
left: 50%;
transform: translateX(-50%);
}
.quantity input.qty {
border: none;
padding: 0 3px;
width: 40px;
display: inline;
text-align: center;
font-weight: 300;
color: #303030;
font-size: 14px;
background: 0 0;
outline: none;
float: left;
height: 20px;
line-height: 21px;
}
.quantity .minus i,
.quantity .plus i {
position: relative;
top: 2px;
font-size: 15px;
color:#a2a2a2;
}
.icons-remove {
font-size: 16px;
line-height: 20px;
position: relative;
top: 3px;
padding: 0 10px 0 0;
cursor: pointer;
color: #520b09;
}
.icons-remove:hover{
color:#a00017;
}
.product-thumbnail {
width: 100px;
height: 85px;
float: left;
overflow: hidden;
border: 1px solid #eeeeee;
position: relative;
}
.product-thumbnail figure {
height: 100%;
}
.product-thumbnail figure img {
max-width: 100px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.guide-title i {
font-size: 20px;
float: right;
margin-right: 10px;
position: relative;
top: 2px;
/* color: #252525; */
}
.p-number{
text-align: right !important;
padding-right: 100px !important;
}
.cart-collaterals {
width: 100%;
float: left;
margin-bottom: 15px;
}
.cart-totals {
float: right;
margin: 15px 0 0 0;
text-align: right;
font-size: 18px;
font-weight: 500;
}
.cart-totals-wrap {
float: right;
}
.cart-food-name {
display: block;
float: left;
padding-bottom: 5px;
margin-right: 15px;
}
.te-dtail {
margin-bottom: 3px;
font-weight: 100;
padding: 0 5px;
}
.btn-grOup {
position: relative;
float: right;
}
.btn-order,
.btn-previo {
width: 200px !important;
float: right;
margin: 0 0 0 15px;
background-color: #501f78;
border: 0;
cursor: pointer;
}
.btn-previo > i {
position: relative;
top: 4px;
margin: 0 0 0 0;
font-size: 18px;
}
.btn-order:hover,
.btn-order:focus,
.btn-previo:hover,
.btn-previo:focus {
background-color: #391754;
color: #ffffff;
text-decoration: none;
}
/**************************************
|
FOOTER
|
**************************************/
/*-- FOOTER ABOVE --*/
.footer-above {
height: 100px;
background-color: #391754;
border-bottom: 1px solid #501f78;
}
.footer-info {
height: 50px;
padding: 0 0 0 70px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.footer-info-holder {
height: 100px;
}
.footer-info-icon {
width: 47px;
height: 32px;
float: left;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.footer-info-text {
position: relative;
top: 50%;
transform: translateY(-50%);
color: #ffffff;
font-size: 16px;
}
.footer-info-text > span {
color: #ffffff;
font-size: 16px;
/*font-family: 'Trirong', sans-serif !important;*/
}
/*-- FOOTER MIDDLE --*/
.footer-middle {
min-height: 100px;
background-color: #391754;
padding: 50px 0 0 0;
}
.footer-logo {
width: 100px;
height: 150px;
position: absolute;
overflow: hidden;
float: left;
top: 0;
left: 0;
}
.footer-logo figure {
height: 100%;
}
.footer-logo figure img {
max-width: 100%;
}
.footer-info-inner {
width: 100%;
float: left;
position: relative;
padding: 0 0 0 165px;
min-height: 200px;
}
.footer-info-title {
color: #ffffff;
font-size: 20px;
font-family: 'Trirong', sans-serif !important;
}
.footer-text {
width: 100%;
float: left;
height: auto;
}
.footer-text > p {
height: 100px;
overflow: hidden;
font-size: 15px;
color: #ffffff;
font-weight: 300;
}
/*-- SITEMAP --*/
.sitemap {
float: right;
margin-top: 20px;
margin-bottom: 10px;
padding-bottom: 25px;
border-bottom: 1px solid #501f78;
}
.sitemap li {
float: left;
}
.sitemap li a {
color: #ffffff;
padding-left: 35px;
font-size: 16px;
}
.sitemap li a:hover,
.sitemap li a:focus{
color: #e3cdf5;
}
/*-- FOOTER ICON --*/
.footer-info-wrapper {
float: right;
}
.footer-icon {
float: left;
line-height: 50px;
color: #ffffff;
padding: 15px 0 15px 0;
width: auto;
padding-right: 50px;
}
.footer-icon > i {
width: 50px;
height: 50px;
background-color: #501f78;
text-align: center;
line-height: 50px;
border-radius: 50%;
margin-right: 15px;
float: left;
font-size: 21px;
}
.footer-icon > span {
float: left;
font-size:15px;
line-height: 50px;
}
.footer-payment {
float: right;
padding: 20px 0 20px 0;
}
.footer-payment li {
float: left;
padding-left: 15px;
}
.footer-payment li img {
width: 64px;
height: 40px;
}
/*-- FOOTER BOTTOM --*/
.footer-bottom {
min-height: 50px;
line-height: 50px;
background-color: #1f0a31;
text-align: center;
color: #ffffff;
}
.footer-bottom span{
font-weight:300;
}
.footer-bottom i {
line-height: 50px;
position: relative;
top: 5px;
margin: 0 5px 0 5px;
font-size: 20px;
}
.footer-bottom a {
color: #ffffff;
font-weight: 400;
transition:all 0.15s;
}
.footer-bottom a:hover,
.footer-bottom a:focus {
color: #cccccc;
}
/**************************************
|
INPUT
|
**************************************/
/*-- FOOTER FORM --*/
.footer-form {
padding: 0;
}
.leave-form {
width: 100%;
position: relative;
height: 50px;
float: left;
padding: 0 190px 0 0;
}
.input-default {
width: 100%;
padding: 0 10px 0 10px;
outline: none;
height: 50px;
line-height: 50px;
font-size: 16px;
border-radius: 4px;
background-color: #501f78;
border: 1px solid #622494;
color: #ffffff;
}
/*-- FORM INPUT --*/
.form-info {
width: 100%;
float: left;
background-color: #fafafa;
padding: 15px;
border: 1px solid #ebebeb;
margin-bottom: 30px;
}
.input-info {
width: 100%;
float: left;
padding: 0 10px 0 10px;
outline: none;
height: 50px;
line-height: 30px;
border: 1px solid #eeeeee;
font-size: 14px;
background-color: #ffffff;
font-weight: 400;
color: #999999;
}
textarea.input-info {
height: auto;
}
.form-bottom {
float: right;
}
.label {
background-color: transparent !important;
float: left !important;
width: auto !important;
line-height: 42px;
margin: 0 15px 0 0 !important;
color: #999999;
font-weight: 400;
font-size: 16px;
}
.input-info::-webkit-input-placeholder {
color: #cccccc;
font-size: 14px;
font-weight: 300;
}
.input-info:-moz-placeholder { /* Firefox 18- */
color: #cccccc;
font-size: 14px;
font-weight: 400;
}
.input-info::-moz-placeholder { /* Firefox 19+ */
color: #cccccc;
font-size: 14px;
font-weight: 400;
}
.input-info:-ms-input-placeholder {
color: #cccccc;
font-size: 14px;
font-weight: 400;
}
input.error {
border: 1px solid #F44336;
}
/*-- PLACEHOLDER --*/
input::-webkit-input-placeholder {
color: #ffffff;
font-size: 16px;
}
input:-moz-placeholder { /* Firefox 18- */
color: #ffffff;
font-size: 16px;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #ffffff;
font-size: 16px;
}
input:-ms-input-placeholder {
color: #ffffff;
font-size: 16px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
textarea::-webkit-input-placeholder {
color: #ffffff;
font-size: 16px;
}
textarea:-moz-placeholder { /* Firefox 18- */
color: #ffffff;
font-size: 16px;
}
textarea::-moz-placeholder { /* Firefox 19+ */
color: #ffffff;
font-size: 16px;
}
textarea:-ms-input-placeholder {
color: #ffffff;
font-size: 16px;
}
textarea:focus::-webkit-input-placeholder {
color: transparent;
}
/**************************************
|
BUTTON
|
**************************************/
.btn {
outline: none !important;
color: #ffffff;
font-size: 16px;
width: 100%;
height: 50px;
line-height: 50px;
padding: 0;
border-radius: 0;
background-color: #501f78;
}
.btn-leave {
width: 175px;
margin-left: 15px;
background-color: #501f78;
border: 1px solid #622494;
position: absolute;
top: 0;
right: 0;
border-radius:4px;
}
.btn-submitForm {
background-color: #501f78;
width: 250px;
float: right;
}
.addtocart {
background-color: #501f78;
}
.btn-leave:hover,
.btn-leave:focus,
.btn-submitForm:hover,
.btn-submitForm:focus,
.btn.addtocart:hover,
.btn.addtocart:focus {
background-color: #391257;
border: 1px solid #622494;
color: #ffffff;
transition: all 0.2s;
}
.qbutton {
width: 100px;
height: 30px;
line-height: 30px;
font-size: 11px;
background-color: #501f78;
border: 1px solid #622494;
color: #ffffff;
border-radius: 0;
}
.qbutton i {
margin: 0 5px;
}
.qbutton:hover,
.qbutton > i:hover{
color: #ffffff;
background-color: #391257;
}
/**************************************
|
LOGIN
|
**************************************/
.marginTop-15 {
margin-top: 15px;
}
.bx-input {
position: relative;
}
.icon-input {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ffffff;
border: 1px solid rgb(238, 238, 238);
border-width: 1px 1px 1px 1px;
color: #999999;
}
.bx-input input {
padding: 0 0 0 60px;
/* margin-left: 50px; */
}
.msg-error {
display: none;
font-size: 13px;
color: #F44336;
padding: 5px;
font-weight:100;
margin-bottom: 10px;
margin-top: 5px;
}
.textlink,
.textlink:focus{
color: #ee2d24;
}
.textlink:hover{
color: #000000;
}
.btn.btn-full {
height: 50px;
line-height: 50px;
transition: all 0.15s;
}
.btn.form-group {
margin-bottom: 15px !important;
}
.btn-full.btn-cancel {
width: 100% !important;
}
.btn.btn-full:hover,
.btn.btn-full:focus {
background-color: #391754;
color: #ffffff;
}
.login-social {
width: 100%;
height: 50px;
line-height: 50px;
padding: 0 10px 0 50px;
text-align: center;
position: relative;
color: #ffffff;
}
.login-social button {
border: 0;
outline: none;
background-color: transparent;
width: 100%;
height: 100%;
}
.login-social i {
position: absolute;
top: 0;
left: 0;
width: 50px;
line-height: 50px;
font-size: 20px;
font-weight: 700;
color: #ffffff;
border-radius: 4px 0 0 4px;
}
.ic-fb {
background-color: #29437c;
}
.w-facebook {
background-color: #3b5999;
}
.ic-gp {
background-color: #be3a2b;
}
.w-googleplus {
background-color: #de4b39;
}
/**************************************
|
SEARCH
|
**************************************/
.find-img {
width: 180px;
min-height: 135px;
float: left;
position: absolute;
left: 15px;
top: 15px;
overflow: hidden;
border: 1px solid #eeeeee;
}
.box-find {
position: relative;
min-height: 165px;
border: 1px solid #eeeeee;
overflow: hidden;
padding: 0 15px 0 0;
}
.find-img figure {
height: 100%;
}
.find-img figure img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 200px;
}
.find-text-wrap {
position: relative;
width: 100%;
float: left;
padding: 15px 15px 0 210px;
height: 100%;
max-height: 200px;
overflow: hidden;
min-height: 150px;
}
/**************************************
|
NOTFOUND
|
**************************************/
.notfound,
.notfound > p,
.notfound > span,
.notfound > h1{
margin-bottom: 15px;
text-align: center;
width: 100%;
}
.underline {
width: 80px;
height: 2px;
background: #ee2d24;
margin: 14px auto;
}
/**************************************
|
ACCOUNT ASIDE
|
**************************************/
.setting-left {
padding: 0;
margin: 0;
width: 100%;
float: left;
background-color: #ffffff;
}
.profile-picture {
min-height: 200px;
height: 330px !important;
border: 1px solid #eeeeee;
padding: 30px 31px 10px 30px;
}
.profile-picture:hover {
background-color: transparent !important;
}
.profile-thumb {
width: 100%;
margin: 0 auto 15px;
height: 210px;
border: 1px solid #eeeeee;
background-color: #ffffff;
padding: 7px;
z-index: 5;
cursor: pointer;
position: relative;
overflow: hidden;
}
.profile-thumb:hover .image.image-placeholder {
opacity:1;
transition:all 0.25s;
}
.profile-thumb figure {
height: 100%;
width: 100%;
float: left;
overflow: hidden;
}
.profile-thumb figure img {
position: relative;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn-cycleDrop {
position: relative;
right: 0;
float: right;
width: 100%;
height: 50px;
line-height: 50px;
margin: 0;
border: 1px solid #eeeeee;
border-width: 0 1px 1px 1px;
background-color: #fafafa;
color: #999999;
font-size: 20px;
outline:none;
display:none;
}
.btn-cycleDrop:focus;
.btn-cycleDrop:hover{
background-color:#000000;
color:#ffffff;
}
.setting-ele {
list-style: none;
width: 100%;
float: left;
height: 50px;
line-height: 50px;
position: relative;
overflow: hidden;
background-color: #ffffff;
}
.setting-ele:hover,
.setting-ele.active:hover,
.setting-signout:hover {
background-color: #fafafa !important;
}
.setting-ele a:hover{
color: #000000; !important;
}
.setting-signout {
background-color: #c9011e;
text-align: center;
}
.setting-signout a {
color: #ffffff !important;
}
.setting-ele.active {
background-color: #fcfcfc;
}
.setting-ele a {
width: 100%;
float: left;
position: relative;
color: #999999;
border: 1px solid #eeeeee;
border-width: 0 1px 1px 1px;
padding: 0 10px 0 10px;
z-index: 4;
height: 50px;
}
.setting-ele.active a {
background-color: #fcfcfc;
color: #000000;
}
.setting-ele a:hover label {
background-color: #391754;
color: #ffffff;
}
.setting_ele.active a label {
background-color: #391754;
color: #fdd100;
}
.setting-num {
width: 30px;
height: 30px;
line-height: 30px;
background-color: #391754;
text-align: center;
color: #ffffff;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
font-size: 13px;
font-weight: 100;
cursor: pointer;
}
.setting-ele.active .setting-after{
display: block;
}
li.setting-ele.active a:after {
font-family: FontAwesome;
content: "\f04a";
top: 0;
right: -18px;
position: absolute;
font-size: 30px;
text-shadow: 0px 0px 0.1px #999999;
color: #ffffff;
opacity: 1;
float: right;
z-index: 6;
}
.profile-thumb .upload-image{
width: 100%;
height: 50px;
left: 0;
padding: 0;
position: absolute;
bottom: 0;
opacity: 0;
transition: all 0.25s;
}
.blog-preview-img .col-img-preview, .col-img-show {
position: relative;
float: left;
width: 100%;
height: 200px;
overflow: hidden;
background-size: cover;
border: 1px solid #d6d6d6;
margin-right: 5px;
margin-bottom: 5px;
}
.blog-preview-img .col-img-preview img, .col-img-show img {
position: absolute;
left: 50%;
top: 50%;
min-width: 250px;
min-height: 100px;
max-height: 350px;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.blog-preview-img .col-img-preview a, .col-img-show a{
display: none;
position: absolute;
font-size: 20px;
color: #353535;
z-index: 120;
margin-top: 40%;
margin-left: 90%;
text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}
.blog-preview-img .col-img-preview .img-hover, .col-img-show .img-hover{
opacity: 0.5;
filter: alpha(opacity=50);
}
.setting_num {
width: 30px;
height: 30px;
line-height: 30px;
background-color: #501f78;
text-align: center;
color: #ffffff;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
font-size: 13px;
font-weight: 100;
cursor: pointer;
}
/**************************************
|
UPLOAD IMAGE BUTTON
|
**************************************/
.image {
background: transparent;
box-sizing: border-box;
display: inline-block;
margin: 0;
position: absolute;
vertical-align: top;
width: 100%;
}
.image.image-placeholder {
width: 100%;
height: 100%;
left: 0;
padding: 0;
position: absolute;
top: 0;
opacity: 0;
transition: all 0.25s;
}
.image .image-placeholder-text {
color: #ffffff;
position: absolute;
float: left;
left: 75px;
margin: 0;
top: 50%;
transform: translateY(-50%);
}
.image.image-placeholder input[type='file'] {
z-index: 5;
}
.image .image-wrapper {
background: rgba(10, 10, 10, 0.58);
position: absolute;
width: 100%;
bottom: 0;
height: 50px;
}
.image.image-placeholder .image-wrapper i {
color: #ffffff;
font-size: 18px;
position: absolute;
left: 45px;
float: left;
line-height: 50px;
}
.image.image-placeholder .fileinput-button > span, .image.image-placeholder .image-browse > span {
display: none;
}
.image .fileinput-button input {
position: absolute;
top: 0;
right: 0;
height: 100%;
margin: 0;
border: solid transparent;
opacity: 0;
filter: alpha(opacity=0);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
@media only screen and (max-width: 1320px) {
/* For mobile phones: */
[class*="col-img-"] {
width: 100%;
height: 200px;
}
}
/**************************************
|
PROFILE WRAP
|
**************************************/
.account-wrap {
margin: 15px 0;
}
.text-bottom {
line-height: 20px;
}
/**************************************
|
ACCOUNT BAR
|
**************************************/
.head-bar {
background-color: #ffffff;
border-bottom: 1px solid #eeeeee;
margin-bottom: 15px;
padding: 0;
z-index: 1;
}
.text-cat {
font-size: 16px;
color: #000000;
font-weight: 600;
margin: 0;
width: 100%;
float: left;
padding-bottom: 15px;
padding-top: 15px;
}
/**************************************
|
ACCOUNT DASHBOARD
|
**************************************/
.bx-info {
padding: 10px 15px 15px 15px;
min-height: 170px;
height: auto;
border-radius: 0;
overflow: hidden;
width: 100%;
float: left;
position: relative;
background-color: #ffffff;
border: 1px solid #eeeeee;
}
.bx-info.box-row {
min-height: 100px;
}
.ft-title {
font-size: 15px;
line-height: 25px;
word-break: break-word;
height: 25px;
color: #000000;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
margin-top: 5px;
}
.right-box {
position: absolute;
right: 5px;
top: 1px;
width: auto;
margin: 0 5px 0 5px;
background-color: transparent;
}
.btn.btn-edit,
.btn.btn-create {
background: none;
color: #ee2d24;
height: 30px;
line-height: 28px;
min-width: 40px;
width: auto;
position: relative;
float: right;
cursor: pointer;
background-color: #ffffff;
outline:none !important;
margin-bottom: 0;
font-size: 13px;
}
.btn.btn-create{
color: #1abc9b;
}
.btn.btn-create:hover,
.btn.btn-create:hover:focus{
color: #199e8c;
box-shadow:0px 0px 0px #ffffff;
}
.btn.btn-edit:hover,
.btn.btn-edit:focus{
color: #b4241d;
background-color:#ffffff;
outline:none !important;
box-shadow:0px 0px 0px #ffffff;
}
.setting-link {
width: 100%;
float: left;
margin: 5px 0 0 0;
color: #ee2d24;
cursor: pointer;
}
.setting-link:hover,
.setting-link:focus{
color: #b4241d;
background-color:#ffffff;
outline:none !important;
box-shadow:0px 0px 0px #ffffff;
}
.btn.btn-editInfo {
float: right;
max-width: 160px;
margin: 0;
outline: none !important;
}
.btn.btn-editInfo:hover,
.btn.btn-editInfo:focus{
background-color:#000000;
color:#ffffff;
box-shadow:0px 0px 0px #ffffff;
}
.box-bottom {
padding: 15px 0;
margin: 15px 0 0 0;
border: 1px solid #eeeeee;
border-width: 1px 0 1px 0;
outline: none;
}
.form-horizontal .control-label {
padding-top: 14px;
font-weight: 500;
}
.btn.btn-default {
float: left;
}
.btn.btn-default,
.btn.btn-info,
.btn.btn-cancel {
width: 160px;
outline: none;
border: 0;
}
.btn.btn-cancel{
float: left;
background-color: #ce201f;
}
.btn.btn-info {
background-color: #1abc9b;
float: left !important;
}
.modal-footer .btn-info {
float: right !important;
}
.btn.btn-cancel:hover,
.btn.btn-default:hover,
.btn.btn-info:hover,
.btn.btn-default:focus,
.btn.btn-info:focus{
background-color:#000000;
color:#ffffff;
outline:none;
}
.form-select {
padding: 0 0.75rem;
color: #999999;
background-color: #fff;
border: 1px solid #eeeeee;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
height: 50px;
background-repeat: no-repeat;
background-image: url(../images/arrows-bg.svg), linear-gradient(#f5f5f5, #f5f5f5), linear-gradient(#eeeeee, #eeeeee);
background-position: calc(100% - 12px) -28px, 100%, calc(100% - 33px) 0;
background-size: auto, 33px 100%, 1px 100%;
padding-right: 44px;
width: 100%;
outline: none;
margin-bottom: 15px;
}
button.close:focus {
outline: none;
}
.modal-body {
padding: 15px !important;
}
.box.box-form {
padding: 0 15px;
min-height: 50px;
}
.box-address {
width: 49.7%;
display: inline-block;
padding: 0 7.5px;
overflow: hidden;
position: relative;
z-index: 1055;
}
.box-inner {
width: 100%;
float: left;
border: 1px solid #eeeeee;
padding: 15px;
}
.check-ed{
color:#cccccc;
cursor: pointer;
position: absolute;
top: 10px;
right: 20px;
float: left;
width: 24px;
height: 24px;
z-index: 1060;
}
.check-ed:hover,
.check-ed:focus,
.check-ed.active{
color:#1abc9b;
}
.box.box-info {
padding: 0 15px;
}
.pos-rela {
position: relative;
}
/**************************************
|
ACCOUNT ...
|
**************************************/
.table-haeder {
text-align: center;
background-color: #eeeeee;
border: 1px solid #eeeeee;
border-width: 1px 0px 1px 1px;
line-height: 50px;
}
.table-haeder [class^='col'] {
border-right: 1px solid #e5e5e5;
height: 100%;
}
.table-haeder [class^='col']:last-child {
border: 0;
}
.border-Right {
border-right: 1px solid #e5e5e5;
}
.head-line {
height: 50px;
position: relative;
background-color: #ffffff;
border-bottom: 1px solid #e5e5e5;
line-height: 50px;
margin-bottom: 15px;
z-index: 1;
}
.text-note {
font-size: 14px;
font-weight: 400;
text-align: left;
height: 20px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-note:hover{
color:#c9011e;
}
.text-gray {
color: #999999;
}
.text-black {
color: #000000;
}
.border-bottom {
border-bottom: 1px solid #eeeeee;
}
.table-group {
border: 1px solid #eeeeee;
border-width: 0 1px 0 1px;
background-color: #ffffff;
}
.text-yellow {
color: #FFC107;
}
.text-red {
color: #c9011e !important;
}
.cursor-pointer {
cursor: pointer;
}
/**************************************
|
ACCOUNT ...
|
**************************************/
.return-print {
line-height: 50px;
font-size: 13px;
margin: 0;
text-align: center;
outline: none;
background-color: #501f78;
color: #ffffff;
border: 1px solid #f3f3f3;
font-weight: 200;
transition: all 0.15s;
min-height: 40px;
min-width: 160px;
float: right;
padding: 0 10px;
cursor: pointer;
}
.return-print:hover{
background-color:#391754;
color: #ffffff;
}
/**************************************
|
ACCOUNT ORDER DETAIL
|
**************************************/
.orderDetail-row {
border: 1px solid #eeeeee;
padding: 0;
line-height: 50px;
margin: 0 0 15px 0;
}
.order-icon {
line-height: 50px;
margin: 0 0 0 0;
float: left;
font-size: 18px;
padding: 0 5px;
}
.orderDetail-row > li {
width: 25%;
word-break: break-word;
float: left;
padding: 0 10px;
}
.success-icon,
.with-error {
font-size: 14px;
position: relative;
top: 2px;
margin: 0 5px 0 0;
color: #ffffff;
height: 18px;
width: 18px;
border-radius: 50%;
background-color: #1abc9b;
line-height: 18px;
text-align: center;
}
.with-error {
background-color: #ee2d24;
}
.orderDetail-bottom {
margin: 15px 0 0 0;
border-top: 1px dotted #999999;
padding: 14px 0 0 0;
}
.return-group {
width: 100%;
float: left;
position: relative;
cursor: pointer;
}
ul.detail-row {
padding: 15px;
border: 1px solid #eeeeee;
width: 100%;
float: left;
margin-bottom: 15px;
position: relative;
}
ul.detail-row.return-row {
padding: 15px 15px 15px 30px;
}
.detail-row li {
float: left;
padding: 0;
height: 80px;
text-align: center;
width: 25%;
overflow: hidden;
}
ul.detail-row li:nth-of-type(3){
text-align:right
}
ul.detail-row li span,
ul.detail-row li a,
ul.detail-row li p,
ul.detail-row li label {
color: #000000;
text-align: center;
}
.detail-image {
height: 80px;
width: 100px;
float: left;
}
.detail-image figure {
height: 100%;
overflow: hidden;
}
.detail-image figure img {
max-width: 100%;
width: 120px;
height: auto;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.check-return {
position: absolute;
top: 5px;
right: 6px;
font-size: 22px;
cursor: pointer;
color: #cccccc;
}
.return-group:hover .check-return,
.return-group:focus .check-return,
.return-group.active .check-return {
color:#1abc9b;
}
.return-textarea {
display: none;
}
.box-info {
padding: 10px 15px 15px 15px;
min-height: 170px;
height: auto;
border-radius: 0;
overflow: hidden;
width: 100%;
float: left;
position: relative;
background-color: #ffffff;
border: 1px solid #eeeeee;
}
/**************************************
|
ORDER CHECK RETURN
|
**************************************/
.group-expand {
padding: 15px;
border: 1px solid #eeeeee;
display: none;
}
ul.return-product {
width: 100%;
float: left;
padding: 0;
}
ul.return-product li {
width: 100%;
float: left;
margin-bottom: 10px;
}
.icon-click {
font-size: 20px;
position: relative;
top: 5px;
margin: 0 5px 0 0;
cursor: pointer;
color: #cccccc;
}
.icon-coupons.active,
.icon-coupons:focus,
.icon-click.active,
.icon-click:focus,
.icon-click:hover {
color: #1abc9b;
}
/**************************************
|
ORDER AGEN
|
**************************************/
ul.return-agent {
width: 100%;
float: left;
padding: 0;
}
.thumb-agent {
width: 100px;
height: 100px;
overflow: hidden;
float: left;
margin: 0 0 0 15px;
padding: 10px;
border: 1px solid #e5e5e5;
}
.icon-agent {
float: left;
top: 0;
}
.icon-agent.active{
color:#1abc9b;
}
.thumb-agent figure {
height: 100%;
}
.thumb-agent figure img {
max-width: 100%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.selected-agent {
height: 100px;
position: relative;
}
.selected-agent > a {
position: relative;
top: 50%;
transform: translateY(-50%);
float: left;
margin: 0 0 0 15px;
color: #000000;
cursor: pointer;
}
.selected-agent > a:hover,
.selected-agent > a:focus{
color:#1abc9b;
text-decoration:underline !important;
}
/**************************************
|
RETURN DETAIL
|
**************************************/
.return-boxhead:last-child .return-h,
.return-boxhead:last-child .return-b {
text-align: left !important;
width: 50%;
float: left;
}
.return-boxhead > .bx-info {
min-height: 100px;
}
.cour-img {
width: 55px;
position: relative;
height: 30px;
}
.cour-img figure {
height: 100%;
float: left;
width: 100%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.cour-img figure img {
max-width: 80%;
}
.return-article {
width: 100%;
float: left;
margin-bottom: 15px;
padding: 15px;
background-color: #f3f3f3;
}
.return-print {
line-height: 50px;
font-size: 13px;
margin: 0;
text-align: center;
outline: none;
background-color: #501f78;
color: #ffffff;
border: 1px solid #f3f3f3;
font-weight: 200;
transition: all 0.15s;
min-height: 40px;
min-width: 160px;
float: right;
padding: 0 10px;
cursor: pointer;
}
.return-print:hover{
background-color:#391754;
color: #ffffff;
}
.return-boxhead li {
float: left;
width: 100%;
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.return-detail {
padding: 0;
margin-bottom: 0;
}
.return-boxhead {
margin: 0 0 15px 0;
position: relative;
float: left;
}
.bx-info span > b {
width: 100px;
font-weight:400;
float: left;
}
.text-header {
font-size: 16px;
line-height: 25px;
word-break: break-word;
color: #000000;
font-weight: 400;
margin: 15px 0;
width: 100%;
float: left;
}
/**************************************
|
ASIDE DROP
|
**************************************/
.btn-cycleDrop {
position: relative;
right: 0;
float: right;
width: 100%;
height: 50px;
line-height: 50px;
margin: 0;
border: 1px solid #eeeeee;
border-width: 0 1px 1px 1px;
background-color: #fafafa;
color: #999999;
font-size: 20px;
outline:none;
display:none;
}
.btn-cycleDrop:focus;
.btn-cycleDrop:hover{
background-color:#000000;
color:#ffffff;
}
/**************************************
|
COLOR
|
**************************************/
.text-green{
color:#1abc9b;
}
/**************************************
|
DESCRIPTION
|
**************************************/
.description img,
.description iframe {
max-width: 100%;
width: auto;
min-width: 450px;
min-height: auto;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.description p,
.description span,
.description label,
.description a {
font-size: 14px;
color: #767679;
margin: 0 0 10px 0;
width: 100%;
float: left;
line-height: 20px;
font-weight: 400;
}
.description a {
color:#ee2d24;
}
.description a:hover{
color:#ee2d24;
text-decoration:underline !important;
}
.description {
overflow: hidden;
}
.description iframe {
min-width: 80%;
min-height: 400px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.description ul,
.description ol {
width: 100%;
float: left;
margin-bottom: 15px;
font-size: 14px;
}
.description ul li,
.description ol li {
width: 100%;
float: left;
list-style: inherit;
margin-bottom: 5px;
}
.description ul li a,
.description ol li a {
color: #ee2d24;
}
.description ul li a:hover,
.description ol li a:hover {
text-decoration: underline !important;
}
.description hr {
width: 100%;
float: left;
}
/**************************************
|
ACCOUNT PAGINATION
|
**************************************/
.acc-pagination {
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-bottom: 15px;
}
.acc-pagination li {
float: left;
list-style: none;
}
.acc-pagination li a {
padding: 10px 10px 10px 10px;
color: #767679;
float: left;
}
.acc-pagination li a:hover,
.acc-pagination li a:focus,
.acc-pagination li a.active{
color:#c9011e !important;
}
/**************************************
|
PRICE GROUP
|
**************************************/
.sale-price {
color: #c1c1c1;
font-weight: 600;
margin-bottom: 5px;
margin-right: 5px;
}
.old-price {
color: #c1c1c1;
font-weight: 100;
margin-bottom: 5px;
margin-right: 5px;
text-decoration: line-through;
}
.new-price {
color: #ee2d24 !important;
font-weight: 600;
margin-bottom: 5px;
margin-right: 5px;
}
/**************************************
|
FAVORITE
|
**************************************/
.text-menu {
width: 100%;
float: left;
padding: 15px 10px 15px 160px;
height: 100%;
position: relative;
}
.box-itemmenu {
border: 1px solid #eeeeee;
padding: 0;
min-height: 100px;
border-radius: 0;
overflow: hidden;
width: 100%;
float: left;
position: relative;
background-color: #ffffff;
height: 150px;
}
.box-img {
width: 150px;
height: 150px;
position: absolute;
top: 0;
left: -1px;
float: left;
border-radius: 0;
border-right: 1px solid #eee;
z-index: 2;
cursor: pointer;
}
.box-img figure {
height: 100%;
}
.box-img figure img {
position: relative;
width: 80%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.icon-close {
width: 22px;
height: 22px;
text-align: center;
line-height: 22px;
color: #ffffff;
font-size: 16px;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
z-index: 10;
background-color: #ee2d24;
border-radius: 0 0 0 4px;
}
.icon-close:hover,
.icon-close:focus {
color: #ffffff;
background-color:#000000;
}
.menu-description {
font-size: 14px;
color: #999999;
font-weight: 100;
text-align: left;
height: 54px;
line-height: 18px;
overflow: hidden;
word-break: break-word;
margin-bottom: 5px;
}
.products-title {
width: 100%;
float: left;
margin-bottom: 5px;
font-size: 15px;
line-height: 25px;
word-break: break-word;
height: 25px;
color: #000000;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.25s;
cursor: pointer;
}
.products-title:focus,
.products-title:hover {
color:#501f78;
}
/**************************************
|
ACCOUNT ADDRESS
|
**************************************/
.right-box i {
font-size: 15px;
position: relative;
top: 3px;
margin: 0 3px 0 3px;
}
/**************************************
|
CHECKOUT
|
**************************************/
.checkout-head {
height: 50px;
border: 1px solid #eeeeee;
background-color: #f9f9f9;
padding: 0 10px;
}
.icon-addAddress {
position: relative;
float: right;
font-size: 21px;
margin-right: 10px;
top: 0;
color: #252525;
cursor: pointer;
margin: 0;
z-index: 20;
margin-left: 5px;
}
.guide-title span {
float: right;
}
.icon-addAddress:hover {
color: #1abc9b;
}
.icon-addAddress i {
position: relative;
float: right;
font-size: 21px;
margin-right: 10px;
top: 0;
/* color: #252525; */
cursor: pointer;
margin: 0;
z-index: 20;
margin-left: 5px;
}
.checkout-body {
min-height: 100px;
height: auto;
border-radius: 0;
overflow: hidden;
width: 100%;
float: left;
position: relative;
background-color: #ffffff;
border: 1px solid #eeeeee;
border-width: 0 1px 1px 1px;
}
.checkout-body-wrap {
width: 100%;
float: left;
padding: 10px 15px 15px 50px;
}
.check-address {
float: left;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
color: #cccccc;
cursor: pointer;
z-index: 5;
}
.checkout-body:hover {
background-color: #f9f9f9;
cursor: pointer;
}
.checkout-body:hover .btn.btn-edit,
.checkout-body:hover .btn.btn-create{
background-color: #f9f9f9;
}
.checkout-body.active,
.checkout-body.active .btn.btn-edit,
.checkout-body.active .btn.btn-create{
background-color: #f9f9f9;
}
.checkout-body.active .check-address{
color:#1abc9b;
}
.guide-title .icon-display {
font-size: 25px;
float: left;
margin-right: 10px;
position: relative;
top: 0;
color: #252525;
}
.guide-title {
font-size: 16px;
line-height: 25px;
word-break: break-word;
height: 25px;
color: #000000;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 5px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.guide-title span{
font-size: 14px;
}
/**************************************
|
CHECKOUT SIDEBAR
|
**************************************/
.checkout-sidebar {
width: 100%;
float: left;
position: relative;
padding: 15px;
border: 1px solid #eeeeee;
border-top: 2px solid #501f78;
}
.i-order {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: #cccccc;
color: #ffffff;
font-size: 14px;
cursor: pointer;
float: left;
position: absolute;
top: 0px;
left: -16px;
transition: all 0.25s;
}
.i-order:hover {
background-color: #ee2d24;
}
.bx-order {
/* padding: 0 60px 0 25px; */
position: relative;
}
.list-option {
padding: 0 0 0 30px;
font-size: 12px;
margin: 0 0 5px 0;
}
.te-dtail {
color: #999999;
margin-bottom: 3px;
font-weight: 100;
}
.i-summ {
position: absolute;
left: 0;
font-size: 18px;
top: 2px;
color: #c9011e;
}
.p-order {
position: absolute;
top: 0;
right: 0;
word-break: break-word;
width: 100px;
/* padding: 0 5px; */
text-align: right;
}
.btn-orders {
background-color: #c9011e;
border-radius: 0 !important;
color: #ffffff;
height: 48px;
line-height: 48px;
padding: 0;
border: 0;
transition: all 0.25s;
}
.btn-orders.form-group:hover ,
.btn-orders.form-group:focus {
background-color: #a00017;
color:#ffffff;
}
.icon-pre {
position: relative;
top: 5px;
font-size: 18px;
margin-right: 5px;
}
.checkout-bottom {
padding-top: 15px;
border-top: 1px dashed #e8e8e8;
margin-top: 15px;
color: #000000;
font-weight: 500;
}
.checkout-below {
padding-top: 30px;
border-top: 1px dashed #e5e5e5;
margin-top: 15px;
color: #000000;
font-size: 20px;
font-weight: 600;
margin-bottom: 30px;
}
.spaceTop-15{
margin-top: 15px;
}
/**************************************
|
NAV TABS
|
**************************************/
.navscript {
width: 100%;
}
.nav-tabs>li{
width: auto;
}
.nav.nav-tabs {
margin-bottom: 10px;
border: 0;
width: 100%;
float: left;
}
.tab-title {
line-height: 40px;
padding: 0 25px 0 10px;
font-size: 18px;
background-color: #eeeeee;
color: #000000;
min-height: 40px;
float: left;
position: relative;
z-index: 20;
width: auto;
margin-right: 0;
overflow: visible;
}
.tab-title span {
float: left;
margin-right: 5px;
}
.nav-tabs>li>a {
color: #000000;
padding: 8px 10px;
min-width: 67px;
overflow: hidden;
}
.nav-tabs>li.active>a:focus {
border: 0;
background: #501f78;
color: #ffffff;
}
.nav-tabs>li>a {
background-color: #eeeeee;
color: #000000;
border: 0;
border-radius: 0;
border-width: 0;
text-align: center;
}
.nav-tabs>li.active>a {
background: #501f78;
color: #ffffff;
border: 0;
min-height: 45px;
}
.nav-tabs>li.active>a [class^='h']{
color:#ffffff;
}
.nav-tabs>li>a:focus{
border:0;
}
.nav-tabs>li>a:hover {
background-color: #501f78;
color: #ffffff !important;
border:0;
}
.nav-tabs>li>a:hover [class^='h']{
color:#ffffff !important;
}
.nav-tabs>li.active>a:hover {
border:0;
background-color: #501f78;
color: #ffffff !important;
}
.nav-tabs>li>a:focus{
color:#ffffff !important;
}
.navscript {
width: 100%;
}
.nav-tabs>li>a {
margin-bottom: 5px;
margin-right: 0;
min-height: 45px;
border-right: 1px solid #e5e5e5;
}
.nav-tabs>li>a>h2 {
font-size: 13px;
margin: 3px 0 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
width: 100%;
line-height: 22px;
}
.nav-spas li {
min-width: 50px;
margin: 0;
width: 33.3333333%;
}
.tab-title::after {
content: '';
background-color: #ee2d24;
position: absolute;
z-index: 20;
display: block;
height: 45px;
width: 100%;
left: inherit;
right: -50%;
top: -2px;
-webkit-transform: skew(0, -40deg);
transform: skew(0, -45deg);
}
.t-titilBar {
background-color: #d2d2d2;
padding: 0;
height: 40px;
overflow: hidden;
}
.t-titleWrap {
width: auto;
float: left;
padding-right: 50px;
overflow: hidden;
height: 100%;
}
.text-cmt {
padding: 0 0 10px 0;
font-size: 18px;
}
.checkout-step .tab-content {
padding: 15px;
width: 100%;
float: left;
border: 1px solid #eeeeee;
margin-bottom: 15px;
}
.check-remember {
position: relative;
top: 6px;
margin: 0 5px 0 0;
cursor: pointer;
color: #bbbbbb;
}
.check-remember.active{
color: #1abc9b;
}
.payment-agent {
border: 1px solid #e5e5e5;
cursor: pointer;
}
.view-expand {
display: none;
}
.blank-space {
min-height: 400px;
text-align: center;
}
/**************************************
|
TIPS
|
**************************************/
.tip-img {
width: 80px;
height: 80px;
float: left;
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
}
.tip-img figure {
height: 100%;
}
.tip-img img {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 65px;
}
.tip-wrap {
height: auto;
padding: 0 0 0 110px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.payment-agent {
border: 1px solid #eeeeee;
cursor: pointer;
}
.payment-agent.active {
background-color: #f3f3f3;
}
.bx-tipInner {
height: 100px;
overflow: hidden;
float: left;
position:relative;
padding: 0 20px 0 0;
}
/************************
ANIMATION CHECK SUCCESS
*************************/
svg {
width: 100px;
display: block;
margin: 10px auto 10px;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
}
.path.circle {
-webkit-animation: dash 0.9s ease-in-out;
animation: dash 0.9s ease-in-out;
}
.path.line {
stroke-dashoffset: 1000;
-webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
animation: dash 0.9s 0.35s ease-in-out forwards;
}
.path.check {
stroke-dashoffset: -100;
-webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
animation: dash-check 0.9s 0.35s ease-in-out forwards;
}
p {
/*text-align: center;
margin: 20px 0 60px;*/
font-size: 1.125em;
}
.success {
color: #1abc9b;
margin-bottom: 15px;
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes dash-check {
0% {
stroke-dashoffset: -100;
}
100% {
stroke-dashoffset: 900;
}
}
@keyframes dash-check {
0% {
stroke-dashoffset: -100;
}
100% {
stroke-dashoffset: 900;
}
}
/*li.mnactive a {
color: #e3cdf5;
}*/
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
width: 50px;
text-align: center;
padding: 14px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #999999 !important;
text-decoration: none;
background-color: #fff;
border: none;
cursor: pointer;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
z-index: 3;
cursor: pointer;
background-color: rgba(51, 122, 183, 0);
font-weight: 600;
color: #464645 !important;
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
z-index: 2;
color: #23527c !important;
background-color: #eee;
border-color: #ddd;
}
.prev {
display: none;
}
.next {
display: none;
}
/*------ NEW CREATE*/
.overlay.actived {
width: 100%;
height: 100%;
opacity: .8;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.popup {
z-index: 0;
top: 0;
left: 50%;
min-width: 620px;
margin: 0 auto;
opacity: 0;
overflow: hidden;
position: fixed;
cursor: pointer;
transform: translateX(-50%);
}
.popup.active {
z-index: 100;
opacity: 1;
}
.mfp-wrap {
max-width: 620px;
margin: 0 auto;
min-height: 250px;
background-color: #ffffff;
padding: 15px;
position: relative;
cursor: default;
top: 20px;
margin-top: 20px;
}
.text-secondary{
color: #391754;
text-align: left;
}
.close-button {
position: absolute;
top: 0.5rem;
right: 1rem;
color: #F44336;
font-size: 10px;
background: transparent;
border: 0;
padding: 0;
outline: none;
z-index: 2;
}
.popup.active article.box-holder.border-top{
border-top: 0 !important;
text-align: left;
}
h4.text-secondary > span {
text-align: right;
float: right;
padding-right: 15px;
}
.mfp-wrap .post-content-image,
.mfp-wrap .post-content-image a {
height: auto;
}
.mfp-wrap .post-content-image > figure > a > img {
min-width: 100%;
min-height: auto;
top: 0;
left: 0;
transform: translate(0, 0);
max-width: 50%;
width: 50%;
}
.mfp-wrap .post-content-image {
height: 350px;
height: auto;
}
button.btn.addtocart i.material-icons.prev {
display: block;
line-height: 52px;
float: left;
text-align: center;
width: auto !important;
padding: 0;
margin: 0 0 0 0px;
position: relative;
left: 20%;
font-size: 18px;
}
.notfound {
margin-top: 140px;
min-height: 200px;
}
.notfound-wrap {
text-align: center;
font-size: 200%;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.delivery-information {
min-height: 100px;
height: auto;
border-radius: 0;
overflow: hidden;
width: 100%;
float: left;
position: relative;
background-color: #ffffff;
border: 1px solid #eeeeee;
border-width: 0 1px 1px 1px;
}
.delivery-information-form {
padding: 20px 30px 20px 0;
}
.delivery-information-form .control-label {
padding-top: 16px;
font-weight: 500;
}
.delivery-information-form .input-info {
padding: 10px;
}
.delivery-information-form .form-bottom {
margin-top: 20px;
}
textarea.error {
border: 1px solid #F44336;
}
.form-gender {
padding-top: 9px;
margin-bottom: 25px;
height: auto;
float: left;
}
.form-gender div {
width: auto;
float: left;
margin-right: 25px;
}
#add-address-ch {
padding-right: 10px;
cursor: pointer;
}
#add-address-ch i {
color: unset !important;
}
#add-address-ch:hover {
color: #1abc9b;
}
.box-row.text-green{
margin-top: 5px;
}
.text-green a {
color: #1abc9b;
}
.text-green a:hover {
text-decoration-line: underline;
}