@charset "UTF-8";

#mobile-nav {display: none;}

/*----------------------------------------------------------*/
/*                        Floats                            */
/*----------------------------------------------------------*/

.float-right img {float: right;}

.float-left {float: left;}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*----------------------------------------------------------*/
/*                        Fonts                             */
/*----------------------------------------------------------*/

/* titillium-web-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  src: url('/fonts/titillium-web-v18-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/titillium-web-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* BellfortDrawRough by GRIN3 (Nowak) */
@font-face {
  font-family: 'BellfortDrawRough';
  font-display: swap;
  font-style: normal;
  src: local(''),
       url('/fonts/BellfortDrawRough.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/BellfortDrawRough.woff') format('woff'), /* Modern Browsers */
       url('/fonts/BellfortDrawRough.ttf') format('truetype'); /* Safari, Android, iOS */
}

/* big-shoulders-text-800 - latin */
@font-face {
  font-family: 'Big Shoulders Text';
  font-display: swap;
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/big-shoulders-text-v6-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/big-shoulders-text-v6-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/big-shoulders-text-v6-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/big-shoulders-text-v6-latin-800.woff') format('woff'), /* Modern Browsers */
       url('/fonts/big-shoulders-text-v6-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/big-shoulders-text-v6-latin-800.svg#BigShouldersText') format('svg'); /* Legacy iOS */
}

/* alex-brush-regular - latin */
@font-face {
  font-family: 'Alex Brush';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/alex-brush-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/alex-brush-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/alex-brush-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/alex-brush-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/alex-brush-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/alex-brush-v12-latin-regular.svg#AlexBrush') format('svg'); /* Legacy iOS */
}

/* italiana-regular - latin */
@font-face {
  font-family: 'Italiana';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/italiana-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/italiana-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/italiana-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/italiana-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/italiana-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/italiana-v11-latin-regular.svg#Italiana') format('svg'); /* Legacy iOS */
}

