/*	Default Layout
	92px columns, 24 px gutters, 72 px margins, 1234px total (extra space for scrollbars)
	-------------------------------------------------------------------------------
cols    1    2     3     4     5     6     7     8     9     10     11     12     13
px      68   160   252   344   436   528   620   712   804   896	988    1050   1142 */


   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');



.slider{
  position: relative;
  background: #000116;
  /*background-image: url("../images/rotate/background2.jpg");*/
  width: 100%;
  height: 475px;
  /*margin: 20px;*/
  overflow: hidden;
  border-radius: 5px;
}



.slider .slide{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  -webkit-transition: -webkit-clip-path 0s 8s;
  transition: -webkit-clip-path 0s 8s;
  transition: clip-path 0s 8s;
  transition: clip-path 0s 8s, -webkit-clip-path 0s 8s;
  -webkit-clip-path: circle(0% at 0 50%);
  clip-path: circle(0% at 0 50%);
}



.slider .slide.active{
  -webkit-transition: -webkit-clip-path 2s;
  transition: -webkit-clip-path 2s;
  transition: clip-path 2s;
  transition: clip-path 2s, -webkit-clip-path 2s;
  -webkit-clip-path: circle(150% at 0 50%);
          clip-path: circle(150% at 0 50%);
}



.slider .slide img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}




.slider .slide .info{
    position: absolute;
    background-color: rgba(10,10,10,0.5);
    display: block;
    left: 0px;
    bottom: 00px;
    width: 100%;
}

.slider .slide .info h2{
    color: #fff;
    letter-spacing:normal;
    margin: 10px 0 0 20px;
    padding-bottom: 0;
    border: none;
  font-size: 2em;
  font-weight: 800;
    overflow: visible;
}

.slider .slide .info p{
  font-size: 1em;
  font-weight: 400;
     color: #fff;
    font-family: 'TeXGyreAdventorRegular';
    /*font-size: 18px;*/
    padding-top: 5px;
   padding-bottom: 5px;
    margin-top: 0;
    margin-left: 20px;
}

.navigation{
  height: 475px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: .5;
  transition: opacity 0.5s ease;
}

.slider:hover .navigation{
  opacity: 1;
}

.prev-btn, .next-btn{
  z-index: 999;
  font-size: 2em;
  color: #fff;
  /*background: rgba(255, 255, 255, 0.8);*/
    background-color: rgba(10,10,10,0.5);
  padding: 10px;
  cursor: pointer;
}

.prev-btn{
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.next-btn{
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.navigation-visibility{
  z-index: 1;
  display: flex;
  justify-content: center;
    display: none;
}

.navigation-visibility .slide-icon{
  z-index: 1;
  background: rgba(255, 255, 255, 0.5);
  width: 20px;
  height: 10px;
  transform: translateY(-50px);
  margin: 0 5px 15px;
  border-radius: 2px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
}

.navigation-visibility .slide-icon.active{
  background: #4285F4;
}

@keyframes slide-in {
  
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes slide-out {
    0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
	}
  
}


/*		10 Column Layout: 992px. 
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

@media only screen and (min-width: 992px) and (max-width: 1221px) {

    
}



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    
    .slider{
      height: 280px;
        margin-top: 10px;
    }
    
     .navigation{
      height: 280px;
    }
 
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436   */

@media only screen and (min-width: 480px) and (max-width: 767px) {
   
    .slider{
      height: 225px;
        margin-top: 10px;
    }
    
    .slider .slide .info h2{
        margin: 10px 0 0 20px;
      font-size: 1.5em;
    }

    .slider .slide .info p{
      font-size: .9em;
    }
    
    .navigation{
      height: 225px;
    }
 
}

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 479px) {
    
    .slider{
      height: 150px;
      margin-top: 10px;
    }
    
   .slider .slide .info h2{
        margin: 5px 0 5px 20px;
      font-size: 1em;
    }

    .slider .slide .info p{
      display: none;
    } 
    
    .navigation{
      height: 150px;
    }
    
    
}