/** EJERCICIO FINAL MODULO 2
	Crear una página web personal simulada, que incluya al menos:
	-Uso de colores para texto y fondo, incluyendo al menos colores degradados en alguna de sus cajas.
	-Inclusión de tipografías externas de Google Fonts, Adobe Edge Web Fonts o un servicio similar on line.
	-Distintos encabezados.
	-Uso de caracteres especiales
	-Incluir, imágenes de tipo bitmap y vectorial.
	-Incluir algún vídeo.
	-Incluir bordes redondeados en alguna de sus cajas.
	-La página debe comenzar con el siguiente encabezamiento:  “Página personal de <nombre y apellido del alumno>”
**/

@font-face
{
	font-family: FiraSansL;
	src:url(../fuentes/eot/FiraSans-Light.eot), 
	url(../fuentes/ttf/FiraSans-Light.ttf), 
	url(../fuentes/woff/FiraSans-Light.woff);
}

@font-face
{
	font-family: FiraSansM;
	src:url(../fuentes/eot/FiraSans-Medium.eot), 
	url(../fuentes/ttf/FiraSans-Medium.ttf), 
	url(../fuentes/woff/FiraSans-Medium.woff);
}

@font-face
{
	font-family: FiraSansR;
	src:url(../fuentes/eot/FiraSans-Regular.eot), 
	url(../fuentes/ttf/FiraSans-Regular.ttf), 
	url(../fuentes/woff/FiraSans-Regular.woff);
}

@font-face
{
	font-family: FiraSansB;
	src:url(../fuentes/eot/FiraSans-Bold.eot), 
	url(../fuentes/ttf/FiraSans-Bold.ttf), 
	url(../fuentes/woff/FiraSans-Bold.woff);
}

body {
	margin: 0;
	padding: 0;     
	
	color:#000; 
	font-family: FiraSansL,serif;
	
	/* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(black));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, black, white);
	/*PODEMOS ELEGIR EL GRADO EN QUE APARECE CADA COLOR ASI(top, tomato 20%, cyan 60%, lightgreen 100%);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, black, white);
    /* Opera 11.10+ */
    background: -o-linear-background(top, black, white);
    /* IE 10 */
    background: -ms-linear-background(top, black, white);
    /* estándar */
    background: linear-background(top, black, white);
}
	
h3{
	width: 100%;
	text-align:center;
	background-color:#000;
	color:#f86464;
	font-family: FiraSansB,serif;	
}

#contenedor{	
	
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
	
	width:100%;
	margin-top:6.5%;
}

.contenedorVideo{
	float:left;
	width: 50%;
	
}

.contenedorImg{
	float:left;
	width: 24%;
	
	border-radius: 25px;
    border: 2px solid black;
}

.fondo-radial {
    background-position: center center;
    background: radial-gradient(circle, #black, #white);
	/* CHROME */
	background: -webkit-radial-gradient(circle, black, white);
}

.fondo-radial-2 {
    background-position: center center;
    background: radial-gradient(ellipse, #black, #white);
	/* CHROME */
	background: -webkit-radial-gradient(ellipse, black, white);
}

.fondo-radial-3 {
    background: radial-gradient(left bottom, circle farthest-side, #f7ff08 0%, #21ad11 50%, #00a3ef 80%);
	/* CHROME */
	background: -webkit-radial-gradient(left bottom, circle farthest-side, #f7ff08 0%, #21ad11 50%, #00a3ef 80%);
}

.fondo-radial-4 {
    background: repeating-radial-gradient(left bottom, ellipse farthest-side, #f7ff08 0%, #21ad11 10%, #00A3ef 20%);
	/* CHROME */
	background: -webkit-repeating-radial-gradient(left bottom, ellipse farthest-side, #f7ff08 0%, #21ad11 10%, #00A3ef 20%);
}

.cierre{
	color: #FFF;
	text-align:center;
	background-color:#000;
	
	clear:both;
	position: fixed;
	
	left:0px;
	width: 100%;
}

.clear{
	clear:both;
}

p {
	font-family: 'Montserrat', serif;
	color:purple;
}