/* Design by http://www.dreamtemplate.com */
@charset "utf-8";



body {
	margin: 0;
	padding: 0;
	width: 100%;
	color: #000000;
	font: normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
	background: #fff url(../images/main_bg.gif) repeat-x left 115px;
}
 
 .mensaj{
	 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	 font-size:18px;
	 margin-left:80px;}

html, .main {
	padding:0;
	margin:0;
}
.main {
	background:url(../images/hbg_bg.jpg) no-repeat center 115px;
}
.clr {
	margin-top:10px;
	clear:both;
	padding:0;
	
	width:100%;
	font-size:0;
	line-height:0;
}
h2 {
	margin:8px 0;
	padding:8px 0;
	font-size:24px;
	font-weight:normal;
	color:#6e6e6e;
}
p {
	color:rgba(0,0,0,0.6);
	margin: 8px 0;
	padding: 0 0 8px 0;
}

#pos{
	margin-left:20px;}
	
	

a {
	color:#fe571a;
	text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
	
	
	margin:0;
	padding:0;
}
.header {
}
.header_resize {
	
	margin:0 auto;
	padding:0;
	width:960px;
}
.logo {
	
	padding:0;
	float:none;
	float:left;
	width:auto;
	height:141px;
}
h1 {
	margin: 0;
	padding: 45 px 0 0;
	font-size: 36px;
	font-weight: normal;
	line-height: 1.2em;
	text-transform: none;
}
h1 a, h1 a:hover {
	color:#4e4e4f;
	text-decoration:none;
}
h1 span {
}
h1 small {
	display:block;
	font-size:13px;
	line-height:1.2em;
	letter-spacing:normal;
	text-transform:none;
	color:#4e4e4f;
}
.slider {
	padding:13px 12px 8px 13px;
	background:no-repeat center bottom;
}
.rss {
	padding:18px 20px 0 0;
	float:right;
	width:auto;
}
.rss p {
	margin:0;
	padding:0;
	float:right;
	width:auto;
	color:#fff;
	font-size:13px;
	line-height:1.5em;
	font-weight:bold;
}
.rss a {
	color:#fff;
	text-decoration:none;
}
.rss a:hover {
	text-decoration:underline;
}
.rss img {
	margin:-3px 0 -3px 6px;
	border:none;
}
.menu_nav {
	margin:0 auto;
	padding:39px 0 0;
	height:36px;
	float:right;
}
.menu_nav ul {
	list-style:none;
	padding:0;
	height:36px;
	float:left;
}
.menu_nav ul li {
	margin:0;
	padding:0 0 0 4px;
	float:left;
}
.menu_nav ul li a {
	display: block;
	margin: 0;
	padding: 12px 0 0;
	width: 86px;
	height: 41px;
	font-size: 13px;
	line-height: 17px;
	font-weight: normal;
	color: #333333;
	text-decoration: none;
	text-transform: none;
	text-align: center;
	background: no-repeat left top;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
	text-decoration:none;
	color:#000;
	background:url(../images/menu_a.jpg) no-repeat left top;
	border-radius:12px;
	box-shadow:5px;
	-webkit-transition:2s;
	-moz-transition:2s;
}
.content {
	padding:56px 0 40px;
}

.content_resize {
	margin:0 auto;
	padding:0;
	width:960px;
	}	
	
.content .mainbar {
	margin: 0;
	padding: 0;
	float: right;
	width: 684px;
	
}
.content .mainbar h2 {
	margin-bottom: 0;
	padding-bottom: 8px;
	font-size: 24px;
	line-height: 1.2em;
	color: #6e6e6e;
	margin-top: 20px;
}
.content .mainbar div.img {
	padding:12px 0 0;
	float:left;
}
.content .mainbar img {
	
}
.content .mainbar img.fl {
	margin:0;
	border:1px solid #d4d7dc;
}
.content .mainbar .article {
	margin-top:20px;
	padding:6px 20px;
}
.content .mainbar .post_content {
	
	

	
	width:500px;
	margin-top:50px;
	margin-left:50px;
}


.content .mainbar .post_content strong {
	color:#6d6d6d;
}
#sii{
	
	margin-left:150px;}
	
	#siii{
	
	margin-left:150px;}
	
		
		
	
	#ofertas{
		margin-top:10px;
		text-align:center;
		border-radius:10px;
		width:150px;
		height:60px;
		background-color:#FF0;
		

	}
	
	
	#si3{
		
	margin-left:160px;
	}
	
	#si4{
		margin-top:20px;
		text-align:center;}
	
