* { margin: 0; padding: 0; border-width: 0; outline-style: none; box-sizing: border-box; -webkit-text-size-adjust: 100%;}
html, body { color: #1a1717; font-size: 14px; width: 100%; height: 100%; font-family: Raleway, sans-serif; font-weight: 300; }
.intro { overflow: hidden; position: relative; }
a { color: #1a1717; text-decoration: none; }
.cv-text a { text-decoration: underline; }
.wrapper { position: relative; width: 100%; min-height: 100%; padding: 10px 10px 0; max-width: 1740px; margin-left: auto; margin-right: auto; }
.text-wrapper {  min-height: 100%; margin-bottom: -20px; }
.text-wrapper:after { content: ""; display: block; }
.banner
{
	display: table;
	position: absolute;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	top: auto;
	left: 20px;
	bottom: 20px;
	background-color: yellow;
	padding: 16px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 400;
	transition: background 0.3s;
	
}
.banner-inner { display: table-cell; vertical-align: middle; }
.banner:hover { background-color: #66ffff; }

.header { position: relative; }
h1 { display:none; } 
#menu { font-weight: 400; display: none; }
.intro-img { background-image: url(../imgs/Rupert-Jessop-Intro.jpg); background-size: cover; background-position: center; position: absolute; top: 0; left: 10px; right: 10px; bottom: 64px; }
.grid { line-height: 0; position: relative; margin: 20px -5px; }
.grid:after { content: ""; display: table; clear: both; }
.text { position: relative; margin-top: 20px; margin-bottom: 20px; }
.img-wrapper { position: relative; width: 50%; height: auto; float: left; border: solid 5px white; }
.load { position: relative; }
.load:after {
    content: '';
    display: block;
    height: 0;
    width: 50%;
    /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
    padding-bottom: 100%;
}
.load > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.img-wrapper img { width: 100%; height: 100%; }
.title { line-height: normal; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; border-right: 2px solid black; }
.title p { font-weight: 400; text-align: right; position: absolute; left: 0; bottom: 0; width: 100%; padding-right: 12px; }
.footer { font-size: 9px; text-align: center; }
.footer, .text-wrapper:after { height: 20px;}
.footer a {  }
.home-footer { position: absolute; bottom: 0; width: 100%; }
.text p { margin-top: 12px; margin-bottom: 12px; }
.text table { margin-top: 20px; }
.text td { padding: 2px; }
.year { font-weight: 400; vertical-align: top; padding-right: 10px !important; }
.contact { font-weight: 400; line-height: 40px; display: block; background-size: 40px 40px; background-repeat: no-repeat; height: 40px; margin-top: 2px; margin-bottom: 5px; padding-left: 44px; }
.email { background-image: url(../imgs/icon-email.png); }
.tel { background-image: url(../imgs/icon-phone.png); }

@media screen and (min-width: 500px) {
.img-wrapper { width: 33.333%; }
}

@media screen and (min-width: 860px) {
html, body { font-size: 16px;}
.wrapper { padding: 20px; padding-bottom: 0px;}
h1 { display: block; font-size: 40px; font-weight: 200; letter-spacing: 5px; }
#menu { display:block; }
.header ul { position: absolute; top: 5px; right: 0; }
.header ul li { display: inline-block; }
#menu li a { font-size: 16px; text-decoration: none; padding: 5px; letter-spacing: 1px; }
.slicknav_menu { display:none; }
.intro-img { top: 113px; left: 20px; right: 20px; bottom: 20px; }
.grid { margin: 40px -5px; }
.text { line-height: 21px; margin-top: 40px; margin-bottom: 40px; max-width: 50%; }
.img-wrapper { width: 25%; }
.swipebox img:hover { opacity: 0.5; transition: all 0.2s; cursor: zoom-in; }
.banner
{
	width: 200px;
	height: 200px;
	left: 30px;
	bottom: 30px;
}
.banner p{
	border-top: 1px solid;
	border-bottom: 1px solid;
	padding-top: 10px;
	padding-bottom: 10px;
}

}

@media screen and (min-width: 1400px) {
.img-wrapper { width: 20%; }
}