@media (max-width: 767px) {
	.navbar-header button, .navbar-header button:hover, .navbar-header button:focus, .navbar-header button:active {
		border-radius: 0px;
		padding: 10px;
		background-color: #684287!important;
		border-color: #684287!important;
		color: #fff;
		width: 80px;
		text-align: center;
		float: none;
		margin: 0;
		margin-top: 15px;
	}

	.navbar-collapse {
        position: absolute;
        background-color:#fff;
        top: 83px!important;
        width: 100%;
        text-align: center;
        z-index: 99999;
        padding-bottom: 20px;
		box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }
	.dropdown-menu {
		position: static;
		float: none;
		border: 0;
	}
	.dropdown-menu .dropdown-item {
		border-bottom: 0!important;
	}
	.navbar-expand-lg {
		padding-left: 0;
		padding-right: 0;
	}
	.navbar-expand-lg li.active a, .navbar-expand-lg li a:hover, .navbar-expand-lg li a:active, .navbar-expand-lg li a:focus {
		padding-bottom: 10px;
	}
	.navbar-header {
		text-align: center;
	}
	.logo {
		display:none;
	}
	.mobi-logo img {
		width: 60%;
	}
	.navbar-light .navbar-toggler {
		color: rgba(0,0,0,.5);
		border-color: transparent;
		text-align: end;
	}
	button:focus {
		outline: none;
	}
	.navbar-expand-lg .navbar-toggle .icon-bar {
		background-color: #fff;
		margin-left: auto;
		margin-right: auto;
	}

	.navbar-expand-lg li {
		text-align: center;
		width: 100%;
	}
	.navbar-nav .dropdown-menu {
		border: 0;
	}
	.navbar-expand-lg li a {
		padding-top: 10px!important;
		text-align: center;
		font-weight: 100;
	}
	.navbar-expand-lg li.active a, .navbar-expand-lg li a:hover, .navbar-expand-lg li a:active, .navbar-expand-lg li a:focus {
		background-color: transparent!important;
	}
	.cart-selector {
		padding-top: 0px!important;
	}
	.modal-title {
		margin-bottom: 0;
		line-height: 1.5;
		font-size: 25px;
	}
	.modal .close {
		float: right;
		font-size: 30px;
		font-weight: 100;
		line-height: 1;
		color: #000;
		text-shadow: 0 1px 0 #fff;
		opacity: 1;
		position: absolute;
		right: 10px;
		top: 5px;
	}

	.modal-dialog.makeup .modal-body {
		max-height: 680px;
	}
	.shop-modal .btn-primary {
		margin-top: 20px;
	}
	.shop-modal {
		text-align: center;
		padding-top: 30px;
		padding-bottom: 20px;
	}
	.home-about p {
		margin-top: 0;
	}
	.home-about .col-md-4 {
		padding-top: 15px;
	}
	.home-products {
		padding-left: 15px;
		padding-right: 15px;
	}
	.prod h2 {
		padding-top: 10px;
	}
	.home-grid {
		padding-top: 0!important;
		padding-bottom: 0!important;
	}

	.home-grid .shop-now {
		border-top: 2px solid #fff;
	}

	.home-grid .overlay {
		opacity: 1!important;
	}

	.home-grid .overlay p {
		padding-top: 40px!important;
	}

	.shop h1, .register h1 {
		font-size: 50px!important;
	}

	.cart-product-remove .btn-primary {
		padding: 10px;
		min-width: 120px;
		width: auto;
		max-width: 130px;
		background-color: #684287;
		border: 2px solid #684287;
		color: #fff;
		text-transform: uppercase;
	}

	/* hide table headings */
    .cart .table-responsive table thead {
        display: none;
    }

    /* treat rows like divs */
    .cart .table-responsive table tr {
        display: block;
        border-top: 2px solid lightgray; /* separate row data with thicker line */
        margin-top: 5px;
    }

    /* treat columns like divs */
    .cart .table-responsive table td {
        display: block;
        text-align: right; /* text to right */
		width: 100%;
		margin-left: 0;
    }

    /* this part is ugly, but necessary to show label on left */
    .cart .table-responsive table td:before {
        content: attr(data-label);
        float: left; /* label to left */
        font-weight: 700;
    }

	.cart .table-responsive table td .form-control {
		display: inline;
		width: 20%;
		/* float: right; */
		text-align: right;
	}

	.addresses {
		width: 100%;
	}

	.cart-product-image img {
		width: 50%;
		vertical-align: top;
	}

	.product h1 {
		padding-top: 20px;
		font-size: 50px!important;
	}

	.input {
		width: 100%!important;	
	}

	.footer-upper img {
		display: none;
	}

	.footer-lower .footer-menu {
		display: none;
	}

	.footer-upper .qrcode-img {
		width: 40%;
		height: auto;
		display: block;
		margin: 15px 0;
	}
	.social i {
		font-size: 30px;
	}
	.owl-carousel .item .col-md-6, .owl-carousel .col-md-5, .owl-carousel .col-md-7 {
		width: 50%;
		float: left;
		margin-right: auto;
		margin-left: auto;
	}
	.mobi-buttons a {
		margin-bottom:10px;
	}
	.pricelist {
		padding: 50px 20px!important;
	}
	
	.service.pricelist a {
		width: 300px;
	}
	.service h2 {
		background-color: #684287;
		color: #fff;
		text-align: center;
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 15px;
		padding-bottom: 15px;
		font-size: 25px;
	}

	.profile .btn-primary {
		width: 100%;
		max-width: none;
	}

	.profile .details p {
		width: 100%;
	}
}

