/* Basics */
.header:after,
.footer:after,
.inner:after,
.clearfix:after
{
    clear:both;
    content:"";
    display:table;
}

html
{
	box-sizing: border-box;
	background:url('../images/plain-brick-background.jpg') no-repeat top center fixed;
}
*, *:before, *:after
{
	box-sizing: inherit;
}

body
{
    min-width: 300px;
    -webkit-text-size-adjust: none;
}

a
{
    -webkit-tap-highlight-color: rgba(255,255,255,0);
}

/* Main */
.inner
{
	margin:0 auto;
	max-width:740px;
	padding:0px 20px;
}

.header,
.footer
{
	padding:25px 0px;
	color:#1A1A1B;
}
.header
{
	padding-top:60px;
}
.header a,
.footer a
{
	color:#626262;
	border-bottom:transparent;
}
.header a:hover,
.footer a:hover
{
	color:#343434;
}

.header .inner
{
	text-align:right;
}
.header .brand
{
	font-size:40px;
	border-bottom:0px solid transparent;
	color:#5E5F61;
}
.header .brand img
{
	max-width:100%;
	vertical-align:top;
}

.mobileMenu
{
	display:none;
}
.primary
{
	margin-bottom:-5px;
	text-align:center;
}
.primary ul
{
	margin:0px;
}
.primary li
{
	display:inline-block;
	position:relative;
}
.primary li:before
{
	position:relative;
	content:'';
	background:url('../images/menu-arrows.png') no-repeat 15px 2px;
	height:16px;
	width:50px;
	left: -59px;
    position: absolute;
    top: 4px;
}
.primary li:before
{
	left:-80px;
	width:24px;
	background:url('../images/menu-arrows.png') no-repeat 0px 2px;
}
.primary li:first-child:before
{
	display:none;
}
.primary li:first-child
{
	margin-left:0px;
}
.primary li a
{
	border:0px solid transparent;
	text-transform:lowercase;
}
.primary li a:hover
{
	color:#343434;
}
.primary > ul > li
{
	margin-left:63px;
	padding-bottom:10px;
}

.primary > ul > li
{
	margin-left:135px;
}
.primary > ul > li:hover .secondaryNav
{
	display:block;
}
.primary ul > li > a
{
	font-size:22px;
	line-height:24px;
}

.primary .secondaryNav:before {
    border-color: transparent transparent #fff;
    border-style: solid;
    border-width: 10px;
    content: "";
    left: 50%;
    margin-left: -10px;
    position: absolute;
    top: -20px;
}
.primary .secondaryNav
{
    background: none repeat scroll 0 0 #ffffff;
    display: none;
    left: 50%;
    margin-left: -100px;
    margin-top: 10px;
    position: absolute;
    width: 200px;
    box-shadow:1px 3px 4px 0px #565656;
}
.primary .secondaryNav li
{
	display:block;
}
.primary .secondaryNav li:before
{
	display:none;
}
.primary .secondaryNav a
{
	display:block;
	font-size:15px;
	line-height:1;
	padding:10px;
}
.primary .secondaryNav li a:hover
{
	color: #F78F1E;
}
.mobileNav
{
	display:none;
}


.bodyContainer
{
	padding:15px 0 15px;
	min-height:400px;
}


.footer .nav
{
	margin:0px;
}
.footer .nav,
.footer .nav li,
.footer .nav li a
{
	display: inline-block;
}
.footer .nav
{
	float:left;
}
.footer .nav li
{
	margin-right:8px;
	padding:0px;
}
.footer .nav li a
{
	padding:3px 0px;
}
.footer .nav li:hover a
{
	color:#CDCDCD;
}
.footer .details
{
	float:right;
	text-align:right;
}
.footer .details .copyright
{
	padding-top:3px;
	margin-bottom:5px;
}