/* lobster-regular - latin */
@font-face {
  font-family: 'Lobster';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/lobster-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lobster Regular'), local('Lobster-Regular'),
       url('/fonts/lobster-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lobster-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lobster-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lobster-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lobster-v23-latin-regular.svg#Lobster') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/open-sans-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/open-sans-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/open-sans-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/open-sans-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/open-sans-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/open-sans-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/open-sans-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/open-sans-v18-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-200 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  font-style: normal;
  font-weight: 200;
  src: url('/fonts/source-sans-pro-v13-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'),
       url('/fonts/source-sans-pro-v13-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/source-sans-pro-v13-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/source-sans-pro-v13-latin-200.woff') format('woff'), /* Modern Browsers */
       url('/fonts/source-sans-pro-v13-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/source-sans-pro-v13-latin-200.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/source-sans-pro-v13-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
       url('/fonts/source-sans-pro-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/source-sans-pro-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/source-sans-pro-v13-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/source-sans-pro-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/source-sans-pro-v13-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/source-sans-pro-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('/fonts/source-sans-pro-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/source-sans-pro-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/source-sans-pro-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/source-sans-pro-v13-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/source-sans-pro-v13-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
       url('/fonts/source-sans-pro-v13-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/source-sans-pro-v13-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/source-sans-pro-v13-latin-600.woff') format('woff'), /* Modern Browsers */
       url('/fonts/source-sans-pro-v13-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/source-sans-pro-v13-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* fira-sans-800 - latin */
@font-face {
  font-family: 'Fira Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/fira-sans-v10-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'),
       url('/fonts/fira-sans-v10-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/fira-sans-v10-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/fira-sans-v10-latin-800.woff') format('woff'), /* Modern Browsers */
       url('/fonts/fira-sans-v10-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/fira-sans-v10-latin-800.svg#FiraSans') format('svg'); /* Legacy iOS */
}

/* amatic-sc-700 - latin */
@font-face {
  font-family: 'Amatic SC';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/amatic-sc-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Amatic SC Bold'), local('AmaticSC-Bold'),
       url('/fonts/amatic-sc-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/amatic-sc-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/amatic-sc-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/amatic-sc-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/amatic-sc-v11-latin-700.svg#AmaticSC') format('svg'); /* Legacy iOS */
}

/* bilbo-regular - latin */
@font-face {
  font-family: 'Bilbo';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/bilbo-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Bilbo Regular'), local('Bilbo-Regular'),
       url('/fonts/bilbo-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/bilbo-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/bilbo-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/bilbo-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/bilbo-v10-latin-regular.svg#Bilbo') format('svg'); /* Legacy iOS */
}

/* architects-daughter-regular - latin */
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/architects-daughter-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Architects Daughter Regular'), local('ArchitectsDaughter-Regular'),
       url('/fonts/architects-daughter-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/architects-daughter-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/architects-daughter-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/architects-daughter-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/architects-daughter-v10-latin-regular.svg#ArchitectsDaughter') format('svg'); /* Legacy iOS */
}

/* ephesis-regular - latin */
@font-face {
  font-family: 'Ephesis';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ephesis-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/ephesis-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/ephesis-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/ephesis-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/ephesis-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/ephesis-v7-latin-regular.svg#Ephesis') format('svg'); /* Legacy iOS */
}

/* marcellus-regular - latin */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/marcellus-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/marcellus-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/marcellus-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/marcellus-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/marcellus-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/marcellus-v13-latin-regular.svg#Marcellus') format('svg'); /* Legacy iOS */
}

/*----------------------------------------------------------*/
/*                         Body                             */
/*----------------------------------------------------------*/
body {	
	background-color: #FFFFFF;
	margin: 0;
}

.container {
	width: 100%; /* edge to edge or 90% */
	margin-left: auto;
	margin-right: auto;
}

.container-1400 {
	max-width: 1400px; 
	margin-left: auto;
	margin-right: auto;
}

.container-short {
	width: 100%; 
	margin-left: auto;
	margin-right: auto;
	height: 700px; 
}

.container-portrait {  /* Portfolio */
	min-height: 416px;
	position: relative;
}

.container-landscape {  /* Portfolio, Cartoonist */
	min-height: 212px;
	position: relative;
}

.hide-privacy {display:none;}  /* Contact, Quote */

.ohnoprivacy {   /* Contact, Quote */
  	opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}  

/*----------------------------------------------------------*/
/*                   Headings and Fonts                     */
/*----------------------------------------------------------*/

h1,h2,h3,h4,h5,p{margin:0;padding:0}

p {
	font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.125em;  /* 18px text */
	font-weight: 300;
	line-height: 1.5;
}

h1 {
	font-family: 'Fira Sans', sans-serif;
	font-size: 2.5em; 
	font-weight: 800;
	text-align: center;
	line-height: 1.5;
}

.logo-font {
	font-family: 'Titillium Web', sans-serif;
	font-size: 2.5em; 
	font-weight: 400;
	text-align: center;
	line-height: 1.5;
}

h2 {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-weight: 300;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 3px;
}

h3 {
    font-family: 'Fira Sans', sans-serif;
	font-size: 2.0em; 
    font-weight: 800;
	line-height: 2.0;
}

.style-h1-h3 {
    font-family: 'Fira Sans', sans-serif;
	font-size: 2.0em; 
    font-weight: 800;
	line-height: 2.0;
}

/* Revert CSS style of target element and its children */                       
.reset-style, .reset-style * {
    all: revert;
}

h4 {
	font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.5em; 
	font-weight: 600;
}

h5 {  /* Remove if not needed */
	font-family: 'Fira Sans', serif;
	font-size: 1.25em; /* Contact Us */
	font-weight: 400;
}

.state_font {
	font-family: 'Ephesis', serif; 
	font-size: 1.5em;
}

.mural_font {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
}

.childrens h1, 
.childrens h3 {
	font-family: 'Amatic SC', serif; 
	font-weight: 700;
}

.portrait h1 {
	font-family: 'Architects Daughter', sans-serif;
  	font-size: 2.0em;
  	font-weight: lighter;
}

.fashion_font {
	font-family: 'Ephesis', serif; 
	font-size: 2.3em;
}

.fashion h1 {
	font-family: 'Architects Daughter', sans-serif;
  	font-size: 2.1em;
  	font-weight: lighter;
}

.fashion h3 {
  font-family: 'Architects Daughter', sans-serif;
  font-size: 26px;
  font-weight: lighter;
}

.fashion em {
	color: #0E71B8;
	font-style: normal; /* remove italics */
}

.callout h1,
.callout h3 {
	font-family: 'BellfortDrawRough', serif; 
	font-size: 80px;
  	font-weight: lighter;
	color: #353E4A;
	line-height: 1.2;
}

.callout-small h3 {
	font-family: 'BellfortDrawRough', serif; 
	font-size: 50px;
  	font-weight: lighter;
	color: #353E4A;
	line-height: 1.2;
}

.callout-small em,
.callout em {
	color: #0E71B8;
	font-style: normal; /* remove italics */
}

.callout h4 {
	font-family: 'Architects Daughter', serif; 
	font-size: 24px;
	color: #353E4A;
}

.h2-thin {  
	letter-spacing: 2px;
	text-transform: uppercase;
}        

.h2-block {  /* About Us, Digital Syles */
	font-size: 16px;
	font-weight: lighter;
	text-align: center;
	text-transform: uppercase;
}   

.h2-large {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18px;
	font-weight: 300;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.font-45 {  /* Index only */
	font-family: 'Fira Sans', sans-serif;
	font-size: 45px; 
	font-weight: 800;
	text-align: center;
	line-height: 1.2;
}

.bilbo {font-family: 'Bilbo', sans-serif;}

.lobster {font-family: 'Lobster', sans-serif;}

.architects {
  font-family: 'Architects Daughter', sans-serif;
  font-size: 1.25em;
}

.pink {color: #eba9ad;}

.font_colour { /* Green check marks */
  color: #000000;
}

.font_colour em { /* Change font colour inside <p> */
  color: #1DBF73;
  font-style: normal; /* remove italics */
}

.highlightme { 
	background-color:#E1F5FE; 
	color:#01579B;
}

.highlightme-grey { 
	background-color:lightgrey; 
	color:#000000;
}

@media screen and (max-width: 500px) {	
	h1 {line-height: 1.2; padding: 10px 0;}
    h2 {font-size: 16px;}
	h3 {line-height: 1.3; margin-bottom: 10px;}
	p {font-size: 1.25em;}
	
	.callout h3 {
	font-size: 60px;
	}
}

span.blockspam {
  display: none;
}

/*----------------------------------------------------------*/
/*                        Signature                         */
/*----------------------------------------------------------*/

.signature-main {
  width: 100%;
  max-width: 600px;
  background-color: #ffff;
  font-family: 'Lato', arial, sans-serif;
  color: #282828;
  box-shadow: 0 0 25px rgba(0, 0, 0, .15);
  text-align: left;
}

.signature {
	width: 100%;
	table-layout: fixed;
	background-color: #F5F5F5;
	padding: 0 0 10px 10px;
}

.signature table {
	width:"100%";
}

.signature table td {
	padding: 0px 0 0 5px; /* Change padding between rows */
}

.signature a {
	font-size: 14px; /* Change text size (not name) */
	border: 0;
	text-decoration: none;
	color: #282828;
}

.signature-name {
	font-size: 16px; /* Change name size */
	color: #282828;
	line-height: 24px; 
	font-weight: 700; 
	padding: 10px 0 0 10px; /* Change name padding */
	text-align: left;
}

.signature-name img {
	padding: 30px 0 8px 20px;
	width: 200px;
	display: block;
	margin-left: auto;
	outline: none;
	position: absolute;
  	top: 0;
}

.signature-email {
	padding: 0;
}



/*----------------------------------------------------------*/
/*                   Sketch highlight                       */
/*----------------------------------------------------------*/

/***** The important stuff *****/
.underline{position: relative;}
.underline:after {
  content: "";
  position: absolute;
  width:100%;
  height: 2.6em;
  left: 0;
  width: 100%;
  z-index:-10;
  background-image: url("https://www.theillustrators.com.au/images/icons/underline.svg");
  background-repeat: no-repeat;	
  background-size: 100% 100%;
}

.sketch-highlight{
  position:relative;
}
.sketch-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:2.8em;
  border-width:2px;
  border-style:solid;
  border-color:red;
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.7;
  border-radius:50%;
  padding:0.1em 0.25em;
}
.sketch-highlight:after{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  padding:0.1em 0.25em;
  border-width:2px;
  border-style:solid;
  border-color:red;
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.7;
  border-radius:50%;
}

@media screen and (max-width: 500px) {	
  .sketch-highlight:before{
    left:-0.5em;
    top:2.5em;
  }
}

/*----------------------------------------------------------*/
/*                  Padding & Centering                     */
/*----------------------------------------------------------*/

.center-text {
	text-align: center;
}

/* Centering a div, realative parent */
.center-all {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

.header-padding {  
	margin-top: 130px;
	margin-bottom: 50px;
}

.margin-top {  /* Index, Contact Us */
	margin-top: 25px;
}

.text-block {   /* H1 text ontop of image  */
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: black;
    color: white;
    padding: 20px;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

@media screen and (max-width: 1100px) {
.header-padding {  
	margin-top: 120px;
	}	
}

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

	.text-block {display: none;}
}

/*----------------------------------------------------------*/
/*                  Buy Now - Caricatures                   */
/*----------------------------------------------------------*/

.my-paypal {
    height: 60px;
}

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  max-width: 1250px;
  margin: 0 auto; 
}

.grid-products > article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}

.grid-products > article img {
  max-width: 100%;
}

.grid-products .text {
  padding: 20px;
  text-align: center;
}

/*----------------------------------------------------------*/
/*                        Hero Slider                       */
/*----------------------------------------------------------*/

.slider-wrapper {
  position: relative;
  max-width: 900px;
  height: 100%;
  margin: 0 auto;
}

.padding-tb {
  padding: 100px 0 30px;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

/* Thumnail images */
.checkbox:checked + label,
.checkbox:not(:checked) + label {
  position: relative;
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  margin-right: 6px;
  margin-left: 6px;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid #bdc3c7;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-image: url("https://www.theillustrators.com.au/images/hero/blue-eyes-thumb.svg");
  animation: border-transform 6s linear infinite alternate forwards;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}
.checkbox.scnd + label {
  background-image: url("https://www.theillustrators.com.au/images/hero/mural-thumb.svg");
}
.checkbox.thrd + label {
  background-image: url("https://www.theillustrators.com.au/images/hero/lendlease-thumb.svg");
}
.checkbox.foth + label {
  background-image: url("https://www.theillustrators.com.au/images/hero/CAT-thumb.svg");
}

.checkbox.fifth + label {
  background-image: url("https://www.theillustrators.com.au/images/hero/afl-thumb.svg");
}

.checkbox.sixth + label {
  background-image: url("https://www.theillustrators.com.au/images/hero/warcraft-thumb.svg");
}

.checkbox:checked + label{
  box-shadow: 0 8px 25px 0 rgba(16,39,112,.3);
  transform: scale(1.3);
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}

.slider-height-padding {
  padding-top: 520px;  /* Space between Images and Thumbnails */
  text-align: center;
}

.slider-list {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  z-index: 1;
  padding: 0;
  margin: 0;
  list-style: none;
  color: #343434;
}

/* Full height images */
.slider-list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  z-index: 1;
  padding: 0;
  margin: 0;
  list-style: none;
  height: 600px;  /* Height of images */
  border: 5px solid #bdc3c7;
  background-size: cover;
  background-position: center;
  background-image: url("https://www.theillustrators.com.au/images/hero/blue-eyes.svg");
  border-radius: 50%;
  box-sizing: border-box;
  color: #343434;
  writing-mode: vertical-rl;
  opacity: 0;
  pointer-events: none;
}
.slider-list li span {
  mix-blend-mode: difference;
  letter-spacing: 2px;
  line-height: 1.5;
}

.white {
	color: #FFFFFF;
	opacity: 1;
}

.slider-list li:nth-child(2) {
  background: url("https://www.theillustrators.com.au/images/hero/mural.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.slider-list li:nth-child(3) {
  background: url("https://www.theillustrators.com.au/images/hero/lendlease.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.slider-list li:nth-child(4) {
  background: url("https://www.theillustrators.com.au/images/caricatures/CAT_6090.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.slider-list li:nth-child(5) {
  background: url("https://www.theillustrators.com.au/images/sports/afl-mascots.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.slider-list li:nth-child(6) {
  background: url("https://www.theillustrators.com.au/images/conceptArt/warcraft-orc.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.checkbox.frst:checked ~ .slider-list li:nth-child(1) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
  margin: 0px;
}
.checkbox.scnd:checked ~ .slider-list li:nth-child(2) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
  margin: 0px;
}
.checkbox.thrd:checked ~ .slider-list li:nth-child(3) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
  margin: 0px;
}
.checkbox.foth:checked ~ .slider-list li:nth-child(4) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
  margin: 0px;
}
.checkbox.fifth:checked ~ .slider-list li:nth-child(5) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
  margin: 0px;
}

.checkbox.sixth:checked ~ .slider-list li:nth-child(6) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
  margin: 0px;
}

@keyframes border-transform{
  0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

@media (max-width: 1550px) {
    .slider-wrapper {
      max-width: 600px;
    }
    .padding-tb {
      padding: 100px 0 15px;
    }
    .slider-height-padding {
      padding-top: 320px;  /* Space between Images and Thumbnails */
      text-align: center;
    }
    .slider-list li {
      height: 400px;  /* Height of images */
    }
}

@media (max-width: 500px) {
  .slider-height-padding {
	padding-top: 220px;
  }
  .slider-list li {
    height: 300px;
  }
}

/*----------------------------------------------------------*/
/*                      Pricing Table                       */
/*----------------------------------------------------------*/

.planContainer {
  display: flex;
  flex-wrap: wrap;
  margin: 1em;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.plan {
  background: white;
  width: 20em;
  box-sizing: border-box;
  text-align: center;
  margin: 1em;
  margin-bottom: 1em;
}

.plan .titleContainer {
  background-color: #f3f3f3;

}
.plan .titleContainer .title {
  	font-family: 'Big Shoulders Text', serif; 
	font-size: 24px;
	font-weight: 800;
	color: #353E4A;
	background-color: #f3f3f3;
  	text-transform: uppercase;
}
.plan .infoContainer {
  padding: 1em;
  color: #2d3b48;
  box-sizing: border-box;
}
.plan .infoContainer .price {
  font-size: 1.35em;
  padding: 1em 0;
  font-weight: 600;
  margin-top: 0;
  display: inline-block;
  width: 80%;
}
.plan .infoContainer .price p {
  font-size: 1.35em;
  display: inline-block;
  margin: 0;
}
.plan .infoContainer .price span {
  font-size: 14px;
  display: inline-block;
}
.plan .infoContainer .desc {
  padding-bottom: 1em;
  border-bottom: 2px solid #f3f3f3;
  margin: 0 auto;
  width: 90%;
}
.plan .infoContainer .desc em {
  font-size: 1em;
  font-weight: 500;
}
.plan .infoContainer .features {
  font-size: 1em;
  list-style: none;
  padding-left: 0;
}
.plan .infoContainer .features li {
  padding: 0.5em;
}
.plan .infoContainer .selectPlan {
  border: 2px solid #1abc9c;
  padding: 0.75em 1em;
  border-radius: 2.5em;
  cursor: pointer;
  transition: all 0.25s;
  margin: 1em auto;
  box-sizing: border-box;
  max-width: 70%;
  display: block;
  font-weight: 700;
}
.plan .infoContainer .selectPlan:hover {
  background-color: #1abc9c;
  color: white;
}

@media screen and (max-width: 25em) {
  .planContainer {
    margin: 0;
  }
  .planContainer .plan {
    width: 100%;
    margin: 1em 0;
  }
}

/*----------------------------------------------------------*/
/*                 Carousel - Book Covers                   */
/*----------------------------------------------------------*/

.bookCover-hero {
  margin-top: 70px;
  background-image: url("https://www.theillustrators.com.au/images/bookCovers/carousel-01b.svg");
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
    max-width: 1250px;
    left: 50%;
    transform: translateX(-50%);
}

.carousel-wrapper {
    position: relative;
    height: 400px;
    max-width: 1250px;
    left: 50%;
    transform: translateX(-50%);
}

.carousel-conceptArt {
    position: relative;
    height: 400px;
    max-width: 1250px;
    left: 50%;
    transform: translateX(-50%);
}

.carousel-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 50px;
    opacity: 0;
}

.arrow {
    position: absolute;
    top: 0;
	padding: 0 10px;
    display: block;
    width: 50px;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: url("https://www.theillustrators.com.au/images/icons/arrow-left.svg") 50% 50% / 40px no-repeat;
	}

.arrow-white {
	position: absolute;
    top: 0;
	padding: 0 10px;
    display: block;
    width: 50px;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  	background: url("https://www.theillustrators.com.au/images/icons/arrow-left-white.svg") 50% 50% / 40px no-repeat;
}

.arrow-prev {
  	left: 0;
}

.arrow-next {
  	right: 0;
  	-webkit-transform: rotate(180deg);
          	transform: rotate(180deg);
}

[id^="design"] {
display: none;
}

.item-1 {
    z-index: 2;
    opacity: 1;
    background-image: url("https://www.theillustrators.com.au/images/bookCovers/carousel-01b.svg");
    background-size: auto 400px;
    background-position: center;
    background-repeat: no-repeat;
}

*:target ~ .item-1 {
opacity: 0;
}

#design-e-book:target ~ .item-1 {  /* E-book Covers */
    opacity: 1;
    background-image: url("https://www.theillustrators.com.au/images/bookCovers/carousel-01b.svg");
    background-size: auto 400px;
    background-position: center;
    background-repeat: no-repeat;
}

#design-paperback:target ~ .item-2 {  /* Paperback book covers */
    z-index: 3;
    opacity: 1;
    background: url("https://www.theillustrators.com.au/images/bookCovers/carousel-02b.svg");
    background-size: auto 400px;
    background-position: center;
    background-repeat: no-repeat;
}

