/*------------------------------------------------------*/
/* t4ngsfeature
/*------------------------------------------------------*/
#t4ngsfeatures{
  padding: 50px 0;   
  min-height: 700px;
  position: relative;
  background: #f2f2f2;
}
#t4ngsfeatures > .carousel-inner{
  width: 70%;
  left: 75px;
  margin: auto;
  height: 460px;
}
#t4ngsfeatures:hover{
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
#t4ngsfeatures:active{
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
#t4ngsfeatures > .carousel-inner > .item{
  overflow: hidden;
}
#t4ngsfeatures > .carousel-inner > .item > img,
#t4ngsfeatures > .carousel-inner > .item > a > img{
  opacity:0.8;
  width: 100%;
  margin: auto;
}
/*---------- INDICATORS THUMBNAIL CONTROL ----------*/
.t4ngsfeatures_thumbnails > .carousel-indicators{
  top: 50px;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 11%;
  left: 100px;
  right: auto;
  height: 460px;
  overflow-y: auto;
  cursor: s-resize;
  overflow-x: hidden;
  position: absolute;
}
.t4ngsfeatures_thumbnails > .carousel-indicators li{
  width: 100%;
  height: auto;
  border: none;
  display: block;
  text-indent: 0;
  overflow-y: auto;
  position: relative;
  margin: 0 0 20px 0;
  overflow-x: hidden;
  background: transparent;
  border: 10px solid #ffffff;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.t4ngsfeatures_thumbnails > .carousel-indicators li img{
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.t4ngsfeatures_thumbnails > .carousel-indicators .active {
  width: 100%;
  height: auto;
  margin: 0 0 20px 0;
  background: transparent;
  border: 10px solid #ffffff;
}
.t4ngsfeatures_thumbnails > .carousel-indicators li span{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px;
  display: block;
  color: #ffffff;
  font-size: 14px;
  position: absolute;
  text-transform: capitalize;
  font-family: 'Lato', sans-serif;
  -webkit-transition: all 0.6s cubic-bezier(0.3,1,0,1);
  transition: all 0.6s cubic-bezier(0.3,1,0,1);
}
.t4ngsfeatures_thumbnails > .carousel-indicators .active span{
  color: #000000;
  background: rgba(255,255,255,0.9);
}
.t4ngsfeatures_thumbnails > .carousel-indicators li::-webkit-scrollbar {
  width: 2px;
}
.t4ngsfeatures_thumbnails > .carousel-indicators li::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.5);
  -webkit-border-radius: 0;
  border-radius: 0;
}
.t4ngsfeatures_thumbnails > .carousel-indicators::-webkit-scrollbar {
  width: 4px;
}
.t4ngsfeatures_thumbnails > .carousel-indicators::-webkit-scrollbar-thumb {
  background: rgba(146, 165, 195, 0.5);
  -webkit-border-radius: 0;
  border-radius: 0;
}
/*---------- SLIDE CAPTION ----------*/
.t4ngsfeatures_youtube{
  width: 100%;
  height: 460px;
  border: 10px solid #ffffff;
}
.t4ngsfeatures_youtube > iframe{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.featureItemImg
  {
	width: 228px;
    height: 230px;
  }
  
  .charactDisplayImg{
    background-size: 300px 100px;
  }
/*------------------------------------------------------*/
/* RESPONSIVE
/*------------------------------------------------------*/


/*---------- MEDIA iPad Pro 1024px - 1336px ----------*/
@media (min-width: 1366px) and (max-width: 1600px){
  #t4ngsfeatures{
  padding: 50px 0;   
  min-height: 1000px;
  position: relative;
  background: #f2f2f2;
}
#t4ngsfeatures > .carousel-inner{
  width: 70%;
  left: 75px;
  margin: auto;
  height: 460px;
}
#t4ngsfeatures:hover{
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
#t4ngsfeatures:active{
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
#t4ngsfeatures > .carousel-inner > .item{
  overflow: hidden;
}
#t4ngsfeatures > .carousel-inner > .item > img,
#t4ngsfeatures > .carousel-inner > .item > a > img{
  opacity:0.8;
  width: 100%;
  margin: auto;
}
/*---------- INDICATORS THUMBNAIL CONTROL ----------*/
.t4ngsfeatures_thumbnails > .carousel-indicators{
  top: 50px;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 11%;
  left: 100px;
  right: auto;
  height: 460px;
  overflow-y: auto;
  cursor: s-resize;
  overflow-x: hidden;
  position: absolute;
}
.t4ngsfeatures_thumbnails > .carousel-indicators li{
  width: 100%;
  height: auto;
  border: none;
  display: block;
  text-indent: 0;
  overflow-y: auto;
  position: relative;
  margin: 0 0 20px 0;
  overflow-x: hidden;
  background: transparent;
  border: 10px solid #ffffff;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.t4ngsfeatures_thumbnails > .carousel-indicators li img{
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.t4ngsfeatures_thumbnails > .carousel-indicators .active {
  width: 100%;
  height: auto;
  margin: 0 0 20px 0;
  background: transparent;
  border: 10px solid #ffffff;
}
.t4ngsfeatures_thumbnails > .carousel-indicators li span{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px;
  display: block;
  color: #ffffff;
  font-size: 14px;
  position: absolute;
  text-transform: capitalize;
  font-family: 'Lato', sans-serif;
  -webkit-transition: all 0.6s cubic-bezier(0.3,1,0,1);
  transition: all 0.6s cubic-bezier(0.3,1,0,1);
}
.t4ngsfeatures_thumbnails > .carousel-indicators .active span{
  color: #000000;
  background: rgba(255,255,255,0.9);
}
.t4ngsfeatures_thumbnails > .carousel-indicators li::-webkit-scrollbar {
  width: 2px;
}
.t4ngsfeatures_thumbnails > .carousel-indicators li::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.5);
  -webkit-border-radius: 0;
  border-radius: 0;
}
.t4ngsfeatures_thumbnails > .carousel-indicators::-webkit-scrollbar {
  width: 4px;
}
.t4ngsfeatures_thumbnails > .carousel-indicators::-webkit-scrollbar-thumb {
  background: rgba(146, 165, 195, 0.5);
  -webkit-border-radius: 0;
  border-radius: 0;
}
/*---------- SLIDE CAPTION ----------*/
.t4ngsfeatures_youtube{
  width: 100%;
  height: 460px;
  border: 10px solid #ffffff;
}
.t4ngsfeatures_youtube > iframe{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.featureItemImg
  {
	width: 228px;
    height: 230px;
  }
  
  .charactDisplayImg{
    background-size: 300px 100px;
  }
}


