body {
font-family: 'Roboto', sans-serif;
color: #20252e;
}

h1 {
font-family: 'Roboto', sans-serif;
font-style: italic;
font-weight: 900;
}

h1 span{
color: #e20917;
}

h2 {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: 300;
color: #e20917;
font-size: 23px;
line-height: 35px;
margin-top: 50px;
}

h6 {
color: #e20917;
font-size: 22px;
}

a {
text-decoration: none;
}

a:focus,
button:focus,
select:focus {
  outline: 0;
}

p{
font-weight: 400;
line-height: 1.8em;
}

p span{
font-weight: 500;
}    

.mt-10{
margin-top: 50px;
}

.pt-10{
padding-top: 50px;
}

@media (min-width: 960px) {
    .mt-10 {
        margin-top: 100px;
    }
    .pt-10 {
        padding-top: 100px;
    }   
}

header {
box-shadow: 0 2px 13px 0 rgb(0 0 0 / 40%);
position: absolute;
top: 0px;
width: 100%;
background: rgba(255, 255, 255, 1);
z-index: 100;
}

@media (min-width: 990px) {
    header {
        top: 10px;
        background: rgba(255, 255, 255, 0.9);
    }
}

.marca-serpecom {
width: 80px;
display: block;
margin: 0 30px 0 auto;
text-align: center;
}

@media (min-width: 960px) {
.marca-serpecom {
    width: 100px;
 }
}

.navbar {
padding: 0.2rem 0rem;
}

.navbar-brand {
display: block;
padding: 5px 0px;
margin: 0;
}

.navbar-light .navbar-toggler{
border: none;
position: relative;
}

.navbar-toggler{
padding: 0px;
}    

.navbar-collapse{
padding: 20px 0;
}  

@media (min-width: 990px) {
    .navbar-collapse {
        padding: 0px 0;
    }
}


.bt-serpecom {
display: block;
width: 100%;
    }
    
.bt-serpecom, .bt-serpecom-dos {
border-radius: 50px;
color: black;
font-size: 14px;
}

.bt-serpecom-dos {
background:#e20917;
color: white;
margin-top: 10px;
}

.bt-serpecom:hover, .bt-serpecom-dos:hover {
background:#be0917;
}

.btn-outline-danger {
border: 2px solid #e20917;
}

.btn-outline-danger:hover{
background: #e20917;
}

.navbar-nav .nav-link {
color:#000 !important;
text-transform: uppercase;
font-size: 18px;
margin-right: 3px;
letter-spacing: .0px;
font-weight: 500;
text-transform:initial;
}

.navbar-nav .nav-link:hover {
color:rgb(119, 119, 119) !important;
}

.dropdown-menu {
border:none;
border-top: 3px solid #029fd9;
box-shadow: 0px 8px 10px #00000033;
background: white;
padding: 18px 15px;
border-radius: 0px;
}

.dropdown-item {
color: #777;
font-weight: 400;
font-size: 15px;
}

.dropdown-item:hover, .dropdown-item:focus {
color: #333;
text-decoration: none;
background-color: transparent;
}

@media (min-width: 960px) {
    .navbar-nav .nav-link {
        font-size: 15px;
    } 
} 
#servicios-dos{
background:url(../img/servicios/recorredores-de-produccion.jpg) bottom;
background-attachment: initial;
background-size: cover;
}

#politica-uno{
background:url(../img/politica/politica-dos.jpg) bottom;
background-attachment: initial;
background-size: cover;
}

#quienes-uno{
background:url(../img/quienes-somos/quienes-somos-serpecom.jpg) bottom;
background-attachment: initial;
background-size: cover;
}

#operador-tele{
background:url(../img/servicios/operador-1.jpg) bottom;
background-attachment: initial;
background-size: cover;
}

#medi-fisicas{
background:url(../img/servicios/operador-telesupervision.jpg) bottom;
background-attachment: initial;
background-size: cover;
}

#tareas-generales{
background:url(../img/servicios/tareas-generales.jpg) bottom;
background-attachment: initial;
background-size: cover;
}

.destacado-uno{
height: 500px;
background:url(../img/serpecom-servicio-destacado.jpg) bottom;
background-size: cover;
background-attachment:initial;
padding: 200px 0;
margin-top: 50px;
color: white;
}

@media (min-width: 960px) {
    .destacado-uno, #servicios-dos {
        background-attachment: fixed;
    } 
    #servicios-dos {
        background-attachment: fixed;
    }
    #politica-uno {
        background-attachment: fixed;
    }  
    #quienes-uno {
        background-attachment: fixed;
    }
    #operador-tele {
        background-attachment: fixed;
    }  
    #tareas-generales {
        background-attachment: fixed;
    } 
    #medi-fisicas{
        background-attachment: fixed;
    }                         
}

