#backdrop_vine_lantern_img{
	position:absolute;
	top: 9rem;
	right: 2.5rem;
	width: 21rem;
}

/* start painting */

#start_painting_container{
	width:100%;
	height:auto;
	margin-top: 1.2rem;
}
#short_description{
	display:block;
	position:relative;
	left:6%;
	width:36%;
	font-size:0.8rem;
	font-weight: normal;
	padding:0.6rem;
	padding-left:1.4rem;
	padding-right:1.4rem;
	border-radius: 0.25rem;
	background-color: rgba(20,20,20,0.1);
	
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, rgba(168,253,45,0) 100%);
	
	box-shadow: 0px 0px 8px 0px rgba(80,80,80, 0.2) inset;
	text-shadow: 0 0 2px rgba(20,20,20,1);
	color: rgb(220,220,220);
	line-height: 1.2rem;
	margin:0;
	transition: background-color 0.7s, box-shadow 0.7s, color 0.7s, border-radius 0.5s;
}
/*
#short_description:hover{
	background-color: rgba(250,250,250,0.2);
	
	background: rgb(255,255,255);
	background: linear-gradient(-60deg, rgba(255,255,255,0.2) 0%, rgba(186, 169, 199,0.2) 100%);
	
	box-shadow: 0px 0px 8px 0px rgba(250,250,250, 0.2) inset;
	text-shadow: 0 0 2px rgba(20,20,20,1);
	color: rgb(240,240,240);
	border-radius: 0.5rem;
}
*/
/* start painting
#short_description > i{
	margin-left: 6ch;
	color: rgb(181, 176, 163);
	font-size: 0.8rem;
}
*/
#supports_text{
	position:relative;
	display:block;
	font-size: 0.8rem;
	padding-top: 1.2rem;
	font-weight:bold;
}

#paint_btn_big{
	display:inline-block;
	position:absolute;
	top:0.85rem;
	left:50%;
	transform: translateX(-50%);
	color:rgb(40,40,40);
	font-size: 1.2rem;
	font-weight:bold;
	padding: 0.75rem;
	padding-left: 2.8rem;
	padding-right:2.8rem;
	border-radius: 0.5rem 2rem 2rem 0.5rem;
	border:2px solid white;
	text-decoration:none;
	background-color:rgb(240,240,240);
	transition: color 0.3s, box-shadow 0.3s, text-shadow 0.3s;
	color: #4d3806;
	user-select: none;
}
#paint_btn_big:hover{
	background-color: rgb(230,230,230);
	text-shadow: 0 0 3px rgb(255,255,255);
	color:white;
	box-shadow: 0 0 5px 2px rgba(255,255,255, 0.6);
}
#paint_btn_big:hover::before{
	text-shadow: 0px 0px 2px rgba(20,20,20, 0.8);
	
}
#paint_btn_big:active{
	background-color:rgb(240,240,240);
}

#paint_btn_big::before{
	content:'Run the application';
	text-align:center;
	bottom: -1.5rem;
	padding:0;
	margin:0;
	padding-top: 1.8rem;
	padding-bottom: 0.2rem;
	font-size: 0.7rem;
	position:absolute;
	left:50%;
	transform: translate(-50%, 0);
	min-width: 10rem;
	/*
	color: rgb(190,190,190);
	color: #f3bd45;
	color: #9682bb;
	color: rgb(159, 205, 48);
	*/
	color: #e5d9a1;
	
	text-decoration: underline;
	text-shadow: 0px 0px 2px rgba(20,20,20, 0.8);
}

/* feature list */

