*{
	
}

.jumbotron h1{
	width: 400px;
	margin: 0 auto;
}

/*Calendar*/
 .calendar-container {
     align-items: center;
     display: flex;
     height: 100%;
     justify-content: center;
     margin: 0 auto;
     max-width: 600px;
     width: 100%;
     font-family: 'Montserrat' ;
	 margin-top: 30px;
}
 .calendar {
	 background: #ccc;
     height: 590px;
     perspective: 1000;
     transition: .9s;
     transform-style: preserve-3d;
     width: 100%;
	 border: solid 3px #666;
}
/*FrontCalendar*/
 .front {
     transform: rotateY(0deg);
}
 .current-date {
     border-bottom: 1px solid #666);
     display: flex;
     justify-content: space-between;
     padding: 30px 40px;
}
 .current-date h1 {
     color: #333;
     font-size: 1.4em;
     font-weight: 300;
}
 .week-days {
     color: #333;
     display: flex;
     justify-content: space-between;
     font-weight: 600;
     padding: 30px 40px;
}



 .days {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}
 .weeks {
     color: #333;
     display: flex;
     flex-direction: column;
     padding: 0 40px;
}
 .weeks div {
     display: flex;
     font-size: 1.2em;
     font-weight: 300;
     justify-content: space-between;
     margin-bottom: 20px;
     width: 100%;
}
 .last-month {
     opacity: .3;
}

 .weeks span {
     padding: 10px;
	 width:50px;
	 margin: 0 aunto;
}
 .weeks span.active {
	 width: 50px;
     background: #999;
     border: 2px;
	 color: #fff;
	 
}

span p{
	margin: 0 auto;
}

span.active p{
	margin: 0 auto;
}

 .weeks span:not(.last-month):hover {
     cursor: pointer;
     font-weight: 600;
}

.event {
	position: relative;
}

.event:after {
	content: '•';
	color: #f78536;
	font-size: 1.4em;
	position: absolute;
	right: -4px;
	top: -4px;
}
/*BackCalendar*/
.back {
	height: 100%;
	transform: rotateY(180deg);
}
 .back input {
     background: none;
     border: none;
     border-bottom: 1px solid #666;
     color: #666;
     font-size: 1.4em;
     font-weight: 300;
     padding: 30px 40px;
     width: 100%;
}
 .info {
     color: #333;
     display: flex;
     flex-direction: column;
     font-weight: 600;
     font-size: 1.2em;
     padding: 30px 40px;
}
 .info div:not(.observations) {
     margin-bottom: 40px;
}
 .info span {
     font-weight: 300;
}
 .info .date {
     display: flex;
     justify-content: space-between;
}
 .info .date p {
     width: 50%;
}
 .info .address p {
     width: 100%;
}
 .actions {
     bottom: 0;
     border-top: 1px solid #666;
     display: flex;
     justify-content: space-between;
     position: absolute;
     width: 100%;
}
 .actions button {
     background: ccc;
     border: 0;
     color: #333;
     font-weight: 600;
     letter-spacing: 3px;
     margin: 0;
     padding: 30px 0;
     text-transform: uppercase;
     width: 50%;
}
 .actions button:first-of-type {
     border-right: 1px solid #999;
}
 .actions button:hover {
     background: #999;
     cursor: pointer;
}
 .actions button:active {
     background: #ccc;
     outline: none;
}
/* Flip animation */
 .flip {
     transform: rotateY(180deg);
}
 .front, .back {
     backface-visibility: hidden;
}

footer{
	margin-top: 150px;
}
 
 
.rotate-vert-center {
	-webkit-animation: rotate-vert-center 1.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: rotate-vert-center 1.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@-webkit-keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}