/* Fuentes */

@font-face {
    font-family: 'oswald';
    src: url('fuentes/oswald/oswald-bold-webfont.eot');
    src: url('fuentes/oswald/oswald-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/oswald/oswald-bold-webfont.woff') format('woff'),
         url('fuentes/oswald/oswald-bold-webfont.ttf') format('truetype'),
         url('fuentes/oswald/oswald-bold-webfont.svg#oswald') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* Hoja de estilos de JT33 :D */


body{
    background-color: rgb(250, 40, 121);
    width:100%;
    height:100%;
    font-family:arial;
    font-size:9pt;
    line-height:19px;
    color:rgb(131, 131, 131);
    margin:0px;
    padding:0px;}



div#pagina{
    position:relative;
    margin:auto;
    width:70%;}

h2{
font-size:15px;
}


section{
width:100%;
margin:auto;
height:auto;
background-color:#ffffff;
border-radius: 15px;
}

header{
position:absolute;
width:100%;}


div#logo33 img{
display:block;
margin:auto;
margin-top:10px;
margin-bottom:15px;}



/* Navegacion */

nav{
    width:100%;
    position:absolute;
    padding-left:10px;
    padding-right:10px;}

nav ul {
    list-style: none;
    margin-top:0px;
    padding:0px;
    width:100%;}

nav ul li a{
	text-decoration: none;
    background-color: rgb(50,50,50);
	width: 16.1%;
    padding-top:5px;
    padding-top:5px;
    padding-bottom:5px;
    display: block;
    float: left;
    font-family: 'oswald';
    line-height:20px;
	font-size: 1.2em;
	color: rgb(204, 204, 204);
    text-align: center;
    border-radius: 80px;}

nav ul li a:hover{
	background-color: rgb(48, 255, 167);
	color: rgb(100, 100, 100);}
    





/* Datos */

article {
margin-top:10px;
padding-top:200px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;
height:auto;
}

div#contenedor{
width:inherit;
background-color:inherit;
}


.texto_destacado1{
color: rgb(85, 84, 84);
font-size: 11pt;
font-style:italic;
background-color:rgb(48, 255, 167);
padding:3px;
}

.texto_destacado2{
color: rgb(250, 40, 121);
font-style: italic;
font-size: 10pt;
}

.texto_destacado3{
color:rgb(113, 113, 113);
background:rgb(204, 204, 204);
width:50%;
font-family: arial;
font-weight:bold;
padding-left:0.5%;
margin-bottom:1%;
}


div#fotoclase img{
width:100%;
display:block;
margin:auto;
}



/* Alumno */

div#avataralumno1 img{
border-radius: 50%;
max-width:70%;
border: 7px dotted rgb(250, 40, 121);
display:block;
margin:auto;
margin-top:10px;
}

div#avataralumno2 img{
border-radius: 50%;
max-width:70%;
border: 7px dotted rgb(250, 40, 121);
display:block;
margin:auto;
margin-top:10px;
}



aside{
color:rgb(250, 40, 121);
}


.botontp a{
text-decoration: none;
font-size:20px;
text-align:center;
display:block;
width:30%;
padding:10px;
margin:auto;
border-radius:50px;
background-color:rgb(250, 40, 121);
color:white;}

.botontp a:hover{
background-color:#000000;
}


div#contenedor2{
width:inherit;
background-color:inherit;
height:37.5em;
}

section#bloque1{
background-color:rgb(227, 227, 227);
width: 60%;
height: 26rem;
float: right;   
margin-right:0px;
margin-left:0%;
padding-left:12px;
padding-right:15px;
}

section#bloque2{
background-color:#c8f8ce;
width: 30%;
position:;
height: 21rem;
float:left;
margin-left:0%;
padding:10px;
}
 


/* Imagen construccion */

div#construccion img{
display:block;
margin:auto;
max-width:100%;
}


/* Footer */

footer{
width:70%;
margin:auto;
padding-top:10px;
font-family:arial;
font-size:10px;
font-style:italic;
color:rgb(255, 255, 255);
line-height:18px;
text-align:left;
clear:both;
}



div#logodgpc{
padding-left:0px;
}

div#logodgpc img{
margin-left 20px;
margin-right:10px;
width:100px;
opacity:1;
}

div#logodgpc img:hover{
background-color:white;
}








/* RESPONSIVE en dispositivos */



/* TELEFONO */

@media all and (min-width:1px) and (max-width:320px){

    
nav ul li a{
text-decoration: none;
background-color: rgb(50,50,50);
width: 45%;
display: block;
margin-bottom:0.3rem;
color: rgb(204, 204, 204);
float:left;
text-align:center;
font-family: 'oswald';
font-size: 0.9em;
}


article {
padding-top:130%;
padding-bottom:10px;
padding-left:10px;
}
    
    
div#construccion img{
display:block;
margin:auto;
max-width:150px;
}
    
div#contenedor{
margin-top: 3em;
}
    
div#contenedor2{
height:53rem;
margin-top: 3em;
}
    
div#avataralumno1 img{
display:none;   
}

div#avataralumno2 img{
display:none;   
}
    
section#bloque2{
background-color:#c8f8ce;
width: 80%;
position:absolute;
height: 10.5rem;
margin-left:0%;
padding:10px;
float:right;
}
    
section#bloque1{
background-color:rgb(227, 227, 227);
width: 90%;
height: 36rem;
margin-top:13rem;
margin-right:;
margin-left:;
padding-left:10px;
padding-right:1px;
}
    
#logodgpc a img{
width: 70%;
margin-bottom:5%;
margin-right:15%;
margin-left:12%;}    
    
    
    
 div#fotoclase img{
width:100%;
display:block;
margin:auto;
display:none;
}  
    
    
.texto_destacado3{
width:100%;
}
  

    
}



/* TABLET */
@media all and (min-width:321px) and (max-width:768px){

div#contenedor,div#contenedor2{
margin-top: 8em;
}
    
    
    nav ul li a{
	text-decoration: none;
    background-color: rgb(50,50,50);
	width: 48%;
    display: block;
    margin-bottom:0.5rem;
	color: rgb(204, 204, 204);
    float:left;
    text-align:center;
    font-family: 'oswald';
	font-size: 0.9em;
    }


    
    
}



/* COMPUTADORA */
@media all and (min-width:1024px){

    /*
    div#pagina{
    width:70%;
    }
    */
}