@media screen and (min-height: 900px) {
#wrapper{
	margin:auto;
	min-height:700px;
	position:relative;
	background: url(../images/fondofull.jpg) center center no-repeat #000;
	
	}
#spider{
	left: 200px;
 	position: absolute;
  	top: 270px;
	height:290px;
	width:219px;
	background:url(../images/spider.png);
	background-position:center center;
	padding:8px;
	background-repeat:no-repeat;
	transition:all 0.8s;
	}
#spider:hover {
	-webkit-transform:rotate(-8deg);
	-moz-transform:rotate(-8deg);
	-ms-transform:rotate(-8deg);
	-o-transform:rotate(-8deg);
	transform:rotate(-8deg);
}
.tela{
	width:713px;
	height:758px;
	
	position:absolute;
	top: 50%;
  	left: 40%;
	
	margin-top: -379px;   /* height/2 = 500px / 2 */
	margin-left: -356.5px;  /* width/2 = 500px / 2 */
	background-image:url(../images/tela-arana.png);
	background-position:left center;
	
	}
#myModal{
	height: 350px;
    left: 40%;
    margin-left: -300px;
    margin-top: -175px;
    position: fixed;
    top: 60%;
    width: 800px;
	}
.modal-dialog {
    margin: 30px auto;
    width: 800px;
}
.modal-body {
   
    height: 209px;
  
}
/* BOTONES CIRCULARES
**************************************************************************/

.hi-icon-wrap {
	text-align: center;
	margin: 0 auto;
	padding: 2em 0 3em;
}

.hi-icon {
	display: inline-block;
	font-size: 0px;
	cursor: pointer;
	margin: 15px 15px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 3;
	color: #fff;
	float:left;
}

.tcaption {
	font-family: 'WebServeroffRegular';
	font-size:2.3em;
	color:#000;
	height:38px;
	line-height: 1.1;
	-webkit-line-height: 1.1;
	text-transform:uppercase;
	
	}
.tcaption:hover {
	
	text-shadow:0 0 1px rgba(102,102,102,0.3)}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

