@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

// Variables
$font-main: 'Open Sans', sans-serif;
$array-color: ('#1abc9c', '#2ecc71', '#3498db', '#e67e22', '#e74c3c');
$i: 0;
// FOR DEMO //
	
.modal-part { 
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	// height: 100vh;
	background-color: rgba(0,0,0,0);
}

.btn-open-modal {
	display: block;
	background-color: #fff;
	padding: .8rem 2.2rem;
	border-radius: 5px;
	text-decoration: none;
	font-family: $font-main;
}

// .end FOR DEMO //
.modal {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top:0;
	bottom: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: 300ms all ease;	
	z-index: 1000;
	
	&-overlay {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
		
		a {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	
	&-container {
		position: absolute;
		width: 80%;
		height: 25rem;
		max-width: 60rem; 
		padding: 1rem 0;
		background: #fff;
		border-radius: 0.5rem;
		overflow: hidden;
		transition: 300ms all ease;
		background: url(../imgs/Pearson-25.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		display: flex;
		justify-content: center;
		align-items: center;
		
		&__header {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			padding: .4rem .8rem;
			display: flex;
			justify-content: center;
			align-items: center;
						
			&-title { 
				font-size: 1.4em;
				font-weight: bold;
				font-family: $font-main;
				text-transform: uppercase;
				color: #feb145;
				margin: 0;
				padding: 0;
			}
		}
		&__btn {
			width: 30px;
			position: absolute;
			top: 20px;
			right: 170px;

			img{
				width: 100%;
				cursor: pointer;
			}
		}
		&__next {
			position: absolute;
			font-size: 5rem;
			color: #feb145;
			top: 160px;
			left: 50px;
			cursor: pointer;
		}
		&__next2 {
			position: absolute;
			font-size: 5rem;
			color: #feb145;
			top: 160px;
			right: 50px;
			cursor: pointer;
		}

		&__content {
			overflow-x: none;
			overflow-y: auto;
			// margin-top: 3rem;
			// height: calc(100% - 3rem);
			font-family: $font-main;
			color: #fff;
			width: 68%;
			font-size: .9rem;
			// text-align: justify;
			p { text-align: justify; }
			p + p { margin-top: .5rem; } 

			& .sliders {
				
			}
		}
	}
}

.modal2 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top:0;
	bottom: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: 300ms all ease;	
	z-index: 1000;
	
	&-overlay {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
		
		a {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	&-container2 {
		
		position: absolute;
		width: 80%;
		height: 25rem;
		max-width: 60rem; 
		padding: 1rem 0;
		background: #fff;
		border-radius: 0.5rem;
		overflow: hidden;
		transition: 300ms all ease;
		background: url(../imgs/Pearson-25-1.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		display: flex;
		justify-content: center;
		align-items: center;
		
		
		&__header {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			padding: .4rem .8rem;
			display: flex;
			justify-content: center;
			align-items: center;
						
			&-title { 
				font-size: 1.4em;
				font-weight: bold;
				font-family: $font-main;
				text-transform: uppercase;
				color: #feb145;
				margin: 0;
				padding: 0;
			}
		}
		&__btn {
			width: 30px;
			position: absolute;
			top: 20px;
			right: 170px;

			img{
				width: 100%;
				cursor: pointer;
			}
		}
		&__content {
			overflow-x: none;
			overflow-y: auto;
			// margin-top: 3rem;
			// height: calc(100% - 3rem);
			font-family: $font-main;
			color: #fff;
			width: 68%;
			font-size: .9rem;
			text-align: center;
			p { text-align: center; }
			p + p { margin-top: .5rem; } 

			& .sliders {
				
			}
		}
	}
}

.modal {
	&.zoom-in {
		.modal-container {
			transform: scale(0.8);
		}
	}
	
	&.zoom-out {
		.modal-container {
			transform: scale(1.2);
		}
	}
}

// .modal:target {
// 	opacity: 1;
// 	pointer-events: auto;
	
// 	.modal-container {
// 		transform: scale(1);
// 	}
// }