body {
  background: #1a1a1a;
  background-image: url(images/bg.jpg) top left; background-size:auto;
  
}

.wrap-btns {
  width: 80%;
  margin: 20px auto 50px auto;
}

h3 {
  font-family:Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0px;
  margin-bottom: 20px;
}

.btn {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 10px;  /* radio del borde de los botones*/
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  padding-top: 0;
  padding-bottom: 0;
  width: 510px; /* ancho de los botones*/
  height: 50px;
  margin: 5px 5px;    /* espacio entre botones vertical y horizontal*/
  font: 600 26px/62px Arial, Helvetica, sans-serif;    /* 17  tamaño de letra del boton en estado normal*/
  letter-spacing: 0;    /* espaciado de letra del boton en estado normal*/
  text-transform: uppercase;
  border: 3px solid #22395e; /* color del borde del boton en  estado normal*/
  background-color: rgba(35, 60, 109, 0.7);  /* color del fondo del boton en  estado normal*/
  color: #fafafa;
  line-height:48px;  /* espaciado vertical de los texto de del boton */
 }
 
 
 .btn2 {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 10px;  /* radio del borde de los botones*/
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  padding-top: 0;
  padding-bottom: 0;
  width: 710px; /* ancho de los botones*/
  height: 50px;
  margin: 10px 10px;    /* espacio entre botones vertical y horizontal*/
  font: 600 20px/30px Arial, Helvetica, sans-serif;    /* 17  tamaño de letra del boton en estado normal*/
  letter-spacing: 0;    /* espaciado de letra del boton en estado normal*/
  text-transform: uppercase;
  border: 2px solid #164E85; /* color del borde del boton en  estado normal*/
  background-color: rgba(184, 184, 184, 0.9);  /* color del fondo del boton en  estado normal*/
  color: #036;
  line-height:48px;  /* espaciado vertical de los texto de del boton */
  text-decoration:none;
 
 }
 
   
  /* .style1 */
  /* .style2 */
  /* .style3 */




.btn.style1 {
  position: relative;
  z-index: 1;
}
.btn.style1:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  height: 0;
  width: 0;
  border-radius: 50%;
  background: #1a1a1a;
  z-index: -1;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -moz-transition: width 0.3s, height 0.2s ease-in-out, border-radius 0.1s linear 0.05s;
  -o-transition: width 0.3s, height 0.2s ease-in-out, border-radius 0.1s linear 0.05s;
  -webkit-transition: width 0.3s, height 0.2s ease-in-out, border-radius 0.1s linear;
  -webkit-transition-delay: 0s, 0s, 0.05s;
  transition: width 0.3s, height 0.2s ease-in-out, border-radius 0.1s linear 0.05s;
}


.btn.style1:hover:before {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.btn.style2 {
  -moz-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
  -o-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
  -webkit-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
  transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
}

.btn2.style2c {
  -moz-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
  -o-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
  -webkit-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
  transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
}




.btn.style2:hover, .btn.style2:active {     /* para botones normales el texto se ensancha mas*/
  border-radius: 74px;
  border-color:#D95A0F;  /* color de borde del boton en roll over*/
  background-color: rgba(255, 0, 0, 0.5);   /* color de fondo del boton en roll over*/
  letter-spacing: .08em;   /* espaciado de letra del boton en roll over*/
  
}



.btn.style2b:hover, .btn.style2b:active {   /* para botones con mucho texto ensancha menos*/
  border-radius: 74px;
  border-color:#D95A0F;  /* color de borde del boton en roll over*/
  background-color: rgba(255, 0, 0, 0.5);   /* color de fondo del boton en roll over*/
  letter-spacing: .005em;   /* espaciado de letra del boton en roll over*/
}

.btn2.style2c:hover, .btn2.style2c:active {   /* para botones con mucho texto ensancha menos*/
	border-radius: 84px;
	border-color: #E9A914;  /* color de borde del boton en roll over*/
	background-color: rgba(28, 65, 121, 0.9);   /* color de fondo del boton en roll over*/
	letter-spacing: .050em;   /* espaciado de letra del boton en roll over*/
	text-decoration: none;
	color:#fff;
	
}




.btn.style3 {
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  position: relative;
  background: transparent;
  z-index: 1;
}
.btn.style3:after {
  position: absolute;
  content: '';
  border-style: solid;
  border-color: #1a1a1a;
  border-width: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 2px;
  z-index: -1;
  background: #2E9FFF;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s, border-width 0.2s;
  -o-transition: -o-transform 0.2s, opacity 0.2s, border-width 0.2s;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, border-width 0.2s;
  transition: transform 0.2s, opacity 0.2s, border-width 0.2s;
}

.btn.style3:hover:after {
  /* @include transform(scale(0.96, 0.85)); */
  border-width: 4px;
}


.btn.style4 {
  -moz-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
  -o-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
  -webkit-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
  transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing 0.2 ease-in, color 0.2s;
  background-color: rgba(224, 169, 21, 0.9);
   border: 3px solid #7b580e;
}


.btn.style4:hover, .btn.style4:active {     /* para botones normales el texto se ensancha mas*/
  border-radius: 74px;
  border-color:#D95A0F;  /* color de borde del boton en roll over*/
  background-color: rgba(255, 0, 0, 0.5);   /* color de fondo del boton en roll over*/
  letter-spacing: .08em;   /* espaciado de letra del boton en roll over*/
}




.btn:hover, .btn:active {
  color: #FFFFFF;
}




/* CIRCLE BUTTON */
#circle-wrap {
	width: 142px;
	height: 130px;
	margin: 0 auto 50px;
	text-align: center;
	top: 0;
	position: relative;
	cursor: pointer;
	display: block;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate(-2px, 20px) translateZ(0) translate3d(0, 0, 0);
	-ms-transform: translate(-2px, 20px) translateZ(0) translate3d(0, 0, 0);
	-webkit-transform: translate(-2px, 20px) translateZ(0) translate3d(0, 0, 0);
	transform: translate(-2px, 20px) translateZ(0) translate3d(0, 0, 0);
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#circle-wrap a {
  text-decoration: none !important;
}

