/* Fuentes personalizadas */

@font-face{
font-family: ubuntuRegular;
src: url(fuentes/Ubuntu-R.ttf) format('truetype');
}

@font-face{
font-family: ubuntuBold;
src: url(fuentes/Ubuntu-B.ttf) format('truetype');
}

@font-face{
font-family: ubuntuItalic;
src: url(fuentes/Ubuntu-I.ttf) format('truetype');
}

@font-face{
font-family: ubuntuBoldItalic;
src: url(fuentes/Ubuntu-BI.ttf) format('truetype');
}

/* Estilos basicos */

h1,h2,h3,h4,h5{
font-family: ubuntuBold;
}

h6{font-family: ubuntuRegular;}
h1{

color: white;
font-size: 48px;
top:-20%;
margin-top:10px;
letter-spacing: 0px;
display:inline;
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
margin:0px;
padding:0px;

}
h2{

color: white;
font-size: 16px;
top:-20%;
margin-top:10px;
letter-spacing: 0px;
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
margin:0px;
padding:0px;
}

#tipo{
position:absolute;
transform:translate(100px, 10px);
-webkit-transform:translate(100px, 10px);
}
h3{
margin:0px;
padding:0px;
font-size:36px;
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);

}
h4{
margin:0px;
padding:0px;
font-size:14px;
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
color:black;
}
h6{
color:white;
font-size: 12px;
}
p{
font-family: ubuntuRegular;
font-size:12px;
text-align:justify;
text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
color:black;
}

/*Menu de navegacion*/

nav{
display:inline; 
float:right; 
margin:20px;
}

nav ul{    /*lista no ordenada*/
font-size: 12px;
padding-left:0px;
margin-left:0px;
background-color: grey;
color:white;
width:50%; /*anchura*/
font-family:ubuntuRegular;
position:relative;
display:inline;

}

nav ul li{
display: inline;
text-align:center;

}

nav ul li a{
background:rgba(255,255,255,0);

/*background: grey;*/
color: white;
text-decoration: none;
float:right;/*right = derecha*/
border: 1px solid white;
border-radius: 0px 10px 0px 10px;
-webkit-border-radius: 3px 20px 3px 20px;/*compatible con webkit */
-moz-border-radius: 0px 10px 0px 10px;/*compatible con mozilla */
-o-border-radius: 0px 10px 0px 10px;/*compatible con opera */
box-shadow: 0px 0px 5px white;
-webkit-box-shadow: 0px 0px 15px white;
width:80px;/* */
-webkit-transition: -webkit-box-shadow 1s, background 1s;
}

nav ul li a:hover{
background:rgba(255,255,255,0.8);
color: black;
box-shadow: 0px 0px 25px white;
-webkit-box-shadow: 0px 0px 25px white;

}

canvas{
border: 0px solid white;

}

/*Maquetacion principal*/

body{
text-align: center;
margin:0px;
background: grey;
background: url('../img/azul.png'),url('../img/azul.png'),url('../img/fondo.jpg');
 
}

#principal{
text-align: left;
margin:auto;
width:80%;
height:100%;
position: relative;
}

#cajaheader{
width: 100%;
height:100px;
position: absolute;
background: rgba(255,255,255,0.5);
}

header{
display:table;
margin: auto;
text-align: left;
width:100%;
height:100px;
/*background: darkgrey;*/
overflow: hidden;/* todo lo que sobresale se oculta*/

}

footer{
display:table;
margin:0px;
text-align:center;
padding:0px;
width:100%; /*anchura*/
border: 2px solid white;
background: rgba(0,0,0,0.5);

border-radius: 0px 0px 5px 35px;
-moz-border-radius: 0px 0px 5px 35px;
-webkit-border-radius: 0px 0px 5px 35px;
-o-border-radius: 0px 0px 5px 35px;

box-shadow: 0px 0px 10px white;
-moz-box-shadow: 0px 0px 10px white;
-webkit-box-shadow: 0px 0px 10px white;
-o-box-shadow: 0px 0px 10px white;

}

/*contenido */

#contenido{
width:100%;
	border-top: 0px solid white;
   border-right: 2px solid white;   
   border-bottom: 2px solid white;
   border-left: 2px solid white;

