@font-face {font-family: 'social'; src: url('social/fonts/social.eot'); src: url('social/fonts/social.eot?#iefix') format('embedded-opentype'), url('social/fonts/social.woff') format('woff'), url('social/fonts/social.ttf') format('truetype'), url('social/fonts/social.svg#entypo') format('svg'); font-weight: normal; font-style: normal; } #pad .twelve {text-align: center; } ::selection {background: #666566; color: #fff; text-shadow: none; } ::-moz-selection {background: #666566; color: #fff; text-shadow: none; } html {-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-fill-mode: both; -webkit-animation-duration: .5s; -webkit-animation-iteration-count: 1; background: #fff; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .container {max-width: 960px; width: 90%; margin-left: auto; margin-right: auto; } #work {width: 100%; margin-left: auto; margin-right: auto; padding-bottom: 44px; } header {background: url(../img/bg.jpg) top center no-repeat; width: 100%; height: 450px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .quranacademy {background-color: #0772a7; } .localcrime {background-color: #2d3036; } .sportizingme {background-color: #373d48; } .nineslides {background-color: #22273b; } .wellframe {background-color: #ee7836; } .waktusolat {background-color: #375543; } .amp {font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: 400; } h1.title {font-size: 40px; color: #fff; margin-top: 100px; display: inline-block; font-weight: 400; } h1.name {font-size: 40px; color: #5d6165; font-weight: 600; margin-top: 44px; } p.intro {color: #a3aaab; font-size: 20px; line-height: 32px; font-weight: 400; margin-top: 44px; margin-bottom: 38px; text-align: center; } h2 {font-weight: 600; font-size: 38px; color: #fff; margin-top: 50px; text-align: center; line-height: 26px; } h3 {font-weight: 500; font-size: 20px; color: #fff; margin-top: 18px; text-align: center; line-height: 26px; } h3.title {font-weight: 500; font-size: 24px; color: #c4ccce; margin: 10px; text-align: center; line-height: 26px; } h4 {color: white; margin-top: 6px; font-size: 22px; line-height: 32px; font-weight: 400; margin-top: 24px; margin-bottom: 38px; } footer {width: auto; background-color: #171a1e; text-align: center; } footer a {font-weight: 700; color: #fff; } footer a:hover {color: #fff882; } footer h2 {font-weight: 500; font-size: 20px; text-align: center; padding: 50px 0 100px 0; } a.nav {color: #727579; text-decoration: none; font-size: 20px; font-weight: 500; text-align: center; margin-top: 44px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } a.nav:hover {color: #5d6165; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .center {margin-left: auto; margin-right: auto; text-align: center; } a.button {border-radius: 6px; border: 1px solid rgba(255,255,255,.5); color: #fff; overflow: hidden; padding: 14px 30px 14px 30px; margin: 5px; display: inline-block; width: 90px; } a.button:hover, a.button:active {border: 1px solid #ffffff; color: #ffffff; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } img.project {margin-top: 40px; display: block; margin-left: auto; margin-right: auto; } .social {text-align: center; margin-top: 50px; } a.blog {font-family: 'social'; font-size: 42px; line-height: 32px; padding-left: 2px; padding-right: 2px; color: #a3aaab; opacity: .4; font-style: normal; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; text-align: center; margin: 10px; } a.blog:hover {color: #375543; opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -moz-text-shadow: 0 0 10px rgba(0,173,233,.2); -webkit-text-shadow: 0 0 10px rgba(0,173,233,.2); text-shadow: 0 0 10px rgba(0,173,233,.2); } a.twitter {font-family: 'social'; font-size: 42px; line-height: 32px; padding-left: 2px; padding-right: 2px; color: #a3aaab; opacity: .4; font-style: normal; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; text-align: center; margin: 10px; } a.twitter:hover {color: #00ade9; opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -moz-text-shadow: 0 0 10px rgba(0,173,233,.2); -webkit-text-shadow: 0 0 10px rgba(0,173,233,.2); text-shadow: 0 0 10px rgba(0,173,233,.2); } a.dribbble {font-family: 'social'; font-size: 42px; line-height: 32px; padding-left: 2px; padding-right: 2px; color: #a3aaab; opacity: .4; font-style: normal; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; text-align: center; margin: 10px; } a.dribbble:hover {color: #ca366b; opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -moz-text-shadow: 0 0 10px rgba(202,54,107,.2); -webkit-text-shadow: 0 0 10px rgba(202,54,107,.2); text-shadow: 0 0 10px rgba(202,54,107,.2); } a.instagram {font-family: 'social'; font-size: 42px; opacity: .4; line-height: 32px; font-style: normal; padding-left: 2px; padding-right: 2px; color: #a3aaab; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; text-align: center; margin: 10px; } a.instagram:hover {color: #3f729b; opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -moz-text-shadow: 0 0 10px rgba(166,114,88,.2); -webkit-text-shadow:0 0 10px rgba(166,114,88,.2); text-shadow: 0 0 10px rgba(166,114,88,.2); } a.mail {font-family: 'social'; font-size: 42px; opacity: .4; line-height: 32px; font-style: normal; padding-left: 2px; padding-right: 2px; color: #a3aaab; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; text-align: center; margin: 10px; } a.mail:hover {color: #fff; opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -moz-text-shadow: 0 0 10px rgba(166,114,88,.2); -webkit-text-shadow:0 0 10px rgba(166,114,88,.2); text-shadow: 0 0 10px rgba(166,114,88,.2); } @media screen and (max-width: 620px) {h1.title {font-size: 34px; margin-top: 60px; text-align: center; } h3.title {font-size: 20px; } h2 {font-size: 30px; } h3 {font-size: 20px; } p.intro {font-size: 16px; line-height: 24px; } a.blog, a.twitter, a.instagram, a.dribbble, a.mail {font-size: 30px; } #top a.mail {display: none; } section {text-align: left; } h5 {text-align: center; } img.project {margin-bottom: 20px; } a.nav {float: none; display: inline-block; text-align: center; margin-top: 38px; } img.mouse {display: none; } }