/*---------- MEDIA 480px ----------*/
@media only screen and (max-width: 480px){
  #t4ngsfeatures{
    padding: 20px 0;
	/*min-height: 475px;*/
  }
  #t4ngsfeatures > .carousel-inner{
    width: 75%;
    left: 12.5%;
  }
  /*---------- INDICATORS ----------*/
  .t4ngsfeatures_thumbnails > .carousel-indicators{
    left: 0;
	top: 20px;
    width: 24.5%;
  }
  .t4ngsfeatures_thumbnails > .carousel-indicators li{
    margin: 0 0 10px 0;
    border: 1px solid #ffffff;
  }
  .t4ngsfeatures_thumbnails > .carousel-indicators .active{
    margin: 0 0 10px 0;
    border: 1px solid #ffffff;
  }
  .t4ngsfeatures_thumbnails > .carousel-indicators li span{
    padding: 1px;
    font-size: 11px;
  }
  /*---------- SLIDE CAPTION ----------*/
  .t4ngsfeatures_youtube{
    border: 1px solid #ffffff;
  }
  
  .featureItemImg
  {
	width: 100px;
    height: 100px;
  }
  .t4ngsfeatureslayer > div > img{
    width: 90%;
	height: 90%;
  }
}

/*---------- MEDIA 481px - 767px ----------*/
@media (min-width: 481px) and (max-width: 767px){
  #t4ngsfeatures{
    padding: 20px 0;
	/*min-height: 475px;*/
  }
  #t4ngsfeatures > .carousel-inner{
    width: 75%;
    left: 12.5%;
  }
  /*---------- INDICATORS ----------*/
  .t4ngsfeatures_thumbnails > .carousel-indicators{
    left: 0;
	top: 20px;
    width: 24.5%;
  }
  .t4ngsfeatures_thumbnails > .carousel-indicators li{
    margin: 0 0 10px 0;
    border: 3px solid #ffffff;
  }
  .t4ngsfeatures_thumbnails > .carousel-indicators .active{
    margin: 0 0 10px 0;
    border: 3px solid #ffffff;
  }
  /*---------- SLIDE CAPTION ----------*/
  .t4ngsfeatures_youtube{
    border: 3px solid #ffffff;
  }
  
  .featureItemImg
  {
	width: 100px;
    height: 100px;
  }
  
  .t4ngsfeatureslayer > div > img{
    width: 90%;
	height: 90%;
  }
}