#feature_list_container{
	top:5%;
	width: auto;
	padding-left: 6%;
	margin-top: 2rem;
}
#feature_list_container > span{/* feature overview */
	display: block;
	font-weight:bold;
	font-stretch: expanded;
	font-size:0.65rem;
	color: rgb(160,160,160);
	max-width: calc(15ch + 2rem);
	text-align: center;
	background-color: rgba(0,0,0, 0.1);
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 15%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0) 100%);
	padding:0.5rem;

	margin-bottom: -0.5rem;
	margin-left: 0.5rem;
}
.feature-list-block{
	display:inline-block;
	font-size: 0.76rem;
	color: rgba(230, 227, 211, 0.9);
	line-height: 1.2rem;
	margin-top: 0.5rem;
	padding:0.5rem;
	padding-right:1rem;
	width: 50rem;
	border-radius: 0.5rem;
	background-color: rgba(20,20,20, 0.4);
	
/*
	 background: rgb(60,60,60);
background: linear-gradient(115deg, rgba(60,60,60,0.40378158099177175) 0%, rgba(108,88,104,0.39537821964723385) 8%, rgba(134,122,153,0.3981793400954131) 20%, rgba(20,20,20,0.3981793400954131) 45%); 

 background: rgb(20,20,20);
background: linear-gradient(115deg, rgba(20,20,20,0.40378158099177175) 0%, rgba(71,62,69,0.39537821964723385) 8%, rgba(103,92,122,0.3981793400954131) 20%, rgba(20,20,20,0.3981793400954131) 45%); 


 background: rgb(20,20,20);
background: linear-gradient(115deg, rgba(20,20,20,0.40378158099177175) 0%, rgba(71,59,69,0.39537821964723385) 8%, rgba(98,85,119,0.3981793400954131) 20%, rgba(20,20,20,0.3981793400954131) 45%); 


 background: rgb(20,20,20);
background: linear-gradient(115deg, rgba(20,20,20,0.40378158099177175) 0%, rgba(59,48,57,0.39537821964723385) 8%, rgba(81,75,99,0.3981793400954131) 20%, rgba(20,20,20,0.3981793400954131) 45%); 
*/
 
	
	box-shadow: -2px 0px 6px 0px rgba(20,20,20, 0.5);
	text-shadow: 0px 0px 4px rgba(20,20,20, 1);
	
	border-right: 1px solid rgb(99, 65, 54);
	border-right: 1px solid rgb(82, 77, 43);
	/* border-top: 1px solid rgb(63, 97, 96); */
}
.feature-list-block:nth-of-type(2){
	border-right: 1px solid rgb(63, 97, 96);
	width: 45rem;
}
.feature-list-block > ul{
	display:inline-block;
	vertical-align: top;
	list-style-type: none;
	padding-left:2rem;
}

.feature-list-block > ul li::before{
	content: '';
	display:inline-block;
	position:relative;
	left:-0.5rem;
	width:0px;
	height:1rem;
	border-radius:0.2rem;
	/* 
	border:1px solid #3a7861;
	border:1px solid #7d61b5;
	 */
	border:1px solid #655681;
	transition:border-color 0.3s;
	background-color: rgba(80,80,80, 0.1);
	vertical-align:middle;
}
.feature-list-block > ul li:hover::before{
	border-color: rgba(255,255,255);
	box-shadow: 0px 0px 5px 0px rgba(255,255,255, 1);
}
.feature-list-block > ul li span{
	display:inline-block;
	color: rgb(245, 182, 56);
	color: rgb(186, 159, 86);
	
}
.feature-list-block > a{
	display:inline-block;
}
.feature-list-block > a img{
	display:inline-block;
	width:20rem;
	padding:0.5rem;
	border-radius: 0.5rem;
	background-color: rgba(20,20,20, 0.4);
	cursor: pointer;
}

/* screenshot view */