.content .sidebar {
	padding: 0;
	float: left;
	width: 265px;
}
.content .sidebar .gadget {
	margin: 0 0 24px;
	padding: 12px 20px 24px;
	border: 1px solid #e0e0e0;
}
.content .sidebar h2 {
	color:#6e6e6e;
}
ul.sb_menu, ul.ex_menu {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #666666;
}
ul.sb_menu li, ul.ex_menu li {
	margin:0;
	border-bottom:1px solid #e8e8e8;
}
ul.sb_menu li {
	padding:8px 0;
	width:220px;
}
ul.ex_menu li {
	padding:8px 0;
}
ul.sb_menu li a {
	color:#6e6e6e;
	text-decoration:none;
	margin-left:-16px;
	padding:4px 8px 4px 16px;
}
ul.ex_menu li a {
	font-weight:bold;
	color:#6e6e6e;
	text-decoration:none;
}
ul.sb_menu li a:hover, ul.ex_menu li a:hover {
	color: #090;
	font-weight: bold;
	text-decoration: none;
}
p.spec {
	padding:0 0 16px;
}
p.infopost {
	color:#FFF;
  font-size: 13px;
  padding: 30px 0 10px 30px;
  line-height: 110%;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	
	margin: 0 0 8px;
	padding: 9px 16px 0;
	height: 26px;
	
	background: #99cc33;
}
p.infopost a {
	
	padding:0 2px;
	text-decoration:none;
	font-weight:bold;
	color:#fff;
}
p.infopost a:hover {
	text-decoration:underline;
}
.article a.com {
	margin-top:50px;
	display:block;
	float:right;
	margin:-14px 0 0;
	padding:7px 0 0;
	width:58px;
	height:37px;
	font-size:33px;
	font-weight:normal;
	text-decoration:none;
	text-align:center;
	color:#fff;
	background:url(../images/comment.jpg) no-repeat left top;
}
.article a.com:hover {
	text-decoration:none;
}
.article a.com span {
	font-weight:normal;
}
.post_content a.rm {
	display:block;
	float:left;
	margin:0 0 16px;
	padding:9px 0 0;
	font-size:13px;
	line-height:16px;
	font-weight:normal;
	text-transform:none;
	color:#99cc33;
	text-decoration:none;
	text-align:center;
}
.post_content a.rm:hover {
	text-decoration:underline;
}
.content p.pages {
	margin:0;
	padding:24px 20px;
	font-size:11px;
	color:#6e6e6e;
	text-align:left;
}
.content p.pages span, .content p.pages a {
	display:block;
	float:left;
	margin:0 4px 0 0;
	padding:5px 0;
	width:27px;
	line-height:17px;
	text-decoration:none;
	text-align:center;
	background:#f00 url(../images/page_p.jpg) no-repeat left top;
}
.content p.pages span, .content p.pages a:hover {
	color:#fff;
	background-image:url(../images/page_a.jpg);
}
.content p.pages a {
	color:#fff;
	border:none;
}
.content p.pages small {
	font-size:12px;
	float:right;
}
.content .mainbar .comment {
	margin:0;
	padding:16px 0 0 0;
}
.content .mainbar .comment img.userpic {
	border:1px solid #dedede;
	margin:10px 16px 0 0;
	padding:0;
	float:left;
}
.fbg {
	padding:0;
	background:#54b1ed url(../images/line.gif) repeat-x left bottom;
	border-top:3px solid #7cc8f3;
}
.fbg_resize {
	margin:0 auto;
	width:960px;
	padding:16px 0;
	color:#fff;
}
.fbg h2 {
	color:rgba(0,0,0,0.5);
	
	padding-bottom: 24px;
}
.fbg img.gal {
	
	margin:0 8px 8px 0;
	padding:0;
	border:4px solid #ece7e7;
}
.fbg .col {
	margin:0;
	float:left;
}
.fbg .c1 {
	padding:0 16px 0 0;
	width:280px;
}
.fbg .c2 {
	padding:0 36px 0 16px;
	width:300px;
}
.fbg .c3 {
	padding:0 0 0 16px;
	width:294px;
}
.fbg .fbg_ul {
	margin:0;
	padding:0;
	list-style:none;
}
.fbg .fbg_ul li {
	margin:0;
	padding:0;
	list-style:none;
}
.fbg .fbg_ul li a {
	display:block;
	margin:0;
	padding:2px 0 2px 12px;
	color:#fff;
	text-decoration:none;
	color:rgba(0,0,0,0.6);
	background:url(../images/li.gif) no-repeat left center;
}
.fbg .fbg_ul li a:hover {
	color:#fff;
	text-decoration:underline;
}
.fbg p.contact_info {
	line-height:1.8em;
}
.fbg p.contact_info a {
	color:rgba(0,0,0,0.6);
	color:#fff;
	text-decoration:underline;
}
.fbg p.contact_info span {
	display:block;
	float:left;
	width:74px;
	font-weight:bold;
}
ol {
	list-style:none;
}
ol li {
	display:block;
	clear:both;
}
ol li label {
	display: block;
	margin: 0;
	/* [disabled]padding: 16px 0 0 0; */
}
ol li input.text {
	width:480px;
	border:1px solid #c0c0c0;
	margin:0;
	padding:5px 2px;
	height:16px;
	background-color:#fff;
}
ol li textarea {
	width:480px;
	border:1px solid #c0c0c0;
	margin:0;
	padding:2px;
	background-color:#fff;
}
ol li .send {
	margin:16px 0 0 0;
}
.searchform {
	margin:20px 0 24px;
	padding:0;
	border:1px solid #e0e0e0;
}
#formsearch {
	margin:0;
	padding:24px 0 20px 20px;
	width:auto;
	height:33px;
}
#formsearch span {
	display:block;
	margin:0;
	padding:0;
	float:left;
	background:url(../images/search_bg.gif) no-repeat left top;
}
#formsearch input.editbox_search {
	margin:0;
	padding:9px 6px 9px 16px;
	float:left;
	width:169px;
	font-size:12px;
	line-height:14px;
	color:#a8acb2;
	background:none;
	outline:none;
	border:none;
}
#formsearch input.button_search {
	margin:0;
	padding:0;
	border:none;
	float:left;
}
.footer {
	background:#54b1ed;
}
.footer_resize {
	margin:0 auto;
	padding:0;
	width:960px;
	line-height:1.5em;
	color:#fff;
}
.footer_resize p {
	margin:24px 0;
	padding:0;
	line-height:normal;
	white-space:nowrap;
	text-indent:inherit;
}
.footer_resize a {
	color:#fff;
	font-weight:normal;
	margin:0;
	padding:0;
	border:none;
	text-decoration:underline;
	background-color:transparent;
}
.footer_resize a:hover {
	color:#fff;
	background-color:transparent;
	text-decoration:none;
}
.footer_resize .lf {
	float:left;
}
.footer_resize .rf {
	float:right;
}
a {
	outline:none;
}
div#info{
	
	overflow:hidden;
	position:absolute;
	margin-top:12px;
	float:12px;
	width:177px;
	height:213px;
	background-color:rgba(96,187,70,0.6);
	border-radius:2px;
	opacity:0;
	-webkit-transition:opacity 0.2s;
	
	
}








