@charset "utf-8";
 

/*********    gadget-css     ***/

body {
	margin: 0;
	padding: 0;
	line-height: 1.7em;
	font-family: Arial, Helvetica, sans-serif;
	font-family: Montserrat;
	font-size: 12px;
	color: #555555;
	background: #e7e7e7;
}
		
a:link, a:visited { color: #000000; font-size:12px; text-decoration: none; font-weight: normal; } 
a:active, a:hover { color: #990000; font-size:12px; text-decoration: underline; }

p { margin: 0px; padding: 0px; }

img { margin: 0px; padding: 0px; border: none; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }

.fl { float: left; }
.fr { float: right; }

.margin_r_10 { margin-right: 10px; }

.margin_r_20 { margin-right: 20px; }

.button a {
	display: block;
	width: 80px;
	height: 22px;
	padding: 3px 0 0 0;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

.button_01 a {
	background: url(imagenes/css/button_01.jpg) no-repeat;
}

.button_01 a:hover {
	background: url(imagenes/css/button_01_hover.jpg) no-repeat;
}

.button_02 a {
	background: url(imagenes/css/button_02.jpg) no-repeat;
}

.button_02 a:hover {
	background: url(imagenes/css/button_02_hover.jpg) no-repeat;
}

h1 {
	margin: 0px;
	padding: 2px 0;
	font-size: 30px;
	font-weight: bold;
}

h2 {
	margin: 0px;
	padding: 0px;
	font-size: 20px;
	font-weight: bold;
}

.image_wrapper {
	margin-top: 3px;
	margin-bottom: 5px;
}

.fl_image {
	float: left;
	margin-right: 30px 
}

.fr_image {
	float: right;
	margin-left: 20px 
}

/* site title */

#site_title_bar_wrapper {
	float: left;
	width: 100%;
	height: 101px;
	margin: 0 auto;	
	background:  url(imagenes/css/site_title_bar.jpg) repeat-x;
}

#site_title_bar {
	float: left;
	width: 980px;
	height: 101px;
	margin: 0 auto;
}

#site_title_bar  #site_title {
	float: left;
	width: 325px;
	height: 71px;
	padding: 30px 0 0 25px;
	text-align: center;
	background: url(imagenes/css/site_title_bg.jpg) top left no-repeat;
}

#site_title h1 a {
	float: left;
	margin: 0px;
	padding: 0px;
	font-size: 24px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

#site_title h1 a:hover {
	font-weight: bold;	
	text-decoration: none;
}

#site_title h1 a span {
	float: left;
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #ffffff;
	font-weight: normal;
}

#site_title h1 a:hover span {
	font-weight: normal;
}



#site_title_bar #search_box {
	float: right;
	width: 240px;
	height: 27px;
	margin: 8px 0 0 0;
	padding: 0;
	background: url(imagenes/css/search_box.png) no-repeat;
}

#search_box form {
	float: left;
	width: 240px;
	height: 27px;
	margin: 0;
	padding: 0;
}

#searchfield {
	height: 20px;
	width: 180px;
	padding: 5px;
	margin: 0px;
	color: #000000;
	font-size: 12px;
	font-variant: normal;
	line-height: normal;
	background: none;
	background: url(imagenes/css/search_box.png) no-repeat;
	border: none;	
}

#searchbutton {
 	height: 30px;
	width: 27px;
	margin: 0px;
	padding: 6px 0;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	color: #ffffff;
	background: none; 
	border: none;
}

/* menu */

#menu {
	float: left;
	height: 30px;
	padding: 5;
	margin-top: 30px;
	margin-top: 5px;
}

#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#menu ul li {
	padding: 0px;
	margin: 0px;
	display: inline;
}

#menu ul li a {
	position: relative;
	float: left;
	display: block;
	height: 23px;
	padding: 0 12px 0 40px;
	padding-top: 5px;
	text-align: center;
	font-size: 12px;
	text-decoration: none;
	color: #d4d4d4;	
	font-weight: bold;
	outline: none;
	font-family: Arial, Helvetica, sans-serif;
	background: url(imagenes/css/menu_left_.png) top left no-repeat;
}

#menu ul li .first {
	background: url(imagenes/css/menu_left_first.png) top left no-repeat;
}