#design-timms:target ~ .item-3 { /* Chris Timms trilogy */
    z-index: 4;
    opacity: 1;
    background: url("https://www.theillustrators.com.au/images/bookCovers/carousel-04.svg");
    background-size: auto 400px;
    background-position: center;
    background-repeat: no-repeat;
}

#design-illustration:target ~ .item-4b { /* Illustrated book covers */
    z-index: 4;
    opacity: 1;
    background: url("https://www.theillustrators.com.au/images/bookCovers/carousel-03b.svg");
    background-size: auto 400px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Concept Art */
.item-4 {
    z-index: 2;
    opacity: 1;
    background-image: url("https://www.theillustrators.com.au/images/conceptArt/carousel-04.svg");
    background-size: auto 400px;
    background-position: center;
    background-repeat: no-repeat;
}

*:target ~ .item-4 {
opacity: 0;
}

#design-gun:target ~ .item-4 {  /* E-book Covers */
    opacity: 1;
    background-image: url("https://www.theillustrators.com.au/images/conceptArt/carousel-04.svg");
    background-size: auto 400px;
    background-position: center;
    background-repeat: no-repeat;
}

#design-statue:target ~ .item-5 {  /* Paperback book coers */
    z-index: 3;
    opacity: 1;
    background: url("https://www.theillustrators.com.au/images/conceptArt/carousel-05.svg");
    background-size: auto 400px;
    background-position: center;
    background-repeat: no-repeat;
}

#design-world:target ~ .item-6 { /* Illustrated book coers */
    z-index: 4;
    opacity: 1;
    background: url("https://www.theillustrators.com.au/images/conceptArt/carousel-06.svg");
    background-size: auto 400px;
    background-position: center;
    background-repeat: no-repeat;
}

@media screen and (max-width: 1250px){
	
	.carousel-wrapper {
        height: 300px;
	}

    .item-1 {
    	background-size: auto 300px;
    }

    #design-e-book:target ~ .item-1, 
    #design-paperback:target ~ .item-2,
	#design-illustration:target ~ .item-3 {
        background-size: auto 300px;
    }
	
	#design-gun:target ~ .item-4, 
    #design-statue:target ~ .item-5,
    #design-world:target ~ .item-6 {
		background-size: 1200px 384px;
	}
}

@media screen and (max-width: 768px){
	
	.carousel-wrapper {
        height: 400px;
	}

    .item-1 {
      background-image: url("https://www.theillustrators.com.au/images/bookCovers/AJ-Cootes-Almythea-small.svg");
      background-size: auto 400px;
      background-position: center;
      background-repeat: no-repeat;
    }

    #design-e-book:target ~ .item-1 {  /* E-book Covers */
        opacity: 1;
        background-image: url("https://www.theillustrators.com.au/images/bookCovers/AJ-Cootes-Almythea-small.svg");
        background-size: auto 400px;
        background-position: center;
        background-repeat: no-repeat;
    }

    #design-paperback:target ~ .item-2 {  /* Paperback book coers */
        z-index: 3;
        opacity: 1;
        background: url("https://www.theillustrators.com.au/images/bookCovers/Blessing-Of-The-Gods-small.svg");
        background-size: auto 400px;
        background-position: center;
        background-repeat: no-repeat;
    }

    #design-illustration:target ~ .item-3 { /* Illustrated book coers */
        z-index: 4;
        opacity: 1;
        background: url("https://www.theillustrators.com.au/images/bookCovers/King-Tides-Curse-small.svg");
        background-size: auto 400px;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 500px){
	
.arrow {
	padding: 0;
	}
}

/*----------------------------------------------------------*/
/*                        Cool Header                       */
/*----------------------------------------------------------*/

.section-header {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.header__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #7288A2; 
  transform: skewY(-6deg);
  transform-origin: top left;
}

.section-header h1 {
  position: relative;
  color: white;
  margin: 0;
  padding-top: 80px;
}

.section-header h2 {
  position: relative;
  color: white;
  margin: 0;
}

/*----------------------------------------------------------*/
/*                    Home Page - Index                     */
/*----------------------------------------------------------*/

.caption {
	text-align: center;
	color: #333;
	padding: 10px 0;
	background: #f5f5f5;
	margin: 0;
	width: 100%;
}

.caption h4 {
	font-size: 18px;
	text-transform: uppercase;
}

#trusted {  /* For Index to allow full width banner */
  top: 0;
  height: 76px;
  background-color: #F5F5F5;
  width: 100%;
}

#trusted .table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}

#trusted ul li {
	display: inline-block;
	list-style: none;
	padding: 2px 15px 0 15px;
	vertical-align: middle;
}

#trusted .trusted-text {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
}

#testimonial {  /* For Index to allow full width banner */
  top: 0;
  height: 300px;
  background-color: #1A2E4B;
  width: 100%;
  text-align: center;
}

#testimonial .table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
	padding-top: 30px;
}

#testimonial ul li {
	display: inline-block;
	list-style: none;
	width: 900px;
	text-align: left;
}

#testimonial .trusted-text {
	font-family: 'Marcellus', sans-serif;
	font-size: 24px;
	color: #FFFFFF;
}

/* Max width banner */
#trusted-small {
  top: 0;
  height: 76px;
  background-color: #F5F5F5;
  max-width: 1250px;
  margin: 0 auto;
}

#trusted-small .table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}

#trusted-small ul li {
	display: inline-block;
	list-style: none;
	padding: 2px 15px 0 15px;
	vertical-align: middle;
}

#trusted-small .trusted-text {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
}

.relative {
	position: relative;
}

.order {
    font-family: 'Architects Daughter', sans-serif;
	font-size: 1.5em;
}

@media screen and (max-width: 920px) {	
    #trusted-small {
      height: 140px;
    }
	
	#trusted-small ul li {
	padding: 8px 15px 8px 15px;
	}
	
	#testimonial .trusted-text {
	font-size: 18px;
	overflow: hidden;
	margin-right: 30px;
	}
	
	#testimonial ul li {
	width: auto;
	}
}

@media screen and (max-width: 800px) {	
    #trusted {display: none;}

}

@media screen and (max-width: 500px) {	
    #trusted-small {
      height: 200px;
    }
}

/*----------------------------------------------------------*/
/*              Hero Images - Sydney, Melb, Bris            */
/*----------------------------------------------------------*/

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  font-size: 0;
}

.hero-item,
.standard-item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.news-item {
  display: inline-block;
  min-height: 400px;
  width: 50%;
}

@supports (display: grid) {
  .news-item {
    width: auto;
    min-height: 0;
  }

  .hero-item {
    grid-column: 1 / span 2;
    grid-row: 1 / 50;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
  }

  .standard-item:nth-child(2) {
    grid-column: 1 / span 1;
    grid-row: 50 / 100;
    -webkit-clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    margin-top: -73px;
  }

  .standard-item:nth-child(3) {
    grid-column: 2 / span 1;
    grid-row: 50 / 100;
    -webkit-clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    margin-top: -73px;
    margin-left: -15%;
    margin-bottom: 18px;
  }

  .standard-item:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 100 / 150;
    -webkit-clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    margin-top: -107px;
  }
}

@media (min-width: 1266px) {
    .wrapper {
      max-width: 1250px;
      margin: 1rem auto;
    }
}

@media screen and (max-width: 500px){
	
	.standard-item {
		display: none;
	}
}

/*----------------------------------------------------------*/
/*                   Hero Images - Murals                   */
/*----------------------------------------------------------*/

.hero-murals,
.standard-murals {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-murals {
  background-image: url("https://www.theillustrators.com.au/images/design/mural_02.svg");
}

.standard-murals:nth-child(2) {
  background-image: url("https://www.theillustrators.com.au/images/design/M_04.svg");
}

.standard-murals:nth-child(3) {
  background-image: url("https://www.theillustrators.com.au/images/design/mural_09.svg");
}

.standard-murals:nth-child(4) {
  background-image: url("https://www.theillustrators.com.au/images/design/mural_04.svg");
}

@supports (display: grid) {
  .hero-murals {
    grid-column: 1 / span 2;
    grid-row: 1 / 50;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
  }

  .standard-murals:nth-child(2) {
    grid-column: 1 / span 1;
    grid-row: 50 / 100;
    -webkit-clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    margin-top: -73px;
  }

  .standard-murals:nth-child(3) {
    grid-column: 2 / span 1;
    grid-row: 50 / 100;
    -webkit-clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    margin-top: -73px;
    margin-left: -15%;
    margin-bottom: 18px;
  }

  .standard-murals:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 100 / 150;
    -webkit-clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    margin-top: -107px;
  }
}

/*----------------------------------------------------------*/
/*                 Hero Images - Concept Art                */
/*----------------------------------------------------------*/

.hero-conceptArt,
.standard-conceptArt {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-conceptArt {
  background-image: url("https://www.theillustrators.com.au/images/hero/portrait-03.svg");
}

.standard-conceptArt:nth-child(2) {
  background-image: url("https://www.theillustrators.com.au/images/conceptArt/concept-art-02.svg");
}

.standard-conceptArt:nth-child(3) {
  background-image: url("https://www.theillustrators.com.au/images/hero/fantasy-01.svg");
}

.standard-conceptArt:nth-child(4) {
  background-image: url("https://www.theillustrators.com.au/images/hero/map-01.svg");
}

@supports (display: grid) {
  .hero-conceptArt {
    grid-column: 1 / span 2;
    grid-row: 1 / 50;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
  }

  .standard-conceptArt:nth-child(2) {
    grid-column: 1 / span 1;
    grid-row: 50 / 100;
    -webkit-clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    margin-top: -73px;
  }

  .standard-conceptArt:nth-child(3) {
    grid-column: 2 / span 1;
    grid-row: 50 / 100;
    -webkit-clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    margin-top: -73px;
    margin-left: -15%;
    margin-bottom: 18px;
  }

  .standard-conceptArt:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 100 / 150;
    -webkit-clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    margin-top: -107px;
  }
}

/*----------------------------------------------------------*/
/*                      Hero Images                         */
/*----------------------------------------------------------*/

.book-covers {
	max-width: 1250px;
	margin: 0 auto;
}