div#img{
	margin-top:7px;

	box-shadow: 5px -0px 10px #37B148;	
	
	background-image:url(../images/img1.jpg);
	float:left;
	width:177px;
	height:213px;
	}
	div#img2{
		
	margin-top:5px;
	box-shadow: 5px -0px 10px #37B148;	
background-image:url(../images/prendas.jpg);
	float:left;
	
	width:177px;
	height:213px;
	
	
	}
	div#img3{
		
margin-top:5px;
-webkit-box-shadow: 5px -0px 10px #37B148;	
background-image:url(../images/elegan.jpg);
	float:left;
	
	width:177px;
	height:213px;
	
	}
	
	div#img4{
		
	margin-left:120px;	
	margin-top:40px;
	background-image:url(../images/promociones.jpg);
	width:300px;
	height:150px;
	border-radius:10px;
	
	}
	
	div#info{

		
	margin-top:0px;
	margin-left:1px;
	width:177px;
	height:213px;
		
		}
		
		
		
		
		
		
	
	
	
	
div#img:hover div#info
{opacity:1;
	}
	
	div#img2:hover div#info
{opacity:1;
	}
	
	div#img3:hover div#info
{opacity:1;
	}
	
	div#img4:hover div#info
{opacity:1;
	}
	
	
	
	
	
