/* PORTFOLIO */


a img { border: none; }


.mobile
{
	display: none;
}

.desktop
{
	display: inline;
}



section.container
{
	width: 100%;
	max-width: 1180px;
	margin: 30px auto 0 auto;
	height: 200px;
	display: block;
}



/* typography */
/* -------------------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, p, address
{
	font-family: Helvetica, Arial, sans-serif;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: rgb(51, 51, 51);
}

ul, li
{
	font-family: Helvetica, Arial, sans-serif;
	color: rgb(51, 51, 51);
	
}

h1, h2, h3, h4, h5
{
	font-weight: bold;

}

h1
{
	text-align: center;
	font-size: 46px;
	line-height: 48px;
	margin-bottom: 18px;
}

h2
{
	text-align: center;
	font-size: 32px;
	line-height: 32px;
	color: #9e9e9c;
}

h2.contact
{
	border-top: solid 1px #ccc;
	padding: 30px 0 0 0;
	text-align: center;
	font-size: 32px;
	line-height: 32px;
	color: rgb(51, 51, 51);

}


h3
{
	font-size: 24px;
	line-height: 24px;
	margin-bottom: 8px;
}

h4
{
	font-weight: bold;
	font-size: 12px;
	line-height: 14px;
	padding-bottom: 5px;
	color: rgb(102, 102, 102);
}

h5
{
	font-size: 14px;
	line-height: 14px;
	padding-bottom: 8px;
	margin: 10px 0 0 0;
}

p
{
	font-weight: normal;
	font-size: 14px;
	line-height: 16px;
	padding: 0 0 0 0;
	margin: 0 0 10px 0;
}

ul
{
	
}

ul li
{
	list-style-type: disc;
	font-size: 14px;
}

div.center
{
	width: 75%;
	margin: 0 auto;
	
}


div.header
{
	padding: 0 0 0 0;
	height: 130px;
	width: 100%;
	max-width: 1180px;
	border-bottom: solid 10px #000;
}


div.header img
{
	float: left;
	width: 105px;
}

div.header div.title
{
	float: left;
	width: calc(100% - 105px);
	max-width: 970px;
	text-align: center;
}


div.nav
{
	width: 100%;
	max-width: 1180px;
	margin: 20px 0 0 0;
}

div.controls
{
	float: left;
	width: 100%;
	max-width: 1180px;
	position: relative;
	z-index: 5;
}

div.nav button.prev
{
	background: url('../img/Main/but_prev.jpg') no-repeat scroll top left;
	width: 54px;
	height: 54px;
	text-indent: -6666px;
	display: block;
	overflow: hidden;
	float: left;
	border: none;
	cursor: pointer;
}

div.nav button.next
{
	background: url('../img/Main/but_next.jpg') no-repeat scroll top left;
	width: 54px;
	height: 54px;
	text-indent: -6666px;
	display: block;
	overflow: hidden;
	float: right;
	border: none;
	cursor: pointer;
}


div.examples
{
	width: 100%;
	max-width: 1180px;
	margin: -74px 0 0 0;
	float: left;
	/*pointer-events:none;*/
}



div.example
{
	margin: 20px 0 0 0;
	width: 100%;
	max-width: 1180px;
	clear: left;
	clear: right;
}


div.example div.logo
{
	float: left;
	width: calc(50% - 20px);
	max-width: 570px;
	overflow: hidden;
	padding-right: 10px;
	text-align: right;
}

div.example div.logo img {
	width: 100%;
	height: auto;
	max-width: 180px;
}


div.example div.title
{
	float: left;
	width: calc(50% - 20px);
	max-width: 570px;
	overflow: hidden;
	padding-left: 10px;
	margin-top: 20px;
}

div.example div.title h4
{
	font-size: 12px;
	line-height: 14px;
	color: rgb(102, 102, 102);
	font-weight: normal;
	width: 500px;
	line-height: 28px;
}



div.twocol,
div.onecol
{
	margin: 20px 0 0 0;
	float: left;
	clear: left;
	width: 100%;
}

div.twocol div.left,
div.onecol div.left
{
	width: calc(50% - 20px);
	max-width: 570px;
	padding-right: 10px;
	float: left;
	overflow: hidden;
}

