.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999999999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
	z-index:99999999999999;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #ffffff;
    margin: auto;
    padding: 0;
	padding-bottom:15px;
    border: 1px solid #888;
    width: 80%;
	max-width:450px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
	color:#000;
}

@media (max-width: 760px) {
.modal {
    padding-top: 0px; /* Location of the box */
    overflow: auto; /* Enable scroll if needed */
}
.modal-content {
    width: 100%;
	border: 0px solid #888;
	max-width:none;
}
}

/* 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 */
.close {
    color: #5b7bb3;
    float: right;
	margin:4px;
    font-size: 28px;
    font-weight: bold;
	position: absolute;
    right: 2.5%;
    top: 2px;
	cursor:pointer;
}


.close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #fff;
    color: white;
}

.modal h1 {
    text-transform: uppercase;
    color: #5b7bb3;
    font-size: 20px;
    font-family: "Roboto Condensed", Arial;
	text-align:left;
	float:left;
	width:100%;
	margin-top:10px;
	margin-bottom:10px;
}

.modal h2 {
    text-transform: uppercase;
    color: #5b7bb3;
    font-size: 16px;
    font-family: "Roboto Condensed", Arial;
	text-align:left;
	float:left;
	width:100%;
	margin-top:10px;
	margin-bottom:5px;
}

.modal input[type="text"], .modal select {
    color: #000;
    font-size: 14px;
	text-align:left;
	float:left;
	width:calc(96% - 2px);
	padding:5px 2%;
	border:1px solid #ccc;
	margin-bottom:10px;
}

#inicio .modal input[type="text"] {
	width:calc(100% - 2px);
}

#inicio .modal select {
	width:100% !important;
	color:#6D6E71;
}

.modal textarea {
    color: #000;
    font-size: 14px;
	text-align:left;
	float:left;
	width:calc(96% - 2px);
	font-family: Arial, sans-serif;
	padding:5px 2%;
	height:150px;
	border:1px solid #ccc;
	margin-bottom:10px;
}

#inicio textarea {
	width:calc(100% - 2px);
}

#popup-carrito textarea {
	height:50px;
}

.modal input[type="button"] {
	text-transform:uppercase;
    color: #fff;
    font-size: 14px;
	text-align:center;
	border:none;
	float:left;
	width:100%;
	padding:8px 0%;
	border:none;
	margin-bottom:0px;
	background:#5b7bb3;
	cursor:pointer;
}

.modal input[type="button"]:hover {
    color: #fff;
	background:#000;
}

.modal-contenido {
width:90%;
margin:5%;
}

.modal-box {
float:left;
width:94%;
padding:3%;
text-align:left;
background:#000;
margin-bottom:10px;
}

.modal-header .left, .modal-header .right {
float:left;
width:50%;
margin-top:20px;
}
.modal-header .left iframe {
float:left;
width:100%;
height:150px;
}

.modal-header .right h1, .modal-header .right h2, .modal-header .right a {
text-align:right;
float:left;
width:100%;
margin:0px auto;
font-family: "Roboto Condensed", Arial;
}

.modal-header .right h1 {
font-size:12px;
color:#000;
font-weight:normal;
}
.modal-header .right h2 {
font-size:14px;
color:#000;
margin:6px 0px;
}
.modal-header .right a {
text-decoration:none;
font-size:12px;
color: #5b7bb3;
font-weight:normal;
cursor:pointer;
}
.modal-header .right a:hover {
text-decoration:underline;
}

.modal-item {
float:left;
width:100%;
}
.modal-item div:nth-child(1) {
float:left;
width:50%;
color:#000;
font-size:12px;
text-align:left;
padding-top:3px;
}
.modal-item div:nth-child(1) span {
font-style:italic;
}
.modal-item div:nth-child(2) {
float:right;
width:50%;
}


@media (max-width: 760px) {
.modal-item div:nth-child(1) {
width:100%;
margin:5px 0px 10px 0px;
}
.modal-item div:nth-child(2) {
width:100%;
}
}


.modal-item div:nth-child(2) input {
float:right;
}
.modal-item div:nth-child(2) input:nth-child(1) {
background:#f00;
width:auto;
padding:5px 10px;
}
.modal-item div:nth-child(2) input:nth-child(1):hover {
background:#000;
}
.modal-item div:nth-child(2) input:nth-child(2) {
width:auto;
padding:5px 10px;
margin-right: 3px;
}
.modal-item div:nth-child(2) input:nth-child(3) {
width:auto;
padding:5px 10px;
margin-right: 3px;
}
.modal-item div:nth-child(2) input:nth-child(4) {
width: 60px;
padding: 3px 10px 4px 10px;
font-size: 12px;
text-align: center;
margin-right: 3px;
margin-bottom:3px;
}

@media (max-width: 760px) {
	.modal-item div:nth-child(2)  {
		display:flex;
	}
	.modal-item div:nth-child(2) input {
	float:left;
	}
	.modal-item div:nth-child(2) input:nth-child(4) {
    margin-bottom: 0px;
	}
	.modal-item div:nth-child(2) input:nth-child(1) {
	-webkit-box-ordinal-group: 4;
	-moz-box-ordinal-group: 4;
	box-ordinal-group: 4;
	order:4;
	}
	.modal-item div:nth-child(2) input:nth-child(2) {
	-webkit-box-ordinal-group: 3;
	-moz-box-ordinal-group: 3;
	box-ordinal-group: 3;
	order:3;
	}
	.modal-item div:nth-child(2) input:nth-child(3) {
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
	box-ordinal-group: 2;
	order:2;
	}
	.modal-item div:nth-child(2) input:nth-child(4) {
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	box-ordinal-group: 1;
	order:1;
	}
}

.modal-header label {
    color: #ccc;
    font-size: 14px;
	text-indent:2%;
	text-align:left;
	float:left;
	width:60%;
	margin-top:0px;
	margin-bottom:5px;
	font-weight:normal;
}
.modal-header input[type="file"] {
	float:right;
	width:38%;
	color:#000;
	    margin: -4px 0px 10px 0px;
	text-align:right;
}

#mensaje-error, #mensaje-error2 {
float:left;
width:calc(100% - 2px);
font-size:14px;
color:#f00;
text-align:center;
padding:5px 0px;
margin:0px 0px 10px 0px;
border:1px dashed #f00;
display:none;
}

#popup-color .modal-header h2 {
margin-bottom:20px;
text-align:center;
}

#popup-color .modal-header div {
float:left;
width:33%;
text-align:center;
margin-bottom:10px;
}

#popup-color .modal-header div a{
text-decoration:none;
font-size:14px;
color:#999;
}

#popup-color .modal-header div a:hover{
text-decoration:underline;
}

.modal-header input[type=number]::-webkit-inner-spin-button, 
.modal-header input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}