.c1 {
        padding: 10px;
        width: 100%; font-family:Arial; word-spacing:0; line-height:100%; margin-top:0; margin-bottom:0
      }

.Letradorada { font-family: Arial; color: #FFD700; word-spacing: 0; line-height: 120%; 
               margin-top: 0; margin-bottom: 0 }
               
.Letrabordo { font-family: Arial; color: #333333; word-spacing: 0; line-height: 120%; 
               margin-top: 0; margin-bottom: 0 }
               
.Letraturquesa { font-family: Arial; color: #00FFFF; word-spacing: 0; line-height: 120%; 
               margin-top: 0; margin-bottom: 0; font-weight:bold }
               
.Letrablanca { font-family: Times New Roman; color: #ffffff; word-spacing: 0; line-height: 120%; 
               margin-top: 0; margin-bottom: 0 }
               
.Letnegra { font-family: Arial; color: #000000; word-spacing: 0; line-height: 120%; 
               margin-top: 0; margin-bottom: 0 }
               
               
.LetnegraGrande { font-family: Arial; font-size: 2em; color: #000000; word-spacing: 0; line-height: 120%; 
               margin-top: 0; margin-bottom: 0 }
               
.Letgris { font-family: Arial; color: #808080; word-spacing: 0; line-height: 120%; 
               margin-top: 0; margin-bottom: 0 }
               
            
               
      @media (min-width: 500px) {
        .c1 {
          padding: 20px;
          font-size: 1.5em;
        }
      }

      @media (min-width: 800px) {
        .c1 {
          padding: 40px;
          font-size: 1.5em;
        }
      }
.c2 {
        padding: 10px;
        width: 100%;
      }

      @media (min-width: 500px) {
        .c2 {
          padding: 20px;
          font-size: 1.5em;
        }
      }

      @media (min-width: 800px) {
        .c2 {
          padding: 40px;
          font-size: 2em;
        }
      }

      
.container {
  margin: 0;
  padding: 0;
  width: 100%;
}

.container div {
  box-sizing: border-box;
  min-height: 150px;
  min-width: 150px;
}

.c1 {
  color: #ddd;
  background-color: #800000;
}

.c2 {
  color: #ddd;
  background-color: #0062d2;
}

.c3 {
  color: #333;
  background-color: #870000;
}

.c4 {
  color: #333;
  background-color: #820000;
}

.c5 {
  color: #333;
  background-color: #dfe1e5;
}

.container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }

      .c3, .c4{
        width: 100%;
      }

      @media (min-width: 600px) {
        .c3 {
          width: 50%;
          -webkit-order: 1;
          order: 1;
        }

        .c4 {
          width: 50%;
          -webkit-order: 2;
          order: 2;
        }
      }


      @media (min-width: 800px) {
        .c3 {
          width: 50%;
        }

        .c4 {
          width: 50%;
        }
      }

h1           { line-height: 120% }
h2           { line-height: 120% }
h3           { line-height: 120% }
h4           { line-height: 120% }
h5           { line-height: 120% }