/* Effect 1 */
.hi-icon-effect-1 .hi-icon {
	background: #535050;
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.hi-icon-effect-1 .hi-icon:after {
	top: -7px;
	left: -7px;
	padding: 7px;
	box-shadow: 0 0 0 1.2px #535050;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-webkit-transform: scale(.8);
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	transition: transform 0.2s, opacity 0.2s;
	transform: scale(.8);
	opacity: 0;
}

/* Effect 1a */
.no-touch .hi-icon-effect-1a .hi-icon:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
/* EFECTO HOVER DE LOS BOTONES
**************************************************************************/
.hi-icon-effect-1 .hi-icon {
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.no-touch .hi-icon-effect-1a .hi-icon:hover:after {
	box-shadow: 0 0 0 1.2px #fff;
	opacity:0.7;
}
.no-touch .hi-icon-effect-1 .hi-icon:hover {
	transition: all 1s;
	-webkit-animation: spinAround 2s linear infinite;
	-moz-animation: spinAround 2s linear infinite;
	animation: spinAround 2s linear infinite;
}
@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}

/*Proceso Inverso
**************************************************************************/
.hi-iconInverse {
	display: inline-block;
	font-size: 0px;
	cursor: pointer;
	margin: 15px 15px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 3;
	color: #fff;
	float:right;
}
.hi-iconInverse:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

/* Effect 1 */
.hi-icon-effect-1 .hi-iconInverse {
	background: #535050;
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.hi-icon-effect-1 .hi-iconInverse:after {
	top: -7px;
	left: -7px;
	padding: 7px;
	box-shadow: 0 0 0 1.2px #535050;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-webkit-transform: scale(.8);
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	transition: transform 0.2s, opacity 0.2s;
	transform: scale(.8);
	opacity: 0;
}

/* Effect 1a */
.no-touch .hi-icon-effect-1a .hi-iconInverse:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.hi-icon-effect-1 .hi-iconInverse {
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.no-touch .hi-icon-effect-1a .hi-iconInverse:hover:after {
	box-shadow: 0 0 0 1.2px #fff;
	opacity:0.7;
}
.no-touch .hi-icon-effect-1 .hi-iconInverse:hover {
	transition: all 1s;
	-webkit-animation: spinAround 2s linear infinite;
	-moz-animation: spinAround 2s linear infinite;
	animation: spinAround 2s linear infinite;
}

/*POSICION DE LOS BOTONES
**************************************************************************/
#graphics{background:url(../images/icons/graphics.png) center center no-repeat #535050;}
#phographics{background:url(../images/icons/photography.png) center center no-repeat #535050;}
#videography{background:url(../images/icons/videography.png) center center no-repeat #535050;}
#socialmedia{background:url(../images/icons/socialmedia.png) center center no-repeat #535050;}
#eventos{background:url(../images/icons/events.png) center center no-repeat #535050;}
#sponsorship{background:url(../images/icons/sponsorship.png) center center no-repeat #535050;}
#consulting{background:url(../images/icons/consulting.png) center center no-repeat #535050;}
#distribution{	background:url(../images/icons/distribution.png) center center no-repeat #535050;}

#graphics:hover, #phographics:hover, #videography:hover, #socialmedia:hover, #eventos:hover, #sponsorship:hover, #consulting:hover, #distribution:hover{
	background-color:#2d2c2c;}

/*BOTON GRAPHICS
**************************************************************************/
.botongraphics{
    left: 75px;
    overflow: hidden;
    position: absolute;
    top: -25px;
    width: 370px;
	}

.botongraphics:hover {
	float: right;
}

.margenDerecha {
	overflow: hidden;
	/*border:1px solid #fff;*/
	width: 260px;
	right: 37px;
	position: absolute;
	top: 30px;
	height: 38px;
	width: 0;
}

.botongraphics:hover .margenDerecha { width: 100% }

#titlegraphics {
	background: url(../images/bgmenu/graphicdesign.png) left center no-repeat;
	
}
.moverGrafico{
	width: 300px;
	color: rgba(0,0,0,1);
	overflow: visible;
	position: absolute;
	right: 30px;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
	-webkit-animation: bounceInRight 0.6s linear;
	-moz-animation: bounceInRight 0.6s linear;
	animation: bounceInRight 0.6s linear;
	transition:width 0.6s}



/*BOTON VIDEOGRAPHICS
**************************************************************************/
.botonvideographics{
	left: 650px;
  overflow: hidden;
  position: absolute;
  top: 80px;
  width: 350px;	
	}
.botonvideographics:hover{
	float:left;
	width:380px;}

.botonvideographics:hover .margen{
	width:100%}
#titlevideographics{
	background: url(../images/bgmenu/videography.png) right center no-repeat;
    width: 260px;
	color:rgba(0,0,0,0);
	text-align:center;
	padding-right:10px;
	  -webkit-transform:translateX(-260px);
	     -moz-transform:translateX(-260px);
          	transform:translateX(-260px);
	 /*-webkit-transition: transform 1s ease;
		  -moz-transition: transform 1s ease;
				   transition: transform 1s ease;*/
	
	}

.botonvideographics:hover .margen #titlevideographics{
	width:240px;
	color:rgba(0,0,0,1);
	overflow:visible;
	position:absolute;
	left:55px;
	margin-left:0;
	
	-webkit-transform:translateX(0px);
	   -moz-transform:translateX(0px);
	        transform:translateX(0px);
	-webkit-animation: bounceInLeft 0.6s linear;
	   -moz-animation: bounceInLeft 0.6s linear ;
        	animation: bounceInLeft 0.6s linear;
				
			
		}
	
	

/*BOTON PHOTOGRAPHICS
**************************************************************************/
.botonphotographics{
	left: 485px;
    overflow: hidden;
    position: absolute;
    top: -35px;
    width: 350px;	
	}
.botonphotographics:hover{
	float:left;
	width:380px;}
.margen{
	margin-left:25px;
	overflow:hidden;
	width:260px;
	left: 0px;
  position: absolute;
  top: 37px;
	height:38px;
	width:0;
	}
.botonphotographics:hover .margen{
	width:100%}