.border-inactive {
	height: 160px;
	width: 157px;
	position: absolute;
	opacity: .6;
	border: 4px solid #2BB8EE;
	background-color:#233c6d;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-moz-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0.08s;
	-o-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0.08s;
	-webkit-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition-delay: 0.08s;
	transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0.08s;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	left: -9px;
	top: -40px;
}
a:hover .border-inactive {
  opacity: .5;
  border: 4px solid #fff;
  -moz-transform: scale(1.3) translateZ(0) translate3d(0, 0, 0);
  -ms-transform: scale(1.3) translateZ(0) translate3d(0, 0, 0);
  -webkit-transform: scale(1.3) translateZ(0) translate3d(0, 0, 0);
  transform: scale(1.3) translateZ(0) translate3d(0, 0, 0);
  -moz-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.border-active {
	height: 176px;
	width: 176px;
	margin: -57px 0 0 -57px;
	position: absolute;
	opacity: 0;
	top: 9px;
	left: 38px;
	border: 2px solid #105498;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-moz-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
	-o-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
	transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-moz-transform: scale(0.8) translateZ(0) translate3d(0, 0, 0);
	-ms-transform: scale(0.8) translateZ(0) translate3d(0, 0, 0);
	-webkit-transform: scale(0.8) translateZ(0) translate3d(0, 0, 0);
	transform: scale(0.8) translateZ(0) translate3d(0, 0, 0);
}
a:hover .border-active {
	opacity: 1;
	-moz-transform: scale(1) translateZ(0) translate3d(0, 0, 0);
	-ms-transform: scale(1) translateZ(0) translate3d(0, 0, 0);
	-webkit-transform: scale(1) translateZ(0) translate3d(0, 0, 0);
	transform: scale(1) translateZ(0) translate3d(0, 0, 0);
	-moz-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0.03s;
	-o-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0.03s;
	-webkit-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition-delay: 0.03s;
	transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0.03s;
	background-color: rgba(255,255,255,0.7);
	box-shadow: 0px 0px 9px 0.1px #09F;
}

.letter {
  top: 3px;
  font-weight:600;
  font: 26px/20px Arial, Helvetica, sans-serif;
  color: #fff;
  opacity: 1;
  position: relative;
  -moz-transform: translate(1px, 5px) translateZ(0) translate3d(0, 0, 0);
  -ms-transform: translate(1px, 5px) translateZ(0) translate3d(0, 0, 0);
  -webkit-transform: translate(1px, 5px) translateZ(0) translate3d(0, 0, 0);
  transform: translate(1px, 5px) translateZ(0) translate3d(0, 0, 0);
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  letter-spacing:3px; 
  line-height:23px;
 
  
  
}
a:hover .letter {
	top:-9px;
	-moz-transform: translate(1px, 1px) translateZ(0) translate3d(0, 0, 0);
	-ms-transform: translate(1px, 1px) translateZ(0) translate3d(0, 0, 0);
	-webkit-transform: translate(1px, 1px) translateZ(0) translate3d(0, 0, 0);
	transform: translate(1px, 1px) translateZ(0) translate3d(0, 0, 0);
	-moz-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	-o-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	opacity: 1;
	font-size: 33px; 
	color:#09F;
	line-height:33px;
	letter-spacing:0px; 
	
	
}

.underline {
  height: 7px;
  width: 31px;
  -moz-transform: translate(1px, 30px) translateZ(0) translate3d(0, 0, 0);
  -ms-transform: translate(1px, 30px) translateZ(0) translate3d(0, 0, 0);
  -webkit-transform: translate(1px, 30px) translateZ(0) translate3d(0, 0, 0);
  transform: translate(1px, 30px) translateZ(0) translate3d(0, 0, 0);
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  margin: 0 auto;
  background: #fff;
  opacity: .4;
}
a:hover .underline {
  -moz-transform: translate(1px, 35px) translateZ(0) translate3d(0, 0, 0);
  -ms-transform: translate(1px, 35px) translateZ(0) translate3d(0, 0, 0);
  -webkit-transform: translate(1px, 35px) translateZ(0) translate3d(0, 0, 0);
  transform: translate(1px, 35px) translateZ(0) translate3d(0, 0, 0);
  -moz-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
}








#circle-wrap2 {
	width: 142px;
	height: 42px;
	margin: 0 auto 50px;
	text-align: center;
	top: 0;
	position: relative;
	cursor: pointer;
	display: block;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate(-2px, 20px) translateZ(0) translate3d(0, 0, 0);
	-ms-transform: translate(-2px, 20px) translateZ(0) translate3d(0, 0, 0);
	-webkit-transform: translate(-2px, 20px) translateZ(0) translate3d(0, 0, 0);
	transform: translate(-2px, 20px) translateZ(0) translate3d(0, 0, 0);
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#circle-wrap2 a {
  text-decoration: none !important;
}

