html { font-size: 16px; }

/*  
--------------------------------------------------------------------------------------- */
*,
*:before,
*:after { box-sizing: border-box; }

body, div, ul, li, img, video, section, figure, figcaption, main, footer, 
h1, h2, h3, h4, p, p1, a { margin: 0; padding: 0 ; border: 0; }

body { background: white; }


/*  page widths
--------------------------------------------------------------------------------------- */
.container { max-width: 60em; max-width: 65em; }
.container { margin :0 auto; background: #fefefe; }


/* fonts
--------------------------------------------------------------------------------------- */
@font-face {
    font-family:JosefinSans-Light;
    src: url(fonts/JosefinSans-Light.ttf);
    font-weight: thin;
}

@font-face {
    font-family: JosefinSans-Medium;
    src: url(fonts/JosefinSans-Medium.ttf);
    font-weight: Bold;
}

@font-face {
    font-family: Plex-Italic;
    src: url(fonts/IBM-Plex-Sans/IBMPlexSans-Italic.woff2);
}


body		{ font-family: JosefinSans-Light , Arial, sans-serif; }
h1, h2, h3, h4	{ font-family: JosefinSans-Medium, Arial, sans-serif; }
p, p1, p2			{ font-family: JosefinSans-Light, Arial, sans-serif; }
figcaption	{ font-family: JosefinSans-Light, Arial, sans-serif; }



/*  top navigation section  
--------------------------------------------------------------------------------------- */
nav 	{ 
	padding: 2rem 0rem 2rem 0rem;
	margin-bottom: 1rem;
	border-bottom: 2px blue solid;
	min-height: 2rem;  
 }
nav h1	{ font-size:1.4em; margin-top: 1.69em; text-align: left}
nav a	{ white-space: nowrap; }

nav ul		{ list-style-type:none; }
nav ul li	{ display:inline; margin-right:.5rem; font-size:1.05em; }

/*  hero image
--------------------------------------------------------------------------------------- */
.container > figure { margin:0 .5rem 2rem .5rem; }



/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
.container > h2 		{ line-height: 1.1em; font-size: 1.8em; margin: 0 .5em 1em; }
.container figure h2	{ line-height: 1.1em; font-size: 1.8em; }



/*  main content after hero image / main title
--------------------------------------------------------------------------------------- */
section { margin: 0; padding: 0 .5rem 2rem; }

section h3 { font-size: 1.3em; line-height: 1.5em; color: #05988E; }

section figure { margin-bottom: 1rem; }

section figcaption { font-size: 1em; color: #05988E; }

section div { margin-top: 0rem; margin-top: 0rem; } 

section.one h4 {font-size: 1.3em; line-height: 1.5em; color: #05988E; }

section.one p {font-size: 1.1em; color: #878787}

section.one p1 {font-size: 1.1em; color: #878787}

section.CE h3 { text-align:center; padding-top:2rem; padding-bottom:2rem; }

section.CE div { padding-bottom:2rem; }

section.deanparktwo p1 { font-size: 1.1em; color: #878787; }

section.deanparkfive p1 { font-size: 1.1em; color: #878787; }

section.zinefour p1 { margin: 0 0 1rem 0; font-size: 1.1em; color: #878787; }

section.motiontwo p1 { margin: 0 0 1rem 0; font-size: 1.1em; color: #878787; }

section.motionfour p1 { margin: 0 0 1rem 0; font-size: 1.1em; color: #878787; }

section.websitetwo p1 { margin: 0 0 1rem 0; font-size: 1.1em; color: #878787; }

section.websitethree p1 { margin: 0 0 1rem 0; font-size: 1.1em; color: #878787; }


/*  media defaults to force image & video width to parent element width
--------------------------------------------------------------------------------------- */
img		{ max-width: 100%; height: auto; } /* max-width stops img element going bigger than its actual size */

video	{ max-width: 100%; width: 100%; }


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; line-height: 1.375em; max-width: auto; font-size: 1.1em; color: #878787 } 

p1 { margin: 0 0 1rem 0; line-height: 1.375em; max-width: auto; font-size: 1.1em; color: #05988E }


/*  footer section
--------------------------------------------------------------------------------------- */
footer { font-size: .8em; padding: 1rem .25rem; border-top: 0px #efefef solid; }

footer ul { list-style-type: none; }
footer li { list-style-type: none; margin: 0 0 .5rem 0;  }

footer h3 { margin: 0 0 1em 0; font-size: 1em; }



/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: #05988E; text-decoration: none; }
a:visited	{ color: #05988E; color: #05988E; }
a:hover		{ text-decoration: underline; }
a:active	{ color: #05988E; }

a.hover2    {color: #fff; font-weight: 2em; visibility: visible; }



/* 
--------------------------------------------------------------------------------------- */
@media (min-width: 550px) { 


/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav { 	
		display: grid; 
		grid-template-columns: 1fr auto;
		border-bottom: 0 #eee none;
	}

	nav ul { margin-top: .48rem; margin-top: 4em; }
	
	nav ul li { margin-left: 3em; margin right: 0em; display: inline; }
	
	hr.new { border-top: 2px solid #9ED8C6; }
	
	hr { margin-bottom: 3em; }
	
	a.active2 { color: #89c9af }
	
/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h2 { line-height: 1.15em; font-size: 1.6em; margin: 0 auto 1em; text-align: left; color: #05988E; }

	.container > figure { margin: 0 0 2rem 0; }
	
	.container { min-width: 60rem; min-width: 0; min-height: 100vh; }

/*  section 12 column grid
--------------------------------------------------------------------------------------- */
	section  { 
		display: grid; 
		grid-template-columns: repeat(12, [col] 1fr);
		grid-template-rows: auto;
		grid-column-gap: 1.5rem;  
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"fg fg fg fg fg ... dv dv dv dv dv dv"
	}
	
	section.one {
	grid-template-areas:
	   "hd hd hd hd hd hd sb sb sb sb sb sb" 
	   "tx tx tx tx tx tx dv dv dv dv dv dv" 
	   
	   
	}
	
	section.aboutme { 
	grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"fg fg fg fg fg dv dv dv dv dv dv dv"
	
	}
	
	section.CE { 
	grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"... ... dv dv dv dv dv dv dv dv ... ..."
		
	}
	
/*  section 12 column grid (website)
--------------------------------------------------------------------------------------- */

    section.websiteone {
    grid-template-areas:
        "hd hd hd hd hd hd hd hd hd hd hd hd" 
        "dv dv dv dv dv dv ... ... ... ... ... ..."
        "fg fg fg fg fg fg img img img img img img"
    }
    
    section.websitetwo {
    grid-template-areas:
        "hd hd hd hd hd hd hd hd hd hd hd hd" 
        "fg fg fg fg fg fg fg fg dv dv dv dv"
        "img img img img img img img img ... ... ... ..."
        "img2 img2 img2 img2 img2 img2 img2 img2 tx tx tx tx"

    }
	
	section.websitethree {
     grid-template-areas:
         "hd hd hd hd hd hd hd hd hd hd hd hd" 
         "fg fg fg fg fg fg img1 img1 img1 img1 img1 img1"
         "img2 img2 img2 img2 img2 img2 tx tx tx tx tx tx"
         
    }

	section.websitefour {
     grid-template-areas:
         "hd hd hd hd hd hd hd hd hd hd hd hd" 
         "dv dv dv dv dv dv ... ... ... ... ... ..."
         "img1 img1 img1 img1 fg fg fg fg img2 img2 img2 img2"
         
    }
    
	section.websitefive {
     grid-template-areas:
         "hd hd hd hd hd hd hd hd hd hd hd hd" 
         "fg fg fg fg fg fg dv dv dv dv dv dv"
         "img1 img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img2"
        
    }

    section.websitesix { 
    grid-template-areas:
         "hd hd hd hd hd hd hd hd hd hd hd hd" 
         "dv dv dv dv dv dv fg fg fg fg fg fg"
    
    }
    
    section.websiteseven {
    grid-template-areas:
         "hd hd hd hd hd hd hd hd hd hd hd hd" 
         "dv dv dv dv dv dv ... ... ... ... ... ..."
         "fg fg fg fg fg fg img1 img1 img1 img1 img1 img1"
         
    }
    
    section.websiteeight {
    grid-template-areas:
         "hd hd hd hd hd hd hd hd hd hd hd hd" 
         "fg fg fg fg fg fg img1 img1 img1 img1 img1 img1"
         "dv dv dv dv dv dv img1 img1 img1 img1 img1 img1"
         
    }

/*  section 12 column grid (motion)
--------------------------------------------------------------------------------------- */

    section.motionone {
    grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"dv dv dv dv dv dv ... ... ... ... ... ..."
		"fg fg fg fg fg fg img1 img1 img1 img1 img1 img1"
    }

    section.motiontwo {
    grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"fg fg fg fg fg fg dv dv dv dv dv dv"
		"img1 img1 img1 img1 img1 img1 tx tx tx tx tx tx"
		"img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2"
		"tc tc tc tc tc tc ... ... ... ... ... ..."
    }

    section.motionthree {
    grid-template-areas:
        "hd hd hd hd hd hd hd hd hd hd hd hd"
        "img1 img1 img1 img1 img1 img1 dv dv dv dv dv dv"
        "img1 img1 img1 img1 img1 img1 img3 img3 img3 img3 img3 img3"
        "fg fg fg fg fg fg img2 img2 img2 img2 img2 img2"
        
    }

    section.motionfour {
    grid-template-areas:
        "hd hd hd hd hd hd hd hd hd hd hd hd"
        "dv dv dv dv dv dv ... ... ... ... ... ..."
        "fg fg fg fg fg fg fg fg fg fg fg fg"
        "tx tx tx tx tx tx ... ... ... ... ... ..."
        "img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img1"
        
    }
    
    section.motionfive {
     grid-template-areas:
        "hd hd hd hd hd hd hd hd hd hd hd hd"
        "dv dv dv dv dv dv ... ... ... ... ... ..."
        "vd vd vd vd vd vd fg fg fg fg fg fg"
        
    }
        
    section.motionsix {
     grid-template-areas:
        "hd hd hd hd hd hd hd hd hd hd hd hd"
        "dv dv dv dv dv dv ... ... ... ... ... ..."
        "fg fg fg fg fg fg img1 img1 img1 img1 img1 img1"
        
    }
    
    section.motionseven {
     grid-template-areas:
        "hd hd hd hd hd hd hd hd hd hd hd hd"
        "fg fg fg fg fg fg fg fg ft ft ft ft"
        "gf gf gf gf gf gf gf gf dv dv dv dv"
        
    } 
    
    section.motioneight {
    grid-template-areas:
        "hd hd hd hd hd hd hd hd hd hd hd hd"
        "dv dv dv dv dv dv ... ... ... ... ... ..."
        "fg fg fg fg fg fg fg fg fg fg fg fg"
    }
    
/*  section 12 column grid (deanpark)
--------------------------------------------------------------------------------------- */
	
	section.deanparkone {
	    grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"fg fg fg fg fg fg fg fg fg fg fg fg"
		"dv dv dv dv dv dv fg1 fg1 fg1 fg1 fg1 fg1"
		"dv dv dv dv dv dv fg1 fg1 fg1 fg1 fg1 fg1"
		"fg2 fg2 fg2 fg2 fg2 fg2 fg2 fg2 fg2 fg2 fg2 fg2"

	}
	
	section.deanparktwo {
	   grid-template-areas:
	   "hd hd hd hd hd hd hd hd hd hd hd hd"
	   "fg fg fg fg fg fg dv dv dv dv dv dv"
	   "tx tx tx tx tx tx fg1 fg1 fg1 fg1 fg1 fg1"
	
	}
	
	section.deanparkthree {
	     grid-template-areas:
	     "hd hd hd hd hd hd hd hd hd hd hd hd"
	     "fg fg fg fg fg fg dv dv dv dv dv dv"
	     "fg1 fg1 fg1 fg1 fg1 fg1 fg1 fg1 fg1 fg1 fg1 fg1"
	 
	 }
	     
    section.deanparkfour {
         grid-template-areas:
	     "hd hd hd hd hd hd hd hd hd hd hd hd"
	     "dv dv dv dv dv dv fg fg fg fg fg fg"
	     "img1 img1 img1 img1 img2 img2 img2 img2 img3 img3 img3 img3"
	     "img4 img4 img4 img4 img4 img4 img4 img4 img4 img4 img4 img4"
	
	}
	     
    section.deanparkfive {
         grid-template-areas:
	     "hd hd hd hd hd hd hd hd hd hd hd hd"
	     "dv dv dv dv dv dv fg fg fg fg fg fg"
	     "tx tx tx tx tx tx img1 img1 img1 img1 img1 img1"
       
	}
	
	section.deanparksix {
	     grid-template-areas:
	     "hd hd hd hd hd hd hd hd hd hd hd hd"
	     "tx tx tx tx tx tx dv dv dv dv dv dv"
	     "img2 img2 img2 img2 img2 img2 img1 img1 img1 img1 img1 img1"
	
	}
	
	section.deanparkseven {
	     grid-template-areas:
	     "hd hd hd hd hd hd hd hd hd hd hd hd"
	     "dv dv dv dv dv dv fg fg fg fg fg fg"
	     "img img img img img img img img img img img img"
	}
	
	section { padding: 0rem; }
	
/*  section 12 column grid (zine)
--------------------------------------------------------------------------------------- */

    section.zineone {
         grid-template-areas:
         "hd hd hd hd hd hd hd hd hd hd hd hd"
         "fg fg fg fg img1 img1 img1 img1 dv dv dv dv"
         "img2 img2 img2 img2 img3 img3 img3 img3 ... ... ... ..."
         
    }

    section.zinetwo {
         grid-template-areas:
         "fg fg fg fg img1 img1 img1 img1 dv dv dv dv"
         "img2 img2 img2 img2 img3 img3 img3 img3 dv dv dv dv"
    
    }
    
    section.zinethree {
         grid-template-areas:
         "hd hd hd hd hd hd hd hd hd hd hd hd"
         "dv dv dv dv dv dv ... ... ... ... ... ..."
         "fg fg fg fg fg fg fg fg fg fg fg fg"
         
    }
	
	section.zinefour {
         grid-template-areas:
         "hd hd hd hd hd hd hd hd hd hd hd hd"
         "dv dv dv dv dv dv ... ... ... ... ... ..."
         "fg fg fg fg fg fg fg fg fg fg fg fg"
         "tx tx tx tx tx tx ... ... ... ... ... ..."
         "img1 img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img2"
         
    }
    
    section.zinefive {
         grid-template-areas:
         "hd hd hd hd hd hd hd hd hd hd hd hd"
         "fg fg fg fg fg fg dv dv dv dv dv dv"
    }
    
/*  section grid
--------------------------------------------------------------------------------------- */
	
	section h3		{ grid-area: hd; }
	section figure	{ grid-area: fg; }
	section div		{ grid-area: dv; }

    section.one h3  { grid-area: hd; }
    section.one h4  { grid-area: sb; }
    section.one p	{ grid-area: dv; }
    section.one p1  { grid-area: tx; }
    
/*  website grid
--------------------------------------------------------------------------------------- */

    section.websiteone figure.book1 { grid-area: img; }
    
    section.websitetwo figure.websitelogo { grid-area: img;  }
    section.websitetwo figure.logotests   { grid-area: img2; }
    section.websitetwo p1                 { grid-area: tx;   } 
    
    section.websitethree figure.pallet { grid-area: img1; }  
    section.websitethree figure.type   { grid-area: img2; } 
    section.websitethree p1            { grid-area: tx;   } 
    
    section.websitefour figure.about   { grid-area: img1; }
    section.websitefour figure.contact { grid-area: img2; }
    
    section.websitefive figure.grid2 { grid-area: img1; }
    section.websitefive figure.grid3 { grid-area: img2; }  
    
    section.websiteseven figure.codepen2 { grid-area: img1; }
    
    section.websiteeight figure.bondandcoyne2 { grid-area: img1; }
     

/*  motion grid
--------------------------------------------------------------------------------------- */

    section.motionone figure.audio { grid-area: img1; }
    
    section.motiontwo figure.audioboard { grid-area: img1; }
    section.motiontwo p1                { grid-area: tx;   }
    section.motiontwo figure.storyboard { grid-area: img2; }
    
    section.motionthree figure.background2  { grid-area: img1; }
    section.motionthree figure.background3  { grid-area: img2; }
    section.motionthree figure.colourpallet { grid-area: img3; }
    
    section.motionfour figure.eyes { grid-area: img1; }
    section.motionfour p1          { grid-area: tx;   }
    
    section.motionfive figure.storyboardvideo { grid-area: vd; }
    
    section.motionsix figure.shop { grid-area: img1; }
    
    section.motionseven figure.boldspots { grid-area: gf; }
    section.motionseven figure.font      { grid-area: ft; }
    
    
    
/*  dean park grid
--------------------------------------------------------------------------------------- */
    
    section.deanparkone figure	      { grid-area: fg;  }
    section.deanparkone div		      { grid-area: dv;  }
    section.deanparkone figure.chairs { grid-area: fg1; }
    section.deanparkone figure.floor  { grid-area: fg2; }
    
    section.deanparktwo figure        { grid-area: fg;  }
    section.deanparktwo div	          { grid-area: dv;  }
    section.deanparktwo p1            { grid-area: tx;  }
    section.deanparktwo figure.icons  { grid-area: fg1; }
    
    section.deanparkthree figure         { grid-area: fg;  }
    section.deanparkthree div	         { grid-area: dv;  }
    section.deanparkthree figure.outdoor { grid-area: fg1; }
    
    section.deanparkfour div                { grid-area: dv;   }
    section.deanparkfour figure             { grid-area: fg;   }
    section.deanparkfour figure.meetingroom { grid-area: img1; }
    section.deanparkfour figure.gardens     { grid-area: img2; }
    section.deanparkfour figure.signs       { grid-area: img3; }
    section.deanparkfour figure.indoor      { grid-area: img4; }
    
    section.deanparkfive p1           { grid-area: tx;  }
    section.deanparkfive div          { grid-area: dv;  }
    section.deanparkfive figure       { grid-area: fg;  }
    section.deanparkfive figure.paint { grid-area: img1 }
    
    section.deanparksix p1                { grid-area: tx;   }
    section.deanparksix figure.dimentions { grid-area: img1; }
    section.deanparksix figure.glasses    { grid-area: img2; }
    
    section.deanparkseven figure           { grid-area: fg;  }
    section.deanparkseven figure.moodboard { grid-area: img; }
    
/*  zine grid
--------------------------------------------------------------------------------------- */
    
    section.zineone figure	      { grid-area: fg;   }
    section.zineone figure.zine2  { grid-area: img1; }
    section.zineone figure.zine3  { grid-area: img2; }
    section.zineone figure.zine4  { grid-area: img3; }
    
    section.zinetwo figure	      { grid-area: fg;   }
    section.zinetwo figure.zine6  { grid-area: img1; }
    section.zinetwo figure.zine7  { grid-area: img2; }
    section.zinetwo figure.zine8  { grid-area: img3; }
    
    section.zinefour p1                { grid-area: tx;   }
    section.zinefour figure.variation1 { grid-area: img1; }
    section.zinefour figure.variation2 { grid-area: img2; }
     
    
    
/*  footer grid  
--------------------------------------------------------------------------------------- */	
	footer { 	
		display: grid; 
		grid-template-columns: 1fr auto;
		grid-template-rows: repeat(minmax(3rem, auto));
		grid-gap: 0;
		background: #fff; color:#fff;
		border-top: 0 #eee none;
		margin-top: 1rem;
		padding-top: 0rem;
		padding-left: 0rem;
	}

	footer h3			{ margin: 0; color: #05988E }
	footer ul 			{ padding-right: 1rem; }
	footer li 			{ display: inline; margin-left: .5rem; }
	footer li a 		{ background: #fff; padding: .25em .25em; border-radius: .25em; font-weight:bold; }
	footer li a:hover	{ background: #000; }

	
} 

/*
--------------------------------------------------------------------------------------- */
@media (min-width: 2000px) { off.html { font-size: 1.5em; } }