@media only screen and (max-width: 2900px) {
  h1 {
    text-align:center;
  }
  .container {
    width:100%;
    margin:0 auto;
    margin-top: 100px;
    text-align: center;
  }
  input[type="radio"] {
    display:none;
  }
  label {
    width:23%;
    float:left;
    text-align:center;
    background:#ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    color:#222222;
    padding:0.5%;
    margin:0.5%;
    margin-bottom:30px;
    cursor:pointer;
  }
  input[type="radio"][id="blue"]:checked + label {
    background:#6666ff;
  }
  input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
  }
  input[type="radio"][id="red"]:checked + label {
    background:#ff4466;
  }
  input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
  }
  input[type="radio"][id="green"]:checked + label {
    background:#66dd99;
  }
  input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
  }
  .tile {
    width:18%;
    height:auto;
    float:left;
    transition:all 1s;
    margin:0.5%;
    padding:0.5%;
  }
  .green {
  }
  .blue {
  }
  .red {
  }
  img.img_logo_canal{
    width: auto;
  }
}


@media only screen and (max-width: 1438px) {
.tile {
    width:22%;
    height:auto;
    float:left;
    transition:all 1s;
    margin:0.5%;
    padding:0.5%;
  }
}

@media only screen and (max-width: 1200px) {
.tile {
    width:31%;
    height:auto;
    float:left;
    transition:all 1s;
    margin:0.5%;
    padding:0.5%;
  }
}


@media only screen and (max-width: 888px) {
.tile {
    width:30%;
    height:auto;
    float:left;
    transition:all 1s;
    margin:0%;
    padding:0%;
  }
  img.img_logo_canal{
    width: 120px;
  }

}


@media only screen and (max-width:602px) {
.tile {
    width:25%;
    height:auto;
    float:left;
    transition:all 1s;
    margin:0%;
    padding:0%;
  }
  img.img_logo_canal{
    width: 80px;
  }

}


@media only screen and (max-width:518px) {
.tile {
    width:50%;
    height:auto;
    float:left;
    transition:all 1s;
    margin:0%;
    padding:0%;
  }
  img.img_logo_canal{
    width: 90px;
  }

}