#gallery
{
	.gallery-menu
	{
		@media(min-width:980px)
		{
      button{
        display: none;
      }
			>ul
			{
				>li
				{
					>a
					{
						color:#333;
						&::before
						{
							font-family: "Font Awesome 5 Free";
							font-weight: 900;
							color: #336AEA;
							content: "\f105";
							padding-right:10px;
							line-height: 25px;
							font-size: 15px;
						}
					}
					ul
					{
						display: none;
						padding-left:20px;
					}
					&.active
					{
						>a
						{
							&::before
							{
								content:'\f107';
							}
						}
						ul
						{
							display: block;
						}
					}
					a
					{
						color:#000;
						font-size:16px;
						display: block;
						padding:10px 0;
						letter-spacing: 2px;
					}

				}
				li.active
				{
					>a
					{
						color:$main-color;
					}
				}
			}
		}
		@media(max-width:979px){
			border:1px solid #f1f1f1;
			border-radius:5px;
			margin-bottom:20px;
			display: flex;
			align-items:stretch;
			>ul
			{
				flex:1;
				>li
				{
					display: none;
					&.active
					{
						display: block;
						padding:20px;
						a
						{
							color:#000;
							display: block;
						}
					}
					ul
					{
						display: none;
					}
				}
			}
			button
			{
				width:50px;
				border:0px;
				background-color: rgba(255,255,255,0);
				color:$main-color;
				padding:0px;
				margin:0px;
				cursor: pointer;
			}
			&.active
			{
				display: block;
				position: fixed;
				top:0px;
				left:0px;
				z-index:3000;
				background:rgba(0,0,0,.5);
				width:100%;
				height:100vh;
				overflow-y:auto;
				max-height:100vh;
        margin-bottom:100px;
				>ul
				{
					position: absolute;
					width:calc(100vw - 20px);
					left:10px;
					top:10px;
					padding:50px 5%;
					background:#fff;
					border-radius: 50px;
					>li{
						display: block;
						>a
						{
							color:$main-color;
							font-size:18px;
							padding:0px;
              margin-bottom:20px;
							line-height:30px;
							display: block;
							font-weight:400;
							letter-spacing: 4px;
						}
						&.active
						{
							padding:0px;
						}
						ul
						{
							display: block;
              margin-bottom:10px;
							li
							{
								a
								{
									color:#333;
									font-size:15px;
									display: block;
									margin-bottom:10px;
                  padding:0px;
									font-weight:400;
								}
							}
						}
					}
				}
				button
				{
					position: absolute;
					right:calc(5% + 10px);
					top:calc(5% + 10px);
					width:50px;
					height:50px;
					color:#333;
					&::before
					{
						content:'\f00d';
					}
				}
			}
		}

	}
	.gallery-article
	{
		.article-list
		{
			display: flex;
			flex-wrap:wrap;
			section
			{
				position: relative;
				padding-bottom:30px;
				picture
				{
					display: block;
					margin-bottom:10px;
					img
					{
						display: block;
						width: 100%;
					}
				}
				h2
				{
					margin-bottom:10px;
					font-size:18px;
					line-height:25px;
					letter-spacing: 2px;
				}
				p
				{
					font-size:15px;
					line-height:25px;
					color:#666;
					display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
				}
				.more
				{
					position: absolute;
					bottom:0px;
					right:0px;
					a
					{
						color:$main-color;
					}
				}
			}

		}
		#pagination
	    {
	      display: flex;
	      flex-wrap:wrap;
		  padding-bottom:100px;
	      li
	      {
	        a
	        {
	          display: block;
	          padding:5px 10px;
	          border-radius: 5px;
	          text-align: center;
	          line-height: 20px;
	          color:$main-color;
	        }
	        &.active
	        {
	          a
	          {
	            color:#fff;
	            background:$main-color;
	          }
	        }
	      }
	    }
	}
	@media(min-width:980px)
	{
		display: flex;
		.gallery-menu
		{
			width:20%;
			padding-right:20px;
		}
		.gallery-article
		{
			width:80%;
			padding-left:20px;
			.article-list
			{
				section
				{
					width:calc((100% - 100px) / 3);
					margin:0 20px 40px 20px;
					&:nth-child(3n)
					{
						margin-right:0px;
					}
				}
			}
		}
	}


}