.destacado-dos{
background:#525252;
padding-bottom: 100px;
}

.destacado-dos h1{
color: #e20917;
}

.destacado-p-uno {
font-weight: 400;
line-height: 1.8em;
font-size: 20px;
}

.titular-uno{
font-size: 23px;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
line-height: 30px;
}

.titular-dos{
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
margin-top: 10px;
}

@media (min-width: 960px) {
    .titular-uno{
    font-size: 40px;
    line-height: 55px;
    } 
    .titular-dos{
    font-size:17px;
        }    
}

.slider-video{
position: relative;
height: 90vmin;
overflow: hidden;
}

@media (min-width: 960px) {
    .slider-video{
        height: 70vmin;
        }
    }

video {
/* override other styles to make responsive */
height: auto;
width:100vmax;
overflow: hidden;
}

video.video-cover {
display: inline;
overflow: hidden;
}

.video-cover {
max-width: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);   
z-index: 10; 
background: black;
}

.tit-video{
position: relative;
z-index: 15;
width: 100%;
}

.tit-video hgroup{
margin-top:calc((20vmin) + 80px); 
    }

.tit-video h1{
font-size: 30px;
text-align: center;
font-style: normal;
font-weight: 500;
color:white;
text-shadow:0px 2px 30px rgba(0, 0, 0, 0.39);
}

.tit-video h2{
font-size: 14px;
letter-spacing: .1px;
text-align: center;
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: 500;
color:white;
text-shadow:0px 2px 30px rgba(0, 0, 0, 0.39);
width: 100%;
text-align:center;
margin-top: 0px;
}

@media (min-width: 960px) {
.tit-video h1{
    font-size: 46px;
    }
}

/* Estilos servicios */

.btn-iconos {
display: inline-block; 
padding-top: 150px;
width: 100%;
margin: auto;
text-align: center;
margin-top: 50px;
padding: 140px 5px 10px 5px;
background: center 20px no-repeat ;
background-color: #dfeeff;
box-shadow: 0px 2px 20px rgb(0 0 0 / 30%);
background-size: 70px;
min-height: 150px;
background-image: url(../img/servicios/servicios-1.svg);
border-radius: 15px;
color:#03a9f4;
}

.btn-iconos h3{
font-family: 'Roboto', sans-serif;
font-size:  15px;
font-weight: 400;
text-decoration: none;
}

.btn-iconos:hover {
text-decoration: none;
background-color: #fff;
box-shadow: 0px 2px 20px rgb(0 0 0 / 50%);
color:#03a9f4;
}

.btn-iconos h3:hover{
color: #03a9f4;
}

#ico-generales {
background-size: 100px;
background-image: url(../img/servicios/servicios-2.svg) ;
}

#ico-telesupervision {
background-size: 85px;
background-image: url(../img/servicios/servicios-3.svg) ;
}

#ico-mediciones {
background-size: 90px;
background-image: url(../img/servicios/servicios-4.svg) ;
}

/* Estilos footer*/

footer {
background-color: #ccc;
color: #f5f5f5;
}

footer h3 {
font-size: 19px;
margin-bottom: 20px;
font-weight: 300;
}

footer p {
font-size: 14px;
font-weight: 400;
}

footer a {
color: white;
    }

footer > div > div > div {
padding: 80px;
}

footer a {
display: block;
color: #ffffffd0;
font-size: 14px;
font-weight: 400;
margin-bottom: 10px;
letter-spacing: .2px;
}

footer a:hover {
text-decoration: none;
color: white;
}

.primer-foot {
background-color: red;
padding-left: 30px;
}

.segundo-foot {
background-color: rgb(219, 3, 3);
padding-left: 30px;
}

@media (min-width: 960px) {
    .primer-foot, .segundo-foot {
        padding-left: 50px;
        }
    }
    

#mapa {
padding: 0px;
min-height: 300px;
    }

.review-box, .gm-style .place-card-large {
display: none !important;
visibility: hidden;
}    

.i4ewOd-pzNkMb-haAclf {
    display: none;
}  

/* Estilos secciones interiores */

.sec-interiores {
height: 400px;
position: relative;
}  

.overlay{
height: 400px;
width: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
} 

.sec-interiores h1 {
margin-top: 200px;
font-weight: 300;
text-transform: uppercase;
font-style: normal;
color: white;
text-align: center;
font-size: 30px;
letter-spacing: .5px;
position: relative;
} 

.tit-lista {
font-weight: 700;
text-transform: uppercase;
font-style: normal;
color: white;
font-size: 18px;
line-height: 28px;
letter-spacing: .0px;
margin: 30px 0px 50px 0
}

