:root { 
    --white: #ffffff;
    --blue: #5fb5d6;
    --grey: #5d5a59;
    --yellow: #feca58;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@font-face {font-family: "ReefBold";
  src: url("fonts/reefbold.eot"); /* IE9*/
  src: url("fonts/reefbold.eot?#iefix") format("embedded-opentype"), 
  url("fonts/reefbold.woff2") format("woff2"), 
  url("fonts/reefbold.woff") format("woff"), 
  url("fonts/reefbold.ttf") format("truetype"), 
  url("fonts/reefbold.svg#Reef Bold") format("svg"); 
}
html {
   height: 100%;
}
body {
   min-height: 100vh;
   font-family: 'ReefBold', sans-serif;
   font-weight: normal;
   font-size: 19px;
   color: var(--grey);
}
.blue {
    color: var(--blue);
}
.bg-blue {
    background: var(--blue);
}
.yellow {
    color: var(--yellow);
}
.bg-yellow {
    background: var(--yellow);
}
.height10 {
    height: 10px;
}
.height20 {
    height: 15px;
}
.height30 {
    height: 30px;
}
.height50 {
    height: 40px;
}
img {
    max-width: 100%;
}
.container-fluid {
    width: 600px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding-left: 34px;
    padding-right: 34px;
}
.logo {
    padding-top: 35px;
    padding-bottom: 25px;
    text-align: center;
}
.logo img {
  width: 140px;
  margin-left: -15px;
}
.formulario label {
  background: var(--blue);
  color: #fff;
  font-weight: normal;
  display: inline-block;
  padding: 3px 18px 5px 18px;
  border-radius: 12px;
  min-width: 108px;
  text-align: left;
}
.formulario input {
    border: 2px solid var(--blue);
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 13px;
    border-radius: 12px;
    outline: none;
}
.boton {
    display: inline-block;
    background: var(--yellow);
    border-radius: 12px;
    padding: 11px 30px;
    color: #fff;
    outline: none;
    border: none;
    min-width: 100px;
    text-align: center;
}
img.pack {
    max-width: 65%;
}