@media only screen and (min-width: 800px) {
	
	
	#main.container-grid{
	grid-template-columns:repeat(12, minmax(10px, 1fr)); 
	grid-template-rowsx:75px repeat(auto-fill, 1fr); 	
	display:grid;
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav "
	"content content content content content content content content content content content content "
	"content content content content content content content content content content content content "
	"content content content content content content content content content content content content "
	"content content content content content content content content content content content content "
	"gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery "
	"gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery "
	"gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery "
	"gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery "
	"call call call call call call call call call call call call "
	"call call call call call call call call call call call call "
	"call call call call call call call call call call call call "
	"call call call call call call call call call call call call "
	"call call call call call call call call call call call call "
	"call call call call call call call call call call call call "
	"call call call call call call call call call call call call "
	"shop shop shop shop shop shop shop shop shop shop shop shop "
	"shop shop shop shop shop shop shop shop shop shop shop shop "
	"shop shop shop shop shop shop shop shop shop shop shop shop "
	"shop shop shop shop shop shop shop shop shop shop shop shop "
	"shop shop shop shop shop shop shop shop shop shop shop shop "
	"shop shop shop shop shop shop shop shop shop shop shop shop "
	"footer footer footer footer footer footer footer footer footer footer footer footer "
	"footer footer footer footer footer footer footer footer footer footer footer footer "
	"footer footer footer footer footer footer footer footer footer footer footer footer "
	}
	
	.nav {
		grid-template-columns: 50px 1fr 50px;
		grid-template-areas: "home email hamburger";
		width: 100%; 
	}
	
	.menu {
	display:grid; 
	grid-template-columns: repeat(12, 1fr);
	grid-template-columns: 6fr 6fr;

}

	.menu-img{display:block;}


	.email > a {display:block;}
	a.star::before, a.star::after {
		content:"";
		display:inline-block;
		width:.75rem;
		height:.75rem;
		margin:0 10px;
		mask-image:var(--star);
		mask-size: contain;
		mask-repeat:no-repeat;
		-webkit-mask-image:var(--star);
		-webkit-mask-size: contain;
		-webkit-mask-repeat:no-repeat;
		}
	.star-dark::before, .star-dark::after {background-color:var(--dark);}
	.mask1 {
		-webkit-mask-image: var(--star);
		mask-image: var(--star);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;    
	}	
	
	#main.container-grid > .content{
		display:grid;
		grid-template-areas:
		"hero hero hero hero hero hero hero process process process process process"
		"hero hero hero hero hero hero hero process process process process process"
		"hero hero hero hero hero hero hero process process process process process"
		"hero hero hero hero hero hero hero author author author author author"
	}	
	
	#main.container-grid > .content > .hero{
		display:grid;
		grid-template-rows:subgrid;
		grid-template-areas:
		"hero-title hero-title hero-title hero-title hero-title hero-title . "
		". . . . . . ."
		"timer1 timer1 timer1 . timer2 timer2 timer2 "
		"hero-cap hero-cap hero-cap hero-cap hero-cap hero-cap hero-cap ";
	}
	.timer1, .timer2 {align-items:end; display:grid; }
	
	.gallery{
		display:grid;
		grid-template-areas:
		"gallery-text gallery-text gallery-text gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works "
		"gallery-text gallery-text gallery-text gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works "
		"gallery-text gallery-text gallery-text gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works "
		"gallery-text gallery-text gallery-text gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works gallery-works "
	}
	.gallery-text{
		display:grid;
		grid-template-areas:
		"gallery-title gallery-title gallery-title gallery-title "
		"gallery-p gallery-p gallery-p gallery-p"
		"gallery-p gallery-p gallery-p gallery-p"
		"gallery-btn gallery-btn gallery-btn gallery-btn "
	}
	.gallery-works{
		display:grid;
		gap:1em;
		grid-template-areas:
		"gallery-1 gallery-1 gallery-4 gallery-4 gallery-6 gallery-6 gallery-6 gallery-6 gallery-6"
		"gallery-1 gallery-1 gallery-4 gallery-4 gallery-6 gallery-6 gallery-6 gallery-6 gallery-6"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-5 gallery-5 gallery-3 gallery-3"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-5 gallery-5 gallery-3 gallery-3"; 
	}
	.call{
		display:grid;
		grid-template-areas:
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"action action action action action action action action action action action action"; 
	}
	.sell{
		display:grid;
		gap:1rem;
		grid-template-areas:
		"sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head"
		"sell-text sell-text sell-text sell-text sell-text sell-text sell-text sell-text sell-text sell-text sell-text sell-text"
		"sell-box1 sell-box1 sell-box1 sell-box1 sell-box1 sell-box1 sell-box2 sell-box2 sell-box2 sell-box2 sell-box2 sell-box2"
		"sell-box1 sell-box1 sell-box1 sell-box1 sell-box1 sell-box1 sell-box2 sell-box2 sell-box2 sell-box2 sell-box2 sell-box2"
		"sell-box3 sell-box3 sell-box3 sell-box3 sell-box3 sell-box3 sell-box4 sell-box4 sell-box4 sell-box4 sell-box4 sell-box4"
		"sell-box3 sell-box3 sell-box3 sell-box3 sell-box3 sell-box3 sell-box4 sell-box4 sell-box4 sell-box4 sell-box4 sell-box4"; 
	}
	
	
	.action{
		display:grid;
	}
	.shop {
		grid-template-areas:
		"shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content "
		"shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content "
		"shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content "
		"shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content "
		"shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content "
		"shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content shop-content "
	;
}
	.shop-content{
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-2 box-2 box-2 box-2 box-2 box-2"
		"box-1 box-1 box-1 box-1 box-1 box-1 box-2 box-2 box-2 box-2 box-2 box-2"
		"box-1 box-1 box-1 box-1 box-1 box-1 box-2 box-2 box-2 box-2 box-2 box-2"
		"box-3 box-3 box-3 box-3 box-3 box-3 box-4 box-4 box-4 box-4 box-4 box-4"
		"box-3 box-3 box-3 box-3 box-3 box-3 box-4 box-4 box-4 box-4 box-4 box-4"
		"box-3 box-3 box-3 box-3 box-3 box-3 box-4 box-4 box-4 box-4 box-4 box-4"
		;
}
	.shop-content > .box-1{
		grid-template-areas:
		"area-title-1 area-title-1 area-title-1 area-title-1 area-title-1 area-title-1"
		"area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1"
		"gallery-btn gallery-btn gallery-btn gallery-btn gallery-btn gallery-btn"
	;
}
	
	.footer{
		display:grid;
		grid-template-rows: auto; 
		grid-template-areas:
		"social social social social social social social social social social social social"
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 "
		"legal legal legal legal legal legal legal legal legal legal legal legal "
	}
	
	.footer > .box-1{
		display:grid;
		grid-template-columns:subgrid; 
		grid-template-rows:subgrid;
		grid-template-areas:
		"area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 logo logo area-p-2 area-p-2 area-p-2 area-p-2 area-p-2"
		;
	}
	
	.footer > .box-1 > .area-p-2 a{display:inline-block;}
	
	.med-padding-100px-tb {padding-top:100px; padding-bottom:100px;}
	.med-padding-25px-tb {padding:25px 0;}
	
		/*about me main container*/
	.container-grid.about{ 
		grid-template-columns:repeat(12, minmax(10px, 1fr)); 
		grid-template-areas:
		"nav nav nav nav nav nav nav nav nav nav nav nav "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		;
	}
	
	/*about me content*/
	.container-grid.about > .content{ 
		grid-template-areas: 
		"intro intro intro intro intro intro intro intro intro services services services"
		"intro intro intro intro intro intro intro intro intro services services services"
		"intro intro intro intro intro intro intro intro intro services services services"
		"intro intro intro intro intro intro intro intro intro services services services"
		"mission mission mission mission mission mission mission mission mission mission mission mission "
		"mission mission mission mission mission mission mission mission mission mission mission mission "
		"mission mission mission mission mission mission mission mission mission mission mission mission "
		"skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"sell sell sell sell sell sell sell sell sell sell sell sell"
		"comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker"
		"contact contact contact contact contact contact contact contact contact contact contact contact"
		"contact contact contact contact contact contact contact contact contact contact contact contact"; 
		}
	
	/*about me content*/
	.container-grid.about > .content > .intro{ 
		grid-template-rows: repeat(4, 1fr); 
		grid-template-areas: 	
		"hero-title hero-title hero-title hero-title hero-title hero-title hero-title hero-title hero-title "
		"area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 "
		"area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 "
		". area-p-3 area-p-3 area-p-3 area-p-3 area-p-3 area-p-3 area-p-3 . "
		
		/*
		"area-p-3 area-p-3 area-p-3 area-p-3 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 "
		"area-p-3 area-p-3 area-p-3 area-p-3 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 "
		*/
		;
	}
	.container-grid.about > .content > .intro > .area-p-3 {place-self: start;}
	.container-grid.about > .content > .intro > .hero-title{font-size: var(--text-7xl); line-height:var(--text-line-6xl);}
	
	/*about me statement*/
	.container-grid.about > .content > .services{
		grid-template-areas:
		"feature-content-1 feature-content-1 feature-content-1"
		"feature-content-2 feature-content-2 feature-content-2"
		"feature-content-3 feature-content-3 feature-content-3"
		"feature-content-4 feature-content-4 feature-content-4";
	}
		/*about me mission*/
	.container-grid.about > .content > .mission{
		grid-template-areas:
		"area-title-1 area-title-1 area-title-1 area-title-1 area-title-1 area-title-1 area-title-1 area-title-1 area-title-1 area-title-1 area-title-1 area-title-1"
		"area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2"
		"author-q author-q author-q author-q area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 "
		;
	}
	.container-grid.about > .content > .mission > .area-p-2{padding:0!important;}
	.container-grid.about > .content > .mission > blockquote{padding:0 !important;}
	
	/*about me mission*/
	.container-grid.about > .content > .sell{
		grid-template-areas:
		"sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head "
		". . sell-text sell-text sell-text sell-text sell-text sell-text sell-text sell-text . . "
		"sell-box1 sell-box1 sell-box1 sell-box1 sell-box1 sell-box1 sell-box2 sell-box2 sell-box2 sell-box2 sell-box2 sell-box2 "
		"sell-box1 sell-box1 sell-box1 sell-box1 sell-box1 sell-box1 sell-box2 sell-box2 sell-box2 sell-box2 sell-box2 sell-box2 "
		"sell-box3 sell-box3 sell-box3 sell-box3 sell-box3 sell-box3 sell-box4 sell-box4 sell-box4 sell-box4 sell-box4 sell-box4 "
		"sell-box3 sell-box3 sell-box3 sell-box3 sell-box3 sell-box3 sell-box4 sell-box4 sell-box4 sell-box4 sell-box4 sell-box4 "
		;
	}
	
	.container-grid.about > .content > .contact{
		grid-template-areas:
		"contact-img contact-img contact-img contact-img contact-img contact-img contact-title contact-title contact-title contact-title contact-title contact-title "
		"contact-img contact-img contact-img contact-img contact-img contact-img contact-form contact-form contact-form contact-form contact-form contact-form "
		"contact-img contact-img contact-img contact-img contact-img contact-img contact-form contact-form contact-form contact-form contact-form contact-form "
		"contact-img contact-img contact-img contact-img contact-img contact-img contact-form contact-form contact-form contact-form contact-form contact-form "
		"contact-img contact-img contact-img contact-img contact-img contact-img contact-form contact-form contact-form contact-form contact-form contact-form "
		"contact-img contact-img contact-img contact-img contact-img contact-img contact-form contact-form contact-form contact-form contact-form contact-form "
		/*
		"contact-img contact-img contact-img contact-img contact-img contact-img contact-img contact-img contact-img contact-img contact-img contact-img "
		"contact-title contact-title contact-title contact-title contact-title contact-title contact-title contact-title contact-title contact-title contact-title contact-title "
		"contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form "
		"contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form "
		"contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form "
		"contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form contact-form "
		*/
		;
	}
	.container-grid.about > .content > .contact > .contact-img{
		display:inline;
	}

	.container-grid.about > .content > .contact > .contact-form{
		grid-template-rows:1fr 1fr 1fr 3fr 1fr;
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 "
		"box-2 box-2 box-2 box-2 box-2 box-2 box-2 box-2 box-2 box-2 box-2 box-2 "
		"box-3 box-3 box-3 box-3 box-3 box-3 box-3 box-3 box-3 box-3 box-3 box-3 "
		"box-4 box-4 box-4 box-4 box-4 box-4 box-4 box-4 box-4 box-4 box-4 box-4 "
		"box-5 box-5 box-5 box-5 box-5 box-5 box-5 box-5 box-5 box-5 box-5 box-5 "
		/*
		". box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 ."
		". box-2 box-2 box-2 box-2 box-2 box-3 box-3 box-3 box-3 box-3 ."
		". box-4 box-4 box-4 box-4 box-4 box-4 box-4 box-4 box-4 box-4 ."
		". . . . . box-5 box-5 . . . . ."
		*/
		;
	}
	
	/*Services main container*/
	#services.container-grid {
		grid-template-columns: repeat(12, minmax(10px, 1fr)); 
		grid-template-areas:
		"nav nav nav nav nav nav nav nav nav nav nav nav "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "	
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"call call call call call call call call call call call call "
		"call call call call call call call call call call call call "
		"call call call call call call call call call call call call "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		;
	}
	
	#services.container-grid  > .content{ 
		grid-template-areas:
		"intro intro intro intro intro intro intro intro intro intro intro intro "
		"intro intro intro intro intro intro intro intro intro intro intro intro "
		"services services services services services services services services services services services services"
		"services services services services services services services services services services services services"		
		"services services services services services services services services services services services services"
		"services services services services services services services services services services services services"
		;
	}
	
	#services.container-grid  > .content > .intro{ 

		grid-template-areas:
		"hero-title hero-title hero-title hero-title hero-title hero-title hero-title hero-title area-p-1 area-p-1 area-p-1 area-p-1"
		"table-contents table-contents table-contents table-contents table-contents table-contents table-contents table-contents table-contents table-contents table-contents table-contents"
		;
	}
	
	#services.container-grid  > .content > .intro > .table-contents{
		grid-template-areas:
		"box-1 box-1 box-1 box-2 box-2 box-2 box-3 box-3 box-3 box-4 box-4 box-4 "
		;
	}
	
	#services.container-grid > .content > .services {
		gap:1em;
		height:1100px;
		grid-template-rows:50px repeat(3, minmax(10px, 1fr));  
		}
		
	#services.container-grid > .content > .services > #concept-art.service-div { 
		grid-template-columns:subgrid; 
		grid-template-rows:subgrid;
		grid-column-end:span 12;
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4 gallery-4 gallery-4"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4 gallery-4"
		"box-2 box-2 box-2 box-2 box-3 box-3 box-3 box-3 box-4 box-4 box-4 box-4"; 
		
		; 
	}
	
	#services.container-grid > .content > .services > #brand-id.service-div { 	
		grid-template-columns:subgrid; 
		grid-template-rows:subgrid;
		grid-column-end:span 12;	
		grid-template-areas:		
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"box-2 box-2 box-2 box-2 gallery-1 gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2 gallery-2"
		"gallery-3 gallery-3 gallery-3 gallery-3 gallery-1 gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2 gallery-2"
		"gallery-3 gallery-3 gallery-3 gallery-3 box-3 box-3 box-3 box-3 box-4 box-4 box-4 box-4"
		; 
	}
	
	#services.container-grid > .content > .services > #world-building.service-div { 
		grid-template-columns:subgrid; 
		grid-template-rows:subgrid;
		grid-column-end:span 12;
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4 gallery-4"
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-3 gallery-3 gallery-3 gallery-3 gallery-5 gallery-5 gallery-5 gallery-5"
		"box-2 box-2 box-2 box-2 box-3 box-3 box-3 box-3 box-4 box-4 box-4 box-4"; 
	
	}
	
	#services.container-grid > .content > .services > #illustration.service-div { 
		grid-template-columns:subgrid; 
		grid-template-rows:subgrid;
		grid-column-end:span 12;	
		grid-template-areas:	
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"box-2 box-2 box-2 box-2 gallery-1 gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2 gallery-2"
		"box-3 box-3 box-3 box-3 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3"
		"box-4 box-4 box-4 box-4 gallery-4 gallery-4 gallery-4 gallery-4 gallery-4 gallery-4 gallery-4 gallery-4"; 

	}
	
	#services.container-grid > .price {
		grid-template-rowsx: repeat(5, 1fr);
		grid-template-areas:
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		;
	}
	
	#services.container-grid > .price > .price-ip {
		grid-template-columns:subgrid; 
		grid-template-rows:subgrid;
		grid-column-end:span 12;	
		grid-template-areas:
		". . . box-1 box-1 box-1 box-1 box-1 box-1 . . ."
		". area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 ."
		"box-2 box-2 box-2 box-2 box-3 box-3 box-3 box-3 box-4 box-4 box-4 box-4"
		"box-2 box-2 box-2 box-2 box-3 box-3 box-3 box-3 box-4 box-4 box-4 box-4"
		"area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2"
		". area-p-3 area-p-3 area-p-3 area-p-3 area-p-3 area-p-3 area-p-3 area-p-3 area-p-3 area-p-3 ."
		"box-5 box-5 box-5 box-6 box-6 box-6 box-7 box-7 box-7 box-8 box-8 box-8 ";
	}
	
	.price-box {
		grid-template-columns:subgrid; 
		grid-template-rows:subgrid;
		grid-column-end:span 4;
		grid-template-areas:
		"price-box-head price-box-head price-box-head price-box-head "
		"price-box-details price-box-details price-box-details price-box-details";		
	}
	.price-box li{
		padding:.5rem;
	}
	
	#services.container-grid  > .call{ 
		grid-template-columns:subgrid; 
		grid-template-rows:subgrid;
		grid-template-rowsx:repeat(3, minmax(50px, 1fr));
	}
	#services.container-grid  > .call > .action{ 
		grid-template-columns:subgrid; 
		grid-template-rows:repeat(3, minmax(50px, 1fr));
	}
	#services.container-grid  > .call > .action > h5{
		grid-column-end:span 12;
		place-self:center;
	}
	#services.container-grid  > .call > .action > a{
		grid-column-start: 5;
		grid-column-end: span 4;
		grid-row-end:4;
		place-self:center;
	}
	
	/*Gallery main container*/
	#gallery.container-grid {
		grid-template-columns: repeat(12, minmax(10px, 1fr)); 
		grid-template-areas:
		"nav nav nav nav nav nav nav nav nav nav nav nav "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "	
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "		
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		;
	}
	
	#gallery.container-grid  > .content{ 
		grid-template-areas:
		"intro intro intro intro intro intro intro intro intro intro intro intro "
		"intro intro intro intro intro intro intro intro intro intro intro intro "
		"intro intro intro intro intro intro intro intro intro intro intro intro "
		"services services services services services services services services services services services services"
		"services services services services services services services services services services services services"		
		"services services services services services services services services services services services services"
		"services services services services services services services services services services services services"
		"services services services services services services services services services services services services"
		;
	}
	
	#gallery.container-grid  > .content > .intro{ 
		text-align:center;
	}
	
	#gallery.container-grid  > .content > .intro > .area-p-1{width:75%; margin-left:auto; margin-right:auto;}
	
	
	#gallery.container-grid  > .content > .intro > .table-contents{
		grid-template-areas:
		". box-1 box-1 box-3 box-3 box-2 box-2 box-4 box-4 box-5 box-5 ."
		;
	}
	
	#gallery.container-grid > .content > .services {
		gap:1em;
		height:800px;
		grid-template-rows:50px repeat(4, minmax(10px, 1fr)); 
		}
	
	
	#gallery.container-grid > .content > .services > #concept-art.service-div { 
		grid-template-columns:subgrid; 
		grid-template-rows: subgrid;
		grid-column-end:span 12;
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4 gallery-4 gallery-4"
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4 gallery-4 gallery-4"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3"
		; 	
	}
	#gallery.container-grid > .content > .services > #brand-id.service-div { 
		grid-template-columns:subgrid; 
		grid-template-rows: subgrid;
		grid-column-end:span 12;
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3"
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4 gallery-4 gallery-4 gallery-4"
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-5 gallery-5 gallery-5 gallery-5 gallery-5"
		"gallery-6 gallery-6 gallery-6 gallery-6 gallery-6 gallery-6 gallery-7 gallery-7 gallery-7 gallery-7 gallery-7 gallery-7";
		; 	
	}
	#gallery.container-grid > .content > .services > #world-building.service-div { 
		grid-template-columns:subgrid; 
		grid-template-rows: subgrid;
		grid-column-end:span 12;
		grid-template-areas:
		 "box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
    "gallery-8 gallery-8 gallery-8 gallery-6 gallery-6 gallery-6 gallery-6 gallery-6 gallery-6 gallery-2 gallery-2 gallery-2"
    "gallery-8 gallery-8 gallery-8 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2"
    "gallery-5 gallery-5 gallery-5 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4 gallery-4"
    "gallery-7 gallery-7 gallery-7 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4 gallery-4"; 
		
	}
	
	#gallery.container-grid > .content > .services > #illustration.service-div { 
		grid-template-columns:subgrid; 
		grid-template-rows: subgrid;
		grid-column-end:span 12;
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-3 gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4 gallery-4 gallery-1 gallery-1 gallery-1 gallery-1"
		"gallery-3 gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4 gallery-4 gallery-1 gallery-1 gallery-1 gallery-1"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-1 gallery-1 gallery-1 gallery-1"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-1 gallery-1 gallery-1 gallery-1"; 
	
	}
	
	#gallery.container-grid > .content > .services > #case.service-div { 
		grid-template-columns:subgrid; 
		grid-template-rows: subgrid;
		grid-column-end:span 12;
		grid-template-areas:	
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4"
		"gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4"
		"gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4"
		". . . . . . . . . . . . " ; 
	
	}
	
	/* ===================================
    table of contents with pages
	====================================== */
	.table-contents {
		display: grid;
		list-style:none;
		margin:0;
		padding:0;
	}
	.table-contents li{margin:0 5px; border-bottom:1px solid var(--primary); display:grid;}
	
	.table-contents li::after {
		content:"\e61a";
		font-family:themify;
		font-size: var(--text-xs);
		color:var(--primary);
		grid-column:span 3;
		display:grid;
		place-self:center end;
		transform:translateX(-.1em);
		transition:all var(--trans-speedy) var(--trans-ease-in);
		
	}
	
	.table ul li a{
    text-decoration: none;
	color:var(--primary);
	padding:15px 0;
	display:block;
	text-align:left;
	grid-column:span 3;
	transition:all var(--trans-speedy) var(--trans-ease-in);
	
	}

	.table ul li a:hover, .table-contents li:hover:after {
    transform:translateX(.5em);}
	
	.services {
		position: relative;
		overflow: hidden;
	}

	.service-div {
		grid-column: 1 / -1;
		grid-row: 1 / -1;
		gapx:1em;
		position: relative;
		top: 0;
		left: 100%;
		width: 100%;
		height: 100%;
		transition: left 0.5s ease-in-out;
		display: grid;
		justify-content: center;
		opacity: 0;
		transition: left var(--trans-med) var(--trans-ease-in), opacity var(--trans-speedy) var(--trans-ease-in);
	}

	.services .active {
		left: 0;
		opacity: 1;
	}

	.service-div:nth-child(1) {
		background-color: var(--light);
	}

	.service-div:nth-child(2) {
		background-color: var(--light);
	}

	.service-div:nth-child(3) {
		background-color: var(--light);
	}

	.service-div:nth-child(4) {
		background-color: var(--light);
	}
	
	.service-div:nth-child(5) {
		background-color: var(--light);
	}
	
	
}


