@charset "UTF-8";
@font-face {
	font-family: 'BebasNeue';
	src: url('BebasNeue.eot');
	src: local('☺'), url('BebasNeue.woff') format('woff'), url('BebasNeue.otf') format('opentype'), url('BebasNeue.ttf') format('truetype'), url('BebasNeue.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ReklameScript-Regular_DEMO';
	src: url('ReklameScript-Regular_DEMO.eot');
	src: local('☺'), url('ReklameScript-Regular_DEMO.woff') format('woff'), url('ReklameScript-Regular_DEMO.otf') format('opentype'), url('ReklameScript-Regular_DEMO.ttf') format('truetype'), url('ReklameScript-Regular_DEMO.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


/*
	COLOUR CODES:
	blue:#3c71ea;
	pink:#E84744;
	grey:#575A5D;
*/

/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
b	{
	font-weight:600;
	}
body {
	line-height: 1;
	width:100%;
	margin:0 auto;
	background-repeat: repeat;
}
ol, ul {
	list-style: none;
	text-align: center;
    margin: 38px 0;
}
ul li, ul li a {
    display: inline;
    margin: 0 6px;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Tools */

.end {
	margin-right:0px!important;
	border-right:0px!important;
}
.hide {
	display:none;
}
.clear {
	clear:both;
}
.float-left {
	float:left;
}
.float-right {
	float:right;
}
p {
    line-height: 126%;
    color: #575A5D;
    font-family: 'BebasNeue', arial, sans-serif;
    text-transform: uppercase;
    font-size: 1em;
}
p a {
	text-decoration:none;
	color:#E84744;
}	
p a:hover {
	color:#E84744;
	text-decoration:underline;	
}
li a {
    font-size: 1.8em;
    color: #E84744;
    font-family: 'ReklameScript-Regular_DEMO', sans-serif;
    text-transform: none;
    text-decoration: none;
}
li a:hover {
    color: #E84744;
    opacity: 0.6;
    -webkit-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
li.nav-selected a {
    color: #505050;
}
li a.active {
    color: #575A5D;
}
h1 {	
    color: #ffffff;
    font-size: 3.1em;
    font-family: "Milkshake", helvetica, arial;
    text-transform: none;
    text-decoration: none;
}
h2 {	
    color: #575A5D;
	font-size: 2.5em;    
    font-family: "BebasNeue", helvetica, arial;
    text-transform: uppercase;
    line-height: 1.18;
    padding-bottom: 5px;
}
h2 a {
    color: #E84744;
    text-decoration: none;
}
h2 a:hover {
    text-decoration: underline;
}
h3	{
	line-height: 126%;
    color: #575A5D;
    font-family: 'BebasNeue', arial, sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    padding: 10px 0 5px 0;
}
h4	{
    line-height: 126%;
    color: #575A5D;
    font-family: 'BebasNeue', arial, sans-serif;
    text-transform: uppercase;
    font-size: 1em;
    padding-bottom: 10px;
}
h5 { 
    font-weight: 800;
    font-family: 'Open Sans', sans-serif;
    line-height: 140%;
    color:#575A5D;
    text-align: left;
    font-size: 1.1em;
    padding: 30px 0 10px 0;
}    	
a img:hover {
    -webkit-transition: opacity 0.7s linear;
    -o-transition: opacity 0.7s linear;
    -moz-transition: opacity 0.7s linear;
    transition: opacity 0.7s linear;
}
.sm-menu a:hover {
    opacity: 0.6;
    -webkit-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.menu {
    margin: 0 auto;
    padding: 58px 50px 0 0;
    float: right;
    display: inline;
}



/* Website */

#header {
    margin: 0 auto;
    background-image: url(../assets/banner_bg.png);
    background-position: center;
    height: 312px;    
}

#logo {
    padding: 27px;
    text-align: center;
}

.about, .article {
	max-width: 410px;
    text-align: center;
    margin: 0 auto;
    padding: 0 20px 10px 20px;
}

.tkts {
    text-align: center;
    padding: 11px 0;
}

.footer {
	max-width: 547px;
    text-align: center;
    margin: 20px auto; 
	padding: 0 20px;
}

.sm-menu {
    text-align: center;
    padding: 40px 20px 30px 20px;
}    

.sm-menu a {
    margin: 0 8px;
}

.about img {
	width:100%;
}

.article img {
	width:100%;
	padding: 10px 0;
}

a.button {
	background-color: #E84744;
    padding: 5px 16px;
    color: white;
    font-family: "BebasNeue", helvetica, arial;
    text-transform: uppercase;
    font-size: 2.4em;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
}	

a.button:hover {
	opacity: 0.6;
    -webkit-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

#clip {
	margin: 0 auto;
	float: none;
    width: 100%;
}

#video p {
	text-align: center;
    padding: 5px 0 20px 0;
}

.article p {
    padding: 0 0 20px 0;
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    line-height: 140%;
    text-transform:none;
    text-align: left;
}

.article p.bold {
	font-weight:800;
}	

@media screen and (min-width: 600px) {

h2 {
    font-size: 3.7em;
}  

.about, .article {
	max-width: 640px;
}	

ul li, ul li a {
    margin: 0 20px;
}

}

@media screen and (max-width: 600px) {

#clip {
    width:90%;
    margin:5%;
} 

#video p {
    padding: 0 0 20px 0;
}   

}