@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}
body {
		font-family: 'PT Sans Caption', Helvetica, Arial, sans-serif;
		color: #444444;
		font-size: 62.5%; /* -> 1em = 10px */
		line-height: 100%;
}
img {
	border-style: none;
}
h1 {
	font-size: 4em;
	font-weight: normal;
	line-height: 120%;
	margin: 0px 0px 26px 0px;
}
h1 span.subtitle {
	font-size: 0.3em;
}
p {
	font-size: 2em;
	line-height: 130%;
}
a, a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}
.content {
	margin: auto;
	padding: 26px 10px 0 10px;
	background-repeat: no-repeat;
	background-position: 100% 120px;
	width: 390px;
}
ul {
	list-style-type: none;	
}
li {
	display: inline;
	padding: 10px 10px 10px 0px;
}
/* Bubble with an isoceles triangle
------------------------------------------ */

.bubble {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#ffffff;
   border: 5px solid #888888;
   width: 330px;
   
   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #000000 0%, #888888 100%);
   background:linear-gradient(top, #000000 0%, #888888 100%);
}
.bubble-content img {
	width: 330px;
}

/* creates triangle */
.bubble:before {
   content:"";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   top:-15px;
   /* left:55px; */
   width:0;
   border-width:0 15px 15px;
   border-style:solid;
   border-color:#888888 transparent;
}

/* creates triangle */
#bubble-about:before {
	left: 0px;
}
#bubble-twitter:before {
   left:57px;
}
#bubble-facebook:before { 
	left:112px;
}
#bubble-instagram:before { 
	left:167px;
}
#bubble-tumblr:before { 
	left:220px;
}

.bubble-data, .bubble-data a {
	font-size: 1em;
	color: #888888;
}
.hide {
	display: none;
}

@media (max-width: 320px) {
	.content {
		width: 300px;
	}
	h1 {
		margin: 0px 0px 36px 0px;
	}
	h1 span.subtitle {
		line-height: 10px;
	}
	li {
		display: inline;
		padding: 5px 5px 5px 0px;
	}
	li img {
		width: 35px;
		height: 35px;
	}	
	.bubble {
		width: 260px;
	}
	.bubble-content img {
		width: 260px;
	}
	#bubble-about:before {
		left: -1px;
	}
	#bubble-twitter:before { 
		left:40px;
	}
	#bubble-facebook:before { 
		left:84px;
	}
	#bubble-instagram:before { 
		left:128px;
	}
	#bubble-tumblr:before { 
		left:170px;
	}
}