p#textoo{
	text-align:center;
	-webkit-transition:margin 0.2s;
	-moz-transition:margin 0.2s;
	position:absolute;
	font-size:20px;
	}
	
	p#texto{
	text-align:center;
	-webkit-transition:margin 0.2s;
	-moz-transition:margin 0.2s;
	position:absolute;
	font-size:20px;
	}
p#texto2{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:17px;
	margin-left:15px;
	margin:auto;
	text-align:center;
	width:157px;
	margin-top:223px;
	-webkit-transition: margin 0.3s;
	-moz-transition:margin 0.3s;
	}	
	
	
		div#img:hover p#texto2{
			margin-top:70px;
		
		}
		div#img2:hover p#texto2{
		margin-top:70px;
		
		}
		div#img3:hover p#texto2{
		margin-top:70px;
		
		}
		
		div#img4:hover p#texto2{
		margin-top:70px;
		
		}
		
		
	
	div#img:hover p#textoo{
		margin-top:20px;
		margin-left:40px;
		}
	div#img2:hover p#textoo{
		margin-top:20px;
		margin-left:40px;
		}
	div#img3:hover p#textoo{
		margin-top:20px;
		margin-left:40px;
	}
	
	
	div#img4:hover p#textoo{
		margin-top:20px;
		margin-left:40px;
	}
	
	
	
	div#contenedorSocial {
		
		margin-left:25%;
		background-color:rgba(96,187,70,0.6);
		width:180px;
		height:40px;
		border-radius:15px;
		-moz-transition-duration: 0.4s ;
		-webkit-transition-duration: 0.4s ;
		-ms-transition-duration: 0.4s ;
		box-shadow:0px 0px 1px rgba(0,0,0,1);
		cursor:pointer;
		
		padding:2px;
	margin-top:17px;
		text-align:center;
		}
		
		
		#contenedorSocial h2{
			text-align:center;
			margin-top:-4px;
			}
		
		
		#contenedorSocial:hover{
			box-shadow:0px 0px 9px rgba(0,0,0,9);
			}
			
			#social1:hover{
			border-radius:15px;
			box-shadow:0px 0px 9px rgba(0,0,0,9);
			}
			
			#social2:hover{
			border-radius:15px;
			box-shadow:0px 0px 9px rgba(0,0,0,9);
			}
	
div#social1{
	
	-moz-transition-duration: 0.4s ;
	-webkit-transition-duration: 0.4s ;
	cursor:pointer;
	margin-left:150px;
	float:left;
	margin-top:30px;
	width:70px;
	height:56px;

	
	}
	div#social2{
		-moz-transition-duration: 0.4s ;
	-webkit-transition-duration: 0.4s ;
	cursor:pointer;
	margin-left:20px;
	float:left;
	margin-top:26px;
	width:60px;
	height:60px;
	
	
	}
#fc{
	margin-left:7px;
	cursor:pointer;}
	
	#ist{
		
	margin-left:14px;
	cursor:pointer;
	border-radius:2px;
	}
	
	#ist:hover{
		box-shadow:3px 2px 1px rgba(0,0,0,1);
		-moz-transition-duration:2s;
		-webkit-transition-duration:2s;
		}
	
	#wha{
		margin-left:8px;
		
	cursor:pointer;}
	
	.santa{
		
		text-align:center;
		border-radius:5px;
		height:10px;
		width:140px;
		background-color:rgba(21,206,245,0.7);
		
	}
	#botones{
		
		margin-top:60px;
		margin-left:50px;
		}
	#izq{
		margin-top:-60px;
		
		margin-left:155px;
		
		float:left;
		}
		#pro{
			float:left;
			margin-left:50px;}
		#h22{
		
			margin-top:150px
			;
			}
			
			
	.Apple-style-span{
		font-family:"MS Serif", "New York", serif;
		font-size:25px;}		
		
	
#sg{
	margin-left:15px;}
	
	
	
