body{

	background-color: #f5f5f5;
  overflow-x: hidden !important;
}


/*----------------------------------------- VIDEO ---------------------------------*/

.video-index{
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  height: 100%;
}




/*--------------------------------------------------- procesos -------------------------------------------------------------------*/

	.flex-container {
		
  		display: flex;
  		flex-wrap: wrap;
  		flex-direction: row;
  		 justify-content: center;
  	
  
}

	.flex-container > div{
		background-color: #fbfbfb;
  		margin: 40px 65px 40px 65px;
  	 	max-width:350px;
  	 	text-align: center;	
  	 	color: #2b2b2b;
		font-weight: lighter;
-webkit-box-shadow: 0px 3px 39px -8px rgba(224,224,224,1);
-moz-box-shadow: 0px 3px 39px -8px rgba(224,224,224,1);
box-shadow: 0px 3px 39px -8px rgba(224,224,224,1);

	}	
	.element {
		position: relative;
	}

.flex-container > div:hover{
	 transition: 0.8s ease;
background: #91dfa6; /* Old browsers */
background: -moz-linear-gradient(left, #91dfa6 0%, #93dfca 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #91dfa6 0%,#93dfca 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #91dfa6 0%,#93dfca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91dfa6', endColorstr='#93dfca',GradientType=1 ); /* IE6-9 */
	

 }
		.linea{
			width: 20%;
			margin: auto;

   height: 2px;
   border-bottom: 1px solid #595959;
		}
 .middle {
  transition: 0.2s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.boton {
      font-family: Montserrat;
  font-weight: 600;
  background-color: #fff;
  color: #2b2b2b;
  font-size: 14px;
  padding: 16px 32px;
  border-radius: .12rem;

}

.boton:hover{
  background-color: #4c4c4c;
  color: white;
  transition: all 0.5s ease;
}

/*--------------------- HOVER BOTON ------------------------------*/

/*---------------------- FIN BOTON -----------------------------*/

.element:hover .texto {
	opacity: 0.1;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.element:hover > h2 {
	opacity: 0.1;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.element:hover  .middle {
	opacity: 1;
	}

.element:hover .linea {
	opacity: 0.1;
	   }
	.texto {
	  font-family: Roboto;
	font-size: 16px;
	line-height: 1.6;
		text-align: center;
		margin: 20px 40px 30px 40px;
		font-weight: 300;

	
	}

		.flex-container > div > h2 {
			font-family:Montserrat;
			color: #2b2b2b;
			font-size: 18px;
			text-align: center;
			text-decoration: none;
			margin-top: 25px;
			margin-bottom: 20px; 
			font-weight: 500;
		}

		.flex-container > div > a > img {
				
					
					margin-bottom: 15px; 
				}

.button-index {
		display:none;
	    background-color: inherit; /* Green */
    border: none;
   color: #2b2b2b;
    	font-weight: 500;
	font-family: 'Montserrat', sans-serif;
    padding: 10px 15px;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    border:1px solid black;
    margin-bottom: 25px;
}


/*----------------------------- MEDIA ---------------------------------------*/
  @media screen and (max-width: 1500px){
      .flex-container > div{
    margin: 40px 45px 40px 45px; 
  }
  }


    @media screen and (max-width: 1400px){
      .flex-container > div{
    margin: 40px 20px 40px 20px; 
  }
  }

      @media screen and (max-width: 1200px){
      .flex-container > div{
    margin: 40px 5px 40px 5px; 
  }
  }


    @media screen and (max-width: 1100px){


.button-index {
		display: inline-block;

}

.flex-container > div{
       margin: 20px 100px 20px 100px;
       max-width:600px;
}

.flex-container > div:hover{
background: white;

}
.element:hover .texto {
	opacity: 1;

}
.element:hover > h2 {
	opacity: 1;
}
.middle {
	display: none;
}
.element:hover .linea {
	opacity: 1;
}
}





    @media screen and (max-width: 700px){


  .flex-container > div{
    margin: 0px 15px 15px 15px; 
  }

  .flex-container .h2{
    font-size: 18px;
  }

    .flex-container .texto{
    font-size: 16px;
    margin: 20px 20px 20px 20px;
  }

.video-index{
  padding-top: 20px;
  padding-bottom: 0px;
  margin-bottom:0px;
  width: 100%;
  height: 100%;
}

  }