/* Copyright, 2014 by José Pino (@mrjopino) */
@charset "utf-8"; @import url(http://fonts.googleapis.com/css?family=Coda|Russo+One|Varela+Round); @import url(http://weloveiconfonts.com/api/?family=entypo); [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } /* Amposh by @mrjopino, 2014 CSS / UI sexy */ body { background: -webkit-linear-gradient(left,#eff0f4, #f5f5f5, #eff0f4); background: -moz-linear-gradient(right,#eff0f4, #f5f5f5, #eff0f4); background: -ms-linear-gradient(right,#eff0f4, #f5f5f5, #eff0f4); background: -o-linear-gradient(right,#eff0f4, #f5f5f5, #eff0f4); background: linear-gradient(to right,#eff0f4, #f5f5f5, #eff0f4); text-align: center; } .logo__amposh-your_project { height: 10em; width: 10em; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/84557/ampush.png)no-repeat center center; margin: 2% auto; overflow:hidden; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; cursor: pointer; display: inline-block; margin-bottom:.5em; -webkit-transition:all ease-in-out; -webkit-transition-delay:0.2s; -moz-transition:all ease-in-out 0.2s; -o-transition:all ease-in-out 0.2s; transition:all ease-in-out 0.2s; } .logo__amposh-your_project:hover { height: 10em; width: 10em; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/84557/ampush-hover.png)no-repeat center center; overflow:hidden; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-transition:all ease-in-out; -webkit-transition-delay:0.2s; -moz-transition:all ease-in-out 0.2s; -o-transition:all ease-in-out 0.2s; transition:all ease-in-out 0.2s; -webkit-transition-duration:.8s; -moz-transition-duration:.8s; -o-transition-duration:.8s; transition-duration:.8s; -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; -o-transition-property:-o-transform; transition-property:transform; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } #recent__project { font-size: 2em; display: block; text-align: center; text-decoration: none; } a { position: relative; margin: 0% auto; color: #55acee; text-decoration: none; } a:hover { color: #39c; } h1 { text-align: center; font-family: "Varela Round", Sans-Serif; font-size: 2em; color: #FD625E; line-height: 0.23em; } h1:hover { color: #333; } h2 { text-align: center; font-family: "Varela Round", Sans-Serif; font-size: 1.3em; color: #669ae1; margin: 0.4em auto 1em; } p { font-family: "Varela Round"; color: #fff; font-size: 1.6em; line-height: 1.20em; } .core--sexy-content { background: #2c3e50; box-shadow: inset 0em 0em 1em -0.23em rgba(0, 0, 0, 0.85); width: 80%; margin: 2em auto; padding: 1em; border: 0; } .btn_sexy_cdn--project { position: relative; display: inline-block; background: #FD625E; -webkit-border-radius: 0.20em; -moz-border-radius: 0.20em; -ms-border-radius: 0.20em; -o-border-radius: 0.20em; border-radius: 0.20em; border: 0; font: 1.8em "Russo One"; padding: 0.5em 1em; margin-right: 0.5em; margin: 1% auto; cursor: pointer; color: #fff; text-align: center; transition: all 200ms; } .btn_sexy_cdn--project:hover { color: #FD625E; background: -webkit-linear-gradient(left,#eff0f4, #f5f5f5, #eff0f4); background: -moz-linear-gradient(right,#eff0f4, #f5f5f5, #eff0f4); background: -ms-linear-gradient(right,#eff0f4, #f5f5f5, #eff0f4); background: -o-linear-gradient(right,#eff0f4, #f5f5f5, #eff0f4); background: linear-gradient(to right,#eff0f4, #f5f5f5, #eff0f4); } #twitter { position: relative; margin: 2% auto; color: #55acee; font-size: 3em; text-align: center; } #twitter:hover { color: #39c; } @media screen and (max-width: 60em) { a { font-size: 0.90em; } .core--sexy-content { width: calc(100% - 2em); } .btn_sexy_cdn--project { width: calc(100% - 2em); margin: 0.25em 0; } h1 { font-size: 3em; } .logo__amposh-your_project,.logo__amposh-your_project:hover { width: 8em; height: 8em; } } @media screen and (max-width: 40em) { h1 { font-size: 2em; } .logo__amposh-your_project,.logo__amposh-your_project:hover { width: 7em; height: 7em; } p { font-size: 1em; } }