﻿ /*!
 * Start Bootstrap - Business Frontpage HTML Template (https://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see https://www.apache.org/licenses/LICENSE-2.0.
 */
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }

 html {
 	width: 100%;
 	height: 100%;
 }

 body {
 	font-family: "Roboto", Helvetica, Arial, sans-serif;
 	padding-top: 10px;
 	/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
 	background-image: url(../img/dist/distribucion.jpg);
 	background-attachment: fixed !important;
 	background-repeat: no-repeat;
 	background-size: cover;
 	width: 100%;
 	height: 100%;

 }

 .navbar-brand {
 	padding-top: 0;
 	padding-bottom: 0;
 }

 nav.navbar {
 	background-color: transparent !important;
 	background-size: cover;
 	height: 50px;
 	border-style: hidden;


 }

 nav.navbar a:link {
 	padding-top: 10px;
 	font-size: 20px;
 	color: #fff;
 	transition: all 1s ease;
 	background-color: #2980b8 !important;

 }

 nav.navbar a:active {
 	font-size: 20px;
 	color: #ffffff;
 	background-color: #2980b8 !important;

 }

 nav.navbar a:visited {
 	font-size: 20px;
 	color: #fff;
 	background-color: #2980b8 !important;

 }

 nav.navbar a:hover {
 	font-size: 20px;
 	color: #2980b8 !important;
 	background-color: #fff !important;
 	transition: all 1s ease;
 	box-shadow: 5px 5px 20px #333333;


 }

 .nav-navs>li>a {
 	padding-top: 0px !important;
 	background-color: #2980b8 !important;
 	color: #fff;
 	transition: all 1s ease;

 }

 .nav-navs>li>a:active {
 	background-color: #2980b8 !important;
 	color: #33aeff;
 	transition: all 1s ease;

 }

 .nav-navs>li>a:hover {
 	background-color: #2980b8 !important;
 	color: #fff !important;
 	transition: all 1s ease;
 	box-shadow: 10px 10px 20px #333333;

 }


 .navbar-nav .open .dropdown-menu {
 	background-color: #2980b8 !important;
 	color: #fff !important;
 	padding-top: 0px !important;
 	box-shadow: 10px 10px 20px #333333;

 }

 .navbar-nav .page-scroll {
 	padding-top: 10px;
 	font-size: 20px;
 	color: #fff;
 	transition: all 1s ease;
 	background-color: #2980b8 !important;

 }

 .nav-pills>li>a {
 	padding: 15px;
 	text-align: center;
 	background-color: #eeeeee;
 	font-size: 40px;
 	color: #33aeff;
 	border-radius: 20px;
 	transition: all .5s ease-in-out;
 	width: 250px;
 	box-shadow: 10px 10px 20px #333333;

 }
  .nav-pills>li>a:hover {
 	padding: 15px;
 	background-color: #2980b8;
 	font-size: 36px;
 	color: #ffffff;
 	transition: all .5s ease-in-out;
 	box-shadow: 5px 5px 20px #333333;

 }

  .nav-ps>li>a {
 	padding: 15px;
 	text-align: center;
 	background-color: #eeeeee;
 	font-size: 40px;
 	color: #33aeff;
 	border-radius: 20px;
 	transition: all .5s ease-in-out;
 	width: 250px;
 	box-shadow: 10px 10px 20px #333333;

 }
  .nav-ps>li>a:hover {
 	padding: 15px;
 	background-color: #2980b8;
 	font-size: 36px;
 	color: #ffffff;
 	transition: all .5s ease-in-out;
 	box-shadow: 5px 5px 20px #333333;

 }
  .nav-dist>li>a {
 	padding: 15px;
 	border-radius: 20px;
	background-color: white;
 	transition: all .5s ease-in-out;
 	width: 500px;
 	box-shadow: 10px 10px 20px #333333;
 }
  .nav-dist>li>a:hover {
	 	box-shadow: 5px 5px 10px #333333;
  }
    .nav-tipo>li>a {
 	padding: 15px;
	margin: 15px;
 	text-align: center;
 	background-color: gray;
	color:white;
 	font-size: 40px;
 	border-radius: 20px;
 	transition: all .5s ease-in-out;
 	width: 250px;
 	box-shadow: 10px 10px 20px #333333;
 }
  .nav-tipo>li>a:hover {
	 	color: #33aeff;

	 	box-shadow: 5px 5px 10px #333333;
  }

 .nav-pills>li>a:visited {
 	padding: 15px;
 	background-color: #33aeff;
 	font-size: 36px;
 	color: #fff;
 	transition: all .5s ease-in-out;

 }



 .imageicon {
 	display: flex;
 	justify-content: center;
 	align-items: center;

 }

 .titulo {
 	padding-top: 70px;
 	padding-bottom: 40px;
 	padding-left: 15px;
 	padding-right: 15px;
 	color: #33aeff !important;
 	text-align: center;
 	text-shadow: #cccccc 3px 3px;

 }

 .fecha {
 	color: #999999 !important;
 	text-align: left;
 	font-size: 12px;
 }

 .boton-blanco {
 	text-decoration: none;
 	text-align: center;
 	padding: 15px;
 	font-size: 24px;
 	width: 100%;
 	color: #2980b8;
 	background-color: #fff;
 	border-radius: 6px;
 	border: 2px solid #2980b8;
 	transition: all 1s ease;
 	position: relative;
 	box-shadow: 10px 10px 20px #333333;

 }

 .boton-blanco:hover {
 	text-decoration: none;
 	background: #2980b8;
 	color: #fff !important;
 	box-shadow: 5px 5px 20px #333333;

 }

 .botones {
 	display: grid;
 	gap: 1rem;
 	grid-auto-rows: 22rem;
 	grid-template-columns: repeat(autofill, minmax(15rem, 25rem));
 }

 .buscar {
 	text-decoration: none;
 	text-align: center;
 	padding: 20px;
 	font-size: 20px;
 	width: 100%;
 	color: #2980b8;
 	background-color: #fff;
 	border-radius: 6px;
 	border: 2px solid #2980b8;
 	transition: all 1s ease;
 	position: relative;
 	max-width: 150px;
 	box-shadow: 10px 10px 20px #333333;
 }

 .buscar:hover {
 	text-decoration: none;
 	background-color: #2980b8;
 	color: #ffffff !important;
 	box-shadow: 5px 5px 20px #333333;

 }

 .busqueda {
 	font-size: 30px;
 	padding-left: 20px;
 	padding-right: 20px;
 	margin-right: 15px;
 	border-radius: 10px;
 	box-shadow: 10px 10px 20px #333333;
 	border-style: inset;
 	border-width: 5px;
 	border-color: #2980b8;
 }

 .logo {
 	height: 50px;
 	float: left;
 }

 .logo-text {
 	display: block;
 	padding: 15px;
 	text-align: center;
 }


 /* Variaciones de texto */
 h1 {
 	margin-top: 0px;
 	font-size: 48px !important;
 	color: #696969 !important;
 	text-align: center;
 	text-shadow: #999999 2px 2px;
 }

 h2 {
 	margin-top: 0px;
 	font-size: 48px !important;
 	color: #696969 !important;
 	text-align: center;
 	text-shadow: #999999 2px 2px;

 }

 h3 {
 	font-size: 24px !important;
 	font-weight: normal;
 	color: #000 !important;
 	text-decoration: none !important;
 	margin-top: 0px;
 }

 h4 {
 	font-size: 18px !important;
 	font-weight: normal;
 	color: #000 !important;
 	text-decoration: none;

 }

 h4 a:link {
 	text-decoration: none;
 	font-size: 18px;
 	color: #ffffff;

 }

 h4 a:active {
 	text-decoration: none;
 	font-size: 18px;
 	color: #ffffff;
 }

 h4 a:visited {
 	text-decoration: none;
 	font-size: 18px;
 	color: #ffffff;
 }

 h4 a:hover {
 	text-decoration: none;
 	font-size: 18px;
 	color: #ffffff;
 }

 hr {
 	background-color: #000000;
 	height: 1px;
 	border: 0;
 }

 .texto {
 	padding-top: 80px;
 	padding-left: 80px;
 	padding-right: 80px;
 	padding-bottom: 80px;
 	background-color: #fff;
 	width: 100%;
 	font-size: 20px !important;
 	text-align: left;
 	color: #000;
 	min-height: 200px;
 	display: flex;
 	box-shadow: 10px 10px 20px #333333;


 }

 .textogrid {
 	padding-top: 80px;
 	padding-left: 80px;
 	padding-right: 80px;
 	padding-bottom: 80px;
 	vertical-align: middle;
 	text-decoration: none;
 	background-color: #fff;
 	display: grid;
 	grid-template-columns: repeat(4, auto);
 	gap: 5px;
 	grid-auto-rows: minmax(20px, auto);
 	box-shadow: 10px 10px 20px #333333;


 }

 .textomodal {
 	padding-bottom: 20px;
 	padding-left: 20px;
 	padding-right: 20px;
 	background-color: #ffffff;
 	width: 100%;
 	font-size: 20px !important;
 	text-align: left;
 	color: #000;
 	min-height: 200px;
 	display: flex;

 }

 .columna {
 	background-color: #ffffff;
 	font-size: 16px !important;
 	text-align: left;
 	color: #000;
 	min-height: 500px;
 	display: flex;
 	border-style: inset;
 	border-width: 20px;
 	border-radius: 50px;
 	border-color: #2980b8;
 	text-decoration: none !important;
 	box-shadow: 20px 20px 20px #333333;

 }


 .pie {
 	padding-top: 40px;
 	padding-left: 80px;
 	padding-right: 80px;
 	padding-bottom: 40px;
 	background-color: #2980b8;
 	width: 100%;
 	min-height: 200px;
 	display: flex;
 }

 .final {
 	padding: 3px;
 	color: #ffffff !important;
 	text-align: left;
 	font-size: 18px;
 	text-decoration: none;

 }

 .final>a {
 	color: #ffffff !important;
 	text-decoration: none;

 }

 .telefono {
 	padding: 3px;
 	color: #ffffff !important;
 	text-decoration: none;
 	font-size: 25px;

 }

 .telefono a:link {
 	padding: 3px;
 	color: #ffffff !important;
 	text-decoration: none;
 	font-size: 20px;

 }


 .life {
 	padding-top: 50px;
 	padding-left: 80px;
 	padding-right: 80px;
 	padding-bottom: 50px;
 	background-color: #fff;
 	width: 100%;
 	min-height: 100px;
 	font-size: 20px !important;
 	text-align: center;
 	color: #000;
 	display: flex;
 	box-shadow: 10px 10px 20px #333333;

 }

 .formulario {
 	padding: 10px;
 	color: #2980b8;
 	font-size: 16px !important;
 	min-width: 120px;
 	vertical-align: top;
 	text-align: left;
 }

 .gridgran {
 	display: grid;
 	grid-gap: 5rem;
 	grid-auto-rows: 25rem;
 	grid-template-columns: 250px 250px 250px 250px 250px 250px;
 }

 .flexpills {
 	display: flex;
 	padding: 10px;
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: space-around;
 	align-items: flex-start;
 	align-content: flex-start;
 }
 .menupills{
    display:block;
	 	padding: 10px;
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: space-around;
 	align-items: flex-start;
 	align-content: flex-start;
 }
 .barraflex {
 	display: flex;
 	padding: 10px;
 	flex-direction: row;
 	flex-wrap: nowrap;
 	justify-content: space-around;
 	align-items: flex-start;
 	align-content: flex-start;
 }
 .minigrid {
 	display: grid;
 	grid-template-rows: 1fr 1fr;
 	grid-template-columns: 1fr;
 	grid-gap: 10px;
 }

 .intro-text {
 	font-family: "Roboto", Helvetica, Arial, sans-serif;
 	text-align: center;
 }

 .intro-text .name {
 	font-weight: 700;
 	color: #ffffff;
 	font-size: 42px;
 }

 .intro-text .subname {
 	color: #333333;
 	font-weight: 400;
 }

 /* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */

 .business-header {
 	height: 600px;
 	/*background: url(../img/fondo/13-scaled.jpg) center center no-repeat scroll;*/
 	background-attachment: fixed;
 	background-color: #F7F7F7;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	background-size: cover;
 	-o-background-size: cover;
 }

 /* Customize the text color and shadow color and to optimize text legibility. */

 .tagline {
 	text-shadow: 0 0 5px #333;
 }

 .img-center {
 	margin: 0 auto;
 }

 footer {
 	margin: 50px 0;
 }


 /* Margen para dar espacio entre iconos y texto en #Contacto */
 address .glyphicon {
 	margin-right: 10px;
 	margin-top: 5px;
 	size: 50px !important;

 }


 /* Imágenes de tuiter y facebook */
 .redesSociales {
 	height: 50px;
 	width: 50px;
 	margin-right: 20px;
 	margin-bottom: 5px;
 }


 #check {
 	margin-top: auto;
 	padding: 5px !important;
 	min-height: 20px !important;
 	min-width: 20px !important;
 	size: 10px !important;
 	accent-color: #2980b8;

 }
 .glyphicon-chevron-left:before {
	content: "<";
	size: 18px;
}

