.xyz { 
    background-size: auto; 
    text-align: center; 
    padding-top: 100px; 
} 
.btn-circle.btn-sm { 
    width: 30px; 
    height: 30px; 
    padding: 6px 0px; 
    border-radius: 15px; 
    font-size: 8px; 
    text-align: center; 
} 
.btn-circle.btn-md { 
    width: 50px; 
    height: 50px; 
    padding: 7px 10px; 
    border-radius: 25px; 
    font-size: 10px; 
    text-align: center; 
} 
.btn-circle.btn-xl { 
    width: 90px; 
    height: 90px; 
    padding: 10px 16px; 
    border-radius: 50px; 
    font-size: 12px; 
    text-align: center; 
}
.cuadrado {
  width:25vh;
  max-width:100px;
  height:25vh;
  max-height:100px;
  position:relative;
  background:red;
}

.fondo{
   background-image: url(../img/fondo/fondoamarillo2.png)no-repeat fixed center;
   background-size: 100% 100%;
   text-align: center;
    }
@font-face {
font-family: KGMissKindergarten_0;
src: url(KGMissKindergarten_0.ttf);
}
/* Extra large desktops*/
 @media (min-width: 1200px) {
    .espacio {
        padding-top: 10% !important;
    }
  }  
 /* Large desktops*/ 
  @media (min-width: 992px) {
    .espacio {
        padding-top: 20% !important;
    }
  }  

 /* Medium desktops*/ 
  @media (min-width: 768px) {
    .espacio {
        padding-top: 20% !important;
    }
  }    

 /* Small desktops*/ 
  @media (min-width: 576px) {
    .espacio {
        padding-top: 10% !important;
    }
  }  

  .cuadrado {
      width:25vh;
      max-width:60px;
      height:25vh;
      max-height:60px;
      position:relative;
      border-style: solid;
      border-color:#1C69C1;
      background:white;
    }
    .cuadradoDos {
      width:25vh;
      max-width:60px;
      height:25vh;
      max-height:60px;
      position:relative;
      border-style: solid;
      border-color: #15B58A;
    }
    .cuadradoTres {
      width:25vh;
      max-width:60px;
      height:25vh;
      max-height:60px;
      position:relative;
      border-style: solid;
      border-color: #EC8B11;
    }
    .cuadradoCuatro {
      width:25vh;
      max-width:60px;
      height:25vh;
      max-height:60px;
      position:relative;
      border-style: solid;
      border-color: #572379;
    }
    .triangulo{
      width: 0;
      height: 0;
      border-right: 30px solid transparent;
      border-top: 50px solid transparent;
      border-left: 30px solid transparent;
      border-bottom: 50px solid #34BDE6;
    }
    .trianguloDos{
      width: 0;
      height: 0;
      border-right: 30px solid transparent;
      border-top: 50px solid transparent;
      border-left: 30px solid transparent;
      border-bottom: 50px solid #572379;
    }
    .figuraCuadrado{
      width: 40px; 
      height:40px; 
      background: #1C69C1;
    }
    .figuraCirculo{
        background-color: #15B58A;
    }
    .bordeDiv{
      border-right: dashed 1px;
      border-color: black;
    }    
      .trianguloTres{
      width: 0;
      height: 0;
      border-right: 30px solid transparent;
      border-top: 50px solid transparent;
      border-left: 30px solid transparent;
      border-bottom: 50px solid red;
    }