.article-slider {
transition: 0.6s;
opacity: 1;
transform: scale(1);
filter: none;
transition: 0.6s;
text-align:left !important;
}



.article-slider .article-loading-slider {
transform: translateX(-100%);
transition: 1s;
}

article.animation .article-slider {
opacity: 0;
transition-delay: 0.4s;
transform: scale(1.1);
}

article.animation .article-slider .article-loading-slider {
transform: translateX(0);
transition: 1s;
}

.container-article {
position:relative;
width:100%;
}

.container-article{
width:100%;
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto;
}
 
@media (min-width:576px){
.container-article{
max-width:540px
}
}

 @media (min-width:768px){
.container-article{
max-width:720px
}
}

@media (min-width:992px){
.container-article {
max-width:960px
}
}

@media (min-width:1200px){
.container-aricle{
max-width:1140px 
} 
}

/************STYLE INTROTEXT**********/
.article-text-intro {
width: 100%;
line-height: 22px;
color: rgba(215, 215, 215, 0.8);
text-align:left !important;
}

.article-text-intro.marge-30 {
margin-bottom: 30px;
text-align:left !important;
}

.marge-20 {
margin-bottom: 20px;
text-align:left !important;
}

/************STYLE TITLE H1**********/
h1 .border-text {
line-height: 84px;
font-weight: 900;
position: relative;
margin: 0;
padding: 0;
font-weight: 800;
text-align:left !important;
}

 .border-text {
letter-spacing: 0;
-webkit-text-stroke-width: 2px;
-moz-text-stroke-width: 2px;
color: TRANSPARENT !important;
} 

/***********STYLE CATEGORY***************/
.article-subtitle {
position: relative;
letter-spacing: 2px;
padding-left: 40px;
text-align:left !important;
}

.article-subtitle:before {
content: '';
width: 30px;
height: 3px;
border-radius: 3px;
position: absolute;
left: 0;
top: calc(50% - 4px); 
}

/***********STYLE READ MORE***************/
.article-btn {
cursor: pointer;
position: relative;
text-decoration: none;
border-radius: 3px;
display: inline-block;
border: none;
text-decoration: none;
height: 55px;
margin-right: 10px;
line-height: 55px;
padding: 0 40px;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
color: #e1e1e1;
border: solid 2px #e1e1e1;
background-color: transparent;
transition: 0.4s ease-in-out;
outline: none !important;
text-align:left !important;
}

.article-btn:hover {
color: red;
}

/***********STYLE AUTHOR***************/
.article-btn-text {
cursor: pointer;
position: relative;
text-decoration: none;
border-radius: 3px;
display: inline-block;
border: none;
text-decoration: none;
height: 55px;
margin-right: 10px;
line-height: 55px;
padding: 0 40px;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
color: #e1e1e1;
border: solid 2px #e1e1e1;
background-color: transparent;
transition: 0.4s ease-in-out;
outline: none !important;
text-align:left !important;
}

.article-btn-text:hover {
color: red;
}

.article-btn-text {
border-color: transparent;
padding: 0 20px;
}

/**NAVIGATION LABEL**/
.article-label {
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
line-height: 15px;
padding-top: 3px;
color: rgba(215, 215, 215, 0.8);
}

.article-slider-arrows .article-label {
margin-right: 20px;
color: rgba(215, 215, 215, 0.8);
padding:50px;
}

/* After 768px */
@media (max-width: 768px) {
.h1 .border-text {
font-size: 38px;
line-height: 52px;
letter-spacing: -1px;
-webkit-text-stroke-width: 0;
-moz-text-stroke-width: 0;
-webkit-text-stroke-color: inherit;
-moz-text-stroke-color: inherit;
color: inherit !important;
}

.article-text-intro  {
 font-size: 14px; 
line-height: 20px;
}
}

/* Slider project */
.article-slider-item {
width: 100vw;
min-height: 100%;
height: 100vh;
}

.article-slider-item .article-project-frame {
width: 100%;
height: 100%; 
}

.article-slider-item .article-project-frame .article-cover-frame {
float: right;
width: 80%;
height: 100%;
position: relative;
}

.article-slider-item .article-project-frame .article-cover-frame .article-project-cover {
width: 100%;
height: 100%;
object-fit: cover;
}

.article-slider-item .article-project-frame .article-cover-frame .article-project-cover.article-position-right {
object-position: right;
}

.article-slider-item .article-project-frame .article-cover-overlay {
position: absolute;
z-index: 2;
top: 0;
right: 0;
 background-color: rgba(20, 20, 20, 0.45);   
width: 100%;
height: 100%;
}

.article-slider-item .article-project-frame.article-project-half {
width: 100%;
height: 100%;
background:#141414;

}

.article-slider-item .article-project-frame.article-project-half .article-cover-frame {
float: right;
width: 60%;
height: 100%;
position: relative;
}

.article-slider-item .article-main-title-frame {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
height: 100vh;
width: 100%;

}

.article-slider-item .article-main-title-frame .article-main-title {
width: 100%;
}

.article-slider-item .article-main-title-frame .article-main-title h1 {
text-shadow: 0 0 40px rgba(13, 13, 13, 0.5);
}


/* Slider Project after 992px */
@media (max-width: 992px) {
.article-slider-item .article-project-frame .article-main-title-frame .article-main-title h1 {
font-size: 54px;
line-height: 60px;
}

.article-slider-item .article-project-frame .article-cover-frame {
width: 100%;
}

.article-slider-item .article-project-frame .article-cover-frame .article-project-cover {
object-position: center !important;
}
}