@media (min-width: 768px) and (max-width: 991px){
	.logo img {
		width: 50%;
	}
	.home-grid {
		text-align: center;
	}
	.navbar-collapse {
        position: absolute;
        background-color:#fff;
        top: 90px!important;
        width: 50%;
        text-align: center;
        z-index: 99999;
        padding-bottom: 20px;
		right: 0;
		box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        max-height: 400px;
		overflow-y: scroll;
	}
	button:focus {
		outline: none;
	}

	.cart-selector {
		text-align: center;
		margin-bottom: 15px;
		margin-top: 15px;
	}
	.navbar-expand-lg li.active a, .navbar-expand-lg li a:hover, .navbar-expand-lg li a:active, .navbar-expand-lg li a:focus {
		padding-bottom: 10px!important;
	}
	.navbar-expand-lg {
		padding-left: 0;
		padding-right: 0;
	}
	.navbar-expand-lg li a {
		text-align: center;
	}
	.dropdown-menu {
		position: static;
		float: none;
		border: 0;
	}	
	.dropdown-menu .dropdown-item {
		border-bottom: 0!important;
	}
	.home-grid .col-md-6 {
		padding:0;
	}
	.home-grid .facials {
		padding: 30px 20px;
	}
	.home-grid .waxing {
		padding: 7px 20px;
	}
	.home-grid .clearfix {
		display: none;
	}
	.mobi-logo img {
		width: 30%;
	}
	.home-grid .shop-now {
		border-top: 2px solid #fff;
	}
	.logo {
		display:none;
	}
	.navbar-light .navbar-toggler {
		color: rgba(0,0,0,.5);
		border-color: transparent;
		text-align: end;
	}
	.home-products .col-md-3, .services .col-md-4, .shop .col-md-3, .product .col-md-5, .product .col-md-7, .similar-products .col-md-3 {
		width: 50%;
		float: left;
	}
	.home-about p {
		margin-top:0;
	}
	.prod .btn-primary {
		min-width: 100%!important;
		margin-bottom:10px;
	}
	.home-grid .annique img {
		width: 30%;
	}
	.home-about .row {
		align-items:center;
	}
	.cart-product-image {
		width: 40%;
		vertical-align: top;
	}
	.cart .btn-primary {
		min-width: 100px;
		width: auto;
		max-width: 100px;
	}
	.table td, .table th {
		min-width: 100px;
	}
	.addresses {
		width: 100%;
	}
	footer {
		text-align: center;
	}

	.footer-upper img {
		display: none;
	}

	.footer-upper .qrcode-img {
		height: auto;
		display: block;
		margin: 15px auto;
	}
	.footer-lower .footer-menu {
		display: none;
	}

	.yoco-footer-img {
		margin: auto;
		width: 200px;
	}
	.social i {
		font-size: 30px;
	}
	.contact p {
		padding-right:0;
	}

	.profile .details p {
		width: 100%;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.navbar-expand-lg li a {
		padding-right: 12px;
		padding-left: 12px;
	}
	.home-grid .facials {
		padding: 33px 20px;
	}
	.nav-link {
		padding: 9px;
	}
	.home-grid .waxing {
		background-color: #684287;
		padding: 39px 20px;
	}

	.home-grid .facials h2, .home-grid .waxing h2, .home-grid .bio-micro h2 {
		font-size: 20px!important;
	}
	.home-grid .bio-micro {
		padding: 9px 20px;
	}
	.dropdown-menu {
		top: 118%;
		min-width: 100%;
		right: 2%;
		width: fit-content;
	}

	.home-grid .shop-now h2 {
        font-size: 25px !important;
        line-height: 24px !important;
    }
	.home-grid .shop-now {
		background-color: #684287;
		padding: 26px 20px;
	}
	.home-grid .facials p {
		font-size: 16px!important;
	}
	.home-grid .overlay p {
		color: #fff;
		padding-top: 30px;
		font-size: 30px;
	}

	.home-grid .annique {
		padding-top: 20px!important;
		padding-bottom: 20px!important;
	}

	.details img {
		width: 50%!important;
	}

	.footer-upper .qrcode-img {
		width: 60%!important;
		height: auto;
	}

	.yoco-footer-img {
		width: 220px!important;
	}

	.profile .details p {
		width: 100%;
	}
}

/* Laptop: */
@media (min-width: 1200px) and (max-width: 1390px) {
	.social i {
		font-size: 30px;
	}

	.logo img {
		width: 70%;
		height: auto;
	}
}

/* 14” HD Laptop and bigger */
@media (min-width: 1391px) and (max-width: 1600px) {
	.social i {
		font-size: 30px;
	}

	.logo img {
		width: 70%;
		height: auto;
	}
}

@media (min-width: 1400px) and (max-width: 1600px) {
	.home-grid .annique img {
		width: 40%;
	}
}