#img4:hover{
	border-radius:10px;
	cursor:pointer;
	-moz-transition-duration: 2s ;
	-webkit-transition-duration:2s;
	box-shadow:5px 5px 5px rgba(13,241,61,9);
	
	
	margin-top:10px;
	
}
	
	
	
	
	
	.showme{ 
display: none;
}
.showhim:hover .showme{
display : block;
}
	
	
	      #code1 { position: relative; display: inline-block;}

    #code2 { display: none; position: absolute;
    top: 10px;
    left: 100px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:18px;
	
    }

    #code1:hover #code2 { display: block; }
	
	
	
	#v1{
		margin-top:-240px;
		
		
		margin-left:310px;
		}
		
		#mg:hover {
		background-color:rgba(96,187,70,0.6);
		border-radius:5px;
		-moz-transition-duration: 0.4s ;
		-webkit-transition-duration: 0.4s ;
		-ms-transition-duration: 0.4s ;
		box-shadow:0px 0px 3px rgba(0,0,0,1);
		cursor:pointer;
			}
		
    .conIMG {
		margin-top:20px;
		width:300px;
		height:300px;
		border-radius:10px;
		
		margin-left:90px;}
		
		
		



#ex4 {
	
width: 700px;
height: 133px;
line-height: 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}


p#texto{
	text-shadow:4px;	
	font-size:18px;
	font-family: "Lucida handwriting", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	visibility:hidden;
	}
	
	
	p#textop{
		margin-top:5px;
		
		
	text-shadow:2px;	
	font-size:18px;
	font-family: "Lucida handwriting", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	visibility:hidden;
	}

#ex4:hover p#texto{
	margin-left:30px;
	float:left;
	margin-top:210px;
	visibility:visible;
	}
	
	#ex4:hover p#textop{
	
	float:left;
	margin-top:-40px;
	visibility:visible;
	}

	
#ex4:hover {
	
line-height: 133px;
color: #575858;
}
#ex4 img{ float: left;
margin: 0 15px;

}

#h{
	margin-left:30px;}

#imagen:hover
{
	
	    background-color:rgba(96,187,70,0.6);
		border-radius:5px;
		-moz-transition-duration: 0.4s ;
		-webkit-transition-duration: 0.4s ;
		-ms-transition-duration: 0.4s ;
		box-shadow:0px 10px 10px 0px rgba(0,0,0,8);
	background-color:rgba(96,187,70,0.6);
	
	-webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
 
    transform: scale(0.9);
	 
}

/*=====================================================================
*                               BOTON "COMPRAR"                         *
=======================================================================*/	 
	._6wl:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#00c738), to(#0c8bab));
