/* hack for fixing parent's dimensions to match floating child's values */
/* CLEARFIX Hack - v1 */
.clearfix:after {
	content: "."; /* alternatively with a "SPACE" in place of "." */
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}

/* Global Reset */
*, ::before, ::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
* {
	margin:0;
	padding:0;
}
html {
	height:100%;
}
body {
    min-height: 100%;
    font-family: Ubuntu;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
img {
	vertical-align:middle;
	max-width:100%;
}

/* GENERAL CLASSES */
.alignCenter {
	text-align:center;
}
.float-L {
	float:left;
}
.float-R {
	float:right;
}
.clear-B {
	clear:both;
}
.TxtAlign-L {
	text-align:left;
}
.TxtAlign-R {
	text-align:right;
}
h4 {
	color:#000;
	font-size:30px;
	font-weight:300;
}
.h4-marginBottom {
	margin-bottom:30px;
}

/* Header */
header {
	border-bottom:1px solid #e0e0e0;
}
#header-wrapper {
	max-width: 1340px;
	height:125px;
    padding: 0 25px;
	margin:0 auto;
}
#header-content {
	position:relative;
	width:100%;
	height:100%;
}
#header-logo {
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
}
#header-logo img {
	width:155px;
}

#form1 {
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
}

/* Badge Details */
#badgeDetails {
	min-height:100px;
}
#badgeDetails-wrapper {
	max-width:1340px;
	margin:0 auto;
}
#badgeDetails-content {
	position:relative;
	width:100%;
	margin:0 auto;
	padding:40px 20px;
}
.badgeDetails-badge {
	float:left;
	width:calc(25% - 15px);
	margin:0 15px 0 0;
	text-align:center;
}
	.badgeDetails-badge img{
		/*width:70%;*/
	}
.badgeDetails-title {
	float:right;
	width:calc(75% - 15px);
	margin:0 0 0 15px;
	margin:0 0 170px 0;
	font-size:50px;
}
#badgeDetails-details {
	position:absolute;
	right:20px;
	bottom:40px;
	width:calc(75% - 40px);
	margin:0 0 0 15px;
}
.verified {
	font-size:10px;
	margin:50px 0 0 0;
}
	.verified a {
		font-size:20px;
	}
.badge-detail {
	color:#909090;
	font-size:14px;
	margin:30px 0 0 0;
}

/* Badge Info */
#badgeInfo {
	background: url("../Content/Images/dashboard-bg.png") center top repeat #e2e2e2;
	min-height:200px;
}
#badgeInfo-wrapper {
	max-width:1340px;
	margin:0 auto;
}
#badgeInfo-content {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex; 
	width:100%;
	min-height:200px;
	padding:50px 20px;
}
.badgeInfo {
	font-size:1em;
	position:relative;
}
	.badgeInfo p,
	.badgeInfo span {
		margin:0 0 10px 0;
		color:#707070;
		font-weight:300;
		font-size:14px;
		line-height:22px;
	}
	.badgeInfo li {
		margin:0 0 10px 10px;
	}
	.badgeInfo .toggle {
		display:none;
		position:absolute;
		top:13px;
		right:10px;
		padding:0 3px 3px 3px;
	}
		.badgeInfo .toggle:after {
			display: inline-block;
			vertical-align: middle;
			content: "Q";
			font-family: "peoplecert";
			font-size: 1em;
			font-weight: normal;
			line-height: 1;
			color: #ff3200;
		}
		.badgeInfo .toggleClose:after {
			content: "P";
		}
#badgeInfo-skills,
#badgeInfo-description,
#badgeInfo-prerequisites {
	background:#fff;
	border:1px solid #9c9c9c;
	padding:25px 30px;
}
#badgeInfo-skills {
	float:left;
	margin:0 15px 0 0;
	width:calc(25% - 15px);
}
#badgeInfo-description {
	float:left;
	margin:0 15px 0 15px;
	width:calc(50% - 30px);
}
#badgeInfo-prerequisites {
	float:left;
	margin:0 0 0 15px;
	width:calc(25% - 15px);
}

/* Footer */
footer {
	background-color:#000;
}
footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.footer {
	max-width:1340px;
	margin:0 auto;
	padding:55px 20px 20px 20px;
	color:#fff;
	font-family:Ubuntu;
	font-size:14px;
	font-weight:300;
}
.footer-wrapper {
	width:100%;
}
	.footer-wrapper .copyright {
		margin:0 0 20px 0;
		color:#6d6d6d;
		float:left;
		clear:both;
		font-size:13px;
	}
