ACC SHELL
/*
Theme Name: Amplius
Theme URI: http://themeforest.net/user/Coffee-Themes
Author: Ithi
Author URI: http://themeforest.net/user/Coffee-Themes
Description: WordPress theme designed for themeforest.net by Coffee Themes. Support via profile on themeforest.
Version: 1.1.3
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: coffee
*/
@import "compass/css3";
@import "compass/utilities";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a{ text-decoration: none; }
.clearfix:before, .clearfix:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }
body{
position: relative;
font-size: 14px;
line-height: 25px;
color: #777;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#wpadminbar{
@include backface-visibility(hidden);
-webkit-transform: translate(0);
}
#page-wrapper{
position: relative;
display: block;
overflow: hidden;
#header-wrapper{
position: absolute;
display: block;
top: 0;
width: 100%;
z-index: 100;
-webkit-transform: translate(0);
&.parallax-on{
position: fixed;
}
#header{
position: relative;
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
}
#parallax-wrapper{
width: 100%;
position: absolute;
margin-top: 125px;
&.parallax-on{
position: fixed;
}
#parallax-inner{
position: relative;
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
height: 100%;
}
}
#content-wrapper{
position: relative;
display: block;
margin-top: 250px;
z-index: 80;
#content{
position: relative;
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
#call-to-action-wrapper{
#call-to-action{
position: relative;
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
}
#twitterfeed-wrapper{
#twitterfeed{
position: relative;
display: block;
max-width: 1180px;
margin: 0 auto;
}
}
#footer-wrapper{
position: relative;
display: block;
#footer{
position: relative;
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
}
#bottom-footer-wrapper{
#bottom-footer{
position: relative;
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
}
}
}
.admin-bar #page-wrapper #header-wrapper.parallax-on{
top: 28px;
}
#header-wrapper{
background: #fff;
@include box-shadow(0px 0px 14px 0px rgba(0, 0, 0, 0.12));
@include backface-visibility(hidden);
#header{
#header-logo-wrapper{
position: absolute;
display: block;
height: 50%;
top: 50%;
width: 25%;
margin-top: -31px;
left: 0px;
z-index: 60;
@include backface-visibility(hidden);
#header-logo{
position: relative;
display: block;
margin-left: 10px;
height: 100%;
a{
position: relative;
display: block;
height: 100%;
max-width: 100%;
img{
position: absolute;
display: block;
vertical-align: bottom;
height: 100%;
max-width: 100%;
@include transition (.2s);
}
}
}
}
#header-navigation-wrapper{
position: relative;
display: block;
float: right;
width: 75%;
padding: 0;
white-space: nowrap;
#header-navigation-mobile{
display: none;
}
#header-navigation{
position: relative;
display: block;
text-transform: uppercase;
letter-spacing: -4px;
color: #808080;
margin-right: 10px;
ul{
position: relative;
display: block;
text-align: right;
width: 100%;
li{
position: relative;
letter-spacing: -1.5px;
display: inline-block;
padding: 50px 25px;
&:last-child{
padding-right: 0;
}
a{
color: inherit;
text-decoration: none;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
ul{
position: absolute;
display: none;
width: 220px;
padding: 0 20px;
top: 100%;
left: 50%;
margin-left: -130px;
text-align: center;
font-size: 12px;
color: #eee;
@include box-shadow(0px 0px 14px 0px rgba(0, 0, 0, 0.12));
background-image: url('img/dark-bg.png');
z-index: 50;
&:after{
content: "";
position: absolute;
top: -12px;
left: 50%;
margin-left: -20px;
width: 0px;
height: 0px;
border-top: 20px solid #fff;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
z-index: 30;
}
li{
margin-top: 25px;
margin-left: 0;
letter-spacing: -0.5px;
padding: 0;
display: block;
&:after{
content: "";
position: absolute;
display: block;
left: 0;
bottom: -13px;
width: 100%;
height: 1px;
background-color: #404040;
}
&:last-child{
margin-bottom: 25px;
&:after{
display: none;
}
}
.sub-menu{
display: block;
position: relative;
@include box-shadow(0px 0px 0px 0px rgba(0, 0, 0, 0));
background: none;
top: auto;
&:after{
display: none;
}
li:after{
content: "";
position: absolute;
display: block;
left: 0;
bottom: 36px;
width: 100%;
height: 1px;
background-color: #404040;
}
}
}
}
&.current-menu-item,
&.current_page_item{
> a{
color: #1abc9c;
}
}
}
}
}
}
}
}
#parallax-wrapper{
background-color: #1abc9c;
background-position: 50% 50%;
background-position-x: 50%;
background-position-y: 50%;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
#parallax-inner{
#parallax-title-wrapper{
position: absolute;
display: block;
top: 50%;
margin-top: -24.5px;
left: 5px;
#parallax-title{
text-transform: uppercase;
letter-spacing: -4px;
color: #fff;
font-size: 48px;
line-height: 49px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}
}
#parallax-aside-wrapper{
position: absolute;
display: block;
top: 50%;
margin-top: -25px;
right: 10px;
border: 3px solid rgba(255, 255, 255, .5);
#parallax-search{
input{
text-transform: uppercase;
letter-spacing: -0.5px;
color: #fff;
font-size: 14px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
background: none;
padding: 13px 50px 13px 16px;
width: 59px;
margin: 0;
border: none;
display: block;
outline: none;
outline-offset: 0;
}
i{
color: #fff;
font-size: 14px;
position: absolute;
right: 16px;
top: 50%;
margin-top: -8px;
}
}
#parallax-filter{
text-transform: uppercase;
letter-spacing: -0.5px;
color: #fff;
font-size: 14px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
background: none;
padding: 10px 30px 10px 16px;
.filters{
position: relative;
display: block;
min-height: 24px;
li{
position: relative;
display: none;
float: left;
white-space:nowrap;
margin-right: 20px;
height: auto !important;
&.current{
display: block;
a{
opacity: 1;
}
}
a{
color: #fff;
opacity: .7;
@include transition(.2s);
&:hover{
opacity: 1;
}
}
}
}
i{
color: #fff;
font-size: 14px;
position: absolute;
right: 16px;
top: 50%;
margin-top: -7px;
}
}
}
}
#parallax-google-maps{
position: relative;
display: block;
width: 100%;
margin: 0 auto;
height: 100%;
}
}
#content-wrapper{
background-color: #fff;
@include box-shadow(0px 0px 14px 0px rgba(0, 0, 0, 0.12));
}
#content{
.content-column-wrapper{
position: relative;
display: block;
float: left;
.content-column{
position: relative;
display: block;
margin: 0 10px;
}
}
article{
position: relative;
display: block;
float: left;
width: 100%;
.entry-media-wrapper{
position: relative;
display: block;
.entry-media{
position: relative;
display: block;
margin-bottom: 25px;
img{
width: 100%;
height: auto;
vertical-align: bottom;
}
.flexslider{
position: relative;
display: block;
.slides{
position: relative;
display: block;
li{
position: relative;
display: none;
}
}
.flex-direction-nav{
position: absolute;
display: block;
right: 0px;
bottom: 0px;
li{
position: absolute;
display: block;
right: 15px;
bottom: 15px;
z-index: 30;
font-size: 12px;
position: relative;
display: inline-block;
float: left;
&:first-child{
right: 25px;
a{
}
}
&:last-child{
a{
}
}
a{
color: #fff;
@include transition (.2s);
background-color: #1abc9c;
padding: 8px 10px 6px 10px;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
&:hover{
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
}
}
}
}
.shared-video,
.shared-audio{
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
iframe{
font-size: 0;
line-height: 0;
vertical-align: bottom;
}
}
.shared-video{
min-height: 275px;
iframe{
min-height: 275px;
}
}
.featured-quote{
position: relative;
display: block;
background: #1abc9c;
@include transition (.2s);
width: 100%;
a{
position: relative;
display: block;
padding: 26px 40px 18px 40px;
text-decoration: none;
max-width: 100%;
}
blockquote{
text-transform: uppercase;
letter-spacing: -1px;
text-align: center;
color: #fff;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
p{
position: relative;
display: block;
font-size: 18px;
&:before{
content: "“";
position: absolute;
display: block;
left: -22px;
top: 10px;
font-size: 48px;
line-height: 0;
}
&:after{
content: "”";
position: absolute;
display: block;
right: -22px;
bottom: -11px;
font-size: 48px;
line-height: 0;
}
}
footer{
margin-top: 6px;
font-size: 12px;
}
}
&:hover{
background: #34495e;
}
}
.featured-link{
position: relative;
display: block;
background: #1abc9c;
@include transition (.2s);
width: 100%;
a{
text-decoration: none;
position: relative;
display: block;
padding: 26px 40px 24px 40px;
text-decoration: none;
max-width: 100%;
.link{
text-transform: uppercase;
letter-spacing: -1px;
text-align: center;
color: #fff;
font-size: 18px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
}
}
&:hover{
background: #34495e;
}
i{
color: #fff;
pointer-events: none;
position: absolute;
left: 20px;
top: 50%;
margin-top: -9px;
color: #fff;
font-size: 18px;
}
}
.entry-media-overlay{
position: absolute;
display: block;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, 0);
z-index: 20;
@include transition (.2s);
@include backface-visibility(hidden);
.entry-media-permalink{
position: absolute;
display: block;
width: 44px;
height: 44px;
margin-left: -25px;
margin-top: -25px;
top: 50%;
left: 50%;
border: 3px solid rgba(255, 255, 255, .5);
opacity: 0;
@include transition (.2s);
@include scale (.6);
i{
position: absolute;
display: block;
margin-left: -9px;
margin-top: -9px;
top: 50%;
left: 50%;
font-size: 19px;
color: #fff;
}
}
.entry-media-zoom{
position: absolute;
display: block;
width: 44px;
height: 44px;
margin-left: -25px;
margin-top: -25px;
top: 50%;
left: 50%;
border: 3px solid rgba(255, 255, 255, .5);
opacity: 0;
@include transition (.2s);
@include scale (.6);
i{
position: absolute;
display: block;
margin-left: -8px;
margin-top: -10px;
top: 50%;
left: 50%;
font-size: 19px;
color: #fff;
}
}
&:hover{
background-color: rgba(0, 0, 0, .5);
.entry-media-permalink,
.entry-media-zoom{
opacity: 1;
@include scale (1);
&:hover{
border: 3px solid rgba(255, 255, 255, .7);
}
}
}
}
.entry-media-arrow-top{
position: absolute;
z-index: 25;
top: -2px;
left: 50%;
margin-left: -10px;
width: 0px;
height: 0px;
border-top: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
@include backface-visibility(hidden);
}
.entry-media-arrow-bottom{
position: absolute;
z-index: 25;
bottom: -2px;
left: 50%;
margin-left: -10px;
width: 0px;
height: 0px;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
@include backface-visibility(hidden);
}
.entry-media-arrow-right{
position: absolute;
z-index: 25;
right: -2px;
top: 50%;
margin-top: -10px;
width: 0px;
height: 0px;
border-right: 10px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
@include backface-visibility(hidden);
@include transition (.2s);
}
}
}
.entry-title-wrapper{
position: relative;
display: block;
word-wrap: break-word;
-ms-word-wrap: break-word;
h1.entry-title{
text-transform: uppercase;
letter-spacing: -1px;
color: #404040;
font-size: 18px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
a{
color: inherit;
text-decoration: none;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
}
}
.entry-meta-wrapper{
position: relative;
display: block;
.entry-meta{
text-transform: uppercase;
letter-spacing: -1px;
color: #999999;
font-size: 12px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
li{
position: relative;
display: inline-block;
margin-right: 8px;
&:after{
content: "·";
position: absolute;
right: -5px;
top: 0px;
}
&:last-child{
margin-right: 0;
&:after{
display: none;
}
}
a{
color: inherit;
text-decoration: none;
@include transition (.2s);
&:hover{
color: #404040;
}
}
}
}
}
.entry-content-wrapper{
position: relative;
display: block;
margin-top: 7px;
.entry-content{
a.read-more{
position: relative;
display: inline-block;
margin-top: -12px;
margin-bottom: 18px;
button{
position: relative;
display: inline-block;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0px;
color: #999999;
font-size: 11px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
padding: 9px 15px 7px 36px;
margin: 0;
border: none;
background: #f7f7f7;
@include transition (.2s);
i{
color: inherit;
position: absolute;
top: 14px;
left: 15px;
font-size: 14px;
}
&:hover{
color: white;
background-color: #1abc9c;
}
}
}
.entry-tags{
position: relative;
display: block;
margin-top: -3px;
margin-bottom: 23px;
a{
position: relative;
display: inline-block;
text-decoration: none;
color: #666;
border: 1px solid #bfbfbf;
padding: 2px 9px 1px 9px;
margin: 0 10px 0 0;
background-color: rgba(26, 188, 156, 0);
@include transition (.2s);
&:hover{
color: #fff;
border-color: #1abc9c;
background-color: rgba(26, 188, 156, 1);
}
&:last-child{
margin-right: 0;
}
}
}
}
}
&.sticky{
.entry-title-wrapper{
h1.entry-title{
color: #000;
}
}
}
}
#pagination{
position: relative;
display: block;
float: left;
width: 100%;
margin-bottom: 43px;
#page-number{
position: relative;
display: block;
float: left;
text-transform: uppercase;
letter-spacing: 0px;
color: #999999;
font-size: 11px;
margin-top: 1px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
}
#page-links{
position: relative;
display: block;
float: right;
a{
position: relative;
float: left;
&.page-numbers{
display: none;
}
&.prev,
&.next{
display: block;
}
button{
position: relative;
display: inline-block;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0px;
color: #999999;
font-size: 11px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
padding: 9px 15px 7px 36px;
margin: -6px 0 0 0;
border: none;
background: #f7f7f7;
@include transition (.2s);
i{
color: inherit;
position: absolute;
top: 14px;
left: 15px;
font-size: 14px;
}
&:hover{
color: white;
background-color: #1abc9c;
}
&.next{
padding: 9px 36px 7px 15px;
i{
left: auto;
right: 15px;
}
}
}
&:last-child{
margin-left: 20px;
}
}
span{
display: none;
}
}
}
#large-blog-type{
width: 75%;
margin-bottom: 43px;
.content-column{
margin-right: 30px;
margin-top: 32px;
}
&.left-sidebar{
.content-column{
margin-left: 30px;
margin-right: 10px;
}
}
article{
margin-top: 43px;
padding-bottom: 41px;
margin-bottom: 32px;
border-bottom: 1px solid #e6e6e6;
width: 100%;
.entry-aside{
position: absolute;
display: block;
left: 0px;
top: 0;
width: 50px;
height: 100%;
z-index: 60;
}
.entry-inner{
position: relative;
display: block;
float: left;
padding-left: 80px;
z-index: 50;
width: 100%;
@include box-sizing(border-box);
}
}
}
#medium-blog-type{
width: 75%;
margin-bottom: 43px;
.content-column{
margin-right: 30px;
margin-top: 32px;
}
&.left-sidebar{
.content-column{
margin-left: 30px;
margin-right: 10px;
}
}
article{
margin-top: 43px;
padding-bottom: 42px;
margin-bottom: 32px;
border-bottom: 1px solid #e6e6e6;
width: 100%;
min-height: 307px;
.entry-aside{
position: absolute;
display: block;
left: 0px;
top: 0;
width: 280px;
height: 100%;
z-index: 60;
}
.entry-inner{
position: relative;
display: block;
float: left;
padding-left: 300px;
z-index: 50;
width: 100%;
@include box-sizing(border-box);
}
&.nothumbnail{
min-height: inherit;
.entry-inner{
padding-left: 0;
}
}
}
}
#mini-blog-type{
width: 75%;
margin-bottom: 75px;
.content-column{
margin-right: 30px;
margin-top: 50px;
}
&.left-sidebar{
.content-column{
margin-left: 30px;
margin-right: 10px;
}
}
article{
margin-top: 25px;
padding-bottom: 24px;
margin-bottom: 0px;
border-bottom: 1px solid #e6e6e6;
width: 100%;
.entry-aside{
position: absolute;
display: block;
left: 0px;
top: 0;
width: 50px;
height: 100%;
z-index: 60;
.entry-media-wrapper{
.entry-media{
&:hover .entry-media-arrow-right{
right: -10px;
}
}
}
}
.entry-inner{
position: relative;
display: block;
float: left;
padding-left: 70px;
z-index: 50;
width: 100%;
@include box-sizing(border-box);
}
&.nothumbnail{
.entry-inner{
padding-left: 0;
}
}
}
#pagination{
margin-top: 32px;
margin-bottom: 11px;
}
}
#grid-blog-type{
width: 100%;
margin-bottom: 50px;
.content-column{
margin-right: 0px;
margin-left: 0px;
margin-top: 25px;
}
article{
margin-top: 50px;
padding-bottom: 25px;
margin-bottom: 0px;
border-bottom: none;
width: 25%;
padding-left: 10px;
padding-right: 10px;
@include box-sizing(border-box);
.entry-inner{
position: relative;
display: block;
float: left;
padding-bottom: 17px;
border-bottom: 1px solid #e6e6e6;
@include transition(.2s);
width: 100%;
&:hover{
border-bottom: 3px solid #1abc9c;
padding-bottom: 15px;
}
}
}
#pagination{
margin-top: 7px;
margin-bottom: 36px;
#page-number{
margin-left: 10px;
}
#page-links{
margin-right: 10px;
}
}
}
#sidebar-wrapper{
width: 25%;
.content-column{
margin-top: 75px;
}
}
#large-blog-type.single-post,
#medium-blog-type.single-post{
.content-column{
article{
border-bottom: none;
padding-bottom: 0;
margin-bottom: 43px;
}
.entry-comments-wrapper{
position: relative;
display: block;
float: left;
padding-left: 80px;
margin-bottom: 50px;
width: 100%;
@include box-sizing(border-box);
.comments-title-wrapper{
position: relative;
display: block;
width: 100%;
height: 25px;
background-image: url('img/title-bg.png');
&:after{
content:"";
position: absolute;
display: block;
background: #e5e5e5;
height: 13px;
width: 1px;
right: 0;
top: 6px;
}
.comments-title{
text-transform: uppercase;
letter-spacing: -1px;
color: #4c4c4c;
font-size: 16px;
background: white;
position: relative;
display: inline-block;
padding-right: 34px;
&:after{
content:"";
position: absolute;
display: block;
border: 1px solid #e5e5e5;
height: 11px;
width: 11px;
right: 0;
top: 6px;
}
a{
color: inherit;
text-decoration: none;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
}
}
.entry-comments{
ol{
.comment{
position: relative;
display: block;
float: left;
margin-top: 25px;
margin-bottom: 18px;
width: 100%;
@include box-sizing(border-box);
.comment-avatar{
position: absolute;
display: block;
left: 0;
top: 0;
img{
vertical-align: bottom;
}
}
.comment-sheet{
position: relative;
display: block;
padding-left: 70px;
width: 100%;
@include box-sizing(border-box);
.comment-author{
text-transform: uppercase;
letter-spacing: -1px;
color: #404040;
font-size: 14px;
a{
color: inherit;
text-decoration: none;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
}
.comment-meta{
text-transform: uppercase;
letter-spacing: -1px;
color: #999999;
font-size: 10px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
li{
position: relative;
display: inline-block;
margin-right: 8px;
&:after{
content: "·";
position: absolute;
right: -5px;
top: 0px;
}
&:last-child{
margin-right: 0;
&:after{
display: none;
}
}
a{
color: inherit;
text-decoration: none;
@include transition (.2s);
&:hover{
color: #404040;
}
}
}
}
.comment-text{
margin-top: 7px;
p{
margin-bottom: 25px;
&:last-child{
margin-bottom: 0;
}
}
}
}
&.bypostauthor{
color: inherit;
}
}
.trackback-pingback{
margin-bottom: 25px;
h5{
text-transform: uppercase;
letter-spacing: -1px;
color: #404040;
font-size: 14px;
a{
color: inherit;
}
}
}
.children{
position: relative;
display: block;
float: left;
margin-left: 70px;
}
}
}
}
.respond-wrapper{
position: relative;
display: block;
float: left;
padding-left: 80px;
width: 100%;
@include box-sizing(border-box);
#respond{
position: relative;
display: block;
float: left;
width: 100%;
#reply-title{
position: relative;
display: block;
width: 100%;
height: 25px;
@include box-sizing(border-box);
background-image: url('img/title-bg.png');
&:after{
content:"";
position: absolute;
display: block;
background: #e5e5e5;
height: 13px;
width: 1px;
right: 0;
top: 6px;
}
.reply-title-inner{
text-transform: uppercase;
letter-spacing: -1px;
color: #4c4c4c;
font-size: 16px;
background: white;
position: relative;
display: inline-block;
padding-right: 34px;
&:after{
content:"";
position: absolute;
display: block;
border: 1px solid #e5e5e5;
height: 11px;
width: 11px;
right: 0;
top: 6px;
}
a{
color: inherit;
text-decoration: none;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
}
small{
position: relative;
margin-left: -16px;
top: -1px;
display: inline-block;
a{
color: #1abc9c;
text-decoration: none;
@include transition (.2s);
&:hover{
color: inherit;
}
}
}
}
form{
position: relative;
display: block;
margin-top: 25px;
margin-bottom: 44px;
overflow: hidden;
.logged-in-as{
a{
color: #1abc9c;
@include transition (.2s);
&:hover{
color: #404040;
}
}
}
.comment-form-author,
.comment-form-email,
.comment-form-url{
position: relative;
display: block;
float: left;
width: 33.33%;
@include box-sizing(border-box);
input{
position: relative;
display: block;
padding: 0;
margin: 0;
border: 0;
background: #fcfcfc;
border-bottom: 1px solid #e5e5e5;
display: block;
font-size: 14px;
line-height: 25px;
color: #aaa;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
outline: none;
width: 100%;
padding: 13px 20px 11px 20px;
@include box-sizing(border-box);
@include transition (.2s);
&:focus{
color: #444;
border-bottom: 1px solid #999;
}
}
}
.comment-form-author{
padding-right: 13.33px;
}
.comment-form-email{
padding-right: 6.66px;
padding-left: 6.66px;
}
.comment-form-url{
padding-left: 13.33px;
}
textarea{
position: relative;
display: block;
float: left;
margin: 25px 0 0 0;
border: 0;
background: #fcfcfc;
border-bottom: 1px solid #e5e5e5;
display: block;
font-size: 14px;
line-height: 25px;
color: #aaa;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
outline: none;
width: 100%;
max-width: 100%;
padding: 13px 20px 11px 20px;
@include box-sizing(border-box);
@include transition (.2s);
&:focus{
color: #444;
border-bottom: 1px solid #999;
}
}
.form-submit{
position: relative;
display: inline-block;
float: right;
margin-top: 31px;
color: #999999;
@include transition (.2s);
&:hover{
color: #fff;
}
&:after{
content: '\f044';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
font-size: 14px;
color: inherit;
position: absolute;
display: inline-block;
left: 15px;
top: 1px;
pointer-events: none;
}
#submit{
position: relative;
display: inline-block;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0px;
font-size: 11px;
color: inherit;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
padding: 7px 15px 6px 38px;
margin: -6px 0 0 0;
border: none;
background: #f7f7f7;
@include transition (.2s);
&:hover{
color: white;
background-color: #1abc9c;
}
}
}
}
}
}
}
}
#portfolio-grid{
width: 100%;
margin-bottom: 50px;
.content-column{
margin-right: 0px;
margin-left: 0px;
margin-top: 25px;
}
article{
margin-top: 0px;
padding-bottom: 25px;
margin-bottom: 0px;
border-bottom: none;
width: 25%;
padding-left: 10px;
padding-right: 10px;
@include box-sizing(border-box);
.entry-inner{
position: relative;
display: block;
float: left;
text-align: center;
padding-bottom: 24px;
border-bottom: 1px solid #e6e6e6;
@include transition(.2s);
width: 100%;
&:hover{
opacity: 1 !important;
border-bottom: 3px solid #1abc9c;
padding-bottom: 21px;
}
}
}
&.no-content{
margin-top: 50px;
}
#pagination{
margin-top: 7px;
margin-bottom: 36px;
#page-number{
margin-left: 10px;
}
#page-links{
margin-right: 10px;
}
}
}
#team-grid{
width: 100%;
margin-bottom: 0px;
.content-column{
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
}
&.no-content{
margin-top: 75px;
}
article{
padding-bottom: 25px;
margin-bottom: 0px;
border-bottom: none;
width: 25%;
padding-left: 10px;
padding-right: 10px;
@include box-sizing(border-box);
.entry-inner{
position: relative;
display: block;
float: left;
padding-bottom: 18px;
border-bottom: none;
@include transition(.2s);
width: 100%;
}
}
}
#single-aside-wrapper,
#half-aside-wrapper{
width: 25%;
.content-column{
margin-top: 75px;
margin-bottom: 68px;
}
.aside-title-wrapper{
position: relative;
display: block;
margin-bottom: 16px;
&:after{
content: "";
width: 100%;
height: 1px;
background-color: #e6e6e6;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}
.aside-title{
position: relative;
display: inline-block;
padding-right: 20px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: -1px;
color: #404040;
font-size: 16px;
border-bottom: 1px solid #999;
z-index: 20;
}
}
.aside-entry-meta{
strong{
font-weight: bold;
color: #555555;
}
a{
color: inherit;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
button{
position: relative;
display: inline-block;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0px;
color: #999999;
font-size: 11px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
padding: 9px 15px 7px 36px;
margin: 18px 0 19px 0;
border: none;
background: #f7f7f7;
@include transition (.2s);
i{
color: inherit;
position: absolute;
top: 14px;
left: 15px;
font-size: 14px;
}
&:hover{
color: white;
background-color: #1abc9c;
}
}
}
}
#large-portfolio-type{
width: 75%;
.content-column{
margin-top: 75px;
article{
.entry-inner{
.entry-media-wrapper{
.entry-media{
margin-bottom: 75px;
}
}
}
}
}
&.left-aside{
.content-column{
margin-left: 30px;
}
}
&.right-aside{
.content-column{
margin-right: 30px;
}
}
}
#medium-portfolio-type{
width: 50%;
.content-column{
margin-top: 75px;
article{
.entry-inner{
.entry-media-wrapper{
.entry-media{
margin-bottom: 75px;
}
}
}
}
}
.content-column{
margin-left: 30px;
margin-right: 30px;
}
}
#home-template,
#full-width-template{
width: 100%;
.content-column{
margin-top: 75px;
margin-bottom: 43px;
}
}
#page-template{
width: 75%;
margin-bottom: 43px;
.content-column{
margin-right: 30px;
margin-top: 32px;
}
&.left-sidebar{
.content-column{
margin-left: 30px;
margin-right: 10px;
}
}
article{
margin-top: 43px;
width: 100%;
.entry-inner{
position: relative;
display: block;
float: left;
padding-left: 0px;
z-index: 50;
width: 100%;
@include box-sizing(border-box);
}
}
}
#contact-template{
width: 75%;
margin-bottom: 43px;
.content-column{
margin-right: 30px;
margin-top: 32px;
}
&.left-sidebar{
.content-column{
margin-left: 30px;
margin-right: 10px;
}
}
article{
margin-top: 43px;
width: 100%;
.entry-inner{
position: relative;
display: block;
float: left;
padding-left: 0px;
z-index: 50;
width: 100%;
@include box-sizing(border-box);
.entry-content-wrapper.nocontent{
margin-top: -6px;
#contact-template-form{
padding-top: 0;
}
}
#contact-template-form{
position: relative;
display: block;
padding-top: 12px;
.thanks-message{
margin-top: 13px;
color: #1abc9c;
}
.error-message{
margin-top: 13px;
color: #c0392b;
}
form{
position: relative;
display: block;
.form-element{
position: relative;
display: block;
float: left;
width: 50%;
@include box-sizing(border-box);
&.name{
padding-right: 10px;
margin-bottom: 0px;
}
&.email{
padding-left: 10px;
margin-bottom: 0px;
}
&.textarea{
width: 100%;
margin-bottom: 29px;
}
input{
position: relative;
display: block;
padding: 0;
margin: 0;
border: 0;
background: #fcfcfc;
border-bottom: 1px solid #e5e5e5;
display: block;
font-size: 14px;
line-height: 25px;
color: #aaa;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
outline: none;
width: 100%;
padding: 13px 20px 11px 20px;
@include box-sizing(border-box);
@include transition (.2s);
&:focus{
color: #444;
border-bottom: 1px solid #999;
}
}
textarea{
position: relative;
display: block;
float: left;
margin: 25px 0 0 0;
border: 0;
background: #fcfcfc;
border-bottom: 1px solid #e5e5e5;
display: block;
font-size: 14px;
line-height: 25px;
color: #aaa;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
outline: none;
width: 100%;
max-width: 100%;
padding: 13px 20px 11px 20px;
@include box-sizing(border-box);
@include transition (.2s);
&:focus{
color: #444;
border-bottom: 1px solid #999;
}
}
}
.form-submit{
position: relative;
display: block;
float: left;
width: 100%;
margin-bottom: 27px;
text-align: right;
@include box-sizing(border-box);
button{
position: relative;
display: inline-block;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0px;
color: #999999;
font-size: 11px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
padding: 9px 15px 7px 36px;
margin: -6px 0 0 0;
border: none;
background: #f7f7f7;
@include transition (.2s);
i{
color: inherit;
position: absolute;
top: 14px;
left: 15px;
font-size: 14px;
}
&:hover{
color: white;
background-color: #1abc9c;
}
}
}
}
}
}
}
}
#portfolio-template{
width: 100%;
.content-column{
margin-top: 75px;
margin-bottom: 18px;
}
}
#team-template{
width: 100%;
.content-column{
margin-top: 75px;
margin-bottom: 43px;
}
}
.carousel-wrapper{
width: 100%;
.content-column{
margin: 0 0 50px 0;
.carousel-title-wrapper{
position: relative;
display: block;
margin: 0 10px 25px 10px;
height: 25px;
@include box-sizing(border-box);
background-image: url('img/title-bg.png');
overflow: hidden;
&:after{
content:"";
position: absolute;
display: block;
background: #e5e5e5;
height: 13px;
width: 1px;
right: 0;
top: 6px;
z-index: 10;
}
.carousel-title{
text-transform: uppercase;
letter-spacing: -1px;
color: #4c4c4c;
font-size: 16px;
background: white;
position: relative;
display: inline-block;
padding-right: 34px;
&:after{
content:"";
position: absolute;
display: block;
border: 1px solid #e5e5e5;
height: 11px;
width: 11px;
right: 0;
top: 6px;
}
}
.carousel-controls{
position: absolute;
right: 0px;
top: 0;
display: block;
font-size: 12px;
color: #999999;
background: #fff;
z-index: 20;
&:after{
content:"";
position: absolute;
display: block;
background: #e5e5e5;
height: 13px;
width: 1px;
left: 0;
top: 6px;
}
.carousel-prev,
.carousel-next{
display: inline-block;
margin-top: 1px;
margin-left: 10px;
position: relative;
}
.carousel-prev{
margin-left: 20px;
}
a{
cursor: pointer;
color: inherit;
text-decoration: none;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
}
}
.carousel-items-wrapper{
@include backface-visibility(visible);
&:before{
content: "";
position: absolute;
display: block;
background: #fff;
top: 0;
left: 0;
height: 100%;
width: 10px;
z-index: 20;
}
&:after{
content: "";
position: absolute;
display: block;
background: #fff;
top: 0;
right: 0;
height: 100%;
width: 10px;
z-index: 20;
}
.carousel-items{
.carousel-item{
position: relative;
display: block;
float: left;
width: 25%;
max-width: 300px;
article{
padding-bottom: 25px;
margin-bottom: 0px;
border-bottom: none;
padding-left: 10px;
padding-right: 10px;
@include box-sizing(border-box);
.entry-inner{
position: relative;
display: block;
float: left;
padding-bottom: 17px;
border-bottom: 1px solid #e6e6e6;
@include transition(.2s);
width: 100%;
&:hover{
border-bottom: 3px solid #1abc9c;
padding-bottom: 14px;
}
}
&.portfolio-type .entry-inner{
text-align: center;
padding-bottom: 24px;
&:hover{
padding-bottom: 21px;
}
}
&.team-type .entry-inner{
padding-bottom: 18px;
border-bottom: none;
&:hover{
border-bottom: none;
padding-bottom: 18px;
}
}
}
}
}
}
}
&.post .content-column{
}
&.team-type .content-column{
margin-bottom: 0px;
}
}
}
.entry-content{
cite, q{
font-style: italic;
}
code, kbd, tt{
word-wrap: break-word;
font-family: Monaco, "Andale Mono", "Courier New", Courier, monospace;
}
abbr, acronym, var{
border-bottom: 1px dotted #777;
}
strong, b, big{
font-weight: bold;
color: #555;
}
em{
font-style: italic;
}
del{
color: #aaa;
}
sub{
vertical-align: text-top;
font-size: 10px;
line-height: 20px;
}
sup{
vertical-align: text-bottom;
font-size: 10px;
line-height: 20px;
}
ul{
margin-bottom: 25px;
list-style: circle;
list-style-position: inside;
li{
ul,
ol{
margin-left: 25px;
}
}
}
ol{
margin-bottom: 25px;
list-style: decimal;
list-style-position: inside;
li{
ul,
ol{
margin-left: 25px;
}
}
}
blockquote{
position: relative;
padding: 5px 20px;
font-style: italic;
border-left: 6px solid #1abc9c;
margin: -5px 0 20px 0;
p:last-child{
margin-bottom: 0px;
}
}
p{
margin-bottom: 25px;
}
a{
color: #1abc9c;
@include transition (.2s);
&:hover{
color: #404040;
}
}
h1, h2, h3, h4, h5, h6{
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 19px;
margin-bottom: 31px;
color: #404040;
}
h1{
font-size: 24px;
letter-spacing: -2px;
}
h2{
font-size: 22px;
letter-spacing: -2px;
}
h3{
font-size: 20px;
letter-spacing: -2px;
}
h4{
font-size: 18px;
}
h5{
font-size: 16px;
}
h6{
font-size: 14px;
}
address{
color: #666;
font-style: italic;
margin-bottom: 25px;
}
img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}
iframe{
max-width: 100%;
vertical-align: bottom;
}
pre{
border: solid 1px #ddd;
font-size: 12px;
color: #666;
font-family: Monaco, "Andale Mono", "Courier New", Courier, monospace;
padding: 24px 15px 24px 15px;
background-image: -webkit-linear-gradient(rgba(0, 0, 0, .05) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(0, 0, 0, .05) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(rgba(0, 0, 0, .05) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(0, 0, 0, .05) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(0, 0, 0, .05) 50%, transparent 50%, transparent);
-webkit-background-size: 100% 50px;
-moz-background-size: 100% 50px;
background-size: 100% 50px;
line-height: 25px;
margin-bottom: 25px;
}
table{
width: 100%;
text-align: left;
margin-top: -13px;
margin-bottom: 12px;
tbody{
tr{
th{
padding: 12px 25px;
background: #f8f8f8;
border: 1px solid #bfbfbf;
font-weight: bold;
}
td{
border: 1px solid #bfbfbf;
padding: 12px 25px;
}
&.even{
background: #fafafa;
}
}
}
}
dl{
dt{
font-weight: bold;
}
dd{
margin-bottom: 25px;
}
}
.alignright {
float: right;
display: block;
margin: 5px 0 10px 20px;
max-width: 100%;
}
.aligncenter {
margin-left: auto;
margin-right: auto;
display: block;
clear: both;
max-width: 100%;
margin-top: 5px;
margin-bottom: 25px;
}
.alignleft {
float: left;
display: block;
margin: 5px 20px 10px 0;
max-width: 100%;
}
.wp-caption{
max-width: 100%;
img{
vertical-align: bottom;
}
.wp-caption-text{
font-size: 12px;
font-style: italic;
padding: 25px 20px 24px 20px;
@include box-sizing(border-box);
margin-bottom: 0;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: rgba(0, 0, 0, 0.05);
}
}
.gallery{
margin-bottom: 0px !important;
.gallery-item{
margin-top: 0 !important;
a, a:hover{
padding: 0;
margin: 0;
background: none;
border: none;
}
}
.gallery-item img {
margin: 0 !important;
padding: 0 !important;
border: none !important;
@include transition(0.2s);
width: 100%;
height: auto;
}
.gallery-caption{
font-size: 12px;
font-style: italic;
padding: 25px 20px 24px 20px;
@include box-sizing(border-box);
margin-bottom: 0;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: rgba(0, 0, 0, 0.05);
}
&.gallery-columns-1 .gallery-item{width: 100% !important;}
&.gallery-columns-2 .gallery-item{width: 50% !important;}
&.gallery-columns-3 .gallery-item{width: 33.33% !important;}
&.gallery-columns-4 .gallery-item{width: 25% !important;}
&.gallery-columns-5 .gallery-item{width: 20% !important;}
&.gallery-columns-6 .gallery-item{width: 16.66% !important;}
&.gallery-columns-7 .gallery-item{width: 14.28% !important;}
&.gallery-columns-8 .gallery-item{width: 12.5% !important;}
&.gallery-columns-9 .gallery-item{width: 11.11% !important;}
}
.coffee-column{
&.coffee-column-one-one,
&.coffee-column-one-half,
&.coffee-column-one-third,
&.coffee-column-two-third,
&.coffee-column-three-fourth,
&.coffee-column-one-fourth{
position: relative;
display: block;
float: left;
margin-right: 4%;
}
&.coffee-column-one-one{ width: 100%; margin-right: 0; }
&.coffee-column-one-half { width: 48%; }
&.coffee-column-one-third { width: 30.66%; }
&.coffee-column-two-third { width: 65.33%; }
&.coffee-column-one-fourth { width: 22%; }
&.coffee-column-three-fourth { width: 74%; }
&.coffee-column-last{ margin-right: 0; }
}
.coffee-shortcode{
position: relative;
display: block;
margin-top: -7px;
width: 100%;
z-index: 20;
@include box-sizing(border-box);
&.coffee-shortcode-clearfix{
margin-bottom: 0px;
z-index: 0;
zoom: 1;
&:before,
&:after{
content: "";
display: table;
}
&:after{
clear: both;
}
}
&.coffee-shortcode-feature{
text-align: center;
margin-bottom: 25px;
@include backface-visibility(hidden);
.feature-icon{
position: relative;
margin: 0 auto;
line-height: 135px;
color: #999999;
width: 130px;
height: 130px;
font-size: 42px;
text-align: center;
background-color: #fafbfc;
border: 10px solid #f0f1f2;
@include transition (.2s);
@include border-radius(200px);
@include box-shadow(inset 0px 0px 14px 0px rgba(0, 0, 0, 0));
i{
position: relative;
display: inline-block;
}
&:hover{
color: #fff;
border-color: #f7f9fa;
@include box-shadow(inset 0px 0px 56px 0px rgba(0, 0, 0, 0.02));
@include simple-transform(1.2, false, false, -10px, false, false, false, false);
}
}
.feature-title{
font-size: 18px;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 26px;
margin-bottom: 6px;
color: #404040;
}
&.turquoise .feature-icon:hover{
background-color: #1abc9c;
}
&.emerald .feature-icon:hover{
background-color: #2ecc71;
}
&.peter-river .feature-icon:hover{
background-color: #3498db;
}
&.amethyst .feature-icon:hover{
background-color: #9b59b6;
}
&.wet-asphalt .feature-icon:hover{
background-color: #34495e;
}
&.green-sea .feature-icon:hover{
background-color: #16a085;
}
&.nephritis .feature-icon:hover{
background-color: #16a085;
}
&.belize-hole .feature-icon:hover{
background-color: #2980b9;
}
&.wisteria .feature-icon:hover{
background-color: #8e44ad;
}
&.midnight-blue .feature-icon:hover{
background-color: #2c3e50;
}
&.sun-flower .feature-icon:hover{
background-color: #f1c40f;
}
&.carrot .feature-icon:hover{
background-color: #e67e22;
}
&.alizarin .feature-icon:hover{
background-color: #e74c3c;
}
&.clouds .feature-icon:hover{
color: #999999;
background-color: #ecf0f1;
}
&.concrete .feature-icon:hover{
background-color: #95a5a6;
}
&.orange .feature-icon:hover{
background-color: #f39c12;
}
&.pumpkin .feature-icon:hover{
background-color: #d35400;
}
&.pomegranate .feature-icon:hover{
background-color: #c0392b;
}
&.silver .feature-icon:hover{
background-color: #bdc3c7;
}
&.asbestos .feature-icon:hover{
background-color: #7f8c8d;
}
}
&.coffee-shortcode-button{
position: relative;
display: inline-block;
width: auto;
cursor: pointer;
color: #fff;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
font-size: 11px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
padding: 9px 9px 7px 14px;
margin: -7px 1px 16px 0;
border: none;
@include transition (.2s);
i{
color: inherit;
font-size: 14px;
padding-right: 6px;
}
p{
display: inline-block;
margin-bottom: 0;
padding-right: 6px;
}
&.turquoise{
background-color: #1abc9c;
}
&.emerald{
background-color: #2ecc71;
}
&.peter-river{
background-color: #3498db;
}
&.amethyst{
background-color: #9b59b6;
}
&.wet-asphalt{
background-color: #34495e;
}
&.green-sea{
background-color: #16a085;
}
&.nephritis{
background-color: #27ae60;
}
&.belize-hole{
background-color: #2980b9;
}
&.wisteria{
background-color: #8e44ad;
}
&.midnight-blue{
background-color: #2c3e50;
}
&.sun-flower{
background-color: #f1c40f;
}
&.carrot{
background-color: #e67e22;
}
&.alizarin{
background-color: #e74c3c;
}
&.clouds{
color: #999999;
background-color: #ecf0f1;
}
&.concrete{
background-color: #95a5a6;
}
&.orange{
background-color: #f39c12;
}
&.pumpkin{
background-color: #d35400;
}
&.pomegranate{
background-color: #c0392b;
}
&.silver{
background-color: #bdc3c7;
}
&.asbestos{
background-color: #7f8c8d;
}
&:hover{
color: #fff;
background-color: #404040;
}
}
&.coffee-shortcode-bar{
position: relative;
display: inline-block;
width: auto;
color: #fff;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
font-size: 11px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
padding: 0;
width: 100%;
margin: -7px 0 16px 0;
border: none;
@include transition (.2s);
background-color: #f7f7f7;
.bar-inner{
position: relative;
display: block;
float: left;
padding: 9px 0 7px 15px;
@include box-sizing(border-box);
.bar-title{
}
.bar-percentage{
position: absolute;
display: block;
right: 15px;
top: 50%;
margin-top: -12px;
}
&.turquoise{
background-color: #1abc9c;
}
&.emerald{
background-color: #2ecc71;
}
&.peter-river{
background-color: #3498db;
}
&.amethyst{
background-color: #9b59b6;
}
&.wet-asphalt{
background-color: #34495e;
}
&.green-sea{
background-color: #16a085;
}
&.nephritis{
background-color: #16a085;
}
&.belize-hole{
background-color: #2980b9;
}
&.wisteria{
background-color: #8e44ad;
}
&.midnight-blue{
background-color: #2c3e50;
}
&.sun-flower{
background-color: #f1c40f;
}
&.carrot{
background-color: #e67e22;
}
&.alizarin{
background-color: #e74c3c;
}
&.clouds{
color: #999999;
background-color: #ecf0f1;
}
&.concrete{
background-color: #95a5a6;
}
&.orange{
background-color: #f39c12;
}
&.pumpkin{
background-color: #d35400;
}
&.pomegranate{
background-color: #c0392b;
}
&.silver{
background-color: #bdc3c7;
}
&.asbestos{
background-color: #7f8c8d;
}
}
}
&.coffee-shortcode-pricing{
position: relative;
display: block;
text-align: center;
margin-bottom: 32px;
.pricing-header{
text-transform: uppercase;
letter-spacing: -1px;
.pricing-header-title{
color: #fff;
padding: 13px 20px 12px 20px;
font-size: 18px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
&.turquoise{
background-color: #1abc9c;
}
&.emerald{
background-color: #2ecc71;
}
&.peter-river{
background-color: #3498db;
}
&.amethyst{
background-color: #9b59b6;
}
&.wet-asphalt{
background-color: #34495e;
}
&.green-sea{
background-color: #16a085;
}
&.nephritis{
background-color: #16a085;
}
&.belize-hole{
background-color: #2980b9;
}
&.wisteria{
background-color: #8e44ad;
}
&.midnight-blue{
background-color: #2c3e50;
}
&.sun-flower{
background-color: #f1c40f;
}
&.carrot{
background-color: #e67e22;
}
&.alizarin{
background-color: #e74c3c;
}
&.clouds{
color: #999999;
background-color: #ecf0f1;
}
&.concrete{
background-color: #95a5a6;
}
&.orange{
background-color: #f39c12;
}
&.pumpkin{
background-color: #d35400;
}
&.pomegranate{
background-color: #c0392b;
}
&.silver{
background-color: #bdc3c7;
}
&.asbestos{
background-color: #7f8c8d;
}
}
.pricing-header-price{
position: relative;
display: block;
background-color: #fefefe;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
padding: 26px 20px 17px 20px;
.price{
position: relative;
display: block;
color: #4c4c4c;
letter-spacing: -3px;
font-size: 36px;
}
.price_per{
margin-top: 7px;
position: relative;
display: block;
color: #737373;
}
}
}
.pricing-list{
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
margin: 0;
list-style: none;
.pricing-tab{
padding: 13px 20px 12px 20px;
background-color: #fefefe;
p{
margin-bottom: 0;
}
.coffee-shortcode.coffee-shortcode-button{
margin: 17px 20px 16px 20px;
}
&:nth-child(odd){
background-color: #f7f7f7;
}
}
}
&.featured{
@include box-shadow(0px 0px 16px 0px rgba(0, 0, 0, 0.08));
.pricing-header{
.pricing-header-title{
font-size: 24px;
letter-spacing: -2px;
padding: 38px 20px 37px 20px;
}
}
.pricing-list{
.pricing-tab{
.coffee-shortcode.coffee-shortcode-button{
margin: 42px 20px 41px 20px;
}
}
}
}
&.no-featured{
margin-top: 43px;
}
}
&.coffee-shortcode-heading{
margin-top: 0;
position: relative;
display: block;
width: 100%;
@include box-sizing(border-box);
background-position: 0px 19px;
background-repeat: repeat-x;
background-image: url('img/title-bg.png');
h1, h2, h3 ,h4 ,h5, h6{
position: relative;
display: inline-block;
padding-right: 34px;
background-color: #fff;
&:after{
content:"";
position: absolute;
display: block;
border: 1px solid #e5e5e5;
height: 11px;
width: 11px;
right: 0;
top: 25px;
}
}
&:after{
content:"";
position: absolute;
display: block;
background: #e5e5e5;
height: 13px;
width: 1px;
right: 0;
top: 25px;
}
}
&.coffee-shortcode-list{
margin-top: 0;
list-style: none;
li{
position: relative;
padding-left: 20px;
i{
font-size: 12px;
position: absolute;
display: block;
top: 6px;
left: 0;
pointer-events: none;
}
p{
margin-bottom: 0;
}
}
&.turquoise i{
color: #1abc9c;
}
&.emerald i{
color: #2ecc71;
}
&.peter-river i{
color: #3498db;
}
&.amethyst i{
color: #9b59b6;
}
&.wet-asphalt i{
color: #34495e;
}
&.green-sea i{
color: #16a085;
}
&.nephritis i{
color: #16a085;
}
&.belize-hole i{
color: #2980b9;
}
&.wisteria i{
color: #8e44ad;
}
&.midnight-blue i{
color: #2c3e50;
}
&.sun-flower i{
color: #f1c40f;
}
&.carrot i{
color: #e67e22;
}
&.alizarin i{
color: #e74c3c;
}
&.clouds i{
color: #ecf0f1;
}
&.concrete i{
color: #95a5a6;
}
&.orange i{
color: #f39c12;
}
&.pumpkin i{
color: #d35400;
}
&.pomegranate i{
color: #c0392b;
}
&.silver i{
color: #bdc3c7;
}
&.asbestos i{
color: #7f8c8d;
}
}
&.coffee-shortcode-accordion{
margin-top: -15px;
padding-bottom: 18px;
.coffee-accordion-title{
position: relative;
display: block;
width: 100%;
background-color: #fafafa;
border: 1px solid #e0e0e0;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
font-size: 11px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
padding: 8px 15px 6px 35px;
margin: 8px 0px 0px 0px;
outline: none;
@include box-sizing(border-box);
a{
color: #737373;
@include transition (.2s);
}
i.icon-plus-sign,
i.icon-minus-sign{
position: absolute;
display: block;
color: #999999;
left: 15px;
top: 15px;
@include transition (.2s);
}
i.icon-plus-sign{
opacity: 1;
}
i.icon-minus-sign{
opacity: 0;
}
&.ui-state-active{
a,
i.icon-plus-sign,
i.icon-minus-sign{
color: #1abc9c;
}
i.icon-plus-sign{
opacity: 0;
}
i.icon-minus-sign{
opacity: 1;
}
}
&:hover{
a,
i.icon-plus-sign,
i.icon-minus-sign{
color: #404040;
}
}
}
.ui-accordion-content{
padding: 24px 15px 0px 15px;
display: none;
background-color: #fefefe;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
div:nth-child(2){
display: block;
}
}
&.coffee-shortcode-toggle{
margin-top: -15px;
padding-bottom: 18px;
.coffee-toggle-title{
position: relative;
display: block;
width: 100%;
background-color: #fafafa;
border: 1px solid #e0e0e0;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
font-size: 11px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
padding: 8px 15px 6px 35px;
margin: 8px 0px 0px 0px;
outline: none;
@include box-sizing(border-box);
a{
color: #737373;
@include transition (.2s);
}
i.icon-plus-sign,
i.icon-minus-sign{
position: absolute;
display: block;
color: #999999;
left: 15px;
top: 15px;
@include transition (.2s);
}
i.icon-plus-sign{
opacity: 1;
}
i.icon-minus-sign{
opacity: 0;
}
&.ui-state-active{
a,
i.icon-plus-sign,
i.icon-minus-sign{
color: #1abc9c;
}
i.icon-plus-sign{
opacity: 0;
}
i.icon-minus-sign{
opacity: 1;
}
}
&:hover{
a,
i.icon-plus-sign,
i.icon-minus-sign{
color: #404040;
}
}
}
.ui-accordion-content{
padding: 24px 15px 0px 15px;
background-color: #fefefe;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
}
&.coffee-shortcode-tabs{
margin-top: -15px;
padding-bottom: 16px;
.tabs-nav{
position: relative;
display: block;
margin-bottom: -1px;
li{
position: relative;
display: inline-block;
background-color: #fafafa;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
font-size: 11px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
margin: 8px 0px 0px 0px;
outline: none;
@include box-sizing(border-box);
a{
position: relative;
display: block;
outline: none;
color: #737373;
padding: 8px 15px 6px 15px;
@include transition (.2s);
&:hover{
color: #404040;
}
}
&.ui-state-active{
border-bottom: none;
a{
padding-bottom: 7px;
color: #1abc9c;
background-color: #fefefe;
}
}
&:last-child{
border-right: 1px solid #e0e0e0;
}
}
}
.tabs-content{
background-color: #fefefe;
border: 1px solid #e0e0e0;
.tab-content{
display: none;
padding: 24px 15px 0px 15px;
&:first-child{
display: block;
}
}
}
}
}
}
.widget{
position: relative;
display: block;
margin-bottom: 43px;
.widget-title-wrapper{
position: relative;
display: block;
margin-bottom: 16px;
&:after{
content: "";
width: 100%;
height: 1px;
background-color: #e6e6e6;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}
.widget-title{
position: relative;
display: inline-block;
padding-right: 20px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: -1px;
color: #404040;
font-size: 16px;
border-bottom: 1px solid #999;
z-index: 20;
}
}
&.sidebar-widget{
a{
color: #1abc9c;
@include transition (.2s);
&:hover{
color: #404040;
}
}
}
&.footer-widget{
color: #aaaaaa;
.widget-title-wrapper{
&:after{
background-color: #404040;
}
.widget-title{
color: #eeeeee;
border-bottom: 1px solid #666;
}
}
&.widget_text{
strong, b{
font-weight: bold;
color: #ccc;
}
a{
color: #ccc;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
}
&.widget_recent_entries,
&.coffee_tweets_widget{
ul{
li{
border-bottom: 1px solid #262626;
position: relative;
&:after{
content: '';
display: block;
position: absolute;
background-color: #404040;
width: 100%;
height: 1px;
bottom: -2px;
}
&:last-child:after{
display: none;
}
a{
color: #ccc;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
span{
color: #777;
}
}
}
}
&.widget_tag_cloud{
.tagcloud{
a{
color: #aaa;
border: 1px solid #474747;
&:hover{
color: #fff;
border-color: #1abc9c;
background-color: transparent;
}
}
}
}
&.widget_search{
form{
fieldset{
input#s{
background: #404040;
border-bottom: 1px solid #555;
color: #666;
&:focus{
color: #fff;
border-bottom: 1px solid #999;
}
}
}
}
}
&.widget_categories,
&.widget_recent_comments,
&.widget_meta,
&.widget_archive,
&.widget_pages,
&.widget_rss{
.widget-title-wrapper{
.widget-title{
a{
color: inherit;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
}
}
ul{
li{
border-bottom: 1px solid #262626;
.rss-date{
color: #777;
}
&:after{
content: '';
display: block;
position: absolute;
background-color: #404040;
width: 100%;
height: 1px;
bottom: -2px;
}
&:last-child:after{
display: none;
}
a{
color: #ccc;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
}
}
}
&.widget_calendar{
#calendar_wrap{
#wp-calendar{
width: 100%;
caption{
background-color: #404040;
border-top: 1px solid #353535;
}
thead{
tr{
th{
background-color: #313131;
border-top: 1px solid #404040;
}
}
}
tfoot{
background: #404040;
a{
color: #ccc;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
tr{
td{
border-bottom: 1px solid #353535;
}
}
}
tbody{
tr{
background-color: #515151;
td{
border-bottom: 1px solid #333;
}
}
tr:nth-child(2n+1){
background-color: #515151;
}
a{
color: #ccc;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
}
}
}
}
&.coffee_portfolio_widget{
.coffee_portfolio_widget_grid{
ul{
li{
a{
border: 3px solid #474747;
padding: 0px;
.entry-media-overlay{
left: 0;
right: 0;
top: 0;
bottom: 0;
}
&:hover{
border: 3px solid #1abc9c;
.entry-media-overlay{
background-color: rgba(0, 0, 0, .5);
.entry-media-permalink{
opacity: 1;
@include scale (1);
}
}
}
}
}
}
}
}
}
&.widget_text{
strong, b{
font-weight: bold;
color: #555;
}
p{
margin-bottom: 25px;
}
p:last-child{
margin-bottom: 0;
}
}
&.widget_recent_entries,
&.coffee_tweets_widget{
margin-bottom: 43px;
ul{
li{
border-bottom: 1px solid #e6e6e6;
margin-bottom: 13px;
padding-bottom: 11px;
span{
font-size: 12px;
color: #aaaaaa;
display: block;
margin-top: 1px;
}
&:last-child{
border-bottom: none;
padding-bottom: 0;
margin: 0;
}
}
}
}
&.widget_tag_cloud{
.tagcloud{
a{
position: relative;
display: inline-block;
text-decoration: none;
color: #666;
border: 1px solid #bfbfbf;
padding: 2px 9px 1px 9px;
margin: 7px 10px 3px 0;
background-color: rgba(26, 188, 156, 0);
@include transition (.2s);
font-size: 14px !important;
&:hover{
color: #fff;
border-color: #1abc9c;
background-color: rgba(26, 188, 156, 1);
}
&:last-child{
margin-right: 0;
}
}
}
}
&.widget_search{
form{
position: relative;
display: block;
fieldset{
position: relative;
display: block;
padding-right: 40px;
input#s{
position: relative;
display: block;
padding: 0;
margin: 0;
border: 0;
background: #fcfcfc;
border-bottom: 1px solid #e5e5e5;
display: block;
font-size: 14px;
line-height: 25px;
color: #aaa;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
outline: none;
width: 100%;
padding: 13px 20px 11px 20px;
@include transition (.2s);
&:focus{
color: #444;
border-bottom: 1px solid #999;
}
}
}
}
}
&.widget_categories,
&.widget_recent_comments,
&.widget_meta,
&.widget_archive,
&.widget_pages,
&.widget_rss{
ul{
li{
position: relative;
display: block;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 13px;
padding-bottom: 11px;
&:last-child{
border-bottom: none;
padding-bottom: 0;
margin: 0;
}
}
}
}
&.widget_categories,
&.widget_meta,
&.widget_archive,
&.widget_pages{
a{
position: relative;
display: inline-block;
@include transition (.2s);
color: #404040;
overflow: hidden;
&:after{
content: '\f105';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
color: #1abc9c;
position: absolute;
display: block;
left: 0px;
top: 0;
opacity: 0;
@include transition (.2s);
}
&:hover{
color: #1abc9c;
padding-left: 10px;
&:after{
opacity: 1;
}
}
}
}
&.widget_rss{
li{
.rsswidget{
}
.rss-date{
font-size: 12px;
color: #aaaaaa;
display: block;
margin-top: 1px;
}
.rssSummary{
display: block;
margin-top: -1px;
}
cite{}
}
}
&.widget_calendar{
#calendar_wrap{
position: relative;
display: block;
#wp-calendar{
width: 100%;
caption{
text-align: center;
font-weight: bold;
background-color: #ebeff2;
border-top: 1px solid #e5e5e5;
padding: 12px 20px;
}
thead{
text-align: center;
line-height: 24px;
tr{
th{
text-align: center;
font-weight: bold;
background-color: #ebeff2;
border-top: 1px solid #e5e5e5;
}
}
}
tfoot{
background: white;
line-height: 24px;
tr{
td{
border-bottom: 1px solid #e5e5e5;
}
td#prev{
text-align: center;
}
td#next{
text-align: center;
}
}
}
tbody{
text-align: center;
line-height: 24px;
tr{
background-color: #ebeff2;
td{
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
}
tr:nth-child(2n+1){
background-color: #f7f7f7;
}
}
}
}
}
&.coffee_portfolio_widget{
margin-bottom: 41px;
.widget-title-wrapper{
margin-bottom: 22px;
}
.coffee_portfolio_widget_grid{
position: relative;
display: block;
width: 100%;
margin-left: -6px;
ul{
position: relative;
display: block;
margin-right: -12px;
li{
position: relative;
display: block;
float: left;
padding: 0 6px 12px 6px;
@include box-sizing(border-box);
a{
position: relative;
display: inline-block;
border: 1px solid #d9d9d9;
padding: 2px;
width: 100%;
@include transition(.2s);
@include box-sizing(border-box);
img{
width: 100%;
height: auto;
vertical-align: bottom;
}
.entry-media-overlay{
position: absolute;
display: block;
left: 2px;
right: 2px;
bottom: 2px;
top: 2px;
background-color: rgba(0, 0, 0, 0);
z-index: 20;
@include transition (.2s);
.entry-media-permalink{
position: absolute;
display: block;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
top: 50%;
left: 50%;
opacity: 0;
@include transition (.2s);
@include scale (.6);
i{
position: absolute;
display: block;
margin-left: -9px;
margin-top: -9px;
top: 50%;
left: 50%;
font-size: 19px;
color: #fff;
}
}
}
&:hover{
border: 1px solid #1abc9c;
.entry-media-overlay{
background-color: rgba(0, 0, 0, .5);
.entry-media-permalink{
opacity: 1;
@include scale (1);
}
}
}
}
}
}
}
}
&.coffee_flickr_widget{
margin-bottom: 39px;
.widget-title-wrapper{
margin-bottom: 22px;
}
.flickr{
position: relative;
display: block;
width: 100%;
margin-left: -6px;
.flickr_inner{
position: relative;
display: block;
margin-right: -12px;
.flickr_badge_image{
position: relative;
display: block;
float: left;
padding: 0 6px 12px 6px;
@include box-sizing(border-box);
a{
position: relative;
display: block;
width: 100%;
background: #000;
@include box-sizing(border-box);
img{
width: 100%;
height: auto;
max-width: 61px;
vertical-align: bottom;
@include transition (.2s);
}
&:hover img{
opacity: .5;
}
}
}
}
}
}
&:last-child{
margin-bottom: 66px
}
}
#call-to-action-wrapper{
background-image: url('img/call-bg.jpg');
@include backface-visibility(hidden);
#call-to-action{
text-transform: uppercase;
letter-spacing: -2px;
color: #4a4a4a;
font-size: 24px;
line-height: 50px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
padding: 63px 0px 62px 0;
background-position: 50% 50%;
background-repeat: repeat;
text-align: center;
p{
position: relative;
display: block;
padding: 0 10px;
}
a{
font-size: 14px;
line-height: 14px;
position: relative;
display: inline-block;
padding: 18px 20px;
margin: 0px 0px 0px 25px;
border: none;
background: #1abc9c;
@include border-radius(3px);
@include transition (.2s);
@include box-sizing(border-box);
text-transform: uppercase;
letter-spacing: -1px;
color: #fff;
font-size: 14px;
line-height: 14px;
vertical-align: bottom;
&:hover{
background: #34495e;
}
}
}
}
#twitterfeed-wrapper{
background: #1abc9c;
@include transition(.2s);
#twitterfeed{
color: #fff;
padding: 13px 10px 12px 10px;
@include transition(.2s);
i{
font-size: 16px;
position: absolute;
display: block;
left: 9px;
top: 50%;
margin-top: -8px;
}
ul{
display: block;
position: relative;
padding-left: 23px;
min-height: 25px;
width: 100%;
@include transition(.2s);
@include box-sizing(border-box);
li{
display: none;
&:first-child{
display: list-item;
}
a{
color: inherit;
text-decoration: underline;
}
}
}
}
}
#footer-wrapper{
background-image: url('img/dark-bg.png');
border-bottom: 1px solid #404040;
@include backface-visibility(hidden);
#footer{
.footer-content-column-wrapper{
position: relative;
display: block;
float: left;
width: 25%;
.footer-content-column{
position: relative;
display: block;
margin: 75px 10px 0 10px;
}
}
.footer-clearfix{
display: none;
}
}
}
#bottom-footer-wrapper{
background-image: url('img/bottom-bg.jpg');
@include backface-visibility(hidden);
border-top: 1px solid #1a1a1a;
color: #777777;
font-size: 12px;
padding: 26px 0 23px 0;
#bottom-footer{
.bottom-footer-content-column-wrapper{
position: relative;
display: block;
float: left;
width: 50%;
.bottom-footer-content-column{
position: relative;
display: block;
margin: 0 10px;
.copyrights{
a{
font-weight: bold;
color: #aaaaaa;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
}
}
.footer-nav{
ul{
li{
position: relative;
display: inline-block;
.sub-menu{
position: relative;
display: inline-block;
}
a{
color: #777777;
@include transition (.2s);
&:hover{
color: #1abc9c;
}
&:after{
content: ' /';
color: #777777;
font-weight: normal;
}
}
&.current-menu-item,
&.current_page_item{
> a{
color: #aaaaaa;
font-weight: bold;
}
}
&:last-child a:after{
display: none;
}
}
}
}
}
&:first-child{
text-align: left;
}
&:last-child{
float: right;
text-align: right;
}
}
}
}
.body-font{
font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}
.heading-font{
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
@media only screen and (max-width: 1200px) {
#page-wrapper{
#header-wrapper{
#header{
max-width: 960px;
}
}
#parallax-wrapper{
#parallax-inner{
max-width: 960px;
}
}
#content-wrapper{
#content{
max-width: 960px;
}
#call-to-action-wrapper{
#call-to-action{
max-width: 960px;
}
}
#twitterfeed-wrapper{
#twitterfeed{
max-width: 940px;
}
}
#footer-wrapper{
#footer{
max-width: 960px;
}
}
#bottom-footer-wrapper{
#bottom-footer{
max-width: 960px;
}
}
}
}
.widget{
&.coffee_portfolio_widget{
.coffee_portfolio_widget_grid{
margin-left: -9px;
ul{
margin-right: -18px;
li{
padding: 0 9px 18px 9px;
}
}
}
}
&.coffee_flickr_widget{
.flickr{
margin-left: -9px;
.flickr_inner{
margin-right: -18px;
.flickr_badge_image{
padding: 0 9px 18px 9px;
}
}
}
}
}
}
@media only screen and (max-width: 960px) {
#header-wrapper{
height: 75px;
#header{
#header-logo-wrapper{
margin-top: -18.5px;
width: 50%;
}
#header-navigation-wrapper{
width: 100%;
#header-navigation-mobile{
position: relative;
display: block;
text-align: right;
padding: 15px 0px;
i{
position: relative;
cursor: pointer;
display: inline-block;
padding: 11px 10px;
font-size: 22px;
}
}
#header-navigation{
position: absolute;
display: none;
background-image: url('img/dark-bg.png');
z-index: 50;
width: 100%;
@include box-shadow(0px 0px 14px 0px rgba(0, 0, 0, 0.14));
ul{
position: relative;
display: block;
text-align: right;
width: 100%;
text-align: center;
padding: 0 50px 25px 50px;
@include box-sizing(border-box);
li{
position: relative;
display: block;
width: 100%;
margin: inherit !important;
color: #eee;
padding: 25px 0 0 0 !important;
&:after{
content: "";
position: absolute;
display: block;
left: 0;
bottom: -13px;
width: 100%;
height: 1px;
background-color: #404040;
}
&:last-child:after{
display: none;
}
.sub-menu{
position: relative;
display: block;
width: 100%;
left: 0;
margin-left: 0;
background: none;
padding: 0;
font-size: 14px;
letter-spacing: -1.5px;
@include box-shadow(0px 0px 0px 0px rgba(0, 0, 0, 0));
&:after{
display: none;
}
li{
margin: inherit !important;
font-size: 14px;
letter-spacing: -1.5px;
padding: 25px 0 0 0 !important;
@include box-sizing(border-box);
&:after{
content: "";
position: absolute;
display: block;
left: 0;
top: 13px;
width: 100%;
height: 1px;
background-color: #404040;
}
&:last-child{
margin: inherit !important;
padding: 25px 0 0 0 !important;
&:after{
display: block;
}
}
}
}
}
}
}
}
}
}
#page-wrapper{
#header-wrapper{
position: relative;
#header{
max-width: 768px;
}
}
#parallax-wrapper{
position: relative;
margin-top: 0 !important;
#parallax-inner{
max-width: 768px;
}
}
#content-wrapper{
margin-top: 0!important;
#content{
max-width: 768px;
}
#call-to-action-wrapper{
#call-to-action{
max-width: 768px;
}
}
#twitterfeed-wrapper{
#twitterfeed{
max-width: 748px;
}
}
#footer-wrapper{
#footer{
max-width: 768px;
}
}
#bottom-footer-wrapper{
#bottom-footer{
max-width: 768px;
}
}
}
}
#content{
#portfolio-grid,
#team-grid,
#grid-blog-type{
article{
width: 33.33%;
}
}
#large-blog-type{
width: 75%;
margin-bottom: 43px;
.content-column{
margin-right: 30px;
margin-top: 32px;
}
&.left-sidebar{
.content-column{
margin-left: 30px;
margin-right: 10px;
}
}
article{
.entry-aside{
display: none;
}
.entry-inner{
padding-left: 0px;
}
}
}
#medium-blog-type{
article{
padding-bottom: 41px;
min-height: 208px;
.entry-aside{
width: 178px;
}
.entry-inner{
padding-left: 198px;
}
}
}
#large-blog-type.single-post,
#medium-blog-type.single-post{
.content-column{
.entry-comments-wrapper{
padding-left: 0px;
.entry-comments{
ol{
.children{
margin-left: 20px;
}
}
}
}
.respond-wrapper{
padding-left: 0px;
}
}
}
#half-aside-wrapper{
width: 100%;
.content-column{
margin-top: 75px;
margin-bottom: 42px;
}
}
#single-aside-wrapper{
width: 100%;
.content-column{
margin-top: 75px;
margin-bottom: 64px;
}
}
#large-portfolio-type{
width: 100%;
.content-column{
margin-top: 0px;
article{
.entry-inner{
.entry-media-wrapper{
.entry-media{
margin-bottom: 0px;
}
}
}
}
}
&.left-aside{
.content-column{
margin-left: 10px;
margin-bottom: 75px;
}
}
&.right-aside{
.content-column{
margin-right: 10px;
margin-top: 75px;
}
}
}
#medium-portfolio-type{
width: 100%;
.content-column{
margin-top: 0px;
margin-left: 10px;
margin-right: 10px;
article{
.entry-inner{
.entry-media-wrapper{
.entry-media{
margin-bottom: 0px;
}
}
}
}
}
}
.carousel-wrapper{
.content-column{
.carousel-items-wrapper{
.carousel-items{
.carousel-item{
width: 33.33%;
}
}
}
}
}
}
.widget{
&.coffee_portfolio_widget{
.coffee_portfolio_widget_grid{
margin-left: -5px;
ul{
margin-right: -10px;
li{
padding: 0 5px 10px 5px;
a{
max-width: 50px;
}
}
}
}
}
&.coffee_flickr_widget{
.flickr{
margin-left: -5px;
.flickr_inner{
margin-right: -10px;
.flickr_badge_image{
padding: 0 5px 10px 5px;
a{
img{
max-width: 50px;
}
}
}
}
}
}
}
#call-to-action-wrapper{
#call-to-action{
p{
span{
display: block;
}
a{
margin-left: 0;
}
}
}
}
}
@media only screen and (max-width: 768px) {
#parallax-wrapper{
#parallax-inner{
#parallax-title-wrapper{
#parallax-title{
font-size: 36px;
}
}
}
}
#page-wrapper{
#header-wrapper{
#header{
max-width: 480px;
}
}
#parallax-wrapper{
#parallax-inner{
max-width: 480px;
}
}
#content-wrapper{
#content{
max-width: 480px;
}
#call-to-action-wrapper{
#call-to-action{
max-width: 480px;
}
}
#twitterfeed-wrapper{
#twitterfeed{
max-width: 460px;
}
}
#footer-wrapper{
#footer{
max-width: 480px;
}
}
#bottom-footer-wrapper{
#bottom-footer{
max-width: 480px;
}
}
}
}
#content{
#portfolio-grid,
#team-grid,
#grid-blog-type{
article{
width: 50%;
}
}
#large-blog-type{
width: 100%;
margin-bottom: 40px;
.content-column{
margin-right: 10px;
}
&.left-sidebar{
.content-column{
margin-left: 10px;
margin-right: 10px;
}
}
}
#medium-blog-type{
width: 100%;
margin-bottom: 40px;
.content-column{
margin-right: 10px;
}
&.left-sidebar{
.content-column{
margin-left: 10px;
margin-right: 10px;
}
}
}
#mini-blog-type{
width: 100%;
margin-bottom: 47px;
.content-column{
margin-right: 10px;
}
&.left-sidebar{
.content-column{
margin-left: 10px;
margin-right: 10px;
}
}
article{
margin-top: 25px;
padding-bottom: 24px;
margin-bottom: 0px;
border-bottom: 1px solid #e6e6e6;
width: 100%;
.entry-aside{
position: absolute;
display: block;
left: 0px;
top: 0;
width: 50px;
height: 100%;
z-index: 60;
.entry-media-wrapper{
.entry-media{
&:hover .entry-media-arrow-right{
right: -10px;
}
}
}
}
.entry-inner{
position: relative;
display: block;
float: left;
padding-left: 70px;
z-index: 50;
width: 100%;
@include box-sizing(border-box);
}
&.nothumbnail{
.entry-inner{
padding-left: 0;
}
}
}
#pagination{
margin-top: 32px;
margin-bottom: 11px;
}
}
#large-blog-type.single-post,
#medium-blog-type.single-post{
.content-column{
.entry-comments-wrapper{
.entry-comments{
ol{
.children{
margin-left: 10px;
}
}
}
}
}
}
#sidebar-wrapper{
width: 100%;
.content-column{
margin-top: 0px;
}
}
#page-template{
width: 100%;
margin-bottom: 43px;
.content-column{
margin-right: 10px;
margin-top: 32px;
}
&.left-sidebar{
.content-column{
margin-left: 10px;
margin-right: 10px;
}
}
}
#contact-template{
width: 100%;
margin-bottom: 43px;
.content-column{
margin-right: 10px;
margin-top: 32px;
}
&.left-sidebar{
.content-column{
margin-left: 10px;
margin-right: 10px;
}
}
}
.carousel-wrapper{
.content-column{
.carousel-items-wrapper{
.carousel-items{
.carousel-item{
width: 50%;
}
}
}
}
}
}
.entry-content{
.coffee-column{
&.coffee-column-one-one,
&.coffee-column-one-half,
&.coffee-column-one-third,
&.coffee-column-two-third,
&.coffee-column-three-fourth,
&.coffee-column-one-fourth{
margin-right: 0;
width: 100%;
}
}
.coffee-shortcode{
&.coffee-shortcode-tabs{
margin-top: -15px;
padding-bottom: 16px;
.tabs-nav{
position: relative;
display: block;
margin-bottom: -1px;
li{
position: relative;
display: inline-block;
width: 100%;
background-color: #fafafa;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
font-size: 11px;
line-height: 25px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
margin: -1px 0px 0px 0px;
outline: none;
@include box-sizing(border-box);
a{
position: relative;
display: block;
outline: none;
color: #737373;
padding: 8px 15px 6px 15px;
@include transition (.2s);
&:hover{
color: #404040;
}
}
&.ui-state-active{
border-bottom: 1px solid #e0e0e0;
a{
padding-bottom: 6px;
color: #1abc9c;
background-color: #fefefe;
}
}
&:first-child{
margin-top: 8px;
}
&:last-child{
border-right: 1px solid #e0e0e0;
}
}
}
.tabs-content{
background-color: #fefefe;
border: 1px solid #e0e0e0;
.tab-content{
display: none;
padding: 24px 15px 0px 15px;
&:first-child{
display: block;
}
}
}
}
&.coffee-shortcode-pricing{
&.featured{
}
&.no-featured{
margin-top: 0;
}
}
}
}
.widget{
&.coffee_portfolio_widget{
.coffee_portfolio_widget_grid{
margin-left: -6px;
ul{
margin-right: -12px;
li{
padding: 0 6px 12px 6px;
a{
max-width: none;
}
}
}
}
}
&.coffee_flickr_widget{
.flickr{
margin-left: -6px;
.flickr_inner{
margin-right: -12px;
.flickr_badge_image{
padding: 0 6px 12px 6px;
a{
img{
max-width: 61px;
}
}
}
}
}
}
}
#footer-wrapper{
#footer{
.footer-content-column-wrapper{
width: 50%;
.footer-content-column{
position: relative;
display: block;
margin: 75px 10px 0 10px;
}
&:nth-child(n+3) .footer-content-column{
margin-top: -25px;
}
}
.footer-clearfix{
display: block;
}
}
}
#bottom-footer-wrapper{
#bottom-footer{
.bottom-footer-content-column-wrapper{
width: 100%;
.bottom-footer-content-column{
margin: 0 10px;
}
&:first-child,
&:last-child{
text-align: center;
}
}
}
}
}
@media only screen and (max-width: 480px) {
#parallax-wrapper{
#parallax-inner{
#parallax-aside-wrapper{
display: none;
}
}
}
#page-wrapper{
#header-wrapper{
#header{
max-width: 300px;
}
}
#parallax-wrapper{
#parallax-inner{
max-width: 300px;
}
}
#content-wrapper{
#content{
max-width: 300px;
}
#call-to-action-wrapper{
#call-to-action{
max-width: 300px;
}
}
#twitterfeed-wrapper{
#twitterfeed{
max-width: 280px;
}
}
#footer-wrapper{
#footer{
max-width: 300px;
}
}
#bottom-footer-wrapper{
#bottom-footer{
max-width: 300px;
}
}
}
}
#content{
#portfolio-grid,
#team-grid,
#grid-blog-type{
article{
width: 100%;
.entry-inner{
opacity: 1 !important;
}
}
}
#medium-blog-type{
article{
padding-bottom: 41px;
min-height: none;
.entry-media-wrapper{
.entry-media{
.entry-media-arrow-right{
right: auto;
top: auto;
bottom: -2px;
left: 50%;
margin-left: -10px;
width: 0px;
height: 0px;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
@include backface-visibility(hidden);
}
}
}
.entry-aside{
position: relative;
width: 100%;
}
.entry-inner{
padding-left: 0px;
}
}
}
.carousel-wrapper{
.content-column{
.carousel-items-wrapper{
.carousel-items{
.carousel-item{
width: 100%;
}
}
}
}
}
}
.entry-content{
.coffee-column{
&.coffee-column-one-one,
&.coffee-column-one-half,
&.coffee-column-one-third,
&.coffee-column-two-third,
&.coffee-column-three-fourth,
&.coffee-column-one-fourth{
position: relative;
display: block;
float: left;
margin-right: 0;
width: 100%;
}
}
.coffee-shortcode{
&.coffee-shortcode-tabs{
margin-top: -15px;
padding-bottom: 16px;
.tabs-nav{
position: relative;
display: block;
margin-bottom: -1px;
li{
width: 100%;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
margin: -1px 0px 0px 0px;
&.ui-state-active{
border-bottom: 1px solid #e0e0e0;
}
&:first-child{
margin-top: 8px;
}
&:last-child{
border-right: 1px solid #e0e0e0;
}
}
}
}
&.coffee-shortcode-pricing{
&.featured{
}
&.no-featured{
margin-top: 0;
}
}
}
}
#call-to-action-wrapper{
#call-to-action{
p{
a{
width: 100%;
margin-left: 0;
}
}
}
}
#footer-wrapper{
#footer{
.footer-content-column-wrapper{
width: 100%;
&:nth-child(n+2) .footer-content-column{
margin-top: -25px;
}
}
}
}
}
ACC SHELL 2018