html{overflow:hidden;}
body{width:100%;height:100%;color:white;margin:0; overflow:hidden; border: 0;}
#fondo{
	position:absolute;
	top:3px;
	left:-3px;
	height:100%;
	width:100%;
	z-index:-1;
	overflow:hidden;
	border: 0;
}


#parallax
    {position:relative; overflow:hidden; width:npx; height:npx;}

 div#shell {
        display: block;
        position: relative;
        margin: 100px auto;
        width: 318px;
        height: 318px;
		   

      }
      #shell{
        z-index: 2;
      }
      img#plax-logo {
        position: absolute;
        top: 125px;
        left: 90px;
        z-index: 3;
      }
      img#plax-sphere-1 {
	position: absolute;
	z-index: 4;
	top: 80px;
	left: 210px;
	width: 123px;
	height: 96px;
      }
      img#plax-sphere-2 {
	position: absolute;
	z-index: 2;
	top: 87px;
	left: 187px;
	width: 42px;
	height: 50px;
      }
      img#plax-sphere-3 {
	position: absolute;
	top: 51px;
	left: -29px;
	z-index: 1;
	width: 244px;
	height: 131px;
      }
	  img#plax-sphere-4 {
	position: absolute;
	top: 200px;
	left: -50px;
	z-index: 1;
	width: 300px;
	height: 118px;
      }
img#plax-sphere-5 {
position: absolute;
    left: 50%;
    top: 25%;
    height: auto;
    margin-top: -100px;    // 200px/2
    width: auto;
    margin-left: -150px;    // 300px/2
    	z-index:1;
      }

#flotante { display:none;
top: 20px;
margin-right:10px;
float:right; 
width: 340px;
height: 320px; 
background: url(image/contacto.png) no-repeat; /*Aquí es donde ponemos la imagen como fondo colocando su ubicación*/
z-index:400;

}
#twitterfloat{ display:none;
top: 20px;
margin-right:10px;
float:right; 
width: 340px;
height: 320px; 
background: url(image/twfloat.png) no-repeat; /*Aquí es donde ponemos la imagen como fondo colocando su ubicación*/
z-index:400;

}

#fbfloat{ display:none;
top: 20px;
margin-right:10px;
float:right; 
width: 340px;
height: 320px; 
background: url(image/fbfloat.png) no-repeat; /*Aquí es donde ponemos la imagen como fondo colocando su ubicación*/
z-index:400;

}

#fbcontainer{
	overflow:hidden;
	margin-top:20px;
	margin-left:50px;

}
#contacto {
	top: 20px;
	margin-right:5px;
	margin-top: 10px;
	width: 50px;
	height: 25px;
	border-style:none;
	float:right;
	z-index:100;
}
#twitter{
	top: 20px;
	margin-right:10px;
	margin-top: 10px;
	width: 40px;
	height: 25px;
	border-style:none;
	float:right;
	cursor:pointer;
	z-index:100;
}
#fb{
	rigth: 15px;
	top: 20px;
	margin-right:10px;
	margin-top: 10px;
	width: 35px;
	height: 25px;
	border-style:none;
	float:right;
	cursor:pointer;
	z-index:100;
}

#linea{
	rigth: 5px;
	top: 18px;
	margin-right:5px;
	margin-top: 10px;
	width: 15px;
	height: 30px;
	border-style:none;
	float:right;
	z-index:100;
}

#cerrar {
	margin-top:20px;
	margin-right:9px;
float:right;
width: 10px;
height: 10px;
color:#000;
z-index:400;
}



#container{
    position: absolute;
    left: 40%;
    top: 30%;
    height: auto;
    margin-top: -100px;    // 200px/2
    width: auto;
    margin-left: -150px;    // 300px/2
}

.block {
	position: absolute;
	height: 500px;
	width: 500px;
	 -moz-transform-style: preserve-3d;
	   -moz-transition: -moz-transform 1.5s;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1.5s;
}
.rotated,
.mover .block:hover{
	-moz-transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
}
.block .front{
	z-index: 10;
}
.block .back{
	z-index: 10;
}
.rotated .back, .mover .block:hover .back{
	z-index: 99;
}
.side{
	position: absolute;	
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.front{
	color: #fff;
	height: 500px;
	width: 500px;
}
.front img{ }
.back{
	height: 500px;
	width: 500px;
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
}
.wrapper{
	position:relative;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}
.goback{
	position: absolute;
	top: 10px;
	left: -1px;
	color: #576a01;
	padding: 5px;
	text-shadow: 0 1px 0 #ecf6de;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-box-shadow: 1px 1px 2px #8d996d;
	-moz-box-shadow: 1px 1px 2px #8d996d;
	box-shadow: 1px 1px 2px #8d996d;
}
.goback:hover{
	cursor: pointer;
}
.goback:before{
	width: 0;
	height: 0;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-right: 10px solid #c5d790;
	position: absolute;
	content: "";
	left: -10px;
	top: 0px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.back .content{
	padding: 50px 25px;
}

.sample
{
	z-index: 3;
}

.id
{
float:right;
position: relative;
z-index: 400;
}

.id2
{
z-index: 100;
}

#prueba{
position:relative;
text-align:right;
z-index:100;

}

 	
 
.principal {
    display:block;
    color: #666666;
    font-family:Arial;
	font-size:10px;
	width: 340px;
	height: 320px;
	margin-top: 65px;
	margin-left: 48px;
	margin-right: 10px;
	z-index:400;
}
 
input, textarea {
    width:240px;
    height:9px;
    padding:10px;
    margin-top:4px;
	font-family:Arial;
    font-size:10px;
    color:#000000;
}
 
textarea {
    height:50px;
}
 
#submit {
    width:85px;
    height:30px;
    border:none;
    margin-top:5px;
	color: #666666;
	transition:all 1s 1s ease-in;
-webkit-transition: all 1s .1s ease-in;
-moz-transition: all 1s .1s ease-in;
-o-transition: all 1s .1s ease-in;
-ms-transition: all 1s .1s ease-in;
    cursor:pointer;
}
#submit:hover{
color:#CCCCCC;
background: #666666;
}

input.placeholder{
  color: #cccccc;
}
textarea.placeholder{
  color: #cccccc;
}
.cont  {padding:30px}
	
	input[type=search] {
		-webkit-appearance: none;
	}
	
	input[type="search"]::-webkit-search-decoration, 
	input[type="search"]::-webkit-search-cancel-button {
		display: none;
	}

#result {
	width:320px;
	margin-top:4px;
	text-align:center;
	z-index:400;
}





#tweet-container{
	height:230px;
	width:270px;
	overflow:hidden;
	margin-top:70px;;
	margin-left:50px;;
}

#twitIcon{
	position:absolute;
	top:-25px;
	left:-10px;
	width:10px;
	height:10px;
}


.tweet{
	padding:5px;
	margin:0 8px 8px;
	width:auto;
	overflow:hidden;
		background:url(image/transparent.png);
}

.tweet .avatar,
.tweet .user,
.tweet .time{
	float:left;
}

.tweet .time{
	text-transform:uppercase;
	font-size:9px;
	color: #AAAAAA;
	white-space:nowrap;
}


.tweet .avatar img{
	width:18px;
	height:18px;
	border:2px solid #eeeeee;
	margin:0 5px 5px 0;
}

.tweet .txt{
	clear:both;
}

.txt{
font-family:Arial;
font-size:11px;
color: #333333;
}
.user{
font-family:Arial;
font-size:12px;
}
.tweet .user{
	font-weight:bold;
}

a, a:visited {
	color: #333333;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

#loading{
	margin:100px 95px;
}