#titlephoto{
	background: url(../images/bgmenu/photography.png) right center no-repeat;
    width: 260px;
	color:rgba(0,0,0,0);
	text-align:center;
	padding-right:10px;
	  -webkit-transform:translateX(-260px);
	     -moz-transform:translateX(-260px);
          	transform:translateX(-260px);
	 /*-webkit-transition: transform 1s ease;
		  -moz-transition: transform 1s ease;
			     transition: transform 1s ease;*/
	}

.botonphotographics:hover .margen #titlephoto{
	width:247px;
	color:rgba(0,0,0,1);
	overflow:visible;
	position:absolute;
	left:55px;
	margin-left:0;
	-webkit-transform:translateX(0px);
	   -moz-transform:translateX(0px);
	        transform:translateX(0px);
	-webkit-animation: bounceInLeft 0.6s linear;
	   -moz-animation: bounceInLeft 0.6s linear;
        	animation: bounceInLeft 0.6s linear;}
	
	/* SOCIALMEDIA
**************************************************************************/
.botonsocialmedia{
    left: 680px;
    overflow: hidden;
    position: absolute;
    top: 330px;
    width: 350px;
	}
.botonsocialmedia:hover{
	float:left;
	width:380px;}

#titlesocialmedia{
	background: url(../images/bgmenu/mission.png) right center no-repeat;
    width: 260px;
	color:rgba(0,0,0,0);
	text-align:center;
	padding-right:10px;
	  -webkit-transform:translateX(-260px);
	     -moz-transform:translateX(-260px);
          	transform:translateX(-260px);
	 /*-webkit-transition: transform 1s ease;
		  -moz-transition: transform 1s ease;
			     transition: transform 1s ease;*/
					 
	
	}
.botonsocialmedia:hover .margen{
	width:100%}
.botonsocialmedia:hover .margen #titlesocialmedia{
	width:240px;
	color:rgba(0,0,0,1);
	overflow:visible;
	position:absolute;
	left:55px;
	margin-left:0;
	-webkit-transform:translateX(0px);
	   -moz-transform:translateX(0px);
	        transform:translateX(0px);
	-webkit-animation: bounceInLeft 0.6s linear;
	   -moz-animation: bounceInLeft 0.6s linear ;
        	animation: bounceInLeft 0.6s linear;}
/* EVENTOS
**************************************************************************/
.botoneventos{
	left: 700px;
  overflow: hidden;
  position: absolute;
  top: 488px;
  width: 350px;	
	}
.botoneventos:hover{
	float:left;
	width:380px;}

#titleeventos{
  background: url(../images/bgmenu/specialevents.png) right center no-repeat;
  width: 260px;
	color:rgba(0,0,0,0);
	text-align:center;
	padding-right:10px;
	  -webkit-transform:translateX(-260px);
	     -moz-transform:translateX(-260px);
          	transform:translateX(-260px);
	
	
	}
.botoneventos:hover .margen{
	width:100%}
.botoneventos:hover .margen #titleeventos{
	width:285px;
	color:rgba(0,0,0,1);
	overflow:visible;
	position:absolute;
	left:55px;
	margin-left:0;
	-webkit-transform:translateX(0px);
	   -moz-transform:translateX(0px);
	        transform:translateX(0px);
	-webkit-animation: bounceInLeft 0.6s linear;
	   -moz-animation: bounceInLeft 0.6s linear ;
        	animation: bounceInLeft 0.6s linear;
	}
/* SPONSOR SHIP
**************************************************************************/
.botonsponsorship{
	 left: 660px;
   overflow: hidden;
   position: absolute;
   top: 630px;
   width: 350px;	
	}
.botonsponsorship:hover{
	float:left;
	width:380px;}

#titlesponsorship{
  background: url(../images/bgmenu/sponsorship.png) right center no-repeat;
  width: 260px;
	color:rgba(0,0,0,0);
	text-align:center;
	padding-right:10px;
	  -webkit-transform:translateX(-260px);
	     -moz-transform:translateX(-260px);
          	transform:translateX(-260px);
  
	}
.botonsponsorship:hover .margen{
	width:100%}