@media only screen and (min-width: 1280px) {
	
	.container-grid{
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav "
	"content content content content content content content content content content content content "
	"content content content content content content content content content content content content "
	"content content content content content content content content content content content content "
	"content content content content content content content content content content content content "
	"gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery "
	"gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery "
	"gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery "
	"gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery "
	"call call call call call call call call call call call call "
	"call call call call call call call call call call call call "
	"call call call call call call call call call call call call "
	"call call call call call call call call call call call call "
	"call call call call call call call call call call call call "
	"shop shop shop shop shop shop shop shop shop shop shop shop "
	"shop shop shop shop shop shop shop shop shop shop shop shop "
	"shop shop shop shop shop shop shop shop shop shop shop shop "
	"footer footer footer footer footer footer footer footer footer footer footer footer "
	"footer footer footer footer footer footer footer footer footer footer footer footer "
	"footer footer footer footer footer footer footer footer footer footer footer footer "
	}
	
	.shop-content{
	display:grid;
	gap:1em;
	grid-template-areas:
	"box-1 box-1 box-1 box-2 box-2 box-2 box-3 box-3 box-3 box-4 box-4 box-4"
	"box-1 box-1 box-1 box-2 box-2 box-2 box-3 box-3 box-3 box-4 box-4 box-4"
	"box-1 box-1 box-1 box-2 box-2 box-2 box-3 box-3 box-3 box-4 box-4 box-4"
	;
}
	
	/*about me main container*/
	.container-grid.about{ 
		grid-template-areas:
		"nav nav nav nav nav nav nav nav nav nav nav nav "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		;
	}
	.container-grid.about > .content{ 
		grid-template-areas:
		"intro intro intro intro intro intro intro mission mission mission services services "
		"intro intro intro intro intro intro intro mission mission mission services services "
		"intro intro intro intro intro intro intro mission mission mission services services "
		"intro intro intro intro intro intro intro mission mission mission services services "
		"skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track "
		"sell sell sell sell sell sell sell sell sell sell sell sell "
		"sell sell sell sell sell sell sell sell sell sell sell sell "
		"sell sell sell sell sell sell sell sell sell sell sell sell "
		"sell sell sell sell sell sell sell sell sell sell sell sell "
		"comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker "
		"contact contact contact contact contact contact contact contact contact contact contact contact "
		"contact contact contact contact contact contact contact contact contact contact contact contact "
		"contact contact contact contact contact contact contact contact contact contact contact contact "
		"contact contact contact contact contact contact contact contact contact contact contact contact "
		"contact contact contact contact contact contact contact contact contact contact contact contact "
		;
	}
	
	.container-grid.about > .content > .intro{ 
		grid-auto-flow: row;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-template-areas:
		"hero-title hero-title hero-title hero-title hero-title hero-title hero-title"
		"area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1"
		"area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1 area-img-1"
		". area-p-3 area-p-3 area-p-3 area-p-3 area-p-3 . "
		;
	}
	
	.container-grid.about > .content > .intro > .area-p-3 {
		place-self:start;
	}
	.container-grid.about > .content > .intro > .area-img-1{width:80%; justify-self:center;}


	.container-grid.about > .content > .mission{ 
		grid-auto-rowsx: max-content;
		grid-template-rows: 1fr .25fr 1.75fr 1fr;
		grid-auto-flow: row;
		grid-template-areas:
		"area-p-1 area-p-1 area-p-1 . ."
		"area-title-1 area-title-1 area-title-1  . ."
		"area-p-2 area-p-2 area-p-2 . ."
		"author-q author-q author-q . ."
		;
	}
	.container-grid.about > .content > .mission > .area-title-1 {
		place-self:center;
	}
	
	.container-grid.about > .content > .services{ 
		grid-auto-rowsx: max-content;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-auto-flow: row;
		grid-template-areas:
		"feature-content-1 feature-content-1 "
		"feature-content-2 feature-content-2 "
		"feature-content-3 feature-content-3 "
		"feature-content-4 feature-content-4 "

		;
	}	
	
	.container-grid.about > .content > .sell{ 
		grid-template-areas:
		"sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head "
		". . sell-text sell-text sell-text sell-text sell-text sell-text sell-text sell-text  . ."
		"sell-box1 sell-box1 sell-box1 sell-box2 sell-box2 sell-box2 sell-box3 sell-box3 sell-box3 sell-box4 sell-box4 sell-box4 "
		"sell-box1 sell-box1 sell-box1 sell-box2 sell-box2 sell-box2 sell-box3 sell-box3 sell-box3 sell-box4 sell-box4 sell-box4 "
		;
	}	
	
	.container-grid.about > .content > .contact{
	display:grid;
	grid-template-rows: 2fr .25fr 1fr 3fr 1fr ; 
	grid-template-areas:
	"contact-img contact-img contact-img contact-img contact-img contact-img contact-title contact-title contact-title contact-title contact-title contact-title"
    "contact-img contact-img contact-img contact-img contact-img contact-img contact-form contact-form contact-form contact-form contact-form contact-form"
    "contact-img contact-img contact-img contact-img contact-img contact-img contact-form contact-form contact-form contact-form contact-form contact-form"
    "contact-img contact-img contact-img contact-img contact-img contact-img contact-form contact-form contact-form contact-form contact-form contact-form"
    "contact-img contact-img contact-img contact-img contact-img contact-img contact-form contact-form contact-form contact-form contact-form contact-form";
	
	;
}

.container-grid.about > .content > .contact > .contact-form{
	display:grid;
	gap:1em;
	grid-template-rows: subgrid ;
	grid-template-areas:
	"box-1 box-1 box-1 box-1 box-1 box-1"
    "box-2 box-2 box-2 box-3 box-3 box-3"
    "box-4 box-4 box-4 box-4 box-4 box-4"
    ". . box-5 box-5 . .";
	;
}
.container-grid.about .contact-form input{margin-bottom:0;}
.container-grid.about .contact-form textarea{margin-bottom:0;}


	.container-grid.about > .content > .comp-ticker{ 
		grid-template-areas:
		"area-title-1 area-title-1 area-title-1 area-title-1 "
		"area-p-2 area-p-2 area-p-2 area-p-2 "
		;
	}	

	/*Services main container*/
	#services.container-grid {
		grid-template-areas:
		"nav nav nav nav nav nav nav nav nav nav nav nav "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "	
		"call call call call call call call call call call call call "
		"call call call call call call call call call call call call "
		"call call call call call call call call call call call call "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		;
	}
	
	#services.container-grid  > .content{ 
		grid-template-areas:
		"intro intro intro services services services services services services services services services"
		"intro intro intro services services services services services services services services services"
		"intro intro intro services services services services services services services services services"		
		". . . services services services services services services services services services"
		;
	}	
	
	#services.container-grid  > .content > .intro > .table-contents{
		grid-template-columns:subgrid; 
		grid-template-rows:subgrid;
		grid-template-areas:
		"box-1 box-1 box-1 "
		"box-2 box-2 box-2 "
		"box-3 box-3 box-3 "
		"box-4 box-4 box-4 "
		;
	}
	
	.table-contents li{margin:0 5px 0 0;}
	
	.table ul li a{
	grid-column:span 3;
	}
	
	#services.container-grid > .content > .services {height:100vh;}
	
	#services.container-grid > .content > .services > #concept-art.service-div { 
		grid-column-end:span 9;	
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"box-2 box-2 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-4 gallery-4"		
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-3 gallery-3 gallery-4 gallery-4"
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 box-3 box-3 box-4 box-4"
		; 
	}
	
	#services.container-grid > .content > .services > #brand-id.service-div { 		
		grid-template-areas:
		 "box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"box-2 box-2 box-2 gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2"
		"gallery-3 gallery-3 gallery-3 gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2"
		"box-4 box-4 box-4 gallery-1 gallery-1 gallery-1 box-3 box-3 box-3"; 
	}
	
	#services.container-grid > .content > .services > #world-building.service-div { 		
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4"
		"gallery-1 gallery-1 gallery-1 gallery-3 gallery-3 gallery-3 gallery-5 gallery-5 gallery-5"
		"box-2 box-2 box-2 box-3 box-3 box-3 box-4 box-4 box-4"; 
	
	}
	
	#services.container-grid > .content > .services > #illustration.service-div { 		
		grid-template-areas:		
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-1 gallery-1 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3 box-3 box-3"
		"box-2 box-2 gallery-4 gallery-4 gallery-4 gallery-4 gallery-4 . ."
		"gallery-2 gallery-2 gallery-4 gallery-4 gallery-4 gallery-4 gallery-4 box-4 box-4"
		; 

	}
	
	#services.container-grid  > .content > .intro > h2{
		font-size:var(--text-xl); line-height:var(--text-line-xl);
	}
	
	#services.container-grid > .price {
		grid-template-areas:
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		;
	}
	
	#services.container-grid > .price > .price-ip {
		gap:1em;
	
		grid-template-areas:
		". . . box-1 box-1 box-1 box-1 box-1 box-1 . . ."
		"area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2"
		"box-2 box-2 box-3 box-3 box-4 box-4 box-5 box-5 box-6 box-6 area-p-3 area-p-3"
		"box-2 box-2 box-3 box-3 box-4 box-4 box-7 box-7 box-8 box-8 area-p-3 area-p-3"
	}
	
	
	.price-box {
		grid-column-end:span 2;
		grid-template-areas:
		"price-box-head price-box-head "
		"price-box-details price-box-details"
		
		
	}
	.price-box-details {font-size:var(--text-s);}


	.hero{
		grid-template-areas:
		"hero-title hero-title hero-title hero-title hero-title hero-title . "
		". . . . . . ."
		". . . . . . ."
		"timer1 timer2 hero-cap hero-cap hero-cap hero-cap hero-cap ";
	}
	.timer1, .timer2 {align-items:start; align-self:start; }
	
	#main.container-grid > .call{
		grid-template-areas:
		"sell sell sell sell sell sell sell sell action action action action "
		"sell sell sell sell sell sell sell sell action action action action "
		"sell sell sell sell sell sell sell sell action action action action "
		"sell sell sell sell sell sell sell sell action action action action "
	}

	.sell{
		display:grid;
		gap:1rem;
		grid-template-areas:
		"sell-head sell-head sell-head sell-head sell-head sell-head sell-head sell-head "
		". sell-text sell-text sell-text sell-text sell-text sell-text . "
		"sell-box1 sell-box1 sell-box2 sell-box2 sell-box3 sell-box3 sell-box4 sell-box4 "
		"sell-box1 sell-box1 sell-box2 sell-box2 sell-box3 sell-box3 sell-box4 sell-box4 "
	}
	
	.action{
		display:grid;
	}
	

	.table-contents li::after {
	content:"\e628";
	
	}
	
	#gallery.container-grid  > .content{ 
		grid-template-areas:
		"intro intro intro services services services services services services services services services "
		"intro intro intro services services services services services services services services services "
		"intro intro intro services services services services services services services services services "
		"intro intro intro services services services services services services services services services"
		"intro intro intro services services services services services services services services services"		
		
		;
	}
	
	#gallery.container-grid  > .content > .intro{ 
		text-align:left;
		grid-template-areas:
		"hero-title hero-title hero-title "
		"area-p-1 area-p-1 area-p-1 "
		"table-contents table-contents table-contents"
		;
	}
	
	#gallery.container-grid  > .content > .intro > .table-contents{
		grid-template-columns:subgrid; 
		grid-template-rows:subgrid;
		grid-template-areas:
		"box-1 box-1 box-1 "
		"box-2 box-2 box-2 "
		"box-3 box-3 box-3 "
		"box-4 box-4 box-4 "
		"box-5 box-5 box-5 ";
	}
	
	#gallery.container-grid  > .content > .intro > .area-p-1{width:100%; margin-left:0; margin-right:0;}
	#gallery.container-grid > .content > .services {height:105vh;}
	
	#gallery.container-grid > .content > .services > #concept-art.service-div { 
		grid-column-end:span 9;
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4 gallery-4 gallery-4"
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4 gallery-4 gallery-4"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3"
		; 	
	}
	
	#gallery.container-grid > .content > .services > #brand-id.service-div { 
		grid-column-end:span 9;
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 "
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-3 "
		" gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4 gallery-4 "
		"gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-5 gallery-5 gallery-5 "
		"gallery-6 gallery-6 gallery-6 gallery-6 gallery-6 gallery-7 gallery-7 gallery-7 gallery-7 ";
		; 	
	}
	
	#gallery.container-grid > .content > .services > #world-building.service-div { 
		grid-column-end:span 9;
		grid-template-areas:
		 "box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-8 gallery-8 gallery-8 gallery-7 gallery-7 gallery-7 gallery-7 gallery-2 gallery-2"
		"gallery-8 gallery-8 gallery-8 gallery-1 gallery-1 gallery-1 gallery-1 gallery-2 gallery-2"
		"gallery-5 gallery-5 gallery-5 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4"
		"gallery-6 gallery-6 gallery-6 gallery-1 gallery-1 gallery-1 gallery-1 gallery-4 gallery-4"; 
		}
		
	#gallery.container-grid > .content > .services > #illustration.service-div { 
		grid-column-end:span 9;
		grid-template-areas:	
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4 gallery-1 gallery-1 gallery-1"
		"gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4 gallery-1 gallery-1 gallery-1"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-1 gallery-1 gallery-1"
		"gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-2 gallery-1 gallery-1 gallery-1"; 
	}
	
	#gallery.container-grid > .content > .services > #case.service-div { 
		grid-column-end:span 9;
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-1 gallery-1 gallery-2 gallery-2 gallery-3 gallery-3 gallery-4 gallery-4 ."
		"gallery-1 gallery-1 gallery-2 gallery-2 gallery-3 gallery-3 gallery-4 gallery-4 ."
		"gallery-1 gallery-1 gallery-2 gallery-2 gallery-3 gallery-3 gallery-4 gallery-4 ."
		". . . . . . . . .";  
	
	}
		
	
}