#menu ul li .last span {
	position: absolute;
	top: 0;
	right: -30px;
	width: 30px;
	height: 28px;
	background:  url(imagenes/css/menu_right_last.png) top right no-repeat;
}

#menu li a:hover, #menu li .current {
	color: #81e0ff;
}

/* end of menu*/


#letras
	{
		height:30px;
		padding:0px;
		align:center;
	}


#letras a.letras
	{
		width:25px;
		height:24px;
		margin:1px;
		float: left;
		padding:2px 0 0 0;
		font-family:Arial;
		font-size:10px;
		color:#FFF;
		text-align:center;
		background-image:url(imagenes/css/letras.jpg);
		background-repeat:no-repeat;
		text-decoration:none;
	}

#letras a.letras:hover
	{
		width:25px;
		height:24px;
		margin:1px;
		padding:2px 0 0 0;
		float: left;
		font-family:Arial;
		font-size:10px;
		font-weight:bold;
		color:#853008;
		text-align:center;
		background-image:url(imagenes/css/letras.jpg);
		background-repeat:no-repeat;
	}




/* content */

#content {
	clear: both;
	width: 1140px;
	margin: 0 auto;
	padding: 40px 20px;
	padding: 40px 5px;
	padding: 0px 0px;

	vertical-align: top;

   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;

}

#content p {
	margin-bottom: 10px;
}

#content h2 {
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	margin-bottom: 10px;
}

#content h3 {
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	padding: 0px;
	margin: 0 0 0 0;
}

.section_w940 {
	width: 940px;
	background: url(imagenes/css/section_w440_bg.jpg) repeat-y;
}


.section_w440 {
	float: left;
	width: 440px;
	background: url(imagenes/css/section_w440_bg.jpg) repeat-y;
}

.section_sistemas {
	float: left;
	width: 100px;
	background: white;
	background: url(imagenes/css/section_sistemas_bg.jpg) repeat-y;
}
.section_sistemas  .sub_content {
	padding: 0 5px;
}


#content .section_w210 {
	float: left;
	width: 210px;
	background: url(imagenes/css/section_w210_bg.jpg) repeat-y;
}

.section_w440 .sub_content {
	padding: 0 20px;
}

.section_w300 {
	float: left;
	width: 300px;
	background: url(imagenes/css/section_w440_bg.jpg) repeat-y;
}

.section_w300 .sub_content {
	padding: 0 20px;
}

.section_w210 .sub_content {
	padding: 0 15px;
}

.section_w210 img {
	margin-bottom: 10px;
}

.rounded_top_sistemas {
	position: relative;
	width: 100%;
	height: 10px;
	background: url(imagenes/css/rounded-topright-sistemas.jpg) top right no-repeat;
}

.rounded_top_sistemas span {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 10px;
	height: 10px;
	background: url(imagenes/css/rounded-topleft-sistemas.jpg) top left no-repeat;
}

.rounded_bottom_sistemas {
	position: relative;
	width: 100%;
	height: 10px;
	background: url(imagenes/css/rounded-bottomright-sistemas.jpg) bottom right no-repeat;
}

.rounded_bottom_sistemas span {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 10px;
	height: 10px;
	background: url(imagenes/css/rounded-bottomleft-sistemas.jpg) bottom left no-repeat;
}

.rounded_top {
	position: relative;
	width: 100%;
	height: 10px;
	background: url(imagenes/css/rounded-topright.jpg) top right no-repeat;
}

.rounded_top span {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 10px;
	height: 10px;
	background: url(imagenes/css/rounded-topleft.jpg) top left no-repeat;
}

.rounded_bottom {
	position: relative;
	width: 100%;
	height: 10px;
	background: url(imagenes/css/rounded-bottomright.jpg) bottom right no-repeat;
}

.rounded_bottom span {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 10px;
	height: 10px;
	background: url(imagenes/css/rounded-bottomleft.jpg) bottom left no-repeat;
}

.service_list {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.service_list li {
	padding: 4px 0 4px 18px;
	margin: 0px;
	background: url(imagenes/css/list_icon.jpg) left center no-repeat;
}

/* end of content */




/* footer */

#footer_wrapper {
	clear: both;
	width: 100%;
	margin: 0 auto;
	background: #b3b3b3 url(imagenes/css/footer_bg.jpg) top repeat-x;
}

