/*///////////////////////////////////////////////////////////////////////////////////////// TRANSITIONS */
a.cell:before, .cell img{
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
/*///////////////////////////////////////////////////////////////////////////////////////// STRUCTURE */
body{
	height: 100%;
	background: url(/images/bg_grid.png) center top repeat;
	box-sizing: content-box!important;
	-moz-box-sizing: content-box!important;
	-webkit-box-sizing: content-box!important;
}
#platform{
	min-height: 100%;
	height: 100%;
	max-height: 100%;
	position: relative;
}
.bg-circle{
	width: 1700px;
	height: 1700px;
	position: absolute;
	top: 30%;
	left: 50%;
	background: #325084 url(/images/bg_grid.png) center 8px repeat;
	margin-top: -850px;
	margin-bottom: -1700px !important;
	margin-left: -1700px;
	-webkit-border-radius: 1700px;
	-moz-border-radius: 1700px;
	border-radius: 1700px;
	z-index: 0;	
}
	body#Home .bg-circle{
		top: 50%;
	}
#container{
	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
	border-top: 5px solid #ee3747;
	z-index: 99;
	overflow-x: hidden;
}
#content{
	position: relative;
	margin: 0px auto;
	width: 840px;
}
/*///////////////////////////////////////////////////////////////////////////////////////// HEADER */
header{
	position: relative;
	z-index: 1;
	height: 105px;
	background: #fff;
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.10);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.10);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.10);
}
	header .wrapper{
		margin: 0px auto;
		width: 860px;
		padding-top: 30px;
	}
.logo{
	float: left;
	width: 255px;
	height: 40px;
	background: none;
	padding: 0px;
	margin: 0px;
}
	.logo a{
		font-size: 1px;
		overflow: hidden;
		text-indent: -100px;
		display: block;
		width: 255px;
		height: 40px;
		background: url(/images/logo_pdi.png) center center no-repeat;
		-webkit-background-size: 255px auto;
		-moz-background-size: 255px auto;
		background-size: 255px auto;
	}
.phone{
	float: right;
	width: auto;
	color: #b0b0b0;
	font-size: 16px;
	margin-top: -20px;
	font-family: 'Abel', sans-serif;
}
	.phone span{
		display: inline-block;
		margin-left: 5px;
		font-size: 20px;
		color: #ee3747;
		font-weight: 700;
	}
/*///////////////////////////////////////////////////////////////////////////////////////// CONTENT */

.featured{
	margin-left: -50%;
	padding: 30px 50%;
	z-index: 0;
	width: 99%;
	background: #eee;
	box-sizing: content-box!important;
	-moz-box-sizing: content-box!important;
	-webkit-box-sizing: content-box!important;
	line-height: 0px;
}
	.featured img{
		width: 910px;
		margin: -30px 0 -30px -35px;
	}
.body-panel{
	position: relative;
	float: right;
	width: 520px;
	background: #fff;
	padding: 0 40px 40px 40px;
	margin-top: -40px;
	border-bottom: 1px solid rgba(0,0,0,0.10);
	border-top: 10px solid #7b9ad0;
	min-height: 500px;
}
.side-panel{
	float: left;
	padding-left: 20px;
	width: 220px;
	line-height: 21px;
	color: #86a8e4;
}
	.side-panel a {
		color: #86a8e4;
	}
/*///////////////////////////////////////////////////////////////////////////////////////// CONTENT */
#menu{
	position: relative;
	margin-top: -160px;
	margin-left: -20px;
	width: 240px;
	background: #ee3747;
	border-bottom: 1px solid #263f6a;
	margin-bottom: 20px;
}
	#menu ul,
	#menu ul li{
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	#menu ul li{
		border-bottom: 1px solid rgba(0,0,0,0.10);
	}
	#menu ul li:last-child{
		border: none;
	}
	#menu ul li a{
		display: block;
		font: normal 17px/17px 'Abel', sans-serif;
		color: #fff;
		padding: 15px 0px 15px 15px;
		border-left: 7px solid #ee3747;
	}
	#menu ul li a:hover,
	#menu ul li a.active{
		border-color: #7b9ad0;
		padding-left: 30px;
	}
#menu ul li a.active{
	background: rgba(0,0,0,0.10);
}
/*///////////////////////////////////////////////////////////////////////////////////////// FOOTER */

footer{
	text-align: center;
	padding: 70px 0;
	color: #a3a3a3;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
}
footer a{
	color: #a3a3a3;
}

