html,
body {
	width:100%;
  	height: 100%;
  	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
}

.content_holder {
	width:100%;
  	height: 100%;
  	display: -ms-flexbox;
  	display: flex;
  	color: #000000;
	font-size: 13px;
	text-align: center;
	font-family: arial;
	overflow:hidden;
	margin:0;
	padding:0;
}

a{
  	color: #ffffff;
	text-decoration: none;
}

a:hover{
  	color: #D9D9D9;
	text-decoration: none;

}
/*
 * animacion
 */
.udenio {
  	width: 33.333333%;
  	transition: width 800ms;
	background-color: #FFFFFF; 
	height: 100%; 
	padding-top: 20%;
}

.udenio:hover {
  width: 66.666666%;
  
}

.udenio:hover .nikon, .udenio:hover .kandao {
  width: 16.5%;
}


.nikon {
  	width: 33.333333%;
  	transition: width 800ms;
	background-image: url(../img/fondo-nikon.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	height: 100%; 
	padding-top: 20%;
}

.nikon:hover {
  width: 66.666666%;
}

.nikon:hover .udenio, .nikon:hover .kandao {
  width: 16.5%;
}

.nikon-banderas {
  /*display: none;*/
  display: inline-flex;
  opacity:0;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.nikon:hover .nikon-banderas {
  /*display: inline-flex;*/
   opacity:1;
   transition-delay: 1s;
   transition: all 1s;
   -moz-transition: all 1s;
   -webkit-transition: all 1s;
}


.kandao {
  	width: 33.333333%;
  	transition: width 800ms;
	background-image: url(../img/fondo-kandao.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	height: 100%; 
	padding-top: 20%;
}

.kandao:hover {
  width: 66.666666%;
}

.kandao:hover .udenio, .kandao:hover .nikon {
  width: 16.5%;
}

.kandao-banderas {
  /*display: none;*/
  display: inline-flex;
  opacity:0;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.kandao:hover .kandao-banderas {
  /*display: inline-flex;*/
   opacity:1;
   transition-delay: 1s;
   transition: all 1s;
   -moz-transition: all 1s;
   -webkit-transition: all 1s;
}

@media (max-width: 768px) {
	
	.content_holder {
		width:100%;
		height: 100%;
		display: block;
		color: #000000;
		font-size: 13px;
		text-align: center;
		font-family: arial;
		overflow:auto;
		margin:0;
		padding:0;
	}

  	.udenio {
	  	width:100%;
	  	height: 33.333333%;
		max-height: 200px;
	  	transition: height 800ms;
		background-color: #FFFFFF; 
		padding-top: 10%;
		overflow:hidden;
	}
	
	.udenio:hover {
		width:100%;
	 	height: 33.333333%;
	  
	}
	
	.nikon {
	  	width:100%;
	  	height: 33.333333%;
		min-height: 280px;
	  	transition: height 800ms;
		background-image: url(../img/fondo-nikon.jpg);
		background-repeat:no-repeat;
		background-position:center center;
		background-size:cover;
		padding-top: 10%;
		overflow:hidden;
	}
	
	.nikon:hover {
		width:100%;
	  	height: 33.333333%;
	}
	
	.nikon-banderas {
	  display: inline-flex;
	  opacity:1;
	}
	
	.nikon-banderas .col-sm-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.nikon-banderas .col-sm-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	
	.kandao {
		width:100%;
	  	height: 33.333333%;
		min-height: 280px;
		transition: height 800ms;
		background-image: url(../img/fondo-kandao.jpg);
		background-repeat:no-repeat;
		background-position:center center;
		background-size:cover;
		padding-top: 10%;
		overflow:hidden;
	}
	
	.kandao:hover {
		width:100%;
	  	height: 33.333333%;
	}
	
	.kandao-banderas {
	  display: inline-flex;
	  opacity:1;
	}
	
	.kandao-banderas .col-sm-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	
	.kandao-banderas .col-sm-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	
	.kandao-banderas .col-sm-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	
	
	
}