mediaTitleSection{
	display:block;
	text-align:center;
	margin:4vw auto 10px 0;
	color:#999;
}
mediaArea{
	display:block;
	text-align:center;
	width: 100%;/*NEW ADDED*/
  padding: 0;/*NEW ADDED*/
  margin: 0;/*NEW ADDED*/
	
	/*display:flex;
	flex-wrap: wrap;
	justify-content:center;*/
	
	
	
}
	mediaBox{
		display:block;
		color:#bbb;
		font-style: normal;
		font-size:5vw;
		text-align:left;
		padding:0vw 0 6vw 0;
		margin: 0 0 6vw 0;
		background:white;
		/*border:1px solid #fff;*/
		/*background: orange;*/
		box-sizing: border-box;
		width: 100vw;/*NEW ADDED*/
		
	}
		.mediaBoxPrivated{
			background-color:var(--wish-private-background-color);
		}
	  mediaVideo, mediaImage{
	    position: relative;
	    /*width: 100%;*/
	    width: 100vw; /*NEW ADDED*/
	    /*max-width: 720px;*/
	    max-width: none;/*NEW ADDED*/
	    display: block;
	    margin: 0 auto 2vw auto;
	    padding: 0;
	    box-sizing: border-box;
	    overflow: hidden;
	    overflow: visible; /*pellizcar*/
	    transform-origin: center center; /*pellizcar*/
    	will-change: transform; /*pellizcar*/
	    background-size: cover;
	    background-position: center;
	    background-repeat: no-repeat;
	    touch-action: pan-y; /*pellizcar*/
		}
			mediaVideo video {
		    width: 100%;
		    width: 100vw; /*NEW ADDED*/
		    height: auto;
		    display: block;
		    margin: 0 auto;
		    object-fit: cover; /*pellizcar*/
			}	
			mediaImageHeart{
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    width: 25vw;
		    height: 25vw;
		    background-image: url('../-img/heart.png');
		    background-size: cover;
		    opacity: 0;
		    transition: opacity 0.5s, transform 0.5s;
		    pointer-events: none;
			}	
				.mediaImageHeartShow{
			    opacity: 0.8;
			    transform: translate(-50%, -50%) scale(1.5);
				}				
				.mediaImageHeartHidden{
					display: none;
				}
		mediaCaption{
			display:block;
			height:10vw;
			box-sizing: border-box;
			margin: 0vw 0 4vw 0;
			/*border:1px solid coral;*/
			padding:0 1vw 0 1vw;
		}
			.mediaDate{
				color:#aaa;
				font-size:3.5vw;
				text-align:left;
				display:block;
				float:left;
				width:29vw;
				box-sizing: border-box;
				/*border:1px solid green;*/
			}
			mediaIcons{
				/*display:block;*/
				text-align:right;
				padding:0 1vw 0 0;
				margin-left:29vw;
				height:9vw;
				/*border:1px solid blue;*/
				display: flex;
			  flex-direction: row; 
			  justify-content: space-around;
			  align-items: center; 
			}
				mediaIconLike, .mediaIconComment{
					width:6.5vw;
					height:6.5vw;
					display:inline-block;
					background-image:url('../-img/like.png');
					background-size: 6.5vw;
					background-repeat: no-repeat;
					background-position: 0px 0px;
					/*margin:0 0vw 0 6vw;*/
					cursor:pointer;
				}
					.mediaIconLikeLiked{
						background-position: 0px -7.5vw;
					}
				.mediaIconComment{
					background-image:url('../-img/comment.png');
					background-size: 6.5vw;
					background-repeat: no-repeat;
					background-position: 0px 0px;
					padding:0;
					/*margin:0 0vw 0 8vw;*/
				}
				mediaIconAmount{
					color:#333;
					font-size:3vw;
					display:inline-block;
					/*float:right;*/
					margin:0 0vw 0 0vw;
					width: fit-content;
					font-weight:bold;
					/*border:1px solid black;*/
				}
				a.mediaDelete, a.mediaEdit, a.mediaFlag{
					position:static;
					width:6.5vw;
					height:6.5vw;
					display:inline-block;
					/*margin:0 0vw 0 8vw;*/
					background-image: url('../-img/delete2.png');
					background-repeat: no-repeat;
					background-position: 0px 0px;
					background-size: 6.5vw;
				}
				a.mediaEdit{
					background-image: url('../-img/edit2.png');
					margin:0 0 0 0;
					/*border:1px solid orange;*/
				}
				a.mediaFlag{
					background-image: url('../-img/flag.png');
					margin:0 0 0 0;
					/*border:1px solid orange;*/
				}
				a.mediaDelete:hover, a.mediaEdit:hover, a.mediaFlag:hover{
					text-decoration:none;
				}
				
		mediaText{
			color:#333;
			margin:0px 0 0px 0px;
			padding:0 2vw 0 2vw;
			font-size:4vw;
			text-align:justify;
			/*background:coral;*/
			/*text-overflow:ellipsis;*/
			box-sizing: border-box;
			display:inline-block;
			/*border:1px solid coral;*/
		}
		#mediaCommentForm{
			display: flex;
    	align-items: center;
    	/*align-items: flex-start;*/
    	justify-content: space-between;
    	margin:5vw 1vw 0 1vw;
		}
		.mediaCommentProfilePhoto{
			width:9vw;
			height:9vw;
			border-radius: 1vw;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 0px 0px;
			box-sizing: border-box;
			display:inline-block;
			float:left;
			margin-right:3vw;
			margin-top:0px;
			flex-shrink:0;
		}
		.mediaCommentTextarea{
			flex-grow:1;
			padding:2vw;
			font-size:4vw;
			margin: 0px 3vw 0 0px;
			font-family:verdana;
			text-align:justify;
			color:#777;			
			height:20vw;
			/*text-indent:30px;*/
			border:none;
			border:0.3vw solid #ddd;
			box-sizing: border-box;
			overflow:hidden;
			resize:none;
		}
		.mediaVoiceRecordingContainer {
			flex-grow:1;
	    padding:2vw;
	    font-size: 4vw;
	    margin: 0px 3vw 0 0px;
	    border:0.3vw solid #ddd;
	    box-sizing: border-box;
	    height: 20vw;
		}	
			.mediaVoiceDeleteButton {
		    display:block;
		    width: 8vw;
		    height: 8vw;
		    border: none;
		    border-radius: 1vw;
		    background: #ffe6e6;
		    color: white;
		    cursor: pointer;
		    transition: 0.2s;
			}
		.mediaCommentTextarea::placeholder{
			color:#555;
		}
		.mediaVoiceDots::after {
		  content: '';
		  display: inline-block;
		  width: 3ch; /* ancho fijo para no mover nada */
		  text-align: left;
		  animation: dots 1.5s steps(4, end) infinite;
		}		
			@keyframes dots {
			  0%   { content: ''; }
			  25%  { content: '.'; }
			  50%  { content: '..'; }
			  75%  { content: '...'; }
			  100% { content: ''; }
			}
		audio.voice{
			display:block;
			margin:0.4vw 0 0 0;
		}
		.mediaCommentSubmit, .mediaCommentVoiceSubmit{
			font-style: normal;
			font-size:4vw;
			border-radius: 1vw;
			background: royalblue;
			text-align:center;
			color:white;
			padding:4vw 3vw;
			border:0.3vw solid white;
			text-decoration:none;
			text-shadow: none;
			margin: 0px auto 0px auto;
			cursor:pointer;
			width:20vw;
			
		}
			input.mediaCommentSubmit:disabled, input.mediaCommentVoiceSubmit:disabled{
				cursor: wait;
				border-color:gray;
				color:gray;
				opacity:0.3;
			}
		mediaCommentRow{
			display:flex;
			align-items: center;
			/*align-items: flex-start;*/
			margin: 3vw 2vw 0 1vw;
			padding:0px 0 0px 0;
			text-align:left;
			line-height:4vw;
			box-sizing: border-box;
			color:#777;
			/*border:1px solid black;*/
			min-height:10vw;
		}
			.mediaCommentNick{
				display:inline-block;
				color:#bbb;
				font-weight:bold;
				transition: color 0.3s;
				margin-right:1vw;
				font-size:4vw;
			}
			mediaCommentText{
				font-size:4vw;
			}			
			.mediaCommentDate{
				font-size:3.5vw;
				color:#bbb;
				font-weight:bold;
				margin-left:2vw;
				margin-right:2vw;
			}
			mediaCommentDelete{
				color:#FFC2C3;
				cursor:pointer;
			}
			
