@media screen and (max-height: 900px) {

#wrapper {
	margin: auto;
	min-height: 768px;
	height: 100%;
	position: relative;
	background: url(../images/fondofull.jpg) center center no-repeat #000;
}

#spider {
	left: 120px;
	position: absolute;
	top: 170px;
	width:160px;
	height:212px;
	background:url(../images/spiderdesktop.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: 500px;
	height: 532px;
	position: absolute;
	top: 50%;
	left: 40%;
	margin-top: -266px;   /* height/2 = 500px / 2 */
	margin-left: -250px;  /* width/2 = 500px / 2 */
	background-image: url(../images/tela-arana.png);
	background-position: left center;
	background-size: 100% 100%;
}
#myModal{
	height: 350px;
    left: 0%;
    margin-left: -300px;
    margin-top: -175px;
    position: absolute;
    top: 70%;
    overflow:visible;
	}
.modal-dialog {
    margin: 30px auto;
    width: 800px;
}
.modal-body {
   
    height: 200px;
  
}

/* 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: 65px;
	height: 65px;
	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: 65px;
	height: 65px;
	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: -25px;
	overflow: hidden;
	position: absolute;
	top: -45px;
	width: 350px;
}

.botongraphics:hover {
	float: right;
}

.margenDerecha {
	overflow: hidden;
	/*border:1px solid #fff;*/
	width: 280px;
	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: 280px;
	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: 450px;
	overflow: hidden;
	position: absolute;
	top: 30px;
	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: 244px;
	color: rgba(0,0,0,0);
	text-align: center;
	padding-right: 5px;
	-webkit-transform: translateX(-260px);
	-moz-transform: translateX(-260px);
	transform: translateX(-260px);
	
	
}
.botonvideographics .margen #titlevideographics {
		
}
.botonvideographics:hover .margen #titlevideographics {
	width: 240px;
	color: rgba(0,0,0,1);
	overflow: visible;
	position: absolute;
	left: 55px;
	margin-left: 0;
	-webkit-transform: translateX(-5px);
	-moz-transform: translateX(-5px);
	transform: translateX(-5px);
	-webkit-animation: bounceInLeft 0.6s linear;
	-moz-animation: bounceInLeft 0.6s linear;
	animation: bounceInLeft 0.6s linear;

}

/*BOTON PHOTOGRAPHICS
**************************************************************************/

.botonphotographics {
	left: 320px;
	overflow: hidden;
	position: absolute;
	top: -35px;
	width: 350px;
}

.botonphotographics:hover {
	float: left;
	width: 380px;
}

.margen {
	margin-left: 20.50px;
	overflow: hidden;
	width: 260px;
	left: 0px;
	position: absolute;
	top: 29px;
	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: 240px;
	color: rgba(0,0,0,1);
	overflow: visible;
	position: absolute;
	left: 55px;
	margin-left: 0;
	-webkit-transform: translateX(-4px);
	-moz-transform: translateX(-4px);
	transform: translateX(-4px);
	-webkit-animation: bounceInLeft 0.6s linear;
	-moz-animation: bounceInLeft 0.6s linear;
	animation: bounceInLeft 0.6s linear;
}

/* SOCIALMEDIA
**************************************************************************/

.botonsocialmedia {
	left: 480px;
	overflow: hidden;
	position: absolute;
	top: 210px;
	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(-12px);
	-moz-transform: translateX(-12px);
	transform: translateX(-12px);
	-webkit-animation: bounceInLeft 0.6s linear;
	-moz-animation: bounceInLeft 0.6s linear;
	animation: bounceInLeft 0.6s linear;
}

/* EVENTOS
**************************************************************************/

.botoneventos {
	left: 440px;
	overflow: hidden;
	position: absolute;
	top: 320px;
	width: 350px;
}

.botoneventos:hover {
	float: left;
	width: 380px;
}

#titleeventos {
	background: url(../images/bgmenu/specialevents.png) right center no-repeat;
	width: 380px;
	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: 280px;
	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: 450px;
	overflow: hidden;
	position: absolute;
	top: 425px;
	width: 300px;
}

.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: 245px;
	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: 350px;
	overflow: hidden;
	position: absolute;
	top: 500px;
	width: 300px;
}

.botonconsulting:hover {
	float: left;
	width: 390px;
}

#titleconsulting {
	background: url(../images/bgmenu/webdevelopment.png) right center no-repeat;
	width: 360px;
	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: 305px;
	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: -35px;
	overflow: hidden;
	position: absolute;
	top: 500px;
	width: 350px;
}

.botondistribution:hover {
	float: right;
	width: 350px;
}

.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: 20px;
	-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);
}