*{
	box-sizing: border-box;
}

body{
	width: 100%;
	min-height: 100vh;
	background: black; 
	color: white; 
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
	text-align: left;
	font-size: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

a{
	color: inherit;
	text-decoration: none;
}

.content{
	opacity: 0;
	max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

h1{
	font-size: 5rem;
}

p{
	font-size: 1.5rem;
}

/*.dots:after{
	content:'';
	animation: dots 1s forwards;
	transition: all .5s;
	animation-delay: .5s;
}

@keyframes dots{
	100%{content: '!';}
	20%{content: '!!';}
	30%{content: '!!!';}
}
*/
._pic{
	border-radius: 100%;
	width: 20rem;
	max-width: 1080px;
	margin-right: 3rem;
}

h1{
	line-height: 0;
}

.boton{
	background: white;
	color: black;
	text-transform: uppercase;
	padding: 0.5rem 1rem 0.5rem 0.7rem;
	border-radius: 3px;
	font-size: 1rem;
	transition: all .5s;
	letter-spacing: 1px;
}

.boton img{
	width: 15px;
	margin: 0 5px -1px 0;
}

.boton:hover{
	letter-spacing: 2px;
}

.boton:hover span{
	margin-left: 5px;
}
.fadeIn{
	animation: fadein 1s forwards;
	transition: all .5s;
	animation-delay: .5s;
}

@keyframes fadein{
	0%{
		opacity: 0;
		transform: translateY(5%);
	}
	100%{
		opacity: 1;
		transform: translateY(0%);
	}

}


@media (max-width:899px){
	.content{
		flex-direction: column;
	}

	._pic {
	    margin:0 auto 1rem;
	    width: 100%;
	}
}