@font-face {
  font-family: 'BebasNeue';
  src: url('../fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),  url('../fonts/BebasNeue.otf')  format('opentype'),
	     url('../fonts/BebasNeue.woff') format('woff'), url('../fonts/BebasNeue.ttf')  format('truetype'), url('../fonts/BebasNeue.svg#BebasNeue') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*START NORMALIZE*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:before,  *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

body {
	font-size:15px;
	color:#000;
	font-family: 'Open Sans', Arial, sans-serif;
}

p {
	padding-bottom:15px;
}
h1, h2, h3, h4, h5 {
	padding-bottom:20px;
	font-weight:normal;
	font-family:BebasNeue;
}
article,  aside,  details,  figcaption,  figure,  footer,  header,  hgroup,  nav,  section {
	display: block;
}
audio,  canvas,  video {
	display: inline-block;
	max-width: 100%;
}
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}
a {
	text-decoration:none;
	color:#000;
}
a:hover {
	text-decoration:underline;
}
.clear, .clearfix {
	clear:both;
}
img {
	max-width:100%;
	border:0;
	height: auto;
}

/************END NORMALIZE************/

/************START NORMAL STYLE************/
.container{
margin:0 auto;
padding:40px 50px 0px 50px;
max-width:1366px;
}
body{ background:url(../images/TF-Gerald.jpg) no-repeat top right; background-size:auto 100%;}
.logo{ float:left; max-width:50%;}
.menu{ float:right;}
.menu_button{ width:30px; height:25px; cursor:pointer;position:relative;}

.menu_button span{ transition:all ease .4s;}
.menu_button .span_1{ position:absolute; width:30px; height:5px; background:#000000; top:0; display:block;}
.menu_button .span_2{ position:absolute; width:30px; height:5px; background:#000000; display:block; top:10px;} 
.menu_button .span_3{ position:absolute; width:30px; height:5px; background:#000000; top:20px; display:block;}
.menu_button_on .span_1{ transform: rotate(45deg);top:10px;}
.menu_button_on .span_2{ opacity:0}
.menu_button_on .span_3{ transform: rotate(-45deg); top:10px}
.menu ul{ margin:0; padding:0; list-style:none; position:absolute; right:0; background:rgba(0,0,0,.8); width:0; overflow:hidden; margin-top:10px;transition:all ease .4s;}
.menu ul.menu_ul_on{width:250px;}
.menu ul li{ display:block; border-bottom:1px solid #333;}
.menu ul li:last-child{ border:0;}
.menu ul li a{font-family: 'BebasNeue'; font-size:25px; text-decoration:none; display:block; color:#878787; padding:5px 20px;}
.menu ul li.selected a, .menu ul li a:hover{ color:#fff;}
.social_nav{ float:left; margin:0; padding:0; list-style:none;}
.social_nav li{ display:inline-block; padding-right:20px;}
.social_nav li a{ font-size:30px;}
.social_nav li a:hover .fa-facebook{ color:#3c5b9b;}
.social_nav li a:hover .fa-twitter{ color:#2ca9e1;}
.social_nav li a:hover .fa-mixcloud{ color:#f63e28;}
.social_nav li a:hover .fa-instagram{ color:#517ea3;}
.social_nav li a:hover .fa-soundcloud{ color:#f7350f;}
.credits{ float:right; width:39px; height:39px; background:url(../images/mkbnu.png) top center;}
.credits:hover{ background:url(../images/mkbnu.png) bottom center;}
.content{ padding:50px 0; width:426px; max-width:100%; }
.footer_box{ position:absolute; width:100%; bottom:0;left:0; padding:0 50px 30px 50px}
iframe{width:100%; display:block; border:0;}
.follow_me_link{ padding:5px 10px; text-align:right; background:#282828; color:#fff;}
.follow_me_link a{ color:#fff; font-weight:bold; font-size:13px;}
.follow_me_link span{display: inline-block; font-family: "Pacifico",cursive; font-size: 17px; line-height: 20px; padding-right: 5px;}
.popup_content{ display:none; width:400px; max-width:100%; min-height:300px;}
.contact_content{ padding:0 10px 10px;}
.contact_content ul{ margin:0; padding:0; list-style:none;}
.contact_content .form_row{ display:block; margin-bottom:5px;}
.contact_content input[type="text"],
.contact_content input[type="tel"],
.contact_content input[type="email"]{  display:block; border:1px solid #333; padding:8px 15px; width:100%}
.contact_content input[type="submit"]{ float:right; font-family: 'BebasNeue'; border:0; cursor:pointer; color:#fff; display:inline-block; padding:8px 20px; background:#333; font-size:18px;}
.contact_content  textarea{ display:block; border:1px solid #333; padding:5px 10px;font-family: 'Open Sans', Arial, sans-serif; width:100%; font-size:13px;}
.contact_content input.error[type="text"]{ border-color:#f00;}
.captcha_row{ position: relative; padding-left: 75px; margin-bottom: 5px; }
.captcha_img{ position: absolute; left: 0; top: 0; }
.agenda_content span{ display:inline-block; vertical-align:middle;}
#mail-status .success, .release_content{font-family: 'BebasNeue'; font-size:18px; text-align:center; padding-bottom:10px;}
#mail-status .Error{font-family: 'BebasNeue'; font-size:18px; text-align:center; padding-bottom:10px; color: #f00;}
/***********END NORMAL STYLE***************/


/************START BASIC RESPONSIVE SCREENS************/
@media(min-width:1800px) {.container{max-width:100%;}}

/*Desktop mini screen*/
@media(max-width:1024px) {


}

/*Tablet*/
@media(max-width:979px) {

}

/*Android mini-tab and mobile landscape view*/
@media(max-width:767px) {
.container{ padding:20px;}
body{ height:auto !important; background:none;}
.footer_box{ padding:0; position:static;}
.footer_box:after, header:after{ display:block; content:''; clear:both}
.logo{ padding:0 0 20px; width:60%;}
.menu{ padding-left:0; }
.menu ul li:first-child{ padding-left:0;}
.content{ margin:0 auto; padding:20px 0;}
header{ background:url(../images/TF-Gerald.jpg) no-repeat top right; background-size:auto 100%; margin:-20px -20px 0 -20px; padding:20px;}
.menu{ padding:3px; background:rgba(255,255,255,.7); margin-right:50px}
.menu_button span{ background:#000 !important;}

}

/*Android mobile portrait view*/
@media(max-width:479px) {

header{ padding:15px 20px}
.logo{padding:0 0 10px;}
.menu ul li{}
.menu ul li a{ font-size:18px}
.social_nav li{padding-right:10px}
.social_nav li a{ font-size:20px}
.credits img{ width:25px;}
.credits{ height:25px; width:25px; background-size:25px;}
.credits:hover{background-size:25px;}
}

/*Iphone landscape view*/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
 
  
  
}

/*Iphone portrait view*/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	  


}
/************END BASIC RESPONSIVE SCREENS************/