/*
Theme Name: Peak
Theme URI: http://themeforest.net/user/onioneye
Description: A Premium Portfolio Wordpress Theme.
Author: OnionEye
Author URI: http://themeforest.net/user/onioneye
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Version: 1.1.0
Designed & Handcrafted by OnionEye
*/
/* Table of Contents
........................................................................................................................................
1. Main Base Styles
2. Links
3. Images
4. Technical and Creative Typography
5. Forms
6. Common and Reusable Styles
7. Main Content
8. Header
9. Menu
10. Portfolio Gallery
11. Single Portfolio Item
12. Blog
13. Comment Styles
14. Comment Form Styles
15. Widgets
16. Content Styles
17. Plugins
18. Search
19. Footer
20. Media Queries
21. Animations
*/
/* 1. Main Base Styles
........................................................................................................................................ */
*,
*:before,
*:after {
box-sizing: border-box;
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
html,
body {
padding: 0;
margin: 0;
overflow-x: hidden;
}
html {
overflow-y: scroll;
}
body {
background-color: #fff;
}
ol,
ul {
list-style: none inside none;
margin: 0;
padding: 0;
}
small {
font-size: 85%;
}
/* Remove empty paragraphs */
p:empty {
display: none;
}
/* Highlighted text */
::selection {
background: #191919;
color: #fff;
text-shadow: none;
}
::-moz-selection {
background: #191919;
color: #fff;
text-shadow: none;
}
/* Simple fluid media */
object,
embed {
max-width: 100%;
height: auto;
}
figure {
position: relative;
}
figure img,
figure object,
figure embed,
figure video {
max-width: 100%;
display: block;
}
/* 2. Links
........................................................................................................................................ */
a {
color: #808080;
text-decoration: none;
transition: .2s all ease;
}
.no-touch a:hover {
color: #2e2e2e;
}
/* 3. Images
........................................................................................................................................ */
img {
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
}
/* 4. Technical and Creative Typography
........................................................................................................................................ */
/* Modular Scale ---------------------- 16px @ 1:1.333 15px @ 1:1.333 ----------------------*/
/* Fontbase ---------------------- 16px = 1em ----------------------*/
/* Line Height Base ---------------------- 28px = 1.75em ----------------------*/
/* maxvoltar.com/archive/-webkit-font-smoothing */
html {
-webkit-font-smoothing: antialiased;
}
body,
button,
input,
textarea {
font-family: 'Roboto Slab', Georgia, serif;
font-weight: 300;
line-height: 28px;
line-height: 1.75em; /* =28px */
color: #222;
}
b,
strong {
font-weight: 600;
color: #191919;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 28px 0;
margin-bottom: 1.75em; /* =28px */
}
h1,
.h1 {
font-size: 37.897px;
font-size: 2.369rem;
line-height: 1.477em; /* = 56px */
line-height: 1.187em; /* = 45px */
margin-bottom: 0.7388em; /* =28px */
}
h2,
.h2 {
font-size: 28.430px;
font-size: 1.777rem;
line-height: 1.969em; /* = 56px */
line-height: 1.301em; /* = 37px */
margin-bottom: 0.984em;
}
h3,
.h3 {
font-size: 21.328px;
font-size: 1.333rem;
line-height: 1.312em; /* = 28px */
margin-bottom: 1.312em;
}
h4,
.h4 {
font-size: 16px;
font-size: 1rem;
line-height: 1.75em; /* = 28px */
}
h5,
.h5,
h6,
.h6 {
font-size: 15px;
font-size: 0.938rem;
line-height: 1.866em; /* = 28px */
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 300;
color: #222;
}
/* 5. Forms
........................................................................................................................................ */
fieldset {
margin: 0 0 1.75em 0; /* = 28px */
padding: 0;
border: none;
}
input,
textarea {
padding: 8px 10px;
}
input,
textarea,
select {
margin: 0; /* webkit browsers add a 2px margin outside the chrome of form elements */
border-radius: 2px;
outline: none;
}
select,
input,
textarea,
button {
font-family: inherit;
font-size: 100%;
font-weight: 300;
}
select {
max-width: 600px;
padding: 4px 4px 4px 0;
border: 1px solid #e3e5e5;
background: #fff;
}
label {
display: inline-block;
margin-bottom: 5px;
}
label,
input[type=button],
input[type=submit],
button {
cursor: pointer; /* hand cursor on clickable input elements */
}
/* buttons */
input[type="submit"], button, input[type="button"], .url-button, .read-more {
display: inline-block;
padding: 10px 24px;
border-radius: 4px;
border: 2px solid #313233;
background: none;
color: #313233;
font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;
font-size: .75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .3em;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
input[type="submit"]:hover, button:hover, input[type="button"]:hover, .read-btn .read-more:hover, .project-meta .url-button:hover {
border-color: #bfbfbf;
color: #bfbfbf;
}
input[type="submit"]:not(.main-search-submit):active, button:active, input[type="button"]:active, .read-more:active, .read-more:focus, .url-button:active, .url-button:focus {
position: relative;
top: 1px;
}
input[type="submit"] {
display: inline;
vertical-align: top;
}
input[type="submit"],
button,
input[type="button"] {
border-radius: 2px;
}
/* style the text inputs only */
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]),
input[type="text"],
textarea {
width: 100%;
appearance: none;
line-height: 1;
}
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]),
textarea {
padding: 10px 8px;
max-width: 450px;
display: block;
border: 1px solid #ccc;
background: #fff;
}
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]),
textarea,
select {
transition: all .2s ease-in;
}
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]),
textarea {
border-radius: 2px;
}
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):focus,
textarea:focus,
select:focus {
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.008);
}
input[type="text"]:focus,
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):focus,
textarea:focus,
select:focus {
border-color: #b4b4b4;
}
/* 6. Common and Reusable Styles
........................................................................................................................................ */
.caps {
font-size: 12.003px;
font-size: 0.75rem;
font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .3em;
}
.table {
display: table;
width: 100%;
position: relative;
}
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
/* Break words that are too long to fit into its container */
.word-break {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
.overflow-wrap {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens:auto;
hyphens: auto;
}
/* highlighting search term on search page */
mark,
.search-term {
background: #EBE16F;
}
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
/* 7. Main Content
........................................................................................................................................ */
.main-container {
padding: 0 2.5em 0 2.5em; /* 40px + 40px = 80px */
}
.page-template-template-portfolio-php .main-container,
.single-portfolio .main-container,
.tax-portfolio_category .main-container {
padding-right: 0;
}
.page-template-template-portfolio-php .header,
.single-portfolio .header,
.tax-portfolio_category .header,
.single-portfolio-container {
margin-right: 2.5em; /* = 40px */
}
.page-template-template-portfolio-php .footer,
.single-portfolio .footer,
.tax-portfolio_category .footer {
padding-right: 2.5em; /* = 40px */
}
.main-content {
display: table-cell;
width: 100%;
}
.page-template-template-portfolio-php .main-content,
.single-portfolio .main-content,
.tax-portfolio_category .main-content {
float: none;
max-width: none;
}
.page-content,
.blog-container,
.page-container {
max-width: 940px;
}
.page-content {
margin-left: 0;
margin-right: 0;
width: 100%;
padding-bottom: 1.75em;
}
.page-template-template-page-with-sidebar-php .page-content {
width: 70%;
float: left;
padding-right: 1.875em; /* = 30px */
}
.sidebar {
width: 28%;
float: right;
}
/* 8. Header
........................................................................................................................................ */
/**
* Drop-down tagline and menu
*/
.dropdown-container {
position: relative;
overflow: hidden;
height: 0;
background: #222 url("images/dark_wall.png");
color: #a7abb1;
text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
font-size: 21.328px;
font-size: 1.333rem;
}
.dropdown-container .close-button {
position: absolute;
right: 1.333em; /* = 40px */
top: 15px;
width: 40px;
height: 40px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.406em; /* = 30px */
text-align: right;
color: #a7abb1;
text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
cursor: pointer;
transition: .2s color ease;
}
.no-touch .dropdown-container .close-button:hover {
color: #fdfdfd;
}
.dropdown-container .dropdown-content {
padding: 2.625em 1.875em; /* 56px + 40px + 56px + 40px */
margin: 0 auto;
max-width: 940px;
text-align: center;
}
.tagline {
display: none;
}
.dropdown-content .tagline {
margin-bottom: 0;
}
/**
* Logo, social icons, and search
*/
.header {
position: relative;
padding: 1.75em 0; /* 28px + 28px = 56px */
}
.oy-logo,
.header-secondary {
display: table-cell;
vertical-align: middle;
line-height: 0;
}
/**
* Logo
*/
.oy-logo {
margin: 0 auto;
width: 220px;
}
.oy-logo a {
display: inline-block;
margin-right: 3.75em; /* = 60px */
vertical-align: bottom;
}
.oy-logo .textual-logo {
display: block;
padding: 0.2em 0 0.394em;
color: #222;
font-family: 'Roboto', Georgia, "Times New Roman", Times, serif;
font-weight: 400;
font-size: 35.528px;
font-size: 2.221rem;
line-height: 1.182em; /* = 42px */
}
.no-touch .oy-logo a:hover {
animation: tinywiggle 220ms ease-out;
}
/**
* Social links
*/
.social-and-search.social-exists {
margin-left: -3px;
}
.social-and-search li {
float: left;
}
.social-and-search li:first-child {
margin-left: 0;
}
.social-and-search a {
display: block;
position: relative;
width: 45px;
height: 56px;
padding: 8px;
perspective: 500;
}
.social-and-search a:after {
box-sizing: content-box;
position: absolute;
left: -3px;
top: 12px;
padding: 3px;
width: 28px;
height: 28px;
background: url("images/main.png") no-repeat left top;
opacity: 1;
content: " ";
transition: .6s 0s;
transform-origin: 40% 50%;
}
.no-touch .social-and-search a:hover:after {
opacity: 1;
transform: rotateY(360deg);
transition: .6s 0.02s;
}
.social-and-search .facebook-link:after {
background-position: 0 -50px;
}
.social-and-search .twitter-link:after {
background-position: -50px -50px;
}
.social-and-search .googleplus-link:after {
background-position: -100px -50px;
}
.social-and-search .pinterest-link:after {
background-position: -150px -50px;
}
.social-and-search .instagram-link:after {
background-position: -200px -50px;
}
.social-and-search .youtube-link:after {
background-position: -250px -50px;
}
.social-and-search .vimeo-link:after {
background-position: -300px -50px;
}
/**
* Main Search Form
*/
.search-item {
margin-left: 2.5em; /* = 40em */
}
.mobile-search {
display: none; /* Hide the mobile search form by default */
}
.search-item .main-search-form {
position: relative;
}
.search-item .main-search-form .main-search-field {
position: relative;
float: left;
width: 200px;
height: 29px;
padding: 4px 26px 4px 2px !important;
top: 8px;
border-width: 0 0 1px 0 !important;
line-height: 1 !important;
}
.search-only .main-search-form .main-search-field {
top: -4px;
}
.main-search-form .main-search-submit {
display: block;
position: absolute;
right: 0;
bottom: -34px;
float: right;
width: 20px;
height: 19px;
padding: 0;
border: none;
background: url("images/main.png") no-repeat -50px 0;
appearance: none;
}
.search-only .main-search-form .main-search-submit {
bottom: -22px;
}
/**
* Tagline and Menu Buttons
*/
.header-buttons {
position: absolute;
right: 0;
top: 15px;
width: 72px;
height: 56px;
perspective: 500;
}
.header-buttons div {
width: 32px;
height: 32px;
border-radius: 32px;
border: 2px solid #222;
cursor: pointer;
transition: .2s all ease;
}
.header-buttons div:only-child {
float: right;
}
.no-touch .header-buttons div:hover {
animation: boing 220ms ease-out;
}
.header-buttons .tagline-button {
float: right;
background: url("images/main.png") no-repeat -90px 7px;
font-size: 16px;
line-height: 28px;
text-align: center;
font-weight: bold;
}
.header-buttons .menu-button {
visibility: hidden; /* Hide the mobile menu for desktops */
position: relative;
left: 40px;
background: url("images/main.png") no-repeat 7px 9px;
}
/* 9. Menu
........................................................................................................................................ */
.menu-container {
min-width: 220px;
display: table-cell;
min-height: 100%;
margin-bottom: 3.5em; /* = 56px */
padding-right: 1.125em; /* = 40px */
vertical-align: top;
}
/**
* Main Menu
*/
.menu {
margin-bottom: 1.75em; /* = 28px */
}
.menu li {
list-style: none;
}
.menu a,
.portfolio-filter a,
.filter-title {
display: block;
position: relative;
transition: background 0.32s, padding-left 0.25s, transform 0.3s;
font-size: 12.003px;
font-size: .75rem;
font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .3em;
}
.no-touch .menu a:hover,
.no-touch .portfolio-filter a:hover {
padding-left: 10px;
}
.current-menu-item a {
color: #222;
}
.current-menu-item a:before,
.portfolio-filter .active a:before {
display: block;
position: absolute;
top: 0;
left: -19px;
font-weight: 400;
font-size: 14px;
content: "×";
}
/**
* Sub Menu
*/
.menu .sub-menu {
padding-left: 1.25em; /* = 16px */
}
/**
* Filter
*/
.portfolio-filter {
position: relative;
}
nav + .portfolio-filter {
padding-top: 1.75em; /* = 28px */
}
nav + .portfolio-filter:before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 1px;
background: #808080;
content: " ";
}
nav + .portfolio-filter .filter-title {
margin: 1.166em 0; /* 14px + 14px = 28px */
}
.filter-title {
margin: 0 0 1.166em; /* 14px */
color: #acacac;
}
.portfolio-filter .active a {
position: relative;
color: #222;
}
/**
* Drop-down mobile menu
*/
.mobile-menu {
display: none;
max-width: 220px;
margin: 0 auto;
}
.mobile-menu .menu {
margin-bottom: 0;
}
.mobile-menu .filter-title {
margin: 1.166em 0; /* 14px + 14px = 28px */
color: #6b6b6b;
text-shadow: none;
}
.mobile-menu .menu a,
.mobile-menu .portfolio-filter a {
color: #a7abb1;
text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
transition: background 0.32s, box-shadow 0.3s;
}
.mobile-menu .portfolio-filter .active a,
.mobile-menu .current-menu-item a {
position: relative;
color: #a7abb1;
}
.no-touch .mobile-menu .menu a:hover,
.no-touch .mobile-menu .portfolio-filter a:hover {
padding-left: 0;
box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.03);
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
.mobile-menu .current-menu-item a:before,
.mobile-menu .portfolio-filter .active a:before,
.mobile-menu nav + .portfolio-filter:before {
display: none;
}
/**
* Sub Menu
*/
.mobile-menu .menu .sub-menu {
padding-left: 0;
}
.mobile-menu .menu .sub-menu a {
text-transform: none;
letter-spacing: normal;
}
/* 10. Portfolio Gallery
........................................................................................................................................ */
.portfolio-gallery {
width: 100%;
margin-bottom: 1.75em; /* = 28px */
}
.portfolio-gallery .portfolio-item {
float: left;
width: 100%;
padding: 0 10px 10px 0; /* 20px + 20px = 40px */
}
.portfolio-gallery .project-link {
display: block;
overflow: hidden;
}
.portfolio-gallery .project-title {
margin-bottom: 0;
font-size: 12.003px;
font-size: .75rem;
line-height: 2.333em; /* =28px */
text-align: center;
color: #808080;
}
.project-link .thumb-container {
position: relative;
perspective: 2000;
}
.project-link .preview-img {
transition: .4s all ease;
}
.no-touch .project-link:hover .preview-img {
opacity: .1;
}
.view-button {
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
width: 40px;
height: 40px;
padding-top: 1px;
border-radius: 65px;
border: 2px solid #2e2e2e;
background: rgba(255, 255, 255, 0.2) url("images/main.png") -140px 10px;
opacity: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 27px;
font-weight: 300;
text-align: center;
color: #222;
transform: rotateY(220deg);
transition: all .4s ease;
}
.no-touch .project-link:hover .view-button {
transform: rotateY(0deg);
opacity: 1;
}
/**
* Isotope Filtering
*/
.isotope,
.isotope .isotope-item { /* change duration value to whatever you like */
transition-duration: 0.65s;
}
.isotope {
transition-property: height, width;
}
.isotope .isotope-item {
transition-property: transform, opacity;
}
.isotope-item {
z-index: 100;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/* disabling Isotope CSS3 transitions */
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
transition-duration: 0s;
}
/* 11. Single Portfolio Item
........................................................................................................................................ */
.single-portfolio-container {
position: relative;
max-width: 940px;
margin-bottom: 5.25em; /* = 84px */
padding-bottom: 3.5em; /* = 56px */
}
.single-portfolio-container:after {
position: absolute;
bottom: 0;
left: 50%;
width: 140px;
margin-left: -70px;
height: 2px;
background: #222;
content: " ";
}
/**
* Meta Post Info (Client, Skills...)
*/
.project-meta {
padding: 0 0 1.75em; /* = 28px */
}
.meta-column {
float: left;
margin-right: 1.25em /* = 20px */
}
.meta-column strong {
font-weight: 500;
}
/* 12. Blog
........................................................................................................................................ */
.blog-with-sidebar {
float: left;
width: 70%;
padding-right: 1.875em; /* = 30px */
}
.post {
margin-bottom: 5.25em; /* = 84px */
}
.blog-with-sidebar .post .post-time {
display: none;
}
.blog-with-sidebar .post-content {
float: left;
width: 100%;
}
.post-content {
float: right;
width: 75%;
}
/**
* Post Date
*/
.date-circle {
float: left;
width: 25%;
}
.post .post-time {
display: block;
float: left;
padding-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
width: 115px;
height: 115px;
border-radius: 65px;
border: 2px solid #2e2e2e;
overflow: hidden;
font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #222;
transition: all .3s ease-in-out;
}
.no-touch .date-circle:hover .post-time {
animation: boing 220ms ease-out;
}
.post-time .day {
display: block;
margin-bottom: 7px;
font-size: 57px;
line-height: 40px;
}
.post-time .month-and-year {
font-size: 12px;
font-weight: 500;
}
/**
* Post Content
*/
.post-title-link {
color: #2e2e2e;
}
.featured-img-link { display: block; }
.featured-img-link img {
margin: 0 0 1.75em 0;
display: block;
}
.post .additional-post-meta {
list-style-type: none;
margin-bottom: 1.25em; /* = 20px */
}
.post .additional-post-meta li {
float: left;
}
.read-btn {
display: block;
margin-top: 1.25em; /* = 20px */
}
.post-content .read-more,
.blog-post .read-more {
margin-top: 0.9375em; /* = 15px */
}
/**
* Next/Prev Links
*/
.pager {
padding: 0 0 2.333em; /* 28px */
font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;
font-size: 12px;
font-size: .75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .3em;
}
.prev-page {
float: left;
}
.next-page {
float: right;
}
.pager-link, .pager a {
display: block;
}
.arrows {
font-family: 'Merriweather', Georgia, serif;
position: relative;
top: -1px;
}
/**
* Single Post
*/
.single-post-content {
margin-bottom: 5.25em; /* = 84px */
}
/* WordPress built-in class for handling sticky posts */
.sticky { }
.bypostauthor { }
/* 13. Comment Styles
........................................................................................................................................ */
/* h3 comment title */
#comments {
text-transform: none;
}
/* number of comments span */
#comments span {
font-weight: 600;
}
.commentlist {
margin: 0 0 3.5em 0; /* = 56px */
}
.commentlist li {
position: relative;
list-style-type: none;
clear: both;
}
.commentlist li[class*=depth-] {
margin-top: 1.1em;
}
.commentlist li.depth-1 {
margin-left: 0;
margin-top: 0;
}
.commentlist li:not(.depth-1) {
margin-left: 1.875em; /* = 30px */
margin-top: 0;
padding-bottom: 0;
}
.commentlist li:last-child {
margin-bottom: 0;
}
.commentlist .comment-body {
margin-bottom: 1.75em; /* = 28px */
padding: 0.937em 0.937em 0 0.625em; /* 15px + 15px + 10px */
border: 1px solid #eee;
background: #fff;
}
.commentlist .comment-author + .help {
margin: 0;
margin-left: 4.375em; /* = 70px */
}
.commentlist .vcard {
margin-left: 4.375em; /* = 70px */
margin-bottom: 0.937em; /* = 15px */
}
.commentlist .vcard cite.fn {
display: inline-block;
margin-top: -4px;
font-style: normal;
}
.commentlist .vcard time a {
color: #999;
text-decoration: none;
}
.no-touch .commentlist .vcard time a:hover {
text-decoration: underline;
}
.commentlist .vcard .avatar {
position: absolute;
left: 1.25em; /* = 20px */
margin-top: 5px;
padding: 2px;
border: 1px solid #EDEFEE;
background: #fff;
}
.commentlist .comment-meta {
font-size: 12px;
}
.commentlist li .comment_content {
margin-left: 4.375em; /* = 70px */
}
.commentlist li .comment_content p {
font-size: 1em;
}
.commentlist li ul {
margin: 0;
}
.commentlist .comment-reply-link {
text-decoration: none;
}
/* 14. Comment Form Styles
........................................................................................................................................ */
#respond {
padding: 0 1.562em 1.25em 0; /* 25px + 20px */
}
.post-content + #respond {
margin-top: 0.937em; /* = 15px */
}
.comment-body + #respond {
padding: 0;
}
#reply-title {
margin-bottom: 0.4em; /* = 10px */
text-transform: none;
font-size: 1.562rem; /* = 25px */
}
#reply-title #cancel-comment-reply-link {
display: block;
}
#respond form[method=post] label, #respond form[method=post] .required {
display: none;
}
#respond input[type=text], #respond input[type=email], #respond input[type=url], #respond textarea {
padding: 8px 10px;
}
#respond #comment {
width: 100%;
max-width: 600px;
height: 180px;
}
#respond input[type=text], #respond input[type=email], #respond input[type=url] {
max-width: 300px;
}
/* 15. Widgets
........................................................................................................................................ */
.widget {
padding: 0 0;
margin: 0 0 3.5em; /* = 56px */
}
.widget:before,
.widget:after {
content: " ";
display: table;
}
.widget:after {
clear: both;
}
.widget li { margin-bottom: 0.75em; }
.widget li ul { margin-top: 0.75em; padding-left: 1em; /* indented children lists */ }
.widgettitle {
margin-bottom: 1.4em; /* = 28px */
font-size: 19.995px;
font-size: 1.25rem;
line-height: 1.400em; /* = 28px */
}
.widget_archive li a,
.widget_categories li a,
.widget_nav_menu li a,
.widget_links li a,
.widget_pages li a,
.widget_recent_entries li a,
.widget_recent_comments li a,
.widget_rss li a,
.widget_meta li a {
display: block;
}
/* Search widget */
.widget_search .search-form .field {
width: 100%;
}
/* Menu widget */
.widget .menu > li {
padding: 0;
}
/* Fast Flickr */
.widget_fastflickrwidget .flickr_photo {
transition: 0.4s transform ease, 0.4s opacity ease;
opacity: 0.8;
position: relative;
}
.widget_fastflickrwidget .flickr_photo:hover {
opacity: 1;
transform: scale(1.1);
z-index: 10;
}
/* Flickr widget */
.Simple_Flickr_Photos a {
display: block;
border-bottom: none;
}
.no-touch .Simple_Flickr_Photos a:hover {
background: none;
}
.Simple_Flickr_Photos #flickr .flickr_badge_image {
float: left;
}
.Simple_Flickr_Photos #flickr img {
display: block;
width: 65px;
height: 65px;
margin: 0;
padding: 0 7px 7px 0;
border: none;
}
.opacity .Simple_Flickr_Photos img {
position: relative;
opacity: 0.8;
transition: 0.4s transform ease, 0.4s opacity ease;
}
.no-touch.opacity #flickr img:hover {
opacity: 1;
}
.no-touch.csstransforms #flickr img:hover {
transform: scale(1.4);
z-index: 10;
}
/* Popular posts widget */
.widget.popular-posts ul {
clear: both;
}
.widget.popular-posts ul:before, .widget.popular-posts ul:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
}
.widget.popular-posts ul:after {
clear: both;
}
.popular-posts ul li {
position: relative;
clear: both;
}
.popular-posts .wpp-post-title {
display: block;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.05em;
}
.popular-posts .wpp-thumbnail {
float: left;
margin: 2px 7px 0 0;
padding: 6px 7px 6px 6px;
background: url('images/border-img.png') repeat left top;
}
.no-touch .popular-posts a:hover .wpp-thumbnail {
background-color: #0a0a0a;
}
.popular-posts .post-stats {
display: block;
font-size: 0.92em;
font-weight: normal;
}
.popular-posts .wpp-author {
font-style: normal;
}
/* Calendar widget */
#wp-calendar thead {
border-bottom: 1px solid #222;
}
#wp-calendar th,
#wp-calendar tbody td {
padding: 3px 6px;
text-align: center;
}
#wp-calendar th {
font-weight: 400;
}
#wp-calendar tfoot td {
padding-top: 3px;
}
#wp-calendar caption {
margin-bottom: 0.750em; /* = 15px */
font-size: 19.995px;
font-size: 1.25rem;
font-weight: 400;
text-align: center;
}
/* Twitter widget */
.main-content .widget .tp_recent_tweets {
float: none;
clear: none;
}
.main-content .widget .tp_recent_tweets li {
background-image: url('images/main.png');
background-repeat: no-repeat;
background-position: -348px -41px;
padding-left: 1.562em; /* = 25px */
padding-bottom: 1.25em; /* = 20px */
float: none;
clear: none;
line-height: 1.75em; /* = 28px */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
.main-content .widget .tp_recent_tweets ul li:last-child {
padding-bottom: 0;
}
.main-content .widget .tp_recent_tweets li a {
font-weight: normal;
}
.main-content .widget .tp_recent_tweets .twitter_time {
color: #999;
font-size: 12.003px;
font-size: 0.75rem;
font-style: italic;
font-weight: normal;
}
/* 16. Content Styles
........................................................................................................................................ */
.the-content img, .post-content img {
margin-bottom: 1.75em; /* = 28px */
}
.the-content p a:last-child img,
.post-content p a:last-child img {
margin-bottom: 0;
}
.the-content ul,
.the-content ol,
.the-content table,
.the-content dl {
margin: 1.75em 0; /* = 28px */
}
.the-content ul,
.the-content ol {
margin-right: 2.2em;
}
.the-content ul {
list-style-type: square;
}
.the-content ol {
list-style-type: decimal;
}
.the-content li {
margin-bottom: 0.75em;
}
.the-content ol ol,
.the-content ul ul {
margin-left: 1.75em;
}
.the-content blockquote {
margin: 0;
margin-left: 28px;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
}
/* this adds the quote before the blockquote */
.the-content blockquote:before {
float: left;
margin-left: -.7em;
padding: 0 5px 0 0;
font-family: Georgia, serif;
font-size: 2.75em;
opacity: 0.8;
content: "“";
}
.the-content dl {
margin: 1.75em 0 1.75em; /* 28px + 28px */
}
.the-content dt {
margin-top: 1.25em;
font-weight: 500;
}
.the-content dd {
margin-top: 0.5em;
font-style: italic;
}
/* table */
.the-content table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
background: #fff;
text-shadow: none;
}
.the-content tr:nth-of-type(odd) {
background-color: #eff3f4;; /* zebra style table */
}
.the-content th,
.the-content td {
padding: 0.562em 1.375em; /* 9px + 22px */
border: 1px solid #e9e9e9;
}
.the-content th {
text-transform: uppercase;
font-weight: normal;
}
.the-content caption {
font-size: 19.995px;
font-size: 1.25rem;
font-weight: bold;
}
.the-content b,
.the-content strong {
font-weight: bold;
}
/* pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } */
.the-content pre {
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera */
width: 99%;
word-wrap: break-word; /* IE */
}
.the-content pre {
overflow: auto;
overflow-y: hidden; /* Hides vertical scroll created by IE */
border-left: 6px solid #F5D995;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
background: #fff url('images/pre-code-bg.png') repeat left top;
text-shadow: none;
}
.the-content pre code {
margin: 0 0 0 2.5em; /* = 40px */
padding: 1.125em 0; /* = 18px */
display: block;
color: #443325;
}
.the-content video {
display: block;
margin: 1.75em 0; /* = 28px */
max-width: 100%;
}
.the-content object {
display: block;
margin: 1.75em 0; /* = 28px */
max-width: 100%;
}
/**
* WordPress built-in image-related classes
*/
img.alignright,
.wp-caption.alignright {
float: right;
margin: 0 0 1em 1em;
}
img.alignleft,
.wp-caption.alignleft {
float: left;
margin: 0 1em 1em 0;
}
img.aligncenter,
.wp-caption.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
a img.alignright {
float: right;
margin: 0 0 1em 1em;
}
a img.alignleft {
float: left;
margin: 0 1em 1em 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
width: auto !important;
max-width: 100% !important;
margin-bottom: 1.75em; /* = 28px */
text-shadow: none;
text-align: center;
font-style: italic;
}
.wp-caption img,
.wp-caption img a {
margin: 0 !important;
padding: 0;
border: 0 none;
}
.wp-caption .wp-caption-text {
padding: 0 4px 5px;
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
/**
* Default WordPress Gallery
*/
.gallery {
float: left;
margin-bottom: 1.75em !important; /* = 28px */
}
.gallery br {
display: none;
}
.gallery .gallery-item {
margin: 0 !important;
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.gallery-columns-2 .gallery-item {
width: 50% !important;
}
.gallery-columns-3 .gallery-item {
width: 33.3% !important;
}
.gallery-columns-4 .gallery-item {
width: 25% !important;
}
.gallery-columns-5 .gallery-item {
width: 20% !important;
}
.gallery-columns-6 .gallery-item {
width: 16.666% !important;
}
.gallery-columns-7 .gallery-item {
width: 14.285% !important;
}
.gallery-columns-8 .gallery-item {
width: 12.5% !important;
}
.gallery-columns-9 .gallery-item {
width: 11.111% !important;
}
.gallery-icon {
margin-top: 0 !important;
width: 100%;
position: relative;
overflow: hidden;
}
.gallery .gallery-caption {
width: 100%;
position: absolute;
bottom: 0;
background: #000;
background: rgba(0,0,0,0.5);
padding: 3px 5px;
color: #fff;
}
.gallery-item a {
display: block;
border: none;
margin: 0;
padding: 0;
}
.gallery-item a:after {
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(255, 255, 255, .5);
opacity: 0;
content: "";
transition: 0.3s all ease;
}
.no-touch .gallery-item a:hover:after {
opacity: 1;
padding: 0;
}
.gallery-item img {
margin: 0 !important;
padding: 0;
transition: 0.3s all ease;
}
.gallery .gallery-icon img {
display: block;
border: none !important;
}
.no-touch .gallery-item a:hover img {
transform: scale(1.1) rotate(-3deg);
}
/* 17. Plugins
........................................................................................................................................ */
/**
* Soliloquy Slider Plugin
*/
.soliloquy-container img {
margin-bottom: 0;
}
/**
* Lightbox Plugin
*/
html #swipebox-caption, #swipebox-action { border-color: transparent !important; }
html #swipebox-action {
top: -50px;
bottom: auto !important;
}
html #swipebox-action.visible-bars {
top: 0;
bottom: auto !important;
}
html #swipebox-action.force-visible-bars {
top: 0 !important;
bottom: auto !important;
}
html #swipebox-caption {
bottom: -50px;
top: auto !important;
}
html #swipebox-caption.visible-bars {
bottom: 0;
top: auto !important;
}
html #swipebox-caption.force-visible-bars {
bottom: 0 !important;
top: auto !important;
}
/**
* Metaslider Plugin
*/
.metaslider img {
margin-bottom: 0;
}
.metaslider ol, .metaslider ul {
margin: auto;
line-height: 0;
}
/* Prev/Next */
.metaslider .flex-direction-nav a {
margin: -17px 0 0;
opacity: .4;
border-radius: 50px;
transition: all .3s ease;
background: #fefefe;
}
.metaslider .flex-direction-nav .flex-next {
background-position: 100% 0;
right: 10px;
}
.metaslider .flex-direction-nav .flex-prev {
left: 10px;
}
.metaslider .flexslider:hover .flex-next {
opacity: 0.7;
right: 10px;
}
.metaslider .flexslider:hover .flex-prev {
opacity: 0.7;
left: 10px;
}
.metaslider .flex-direction-nav a:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-top: -6px;
width: 0;
height: 0;
}
.metaslider .flex-direction-nav .flex-prev:after {
margin-left: -4px;
border-top: 6px solid transparent;
border-right: 6px solid #333;
border-bottom: 6px solid transparent;
}
.metaslider .flex-direction-nav .flex-next:after {
margin-left: -2px;
border-top: 6px solid transparent;
border-left: 6px solid #333;
border-bottom: 6px solid transparent;
}
/* Slider pagination */
.metaslider .flex-control-paging li a {
background: #c5c5c5;
box-shadow: none;
}
.metaslider .flex-control-paging li a.flex-active {
background: #2e2e2e;
}
/**
* Cyclone Slider Plugin
*/
.cycloneslider.cycloneslider-template-standard {
margin-bottom: 3.5em; /* = 56px */
}
.cycloneslider.cycloneslider-template-standard .cycloneslider-pager {
bottom: -30px;
}
.cycloneslider.cycloneslider-template-standard .cycloneslider-pager span {
background: #e0e0e0;
box-shadow: none;
}
.cycloneslider.cycloneslider-template-standard .cycloneslider-pager span.cycle-pager-active {
background-color: #2e2e2e;
}
/**
* MapPress Plugin
*/
.mapp-layout {
border: none !important;
margin: 0 0 1.75em 0 !important; /* = 28px */
}
.mapp-map-links {
background-color: none !important;
border: none !important;
}
/**
* Contact Form 7 Plugin
*/
.wpcf7 p {
margin-bottom: 1.75em; /* = 28px */
}
.wpcf7 div.wpcf7-response-output {
margin: 2em 0 1em;
}
.wpcf7 span.wpcf7-not-valid-tip {
position: absolute;
top: 20%;
left: 20%;
z-index: 100;
background: none;
border: none;
font-size: 9pt;
width: 200px;
padding: 0 0 2px;
color: #ff0000;
}
/* Disable the default margin introduced by WordPress' admin bar */
html[lang] {
margin-top: 0 !important;
}
/* 18. Search
........................................................................................................................................ */
.search-post-title {
text-align: center;
margin: 0;
}
.search-post-title a {
display: block;
padding: 0.703em 0; /* 20px / 28.430px */
border-bottom: 1px solid #e6e6e6;
text-align: left;
}
.search-results .search-post-title:first-child a {
border-top: 1px solid #e6e6e6;
}
.search-results .search-post-title:last-child a {
border-bottom: none;
}
.no-touch .search-post-title a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
background: #fff;
}
/* 19. Footer
........................................................................................................................................ */
.footer {
float: left;
width: 100%;
position: relative;
padding: 1.75em 0 3.5em 220px;
}
.footer p {
float: left;
}
.footer small {
display: block;
border-bottom: 1px solid #ccc;
}
.footer p small:last-child {
border-bottom: none;
}
/* 20. Media Queries
........................................................................................................................................ */
/**
* Target Retina Devices
*/
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
.menu-indicator span,
.header-buttons .tagline-button,
.contents .widget .tp_recent_tweets li,
.social-and-search a:after,
.main-search-form .main-search-submit,
.header-buttons .menu-button {
/* Reference the @2x Sprite */
background-image: url("images/main_@2x.png");
/* Translate the @2x sprite's dimensions back to 1x */
background-size: 500px 200px;
}
.dropdown-container {
background-image: url("images/dark_wall_@2X.png");
background-size: 300px;
}
.header-buttons .tagline-button {
background-position: -88px 7px;
}
.view-button {
text-indent: 0%;
white-space: normal;
}
.view-button {
background: rgba(255, 255, 255, 0.2);
opacity: 0;
transform: rotateY(220deg) rotate(45deg);
transition: all .4s ease;
}
.no-touch .project-link:hover .view-button {
transform: rotateY(0deg) rotate(45deg);
opacity: 1;
}
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]),
textarea {
border: 1px solid #e3e5e5;
}
input[type="text"]:focus,
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):focus,
textarea:focus,
select:focus {
border-color: #cecece;
}
.footer small {
border-color: #e3e5e5;
}
/* Slider pagination */
.metaslider .flex-control-paging li a {
background: #e0e0e0;
box-shadow: none;
}
}
/**
* The main breakpoint
*/
@media only screen and (max-width: 940px) {
.header {
padding-bottom: 5.25em; /* = 84px */
margin-bottom: 4.375em; /* = 70px */
}
.header:after {
position: absolute;
bottom: 0;
left: 50%;
width: 80px;
margin-left: -40px;
height: 2px;
background: #222;
content: " ";
}
.oy-logo,
.header-secondary {
display: block;
}
/**
* Logo
*/
.oy-logo {
margin: 56px auto 28px;
width: auto;
}
.oy-logo a {
display: block;
margin-right: 0;
}
.oy-logo img {
display: block;
margin: 8px auto;
}
.oy-logo .textual-logo {
text-align: center;
}
/**
* Social links
*/
.social-and-search {
float: left;
position: relative;
left: 50%;
}
.social-and-search.social-exists {
margin-left: 0;
}
.social-and-search li {
float: left;
position: relative;
right: 50%;
}
.social-and-search li:first-child {
margin-left: 23px;
}
.social-and-search a {
display: block;
}
.social-and-search .search-item {
display: none;
}
.search-item .main-search-form .main-search-field {
top: 10px;
}
.main-search-form .main-search-submit {
bottom: -36px;
}
/**
* Mobile Search Field
*/
.mobile-search {
display: block;
margin-left: 0;
}
.mobile-search form {
width: 200px;
margin: 0 auto;
}
/**
* Tagline and mobile menu buttons
*/
.header-buttons.menu-and-tagline .tagline-button {
position: relative;
right: 40px;
}
.header-buttons .menu-button {
visibility: visible;
}
.header-buttons .menu-button:only-child {
left: 0;
}
.table-wrapper {
display: block;
}
.menu-container {
display: none;
}
.main-content {
display: block;
max-width: 100% !important;
width: auto !important;
float: none !important;
margin: 0 auto;
}
.single-portfolio-container:after {
width: 80px;
margin-left: -40px;
}
.pf-gallery-container {
margin-right: 2.5em;
}
.pf-adjuster {
position: relative;
width: 690px;
margin: 0 auto;
left: 5px;
padding-right: 0;
}
.item-title,
.search-results p,
.search-results a {
text-align: center;
}
/**
* Meta Post Info (Client, Skills...)
*/
.meta-column {
float: left;
width: 100%;
margin-right: 0;
text-align: center;
}
/* one item */
.project-meta.oy-1-cols .meta-column {
width: 100%;
}
/* two items */
.project-meta.oy-2-cols .meta-column {
width: 50%;
padding: 0 1%;
}
/* three items */
.project-meta.oy-3-cols .meta-column {
width: 32%;
margin-right: 2%;
}
/* four items */
.project-meta.oy-4-cols .meta-column {
width: 25%;
padding: 0 1%;
}
.meta-column:last-child {
margin-right: 0 !important;
padding-right: 0 !important;
}
.meta-column strong {
display: block;
}
.meta-column .colon {
display: none;
}
/**
* Copyright
*/
.footer {
padding-left: 0;
}
.footer p {
float: none;
text-align: center;
}
.footer small {
border-bottom: none;
}
}
@media only screen and (max-width: 780px) {
.pf-adjuster {
width: 600px;
}
}
@media only screen and (max-width: 680px) {
.pf-adjuster {
width: 460px;
}
}
@media only screen and (max-width: 710px) {
.page-template-template-page-with-sidebar-php .page-content, .blog-with-sidebar {
width: 100%;
float: none;
padding-right: 0;
}
.page-template-template-page-with-sidebar-php .sidebar, .sidebar {
width: 100%;
float: none;
}
}
@media only screen and (max-width: 600px) {
.main-container {
padding: 0 1.875em 0 1.875em; /* 30px + 30px = 60px */
}
.page-template-template-portfolio-php .header,
.single-portfolio .header,
.tax-portfolio_category .header,
.single-portfolio-container {
margin-right: 1.875em; /* = 30px */
}
.page-template-template-portfolio-php .footer,
.single-portfolio .footer,
.tax-portfolio_category .footer {
padding-right: 1.875em; /* = 30px */
}
.pf-gallery-container {
margin-right: 1.875em; /* = 30px */
}
.post-content {
float: none;
width: 100%;
}
.post,
.single-post-content {
margin-bottom: 3.5em; /* = 56px */
}
.date-circle {
display: none;
}
}
@media only screen and (max-width: 580px) {
.project-meta .meta-column {
width: 100% !important;
padding-bottom: 0.875em !important; /* 14px */
}
}
@media only screen and (max-width: 500px) {
.pf-adjuster {
width: 300px;
}
}
@media only screen and (max-width: 470px) {
.pager li {
float: none;
display: block;
margin: 0 auto 10px;
}
.pager li a {
text-align: center;
}
.pager li span {
display: block;
text-align: center;
}
}
@media only screen and (max-width: 400px) {
.social-and-search li:first-child {
margin-left: 14px;
}
.social-and-search a {
width: 37px;
}
}
@media only screen and (max-width: 380px) {
.main-container {
padding: 0 1.333em 0 1.333em; /* 20px + 20px = 40px */
}
.page-template-template-portfolio-php .header,
.single-portfolio .header,
.tax-portfolio_category .header,
.single-portfolio-container {
margin-right: 1.333em; /* = 20px */
}
.page-template-template-portfolio-php .footer,
.single-portfolio .footer,
.tax-portfolio_category .footer {
padding-right: 1.333em; /* = 20px */
}
.pf-gallery-container {
margin-right: 1.333em; /* = 20px */
}
.pf-adjuster {
width: 230px;
}
}
@media only screen and (max-width: 350px) {
.gallery .gallery-item {
margin: 0 0 20px 0 !important;
width: 100% !important;
float: none;
}
}
/* Portfolio Grid
................................................................ */
@media only screen and (min-width: 500px) {
.portfolio-gallery .portfolio-item { width: 230px; }
}
@media only screen and (min-width: 680px) and (max-width: 780px) {
.portfolio-gallery .portfolio-item { width: 200px; }
}
/* 21. Animations
........................................................................................................................................ */
.cssanimations .oy-logo {
animation: bounceInLeft .7s .9s 1 both ease-in-out;
}
.cssanimations .header-buttons {
animation: fadeInTop .6s .9s 1 both ease-in-out;
}
.cssanimations .menu-indicator {
transform: translateX(-50px);
animation: slideIn .6s .2s 1 both ease-in-out;
}
.cssanimations .social-and-search,
.cssanimations .mobile-search {
animation: fadeInTop .5s .9s 1 both ease-in-out;
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
@keyframes fadeInTop {
0%{
transform: translateY(-20px);
opacity: 0;
}
100%{
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideIn {
0%{
transform: translateX(-50px);
}
100%{
transform: translateX(0);
}
}
@keyframes tinywiggle {
25%, 50%, 75%, 100% { transform-origin: top center; }
25%{ transform: rotate(4deg) }
50%{ transform: rotate(-2deg) }
75%{ transform: rotate(1deg) }
100%{ transform: rotate(0deg)}
}
@keyframes wiggle {
25%, 50%, 75%, 100% { transform-origin: top center; }
25%{ transform: rotate(8deg) }
50%{ transform: rotate(-4deg) }
75%{ transform: rotate(1deg) }
100%{ transform: rotate(0deg)}
}
@keyframes boing {
0%{ transform: scale(1) }
35%{ transform: scale(1.15) }
70%{ transform: scale(0.9) }
100%{ transform: scale(1) }
}
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}