/*--------------------------------------------------------------------------
 Clic
----------------------------------------------------------------------------
 File: general.css
 Author:   Gerardo Gonzalez Flores
 		   --> gerardo AT clic DOT com DOT mx <--
   		   http://www.clic.com.mx-
---------------------------------------------------------------------------
 CSS general styles for the web site, apply to specific HTML tags
 CSS generales para el sitio, aplicados a etiquetas HTML especifcas .
--------------------------------------------------------------------------*/
 * {

	margin:0px;
	padding:0px;
 }

 body, table, td, tr, ul, li, span, div, input, select, textarea {
    font-size: 10pt;
    font-family:   "Arial", "Book antigua", "Courier", "Courier new", "Times", "Helvetica";
    /*background:url(img/backgroundPage.jpg) center no-repeat top;*/
}

 p { margin-bottom:1em; }
 p.firstline { margin:0em 0em 3em 1em;  }

 table, td{
		border:none 0px;
		padding:0px;
		border-spacing: 0px;
		border-collapse:collapse; /*Elimina el padding en el IE*/
		vertical-align:top;
		font-size: 18px;
	}

 img { border:0px;  }
 img.left { float:left; margin:2px; margin-right: 5px;}
 img.right { float:right; margin:2px; margin-left: 5px;}
 .bold{ font-weight:bold; }

 ul li{  list-style-type:none; }
 blockquote{ margin-left:20px; }
 .centrado{	margin-left:auto;margin-right:auto;	}
 .centro   { text-align:center;	}

 ul{
		margin:10px 0px 10px 0px;
		padding:0px;
		margin-left:20px;
 }

 ul li{
		padding:0px;
		list-style:none;
		list-style-image: none;
    background: url(../img/bullet-level-1.png) 1px .05em no-repeat;
  padding-left: 23px;
		/*font-weight:bold;*/
	}
 a{
 		text-decoration:none;
		color:#000000;
 }
	.clearBoth {clear:both;}
