/*CSS reset*/

@font-face {
 font-family: Open Sans; /* requerido */
 src: url('OpenSans-Regular.ttf');/* requerido */
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kdd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
	margin:0;
	padding:0;
	border:0;
	outline:0;
}

body{
	font-family: Open Sans;
	background-color: #B6B6B6;
    background-image: none;
	width: 100%;
}

img {
	max-width: 100%;
	width: 100%;
}

a{
	color: #FFFFFF;
}

/* Mobile first loaded on screens up to 480px wide */
 
/* Case study height will change at different breakpoints */

.portada {
	height: 330px;
	width: 460px;
	margin: 5% auto 0 auto;
	background-color: #C6C6C6;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
}
	
.video{
	margin: 15px auto 0 auto;
	width:380px;
	height:214px;
}

.nombre{
	display: block;
	color: #fff;
	text-align:center;
	text-shadow: 0.06em 0.06em grey;
	padding-top: 5px;
}

.correo{
	display: block;
	color: #fff;
	text-align:center;
	float: right;
	margin: 20px 5px 0px 0px;
}

.correo p{
	text-shadow: 0.06em 0.06em grey;
}

@media screen and (min-width: 915px) {
	.portada {
		width: 930px;
		height: 380px;		
		background-image: url('./imagenes/panorama_mexi_1363x500.jpg');
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	.nombre{
		display: none;
	}
	
	.video{
		width:295px;
		height:166px;
		position:relative;
		top: 50px;
		left: 316px;
		margin:0;
	}
	
	.correo{
		display: block;
		position: relative;
		top: 165px;
		right: 0px;
	}
}

@media screen and (min-width: 950px) {
	.portada {
		width: 980px;
		height: 359px;
		margin: 5% auto 0px auto;
	}
	
	.video{
		width:380px;
		height:224px;
		position:relative;
		top: 35px;
		left: 298px;
		margin:0;
	}
	
	.correo{
		display: block;
		position: relative;
		top: 85px;
		right: 0px;		
	}
}

@media screen and (min-width: 1363px) {
	.portada {
		min-height: 500px;
		width: 1363px;
		margin: 5% auto 0px auto;
	}

	.video{
		width: 512px;
		height: 290px;
		left: 420px;
	}
	
	.correo{
		display: block;
		position: relative;
		top: 150px;
	}
}