/*@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap');
*/
/******************* global *********************/


html, body {
/*    max-width: 100%;
    overflow-x: hidden;*/
}


html {
/*	width: 100%;
	height: 100%;*/

}
body {
	font-family: 'Work Sans', sans-serif;
	background-color: #e2ebec;
	
	background-color: transparent;
	color: #6c7e88;
	background-image: url(../img/background-site.png);
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-size: cover;


}

p {
	font-weight: 300;
}

.container.section {
	background-color: #fff;
	margin-bottom: 50px;
	padding-bottom: 55px;
}
.section-title {
	font-size: 16px;
letter-spacing: 1px;
	background-color: #258bbc;
	height: 55px;
	color: #fff;
	padding-left: 20px;
	padding-top: 20px;

	margin-bottom: 50px;
	font-weight: 500;
}
h2 {
font-family: 'Work Sans', sans-serif;
	font-size: 20px;
	/*color: #0c5172;*/
	color: #115b7f;
	letter-spacing: 0px;
	/*border-bottom: 1px solid #c5cdda;*/
	margin-bottom: 30px;
	font-weight: 600;
}
.lead {
	

}
p.lead strong {
	
}
h1 {
	color: #258bbc;
	letter-spacing: -2px;
}
h4 {
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	font-style: italic;
	font-size: 22px;
	text-align: justify;
}

.footer {
	background-color:#638494;
	padding-top: 25px;
	padding-bottom: 35px;
	margin-bottom: 120px;
}

strong {
	
	font-weight: 600;
}


.small, small {
    font-size: 70%;
}







/* Preloader */


body {
  overflow: hidden;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 9999;
  /* makes sure it stays on top */
}

#status {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 54%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(../img/loader.gif);
	background-size: cover;
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}






/******************* banners *********************/
.banner-1 {
	background-image: linear-gradient( rgba(0, 6, 7, 0.6), rgba(0, 6, 7, 0.6) );
	height: 550px;
}
.banner-2 {
	background-image: linear-gradient( rgba(0, 6, 7, 0.6), rgba(0, 6, 7, 0.6) ), url(../img/banner-2.jpg);
	background-position: center center;
	height: 440px;
}
.banner-3 {
	background-image: linear-gradient( rgba(0, 6, 7, 0.6), rgba(0, 6, 7, 0.6) ), url(../img/banner-3.jpg);
	background-position: center center;
	height: 440px;
	margin-bottom: 50px;
}

.banner-4 {
	background-image: linear-gradient( rgba(154, 179, 194, 0.3), rgba(154, 179, 194, 0.3) );
	background-position: center center;
	height: 600px;
	margin-bottom: 50px;
}

.banner-5 {
	background-image: linear-gradient( rgba(0, 6, 7, 0.6), rgba(0, 6, 7, 0.6) ), url(../img/banner-5.jpg);
	background-position: center center;
	height: 550px;
}


.jumbotron {
	background-color: transparent;/*height: 640px;*/

}
.jumbotron span {

}
.jumbotron h1 {

	letter-spacing: -2px;
	text-shadow: 1px 1px 0px rgba(0,0,0,1);
	font-size: 3.00rem;
	font-weight: 700;
}


.jumbotron p {
	
	font-size: 46px;
	line-height: 46px;
	background-image: linear-gradient( rgba(0, 6, 7, 0.3), rgba(0, 6, 7, 0.3) );
	padding: 25px;
	text-shadow: 1px 1px 0px rgba(0,0,0,1);
	margin-bottom: 0px;
	font-weight: 300;
}





div.jumbotron form {
	
	background-image: linear-gradient( rgba(0, 6, 7, 0.3), rgba(0, 6, 7, 0.3) );
	padding: 25px;
	padding-top: 0px;
}

.jumbotron.busqueda p {
	
	background-image: linear-gradient( rgba(53, 65, 110, 0.4), rgba(53, 65, 110, 0.4) );
	text-shadow: 1px 1px 0px rgba(0,0,0,0.4);

}


div.jumbotron.busqueda form {
	
	background-image: linear-gradient( rgba(53, 65, 110, 0.4), rgba(53, 65, 110, 0.4) );
	padding: 25px;
	padding-top: 0px;
}


