body {

   overflow-x: hidden!important;
   
   font-family: 'Roboto', sans-serif;
   -webkit-font-smoothing: antialiased;
   
   background: url('img/back.png') top left repeat;
   
   margin: 0 auto;
   padding: 0;
   
   display: block;

}

#page {
   position: absolute;
   top: 0;
   left: 0;
   margin: 0;
   width: 100%
}

#perchas {
   height: 80vh; 
   background-image: url('../img/percha-1.jpg'); 
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   background-color: red
}

.title h1 { 
   font-size: 4em;
   font-weight: bolder
}

.title h2 {
   font-size: 2.4em;
   font-weight: bolder
}

.title h5 { 
   font-size: 2em;
   font-weight: bolder
}

#fondo
{  
   width: 25%;
   
   background-image: url(../img/percha-2.jpg);
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

#texto
{  
   width: 75%
}

#avatar
{  
   background-image: url(../img/percha-2.jpg);
   background-size: cover; 
   height: 100vh
}

#mensaje
{
   width: 320px; 
   padding: 16px 0; 
   margin: 0 auto;
}
/* ---- ---- ---- form ---- ---- ---- */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

/* ---- ---- ---- VALIDATION -------*/

label.error
{
   color:red;
}

input.error,
select.error,
textarea.error
{
   border:1px solid red;
}

label.valid{color:green;}
input.valid,
select.valid,
textarea.valid
{
   border:1px solid green;
}