/*************************/
/* General
/*************************/


.shaded-box {
    border: 1px solid #eee;
}

body {
    font-family: 'Whitney', sans-serif;
    font-weight: 100;
    color: #333;
    font-size: 10pt !important;
}

.container {
	width: 90%;
}


.centred {
    text-align: center;
}

.clear {
	clear: both;
}

.highlights > div > div {
}

.highlights > div > div {
    font-size: 0.95em;
    padding: 1em;
}

.light { font-weight: 100; }
.medium { font-weight: 400; }
.heavy { font-weight: 900; }

.space-above {
    margin-top: 80px;
}

.inter-para {
    height: 15px;
    display: block;
}

article {
    margin-bottom: 35px;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 100;
    margin: 0;
    color: rgba(0, 0, 0, 0.8);
}

h1 { font-size: 2.5em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.0em; }
h4 { font-size: 1.3em; font-weight: 400; }
h5 { font-size: 1.0em; font-weight: 900; }
h6 { font-size: 1.0em; }


a {
    color: #268cad;
    text-decoration: none;
}

a:hover {
    color: #268cad;
    text-decoration: none;
}


@media only screen and (min-width: 480px) {
    body {
        font-size: 1.3em;
    }
}

@media only screen and (min-width: 768px) {
    body {
        font-size: 1.6em;
    }
}

/*************************/
/* Menu
/*************************/


.menu {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#515151+0,0e0e0e+100 */
	background: #515151; /* Old browsers */
	background: -moz-linear-gradient(top,  #515151 0%, #0e0e0e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515151), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #515151 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #515151 0%,#0e0e0e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #515151 0%,#0e0e0e 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #515151 0%,#0e0e0e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

	padding: 0 5%;
	height: 90px;
	top: 0;
	width: 100%;
	z-index: 10;
	position: relative;
}

.menu button {
	float: left;
}

.menu .brand a img {
	margin-top: 6px;
	height: 80px;
	width: auto;
}

.menu .links ul {
	display: inline-block;
	list-style-type: none;
}

.menu .links li {
	display: inline-block;
	margin-top: 45px;
	border-radius: 4px;
}

.menu .links li a:hover,
.menu .links li a:focus {
	background: inherit;
}

.menu .links li:hover,
.menu .links li:visited,
.menu .links li:focus,
.menu .links li.active,
.sidebar-offcanvas li:hover {
	-moz-box-shadow: inset 0px 0px 18px #000;
	-webkit-box-shadow: inset 0px 0px 18px #000;
	box-shadow: inset 0px 0px 18px #000;
}

.menu .links li.active a,
.sidebar-offcanvas li a:hover {
	color: #d82119;
}

.menu .brand {
	float: right;
}

.menu .links {
	display: none;
}


@media screen and (min-width: 768px) {

	.menu {
		position: fixed;

	}
	.menu .brand {
		float: left;
	}
	.menu .links {
		display: block;
		float: right;
	}


}


/*************************/
/* Panels
/*************************/
.content {
	position: relative;
	display: block;
	width: 100%;
	background-color: #fff;
	overflow: hidden;

}


.backpanel {
	position: absolute;
	margin-top: -20px;
	width: 100%;
}

.backpanel img {
	min-width: 65rem;
	width: 100%;
	max-width: 100%;
	height: auto;
	background-color: #fff;
}


.frontpanel {
	background-color: #fff;
	position: relative;
	z-index: 3;
}

.frontpanel > div {
	width: 100%;
	padding: 10%;
}

.frontpanel > div p,
.frontpanel > div h1,
.frontpanel > div ul,
.frontpanel > div span {
	color: #000;
	opacity: 0;
}

.frontpanel img.inset {
	height: auto;
	margin-bottom: 3%;
}

@media screen and (min-width: 768px) {
	.frontpanel img.inset {
		float: right;
		width: 30rem;
	}
}

.frontpanel p,
.frontpanel h1 {
	padding-bottom: 2rem;
}

.frontpanel img {
	width: 80%;
	height: auto;
}

#about .inset {
	border-radius: 50%;
	width:250px;
	max-width: 40%;
	height:auto;
	margin-top: 5rem;
}

