/* MODAL
--------------------------------------------------------------*/
// Base Modal
.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 1050;
	@include grid-columns();
	@include transition-base();

	@media (max-width: $screen-md-max) {
		-webkit-overflow-scrolling: touch; // smooth scroll on touch screen
	}

	&:before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: $bg-blur;
		backdrop-filter: $filter-blur;
	}

	.modal-inner {
		background: white;
		position: relative;
		@include container-inner();
		@include box-shadow($s1);
		@include transition-base();
		@include grid-area();
		@include padding(3rem, 6rem);
		transform: translateY(-100%);

		@media (max-width: $screen-xs-max) {
			margin: 2rem auto;
		}

		@media (min-width: $screen-sm) and (max-width: $screen-sm-max) {
			margin: 3rem auto;
		}

		@media (min-width: $screen-md) {
			margin: 6rem auto;
		}
	}

	.close {
		position: absolute;
		display: block;
		height: 4rem;
		width: 4rem;
		background: $bg-color;
		border-radius: 999rem;
		z-index: 20;
		@include transition-base();
		
		@media (max-width: $screen-sm-max){
			top: 1rem;
			right: 1rem;
		}
		
		@media (min-width: $screen-md){
			top: 3rem;
			right: 3rem;
		}

		@media (hover: hover) {
			&:hover {
				background: $link-hover;
			}
		}

		&:before,
		&:after {
			content: "";
			position: absolute;
			width: 0.2rem;
			height: 1.5rem;
			background: white;
			right: 0;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}

		&:before {
			transform: rotate(45deg);
		}

		&:after {
			transform: rotate(-45deg);
		}
	}
}

// Full screen Modal
.modal-fullscreen {
	.modal-inner {
		width: 100%;
		height: 100vh;
		margin: 0;
		box-shadow: none;
	}
}

// Video Modal
.modal-video {
	.modal-inner {
		padding: 0;

		@media (hover: hover) {
			&:hover span:before {
				height: 10rem;
				width: 10rem;
				border-radius: 100%;
			}
		}
	}
}

// Modal Open
body.modal-open {
	overflow: hidden;

	.modal.open {
		overflow: auto;
		opacity: 1;
		visibility: visible;

		.modal-inner {
			transform: translateY(0);
		}
	}
}

// Modal partners
.modal{
	&#modal-partners{
		
		.modal-inner{
			width: 100%;
			height: 100%;
			max-height: 80vh;
			@include padding(3rem, 12rem);
			@include scrollbars(0.8rem,$link-color);
			overflow: auto;
			-webkit-overflow-scrolling: auto !important;
			
			@media (max-width: $screen-sm-max){
				max-height: 90vh;
			}
			
			.modal-content{
				@media (min-width: $screen-md){
					display: flex;
				}
			}
			
			.text{
				@media (max-width: $screen-sm-max){
					@include margin-small-bottom;
				}
				
				@media (min-width: $screen-md){
					flex: 1 0 41%;
				}
				
				+ .form{
					@media (min-width: $screen-md){
						@include padding-left;
					}
				}
				
				h2{
					display: block;
					width: 70%;
					color: $primary;
				}
				
			}
			
			.form{
				@media (min-width: $screen-md){
					flex: 1 0 59%;
				}
			}
		}
	}
}