@media (max-width: 991px){

	#modal-loyalty-program .title{
    font-size: 16px;
    letter-spacing: normal;
	}
	#modal-loyalty-program .desc{
    margin: 0 0 12px;
    font-size: 12px;
	}

	.bg-auth-membership{
    background: none;
  }

  #navbar-loyalty {
    font-size: 12px;
    text-align: left;
	}
		#navbar-loyalty span{
			display: inline-block !important;
			vertical-align: top !important;
		}
		#navbar-loyalty .icon-crown {
	    height: 24px;
	    background-position: top center;
	    margin-right: 5px;
	  }
	  #navbar-loyalty span:nth-child(2){
	  	width: 66%;
	  }
	  #navbar-loyalty .bolder {
	    margin: 0 0 0 5px;
	    font-size: 12px;
	    padding: 0;
	    float: right;
	  }

	.profile-box {
    width: 100%;
  }
  	.profile-box .info .avatar,
  	.profile-box .info .name,
  	.profile-box .info .nav {
	    margin: 0;
		}
  	.profile-box .info .nav {
    	display: block;
    	margin: 16px 0 0;
		}
			.profile-box .info .nav .btn{
				min-width: 250px;
			}
		.profile-box .info .avatar {
    	width: 66px;
		}
		.profile-box .info .name {
	    font-size: 14px;
	    line-height: auto;
	    margin: 0 0 0 10px;
		}
		.profile-box .navlink {
	    display: block;
	    margin: 0 0 16px;
	    width: 100%;
		}
		.profile-box header {
	    font-size: 12px;
	    margin: 0 0 16px;
		}
			.profile-box header .btn-info {
		    background-size: 16px 16px;
		    width: 16px;
		    height: 16px;
			}
			.profile-box content {
		    font-size: 12px;
		    text-align: center;
		  }

	#modal-membership .modal-body h3{
		letter-spacing: auto;
	}

	#box-auth {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    margin: 0 0 25px;
	}
		#box-auth .title {
	    font-size: 14px;
	    margin: 0 0 32px;
	    border-top: none;
		}
		#box-auth .form-label {
	    font-size: 14px;
	  }

	.navbar-notif{
		text-align: left;
		font-size: 12px;
	}
		.navbar-notif .ic-notif {
	    background-size: 14px 14px;
	    width: 14px;
	    height: 14px;
	    margin-top: 3px;
	    vertical-align: top;
	  }
	  .navbar-notif .info{
	  	display: inline-block;
	  	width: 90%;
	  }

	.section {
    padding: 24px 0;
    font-size: 12px;
    text-align: center;
  }
  	.section .tagline,
  	.section .desc{
	    margin: 0 0 16px;
		}
		.section .title {
	    font-size: 20px;
	    margin: 0 0 16px;
	  }
	  .section .subtitle {
	    font-size: 14px;
	    margin: 0 0 16px;
		}
  .section-paragon-membership {
    background: none;
  }
	.section-membership-benefits .bg,
	.section-membership-earn .bg{
    display: none;
  }

  .benefit{
    display: block;
    font-size: 14px;
    width: auto;
    margin: 0 0 12px 0;
  }
  	.benefit content,
  	.benefit:before{
	    float: none;
		}
  	.benefit content,
  	.benefit.wide content{
    	width: 73%;
		}
		.benefit h5{
	    font-size: 14px;
	  }
	  .benefit:before{
	    margin-right: 10px;
		}

	.benefit.wide{
    width: auto;
	}

	.point-calculation {
    width: auto;
    font-size: 12px;
  }
  	.point-calculation span {
	    float: none;
	    width: 100%;
	    display: block;
	    margin: 0 0 10px;
		}

	.modal-loyalty .modal-body{
		padding-top: 30px;
	}	
	.modal-loyalty .title {
    font-size: 16px;
  }
  .modal-loyalty .desc {
    font-size: 12px;
  }
  .modal-loyalty .modal-body .close{
    top: 5px;
    right: 5px;
  }

  .tier{
    display: inline-block;
    width: 95%;
    margin: 0 0 12px;
    text-align: left;
  }
  	.tier .thumb,
  	.tier h5{
  		display: inline-block;
  		margin: 0;
  		padding: 0;
  		vertical-align: middle;
  		font-size: 16px;
  	}
  	.tier .thumb{
  		width: 40px;
  		height: 30px;
  		margin-right: 5px;
  	}
  	.tier p{
  		line-height: normal;
  		margin-top: 16px;
  	}

  .profile-box .benefit{
    display: block;
    margin: 0 0 15px;
    width: 100%;
    padding: 15px;
	}
		.profile-box .benefit:last-child{
			margin-bottom: 0;
		}
		.profile-box .benefit h5{
    	font-size: 18px;
	  }

	.profile-box .box-level-2{
		padding: 16px 16px !important;
	}
		.profile-box .box-level-2 h5 {
	  	font-size: 22px;
	  }
	  .profile-box .box-level-2:before {
	    width: 30px;
	    height: 30px;
	    background-size: 30px 30px;
	  }
	  .profile-box .box-level-2 p{
    	font-size: 18px;
		}

	.profile-box.full .navlink {
    width: 100%;
    margin: 0 0 10px;
	}

	.inapp{
		width: 100%;
		height: 70vw;
	}
}

@media (min-width: 576px) and (max-width: 767px){

	.benefit content,
  .benefit.wide content{
    width: 84%;
	}
	.point-calculation {
    font-size: 16px;
  }

}

@media (min-width: 768px) and (max-width: 991px){

	#navbar-loyalty span:nth-child(2){
	  width: 80%;
	}
	#navbar-loyalty span{
		vertical-align: middle !important;
	}

	.benefit content,
  .benefit.wide content{
    width: 89%;
	}

}

@media (max-width: 575px){

	.profile-box .box-level {
    padding: 16px 5px;
    font-size: 12px;
  }
  	.profile-box .box-level:before {
	    margin: 0;
	  }
	  .profile-box .box-level:after {
	    display: inline-block;
	    position: static;
	    vertical-align: middle;
	    margin: 5px 0 0 -5px;
		}

	.inapp{
		height: 720px;
	}

}