Skip to content

Instantly share code, notes, and snippets.

@vpugh

vpugh/SassMeister-input.scss

Created August 28, 2015 15:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vpugh/cb26320a619a7ca7364e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vpugh/cb26320a619a7ca7364e to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:after, &:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
::selection {
background: #242424;
color: #FFF;
}
body {
font-size: 100%;
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: 400;
background: #ff9600;
color: #242424;
line-height: 1.8em;
}
a {
text-decoration: none;
color: #242424;
}
img {
max-width: 100%;
}
.container {
width: 89.3%;
margin: 0 auto;
&:after {
content: "";
display: table;
clear: both;
}
}
@media only screen and (min-width: 968px) {
.container {
width: 768px;
}
}
.btn {
padding: 10px 35px;
color: #242424;
text-decoration: none;
display: inline-block;
margin: 0 10px;
font-size: 18px;
transition: ease-in-out 0.5s;
&.full {
padding: 35px;
margin: 60px 0 0;
display: block;
text-align: center;
margin: 0;
}
}
.about .btn {
float: left;
padding: 0;
margin: 0 0 20px 0;
&:hover {
padding: 10px 35px;
margin: 0;
}
}
.btn:hover {
background: #454545;
color: #fff;
}
.btn-holder {
margin: 0 auto;
padding: 45px 0 0 0;
text-align: center;
}
.txt-btn {
border-bottom: 2px solid transparent;
transition: 350ms border ease-in-out;
font-size: 18px;
&:hover {
border-bottom: 2px solid;
}
}
@media (max-width: 768px) {
.btn, .about .btn {
padding: 10px 35px;
background: #454545;
color: #fff;
display: block;
float: none;
margin: 0;
}
.btn:hover, about .btn:hover {
background: #454545;
color: #fff;
}
}
.btm-padding {
padding: 0 0 75px 0;
}
.whiteBG {
background: #fff;
}
.whiteBG-80 {
background: rgba(255, 255, 255, 0.8);
}
/*-------------------------------------
Typography
-------------------------------------*/
h2 {
font-size: 28px;
line-height: 1.4em;
}
h3 {
font-size: 21px;
line-height: 1.4em;
margin-bottom: .5em;
}
.thumb-hover {
h2 {
font-weight: 100;
}
h3 {
font-size: 16px;
line-height: 1.75em;
font-weight: 100;
font-style: italic;
}
}
p {
margin-bottom: .7em;
line-height: 1.5em;
font-size: 1.35em;
font-weight: 100;
}
.about-pg p {
font-size: 1.3em;
line-height: 1.5em;
}
.italic {
font-style: italic;
}
.available {
color: #242424;
font-weight: bold;
border-bottom: 1px solid;
font-size: 18px;
}
.section-header {
padding-top: 75px;
position: relative;
font-size: 32px;
&:after {
content: "";
background: #ff9600;
width: 110px;
height: 1px;
display: block;
margin: 16px 0 0 0;
}
&.orange:after {
background: #ff9600;
}
&.green:after {
background: #8ac641;
}
&.blue:after {
background: #00c7ff;
}
&.sub {
padding-top: 40px;
position: relative;
font-size: 32px;
}
}
.subhead {
padding-top: 20px;
font-size: 18px;
font-weight: 300;
h4 {
display: inline;
padding: 0 6px 0 0;
span {
font-weight: 400;
}
}
}
.col {
p {
text-align: left;
font-weight: 100;
font-size: 18px;
}
h4 {
text-align: left;
font-size: 21px;
margin: 0 0 5px 0;
}
}
.about .col h4 {
margin-bottom: 15px;
}
.about-pg .text-container h2 {
margin-bottom: 1em;
/*font-weight: 100;
font-size: 30px;*/
}
@media (max-width: 768px) {
.about .col:first-child {
margin-bottom: 15px;
}
}
/*-------------------------------------
Header
-------------------------------------*/
.header {
background: rgba(255, 255, 255, 0.13);
overflow: hidden;
width: 100%;
position: relative;
top: 0;
left: 0;
z-index: 3;
}
.header-logo img {
margin: 20px 0;
float: left;
}
.header-navigation {
float: right;
display: block;
font-size: 18px;
font-weight: bold;
li {
float: left;
padding: 26px 0;
margin: 0 0 0 34px;
}
a {
text-decoration: none;
color: #242424;
padding-bottom: 27px;
}
}
#home li.home a, #about li.about a, #work li.work a, #contact li.contact a {
border-bottom: 2px solid rgba(0, 0, 0, 0.8);
}
.header-navigation a:hover, #home li.home a:hover, #about li.about a:hover, #work li.work a:hover, #contact li.contact a:hover {
color: rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.mobile-menu {
display: none;
}
/*--------------------------------------
Jumbotron
---------------------------------------*/
.jumbotron-holder {
width: 100%;
text-align: center;
}
.jumbotron {
position: relative;
top: 32%;
}
h2.options {
&:before {
content: "— ";
}
&:after {
content: " —";
}
}
.jumbotron {
h1 {
font-size: 2.7em;
font-weight: bold;
line-height: 1.3em;
}
h2 {
font-size: 36px;
line-height: 1.3em;
font-weight: 100;
}
h3 {
font-size: 18px;
line-height: 1.3em;
}
}
@media (max-width: 768px) {
.jumbotron {
h1 {
font-size: 2em;
}
h2 {
font-size: 31px;
font-weight: 400;
}
}
}
@media (max-width: 480px) {
.jumbotron {
h1 {
font-size: 1.8em;
margin-bottom: 10px;
line-height: 1.2em;
}
h2 {
font-size: 20px;
}
}
h2.options {
&:after, &:before {
content: "";
}
}
.jumbotron {
top: 18%;
}
}
@media (max-width: 320px) {
.jumbotron h2 {
font-size: 20px;
}
}
h2.intro {
font-style: italic;
margin-top: 10px;
font-size: 44px;
}
.intro span {
-webkit-animation: ghostin 1s ease-in;
-moz-animation: ghostin 1s ease-in;
-o-animation: ghostin 1s ease-in;
-ms-animation: ghostin 1s ease-in;
animation: ghostin 1s ease-in;
opacity: 0;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
&:nth-child(1) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
&:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
&:nth-child(3) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
&:nth-child(4) {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-o-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
}
&:nth-child(5) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
&:nth-child(6) {
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
-ms-animation-delay: 7s;
animation-delay: 7s;
}
}
@-webkit-keyframes ghostin {
from {
opacity: 0;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes ghostin {
from {
opacity: 0;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
/*--------------------------------------
Blurb
---------------------------------------*/
.blurb.container {
text-align: center;
padding: 36px 0;
h2 {
font-size: 28px;
line-height: 1.4em;
margin-bottom: 10px;
font-weight: 100;
}
}
@media (max-width: 768px) {
.blurb.container h2 {
font-size: 18px;
}
}
/*--------------------------------------
Main Content
---------------------------------------*/
.main-content {
overflow: hidden;
}
.text-container {
padding: 42px 0 0 0;
overflow: hidden;
&.subheader {
padding-top: 24px;
}
&.last-text {
margin-bottom: 45px;
}
}
.grid {
padding: 0;
text-align: center;
overflow: hidden;
}
.portfolio .grid {
padding-top: 52px;
}
.grid .col {
text-align: center;
float: left;
width: 50%;
position: relative;
}
.col.service-icon {
width: 33.333%;
text-align: left;
}
.service-icon img {
width: 60%;
}
@media (max-width: 768px) {
.grid .col {
width: 100%;
}
}
.thumb-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(36, 36, 36, 0.9);
opacity: 0;
transition: ease-in-out .5s;
padding: 16% 11% 11%;
text-align: center;
}
.viewproject {
width: 30%;
margin: 26px auto 0 auto;
font-size: 18px;
border: 1px solid #fff;
padding: 9px 0;
}
.col {
a {
color: #fff;
display: inherit;
}
&:hover .thumb-hover {
opacity: 1;
}
}
.portfolio {
.thumb-hover {
padding-top: 10%;
}
.viewproject {
width: 50%;
}
}
.about {
padding: 0 0 50px 0;
}
.work-together {
text-align: center;
a {
color: #fff;
text-decoration: none;
padding: 40px 0;
display: block;
transition: 1s;
&:hover {
background: rgba(0, 0, 0, 0.25);
}
}
}
.service-title {
font-weight: 700;
font-style: italic;
}
.service-description {
line-height: 1.35em;
}
@media (max-width: 768px) {}
@media (max-width: 480px) {
.thumb-hover {
padding: 8%;
}
.viewproject {
width: 50%;
}
}
/*----------------------------
Footer
----------------------------*/
.contact {
padding-bottom: 40px;
p {
font-size: 18px;
}
}
.footer {
padding: 20px 0;
.container {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 0 20px 0;
}
}
.social-icons {
display: block;
width: 100%;
text-align: left;
a {
color: rgba(0, 0, 0, 0.6);
margin: 0 21px 0 0;
position: relative;
float: left;
&:before {
content: "»";
left: -10px;
position: absolute;
}
&:hover {
color: rgba(0, 0, 0, 0.9);
}
}
img {
float: left;
margin: 0 5px 0 0;
padding: 0 0 20px 0;
}
}
.footer-navigation {
float: right;
width: auto;
display: block;
text-align: center;
li {
display: inline-block;
}
a {
text-decoration: none;
color: #242424;
margin: 0 0 0 8px;
-webkit-user-select: none;
/* Chrome/Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
&:hover {
border-bottom: 1px solid #242424;
}
}
}
.copyright {
text-align: center;
color: #fff;
color: rgba(0, 0, 0, 0.6);
padding: 20px 0 0 0;
margin: 0;
font-size: 12px;
}
@media (max-width: 768px) {
.social-icons {
text-align: center;
a {
float: none;
}
}
.footer-navigation {
float: none;
a {
margin: 0;
}
}
}
@media (max-width: 480px) {
.social-icons {
text-align: center;
a {
float: none;
}
}
.footer-navigation {
float: none;
}
}
/* Work Page */
.image-container {
padding: 0 0 50px 0;
overflow: hidden;
width: 80%;
margin: 0 auto;
}
p.case-study {
font-size: 25px;
font-weight: 300;
line-height: 1.4;
margin: 0 0 1.7em 0;
}
.col-1, .col-2, .col-3, .col-4 {
float: left;
margin-left: 5px;
margin-right: 5px;
padding-bottom: 10px;
text-align: center;
}
.col-1 {
width: 31.3%;
}
.col-2 {
width: 48.5%;
}
.col-3 {
width: 62.5%;
}
.col-4 {
width: 98%;
}
@media (max-width: 768px) {
p.case-study {
font-size: 1.35em;
}
.col-1, .col-2, .col-3, .col-4 {
width: 100%;
float: none;
margin: 0;
}
.image-container {
width: 92%;
}
}
/*-------------------------
Contact Page
-------------------------*/
::-webkit-input-placeholder {
color: #5e5e5e;
font-style: normal;
font-weight: 400;
}
::-moz-placeholder {
color: #5e5e5e;
font-style: normal;
opacity: 1;
font-weight: 400;
}
:-ms-input-placeholder {
color: #5e5e5e;
font-style: normal;
font-weight: 400;
}
input, textarea {
width: 100%;
padding: 16px;
border: 1px solid #D1D1D1;
display: block;
margin: 10px 0;
font-size: 16px;
color: #5E5E5E;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-webkit-appearance: none;
-moz-appearance: none;
font-family: inherit;
}
label {
width: 100%;
margin: 0 auto;
display: block;
}
input {
&[type="button"], &[type="reset"], &[type="submit"] {
-webkit-appearance: button;
-moz-appearance: button;
cursor: pointer;
}
&[type="button"], &[type="submit"], &[type="reset"] {
-webkit-appearance: push-button;
-moz-appearance: push-button;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: pre;
}
&[type="submit"] {
background: #242424;
color: #fff;
font-weight: 400;
&:hover {
background: #424242;
}
}
}
@media only screen and (min-width: 768px) {
label {
width: 400px;
}
}
.form-success {
display: none;
text-align: center;
}
#form-messages {
width: 100%;
margin: 0 auto;
}
@media (min-width: 768px) {
#form-messages {
width: 400px;
}
}
.success {
padding: 1em;
margin-bottom: 0.75rem;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.error {
padding: 1em;
margin-bottom: 0.75rem;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
color: #b94a48;
background-color: #f2dede;
border: 1px solid rgba(185, 74, 72, 0.3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Raw
SassMeister-output.css
@charset "UTF-8";
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
::selection {
background: #242424;
color: #FFF;
}
body {
font-size: 100%;
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: 400;
background: #ff9600;
color: #242424;
line-height: 1.8em;
}
a {
text-decoration: none;
color: #242424;
}
img {
max-width: 100%;
}
.container {
width: 89.3%;
margin: 0 auto;
}
.container:after {
content: "";
display: table;
clear: both;
}
@media only screen and (min-width: 968px) {
.container {
width: 768px;
}
}
.btn {
padding: 10px 35px;
color: #242424;
text-decoration: none;
display: inline-block;
margin: 0 10px;
font-size: 18px;
transition: ease-in-out 0.5s;
}
.btn.full {
padding: 35px;
margin: 60px 0 0;
display: block;
text-align: center;
margin: 0;
}
.about .btn {
float: left;
padding: 0;
margin: 0 0 20px 0;
}
.about .btn:hover {
padding: 10px 35px;
margin: 0;
}
.btn:hover {
background: #454545;
color: #fff;
}
.btn-holder {
margin: 0 auto;
padding: 45px 0 0 0;
text-align: center;
}
.txt-btn {
border-bottom: 2px solid transparent;
transition: 350ms border ease-in-out;
font-size: 18px;
}
.txt-btn:hover {
border-bottom: 2px solid;
}
@media (max-width: 768px) {
.btn, .about .btn {
padding: 10px 35px;
background: #454545;
color: #fff;
display: block;
float: none;
margin: 0;
}
.btn:hover, about .btn:hover {
background: #454545;
color: #fff;
}
}
.btm-padding {
padding: 0 0 75px 0;
}
.whiteBG {
background: #fff;
}
.whiteBG-80 {
background: rgba(255, 255, 255, 0.8);
}
/*-------------------------------------
Typography
-------------------------------------*/
h2 {
font-size: 28px;
line-height: 1.4em;
}
h3 {
font-size: 21px;
line-height: 1.4em;
margin-bottom: .5em;
}
.thumb-hover h2 {
font-weight: 100;
}
.thumb-hover h3 {
font-size: 16px;
line-height: 1.75em;
font-weight: 100;
font-style: italic;
}
p {
margin-bottom: .7em;
line-height: 1.5em;
font-size: 1.35em;
font-weight: 100;
}
.about-pg p {
font-size: 1.3em;
line-height: 1.5em;
}
.italic {
font-style: italic;
}
.available {
color: #242424;
font-weight: bold;
border-bottom: 1px solid;
font-size: 18px;
}
.section-header {
padding-top: 75px;
position: relative;
font-size: 32px;
}
.section-header:after {
content: "";
background: #ff9600;
width: 110px;
height: 1px;
display: block;
margin: 16px 0 0 0;
}
.section-header.orange:after {
background: #ff9600;
}
.section-header.green:after {
background: #8ac641;
}
.section-header.blue:after {
background: #00c7ff;
}
.section-header.sub {
padding-top: 40px;
position: relative;
font-size: 32px;
}
.subhead {
padding-top: 20px;
font-size: 18px;
font-weight: 300;
}
.subhead h4 {
display: inline;
padding: 0 6px 0 0;
}
.subhead h4 span {
font-weight: 400;
}
.col p {
text-align: left;
font-weight: 100;
font-size: 18px;
}
.col h4 {
text-align: left;
font-size: 21px;
margin: 0 0 5px 0;
}
.about .col h4 {
margin-bottom: 15px;
}
.about-pg .text-container h2 {
margin-bottom: 1em;
/*font-weight: 100;
font-size: 30px;*/
}
@media (max-width: 768px) {
.about .col:first-child {
margin-bottom: 15px;
}
}
/*-------------------------------------
Header
-------------------------------------*/
.header {
background: rgba(255, 255, 255, 0.13);
overflow: hidden;
width: 100%;
position: relative;
top: 0;
left: 0;
z-index: 3;
}
.header-logo img {
margin: 20px 0;
float: left;
}
.header-navigation {
float: right;
display: block;
font-size: 18px;
font-weight: bold;
}
.header-navigation li {
float: left;
padding: 26px 0;
margin: 0 0 0 34px;
}
.header-navigation a {
text-decoration: none;
color: #242424;
padding-bottom: 27px;
}
#home li.home a, #about li.about a, #work li.work a, #contact li.contact a {
border-bottom: 2px solid rgba(0, 0, 0, 0.8);
}
.header-navigation a:hover, #home li.home a:hover, #about li.about a:hover, #work li.work a:hover, #contact li.contact a:hover {
color: rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.mobile-menu {
display: none;
}
/*--------------------------------------
Jumbotron
---------------------------------------*/
.jumbotron-holder {
width: 100%;
text-align: center;
}
.jumbotron {
position: relative;
top: 32%;
}
h2.options:before {
content: "— ";
}
h2.options:after {
content: " —";
}
.jumbotron h1 {
font-size: 2.7em;
font-weight: bold;
line-height: 1.3em;
}
.jumbotron h2 {
font-size: 36px;
line-height: 1.3em;
font-weight: 100;
}
.jumbotron h3 {
font-size: 18px;
line-height: 1.3em;
}
@media (max-width: 768px) {
.jumbotron h1 {
font-size: 2em;
}
.jumbotron h2 {
font-size: 31px;
font-weight: 400;
}
}
@media (max-width: 480px) {
.jumbotron h1 {
font-size: 1.8em;
margin-bottom: 10px;
line-height: 1.2em;
}
.jumbotron h2 {
font-size: 20px;
}
h2.options:after, h2.options:before {
content: "";
}
.jumbotron {
top: 18%;
}
}
@media (max-width: 320px) {
.jumbotron h2 {
font-size: 20px;
}
}
h2.intro {
font-style: italic;
margin-top: 10px;
font-size: 44px;
}
.intro span {
-webkit-animation: ghostin 1s ease-in;
-moz-animation: ghostin 1s ease-in;
-o-animation: ghostin 1s ease-in;
-ms-animation: ghostin 1s ease-in;
animation: ghostin 1s ease-in;
opacity: 0;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.intro span:nth-child(1) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.intro span:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.intro span:nth-child(3) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.intro span:nth-child(4) {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-o-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
}
.intro span:nth-child(5) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.intro span:nth-child(6) {
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
-ms-animation-delay: 7s;
animation-delay: 7s;
}
@-webkit-keyframes ghostin {
from {
opacity: 0;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes ghostin {
from {
opacity: 0;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
/*--------------------------------------
Blurb
---------------------------------------*/
.blurb.container {
text-align: center;
padding: 36px 0;
}
.blurb.container h2 {
font-size: 28px;
line-height: 1.4em;
margin-bottom: 10px;
font-weight: 100;
}
@media (max-width: 768px) {
.blurb.container h2 {
font-size: 18px;
}
}
/*--------------------------------------
Main Content
---------------------------------------*/
.main-content {
overflow: hidden;
}
.text-container {
padding: 42px 0 0 0;
overflow: hidden;
}
.text-container.subheader {
padding-top: 24px;
}
.text-container.last-text {
margin-bottom: 45px;
}
.grid {
padding: 0;
text-align: center;
overflow: hidden;
}
.portfolio .grid {
padding-top: 52px;
}
.grid .col {
text-align: center;
float: left;
width: 50%;
position: relative;
}
.col.service-icon {
width: 33.333%;
text-align: left;
}
.service-icon img {
width: 60%;
}
@media (max-width: 768px) {
.grid .col {
width: 100%;
}
}
.thumb-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(36, 36, 36, 0.9);
opacity: 0;
transition: ease-in-out .5s;
padding: 16% 11% 11%;
text-align: center;
}
.viewproject {
width: 30%;
margin: 26px auto 0 auto;
font-size: 18px;
border: 1px solid #fff;
padding: 9px 0;
}
.col a {
color: #fff;
display: inherit;
}
.col:hover .thumb-hover {
opacity: 1;
}
.portfolio .thumb-hover {
padding-top: 10%;
}
.portfolio .viewproject {
width: 50%;
}
.about {
padding: 0 0 50px 0;
}
.work-together {
text-align: center;
}
.work-together a {
color: #fff;
text-decoration: none;
padding: 40px 0;
display: block;
transition: 1s;
}
.work-together a:hover {
background: rgba(0, 0, 0, 0.25);
}
.service-title {
font-weight: 700;
font-style: italic;
}
.service-description {
line-height: 1.35em;
}
@media (max-width: 480px) {
.thumb-hover {
padding: 8%;
}
.viewproject {
width: 50%;
}
}
/*----------------------------
Footer
----------------------------*/
.contact {
padding-bottom: 40px;
}
.contact p {
font-size: 18px;
}
.footer {
padding: 20px 0;
}
.footer .container {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 0 20px 0;
}
.social-icons {
display: block;
width: 100%;
text-align: left;
}
.social-icons a {
color: rgba(0, 0, 0, 0.6);
margin: 0 21px 0 0;
position: relative;
float: left;
}
.social-icons a:before {
content: "»";
left: -10px;
position: absolute;
}
.social-icons a:hover {
color: rgba(0, 0, 0, 0.9);
}
.social-icons img {
float: left;
margin: 0 5px 0 0;
padding: 0 0 20px 0;
}
.footer-navigation {
float: right;
width: auto;
display: block;
text-align: center;
}
.footer-navigation li {
display: inline-block;
}
.footer-navigation a {
text-decoration: none;
color: #242424;
margin: 0 0 0 8px;
-webkit-user-select: none;
/* Chrome/Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
.footer-navigation a:hover {
border-bottom: 1px solid #242424;
}
.copyright {
text-align: center;
color: #fff;
color: rgba(0, 0, 0, 0.6);
padding: 20px 0 0 0;
margin: 0;
font-size: 12px;
}
@media (max-width: 768px) {
.social-icons {
text-align: center;
}
.social-icons a {
float: none;
}
.footer-navigation {
float: none;
}
.footer-navigation a {
margin: 0;
}
}
@media (max-width: 480px) {
.social-icons {
text-align: center;
}
.social-icons a {
float: none;
}
.footer-navigation {
float: none;
}
}
/* Work Page */
.image-container {
padding: 0 0 50px 0;
overflow: hidden;
width: 80%;
margin: 0 auto;
}
p.case-study {
font-size: 25px;
font-weight: 300;
line-height: 1.4;
margin: 0 0 1.7em 0;
}
.col-1, .col-2, .col-3, .col-4 {
float: left;
margin-left: 5px;
margin-right: 5px;
padding-bottom: 10px;
text-align: center;
}
.col-1 {
width: 31.3%;
}
.col-2 {
width: 48.5%;
}
.col-3 {
width: 62.5%;
}
.col-4 {
width: 98%;
}
@media (max-width: 768px) {
p.case-study {
font-size: 1.35em;
}
.col-1, .col-2, .col-3, .col-4 {
width: 100%;
float: none;
margin: 0;
}
.image-container {
width: 92%;
}
}
/*-------------------------
Contact Page
-------------------------*/
::-webkit-input-placeholder {
color: #5e5e5e;
font-style: normal;
font-weight: 400;
}
::-moz-placeholder {
color: #5e5e5e;
font-style: normal;
opacity: 1;
font-weight: 400;
}
:-ms-input-placeholder {
color: #5e5e5e;
font-style: normal;
font-weight: 400;
}
input, textarea {
width: 100%;
padding: 16px;
border: 1px solid #D1D1D1;
display: block;
margin: 10px 0;
font-size: 16px;
color: #5E5E5E;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-webkit-appearance: none;
-moz-appearance: none;
font-family: inherit;
}
label {
width: 100%;
margin: 0 auto;
display: block;
}
input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
-moz-appearance: button;
cursor: pointer;
}
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: push-button;
-moz-appearance: push-button;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: pre;
}
input[type="submit"] {
background: #242424;
color: #fff;
font-weight: 400;
}
input[type="submit"]:hover {
background: #424242;
}
@media only screen and (min-width: 768px) {
label {
width: 400px;
}
}
.form-success {
display: none;
text-align: center;
}
#form-messages {
width: 100%;
margin: 0 auto;
}
@media (min-width: 768px) {
#form-messages {
width: 400px;
}
}
.success {
padding: 1em;
margin-bottom: 0.75rem;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.error {
padding: 1em;
margin-bottom: 0.75rem;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
color: #b94a48;
background-color: #f2dede;
border: 1px solid rgba(185, 74, 72, 0.3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment