/*
Template Name: HTML Construction Template
Author: yaminncco
Colors:
Body : #64728A
Headers : #004
Primary : #FFD626
Dark : #001232
Grey : #F8F8F8 #EEE
Fonts: Poppins
Table OF Contents
------------------------------------
1 > General
2 > Logo
3 > Navigation
4 > Home
5 > About
6 > Numbers
7 > Portfolio
8 > Services
9 > Pricing
10 > Testimonial
11 > Partners
12 > Blog
13 > Blog post
14 > Blog sidebar
15 > Footer
16 > Responsive
17 > Accordion
18 > Owl theme
19 > Preloader
------------------------------------*/
/*------------------------------------*\
General
\*------------------------------------*/
/* --- typography --- */
body {
font-family: 'Roboto', sans-serif !important;
font-size: 16px;
line-height: 24px;
color: #000000;
letter-spacing: 0.3px;
overflow-x: hidden;
background: #f2f2f2;
}
h1,h2,h3,h4,h5,h6 {
color: #000000;
font-weight: 700;
margin-top: 10px;
margin-bottom: 15px;
}
h1 {
font-size: 35px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 16px;
}
a {
color: #004;
text-decoration: none;
}
p span {
font-family: 'roboto' !important;
}
a:hover,
a:focus{
color: #004;
text-decoration: none;
outline: none
}
ul,ol{
margin: 0;
padding: 0;
list-style: none
}
table{
width: 100% !important;
}
.notice{
padding: 15px;
}
.no-padding{
padding: 0 0 0 0 !important;
}
.no-boder{
border: none !important;
}
.no-display{
display: block !important;
}
.none-display{
display: none !important;
}
.boder-bottom{
border-bottom: 1px solid #ddd;
}
.boder-top{
border-top: 1px solid #ddd;
}
.boder-bottom-20{
border-bottom: 20px solid #ddd;
}
.box-shadow{
box-shadow: 0px 0px 8px #dddddd;
}
.padding-top-50{
padding-top: 50px;
}
.padding-right-20{
padding-right: 30px !important;
}
.padding-left-right-0{
padding-left: 0px !important;
padding-right: 0px !important;
}
.white-text {
color: #FFF !important;
font-size: 16px;
}
.color-xam-text {
color: #b7b7b7 !important;
}
.text-align-left{
text-align: left;
}
.text-align-center{
text-align: center;
}
.img-100{
width: 100%;
}
.boder_bottom_100{
border-bottom: 1px solid #80808047;
}
.main-name {
font-size: 1.5rem;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 20px;
}
/* --- Section --- */
.section {
position: relative;
}
.md-section {
padding-top: 30px;
padding-bottom: 30px;
}
.sm-section {
padding-top: 30px;
padding-bottom: 30px;
}
.sm-section-1 {
padding-top: 30px;
padding-bottom: 0px;
}
.sm-section-2 {
padding-top: 10px;
padding-bottom: 10px;
}
.sm-section-3 {
padding-top: 0px;
padding-bottom: 50px;
}
.sm-section-4 {
padding-top: 15px;
padding-bottom: 15px;
}
.sm-section-5 {
padding: 15px;
}
.sm-section-6 {
margin-bottom: 30px;
}
.sm-section-7 {
margin-left: 45px;
}
.sm-section-8 {
padding: 15px;
}
.sm-section-9 {
margin-bottom: 40px;
}
.sm-section-10 {
margin-top: 64px;
}
.sm-section-11 {
padding-top: 15px;
padding-bottom: 15px;
}
.sm-section-12 {
padding: 0px;
}
.sm-section-13 {
padding-bottom: 30px;
}
.sm-section-14 {
padding-top: 30px;
}
.sm-section-15 {
padding-left: 15px;
padding-right: 15px;
}
.sm-section-16 {
padding-left: 30px;
padding-right: 15px;
}
.sm-section-17 {
padding-top: 15px;
}
.sm-section-18 {
padding-bottom: 20px;
}
.sm-section-19 {
padding-bottom: 15px;
}
.xs-section {
padding-top: 30px;
padding-bottom: 30px;
}
.width-20{
width: 20%;
}
/* --- Background Section --- */
.bg-main {
background-color: #FFD626;
}
.bg-grey {
background-color: #ffffff;
}
.bg-dark {
background-color: #001232;
}
/* --- Background Image Section --- */
.bg-img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-size: cover;
background-position: center;
background-attachment:fixed;
}
.bg-img.bg-half{
width: 50%;
background-attachment:scroll;
position: inherit;
}
.bg-img.bg-half.bg-right {
left: 50%;
}
.bg-img.overlay:after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.9;
}
.bg-img.overlay:after {
background-color: #FFF;
}
.bg-img.bg-half.overlay:after {
display: none;
}
.padding-bottom-0{
padding-bottom: 0px;
}
.margin-bottom{
margin-bottom: 30px;
}
.margin-bottom-20{
margin-bottom: 20px;
}
.padding-15{
padding: 0 15px;
}
.padding-15-0{
padding: 15px 0;
}
.animate-box-1{
height: 600px;
}
.font-weight-bold{
font-weight: bold;
}
.clear{clear: both;}
@media only screen and (max-width: 991px) {
.bg-img.bg-half.overlay:after {
display: block;
}
.bg-img.bg-half {
width: 100%;
}
.bg-img.bg-half.bg-right {
left: 0%;
}
}
/* --- Section Header --- */
.section-header {
margin-bottom: 20px;
}
.section-header-20 {
margin-bottom: 20px;
}
.section-header-30 {
margin-bottom: 30px;
}
.title {
position: relative;
padding-left: 0px;
text-transform: uppercase;
font-size: 24px;
line-height: 29px;
color: #000044;
margin-top: 20px;
margin-bottom: 20px;
font-weight: bold;
}
.title-h2 {
font-size: 16px;
}
.title-productdeteal {
position: relative;
padding-left: 0px;
text-transform: uppercase;
font-size: 16px;
margin-top: 20px;
margin-bottom: 20px;
left: -15px;
font-weight: bold;
}
.title-footer {
position: relative;
padding-left: 0px;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
margin-top: 20px;
margin-bottom: 20px;
font-weight: bold;
}
.heading-meta{
font-size: 2.4rem;
font-weight: 500;
color: #333;
}
.text-center .title {
display: inline-block;
}
.breadcrumb{color: #004;}
.title:after {
content: "";
position: absolute;
left: -15px;
top: 0;
bottom: 0;
width: 10px;
/*background-color: #FFD626;*/
}
.sub-title {
color: #64728A;
margin-bottom: 0px;
}
/* --- Buttons --- */
.main-button , .secondary-button {
display: inline-block;
position: relative;
padding: 10px 30px;
border: 1px solid transparent;
z-index: 1;
}
.main-button {
background-color: #001232;
color: #FFF;
}
.secondary-button {
background-color: #FFD626;
color: #004;
}
.main-button:after , .secondary-button:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 0%;
-webkit-transition: 0.2s height;
transition: 0.2s height;
z-index: -1;
}
.main-button:after {
background-color:#FFD626;
}
.secondary-button:after {
background-color:#001232;
}
.main-button:hover:after , .secondary-button:hover:after {
height: 100%;
}
.main-button:hover {
color: #004;
}
.main-button:focus {
color: #FFF;
}
.secondary-button:hover {
color: #FFF;
}
/* --- Text Link --- */
.text-link > span {
position: relative;
z-index: 1;
padding: 5px 8px;
}
.text-link:hover > span {
color: #004;
}
.text-link > span:after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
background-color: #FFD626;
z-index: -1;
-webkit-transition: 0.2s height;
transition: 0.2s height;
}
.text-link:hover > span:after {
height: 100%;
}
/* --- Text Link index--- */
.text-link-index > span {
position: relative;
z-index: 1;
padding: 5px 8px;
border: 1px solid #ffd626;
border-radius: 2px;
color: #ffd626 i !important;
}
.text-link-index:hover > span {
color: #004;
}
.text-link-index > span:after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
background-color: #FFD626;
z-index: -1;
-webkit-transition: 0.2s height;
transition: 0.2s height;
}
.text-link-index:hover > span:after {
height: 100%;
}
/* -- Input -- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="url"], input[type="tel"], textarea {
/*height: 40px;
width: 100%;
border: 1px solid #64728A;
background: transparent;
padding-left: 15px;
padding-right: 15px;*/
}
textarea {
padding: 10px 15px;
min-height: 90px;
resize: vertical;
}
/*------------------------------------*\
Logo
\*------------------------------------*/
.navbar-brand {
padding: 0;
}
.navbar-brand .logo {
display: inline-block;
margin-top: 5px;
}
.navbar-brand .logo > img {
max-height: 40px;
}
/*------------------------------------*\
Navigation
\*------------------------------------*/
#header {
position:relative;
z-index:10;
}
#header .navbar {
margin-bottom: 0px;
border-radius: 0px;
border: none;
}
#header .nav li a:hover , #header .nav li a:focus {
background-color: transparent;
}
.lang_con{
position: relative;
padding-top: 5px;
}
#flag_vi{
display:inline-block;
background:url(../img/vi.png) no-repeat;
width:24px;
height:18px;
}
#flag_en{
display:inline-block;
background:url(../img/en.png) no-repeat;
width:24px;
height:18px;
}
/* --- Top Navigation --- */
#top-navbar {
background-color: #001232;
}
#top-navbar .nav li a {
color: #FFF;
padding-top: 3px;
padding-bottom: 3px;
}
#top-navbar .nav li a i {
font: normal normal normal 14px/1 FontAwesome;
height: 24px;
width: 24px;
text-align: center;
line-height: 21px;
color: #FFD626;
border: 2px solid #FFD626;
border-radius: 50%;
margin-right: 5px;
font-size: 14px;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
#top-navbar .nav li a:hover i {
background-color: #FFD626;
color: #004;
}
/* --- Main Navigation --- */
#main-navbar {
background-color: #FFF;
}
#main-navbar.fixed-navbar {
position: fixed;
left: 0;
right: 0;
top: 0;
-webkit-box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.15);
z-index: 10;
}
/* --- Default Dropdown --- */
@media only screen and (min-width: 768px) {
.has-dropdown {
position: relative;
}
.has-dropdown:after {
font-family: 'FontAwesome';
content: "\f0d7";
-webkit-transition: 0.2s -webkit-transform;
transition: 0.2s -webkit-transform;
transition: 0.2s transform;
transition: 0.2s transform, 0.2s -webkit-transform;
position: absolute;
right: 5px;
font-size: 10px;
color: #004;
top: 15px;
}
.dropdown {
opacity: 0;
visibility: hidden;
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
position: absolute;
width: 500px;
background-color: #FFF;
border: 1px solid #EEE;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.main-navbar > .has-dropdown > .dropdown .dropdown {
top: 0px;
left: 100%;
}
.has-dropdown:hover > .dropdown {
opacity:1;
visibility:visible;
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.dropdown li {
border-bottom: 1px solid #EEE;
}
.dropdown li:nth-last-child(1) {
border-bottom: 0px;
}
.dropdown li a {
display: block;
padding: 5px 10px;
-webkit-transition: 0.2s -webkit-transform;
transition: 0.2s -webkit-transform;
transition: 0.2s transform;
transition: 0.2s transform, 0.2s -webkit-transform;
}
.dropdown li a:hover {
-webkit-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
-webkit-box-shadow: -4px 0px 0px 0px #FFD626;
box-shadow: -4px 0px 0px 0px #FFD626;
}
#main-navbar div.container{
display: flex;
justify-content: space-between;
}
#main-navbar div.container .navbar-header{order: 1;}
#main-navbar div.container .navbar-search{order: 4;}
#main-navbar div.container .navbar-nav{order: 2;}
#main-navbar div.container .shopping-cart{
order: 3;
}
.d-block{
display: block!important;
font-size: 12px;
}
,.container:after,.container:before{
display: table;
content: none;
}
}
/* --- Mobile Nav --- */
@media only screen and (max-width: 767px) {
#main-navbar {
padding-top: 0px;
padding-bottom: 0px;
}
.main-navbar {
margin: 0px -15px;
border-top: 1px solid #EEE;
max-height: 0;
overflow-y: scroll;
-webkit-transition: 0.3s max-height;
transition: 0.3s max-height;
}
.main-navbar li {
border-bottom: 1px solid #EEE;
}
.main-navbar.main-navbar-collapsed {
max-height: 500px;
}
/* Mobile Dropdown */
.has-dropdown {
position: relative;
}
.has-dropdown:after {
font-family: 'FontAwesome';
content: "\f067";
position: absolute;
right: 10px;
font-size: 10px;
color: #004;
top: 10px;
}
.has-dropdown.dropdown-collapsed:after {
content: "\f068";
}
.has-dropdown.dropdown-collapsed > .dropdown {
display:block;
}
.dropdown {
display: none;
margin: 0px 15px 15px;
border: 1px solid #EEE;
}
.dropdown li:nth-last-child(1) {
border-bottom: 0px;
}
.dropdown li a {
display: block;
padding: 10px 10px;
-webkit-transition: 0.2s -webkit-transform;
transition: 0.2s -webkit-transform;
transition: 0.2s transform;
transition: 0.2s transform, 0.2s -webkit-transform;
}
.dropdown li a:hover {
-webkit-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
-webkit-box-shadow: -4px 0px 0px 0px #FFD626;
box-shadow: -4px 0px 0px 0px #FFD626;
}
}
/* --- Navbar Mobile Toggle --- */
@media only screen and (min-width: 768px) {
.navbar-toggle-btn {
display: none !important;
}
}
.navbar-toggle-btn {
position: relative;
display: block;
width: 50px;
float: right;
height: 50px;
background: transparent;
border: none;
}
.navbar-toggle-btn span {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 10px;
-webkit-transition: 0.2s background;
transition: 0.2s background;
}
.navbar-toggle-btn span:after , .navbar-toggle-btn span:before {
content: "";
position: absolute;
left: 0;
-webkit-transition: 0.2s -webkit-transform;
transition: 0.2s -webkit-transform;
transition: 0.2s transform;
transition: 0.2s transform, 0.2s -webkit-transform;
}
.navbar-toggle-btn span , .navbar-toggle-btn span:after , .navbar-toggle-btn span:before {
height: 4px;
width: 30px;
background-color: #004;
}
.navbar-toggle-btn span:before {
top: -10px;
}
.navbar-toggle-btn span:after {
top: 10px;
}
.navbar-toggle-btn.toggle-btn-collapsed span {
background: transparent;
}
.navbar-toggle-btn.toggle-btn-collapsed span:before {
-webkit-transform: translateY(10px) rotate(45deg);
-ms-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.navbar-toggle-btn.toggle-btn-collapsed span:after {
-webkit-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
/* --- Navbar Search --- */
.navbar-search {
position: relative;
float: right;
margin-left: 15px;
}
.navbar-search .search-btn {
border: none;
background: transparent;
padding: 15px 10px;
line-height: 20px;
color: #004;
}
.navbar-search .search-form {
display: none;
position: absolute;
width: 250px;
background: #FFF;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
padding: 15px 10px;
border: 1px solid #EEE;
}
.navbar-search .search-form form input {
width: 100%;
}
.navbar-search:hover .search-form {
display: block;
}
.search-toggle-btn {
display: none;
float: right;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 24px;
background: transparent;
border-left: 1px solid #EEE;
border-right: 1px solid #EEE;
border-bottom: 0px;
border-top: 0px;
color: #004;
}
@media only screen and (max-width: 767px) {
.navbar-search .search-btn {
display: none;
}
.search-toggle-btn {
display: block;
}
.navbar-search {
float: none;
margin: 0px -15px;
}
.navbar-search .search-form {
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
width: 100%;
border-top: 1px solid #EEE;
}
.navbar-search.navbar-search-collapsed .search-form {
display: block;
}
}
/*------------------------------------*\
Home
\*------------------------------------*/
.banner-area {
position: relative;
padding-top: 20px;
padding-bottom: 0px;
margin-bottom: -30px;
}
#home .home-wrapper {
position: absolute;
left: 0px;
right: 0px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.page-wrapper {
position: relative;
z-index: 1;
}
.page-wrapper .breadcrumb {
background: transparent;
margin-bottom: 8px;
padding-left: 0px;
padding-right: 0px;
}
.page-wrapper .breadcrumb .breadcrumb-item.active {
color: #64728A;
display: initial !important;
}
.page-wrapper .breadcrumb>li+li:before {
color: #64728A;
}
.page-wrapper .breadcrumb>li>a{
padding-left: 0px;
}
.page-wrapper .breadcrumb span{
padding: 5px 8px !important;
}
#page-header .bg-img{
background-attachment:scroll;
margin-top: 20px;
}
/*------------------------------------*\
aside
\*------------------------------------*/
#aside{
background: #ffffff;
border-right: 1px solid #ddd;
}
/*------------------------------------*\
About
\*------------------------------------*/
#about .container .row{
display: flex;
justify-content: space-between;
}
#about .container .row .col-md-6{
order: 2;
padding-left: 30px;
}
.about {
margin-top: 15px;
margin-bottom: 15px;
}
.about > a{padding-left: 0px;}
.about > a> img {
width: 100%;
border-bottom: 4px solid #FFD626;
}
/*------------------------------------*\
Numbers
\*------------------------------------*/
.number {
position: relative;
margin-top: 15px;
margin-bottom: 15px;
padding-left: 70px;
}
.number i {
position: absolute;
left:0;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 35px;
color: #004;
text-align: center;
}
.number h3 {
font-size: 28px;
margin-bottom: 0px;
}
.number span {
color: #004;
}
/*------------------------------------*\
Portfolio
\*------------------------------------*/
#portfolio {
padding-bottom: 0px;
}
.portfolio{}
.portfolio .portfolio-img {
position: relative;
-webkit-transition:0.2s -webkit-transform;
transition:0.2s -webkit-transform;
transition:0.2s transform;
transition:0.2s transform, 0.2s -webkit-transform;
}
.portfolio .portfolio-img > img {
width: 100%;
}
.portfolio:hover .portfolio-img {
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
}
.portfolio .portfolio-links {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
z-index: 2;
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.portfolio .portfolio-links a {
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
color: #001232;
background-color: #FFD626;
}
.portfolio:hover .portfolio-links {
opacity:1;
}
.portfolio .portfolio-links a:hover {
opacity:0.9;
}
.portfolio .overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top:0;
background: #001232;
opacity: 0;
z-index: 1;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.portfolio:hover .overlay {
opacity: 0.8;
}
.portfolio .portfolio-content {
position: absolute;
bottom: 4px;
left: 0px;
right: 0px;
border-top: 4px solid #FFD626;
padding: 15px;
margin: 0 15px;
background: #001232;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
z-index: 2;
-webkit-transition: 0.2s -webkit-transform;
transition: 0.2s -webkit-transform;
transition: 0.2s transform;
transition: 0.2s transform, 0.2s -webkit-transform;
}
.portfolio .portfolio-content h3 {
color: #FFF;
margin-bottom: 10px;
}
.portfolio .portfolio-content span {
color: #FFD626;
text-transform: uppercase;
}
.portfolio:hover .portfolio-content {
-webkit-transform: translateY(calc(0% + 4px));
-ms-transform: translateY(calc(0% + 4px));
transform: translateY(calc(0% + 4px));
}
.view-all-portfolio {
text-align:center;
margin-top:0px;
margin-bottom: 30px;
float: left;
width: 100%;
}
/*------------------------------------*\
Services
\*------------------------------------*/
.service {
position: relative;
margin-top: 15px;
margin-bottom: 15px;
-webkit-transition: 0.2s -webkit-box-shadow;
transition: 0.2s -webkit-box-shadow;
transition: 0.2s box-shadow;
transition: 0.2s box-shadow, 0.2s -webkit-box-shadow;
}
.service i {
position: absolute;
left: 0;
top: 20px;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 35px;
color: #FFD626;
text-align: center;
}
.service .service-content {
padding: 15px 15px 15px 70px;
}
.service:hover {
-webkit-box-shadow: 0px 0px 10px 3px #EEE;
box-shadow: 0px 0px 10px 3px #EEE;
}
/*------------------------------------*\
Testimonial
\*------------------------------------*/
.testimonial .testimonial-quote {
position: relative;
margin-bottom: 30px;
padding-top: 45px;
text-align: center;
}
.testimonial .testimonial-quote:before {
content: "\f10d";
left: 50%;
top: 0px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
font-family: 'FontAwesome';
position: absolute;
color: #004;
font-size: 35px;
}
.testimonial .testimonial-meta {
text-align: center;
margin-bottom: 15px;
}
.testimonial .testimonial-meta h3 {
margin-bottom: 5px;
}
.testimonial .testimonial-meta span {
text-transform: uppercase;
}
/*------------------------------------*\
Partners
\*------------------------------------*/
.partner {
display: block;
border: 2px solid transparent;
}
.partner:hover {
border-color: #FFD626;
}
.partner > img {
width: 100%;
}
/*------------------------------------*\
Blog
\*------------------------------------*/
.blog {
}
.blog .blog-img {
position: relative;
/*border: 2px solid #FFD626;*/
}
.blog .blog-img > a,img {
width: 100%;
}
.blog .blog-content img {
width: auto;
}
.blog p{
padding-left: 0px;
text-align: justify;
}
.blog h2.heading:before{
background: #FFD626;
content: "";
position: absolute;
width: 100px;
height: 4px;
left: 0px;
top: 44px;
}
.items-2 .fix-right {
float: right;
}
.blog .blog-meta {
margin-top: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #EEE;
padding-bottom: 10px;
}
.blog .blog-meta li {
display: inline-block;
font-size: 14px;
}
.blog h3{
font-size: 16px;
font-weight: bold;
line-height: normal;
}
.blog h3 a:hover{
color: #FFD626;
-webkit-transition: 0.2s height;
transition: 0.2s height;
}
.animate-box > table{
width: 100% !important;
/*border: solid 1px #333 !important;*/
}
.animate-box > table > tbody > tr > td{
padding: 7px;
}
.animate-box h4{
/*text-align: justify;*/
font-size: 16px;
line-height: 25px;
font-weight: 700;
}
.animate-box h4 a{
padding: 0px 0px;
}
/*------------------------------------*\
Blog post
\*------------------------------------*/
#main .blog .blog-content {
margin-bottom:60px;
}
/* -- blog tags & share -- */
.blog-tags-share .tags {
display: inline-block;
}
.blog-tags-share .tags .tags-list {
display: inline-block;
}
.blog-tags-share .tags .tags-list li {
display: inline-block;
margin-left: 15px;
}
.blog-tags-share .share {
float: right;
}
.blog-tags-share .share .share-list {
display: inline-block;
}
.blog-tags-share .share .share-list li {
display: inline-block;
margin-left: 15px;
}
/* -- blog comments -- */
.blog-comments {
margin-top: 30px;
margin-bottom: 30px;
}
.blog-comments .media .media-object {
width: 60px;
}
.blog-comments .media {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #EEE;
}
.blog-comments > .media:last-child {
border-bottom: 1px solid #EEE;
padding-bottom: 30px;
}
.blog-comments .media .media-body .time {
font-size: 12px;
font-weight: 400;
}
.blog-comments .media .media-body .reply-btn {
padding: 0px 10px;
font-size: 12px;
}
/* -- blog reply form -- */
.reply-form form {
margin-top: 30px;
}
.reply-form .input, .reply-form .input , .reply-form textarea {
margin-bottom: 15px;
}
.reply-form .input, .reply-form .input {
width: calc(50% - 8px);
}
.reply-form .input:nth-child(2) {
margin-left: 11px;
}
/*------------------------------------*\
Blog sidebar
\*------------------------------------*/
#aside .widget {
margin-top: 30px;
margin-bottom: 30px;
}
#aside .widget:nth-child(1){
margin-top: 15px;
}
#aside .widget:nth-last-child(1){
margin-bottom: 15px;
}
/* -- category sidebar -- */
.widget-category a {
display: block;
padding: 5px 15px;
border: 1px solid #EEE;
margin: 12px 0px;
color: #333;
font-size: 14px;
font-weight: bold;
-webkit-transition: 0.2s color , 0.2s -webkit-transform;
transition: 0.2s color , 0.2s -webkit-transform;
transition: 0.2s transform , 0.2s color;
transition: 0.2s transform , 0.2s color , 0.2s -webkit-transform;
}
.widget-category > ul ,a{padding-left:20px; }
.widget-category .padd{padding-left:20px; }
.widget-category a span {
float: right;
}
.widget-category a:hover {
-webkit-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
color: #004;
-webkit-box-shadow: -4px 0px 0px 0px #FFD626;
box-shadow: -4px 0px 0px 0px #FFD626;
border-left: #FFD626;
}
/* -- posts sidebar -- */
.widget-post {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #EEE;
float: left;
}
.widget-post:nth-last-child(1) {
border-bottom: 0px;
}
.widget-post > a {
position: relative;
padding-left: 100px;
display: block;
min-height: 60px;
margin-bottom: 5px;
}
.widget-post > a > span {
display: inline-block;
}
.widget-post img {
width: 100%;
}
.widget-post span {
padding-left: 0px;
font-size: 13px;
}
.widget-post span, a {
padding: 0px;
}
.widget-post a:hover{
color: #FFD626;
}
.widget-post span:after{
background: none;
}
.widget-post .blog-meta li {
display: inline-block;
font-size: 12px;
}
/* -- tags sidebar -- */
.widget-tags a {
display: inline-block;
padding: 3px 10px;
font-size: 14px;
margin: 2px 0px;
border: 1px solid #EEE;
color: #64728A;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.widget-tags a:hover {
color: #004;
background-color: #FFD626;
border: 1px solid #004;
}
/*------------------------------------*\
Footer
\*------------------------------------*/
.footer-widget {
margin-top: 40px;
margin-bottom: 15px;
}
/* -- footer logo -- */
.footer-logo .logo {
display: inline-block;
margin-bottom: 30px;
}
.footer-logo .logo > img{
max-height: 50px;
}
.footer-contact li {
margin-top: 10px;
}
/* -- footer contact -- */
.footer-contact li{
/* color: #64728A;*/
color: #F8F8F8;
font-size: 12px;
padding-left: 0px;
}
.footer-contact li i {
color: #FFD626;
margin-right: 15px;
width: 15px;
}
.footer-contact li a {
/* color: #64728A;*/
color: #F8F8F8;
padding-left: 0px;
}
.footer-contact li a i {
color: #FFD626;
margin-right: 15px;
width: 15px;
}
/* -- footer links -- */
.footer-links li {
margin-top: 10px;
}
.footer-links li a {
display: inline-block;
font-size: 14px;
line-height: 21px;
color: #ffffff;
-webkit-transition: 0.2s color, 0.2s -webkit-transform;
transition: 0.2s color, 0.2s -webkit-transform;
transition: 0.2s transform, 0.2s color;
transition: 0.2s transform, 0.2s color, 0.2s -webkit-transform;
}
.footer-links li a:hover {
-webkit-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
color: #FFD626;
}
.footer-links .hotline{
color: #c1272d;
font-weight: bold;
}
/* -- footer links -- */
.footer-faicon{
margin-top: 20px;
}
.footer-faicon i{
margin-right: 17px;
color: #ffd626;
font-size: 3rem;
font-family: 'FontAwesome';
}
.footer-faicon i:hover{
color: #FFF;
}
/* -- footer subscribe -- */
.footer-subscribe {
position: relative;
margin-top: 30px;
}
.footer-subscribe .input {
padding-right: 125px;
}
.footer-subscribe button {
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
padding: 0px 20px;
background: #FFD626;
border: none;
color: #004;
font-size: 14px;
}
/* -- footer social -- */
.footer-social {
margin-top: 30px;
}
.footer-social li {
display:inline-block;
}
.footer-social li a {
padding-left: 0px;
padding-top: 8px;
display: inline-block;
height: 35px;
width: 35px;
text-align: center;
line-height: 30px;
color: #FFD626;
border: 2px solid #FFD626;
border-radius: 50%;
margin-right: 10px;
font-size: 14px;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.footer-social li a:hover {
background-color: #FFD626;
color: #004;
}
.footer-contact a {
margin-right: 15px;
}
.footer-contact .icon {
display: inline-block;
width: 87px;
height: 42px;
line-height: 42px;
vertical-align: middle;
background-size: auto 42px;
background-repeat: no-repeat;
}
.footer-contact .icon-issvn {
background-image: url("../img/logo.png");
}
.footer-contact .icon-iss {
background-image: url("../img/logo.png");
}
/* -- Bottom Footer -- */
#footer #bottom-footer {
background-color: rgba(0, 0, 0, 0.15);
}
#footer #bottom-footer a {
color: #FFD626;
}
/*------------------------------------*\
Responsive
\*------------------------------------*/
@media only screen and (max-width: 991px) {
#cta-2 {
text-align:center;
}
#main {
margin-bottom:30px;
}
.widget-post {
min-height: 90px;
padding-bottom: 30px;
}
.widget-post > a {
min-height: auto;
}
.widget-post .blog-meta {
padding-left:100px;
}
}
@media only screen and (max-width: 767px) {
.section-header {
margin-bottom:30px;
}
.home-wrapper h1 {
font-size:28px;
}
.blog-tags-share .share {
float:none;
margin-top:15px;
}
.items-2 .fix-right{
float: none;
}
.animate-box{
float: left;
}
.columns{
padding: 0px 15px;
}
.title{
}
.widget-post{
display: flex;
}
.col-md-4, .col-md-8
{
padding: 0px;
}
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header{
margin-left: 0px;
margin-right: 0px;
}
}
@media only screen and (max-width: 480px) {
#numbers [class*='col-xs'] {
width:100%;
}
.number {
text-align: center;
padding: 0;
}
.number i {
position: static;
}
.widget-post {
min-height: auto;
padding-bottom: 5px;
}
.widget-post > a {
min-height: 60px;
}
.widget-post .blog-meta {
padding-left: 0px;
margin-top: 15px;
}
}
/*------------------------------------*\
Accordion
\*------------------------------------*/
.accordion .panel {
border-radius: 0px;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.accordion .panel-heading {
padding: 0;
margin: 0px;
border-radius: 0px;
border: 1px solid #EEE;
}
.accordion .panel-heading .panel-title {
font-weight:400;
}
.accordion .panel-heading .panel-title > a {
display: block;
padding: 10px 15px;
background-color: #FFD626;
color: #004;
}
.accordion .panel-heading .panel-title > a.collapsed {
background-color: #FFF;
}
.accordion .panel-heading .panel-title > a:after {
font-family: 'FontAwesome';
content: "\f068";
float: right;
}
.accordion .panel-heading .panel-title > a.collapsed:after {
content: "\f067";
}
/*------------------------------------*\
Owl theme
\*------------------------------------*/
/* -- dots -- */
.owl-theme .owl-dots .owl-dot span {
width: 10px;
height: 10px;
border: 1px solid #004;
border-radius: 0px;
background: transparent;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.owl-theme .owl-dots .owl-dot:hover span {
background: #004;
}
.owl-theme .owl-dots .owl-dot.active span {
background: #004;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
/* -- nav -- */
.owl-theme .owl-nav {
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.owl-theme:hover .owl-nav {
opacity: 1;
}
.owl-theme .owl-nav [class*='owl-'] {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: none;
background: #004;
color: #FFF;
padding: 0px;
width: 30px;
height: 60px;
line-height: 60px;
border-radius:0;
margin: 0;
}
.owl-theme .owl-prev {
left: 0px;
}
.owl-theme .owl-next {
right: 0px;
}
.owl-theme .owl-nav [class*='owl-']:hover {
opacity: 0.8;
background: #004;
}
/*------------------------------------*\
Preloader
\*------------------------------------*/
#preloader {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #FFF;
z-index: 99999;
}
.preloader {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: preload-rotate 10s linear infinite;
animation: preload-rotate 10s linear infinite;
}
.preloader span {
display: inline-block;
width: 30px;
height: 30px;
background-color: #004;
position: absolute;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.preloader span:nth-child(1) {
top: 0;
left: 0;
-webkit-animation: 1s preload-scale ease-in-out infinite;
animation: 1s preload-scale ease-in-out infinite;
}
.preloader span:nth-child(2) {
top: 0;
right: 0;
-webkit-animation: 1s preload-scale 0.06s ease-in-out infinite;
animation: 1s preload-scale 0.06s ease-in-out infinite;
}
.preloader span:nth-child(3) {
bottom: 0;
-webkit-animation: 1s preload-scale 0.11s ease-in-out infinite;
animation: 1s preload-scale 0.11s ease-in-out infinite;
}
.preloader span:nth-child(4) {
bottom: 0;
right: 0;
-webkit-animation: 1s preload-scale 0.17s ease-in-out infinite;
animation: 1s preload-scale 0.17s ease-in-out infinite;
}
@-webkit-keyframes preload-rotate {
0% {
-webkit-transform:translate(-50%, -50%) rotate(0deg);
transform:translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform:translate(-50%, -50%) rotate(360deg);
transform:translate(-50%, -50%) rotate(360deg);
}
}
@keyframes preload-rotate {
0% {
-webkit-transform:translate(-50%, -50%) rotate(0deg);
transform:translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform:translate(-50%, -50%) rotate(360deg);
transform:translate(-50%, -50%) rotate(360deg);
}
}
@-webkit-keyframes preload-scale {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes preload-scale {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
/*------------------------------------*\
Contact
\*------------------------------------*/
.title_index{
text-align: center;
}
.title_index a{padding-left: 0px}
.title_index h3{
font-size: 16px;
color: #333;
}
.colorlib-contact {
padding-top: 4em;
padding-bottom: 4em;
clear: both;
width: 100%;
display: block; }
@media screen and (max-width: 768px) {
.colorlib-blog,
.colorlib-work,
.colorlib-about,
.colorlib-services,
.colorlib-contact {
padding-top: 5em;
padding-bottom: 8em; }
.navbar-brand {
order: 2;
}
.navbar-toggle-btn{
order: 1;
}
.search-toggle-btn{
order: 3;
}
.navbar-header{
display: flex;
justify-content: space-between;
}
.navbar-header:before, .navbar-header:after, .navbar-right:before , .navbar-right:after{
display: table;
content: none;
}
.hidden-mobile{
display: none;
}
.navbar{
min-height: auto;
}
.navbar-right{
display: flex;
justify-content: space-evenly;
margin: 0px;
align-items: center;
}
.navbar-nav>li>a{
}
#top-navbar .nav li a i{
height: 25px;
width: 25px;
line-height: 21px;
font-size: 13px;
}
.lang_con{
padding-top: 5px;
}
}
.colorlib-contact {
}
@media screen and (max-width: 768px) {
.colorlib-narrow-content {
padding: 0 1em; } }
.colorlib-narrow-content i{height: 35px;
width: 35px;
text-align: center;
line-height: 30px;
color: #FFD626;
border: 2px solid #FFD626;
border-radius: 50%;
margin-right: 5px;
font-size: 16px;
-webkit-transition: 0.2s all;
transition: 0.2s all;}
.colorlib-narrow-content span{padding-left: 20px; color: #333;}
.colorlib-narrow-content .colorlib-feature-sm{margin-bottom: 15px;}
.colorlib-narrow-content a {padding-left: 0px;}
/*------------------------------------*\
project
\*------------------------------------*/
.boder {
border: 1px solid #EEE;
margin: 10px 0px;
}
.boder {
padding-left: 0px;
}
.boder_bottom{
border-bottom: 2px solid #FFD626;
width: 80%;
}
.description{
padding: 0px 15px;
color: #333;
font-size: 14px;
}
.arrow_cat{
padding: 0px 15px;
font-size: 14px;
}
.arrow_cat ul > li > a{
font-size: 13px;
padding-left: 0px;
color: #868fca;
}
.arrow_cat ul > li > i {
color: #868fca;
margin-right: 7px;
}
.animate-box{
padding-bottom: 20px;
}
.items {
background: #FFD626;
height: 0px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.items:hover {
height: 85px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.items h4{
min-height: 60px;
float: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 14px;
line-height: 20px;
/* overflow: hidden; */
text-overflow: ellipsis;
}
.items h3{
min-height: 60px;
float: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 14px;
line-height: 20px;
/* overflow: hidden; */
text-overflow: ellipsis;
}
.items p{
font-size: 13px;
}
.project {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
width: 100%;
display: block;
margin-bottom: 0px;
border: 1px solid #EEE;
}
.project > a{padding-left: 0px;}
.project img{ margin: 0 auto; width: 100%;}
.project .desc {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s; }
.project .desc .con {
padding: 20px;
display: block;
position: relative;
/* height: 300px; */
}
.project .desc .con .icon {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px; }
.project .desc .con .icon span {
display: inline;
padding-right: 5px; }
.project .desc .con .icon span a {
color: #cccccc;
padding: 5px;
background: #333333;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px; }
.project .desc .con .icon i {
font-size: 16px;
color: #cccccc; }
.project .desc h3 {
font-size: 16px;
font-weight: 500;
text-align: center;
/* text-transform: uppercase;*/
letter-spacing: 1px;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
margin-bottom: 15px;
color: #fff;}
.project .desc h3 a {
color: #fff; }
.project .desc span {
display: block;
color: #999999;
font-size: 13px;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-webkit-transform: translate3d(0, 15px, 0);
transform: translate3d(0, 15px, 0); }
.project .desc span a {
color: #000; }
.project .desc span p {
margin-bottom: 10px;
line-height:1.5;
}
.desc{
/*height: 150px;*/
flex-wrap: wrap;
display: flex;
}
.desc h3 {
text-align: justify;
font-size: 16px;
line-height: 25px;
font-weight: 700;
min-height: 75px;
max-height: 75px;
}
.desc h3 a{
color: #000000;
}
.desc h3 a:hover{
color: #FFD626;
}
.desc h4 {
text-align: justify;
font-size: 16px;
line-height: 25px;
font-weight: 700;
min-height: 75px;
max-height: 75px;
}
.desc h4 a{
color: #000000;
}
.desc h4 a:hover{
color: #FFD626;
}
.desc a {
min-height: 75px;
max-height: 75px;
}
.desc span p {
font-size: 14px;
margin-bottom: 10px;
line-height: 22px;
font-weight: 400;
color: #000000;
}
@media screen and (max-width: 768px) {
.project .desc {
opacity: 1;
background: rgba(0, 0, 0, 0.4); }
.desc h4 {
font-size: 20px;
}
.animate-box h4{
font-size: 20px;
}
.project .desc h3 {
font-style: 28px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
color: #000; }
.project .desc span {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.project:hover .desc {
opacity: 1; }
.project:hover .desc h3 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.project:hover .desc span {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
/* Owl Carousel */
.owl-carousel .owl-item {
opacity: .4;
}
.owl-carousel .owl-item.active {
opacity: 1;
}
.owl-carousel .owl-nav {
position: absolute;
top: 80%;
width: 100%;
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: -50px;
}
.owl-carousel .owl-nav .owl-prev:hover, .owl-carousel .owl-nav .owl-prev:focus, .owl-carousel .owl-nav .owl-prev:active,
.owl-carousel .owl-nav .owl-next:hover,
.owl-carousel .owl-nav .owl-next:focus,
.owl-carousel .owl-nav .owl-next:active {
outline: none;
}
.owl-carousel .owl-nav .owl-prev span:before,
.owl-carousel .owl-nav .owl-next span:before {
font-size: 40px;
}
.owl-carousel .owl-nav .owl-prev {
left: 30px !important;
}
.owl-carousel .owl-nav .owl-next {
right: 30px !important;
}
.owl-carousel .owl-dots {
text-align: center;
}
.owl-carousel .owl-dots .owl-dot {
width: 10px;
height: 10px;
margin: 5px;
border-radius: 50%;
background: #e6e6e6;
}
.owl-carousel .owl-dots .owl-dot.active {
background: #f4b214;
}
.owl-carousel.home-slider {
z-index: 1;
position: relative;
}
.owl-carousel.home-slider .owl-nav {
opacity: 0;
visibility: hidden;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
}
.owl-carousel.home-slider .owl-nav button {
color: #fff;
}
.owl-carousel.home-slider:focus .owl-nav, .owl-carousel.home-slider:hover .owl-nav {
opacity: 1;
visibility: visible;
}
.owl-carousel.home-slider .slider-item {
/* background-size: cover;*/
background-repeat: no-repeat;
background-position: center center;
/* height: calc(100vh - 117px);
min-height: 500px;*/
}
.owl-carousel.home-slider .slider-item .slider-text {
color: #fff;
/* height: calc(100vh - 117px);*/
/* min-height: 500px;*/
}
.owl-carousel.home-slider .slider-item .slider-text h1 {
font-size: 40px;
color: #fff;
line-height: 1.2;
font-weight: 800 !important;
text-transform: uppercase;
}
@media (max-width: 991px) {
.owl-carousel.home-slider .slider-item .slider-text h1 {
font-size: 40px;
}
}
.owl-carousel.home-slider .slider-item .slider-text p {
font-size: 20px;
line-height: 1.5;
font-weight: 300;
color: white;
}
.owl-carousel.home-slider.inner-page .slider-item {
/* height: calc(50vh - 117px);
min-height: 500px;*/
}
.owl-carousel.home-slider.inner-page .slider-item .slider-text {
color: #fff;
height: calc(50vh - 117px);
min-height: 300px;
}
.owl-carousel.home-slider .owl-dots {
position: absolute;
bottom: 50px;
width: 100%;
}
.owl-carousel.home-slider .owl-dots .owl-dot {
width: 18px;
height: 18px;
margin: 5px;
border-radius: 50%;
background: #e6e6e6;
background: none;
border: 2px solid rgba(186, 181, 191, 1);
outline: none !important;
position: relative;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
}
.owl-carousel.home-slider .owl-dots .owl-dot span {
position: absolute;
width: 6px;
height: 6px;
background: rgba(186, 181, 191, 1);
border-radius: 50% !important;
left: 50%;
top: 50%;
display: block;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.owl-carousel.home-slider .owl-dots .owl-dot.active {
border: 2px solid #eee;
}
.owl-carousel.home-slider .owl-dots .owl-dot.active span {
background: #eee;
}
/*MENU LEFT BEGIN*/
.sideba {
/* background: #2d353d;*/
}
/* 2 */
.sideba a {
display: block;
padding: 5px 10px;
border: 1px solid #EEE;
margin: 12px 0px;
color: #64728A;
font-size: 14px;
-webkit-transition: 0.2s color , 0.2s -webkit-transform;
transition: 0.2s color , 0.2s -webkit-transform;
transition: 0.2s transform , 0.2s color;
transition: 0.2s transform , 0.2s color , 0.2s -webkit-transform;
}
.sideba .padd{padding-left:20px; }
.sideba a span {
float: right;
}
.sideba a:hover {
-webkit-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
color: #004;
-webkit-box-shadow: -4px 0px 0px 0px #FFD626;
box-shadow: -4px 0px 0px 0px #FFD626;
border-left: #FFD626;
}
.sideba .nav > li.nav-profile {
width: 100%;
padding: 20px;
color: #fff;
}
.sideba .nav > li.nav-profile .image {
float: left;
width: 38px;
height: 38px;
margin-right: 15px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.sideba .nav > li.nav-profile .image img {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.sideba .nav > li.nav-profile .info {
font-size: 16px;
}
.sideba .nav > li.nav-profile .info small {
display: block;
color: #889099;
}
/* 3 */
.sideba .nav > li.nav-header {
padding: 10px 20px;
line-height: 20px;
font-size: 11px;
color: #889099;
}
.sideba .nav > li > a {
color: #333;
font-weight: bold;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 5px 15px;
}
.sideba .nav > li.nav-item:hover:not(.nav-header) {
transition-duration: 0.2s;
}
.sideba .nav > li > a:hover {
transition-duration: 0.6s;
color: #000;
text-shadow: 0px 0px 1px #fff;
}
.sideba .nav > li > a i {
float: left;
margin-right: 15px;
margin-top: 4px;
}
.sideba .nav > li > .sub {
list-style: none;
}
.sideba .nav > li > .sub a {
color: #333;
padding-left: 40px;
}
.sideba .nav > li > ul > li {
margin-left: 10px;
}
.sideba .nav > li > ul > li .sub a {
color: #889099;
padding-left: 40px;
}
.sideba .nav > li > .sub a:hover {
transition-duration: 0.6s;
color: #000;
text-shadow: 0px 0px 1px #fff;
}
.sideba .nav > li > .sub a:focus {
transition-duration: 0.6s;
color: #000;
text-shadow: 0px 0px 1px #fff;
}
.sideba .nav > li > .sub a:before {
content: '\f068';
font-family: FontAwesome;
position: absolute;
left: 23px;
font-size: 1.8rem;
color: #FFD626;
margin-top: 0px;
}
.sideba .nav > li > ul >li .sub a:before {
content: '\f054';
font-family: FontAwesome;
position: absolute;
left: 23px;
font-size: 1.8rem;
color: #FFD626;
margin-top: 0px;
}
.sideba .nav > li > ul > li ul > li{
margin-left: 10px;
}
.sideba .sub {
position: relative;
}
.sideba .sub:before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
}
.sideba .has-sub > a.nav-link[aria-expanded="false"]:before {
content: '\f067';
font-family: FontAwesome;
position: absolute;
right: 20px;
font-size: 1.8rem;
color: #FFD626;
margin-top: 0px;
display: inline-block;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.sideba .has-sub > a.nav-link[aria-expanded="true"]:before {
content: '\f077';
font-family: FontAwesome;
position: absolute;
right: 20px;
font-size: 1.8rem;
color: #FFD626;
margin-top: 0px;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.sideba .nav > li > a:focus {
color: #fff;
}
.sideba-minify {
margin: 10px 0;
float: right;
padding: 5px 10px 10px 10px;
color: #fff;
-webkit-border-radius: 20px 0 0 20px;
-moz-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
}
/*MENU FEFT END*/
#back2top {
width: 52px;
height: 52px;
position: fixed;
bottom: 20px;
right: 30px;
display: none;
cursor: pointer;
background: url(../img/backtotop.png) no-repeat center center #212121;
-moz-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
z-index: 5;
}
#back2top:hover{
opacity: 0.8;
}
.hotline-phone-ring-wrap {
position: fixed;
bottom: 0;
left: 0;
z-index: 999999;
}
.hotline-phone-ring {
position: relative;
visibility: visible;
background-color: transparent;
width: 110px;
height: 110px;
cursor: pointer;
z-index: 11;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
transition: visibility .5s;
left: 0;
bottom: 0;
display: block;
}
.hotline-phone-ring-circle {
width: 85px;
height: 85px;
top: 10px;
left: 10px;
position: absolute;
background-color: transparent;
border-radius: 100%;
border: 2px solid #e60808;
-webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0.5;
}
.hotline-phone-ring-circle-fill {
width: 55px;
height: 55px;
top: 25px;
left: 25px;
position: absolute;
background-color: rgba(230, 8, 8, 0.7);
border-radius: 100%;
border: 2px solid transparent;
-webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.hotline-phone-ring-img-circle {
background-color: #e60808;
width: 33px;
height: 33px;
top: 36px;
left: 36px;
position: absolute;
background-size: 20px;
border-radius: 100%;
border: 2px solid transparent;
-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
}
.hotline-phone-ring-img-circle a{
padding-left: 0px;
}
.hotline-phone-ring-img-circle .pps-btn-img {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.hotline-phone-ring-img-circle .pps-btn-img img {
width: 20px;
height: 20px;
}
.hotline-bar {
position: absolute;
background: rgba(230, 8, 8, 0.75);
height: 40px;
width: 180px;
line-height: 40px;
border-radius: 3px;
padding: 0 10px;
background-size: 100%;
cursor: pointer;
transition: all 0.8s;
-webkit-transition: all 0.8s;
z-index: 9;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
border-radius: 50px !important;
/* width: 175px !important; */
left: 33px;
bottom: 37px;
}
.hotline-bar > a {
color: #fff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
text-indent: 30px;
display: block;
letter-spacing: 1px;
line-height: 40px;
font-family: Arial;
}
.hotline-bar > a:hover,
.hotline-bar > a:active {
color: #fff;
}
@-webkit-keyframes phonering-alo-circle-anim {
0% {
-webkit-transform: rotate(0) scale(0.5) skew(1deg);
-webkit-opacity: 0.1;
}
30% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
-webkit-opacity: 0.5;
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
-webkit-opacity: 0.1;
}
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
opacity: 0.6;
}
100% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
}
@-webkit-keyframes phonering-alo-circle-img-anim {
0% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
10% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
}
@media (max-width: 768px) {
.hotline-bar {
display: none;
}
}
/*======================================================================*/
.pagination {
margin: 20px 0;
padding-left: 0;
width: 100%;
text-align: center;
}
.pagination .list_page {
display: inline-block;
}
.pagination .paginate_button, .pagination .paginate_active {
position: relative;
/*float: left;*/
padding: 6px 11px;
margin: 2px;
line-height: 1.428571429;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
color: #000;
}
.pagination .paginate_button_disabled:hover{border: 1px solid #ddd; }
.pagination .paginate_active, .pagination .paginate_button:hover {
color: #5686C6;
font-weight: bold;
border-color: #5686C6;
background: rgba(182, 194, 233, 0.5);
}
.pagination .paginate_button_disabled, .pagination .paginate_button_disabled:hover {
background-color: #eee;
border-color: transparent;
cursor: default;
}
.alert{font-size: 15px; text-align: center;}
/*.blog-content table{
text-align: center;
margin: 0 auto;
}
.blog-content table tbody, .animate-box table tbody{
border: 2px solid #333;
}
.blog-content table tbody tr, .animate-box table tbody tr{
border: 1px solid #333;
}
.blog-content table tbody tr td, .animate-box table tbody tr td{
border: 1px solid #333;
}
.blog-content table tbody tr td p, .animate-box table tbody tr td p{
margin: 0px;
}*/
#bottom-footer span{
color: #fff;
font-size: 14px;
}
/*======================================================================*/
/*Start Jcarousel product*/
#testimonials {
position: relative;
padding-bottom: 0px;
margin-bottom: 70px;
text-align: center;
}
#testimonials .testimonials--heading {
color: #222;
font-family: Lato, "Proxima Nova", "AppleSystemUIFont", Helvetica, Arial, serif;
font-size: 1.9em;
margin-bottom: 18px;
letter-spacing: 0.065rem;
}
#testimonials .testimonials--subheading {
color: #777;
font-family: Lato, "Proxima Nova", "AppleSystemUIFont", Helvetica, Arial, serif;
font-size: 14px;
line-height: 1.75em;
max-width: 480px;
margin: 0 auto;
margin-bottom: 20px;
}
#testimonials .testimonials--container {
position: relative;
/*display: flex;*/
/*flex-direction: row;*/
/*max-width: 960px;*/
padding: 0;
}
#testimonials .testimonials--container .testimonial--post {
position: relative;
float: left;
text-align: left;
background: white;
border-radius: 10px;
/*height: 355px;*/
/*width: 395px;*/
height: 270px;
margin: 10px;
/*box-shadow: 0 2.5px 15px lightblue;*/
/*box-shadow: 0 2px 4px #1b6bff;*/
box-shadow: 0 2px 10px rgba(26, 106, 255, 0.15);
list-style: none;
}
#testimonials .testimonials--container .testimonial--post .testimonial--avatar {
position: absolute;
top: 17.5px;
left: 16px;
height: 65px;
width: 65px;
border-radius: 100%;
margin-bottom: 10px;
}
#testimonials .testimonials--container .testimonial--post .testimonial--content {
position: absolute;
top: 90px;
left: 16px;
padding-right: 5px;
/*width: 304px;*/
margin: 0;
opacity: 0.7;
font-family: "Proxima Nova", "AppleSystemUIFont", Helvetica, Arial, serif;
font-size: 17px;
color: #2e2e2e;
text-align: left;
line-height: 30px;
word-wrap: break-word;
}
#testimonials .testimonials--container .testimonial--post .testimonial--name {
position: absolute;
top: 200px;
left: 16px;
font-family: "Proxima Nova", "San Francisco", Helvetica, Arial, serif;
font-size: 20px;
color: #2e2e2e;
text-align: left;
line-height: 24px;
}
@media only screen and (max-width: 1024px) {
#testimonials .testimonials--container {
width: 90%;
margin: 0 auto;
flex-direction: column;
}
#testimonials .testimonials--container .testimonial--post {
padding: 20px;
height: auto;
margin: 10px;
}
#testimonials .testimonials--container .testimonial--post .testimonial--avatar,
#testimonials .testimonials--container .testimonial--post .testimonial--content,
#testimonials .testimonials--container .testimonial--post .testimonial--name {
position: relative;
top: initial;
left: initial;
}
}
@media only screen and (max-width: 640px) {
#testimonials {
padding: 40px 0;
}
#testimonials .testimonials--container {
width: 95%;
}
#testimonials .testimonials--container .testimonial--post {
width: 95%;
text-align: center;
}
#testimonials .testimonials--container .testimonial--post .testimonial--content,
#testimonials .testimonials--container .testimonial--post .testimonial--name {
text-align: center;
padding: 0;
}
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 100%;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
width: 200px;
float: left;
padding: 10px;
box-sizing: border-box;
}
.jcarousel img {
display: block;
max-width: 100%;
height: auto !important;
}
/** Carousel Controls **/
.jcarousel-control-prev,
.jcarousel-control-next {
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
border-radius: 30px;
box-shadow: 0 0 4px #F0EFE7;
}
.jcarousel-control-prev {
left: -20px;
}
.jcarousel-control-next {
right: -20px;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: -25px;
left: 50%;
transform: translate(-50%, 0);
margin: 0;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
height: 10px;
width: 10px;
line-height: 10px;
background: #fff;
color: #4E443C;
border-radius: 10px;
text-indent: -9999px;
margin-right: 7px;
margin-bottom: 10px;
box-shadow: 0 0 2px #4E443C;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
box-shadow: 0 0 2px #F0EFE7;
}
/*End Jcarousel product*/
/*======================================================================*/
/* Button
/* =================================*/
.button {
outline: none;
color: #fff;
background: #ffa500;
font-size: 13px;
font-weight: 500;
}
.button:hover,
.button:focus,
.button:active:focus,
.button:active {
color: #fff;
background: #ffa500;
}
.button-white {
color: #333;
background: #fff;
}
.button-white:hover,
.button-white:focus,
.button-white:active:focus,
.button-white:active {
color: #333;
background: #eee;
}
.btn-link {
color: #333;
font-size: 13px;
font-weight: 500;
}
.btn-link:hover {
color: #ffa500;
}
/*==================================*/
.product-action .btn {
font-size: 1em;
padding: 0.65em 1em;
}
.product-action .btn-link {
border: 1px solid #ddd;
border-radius: 4px;
}
.product-action .btn-link:focus,
.product-action .btn-link:hover {
text-decoration: none;
}
/*======== Start Chat Zalo ========*/
@media (min-width: 1px){.box_contact{position:fixed;bottom:10px;left:10px;z-index:99999999}.box_contact ul{list-style:none;margin:0;padding:0}.box_contact ul li{padding:0;margin:0;list-style:none}.box_contact ul li a{display:block;position:relative}.box_contact ul li a > div{width:42px;height:42px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;margin:0 0 5px;position:relative;background-position:50% 50%;background-size:cover;overflow:hidden;display:flex;align-items:center;justify-content:center}.box_contact ul li a br{display:none}.box_contact ul li a span{font-weight:400;color:#333;position:absolute;top:50%;left:calc(100% + 10px);left:-webkit-calc(100% + 10px);left:-moz-calc(100% + 10px);margin-top:-12.5px;font-size:14px;height:25px;line-height:25px;padding:0 10px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;white-space:nowrap;opacity:0;visibility:hidden}.box_contact ul li a:hover span{opacity:1;visibility:visible}.box_contact ul li a span:after{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-right-color:#333;border-width:5px;margin-top:-5px}.box_contact ul li a img{width:auto;height:auto;max-width:42px;max-height:42px;margin:0;box-shadow:none;border:0}.box_contact ul li a > div{background:transparent!important}.box_contact ul li a.animation_tada > div{animation-name:hungdev_tada;-webkit-animation-name:hungdev_tada;animation-delay:0;-webkit-animation-delay:0;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;cursor:pointer;box-shadow:0 0 0 0 #c31d1d}.box_contact ul li a.animation_zoom > div{animation-name:hungdev_zoom;-webkit-animation-name:hungdev_zoom;animation-delay:0;-webkit-animation-delay:0;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;cursor:pointer;box-shadow:0 0 0 0 #c31d1d}@-webkit-keyframes hungdev_tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg);transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@keyframes hungdev_tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg);-ms-transform:scale(.9) rotate(-3deg);transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@-webkit-keyframes hungdev_zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}@keyframes hungdev_zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}.box_contact ul li a.animation_swing img{animation-name:hungdev_swing;-webkit-animation-name:hungdev_swing;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-duration:1s;-webkit-animation-duration:1s;-webkit-animation-delay:1s;animation-delay:1s;animation-timing-function:ease-in;-webkit-animation-timing-function:ease-in}@-webkit-keyframes hungdev_swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}to{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes hungdev_swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}to{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@media (max-width: 0px){.box_contact{background:#fff;display:inline-block;width:100%;bottom:0;left:0;position:fixed;z-index:99999999;height:auto;padding:0;border-top:0;visibility:hidden;opacity:0;transform:translate3d(0,120%,0);-moz-transform:translate3d(0,120%,0);-webkit-transform:translate3d(0,120%,0);transition:all .3s linear;-moz-transition:all .3s linear;-webkit-transition:all .3s linear;box-shadow:0 .5em 1em 0 #700000;padding-bottom:env(safe-area-inset-bottom)}.box_contact ul{list-style:none;padding:0;margin:0;border-collapse:collapse;width:100%;-js-display:flex;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.box_contact ul li{flex-grow:1;flex-shrink:1;flex-basis:0;text-align:center;display:flex;margin-bottom:0}.box_contact ul li a{display:block;width:100%;outline:none;text-decoration:none;padding:5px 3px;white-space:nowrap}.box_contact ul li a span{font-weight:400;color:#333;background:transparent;font-size:3.5vw;display:block;margin:2px 0 0}.box_contact ul li a img{height:6vw;width:auto;margin:0}}@media (min-width: 1px){.box_contact ul li a#box_contact_1 span:after{border-right-color:#13990a}.box_contact ul li a#box_contact_1 span{color:#fff;background-color:#13990a}.box_contact ul li a#box_contact_1 > div{box-shadow:0 0 0 0 #13990a}}@media (max-width: 0px){.box_contact ul li a#box_contact_1 span{color:#333;background-color:#fff}.box_contact ul li a#box_contact_1{background:#fff}}@media (min-width: 1px){.box_contact ul li a#box_contact_2 span:after{border-right-color:#00acd3}.box_contact ul li a#box_contact_2 span{color:#fff;background-color:#00acd3}}@media (max-width: 0px){.box_contact ul li a#box_contact_2 span{color:#333;background-color:#fff}.box_contact ul li a#box_contact_2{background:#fff}}@media (min-width: 1px){.box_contact ul li a#box_contact_3 span:after{border-right-color:#0084ff}.box_contact ul li a#box_contact_3 span{color:#fff;background-color:#0084ff}}@media (max-width: 0px){.box_contact ul li a#box_contact_3 span{color:#333;background-color:#fff}.box_contact ul li a#box_contact_3{background:#fff}}
/*======== End Chat Zalo ========*/
.container-backgroud{
background: #fff;
}
/*==================================*/
/* Products Listing
/* =================================*/
.products-ul {
display: flex;
flex-wrap: wrap;
}
.products-ul .products-li {
width: 20%;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.products-li:hover {
box-shadow: 0px 0px 10px #d8d8d8;
}
.products-item:hover {
box-shadow: none;
}
.products-name {
font-family: "Roboto Light", "Roboto", "Arial", sans-serif;
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
min-height: 40px;
max-height: 40px;
width: 100%;
color: rgb(36, 36, 36);
font-size: 13px;
font-weight: 300;
font-style: normal;
font-stretch: normal;
line-height: 1.54;
letter-spacing: 0.1px;
text-align: left;
text-overflow: ellipsis;
margin: 5px 0 10px;
overflow: hidden;
}
.products-name a {
font-size: .9em;
}
.products-options {
display: flex;
padding: 10px 0px 5px 0px;
margin-left: 0;
}
.more-variant {
width: 80%;
margin: auto;
}
.products-options .img {
border: 1px solid #f3f3f3;
width: 35px;
}
.product-gallery .img:hover,
.products-options .img:active,
.products-options .img:hover {
border: 1px solid #ffa500;
}
.product-gallery img,
.products-options img {
-webkit-filter: brightness(98%);
filter: brightness(98%);
}
.product-gallery .owl-nav .owl-item:last-child {
margin-right: 0;
}
.products-options .owl-nav i {
border: 0;
border-radius: 0;
color: #808080;
}
.products-options .owl-nav .owl-prev {
left: -25px;
}
.products-options .owl-nav .owl-next {
right: -25px;
}
.product-gallery .owl-nav .owl-prev {
left: -30px;
}
.product-gallery .owl-nav .owl-next {
right: -30px;
}
.products-price {
color: #ff424e;
}
.products-price {
color: #ff424e;
}
.products-price .old-price {
font-family: "Roboto Light", "Roboto", "Arial", sans-serif;
font-size: .8em;
}
.product-option {
color: #333;
margin-bottom: 10px;
}
.product-option-label {
font-weight: lighter;
}
.product-option-label span {
color: #000;
font-family: "Roboto", "Arial", sans-serif;
font-weight: 400;
margin-left: 5px;
}
.product-option-image-li label,
.product-option-select label {
border-radius: .25em;
margin-right: 5px;
}
.product-option-image-li label.active,
.product-option-select label.active,
.product-option-image-li label:hover,
.product-option-select label:hover {
background-color: #ffa500;
border: 1px solid #ffa500;
border-radius: .25em;
color: #fff;
}
.category-wrap .products-wrap {
padding-bottom: 0px;
}
.products-promotion {
margin-bottom: 5px;
}
.products-promotion span {
color: #FFA500;
font-weight: lighter;
font-size: .7em;
padding: 3px 6px;
margin-right: 8px;
border: solid 1px #FFA500;
}
.product-stock {
color: #333;
font-size: .8em;
}
.products-item-show-stock {
min-height: 360px;
}
.product-stock-out-of-stock {
color: #c1272d;
font-size: .8em;
}
.two-btn .btn {
width: 49%;
}
.product-edit-address .btn {
padding: 8px 30px;
text-transform: uppercase;
font-size: .9em;
}
.product-edit-address .btn-link {
border: 1px solid #ddd;
}
.product-edit-address .btn-link:focus,
.product-edit-address .btn-link:hover {
text-decoration: none;
}
.product-related-store {
font-weight: bold;
}
.product-related-store-item {
font-size: .8em;
width: 100%;
display: flex;
padding-bottom: 10px;
}
.product-related-store-item .left {
flex: 0 0 70%;
}
.product-related-store-item .left span {
display: block;
}
.product-related-store-name {
font-weight: bold;
}
.product-related-store-price {
font-weight: bold;
color: #fea500;
}
.product-related-store-item .right {
text-align: right;
flex: 0 0 30%;
}
.product-related-store-item .btn-view {
font-size: .8em;
padding: 3px 12px;
border: 1px solid #ddd;
}
.product-related-store-item .btn-view:hover {
color: #fea500;
border: 1px solid #fea500;
}
.product-related-store-toggle {
max-height: 130px;
overflow: hidden;
}
.product-related-store-toggle.show {
max-height: none;
overflow: auto;
}
.product-related-store-more {
color: #fea500;
display: block;
font-size: .8em;
text-align: center;
margin-top: 10px;
padding-bottom: 5px;
}
/*==================================*/
/* Products
/* =================================*/
.negotiation {
font-weight: 400;
background-color: #1BC5BD;
color: #FFFFFF;
padding: 6px 12px;
}
.product-related .products-li {
margin-bottom: 30px;
}
.product-related .products-item {
max-width: 100%;
margin-bottom: 0px;
}
.product-action .btn {
font-size: 1em;
padding: 0.65em 1em;
}
.contact_for_price {
color: #ff424e;
font-size: 15px;
font-weight: bold;
padding-top: 10px;
}
.contact_for_price a{
color: #ff424e;
}
/*==================================*/
/* Modal Product
/* =================================*/
.modal-product {
max-width: 1000px;
}
.modal-product .modal-content,
.modal-product .modal-header {
border-radius: 0;
}
.modal-product .main-name {
font-weight: 500;
}
.modal-product .products-item {
margin: 10px;
}
.modal-product .owl-prev {
left: 0;
top: 55%;
}
.modal-product .owl-next {
right: 0;
top: 55%;
}
.modal-product .modal-header {
border-bottom: 0;
}
.modal-product .modal-header .close {
background: #fea500;
color: #fff;
opacity: 1;
padding: .6em 1em;
}
.modal-product-ul {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.modal-product-li {
flex: 60%;
padding-left: 15px;
padding-right: 15px;
}
.modal-product-li+.modal-product-li {
flex: 40%;
}
.modal-product-li i {
margin-right: 5px;
}
.modal-product-li .fa-check-square {
color: #8CC63F;
}
.modal-product-li .fa-info-circle {
color: #999;
}
.modal-product-ul .mobile {
display: none;
}
.modal-product-sku,
.modal-product-li .count {
color: #999;
font-size: .7em;
}
.modal-product-wrap {
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
margin: 10px 0 20px 0;
}
.modal-product-wrap .modal-product-li {
padding-top: 15px;
padding-bottom: 15px;
}
.modal-product-wrap .modal-product-li:first-child {
padding-left: 0;
padding-right: 15px;
}
.modal-product-wrap .modal-product-li:last-child {
padding-left: 15px;
padding-right: 0;
border-left: 1px solid #f3f3f3;
}
.modal-product-img {
border: 1px solid #f3f3f3;
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
padding: 5px;
}
.modal-product-title a {
color: #333;
}
.modal-product-title a:hover {
color: #FFA500;
}
.modal-product-sku {
margin: 10px 0 5px;
}
.modal-product-price {
color: #FFA500;
font-size: 1.2em;
font-weight: 500;
}
.modal-product-total {
margin: 10px 0;
}
.modal-product-sub-total span {
font-weight: 500;
color: #000;
float: right;
}
.modal-product-total {
margin: 10px 0;
font-weight: 500;
color: #000;
}
.modal-product-total span {
color: #FFA500;
font-size: 1.2em;
float: right;
}
.modal-product-vat {
text-align: right;
color: #666;
margin-bottom: 10px;
font-style: italic;
}
.modal-product-action {
text-align: right;
}
.modal-product-action .btn-link {
border: 1px solid #ddd;
}
.modal-product-action .btn-link:hover {
text-decoration: none;
}
/*==================================*/
/* Product
/* =================================*/
.product-bg {
background: #fff;
padding: 20px;
}
.product-bg .meta th {
background: #F2F2F2;
}
.product-description {
max-height: 839px;
overflow: hidden;
}
.product-read-more {
text-align: center;
background: #fff;
padding: 20px;
}
.product-read-more .btn {
color: #fea500;
border: 1px solid #fea500;
min-width: 120px;
}
.product-read-more .btn:hover {
background: #fea500;
color: #fff;
text-decoration: none;
}
.product-bag {
margin-bottom: 30px;
}
.product-bag.mb0 {
margin-bottom: 0;
}
.product-related {
margin-top: 48px;
}
.product-related .products-item {
background: #fff;
margin-bottom: 30px;
max-width: none;
}
.product-title {
color: #333;
font-size: 1.4em;
font-weight: 500;
margin: 10px 0 15px;
}
.product-col-left {
border-left: 1px solid #f3f3f3;
}
.product-col-right {
border-right: 1px solid #f3f3f3;
}
.product-meta {
border-bottom: 1px solid #f3f3f3;
margin-bottom: 15px;
font-size: .8em;
}
.product-brand label {
font-weight: 500;
}
.product-brand a {
color: #29abe2;
}
.product-sku {
color: #999999;
margin-left: 30px;
}
.product-share {
float: right;
margin-left: 30px;
}
.product-share a {
color: #999999;
font-size: 1em;
margin-left: 5px;
}
.product-share a:hover {
color: #fea500;
}
.product-gallery {
padding-top: 20px;
padding-left: 40px;
padding-right: 40px;
}
.product-gallery .img {
border: 1px solid #f3f3f3;
}
.product-gallery .owl-nav i {
border: 0;
border-radius: 0;
color: #808080;
}
.product-price .price {
color: #fea500;
font-size: 2.0em;
font-weight: 500;
}
.product-price .old-price {
color: #888888;
font-size: 1.3em;
font-weight: 500;
text-decoration: line-through;
}
.product-price .discount {
color: #c1272d;
font-size: 1.4em;
font-weight: 500;
margin-left: 5px;
}
.product-intro {
font-size: .8em;
margin: 10px 0;
}
.product-intro p {
margin: 0 0 5px;
}
.product-quantity {
margin-bottom: 20px;
}
.product-quantity::after {
clear: both;
content: "";
display: block;
}
.product-quantity label {
float: left;
margin-top: 4px;
margin-right: 40px;
}
.product-quantity .count {
float: left;
margin-top: 4px;
margin-left: 10px;
color: #B3B3B3;
font-size: .8em;
}
.product-qty {
float: left;
position: relative;
max-width: 100px;
}
.product-qty .minus-qty,
.product-qty .plus-qty {
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
background: #f2f2f2;
color: #808080;
text-align: center;
cursor: pointer;
}
.product-qty .minus-qty {
left: 0;
}
.product-qty .plus-qty {
right: 0;
}
.product-qty .qty {
/*padding-left: 30px;
padding-right: 30px;
max-width: 150px;
display: block;*/
}
.product-qty .input-qty {
border: 0;
height: 30px;
width: 100%;
text-align: center;
font-size: 1.2em;
outline: none;
color: #808080;
}
.product-action .btn {
padding: 12px 10px;
text-transform: uppercase;
font-size: 13px;
}
.product-action .btn-link {
border: 1px solid #ddd;
}
.product-action .btn-link:focus,
.product-action .btn-link:hover {
text-decoration: none;
}
.product-info {
border-bottom: 1px solid #f3f3f3;
margin-bottom: 10px;
}
.product-info:last-child {
border-bottom: 0;
}
.product-info-li {
margin-bottom: 10px;
position: relative;
font-size: 12px;
}
.product-info-li .left {
position: absolute;
left: 0;
top: 6px;
width: 25px;
color: #999999;
}
.product-info-li .right {
position: absolute;
right: 0;
}
.product-info-li .center {
display: block;
padding: 0 70px 0 25px;
}
.product-info-li .grey {
color: #aaa;
}
.product-info-li a.grey:hover {
color: #fea500;
}
.product-edit-address {
background: #fff;
border: 1px solid #ddd;
padding: 15px 15px 10px;
position: absolute;
right: 0;
z-index: 10;
min-width: 270px;
box-shadow: 0 0 5px #dedede;
display: none;
}
.product-edit-address label {
font-weight: 600;
margin: 0;
font-size: 1em;
}
.product-edit-address .form-control {
font-size: .9em;
}
.product-edit-address .btn {
border: 1px solid #ddd;
background: #fff;
font-size: .9em;
padding-left: 20px;
padding-right: 20px;
}
.product-edit-address .btn:hover {
background: #fea500;
color: #fff;
border-color: #fea500;
}
.product-edit-address p {
margin: 0 0 10px;
}
.product-option {
margin-bottom: 20px;
color: #999;
}
.product-option-label {
margin-bottom: 5px;
}
.product-option-image-ul {
display: flex;
flex-wrap: wrap;
margin-left: -5px;
margin-right: -5px;
}
.product-option-image-li {
flex: 20%;
padding-left: 5px;
padding-right: 5px;
}
.product-option-image-li label {
border: 1px solid #ddd;
display: block;
padding: 5px;
cursor: pointer;
max-width: 70px;
}
.product-option-image-li input,
.product-option-select input {
display: none;
}
.product-option-select label {
border: 1px solid #ddd;
display: inline-block;
cursor: pointer;
padding: 5px 10px;
}
.product-option-image-li label.active,
.product-option-select label.active,
.product-option-image-li label:hover,
.product-option-select label:hover {
border-color: #fea500;
color: #000;
}
.product-option-list-name {
float: left;
margin: 7px 10px 0 0;
}
.product-info-chat {
float: right;
font-weight: 500;
}
.product-info-feedback {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.product-info-feedback .product-info-li {
flex: 30%;
padding-left: 15px;
padding-right: 15px;
font-size: .7em;
border-left: 1px solid #f3f3f3;
}
.product-info-feedback .product-info-li:first-child {
border-left: 0;
}
.product-info-feedback .product-info-li .sum {
font-size: 1.6em;
font-weight: 500;
margin-top: 5px;
}
.product-info-store {
text-align: center;
}
.product-info-store i {
margin-right: 5px;
}
.product-other .owl-prev {
left: 0;
top: 55%;
}
.product-other .owl-next {
right: 0;
top: 55%;
}
.product-other .products-item {
min-height: 338px;
}
/*==================================*/
/* Cart
/* =================================*/
.cart-table {
background: #fff;
}
.cart-table tr:first-child td {
border-top: 0;
}
.cart-tr-img {
border: 1px solid #ddd;
display: inline-block;
padding: 5px;
width: 80px;
}
.cart-tr-title {
margin: 0 0 8px;
font-size: .9em;
}
.cart-tr-title a {
color: #000000;
}
.cart-tr-title a:hover {
color: #FFA200;
}
.cart-tr-emove a,
.cart-tr-sku {
color: #808080;
font-size: .7em;
}
.cart-tr-sku {
margin-bottom: 2px;
}
.cart-tr-seller {
color: #000000;
}
.cart-table .product-qty .qty {
width: 100px;
}
.cart-tr-price {
font-size: .9em;
color: #000000;
margin-bottom: 10px;
}
.cart-tr-old {
font-size: .7em;
color: #808080;
margin-bottom: 10px;
text-decoration: line-through;
}
.cart-tr-discount {
font-size: .7em;
color: #C1272D;
}
.cart-tr-total {
font-size: .9em;
color: #FFA200;
}
.cart-group {
background: #fff;
padding: 15px;
}
.cart-group-title {
font-size: 1em;
color: #FFA200;
margin: 0 0 10px;
padding-bottom: 10px;
border-bottom: 1px solid #F2F2F2;
}
.cart-group-meta label {
font-size: 13px;
color: #808080;
margin: 0;
margin-bottom: 0.5rem;
display: inline-block;
padding-left: 0;
}
.cart-group-meta span {
/*float: right;*/
font-size: 1.2em;
color: #dc3545!important;
}
.cart-group-total {
margin-top: 10px;
margin-bottom: 20px;
}
.cart-group-total label {
font-size: .8em;
color: #000000;
}
.cart-group-total span {
font-size: .9em;
color: #FFA200;
}
.cart-group-meta .button {
display: block;
}
.cart-page {
padding-top: 20px;
}
.cart-page .heading,
.cart-name-relate {
text-transform: none;
color: #808080;
font-weight: normal;
}
.cart-ul {
display: flex;
flex-wrap: wrap;
background: #fff;
margin-top: 1px;
}
.cart-ul:first-child {
margin-top: 0;
}
.cart-li-img {
flex: 0 0 10%;
padding: 10px;
}
.cart-li-title {
flex: 0 0 43%;
padding: 10px;
}
.cart-li-price {
flex: 0 0 15%;
padding: 10px;
}
.cart-li-qty {
flex: 0 0 15%;
padding: 10px;
}
.cart-li-total {
flex: 0 0 16%;
padding: 10px;
}
/*==================================*/
/* Cart
/* =================================*/
.modal-product-vat {
color: #666;
font-size: .8em;
font-weight: lighter;
margin-bottom: 10px;
}
.cart-tr-remove a {
color: #FFA200;
font-size: .8em;
}
.cart-tr-seller {
font-weight: lighter;
}
.cart-tr-old {
font-size: .8em;
}
.cart-tr-discount {
font-size: .8em;
}
.cart-group-meta .vat {
color: #808080;
font-size: .8em;
font-weight: lighter;
padding-bottom: 10px;
}
.cart-only-stock-available {
color: #ff424e;
font-size: .8em;
}
.cart-remove-modal .btn-link {
border: 1px solid #ddd;
}
.cart-remove-modal .btn-link:focus,
.cart-remove-modal .btn-link:hover {
color: #ffa500;
text-decoration: none;
}
.text-dark {
color: #343a40!important;
}
/*==================================*/
/* Form
/* =================================*/
.standard-form {
max-width: 100%;
padding: 0px;
background: #FFFFFF;
font-size: .8em;
}
.standard-form .form-control {
background: #F2F2F2;
font-size: 13px;
border-radius: 0;
border: 0;
}
.standard-form .form-control::placeholder {
font-style: normal !important;
}
.standard-form .button {
display: block;
border-radius: 4px;
width: 100%;
}
.standard-form .title {
color: #333333;
font-size: .9em;
font-weight: 700;
margin: 5px 0px;
}
.standard-form .label {
font-weight: 500;
}
.button-outline {
color: #ffa500;
background: #fff;
font-size: 13px;
font-weight: 500;
border: solid 1px #ffa500;
}
.button-outline:hover,
.button-outline:focus,
.button-outline:active:focus,
.button-outline:active {
outline: none;
color: #fff;
background: #ffa500;
}
.btn-secondary {
color: #F7941D;
background-color: #FFF7E6;
border-color: #F7941D;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-secondary:hover {
color: #CC853D;
background-color: #FFF7E6;
border-color: #CC853D;
}
.btn-secondary:focus, .btn-secondary.focus {
color: #F7941D;
background-color: #FFF7E6;
border-color: #F7941D;
-webkit-box-shadow: 0 0 0 0.2em rgba(247, 148, 29, 0.2);
box-shadow: 0 0 0 0.2em rgba(247, 148, 29, 0.2);
}
.btn-secondary.disabled, .btn-secondary:disabled {
color: #181C32;
background-color: #E4E6EF;
border-color: #E4E6EF;
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
color: #BFBFBF;
background-color: #F7F7F7;
border-color: #BFBFBF;
}
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
-webkit-box-shadow: 0 0 0 0.2em rgba(197, 200, 211, 0.5);
box-shadow: 0 0 0 0.2em rgba(197, 200, 211, 0.5);
}
.form-control {
display: block;
width: 100%;
height: calc(1.1em + 1.1em + 2px);
padding: 0.375em 0.75em;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25em;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.qty {
display: flex !important;
align-items: center;
}
.qty > button {
border: 1px solid #c5c5c5;
width: 30px;
height: 30px;
border-radius: 3px;
text-align:center;
background-color: #f5f5f5;
font-size: 25px;
}
.qty > input[type="number"] {
height: 30px;
width: 40px;
font-size: 16px;
border: 1px solid #c5c5c5;
padding: 0px;
text-align: center;
margin: 0px 5px;
border-radius: 3px;
}
.qty > input[type="number"]:focus-visible {
outline: none;
}
.qty > input[type="number"]::-webkit-inner-spin-button,
.qty > input[type="number"]::-webkit-outer-spin-button {
appearance: none;
}
.qty-input {
display: flex !important;
align-items: center;
}
.qty-input .product-qty,
.qty-input .qty-count {
background: transparent;
color: inherit;
font-weight: 500;
font-size: inherit;
border: none;
display: inline-block;
min-width: 0;
height: 2.2rem;
line-height: 1;
}
.qty-input .product-qty:focus,
.qty-input .qty-count:focus {
outline: none;
}
.qty-input .product-qty {
height: 30px;
width: 40px;
font-size: 16px;
border: 1px solid #c5c5c5;
padding: 0px;
text-align: center;
margin: 0px 5px;
border-radius: 3px;
background: #fff;
}
.qty-input .product-qty::-webkit-outer-spin-button, .qty-input .product-qty::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.qty-input .qty-count {
padding: 0;
cursor: pointer;
width: 2.5rem;
font-size: 1.25em;
text-indent: -100px;
overflow: hidden;
position: relative;
}
.qty-input .qty-count:before, .qty-input .qty-count:after {
content: "";
height: 2px;
width: 10px;
position: absolute;
display: block;
background: #000;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.qty-input .qty-count--minus {
border: 1px solid #c5c5c5;
width: 30px;
height: 30px;
border-radius: 3px;
text-align: center;
background-color: #f5f5f5;
font-size: 25px;
}
.qty-input .qty-count--add {
border: 1px solid #c5c5c5;
width: 30px;
height: 30px;
border-radius: 3px;
text-align: center;
background-color: #f5f5f5;
font-size: 25px;
}
.qty-input .qty-count--add:after {
transform: rotate(90deg);
}
.qty-input .qty-count:disabled {
color: #ccc;
background: #f2f2f2;
cursor: not-allowed;
border-color: transparent;
}
.qty-input .qty-count:disabled:before, .qty-input .qty-count:disabled:after {
background: #ccc;
}
.qty-input {
border-radius: 0;
}
/* ARRUMAÇÃO BTN LIXO /////////*/
.shopcart-item__trash {
display: flex;
align-items: center;
justify-content: center;
}
.remove-product {
color: #ced1d5;
font-size: 1.3rem;
border: 0;
background: none;
padding: 10px;
transition: 0.2s ease-in-out;
}
.remove-product:hover{
color: #95a5a6;
}
/* /// MEDIA QUERIES //////////////////////*/
/* ////////////////////////////////////////*/
@media (max-width: 576px){
.shopcart-item{
display: none;
}
.shopcart-item__title > div > div > p {
display: inline-block;
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 0.8rem;
line-height: 1.3;
}
.shopcart-item__title > div > div > span {
display: block;
font-size: 1rem;
padding-right: 5px;
}
.shopcart-item__title {
margin-bottom: 20px;
}
.flex-container {
margin-top: 10px;
}
.qty-input, .qty-input .product-qty {
width: 100%;
}
.shopcart-item__price {
align-items: start;
}
.price-title {
display: block;
font-size: 0.6rem;
line-height: 1.2;
font-weight: 400;
color: #999;
}
.price-value {
display: block;
font-size: 1.5rem;
line-height: 1.2;
font-weight: 700;
}
.position:nth-child(1){order:1;}
.position:nth-child(2){order:2;}
.position:nth-child(3){order:3; background-color: #f1f1f1; border-right: 1px solid #ccc;}
.position:nth-child(4){order:6;}
.position:nth-child(5){order:4; background-color: #f1f1f1; border-right: 1px solid #ccc; border-left: 1px solid #fff;}
.position:nth-child(6){order:5; background-color: #f1f1f1; border-left: 1px solid #fff;}
.position:nth-child(7){order:7;}
}
@media (max-width: 991px){
.position:nth-child(1){order:1;}
.position:nth-child(2){order:2;}
.position:nth-child(3){order:3;}
.position:nth-child(4){order:6;}
.position:nth-child(5){order:4;}
.position:nth-child(6){order:5;}
.position:nth-child(7){order:7;}
}