/*
Theme Name: Kabuto
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.0.1
Designed & Handcrafted by OnionEye
*/
/* Table of Contents
........................................................................................................................................
01. Main Base Styles
02. Links
03. Images
04. Technical and Creative Typography
05. Forms
06. Common and Reusable Styles
07. Main Content
08. Drop-down page
09. Header
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 & 404 Not Found
19. Footer
20. Media Queries
21. Animations
22. Internet Explorer
23. Cornicetta ROB
24. Video Container BRI
*/
/* 01. 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:80%}
/* 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}
/* 02. Links
........................................................................................................................................ */
a {
color: #808080;
text-decoration:none;
color #808080;
transition:.2s all ease}
.no-touch a:hover {color:#2e2e2e}
a.filter-button {
color: #808080}
/* 03. Images
........................................................................................................................................ */
img {
max-width:100%;
height:auto;
border:0;
-ms-interpolation-mode:bicubic}
/* 04. Technical and Creative Typography
........................................................................................................................................ */
/* Modular Scale ---------------------- 16px @ 1:1.333 15px @ 1:1.333 ----------------------*/
/* Fontbase ---------------------- 16px = 1em ----------------------*/
/* Line Height Base ---------------------- 28px = 1.75em halved baseline = 14px / 0.875em ----------------------*/
/* maxvoltar.com/archive/-webkit-font-smoothing */
html {-webkit-font-smoothing: antialiased}
body,
button,
input,
textarea {
font-family:'Roboto', 'Open Sans', Futura, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight:300;
line-height:28px;
line-height:1.75em; /* 28px */
color:#222}
b, strong {font-weight:500; 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.368rem;
line-height:1.108em; /* 42px */
margin-bottom:0.7388em; /* 28px */}
h2, .h2 {
font-size:28.430px;
font-size:1.777rem;
line-height:1.477em; /* 42px */
margin-bottom:0.984em; /* 28px */}
h3, .h3 {
font-size:21.328px;
font-size:1.333rem;
line-height:1.312em; /* 28px */
margin-bottom:1.312em; /* 28px */}
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:'Open Sans', 'Roboto', Futura, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight:400;
color:#222}
/* 05. 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-size:.75rem;
font-weight:500;
text-transform:uppercase;
letter-spacing:.2em;
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}
/**
* Text inputs and select
*/
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 #d7d7d7;
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:#bebebe}
/**
* Drop-down page form elements
*/
#dropdown-wrapper input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]), #dropdown-wrapper textarea, #dropdown-wrapper select {
background:#fdfdfd;
background:rgba(255, 255, 255, .72);
border:none}
#dropdown-wrapper input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):focus, #dropdown-wrapper textarea:focus {
background:#fdfdfd;
background:rgba(255, 255, 255, .93)}
/**
* Buttons in the drop-down area
*/
#dropdown-wrapper input[type="submit"],
#dropdown-wrapper button,
#dropdown-wrapper input[type="button"] {
border:2px solid #fff;
color:#fff}
#dropdown-wrapper input[type="submit"]:hover,
#dropdown-wrapper button:hover,
#dropdown-wrapper input[type="button"]:hover {
border-color:#fdfdfd;
color:#fdfdfd}
/* 06. Common and Reusable Styles
........................................................................................................................................ */
.caps {
font-family:'Roboto', 'Open Sans', Futura, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size:12.003px;
font-size:0.75rem;
font-weight:400;
text-transform:uppercase;
letter-spacing:.2em}
.table {
display:table;
width:100%;
position:relative}
.hide-text {
text-indent:100%;
white-space:nowrap;
overflow:hidden}
.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}
/* 07. Main Content
........................................................................................................................................ */
.main-container {position: relative}
/* top border */
.main-container:before {
display:block;
position:absolute;
width:100%;
left:0;
top:0;
height:1px;
content:" ";
z-index:1;
background:#222}
.main-content {
padding-top:1.75em; /* 28px */
padding-bottom:1.75em; /* 28px */
background: url('https://www.lauraperini.com/css/images/bg2.jpg') repeat center;
/*border-top:1px #ab9776 solid;*/
/*border-bottom:1px #ab9776 solid;*/
}
/*tolto ROB
.page-template-template-portfolio-php .main-content,
.tax-portfolio_category .main-content { /* reset the top padding for both the portfolio and the taxonomy page
padding-top: 0;
}*/
.page-content,
.blog-container,
.page-container,
.single-portfolio-container {
max-width: 1020px;
margin: 0 auto;
padding: 0 2.5em; /* 40px */
}
.page-container > .page-content { /* page with sidebar */
padding-left: 0;
padding-right: 0;
}
.page-content {
width: 100%;
padding-bottom: 1.75em; /* 28px */
}
.page-template-template-page-with-sidebar-php .page-content {
width: 70%;
float: left;
padding-right: 1.875em; /* 30px */
}
.sidebar {
width: 28%;
float: right;
}
/* 08. Drop-down page
........................................................................................................................................ */
/**
* Drop-down page
*/
#dropdown-wrapper {
height: 0;
background-color: #222;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
color: #bdbdbd;
}
.dropdown-bg {
background: rgba(0, 0, 0, .78);
background: -moz-linear-gradient(top, rgba(34,34,34,0.65) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(34,34,34,0.65)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(34,34,34,0.65) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(34,34,34,0.65) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(34,34,34,0.65) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(34,34,34,0.65) 0%,rgba(34,34,34,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6222222', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
}
.dropdown-page {
max-width: 940px;
margin: 0 auto;
padding: 2.625em 2.5em; /* 42px 40px */
}
/**
* Headings in the drop-down page, and the footer slide out
*/
#dropdown-wrapper h1,
#dropdown-wrapper h2,
#dropdown-wrapper h3,
#dropdown-wrapper h4,
#dropdown-wrapper h5,
#dropdown-wrapper h5 {
color: #fff;
}
/**
* Links in the drop-down page, and the footer slide out
*/
#dropdown-wrapper a {
color: #db5348;
}
#dropdown-wrapper a:visited {
color: #db5348;
}
#dropdown-wrapper a:hover {
color: #DF3528;
}
#dropdown-wrapper a:active {
color: #d15334;
}
/**
* Drop-down tab trigger
*/
#dropdown-trigger {
float: right;
display: inline-block;
position: relative;
margin-right: 2.5em; /* 40px */
padding: 3px 29px 4px 18px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
background: #222;
z-index: 9;
cursor: pointer;
color: #E4E4E4;
font-size: 12.003px;
font-size: .75rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .05em;
transition: all .3s ease-in-out;
}
#dropdown-trigger:hover {
color: #ffffff;
}
#dropdown-trigger .drop-down-arrows {
position: absolute;
margin: 12px 0 0 7px;
width: 9px;
height: 8px;
background: url('https://www.lauraperini.com/css/images/main.png') no-repeat 0 0;
}
#dropdown-trigger .drop-down-arrows.arrow-up {
background-position: -50px 0;
}
/* 09. Header
........................................................................................................................................ */
/**
* Logo, social icons, and search
*/
.header {
position: relative;
padding: 3em 2.5em 2.5em; /* 56px 40px 70px */
}
.header.logo-child-only {
padding-bottom: 3.5em; /* 56px */
}
/**
* Logo
*/
.logo {
margin-bottom: 1.75em; /* 28px */
text-align: center;
}
.logo-child-only .logo {
margin-bottom: 0;
}
.logo a {
display: inline-block;
vertical-align: top; /* Prevent the inline-block declaration from messing up the (line) height of the parent element. */
}
.logo .textual-logo {
margin: 0 auto;
color: #222;
font-weight: 300;
font-size: 37.897px;
font-size: 2.368rem;
line-height: 1.108em; /* 42px */
}
.no-touch .logo a:hover {
animation: tinywiggle 220ms ease-out;
}
/**
* Main Menu
*/
.menu {
text-align: center;
}
.menu li {
display: inline-block;
padding: 0 0.9375em; /* 15px */
vertical-align: top; /* Prevent the inline-block declaration from messing up the (line) height of the parent element. */
list-style: none;
}
.menu .parent {
position: relative;
}
.menu a,
.filter-container {
display: block;
position: relative;
color: #808080;
font-size: 12.003px;
font-size: .75rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .2em;
}
/**
* Sub menu indicator generated by jQuery plugin called superfish
*/
.menu .parent > a {
position: relative;
padding-right: 17px;
}
.menu .parent > a:after { /* note: the "parent" class is generated by a custom walker */
content: " ";
text-indent: -9999px;
position: absolute;
margin: 12px 0 0 7px;
width: 8px;
height: 7px;
background: url('https://www.lauraperini.com/css/images/main.png') no-repeat -100px 0;
}
/**
* Current menu item
*/
.menu .current-menu-item > a {
color: black;
}
.menu .sub-menu .current-menu-item > a {
background-color: rgb(100, 100, 100);
color: #fff;
}
/**
* Drop-down menu
*/
.menu .sub-menu {
display: none;
position: absolute;
margin: 0;
padding-top: 20px;
min-width: 130px;
text-align: left;
z-index: 9999;
}
.menu .sub-menu li {
display: block;
padding: 0;
margin-left: 0;
}
.menu .sub-menu a {
display: block;
padding: 4px 9px;
border: 1px solid #262626;
border-color: rgba(0,0,0,.2);
border-bottom: none;
background-color: #222;
color: #999;
font-size: 12.003px;
font-size: 0.75rem;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
transition: all .35s ease-in-out; /* HOVER OFF */
}
.menu li:hover ul li a:hover { /* Set links styles for dropdown when items are hovered */
border: 1px solid transparent;
border-bottom: none;
background-color: #939393;
color: #fff;
transition: all .1s ease-in-out; /* HOVER ON */
}
.menu .sub-menu li:last-child a {
border: 1px solid #262626;
border-color: rgba(0,0,0,.2);
}
.menu .sub-menu li:last-child a:hover {
border: 1px solid transparent;
border-color: transparent;
}
/**
* Add rounded corners to the drop-down menu
*/
.menu .sub-menu li:first-child a {
border-top-right-radius: 2px;
border-top-left-radius: 2px;
}
.menu .sub-menu li:last-child a {
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
/* 10. Portfolio Gallery
........................................................................................................................................ */
.pf-gallery-container {
position: relative;
}
/**
* Filter
*/
.filter-container { /* font size (12px) declared above. */
position: absolute;
left: 20px;
top: 20px;
width: 100%;
width: calc(100% - 40px);
}
.portfolio-filter {
float: left;
position: relative;
z-index: 998;
}
.portfolio-filter li {
float: left;
}
.portfolio-filter .filter-category {
display: none;
opacity: 0;
transform: translateY(50%);
}
.portfolio-filter .filter-button,
.portfolio-filter a {
height: 36px;
padding: 0.333em 1em; /* 4px 12px */
color: #808080;
background: white;
line-height: 0;
}
.portfolio-filter .filter-button {
position: relative;
padding-right: 2.666em; /* 32px */
z-index: 999;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.portfolio-filter .filter-button:after {
position: absolute;
right: 11px;
top: 15px;
width: 11px;
height: 9px;
background: url("https://www.lauraperini.com/css/images/main.png") no-repeat -150px 0;
content: " ";
text-indent: -9999px;
}
.portfolio-filter .filter-active:after {
top: 15px;
background: url("https://www.lauraperini.com/css/images/main.png") no-repeat -200px 0;
}
.portfolio-filter .filter-button:hover {
background: white;
}
.portfolio-filter a {
display: block;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.portfolio-filter .active a,
.portfolio-filter .active a:hover {
background: #222;
color: #e4e4e4;
}
.portfolio-filter a:hover {
background: #f4f4f4;
}
/* vertically center the text inside the filter buttons */
.portfolio-filter span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
/**
* Isotope Filtering
*/
.portfolio-gallery {
width: 100%;
}
.portfolio-gallery .portfolio-item {
float: left;
width: 33.333%;
overflow: hidden;
}
.portfolio-gallery .project-link {
display: block;
}
.project-link .thumb-container {
position: relative;
background-color:#ffffff;
}
.portfolio-gallery .preview-img-wrap {
transition: .4s all ease;
}
.no-touch .project-link:hover .preview-img-wrap {
opacity: .1;
}
.project-link .preview-img {
vertical-align: bottom;
transition: .4s all ease;
}
.portfolio-gallery .project-title {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-30%);
padding: 0 1.666em; /* 0 20px */
margin-bottom: 0;
opacity: 0;
font-family: 'Roboto', 'Open Sans', Futura, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 12.003px;
font-size: .75rem;
line-height: 2.333em; /* 28px */
font-weight: 600;
text-align: center;
color: #555555;
transition: .4s all ease;
}
.no-touch .project-link:hover .project-title {
opacity: 1;
transform: translateY(-50%);
}
/**
* Isotope Filtering
*/
.isotope,
.isotope .isotope-item { /* change duration value to whatever you like */
transition-duration: 0.45s;
}
.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;
margin-bottom: 1.75em; /* 28px */
}
/**
* Portfolio post title
*/
.single-portfolio .post-title {
margin-bottom: 1.108em; /* 42px / 37.897px */
text-align: center;
}
/**
* Next/Prev Links
*/
.pager {
padding: 0 0 2.333em; /* 28px */
font-family: 'Roboto', sans-serif;
color: #808080;
font-size: 12.003px;
font-size: .75rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .2em;
}
.prev-page {
float: left;
}
.next-page {
float: right;
}
.pager-link, .pager a {
display: block;
}
.no-link {
opacity: 0.5;
}
.arrows {
font-family: Arial, Helvetica, sans-serif;
position: relative;
top: -1px;
}
/**
* Meta Post Info (Client, Skills...)
*/
.project-meta {
padding: 3.5em 0 7em; /* 56px 0 112px */
}
.meta-column {
float: left;
width: 100%;
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;
font-size: .78em;
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;
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 {
font-family: 'Roboto', sans-serif;
margin-top: 0.9375em; /* 15px */
}
/**
* 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; /* 0 25px 20px 0 */
}
.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;
}
.widget .menu .current-menu-item a:after {
display: none; /* hide the current menu item indicator */
}
/* 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('https://www.lauraperini.com/css/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('https://www.lauraperini.com/css/images/main.png');
background-repeat: no-repeat;
background-position: -300px 9px;
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 0 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: 500;
}
/* 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('https://www.lauraperini.com/css/images/pre-code-bg.png') repeat left top;
text-shadow: none;
}
.the-content pre code {
margin: 0 0 0 2.5em; /* 0 0 0 40px */
padding: 1.125em 0; /* 18px 0 */
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;
}
/* 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 .wpcf7-form-control-wrap { /* span wrapper */
display: inline !important;
}
.wpcf7 div.wpcf7-response-output {
margin: 2em 0 1em;
}
.wpcf7 span.wpcf7-not-valid-tip {
z-index: 100;
background: none;
border: none;
font-size: 0.875em; /* 14px */
width: 200px;
padding: 0;
color: #e44141;
}
.slide-out-div .wpcf7 .wpcf7-response-output,
.dropdown-page .wpcf7 .wpcf7-response-output {
padding: 0;
}
.slide-out-div .wpcf7 .wpcf7-mail-sent-ok,
.dropdown-page .wpcf7 .wpcf7-mail-sent-ok {
border: none;
color: #70c949;
}
.slide-out-div .wpcf7 .wpcf7-mail-sent-ng,
.dropdown-page .wpcf7 .wpcf7-mail-sent-ng {
border: none;
color: #e44141;
}
.slide-out-div .wpcf7 .wpcf7-spam-blocked,
.dropdown-page .wpcf7 .wpcf7-spam-blocked {
border: none;
color: #ffa500;
}
.slide-out-div .wpcf7 .wpcf7-validation-errors,
.dropdown-page .wpcf7 .wpcf7-validation-errors {
border: none;
color: #f4e50f;
}
/* Disable the default margin introduced by WordPress' admin bar */
html[lang] {
margin-top: 0 !important;
}
/* 18. Search & 404 Not Found
........................................................................................................................................ */
.item-title,
.search-results p {
text-align: center;
}
.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: center;
}
.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 {
background: #fff;
padding-left: 20px;
}
/**
* Not found paragraph
*/
.not-found {
text-align: center;
}
/* 19. Footer
........................................................................................................................................ */
.footer {
position:relative;
padding:3.5em 2.5em 1em} /* 3.5em 2.5em 1.75em -- 56px 40px 28px */
.footer .menu {margin:0} /* 1.75em - 28px */
.footer p {padding-top:0; margin-top:0; padding-bottom:0; margin-bottom:0}
.footer ul li.social {padding:0; margin:0px}
.footer ul li a img {padding:0; margin:0}
.footer ul li a img {margin:0 auto; opacity:0.5; display:inline}
.footer ul li a:hover img {opacity:1}
.footer ul li a:hover {text-decoration:none; color:#c5c8bb}
/* Copyright */
.footer p {text-align:center; color:#808080 } /* 2e2e2e2 */
.footer p a {color:#2e2e2e}
.footer p a:hover {color:#000}
.footer small {display:block; font-size:11px}
/**
* Back to top button
*/
#back-to-top {
display: none;
width: 53px;
height: 53px;
position: fixed;
bottom: 20px;
right: 20px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.8) url('https://www.lauraperini.com/css/images/main.png') no-repeat -237px 18px;
z-index: 1000;
cursor: pointer;
}
#back-to-top:hover {
background-color: rgba(255, 255, 255, 1);
}
/* 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) {
.main-content .widget .tp_recent_tweets li,
.current-menu-item > a:after,
#dropdown-trigger .drop-down-arrows,
#back-to-top,
.menu .parent > a:after,
.portfolio-filter .filter-button:after {
/* Reference the @2x Sprite */
background-image: url("https://www.lauraperini.com/css/images/main_@2x.png");
/* Translate the @2x sprite's dimensions back to 1x */
background-size: 400px 100px;
}
.portfolio-filter .filter-active:after {
top: 14px;
}
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;
}
/* Slider pagination */
.metaslider .flex-control-paging li a {
background: #e0e0e0;
box-shadow: none;
}
}
/* Using background-attachment: fixed with background-size: cover causes issues on most mobile browsers, so we need to switch to background-attachment: scroll */
@media screen and (max-device-width: 1024px) {
#dropdown-wrapper {
background-attachment: scroll;
}
}
@media only screen and (min-width: 1680px) {
.dropdown-page {
padding-top: 3.5em; /* 56px */
padding-bottom: 3.5em; /* 56px */
}
}
@media only screen and (max-width: 960px) {
.main-content {
/*padding-top: 0;*/
}
.footer {
padding-top: 1.75em; /* 28px */
}
.page-template-template-portfolio-php .footer,
.tax-portfolio_category .footer,
.single-portfolio .footer {
padding-top: 3.5em; /* 56px */
}
/**
* Menu
*/
.menu li {
padding-bottom: 0.5em; /* 8px */
}
.menu .sub-menu {
padding-top: 0.5em; /* 8px */
}
.menu .sub-menu a {
white-space: normal;
}
/**
* 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;
}
}
@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) {
.dropdown-page,
.header,
.footer,
.page-content,
.blog-container,
.page-container,
.single-portfolio-container {
padding-left: 1.875em; /* 30px */
padding-right: 1.875em; /* 30px */
}
/**
* Blog
*/
.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) {
/**
* Single portfolio item meta information
*/
.project-meta {
padding: 0.875em 0 3.5em; /* 14px 0 56px */
}
.project-meta .meta-column {
width: 100% !important;
padding-bottom: 0.875em !important; /* 14px */
}
}
@media only screen and (max-width: 470px) {
.header {
padding-top: 4.375em /* 70px */
}
/**
* Portfolio/blog pagination
*/
.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: 380px) {
.dropdown-page,
.header,
.footer,
.page-content,
.blog-container,
.page-container,
.single-portfolio-container {
padding-left: 1.333em; /* 20px */
padding-right: 1.333em; /* 20px */
}
}
@media only screen and (max-width: 350px) {
/**
* WordPress gallery
*/
.gallery .gallery-item {
margin: 0 0 20px 0 !important;
width: 100% !important;
float: none;
}
}
/**
* Portfolio grid
*/
@media only screen and (max-width: 400px) {
.portfolio-gallery .portfolio-item {
width: 100%; /* full width */
}
}
@media only screen and (min-width: 401px) and (max-width: 855px) {
.portfolio-gallery .portfolio-item {
width: 50%; /* 2 columns */
}
}
@media only screen and (min-width: 856px) and (max-width: 1280px) {
.pf-gallery-container {
width:80%;
margin:0 auto;
}
.portfolio-gallery .portfolio-item {
width: 33.333%; /* 3 columns */
}
}
@media only screen and (min-width: 1281px) and (max-width: 1480px) {
.pf-gallery-container {
width:80%;
margin:0 auto;
}
.portfolio-gallery .portfolio-item {
width: 25%; /* 4 columns */
}
}
@media only screen and (min-width: 1481px) and (max-width: 1880px) {
.pf-gallery-container {
width:80%;
margin:0 auto;
}
.portfolio-gallery .portfolio-item {
width: 20%; /* 5 columns */
}
}
@media only screen and (min-width: 1881px) and (max-width: 2280px) {
.pf-gallery-container {
width:80%;
margin:0 auto;
}
.portfolio-gallery .portfolio-item {
width: 16.666%; /* 6 columns */
}
}
@media only screen and (min-width: 2281px) and (max-width: 2680px) {
.pf-gallery-container {
width:80%;
margin:0 auto;
}
.portfolio-gallery .portfolio-item {
width: 14.285%; /* 7 columns */
}
}
@media only screen and (min-width: 2681px) and (max-width: 3080px) {
.pf-gallery-container {
width:80%;
margin:0 auto;
}
.portfolio-gallery .portfolio-item {
width: 12.5%; /* 8 columns */
}
}
@media screen and (max-width: 639px) {
.sixcol {width:100%; margin:0 auto}
}
@media screen and (max-width: 818px) {
.threecol {padding:30px 10px}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {width:auto; float:none; margin-left:0px; margin-right:0px}
}
/* 21. Animations
........................................................................................................................................ */
@media only screen and (max-width: 960px) {
.cssanimations .logo {
animation: bounceInLeft .7s .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 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 boing {
0%{ transform: scale(1) }
35%{ transform: scale(1.1) }
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;
}
/* 22. Internet Explorer
........................................................................................................................................ */
/* IE10 and IE11 specific styles */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Remove rounded corners from the drop-down menu because of IE's bleeding background color bug */
.menu .sub-menu li:first-child a {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.menu .sub-menu li:last-child a {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Adjust the text in the filter buttons */
.portfolio-filter span {
margin-top: 1px;
}
}
/* IE9 specific styles */
.ie9 .menu .sub-menu li:first-child a {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.ie9 .menu .sub-menu li:last-child a {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.ie9 .portfolio-filter span {
margin-top: 1px;
}
.ie9 .portfolio-filter .filter-category {
transform: translateY(0%);
}
/* 23. Cornicetta ROB
........................................................................................................................................ */
.cornicetta {
text-align: center;
margin-bottom: -9px;
}
.cornicetta-bottom{
transform:rotateX(180deg)
}
/* 23. Video Container BRI
........................................................................................................................................ */
/* responsive video */
.video-container {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden}
.video-container iframe,
.video-container object,
.video-container embed {position:absolute; top:0; left:0; width:100%; height:100%}