/* Mobiles (portrait and landscape) ----------- */
@media screen
and (min-width : 322px) 
and (max-width : 1023px) {

	html {
		background-color: #cccccc;
		margin: 0;
		padding: 0;
	}

	body {
		font-size: 16px;
	}

	.content {
		position: relative;
		height: 80%;
		width: 80%;
		margin-right: auto;
		margin-left: auto;
		margin-top: 0%;
		display: block;
	}

	.logo {
		height: auto;
		width: 100%;
		margin-bottom: 2em;
	}

	.text {
		font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 1.5em;
		padding: 1.5em 0.7em;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
		border: 3px solid black;
		margin-bottom: 2em;
		text-align: center;
	}

	.social-buttons {
		position: relative;
		text-align: center;
		margin-right: auto;
		margin-left: auto;
	}

	.social-buttons a {
		color: black;
	}

	.social-buttons a :hover {
		-webkit-filter: invert(15%);
		filter: invert(15%);
	}
}


/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1024px) {

	html {
		margin: 0;
		padding: 0;
		background: url('./background.jpg') no-repeat top fixed;
		background-size: cover;
	}

	body {
		font-size: 16px;
	}

	.content {
		position: absolute;
/*		top: 20%;*/
		height: 80%;
		width: 32%;
		left: 48%;
	}

	.logo {
		height: auto;
		width: 100%;
		margin-bottom: 2em;
	}

	.text {
		font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 2em;
		padding: 1.5em 0.7em;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
		border: 3px solid black;
		margin-bottom: 2em;
		text-align: center;
	}

	.social-buttons {
		position: relative;
		text-align: center;
		margin-right: auto;
		margin-left: auto;
	}

	.social-buttons a {
		color: black;
	}

	.social-buttons a :hover {
		-webkit-filter: invert(15%);
		filter: invert(15%);
	}
}