/*SECCIÓN 1 BRANDING*/
 .parallax{
	width: 100%;
	  height: 100vh;
	  background-image: url('../img/Imagen\ Corporativa\ IDentidad\ Visual.webp');
	  background-position: center;
	  background-size: cover;
	  background-repeat: no-repeat;
	  background-attachment: fixed;
	  display: flex;
	  justify-content: center;
	  align-items: center;	
	  -webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
  }
  
  @media screen and (max-width:768px){
	.parallax{
	  height: 50vh;
	}
  }



/*SECCIÓN3-GALERÍA*/

/**galería logos clientes/


/*EFECTOS DE LA GALERÍA*/
.gallery {
	display: flex;
	flex-wrap: wrap;
	/* Compensate for excess margin on outer gallery flex items */
	margin: -1rem
}

.gallery-item {
	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
	margin: 1rem;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.gallery-image:hover {
	transform: scale(1.15);
}


/*cosas branding*/
h6
{
  text-shadow: 2px -8px 9px rgba(0, 0, 0, 0.4);
  text-align:center;
  font-weight:500;
  text-transform:uppercase;
  font-size: 4rem;
  margin-top: -3.7rem;
  letter-spacing:5px;
  color:white;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  position:relative;
  z-index:1;
}

@media screen and (max-width: 480px){  
	.card-body h6{
		font-size: 3em;		
		margin-top: -2.7rem;
	}	
}

.card1 
{
  margin: 1rem 0 1rem 0;
}
.card-body
{
  padding:0;
}

a.btn
{
  width:100%;
  padding: 1rem;
  border-radius:0;
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:1.1rem;
  border:7px solid #1c1f23;;
}

/* https://ianlunn.github.io/Hover/ I'm sorry for the minify, it takes up less space so... */
[class^="hvr-"] 
{margin: .4em;padding: 1em;text-transform: uppercase;cursor: pointer;border-top:4px solid white;text-decoration: none;-webkit-font-smoothing: antialiased;}
.hvr-bounce-to-bottom{
	display:inline-block;
	vertical-align:middle;
	-webkit-transform:perspective(1px) translateZ(0);
	transform:perspective(1px) translateZ(0);
	box-shadow:0 0 1px transparent;
	position:relative;-webkit-transition-property:color;
	transition-property:color;
	-webkit-transition-duration:.5s;
	transition-duration:.5s;}
.hvr-bounce-to-bottom:before{
	content:"";
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:white;
	-webkit-transform:scaleY(0);
	transform:scaleY(0);
	-webkit-transform-origin:50% 0;
	transform-origin:50% 0;
	-webkit-transition-property:transform;
	transition-property:transform;
	-webkit-transition-duration:.5s;
	transition-duration:.5s;
	-webkit-transition-timing-function:ease-out;
	transition-timing-function:ease-out}
.hvr-bounce-to-bottom:active,.hvr-bounce-to-bottom:focus,.hvr-bounce-to-bottom:hover{
	color:#1c1f23;}
.hvr-bounce-to-bottom:active:before,.hvr-bounce-to-bottom:focus:before,.hvr-bounce-to-bottom:hover:before{
	-webkit-transform:scaleY(1);
	transform:scaleY(1);
	-webkit-transition-timing-function:cubic-bezier(.52,1.64,.37,.66);
	transition-timing-function:cubic-bezier(.52,1.64,.37,.66)}


/* The tutorial I used : https://w3bits.com/css-image-hover-zoom/ */
/* [1] The container */
.img-hover-zoom {
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* Zoom-n-rotate Container */
.img-hover-zoom--zoom-n-rotate img {
  transition: transform .5s ease-in-out;
}

/* The Transformation */
.img-hover-zoom--zoom-n-rotate:hover img {
  transform: scale(1.6) rotate(25deg);
}

/*APLICATIVOS DE MARCA*/

.item-7 { 
	background-image: url('../img/Diseño\ de\ Imagen\ Corporativa\ \(1\).webp');
  }
  
  .item-8 { 
	background-image: url('../img/Diseño\ de\ Imagen\ Corporativa\ \(2\).webp');
  }
  
  .item-9 { 
	background-image: url('../img/Diseño\ de\ Imagen\ Corporativa\ \(3\).webp');
  }
  
 .item-10 { 
	background-image: url('../img/Diseño\ de\ Imagen\ Corporativa\ \(4\).webp');
  }
  
  .item-11 { 
	background-image: url('../img/Diseño\ de\ Imagen\ Corporativa\ \(5\).webp');
  }
    
  .item-12 { 
	background-image: url('../img/Diseño\ de\ Imagen\ Corporativa\ \(6\).webp');
  }

  .item-13 { 
	background-image: url('../img/Diseño\ de\ Imagen\ Corporativa\ \(7\).webp');
  }