box-shadow: 0px 0px 10px white;
-moz-box-shadow: 0px 0px 10px white;
-webkit-box-shadow: 0px 0px 10px white;
-o-box-shadow: 0px 0px 10px white;
background: rgba(255,255,255,0.5);
}

article{
color: rgba(255,255,255,1);
width:55%;

/*background: white;*/

background: rgba(255,255,255,0.5);
margin:10px;
height:100%;
border: 1px solid white;
border-radius: 0px 25px 0px 25px;
-webkit-border-radius: 0px 25px 0px 25px;
box-shadow: 3px 3px 10px black;
-webkit-box-shadow: 3px 3px 10px black;
padding: 10px 10px 10px 150px;
opacity:1;
transition: opacity 1s, box-shadow 1s, transform 1s, background 1s;
-webkit-transition: opacity 1s, -webkit-box-shadow 1s, -webkit-transform 1s, background 1s, color 1s;
transform:scale(1,1);
-webkit-transform:scale(1,1);
}
/*resalata por donde pasa el mause*/
article:hover{
color: rgba(0,0,0,1);
background:rgba(255,255,255,1);
opacity:1;
transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
}

time{
float:right;
font-family:ubuntuRegular;
font-size:10px;
}

article:hover{
box-shadow: 0px 0px 25px white;
-webkit-box-shadow: 0px 0px 25px white;
}

aside{
float: right;
display: inline-table;
width:20%;
background: rgba(255,255,255,0.5);

margin:10px;
padding:10px;
border: 1px solid white;
border-radius: 0px 25px 0px 25px;
-webkit-border-radius: 0px 25px 0px 25px;
box-shadow: 3px 3px 10px black;
-webkit-box-shadow: 3px 3px 10px black;
text-decoration:none;
-webkit-transition: -webkit-box-shadow 1s, background 1s;
}

aside:hover{
box-shadow: 0px 0px 25px white;
-webkit-box-shadow: 0px 0px 25px white;
background: rgba(255,255,255,1);
}

aside ul{
width: 100%;
height: 100%;
padding-left:0;
padding-right:0;
color:white;
float:left;
font-family:ubuntuRegular;
font-size: 10px;
text-decoration:none;
list-style: none;

}

aside ul li{
width:100%;
text-decoration:none;
border: 1px solid white;
border-radius: 0px 5px 0px 5px;
-webkit-border-radius: 0px 5px 0px 5px;
text-decoration:none;
}

aside ul li a{
width:100%;
height:30px;
overflow:hidden;
text-decoration:none;

}

#sobremi{
width:100%;
height:120px;
background:blue;
color:white;
display:table;
background:rgba(0,0,0,0.5);
font-size: 12px;
text-decoration:none;
text-align:justify;
overflow:hidden;

}

#sobremi a{
color: white;
text-decoration: none;
}

#mifoto{
width:100px;/*ancho*/
height:100px;/*altura*/
font-family:ubuntuBold;
font-size: 20px;
color:white;
text-align:left;

background:url('../photo/jhonfreddysantos.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
display: box;

border: 1px solid white;
border-radius: 0px 10px 0px 10px;
box-shadow: 0px 0px 10px white;
-webkit-border-radius: 0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 10px white;
float:left;
margin:10px;
animation: parpadeo 5s;
-webkit-animation: parpadeo 5s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;

}

@keyframes parpadeo{

0% {box-shadow: 0px 0px 10px white;}
50% {box-shadow: 0px 0px 50px white;}
100% {box-shadow: 0px 0px 10px white;}

}

@-webkit-keyframes parpadeo{

0% {-webkit-box-shadow: 0px 0px 10px white;}
50% {-webkit-box-shadow: 0px 0px 50px white;}
100% {-webkit-box-shadow: 0px 0px 10px white;}

}

#logoblender{
width:100px;
height:100px;
font-family:ubuntuBold;
font-size: 20px;
color:white;
text-align:left;

