/*
* Southern Sky
* Copyright 2015, Compound, www.compound-creative.com
* www.southernskytn.com
* 
* The robbed who smiles has stolen something from the theif. 
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
* Global
* Logo + Header
* Utility
* footer
* Media queries
*/


/* Global
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html, body {
	width: 100%;
}

body {
	height: 100vh;
}

figure {
	margin: 0;
}

*, *:before, *:after {
	  -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	     	  box-sizing: border-box;
}

* {
	-webkit-font-smoothing: antialiased;
}

a {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
}

h1 {font-weight: bold;}


/* Smaller than phablet (also point when grid becomes active) */
@media (max-width: 550px) {
	h2 {
		font-size: 2.5rem;
	}
}

/* Logo + Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header {
  text-align: center;
  /*background-color: grey;*/
}

.showtime-logo {
	width: 350px;
	/*margin-bottom: 30px;*/
}

.logo {
	width: 300px;
}

@media (max-width: 550px) {
	.showtime-logo {
		width: 280px;
	}

	.logo {
		width: 220px;
	}

}


/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* utility
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.u-center {
	text-align: center;
}

.u-right {
	text-align: right;
}

.u-border-top {
	border-top: 1px solid whitesmoke;
}

.u-padding-top {
	padding-top: 40px;
}

.u-margin-top {
	margin-top: 40px;
}

.u-center-vertical {
	position: relative;
  	top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

/* Body - global
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.container img {
	max-width: 100%;
}

.container {
	padding: 40px 0;
}

/* Smaller than phablet (also point when grid becomes active) */
@media (max-width: 550px) {


	.container img {
		padding: 15px;
	}

	.container  {
		padding: 10px;
	}
}


button {
	text-align: center;
	margin: 0 auto;
}

p {
	margin-bottom: 0;
}


/* Smaller than phablet (also point when grid becomes active) */
@media (max-width: 550px) {
	p {
		font-size: .8em;
	}
}



/* footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */

header {
	background-color: ghostwhite;
	border-top: solid 8px #34495e;
	border-bottom: solid 8px #34495e;
}

body {
	background-color: #2c3e50;
}


/* General Override Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.u-top-no-padding {
	padding-top: 0px;
}

.u-top-no-padding {
	padding-top: 0px;
}

.u-padding-top-half {
	padding-top: 25px;
}

.v-center {
	display: flex;
	align-items: center;
  justify-content: center;
}



/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/



/* Smaller than Desktop HD */
@media (max-width: 1200px) {}

/* Smaller than desktop */
@media (max-width: 1000px) {}

/* Smaller than tablet */
@media (max-width: 750px) {}

/* Smaller than phablet (also point when grid becomes active) */
@media (max-width: 550px) {}

/* Smaller than mobile */
@media (max-width: 400px) {}