@media only screen and (min-width: 1600px) {
	#main.container-grid{
		grid-template-areas:
		"nav nav nav nav nav nav nav nav nav nav nav nav "
		"content content content content content content content content gallery gallery gallery gallery "
		"content content content content content content content content gallery gallery gallery gallery "
		"content content content content content content content content gallery gallery gallery gallery "
		"content content content content content content content content gallery gallery gallery gallery "
		"content content content content content content content content gallery gallery gallery gallery "
		"content content content content content content content content gallery gallery gallery gallery "
		"call call call call call call call call call call call call "
		"call call call call call call call call call call call call "
		"call call call call call call call call call call call call "
		"call call call call call call call call call call call call "
		"call call call call call call call call call call call call "
		"shop shop shop shop shop shop shop shop shop shop shop shop "
		"shop shop shop shop shop shop shop shop shop shop shop shop "
		"shop shop shop shop shop shop shop shop shop shop shop shop "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
	}
	
	#main.container-grid > .content {
		grid-template-areas:
		"hero hero hero hero hero process process process "
		"hero hero hero hero hero process process process "
		"hero hero hero hero hero process process process "
		"hero hero hero hero hero author author author "
		"hero hero hero hero hero author author author "
		"hero hero hero hero hero author author author ";
	}
	#main.container-grid > .content > .hero{
		grid-template-areas:
		"hero-title hero-title hero-title hero-title ."
		". . . . . "
		". . . . . "
		"timer1 timer2 hero-cap hero-cap hero-cap "
		"timer1 timer2 hero-cap hero-cap hero-cap "
		;
	}
	#main.container-grid > .content > .author{
		display:grid;
		grid-template-areas:
		"author-q author-q author-q"
		"author-p author-p author-p"
		"author-btn author-btn author-btn"
		;
	}
	#main.container-grid > .gallery {
		grid-template-areas:
		"gallery-works gallery-works gallery-works gallery-works "
		"gallery-works gallery-works gallery-works gallery-works "
		"gallery-works gallery-works gallery-works gallery-works "
		"gallery-text gallery-text gallery-text gallery-text "
		"gallery-text gallery-text gallery-text gallery-text "
		"gallery-text gallery-text gallery-text gallery-text ";
	}
	#main.container-grid > .gallery > .gallery-works {
		gap:1em;
		grid-template-areas:
		"gallery-1 gallery-2 gallery-2 gallery-2 "
		"gallery-6 gallery-6 gallery-6 gallery-4 "
		"gallery-3 gallery-3 gallery-5 gallery-5"
	;
	}
	#main.container-grid > .gallery > .gallery-text{
		grid-template-areas:
		". gallery-title gallery-title . "
		". gallery-p gallery-p ."
		"gallery-btn gallery-btn gallery-btn gallery-btn "
	}
	.noise{
	background-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 450 450' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	}
	
	/*about me main container*/
	.container-grid.about{ 
		grid-template-areas:
		"nav nav nav nav nav nav nav nav nav nav nav nav "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		;
	}
	.container-grid.about > .content{
		grid-auto-rowsx: max-content;
		grid-template-rowsx: repeat(7, 1fr);
		grid-template-areas:
		"intro intro intro intro intro intro mission mission mission mission services services"
		"intro intro intro intro intro intro mission mission mission mission services services"
		"intro intro intro intro intro intro mission mission mission mission services services"
		"intro intro intro intro intro intro mission mission mission mission services services"
		"skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track "
		"sell sell sell sell sell sell sell sell sell sell sell sell "
		"sell sell sell sell sell sell sell sell sell sell sell sell "
		"comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker "
		"contact contact contact contact contact contact contact contact contact contact contact contact "
		
		/*
		"intro intro intro intro intro intro mission mission mission mission mission mission "
		"intro intro intro intro intro intro mission mission mission mission mission mission "
		"intro intro intro intro intro intro mission mission mission mission mission mission "
		"intro intro intro intro intro intro mission mission mission mission mission mission "
		"intro intro intro intro intro intro mission mission mission mission mission mission "
		"services services services services services services services services services services services services "
		"skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track skill-track "
		"sell sell sell sell sell sell sell sell sell sell sell sell "
		"sell sell sell sell sell sell sell sell sell sell sell sell "
		"sell sell sell sell sell sell sell sell sell sell sell sell "
		"sell sell sell sell sell sell sell sell sell sell sell sell "
		"comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker comp-ticker "
		"contact contact contact contact contact contact contact contact contact contact contact contact "
		
		*/
		
		;
	}
	.container-grid.about > .content > .intro{ 
		grid-auto-rows:max-content;
		grid-template-areas:
		"hero-title hero-title hero-title hero-title hero-title hero-title"
		"area-p-3 area-p-3 area-img-1 area-img-1 area-img-1 area-img-1 "
		"area-p-3 area-p-3 area-img-1 area-img-1 area-img-1 area-img-1 "
		". . area-img-1 area-img-1 area-img-1 area-img-1 "
		
		/*
		"hero-title hero-title hero-title hero-title hero-title hero-title"
		". . . . . ."
		"area-p-3 area-p-3 area-img-1 area-img-1 area-img-1 area-img-1"
		"skillbar-bar-main skillbar-bar-main area-img-1 area-img-1 area-img-1 area-img-1"
		
		*/

		;
	}

	.container-grid.about > .content > .intro > .hero-title{font-size: var(--text-6xl); line-height:var(--text-line-6xl);}
	.container-grid.about > .content > .intro > .area-img-1{width:100%;}

	.container-grid.about > .content > .mission{
		gap:1em;
		grid-template-areas:
		". area-title-1 area-title-1 ."
		"area-p-2 area-p-2 area-p-1 area-p-1"
		"area-p-2 area-p-2 area-p-1 area-p-1"
		"author-q author-q author-q author-q "
		/*
		". . . . . . "
		". area-title-1 area-title-1 area-title-1 area-title-1 ."		
		". area-p-2 area-p-2 area-p-1 area-p-1 . "
		". area-p-2 area-p-2 area-p-1 area-p-1 . "
		". . author-q author-q . ."
		
		*/
		;
	}
	
	.container-grid.about > .content > .mission > .area-title-1{
		place-self:end center;
	}
/*	
	.container-grid.about > .content > .services{ 
		gap:1em;
		rid-template-rowsx: repeat(4, 1fr);
		grid-template-areas:
		"feature-content-1 feature-content-1 "
		"feature-content-2 feature-content-2 "
		"feature-content-3 feature-content-3 "
		"feature-content-4 feature-content-4 "
		
		
		/*
		". . feature-content-1 feature-content-1 feature-content-2 feature-content-2  feature-content-3 feature-content-3 feature-content-4 feature-content-4 . . "
		
		
		
		;
	}	
	*/
	.container-grid.about > .content > .sell{ 
		grid-template-areas:
		". sell-head sell-head . sell-box1 sell-box1 sell-box2 sell-box2 sell-box3 sell-box3 sell-box4 sell-box4 "
		". sell-text sell-text . sell-box1 sell-box1 sell-box2 sell-box2 sell-box3 sell-box3 sell-box4 sell-box4 "

		;
	}	
	
	.container-grid.about > .content > .sell > .sell-text{text-align:left;}
	
	.container-grid.about > .content > .contact > .contact-form{
	grid-template-areas:
	". box-1 box-1 box-1 box-1 ."
    ". box-2 box-2 box-3 box-3 ."
    ". box-4 box-4 box-4 box-4 ."
    ". . box-5 box-5 . .";
	;
}
	
	/*Services main container*/
	#services.container-grid {
		
		grid-template-areas:
		"nav nav nav nav nav nav nav nav nav nav nav nav "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"content content content content content content content content content content content content "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "
		"price price price price price price price price price price price price "	
		"call call call call call call call call call call call call "
		"call call call call call call call call call call call call "
		"call call call call call call call call call call call call "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		"footer footer footer footer footer footer footer footer footer footer footer footer "
		;
	}
	#services.container-grid  > .content{ 
		grid-template-rowsx:75px repeat(5, minmax(100px, 1fr));
		grid-template-areas:
		"intro intro intro services services services services services services services services services"
		"intro intro intro services services services services services services services services services"
		"intro intro intro services services services services services services services services services"
		"intro intro intro services services services services services services services services services"
		"intro intro intro services services services services services services services services services"

		;
	}
	
	#services.container-grid  > .content > .intro > h2{font-size:var(--text-5xl); line-height:var(--text-line-5xl);}
	
	#services.container-grid > .content > .services {
		gap:1em;
		min-height:900px;
		grid-template-rows:50px repeat(4, minmax(10px, 1fr));  
		}
	
	#services.container-grid > .content > .services > #concept-art.service-div { 		
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
    "box-2 box-2 gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-4 gallery-4"
    ". . gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-4 gallery-4"
    "gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 gallery-3 gallery-3 gallery-4 gallery-4"
    "gallery-1 gallery-1 gallery-1 gallery-1 gallery-1 box-3 box-3 box-4 box-4"; 
	}

	#services.container-grid > .content > .services > #brand-id.service-div { 		
		grid-template-areas:
		 "box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"box-2 box-2 box-2 gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2"
		"gallery-3 gallery-3 gallery-3 gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2"
		"gallery-3 gallery-3 gallery-3 gallery-1 gallery-1 gallery-1 gallery-2 gallery-2 gallery-2"
		"box-4 box-4 box-4 gallery-1 gallery-1 gallery-1 box-3 box-3 box-3"; 
	}
	
	#services.container-grid > .content > .services > #world-building.service-div { 		
		grid-template-areas:
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-2 gallery-2 gallery-2 gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4"
		"gallery-1 gallery-1 gallery-1 gallery-3 gallery-3 gallery-3 gallery-4 gallery-4 gallery-4"
		"gallery-1 gallery-1 gallery-1 gallery-3 gallery-3 gallery-3 gallery-5 gallery-5 gallery-5"
		"box-2 box-2 box-2 box-3 box-3 box-3 box-4 box-4 box-4"; 
	
	}
	
	#services.container-grid > .content > .services > #illustration.service-div { 		
		grid-template-areas:		
		"box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1 box-1"
		"gallery-1 gallery-1 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3 box-3 box-3"
		"box-2 box-2 gallery-3 gallery-3 gallery-3 gallery-3 gallery-3 box-3 box-3"
		"gallery-2 gallery-2 gallery-4 gallery-4 gallery-4 gallery-4 gallery-4 box-4 box-4"
		"gallery-2 gallery-2 gallery-4 gallery-4 gallery-4 gallery-4 gallery-4 box-4 box-4"; 

	}
	
	.services a{width:100%; height:100%; display:inline-block;}
		
	#services.container-grid > .price {
		display:grid;
		grid-template-areas:
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		"price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip price-ip "
		
		;
	}
	
	#services.container-grid > .price > .price-ip {
		display:grid;
		gap:1em;
		grid-template-areas:
		". . . box-1 box-1 box-1 box-1 box-1 box-1 . . ."
		"area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-1 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2 area-p-2"
		"box-2 box-2 box-3 box-3 box-4 box-4 box-5 box-5 box-6 box-6 area-p-3 area-p-3"
		"box-2 box-2 box-3 box-3 box-4 box-4 box-7 box-7 box-8 box-8 area-p-3 area-p-3"
}
.box-1 { grid-area: box-1; }
		;
	}
	
	#services.container-grid > .content > .price > .box-5 {
		grid-template-areas:
		""
	}
	
	
	
	/* Price box */
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}