html{
	cursor: default;
	max-width: 100%;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body{
	max-width: 100%;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}

/* Estilos de margen y tamaño */

.m-t-10 {margin-top:10px;}
.m-t-20 {margin-top:20px;}
.m-t-30 {margin-top:30px;}
.m-t-40 {margin-top:40px;}
.m-t-50 {margin-top:50px;}

.m-b-10 {margin-bottom:10px;}
.m-b-20 {margin-bottom:20px;}
.m-b-30 {margin-bottom:30px;}
.m-b-40 {margin-bottom:40px;}
.m-b-50 {margin-bottom:50px;}


.p-0 { padding: 0; }
.p-t-5 {padding-top:5px;}
.p-t-10 {padding-top:10px;}
.p-t-20 {padding-top:20px;}
.p-t-30 {padding-top:30px;}
.p-t-40 {padding-top:40px;}
.p-t-50 {padding-top:50px;}
.p-t-60 {padding-top:60px;}
.p-t-70 {padding-top:70px;}
.p-t-80 {padding-top:80px;}
.p-t-90 {padding-top:90px;}
.p-t-100 {padding-top:100px;}
.p-t-150 {padding-top:150px}
.p-t-200 {padding-top:200px}
.p-t-250 {padding-top:250px}
.p-t-300 {padding-top:300px}
.p-t-350 {padding-top:350px}
.p-t-400 {padding-top:400px}
.p-t-470 {padding-top:470px}







.p-b-10 {padding-bottom:10px;}
.p-b-20 {padding-bottom:20px;}
.p-b-30 {padding-bottom:30px;}
.p-b-40 {padding-bottom:40px;}
.p-b-50 {padding-bottom:50px;}
.p-b-60 {padding-bottom:60px;}
.p-b-70 {padding-bottom:70px;}
.p-b-80 {padding-bottom:80px;}
.p-b-90 {padding-bottom:90px;}
.p-b-100 {padding-bottom:100px;}


.p-l-40 {padding-left:40px;}

.m-l-30 {margin-left:30px;}
.m-l-40 {margin-left:40px;}


.p-r-40 {padding-right:40px;}









/* Estilos de textos */



h1 { 	
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 1.5em;
	text-transform: uppercase;
	letter-spacing: 4px;
}

h2 { 	
	font-family: 'Lato', sans-serif;
	font-weight: 700; 
}

h3 { 
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1.5em;
}

h4 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1.6em;
}

.modal-title{
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1.6em;
}


p { 
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1em;
}

.texto-intro {
	font-size: 1.2em;
}

.btn {
	border-radius: 0;
	padding: 10px 20px;
}


/* estilos de color */

.c-gris{
	color: rgba(244,244,244,1);
}

.c-gris-02{
	color: rgba(70,74,90,1);
}

.c-azul{
	color: rgba(0,225,255,1);
}

.c-blanco{
	color: rgba(255,255,255,1);
}

.c-morado{
	color: rgba(77,50,106,1);
	;
}

.c-lila{
	color: rgba(160,140,190,1);
	;
}

.carousel-control.right {
	background-image: none;
}

.carousel-control.left {
	background-image: none;
}


.menu-banner img {
	opacity: 0.7;
	transition: all ease 400ms;
}

.menu-banner img:hover {
	opacity: 1;
}

.menu-principal-seccion {
	position: absolute;
	z-index: 10;
	width:100%;
}


/* Menu principal */
.menu-principal li a {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	text-decoration: none;
	padding: 40px 10px;
	display: block;
	color: rgba(255,255,255,1);
	text-transform: uppercase;
	float: right;

}

.modal-menu-movil ul {
	padding: 0;
}

.modal-menu-movil li {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	text-decoration: none;
	list-style: none;
	list-style-type: none;
	display: block;
	padding:10px 0;
	color: rgba(100,100,100,1);
	text-transform: uppercase;
}

.modal-menu-movil li a {
	text-decoration: none;
	color: black;
}

.btn-amarillo {
	color: black;
	background: rgba(251,194,36,1);
}

.btn-amarillo:hover {
	color: black;
	background: rgba(217,167,31,1);
}



.modal-menu-movil  { background-color:rgba(0,0,0,0.8) !important; }

#modal-menu-movil .modal-content { background:none;
					box-shadow: none;
					border: 0; }

.img-rounded {
	border-radius:16px;
}

/* Estilos de seccion */

.seccion-info-01 {
	background: url(../img/bg-01.jpg) center no-repeat;
	background-size: cover;
}

.img-destacada-01 {
	box-shadow: 15px 15px 0 black;
	-webkit-transition: all ease 400ms;
}

.img-destacada-01:hover {
	box-shadow: 15px 15px 0 rgba(251,194,36,1);
}

.miniatura-portafolio {
	box-shadow: 8px 8px 0 rgba(0,0,0,0);
	-webkit-transition: all ease 400ms;
}

.miniatura-portafolio:hover {
	box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
}

.panel-productos {
	border:1px solid rgba(0,0,0,1);
	border-left: 10px solid rgba(251,194,36,1);
	padding: 20px;
	margin-bottom: 20px;
	min-height: 200px;
	box-shadow: 10px 10px 0 rgba(0,0,0,0);
	-webkit-transition:all ease 300ms;
}

.panel-productos:hover {
	box-shadow: 10px 10px 0 rgba(0,0,0,0.2);
}






/* estilos de botón */



/* Estilos de bootstrap */




/* Portrait and Landscape */
@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3) { 


}



/*Estilo de boton whatssap*/
.whatsapp-float { position: fixed;
	z-index: 99;
	bottom: 20px;
	right:20px;
	 }


.whatsapp-float p { 
	font-weight: 700;
	padding: 2px 10px;
	border-radius:10px;
	margin-top:10px;
	background: rgba(0,192,75,1);
}

/* CSS used here will be applied after bootstrap.css */  
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
	display: block;
	height: auto;
	width: 100%;
	line-height: 1;

}

/*
Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
CSS from:       http://codepen.io/transportedman/pen/NPWRGq
and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}

.carousel-fade .carousel-control {
z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
		  transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
		  transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
		  transform: translate3d(0, 0, 0);
}
}