/* Pagination */
#PageNumbers
{
	margin:10px 0px;
}
#PageNumbers .details
{
	float:left;
}
#PageNumbers .pagination
{
	float:right;
}
#PageNumbers .pagination .pageNumber,
#PageNumbers .pagination .action
{
	border:1px solid #7F7F7F;
	margin-left:2px;
	padding: 2px 5px;
    text-align: center;
}
#PageNumbers .pagination .pageNumber.current,
#PageNumbers .pagination .pageNumber:hover,
#PageNumbers .pagination .action
{
	background:#7F7F7F;
	color:#FFFFFF;
}



/* ERROR MESSAGES 
------------------------------------------  */
form .message
{
    padding: 6px;
}
form [class*="holder-"] input,
form [class*="holder-"] textarea,
form :-moz-ui-invalid
{
    border-color:#b80000;
    box-shadow:none;
}
form [class*="holder-"] span.message
{
	color:#b80000;
}
p.message
{
	border-radius:5px;
	padding: 3px 5px;
}
	p.message.success
	{
		background-color: #E3F9B4;
		border: solid 1px #5D7E00;
		color: #5D7E00;
	}
	p.message.error
	{
		background-color: #f9d0d0;
		border: solid 1px #be0000;
		color:#b80000;
	}

/* INPUTS
------------------------------------------  */

form input,
form textarea,
form select
{
    width: 100%;
    padding: 3px 1%;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    background-color:transparent;
	border: 1px solid #9f9f9f;
	border-radius:5px;
	-o-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}
form input:focus,
form textarea:focus,
form select:focus
{
	outline:none;
}
form textarea
{
	resize: none;	
}

form .checkbox,
form .radio
{
    margin-top:1px;
}
form .checkbox input,
form .radio input
{
	width:auto;
}
form .checkbox label.right,
form .radio label.right
{
	text-align: left;
	padding-left: 0px;
}

form .listbox option
{
    padding: 3px 0
}

form span.readonly
{
    font-size: 16px
}
form input.currency
{
    padding: 3px;
	width: 40px;
}
form input.numeric
{
    padding: 3px;
    width: 35px;
}
form .checkboxset ul,
form .optionset ul
{
    margin: 0;
}
form .checkboxset li,
form .optionset li
{
	margin-bottom: 5px;
	list-style-type:none;
}
form .checkboxset li .checkbox,
form .optionset li .radio
{
	margin-top: 1px;
}

/* ACTIONS
------------------------------------------  */
.Actions
{
	text-align: right;	
}
.Actions .action,
a.btn, 
form button, 
form input[type="submit"]
{
	margin: 10px 0 0 0;
    color: #ffffff;
    display: inline-block;
    padding: 0 15px;
	line-height: 30px;
    font-size: 14px;
	font-weight: bold;
	border:1px solid #626262;
	width: auto;
	background: #626262;
	cursor:pointer;
	border-radius:0px;
	-o-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-webkit-transition: all 0.6s;
	transition: all 0.6s;
}
a.btn:hover, 
form button:hover, 
form input[type="submit"]:hover
{
	border-color:#F78F1E;
	background-color: #F78F1E;
}

/* CMS FORMS
------------------------------------------  */
form
{
    max-width: 500px;
}

#ForgotPassword
{
    margin: 6px 0 0 0;
}
#ForgotPassword a
{
	margin-top: 15px
}

div.field
{
    width: 100%;
    margin-bottom: 10px;
}
form .middleColumn
{
    width: 100% !important;
}
	form .middleColumn .middleColumn
	{
	    width: 100% !important
	}

/* LABELS
------------------------------------------  */
form label
{
	font-size: 13px;	
}
form label.left
{
	padding-right: 5%;
	padding-bottom:10px;
	margin-top: 3px;
	display: block;
	font-size: 13px;
	text-transform:lowercase;
}
form label.right
{
	padding-left: 5%;
	display: inline-block;
	font-size: 13px;
}


/* Custom
---------------------------------------------- */
.header
{
	padding-bottom:0px;
}
.bodyContainer
{
	padding-top:0px;
	min-height:300px;
}

