/******* header *******/

@media (max-width:1199px) {
    .header-right {
		width: 34%;
	}
	.header-search {
		width: 46%;
	}
	.fill-line:after{
	    width:240%;
	}
}
@media (max-width:991px) {

	.header-right ul li {
		padding-left: 8%;
        margin-top: 8px;
	}
	span.o_wizard_has_extra_step.d-none + .progress-wizard .fill-line:after,  .fill-line:after{
		left: 27%;
		width:150%;
	}
	.fill-line:after {
        left: 50%;
    }
	.header-right ul li i {
        font-size: 35px;
    }
    .header-right>ul>li>a {
        font-size: 0px;
    }
    span.o_wizard_has_extra_step.d-none + .progress-wizard:after {
        width: 80%;
    }
    .progress-wizard:after{
        width: 70%;
    }
}

@media (max-width:767px) {
    header.o_header_affix.affix.affixed {
        display: none !important;
    }
    header .navbar-brand.logo {
        width: min-content;
        display: block;
        margin: auto;
        text-align: center;
    }
    .header-right ul li{
        margin-top:0;
    }
	header nav .navbar {
		padding: 0;
	}
	header nav .navbar button.navbar-toggle {
		background: #10305a !important;
		border-color: #10305a !important;
		float: left;
		margin-left: 10px;
		z-index: 99;
		position: relative;
		border-radius: 0;
	}
	.navbar-default .navbar-toggle .icon-bar {
		background-color: #fff;
	}
	header .navbar-collapse.navbar-top-collapse {
		border: none;
		width: 100%;
	}
	.navbar-header.logo {
		float: none;
		margin: auto;
		width: 100%;
	}
	.header-search {
		padding: 0;
		margin: auto;
		float: none;
		margin-top: 20px;
		width: 80%;
	}
	.header-right {
        position: absolute;
        top: 118px;
        z-index: 9;
        margin: 0;
        width: 90%;
        max-width: 170px;
        right: 0;
        left: auto;
    }
	.header-right ul li {
		padding: 15px 3%;
	}
	.header-right ul li i,
	.header-right ul li span,
	.header-right>ul>li>a {
		display: inline;
		color: #10305a;
	}
	.header-right ul li i {
		font-size: 20px;
	}
	.progress-wizard > a {
        width: 25%;
        flex: 25%;
    }
    span.o_wizard_has_extra_step.d-none + .progress-wizard .fill-line:after,  .fill-line:after {
        left: 48px;
        width: 100%;
    }
    .fill-line:after {
        left: 50%;
    }
	.header-right ul li sup {
		top: -1px;
	}
	.o_portal_my_details {
        margin-top: 25px;
    }
    .js_add_cart_json.d-none.d-md-inline-block {
        display: inline-block !important;
    }
    .products_pager.form-inline.justify-content-center{
        display: block;
        text-align: center;
    }
    ul.pagination.m-0.ml-2 {
        justify-content: center;
        margin: 10px !important;
    }
    main.modal-body.oe_optional_products_modal.oe_website_sale thead,
	main.modal-body.oe_optional_products_modal.oe_website_sale tabel,
	main.modal-body.oe_optional_products_modal.oe_website_sale tr,
	main.modal-body.oe_optional_products_modal.oe_website_sale td {
		display: inline-block;
		width: 100%;
	}
	main.modal-body.oe_optional_products_modal.oe_website_sale tr th.text-center.td-qty, main.modal-body.oe_optional_products_modal.oe_website_sale tr th.text-center.td-price {
		width: 50%;
	}
	.modal-dialog.modal-lg footer.modal-footer {
		flex-wrap: wrap;
		justify-content: center;
	}
	.modal-dialog.modal-lg  footer.modal-footer button.btn {
		margin: 5px;
	}
	.col-12.col-xl-8.oe_cart .col-lg-12 {
		border: solid 1px #ccc;
		margin: 15px;
		overflow-x: auto;
	}
}

@media (max-width:400px) {

	.oe_website_sale .row .row .col-md-12 {
		float: none;
		width: 90%;
		margin-bottom: 15px;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		border: 1px solid #dddddd;
		overflow-x: auto;
		padding: 10px;
		margin: 20px auto;
	}
	.container.wishlist-section {
		border: 1px solid #dddddd;
		overflow-x: auto;
		padding: 10px;
		margin: 20px auto;
	}
	.progress-wizard:after {
        top: 20%;
    }

    span.o_wizard_has_extra_step.d-none + .progress-wizard .fill-line:after,  .fill-line:after{
        top: 20%;
    }
}


/******* shop page responsive css *******/


/******* product list view responsive css *******/

@media (max-width: 767px) {
	.oe_website_sale .oe_product_cart form h5,
	#products_grid .oe_product.oe_grid .oe_subdescription {
		height: auto;
		overflow: visible;
		line-height: initial;
		-webkit-line-clamp: initial;
		max-height: 100%;
	}
	td.oe_product.oe_grid.oe-height-4.oe_image_full .oe_product_image {
		min-height: auto;
	}
	.oe_website_sale .oe_product_cart form h5:after,
	.oe_product .oe_subdescription:after {
		display: none;
	}
	.header-search button.btn.btn-default.oe_search_button,
	.header-search input.search-query.form-control.oe_search_box {
        height: 35px;
        padding: 0 10px;
    }
    .o_add_compare {
        display: inline-block  !important;
    }
    .o_product_feature_panel.d-none.css_editable_mode_hidden.d-md-block {
        display: block !important;
        width: 184px;
    }
    .text-center.progress-wizard-steplabel {
        width: auto;
        font-size: 12px;
        font-weight: 400;
    }
    .progress-wizard > a > div > i {
        font-size: 20px;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
    .dropdown.ml-2.dropdown_sorty_by {
        margin-top: 10px;
    }.o_footer_copyright .o_brand_promotion {
        text-align: center;
    }
    .container.mt16.website_forum .navbar-light .navbar-toggler-icon {
        background: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 400px) {
	#products_grid .oe_product.oe_list section {
		position: relative;
		width: 100%;
		padding-bottom: 10px;
	}
	#products_grid .oe_product .oe_product_image {
		position: relative;
		height: 190px;
		left: 0;
		right: 0;
	}
	#products_grid .oe_product.oe_list {
		height: auto;
	}
}


/******* popular products *******/

@media (max-width: 500px) {
	.suggested_product_title h3 span {
		width: 57%;
		display: inline-block;
		font-size: 20px;
	}
}

@media (max-width: 400px) {
	section.popular_product_section h2 {
		font-size: 20px;
	}
}