/* `xl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { 


	/*** button ***/
	
	.magenta-003 .btn-pink,
	.magenta-005 .btn-blue,
	.phone-submit,
	.magenta-015 .btn {
		padding-right: .8rem;
		padding-left: .8rem;
	}

	/*** header ***/

	.main-header .bg-header {
		clip-path: polygon(0% 0%,100% 0%,100% 79%,79.5% 100%,59% 81%,53.5% 87%,36% 86.5%,18% 100%,0% 92%);
	}
	.menu-link {
		font-size:0.875rem;
	}

	/*** main ***/

	.magenta-002 .logo-pulse {
		width: 23%;
		left: 12%;
	} 	
	.magenta-002 .point-item-02 {
		top: 55.13%;
		left: 20.33%;
	}
	.magenta-002 .point-item-05 {
		top: 63.87%;
		right: 19.67%;
	}
	.magenta-013 .w-75 {
		width: 100%!important;
	}
	.magenta-004 .img-color-change {
		height: 325px!important;
	}	
	.magenta-005 .bg-img {
		height: 718px!important;
	}
	.magenta-005 .marquee-animation {
		height: 80px;		
	}
	.magenta-005 .marquee {
		top: 0;
		width: 100%;		
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		animation: marquee 30s linear infinite;
	}
	.magenta-005 .marquee2 {
		animation-delay: -15s;
	}
	.magenta-005 .marquee-item img {
		width: 90%!important;
	}
	.magenta-014 .badge-item {
		height: 122px!important;
	}
	.magenta-017 .bg-img {
		right: calc(-8.33% * 2);
	} 
}

/* `LG` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { 

	/*** header ***/

	.menu {
		width: 100%;
		order: 3;
		display: none;
	}
	.active .menu {
		display: flex;
	}		
	.menu-item.button {
		width: auto;
		order: 1;
	}
	.toggle {
		display: block;
		order: 2;
	}

	/*** main ***/

	.magenta-002 .logo-pulse {
		width: 18.5%;
		left: 14.5%;
		top: 195px;
	}
	.magenta-009 .img-outline-border {
		position: absolute;
		height: 500px;
		width: 120%;
		outline-width: 0px;
		max-width: initial;
	}
	.magenta-009 .img-outline-border.left-0 {
		left: -130px;
	}
	.magenta-009 .img-outline-border.right-0 {
		right: -130px;
	}
	.magenta-012 .main-card {
		right: 5%;
	}
	.magenta-017 .bg-img {
		width: 55%;
		right: -8.33%;
	}	 
}