.book-covers img {
	width: 100%;
    height: auto;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.pricing {  /* Pricing article */
  margin-top: 60px;
  background-image: url("https://www.theillustrators.com.au/images/banners/pricing.svg");
  height: 500px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.self-publishing {  /* Self publishing tips article */
  margin-top: 60px;
  background-image: url("https://www.theillustrators.com.au/images/banners/childrens-01.svg");
  height: 414px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.styles {  /* Digital illustration */
  margin-top: 60px;
  background-image: url("https://www.theillustrators.com.au/images/banners/digital-illustration.webp");
  height: 414px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.how-to-publish {   /* How to publish a picture book article */
  margin-top: 60px;
  background-image: url("https://www.theillustrators.com.au/images/banners/childrens-02.svg");
  height: 414px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* separate text from image on mobile  */
.hero-wrapper {
  position: relative;
}

.hero-wrapper .how-to-publish {
  background-image: url("https://www.theillustrators.com.au/images/banners/childrens-02.svg");
}

.hero-wrapper .self-publishing {
  background-image: url("https://www.theillustrators.com.au/images/banners/childrens-01.svg");
}

.hero-wrapper .styles {
  background-image: url("https://www.theillustrators.com.au/images/banners/digital-illustration.svg");
}

.hero-wrapper .pricing {
  background-image: url("https://www.theillustrators.com.au/images/banners/pricing.svg");
}

.separate-text {
  position: absolute;
  top: calc(50% - .5rem);
  left: 0;
  width: 100%;
  z-index: 1;
}

.separate-text h1 {
	line-height: 1.2;
	}

.index-hero {
  margin-top: 60px;
  background-image: url("https://www.theillustrators.com.au/images/banners/the_illustrators_home_.webp");
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;  /* Put the image behind Mobile Nav */
}

.about-us {
  margin-top: 60px;
  background-image: url("https://www.theillustrators.com.au/images/banners/About.svg");
  height: 450px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;  
}

.clients-banner {
  margin-top: 70px;
  background-image: url("https://www.theillustrators.com.au/images/banners/theillustrators-02.svg");
  height: 450px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;  
}

.licensing {
  margin-top: 50px;
  background-image: url("https://www.theillustrators.com.au/images/banners/licensing.svg");
  height: 425px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;  
}

.privacy {
  margin-top: 50px;
  background-image: url("https://www.theillustrators.com.au/images/banners/privacy.svg");
  height: 425px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;  
}

.childrens-books {
  margin-top: 60px;
  background-image: url("https://www.theillustrators.com.au/images/banners/childrens-books-03.svg");
  height: 425px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;  
}
.news {
  margin-top: 50px;
  background-image: url("https://www.theillustrators.com.au/images/banners/news.svg");
  height: 425px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;  
}

.reviews {
  margin-top: 70px;
  background-image: url("https://www.theillustrators.com.au/images/banners/reviews.svg");
  height: 317px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;  
}

.price-guide {
  margin-top: 70px;
  background-image: url("https://www.theillustrators.com.au/images/banners/price-guide.svg");
  height: 414px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;  
}

.price-wrapper { 
	width: 100%;
}

.price-content {
  padding: 20px 0;
  text-align: center;
}

/* Price Heading -------------------------------------------------*/

.outer {
    width: 300px;
    padding: 0;
	position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: black;
    color: white;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
	/* reduce CLS */
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

.index-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  /* reduce CLS */
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
   box-sizing: border-box; 
}

.outer-opacity {
    width: 600px;
    padding: 0;
	position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: black;
    color: white;
	/* reduce CLS */
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

.inner {padding: 20px;}

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

    .index-hero {
      margin-top: 70px;
    }
}

@media screen and (max-width: 700px){
	
    .price-content span {
        display: block;
        padding: 5px 0;
    }	
}

@media screen and (max-width: 500px){
	
	.separate-text {
    	position: relative;
    	color: #000;
  	}
	.separate-text h1 {
		margin-top: 10px;
	}
  	.hero-wrapper .self-publishing, .how-to-publish, .pricing {
  		height: 180px;
  	}
	
	.how-to-publish-img img, .frame img {
  		display: none;
  	}

.frame .banner {
  margin-top: 80px; 
  position: relative;
  background: #000000;
  padding: 10px 0;
}
	
.index-hero,
.about-us,
.clients-banner,
.licensing,
.privacy,
.childrens-books,
.news,
.price-guide {
	  padding: 0;
	  height: 200px;
	}

.outer {
    margin: 0;
    padding: 0;
	width: 100%;
	bottom: 0;
    left: 0;
	right: 0;
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	background-color: transparent;
	color: #000000;
}

.outer-opacity {
    margin: 0;
    padding: 0;
	width: 100%;
	bottom: 0;
    left: 0;
	right: 0;
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	background-color: transparent;
	color: #000000;
}
	
.font-45 {
	font-size: 32px; 
	padding: 0;
	}
	
.index-text {
    padding: 0;
	width: 100%;
	color: white;
}
	
.index-text h2 {display: none;}
	
.inner {padding: 10px 0;}
	
.price-content {
  padding: 10px 0;
  margin: 0;
  text-align: center;
}
	
}

/*----------------------------------------------------------*/
/*                     Heading Book Covers                  */
/*----------------------------------------------------------*/

.boxed {
  color: #000;
  overflow: hidden;
  text-align: center;
  margin: 15px 0;
}
.boxed > span {
  border: 1px solid #cccccc;
  display: inline-block;
  padding: 0.25em 0.5em;
  position: relative;
}
.boxed > span:before,
.boxed > span:after {
  border-bottom: 1px solid #cccccc;
  content: '';
  margin: 0 3px;
  position: absolute;
  top: 50%;
  width: 100%;
}
.boxed > span:before {
  right: 100%;
}
.boxed > span:after {
  left: 100%;
}

/*----------------------------------------------------------*/
/*                   Background colours                     */
/*----------------------------------------------------------*/

.grey {
	background-color: #F5F5F5;
	color: #000000;
}
.light-orange {
	background-color: #ffd8a7;
	color: #000000;
}
.darkGrey {
  	background-color: #1b1b1b;
  	color: #FFFFFF;
}
.green {
	background-color: palegreen;
	color: #000000;
}
.blue { 
	background-color: #2D9AB7;
	color: #FFFFFF;
}

.darkBlue {
	background-color: #1A2E4B;
	color: #FFFFFF;
}

.blue-grey {
	color: #7288A2;
}

.pink-bg {
	background-color: #eba9ad;
    color: #000000;
}

/*----------------------------------------------------------*/
/*                         Section                          */
/*----------------------------------------------------------*/

.border {border: 1px solid #ddd;}

/* Main Section Card  -------------------------------------------------*/
.section-card {
  display: flex;
  position: relative;
  flex-direction: column;
  margin: 15px 0;
  overflow: hidden;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  z-index: 1;
}

.section-card .content {
  padding: 20px 30px;
  position: relative;
}

.animation {
  padding: 15px 10px;
  position: relative;
}

.section-card img {
  padding: 12px;
}

@media (min-width: 1266px) {
    .section-card {
      flex-direction: row;
      max-width: 1250px;
      margin: 1rem auto;
    }
	
    .compact {  /* Clients */
      max-width: 1250px;
      margin: 1rem auto;
    }

    .section-card .content {
      flex-basis: 100%;
    }
}

@media screen and (max-width: 1265px) and (min-width: 700px) {
    .section-card {
      flex-direction: row;
      margin: 15px;
    }
    .section-card .content {
      flex-basis: 100%;
    }
	.compact {
      margin: 15px;
    }
}

@media screen and (max-width: 900px) {
    .video {
 	  display: block;
	  padding-top: 10px;
	  text-align: center;
    }
}

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

	.section-card h3 {
    	text-align: center;
    }
	
    .section-card .content br {
      	display: none;
    }
}

/*----------------------------------------------------------*/
/*                        Our Clients                       */
/*----------------------------------------------------------*/

.box-list {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  position: relative;
  background-color: #F5F5F5;
}

.box li {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box li img {
	padding: 0 20px;
}

.box li p {
  color: #000000;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

.border-box {
  /*border: solid 1px grey; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media (max-width: 999px) {
  .box-list {
    max-width: 800px;
  }
}
@media (max-width: 799px) {
  .box-list {
    max-width: 600px;
  }
}
@media (max-width: 500px) {
  .box li {
    width: 100px;
    height: 100px;
  }
}

/*----------------------------------------------------------*/
/*                       Clients.html                       */
/*----------------------------------------------------------*/

.box-list-clients {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  position: relative;
  background: #F5F5F5;
  padding: 0;
}

.box-clients li {
  width: 200px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-clients li i {
  font-size: 100px;
}

.border-box-clients {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 999px) {
  .box-list-clients {
    max-width: 800px;
  }
}
@media (max-width: 799px) {
  .box-list-clients {
    max-width: 600px;
  }
}
@media (max-width: 599px) {
  .box-list-clients {
    max-width: 400px;
  }
}
@media (max-width: 399px) {
  .box-list-clients {
    max-width: 200px;
  }
}

/*----------------------------------------------------------*/
/*            Reworked Section - Grid Gallery               */
/*----------------------------------------------------------*/

.wrapper__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.grid-4images {
  display: grid;
  max-width: 1250px;
  margin: auto;
  grid-template-columns: repeat(4, 1fr); 
  grid-gap: 1em;
}

.grid-2images {
  display: grid;
  max-width: 1250px;
  margin: auto;
  grid-template-columns: repeat(2, 1fr); 
  grid-gap: 1em;
}

.grid-5images {
  display: grid;
  max-width: 1250px;
  margin: auto;
  grid-template-columns: repeat(5, 1fr); 
  grid-gap: 1em;
}

.grid-index {
  display: grid;
  max-width: 1250px;
  margin: auto;
  grid-template-columns: repeat(4, 1fr); 
  grid-gap: 1em;
}

.wrapper-index {
  position: relative;
  height: 0;
  padding-top: calc(270 / 300 * 100%);
}

.wrapper-landscape {
  position: relative;
  height: 0;
  padding-top: calc(212 / 300 * 100%);
}

.wrapper-spread {
  position: relative;
  height: 0;
  padding-top: calc(212 / 424 * 100%);
}

.wrapper-portrait {
  position: relative;
  height: 0;
  padding-top: calc(415 / 300 * 100%);
}

.wrapper-comic {
  position: relative;
  height: 0;
  padding-top: calc(424 / 300 * 100%);
}

.wrapper-ebook {
  position: relative;
  height: 0;
  padding-top: calc(450 / 300 * 100%);
}

.wrapper-paperback {
  position: relative;
  height: 0;
  padding-top: calc(217 / 300 * 100%);
}

.wrapper-square {
  position: relative;
  height: 0;
  padding-top: calc(300 / 300 * 100%);
}

.wrapper-index img,  
.wrapper-portrait img,  
.wrapper-comic img,  
.wrapper-ebook img,
.wrapper-square img, 
.wrapper-spread img,
.wrapper-landscape img,
.wrapper-paperback {
	width: 100%;  
    height: 100%;  
    object-fit: cover; 
}

/* Reworked Page Sections -------------------------------------------------*/

.section__image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
}

.wrapper-andrew {
  position: relative;
  height: 0;
  padding-top: calc(323 / 250 * 100%);
}

/* Only for Children's Books edge-to-edge */
.wrapper-section {
  position: relative;
  height: 0;
  padding-top: calc(225 / 250 * 100%);
}

.grid-top {
    display: grid;
    max-width: 1250px;
    margin: auto;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 322px;
    grid-gap: 1em;
    color: #24292e;
	overflow: hidden;
}

.grid-section {
    display: grid;
    max-width: 1250px;
    margin: auto;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 225px;
    grid-gap: 1em;
    color: #24292e;
	overflow: hidden;
}

.grid-review {
    display: grid;
    max-width: 1250px;
    margin: auto;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 300px;
    grid-gap: 1em;
    color: #24292e;
	overflow: hidden;
}

.grid-review h3 {
	font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif';
}

.grid-review h2 {
	text-align: left;

}

.grid-noImage {
    display: grid;
    max-width: 1250px;
    margin: auto;
    grid-template-columns: 1fr;
	overflow: hidden;
}

.content-noImage {
	padding: 20px;
}

.grid-testimonals {
    display: grid;
    max-width: 1200px;
    margin: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 420px;
	overflow: hidden;
}

.content-top {
	margin: 50px 30px 0 0;
}

/* Only for Children's Books edge-to-edge */
.content-section {
	margin: 20px 30px 0 0;
}

.content-review {
	margin: 20px 30px 20px 30px;
}

@media screen and (max-width: 1250px) {
    .grid-index,
	.grid-2images,
	.grid-4images,
	.grid-5images,
	.grid-top,
	.grid-section {
		margin: 0 15px;
	}
}

@media screen and (max-width: 1050px) {
    .grid-testimonals {
        grid-template-columns: 1fr;
        grid-template-rows: 420px 420px;
		align-items: center;
   		justify-items: center;
    }
}

@media screen and (max-width: 900px) {
    .grid-5images,
	.grid-4images { 
        grid-template-columns: repeat(2, 1fr); 
        margin: 0 15px;
     }
	
    .grid-4images img { 
        width: 100%;
    }
	
	.grid-index {
	  	grid-template-columns: repeat(2, 1fr); 
		grid-template-rows: auto auto;
		grid-row-gap: 50px;

	}

    .grid-top {
        grid-template-columns: 1fr; 
        grid-template-rows: 300px 265px;
        padding: 15px 0 0 15px;
    }
	
	.grid-section {
        grid-template-columns: 1fr; 
        grid-template-rows: 225px 250px;
        padding: 15px 0 0 15px;
    }
	
	.content-top {
		margin: 0 auto;
	}
	
	.section__image {
		margin-bottom: 20px;
		left: 50%;
		margin-left: -130px;
	}
	
	.grid-testimonals {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
		padding: 15px 0 15px 5px;
    }
}

@media screen and (max-width: 500px) {
	.grid-4images { 
		grid-template-columns: repeat(1, 1fr); 
		margin: 0 10px;
	}
	
	.grid-2images { 
		grid-template-columns: repeat(1, 1fr); 
		margin: 0 10px;
	}
	
	.grid-5images { 
		grid-template-columns: repeat(1, 1fr); 
		margin: 0 10px;
	}
	
    .grid-top { 
        grid-template-columns: repeat(1, 1fr); 
        grid-template-rows: 300px auto;
        margin: 0 10px;
        padding: 15px 0 15px 5px;
     }

    .grid-section { 
        grid-template-columns: repeat(1, 1fr); 
        grid-template-rows: 225px auto;
        margin: 0 10px;
        padding: 15px 0 15px 5px;
     }
	
	.grid-testimonals {
		padding: 15px 0;
    }
}

/* Full width section -------------------------------------------------*/
.section-blue {  /* Children's Books & Jobs */
	margin-top: 70px; 
	padding: 70px 0;
	background-color: #2D9AB7; 
	color: #FFFFFF;
	display: block; /* correct position for background */
}

.section-wrapper {
  display: flex;
  align-items: center; /* flex-start will push the text up a bit */
  justify-content: flex-start;
  margin: 0 auto;
  max-width: 1920px;
}

.section-content {
  flex: 0 1 66%;
  text-align: left;
}

.faq-wrapper {
  display: flex;
  align-items: center; /* flex-start will push the text up a bit */
  justify-content: center;
  margin: 0 auto;
  max-width: 1920px;
}

.faq p {
	padding: 0 20px;
	text-align: left;
	line-height: 1.8em;
}

.section-noImage {
  flex: 0 1 auto;
  margin: 20px 100px 40px;
}

.section-noImage a {
	font-family: 'Source Sans Pro', sans-serif;
}

.image-border img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
}

@media screen and (max-width: 500px) {
    .section-wrapper {
        display: block;
        text-align: center;
    }
    .section-content {padding: 15px;}
    .section-noImage {
      margin: 0px;
      padding: 15px;
      display: block;
    }
    .faq-wrapper {
        display: block;
        text-align: center;
    }
    .faq p {padding: 5px;}
	
    video {
      width: 450px;
      height: 253px;
	  margin: 0 auto;
	}
}

/*----------------------------------------------------------*/
/*                      Box Shadows                         */
/*----------------------------------------------------------*/

.shadow {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 
	0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.shadowLight {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.shadowMedium {
	box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

.shadowSharp {
  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 
              0 2px 2px rgba(0,0,0,0.20), 
              0 4px 4px rgba(0,0,0,0.15), 
              0 8px 8px rgba(0,0,0,0.10),
              0 16px 16px rgba(0,0,0,0.05);
}

.shadowDreamy {
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

@media screen and (max-width: 500px) {
   .shadow {box-shadow: none;}
}

/*----------------------------------------------------------*/
/*                   4 Column Gallery                       */
/*----------------------------------------------------------*/

.fourColumn-container {
  position: relative;
  text-align:center; /*this will center the containers*/
  min-height: 300px;
  max-width: 1250px;
  margin: 0 auto;
}

/* Create three equal columns that floats next to each other */
.four-images {
  float: left;
  width: 24%;
  margin: 0.5%;
}

.fourColumn-row {
  margin: 0px;
  padding: 10px; /*Padding around outside of images*/
}

/* Clear floats after the columns */
.fourColumn-row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 1500px) {
    .fourColumn-container {
        min-height: 200px;
    }
}

@media screen and (max-width: 900px) {
    .four-images {
        width: 49%;
        margin: 0.5%;
    }
}

@media screen and (max-width: 414px) {
   .four-images {
      padding: 20px 0;
      width: 100%;
    }
}

/*----------------------------------------------------------*/
/*                     Image Gallery                        */
/*----------------------------------------------------------*/

.clients {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.125);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.125);
  box-shadow: 0 0 10px rgba(0,0,0,0.125);
}

.clients img {
   padding: 10px 20px;
}

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

    .clients {
      	display: block;
      	text-align: center;
    	}
}

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

	.clients {display: none;}
}

/*----------------------------------------------------------*/
/*              Childrens Book Illustrator                  */
/*----------------------------------------------------------*/

.icon-wrapper {
    position: relative;

}

.bee {
  background: transparent url(https://www.theillustrators.com.au/images/icons/bee-01.svg) scroll no-repeat 0 0;
  background-size: cover;
  width: 150px;
  height: 95px;
  position: absolute;
  display: block;
  top: -30px;
  left: 80px;
  z-index: 1;
}

.bunny {
  background: transparent url(https://www.theillustrators.com.au/images/icons/bunny.svg) scroll no-repeat 0 0;
  background-size: cover;
  width: 100px;
  height: 111px;
  position: absolute;
  display: block;
  top: -100px;
  left: 200px;
}

.flowers {
  background: transparent url(https://www.theillustrators.com.au/images/sectionBanners/flowers.svg) scroll no-repeat 0 0;
  background-size: cover;
  width: 400px;
  height: 382px;
  position: absolute;
  display: block;
  bottom: -80px;
  right: -40px;
  z-index: -1;
}

.business {
	
  background-image:  linear-gradient(to right, white 15%,rgba(255,255,255,0) 94%),
                    url('https://www.theillustrators.com.au/images/sectionBanners/business.svg');
  background-size: cover;
  width: 500px;
  height: 355px;
  position: absolute;
  display: block;
  bottom: -50px;
  right: -70px;
  z-index: -1;
}

.logan {
  background: transparent url(https://www.theillustrators.com.au/images/sectionBanners/logan-big.svg) scroll no-repeat 0 0;
  background-size: cover;
  width: 700px;
  height: 481px;
  position: absolute;
  display: block;
  bottom: 15px;
  right: 70px;
  opacity: 0.5;
  z-index: 1;
}

.paint {
  background: transparent url(https://www.theillustrators.com.au/images/sectionBanners/paint.svg) scroll no-repeat 0 0;
  background-size: cover;
  width: 500px;
  height: 200px;
  position: absolute;
  display: block;
  bottom: -80px;
  right: -30px;
  z-index: -1;
}

.dragon {
  background: transparent url(https://www.theillustrators.com.au/images/sectionBanners/dragon.svg) scroll no-repeat 0 0;
  background-size: cover;
  width: 500px;
  height: 271px;
  position: absolute;
  display: block;
  bottom: -120px;
  right: -20px;
  z-index: -1;
}

.sword {
  background: transparent url(https://www.theillustrators.com.au/images/sectionBanners/sword-02.svg) scroll no-repeat 0 0;
  background-size: cover;
  width: 500px;
  height: 106px;
  position: absolute;
  display: block;
  bottom: -50px;
  right: -20px;
  z-index: -1;
}

.funny {
  background: transparent url(https://www.theillustrators.com.au/images/sectionBanners/funny.svg) scroll no-repeat 0 0;
  background-size: cover;
  width: 500px;
  height: 372px;
  position: absolute;
  display: block;
  bottom: -80px;
  right: -40px;
  opacity: 0.6;
  z-index: -1;
}

.hedgehog {
  background: transparent url(https://www.theillustrators.com.au/images/icons/hedgehog.svg) scroll no-repeat 0 0;
  background-size: cover;
  margin: 0 auto;
  width: 150px;
  height: 144px;
  position: relative;
  display: block;
}

.note {
	color:#333;
	position:relative;
	line-height: 1.5;
	height:auto;
	margin:0 auto;
	padding:2vmin 2vmin 1vmin 2vmin;
	box-shadow:0 10px 10px 2px rgba(0,0,0,0.3);
	width:100%;
	z-index:1;
	border:none;
	border-bottom-right-radius: 50% 15%	;
	background: linear-gradient(165deg, transparent 40%, rgba(0,0,0,0.15) 80%, rgba(255,255,255,0.15) 90%,rgba(255,255,255,0.15) 100%);
  	background-color:#ffffa5; /* Place after background to set paper color */

   /* Add a thin border gradient to give a lit 3d effect to paper */
	border-top: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
	
	border-image: linear-gradient(to bottom right, rgba(255,255,255,0.75) 30%, rgba(0,0,0,0.25) 60%, transparent 80%);
	border-image-slice: 1;
}

.note p {
	font-family: 'Architects Daughter', cursive;
  	font-size: 18px;
}

.misc {
  width:400px;
  height:300px;
  margin:50px auto;
  float:0;
  position:relative;
  left:50%;
  margin-left:-200px;
}


.notepaper {
  position: relative;
  float: left;
  margin: 30px 50px;
  padding: 29px 20px 20px 45px;
  width: 500px;
  line-height: 30px;
  color: #6a5f49;
  text-shadow: 0 1px 1px white;
  background-color: #f2f6c1;
  background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -moz-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -o-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  border: 1px solid #c3baaa;
  border-color: rgba(195, 186, 170, 0.9);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);
}

.notepaper:before, .notepaper:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
}

.notepaper:before {
  left: 28px;
  width: 2px;
  border: solid #efcfad;
  border-color: rgba(239, 207, 173, 0.9);
  border-width: 0 1px;
}

.notepaper:after {
  z-index: -1;
  left: 0;
  right: 0;
  background: rgba(242, 246, 193, 0.9);
  border: 1px solid rgba(170, 157, 134, 0.7);
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

.quote {
  font-family: Georgia, serif;
  font-size: 16px;
}

.curly-quotes:before, .curly-quotes:after {
  display: inline-block;
  vertical-align: top;
  height: 30px;
  font-size: 50px;
  opacity: .2;
}

.curly-quotes:before {
  content: '\201C';
  margin-right: 4px;
  margin-left: -8px;
}

.curly-quotes:after {
  content: '\201D';
  margin-left: 4px;
  margin-right: -8px;
}

.quote-by {
  display: block;
  padding-right: 10px;
  text-align: right;
  font-size: 13px;
  font-style: italic;
  color: #84775c;
}

@media screen and (max-width: 1300px) {
		
	#wrapper {
		display: block;
		padding: 0 50px;
	}
	
	.notepaper {
		display: inline-block;
		float: none;
		margin: 30px 20px;
	}
}

.bubble {
  background: #FFFFFF;
  margin: 0 auto;
  width: 300px;
  padding: 20px;
  text-align: center;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px ;
  border-radius: 10px;
}

.bubble:after {
  content: "";
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px ;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  bottom: -10px;
  left: 50px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #FFF #FFF transparent;
}

@media screen and (max-width: 900px) {
	.notepaper {
		margin: 30px 10px;
		padding: 15px 10px 10px 15px;
	}
	
	.logan,
	.flowers,
	.dragon {
    	display: none;
	}
}
	
@media screen and (max-width: 500px) {
	.notepaper {
  		display: inline-block;
  		margin: 10px;
  		padding: 15px 10px 10px 15px;
  		width: 350px;
	}
}

/*----------------------------------------------------------*/
/*                     Contact Form                         */
/*----------------------------------------------------------*/

/* Container holding the image and the text */
.contact-form {
    position: relative;
	margin-top: 60px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
    text-align: center;
}

.contact-quote {
    position: absolute;
    top: 100px;
    right: 30px;
}

/* Contact Us banner */
 .contact-banner {
    background-image: url("https://www.theillustrators.com.au/images/banners/contact-us-banner.webp"); 
    height: 600px;
    width: 100%;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	position: relative;
  	z-index: -1;  
  }

/* Easter banner */
 .holiday-banner {
    background-image: url("https://www.theillustrators.com.au/images/banners/Easter.svg"); 
    height: 600px;
    width: 100%;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	position: relative;
  	z-index: -1;  
  }

/* Christmas banner */
 .christmas-banner {
    background-image: url("https://www.theillustrators.com.au/images/banners/Christmas.svg"); 
    height: 600px;
    width: 100%;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	position: relative;
  	z-index: -1;  
  }

.contact-left {
	position:absolute;
  	top: 15px;
 	left: 25px;
	color:#000000;
  	text-align: left;
}

.contact-right {
	position:absolute;
    float:right;
	clear:right;
	text-align: left;
	top: 50px;
    right: 25px;
    max-width: 308px;
    padding: 0 15px 15px 0; /* Padding inside contact form */
	color: #000000;
    background: #FFFFFF;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 
	0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.contact-right h3 {
	text-align: center;
}

/* Full-width input fields */
input[type=text], input[type=email] {
    width: 290px;
    padding: 15px 0px 15px 10px; /* Padding inside text box */
    margin: 10px 0;
    background: #f1f1f1;
    border: 1px solid #ccc; /* Gray border */
}

input[type=text]:focus, input[type=email]:focus {
 	background-color: #f1f1f1;
}

/* Set a style for the submit button */
.btn {
    background-color: #2196F3;
    color: white;
    padding: 16px 5px;
    border: none;
    cursor: pointer;
    width: 300px;
    opacity: 0.9;
}

.btn:hover {
    opacity: 1;
	background-color: #3CB371;
}

@media screen and (max-width: 700px){
    .contact-left {
        position: relative;
		margin: 20px 20px 30px;
		padding: 0;
    }
	
	.contact-quote {display: none}

    .contact-right { 
        position: relative;
		float: none;
		box-shadow: none;
		margin-top: 100px;
		top: 0;
		right: 0;
		max-width: 100%;
    }
	
	input[type=text], input[type=email] {
        width: 100%;
        padding: 12px 3px;
        margin: 10px 0;
    }

    .contact-banner {
        display:none;
    }
	
	.btn {
    width: 100%;
	}
}

/*----------------------------------------------------------*/
/*                          Thanks                          */
/*----------------------------------------------------------*/

.thanks-container {
	position: relative;
	height: 100%;
	background-color: #2D9AB7;
	color:#fff;
	text-align: center;
}

.thanks-container img {
	display: block;
    width: 100px;
	margin:0 auto;
	text-align: center;
}

.thanks-text {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.terms-container {
	position: relative;
	height: 700px;
	background-color: #2D9AB7;
	color:#fff;
	text-align: center;
}

.terms-text {
 	width: 80%;
    margin: 0 auto;
    text-align: left; /* Ensures text is left-aligned within the centered container */
}

@media screen and (max-width: 600px) {
    .terms-container {
		margin-top: 50px;
    }
}

@media screen and (max-width: 500px) {
    .terms-container {
		margin-top: 50px;
		height: 900px;
    }
}


/*----------------------------------------------------------*/
/*                    Mobile Navigation                     */
/*----------------------------------------------------------*/

@media screen and (max-width: 1100px){
	
#desktop-nav{display: none;}
	
#mobile-nav {  /* top mobile nav */
  display: inline-block;
  background-color: #1B1B1B;
  width: 100%;
  height: 75px;
  top: 0;
  position: fixed;
  z-index: 10;
  }
	
.mobile-logo {  
  padding: 18px 0 0 15px;
}
	
.contact-mobile {
	font-family: 'Open Sans', sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0px;
	margin-top: 0px;
	margin-right: 100px;
	float: right;
}
	
.nav-btn {
	position:fixed;
	top:24px; /* moves the Hamburger */
	right:20px;
	z-index:3;
	height:33px;
	width:33px;
  	cursor:pointer;
	}

.nav-btn span {
	display:block;
	height:4px;
	background: white; 
	margin-bottom:7px;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	transition:all .5s ease;
	border-radius:4px;
	}
	
.menu-list {
	width:0;
	height:0;
	background:#1B1B1B;
	position:fixed;
	z-index:2;
	top:0;
	right:0;
	
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0));
	transform: scale(0);
	
	-webkit-opacity:0;
	-moz-opacity:0;
	opacity:0;
	
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	transition:all .5s ease;
	}
	
.menu-list a {
	display:block;
	color:#fff;
	text-align:center;
	padding:20px 0;
	border-bottom:1px solid rgba(255,255,255,.2);
	}
	
.menu-list a:visited {
  color: #FFFFFF;
}

#menu-open {
	display:none;
	}

#menu-open:checked+.menu-list {
	width:100%;
	height:100%;
	
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
	-webkit-opacity:1;
	-moz-opacity:1;
	opacity:1;
	}

#menu-open:checked~.nav-btn span:first-child {
	margin-top:11px;
	-moz-transform: rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
	background:#fff;
	}

#menu-open:checked~.nav-btn span {
	margin-top:-11px;
	-moz-transform: rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	background:#fff;
	}

#menu-open:checked~.nav-btn span:last-child {
	opacity:0;
	}
}

@media screen and (max-width: 500px) {
	.contact-mobile {display: none}
}

/*----------------------------------------------------------*/
/*                   Desktop Navigation                     */
/*----------------------------------------------------------*/

#desktop-nav {
  top: 0;
  height: 76px;
  background-color: #1B1B1B;
  width: 100%;
  position: fixed;
  z-index: 10;
}

#desktop-nav .logo {
  display: block;
  float: left;
  text-decoration: none;
  padding: 18px 0 0 15px;
}

.contact {
	font-family: 'Open Sans', sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0px;
	margin-top: 20px;
	margin-right: 15px;
	margin-left: 10px;
	float: right;
}

.moveimage {
    position: relative;
    top: 3px;
	z-index: 1;
}

.dropdown {  /* Header Dropdown - WHAT WE DO */
  float: right;
  overflow: hidden;
  margin-top: 11px;
  padding: 0;
}
.dropdown .dropbtn {  /* Dropdown button */
  margin-bottom: 5px; /* Increase space between Heading and Box */
  padding: 0;
  height: 60px;  /* Increase "Styles" box and hover space */
  text-transform: uppercase;
  border: none;
  outline: none;
  color: #FFFFFF; /* Heading text color */
  background: #1B1B1B;
}

.navfonts {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight:400;
  letter-spacing: 2px;
  line-height: 1; /* Moves the box downwards */
  text-transform: uppercase;
}

.menu {   /* Headers: Contact Us, Portfolio */
  clear: both;
  margin-top: 34px;
  list-style:none;
  overflow: hidden;
}

#desktop-nav li a {  /* Contact Us, Portfolio */
  padding: 0px 28px 0px 0px; /* Larger click area? */
  display: block;
  text-decoration: none;
  color: #FFFFFF; /* Color nav text */
}

#desktop-nav li a:hover,
#desktop-nav .menu-btn:hover {
  color: #2196F3;
}

.dropdown .dropbtn:hover {
  color: #2196F3;    
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Dropdown content - 6 item box (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background: #333333;
  width: 200px;
  padding-top: 10px;
  margin-top: 0px; /* Moves the Dropdown Box - don't use this */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  font-family: 'Source Sans Pro', sans-serif;
  text-transform: uppercase;
  font-size: 14px; 
  font-weight: 300;
  letter-spacing: 1px;
  float: none;
  padding: 5px 18px;
  display: block;
  text-align: left;
  text-decoration: none;
}

.dropdown-content a:visited {
  color: #9B9B9B;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  color: #FFFFFF;
}

/* visited link */
.dropdown-content a:active {
  text-decoration: none;
}

/* Sytles drowdown box */
.dropdown-column {
  float: left;
  width: 100%;
  height: 290px; /* Change the size of Sytles drowdown box */
}

.dropdown-column a {
  float: none;
  color: #9B9B9B;  /* change color of dropdown text */
  display: block;
  text-align: left;
}

@media (min-width: 48em) {
	
  #desktop-nav li {
    float: left;
  }
	
  #desktop-nav .menu {
    clear: none;
    float: right;
    max-height: none;
  }
}

/*----------------------------------------------------------*/
/*                         Hyper Links                      */
/*----------------------------------------------------------*/

a:link, a:visited { 
    text-decoration: none;
    cursor: pointer;
}
a:link:active, a:visited:active { 
    color: #2196F3;
}
a:hover {
	text-decoration: none;
	cursor: pointer;
}
.link_black a:link {  /* unvisited BLACK */
    color: #000000;
}
.link_black a:visited {  /* visited link */
    color: #000000;
}
.link_black a:hover {   /* mouse over link */
	color: #2196F3;
    text-decoration : none;
}
.link_black a:active {   /* selected link */
    color: #2196F3;
}
.link_white a:link {   /* unvisited WHITE */
    color: #FFFFFF;
}
.link_white a:visited {   /* visited link */
    color: #FFFFFF;
}
.link_white a:hover {   /* mouse over link */
	color: #2196F3;
    text-decoration : none;
}
.link_white a:active {   /* selected link */
    color: #2196F3;
}

.link_grey a:link {   /* unvisited WHITE */
    color: #b8b8b8;
}
.link_grey a:visited {   /* visited link */
    color: #b8b8b8;
}
.link_grey a:hover {   /* mouse over link */
	color: #2196F3;
    text-decoration : none;
}
.link_grey a:active {   /* selected link */
    color: #2196F3;
}

.link_blue a:link, a:visited {   /* unvisited BLUE */
    color: #2196F3;
	text-decoration : none;
}
.link_blue a:link:active, a:visited:active {   /* selected link */
    color: #2196F3;
}
.link_blue a:hover {  /* mouse over link */
	color: #2196F3;
    text-decoration : none;
    opacity: 0.7;
    filter: Alpha(opacity=70); /* IE8 and earlier */
}
.link_whiteBlack a:link {   /* unvisited WHITE */
    color: #FFFFFF;
}
.link_whiteBlack a:visited {   /* visited link */
    color: #FFFFFF;
}
.link_whiteBlack a:hover {   /* mouse over link */
	color: #000000;
    text-decoration : none;
}
.link_whiteBlack a:active {   /* selected link */
    color: #000000;
}

/*----------------------------------------------------------*/
/*                      Sitemap                             */
/*----------------------------------------------------------*/

.container-accordion {
  max-width: 45em;
  position: relative;
  margin: 2em auto;
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
  box-shadow: rgba(165, 165, 165, 0.3) 0 0 77px;
}

.container-accordion {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container-accordion h3 {
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1.2;
}

label {
  display: block;
  overflow: hidden;
}

.title {
  padding: 1em 3em;
  position: relative;
  background: #fbfbfb;
  border-bottom: 1px solid #eee;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.title:hover {
  cursor: pointer;
  background: #f5f5f5;
}

.accordion-content {
  position: relative;
  padding: 0;
  max-height: 0px;
  border-bottom: 1px solid #eee;
  -webkit-transition: max-height 0.3s linear;
  -moz-transition: max-height 0.3s linear;
  transition: max-height 0.3s linear;
}
.accordion-content p {
  position: relative;
  padding: 1.2em 3em;
  margin: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all 0.55s ease;
  -moz-transition: all 0.55s ease;
  transition: all 0.55s ease;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .title {
  background: #2D9AB7;
  color: #FFFFFF;
}

input[type="checkbox"]:checked + .title + .accordion-content {
  max-height: 555px;
}

input[type="checkbox"]:checked + .title + .accordion-content p {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

/*----------------------------------------------------------*/
/*                         Cards                            */
/*----------------------------------------------------------*/

.cards-index,
.cards-books,
.cards-portrait,
.cards-300,
.cards-landscape {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.cards-index img {
  height: 270px;
  width: 300px;
  vertical-align: middle;
}

.cards__item {  /* Index & Portfolio  */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto; 
  margin: 15px 10px 15px 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.cards-300 img {
  height: 300px;
  width: 300px;
  vertical-align: middle;
  display: block;
}

/* Book Cover images 300x450 -----------------------------------------------*/
.cards-books img {
  height: 450px;
  width: 300px;
  vertical-align: middle;
}

/* Portrait images 300x416 -------------------------------------------------*/
.cards-portrait img {
  height: 416px;
  width: 300px;
  vertical-align: middle;
}

/* Landscape images 300x212 -------------------------------------------------*/
.cards-landscape img {
  height: 212px;
  width: 300px;
  vertical-align: middle;
}

/* Gallery cards -------------------------------------------------*/
.cards-416,
.cards-212 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto; 
  margin: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.cards-212 img {
  height: 212px;
  width: 300px;
  vertical-align: middle;
  display: block;
}

.cards-416 img {
  height: 416px;
  width: 300px;
  vertical-align: middle;
  display: block;
}

/*----------------------------------------------------------*/
/*                   Portfolio / Styles                     */
/*----------------------------------------------------------*/
	
#portfolio-character, #portfolio-advertising, #portfolio-books, #portfolio-caricature, #portfolio-childrens, #portfolio-events, #portfolio-fantasy, #portfolio-fashion, #portfolio-fineart, #portfolio-comic, #portfolio-maps, #portfolio-quirky, #portfolio-murals, #portfolio-portraits, #portfolio-retro, #portfolio-sports, #portfolio-trucks, #portfolio-painterly, :before{
    padding-top: 80px;
    margin-top: -80px;
	}

#top {
	padding-top: 10px;
    margin-top: -10px;
}

.portfolio-section {
	max-width: 950px; /* 1100px with 2 more categories */
	margin: 0 auto;
	text-align: center;
}

.button-portfolio {
  background-color: #f2f2f2;
  background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
  border: 1px solid #bfbfbf;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #8c8c8c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  padding: 9px 16px 9px;
  margin: 16px 0 0 16px;
  transition: all 20ms ease-out;
  vertical-align: top;
}
.button-portfolio:hover, .button-portfolio:focus {
  background: #f2f2f2;
  border-color: #8c8c8c;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}
.button-portfolio:active {
  background: #f2f2f2;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.button-portfolio:visited {
  color: #8c8c8c;
}

/* Back to the top button -------------------------------------------------*/
#top-button {
  display: block;
  position: fixed;
  border-radius: 5px;
  width: 45px;
  height: 45px;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px; 
  text-align: center;
  border: none;
  color: #FFFFFF; 
  background-color: #000000;
  cursor: pointer;
  bottom: 15px;
  right: 15px;
  z-index: 1;
}

#top-button:hover {
  opacity: 0.8; 
}

#top-button:active {
	background-color: #000000;	
}

/*----------------------------------------------------------*/
/*                Digital Illustration Styles               */
/*----------------------------------------------------------*/
	
#anime, #caricature, #cartoon, #childrens, #comics, #commercial, #concept, #fantasy, #fashion, #fineart, #retro, #realism, #lineart, :before{
    padding-top: 50px;
    margin-top: -50px;
	}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

.frame {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.frame img {
  width: 100%;
  margin-top: 60px;
  display: block;
  vertical-align: bottom;
}

.frame .banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 0;
  display: block;
  background: rgba(0, 0, 0, 0.5);
  margin: 0;
  color: #fff;
  text-align: center;
}

/*----------------------------------------------------------*/
/*                        Buttons                           */
/*----------------------------------------------------------*/

.button_nav {  /* Main button */
	border-radius: 0px; /* rounded corners */
	text-decoration: none;
    text-align: center;
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
	font-weight:400;
	padding: 15px 10px; /* first input changes height of button */
	text-transform: uppercase;
    letter-spacing: 2px;
    -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
    cursor: pointer;
}

.button_nav.white {  /* button formatting */
	float: right;
    width: 160px;
	margin: 22px 20px 0px 20px;
	color: #FFFFFF;
	background-color: #1B1B1B; 
    border: 2px solid #FFFFFF; /* Border color */
} 

.button_nav.white:hover {    
	background-color: #FFFFFF;
	color: #000000;
	border: 2px solid #FFFFFF /* Border color */
}

.button {  /* Main button */
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
    width: 100px;
	line-height: 1.5;
	border-radius: 4px; /* rounded corners */
    padding: 10px 32px; /* first input changes height */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
	background-color: #fff;
}

.button-price {  
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-weight: 300;
    width: 100px;
	line-height: 1.5;
	border-radius: 4px; /* rounded corners */
    padding: 10px 32px; /* first input changes height */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
	margin-left: 0px;  
	background-color: #fff; 
    color: #008CBA; 
    border: 1px solid #008CBA; /* Border color */
}

.button-price:hover {    /* Hover for Template */
	background-color: #008CBA;
	color: #fff;
	text-decoration : none;
}

.button.left {  /* button to replace "ONE" when image is small */
	margin-left: 0px;  /* give some space on left */
	background-color: #fff; 
    color: #008CBA; 
    border: 1px solid #008CBA; /* Border color */
} 

.button.left:hover {    /* Hover for Template */
	background-color: #008CBA;
	color: #fff;
	text-decoration : none;
}

.button.center {  
  	display: block;
  	margin: 0 auto;
	background-color: #fff; 
    color: #008CBA; 
    border: 1px solid #008CBA; /* Border color */
} 

.button.center:hover {    /* Hover for Template */
	background-color: #008CBA;
	color: #fff;
	text-decoration : none;
}

/* Second button, used in a Row */
.button.right {
	margin-left: 20px;  /* give some space on left */
	background-color: #fff; 
    color: #008CBA; 
    border: 1px solid #008CBA; /* Border color */
} 

.button.right:hover {    /* Hover for Template */
	background-color: #008CBA;
	color: #fff;
	text-decoration : none;
}

/* red button, used in a Row */
.button.red {
	margin-left: 20px;  /* give some space on left */
	background-color: #D90416; 
    color: #FFFFFF; 
    border: 1px solid #D90416; /* Border color */
} 

.button.red:hover {    /* Hover for Template */
	background-color: #000000;
	color: #fff;
	border: 1px solid #000000; /* Border color */
	text-decoration : none;
}

.button-childrens {  /* Main button */
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
    width: 100px;
	line-height: 1.5;
	border-radius: 4px; /* rounded corners */
    padding: 10px 32px; /* first input changes height */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
	background-color: #fff;
}

.button-childrens.styling {  
	margin-right: 10px; 
	background-color: #fff; 
    color: #008CBA; 
    border: 1px solid #008CBA; /* Border color */
} 

.styling:hover {    /* Hover for Template */
	background-color: #008CBA;
	color: #fff;
	text-decoration : none;
}


@media screen and (max-width: 800px) {
	
.button {  /* Main button */
	display: block;
    width: 80%;
    padding: 12px 32px; /* first input changes height */
}
	
.button.left {
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
}
.button.right {
	margin-top: 16px;
	margin-left: auto;
	margin-right: auto;
}
}

@media screen and (max-width: 500px) {
	
.button-childrens {  
	display: block;
}
	
.styling {
	width: 73%;
	margin: 10px 20px 10px 10px;
}

}

/*----------------------------------------------------------*/
/*                    Mobile Footer                         */
/*----------------------------------------------------------*/

@media (min-width: 701px) {
	#mobile-footer {display: none;}
	#mobile-copyright {display: none;}
}

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

#mobile-footer {
    width: 100%;
    min-width: 320px;
    z-index: 1;
    position: static;
  }
	
#mobile-copyright {
    display: table;
    width: 100%;
    height: 60px;
    color: #86868B;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 1px;
}

