/******* НА КАРТОЧКАХ ЗАМОК. ОТКРЫТЫЙ И ЗАКРЫТЫЙ ОДИН СТИЛЬ  *******/

.lock-img {
  
    position:absolute;
    height: 11%;
    right: 10px;
    top: 12px; 
}



/******* ОФОРМЛЯЕМ КАРТОЧКИ ОТКРЫТЫЕ КУРСЫ *******/


.openCourse {
   display:flex;

}

.openCourse >div  {
  position:relative;
  flex:0 0 calc(100% - 10px);
  height:250px;
  border-radius: 0px;
    background:  linear-gradient(to top, #efe8f2, #d6c2de); 
 /*  background:  linear-gradient(to top, #1053FF, #1FA5FF);  */
  transition:all 0.3s; 
    display:flex;

}

/******* Настраиваем кликабельность карточек *******/

.openCourse-href {
	height: 100%;
    width:100%;
	z-index: 3;
	position: relative;
}

.openCourse>div:hover {
  transform:scale(1.01);
}

/******* Заголовок *******/

.openCourse-Zag {
   font-family: 'Montserrat', sans-serif;
     font-weight: 300;
    font-size: 24px;
   color: #000;
     position:absolute;
  top:20px; 
  margin:auto 20px;
}

/******* Описание *******/

.openCourse-text {
  position:absolute;
  width: 60%;
  top:100px;
   color: #000;
    left:20px;
       font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
}

/******* Изображение *******/
.openCourse-img {
    position:absolute;
    height: 60%;
   right: 20px;
      bottom:20px; 
}

.openCourse-img-vladimir {
    position:absolute;
    height: 85%;
   right: 20px;
      bottom: 0px; 
}

/******* Кнопка *******/
.openCourse-button  {
           font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
  position:absolute;
  bottom:20px; 
   color: #fff;
  z-index:1;
  padding: 8px 30px;
    /******* background-color: #31bf77; *******/
  background-color: #825f90;
    margin-left: 20px;
}

/******* ширина блоков на мобильном *******/

@media (max-width: 760px) {
.openCourse >div {
     flex:0 0 100%;
  }
.container17 {    /******* этот стиль прописывается у контейнера в ГК *******/
  width: 100%!important;
}
}

/******* эффект при клике *******/

.openCourse-href:active {
  opacity: 0.7;
}
/******* анимция при наведении *******/
.openCourse-button {
        overflow: hidden;
}

 .openCourse-button:hover:after {
       content: "";
    background-color: rgba(31, 165, 255, 0.2);
    display: block;
    position: absolute;
    height: 100%;
    width: 40px;
    top: 0px;
    left: -140px;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    -webkit-transition: none;
    transition: none;
        
    webkit-animation: moving 3s ease-in-out infinite;
    -moz-animation: moving 3s ease-in-out infinite;
    -ms-animation: moving 3s ease-in-out infinite;
    -o-animation: moving 3s ease-in-out infinite;
    animation: moving 3s ease-in-out infinite;
   
  
    }

@keyframes moving { 
     30% {  webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);  
       
        }
  
    100% {  webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);  
       
        }
     }


/******* ОФОРМЛЯЕМ КАРТОЧКИ ЗАКРЫТЫЕ КУРСЫ *******/


.closeCourse {
   display:flex;

}

.closeCourse >div  {
  position:relative;
  flex:0 0 calc(100% - 10px);
  height:250px;
  border-radius: 0px;
   /* background:  linear-gradient(to top, #FFDED5, #C5F0F8);  */
   background:  linear-gradient(to top, #f5f5f5, #e3e2e3);
  transition:all 0.3s; 
    display:flex;

}

/******* Настраиваем кликабельность карточек *******/

.closeCourse-href {
	height: 100%;
    width:100%;
	z-index: 3;
	position: relative;
}

.closeCourse>div:hover {
  transform:scale(1.01);
}

/******* Заголовок *******/

.closeCourse-Zag {
   font-family: 'Montserrat', sans-serif;
     font-weight: 300;
    font-size: 24px;
   color: #000;
     position:absolute;
  top:20px; 
  margin:auto 20px;
}

/******* Описание *******/

.closeCourse-text {
  position:absolute;
  width: 60%;
  top:100px;
  color: #000;
    left:20px;
       font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
}

/******* Стоимость *******/

.closeCourse-price {
  position:absolute;
  bottom: 60px; 
  color: #000;
  left:20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;  
  font-weight: 300;
}

.closeCourse-priceRed {
     color: #FF0000; 
}

.closeCourse-priceGreen {
     color: #078D5D;  
}



/******* Изображение *******/
.closeCourse-img {
    position:absolute;
    height: 60%;
   right: 20px;
      bottom:20px; 
}

.closeCourse-img-vladimir {
    position:absolute;
    height: 57%;
   right: 20px;
      bottom: 30px; 
}

/******* Кнопка *******/
.closeCourse-button  {
    
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   font-weight: 400;
   position:absolute;
   bottom:20px; 
   color: #fff;
   z-index:1;
   padding: 8px 30px;
   background-color: #b3b3b3;
   margin-left: 20px;
}

/******* ширина блоков на мобильном *******/

@media (max-width: 760px) {
.closeCourse >div {
     flex:0 0 100%;
  }
.container17 {    /******* этот стиль прописывается у контейнера в ГК *******/
  width: 100%!important;
}
}

/******* эффект при клике *******/

.closeCourse-href:active {
  opacity: 0.7;
}
/******* анимция при наведении *******/
.closeCourse-button {
        overflow: hidden;
}

 .closeCourse-button:hover:after {
       content: "";
    background-color: rgba(255, 255, 255, 0.2);
    display: block;
    position: absolute;
    height: 100%;
    width: 40px;
    top: 0px;
    left: -140px;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    -webkit-transition: none;
    transition: none;
        
    webkit-animation: moving 3s ease-in-out infinite;
    -moz-animation: moving 3s ease-in-out infinite;
    -ms-animation: moving 3s ease-in-out infinite;
    -o-animation: moving 3s ease-in-out infinite;
    animation: moving 3s ease-in-out infinite;
   
  
    }

@keyframes moving { 
     30% {  webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);  
       
        }
  
    100% {  webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);  
       
        }
     }