@import url(https://use.fontawesome.com/releases/v5.8.1/css/all.css);
#ele-side1{
	background: url('../img/bg-texture-white2.jpg');
	background-position: center;
}
#ele-side2{
	background: url('../img/mini_slide1.jpg');
	background-position: center;
}
#ele-side5{
	background: url('../img/img-side1.jpg');
	background-position: center;
}
#ele-side6{
	background: url('../img/img-side2.jpg');
	background-position: center;
}
	.css-slider-wrapper {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: block;
		overflow: hidden;
		height: 100vh;
		width: 100%;
		background: #000;
		/* background: #FFF; */
	}

	/* Slider */
	.slider {
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		align-content: center;
		opacity: 1;
		-webkit-transition: -webkit-transform 3500ms;
		transition: -webkit-transform 3500ms, transform 3500ms;
		-webkit-transform: scale(1);
		transform: scale(1);
		background-size: cover;
	}

	/* each slide background color */
	.slide1 {
		left: 0;
		/* background: #8BC34A; */
		background: url(../img/slide1.jpg);
		background-size: cover;
		background-position: right center;
	}

	.slide2 {
		left: 100%;
		/* background: #FDD835; */
		background: url(../img/slide2.jpg);
		background-size: cover;
		background-position: right center;
	}

	.slide3 {
		left: 200%;
		/* background: #EF5350; */
		background: url(../img/slide3.jpg);
		background-size: cover;
		background-position: right center;
	}

	/* .slide4 {
      left: 300%;
      background: #03A9F4;
  } */
	/* .slider div {
	 text-align: center; 
	} */

	/* Slider inner content */
	.slider h2 {
		color: #FFF;
		font-weight: 900;
		/* text-transform: uppercase; */
		font-size: 3em;
		line-height: 120%;
		opacity: 0;
		-webkit-transform: translateX(500px);
		transform: translateX(500px);
	}

	.contain-rd-btn {
		z-index: 1;
		background: #0C170F !important;
	}

	.slider .btn-slide {
		display: inline-block;
		padding: 5px 50px;
		font-size: 1.4rem;
		line-height: 30px;
		text-decoration: none;
		color: #FFF;
		background: rgba(255, 255, 255, 0.3);
		opacity: 0;
		-webkit-transform: translateX(-500px);
		transform: translateX(-500px);
	}

	.slider h2,
	.slider .btn-slide {
		-webkit-transition: opacity 800ms, -webkit-transform 800ms;
		transition: transform 800ms, opacity 800ms;
		-webkit-transition-delay: 1s;
		/* Safari */
		transition-delay: 1s;
	}

	/* Next and previous button */
	.control {
		position: absolute;
		top: 50%;
		z-index: 55;
		width: 40px;
		height: 40px;
		margin-top: -25px;
	}

	.control label {
		z-index: 0;
		display: none;
		text-align: center;
		line-height: 40px;
		font-size: 40px;
		color: #FFF;
		cursor: pointer;
		opacity: 0.5;
	}

	.control label:hover {
		opacity: 1;
		color: #FFF;
	}

	.next {
		right: 1%;
	}

	.previous {
		left: 1%;
	}

	/* Slider pagination */
	.slider-pagination {
		position: absolute;
		left: 25px;
		display: inline-block;
		background: #0d1c11 !important;
		bottom: 20px;
		height: 10px;
		/* width: 100%; */
		width: 179px;
		z-index: 1000;
		/* text-align: center; */
		border-radius: 12px;
	}

	.slider-pagination label {
		position: relative;
		top: -7px;
		display: inline-block;
		margin: -2px;
		width: 60px;
		height: 10px;
		border-radius: 12px;
		background: transparent;
		/* border: solid 1px rgba(255, 255, 255, 0.4); */
		cursor: pointer;
	}

	/* Slider control active css */
	.slide-radio1:checked~.next .numb2,
	.slide-radio2:checked~.next .numb3,
	.slide-radio3:checked~.next .numb4,
	.slide-radio2:checked~.previous .numb1,
	.slide-radio3:checked~.previous .numb2,
	.slide-radio4:checked~.previous .numb3 {
		display: block;
		z-index: 1
	}

	/* Slider pagination active css */
	.slide-radio1:checked~.slider-pagination .page1,
	.slide-radio2:checked~.slider-pagination .page2,
	.slide-radio3:checked~.slider-pagination .page3

	/* ,.slide-radio4:checked ~ .slider-pagination .page4  */
		{
		background: rgba(255, 255, 255, 1)
	}

	/* css for sliding  effect when you click on control button*/
	.slide-radio1:checked~.slider {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}

	.slide-radio2:checked~.slider {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.slide-radio3:checked~.slider {
		-webkit-transform: translateX(-200%);
		transform: translateX(-200%);
	}

	/* .slide-radio4:checked ~ .slider {
      -webkit-transform: translateX(-300%);
      transform: translateX(-300%);
  } */

	.slide-radio1:checked~.slide1 h2,
	.slide-radio2:checked~.slide2 h2,
	.slide-radio3:checked~.slide3 h2,
	.slide-radio4:checked~.slide4 h2,
	.slide-radio1:checked~.slide1 .btn-slide,
	.slide-radio2:checked~.slide2 .btn-slide,
	.slide-radio3:checked~.slide3 .btn-slide

	/* ,.slide-radio4:checked ~ .slide4 .btn-slide  */
		{
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1
	}

	@media only screen and (max-width: 767px) {
		.slider h2 {
			font-size: 2rem;
			line-height: 2.2rem;
		}

		.slider>div {
			padding: 0 2%
		}

		.control label {
			font-size: 35px;
		}

		.slider .btn-slide {
			padding: 0 30px;
		}
	}

	.navbar-responsive {
		color: #fff;
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0px;
		transform: translate3d(-100%, 0, 0);
		transition: 0.3s all ease-in-out;
		-webkit-transform: translate3d(-100%, 0, 0);
		-moz-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		-o-transform: translate3d(-100%, 0, 0);
	}

	.navbar-responsive:after {
		content: "";
		z-index: -1;
		left: 0;
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.8);
	}

	.navbar-responsive .navbar-responsive__nav {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		list-style: none;
	}

	.navbar-responsive .navbar-responsive__nav .navbar-responsive__link {
		text-align: center;
		letter-spacing: 2px;
	}

	.navbar-responsive .navbar-responsive__nav .navbar-responsive__link a {
		display: block;
		padding: 15px;
		color: #fff;
		text-decoration: none;
	}

	.navbar-responsive .navbar-responsive__nav .navbar-responsive__link a:after {
		top: 50%;
		bottom: 0;
		left: 0;
		background-color: #fff;
	}

	.navbar {
		width: 100%;
		box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.15);
		background: rgba(0, 0, 0, 0.2)
	}

	.navbar .navbar__wrapper {
		width: 100%;
		margin: 0 auto;
	}

	.navbar__menu {
		width: 100%;
		display: flex;
		align-items: center;
		height: auto;
		justify-content: space-between;

	}

	.navbar__nav {
		display: inline-flex;
		/* justify-content: space-between; */
		list-style: none;
	}

	.navbar__brand {
		float: left;
		height: 80px;
		padding: 6px 0px;
	}

	.navbar__brand img {
		max-width: 100%;
	}

	.navbar .navbar__wrapper .navbar__link a {
		padding: 10px 6px;
		color: #fff;
		font-size: 1rem;
		font-weight: 300;
		letter-spacing: 0.02em;
		text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.25);
		text-decoration: none;
	}

	.after-transform a {
		position: relative;
	}

	.after-transform a:after {
		content: "";
		transition: all 0.3s ease;
		position: absolute;
		bottom: -3px;
		left: 0;
		height: 4px;
		width: 100%;
		background-color: #48684a;
		border-radius: 4px;
		transform: scaleX(0) translateZ(0);
		transform-origin: bottom center;
	}

	.after-transform a.active:after,
	.after-transform a:hover:after {
		transform: scaleX(1) translateZ(0);
	}

	/* Icon 3 */
	#nav-icon3 {
		width: 30px;
		height: calc(100%/2);
		position: relative;
		float: right;
		top:-52px;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		-o-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;
		cursor: pointer;
	}

	#nav-icon3 span {
		display: none;
		position: absolute;
		height: 5px;
		width: 100%;
		background: #ffffff;
		border-radius: 9px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: 0.25s ease-in-out;
		-moz-transition: 0.25s ease-in-out;
		-o-transition: 0.25s ease-in-out;
		transition: 0.25s ease-in-out;
	}

	#nav-icon3 span:nth-child(1) {
		top: 0px;
	}

	#nav-icon3 span:nth-child(2),
	#nav-icon3 span:nth-child(3) {
		top: 9px;
	}

	#nav-icon3 span:nth-child(4) {
		top: 18px;
	}

	#nav-icon3.open span:nth-child(1) {
		top: 9px;
		width: 0%;
		left: 50%;
	}

	#nav-icon3.open span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#nav-icon3.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	#nav-icon3.open span:nth-child(4) {
		top: 9px;
		width: 0%;
		left: 50%;
	}
/* 
	#parallax1 {
		background: url(../img/bg-bosque.jpg);
		background-size: cover;
		background-position: fixed !important;
	} */

	@media (max-width: 768px) {
		.navbar__nav {
			display: none !important;
		}

		#nav-icon3 span {
			display: block !important;
		}
	}

	@media (min-width: 768px) {
		.navbar__responsive {
			transform: translate3d(-100%, 0, 0) !important;
		}
	}