@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');





.cardsCatalog {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
   
}



.cardCatalog--2 .card__img, .cardCatalog--2 .card__img--hover {
    background-image: url('https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
}

.card__like {
    width: 18px;
}

.card__clock {
    width: 15px;
  vertical-align: middle;
    fill: #fff;
}
.card__time {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    vertical-align: middle;
    margin-left: 5px;
}

.card__clock-info {
    float: right;
}

.card__img {
  
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 235px;
  border-top-left-radius: 12px;
border-top-right-radius: 12px;
  
}

.card__info-hover {
    position: absolute;
    padding: 16px;
  width: 100%;
  opacity: 0;
  top: 0;
}

.card__img--hover {
  transition: 0.2s all ease-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
  position: absolute;
    height: 205px;
  border-top-left-radius: 12px;
border-top-right-radius: 12px;
top: 0;
  
}
.cardCatalog {
  margin-right: 25px;
  transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
  background-color: #fff;
    width: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
}
.cardCatalog:hover {
  box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
   
}

.card__info {
z-index: 2;
  background-color: #fff;
  border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
   padding: 16px 24px 24px 24px;
}

.card__category {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 500;
  color: #868686;
}

.card__title {
    margin-top: 5px;
    margin-bottom: 10px;
    font-family: 'Roboto Slab', serif;
    font-size: 17px;
}

.card__by {
    font-size: 12px;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}

.card__author {
    font-weight: 600;
    text-decoration: none;
    color: #AD7D52;
}

.cardCatalog:hover .card__img--hover {
    height: 100%;
    opacity: 0.3;
}

.cardCatalog:hover .card__info {
    background-color: transparent;
    position: relative;
}

.cardCatalog:hover .card__info-hover {
    opacity: 1;
}

.cardLogin {
    background-color: #efefef !important;
}

.login-page, .register-page{

	background-image: url("../../img/fondoLogin.png") !important;
}

.login-card-body, .register-card-body{
    background-color: #efefef !important;
    border-top: 0 !important;
    color: #666 !important;
    padding: 20px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    border-radius: 90px !important;
  
}

.RememberL {
    color: #e3262b;
    margin-left: 3px;
  
}

.fColorNavbar{
    color: #fff !important;
}

.navbarColor {
    background-color: #e42127 !important;
   border-width: 4px !important;
   border-color: #000 !important;
   
}

.proximamenteModuloCons {
    background-color: #fff !important;
}

.rememberCheckbox {
    margin-top: 5px;
    width: 18px;
    border-color: #fff;
}

.note-image-input, .note-image-btn{

	padding-bottom: 30px !important;
}

.sidebar-dark-success .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-success .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #e42127 !important;
    color: #fff !important;
}


.login-box-msg, .register-box-msg {
    margin: 0;
    padding: 0 20px 20px;
    text-align: center;
    font-weight: 700;
    color: #e3262b;
    font-size: 23px;
}

.fondoIconL {
    background-color: #fff;
}

button[aria-label][data-balloon-pos] {
    overflow: visible !important;
}

[aria-label][data-balloon-pos] {
    position: relative !important;
    cursor: pointer !important;
}

.scene {
    width: auto; height: 968px;
    position: relative;
    overflow: hidden;
  
}

.scene img{
    position: absolute;
}

.plane{
    top:500px;left: -550px;
    width: 25%;
    animation: plane-move 30s linear forwards;
    animation-iteration-count: infinite;

}

.os-theme-light>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{
    background: black !important;
    opacity: 30% !important;
    
}


.cloud {
    animation: clouds-move 200s
    linear forwards;
    animation-iteration-count: infinite;
}

.cloud-1 {
    width: 20%;top: 0;left: 600px;
}

.cloud-2{
    width: 15%;top:250px;left:1415px;
}

.cloud-3{
    width: 10%;top:55px;left:1865px;
}

.cloud-4{
    width: 5%;top:250px;left:1515px;
}

.cloud-5{
    width: 10%;top:185px;left:300px;
}

.cloud-6{
    width: 15%;top:585px;left:500px;
}

.cloud-7{
    width: 10%;top:580px;left:1400px;
}

.cloud-8{
    width: 5%;top:600px;left:700px;
}

.city{
    bottom: -3px;width: 70%;
   object-fit: cover;
    align-items: center;
}

@keyframes clouds-move{
    to {
        transform: translateX(-1525px);
    }
}


