* {
box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
display: block;
}
body,
button,
input,
select,
textarea {
color: #272B2F;
font-family: Lato, sans-serif;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.025em;
}
body {
margin: 0;
background-color: #fff;
word-wrap: break-word;
}
a {
color: #272B2F;
text-decoration: none;
}
blockquote {
position: relative;
margin: 0 0 20px 0;
padding-left: 20px;
border-left: 1px solid #272B2F;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 20px 0;
font-weight: 400;
line-height: 20px;
text-transform: uppercase;
}
h1 {
font-size: 19px;
line-height: 23px;
letter-spacing: 9px;
}
h2 {
font-size: 17px;
letter-spacing: 4px;
}
h3 {
font-size: 15px;
letter-spacing: 4px;
}
h4 {
font-size: 13px;
letter-spacing: 4px;
}
h5,
h6 {
font-size: 11px;
letter-spacing: 4px;
}
hr {
height: 1px;
margin-bottom: 20px;
border: 0;
background-color: #272B2F;
}
img {
max-width: 100%;
height: auto;
border: 0;
vertical-align: middle;
}
p {
margin: 0 0 20px 0;
}
p:last-child {
margin-bottom: 0;
}
pre {
clear: both;
overflow: auto;
position: relative;
max-width: 100%;
margin: 0 0 20px 0;
padding: 20px 40px 20px 20px;
background-color: #f5f5f5;
font-family: monospace;
white-space: pre;
white-space: pre-wrap;
}
pre:after {
z-index: 5;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 20px;
background: #e5e5e5;
color: #fff;
font-family: "FontAwesome";
text-align: center;
content: "\f121";
}
table {
width: 100%;
margin-bottom: 20px;
border-collapse: separate;
border-spacing: 0;
text-align: left;
}
caption,
th {
font-size: 11px;
font-weight: 400;
letter-spacing: 4px;
text-transform: uppercase;
}
th,
td {
padding: 8px 12px;
}
tr:nth-child(odd) {
background-color: #f5f5f5;
}
ul,
ol {
margin: 0 0 20px 20px;
padding: 0;
}
li > ul,
li > ol {
margin-bottom: 0;
}
.highlight {
background-color: #272B2F;
color: #fff;
}
.twocolumn {
position: relative;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
} .alignleft {
display: inline;
float: left;
}
.alignright {
display: inline;
float: right;
}
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
.wp-caption.alignleft,
img.alignleft {
margin: 0 20px 20px 0;
}
.wp-caption.alignright,
img.alignright {
margin: 0 0 20px 20px;
}
.wp-caption.aligncenter,
img.aligncenter {
clear: both;
margin-bottom: 20px;
}
.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter {
margin-bottom: 20px;
}
.wp-caption.alignnone {
margin: 0 0 20px 0;
} .wp-caption {
max-width: 100%;
text-align: center;
}
.wp-caption-text {
padding: 10px 0 0 0;
font-size: 11px;
line-height: 16px;
letter-spacing: 4px;
text-transform: uppercase;
} .gallery {
width: calc(100% - -20px);
}
.gallery .gallery-item {
position: relative;
display: inline-block;
width: 100%;
margin: 0;
padding: 0 20px 20px 0;
text-align: center;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery .gallery-caption {
opacity: 0;
position: absolute;
bottom: 30px;
left: 10px;
margin-right: 30px;
padding: 8px 12px;
background-color: rgba(255, 255, 255, .96);
font-size: 11px;
line-height: 16px;
letter-spacing: 4px;
text-transform: uppercase;
text-align: left;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.gallery-item:hover .gallery-caption {
opacity: 1;
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
display: none;
} .fancybox-wrap {
outline: 0;
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-outer,
.fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-error {
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
#fancybox-loading {
z-index: 8060;
position: fixed;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}
#fancybox-loading div {
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, .9);
line-height: 40px;
text-align: center;
}
#fancybox-loading div:before {
font-family: FontAwesome;
content: "\f110";
-webkit-animation: spinner 2s infinite linear;
animation: spinner 2s infinite linear;
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.fancybox-nav {
z-index: 8040;
cursor: pointer;
position: absolute;
top: 0;
width: 40%;
height: 100%;
color: #272B2F;
}
.fancybox-nav span {
opacity: 0;
position: absolute;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
background-color: rgba(255, 255, 255, .9);
line-height: 40px;
text-align: center;
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.fancybox-next  {
right: 0;
}
.fancybox-next span {
right: 10px;
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
.fancybox-next span:before {
font-family: FontAwesome;
content: "\f0da";
}
.fancybox-next:hover span {
opacity: 1;
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.fancybox-prev  {
left: 0;
}
.fancybox-prev span {
left: 10px;
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
.fancybox-prev span:before {
font-family: FontAwesome;
content: "\f0d9";
}
.fancybox-prev:hover span {
opacity: 1;
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background-color: rgba(255, 255, 255, .96);
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
.fancybox-title {
display: block;
padding-top: 10px;
font-size: 11px;
line-height: 16px;
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
} input,
textarea,
button {
outline: 0;
max-width: 100%;
margin: 0;
border-radius: 0;
font-size: 100%;
-webkit-appearance: none;
}
input,
textarea {
padding: 8px 10px;
border: 1px solid #272B2F;
background-color: transparent;
}
textarea {
vertical-align: top;
width: 100%;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
padding: 7px 10px 7px 14px;
border: 3px double #272B2F;
border-radius: 0;
background-color: transparent;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
border-color: #fff;
background-color: #272B2F;
color: #fff;
} ::-webkit-input-placeholder {
color: #272B2F;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
::-moz-placeholder {
opacity: 1;
color: #272B2F;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
} ::-moz-selection {
background-color: #272B2F;
color: #fff;
}
::selection {
background-color: #272B2F;
color: #fff;
} .site-header:after,
.site-main:after,
.site-footer:after,
.post-content:after {
content: "";
display: table;
clear: both;
} .site-header {
position: relative;
width: 940px;
margin: 0 auto;
padding: 25px 0;
} .site-logo {
float: left;
font-size: 19px;
letter-spacing: 9px;
text-transform: uppercase;
} .site-navigation .nav-menu {
position: absolute;
top: 50%;
right: 0;
margin-top: -10px;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
.site-navigation a {
position: relative;
}
.site-navigation a:before {
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 1px;
margin-left: 0;
background-color: #272B2F;
content: "";
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.site-navigation a:hover:before {
width: 100%;
margin-left: -50%;
}
.site-navigation ul {
margin: 0;
}
.site-navigation li {
list-style: none;
position: relative;
float: left;
margin-left: 36px;
}
.site-navigation li:before {
position: absolute;
top: 9px;
left: -21px;
width: 2px;
height: 2px;
background-color: #272B2F;
content: "";
}
.site-navigation li:first-child:before {
display: none;
}
.site-navigation ul ul {
z-index: 999;
position: absolute;
top: 35px;
left: -999em;
width: 180px;
padding: 15px 20px;
background-color: #272B2F;
font-size: 9px;
}
.site-navigation ul ul:before {
position: absolute;
top: -15px;
left: 0;
width: 100%;
height: 15px;
content: "";
}
.site-navigation ul li:hover > ul {
left: -20px;
}
.site-navigation ul ul a {
color: #fff;
}
.site-navigation ul ul a:before {
background-color: #fff;
}
.site-navigation li li {
margin-left: 0;
padding: 5px 0;
}
.site-navigation li li:last-child {
margin-bottom: 0;
}
.site-navigation li li:before {
display: none;
}
.site-navigation ul ul ul {
top: -15px;
}
.site-navigation ul ul ul:before {
position: absolute;
top: 0;
left: -20px;
width: 20px;
height: 100%;
content: "";
}
.site-navigation ul ul li:hover > ul {
left: calc(100% - -20px);
}
.site-navigation ul ul li {
width: 100%;
}
.site-navigation ul ul .menu-item-has-children > a:after {
padding-left: 5px;
font-family: "FontAwesome";
font-size: 8px;
content: "\f105";
}
.menu-toggle {
display: none;
cursor: pointer;
position: absolute;
top: 50%;
right: 0;
width: 20px;
height: 20px;
margin-top: -10px;
}
.menu-toggle span {
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 2px;
margin-top: -1px;
background-color: #272B2F;
}
.menu-toggle span:before,
.menu-toggle span:after {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-color: #272B2F;
content: "";
-webkit-transition-duration: .1s;
transition-duration: .1s;
}
.menu-toggle span:before {
-webkit-transform: translateY(-350%);
transform: translateY(-350%);
}
.menu-toggle span:after {
-webkit-transform: translateY(350%);
transform: translateY(350%);
}
.menu-toggle.toggled-on span {
background-color: transparent;
}
.menu-toggle.toggled-on span:before {
-webkit-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
}
.menu-toggle.toggled-on span:after {
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
} .page-header {
position: relative;
width: 100%;
height: 550px;
margin-bottom: 50px;
background-color: #f5f5f5;
}
.page-header-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
.page-header-content {
z-index: 2;
position: relative;
top: 50%;
width: 470px;
margin: 0 auto;
padding: 80px 40px;
background-color: rgba(255, 255, 255, .96);
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.page-header-content:after {
z-index: -1;
position: absolute;
top: -10px;
left: -10px;
width: calc(100% - -18px);
height: calc(100% - -18px);
border: 1px solid #fff;
content: "";
}
.page-header-content a {
position: relative;
color: #b09a68;
}
.page-header-content a:after {
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 1px;
margin-left: 0;
background-color: #b09a68;
content: "";
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.page-header-content a:hover:after {
width: 100%;
margin-left: -50%;
}
.page-header-title {
margin-bottom: 0;
font-size: 23px;
line-height: 26px;
letter-spacing: 9px;
text-transform: uppercase;
}
.page-header-subtitle {
margin-top: 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 4px;
}
.page-header-category {
margin-bottom: 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 4px;
}
.page-title {
width: 940px;
margin: 25px auto 50px auto;
text-align: center;
} .site-main {
width: 940px;
margin: 50px auto 0 auto;
}
.page-content {
float: left;
width: 640px;
}
.page-template-template-full-width .page-content,
.page-template-template-portfolio .page-content,
.page-template-template-portfolio-2col .page-content,
.page-template-template-blog-full .page-content,
.page-template-template-blog-grid .page-content,
.single-project .page-content,
.tax-project-category .page-content {
width: 100%;
}
.page-sidebar {
float: right;
width: 260px;
}
.type-page {
margin-bottom: 50px;
}
.type-page:last-child {
margin-bottom: 0;
} .blog-area {
width: calc(100% - -40px);
}
.blog-area .type-post {
display: inline-block;
width: calc(50% - 40px);
margin-right: 40px;
}
.page-template-template-blog-full .blog-area .type-post {
width: calc(100% - 40px);
}
.type-post,
.type-attachment {
margin-bottom: 75px;
}
.post-thumbnail {
margin-bottom: 24px;
text-align: center;
}
.post-header {
margin-bottom: 20px;
text-align: center;
}
.post-header a {
position: relative;
}
.post-header a:after {
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 1px;
margin-left: 0;
background-color: #272B2F;
content: "";
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.post-header a:hover:after {
width: 100%;
margin-left: -50%;
}
.post-title {
margin-bottom: 0;
font-size: 23px;
line-height: 26px;
}
.post-title a:after {
height: 2px;
}
.post-category {
margin-bottom: 6px;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
.post-category a {
color: #b09a68;
}
.post-category a:after {
background-color: #b09a68;
}
.post-time {
margin-top: 6px;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
.post-footer {
overflow: hidden;
margin-top: 24px;
text-align: center;
}
.single .post-footer {
margin-top: 36px;
text-align: left;
}
.post-footer h6 {
margin-bottom: 6px;
}
.post-more {
display: inline-block;
padding: 7px 14px;
border: 3px double #272B2F;
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
}
.post-more:hover {
border-color: #fff;
background-color: #272B2F;
color: #fff;
}
.post-content a {
color: #b09a68;
}
.post-content a:hover {
color: #272B2F;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
margin-top: 50px;
}
.post-content > h1:first-child,
.post-content > h2:first-child,
.post-content > h3:first-child,
.post-content > h4:first-child,
.post-content > h5:first-child,
.post-content > h6:first-child {
margin-top: 0;
}
.post-share {
float: left;
}
.post-share a {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
border-radius: 15px;
background-color: #f5f5f5;
line-height: 30px;
text-align: center;
}
.post-share a:hover {
background-color: #272B2F;
color: #fff;
}
.post-tags {
float: right;
text-align: right;
}
.post-tags a {
display: inline-block;
margin: 0 0 5px 5px;
padding: 5px 8px 5px 12px;
border-radius: 15px;
background-color: #f5f5f5;
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
}
.post-tags a:hover {
background-color: #272B2F;
color: #fff;
} .portfolio-area {
width: calc(100% - -20px);
}
.portfolio-area .type-project {
position: relative;
display: inline-block;
width: 300px;
margin: 0 20px 20px 0;
text-align: center;
}
.page-template-template-portfolio-2col .portfolio-area .type-project {
width: 460px;
}
.project-thumbnail-image:after {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
content: "";
-webkit-transition: .525s cubic-bezier(.215, .61, .355, 1);
transition: .525s cubic-bezier(.215, .61, .355, 1);
}
.portfolio-area .type-project:hover .project-thumbnail-image:after {
opacity: .96;
}
.project-thumbnail-content {
opacity: 0;
position: absolute;
top: 50%;
width: 100%;
padding: 0 20px;
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.portfolio-area .type-project:hover .project-thumbnail-content {
opacity: 1;
}
.project-thumbnail-title {
opacity: 0;
margin-bottom: 0;
font-size: 13px;
font-weight: 700;
letter-spacing: 4px;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: .3s cubic-bezier(.215, .61, .355, 1) 0s;
transition: .3s cubic-bezier(.215, .61, .355, 1) 0s;
}
.project-thumbnail-category {
opacity: 0;
font-size: 11px;
letter-spacing: 4px;
text-transform: none;
font-style: italic;
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-transition: .3s cubic-bezier(.215, .61, .355, 1) 0s;
transition: .3s cubic-bezier(.215, .61, .355, 1) 0s;
}
.portfolio-area .type-project:hover .project-thumbnail-title,
.portfolio-area .type-project:hover .project-thumbnail-category {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.portfolio-area .type-project:hover .project-thumbnail-title {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.portfolio-area .type-project:hover .project-thumbnail-category {
-webkit-transition-delay: .3s;
transition-delay: .3s;
}
.project-thumbnail-link {
z-index: 3;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
} #infscr-loading {
display: none !important;
} .filter-area {
margin-bottom: 40px;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
}
.filter-area a {
display: inline-block;
padding: 2px 8px 2px 12px;
border-radius: 12px;
}
.filter-area a:hover {
background-color: #f5f5f5;
}
.filter-area span {
position: relative;
display: inline-block;
margin: 0 8px 10px 8px;
}
.filter-area .active {
background-color: #f5f5f5;
} .contact-form-author,
.contact-form-email,
.contact-form-subject {
position: relative;
float: left;
width: 33.33%;
}
.contact-form-author,
.contact-form-email {
padding-right: 20px;
}
.contact-form-message {
position: relative;
clear: both;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
width: 100%;
}
.contact-form label {
display: block;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
.contact-form-author label,
.contact-form-email label,
.contact-form-subject label,
.contact-form-message label {
position: absolute;
top: -6px;
left: 10px;
padding-right: 1px;
padding-left: 5px;
background-color: #fff;
line-height: 1;
}
.contact-form label.error {
position: relative;
top: 0;
left: 0;
margin-top: 5px;
padding-right: 0;
padding-left: 0;
background-color: transparent;
color: red;
font-size: 9px;
line-height: 20px;
}
.contact-form-success,
.contact-form-error {
margin-bottom: 36px;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
} .comments-area {
margin-top: 75px;
}
.comment-list {
margin: 0 0 50px 0;
}
.comment-list li {
list-style: none;
}
.comment-body {
margin: 36px 0;
}
.comment-meta {
margin-bottom: 20px;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
.comment-author .avatar {
float: left;
margin-right: 20px;
border-radius: 50%;
}
.comment-author .fn {
font-weight: normal;
}
.comment-author .says {
display: none;
}
.comment-metadata {
font-size: 9px;
}
.comment-awaiting-moderation {
margin-top: 20px;
}
.comment-reply-link {
display: inline-block;
margin-top: 20px;
padding: 2px 6px 2px 10px;
border-radius: 12px;
background-color: #f5f5f5;
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
}
.comment-reply-link:hover {
background-color: #272B2F;
color: #fff;
}
.comment-reply-title {
margin-bottom: 36px;
}
.comment-reply-title small {
float: right;
font-size: 11px;
}
.logged-in-as {
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
.comment-notes,
.form-allowed-tags {
display: none;
}
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment {
position: relative;
}
.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-comment label {
position: absolute;
top: -6px;
left: 10px;
padding-right: 1px;
padding-left: 5px;
background-color: #fff;
font-size: 11px;
line-height: 1;
letter-spacing: 4px;
text-transform: uppercase;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
width: 100%;
}
.comment-form-author,
.comment-form-email,
.comment-form-url {
float: left;
width: 33.33%;
}
.comment-form-author,
.comment-form-email {
padding-right: 20px;
}
.comment-form-comment {
clear: both;
} .widget {
margin-bottom: 50px;
}
.widget ul {
margin: 0;
}
.widget li {
list-style: none;
margin-bottom: 10px;
}
.widget li:last-child {
margin-bottom: 0;
}
.widget li > ul,
.widget li > ol {
margin-left: 20px;
}
.widget-title {
position: relative;
text-align: center;
}
.widget-title:before {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: #272B2F;
content: "";
}
.widget-title span {
display: inline-block;
padding: 0 6px 0 10px;
background-color: #fff;
}
.widget_categories li ul,
.widget_nav_menu li ul,
.widget_pages li ul {
margin-top: 10px;
}
.widget_archive,
.widget_categories,
.widget_links,
.widget_meta,
.widget_nav_menu,
.widget_pages,
.widget_recent_comments,
.widget_recent_entries {
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
.widget_archive a,
.widget_categories a,
.widget_links a,
.widget_meta a,
.widget_nav_menu a,
.widget_pages a,
.widget_recent_comments a,
.widget_recent_entries a {
position: relative;
}
.widget_archive a:after,
.widget_categories a:after,
.widget_links a:after,
.widget_meta a:after,
.widget_nav_menu a:after,
.widget_pages a:after,
.widget_recent_comments a:after,
.widget_recent_entries a:after {
position: absolute;
bottom: -2px;
left: 50%;
margin-left: 0;
width: 0;
height: 1px;
background-color: #272B2F;
content: "";
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.widget_archive a:hover:after,
.widget_categories a:hover:after,
.widget_links a:hover:after,
.widget_meta a:hover:after,
.widget_nav_menu a:hover:after,
.widget_pages a:hover:after,
.widget_recent_comments a:hover:after,
.widget_recent_entries a:hover:after {
width: 100%;
margin-left: -50%;
}
.widget_text a {
color: #b09a68;
}
.widget_text a:hover {
color: #272B2F;
} .widget_calendar table {
margin-bottom: 0;
text-align: center;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}
.widget_calendar caption {
margin-bottom: 10px;
text-align: left;
}
.widget_calendar td,
.widget_calendar th {
padding: 8px;
}
.widget_calendar tbody tr:nth-child(odd) {
background-color: transparent;
}
.widget_calendar thead,
.widget_calendar tfoot {
background-color: #f5f5f5;
} .widget_recent_entries .post-date {
display: block;
font-size: 9px;
} .instagram-pics li {
display: inline-block;
width: 31%;
margin: 0 1% 2% 1%;
text-align: center;
} #post-0 .search-form {
margin-top: 20px;
}
.screen-reader-text,
.search-submit {
display: none;
}
.search-field {
width: 100%;
} .widget_themerain_social {
text-align: center;
}
.widget_themerain_social a {
display: inline-block;
width: 30px;
height: 30px;
margin: 0 3px 6px 3px;
border-radius: 15px;
background-color: #f5f5f5;
line-height: 30px;
text-align: center;
}
.widget_themerain_social a:hover {
background-color: #272B2F;
color: #fff;
} .widget_themerain_recent_projects {
overflow: hidden;
}
.widget_themerain_recent_projects li {
float: left;
width: 31%;
margin: 0 1% 2% 1%;
text-align: center;
}  .posts-pagination {
font-size: 11px;
text-align: center;
}
.posts-pagination .page-numbers {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 15px;
line-height: 30px;
text-align: center;
}
.posts-pagination a:hover {
background-color: #272B2F;
color: #fff;
}
.posts-pagination .current {
background-color: #272B2F;
color: #fff;
} .post-navigation {
overflow: hidden;
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
}
.post-navigation i {
font-size: 11px;
}
.post-navigation a {
position: relative;
font-size: 15px;
}
.post-navigation a:after {
position: absolute;
bottom: -2px;
left: 50%;
margin-left: 0;
width: 0;
height: 1px;
background-color: #272B2F;
content: "";
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.post-navigation a:hover:after {
width: 100%;
margin-left: -50%;
}
.post-navigation .nav-prev {
float: left;
width: 50%;
padding-right: 5%;
}
.post-navigation .nav-next {
float: right;
width: 50%;
padding-left: 5%;
text-align: right;
} .project-navigation {
margin-top: 75px;
color: #ddd;
font-size: 16px;
text-align: center;
}
.project-navigation a {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 15px;
line-height: 30px;
text-align: center;
}
.project-navigation a:hover {
background-color: #272B2F;
color: #fff;
}
.project-navigation i {
position: relative;
top: -1px;
}
.project-navigation .inactive {
width: 30px;
}
.project-navigation span {
margin: 0 10px;
}
.project-navigation .fa-th {
font-size: 14px;
} .comments-pagination {
margin-bottom: 50px;
font-size: 11px;
}
.comments-pagination .page-numbers {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 15px;
line-height: 30px;
text-align: center;
}
.comments-pagination a:hover {
background-color: #272B2F;
color: #fff;
}
.comments-pagination .current {
background-color: #272B2F;
color: #fff;
} .site-footer {
width: 940px;
margin: 50px auto 0 auto;
padding: 25px 0;
text-align: center;
}
.site-copyright {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 4px;
}
.site-copyright a {
position: relative;
}
.site-copyright a:after {
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 1px;
margin-left: 0;
background-color: #272B2F;
content: "";
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.site-copyright a:hover:after {
width: 100%;
margin-left: -50%;
} @media only screen and (max-width: 980px) {
.site-header,
.page-title,
.site-main,
.site-footer,
.page-content,
.page-sidebar {
width: 728px;
}
.page-sidebar {
margin-top: 75px;
}
.page-header {
height: 400px;
}
.page-header-content {
width: 420px;
padding: 60px 20px;
}
.site-navigation .nav-menu {
display: none;
z-index: 999;
position: absolute;
top: 100%;
width: 100%;
margin-top: 0;
padding: 5px 20px;
background-color: #272B2F;
}
.site-navigation .nav-menu.toggled-on {
display: block;
}
.site-navigation a {
display: block;
padding: 5px 0;
color: #fff;
}
.site-navigation a:before {
display: none;
}
.site-navigation li {
float: none;
margin: 0;
}
.site-navigation li:before {
display: none;
}
.site-navigation ul ul {
position: static;
width: 100%;
padding: 0 0 0 20px;
background-color: transparent;
}
.site-navigation ul ul:before {
display: none;
}
.site-navigation li li {
margin: 0;
padding: 0;
}
.menu-toggle {
display: block;
}
.fancybox-nav span {
opacity: 1;
}
.fancybox-next span,
.fancybox-prev span {
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.gallery-caption {
display: none;
}
.blog-area {
width: 100%;
}
.blog-area .type-post {
width: 100%;
}
.portfolio-area .type-project {
width: 229px;
}
.page-template-template-portfolio-2col .portfolio-area .type-project {
width: 354px;
}
.page-header-content a:after,
.post-header a:after,
.widget_archive a:after,
.widget_categories a:after,
.widget_links a:after,
.widget_meta a:after,
.widget_nav_menu a:after,
.widget_pages a:after,
.widget_recent_comments a:after,
.widget_recent_entries a:after,
.site-copyright a:after {
display: none;
}
}
@media only screen and (max-width: 767px) {
.site-header,
.page-title,
.site-main,
.site-footer,
.page-content,
.page-sidebar {
width: 440px;
}
.page-header {
height: 300px;
}
.twocolumn {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
.gallery-columns-1 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-9 .gallery-item {
max-width: 100%;
}
.gallery-columns-2 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-8 .gallery-item {
max-width: 50%;
}
.contact-form-author,
.contact-form-email,
.contact-form-subject {
float: none;
width: 100%;
}
.contact-form-author,
.contact-form-email {
padding-right: 0;
}
.comment-form-author,
.comment-form-email,
.comment-form-url {
float: none;
width: 100%;
}
.comment-form-author,
.comment-form-email {
padding-right: 0;
}
.post-share {
float: none;
}
.post-tags {
float: none;
margin-top: 20px;
text-align: left;
}
.post-tags a {
margin-left: 0;
margin-right: 5px;
}
.portfolio-area .type-project {
width: 210px;
}
.page-template-template-portfolio-2col .portfolio-area .type-project {
width: 440px;
}
.post-navigation .nav-prev {
float: none;
width: 100%;
margin-bottom: 20px;
padding-right: 0;
}
.post-navigation .nav-next {
float: none;
width: 100%;
padding-left: 0;
text-align: left;
}
}
@media only screen and (max-width: 479px) {
.site-header,
.page-title,
.site-main,
.site-footer,
.page-content,
.page-sidebar {
width: 280px;
}
.page-header-content {
width: 260px;
padding: 30px 20px;
}
.gallery-columns-1 .gallery-item,
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
max-width: 100%;
}
.page-header-title,
.post-title {
font-size: 19px;
}
.portfolio-area .type-project,
.page-template-template-portfolio-2col .portfolio-area .type-project {
width: 280px;
}
}