#portfolio .feature {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#portfolio .feature > div {
	background-color: #fafafa;
	margin: 0rem 1rem 6rem;
	min-width: 20rem;
	max-width: 45rem;
	width: 100%;
	padding: 4%;
}

#portfolio .feature img.inset {
	float: none;
	width: 100%;
	margin-bottom: 5rem;
}

#portfolio .feature > div p {
	display: none;
	transform: none !important;
	margin: 0;
	padding: 0 0 1rem;
}

#portfolio .feature .img-holder {
	height: 30rem;
}

#portfolio .feature .heading-logo  {
	text-align: center;
	padding-bottom: 1rem;
	display: block;
}

#portfolio .feature .heading-logo img {
	max-height: 4rem;
	max-width: 40%;
	width: auto;


}


#skills img.inset {
	width: 50%;
}


#contact form {
	width: 100%;
}

#contact input,
#contact textarea {
	width: 100%;
	margin-bottom: 1rem;
	border: 1px solid #ccc;
	padding: 0.7rem;
	border-radius: 3px;
}

#contact input {
}

#contact textarea {
	height: 12rem;
}

#contact .error {
}

#contact input[type='submit'] {
	width: 12rem;
	height: 3.2rem;
}




/******************************************/
/* OFF CANVAS
/******************************************/

button.visible-xs {
	background-color: transparent;
	border: 1px solid #ccc;
	margin-top: 28px;
	border-radius: 2px;
}


button.visible-xs i {
	color: #ccc;
	font-size: 1.7rem;
	background-color: inherit;
	padding: 0.3rem;
}


@media screen and (max-width: 735px) {
	.row-offcanvas {
		position: relative;
		-webkit-transition: all .25s ease-out;
		-o-transition: all .25s ease-out;
		transition: all .25s ease-out;
	}

	.row-offcanvas-right {
		right: 0;
	}

	.row-offcanvas-left {
		left: 0;
	}

	.row-offcanvas-left
	.sidebar-offcanvas {
		left: -83%; /* 6 columns */
	}

	.row-offcanvas-left.active {
		left: 83%; /* 6 columns */
	}

	.sidebar-offcanvas {
		position: absolute;
		top: 0;
		width: 83%; /* 6 columns */

		background-color: #333;
		height: 100%;
		z-index: 1;
		color: #ccc;
		text-align: center;
		padding-top: 1rem;
	}

	.sidebar-offcanvas ul {
		padding: 0;
		padding-top: 2rem;
	}

	.sidebar-offcanvas li {
		list-style-type: none;
		font-size: 1.7rem;
		text-align: left;
		border-bottom: 1px solid #555;
	}


	.sidebar-offcanvas li a {
		padding: 1.1rem 1.5rem;
			text-decoration: none;
		display: block;
		width: 100%;
		height: 100%;
	}
}






/*************************/
/* Footer
/*************************/

footer {
	background: url('../images/footer-bg.png');
	text-align: left;
	width: 100%;
	vertical-align: bottom;
	color: #ccc;
	padding: 7em 0 7em 0;
}

footer a {
	color: inherit;
}



footer .links {
	text-align: center;
}

footer .links ul {
	display: inline-block;
	margin: 0;
	padding: 0 1rem;
	background-color: #333;
	border-radius: 3rem;
}

footer .links li {
	list-style-type: none;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: 2.5rem;
	padding: 0.8rem 1.2rem;
}


footer .address p {
	margin: 0 0 1rem 0;
	line-height: 1.2;
}

footer .address,
footer .logo {
	text-align: center;
	margin-bottom: 5rem;
}

@media screen and (min-width: 768px) {

	footer .logo {
		text-align: right;
	}

	footer .address {
		text-align: left;
		padding-top: 1.6rem !important;
	}

}

footer img {
	max-width: 18em;
}


footer .cities {
	text-align: center;
	margin-top: 1em;
}

footer .cities span {
	padding: 15px;
}