@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

body { font-family: 'Montserrat'; margin: 0; }
.cajaPinceles { text-align: center; }
.cajaPinceles p { margin: 25px 0 10px; }
@media (max-width: 500px) {   .cajaPinceles p { margin: 15px 0 10px; } }

.cajaPinceles div {
  display: inline-block;
  margin: 5px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #000;
}
#fino { width: 10px; height: 10px; }
#normal { width: 20px; height: 20px; }
#grueso { width: 30px; height: 30px; }

.filaColores {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}

.controles2 {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}

.filaColores div {
  margin: 3px;
  width: 20px;
  height: 20px;
  content: " ";
}

@media (max-width: 500px) {
  .filaColores div {
    margin: 2px;
    width: 18px;
    height: 18px;
    content: " ";
  }
}

#color1 { background-color: #E94837; }
#color2 { background-color: #E42264; }
#color3 { background-color: #9727B6; }
#color4 { background-color: #6338BE; }
#color5 { background-color: #3E50BB; }
#color6 { background-color: #2894FA; }
#color7 { background-color: #20A8FA; }
#color8 { background-color: #2DBBD9; }
#color9 { background-color: #239687; }
#color10 { background-color: #57AE3F; }
#color11 { background-color: #8FC42E; }
#color12 { background-color: #CFDD03; }
#color13 { background-color: #FFED06; }
#color14 { background-color: #FEC201; }
#color15 { background-color: #FE9306; }
#color16 { background-color: #FE5801; }
#color17 { background-color: #775647; }
#color18 { background-color: #9E9D9E; }
#color19 { background-color: #627E8C; }
#color20 { background-color: #000000; }

.gomaBorrar { margin: auto 0 0px 45px; text-align: center; }
@media (max-width: 500px) { .gomaBorrar { margin: auto 0 0 35px; } }

.gomaBorrar img { width: 54px; }
@media (max-width: 500px) { .gomaBorrar img { width: 44px; } }

.cajaAviso {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.65);
  z-index: 2;
  cursor: pointer;
}

.guardar { margin: auto 0 0px 45px; }
.guardar img { width: 54px; }
@media (max-width: 500px) {
  .guardar { margin: auto 0 0px 35px; }
  .guardar img { width: 44px; }
}

.avisoGuardar{
  font-size: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
@media (max-width: 500px) { .avisoGuardar { font-size: 25px; } }
.lienzo { margin-left: auto; margin-right: auto; }
#canvas { display: block; margin: 25px auto; }
@media (max-width: 500px) { #canvas { display: block; margin: 15px auto 10px; } }
.ocultar { display: none; }