section.calendar * { margin:0; padding:0; } .ups,.downs { color:#908c8c; } section.calendar { background-color:#29323f; font-family:'Dosis',sans-serif; color:#fff; width:290px; padding:45px; position:absolute; top:50%; left:50%; -webkit-transform:translateY(-50%) translateX(-50%); transform:translateY(-50%) translateX(-50%); box-shadow:5px 10px 20px rgba(0,0,0,0.6); border-radius:5px; } .up { float:left !important; padding:0px 5px !important; } .down { float:right !important; padding:0px 5px !important; } section.calendar >.c_float { text-align:center; width:100%; margin:0 0 30px 0; } section.calendar .tetle { text-align:center; color:#fcee6d; font-size:20px; font-weight:600; } section.calendar form { position:relative; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:start; -webkit-align-items:flex-start; -ms-flex-align:start; align-items:flex-start; -webkit-align-content:flex-start; -ms-flex-line-pack:start; align-content:flex-start; } section.calendar form label.weekday { display:inline-block; width:25px; margin:8px; text-align:center; color:#999; } section.calendar form form { margin:0; padding:0; } section.calendar form label.day { display:inline-block; width:25px; margin:8px; } section.calendar form label.day span { display:inline-block; width:25px; height:25px; line-height:25px; margin:-2px 0 0 -2px; border-radius:50%; border:2px solid #29323f; text-align:center; -webkit-transition:all .2s linear; transition:all .2s linear; cursor:pointer; } section.calendar form label.day span:hover { border-color:#e7d84f; } section.calendar form label.day em { display:inline-block; position:absolute; border-radius:50%; border-color:#29323f; width:3px; height:3px; background-color:#685e02; margin-left:11px; margin-top:2px; opacity:0; -webkit-transition:all .2s linear; transition:all .2s linear; } section.calendar form label.day input[type=text] { border:0; opacity:0; position:absolute; margin-top:40px; left:-45px; width:380px; height:1px; padding:0; outline:none; font-size:16px; -webkit-transition:height .2s linear,opacity .2s linear,color .02s linear; transition:height .2s linear,opacity .2s linear,color .02s linear; color:#fff; } section.calendar form label.day input[type=text]:focus { opacity:1; height:35px; padding:10px 40px; left:-45px; width:300px; color:#29323f; } section.calendar form label.day input[type=text]:focus + span { color:#fcee6d; border-color:#fcee6d; background:#fcee6d; color:#29323f; font-weight:bold; margin-bottom:65px; } section.calendar form label.day input[type=text]:focus ~ em { border-radius:0; border:5px solid transparent; background:transparent; border-bottom-color:white; margin-top:-62px; margin-left:7px; width:0; height:0; display:inline-block; opacity:1; } section.calendar form label.day input[type=text]:valid ~ em { display:inline-block; opacity:1; } section.calendar form label.day.invalid { opacity:0; width:25px; height:25px; } section.calendar form label.day.invalid span,section.calendar form label.day.invalid input { display:none; } section.calendar div.clearfix { clear:both; } section.calendar div.hidden { display:none; }