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

body {
  padding-bottom: 3rem;
  color: #5a5a5a;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}
.carousel-caption-short {
  bottom: 3rem;
  z-index: 10;
}
.carousel-caption h1, carousel-caption h4{
  text-shadow: black 0.1em 0.1em 0.2em;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position:absolute;
     top:0;
     bottom:0;
     right: 0;
left: 0;
     margin: auto;
     width: auto;
     height: 100%;

}


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

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


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

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

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}

.header-image{
 margin: auto;
 bottom: 0%;
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}


.card{
  border: 0;
}

/* Calendar */
.post{
	position:relative;
	padding:10px 20px;
	/*background:#f8f8f8;*/
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	/*border-radius:5px;*/
	width:auto;
	/*border:1px solid #e8e8e8;*/
	margin-bottom:50px;
	}

.calendar{
	top:0em;
  left:1em;
	padding-top:5px;
	width:70px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));
	background: -moz-linear-gradient(top,  #ededef,  #ccc);
	font:bold 25px/50px "Lucida Sans Unicode", Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#000;

	text-shadow:#fff 0 1px 0;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	position:absolute;
	-moz-box-shadow:0 2px 2px #888;
	-webkit-box-shadow:0 2px 2px #888;
	box-shadow:0 2px 2px #888;
	}

.calendar em{
	display:block;
	font:12px/30px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:#00365a 0 -1px 0;
	background:#04599a;
	background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));
	background:-moz-linear-gradient(top,  #04599a,  #00365a);
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
	border-top:1px solid #00365a;
	}

.calendar:before, .calendar:after{
	content:'';
	float:left;
	position:absolute;
	top:5px;
	width:8px;
	height:8px;
	background:#111;
	z-index:1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	box-shadow:0 1px 1px #fff;
	}
.calendar:before{left:11px;}
.calendar:after{right:11px;}

.calendar em:before, .calendar em:after{
	content:'';
	float:left;
	position:absolute;
	top:-5px;
	width:4px;
	height:14px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa);
	z-index:2;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	}
.calendar em:before{left:13px;}
.calendar em:after{right:13px;}


.calendar-text{
 margin-left: 120px;
 font-size: 1.2rem;
 font-weight: bold;
}
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.4;
  }

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

  .carousel-item > img {
    width:100%;
    height: auto;

  }
  h1.homepage {
    font-size: 3rem;
  }
}



@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 6rem;
  }
  .carousel-caption h1{
    font-size: 3.5rem;
  }
}