@keyframes plane-move {
    to {
        transform: translate(2500px, -500px);
    }
}

.plane2{
    visibility: hidden;

}


@media (max-width: 1280px){
    .scene {
        width: auto; height: 800px;
        position: relative;
        overflow: hidden;
      
    }

    .cloud-3{
        width: 10%;top:55px;left:1265px;
    }
    
    .cloud-4{
        width: 5%;top:250px;left:1415px;
    }

    @keyframes plane-move {
        to {
            transform: translate(1600px, -500px);
        }
    }

    .plane2{
        visibility: hidden;
    
    }
}

@media (max-width: 1024px){
    .scene {
        width: auto; 
        position: relative;
        overflow: hidden;
      
    }

    .cloud-3{
        width: 10%;top:55px;left:1065px;
    }
    
    .cloud-4{
        width: 5%;top:250px;left:915px;
    }

    .cloud-8{
        width: 5%;top:400px;left:700px;
    }

    .cloud-7{
        width: 15%;top:580px;left:900px;
    }

    @keyframes plane-move {
        to {
            transform: translate(1600px, -500px);
        }
    }

    .plane{
        top:400px;left: -350px;
        width: 25%;
        animation: plane-move 30s linear forwards;
        animation-iteration-count: infinite;
    
    }

    .plane2{
        visibility: hidden;
    
    }
}

@media (max-width: 912px){
    .scene {
        width: auto; height: 1368px;
        position: relative;
        overflow: hidden;
      
    }

    .plane2{
        visibility: hidden;
    
    }

    .cloud-3{
        width: 10%;top:55px;left:1065px;
    }
    
    .cloud-4{
        width: 5%;top:250px;left:915px;
    }

    .cloud-8{
        width: 5%;top:400px;left:600px;
    }

    .cloud-7{
        width: 15%;top:880px;left:400px;
    }
}

@media (max-width: 820px){
    .scene {
        width: auto; height: 1180px;
        position: relative;
        overflow: hidden;
      
    }


    .cloud-3{
        width: 10%;top:55px;left:1065px;
    }
    
    .cloud-4{
        width: 5%;top:250px;left:915px;
    }

    .cloud-8{
        width: 5%;top:400px;left:600px;
    }

    .cloud-7{
        width: 15%;top:880px;left:400px;
    }


    .plane{
        top:900px;left: -350px;
        width: 35%;
        animation: plane-move 30s linear forwards;
        animation-iteration-count: infinite;
    
    }

    .plane2{
        visibility: visible;
        top:500px;left: -150px;
        width: 35%;
        animation: plane-move2 30s linear forwards;
        animation-iteration-count: infinite;
    
    }

    @keyframes plane-move {
        to {
            transform: translate(1200px, -200px);
        }
    }

    @keyframes plane-move2 {
        to {
            transform: translate(1200px, -600px);
        }
    }
}

@media (max-width: 500px){
    .scene {
        width: auto; height: 896px;
        position: relative;
        overflow: hidden;
      
    }

    .cloud-3{
        width: 20%;top:55px;left:400px;
    }
    
    .cloud-4{
        width: 10%;top:250px;left:300px;
    }

    .cloud-8{
        width: 10%;top:400px;left:200px;
    }

    .cloud-7{
        width: 20%;top:700px;left:100px;
    }


    .plane{
        top:800px;left: -350px;
        width: 35%;
        animation: plane-move 30s linear forwards;
        animation-iteration-count: infinite;
    
    }

    .plane2{
        visibility: visible;
        top:300px;left: -150px;
        width: 35%;
        animation: plane-move2 30s linear forwards;
        animation-iteration-count: infinite;
    
    }

    @keyframes plane-move {
        to {
            transform: translate(1200px, -200px);
        }
    }

    @keyframes plane-move2 {
        to {
            transform: translate(1200px, -600px);
        }
    }
}

@media (max-width: 390px){
    .scene {
        width: auto; height: 844px;
        position: relative;
        overflow: hidden;
      
    }

   
}

@media (max-width: 360px){
    .scene {
        width: auto; height: 740px;
        position: relative;
        overflow: hidden;
      
    }

   
}


@media (max-width: 375px){
    .scene {
        width: auto; height: 667px;
        position: relative;
        overflow: hidden;
      
    }

   
}

.cluster {
    border: 1px solid #fff;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.cluster-listado img:nth-child(1){
    width: 100%;
}