/*
 Author: Ashfaq Ahmed @ Codeconvey.
 Author URI: http://www.codeconvey.com/
*/
.imgslidersgt{
 max-height: 400px;
 height: 400px;
 width: 100%;
 background-size: cover;
}
#cc-slider {
 text-align: center;
 margin: 0 auto;
 max-width: 850px;
 position:relative;
 margin-bottom: 20px;
}
 
#cc-slider input {
 display: none;
}
 
#cc-slider label, a {
 color: #2c3e4f;
 cursor: pointer;
 text-decoration: none;
}
#cc-slider label:hover {
 color: #2c3e4f !important;
}
 
#slide1:checked ~ #cc-slides .inner { margin-left:0; }
#slide2:checked ~ #cc-slides .inner { margin-left:-100%; }
#slide3:checked ~ #cc-slides .inner { margin-left:-200%; }
#slide4:checked ~ #cc-slides .inner { margin-left:-300%; }
#slide5:checked ~ #cc-slides .inner { margin-left:-400%; }
 
 
#overflow {
 width: 100%;
 overflow: hidden;
}
 
#cc-slides article img {
 width: 100%;
}
 
#cc-slides .inner {
 width: 500%;
 line-height: 0;
}
 
#cc-slides article {
 width: 20%;
 float: left;
 position: relative;
}
 
#controls {
 margin: -60px auto 0 auto;
 width: 114px;
 height: 50px;
 position: relative;
}
 
#controls label { 
 display: none;
 width: 50px;
 height: 50px;
 
}
 
#active {
 margin: 23% 0 0;
 text-align: center;
}
 
#active label {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 display: inline-block;
 width: 10px;
 height: 10px;
 background: #f89e67;
}
 
#active label:hover {
 background: #ccc;
 border-color: #777 !important;
}
 
#controls label:hover {
 opacity: 0.8;
}
 
#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(5), 
#slide5:checked ~ #controls label:nth-child(1) {
 /*background: url('images/next.png') no-repeat;*/
 float: right;
 margin: 0 0 0 0;
 display: block;
 position: relative;
 /*background-color:#fff;
 border-radius: 4px;
 background-position-x: center;
    background-position-y: center;
    border: 1px solid #eee;
    
    border-radius: 6px;*/
}

#slide1:checked ~ #controls label:nth-child(2):before, 
#slide2:checked ~ #controls label:nth-child(3):before, 
#slide3:checked ~ #controls label:nth-child(4):before, 
#slide4:checked ~ #controls label:nth-child(5):before, 
#slide5:checked ~ #controls label:nth-child(1):before {
   position: absolute;
  font-family: "Font Awesome 5 Free";
  font-size: 48px;
  font-weight: 900;
  content: "\f35a";
  width: 48px;
  height: 48px;
   background-color: #fff;
   display: block;
   line-height: 1;
   border-radius: 50%;
}
 
 
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
   float: left;
   margin: 0 0 0 0;
   display: block;
   position: relative;
}
 
#slide1:checked ~ #controls label:nth-child(5):before,
#slide2:checked ~ #controls label:nth-child(1):before,
#slide3:checked ~ #controls label:nth-child(2):before,
#slide4:checked ~ #controls label:nth-child(3):before,
#slide5:checked ~ #controls label:nth-child(4):before {
   position: absolute;
  font-family: "Font Awesome 5 Free";
  font-size: 48px;
  font-weight: 900;
  content: "\f359";
  width: 48px;
  height: 48px;
   background-color: #fff;
   display: block;
   line-height: 1;
   border-radius: 50%;
}
 
 
/* cctooltip Box */
 
.cctooltip {
 
    color: #FFFFFF;
    font-style: italic;
    line-height: 20px;
    margin-top: 250px;
    opacity: 0;
    position: absolute;
    text-align: left;
 -webkit-transform: translateZ(0);
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}
 
.cctooltip h3 {
 margin: 0 0 5px;
 font-style: normal;
 background: none repeat scroll 0 0 #ffffffde;
 padding: 5px;
}

 
 
 
/* cc-slider Styling */
 
#cc-slides {
 margin: 0 0 30px;
 padding: 20px;
 background: #fff;
 border: 1px solid #eee;
 box-shadow: 0 0 7px 0 rgb(0 0 0 / 5%);
 border-radius: 6px;
 
}
 
 
/* Animation */
 
#cc-slides .inner {
 -webkit-transform: translateZ(0);
 -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
 -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
 
 -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
 -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
 
#cc-slider {
 -webkit-transform: translateZ(0);
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease-out;
 -o-transition: all 0.5s ease-out;
 transition: all 0.5s ease-out;
}
 
#controls label{
 -webkit-transform: translateZ(0);
 -webkit-transition: opacity 0.2s ease-out;
 -moz-transition: opacity 0.2s ease-out;
 -o-transition: opacity 0.2s ease-out;
 transition: opacity 0.2s ease-out;
}
 
#slide1:checked ~ #cc-slides article:nth-child(1) .cctooltip,
#slide2:checked ~ #cc-slides article:nth-child(2) .cctooltip,
#slide3:checked ~ #cc-slides article:nth-child(3) .cctooltip,
#slide4:checked ~ #cc-slides article:nth-child(4) .cctooltip,
#slide5:checked ~ #cc-slides article:nth-child(5) .cctooltip {
 opacity: 1;
 -webkit-transition: all 1s ease-out 0.6s;
 -moz-transition: all 1s ease-out 0.6s;
 -o-transition: all 1s ease-out 0.6s;
 transition: all 1s ease-out 0.6s;
}

@media only screen and (max-width: 660px) {
	.imgslidersgt {
		max-height: 300px;
    	height: 300px;
	}
	.cctooltip {
		margin-top: 210px;
	}
}