.main{
	overflow: hidden;

	display: grid;
	grid-template-columns: 0.8fr minmax(40%, 40%) 0.8fr;
	grid-template-rows: auto;
	grid-auto-columns: 1fr;
	grid-auto-rows: 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
}

	.welcome{
		display: block;
		width: 100%;
		padding: 9rem 3rem;
		background-image: linear-gradient(
			var(--brown-3) 20%,
			var(--white) 80%
		);
		text-align: center;
		border-radius: 0.6rem;
		box-shadow: 0.1rem 0.1rem 0.4rem var(--brown-2);
		border: 0.1rem solid var(--brown-2);
	}

		.welcome > h1{
			font-size: 1.9rem;
			font-family: "Arial";
			font-weight: bold;
			color: var(--brown1);
			letter-spacing: 0.1rem;
			text-shadow: 0 0.3rem 0.3rem rgba(255,255,255,0.8);
		}
		
		.welcome > span{
		    display: inline-block;
		    margin-top: 1rem;
		    font-size: 1.3rem;
		    color: var(--brown1);
		}

	.content-title{
		margin: 2rem 0;
		text-align: center;
	}.content-title > h3{
		font-size: 1.9rem;
		color: var(--gray-1);
		letter-spacing: 0.2rem;
		text-shadow: 0 0 1rem var(--white);
	}

	.items{
		background-color: var(--white);

		align-self: stretch;
	}.items-fixed{
		position: fixed;
		top: 12rem;
		display: inline-block;
		width: 28%;
	}

		.cont-items{
			padding: 1rem 2rem;
		}

		.item{
			margin: 0.6rem 0;
		}

			.item figure{
				vertical-align: top;
			}

				.item figure picture{
					display: block;
					position: relative;
					min-width: 6rem;
					min-height: 6rem;
					max-width: 6rem;
					max-height: 6rem;
					border: 0.2rem solid var(--gray);
					border-radius: 0.6rem;
				}

				/* ===--- Note ---===  */
				picture[note=""]::before{
					content: '';
					position: absolute;
					top: 0.9rem; left: 1rem;
					padding: 2rem 1.6rem;
					background-color: transparent;
					border: 0.2rem solid var(--gray-1);
					border-radius: 0.6rem;
				}picture[note=""]::after, 
				picture[note=""] span, 
				picture[note=""] span::before, 
				picture[note=""] span::after{
					content: '';
					position: absolute;
					top: 2.2rem; left: 1.7rem;
					padding: 0.1rem 1rem;
					background-color: var(--gray-1);
				}picture[note=""] span{
					top: 2.9rem;
				}picture[note=""] span::before{
					left: 0;
					top: 0.7rem;
				}picture[note=""] span::after{
					display: inline-block;
					left: 0.3rem;
					top: -2.6rem;
					padding: 0.6rem;
					background-color: transparent;
					border-top: 0.2rem solid var(--gray-1);
					border-right: 0.2rem solid var(--gray-1);
					border-bottom: 0.2rem solid transparent;
					border-left: 0.2rem solid transparent;					
					border-radius: 50%;
					transform: rotate(-45deg);
				}

				/* ===--- Clock ---=== */
				picture[clock=""]::before, picture[clock=""]::after{
					content: '';
					display: inline-block;
					position: absolute;
					top: 1.4rem; left: 1.2rem;
					padding: 1.3rem;
					background-color: transparent;
					border: 0.2rem solid var(--gray-1);
					border-radius: 50%;
				}picture[clock=""]::after{
					top: 2.4rem;
					left: 2.2rem;
					padding: 0.3rem;
					background-color: var(--gray-1);
				}picture[clock=""] span::before, picture[clock=""] span::after{
					content: '';
					position: absolute;
					top: 0.6rem; left: 2.6rem;
					padding: 1.3rem 0.1rem;
					background-color: var(--gray-1);
				}picture[clock=""] span::after{
					display: inline-block;
					top: 1.4rem; left: 3.2rem;
					padding: 1rem 0.1rem;
					transform: rotate(45deg);
				}

				/* ===--- Clock 1 ---=== */
				picture[clock1=""] b{
					position: absolute;
					top: 2.9rem; left: 1.7rem;
					z-index: 3;
					padding: 1rem 1.6rem;
					background-color: var(--white);
					border: 0.2rem solid var(--gray-1);
					border-radius: 0.6rem;
				}picture[clock1=""] b::before, picture[clock1=""] b::after{
					content: '1';
					position: absolute;
					top: 0; left: 0.5rem;
					color: var(--gray-1);
					font-size: 1.6rem;
					font-family: "IbmPlexMono";
				}picture[clock1=""] b::before{
					content: '2';
					left: 1.7rem;
				}

			.item figure, .item figcaption{
				display: inline-block;
			}

				.item-text > p{
					color: var(--black);
					font-size: 1.4rem;
					font-weight: bold;
					letter-spacing: 0.1rem;
					user-select: none;
				}

				.item-button{
					padding: 0.6rem;
				}.item-button a{
					text-decoration: none;
				}.item-button input{
					display: inline;
					width: auto;
					padding: 0.3rem 0.6rem;
					border: none;
					background-color: #00A2FF;
					font-size: 1.3rem;
					font-family: "RobotoThin";
					font-weight: bold;
					color: var(--white);
					letter-spacing: 0.1rem;
					border-radius: 0.3rem;
					box-shadow: 0 0.1rem 0.3rem #0C95E0;
					cursor: pointer;
				}

	.main-aside, .main-aside-1, .main-content{
		padding: 1rem;
	}

		.main-aside-1 form, .items, .card{
			background-color: var(--white);
			border-radius: 0.6rem;
			box-shadow: 
				0 -0 0 var(--black),
				0.1rem 0 0.3rem rgba(0,0,0,0.1),
				0 0.1rem 0.4rem rgba(0,0,0,0.2),
				-0.1rem 0 0.3rem rgba(0,0,0,0.1);
		}.card{
			background-color: var(--white);
			margin: 2rem 0;
		}

			.card-header{
				text-align: center;
				padding: 1rem 0;
				border-bottom: 0.1rem solid var(--gray-1);
			}.card-header > h4{
				font-size: 1.6rem;
				letter-spacing: 0.1rem;
			}

			.card-body{
				padding: 2rem;
			}.card-body p{
				font-size: 1.6rem;
				font-family: "RobotoThin";
				font-weight: bold;
				line-height: 2.6rem;
				margin: 1rem 0;
				text-align: left;
			}

			.main-aside-1 .form-body > label{
				margin: 1rem 0;
				display: block;
				text-align: center;
			}

				.form-header, .items-header{
					padding: 1.3rem 1rem;
					border-bottom: 0.1rem solid var(--gray-1);
					color: var(--black);
				}

					.form-header > h3, .items-header > h3{
						letter-spacing: 0.1rem;
						font-family: "Arial";
						font-size: 1.6rem;
						font-weight: bold;
						user-select: none;
					}

				.main-aside-1 .form-body > label span{
					color: var(--gray);
					letter-spacing: 0.1rem;
					font-size: 1.3rem;
					user-select: none;
				}.main-aside-1 .form-body > label input{
					display: block;
					width: 80%;
					margin: 0.3rem auto;
					border-radius: 0.6rem;
					border: 0.1rem solid var(--gray-1);
					padding: 1.3rem 0.6rem;
					font-size: 1.4rem;
					letter-spacing: 0.1rem;
					background-color: #F7F7F7;
				}

				.check{
					cursor: pointer;
				}

				.main-aside-1 .form-body > label > input[type="checkbox"]{
					display: inline !important;
					width: 10%;
				}

			.main-aside-1 .form-footer > div{
				text-align: center;
				padding-bottom: 1rem;
			}

	.window-publication{
		display: block;
		width: 100%;
		background-color: var(--white);
		border-radius: 0.6rem;
		box-shadow: 0.1rem 0.3rem 0.3rem rgba(0,0,0,0.1);
	}
	
	    .text-open, .response-comment{
	        display: block;
	        padding: 1rem 2rem;
	        border-radius: 30rem;
	        background-color: #E4E7E8;
	        color: var(--gray);
	        width: 100%;
	        user-select: none;
	        cursor: text;
	    }.response-comment{
	        display: inline-block;
	        width: 35%;
	        margin-bottom: 1.6rem;
	    }

		.publication{
			padding: 1rem;

			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
		}

			.publication-text{
				display: block;
				width: 100%;
			}

			.publication-picture{
				min-width: 4.2rem;
				min-height: 4.2rem;
				max-width: 4.2rem;
				max-height: 4.2rem;
				border: 0.1rem solid var(--gray-1);
				overflow: hidden;
				border-radius: 50%;
				margin-right: 0.6rem;
			}.publication-text input{
				width: 100%;
				padding: 1rem 1.6rem;
				font-size: 1.4rem;
				letter-spacing: 0.1rem;
				border: none;
				border-radius: 30rem;
				background-color: #E4E7E8;
			}

	.comment{
		width: 100%;
		max-width: 100%;
		padding: 1rem;
		background-color: var(--white);
		box-shadow: 0.2rem 0.2rem 0.3rem rgba(0,0,0,0.1);
		border-radius: 0.3rem;
		margin: 1.9rem 0;
	}

		.comment > h3{
			text-align: center;
			font-size: 2rem;
			letter-spacing: 0.1rem;
			color: var(--gray-1);
			user-select: none;
		}

		.comment-header{
			position: relative;
			padding: 1rem 0;
			border-bottom: 0.1rem solid var(--gray-1);

			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
		}

			.comment-header img{
				border-radius: 50%;
			}

			.comment-header span{
				display: inline-block;
				font-size: 1.6rem;
				font-weight: bold;
				letter-spacing: 0.1rem;
				margin-left: 1rem;
			}

			#idBtnComment{
				position: absolute;
				top: 0; right: 0;
				padding: 0.3rem 1rem;
				cursor: pointer;
				border: none;
				border-radius: 0.3rem;
				background-color: var(--brown-2);
				color: var(--white);
			}#idBtnComment:hover{
				background-color: var(--brown-1);
			}.sub-message{
				display: inline-block;
				position: absolute;
				top: 2.6rem; right: 0;
				padding: 0 3.3rem;
				background-color: var(--white);
				box-shadow: 0.3rem 0.3rem 0.3rem rgba(0,0,0,0.1);
				border: none;
				transition: 0.4s all ease;
				opacity: 0;
				visibility: hidden;
			}.sub-message.visible{
				opacity: 1;
				padding: 3rem 3.3rem;
				visibility: visible;
			}

				.btn-comment{
					display: block !important;
					margin: 1rem 0;
					color: var(--brown-2);
					cursor: pointer;
				}.btn-comment:hover{
					color: var(--brown-1);
				}

		.comment-body{
			padding: 2rem 0;
			overflow: hidden;
		}

			.comment-body p{
				text-overflow: ellipsis;
			}

		.comment-footer{
			padding: 0.6rem 0;
			text-align: left;
			user-select: none;
		}.comment-footer time{
			display: inline-block;
			font-size: 1.3rem;
			color: var(--gray-1);
		}

		.comment-ump{
			visibility: hidden;
		}

		.cont-sub-comments > div{
			padding: 0.3rem;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: nowrap;
			align-items: flex-start;
		}.cont-sub-comments > div > picture{
			position: relative;
			display: block;
			align-self: stretch;
		}.cont-sub-comments picture img{
			position: relative;
			top: -1rem;
			display: inline-block;
			width: 4rem; height: 4rem;
			margin-right: 1rem;
			border-radius: 50%;
		}.cont-sub-comments > div > div{
			width: 60%;
			background-color: #F0F2F5;
			padding: 0.6rem;
			margin: 0.6rem 0;
			border-radius: 0 0.6rem 0.6rem 0.6rem;
			user-select: text;
		}.cont-sub-comments > div > div > div p{
			overflow: hidden;
		}#idSubComment{visibility: hidden;}.cont-sub-comments div time{
			font-size: 1.1rem;
			color: var(--gray-1);
		}.cont-sub-comments div h3{
			font-size: 1.4rem;
			letter-spacing: 0.1rem;
			line-height: 3rem;
		}.header-sub-comment{
			position: relative;
		}

		.message-hidden-response{
			position: absolute;
			top: 0; right: 4rem;
			padding: 0 3.6rem;
			background-color: var(--white);
			box-shadow: 0.1rem 0.1rem 0.3rem rgba(0,0,0,0.1);
			visibility: hidden;
			opacity: 0;
			transition: 400ms all ease;
		}.message-hidden-response.visible{
			padding: 3rem 3.6rem;
			opacity: 1;
			visibility: visible;
		}.message-hidden-response > span{
			display: block;
			margin: 1rem 0;
			color: var(--brown-2);
			user-select: none;
			font-weight: bold;
			letter-spacing: 0.1rem;
			cursor: pointer;
		}.message-hidden-response > span:hover{
			color: var(--brown-1);
		}.header-sub-comment > span{
			position: absolute;
			top: 0; right: 0;
			padding: 0.2rem 1rem;
			background-color: var(--brown-2);
			border-radius: 0.6rem;
			color: var(--white);
			cursor: pointer;
			user-select: none;
		}.header-sub-comment > span:hover{
			background-color: var(--brown-1);
		}

@media screen and (max-width: 990px){
	.main{
		grid-template-columns: repeat(2, minmax(50%, 50%));
		grid-template-rows: auto;
		grid-auto-columns: 1fr;
		grid-auto-rows: auto;
	}

		.main-content{
			grid-column: 1 / 3;
			grid-row: 1 / 2;
		}

		.comment{
			width: 70%;
			margin: 1.9rem auto;
		}
}

@media screen and (max-width: 700px){
	.comment{width: 90%;}
}

@media screen and (max-width: 500px){
	.main{
		grid-template-columns: minmax(100%, 100%);
		grid-template-rows: auto;
		grid-auto-columns: 1fr;
		grid-auto-rows: auto;
	}

		.main-content{
			grid-column: 1 / 2;
		}

	.comment{width: 100%;}
}

@media screen and (max-width: 430px){
	.response-comment{
		display: block;
		width: 100%;
		margin-bottom: 1rem;
	}

	.comment-footer > time{
		text-align: center;
		margin-bottom: 3rem;
	}
}

@media screen and (max-width: 400px){
	.cont-sub-comments > div > div{width: 100%;}
}