@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
/* CSS Document */
html, body{
	height: 100%;
	width: 100%;
}

body {
	overflow-x: hidden;
	font-family: 'Lato', sans-serif;
	color: #505962;
}

/*--- Navbar ---*/
	
.navbar{
	text-transform: uppercase;
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .1rem;
	background: rgba(240,240,240,.9)!important;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.navbar-brand img{
	height: 3rem;
}
.navbar-nav li{
	padding-right: .7rem;
}
.navbar-light .navbar-nav .nav-link{
	color: #565656;
	padding-top: .8rem;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover{
	color: #116FB8;
}

/*--- Slider ---*/

.carousel-item{
	height: 100vh;
}
.carousel-caption{
	position: absolute;
	top: 45%;
}
.carousel-caption h3{
	font-size: 3em;
	max-width: 1200px;
	margin-bottom: 60px;
}
.carousel-caption p{
	max-width: 1200px;
}
.overlayCarousel{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	content: '';
	background:rgba(0, 0, 0, 0.7);
}
/*--- Slider Team ---*/
#carouselTeam{
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.carouselTeamIndicator{
	height: 45vh;
}
.carouselTeamPrevIcon,
.carouselTeamNextIcon{
	filter: invert(100%);
}

/*--- Fixed image Servicios---*/
#fixedServicios{
	background-image: url(../img/StockSnap_DFQT6IPQMU.jpg);
	padding-top: 45px;
	height: 60%;
	width: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	position: relative;
}
#fixedServicios .overlay{
	padding-top: 50px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	content: '';
	background:rgba(0, 0, 0, 0.7);
}
#fixedServicios .lineSeparator{
	border: 0; 
	height: 1px; 
	background-image: -webkit-linear-gradient(left, rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0));
	background-image: -o-linear-gradient(left, rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0)); 
	background-image: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0)); 
}
@media screen and (max-width: 1018px) {
  div#fixedServicios {
    height: 55%;
  }
}
@media screen and (max-width: 817px) {
  div#fixedServicios {
    height: 60%;
  }
}
@media screen and (max-width: 767px) {
  div#fixedServicios {
    height: 95%;
  }
}
@media screen and (max-width: 557px) {
	div#fixedServicios h2 {
	font-size: 1.6em;
	}
	div#fixedServicios h4{
    font-size: 1.6em;
  }
}
@media screen and (max-width: 450px) {
	div#fixedServicios {
	height: 85%;
	}
	div#fixedServicios h2{
		font-size: 1.3em;
	}
	div#fixedServicios h4{
    font-size: 1em;
  }
	div#fixedServicios h5{
		font-size: 1em;
	}
	div#fixedServicios .col-md-3{
		padding-bottom: 10px;
	}
}
@media screen and (max-width: 300px) {
  div#fixedServicios {
    height: 90%;
  }
}
#fixedServicios .card{
	max-width: 255px;
	background-color: rgba(0,0,0,0);
	border-color: white;
}
#fixedServicios h2{
	font-weight: 900; 
	color: white;
}
#fixedServicios h4{
	font-weight: 900; 
	color: white;
}
#fixedServicios h5{
	font-weight: 900; 
	color: white;
}
#fixedServicios p{
	font-weight: 900; 
	color: white;
}
#fuenteRobos{
	font-size: x-small;
}

/*--- Servicios---*/
#servicios{
	background-image: url(../img/servicios_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 70px;
	padding-bottom: 70px;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}