.footerMenu {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
	width:66.667%;
}
	.footerMenu .section {
		float:left;
		font-size:15px;
		padding:0 30px 30px 0;
	}
	.footerMenu .title {
		font-size: 15px;
		font-size: 1em;
		font-weight: 300;
		padding-bottom: 10px;
	}
	.footerMenu .section a::before {
		content: '/';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		color: #ff3200;
	}
	.footerMenu .section a {
		position: relative;
		display: block;
		width: 155px;
		padding-left: 10px;
		color: #fff;
		text-decoration: none;
		-webkit-transition: color .1s linear;
		-ms-transition: color .1s linear;
		-moz-transition: color .1s linear;
		-o-transition: color .1s linear;
		transition: color .1s linear;
		font-size: 15px;
		font-size: 1em;
		font-weight: 300;
		line-height: 1.4;
	}
	.footerMenu .section a:visited {
		color:#fff;
	}
	.footerMenu .section a:hover {
		color:#ff3200;
	}
	.footerMenu .section ul {
		height:150px;
	}
	.partner {
		display:none;
		text-align:center;
		font-size:11px;
	}
		.partner a {
			display:block;
			color:#ff3200;
			text-decoration: none;
			padding:15px 20px;
		}
		.partner a:visited {
			color:#ff3200;
		}
		.partner a:hover {
			color:#ff3200;
		}
		.partner a::after {
			padding-left: 15px;
			vertical-align: middle;
			content: "a";
			font-family: "peoplecert";
			font-size: 1.5em;
			font-weight: normal;
			line-height: 1;
		}
	.app {
		float:left;
		font-size:15px;
		max-width:23%;
	}
		.app ul {
			margin:10px 0 0 0;
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
		}
			.app ul li {
				display:block;
				flex-grow:1;
				flex-basis: 0;
				margin:0 5px 10px 0;
			}
				.app ul li a img {
					width:135px;
					max-width:none;
				}
.social {
	float:right;
	font-size:15px;
	padding:0 0 0 0;
	width:8.3%;
	min-width:90px;
}	
	.social .facebook,
	.social .linkedin,
	.social .youtube
	{
		color: #fff;
		text-decoration: none;
		-webkit-transition: color .1s linear;
		-ms-transition: color .1s linear;
		-moz-transition: color .1s linear;
		-o-transition: color .1s linear;
		transition: color .1s linear;
	}
	.social .facebook::before {
		content: "b";
		font-family: "peoplecert";
		font-size: 1.5em;
		font-weight: normal;
		line-height: 1.6;
	}
	.social .linkedin::before {
		content: "f";
		font-family: "peoplecert";
		font-size: 1.5em;
		font-weight: normal;
		line-height: 1.6;
	}
	.social .youtube::before {
		content: "g";
		font-family: "peoplecert";
		font-size: 1.5em;
		font-weight: normal;
		line-height: 1.6;
	}
	.social a:visited {
		color:#fff;
	}
	.social a:hover {
		color:#ff3200;
	}
	.social ul {
		margin:10px 0 0 0;
		display:flex;
		justify-content: space-between;
	}
	.social li {
		text-align:center;
	}
	
/* BREAKPOINTS */
@media screen and (max-width: 990px) {
	body {
		font-size: 1em;
	}
	
	h4 {
		font-size: 22px;
		font-weight:400;
	}
	.badgeDetails-title {
		float: right;
		width: calc(75% - 15px);
		margin: 0 0 0 15px;
		margin: 0 0 150px 0;
		font-size: 30px !important;
	}
	.footer {
		padding:0;
	}
	.footer-wrapper .copyright {
		padding:25px 5% 0 5%;
		font-size:11px;
	}
    .footerMenu {
		width:100%;
		float:none;
	}
		.footerMenu nav {
			display: none;
			padding: 15px 0 30px 0;
		}	
		.footerMenu nav.active {
			display: block;
			padding: 15px 0 30px 0;
		}
		.footerMenu ul li {
			text-align: center;
			display: list-item;
			padding: 5px 0;
		}
		.footerMenu .section {
			font-size:0.9em;
			float:none;
			padding:0;
			text-align:center;
		}
			.footerMenu .section ul {
				height: auto;
			}
			.footerMenu .section a {
				width: 100%;
				text-align: center;
				color: #ff3200;
				text-decoration: none;
				-webkit-transition: color .1s linear;
				-ms-transition: color .1s linear;
				-moz-transition: color .1s linear;
				-o-transition: color .1s linear;
				transition: color .1s linear;
				font-weight: 300;
			}
			.footerMenu .section a::before {
				content: none;
			}
			.footerMenu .section a:visited {
				color:#ff3200;
			}
			.footerMenu .section a:hover {
				color:#ff3200;
			}
		.footerMenu .title {
			font-size: 1em;
			font-weight: 300;
			padding-bottom: 0;
			border-bottom:1px solid #2d2d2d;
			cursor:pointer;
			line-height: 45px;
		}
		.footerMenu .title::after {
			display: inline-block;
			/* -webkit-transition: all .2s;
			-ms-transition: all .2s;
			-moz-transition: all .2s;
			-o-transition: all .2s;
			transition: all .2s; */
			padding-left: 12px;
			vertical-align: middle;
			content: "c";
			font-family: "peoplecert";
			font-size: 1em;
			font-weight: normal;
			line-height: 1;
			color: #ff3200;
		}
		.footerMenu .titleClose::after {
			content: "l";
		}
		/* .footerMenu .title.is-active::after {
			-webkit-transform: scaleY(-1);
			-ms-transform: scaleY(-1);
			-moz-transform: scaleY(-1);
			-o-transform: scaleY(-1);
			transform: scaleY(-1);
		} */
	.partner {
		display:block;
	}
	.social {
		float: left;
		padding: 25px 0 0 0;
		width: 50%;
		text-align:center;
	}
	.social .title {
		font-size:1em;
	}
	.social ul {
		display:block;
	}
	.social ul li {
		display:inline-block;
		padding:0 5px;
		font-size:15px;
	}
	.app {
		float:right;
		width:50%;
		max-width:none;
		padding:25px 0 0 0;
	}
		.app ul {
			display:block;
			margin:0;
		}
		.app ul li {
			display:block;
			text-align:center;
		}
		.app .title {
			display:none;
		}
}