/*---------- MEDIA 768px - 991px ----------*/
@media (min-width: 768px) and (max-width: 991px){
  #t4ngsfeatures > .carousel-inner{
    left: 100px;
  }
  /*---------- INDICATORS ----------*/
  .t4ngsfeatures_thumbnails > .carousel-indicators{
    left: 25px;
    width: 20%;
  }
}
/*---------- MEDIA 992px - 1225px ----------*/
@media (min-width: 992px) and (max-width: 1225px){
  /*---------- INDICATORS ----------*/
  .t4ngsfeatures_thumbnails > .carousel-indicators{
    left: 25px;
    width: 16%;
  }
  .featureItemImg
  {
	width: 100px;
    height: 100px;
  }
  .t4ngsfeatureslayer > div > img{
    width: 90%;
	height: 90%;
  }
}


/*******************/
/* t4ngsfeatureslayer
/* Layer Settings
/*******************/

/* 1 - Layer - wrapper */
.t4ngsfeatureslayer {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  display: block;
  position: absolute;
}
/* 2 - Side Image */
.t4ngsfeatureslayer > div:nth-child(1) {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  position: absolute;
  margin: auto 0 auto auto;
}
/* 3 - Outer Container */
.t4ngsfeatureslayer > div:nth-child(2) {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  position: absolute;
  background: #0d0d0d;
  margin: auto auto auto 0;
}
/* 4 - Text Container */
.t4ngsfeatureslayer > div:nth-child(2) > div {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  /*width: 395px;*/
   
  bottom: 100px;
  position: absolute;
}
/* 4 - Text Container */
.t4ngsfeatureslayer > div:nth-child(2) > div > div {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;     
   
  
}

.t4ngsfeatureslayer > div:nth-child(2) > div > div > div {
    /*width: 60%;*/
      	
  }
  
 .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) {
     
      	
  }
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(1) {
          
	  	
  }
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(1) > img {
    width: 82px;
    height: 82px; 	
  }
   
   .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) > text {
    font-size: 18px;	
	
	color:#2698CA;
	font-family:sans-serif;
	/*font-weight:bold;*/
	  	
  }
   .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) > p {
    font-size: 14px;
	color:#fff;
	font-family:sans-serif;
	font-weight:bold;
	 
  }
  
  