.HomePage .invertedNav
{
	display:none;
}
.HomePage .hangingDecorations 
{
	background:url('../images/home-hanging-lights.png') no-repeat top center;
	padding-top:200px;
}
.HomePage .hangingDecorations .logo
{
	position:relative;
	width:480px;
	margin:0 auto;
	background:#FFFFFF;
	box-shadow:10px 10px 1px 0 rgba(0, 0, 0, 0.08)
}
.HomePage .hangingDecorations .logo img
{
	width:100%;
	float:none;
	margin:0px;
	max-width:none;
}
.HomePage .header
{
	display:none;
}
.HomePage .bodyContainer
{
	min-height:0px;
}
.HomePage .homeNav
{
	margin-top:45px;
}
.HomePage .homeNav li:before
{
	width:50px;
	left:-59px;
	background:url("../images/menu-arrows.png") no-repeat scroll 15px 2px;
}
.HomePage .primary > ul > li
{
	margin-left:63px;
}
.HomePage .primary > ul > li:first-child
{
	margin-left:0px;
}



#Form_ContactForm
{
	width:100%;
	max-width:100%;
	margin-bottom:10px;
}
.ContactForm .contactImage
{
	float:left;
	width:48%;
	margin:0 0 0 2%;
}


.PortfolioPage h1
{
	margin-bottom:5px;
}
.PortfolioPage .categories
{
	max-width:50%;
	min-width:700px;
	margin:0 auto;
}
.PortfolioPage .categories a
{
	font-size:20px;
	text-transform:lowercase;
	border-bottom:1px solid transparent;
	line-height:1.5;
	
	display:inline-block;
	width:22%;
	text-align:left;
	margin:0 2%;
}
.PortfolioPage .categories a:nth-child(4n)
{
	margin-right:0px;
	text-align:right;
}
.PortfolioPage .categories a:nth-child(4n + 1)
{
	margin-left:0px;
}
.PortfolioPage .categories a.active
{
	color:#F78F1E;
}
.lt-ie9 .PortfolioPage .categories a
{
	margin-right:50px;
}
.PortfolioPage .preview
{
	padding:10px;
	position:relative;
	display:none;
	margin-bottom:10px;
	text-align:center;
}
.PortfolioPage .preview:after
{
	content:'';
	display:table;
	clear:both;
}
.PortfolioPage .preview img
{
	float:none;
	max-width:80%;
	margin:0 0 10px 0;
}
.PortfolioPage .preview .name
{
	font-size:17px;
	margin-bottom:10px;
	color:#646464;
}
.PortfolioPage .preview .close
{
	color: #F78F1E;
	border-bottom:1px solid transparent;
}

.PortfolioPage .preview .image
{
	text-align:center;
}
.PortfolioPage .preview.Logos img
{
	max-width:210px;
	margin:0px;
}

.PortfolioPage .portfolioItems
{
	display:none;
	max-width:50%;
	min-width:700px;
	margin:0 auto 50px;
}
.PortfolioPage .portfolioItems.show
{
	display:block;
}
.PortfolioPage .portfolioItems > .item
{
	width:20%;
	margin:10px 3.33%;
	margin:10px calc(10% / 3);
	border-bottom:none !important;
	box-shadow:10px 10px 10px 0 #9A9A9A;
	display: inline-block;
	cursor:pointer;
}
.PortfolioPage .portfolioItems > .item:hover
{
	box-shadow:10px 10px 10px 0 #686868;
}
.PortfolioPage .portfolioItems > .item:nth-child(4n)
{
	margin-right:0px;
}
.PortfolioPage .portfolioItems > .item:nth-child(4n + 1)
{
	margin-left:0px;
}
.PortfolioPage .portfolioItems > .item .details
{
	display:none;
}
.PortfolioPage .portfolioItems img
{
	float:none;
	margin:0px;
	max-width:100%;
	vertical-align:top;
}

.lt-ie9 .PortfolioPage .portfolioItems > .item
{
	width:20%;
	margin:10px 2%;
}

