html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;

  padding-top: 50px;
  padding-bottom: 20px;
}

.row-top {
  margin-top: 20px;
}

h1.title {
  text-align: center;
  margin: 0px;
  padding: 0px;
  margin-bottom: 0px;
}

h2.title {
  font-size: 1.4em;
  font-weight: 300;
  text-align: center;
  margin-bottom: 0px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #ffffff;
}

.copper-color {
  color: #000000;
  background-color: #EFF0F9;
  border-color: transparent;
}

.coop-color {
  border-color: transparent;
}

.card-img-bottom{
  width: 90%;
  height: auto;
  margin: 5px;
}

.maps{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.maps iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    pointer-events: none;
}

.parallela {
  background-color: #D9EDF7;
}

.parallelb {
  background-color: #DFF0DB;
}

.main-block {
  margin-top: 15px;
  margin-bottom: 15px;
}

.program-table td {
  padding: 4px;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
.embed-container {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    min-height: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* xs button size */
.btn-group-xs > .btn, .btn-xs {
  padding: .25rem .4rem;
  font-size: .50rem;
  line-height: .5;
  border-radius: .2rem;
}