/* 5 - Heading - ( Design High Quality Slideshow Maker ) */
.t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(1) {
  color: #fff;
  margin: auto;
  display: block;
  font-size: 37px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.9px;
  font-family: 'Poppins', sans-serif;
}
/* 6 - Paragraph - ( Alienum phaedrum torquatos nec eu,... ) */
.t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(2) {
  color: #fff;
  margin: auto;
  display: block;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -.4px;
  font-family: 'Arimo', sans-serif;
}
.t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(2) > p {
  color: #fff;
  margin: auto;
  display: block;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -.4px;
  font-family: 'Arimo', sans-serif;
}
/* 7 - Button - ( get in touch ) */
.t4ngsfeatureslayer > div:nth-child(2) > div > a {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-top: 26px;
  padding: 11px 41px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  border: 2px solid #fff;
  text-transform: uppercase;
  border-radius: 33px;
  -webkit-border-radius: 33px;
  font-family: 'Poppins', sans-serif;
  transition: background .2s ease, color .2s ease, border .2s ease;
  -webkit-transition: background .2s ease, color .2s ease, border .2s ease;
}
/* 8 - Button - hover - ( get in touch ) */
.t4ngsfeatureslayer > div:nth-child(2) > div > a:hover {
  color: #fff;
  background: #2b99cc;
  border-color: #2b99cc;
}

/******************/
/* Responsiveness */
/******************/