.nav-primary {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 0 auto;
  padding: 0;

}
.nav-primary li {
  display: inline;
  height: 70px;
  margin: 0;
  padding: 0;
}
.nav-primary a {
  color: #393939;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.125em;  /* 18px text */
  font-weight: 300;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.nav-primary {
    width: 100%;
    min-width: 320px;
    z-index: 30;
    margin: 0 auto;
    height: auto;
    background: #f9f9f9;
  }
.nav-primary li {
    display: block;
    height: auto;
  }
.nav-primary li a {
    width: auto;
    float: none;
    display: block;
    padding: 15px 20px 15px 20px;
    height: 20px;
    text-decoration: none;
    border-bottom: 1px solid #e5e5e5;
    text-indent: 0;
    background: #f9f9f9;
  }

#footer-back{
  text-align: right;
}
}

/*----------------------------------------------------------*/
/*                     Desktop Footer                       */
/*----------------------------------------------------------*/

#footer {
    display: table;
    width: 100%;
    padding: 6.5em 0;
	background: #1A2E4B;
  	color: #FFFFFF;
	text-align: center;
 }

#footer div {
    display: table-cell;
    width: 33.333%;
    padding: 1em;
}

#footer p {
	font-size: 16px;
    padding: 2px 0;
 }

#footer h4 {
	font-size: 18px;
 }