#footer {
	width: 940px;
	margin: 0 auto;
	padding: 40px 20px;
}

#footer .section_w210 {
	float: left;
	width: 210px;
}

#footer .section_w210 .subcontent {
	padding: 15px;
}

#footer .section_w210 h3 {
	width: 175px;
	height: 30px;
	padding: 5px 0 0 35px;
	font-size:14px;
	font-weight: bold;
	color: #333;
}

.h3_01 {
	background: url(imagenes/css/header_bg_01.jpg) no-repeat;
}

.h3_02 {
	background: url(imagenes/css/header_bg_02.jpg) no-repeat;
}

.h3_03 {
	background: url(imagenes/css/header_bg_03.jpg) no-repeat;
}

.h3_04{
	background: url(imagenes/css/header_bg_04.jpg) no-repeat;
}

#footer .footer_list {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#footer .footer_list li {
	margin: 0px;
	padding: 3px 0;
}


/***************************   responsible  **************************/

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

#footer_wrapper {
	clear: both;
	margin: 0 auto;
	background: #b3b3b3 url(imagenes/css/footer_bg.jpg) top repeat-x;
}

#site_title_bar {
	float: left;
	width: 210px;
	height: 101px;
	margin: 0 auto;
}

#footer {
	width: 210px;
	margin: 0 auto;
	padding: 40px 60px;
}

#footer .section_w210 {
	clear: both;
	width: 210px;
}

.cleaner_h40 { 
	height: 40px; 
   }

#menu {
	float: none;
	height: 30px;
	padding: 5;
	margin-top: 30px;
	margin-top: 5px;
}




}

/* end of footer */



#product_gallery {
	width: 1140px;
	height: 178px;
	margin-bottom: 40px;
	/* cambios 16-1-2018*/
	margin-bottom: 10px;
	/* cambios 16-1-2018*/

	background: url(imagenes/css/product_gallery.jpg) center top;
}




#SlideItMoo_outer {
	overflow: hidden;
	width:1140px; 
	height: 163px;
	margin: 0 auto; 
	background: none; 
	display:block; 
	position:relative; 
	padding: 15px 0 0 0;
}

/* create custom forward-backward buttons for this container */
#SlideItMoo_outer .SlideItMoo_forward,
#SlideItMoo_outer .SlideItMoo_back{ 
	display:block; 
	position:absolute; 
	cursor:pointer; 
	width:25px; 
	height: 178px; 
	bottom:0px; 
	right: 0px; 
	background:url(../imagenes/css/slideitmoo_forward.png) no-repeat center;  
}

#SlideItMoo_outer .SlideItMoo_back { 
	left:0px; 
	background:url(../imagenes/css/slideitmoo_back.png) no-repeat center;  
}

/* the width is set to show the number of thumbnails that will be visible */
#SlideItMoo_inner{ 
	position:relative ; 
	overflow:hidden ; 
	width: 850px ; /* set a display width to make the slider look good in case js is disabled */
	margin:0px auto 0px;
	padding:10px 0px 10px;
}
/* the thumbnails container; set a width on it so everything will be fine */
#SlideItMoo_items { 
	display:block; 
	position:relative; 
}

/* single element design */
#SlideItMoo_items div.SlideItMoo_element { 
	display:block; 
	position:relative; 
	float:left; 
	margin:0px 15px 0px; 
	font-size:11px; 
	width:128px; 
	height: 90px; 
	text-align:center; 
	font-family: Verdana, Geneva, sans-serif;
	color:#000000;
}
#SlideItMoo_items a { padding:0px; margin:3px 0px 3px; clear:both; display:block; background:none; padding:2px; }
#SlideItMoo_items a img{ border:none; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////  table responsive */

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}
table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}
table th,
table td {
  padding: .625em;
  text-align: center;
}
table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media screen and (max-width: 850px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  table td:before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
}