#screenshot_view_box{
	display:none;
	position:fixed;
	width: 75rem;
	margin: 0 auto;
	top:4.9rem;
	left:50%;
	transform: translateX(-50%);
	background-color: rgba(140,140,140, 0.4);
	
	border: 2px solid rbg(20,20,20);
	border-radius: 0.5rem;
	padding:0.6rem;
	box-shadow: 0 0 10px 1px rgba(0,0,0, 0.2);
	z-index: 1000;
	cursor:pointer;
	user-select:none;
}
.screenshot-view-img{
	display:none;
	width:100%;
}
#screenshot_view_box[data-screenshot-show-index="0"] > #screenshot_view_img_container :nth-child(1){
	display:block;
}
#screenshot_view_box[data-screenshot-show-index="1"] > #screenshot_view_img_container :nth-child(2){
	display:block;
}
#screenshot_view_fade_screen{
	position:absolute;
	left:0.6rem;
	top:0.6rem;
	width: calc(100% - 1.2rem);
	height: calc(100% - 1.2rem);
	animation: screenshotViewFadeIn 1s forwards;
	border-radius: 0.5rem;
}
@keyframes screenshotViewFadeIn{
	0% { background-color: rgba(220, 220, 220, 1); }
	99.99% { background-color: rgba(40,40,40, 0); left:0px; top:0px; width: 100%; height:100%}
	100% { width:0px; height:0px; }
}
#screenshot_view_box_close_btn{
	position:absolute;
	top:0px;
	right:0px;
	transform: translateY(-100%);
	padding: 0.5rem;
	padding-left:1rem;
	padding-right:1rem;
	font-size: 0.7rem;
	border-radius: 0.5rem 1rem 0.5rem 0.5rem;
	background-color: rgb(20,20,20);
	border: 2px solid rgb(180,180,180);
	user-select: none;
}

/* screenshot view end */

#system_and_recommendations{
	display:block;
	max-width: 45rem;
	font-size: 0.7rem;
	color: rgb(209, 190, 209);
	background-color: rgba(0,0,0, 0.6);
	background-color: rgba(153, 99, 17, 0.2);
	background: rgb(153,99,17);
	background: linear-gradient(90deg, rgba(153,99,17,0) 0%, rgba(153,99,17,0.2) 5%, rgba(153,99,17,0.2) 78%, rgba(153,99,17,0) 100%);
	padding-left:0.5rem;
	padding-right:0.5rem;
	line-height: 0.9rem;
	border-radius: 0.5rem;
	margin-top: 2rem;
}
#system_and_recommendations > ul {
	list-style-type: none;
	padding:0.2rem;
	margin: 0;
}
#system_and_recommendations > ul li span{
	display:inline-block;
	color: rgb(201, 117, 179);
	font-stretch: expanded;
}

/* feature list end */


/* MOBILE  Portrait */
@media screen and (max-width:768px), screen and (orientation: portrait), screen and (max-height: 768px),
only screen /* ipad & ipad pro */
  and (min-width: 700px) 
  and (max-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2)
{
	#backdrop_vine_lantern_img{
		display:none;
	}
	#start_painting_container{
		margin-top: 0.5rem;
	}
	#paint_btn_big{
		position:relative;
		margin-top: 1rem;
		margin-bottom: 1.2rem;
	}
	#short_description{
		display:block;
		width:100%;
		left:0;
	}
	#feature_list_container{
		margin-top: 3rem;
		padding:0;
	}
	.feature-list-block{
		width:100% !important;
	}
	.feature-list-block > ul{
		display:inline-block;
		float:left;
		position:relative;
		text-align:left;
		
		padding-left:1.4rem;
		padding-right:1.4rem;
	}
	.feature-list-block > a img{
		width:100%;
	}
	#screenshot_view_box{
		width:100%;
	}
	
}
/* mobile / tablet landscape */
@media screen and (max-height: 768px) and (orientation: landscape) and (min-width: 600px),
only screen 
  and (min-width: 700px) 
  and (max-width: 1366px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2){
	#start_painting_container{
		padding-top: 0;
		margin-top: 0;
	}
	#short_description{
		display: inline-block;
		width: 42%;
		padding-right: 1ch;
	}
	#paint_btn_big{
		position:absolute;
		margin:0;
	}
	#feature_list_container{
		margin-top: 1rem;
	}
	.feature-list-block{
		text-align:center;
	}
	.feature-list-block > ul{
		left:0%;
	}
	.feature-list-block > a img{
		width:auto;
		height: min(89vh, 50vw);
	}
	#screenshot_view_box{
		top:2.2rem;
		width:auto;
	}
	#screenshot_view_img_container img{
		width:auto;
		height: min(89vh, 50vw);
	}
}