/*-----------------------------------------------------------------------------
DesignDesign - Product Site

date:      01/24/14
author:    DesignDesign Inc
website:   designdesignonline.com


	BRAND COLOR PALETTE 
	Red 		#EE3124 /* Red *
	Dk Grey		#414042 /* Dk Grey *
	Lt Grey		#4BCBEC /* Lt Grey *

	
	FONTS
	Lato (Google)
	

/* Remove margin, padding and border from everything
-----------------------------------------------------------------------------*/


*, *:after, *:before {	margin: 0;
	padding: 0; 
	border: 0; 
	
	/* Border Box makes all padding and borders within the specified width, not additive */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	}

img {	max-width:100%; height: auto;	}


/* Styles for layout
-----------------------------------------------------------------------------*/

.justify{text-align:justify;}
.clear{clear:both;}
.right{float:right;}
.left{float:left;}
.center{text-align: center;margin: 0 auto;}
.holder {width:100%;}
.border{border:#E31D38 solid 2px;}
.pad10{padding:10px;}
.pad25{padding:25px;}
.pad50{padding:50px;}
.mar10{margin:10px;}
.mar25{margin:25px;}
.mar50{margin:50px;}
.marleft50{margin-left:50px;}
.marright50{margin-right:50px;}
.marright15{margin-right:15px;}
.marright10{margin-right:10px;}
.padleft20{padding-left:20px;}
.padright20{padding-right:20px;}
.padleft50{padding-left:50px;}
.padright50{padding-right:50px;}
.martop10{margin-top:8px;}
.martop15{margin-top:15px;}
.padbot10{padding-bottom:10px;}
.padbot15{padding-bottom:15px;}
.marbot15{margin-bottom:15px;}
.marbot25{margin-bottom:25px;}
.martop50{margin-top:50px;}
.martop25{margin-top:25px;}
.martop50{margin-top:50px;}
.padtop10{padding-top:10px;}
.padtop50{padding-top:50px;}
.padtop50{padding-top:50px;}
.marbot50{margin-bottom:50px;}
.marbot50{margin-bottom:50px;}
.padbot50{padding-bottom:50px;}
.padbot50{padding-bottom:50px;}
.padtop25{padding-top:25px;}
.padbot25{padding-bottom:25px;}
.martopneg50{margin-top:-58px;}
.padright15{padding-right: 15px;}
.width400 { width: 400px; }
.width525 { width: 550px; }

.roundcorners {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */
}



/* Set up the document
-----------------------------------------------------------------------------*/
html {
}

body	{
	background-color:#FFF;
	font: 62.5%/1.5  "Lato", sans-serif;
}



#wrapper	{ 
	width: 100%; /* Set page width here - you can also use percentage */
	text-align:left;  
	margin: 0 auto;
}

.container	{
	width: 100%;
	margin: 0 auto;
	text-align: left;
	}

