.ms_gallery {
	display: flex;
	width: 100%;
	height: 500px;
	&_left {
		flex: 7;
	}

	&_preview {
		height: 100%;
		position: relative;
		display: flex;
    	justify-content: center;
    	align-items: center;
    	margin: 0px 10px;
	}

	&_fullbox {
		position: fixed;
    	background: rgba(0, 0, 0, 0.8);
    	width: 90%;
    	height: 90%;
    	z-index: 999;
    	top: 5%;
    	left: 5%;
    	border-radius: 15px;
    	border: solid 3px #fff;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	display: none;
    	&_image {
    		max-height: 100%;
    	}
	}

	&_thumbnail {
		width: 100%;
		cursor: pointer;
		transition: all 300ms;
		&:hover {
			filter: grayscale(1);
		}
	}

	&_right {
		flex: 3;
		overflow-y: scroll;
	}

	&_image {
		max-width: 100%;
		max-height: 100%;
		margin: 0 auto;
		display: block;
	}

	&_dots {
		display: flex;
		justify-content: space-around;
		width: 150px;
		position: absolute;
		bottom: 10px;
	}

	&_dot {
		width: 25px;
		height: 25px;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		cursor: pointer;
		transition: all 300ms;
		color: #fff;
		&:hover {
			background: #85c619;
		}
		&::selection {
			background: none;
		}
	}

	&_fullscreen {
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
		cursor: pointer;
		top: 5px;
		right: 5px;
		width: 33px;
		height: 33px;
		position: absolute !important;
		font-size: 32px !important;
		transition: all 300ms;
		&:hover {
			background: #85c619;
		}
		&::selection {
			background: none;
		}
	}

	&_fullscreenexit {
   		color: #fff;
   		background: rgba(0,0,0,0.5);
   		cursor: pointer;
   		top: 10px;
   		right: 10px;
   		width: 50px;
   		height: 50px;
   		position: absolute !important;
   		font-size: 50px !important;
   		transition: all 300ms;
		&:hover {
			background: #85c619;
		}
		&::selection {
			background: none;
		}
	}
}

@media all and (max-width: 900px) {
	.ms_gallery {
		flex-direction: column;
		height: auto;
		&_right {
			width: 100%;
			height: 150px;
			display: flex;
			overflow-x: scroll;
			overflow-y: hidden;
			flex: inherit;
		}

		&_left {
			height: 500px;
		}

		&_thumbnails {
			display: flex;
			width: 100%;
		}

		&_thumbnail {
			height: 100%;
			width: auto;
			margin: 0 10px;
		}
	}
}