@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,400,300,700,100italic,300italic,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Raleway:200,300,500,600);

.header {
	display:grid;
	grid-template-columns: 1fr auto;
}

/* CSS Document */
body{font-family: Roboto; color:#333; padding-top:137px}
	
	
	a.ancla{ padding-top:129px; float:left; width:100%}
	
	#topnav,#topnav ul,#topnav .logo,#topnav .logo img,#topnav .redes{
	  transition: all 0.1s;
	  -moz-transition: all 0.1s; /* Firefox 4 */
	  -webkit-transition: all 0.1s; /* Safari and Chrome */
	  -o-transition: all 0.1s; /* Opera */
	}
	
	#topnav .datos{ width:100%; background:#1b1b1b; position:absolute; left:0px; top:-35px; z-index:98; display:none}
	#topnav .datos span{color:#fff; font-size:13px; padding-top:10px; padding-bottom:10px; float:right; margin-right:5%}
	#topnav .datos span i{ font-size:11px; margin-right:5px; margin-left:5px}
																			
	#topnav{width:100%; float:left; z-index:1039; height:auto; position:relative; background:#09408d; top:0px; position:fixed;
	box-shadow:0px 1px 1px rgba(0,0,0,0.2)}
	
		.redes{width:90%; margin-left:5%; margin-right:5%; float:left; height:44px}
		body.scrolled .redes{ height:0px; overflow:hidden}
		body.scrolled{ padding-top:70px}
			.redes span{color:#A7B8C1; font-size:13px; line-height:44px; font-family:Raleway; font-weight:100;  float:left}
				.redes span b{ font-weight:400; color:#D7DFE3; line-height:44px}
				.redes span i{ font-size:17px; line-height:44px; float:left; margin-right:4px}
			.redes a{color:#A7B8C1; text-decoration:none; font-size:17px; margin-top:0px; float:right; margin-left:7px; line-height:44px}
				.redes a.mailto{ font-size:13px}
				.redes a:hover{color:#D7DFE3}
		#topnav .insider{ height:auto; width:100%; background:#fff; float:left}								
			.insiderinsider{ width:calc(100% - 10%); margin-left:5%; margin-right:5%}					
			.logo{ float:left; height:auto; z-index:99; height:auto; margin:15px; margin-left:0px; margin-right:0px}
			body.scrolled .logo{ margin-top:0px; margin-bottom:0px}
			body.scrolled ul.mainmenu li a{ line-height:20px}
			body.scrolled ul.mainmenu li a i.farrow{ line-height:13px}
			body.scrolled .buttoner{ margin-top:15px}
				/*.logo img{margin:10%; width:45%; float:left}*/	
				.logo img.bgtriangles{width:100%; float:left; min-height:78px}
				.logo img.imglogo{position:absolute; left:7.5%; height:36%; top:18%}
				
				.cover{ width:100%; position:absolute; bottom:0px; z-index:99; left:0px}
				.nocover{width:100%; float:left}
				
				.over{ width:42%; position:absolute; bottom:7%; z-index:99; right:3%; max-width:478px}
				.covergrayed{ width:100%; background:rgba(91, 96, 106, 0.4); height:100%; position:absolute; left:0px; top:0px; z-index:99}
					.parallax .covergrayed{ width:100%; background:rgba(91, 96, 106, 0.7)}
			p.menu{ float:right; width:28px; margin:30px; cursor:pointer; width:0px; margin:0px; position:relative}	
			p.menu img{ width:100%}
			.close{ position:absolute; left:0px; top:0px; display:none}
				.close.active{ display:block}	
									
			ul.mainmenu{float:right; margin:0px; height:70px; list-style-type:none; 
			 width:auto; margin-top:0px; margin-right:0px}
			 
			.submenu{background:#F6F6F6;
			 width:100%; text-align:right; margin-left:0px; margin-right:0px; float:left; box-shadow:inset 0px 1px 1px rgba(0,0,0,0.2); display:none}
			 	.submenuopened{ display:block}
				.submenu .insider{width:calc(100% - 10%); margin-left:5%; margin-right:5%; float:left;
				background:transparent!important}
					.submenu ul{float:left; width:100%; padding-top:10px; padding-bottom:10px}
					.submenu ul li{ width:25%; float:left; background:url(../img/bullet.png) left center no-repeat}
						.submenu ul li a{float:left; color:#999; font-weight:400; font-family:Roboto; font-size:14px; text-decoration:none; padding:10px 15px}
						.submenu ul li a:hover{color:#333}
						
				ul.mainmenu li{ float:left; width:auto; height:100%}
			/*		 ul.submenu li{ float:left}*/
					ul.submenu li:first-child{ }
					
					ul.mainmenu li a{ height:auto;  line-height:45px; font-family: Raleway; 
					text-decoration:none; font-size:12px; font-weight:normal; float:left;
					color:#777; margin-left:5px; margin-right:5px; padding:4px 4px; margin-top:20px; border-radius:3px
					}	
						ul.mainmenu li a i{ font-size:16px; float:left; line-height:40px}
						ul.mainmenu li a i.farrow{ float:right; line-height:35px; margin-left:8px}
						
						i.farrowmobile{ float:right; margin-left:5px}
						
							.farrowup{ margin-top:7px}
						.catalogblue{color:#09408d!important}
						.buttoner{ width:40px; height:40px; border-radius:40px; background:#CCCCCC; text-align:center; line-height:40px; color:#fff;
						cursor:pointer; font-size:14px; margin-top:25px; position:relative}
							.buttoner:hover{ background:#09408d}
							.buttoner sup{ position: absolute; background:#666666; color:#fff; font-size:9px; border-radius:20px; 
							width:18px; height:18px; text-align:center; line-height:18px; font-weight:600; font-family:Roboto}
								.buttoner:hover sup{ background:#09408d}
						.cart,.searchb{ margin-left:10px}
						.searchb,.cart{-webkit-transition: all 0.5s ease;  
						  -moz-transition: all 0.5s ease;  
						  -o-transition: all 0.5s ease;  
						  -ms-transition: all 0.5s ease;  
						  transition: all 0.5s ease;}
							
					/*ul.mainmenu li:last-child a{ margin-right:0px!important; padding-right:0px!important}	*/																					
					ul.mainmenu li a.selected,ul.mainmenu li a.selected:hover{
						color:#09408d!important;
					}
					ul.mainmenu li a:hover{
						color:#09408d!important
					}	
					ul.mainmenu .carta{ margin-top:0px; padding-top:0px; margin-right:0px; padding-right:0px}
					#hiddenmenu .carta{ margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px}
					
			#hiddenmenu.active{display:block}
			
				#hiddenmenu .buttoner{ margin-top:15px; margin-bottom:15px; margin-left:0px}
					#hiddenmenu .searchb form{float:left; margin:0px; padding:0px; display:none; width:90%}
						#hiddenmenu .searchb input.textin{ border-radius:40px; border:0px none; height:30px; margin-top:4px; margin-left:4px;
						width:calc(100% - 24px); color:#333; font-family:Roboto; padding-left:10px; padding-right:10px}
						#hiddenmenu .searchb button.enviin{background:#CCCCCC; border:0px none; color:#fff; float:right; width:10%; margin-right:-10.5%; height:40px; 
						line-height:40px; margin-top:-36px; z-index:1; position:relative;border-radius:80px}						
					#hiddenmenu .searchb-active{ width:90%; background:#CCCCCC}
						#hiddenmenu .searchb-active form{ display:block}
						
					.mainmenu{ position:relative}
						.lcontact{ margin-right:0px}
					.mainmenu .searchb{ width:40px; position:absolute; right:50px}
					.mainmenu .searchb form{float:left; margin:0px; padding:0px; display:none; width:90%}
						.mainmenu .searchb input.textin{ border-radius:40px; border:0px none; height:30px; margin-top:4px; margin-left:4px;
						width:calc(100% - 24px); color:#333; font-family:Roboto; padding-left:10px; padding-right:10px}
						.mainmenu .searchb button.enviin{background:#CCCCCC; border:0px none; color:#fff; float:right; width:10%; margin-right:-10.5%; height:30px; 
						line-height:30px; margin-top:-31px; z-index:1; position:relative; border-radius:80px}						
					.mainmenu .searchb-active{ width:88%; background:#CCCCCC; position:absolute; right:50px}
						.mainmenu .searchb-active form{ display:block}	
						
				#hiddenmenu li.scroll { text-align:center}
				
			#hiddenmenu{float:left; margin:0px; height:auto!important; list-style-type:none; 
			 width:110%!important; background:#F6F6F6; border-top:1px solid rgba(0,0,0,0.05); 
			 padding-top:0px; padding-bottom:0px; display:none; margin:0px!Important; margin-left:-5%!important
			 }
				
				#hiddenmenu li{ float:left; width:100%!important;  height:auto!important;  border-bottom:1px solid rgba(0,0,0,0.05)}
					#hiddenmenu li > a{ height:100%;  line-height:35px; font-family: 'Oswald'; 
					text-decoration:none; font-size:20px; font-weight:normal; float:left;
					color:#777; padding-left:10%; padding-right:10%; width:80%; text-align:center;
					padding-top:15px; padding-bottom:15px;
					}																							
					#hiddenmenu li.active > a,#hiddenmenu li.open > a,#hiddenmenu li.active > a:hover{
						color:#09408d
					}
					#hiddenmenu li a:hover{
						color:#09408d	
					}
										
																
	.bar{width:100%; float:left; background:#fff url(../img/bgbeige.jpg) top left repeat-x; height:auto; position:relative; z-index:99999}
	.centro{ max-width:1000px; margin:0 auto; position:relative; z-index:9999}		
		.centro2{ max-width:100%}									
		.centro h1{text-align:center; width:100%; float:left; font-size:35px; font-family:Oswald; margin-top:0px; font-weight:normal; margin-bottom:5px;
		background:url("../img/bgwhite.png") bottom center no-repeat; padding-bottom:15px}
			h1.title{ margin-top:0px; margin-bottom:0px}
			.centro h1 span{ background:#fff; padding-left:15px; padding-right:15px}
		
		
	.bulletcontainer{width:98%; margin-left:1%; float:left; 
	z-index:9999999; position:relative}	
		.interior .bulletcontainer{ margin-top:65px}
		.lineL{position:absolute; left:0px; background:#fff; width:10px; height:215px; z-index:99}	
		.lineR{position:absolute; right:0px; background:#fff; width:10px; height:215px; z-index:99}	
		.wrapper{width:100%; float:left}	
							
		a.bullet{float:left; margin-top:2%; margin-bottom:2%; width:31.33%; 
		 height:auto;color:#333; margin-left:1%; margin-right:1%;transition: all 0.1s;}
			a.bullet i{width:100%; float:left; text-align:center!important; margin-top:0px; overflow:hidden;
			position:relative
			}
				a.bullet i img{ /*height:87px;*/ width:180%; display:inline}
			
			
					
				/*a.bullet:hover,a.bullet.selected{background-color:#ADA49A; background-position:right center; cursor:pointer}
				a.bullet:hover h4,a.bullet:hover p,a.bullet.selected h4,a.bullet.selected p{color:#fff}*/
			a.bullet span{ float:left; width:90%; margin-left:5%; background:#fff; margin-top:-30px;text-align:center; position:relative}
				a.bullet span strong{ background:#fff; width:100%;box-shadow:0px 0px 5px rgba(0,0,0,0.4); height:60px; position:absolute; left:0px; top:0px; z-index:-1}
				a.bullet h4{ font-weight:normal; font-size:11px; float:left; width:90%; padding-bottom:10px; padding-top:20px;
				text-transform:uppercase; font-family:ABook; color:#ccc; margin-left:5%}
				a.bullet span h4 b{ font-family:Oswald; font-weight:normal; font-size:22px; color:#333}
				a.bullet p{ font-size:11px; margin-top:5px; float:left; padding:13px; padding-top:15px; background:url(../img/bggray.jpg) center top no-repeat}	
				a.bullet p b{ font-weight:normal; font-family:ADemi}
				
			a.bullet i b{ width:100%; height:100%; position:absolute; left:0px; top:0px;
			  transition: all 0.1s;
			  -moz-transition: all 0.1s; /* Firefox 4 */
			  -webkit-transition: all 0.1s; /* Safari and Chrome */
			  -o-transition: all 0.1s;
			  box-shadow:inset 0px 0px 10px rgba(0,0,0,0); box-shadow:inset 0px 0px 10px rgba(0,0,0,1)}
			a.bullet:hover i b{box-shadow:inset 0px 0px 10px rgba(0,0,0,1); background:rgba(0,0,0,0.2)}	
			
			.slick-prev{width:70px; height:32px; background:url(../img/arrows.png) left top no-repeat; position:absolute; left:-75px; top:85px; cursor:pointer; text-indent:-99999px}
			.slick-next{width:70px; height:32px; background:url(../img/arrows.png) -113px top no-repeat; position:absolute; right:-75px; top:85px; cursor:pointer; text-indent:-99999px}

			.bulletin{padding-left:10px; float:left; background:url(../img/bulletin.png) left 3px no-repeat}
	
		/* The Nivo Slider styles */
		.sliderContainer{
			width:100%; height:auto; background:#333; position:relative; overflow:hidden
		}
		.upper{ position:absolute; left:0px; right:0px; bottom:5%; z-index:999; text-align:center}
			.upper img{ max-width:90%; margin-left:5%; margin-right:5%}
		
		.bgred{ background-size:cover; position:absolute;  z-index:999; width:36%; height:auto; left:10%; bottom:20%}
			.bgred p{  color:#fff; width:100%; position:absolute; left:0px; bottom:0px; text-shadow:0px 1px 1px #000}
				.bgred p b{font-family:Oswald; font-weight:normal; font-size:25px; 
				background:url(../img/bgblack.png) left bottom no-repeat; padding-bottom:12px; margin-bottom:10px; float:left; width:100%}
				.bgred p b strong{ color:#FEC108; font-weight:normal}
				.bgred p span{font-size:14px}
		.slider{width:100%; float:left; height:auto}
			

	/*fin de slider*/
	
	/*levels*/
	.levels{ width:90% ; padding-left:5%; padding-right:5%; background:#000; float:left; padding-bottom:3.5%; padding-top:1%; display:none}
		.levels span{ width:calc(25% - 50px); margin-left:0px; margin-right:40px; float:left; text-align:right; color:#fff; font-family:Oswald;
		font-weight:300; font-size:35px; line-height:50px; text-transform:uppercase; margin-top:15px; padding-right:10px}
			.levels span b{ font-weight:300}
			.levels span i{ display:none}
		.levels a{ width:calc(25% - 40px); float:right; margin-right:40px; margin-left:0px; position:relative}
			.levels a strong{ position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.5)}
			.levels a b{   color:#F9E515;
				font-family:Oswald; font-weight:600; font-size:30px; text-transform:uppercase; 
				margin: auto;
				position:absolute;
				top: 0; left: 0; bottom: 0; right: 0; text-align:center; vertical-align:middle; 
				margin-top:-20px; top:50%
			  }
			.levels a.last{ margin-right:0px}
			.levels a img{ width:100%; float:left}	
		.levels a:hover b{color:#fff}
		.levels a:hover strong{background:rgba(0,0,0,0.8);box-shadow:inset 0px 0px 15px #000}
	/*aprende*/
	section{ float:left; width:90%; height:auto; margin-left:5%; margin-right:5%}
	
		section.easy{margin-top:5%; margin-bottom:5%; margin:0px; padding:5%; background:#F6F6F6}		
		section.morebuttons{margin-top:5%; margin-bottom:5%; margin:0px; padding:5%; background:#fff}
		section.moreproducts{margin-top:5%; margin-bottom:5%; margin:0px; padding:5%; padding-top:0px; background:#fff}
		section.productocompleto{margin-top:5%; margin-bottom:5%; margin:0px; padding:5%; background:#fff}		
		section.header{ margin:0px; padding:40px; background:url(../img/slider3.jpg) center center  #fff;
		width:calc(100% - 80px); position:relative}
			.film{ background:rgba(255,255,255,0.9); width:100%; height:100%; position:absolute; left:0px; top:0px; z-index:1}
			
			section.header a{ text-decoration:none; color:#888; text-transform:uppercase; font-weight:600; font-family:Roboto; font-size:20px; position:relative; z-index:2}
				section.header a.bread{ font-weight:300}
				
				section.header a:hover{color:#333}
			
			.info{ float:left; width:40%; margin-top:10px}
				.info h1{color:#666666; font-family:Roboto; font-weight:100; text-transform:uppercase; float:left; width:100%; font-size:40px; line-height:50px}
				.info p{color:#666666; font-family:Roboto; font-weight:200; float:left; width:100%; margin-top:40px; font-size:15px}
				.info a{ background:#666666; color:#fff; width:calc(100% - 20px); padding:10px 10px; float:left; border-radius:20px;
				text-align:center; text-decoration:none; text-transform:uppercase; font-weight:300; margin-top:40px; font-size:13px}
					.info a:hover{ background:#09408d}
					.info a.add{ background:#C4C4C4; width:50%; float:right}
						.info a.add:hover{ background:#333}
						
					input[type=number] {
					  float: left;
					  width: 60px;
					  height: 40px;
					  padding: 0;
					  font-size: 1.2em;
					  text-transform: uppercase;
					  text-align: center;
					  color: #999999;
					  border:0px none;
					  background: none;
					  outline: none;
					  pointer-events: none; background:#F5F5F5
					}
						
						table input[type=number]{ width:30px; height:30px}
						
					span.spinner {
					  margin-top:40px;				
					  height: 40px;
					  user-select: none;
					  -ms-user-select: none;
					  -moz-user-select: none;
					  -webkit-user-select: none;
					  -webkit-touch-callout: none;
					  float:left
					}
						table span.spinner{ margin-top:0px}
					
					span.spinner > .sub,
					span.spinner > .add {
					  float: left;
					  display: block;
					  width: 40px;
					  height: 40px;
					  text-align: center;
					  font-family: Lato;
					  font-weight: 700;
					  font-size: 1.2em;
					  line-height: 40px;
					  color: #fff;
					  border: 0px none;
					  border-right: 0;
					  background:#C4C4C4;
					  cursor: pointer;
					  transition: 0.1s linear;
					  -o-transition: 0.1s linear;
					  -ms-transition: 0.1s linear;
					  -moz-transition: 0.1s linear;
					  -webkit-transition: 0.1s linear;
					  border-radius:20px 0px 0px 20px
					}
					
						table span.spinner > .sub,
						table span.spinner > .add{ width:25px; height:30px; line-height:30px}
					
					span.spinner > .add {
					  top: 0;
					  border: 0px none;
					  border-left: 0;
					  border-radius:0px 20px 20px 0px
					}
					
					span.spinner > .sub:hover,
					span.spinner > .add:hover {
					  background: #333;
					  color: #fff;
					}
					 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
					 -webkit-appearance: none;
					}	
						table td.alright{ text-align:right}
						
						
			.picsproducto{ float:right; width:55%; margin-top:10px; text-align:center}
				.picsproducto img{ width:100%; max-width:400px}
			#interior section.moreproducts{ background:#f6f6f6}
				.white{ background:#fff!important; border-bottom:1px solid #CCCCCC}
				
				.white h1 span { background:#fff!important}
				
			section.easy .insider{width:100%; float:left}
			section.morebuttons .insider{width:100%; float:left}
			section.moreproducts .insider{width:100%; float:left}
			
			a.megabutton{ width:calc(50% - 10px); float:left; min-height:322px; position:relative;
			  overflow:hidden;
			  -webkit-transition: all 0.5s ease;  
			  -moz-transition: all 0.5s ease;  
			  -o-transition: all 0.5s ease;  
			  -ms-transition: all 0.5s ease;  
			  transition: all 0.5s ease
			}
				a.megabutton p{ float:left; width:100%; overflow:hidden; background:#000;max-height:322px}
					a.megabutton img{  float:left;
				-webkit-transition: all 0.5s ease;  
						  -moz-transition: all 0.5s ease;  
						  -o-transition: all 0.5s ease;  
						  -ms-transition: all 0.5s ease;  
						  transition: all 0.5s ease; height:100%; max-height:322px}
				a.megabutton span{ width:calc(100% - 50px); height:auto; position:absolute; left:0px; bottom:0px; background:url(../img/bg-shadow1.png) repeat-x;
				color:#fff; padding:25px; font-family:Roboto; font-size:25px; font-weight:100;
						-webkit-transition: all 0.5s ease;  
						-moz-transition: all 0.5s ease;  
						-o-transition: all 0.5s ease;  
						-ms-transition: all 0.5s ease;  
						transition: all 0.5s ease
				}
					a.megabutton span i{ float:left; width:50%; font-style:normal; max-width:210px}
					a.megabutton span b{ color:rgba(255,255,255,0.6); font-weight:300; font-size:14px; float:left; width:100%;
					text-transform:uppercase}
			
			a.megabutton:hover span{ padding-bottom:50px}
			a.megabutton:hover p img{ opacity:0.5}
			
			
			
			a.middlebutton{ width:calc(50% - 10px); float:right; min-height:151px; position:relative;
			  overflow:hidden;	
			  -webkit-transition: all 0.5s ease;  
			  -moz-transition: all 0.5s ease;  
			  -o-transition: all 0.5s ease;  
			  -ms-transition: all 0.5s ease;  
			  transition: all 0.5s ease
			}
				a.middlebutton p{ float:left; width:100%; overflow:hidden; background:#000;max-height:151px}
					a.middlebutton img{  float:left;
				-webkit-transition: all 0.5s ease;  
						  -moz-transition: all 0.5s ease;  
						  -o-transition: all 0.5s ease;  
						  -ms-transition: all 0.5s ease;  
						  transition: all 0.5s ease;  max-width:100%;}
				a.middlebutton span{ width:auto; height:calc(100% - 50px); position:absolute; left:0px; top:0px; background:url(../img/bg-shadow2.png) repeat-y;
				color:#fff; padding:25px; font-family:Roboto; font-size:25px; font-weight:100;
						-webkit-transition: all 0.5s ease;  
						-moz-transition: all 0.5s ease;  
						-o-transition: all 0.5s ease;  
						-ms-transition: all 0.5s ease;  
						transition: all 0.5s ease
				}
					a.middlebutton span i{ float:left; width:auto; font-style:normal; max-width:210px}
					a.middlebutton span b{ color:rgba(255,255,255,0.6); font-weight:300; font-size:14px; float:left; width:100%;
					text-transform:uppercase}
			
			a.middlebutton:hover span{ padding-left:50px}
			a.middlebutton:hover p img{ opacity:0.5}
			
			a.downbutton{ margin-top:20px;
			-webkit-transition: all 0.5s ease;  
			  -moz-transition: all 0.5s ease;  
			  -o-transition: all 0.5s ease;  
			  -ms-transition: all 0.5s ease;  
			  transition: all 0.5s ease}
				a.downbutton span{ right:0px; top:0px; background:url(../img/bg-shadow3.png) repeat-y right top; text-align:right}
					a.downbutton span i{ float:right}
			a.downbutton:hover span{ padding-right:50px}
			
			.moreproducts h1{ font-size:35px; font-family:Roboto; text-transform:uppercase; font-weight:100; margin-top:0px; margin-bottom:25px;
			float:left; width:100%; background:url(../img/dot.jpg) center left repeat-x}
				.moreproducts h1 b{ font-weight:300}
				.moreproducts h1 span{ float:left; background:#fff; padding-right:20px; margin:0px}
					#interior .moreproducts h1 span{ background:#f6f6f6}
					#interior .moreproducts h1{ margin-top:35px}
			.productos{width:90%; margin-left:5%; float:left; margin-top:20px; margin-bottom:40px}
				.productos a{ text-align:center}
				.productos p{ border-radius:220px; background:#000; overflow:hidden; height:220px; width:220px; margin:0 auto;
				position:relative}			
				.productos i{ width:100%; height:100%; position:absolute; left:0px; top:0px;box-shadow:inset 0px 0px 6px rgba(0,0,0,0.6); border-radius:220px;
				  -webkit-transition: all 0.5s ease;  
				  -moz-transition: all 0.5s ease;  
				  -o-transition: all 0.5s ease;  
				  -ms-transition: all 0.5s ease;  
				  transition: all 0.5s ease}	
				.productos img{float:left; max-height:220px; background:#000}
				.productos span{ position:absolute; left:0px; bottom:15px; background:rgba(255,255,255,0.75); text-align:center; width:100%; font-weight:600;
				font-size:16px; padding-top:10px; padding-bottom:10px; color:#333}
					.productos span b{ font-weight:200}
					
				.productos a:hover i{box-shadow:inset 0px 0px 25px rgba(0,0,0,0.8)}	
					.productos a:hover img{ opacity:0.95}
					
			.white .productos{ width:100%; margin:0%}
				.white .productos a{ width:33.33%; float:left; margin-bottom:25px; margin-top:25px}
			
		section.easy h1{ font-family:Roboto; font-weight:100; font-size:25px; color:#999999;
		width:100%; text-align:center; margin-bottom:5%}
			section.easy h1 b{color:#333;font-family:Roboto; font-weight:100; font-size:40px; text-transform:uppercase; margin-bottom:0px; line-height:50px}
		section.easy p{width:30.33%; margin-left:1.5%; margin-right:1.5%; float:left}
			section.easy p i{ width:20%; float:left; text-align:center}
				section.easy p i img{ max-width:66px; text-align:center; width:100%}
			section.easy p span{ width:70%; float:right; color:#999999; font-family:Roboto; font-size:14px; font-weight:300}
				section.easy p span b{ font-family:Roboto; font-size:18px; font-weight:300; color:#333}
	
		.suscription{ width:100%; float:left; background:#333333; border-radius:10px; margin-top:5%}
			.suscription span{font-family:Oswald; font-size:21px; color:#fff; font-weight:300; padding:15px; float:left; height:21px; line-height:21px}
			.suscription form{ float:right; height:31px; padding:10px; width:40%; position:relative}
				.suscription form input{ border:0px none; height:31px; float:left; position:absolute}
					.suscription form input.search{ border-radius:5px 0px 0px 5px; width:50%; float:right; padding:5px; height:23px; font-family:Oswald; font-weight:200;
					font-size:17px; left:0px; top:10px; z-index:1; width:88%}
					.suscription form input.enviar{background:#09408d; float:left; padding-left:15px; padding-right:15px; border-radius:0px 5px 5px 0px; font-family:Oswald; 
					border:0px none; text-transform:uppercase; color:#333; margin-top:0px;  cursor:pointer;-webkit-appearance: none; 
					font-size:18px; font-weight:400; line-height:31px; height:33px; float:right; right:10px; top:10px; z-index:2}
					
						.suscription form input.enviar:hover{ background:#000; color:#fff}
		
	/*quienes*/
	#quienes{width:100%; margin-left:0%; margin-right:0%}
		#quienes .bgblack{ width:100%; background:url(../img/bg-quienes.jpg); float:left; text-align:center}
			#quienes .bgblack img{ max-width:737px; width:90%; margin-top:10%; z-index:2}
		#quienes .textoquienes{ background:#09408d; float:left; margin-top:-4%; z-index:1; width:100%}
			#quienes .textoquienes span{ font-size:15px; font-family:Roboto; float:left; width:40%; margin:5%; text-align:justify; line-height:18px}
				#quienes .textoquienes span b{ font-family:Roboto; font-weight:600; font-size:24px; float:left; width:100%; margin-bottom:10px}
				#quienes .textoquienes span strong{ font-family:Roboto; font-weight:600; font-size:22px; line-height:18px}
	
	#servicios{width:90%; padding:5%; background:#F1F1F1; margin:0%}
		#servicios h1{ float:left; text-align:center; width:100%; font-family:Roboto; font-size:100px; text-transform:uppercase; line-height:70px; margin-bottom:5%}
		.containerservices{ width:100%; display:block; margin-bottom:0px; padding-bottom:0px; background:#fff; padding-left:0px; padding-right:0px; padding-top:0px}			
			.square{ width:33.33%; float:left; min-height:350px; position:relative;background-size: cover;
			-webkit-transition: all;
				-moz-transition: all;
				-ms-transition: all;
				-o-transition: all;
				transition: all;
				-moz-transition-duration: 300ms;
				-webkit-transition-duration: 300ms;
				transition-duration: 300ms; background-color:#fff;position:relative; cursor:pointer}
				.square:hover span{background:rgba(0,0,0,0.65)}
				
				.square span{background:rgba(0,0,0,0.15); height:auto; margin-top:0%; width:100%; position:absolute; max-width:100%!important;
				-webkit-transition: all;
				-moz-transition: all;
				-ms-transition: all;
				-o-transition: all;
				transition: all;
				-moz-transition-duration: 500ms;
				-webkit-transition-duration: 500ms;
				transition-duration: 500ms;  height:100%;
				box-shadow:inset 0px 0px 250px rgba(0,0,0,0.8)}
					.square span b{ font-size:16px; color:#fff; text-transform:uppercase; font-weight:300;
					text-align:center; float:left;width:100%; height:100%; position:relative; vertical-align:middle; display:table
					}
					.square span b strong{font-weight:600; font-size:28px;  display: table-cell;
  vertical-align: middle}
  					.square span b strong i{ font-style:normal; font-size:13px; width:80%; float:left; margin-left:10%; margin-top:5px; text-transform:none;
					font-weight:200; display:none}
					.square:hover span b strong i{ display:block}
		
		.s1{ background-image:url(../img/s1.jpg); background-position:center center; background-size:cover}	
		.s2{ background-image:url(../img/s2.jpg); background-position:center center; background-size:cover}
		.s3{ background-image:url(../img/s3.jpg); background-position:center center; background-size:cover}
		.s4{ background-image:url(../img/s6.jpg); background-position:center center; background-size:cover}
		.s5{ background-image:url(../img/s5.jpg); background-position:center center; background-size:cover}
		.s6{ background-image:url(../img/s4.jpg); background-position:center center; background-size:cover}
	
	
	#blog{ background:#fff; float:left; width:100%; margin:0px}
		#blog .insider{float:left; width:90%; height:auto; margin:5%}
		
		#blog p{ float:left; position:relative}
			#blog p img{ float:left; width:100%}
			
			#blog p span{ position:absolute; font-size:14px; width:49%}
			#blog p.blacki span{color:#fff; left:5%; top:25%; line-height:20px}
			#blog p.whitey span{color:#333; right:5%; top:25%; line-height:20px}
				#blog p span strong{ font-family:Roboto; font-size:25px; text-transform:uppercase; float:left; width:100%; margin-bottom:10px; white-space:nowrap}
				#blog p span k{ float:left}
				#blog p span a{float:left; width:auto; padding:6px 10px; border-radius:3px; background:#09408d; color:#000; text-decoration:none; margin-top:10px;
				font-family:Oswald; font-size:21px; text-transform:uppercase; margin-right:10px}
					#blog p span a:hover{ background:#000; color:#fff}
					#blog p.blacki a:hover{ background:#fff; color:#000}
			#blog p b{ font-size:50px; color:rgba(255,255,255,0.25); position:absolute; left:4.5%; top:5%; line-height:40px; letter-spacing:-2px}
				#blog p.whitey b{color:rgba(0,0,0,0.1); left:auto; right:4.5%}
			
	
	/*blog*/
	.content{  float:left; width:100%; margin-top:0px}
	.lastcontent{width:auto; padding:50px; max-width:900px; margin:0 auto; padding-top:35px}
	
	.section{ color:#000; text-decoration:none; font-family:Oswald; float:left; width:100%; font-size:65px; border-bottom:1px solid #333; padding-bottom:25px; padding-top:25px;
	line-height:65px; letter-spacing:-2px; position:relative}
		
	
	.w65 {
		float:left;
	  margin-bottom:0;
	  width:calc(65% - 10px);
	  border-right:1px solid #333;
	  margin-bottom:0px;
	  padding:10px 20px 20px 0;
	  width:calc(65% - 21px);
	}
		.cabezanota {
		  border-bottom:1px solid #333;
		  float:left;
		  margin-bottom:10px;
		  width:100%;
		}	
			.date {
			  color:#AAAAAA;
			  float:left;
			  font-family:Oswald;
			  font-size:18px;
			  font-weight:100;
			  margin-bottom:0;
			  margin-top:10px;
			  width:100%;
			}
			.date k {
			  font-size:20px;
			  margin-right:5px;
			}
			h3.titulo {
			  color:#000000;
			  float:left;
			  font-family:Roboto;
			  font-size:42px;
			  font-weight:600;
			  line-height:42px;
			  margin-bottom:10px;
			  margin-top:10px;
			  width:100%;
			}
			h4.bajante {
			  color:#777777;
			  float:left;
			  font-family:Roboto;
			  font-size:20px;
			  font-weight:100;
			  line-height:20px;
			  margin-bottom:10px;
			  margin-top:10px;
			  text-align:justify;
			  width:100%;
			}
				h4.bajante b{ font-family:Roboto}
			p.credito {
			  color:#000000;
			  float:left;
			  font-family:Roboto;
			  font-size:18px;
			  font-weight:100;
			  margin-bottom:20px;
			  margin-top:10px;
			  text-align:left;
			  width:100%;
			}
			
			.compartir {
			  border-bottom:1px solid #333;
			  float:left;
			  margin-bottom:10px;
			  padding-bottom:10px;
			  width:100%;
			}
				.compartir span {
				  color:#CCCCCC;
				  font-family:Oswald;
				  font-size:22px;
				  text-transform:uppercase;
				}
		.lastcontent .slider {
		  float:left;
		  margin-top:10px;
		  width:100%;
		}
		#bx-pager {
		  padding-top:30px;
		  padding-bottom:30px;
		  width:15%; position:relative; float:right; margin-top:30px
		}
			#bx-pager li {
			  cursor:pointer;
			  float:left;
			  height:auto;
			  margin:10px 5px 0; vertical-align:middle
			}
			
			#bx-pager li img {
			  -webkit-filter:grayscale(100%);
			  float:left;
			  width:100%;
			  height:auto; opacity:0.4;box-shadow:0px 0px 1px rgba(0,0,0,0.5); vertical-align:middle
			}
		
		.slick-prev {
		  background:url("../img/left-arrow.png") center center no-repeat #000000;
		  top:0px;
		  float:left;
		  height:20px;
		  left:0px;
		  margin:0;
		  position:absolute;
		  text-indent:-9999px;
		  width:100%; border-radius:10px		 
		}
		
		.slick-next {
		  background:url("../img/right-arrow.png") center center no-repeat #000000;
		  top:auto;bottom:0px;
		  float:left;
		  height:20px;
		  margin:0;
		  position:absolute;
		  right:0px;
		  text-indent:-9999px;
		  width:100%; border-radius:10px	  		  
		}
		.slider-for{ width:85%; float:left}
		.slider-for li {
		  background:#fff;
		  position:relative;
		}
		
		.slider-for p {
		  background:#fff;
		  bottom:10px;
		  left:10px;
		  position:absolute;
		  right:10px;
		}
		.slider-for p b {
		  box-shadow:#3D3D3D 1px 0 0px, #3D3D3D 1px 0 0px, #3D3D3D 1px 0 0;
		  color:#FFFFFF;
		  float:left;
		  font-family:Roboto;
		  font-size:20px;
		  font-weight:800;
		  margin-bottom:15px;
		  margin-left:15px;
		  margin-top:15px;
		  min-height:50px;
		  padding-right:15px;
		  text-align:right;
		  width:calc(60% - 30px);
		  box-shadow:rgba(0, 0, 0, 0) 0 0 0;
		  font-weight:500;
		  min-height:20px;
		  width:calc(100% - 30px);
		}
		.slick-prev,.slick-next{opacity:0.3}
						.slick-prev:hover,.slick-next:hover{opacity:1}
			#bx-pager li:hover img,.slick-center img,.slick-slide.slick-current.slick-active img{-webkit-filter: grayscale(0%)!important;filter: grayscale(0%);
			opacity:1!important; }
			
		.cuerponota {
		  float:left;
		  margin-top:20px;
		  width:100%;
		}
			.cuerponota p {
			  font-size:15px;
			  line-height:24px;
			  text-align:justify;
			}
			.cuerponota p strong {
			  font-size:15px;
			  line-height:24px;
			  text-align:justify;
			  font-family:Roboto; font-weight:normal
			}
			
			.cuerponota p b {
			  
			  font-family:Roboto; font-weight:normal
			}
			
			.comments {
			  border-top:1px solid #333;
			  float:left;
			  margin-bottom:15px;
			  margin-top:15px;
			  padding-top:20px; display:none
			}
			
			.comments span.commentstitle {
			  color:#AAAAAA;
			  float:left;
			  font-family:Roboto;
			  font-size:20px;
			  font-weight:600;
			  width:100%;
			}
			.comments p {
			  background:#FAFAFA;
			  float:left;
			  font-size:14px !important;
			  line-height:20px !important;
			  margin-top:30px;
			  padding:15px;
			  width:calc(100% - 30px);
			}
			
			
		.comments p b {
		  background:url("../img/linegrey.jpg") left bottom no-repeat;
		  float:left;
		  font-family:Roboto;
		  font-size:17px;
		  margin-bottom:10px;
		  padding-bottom:15px;
		  width:100%;
		}
		
		.comments p b strong {
		  color:#AAAAAA;
		  float:right;
		  font-size:13px;
		  font-weight:100; font-family:Roboto
		}
		
		.cuerponota form {
		  background:#F0F0F0;
		  float:left;
		  margin-top:15px;
		  padding:20px;
		  width:calc(100% - 40px); display:none
		}
		.cuerponota form h5 {
		  color:#000000;
		  float:left;
		  font-family:Roboto;
		  font-size:20px;
		  font-weight:600;
		  margin-bottom:15px;
		  width:100%;
		}
		.cuerponota input.texto, .cuerponota textarea.texto {
		  background:#FAFAFA;
		  border:0 none;
		  box-shadow:#CCCCCC 1px 1px 1px inset;
		  font-size:14px;
		  margin-bottom:20px;
		  padding:10px;
		  width:calc(100% - 22px);
		}
		.cuerponota input.texto {
		  margin-left:20px;
		  width:calc(50% - 32px);
		}
		.cuerponota input.texto.first {
		  margin-left:0;
		}
		.cuerponota input.enviar {
		  background:#464646;
		  border:0 none;
		  color:#FFFFFF;
		  cursor:pointer;
		  float:left;
		  font-family:Oswald;
		  font-size:17px;
		  font-weight:300;
		  height:35px;
		  text-transform:uppercase;
		  width:100%;
		}
		.cuerponota input.enviar:hover{ background:#000; color:#fff}
		
	.w35 {
	  float:left;
	  margin-bottom:10px;
	  margin-left:10px;
	  width:35%;
	  margin-left:10px;
	  padding:10px 0 20px 20px;
	  width:calc(35% - 30px);
	}
		.w35 .date {
		  background:#000000;
		  color:#FFFFFF;
		  float:left;
		  padding:10px;
		  width:calc(100% - 20px); margin-top:20px
		}
	
		.w35 a {
		  border-bottom-color:#DDDDDD;
		  border-left-color:#DDDDDD;
		  border-right-color:#DDDDDD;
		  border-style:none solid solid;
		  border-width:0 1px 1px;
		  color:#000000;
		  float:left;
		  font-family:Roboto;
		  font-size:18px;
		  padding:10px;
		  width:calc(100% - 22px); text-decoration:none
		}
			.w35 a span {
			  color:#AAAAAA;
			  float:left;
			  font-size:13px;
			  width:100%;
			}
		.w35 a:hover{ background:#fafafa}
		.related {
		  margin-top:30px;
		}
	
	
	.forsection .date{ font-size:14px}
		.forsection .date k{ font-size:16px}
	
	.forsection h3.titulo{ font-size:28px; line-height:28px}
							
	.forsection h4.bajante{ font-size:15px; line-height:15px; padding-bottom:20px}
	.pagina{float:left; padding:6px 10px; background:#f1f1f1; border-radius:2px; color:#333; margin-right:10px;
						margin-top:35px; text-decoration:none}
						span.pagina{color:#333; background:#ccc}	
						a.pagina:hover{ background:#000; color:#fff}
	
	.alignleft{ float:left}
	.alignright{ float:right}
	
		.alignright p{ text-align:justify}
	
	/*contacto*/
	#contacto{ border-bottom:1px solid #ccc; margin:0px; padding:5%}
	.contenido{
		width:100%; float:left; height:auto; position:relative; margin-top:0px
	}					
		.contenido h1{loat:left; text-align:center; width:100%; font-family:Roboto; font-size:55px; font-weight:100; text-transform:uppercase; line-height:70px; margin-bottom:5%}
	
	#google-map {
	  height: 350px; float:left; width:100%
	}
	
	.formulario{width:60%; float:left}
	#pedido{ width:50%}
	.contenido p.pautas{ font-weight:300; width:80%; margin-left:10%; float:left; margin-bottom:30px; text-align:center; font-size:15px}
		p.pautas a{color:#09408d; font-weight:400}
		 .formulario form{width:95%; float:right; margin-left:2.5%; margin-right:2.5%}
		 .formulario form input.texto,textarea,select.texto{border:1px solid #CCCCCC; width:95%; float:left; height:24px; border-radius:4px; margin-bottom:15px; padding:2%; font-size:15px;
		 font-weight:300}
				textarea{ height:100px}
				select.texto{ width:99.5%; padding:0%; margin:0px; margin-bottom:15px; height:55px; background:#fff; border-radius:0px!important}
		 .formulario form input.submit{
			 background:#666666;
  border-radius:5px;
  color:#FFFFFF;
  float:left;
  font-size:13px;
  font-weight:300;
  margin-top:0px;
  padding:10px;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  width:100%; border:0px none; cursor:pointer
			 
			 }
				.formulario form input.submit:hover{ background:#09408d; color:#fff}
		 .formulario form p{ font-size:15px; margin-top:10px; float:left}
		 .formulario form p a{color:#DC2474; text-decoration:none}
	.details{width:35%; float:left; margin-left:2.5%; margin-right:2.5%; line-height:24px; font-size:14px; font-weight:300}
		#cart{ width:45%}
		.details a{color:#333; text-decoration:none}
		.details b{ font-family:Roboto; font-weight:normal; float:left; width:100%; margin-bottom:5px; font-size:18px; text-transform:uppercase}
	.mapa{width:100%; height:480px; z-index:0;  float:left; position:relative; margin-top:20px}
	.contacto{ margin-bottom:0px}
	
	/*fin de contacto*/
		
/*footer*/	
	.beforefooter{ width:90%; padding-left:5%; padding-right:5%; background:#222; float:left; padding-top:5%;}	
		.interior .beforefooter{ margin-top:0%}
	.pt25{ padding-top:45px;border-top:1px solid #999}
		.beforefooter .insider{max-width:1000px; margin:0 auto; height:auto}
		.row{width:90%; margin-left:5%; margin-right:5%; margin-bottom:45px; float:left}
		.column{ width:35%; margin-right:5%; float:left;}
		.megacolumn{ width:30%}
		.small{ margin-right:0%; width:25%}
			.column img{width:100%; max-width:248px; float:left; margin-top:0px; margin-bottom:10px}
			.column h1{font-family:Roboto; font-size:18px; float:left; font-weight:400; color:#fff}
			.column span{color:#666; font-size:14px; line-height:17px; margin-top:10px; float:left; width:100%; font-weight:300}
									
			.column span b,.column span b a{ font-weight:300; font-family:Roboto; font-size:13px; text-decoration:none; color:#aaa; line-height:20px}
			
			.column p{color:#666; font-size:13px; float:left; margin-top:5px; font-weight:300}
			
			.column ul{float:left; list-style-type:none; width:100%; margin-top:5px}
				.column ul li{float:left; width:auto; margin-top:5px; color:#666; font-size:13px; line-height:15px; font-weight:300}
					.column ul li a{color:#999; font-size:12px; line-height:17px; text-decoration:none; padding:5px; border:1px solid #aaa; margin:3px;
					float:left; font-weight:300}
					.column ul li a:hover{color:#333; border-color:#333}
	.footer{width:100%; float:left; background:#333}
		  .footer .insider{max-width:1000px; margin:0 auto; height:44px; text-align:center}											
				.footer .insider p{color:#999; font-size:13px; width:100%; text-align:center; float:left; margin-left:0px; line-height:44px}
					.footer .insider p a{text-decoration:none; color:#999; font-size:13px}
						.footer .insider p b{color:#fff; font-weight:300}
						.footer .insider p a:hover b{ color:#fff}
				.footer .insider a{color:#F2F2F2; font-size:18px; line-height:44px; text-decoration:none; float:right; margin-left:10px; margin-right:10px}
				.footer .insider a.arkanmedia{float:none}
				.footer .insider a:hover b{}
	
	.at-custom-sidebar .at-share-btn { margin:5px 2px}
		
		
	.slider-for li{ height:380px; width:100%; background:#fff}
	.slider-for li span{width:100%; height:100%; float:left;   position:relative}
		.slider-for li span img{ max-height:100%; width:auto;					
		max-height: 100%;max-width: 100%;width: auto;height: auto;position: absolute; top: 0; bottom: 0;left: 0;right: 0; margin: auto}		
		
		
	table {
		border-collapse: collapse;
		width: 100%;
	}
	
	th, td {
		text-align: left;
		padding: 8px; font-weight:300
	}
	
	tr:nth-child(even){background-color: #f2f2f2}
	
	th {
		background-color: #09408d;
		color: white;
	}	
	table td a{ font-weight:600}
		table td a:hover{ text-decoration:underline}

@media only screen and (min-width: 1100px) {
	/*#topnav .insider{ width:calc(1000px - 5%); margin:0 auto; float:none}*/
	.submenu .insider{width:calc(1000px - 10%)!important; margin-left:auto!important; margin-right:auto!important; float:none!important}							
	.insiderinsider{ width:calc(1000px - 5%); margin-left:auto; margin-right:auto}		
	.redes{width:calc(1000px - 5%); margin:0 auto; float:none}
	
	.levels .insider{width:calc(1000px - 5%); margin:0 auto; float:none; min-height:80px}
	section.easy .insider{width:calc(1000px - 5%); margin:0 auto; float:none}
	section.morebuttons .insider{width:calc(1000px - 5%); margin:0 auto; float:none}
	section.moreproducts .insider{width:calc(1000px - 5%); margin:0 auto; float:none}
	section.productocompleto .insider{width:calc(1000px - 5%); margin:0 auto; float:none}
	section.header .insider{width:calc(1000px - 5%); margin:0 auto; float:none}
	
	#quienes .textoquienes .insider{ width:calc(1000px - 5%); margin:0 auto; float:none}
	
	/*#blog .insider{ width:calc(1000px - 5%); margin:0 auto; float:none; margin-top:5%}*/
	
	#blog p span{ position:absolute; font-size:18px; width:50%; max-width:450px}
		#blog p.blacki span{  top:30%; line-height:30px}
		#blog p.whitey span{ top:30%; line-height:30px}
				#blog p span strong{ font-size:35px; margin-bottom:20px}
			#blog p b{ font-size:100px; line-height:70px}								
}

@media only screen and (min-width: 1024px) {
	
	.sectioncontent{ min-height:800px}
}
@media only screen and (max-width: 1023px) {
	.w65 img{float:left; width:100%}
	.slider{ position:relative}
	
	
	.w65, .w35{ width:calc(100% - 40px); padding-right:20px; padding-left:20px; border-right:0px; margin-left:0px}
}

@media only screen and (min-width: 767px) {
	#hiddenmenu{ display:none!important}	
}

@media only screen and (min-width: 1000px) {
section.easy p i{ margin-top:25px}
}

@media only screen and (min-width: 1260px) {
.close{display:none!important}
}
@media only screen and (min-width: 1430px) {
/*.logo{width:580px; height:459px}*/
.close{display:none!important}
}
@media only screen and (min-width: 767px) and (max-width: 999px) {
.info,.picsproducto{ width:100%}	
	.alignleft{ margin-top:50px}
#topnav .datos{  background:#FFC63E}
#topnav .datos span{color:#000}
a.bullet{width:31.33%}
a.first,a.second{ margin-bottom:0px}
.close{display:none!important}
.bgred{  width:46%}
.column{width:47.5%!important; margin-right:0%}
.megacolumn{width:47.5%!important; margin-right:5%}
.small{ display:none}
	
.levels span{ font-size:30px; line-height:40px;  margin-top:0px }
	.levels a b{   color:#F9E515;
		font-family:Oswald; font-weight:600; font-size:20px; text-transform:uppercase; 
		margin: auto;
		position:absolute;
		top: 0; left: 0; bottom: 0; right: 0; text-align:center; vertical-align:middle; 
		margin-top:-10px; top:50%
	  }
section.easy p{width:100%; margin-left:0%; margin-right:0%; margin-bottom:5%}
section.easy p:last-child{ margin-bottom:0%}
section.easy p span{ margin-right:10%; width:60%; font-size:17px}
section.easy p i { width:30%}
.square{ width:50%; max-height:300px}

.suscription form{ width:38%}
.suscription span{ font-size:16px}

.section{  font-size:50px}

.white .productos a{ width:50%; float:left; margin-bottom:25px; margin-top:25px}
}
/* Entre 768 y 640 */
@media only screen and (max-width: 767px) {
	
.white .productos a{ width:50%; float:left; margin-bottom:25px; margin-top:25px}
.alignleft{ margin-top:50px}
.info,.picsproducto{ width:100%}
#topnav .datos{  background:#FFC63E}
#topnav .datos span{color:#000}
#topnav ul { display:none}
	#topnav ul .submenuopened{ display:block; float:left; width:100%;border-top:1px solid rgba(0,0,0,0.05); background:rgba(0,0,0,0.02)}
		#topnav ul .submenuopened li a{ font-weight:300}
#topnav { }

p.menu{ width:40px; margin:0px; margin-top:32px}
.formulario form input.submit{width:100%}
.formulario,.details,#pedido,#cart{width:100%; margin:0px;margin-bottom:15%}
.details{ text-align:center}
ul.mainmenu li a.selected,ul.mainmenu li a.selected:hover{
	color:#FFC63E!important
}
.column{width:100%!important; margin-right:0%}
.megacolumn{ margin-bottom:45px; border-bottom:1px solid rgba(0,0,0,0.2); padding-bottom:45px}
.small{ display:none}
.column img{ float:right}
.column span{ text-align:justify}
.column b,.column p{ float:right; text-align:right}
.parallaxinsider span{ margin-bottom:100px}
.columna{width:100%; margin-right:0%; margin-left:0%; float:left; position:relative}
.columna p{ margin-bottom:30px; margin-top:30px; text-align:center!important}



.levels span{ width:calc(50% - 50px); margin-left:0px; margin-right:40px; 
		font-weight:300; font-size:35px; line-height:50px; margin-top:15px; padding-right:10px; margin-bottom:25px}
		.levels a{ width:calc(50% - 20px); float:left; margin-left:0px; margin-right:0px; position:relative}
		.levels a.last{ margin-bottom:40px}
		.levels a.last{ margin-left:20px}
		.levels a.first{ margin-left:40px}
		.levels a.first,.levels a.middle{ margin-bottom:20px}
section.easy img{ max-width:66px}

section.easy p{width:100%; margin-left:0%; margin-right:0%; margin-bottom:10%}
section.easy p:last-child{ margin-bottom:0%}
section.easy h1{ font-size:20px; margin-bottom:10%}
section.easy h1 b{ font-size:35px}
#quienes .textoquienes .insider span{ width:85%; margin:7.5%}
#quienes .textoquienes .insider span:first-child{ margin-bottom:0%; border-bottom:1px solid rgba(0,0,0,0.5); padding-bottom:7.5%}
.square{ width:50%; max-height:300px}

.bx-wrapper .bx-caption span{ font-size:25px; line-height:30px; text-align:left!important}
.bx-wrapper .bx-caption span b{ font-weight:600; font-size:30px}
.bx-wrapper .bx-caption span a{ font-size:12px; line-height:16px; height:16px; padding:10px 15px; margin-top:10px}

a.megabutton{ width:100%}
a.megabutton span i{ width:100%}


}

@media only screen and (min-width: 600px) and (max-width: 767px) {
	#blog p span{ font-size:11px; line-height:14px}
		#blog p span k{ line-height:12px}
	.suscription form{ width:38%}
	.suscription span{ font-size:12px}
	.section{  font-size:35px}	
	
	a.middlebutton{ margin-top:20px; float:left}
	a.downbutton{ float:right}
}

@media only screen and (max-width: 600px) {
	#blog p span k{ display:none}
	#blog p.blacki span,#blog p.whitey span{ top:35%}
	#blog p.blacki span strong,#blog p.whitey span strong{ font-size:20px}
	
	.suscription form{ width:calc(100% - 20px)}
		.suscription form .search{ left:10px!important}
	.suscription span{ font-size:14px;  width:calc(100% - 30px); padding-bottom:0px;text-align:center; height:auto}
	.w65, .w35{ width:100%!important; padding-right:0px!important; padding-left:0px!important; border-right:0px; margin-left:0px}
	.lastcontent{ padding:20px;padding-top:40px}
	
	.section{  font-size:35px}
	
	a.middlebutton{ margin-top:20px}
	a.middlebutton{ width:100%}
	a.middlebutton span i{ width:100%}	
	
	a.middlebutton{ min-height:auto}
	a.middlebutton p{ min-height:auto; height:auto; overflow:none; max-height:auto}
		a.middlebutton img{ height:auto; min-height:auto; width:100%}
	
	.white .productos a{ width:100%; float:left; margin-bottom:25px; margin-top:25px}
}
@media only screen and (max-width: 490px) {
	.levels span{ width:100%; margin-left:0px; margin-right:0px; margin-bottom:25px; text-align:center}
		.levels span b{ display:none}
		.levels span i{ display:block; font-style:normal}
		.levels a{ width:100%; float:left; margin-left:0px!important; margin-right:0px!important; margin-bottom:30px!important}
		
	section.easy h1{ font-size:14px}
	section.easy h1 b{ font-size:23px; line-height:35px}
	.square{ width:100%}	
	
	.section{  font-size:25px; letter-spacing:-1px}		
}

@media only screen and (min-width: 640px) and (max-width: 767px) {
	.bgred p span{ display:none}
	a.bullet{width:48%}
	a.bullet.third{width:98%; margin:1% 1%}
	a.first,a.second{ margin-bottom:0px}
	.contenidointerior p.textos{-webkit-column-count:1; -webkit-column-gap:0px; margin-bottom:10%; padding-top:10%}
	.sliderservicios{margin-top:0%}
}
@media only screen and (min-width: 480px) and (max-width: 640px) {
	a.bullet{width:90%; margin:6% 5%}
	a.first,a.second{ margin-bottom:0px}
	.bgred p span{ display:none}
	.contenidointerior p.textos{-webkit-column-count:1; -webkit-column-gap:0px; margin-bottom:10%; padding-top:10%}
	.bgredinterior h1{ font-size:45px; line-height:40px}
	.sliderservicios{margin-top:0%}
	.square{ width:100%}
	#servicios h1,#contacto h1{ font-size:45px; line-height:60px}
}
@media only screen and (min-width: 320px) and (max-width: 480px){
	a.bullet{width:90%; margin:6% 5%}
	a.first,a.second,a.third{ margin-bottom:0px}
	.bgred p span{ display:none}
	.contenidointerior p.textos{-webkit-column-count:1; -webkit-column-gap:0px; margin-bottom:10%; padding-top:10%}
	.bgredinterior h1{ font-size:40px; line-height:35px}
	.sliderservicios{margin-top:0%}
	#servicios h1,#contacto h1{ font-size:40px; line-height:50px; margin-top:30px}
	#servicios .insider .square{ width:111%; margin-left:-5.5%}
	.square span{background:rgba(0,0,0,0.65); box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5)}
	.square span b strong i{ display:block}
	#blog p span strong.buttons{ width:200%;}
	#blog p.whitey span strong.buttons{margin-left:-50%}
		#blog p span strong.buttons a{ margin-top:0px}
	#blog p b { font-size:35px; line-height:30px; letter-spacing:0px}
			
}
@media only screen and (max-width: 320px){
	input[type=number] { width:35px}
	a.bullet{width:98%; margin:6% 5%}
	a.first,a.second,a.third{ margin-bottom:0px}
	.bgred p span{ display:none}
	.contenidointerior p.textos{-webkit-column-count:1; -webkit-column-gap:0px; margin-bottom:10%; padding-top:10%}
	.bgredinterior h1,#contacto h1{ font-size:40px; line-height:35px}
	.sliderservicios{margin-top:0%}
	.square span{background:rgba(0,0,0,0.65); box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5)}
	.square span b strong i{ display:block}
	.section{  font-size:20px; letter-spacing:-1px}	
	#blog p b { font-size:30px; line-height:25px; letter-spacing:0px}
	#blog p span{ position:absolute; font-size:14px; width:49%}
	#blog p span strong.buttons{ width:200%}
		#blog p.whitey span strong.buttons{margin-left:-70%}
		
		#blog p span strong.buttons a{ margin-top:0px}
	#blog p.blacki span strong, #blog p.whitey span strong{ font-size:18px}
	#topnav .insider{ height:93px}
	.logo{ margin-top:20px}
	.logo img{ height:53px}
}
iframe{-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%)}
	
#portfolio {
  background: #fff;
  min-height: 800px;
  padding: 0; padding-bottom:0px; width:100%; margin:0px; margin-top:50px
}
#portfolio .intro-wrap {
  padding: 8rem 0 10rem;
  background: #111111;
}
#portfolio .section-intro h3 {
  color: rgba(242, 242, 242, 0.5);
}
#portfolio .section-intro h1 {
  color: #FFFFFF;
}
#portfolio .section-intro .lead {
  color: rgba(242, 242, 242, 0.4);
}
#portfolio .portfolio-content {
  margin-top: 0rem; background:transparent; width:100%; margin:0px
}
#portfolio .bricks-wrapper:before, 
#portfolio .bricks-wrapper:after {
  content: "";
  display: table;
}
#portfolio .bricks-wrapper:after {
  clear: both;
}
#portfolio .bricks-wrapper .brick {
  float: left;
  width: 50%;
  padding: 0;
  margin: 0;
}
#portfolio .bricks-wrapper .brick:nth-child(2n+1) {
  clear: both;
}

/* ------------------------------------------------------------------- 
 * masonry entries - (_layout.css) 
 * ------------------------------------------------------------------- */
.bricks-wrapper .item-wrap {
  position: relative;
  overflow: hidden;
}
.bricks-wrapper .item-wrap .overlay {
  cursor: zoom-in;
}
.bricks-wrapper .item-wrap .overlay img {
  vertical-align: bottom;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; width:100%
}
.bricks-wrapper .item-wrap .overlay::before {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}
.bricks-wrapper .item-wrap .overlay::after {
  content: "...";
  font-family: georgia, serif;
  font-size: 3rem;
  z-index: 1;
  display: block;
  height: 30px;
  width: 30px;
  line-height: 30px;
  margin-left: -15px;
  margin-top: -15px;
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}
.bricks-wrapper .item-wrap .item-text {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3.6rem 0 0 3rem;
  margin-right: 6rem;
  z-index: 3;
}
.bricks-wrapper .item-wrap .item-text .folio-title {
  color: #FFFFFF;
  font-size: 1.8rem;
  line-height: 1.164;
}
.bricks-wrapper .item-wrap .item-text .folio-types {
  
  font-size: 0.6rem;
  line-height: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: rgba(255, 255, 255, 0.7);
  display: block;
}
.bricks-wrapper .item-wrap .details-link {
  display: block;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 4.6rem;
  width: 4.6rem;
  line-height: 4.6rem;
  color: white;
  text-align: center;
  z-index: 2;
  border-radius: 3px;
  position: absolute;
  top: 3.6rem;
  right: 3rem;
}
.bricks-wrapper .item-wrap .details-link i {
  font-size: 2rem;
  line-height: 4.2rem;
}
.bricks-wrapper .item-wrap .details-link:hover, .bricks-wrapper .item-wrap .details-link:focus {
  background-color: #FFFFFF;
  color: #000000;
}
.bricks-wrapper .item-wrap .item-text, .bricks-wrapper .item-wrap .details-link {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.bricks-wrapper .item-wrap .details-link { display:none}

.bricks-wrapper .item-wrap:hover .overlay::before {
  opacity: 1;
  visibility: visible;
}

.bricks-wrapper .item-wrap:hover .overlay::after {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.bricks-wrapper .item-wrap:hover .overlay img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}
.bricks-wrapper .item-wrap:hover .item-text, .bricks-wrapper .item-wrap:hover .details-link {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

/* ------------------------------------------------------------------- 
 * Light Gallery Overrides - (_layout.css) 
 * ------------------------------------------------------------------- */
.lg-sub-html {
  padding: 12px 20% 15px;
}
.lg-sub-html a, .lg-sub-html a:visited {
  color: #f9a828;
}
.lg-sub-html a:hover, .lg-sub-html a:focus {
  color: #FFFFFF;
}
@media only screen and (max-width: 1024px) {
  .lg-sub-html {
    padding: 12px 15% 15px;
  }
}
@media only screen and (max-width: 768px) {
  .lg-sub-html {
    padding: 12px 40px 15px;
  }
}

.lg-sub-html h4 {
  color: #FFFFFF;
  font-family: "montserrat-regular", sans-serif;
  font-size: 1.8rem;
  line-height: 1.333;
}

.lg-sub-html p {
  font-family: "montserrat-regular", sans-serif;
  font-size: 1.3rem;
  line-height: 2.4rem;
  margin: .6rem 0 0;
  color: rgba(255, 255, 255, 0.6);
}

.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
  border-color: #f9a828;
}

.lg-progress-bar .lg-progress {
  background-color: #FFFFFF;
}

#lg-counter {
  font-family: "montserrat-regular", sans-serif;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * portfolio
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  #portfolio .intro-wrap {
    padding: 12rem 0 21rem;
  }
}
@media only screen and (max-width: 600px) {
  #portfolio .bricks-wrapper .brick {
    float: none;
    width: 100%;
  }

  .bricks-wrapper .item-wrap .item-text .folio-title {
    font-size: 2rem;
    line-height: 1.5;
  }
}


/*----------------------------------------
 * 02.
 * light gallery default styles
 * ---------------------------------------- */

@font-face {
  font-family: 'lg';
  src: url("../fonts/lightgallery/lg.eot?n1z373");
  src: url("../fonts/lightgallery/lg.eot?#iefixn1z373") format("embedded-opentype"), url("../fonts/lightgallery/lg.woff?n1z373") format("woff"), url("../fonts/lightgallery/lg.ttf?n1z373") format("truetype"), url("../fonts/lightgallery/lg.svg?n1z373#lg") format("svg");
  font-weight: normal;
  font-style: normal;
}
.lg-icon {
  font-family: 'lg';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lg-actions .lg-next, .lg-actions .lg-prev {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  color: #999;
  cursor: pointer;
  display: block;
  font-size: 22px;
  margin-top: -10px;
  padding: 8px 10px 9px;
  position: absolute;
  top: 50%;
  z-index: 1080;
}

.lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.lg-actions .lg-next:hover, .lg-actions .lg-prev:hover {
  color: #FFF;
}

.lg-actions .lg-next {
  right: 20px;
}

.lg-actions .lg-next:before {
  content: "\e095";
}

.lg-actions .lg-prev {
  left: 20px;
}

.lg-actions .lg-prev:after {
  content: "\e094";
}

@-webkit-keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@-moz-keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@-ms-keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@-moz-keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@-ms-keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
.lg-outer.lg-right-end .lg-object {
  -webkit-animation: lg-right-end 0.3s;
  -o-animation: lg-right-end 0.3s;
  animation: lg-right-end 0.3s;
  position: relative;
}

.lg-outer.lg-left-end .lg-object {
  -webkit-animation: lg-left-end 0.3s;
  -o-animation: lg-left-end 0.3s;
  animation: lg-left-end 0.3s;
  position: relative;
}

.lg-toolbar {
  z-index: 1082;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}

.lg-toolbar .lg-icon {
  color: #999;
  cursor: pointer;
  float: right;
  font-size: 24px;
  height: 47px;
  line-height: 27px;
  padding: 10px 0;
  text-align: center;
  width: 50px;
  text-decoration: none !important;
  outline: medium none;
  -webkit-transition: color 0.2s linear;
  -o-transition: color 0.2s linear;
  transition: color 0.2s linear;
}

.lg-toolbar .lg-icon:hover {
  color: #FFF;
}

.lg-toolbar .lg-close:after {
  content: "\e070";
}

.lg-toolbar .lg-download:after {
  content: "\e0f2";
}

.lg-sub-html {
  background-color: rgba(0, 0, 0, 0.45);
  bottom: 0;
  color: #EEE;
  font-size: 16px;
  left: 0;
  padding: 10px 40px;
  position: fixed;
  right: 0;
  text-align: center;
  z-index: 1080;
}

.lg-sub-html h4 {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
}

.lg-sub-html p {
  font-size: 12px;
  margin: 5px 0 0;
}

#lg-counter {
  color: #999;
  display: inline-block;
  font-size: 16px;
  padding-left: 20px;
  padding-top: 12px;
  vertical-align: middle;
}

.lg-toolbar, .lg-prev, .lg-next {
  opacity: 1;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
  -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
  -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
  transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
}

.lg-hide-items .lg-prev {
  opacity: 0;
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
}

.lg-hide-items .lg-next {
  opacity: 0;
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
}

.lg-hide-items .lg-toolbar {
  opacity: 0;
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object {
  -webkit-transform: scale3d(0.5, 0.5, 0.5);
  transform: scale3d(0.5, 0.5, 0.5);
  opacity: 0;
  -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

.lg-outer .lg-thumb-outer {
  background-color: #0D0A0A;
  bottom: 0;
  position: absolute;
  width: 100%;
  z-index: 1080;
  max-height: 350px;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
}

.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}

.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
  -webkit-transition-duration: 0s !important;
  transition-duration: 0s !important;
}

.lg-outer.lg-thumb-open .lg-thumb-outer {
  -webkit-transform: translate3d(0, 0%, 0);
  transform: translate3d(0, 0%, 0);
}

.lg-outer .lg-thumb {
  padding: 10px 0;
  height: 100%;
  margin-bottom: -5px;
}

.lg-outer .lg-thumb-item {
  border-radius: 5px;
  cursor: pointer;
  float: left;
  overflow: hidden;
  height: 100%;
  border: 2px solid #FFF;
  border-radius: 4px;
  margin-bottom: 5px;
}

@media (min-width: 1025px) {
  .lg-outer .lg-thumb-item {
    -webkit-transition: border-color 0.25s ease;
    -o-transition: border-color 0.25s ease;
    transition: border-color 0.25s ease;
  }
}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
  border-color: #a90707;
}

.lg-outer .lg-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lg-outer.lg-has-thumb .lg-item {
  padding-bottom: 120px;
}

.lg-outer.lg-can-toggle .lg-item {
  padding-bottom: 0;
}

.lg-outer.lg-pull-caption-up .lg-sub-html {
  -webkit-transition: bottom 0.25s ease;
  -o-transition: bottom 0.25s ease;
  transition: bottom 0.25s ease;
}

.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
  bottom: 100px;
}

.lg-outer .lg-toogle-thumb {
  background-color: #0D0A0A;
  border-radius: 2px 2px 0 0;
  color: #999;
  cursor: pointer;
  font-size: 24px;
  height: 39px;
  line-height: 27px;
  padding: 5px 0;
  position: absolute;
  right: 20px;
  text-align: center;
  top: -39px;
  width: 50px;
}

.lg-outer .lg-toogle-thumb:after {
  content: "\e1ff";
}

.lg-outer .lg-toogle-thumb:hover {
  color: #FFF;
}

.lg-outer .lg-video-cont {
  display: inline-block;
  vertical-align: middle;
  max-width: 1140px;
  max-height: 100%;
  width: 100%;
  padding: 0 5px;
}

.lg-outer .lg-video {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}

.lg-outer .lg-video .lg-object {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.lg-outer .lg-video .lg-video-play {
  width: 84px;
  height: 59px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -42px;
  margin-top: -30px;
  z-index: 1080;
  cursor: pointer;
}

.lg-outer .lg-has-vimeo .lg-video-play {
  background: url("../images/lightgallery/vimeo-play.png") no-repeat scroll 0 0 transparent;
}

.lg-outer .lg-has-vimeo:hover .lg-video-play {
  background: url("../images/lightgallery/vimeo-play.png") no-repeat scroll 0 -58px transparent;
}

.lg-outer .lg-has-html5 .lg-video-play {
  background: transparent url("../images/lightgallery/video-play.png") no-repeat scroll 0 0;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  width: 64px;
  opacity: 0.8;
}

.lg-outer .lg-has-html5:hover .lg-video-play {
  opacity: 1;
}

.lg-outer .lg-has-youtube .lg-video-play {
  background: url("../images/lightgallery/youtube-play.png") no-repeat scroll 0 0 transparent;
}

.lg-outer .lg-has-youtube:hover .lg-video-play {
  background: url("../images/lightgallery/youtube-play.png") no-repeat scroll 0 -60px transparent;
}

.lg-outer .lg-video-object {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}

.lg-outer .lg-has-video .lg-video-object {
  visibility: hidden;
}

.lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play {
  display: none;
}

.lg-outer .lg-has-video.lg-video-playing .lg-video-object {
  visibility: visible;
}

.lg-progress-bar {
  background-color: #333;
  height: 5px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1083;
  opacity: 0;
  -webkit-transition: opacity 0.08s ease 0s;
  -moz-transition: opacity 0.08s ease 0s;
  -o-transition: opacity 0.08s ease 0s;
  transition: opacity 0.08s ease 0s;
}

.lg-progress-bar .lg-progress {
  background-color: #a90707;
  height: 5px;
  width: 0;
}

.lg-progress-bar.lg-start .lg-progress {
  width: 100%;
}

.lg-show-autoplay .lg-progress-bar {
  opacity: 1;
}

.lg-autoplay-button:after {
  content: "\e01d";
}

.lg-show-autoplay .lg-autoplay-button:after {
  content: "\e01a";
}

.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
}

.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
  -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
  -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
  -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
  -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
  transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#lg-zoom-in:after {
  content: "\e311";
}

#lg-actual-size {
  font-size: 20px;
}

#lg-actual-size:after {
  content: "\e033";
}

#lg-zoom-out {
  opacity: 0.5;
  pointer-events: none;
}

#lg-zoom-out:after {
  content: "\e312";
}

.lg-zoomed #lg-zoom-out {
  opacity: 1;
  pointer-events: auto;
}

.lg-outer .lg-pager-outer {
  bottom: 60px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 1080;
  height: 10px;
}

.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont {
  overflow: visible;
}

.lg-outer .lg-pager-cont {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  margin: 0 5px;
}

.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.lg-outer .lg-pager-cont.lg-pager-active .lg-pager {
  box-shadow: 0 0 0 2px white inset;
}

.lg-outer .lg-pager-thumb-cont {
  background-color: #fff;
  color: #FFF;
  bottom: 100%;
  height: 83px;
  left: 0;
  margin-bottom: 20px;
  margin-left: -60px;
  opacity: 0;
  padding: 5px;
  position: absolute;
  width: 120px;
  border-radius: 3px;
  -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s;
  -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s;
  -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s;
  transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
}

.lg-outer .lg-pager-thumb-cont img {
  width: 100%;
  height: 100%;
}

.lg-outer .lg-pager {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset;
  display: block;
  height: 12px;
  -webkit-transition: box-shadow 0.3s ease 0s;
  -o-transition: box-shadow 0.3s ease 0s;
  transition: box-shadow 0.3s ease 0s;
  width: 12px;
}

.lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus {
  box-shadow: 0 0 0 8px white inset;
}

.lg-outer .lg-caret {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px dashed;
  bottom: -10px;
  display: inline-block;
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  vertical-align: middle;
  width: 0;
}

.lg-fullscreen:after {
  content: "\e20c";
}

.lg-fullscreen-on .lg-fullscreen:after {
  content: "\e20d";
}

.group {
  *zoom: 1;
}

.group:before, .group:after {
  display: table;
  content: "";
  line-height: 0;
}

.group:after {
  clear: both;
}

.lg-outer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease 0s;
  -o-transition: opacity 0.15s ease 0s;
  transition: opacity 0.15s ease 0s;
}

.lg-outer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.lg-outer.lg-visible {
  opacity: 1;
}

.lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current {
  -webkit-transition-duration: inherit !important;
  transition-duration: inherit !important;
  -webkit-transition-timing-function: inherit !important;
  transition-timing-function: inherit !important;
}

.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
  -webkit-transition-duration: 0s !important;
  transition-duration: 0s !important;
  opacity: 1;
}

.lg-outer.lg-grab img.lg-object {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}

.lg-outer.lg-grabbing img.lg-object {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

.lg-outer .lg {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
}

.lg-outer .lg-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.lg-outer .lg-item {
  background: url("../images/lightgallery/loading.gif") no-repeat scroll center center transparent;
  display: none !important;
}

.lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide {
  display: inline-block !important;
}

.lg-outer.lg-css .lg-current {
  display: inline-block !important;
}

.lg-outer .lg-item, .lg-outer .lg-img-wrap {
  display: inline-block;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}

.lg-outer .lg-img-wrap {
  position: absolute;
  padding: 0 5px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.lg-outer .lg-item.lg-complete {
  background-image: none;
}

.lg-outer .lg-item.lg-current {
  z-index: 1060;
}

.lg-outer .lg-image {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
}

.lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play {
  opacity: 0;
  -webkit-transition: opacity 0.15s ease 0s;
  -o-transition: opacity 0.15s ease 0s;
  transition: opacity 0.15s ease 0s;
}

.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play {
  opacity: 1;
}

.lg-outer .lg-empty-html {
  display: none;
}

.lg-outer.lg-hide-download #lg-download {
  display: none;
}

.lg-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background-color: #000;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease 0s;
  -o-transition: opacity 0.15s ease 0s;
  transition: opacity 0.15s ease 0s;
}

.lg-backdrop.in {
  opacity: 1;
}

.lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current {
  -webkit-transition: none 0s ease 0s !important;
  -moz-transition: none 0s ease 0s !important;
  -o-transition: none 0s ease 0s !important;
  transition: none 0s ease 0s !important;
}

.lg-css3.lg-use-css3 .lg-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lg-css3.lg-use-left .lg-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lg-css3.lg-fade .lg-item {
  opacity: 0;
}

.lg-css3.lg-fade .lg-item.lg-current {
  opacity: 1;
}

.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
  -webkit-transition: opacity 0.1s ease 0s;
  -moz-transition: opacity 0.1s ease 0s;
  -o-transition: opacity 0.1s ease 0s;
  transition: opacity 0.1s ease 0s;
}

.lg-css3.lg-slide.lg-use-css3 .lg-item {
  opacity: 0;
}

.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
}

.lg-css3.lg-slide.lg-use-left .lg-item {
  opacity: 0;
  position: absolute;
  left: 0;
}

.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide {
  left: -100%;
}

.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide {
  left: 100%;
}

.lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
  left: 0;
  opacity: 1;
}

.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
  -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
}
.hide {
    display: none;
}




body{font-family: Roboto; color:#333; padding-top:137px; font-size: 13px;}



.ss_ul li {
    padding: 3px 6px;
    cursor: pointer;
    border: none;
}

.ss_button {
    padding: 4px;
}

.ss_dib {
    margin-right: 30px;
}

.ss_ulsearch {
    margin-top: -25px;
}


ul
{
    padding-inline-start: 2px;
}

.val{
text-align:right;
width:80%;
}

.com{
width: 100%;
}

#btneditar{
width:20px;
}

#btnborrar{
width:20px;
}



table.dataTable tbody th, table.dataTable tbody td {
    padding: 4px 10px;
}


		#message-warning, #message-success {
		  display: none;
		  padding: 3rem; padding-left:10px; padding-top:20px;
		  width: 100%; float:left
		}
		
		#message-warning {
		  color: #09408d;
		}
		
		#message-success {
		  color: #09408d;
		}
		
		#message-warning i,
		#message-success i {
		  margin-right: 10px;
		}
		
		/* form loader */
		#submit-loader {
		  display: none;
		  position: relative;
		  left: 0;
		  top: 0rem;
		  width: 100%;
		  text-align: center;
		  margin-bottom: 0rem; float:left
		}
		#submit-loader .text-loader {
		  display: none;
		  font-family: "Roboto", sans-serif;
		  font-size: 0.7rem;
		  color: #09408d;
		  letter-spacing: .2rem;
		  text-transform: uppercase; margin-top:5px
		}
		
	    #submit-loader .s-loader {
		  display: none;
		}
		#submit-loader .text-loader {
		  display: block;
		}
		
		/* --------------------------------------------------------------- 
		 * loader animation - (_layout.scss)
		 * --------------------------------------------------------------- */
		.s-loader {
		  margin: 1.2rem auto 3rem;
		  width: 70px;
		  text-align: center;
		  -webkit-transform: translateX(0.45rem);
		  -ms-transform: translateX(0.45rem);
		  transform: translateX(0.45rem); color:#000
		}
		
		.s-loader > div {
		  width: 9px;
		  height: 9px;
		  border-radius: 100%;
		  display: inline-block;
		  margin-right: .9rem;
		  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
		  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
		}
		
		.s-loader .bounce1 {
		  -webkit-animation-delay: -0.32s;
		  animation-delay: -0.32s;
		}
		
		.s-loader .bounce2 {
		  -webkit-animation-delay: -0.16s;
		  animation-delay: -0.16s;
		}
		
		@-webkit-keyframes sk-bouncedelay {
		  0%, 80%, 100% {
			-webkit-transform: scale(0);
			-ms-transform: scale(0);
			transform: scale(0);
		  }
		  40% {
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
		  }
		}
		@keyframes sk-bouncedelay {
		  0%, 80%, 100% {
			-webkit-transform: scale(0);
			-ms-transform: scale(0);
			transform: scale(0);
		  }
		  40% {
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
		  }
		}