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

}

/* GENERAL
----------------------- */

{ font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: calibri; }
body{ background:url(../images/tile_bg.jpg); color:#afafaf; font-family:'calibri', arial; font-size:115%; line-height: 1.4; }
::-moz-selection { background: #ffd52e; color: #000; text-shadow: none; }
::selection { background: #ffd52e; color: #000; text-shadow: none; }

header{ text-align:center}
header > .inner{ padding-bottom:30px}
section{ clear:both}
section > .inner{ padding:30px 0 90px 0; margin:0 auto; position:relative }
section.dark{ background:url(../images/tile_bg_dark.jpg)}
div.anchor { clear: both; float: left; width: 100%; }
a.anchor { float: left; line-height: 0; margin-top: -90px; overflow: hidden; width: 100%;}
#top { background: url(../images/sprite.png) -60px 0 no-repeat; height: 30px; width: 30px; position: absolute; bottom: 20px; right: 20px; text-indent: -9999px; z-index: 999; opacity:.6}
#top:hover{ opacity:1}


/* HEADER
----------------------- */

nav { background:url(../images/tile_nav.jpg); font-family:Franchise; font-size:2.3em; width:100%; z-index:9999; top:0; position:fixed; left:0; line-height:60px}
.lt-ie8 nav{ position:relative}
nav div{ position:relative}
nav ul, nav li{ margin:0; padding:0;  list-style: none; list-style-image: none; margin: 0; padding: 0;}
nav ul{ margin:0 auto; clear:left; float:left; position:relative; left:50%; text-align:center;}
nav li{ float:left; position:relative; right:50%; padding:0 .9em}
nav a{ text-decoration:none; color:#000000; float:left; display:block; height:60px; text-transform:uppercase }
nav a:hover, nav a.selected{ color:#ffd52e}

#logo{ margin-top:95px}
#logo a{ width:272px; display:block; }
#logo h1{ font-size:1em; text-indent:-999em; padding:0; margin:0; line-height:0 }

#quotes{ max-width:620px; font-family:Franchise; font-size:4.7em; line-height:.8em; text-align:center; border-top:1px solid #fff; border-bottom:1px solid #fff; padding:20px 0; margin-top:50px; text-transform:uppercase; opacity:.6}
.gear{ display:inline-block; width:67px; position:relative; top:-3px}

#start{ display:inline-block; text-indent:-999em; background:url(../images/sprite.png) -90px 0; width:30px; height:30px; margin-top:20px; opacity:.6}
#start:hover{ opacity:1}


/* FOOTER
----------------------- */

footer{ font-size:.7em; color:#575757; background:url(../images/tile_bg_dark.jpg); text-align:center; width:100%; position:absolute; left:0; bottom:30px}
footer a{ text-decoration:none; color:#575757}
footer a:hover{ text-decoration:underline; color:#afafaf}


/* ELEMENTS
----------------------- */

h1, h2, h3{ font-family:Franchise; font-weight:normal; margin:0; padding:0; line-height:1em}
h1{ text-align:center; margin-bottom:40px; font-size:4.4em; text-transform:uppercase; color:#ffd52e; }
h2{ font-size:2.7em; color:#fff; position:absolute; top:-25px; left:20px}
h3{ font-size:1.6em; color:#afafaf; margin-bottom:10px}

p{ padding:0; margin:0 0 1em;}

img{ border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle;}

blockquote{ margin:0; }
blockquote p{ position:relative; z-index:2}
blockquote .inner{ position:relative; padding:10px 10px 0 }
blockquote .inner:before,
blockquote .inner:after{ content:''; display:block; position:absolute; background:url(../images/sprite.png); width:70px; height:49px; z-index:1; opacity:.5}
blockquote .inner:before{ left:-10px; top:-10px; background-position:0 -50px}
blockquote .inner:after{ bottom:-20px; background-position:-70px -50px}
blockquote .author{ font-family:Franchise; font-size:1.3em; line-height:1; padding-left:10px}

a{ color:#afafaf;}
a:focus, a:hover, a:active { outline: 0; }

.center{ margin:0 auto}
.yellow{ color:#ffd52e}
p.upgrade{ margin-top:60px; background:#ffd52e; color:#000; text-align:center; padding:5px 0}
p.upgrade a{ color:#000}

.transition{ -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}


/* BOXES
----------------------- */

.box{ margin:0 auto 40px; position:relative; border-radius: 10px;  max-width:980px; }
.box > .inner{ padding:40px 10px 20px 10px; }
.box:last-child{ margin-bottom:0}
.box_light{ background:url(../images/tile_bg.jpg)}
.box_dark { background:url(../images/tile_bg_dark.jpg)}

.grid{ float:left}
.grid-third{ width:33.333%}
.grid-half{ width:50%}
.grid-two-third{ width:66.66%}
.grid > .inner{ padding:0 10px; position:relative}
.grid > .inner.flex{ display:flex; }
.grid > .inner.flex .grid-third{ float:none; margin:0 auto;}


/* ABOUT
----------------------- */

.box_my_experience{ padding-bottom:35px}

.box_my_experience{ text-align:center; }
.box_my_experience img{ width:auto; max-width:inherit}
.box_my_experience img[src*='aus']{ width:200px}
.box_my_experience img[src*='uk']{ width:129px}
.box_my_experience img[src*='ca']{ width:261px}
.map{ display:block; position:relative; margin:30px auto 0; }
.map span{ display:block; overflow:hidden}
.bubble{ position:absolute; top:-20px; padding-bottom:16px; opacity:0; background:#fff; padding:20px; width:150px; height:65px; text-align:center; color:#121212; text-align:left; text-transform:uppercase; font-size:.85em; line-height:1.1em; font-weight:bold; border-radius: 10px; }
.bubble:after{ position:absolute; bottom:-15px; content:''; display:block; width:35px; height:15px; background:url(../images/sprite.png) -20px -30px;}
.bubble .large{ font-size:2.1em; line-height:1.4em}
.map:hover .bubble{ opacity:.4}

.aus .map{ max-width:200px;}
.aus .bubble{ left:-20px; top:-27px}
.aus:hover .bubble{ top:-7px; }
.aus .bubble:after{ left:128px}

.uk .map{ max-width:129px;}
.uk .bubble{ left:-33px; top:-1px}
.uk:hover .bubble{ top:19px; }
.uk .bubble:after{ left:116px}

.ca .map{ max-width:261px; margin-top:20px}
.ca .bubble{ left:-22px; top:11px}
.ca:hover .bubble{ top:31px; }
.ca .bubble:after{ left:32px}

.box_my_skills .grid:nth-of-type(2) .inner{ padding-right:15px}

.photo{ text-align:center}
.profile_img{ background:url(../images/tile_nav.jpg); position:relative; top:-10px; right:0; border-radius: 10px; padding:20px; max-width:258px; margin:0 auto}


/* WORK
----------------------- */

.flexslider{ background:none; border:0; margin:0; padding:0 10px}
.flexslider .slides img{ border-radius:10px}
.flexslider .slides li{ position:relative; margin-right:20px}

.flex-direction-nav a{ margin:0; top:auto; bottom:-40px; opacity:.6}
.flex-direction-nav a:before{ content:''; background:url(../images/sprite.png); width:30px; height:30px}
.flex-direction-nav a.flex-next:before{ content:''; background-position:-30px 0}
.flexslider:hover .flex-prev,
.flex-direction-nav .flex-prev{ left:-20px;}
.flexslider:hover .flex-next,
.flex-direction-nav .flex-next{ right:-20px; }
.flexslider:hover .flex-prev,
.flexslider:hover .flex-next{ opacity:.6}

.work_overlay{ position:absolute; top:0; left:0; width:100%; height:100%; opacity:0 }
.work_overlay:hover,
.work_overlay.hover{ background:rgba(0,0,0,.6); opacity:1;  box-shadow:inset 0 0 30px 30px rgba(0,0,0,.5); }
.work_overlay h3{ color:#fff}
.work_overlay .work_info{ text-transform:uppercase; color:#fff; text-align:center; width:100%; text-shadow: 1px 1px 1px #000; font-weight:bold; line-height:1em; padding:30px 0; display:block; position:relative; top:-50px}
.work_overlay:hover .work_info,
.work_overlay.hover .work_info{ top:0;}
.work_overlay a:hover{ text-decoration:none}

.work_overlay a.visit{ color:#fff; text-decoration:none; font-family:Franchise; font-size:1.6em; text-align:center; display:block; opacity:.80; background:rgba(0,0,0,.6); position:absolute; width:100%; bottom:-20px }
.work_overlay:hover a.visit,
.work_overlay.hover a.visit{ bottom:50px}
.work_overlay a.visit:after{ content:''; background:url(../images/sprite.png) 0 -30px; display:inline-block; width:18px; height:18px; margin-left:5px}
.work_overlay a.visit:hover{  opacity:1; }
.work_overlay a.visit:hover:after{ position:relative; left:1px}

.grid:first-of-type blockquote .inner:after{ left:126px}
.grid:nth-of-type(2) blockquote .inner:after{ left:195px}
.grid:last-of-type blockquote .inner:after{ left:80px}



/* CONTACT
----------------------- */

.box_contact > .inner{ padding-top:30px}

.vcard a{ text-decoration:none; border-bottom:1px dashed #afafaf}
.vcard a:hover{ border-color:transparent}
.contact_title{ width:90px; display:inline-block}

#thanks{ display:none; background:url(../images/tile_bg_dark.jpg); border-radius: 10px; padding:20px; margin:0 10px }

.label{ position:absolute; left:10px; top:6px; text-transform:uppercase; font-weight:normal}
label.error{ color:#ffd52e; font-size:.8em; text-transform:uppercase; float:left; position:absolute; left:0; bottom:1px}
.form-item{ position:relative}
.form-item.position{ display:none}
input, textarea{ width:100%; padding:0 10px; background:url(../images/tile_bg_dark.jpg); border:none; line-height:40px; height:40px; margin-bottom:20px; border-radius: 5px; color:#afafaf; font-family:'calibri', arial; }
textarea{ min-height:100px; padding:10px; line-height:.9em; overflow: auto; vertical-align: top; resize: vertical; }
#send{ width:auto; float:right; width:140px; height:65px; background:url(../images/send.png); cursor:pointer; font-size:0px; text-indent:-999em; margin:0; padding:0}
#send:hover{ background-position:0 -65px}


/* MEDIA QUERIES
----------------------- */

@media (max-width: 1000px) {

section > .inner{ margin:0 20px}

.grid:first-of-type blockquote .inner:after,
.grid:nth-of-type(2) blockquote .inner:after,
.grid:last-of-type blockquote .inner:after{ left:auto; right:0}

}


@media (max-width: 767px) {

.box_my_experience .grid{ float:none; margin-bottom:30px}
.box_my_experience .grid-third{ width:auto;}
.map{ margin-top:10px; }

.profile_img{ right:auto; top:auto}

.grid-two-third .grid-half{ width:100%}
.vcard a{ display:block; margin-bottom:10px}

}


@media (max-width: 650px) {

body{ font-size:100%}

#top{ right:5px}
#logo a{ width:200px}
#quotes{ font-size:3em; margin:20px}
.gear{ width:37px; }	
footer{ bottom:10px}
	
.grid{ float:none; margin-bottom:20px}
.grid-third,
.grid-half,
.grid-two-third{ width:auto;}

h1{ font-size:3.5em}
h2{ left:0; width:100%; text-align:center; top:-20px; font-size:2.5em}
h3{ margin-bottom:0}

.bubble{ font-size:.9em}

.work_info{ font-size:1.3em}

form .grid:first-child{ margin:0}
.label{ top:8px}


}



@media (max-width: 480px) {

.box{ max-width:300px; margin:0 auto 40px}

nav{ font-size:2em; }
nav li{ padding:0 15px}

h1{ font-size:3em}

#logo a{ width:150px}
#quotes{ font-size:2.5em; margin-bottom:0}
.gear{ width:31px; top:-2px }
#top{ display:none !important}

.work_overlay .work_info{ font-size:110%}
.work_overlay:hover a.visit,
.work_overlay.hover a.visit{ bottom:20px}

	
}



@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  

#top,
#start,
.bubble:after
.flex-direction-nav a:before,
.work_overlay a.visit:after,
blockquote .inner:before,
blockquote .inner:after{ background-image:url(../images/sprite@2x.png); background-size:142px 99px}

#send{  background-image:url(../images/send@2x.png); background-size:140px 130px}


}