#copyright {
	display: table;
    width: 100%;
 	height: 60px;
	margin: 0 auto;
  	color: #b8b8b8;
    background-color: #000000;
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 1px;
}

.copyright-inner {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
} 

.logo-footer {
  background: transparent url(https://www.theillustrators.com.au/images/logo/the-illustrators-white.svg) scroll no-repeat 0 0;
  background-size: cover;
  width: 180px;
  height: 48px;
  position: absolute;
  display: block;
  bottom: 80px;
  right: 60px;
  z-index: 1;
}

@media screen and (max-width: 700px) {
	#footer {display: none;}
	.logo-footer {display: none;}
} 

/*----------------------------------------------------------*/
/*                       Lightbox                           */
/*----------------------------------------------------------*/

.overlay {
  /* Display over the entire page */
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  /* Horizontal and vertical centering of the image */
  display: flex;
  align-items: center;
  text-align: center;
  /* We hide all this by default */
  visibility: hidden;
}

.overlay img{
   position: absolute;
   top: 50%;
   left: 50%;
   width: 700px;
   height: 495px;
   margin-top: -248px; /* Half the height */
   margin-left: -350px; /* Half the width */
}

.overlay.square img{
   position: absolute;
   top: 50%;
   left: 50%;
   width: 600px;
   height: 600px;
   margin-top: -300px; /* Half the height */
   margin-left: -300px; /* Half the width */
}

.overlay.tall img{
   position: absolute;
   top: 50%;
   left: 50%;
   width: 433px;
   height: 600px;
   margin-top: -300px; /* Half the height */
   margin-left: -217px; /* Half the width */
}

.overlay.ebookCover img{
   position: absolute;
   top: 50%;
   left: 50%;
   width: 400px;
   height: 600px;
   margin-top: -300px; /* Half the height */
   margin-left: -200px; /* Half the width */
}

.overlay.paperbackCover img{
   position: absolute;
   top: 50%;
   left: 50%;
   width: 900px;
   height: 650px;
   margin-top: -325px; /* Half the height */
   margin-left: -450px; /* Half the width */
}

.overlay:target {
  visibility: visible;
  outline: none;
  cursor: default;
}

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

	.overlay {display: none;}
}