/* /////////////////////////////////////////////////////////////////////////////////////////////////////  flip raton encima */

		/* simple */
		.flip-container {
			-webkit-perspective: 1000;
			-moz-perspective: 1000;
			-ms-perspective: 1000;
			perspective: 1000;

			-ms-transform: perspective(1000px);
			-moz-transform: perspective(1000px);
    			-moz-transform-style: preserve-3d; 
    			-ms-transform-style: preserve-3d; 

			border: 0px solid #ccc;
display:inline-block;

		}

			/*
			.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
				-webkit-transform: rotateY(180deg);
				-moz-transform: rotateY(180deg);
				-ms-transform: rotateY(180deg);
				transform: rotateY(180deg);
				filter: FlipH;
    			-ms-filter: "FlipH";
			}
			*/


			/* START: Accommodating for IE */
			.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
		
		/* END: Accommodating for IE */

		.flip-container, .front, .back {
			width: 80px;
			height: 60px;
		}

		.flipper {
			-webkit-transition: 0.6s;
			-webkit-transform-style: preserve-3d;
			-ms-transition: 0.6s;

			-moz-transition: 0.6s;
			-moz-transform: perspective(1000px);
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;

			transition: 0.6s;
			transform-style: preserve-3d;

			position: relative;
		}

		.front, .back {
			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			-ms-backface-visibility: hidden;
			backface-visibility: hidden;

		    -webkit-transition: 0.6s;
		    -webkit-transform-style: preserve-3d;

		    -moz-transition: 0.6s;
		    -moz-transform-style: preserve-3d;

		    -o-transition: 0.6s;
		    -o-transform-style: preserve-3d;

		    -ms-transition: 0.6s;
		    -ms-transform-style: preserve-3d;

		    transition: 0.6s;
		    transform-style: preserve-3d;

			position: absolute;
			top: 0;
			left: 0;
		}

		.front {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			/*background: #f4e7bd;
			background: lightgreen;*/
			z-index: 2;
		}

		.back {
			/*background: #f4e7bd;
			background: lightblue;*/
			-webkit-transform: rotateY(-180deg);
		    -moz-transform: rotateY(-180deg);
		    -o-transform: rotateY(-180deg);
		    -ms-transform: rotateY(-180deg);
		    transform: rotateY(-180deg);
		}

		.front .name {
			font-size: 2em;
			display: inline-block;
			background: rgba(33, 33, 33, 0.9);
			color: #f8f8f8;
			font-family: Courier;
			padding: 5px 10px;
			border-radius: 5px;
			bottom: 60px;
			left: 25%;
			position: absolute;
			text-shadow: 0.1em 0.1em 0.05em #333;
			display: none;

			-webkit-transform: rotate(-20deg);
			-moz-transform: rotate(-20deg);
			-ms-transform: rotate(-20deg);
			transform: rotate(-20deg);
		}

		.back-logo {
			position: absolute;
			top: 20px;
			left: 90px;
			width: 160px;
			height: 117px;
			background: url(logo.png) 0 0 no-repeat;
		}

		.back-title {
			font-weight: bold;
			color: #00304a;
			position: absolute;
			top: 180px;
			left: 0;
			right: 0;
			text-align: center;
			text-shadow: 0.1em 0.1em 0.05em #acd7e5;
			font-family: Courier;
			font-size: 2em;
		}

		.back p {
			position: absolute;
			bottom: 40px;
			left: 0;
			right: 0;
			text-align: center;
			padding: 0 20px;
		}

		.backj p {
			position: absolute;
			bottom: 40px;
			left: 0;
			right: 0;
			text-align: center;
			padding: 0 20px;
		}

		/* vertical */
		.vertical.flip-container {
			position: relative;
		}

			.vertical .back {
				-webkit-transform: rotateX(180deg);
				-moz-transform: rotateX(180deg);
				-ms-transform: rotateX(180deg);
				transform: rotateX(180deg);
			}

			.vertical.flip-container .flipper {
				-webkit-transform-origin: 100% 213.5px;
				-moz-transform-origin: 100% 213.5px;
				-ms-transform-origin: 100% 213.5px;
				transform-origin: 100% 213.5px;
			}

			/*
			.vertical.flip-container:hover .flipper {
				-webkit-transform: rotateX(-180deg);
				-moz-transform: rotateX(-180deg);
				-ms-transform: rotateX(-180deg);
				transform: rotateX(-180deg);
			}
			*/

			/* START: Accommodating for IE */
			.vertical.flip-container:hover .back, .vertical.flip-container.hover .back {
			    -webkit-transform: rotateX(0deg);
			    -moz-transform: rotateX(0deg);
			    -o-transform: rotateX(0deg);
			    -ms-transform: rotateX(0deg);
			    transform: rotateX(0deg);
			}

			.vertical.flip-container:hover .front, .vertical.flip-container.hover .front {
			    -webkit-transform: rotateX(180deg);
			    -moz-transform: rotateX(180deg);
			    -o-transform: rotateX(180deg);
			    transform: rotateX(180deg);
			}
		/* END: Accommodating for IE */

