.login-page, .register-page{

	background-color: #3798e6 !important;
}

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

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

	padding-bottom: 30px !important;
}



.login-box-msg, .register-box-msg {
    margin: 0;
    padding: 0 20px 20px;
    text-align: center;
    font-weight: 600;
}

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;
      
    }

   
}


.titleDelivery {
    font-weight: 600;
}


.custom-file-input:lang(en)~.custom-file-label::after{
    content: "Buscar" !important;
}