@media screen and (max-width: 850px) {
	body {
		font-size: 1em;
	}
	
	h4 {
		font-size: 1.4em;
		font-weight:400;
	}
	.h4-marginBottom {
		margin-bottom:20px;
	}
	.badgeDetails-title {
		position: relative;
		top:0;
		right:15px;
		width: calc(75% - 5%);		
		margin: 0 0 140px 0;
		font-size: 40px;
	}
	.verified {
		font-size: 10px;
		margin: 20px 0 0 0;
	}
		.verified a {
			font-size: 16px;
		}
	#badgeDetails-content {
		padding:30px 5% 10px 5%;
	}
		#badgeDetails-details {
			position: absolute;
			right: 5%;
			bottom: 10px;
			width: calc(75% - 10%);
			margin: 0 0 0 0;
		}
	#badgeInfo-content {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex; 
		width:100%;
		min-height:200px;
		padding:30px 5% 10px 5%;
		flex-direction:column;
	}
	#badgeInfo-skills,
	#badgeInfo-description,
	#badgeInfo-prerequisites {
		float:none;
		margin:0 0 20px 0;
		width:auto;
		padding:15px 20px;
		font-size:1em;
	}
	#badgeInfo-description {
		order:0;
	}
	#badgeInfo-prerequisites {
		order:1;
	}
	#badgeInfo-skills {
		order:2;
	}
	.badgeInfo {
		height:50px;
		overflow:hidden;
	}
	.badgeInfo .toggle {
		display:block;
	}
	.active {
		height:auto;
		overflow:
	}
	.social .title {
		font-size:13px;
	}
}

@media screen and (max-width: 650px) {
	#header-wrapper {
		height: 80px;
		padding: 0 5%;
		margin: 0 auto;
	}
	#header-logo img {
		width: 110px;
	}
	#badgeDetails-content {
		padding: 10px 5% 10px 5%;
	}
	.badgeDetails-title {
		position: static;
		width: 100%;
		margin: 0 0 20px 0;
		font-size: 22px !important;
		text-align: center;
	}
	.badgeDetails-badge {
		float: none;
		width: 100%;
		margin: 0;
		text-align: center;
		position: static;
		padding:0 0 20px 0;
		border-bottom:1px solid #c0c0c0;
	}
		.badgeDetails-badge img {
			width: 40%;
			max-width:150px;
		}
	#badgeDetails-details {
		position: static;
		width: 100%;
		margin: 0 0 0 0;
	}
	.badge-detail {
		color: #909090;
		font-size: 12px;
		margin: 15px 0 0 0;
		width:50%;
	}
	.badgeInfo p,
	.badgeInfo span {
		margin: 0 0 10px 0;
		color: #707070;
		font-weight: 300;
		font-size: 12px;
		line-height: 18px;
	}
}

/*REVOCATION - NOT PUBLIC style*/

.contentPage-wrapper {   
    margin: 0 auto;
}

.contentPage-content {
    text-align: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
}

.contentPage-content img {    

}

.contentPage-title {
    color: #000000;
    font-family: Ubuntu;
    font-size: 30px;
    font-weight: 300;
    line-height: 35px;
    margin-top:30px;

}

.contentPage-message {
    color: #878787;
    font-family: Ubuntu;
    font-size: 15px;
    font-weight: 300;
    line-height: 20px;
    text-align: center;
    margin-top: 10px;
}
}



