*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}



body{
	background-color: lightblue;
	background-image: url('../img/fondo1.jpg');
	background-size: cover;
	/* background-repeat: no-repeat; */
	background-position: center center;
	background-attachment: fixed;
}

#LogoTelco{
	display: flex;
	float: left;
	width: 70px;
	height: 70px;
	padding: unset;
	/* margin-left: 10px; */
	/* margin-right: 10px; */
	/* background-color: #333; */
	/* margin-top: -15px; */
}

/* Add a black background color to the top navigation */
.barranav {
	background-color: transparent;
	/* background-color: #333; */
	overflow: hidden;
	width: auto;
	margin-top: 20px;
	margin-bottom: 15px;
	padding-right: 5%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-end;
	min-height:70px;
  }
  
 /* Style the links inside the navigation bar */
  .barranav a {
	float: right;
	/* display: flex; */
	color: #f2f2f2;
	text-align: center;
	padding: 6px 16px;
	text-decoration: none;
	font-size: 18px;
	font-family: 'Palanquin Dark', sans-serif;
  }
  
  /* Hide the link that should open and close the barranav on small screens */
  .barranav .icon {
	display: none;
  }
  
  .userphoto {
	border-radius: 50%;
	width: 30px;
	height: 30px;
  }
  
  /* desplegable container - needed to position the desplegable content */
  .desplegable {
	float: left;
	margin-top: 15px;
	/* overflow: hidden; */
  }

  /* Style the desplegable button to fit inside the barranav */
  .desplegable .dropbtn {
	font-size: 18px;
	border: none;
	outline: none;
	color:#333;
	/* color: white; */
	padding: 6px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
	font-family: 'Palanquin Dark', sans-serif;
  }
  
  /* Style the desplegable content (hidden by default) */
  .desplegable-content {
	display: none;
	position: absolute;
	background-color: darkred;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 100000;
  }
  
  /* Style the links inside the desplegable */
  .desplegable-content a {
	float: none;
	color: whitesmoke;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
	font-size: 14px;
  }
  
  /* Add a dark background on barranav links and the desplegable button on hover */
  /* .barranav a:hover, .desplegable:hover .dropbtn {
	background-color: #555;
	color: white;
  } */
  
  /* Add a grey background to desplegable links on hover */
  .desplegable-content a:hover {
	background-color: #ddd;
	color: black;
  }
  
  /* Show the desplegable menu when the user moves the mouse over the desplegable button */
  .desplegable:hover .desplegable-content {
	display: block;
  }
  
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the barranav (.icon) */
  @media screen and (max-width: 600px) {
	.barranav a:not(:first-child), .desplegable .dropbtn {
	  display: none;
	}
	.barranav a.icon {
	  float: right;
	  display: block;
	}
  }
  /* The "responsive" class is added to the barranav with JavaScript when the user clicks on the icon. This class makes the barranav look good on small screens (display the links vertically instead of horizontally) */
  /* @media screen and (max-width: 600px) { */
	.barranav.responsive {
		position: relative;
		display: block;
		flex-wrap: initial;
		flex-direction: initial;
		justify-content: initial;
		background-color: transparent;
	}
	.barranav.responsive a.icon {
	  position: absolute;
	  right: 0;
	  top: 0;
	}
	.barranav.responsive a {
	  float: none;
	  display: block;
	  text-align: left;
	}
	.barranav.responsive .desplegable {
		display: block;
		float: initial;
		margin-top: 0%;
	}
	.barranav.responsive .desplegable-content {
		position: relative;
		float: left;

	}
	.barranav.responsive .desplegable .dropbtn {
	  display: block;
	  width: 100%;
	  text-align: left;
	  color:#333;
	}
  


/* COSITO QUE APARECE CUANDO ESTA CARGANDO */
#loader {
display: none;
border: 16px solid tomato;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
z-index: 1;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
position: absolute;
left: 45%;
top: 45%;
}


/* Safari */
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
/* ACA TERMINA EL COSITO*/

/* FORM CONTACTO */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}

.container {
padding: 16px;
}

span.psw {
float: right;
padding-top: 16px;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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.4); /* Black w/ opacity */
padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 30%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: red;
cursor: pointer;
}

/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)} 
to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
from {transform: scale(0)} 
to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
/* TERMINA FORM CONTACTO */