@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	background-color: rgb(0,0,0);
	color: rgb(255,255,255);
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100vw;
	font-family: Verdana, Tahoma, sans-serif;	/*font-family: "Arial Black", Gadget, sans-serif;*/
	/*font-family: Calibri, sans-serif; */
}

@media only screen and (orientation: portrait) {
  body {
	margin: 0;
	padding: 0;
	background-color: rgb(0,0,0);
	color: rgb(255,255,255);
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100vw;
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 28px;
}
}

header {
    width: 95%;
    max-width: 788px;
    display: flex;
    justify-content: flex-end;
    padding: 12px;
    margin-top: 15px;
}


.share-button {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgb(240,240,240);
}

.share-button svg {
    margin-left: 12px;
    margin-top: 10px;
    color: rgb(0,0,0);
}

.container {
    width: 91%;
    max-width: 600px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
	padding-top: 25px;
}

@media only screen and (orientation: portrait) {
  .container {
    width: 91%;
    max-width: 100%;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
}

@media only screen and (orientation: portrait) {
  .bannerimg {
    width: 100%;
    max-width: 100%;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
}

h1 {
    font-size: 20px;
    margin-bottom: 30px;
}

@media only screen and (orientation: portrait) {
  h1 {
    font-size: 28px;
    margin-bottom: 30px;
}
}

a {
    text-decoration: none;
    color: rgb(240,240,240);
}

.tile {
    width: 100%;
    background-color: rgb(37,37,37);
    margin: 7px;
    border-radius: 17px;
    display: flex;
    justify-content: space-between;
}

/*@media only screen and (orientation: portrait) {
  .tile {
    width: 100%;
    background-color: rgb(37,37,37);
    margin: 30px;
    border-radius: 17px;
    display: flex;
    justify-content: space-between;
	transform: scale(1.5);
}
}*/

.tile:hover {
	transition: cubic-bezier(.07, .41, .82, .41) 0.2s;
	transform: scale(1.02);
	background-color: #e34220;
}

/*@media only screen and (orientation: portrait) {
  .tile:hover {
	transition: cubic-bezier(.07, .41, .82, .41) 0.2s;
	transform: scale(1.52);
	background-color: #e34220;
}
}*/

.tile-share-button {
    margin: 8px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgb(52,52,52);
}

.tile-share-button svg {
    margin-left: 12px;
    margin-top: 10px;
}


.image-container {
    height: 96px;
    width: 96px;
    border-radius: 48px;
    overflow: hidden;
}

.image-container img {
    height: 100%;
}

.icon {
    margin: 4px 8px;
    width: 44px;
    height: 44px;
	margin-top: 7px;
}

@media only screen and (orientation: portrait) {
  .icon {
    margin: 4px 8px;
    width: 88px;
    height: 88px;
	margin-top: 7px;
}
}

.titletext {
	text-align: center;
	font-family: Calibri, sans-serif;
	padding-top: 5px;
	color: #999999;
}

  	@import url`('https://fonts.googleapis.com/css?family=Open+Sans');
	@import url`('https://fonts.googleapis.com/css?family=Calibri');
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  
    table, td, div, h1, p {font-family: Calibri, sans-serif;}
.inlinesubscript {
	font-family: Calibri, sans-serif;
	color: #666666;
}

.footer {
	padding: 10px 0;
	font-size: 9px;
	color: #999999;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

@media only screen and (orientation: portrait) {
  .footer {
	padding: 10px 0;
	font-size: 12px;
	color: #999999;
	position: relative;
	clear: both;
}
}