.botonsponsorship:hover .margen #titlesponsorship{
	width:255px;
	color:rgba(0,0,0,1);
	overflow:visible;
	position:absolute;
	left:55px;
	margin-left:0;
	-webkit-transform:translateX(0px);
	   -moz-transform:translateX(0px);
	        transform:translateX(0px);
	-webkit-animation: bounceInLeft 0.6s linear;
	   -moz-animation: bounceInLeft 0.6s linear ;
        	animation: bounceInLeft 0.6s linear;
	}
/* CONSULTING
**************************************************************************/
.botonconsulting{
  left: 510px;
  overflow: hidden;
  position: absolute;
  top: 695px;
  width: 400px;	
	}
.botonconsulting:hover{
	float:left;
	width:410px;}

#titleconsulting{
	background: url(../images/bgmenu/webdevelopment.png) right center no-repeat;
  width: 390px;
	color:rgba(0,0,0,0);
	text-align:center;
	padding-right:10px;
	  -webkit-transform:translateX(-260px);
	     -moz-transform:translateX(-260px);
          	transform:translateX(-260px);
	 
	
	}
.botonconsulting:hover .margen{
	width:100%}
.botonconsulting:hover .margen #titleconsulting{
	width:320px;
	color:rgba(0,0,0,1);
	overflow:visible;
	position:absolute;
	left:55px;
	margin-left:0;
	-webkit-transform:translateX(-0px);
	   -moz-transform:translateX(-0px);
	        transform:translateX(-0px);
	-webkit-animation: bounceInLeft 0.6s linear;
	   -moz-animation: bounceInLeft 0.6s linear ;
        	animation: bounceInLeft 0.6s linear;
	}
/*BOTON DISTRIBUTOR
**************************************************************************/
.botondistribution{
	left: 80px;
  overflow: hidden;
  position: absolute;
  top: 720px;
  width: 350px	
	}
.botondistribution:hover{
	float:right;
	width:350px;}
	
.margenDerecha{
	margin-right:25px;
	overflow:hidden;
	width:260px;
	right: 0px;
  position: absolute;
  top: 37px;
	height:38px;
	width:0;
	}
.botondistribution:hover .margenDerecha{
	width:100%}
#titledistribution{
	background: url(../images/bgmenu/contact-us.png) left center no-repeat;
   width: 100%;
	color:rgba(0,0,0,0);
	text-align:center;
	         transform:translateX(240px);
	 -webkit-transform:translateX(240px);
	    -moz-transform:translateX(240px);
	
	
	}

.botondistribution:hover .margenDerecha #titledistribution{
	width:230px;
	color:rgba(0,0,0,1);
	overflow:visible;
	position:absolute;
	right:55px;
	-webkit-transform:translateX(0px);
     -moz-transform:translateX(0px);
	        transform:translateX(0px);
	-webkit-animation: bounceInRight 0.6s linear;
	   -moz-animation: bounceInRight 0.6s linear ;
        	animation: bounceInRight 0.6s linear;}
	
.rotate0 {
	transition: all 9999999s;
	-webkit-transform: rotate(-1deg);
					transform:rotate(-1deg);
	}
.rotategraphics {
	transition:all 2s ease-in-out;
	-webkit-transform: rotate(0deg);
					transform:rotate(0deg);
	}
	
.rotatephotos {
	transition:all 2s ease-in-out;
	-webkit-transform: rotate(20deg);
					transform:rotate(20deg);
	}
.rotatebotonvideographics{
	transition:all 2s ease-in-out;
	-webkit-transform: rotate(40deg);
					transform:rotate(40deg);
	}
.rotatebotonsocialmedia{
	transition:all 2s ease-in-out;
	-webkit-transform: rotate(66deg);
	        transform:rotate(66deg);
	}
	
.rotatebotoneventos{
	transition:all 2s ease-in-out;
	-webkit-transform: rotate(90deg);
	        transform:rotate(90deg);
	}
	
.rotatebotonsponsorship{
	transition:all 2s ease-in-out;
	-webkit-transform: rotate(110deg);
	        transform:rotate(110deg);
	}
	
.rotatebotonconsulting{
	transition:all 2s ease-in-out;
	-webkit-transform: rotate(126deg);
	        transform:rotate(126deg);
	}
	
.rotatebotondistribution{
	transition:all 2s ease-in-out;
	-webkit-transform: rotate(150deg);
	        transform:rotate(150deg);
	}
}