/*----------------------------------------------------------*/
/*                       Quote Form                         */
/*----------------------------------------------------------*/

.blue-quote {
	background: #2D9AB7;
    padding-top: 130px;
	padding-bottom: 40px;
}

.container-quote {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	max-width:500px;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.container-quote {
	width: 100%;
	margin: 0 auto;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="number"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] {  /* Placeholder text */
	font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; 
}

#contact {  /* Grey box container */
	background:#F9F9F9;
	padding: 25px;
}

#contact h1 {
	color: #2196F3;
}

fieldset {  
	font-size: 16px;
	border: none;
	margin: 10px;  /* Space between Text box */
	padding: 0 10px 0 0;
}

.quote-font {
	font-size: 16px;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="number"], #contact input[type="url"], #contact textarea {  /* Text box */
	width: 100%;
	border:1px solid #CCC;
	background:#FFF;
	margin: 2px 0;  /* Space between Label and Text box */
	padding:12px 5px; /* Move placeholder text */
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="number"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #2196F3;
}

#contact textarea { /* Comments box */
	height:100px;
	width:100%;
  	resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:#2196F3;
	color:#FFF;
	margin:0 0 5px;
	padding:12px;
	font-size:16px;
}

#contact button[type="submit"]:hover {
	background:#44A6F4;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { 
	box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); 
}

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #2196F3;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}