.tit-lista::after {
content: "";
display: block;
height: 2px;
width: 80px;
margin-top: 20px;
background: #70cefa;    
}
 
.quienes-somos {
background: url(../img/quienes-somos/seccion.jpg) -150px center no-repeat;
background-size:cover;
}  

.politica {
background: url(../img/politica/politica.jpg) center center;
background-size:cover;
}  

.servicios {
background: url(../img/servicios/seccion.jpg) center center;
background-size:cover;
}  
   
.contacto{
background: url(../img/contacto/contacto.jpg) center center;
background-size:cover;
}  

.lista-servicios {
background: #e20b19;
padding: 30px;
color: white;
margin: 0px 0 40px 0;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.15)
} 

@media (min-width: 960px) {
    .quienes-somos{
        background: url(../img/quienes-somos/seccion.jpg) center center no-repeat;
        background-size: cover;
        }
    }

.bg-uno {
background: #f5f5f5;
} 

.bg-dos {
background: #696969
} 

.bg-tres {
background: #696969;
} 

.bg-cuatro {
background: #696969;
} 

.bg-cinco {
background: #696969;
}  

.lista-servicios ul {
margin: 0 0 0 0px;
padding: 0px;
}  

.lista-servicios ul li {
margin: 0 0 20px 0;
padding: 0px;
font-weight: 300;
font-size: 15px;
letter-spacing: .2px;
list-style: none;
 }  

 .lista-servicios ul li span{
font-weight: 500;
}  

 ul.lista-politicas li::before, .lista-servicios ul li::before{
content: '';
display: inline-block;
height: 20px;
width: 20px;
background: url(../img/politica/flecha.svg) no-repeat;
position: relative;
top: 5px;
}

.lista-servicios ul li::before{
 background: url(../img/servicios/flecha.svg) no-repeat;
}

 /* Politicas */

ul.lista-politicas{
margin: 0;
padding: 0;
font-weight: 400;
line-height: 30px;
}

ul.lista-politicas span{
font-weight: 500;
    }  

ul.lista-politicas li{
margin:20px 0;
list-style: none;
}    

ul.lista-politicas li::before{
background: url(../img/politica/flecha.svg) no-repeat;
}   

.bg-politicas{
padding-bottom: 50px;
}

 /* servicios */

 .destacado-tres {
padding:50px 30px;
box-sizing: border-box;
background: rgb(168, 168, 168);
color: white;
font-size: 23px;
margin-top: 50px;
}

@media (min-width: 960px) {
    .destacado-tres{
        font-size: 33px;
        }
    }
    
.destacado-cuatro {
color: rgb(0, 0, 0);
}
 
.sec-mediciones {
color: rgb(0, 0, 0);
margin: 0px 0 0px 0;
padding: 0;
background: url(../img/fondo-lista.svg) no-repeat 0px 40px;
}

.sec-politicas {
background: url(../img/fondo-lista-dos.svg) no-repeat 0px 40px;
background-size: 150%; ;
}

@media (min-width: 960px) {
    .sec-mediciones {
        background: url(../img/fondo-lista.svg) no-repeat 0px 130px;
        background-size: 70%; ;
        }
        .sec-politicas {
        background: url(../img/fondo-lista-dos.svg) no-repeat 0px 40px;
        background-size: 150%; ;
        }       
}

 /* formulario */

 .datos-contacto p a{
color: black;
}

.datos-contacto::before{
display:block;
margin: 0 auto 30px auto;
height: 2px;
content:"";
width: 80px;
background: #70cefa;
}
    
 .sec-contacto h6, .sec-contacto p{
text-align: center;
}

 @media (min-width: 960px) {
    .sec-contacto h6, .sec-contacto p{
     text-align: left;
    }
    .datos-contacto::before{
    margin: 0 0 30px 0;
            }
}

#contact_form label {
margin-top: 20px;
margin-bottom: 5px;

}

#contact_form input.form-control{
font-weight: 300;
background: transparent;
border-bottom: 2px solid #009cdb;
border-radius: 0px;
}

textarea.form-control {
border: 2px solid #009cdb;  
background: transparent;
    }

.cont-contacto {
padding: 20px;
box-shadow: 0px 2px 20px rgb(0 0 0 / 20%);
 /*border-radius: 15px;*/
background: #fff;
}

@media (min-width: 960px) {
    .cont-contacto{
        padding: 50px;
    }
}

.cont-contacto h2 {
margin-top: 20px;
color: black;
font-weight: 500;
}

.alert-dismissable .close {
position: relative;
top: -2px;
color: inherit;
}

button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
}

.close {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}

.form-control {
border: 0px;
}