/* `MD` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
	

	/*** button ***/
	.btn.w-75 {
		width: 100%!important;
	}

	/*** header ***/

	.main-header .bg-header {
		height: 700px;
		width: 137%!important;
		left: -14.5%;
	}	
	.subpage-header .bg-header {
		height: 550px;
	}
	.subpage-heading {
		font-size: 4rem;
	}
	.menu-item,
	.menu-item.secondary {		
		width: 100%;
		text-align: center;
	}
	.menu-item.secondary {
		order: 4;
		display: none;
	}
	.active .menu-item.secondary {
		display: block;
	}
	.menu .menu-link {
		display: inline-block;
		font-size: 1.5rem;
		padding: 23.5px 0;
		width: 225px;
		border-top: 1px solid rgba(0, 0, 0, .15);
		font-weight: 300;
		line-height: 1;
	}
	.menu-item:first-child .menu-link {
		border-top: none;
	}	
	.button.secondary .btn {
		width: 386px;
		padding: 1rem 2.5rem;
	}

	/*** main ***/

	/*animation*/
	.logo-pulse {
		animation: none;
	}

	/*points*/
	.point-item {
		width: 40px;
		height: 40px;
	}
	.bi-plus {
		font-size: 2.5rem;
	}

	/*popover*/
	.popover.popover-wide {
		--bs-popover-max-width: 356px;
		height: auto;
	}
	.popover-wide .popover-body {
		padding: 24px;
	}
	.popover-wide .img-cover {
		width: 100%;
		height: 227px;
	}
	.popover-wide .img-block-item {
		margin-right: 14px;
		margin-bottom: 0;
	}
	.popover-wide .img-block-item:last-child {
		margin-right: 0;
	}
	.popover-wide .btn-block .btn {
		width: auto;
	}
	.popover .btn-sm {
		padding: .5rem 2rem!important;
	}
	
	.magenta-001 .w-75 {
		width: 100%!important;
	}
	.magenta-002 .point-item-02 {
	    left: 5.33%;
	}
	.magenta-002 .point-item-03 {
	    left: 40.92%;
	}
	.magenta-002 .point-item-05 {
	    right: 3.67%;
	}
	.magenta-002 .shape-1 {
		width: 127%;
		left: -8vw;
	}
	.magenta-002 .logo-pulse {
		width: 15vw;
		top: 91px;
	}
	.magenta-002 .brand-logo {
		width: 50vw;
		top: 115px;
		right: 14vw;
	}
	.magenta-003 .logo-pulse {
		width: 20.68%!important;
	}
	.magenta-003 .brand-logo {
		width: 73%;
		margin-left: 4.7%;
	}
	.magenta-004 .img-color-change:first-child {
		border-right: none;
		border-bottom: 1px solid #fff;
	}
	.magenta-005 .marquee-animation {
		width: 150%;
	}	
	.magenta-006 .start-0 {
		left: 0!important;
	}
	.magenta-007 .fs-7 {
		font-size: 1.5rem!important;
	}
	.magenta-007 .fs-8 {
		font-size: 1rem!important;
	}
	.magenta-007 .carousel-heading {
		color: #E90A8A;
	}
	.magenta-008 .bg-img,
	.magenta-010 .bg-img {
		width: 75%!important;
		height: 75%;
	}
	.magenta-009 .img-outline-border {
		height: 436px;
		position: relative;
		width: 100%;
		outline-width: 1px;
	}
	.magenta-009 .img-outline-border.left-0 {
		left: 0;
	}
	.magenta-009 .img-outline-border.right-0 {
		right: 0;
	}
	.magenta-009 .banner-logo {
		background-color: #292E33!important;
	}
	.magenta-009 .baner-logo-img {
		width: 70%;
	}
	.magenta-009 .marquee-animation {
		overflow: hidden;
		position: relative;
		width: 200%;
		height: 143px;		
	}
	.magenta-009 .marquee {
		top: 0;
		width: 100%;		
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		height: 100%;
		animation: marquee 30s linear infinite;
	}
	.magenta-009 .marquee2 {
		animation-delay: -15s;
	}
	.magenta-010 .bg-img {
		top: auto;
		bottom: -50px;
	}
	.magenta-010 .calender {
		width: 100%;
	}
	.magenta-010 .dates {
		font-size: 1.25rem;
	}
	.magenta-011 .bg-img {
		height: 220px;
	}
	.magenta-012 .bg-img {
	    margin-top: -315px;
	}
	.magenta-012 .main-card {
        width: 100%;
        top: 0;
        right: 0;
	}
	.magenta-012 .card-img {
		height: 543px!important;
	}
	.magenta-016 .tile2 img.w-100 {
		width: 50%!important;
	}
	.magenta-016 .tiles-fluid {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.magenta-017 .bg-img {
		width: 100%;
		right: 0;
	}
	.magenta-017 .m-neg--md {
		margin-top: -270px;
	}


	/*** footer ***/

	.wrapper-map {
		margin-top: -230px;
	}
	.map-img {
		height: 903px;
	}
	.place-icon {
		top: 44%;
	    left: 84%;
	}
	.footer-section-map .map-title {
		color: #fff;
		background-color: #292e33;
	}	
	.footer .w-50 {
		width: 100%!important;
	}	
	.footer-img {
		height: 215px;
	}
	.address-link  {
		color: #BDBFC1!important;
	}
	.footer-nav {
		border-top: 1px solid rgba(255, 255, 255, 0.3);
	}
	.footer-nav-item {
		border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
	}
	.footer-nav-item:last-child {
		border-bottom: none;
	}
	.footer-nav-link {
		color: #1CA0E1!important;
		text-decoration: none;
		font-size: 1.5rem;
	}
	
	/*** modal ***/
	.modal-xl {
		max-width: 80vw!important;
	}
	.modal .card {
		width: 462px;
	}
}