/*///////////////////////////////////////////////////////////////////////////////////////// HOME */
/*---- HEADER ----*/
#Home header{
	margin-bottom: 35px;
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
#Home header .logo{
	display: none;
}
#Home #content{
	display: block;
	width: 100% !important;
}
/*---- CONTENT ----*/
#hero-home{
	position: relative;
	margin: 0px auto;
	width: 700px;
	height: 700px;
	background-image: url(/images/logo_pdi-icon.png), url(/images/bg_home-hero.jpg);
	background-position: center center, center center;
	background-repeat: no-repeat, no-repeat;
	-webkit-background-size: 356px auto, auto auto;
	-moz-background-size: 356px auto, auto auto;
	background-size: 356px auto, auto auto;
	-webkit-border-radius: 700px;
	-moz-border-radius: 700px;
	border-radius: 700px;
}
.strokes{
	position: absolute;
	width: 710px;
	height: 710px;
	-webkit-border-radius: 710px;
	-moz-border-radius: 710px;
	border-radius: 710px;
	z-index: 99;
	pointer-events:none;
}
.red-stroke{
	border: 1px solid rgba(238,55,71,0.4);
	top: -16px;
	right: -16px;
}
.blue-stroke{
	border: 1px solid #7897cd;
	bottom: -16px;
	left: -16px;
}
.cell{
	position: absolute;
	z-index: 50;
	width: 162px; /*168px*/
	height: 162px; /*168px*/
	padding: 3px;
	border: 1px solid #7b9ad0;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	font: normal 16px/16px 'Abel', sans-serif;
}
	.cell:before {
    	content: attr(data-title);
		position: absolute;
		width: 90px;
		height: 55px;
		padding-top: 35px;
		color: #fff;
		z-index: 101;
		background: #ee3747;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		border-radius: 100px;
		text-align: center;
	}
	.cell:hover:before{
		background: #7b9ad0;
	}

.cell ul, .cell ul li{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.cell img{
	width: 100%;
	height: auot;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
}
	
.slides{
    z-index:0;
	pointer-events:none;
}
.slides.active{
    visibility:visible;
}
/*-- cell positions --*/
.g1{ top: 106px; left: -16px;}
	.g1:before{ left: -30px;}

.g2{ top: -42px; left: 50%; margin-left: -84px;}
	.g2:before{ top: -45px; left: 50%; margin-left: -45px; height: 60px; padding-top: 30px;}

.g3{ top: 106px; right: -16px;}
	.g3:before{ right: -30px;padding-top: 25px; height: 65px; font-size: 14px;}
	
.g4{ bottom: 106px; right: -16px;}
	.g4:before{ right: -30px;}
	
.g5{ bottom: -42px; left: 50%; margin-left: -84px;}
	.g5:before{ bottom: -45px; left: 50%; margin-left: -45px;}

.g6{ left: -16px; bottom: 106px;}
	.g6:before{ left: -30px;}
	
/*---- FOOTER ----*/
#Home footer{
	padding: 150px 0;
}
/*///////////////////////////////////////////////////////////////////////////////////////// GALLERY */
.gallery{
	margin-left: -10px;
}
.gallery a{
	float: left;
	width: 31.2%;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 3px;
	margin: 0 0 10px 10px;
	border: 1px solid rgba(0,0,0,0.10);
}
	.gallery a:hover{
		background: #7b9ad0;
	}
.gallery a img{
	width: 100%;
}
/*///////////////////////////////////////////////////////////////////////////////////////// GLOBAL */
h1{
	padding: 13px 36px;
	position: relative;
	display: inline-block;
	background: #7b9ad0;
	margin: -10px 0 25px -40px;
	color: #fff;
	font-size: 28px;
}
h2{
	font-size: 22px;
	color: #ee3747;
}
h3{
	font-size: 18px;
	color: #fff;
}
ul.list{
	padding: 20px 0;
	margin-left: 35px;
	list-style: none;
}
	ul.list li{
		position: relative;
		padding: 1px 0;
	}
	ul.list li:before{
		float: left;
		content: '•';
		color: #ee3747;
		font-size: 24px;
		line-height: 20px;
		margin-right: 10px;
	}
.button{
	display: inline-block;
	background: #c92533;
	color: #fff !important;
	padding-bottom: 5px;
	-webkit-border-radius: 10px 10px 3px 3px;
	-moz-border-radius: 10px 10px 3px 3px;
	border-radius: 10px 10px 3px 3px;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.30);
}
	.button span{
		display: block;
		background: #ee3747;
		padding: 10px 20px 12px 20px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	.button:hover{
		border-bottom-width: 2px;
		margin-top: 3px;
		padding-bottom: 2px;
		color: #fff !important;
		text-shadow: -1px -1px 0px rgba(0,0,0,0.30);
	}