/* CSS Document */
html { font-size: 62.5%; }
body {
    font-size: 16px;
    font-size: 1em;
	font-size: 1.6rem;
    font-family: 'Andika', sans-serif;
    color: #505050;
}
h1 {
	text-align: center;
	font-size: 5rem;
	background-color: #D6BC38;
	padding: 30px 0;
	border-right: 0;
	border-left: 0;
	-o-box-shadow:inset 0px 0px 15px rgba(0,0,0,0.9);
	-moz-box-shadow:inset 0px 0px 15px rgba(0,0,0,0.9);
	-webkit-box-shadow:inset 0px 0px 15px rgba(0,0,0,0.9);
	box-shadow:inset 0px 0px 15px rgba(0,0,0,0.9);
	color: #fff;
	text-shadow: 0px 2px 3px rgba(0,0,0,0.7);
}
h1 .fa-child, h1 .fa-male, h1 .fa-female {
    font-size: 10rem;
    margin: 0;
    color: #D6BC38;
	text-shadow: 1px -1px 1px rgba(0,0,0,0.5);
}
.header {
	text-align: center;
	position: relative;
	height: 100vh;
	display: inline-table;
	width: 100%;
}
.line {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.logo { }
.logo img {
    width: 500px;
    height: 100%;
}
.information {
	margin: 10px 0;
	font-size:200%;
	padding:20px;
}
.picture {
	-o-box-shadow:inset 0 0 10px #000000;
	-moz-box-shadow:inset 0 0 10px #000000;
	-webkit-box-shadow:inset 0 0 10px #000000;
	box-shadow:inset 0 0 10px #000000;
	background-image: url('../images/brown.jpg');
    background-color: rgba(64, 32, 0, 1);
    text-align: center;
    position: relative;
	padding: 0;
}
.picture a {
    border: 3px solid #D6BC38;
    display: block;
    padding: 10%;
    height: 100%;
    width: 100%;
	border-top:0;
	border-bottom:0;
}
.picture a img {
    height: auto;
	-o-box-shadow:0 15px 6px -6px #000;
	-moz-box-shadow:0 15px 6px -6px #000;
	-webkit-box-shadow:0 15px 6px -6px #000;
	box-shadow:0 15px 6px -6px #000;
    border: 10px solid #F5F5F5;
}
.fa-envelope-o:before { content: "\f003"; font-size: 2rem; top:2px; }
.fa-mobile-phone:before, .fa-mobile:before { content: "\f10b"; font-size: 2rem; }
.fa-child:before { content: "\f1ae"; }
.fa-anchor:before { content: "\f13d"; }
.fa-archive:before { content: "\f187"; }
.fa-clock-o:before { content: "\f017"; }
.fa-question-circle:before { content: "\f059"; }
.fa-info-circle:before { content: "\f05a"; }
.fa-camera:before { content: "\f030"; }
.fa-youtube-play:before { content: "\f16a"; }
.fa-child, .fa-anchor, .fa-archive, .fa-clock-o,
.fa-question-circle, .fa-info-circle, .fa-camera,
.fa-youtube-play { color: #D6BC38; font-size: 2rem; display: block; margin-top: 5px; }
.fa-male {  }
.fa-female {  }
.fa-link:before { content: "\f0c1"; }
.fa-link {
    content: "\f0c1";
    color: #fff;
    font-size: 7rem;
	text-shadow: 0px 0px 10px #fff;
    position: absolute;
    right: 0;
    top: 0;
    padding: 50px;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 35%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
	background-color: rgba(64, 32, 0, 0.7);
}
.picture a:hover .fa-link {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s, visibility 0.5s;
}
.copyright {
    text-align: center;
	margin: 30px 0;
	clear: both;
    padding: 100px 0;
	/* Firefox */
	height: -moz-calc(75% - 100px);
	/* WebKit */
	height: -webkit-calc(75% - 100px);
	/* Opera */
	height: -o-calc(75% - 100px);
	/* Standard */
	height: calc(100vh - 200px);
}
.text-section {
	position:absolute;
	top:0; bottom:0;
	-o-box-shadow:inset 0 0 36px #000;
	-moz-box-shadow:inset 0 0 36px #000;
	-webkit-box-shadow:inset 0 0 36px #000;
	box-shadow:inset 0 0 36px #000;
}
.demo-container {
    border: 3px solid #D6BC38;
    padding: 30px;
    text-align: center;
    max-width: 80%;
    margin: 0 auto;
    background-color: #f5f5f5;
}
.demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active {
	color: #444;
}
.demo-container .audio-list a:hover {
	text-decoration: underline;
}
.demo-container ul {}
.demo-container ul span {
	font-size: 3rem;
	display: block;
	margin-bottom: 1rem;
	line-height: 1;
}
.demo-container li {display: inline-block;}
.demo-container .audio-list li {
	margin-bottom: 1rem;
	display: inline-block;
	width: 100%;
}
.demo-container p span.track-name {
	color: #D6BC38;
	font-weight: 600;
	text-decoration: underline;
}
.demo-container .fa {
    font-size: 3rem;
    position: relative;
    top: 6px;
	color:#D6BC38;
}
.player-p {
    margin: 2rem 0 0 0;
    border-top: 3px solid #D6BC38;
    padding-top: 3rem;
}
.aniversary-year {
    font-size: 20rem;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
    color: #D6BC38;
    font-family: 'great_vibesregular';
	font-weight: 900;
    line-height: 1;
    letter-spacing: -10px;
}
.bubble {
    position: absolute;
    border: 3px solid #D6BC38;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
    height: 200px;
    width: 200px;
    padding-top: 60px;
}
.bubble span {display: block; line-height:1;}
.junior-1 {left: 50px; top: 50px;}
.junior-2 {right: 50px; top: 50px;}
.ado {left: 50px; bottom: 50px;}
.tineri {right: 50px; bottom: 50px;}
.week {font-size: 3rem;}
.years {
	font-style: italic;
    font-size: 1.4rem;
    margin-bottom: 10px;
}
.date {	}
.fa-calendar:before {color: #D6BC37;}

.pdf-uri {
	margin: 20px 0;
}
.pdf-uri a {
    display: inline-block;
    margin: 0 10px;
    color: inherit;
    font-size: 30px;
}
.pdf-uri a:hover {
    text-decoration: underline;
}

.check-wrapper-icon {
	position: absolute;
	background-color: rgba(255, 255, 255, 0.7);
	width: 100%;
	height: 100%;
	line-height: 1;
	border-radius: 50%;
	top: 0;
}
.fa-check-square-o {
	font-size: 7rem;
	color: #d6bc38;
	padding-top: 60px;
}

/* ----- MEDIA QUERIES ----- */

@media all and (max-width: 1200px) {
	h1 {font-size: 4rem!important;}
	h2 {font-size: 3rem!important;}
}
@media all and (max-width: 900px) {
	.aniversary-year {font-size: 15rem;}
	.junior-1 {left:15px; top:15px;}
	.junior-2 {right:15px; top:15px;}
	.ado {left:15px; bottom:15px;}
	.tineri {right:15px; bottom:15px;}
}
@media all and (max-width: 800px) {
	.bubble {height:170px; width:170px; padding-top:50px;}
	.aniversary-year {text-shadow:0px 1px 1px rgba(0, 0, 0, 1); letter-spacing:normal;}
	.logo img {width: 400px;}
	.week {font-size:2rem;}
	.fa-check-square-o {font-size:5rem;}
}
@media all and (max-width: 700px) {
	.aniversary-year {font-size:10rem;}
	.bubble {border:0; height:auto; width:auto; padding:0;}
	.pdf-uri a {font-size: 20px;}
	.check-wrapper-icon {display:none;}
	/*.junior-2 {color:#ca0000;}*/
}
@media all and (max-width: 600px) {
	h1 {font-size: 3rem!important;}
	.text-section {position:relative; padding: 10rem 0;}
	.picture a {border:0;}
	.logo img {width: 350px;}
}
@media all and (max-width: 500px) {
	.aniversary-year {font-size:7rem;}
}
@media all and (max-width: 350px) {
	.logo img {width: 300px;}
}

/* ----- END MEDIA QUERIES ----- */



/* ----- Safari only ----- */
html[xmlns*=""] body:last-child .logo img {height: auto;}
html[xmlns*=""]:root .logo img {height: auto;}
_::-moz-svg-foreign-content, :root .logo img {height: auto;}
/* ----- END Safari only ----- */

#site_copyrights {
 padding: 20px;
 text-align: center;
 background: #fff;
 font-size: 14px;
 letter-spacing: 1px;
 border-top: 1px solid #ccc;
 width: 75%;
 margin: 0 auto;
}
#site_copyrights img {
  width: 70px;
  position: relative;
  top: 5px;
}
#site_copyrights a {
 line-height: 0!important;
}
.fa-gittip:before, .fa-gratipay:before {
  content: "\f184";
  font-family: fontawesome;
  font-size: 12px;
  margin: 0 1px;
  color: #1d1e54;
}