.fullwidthbg {
	max-width: 100%; /* Set page width here - you can also use percentage */
	}
	
	.dkgreybg {background-color: #414042 /* Dk Grey */;}
	.ltgreybg {background-color: #F1F2F2 /* Lt Grey */;}
	.redbg {background-color: #8c8c8c /*Grey */; } /*originally was #EE3124 (Red) but they wanted less red */ 
	.red {color: #EE3124 /* Red */;}
	.dkred {color: #CCC;} /* Was #631B15 when bk was red */
	.white {color:#FFF;}
	.center {text-align:center;}
	.right {float:right;}
	.left {float: left;}



/* Typography
-----------------------------------------------------------------------------*/

h1 {	font-size: 24px; line-height: 30px; font-family: "Lato", sans-serif;	font-weight:300;	color: #414042; }
h2 {	font-size: 20px; line-height: 30px;	font-family: "Lato", sans-serif;	font-weight:300;	color: #414042; }
h3 {	font-size: 18px; font-family: "Lato", sans-serif;	font-weight:400;	color: #414042; }
h4 {	font-size: 18px; font-family: "Lato", sans-serif;	color: #414042; }
h5 {	font-size: 16px; font-family: "Lato", sans-serif;	color: #414042; }
	
p {		font-size: 14px; font-family: "Lato", sans-serif;	color: #414042; }

ul {	list-style: none; font-size: 1.2em; font-family: "Lato", sans-serif;	}
li {	font-size: 1.2em; font-family: "Lato", sans-serif; color: #414042;	}

.bold 			{	font-weight: bold;		}
.caps 			{	text-transform: uppercase; }

.trackout		{	letter-spacing: 1px;	} 
.dashedline 	{	border-bottom: 2px #414042 dotted; display: block;		}
.dashlinetop 	{	border-top: 2px #414042 dotted;		}

.centerimg {	display: block;  margin-left: auto;  margin-right: auto;	}
.numbericon {	float: left;	width: 45px;	margin-right: 10px;	}
.process p	{	overflow: hidden;	}

/* SHOW / HIDE */
.showontablet	{ display: none; }
.showondesktop 	{ display: none; }
.showonmobile	{ display: none; }


/* LINKS
-----------------------------------------------------------------------------*/

a:link {color:inherit; text-decoration: none;}      /* unvisited link */
a:visited {color:inherit; text-decoration: none;}  /* visited link */
a:hover {color:inherit; text-decoration: none; }  /* mouse over link */
a:active {color:inherit; text-decoration: none;}  /* selected link */

#expanderContent a, .overview a				{ 	text-decoration: underline	;}
.overview a:hover, #expanderContent a:hover	{	text-decoration: none		;}


/* Navigation
-----------------------------------------------------------------------------*/

.menu_text, .menu_text2 {	font-size: 16px;	text-decoration: none;	}
.menu_text:hover 		{	color: #EE3124;	text-decoration: none;	}
.jumplink 				{	text-align: right; 	font-size: 14px; text-decoration: none;	font-style: italic;	padding: 5px 0px 5px 0px;	}
.jumplink:hover 		{	text-decoration: underline;		color: #EE3124;		}

.button {
	border: #FFF 2px solid;
	text-align: center;
	padding: 8px;
	color: #FFF;
	width: 300px;
 	display:block;
    margin: 0 auto;
	}

.button:hover {
	border: #414042 2px solid;
	background-color: #414042; /* Dk Grey */
	color: #EE3124;
	text-align: center;
	padding: 8px;
	text-decoration: none;
}


.more-btn {
	width:120px;
	height: 20px;
	background-color:#fff;
	padding: 8px;
	border: 2px solid #EE3124;
		
	font-size: 14px;
	font-family: "Lato", sans-serif;
	color: #414042;
}

.more-btn:hover {
	background-color:#EE3124;
	color:#fff;
}



/* Homepage
-----------------------------------------------------------------------------*/

#expanderHead {
	text-align: right;
	color: #CCC;
	margin-right: 15px;
	font-size: 14px;
}


#expanderContent {	
	width: 100%;
	max-width: 960px;
	margin-top: 20px;
	text-align: left;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
}

.dkgrey_border{
	border: #414042 2px solid;
	display:inline-block;
	text-align: center;
	padding: 5px 10px 5px 10px;
	margin-top:20px;
}

.dkgrey_border:hover{
	border: #EE3124 2px solid;
	background-color:#EE3124;
	color: #FFF;
	display:inline-block;
	text-align: center;
	padding: 5px 10px 5px 10px;
	margin-top:20px;
	text-decoration: none;
}

.white_border a, .white_border a:hover {
		text-decoration: none;
}

.homeleft {
	width: 49%;
	margin-right: 2%;
	float: left;
}

.homeright {
	width: 49%;
	float: left;
}


/* About	
-----------------------------------------------------------------------------*/

.process {
	margin: 20px 0 20px 0;	
}





/* Portfolio
-----------------------------------------------------------------------------*/


	#Grid .mix{	opacity: 0;	display: none;  }
	
	.banner { position: relative; overflow: auto; width: 100%; height: auto;}
    .banner li { list-style: none; }
    .banner ul li { float: left; }


	.projdesc {
		width: 65%;
		float: left;
		text-align: left;	
	}
	
	.projlist {
		width: 30%;
		float: right;
		text-align:left;
		border-left: dotted 2px #414042;
		margin-left: 3%;
		padding-left: 2%;
	}
	
	

/* Email Signup Footer
-----------------------------------------------------------------------------*/	
		
	.subscribe {
		padding: 10px 0;	
	}
	
	.subscribe-text {
		height: 25px;
		width: 65%;
		padding: 5px;
	}
	
	.subscribe-submit {
		height: 25px;
		background-color: #414042;
		padding: 5px;
		margin-left: 5px;
		color: #fff;
	}
	
	.subscribe-submit:hover {
		background-color: #EE3124;
	}
		
	
/* Contact Form
-----------------------------------------------------------------------------*/	
	
		
	.formleft {
		float: left;
		width: 50%;
		padding-right:5%;
	}	
	
	.formright {
		float: left;
		width: 50%;
	}
	
	.input {
		border: 1px solid #333;
		height: 40px;
		padding: 5px;
		margin: 10px;
	}
	
	input.text
		{
		padding: 3px;
		border: 1px solid #999999;	
	}
	
	
	.formpadding {
		padding-left: 35px;	
		padding-right: 35px;
		padding-top: 35px;
		padding-bottom: 35px;
	}
	
	#contact-form {
	}
		
	.contacttextbox {
		width: 100%;
		font-size:14px;
		height: 30px;
		padding-left: 6px;
		margin:0px 0px 10px 0px;
		border:1px solid #333; /* DK GREY */	
		color: #003F4C;
		font-family: "pt-sans",sans-serif;
		font-style: normal;
		background-color: #F1F2F2;	
	}
	
	.openfield {
		font-size:14px;
		width: 100%;
		height: 160px;
		padding:4px;
		margin:0 0 10px 0;
		border:1px solid #333; /* DK GREY */
		color: #003F4C;
		font-family: "Lato", sans-serif;
		font-style: normal;
		background-color: #F1F2F2;
	}
	
	.contact-form textarea {
		resize:none;
		border:1px solid #6D6F71; /* DK GREY */
		font-family: "Lato", sans-serif;
		font-size:15px;
		color: #414042;
		font-style: normal;
	}
	
	
	.contact-form input:focus, textarea:focus { 
		border:solid 1px #003F4C;
	
	}
	
	.label {
		float:left;
		width: 90px;
		font-size: 15px;
		line-height:20px;
		font-family: "Lato", sans-serif;
		font-style: normal;
		font-weight: 400;
		color: #414042;
	}

	
	.contact-form #submit {
		float:right;
		width:100px;
		height: 40px;
		background-color:#EE3124;
		color:#fff;
		padding: 10px;
		font-size:18px;
		border: none;
	}
	
	.contact-form #submit:hover {
		background-color:#414042;
	}
	
	
	.required {
		display: none;  /*this hides the honeypot form field that if entered cancels form */	
	}
	
	.formerror {
		border: dotted 2px #EE3124;
		padding: 25px;
		margin-bottom: 25px;
	}
	
	
	

/* RESPONSIVE COLUMNS 
-------------------------------------------------------------------------------*/

.one 	{ 	width:8.33333333333%;			}
.two 	{ 	width:16.6666666667%;			}
.three 	{	width:25.0%;					}
.four 	{	width:33.3333%;			}
.five 	{	width:41.6666666667%;			}
.six 	{	width:50.0%;					}
.seven	{	width:58.3333333333%;			}
.eight 	{	width:66.6666666667%;			}
.nine	{	width:75.0%;					}
.ten	{	width:83.3333333333%;			}
.eleven	{	width:91.6666666667%;			}
.twelve	{	width:95%;		}

.col 	{	padding-right:3.3333%;	float:left;	}

.col:last-of-type {  padding-right: 0;	}