@charset "UTF-8";
/* CSS Document */
	
body{
    margin: 0px;
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
    font-family: aktiv-grotesk, sans-serif;
    font-size: 16px;
	font-weight: 400;
    font-style: normal;   		
   	color: black;
    background-color: white;
	background-size: auto;
}
h1{
	margin: 0px;
	padding-bottom: 20px;
	font-size: 20px;			
	font-weight: 400;
}
h2{
	margin: 0px;
	font-size: 16px;
	font-weight: 400;
	font-style: italic;
}
p {
	margin: 0px;
	padding-bottom: 20px;
}
a {
	color: black;
	text-decoration: none;
}
a:hover {	
	text-decoration: underline;
}

		
.container {
	display: flex;
  	align-items: center;
 	justify-content: space-between;
	padding: 10px;
}
.footer {
	display: flex;
  	align-items: center;
 	justify-content: space-between;
	padding: 10px;
}

.box {
	margin: 10px;
	background-color: #FAFAFA;
	display: flex;
  	align-items: center;
	justify-content: center;
	height: 800px;
	width: 100%;
}
.text {
	max-width: 500px;
	padding: 10px;
}
.item {
	display: flex;
}
.logo {
	height: 25px;
	filter: invert(1);
}
.social {
	height: 20px;
	padding: 10px;
	filter: invert(1);
}
.social:hover {
	filter: invert(22%) sepia(22%) saturate(2906%) hue-rotate(320deg) brightness(111%) contrast(96%);
}


@media only screen and (max-width:800px) {
/* For tablets: */
	.box {
		position: absolute;
		width: 100%;
		height: 410px; 
		margin-top: 70px;
	}
	.footer {
		visibility: hidden;
	}
}


@media only screen and (max-width:500px) {
/* For mobile phones: */
	body {
		padding: 0px;
	}
	
	.container {
		position: absolute;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
 		justify-content: space-between;
		flex-direction: column;
		padding: 0px;
	}			
	.logo{
		height: 30px;
		padding: 30px;
	}		
	.social {
		height: 30px;
		padding: 30px;
	}
}