/*`SM` applies to small devices (landscape phones, less than 768px)  */
@media (max-width: 767.98px) { 

	/*typography*/
	.magenta-010 .current,
	.magenta-010 .bi-chevron-left,
	.magenta-010 .bi-chevron-right,
	p {
		font-size: 1.5rem;
	}

	/*button*/
	.btn {
		padding: 1.6rem 1rem!important;
	}
	.phone-input,
	.btn-submit,
	.btn-smaller {
		 padding: 1.3rem 1rem!important;
	}
	.btn-link {
		padding: 0!important;
	}
	.button.secondary .btn {
		width: 90%;
	}
	.magenta-004 .btn {
		padding: 1.6rem 6rem!important;
	}


	/*** header ***/

	.main-header .bg-header {
		height: 1049px;
		width: 193%!important;
		left: -45%;
	}
	.subpage-header .bg-header {
		height: 660px;
	}
	.header-nav {
		height: 100px;
		padding: 20px 0!important;
	}
	.navbar-logo {
		width: 254px;
	}
	.navbar-logotype {
		top: 15px;
		width: 146px;
	}
	.toggle .menu-link {
		font-size: 2.5rem!important;
	}	
	.button.first { 
		display: none;
	}
	

	.active .button.secondary
	.magenta-008 .w-75,
	.magenta-009 .baner-logo-img,
	.magenta-016 .tile .w-50,
	.magenta-017 .container {
		width: 100%!important;
	}

	/*** main ***/
	.magenta-001 .start-0 {
		left: 50%!important;
		top: 25%!important;
	}
	.magenta-002 .bg-img {
		height: 550px!important;
	}
	.magenta-002 .section-logo {
		top: -16px;
	}	
	.magenta-004 h4 {
		font-size: 2rem;
	}
	.magenta-005 .bg-img {
		margin-top: -220px;
	}
	.magenta-005 .marquee-animation {	
		height: 100px;
		width: 200%;
	}
	.magenta-009 .marquee-animation {
		height: 173px;
	}
	.magenta-015 h4,
	.magenta-016 h4 {
		font-size: 3rem;
	}
	.magenta-016 .point {
		width: 53.5px;
		height: 53.5px;
		transform: translate(-50%,0) rotate(45deg);
	}
	.magenta-016 .tile img.w-50,
	.magenta-016 .tile img.w-100 {
		width: 100%!important;
		height: 258px;
	}

	/*** footer ***/

	.wrapper-map {
		margin-top: -110px;
	}
	.map-img {
		height: 701px;
	}
	.place-icon {
		top: 42%;
	}
	.form-box {
		margin-top: -200px;
	}

	/*** modal ***/

	.modal-xl {
		max-width: 90vw!important;
	}
	.modal-xl .card {
	    width: 400px;
	}
	.hourBox.active .hourBox-btn {
	    margin-left: 1.5%;
	}

}

/*`XS` applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 

	/*** header ***/
	.header .btn {
		max-width: 100%;
	}
	.main-header .container {
		max-width: 50%;
	}	
	.navbar-logo {
		width: 45vw;
	}

	/*** main ***/
	.magenta-003 .brand-logo {
	    margin-left: 3.7%;
	}
	.magenta-005 .marquee-animation {	
		height: 80px;
	}
	.magenta-009 .marquee-animation {
	    height: 150px;
	}
		
	/*** modal ***/
	.modal-xl .card {
	    width: auto;
	}	
}