a:hover{ color:#525261; }
a:hover img {	border:0px; }
.cakeSqlLog { clear:both; border:1px solid}


.noDisplay{
		display:none;
	}

	.center, .centrado{
		margin-left:auto;
		margin-right:auto;
	}

	.centro {	text-align:center	}

	.bold{
		font-weight:bold;
	}

	/*-- Begin Clearfix Hack Classes --*/
	.clearfix:after {
    	content:".";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
	}

	.clearfix {
		display:inline-block;
	}

	.clearfix {
		display:block;
	}

	* html .clearfix {
		height:1px;
	}
	/*-- End Clearfix Hack Classes --*/

	/*-- images styles --*/
	img.centered {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	img.alignright, img.right {

		margin: 0 0 2px 7px;
		display: inline;
		float:right;
	}

	img.alignleft, img.left {

		margin: 0 7px 2px 0;
		display: inline;
		float:left;
	}

	.alignright {
		float: right;
	}

	.alignleft {
		float: left
	}



  .map-box {

  	margin:0px auto;

  }
  #map-box .mapmarker {
  	position: relative;
  	top: 30px;
  	content: "";
  	left: 0px;
  	width: 75px;
  	height: 75px;
  	background: #ef4728;
  	border-radius: 50%;
  	z-index: 999;
  	-webkit-border-radius: 50%;
  	-webkit-transform: scale(.5);
  	-moz-transform: scale(.5);
  	-ms-transform: scale(.5);
  	-o-transform: scale(.5);
  	transform: scale(.5);
  	-webkit-animation: blink 1.2s infinite;
  	-o-animation: blink 1.2s infinite;
  	animation: blink 1.2s infinite;
  	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
  	animation-fill-mode: forwards;
  	display: block;
  }


  .pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #262262;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    animation-name: bounce;
    animation-fill-mode: both;
    animation-duration: 1s;
  }
  .pin:after {
    content: '';
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: #ffffff;
    position: absolute;
    border-radius: 50%;
  }
  .pulse {
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 11px 0px 0px -12px;
    transform: rotateX(55deg);
    z-index: -2;
  }
  .pulse:after {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -13px;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    box-shadow: 0 0 1px 2px #89849b;
    animation-delay: 1.1s;
  }
  @-moz-keyframes pulsate {
    0% {
      transform: scale(0.1, 0.1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2, 1.2);
      opacity: 0;
    }
  }
  @-webkit-keyframes pulsate {
    0% {
      transform: scale(0.1, 0.1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2, 1.2);
      opacity: 0;
    }
  }
  @-o-keyframes pulsate {
    0% {
      transform: scale(0.1, 0.1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2, 1.2);
      opacity: 0;
    }
  }
  @keyframes pulsate {
    0% {
      transform: scale(0.1, 0.1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2, 1.2);
      opacity: 0;
    }
  }
  @-moz-keyframes bounce {
    0% {
      opacity: 0;
      transform: translateY(-2000px) rotate(-45deg);
    }
    60% {
      opacity: 1;
      transform: translateY(30px) rotate(-45deg);
    }
    80% {
      transform: translateY(-10px) rotate(-45deg);
    }
    100% {
      transform: translateY(0) rotate(-45deg);
    }
  }
  @-webkit-keyframes bounce {
    0% {
      opacity: 0;
      transform: translateY(-2000px) rotate(-45deg);
    }
    60% {
      opacity: 1;
      transform: translateY(30px) rotate(-45deg);
    }
    80% {
      transform: translateY(-10px) rotate(-45deg);
    }
    100% {
      transform: translateY(0) rotate(-45deg);
    }
  }
  @-o-keyframes bounce {
    0% {
      opacity: 0;
      transform: translateY(-2000px) rotate(-45deg);
    }
    60% {
      opacity: 1;
      transform: translateY(30px) rotate(-45deg);
    }
    80% {
      transform: translateY(-10px) rotate(-45deg);
    }
    100% {
      transform: translateY(0) rotate(-45deg);
    }
  }
  @keyframes bounce {
    0% {
      opacity: 0;
      transform: translateY(-2000px) rotate(-45deg);
    }
    60% {
      opacity: 1;
      transform: translateY(30px) rotate(-45deg);
    }
    80% {
      transform: translateY(-10px) rotate(-45deg);
    }
    100% {
      transform: translateY(0) rotate(-45deg);
    }
  }

  /* Chrome, Safari, Opera */
  @-webkit-keyframes blink {
  0% {
  opacity:1;
  -webkit-transform: scale(.1);
  -moz-transform: scale(.1);
  -ms-transform: scale(.1);
  -o-transform: scale(.1);
  transform: scale(.1);
  }
   50% {
  opacity:.7;
  -webkit-transform: scale(.4);
  -moz-transform: scale(.4);
  -ms-transform: scale(.4);
  -o-transform: scale(.4);
  transform: scale(.4);
  }
   100% {
  opacity:0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  }
  }
   @keyframes blink {
  0% {
  opacity:1;
  -webkit-transform: scale(.1);
  -moz-transform: scale(.1);
  -ms-transform: scale(.1);
  -o-transform: scale(.1);
  transform: scale(.1);
  }
   50% {
  opacity:.7;
  -webkit-transform: scale(.4);
  -moz-transform: scale(.4);
  -ms-transform: scale(.4);
  -o-transform: scale(.4);
  transform: scale(.4);
  }
   100% {
  opacity:0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  }
  }
  .map-wrapper {
  	width: 749px;
  	height: 722px;
  }
  #map_wrapper {
  	height: 400px;
  	width: 722px;
  }
  #map_canvas {
  	width: 100%;
  	height: 100%;
  }
  .mapping {
  	height: 721px;
  	background-position: 100% 100%;
  	background-color: #b2b2b2;
  	margin-bottom: 22px;
  }

  .centerText {
    margin:20px auto;
  }


.centerText button {
  display:block;
  margin: 0px auto;
}

#preloader {
  text-align: center;
  display: block;
  margin:0px auto;
}