/* Styling form -------------------------------------------------*/
.radio-buttons {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.radio-buttons input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.radio-buttons:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.radio-buttons input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.radio-buttons input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.radio-buttons .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

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

    .blue-quote {background: #F9F9F9;}
    #contact {padding: 5px;}
	.container-quote {box-shadow: none;}
}

/*----------------------------------------------------------*/
/*                   Index - Testimonials                   */
/*----------------------------------------------------------*/

.wrapper-quote{
  max-width: 1250px;
  margin: auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.wrapper-quote .box{
  background: #fff;
  width: calc(46% - 10px);
  padding: 25px;
  border-radius: 3px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
}
.wrapper-quote .box .quote{
  font-family: 'Arial', sans-serif;
  font-size: 26px;
  color: #17a2b8;
}
.wrapper-quote .box .content{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
}
.box .info .name{
  font-weight: 600;
  font-size: 17px;
  line-height: 1.8;
}
.box .info .job{
  font-size: 16px;
  font-weight: 500;
  color: #17a2b8;
}
.box .info .stars{
  margin-top: 2px;
}
.box .info .stars i{
  color: #17a2b8;
}
.box .content .image{
  height: 75px;
  width: 75px;
  padding: 3px;
  background: #17a2b8;
  border-radius: 50%;
}
.content .image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
}
.box:hover .content .image img{
  border-color: #fff;
}

@media screen and (max-width: 1100px) {	
	.wrapper-quote .box{
    width: 100%;
    margin: 10px 0;
	}
}

/*----------------------------------------------------------*/
/*                     Blockquote                           */
/*----------------------------------------------------------*/

blockquote {
	max-width: 1250px;
	margin: 0 auto;
	text-align:center;
	line-height:1.5;
	font-size:18px;
	color: #3d748f;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	position:relative;
	quotes: "\201C""\201D""\2018""\2019";
}

blockquote:after {
	color:#ccc;
	font-family: 'Source Sans Pro', sans-serif;
	content: open-quote;
	font-size:80px;
	position:absolute;
	left:50%;
	bottom:calc(100% - 20px);
	background:#fff;
	height:55px;
	width: 55px;
	line-height:normal;
	text-align:center;
	transform:translateX(-50%);
}

blockquote p {
	padding:20px;
}

.cite {
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 3;
	text-align: center;
	}

.cite-books {
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 1.0;
	}

@media screen and (max-width: 1250px) {
	blockquote {
		margin: 0 15px;
	}
}

/*----------------------------------------------------------*/
/*                      Press & News                        */
/*----------------------------------------------------------*/

.large-image {
	text-align: center;
}

.large-image img {
	max-width: 100%;
  	height: auto;
}

.news-card {
  display: flex;
  position: relative;
  flex-direction: column;
  margin: 1.0rem auto;
  margin-bottom: 1.6%;
  line-height: 1.4;
  border-radius: 5px;
  overflow: hidden;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}

.news-card .description {
  padding: 30px;
  position: relative;
}

.news-card img {
  padding: 10px;
}

@media (min-width: 640px) {
    .news-card {
      flex-direction: row;
      max-width: 900px;
    }

    .news-card .description {
      flex-basis: 100%;
    }
}

/*----------------------------------------------------------*/
/*                     Clent Reviews                        */
/*----------------------------------------------------------*/

.blog-card {
  display: flex;
  position: relative;
  flex-direction: column;
  margin: 1rem auto;
  margin-bottom: 1.6%;
  line-height: 1.4;
  border-radius: 5px;
  overflow: hidden;
  z-index: 0;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}

.blog-card .logo {
   	position: absolute;
   	top: 0px;
   	left: 0px;
	padding: 10px 15px;
	z-index: 2;
}

.blog-card .description {
  padding: 30px;
  position: relative;
  z-index: 1;
}
.blog-card .description h1, .blog-card .description h2 {
	font-family: "Raleway",sans-serif;
	letter-spacing: normal;
}

.blog-card .description h1 {
  line-height: 1;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
}
.blog-card .description h2 {
  font-size: 1rem;
  font-weight: 300;
  color: #a2a2a2;
  margin-top: 5px;
}

.blog-card p {
  position: relative;
  margin: 1rem 0 0;
  color: #666666;
  font-weight: 400;
}

.blog-card:hover .details {
  left: 0%;
}

@media (min-width: 640px) {
    .blog-card {
      flex-direction: row;
      max-width: 900px;
    }

    .blog-card .description {flex-basis: 100%;}

}

@media screen and (max-width: 500px){
	
	.blog-card .logo {display: none;}
}