
/* `xxl` applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) { 
	
	.container-narrow {
		padding-left: 5.5rem;
		padding-right: 5.5rem;
	}

	.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%);
	}


	.magenta-002 .logo-pulse {
		width: 23%;
		left: 12%;
	} 	
	.magenta-005 .bg-img {
		height: 718px;
		margin-top: -265px;
	}
	.magenta-006 .map-item {
		width: 47vw;
		left: -9vw;
		top: 62px;
	}


	 
}

/* `xl` applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) { 
	
	/*container*/

	.container-narrow {
		padding-left: 6.5rem;
		padding-right: 6.5rem;
	}	
	.magenta-006 .container-narrow {
		padding-left: 1.125rem;
		padding-right: 1.125rem;
	}
	.magenta-007 .container-narrow,
	.magenta-008 .container-narrow,
	.magenta-010 .container-narrow {
		padding-left: 4rem;
		padding-right: 4rem;
	}
	.magenta-009 .container-narrow {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}


	/*** 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-005 .bg-img {
		margin-top: -350px;
	}

	.magenta-006 .map-item {
		left: -8vw;
		top: 0;
	}

	.magenta-009 .row:first-child .col-11:last-child {
		padding-right: 7.75rem;
	}
	.magenta-009 .row:last-child .col-11:first-child {
		padding-left: 7.75rem;
	}

	/*** footer ***/

	.footer input[type="tel"] {
		width: 70%;
	}
	.footer button[type="submit"] {
		width: 29%;
	}
}


/* `lg` applies to medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) { 
	
	/*container-narrow*/

	.container-narrow, 
	.magenta-007 .container-narrow {
		padding-right: 1.5rem;
		padding-left: 1.5rem;
	}
	.magenta-003 .container-narrow {
		padding: 0 5.5rem;
	}
	.magenta-005 .container-narrow {
		padding: 0 5rem;
	}
	.magenta-009 .container-narrow {
		padding: 0 6.5rem;
	}

	/*text*/
	
	.magenta-007 p,
	.magenta-007 .fs-7,
	.magenta-009 p,
	.magenta-010 p,
	.magenta-010 .current,
	.magenta-010 .bi-chevron-left,
	.magenta-010 .bi-chevron-right,
	.footer .bg-gray p,
	.address-item {
		font-size: 1.5rem!important;
	}

	/*button*/

	.btn-block .btn,
	.magenta-003 .btn,
	.magenta-006 .btn {
		width: 456px;
	}
	.magenta-002 .btn-arrow-right {
		width: 336px;
	}
	.magenta-004  .btn {
		width: 302px;
	}

	/***header***/

	.bg-header {
		height: 700;
		width: 137%;
		left: -14.5%;
	}	
	.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 ***/

	.point-item {
		width: 40px;
		height: 40px;
	}
	.bi-plus {
		font-size: 40px;
	}

	/*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 .btn-sm {
		padding: .5rem 2rem!important;
	}


	.magenta-002 .shape-1 {
		width: 127%;
		left: -8vw;
	}
	.magenta-002 .logo-pulse {
		animation: none;
		width: 15vw;
		top: 91px;
	}
	.magenta-002 .brand-logo {
		width: 50vw;
		top: 115px;
		right: 14vw;
	}	

	.magenta-004 .img-color-change:first-child {
		border-right: none;
		border-bottom: 1px solid #fff;
	}
	
	.magenta-005 .bg-img {
		margin-top: -170px;
	}

	.magenta-006 .row:first-child {
		width: 100%;
	}
	.magenta-006 .map-item {
		left: 0;
		width: 85%;
		margin: 0 auto 24px;
	}
	.magenta-006 .map-item  > .position-absolute {
		position: relative!important;
	}

	.magenta-007 .carousel-heading {
		color: #E90A8A;
	}

	.magenta-008 .bg-img {
		width: 75%!important;
		height: 75%;
	}

	.magenta-009 .img-outline-border {
		height: 436px;
		width: 100%;
		object-fit: cover;
	}
	.magenta-009 .row:first-child .col-11:last-child {
		padding-right: 0;
	}
	.magenta-009 .row:last-child .col-11:first-child {
		padding-left: 0;
	}
	.magenta-009 .banner-logo {
		background-color: #292E33!important;
	}
	.magenta-009 .fs-7 {
		font-size: 1.5rem;
	}
	.magenta-009 .fs-8 {
		font-size: 1rem;
	}

	.magenta-010 .card {
		width: 462px;
	}
	.magenta-010 .dates {
		font-size: 20px;
	}

	.magenta-011 .bg-img {
		height: 220px;
	}

	/*** footer ***/

	.footer-shape {	
		height: 88px;
	}
	.footer input[type="tel"] {
		width: 61%;
	}
	.footer button[type="submit"] {
		width: 38%;
	}
	
	.footer .w-50 {
		width: 100%!important;
	}	
	.footer-img {
		height: 215px;
		object-fit: cover;
	}
	.address-link  {
		color: #BDBFC1!important;
	}
	.footer-nav {
		width: 90%;
		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;
		line-height: 1.2;
	}
	.footer .btn {
		width: 100%;
		padding: 1.6rem 2.5rem;
	}

}

/*`md` applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) { 

	/*container-narrow*/

	.container-narrow,
	.magenta-003 .container-narrow,
	.magenta-006 .container-narrow,
	.magenta-010 .container-narrow {
	    padding-right: 2.5rem;
	    padding-left: 2.5rem;
	    max-width: 100%;
	}
	.magenta-008 .container-narrow {
		padding-left: 5rem;
		padding-right: 5rem;
	}
	.magenta-009 .container-narrow {
	    padding-left: 1rem;
		padding-right: 1rem;
	}

	/*text*/

	.magenta-001 p,
	.magenta-003 .fs-5,
	.magenta-005 p,
	.magenta-006 .fs-5,
	.magenta-008 p  {
		font-size: 1.5rem!important;
	}

	/*button*/

	.header .btn-block,
	.magenta-001 .btn-block,
	.magenta-002 .btn-arrow-right {
		width: 343px;
		padding: 1.6rem 2.5rem;
	}
	.magenta-004  .btn {
		width: 332px;
		padding: 1.25rem 2.5rem;
	}

	.magenta-003 .btn-block,
	.magenta-005 .btn-block,
	.magenta-006 .btn-arrow-right {
		width: 425px;
		padding: 1.5rem 2.5rem;
	}


	/*** header ***/

	.bg-header {
		height: 1049px;
		width: 193%;
		left: -45%;
	}
	.header-nav {
		height: 100px;
		padding: 20px 0!important;
	}
	.navbar-logo {
		width: 45vw;
	}
	.navbar-logotype {
		width: 146px;
	}
	.toggle .menu-link {
		font-size: 2.5rem!important;
	}	
	.button.first { 
		display: none;
	}
	.active .button.secondary {
		width: 100%;
	}


	/*** main ***/

	.magenta-002 .bg-img {
		height: 621px;
	}

	.magenta-002 .section-logo {
		top: -16px;
	}	
	.magenta-004 h4 {
		font-size: 2rem;
	}
	.magenta-005 .w-75 {
		width: 65%!important;
	}
	.magenta-008 .w-75 {
		width: 100%!important;
	}
	.magenta-010 .card {
	    width: 409px;
	}

	/*** footer ***/

	.footer {

	}


}

/*`sm` applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 
		
}