.invertedNav
{
	background:#F78F1E;
	
}
.invertedNav .primary
{
	margin-bottom:0px;
}
.invertedNav .primary > ul > li > a
{
	color:#FFFFFF;
}
.invertedNav .primary > ul > li
{
	padding-top:10px;
}
.invertedNav .primary li:before
{
	top:15px;
	background-image:url('../images/menu-arrows-inverted.png');
}



.footer
{
	text-transform:lowercase;
}
.footer .footerContent
{
	float:left;
	line-height:32px;
}
.footer .details a
{
	display: inline-block;
	border-bottom:none;
	font-size:40px;
	line-height:14px;
	color:#626262;
}
.footer .details a:before
{
	display:block;
}
.footer .details a:hover
{
	color:#F78F1E;
}


.footer .icon-facebook:hover:before
{
	-webkit-transition: all 0.8s;
	transition: all 0.8s;
    
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
}

html.Page td.mobileHide > img
{
	margin-top:21px;
}


@keyframes PhoneShake
{
	0% { transform:rotate(8deg); }
	10% { transform:rotate(-8deg); }
	20% { transform:rotate(7deg); }
	30% { transform:rotate(-7deg); }
	40% { transform:rotate(6deg); }
	50% { transform:rotate(-6deg); }
	60% { transform:rotate(4deg); }
	70% { transform:rotate(-4deg); }
	80% { transform:rotate(2deg); }
	90% { transform:rotate(-2deg); }
	100% { transform:rotate(0deg); }
}
@-webkit-keyframes PhoneShake
{
	0% { -webkit-transform:rotate(8deg); }
	10% { -webkit-transform:rotate(-8deg); }
	20% { -webkit-transform:rotate(7deg); }
	30% { -webkit-transform:rotate(-7deg); }
	40% { -webkit-transform:rotate(6deg); }
	50% { -webkit-transform:rotate(-6deg); }
	60% { -webkit-transform:rotate(4deg); }
	70% { -webkit-transform:rotate(-4deg); }
	80% { -webkit-transform:rotate(2deg); }
	90% { -webkit-transform:rotate(-2deg); }
	100% { -webkit-transform:rotate(0deg); }
}
.footer .icon-phone:hover:before
{
	-webkit-animation:PhoneShake 1s ease;
	animation:PhoneShake 1s ease;
}


@keyframes MailFly
{
	0% { transform:translateX(0px) rotate(0deg); opacity:1; }
	10% { transform:translateX(-2px) rotate(-10deg);; }
	20% { transform:translateX(-4px) rotate(-15deg); }
	30% { transform:translateX(-7px) rotate(-15deg); }
	40% { transform:translateX(-10px) rotate(-15deg); opacity:0; }
	50% { transform:translateX(10px) rotate(-15deg); }
	60% { transform:translateX(10px) rotate(-15deg); }
	70% { transform:translateX(7px) rotate(-15deg); }
	80% { transform:translateX(4px) rotate(-15deg); }
	90% { transform:translateX(2px) rotate(-10deg); }
	100% { transform:translateX(0px) rotate(0deg); opacity:1; }
}
@-webkit-keyframes MailFly
{
	0% { -webkit-transform:translateX(0px) rotate(0deg); opacity:1; }
	10% { -webkit-transform:translateX(-2px) rotate(-10deg);; }
	20% { -webkit-transform:translateX(-4px) rotate(-15deg); }
	30% { -webkit-transform:translateX(-7px) rotate(-15deg); }
	40% { -webkit-transform:translateX(-10px) rotate(-15deg); opacity:0; }
	50% { -webkit-transform:translateX(10px) rotate(-15deg); }
	60% { -webkit-transform:translateX(10px) rotate(-15deg); }
	70% { -webkit-transform:translateX(7px) rotate(-15deg); }
	80% { -webkit-transform:translateX(4px) rotate(-15deg); }
	90% { -webkit-transform:translateX(2px) rotate(-10deg); }
	100% { -webkit-transform:translateX(0px) rotate(0deg); opacity:1; }
}
.footer .icon-mail:hover:before
{
	-webkit-animation:MailFly 1s ease;
	animation:MailFly 0.8s ease;
}