/* DESKTOP VIEW MODIFICATIONS */
@media all and (min-device-width: 640px) and (min-width: 960px) and (orientation: landscape ){
	body{

	}
mediaTitleSection{
	display:block;
	text-align:center;
	margin:10px auto 20px 0;
	color:#999;
}

mediaArea{
	display:block;
	text-align:center;
	background:inherit;
	/*display:flex;
	flex-wrap: wrap;
	justify-content:center;*/
	/*background:lightcoral;*/
	
}
	mediaBox{
		/*position:relative;*/
		display:block;
		width: 600px;
		/*min-height: 150px;*/
		
		color:#bbb;
		font-style: normal;
		font-size:14px;
		text-align:left;
		
		padding:20px;
		margin: 0 auto 30px auto;
		/*border:1px solid #fff;*/
		border-radius: 4px;
		box-shadow: 0 1px 4px #ccc;

		transition: box-shadow 0.3s, border-color 0.3s;
		background: white;
		box-sizing: border-box;
	}
		mediaBox:hover{
			border-color:#ccc;
			box-shadow: 0 0 4px #888;
		}
		.mediaBoxPrivated{
			background-color:var(--wish-private-background-color);
		}
		.mediaBoxPrivated:hover{
			box-shadow: 0 0 4px var(--wish-private-border-color);
		}
	
		/*mediaImage{
			width:100%;
			height:500px;
			background-repeat: no-repeat;
			background-position:bottom center;
			display:block;
			margin:0px auto 10px auto;
			background-size: cover;
			text-align:center;
			padding-top:200px;
			padding:0;
			box-sizing: border-box;
			display: flex;
      justify-content: center;
      align-items: center;
		}
		mediaVideo{
	    width: 100%; 
	    max-width: 720px;
	    display: block; 
	    margin: 0 auto 10px auto;
	    padding: 0;
	    box-sizing: border-box;
	    overflow: hidden;
		}
			mediaVideo video{
		    width: 100%; 
		    height: auto; 
		    display: block; 
			  margin: 0 auto;
			}
			mediaImageHeart{
				display:block;
				margin: auto;
	      width: 100px; 
	      height: 100px;
	      background-image: url('../-img/heart.png'); 
	      background-size: cover;
	      opacity: 0;
	      transition: opacity 0.5s, transform 0.5s;
	    }
	    .mediaImageHeartShow{
	      opacity: 0.8;
	      transform: translate(0%, 0%) scale(1.5);
	    }	
	    .mediaImageHeartHidden{
	      display: none;	      
	    }
	  */
	  mediaVideo, mediaImage{
	    position: relative;
	    width: 100%;
	    max-width: 720px;
	    display: block;
	    margin: 0 auto 10px auto;
	    padding: 0;
	    box-sizing: border-box;
	    overflow: hidden;
	    background-size: cover;
	    background-position: center;
	    background-repeat: no-repeat;
		}	
			mediaVideo video{
		    width: 100%;
		    height: auto;
		    display: block;
		    margin: 0 auto;
			}
			mediaImageHeart {
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    width: 100px;
		    height: 100px;
		    background-image: url('../-img/heart.png');
		    background-size: cover;
		    opacity: 0;
		    transition: opacity 0.5s, transform 0.5s;
		    pointer-events: none;
			}	
				.mediaImageHeartShow{
					opacity: 0.8;
				  transform: translate(-50%, -50%) scale(1.5);
				}				
				.mediaImageHeartHidden{
					display: none;
				}
		mediaCaption{
			display:block;
			height:30px;
			box-sizing: border-box;
			margin: 15px 0 15px 0;
			padding:0;
		}
			.mediaDate{
				color:#aaa;
				font-size:12px;
				text-align:left;
				display:block;
				margin-top:0;
				float:left;
				width:200px;
				box-sizing: border-box;
			}
			mediaIcons{
				justify-content: flex-start;
				align-items: normal;
				display:block;
				margin-left:205px;
				text-align:right;
				padding:0 0px 0 0;
				height:30px;
				/*border:1px solid blue;*/			  
			}
				mediaIconLike, .mediaIconComment{
					width:25px;
					height:25px;
					display:inline-block;
					background-image:url('../-img/like.png');
					background-size: 25px;
					background-repeat: no-repeat;
					background-position: 0px 0px;
					margin:0 0 0 30px;
					cursor:pointer;
				}
					.mediaIconLikeLiked{
						background-position: 0px -29px;
					}
				.mediaIconComment{
					background-image:url('../-img/comment.png');
					background-size: 25px;
					background-repeat: no-repeat;
					background-position: 0px 0px;
					padding:0;
				}
				mediaIconAmount{
					color:#333;
					font-size:11px;
					display:inline-block;
					/*float:right;*/
					margin:0px 0 0 3px;
					width: fit-content;
					font-weight:bold;
					
				}
				a.mediaDelete, a.mediaEdit, a.mediaFlag{
					position:static;
					width:25px;
					height:25px;
					display:inline-block;
					margin:0 0 0 30px;
					background-image: url('../-img/delete2.png');
					background-repeat: no-repeat;
					background-position: 0px 0px;
					background-size: 25px;
				}
				a.mediaEdit{
					background-image: url('../-img/edit2.png');
				}
				a.mediaFlag{
					background-image: url('../-img/flag.png');
				}
				a.mediaDelete:hover, a.mediaEdit:hover, a.mediaFlag:hover{
					text-decoration:none;
				}
				
		mediaText{
			color:#333;
			margin:0px 0 0px 0px;
			font-size:14px;
			text-align:justify;
			/*background:coral;*/
			text-overflow:ellipsis;
			box-sizing: border-box;
			display:inline-block;
		}
		#mediaCommentForm{
			display: flex;
    	align-items: start;
    	justify-content: space-between;
    	margin:15px 0 0 0;
		}
		.mediaCommentProfilePhoto{
			width:25px;
			height:25px;
			border-radius: 5px;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 0px 0px;
			box-sizing: border-box;
			display:inline-block;
			float:left;
			margin-right:10px;
			margin-top:0px;
			flex-shrink:0;
		}
		.mediaCommentTextarea{
			flex-grow:1;
			padding:5px;
			font-size:15px;
			margin: 0px 10px 0 0px;
			font-family:verdana;
			text-align:justify;
			color:#777;			
			height:50px;
			/*text-indent:30px;*/
			border:none;
			border:1px solid #ddd;
			box-sizing: border-box;
			overflow:hidden;
			resize:none;
		}
		.mediaCommentTextarea:focus{
			color:#444;
			background-color:#fafafa;
			border-color:white;
		}
		.mediaCommentTextarea::placeholder{
			color:#555;
		}
		.mediaVoiceRecordingContainer {
			flex-grow:1;
	    padding: 5px 10px;
	    font-size: 15px;
	    margin: 0 10px 0 0;
	    border: 1px solid #ddd;
	    box-sizing: border-box;
	
	    display: flex;
	    align-items: center;
	    gap: 10px;             
	    height: 50px;
		}	
			.mediaVoiceDeleteButton {
		    float:right;
		    width: 32px;
		    height: 32px;
		    border: none;
		    border-radius: 8px;
		    background: #ffe6e6;
		    color: white;
		    cursor: pointer;
		    transition: 0.2s;
			}
			.mediaVoiceDeleteButton:hover {
		    background: #d9363e;
			}
		.mediaCommentSubmit, .mediaCommentVoiceSubmit{
			font-style: normal;
			font-size:14px;
			border-radius: 4px;
			background: royalblue;
			text-align:center;
			width:70px;
			color:white;
			padding:13px 10px;
			border:1px solid white;
			text-decoration:none;
			text-shadow: none;
			transition: text-shadow 0.3s, border-color 0.3s;
			margin: 0px auto 0px auto;
			cursor:pointer;
			
		}
			input.mediaCommentSubmit:hover, input.mediaCommentVoiceSubmit:hover{
				text-shadow: 0 1px 1px #fff;
				border-color:powderblue;
			}
			input.mediaCommentSubmit:disabled, input.mediaCommentVoiceSubmit:disabled{
				cursor: wait;
				border-color:gray;
				color:gray;
				opacity:0.3;
			}
		audio.voice{
			display:block;
			margin:0;
		}
		mediaCommentRow{
			display:flex;
			align-items: center;
			margin: 10px 0 0 0;
			padding:0px 0 0px 0;
			text-align:justify;
			line-height:18px;
			box-sizing: border-box;
			color:#777;
			/*border:1px solid black;*/
			min-height:30px;
		}
		mediaCommentRow:hover{
			/*color:#222;*/
			/*background:whitesmoke;*/
		}
			.mediaCommentNick{
				display:inline-block;
				color:#bbb;
				font-weight:bold;
				transition: color 0.3s;
				margin-right:3px;
				font-size:14px;
			}
			.mediaCommentNick:hover{
				color:royalblue;
			}
			mediaCommentText{
				font-size:14px;
			}			
			.mediaCommentDate{
				font-size:13px;
				color:#bbb;
				font-weight:bold;
				margin-left:3px;
				margin-right:3px;
			}
			mediaCommentDelete{
				color:#FFC2C3;
				transition: color 0.3s;
				cursor:pointer;
			}
			mediaCommentDelete:hover{
				color:#FF8083;
			}
		