/******************* navbar *********************/
.navbar {
	border-bottom: 1px solid rgba(255,255,255,.3);

	/*background-image: linear-gradient( rgba(0, 6, 7, 0.6), rgba(0, 6, 7, 0.6) );*/
}
.navbar.topbar {
	border-bottom: 0;
	/*background-color: #3a4a84;*/
	background-color: #14455d;
	
}

.navbar.navbarazul {

	background-color: #14455d !important;
	
}

.navbar.topbar a {
text-shadow: none !important;
	
}

nav a.navbar-brand img {
/*
	  -webkit-filter: drop-shadow(1px 1px 0px #000000);
  filter: drop-shadow(1px 1px 0px #000000);*/
	
}


.navbar a {

	text-transform: uppercase;
	color: #fff;
	text-shadow: 1px 1px 0px rgba(0,0,0,1);
	font-weight: 700;
}
.navbar a:hover, .navbar a:focus {
	color: #fff;
	opacity: 0.6;
}
.navbar.topbar a:hover, .navbar.topbar a:focus {
	text-decoration: none;
}



.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}


.collapsing {
  -webkit-transition: height 0.30s;
  -moz-transition: height 0.30s;
  -ms-transition: height 0.30s;
  -o-transition: height 0.30s;
  transition: height 0.30s;

}


/******************* navbar fixed-top *********************/


.menubar {
	margin-top: 40px;
}




/******************* section - ser cliente *********************/
div.media span {
	padding: 25px;
	padding-bottom: 15px;
	padding-top: 15px;
	font-size: 35px;
	line-height: 40px;
	background-color: #c5cdda;
	color: #fff;

}
div.media:first-child span {
	padding-right: 33px;
}
/******************* section - nosotros *********************/

div.row.marcas div img {
	width: 80%;
}
/******************* section - servicios *********************/

.recuadro {
	padding: 35px;
	padding-top: 20px;
	padding-bottom: 20px;
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
	border-bottom-left-radius: .25rem !important;
	border-bottom-right-radius: .25rem !important;
	margin-bottom: 60px;
	position: relative;
}
div.container.section.servicios div div img {
	border-top-left-radius: .25rem !important;
	border-top-right-radius: .25rem !important;
}
h3 {
	color: #4ba8e9;
	font-size: 19px;
	text-transform: uppercase;
	margin-bottom: 20px;
}
div.container.section.servicios div div div p {
	line-height: 20px;
}
div.recuadro hr {
	border-top: 1px solid rgba(197,205,218,1);
}
div.recuadro hr.hrbottom {
	position: absolute;
	left: 10;
	bottom: 0;
	width: 70%;
	margin: 0;
	margin-bottom: 35px;
	margin-top: 15px;
}






/******************* section contact *********************/

    .form-control:focus {

        border-color: #3794db;

        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(55, 148, 219, 0.5);

    }




/* /////////////  CAPTCHA   //////////////  */

#inputCode {
    background-image: url("../img/1.jpg");
    border: medium none;
    box-shadow: none;
    color: #000;
    font-family: "Special Elite", cursive;
    font-size: 32px;
    height: 40px !important;
    letter-spacing: -2px;
    line-height: 32px;
    text-align: center;
    transition: none 0s ease 0s ;
	padding-top: 20px;
}


header  {
/*	width: 100%;
	margin-top: 280px;*/
}

video  {
/* width: 100%;*/
}


header .overlay {
/*  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  width: 100%;
  z-index: 2;*/

}
.video-wrapper:after{
/* left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 position: absolute;
 content: "";
 background-color: #000;
 opacity: 0.30;
 z-index:1;
 height: 83%;*/
}


/******************* section catálogo *********************/

.resultados {
	background-color: #c1cbde;
	color: #fff;
	padding:7px;
	padding-left: 20px;
}

input.producto-cantidad {
	width: 75px;
}

div#resultados-busqueda div div hr {
	
	border-top: 1px solid rgba(195,205,213,0.9);
}


