#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;
				>ul
				{
          margin-bottom:100px;
					position: absolute;
					width:calc(100vw - 20px);
					left:10px;
					top:10px;
					padding:50px 20px 100px 20px;
					background:#fff;
					border-radius: 50px;
					>li{
						display: block;
						>a
						{
							color:#000;
							font-size:20px;
							padding:0px;
              margin-bottom:20px;
							line-height:30px;
							display: block;
							font-weight:400;
							letter-spacing: 4px;
						}
						&.active
						{
							padding:0px;
						}
						ul
						{
							display: block;
							li
							{
								a
								{
									color:#666;
									font-size:16px;
									display: block;
									margin-bottom:20px;
                  padding:0px;
									font-weight:400;
								}
							}
						}
					}
				}
				button
				{
					position: absolute;
					right:30px;
					top:30px;
					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:300px;
			padding-right:20px;
		}
		.gallery-article
		{
			width:calc(100% - 300px);
			padding-left:20px;
			.article-list
			{
				section
				{
					width:calc((95% - 20px) / 3);
					margin:0 1.25% 2.5% 1.25%;
					&:nth-child(3n)
					{
						margin-right:0px;
					}
				}
			}
		}
	}
  @media(max-width:979px)
  {
    .gallery-article
		{
			.article-list
			{
        display: flex;
				section
				{
					width:calc(50% - 5px);
					margin:0 5px 40px 5px;
					&:nth-child(2n)
					{
						margin-right:0px;
					}
          &:nth-child(2n + 1)
          {
            margin-left:0px;
          }
          h2
          {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
				}
			}
		}
    @media(max-width:767px)
    {
      .gallery-article
      {
        .article-list
        {
          section
          {
            h2
            {
              font-size:15px;
              line-height:20px;
              margin-bottom:10px;
            }
            p
            {
              font-size:13px;
              line-height:20px;
            }
            .more
            {
              a
              {
                font-size:13px;
              }
            }
          }
        }
      }

    }
  }


}