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

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

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

}

body
{
font-family: 'BebasNeueRegular';
padding:100px 0 0 0;
margin:0;
background: #fff;
}

header
{
position: fixed;
height:84px;
background:#c42d2b;
top:0;
left:0;
width:100%;
z-index: 100;
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}

header .btn-group
{
width:100%;
max-width:520px;
margin:auto;
padding:0 5px;
}

header .btn-group .btn
{
position: relative;
width:25%;
height:70px;
float:left;
top:4px;
}

header .btn-group .btn a
{
display:block;
height:70px;
line-height:80px;
color:#fff;
background: #d62623;
text-align: center;
text-decoration: none;
font-size: 30pt;
border:1px solid #a71d1c;
box-shadow:inset 0 1px 2px #ff4c4a, 0 1px 2px #ff4c4a, inset 0 -20px 30px #c02a2a;
}

#about.btn a {border-radius: 8px 0 0 8px;}
#resume.btn a {border-radius: 0 8px 8px 0;}


header .btn-group .btn a:hover
{
background: #e33d3b;
}


h1, h2
{
font-size: 50pt;
color:#d6d6d6;
padding:0;
margin:0;
font-weight: 200;
z-index: 5;
text-align: center;
}

h2
{
font-size: 30pt;
color:#b9b9b9;
left:40px;
top:-50px;
}

.backpack h2
{
float:left;
display:block;
width:100%;
height:100px;
position: relative;
padding-top:40px;
height:50pt;
left:0;
top:0;
}

#hero
{
text-align: center;
}

#hero img
{

width:100%;
max-width:1389px;
height:auto;
}

.info
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height:100%;
}

.info div
{
box-sizing: border-box;
position: relative;
top:100px;
background: #fff;
padding:40px;
width:100%;
max-width:480px;
height:auto;
z-index: 120;
margin:auto;
color:#7d8b93;
font-family:AaarghNormal;
font-weight:normal;
font-size:12pt;
line-height: 1.8;
text-transform: uppercase;
text-align: center;
border-radius: 8px;
box-shadow: 0 0 30px rgba(0,0,0,.7);
}

.info div div.close-btn
{
position: absolute;
right:10px;
top:10px;
background: #eee;
width:20px;
height:20px;
border-radius: 10px;
padding:0;
box-shadow: none;
line-height: 20px;
color:#ccc;
cursor: pointer;
}

.info div.close-btn-mobile
{
position: relative;
top:0;
box-shadow:none;
background:#eee;
margin-top: 30px;
padding:0;
width:100px;
height:30px;
line-height:33px;
text-align: center;
font-size: 9pt;
letter-spacing: 2px;
cursor: pointer;
display:none;
}


.info div.close-btn:hover
{
background: #ccc;
color:#444;
}

#call-me div.close-btn-mobile
{
top:-20px;
}

.info div img
{
width:100%;
max-width:398px;
height:auto;
}

.info div a
{
color:#e55e57;
text-decoration: none;
padding:5px 5px 2px 5px;
border-radius: 4px;
transition: background .5s, color .5s;
-moz-transition: background .5s, color .5s;
-webkit-transition: background .5s, color .5s;
-o-transition: background .5s, color .5s;
}

.info div a:hover
{
color:#fff;
background: #c72d25;
padding:5px 5px 2px 5px;
border-radius: 4px;
transition: background .5s, color .5s;
-moz-transition: background .5s, color .5s;
-webkit-transition: background .5s, color .5s;
-o-transition: background .5s, color .5s;
}

#call-me div a
{
background:none;
padding:0;
border-radius:0;
}

#call-me div a:hover
{
background:none !important;
padding:0;
}

#available
{
background:#29bb1e;
color:#fff;
width:130px;
height:130px;
padding:10px;
margin:auto;
border-radius:75px;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
box-shadow: inset 0 0px 10px rgba(0,0,0,.6);
}

/*------------------------------------------------------------------------------------------------------*/

.backpack
{
width:100%;
max-width:1440px;
margin:0 auto;
padding-left:5px;
padding-right:5px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-background-clip:padding-box  !important;
-webkit-background-clip:padding-box  !important;
background-clip:padding-box  !important;
}


.lunch
{
float:left;
width:49%;
position:relative;
left:10px;
margin-right:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-background-clip:padding-box  !important;
-webkit-background-clip:padding-box  !important;
background-clip:padding-box  !important;
}


.lunchbox .lunch img
{
width:100%;
max-width: 700px;
height:auto;
}


.one-third{width:32.4%}

/*------------------------------------------------------------------------------------------------------*/

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

.lunch
{
width:100%;
text-align: center;
left:0px;
}

}
/*------------------------------------------------------------------------------------------------------*/


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

body
{
padding:60px 0 0 0;
}

h1
{
font-size: 20pt;
line-height:1;
}

h2
{
font-size: 16pt;
line-height:1;
}


header
{
position: fixed;
height:30px;
}

header .btn-group
{
width:100%;
margin:auto;
padding:0;
}

header .btn-group .btn
{
position: relative;
width:25%;
height:30px;
float:left;
top:0px;
}

header .btn-group .btn a
{
height:30px;
line-height:34px;
font-size: 18pt;
border-radius:0;
box-shadow:0;
}

#about.btn a {border-radius: 0;}
#resume.btn a {border-radius: 0;}

.info div
{
top:40px;
width:96%;
}

.info div.close-btn-mobile
{
display: block;
}

.lunch
{
width:100%;
}

}

/*------------------------------------------------------------------------------------------------------*/

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

body
{
padding:60px 0 0 0;
}

h1
{
font-size: 20pt;
line-height:1;
}

h2
{
font-size: 16pt;
line-height:1;
}

/*
header
{
position: fixed;
height:44px;
}

header .btn-group
{
width:280px;
margin:auto;
padding:0 5px;
}

header .btn-group .btn
{
position: relative;
width:70px;
height:40px;
float:left;
top:4px;
}

header .btn-group .btn a
{
height:32px;
line-height:40px;
font-size: 22pt;
}

#about.btn a {border-radius: 8px 0 0 8px;}
#resume.btn a {border-radius: 0 8px 8px 0;}

*/

.info div
{
top:50px;
width:96%;
}

.info div.close-btn-mobile
{
display: block;
}

}