#servicios h1{
	color: #333333;
	font-weight: 700;
}
#servicios p{
	padding-bottom: 50px;
}
.servicios h5{
	padding-bottom: 10px;
	font-weight:900;
	text-transform: uppercase;
	font-size: 1rem;
	color: black;
}
.servicios .far, .servicios .fas, .servicios .fab{
	padding-bottom: 20px;
	color: rgba(17,111,184,0.80);
}
.servicios .far:hover, .servicios .fas:hover, .servicios .fab:hover{
	transform: scale(1.3);
}
#btnPlanes, #butLogin, #btnContratar{
	margin-top: 30px;
	background-color: #116FB8;
	border-color: #116FB8;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
}
#btnPlanes:hover, #butLogin:hover, #btnContratar:hover{
	background-color:rgba(41,84,114,.9);
	border-color: rgba(41,84,114,.9);
	box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
}
.lineSeparator{
	border: 0; 
	height: 1px; 
	background-image: -webkit-linear-gradient(left, rgba(140,139,139,0),rgba(140,139,139,1),rgba(140,139,139,0));
	background-image: -o-linear-gradient(left, rgba(140,139,139,0),rgba(140,139,139,1),rgba(140,139,139,0)); 
	background-image: linear-gradient(to right, rgba(140,139,139,0),rgba(140,139,139,1),rgba(140,139,139,0)); 
}
.planes-check{
	color: rgba(17,111,184,0.80);
}
.planes-x-mark{
	color: #565757;
}


/*--- Soluciones ---*/
#soluciones{
	padding-top: 70px;
	padding-bottom: 70px;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}
#soluciones h1{
	color: #333333;
	font-weight: 700;
}
#soluciones p{
	padding-bottom: 50px;
}
#personal, #rfid, #rutas, #robo{
	background:rgba(240,240,240,1.00);
	padding-top: 60px;
}
#rutas, #fatiga, #robo, #geocerca{
	padding-bottom: 40px;
	border: 1px solid #EEE;
}
#personal,#vehicular,#rfid,#combustible{
	padding-bottom: 40px;
	border: 1px solid #EEE;
}
#personal,#rfid,#rutas,#robo{
	box-shadow: 2px 2px 5px 0 rgba(0,0,0,.3);
}
#fatiga,#combustible,#vehicular,#robo,#geocerca{
	padding-top: 60px;
}
#personal h5, #vehicular h5, #rfid h5, #rutas h5, #combustible h5, #fatiga h5, #robo h5, #geocerca h5{
	padding-bottom: 10px;
	font-weight:900;
	text-transform: uppercase;
	font-size: 1rem;
	color: black;
}
#personal .fas, #vehicular .fas, #rfid .far, #rutas .fas, #combustible .fas, #fatiga .far,#robo .fas,#geocerca .fas{
	padding-bottom: 20px;
	color: rgba(17,111,184,0.80);
}
#personal .fas:hover, #vehicular .fas:hover, #rfid .far:hover, #rutas .fas:hover, #combustible .fas:hover, #fatiga .far:hover, #robo .fas:hover, #geocerca .fas:hover{
	transform: scale(1.3);
}
#personal .btn, #vehicular .btn, #rfid .btn, #rutas .btn, #combustible .btn, #fatiga .btn, #robo .btn, #geocerca .btn{
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
	border-color: rgba(174,174,174,1.00);
}
#personal .btn:hover, #vehicular .btn:hover, #rfid .btn:hover, #rutas .btn:hover, #combustible .btn:hover, #fatiga .btn:hover, #robo .btn:hover, #geocerca .btn:hover{
	box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
	border-color: black;
}

/*--- FAQ ---*/
#faq{
	background-color: rgb(244,244,244);
	border-bottom: 1px solid #DDD;
	padding-top: 70px;
}
#faq h1{
	color: #333333;
	font-weight: 700;
}
#faq p{
	padding-bottom: 50px;
}
#leftFAQPanel{
	background-color: rgb(112,169,212);
	position: relative;
	padding-top: 40px;
	margin-bottom: -121px;
	z-index: 22;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.3);
}
#leftFAQPanel .far{
	color: rgba(255,255,255,0.85);
	padding-bottom: 20px;
}
#faq button{
	text-decoration: none;
	text-align: left;
	color: white;
	font-size: .55em;
}
#faq button:hover{
	font-size:.6em;
	font-weight: 800;
}
#faq button:focus{
	font-size:.6em;
	font-weight: 800;
}
@media screen and (max-width: 768px) {
  div#leftFAQPanel {
    margin-bottom: 0px;
  }
}

