/** Shopify CDN: Minification failed

Line 175:19 Expected ":"
Line 175:27 Expected ":"

**/
.checkout_modal{
	background: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity .5s;
	@media (max-width: 768px){
		overflow: scroll;
		align-items: flex-start;
		padding:80px 0;
	}
	&.active{
		pointer-events: all;
		opacity: 1;
		.modal_inner{
			margin-top: 0;
			opacity: 1;
		}
	}
	&.loading{
		pointer-events: none;
		&:before{
			content: url("./loading.gif");
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0,0,0,.5);
			position: absolute;
			z-index: 100;
		}
	}
	.modal_inner{
		margin-top: 3rem;
		opacity: 0;
		transition: all .3s;
		background: #fff;
		padding: 0 3rem 5rem;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		@media (max-width: 768px){
			display: flex;
			flex-direction: column;
			width: calc(100% - 40px);
			padding: 2rem 0 4rem;
		}
		h3{
			font-weight: 700;
			font-size: 2rem;
			text-align: center;
			margin: 0;
			line-height: 1.75;
			margin-bottom: 1rem;
		}
		p{
			font-size: 1.4rem;
			line-height: 1.35;
			margin: 0;
			margin-bottom: 2rem;
		}
		.modal_header{
			grid-column: 1/3;
			grid-row: 1/2;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			@media (max-width: 768px){
				height:60px;
				padding: 0 2rem;
			}
			.modal_title{
				font-family: futura-pt, sans-serif;
				font-weight: 500;
				font-style: normal;
				font-size: 2rem;
			}
			.close_btn{
				cursor: pointer;
			}
		}
		.modal_type_wrapper{
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto auto;
			@media (max-width: 768px){
				display: flex;
				flex-direction: column;
				padding: 2rem;
			}
		}
		.modal_login{
			grid-column: 1/2;
			grid-row: 2/4;
			width: calc(300px + 4rem);
			border-right: 1px solid #AFAFAF;
			padding-right: 4rem;
			@media (max-width: 768px){
				border-right: 0px solid #AFAFAF;
				padding-right: 0rem;
				width: 100%;
				border-bottom: 1px solid #AFAFAF;
				padding-bottom: 2rem;
			}
			.errors{
				p{
					color: #E13939;
					display: none;
					&.active{
						display: block;
					}
				}
			}
			.field{
				margin-bottom: 1rem;
			}
			.recover_field{
			  display: flex;
			  justify-content: flex-end;
			  margin-top: 2rem;
			  margin-bottom: 2rem;
			  a{
			    display: flex;
			    align-items: center;
			    justify-content: flex-start;
			    &:before{
			      content: "";
			      width: 20px;
			      height: 20px;
			      background-image: url("arrow_black.svg");
			      background-repeat: no-repeat;
			      background-size: cover;
			      background-position: center;
			      display: block;
			    }
			  }
			}
			.modal_shop_login{
				text-align: center;
				border-top: 1px solid #AFAFAF;
				margin-top: 2rem;
				padding-top: 2rem;
			}
		}
		.modal_register{
			grid-column: 2/3;
			grid-row: 2/3;
			width: 300px;
			margin-left: 4rem;
			margin-bottom: 2rem;
			border-bottom: 1px solid #AFAFAF;
			padding-block: 4rem;
			@media (max-width: 768px){
				width: 100%;
				margin-left: 0rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content; center;
			}
		}
		.modal_guest{
			grid-column: 2/3;
			grid-row: 3/4;
			width: 300px;
			margin-left: 4rem;
			@media (max-width: 768px){
				width: 100%;
				margin-left: 0rem;
			}
		}
	}
	a.btn_arrow{
		background: #000;
		width: 300px;
		height: 64px;
		border-radius: 32px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		text-decoration: none;
	}
}