/* Copyright (C) www.tiger-tail.net, All Rights Reserved. */

/* Global font-family: 'Droid Serif', serif; */
/* =================================================================================================================== */
body {margin:0; padding:0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 110%; color:#222; line-height: 1.4em;}
@media (max-width: 600px) {body {font-size:100%;}}

img {border: none;}                         /* Don't want blue border on linked images */
img {max-width: 100%; height: auto; }       /* mobile-friendly */
img.logofullwidth {width:100%; height:auto; margin-top: 10px;}
.anz {border-bottom: 3px solid black;}
.pigeon {margin-top: -1.5em; position: relative; z-index: -1;}
.polaroid {
  display: block;
  margin: 0 auto;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
  -moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
  box-shadow: 0 10px 20px rgba(0,0,0,.7);
}
.polaroid-caption {
  width: 400px;
  padding-top:10px;
  max-width: 100%;
  margin: 0 auto 60px auto;
  font-size: 85%;
  line-height: 1.2em;
}
.polaroid-caption span {display: block; font-size: 75%; color: #555;}

.wrapper {width: 900px; max-width: 95%; margin:0 auto 25px auto;}  /* max-width mobile-friendly */

/*p {font-size: 80%; line-height: 1.4em;	margin:0 0 1em 0;}*/
p {line-height: 1.35em; margin:0 0 1em 0;}
.bigger110 {font-size:110%;}
.bigger120 {font-size:120%;}

.heading-client {line-height: 1.25em; font-size: 135%; text-align:center; margin: 0 0 5px 0;}
.subheading-client {line-height: 1.5em; font-size: 75%; text-align:center; margin: 10px 0 40px 0;}

/* Need to specify contact page non-form text as the web form css styles p */
.contactpagetext {line-height: 1.35em; margin:0 0 1em 0; color:#222;}

.left-on-mobile-centred-on-desktop {text-align:center;}
@media (max-width: 700px) {.left-on-mobile-centred-on-desktop {text-align:left;}}

p.para1 {font-size: 150%; margin:0 auto 1em auto; line-height: 1.25;}
/* Do not use Viewport font size or text is tiny on small screens */
@media (max-width: 700px) {p.para1 {font-size:125%;}}

.hi {font-size:400px; font-weight: bold; color: #f5ad40; letter-spacing: -10px; text-align:center; line-height: 0.75;}
/* Nav strip jumps below logo under 700px wide screen
@media (max-width: 700px) {.hi {font-size:200px; font-size: 44vw; letter-spacing: -5px; line-height: 0.85; margin-top:30px;}} */
@media (max-width: 700px) {.hi {font-size:200px; letter-spacing: -5px; line-height: 0.8;}}

.bighead {font-size:100px; color: #f5ad40; letter-spacing: -1px; text-align:center; line-height: 0.95; padding: 0.25em 0;}
/* Below full width 900px, fonts change with screen width. Viewport browser support is pretty good, but best to have a fallback
{font-size: 16px; font-size: 4vw;} */
@media (max-width: 700px) {.bighead {font-size:60px; font-size: 13vw; letter-spacing: 0px; line-height: 1; margin-top:10px; margin-bottom: 10px;}}

.textblock1 {width: 90%; margin:0 auto 1em auto; font-size:26px; text-align:center; line-height: 1.2;}

/* textblock1a for Adwords landing page */
.textblock1_landingpage {width: 90%; margin:0 auto 1em auto; font-size:22px; text-align:center; line-height: 1.2;}
/* Do not use Viewport font size or text is tiny on small screens */
@media (max-width: 900px) {.textblock1, .textblock1L {font-size:22px;}}
@media (max-width: 600px) {.textblock1, .textblock1L {font-size:19px;}}

.textblock2 {width: 100%; font-size:19px;}
/* Do not use Viewport font size or text is tiny on small screens */
@media (max-width: 900px) {.textblock2 {font-size:17px;}}

.textblock3 {font-family: 'Courgette', cursive; font-size:30px; color:#f5ad40; line-height: 1.2; margin:0 0 0.3em 0;}
/* Do not use Viewport font size or text is tiny on small screens */
@media (max-width: 900px) {.textblock3 {font-size:25px;}}
@media (max-width: 600px) {.textblock3 {font-size:23px;}}

.latest-work-wrapper {background-color: #F2F2F2;}
/* 900-555=345px or 38% vs 62% */
.latest-work-textblock {float: right; width: 18%; padding: 10%;}

.screenshot-text {font-size:14px; line-height: 1em; margin:0.25em 0 0.25em 0;}

/* Headings {font-family: Georgia, "Times New Roman", Times, serif; padding:0; margin:0.5em 0 0.8em 0;} */
h1,h2 {font-family: Arial, Helvetica, sans-serif; padding:0;}
h1 {font-size:125%; font-weight: normal; color: #FF9900; line-height: 1.1em; margin: 2em 0 1em 0;}
/*h2 {font-size:150%; font-weight: normal; color: #FF9900; line-height: 1.1em;}*/
h2 {font-size:100%; font-weight: normal; color: #FF9900; line-height: 1.3em; margin: 2em 0 1em 0;}

/* List padding 1em to avoid bullets left of left margin */
ul {padding-left:1em; padding-bottom:0;}
li {padding-bottom: 0em;}

/* Tables */
table#listed {border-collapse:separate; border-spacing:0 15px; line-height: 1.35em; max-width: 660px;}

/* Flexible boxes, http://jsfiddle.net/EDp8R/3898/ */
#container {
}
.box {
    width: 275px;
    width:27%;
    width: 207px;
    font-size:90%;
    background:#f5f5f5;
    border-radius: 25px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    /*margin:10px;*/
    margin-right:2%;
    margin-right:10px;
    margin-bottom:20px;
    padding:40px;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
.boxhead {font-size: 150%; display: block; padding-bottom:0.75em;}


/* New link colors: blue used as link, not as highlight */
a:link {
	text-decoration: none;
	color: #69c;
    color: #FFFFCC;
}
a:active {
	text-decoration: none;
	color: #69c;
    color: #FFFFCC;
}
a:visited {
	text-decoration: none;
	color: #69c;
    color: #FFFFCC;
}
a:hover {
	text-decoration: underline;
	color: #69c;
    color: #FFFFCC;
    color: pink;
}

a:link,a:active,a:visited,a:hover {color:#4ABBDC;}
a:link,a:active,a:visited,a:hover {color:#69c;}


/* Layout */
/* =================================================================================================================== */

#header
{
/* NB! height same as logo (logo is 68px high but tiger is 60px )*/
height: 64px;
margin-top: 20px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
position: relative;
/*background-color: pink;*/
}

#bottom-right
{
right: 0;
bottom: 0;
position: absolute;
line-height:1;
}

#bottom-left
{
left: 0;
bottom: 0;
position: absolute;
line-height:1;
font-weight: 600;
color:#666;
}

#content
{
width: 800px;
max-width: 90%;
margin-left: auto;
margin-right: auto;
border: solid 0px red;
/* space between content and footer */
padding: 38px 0;
}

/* Header Navigation */
/* =================================================================================================================== */

/* Navigation links */
#header a:link,#header a:active,#header a:visited,#header a:hover {font-size: 21px; padding: 0 0px; color: #000;}
#mobile-nav-links {margin-top: 5px;}
#mobile-nav-links a:link,#mobile-nav-links a:active,#mobile-nav-links a:visited,#mobile-nav-links a:hover {font-size:20px; padding:0;}

#bottom-right ul {
  text-align: center;
  padding: 0;
  margin: 0;
}
#bottom-right li {
  display: inline-block;
  padding-left: 25px;
}
#bottom-right a {
  text-decoration: none;
  color: #000;
}

#bottom-right a:hover {color: #fff; background-color: #333;}
#bottom-right a.active {cursor: default;}

/* ========================= */

#mobile-nav-links ul {
  text-align: right;
  padding: 0;
  margin: 0;
}
#mobile-nav-links li {
  display: inline-block;
  padding: 0 0 0 6px;
  position: relative;
  z-index: 1;
}

/* Below 450px wide, make nav links a vertical list
@media (max-width: 450px) {#mobile-nav-links li {display: block; padding-right: 0px;}} */

#mobile-nav-links a {
  text-decoration: none;
  color: #000;
}

#mobile-nav-links a:hover {color: #fff; background-color: #333;}
#mobile-nav-links a.active {cursor: default;}

/* Anti-spam form */
.antispam { display:none;}

/* Mobile Styles
/* ===================================================================================================================*/

/* medium+ screen sizes */
@media (min-width:701px) {
    .mobile-only {
        display:none !important;
    }

    .desktop-only {
        display:block !important;
    }
}

/* small screen sizes */
@media (max-width: 700px) {
    .mobile-only {
        display:block !important;
    }

    .desktop-only {
        display:none !important;
    }
}