/*--- Card ---*/
.card{
	height: 100%;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

/*--- Fixed image ---*/
#fixed{
	background: url(../img/bg_mvv.png) no-repeat center center fixed;
	display: table;
	height: 70%;
	position: relative;
	width: 100%;
	background-size: cover;
}

/*--- Mision, Vision, Valores ---*/
#somos{
	background-color: rgb(244,244,244);
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}
#mvv{
	background: rgba(17,111,184,0.60);
	position: relative;
    margin-top: -121px;
    z-index: 22;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.3);
}
#mision{
	background-color: rgb(83,152,204);
}
#vision{
	background-color: rgb(112,169,212);
}
#valores{
	background-color: rgb(83,152,204);
}
#mision h5, #vision h5, #valores h5{
	font-size: 1.5em;
	font-weight: 900;
}
#mision p, #vision p, #valores p{
	font-size: 1em;
	font-weight: 900;
}
#mision:hover, #vision:hover, #valores:hover{
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.3);
	z-index: 25;
}
#mision,#vision,#valores{
	padding: 30px;
}
#mision .fas, #vision .far, #valores .far{
	padding-bottom: 20px;
	color: rgba(255,255,255,0.85);
}
#mision h5, #vision h5, #valores h5{
	padding-bottom: 10px;
	color: rgba(255,255,255,0.85);
}
#mision p, #vision p, #valores p{
	color: rgba(255,255,255,0.85);
}
#conocenos{
	color: #333333;
	font-weight: 700;
}

/*--- Contacto ---*/
#fixedContacto{
	background-image: url(../img/bg_call_center.jpg);
	padding-top: 45px;
	height: 15%;
	width: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	position: relative;
}
#fixedContacto .overlay{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	content: '';
	background:rgba(0, 0, 0, 0.4);
}
#contacto{
	padding-top: 60px;
	padding-bottom: 60px;
}
#map-container iframe{
	box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)!important;
}
#escribenos h2{
	font-weight: 700;
	color: #333333;
}

/*--- Footer ---*/
#footer{
	background-color: rgb(244,244,244);
	border-top: 1px solid #777777;
}
#footerWrapper{
	padding-top: 20px;
	padding-bottom: 20px;
}
#btnNoticias{
	background-color: #116FB8;
	border-color: #116FB8;
	margin-left: 15px;
}
#btnNoticias:hover{
	background-color:rgba(41,84,114,.9);
	border-color: rgba(41,84,114,.9);
	box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
}
#menuFooter h2{
	color: #333333;
	font-weight: 900;
	font-size: 1.5em;
}
#menuFooter a{
	text-decoration: none;
}
#menuFooter h4{
	font-size: 1em;
	color: #565656;
}
#menuFooter h4:hover{
	color: #116FB8;
	font-size: 1.1em;
	font-weight: 700;
}
#copyright{
	border-top: 1px solid #AAA;
	background-color: rgb(86, 87, 87);
}
#copyrightLetras{
	color: white;
}
#copyrightLetras a:hover{
	text-decoration: none;
	color: white;
}
#copyright a{
	color: #116fb8;
}
#socialMediaGroup{
}
.socialMedia .fab{
	transform: scale(1.5);
}
.socialMedia:hover{
	cursor: pointer;
}
.socialMedia .fab:hover{
	transform: scale(2);
	color: #116FB8;
}
.socialMedia a{
	color: #565656;
}
@media screen and (max-width: 768px) {
	div#socialMediaGroup{
	 padding-top: 0px;
	}
}


/*============BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phone, 576px and up)
@media (min-width: 576px) {...}

Medium (md) devices (tablets, 768 px and up)
@media (min-width: 768px) {...}

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) {...}

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {...}

========================*/