body {
	color: var(--color-onSurface);
	background-color: var(--color-background);
	font-weight: 400;
   }
	.default-shadow {
		box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);
   }
	.default-radius {
		border-radius: 24px;
   }
	.default-card {
		box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);
		border-radius: 24px;
   }
	.mn-hldr {
		display: flex;
		padding-top: 64px;
		width: 100%;
		margin-top: 64px;
   }
	.mn-flex-col {
		flex-direction:column;
   }
	.flex-row {
		display:flex;
		align-items:center;
   }
	.badges {
		margin-left: -26px;
		margin-top: 32px;
   }
	.mn-flex-row {
		display:flex;
		align-items:center;
		flex-direction:row;
   }
	.drk {
		/*background: #212121;*/
		/*color:white;*/
   }
	.mn-info {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 50%;
		margin-left: auto;
   }
	.mn-info h1 {
		font-size: 32pt;
   }
	
	.lft {
		width: 50%;
   }
   
   .rght {
		   width : 50%;
		   display:flex;
	   }
	   
	.im-right {
		width: 50%;
   }
	.rght img {
		width: 70%;
   }
	.characteristics {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
   }
   .chr {
		width: calc(50% - 96px);
		display: flex;
		margin: 16px;
		padding: 32px;
		background: var(--color-surfaceVariant);
		text-align: right;
		align-items: center;
		border-radius: 82px;
	}
	.chr.rght {
		text-align:left;
   }
	.chr p {
		margin-bottom: 0px;
		font-family: var(--font-display), 'Roboto', sans-serif;
   }
	.chr i {
		padding: 24px;
		margin-left: 32px;
		color: var(--color-primary);
		background: var(--color-surface);
		border-radius: 100%;
		font-size: 38px;
   }
	.chr.rght i {
		margin-left:0px;
		margin-right: 32px;
   }
	.chr-nfo h2 {
		font-size: 23pt;
		margin-bottom: 16px;
   }
	.mn-info p {
		font-family: var(--font-display), 'Roboto', sans-serif;
		width: 80%;
   }
	p.mn-cntr {
		text-align: center;
		padding: 16px;
		font-size: 16pt;
		font-family: var(--font-display), 'Roboto', sans-serif;
   }
	.mn-press {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin:0px auto;
   }
	.mn-press-item {
		width: calc(33.333% - 16px);
		margin: 8px;			
		background-color: var(--color-surfaceLevel2);
		display: flex;
		flex-direction: column;
   }
   .mn-press-item img {
    border: 0;
    margin: 0 auto;
    width: 250px;
    height: 150px;
}
	.mn-press-item h3 {
		border: none;
		color: var(--color-onSurface);
		padding-top:0px;
   }
   .mn-header-lnk a {
	color: var(--color-onPrimary) !important;
	text-decoration: none;
   }
	.mn-header-lnk, .mn-press-item a {
		margin-left: auto;
		display: flex;
		align-items: center;		
		font-family: var(--font-display), 'Roboto', sans-serif;
		font-size: 18px;		
		color: var(--color-onPrimary);
		text-decoration: none;
		text-transform: unset;
		margin-top: auto;
		user-select: none;
   }
	.mn-header-lnk {
		margin-left: 0px;
		margin-top: 16px;
		background: var(--color-primary);
		padding: 4px 8px 4px 16px;
		border-radius: 50px;
		display: flex;
    	width: fit-content;
}

.mn-press-image-container {
    background: var(--color-surfaceVariant);
    border-radius: 24px;
    padding: 32px;
    display: flex;
}

