
/* `xxl` applies to x-large devices (large desktops, less than 1400px)XL */
@media (max-width: 1399.98px) { 
	
	.container-narrow {
		padding-left: 5.5rem;
		padding-right: 5.5rem;
	}
	.footer-section-map .container-narrow {
		padding-left: 7.5rem;
		padding-right: 7.5rem;
	}

	.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%);
	}


	.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-005 .bg-img {
		height: 718px;
		margin-top: -265px;
	}

	.footer .bg-img {
		background-position-y: 165px;
	}


	.form-box {
		margin-top: -162px;
	}

		 
}

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

	.container-narrow,
	.footer-section-map .container-narrow {
		padding-left: 6.5rem;
		padding-right: 6.5rem;
	}	
	.magenta-006 .container-narrow,
	.cards .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-013 .container-narrow {
		padding-left: 4.5rem;
		padding-right: 4.5rem;
	}
	.magenta-009 .container-narrow {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
	.footer-section-map .container-narrow {
		padding-left: 5rem;
		padding-right: 5rem;
	}
	

	/*** 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 {
		width: 60%;
		left: -webkit-calc(-100% + 85%);
		left: -moz-calc(-100% + 85%);
		left: calc(-100% + 89%);
		top: 60px;
	}

	.magenta-008 .btn.w-70 {
		width: 100%;
	}

	.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 ***/

	 

	.phone-input {
		width: 70%;
	}
	.phone-submit  {
		width: 29%;
	}
}


/* `lg` applies to medium devices (tablets, less than 992px) MD*/
@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-right: 5.5rem;
		padding-left: 5.5rem;
	}
	.magenta-005 .container-narrow {
		padding-right: 5rem;
		padding-left: 5rem;
	}
	.magenta-009 .container-narrow {
		padding-right: 6.5rem;
		padding-left: 6.5rem;
	}
	.footer-section-map .container-narrow {
		padding-right: 3.5rem;
		padding-left: 3.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***/

	.main-header .bg-header {
		height: 700;
		width: 137%;
		left: -14.5%;
	}	
	.subpage-header .bg-header {
		height: 550px;
	}
	.subpage-header .bg-opacity {
		background-color: rgba(0, 0, 0, 0.65);
	}
	.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: 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-wide .btn-block .btn {
		width: auto;
	}
	.popover .btn-sm {
		padding: .5rem 2rem!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 ***/
	.magenta-003 .logo-pulse {
		width: 20.68%;
	}
	.magenta-003 .brand-logo {
		width: 73.7%;
		margin-left: 4.7%;
	}


	.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%;
		top: 0;
		margin: 0 auto 24px;
	}
	.magenta-006 .map-item  > .position-absolute {
		position: relative!important;
	}

	.magenta-007 .carousel-heading {
		color: #E90A8A;
	}
	.magenta-007 .bg-image {
		height: 100%;
	}

	.magenta-008 .btn.w-70 {
		width: 77%;
	}
	.magenta-008 .bg-img,
	.magenta-010 .bg-img {
		width: 75%!important;
		height: 75%;
	}

	.magenta-009 .img-outline-border {
		height: 436px;
		width: 100%;
	}
	.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 .bg-img {
		top: auto;
		bottom: -50px;
	}
	.magenta-010 .card {
		width: 462px;
	}
	.magenta-010 .dates {
		font-size: 20px;
	}

	.magenta-011 .bg-img {
		height: 220px;
	}

	.magenta-012 .bg-img {
	    margin-top: -315px;
	}
	.magenta-012 .main-card {
		position: relative!important;
		top: -140px;
		right: 0;
		width: 456px;
        margin: 0 auto 100px;
	}
	.magenta-012 .card-img {
		height: 543px;
	}
	.magenta-012 .card-tile {
		width: 456px;
	}


	/*** footer ***/

	.footer-section-map.bg-img {
		height: 1217px;
	    background-position-y: 311px;
	}
	.footer-section-map .col-12:last-child {
		color: #fff;
		background-color: #292e33;
	}

	.form-box {
		margin-top: -172px;
	}
	

	.footer-shape {	
		height: 88px;
	}
	.phone-input {
		width: 61%;
	}
	.phone-submit {
		width: 38%;
	}
	
	.footer .w-50 {
		width: 100%!important;
	}	
	.footer-img {
		height: 215px;
	}
	.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 .bg-dark-gray .btn {
		width: 100%;
		padding: 1.6rem 2.5rem;
	}

}

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

	/*container-narrow*/

	.container-narrow,
	.magenta-003 .container-narrow,
	.magenta-006 .container-narrow,
	.magenta-010 .container-narrow,
	.magenta-013 .container-narrow {
	    padding-right: 2.5rem;
	    padding-left: 2.5rem;
	    max-width: 100%;
	}
	.magenta-008 .container-narrow {
		padding-left: 4.75rem;
		padding-right: 4.75rem;
	}
	.magenta-009 .container-narrow {
	    padding-left: 1rem;
		padding-right: 1rem;
	}
	.magenta-012 .container-narrow {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	/*text*/

	.magenta-001 p,
	.magenta-003 .fs-5,
	.magenta-005 p,
	.magenta-006 .fs-5,
	.magenta-008 p,
	.magenta-012 p,
	.magenta-013 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 ***/

	.main-header .bg-header {
		height: 1049px;
		width: 193%;
		left: -45%;
	}
	.subpage-header .bg-header {
		height: 660px;
	}


	.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;
	}
	
	.magenta-012 .bg-img {
	    margin-top: -300px;
	}
	.magenta-012 .card-img {
		height: 543px;
	}
	/*.magenta-012 .main-card {
		position: relative!important;
		top: -140px;
		right: 0;
		width: 456px;
        margin: 0 auto 100px;
	}
	.magenta-012 .card-img {
		height: 543px;
	}
	.magenta-012 .card-tile {
		width: 456px;
	}*/
	

	/*** footer ***/

	.footer-section-map.bg-img {
	    background-position-y: 433px;
	    height: 1134px;
	}

	.form-box {
		margin-top: -198px;
	}

	.phone-input {
		width: 57%;
	}
	.phone-submit {
		width: 42%;
	}


}

/*`sm` applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 
		
	.phone-input {
		width: 51%;
	}
	.phone-submit {
		width: 48%;
	}	
}	







