@import url(reset.css);
@import url(http://fonts.googleapis.com/css?family=Signika+Negative:400,300,600,700);
@import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);
@import url(https://fonts.googleapis.com/css?family=Kalam);

* {box-sizing: border-box; -moz-box-sizing: border-box;	-webkit-box-sizing: border-box; } /*solve padding proble*/

body { font-size: 14.5pt; font-family: "Signika Negative", sans-serif; min-height: 100%; padding: 0; margin: 0; background-size: 100%; background-position: 0 top; background-repeat: no-repeat; line-height: 1.15; }
#center { margin: 0 auto; max-width: 1200px; padding: 0 1.55em; }
#container { width: 100%; min-height: 100%; position: absolute; }

/* nav */
nav { position: fixed; z-index: 1; top: 0; }

/* dropdown */
	/* The container <div> - needed to position the dropdown content */
	.dropdown {	position: fixed; display: block; margin-top: -5px; }

	/* Dropdown Content (Hidden by Default) */
	.dropdown-content { display: none; position: fixed; background: #FFF; min-width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }

	/* Links inside the dropdown */
	.dropdown-content a { color: #811; padding: 9px 16px; text-decoration: none; display: block; text-align: center; font-size: 1.2em; border-bottom: 1px #f1f1f1 solid; }

	/* Change color of dropdown links on hover */
	.dropdown-content a:hover { background-color: #f1f1f1}

	/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
	.show { display:block; }
	.background { background-color: #FFF; }

/* mid */
#mid { margin: 12vw auto 2em auto; max-width: 1200px; }
#mid-vid { margin: 12vw auto 2em auto; max-width: 960px; }

/* footer */
footer { width: 100%; background-color: #B11; color: #FFF; position: absolute; bottom: 0px; padding: 5pt 0; font-size: 12pt; text-align: right; }
footer a { color: #FFF; text-decoration: none; }
footer img { height: 12pt; padding-right: 8pt; vertical-align: middle; }

/* general */
p { padding: 0 1.55em 10pt 1.55em; text-align: justify; }
h1 { font-size: 1.4em; padding: 0 1.55em 0.4em 1.55em; }
h2 { font-size: 1.2em; padding: 0 1.55em 0.4em 1.55em; color: #811; }
h3 { font-size: 0.95em; padding: 0 1.55em; color: #666; }
a { color: #811; }
a:hover { text-decoration: none; }
strong { font-family: 'Kalam', cursive; color: #B11; }

/* news */

/* music */
#music iframe { width: 100%; height: 100px; padding: 0 0.5em; }
#music img { padding-left: 15px; vertical-align: middle; }

/* video */
#video { width: 100%; border-radius: 1em; background-color: #B11; padding: 0.55em; color: #FFF; margin-bottom: 2%; }
#video h2 { color: #FFF; }
#video iframe { width: 100%; height: 52vw; }
.special { width: 48%; }
.left { float: left; }
.right { float: right; }

.divider { width: 100%; padding: 0.3em 0; }
.lyrics { font-family: 'Gloria Hallelujah', cursive; }
.desktop { display: none; }
.tablet { display: none; }
.phone { display: none; }

@media (min-width: 550px) {
	.mini { display: none; }
	.phone { display: inherit; }
	.dropdown { margin-top: 0px; }
}

@media (min-width: 640px) {
	body { font-size: 18pt; }
	#mid { margin-bottom: 2em; }
	footer { font-size: 15pt; }
	footer img { height: 15pt; padding-right: 12pt; }
	#music iframe { height: 166px; }
	.tablet { display: inherit; }
	.phone { display: none; }
}

@media (min-width: 980px) {
	#video iframe { width: 100%; height: 512px; }
}

@media (min-width: 1200px) {
	.desktop { display: inherit; }
	.tablet { display: none; }
}