div.twocol div.right,
div.onecol div.right
{
	width: calc(50% - 20px);
	max-width: 570px;
	padding-left: 10px;
	float: left;
	overflow: hidden;
}


div.onecol div.left {
	padding-left: 10px;
	padding-right: 0;
}

div.onecol div.right {
	padding-left: 0;
	padding-right: 10px;
}

div.onecol img {
	 max-width: 1160px;
	 width: 100%;
	 height: auto;
}

div.twocol img {
	 max-width: 580px;
	 width: 100%;
	 height: auto;
}



div.onecol div.img
{
	width: 100%;
	text-align: center;
}



footer
{
	clear: left;
	width: 100%;
	max-width: 1180px;
	padding: 25px 0 0 0;
}

footer h3
{
	text-align: left;
	width: 100%;
	border-bottom: solid 3px #000;
	padding-bottom: 5px;
}

footer p
{
	font-size: 18px;
	line-height: 22px;
	margin-top: 30px;
	
}

footer p.contact
{
	float: left;
}

footer a
{
	display: inline-block;.
	overflow: hidden;
	text-indent: -6666px;
	width: 81px;
	height: 81px;
	margin: 10px 40px 10px 40px;
}

footer address
{
	float: left;
	margin: 25px 0 0 10px;
	padding-bottom: 60px;
}

footer address p
{
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 14px;
	font-style: normal;
}

section.contact a.contact
{
	display: inline-block;.
	overflow: hidden;
	text-indent: -6666px;
	width: 81px;
	height: 81px;
	margin: 10px 40px 10px 40px;
}

a.twitter  { background: url('/img/Main/twitter.jpg') no-repeat scroll top left; }
a.linkedin { background: url('/img/Main/linkedin.jpg') no-repeat scroll top left; }
a.facebook { background: url('/img/Main/facebook.jpg') no-repeat scroll top left; }
a.email  { background: url('/img/Main/email.jpg') no-repeat scroll top left; }



/* Swipe 2 required styles */
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
	max-width:1220px;
	margin:0 auto
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}



/* mobile overrides */


@media all and (max-width: 560px) {


	div.title h1 {
		text-align: center;
		font-size: 36px;
		line-height: 38px;
		margin-bottom: 8px;
	}

	div.title h2
	{
		text-align: center;
		font-size: 22px;
		line-height: 22px;
		color: #9e9e9c;
	}
	
	div.nav {
		height: 54px;
	}

	div.nav div.controls
	{
		display: none;
	}

	.mobile
	{
		display: inline;
	}

	img.mobile {
		display: none;
	}

	div.example div.logo img.swipebut
	{
		max-width: 96px;
		float: left;
	}


	div.twocol div.left,
	div.onecol div.left,
	div.twocol div.right,
	div.onecol div.right
	{
		width: calc(100% - 20px);
		max-width: 1180px;
	}


	
}

@media all and (max-width: 320px) {

	.mobile
	{
		display: inline;
	}
	
	.desktop
	{
		display: none;
	}

	img.mobile {
		display: inline;
	}
	
	h1
	{
		font-size: 22px;
		line-height: 28px;
		padding: 0;
		margin: 0;
	}
	h2
	{
		font-size:18px;
		line-height: 20px;
	}
	h3
	{
		font-size: 14px;
		margin: 0;
	}
	h4
	{
		font-size: 12px;
		line-height: 14px;
		color: rgb(102, 102, 102);
	}
	h5
	{
		font-size: 14px;
	}
	p
	{
		width: 320px;
	}

	div.twocol div.left,
	div.onecol div.right{
		padding-left: 10px;
		padding-right: 0;
	}

	
	
	
	footer
	{
		width: 290px;
		padding-top: 10px;
	}
	
	footer p.contact
	{
		margin: 10px 0 0 0;
	}
	
	footer address
	{
		margin: 10px 0 0 0;
	}
		
	
	section.contact a.contact,
	footer a.contact
	{
		width: 61px;
		height: 61px;
		background-size: 61px 61px;
		margin: 15px 10px 15px 0;
	}
	
	div.center
	{
		width: auto;
		margin: 0 auto;

	}
	

}