// contentX styles

.tpl-article-list{

	.article-list{
		border-top: 1px solid $colorLightBlue;
		article{

			padding: 6rem 3rem 6rem 3rem;
			text-align: center;
			border-bottom: 2px solid white;

			&:nth-child(odd){
				background: $colorBabyBlue;
			}
			&:nth-child(even){
				background: $colorWhite;
			}


			@include media-breakpoint-up(lg){
				height: 100%;
				padding: 10rem 3rem 12rem 3rem;
				border-bottom: none;
			}
			@include media-breakpoint-up(xl){

			}


			.sup-title{
				margin-bottom: 2rem;
			}

			.titleLink {
				@include transition($transition-base);
			}

			h3{
				@include fontFace($bodoni-book);
				@include fontSize(30);
				@include lineHeight(40,30);
				margin-bottom: 1.4rem;
				@include media-breakpoint-up(lg){
					@include fontSize(48);
					@include lineHeight(58,48);
				}
			}
			.text{
				margin-bottom: 2rem;
				@include media-breakpoint-up(lg){
					padding: 0 11rem;
				}

				p{
					@include clearLast;
					@include fontSize(20);
					@include lineHeight(30, 20);
					color: #303c51;
					padding:15px 0px;
				}
			}


		}
	}


	.counter-nav{
		margin-top:20px;
		@include media-breakpoint-down(sm) {  
			padding-right: 10px;
    		padding-left: 10px;
			.row {
    			margin-right: -10px;
				margin-left: -10px;
			}
			div[class^="col"] {
				padding-left: 10px;
				padding-right: 10px;
			}
		}
		a{
			display: block;
			position: relative;
    		height: 100%;
			padding-top: 1rem;
			padding-bottom: 1.7rem;

			@include media-breakpoint-up(lg){
				padding-top: 4.5rem;
				padding-bottom: 5rem;
			}

			.number{
				@include fontSize(36);
				@include lineHeight(44,36);
				@include fontFace($bodoni-book);
				display: block;
				color: #cfe4f4;
				@include media-breakpoint-up(lg){
					@include fontSize(72);
					@include lineHeight(85,72);
				}
			}
			.text{
				@include fontSize(14);
				@include lineHeight(15,14);
				letter-spacing: 4px;
				text-transform: uppercase;
				display: block;
				color: #4095d8;
				@include media-breakpoint-up(lg){
					@include fontSize(14);
					@include lineHeight(16,14);
				}
				@include media-breakpoint-down(xs){
					@include fontSize(12);
					@include lineHeight(16,12);
				}
			}

			&:after{
				display: block;
				position: absolute;
				content: "";
				bottom: -1px;
				width: 0;
				height: 2px;
				background: #4095d8;
				transition: all .3s ease-out;

			}

			&:hover{
				&:after{
					width: 100%;
				}
			}

			&.active{
				&:after{
					// background: linear-gradient(to left, $colorWhite 0%, $colorWhite 50%, #303c51 50%, #303c51 100%);
					background: #303c51;
					width: 100%;
				}
				.number{
					color: $colorDarkBlue;
				}
				.text{
					color: #303c51;
				}
			}
		}
	}

	.article-list__pagination{
		padding:50px 0px;
		.article-list__pagination-p{
			@include fontSize(20);
			color: #cfe4f4;
			padding-top:1.5rem;
			&.allowed{
				color: #64b1ef;
			}
		}
		.article-list__pagination-ul{
			text-align: center;
			padding:0px;

			.article-list__pagination-ul-item{
				@include fontSize(18);
				color: #64b1ef;
				display:inline-block;
				margin:5px;
				width:50px;
				height:50px;
				border-radius:50%;
				line-height:45px;
				cursor: pointer;

				&.active{
					color: #ce1628;
					border:1px solid #cfe4f4;
				}

				&:hover{
					background-color:#eff8ff;
				}
			}
		}
		.article-list__pagination-mobile{
			width:75px;
			height:50px;
			margin:0px auto;
			display:none;
			select{
				width:75px;
				height:50px;
				border-radius:25px;
				border:1px solid #cfe4f4;
				color: #ce1628;
				text-align: center;
				padding:0px 20px;
				outline:none;
				@include fontSize(18);
				@include lineHeight(34, 18);
				margin:0px auto;
			}
		}
	}

}