/* Slider Project after 768px */
 @media (max-width: 768px) { 
	
 
.article-slider-item .article-project-frame .article-main-title-frame .article-main-title {
margin:0px 0 0 0 !important; 
padding: 0 40px;

} 

.article-slider-item .article-project-frame .article-main-title-frame .article-main-title h1 {
position: relative;
overflow: hidden;
font-size: 35px !important;
line-height: 2em !important;
font-weight: 900;
letter-spacing: -1px;
margin-top:20px !important;
}

h1 .border-text {
font-size: 25px !important;
line-height: 0.8em !important;
font-weight: 900;
letter-spacing: -1px;
margin-top:10px;
}

}

@media only screen and (min-width: 0px) and (max-width: 767px) {
.article-text-intro,.article-btn-text,.article-btn {
	display:none;
}	
	
.swiper-container {

height:500px !important; 
position:relative;
	
}
	
.article-slider-item .article-project-frame .article-main-title-frame .article-main-title {

margin:0px 0 0 0 !important; 
/* height:00px !important; */
padding: 0 20px;
} 

.article-slider-item .article-project-frame .article-main-title-frame .article-main-title h1 {
position: relative;
overflow: hidden;
font-weight: 900;
letter-spacing: 0px;
}

h1 .border-text {
line-height: 1em !important;
font-weight: 900;
letter-spacing: -1px;
margin-top:10px;
font-size:50px !important;
}


}

/* Slider Navigation */
.article-slider-pagination-frame {
height: 100vh;
position: absolute;
z-index: 9;
top: 0;
width: 100px;
padding: 40px;
right: 0;
display: flex;
align-items: center; 
}

.article-slider-pagination-frame .article-slider-pagination {
margin-bottom: 60px;
width: 20px;
display: flex;
flex-direction: column;
}

.article-slider-pagination-frame .article-slider-pagination .swiper-pagination-bullet {
width: 10px;
margin-left: auto !important;
margin-bottom: 20px !important;
border-radius: 3px;
height: 3px;
opacity: 1 !important;
background-color: #e1e1e1;
transition: 0.3s ease-in-out;
}

.article-slider-pagination-frame .article-slider-pagination .swiper-pagination-bullet:last-child {
margin-bottom: 0 !important;
}

.article-slider-pagination-frame .article-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 20px;
background-color: red;
}

.article-slider-nav-panel {
position: absolute;
z-index: 9;
bottom: 0;
left: 0;
height: 100px;
width: 100vw;
}

.article-slider-progress-bar-frame {
display: flex;
align-items: center;
height: 100px;
width: 25vw;
}

.article-slider-progress-bar-frame .article-slider-progress-bar {
display: flex;
height: 3px;
width: 100%;
}

.article-slider-progress-bar-frame .article-slider-progress-bar .article-progress {
position: relative;
height: 3px;
border-radius: 3px;
background: rgba(225, 225, 225, 0.1);
width: 100%;
clear: both;
opacity: 0;
bottom: 0;
left: 0;
right: 0;
}

.article-slider-progress-bar-frame .article-slider-progress-bar .article-progress:after {
position: absolute;
top: 0;
left: 0;
background: red;
border-radius: 3px;
height: 100%;
width: 0;
content: "";
}

.article-slider-progress-bar-frame .article-slider-progress-bar.active .article-progress {
opacity: 1;
}

.article-slider-progress-bar-frame .article-slider-progress-bar.animate .article-progress:after {
transition: width linear;
transition-delay: unset;
width: 100%;
transition-duration: 10s;
}

.article-slider-arrows {
position: absolute;
top: 0;
padding: 0 20px 0 40px;
right: 0;
display: flex;
justify-content: flex-end;
align-items: center;
}

.article-slider-arrows .article-button-next, .article-slider-arrows .article-button-prev {
width: 60px;
cursor: pointer;
}

.article-slider-arrows .article-button-next span, .article-slider-arrows .article-button-prev span {
display: block;
width: 20px;
height: 20px;
text-align: center;
}

.article-slider-arrows .article-button-next span i, .article-slider-arrows .article-button-prev span i {
font-size: 20px;
width: 20px;
height: 20px;
color: #e1e1e1;
}

.article-main-title-frame {
width:100%;
}

/* Slider Navigation after 768px */
@media (max-width: 768px) {
.article-slider-pagination-frame, .article-slider-progress-bar-frame {
display: none;
}
.article-slider-arrows {
padding: 0 20px;
}
}

/* Slider Navigation after 590px */
@media (max-width: 590px) {
.article-slider-nav-panel {
height: 80px;
}

.article-slider-pagination-frame, .article-slider-progress-bar-frame,.article-label {
display: none;
}
	
.article-slider-arrows {
background-color: transparent !important;
padding: 0;
justify-content: flex-start;
left:45%;
}
	
.article-slider-arrows .article-button-next, .article-slider-arrows .article-button-prev {
height: 80px;
}

.article-slider-item .article-main-title {
padding-bottom: 80px !important;
}
}

.mry-arrows {
display: flex;
justify-content: center;
flex-direction: column;
}

.mry-arrows .mry-sl-nav {
margin-left: auto;
margin-right: auto;
}

.mry-arrows .mry-sl-nav .mry-next, .mry-arrows .mry-sl-nav .mry-prev {
cursor: pointer;
transition: 0.3s;
width: 60px;
color: #e6e6e6;
}

.mry-arrows .mry-sl-nav .mry-next.swiper-button-disabled, .mry-arrows .mry-sl-nav .mry-prev.swiper-button-disabled {
opacity: 0.3;
pointer-events: none;
}