.proximamente {
	
	padding: 10px;
	border: 2px solid #3794db;
	letter-spacing: 1px;
	display: inline-block;
	margin-top: 25px;
	background-image: linear-gradient( rgba(0, 6, 7, 0.3), rgba(0, 6, 7, 0.3) );
}


/******************* section footer *********************/

div.footer div div div div div p {
	 color: #fff;
	line-height: 16px;
	margin-bottom: 0;

}

div.footer div div div ul li a {
	color: #fff;


}

div.footer div div div ul li a:hover {
	opacity: 0.6;
}


div.footer div div div a i {
	
	color: #fff;
	margin-bottom: 15px;
	margin-top: 15px;

}

div.footer div div div a:hover i {
	
	opacity:0.6;
}


/******************* buttons *********************/

.btn {
	text-transform: uppercase;
}
.btn-primary {
	color: #fff;
	background-color: #258bbc;
	border-color: #1f81b0;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.hover, .btn-primary.focus, .btn-primary.active {
	color: #fff;
	background-color: #1f81b0;
	border-color: #1878a7;
}
.btn-success {
	color: #fff;
	background-color: #49aa22;
	border-color: #3a9a21;
}



#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  
}




div#ser-cliente.container.section.mt-5 div.row div.col-sm-12 p.section-title::after {
	content: '';
	height: 55px;
	width: 30px;
	display: block;
	background-color: #ffffff;
	margin-left: -65px;
	margin-top: -44px;
}



div#ser-cliente.container.section.mt-5 div.row div.col-sm-12 p.section-title::before {
	content: '';
	height: 55px;
	width: 30px;
	display: block;
	background-color: #ffffff;
	margin-right: -45px;
	margin-top: -20px;
	float: right;
}






/******************* responsive devices *********************/
@media (min-width: 992px) {
	
.container {
	width: 75%;
}	
	
.navbar li {
	padding-left : 2em;
	padding-right : 2em;
}
.jumbotron {
	padding-left: 11rem;
	padding-right: 11rem;
}


div.banner-5 div div.jumbotron {
	padding-left: 11rem;
	padding-right: 11rem;
}

	
	
div.jumbotron.busqueda {
	padding-left: 11rem;
	padding-right: 11rem;
}	
	
	
	
	
	
	
.container.section {
	margin-top: -55px;
	padding-left: 45px;
	padding-right: 45px;
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
}
.banner-1, .banner-2, .banner-3, .banner-5 {
	background-size: cover;
}
.recuadro {
	min-height: 465px;
}

div.row.marcasasia div img {
	width: 80%;
}	
	
	
}

@media (min-width: 768px) {
.recuadro {
	min-height: 465px;
}
}

@media (max-width: 992px) {
.jumbotron h1 {
	font-size: 2rem;
}
.jumbotron p {
	font-size: 20px;
	line-height: 24px;

}
nav a.navbar-brand img {
	height: 35px;
/*	  -webkit-filter: drop-shadow(1px 1px 0px #000000);
  filter: drop-shadow(1px 1px 0px #000000);*/
}
div.row.marcas div img {
	width: 60%;
}
div.recuadro hr.hrbottom {
	margin-bottom: 20px;
}
.lead {
	font-size: 1rem;
}

div#resultados-busqueda.resultados-busqueda div div p.lead {
	font-size: 1.50rem;
	line-height: 1.50rem;
}
	.navbar {

	background-image: linear-gradient( rgba(20, 69, 93, 1), rgba(20, 69, 93, 1) ) !important; 
	border-top: 1px solid rgba(255,255,255,.3) !important;
}
	
	.navbar li a {
	text-shadow: none !important;
		text-align: center;
		border-bottom: 1px solid rgba(255,255,255,.1);
}
	
		.navbar.menubar li:last-child a {

		border-bottom: none;
}
	
	.video-wrapper:after{

	height: 110%;
}
	
	
	
	div.jumbotron.w-100.text-white h1.display-4.aos-init.aos-animate {
		display: none;
	}
	
	h4 {

	text-align: left;
}
	
    header div div div.jumbotron.w-100.text-white p.lead {
		margin-top: 125px;
	}

}