* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body {
    font-family: 'open sans';
    font-size: 16px;
}
header{
    align-items: center;
    background-color: #204c83;
    display: flex;
    justify-content: space-between;
    height: 90px;
    padding: 0px 15px;
    width: 100%;
}
.logo{
    color: white;
    display: flex;
    width: 22%;
}
.logo img{
    height: 70px;
    object-fit: cover;
    display: block;
    width: 70px;
}
.logo h1{
    font-weight: 400;    
}
.logo h2{
    font-size: 1em;
    font-weight: 300;
}
.titulo{
    margin-left: 10px; 
}
nav > a{
    color: white;
    text-decoration: none;
    margin: auto 5px;
}
nav > a:hover{
    text-decoration: underline;
    margin: auto 5px;
}
.portada{
    width: 100%;
    height: 90vh;
    background: url(/imagenes/patrulla_2.jpg); 
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.titulo-portada{
    background-color:hsla(213, 61%, 32%, 0.300);
    color: white;
    width: 40%;
    margin-top: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.titulo-portada > h1{
    font-size: 4em;
    font-weight: 700;
}
.titulo-portada > h2{
    font-size: 3em;
    font-weight: 600;
}
.conocenos{
    text-align: center;
    background-color: hsla(360, 92%, 45%, 0.500);
    color: white;
    font-size: 1.2em;
    font-weight: 400;
    text-decoration: none;
    width: 30%;
    padding: 10px 0px;
    margin-top: 20px;
    margin-bottom: 15px;
}
.conocenos:hover{
    background-color: hsla(360, 92%, 45%, 0.800);
}

/*-----la-empresa-----*/
.contenedor{
    align-items: center;
    background-color: #f5f5f5;
    display: flex;
    height: 400px;
    justify-content: space-evenly;
    padding: 30px 50px;
    width: 100%;
}
.contenedor >img{
    height: 300px;
    width: 35%;
}
.contenedor-texto{
    width: 45%;
}
.contenedor-texto >h3{
    color: #204c83;
    font-size: 2em;
    font-weight: 400;
    margin-bottom: 10px;
}
.contenedor-texto >p{
    color: black;
    font-size: 1.2em;
    font-weight: 400;
    text-align: justify;
}
/*--------------------*/

/*-----mision-----*/
.beige{
    background-color: #ebebeb;
}
/*----------------*/

/*-----servicios-----*/
.wrap{
    flex-wrap: wrap;
}
.contenedor-titulo{
    text-align: center;
    width: 100%;
}
.contenedor-titulo > h3{
    color: #204c83;
    font-size: 2em;
    font-weight: 400;
    margin-bottom: 10px;
}
.servicios{
    align-items: center;
    display: flex;    
    height: 300px;
    justify-content: space-around;
    width: 80%;    
}
.servicios-x{
    background-color: #ebebeb;
    height: 280px;
    text-align: center;
    width: 18%;
}
.servicios-x > img{
    height: 120px;
    margin-top: 10px;
    width: 90%;
}
.servicios-x >p{
    color: #204c83;
    font-size: 1.2em;
    font-weight: 500;
    margin: 10px auto;    
    border-bottom: 1px solid #204c83;
    width: 100%;
}
.servicios-desc{
    color: black;
    font-size: 1em;
    margin-bottom: 10px;
    width: 100%;
}
/*-------------------*/
/*-----cliente-----*/
.cliente{
    background-color: #204c83;    
    color: white;
    height: 100px;
    text-align: center;
    line-height: 50px;
    width: 18%;
}

/*-----------------*/
/*-----contacto-----*/
.contenedor-contacto{
    width: 45%;
}
.contenedor-contacto >h3{
    color: #204c83;
    font-size: 2em;
    font-weight: 400;
    margin-bottom: 10px;
}
.contenedor-contacto >p{
    color: black;
    font-size: 1.2em;
    font-weight: 400;
    text-align: justify;
}
.campo{
    height: 30px;
    margin-bottom: 15px;
    width: 60%;
}
.campo-msj{
    height: 100px;
    width: 60%;
}
.form-button{
    margin-top: 15px;
    text-align: center;
    width: 60%;
}
.form-button >button{
    background-color: #204c83;
    border: 1px solid #204c83;
    color: white;
    cursor: pointer;    
    font-family: 'open sans';
    font-size: 0.9em;
    font-weight: 400;
    height: 35px;
    width: 22%;
}
.form-button >button:hover{
    background-color:  hsla(213, 61%, 32%, 0.7);
    border: 1px solid #204c83;
}

.location{
    height: 300px;
    width: 25%;
}
.location-texto{
    width: 100%;
}
.location-texto >h3{
    color: #204c83;
    font-size: 2em;
    font-weight: 400;
    margin-bottom: 10px;
}
.location-desc{    
    margin: 15px auto;
}
.location-titulo{
    align-items: center;
    display: flex;
    margin-bottom: 5px;
    width: 100%;
}
.location-titulo >i{
    color: #204c83;
    font-size: 1.2em;
    margin-right: 10px;
}
.location-titulo >h4{
    color: #204c83;
    font-size: 1.2em;
    font-weight: 500;
}
/*------------------*/

/*-----pie-----*/
.pie{
    align-items: center;
    background-color: #db090a;
    color: white;
    display: flex;
    font-size: 0.9em;
    height: 45px;
    justify-content: center;
    width: 100%;
}
/*-------------*/