@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);*{box-sizing:border-box}body{background-image:linear-gradient(to right,#034378,#2d4e68);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh;font-family:"Open Sans",sans-serif}a{text-decoration:none}h1{font-family:"Open Sans",sans-serif;font-weight:300}.row{max-width:900px;margin:50px auto 0}.card{float:left;padding:0 1.7rem;width:50%;margin-bottom:50px}@media only screen and (max-width:768px){.card{width:100%}}.card .menu-content{margin:0;padding:0;list-style-type:none}.card .menu-content::before,.card .menu-content::after{content:'';display:table}.card .menu-content::after{clear:both}.card .menu-content li{display:inline-block}.card .menu-content a{color:#fff}.card .menu-content span{position:absolute;left:50%;top:0;font-size:10px;font-weight:700;font-family:'Open Sans';-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.card .wrapper{background-color:#fff;min-height:513px;position:relative;overflow:hidden;box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.2)}.card .wrapper:hover .data{-webkit-transform:translateY(0);transform:translateY(0)}.card .data{position:absolute;bottom:0;width:100%;-webkit-transform:translateY(calc(70px + 1em));transform:translateY(calc(70px + 1em));transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.card .data .content{padding:1em;position:relative;z-index:1}.card .author{font-size:16px}.card .title{margin-top:10px}.card .text{height:70px;margin:0}.card input[type='checkbox']{display:none}.card input[type='checkbox']:checked+.menu-content{-webkit-transform:translateY(-60px);transform:translateY(-60px)}.example-1 .date{position:absolute;top:0;left:0;background-color:#fa8d29;color:#fff;padding:.8em}.example-1 .date span{display:block;text-align:center}.example-1 .date .day{font-weight:700;font-size:24px;text-shadow:2px 3px 2px rgba(0,0,0,0.18)}.example-1 .date .month{text-transform:uppercase}.example-1 .date .month,.example-1 .date .year{font-size:12px}.example-1 .content{background-color:#fff;box-shadow:0 5px 30px 10px rgba(0,0,0,0.3)}.example-1 .title a{color:gray}.example-1 .menu-button{position:absolute;z-index:999;top:16px;right:16px;width:25px;text-align:center;cursor:pointer}.example-1 .menu-button span{width:5px;height:5px;background-color:gray;color:gray;position:relative;display:inline-block;border-radius:50%}.example-1 .menu-button span::after,.example-1 .menu-button span::before{content:'';display:block;width:5px;height:5px;background-color:currentColor;position:absolute;border-radius:50%}.example-1 .menu-button span::before{left:-10px}.example-1 .menu-button span::after{right:-10px}.example-1 .menu-content{text-align:center;top:0;left:0;width:100%;z-index:-1;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:translateY(0);transform:translateY(0)}.example-1 .menu-content li{width:100%;float:left;background-color:#fa8d29;height:auto;padding:15px;position:relative;color:#fff}.example-1 .menu-content a{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:24px}.example-1 .menu-content span{top:-10px}.example-2 .wrapper{background:url() center/cover no-repeat}.example-2 .wrapper:hover .menu-content span{-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px);opacity:1}.example-2 .header{color:#fff;padding:1em}.example-2 .header::before,.example-2 .header::after{content:'';display:table}.example-2 .header::after{clear:both}.example-2 .header .date{float:left;font-size:12px}.example-2 .menu-content{float:right}.example-2 .menu-content li{margin:0 5px;position:relative}.example-2 .menu-content span{transition:all .3s;opacity:0}.example-2 .data{color:#fff;-webkit-transform:translateY(calc(70px + 4em));transform:translateY(calc(70px + 4em))}.example-2 .title a{color:#fff}.example-2 .button{display:block;width:100px;margin:2em auto 1em;text-align:center;font-size:12px;color:#fff;line-height:1;position:relative;font-weight:700}.example-2 .button::after{content:'\2192';opacity:0;position:absolute;right:0;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);transition:all .3s}.example-2 .button:hover::after{-webkit-transform:translate(5px,-50%);transform:translate(5px,-50%);opacity:1}