body, html, header {
  margin: 0;
  padding:0;
}
@keyframes Appear{
	from{opacity:0;}
	to{opacity:100;}
}

.topoheader {
	background-color: #230C33;
	margin:0;
	display: flex;
	width:100%;
}

.titulo {
	font-family: 'Annie Use Your Telescope';
	margin: 15px;
	width:70%;
	padding-left: 50px;
}

.titulo a {
	font-size: 40px;
	text-decoration: none;
	letter-spacing: 5px;
	color: #EBE0FF;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.titulo a:hover{
	letter-spacing: 7px;
	padding-left:10px;
}

a:visited {
	text-decoration: none;
	color: #EBE0FF;
}

.menu {
	width:30%;
	padding:5px;
	margin:0;
	display: flex;
}

.menu a {
	font-family: 'Athiti';
	margin: 5px;
	font-size: 18px;
	text-decoration: none;
	width: 50%;
	text-align: center;
	align-content: center;
	justify-content:center;
	letter-spacing:2px;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.menu a:hover{
	letter-spacing: 5px;
}
.WorkReels {
	background-color: #EBE0FF;
	text-align: center;
	display: flex;	
	flex-flow: column nowrap;
	padding-top: 30px;
	padding-bottom: 100px;
}

.WorkReels h1{
	font-family: 'Annie Use Your Telescope';
	color:#592E83;
	font-size: 70px;
	letter-spacing: 5px;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.4s;
	animation-fill-mode: both;
}

.vimeoreels{
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	display: flex;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.5s;
	animation-fill-mode: both;
}

.vimeoframe{
	width:33.3%;
	padding:10px;
}

.gifgallery{
	display: flex;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.6s;
	animation-fill-mode: both;
	
	flex-wrap: wrap;
	justify-content: flex-start;
	
	align-content: center;
	justify-content: center;
	text-align: center;
}


.imageblock {
	padding: 10px;
	display: flex;
	flex-flow: row nowrap;
	width: 30%;
	transition:0.2s;
}

.imageblock img{
	width:100%;
}

.imageblock:hover{
	opacity: 0.3;
	width:31%;
}


footer {
	background-color: #230C33;
	display: flex;
	width:100%;
}

.footername{
	font-family: 'Annie Use Your Telescope';
	font-size: 50px;
	letter-spacing:5px;
	width:50%;
	align-content: center;
	text-align: center;
	color: #E1D8F7;
	
}

.footername a{
	color: #E1D8F7;
	text-decoration: none;
	transition: 0.3s;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.footername a:hover{
	letter-spacing:7px;
}

.contact{
	font-family: 'Athiti';
	width:50%;
	padding: 20px;
	color: #E1D8F7;
	letter-spacing: 2px;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.email p{
	letter-spacing: 1px;
	font-size: 20px;
}

.socialmedia {
	width:100%;
}

.socialmedia i{
	margin:5px;
	font-size: 20px;
	background: #D7C8F3;
	color: #592E83;
	border-radius:50%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	transition: 0.3s;
}

.socialmedia i:hover{
	background: #CAA8F5;
	color: #FFFFFF ;
}



@media screen and (min-width: 701px) and (max-width: 992px){

* { margin: 0; padding: 0; }
	
.topoheader {
	background-color: #230C33;
	margin:0;
	display: block;
	text-align: center;
	align-content: center;
	justify-content:center;
}

.titulo {
	width:100%;
	margin:0;
	font-family: 'Annie Use Your Telescope';
	padding-left: 0px;
	text-align: center;
	align-content: center;
	justify-content:center;
	padding-top: 30px;
	padding-bottom: 30px;
}

.titulo a {
	font-size: 40px;
	text-decoration: none;
	letter-spacing: 5px;
	color: #EBE0FF;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.titulo a:hover{
	letter-spacing: 7px;
	padding-left:0px;
}

a:visited {
	text-decoration: none;
	color: #EBE0FF;
}

.menu {
	margin:0;
	padding: 0;
	display: flex;
	width:100%;
}

.menu a {
	margin:10px;
	width:50%;
	color: #EBE0FF;
	font-family: 'Athiti';
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	align-content: center;
	justify-content:center;
	letter-spacing:2px;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.menu a:hover{
	letter-spacing: 5px;
}

.WorkReels {
	background-color: #EBE0FF;
	text-align: center;
	display: flex;	
	flex-flow: column nowrap;
	padding-top: 50px;
	padding-bottom: 100px;
}

.WorkReels h1{
	font-family: 'Annie Use Your Telescope';
	color:#592E83;
	font-size: 70px;
	letter-spacing: 5px;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.4s;
	animation-fill-mode: both;
	padding-bottom:50px;
}

.vimeoreels{
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	display: block;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.5s;
	animation-fill-mode: both;
}

.vimeoframe{
	width:100%;
	padding:5px;
}

.gifgallery{
	display: flex;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.6s;
	animation-fill-mode: both;
	
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: center;
	justify-content: center;
	text-align: center;
}

.imageblock {
	padding: 10px;
	display: flex;
	flex-flow: row nowrap;
	width: 45%;
	transition:0.2s;
	align-content: center;
	justify-content: center;
	text-align: center;
}

.imageblock img{
	width:100%;
}

.imageblock:hover{
	opacity: 0.3;
	width:46%;
}

footer {
	background-color: #230C33;
	display: block;
	align-content: center;
	text-align: center;
}

.footername{
	width:100%;
	padding-top: 30px;
	font-family: 'Annie Use Your Telescope';
	font-size: 40px;
	letter-spacing:5px;

	align-content: center;
	text-align: center;
	color: #E1D8F7;
}

.footername a{
	color: #E1D8F7;
	text-decoration: none;
	transition: 0.3s;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.footername a:hover{
	letter-spacing:7px;
}

.contact{
	width:100%;
	padding:0;
	padding-top: 30px;
	font-family: 'Athiti';

	color: #E1D8F7;
	letter-spacing: 2px;
	align-content: center;
	text-align: center;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.email p{
	letter-spacing: 1px;
	font-size: 20px;
}

.socialmedia {
	width:100%;
	padding-top: 30px;
	padding-bottom: 30px;
}

.socialmedia i{
	margin:5px;
	font-size: 20px;
	background: #D7C8F3;
	color: #592E83;
	border-radius:50%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	transition: 0.3s;
}

.socialmedia i:hover{
	background: #CAA8F5;
	color: #FFFFFF ;
}
}


@media screen and (max-width: 700px){


* { margin: 0; padding: 0; }
	
.topoheader {
	background-color: #230C33;
	margin:0;
	display: block;
	text-align: center;
	align-content: center;
	justify-content:center;
}

.titulo {
	width:100%;
	margin:0;
	font-family: 'Annie Use Your Telescope';
	padding-left: 0px;
	text-align: center;
	align-content: center;
	justify-content:center;
	padding-top: 30px;
	padding-bottom: 30px;
}

.titulo a {
	font-size: 40px;
	text-decoration: none;
	letter-spacing: 5px;
	color: #EBE0FF;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.titulo a:hover{
	letter-spacing: 7px;
	padding-left:0px;
}

a:visited {
	text-decoration: none;
	color: #EBE0FF;
}

.menu {
	margin:0;
	padding: 0;
	display: flex;
	width:100%;
}

.menu a {
	margin:10px;
	width:50%;
	color: #EBE0FF;
	font-family: 'Athiti';
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	align-content: center;
	justify-content:center;
	letter-spacing:2px;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.menu a:hover{
	letter-spacing: 5px;
}

.WorkReels {
	background-color: #EBE0FF;
	text-align: center;
	display: flex;	
	flex-flow: column nowrap;
	padding-top: 50px;
	padding-bottom: 100px;
}

.WorkReels h1{
	font-family: 'Annie Use Your Telescope';
	color:#592E83;
	font-size: 70px;
	letter-spacing: 5px;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.4s;
	animation-fill-mode: both;
	padding-bottom:50px;
}

.vimeoreels{
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	display: block;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.5s;
	animation-fill-mode: both;
}

.vimeoframe{
	width:100%;
	padding:5px;
}

.gifgallery{
	display: flex;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.6s;
	animation-fill-mode: both;
	
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: center;
	justify-content: center;
	text-align: center;
}

.imageblock {
	padding: 10px;
	display: flex;
	flex-flow: row nowrap;
	width: 90%;
	transition:0.2s;
	align-content: center;
	justify-content: center;
	text-align: center;
}

.imageblock img{
	width:100%;
}

.imageblock:hover{
	opacity: 0.3;
	width:99%;
}

footer {
	background-color: #230C33;
	display: block;
	align-content: center;
	text-align: center;
}

.footername{
	width:100%;
	padding-top: 30px;
	font-family: 'Annie Use Your Telescope';
	font-size: 40px;
	letter-spacing:5px;

	align-content: center;
	text-align: center;
	color: #E1D8F7;
}

.footername a{
	color: #E1D8F7;
	text-decoration: none;
	transition: 0.3s;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.footername a:hover{
	letter-spacing:7px;
}

.contact{
	width:100%;
	padding:0;
	padding-top: 30px;
	font-family: 'Athiti';

	color: #E1D8F7;
	letter-spacing: 2px;
	align-content: center;
	text-align: center;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.email p{
	letter-spacing: 1px;
	font-size: 20px;
}

.socialmedia {
	width:100%;
	padding-top: 30px;
	padding-bottom: 30px;
}

.socialmedia i{
	margin:5px;
	font-size: 20px;
	background: #D7C8F3;
	color: #592E83;
	border-radius:50%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	transition: 0.3s;
}

.socialmedia i:hover{
	background: #CAA8F5;
	color: #FFFFFF ;
}
}