/* ////////////////////////////////////////////////////////////////////////////////////////////////   tags */

#tagcloud1{ 
	background:#000000; 
	background:#b22d00;
	background:#95844d;
	background:#853008;
	background:#7e8901;
	font-family:arial,Verdana,sans-serif; 
//	width:1024px; 
	text-align:center; 
	float: left;
}

#tagcloud1 .tag1{ font-size:0.8em; color:#505050; color:#666666; }
#tagcloud1 .tag1{ font-size:1.5em; color:#505050; color:#666666; }
#tagcloud1 .tag2{ font-size:1.9em; color:#808080; color:#888888; }
#tagcloud1 .tag3{ font-size:2.3em; color:#E0E0E0; color:#FfFfFf; }

#tagcloud1 a{ text-decoration:none; }
#tagcloud1 a:hover{ text-decoration:none; background-color:#ffffff; color:#000000; color:#853008; }

.peque {font-family: comic sans ms; font-size: 8pt  }
.fecha {font-family: comic sans ms; font-size: 11pt  }
.titulo { 
	font-family: comic sans ms; 
	font-size: 11pt;  
	font-weight: bolder; 
	color:bluekk
}
.titulog { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 14pt; color:black; text-shadow: 1px 2px 4px #FFFFFF }


#cajafotillo {
    width: 80px;
    height: 60px;
    display: table;
    background-color: white;
    background-color: #d4eaf1;
}

#cajafotillo .image-container {
   text-align: center;
   vertical-align: middle;
   display: table-cell;
}

#cajafotillo .image-container img {
    max-width: 80px;
    max-height: 60px;        
}

.section_modelo {
	float: left;
	width: 240px;
	background: url(imagenes/css/section_w440_bg.jpg) repeat-y;
}

.section_modelo_accesorio {
	float: left;
	width: 240px;
	background: url(imagenes/css/section_w440_bg_accesorio.jpg) repeat-y;
}


.section_modelo_accesorio .sub_content {
	padding: 0 20px;
}

.section_modelo .sub_content {
	padding: 0 20px;
}

#cajatitulomodelo {
	clear: both;
	width: 100%;
	float: left;
	font-size: 30px;
	font-weight: bold;
}



#cajamodelo {
    width: 200px;
    height: 320px;
    display: table;
    background-color: white;
}

#cajamodelo .image-container {
   vertical-align: top;
   display: table-cell;
}

#cajamodelo .image-container img {
    max-width: 200px;
    max-height: 200px;
}

/*********  expandir texto de los modelos ***/

 summary::-webkit-details-marker {
 color: #00ACF3;
 font-size: 100%;
 margin-right: 2px;
}
summary:focus {
	outline-style: none;
}
article > details > summary {
	font-size: 18px;
	margin-top: 6px;
}
details > p {
	margin-left: 10px;
}
details details {
	margin-left: 36px;
}
details details summary {
	font-size: 16px;
}

/*********   http://css3buttongenerator.com/     ***/

.btn {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  padding: 5px;
  background: #3cb0fd;
  border: solid #3dabd0 2px;
  text-decoration: none;
}

.btn:hover {
  background: #3498db;
  text-decoration: none;
}

/*  contenedor maquina **/

#box{
    border:10px solid #000;
    border-radius: 20px;
    width: 590px;
    background-color:#fff;
}
h5 {
    font-size: 20px;
    background: #fff;
    position: relative;
    top: -30px;
    right: -10px;
    display: inline-block;
}