/* Primary Style
--------------------------------*/
.main-slider {max-width: 110rem; margin: 0 auto;}

@media screen and (max-width: 800px) {
/*	header ul li:not(:nth-child(4)) {display: none;}
	header ul li:nth-child(4) {width: 100%;}*/
}

/* Slider Style
--------------------------------------*/
.cd-slider {position: relative; width: 100%; height: 560px; overflow: hidden; margin: 120px 0 40px;}

.cd-slider li {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: visibility 0s 1s; will-change: visibility;}
.cd-slider .image {
	position: absolute;	top: 0;	right: 0; width: 65%; height: auto; background-size: cover; background-position: 50% 50%;
	clip: rect(0, 80rem, 50rem, 80rem); transition: clip .5s cubic-bezier(0.99, 0.01, 0.45, 0.9) .5s; will-change: clip;}
.cd-slider .content {
	position: absolute; top: 0; left: 0; width: 35%; height: 100%; font-size: 62px; text-align: left;}
.cd-slider .content h2 {
	font-size: 42px; font-family: Poppins-bold, Hind, sans-serif; text-overflow: ellipsis; overflow: hidden;-webkit-transform: translateY(-30%); 
	transform: translateY(-30%); opacity: 0; transition: opacity .5s, -webkit-transform .5s; transition: transform .5s, opacity .5s;
	transition: transform .5s, opacity .5s, -webkit-transform .5s; will-change: transform, opacity; color: #343435;}
.cd-slider .content .readmore_link {
	display: inline-block; font-size: 20px; text-transform: lowercase; opacity: 0; -webkit-transform: translateY(-100%); 
	transform: translateY(-100%); transition: opacity .5s .1s, -webkit-transform .5s .1s; transition: transform .5s .1s, 
	opacity .5s .1s; transition: transform .5s .1s, opacity .5s .1s, -webkit-transform .5s .1s; will-change: transform, opacity;}
.cd-slider .content .text-blog:hover .readmore_link {color: #41d1c1;}
/* Current Slide 
-------------------------------------*/
.cd-slider li.current {visibility: visible; transition-delay: 0s;}
.cd-slider li.current .image {clip: rect(0, 80rem, 50rem, 0);}
.cd-slider li.current .content h2 {-webkit-transform: translateY(0); transform: translateY(0); opacity: 1; transition-delay: 1s;}
.cd-slider li.current .content a {-webkit-transform: translateY(0); transform: translateY(0); opacity: 1; transition-delay: 1.1s;}

.cd-slider li.current .content .text-blog h2 {transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
.cd-slider li.current .content .text-blog:hover h2 {color: #41d1c1;}

/* Image Slide 
------------------------------------*/
.cd-slider .image_slider {overflow: hidden;}

.hovereffect {
  width: 100%; height: 100%; float: left; overflow: hidden;
  position: relative; text-align: center; cursor: default; background: #41d1c1;}
  .hovereffect .overlay {
  width: 100%; height: 100%; position: absolute; overflow: hidden; top: 30%; left: 0; padding: 50px 20px;}
.hovereffect img {
  display: block; position: relative; max-width: none; width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.hovereffect:hover img {
	opacity: 0.4; filter: alpha(opacity=40); -ms-transform:scale(1.2);
	-webkit-transform:scale(1.2); transform:scale(1.2);}

.hovereffect h2 {
  text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px;
  overflow: hidden; padding: 0.5em 0; background-color: transparent;}
.hovereffect h2:after {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; content: '';
  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}
.hovereffect:hover h2:after {-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.hovereffect a, .hovereffect p {
  color: #FFF; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.9s, -webkit-transform 0.9s;
  transition: opacity 0.9s, transform 0.9s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);}
.hovereffect h2 {color: #FFF; opacity: 0; filter: alpha(opacity=0);}
.hovereffect:hover a, .hovereffect:hover p {
  opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.hovereffect:hover h2 {opacity: 1; filter: alpha(opacity=100);}

/* Prev Slide 
------------------------------------*/
li.prev_slide .image {clip: rect(0, 0, 50rem, 0);}
.nav_arrows {position: absolute; bottom: 0; left: 0; background: #fff; z-index: 2;}
.prev, .next, .counter {vertical-align: middle;}
.prev, .next {position: relative; display: inline-block; height: 30px; width: 50px; border: 0; cursor: pointer; background: transparent;}
.prev::before, .next::before {
	content: ''; position: absolute; top: 50%; left: 0;	-webkit-transform: translateY(-50%); transform: translateY(-50%); 
	border: 4px solid transparent; border-right-width: 10px; border-right-color: #000; border-left-width: 0; width: 0; height: 0;}
.prev::after, .next::after {
	content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%) translateZ(0); 
	transform: translateY(-50%) translateZ(0); left: .5rem; background: #000; height: 1px; min-height: 1px; width: 30px; transition: width .3s;}
.next::before {right: 0; left: auto; border-left-width: 10px; border-left-color: #000; border-right-width: 0;}
.next::after {right: 5px; left: auto;}
.counter {display: inline-block; font-family: Poppins; font-style: italic;}
.counter span { font-size: 18px;}
.counter span:last-child::before {content: '/'; margin: 0 8px;}
.prev:hover::after, .next:hover::after {width: 40px;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  @media (max-width: 1400px) { 
  	.cd-slider {height: 480px; overflow: hidden; margin: 120px 0 40px;}
  }

  @media (max-width: 991px) {
  	.cd-slider .content h2 {font-size: 28px;}
    .cd-slider {height: 340px;}
  }

@media screen and (max-width: 550px) {
	.image {width: 100%;}
	.content {padding-right: 2rem;}
	nav {left: 0; right: auto;}
}


@media (max-width: 768px) {
  	.cd-slider .image {width: 45%;}
  	.cd-slider .content {width: 55%;}
  	.main-slider .content {padding: 0;}
  	.cd-slider {height: 240px;}
  	}

@media (max-width: 480px) {

	.main-slider {display: none;}
	.section-post {
    margin-top: 80px;}