.portada {
width: 1500px;
margin: 0 auto;
margin-top: 92px !important;
position: relative;
}

.textito {
top: 13px;
position: relative;
}

.portada img {
width: 100%;
}

.col-xs-12 h2 {
text-align: center;
}

.contens-form {
width: 70%;
height: auto;
padding: 40px 0px;
}

.contens-form .catalan {
box-sizing: content-box;
width: 100%;
height: auto;
padding: 10px;
position: relative;
top: -60px;
}

.contens-form .catalan .form-group {
display: grid;
}


.contens-form .catalan .form-group:hover label {
color: #bc0033;
}

.contens-form .catalan .form-group:hover input {
border-bottom: 1px solid #bc0033;
}


.contens-form .catalan .form-group label {
width: 100%;
color: #585757;
font-size: 17px;
font-weight: 100;
transform: translateY(0px);
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
}

.contens-form .catalan .form-group input {
width: 100%;
height: 35px;
border: 0;
border-bottom: 1px solid #ccc;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
}

.contens-form .catalan .form-group input:focus {
outline: inherit;
border-bottom: 1px solid #bc0033;
}

.contens-form .catalan .form-group textarea {
height: 200px !important;
}

::placeholder {
color: #ccc;
font-size: 15px;
left: 5px;

}

.contens-form .catalan .form-group textarea:focus {
outline: inherit;
border: 1px solid #bc0033;
}

.button {
position: relative;
float: right;
border: 1px solid #8d8d8d;
background: transparent;
padding: 10px 20px;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
}

.button:hover {
background: #bc0033;
color: white;
}

/* ======================= mensaje ================== */

#mensaje {
width: 100%;
height: 500px;
overflow: hidden;
}

.asifue {
width: 50%;
margin: 0 auto;
height: 200px;
position: relative;
top: 200px;
text-align: center;
font-size: 25px;
color: #636363;
font-family: sans-serif;
}

.asifue img {
margin-bottom: 30px;
filter: invert(0%);
}

.asifue a {
color: #616161;
font-size: 17px;
font-weight: 100;
text-decoration: none;
border: 1px solid #7b7b7b;
padding: 5px 15px;
top: 40px;
position: relative;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
}

.asifue a:hover {
background: #bc0033;
color: white;
}


/* ============================================== media queries ====================== */

@media screen and (max-width:1500px) {
.portada {
width: 100%;
margin: 0 auto;

position: relative;
}
}

@media screen and (max-width: 720px) {

    .page-header h1 {
    font-size: 30px;
    }
    
    .col-xs-12 h2 {
text-align: center;
   font-size: 27px;
}
    

}

@media screen and (max-width: 420px) {

.page-header h1 {
font-size: 27px;
}
    
.col-xs-12 h2 {
text-align: center;
font-size: 20px;
}
    
.contens-form {
width: 90%;
height: auto;
padding: 40px 0px;
}

}

@media screen and (max-width: 320px) {


    
.contens-form {
width: 100%;
height: auto;
padding: 40px 0px;
}

}