/* 1. Importa tu fuente */

@import url("https://fonts.googleapis.com/css?family=Titillium Web");

body {
  font-family: 'Titillium Web', sans-serif !important;
}


         body {
         --bs-body-font-family: 'Permanent Marker', sans-serif;
         --bs-body-font-size: 1.1rem; /* Default is 1rem */
         --bs-body-line-height: 1.6;  /* Default is 1.5 */
         }
		 .slide img {
		 	width: 90%;
		 }
		 .card-img-overlay {
		 	padding-top: 2rem;
		 }


: 
 to 
:  to :  to :  to :  and above


/* Mobile Devices */
@media (width <= 320px) {
	.card-title{
		text-align:center;
		margin-top: 0.5rem;
		font-size: large;
	}
}


/* Mobile Devices */
@media (321px <= width <= 480px) {
	.card-title{
		text-align:center;
		margin-top: 0.5rem;
		font-size: large;
	}
}

/* Tablets */
@media (481px <= width <= 768px) {
	.card-title{
		text-align:center;
		margin-top: 2rem;
		font-size: large;
	}
}

/* Laptops / Small Screens */
@media (769px <= width <= 1024px) {
	.card-title{
		text-align:center;
		margin-top: 2rem;
	}
}

/* Desktops / Large Screens */
@media (1025px <= width <= 1200px) {
	.card-title{
		text-align:center;
		margin-top: 2rem;
	}
}

/* Extra Large Screens */
@media (1201px <= width) {
	.card-title{
		text-align:center;
		margin-top: 2rem;
	}
}



.float-right {
    float: right !important;
}

footer p, footer ul li p, footer a {
    font-size: smaller;
}
footer ul{
	list-style-type:none;

}
footer h5{
    font-weight: bold;
}


div#contenedorBajoSlide { background:#fff; padding:15px 0; border-bottom:1px solid #ddd; }
div.container.bajoslide { margin:0 auto }
div.bajoslide > div:nth-child(1), div.bajoslide > div:nth-child(2), div.bajoslide > div:nth-child(3) { border-right: 1px solid #fff; }
div.bajoslide > div { text-align:center; }
div.bajoslide, div.bajoslide a, div.bajoslide i { color:#464646 }
div.bajada { text-align:left;}
div.bajoslide img { margin-right:20px }
div.bajoslide img {
    width: 70px;
    float: left;
    margin-right: 8px;
}
div.bajoslide div.col-md-3 {
    text-align: left;
}

a, a:hover
Specificity: (0,0,1)
 {
    color: var(--color-marca2);
    -webkit-transition: color .1s, background-color .1s;
    -moz-transition: color .1s, background-color .1s;
    -o-transition: color .1s, background-color .1s;
    transition: color .1s, background-color .1s;
    outline: none;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}