background:url('../photo/blenderlogo.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
display: box;

border: 1px solid white;
border-radius: 0px 10px 0px 10px;
box-shadow: 0px 0px 10px black;
-webkit-border-radius: 0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 10px black;
float:left;
margin:10px;
position:absolute;
transform:translate(-140px, 0px);
-webkit-transform:translate(-140px, 0px);
}
#logoactualidad3d{
width:100px;
height:100px;
font-family:ubuntuBold;
font-size: 20px;
color:white;
text-align:left;

background:url('../photo/actualidad3dlogo.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
display: box;

border: 1px solid white;
border-radius: 0px 10px 0px 10px;
box-shadow: 0px 0px 10px black;
-webkit-border-radius: 0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 10px black;
float:left;
margin:10px;
position:absolute;
transform:translate(-140px, 0px);
-webkit-transform:translate(-140px, 0px);
}
#logov2b{
width:100px;
height:100px;
font-family:ubuntuBold;
font-size: 20px;
color:white;
text-align:left;

background:url('../photo/video2brainlogo.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
display: box;

border: 1px solid white;
border-radius: 0px 10px 0px 10px;
box-shadow: 0px 0px 10px black;
-webkit-border-radius: 0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 10px black;
float:left;
margin:10px;

position:absolute;
transform:translate(-140px, 0px);
-webkit-transform:translate(-140px, 0px);

}
#mifotoarticulo1{
width:100px;
height:100px;
font-family:ubuntuBold;
font-size: 20px;
color:white;
text-align:left;

background:url('../photo/super.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
display: box;

border: 1px solid white;
border-radius: 0px 10px 0px 10px;
box-shadow: 0px 0px 10px black;
-webkit-border-radius: 0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 10px black;
float:left;
margin:10px;

position:absolute;
transform:translate(-140px, 0px);
-webkit-transform:translate(-140px, 0px);

}
#mifotoarticulo{
width:100px;
height:100px;
font-family:ubuntuBold;
font-size: 20px;
color:white;
text-align:left;

background:url('../photo/aceofbase.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
display: box;

border: 1px solid white;
border-radius: 0px 10px 0px 10px;
box-shadow: 0px 0px 10px black;
-webkit-border-radius: 0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 10px black;
float:left;
margin:10px;

position:absolute;
transform:translate(-140px, 0px);
-webkit-transform:translate(-140px, 0px);

}
[required]{
border-color:green;
box-shadow: 0px 0px 5px green;
-webkit-box-shadow: 0px 0px 5px green;

}

:invalid{
border-color:red;
box-shadow: 0px 0px 50px red;
-webkit-box-shadow: 0px 0px 50px red;
border-radius: 0px 5px 0px 5px;
-webkit-border-radius: 0px 10px 0px 10px;
}

form table{
width:100%;
border: 0px solid white;
padding: 0px;
margin:auto;
}

form{
font-family:ubuntuRegular;
color:black;
text-shadow: 3px 3px 5px rgba(0,0,0,0.5);
border: 1px solid white;
border-radius: 0px 15px 0px 15px;
-webkit-border-radius: 0px 15px 0px 15px;
box-shadow: 10px 10px 25px rgba(0,0,0,0.5);
-webkit-box-shadow: 10px 10px 25px rgba(0,0,0,0.5);
background: rgba(255,255,255,0.5);
margin:auto;
width:80%;
padding:10px;
}
form input, form textarea{
font-size:10px;
font-family:ubuntuRegular;
background:rgba(255,255,255,0.5);
border: 1px dotted rgba(255,255,255,1);
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
border-radius: 0px 5px 0px 5px;
-webkit-border-radius: 0px 5px 0px 5px;
transition: background 1s, box-shadow: 1s; border 1s;
-webkit-transition: background 1s, -webkit-box-shadow: 1s; border 1s;
}

form input:hover, form textarea:hover{
background:rgba(255,255,255,1);
box-shadow: 0px 0px 5px rgba(255,255,255,1);
-webkit-box-shadow: 0px 0px 5px rgba(255,255,255,1);
border: 1px dotted rgba(0,0,0,1);
}

#test{

border-radius: 0px 0px 5px white;
-o-border-radius: 0px 0px 5px white;
-moz-border-radius: 0px 0px 5px white;
-webkit-border-radius: 0px 0px 5px white;
}