/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  /* color: #5a5a5a; */
  /* background-color: #f2fcff; */
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Arial',sans-serif;
}

.h3, h3 {
	font-size: 1.2em;
}

.center-div {
	margin-left: 0 auto;
	margin-right: 0 auto;
}

.b-green {
	color: #59a003;
}

.b-blue {
	color: #00649C;
}



p {
  /* margin: 0 0 10px; */
  margin: 0 0 0px;
}


a {
  color: #00649C;
}

/* Element | http://127.0.0.1:3267/ */

#ClickOne {
  color: black;
  font-weight: bold;
  padding: 2.5px 10px;
    width: 100%;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #ccc;
}


#ClickOne:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";   /* adjust as needed, taken from bootstrap.css */
	float: right;        /* adjust as needed */
    color: black;         /* adjust as needed */

}



#ClickOne.collapsed:after {
    /* symbol for "collapsed" panels */
	font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e080";   /* adjust as needed, taken from bootstrap.css */
}




/* ----------------------------*/

#ClickTwo {
  color: black;
  font-weight: bold;
    padding: 2.5px 10px;
    width: 100%;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #ccc;
}


#ClickTwo:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: black;         /* adjust as needed */
}
#ClickTwo.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
}

#ClickThree {
  color: black;
  font-weight: bold;
      padding: 2.5px 10px;
    width: 100%;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #ccc;
}


#ClickThree:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: black;         /* adjust as needed */
}
#ClickThree.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}









/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing {
  padding-left: 15px;
  padding-right: 15px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-md-4, .marketing .col-md-6 {
  text-align: center;
  margin-bottom: 20px;
}
.marketing h2 {
  font-weight: 600;
}
.marketing .col-md-4 p, .marketing .col-md-6 p {
  margin-left: 10px;
  margin-right: 10px;
}

/* Featurettes
------------------------- */

.featurette {
  height: calc(100vh - 146px); 
}

.featurette-divider {
  /*margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
}

.featurette-heading .text-muted {
	font-weight: 10;
	font-size: 0.8em;
}

hr {
	border-top: 1px solid black;
	margin-top: 25px;
	margin-bottom: 45px;
}

.featurette .collapse {
	background: transparent !important;
}

.transparent-panel-group .panel-heading {
	background: transparent !important;
}

.transparent-panel-group .panel-default {
	border-color: transparent !important;
	border: none !important;
	/*background: none !important;*/
}

.transparent-panel-group .panel-body {
	border-top: none !important;
	padding-top: 0px !important;
}

#collapseTwo > div:nth-child(1) {
  background-color: #ddd;
}


.transparent-panel-group .panel {
	/*background-color: transparent !important;*/
	border: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 992px) {
	.center-on-xs {
		text-align: center;
	}

	.center-on-xs ul, .center-on-xs ol, .center-on-xs .alert {
		text-align: left;
	}

	.center-on-xs img {
		margin: 0 auto;
	}

	.featurette-divider {
		margin: 20px 0;
	}

	.col-md-3 img {
		max-width: 350px;
	}
}

@media (max-width: 768px) {
	.featurette-image {
		max-width: 50%;
	}
}

@media (min-width: 768px) {

  /* Remove the edge padding needed for mobile */
  .marketing {
    padding-left: 0;
    padding-right: 0;
  }

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-left:  15px;
    padding-right: 15px;
  }
  .navbar-wrapper .navbar {
    padding-left:  0;
    padding-right: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 28px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

.table-center > tbody > tr > td, .table-center > thead > tr > th {
	text-align: center;
}

.table > tbody > tr > td, .table > thead > tr > th {
	vertical-align: middle;
}

/* PRINT CSS
-------------------------------------------------- */

@media print and (color) {
	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

@media print {
	body {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
		font-size: 12px !important;
		font-family: Arial, Helvetica, sans-serif;
	}

	.b-blue {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	.container {
		margin: 0 !important;
	}

	p {
		margin-bottom: 5px;
	}

	.featurette-heading {
		font-size: 18px;
		text-align: left !important;
		margin-bottom: 10px !important;
	}

	.featurette-heading .text-muted {
		background-color: #00649C !important;
		color: white !important;
	}

	h1 {
		font-size: 16px;
		margin-top: 24px;
		padding: 14px;
		background-color: #00649C !important;
		color: white !important;
		border-radius: 3px;
	}

	h2 {
		font-size: 14px;
		margin-top: 20px;
		padding: 8px;
		background-color: #00649C !important;
		color: white !important;
		border-radius: 3px;
	}

	h3 {
		font-size: 12px;
		margin-top: 20px;
	}

	h4 {
		font-size: 12px;
		margin-top: 20px;
	}

	h5 {
		font-size: 12px;
		font-style: italic;
		margin-top: 20px;
	}

	i.fa {
		color: inherit !important;
	}

	i.fa.fa-check.b-green {
		color: #59a003 !important;
	}

	/* Link styles */
		a {
			text-decoration: none;
			word-wrap: break-word;
		}

		a[href^=http]:after {
			content:" (" attr(href) ") ";
			font-size:0.8em !important;
			font-weight:normal !important;
		}

		a[href^="/"]:after {
			content:" (http://beehive" attr(href) ") ";
			font-size:0.8em !important;
			font-weight:normal !important;
		}

		$a:after > img {
			content: "";
		}

		a[href^="#"]:after {
			content: "";
		}

		a:not(:local-link):after {
			content:" (" attr(href) ") ";
			font-size:0.8em !important;
			font-weight:normal !important;
		}

	.screenshot {
		width: 50%;
	}

	footer {
		text-align: center;
	}

	ul, img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	.footer img {
		margin-bottom: 20px !important;
		width: 30%;
	}

	.center-on-xs {
		text-align: left;
	}

	.center-on-xs img {
		margin: 0 auto;
	}