/*		wishDescription{
			margin:0px 0 10px 5px;
			font-size:14px;
			text-align:justify;
			line-height:18px;
			max-height:150px;
			width:385px;
			flex-grow:1;
			text-overflow:ellipsis;
			box-sizing: border-box;
			
		}
	wishPrice{
		display:block;
		color:#FFA500;
		font-weight:bold;
		font-size:15px;
		margin-top:5px;
	}
	a.wishUrl{
		white-space: nowrap;
    overflow: hidden;
		text-overflow:ellipsis;
		width:100%;
		display:block;
		font-style:italic;
		transition: color 0.3s;
		font-size:14px;
		margin-top:5px;
	}
		a.wishUrl:hover{
			color: royalblue;
		}
	a.wishTagged{
		color:#777;
		white-space: nowrap;
    overflow: hidden;
		text-overflow:ellipsis;
		display:inline-block;
		transition: color 0.3s;
		font-size:14px;
		margin-top:5px;
		padding:5px 5px 5px 27px;
		background-image:url('../-img/tagged.png');
		background-size: 20px;
		background-repeat: no-repeat;
		background-position: 2px 5px;
	}
		a.wishTagged:hover{
			color: royalblue;
		}	
	
	wishDate{
		color:#aaa;
		font-size:12px;
		text-align:left;
		display:block;
		margin-top:15px;
	}
	wishAbsoluteIcons{
		position:absolute;
		height:20px;
		margin:-15px 0 0 121px;
		width:235px;
		text-align:right;
	}
		a.wishDelete, a.wishEdit, wishPrivated, .wishDonors, .wishGrant, .wishFulfilled{
			position:static;
			width:20px;
			height:20px;
			display:inline-block;
			margin:0 0 0 25px;
			background: url('../-img/delete2.png') left top no-repeat;
			background-size: 20px;
		}
		a.wishEdit{
			background: url('../-img/edit2.png') left top no-repeat;
			background-size: 20px;
		}
		a.wishDelete:hover, a.wishEdit:hover{
			text-decoration:none;
		}
		wishPrivated{
			background-image: url('../-img/wish_private3.png');
	    background-position: 0px 0px;
			background-repeat: no-repeat;
	    box-sizing: border-box;
		}
		.wishGrant{
			background-image: url('../-img/wish_grant2.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
	    box-sizing: border-box;
		}
		.wishGrant:hover{
			background-position: 0px -30px;
		}
		.wishFulfilled{
			background-image: url('../-img/wish_fulfilled.png');
	    background-position: 0px 0px;
			background-repeat: no-repeat;
	    box-sizing: border-box;
		}
		.wishFulfilled:hover{
			-webkit-filter: drop-shadow(0px 0px 5px orange);
  		filter: drop-shadow(0px 0px 5px orange);
		}
		.wishDonors{
			background-image: url('../-img/donors6.png');
			color:#444;
			font-size:12px;
			background-size: 30px 50px;
			background-position: 0px 0px;
			width:30px;
			font-weight:bold;
			padding:0px 2px 0 0px;
			overflow: hidden;
			box-sizing: border-box;
		}
		.wishDonorsTrue{
			background-position: 0px -30px;
			color:white;
			-webkit-filter: drop-shadow(0px 0px 5px orange);
  		filter: drop-shadow(0px 0px 5px orange);
		}
		a.wishDonorsTrue{
			cursor:pointer;
		}
		wishButtons{
			display:flex;
			flex-direction:column;
			justify-content:space-between;
			align-items:center;
			width:130px;
		}
			a.wishBuy{
				font-style: normal;
				display:block;
				font-size:15px;
				border-radius: 4px;
				text-align:center;
				width:100px;
				height:20px;
				color:#fff;
				padding:15px 5px;
				border:1px solid #ddd;
				margin-top:15px;
				text-decoration:none;
				font-weight:bold;
				text-shadow: 0 0px 1px #ff9933;
				transition: text-shadow 0.3s, color 0.3s, background 0.3s, border-color 0.3s;
				background: #fec84e;
			}
			a.wishBuy:hover{
				border-color:#FBC27D;
				color:white;
				text-shadow: 0 1px 1px #F7941D;

			}
		a.wishBought{
			display:block;
			color:royalblue;
			background:none;
			font-size:13px;
			margin-bottom:15px;
		}
			a.wishBought:hover{
				text-decoration: underline;
			}
			*/
}



/* \- WISH */