/* The Modal (background) */


.modal {
  display: none; /* Hidden by default */
  position: absolute !important; /* Stay in place */
  z-index: 1001; /* Sit on top */
  top: 40px !important;
  left: 0;
  margin:0;
  width:100%;
  min-height:330px;
  overflow-x:hidden;
  margin-top: 10px;
}


.modalvuelosyhotel, .modalhotel{
  display: none; /* Hidden by default */
  position: absolute !important; /* Stay in place */
  z-index: 1001; /* Sit on top */
  top: 40px !important;
  left: 0;
  margin:0;
  width:100%;
  min-width:350px;
  min-height:330px;
  overflow-x:hidden;
  margin-top: 10px;
}

/* Modal Content */
.modal-content {
  position: relative;
    margin: auto;
    padding: 0;
    width: 99%;
    /* -webkit-animation-name: animatetop; */
    /* -webkit-animation-duration: 0.4s; */
    /* animation-name: animatetop; */
    /* animation-duration: 0.4s; */
    animation: slideInDown3 0.4s ease;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #cccccc;
    background-color: #ffffff;
}


.personasvuelosyhotel, .personashotel, .personastuviaje{
    display:inline-block;
    width:32%;
}

.personas, .personasactividades{
    display:inline-block;
    width:48%;
}

.personas select{
    width:100%;
    margin:5px;
    border-radius:2px;
    border:1px solid #ffffff;
    height:35px;
    padding:0;
}

#edadesninosvuelos select, #edadesninoshotel select, #edadesninosvuelosyhotel select, #edadesninosactividades select, #edadesninostuviaje select{
    width:20% !important;
    max-width:120px;
    height:35px;
    border:1px solid #ffffff;
    border-radius:2px;
    display:inline-block;
    margin:5px;
    padding:0;
}



/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.modal-header .close {
  color: #c8c3c3 ;
  font-size: 20px;
  font-weight: bold;
  position:absolute !important;
  top:0px !important;
  right:5px !important;
  opacity:0.8;
}

.modal-header .close:hover,
.modal-header .close:focus {
  color: #ff0000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header .closemul {
  color: #c8c3c3 ;
  font-size: 20px;
  font-weight: bold;
  position:absolute !important;
  top:0px !important;
  right:5px !important;
  opacity:0.8;
}

.modal-header .closemul:hover,
.modal-header .closemul:focus {
  color: #ff0000;
  text-decoration: none;
  cursor: pointer;
}


.modal-header {
  padding: 2px 16px;
  background-color: #ffffff;
  color: #000000;
  font-weight: 500;
  margin-bottom:0px;
  text-align:center !important;
}


.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


@media screen and (max-width:560px){


.modal-content {
 	width:99.5%;
	padding-left:0;
	padding-right:0;
	margin:0;	
}


/*
.modal-carrito, .modal{
    width:90%;
}
*/
	
}

 #modal-terminos {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgb(37 36 36 / 70%);
            overflow-x: hidden;
        }

        #modal-terminos-content {
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
            animation: fadeIn 0.5s ease-in-out;
            border-radius: 8px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
            overflow-y: auto;
            overflow-x: hidden;
        }


        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
        
        .btn-close {
            color: #aaa;
            float: right;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .btn-close:hover {
            color: #555;
            background-color: white;
        }
        
        .btn-close:focus {
            box-shadow: none;
        }

        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: #555;
        }

        @media (max-width: 768px) {
            .modal-terminos-content {
                width: 90%;
                left: 44%;
            }

        }

        @media (max-width: 530px) {
            .modal-terminos-content {
                width: 90%;
                left: 44%;
            }

        }