.glyphicon-chevron-right:before {
	content: ">";
	size: 18px;
}

 #Condiciones {
 	display: block;
 	margin-top: auto;
 	margin-left: 10px;
 	padding: 10px 0 0 25px;

 }


 /* USO GENERAL */
 .floatLeft {
 	float: left;
 }


 @media (max-width:900px) {
 	.texto {
 		padding-top: 80px;
 		padding-left: 10px;
 		padding-right: 10px;
 		padding-bottom: 80px;
 		background-color: #fff;
 		width: 100%;
 		font-size: 18px !important;
 		text-align: left;
 		color: #000;
 		/* pasar a negro */
 		min-height: 200px;
 		display: flex;
 		box-shadow: 10px 10px 20px #333333;
 	}

 	.navbar-nav .open .dropdown-menu {
 		background-color: #2980b8 !important;
 		color: #fff !important;
 		padding-top: 0px !important;
 		box-shadow: 10px 10px 20px #333333;

 	}

 	.navbar-nav .page-scroll {
 		padding-top: 10px;
 		font-size: 20px;
 		color: white !important;
 		transition: all 1s ease;
 		background-color: #2980b8 !important;

 	}
	.nav-dist>li>a {
 	padding: 15px;
 	border-radius: 20px;
	background-color: white;
 	transition: all .5s ease-in-out;
 	width: 400px;
 	box-shadow: 10px 10px 20px #333333;
 }
  .nav-dist>li>a:hover {
	 	box-shadow: 5px 5px 10px #333333;
  }
 }

 @media (max-width:1600px) {

 	.gridgran {
 		display: grid;
 		grid-gap: 10px;
 		grid-auto-rows: 25rem;

 		grid-template-columns: 250px 250px 250px 250px 250px;
 	}
 }

 @media (max-width:1340px) {

 	.gridgran {
 		display: grid;
 		grid-gap: 10px;
 		grid-auto-rows: 25rem;
 		grid-template-columns: 250px 250px 250px 250px;
 	}
 }

 @media (max-width:1080px) {

 	.gridgran {
 		display: grid;
 		grid-gap: 10px;
 		grid-auto-rows: 25rem;
 		grid-template-columns: 250px 250px 250px;

 	}
 }

 @media (max-width:820px) {

 	.gridgran {
 		display: grid;
 		grid-gap: 10px;
 		grid-auto-rows: 25rem;
 		grid-template-columns: 250px 250px;
 	}
	.nav-dist>li>a {
 	padding: 15px;
 	border-radius: 20px;
	background-color: white;
 	transition: all .5s ease-in-out;
 	width: 400px;
 	box-shadow: 10px 10px 20px #333333;
 }
  .nav-dist>li>a:hover {
	 	box-shadow: 5px 5px 10px #333333;
  }
 }

 @media (max-width:560px) {

 	.gridgran {
 		display: grid;
 		grid-gap: 10px;
 		grid-auto-rows: 25rem;

 		grid-template-columns: 250px;
 	}
	.nav-dist>li>a {
 	padding: 15px;
 	border-radius: 20px;
	background-color: white;
 	transition: all .5s ease-in-out;
 	width: 300px;
 	box-shadow: 10px 10px 20px #333333;
 }
  .nav-dist>li>a:hover {
	 	box-shadow: 5px 5px 10px #333333;
  }
 }