/*----- When the screen size gets = 768px and < 992px -----*/
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Side Image */
  .t4ngsfeatureslayer > div:nth-child(1) {
    width: 50%;
  }
  .t4ngsfeatureslayer > div > img{
    width: 100%;
	height: 100%;
  }
  /* Outer Container */
  .t4ngsfeatureslayer > div:nth-child(2) {
    width: 50%;
  }
  /* Text Container */
  .t4ngsfeatureslayer > div:nth-child(2) > div {
    /*width: 325px;
    height: 183px;*/
	top: 0;
  left: 0;
  right: 0;
  margin: auto;
  /*width: 395px;*/
   
  bottom: 100px;
  position: absolute;
  }
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div {
 /* width: 325px;
    height: 183px;
	*/
	
	 top: 0;
  left: 0;
  right: 0;
  margin: auto; 
}

 .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) {
     	
  }
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(1) {
    	
  }
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(1) > img {
    width: 72px;
    height: 72px; 	
  }
   
   .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) > text {
    font-size: 14px;	
	
	color:#2698CA;
	font-family:sans-serif;
	/*font-weight:bold;*/
	  	
  }
   .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) > p {
    font-size: 12px;
	color:#fff;
	font-family:sans-serif;
	font-weight:bold;
	 
  }
  
  /* Heading - ( Design High Quality Slideshow Maker ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(1) {
    font-size: 24px;
  }
  /* Paragraph - ( Alienum phaedrum torquatos nec eu,... ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(2) {
    font-size: 16px;
  }
  
  .featureItemImg
  {
	width: 100px;
    height: 100px;
  }
  
  .charactDisplayImg{
    background-size: 300px 100px;
  }
}

/*----- When the screen size gets = 576px and < 768px -----*/
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Side Image */
  .t4ngsfeatureslayer > div:nth-child(1) {
    width: 50%;
  }
  /* Outer Container */
  .t4ngsfeatureslayer > div:nth-child(2) {
    width: 50%;
  }
  /* Text Container */
  .t4ngsfeatureslayer > div:nth-child(2) > div {
   /* width: 235px;
    height: 170px;
    bottom: 125px;*/
	
	top: 0;
  left: 0;
  right: 0;
  margin: auto;
  /*width: 395px;*/
   
  bottom: 100px;
  position: absolute;
  }
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div {
  /*width: 235px;
    height: 170px;
    bottom: 125px;
	*/
	 top: 0;
  left: 0;
  right: 0;
  margin: auto; 
}

 .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) {
      	
  }
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(1) {
   /* width: 270px;       
	text-align: center; 
*/	
  }
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(1) > img {
    width: 42px;
    height: 42px; 	
  }
   
   .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) > text {
    font-size: 14px;	
	
	color:#2698CA;
	font-family:sans-serif;
	/*font-weight:bold;*/
	  	
  }
   .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) > p {
    font-size: 12px;
	color:#fff;
	font-family:sans-serif;
	font-weight:bold;
	 
  }
  /* Heading - ( Design High Quality Slideshow Maker ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(1) {
    font-size: 16px;
  }
  /* Paragraph - ( Alienum phaedrum torquatos nec eu,... ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(2) {
    font-size: 12px;
  }
  /* Button - ( get in touch ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > a {
    font-size: 12px;
    margin-top: 15px;
    padding: 10px 30px;
  }
  
  .featureItemImg
  {
	width: 100px;
    height: 100px;
  }
}

/*----- When the screen size gets = 273px and < 576px -----*/
@media (min-width: 273px) and (max-width: 575.98px) {
  /* Side Image */
  .t4ngsfeatureslayer > div:nth-child(1) {
    width: 0%;
  }
  /* Outer Container */
  .t4ngsfeatureslayer > div:nth-child(2) {
    width: 100%;
	background: rgba(13,13,13,.8);
  }
  /* Text Container */
  .t4ngsfeatureslayer > div:nth-child(2) > div {
   /* width: 270px;
    height: 185px;
    bottom: 100px;
	text-align: center;*/

top: 0;
  left: 0;
  right: 0;
  margin: auto;
  /*width: 395px;*/
   
  bottom: 100px;
  position: absolute;	
	
  }
  .t4ngsfeatureslayer > div:nth-child(2) > div > div {
    /*width: 270px;
    height: 185px;
    bottom: 100px;
	text-align: center; 
	*/
  }
   
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) {
/*   
   width: 270px;
    height: 185px;    
	text-align: center;*/ 	
  }
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(1) {
    /*width: 270px;       
	text-align: center; 
*/	
  }
  
  .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(1) > img {
    width: 36px;
    height: 36px; 	
  }
   
   .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) > text {
    font-size: 14px;	
	
	color:#2698CA;
	font-family:sans-serif;
	/*font-weight:bold;*/
	  	
  }
   .t4ngsfeatureslayer > div:nth-child(2) > div > div > div:nth-child(2) > p {
    font-size: 12px;
	color:#fff;
	font-family:sans-serif;
	font-weight:bold;
	 
  }
  
  /* Heading - ( Design High Quality Slideshow Maker ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(1) {
    font-size: 14px;
  }
  /* Paragraph - ( Alienum phaedrum torquatos nec eu,... ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(2) {
    font-size: 12px;
  }
  /* Button - ( get in touch ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > a {
    font-size: 12px;
    margin-top: 15px;
    padding: 10px 30px;
  }
  
  .featureItemImg
  {
	width: 100px;
    height: 100px;
  }
  
  .t4ngsfeatureslayer > div > img{
    width: 90%;
	height: 90%;
  }
}

/*----- When the screen size gets <= 272px -----*/
@media (max-width: 272.98px) {
  /* Side Image */
  .t4ngsfeatureslayer > div:nth-child(1) {
    width: 50%;
  }
  /* Outer Container */
  .t4ngsfeatureslayer > div:nth-child(2) {
    width: 50%;
	background: rgba(13,13,13,.8);
  }
  /* Text Container */
  .t4ngsfeatureslayer > div:nth-child(2) > div {
    /*width: 190px;
    bottom: 70px;
    height: 167px;
	text-align: center;
	*/
	
	top: 0;
  left: 0;
  right: 0;
  margin: auto;
  /*width: 395px;*/
   
  bottom: 100px;
  position: absolute;
  }
  /* Heading - ( Design High Quality Slideshow Maker ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(1) {
    font-size: 12px;
  }
  /* Paragraph - ( Alienum phaedrum torquatos nec eu,... ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > span:nth-child(2) {
    font-size: 10px;
  }
  /* Button - ( get in touch ) */
  .t4ngsfeatureslayer > div:nth-child(2) > div > a {
    font-size: 11px;
    margin-top: 10px;
    padding: 10px 25px;
  }
  
   .featureItemImg
  {
	width: 100px;
    height: 100px;
  }
  
  .t4ngsfeatureslayer > div > img{
    width: 90%;
	height: 90%;
  }
}