/*
Theme Name: Tessellate
Theme URI: http://www.tessellate.co.uk
Author: Tessellate Design Studio
Version: 1.0
*/

.nav > li > a:hover, .nav > li > a:focus {
    background-color: #f5f2ed;
    text-decoration: none;
}

/* ---- FRONT PAGE ---- */
/* clear fix */

img.image100 {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.grid:after {
	content: '';
	display: block;
	clear: both;
}

.grid{
	transform:
}
.grid-item {
	float: left;
	padding:5px 10px 5px 0px;
}

.grid-item img {
	display: block;
	width: 100%;
	height: auto;
}

h4 li{
	display:inline-block; margin: 20px 0px; line-height: 20pt;
}

.columns{
	margin:10px 0px 0px;
	font-size:14pt;
	font-weight:300;
}

#imageboxouter {
    display: inline-block;
    position: relative;
    width: 100%;
    min-width: 160px;
}
#dummy {
    margin-top: 100%; /* 4:3 aspect ratio */
}
#imageboxinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.container-fluid{
	margin-left:160px;
	max-width:1500px
}
label.frm_screen_reader { display: none;}

@media all and (max-width:1200px) {
	.container-fluid {margin-left: 100px; max-width: 1500px;}
}
@media all and (min-width:921px) {
	h4 li:nth-child(1n+2)::before{content: " • "}
}
@media all and (max-width:920px) {
	h4 li{display:list-item;}
	h4 li:nth-child(1n+1)::before{}
}

@media all and (max-width:768px) {
	.container-fluid {margin-left: 0px; max-width: 1500px;}
}

.fullwidthimage {
	width: 100%;
	height: auto;
}

/* ---- PORTFOLIO ---- */



.portfolio-examples{
	-webkit-transition:all 2s linear;
	-moz-transition:all 2s linear;
	-o-transition:all 2s linear;
	-ms-transition:all 2s linear;
	transition:all 2s linear;
}

.filter-links h3{
	display: block;
	margin-bottom:20px;
	margin-top:0px;
	font-size:14pt;
}

.filter-links a {
    width: 100%;
    display: block;
    margin: 10px 0;
    font-weight: 300;
}
.portfolioexamples a{
	margin:0;
}

.portfolioexamples {
	float: none;
    display: inline-block;
    width: 32%;
    vertical-align: top;
}

a.backlink {
	margin: 40px 0 20px;
	display: block;
}
.portfolioimage p {
	margin-bottom: 0;
}
.portfolioimage {
	margin-bottom: 20px;
}


@media all and (max-width:768px) {
	.example-grid a { width: 100%; display: block; margin: 8px 0; white-space:normal;}
	.portfolioexamples {
	float: none;
    display: inline-block;
    width: 49%;
    vertical-align: top;
}
}
@media all and (max-width:520px) {
	.portfolioexamples {
	float: none;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
}
/* ---- CONTACT---- */
.frm_form_fields {
	text-align:right;
}

.frm_submit {
	display:none;
}
.frm_form_fields input,.frm_form_fields textarea  {
    background: #F5F2ED;
    width: 60%;
    border: 0px;
    padding: 10px 10px;
    display: inline;
    margin: 10px 0px;
    vertical-align: middle;
    outline: white;

}
.frm_form_fields label {
    font-weight: 300;
    font-size: 14pt;
    width: 25%;
        margin: 10px 0px;
    padding: 10px 0;
    display: inline;
    vertical-align: middle;
}

#contact-us-submit {
    background: #F5F2ED;
    font-weight: 300;
    font-size: 14pt;
    color: black;
    padding: 10px 20px;
    margin: 10px 0px;
    display: inline-block;
}

.g-recaptcha {
	float: right;
	margin: 10px 0;
}

.frm_html_container, .frm_error {
	clear: both;
}



@media all and (max-width:992px) {
	.contact-text{
        float: none;
		text-align: left;
		margin-bottom: 49px;
	}
	.frm_form_fields input, .frm_form_fields textarea{width:100%;}
	.frm_form_fields{text-align: left}

}
/* ---- Pages ---- */

.page-image img{
	max-width: 100%; margin:0 0 10px; height:auto;}