.mn-press-content-container {
    padding: 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mn-press-item a {
    color: var(--color-onSurface);
}
   }
	.mn-press-item p {
		margin-bottom:48px;
		color: var(--color-onSurface);
		font-family: var(--font-display), 'Roboto', sans-serif;
   }
	.mn-header-lnk i, .mn-press-item a i {
		margin-left: 32px;
		transition: margin-left 0.5s;
   }
	.mn-header-lnk:hover i, .mn-press-item a:hover i {
		margin-left: 16px;
   }
	.mn-gallery {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0px auto;
		padding-top: 16px;
		align-items:flex-start;
   }
	.mn-gallery-r, .mn-gallery-t, .mn-gallery-l {
		width: calc(50% - 4px);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding:4px;
   }
	.mn-gallery-t {
		width: 100%;
		padding: 0px;
		margin-bottom: -8px;
   }
	.mn-gallery-l {
		padding-right:0px;
   }
	.mn-gallery-r {
		padding-left:0px;
   }
	.mn-gallery-t img, .mn-gallery-r img, .mn-gallery-l img {
		margin:8px;
		transition: all 0.5s;
		cursor: pointer;
   }
	img.sh2 {
		width: calc(100% - 16px);
   }
	img.sv2 {
		width: calc(50% - 16px);
   }
	.mn-header {
		width: 100%;
		margin-left: 16px;
		display: flex;
		flex-direction: column;
		align-items: baseline;
   }

   .mn-header h1,
   .mn-header h2 {
	   font-size: 32pt;
	   letter-spacing: 1.2;
	   margin-bottom: 16px;
	   max-width: 620px;
	   color: var(--color-onSurface);
	   line-height: 1.3;
	   border: none;
	   padding-top: 0px;
   }

   .front h2 {
	   padding-top: 0px;
   }
   .front h2::before {
		content: '';
		border: none;
		margin: 0px;
		padding: 0px;
	}
	.mn-header h3 {
		font-size: 16pt;
		color: var(--color-primary);
		font-family: var(--font-display);
		margin: 0;
		padding: 0;
		border: 0;
	}
	.mn-header p {
		font-size: 14pt;
	   /*letter-spacing: 1.3px;
	   */
		
		line-height: 1.3;
		max-width: 420px;
		font-family: var(--font-display), 'Roboto', sans-serif;
   }
	.mn-gallery img:hover {
		box-shadow: 0 1px 24px 0 rgba(0,0,0,0.4), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);
   }
	.mn-gallery-zm {
		justify-content: center;
		display: flex;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		position: fixed;
		flex-direction: column;
		align-items: center;
		background: rgba(0, 0, 0, 0.7);
		z-index: 100;
   }
	.mn-gallery-zm img {
		height: 80%;
   }
	.mn-gallery-zm i {
		margin-bottom: -26px;
		z-index: 1000;
		color: var(--color-onSecondaryContainer);
    	background: var(--color-secondaryContainer);
		padding: 16px;
		border-radius: 54px;
		box-shadow: 0 0px 12px 0 rgba(0,0,0,0.2);
		cursor:pointer;
		transition: transform 0.3s;
   }
	.mn-gallery-zm i:hover {
		transform: rotate(180deg);
   }
	.mn-press, .mn-gallery {
		width: 90%;
   }
	.mn-gallery .lh {
		width: calc(50% - 10%);
		margin-left: 10%;
		margin-top: auto;
		margin-bottom: auto;
   }
	.mn-press .lh {
		width: calc(56.666% - 16px);
		margin: auto;
		margin-left: 10%;
   }

   .slogan {
		text-align: center;
		font-family: var(--font-display);
		font-size: 30pt;		
		letter-spacing: 4.2px;
		margin-bottom: 25px;
	}
	.mn-header.lh::before {
		content: " ";
		background: var(--color-surfaceVariant);
		width: 245px;
    	height: 245px;
		position: absolute;
		border-radius: 0 25%;
		z-index: -1;
		margin: -144px;
   }

	.mn-header.lh::after {
		content: " ";
		width: 340px;
		height: 340px;
		background: var(--color-tertiaryContainer);
		margin-left: 112px;
		margin-top: 0px;
		z-index: -1;
		position: absolute;
		border-radius: 0 25%;
	}

	/*
	.mn-header.lh::after {
		content: none;
		background: #ececec;
		width: 128px;
		height: 128px;
		position: absolute;
		border-radius: 100%;
		z-index: -1;
		margin: -471px 258px;
   }
   */
	.mn-image-nfo {
		width: 100%;
		display: flex;
		align-items:center;
		margin: 64px 0px;
   }
	.mn-image-holder {
		width: calc(70% - 64px);
		height: 100%;
	   /* display: flex;
		*/
		overflow: hidden;
		padding: 32px;
   }
	.mn-image-nfo .lh {
		width: calc(30% - 16px);
   }
	.mn-scroller-item {
		width: calc(33% - 32px);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 32px;
		text-align: center;
		flex-wrap: wrap;
		margin: 0px 16px;
		z-index: -1;		
   }
	.mn-scroller-item img {
		width: 100%;
		cursor:pointer;
   }
	.mn-scroller-item h2 {
		font-size: 20pt;
		max-width: 80%;
		min-height: 70px;
		margin-bottom: 0px;
   }
	.mn-scroller-item p {
		font-size: 12pt;
		font-family: var(--font-display), 'Roboto', sans-serif;		
		max-width: 60%;
		min-height: 80px;
		margin-bottom: 0px;
   }
	.mn-image-scroller {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
   }
	.mn-scroller-items {
		display: flex;
		width: calc(100% - 124px);
		align-items: flex-end;
		z-index: 2;
   }
	.mn-scroller-btn-lft, .mn-scroller-btn-rht {
		width: 62px;
		height: 62px;
		font-size: 36pt;
		user-select:none;
   }
	.mn-scroller-btn-lft i, .mn-scroller-btn-rht i{
		font-size: 40pt;
		cursor: pointer;
		color: var(--color-primary);
		user-select:none;
   }
	.mn-scroller-btn-lft i:hover, .mn-scroller-btn-rht i:hover {
		background: var(--color-surfaceVariant);
		border-radius: 100%;
		user-select:none;
   }
   .mn-center-flex video,
   .mn-center-flex img {
		width: 250px;
		padding: calc((33% - 250px) / 2);
		border-radius: 100%;
   }
	.watch-hldr {
		position: relative;
		width: 100%;
		max-width: 512px;
		margin: auto;
   }
	.watch-hldr img {
		position: relative;
		width: 100%;
		z-index: 1;
   }
	.watch-hldr .preview {
		position: absolute;
		width: 49%;
		left: 25.1%;
		top: 32.8%;
		z-index: 1;
   }
	.preview.carlyle {
		z-index: 2;
		width: 49.5%;
		left: 24.8%;
		top: 32.5%;
   }

   .preview.pixel {
		z-index: 2;
		width: 53.5%;
    	left: 22.6%;
    	top: 30.6%;
	}
   
	.platform {
		width: 200px;
		border-radius: 94px;
		box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
		margin-right: 32px;
		cursor: pointer;
		margin-left: -20px;
   }
	.big-cntr {
		width: calc(100% - 32px);
		padding:16px 0px;
		margin:0px auto;
   }
   h1#mn-watch-title {
	   font-size: 28pt;
	   color: var(--color-onSurface);
	   border: none;
	   padding-top: 0px;
	   margin-bottom: 0px;
   }
   #mn-watch-availability {
    background: var(--color-primary);
    padding: 4px 16px;
    color: var(--color-onPrimary);
    border-radius: 62px;
    font-family: var(--font-display);
}
	.mn-watch-control {
		display: flex;
		align-items: center;
		width: 50%;
		justify-content: center;
   }
	.vid-preview {
		width: 100%;
		height: 470px;
		border-bottom: 8px solid var(--color-secondary);
		border-top: 8px solid var(--color-secondary);
		background-size: unset;
		background-position-x: center;
		background-repeat: no-repeat;
		margin-bottom: 120px;
		background-size: cover;
		background-image: url("https://io.pujie.io/images/main/video/video.png");
		display:flex;
		align-items:center;
		justify-content:center;
   }
	.vid-preview i {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 120px;
		align-items: center;
		text-shadow: 0px 0px 22px rgba(0,0,0,0.8);
		transition: all 0.3s;
		cursor: pointer;
		color: white;
   }
	p#mn-watch-description {
		font-family: var(--font-display);
	   font-size: 16pt;
   }
   
	.badges a {
	   width: 50%;
   }

   h2#mn-watch-title {
    font-size: 34px;
		margin-bottom: 0px;
	}


	.mn-logo-icon {
		width: 154px;
		margin-bottom: 16px;		
	}
	
	.mn-logo-type {
		width: 92px;
	}
	
	
	
	.mn-slogan {
		font-family: var(--font-display);
		font-size: 16pt;
		letter-spacing: 3pt;
	}

	a.play-button {
		display: flex;
		background: var(--color-surfaceVariant);
		border-radius: 70px;
		padding: 20px 44px 20px 30px;
		font-family: var(--font-display);
		color: var(--color-onSurfaceVariant);
		text-decoration: none;
		align-items: center;
		font-size: 20pt;
		line-height: 18pt;
		margin-top: 32px;		
		letter-spacing: 1px;
		text-align: left;
		width: fit-content;
    	min-width: 216px;
	}

	a.play-button:hover {
		background: var(--color-inverseSurface);
		color: var(--color-inverseOnSurface);
	}
	
	.play-button img {
		margin-right: 24px;
		width: 42px;
	}
	
	.play-button span {
		font-size: 13pt;
		opacity: 0.7;		
	}

   
   @media screen and (max-width: 1560px) {
		.mn-info {		
		   width: 64%;
	   }
   }
	@media screen and (max-width: 1080px) {
	   .container {
			width: 100%;
			overflow:hidden;
	   }
	   
	   .rght {
		   width : 100%;
	   }
	   
		.mn-flex-row {
			flex-direction:column;
	   }
		.cntr {
			margin: 0px 0px;
			width: 100%;
	   }
		.mn-hldr.drk {
			flex-direction:column;
	   }
		.mn-info h3 {
			margin-top: 80px;
	   }
		.mn-image-nfo, .reverse {
			flex-direction:column-reverse;
	   }
		.mn-hldr {
			margin-top: 0px;
	   }
		.rht, .big-cntr {
			width: 100%;
	   }
		.mn-info {
			margin: 0px auto;
			text-align:center;
			align-items:center;
			width: 100%;
	   }
		.flex-row.badges a {
			width: 50%;
	   }
		.flex-row.badges img {
			width: 100% !important;
			margin:0px !important;
	   }
		.badges {
			margin-left: 0px;
			margin-top: 0px;
			justify-content: center;
	   }
		.rght {
			display:flex;
	   }
		.rght img {
			margin: 0px auto;
			width: 80%;
	   }
		.lft {
			width: 100%;
	   }
		.mn-scroller-items{
			z-index: 2;
	   }
		.mn-image-holder {
			width: calc(100% - 16px);
			padding: 8px;
	   }
		.mn-gallery .lh, .mn-image-nfo .lh {
			width: calc(100% - 32px);
			margin: 0px 16px;
		   /* background-color: white;
			*/
	   }
		.mn-gallery-l, .mn-gallery-r {
			padding: 4px;
			width: calc(100% - 4px);
	   }
		.mn-header {
			align-items:center;
			width: calc(100% - 32px);
			margin: 0px auto;
			text-align: center;
			margin-top:32px;
	   }
		.mn-press .lh {
			width: calc(100.0% - 16px);
			margin: auto;
	   }
		.mn-press-item {
			width: calc(50% - 16px);
	   }
		.mn-press, .mn-gallery {
			width: calc(100% - 32px);
			margin: 0px 16px;
	   }
		.platform {
			margin: 8px;
			width: calc(100% - 16px);
	   }
		.flex-row a {
			width: 50%;
	   }
		.mn-watch-control {
			width: 100%;
	   }
		.chr {
			width: calc(100% - 96px);
			margin-top: 0px;
			margin-bottom: 16px;
	   }

	   .mobile-logo-type {
			display: initial !important;
			margin-left: 16px !important;
			width: 82px !important;
			margin-top: 8px;
		}
	   .mn-header.lh::before {
			content: " ";
			background: var(--color-secondaryContainer);
			width: 512px;
			height: 512px;
			position: absolute;
			border-radius: 0 162px;
			z-index: -1;
			margin: -144px;
		}
		.mn-header.lh::before, .mn-header.lh::after {
			content: none;
	   }
		.mn-scroller-item {
			width: calc(50% - 32px);
	   }
		.vid-preview {
			margin-bottom: 0px;
	   }
   }
	@media screen and (max-width: 790px) {
		.mn-press-item {
			width: calc(100% - 16px);
	   }
		.mn-center-flex {
			flex-direction: column;
			display: flex;
			align-items: center;
	   }
	   .mn-center-flex video,
		.mn-center-flex img {
			margin: 16px;
	   }
		.mn-scroller-item {
			width: calc(100% - 32px);
	   }
   }