background: -webkit-linear-gradient(#00c738, #0c8bab);

background: -moz-gradient(linear, center top, center bottom, from(#00c738), to(#0c8bab));
background: -moz-linear-gradient(#00c738, #0c8bab);
}
._6j:hover {
text-decoration: none;
}
._3ma {
font-family: 'Freight Sans Bold', 'lucida grande',tahoma,verdana,arial,sans-serif !important;
font-weight: normal !important;
text-rendering: optimizelegibility;
}
.mvm {
margin-top: 10px;
margin-bottom: 10px;
}

._58mi {
	
visibility:hidden;
min-width: 190px;
padding: 7px 20px;
text-align: center;
margin-left:60px;
}

._58mi2 {
	
	
min-width: 190px;
padding: 7px 20px;
text-align: center;
margin-left:30px;
}

._58mi3 {
visibility:hidden;
min-width: 190px;
padding: 7px 20px;
text-align: center;
margin-left:30px;
}

._6v {
font-weight: bold;
}
._6o {
font-size: 19px;
line-height: 10%;
}
._6wl {
background: -webkit-gradient(linear, center top, center bottom, from(#67ae55), to(#578843));
background: -webkit-linear-gradient(#67ae55, #578843);

background: -moz-gradient(linear, center top, center bottom, from(#67ae55), to(#578843));
background: -moz-linear-gradient(#67ae55, #578843);
background-color: #69a74e;
-webkit-box-shadow: inset 0 1px 1px #a4e388;
-moz-box-shadow: inset 0 1px 1px #a4e388;
border-color: #3b6e22 #3b6e22 #2c5115;
}
._6wk {
padding: 17px 17px;
}
._6j {
border: 1px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
letter-spacing: 1px;
position: relative;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
button {
margin: 0;
}

 
			
			
	div#ex4:hover ._58mi{
		
		visibility:visible;
		margin-top:170px;
		float:left;
		margin-left:-280px;
		
		}
		
		
		
		
		#l{
			width:60px;
			height:25px;}


	
		/*=====================================================================
*                             efectos "promociones"                         *
=======================================================================*/

		
	/*Estilos Base*/
.contenedor-img {
width: 300px;
height: 200px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
}
.contenedor-img .mascara,.contenedor-img .contenido {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.contenedor-img img {
display: block;
position: relative;

}
.contenedor-img h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.9);
margin: 20px 0 0 0
}
.contenedor-img h3 {
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 10px;
text-align: center
}
.contenedor-img a.link {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #222;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.contenedor-img a.link:hover {
box-shadow: 0 0 5px #000
}


/*Ejemplo 1*/
.ejemplo-1 img {
transition: all 0.2s linear;
}
.ejemplo-1 .mascara {
opacity: 0;
background-color: rgba(46,157,120, 0.7);
transition: all 0.3s ease-in-out;
}
.ejemplo-1 h2 {
transform: translateX(-200px);/*Desplazamos a la izquierda*/
opacity: 0;
transition: all 0.7s ease-in-out;
}
.ejemplo-1 h3 {
transform: translateX(200px);/*Desplazamos a la derecha*/
opacity: 0;
transition: all 0.4s linear;
}
.ejemplo-1 a.link{
opacity: 0;
transition: all 0.4s ease-in-out;
transform: translateY(50px)/*Desplazamos para abajo*/
}
.ejemplo-1:hover img {
transform: scale(1.1);/*Damos un ligero zoom a la imagen*/
}
.ejemplo-1:hover .mascara {
opacity: 1;
}
.ejemplo-1:hover h2,
.ejemplo-1:hover h3,
.ejemplo-1:hover a.link {
opacity: 1;
transform: translateX(0px);/*Regresamos a las posiciones originales*/
}
.ejemplo-1:hover h3 {
transition-delay: 0.1s;
}
.ejemplo-1:hover a.link {
transition-delay: 0.2s; /*Aplicamos un pequeño retardo para que se muestre al final*/
transform: translateY(0px);
}





/*Ejemplo 2*/
.ejemplo-2 img {
transition: all 0.2s ease-in;
}
.ejemplo-2 .mascara {
background-color: rgba(25,96,184, 0.8);
width: 300px;
padding: 60px;
height: 300px;
opacity: 1;
transform: translate(300px, 200px) rotate(45deg); /*Rotamos para dar efecto de diagonal y lo movemos por donde queremos que entre.*/
transition: all 0.5s ease-in-out;
}
.ejemplo-2 h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: translate(200px, -200px);/*Desplazamos el título arriba a la derecha*/
transition: all 0.3s ease-in-out;
}
.ejemplo-2 h3 {
transform: translate(-200px, 200px);/*Desplazamos la descripción abajo a la izquierda*/
transition: all 0.4s ease-in-out;
}
.ejemplo-2 a.link {
transform: translate(0px, 100px);/*Desplazamos el link para abajo*/
transition: all 0.3s 0.1s ease-in-out;
}

.ejemplo-2:hover .mascara {
opacity:1;
transform: translate(-96px, -120px) rotate(45deg);
}
.ejemplo-2:hover ._58mi3{
	-webkit-transition:4s;
	visibility:visible;}

.ejemplo-2:hover h2 {
transform: translate(0px,0px);
transition-delay: 0.3s;
}
.ejemplo-2:hover h3 {
transform: translate(0px,0px);
transition-delay: 0.4s;
}
.ejemplo-2:hover a.link {
transform: translate(0px,0px);
transition-delay: 0.5s;
}

/*Estilo Base*/
.contenedor-img {
width: 300px;
height: 200px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
}
.contenedor-img .mascara,.contenedor-img .contenido {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.contenedor-img img {
display: block;
position: relative;

}
.contenedor-img h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.9);
margin: 20px 0 0 0
}
.contenedor-img h3 {
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 10px;
text-align: center
}
.contenedor-img a.link {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #222;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.contenedor-img a.link:hover {
box-shadow: 0 0 5px #000
}





.ejemplo-4 img {
transition: all 0.4s ease-in-out 0.2s;
opacity: 1;
}
.ejemplo-4 .mascara {
background-color: rgba(0,0,0,0.8);
opacity: 0;
transform: scale(0) rotate(-180deg);/*Rotamos 180grados y le damos tamaño 0*/
transition: all 0.4s ease-in;
border-radius: 0px;
}
.ejemplo-4 h2{
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transition: all 0.5s ease-in-out;
}
.ejemplo-4 h3 {
opacity: 0;
transition: all 0.5s ease-in-out;
}
.ejemplo-4 a.link {
opacity: 0;
transition: all 0.5s ease-in-out;
}

.ejemplo-4:hover .mascara {
opacity: 1;
transform: scale(1) rotate(0deg);/*Regresamos a su tamaño y posición original*/
transition-delay: 0.2s;
}
.ejemplo-4:hover img {
transform: scale(0); /*Efecto zoom-out*/
opacity: 0;
transition-delay: 0s;
}
.ejemplo-4:hover h2,
.ejemplo-4:hover h3,
.ejemplo-4:hover a.link{
opacity: 1;
transition-delay: 0.5s;
}


/*Ejemplo 4-1*/
.ejemplo-4-1 img {
transition: all 0.4s ease-in-out 0.2s;
opacity: 1;
transform-origin:100% 100%; /*Desde la esquina inferior derecha*/
}
.ejemplo-4-1 .mascara {
background-color: rgba(0,0,0,0.8);
opacity: 0;
transition: all 0.4s ease-in-out 0.2s;
transform-origin:0% 0%; /*Desde la esquina superior izquierda*/
transform: scale(0);
}
.ejemplo-4-1 h2{
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transition: all 0.5s ease-in-out;
}
.ejemplo-4-1 h3 {
opacity: 0;
transition: all 0.5s ease-in-out;
}
.ejemplo-4-1 a.link {
opacity: 0;
transition: all 0.5s ease-in-out;
}

.ejemplo-4-1:hover .mascara {
transform: scale(1);
opacity: 1;
transition-delay: 0.3s;
}
.ejemplo-4-1:hover img {
transform: scale(0);
opacity: 0;
transition-delay: 0s;
}
.ejemplo-4-1:hover h2,
.ejemplo-4-1:hover h3,
.ejemplo-4-1:hover a.link{
opacity: 1;
transition-delay: 0.5s;
}


/*Ejemplo 5*/
.ejemplo-5 img {
transform: scaleY(1);
transition: all 0.7s ease-in-out;

}
.ejemplo-5 .mascara {
background-color: rgba(67, 205, 239, 0.8);
transition: all 0.5s linear;
opacity: 0;
}
.ejemplo-5 h2{
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(0);
color: #000;
transition: all 0.5s linear;
opacity: 0;
}

.ejemplo-5 h3{
	color:#000;
}
.ejemplo-5 p {
color: #fff;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.ejemplo-5 a.link {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
background-color: rgba(119, 80, 21, 0.9);
}

.ejemplo-5:hover img {
transform: scale(10);
opacity: 0;
}
.ejemplo-5:hover .mascara {
opacity: 1;
}
.ejemplo-5:hover h2,
.ejemplo-5:hover p,
.ejemplo-5:hover a.link{
transform: scale(1);
opacity: 1;
}



#contenido1{
	float:left;
	margin-top:10px;}
	

#contenido2{
	float:left;
	margin-top:10px;}
	
	#contenido3{
	float:left;
	margin-top:10px;}
	
	#contenido4{
	float:left;
	margin-top:10px;}
	
	#contenido5{
	float:left;
	margin-top:10px;}
	
	#contenido6{
	float:left;
	margin-top:10px;}
	
	#contenido7{
	float:left;
	margin-top:10px;}
	
	#contenido8{
	float:left;
	margin-top:15px;}
	
	
	.button {
		margin-top:10px;
		margin-left:140px;
 border: none;
 background: #3a7999;
 color: #f2f2f2;
 padding: 10px;
 font-size: 18px;
 border-radius: 5px;
 position: relative;
 box-sizing: border-box;
 transition: all 500ms ease;
}



	

.button:hover {
	-webkit-transition:ease 2s;
 background: rgba(0,0,0,0);
 color: #3a7999;
 box-shadow: inset 0 0 0 3px #3a7999;
 cursor:pointer;
 
}


	
		
		

		
		#contenido11{
			margin-left:50px;
			border-radius:7px;
			margin-top:10px;}
	
			
			#contenido13{
			margin-left:50px;
			border-radius:7px;
			margin-top:10px;
			
		}