.border-inactive2 {
	height: 80px;
	width: 78px;
	position: absolute;
	opacity: .6;
	border: 4px solid #2BB8EE;
	background-color: #233c6d;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-moz-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0.08s;
	-o-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0.08s;
	-webkit-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition-delay: 0.08s;
	transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0.08s;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	left: 33px;
	top: -42px;
}
a:hover .border-inactive2 {
  opacity: .7;
  border: 4px solid #036;
  -moz-transform: scale(1.3) translateZ(0) translate3d(0, 0, 0);
  -ms-transform: scale(1.3) translateZ(0) translate3d(0, 0, 0);
  -webkit-transform: scale(1.3) translateZ(0) translate3d(0, 0, 0);
  transform: scale(1.3) translateZ(0) translate3d(0, 0, 0);
  -moz-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  background-color: #fff;
}

.border-active2 {
	height: 104px;
	width: 176px;
	margin: -7px 0 0 -57px;
	position: absolute;
	opacity: 0;
	top: -25px;
	left: 40px;
	border: 2px solid #105498;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-moz-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
	-o-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
	transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-moz-transform: scale(0.8) translateZ(0) translate3d(0, 0, 0);
	-ms-transform: scale(0.8) translateZ(0) translate3d(0, 0, 0);
	-webkit-transform: scale(0.8) translateZ(0) translate3d(0, 0, 0);
	transform: scale(0.8) translateZ(0) translate3d(0, 0, 0);
}


.letter2 {
  top: -31px;
  font-weight:600;
  font: 22px/20px Arial, Helvetica, sans-serif;
  color: #fff;
  opacity: 1;
  position: relative;
  -moz-transform: translate(1px, 5px) translateZ(0) translate3d(0, 0, 0);
  -ms-transform: translate(1px, 5px) translateZ(0) translate3d(0, 0, 0);
  -webkit-transform: translate(1px, 5px) translateZ(0) translate3d(0, 0, 0);
  transform: translate(1px, 5px) translateZ(0) translate3d(0, 0, 0);
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  letter-spacing:0px; 
  line-height:22px;
  font-size: 19px;
  
  
}

a:hover .letter2 {
	top: -31px;
	-moz-transform: translate(1px, 1px) translateZ(0) translate3d(0, 0, 0);
	-ms-transform: translate(1px, 1px) translateZ(0) translate3d(0, 0, 0);
	-webkit-transform: translate(1px, 1px) translateZ(0) translate3d(0, 0, 0);
	transform: translate(1px, 1px) translateZ(0) translate3d(0, 0, 0);
	-moz-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	-o-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
	opacity: 1;
	font-size: 25px;
	color: #036;
	line-height: 30px;
	letter-spacing: 0px;	
	
}
.cetrado_tabla {
	text-align: center;
}


.underline {
  height: 7px;
  width: 31px;
  -moz-transform: translate(1px, 30px) translateZ(0) translate3d(0, 0, 0);
  -ms-transform: translate(1px, 30px) translateZ(0) translate3d(0, 0, 0);
  -webkit-transform: translate(1px, 30px) translateZ(0) translate3d(0, 0, 0);
  transform: translate(1px, 30px) translateZ(0) translate3d(0, 0, 0);
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  margin: 0 auto;
  background: #fff;
  opacity: .4;
}
a:hover .underline {
  -moz-transform: translate(1px, 35px) translateZ(0) translate3d(0, 0, 0);
  -ms-transform: translate(1px, 35px) translateZ(0) translate3d(0, 0, 0);
  -webkit-transform: translate(1px, 35px) translateZ(0) translate3d(0, 0, 0);
  transform: translate(1px, 35px) translateZ(0) translate3d(0, 0, 0);
  -moz-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
}
#circle-wrap2 .circle-btn2 .letter2 {
	text-align: center;
	margin-top: -10px;
}